/* KSB Sport — cinematic concept. Tokens first, then sections in page order. */
:root{
  --asphalt:#2A2C30;
  --asphalt-deep:#25272A;
  --asphalt-hi:#35383D;
  --line:#ECEEF0;
  --kerb:#D21F26;
  --kerb-dark:#B5161C;
  --sodium:#F2A93B;
  --slate:#9AA1A8;
  --rule:rgba(236,238,240,.14);
  --gutter:clamp(16px,5vw,72px);
  --measure:62ch;
  --section:clamp(72px,12vh,140px);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--asphalt);color:var(--line);
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 100;
  font-size:clamp(16px,1.05vw + 10px,19px);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::after{ /* film grain */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a{color:inherit}
:focus-visible{outline:3px solid var(--sodium);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--line);color:var(--asphalt);padding:8px 12px;z-index:100}
.skip:focus{left:8px}

.display{font-variation-settings:"wdth" 125;font-weight:850;letter-spacing:-.02em;line-height:.92}
h2{font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(2rem,4.2vw,3.6rem);line-height:1;letter-spacing:-.015em;max-width:18ch}
h3{font-variation-settings:"wdth" 112;font-weight:700;font-size:1.25rem;line-height:1.2}
p{max-width:var(--measure)}
.muted{color:var(--slate)}
section{padding:var(--section) var(--gutter)}
.kicker{font-variation-settings:"wdth" 75;color:var(--sodium);font-size:1rem;margin-bottom:1rem}

/* ---------- scroll progress: a racing line along the top ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:30;background:var(--sodium);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px rgba(242,169,59,.7)}

/* ---------- nav ---------- */
header.nav{
  position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--gutter);
  background:linear-gradient(rgba(42,44,48,.92) 0%,rgba(42,44,48,0) 100%);
}
.brand{display:flex;align-items:baseline;gap:.6rem;text-decoration:none}
.brand b{font-variation-settings:"wdth" 125;font-weight:900;font-size:1.5rem;letter-spacing:-.03em}
.brand span{font-variation-settings:"wdth" 75;color:var(--slate);font-size:.9rem}
.nav-right{display:flex;align-items:center;gap:clamp(12px,2.4vw,36px)}
nav ul{display:flex;gap:clamp(12px,2.2vw,32px);list-style:none;font-variation-settings:"wdth" 85;font-size:.95rem}
nav a{text-decoration:none;opacity:.85}
nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.langs-switch{display:flex;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(236,238,240,.3);padding:3px}
.langs-switch button{
  font:inherit;font-variation-settings:"wdth" 85;font-size:.8rem;font-weight:700;color:var(--line);
  background:transparent;border:0;border-radius:999px;padding:.35em .7em;cursor:pointer;opacity:.7;
}
.langs-switch button[aria-pressed="true"]{background:var(--line);color:var(--asphalt);opacity:1}
.langs-switch button:hover{opacity:1}
@media (max-width:860px){nav ul li:not(:last-child){display:none}}
@media (max-width:420px){.brand span{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;border:0;cursor:pointer;text-decoration:none;
  font:inherit;font-variation-settings:"wdth" 100;font-weight:700;font-size:1rem;
  padding:.95em 1.4em;border-radius:999px;
  transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--kerb);color:#fff}
.btn-red:hover{background:var(--kerb-dark)}
.btn-ghost{background:rgba(42,44,48,.35);color:var(--line);box-shadow:inset 0 0 0 1.5px rgba(236,238,240,.55);backdrop-filter:blur(6px)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--line)}
.mic{width:1.05em;height:1.05em}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;padding:0 var(--gutter) clamp(40px,9vh,96px);isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-3}
.hero-media video{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05);animation:push 18s var(--ease-out) both}
@keyframes push{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero svg.track{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.has-video .hero svg.track .surface{opacity:0}     /* with footage, keep only the racing line + gaze */
.has-video .hero svg.track{mix-blend-mode:screen}
/* night-grade the footage so white walls never sit behind white type */
.has-video .hero-media video{filter:saturate(.6) contrast(1.12) brightness(.5)}
.has-video .hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,21,23,.78) 0%,rgba(20,21,23,.35) 55%,rgba(20,21,23,.1) 100%)}
@media (max-width:760px){.has-video .hero-media::after{background:rgba(20,21,23,.55)}}
.has-band-video .band video{filter:saturate(.7) brightness(.62)}
.hero::before{ /* floodlight + vignette + grade */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 55% at 82% 8%,rgba(242,169,59,.22),transparent 70%),
    radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(20,21,23,.85) 100%),
    linear-gradient(rgba(20,21,23,.35),transparent 30%,rgba(42,44,48,.95) 94%);
}
.hero::after{ /* letterbox bars that open on load */
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  border-block:12vh solid #141517;animation:letterbox 1.6s var(--ease-out) .2s forwards;
}
@keyframes letterbox{to{border-block-width:0}}
.hero-copy{position:relative}
/* capped by viewport height too, so four-line titles (DE) never reach the nav */
.hero h1{font-size:clamp(2.6rem,min(10.5vw,14vh),10.5rem);max-width:11ch;padding-top:96px}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.35em);animation:rise .9s var(--ease-out) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.hero .lede{margin-top:1.4rem;font-size:clamp(1.05rem,1.4vw,1.35rem);max-width:44ch}
.hero .ctas{margin-top:2rem;display:flex;flex-wrap:wrap;gap:12px}
.hero .gaze-note{
  position:absolute;right:var(--gutter);top:24vh;max-width:22ch;text-align:right;
  font-variation-settings:"wdth" 75;color:var(--sodium);font-size:.95rem;
  opacity:0;animation:fade .8s ease 2.6s forwards;
}
#racing{stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 2.4s cubic-bezier(.6,.05,.25,1) .6s forwards}
#gaze{opacity:0;animation:fade .6s ease 2.6s forwards, pulse 2.4s ease-in-out 3.2s infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes pulse{50%{r:16}}
@media (max-width:760px){
  .hero .gaze-note{display:none}
  .hero{padding-bottom:150px} /* keep CTAs clear of the floating agent widget */
}

/* ---------- agent ---------- */
.agent{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:start;border-top:1px solid rgba(236,238,240,.12)}
.agent p.body{margin-top:1.4rem}
.langs{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-variation-settings:"wdth" 125;font-weight:700;font-size:clamp(1.2rem,2vw,1.6rem)}
.asks{list-style:none;display:grid;gap:14px}
.asks li{padding:18px 22px;background:var(--asphalt-hi);border-radius:18px 18px 18px 4px;font-size:1.02rem;max-width:34ch}
.asks li:nth-child(even){justify-self:end;border-radius:18px 18px 4px 18px;background:#3B3E44}
.asks li small{display:block;color:var(--slate);font-variation-settings:"wdth" 75;margin-top:4px}
.agent .btn{margin-top:2rem}
.agent .note{margin-top:1rem;font-size:.88rem}
@media (max-width:860px){.agent{grid-template-columns:1fr}}

/* ---------- cinematic band (video or fallback) with scroll-driven headline ---------- */
.band{position:relative;height:clamp(420px,80vh,820px);padding:0;overflow:hidden;display:grid;align-items:center;isolation:isolate}
.band video,.band .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band .fallback{
  background:
    repeating-linear-gradient(100deg,transparent 0 46px,rgba(236,238,240,.05) 46px 48px),
    radial-gradient(70% 90% at 70% 50%,rgba(242,169,59,.25),transparent 70%),
    linear-gradient(180deg,#1C1D20,#2A2C30);
}
.has-band-video .band .fallback{display:none}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--asphalt) 0%,transparent 22%,transparent 78%,var(--asphalt) 100%)}
.band p{
  max-width:none;white-space:nowrap;font-variation-settings:"wdth" 125;font-weight:900;
  font-size:clamp(4rem,13vw,13rem);line-height:.9;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:2px rgba(236,238,240,.9);padding-left:var(--gutter);
}
.band .kerb{position:absolute;left:0;right:0;bottom:12%;height:14px;background:repeating-linear-gradient(90deg,var(--kerb) 0 48px,var(--line) 48px 96px);opacity:.9}

/* ---------- fears ---------- */
.fears h2{max-width:20ch}
.fear-list{margin-top:3rem;list-style:none;border-top:1px solid var(--rule)}
.fear-list li{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;gap:clamp(16px,3vw,48px);
  padding:26px 0;border-bottom:1px solid var(--rule);align-items:baseline;
  transition:background-color .2s ease;
}
.fear-list li:hover{background:rgba(236,238,240,.03)}
.fear-list q{font-variation-settings:"wdth" 112;font-weight:700;font-size:clamp(1.15rem,1.8vw,1.5rem);quotes:"«" "»"}
.fear-list .course{font-variation-settings:"wdth" 75;color:var(--sodium);white-space:nowrap}
@media (max-width:760px){.fear-list li{grid-template-columns:1fr}}

/* ---------- courses ---------- */
.courses{background:var(--asphalt-deep)}
.ladder{margin-top:3.5rem;display:grid;grid-template-columns:28px 1fr;column-gap:clamp(20px,3vw,40px)}
.rail{grid-row:1 / span 2;width:14px;justify-self:center;border-radius:2px;transform-origin:50% 0;
  background:repeating-linear-gradient(180deg,var(--kerb) 0 34px,var(--line) 34px 68px)}
