/* ============================================================
   MADESTONE FOOTBALL ACADEMY
   Design system: black kit + green sash, striped turf, chalk lines
   ============================================================ */

:root{
  --pitch-deep:   #07271b;
  --pitch:        #0d4229;
  --turf:         #1f8a4d;
  --turf-bright:  #4cc078;
  --stripe-a:     #0f4d2f;
  --stripe-b:     #0c4028;
  --chalk:        #f3f8f1;
  --chalk-dim:    rgba(243,248,241,.62);
  --night:        #0b0d0c;
  --gold:         #e9c65a;

  --sash:     polygon(0 0, 100% 0, 100% calc(100% - 5.5vw), 0 100%);
  --sash-rev: polygon(0 5.5vw, 100% 0, 100% 100%, 0 100%);
  --sash-v:   5.5vw;

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body:    'Instrument Sans', system-ui, sans-serif;
  --font-util:    'Space Grotesk', monospace;

  --ease: cubic-bezier(.22,.8,.3,1);
  --stripes: repeating-linear-gradient(0deg,
      var(--stripe-a) 0 100px, var(--stripe-b) 100px 200px);
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth }

body{
  font-family:var(--font-body);
  font-size:1.06rem;
  line-height:1.65;
  color:var(--chalk);
  background:var(--pitch-deep);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* height:auto is required alongside the width/height attributes on every <img>.
   Without it the height attribute is used verbatim as a pixel height and
   overrides any CSS aspect-ratio. Rules that set an explicit height
   (.g-item img, .hero-media img) are more specific and still win. */
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

::selection{ background:var(--turf-bright); color:var(--night) }

::-webkit-scrollbar{ width:11px }
::-webkit-scrollbar-track{ background:var(--pitch-deep) }
::-webkit-scrollbar-thumb{ background:var(--turf); border:2px solid var(--pitch-deep) }
::-webkit-scrollbar-thumb:hover{ background:var(--turf-bright) }

:focus-visible{ outline:2px solid var(--turf-bright); outline-offset:3px }

/* grain overlay */
body::after{
  content:""; position:fixed; inset:0; z-index:99; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.container{ width:min(1180px, 92vw); margin-inline:auto }

section{ scroll-margin-top:86px }

/* ---------- Type utilities ---------- */
.h-display{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:.01em;
  font-size:clamp(2.4rem, 5.6vw, 4.2rem);
}
.accent{ color:var(--turf-bright) }
.gold-text{ color:var(--gold) }

.eyebrow{
  font-family:var(--font-util);
  font-size:.76rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--turf-bright);
  display:flex; align-items:center; gap:.65rem;
  margin-bottom:1.1rem;
}
.eyebrow-dot{
  width:26px; height:2px; background:var(--turf-bright); display:inline-block; flex:none;
}
.gold-eyebrow{ color:var(--gold) }
.gold-eyebrow .eyebrow-dot{ background:var(--gold) }

.sec-head{ max-width:720px; margin-bottom:3.2rem }
.sec-sub{ color:var(--chalk-dim); margin-top:1.1rem; max-width:56ch }

/* ---------- Buttons ---------- */
.btn{
  position:relative; overflow:hidden; display:inline-block;
  background:var(--turf-bright); color:var(--night);
  border:2px solid var(--turf-bright);
  font-family:var(--font-util); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; font-size:.85rem;
  padding:.85rem 1.7rem;
  transition:color .35s;
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--pitch-deep);
  transform:translateX(-101%) skewX(-12deg) scaleX(1.2);
  transition:transform .4s var(--ease);
}
.btn:hover{ color:var(--turf-bright) }
.btn:hover::before{ transform:translateX(0) skewX(-12deg) scaleX(1.2) }
.btn > span{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:.5rem }

.btn-ghost{
  background:transparent; color:var(--chalk);
  border-color:rgba(243,248,241,.4);
}
.btn-ghost::before{ background:var(--turf-bright) }
.btn-ghost:hover{ color:var(--night); border-color:var(--turf-bright) }

.btn-night{
  background:var(--night); color:var(--chalk); border-color:var(--night);
}
.btn-night::before{ background:var(--chalk) }
.btn-night:hover{ color:var(--night) }

.btn-night-ghost{
  background:transparent; color:var(--night); border-color:var(--night);
  text-transform:none; letter-spacing:.02em;
}
.btn-night-ghost::before{ background:var(--night) }
.btn-night-ghost:hover{ color:var(--turf-bright) }

/* ---------- Scroll reveal ---------- */
.rv{
  opacity:0; transform:translateY(34px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.rv.in{ opacity:1; transform:none; --tx:0px }
.rv-d1{ transition-delay:.12s }
.rv-d2{ transition-delay:.24s }
.rv-d3{ transition-delay:.36s }

/* ---------- Progress bar ---------- */
.progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:120 }
.progress span{ display:block; height:100%; width:0; background:var(--turf-bright) }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.15rem 0;
  transition:padding .35s var(--ease), background .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:.6rem 0;
  background:rgba(7,39,27,.85);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  border-bottom-color:rgba(243,248,241,.08);
}
.nav-inner{
  width:min(1280px, 94vw); margin-inline:auto;
  display:flex; align-items:center; gap:2.2rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto }
/* laurels make the real crest read smaller than the old shield at the same
   box, so it gets a little more room; height:auto keeps it unsquashed */
