/* =============================================================================
   FORGE DS  ·  KINETIC                                               tokens 1.0
   WebForge design system — the motion-first athletic direction.
   -----------------------------------------------------------------------------
   THE FOUR RULES OF KINETIC
   1. One electric accent. It is a FILL, or it sits on ink. Never text on chalk.
   2. Everything you can press leans forward  (--lean).
   3. Every section edge rises to the right   (--cut). So do the numbers.
   4. Motion is transform + opacity only. Every motion token has a
      reduced-motion value at the end of this block.
   -----------------------------------------------------------------------------
   RE-SKIN A CLIENT: change the four BRAND tokens. Surfaces, text, lines,
   focus rings and shadows all derive from them. Colorways for demos live in
   section 1b — the demo generator just sets <html data-colorway="…">.
   ============================================================================= */
:root {
  /* ── 1 · BRAND ─────────────────────────────────────────────────────────── */
  --brand-accent:     #D4FF1E;  /* the ONE electric colour (≥ 6:1 against ink) */
  --brand-accent-ink: #0A0A0B;  /* text that sits ON the accent                */
  --brand-ink:        #0A0A0B;  /* darkest surface · text on light             */
  --brand-chalk:      #F2F0E9;  /* lightest surface · text on dark             */

  /* ── 2 · COLOUR PRIMITIVES  (warm-shifted neutral ramp) ──────────────── */
  --ink-1000: #050506;
  --ink-900:  var(--brand-ink);
  --ink-850:  #101012;
  --ink-800:  #17171A;
  --ink-700:  #222226;
  --ink-600:  #34343A;
  --ink-300:  #A3A097;          /* muted text on ink   → 7.4:1 */
  --chalk-50:  var(--brand-chalk);
  --chalk-100: #E7E4DA;
  --chalk-200: #D6D2C4;
  --chalk-600: #5E5B54;         /* muted text on chalk → 5.9:1 */

  /* ── 3 · COLOUR ROLES  (components only ever use these) ──────────────
     Defaults = the ink surface. .surface-chalk / .surface-accent remap them. */
  --c-bg:          var(--ink-900);
  --c-bg-2:        var(--ink-800);
  --c-text:        var(--chalk-50);
  --c-text-dim:    var(--ink-300);
  --c-line:        color-mix(in srgb, var(--chalk-50) 14%, transparent);
  --c-line-strong: color-mix(in srgb, var(--chalk-50) 40%, transparent);
  --c-accent:      var(--brand-accent);      /* fills                        */
  --c-accent-fg:   var(--brand-accent);      /* accent used AS text/stroke   */
  --c-on-accent:   var(--brand-accent-ink);
  --c-focus:       var(--brand-accent);

  /* ── 4 · TYPE  (two families: Archivo variable + JetBrains Mono) ──────── */
  --font-display: "Archivo", Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --font-body:    "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --display-stretch: 62%;     /* Archivo wdth axis — 62 = extra-condensed   */
  --display-weight:  900;
  --display-leading: 0.84;
  --display-track:  -0.005em;
  --body-stretch:    100%;
  --body-leading:    1.55;
  --mono-track:      0.08em;

  /* Fluid scale — min @ 360px, max @ 1440px */
  --step--2: clamp(0.75rem,  0.73rem + 0.09vw, 0.8125rem);  /* 12 → 13   mono labels  */
  --step--1: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);  /* 14 → 15   small        */
  --step-0:  clamp(1rem,     0.96rem + 0.19vw, 1.125rem);   /* 16 → 18   body         */
  --step-1:  clamp(1.1875rem,1.1rem  + 0.37vw, 1.4375rem);  /* 19 → 23   lede         */
  --step-2:  clamp(1.5rem,   1.3rem  + 0.9vw,  2.125rem);   /* 24 → 34   h4           */
  --step-3:  clamp(2rem,     1.6rem  + 1.9vw,  3.25rem);    /* 32 → 52   h3           */
  --step-4:  clamp(2.75rem,  1.9rem  + 3.8vw,  5.25rem);    /* 44 → 84   h2           */
  --step-5:  clamp(3.5rem,   2rem    + 6.7vw,  8rem);       /* 56 → 128  section      */
  --step-6:  clamp(4.5rem,   1.5rem  + 13.3vw, 13.5rem);    /* 72 → 216  mega         */
  --hero-size: min(19.5vw, 22svh, 13.5rem);                   /* the hero stack        */

  /* ── 5 · SPACE ─────────────────────────────────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  clamp(2.25rem, 1.8rem + 2vw,   3.5rem);
  --space-2xl: clamp(3rem,    2rem   + 4vw,   5.5rem);
  --space-section: clamp(4.5rem, 3rem + 6vw,  9rem);
  --gutter:    clamp(1rem,    0.55rem + 2vw,  2.5rem);
  --wrap:      88rem;
  --measure:   60ch;
  --header-h:  4rem;

  /* ── 6 · GEOMETRY ──────────────────────────────────────────────────────── */
  --lean:   -10deg;                      /* the forward lean of every control */
  --cut:    clamp(2.25rem, 6vw, 6.5rem); /* drop of every diagonal edge       */
  --radius-0:    0;                      /* Kinetic is sharp by default       */
  --radius-1:    3px;
  --radius-pill: 999px;
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;

  /* ── 7 · SHADOW ────────────────────────────────────────────────────────── */
  --shadow-strike: 0.5rem 0.5rem 0 0 var(--c-accent);           /* hard block */
  --shadow-lift:   0 1.5rem 3rem -1.25rem rgb(0 0 0 / 0.6);
  --shadow-glow:   0 0 0 1px color-mix(in srgb, var(--brand-accent) 45%, transparent),
                   0 0 2.5rem -0.5rem color-mix(in srgb, var(--brand-accent) 55%, transparent);
  --focus-ring:    3px solid var(--c-focus);

  /* ── 8 · MOTION ────────────────────────────────────────────────────────── */
  --dur-tap:     120ms;   /* press feedback                     */
  --dur-hover:   220ms;   /* hover colour / small moves          */
  --dur-move:    480ms;   /* sweeps, wipes, panels               */
  --dur-reveal:  850ms;   /* on-scroll entrances                 */
  --dur-hero:   1100ms;   /* first-paint headline                */
  --dur-count:  1700ms;   /* scoreboard odometer roll            */
  --dur-marquee:  38s;    /* one loop of the program tape        */
  --ease-launch: cubic-bezier(0.16, 1, 0.3, 1);     /* fast out, long glide  */
  --ease-cut:    cubic-bezier(0.76, 0, 0.24, 1);    /* wipes & sweeps         */
  --ease-snap:   cubic-bezier(0.34, 1.56, 0.64, 1); /* small overshoot        */
  --ease-odo:    cubic-bezier(0.22, 1, 0.36, 1);    /* scoreboard settle      */
  --stagger:     70ms;
  --drift:       1;       /* multiplier for scroll-linked travel */

  /* ── 9 · LAYERS ────────────────────────────────────────────────────────── */
  --z-raise:  2;
  --z-bar:   80;
  --z-header: 100;
  --z-top:   110;
}

