/* First-pass improvements for secondary pages. Loaded only on these pages. */
.site-nav .nav-links > .inquiry-link,
.topbar .top-links > .inquiry-link {
  padding: 10px 18px;
  border: 1px solid currentColor;
  opacity: 1;
}
.shared-mobile-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.shared-mobile-nav a:last-child { font-weight: 500; }
.site-nav .nav-submenu, .topbar .top-submenu { width: 240px; }

/* The existing portfolio menu keeps its own toggle and event handlers. */
.topbar #primary-nav { align-items: center; }
.topbar #primary-nav .nav-service { position: relative; padding: 22px 0; }
.topbar #primary-nav .nav-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 230px;
  padding: 8px 16px;
  background: var(--paper, #f7f5f1);
  border: 1px solid var(--line, #d8cec2);
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
}
.topbar #primary-nav .nav-submenu a { display: block; padding: 12px 0; }
.topbar #primary-nav .nav-service:hover .nav-submenu,
.topbar #primary-nav .nav-service:focus-within .nav-submenu { opacity: 1; visibility: visible; }
.topbar #primary-nav > .inquiry-link { padding: 10px 16px; border: 1px solid currentColor; }

body.kinetic-contact .hero { min-height: auto; padding-top: 136px; padding-bottom: 64px; }
.contact-estimate-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; font-size: 14px; color: #625c54; }
.hero-actions a:focus-visible, .contact-estimate-link:focus-visible,
.media-service-actions a:focus-visible { outline: 2px solid #b28d66; outline-offset: 6px; }
.article-hero .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
.article-hero .hero-actions .button { background: #f4f1ea; color: #171512; min-height: 48px; font-size: 14px; }
.article-hero .hero-actions .hero-text-link { color: #fff; }
.article-hero p.showcase-status { font-size: 14px; margin-top: 18px; color: #e6ddd0; }
.article-hero:has(.showcase-status) .hero-copy { padding: 148px 0 64px; }
.article-hero:has(.showcase-status) h1 { font-size: clamp(38px,4.8vw,64px); line-height: 1.3; }

/* Service identity remains readable over changing video frames. */
body.kinetic-page .hero.media-service-hero {
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding: 150px 5vw 120px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #171512;
}
body.kinetic-page .media-service-hero .hero-media {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  transform: none; z-index: -2;
}
body.kinetic-page .media-service-hero .hero-media::after { display: none; }
body.kinetic-page .hero.media-service-hero::after {
  content: ''; display: block; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(12,11,9,.84), rgba(12,11,9,.25) 85%), linear-gradient(0deg, rgba(12,11,9,.56), transparent 65%);
  pointer-events: none;
}
.media-service-copy { position: relative; z-index: 2; width: min(720px,100%); }
body.kinetic-page .media-service-copy .eyebrow { color: #e9d9c5; margin-bottom: 20px; }
body.kinetic-page .media-service-copy h1 { color: #fff; font-size: clamp(42px,5vw,70px); line-height: 1.35; }
body.kinetic-page .media-service-copy p { color: #f0ebe3; max-width: 34em; font-size: 17px; line-height: 1.9; }
.media-service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; }
.media-service-actions a { display: inline-flex; align-items: center; min-height: 48px; font-size: 14px; }
.media-service-actions .media-primary { background: #f4f1ea; color: #171512; padding: 14px 22px; }
.media-service-actions .media-secondary { color: #fff; border-bottom: 1px solid #fff; }
.fe-intro .fe-service-title { font-size: clamp(42px,5vw,72px); margin: 25px 0; }

/* Case text remains legible over the brightest sections of the photograph. */
body:has(.hero-inner) .hero::after {
  background: linear-gradient(90deg,rgba(14,12,10,.76),rgba(14,12,10,.05) 85%),linear-gradient(0deg,rgba(14,12,10,.5),transparent 75%);
}
.gs-frame video { width: 100%; height: 100%; object-fit: contain; background: #171512; }
.gs p { color: #d0c6b8; }
.gs { scroll-margin-top: 100px; }

@media (max-width: 900px) {
  body.kinetic-contact .hero { padding-top: 112px; }
  body.kinetic-page .hero.media-service-hero { padding: 136px 5vw 100px; }
  .topbar #primary-nav { gap: 16px; }
}
@media (max-width: 700px) {
  .topbar #primary-nav { align-items: stretch; max-height: calc(100dvh - 76px); overflow-y: auto; }
  .topbar #primary-nav .nav-service { padding: 0; }
  .topbar #primary-nav .nav-submenu {
    position: static; width: auto; padding: 4px 0 4px 16px; margin-top: 8px;
    border: 0; border-left: 1px solid var(--line,#d8cec2); background: transparent;
    opacity: 1; visibility: visible; transform: none;
  }
}
@media (max-width: 760px) {
  .article-hero:has(.showcase-status) h1 { font-size: 32px; }
  body.kinetic-contact .hero { padding: 104px 18px 36px; gap: 28px; }
  body.kinetic-contact .hero h1 { font-size: clamp(32px,9vw,40px); }
  body.kinetic-contact .hero .hero-actions { gap: 18px; margin-top: 20px; }
  body.kinetic-contact .hero .hero-media { aspect-ratio: 16/10; }
  .contact-estimate-link { margin-top: 8px; }
  body.kinetic-page .hero.media-service-hero { min-height: 90svh; padding: 124px 18px 100px; }
  body.kinetic-page .media-service-copy h1 { font-size: 38px; }
  body.kinetic-page .media-service-copy p { font-size: 15px; }
  .media-service-actions { gap: 16px; margin-top: 24px; }
}