/* ===================================================================
   Header: three neon dropdown menus, one button.

   Loaded last so it can take over .header from core.css without a
   single !important. Everything here reuses the light language the
   rest of the site already speaks: cyan foreground, blue near glow,
   blue bloom, and the same 2.8s flow cycle used by the illustration
   currents in final-motion.css.

   Motion rules are the site's existing ones, not new ones: the OS
   reduced-motion setting turns the decorative parts off, and a hidden
   tab parks the looping light. There are no visible motion controls.
   =================================================================== */

:root {
  /* One place for the header's light, so the bar, the panel and the
     logo cannot drift apart. */
  --nav-edge: #69efff;          /* the lit hairline                  */
  --nav-near: #00caff;          /* close glow, sits on the edge      */
  --nav-bloom: #007aff;         /* wide bloom, reads as atmosphere   */
  --nav-surface: rgba(5, 21, 40, 0.82);
  --nav-surface-solid: #03182b;
  --nav-ease: cubic-bezier(0.22, 0.8, 0.28, 1);
  --nav-dur: 420ms;
  /* How far the bar shrinks once you leave the top of the page. */
  --nav-pad-y: 22px;
  --nav-pad-y-small: 11px;
  --nav-logo-w: 165px;
  --nav-logo-w-small: 132px;
}

/* ------------------------------ the bar --------------------------- */

/* Fixed rather than absolute. Both are out of normal flow, so nothing
   below the header moves and no page needed its spacing re-tuned —
   the only change is that the bar now stays with you down the page. */
.header {
  --route-y:8px;
  --route-x:calc(var(--pad-x) - 18px);
  --route-radius:14px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding: var(--nav-pad-y) var(--pad-x);
  transition:
    padding var(--nav-dur) var(--nav-ease),
    background-color var(--nav-dur) var(--nav-ease),
    backdrop-filter var(--nav-dur) var(--nav-ease);
}

/* The rectangle the header collapses into once you scroll. It is a
   child rather than a border on .header itself, so the inset sheen,
   the hairline and the outer bloom can each be tuned separately. */
.header::before {
  content: "";
  position: absolute;
  inset: var(--route-y) var(--route-x);
  border: 1px solid transparent;
  border-radius: var(--route-radius);
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: scaleY(0.82);
  transform-origin: 50% 0;
  pointer-events: none;
  transition:
    opacity var(--nav-dur) var(--nav-ease),
    transform var(--nav-dur) var(--nav-ease),
    border-color var(--nav-dur) ease,
    box-shadow var(--nav-dur) ease;
}

.header.is-stuck {
  padding: var(--nav-pad-y-small) var(--pad-x);
}

.header::before,
.header.is-stuck::before {
  opacity: 1;
  transform: scaleY(1);
  border-color: color-mix(in srgb, var(--nav-edge) 62%, transparent);
  background: linear-gradient(180deg, rgba(9, 32, 58, 0.93), rgba(4, 17, 33, 0.95));
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 22px color-mix(in srgb, var(--nav-bloom) 34%, transparent),
    0 0 9px color-mix(in srgb, var(--nav-near) 70%, transparent),
    0 0 34px color-mix(in srgb, var(--nav-bloom) 52%, transparent),
    0 18px 38px rgba(0, 8, 20, 0.62);
}

/* Keep the bar's own contents above its neon plate. */
.header > * { position: relative; z-index: 1; }

/* Anchor links must not land under the fixed bar. */
:where(section, [id]) { scroll-margin-top: 104px; }

/* ------------------------------- logo ----------------------------- */

.logo {
  position: relative;
  width: var(--nav-logo-w);
  transition: width var(--nav-dur) var(--nav-ease);
}
.header.is-stuck .logo { width: var(--nav-logo-w-small); }

.logo img {
  position: relative;
  z-index: 1;
  transform: scale(1);
  filter: drop-shadow(0 0 0 transparent);
  transition:
    transform var(--nav-dur) var(--nav-ease),
    filter var(--nav-dur) ease;
}

/* The lamp behind the wordmark. Kept as its own layer so the glow can
   bloom past the image's edges without scaling the artwork with it. */