/* ── 1b · COLORWAYS (demo generator presets — each passes ink-on-accent ≥ 6:1) */
:root[data-colorway="signal"] { --brand-accent: #FF5B1F; }
:root[data-colorway="ice"]    { --brand-accent: #5BE2FF; }
:root[data-colorway="flare"]  { --brand-accent: #FF4FA0; }

/* ── 8b · MOTION, REDUCED ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-tap: 1ms; --dur-hover: 1ms; --dur-move: 1ms; --dur-reveal: 200ms;
    --dur-hero: 1ms; --dur-count: 1ms; --stagger: 0ms; --drift: 0;
  }
}

/* ── 3b · SURFACES (remap the colour roles; components never change) ──────── */
.surface-ink {
  --c-bg: var(--ink-900); --c-bg-2: var(--ink-800);
  --c-text: var(--chalk-50); --c-text-dim: var(--ink-300);
  --c-line: color-mix(in srgb, var(--chalk-50) 14%, transparent);
  --c-line-strong: color-mix(in srgb, var(--chalk-50) 40%, transparent);
  --c-accent-fg: var(--brand-accent); --c-focus: var(--brand-accent);
  background-color: var(--c-bg); color: var(--c-text);
}
.surface-ink-2 { --c-bg: var(--ink-850); --c-bg-2: var(--ink-800); background-color: var(--c-bg); color: var(--c-text); }
.surface-chalk {
  --c-bg: var(--chalk-50); --c-bg-2: var(--chalk-100);
  --c-text: var(--ink-900); --c-text-dim: var(--chalk-600);
  --c-line: color-mix(in srgb, var(--ink-900) 14%, transparent);
  --c-line-strong: color-mix(in srgb, var(--ink-900) 45%, transparent);
  --c-accent-fg: var(--ink-900);          /* rule 1: no accent text on chalk */
  --c-focus: var(--ink-900);
  background-color: var(--c-bg); color: var(--c-text);
}
.surface-accent {
  --c-bg: var(--brand-accent); --c-bg-2: color-mix(in srgb, var(--brand-accent) 88%, var(--brand-accent-ink));
  --c-text: var(--brand-accent-ink);
  --c-text-dim: color-mix(in srgb, var(--brand-accent-ink) 84%, var(--brand-accent));
  --c-line: color-mix(in srgb, var(--brand-accent-ink) 22%, transparent);
  --c-line-strong: var(--brand-accent-ink);
  --c-accent: var(--brand-accent-ink); --c-accent-fg: var(--brand-accent-ink);
  --c-on-accent: var(--brand-accent); --c-focus: var(--brand-accent-ink);
  background-color: var(--c-bg); color: var(--c-text);
}

/* =============================================================================
   BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--ink-900);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ink-900);
  color: var(--chalk-50);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--body-leading);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, address, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
address { font-style: normal; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { overflow: visible; }
[hidden] { display: none !important; }
::selection { background: var(--brand-accent); color: var(--brand-accent-ink); }
:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: var(--z-top);
  padding: 0.75rem 1.25rem; background: var(--brand-accent); color: var(--brand-accent-ink);
  font-weight: 800; text-decoration: none; transform: translateY(-200%);
  transition: transform var(--dur-hover) var(--ease-launch);
}
.skip-link:focus-visible { transform: none; outline-color: var(--brand-chalk); }

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

/* =============================================================================
   TYPE PRIMITIVES
   ============================================================================= */
.display {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: var(--display-weight); line-height: var(--display-leading);
  letter-spacing: var(--display-track); text-transform: uppercase; font-style: italic;
}
.mono {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: var(--mono-track); text-transform: uppercase; line-height: 1.4;
}

/* Section header pattern: index · title · lede */
.sec-head { display: grid; gap: var(--space-m); margin-bottom: var(--space-2xl); }
.sec-head .sec-head { margin-bottom: 0; }
.sec-index {
  display: flex; align-items: center; gap: 0.85em; color: var(--c-text-dim);
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: var(--mono-track); text-transform: uppercase;
}
.sec-index b { color: var(--c-accent-fg); font-weight: 700; }
.sec-index::after { content: ""; width: 3.5rem; height: 2px; background: currentColor; opacity: 0.5; }
.sec-title {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: var(--display-weight); font-style: italic; text-transform: uppercase;
  font-size: var(--step-5); line-height: 0.86; letter-spacing: var(--display-track);
  text-wrap: balance;
}
.sec-lede { font-size: var(--step-1); line-height: 1.45; color: var(--c-text-dim); max-width: 44ch; text-wrap: pretty; }
@media (min-width: 900px) {
  .sec-head--row { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-2xl); }
  .sec-head--row > .sec-lede { padding-bottom: 0.6rem; }
}

/* =============================================================================
   CONTROLS — everything you can press leans forward
   ============================================================================= */
.btn {
  --btn-bg: transparent; --btn-fg: var(--c-text); --btn-border: transparent;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  min-height: 3.25rem; padding: 0.95em 1.6em;
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 800;
  font-stretch: 88%; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  color: var(--btn-fg); text-decoration: none; white-space: nowrap;
  background: none; border: 0; -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg); border: var(--border-2) solid var(--btn-border);
  transform: skewX(var(--lean));
  transition: transform var(--dur-hover) var(--ease-launch), background-color var(--dur-hover) ease;
}
.btn:hover::before { transform: skewX(calc(var(--lean) * 1.6)) scaleX(1.035); }
.btn:active::before { transform: skewX(var(--lean)) scale(0.96); transition-duration: var(--dur-tap); }
.btn__arrow { width: 1.25em; height: 0.75em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; transition: transform var(--dur-hover) var(--ease-launch); }
.btn:hover .btn__arrow { transform: translateX(0.3em); }
.btn--accent { --btn-bg: var(--c-accent); --btn-fg: var(--c-on-accent); }
.btn--accent:hover::before { box-shadow: var(--shadow-glow); }
.btn--ghost { --btn-border: var(--c-line-strong); }
.btn--ghost:hover { --btn-border: var(--c-text); --btn-bg: color-mix(in srgb, var(--c-text) 8%, transparent); }
.btn--sm { min-height: 2.6rem; padding: 0.7em 1.15em; font-size: var(--step--2); }
.btn--lg { min-height: 3.75rem; padding: 1.1em 2em; font-size: var(--step-0); }
.btn:focus-visible { outline-offset: 5px; }

/* Leaning chip (filters, day picks) */
.chip {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 0.55em;
  min-height: 2.75rem; padding: 0.6em 1.15em;
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 800; font-stretch: 90%;
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1;
  color: var(--c-text); background: none; border: 0; -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-hover) ease;
}
.chip::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: var(--border-2) solid var(--c-line-strong);
  transform: skewX(var(--lean));
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-tap) var(--ease-snap);
}
.chip:hover::before { border-color: var(--c-text); }
.chip:active::before { transform: skewX(var(--lean)) scale(0.94); }
.chip[aria-pressed="true"] { color: var(--c-bg); }
.chip[aria-pressed="true"]::before { background: var(--c-text); border-color: var(--c-text); }
.glyph { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }

/* =============================================================================
   SCROLL PROGRESS
   ============================================================================= */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: var(--z-top);
  background: var(--brand-accent); transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0)); pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: k-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes k-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =============================================================================
   HEADER
   ============================================================================= */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--ink-900) 92%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-move) ease, background-color var(--dur-move) ease;
}
.site-header.is-scrolled { background: var(--ink-900); border-bottom-color: var(--c-line); }
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-m);
  max-width: var(--wrap); height: var(--header-h); margin-inline: auto; padding-inline: var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 2.4rem; height: auto; flex: none; }
.brand__slab { fill: var(--brand-accent); }
.brand__bend { fill: none; stroke: var(--brand-ink); stroke-width: 3.5; stroke-linecap: round; }
.brand__word { display: grid; line-height: 0.9; }
.brand__name {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: 1.45rem; text-transform: uppercase; letter-spacing: 0.01em;
}
.brand__sub { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-300); margin-top: 0.2rem; }

