/* aimlink.ai header and menus. Load after site.css; the rules join its cascade layers.
   Design after veo.com: logo with the menu right after it, Support and a compact pill CTA on the right,
   16 px type, a soft chip behind a hovered link, mega menus as a second glass card 4 px under the bar,
   and on phones a floating bar at the bottom with the logo up top.
   Motion after cibby.app: on the page grid at the top, the bar gathers into a floating glass pill after
   48 px (320 ms, cubic-bezier(.2, .7, .2, 1)), the CTA fills in, and the mark reacts once.
   Only transform, opacity and clip-path move. Geometry for the pill comes from assets/nav.js.
   Like cibby.app's, the bar is part of the background at the top: no glass, no lift, the links straight on the
   page (in the colour of the section under it) and the CTA as a plain word. Scrolled, the glass (a frosted card,
   white at 74 % over a 32 px blur on a light section, dark on a dark one) fades in inside the pill's shape, the CTA
   fills and the mark reacts. On the start page "scrolled" starts where the film ends (data-nav-origin, set by
   film.js). The bar is cibby.app's size: a 62 px pill (18 px / 9 px padding, 22 px radius) that is only as wide as its
   content, a 44 px mark with AIMLINK in bold next to it (white on the dark top, ink on the white pill), 14 px links, a
   40 px button. The header is pinned in index.html: dark at the top, frosted white once it is the pill
   (data-nav-theme-fixed, data-nav-theme-scrolled; nav.js). A mega menu does
   not hang from it as a second card: the pill's own glass grows into one card (wider than the pill, as tall as the
   panel) while the links stay where they are, so a parked pointer never moves from one link to another. */