.logo-glow {
  position: absolute;
  inset: -34% -16%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 50%,
    color-mix(in srgb, var(--nav-near) 46%, transparent) 0%,
    color-mix(in srgb, var(--nav-bloom) 26%, transparent) 42%,
    transparent 72%
  );
  opacity: 0;
  transform: scale(0.72);
  pointer-events: none;
  transition:
    opacity var(--nav-dur) var(--nav-ease),
    transform var(--nav-dur) var(--nav-ease);
}

@media (hover: hover) {
  .logo:hover .logo-glow,
  .logo:focus-visible .logo-glow { opacity: 1; transform: scale(1); }
  .logo:hover img,
  .logo:focus-visible img {
    transform: scale(1.055);
    filter:
      drop-shadow(0 0 5px color-mix(in srgb, var(--nav-near) 85%, transparent))
      drop-shadow(0 0 16px color-mix(in srgb, var(--nav-bloom) 72%, transparent));
  }
}
.logo:focus-visible { outline: none; }
.logo:focus-visible .logo-glow { opacity: 1; transform: scale(1); }

/* ---------------------------- the menus --------------------------- */

.nav-bar { display: flex; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-slot { position: relative; list-style: none; }

.nav-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  font: 600 15px var(--body);
  cursor: pointer;
  transition: color 260ms ease;
}
.nav-trigger > span { position: relative; z-index: 1; }
.nav-trigger:hover,
.nav-trigger[aria-expanded="true"] { color: #fff; }
.nav-trigger[data-nav-current] { color: var(--cyan); }

/* The chevron is the shared `arrow` icon rotated a quarter turn, so
   the header does not introduce a second arrow shape to the set. */
.nav-chevron {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  rotate: 90deg;
  transition: rotate 320ms var(--nav-ease), opacity 260ms ease;
  opacity: 0.66;
}
.nav-trigger:hover .nav-chevron { opacity: 1; }
.nav-trigger[aria-expanded="true"] .nav-chevron { rotate: 270deg; opacity: 1; }

/* The travelling pill. One element for the whole bar, moved and
   resized by nav-neon.js — this is the vanilla stand-in for the
   reference component's shared layout animation. */
.nav-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(0, 98, 255, 0.24), rgba(0, 98, 255, 0.12));
  border: 1px solid color-mix(in srgb, var(--nav-edge) 42%, transparent);
  box-shadow:
    inset 0 0 12px color-mix(in srgb, var(--nav-bloom) 42%, transparent),
    0 0 8px color-mix(in srgb, var(--nav-near) 46%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition:
    transform var(--nav-dur) var(--nav-ease),
    width var(--nav-dur) var(--nav-ease),
    height var(--nav-dur) var(--nav-ease),
    opacity 220ms ease;
}
.nav-pill.is-on { opacity: 1; }
/* First appearance must not slide in from the corner. */
.nav-pill.no-move { transition: opacity 220ms ease; }

/* ---------------------------- the panel --------------------------- */

.nav-panel-wrap {
  position: absolute;
  left: 0;
  top: 100%;
  padding-top: 12px;
  z-index: 5;
}
.nav-panel-wrap[hidden] { display: none; }

.nav-panel {
  position: relative;
  /* One width for every menu (sized to the widest, Play), so the three
     panels match as you move between them. */
  width: 346px;
  max-width: calc(100vw - 32px);
  padding: 22px 26px 24px;
  border: 1px solid color-mix(in srgb, var(--nav-edge) 46%, transparent);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(10, 34, 60, 0.97), rgba(4, 16, 31, 0.98));
  backdrop-filter: blur(18px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 30px color-mix(in srgb, var(--nav-bloom) 26%, transparent),
    0 0 10px color-mix(in srgb, var(--nav-near) 52%, transparent),
    0 0 40px color-mix(in srgb, var(--nav-bloom) 46%, transparent),
    0 26px 52px rgba(0, 7, 18, 0.66);
  transform-origin: 18% 0;
}

/* The light that runs along the panel's top edge. Same dash-and-flow
   idea as the illustration currents, drawn with a gradient because a
   border cannot carry a dash offset. */