.nav__menu { list-style: none; display: flex; gap: clamp(1rem, 2vw, 2.25rem); }
.nav__menu a {
  position: relative; display: inline-flex; align-items: baseline; gap: 0.4em;
  padding-block: 0.6rem; text-decoration: none;
  font-size: var(--step--1); font-weight: 700; font-stretch: 90%; letter-spacing: 0.05em; text-transform: uppercase;
}
.nav__no { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; color: var(--ink-300); }
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.25rem; height: 2px;
  background: var(--brand-accent); transform: scaleX(0) skewX(var(--lean)); transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-launch);
}
.nav__menu a:hover::after { transform: scaleX(1) skewX(var(--lean)); }
.nav__toggle {
  display: none; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 0.25rem;
  background: none; border: 0; color: var(--chalk-50);
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: var(--mono-track); text-transform: uppercase;
}
.nav__bars { position: relative; width: 1.4rem; height: 0.7rem; }
.nav__bars::before, .nav__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform var(--dur-move) var(--ease-launch);
}
.nav__bars::before { top: 0; }
.nav__bars::after { bottom: 0; right: 0.4rem; }
.menu-open .nav__bars::before { transform: translateY(0.3rem) rotate(-30deg); }
.menu-open .nav__bars::after { transform: translateY(-0.3rem) rotate(30deg); right: 0; }

@media (max-width: 899px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    padding: var(--space-s) var(--gutter) var(--space-l);
    background: var(--ink-900); border-bottom: 1px solid var(--c-line);
    visibility: hidden; opacity: 0; transform: translateY(-0.75rem);
    transition: opacity var(--dur-move) var(--ease-launch), transform var(--dur-move) var(--ease-launch), visibility 0s linear var(--dur-move);
  }
  .menu-open .nav__menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav__menu li { border-bottom: 1px solid var(--c-line); }
  .nav__menu a {
    display: flex; width: 100%; padding-block: 0.9rem; gap: 0.9rem;
    font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
    font-size: var(--step-4); line-height: 0.9; letter-spacing: 0;
    opacity: 0; transform: translateX(-1.5rem);
    transition: opacity var(--dur-move) var(--ease-launch), transform var(--dur-move) var(--ease-launch);
  }
  .menu-open .nav__menu a { opacity: 1; transform: none; }
  .menu-open .nav__menu li:nth-child(2) a { transition-delay: 40ms; }
  .menu-open .nav__menu li:nth-child(3) a { transition-delay: 80ms; }
  .menu-open .nav__menu li:nth-child(4) a { transition-delay: 120ms; }
  .menu-open .nav__menu li:nth-child(5) a { transition-delay: 160ms; }
  .nav__menu a::after { display: none; }
  .nav__no { font-size: var(--step--2); align-self: center; }
}
@media (max-width: 599px) { .site-header__cta { display: none; } }
.nav__cta { display: none; }
@media (max-width: 899px) {
  .nav__menu li.nav__cta { display: block; border-bottom: 0; padding-top: var(--space-m); }
  .nav__menu .nav__cta a.btn {
    width: 100%; font-family: var(--font-body); font-style: normal; font-stretch: 88%; font-size: var(--step--1);
    padding-block: 0.95em; line-height: 1; letter-spacing: 0.06em; color: var(--brand-accent-ink);
  }
}
@media (min-width: 900px) { :root { --header-h: 4.5rem; } }

/* =============================================================================
   HERO
   ============================================================================= */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--space-xl) calc(var(--space-2xl) + 3rem);
}
.hero__lanes { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; }
.hero::before {               /* vignette keeps the type crisp over the lanes */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 0% 100%, color-mix(in srgb, var(--ink-900) 80%, transparent), transparent 60%),
    linear-gradient(to bottom, transparent 55%, var(--ink-900));
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; color: var(--c-text-dim); }
.hero__meta span + span::before { content: "/"; margin-right: 1.25rem; color: var(--c-accent-fg); }
@media (max-width: 359px) { .hero__meta span:nth-child(3) { display: none; } }

.hero__title {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  text-transform: uppercase; font-size: var(--hero-size); line-height: var(--display-leading); letter-spacing: var(--display-track);
}
.hero__line {
  --dx: 0%;
  display: block; overflow: clip;
  padding-top: 0.07em; margin-top: -0.07em;   /* mask headroom, zero net layout */
  padding-right: 0.12em;                       /* italic overhang */
}
.hero__line--2 { padding-left: 0.32em; --dx: 9%; }
.hero__line--3 { padding-left: 0.62em; --dx: -7%; }
.hero__line--1 { --dx: -12%; }
.hero__word {
  display: inline-block;
  animation: k-rise var(--dur-hero) var(--ease-launch) both;
  animation-delay: calc(120ms + var(--i, 0) * 110ms);
}
.hero__line--1 .hero__word {          /* hollow → solid → lit: the athlete fills in */
  color: var(--c-bg);
  -webkit-text-stroke: max(2px, 0.024em) var(--c-text);
  paint-order: stroke fill;
}
.hero__tag { position: relative; display: inline-block; padding-inline: 0.06em 0.14em; color: var(--c-on-accent); z-index: 0; }
.hero__tag::before {
  content: ""; position: absolute; z-index: -1; inset: 0.05em -0.06em 0.02em -0.04em;
  background: var(--c-accent);
  transform: skewX(var(--lean)) scaleX(0); transform-origin: 0 50%;
  animation: k-wipe 760ms var(--ease-cut) 620ms forwards;
}
@keyframes k-rise { from { transform: translateY(108%) skewY(4deg); } to { transform: none; } }
@keyframes k-wipe { to { transform: skewX(var(--lean)) scaleX(1); } }

.hero__aside { display: grid; gap: var(--space-m); align-content: end; max-width: 34rem; }
.hero__lede { font-size: var(--step-1); line-height: 1.45; color: var(--c-text); text-wrap: pretty; }
.hero__lede strong { font-weight: 700; color: var(--c-accent-fg); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); }
.hero__aside > * { animation: k-fade-up var(--dur-reveal) var(--ease-launch) both; }
.hero__aside > :nth-child(1) { animation-delay: 520ms; }
.hero__aside > :nth-child(2) { animation-delay: 620ms; }
.hero__aside > :nth-child(3) { animation-delay: 720ms; }
.hero__meta { animation: k-fade-up var(--dur-reveal) var(--ease-launch) 60ms both; }
@keyframes k-fade-up { from { opacity: 0; transform: translateY(1.25rem); } }

/* Live "next on the floor" ticket */
.next-up {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; align-items: end;
  padding: 1rem 1.15rem 1.05rem; text-decoration: none;
  background: color-mix(in srgb, var(--ink-800) 82%, transparent);
  border: 1px solid var(--c-line); border-left: 3px solid var(--c-accent);
  transition: border-color var(--dur-hover) ease, transform var(--dur-hover) var(--ease-launch);
}
.next-up:hover { border-color: var(--c-line-strong); border-left-color: var(--c-accent); transform: translateX(4px); }
.next-up__label { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6rem; color: var(--c-text-dim); }
.next-up__dot { position: relative; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c-accent); }
.next-up__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-accent);
  animation: k-ping 1.8s var(--ease-launch) infinite;
}
@keyframes k-ping { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3.2); opacity: 0; } }
.next-up__what { grid-column: 1; font-weight: 800; font-size: var(--step-1); line-height: 1.15; font-stretch: 92%; }
.next-up__age { grid-column: 1; color: var(--c-text-dim); font-size: var(--step--1); line-height: 1.3; }
.next-up__when { grid-column: 1; margin-top: 0.35rem; color: var(--c-accent-fg); font-weight: 700; font-size: var(--step--1); white-space: nowrap; }
.next-up__go { grid-column: 2; grid-row: 2 / span 3; align-self: center; width: 1.6rem; height: 1rem; fill: none; stroke: var(--c-text); stroke-width: 2; transition: transform var(--dur-hover) var(--ease-launch); }
.next-up:hover .next-up__go { transform: translateX(4px); }

