/* V34 — Services navigation deliberately matches the approved homepage header.
   Transparent at top, solid midnight navy on scroll, identical official mark assets,
   brand typography, CTA, and mobile menu. Scoped ONLY to the Services page. */
body.service-page .site-header,
body.service-page .site-header:not(.is-scrolled) {
  background:transparent;
  border-bottom:1px solid transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.service-page .site-header.is-scrolled {
  background:rgba(5,30,56,.97);
  border-bottom:1px solid rgba(198,230,251,.18);
  box-shadow:0 12px 35px rgba(0,17,34,.20);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
body.service-page .site-header .brand-orca{color:#c9dcec}
body.service-page .site-header .brand-clean{color:#fff}
body.service-page .site-header .site-nav a:not(.nav-cta){color:#f6fbff}
body.service-page .site-header .site-nav a:not(.nav-cta)::after{background:#bce0fb}
body.service-page .site-header .header-brand{gap:10px}
body.service-page .site-header .brand-wordmark{
  font-size:clamp(1.85rem,2.2vw,2.08rem);
  letter-spacing:-.045em;
}
/* Same transparent/original-mark swap as the homepage V21 header. */
body.service-page .site-header .header-brand-mark {
  position:relative;display:block;width:40px;height:40px;flex:0 0 40px;
}
body.service-page .site-header .header-brand-mark .header-brand-icon{
  position:absolute;display:block;max-width:none;margin:0;
  object-fit:contain;flex:none;transition:opacity .24s ease;
}
body.service-page .site-header .header-brand-mark .header-brand-icon--hero{
  inset:0;width:40px;height:40px;border-radius:0;opacity:1;
  filter:drop-shadow(0 1px 4px rgba(1,16,31,.25));
}
body.service-page .site-header .header-brand-mark .header-brand-icon--tile{
  top:3px;left:3px;width:34px;height:34px;border-radius:7px;opacity:0;
}
body.service-page .site-header.is-scrolled .header-brand-icon--hero{opacity:0}
body.service-page .site-header.is-scrolled .header-brand-icon--tile{opacity:1}
/* The quiet glass CTA is copied from approved homepage V20 Option B. */
body.service-page .site-header .nav-cta,
body.service-page .site-header:not(.is-scrolled) .nav-cta{
  color:#f6fbff;background:rgba(235,246,255,.09);
  border:1px solid rgba(236,247,255,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
body.service-page .site-header .nav-cta:hover,
body.service-page .site-header .nav-cta:focus-visible{
  color:#fff;background:rgba(235,246,255,.19);
  border-color:rgba(255,255,255,.75);
}
body.service-page .site-header.is-scrolled .nav-cta{
  color:#f6fbff;background:rgba(233,243,253,.15);
  border-color:rgba(236,247,255,.45);
}
body.service-page .site-header .nav-cta:focus-visible{
  outline:3px solid #90cff5;outline-offset:3px;
}
/* Visually the same category identifiers, now unnumbered. */
body.service-page .services-film-category{
  color:#b8dbf2;text-transform:uppercase;letter-spacing:.145em;
  font-size:.68rem;font-weight:780;margin-bottom:3px;
}
@media(max-width:760px){
  body.service-page .site-header .brand-wordmark{font-size:1.86rem}
  body.service-page .site-header .header-brand-mark{width:38px;height:38px;flex-basis:38px}
  body.service-page .site-header .header-brand-mark .header-brand-icon--hero{width:38px;height:38px}
  body.service-page .site-header .header-brand-mark .header-brand-icon--tile{top:2.5px;left:2.5px;width:33px;height:33px}
  body.service-page .site-header .menu-button span:not(.sr-only){background:#f3f9ff}
  body.service-page .site-header .site-nav{
    background:#092b4b;border:1px solid rgba(188,220,246,.27);
    box-shadow:0 16px 45px rgba(1,18,36,.3);
  }
  body.service-page .site-header .site-nav a:not(.nav-cta){color:#f4f9ff}
  body.service-page .site-header .site-nav .nav-cta,
  body.service-page .site-header:not(.is-scrolled) .site-nav .nav-cta,
  body.service-page .site-header.is-scrolled .site-nav .nav-cta{
    background:#e5edf1;border-color:#e5edf1;color:#082b49;
  }
  body.service-page .services-film-category{font-size:.59rem;letter-spacing:.1em}
}
@media(prefers-reduced-motion:reduce){
  body.service-page .site-header .header-brand-mark .header-brand-icon{transition:none}
}