/* ═══════════════════════════════════════════════════════════════════════════
   BallerIndex — merged build
   CONTENT  : ~/ballerindex-static (unchanged)
   LAYOUT   : cinematic editorial — full-bleed media hero, big alternating
              feature rows, large imagery, generous whitespace, restraint.
   PALETTE  : UNCHANGED. "Option B" warm dark + amber, the approved revision
              of 2026-08-28 (MOCK_NOTES.md §4), values identical to
              app/landing-tokens.css on origin/main.

   Amber (--accent) carries CTAs, links, eyebrows, accent words, band step
   numbers, hero rule, slide dots. Gold (--gold) carries verification only.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── LIGHT READING SURFACE (the body) ──────────────────────────────────
     Warm off-white, not clinical white, so the amber family still belongs.
     Every pair below was measured against WCAG AA; the lowest is --dim at
     4.92:1 on the panel tint. */
  --base:#f7f3ec;        /* page background                                */
  --base-deep:#efe9df;   /* recessed light band                            */
  --panel:#efe9df;       /* alternating sections + cards                   */
  --panel-2:#e7e0d3;     /* inset blocks, form fields                      */
  --hair:#ded5c6;        /* hairline borders                              */
  --text:#1c1813;        /* body ink,     15.96:1 on base                  */
  --muted:#564f43;       /* prose,         7.32:1 on base, 6.70:1 on panel */
  --dim:#6b6354;         /* small labels,  5.37:1 on base, 4.92:1 on panel */
  --hero-sub:#564f43;

  /* ── BRAND CONSTANTS — unchanged, and never used as text on light ─────
     The approved amber and gold are AA on DARK only: on this surface they
     measure 1.88:1 and 2.06:1. They stay exactly as approved for FILLS,
     borders and anything sitting on a dark section; the two *-text tokens
     below are the on-light inks, same hue family, measured. */
  --accent:#f2a33c;      /* brand amber — fills and borders                */
  --accent-2:#ffbe63;
  --on-accent:#3a2405;   /* 7.03:1 on the amber fill                       */
  --gold:#d4a537;        /* hallmark gold — fills and strokes on dark      */
  --accent-text:#96560a; /* amber ink,  5.23:1 on base, 4.79:1 on panel    */
  --gold-text:#7d6112;   /* gold ink,   5.29:1 on base, 4.84:1 on panel    */

  /* The ladder ramp is AA on the dark panel it lives on and is NOT used as
     text on light anywhere. */
  --band-grassroots:#e2dccd; --band-emerging:#d5c4a1; --band-developing:#c9a97a;
  --band-advanced:#bf8a52;   --band-elite:#d4a537;
  --coach-lee:#35c98a;   --coach-lee-panel:#0c1f1a;
  --coach-guest:#e0603f; --coach-guest-panel:#20110e;

  --display:'Rajdhani',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --maxw:1320px;
  --gutter:clamp(22px,5vw,64px);
  --bleed:clamp(56px,9vw,150px);
}

/* ── THE DARK MOMENTS ────────────────────────────────────────────────────
   Hero, band ladder, coach editions, closing CTA and footer re-declare the
   SAME custom properties with the original warm-dark values, so every rule
   in this file keeps working unchanged and the approved palette is carried
   verbatim wherever it actually appears. */
.on-dark,.vars-dark{
  --base:#0e0d0a; --base-deep:#0a0906; --panel:#171510; --panel-2:#12100c;
  --hair:#2a271e;
  --text:#f2efe6; --muted:#98937f; --dim:#8a8573; --hero-sub:#e7dfcd;
  --accent-text:#f2a33c;   /* 9.3:1 on the dark base — the approved value */
  --gold-text:#d4a537;     /* 8.0:1 on the dark panel                     */
}
/* Only .on-dark paints. .vars-dark just carries the inks. */
.on-dark{background:var(--base);color:var(--text)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--base);color:var(--text);font-family:var(--body);
  font-weight:300;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--accent-text);text-decoration:none}
a:hover{color:var(--accent-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-read{max-width:920px;margin:0 auto;padding:0 var(--gutter)}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  min-height:48px;padding:13px 28px;font-family:var(--body);font-weight:600;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;border-radius:3px;
  border:1px solid transparent;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.btn-primary{background:var(--accent);color:var(--on-accent);
  box-shadow:0 0 30px -8px rgba(242,163,60,.5)}
.btn-primary:hover{background:var(--accent-2);color:var(--on-accent);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(242,239,230,.28);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--accent-text);color:var(--accent-text)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ── nav — its own solid dark band, amber edge, at every scroll pos ── */
.nav{position:sticky;top:0;z-index:900;
  background:var(--base);                 /* #0e0d0a — its own band        */
  border-bottom:2px solid var(--accent);  /* the defined edge to the hero  */}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:16px 0}
.brand{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:.06em;
  color:var(--text);display:flex;align-items:baseline;min-height:44px;line-height:44px}
.brand:hover{color:var(--text)}
.brand i{color:var(--accent-text);font-weight:500;font-style:normal;padding:0 2px}
.nav-links{display:none;list-style:none;gap:26px;align-items:center}
.nav-links a{white-space:nowrap;color:rgba(242,239,230,.72);font-size:13.5px;
  font-weight:400;letter-spacing:.03em;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current=page]{color:var(--accent-text)}
.nav-cta{display:none;align-items:center;gap:14px}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:48px;height:48px;
  padding:12px;border:1px solid rgba(242,239,230,.25);border-radius:4px;background:none;cursor:pointer}
.burger span{display:block;height:2px;background:var(--text);border-radius:2px;
  transition:transform .2s,opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{border-top:1px solid var(--hair);background:var(--panel-2)}
.drawer[hidden]{display:none}
.drawer ul{list-style:none;padding:8px var(--gutter) 20px}
.drawer a{display:flex;align-items:center;min-height:48px;color:var(--text);font-size:16px;
  border-bottom:1px solid var(--hair);transition:color .2s}
.drawer a:hover{color:var(--accent-text)}
.drawer a[aria-current=page]{color:var(--accent-text)}
.drawer .sub a{padding-left:18px;font-size:15px;color:var(--muted)}
.drawer-cta{display:flex;flex-direction:column;gap:12px;padding:18px var(--gutter) 24px}
/* The drawer's CTAs are <a> inside .drawer, so `.drawer a` (0,1,1) was
   overriding .btn-primary's label colour (0,1,0) and painting light text on
   the amber fill — 1.81:1. These restore the button's own inks. */
.drawer-cta .btn{border-bottom:0}
.drawer-cta .btn-primary{color:var(--on-accent)}
.drawer-cta .btn-ghost{color:var(--text)}
@media(min-width:1180px){
  .nav-links,.nav-cta{display:flex}
  .burger{display:none}
  .drawer{display:none!important}
}
/* Full nav only just fits from 1180px; tighten it until there is room, so
   the header never pushes the page wider than the viewport. */
@media(min-width:1180px) and (max-width:1319px){
  .nav-in{gap:14px}
  .nav-links{gap:16px}
  .nav-links a{font-size:13px;letter-spacing:.02em}
  .nav-cta{gap:10px}
}

/* ═══ FULL-BLEED MEDIA HERO ════════════════════════════════════════════
   The media layer is a <video> that falls back to the still plate. Swapping
   in hero.mp4 later needs no rebuild: the <source> is already wired and the
   poster/gradient carry it until the file lands. */
.hero{position:relative;width:100%;min-height:clamp(560px,86vh,860px);
  display:flex;align-items:center;overflow:hidden;background:var(--base-deep)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
/* The animated gradient sits UNDER the plate and shows through wherever no
   media has loaded, so an empty <video> never leaves a black rectangle. */
.hero-media::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 25% 20%,rgba(242,163,60,.16),transparent 58%),
    radial-gradient(80% 70% at 80% 80%,rgba(212,165,55,.12),transparent 60%),
    linear-gradient(160deg,#1b1811,#0a0906 70%);
  background-size:180% 180%,180% 180%,100% 100%;
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{
  0%{background-position:0% 40%,100% 60%,0 0}
  100%{background-position:60% 0%,30% 100%,0 0}
}
@media (prefers-reduced-motion:reduce){.hero-media::before{animation:none}}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(105deg,rgba(10,9,6,.90) 0%,rgba(10,9,6,.66) 42%,rgba(10,9,6,.30) 72%,rgba(10,9,6,.55) 100%),
    linear-gradient(180deg,rgba(10,9,6,.55) 0%,transparent 34%,rgba(10,9,6,.80) 100%)}
.hero-in{position:relative;z-index:3;width:100%;max-width:var(--maxw);
  margin:0 auto;padding:clamp(56px,9vw,120px) var(--gutter)}
.hero-col{max-width:min(760px,64%)}
@media(max-width:900px){.hero-col{max-width:100%}}

.hero-slides{position:relative}
.hslide{display:none}
.hslide.on{display:block;animation:rise .7s cubic-bezier(.2,.8,.25,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hslide.on{animation:none}}
.hero-kick{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(13px,1.5vw,17px);letter-spacing:.3em;text-transform:uppercase;
  color:rgba(242,239,230,.82);margin-bottom:14px}
.hero-big{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(46px,8.4vw,116px);letter-spacing:.005em;text-transform:uppercase;
  line-height:.94;color:var(--accent-text);text-shadow:0 0 60px rgba(242,163,60,.34)}
.hero-tail{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(15px,2.1vw,26px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--text);opacity:.92;margin-top:12px}
.hero-rule{width:120px;height:1px;margin:26px 0 20px;
  background:linear-gradient(90deg,var(--accent),transparent)}
.hero-sub{font-size:clamp(13px,1.3vw,16px);letter-spacing:.2em;font-style:italic;
  color:var(--hero-sub);margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* metric callouts — live HTML over a clean plate, never baked pixels */
.callout{position:absolute;z-index:4;border-radius:3px;padding:10px 14px;text-align:left;
  border:1px solid rgba(242,163,60,.42);background:rgba(10,9,6,.58);backdrop-filter:blur(5px)}
.callout b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(17px,2.2vw,26px);color:var(--accent-text);line-height:1.04;letter-spacing:.02em}
.callout span{display:block;font-size:9.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;margin-top:2px}
.tick{position:absolute;z-index:4;border-radius:50%;width:70px;height:70px;
  border:1.5px dashed rgba(242,163,60,.7)}
@media(max-width:1023px){.tick{display:none}}

.hero-foot{position:absolute;left:0;right:0;bottom:26px;z-index:5}
.hero-foot-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;gap:12px}
.dots{display:flex;align-items:center;gap:8px}
.dots button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;padding:0}
.dots button span{display:block;height:2px;width:26px;background:rgba(242,239,230,.3);
  transition:background-color .3s,width .3s}