.hero__coords {
  position: absolute; right: var(--gutter); top: 50%; z-index: 1;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  color: color-mix(in srgb, var(--chalk-50) 38%, transparent); font-size: 0.68rem;
}
.hero__scroll {
  position: absolute; left: var(--gutter); bottom: calc(var(--space-l) + 2.5rem);
  display: none; align-items: center; gap: 0.75rem; color: var(--c-text-dim);
}
.hero__scroll i { width: 2px; height: 2.5rem; background: var(--c-line-strong); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--c-accent); transform: translateY(-100%); animation: k-drip 2.2s var(--ease-cut) infinite; }
@keyframes k-drip { 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }

@media (max-width: 1199px) { .hero__coords { display: none; } }
@media (min-width: 700px) and (max-width: 1199px) {
  .hero__aside { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--space-xl); align-items: start; }
  .hero__lede { grid-row: 1 / span 2; }
}
@media (min-width: 1200px) {
  /* side-by-side: the stack is sized from the space the aside leaves it */
  :root { --hero-size: min(calc((min(100vw, var(--wrap)) - 2 * var(--gutter) - 25rem - var(--space-xl)) / 4.6), 22svh, 13.5rem); }
  .hero { justify-content: flex-end; padding-bottom: calc(var(--space-2xl) + 4.5rem); }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 25rem;
    grid-template-areas: "meta meta" "title aside";
    align-items: end; column-gap: var(--space-xl); row-gap: var(--space-l);
  }
  .hero__meta { grid-area: meta; }
  .hero__title { grid-area: title; }
  .hero__aside { grid-area: aside; padding-bottom: 0.4rem; }
}
@media (max-width: 599px) {
  .hero { padding-top: var(--space-l); }
  .hero__ctas .btn { flex: 1 1 auto; }
  .hero__line--2 { padding-left: 0.18em; }
  .hero__line--3 { padding-left: 0.36em; }
}

/* =============================================================================
   TAPES — two program marquees crossing in an X
   ============================================================================= */
.tapes {
  position: relative; z-index: var(--z-raise);
  height: clamp(8.5rem, 4rem + 13vw, 16rem);
  margin-block: calc(clamp(8.5rem, 4rem + 13vw, 16rem) * -0.5);
  overflow: clip; pointer-events: none;
}
.tape {
  position: absolute; left: -10%; width: 120%; top: 50%;
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem); line-height: 1; text-transform: uppercase;
  padding-block: 0.32em 0.28em;
}
.tape--front { background: var(--brand-accent); color: var(--brand-accent-ink); transform: translateY(-50%) rotate(-3.5deg); z-index: 2; box-shadow: 0 1rem 2rem -1rem rgb(0 0 0 / 0.7); }
.tape--back  { background: var(--brand-chalk); color: var(--brand-ink); transform: translateY(-50%) rotate(2.6deg); }
.tape__lean { will-change: transform; }
.tape__track { display: flex; width: max-content; animation: k-marquee var(--dur-marquee) linear infinite; }
.tape--back .tape__track { animation-direction: reverse; animation-duration: calc(var(--dur-marquee) * 1.3); }
.tape__track > span { display: inline-flex; align-items: center; gap: 0.55em; padding-right: 0.55em; white-space: nowrap; }
.tape__track i { display: inline-block; width: 0.5em; height: 0.5em; background: currentColor; transform: skewX(var(--lean)); }
.tape--back .tape__track i { width: 0.9em; height: 0.12em; }
@keyframes k-marquee { to { transform: translateX(-50%); } }

/* =============================================================================
   PROGRAMS — three lanes
   ============================================================================= */
.programs { position: relative; padding-block: calc(var(--space-section) + 2rem) var(--space-section); overflow: clip; }
.lanes { list-style: none; border-bottom: 1px solid var(--c-line); }
.lane {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-m); row-gap: var(--space-xs);
  padding-block: var(--space-l); border-top: 1px solid var(--c-line);
  transition: color var(--dur-hover) ease;
}
.lane::before {               /* the volt sweep */
  content: ""; position: absolute; z-index: -1; inset: -1px calc(var(--gutter) * -1);
  background: var(--c-accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-move) var(--ease-cut);
}
.lane__no {
  grid-row: 1 / span 2; font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: var(--step-3); line-height: 0.8; color: transparent;
  -webkit-text-stroke: 1.5px var(--c-line-strong); paint-order: stroke fill;
  transition: -webkit-text-stroke-color var(--dur-hover) ease;
}
.lane__head { display: grid; gap: 0.35rem; }
.lane__name {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: var(--step-4); line-height: 0.86; text-transform: uppercase;
  transition: transform var(--dur-move) var(--ease-launch);
}
.lane__ages { color: var(--c-accent-fg); font-weight: 700; transition: color var(--dur-hover) ease; }
.lane__body { grid-column: 2; display: grid; gap: var(--space-2xs); justify-items: start; }
.lane__builds { color: var(--c-text-dim); max-width: 40ch; transition: color var(--dur-hover) ease; }
.lane__art {
  display: none; width: 100%; max-width: 11rem; height: auto;
  fill: none; stroke: var(--c-text); stroke-width: 2.25; stroke-linecap: square; stroke-linejoin: miter;
  transition: stroke var(--dur-hover) ease;
}
.lane__link {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding-block: 0.5rem; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: var(--mono-track); text-transform: uppercase;
}
.lane__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* whole lane is the target */
.lane__link .btn__arrow { transition: transform var(--dur-move) var(--ease-launch); }
.lane__link:focus-visible { outline: none; }
.lane:has(.lane__link:focus-visible) { outline: 3px solid var(--c-on-accent); outline-offset: -3px; }

.lane:hover, .lane:focus-within { color: var(--c-on-accent); }
.lane:hover::before, .lane:focus-within::before { transform: scaleX(1); }
.lane:hover .lane__no, .lane:focus-within .lane__no { -webkit-text-stroke-color: var(--c-on-accent); }
.lane:hover .lane__ages, .lane:hover .lane__builds,
.lane:focus-within .lane__ages, .lane:focus-within .lane__builds { color: var(--c-on-accent); }
.lane:hover .lane__art, .lane:focus-within .lane__art { stroke: var(--c-on-accent); }
.lane:hover .lane__name, .lane:focus-within .lane__name { transform: translateX(0.12em); }
.lane:hover .lane__link .btn__arrow, .lane:focus-within .lane__link .btn__arrow { transform: translateX(0.5em); }

/* lane art: draws itself on reveal, then each sport has a hover move */
.lane__art > * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .lane[data-reveal] .lane__art > * { stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease-launch) 350ms, transform 600ms var(--ease-snap); }
.js .lane.is-in .lane__art > * { stroke-dashoffset: 0; }
.art-core, .art-ball, .art-hands { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-move) var(--ease-snap); }
.lane:hover .art-core { transform: scale(1.6); }
.lane:hover .art-hands { transform: scaleX(1.5); }
.lane:hover .art-ball { transform: translate(-84px, 14px); }
.art-feet { stroke-dasharray: 0.035 0.025 !important; }
.lane:hover .art-feet { animation: k-feet 900ms linear infinite; }
@keyframes k-feet { to { stroke-dashoffset: -0.12; } }