.brand-crest{ width:50px; height:auto; flex:none }
.brand-word strong{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:1.12rem; letter-spacing:.06em; line-height:1;
}
.brand-word em{
  display:block; font-style:normal; font-family:var(--font-util);
  font-size:.56rem; text-transform:uppercase; letter-spacing:.34em;
  color:var(--chalk-dim); margin-top:.22rem;
}
.nav-links{ display:flex; gap:1.9rem }
.nav-links a{
  font-family:var(--font-util); font-size:.8rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--chalk-dim); position:relative; padding:.3rem 0;
  transition:color .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--turf-bright); transition:width .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--chalk) }
.nav-links a:hover::after, .nav-links a.active::after{ width:100% }
.nav-cta{ padding:.65rem 1.3rem; font-size:.78rem }

/* burger */
.burger{ display:none; flex-direction:column; gap:5px; padding:.5rem; z-index:130 }
.burger span{
  width:26px; height:2px; background:var(--chalk);
  transition:transform .35s var(--ease), opacity .25s;
}
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.burger.open span:nth-child(2){ opacity:0 }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:110;
  background:linear-gradient(160deg, var(--pitch-deep) 0%, var(--pitch) 100%);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:0 9vw;
  transform:translateY(-102%);
  transition:transform .55s var(--ease);
  visibility:hidden;
}
.mobile-menu.open{ transform:none; visibility:visible }
.mobile-menu nav{ display:flex; flex-direction:column; gap:.4rem }
.mobile-menu nav a{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2.2rem, 9vw, 3.4rem); line-height:1.15;
  opacity:0; transform:translateY(24px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), color .3s;
  transition-delay:calc(.08s * var(--i) + .15s);
}
.mobile-menu.open nav a{ opacity:1; transform:none }
.mobile-menu nav a:hover{ color:var(--turf-bright) }
.mobile-menu .mm-cta{ color:var(--turf-bright); margin-top:1rem }
.mm-foot{
  position:absolute; bottom:2.2rem; left:9vw;
  font-family:var(--font-util); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.24em; color:var(--chalk-dim);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  /* Subject stands left of frame, so a centred crop would slice him off on
     phones, where only ~42% of the image width survives. Biased left. */
  --hero-focus:36% 50%;
  position:relative; z-index:2;
  min-height:100svh;
  display:flex; align-items:flex-end;
  clip-path:var(--sash);
  overflow:hidden;
}
.hero-media, .hero-media img{ position:absolute; inset:0; width:100%; height:100% }
/* --hero-focus tunes which part of the photo stays centred as the hero crops.
   Portraits usually want the face higher, e.g. --hero-focus:50% 28% */
.hero-media img{
  object-fit:cover; object-position:var(--hero-focus, 50% 50%);
  transform:scale(1.05); will-change:transform;
}
.hero-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,39,27,.78) 0%, rgba(7,39,27,.25) 55%, rgba(7,39,27,.15) 100%),
    linear-gradient(180deg, rgba(7,39,27,.5) 0%, rgba(7,39,27,.12) 38%, rgba(7,39,27,.94) 100%);
}
.hero-content{
  position:relative; z-index:2;
  padding-bottom:calc(var(--sash-v) + 4.5rem);
  padding-top:8rem;
}
.hero-eyebrow{ margin-bottom:1.4rem }
.hero h1{
  font-family:var(--font-display); font-weight:400;
  text-transform:uppercase; line-height:.95;
  font-size:clamp(3.1rem, 9.2vw, 7rem);
  margin-bottom:1.5rem;
}
.hero h1 .ln{ display:block; overflow:hidden }
.hero h1 .ln em{
  display:block; font-style:normal; transform:translateY(110%);
  animation:lineUp 1s var(--ease) forwards;
}
.hero h1 .ln:nth-child(2) em{ animation-delay:.15s }
.hero h1 .ln:nth-child(3) em{ animation-delay:.3s; color:var(--turf-bright) }
@keyframes lineUp{ to{ transform:none } }

.hero-sub{
  max-width:560px; color:rgba(243,248,241,.82);
  margin-bottom:2.2rem;
  animation:heroFade 1s .55s var(--ease) both;
}
.hero-ctas{
  display:flex; gap:1rem; flex-wrap:wrap;
  animation:heroFade 1s .75s var(--ease) both;
}
@keyframes heroFade{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }

.play-ico{ width:16px; height:16px }

.scroll-cue{
  position:absolute; z-index:3; left:50%; transform:translateX(-50%);
  bottom:calc(var(--sash-v) + 1.4rem);
  animation:heroFade 1s 1.2s var(--ease) both;
}
.scroll-cue-track{
  display:block; width:26px; height:42px;
  border:2px solid rgba(243,248,241,.45); border-radius:14px;
  position:relative;
}
.scroll-cue-dot{
  position:absolute; left:50%; top:7px; width:4px; height:9px; margin-left:-2px;
  background:var(--turf-bright); border-radius:3px;
  animation:cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop{
  0%{ transform:translateY(0); opacity:1 }
  70%{ transform:translateY(14px); opacity:0 }
  100%{ transform:translateY(0); opacity:0 }
}

/* ============================================================
   FILM — The Madestone Story
   ============================================================ */
.film{
  position:relative; z-index:1;
  margin-top:calc(var(--sash-v) * -1);
  padding:calc(var(--sash-v) + 5.5rem) 0 6rem;
  background:
    radial-gradient(52vw 32vw at 82% 8%, rgba(31,138,77,.18), transparent 65%),
    var(--pitch-deep);
}
.film .sec-head{ margin-inline:auto; text-align:center }
.film .eyebrow{ justify-content:center }

.film-frame{
  max-width:960px; margin-inline:auto;
  aspect-ratio:16/9; position:relative;
  background:var(--night);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
}
.film-poster{ position:absolute; inset:0; width:100%; overflow:hidden; text-align:left }
.film-poster img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .6s;
  filter:saturate(.92);
}
.film-poster:hover img{ transform:scale(1.045); filter:saturate(1.05) }
.film-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(7,39,27,.25), rgba(7,39,27,.72)),
    linear-gradient(0deg, rgba(11,13,12,.75), transparent 42%);
  transition:opacity .5s;
}
.film-poster:hover .film-scrim{ opacity:.85 }

