@import url("../fonts/fonts.css");

/* ==========================================================================
   FLUID WINGS LLC — Design System
   "Fluid Dynamics": aerospace-grade dark canvas, electric cyan energy.
   ========================================================================== */

/* ==========================================================================
   THEME TOKENS
   Names are kept from the original dark build; treat them semantically:
     --ink / --ink-2 / --ink-3 = page, alternate section, inset background
     --surface / --surface-2   = card and raised-card background
     --white                   = strongest foreground (headings)
     --cyan                    = accent used for TEXT and icons (theme-aware)
     --brand                   = brand cyan used for FILLS (constant in both
                                 themes so buttons and the mark never shift)
   ========================================================================== */
:root {
  color-scheme: dark;

  /* Surfaces */
  --ink: #05080f;
  --ink-2: #080e18;
  --ink-3: #0a121e;
  --surface: #101a29;
  --surface-2: #16233a;
  --line: rgba(126, 176, 222, 0.16);
  --line-strong: rgba(126, 176, 222, 0.32);

  /* Brand — --brand is constant; --cyan flips for legibility on light */
  --brand: #3bd1f6;
  --brand-2: #00ccff;
  /* Lightened from #557dbc (2026-08-06). It is the far end of --grad-brand,
     and the dark --on-brand label sitting on it measured 4.05:1 — under the
     4.5 that a standard .btn needs, since 13px bold is normal-sized text, not
     large. It passed against the gradient's other two stops, which is how it
     survived every earlier eyeball and averaged check. #638cc8 is 4.91:1 and
     the smallest change that clears the bar. */
  --brand-3: #638cc8;
  --on-brand: #04202b;
  --cyan: #3bd1f6;
  --cyan-hot: #00ccff;
  --blue: #3340d3;
  --blue-soft: #557dbc;
  --ice: #b9cbe3;

  /* Text */
  --white: #f3f8fd;
  --text: #dce8f4;
  --muted: #9db2ca;
  /* Raised from #6c8099: that failed AA (4.31:1) for small text on --surface. */
  --dim: #8ba1ba;

  /* Compositing helpers */
  --scrim: 5, 8, 15;           /* overlay on video/photos - dark in BOTH themes */
  --tint-rgb: 126, 176, 222;   /* hairlines, blueprint grids */
  --shadow-rgb: 0, 0, 0;
  --glass: rgba(6, 11, 19, 0.9);        /* stuck header */
  --glass-panel: rgba(9, 15, 25, 0.97); /* mega menu, drawer */
  --plate-a: #1b2c46;                   /* dark logo plate, inner */
  --plate-b: #080e18;                   /* dark logo plate, outer */
  --chip-bg: rgba(59, 209, 246, 0.1);
  --chip-line: rgba(59, 209, 246, 0.28);

  /* Signal */
  --warn: #ffb020;
  --warn-bg: rgba(255, 176, 32, 0.09);
  --danger: #ff5c5c;
  --danger-bg: rgba(255, 92, 92, 0.08);
  --ok: #38d39f;

  /* Gradients */
  --grad-brand: linear-gradient(115deg, var(--brand-2) 0%, var(--brand) 42%, var(--brand-3) 100%);
  --grad-hot: linear-gradient(115deg, var(--brand) 0%, var(--blue) 100%);
  --grad-text: linear-gradient(100deg, #ffffff 0%, #9fe4fb 45%, #3bd1f6 100%);
  --grad-fade: linear-gradient(180deg, transparent, var(--ink));

  /* Effects */
  --glow: 0 0 0 1px rgba(59, 209, 246, 0.28), 0 18px 50px -12px rgba(0, 204, 255, 0.35);
  --shadow: 0 24px 60px -20px rgba(var(--shadow-rgb), 0.85);
  --radius: 14px;
  --radius-lg: 22px;

  /* Type */
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --wrap: 1240px;
  --wrap-wide: 1520px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --nav-h: 74px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   LIGHT THEME
   Every value here is contrast-checked against its own surface. The brand
   cyan is darkened for text (#3bd1f6 on white is ~1.9:1), but the fill brand
   stays exactly the same so buttons and the logo never change colour.
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --ink: #f2f7fc;
  --ink-2: #e7eff7;
  --ink-3: #ffffff;
  --surface: #ffffff;
  --surface-2: #eaf2fa;
  --line: rgba(30, 63, 96, 0.16);
  --line-strong: rgba(30, 63, 96, 0.34);

  /* Text-safe accent: 5.9:1 on white, 5.0:1 on the darkest light surface */
  --cyan: #0a6d8f;
  --cyan-hot: #095f7d;
  --blue: #2a35b0;
  --blue-soft: #3c5f92;
  --ice: #23374c;

  --white: #071019;   /* strongest foreground */
  --text: #1b2c3e;
  --muted: #405871;
  --dim: #506781;     /* 5.0:1 on the darkest light surface */

  --tint-rgb: 30, 63, 96;
  --shadow-rgb: 16, 38, 60;
  --glass: rgba(246, 250, 254, 0.9);
  --glass-panel: rgba(255, 255, 255, 0.98);
  --plate-a: #ffffff;
  --plate-b: #dbe6f2;
  --chip-bg: rgba(11, 126, 166, 0.1);
  --chip-line: rgba(11, 126, 166, 0.32);

  --warn: #8a5a00;
  --warn-bg: rgba(255, 176, 32, 0.14);
  --danger: #c02626;
  --danger-bg: rgba(192, 38, 38, 0.08);
  --ok: #0d7a56;

  --grad-text: linear-gradient(100deg, #071019 0%, #10618a 45%, #0b93c4 100%);
  --grad-fade: linear-gradient(180deg, transparent, var(--ink));

  --glow: 0 0 0 1px rgba(11, 126, 166, 0.3), 0 18px 44px -14px rgba(16, 38, 60, 0.28);
  --shadow: 0 24px 60px -22px rgba(16, 38, 60, 0.3);
  --focus-halo: rgba(255, 255, 255, 0.85);
}

:root { --focus-halo: rgba(var(--scrim), 0.55); }

/* --------------------------------------------------------------------------
   Regions that sit on top of footage or a dark brand panel keep the dark
   palette in BOTH themes — otherwise light-mode text would land on video.
   Scoping the tokens locally means every child inherits correctly.
   -------------------------------------------------------------------------- */
.hero,
.slot--film .slot__cap,
.ccard,
.film__thumb,
.wingcard__tags {
  --white: #f3f8fd;
  --text: #dce8f4;
  --ice: #b9cbe3;
  --muted: #9db2ca;
  --dim: #8ba1ba;
  --cyan: #3bd1f6;
  --line: rgba(126, 176, 222, 0.16);
  --line-strong: rgba(126, 176, 222, 0.32);
  /* Gradient text here sits on footage, so it keeps the bright ramp. */
  --grad-text: linear-gradient(100deg, #ffffff 0%, #9fe4fb 45%, #3bd1f6 100%);
  --focus-halo: rgba(5, 8, 15, 0.55);
  /* Ghost buttons over footage must stay dark glass in both themes. */
  --glass: rgba(5, 8, 15, 0.72);
  --surface: #101a29;
  --ink-3: #0a121e;
}

/* --------------------------------------------------------------------------
   LIGHT THEME — behavioural overrides
   -------------------------------------------------------------------------- */
/* The header can't be transparent over a dark hero while carrying dark text,
   so in light mode it is always solid. */
:root[data-theme="light"] .siteheader {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);
}
:root[data-theme="light"] .siteheader::after { opacity: 0; }

/* Hero stays cinematic: the scrim never fades to the light page colour, or
   the white hero text would sit on a light background. */
:root[data-theme="light"] .hero__scrim {
  background:
    linear-gradient(180deg, rgba(var(--scrim), 0.86) 0%, rgba(var(--scrim), 0.34) 30%,
      rgba(var(--scrim), 0.8) 70%, rgba(var(--scrim), 0.95) 100%),
    linear-gradient(96deg, rgba(var(--scrim), 0.88) 0%, rgba(var(--scrim), 0.3) 55%, transparent 100%);
}
:root[data-theme="light"] .hero { border-bottom: 1px solid var(--line); }

/* Logo: cyan mark on dark, blue mark on light. */
.brand__mark--light,
.footbrand__mark--light { display: none; }
:root[data-theme="light"] .brand__mark--dark,
:root[data-theme="light"] .footbrand__mark--dark { display: none; }
:root[data-theme="light"] .brand__mark--light,
:root[data-theme="light"] .footbrand__mark--light { display: block; }

/* A wing's own mark as the product-page title (the SAW). Same swap as the
   site logo: white lettering on dark, the original black lettering on light. */
.phero__title .wlogo { display: block; width: min(560px, 100%); height: auto; }
.phero__title .wlogo--light { display: none; }
:root[data-theme="light"] .phero__title .wlogo--dark { display: none; }
:root[data-theme="light"] .phero__title .wlogo--light { display: block; }

/* Cards lift with shadow rather than glow. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .film,
:root[data-theme="light"] .doc {
  box-shadow: 0 1px 2px rgba(16, 38, 60, 0.06), 0 8px 24px -18px rgba(16, 38, 60, 0.4);
}

/* A dark stroke on a light ground reads thinner than a light stroke on a dark
   one, so light mode gets a touch more of it.
   `:not(.hot)` matters: this selector is (0,3,1) and beats `.marquee span.hot`
   at (0,2,1), so without it the gradient-filled words got a 1.6px stroke width
   back after .hot had zeroed it. Transparent, so invisible — but it made every
   .hot word look like outlined text to anything inspecting computed styles. */
:root[data-theme="light"] .marquee span:not(.hot) { -webkit-text-stroke-width: 1.6px; }

/* Section watermark numerals. */
:root[data-theme="light"] .sec-num { color: rgba(var(--tint-rgb), 0.07); }

/* Table head band. */
:root[data-theme="light"] table.spec thead th { background: var(--surface-2); }

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* The browser's own `[hidden] { display: none }` is the weakest rule there is,
   so ANY class that sets `display` silently beats it and the element stays on
   screen while `el.hidden === true` reports that it is gone. That is a nasty
   one to debug: the DOM says hidden, the eye says visible.
   It bit three things here — the stock filter bar (display:flex) showing
   "Showing one model." on an unfiltered list, and `.field` / `.field-row` /
   `fieldset` (all display:grid) refusing to collapse after a form was sent.
   This one line makes `hidden` mean hidden everywhere. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--cyan); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--white); }

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
}

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--white);
  margin: 0 0 0.5em;
  text-transform: uppercase;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--cyan); color: #04222c; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Extra contrast so the ring is visible on light plates and photos too. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 6px var(--focus-halo);
}

/* ---------- Skip link ---------- */
.skiplink {
  position: fixed;
  top: 0;
  left: 50%;
  translate: -50% -140%;
  z-index: 200;
  padding: 0.9rem 1.6rem;
  border-radius: 0 0 12px 12px;
  /* --brand (not --cyan): stays the bright fill in both themes, so the dark
     ink label keeps its contrast. */
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px -8px rgba(var(--shadow-rgb), 0.7);
  transition: translate 0.2s var(--ease);
}
.skiplink:focus { translate: -50% 0; color: var(--on-brand); }

/* ---------- Type scale ---------- */
.t-hero   { font-size: clamp(3rem, 9.5vw, 8.5rem); line-height: 0.9; letter-spacing: -0.012em; }
.t-xl     { font-size: clamp(2.4rem, 6vw, 5rem); line-height: 0.96; }
.t-lg     { font-size: clamp(1.95rem, 4.4vw, 3.5rem); }
.t-md     { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.t-sm     { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

.lede {
  font-size: clamp(1.06rem, 1.7vw, 1.32rem);
  line-height: 1.62;
  color: var(--ice);
  font-weight: 400;
}

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--grad-brand);
  flex: none;
}
.eyebrow.center { justify-content: center; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding: clamp(4.5rem, 10vw, 9rem) 0; position: relative; }
.section--tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.section--alt { background: var(--ink-2); }
.section--surface { background: linear-gradient(180deg, var(--ink-2), var(--ink)); }

.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 2rem); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Prose + sidebar: the reading column should dominate, not sit at 50/50. */
.split--aside { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) {
  .split--aside { grid-template-columns: 1fr; }
  .split--aside .toc { position: static; order: -1; }
}

.stack > * + * { margin-top: 1.15rem; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 68ch; }
.measure-sm { max-width: 54ch; }

/* Section heading block */
.sec-head { margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.sec-head.center { text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head .lede { margin-top: 1.1rem; max-width: 66ch; }
.sec-head.center .lede { margin-inline: auto; }

/* Section index number watermark */
.sec-num {
  position: absolute;
  top: clamp(1.5rem, 4vw, 3rem);
  right: var(--gutter);
  font-family: var(--display);
  font-size: clamp(4rem, 12vw, 11rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(var(--tint-rgb), 0.05);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--grad-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.85rem;
  border: 0;
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--on-brand);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.2s;
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--brand-2) 55%, transparent);
}
.btn:hover {
  color: var(--on-brand);
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -12px color-mix(in srgb, var(--brand-2) 70%, transparent);
}
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--ghost {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn--ghost:hover {
  color: var(--ink);
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--white);
}

.btn--dark {
  background: var(--glass);
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  backdrop-filter: blur(10px);
}
.btn--dark:hover { color: var(--cyan); box-shadow: inset 0 0 0 1.5px var(--cyan); }

.btn--sm { padding: 0.65rem 1.25rem; font-size: 0.72rem; }
.btn--lg { padding: 1.15rem 2.4rem; font-size: 0.88rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.btn-row.center { justify-content: center; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}
.link-arrow::after {
  content: "→";
  transition: transform 0.25s var(--ease);
}
.link-arrow:hover::after { transform: translateX(5px); }

/* ---------- Chips / tags ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  background: var(--chip-bg);
  box-shadow: inset 0 0 0 1px var(--chip-line);
  color: var(--cyan);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.5;
}
.chip--new { background: color-mix(in srgb, var(--ok) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
.chip--warn { background: var(--warn-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }
.chip--muted { background: rgba(var(--tint-rgb), 0.1); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.utilbar {
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.74rem;
  color: var(--muted);
  position: relative;
  z-index: 60;
}
.utilbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 38px;
  flex-wrap: wrap;
}
.utilbar a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  color: var(--muted);
  font-weight: 500;
}
.utilbar a:hover { color: var(--cyan); }
.utilbar__links { display: flex; align-items: center; gap: 1.35rem; flex-wrap: wrap; }
.utilbar__note { display: inline-flex; align-items: center; gap: 0.5rem; letter-spacing: 0.06em; }
.utilbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); flex: none; }

.siteheader {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), backdrop-filter 0.35s;
}
.siteheader::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--scrim), 0.92), rgba(var(--scrim), 0.55) 60%, transparent);
  opacity: 1;
  transition: opacity 0.35s;
  pointer-events: none;
  z-index: -1;
}
.siteheader.is-stuck {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(var(--shadow-rgb), .8);
}
.siteheader.is-stuck::after { opacity: 0; }

.nav {
  position: relative;   /* containing block for the full-width mega panel */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--nav-h);
}

.brand { display: flex; align-items: center; gap: 0.7rem; flex: none; }
/* The mark is a stacked lockup (1890x1191). Pin height, let width follow —
   never let the width attribute drive layout or it squashes. */
.brand img { height: 50px; width: auto; transition: transform 0.3s var(--ease); }
.brand:hover img { transform: scale(1.04); }

.nav__links {
  display: flex;
  align-items: center;
  /* 0.25 / 0.68 rather than 0.35 / 0.85 since the cart button arrived
     (2026-10-12): above 1520px the bar stops growing, and at the old spacing
     the full-size header needed exactly the 1520px it had. */
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.68rem;
  border-radius: 8px;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.nav__link:hover,
.nav__link[aria-expanded="true"] { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 9%, transparent); }
.nav__link.is-active { color: var(--cyan); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0.85rem;
  right: 0.85rem;
  height: 2px;
  background: var(--grad-brand);
  border-radius: 2px;
}
/* static, so the mega positions against .nav and can span its full width */
.nav__item { position: static; }
.nav__caret { width: 9px; height: 9px; transition: transform 0.25s var(--ease); opacity: 0.7; }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Mega dropdown */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  /* Spans the nav's own width (.nav is the containing block) rather than being
     anchored to the Wings item — a five-column panel can't fit beside it.
     Inset by the gutter so it lines up with the logo and nav links rather than
     running to the screen edges. */
  left: var(--gutter);
  right: var(--gutter);
  width: auto;
  background: var(--glass-panel);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 212px;
  gap: 1.6rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
/* Invisible bridge across the gap between trigger and panel. Without it the
   pointer leaves .nav__item mid-travel and the menu flickers shut. */
.mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

/* Four discipline columns. Skydive carries eight entries so it takes more room;
   the rest sit at two apiece. */
.mega__cols {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1.05fr 1.2fr;
  gap: 1.5rem;
  align-items: start;
}