@media (min-width: 800px) {
  .lane {
    grid-template-columns: 5.5rem minmax(0, 1.35fr) minmax(0, 1fr) minmax(7rem, 10rem);
    align-items: center; column-gap: var(--space-l); padding-block: var(--space-xl);
  }
  .lane__no { grid-row: auto; font-size: var(--step-4); align-self: start; }
  .lane__body { grid-column: 3; gap: var(--space-xs); }
  .lane__art { display: block; grid-column: 4; justify-self: end; }
}

/* =============================================================================
   STATS — the volt band; numbers climb to the right
   ============================================================================= */
.stats {
  position: relative; z-index: var(--z-raise);
  margin-block: calc(var(--cut) * -1);
  padding-block: calc(var(--space-section) + var(--cut));
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.stats__eyebrow { margin-bottom: var(--space-xl); color: var(--c-text-dim); display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }
.stats__list { list-style: none; display: grid; gap: var(--space-xl); }
.stat { display: grid; gap: var(--space-xs); }
.stat__num {
  display: flex; align-items: flex-start;
  font-family: var(--font-display); font-stretch: 70%; font-weight: 900; font-style: normal;
  font-size: clamp(6.5rem, 2rem + 13vw, 13.5rem); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat__suffix { font-size: 0.42em; line-height: 1; margin-top: 0.14em; margin-left: 0.04em; }
.stat__label {
  padding-top: var(--space-xs); border-top: var(--border-3) solid var(--c-text);
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; max-width: 22ch; line-height: 1.35;
}
.stat__label span { display: block; font-weight: 500; color: var(--c-text-dim); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: var(--step--1); margin-top: 0.3rem; }
@media (min-width: 800px) {
  .stats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-l); align-items: start; }
  .stat:nth-child(1) { translate: 0 calc(var(--space-2xl) * 1.1); }
  .stat:nth-child(2) { translate: 0 calc(var(--space-2xl) * 0.55); }
  .stats { padding-bottom: calc(var(--space-section) + var(--cut)); }
  .stats__list { padding-bottom: calc(var(--space-2xl) * 1.1); }
}
@media (max-width: 799px) {                 /* phone: the numbers still climb — left to right */
  .stats__list { gap: var(--space-l); }
  .stat:nth-child(2) { margin-left: 14%; }
  .stat:nth-child(3) { margin-left: 28%; }
  .stat__num { font-size: clamp(7rem, 2rem + 26vw, 10rem); }
}

/* odometer */
.odo { display: inline-flex; }
.odo__col { display: inline-block; height: 1em; overflow: clip; }
.odo__strip { display: flex; flex-direction: column; transform: translateY(0); }
.odo__strip > span { display: block; height: 1em; line-height: 1; text-align: center; }
.js .odo__strip { transition: transform var(--dur-count) var(--ease-odo); transition-delay: calc(180ms + var(--c, 0) * 140ms); }
.is-in .odo__strip { transform: translateY(calc(var(--to) * -100%)); }

/* =============================================================================
   SCHEDULE — the calm, legible zone
   ============================================================================= */
.schedule { position: relative; z-index: 1; padding-block: calc(var(--space-section) + var(--cut)) var(--space-section); }
.sched-bar { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); align-items: center; justify-content: space-between; margin-bottom: var(--space-l); }
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem 0.85rem; }
.sched-note { color: var(--c-text-dim); }
.sched-note b { color: var(--c-text); font-weight: 700; }