.rung{padding:6px 0 48px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 32px;align-items:baseline}
.rung h3{font-size:clamp(1.6rem,3vw,2.4rem);font-variation-settings:"wdth" 125;font-weight:850}
.price{font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--sodium)}
.rung p{grid-column:1 / -1}
.rung .meta{grid-column:1 / -1;font-variation-settings:"wdth" 75;color:var(--slate)}
.side{margin-top:3rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:2px;background:rgba(236,238,240,.12)}
.side article{background:var(--asphalt-deep);padding:28px 26px 30px;transition:background-color .2s ease}
.side article:hover{background:#2C2E32}
.side .price{font-size:1.6rem;display:block;margin:.5rem 0 .6rem}
.side p{font-size:.98rem}
.courses .book{margin-top:3rem;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- day ---------- */
.day ol{margin-top:3rem;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);counter-reset:s}
.day li{position:relative;padding:28px 18px 0 0;border-top:2px solid rgba(236,238,240,.25)}
.day li::before{counter-increment:s;content:counter(s);position:absolute;top:-15px;left:0;width:28px;height:28px;border-radius:50%;
  background:var(--asphalt);box-shadow:inset 0 0 0 2px var(--sodium);color:var(--sodium);font-size:.8rem;font-weight:800;display:grid;place-items:center}
.day li b{display:block;font-variation-settings:"wdth" 112;font-size:1.1rem;margin-bottom:.35rem}
.day li span{color:var(--slate);font-size:.95rem}
@media (max-width:860px){.day ol{grid-template-columns:1fr;gap:28px}.day li{border-top:0;border-left:2px solid rgba(236,238,240,.25);padding:0 0 0 30px}.day li::before{left:-15px;top:0}}

/* ---------- kit ---------- */
.kit{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);border-top:1px solid rgba(236,238,240,.12)}
.kit h3{margin-bottom:1rem}
.kit ul{list-style:none;display:grid;gap:.5rem}
.kit li{padding-left:1.1rem;position:relative}
.kit li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;background:var(--kerb)}
.kit .rules li::before{background:var(--sodium)}
@media (max-width:860px){.kit{grid-template-columns:1fr}}

/* ---------- proof ---------- */
.proof-wrap{overflow:hidden}
.proof{display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,6vw,96px);align-items:end}
.since{font-size:clamp(5rem,16vw,15rem);color:transparent;-webkit-text-stroke:2px var(--line);line-height:.8}
.proof .riders{margin-top:1.5rem;font-variation-settings:"wdth" 112;font-weight:700;font-size:clamp(1.1rem,1.6vw,1.35rem);max-width:40ch}
.proof .score{margin-top:1.5rem;color:var(--slate)}
.proof .score b{color:var(--line);font-variation-settings:"wdth" 125}
@media (max-width:860px){.proof{grid-template-columns:1fr}}

/* ---------- where ---------- */
.where{background:var(--asphalt-deep);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.where address{font-style:normal;font-variation-settings:"wdth" 112;font-weight:700;font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.25;margin-top:1.2rem}
.where .muted{margin-top:1rem}
.where dl{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.4rem;margin-top:.5rem}
.where dt{color:var(--slate);font-variation-settings:"wdth" 75}
.where .btn{margin-top:2rem}
@media (max-width:860px){.where{grid-template-columns:1fr}}

footer{padding:40px var(--gutter) 120px;color:var(--slate);font-size:.9rem;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;border-top:1px solid rgba(236,238,240,.12)}

/* ---------- scroll-driven motion (progressive enhancement) ---------- */
@supports (animation-timeline: scroll()){
  .progress{animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{to{transform:scaleX(1)}}

  /* hero copy drifts up and fades as you leave; footage pushes in */
  .hero-copy{animation:leave linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  @keyframes leave{to{transform:translateY(-18vh);opacity:0}}

  /* the band headline rides across the screen with the scroll, like a pass-by */
  .band p{animation:passby linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes passby{from{transform:translateX(35%)}to{transform:translateX(-75%)}}
  .band .kerb{animation:kerbrun linear both;animation-timeline:view()}
  @keyframes kerbrun{from{background-position:0 0}to{background-position:-960px 0}}

  /* the kerb rail of the course ladder is laid down as you read */
  .rail{animation:lay linear both;animation-timeline:view();animation-range:entry 20% cover 55%}
  @keyframes lay{from{transform:scaleY(0)}to{transform:scaleY(1)}}

  /* fear lines slide in from the outside of the corner */
  .fear-list li{animation:apex linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  @keyframes apex{from{opacity:0;transform:translateX(-6vw)}to{opacity:1;transform:none}}

  /* 2006 slides in like a number board */
  .since{animation:board linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  @keyframes board{from{transform:translateX(-40%);opacity:0}to{transform:none;opacity:1}}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  #racing{stroke-dashoffset:0}
  #gaze,.hero .gaze-note,.hero h1 .w{opacity:1;transform:none}
  .hero::after{border-block-width:0}
  .progress{display:none}
}