/* "Just landed" rail */
.mega__featured {
  border-left: 1px solid var(--line);
  padding-left: 1.5rem;
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.megafeat {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.45rem;
  border-radius: 10px;
  transition: background 0.18s;
}
.megafeat:hover { background: color-mix(in srgb, var(--cyan) 9%, transparent); }
.megafeat__plate {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 9px;
  overflow: hidden;
  background: radial-gradient(90% 90% at 50% 40%, var(--plate-a), var(--plate-b));
}
.megafeat__plate img {
  position: absolute;
  inset: 7px;
  width: auto;
  height: auto;
  max-width: calc(100% - 14px);
  max-height: calc(100% - 14px);
  margin: auto;
  object-fit: contain;
}
.megafeat__meta { min-width: 0; }
.megafeat__meta b {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.15;
}
.megafeat:hover .megafeat__meta b { color: var(--cyan); }
.megafeat__meta span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Below this the five-track layout gets tight — drop the rail, keep the columns. */
@media (max-width: 1279px) {
  .mega { grid-template-columns: minmax(0, 1fr); }
  .mega__featured { display: none; }
}

.mega__colhead {
  font-size: 0.73rem;
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  transition: background 0.18s;
}
.mega__row:hover { background: color-mix(in srgb, var(--cyan) 9%, transparent); }
.mega__name {
  flex: none;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.mega__row:hover .mega__name { color: var(--cyan); }
/* Badge is a sibling of the name, not inside it — nested, a long name pushed
   it onto its own line (Odin Lite). */
.mega__row .chip {
  flex: none;
  padding: 0.14rem 0.46rem;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}
.mega__meta {
  margin-left: auto;
  min-width: 0;
  font-size: 0.73rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.mega__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

/* Right-hand nav cluster */
.nav__right { display: flex; align-items: center; gap: 0.6rem; flex: none; }

/* Language switch: two small flags, the current one ringed */
.langsw { display: flex; align-items: center; gap: 0.25rem; }
.utilbar .langsw__opt {
  display: grid; place-items: center; width: 30px; height: 26px; border-radius: 6px;
  opacity: 0.55; transition: opacity 0.2s, box-shadow 0.2s;
}
.langsw__opt svg { width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.langsw__opt:hover, .langsw__opt:focus-visible { opacity: 1; }
.langsw__opt[aria-current="true"] { opacity: 1; box-shadow: inset 0 0 0 1px var(--line-strong); }
/* French and Spanish nav labels are longer (2026-10-17: up to ~100px more
   at 1280). Rather than hide the menu below 1440 (which hid it on most
   laptops), those two languages get slightly tighter nav type in the
   1280-1520 band, so the full menu shows down to the same 1280 as English.
   Re-check with tools/check-header-fit.js --lang fr / es after any rename. */

/* Theme toggle */
.themetoggle {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: color 0.22s, box-shadow 0.22s, background 0.22s;
}
.themetoggle:hover { color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.themetoggle svg { width: 19px; height: 19px; grid-area: 1 / 1; transition: opacity 0.25s var(--ease), transform 0.35s var(--ease); }
/* Dark theme shows the sun (what you'd switch TO); light shows the moon. */
.themetoggle__moon { opacity: 0; transform: rotate(-60deg) scale(0.6); }
:root[data-theme="light"] .themetoggle__sun { opacity: 0; transform: rotate(60deg) scale(0.6); }
:root[data-theme="light"] .themetoggle__moon { opacity: 1; transform: none; }

/* Burger */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--glass);
  padding: 0;
  place-items: center;
  flex: none;
}
/* Paraglider menu icon: canopy, risers and pilot. Swaps to a plain X when
   open — a close affordance has to be unambiguous. */
.burger__ico { width: 26px; height: 26px; color: var(--white); overflow: visible; }
/* Risers are hairlines so they don't blob at 26px next to the solid canopy. */
.burger__glider path:not([fill]) { stroke-width: 1.05; }
.burger:hover .burger__ico { color: var(--cyan); }
.burger__glider,
.burger__close {
  transform-origin: 12px 12px;
  transition: opacity 0.28s var(--ease), transform 0.42s var(--ease);
}
.burger__glider path,
.burger__glider circle { transition: opacity 0.28s var(--ease); }
.burger__close { opacity: 0; transform: rotate(-70deg) scale(0.55); }
.burger[aria-expanded="true"] .burger__glider { opacity: 0; transform: rotate(70deg) scale(0.55); }
.burger[aria-expanded="true"] .burger__close { opacity: 1; transform: none; }

/* A gentle drift on hover — it is a wing, after all. */
@media (hover: hover) {
  /* Only while closed — otherwise it fights the rotate-out transform. */
  .burger[aria-expanded="false"]:hover .burger__glider { animation: glide 2.6s var(--ease) infinite; }
}
@keyframes glide {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  35% { transform: translate(1px, -1.1px) rotate(-3.5deg); }
  70% { transform: translate(-1px, 0.6px) rotate(2.5deg); }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--glass-panel);
  backdrop-filter: blur(20px);
  padding: calc(var(--nav-h) + 26px) var(--gutter) 3rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list > li { border-bottom: 1px solid var(--line); }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 0.25rem;
  background: none;
  border: 0;
  text-align: left;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.drawer__link:hover { color: var(--cyan); }
.drawer__toggle .nav__caret { width: 13px; height: 13px; }
.drawer__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.drawer__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 1rem 0.9rem;
  display: none;
  border-left: 2px solid color-mix(in srgb, var(--cyan) 30%, transparent);
}
.drawer__sub.is-open { display: block; }
.drawer__sub a {
  /* Stacked, not space-between: at 375px a long wing name plus its discipline
     label overflowed the drawer. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.5rem 0;
  color: var(--muted);
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.drawer__sub a:hover { color: var(--cyan); }
.drawer__sub span {
  font-family: var(--body);
  font-size: 0.74rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Group headings mirror the desktop mega-menu's two columns. */
.drawer__group {
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 1.15rem 0 0.45rem;
  margin-top: 0.35rem;
  border-top: 1px solid var(--line);
}
.drawer__sub li:first-child + .drawer__group { margin-top: 0; }
.drawer__sub .chip {
  padding: 0.12rem 0.42rem;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  font-style: normal;
  vertical-align: 2px;
}
.drawer__cta { margin-top: 2rem; display: grid; gap: 0.75rem; }

body.nav-open { overflow: hidden; }

/* ==========================================================================
   BACK TO TOP — ring shows how far down the page you are
   ========================================================================== */
.totop {
  --totop-gap: clamp(1rem, 3vw, 2rem);
  --lift: 0px;               /* JS raises this so it parks above the footer */
  position: fixed;
  right: var(--totop-gap);
  bottom: calc(var(--totop-gap) + var(--lift));
  z-index: 90;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 0 0 1px var(--line), 0 14px 34px -12px rgba(var(--shadow-rgb), 0.9);
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), visibility 0.32s,
    color 0.25s, box-shadow 0.25s;
}
/* visibility:hidden (not the hidden attribute) so it animates *and* stays out
   of the accessibility tree and tab order while off-screen. */
.totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.totop:hover { color: var(--cyan); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 48%, transparent), 0 16px 40px -12px color-mix(in srgb, var(--brand-2) 45%, transparent); }
.totop:active { transform: scale(0.94); }

.totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.totop__ring circle { fill: none; stroke-width: 2; }
.totop__track { stroke: rgba(var(--tint-rgb), 0.16); }
.totop__prog {
  stroke: url(#fw-totop-grad);
  stroke: var(--cyan);
  stroke-linecap: round;
  stroke-dasharray: var(--circ, 125.6);
  stroke-dashoffset: var(--dash, 125.6);
  transition: stroke-dashoffset 0.1s linear;
}
.totop__arrow { position: relative; width: 19px; height: 19px; }

@media (prefers-reduced-motion: reduce) {
  .totop { transition: opacity 0.01ms; transform: none; }
  .totop__prog { transition: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: grid;
  align-items: end;
  overflow: hidden;
  margin-top: calc(var(--nav-h) * -1);
  padding-top: var(--nav-h);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--scrim), 0.82) 0%, rgba(var(--scrim), 0.25) 32%, rgba(var(--scrim), 0.72) 72%, var(--ink) 100%),
    linear-gradient(96deg, rgba(var(--scrim), 0.85) 0%, rgba(var(--scrim), 0.28) 55%, transparent 100%);
}
.hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}
/* The extra bottom padding is the room the absolutely-positioned .scrollcue
   needs — without it the stats wrap into the cue on a phone and the last
   label reads through its glowing line. */
.hero__in {
  padding-block: clamp(3rem, 9vw, 7rem) calc(clamp(3rem, 9vw, 7rem) + 4.5rem);
  position: relative;
}
.hero__title { margin-bottom: 0.35em; }
.hero__title .l1 { display: block; }
.hero__title .l2 { display: block; }
.hero__lede { max-width: 46ch; margin-bottom: 2rem; }
.hero__cta { margin-bottom: clamp(2rem, 5vw, 3rem); }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero__stat { display: grid; gap: 0.15rem; }
.hero__stat b {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.hero__stat span {
  font-size: 0.68rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--dim);
}

/* The live one. It counts ready-to-ship units straight from the stock sheets,
   so it is the only number on the page that can change between two visits —
   worth lighting up. Glow is static; only the pulse is animation, so someone
   with reduced-motion still gets the treatment (the scroll cue learned this
   the hard way). */
.hero__stat--live {
  position: relative;
  padding-left: 1.15rem;
  text-decoration: none;          /* it is an <a> — see the note in pages-wings.js */
  transition: translate 0.2s var(--ease);
}
/* The arrow lives inside the label, so it inherits the label's colour and
   only moves on hover. Sized in em so it tracks the 0.68rem label. */
/* `display: inline-block` is doing real work here. The site's reset makes every
   svg `display: block`, which forces the arrow onto its own line no matter what
   white-space says — that is what put the arrow and then the live dot on three
   separate lines at 375px, not a wrapping problem. */
.hero__stat--live span svg {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.14em;
  margin-left: 0.15rem;
  transition: translate 0.2s var(--ease);
}
.hero__stat--live:hover span svg,
.hero__stat--live:focus-visible span svg { translate: 4px 0; }
.hero__stat--live:hover b {
  text-shadow: 0 0 24px rgba(0, 204, 255, 0.85), 0 0 52px rgba(0, 204, 255, 0.4);
}
.hero__stat--live:hover span { color: var(--white); }
/* A link inside a hero needs its focus ring to clear the glow, or the ring
   disappears into the bloom. */
.hero__stat--live:focus-visible { outline-offset: 6px; border-radius: 6px; }
.hero__stat--live::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.35em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 0 10px 1px rgba(0, 204, 255, 0.7);
}
.hero__stat--live b {
  color: var(--brand);
  text-shadow: 0 0 18px rgba(0, 204, 255, 0.55), 0 0 40px rgba(0, 204, 255, 0.25);
  animation: livePulse 3s ease-in-out infinite;
}
/* The label carries the arrow and the live dot, so it must not break: at 375px
   "READY TO SHIP NOW" plus the arrow came to exactly the block width and the
   arrow dropped onto its own line, with the dot below that again. nowrap lets
   the flex row widen instead, which it has room to do. */
.hero__stat--live span {
  color: var(--ice);
  white-space: nowrap;
}
/* A small dot that only appears once the number really came from the sheet,
   so the glow never implies "live" about a build-time snapshot. */
.hero__stat--live[data-live="true"] span::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 0.5rem;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px 1px var(--ok);
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__stat--live b,
  .hero__stat--live[data-live="true"] span::after { animation: none; opacity: 1; }
}

/* ---------- Hero video play/pause ----------
   Bottom-right of the hero, out of the headline's way but a real 44px target.
   Two CSS shapes rather than icon files: a pause bar pair, swapped for a
   triangle when paused. */
.vidtoggle {
  position: absolute;
  right: var(--gutter);
  bottom: 1.6rem;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(126, 176, 222, 0.34);
  border-radius: 50%;
  background: rgba(6, 12, 22, 0.55);
  backdrop-filter: blur(6px);
  color: #eaf4ff;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease);
}
.vidtoggle:hover,
.vidtoggle:focus-visible { opacity: 1; border-color: var(--brand); }

/* Pause: two bars, drawn with a border so one element makes both. */
.vidtoggle__icon {
  width: 11px;
  height: 13px;
  border-left: 3.5px solid currentColor;
  border-right: 3.5px solid currentColor;
}
/* Play: a triangle. */
.vidtoggle.is-paused .vidtoggle__icon {
  width: 0;
  height: 0;
  border: 0;
  border-left: 13px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 4px;              /* optical centring of a triangle */
}
@media (max-width: 700px) {
  .vidtoggle { width: 40px; height: 40px; bottom: 1.1rem; }
}

/* The scroll cue sits ON TOP of the hero content, so the content has to
   reserve room for it — at 375px the stats wrapped to three rows and the last
   label ran straight through the cue's line. `--cue-space` is that reservation,
   claimed by .hero__in's padding below. */
.scrollcue {
  --cue-space: 5.5rem;
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cyan);
  z-index: 2;
  pointer-events: none;
  /* The glow is a STATIC property; the keyframes only pulse its intensity.
     Keeping it inside the animation meant anyone with reduced-motion switched
     on — a real slice of visitors — got a flat, unlit cue, i.e. exactly the
     thing that was asked for, missing. Decoration is not motion. */
  text-shadow: 0 0 14px rgba(0, 204, 255, 0.6), 0 0 28px rgba(0, 204, 255, 0.28);
  animation: cueGlow 2.6s ease-in-out infinite;
}
/* A soft halo behind the whole cue. Sits on its own layer so it can bloom
   without smudging the letterforms. */
.scrollcue::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.75rem;
  translate: -50% 0;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 204, 255, 0.18), transparent 68%);
  opacity: 0.85;              /* visible without the pulse, too */
  z-index: -1;
  animation: cueHalo 2.6s ease-in-out infinite;
}
.scrollcue i {
  display: block;
  width: 2px;
  height: 46px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-2), transparent);
  box-shadow: 0 0 10px 1px rgba(0, 204, 255, 0.75), 0 0 22px 3px rgba(0, 204, 255, 0.35);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes cueGlow {
  0%, 100% { text-shadow: 0 0 9px rgba(0, 204, 255, 0.4), 0 0 18px rgba(0, 204, 255, 0.18); opacity: 0.75; }
  50% { text-shadow: 0 0 18px rgba(0, 204, 255, 0.9), 0 0 36px rgba(0, 204, 255, 0.45); opacity: 1; }
}
@keyframes cueHalo {
  0%, 100% { opacity: 0.5; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.06); }
}
/* Reduced motion keeps the LINE still — that one scales, and scaling is the
   part of this that could bother anyone sensitive to motion. The glow's
   opacity pulse stays: WCAG's reduced-motion guidance is aimed at large
   movement, parallax and vestibular triggers, not a slow fade in place, and
   Greg specifically wants the cue to read as alive on desktop (2026-08-06)
   where his OS has the setting on. Nothing moves; only brightness changes. */
@media (prefers-reduced-motion: reduce) {
  .scrollcue i { animation: none; opacity: 1; }
  /* !important is doing real work: the blanket reduced-motion rule further
     down crushes every animation to 0.01ms with !important, so a plain
     declaration here loses and the cue sits dead — which is exactly what Greg
     saw on desktop while his phone flashed away happily. */
  .scrollcue {
    animation-duration: 3.4s !important;
    animation-iteration-count: infinite !important;
  }
  .scrollcue::before {
    animation-name: cueHaloStill !important;
    animation-duration: 3.4s !important;
    animation-iteration-count: infinite !important;
  }
}
/* Same breathing, without the scale. */
@keyframes cueHaloStill {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Page hero (interior) */
.phero {
  position: relative;
  padding: clamp(5.5rem, 13vw, 9.5rem) 0 clamp(2.75rem, 6vw, 4.5rem);
  margin-top: calc(var(--nav-h) * -1);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}
.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 130% at 78% -10%, color-mix(in srgb, var(--brand-2) 22%, transparent), transparent 58%),
    radial-gradient(90% 110% at 8% 105%, color-mix(in srgb, var(--blue) 24%, transparent), transparent 60%),
    var(--ink-2);
}
.phero__img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.phero__title { margin-bottom: 0.3em; }
.phero .lede { max-width: 62ch; }

/* Breadcrumb */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--cyan); }
.crumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--line-strong); }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  position: relative;
  background: linear-gradient(170deg, var(--surface), var(--ink-3));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--cyan) 48%, transparent); box-shadow: var(--glow); }

/* Wing card */
.wingcard { display: flex; flex-direction: column; height: 100%; }
/* The whole tile is a click target via .stretch, so it should say so under the
   pointer — over the image especially, which is where people aim. */
.wingcard { cursor: pointer; }

/* A placecard standing in for a missing photo fills the media box exactly, so
   the tile is the same height as a photographed one. The .ccard keeps its own
   gradient, grid texture and logo; the media box keeps the 16/10 ratio and the
   rounded top corners, which is why the ccard drops its own border and radius. */