.nav-panel-edge {
  position: absolute;
  left: 14px;
  right: 14px;
  top: -1px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 22%,
    var(--nav-edge) 38%,
    #fff 46%,
    var(--nav-edge) 54%,
    transparent 70%,
    transparent 100%
  );
  background-size: 260% 100%;
  filter: drop-shadow(0 0 4px var(--nav-near)) drop-shadow(0 0 9px var(--nav-bloom));
  opacity: 0.9;
  pointer-events: none;
}

.nav-panel-cols { display: flex; gap: 38px; }
.nav-col { flex: 1 1 auto; min-width: 0; }
.nav-col > ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }

.nav-col-title {
  margin: 0 0 12px;
  font: 600 11px var(--body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--nav-near) 78%, #fff);
}

.nav-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background-color 260ms ease;
}
.nav-item:hover,
.nav-item:focus-visible {
  background: rgba(0, 98, 255, 0.16);
  outline: none;
}

.nav-item-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(120, 175, 225, 0.38);
  border-radius: 9px;
  color: #cfe6ff;
  background: rgba(8, 28, 51, 0.7);
  transition:
    border-color 300ms ease,
    color 300ms ease,
    box-shadow 300ms ease,
    transform 300ms var(--nav-ease);
}
.nav-item-icon .icon { width: 19px; height: 19px; }

.nav-item:hover .nav-item-icon,
.nav-item:focus-visible .nav-item-icon {
  transform: scale(1.08);
  border-color: var(--nav-edge);
  color: #fff;
  box-shadow:
    inset 0 0 12px color-mix(in srgb, var(--nav-bloom) 46%, transparent),
    0 0 7px color-mix(in srgb, var(--nav-near) 72%, transparent),
    0 0 18px color-mix(in srgb, var(--nav-bloom) 58%, transparent);
}

.nav-item-text { display: block; line-height: 1.28; }
.nav-item-label {
  display: block;
  font: 600 14.5px var(--body);
  color: #f7fbff;
}
.nav-item-blurb {
  display: block;
  margin-top: 2px;
  font: 400 12.5px var(--body);
  /* 5.6:1 on the panel's darkest stop. */
  color: #a2bfda;
  transition: color 300ms ease;
}
.nav-item:hover .nav-item-blurb,
.nav-item:focus-visible .nav-item-blurb { color: #e7f0ff; }

.nav-item[aria-current="page"] .nav-item-label { color: var(--cyan); }
.nav-item[aria-current="page"] .nav-item-icon { border-color: color-mix(in srgb, var(--cyan) 70%, transparent); }

/* --------------------------- the CTA ------------------------------ */

.nav-cta {
  position: relative;
  transition: box-shadow 320ms ease, transform 320ms var(--nav-ease);
}
@media (hover: hover) {
  .nav-cta:hover {
    transform: translateY(-1px) scale(var(--cta-scale, 1));
    box-shadow:
      0 0 8px color-mix(in srgb, var(--nav-near) 76%, transparent),
      0 0 26px color-mix(in srgb, var(--nav-bloom) 62%, transparent);
  }
}

/* The hamburger is mobile-only now.

   Above the dropdown breakpoint the three menus already reach every
   page it held — the only one missing is Home, which the logo is. So
   on desktop it was a second, redundant way into the same index
   sitting right next to the CTA. Below 1001px the menus are hidden and
   it becomes the only navigation, so it stays. */
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}

/* Below the breakpoint it is the whole index and the only navigation. */
.menu-toggle { transition: border-color 300ms ease, box-shadow 300ms ease; }
@media (hover: hover) {
  .menu-toggle:hover {
    border-color: var(--nav-edge);
    box-shadow:
      0 0 7px color-mix(in srgb, var(--nav-near) 62%, transparent),
      0 0 18px color-mix(in srgb, var(--nav-bloom) 48%, transparent);
  }
}