.dots button[aria-current=true] span{width:52px;background:var(--accent)}
.counter{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.24em;
  color:rgba(242,239,230,.5);margin-left:6px}
.counter b{color:var(--text);font-weight:600}

/* compact hero for the subpages — same media stack, less height */
.hero.compact{min-height:clamp(340px,52vh,520px)}
.hero.compact .hero-big{font-size:clamp(34px,5.6vw,76px)}
.hero.compact .hero-col{max-width:min(860px,80%)}
@media(max-width:900px){.hero.compact .hero-col{max-width:100%}}
/* Accreditation: the Beyond Football pointer under the hero rule. In flow,
   so it pushes the hero taller rather than ever overlapping the H1; the
   headline stays the dominant line at every width. */
.hero-beyond{margin-top:clamp(26px,3.6vw,44px)}
/* This hero carries more text over the crowd lights, so its left-to-right
   scrim runs darker further across. Scoped to this hero only. */
.hero:has(.hero-beyond) .hero-scrim{background:
    linear-gradient(90deg,rgba(10,9,6,.92) 0%,rgba(10,9,6,.86) 38%,rgba(10,9,6,.60) 64%,rgba(10,9,6,.40) 82%,rgba(10,9,6,.55) 100%),
    linear-gradient(180deg,rgba(10,9,6,.55) 0%,transparent 34%,rgba(10,9,6,.80) 100%)}
.hero-beyond .eyebrow{margin-bottom:10px}
.hero-beyond-head{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,2.3vw,30px);line-height:1.1;letter-spacing:.02em;color:var(--text);
  max-width:28ch;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hero-beyond-link{display:inline-block;margin-top:14px;padding:6px 0;font-family:var(--display);
  font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text)}
.hero-beyond-link:hover{text-decoration:underline;text-underline-offset:5px}

/* ── COACH ASSESSED strip ────────────────────────────────────────────── */
.assured{border-top:1px solid rgba(125,97,18,.30);border-bottom:1px solid rgba(125,97,18,.30);
  background:rgba(212,165,55,.13)}
.assured-in{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  text-align:center;padding:18px 0}
.assured b{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold-text)}
.assured span{font-size:14px;color:var(--muted)}
.gold{color:var(--gold-text)}
.on-dark .assured{border-color:rgba(212,165,55,.4);background:rgba(212,165,55,.05)}

/* ═══ THE EDITORIAL SLAB — the workhorse of every page ═════════════════
   One section = a wide two-column row: the eyebrow + headline hold the left
   rail (sticky on desktop so the heading rides beside its prose), the body
   runs in the right column at a readable measure. Alternating slabs flip
   the rail to the right, which is what gives the page its big alternating
   rhythm without needing an image in every section. */
.slab{padding:var(--bleed) 0;border-top:1px solid var(--hair)}
.slab.panel{background:var(--panel)}
.slab.plain{border-top:0}
.slab-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;gap:clamp(20px,3vw,34px);grid-template-columns:1fr}
.slab-head{min-width:0}
.slab-body{min-width:0;max-width:72ch}
@media(min-width:980px){
  .slab-in{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:clamp(36px,6vw,96px);align-items:start}
  .slab-head{position:sticky;top:104px}
  .slab.flip .slab-head{order:2}
  .slab.flip .slab-body{order:1}
}
/* centred variant, for the few sections the copy centres */
.slab.centred .slab-in{grid-template-columns:1fr;text-align:center;
  max-width:1000px;gap:0}
.slab.centred .slab-head{position:static}
.slab.centred .slab-body{max-width:none;margin:0 auto}

.eyebrow{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.36em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:16px}
.eyebrow.center{text-align:center;text-indent:.36em}
.headline{font-family:var(--display);font-weight:700;
  font-size:clamp(30px,4.6vw,60px);letter-spacing:.02em;text-transform:uppercase;
  line-height:1.03;color:var(--text)}
.headline.center{text-align:center}
.accent{color:var(--accent-text)}
.prose{font-size:clamp(15.5px,1.15vw,18px);line-height:1.85;color:var(--muted);margin-bottom:22px}
.prose:last-child{margin-bottom:0}
.prose strong{color:var(--text);font-weight:600}

/* ═══ BIG ALTERNATING FEATURE ROW — the image moments ══════════════════ */
.frow{padding:var(--bleed) 0;border-top:1px solid var(--hair);overflow:hidden}
.frow.panel{background:var(--panel)}
.frow-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;gap:clamp(30px,5vw,76px);grid-template-columns:1fr;align-items:center}
@media(min-width:980px){
  .frow-in{grid-template-columns:1fr 1fr}
  .frow.flip .frow-media{order:2}
  .frow.flip .frow-text{order:1}
}
.frow-text{min-width:0;max-width:60ch}
.frow-media{position:relative;min-width:0}
.frow-media .shot{position:relative;border-radius:5px;overflow:hidden;
  border:1px solid var(--hair);box-shadow:0 30px 70px -38px rgba(28,24,19,.45);
  aspect-ratio:4/3}
.frow-media .shot img{width:100%;height:100%;object-fit:cover}
.frow-media .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(10,9,6,.5) 100%)}
/* the illustrative label, kept from the source build */
.illus{position:absolute;z-index:2;top:14px;right:14px;font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--hair);background:rgba(10,9,6,.72);border-radius:999px;padding:5px 11px}

/* ── stat row, cards, steps, bullets ─────────────────────────────────── */
.statrow{display:grid;gap:16px;margin-top:38px;grid-template-columns:1fr}
@media(min-width:620px){.statrow{grid-template-columns:repeat(3,1fr)}}
.stat{border:1px solid var(--hair);border-radius:5px;padding:30px 22px;text-align:center;
  background:var(--panel)}
.slab.panel .stat{background:var(--base)}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:48px;
  line-height:1;color:var(--accent-text)}
.stat span{display:block;margin-top:12px;font-family:var(--display);font-weight:600;
  font-size:11px;letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;color:var(--dim)}

.card-grid{display:grid;gap:16px;margin-top:38px;grid-template-columns:1fr}
@media(min-width:700px){.card-grid{grid-template-columns:1fr 1fr}}
.ncard{background:var(--panel);border:1px solid var(--hair);border-radius:5px;padding:30px}
.slab.panel .ncard{background:var(--base)}
.ncard .n{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.22em;
  color:var(--accent-text);margin-bottom:14px}
.ncard h3{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text);margin-bottom:12px;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ncard h3 em{font-family:var(--body);font-style:normal;font-weight:400;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.ncard p{font-size:15px;line-height:1.8;color:var(--muted)}

/* Stepped list: numbered amber badges joined by a thin rail. */
.steplist{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:0 0 24px;position:relative;align-items:start}
.step:last-child{padding-bottom:0}
.step:not(:last-child)::before{content:"";position:absolute;left:21.5px;top:48px;bottom:6px;width:1px;
  background:linear-gradient(180deg,rgba(242,163,60,.55),rgba(242,163,60,.12))}
.step .n{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(242,163,60,.5);background:var(--base);font-family:var(--display);font-weight:700;
  font-size:14px;letter-spacing:.08em;color:var(--accent-text)}
.step h3{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text);margin:9px 0 6px}
.step p{font-size:15px;line-height:1.72;color:var(--muted)}
.step p strong{color:var(--text);font-weight:600}

ul.bullets{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:8px}
ul.bullets li{font-size:15.5px;line-height:1.8;color:var(--muted);
  padding:16px 0 16px 26px;border-bottom:1px solid var(--hair);position:relative}
ul.bullets li:last-child{border-bottom:0}
ul.bullets li::before{content:"";position:absolute;left:0;top:26px;
  width:9px;height:1px;background:var(--accent)}
ol.steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;margin-top:8px}
ol.steps li{counter-increment:s;font-size:15.5px;line-height:1.8;color:var(--muted);
  padding:16px 0 16px 42px;border-bottom:1px solid var(--hair);position:relative}
ol.steps li:last-child{border-bottom:0}
ol.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:16px;
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--accent-text)}
ul.bullets li strong,ol.steps li strong{color:var(--text);font-weight:600}

/* pipeline — a compact stepped list with a rail, ending in the report card */
.pipeline{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column}
.pipe-node{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:0 0 20px;position:relative;align-items:start}
.pipe-node::before{content:"";position:absolute;left:19.5px;top:44px;bottom:4px;width:1px;
  background:linear-gradient(180deg,rgba(242,163,60,.55),rgba(242,163,60,.12))}
.pipe-node .num{width:40px;height:40px;border-radius:50%;background:var(--panel);
  border:1px solid rgba(242,163,60,.4);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--accent-text)}