.wingcard__media--brand > .ccard {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.wingcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: radial-gradient(90% 90% at 50% 40%, var(--plate-a), var(--plate-b));
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
/* Absolutely positioned against the four insets, which gives a definite box in
   both axes. `height:100%` does NOT resolve inside an aspect-ratio container —
   portrait marks (Odin is 836x945) rendered oversized and were cropped.
   The inset doubles as the breathing room. */
.wingcard__media img {
  --pad: clamp(1.1rem, 7%, 2.4rem);
  position: absolute;
  inset: var(--pad);
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * var(--pad));
  max-height: calc(100% - 2 * var(--pad));
  margin: auto;
  object-fit: contain;
  transition: transform 0.55s var(--ease);
  filter: drop-shadow(0 12px 26px rgba(var(--shadow-rgb), 0.55));
}
/* Photos are full-bleed: no inset, fill and crop. */
.wingcard__media.is-photo img {
  --pad: 0px;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* Several wing marks are drawn dark-on-light by the client. Rather than
   recolour their brand, present those on a bright "spec plate". */
.wingcard__media.is-plate,
.plate-light {
  background:
    radial-gradient(120% 100% at 50% 0%, #ffffff, rgba(255, 255, 255, 0) 62%),
    linear-gradient(158deg, #f3f8fd 0%, #d8e4f0 52%, #b9cbe3 100%);
}
.wingcard__media.is-plate::after,
.plate-light::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -1px 0 rgba(var(--scrim), 0.14), inset 0 0 60px color-mix(in srgb, var(--blue) 7%, transparent);
  pointer-events: none;
}
.wingcard__media.is-plate img,
.plate-light img { filter: drop-shadow(0 10px 20px rgba(10, 25, 50, 0.22)); }
.wingcard:hover .wingcard__media img { transform: scale(1.06); }
.wingcard__tags { position: absolute; top: 0.85rem; left: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.4rem; z-index: 3; }
/* Tags sit over dark plates, light plates and photos — pin them to one
   readable treatment so contrast never depends on the artwork behind. */
.wingcard__tags .chip {
  background: rgba(var(--scrim), 0.78);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: var(--cyan);
}
.wingcard__tags .chip--new { color: var(--ok); }
.wingcard__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; gap: 0.85rem; }
.wingcard__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
}
.wingcard__title h3 { margin: 0; font-size: 1.65rem; letter-spacing: 0.03em; }
.wingcard:hover .wingcard__title h3 { color: var(--cyan); }
.wingcard__price {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--cyan);
  white-space: nowrap;
}
.wingcard__desc { font-size: 0.92rem; color: var(--muted); line-height: 1.65; margin: 0; flex: 1; }
.wingcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.35rem; }
.wingcard__sizes { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }

/* Stretched link */
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Skill meter */
.skill { display: grid; gap: 0.45rem; }
/* Readability: this label was 0.63rem/0.16em --dim and Greg found it hard to
   read — as was most card micro-text. Larger, looser type in --muted. */
.skill__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The label never breaks ("SKILL / LEVEL" read terribly on narrow cards);
   long ratings wrap on the value side, right-aligned. */
.skill__label span { white-space: nowrap; }
.skill__label b { color: var(--ice); font-weight: 700; font-size: 0.76rem; text-align: right; }
.skill__bar { display: flex; gap: 3px; }
.skill__seg {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(var(--tint-rgb), 0.18);
  transition: background 0.3s;
}
.skill__seg.on { background: var(--grad-brand); }
/* Partly lit segment: brand gradient from --from to --to, track elsewhere. */
.skill__seg.part { position: relative; overflow: hidden; }
.skill__seg.part::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 var(--from);
  width: calc(var(--to) - var(--from));
  background: var(--grad-brand);
}

/* Feature card */
.feature { padding: clamp(1.5rem, 2.6vw, 2.1rem); height: 100%; display: grid; gap: 0.85rem; align-content: start; }
.feature__ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--chip-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 30%, transparent);
  color: var(--cyan);
  margin-bottom: 0.2rem;
}
.feature__ico svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.3rem; margin: 0; letter-spacing: 0.03em; }
.feature p { font-size: 0.9rem; color: var(--muted); margin: 0; }

/* Numbered step card */
.step { padding: clamp(1.4rem, 2.4vw, 1.9rem); display: grid; gap: 0.7rem; align-content: start; height: 100%; }
.step__n {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step h3 { font-size: 1.2rem; margin: 0; }
.step p { font-size: 0.89rem; color: var(--muted); margin: 0; }

/* Doc / download card */
.doc {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease);
}
.doc:hover { border-color: color-mix(in srgb, var(--cyan) 48%, transparent); background: var(--surface-2); transform: translateX(4px); }
.doc__ico {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--chip-bg);
  color: var(--cyan);
}
.doc__ico svg { width: 19px; height: 19px; }
.doc__txt { flex: 1; min-width: 0; }
.doc__txt b {
  display: block;
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}
.doc__txt span { font-size: 0.72rem; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; }
.doc__arrow { color: var(--cyan); flex: none; }

/* ==========================================================================
   FILM CARDS (link out to the Fluid Wings Vimeo channel)
   ========================================================================== */
.film {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(170deg, var(--surface), var(--ink-3));
  transition: transform 0.35s var(--ease), border-color 0.3s, box-shadow 0.35s;
}
.film:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cyan) 48%, transparent); box-shadow: var(--glow); }
.film__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-3); }
.film__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease), opacity 0.3s; opacity: 0.85; }
.film:hover .film__thumb img { transform: scale(1.05); opacity: 1; }
.film__play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--scrim), 0.66);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28);
  color: var(--white);
  transition: background 0.25s, transform 0.25s var(--ease), color 0.25s;
}
.film:hover .film__play { background: var(--cyan); color: var(--on-brand); transform: translate(-50%, -50%) scale(1.08); }
.film__play svg { width: 22px; height: 22px; margin-left: 2px; }
.film__time {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.16rem 0.5rem;
  border-radius: 5px;
  background: rgba(var(--scrim), 0.82);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ice);
  font-variant-numeric: tabular-nums;
}
.film__meta { padding: 0 1.15rem 1.25rem; display: grid; gap: 0.2rem; }
.film__meta b {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.18;
}
.film:hover .film__meta b { color: var(--cyan); }
.film__meta span { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }

/* ==========================================================================
   TABLES (technical specs)
   ========================================================================== */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-3);
  -webkit-overflow-scrolling: touch;
}
table.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  min-width: 520px;
}
table.spec caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.15rem 0.35rem;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}
table.spec th,
table.spec td {
  padding: 0.72rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.spec thead th {
  background: var(--surface-2);
  color: var(--cyan);
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
}
table.spec tbody th {
  font-family: var(--body);
  font-weight: 600;
  color: var(--ice);
  font-size: 0.82rem;
}
table.spec tbody tr:last-child th,
table.spec tbody tr:last-child td { border-bottom: 0; }
table.spec tbody tr:hover td,
table.spec tbody tr:hover th { background: color-mix(in srgb, var(--cyan) 9%, transparent); }
table.spec td { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Stock tables link every row to its product page. At 0.82rem the link box is
   ~16px tall — legal under the inline exception to WCAG 2.2 target size, but
   a poor thumb target on a phone. Padding takes it past the 24px minimum
   without changing how the row reads; the negative margin keeps the column
   alignment identical to the non-linked cells. */
table.spec tbody th a {
  display: inline-block;
  padding-block: 0.28rem;
  margin-block: -0.28rem;
}

/* The stock tables' action buttons. The narrow-viewport rule further down sets
   `.btn { width: 100% }` so full-width buttons stack on a phone — inside a
   table cell that stretches the column instead, so it opts out here. */
table.spec .btn {
  width: auto;
  white-space: nowrap;
}
table.spec tbody td:last-child { padding-block: 0.5rem; }

/* Add to cart on a stock row. Solid --brand, never the gradient: at this size
   the label is normal-size text by WCAG, and the gradient's far end fails
   4.5:1 behind it (measured — see the phone-card rule below). */
table.spec .btn[data-add-stock] {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: none;
}
/* Already in this visitor's cart: quieter, and it opens the cart. */
table.spec .btn[data-add-stock][data-state="in-cart"] {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
/* Someone else is checking it out, or it has just sold. */
table.spec .btn[data-add-stock]:disabled {
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 0 0 1.5px var(--line);
  cursor: not-allowed;
  transform: none;
}
/* A ready wing with no price in the sheet. A text link, but with a full-size
   tap target like the buttons in the rows around it. */
.stockcell__ask {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cyan);
  white-space: nowrap;
}

/* ==========================================================================
   STOCK TABLE -> CARDS ON A PHONE
   A seven-column table is 767px wide. In a 279px viewport that meant scrolling
   488px sideways to reach the Request button — the one action the page exists
   for, effectively hidden, with only a small grey "scroll horizontally" note
   to suggest it was there. Below 720px each row becomes a card instead: every
   value on screen at once, and a full-width button that says what it does.

   `display` is changed on the table parts, which strips a table's implicit
   semantics, so the markup carries explicit role="table/row/cell" to put them
   back — see stockTable() in src/pages-content.js.
   ========================================================================== */
@media (max-width: 720px) {
  .tablewrap--stock {
    overflow-x: visible;      /* nothing left to scroll */
    border: 0;
    background: none;
    border-radius: 0;
  }
  /* `table.spec--stock`, not `.spec--stock`: the base rule is `table.spec`,
     which carries a type selector and therefore outranks a lone class. It also
     sets `min-width: 520px` — the thing that kept every card 520px wide inside
     a 375px screen until this reset it. */
  table.spec--stock {
    display: block;
    width: auto;
    min-width: 0;
  }
  .spec--stock tbody,
  .spec--stock tr,
  .spec--stock th,
  .spec--stock td { display: block; width: auto; }

  /* The header row has no place in a card layout, but it must stay in the
     accessibility tree — clipped, not display:none. */
  .spec--stock thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* `table.spec--stock caption`, not `.spec--stock caption`: the base rule is
     `table.spec caption` (two type selectors + a class), which outranks a class
     plus a type and would keep winning. Without `display: block` the caption
     keeps `display: table-caption`, which inside a display:block table
     shrink-to-fits and breaks "Wings ready to ship" onto four lines.
     Styled to match .eyebrow, so a card group is labelled the same way every
     other section on the site is. */
  table.spec--stock caption {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0 0 1rem;
    font-family: var(--body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan);
    white-space: nowrap;
  }
  table.spec--stock caption::before {
    content: "";
    flex: none;
    width: 28px;
    height: 2px;
    background: var(--grad-brand);
  }
  table.spec--stock caption::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--line);
  }

  .spec--stock tr {
    margin-bottom: 1rem;
    padding: 1.05rem 1.15rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .spec--stock tbody tr:hover td,
  .spec--stock tbody tr:hover th { background: none; }

  /* Card title: the wing and its size, on its own line. */
  .spec--stock tbody th {
    padding: 0 0 0.75rem;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
  }
  .spec--stock tbody th a { color: var(--cyan); text-decoration: none; }

  /* Every other cell becomes a label/value row. */
  .spec--stock tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0;
    border: 0;
    text-align: right;
  }
  .spec--stock tbody td::before {
    content: attr(data-label);
    flex: none;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
  }
  /* The price is the number people scan for. */
  .spec--stock tbody td.stockcell--price {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--white);
  }

  /* The action. Full width, solid, and unmissable — this is the whole point
     of the rewrite, so it does not inherit the ghost treatment it wears in a
     table cell. */
  .spec--stock tbody td.stockcell--act {
    display: block;
    padding: 0.9rem 0 0;
    margin-top: 0.35rem;
    border-top: 1px solid var(--line);
  }
  .spec--stock tbody td.stockcell--act::before { content: none; }
  /* Solid --brand, NOT --grad-brand. The gradient's far end is a mid blue, and
     this label is 12.5px bold — normal-sized text by WCAG, needing 4.5:1. It
     measured 4.05 against that end while passing easily against the other two,
     which is exactly the kind of failure a gradient hides. The flat fill is
     8.89:1 everywhere. The larger hero buttons keep the gradient because at
     their size they qualify as large text. */
  .spec--stock tbody td.stockcell--act .btn {
    width: 100%;
    min-height: 44px;
    white-space: normal;
    background: var(--brand);
    border-color: transparent;
    color: var(--on-brand);
    font-size: 0.78rem;
  }
}

/* Some wings publish only a materials table. Left to fill the row it stretches
   two columns across the full content width and reads as an empty shelf. */
.techblocks.grid > :only-child { max-width: 780px; }

/* Was --dim at 0.7rem, which measured 3.43:1 — an AA failure at that size, and
   Greg reported it as "dark and hard to read" before the numbers did. It also
   carried `@media (min-width: 720px) { display: none }`, so on the stock pages
   it could never appear at the one range where it is actually needed. Now:
   readable at 9.21:1, and site.js decides visibility by measuring real
   overflow rather than guessing from a breakpoint. */
.scrollhint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.7rem;
}
.scrollhint::after {
  content: "→";
  font-size: 1.05em;
  color: var(--cyan);
  animation: nudge 1.6s var(--ease) infinite;
}
@keyframes nudge {
  0%, 60%, 100% { transform: translateX(0); }
  30% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .scrollhint::after { animation: none; }
}

/* ---------- Spec key/value strip ---------- */
.specgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
  gap: 1px;
  /* Cell colour, not line colour: when the last row is short the leftover
     track used to show through as a grey blank block. */
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.specgrid div {
  background: var(--ink-3);
  box-shadow: 0 0 0 1px var(--line);
  padding: 1.05rem 1.15rem;
  display: grid;
  gap: 0.25rem;
}
.specgrid dt { font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
.specgrid dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* ---------- Bullet lists ---------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ticks li { position: relative; padding-left: 1.85rem; font-size: 0.93rem; color: var(--text); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg);
}
.ticks--tight li { font-size: 0.88rem; }

.dashes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.dashes li { position: relative; padding-left: 1.2rem; font-size: 0.9rem; color: var(--muted); }
.dashes li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 1.5px; background: var(--cyan); }
.dashes strong { color: var(--ice); font-weight: 600; }

/* ==========================================================================
   SAFETY / LEGAL
   ========================================================================== */
.safety {
  position: relative;
  padding: clamp(1.35rem, 2.6vw, 1.9rem) clamp(1.35rem, 2.6vw, 1.9rem) clamp(1.35rem, 2.6vw, 1.9rem) clamp(3.2rem, 5vw, 4rem);
  background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  border-radius: var(--radius);
  color: var(--ice);
  font-size: 0.9rem;
  line-height: 1.62;
}
.safety::before {
  content: "";
  position: absolute;
  left: clamp(1.15rem, 2vw, 1.5rem);
  top: clamp(1.45rem, 2.7vw, 2rem);
  width: 18px;
  height: 18px;
  background: var(--warn);
  -webkit-mask: var(--warn-ico) center / contain no-repeat;
  mask: var(--warn-ico) center / contain no-repeat;
  --warn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm0 6 6.5 11h-13L12 8zm-1 3v4h2v-4h-2zm0 5v2h2v-2h-2z'/%3E%3C/svg%3E");
}
.safety__h {
  font-size: 0.76rem;
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--warn);
  margin: 0 0 0.55rem;
}
.safety p:last-child { margin-bottom: 0; }
.safety a { color: var(--warn); text-decoration: underline; text-underline-offset: 3px; }
.safety a:hover { color: var(--white); }
.safety--danger { background: color-mix(in srgb, var(--danger) 8%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.safety--danger::before { background: var(--danger); }
.safety--danger .safety__h { color: var(--danger); }
.safety--danger a { color: var(--danger); }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee {
  overflow: hidden;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-block: 1px solid var(--line);
  background: var(--ink-2);
  user-select: none;
}
/* 43s, not 38s. The loop always travels exactly one group width, so adding a
   word makes it travel further in the same time — "Sandy, Utah" grew the group
   by 14% and sped the scroll from 36 to 41 px/sec. Retimed to hold the pace the
   design was set at. Add or remove a word and this wants adjusting again. */
.marquee__track { display: flex; width: max-content; animation: slide 43s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__grp { display: flex; align-items: center; flex: none; }
/* The outlined words alternate with the blue ones. At 1px / 0.35 alpha and a
   fully transparent fill they measured 2.01:1 on dark and 1.88:1 on light —
   under the 3:1 that large text needs, and Greg could not read "ADDICTED TO
   INNOVATION" or "SANDY, UTAH" on a phone. Two changes: a much stronger stroke,
   and a faint fill so the letterforms have body instead of being hollow. The
   outline character survives; it just stops whispering. */
.marquee span {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(var(--tint-rgb), 0.16);
  -webkit-text-stroke: 1.4px rgba(var(--tint-rgb), 0.92);
  padding-inline: 1.5rem;
  white-space: nowrap;
}
.marquee span.hot {
  -webkit-text-stroke: 0;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marquee i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
  opacity: 0.75;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quote { padding: clamp(1.6rem, 3vw, 2.3rem); display: grid; gap: 1.1rem; align-content: start; height: 100%; }
.quote__mark {
  font-family: var(--display);
  font-size: 3.6rem;
  line-height: 0.6;
  color: var(--chip-line);
}
.quote p { font-size: 0.96rem; line-height: 1.68; color: var(--text); font-style: italic; margin: 0; }
.quote__by { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.4rem; border-top: 1px solid var(--line); }
.quote__av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--grad-hot);
  color: var(--on-brand);
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
}
.quote__by b { display: block; font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); line-height: 1.2; }
.quote__by span { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }

/* ==========================================================================
   MEDIA SLOTS (Seedance placeholders)
   ========================================================================== */
.slot {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(80% 120% at 20% 0%, color-mix(in srgb, var(--brand-2) 25%, transparent), transparent 60%),
    radial-gradient(90% 120% at 85% 100%, color-mix(in srgb, var(--blue) 35%, transparent), transparent 62%),
    linear-gradient(160deg, var(--plate-a), var(--plate-b));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
}
.slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(var(--tint-rgb), 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--tint-rgb), 0.07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 78%);
}
.slot video, .slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Film slot: real footage with the caption laid over a bottom scrim. */
.slot--film { margin: 0; display: block; padding: 0; }
.slot--film::before { display: none; }
.slot__video { z-index: 0; }
.slot__cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  text-align: left;
  padding: clamp(1.15rem, 3vw, 2rem);
  background: linear-gradient(0deg, rgba(var(--scrim), 0.92) 0%, rgba(var(--scrim), 0.62) 55%, transparent 100%);
}
.slot__cap h3 { font-size: clamp(1.35rem, 3vw, 2.1rem); margin: 0; }
.slot__cap p { font-size: 0.85rem; color: var(--ice); max-width: 52ch; margin: 0; }
.slot--film .slot__badge { background: rgba(var(--scrim), 0.66); backdrop-filter: blur(6px); }
.slot__in { position: relative; z-index: 2; display: grid; gap: 0.85rem; justify-items: center; }
.slot__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.34rem 0.8rem;
  border-radius: 100px;
  background: rgba(var(--scrim), 0.6);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.slot__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