@layer sections {
  .skip-link {
    position: fixed; left: 16px; top: 12px; z-index: var(--z-skip-link);
    padding: 12px 18px; border-radius: var(--radius-pill);
    background: var(--action-bg); color: var(--action-fg); font-weight: 500;
    transform: translateY(-160%);
    transition: transform var(--duration-nav) var(--ease-out);
  }
  .skip-link:focus-visible { transform: none; box-shadow: 0 0 0 6px var(--bg); }
  .menu-open, .menu-open body { overflow: hidden; }

  /* ───────────── Desktop bar ───────────── */
  .site-header {
    --bar-top: calc(env(safe-area-inset-top, 0px) + 14px);
    --bar-h: 62px;
    --bar-gap: 8px;             /* under the bar */
    --nav-r: 22px;
    --bar-inset: clamp(12px, 3.4vw, 48px); /* the wide bar's side inset (veo.com: 49 px at 1440) */
    --pill-w: 900px;            /* nav.js: the content plus room to breathe */
    --shift-start: 0px;         /* nav.js: how far the logo and menu move into the pill */
    --shift-end: 0px;           /* nav.js: how far Support and the CTA move into the pill */
    --inner-l: var(--gutter);   /* nav.js: where the logo sits on the page grid */
    --inner-r: var(--gutter);
    --mega-h: 0px;              /* nav.js: height of the open mega panel */
    /* The bar's own box follows the pill once scrolled and is page-wide (veo.com) at the top */
    --panel-l: calc(50% - var(--pill-w) / 2);
    --panel-w: var(--pill-w);
    --panel-pad-l: 24px;
    --panel-pad-r: 24px;
    /* The mega menu is exactly as wide as the bar above it (pill-wide once scrolled, page-wide at the top) */
    --mega-max: 76rem;          /* scrolled, the card the pill grows into is this wide at most */
    --mega-w: min(var(--mega-max), 100% - 2 * var(--bar-inset));
    --mega-l: calc(50% - var(--mega-w) / 2);
    --mega-pad-l: 28px;
    --mega-pad-r: 28px;
    position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
    height: calc(var(--bar-top) + var(--bar-h) + var(--bar-gap));
    pointer-events: none;
  }
  .site-header:not(.is-scrolled) {
    --panel-l: var(--bar-inset);
    --panel-w: calc(100% - 2 * var(--bar-inset));
    --panel-pad-l: calc(var(--inner-l) - var(--bar-inset));
    --panel-pad-r: calc(var(--inner-r) - var(--bar-inset));
    /* at the top the menu card is the whole bar, whose links sit on the page grid */
    --mega-w: var(--panel-w);
    --mega-l: var(--panel-l);
    --mega-pad-l: var(--panel-pad-l);
    --mega-pad-r: var(--panel-pad-r);
  }

  /* The bar's content always sits on the page grid; scrolled, the two groups slide into the pill */
  .nav {
    display: flex; align-items: center;
    width: min(100% - 2 * var(--gutter), var(--container)); height: var(--bar-h); margin: var(--bar-top) auto 0;
    color: var(--text);
  }
  .nav > * { pointer-events: auto; }
  .nav-logo + .nav-list { margin-left: 28px; }
  .nav-list { display: flex; align-items: center; }
  .nav-list-end { margin-left: auto; gap: 4px; }

  /* Glass: not there at the top (the bar is part of the page), forming inside the pill once scrolled, and growing into
     one card with the open mega menu (the whole bar at the top, up to --mega-max once scrolled). The box is tall
     enough for the largest card; only its clip-path (and opacity) moves, the content never resizes. */
  .nav-bg {
    position: absolute; top: 0; left: 0; right: 0; height: min(92vh, 64rem); pointer-events: none;
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    opacity: 0;
    clip-path: inset(var(--bar-top) var(--bar-inset) calc(100% - var(--bar-top) - var(--bar-h)) round var(--nav-r));
    /* Back to the strip: the glass fades once it has started to widen */
    transition:
      clip-path var(--duration-morph) var(--ease-morph),
      opacity 200ms var(--ease-out) 80ms,
      background-color var(--duration-nav) var(--ease-hover);
  }
  .site-header.is-scrolled .nav-bg {
    opacity: 1;
    clip-path: inset(var(--bar-top) calc(50% - var(--pill-w) / 2) calc(100% - var(--bar-top) - var(--bar-h)) round var(--nav-r));
    transition:
      clip-path var(--duration-morph) var(--ease-morph),
      opacity 160ms var(--ease-out),
      background-color var(--duration-nav) var(--ease-hover);
  }
  .site-header.is-open .nav-bg {
    opacity: 1;
    clip-path: inset(var(--bar-top) calc(100% - var(--mega-l) - var(--mega-w)) calc(100% - var(--bar-top) - var(--bar-h) - 4px - var(--mega-h)) var(--mega-l) round var(--nav-r));
    transition:
      clip-path var(--duration-morph) var(--ease-morph),
      opacity 160ms var(--ease-out),
      background-color var(--duration-nav) var(--ease-hover);
  }
  /* The lift arrives once the shape has settled (it is a separate box: clip-path would cut a shadow) */
  .nav-shadow {
    position: absolute; pointer-events: none; border-radius: var(--nav-r);
    top: var(--bar-top); height: var(--bar-h); left: var(--panel-l); width: var(--panel-w);
    box-shadow: var(--shadow-nav); opacity: 0;
    transition: opacity 240ms var(--ease-out), left var(--duration-morph) var(--ease-morph), width var(--duration-morph) var(--ease-morph), height var(--duration-morph) var(--ease-morph);
  }
  .site-header.is-scrolled .nav-shadow, .site-header.is-open .nav-shadow { opacity: 1; transition-delay: 120ms, 0s, 0s, 0s; }
  .site-header.is-open .nav-shadow { left: var(--mega-l); width: var(--mega-w); height: calc(var(--bar-h) + 4px + var(--mega-h)); }
  @media (prefers-reduced-transparency: reduce) {
    .nav-bg, .mega-bg, .mbar-bg { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }

  /* Logo: the mark leans in a touch with the pill; when the bar compacts it takes a shot (cibby.app's
     mascot reacts at this moment) */
  .nav-logo { position: relative; min-height: 44px; gap: 0.5rem; color: var(--text); }
  .nav-logo svg { width: 40px; height: 40px; transition: transform var(--duration-morph) var(--ease-morph); }
  .nav-logo span { font: 700 1.875rem/1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); padding-top: 0.06em; }
  .site-header.is-scrolled .nav-logo svg { transform: scale(0.94); }
  .nav-logo::after, .mbar-home::after {
    content: ""; position: absolute; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%;
    box-shadow: 0 0 0 1.5px var(--accent-strong); opacity: 0; pointer-events: none;
  }
  .nav-logo::after { left: 1px; }
  .mbar-home::after { left: 50%; margin-left: -13px; }

  /* Links: muted at rest, full on hover (cibby.app), with veo.com's chip behind them */
  .nav-link {
    position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 4px;
    min-height: 40px; padding: 0 11px; border: 0; border-radius: 12px;
    background: transparent; cursor: pointer;
    font: 500 0.875rem/1 var(--font-text); white-space: nowrap; color: var(--text-muted);
    transition: color 160ms var(--ease-hover);
  }
  .nav-link:has(.chev) { padding-right: 6px; }
  .nav-link::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: color-mix(in srgb, var(--text) 9%, transparent);
    opacity: 0; transform: scale(0.92);
    transition: opacity 160ms var(--ease-hover), transform 260ms var(--ease-morph), background-color 160ms var(--ease-hover);
  }
  @media (hover: hover) and (pointer: fine) {
    .nav-link:hover { color: var(--text); }
    .nav-link:hover::before { opacity: 1; transform: none; }
    .nav-link:hover::before { background: color-mix(in srgb, var(--text) 7%, transparent); }
  }
  .nav-link:focus-visible { color: var(--text); }
  .nav-link:focus-visible::before { opacity: 1; transform: none; }
  .nav-link[aria-expanded="true"] { color: var(--text); }
  .nav-link[aria-expanded="true"]::before { opacity: 1; transform: none; }
  .nav-link .chev { width: 14px; height: 14px; transition: transform var(--duration-morph) var(--ease-morph); }
  .nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
  /* The current page carries cibby.app's dot */
  .nav-link::after {
    content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
    background: var(--accent-strong); box-shadow: 0 0 8px color-mix(in srgb, var(--accent-strong) 70%, transparent);
    opacity: 0; transform: translateY(3px) scale(0.5);
    transition: opacity 160ms var(--ease-hover), transform 180ms var(--ease-out);
  }
  .nav-link[aria-current="page"] { color: var(--text); }
  .nav-link[aria-current="page"]::after { opacity: 1; transform: none; }

  /* CTA: a plain word at the top (cibby.app's "Get Cibby"), filled once the bar is a pill; lifts 1 px on hover */
  .nav-cta {
    position: relative; /* paints above the glass layer, like the other positioned items */
    min-height: 40px; padding: 0 15px; border-radius: 14px; font-size: 0.875rem; font-weight: 700;
    background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px transparent;
    transition:
      background-color 260ms var(--ease-hover), color 260ms var(--ease-hover), box-shadow 260ms var(--ease-hover),
      translate var(--duration-morph) var(--ease-morph), transform 200ms var(--ease-out);
  }
  .is-scrolled .nav-cta, .site-header.is-open .nav-cta { background: var(--action-bg); color: var(--action-fg); box-shadow: inset 0 0 0 1px transparent; }
  @media (hover: hover) and (pointer: fine) {
    .nav-cta:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--text) 9%, transparent); }
    .is-scrolled .nav-cta:hover, .site-header.is-open .nav-cta:hover { background: var(--action-bg-hover); box-shadow: inset 0 0 0 1px transparent; }
  }
  .nav-cta:active { transform: scale(var(--motion-press-scale)); }

  /* Scrolled: the groups gather into the pill (individual translate, so the mega panels inside the
     list items stay put) */
  .nav-logo, .nav-list > li > .nav-link { transition-property: color, translate; transition-duration: 160ms, var(--duration-morph); transition-timing-function: var(--ease-hover), var(--ease-morph); }
  .site-header.is-scrolled .nav-logo,
  .site-header.is-scrolled .nav-list:not(.nav-list-end) > li > .nav-link { translate: var(--shift-start) 0; }
  .site-header.is-scrolled .nav-list-end > li > .nav-link,
  .site-header.is-scrolled .nav-list-end > li > .nav-cta { translate: var(--shift-end) 0; }

  /* ───────────── Mega menus: a second glass card 4 px under the bar, as wide as the bar (veo.com) ───────────── */
  .mega-scrim {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: color-mix(in srgb, var(--color-night) 24%, transparent);
    opacity: 0; transition: opacity var(--duration-exit) var(--ease-out);
  }
  .mega-scrim.is-open { opacity: 1; pointer-events: auto; transition-duration: var(--duration-nav); }
  .mega-bg {
    display: none;   /* the card is .nav-bg now */
    position: absolute; pointer-events: none;
    top: calc(var(--bar-top) + var(--bar-h) + 4px); left: var(--mega-l); width: var(--mega-w); height: min(90vh, 54rem);
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-nav);
    opacity: 0;
    clip-path: inset(0 0 calc(100% - var(--mega-h)) 0 round var(--radius-nav));
    transition: clip-path var(--duration-morph) var(--ease-morph), opacity 160ms var(--ease-out);
  }
  .site-header.is-open .mega-bg { opacity: 1; }
  .mega {
    position: absolute; top: calc(var(--bar-top) + var(--bar-h) + 4px); left: var(--mega-l); width: var(--mega-w);
    padding: 28px var(--mega-pad-r) 28px var(--mega-pad-l);
    visibility: hidden; pointer-events: none;
    transition: visibility 0s linear var(--duration-exit);
  }
  .mega.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
  .mega::before {
    content: ""; position: absolute; top: 0; left: var(--mega-pad-l); right: var(--mega-pad-r); height: var(--line-hairline); background: var(--line);
    opacity: 0; transition: opacity 120ms var(--ease-out);
  }
  .mega.is-open::before { opacity: 1; transition: opacity 280ms var(--ease-out) 120ms; }

  /* Columns with a small heading and a hairline under it, as on veo.com; the apps and support menus pair
     the cards with a list of icon links, "built for" is cards only */
  .mega-panel {
    display: grid; grid-template-columns: minmax(0, 2.25fr) minmax(15rem, 1fr); gap: 32px clamp(24px, 3vw, 48px);
    color: var(--text);
  }
  .mega-panel--cards { grid-template-columns: minmax(0, 1fr); }
  .mega-col { min-width: 0; }
  .mega-h {
    margin-bottom: 20px; padding-bottom: 12px; border-bottom: var(--line-hairline) solid var(--line);
    font: 500 1.875rem/1 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; color: var(--text-muted);
  }
  .mega-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

  /* Cards: a device or a photo fills, the words sit at the bottom (veo.com's product cards) */
  .mega-item {
    --accent: var(--color-lime);
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; align-content: end; gap: 4px;
    --text-h: 9.5rem;           /* room the words need at the bottom of a card */
    min-height: clamp(22rem, 48vh, 29rem); padding: 22px;
    border-radius: 20px; background: var(--color-night); color: var(--color-snow);
  }
  .mega-item .media { position: absolute; inset: 0; z-index: -2; margin: 0; border-radius: 0; background: var(--color-night); }
  .mega-item .media img { transition: transform 700ms var(--ease-out); }
  .mega-item::after {
    content: ""; position: absolute; inset: 28% 0 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-night) 84%, transparent) 58%, color-mix(in srgb, var(--color-night) 92%, transparent));
  }
  /* The three apps show their device, as in the device scene on the page (images/device-*.webp, shot from it on
     a transparent ground): GO on a phone, CLUB on a Mac, TARGET on an iPad. The device gets the room above the
     words (--text-h) and is fitted into it whole (object-fit: contain), so a small card or a short window
     shrinks the laptop and the iPad instead of cutting them. Each app has its own colour behind it. */
  .mega-item--device::after { display: none; }
  .mega-item .media.is-device {
    display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center;
    padding: 26px 22px calc(var(--text-h) + 6px);
    background:
      radial-gradient(62% 58% at 50% 36%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%),
      linear-gradient(180deg, var(--color-dusk), var(--color-night));
  }
  .mega-item .media.is-device img {
    display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
    filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.5));
  }
  .mega-item-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .mega-item-title { font: 500 2rem/0.95 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }
  .mega-item-sub { order: -1; font-size: var(--type-label-size); line-height: var(--type-label-leading); font-weight: 600; letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--accent); }
  .mega-item-desc { font-size: 0.9375rem; line-height: 1.45; color: var(--color-snow-2); text-wrap: pretty; }
  .mega-item .ring-arrow { width: 40px; height: 40px; color: var(--color-snow); }
  .mega-item .ring-arrow::before { box-shadow: inset 0 0 0 1.5px var(--accent); }
  @media (hover: hover) and (pointer: fine) { .mega-item:hover .media img { transform: scale(1.04); } }
  .mega-item:focus-visible .media img { transform: scale(1.04); }

  /* The list: an icon in a rounded chip, a bold title and a line of grey (veo.com's Tripods / Apps lists) */
  .mega-list { display: grid; gap: 8px; margin: -8px; }
  .mega-link {
    --accent: var(--color-lime);
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 8px; border-radius: 16px;
    transition: background-color var(--duration-hover) var(--ease-hover);
  }
  .mega-ic {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: var(--color-ink);
    background: color-mix(in srgb, var(--accent) 26%, var(--color-white));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
    transition: background-color var(--duration-hover) var(--ease-hover), transform var(--duration-hover) var(--ease-hover);
  }
  .mega-ic .ic { width: 34px; height: 34px; }
  .mega-link-title { font: 600 1.0625rem/1.3 var(--font-text); }
  .mega-link-desc { display: block; margin-top: 4px; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.45; text-wrap: pretty; }
  @media (hover: hover) and (pointer: fine) {
    .mega-link:hover { background: color-mix(in srgb, var(--color-white) 80%, transparent); }
    .mega-link:hover .mega-ic { background: var(--accent); transform: scale(1.04); }
    .mega-link:hover .u-line::after { transform: scaleX(1); }
  }
  .mega-link:focus-visible { background: color-mix(in srgb, var(--color-white) 80%, transparent); }
  .mega-link:focus-visible .mega-ic { background: var(--accent); }
  .mega-link:focus-visible .u-line::after { transform: scaleX(1); }

  /* Narrower desktops: a slimmer list column, shorter cards */
  @media (max-width: 1199.98px) {
    .mega-panel { grid-template-columns: minmax(0, 2.1fr) minmax(13rem, 1fr); gap: 24px; }
    .mega-cards { gap: 14px; }
    .mega-item { padding: 16px; min-height: clamp(20rem, 46vh, 26rem); }
    .mega-item-title { font-size: 1.75rem; }
    .mega-item .media.is-device { padding-inline: 10px; }
  }
  /* A short window: the three apps drop their one-line pitch, and the devices take the room it leaves */
  @media (max-height: 700px) {
    .mega-item--device { --text-h: 6.25rem; }
    .mega-item--device .mega-item-desc { display: none; }
  }

  /* Contents: out at once (opacity), in with a short stagger on the morph's curve */
  .mega .mega-h, .mega .mega-item, .mega .mega-link {
    opacity: 0; transform: translateY(8px);
    transition: opacity 120ms var(--ease-out), transform 0s linear 120ms;
  }
  .mega.is-open .mega-h, .mega.is-open .mega-item, .mega.is-open .mega-link {
    opacity: 1; transform: none;
    transition: opacity 280ms var(--ease-out), transform var(--duration-morph) var(--ease-morph);
    transition-delay: calc(70ms + var(--i, -1) * 40ms + 40ms);
  }

  /* ───────────── Phones and tablets: logo up top, the bar at the bottom ───────────── */
  .mtop { position: absolute; z-index: var(--z-nav); top: calc(env(safe-area-inset-top, 0px) + 14px); left: var(--gutter); }
  .mbar { display: none; }

  @media (max-width: 1023.98px) {
    .site-header { height: 0; }
    .nav, .nav-bg, .nav-shadow, .mega-bg, .mega-scrim { display: none; }

    /* The bar and the sheet it grows into share one box; closed, only its bottom 64 px show */
    .mbar {
      --mb-gap: 12px;
      --mb-h: 56px;
      position: fixed; z-index: 1; display: block;
      left: var(--mb-gap); right: var(--mb-gap);
      top: calc(env(safe-area-inset-top, 0px) + var(--mb-gap)); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mb-gap));
      pointer-events: none; color: var(--text);
    }
    .mbar-scrim {
      position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background: color-mix(in srgb, var(--color-night) 40%, transparent);
      opacity: 0; transition: opacity var(--duration-exit) var(--ease-out);
    }
    .mbar.is-open .mbar-scrim { opacity: 1; pointer-events: auto; transition-duration: var(--duration-nav); }

    .mbar-bg {
      position: absolute; inset: 0; pointer-events: none;
      background: var(--glass);
      -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
      clip-path: inset(calc(100% - var(--mb-h)) 0 0 0 round var(--radius-nav));
      transition: clip-path 280ms var(--ease-morph), background-color 280ms var(--ease-hover);
    }
    /* Open, the glass grows up to the menu's own height (nav.js sets --sheet-h per view), so a sub menu
       makes the sheet grow or shrink on the same curve: veo.com's dynamic panel, on the phone */
    .mbar.is-open .mbar-bg {
      clip-path: inset(max(0px, calc(100% - var(--sheet-h, 100%))) 0 0 0 round var(--radius-nav));
      background: color-mix(in srgb, var(--bg-alt) 95%, transparent);
      transition: clip-path var(--duration-morph) var(--ease-morph), background-color var(--duration-morph) var(--ease-hover);
    }

    .mbar-row {
      position: absolute; left: 0; right: 0; bottom: 0; height: var(--mb-h);
      display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 10px;
      pointer-events: auto;
    }
    /* The lift under the closed bar (a separate layer: the clip would cut it) */
    .mbar-row::before {
      content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius-nav); pointer-events: none;
      box-shadow: var(--shadow-nav); transition: opacity var(--duration-nav) var(--ease-out);
    }
    .mbar.is-open .mbar-row::before { opacity: 0; }
    .mbar-home { position: relative; justify-self: start; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text); }
    .mbar-home svg { width: 26px; height: 26px; transition: transform var(--duration-morph) var(--ease-morph); }
    .mbar-cta, .mbar-cta:hover { justify-self: center; background: var(--action-bg); color: var(--action-fg); }
    .mbar-toggle {
      justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
      border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer;
      transition: background-color var(--duration-hover) var(--ease-hover);
      -webkit-tap-highlight-color: transparent;
    }
    .mbar-toggle:active { background: color-mix(in srgb, var(--text) 10%, transparent); }
    /* Two lines that cross into the close mark */
    .burger { position: relative; display: block; width: 18px; height: 7.5px; }
    .burger span { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform var(--duration-morph) var(--ease-morph); }
    .burger span:first-child { top: 0; }
    .burger span:last-child { bottom: 0; }
    .mbar.is-open .burger span:first-child { transform: translateY(3px) rotate(45deg); }
    .mbar.is-open .burger span:last-child { transform: translateY(-3px) rotate(-45deg); }

    /* The sheet: the menu anchored right above the bar, within thumb reach */
    .mbar-sheet {
      position: absolute; inset: 0 0 var(--mb-h) 0; display: flex; flex-direction: column;
      padding: 16px 16px 8px;
      visibility: hidden; pointer-events: none;
      transition: visibility 0s linear 280ms;
    }
    .mbar.is-open .mbar-sheet { visibility: visible; pointer-events: auto; transition: visibility 0s; }
    .mnav { position: relative; flex: 1; min-height: 0; }
    .mnav-view {
      position: absolute; left: 0; right: 0; bottom: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
      display: grid; align-content: end;
      visibility: hidden; opacity: 0; transform: translateX(16%);
      transition: opacity 200ms var(--ease-out), transform var(--duration-morph) var(--ease-morph), visibility 0s linear var(--duration-morph);
    }
    .mnav-view.is-before { transform: translateX(-16%); }
    .mnav-view.is-current { visibility: visible; opacity: 1; transform: none; transition: opacity 260ms var(--ease-out) 60ms, transform var(--duration-morph) var(--ease-morph), visibility 0s; }
    .mnav-list > li + li { border-top: var(--line-hairline) solid var(--line); }
    .mnav-link {
      display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
      min-height: 60px; padding: 8px 4px; border: 0; background: none; cursor: pointer; text-align: left;
      font: 500 1.375rem/1.15 var(--font-text); letter-spacing: -0.01em; color: var(--text);
      -webkit-tap-highlight-color: transparent;
    }
    .mnav-link .icon { width: 20px; height: 20px; color: var(--text-muted); transform: rotate(-90deg); }
    .mnav-link .mnav-txt { display: grid; gap: 4px; }
    .mnav-sub { font-size: var(--type-small-size); font-weight: 400; letter-spacing: 0; line-height: 1.35; color: var(--text-muted); }
    .mnav-back {
      display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 44px; padding: 0 12px 0 4px;
      border: 0; background: none; cursor: pointer; color: var(--text-muted); font: 500 1rem/1 var(--font-text);
    }
    .mnav-back .icon { width: 20px; height: 20px; }
    .mnav-title { margin: 6px 4px 14px; font: 500 3.25rem/0.9 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; color: var(--text); }
    .mnav-title em { display: inline-block; font-style: italic; color: var(--emphasis); background: var(--emphasis-bg); line-height: 0.8; padding: 0.09em 0.13em 0.03em; }

    /* Open: the rows rise from the bar upward (the nearest row first) */
    .mnav-view > *, .mnav-list > li {
      opacity: 0; transform: translateY(14px);
      transition: opacity 120ms var(--ease-out), transform 0s linear 120ms;
    }
    .mbar.is-open .mnav-view > *, .mbar.is-open .mnav-list > li {
      opacity: 1; transform: none;
      transition: opacity 260ms var(--ease-out), transform var(--duration-morph) var(--ease-morph);
      transition-delay: calc(90ms + var(--i, 0) * 30ms);
    }
    .mnav-view > .mnav-list { transform: none; opacity: 1; }

    /* Clear the bar at the bottom of the hero and the footer */
    .hero-content { padding-bottom: calc(clamp(3rem, 7vw, 6rem) + 80px + env(safe-area-inset-bottom, 0px)); }
    .site-footer { padding-bottom: calc(var(--space-5) + 80px + env(safe-area-inset-bottom, 0px)); }
  }
  @media (min-width: 1024px) { .mtop { display: none; } }
  @media (max-width: 599.98px) { .mbar-cta { padding: 0 18px; } }

  /* The reaction: when the bar compacts, the mark recoils and a ring goes out from it, once */
  @media (prefers-reduced-motion: no-preference) {
    .site-header.is-reacting .nav-logo svg, .site-header.is-reacting .mbar-home svg { animation: nav-recoil 520ms var(--ease-out); }
    .site-header.is-reacting .nav-logo::after, .site-header.is-reacting .mbar-home::after { animation: nav-impact 680ms var(--ease-out); }
  }
  @keyframes nav-recoil { 0% { transform: scale(1); } 24% { transform: scale(0.84); } 100% { transform: scale(1); } }
  @keyframes nav-impact { 0% { opacity: 0.9; transform: scale(0.55); } 100% { opacity: 0; transform: scale(2.1); } }
}