.pipe-node b{display:block;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-text);margin:8px 0 4px}
.pipe-node p{font-size:14.5px;line-height:1.65;color:var(--muted)}
.pipe-node p strong{color:var(--text);font-weight:600}
.pipe-out{border:1px solid rgba(212,165,55,.3);border-radius:5px;background:rgba(212,165,55,.06);
  padding:24px 24px 22px;margin-top:4px}
.pipe-out .sh{display:flex;margin-bottom:10px;color:var(--gold-text)}
.pipe-out b{display:block;font-family:var(--display);font-weight:700;font-size:18px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);margin-bottom:8px}
.pipe-out p{font-size:14.5px;line-height:1.7;color:var(--muted)}
.pipe-out p strong{color:var(--text);font-weight:600}

/* A clearly-marked image placeholder: light box, dashed edge, label.
   Currently NOT on any page — the technology.html pipeline row runs as a
   centred single column (.frow.solo) until a real motion-mapping visual
   exists. To add it: drop `solo` from that section's class and put
   <div class="frow-media"><div class="shot"><img src="img/…" alt=""></div></div>
   as the first child of its .frow-in (use .shot-placeholder only for a
   private preview — its label text is public). */
/* single-column feature row (no media): centred, readable measure */
.frow.solo .frow-in{grid-template-columns:minmax(0,1fr);max-width:calc(760px + 2 * var(--gutter))}
.frow.solo .frow-text{max-width:none}
.frow-media .shot-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;background:var(--panel);border:1.5px dashed #c9bda8;box-shadow:none;color:var(--accent)}
.frow-media .shot-placeholder::after{content:none}
.frow.panel .shot-placeholder{background:var(--base)}
.ph-figure{width:34%;max-width:150px;height:auto;opacity:.85}
.ph-label{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);text-align:center;padding:0 16px}

/* ═══ BAND LADDER — full-bleed dark moment ════════════════════════════ */
.bands{position:relative;border-top:1px solid var(--hair)}
.bands.lifted{z-index:899}
.bands-wash{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(85% 60% at 50% 0%,rgba(242,163,60,.08),transparent 62%),
             linear-gradient(180deg,#131108 0%,var(--base) 62%)}
.bands-in{position:relative;z-index:1;padding:var(--bleed) 0}
.bands-head{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.ladder{list-style:none;display:grid;gap:14px;margin-top:44px;grid-template-columns:1fr;
  max-width:var(--maxw);margin-left:auto;margin-right:auto;padding:0 var(--gutter)}
.ladder li{display:flex}
.band{width:100%;text-align:left;background:var(--panel);border:1px solid var(--hair);
  border-radius:4px;padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;
  cursor:pointer;transition:border-color .2s,transform .2s;font-family:var(--body)}
.band:hover{border-color:rgba(242,163,60,.45);transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.band:hover{transform:none}}
.band-open{border-color:rgb(var(--bc-rgb)/.55);box-shadow:inset 0 0 0 1px rgb(var(--bc-rgb)/.3)}
.band-elite{border-left:3px solid var(--gold)}
.band-step{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.24em;
  color:var(--accent-text);display:flex;align-items:center;justify-content:space-between;gap:8px}
.band-step svg{flex-shrink:0;transition:transform .2s}
.band[aria-expanded=true] .band-step svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.band-step svg{transition:none}}
.band-chip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:6px 14px;border-radius:999px;border:1px solid rgb(var(--bc-rgb)/.45);
  background:rgb(var(--bc-rgb)/.10)}
.band-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:rgb(var(--bc-rgb))}
.band-chip b{font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgb(var(--bc-rgb))}
.band-means{font-size:14.5px;line-height:1.75;color:var(--muted)}
.band-note{max-width:var(--maxw);margin:26px auto 0;padding:0 var(--gutter);
  font-size:13.5px;color:var(--dim);display:flex;gap:10px;align-items:flex-start}
.band-note svg{margin-top:2px;flex-shrink:0;color:var(--gold-text)}

.scrim-band{position:fixed;inset:0;z-index:940;background:rgba(10,9,6,.82)}
.panel-band{position:fixed;left:0;right:0;bottom:0;z-index:950;max-height:82vh;overflow-y:auto;
  border-top:1px solid rgb(var(--bc-rgb)/.5);border-radius:14px 14px 0 0;background:var(--panel-2);
  padding:22px var(--gutter) calc(24px + env(safe-area-inset-bottom))}
.panel-band[hidden]{display:none}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}
.panel-head p{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.24em;color:var(--accent-text)}
.panel-head h3{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.8vw,34px);
  letter-spacing:.06em;text-transform:uppercase;margin-top:5px;color:rgb(var(--bc-rgb))}
.panel-close{flex-shrink:0;min-width:44px;min-height:44px;margin:-6px -10px 0 0;
  display:flex;align-items:center;justify-content:center;background:none;border:0;
  color:var(--dim);cursor:pointer;transition:color .2s}
.panel-close:hover{color:var(--accent-text)}
.panel-grid{display:grid;gap:26px}
.panel-grid h4{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.panel-grid p{font-size:15.5px;line-height:1.8;color:var(--muted)}
@media(min-width:700px){
  .ladder{grid-template-columns:1fr 1fr}
  .scrim-band{display:none}
  .panel-band{position:static;z-index:auto;max-height:none;overflow:visible;
    margin:16px auto 0;max-width:var(--maxw);border-radius:5px;border:1px solid var(--hair);
    border-top:2px solid rgb(var(--bc-rgb));background:var(--panel);
    padding:34px clamp(24px,3vw,44px)}
}
@media(min-width:900px){.panel-grid{grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,80px)}}
@media(min-width:1180px){.ladder{grid-template-columns:repeat(5,1fr)}}

/* ── coach-edition cards ─────────────────────────────────────────────── */
.cards{display:grid;gap:24px;margin-top:44px;grid-template-columns:1fr}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.cards{grid-template-columns:repeat(3,1fr)}}
.bcard{background:var(--c-panel,var(--panel));border:1px solid var(--hair);border-radius:6px;
  overflow:hidden;box-shadow:0 26px 60px -34px rgba(0,0,0,.55);display:flex;flex-direction:column;
  transition:transform .25s}
.bcard:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.bcard:hover{transform:none}}
.bcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:18px 20px;border-bottom:1px solid var(--hair)}
.bcard-brand{font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:.14em;color:var(--text)}
.bcard-brand i{font-style:normal;color:var(--c-accent,var(--accent))}
.bcard-ed{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--hair);border-radius:999px;padding:4px 10px;white-space:nowrap}
.bcard-body{padding:24px 20px;flex:1}
.bcard-name{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:.03em;
  line-height:1.04;color:#e5dfd0}
.bcard-name b{display:block;font-weight:700;color:var(--text);text-transform:uppercase}
.bcard-meta{font-size:12.5px;color:var(--dim);margin-top:5px;letter-spacing:.04em}
.bcard-bandlabel{display:block;margin-top:18px;font-family:var(--display);font-weight:600;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.bcard-band{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:6px 13px;
  border-radius:999px;border:1px solid rgb(var(--bc-rgb)/.45);background:rgb(var(--bc-rgb)/.10)}
.bcard-band i{width:7px;height:7px;border-radius:50%;background:rgb(var(--bc-rgb))}
.bcard-band span{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:rgb(var(--bc-rgb))}
.spark{margin-top:22px;width:100%;height:52px;display:block}
.bcard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:22px;
  background:var(--hair);border:1px solid var(--hair);border-radius:4px;overflow:hidden}
.bcard-cell{background:var(--c-panel,var(--panel));padding:12px 8px;text-align:center}
.bcard-cell b{display:block;font-family:var(--display);font-weight:700;font-size:18px;
  color:var(--c-accent,var(--accent))}
.bcard-cell span{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-top:4px}
.hallmark{display:flex;align-items:center;gap:10px;padding:14px 20px;
  border-top:1px solid rgba(212,165,55,.4);background:rgba(212,165,55,.06)}
.hallmark b{font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-text)}
.hallmark span{font-size:11px;color:var(--dim);margin-left:auto;letter-spacing:.06em}
.cards-note{margin-top:26px;font-size:14px;line-height:1.75;color:var(--muted);max-width:70ch}

/* ── CTA band ────────────────────────────────────────────────────────── */
.cta-band{border-top:1px solid rgba(150,86,10,.28);border-bottom:1px solid rgba(150,86,10,.28);
  background:linear-gradient(180deg,rgba(242,163,60,.16),rgba(242,163,60,.06))}
.on-dark .cta-band{border-color:rgba(242,163,60,.4);
  background:linear-gradient(180deg,rgba(242,163,60,.08),rgba(242,163,60,.02))}
.cta-in{max-width:var(--maxw);margin:0 auto;padding:clamp(30px,4vw,48px) var(--gutter);
  display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.cta-in .eyebrow{font-size:11.5px;letter-spacing:.28em;margin-bottom:10px}
.cta-in h2{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,30px);
  letter-spacing:.03em;text-transform:uppercase;line-height:1.2;color:var(--text)}
.cta-in .note{margin-top:12px;font-size:14.5px;line-height:1.75;color:var(--muted);max-width:72ch}
@media(min-width:900px){
  .cta-in{flex-direction:row;align-items:center;justify-content:space-between;gap:44px}
  .cta-in .btn{flex-shrink:0}
}

/* ── audience tiles ──────────────────────────────────────────────────── */
.tiles{display:grid;gap:16px;margin-top:44px;grid-template-columns:1fr}
@media(min-width:700px){.tiles{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--panel);border:1px solid var(--hair);border-radius:5px;padding:32px 26px;
  display:flex;flex-direction:column;min-height:230px;
  transition:transform .22s,border-color .22s,background-color .22s}