.slot h3 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); margin: 0; }
.slot p { font-size: 0.85rem; color: var(--muted); max-width: 44ch; margin: 0; }

/* ==========================================================================
   BRAND PLACECARD ("c-card")
   Fills any box with the Fluid Wings mark on brand gradient. Set the aspect
   with --cc-ratio, or drop it in a flex/grid cell and it stretches to fit.
   ========================================================================== */
.ccard {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--cc-ratio, 16 / 9);
  min-height: var(--cc-min, 0);
  padding: clamp(1rem, 4%, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(90% 130% at 18% 0%, color-mix(in srgb, var(--brand-2) 30%, transparent), transparent 58%),
    radial-gradient(90% 130% at 85% 100%, color-mix(in srgb, var(--blue) 42%, transparent), transparent 60%),
    linear-gradient(160deg, #0d1a2b 0%, var(--plate-b) 100%);
}
/* Faint blueprint grid, fading out at the edges. */
.ccard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(var(--tint-rgb), 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--tint-rgb), 0.09) 1px, transparent 1px);
  background-size: 7% 12%;
  mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 76%);
}
/* Sweep of light across the mark. */
.ccard::after {
  content: "";
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  background: linear-gradient(74deg, transparent 42%, color-mix(in srgb, var(--cyan) 16%, transparent) 50%, transparent 58%);
}
.ccard__mark {
  width: min(52%, 260px);
  height: auto;
  filter: drop-shadow(0 12px 34px color-mix(in srgb, var(--brand-2) 35%, transparent));
}
.ccard__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(0.7rem, 4%, 1.4rem);
  text-align: center;
  font-size: clamp(0.55rem, 1.1vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: 0.85;
}
.ccard--tall { --cc-ratio: 4 / 5; }
.ccard--square { --cc-ratio: 1 / 1; }
.ccard--wide { --cc-ratio: 21 / 9; }
/* Stretch to a sibling's height instead of holding its own ratio. */
.ccard--fill { aspect-ratio: auto; height: 100%; }

/* ==========================================================================
   BRAND MARK PLATE (Logos & Media)
   Absolute-positioned image: with only max-height:100% a tall mark (Odin is
   2548x3045) overrode the aspect-ratio and made cards different heights.
   ========================================================================== */
.markplate {
  position: relative;
  aspect-ratio: var(--mp-ratio, 3 / 2);
  overflow: hidden;
}
.markplate img {
  position: absolute;
  inset: clamp(0.9rem, 8%, 2rem);
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * clamp(0.9rem, 8%, 2rem));
  max-height: calc(100% - 2 * clamp(0.9rem, 8%, 2rem));
  margin: auto;
  object-fit: contain;
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0.85rem; }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--ink-3); }
/* `contain`, not `cover`. Half of these are colourway charts, riser diagrams
   and spec tables — cropping one to fill the tile throws away the information
   it exists to show. The plate behind fills whatever the picture does not, and
   the fixed tile height keeps the grid even. */
.gallery figure { aspect-ratio: var(--ar, 4 / 3); }
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--plate-diagram, #fbfcfe);
  transition: transform 0.5s var(--ease), filter 0.4s;
}
/* Zooming a diagram on hover pushes its edges out of the frame — the one
   thing this change exists to prevent. */
.gallery figure:hover img { transform: none; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  text-align: center;
  border-block: 1px solid var(--line);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 130% at 22% 0%, color-mix(in srgb, var(--brand-2) 30%, transparent), transparent 60%),
    radial-gradient(70% 130% at 82% 100%, color-mix(in srgb, var(--blue) 40%, transparent), transparent 60%),
    var(--ink-2);
}
.cta__img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.cta h2 { margin-bottom: 0.5em; }
.cta .lede { max-width: 58ch; margin: 0 auto 2rem; }

/* ==========================================================================
   FORMS (visual only — preview build)
   ========================================================================== */
/* minmax(0,1fr), not the implicit `auto` column. An auto track's maximum is
   max-content, so it grows to the widest thing inside and has no `fr` to pull
   it back to the container — a <select> reports the width of its longest
   <option>, so "HK Terminal" made the whole form 342px inside a 288px card and
   the card's overflow:hidden clipped every input's right edge on a phone.
   `min-width: 0` on the items does not fix this; the floor is the track's. */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
.field label {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.field label .req { color: var(--cyan); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--white);
  font-family: var(--body);
  font-size: 0.94rem;
  transition: border-color 0.2s, background 0.2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: var(--surface);
}
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1.1rem; }

.formnote {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.85rem 1rem;
  background: var(--ink-3);
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
}
/* The "showing one model" bar on a filtered stock list. Sits above the tables
   and is revealed by script when the page is reached as ?wing=CODE. */
.stockfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 12px;
}
.stockfilter p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ice);
}
.stockfilter .btn { flex: none; }

/* Stock filter bar: wing, size, ready-to-ship only. */
.stocktools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1rem;
  margin: 0 0 2.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.stocktools__f { display: grid; gap: 0.3rem; min-width: 11rem; flex: 1 1 11rem; }
.stocktools__f span {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.stocktools select {
  font: 500 0.95rem/1.3 var(--body);
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--white);
  width: 100%;
}
.stocktools__chk { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; font-size: 0.9rem; color: var(--text); cursor: pointer; }
.stocktools__chk input { width: 1.15rem; height: 1.15rem; accent-color: var(--cyan); }
.stocktools__count { font-size: 0.85rem; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.stocktools__reset {
  min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--white); font: 600 0.82rem/1 var(--body); cursor: pointer;
}
.stocktools__reset:hover { color: var(--cyan); border-color: var(--cyan); }
.stocktools select:focus-visible, .stocktools__reset:focus-visible, .stocktools__chk input:focus-visible {
  outline: 3px solid var(--cyan); outline-offset: 2px;
}
@media (max-width: 560px) {
  .stocktools { gap: 0.6rem; }
  .stocktools__f { flex: 1 1 calc(50% - 0.3rem); min-width: 0; }
}

/* Help text under a field. designer.css has its own copy of this, but that
   stylesheet is only loaded on the design-centre pages. */
.field__help {
  margin: 0;
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--muted);
}

/* The confirmation state. Was three copies of the same inline style string on
   three different forms; it is a variant, so it gets to be a variant. */
.formnote--ok {
  border-style: solid;
  border-color: var(--cyan);
  color: var(--ice);
}
/* A send that failed. Amber rather than red — the visitor did nothing wrong,
   and the note gives them a phone number rather than telling them off. */
.formnote--bad {
  border-style: solid;
  border-color: var(--warn);
  color: var(--ice);
}
.formnote--bad a { color: var(--warn); }

/* Fieldsets on the stock order form. The designer has its own (.blk in
   designer.css) but that stylesheet only loads on design pages. */
.form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  /* The UA sheet gives every fieldset `min-width: min-content`, which no
     `width` can override. Inside a grid form that floor is the widest thing
     the fieldset contains — a <select> reports the width of its longest
     <option> — so on a phone one long wing name ("HK Terminal") pushed the
     whole form past its card and the card's overflow:hidden clipped the right
     edge off every input. Zero lets the track shrink to the card. */
  min-width: 0;
}
/* Same reason one level down: grid items default to min-width:auto, so a
   field or a row would re-impose the same floor. */
.form .field-row,
.form .field { min-width: 0; }
.field select { min-width: 0; }
/* Field labels are 0.73rem bold uppercase, so a legend has to be clearly
   bigger AND heavier to read as the thing that groups them — Barlow Condensed
   at 400 sits under its own labels visually. The rule above each block does
   the separating that the size alone can't. */
.form legend {
  padding: 0;
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--white);
}
.form fieldset + fieldset {
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* ---------- Shopping cart (Greg, 2026-10-12) ----------
   Header button, slide-out cart and the buy box on product pages. The cart is
   a native <dialog>: showModal() gives the focus trap, Escape and an inert page
   behind it for free, which a hand-built drawer gets wrong in small ways. */
.cartbtn {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: color 0.22s, box-shadow 0.22s;
  flex: none;
}
.cartbtn:hover { color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.cartbtn svg { width: 20px; height: 20px; }
.cartbtn__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font: 800 0.7rem/20px var(--body);
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* A ring in the page colour so the badge reads as sitting on the icon. */
  box-shadow: 0 0 0 2px var(--ink);
}

html.cart-open { overflow: hidden; }

.cart {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(430px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.4);
}
.cart::backdrop {
  background: rgba(3, 6, 12, 0.62);
  backdrop-filter: blur(3px);
}
.cart__panel { display: flex; flex-direction: column; height: 100%; }
.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem 0.9rem 1.35rem;
  border-bottom: 1px solid var(--line);
}
.cart__title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--white);
}
.cart__close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
}
.cart__close:hover { color: var(--cyan); }
.cart__close svg { width: 20px; height: 20px; }

.cart__lines {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem 1.35rem;
  list-style: none;
}
.cart__empty {
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.8rem;
  padding: 1.6rem 1.35rem;
  color: var(--ice);
  font-size: 0.92rem;
}
.cart__empty p { margin: 0; }
.cart__empty-h {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
}
.cart__empty a:not(.btn) { color: var(--cyan); }
.cart__empty-acts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* Why something left the cart. Sits above the lines, outside the footer. */
.cart__notice { margin: 0.9rem 1.35rem 0; }
/* Shown while a wing is in the cart: what "authorized" means. */
.cart__auth {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ice);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.cart__auth strong { color: var(--white); }

.cart__foot {
  display: grid;
  gap: 0.75rem;
  padding: 1.1rem 1.35rem 1.3rem;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.cart__sub {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--ice);
}
.cart__sub strong {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.cart__fine { margin: 0; font-size: 0.8rem; color: var(--muted); }
/* Short screens (phones): the footer's notes are too tall to stay pinned, and
   pinned they left a sliver for the items (beta report, 2026-10-19). Here the
   whole panel scrolls as one page instead — items first, then the totals,
   notes and checkout — and the notes are set a little tighter. */
@media (max-height: 860px), (max-width: 560px) {
  .cart__panel { overflow-y: auto; overscroll-behavior: contain; }
  .cart__lines { flex: 0 0 auto; overflow: visible; }
  .cart__empty { flex: 0 0 auto; }
  .cart__foot { gap: 0.6rem; padding: 0.95rem 1.35rem 1.2rem; }
  .cart__auth { font-size: 0.8rem; line-height: 1.45; padding: 0.6rem 0.75rem; }
}
.cart__continue {
  justify-self: center;
  min-height: 32px;
  padding: 0.3rem 0.7rem;
  font-size: 0.86rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart__continue:hover { color: var(--cyan); }

.cartline {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: start;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}
.cartline:last-child { border-bottom: 0; }
.cartline__thumb {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--line);
}
/* Not on a plated logo: this rule comes after .plate-light and would win. */
.cartline__thumb:not(.plate-light) { background: var(--ink-3); }
.cartline__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Several wings' only picture is their logo: shown whole, never cropped.
   Dark lettering also gets .plate-light, as on the wing cards. */
.cartline__thumb--logo img { object-fit: contain; padding: 6px; }
.cartline__thumb.plate-light { position: relative; }
.cartline__ph { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--cyan); }
.cartline__body { display: grid; gap: 0.15rem; min-width: 0; }
.cartline__name { font-weight: 700; color: var(--white); text-decoration: none; }
.cartline__name:hover { color: var(--cyan); }
.cartline__variant { font-size: 0.84rem; color: var(--ice); }
.cartline__unit { font-size: 0.8rem; color: var(--muted); }
.cartline__qty {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-top: 0.5rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.cartline__step {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.05rem;
  color: var(--white);
}
.cartline__step:hover:not(:disabled) { color: var(--cyan); }
.cartline__step:disabled { opacity: 0.35; cursor: not-allowed; }
.cartline__num {
  min-width: 1.7rem;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.cartline__end { display: grid; justify-items: end; gap: 0.55rem; }
.cartline__total { font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.cartline__remove {
  min-height: 24px;
  padding: 0.15rem 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cartline__remove:hover { color: var(--danger); }

/* Pressing Checkout in a preview build points at the note that explains it. */
.formnote.is-flash { animation: cartFlash 1.3s var(--ease) 1; }
@keyframes cartFlash {
  0%, 100% { box-shadow: none; }
  25% { box-shadow: 0 0 0 2px var(--cyan); }
}

/* Slide in — only for people who have not asked for less motion. Everyone
   else gets the cart instantly, which is the whole point of the setting. */
@media (prefers-reduced-motion: no-preference) {
  .cart[open] { animation: cartIn 0.3s var(--ease); }
  .cart[open]::backdrop { animation: cartFade 0.3s ease; }
}
@keyframes cartIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes cartFade { from { opacity: 0; } to { opacity: 1; } }

/* --- buy box --- */
.buy {
  display: grid;
  gap: 1.15rem;
  margin-top: 0.4rem;
  padding: clamp(1.15rem, 2.4vw, 1.6rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.buy__h {
  margin: 0;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--white);
}
.buy__group {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.buy__group legend,
.buy__qty label,
.buy__total span {
  padding: 0;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.buy__group legend { margin-bottom: 0.55rem; }
.buy__group legend .req { color: var(--cyan); }

/* Radios stay real, focusable radios — arrow keys move between sizes the way
   every screen-reader user expects. Only their circle is hidden: each one is
   stretched invisibly over its whole chip, so the thing you click IS the radio
   and its target is the full 44px chip rather than a 1px dot. */
.buy__chip input,
.buy__opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.buy__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.buy__chip { position: relative; cursor: pointer; }
.buy__chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white);
  transition: box-shadow 0.18s, background 0.18s;
}
.buy__chip:hover span { box-shadow: inset 0 0 0 1px var(--cyan); }
.buy__chip input:checked + span {
  background: var(--chip-bg);
  box-shadow: inset 0 0 0 2px var(--brand);
}
.buy__chip input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 3px; }

.buy__opts { display: grid; gap: 0.5rem; }
.buy__opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  cursor: pointer;
  transition: box-shadow 0.18s, background 0.18s;
}
.buy__opt:hover { box-shadow: inset 0 0 0 1px var(--cyan); }
.buy__opt:has(input:checked) { background: var(--chip-bg); box-shadow: inset 0 0 0 2px var(--brand); }
.buy__opt:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 3px; }
.buy__opt-name { font-size: 0.93rem; font-weight: 600; color: var(--white); }
.buy__opt-price { font-weight: 700; color: var(--ice); font-variant-numeric: tabular-nums; }
.buy__err { margin: 0; font-size: 0.84rem; font-weight: 600; color: var(--danger); }

.buy__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.buy__qty { display: grid; gap: 0.45rem; }
.buy__stepper {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.buy__stepper button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.15rem;
  color: var(--white);
}
.buy__stepper button:hover { color: var(--cyan); }
.buy__stepper input {
  width: 2.8rem;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font: 700 1rem var(--body);
  color: var(--white);
  -moz-appearance: textfield;
  appearance: textfield;
}
.buy__stepper input::-webkit-outer-spin-button,
.buy__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy__total { display: grid; justify-items: end; gap: 0.1rem; }
.buy__total strong {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.buy__help { margin: 0; font-size: 0.85rem; color: var(--muted); }
.buy__help a { color: var(--cyan); }

@media (prefers-reduced-motion: reduce) {
  .cartbtn, .buy__chip span, .buy__opt { transition: none; }
}

/* --- order complete page --- */
.ordered { display: grid; gap: 1.5rem; max-width: 760px; }
.ordered__items:empty { display: none; }
.ordered__table { width: 100%; }
.ordered__table td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ordered__table .ordered__total { font-weight: 800; color: var(--white); font-size: 1.05rem; }
.ordered__help { margin: 0; font-size: 0.9rem; color: var(--muted); }
.ordered__help a, .cart__stripe a { color: var(--cyan); }
.cart__stripe { text-align: center; }

/* ---------- Visually hidden ----------
   Clipped, not display:none — it has to stay in the accessibility tree. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Weight ranges ----------
   One shared weight axis, one row per size, so a pilot finds their weight once
   and reads down. Replaces a PDF that was a screenshot of the same numbers.

   Every band's position comes from inline --a (offset) and --b (width) set at
   build time, so this is correct before any script runs. */
.wr {
  margin: 0;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.wr__cap { display: grid; gap: 0.2rem; margin-bottom: 1.1rem; }
.wr__cap strong {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--white);
}
.wr__cap span { font-size: 0.84rem; color: var(--muted); }

/* --- the weight input --- */
.wr__tool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.wr__tool label {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.wr__input { position: relative; display: inline-flex; align-items: center; }
.wr__input input {
  width: 7.5rem;
  padding: 0.6rem 2.4rem 0.6rem 0.8rem;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--white);
  font-family: var(--body);
  font-size: 0.94rem;
}
.wr__kg {
  position: absolute;
  right: 0.8rem;
  font-size: 0.82rem;
  color: var(--muted);
  pointer-events: none;
}
.wr__out { margin: 0; font-size: 0.86rem; color: var(--ice); }
.wr__out:empty { display: none; }
.wr__out b { color: var(--cyan); }

/* --- key --- */
.wr__key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--ice);
}
.wr__key li { display: flex; align-items: center; gap: 0.4rem; }
.wr__sw { width: 14px; height: 14px; border-radius: 4px; }

/* --- chart --- */
.wr__chart { position: relative; }
.wr__ticks {
  position: relative;
  height: 1.1rem;
  margin-left: var(--wr-gutter, 4.2rem);
  font-size: 0.7rem;
  color: var(--dim);
}
.wr__ticks span {
  position: absolute;
  left: var(--a);
  transform: translateX(-50%);
}
.wr__rows { display: grid; gap: 0.4rem; }
.wr__row { display: grid; grid-template-columns: var(--wr-gutter, 4.2rem) minmax(0, 1fr); align-items: center; }
.wr__size {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}
.wr__unit { font-size: 0.72rem; color: var(--muted); }
.wr__track {
  position: relative;
  display: block;
  height: 30px;
  background: rgba(var(--tint-rgb), 0.06);
  border-radius: 6px;
}
.wr__band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--a);
  width: var(--b);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  transition: filter 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