.daypick { display: none; }
.week { display: grid; gap: var(--space-s); }
.day { position: relative; display: flex; flex-direction: column; background: var(--c-bg); padding: var(--space-m) var(--space-s) var(--space-s); border: 1px solid var(--c-line); }
.day__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.6rem; margin-bottom: 0.4rem; border-bottom: var(--border-3) solid currentColor; }
.day__name { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic; font-size: var(--step-2); line-height: 0.9; text-transform: uppercase; }
.day__tag { padding: 0.3em 0.55em 0.25em; background: var(--brand-accent); color: var(--brand-accent-ink); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.day__list { list-style: none; display: grid; }
.session {
  position: relative; display: grid; gap: 0.15rem; padding-block: 0.8rem; border-bottom: 1px solid var(--c-line);
}
.session:last-child { border-bottom: 0; }
.session__time { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.01em; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.session__prog { display: flex; align-items: center; gap: 0.45rem; font-weight: 800; font-stretch: 92%; line-height: 1.2; font-size: var(--step-0); }
.session__age { color: var(--c-text-dim); font-size: var(--step--1); line-height: 1.35; }
.session__flag { display: none; padding: 0.25em 0.5em 0.2em; background: var(--brand-accent); color: var(--brand-accent-ink); font-size: 0.66rem; letter-spacing: 0.08em; line-height: 1; }
.session.is-next .session__flag, .session.is-live .session__flag { display: inline-block; }
.day__none { display: none; padding-block: 1rem; color: var(--c-text-dim); font-size: var(--step--1); }
.day.is-empty .day__none { display: block; }
.day__off { padding-block: 1rem 0.5rem; color: var(--c-text-dim); font-size: var(--step--1); }
.day__off strong { display: block; color: var(--c-text); font-size: var(--step-0); }

.day.is-today {
  --c-bg: var(--ink-900); --c-text: var(--chalk-50); --c-text-dim: var(--ink-300);
  --c-line: color-mix(in srgb, var(--chalk-50) 16%, transparent);
  color: var(--c-text); border-color: var(--ink-900);
  box-shadow: var(--shadow-strike);
}
.day.is-today .day__head { border-bottom-color: var(--brand-accent); }

@media (min-width: 640px) { .week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .week { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
  .day { border-right-width: 0; }
  .day:last-child { border-right-width: 1px; }
  .day.is-today { z-index: 1; transform: translateY(-0.75rem); padding-bottom: calc(var(--space-s) + 0.75rem); margin-bottom: -0.75rem; }
  .day { padding-inline: 0.9rem; }
  .day__tag { position: absolute; top: -0.55rem; right: 0.9rem; }
  .session__prog { font-size: 1rem; }
  .day--off { background: repeating-linear-gradient(-55deg, transparent 0 10px, var(--c-line) 10px 11px), var(--c-bg); }
}

/* Phone: a day picker shows one day at a time (JS only — without JS every day stacks) */
@media (max-width: 639px) {
  .js .daypick {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; width: 100%;
  }
  .daypick button {
    position: relative; display: grid; place-items: center; gap: 0.2rem; min-height: 3.4rem; padding: 0.4rem 0;
    background: transparent; border: 1px solid var(--c-line-strong); color: var(--c-text);
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease;
  }
  .daypick button[aria-pressed="true"] { background: var(--ink-900); color: var(--chalk-50); border-color: var(--ink-900); }
  .daypick__dot { width: 0.4rem; height: 0.4rem; background: transparent; transform: skewX(var(--lean)); }
  .daypick button.is-today .daypick__dot { background: currentColor; }
  .daypick button[aria-pressed="true"].is-today .daypick__dot { background: var(--brand-accent); }
  .daypick button.is-quiet { color: var(--c-text-dim); }
  .js .day:not(.is-active) { display: none; }
  .js .day.is-today { box-shadow: none; }
  .session { grid-template-columns: 6.6rem minmax(0, 1fr); column-gap: 0.75rem; align-items: start; }
  .session__time { grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .filters { gap: 0.5rem 0.6rem; }
  .filters .chip { padding-inline: 0.85em; }
}

/* =============================================================================
   COACHES — the roster climbs to the right; every face is a photo slot
   ============================================================================= */
.coaches { position: relative; padding-block: calc(var(--space-section) + var(--cut)) var(--space-section); clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--cut) * -1); z-index: var(--z-raise); }
.roster { list-style: none; display: grid; gap: var(--space-xl); }
.coach { display: grid; gap: var(--space-s); align-content: start; }
.coach__meta { color: var(--c-accent-fg); font-weight: 700; }
.coach__name { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic; font-size: var(--step-3); line-height: 0.9; text-transform: uppercase; }
.coach__role { color: var(--c-text); font-weight: 700; }
.coach__line { color: var(--c-text-dim); max-width: 34ch; }
@media (min-width: 800px) {
  .roster { grid-template-columns: repeat(3, minmax(0, 23rem)); justify-content: space-between; column-gap: var(--space-l); padding-bottom: var(--space-2xl); }
  .coach:nth-child(1) { translate: 0 calc(var(--space-2xl) * 1.5); }
  .coach:nth-child(2) { translate: 0 calc(var(--space-2xl) * 0.75); }
}
@media (max-width: 799px) {
  .coach { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); column-gap: var(--space-m); align-items: end; }
  .coach .photo-slot { grid-row: 1 / span 1; }
  .coach__name { font-size: var(--step-2); }
  .coach__line { grid-column: 1 / -1; }
}

/* PHOTO SLOT — the component real club photos drop into.
   Put an <img> inside .photo-slot and the placeholder art steps aside. */
.photo-slot {
  --slot-ratio: 4 / 5;
  position: relative; isolation: isolate; overflow: clip;
  aspect-ratio: var(--slot-ratio);
  background:
    linear-gradient(-62deg, transparent 58%, color-mix(in srgb, var(--brand-accent) 85%, transparent) 58% calc(58% + 2px), transparent calc(58% + 2px)),
    radial-gradient(90% 70% at 85% 0%, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 62%),
    repeating-linear-gradient(-60deg, transparent 0 13px, color-mix(in srgb, var(--chalk-50) 7%, transparent) 13px 14px),
    linear-gradient(170deg, var(--ink-700), var(--ink-850));
  background-size: auto, auto, 200% 200%, auto;
  border: 1px solid var(--c-line);
  transition: background-position 1.2s var(--ease-launch);
}
.photo-slot::before {                      /* crop marks */
  content: ""; position: absolute; inset: 0.75rem; z-index: 2; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--chalk-50) 70%, transparent);
  -webkit-mask: conic-gradient(at 1.1rem 1.1rem, transparent 75%, #000 0) 0 0 / calc(100% - 1.1rem) calc(100% - 1.1rem);
          mask: conic-gradient(at 1.1rem 1.1rem, transparent 75%, #000 0) 0 0 / calc(100% - 1.1rem) calc(100% - 1.1rem);
}
.photo-slot::after {                       /* halftone */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--chalk-50) 16%, transparent) 1.1px, transparent 1.6px) 0 0 / 7px 7px;
  -webkit-mask: linear-gradient(to top, #000, transparent 70%);
          mask: linear-gradient(to top, #000, transparent 70%);
}
.photo-slot__initials {
  position: absolute; left: 0.06em; bottom: -0.12em; z-index: 1;
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: clamp(6rem, 3rem + 9vw, 12rem); line-height: 1; text-transform: uppercase;
  color: var(--ink-800); -webkit-text-stroke: 3px color-mix(in srgb, var(--chalk-50) 55%, transparent); paint-order: stroke fill;
  transition: color var(--dur-move) ease, -webkit-text-stroke-color var(--dur-move) ease, transform var(--dur-move) var(--ease-launch);
}
.photo-slot__tag {
  position: absolute; right: 0.75rem; top: 0.75rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.45rem; max-width: calc(100% - 1.5rem);
  padding: 0.4rem 0.55rem; background: var(--ink-900); color: var(--chalk-50);
  font-size: 0.62rem; line-height: 1.2;
}
.photo-slot__tag svg { width: 0.95rem; height: 0.95rem; flex: none; fill: none; stroke: var(--brand-accent); stroke-width: 2; }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.coach:hover .photo-slot { background-position: 0 0, 0 0, 100% 100%, 0 0; }
.coach:hover .photo-slot__initials { color: var(--brand-accent); -webkit-text-stroke-color: var(--brand-accent); transform: translateX(0.05em); }
@media (max-width: 799px) { .photo-slot__tag span { display: none; } .photo-slot__initials { font-size: clamp(4.5rem, 24vw, 7rem); } }

/* =============================================================================
   FACILITY — the floor plan draws itself
   ============================================================================= */
.facility {
  position: relative; padding-block: var(--space-section);
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
}
.facility { --c-line: color-mix(in srgb, var(--chalk-50) 7%, transparent); }
.facility .sec-head { --c-line: color-mix(in srgb, var(--chalk-50) 14%, transparent); }
.sqft { color: var(--c-accent-fg); }
.facility__grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 1000px) { .facility__grid { grid-template-columns: minmax(0, 1.75fr) minmax(19rem, 1fr); } }

.plan { position: relative; padding: clamp(0.5rem, 2vw, 1.5rem); background: color-mix(in srgb, var(--ink-900) 70%, transparent); border: 1px solid color-mix(in srgb, var(--chalk-50) 14%, transparent); }
.plan__svg { display: block; width: 100%; height: auto; }
.plan__cap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem; color: var(--ink-300); font-size: 0.66rem; }
.plan .wall { fill: none; stroke: var(--chalk-50); stroke-width: 6; stroke-linecap: square; }
.plan .ln { fill: none; stroke: color-mix(in srgb, var(--chalk-50) 50%, transparent); stroke-width: 2; transition: stroke var(--dur-hover) ease; }
.plan .ln--soft { stroke: color-mix(in srgb, var(--chalk-50) 22%, transparent); }
.plan .ln--dash { stroke-dasharray: 10 8; }
.zone { cursor: pointer; }
.zone__fill { fill: transparent; transition: fill var(--dur-hover) ease; }
.zone:hover .zone__fill, .zone.is-active .zone__fill { fill: color-mix(in srgb, var(--brand-accent) 14%, transparent); }
.zone.is-active .ln { stroke: var(--brand-accent); }
.badge { fill: var(--ink-900); stroke: var(--chalk-50); stroke-width: 2.5; transition: fill var(--dur-hover) ease; }
.badge__no { fill: var(--chalk-50); font-family: var(--font-mono); font-weight: 700; font-size: 28px; text-anchor: middle; dominant-baseline: central; transition: fill var(--dur-hover) ease; pointer-events: none; }
.zone.is-active .badge { fill: var(--brand-accent); stroke: var(--brand-accent); }
.zone.is-active .badge__no { fill: var(--brand-accent-ink); }
.plan__label { fill: var(--ink-300); font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; }
.zone.is-active .plan__label { fill: var(--chalk-50); }
@media (max-width: 699px) { .plan__label { display: none; } .badge__no { font-size: 34px; } }

.js .plan .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-launch); transition-delay: calc(var(--d, 0) * 90ms + 150ms); }
.js .plan .ln--dash.draw { stroke-dasharray: 10 8; stroke-dashoffset: 0; opacity: 0; transition: opacity 1s ease 1.2s; }
.js .plan.is-in .draw { stroke-dashoffset: 0; }
.js .plan.is-in .ln--dash.draw { opacity: 1; }
.js .plan .badge, .js .plan .badge__no { opacity: 0; transition: opacity 400ms ease 1.1s, fill var(--dur-hover) ease; }
.js .plan.is-in .badge, .js .plan.is-in .badge__no { opacity: 1; }