/* --------------------------- motion ------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* Panel arrival. Short, and it never gates the content: the links
     are in the DOM and focusable the moment the panel is unhidden. */
  .nav-panel-wrap[data-state="open"] .nav-panel { animation: nav-panel-in 260ms var(--nav-ease) both; }
  .nav-panel-wrap[data-state="closing"] .nav-panel { animation: nav-panel-out 170ms ease both; }
  /* Travelling from another open menu: the FLIP in nav-neon.js owns
     the movement, so the arrival keyframe must stand down. */
  .nav-panel-wrap.is-morphing .nav-panel { animation: none; }

  /* The edge light runs on the same 2.8s cycle as every other current
     on the site. It parks itself when the tab is hidden. */
  .nav-panel-edge { animation: nav-edge-flow 2.8s linear infinite; }
}

@keyframes nav-panel-in {
  from { opacity: 0; transform: translateY(-7px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes nav-panel-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-5px) scale(0.99); }
}
@keyframes nav-edge-flow {
  from { background-position: 150% 0; }
  to   { background-position: -110% 0; }
}

/* Hidden tab: park the loop, exactly like the illustration currents. */
body.v7-document-hidden .nav-panel-edge { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .header,
  .header::before,
  .logo,
  .logo img,
  .logo-glow,
  .nav-pill,
  .nav-chevron,
  .nav-item-icon { transition: none; }
  .nav-panel-edge {
    animation: none;
    background: linear-gradient(90deg, transparent, var(--nav-edge), transparent);
  }
  .nav-panel-wrap[data-state="open"] .nav-panel,
  .nav-panel-wrap[data-state="closing"] .nav-panel { animation: none; }
}

/* -------------------------- narrow widths ------------------------- */

/* Below this the dropdowns would be wider than the screen, so they go
   away entirely and the hamburger index takes over — the behaviour
   that was already tested and working. */
@media (max-width: 1023px) {
  /* `.header .nav-bar`, not `.nav-bar`: core.css carries
     `.header nav { display: flex }` at (0,1,1), which silently beat a
     bare `.nav-bar` at (0,1,0) no matter which sheet loaded last. The
     effect was a dead band from 901px to 1000px where the dropdowns
     stayed on screen at a width they were meant to be hidden at —
     core.css only hides them itself below 900px. */
  .header .nav-bar { display: none; }
  .nav-pill { display: none; }
  /* Below the breakpoint the hamburger is the navigation and the CTA
     stands down. Stated here rather than left to homepage.css, for
     the reason given on the min-width side. */
  .header .nav-cta { display: none; }
  :where(section, [id]) { scroll-margin-top: 84px; }
}

@media (max-width: 700px) {
  .header { padding: 14px var(--pad-x); }
  .header.is-stuck { padding: 9px var(--pad-x); }
  .header { --route-y:5px; --route-x:calc(var(--pad-x) - 12px); --route-radius:12px; }
  :where(section, [id]) { scroll-margin-top: 74px; }
}

/* Without JavaScript the panels cannot open, so the triggers would be
   dead controls. Hide them and leave the logo, the button and the
   hamburger's own no-JS handling. */
html:not(.js) .nav-bar { display: none; }

/* ------------------- the CTA shrinks with the bar ------------------ */

/* The button travels with the bar, but it is SCALED rather than
   re-typeset.

   It used to animate font-size, min-height and padding together, which
   re-lays-out the button on every scroll to and from the top — the box
   changing size under a 420ms transition is what read as the button
   not holding still. A transform leaves the layout box at 177x44 and
   just draws it smaller, so nothing reflows.

   transform-origin pins the right edge, so the button stays aligned
   with the end of the bar instead of drifting inward as it shrinks.
   The scale lives in a custom property so the hover and press
   transforms can compose with it instead of cancelling it.

   Desktop only: below the breakpoint the bar is already compact and
   shrinking a touch target there would take it under a comfortable
   minimum. */