/* An open-ended band has no real edge — square it off and fade it out so
   ">115" does not read as "115 to 130". */
.wr__band.is-openhi { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wr__band.is-openlo { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.wr__val { padding: 0 0.35rem; }

/* A 5 kg band on a phone is ~18px wide and "110–115" needs 50px, so the label
   was being sliced by the band's own overflow — "110–1" is worse than nothing.
   Measured per band rather than at a breakpoint, because how narrow a band
   gets depends on the wing's own numbers, not on the viewport. The band keeps
   its colour and position, the .vh text keeps it readable to a screen reader,
   the title shows it on hover, and the table underneath has every figure. */
.wr__band { container-type: inline-size; }
@container (max-width: 54px) {
  .wr__val { display: none; }
}

/* Skill ramp, built from the four tokens the site already uses for ok / cyan /
   warn / danger, so the hues are the contrast-vetted ones in both themes.

   The label is NOT the raw token: a 22% wash of its own hue sits right under
   it, and for the most saturated of the four that killed the contrast (red
   text on a red wash measured 3.99:1 in dark mode). Mixing 30% of --text into
   the ink fixes all four and adapts by itself — --text is near-white in dark
   and near-black in light, so the mix lightens or darkens in whichever
   direction that theme needs. Dropping the wash instead would have worked too,
   but it makes the band itself too faint to pick out against the track. */
.wr__band--novice { background: color-mix(in srgb, var(--ok) 22%, transparent); color: color-mix(in srgb, var(--ok) 70%, var(--text)); }
.wr__band--inter  { background: color-mix(in srgb, var(--cyan) 22%, transparent); color: color-mix(in srgb, var(--cyan) 70%, var(--text)); }
.wr__band--adv    { background: color-mix(in srgb, var(--warn) 22%, transparent); color: color-mix(in srgb, var(--warn) 70%, var(--text)); }
.wr__band--expert { background: color-mix(in srgb, var(--danger) 22%, transparent); color: color-mix(in srgb, var(--danger) 70%, var(--text)); }
.wr__sw.wr__band--novice { background: var(--ok); }
.wr__sw.wr__band--inter  { background: var(--cyan); }
.wr__sw.wr__band--adv    { background: var(--warn); }
.wr__sw.wr__band--expert { background: var(--danger); }

/* The band the entered weight lands in. */
.wr__band.is-hit {
  box-shadow: inset 0 0 0 2px currentColor;
  filter: saturate(1.25);
}
.wr__row.is-out .wr__band { opacity: 0.35; }

/* --- "your weight" marker --- */
.wr__marker {
  position: absolute;
  top: 1.1rem;
  bottom: 0;
  left: calc(var(--wr-gutter, 4.2rem) + var(--at, 0%));
  width: 0;
  border-left: 2px dashed var(--white);
  pointer-events: none;
}
.wr__marker b {
  position: absolute;
  top: -0.15rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.05rem 0.35rem;
  background: var(--white);
  color: var(--ink);
  border-radius: 4px;
  font-size: 0.66rem;
  white-space: nowrap;
}
.wr__foot { margin: 1rem 0 0; font-size: 0.76rem; color: var(--dim); }

@media (max-width: 620px) {
  /* The size label goes above its own bar — at 375px a 4.2rem gutter leaves
     the bands too narrow to carry their numbers. */
  .wr { --wr-gutter: 0rem; }
  .wr__row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .wr__rows { gap: 0.7rem; }
  .wr__band { font-size: 0.68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wr__band { transition: none; }
}

/* ---------- Segmented tabs (canopy / glider demo) ----------
   Two panels, one visible. Sized as a real tab strip rather than chips so the
   choice reads as "which form am I filling in", not as an optional filter. */
.segtabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.segtab {
  appearance: none; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}
.segtab:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.segtab.is-on { border-color: var(--brand); background: var(--chip-bg); }
.segtab__name {
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--white);
}
.segtab__meta { font-size: 0.76rem; color: var(--muted); }
.segtab.is-on .segtab__meta { color: var(--cyan); }
@media (prefers-reduced-motion: reduce) {
  .segtab { transition: none; }
  .segtab:hover { transform: none; }
}
/* A checkbox reads as a row, not a stacked label-over-input like every other
   field, so it opts out of .field's grid rather than fighting it. */
.field--check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
/* 24px, not the 18px a checkbox defaults to — WCAG 2.2 target size has no
   inline exception for a form control the way it does for a link in a
   sentence, and this is the box someone ticks to say they understood the
   terms of a $4,000 purchase. */
.field--check input {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  accent-color: var(--brand);
}
.field--check label {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  line-height: 1.55;
}

/* ==========================================================================
   CONTACT BLOCKS
   ========================================================================== */
.contactlist { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.contactlist li { display: flex; gap: 1rem; align-items: flex-start; }
.contactlist .ico {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--chip-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 30%, transparent);
  color: var(--cyan);
}
.contactlist .ico svg { width: 19px; height: 19px; }
.contactlist b {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.15rem;
}
.contactlist a, .contactlist span { color: var(--white); font-size: 1rem; font-weight: 500; }
.contactlist a:hover { color: var(--cyan); }

/* ==========================================================================
   PROSE (legal pages)
   ========================================================================== */
.prose { max-width: 78ch; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 2.6rem; margin-bottom: 0.75rem; }
.prose h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); margin-top: 2rem; margin-bottom: 0.6rem; color: var(--cyan); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); font-size: 0.95rem; line-height: 1.72; }
.prose strong { color: var(--ice); }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: 0.5rem; margin: 0 0 1.2rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.toc {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  align-self: start;
  padding: 1.35rem;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.toc__h { font-size: 0.68rem; font-family: var(--body); letter-spacing: 0.2em; color: var(--dim); margin-bottom: 0.9rem; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.toc a { font-size: 0.85rem; color: var(--muted); }
.toc a:hover { color: var(--cyan); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.sitefooter { background: var(--ink-2); border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 5rem); }
.footgrid {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footbrand img { height: 88px; width: auto; margin-bottom: 1.25rem; }
.footbrand p { font-size: 0.88rem; color: var(--muted); max-width: 34ch; }
.footcol__h {
  font-size: 0.68rem;
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.4;
  color: var(--dim);
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}
.footcol ul { list-style: none; margin: 0; padding: 0; display: grid; }
/* Padded rather than gapped so each link clears the 24x24 target minimum. */
.footcol a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding-block: 0.2rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.footcol a:hover { color: var(--cyan); }

.social { display: flex; gap: 0.6rem; margin-top: 1.35rem; }
.social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  transition: all 0.25s var(--ease);
}
.social a:hover { color: var(--ink); background: var(--cyan); border-color: var(--cyan); transform: translateY(-2px); }
.social svg { width: 17px; height: 17px; }

.footsafety { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.footbottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.35rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--dim);
}
.footbottom__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footbottom a { display: inline-flex; align-items: center; min-height: 26px; color: var(--dim); }
.footbottom a:hover { color: var(--cyan); }

/* ==========================================================================
   MOTION / REVEAL
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

.noscroll-x { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* ---------- Header fit ----------
   Nine top-level items plus the brand and the CTA need ~1465px laid out at
   full size. The drawer used to take over only at 1080px, which left every
   width in between overflowing the bar — invisible at 375 and at 1520, and
   wrong at 1280, 1366 and 1440, which is what most people are on. Adding
   "Harness & Accessories" (the widest item at 191px) stretched that band from
   ~187px to ~384px.

   So: tighten the bar through the middle widths rather than shrink the type
   everywhere, and start the drawer where even the tightened bar stops fitting.
   The two values are a pair — if a nav item is ever added or renamed, re-run
   the width sweep in tools/check-header-fit.js and move BOTH. */
/* 1520px is --wrap-wide: above it the bar stops growing, so the full-size nav
   has ~100px of room and never needs this. Below it the margin shrinks to
   single digits, which one renamed nav item would eat — so tighten the whole
   way down rather than leave a knife-edge zone in the 1440s. */
/* 2026-10-28: no longer capped at 1520px; with Maintenance the full-size
   bar no longer fits the 1520px wrap either. */
@media all {
  /* Scoped to the header bar. --gutter is the page's own measure, so
     narrowing that token here would pull in every section on the site. */
  .siteheader .nav { padding-inline: 1.35rem; }
  .nav__links { gap: 0.15rem; }
  .nav__link {
    padding: 0.6rem 0.36rem;
    font-size: 0.93rem;
    letter-spacing: 0.035em;
  }
  .nav__right { gap: 0.3rem; }
  /* The cart button (2026-10-12) took the last of the slack: at 1261px the bar
     needed exactly the 1246px it had. Header icon buttons drop to 40px here —
     still well over the 24px target minimum — and the CTA loses a little
     padding, which together buy back the margin a font-rendering difference
     would otherwise eat. */
  .themetoggle, .cartbtn { width: 40px; height: 40px; }
  .nav__cta { padding-inline: 0.85rem; }
}

/* No media query: above 1520px the bar stops growing (--wrap-wide), so the
   full-size French/Spanish nav never fits either. */
html[lang="fr"] .nav__link, html[lang="es"] .nav__link {
  padding-inline: 0.3rem;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}
html[lang="fr"] .nav__links, html[lang="es"] .nav__links { gap: 0.05rem; }
html[lang="fr"] .nav__cta, html[lang="es"] .nav__cta { padding-inline: 0.7rem; font-size: 0.8rem; }
html[lang="fr"] .mega__row, html[lang="es"] .mega__row { flex-wrap: wrap; row-gap: 0.1rem; }
/* Longer French/Spanish level labels may wrap (to a second line in the row)
   instead of widening the dropdown past the screen at 1280-1440. */
html[lang="fr"] .mega__meta, html[lang="es"] .mega__meta { white-space: normal; overflow: visible; }

/* French is the longest: a touch tighter again on the narrowest full-menu screens. */
@media (max-width: 1480px) {
  html[lang="fr"] .nav__link, html[lang="es"] .nav__link { font-size: 0.8rem; padding-inline: 0.24rem; letter-spacing: 0.01em; }
  html[lang="fr"] .siteheader .nav, html[lang="es"] .siteheader .nav { padding-inline: 1rem; }
}

/* 1279, not 1260: with the cart button the full bar needs ~1246px of a
   1265px-wide 1280 viewport, so 1280 keeps the full menu and anything
   narrower gets the drawer. Re-run tools/check-header-fit.js across the band
   whenever the header gains or loses anything. */
/* 2026-10-28: the Maintenance item (parachutes) took the bar past 1265px
   with "All products" showing, so the drawer now runs up to 1365px. */
@media (max-width: 1365px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: grid; }   /* theme toggle stays visible at every width */
}

@media (max-width: 700px) {
  :root { --nav-h: 64px; }
  .brand img { height: 40px; }
  .footbrand img { height: 72px; }
  .utilbar__note { display: none; }
  .utilbar__in { justify-content: center; min-height: 34px; }
  .hero { min-height: 88svh; }

  /* Tighten the hero's vertical rhythm so the live "READY TO SHIP NOW" stat
     lands ABOVE THE FOLD on a phone. At 375x812 the hero content ran to 954px
     and pushed that stat 52px under the edge, so the one number that changes
     between visits was the one thing you had to scroll to find.
     Nothing here shrinks type — it takes the air out of the gaps, which is
     where the 140px was. The bottom padding still reserves room for the scroll
     cue; drop below ~4rem and the stats start reading through its glow. */
  /* The +4.6rem is the scroll cue's room. At 4rem the last stat clipped its
     glow by a pixel. Raising it does not push the stats down — the hero is
     bottom-aligned and content-sized, so this moves the CUE down, not the
     content up. */
  .hero__in { padding-block: 1.9rem calc(1.9rem + 4.6rem); }
  .hero__title { margin-bottom: 0.22em; }
  .hero__lede { margin-bottom: 1.25rem; }
  .hero__cta { margin-bottom: 1.25rem; }
  .hero__stats { gap: 1rem 2rem; padding-top: 1.1rem; }
  .hero .eyebrow { margin-bottom: 0.7rem; }
  .footgrid { grid-template-columns: 1fr 1fr; }
  .footbrand { grid-column: 1 / -1; }
  .mega { grid-template-columns: 1fr; }
}

/* SHORT viewports, not narrow ones — an iPhone SE is 667px tall and the hero
   ran 96px past that, putting the live stock number out of sight on the one
   phone least likely to scroll for it. Keyed to height so it catches short
   phones and short laptops alike, and left to the hero: nothing else on the
   site is sized against the fold. */
@media (max-height: 700px) {
  /* On a 667px screen the hero simply has more content than fits — eyebrow,
     two-line title, lede, two buttons and four stats. Rather than keep shaving
     pixels off everything, promote the one stat that has to be seen: the live
     count moves to the front, so it is visible whenever ANY stat is. The
     "middle" placement Greg asked for is a desktop composition; on a phone
     where the stats stack, being readable beats being third. */
  .hero__stat--live { order: -1; }
  .hero__in { padding-block: 1.4rem calc(1.4rem + 4.6rem); }
  .hero__lede {
    font-size: 0.98rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    max-width: 34ch;          /* fewer, shorter lines rather than smaller text */
  }
  .hero__cta { margin-bottom: 1rem; }
  /* Side by side on a short screen: two stacked full-width buttons cost 134px
     of the 667 available, and there is room for them in a row at 375px. */
  .hero__cta.btn-row { flex-direction: row; flex-wrap: wrap; }
  .hero__cta .btn { width: auto; flex: 1 1 auto; }
  .hero__stats { gap: 0.75rem 1.5rem; padding-top: 0.85rem; }
  .hero__stat b { font-size: clamp(1.4rem, 3vw, 2rem); }
}

@media (max-width: 460px) {
  .footgrid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .hero__stat b { font-size: 1.5rem; }
}