.zones { list-style: none; display: grid; border-top: 1px solid color-mix(in srgb, var(--chalk-50) 14%, transparent); }
.zone-btn {
  position: relative; isolation: isolate; width: 100%;
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; column-gap: 0.85rem; row-gap: 0.15rem; align-items: baseline;
  padding: 0.95rem 0.75rem 0.95rem 0; text-align: left;
  background: none; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--chalk-50) 14%, transparent); color: var(--chalk-50);
}
.zone-btn::before {
  content: ""; position: absolute; inset: 0 0 0 -0.75rem; z-index: -1; background: var(--ink-800);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-move) var(--ease-cut);
}
.zone-btn.is-active::before, .zone-btn[aria-pressed="true"]::before { transform: scaleX(1); }
.zone-btn__no {
  grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border: 2px solid var(--chalk-50); border-radius: 50%;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.zone-btn.is-active .zone-btn__no, .zone-btn[aria-pressed="true"] .zone-btn__no { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-accent-ink); }
.zone-btn__name { font-weight: 800; font-stretch: 92%; font-size: var(--step-0); line-height: 1.25; }
.zone-btn__size { color: var(--brand-accent); font-weight: 700; white-space: nowrap; }
.zone-btn__desc { grid-column: 2 / -1; color: var(--ink-300); font-size: var(--step--1); line-height: 1.45; }

/* =============================================================================
   QUOTE — a sample, and it says so
   ============================================================================= */
.quote {
  position: relative; z-index: var(--z-raise);
  padding-block: calc(var(--space-section) + var(--cut));
  margin-top: calc(var(--cut) * -1);
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  margin-bottom: calc(var(--cut) * -1);
}
.quote__inner { display: grid; gap: var(--space-l); }
.quote__stamp {
  justify-self: start; display: grid; gap: 0.35rem; max-width: 13rem;
  padding: 0.8rem 1rem 0.85rem; border: 2px dashed var(--c-text); transform: rotate(-3deg);
  color: var(--c-text);
}
.quote__stamp-big { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic; font-size: var(--step-3); line-height: 0.85; text-transform: uppercase; }
.quote__stamp .mono { font-weight: 700; line-height: 1.35; }
.quote__fig { display: grid; gap: var(--space-m); max-width: 62rem; }
.quote__mark { width: clamp(3.5rem, 7vw, 6rem); height: auto; fill: var(--c-text); }
.quote__text p {
  font-family: var(--font-body); font-style: italic; font-weight: 700; font-stretch: 82%;
  font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance;
}
.quote__text mark { background: none; color: inherit; box-shadow: inset 0 -0.32em 0 var(--brand-accent); }
.quote__by { color: var(--c-text-dim); }
@media (min-width: 1000px) { .quote__inner { grid-template-columns: 14rem minmax(0, 1fr); align-items: start; } .quote__stamp { margin-top: 1rem; } }

/* =============================================================================
   TRIAL + VISIT
   ============================================================================= */
.trial { position: relative; padding-block: calc(var(--space-section) + var(--cut) + 1rem) var(--space-section); overflow: clip; }
.trial__head { display: grid; gap: var(--space-m); margin-bottom: var(--space-2xl); }
.trial__title {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: clamp(3.25rem, 0.25rem + 17vw, 16rem); line-height: 0.82; text-transform: uppercase; letter-spacing: -0.01em;
}
.trial__row { display: block; }
.trial__row--2 { padding-left: clamp(0.3em, 4vw, 0.5em); }
.trial__row--3 { color: var(--c-accent-fg); padding-left: 0.2em; }
.trial__head .sec-lede { color: var(--c-text); }
.trial__grid { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 1000px) {
  .trial__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .trial-form { position: sticky; top: calc(var(--header-h) + 1.5rem); }   /* the ask stays in view while parents read the details */
}

.trial-form {
  position: relative; display: grid; gap: var(--space-m);
  padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--ink-800);
  border-top: 4px solid var(--c-accent);
}
.field { display: grid; gap: 0.5rem; }
.field-row { display: grid; gap: var(--space-m); }
@media (min-width: 640px) { .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field__label, .field legend {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: var(--mono-track); text-transform: uppercase;
  color: var(--ink-300); margin-bottom: 0.15rem; padding: 0;
}
.field legend { margin-bottom: 0.65rem; }
.field input, .field select {
  width: 100%; min-height: 3.25rem; padding: 0 1rem;
  background: var(--ink-900); color: var(--chalk-50);
  border: 1px solid var(--c-line-strong); border-radius: 0;
  font-size: max(16px, var(--step-0)); appearance: none; -webkit-appearance: none;
  transition: border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
.field input::placeholder { color: color-mix(in srgb, var(--chalk-50) 60%, transparent); }
.field input:hover, .field select:hover { border-color: var(--chalk-50); }
.field input:focus-visible, .field select:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent); }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--chalk-50) 50%), linear-gradient(-45deg, transparent 50%, var(--chalk-50) 50%);
  background-position: calc(100% - 1.4rem) 55%, calc(100% - 1rem) 55%;
  background-size: 0.4rem 0.4rem; background-repeat: no-repeat; padding-right: 2.75rem;
}
.picks { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
.pick { position: relative; }
.pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick span {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 2.75rem; padding: 0.55em 1em;
  font-weight: 800; font-stretch: 90%; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1;
  color: var(--chalk-50); transition: color var(--dur-hover) ease; pointer-events: none;
}
.pick span::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 2px solid var(--c-line-strong); transform: skewX(var(--lean));
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-tap) var(--ease-snap);
}
.pick:hover span::before { border-color: var(--chalk-50); }
.pick input:checked + span { color: var(--brand-accent-ink); }
.pick input:checked + span::before { background: var(--brand-accent); border-color: var(--brand-accent); }
.pick input:focus-visible + span::before { outline: 3px solid var(--chalk-50); outline-offset: 3px; }
.pick input:active + span::before { transform: skewX(var(--lean)) scale(0.94); }
.picks--days .pick span { min-width: 3.4rem; justify-content: center; padding-inline: 0.6em; }
@media (max-width: 559px) {
  .picks--days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; }
  .picks--days .pick span { min-width: 0; width: 100%; padding-inline: 0; font-size: var(--step--2); }
}
.form-foot { display: grid; gap: var(--space-s); }
.form-foot .btn { justify-self: start; }
.form-note { color: var(--ink-300); font-size: 0.68rem; }
.form-status:empty { display: none; }
.form-status {
  display: grid; gap: 0.3rem; padding: 1rem 1.1rem; background: var(--brand-accent); color: var(--brand-accent-ink); font-weight: 600;
  animation: k-fade-up var(--dur-move) var(--ease-launch);
}
.form-status strong { font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: italic; font-weight: 900; font-size: var(--step-2); text-transform: uppercase; line-height: 0.95; }
@media (max-width: 479px) { .form-foot .btn { justify-self: stretch; white-space: normal; } }