@media (min-width: 1024px) {
  /* homepage.css still carries `@media (max-width:1100px) {
     .header-actions > .button { display: none } }` from the header
     this replaced, which collapsed to a hamburger at 1100px. This
     one shows the bar from 1001px, so between 1001 and 1100 the nav
     was up, the hamburger was gone and the pilot button was hidden
     — a 100px band, squarely on 13" laptops, with no call to action
     in the header at all. Same specificity as the old rule (0,2,0);
     this sheet loads later, so it wins on order. */
  .header .nav-cta { display: inline-flex; }
  .header .nav-cta {
    --cta-scale: 1;
    transform-origin: 100% 50%;
    transform: scale(var(--cta-scale));
    transition: transform var(--nav-dur) var(--nav-ease), box-shadow 320ms ease;
  }
  /* 0.88 lands on ~156x39, the size the old font-size rule produced. */
  .header.is-stuck .nav-cta { --cta-scale: .88; }
  .header .nav-cta:hover  { transform: translateY(-1px) scale(var(--cta-scale)); }
  .header .nav-cta:active { transform: translateY(1px) scale(calc(var(--cta-scale) * .978)); }
}

/* ===================================================================
   Handing over to the footer.

   nav-neon.js sets .is-gone on the header once the footer's top edge
   reaches the header's own bottom, and clears it on the way back up.

   The first pass at this transitioned translate and opacity on the
   header's existing 420ms / cubic-bezier(.22,.8,.28,1). Sampled frame
   by frame, that curve had the bar 87% of the way up and down to 9%
   opacity within 200ms -- an ease-OUT front-loads its movement, and
   over a 66px travel the whole thing read as a blink rather than an
   exit. Hence two separate transitions, one per direction.

   Leaving: transform-origin pins the bar to the very top of the
   screen, so shrinking it reads as being drawn into the edge rather
   than falling away from it, and an ease-IN means it drifts before it
   goes. The fade is held back 170ms so you watch it shrink first
   instead of it dissolving on the spot.

   Returning: the site's own curve, quicker, because arriving should
   feel like it snaps into place.

   `visibility` rides along on a zero-length transition with a delay:
   the bar stays visible for the whole exit, then goes hidden, which
   takes its links out of the tab order while it is off screen. The JS
   drops focus and closes any open panel before that, so nothing is
   stranded behind it.
   =================================================================== */
.header {
  transform-origin: 50% 0;
  transition:
    padding var(--nav-dur) var(--nav-ease),
    background-color var(--nav-dur) var(--nav-ease),
    translate 420ms var(--nav-ease),
    scale 420ms var(--nav-ease),
    opacity 240ms ease,
    visibility 0s linear 0s;
}
.header.is-gone {
  translate: 0 -38%;
  scale: 0.78;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* The two halves are deliberately on different curves. Putting both
     on the ease-in left 200ms where nothing perceptibly happened, which
     reads as lag on a scroll-driven change. The shrink leads on an
     ease-out so the bar starts drawing into the top edge at once; the
     lift holds and then slips away under it. */
  transition:
    scale 500ms cubic-bezier(0.3, 0.12, 0.45, 1),
    translate 520ms cubic-bezier(0.6, 0, 0.7, 0.25),
    opacity 280ms ease 200ms,
    visibility 0s linear 520ms;
}
.header.is-gone::before { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .header,
  .header.is-gone {
    transition: opacity 0s, visibility 0s;
  }
  .header.is-gone {
    translate: none;
    scale: none;
  }
}

/* Standard v1: one stable header allocation at each breakpoint. */
.header,.header.is-stuck{height:var(--ds-header);box-sizing:border-box;padding:20px var(--ds-gutter);--route-y:12px;--route-x:var(--ds-gutter);}
.header .nav-trigger{min-height:44px;font:600 var(--ds-nav)/1.25 var(--ds-ui);letter-spacing:.01em}
.header .nav-item{font-family:var(--ds-body);font-size:1rem}
.header .menu-toggle{min-width:44px;min-height:44px}
.header .nav-cta{font:700 1rem/1.25 var(--ds-ui);min-height:48px;transform:none}
.header,.header a,.header button{cursor:auto}.header a,.header button{cursor:pointer}
@media(max-width:1023px){.header,.header.is-stuck{padding:18px var(--ds-gutter)}}
@media(max-width:767px){.header,.header.is-stuck{padding:14px var(--ds-gutter);--route-y:8px}}