.slab.panel .tile{background:var(--base)}
.tile:hover{transform:translateY(-5px);border-color:rgba(242,163,60,.5)}
@media (prefers-reduced-motion:reduce){.tile:hover{transform:none}}
.tile b{display:block;font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent-text);margin-bottom:20px}
.tile .h{display:block;font-family:var(--display);font-weight:700;font-size:23px;
  letter-spacing:.03em;text-transform:uppercase;line-height:1.14;color:var(--text)}
.tile .s{display:block;font-size:13.5px;color:var(--dim);margin-top:12px;font-style:italic}
.tile .go{margin-top:auto;padding-top:20px;font-family:var(--display);font-weight:600;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
  transition:color .2s}
.tile:hover .go{color:var(--accent-text)}

/* ── closing CTA — full-bleed, cinematic ─────────────────────────────── */
.closing{position:relative;display:block;overflow:hidden;text-align:center;
  border-top:1px solid var(--hair);min-height:clamp(380px,56vh,560px)}
.closing>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.closing-scrim{position:absolute;inset:0;
  background:radial-gradient(70% 70% at 50% 50%,rgba(10,9,6,.62),rgba(10,9,6,.93))}
.closing-in{position:relative;z-index:2;padding:clamp(72px,10vw,130px) var(--gutter);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.closing-in h2{font-family:var(--display);font-weight:700;font-size:clamp(34px,6.2vw,80px);
  letter-spacing:.03em;text-transform:uppercase;line-height:1;color:var(--text)}
.closing-in h2.accent{color:var(--accent-text);margin-bottom:28px;text-shadow:0 0 50px rgba(242,163,60,.34)}
.closing-flat{border-top:1px solid var(--hair);background:var(--base-deep)}
.closing-flat .in{max-width:1000px;margin:0 auto;padding:var(--bleed) var(--gutter);text-align:center}
.closing-flat h2{font-family:var(--display);font-weight:700;font-size:clamp(32px,5.4vw,68px);
  letter-spacing:.03em;text-transform:uppercase;line-height:1.02;color:var(--text);text-wrap:balance}
.closing-flat h2.accent{color:var(--accent-text);text-shadow:0 0 50px rgba(242,163,60,.3)}
.closing-flat .divider{margin:22px 0 28px;font-family:var(--display);font-weight:600;
  font-size:11.5px;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
  color:var(--dim);text-wrap:balance}

/* ── contact + forms ─────────────────────────────────────────────────── */
.inboxes{display:flex;flex-direction:column;margin-top:8px}
.inbox{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-bottom:1px solid var(--hair)}
.inbox:first-child{border-top:1px solid var(--hair)}
.inbox dt{font-size:15.5px;line-height:1.6;color:var(--muted);min-width:0}
.inbox dd{flex-shrink:0}
/* An address never breaks: if the row runs out of room the label wraps,
   and below 700px the label sits above the address instead. */
.inbox dd a,.safeblock a{white-space:nowrap;word-break:keep-all;overflow-wrap:normal}
.inbox dd a{display:inline-flex;align-items:center;min-height:32px;font-size:15.5px;
  font-weight:500;color:var(--accent-text)}
.inbox dd a:hover{text-decoration:underline}
@media(min-width:700px){
  .inbox{flex-direction:row;align-items:center;justify-content:space-between;gap:36px}
  .inbox dd{text-align:right}
}
/* The contact page: one centred column instead of a two-column slab with
   an empty rail. */
.slab.contact .slab-in{grid-template-columns:minmax(0,1fr);max-width:calc(760px + 2 * var(--gutter))}
.slab.contact .slab-body{max-width:none}
.safeblock{margin-top:32px;background:var(--panel-2);border:1px solid var(--hair);
  border-radius:5px;padding:26px}
.slab.panel .safeblock{background:var(--base)}
.safeblock h3,.safeblock h2{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.safeblock p{font-size:15.5px;line-height:1.8;color:var(--muted)}

.form{margin-top:38px}
.form-row{display:grid;gap:18px;grid-template-columns:1fr;margin-bottom:18px}
@media(min-width:620px){.form-row.two{grid-template-columns:1fr 1fr}}
.form label{display:block;font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.form input,.form select,.form textarea{width:100%;background:var(--panel-2);
  border:1px solid var(--hair);border-radius:4px;padding:14px 16px;
  font-family:var(--body);font-size:15.5px;color:var(--text)}
.slab.panel .form input,.slab.panel .form select,.slab.panel .form textarea{background:var(--base)}
.form input::placeholder,.form textarea::placeholder{color:var(--dim)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent-text);outline:none}
.form textarea{min-height:140px;resize:vertical}
.form-foot{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.form-note{margin-top:16px;font-size:14.5px;line-height:1.8;color:var(--dim)}
.form-note a{color:var(--accent-text);font-weight:600}
/* Application form (accreditation): one shared block + one fieldset per
   application type, shown by site.js. A hidden fieldset is also disabled, so
   its fields are neither validated nor submitted. */
#apply{scroll-margin-top:var(--anchor-offset)}
.form fieldset{border:0;margin:0;padding:0;min-width:0}
.form fieldset[hidden]{display:none}
.form legend{padding:0;margin:10px 0 16px;font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.form .apply-type{border-top:1px solid var(--hair);padding-top:8px;margin-top:6px}
.form .opt{text-transform:none;letter-spacing:.02em;font-weight:500}
.form-hint{margin:-4px 0 18px;font-size:14px;line-height:1.6;color:var(--muted)}
.form [aria-invalid=true]{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e inset}
.form .field-error{display:block;margin-top:7px;font-size:13px;line-height:1.5;color:#b3261e}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
button.btn[disabled]{opacity:.65;cursor:progress;transform:none}
.form-status{margin-top:18px;border-radius:5px;padding:16px 18px;font-size:15px;line-height:1.65;
  border:1px solid var(--hair);background:var(--base)}
.form-status.ok{border-color:rgba(46,125,50,.45);background:rgba(46,125,50,.08);color:#1f5a23;font-weight:600}
.form-status.err{border-color:rgba(179,38,30,.4);background:rgba(179,38,30,.06);color:#8c1d18}
.form-status.err a{color:#8c1d18;font-weight:700;text-decoration:underline}
.form.sent .form-row,.form.sent fieldset,.form.sent .form-foot{display:none}

/* ── footer ──────────────────────────────────────────────────────────── */
.foot{position:relative;overflow:hidden;border-top:1px solid var(--hair);
  background:linear-gradient(180deg,#12100c 0%,#0e0d0a 72%)}
.foot-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  padding:clamp(52px,6vw,88px) var(--gutter)}
.foot-cols{display:grid;row-gap:44px;column-gap:36px;grid-template-columns:1fr}
@media(min-width:620px){.foot-cols{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.foot-cols{grid-template-columns:repeat(4,1fr)}}
.foot h2{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:18px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.foot ul a{display:inline-flex;align-items:center;min-height:32px;font-size:14.5px;
  color:var(--muted);transition:color .2s}
.foot ul a:hover{color:var(--accent-text)}
.foot .safe{margin-top:52px;padding-top:36px;border-top:1px solid var(--hair);
  font-size:13.5px;line-height:1.8;color:var(--muted);max-width:78ch}
.foot .legal{margin-top:36px;display:flex;flex-direction:column;gap:14px}
.foot .legal p{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--dim)}
.foot .legal nav{display:flex;align-items:center;gap:18px}
.foot .legal nav a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.foot .legal nav a:hover{color:var(--accent-text)}
@media(min-width:760px){.foot .legal{flex-direction:row;align-items:center;justify-content:space-between}}

/* The illustrative label in flow (coach editions), as opposed to pinned in a
   photo corner. Marks the invented players and stats on the three cards. */
.illus-static{margin-top:26px;text-align:center}
.illus-static .illus{position:static;display:inline-block}

/* Overlays that belong to a single slide. The metric callouts describe the
   analysis plate, so they fade with it rather than sitting over all three. */
.hero-metrics{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;
  transition:opacity .6s ease-out}
.hero-metrics.on{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-metrics{transition:none}}

/* ── pre-launch copy alignment ───────────────────────────────────────────
   Three new text blocks. Type only — no layout, palette or component change. */

/* The FORM definition and the provisional-vs-confirmed rule, above the ladder.
   It governs all five panels, so it sits with the section heading. */
.bands-lede{max-width:68ch;margin-top:20px;font-size:15.5px;line-height:1.8;color:var(--muted)}
.bands-lede strong{color:var(--text);font-weight:600}

/* The consent + visibility statement beside the BallerCard content. */
.consent-note{margin-top:14px;padding-top:18px;border-top:1px solid var(--hair)}
.consent-note strong{color:var(--text);font-weight:600}

/* The illustrative-values lines in the footer legal block. */
.legal-illus{margin-top:14px;padding-top:0;border-top:0;font-size:12.5px;color:var(--dim)}

/* ── raw → analysed cross-fade ──────────────────────────────────────────
   Lives inside the existing .frow-media/.shot box, so rounding, border,
   shadow and the alternating row layout are unchanged. Runs on its own:
   raw, fade to analysed, hold, fade back — no hover or tap. */
.shot-toggle{display:block;width:100%;padding:0;background:none;
  border:1px solid var(--hair);border-radius:5px;overflow:hidden;position:relative;
  aspect-ratio:16/11;box-shadow:0 30px 70px -38px rgba(28,24,19,.45)}
.on-dark .shot-toggle{box-shadow:0 30px 70px -38px rgba(0,0,0,.8)}
.shot-toggle>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot-toggle .an{opacity:0;animation:shot-xfade 4.5s ease-in-out infinite}
@keyframes shot-xfade{0%,15%{opacity:0}30%,75%{opacity:1}90%,100%{opacity:0}}

/* The label is HTML, never baked into the image. */
.tog-label{position:absolute;z-index:3;font-family:var(--display);
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(10,9,6,.94);backdrop-filter:blur(4px);border-radius:999px;
  padding:6px 12px;pointer-events:none;
  left:14px;bottom:14px;font-size:10.5px;color:var(--accent)}
/* Wordmark inside a chip: the nav .brand (face, weight, tracking, inks,
   amber pipe) resized to sit inline in the label. */
.tog-label .brand{display:inline;min-height:0;line-height:inherit;font-size:1.15em}
/* Phone: the longer caption keeps to one line by tightening its tracking. */
@media (max-width:480px){.tog-label:has(.brand){letter-spacing:.08em}}
/* Reduced motion: no loop — the analysed frame, held still. */
@media (prefers-reduced-motion:reduce){
  .shot-toggle .an{animation:none;opacity:1}
}

/* ── transparent cut-out (One Camera) ────────────────────────────────────
   No panel: the PNG sits straight on the section background, whole device
   visible. Same aspect box as .shot, so the row doesn't move. */
.frow-media .shot-cutout{border:0;border-radius:0;box-shadow:none;background:none;padding:0}
.frow-media .shot-cutout::after{content:none}
.frow-media .shot-cutout img{object-fit:contain}

/* ── Beyond Football enquiry band (accreditation) ────────────────────────
   A modest light band above the final CTA. The sport images carry a baked
   branded frame (a bar top and bottom); the img box is oversized and offset
   so the tile crops both bars away and shows only the photograph. */
.sports{scroll-margin-top:var(--anchor-offset);background:var(--panel);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:var(--bleed) 0}
.sports-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);text-align:center}
.sports-head{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,40px);line-height:1.03;letter-spacing:.02em;color:var(--text);margin-top:14px}
.sports-lede{max-width:64ch;margin:20px auto 0;color:var(--muted);font-size:16px;line-height:1.75}
.sports-grid{list-style:none;margin:clamp(34px,4vw,54px) 0 0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.sports-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
/* Each tile is a mailto link for its own sport; the lift and amber border
   are the affordance. */
.sports-grid>li{min-width:0}
.sport{display:block;cursor:pointer;position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  border:1px solid var(--hair);background:var(--panel-2);
  transition:transform .25s ease,border-color .25s ease}
.sport img{position:absolute;left:0;top:-9.5%;width:100%;height:117%;object-fit:cover;
  object-position:var(--pos,50%) 50%}
.sport::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:4px;background:var(--sig)}
.sport::after{content:"";position:absolute;z-index:1;inset:auto 0 0 0;height:48%;
  background:linear-gradient(180deg,rgba(10,9,6,0) 0%,rgba(10,9,6,.62) 45%,rgba(10,9,6,.92) 100%)}
.sport span{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 12px 16px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,1.6vw,20px);letter-spacing:.08em;line-height:1.1;color:#f2efe6;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
.sport:hover{transform:translateY(-4px);border-color:var(--accent)}
.sport:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.sport{transition:border-color .25s ease}.sport:hover{transform:none}}
.sports-note{margin:26px auto 0;max-width:64ch;font-size:13px;line-height:1.6;color:var(--muted)}
.sports-cta{margin-top:28px}

/* ── slab with a picture in its rail (about: the product montage) ────────
   The image takes the otherwise-empty left rail, shown whole (no crop),
   centred against the prose; stacks image-first below 900px. */
.slab-fig{margin:0}
.slab-fig img{display:block;width:100%;height:auto;border-radius:5px;
  border:1px solid var(--hair);box-shadow:0 30px 70px -38px rgba(28,24,19,.45)}
.slab-fig figcaption{margin-top:14px;text-align:center;font-size:13.5px;line-height:1.6;color:var(--muted)}
/* text-first: the prose leads (left on desktop), the picture follows (right,
   or below it once the row stacks). */
.slab.media.text-first .slab-body{order:1}
.slab.media.text-first .slab-head{order:2}
.slab.media.text-first .slab-fig img{aspect-ratio:4/3;object-fit:cover}
@media(min-width:900px){
  .slab.media .slab-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(36px,5vw,80px);align-items:center}
  .slab.media .slab-head{position:static}
}

/* ── compact attributed quote under a slab heading (about) ───────────────
   Understated: a thin amber rule, not a pull-quote. The grid leaves a slot
   for a small portrait later (add an <img> before .quote-body and give the
   grid an auto first column). */
.quote{margin:clamp(22px,2.6vw,32px) 0 0;display:grid;grid-template-columns:minmax(0,1fr);
  gap:16px;align-items:start;max-width:58ch}
.quote-body{border-left:3px solid var(--accent);padding-left:18px}
.quote blockquote{margin:0}
.quote blockquote p{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.6vw,22px);
  line-height:1.25;letter-spacing:.01em;color:var(--text)}
.quote figcaption{margin-top:12px}
.quote figcaption b{display:block;font-size:15px;font-weight:600;color:var(--text)}
.quote-cred{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--muted)}
.quote-role{color:var(--accent-text);font-weight:500}
/* Founder variant: one-line attribution, name then muted role. */
.quote-founder figcaption b{display:inline;font-size:14px}
.quote-by{font-size:14px;color:var(--muted)}

/* ── Work With Us (coaches.html): two separate programmes ────────────────
   Path 01 (create) sits on a warm amber tint; Path 02 (coach) opens with a
   neutral band under a heavy amber edge, so the two never read as one. */
.path-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.path-tag{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;font-family:var(--display);
  font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--text)}
.path-tag span{background:var(--accent);color:var(--on-accent);border-radius:999px;padding:4px 11px;letter-spacing:.16em}
.path-note{font-size:14px;line-height:1.65;color:var(--muted)}
.path-create{padding:var(--bleed) 0;border-top:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(242,163,60,.13) 0%,rgba(242,163,60,.05) 100%),var(--base)}
.path-top{display:grid;gap:clamp(30px,5vw,76px);grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:980px){.path-top{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}}
.path-text{min-width:0;max-width:62ch}
.path-create .headline{font-size:clamp(26px,3.2vw,44px)}
/* The creators eyebrow is a lead-in, not a label: near-heading size. */
.path-create .path-text .eyebrow{font-size:clamp(22px,2.3vw,32px);font-weight:700;letter-spacing:.06em;
  line-height:1.1;margin-bottom:16px}
/* Capture visual: the tripod cut-out in a light dashed frame, ready to swap
   for a creator-filming image (data-placeholder="creator-filming"). */
.frow-media .shot-frame{border:1.5px dashed #c9bda8;border-radius:5px;background:var(--base);padding:6%}
.frow-media .shot-frame img{object-fit:contain}
.path-lead{font-size:18px;color:var(--text)}
/* the one sentence that carries the promise: amber rule, heavier weight */
.path-emph{font-size:16.5px;line-height:1.7;font-weight:600;color:var(--text);
  border-left:3px solid var(--accent);padding-left:18px}
.path-callout{margin:clamp(34px,4vw,52px) 0 0;max-width:62ch;font-family:var(--display);font-weight:700;
  font-size:clamp(20px,1.9vw,24px);line-height:1.3;letter-spacing:.01em}
.path-benefits{margin-top:clamp(34px,4vw,52px)}
.path-benefits h3{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:18px}
.benefit-list{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(24px,4vw,56px);grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.benefit-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.benefit-list li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid rgba(150,86,10,.18)}
.benefit-list svg{width:22px;height:22px;flex-shrink:0;margin-top:1px;color:var(--accent-text)}
.benefit-list p{font-size:15px;line-height:1.6;color:var(--muted)}
.benefit-list strong{color:var(--text);font-weight:600}
.path-foot{margin-top:clamp(30px,3.6vw,44px);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:16px 32px;padding-top:26px;border-top:1px solid rgba(150,86,10,.2)}
.path-founding{flex:1 1 420px;max-width:62ch;font-size:17px;line-height:1.65;font-weight:500;color:var(--text)}
.path-foot .path-note{flex-basis:100%;max-width:60ch}
.path-coach-head{background:var(--panel-2);border-top:6px solid var(--accent);border-bottom:1px solid var(--hair);
  padding:clamp(56px,7vw,104px) 0 clamp(44px,5vw,72px)}
.path-coach-head .headline{max-width:20ch}
.path-coach-head .path-note{margin-top:16px;max-width:60ch;font-size:15px}

/* ── Work With Us hero (coaches.html) ─────────────────────────────────────
   Rajdhani's heaviest cut is 700, so 700 is the "800" of the brief. */
.hero.hero-wh{min-height:clamp(560px,78vh,800px)}
/* Darker than the site scrim: this hero carries a lot of text, and the
   shine's darkest stop has to hold against the floodlights. */
.hero-wh .hero-scrim{background:
  linear-gradient(90deg,rgba(10,9,6,.95) 0%,rgba(10,9,6,.92) 45%,rgba(10,9,6,.74) 66%,rgba(10,9,6,.5) 84%,rgba(10,9,6,.6) 100%),
  linear-gradient(180deg,rgba(10,9,6,.6) 0%,rgba(10,9,6,.2) 34%,rgba(10,9,6,.8) 100%)}
/* Below 980px the text runs the full width, over the lights on the right,
   so the scrim goes near-even across. */
@media(max-width:979px){
  .hero-wh .hero-scrim{background:
    linear-gradient(90deg,rgba(10,9,6,.93) 0%,rgba(10,9,6,.9) 60%,rgba(10,9,6,.86) 100%),
    linear-gradient(180deg,rgba(10,9,6,.4) 0%,transparent 40%,rgba(10,9,6,.6) 100%)}
}
.hero-wh .wh-col{max-width:min(900px,100%)}
.wh-eyebrow{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.3vw,32px);line-height:1.1;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text)}
.wh-h1{margin-top:clamp(10px,1.2vw,16px)}
.wh-h1>span{display:block}
.wh-head{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.9vw,40px);line-height:1.1;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.wh-rule{width:64px;height:3px;background:var(--accent);margin:clamp(16px,1.8vw,24px) 0}
.wh-shine{font-family:var(--display);font-weight:700;font-size:clamp(34px,5.2vw,70px);line-height:1.02;
  letter-spacing:.01em;text-transform:uppercase;color:#f2a33c;
  background:linear-gradient(100deg,#b9761c 0%,#f2a33c 30%,#fff3d8 50%,#f2a33c 70%,#b9761c 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:wh-shine 5.5s linear infinite}
@keyframes wh-shine{from{background-position:100% 50%}to{background-position:-150% 50%}}
@media (prefers-reduced-motion:reduce){
  .wh-shine{animation:none;background:none;-webkit-text-fill-color:#f2a33c;color:#f2a33c}
}
.wh-sub{margin-top:clamp(14px,1.6vw,22px);font-family:var(--display);font-weight:700;font-size:clamp(19px,1.9vw,26px);
  line-height:1.25;letter-spacing:.02em;color:var(--text)}
.wh-sub span{color:var(--accent-text)}
.wh-logos{margin-top:clamp(24px,2.6vw,34px);display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.wh-logos p{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(242,239,230,.6)}
.wh-logos ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 22px}
.wh-logos li{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:500;font-size:14px;
  color:rgba(242,239,230,.82)}
.wh-logos svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}
.wh-cta{margin-top:clamp(26px,2.8vw,36px)}
/* narrow phones: the four platforms as a tidy 2x2 rather than 3 + 1 */
@media(max-width:479px){.wh-logos ul{display:grid;grid-template-columns:repeat(2,max-content);gap:12px 32px}}

/* ── condense pass (2026-09-28) ─────────────────────────────────────── */
/* Anchor targets land below the sticky nav band. */
/* Every anchor target clears the sticky nav by 16px: the nav is 82px tall below
   1180px and 82.625px from 1180 up (measured), so 98px / 99px. */
:root{--anchor-offset:98px}
@media(min-width:1180px){:root{--anchor-offset:99px}}
[id]{scroll-margin-top:var(--anchor-offset)}
/* Coach-edition cards carry one stat cell now. */
.bcard-stats.two{grid-template-columns:1fr 1fr}
.bcard-stats.two .bcard-cell b{font-size:15px;line-height:1.2}
/* v7 Work With Us hero: amber kicker with a lead rule, two equal lines, lead paragraph. */
.wh-kick{font-family:var(--display);font-weight:600;font-size:clamp(12px,1.1vw,15px);letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent-text);display:flex;align-items:center;gap:14px}
.wh-kick::before{content:"";width:28px;height:2px;background:var(--accent);flex-shrink:0}
.wh-big{font-family:var(--display);font-weight:700;font-size:clamp(34px,5.2vw,70px);line-height:1.02;
  letter-spacing:.01em;text-transform:uppercase;color:var(--text)}
.wh-lead{margin-top:clamp(16px,1.8vw,24px);max-width:640px;font-size:clamp(15.5px,1.2vw,18px);line-height:1.7;
  color:rgba(242,239,230,.82)}
/* Nav keeps the site gutter (.nav-in's own padding shorthand was zeroing .wrap's),
   so the wordmark never touches the viewport edge. 7 links fit at 1180 with 12px gaps. */
.nav-in{padding:16px var(--gutter)}
@media(min-width:1180px) and (max-width:1319px){.nav-links{gap:12px}}
/* Home hero, slide 1 (v7 copy): three stacked lines, lead, two CTAs, proof row. */
.hero-big.hero-stack{font-size:clamp(38px,5.4vw,78px);line-height:.98;color:var(--text)}
.hero-stack .accent{color:var(--accent-text)}
.hero-lede{max-width:600px;font-size:clamp(15px,1.15vw,17.5px);line-height:1.7;color:rgba(242,239,230,.82);margin-bottom:28px}
.hero-proof{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:34px}
.hero-proof b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1;
  color:var(--accent-text);white-space:nowrap}