/* Print */
@media print {
  .siteheader, .utilbar, .drawer, .scrollcue, .marquee, .cta, .sitefooter { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   Design Centre — highlighted nav entry
   The one genuinely new thing on the site, so it gets a pill rather than
   another word in a row of seven. Kept to the brand cyan and the existing
   radius scale so it reads as emphasis, not decoration.
   -------------------------------------------------------------------------- */
/* Solid --brand rather than --grad-brand. The gradient's far stop is a mid
   blue, and this label is small bold text — normal-sized under WCAG, so it
   needs 4.5:1 and measured 4.05:1 there. It passed against the other two stops,
   which is why an eyeball check and an averaged reading both missed it for
   weeks. The flat fill is 9.33:1. Larger buttons keep the gradient: at their
   size they qualify as large text and 3:1 is the bar. */
.nav__link--pop {
  position: relative;
  padding-inline: 0.85rem;
  border-radius: 999px;
  color: var(--on-brand);
  background: var(--brand);
  box-shadow: 0 0 0 1px rgba(59, 209, 246, 0.35), 0 6px 18px -8px rgba(0, 204, 255, 0.6);
}
.nav__link--pop:hover,
.nav__link--pop.is-active { color: var(--on-brand); filter: brightness(1.08); }
/* The underline the other nav links animate in would sit oddly on a pill. */
.nav__link--pop::after { display: none !important; }

.drawer__link--pop {
  color: var(--cyan);
  font-weight: 700;
}
.drawer__link--pop::before {
  content: 'New';
  margin-right: 0.55rem;
  font: 700 0.6rem/1 var(--body);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-brand); background: var(--brand);
  padding: 0.25em 0.5em; border-radius: 999px;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Colourway cards
   The renders are supplied at slightly different aspect ratios, so letting the
   image drive the height left the two cards — and their caption bars — at
   different heights. A fixed plate with object-fit:contain makes every card
   identical whatever the source, and centres each wing in its own space.
   -------------------------------------------------------------------------- */
.cway {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.cway:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); box-shadow: var(--glow); }
.cway__plate {
  aspect-ratio: 4 / 3;
  /* The renders are cut out of their white backgrounds (*-cut.png,
     2026-10-27), so the plate follows the theme: a dark plate in dark mode
     (white was harsh on the eyes), light in light mode. Renders with their
     own frame (the Freya's) keep a light plate: .cway__plate--light. */
  background: radial-gradient(120% 90% at 50% 40%, #223044 0%, #141c28 100%);
  display: grid; place-items: center;
  padding: clamp(0.6rem, 2vw, 1.1rem);
}
.cway__plate img { width: 100%; height: 100%; object-fit: contain; }
.cway__plate--light,
:root[data-theme="light"] .cway__plate { background: linear-gradient(180deg, #ffffff 0%, #eef2f6 100%); }
.cway__name {
  margin-top: auto;
  padding: 0.95rem 1.2rem;
  border-top: 1px solid var(--line);
  font-family: var(--display); font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .cway { transition: none; }
  .cway:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Design Centre pill — "Fly Fluid." on hover
   Two labels stacked in the same box; hover slides one up and out while the
   other arrives from below. A hidden sizer holds the pill at the width of the
   longer label so nothing in the nav shifts when the text changes.
   -------------------------------------------------------------------------- */
.nav__link--pop { overflow: hidden; }
.pop__sizer { display: block; height: 0; overflow: hidden; visibility: hidden; }
.pop__swap {
  position: relative; display: grid; place-items: center;
  /* Both labels occupy the same cell, so the pill height never changes. */
}
.pop__a, .pop__b {
  grid-area: 1 / 1;
  white-space: nowrap;
  transition: transform 0.34s var(--ease), opacity 0.24s var(--ease);
}
.pop__b { font-style: italic; letter-spacing: 0.08em; }
.pop__a { transform: translateY(0); opacity: 1; }
.pop__b { transform: translateY(115%); opacity: 0; }
.nav__link--pop:hover .pop__a,
.nav__link--pop:focus-visible .pop__a { transform: translateY(-115%); opacity: 0; }
.nav__link--pop:hover .pop__b,
.nav__link--pop:focus-visible .pop__b { transform: translateY(0); opacity: 1; }

/* A light sweep across the pill as the words change. */
.nav__link--pop::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.55s var(--ease);
  pointer-events: none;
}
.nav__link--pop:hover::before,
.nav__link--pop:focus-visible::before { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) {
  .pop__a, .pop__b, .nav__link--pop::before { transition: none; }
}

/* The generic .nav__link:hover sets its own translucent background and would
   wash the pill out — restate the gradient at equal specificity, later. */
.nav__link--pop:hover,
.nav__link--pop:focus-visible,
.nav__link--pop.is-active {
  background: var(--grad-brand);
  color: var(--on-brand);
}
/* Keep the sweep and the pill fill beneath the words. */
.nav__link--pop { isolation: isolate; }
.nav__link--pop::before { z-index: 0; }
.pop__swap { position: relative; z-index: 1; }

/* The sizer lives in the same grid cell as the labels so it reserves the width
   without taking part in the flex row — otherwise the words sat off-centre. */
.pop__sizer {
  grid-area: 1 / 1;
  height: auto; overflow: visible;
  visibility: hidden; pointer-events: none;
  white-space: nowrap;
}

/* ==========================================================================
   Design Centre fly-over
   --------------------------------------------------------------------------
   Hovering the pill (while it swaps to "Fly Fluid.") sends the canopy pilot
   across the hero: in from the top-left, along the top of the logo, one loop
   over the drop zone, out past the bottom-right corner, towing a comet
   trail. site.js builds the overlay and the path per-launch from the real
   logo and hero rects — this file only owns the look.
   ========================================================================== */
.flyover {
  position: fixed;
  inset: 0;
  /* Over the sticky header (100) so it can cross the logo; under the
     skiplink (200). */
  z-index: 150;
  pointer-events: none;
}
.flyover svg { display: block; overflow: visible; }
.flyover__trail {
  fill: none;
  /* --brand, not --cyan: the trail crosses the dark hero in both themes, so
     it keeps the constant logo cyan rather than the light-theme text teal. */
  stroke: var(--brand);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--brand) 55%, transparent));
}
.flyover__pilot {
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 29px;
  color: var(--brand);
  opacity: 0;
  offset-rotate: auto;
  offset-anchor: 50% 50%;
  filter: drop-shadow(0 3px 9px color-mix(in srgb, var(--brand) 45%, transparent));
}
.flyover__pilot svg { display: block; width: 100%; height: 100%; overflow: visible; }



/* ------------------------------------------------ cookie consent (EU) ----
   assets/js/consent.js. Non-modal bar: the page stays usable, rejecting is
   as prominent as accepting, and nothing beyond "strictly necessary" is
   pre-ticked. The category list shows only after "Choose". */
.consent {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 90;
  max-width: 760px; margin-inline: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.consent[hidden] { display: none; }
.consent__in { display: grid; gap: 0.8rem; padding: 1.1rem 1.2rem 1.2rem; }
.consent__t { margin: 0; font: 700 1.05rem/1.2 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.consent__p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
.consent__p a { color: var(--cyan); }
.consent__opts { display: none; gap: 0.55rem; }
.consent.is-detail .consent__opts { display: grid; }
.consent__opt { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.86rem; line-height: 1.45; color: var(--muted); cursor: pointer; }
.consent__opt input { margin-top: 0.2rem; width: 18px; height: 18px; flex: none; accent-color: var(--cyan); }
.consent__opt b { display: block; color: var(--text); }
.consent__opt--fixed { cursor: default; opacity: 0.85; }
.consent__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.consent__save { display: none; }
.consent.is-detail .consent__save { display: inline-flex; }
.consent.is-detail .consent__choose { display: none; }
@media (max-width: 520px) {
  .consent { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
  .consent__acts .btn { flex: 1 1 100%; justify-content: center; }
}
.footlink {
  padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.footlink:hover { color: var(--cyan); }
.livebtn {
  padding: 0.15rem 0.6rem; margin-left: 0.2rem;
  font: 600 0.8em/1.4 var(--body); color: var(--cyan);
  background: none; border: 1px solid currentColor; border-radius: 999px; cursor: pointer;
}
@media print { .consent { display: none !important; } }

/* Wing film + vertical teaser side by side (equal heights: 16:9 next to 9:16
   needs widths 256:81). Stacked on phones, the teaser at phone-screen width. */
.film-pair { display: grid; grid-template-columns: minmax(0, 256fr) minmax(0, 81fr); gap: 16px; align-items: start; }
@media (max-width: 760px) {
  .film-pair { grid-template-columns: minmax(0, 1fr); }
  .film-pair__tall { width: 100%; max-width: 340px; justify-self: center; }
}

/* ---------- Rigging: line maps & slider sizes (2026-10-22) ---------- */
.rigjump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; }
.rigjump a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.95rem; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--white); text-decoration: none;
  font-family: var(--display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9rem;
}
.rigjump a:hover { border-color: var(--cyan); color: var(--cyan); }
.rigjump .rigjump__older { margin-left: auto; border-style: dashed; }
.riggrid { align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)) !important; }
.rigcard { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.2rem; scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.rigcard__head { display: flex; align-items: center; gap: 0.9rem; }
.rigcard__logo { flex: none; width: 92px; height: 52px; border-radius: 10px; display: grid; place-items: center; padding: 6px; }
.rigcard__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rigcard__name { margin: 0; font-family: var(--display); font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--white); }
.rigcard__sliders { display: grid; gap: 0.6rem; }
.rigslider { border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem 0.9rem; background: var(--surface-2); }
.rigslider__sizes { margin: 0 0 0.45rem; font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--white); }
.rigslider__dl { margin: 0; display: grid; gap: 0.3rem; }
.rigslider__dl div { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.86rem; }
.rigslider__dl dt { color: var(--muted); flex: none; }
.rigslider__dl dd { margin: 0; text-align: right; color: var(--text); }
.rigslider__size { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--white) !important; white-space: normal; }
.rigcard__note { margin: 0; font-size: 0.85rem; color: var(--muted); }
.rigcard__thumb { margin-top: auto; display: block; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.rigcard__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 636; object-fit: contain; background: #fff; transition: transform 0.4s var(--ease); }
.rigcard__thumb:hover img { transform: scale(1.03); }
.rigcard__thumb:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.rigcard__soon {
  margin: auto 0 0; display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border-radius: 12px;
  border: 1px dashed var(--line-strong); color: var(--muted); font-size: 0.9rem;
}
.rigcard__soon svg { width: 20px; height: 20px; flex: none; opacity: 0.7; }
.rigsrc { margin-top: 1.5rem; font-size: 0.82rem; color: var(--dim); }
.rigsrc a { color: var(--cyan); }
@media (max-width: 560px) { .rigjump .rigjump__older { margin-left: 0; } }

/* Rigging link at the foot of the Skydive Wings menu column. */
.mega__row--rig { border-top: 1px dashed var(--line-strong); margin-top: 0.35rem; padding-top: 0.6rem; }
.mega__row--rig .mega__name { color: var(--cyan); }

/* Line & brake differentials (2026-10-22) */
.rigcard__diff { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; font-weight: 600; color: var(--cyan); text-decoration: none; }
.rigcard__diff svg { width: 14px; height: 14px; transform: rotate(90deg); }
.rigdiffs { display: grid; gap: 0.75rem; }
.rigdiff { min-width: 0; max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.rigdiff > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem;
  padding: 1rem 1.2rem; min-height: 44px;
}
.rigdiff > summary::-webkit-details-marker { display: none; }
.rigdiff > summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; line-height: 1; color: var(--cyan); }
.rigdiff[open] > summary::after { content: "–"; }
.rigdiff > summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: var(--radius); }
.rigdiff__name { font-family: var(--display); font-size: 1.35rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--white); }
.rigdiff__meta { font-size: 0.82rem; color: var(--muted); }
.rigdiff .tablewrap--diff { margin: 0 1.2rem; overflow-x: auto; }
.rigdiff__table { font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.rigdiff__table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rigdiff__table th[scope="row"] { position: sticky; left: 0; background: var(--surface); white-space: nowrap; z-index: 1; }
.rigdiff .rigdiff__table tbody td, .rigdiff .rigdiff__table thead th { text-align: right; white-space: nowrap; }
.rigdiff .rigdiff__table thead th:first-child { text-align: left; }
.rigdiff__note { margin: 0.6rem 1.2rem 0; font-size: 0.84rem; color: var(--muted); }
.rigdiff__note:last-child { margin-bottom: 1.1rem; }

/* Wing hero: the custom price under the designer / stock buttons (2026-10-25) */
.hero__price { margin: .9rem 0 0; color: var(--dim); font-size: .95rem; }
/* Live lead time from manage2 (site.js fills it; hidden when there is none). */
.leadtime { margin: .9rem 0 1rem; max-width: 46rem; }
.leadtime[hidden] { display: none !important; }
.leadtime__main { margin: 0; font-size: .95rem; font-weight: 500; }
.leadtime__fine { margin: .2rem 0 0; color: var(--dim); font-size: .8rem; line-height: 1.45; }

/* Text-message opt-in on the order forms (2026-10-26) */
.smsopt { margin: 1rem 0 .25rem; }
.smsopt__box { display: flex; gap: .65rem; align-items: flex-start; font-size: .86rem; line-height: 1.5; color: var(--dim); cursor: pointer; }
.smsopt__box input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--cyan); }
.smsopt__box strong { color: var(--text); }
.smsopt--cart { margin: .4rem 0 .9rem; }
.smsopt--cart .smsopt__box { font-size: .78rem; }
.smsopt--g3d { margin: .2rem 0 1rem; }
.smsopt__links { margin: .35rem 0 0 1.8rem; font-size: .8rem; }
.smsopt--cart .smsopt__links { font-size: .74rem; }

/* Demo page: the glider tab's own intro (2026-10-27) */
.demointro { margin-top: 1.25rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.demointro h3 { margin: 0 0 .4rem; }
.demointro p, .demointro li { font-size: .9rem; }
.demointro .ticks { margin: .5rem 0 0; }

/* ==========================================================================
   "SHOW" PRODUCT FILTER (Scott, 2026-10-26)
   The top-bar drop-down sets <html data-audience> (head script + site.js).
   Anything tagged data-aud that does not carry the chosen group is hidden:
   always in the header, drawer and footer, and inside <main> only when the
   page itself belongs to the chosen group (body data-page-aud). A page from
   another group opens in full, under the .audnote banner.
   ========================================================================== */
.utilbar__left { display: inline-flex; align-items: center; gap: 1.1rem; min-width: 0; }
.audsel { position: relative; }
.audsel__btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 28px; padding: 0 0.75rem 0 0.8rem;
  font: 600 0.9rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--white); background: rgba(var(--tint-rgb), 0.08);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.audsel__btn:hover, .audsel.is-open .audsel__btn { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.audsel__btn:focus-visible { outline: 2px solid var(--cyan-hot); outline-offset: 2px; }
.audsel__lbl { font: 700 0.66rem/1 var(--body); letter-spacing: 0.16em; color: var(--muted); }
.audsel__val { color: var(--cyan); }
.audsel .nav__caret { width: 10px; height: 10px; transition: transform 0.2s var(--ease); }
.audsel.is-open .nav__caret { transform: rotate(180deg); }
:root[data-audience] .audsel__btn { border-color: color-mix(in srgb, var(--cyan) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 14%, transparent); }
.utilbar.is-aud-open { z-index: 130; }
.audsel__panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 2;
  width: min(330px, calc(100vw - 2 * var(--gutter, 16px)));
  padding: 0.9rem 0.6rem 0.6rem;
  background: var(--glass-panel); backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-6px); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.audsel.is-open .audsel__panel { opacity: 1; transform: none; }
