/* Shared compact navigation. The page grid stays aligned with hero and footer. */
:root { --site-header-height:64px; }
@media(min-width:768px) { :root { --site-header-height:72px; } }
.frame > header,
body .site-header,
body.service-v2 .site-header {
  height:var(--site-header-height);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  background:transparent;
  color:#fff;
  isolation:isolate;
  backdrop-filter:blur(16px) saturate(115%);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
}
:is(.frame > header,.site-header)::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(17,19,20,.94);
  border-bottom:1px solid rgba(255,255,255,.09);
  opacity:1;
  transition:opacity 240ms ease,background-color 240ms ease;
  pointer-events:none;
}
:is(.frame > header,.service-v2 .site-header):not(.is-scrolled):not(:has(button[aria-expanded="true"])) {
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
:is(.frame > header,.service-v2 .site-header):not(.is-scrolled):not(:has(button[aria-expanded="true"]))::before {
  opacity:0;
}
:is(.frame > header,.site-header).is-scrolled::before { background:rgba(17,19,20,.86); }
:is(.frame > header,.site-header) > .logo { justify-self:start; }
:is(.frame > header,.site-header) .logo img { width:116px; }
:is(.frame > header,.site-header) > nav {
  grid-column:2;
  justify-self:center;
  display:flex;
  align-items:center;
  gap:32px;
  height:100%;
}
:is(.frame > header,.site-header) > nav a {
  display:flex;
  align-items:center;
  height:100%;
  padding:0;
  font-size:16px;
  font-weight:480;
  white-space:nowrap;
}
:is(.frame > header,.site-header) :is(.utilities,.header-tools) {
  grid-column:3;
  justify-self:end;
  margin-left:0;
  gap:22px;
}
/* The homepage has no active section in the navigation. */
.frame > header > nav a:first-child { color:inherit; }
.frame > header > nav a:hover { color:var(--accent); }
/* Maintain text contrast against the brightest part of the hero photograph. */
.frame .hero::before,
.service-cinema::before {
  content:'';position:absolute;inset:0 0 auto;height:180px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.48),transparent);
}
.frame .hero::before { z-index:-1; }
.service-cinema::before { z-index:-1; }
@media(max-width:1023px) {
  :is(.frame > header,.site-header) { grid-template-columns:1fr auto;gap:16px; }
  :is(.frame > header,.site-header) > nav { display:none; }
  :is(.frame > header,.site-header) :is(.utilities,.header-tools) { grid-column:2;gap:16px; }
}
@media(max-width:767px) {
  :is(.frame > header,.site-header) .logo img { width:104px; }
  :is(.frame > header,.site-header) :is(.utilities,.header-tools) { gap:12px; }
  .frame > header .account-label { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  :is(.frame > header,.site-header)::before { transition:none; }
}
/* The homepage menu is a sibling of the header, so it needs its own fixed position. */
#mobile-nav.mobile-panel {
  position:fixed;top:var(--site-header-height);left:0;right:0;z-index:41;
  max-height:calc(100svh - var(--site-header-height));overflow-y:auto;
}
#mobile-menu:not([hidden]) {
  max-height:calc(100svh - var(--site-header-height));overflow-y:auto;
}

/* Shop gets a small storefront mark; copied into the mobile menu with its link. */
:is(.frame > header,.site-header) > nav a:has(.shop-nav-icon),
:is(#mobile-nav,#mobile-menu) a:has(.shop-nav-icon) {
  display:flex;
  align-items:center;
  gap:9px;
}
.shop-nav-icon {
  width:20px;
  height:20px;
  flex:0 0 20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}