.hero-proof span{display:block;margin-top:7px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,239,230,.66)}
/* Slides share one grid cell, so the hero holds the tallest slide's height and
   the page never jumps as the carousel rotates; shorter slides sit centred. */
.hero-slides{display:grid}
.hslide{display:block;grid-area:1/1;align-self:center;visibility:hidden}
.hslide.on{visibility:visible}
/* Home hero: keep clear of the dots/counter pinned at the bottom. */
.hero:not(.compact) .hero-in{padding-bottom:clamp(104px,9vw,120px)}
/* "Coach-trained" is one unit: never break at its hyphen. */
.nb{white-space:nowrap}
/* .nb takes its parent's look. Without this, rules aimed at sibling labels
   (.hero-proof span, .hallmark span, .assured span) restyled "Coach-trained". */
.nb.nb{display:inline;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  margin:0;padding:0;border:0;background:none;white-space:nowrap}
/* Home hero on phones: headline, body and both CTAs above the fold in the small
   viewport (toolbars shown); the stats row may fall below it. */
@supports (height:100svh){.hero:not(.compact){min-height:clamp(560px,calc(100svh - 82px),860px)}}
@media(max-width:480px){
  .hero:not(.compact) .hero-in{padding-top:28px}
  .hero:not(.compact) .hero-rule{margin:18px 0 16px}
  .hslide:first-child .hero-kick{letter-spacing:.16em;margin-bottom:12px}
  .hslide:first-child .hero-cta{flex-wrap:nowrap;gap:10px}
  .hslide:first-child .hero-cta .btn{flex:1 1 0;padding-left:10px;padding-right:10px;letter-spacing:.1em}
}
/* ≤360px: a one-line kicker is what lets CTA 2 clear the fold on 360×640. */
@media(max-width:360px){.hslide:first-child .hero-kick{font-size:11px;letter-spacing:.12em}}
/* ── image pass (2026-09-28) ─────────────────────────────────────────── */
/* A <picture> fills its frame exactly as a bare <img> did. */
.frow-media .shot picture{position:absolute;inset:0;display:block}
/* Single analysed frames in the 16:11 raw→analysed box: no cross-fade. */
.shot-toggle picture img{width:100%;height:100%;object-fit:cover}
.illus.illus-left{right:auto;left:14px}
/* The Result: the phone mock-up carries its own text on the right, which any
   4:3 crop would cut; show it whole on its own cream, without the dark fade. */