.film-corner{ position:absolute; width:26px; height:26px; z-index:3; opacity:.85 }
.film-corner.tl{ top:14px; left:14px; border-top:2px solid var(--chalk); border-left:2px solid var(--chalk) }
.film-corner.tr{ top:14px; right:14px; border-top:2px solid var(--chalk); border-right:2px solid var(--chalk) }
.film-corner.bl{ bottom:14px; left:14px; border-bottom:2px solid var(--chalk); border-left:2px solid var(--chalk) }
.film-corner.br{ bottom:14px; right:14px; border-bottom:2px solid var(--chalk); border-right:2px solid var(--chalk) }

.play-wrap{
  position:absolute; z-index:3; left:50%; top:50%;
  width:96px; height:96px; margin:-48px 0 0 -48px;
}
.play-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(243,248,241,.6);
  animation:ringPulse 2.2s var(--ease) infinite;
}
@keyframes ringPulse{
  0%{ transform:scale(1); opacity:.9 }
  100%{ transform:scale(1.55); opacity:0 }
}
.play-core{
  position:absolute; inset:8px; border-radius:50%;
  background:var(--turf-bright); color:var(--night);
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ease), background .3s;
}
.play-core svg{ width:34px; height:34px; margin-left:4px }
.film-poster:hover .play-core{ transform:scale(1.1); background:var(--chalk) }

.film-caption{ position:absolute; z-index:3; left:2rem; bottom:1.8rem; display:block }
.film-cap-tag{
  display:inline-block; font-family:var(--font-util); font-weight:700;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.22em;
  background:var(--turf-bright); color:var(--night);
  padding:.32rem .7rem; margin-bottom:.6rem;
}
.film-cap-title{
  display:block; font-family:var(--font-display);
  font-size:clamp(1.2rem, 3vw, 1.9rem); text-transform:uppercase; letter-spacing:.02em;
}
.film-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  background:var(--turf-bright); color:var(--night);
  overflow:hidden; padding:.85rem 0;
  transform:rotate(-1.1deg) scale(1.02);
  position:relative; z-index:6;
  margin:-1.4rem 0;
  box-shadow:0 12px 34px -12px rgba(0,0,0,.5);
}
.ticker-track{
  display:flex; gap:3rem; width:max-content; white-space:nowrap;
  animation:tick 32s linear infinite;
  font-family:var(--font-util); font-weight:700;
  font-size:.85rem; letter-spacing:.18em;
}
.ticker:hover .ticker-track{ animation-play-state:paused }
@keyframes tick{ to{ transform:translateX(calc(-50% - 1.5rem)) } }

/* ============================================================
   STATS
   ============================================================ */
.stats{
  background:var(--stripes);
  padding:6.5rem 0 5rem;
  border-bottom:1px solid rgba(243,248,241,.07);
}
.stats-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem;
}
.stat{ text-align:center; position:relative; padding:.4rem 1rem }
.stat + .stat::before{
  content:""; position:absolute; left:-1rem; top:12%; bottom:12%;
  width:1px; background:rgba(243,248,241,.14);
}
.stat strong{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.6rem, 5.2vw, 4.1rem); line-height:1;
  color:var(--turf-bright); margin-bottom:.55rem;
  font-variant-numeric:tabular-nums;
}
.stat span{
  font-family:var(--font-util); font-size:.74rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.22em; color:var(--chalk-dim);
}

/* ============================================================
   STORY
   ============================================================ */
.story{ padding:7.5rem 0; position:relative }
.story-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:5rem; align-items:center;
}
.story-copy p{ color:var(--chalk-dim); margin-bottom:1.15rem; max-width:58ch }
.story-copy p strong{ color:var(--chalk); font-weight:600 }
.story-copy .h-display{ margin-bottom:1.6rem }

.badges{
  display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem;
}
.badges li{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-util); font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  border:1px solid rgba(76,192,120,.4); color:var(--chalk);
  padding:.55rem .95rem; border-radius:99px;
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.badges li:hover{
  background:rgba(31,138,77,.16); border-color:var(--turf-bright);
  transform:translateY(-2px);
}
.badges svg{ width:17px; height:17px; color:var(--turf-bright); flex:none }

.story-photo{ position:relative }
.story-photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid rgba(243,248,241,.12);
}
.story-photo::before{
  content:""; position:absolute; inset:-16px 16px 16px -16px;
  border:2px dashed rgba(76,192,120,.35);
  z-index:-1; transition:transform .5s var(--ease);
}
.story-photo:hover::before{ transform:translate(6px, 6px) }
.story-photo figcaption{
  position:absolute; left:0; bottom:0; right:0;
  padding:2.2rem 1.4rem 1.2rem;
  background:linear-gradient(0deg, rgba(11,13,12,.82), transparent);
  font-size:.9rem; color:var(--chalk-dim);
}
.story-photo figcaption span{
  display:block; font-family:var(--font-util); font-weight:700; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.22em; color:var(--turf-bright);
  margin-bottom:.15rem;
}

/* ============================================================
   FOUR CORNER MODEL
   ============================================================ */
.model{
  position:relative; z-index:2;
  background:var(--night);
  clip-path:var(--sash-rev);
  margin-top:calc(var(--sash-v) * -1);
  padding:calc(var(--sash-v) + 5.5rem) 0 7rem;
}
.model-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1.4rem;
}
.corner{
  position:relative; overflow:hidden;
  background:rgba(243,248,241,.035);
  border:1px solid rgba(243,248,241,.09);
  padding:2.6rem 2.4rem 2.4rem;
  transition:transform .5s var(--ease), border-color .4s, background .4s;
}
.corner::before{
  content:attr(data-ghost);
  position:absolute; right:-.05em; top:-.28em;
  font-family:var(--font-display); font-size:9.5rem; line-height:1;
  color:rgba(243,248,241,.045);
  transition:color .5s, transform .6s var(--ease);
  pointer-events:none;
}
.corner::after{
  content:""; position:absolute; left:0; top:0; height:3px; width:0;
  background:var(--turf-bright); transition:width .5s var(--ease);
}
.corner:hover{
  --ty:-7px;
  border-color:rgba(76,192,120,.45);
  background:rgba(31,138,77,.09);
}
.corner:hover::before{ color:rgba(76,192,120,.12); transform:translateX(-6px) }
.corner:hover::after{ width:100% }
.corner-num{
  font-family:var(--font-util); font-weight:700; font-size:.75rem;
  letter-spacing:.22em; color:var(--turf-bright);
}
.corner h3{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:1.65rem; letter-spacing:.02em; margin:.7rem 0 .7rem;
}
.corner p{ color:var(--chalk-dim); font-size:.98rem; max-width:44ch; position:relative }

/* ============================================================
   PROGRAMME — tactics board
   ============================================================ */
.programme{ padding:7.5rem 0 6rem; background:var(--pitch-deep) }

.board-card{
  position:relative; overflow:hidden;
  border:2px dashed rgba(243,248,241,.3);
  padding:clamp(2rem, 5vw, 4rem);
}
/* penalty arcs */
.board-card::before, .board-card::after{
  content:""; position:absolute; top:50%; width:130px; height:240px;
  border:2px dashed rgba(243,248,241,.22); border-radius:50%;
  transform:translateY(-50%);
  pointer-events:none;
}
.board-card::before{ left:-72px }
.board-card::after{ right:-72px }
/* halfway line + centre circle */
.board-line{
  position:absolute; left:50%; top:0; bottom:0; width:0;
  border-left:2px dashed rgba(243,248,241,.14);
  pointer-events:none;
}
.board-circle{
  position:absolute; left:50%; top:50%; width:150px; height:150px;
  margin:-75px 0 0 -75px; border-radius:50%;
  border:2px dashed rgba(243,248,241,.14);
  pointer-events:none;
}
.board-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(2rem, 4.5vw, 3.6rem) clamp(2.5rem, 6vw, 5.5rem);
}
.prog svg{ width:34px; height:34px; color:var(--turf-bright); margin-bottom:.9rem }
.prog h3{
  font-family:var(--font-util); font-weight:700; font-size:.95rem;
  text-transform:uppercase; letter-spacing:.16em; margin-bottom:.5rem;
}
.prog p{ color:var(--chalk-dim); font-size:.98rem; max-width:40ch }
.prog p strong{ color:var(--chalk); font-weight:600 }

.safeguard{
  margin-top:2.2rem;
  border-left:4px solid var(--turf-bright);
  background:rgba(31,138,77,.1);
  padding:1.35rem 1.8rem;
  color:var(--chalk-dim); font-size:.98rem; max-width:72ch;
}
.safeguard strong{ color:var(--chalk) }

/* ============================================================
   PATHWAY
   ============================================================ */
.pathway{
  padding:7rem 0;
  background:
    radial-gradient(45vw 30vw at 12% 90%, rgba(31,138,77,.13), transparent 65%),
    var(--pitch-deep);
}
.path-steps{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2.2rem;
  margin-bottom:3.2rem;
}
.path-steps li{
  position:relative; padding-top:2.1rem;
  border-top:2px dashed rgba(243,248,241,.25);
}
.path-steps li::before{
  content:""; position:absolute; top:-8px; left:0;
  width:14px; height:14px; border-radius:50%;
  background:var(--turf-bright);
  box-shadow:0 0 0 5px rgba(76,192,120,.18);
}
.path-num{
  font-family:var(--font-display); font-size:2.4rem; line-height:1;
  color:rgba(243,248,241,.22); display:block; margin-bottom:.6rem;
}
.path-steps h3{
  font-family:var(--font-util); font-weight:700; font-size:.95rem;
  text-transform:uppercase; letter-spacing:.16em; margin-bottom:.45rem;
}
.path-steps p{ color:var(--chalk-dim); font-size:.94rem }

.path-steps .path-intl::before{ background:var(--gold); box-shadow:0 0 0 5px rgba(233,198,90,.2) }
.path-steps .path-intl{ border-top-color:rgba(233,198,90,.45) }
.path-intl .path-num{ color:var(--gold) }
.path-intl h3{ color:var(--gold) }

.soton-card{
  position:relative; overflow:hidden;
  border:1.5px solid rgba(233,198,90,.5);
  background:linear-gradient(120deg, rgba(233,198,90,.09), transparent 55%);
  padding:clamp(1.8rem, 4vw, 2.8rem);
}
.soton-card::after{
  content:"★"; position:absolute; right:-.4rem; top:50%;
  transform:translateY(-50%);
  font-size:11rem; line-height:1; color:rgba(233,198,90,.07);
  pointer-events:none;
}
.soton-card h3{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.4rem, 3vw, 2rem); margin-bottom:.8rem; letter-spacing:.02em;
}
.soton-card p{ color:var(--chalk-dim); max-width:64ch; position:relative }
.soton-card p strong{ color:var(--chalk) }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{
  padding:7rem 0 7.5rem;
  background:var(--stripes);
}
/* Mosaic: items default to one cell; g-wide/g-tall/g-big claim more.
   `dense` backfills the gaps those spans would otherwise leave. */
.g-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:225px;
  grid-auto-flow:dense;
  gap:1.1rem;
  counter-reset:gallery;
}
.g-item{
  position:relative; overflow:hidden; cursor:pointer;
  border:1px solid rgba(243,248,241,.1);
  counter-increment:gallery;
}
.g-item.g-wide{ grid-column:span 2 }
.g-item.g-tall{ grid-row:span 2 }
.g-item.g-big{ grid-column:span 2; grid-row:span 2 }

/* Only the opening four show until the visitor asks for the rest.
   The first four are sized to fill a 4x2 block exactly, so the
   collapsed state reads as a finished composition, not a cut-off grid. */
.g-grid:not(.expanded) .g-item:nth-child(n+5){ display:none }
.g-more-wrap{ display:flex; justify-content:center; margin-top:2.6rem }
.g-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.g-item:hover img, .g-item:focus-visible img{ transform:scale(1.07) }
/* sash sweep */
.g-item::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 55%,
    rgba(31,138,77,.55) 55.2%, rgba(31,138,77,.55) 78%, transparent 78.2%);
  transform:translateX(-130%);
  transition:transform .7s var(--ease);
}
.g-item:hover::after, .g-item:focus-visible::after{ transform:translateX(130%) }

.g-item figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:2.4rem 1.2rem 1.1rem;
  background:linear-gradient(0deg, rgba(11,13,12,.85), transparent);
  font-family:var(--font-util); font-size:.8rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  transform:translateY(102%); transition:transform .5s var(--ease);
}
.g-item:hover figcaption, .g-item:focus-visible figcaption{ transform:none }
/* numbering comes from the counter, so added photos renumber themselves */
.g-item figcaption::before{
  content:counter(gallery, decimal-leading-zero);
  color:var(--turf-bright); margin-right:.7rem;
}
@media (hover:none){
  .g-item figcaption{ transform:none }
}

/* ============================================================
   SOCIAL WALL
   ============================================================ */
.social{
  position:relative; z-index:2;
  background:var(--pitch);
  clip-path:var(--sash);
  padding:7rem 0 calc(var(--sash-v) + 6rem);
}
.social-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem }
.social-card{
  position:relative; overflow:hidden; min-height:360px;
  display:flex; align-items:flex-end;
  border:1px solid rgba(243,248,241,.12);
  background:var(--night);
  transition:border-color .4s, transform .5s var(--ease);
}
.social-card:hover{ border-color:var(--turf-bright); transform:translateY(-6px) }
.social-card > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.22; transition:opacity .6s, transform 1s var(--ease);
}
.social-card:hover > img{ opacity:.45; transform:scale(1.05) }
.social-body{
  position:relative; z-index:2; padding:2.2rem;
  width:100%;
  background:linear-gradient(0deg, rgba(11,13,12,.72), transparent);
}
.social-ico{ width:34px; height:34px; color:var(--turf-bright); margin-bottom:1rem }
.social-body h3{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:2rem; line-height:1; margin-bottom:.3rem;
}
.social-body p{
  font-family:var(--font-util); font-weight:500; font-size:.88rem;
  letter-spacing:.1em; color:var(--turf-bright); margin-bottom:1.1rem;
}
.social-go{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-util); font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; color:var(--chalk-dim);
  transition:color .3s;
}
.social-go svg{ width:15px; height:15px; transition:transform .35s var(--ease) }
.social-card:hover .social-go{ color:var(--chalk) }
.social-card:hover .social-go svg{ transform:translate(3px, -3px) }

/* ============================================================
   TEAM
   ============================================================ */
.team{
  position:relative; z-index:1;
  background:var(--night);
  margin-top:calc(var(--sash-v) * -1);
  padding:calc(var(--sash-v) + 6rem) 0 7rem;
}
.team-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.3rem }
.member{
  background:rgba(243,248,241,.035);
  border:1px solid rgba(243,248,241,.09);
  padding:2.2rem 1.7rem;
  transition:transform .5s var(--ease), border-color .4s, background .4s;
}
.member:hover{
  --ty:-6px;
  border-color:rgba(76,192,120,.4);
  background:rgba(31,138,77,.07);
}
.avatar{
  width:82px; height:82px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.7rem; color:var(--chalk);
  margin-bottom:1.4rem;
  border:2px solid rgba(243,248,241,.15);
}
.av-1{ background:linear-gradient(135deg, var(--turf) 0%, var(--pitch) 100%) }
.av-2{ background:linear-gradient(135deg, var(--turf-bright) 0%, var(--turf) 100%); color:var(--night) }
.av-3{ background:linear-gradient(135deg, var(--pitch) 0%, #0a331f 100%) }
.av-4{ background:linear-gradient(135deg, #135c36 0%, var(--pitch-deep) 100%) }

.member h3{ font-size:1.08rem; font-weight:700; line-height:1.3; margin-bottom:.3rem }
.member-role{
  font-family:var(--font-util); font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; color:var(--turf-bright);
  margin-bottom:.8rem;
}
.member p:last-child{ color:var(--chalk-dim); font-size:.9rem; line-height:1.55 }

/* ============================================================
   CTA
   ============================================================ */
.cta{
  position:relative; overflow:hidden;
  background:var(--turf-bright); color:var(--night);
  padding:7rem 0;
  text-align:center;
}
/* chalk arcs, corner-flag style */
.cta::before, .cta::after{
  content:""; position:absolute; border-radius:50%;
  border:2px dashed rgba(11,13,12,.18); pointer-events:none;
}
.cta::before{ width:340px; height:340px; left:-170px; top:-170px }
.cta::after{ width:420px; height:420px; right:-210px; bottom:-210px }
.cta .h-display{ font-size:clamp(2.6rem, 6.5vw, 5rem); margin-bottom:1.2rem }
.cta-sub{
  font-family:var(--font-util); font-weight:500; font-size:.92rem;
  text-transform:uppercase; letter-spacing:.16em;
  color:rgba(11,13,12,.75); margin-bottom:2.4rem;
}
.cta-btns{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; z-index:1 }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--night); border-top:1px solid rgba(243,248,241,.07) }
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:3.5rem;
  padding:5rem 0 3.5rem;
}
.f-col > p{ color:var(--chalk-dim); font-size:.95rem; margin-top:1.3rem; max-width:38ch }
.f-col h4{
  font-family:var(--font-util); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.22em; color:var(--turf-bright);
  margin-bottom:1.2rem;
}
.f-col ul li{ color:var(--chalk-dim); font-size:.95rem; margin-bottom:.55rem }
.f-col ul a{ transition:color .3s }
.f-col ul a:hover{ color:var(--turf-bright) }
.f-soon{ font-size:.85rem !important; opacity:.75; font-style:italic }
.f-social{ display:flex; gap:.7rem; margin-top:1.4rem }
.f-social a{
  width:42px; height:42px; border:1px solid rgba(243,248,241,.16); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--chalk-dim);
  transition:color .3s, border-color .3s, transform .3s var(--ease), background .3s;
}
.f-social a:hover{
  color:var(--night); border-color:var(--turf-bright);
  background:var(--turf-bright); transform:translateY(-3px);
}
.f-social svg{ width:19px; height:19px }

.footer-bar{
  border-top:1px solid rgba(243,248,241,.07);
  padding:1.4rem 0;
}
.footer-bar .container{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--font-util); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.18em; color:rgba(243,248,241,.4);
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:140;
  background:rgba(7,20,14,.93);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; gap:1.2rem;
  /* long enough that the reverse zoom finishes before the backdrop hides */
  opacity:0; visibility:hidden; transition:opacity .45s, visibility .45s;
  padding:4vh 4vw;
}
.lightbox.open{ opacity:1; visibility:visible }
.lightbox figure{ max-width:min(1100px, 86vw); text-align:center }
.lightbox img{
  max-height:78vh; max-width:100%; margin-inline:auto;
  border:1px solid rgba(243,248,241,.2);
  transform:scale(.96); transition:transform .4s var(--ease);
}
.lightbox.open img{ transform:none }
.lightbox figcaption{
  margin-top:1rem; font-family:var(--font-util); font-size:.8rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.18em; color:var(--chalk-dim);
}
.lb-close{
  position:absolute; top:1.4rem; right:1.6rem;
  font-size:1.5rem; color:var(--chalk-dim); padding:.6rem;
  transition:color .3s, transform .3s;
}
.lb-close:hover{ color:var(--turf-bright); transform:rotate(90deg) }
.lb-arrow{
  font-family:var(--font-body); font-size:3rem; line-height:1;
  color:var(--chalk-dim); padding:1rem .6rem; flex:none;
  transition:color .3s, transform .3s var(--ease);
  user-select:none;
}
.lb-arrow:hover{ color:var(--turf-bright) }
.lb-prev:hover{ transform:translateX(-4px) }
.lb-next:hover{ transform:translateX(4px) }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .story-grid{ grid-template-columns:1fr; gap:3.5rem }
  .story-photo{ max-width:460px }
  .g-grid{ grid-template-columns:repeat(3, 1fr) }
  .team-grid{ grid-template-columns:repeat(2, 1fr) }
  .path-steps{ grid-template-columns:repeat(2, 1fr) }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2.5rem }
}

@media (max-width:820px){
  .nav-links, .nav-cta{ display:none }
  .burger{ display:flex }
  .stats-grid{ grid-template-columns:repeat(2, 1fr); gap:2.6rem 1rem }
  .stat + .stat::before{ display:none }
  .g-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:190px }
  .social-grid{ grid-template-columns:1fr }
  .board-card::before, .board-card::after,
  .board-line, .board-circle{ display:none }
}

@media (max-width:640px){
  :root{ --sash-v:9vw }
  .model-grid, .board-grid, .team-grid{ grid-template-columns:1fr }
  /* gallery keeps two columns so the wide/tall spans still read as a mosaic */
  .g-grid{ grid-auto-rows:150px; gap:.7rem }
  /* one column here, so left/right entries would just look like jitter */
  .rv-l, .rv-r{ transform:translateY(34px) }
  .path-steps{ grid-template-columns:1fr; gap:0 }
  .path-steps li{
    border-top:0; border-left:2px dashed rgba(243,248,241,.25);
    padding:0 0 2.4rem 1.8rem; margin-left:6px;
  }
  .path-steps li::before{ top:2px; left:-8px }
  .path-steps .path-intl{ border-left-color:rgba(233,198,90,.45) }
  .path-steps li:last-child{ padding-bottom:.5rem }
  .hero-content{ padding-top:7rem }
  .hero-sub{ font-size:.98rem }
  /* narrow screens put the headline over bright turf — deepen the scrim */
  .hero-shade{
    background:
      linear-gradient(90deg, rgba(7,39,27,.72) 0%, rgba(7,39,27,.34) 100%),
      linear-gradient(180deg, rgba(7,39,27,.6) 0%, rgba(7,39,27,.3) 26%, rgba(7,39,27,.97) 76%);
  }
  .film-caption{ left:1.1rem; bottom:1rem }
  .play-wrap{ width:74px; height:74px; margin:-37px 0 0 -37px }
  .play-core svg{ width:26px; height:26px }
  .scroll-cue{ display:none }
  .lb-arrow{ display:none }
  .cta-btns .btn{ width:100%; text-align:center }
  .footer-grid{ grid-template-columns:1fr; gap:2.4rem; padding:3.5rem 0 2.5rem }
}

/* ============================================================
   MOTION LAYER
   Everything below is enhancement. Each effect is written so the
   page still reads correctly if it never runs.
   ============================================================ */

/* ---------- Kickoff curtain ---------- */
.preloader{
  position:fixed; inset:-2% 0 0; z-index:200;
  background:linear-gradient(160deg, var(--pitch) 0%, var(--pitch-deep) 100%);
  display:grid; place-items:center;
  animation:preOut .9s var(--ease) 1.5s forwards;
}
.preloader.done{ animation:preOut .9s var(--ease) forwards }
@keyframes preOut{ to{ transform:translateY(-102%) skewY(-2.5deg); visibility:hidden } }

.pre-inner{ display:flex; flex-direction:column; align-items:center; gap:1.1rem }
.pre-crest{ width:88px; height:auto; animation:preBob 1.3s var(--ease) infinite alternate }
@keyframes preBob{ from{ transform:translateY(4px) } to{ transform:translateY(-8px) } }
.pre-word{
  font-family:var(--font-util); font-weight:700; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.42em; color:var(--chalk-dim);
  padding-left:.42em;
}
.pre-bar{ width:118px; height:2px; background:rgba(243,248,241,.16); overflow:hidden }
.pre-bar i{
  display:block; height:100%; width:100%; background:var(--turf-bright);
  transform:translateX(-100%); animation:preBar 1.45s var(--ease) forwards;
}
@keyframes preBar{ to{ transform:none } }

/* Hero entrance waits for the curtain. Gated on .js so a no-JS page still animates. */
html.js .hero h1 .ln em,
html.js .hero-sub,
html.js .hero-ctas,
html.js .scroll-cue{ animation-play-state:paused }
html.js.ready .hero h1 .ln em,
html.js.ready .hero-sub,
html.js.ready .hero-ctas,
html.js.ready .scroll-cue{ animation-play-state:running }

/* ---------- Word-by-word headline reveal ---------- */
/* .w/.w>i wrappers are built by JS, so no-JS pages just show plain headings. */
.w{ display:inline-block; overflow:hidden; vertical-align:top }
.w > i{
  display:inline-block; font-style:normal;
  transform:translateY(112%);
  transition:transform .95s var(--ease);
}
.split.in .w > i{ transform:none }
/* the words carry the movement, so the surrounding block only fades */
.rv:has(.split){ transform:none }

/* ---------- Directional entry ----------
   Direction follows the layout: things on the left come in from the left,
   things on the right from the right, so it reads as the page assembling
   itself rather than as decoration. Combine with .rv and any rv-d* delay.
   The finished state still comes from .rv.in, which outranks these. */
/* --tx carries the same offset for cards whose transform is variable-driven */
.rv-l{ transform:translateX(-52px); --tx:-52px }
.rv-r{ transform:translateX(52px);  --tx:52px }

/* ---------- Diagonal sash wipe on photos ---------- */
.wipe{
  clip-path:polygon(0 0, 0 0, -30% 100%, -30% 100%);
  transition:clip-path 1.2s var(--ease) .05s;
}
.rv.in .wipe{ clip-path:polygon(0 0, 130% 0, 100% 100%, 0 100%) }

/* ---------- Nav retracts going down, returns going up ---------- */
.nav{
  transition:transform .45s var(--ease), padding .35s var(--ease),
             background .35s, border-color .35s;
}
.nav.hidden{ transform:translateY(-104%) }

/* ---------- Cursor tilt on cards ----------
   These cards need one transform that carries three things at once: the
   entry slide, the hover lift and the cursor tilt. So all three go through
   variables here. The selector is .corner.rv (not .corner) so it outranks
   the generic .rv.in{transform:none}, which would otherwise flatten it. */
.corner.rv, .member.rv{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translate(var(--tx,0px), var(--ty,0px));
}
.tilting{ transition:transform .14s linear, border-color .4s, background .4s }

/* ---------- Magnetic buttons ---------- */
.btn{ transition:color .35s, transform .4s var(--ease) }

/* ---------- Ticker leans with scroll velocity ---------- */
.ticker{
  transform:rotate(-1.1deg) scale(1.02) skewX(var(--tskew, 0deg));
  transition:transform .55s var(--ease);
}

/* ---------- Pathway draws itself in ---------- */
.path-steps li::after{
  content:""; position:absolute; top:-2px; left:0; width:100%; height:2px;
  background:var(--turf-bright); transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--ease) .15s;
}
.path-steps li.in::after{ transform:scaleX(1) }
.path-steps .path-intl::after{ background:var(--gold) }

/* ---------- Tactics-board markings draw in ---------- */
.board-line{ transform:scaleY(0); transform-origin:top; transition:transform 1.2s var(--ease) .3s }
.rv.in .board-line{ transform:scaleY(1) }
.board-circle{
  transform:scale(.3); opacity:0;
  transition:transform 1s var(--ease) .5s, opacity .8s .5s;
}
.rv.in .board-circle{ transform:scale(1); opacity:1 }

/* ---------- Eyebrow rules draw out ---------- */
.rv .eyebrow-dot{ transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease) .1s }
.rv.in .eyebrow-dot{ transform:scaleX(1) }

/* ---------- Credential badges stagger ---------- */
.badges li{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease), transform .55s var(--ease),
             background .3s, border-color .3s;
}
.badges.in li{ opacity:1; transform:none }
.badges.in li:nth-child(1){ transition-delay:.06s }
.badges.in li:nth-child(2){ transition-delay:.14s }
.badges.in li:nth-child(3){ transition-delay:.22s }
.badges.in li:nth-child(4){ transition-delay:.3s }
.badges.in li:hover{ transform:translateY(-2px) }

/* ---------- Small hover lifts ---------- */
.stat strong{ transition:transform .45s var(--ease) }
.stat:hover strong{ transform:translateY(-5px) }
.avatar{ transition:transform .5s var(--ease), box-shadow .5s }
.member:hover .avatar{ transform:scale(1.06) rotate(-4deg); box-shadow:0 0 0 6px rgba(76,192,120,.13) }
.prog svg{ transition:transform .45s var(--ease) }
.prog:hover svg{ transform:translateY(-4px) scale(1.08) }
.f-social a svg{ transition:transform .4s var(--ease) }
.f-social a:hover svg{ transform:scale(1.15) }

/* ---------- Footer columns stagger ---------- */
.f-col.rv:nth-child(2){ transition-delay:.12s }
.f-col.rv:nth-child(3){ transition-delay:.24s }

/* ---------- Slow drift on the hero photo ----------
   Applied to the wrapper so it composes with the JS parallax on the image. */
.hero-media{ animation:kenBurns 30s ease-in-out infinite alternate }
@keyframes kenBurns{ from{ transform:scale(1) } to{ transform:scale(1.09) } }

/* ---------- Cursor spotlight on the dark sections ---------- */
.model > .container, .team > .container{ position:relative; z-index:1 }
.model::after, .team::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),
             rgba(76,192,120,.15), transparent 70%);
  opacity:0; transition:opacity .55s;
}
.model.lit::after, .team.lit::after{ opacity:1 }

/* ---------- Icons draw themselves in, like chalk on a board ----------
   One dash length covers every icon here; anything shorter simply
   finishes drawing early. */
.prog svg > *, .badges svg > *{
  stroke-dasharray:220; stroke-dashoffset:220;
  transition:stroke-dashoffset 1.3s var(--ease) .2s;
}
.rv.in .prog svg > *, .badges.in svg > *{ stroke-dashoffset:0 }

/* ---------- Stat lands with a small pop ---------- */
.stat strong.counted{ animation:statPop .5s var(--ease) }
@keyframes statPop{
  0%{ transform:scale(1) } 40%{ transform:scale(1.12) } 100%{ transform:scale(1) }
}

/* ---------- Press feedback ---------- */
.btn:active{ transform:scale(.97) }

/* ---------- Story photo drifts as it passes ----------
   Scroll-driven where supported; simply static everywhere else. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .story-photo img{
      animation:photoDrift linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes photoDrift{
      from{ transform:scale(1.1) translateY(-2.5%) }
      to{ transform:scale(1.1) translateY(2.5%) }
    }
  }
}

/* ---------- Lightbox crossfade + counter ---------- */
#lbImg{ transition:transform .4s var(--ease), opacity .3s }
#lbImg.swapping{ opacity:0 }
.lb-index{
  display:block; color:var(--turf-bright);
  letter-spacing:.24em; margin-bottom:.35rem;
}

@media (max-width:640px){
  /* the timeline runs vertically here, so the drawn line does too */
  .path-steps li::after{
    top:0; left:-2px; width:2px; height:100%;
    transform:scaleY(0); transform-origin:top;
  }
  .path-steps li.in::after{ transform:scaleY(1) }
}

/* ---------- Safety net ----------
   Set by the inline script in <head> when main.js never ran. Everything
   that waits on a JS-added class is shown in its finished state. */
html.reveal-all .rv{ opacity:1; transform:none }
html.reveal-all .prog svg > *,
html.reveal-all .badges svg > *{ stroke-dashoffset:0 }
html.reveal-all .path-steps li::after{ transform:scaleX(1) }
html.reveal-all .board-line{ transform:scaleY(1) }
html.reveal-all .board-circle{ transform:scale(1); opacity:1 }
html.reveal-all .badges li{ opacity:1; transform:none }
html.reveal-all .rv .eyebrow-dot{ transform:scaleX(1) }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto }
  .rv{ opacity:1; transform:none }
  .hero h1 .ln em{ transform:none }

  /* motion layer: show every end-state outright, move nothing */
  .preloader{ display:none }
  .w > i{ transform:none }
  .wipe{ clip-path:none }
  .path-steps li::after{ transform:scaleX(1) }
  .board-line{ transform:scaleY(1) }
  .board-circle{ transform:scale(1); opacity:1 }
  .badges li{ opacity:1; transform:none }
  .rv .eyebrow-dot{ transform:scaleX(1) }
  .nav.hidden{ transform:none }
  .corner.rv, .member.rv{ transform:none }
  .rv-l, .rv-r{ transform:none }
  .pre-crest, .pre-bar i{ animation:none }
  .hero-media{ animation:none; transform:none }
  .model::after, .team::after{ display:none }
  .prog svg > *, .badges svg > *{ stroke-dasharray:none; stroke-dashoffset:0 }
  .stat strong.counted{ animation:none }
  .btn:active{ transform:none }
}