.visit { display: grid; gap: var(--space-m); align-content: start; }
.visit__title { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic; font-size: var(--step-4); line-height: 0.9; text-transform: uppercase; }
.map { display: block; width: 100%; height: auto; overflow: hidden; border: 1px solid var(--c-line); background: var(--ink-850); }
.map__land { fill: var(--ink-850); }
.map__street { fill: none; stroke: color-mix(in srgb, var(--chalk-50) 9%, transparent); stroke-width: 1.5; }
.map__river { fill: none; stroke: color-mix(in srgb, var(--chalk-50) 16%, transparent); stroke-width: 20; stroke-linecap: round; }
.map__river-edge { fill: none; stroke: var(--ink-850); stroke-width: 2; stroke-dasharray: 2 10; }
.map__road { fill: none; stroke: color-mix(in srgb, var(--chalk-50) 55%, transparent); stroke-width: 4; }
.map__shield { fill: var(--ink-900); stroke: color-mix(in srgb, var(--chalk-50) 55%, transparent); stroke-width: 1.5; }
.map__shield-t, .map__label, .map__river-t { font-family: var(--font-mono); font-weight: 700; text-anchor: middle; }
.map__shield-t { fill: var(--chalk-50); font-size: 11px; dominant-baseline: central; }
.map__river-t { fill: var(--ink-300); font-size: 9px; letter-spacing: 0.2em; font-weight: 500; }
.map__label { fill: var(--chalk-50); font-size: 12px; letter-spacing: 0.12em; text-anchor: start; }
.map__pin { fill: var(--brand-accent); }
.map__pulse { fill: none; stroke: var(--brand-accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: k-pin 2.4s var(--ease-launch) infinite; }
@keyframes k-pin { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.visit__addr { font-size: var(--step-1); line-height: 1.35; font-weight: 700; }
.visit__addr span { display: block; font-weight: 400; color: var(--c-text-dim); font-size: var(--step--1); margin-top: 0.4rem; }
.hours { display: grid; border-top: 1px solid var(--c-line); }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.65rem; border-bottom: 1px solid var(--c-line); }
.hours dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--mono-track); text-transform: uppercase; color: var(--c-text-dim); padding-top: 0.15rem; }
.hours dd { font-weight: 700; text-align: right; }
.contact { display: grid; gap: 0.35rem; }
.contact a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.contact a:hover { color: var(--c-accent-fg); }
.contact svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: var(--c-accent-fg); stroke-width: 2; }

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-footer { position: relative; padding-top: var(--space-2xl); overflow: clip; background: var(--ink-1000); }
.footer__top { display: grid; gap: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--c-line); }
@media (min-width: 900px) { .footer__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.colorway { display: grid; gap: var(--space-s); }
.colorway__label { color: var(--c-text-dim); max-width: 46ch; }
.colorway__label b { color: var(--c-text); font-weight: 700; }
.swatches { display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; }
@media (max-width: 479px) { .swatches { gap: 0.5rem 0.55rem; } .swatch { padding: 0.5em 0.75em 0.5em 0.55em; gap: 0.45rem; } .swatch i { width: 1rem; height: 1rem; } }
.swatch {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 2.75rem; padding: 0.5em 1em 0.5em 0.7em; background: none; border: 0; color: var(--chalk-50);
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: var(--mono-track); text-transform: uppercase;
}
.swatch::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 2px solid var(--c-line); transform: skewX(var(--lean)); transition: border-color var(--dur-hover) ease; }
.swatch i { width: 1.3rem; height: 1.3rem; background: var(--sw); transform: skewX(var(--lean)); transition: transform var(--dur-hover) var(--ease-snap); }
.swatch:hover::before { border-color: var(--c-line-strong); }
.swatch:hover i { transform: skewX(var(--lean)) scale(1.15); }
.swatch[aria-pressed="true"]::before { border-color: var(--sw); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; justify-content: flex-start; }
@media (min-width: 900px) { .footer__nav { justify-content: flex-end; } }
.footer__nav a { display: inline-flex; min-height: 2.75rem; align-items: center; font-weight: 700; font-stretch: 90%; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--step--1); text-decoration: none; }
.footer__nav a:hover { color: var(--c-accent-fg); }
.footer__word {
  display: block; margin-block: var(--space-l) -0.16em; white-space: nowrap;
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: 22.5vw; line-height: 0.8; text-transform: uppercase; letter-spacing: -0.01em;
  color: var(--ink-1000); -webkit-text-stroke: max(1.5px, 0.006em) color-mix(in srgb, var(--chalk-50) 26%, transparent); paint-order: stroke fill;
  user-select: none; text-align: center;
}
.footer__meta {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; justify-content: space-between;
  padding-block: var(--space-m); border-top: 1px solid var(--c-line); color: var(--c-text-dim);
  background: var(--ink-1000); box-shadow: 0 0 0 100vmax var(--ink-1000); clip-path: inset(0 -100vmax -100vmax);
}
.footer__demo { color: var(--c-text); display: inline-flex; align-items: center; gap: 0.5rem; }
.footer__demo::before { content: ""; width: 0.6rem; height: 0.6rem; background: var(--brand-accent); transform: skewX(var(--lean)); }

/* Mobile action bar — the two things parents came for, always one thumb away */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 0.75rem;
  padding: 0.65rem var(--gutter) calc(0.65rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ink-900) 96%, transparent); border-top: 1px solid var(--c-line);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--dur-move) var(--ease-launch), visibility 0s linear var(--dur-move);
}
.action-bar.is-shown { transform: none; visibility: visible; transition-delay: 0s; }
.action-bar .btn { min-height: 3rem; padding-inline: 0.8em; font-size: var(--step--2); }
@media (min-width: 700px) { .action-bar { display: none; } }


/* =============================================================================
   REVEALS (IntersectionObserver adds .is-in; without JS everything is visible)
   ============================================================================= */
.js [data-reveal] {
  opacity: 0; transform: translateY(2.75rem) skewY(2.5deg); transform-origin: 0 0;
  transition: opacity var(--dur-reveal) var(--ease-launch), transform var(--dur-reveal) var(--ease-launch);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .lane[data-reveal] { transform: translateX(-3rem); }
.js .lane[data-reveal].is-in { transform: none; }
.js .lane[data-reveal].is-in { transition: opacity var(--dur-reveal) var(--ease-launch), transform var(--dur-reveal) var(--ease-launch), color var(--dur-hover) ease; transition-delay: calc(var(--i, 0) * var(--stagger)), calc(var(--i, 0) * var(--stagger)), 0s; }

/* View Transitions: colourway wipe uses a circle clip (set in JS) */
html.vt-wipe::view-transition-old(root), html.vt-wipe::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--ease-launch); }

/* =============================================================================
   SCROLL-DRIVEN MOTION (native where supported; JS fallback sets --p)
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero__line { animation: k-drift linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; }
    .hero__aside { animation: k-lift linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; }
    .stat__num { animation: k-stat linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
    .trial__row { animation: k-row linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .trial__row--2 { --from: -18%; }
    .footer__word { animation: k-word linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
  .no-sda .hero__line { transform: translateX(calc(var(--dx) * var(--p, 0))); }
  .no-sda .hero__aside { opacity: calc(1 - var(--p, 0) * 0.9); }
}
@keyframes k-drift { to { transform: translateX(var(--dx)); } }
@keyframes k-lift { to { opacity: 0.1; transform: translateY(-3rem); } }
@keyframes k-stat { from { transform: skewX(9deg); transform-origin: 0 100%; } to { transform: none; transform-origin: 0 100%; } }
@keyframes k-row { from { transform: translateX(var(--from, 14%)); } to { transform: none; } }
@keyframes k-word { from { transform: translateX(22%); } to { transform: none; } }

/* =============================================================================
   REDUCED MOTION — every animation gets a still state
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero__word, .hero__meta, .hero__aside > * { animation: none; }
  .hero__tag::before { animation: none; transform: skewX(var(--lean)); }
  .tape__track { animation: none; }
  .tape__lean { transform: none !important; }
  .next-up__dot::after, .map__pulse, .hero__scroll i::after { animation: none; }
  .js [data-reveal], .js .lane[data-reveal] { transform: none; }
  .js .lane[data-reveal] .lane__art > *, .js .plan .draw { transition: none; stroke-dashoffset: 0; }
  .js .plan .badge, .js .plan .badge__no, .js .plan .ln--dash.draw { opacity: 1; transition: none; }
  .lane:hover .art-feet { animation: none; }
  .lane:hover .art-ball { transform: none; }
  .js .odo__strip { transition: none; }
  .btn:hover::before { transform: skewX(var(--lean)); }
  .photo-slot { transition: none; }
}