.frow-media .shot-contain{background:#fbf9f5}
.frow-media .shot-contain img{object-fit:contain}
.frow-media .shot-contain::after{content:none}
/* Accreditation hero: the seal in the frame the home images use.
   Below 1024px it stacks under the text; from 1024px it sits right of it. */
.hero-art{margin-top:28px;width:min(240px,62vw)}
.hero-art .shot{position:relative;aspect-ratio:1/1;border-radius:5px;overflow:hidden;
  border:1px solid var(--hair);background:var(--panel);box-shadow:0 30px 70px -38px rgba(0,0,0,.8)}
.hero-art picture{position:absolute;inset:6%;display:block}
.hero-art img{width:100%;height:100%;object-fit:contain}
@media(min-width:1024px){
  .hero-split .hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(32px,4vw,64px)}
  .hero.compact.hero-split .hero-col{max-width:none}
  .hero-split .hero-art{margin-top:0;width:clamp(220px,22vw,320px)}
}
/* The pill is dark glass everywhere, so its ink stays light even in light sections. */
.frow-media .illus{color:rgba(242,239,230,.82);border-color:rgba(242,239,230,.22)}
/* ── Work With Us hero: platform tiles (2026-09-28) ─────────────────────
   One element, restyled: below 1024px a single row of four under the lead,
   above the CTA; from 1024px a 2×2 cluster in the right-hand column. The
   marks are the platforms' own monochrome glyphs, unaltered. */
.hero-wh .wh-logos{display:block;margin-top:clamp(18px,2.2vw,28px)}
.hero-wh .wh-logos p{margin-bottom:10px}
.hero-wh .wh-logos ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hero-wh .wh-logos li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:12px 4px 10px;border-radius:12px;min-width:0;
  background:linear-gradient(160deg,rgba(242,239,230,.07),rgba(23,21,16,.55));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(242,163,60,.34);box-shadow:0 0 22px -10px rgba(242,163,60,.5),inset 0 1px 0 rgba(242,239,230,.06);
  color:rgba(242,239,230,.92);font-size:12px;font-weight:500;letter-spacing:.02em;text-align:center}
.hero-wh .wh-logos li svg{width:22px;height:22px;fill:currentColor;flex-shrink:0}
.hero-wh .wh-logos li span{white-space:nowrap}
@media(max-width:479px){.hero-wh .wh-logos ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .hero-wh .wh-logos li{font-size:11px;padding:10px 2px 9px}}
@media(min-width:1024px){
  .hero.compact.hero-wh .wh-col{max-width:none;display:grid;column-gap:clamp(32px,4vw,64px);
    grid-template-columns:minmax(0,1fr) clamp(220px,20vw,284px);
    grid-template-areas:"kick art" "h1 art" "lead art" "cta art"}
  .hero-wh .wh-kick{grid-area:kick}
  .hero-wh .wh-h1{grid-area:h1}
  .hero-wh .wh-lead{grid-area:lead}
  .hero-wh .wh-cta{grid-area:cta;justify-self:start}
  .hero-wh .wh-logos{grid-area:art;align-self:center;margin-top:0}
  .hero-wh .wh-logos ul{grid-template-columns:1fr 1fr;gap:14px}
  .hero-wh .wh-logos li{aspect-ratio:1/1;gap:12px;padding:14px;font-size:14px;border-radius:16px;
    transition:border-color .25s,box-shadow .25s,transform .25s;animation:wh-float 7s ease-in-out infinite}
  .hero-wh .wh-logos li:nth-child(2){animation-delay:-1.75s}
  .hero-wh .wh-logos li:nth-child(3){animation-delay:-3.5s}
  .hero-wh .wh-logos li:nth-child(4){animation-delay:-5.25s}
  .hero-wh .wh-logos li:hover{border-color:rgba(242,163,60,.7);box-shadow:0 0 30px -8px rgba(242,163,60,.65),inset 0 1px 0 rgba(242,239,230,.08)}
  .hero-wh .wh-logos li svg{width:clamp(30px,2.6vw,40px);height:clamp(30px,2.6vw,40px)}
}
@keyframes wh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.hero-wh .wh-logos li{animation:none;transition:none}}
/* Accreditation seal: the coin alone (alpha cut-out), no frame, panel, border
   or shadow box; a soft amber glow instead. Same box as before, coin at the
   same 88% of it, so position, size and the hero's height don't move. */