.audsel__panel .mega__colhead { margin: 0 0.6rem 0.5rem; }
.audsel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.audsel__opt {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.6rem; border-radius: 10px; cursor: pointer; color: var(--text);
  transition: background 0.15s;
}
.audsel__opt--sub { margin-left: 1.25rem; position: relative; }
.audsel__opt--sub::before { content: ""; position: absolute; left: -0.65rem; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.audsel__opt:hover, .audsel__opt:focus-visible { background: color-mix(in srgb, var(--cyan) 9%, transparent); outline: none; }
.audsel__opt:focus-visible { box-shadow: inset 0 0 0 2px var(--cyan-hot); }
.audsel__ico {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  color: var(--cyan); background: rgba(var(--tint-rgb), 0.08); border: 1px solid var(--line);
}
.audsel__ico svg { width: 19px; height: 19px; }
.audsel__txt { display: grid; gap: 0.15rem; min-width: 0; }
.audsel__txt b { font: 600 1.02rem/1.05 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); }
.audsel__txt small { font-size: 0.72rem; line-height: 1.25; color: var(--dim); text-transform: none; letter-spacing: 0; white-space: normal; }
.audsel__tick { width: 16px; height: 16px; color: var(--cyan); opacity: 0; }
.audsel__opt[aria-selected="true"] { background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.audsel__opt[aria-selected="true"] .audsel__tick { opacity: 1; }
.audsel__opt[aria-selected="true"] .audsel__ico { color: var(--on-brand, #04121f); background: var(--cyan); border-color: var(--cyan); }
@media (max-width: 700px) {
  .utilbar__in { justify-content: space-between; }
  .audsel__lbl { display: none; }
  .audsel__btn { font-size: 0.82rem; }
}

:root[data-audience="sky"] :is(.utilbar, .siteheader, .drawer, .sitefooter) [data-aud]:not([data-aud~="sky"]),
:root[data-audience="sky"] body:is(:not([data-page-aud]), [data-page-aud~="sky"]) main [data-aud]:not([data-aud~="sky"]),
:root[data-audience="foot"] :is(.utilbar, .siteheader, .drawer, .sitefooter) [data-aud]:not([data-aud~="foot"]),
:root[data-audience="foot"] body:is(:not([data-page-aud]), [data-page-aud~="foot"]) main [data-aud]:not([data-aud~="foot"]),
:root[data-audience="pg"] :is(.utilbar, .siteheader, .drawer, .sitefooter) [data-aud]:not([data-aud~="pg"]),
:root[data-audience="pg"] body:is(:not([data-page-aud]), [data-page-aud~="pg"]) main [data-aud]:not([data-aud~="pg"]),
:root[data-audience="mini"] :is(.utilbar, .siteheader, .drawer, .sitefooter) [data-aud]:not([data-aud~="mini"]),
:root[data-audience="mini"] body:is(:not([data-page-aud]), [data-page-aud~="mini"]) main [data-aud]:not([data-aud~="mini"]),
:root[data-audience="kite"] :is(.utilbar, .siteheader, .drawer, .sitefooter) [data-aud]:not([data-aud~="kite"]),
:root[data-audience="kite"] body:is(:not([data-page-aud]), [data-page-aud~="kite"]) main [data-aud]:not([data-aud~="kite"]) { display: none !important; }

.audnote { display: none; position: relative; z-index: 61; background: var(--ink-2); box-shadow: inset 0 -1px 0 var(--line), inset 0 0 0 999px var(--warn-bg); }
.audnote__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; padding-block: 0.7rem; }
.audnote p { margin: 0; font-size: 0.88rem; color: var(--text); }
:root[data-audience="sky"] body[data-page-aud]:not([data-page-aud~="sky"]) .audnote,
:root[data-audience="foot"] body[data-page-aud]:not([data-page-aud~="foot"]) .audnote,
:root[data-audience="pg"] body[data-page-aud]:not([data-page-aud~="pg"]) .audnote,
:root[data-audience="mini"] body[data-page-aud]:not([data-page-aud~="mini"]) .audnote,
:root[data-audience="kite"] body[data-page-aud]:not([data-page-aud~="kite"]) .audnote { display: block; }

:root:not([data-audience]) .footcol__more { display: none; }
:root[data-audience="foot"] body:not([data-page-aud]) .demo-split,
:root[data-audience="pg"] body:not([data-page-aud]) .demo-split,
:root[data-audience="mini"] body:not([data-page-aud]) .demo-split,
:root[data-audience="kite"] body:not([data-page-aud]) .demo-split { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
.dz__h { font: 700 1rem/1.2 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); margin: 0 0 1rem; display: flex; align-items: center; gap: 0.6rem; }

/* ==========================================================================
   WING PERFORMANCE CHART (graphical; /wings/)
   ========================================================================== */
.perf {
  --perf-name: minmax(9rem, 13rem); --perf-meta: 8.5rem;
  --c-sky: #3bd1f6; --c-pg: #38d39f; --c-mini: #ffb020; --c-kite: #ff6fb1;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--surface), var(--ink-3));
  padding: clamp(0.9rem, 2.4vw, 1.6rem);
}
:root[data-theme="light"] .perf { --c-sky: #0a6d8f; --c-pg: #0d7a56; --c-mini: #a36400; --c-kite: #b0306f; }
.perf__axis, .perf__row { display: grid; grid-template-columns: var(--perf-name) minmax(0, 1fr) var(--perf-meta); gap: 0.4rem 1rem; align-items: center; }
.perf__axis { padding: 0.2rem 0 0.5rem; border-bottom: 1px solid var(--line); margin-bottom: 0.2rem; }
.perf__ticks { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); font: 700 0.68rem/1.1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.perf__ticks > div { text-align: center; border-left: 1px solid var(--line); }
.perf__ticks > div:first-child { border-left: 0; }
.perf__grp { --c: var(--c-sky); padding-top: 0.9rem; }
.perf--pg { --c: var(--c-pg); } .perf--mini { --c: var(--c-mini); } .perf--kite { --c: var(--c-kite); }
.perf__ghead { margin: 0 0 0.35rem; font: 700 0.74rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); display: flex; align-items: center; gap: 0.5rem; }
.perf__ghead::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.perf__row { padding: 0.45rem 0.4rem; border-radius: 10px; color: inherit; text-decoration: none; transition: background 0.15s var(--ease); }
.perf__row:hover, .perf__row:focus-visible { background: rgba(var(--tint-rgb), 0.07); }
.perf__row:focus-visible { outline: 2px solid var(--cyan-hot); outline-offset: 1px; }
.perf__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.45rem; min-width: 0; }
.perf__name .perf__nm { font-family: var(--display); font-size: 1.12rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white, var(--text)); }
.perf__disc, .perf__skill { flex-basis: 100%; font-size: 0.72rem; color: var(--dim); }
.perf__name .chip { font-size: 0.6rem; }
.perf__new { display: inline-flex; }
.perf__track {
  position: relative; height: 26px; border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--n, 5) - 1px), var(--line) calc(100% / var(--n, 5) - 1px) calc(100% / var(--n, 5))),
    rgba(var(--tint-rgb), 0.05);
}
.perf__bar {
  position: absolute; top: 3px; bottom: 3px; left: calc(var(--lo) + 2px); width: calc(var(--hi) - var(--lo) - 4px);
  border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, transparent), var(--c));
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 35%, transparent);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transform-origin: left center; transition: transform 0.6s var(--ease);
}
.perf__lbl { font: 700 0.66rem/1 var(--body); letter-spacing: 0.04em; color: #04121f; white-space: nowrap; padding: 0 0.6rem; text-overflow: ellipsis; overflow: hidden; }
.perf__meta { font-size: 0.78rem; line-height: 1.35; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.perf__skill { display: none; }
:root[data-theme="light"] .perf__lbl { color: #fff; }
.perf__note { margin: 1rem 0 0; font-size: 0.78rem; color: var(--dim); }
.perf__note--2 { margin-top: 0.2rem; }
.perf__table { margin-top: 1.25rem; }
.perf__table summary { cursor: pointer; font-weight: 600; color: var(--cyan); margin-bottom: 0.8rem; }
@media (max-width: 720px) {
  .perf__axis { grid-template-columns: minmax(0, 1fr); }
  .perf__axpad { display: none; }
  .perf__row { grid-template-columns: minmax(0, 1fr) auto; }
  .perf__track { grid-column: 1 / -1; grid-row: 2; }
  .perf__meta { grid-row: 1; grid-column: 2; }
  .perf__ticks { font-size: 0.56rem; letter-spacing: 0.04em; }
  .perf__lbl { display: none; }
  .perf__skill { display: block; flex-basis: 100%; color: var(--c); font-weight: 600; }
  .perf__track { height: 16px; }
}
@media print { .audsel, .audnote { display: none !important; } }
/* With the filter on, a grid can be left with one or two cards: keep them
   card-sized (auto-fill keeps the empty columns) instead of stretching. */
:root[data-audience] .g-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
:root[data-audience] .g-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
:root[data-audience] .g-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr)); }

/* ==========================================================================
   START PAGE (/): Parachutes or Gliding (Scott, 2026-10-26)
   ========================================================================== */
.audsel__start {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin: 0.5rem 0.2rem 0; padding: 0.7rem 0.6rem 0.2rem; border-top: 1px solid var(--line);
  font: 700 0.72rem/1.2 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan);
}
.audsel__start svg { width: 14px; height: 14px; flex: none; }

