/* SITE HEADER — dummy top nav, matched to the reference screenshot. Fixed
   above every scene (z-index above the coverflow's own max of 150, below
   the .skip link's 900) so it reads as persistent site chrome rather than
   part of any one scene. The teal gradient and corner fold are lifted
   straight from the reference image rather than the deck's own
   petrol/terracotta palette — this bar is standing in for the site's real
   production header, not another deck scene.

   Every link below is a placeholder: href="#" only, nothing routes
   anywhere real. */

:root { --head-h: clamp(56px, 9vh, 78px); }
html { scroll-padding-top: var(--head-h); }

.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 3vw, 40px);
  height: var(--head-h);
  padding: 0 var(--pad);
  background: linear-gradient(105deg,
    #0A6E68 0%, #0E9C8C 20%, #17B69B 40%, #2CD4AC 62%, #55E6BE 82%, #8CF3D4 100%);
  overflow: hidden;
}

/* Soft sheen — a second, lighter layer over the gradient so it reads as
   glossy glass rather than a flat fill, echoing the corner fold below. */
.site-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .16) 0%, transparent 55%),
              radial-gradient(120% 140% at 85% -20%, rgb(255 255 255 / .28) 0%, transparent 60%);
}

.site-head::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: clamp(28px, 4vw, 46px); height: clamp(28px, 4vw, 46px);
  background: linear-gradient(135deg, transparent 50%, rgb(255 255 255 / .35) 50%);
  pointer-events: none;
}

.site-head__logo { flex: none; line-height: 0; }
.site-head__logo img {
  display: block; height: clamp(22px, 3.4vh, 30px); width: auto;
  filter: brightness(0) invert(1);
}

.site-head__nav {
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.site-head__nav::-webkit-scrollbar { display: none; }

.site-head__nav ul {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px);
  list-style: none; white-space: nowrap;
}

.site-head__nav a {
  /* Vertical padding is doing touch-target work, not spacing work: the type
     is ~13px, so without it each link is a ~21px-tall tap target. The
     header is a fixed 56-78px band, so there is room to take the links to a
     comfortable height without changing the bar itself. */
  display: flex; align-items: center;
  min-height: 44px; padding: 0 2px;
  font-family: var(--body); font-weight: 600;
  font-size: clamp(12.5px, 1.4vw, 15px);
  color: var(--print); text-decoration: none;
  opacity: .94;
  transition: opacity .2s var(--ease);
}
.site-head__nav a:hover,
.site-head__nav a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* ============ THE MOBILE MENU ============
   Nine links need roughly 750px of strip, and the wordmark alone takes 122px
   of a 375px phone — measured, that left about 209px of nav, enough for
   "About us", "Branding" and half of "Animation". Six of the nine were
   simply unreachable.

   A horizontal scroll strip with a fade was the first attempt at this and it
   was the wrong fix: it made the overflow *look* deliberate without making
   the links any easier to get to. This collapses them into a real disclosure
   instead.

   No JS, by design. This deck's rule is that nothing is gated on script
   (DEF-03), so the toggle is a checkbox and the panel is its sibling —
   with JS disabled the menu still opens. The checkbox is also the reason
   the markup order is toggle, then label, then nav: the ~ sibling
   combinator only reaches forward. */

.site-head__toggle { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.site-head__burger { display: none; }

@media (max-width: 1000px) {
  .site-head__burger {
    display: inline-flex; align-items: center; gap: 9px;
    margin-left: auto;
    min-height: 44px; padding: 0 4px;
    cursor: pointer;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--print);
  }
  /* Three bars: the middle is the element itself, the outer two are its
     pseudo-elements. They need to be separate boxes rather than box-shadows
     so each can rotate on its own into the X below. */
  .site-head__bars {
    position: relative; display: block;
    width: 20px; height: 2px; border-radius: 2px;
    background: var(--print);
    transition: background .2s var(--ease);
  }
  .site-head__bars::before,
  .site-head__bars::after {
    content: ""; position: absolute; left: 0;
    width: 20px; height: 2px; border-radius: 2px;
    background: var(--print);
    transition: transform .25s var(--ease);
  }
  .site-head__bars::before { top: -6px; }
  .site-head__bars::after  { top: 6px; }

  /* Open: middle bar out, outer two travel to the centre and cross, so one
     control carries both states instead of swapping icons. */
  .site-head__toggle:checked ~ .site-head__burger .site-head__bars { background: transparent; }
  .site-head__toggle:checked ~ .site-head__burger .site-head__bars::before {
    transform: translateY(6px) rotate(45deg);
  }
  .site-head__toggle:checked ~ .site-head__burger .site-head__bars::after {
    transform: translateY(-6px) rotate(-45deg);
  }
  .site-head__toggle:focus-visible ~ .site-head__burger {
    outline: 2px solid var(--print); outline-offset: 3px; border-radius: 4px;
  }

  /* position:fixed rather than absolute so the panel is not clipped by the
     header's own overflow:hidden (which the sheen and corner fold need).
     Fixed descendants escape ancestor overflow as long as no ancestor
     establishes a containing block with transform/filter — .site-head has
     neither. */
  .site-head__nav {
    position: fixed; top: var(--head-h); left: 0; right: 0;
    max-height: calc(100svh - var(--head-h)); overflow-y: auto;
    background: linear-gradient(160deg, #0A6E68 0%, #0E9C8C 46%, #17B69B 100%);
    box-shadow: 0 18px 34px -18px rgb(4 16 15 / .55);
    /* Animating opacity/transform, never height: a height transition on a
       list of unknown length is the one that janks. visibility rides along
       so a closed panel is out of the tab order, not just invisible. */
    opacity: 0; visibility: hidden;
    transform: translate3d(0, -10px, 0);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .site-head__toggle:checked ~ .site-head__nav {
    opacity: 1; visibility: visible;
    transform: translate3d(0, 0, 0);
  }

  .site-head__nav ul {
    flex-direction: column; align-items: stretch;
    gap: 0; white-space: normal;
    padding: 6px var(--pad) 14px;
  }
  .site-head__nav a {
    min-height: 52px; padding: 0;
    font-size: 15px;
    border-bottom: 1px solid rgb(255 255 255 / .14);
  }
  .site-head__nav li:last-child a { border-bottom: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-head__nav,
  .site-head__bars,
  .site-head__bars::before,
  .site-head__bars::after { transition-duration: .01ms; }
}