.hero-art .seal{position:relative;aspect-ratio:1/1}
.hero-art .seal img{filter:drop-shadow(0 0 40px rgba(240,160,60,.25))}
/* How It Works hero: the longer amber line wraps balanced, never leaving one word alone. */
.hiw-h1 .accent{display:block;text-wrap:balance}
/* ...and its column is a little wider than other compact heroes so that line
   splits in two, not three, on desktop (the headline totals 3 lines). */
@media(min-width:901px){.hero.compact .hero-col:has(.hiw-h1){max-width:min(960px,86%)}}
/* ── home hero slide 2 (2026-09-29) ─────────────────────────────────────
   From 1024px the analysis slide matches ballerindex.com: player left, text
   centred in the band from 46% of the hero to its right edge, and the scrim
   lifts off the player (clear up to 30%, deep behind the text). The static
   port had put this slide in the shared left column, over the player.
   The slide keeps its grid cell, so all three slides stay the same height. */
.hero-scrim-side{--sx:46%;opacity:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,transparent calc(var(--sx) - 16%),rgba(10,9,6,.62) var(--sx),rgba(10,9,6,.86) 100%),
    linear-gradient(180deg,rgba(10,9,6,.45) 0%,transparent 28%,transparent 72%,rgba(10,9,6,.55) 100%)}
@media(min-width:1024px){
  .hero:not(.compact){container-type:inline-size}
  .hero-scrim{transition:opacity .7s ease-out}
  .hero-scrim-side.on{opacity:1}
  .hero:has(.hslide-side.on) .hero-scrim:not(.hero-scrim-side){opacity:0}
  /* --hero-l: where .hero-col starts (the gutter, or the centred max-width box). */
  .hslide-side{--tx:46cqw;--hero-l:max(var(--gutter),calc((100cqw - var(--maxw)) / 2 + var(--gutter)));
    width:calc(100cqw - var(--tx));margin-left:calc(var(--tx) - var(--hero-l));
    padding:0 clamp(14px,1.8vw,30px);text-align:center}
  .hslide-side .hero-rule{margin-left:auto;margin-right:auto;
    background:linear-gradient(90deg,transparent,var(--accent),transparent)}
  .hslide-side .hero-cta{justify-content:center}
  /* Illustrative pill sits on the content column's right edge, in line with the
     nav's last button, never in the far corner of a wide viewport. */
  .hero-metrics .illus{top:18px;right:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)))}
}
@media (prefers-reduced-motion:reduce){.hero-scrim{transition:none}}
/* ── BallerCard: BallerIndex wordmark (2026-09-29) ──────────────────────
   The nav wordmark scaled down, first line of every card body on all three
   skins; the edition header above it is unchanged. No shield: the site has
   no SVG of the shield-with-bars mark. Light ink + amber bar read on all
   three dark panels (house #171510, Lee #0c1f1a, guest #20110e). */
.bcard-bi{display:block;margin-bottom:14px;font-family:var(--display);font-weight:700;
  font-size:13px;line-height:1;letter-spacing:.06em;color:var(--text);white-space:nowrap}
.bcard-bi i{font-style:normal;font-weight:500;color:var(--accent-text);padding:0 2px}
/* BallerCard wordmark + gold shield (2026-09-29, Rav's ruling). mark-small.svg
   because the brand file says to use it at 32px and below. */
.bcard-bi{display:inline-flex;align-items:center}
.bcard-bi img{width:16px;height:18px;flex-shrink:0;margin-right:7px}
/* From 1080px the three cards sit in one row. Subgrid shares header/body/
   hallmark rows across them, so the headers are equal height and the wordmark
   lines up; the Lee/Guest headers wrap to two lines, House doesn't. */
@media(min-width:1080px){
  .bcard{display:grid;grid-row:span 3;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:0}
}
/* ── home hero slide 3: report deck (2026-09-29) ───────────────────────
   Three pages of a real report, static: the cover in front, the drill page
   and band page tucked behind it at opposing tilts. */
.report-deck{position:relative;aspect-ratio:720/1019;margin-top:28px;margin-left:14px;
  height:clamp(132px,22svh,176px)}
.rd-page{position:absolute;inset:0;border-radius:3px;overflow:hidden;background:#f6f2e9;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.75),0 0 0 1px rgba(242,239,230,.08)}
.rd-page img{display:block;width:100%;height:100%;object-fit:cover}
.rd-page[data-pos="0"]{z-index:3;transform:none;opacity:1}
.rd-page[data-pos="1"]{z-index:2;transform:translate(10%,-3%) rotate(5deg);opacity:.92}
.rd-page[data-pos="2"]{z-index:1;transform:translate(-9%,3%) rotate(-5deg);opacity:.82}
/* ≥1024, as on ballerindex.com: the text sits in the band from 54% (59% from
   1440) to the right edge and the deck stands just left of it, centred on the
   text, with a slight -2.5° tilt; the scrim deepens behind the text. */
.hero-scrim-report{--sx:54%}
@media(min-width:1024px){
  .hslide-report{--tx:54cqw;position:relative}
  .hslide-report .hero-big{font-size:clamp(44px,6.6cqw,88px);line-height:1}
  .report-deck{position:absolute;top:50%;right:100%;height:auto;margin:0 clamp(12px,1.8vw,34px) 0 0;
    width:clamp(150px,17vw,264px);transform:translateY(-50%) rotate(-2.5deg)}
}
@media(min-width:1440px){
  .hero-scrim-report{--sx:59%}
  .hslide-report{--tx:59cqw}
}
/* BallerCard header (2026-09-29): every edition carries the same BALLERCARD™
   wordmark in House amber; the edition pill and the panel skin carry the coach. */
.bcard-brand i{color:var(--accent)}
/* Three-up (≥1080) cards are ~273px wide: BALLERCARD™ + "Coach Lee Edition"
   needs ~40px less to sit inside the header padding on one line (brand and
   pills a touch smaller, tighter tracking); phones keep the roomier header. */
@media(min-width:1080px){
  .bcard-top{padding:18px 16px;gap:8px}
  .bcard-brand{font-size:14.5px;letter-spacing:.1em}
  .bcard-ed{padding:4px 8px;font-size:9px;letter-spacing:.1em}
}

/* ── mobile pass (2026-09-30) ────────────────────────────────────────────
   Phones, tablets and short landscape screens only. Every rule below sits in
   a max-width (≤1179px, where the burger nav runs) or a short-landscape
   query, except the .closing <picture> passthrough and the fallback
   @font-faces (referenced only inside ≤1179px). 1180/1440 pixel-checked.
   Audit + before/after: ~/Downloads/testsunday_condense/MOBILE_AUDIT.md */

/* Mobile image sources: the closing CTA's plate now sits in a <picture>, so it
   keeps the old `.closing>img` fill. */
.closing>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}


/* Webfont swap was the page's layout shift (CLS 0.11–0.17 on the subpage
   heroes: Rajdhani is ~30% narrower than the system fallback, so headlines
   re-wrapped when it arrived). Metric-matched local fallbacks hold the
   same line breaks until the webfonts land. size-adjust fitted to real page
   layout against Arial-metric faces (Rajdhani 77%, Inter 105%); overrides are
   the webfonts' ascent/descent (.93/.35 and .97/.24 em) divided by it. */
@font-face{font-family:"Rajdhani Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto"),local("Liberation Sans"),local("Nimbus Sans"),local("NimbusSans-Regular");
  size-adjust:77%;ascent-override:120.8%;descent-override:45.5%;line-gap-override:0%}
@font-face{font-family:"Rajdhani Fallback";font-weight:600 700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Roboto Bold"),local("Liberation Sans Bold"),local("Nimbus Sans Bold"),local("NimbusSans-Bold"),local("Arial");
  size-adjust:77%;ascent-override:120.8%;descent-override:45.5%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto"),local("Liberation Sans"),local("Nimbus Sans"),local("NimbusSans-Regular");
  size-adjust:105%;ascent-override:92.4%;descent-override:22.9%;line-gap-override:0%}

@media(max-width:1179px){
  :root{--display:'Rajdhani','Rajdhani Fallback',system-ui,sans-serif;--body:'Inter','Inter Fallback',system-ui,sans-serif}
  /* Drawer: never taller than the screen under the nav (landscape phones cut
     off Log In + Begin Benchmark), scrolls inside itself, and the page behind
     it stays put while it is open. */
  .drawer{max-height:calc(100vh - 82px);overflow-y:auto;overscroll-behavior:contain}
  @supports (height:100dvh){.drawer{max-height:calc(100dvh - 82px)}}
  html:has(.burger[aria-expanded=true]),html:has(.burger[aria-expanded=true]) body{overflow:hidden}
  /* 16px form controls: iOS Safari zooms the page on focus below 16px. */
  .form input,.form select,.form textarea{font-size:16px}
  /* Tap targets: footer, legal and contact links were 32px (legal 18px). */
  .foot ul{gap:0}
  .foot ul a{min-height:44px}
  .foot .legal nav{gap:24px}
  .foot .legal nav a{display:inline-flex;align-items:center;min-height:44px}
  .inbox dd a{min-height:44px}
  .hero-beyond-link{display:inline-flex;align-items:center;min-height:44px;padding:0}
}

@media(max-width:1023px){
  /* Body copy at 16px on phones and tablets (was 14–15.5px). Labels, eyebrows
     and uppercase captions keep their designed sizes. */
  .prose,ul.bullets li,ol.steps li,.step p,.pipe-node p,.pipe-out p,.ncard p,
  .band-means,.panel-grid p,.cta-in .note,.cards-note,.benefit-list p,.inbox dt,
  .safeblock p,.form-note,.form-hint,.sports-lede,.slab-fig figcaption,.bands-lede,
  .path-note,.path-coach-head .path-note,.hero-lede,.wh-lead{font-size:16px}
}

@media(max-width:767px){
  /* The smallest labels (9.5–10px) up to 11px. */
  .bcard-ed,.bcard-cell span,.bcard-bandlabel,.hallmark b,.hallmark span,
  .ncard h3 em,.illus{font-size:11px}
  .callout span{font-size:11px;letter-spacing:.1em}
  /* "Coach Lee Edition" spilled out of its card header at 320px: the pill
     drops under the wordmark when the row runs out of room. */
  .bcard-top{flex-wrap:wrap;row-gap:8px}
}

/* Short landscape phones (e.g. 844×390): the sticky nav took a fifth of the
   screen and the 560px hero floor pushed every CTA two screens down. */
@media(max-height:500px) and (orientation:landscape) and (max-width:1179px){
  .nav-in{padding-top:6px;padding-bottom:6px}
  .drawer{max-height:calc(100vh - 62px)}
  @supports (height:100dvh){.drawer{max-height:calc(100dvh - 62px)}}
  :root{--anchor-offset:78px}
  .hero,.hero.compact,.hero.hero-wh,.hero:not(.compact){min-height:0}
  .hero-in{padding-top:32px;padding-bottom:40px}
  .hero:not(.compact) .hero-in{padding-bottom:88px}
  .hero-big.hero-stack{font-size:40px}
  .hero.compact .hero-big{font-size:38px}
}
@media(max-width:1179px){.foot ul a{min-width:44px}}
@media(max-width:1023px){
  .foot .safe,.foot .legal-illus,.band-note,.sports-note{font-size:16px}
  /* Tablets too: the 9.5–10px labels up to 11px. */
  .bcard-ed,.bcard-cell span,.bcard-bandlabel,.hallmark b,.hallmark span,
  .ncard h3 em,.illus{font-size:11px}
  .callout span{font-size:11px;letter-spacing:.1em}
}
/* Work With Us on small phones: tighter hero rhythm so Apply Now clears the
   fold at 360×640. */
@media(max-width:480px){
  .hero.compact.hero-wh .hero-in{padding-top:28px;padding-bottom:40px}
  .hero-wh .wh-lead{margin-top:12px}
  .hero-wh .wh-logos{margin-top:14px}
  .hero-wh .wh-cta{margin-top:18px}
}
@media(max-width:480px){
  .hero-wh .wh-lead{line-height:1.6}
  .hero-wh .wh-logos li{padding:8px 2px 7px}
}
/* 28ch is measured on the font's "0", so the swap fallback got a different
   measure; 15.4em is the same 308px at 20px with Rajdhani loaded. */
@media(max-width:1179px){.hero-beyond-head{max-width:15.4em}}
/* The 16px lede cost slide 1 a line at 360px; take it back from the gap under
   the lede so both CTAs stay above the 360×640 fold. */
@media(max-width:480px){.hslide:first-child .hero-lede{margin-bottom:18px}}

/* ── a11y contrast (2026-09-30) ──────────────────────────────────────────
   Smallest shifts that reach 4.5:1, same hue. "AI Assessed" on the Coach Lee
   card measured 4.22:1 (#8a8573 on the tinted #18271c hallmark strip); 4%
   toward white = 4.52 / 4.82 / 4.83 on Lee / House / Guest. The Path 02
   eyebrow sat on --panel-2 at 4.41:1; 2% darker = 4.55:1. */
.hallmark span{color:#8f8a79}
.path-coach-head .eyebrow{color:#93540a}

/* ── length pass (2026-09-30) ────────────────────────────────────────────
   Site-length proposals (~/Downloads/testsunday_condense/site_length/
   SITE_LENGTH.md). Section cuts/merges are in the HTML; these are the
   layout pieces. */
/* Sub-heads inside a merged slab (coaches: The role / Requirements). */
.sub-h{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-text);margin:0 0 6px}
.slab-body .sub-h:not(:first-child){margin-top:34px}
/* Buttons that close a merged slab. */
.aud-cta,.bands-cta{margin-top:28px}
/* Who It's For: four jump-link chips replace the repeated audience tiles. */
.aud-chips{background:var(--panel);border-bottom:1px solid var(--hair)}
.aud-chips-in{max-width:var(--maxw);margin:0 auto;padding:18px var(--gutter);display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px}
.aud-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--hair);
  border-radius:999px;background:var(--base);font-family:var(--display);font-weight:700;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text)}
.aud-chips a:hover{border-color:var(--accent-text)}
@media(max-width:699px){
  /* Home Coach Editions: a swipe row of the same three cards on phones. */
  .cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));
    padding:4px var(--gutter) 14px;scroll-padding:0 var(--gutter);scrollbar-width:thin}
  .cards .bcard{flex:0 0 84%;scroll-snap-align:start}
  .cards .bcard:hover{transform:none}
  /* The centred slab's 1fr track would grow to the scroller's content width. */
  .slab.centred .slab-in{grid-template-columns:minmax(0,1fr)}
  .slab.centred .slab-body{width:100%;min-width:0}
  /* Home audience tiles: compact 2×2. */
  .tiles{grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
  .tile{min-height:0;padding:18px 14px}
  .tile b{font-size:11px;letter-spacing:.16em;margin-bottom:10px}
  .tile .h{font-size:16px;line-height:1.18}
  .tile .s{font-size:13px;margin-top:8px}
  /* How It Works ladder: one compact row per band; tap still opens the panel. */
  .ladder{gap:8px;margin-top:28px}
  .band{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:14px 16px}
  .band-chip{order:1}
  .band-step{order:2;margin-left:auto}
  .band-means{order:3;flex-basis:100%;line-height:1.55}
  .aud-chips-in{gap:8px;padding:14px var(--gutter)}
  .aud-chips a{padding:0 12px;font-size:11.5px;letter-spacing:.14em}
}
@media(max-width:619px){
  /* Footer on phones: links in two columns; the five addresses live on the
     Contact page (linked under Company), so their column is dropped here. */
  .foot-cols{grid-template-columns:1fr 1fr;row-gap:28px;column-gap:20px}
  .foot-cols>div:last-child{display:none}
  .foot h2{margin-bottom:8px}
  .foot .safe{margin-top:32px;padding-top:24px}
  .foot .legal-illus{margin-top:12px}
  .foot .legal{margin-top:24px;gap:6px}
}
@media(max-width:979px){
  /* How It Works step list: the phone cut-out drops out once the row stacks. */
  #process .frow-media{display:none}
  /* Coaches intro: text only once the row stacks. */
  .coach-intro .slab-fig{display:none}
  .coach-intro .slab-in{gap:0}
}
@media(max-width:699px){
  /* Coaches Path 01: the six founding-creator benefits as one tight list. */
  .benefit-list li{padding:10px 0;gap:10px}
  .path-callout{margin-top:26px}
  .path-benefits{margin-top:26px}
}
/* Beyond Football on phones/tablets: three tiles per row (layout only; every
   tile, label and the #beyond anchor unchanged). */
@media(max-width:899px){
  .sports-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .sport{border-radius:10px}
  .sport span{font-size:12px;letter-spacing:.05em;padding:0 6px 10px}
}
/* Extra cuts (2026-10-02): footer small print back to 14px on phones; the
   creator cut-out image drops out on phones. */
@media(max-width:619px){.foot .safe,.foot .legal-illus{font-size:14px}}
@media(max-width:699px){.path-create .path-top .frow-media{display:none}}

/* ── cookie consent bar (GA4) — see the consent block in site.js ──────── */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--base);
  color:var(--text);border-top:2px solid var(--accent);box-shadow:0 -10px 30px -12px rgba(0,0,0,.6);
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom))}
.cookie-bar[hidden]{display:none}
.cookie-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:10px}
.cookie-in p{font-size:13px;line-height:1.5;color:var(--muted)}
.cookie-in p a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.cookie-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Accept and Reject are deliberately identical: same size, same treatment. */
.cookie-btn{min-height:40px;padding:8px 18px;background:transparent;color:var(--text);
  border-color:var(--accent)}
.cookie-btn:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
@media(min-width:760px){
  .cookie-in{flex-direction:row;align-items:center;justify-content:space-between;gap:28px}
  .cookie-in p{font-size:14px}
  .cookie-btns{grid-template-columns:auto auto;flex-shrink:0}
  .cookie-btn{min-width:130px}
}
/* Footer "Cookie settings" — a button styled as the Privacy/Terms links. */
.foot .legal .cookie-link{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.foot .legal .cookie-link:hover{color:var(--accent-text)}
.cookie-bar.cookie-measure{visibility:hidden}

/* a11y (axe link-in-text-block): inline links in running text are underlined, not colour-only. */
.consent-note a,.safeblock p a,.prose a{text-decoration:underline;text-underline-offset:2px}
/* a11y (axe scrollable-region-focusable): the Coach Editions scroller takes keyboard focus. */
.cards:focus-visible{outline:2px solid var(--accent);outline-offset:4px}