/* ───────────── Reduced motion: no morphs, no travel; colour and opacity only ───────────── */
@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .nav-bg, .nav-shadow, .mega-bg, .mbar-bg, .skip-link,
    .site-header.is-scrolled .nav-bg, .site-header.is-open .nav-bg, .site-header.is-scrolled .nav-shadow, .site-header.is-open .nav-shadow,
    .mbar.is-open .mbar-bg { transition: none; }
    .nav-logo, .nav-list > li > .nav-link, .nav-cta, .nav-logo svg, .mbar-home svg, .nav-link::before, .nav-link .chev, .burger span { transition-duration: 0s; }
    .nav-link::before, .nav-link::after { transform: none; }
    .nav-cta:hover { transform: none; }
    .mega .mega-h, .mega .mega-item, .mega .mega-link, .mnav-view > *, .mnav-list > li, .mnav-view, .mnav-view.is-before { transform: none; }
    .mega.is-open .mega-h, .mega.is-open .mega-item, .mega.is-open .mega-link,
    .mbar.is-open .mnav-view > *, .mbar.is-open .mnav-list > li { transition: opacity var(--duration-reduced) var(--ease-out); transition-delay: 0s; }
    .mnav-view, .mnav-view.is-current { transition: opacity var(--duration-reduced) var(--ease-out), visibility 0s linear var(--duration-reduced); }
    .mnav-view.is-current { transition: opacity var(--duration-reduced) var(--ease-out), visibility 0s; }
    .mega-item .media img { transition: none; }
    .mega-item:hover .media img, .mega-item:focus-visible .media img { transform: none; }
    .nav-cta:active { background: var(--action-bg-hover); }
  }
}