body.is-gate { background: var(--ink); }
.gate { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.gate__top {
  display: grid; justify-items: center; gap: 0.35rem; text-align: center;
  padding: clamp(1.1rem, 3vw, 2rem) var(--gutter) clamp(0.9rem, 2vw, 1.4rem);
}
.gate__logo { width: clamp(84px, 8vw, 120px); height: auto; }
.gate__h1 { margin: 0.4rem 0 0; font: 700 clamp(1.5rem, 3.4vw, 2.6rem)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--white); }
.gate__ask { margin: 0; font: 700 0.76rem/1.2 var(--body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

.gate__split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 1.2vw, 1rem);
  padding: 0 clamp(0.6rem, 1.4vw, 1.25rem);
}
.gate__half {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  display: flex; align-items: flex-end; min-height: 420px;
}
.gate__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.02); transition: transform 1.2s var(--ease); }
.gate__half:hover .gate__bg, .gate__half:focus-within .gate__bg { transform: scale(1.07); }
.gate__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 8, 15, 0.05) 0%, rgba(4, 8, 15, 0.35) 40%, rgba(4, 8, 15, 0.9) 100%); }
.gate__body { position: relative; width: 100%; padding: clamp(1.25rem, 3vw, 2.4rem); display: grid; gap: 0.7rem; color: #eef5fc; text-shadow: 0 1px 12px rgba(4, 8, 15, 0.55); }
.gate__body .eyebrow { margin: 0; color: #7fe3ff; }
.gate__title { margin: 0; font: 700 clamp(2.6rem, 5.4vw, 4.8rem)/0.9 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.gate__title a { color: #fff; text-decoration: none; }
.gate__title a:hover { color: #7fe3ff; }
.gate__lede { margin: 0; max-width: 34rem; font-size: 0.98rem; line-height: 1.5; color: rgba(238, 245, 252, 0.86); }
.gate__subs { list-style: none; margin: 0.4rem 0 0.3rem; padding: 0; display: grid; border-top: 1px solid rgba(255, 255, 255, 0.18); max-width: 34rem; }
.gate__subs li { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.gate__subs a {
  display: grid; grid-template-columns: auto 1fr 18px; align-items: baseline; gap: 0.9rem;
  padding: 0.6rem 0.2rem; color: #fff; text-decoration: none; transition: padding 0.2s var(--ease), color 0.2s;
}
.gate__subs a:hover, .gate__subs a:focus-visible { color: #7fe3ff; padding-left: 0.6rem; }
.gate__subname { font: 600 1.25rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.gate__submeta { font-size: 0.78rem; color: rgba(238, 245, 252, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gate__subs svg { width: 16px; height: 16px; align-self: center; }
.gate__cta { justify-self: start; margin-top: 0.4rem; }
.gate__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem 1.6rem;
  padding: clamp(1rem, 2.4vw, 1.6rem) var(--gutter); font-size: 0.8rem; color: var(--dim);
}
.gate__foot .link-arrow { font-size: 0.85rem; }
@media (max-width: 860px) {
  .gate__split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .gate__half { min-height: 62svh; }
}

/* Gliding "The Work" (home) and a 9:16 film on its own (Odin page) */
.work--glide { display: none; }
:root[data-audience="foot"] .work--glide, :root[data-audience="pg"] .work--glide,
:root[data-audience="mini"] .work--glide, :root[data-audience="kite"] .work--glide { display: block; }
.split--tallfilm { align-items: center; }
.slot--tall { aspect-ratio: 9 / 16; width: min(100%, 400px); justify-self: center; max-height: 82svh; }
.film-pair--solo { grid-template-columns: minmax(0, 1fr); }
.film-pair--solo .film-pair__tall { width: min(100%, 400px); justify-self: center; }

/* Narrow screens (Scott, 2026-10-26: "the main menu disappears"): the menu
   button says Menu, and the top bar stays one row on phones (the email moves
   into the menu) so the header is not pushed down the page. */
.burger { width: auto; min-width: 46px; padding: 0 0.7rem 0 0.85rem; gap: 0.45rem; grid-auto-flow: column; align-items: center; }
.burger__lbl { font: 700 0.9rem/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); }
.burger[aria-expanded="true"] .burger__lbl { color: var(--cyan); }
.drawer__contact { margin: 0.4rem 0 0; text-align: center; font-size: 0.82rem; color: var(--muted); }
.drawer__contact a { color: var(--muted); }
@media (max-width: 700px) {
  .utilbar a[href^="mailto:"] { display: none; }
  .utilbar__links { gap: 0.8rem; }
  .utilbar__in { flex-wrap: nowrap; }
}
@media (max-width: 380px) {
  .burger__lbl { display: none; }
  .burger { padding: 0; }
}
.audsel__btn { white-space: nowrap; }
@media (max-width: 1100px) { .utilbar__note { display: none; } }
@media (max-width: 700px) {
  .utilbar__links { flex-wrap: nowrap; }
  .utilbar__in { gap: 0.6rem; }
}

/* Collapsed menu: button on the far left, logo beside it, icons on the right. */
@media (max-width: 1365px) {
  .nav { justify-content: flex-start; gap: 0.8rem; }
  .nav > .burger { order: -1; }
  .nav > .brand { margin-right: auto; }
}

/* Pilot quotes (2026-10-27): centred, two across when there are several */
.quotes { display: flex; flex-wrap: wrap; justify-content: center; }
.quotes > .quote { flex: 1 1 340px; max-width: 760px; height: auto; }
.quotes > .quote:not(:only-child) { max-width: calc(50% - 1rem); }
@media (max-width: 759px) { .quotes > .quote:not(:only-child) { max-width: none; } }

/* Joke quotes under the testimonials (2026-10-27): lighter, clearly labelled */
.jokes { margin-top: clamp(2.2rem, 5vw, 3.2rem); }
.jokes__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.3rem 0.9rem; margin: 0 0 1.1rem; text-align: center; }
.jokes__head span { font: 700 0.74rem/1.2 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.jokes__head em { font-size: 0.84rem; color: var(--dim); }
.jokes__grid { display: flex; flex-wrap: wrap; justify-content: center; }
.joke { flex: 1 1 280px; max-width: 440px; margin: 0; padding: 1.1rem 1.25rem; border: 1px dashed var(--line); border-radius: 14px; display: grid; gap: 0.6rem; align-content: start; }
.joke blockquote { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--text); }
.joke blockquote::before { content: "\201C"; } .joke blockquote::after { content: "\201D"; }
.joke figcaption { font-size: 0.78rem; color: var(--dim); }
.joke figcaption b { color: var(--white); font-weight: 700; }

/* cart-timer:start — tools/apply-cart-timer.js copies this block, between the
   start and end markers, into a build from Scott's source. Keep the markers. */
/* The cart timer (2026-10-17): a one-of-a-kind wing is reserved for this cart
   for a few minutes. Built by cart.js above the lines. Amber in the last
   minute; the numbers are tabular so the clock does not jitter as it counts. */
.cart__hold {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0.9rem 1.35rem 0;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 50%, transparent);
}
.cart__hold-ico {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 0.15rem;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cart__hold-text { min-width: 0; }
.cart__hold-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  margin: 0;
  font-weight: 700;
  color: var(--white);
}
.cart__hold-time {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
}
.cart__hold-p { margin: 0.3rem 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--ice); }
.cart__hold.is-urgent {
  background: color-mix(in srgb, var(--warn) 11%, transparent);
  box-shadow: inset 0 0 0 1px var(--warn);
}
.cart__hold.is-urgent .cart__hold-ico { stroke: var(--warn); }
.cart__hold.is-urgent .cart__hold-time { color: var(--warn); }
.cartline__hold {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.cartline__hold.is-urgent { color: var(--warn); }
/* cart-timer:end */

/* ---------- Maintenance section (2026-10-28) ---------- */
.mtabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.2rem; padding: .35rem; border: 1px solid var(--line); border-radius: 999px; width: fit-content; max-width: 100%; background: var(--surface-2); }
.mtabs__tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2rem; border-radius: 999px; font: 600 .9rem/1 var(--body); color: var(--text); text-decoration: none; }
.mtabs__tab:hover { color: var(--cyan); }
.mtabs__tab.is-on { background: var(--cyan); color: var(--ink); }
.mtabs__tab:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.field__label { font-size: .73rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.field__label .req { color: var(--cyan); }
.mchoice, .mchecks { display: flex; flex-wrap: wrap; gap: .5rem; }
.field label.mchoice__opt, .field label.mchecks__opt, label.mchecks__opt--solo {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .45rem .9rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--ink-3); cursor: pointer;
  font-size: .9rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text);
}
.field .mchoice__opt input, .field .mchecks__opt input, .mchecks__opt--solo input { width: 1.1rem; height: 1.1rem; padding: 0; margin: 0; accent-color: var(--cyan); flex: none; }
.mchoice__opt:has(input:checked), .mchecks__opt:has(input:checked) { border-color: var(--cyan); color: var(--white); }
.mchecks__opt--solo { width: fit-content; }
.mwing { display: grid; gap: 1rem; }
.mwing + .mwing, .mmore .mwing { padding-top: 1rem; border-top: 1px dashed var(--line); }
.mwing__n { margin: 0; font-weight: 700; color: var(--white); }
.mmore summary { cursor: pointer; color: var(--cyan); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.mmore[open] summary { margin-bottom: .6rem; }
.mship { padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.mship p { margin: .2rem 0; font-size: .92rem; }
.mship__h { font-size: .73rem !important; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.msteps { margin: 0; padding-left: 1.3rem; display: grid; gap: .8rem; }
.msteps li { font-size: .95rem; color: var(--text); }
.msteps b { color: var(--white); }
[data-order-no] { font-weight: 700; color: var(--white); }

/* ---------- manage2 stock wings (2026-10-28) ---------- */
.m2grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1.1rem; }
.m2card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.m2card.is-ready { border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); }
.m2card__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-3); }
.m2card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .6rem; }
.m2card__img.is-model { background: #f2f5f9; }
.m2card__img.is-model img { object-fit: contain; padding: 1.1rem 1.4rem; }
/* The wing's own picture + its logo as a badge (Scott, 2026-11-08). */
.m2card__img.has-wing { background: #fff; }
.m2card__img.has-wing img.m2card__wing { padding: 2.6rem .7rem .5rem; }
.m2card__img img.m2card__logo { inset: auto; left: .6rem; top: .6rem; width: auto; height: 2.1rem; max-width: 46%; padding: .3rem .5rem; border-radius: 6px; background: #f2f5f9; box-shadow: 0 1px 3px rgba(5, 8, 15, .12); object-fit: contain; }
.m2card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.m2card__avail { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.m2card__avail.is-ready { color: var(--cyan); }
.m2card__t { margin: 0; font-size: 1.35rem; }
.m2card__t a { color: var(--white); text-decoration: none; }
.m2card__t a:hover { color: var(--cyan); }
.m2card__spec { margin: 0; display: grid; gap: .25rem; }
.m2card__spec div { display: flex; gap: .5rem; font-size: .86rem; }
.m2card__spec dt { color: var(--muted); min-width: 4.6rem; }
.m2card__spec dd { margin: 0; color: var(--text); }
.m2card__note { margin: 0; font-size: .84rem; color: var(--dim); }
.m2card__foot { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.m2card__price { margin: 0; font-weight: 700; font-size: 1.1rem; color: var(--white); }
.m2empty { padding: 1.2rem 1.3rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.m2empty p { margin: 0; }
.m2note { margin-top: 1.3rem; font-size: .84rem; color: var(--dim); }
.m2dlg { width: min(620px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.m2dlg::backdrop { background: rgba(3, 6, 12, .62); }
.m2dlg__panel { padding: clamp(1.1rem, 3vw, 1.8rem); }
.m2dlg__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.m2dlg__head h2 { margin: 0; }
.m2dlg__x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.m2dlg__x:hover { color: var(--cyan); border-color: var(--cyan); }
.m2dlg__wing { padding: .85rem 1rem; margin-bottom: 1.2rem; border-radius: 12px; background: var(--ink-3); border: 1px solid var(--line); }
.m2dlg__wt { margin: 0 0 .2rem; font-weight: 700; color: var(--white); font-size: 1.05rem; }
.m2dlg__ws { margin: 0; font-size: .86rem; color: var(--muted); }
.m2terms { margin: 0; font-size: .84rem; color: var(--muted); }
.m2done { display: grid; gap: .6rem; justify-items: start; }
.m2done__h { margin: 0; font-weight: 700; font-size: 1.15rem; color: var(--white); }
.m2done p { margin: 0; }
.m2note--sample { margin: 0 0 1rem; padding: .7rem 1rem; border: 1px dashed var(--warn); border-radius: 10px; color: var(--ice); }

/* ---------- Lineset serial number in three parts (2026-10-30) ---------- */
.serialparts { display: grid; grid-template-columns: minmax(4.5rem, 1fr) minmax(4rem, .8fr) auto minmax(7rem, 1.6fr); gap: .5rem; align-items: center; }
.serialparts input { width: 100%; min-width: 0; }
.serialparts input[data-ls-sc] { text-transform: uppercase; }
.serialparts__dash { font-weight: 700; color: var(--muted); }
.serialcheck { margin: .2rem 0 0; font-size: .86rem; padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--line); color: var(--ice); }
.serialcheck--ok { border-color: var(--cyan); }
.serialcheck--bad { border-color: var(--warn); }
.serialcheck--wait { border-style: dashed; }
/* Lineset paths: shipped vs reline at Fluid Wings (2026-10-30) */
.lspaths { margin-bottom: .5rem; }
.lspath { padding: clamp(1.3rem, 3vw, 1.9rem); display: flex; flex-direction: column; gap: .5rem; }
.lspath h2 { margin: 0; }
.lspath p { margin: 0; }
.lspath__k { font-size: .73rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.lspath .ticks { margin-top: .4rem; }

/* ---------- Demo pool form + tracking page (2026-11-03) ---------- */
.dpool { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: .6rem; }
.dpool__m { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .35rem; padding: .5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-3); cursor: pointer; text-align: center; color: var(--text); }
.dpool__m input { position: absolute; opacity: 0; pointer-events: none; }
.dpool__m .dpool__logo { display: block; height: 3.4rem; border-radius: 8px; background: #f2f5f9; padding: .45rem .6rem; }
.dpool__m .dpool__logo img { width: 100%; height: 100%; object-fit: contain; }
.dpool__m b { font-size: .95rem; color: var(--white); }
.dpool__m small { font-size: .74rem; color: var(--muted); }
.dpool__m:has(input:checked) { border-color: var(--cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 40%, transparent); }
.dpool__m:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
.dpool-sizes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.dpool__s { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 5.2rem; min-height: 44px; padding: .4rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-3); cursor: pointer; }
.dpool__s input { position: absolute; opacity: 0; pointer-events: none; }
.dpool__s b { font-size: 1.05rem; color: var(--white); }
.dpool__s small { font-size: .7rem; color: var(--muted); white-space: nowrap; }
.dpool__s.is-now small { color: var(--ok); }
.dpool__s:has(input:checked) { border-color: var(--cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 40%, transparent); }
.dpool__s:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
.dpool-deliv { display: grid; gap: .5rem; margin-bottom: .8rem; }
.dpool-opt { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-3); cursor: pointer; }
.dpool-opt input { margin-top: .25rem; accent-color: var(--cyan); }
.dpool-opt > span { display: grid; gap: .1rem; }
.dpool-opt b { color: var(--white); }
.dpool-opt small { color: var(--muted); font-size: .82rem; }
.dpool-opt:has(input:checked) { border-color: var(--cyan); }
.dpool-wl { margin: .4rem 0 0; font-size: .85rem; color: var(--muted); }
.dtrack { display: grid; gap: 1.5rem; }
.dtrack__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .4rem; counter-reset: dt; }
.dtrack__steps li { position: relative; padding: .7rem .75rem .7rem 2.4rem; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-3); font-size: .86rem; color: var(--muted); counter-increment: dt; }
.dtrack__steps li::before { content: counter(dt); position: absolute; left: .65rem; top: .65rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--line); color: var(--text); }
.dtrack__steps li.is-done { color: var(--text); }
.dtrack__steps li.is-done::before { content: '✓'; background: var(--ok); color: #fff; }
.dtrack__steps li.is-now { border-color: var(--cyan); color: var(--white); font-weight: 600; }
.dtrack__steps li.is-now::before { background: var(--cyan); color: #04121f; }
.dtrack__steps li.is-stop { border-color: var(--warn); }
.dtrack__card { padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.dtrack__card h2 { margin: 0 0 .8rem; }
.dtrack__dates { margin: 0; display: grid; gap: .4rem; }
.dtrack__dates div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--line); padding-bottom: .35rem; font-size: .92rem; }
.dtrack__dates dt { color: var(--muted); }
.dtrack__dates dd { margin: 0; text-align: right; color: var(--text); }
.dtrack__note { margin: .8rem 0 0; font-size: .9rem; }
.dtrack__contact { display: grid; gap: .8rem; max-width: 46rem; }

.dpool-waiver__note { margin: 0 0 .5rem; font-size: .9rem; }
.dpool-waiver__note a { font-weight: 600; }
.dtrack__waiver { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; padding: 1rem 1.2rem; border: 1px solid var(--warn); border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.dtrack__waiver p { margin: 0; }

.dpool__s.is-full small { color: var(--dim); }
.dpool-glide { margin-top: 1rem; }

/* ---------- Dealer finder: dot map + dealer cards (2026-11-04) ---------- */
.dfind { display: grid; gap: .9rem; margin: 1.25rem 0 1.5rem; }
.dfind__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.dfind__head h3 { margin: 0; }
.dfind__tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dfind__sel select { min-height: 44px; }
.dfind__regions { display: flex; flex-wrap: wrap; gap: .35rem; }
.dfind__reg { min-height: 36px; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-3); color: var(--text); font: inherit; font-size: .82rem; cursor: pointer; }
.dfind__reg.is-on { border-color: var(--cyan); color: var(--white); background: color-mix(in srgb, var(--cyan) 14%, var(--ink-3)); }
.dfind__map { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(120% 120% at 50% 30%, #12284a, #07111f); aspect-ratio: 2 / 1; }
@media (max-width: 560px) { .dfind__map { aspect-ratio: 4 / 3; } }
.dfind__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dfind__pins { position: absolute; inset: 0; }
.dfind__pin { position: absolute; width: 22px; height: 22px; margin: -22px 0 0 -11px; padding: 0; border: 0; background: none; cursor: pointer; }
.dfind__pin::before { content: ''; position: absolute; left: 3px; top: 0; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--cyan); box-shadow: 0 0 0 2px #07111f, 0 2px 8px rgba(0,0,0,.5); }
.dfind__pin::after { content: ''; position: absolute; left: 8px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: #07111f; }
.dfind__pin.is-nodemo::before { background: #8aa0b8; }
.dfind__pin.is-on::before { background: #ffd23f; }
.dfind__pin:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 50%; }
.dfind__count { margin: 0; font-size: .85rem; color: var(--muted); }
.dfind__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .7rem; }
.dcard { display: grid; gap: .35rem; align-content: start; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); scroll-margin: 6rem; }
.dcard.is-on { border-color: #ffd23f; box-shadow: 0 0 0 2px color-mix(in srgb, #ffd23f 45%, transparent); }
.dcard__n { margin: 0; font-weight: 700; color: var(--white); font-size: 1rem; }
.dcard__where { margin: 0; font-size: .85rem; color: var(--muted); }
.dcard__type { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--line); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); vertical-align: middle; }
.dcard__c { margin: 0; font-size: .88rem; display: grid; gap: .15rem; }
.dcard__c a { overflow-wrap: anywhere; }
.dcard__wings { display: flex; flex-wrap: wrap; gap: .3rem; margin: .1rem 0 0; padding: 0; list-style: none; }
.dcard__wings li { padding: .1rem .5rem; border-radius: 999px; background: var(--ink-3); border: 1px solid var(--line); font-size: .75rem; }
.dcard__note { margin: 0; font-size: .8rem; color: var(--dim); }
.dcard__acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.dcard__acts .btn { min-height: 40px; padding: .4rem .9rem; font-size: .78rem; }
.demointro--after { margin-top: 1rem; }

/* ==========================================================================
   soon: COMING SOON veil (src/soon.js, SOON in src/config.js). Scott,
   2026-11-06: the Ekko 2 is on the site before it can be bought, so every
   reference is blurred under a stamp. <html class="soon-ekko2"> switches it on.
   ========================================================================== */
:root { --soon: "Coming soon"; --soon-red: #ff5247; --soon-ink: rgba(205, 218, 235, .85); }
html[lang="fr"] { --soon: "Bientôt disponible"; }
html[lang="es"] { --soon: "Próximamente"; }
:root[data-theme="light"] { --soon-ink: rgba(30, 45, 65, .7); --soon-red: #d92d20; }

/* the stamp itself */
.soon-ekko2 a[href*="wings/ekko2/"]::after,
.soon-ekko2 a[href="#ekko2"]::after,
.soon-ekko2 .soon-name::after,
.soon-ekko2 .wingcard:has(a[href*="wings/ekko2/"])::after,
.soon-ekko2 .dcard:has(a[href*="wings/ekko2/"])::after,
.soon-ekko2 .rigcard#ekko2::after,
.soon-page::after {
  content: var(--soon);
  position: absolute; left: 50%; top: 50%; inset: auto;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  z-index: 3;
  padding: .32em .6em .28em;
  border: 2px solid currentColor; border-radius: 5px;
  background: var(--soon-bg, rgba(5, 8, 15, .6));
  color: var(--soon-red);
  font-size: .6rem; font-weight: 800; line-height: 1; letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap; text-shadow: none;
  pointer-events: none;
}

/* links to the wing (menus, mega menu, chart rows, buttons) */
.soon-ekko2 a[href*="wings/ekko2/"],
.soon-ekko2 a[href="#ekko2"] { position: relative; pointer-events: none; cursor: default; }
.soon-ekko2 a[href*="wings/ekko2/"], .soon-ekko2 a[href*="wings/ekko2/"] *,
.soon-ekko2 a[href="#ekko2"],
.soon-ekko2 .soon-name {
  color: transparent !important; text-shadow: 0 0 .5em var(--soon-ink) !important; user-select: none;
}
.soon-ekko2 .soon-name { position: relative; white-space: nowrap; }
.soon-ekko2 img[src*="EKKO2"], .soon-ekko2 img[src*="ekko2"] { filter: blur(10px); }

/* whole cards that hold the wing */
.soon-ekko2 .wingcard:has(a[href*="wings/ekko2/"]),
.soon-ekko2 .dcard:has(a[href*="wings/ekko2/"]),
.soon-ekko2 .rigcard#ekko2 { position: relative; pointer-events: none; user-select: none; }
.soon-ekko2 .wingcard:has(a[href*="wings/ekko2/"]) > *,
.soon-ekko2 .dcard:has(a[href*="wings/ekko2/"]) > *,
.soon-ekko2 .rigcard#ekko2 > * { filter: blur(7px); }
.soon-ekko2 .wingcard:has(a[href*="wings/ekko2/"])::after,
.soon-ekko2 .dcard:has(a[href*="wings/ekko2/"])::after,
.soon-ekko2 .rigcard#ekko2::after { font-size: clamp(.9rem, 2vw, 1.25rem); border-width: 3px; }

/* the wing's own pages: everything in <main> is blurred under one big stamp */
.soon-page main { filter: blur(12px); pointer-events: none; user-select: none; }
.soon-page::after {
  position: fixed; z-index: 60;
  font-size: clamp(1.6rem, 6vw, 4.2rem); border-width: 5px; border-radius: 10px;
  padding: .3em .55em .25em;
}

/* one stamp per thing: none on the pieces inside a stamped link, card or page */
.soon-ekko2 a[href*="wings/ekko2/"] .soon-name::after,
.soon-ekko2 .wingcard:has(a[href*="wings/ekko2/"]) a::after,
.soon-ekko2 .wingcard:has(a[href*="wings/ekko2/"]) .soon-name::after,
.soon-ekko2 .dcard:has(a[href*="wings/ekko2/"]) a::after,
.soon-ekko2 .dcard:has(a[href*="wings/ekko2/"]) .soon-name::after,
.soon-ekko2 .rigcard#ekko2 .soon-name::after,
.soon-page main a[href*="wings/ekko2/"]::after,
.soon-page main .soon-name::after { content: none; }
/* the language switcher links to the same page: never veiled */
.soon-ekko2 a[hreflang], .soon-ekko2 a[hreflang] * { pointer-events: auto; cursor: pointer; color: inherit !important; text-shadow: none !important; user-select: auto; }
.soon-ekko2 a[hreflang]::after { content: none; }
:root[data-theme="light"] { --soon-bg: rgba(255, 255, 255, .82); }
.soon-ekko2 .soon-name::after { font-size: .5rem; letter-spacing: .08em; padding: .22em .38em .18em; border-width: 1.5px; }

/* launch-fixes 2026-11-09 */
/* Long labels (French and Spanish above all) wrap inside the pill on phones. */
@media (max-width: 720px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.3; }
  td .btn, th .btn { white-space: nowrap; }
}
@media (max-width: 480px) {
  .btn, .btn--lg { padding-left: 1.35rem; padding-right: 1.35rem; }
}
@media (max-width: 420px) {
  body .g3d__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A grid column won't shrink below its widest child unless the child allows it. */
.split > *, .dsn > .wrap-wide > *, .dsn__stage, .stage { min-width: 0; }
/* Gate: a backing sized to the text block, so it holds at every photo height. */
.gate__body::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; bottom: 0; top: -5rem;
  background: linear-gradient(180deg, rgba(4, 8, 15, 0) 0, rgba(4, 8, 15, 0.62) 5rem, rgba(4, 8, 15, 0.76) 55%, rgba(4, 8, 15, 0.9) 100%);
}
.gate__lede { color: #f2f7fc; }
.gate__submeta { color: rgba(238, 245, 252, 0.92); }
/* Wing chart: its axis labels swipe inside the chart on the smallest phones. */
@media (max-width: 380px) {
  .perf { overflow-x: auto; }
}

/* Harness / airbag order form (2026-11-09) */
.eqo__fields { display: grid; gap: .75rem; }
.eqo__fields .field { margin: 0; }
.eqo__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }