/* =========================================================
   THE FOOTBALL LAB — design system
   Palette sampled from the brand artwork (navy #02071A, gold #F0A818)
   ========================================================= */
:root{
  --navy-950:#02071A;
  --navy-900:#04102A;
  --navy-850:#061633;
  --navy-800:#0A1F44;
  --navy-700:#102C5C;
  --navy-600:#17407F;

  --gold:#F0A818;
  --gold-hi:#FFC24D;
  --gold-deep:#C9860A;

  --cream:#F6F1E6;
  --white:#FFFFFF;
  --muted:#9FB0CE;
  --muted-dim:#6C7F9F;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);

  --sky:#3E9BD6;

  --font-display:'Anton', Impact, sans-serif;
  --font-script:'Caveat', cursive;
  --font-body:'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;

  --wrap:1280px;
  /* Roomy enough for the crest to be read as a crest — the shield carries fine
     lettering that turns to mush much below this. */
  --nav-h:100px;

  --e-out:cubic-bezier(.16,.84,.44,1);
  --e-soft:cubic-bezier(.25,.46,.45,.94);
  --e-back:cubic-bezier(.34,1.56,.64,1);

  --r-sm:10px;
  --r-md:18px;
  --r-lg:26px;
  --r-pill:999px;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--navy-950);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

h1,h2,h3,h4{ margin:0 0 .5em; font-weight:400; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 40px; position:relative; }
.center{ text-align:center; }
.mt-xl{ margin-top:64px; }
.is-hidden{ display:none !important; }

/* ---------- Type scale ---------- */
.h2{
  font-family:var(--font-display);
  font-size:clamp(34px,5.4vw,74px);
  line-height:.98;
  letter-spacing:.005em;
  text-transform:uppercase;
  transform:skewX(-6deg);
  transform-origin:left bottom;
}
.h2 em{
  display:block;
  font-style:normal;
  color:var(--gold);
}
.h2.center{ transform:skewX(-6deg); transform-origin:center; }

.eyebrow{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 18px;
}
.eyebrow.center{ text-align:center; }

.lead{ font-size:clamp(17px,1.35vw,21px); color:#D8E2F2; }
p{ margin:0 0 1.1em; color:var(--muted); }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--cream);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 30px;
  border-radius:var(--r-pill);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  background:var(--btn-bg);
  color:var(--btn-fg);
  overflow:hidden;
  isolation:isolate;
  transition:transform .45s var(--e-out), box-shadow .45s var(--e-out), color .3s;
  will-change:transform;
}
.btn::after{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:var(--gold-hi);
  transform:translateY(101%);
  transition:transform .5s var(--e-out);
}
.btn:hover::after{ transform:translateY(0); }
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px) scale(.985); }

.btn--gold{ --btn-bg:var(--gold); --btn-fg:var(--navy-950); box-shadow:0 10px 30px -12px rgba(240,168,24,.75); }
.btn--gold:hover{ color:var(--navy-950); box-shadow:0 18px 42px -14px rgba(255,194,77,.9); }

.btn--ghost{ --btn-fg:var(--cream); box-shadow:inset 0 0 0 1.5px var(--line-strong); }
.btn--ghost:hover{ color:var(--navy-950); }

.btn--sm{ padding:11px 22px; font-size:13px; }
.btn--lg{ padding:17px 38px; font-size:15px; }
.btn--xl{ padding:21px 52px; font-size:16.5px; }

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; z-index:2000;
  background:var(--navy-950);
  display:grid; place-items:center;
  transition:opacity .8s var(--e-soft), visibility .8s;
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__inner{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.loader__logo{ width:132px; animation:bob 2.2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-12px) rotate(2deg);} }
.loader__bar{ width:190px; height:3px; background:rgba(255,255,255,.14); border-radius:3px; overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0%; background:var(--gold); transition:width .35s var(--e-soft); }
.loader__pct{ margin:0; font-family:var(--font-display); font-size:14px; letter-spacing:.2em; color:var(--muted); }

/* ---------- 3D ball canvas ---------- */
#ballCanvas{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:40;
  pointer-events:none;
}
#ballCanvas.is-interactive{ pointer-events:auto; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:0 40px;
  transition:background .5s var(--e-soft), backdrop-filter .5s, transform .5s var(--e-out), box-shadow .5s;
}
.nav.is-stuck{
  background:rgba(2,7,26,.78);
  backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 1px 0 var(--line);
}
.nav.is-hidden{ transform:translateY(-105%); }
/* The shield already contains the "THE FOOTBALL LAB" lettering, so the brand
   is the mark alone — no CSS wordmark beside it, which would read twice. */
.nav__brand{ display:flex; align-items:center; }
.nav__brand img{
  height:78px; width:auto;
  transition:transform .5s var(--e-back), filter .4s;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.45));
}
.nav__brand:hover img{ transform:scale(1.06) rotate(-3deg); filter:drop-shadow(0 8px 20px rgba(240,168,24,.4)); }
.nav__links{ display:flex; align-items:center; gap:34px; margin-left:auto; }
.nav__links a{
  position:relative;
  font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#CBD8EC;
  transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-7px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--e-out);
}
.nav__links a:hover{ color:var(--white); }
.nav__links a:hover::after,
.nav__links a.is-current::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-current{ color:var(--gold); }

/* Account access reads as an action, not another page anchor, so it gets a
   pill outline instead of the plain-text underline treatment above. */
.nav__links a.nav__signin{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 20px;
  border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);
  transition:background .3s, color .3s, box-shadow .3s, transform .35s var(--e-out);
}
.nav__links a.nav__signin::after{ content:none; }
.nav__links a.nav__signin:hover{
  color:var(--white); background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);
  transform:translateY(-2px);
}
.nav__burger{ display:none; width:40px; height:40px; flex-direction:column; justify-content:center; gap:5px; }
.nav__burger span{ display:block; height:2.5px; background:var(--cream); border-radius:2px; transition:transform .4s var(--e-out), opacity .3s; }
.nav__burger.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.scroll-bar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));
  z-index:101;
}

/* ---------- Reveal ---------- */
/* Scoped to .reveal-on, which main.js adds only when the page is visible and
   motion is wanted — same reasoning as the hero intro. Without the class the
   content is simply visible, so a tab opened in the background (where CSS
   transitions are parked) can never leave whole sections stuck at opacity:0. */
.reveal-on [data-reveal]{ opacity:0; transform:translateY(34px); }
.reveal-on [data-reveal].is-in{ opacity:1; transform:none; transition:opacity .95s var(--e-out), transform .95s var(--e-out); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  padding:calc(var(--nav-h) + 20px) 0 40px;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(2,7,26,.94) 0%, rgba(2,7,26,.80) 34%, rgba(2,7,26,.22) 62%, rgba(2,7,26,.55) 100%),
    linear-gradient(to top, rgba(2,7,26,.92) 0%, transparent 42%);
}
.hero__content{ position:relative; z-index:3; width:100%; max-width:var(--wrap); margin:0 auto; padding:0 40px; }

.hero__slides{ position:relative; min-height:clamp(240px,30vw,360px); }
.hero__slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transform:translateY(26px);
  /* Outgoing slide clears out quickly; the incoming one waits for it. Equal
     crossfades leave two huge headlines stacked at 50% opacity, which reads as
     a rendering fault rather than a transition. */
  transition:opacity .34s var(--e-soft), transform .34s var(--e-soft), visibility .34s;
}
.hero__slide.is-active{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .62s var(--e-out) .22s, transform .72s var(--e-out) .22s, visibility 0s;
}

.hero__eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin:0 0 18px;
}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(46px,8.6vw,124px);
  line-height:.9;
  text-transform:uppercase;
  transform:skewX(-7deg);
  transform-origin:left bottom;
  margin:0 0 20px;
  text-shadow:0 12px 44px rgba(0,0,0,.5);
}
.hero__title span{ display:block; color:var(--white); }
.hero__title em{ display:block; font-style:normal; color:var(--gold); }
.hero__script{
  font-family:var(--font-script);
  font-size:clamp(24px,3vw,40px);
  line-height:1.12;
  color:var(--cream);
  margin:0;
  transform:rotate(-2deg);
  transform-origin:left;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

/* ---- Hero intro ----
   The hidden ("armed") state is applied only when .will-intro is present, and
   main.js adds that class solely when the page is actually visible and motion
   is wanted. So the default — and the state for a tab opened in the background
   or with reduced-motion on — is simply *visible*. Nothing can be stranded at
   opacity:0 waiting for an animation that never runs. */
.hero.will-intro .hero__eyebrow,
.hero.will-intro .hero__title span,
.hero.will-intro .hero__title em,
.hero.will-intro .hero__script,
.hero.will-intro .hero__actions .btn,
.hero.will-intro .hero__pillars li{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .85s var(--e-out), transform .85s var(--e-out);
}
.hero.will-intro.is-ready .hero__eyebrow,
.hero.will-intro.is-ready .hero__title span,
.hero.will-intro.is-ready .hero__title em,
.hero.will-intro.is-ready .hero__script,
.hero.will-intro.is-ready .hero__actions .btn,
.hero.will-intro.is-ready .hero__pillars li{
  opacity:1;
  transform:none;
}
.hero.will-intro.is-ready .hero__eyebrow{ transition-delay:.05s; }
.hero.will-intro.is-ready .hero__title span{ transition-delay:.14s; }
.hero.will-intro.is-ready .hero__title em{ transition-delay:.23s; }
.hero.will-intro.is-ready .hero__script{ transition-delay:.32s; }
.hero.will-intro.is-ready .hero__actions .btn:nth-child(1){ transition-delay:.44s; }
.hero.will-intro.is-ready .hero__actions .btn:nth-child(2){ transition-delay:.52s; }
.hero.will-intro.is-ready .hero__pillars li:nth-child(1){ transition-delay:.60s; }
.hero.will-intro.is-ready .hero__pillars li:nth-child(2){ transition-delay:.66s; }
.hero.will-intro.is-ready .hero__pillars li:nth-child(3){ transition-delay:.72s; }
.hero.will-intro.is-ready .hero__pillars li:nth-child(4){ transition-delay:.78s; }

/* Rotating to another slide shouldn't replay the staggered entrance delays. */
.hero.will-intro.is-ready .hero__slide:not(.is-active) .hero__eyebrow,
.hero.will-intro.is-ready .hero__slide:not(.is-active) .hero__title span,
.hero.will-intro.is-ready .hero__slide:not(.is-active) .hero__title em,
.hero.will-intro.is-ready .hero__slide:not(.is-active) .hero__script{ transition-delay:0s; }

.hero__pillars{
  display:flex; flex-wrap:wrap; gap:0;
  list-style:none; margin:44px 0 0; padding:0;
  max-width:640px;
}
.hero__pillars li{
  flex:1 1 140px;
  padding:0 22px;
  border-left:1px solid var(--line-strong);
}
.hero__pillars li:first-child{ padding-left:0; border-left:none; }
.hero__pillars strong{
  display:block;
  font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:3px;
}
.hero__pillars span{ font-size:13.5px; color:var(--muted); line-height:1.4; }

.hero__dots{
  position:absolute; right:38px; top:50%; transform:translateY(-50%);
  z-index:5; display:flex; flex-direction:column; gap:14px;
}
.hero__dot{
  width:11px; height:11px; border-radius:50%;
  background:transparent; box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.55);
  transition:all .4s var(--e-out);
}
.hero__dot.is-active{ background:var(--gold); box-shadow:inset 0 0 0 1.6px var(--gold); transform:scale(1.25); }

.hero__scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:5; display:flex; flex-direction:column; align-items:center; gap:9px;
}
.hero__scroll-cue span{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.hero__scroll-cue i{ display:block; width:1px; height:40px; background:var(--line-strong); position:relative; overflow:hidden; }
.hero__scroll-cue i::after{
  content:''; position:absolute; left:0; width:100%; height:50%; background:var(--gold);
  animation:cue 1.9s ease-in-out infinite;
}
@keyframes cue{ 0%{ top:-55%; } 65%{ top:105%; } 100%{ top:105%; } }

/* =========================================================
   TICKER
   ========================================================= */
.ticker-clip{
  overflow:hidden;
  position:relative;
  z-index:5;
  margin:-16px 0 60px;
}
.ticker{
  background:var(--gold);
  color:var(--navy-950);
  padding:15px 0;
  overflow:hidden;
  position:relative;
  transform:rotate(-1.1deg) scaleX(1.04);
}
.ticker__track{ display:flex; gap:44px; width:max-content; animation:slide 34s linear infinite; }
.ticker__track span{
  font-family:var(--font-display); font-size:20px; letter-spacing:.05em; text-transform:uppercase;
  display:flex; align-items:center; gap:44px; white-space:nowrap;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ position:relative; padding:clamp(80px,11vw,150px) 0; }

.about{ background:linear-gradient(180deg,var(--navy-950),var(--navy-900)); }
.about__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,90px); align-items:center; }
.about__copy .h2{ margin-bottom:26px; }
.about__cta{ margin-top:30px; }
.about__stats{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.stat{
  background:linear-gradient(160deg,rgba(23,64,127,.30),rgba(6,22,51,.55));
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:26px 22px;
  transition:transform .5s var(--e-out), border-color .4s, background .4s;
}
.stat:hover{ transform:translateY(-6px); border-color:rgba(240,168,24,.5); }
.stat strong{ display:block; font-family:var(--font-display); font-size:clamp(38px,4.4vw,56px); color:var(--gold); line-height:1; }
.stat span{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-dim); }

/* Pillars */
.pillars{ background:var(--navy-900); }
.pillars .h2{ margin:0 auto 60px; max-width:900px; }
.pillars__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pcard{
  position:relative;
  background:linear-gradient(165deg,rgba(23,64,127,.26),rgba(4,16,42,.7));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:34px 26px 30px;
  overflow:hidden;
  transition:transform .55s var(--e-out), border-color .45s, box-shadow .55s;
}
.pcard::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(240,168,24,.16), transparent 62%);
  opacity:0; transition:opacity .5s;
}
.pcard:hover{ transform:translateY(-10px); border-color:rgba(240,168,24,.5); box-shadow:0 30px 60px -30px rgba(0,0,0,.9); }
.pcard:hover::before{ opacity:1; }
.pcard__num{
  font-family:var(--font-display); font-size:52px; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(240,168,24,.42);
  margin-bottom:16px;
}
.pcard h3{ font-family:var(--font-display); font-size:26px; text-transform:uppercase; color:var(--white); margin:0 0 4px; letter-spacing:.02em; }
.pcard__tag{ font-family:var(--font-script); font-size:20px; color:var(--gold); margin:0 0 14px; }
.pcard__body{ font-size:15px; margin:0; }

/* =========================================================
   GAME
   ========================================================= */
.challenge{ background:linear-gradient(180deg,var(--navy-900),var(--navy-950)); }
.challenge .h2{ margin:0 auto 20px; }
.challenge__intro{ max-width:620px; margin:0 auto 48px; }

.game{
  max-width:940px; margin:0 auto;
  background:linear-gradient(170deg,rgba(23,64,127,.30),rgba(4,16,42,.86));
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.95);
}
.game__hud{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line);
  background:rgba(2,7,26,.55);
}
.game__stat{ padding:18px 10px; text-align:center; }
.game__stat--mid{ border-left:1px solid var(--line); border-right:1px solid var(--line); }
.game__stat span{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:4px; }
.game__stat strong{ font-family:var(--font-display); font-size:32px; color:var(--gold); line-height:1; }

.game__stage{
  position:relative;
  height:min(58vh,470px);
  background:
    radial-gradient(90% 70% at 50% 105%, rgba(62,155,214,.16), transparent 60%),
    linear-gradient(180deg, rgba(2,7,26,.2), rgba(2,7,26,.72));
  overflow:hidden;
}
.game__ground{
  position:absolute; left:0; right:0; bottom:0; height:74px;
  background:linear-gradient(180deg, rgba(240,168,24,.16), rgba(240,168,24,0));
  border-top:2px solid rgba(240,168,24,.42);
}
.game__hint{
  position:absolute; left:50%; bottom:96px; transform:translateX(-50%);
  font-family:var(--font-script); font-size:23px; color:var(--gold);
  margin:0; opacity:0; transition:opacity .4s; pointer-events:none;
}
.game__hint.is-on{ opacity:1; animation:hintPulse 1.5s ease-in-out infinite; }
@keyframes hintPulse{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(-8px);} }

.game__overlay{
  position:absolute; inset:0; z-index:6;
  display:grid; place-items:center;
  background:rgba(2,7,26,.72);
  backdrop-filter:blur(6px);
  transition:opacity .45s var(--e-out), visibility .45s;
}
.game__overlay.is-off{ opacity:0; visibility:hidden; pointer-events:none; }
.game__panel{ text-align:center; padding:24px; max-width:420px; }
.game__panel h3{ font-family:var(--font-display); font-size:clamp(30px,4vw,46px); text-transform:uppercase; color:var(--white); margin:0 0 10px; }
.game__panel p{ margin:0 0 22px; }
.game__rank{
  font-family:var(--font-script); font-size:26px; color:var(--gold); margin-bottom:22px;
}
.game__over-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.game__pop{
  position:absolute; z-index:5; pointer-events:none;
  font-family:var(--font-display); font-size:26px; color:var(--gold);
  text-shadow:0 4px 18px rgba(0,0,0,.6);
}

/* =========================================================
   COACH
   ========================================================= */
.coach{ background:var(--navy-950); }
.coach__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,86px); align-items:center; margin-top:40px; }
.coach__creds{ list-style:none; padding:0; margin:26px 0 32px; }
.coach__creds li{
  position:relative; padding-left:30px; margin-bottom:13px; color:#D8E2F2; font-size:16px;
}
.coach__creds li::before{
  content:''; position:absolute; left:0; top:9px;
  width:13px; height:13px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 4px rgba(240,168,24,.18);
}
.coach__creds strong{ color:var(--white); }

/* width:100% is load-bearing, not decorative. The only in-flow content here is
   .coach__slides, which is sized purely by aspect-ratio (its slides are all
   absolutely positioned). That leaves the grid item's width indefinite, so it
   resolves from content and collapses — 196px inside a 335px column on mobile.
   Stating the width explicitly makes it fill its cell. */
.coach__gallery{ position:relative; width:100%; }
.coach__slides{
  position:relative;
  /* Matches the artwork's real 900x1231 ratio. At 4/5 the images were ~9%
     taller than the box, so object-fit:cover shaved the top and bottom off —
     taking the logo with one and "PLAY. THINK. GROW." with the other. */
  aspect-ratio:900/1231;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:0 44px 80px -44px rgba(0,0,0,.95);
  background:var(--navy-900);
}
.coach__slide{
  position:absolute; inset:0; margin:0;
  opacity:0; transform:scale(1.05);
  transition:opacity .8s var(--e-out), transform .9s var(--e-out);
}
.coach__slide.is-active{ opacity:1; transform:none; }
.coach__slide img{ width:100%; height:100%; object-fit:cover; }
.coach__nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:22px; }
.coach__arrow{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 1.5px var(--line-strong);
  transition:all .35s var(--e-out);
}
.coach__arrow:hover{ background:var(--gold); color:var(--navy-950); transform:scale(1.08); }
.coach__dots{ display:flex; gap:9px; }
.coach__dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.26); transition:all .35s; }
.coach__dot.is-active{ background:var(--gold); width:26px; border-radius:9px; }

/* =========================================================
   LOCATIONS
   ========================================================= */
.locations{ background:linear-gradient(180deg,var(--navy-950),var(--navy-900)); }

/* Explicit gap under the heading — .h2 alone only carries the generic 0.5em
   reset, which is too tight once the heading's line-height (0.98) and skew
   are factored in. Every other section that follows its .h2 directly with
   body content sets its own override for the same reason (see About,
   Pillars, Challenge above) — this one was missing it, which is very likely
   what read as "overlapping" on narrower screens where that 0.5em shrinks
   along with the heading. */
.locations .h2{ margin-bottom:24px; }
.loc__intro{ max-width:640px; margin:0 0 44px; }

/* Three bordered fact cards in a row — a real grid, not a bulleted list with
   an absolutely-positioned dot, so there is no way for one line to encroach
   on another regardless of viewport width. Deliberately echoes the .stat
   cards in the About section just above for visual consistency. */
.loc__facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0 0 44px; }
.loc__fact{
  background:linear-gradient(160deg,rgba(23,64,127,.28),rgba(4,16,42,.72));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 26px;
  transition:transform .5s var(--e-out), border-color .45s;
}
.loc__fact:hover{ transform:translateY(-6px); border-color:rgba(240,168,24,.45); }
.loc__fact strong{
  display:block; font-family:var(--font-display); font-size:20px;
  text-transform:uppercase; letter-spacing:.01em; color:var(--white);
  margin:0 0 10px; line-height:1.15;
}
.loc__fact span{ display:block; font-size:14.5px; line-height:1.55; color:var(--muted); }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ background:var(--navy-900); }
.faq__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,86px); align-items:start; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  display:flex; align-items:flex-start; gap:16px;
  padding:24px 40px 24px 0;
  position:relative;
  cursor:pointer; list-style:none;
  font-family:var(--font-display); font-size:clamp(17px,1.6vw,22px);
  text-transform:uppercase; color:var(--white); letter-spacing:.01em;
  transition:color .3s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--gold); }
.faq__n{ color:var(--gold); font-size:13px; padding-top:4px; letter-spacing:.1em; }
.faq__item summary::after{
  content:''; position:absolute; right:6px; top:31px;
  width:13px; height:13px;
  border-right:2.5px solid var(--gold); border-bottom:2.5px solid var(--gold);
  transform:rotate(45deg); transition:transform .4s var(--e-out);
}
.faq__item[open] summary::after{ transform:rotate(-135deg); }
.faq__a{ padding:0 40px 26px 44px; }
.faq__a p{ margin:0; }

/* =========================================================
   FINAL + FOOTER
   ========================================================= */
.final{
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(240,168,24,.14), transparent 60%),
    var(--navy-950);
}
.final .lead{ max-width:600px; margin:0 auto 36px; }

/* ---------- Lion Badge Ladder ---------- */
.ladder{ margin-top:clamp(56px,7vw,96px); }
.ladder__row{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(8px,1.4vw,22px);
  align-items:end;
  position:relative;
}
/* The progression track the badges sit on. */
.ladder__row::before{
  content:'';
  position:absolute; left:4%; right:4%; bottom:26px;
  height:2px;
  background:linear-gradient(90deg,
    rgba(240,168,24,.12) 0%,
    rgba(240,168,24,.55) 22%,
    rgba(240,168,24,.55) 78%,
    rgba(240,168,24,.12) 100%);
  z-index:0;
}
.ladder__step{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:transform .55s var(--e-out);
}
.ladder__step img{
  width:100%; height:auto;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));
  transition:transform .55s var(--e-back), filter .45s;
}
/* Each rung sits a little higher than the last — the ladder climbs. */
.ladder__step:nth-child(1){ transform:translateY(0); }
.ladder__step:nth-child(2){ transform:translateY(-10px); }
.ladder__step:nth-child(3){ transform:translateY(-20px); }
.ladder__step:nth-child(4){ transform:translateY(-30px); }
.ladder__step:nth-child(5){ transform:translateY(-40px); }
.ladder__step:nth-child(6){ transform:translateY(-52px); }
.ladder__step:hover img{ transform:scale(1.1) rotate(-2deg); filter:drop-shadow(0 22px 34px rgba(240,168,24,.4)); }
.ladder__n{
  font-family:var(--font-display); font-size:12px; letter-spacing:.18em;
  color:var(--gold); opacity:.55;
  order:2;
}
.ladder__step:hover .ladder__n{ opacity:1; }

@media (max-width:900px){
  /* Keep it a single line as asked, but let it scroll on narrow screens so the
     badges stay legible instead of shrinking to thumbnails. */
  .ladder .wrap{ padding-right:0; }
  .ladder__row{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:0 22px 12px 0;
    scrollbar-width:none;
  }
  .ladder__row::-webkit-scrollbar{ display:none; }
  .ladder__row::before{ display:none; }
  .ladder__step{ flex:0 0 42vw; max-width:210px; scroll-snap-align:center; transform:none !important; }
}
@media (max-width:560px){
  .ladder__step{ flex-basis:56vw; }
}

.footer{ background:var(--navy-950); border-top:1px solid var(--line); padding:70px 0 30px; position:relative; z-index:45; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer__logo{ width:110px; margin-bottom:16px; }
.footer__tag{ font-family:var(--font-script); font-size:22px; color:var(--gold); margin:0; }
.footer h4{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-dim); margin:0 0 16px; font-weight:700; }
.footer__grid a{ display:block; color:#CBD8EC; font-size:15px; margin-bottom:10px; transition:color .3s, transform .3s; }
.footer__grid a:hover{ color:var(--gold); transform:translateX(4px); }
.footer__cta{ margin-top:8px; }
.footer__base{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:54px; padding-top:26px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted-dim);
}

/* =========================================================
   MODAL / FORM
   ========================================================= */
.modal{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--e-out), visibility .45s;
}
.modal.is-open{ opacity:1; visibility:visible; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(1,4,14,.82); backdrop-filter:blur(10px); }
.modal__card{
  position:relative;
  width:min(760px,100%);
  max-height:90vh; overflow-y:auto;
  background:linear-gradient(170deg,var(--navy-800),var(--navy-950));
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  padding:clamp(28px,4vw,52px);
  transform:translateY(30px) scale(.97);
  transition:transform .55s var(--e-out);
  box-shadow:0 60px 120px -50px rgba(0,0,0,1);
}
.modal.is-open .modal__card{ transform:none; }
.modal__close{
  position:absolute; top:18px; right:18px;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 1.5px var(--line-strong);
  transition:all .35s var(--e-out);
}
.modal__close:hover{ background:var(--gold); color:var(--navy-950); transform:rotate(90deg); }
.modal__title{
  font-family:var(--font-display); font-size:clamp(28px,3.6vw,42px);
  line-height:.98; text-transform:uppercase; transform:skewX(-6deg); transform-origin:left;
  margin:0 0 12px;
}
.modal__title em{ display:block; font-style:normal; color:var(--gold); }
.modal__sub{ margin-bottom:28px; }

.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:block; margin-bottom:16px; }
.field > span{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.field > span i{ color:var(--gold); font-style:normal; }
.field input,.field select,.field textarea{
  width:100%;
  padding:14px 16px;
  background:rgba(2,7,26,.6);
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);
  color:var(--cream);
  font-family:inherit; font-size:15.5px;
  outline:none;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.field textarea{ resize:vertical; min-height:88px; }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}
.field select option{ background:var(--navy-800); color:var(--cream); }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold); background:rgba(2,7,26,.9); box-shadow:0 0 0 4px rgba(240,168,24,.14);
}
.field.has-error input,.field.has-error select{ border-color:#FF6B6B; }
.field__err{ display:block; font-style:normal; font-size:12.5px; color:#FF8B8B; margin-top:6px; min-height:1em; }
.form__submit{ width:100%; margin-top:10px; }
.form__submit.is-busy{ opacity:.7; pointer-events:none; }
.form__note{ font-size:12.5px; text-align:center; margin:14px 0 0; color:var(--muted-dim); }
.form__error{
  font-size:13px; text-align:center; margin:14px 0 0;
  color:#FF8B8B; background:rgba(255,107,107,.1);
  border:1px solid rgba(255,107,107,.3); border-radius:var(--r-sm);
  padding:10px 14px;
}

/* Honeypot — off-screen rather than display:none, since a handful of casual
   bots skip display:none fields but rarely check computed position. */
.field--hp{
  position:absolute; left:-9999px; top:-9999px;
  width:1px; height:1px; overflow:hidden;
}

.modal__success{ text-align:center; padding:20px 0; }
.modal__tick{
  width:78px; height:78px; margin:0 auto 22px;
  border-radius:50%; display:grid; place-items:center;
  background:rgba(240,168,24,.16); color:var(--gold);
  animation:pop .6s var(--e-back);
}
@keyframes pop{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }
.modal__success h3{ font-family:var(--font-display); font-size:34px; text-transform:uppercase; color:var(--white); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* ---- Laptop / small desktop ---- */
@media (max-width:1200px){
  :root{ --wrap:1080px; }
  .wrap,.hero__content{ padding:0 32px; }
  .nav{ padding:0 28px; gap:16px; }
  .nav__links{ gap:24px; }
  .nav__links a{ font-size:13px; }
}

/* ---- Tablet ---- */
@media (max-width:1100px){
  .pillars__grid{ grid-template-columns:1fr 1fr; }
  .about__grid,.coach__grid,.faq__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .coach__gallery{ max-width:440px; margin:0 auto; }
  .about__stats{ grid-template-columns:repeat(4,1fr); }
  /* The 4:3 hero puts the ball lower-centre, so keep the copy in the upper
     band and let the photo breathe underneath it. */
  .hero{ align-items:flex-start; }
  .hero__content{ padding-top:clamp(12px,4vh,48px); }
  .hero__slides{ min-height:clamp(220px,26vw,300px); }
  .hero__pillars{ max-width:100%; }
}

@media (max-width:900px){
  .about__stats{ grid-template-columns:repeat(2,1fr); }
}

/* ---- Collapse the nav well before phone widths ----
   Five inline links plus a two-word CTA stop fitting around ~1024px: the links
   start wrapping onto two lines and collide with the wordmark. Switch to the
   burger here rather than at the phone breakpoint. */
@media (max-width:1024px){
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 0 0;
    flex-direction:column; justify-content:center; align-items:center; gap:26px;
    background:rgba(2,7,26,.97);
    backdrop-filter:blur(20px);
    transform:translateX(100%);
    transition:transform .55s var(--e-out);
    margin:0;
  }
  .nav__links.is-open{ transform:none; }
  .nav__links a{ font-size:22px; }
  .nav__links a::after{ bottom:-9px; }
  .nav__links a.nav__signin{ font-size:16px; padding:14px 32px; margin-top:4px; }
}

/* ---- Mobile ---- */
@media (max-width:760px){
  body{ font-size:16px; }
  :root{ --nav-h:78px; }
  .wrap,.hero__content{ padding:0 20px; }
  .nav{ padding:0 18px; }
  .nav__brand img{ height:58px; }

  /* Portrait hero art: subject sits centre-right, ball low-left. Copy goes in
     the top band, supporting bits pin to the bottom, ball zone stays clear. */
  .hero{
    align-items:stretch;
    min-height:100svh;
    padding:calc(var(--nav-h) + 14px) 0 26px;
  }
  .hero__content{
    display:flex; flex-direction:column; justify-content:space-between;
    padding-top:0;
  }
  /* The portrait crop puts a bright sunset right behind the headline band, so
     the top half needs real weight while the lion/ball stay readable below. */
  .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(2,7,26,.96) 0%,
        rgba(2,7,26,.88) 24%,
        rgba(2,7,26,.66) 42%,
        rgba(2,7,26,.34) 58%,
        rgba(2,7,26,.62) 84%,
        rgba(2,7,26,.96) 100%);
  }
  .hero__slides{ min-height:250px; flex:0 0 auto; }
  .hero__title{ font-size:clamp(40px,12.5vw,62px); }
  .hero__script{ font-size:clamp(21px,6.2vw,28px); }
  .hero__actions{ margin-top:22px; }
  .hero__actions .btn{ flex:1 1 100%; }
  .hero__pillars{ margin-top:22px; gap:0; }
  .hero__pillars li{
    flex:1 1 50%; padding:9px 12px;
    border-left:none; border-top:1px solid var(--line-strong);
  }
  .hero__pillars li:first-child{ padding-left:12px; }
  .hero__pillars strong{ font-size:11.5px; }
  .hero__pillars span{ font-size:12px; }
  .hero__dots{ right:12px; gap:10px; }
  .hero__dot{ width:9px; height:9px; }
  .hero__scroll-cue{ display:none; }

  .section{ padding:clamp(64px,13vw,96px) 0; }
  .about__stats{ gap:10px; }
  .stat{ padding:20px 16px; }
  .pillars__grid{ grid-template-columns:1fr; }
  .pcard{ padding:28px 22px 24px; }
  .loc__facts{ grid-template-columns:1fr; gap:14px; }
  .loc__fact{ padding:24px 22px; }
  .footer__grid{ grid-template-columns:1fr; gap:30px; }
  .footer__base{ flex-direction:column; gap:8px; }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .modal{ padding:14px; }
  .modal__card{ max-height:92svh; border-radius:20px; }

  .game__stage{ height:min(54svh,380px); }
  .game__stat strong{ font-size:24px; }
  .game__stat{ padding:14px 6px; }
  .game__panel h3{ font-size:clamp(26px,7vw,34px); }
  .game__over-actions .btn{ flex:1 1 100%; }

  .ticker-clip{ margin:-14px 0 40px; }
  .ticker__track span{ font-size:16px; gap:30px; }

  .faq__item summary{ padding:20px 34px 20px 0; gap:12px; }
  .faq__a{ padding:0 30px 22px 34px; }
  .coach__creds li{ font-size:15px; }
}

/* ---- Small phones ---- */
@media (max-width:430px){
  .hero__slides{ min-height:222px; }
  /* All four values stay — 2x2, tightened rather than truncated. */
  .hero__pillars{ margin-top:16px; }
  .hero__pillars li{ padding:7px 10px; }
  .hero__pillars strong{ font-size:10.5px; letter-spacing:.1em; }
  .hero__pillars span{ font-size:11px; line-height:1.3; }
  .hero__actions{ margin-top:18px; gap:10px; }
  .h2{ font-size:clamp(30px,9vw,40px); }
  .btn{ padding:13px 22px; font-size:13.5px; }
  .btn--lg,.btn--xl{ padding:16px 26px; font-size:14px; }
  .game__stage{ height:min(48svh,320px); }
}

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