:root{
  --black:#050506;
  --ink:#09090b;
  --panel:#101012;
  --panel2:#151518;
  /* Section slab tone, one step up from --black. Used by #journey, #safety and
     #faq (and the journey station dots) to alternate against the #09090b
     sections. Must stay DARKER than --panel, or the cards sitting on top of
     these sections stop reading as raised surfaces. */
  --charcoal:#0c0c0f;
  --line:#29292e;
  --line2:#3a3a40;
  --white:#f5f3ee;
  --muted:#92929a;
  --red:#e2140a;
  --red2:#ff3a27;
  --red3:#74110b;
  --green:#a7ffb0;
  --max:1280px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--black)}
/* Anchor jumps land under the fixed nav without this. */
section[id],footer[id]{scroll-margin-top:84px}
body{
  background:var(--black);color:var(--white);
  font-family:Archivo,system-ui,sans-serif;
  overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
img,video{max-width:100%}
h1,h2,h3,h4{
  font-family:Oswald,sans-serif;text-transform:uppercase;
  line-height:.92;letter-spacing:.01em;
  /* Safety net: display type is the only thing on this page long enough to
     force a horizontal scrollbar. A single unbreakable word ("FUNDAMENTALS",
     "@v10_drifting_academy") was widening the whole document at high zoom. */
  overflow-wrap:break-word
}
/* Grid and flex children default to min-width:auto, which lets that same long
   word push a track past the viewport even when the text itself can wrap. */
.wrap>*,.section-head,.safety-layout>*,.faq-layout>*,.about-grid>*,
.dual-grid>*,.inst-grid>*,.tst-grid>*,.pkg-grid>*{min-width:0}
p,li,.dual-points div,.dual-kicker,.stage-fact b,.req small,.gear span,
.competition-hud div,.race-path span{overflow-wrap:break-word}
.dual-points,.dual-points div,.about-copy,.principles,.principle,.principle strong,
.info-panel,.info-panel>*,.station,.station-name,.compete-inner,.stage-body{min-width:0}
.principle strong,.stage-fact small,.inst-role,.tst-who strong{overflow-wrap:break-word}
.mono{font-family:"JetBrains Mono",monospace}
.wrap{width:min(var(--max),100%);margin:auto;padding:0 34px}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  color:var(--red2);font:600 11px/1 "JetBrains Mono",monospace;
  text-transform:uppercase;letter-spacing:.22em;margin-bottom:20px
}
.eyebrow:before{content:"";width:24px;height:1px;background:currentColor}
.section-head{max-width:760px;margin-bottom:70px}
.section-head h2{font-size:clamp(28px,5.8vw,76px)}
.section-head p{color:var(--muted);line-height:1.8;font-size:15px;margin-top:22px;max-width:650px}
.reveal{opacity:0;transform:translateY(42px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ---------- LOADER ---------- */
#loader{
  position:fixed;inset:0;z-index:2000;background:#030304;overflow:hidden;
  display:grid;place-items:center;transition:opacity .6s ease,visibility .6s ease
}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none}
/* FAILSAFE: if the loader script never runs (JS error, blocked script, slow
   parse) this CSS animation retires the overlay on its own after 4s, so the
   site can never be left stuck behind a black screen. Do not remove. */
#loader{animation:loader-failsafe 0s linear 4s forwards}
@keyframes loader-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}

.loader-inner{
  width:min(460px,80vw);text-align:center;position:relative;z-index:2;
  transition:transform .55s var(--ease),opacity .4s ease
}
#loader.hide .loader-inner{transform:translateY(-10px) scale(.985);opacity:0}

/* Wordmark, built the same way as the hero headline: each half rises out of a
   clipped line, and the dot is the brand red. */
.loader-mark{
  display:flex;align-items:baseline;justify-content:center;
  font:700 clamp(40px,9vw,64px) Oswald,sans-serif;line-height:1;letter-spacing:-.01em
}
.lm-line{display:inline-block;overflow:hidden}
.lm-line>span{display:inline-block;transform:translateY(110%);animation:lm-rise .75s var(--ease) forwards}
.lm-line:nth-of-type(1)>span{animation-delay:.05s}
.lm-line:nth-of-type(2)>span{animation-delay:.2s}
.lm-dot{color:var(--red);opacity:0;animation:lm-dot .4s .5s forwards,lm-pulse 1.4s 1s ease-in-out infinite}
@keyframes lm-rise{to{transform:translateY(0)}}
@keyframes lm-dot{to{opacity:1}}
@keyframes lm-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Speed rail: a red fill with a hot leading edge, so it reads as travel
   rather than as a generic progress bar. */
.loader-rail{
  position:relative;height:2px;background:#1b1b1f;overflow:hidden;
  margin:34px auto 0;max-width:300px
}
.loader-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,var(--red3),var(--red));
  box-shadow:0 0 14px rgba(226,20,10,.75);
  animation:loader-fill 1.9s var(--ease) forwards
}
.loader-fill:after{
  content:"";position:absolute;right:0;top:-3px;bottom:-3px;width:16px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9))
}
@keyframes loader-fill{to{width:100%}}

.loader-status{
  margin-top:22px;font:600 10px "JetBrains Mono",monospace;letter-spacing:.38em;
  color:#65656d;text-transform:uppercase
}
.loader-status b{color:var(--red2);font-weight:600}

/* Faint streaks crossing the black, the same device the hero uses. */
.loader-streaks{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.loader-streaks i{
  position:absolute;left:-30%;height:1px;width:24%;
  background:linear-gradient(90deg,transparent,rgba(226,20,10,.5),transparent);
  animation:lstreak 2.4s linear infinite
}
.loader-streaks i:nth-child(1){top:31%;animation-delay:0s}
.loader-streaks i:nth-child(2){top:57%;width:17%;animation-delay:.6s}
.loader-streaks i:nth-child(3){top:72%;width:21%;animation-delay:1.2s}
@keyframes lstreak{
  0%{transform:translateX(0);opacity:0}
  12%{opacity:1}
  65%{opacity:0}
  100%{transform:translateX(520%);opacity:0}
}

/* ---------- CURSOR ---------- */
.cursor,.cursor-dot{position:fixed;pointer-events:none;z-index:1900;border-radius:50%;mix-blend-mode:difference}
.cursor{width:30px;height:30px;border:1px solid rgba(255,255,255,.7);transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s}
.cursor-dot{width:5px;height:5px;background:#fff;transform:translate(-50%,-50%)}
.cursor.big{width:65px;height:65px;border-color:var(--red2)}
@media(max-width:900px){.cursor,.cursor-dot{display:none}}

/* ---------- PROGRESS RAIL ---------- */
#progress{
  position:fixed;left:0;top:0;bottom:0;width:62px;z-index:1000;
  border-right:1px solid rgba(255,255,255,.08);
  pointer-events:none;background:linear-gradient(90deg,rgba(5,5,6,.88),rgba(5,5,6,.25))
}
/* Track sits on the right of the rail; the label gets the left half to itself
   so the two can never touch. Both are centred vertically. */
.progress-track{
  position:absolute;left:44px;top:50%;transform:translateY(-50%);
  height:48%;width:2px;background:#28282c
}
/* Fill grows downward from the top, matching the order the dots light up in.
   It used to grow upward from the bottom, which read as two unrelated things. */
.progress-fill{
  position:absolute;top:0;left:0;width:100%;height:0;
  background:linear-gradient(#ff3a27,#e2140a);box-shadow:0 0 14px rgba(226,20,10,.75)
}
/* translate(-50%,-50%) centres each dot ON its top% — the old translate(-50%,50%)
   pushed every dot half its own height down, so the line visibly overshot the
   first dot and stopped short of the last. */
.progress-dot{
  position:absolute;left:50%;width:9px;height:9px;border:1px solid #555;border-radius:50%;
  background:var(--black);transform:translate(-50%,-50%);transition:.3s;z-index:2
}
.progress-dot.active{border-color:var(--red2);background:var(--red);box-shadow:0 0 14px rgba(226,20,10,.65)}
/* Label lives in the left half of the rail with its own backdrop, so it stays
   readable even where the track's red glow spills across. */
.progress-stage{
  position:absolute;left:8px;top:50%;transform:translateY(-50%);
  color:var(--red2);font:700 12px "JetBrains Mono",monospace;writing-mode:vertical-rl;
  letter-spacing:.18em;padding:10px 3px;
  background:rgba(5,5,6,.9);border-radius:2px;
  text-shadow:0 0 8px rgba(5,5,6,.95)
}
@media(max-width:900px){#progress{display:none}}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  padding:24px 38px 24px 100px;display:flex;align-items:center;justify-content:space-between;
  transition:.45s var(--ease)
}
nav.scrolled{padding-top:13px;padding-bottom:13px;background:rgba(5,5,6,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}
.logo{font:700 23px Oswald,sans-serif;letter-spacing:.05em}
.logo span{color:var(--red)}
/* The mark is the supplied vector logo, background removed. The two heights are
   chosen to keep the measured nav heights unchanged: on desktop the bar is
   driven by .nav-cta (46px min-height), on mobile the CTA is hidden so the logo
   itself drives it and must stay at the 34px the old text occupied. The font
   rule above still styles the alt text if the SVG ever fails to load. */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{height:44px;width:auto;display:block}
.navlinks{display:flex;gap:22px}
.navlinks a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#aaa;position:relative}
.navlinks a:after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:1px;background:var(--red);transition:.3s}
.navlinks a:hover{color:#fff}.navlinks a:hover:after{width:100%}
.nav-cta,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:46px;padding:0 22px;border:1px solid var(--red);
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  transition:.3s var(--ease);cursor:pointer
}
.nav-cta{background:var(--red)}
.nav-cta:hover,.btn.primary:hover{background:var(--red2);box-shadow:0 0 35px rgba(226,20,10,.28);transform:translateY(-2px)}
.menu-btn{display:none;background:none;color:#fff;border:0;font-size:25px}
@media(max-width:900px){
  nav{padding:18px 20px}
  nav.scrolled{padding:12px 20px}
  .navlinks,.nav-cta{display:none}.menu-btn{display:block}
  .logo img{height:34px}          /* keeps the mobile bar at its measured 70px */
}

/* ---------- MOBILE MENU ---------- */
#mobile-menu{position:fixed;inset:0;background:#050506;z-index:850;padding:105px 28px 30px;transform:translateX(100%);transition:.5s var(--ease)}
#mobile-menu.show{transform:none}
.mobile-links{display:grid;gap:4px}
.mobile-links a{font:600 clamp(26px,8.5vw,46px) Oswald,sans-serif;text-transform:uppercase;border-bottom:1px solid #242428;padding:8px 0}
.mobile-links a span{color:var(--red);font-size:.45em;vertical-align:top}
.mobile-close{position:absolute;right:24px;top:18px;background:none;border:0;color:#fff;font-size:30px}

/* ---------- HERO ---------- */
.hero{
  min-height:100svh;position:relative;overflow:hidden;display:flex;align-items:flex-end;
  padding:150px 7vw 82px 100px
}
.hero-media{position:absolute;inset:0;overflow:hidden;background:#09090b}
/* No filter: the clip is shown exactly as graded. It used to carry
   grayscale(.7) + brightness(.48), which was a bigger darkener than the
   overlay element itself. */
.hero-media img,.hero-media video{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;transform:scale(1.04)}
.hero-redwash{position:absolute;inset:auto -10% -30% auto;width:60vw;height:70vh;background:radial-gradient(circle,rgba(226,20,10,.17),transparent 65%);filter:blur(30px)}
.hero-grid{
  position:absolute;inset:auto -10% -15% -10%;height:48%;opacity:.55;
  transform:perspective(420px) rotateX(62deg);transform-origin:bottom;
  background-image:linear-gradient(rgba(226,20,10,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(226,20,10,.22) 1px,transparent 1px);
  background-size:100% 48px,72px 100%;animation:gridmove 3s linear infinite
}
@keyframes gridmove{to{background-position:0 48px,0 0}}
.hero-sweep{
  position:absolute;top:0;bottom:0;width:16vw;left:-25vw;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);
  transform:skewX(-18deg);animation:sweep 5.5s 1.7s ease-in-out infinite
}
@keyframes sweep{0%{left:-25vw}38%,100%{left:125vw}}
.hero-content{position:relative;z-index:3;max-width:980px}
/* ---------- HERO REVEAL ----------
   The clip runs alone for the first 2s; nothing textual is on screen. Every
   delay below is the original timing plus that 2s hold, so the headline keeps
   the exact animation it had — only the trigger moved. */
:root{--hero-hold:2s}
@keyframes hero-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero .eyebrow,.hero-copy,.hero-ctas,.hero-metrics,.hero-scroll{
  /* `both` so the 20px offset is already applied during the 2s delay, not
     snapped on at the moment the animation starts. */
  opacity:0;animation:hero-rise .8s cubic-bezier(.16,.84,.44,1) both
}
.hero .eyebrow{animation-delay:calc(var(--hero-hold) + .05s)}
.hero-copy    {animation-delay:calc(var(--hero-hold) + .45s)}
.hero-ctas    {animation-delay:calc(var(--hero-hold) + .6s)}
.hero-metrics {animation-delay:calc(var(--hero-hold) + .75s)}
.hero-scroll  {animation-delay:calc(var(--hero-hold) + .9s)}
.hero h1{font-size:clamp(34px,9vw,132px);font-weight:700;letter-spacing:-.025em;
  /* Replaces the scrim's job: keeps the headline readable over a bright frame
     without covering the clip. */
  text-shadow:0 3px 22px rgba(0,0,0,.75)}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:block;transform:translateY(115%);animation:up .95s var(--ease) forwards}
.hero h1 .line:nth-child(1) span{animation-delay:calc(var(--hero-hold) + .2s)}
.hero h1 .line:nth-child(2) span{animation-delay:calc(var(--hero-hold) + .34s);color:var(--red)}
.hero-copy{max-width:600px;margin-top:28px;color:#e2e2e7;line-height:1.75;font-size:15px;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn.primary{background:var(--red)}
.btn.ghost{border-color:#5a5a63;background:rgba(255,255,255,.04);color:var(--white)}
.btn.ghost:hover{border-color:var(--red2);background:rgba(226,20,10,.12);color:#fff;transform:translateY(-2px)}
/* "Request this package" sits on the darkest card background in the site, so
   it gets the strongest treatment of the ghost variants. */
.pkg-card .book-btn{border-color:var(--red3);background:rgba(226,20,10,.10);color:#fff;font-weight:700}
.pkg-card .book-btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.hero-metrics{
  position:absolute;right:4vw;bottom:55px;z-index:4;display:grid;gap:14px;
  width:170px;font:500 9px "JetBrains Mono",monospace;color:#85858d;letter-spacing:.08em
}
.metric{border-left:1px solid var(--red);padding-left:12px}
.metric b{display:block;color:#fff;font-size:12px;margin-bottom:3px}
/* Lives in the gutter between the 62px fixed progress rail and the hero's
   100px left padding. .hero-metrics owns the bottom-right corner; the two used
   to sit on top of each other at right:4vw.
   Both the rail and this element hide together at 900px, so a single offset
   is correct at every width where either is visible. */
.hero-scroll{
  position:absolute;left:74px;bottom:50px;z-index:4;color:#8d8d95;
  font:500 9px "JetBrains Mono",monospace;writing-mode:vertical-rl;letter-spacing:.25em
}
.hero-scroll:after{content:"";display:block;width:1px;height:55px;background:linear-gradient(var(--red),transparent);margin:12px auto 0}
@keyframes up{to{transform:translateY(0);opacity:1}}@keyframes fade{to{opacity:1}}
@media(max-width:900px){
  .hero{padding:130px 22px 76px}
  .hero-metrics,.hero-scroll{display:none}
  .hero-copy{font-size:14px}
}

/* ---------- SECTION: EXPERIENCE VS TRAINING ---------- */
.dual{padding:120px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a0a0c}
.dual-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.dual-card{position:relative;min-height:430px;padding:42px;background:var(--black);overflow:hidden}
.dual-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(226,20,10,.12),transparent 55%);opacity:0;transition:.45s}
.dual-card:hover:before{opacity:1}
.dual-kicker{font:600 10px "JetBrains Mono",monospace;color:var(--red2);letter-spacing:.2em}
.dual-card h3{font-size:clamp(26px,5vw,42px);margin:85px 0 15px}
.dual-card p{max-width:470px;color:var(--muted);line-height:1.75;font-size:14px}
.dual-points{margin-top:25px;display:grid;gap:9px}
.dual-points div{font:500 10px "JetBrains Mono",monospace;color:#b6b6bc}
.dual-points div:before{content:"+";color:var(--red);margin-right:8px}
.dual-card .corner{position:absolute;right:24px;top:22px;font:700 10px "JetBrains Mono";color:#555;letter-spacing:.2em}
@media(max-width:760px){.dual-grid{grid-template-columns:1fr}.dual-card{min-height:360px}.dual-card h3{margin-top:65px}}

/* ---------- JOURNEY: ROUTE MAP ----------
   Four stations on one route, all visible at once, all clickable at any time.

   Stability note: there is no JS measurement anywhere in this section. The
   stations are placed at fixed percentages (12.5 / 37.5 / 62.5 / 87.5) inside
   the same box the SVG fills, and the SVG uses preserveAspectRatio="none" with
   a 1000x120 viewBox whose path crosses y=60 at exactly x=125/375/625/875.
   A percentage in the viewBox therefore maps to the same percentage of the
   rendered box at every width, height and zoom level, so the dots sit on the
   line by construction rather than by calculation. */
#journey{padding:145px 0;background:var(--charcoal);border-bottom:1px solid var(--line)}

/* ----- the route ----- */
.route{position:relative;margin-top:64px;height:150px}
.route-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route-line path{fill:none;stroke-linecap:round}
.route-base{stroke:#2e2e34;stroke-width:2;vector-effect:non-scaling-stroke}
/* No stroke-dasharray here on purpose.
   The previous version drew progress with a dash offset, which was wrong twice
   over: (a) it treated a station's x-position percentage as an arc-length
   percentage, which a serpentine curve does not honour, and (b) with
   vector-effect:non-scaling-stroke the browser resolves dash lengths in SCREEN
   pixels while getTotalLength() returns USER units — at 1440px the path is
   ~1276 screen px but the dash array was 1046, so the pattern wrapped and
   painted a second red segment at the far right (stage 01) or stopped short of
   the last dot (stage 04).
   Progress is now real geometry: the red path's own `d` is truncated at the
   active station's true arc length, so it is exact at any scale. */
.route-live{
  stroke:var(--red);stroke-width:2;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(226,20,10,.55))
}

.station{
  position:absolute;top:50%;transform:translateX(-50%);
  /* -10px == half the 20px dot, so the DOT (not the whole stack) is what sits
     centred on the line. Centring the stack put the dot ~29px above it. */
  margin-top:-10px;
  display:grid;justify-items:center;gap:0;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  width:132px;z-index:2
}
.station:nth-of-type(1){left:12.5%}
.station:nth-of-type(2){left:37.5%}
.station:nth-of-type(3){left:62.5%}
.station:nth-of-type(4){left:87.5%}

.station-dot{
  width:20px;height:20px;border-radius:50%;
  border:2px solid #45454d;background:var(--charcoal);
  display:grid;place-items:center;transition:.3s var(--ease)
}
.station-dot:after{
  content:"";width:6px;height:6px;border-radius:50%;background:#45454d;transition:.3s var(--ease)
}
.station-no{
  margin-top:14px;font:700 10px "JetBrains Mono",monospace;letter-spacing:.2em;
  color:var(--red2);transition:.3s
}
.station-name{
  margin-top:6px;font:600 17px Oswald,sans-serif;text-transform:uppercase;
  letter-spacing:.02em;color:#7d7d86;transition:.3s;white-space:nowrap
}

.station:hover .station-dot,.station:focus-visible .station-dot{border-color:var(--red2);transform:scale(1.12)}
.station:hover .station-name,.station:focus-visible .station-name{color:#d8d8de}

.station.is-active .station-dot{
  border-color:var(--red);background:var(--red);
  box-shadow:0 0 0 5px rgba(226,20,10,.16),0 0 20px rgba(226,20,10,.55)
}
.station.is-active .station-dot:after{background:#fff}
.station.is-active .station-name{color:#fff}


/* ----- stage counter (arrows now live beside the panel, not up here) ----- */
.route-controls{
  display:flex;align-items:center;justify-content:flex-start;gap:16px;
  margin-top:54px;padding-bottom:16px;border-bottom:1px solid var(--line)
}
.route-counter{font:600 11px "JetBrains Mono",monospace;letter-spacing:.2em;color:#6f6f77}
.route-counter b{color:var(--red2);font-size:15px}
.route-counter span{color:#4d4d55}

/* ----- prev / next, flanking the panel like a carousel -----
   They sit inside the panel's left and right edges. The left one lands on the
   photograph; the right one lands on the copy column, which is why
   .stage-body gets extra right padding below — text must never run under it. */
.stage-frame{position:relative}
.stage-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:48px;height:48px;display:grid;place-items:center;
  border:1px solid var(--line2);background:rgba(5,5,6,.82);backdrop-filter:blur(6px);
  color:var(--white);font-size:18px;line-height:1;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),opacity .25s;
  --clip:10px;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--clip)), calc(100% - var(--clip)) 100%, 0 100%)
}
.stage-arrow.prev{left:18px}
.stage-arrow.next{right:18px}
.stage-arrow:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.stage-arrow:disabled{opacity:.28;cursor:not-allowed}
/* keep the copy clear of the right-hand arrow */
.stage-body{padding-right:88px}

/* ----- the detail panel ----- */
.stage-panel{
  margin-top:26px;display:grid;grid-template-columns:.95fr 1.05fr;
  border:1px solid var(--line);background:#0c0c0f
}
.stage-panel-inner{display:contents}
.stage-media{position:relative;overflow:hidden;background:#111;min-height:380px}
.stage-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.7) contrast(1.18) brightness(.55)
}
.stage-media:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(9,9,11,.75),rgba(9,9,11,.2) 60%,rgba(226,20,10,.18))
}
.stage-badge{
  position:absolute;left:18px;top:16px;z-index:2;
  font:700 10px "JetBrains Mono",monospace;letter-spacing:.18em;color:#fff;
  background:rgba(5,5,6,.72);border-left:2px solid var(--red);padding:8px 12px
}
.stage-body{padding:46px 44px}
.stage-kicker{font:600 10px "JetBrains Mono",monospace;letter-spacing:.2em;color:var(--red2)}
.stage-body h3{font-size:clamp(30px,3.4vw,44px);margin-top:14px;line-height:1.04}
.stage-body p{color:var(--muted);line-height:1.85;font-size:14.5px;margin-top:18px;max-width:560px}
.stage-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.stage-tags .tag{
  border:1px solid #2e2e34;padding:6px 10px;
  font:500 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:#9a9aa2
}
.stage-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:28px
}
.stage-fact{background:#0e0e12;padding:14px 16px}
.stage-fact small{display:block;font:600 8.5px "JetBrains Mono",monospace;letter-spacing:.16em;color:#6f6f77}
.stage-fact b{display:block;margin-top:7px;font:600 17px Oswald,sans-serif;text-transform:uppercase;color:#fff}
.stage-fact.accent b{color:var(--red2)}

/* Swap transition: one simple fade + lift, nothing else. */
.stage-media,.stage-body{transition:opacity .28s var(--ease),transform .28s var(--ease)}
.stage-panel.swapping .stage-media,
.stage-panel.swapping .stage-body{opacity:0;transform:translateY(10px)}

/* ----- tablet ----- */
@media(max-width:1000px){
  .station{width:104px}
  .station-name{font-size:15px}
  .stage-body{padding:36px 30px;padding-right:78px}
  .stage-media{min-height:300px}
  .stage-arrow{width:44px;height:44px}
  .stage-arrow.prev{left:12px}
  .stage-arrow.next{right:12px}
}

/* ----- mobile: the route turns vertical ----- */
@media(max-width:760px){
  #journey{padding:100px 0}
  /* Equal rows so the dot centres land on exact fractions (12.5 / 37.5 /
     62.5 / 87.5%) with no measurement — the same positions the desktop
     stations use, just rotated. */
  .route{height:auto;margin-top:44px;padding-left:34px;display:grid;grid-auto-rows:1fr;gap:0}
  .route-line{display:none}
  /* Vertical track + a red progress fill, so mobile tells the same progress
     story as the desktop route rather than only lighting one dot. */
  .route:before,.route:after{
    content:"";position:absolute;left:9px;width:2px;
    top:12.5%;height:75%
  }
  .route:before{background:#2e2e34}
  .route:after{
    height:calc(var(--route-p,0) * 25%);
    background:var(--red);box-shadow:0 0 10px rgba(226,20,10,.55);
    transition:height .48s var(--ease)
  }
  .station{
    position:static;transform:none;margin-top:0;width:auto;
    grid-template-columns:auto 1fr auto;justify-items:start;align-items:center;
    gap:14px;padding:14px 0;text-align:left
  }
  /* margin-left == -(route padding-left): the dot lands at 0..20px, centre 10,
     which is exactly the centre of the 2px track at left:9. Previously the dot
     centre was at x=0 while the track ran at x=9-11. */
  .station-dot{margin-left:-34px;grid-row:1;grid-column:1}
  .station-no{margin-top:0;grid-row:1;grid-column:2}
  .station-name{margin-top:0;grid-row:1;grid-column:3;justify-self:start;font-size:19px}
  .stage-panel{grid-template-columns:1fr;margin-top:22px}
  .stage-media{min-height:230px}
  .stage-body{padding:30px 22px}
  .stage-facts{grid-template-columns:1fr}
  /* Overlaying a narrow column would cover the copy, so the arrows become a
     row directly under the slide instead. */
  .stage-frame{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .stage-panel{grid-column:1/-1;grid-row:1}
  .stage-arrow{
    position:static;transform:none;grid-row:2;width:auto;height:56px;
    backdrop-filter:none;background:rgba(255,255,255,.04)
  }
  .stage-arrow.prev{grid-column:1}
  .stage-arrow.next{grid-column:2}
}

/* Very narrow viewports — a small phone, or any phone at high browser zoom.
   Grid and flex items default to min-width:auto, so a long unbreakable word
   ("Competition", "Consistency") can force a track wider than the screen.
   min-width:0 plus wrapping lets everything shrink instead of overflowing. */
.station{min-width:0}
.stage-panel>*{min-width:0}
.stage-body h3,.stage-body p,.stage-kicker{overflow-wrap:anywhere}
.stage-fact b,.stage-fact small{overflow-wrap:anywhere}

@media(max-width:420px){
  .route{padding-left:28px;min-width:0}
  .station-name{font-size:16px;white-space:normal;min-width:0;overflow-wrap:break-word}
  .station-no{min-width:0}
  .stage-arrow{height:52px;font-size:17px}
  .station-no{font-size:9px}
  .station{gap:10px}
  .stage-body{padding:26px 18px}
  .stage-body h3{font-size:26px}
  .route{padding-left:28px}
  .station-dot{margin-left:-28px}   /* keep dot centre on the track at x=10 */
}

/* ---------- ABOUT / BRAND ---------- */
.about{padding:145px 0}
.about-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:64px;align-items:center}
.about-media{position:relative;aspect-ratio:1/1;max-width:400px;border:1px solid var(--line);overflow:hidden;background:#111}
.about-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.65) contrast(1.18) brightness(.75);transition:1.2s var(--ease)}
.about-media:hover img{transform:scale(1.06);filter:grayscale(.15) contrast(1.08) brightness(.8)}
.media-label{position:absolute;left:18px;bottom:18px;border:1px solid rgba(255,255,255,.16);background:rgba(5,5,6,.7);padding:9px 12px;font:500 9px "JetBrains Mono";letter-spacing:.12em}
.media-corner{position:absolute;right:18px;top:18px;color:var(--red);font:700 9px "JetBrains Mono";letter-spacing:.16em}
.about-copy h2{font-size:clamp(28px,5vw,67px)}
.about-copy>p{color:var(--muted);line-height:1.85;font-size:15px;margin-top:24px;max-width:620px}
.principles{margin-top:40px;border-top:1px solid var(--line)}
.principle{display:grid;grid-template-columns:50px 1fr 22px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}
.principle i{font:600 10px "JetBrains Mono";color:var(--red)}
.principle strong{font:600 18px Oswald;text-transform:uppercase}
.principle span{color:#666;font-size:16px}
.principle:hover strong{color:var(--red2)}
@media(max-width:800px){.about-grid{grid-template-columns:1fr;gap:45px}}

/* ---------- PACKAGES ---------- */
/* No border-bottom: directly below this sits .dual, which draws its own
   border-top. Keeping both stacked a 2px rule under the pricing grid. */
#packages{padding:145px 0;background:#09090b;border-top:1px solid var(--line)}
.package-top{display:flex;justify-content:space-between;gap:40px;align-items:end}
.package-note{font:500 9px "JetBrains Mono";color:#777;line-height:1.8;max-width:300px}
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:65px}
.pkg-card{
  background:var(--panel);padding:32px 28px 28px;position:relative;min-height:410px;
  display:flex;flex-direction:column;transition:.4s var(--ease);overflow:hidden
}
.pkg-card:after{content:"";position:absolute;inset:auto -30% -55% -30%;height:70%;background:radial-gradient(circle,rgba(226,20,10,.13),transparent 65%);opacity:0;transition:.4s}
.pkg-card:hover{background:#121215;transform:translateY(-7px);z-index:2;box-shadow:0 25px 60px rgba(0,0,0,.45)}
.pkg-card:hover:after{opacity:1}
.pkg-card.recommended{border-top:2px solid var(--red)}
.pkg-level{font:600 9px "JetBrains Mono";color:var(--red2);letter-spacing:.18em}
.pkg-card h3{font-size:clamp(24px,5vw,34px);margin-top:18px}
.pkg-sub{font:500 10px "JetBrains Mono";color:#777;margin-top:8px}
.pkg-price{font:700 32px Oswald;margin-top:30px}
.pkg-price span{font:400 11px Archivo;color:#777}
.pkg-features{list-style:none;margin:24px 0;display:grid;gap:0}
.pkg-features li{border-top:1px solid #26262b;padding:9px 0;color:#a5a5ac;font-size:12px}
.pkg-features li:before{content:"+";color:var(--red);margin-right:8px}
.pkg-card .book-btn{margin-top:auto;position:relative;z-index:3;width:100%}
.recommended-badge{position:absolute;right:0;top:0;background:var(--red);padding:6px 10px;font:700 8px "JetBrains Mono";letter-spacing:.1em}
.trial{
  margin-top:18px;border:1px dashed #6e1711;padding:28px 30px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(90deg,rgba(226,20,10,.09),transparent)
}
.trial h3{font-size:clamp(21px,4.5vw,27px)}.trial p{font-size:12px;color:#85858c;margin-top:7px}
@media(max-width:900px){.pkg-grid{grid-template-columns:1fr}.package-top{display:block}.package-note{margin-top:20px}.trial{display:block}.trial .btn{margin-top:18px;width:100%}}


/* ---------- PACKAGE CARD ACTIONS ---------- */
.pkg-actions{margin-top:auto;position:relative;z-index:3;display:grid;gap:8px}
.pkg-card .book-btn{width:100%}
/* A quieter second action so the card still has one obvious primary. */
.btn.quiet{
  border-color:#2e2e34;background:transparent;color:#9a9aa2;
  font-weight:600;letter-spacing:.14em;min-height:40px
}
.btn.quiet:hover{border-color:var(--line2);background:rgba(255,255,255,.04);color:var(--white)}

/* ---------- PACKAGE DETAILS MODAL ----------
   Same shell as the booking modal so the two read as one system. Everything
   inside is written from the `packages` array at open time. */
#pkg-modal{
  position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:18px;
  background:rgba(0,0,0,.78);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transition:.35s
}
#pkg-modal.show{opacity:1;visibility:visible}
.pkg-panel{
  width:min(640px,100%);max-height:92vh;overflow:auto;background:#0b0b0d;
  border:1px solid #35353a;position:relative;
  transform:translateY(25px);transition:.45s var(--ease);
  --clip:18px;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--clip)), calc(100% - var(--clip)) 100%, 0 100%)
}
#pkg-modal.show .pkg-panel{transform:none}

.pkg-panel-head{padding:38px 38px 26px;border-bottom:1px solid var(--line);position:relative}
.pkg-panel-head:before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent,var(--red))
}
.pkg-modal-level{font:600 10px "JetBrains Mono",monospace;letter-spacing:.2em;color:var(--red2)}
.pkg-panel-head h3{font-size:clamp(30px,5vw,46px);margin-top:12px;line-height:1.02}
.pkg-modal-sub{margin-top:10px;font:500 10px "JetBrains Mono",monospace;letter-spacing:.1em;color:#7d7d85}
.pkg-modal-badge{
  display:inline-block;margin-top:14px;background:var(--red);color:#fff;
  padding:5px 9px;font:700 8px "JetBrains Mono",monospace;letter-spacing:.14em
}
.pkg-modal-body{padding:28px 38px 34px}
.pkg-modal-desc{color:var(--muted);line-height:1.85;font-size:14.5px}

.pkg-modal-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:26px
}
.pkg-modal-fact{background:#0e0e12;padding:14px 16px;min-width:0}
.pkg-modal-fact small{display:block;font:600 8.5px "JetBrains Mono",monospace;letter-spacing:.16em;color:#6f6f77}
.pkg-modal-fact b{display:block;margin-top:7px;font:600 16px Oswald,sans-serif;text-transform:uppercase;color:#fff;overflow-wrap:break-word}
.pkg-modal-fact.accent b{color:var(--red2)}

.pkg-modal-features{margin-top:26px}
.pkg-modal-features h4{font:600 10px "JetBrains Mono",monospace;letter-spacing:.2em;color:#6f6f77}
.pkg-modal-features ul{list-style:none;margin-top:12px;display:grid;gap:0}
.pkg-modal-features li{
  border-top:1px solid #26262b;padding:11px 0;color:#c2c2c8;font-size:13.5px;
  display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:baseline
}
.pkg-modal-features li:before{content:"+";color:var(--red)}

.pkg-modal-price{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap
}
.pkg-modal-price b{font:700 34px Oswald,sans-serif;color:#fff}
.pkg-modal-price span{font:500 10px "JetBrains Mono",monospace;letter-spacing:.14em;color:#6f6f77}
.pkg-modal-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.pkg-modal-actions .btn{flex:1 1 200px}
.pkg-modal-note{
  margin-top:18px;border-left:2px solid var(--red);background:rgba(226,20,10,.06);
  padding:12px 15px;font:500 10px "JetBrains Mono",monospace;color:#b8b8c0;line-height:1.85
}

@media(max-width:620px){
  .pkg-panel-head{padding:30px 22px 22px}
  .pkg-modal-body{padding:24px 22px 28px}
  .pkg-modal-facts{grid-template-columns:1fr}
  .pkg-modal-actions .btn{flex:1 1 100%}
}

/* ---------- BOOKING ---------- */
#booking{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.78);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:.35s}
#booking.show{opacity:1;visibility:visible}
.booking-panel{width:min(620px,100%);max-height:92vh;overflow:auto;background:#0b0b0d;border:1px solid #35353a;padding:38px;position:relative;transform:translateY(25px);transition:.45s var(--ease)}
#booking.show .booking-panel{transform:none}
.close{position:absolute;right:18px;top:14px;border:0;background:none;color:#888;font-size:22px;cursor:pointer}
.close:hover{color:#fff}
.booking-head h3{font-size:clamp(26px,6vw,42px)}.booking-head p{color:#888;font-size:13px;line-height:1.7;margin-top:12px}
.selected{margin:22px 0;border-left:2px solid var(--red);background:#111114;padding:14px 16px;font:500 10px "JetBrains Mono";color:#777}
.selected b{color:#fff}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}.field.full{grid-column:1/-1}
.field label{display:block;color:#888;font:500 9px "JetBrains Mono";letter-spacing:.13em;text-transform:uppercase;margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%;background:#050506;border:1px solid #2a2a2e;color:#fff;padding:13px 14px;outline:0
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--red)}
.form-actions{display:flex;gap:10px;margin-top:5px}.form-actions .btn{flex:1}
.success{text-align:center;padding:35px 5px}.success-mark{width:64px;height:64px;border:1px solid var(--red);border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;color:var(--red2);font-size:25px}
.success h3{font-size:clamp(24px,5.5vw,36px)}.success p{color:#888;line-height:1.7;font-size:13px;margin-top:10px}
@media(max-width:620px){.booking-panel{padding:30px 20px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.booking-head h3{font-size:34px}}


/* ---------- BOOKING FORM (Phase 4) ---------- */
/* Honeypot: off-screen rather than display:none, because some bots skip
   fields that are display:none. Hidden from humans and from screen readers. */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

.field{position:relative}
.field input,.field textarea{transition:border-color .25s,background .25s}
.field.invalid input,.field.invalid textarea{border-color:var(--red);background:rgba(226,20,10,.05)}
.field.valid input,.field.valid textarea{border-color:#2f4a33}
.field-error{
  display:none;margin-top:6px;color:var(--red2);
  font:500 9.5px "JetBrains Mono",monospace;letter-spacing:.07em;line-height:1.5
}
.field.invalid .field-error{display:block;animation:errshake .3s ease-in-out}
@keyframes errshake{
  0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}
}
.field label .req-star{color:var(--red);margin-left:3px}

/* Summary banner for form-level problems (network failure, unconfigured key) */
.form-alert{
  display:none;margin-bottom:18px;border-left:2px solid var(--red);
  background:rgba(226,20,10,.08);padding:14px 16px;
  font:500 11px "JetBrains Mono",monospace;color:#e8d3d1;line-height:1.75
}
.form-alert.show{display:block}
.form-alert b{color:#fff;display:block;margin-bottom:5px;letter-spacing:.08em}
.form-alert a{color:var(--red2);text-decoration:underline}

/* Submit button loading state */
.btn[data-loading="true"]{pointer-events:none;opacity:.75}
.btn[data-loading="true"] .btn-label{visibility:hidden}
.btn .spinner{
  position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;display:none;animation:spin .7s linear infinite
}
.btn[data-loading="true"] .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.form-actions .btn{position:relative}

/* WhatsApp fallback rail under the form */
.form-fallback{
  margin-top:20px;padding-top:20px;border-top:1px solid #26262b;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap
}
.form-fallback p{color:#7d7d85;font:500 10px "JetBrains Mono",monospace;letter-spacing:.08em;line-height:1.7;max-width:300px}
.wa-btn{
  display:inline-flex;align-items:center;gap:9px;border:1px solid #2c5f3a;background:rgba(37,211,102,.07);
  padding:12px 16px;font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;
  color:#7fe0a0;transition:.25s;white-space:nowrap
}
.wa-btn:hover{background:rgba(37,211,102,.16);border-color:#3f8f55;color:#a6f0be}
.wa-btn svg{width:15px;height:15px;fill:currentColor;flex:0 0 15px}

/* Success / error panels */
.success-recap{
  margin:22px auto 0;max-width:380px;text-align:left;border:1px solid #26262b;background:#0e0e11;padding:16px 18px
}
.success-recap div{
  display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  font:500 10px "JetBrains Mono",monospace;letter-spacing:.06em;color:#82828a
}
.success-recap div+div{border-top:1px solid #1e1e22}
.success-recap b{color:#fff;text-align:right;font-weight:600}
.success-next{
  margin-top:22px;text-align:left;border-left:2px solid var(--red);padding:12px 16px;
  background:rgba(226,20,10,.06);font:500 10px "JetBrains Mono",monospace;color:#c0c0c7;line-height:1.85
}
.success .form-fallback{justify-content:center;text-align:center}
.success-mark.fail{border-color:#5a5a62;color:#9a9aa2}
@media(max-width:620px){
  .form-fallback{flex-direction:column;align-items:stretch}
  .form-fallback p{max-width:none}
  .wa-btn{justify-content:center}
}


/* ---------- FORM: optional markers, package select, confirmation ---------- */
.field label .opt{color:#6a6a72;font-weight:500;letter-spacing:.08em}
.field select{
  width:100%;background:#050506;border:1px solid #2a2a2e;color:#fff;
  padding:13px 14px;outline:0;font:inherit;cursor:pointer;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#8a8a92 50%),linear-gradient(135deg,#8a8a92 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat
}
.field select:focus{border-color:var(--red)}
.field select option{background:#0b0b0d;color:#fff}

/* Confirmation — deliberately larger and calmer than the form it replaces. */
.success{padding:44px 5px}
.success h3{font-size:clamp(28px,5vw,40px)}
.success-lead{
  color:#d2d2d8;font-size:15.5px;line-height:1.85;margin-top:18px;
  max-width:460px;margin-left:auto;margin-right:auto
}
.success-lead b{color:#fff}
.success-hours{
  margin:22px auto 0;max-width:460px;border:1px solid var(--line);background:#0e0e12;
  padding:18px 20px;color:var(--muted);font-size:13.5px;line-height:1.8
}
.success-hours b{display:block;margin-top:6px;color:#fff;font:600 16px Oswald,sans-serif;letter-spacing:.02em}
.success-temp{
  display:block;margin-top:10px;font:500 9px "JetBrains Mono",monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red2)
}


/* ---------- PRODUCTS ---------- */
/* Was background:var(--charcoal) — the same tone as #safety. That only read as
   two sections while #packages sat between them; Packages has moved under the
   hero, so Shop now takes the panel tone to keep the alternation going. */
#products{padding:145px 0;background:#09090b;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.product-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:65px
}
.prod-card{
  background:var(--panel);display:flex;flex-direction:column;position:relative;
  transition:background .4s var(--ease),transform .4s var(--ease);min-width:0
}
.prod-card:hover{background:#121215;transform:translateY(-6px);z-index:2;box-shadow:0 22px 55px rgba(0,0,0,.45)}
.prod-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#111}
.prod-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.55) contrast(1.1) brightness(.85);
  transition:filter .6s var(--ease),transform .8s var(--ease)
}
.prod-card:hover .prod-media img{filter:none;transform:scale(1.05)}
/* red sweep, the same device the instructor portraits use */
.prod-media:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(226,20,10,.30) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .85s var(--ease)
}
.prod-card:hover .prod-media:after{transform:translateX(120%)}

.prod-body{padding:24px 24px 22px;display:flex;flex-direction:column;flex:1;min-width:0}
.prod-body h3{font-size:24px;line-height:1.1}
.prod-tagline{
  margin-top:8px;color:var(--muted);font-size:13px;line-height:1.7;flex:1;
  overflow-wrap:break-word
}
.prod-foot{
  margin-top:20px;padding-top:16px;border-top:1px solid #26262b;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap
}
.prod-price{font:700 21px Oswald,sans-serif;color:#fff;white-space:nowrap}
.prod-card .btn.quiet{min-height:38px;padding:0 16px}

@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .product-grid{grid-template-columns:1fr}
  .prod-body{padding:20px}
  .prod-foot{flex-direction:column;align-items:stretch}
  .prod-card .btn.quiet{width:100%}
}

/* ---------- DETAILS MODAL: product variant ----------
   Reuses the #pkg-modal shell, so open/close/focus-trap behaviour is shared.
   Only the panel's contents differ. */
.pkg-panel .detail-media{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:#111;border-bottom:1px solid var(--line)
}
.pkg-panel .detail-media img{width:100%;height:100%;object-fit:cover;display:block}


/* ---------- BOOKING MODAL MODES ----------
   The same form serves a training booking and a product request. Rows tagged
   data-for="..." show only in their own mode, so there is one form, one
   validation path and one confirmation panel. */
#booking [data-for]{display:none}
#booking[data-mode="booking"] [data-for="booking"]{display:block}
#booking[data-mode="product"] [data-for="product"]{display:block}
#booking[data-mode="booking"] .field[data-for="booking"],
#booking[data-mode="product"] .field[data-for="product"]{display:block}

/* ---------- COMPETITION ---------- */
#compete{padding:170px 0;position:relative;overflow:hidden;text-align:center;background:
 radial-gradient(circle at 50% 45%,rgba(226,20,10,.13),transparent 38%),#050506}
#compete:before{
  content:"";position:absolute;inset:0;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:80px 80px
}
.compete-inner{position:relative;z-index:2}
.compete-title{font-size:clamp(30px,8vw,112px);line-height:1.04;padding:.06em 0}
.compete-title span{color:var(--red)}
.start-grid{width:min(720px,90vw);margin:65px auto 0;display:grid;grid-template-columns:repeat(12,1fr);gap:5px}
.start-light{height:9px;background:#27272c;position:relative;overflow:hidden}
.start-light.on{background:var(--red);box-shadow:0 0 20px rgba(226,20,10,.45)}
.race-path{display:flex;justify-content:center;gap:0;margin-top:28px;font:600 9px "JetBrains Mono";letter-spacing:.14em;color:#666}
.race-path span{padding:0 18px;border-right:1px solid #333}.race-path span:last-child{border:0}.race-path span.active{color:#fff}
.competition-hud{display:flex;justify-content:center;gap:50px;margin-top:55px;font:500 9px "JetBrains Mono";color:#707078;letter-spacing:.12em}
.competition-hud b{display:block;color:#fff;font-size:15px;margin-top:7px}
@media(max-width:600px){
  .competition-hud{gap:18px;flex-wrap:wrap}
  .race-path{flex-wrap:wrap;row-gap:6px}
  .race-path span{padding:0 8px;font-size:8px}
}

/* ---------- GALLERY ---------- */
#gallery{padding:145px 0;background:#0b0b0d}
.gallery-wrap{padding-left:max(34px,calc((100vw - var(--max))/2 + 34px))}
.gallery-track{display:flex;gap:14px;overflow-x:auto;padding-right:34px;padding-bottom:25px;scroll-snap-type:x mandatory;cursor:grab}
.gallery-track::-webkit-scrollbar{height:4px}.gallery-track::-webkit-scrollbar-thumb{background:var(--red3)}
.gallery-card{flex:0 0 clamp(280px,28vw,390px);height:470px;border:1px solid var(--line);position:relative;overflow:hidden;scroll-snap-align:start;background:#151518}
.gallery-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.1);transition:.8s var(--ease)}
.gallery-card:hover img{filter:grayscale(0) contrast(1.05);transform:scale(1.07)}
.gallery-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.86),transparent 55%)}
.gallery-meta{position:absolute;left:20px;right:20px;bottom:20px;z-index:2}
.gallery-meta small{font:500 9px "JetBrains Mono";color:var(--red2);letter-spacing:.15em}
.gallery-meta strong{display:block;font:600 25px Oswald;text-transform:uppercase;margin-top:7px}

/* ---------- SOCIAL / LOCATION ---------- */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* min-width:0 lets these grid items shrink below their content's min-content
   size; overflow-wrap stops "@v10_drifting_academy" — one unbreakable 48px
   word — from forcing the grid track to ~490px and giving every phone a
   horizontal scrollbar. */
.info-panel{background:#070708;padding:75px 6vw;min-width:0}
.info-panel h3{overflow-wrap:anywhere}
.info-panel h3{font-size:clamp(28px,6vw,48px);margin-bottom:18px}
.info-panel p{color:#898990;line-height:1.8;font-size:14px;max-width:500px}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.pill{border:1px solid #34343a;padding:11px 15px;font:600 9px "JetBrains Mono";letter-spacing:.1em;text-transform:uppercase;transition:.25s}
.pill:hover{border-color:var(--red);background:rgba(226,20,10,.08)}
.map{width:100%;height:260px;margin-top:25px;border:1px solid #29292e;filter:grayscale(1) contrast(1.2)}
@media(max-width:800px){.info-grid{grid-template-columns:1fr}.info-panel{padding:55px 24px}.info-panel h3{font-size:40px}}

/* ---------- FINAL CTA ---------- */
#final{padding:190px 0;text-align:center;position:relative;overflow:hidden}
#final:before{content:"V10";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 45vw Oswald;color:rgba(255,255,255,.018);pointer-events:none}
.final-inner{position:relative;z-index:2}
.final-inner h2{font-size:clamp(32px,9.5vw,132px);line-height:1.04;padding:.06em 0}
.final-inner h2 span{color:var(--red)}
.final-inner p{color:#85858c;max-width:520px;margin:25px auto 0;line-height:1.7}
.final-inner .btn{margin-top:35px;min-height:58px;padding:0 32px}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);padding:50px 0 30px}
.footer-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;color:#777;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.footer-links a:hover{color:#fff}
.footer-bottom{margin-top:35px;padding-top:20px;border-top:1px solid #1d1d21;display:flex;justify-content:space-between;gap:20px;color:#555;font:500 9px "JetBrains Mono"}
.lang span{color:#777}.lang .active{color:var(--red2)}
#wa{
  position:fixed;right:24px;bottom:22px;z-index:800;width:55px;height:55px;border-radius:50%;
  display:grid;place-items:center;background:#e2140a;box-shadow:0 10px 35px rgba(226,20,10,.35);transition:.3s
}
#wa:hover{transform:scale(1.08);box-shadow:0 12px 45px rgba(226,20,10,.55)}
#wa svg{width:25px;height:25px;fill:#fff}


/* ---------- INSTRUCTORS (Phase 2) ---------- */
#instructors{padding:145px 0;background:#09090b;border-top:1px solid var(--line)}
.inst-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.inst-card{position:relative;background:var(--panel);overflow:hidden}
.inst-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:#111}
.inst-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.15) brightness(.72);
  transform:scale(1.02);transition:filter .7s var(--ease),transform .9s var(--ease)
}
.inst-card:hover .inst-photo img,.inst-card:focus-within .inst-photo img{
  filter:grayscale(0) contrast(1.05) brightness(.95);transform:scale(1.07)
}
.inst-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,9,11,.95),transparent 55%)}
/* red light sweeping across the portrait on hover */
.inst-photo:before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(105deg,transparent 35%,rgba(226,20,10,.42) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .85s var(--ease)
}
.inst-card:hover .inst-photo:before{transform:translateX(120%)}
.inst-no{position:absolute;left:16px;top:14px;z-index:3;font:700 10px "JetBrains Mono",monospace;color:var(--red2);letter-spacing:.18em}
.inst-body{padding:22px 20px 26px;position:relative;z-index:3;margin-top:-58px}
.inst-body h3{font-size:clamp(20px,4.5vw,26px)}
.inst-role{margin-top:7px;font:500 9px "JetBrains Mono",monospace;color:var(--red2);letter-spacing:.16em;text-transform:uppercase}
.inst-bio{margin-top:14px;color:var(--muted);font-size:12.5px;line-height:1.75}
.inst-tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.inst-tags span{border:1px solid #2e2e34;padding:5px 8px;font:500 8.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:#9a9aa2;transition:.3s}
.inst-card:hover .inst-tags span{border-color:#4a1b16;color:#c9c9d0}
.inst-bar{height:2px;background:var(--red);width:0;transition:width .6s var(--ease)}
.inst-card:hover .inst-bar{width:100%}
@media(max-width:1000px){.inst-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.inst-grid{grid-template-columns:1fr}}

/* ---------- SAFETY & REQUIREMENTS (Phase 2) ---------- */
#safety{padding:145px 0;background:var(--charcoal);border-top:1px solid var(--line);position:relative;overflow:hidden}
#safety:before{
  content:"";position:absolute;inset:auto -5% -40% auto;width:46vw;height:60vh;
  background:radial-gradient(circle,rgba(226,20,10,.10),transparent 68%);filter:blur(34px);pointer-events:none
}
.safety-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start;position:relative}
.req-list{border-top:1px solid var(--line)}
.req{
  display:grid;grid-template-columns:46px 1fr auto;gap:18px;align-items:center;
  padding:22px 4px;border-bottom:1px solid var(--line);transition:.35s var(--ease)
}
.req:hover{background:rgba(226,20,10,.045);padding-left:14px}
.req i{font:700 10px "JetBrains Mono",monospace;color:var(--red);font-style:normal}
.req strong{display:block;font:600 17px Oswald;text-transform:uppercase;letter-spacing:.02em}
.req small{display:block;margin-top:5px;color:var(--muted);font-size:12.5px;line-height:1.6;font-weight:400}
.req b{font:700 22px Oswald;color:var(--white);white-space:nowrap}
.req b.yes{color:var(--red2)}
.gear-panel{border:1px solid var(--line);background:#0b0b0d;padding:34px 32px}
.gear-panel h3{font-size:clamp(21px,4.5vw,27px)}
.gear-panel>p{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.75}
.gear-list{margin-top:26px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.gear{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#101012;transition:.3s}
.gear:hover{background:#15151a}
.gear .tick{
  flex:0 0 22px;height:22px;border:1px solid var(--red);display:grid;place-items:center;
  color:var(--red2);font-size:11px;font-weight:700;transition:.3s
}
.gear:hover .tick{background:var(--red);color:#fff}
.gear span{font-size:13px;color:#c4c4ca}
.gear em{display:block;font-style:normal;font:500 9px "JetBrains Mono",monospace;color:#76767e;letter-spacing:.1em;margin-top:4px}
.safety-note{
  margin-top:26px;border-left:2px solid var(--red);padding:14px 18px;background:rgba(226,20,10,.06);
  font:500 11px "JetBrains Mono",monospace;color:#c0c0c7;line-height:1.85
}
@media(max-width:920px){.safety-layout{grid-template-columns:1fr;gap:45px}}
/* The value column ("NOT REQUIRED", "~90 MIN") is nowrap by design so it reads
   as one token. On a narrow screen that token is wider than the row, so the
   row stacks and the value moves under the label instead. */
@media(max-width:480px){
  .req{grid-template-columns:34px 1fr;gap:12px;row-gap:8px}
  .req b{grid-column:2;justify-self:start;white-space:normal;font-size:19px}
  .gear-panel{padding:26px 20px}
}

/* ---------- TESTIMONIALS (Phase 2) ---------- */
#testimonials{padding:145px 0;background:#09090b;border-top:1px solid var(--line)}
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.tst{position:relative;background:var(--panel);padding:38px 32px 32px;overflow:hidden;transition:.4s var(--ease)}
.tst:hover{background:#121215}
/* The quote glyph used to sit at top:-22px while .tst clips its overflow, so
   the top of the mark was cut off at the card edge. The ink of a left double
   quote occupies roughly the top third of its em box, so the element needs a
   positive offset big enough to clear the edge even after the hover nudge. */
.tst:before{
  content:"\201C";position:absolute;right:24px;top:10px;
  font:700 120px Oswald,sans-serif;line-height:1;
  color:rgba(226,20,10,.16);pointer-events:none;transition:.5s var(--ease)
}
.tst:hover:before{color:rgba(226,20,10,.22);transform:translateY(6px)}
.tst-stars{display:flex;gap:4px;color:var(--red2);font-size:13px;letter-spacing:.14em}
.tst-quote{margin-top:20px;color:#cfcfd5;font-size:14.5px;line-height:1.8;position:relative;z-index:2}
.tst-who{margin-top:26px;padding-top:20px;border-top:1px solid #26262b;display:flex;align-items:center;gap:13px}
.tst-who img{width:44px;height:44px;object-fit:cover;border:1px solid #33333a;filter:grayscale(1);transition:.5s}
.tst:hover .tst-who img{filter:grayscale(0)}
.tst-who strong{display:block;font:600 15px Oswald;text-transform:uppercase}
.tst-who small{display:block;margin-top:3px;font:500 9px "JetBrains Mono",monospace;color:var(--red2);letter-spacing:.12em}
@media(max-width:900px){.tst-grid{grid-template-columns:1fr}}

/* ---------- FAQ (Phase 2) ---------- */
#faq{padding:145px 0;background:var(--charcoal);border-top:1px solid var(--line)}
.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;background:none;border:0;color:inherit;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:38px 1fr 26px;gap:14px;align-items:center;
  padding:24px 4px;transition:.3s var(--ease)
}
.faq-q:hover,.faq-q:focus-visible{padding-left:12px;color:var(--red2)}
.faq-q i{font:700 10px "JetBrains Mono",monospace;color:var(--red);font-style:normal}
.faq-q strong{font:600 17px Oswald;text-transform:uppercase;letter-spacing:.02em;line-height:1.3}
.faq-sign{position:relative;width:14px;height:14px;justify-self:end}
.faq-sign:before,.faq-sign:after{
  content:"";position:absolute;background:var(--red2);transition:transform .35s var(--ease),opacity .35s
}
.faq-sign:before{left:0;top:6px;width:14px;height:2px}
.faq-sign:after{left:6px;top:0;width:2px;height:14px}
.faq-item.open .faq-sign:after{transform:rotate(90deg);opacity:0}
.faq-a{overflow:hidden;height:0;transition:height .42s var(--ease)}
.faq-a p{padding:0 4px 26px 52px;color:var(--muted);font-size:14px;line-height:1.85;max-width:640px}
.faq-aside{border:1px solid var(--line);background:#0b0b0d;padding:32px;position:sticky;top:110px}
.faq-aside h3{font-size:clamp(19px,4vw,24px)}
.faq-aside p{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.75}
@media(max-width:920px){.faq-layout{grid-template-columns:1fr;gap:42px}.faq-aside{position:static}.faq-a p{padding-left:4px}}


/* =========================================================================
   PHASE 3 — MOTION LAYER
   Everything below is presentation-only: if any of it is disabled the page
   still reads correctly. The reduced-motion block at the end of this
   stylesheet neutralises all of it in one place.
   ========================================================================= */

/* ---------- HERO: interactive tire smoke + speed lines ---------- */
#smoke-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  pointer-events:none;opacity:.55;mix-blend-mode:screen
}
.speed-lines{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.speed-lines i{
  position:absolute;left:-30%;height:1px;width:26%;
  background:linear-gradient(90deg,transparent,rgba(226,20,10,.85),transparent);
  opacity:0;animation:speedline 6s linear infinite
}
.speed-lines i:nth-child(1){top:22%;animation-delay:0s;width:34%}
.speed-lines i:nth-child(2){top:41%;animation-delay:2.1s;width:22%}
.speed-lines i:nth-child(3){top:63%;animation-delay:3.6s;width:30%}
.speed-lines i:nth-child(4){top:78%;animation-delay:5.1s;width:18%}
@keyframes speedline{
  0%{transform:translateX(0);opacity:0}
  6%{opacity:.9}
  22%{opacity:0}
  100%{transform:translateX(520%);opacity:0}
}

/* Headline: letter-spacing closes as the line rises — reads as acceleration */
.hero h1 .line span{
  animation-name:up-tight;
  letter-spacing:.3em
}
@keyframes up-tight{
  0%{transform:translateY(115%);letter-spacing:.3em}
  100%{transform:translateY(0);letter-spacing:-.025em}
}

/* The hero drifts back and blurs slightly as you scroll away from it */
.hero-media{will-change:transform}
#hero-video{transition:filter .6s linear}

/* ---------- PROGRESS RAIL: pulse on the live dot ---------- */
.progress-dot.active{animation:dotpulse 2.1s ease-in-out infinite}
@keyframes dotpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(226,20,10,.55),0 0 14px rgba(226,20,10,.65)}
  55%{box-shadow:0 0 0 7px rgba(226,20,10,0),0 0 20px rgba(226,20,10,.9)}
}
.progress-stage{transition:opacity .25s var(--ease)}
.progress-stage.swap{opacity:0}

/* ---------- DUAL CARDS: 3D tilt + the other card dims ---------- */
.dual-grid{perspective:1400px}
.dual-card{
  transition:transform .5s var(--ease),opacity .45s var(--ease),background .45s var(--ease);
  transform-style:preserve-3d
}
.dual-grid.hovering .dual-card{opacity:.42}
.dual-grid.hovering .dual-card:hover{opacity:1;background:#0b0b0e}
.dual-card .corner{transition:transform .5s var(--ease),color .4s}
.dual-card:hover .corner{transform:translateX(-6px);color:var(--red2)}
.dual-card h3{transition:transform .5s var(--ease)}
.dual-card:hover h3{transform:translateX(7px)}
.dual-points div{transition:transform .45s var(--ease),color .35s}
.dual-card:hover .dual-points div{color:#e4e4e9}
.dual-card:hover .dual-points div:nth-child(1){transform:translateX(6px);transition-delay:.02s}
.dual-card:hover .dual-points div:nth-child(2){transform:translateX(6px);transition-delay:.07s}
.dual-card:hover .dual-points div:nth-child(3){transform:translateX(6px);transition-delay:.12s}

/* ---------- PACKAGES: per-level identity ---------- */
/* Each card carries its own accent ramp so six tiers are visually distinct
   rather than six identical boxes with different numbers. */
.pkg-card{--accent:#e2140a;--tier:0}
.pkg-card:nth-child(1){--accent:#6c757d;--tier:1}
.pkg-card:nth-child(2){--accent:#8a7f6b;--tier:2}
.pkg-card:nth-child(3){--accent:#e2140a;--tier:3}
.pkg-card:nth-child(4){--accent:#c9531f;--tier:4}
.pkg-card:nth-child(5){--accent:#d8202a;--tier:5}
.pkg-card:nth-child(6){--accent:#ff3a27;--tier:6}
.pkg-level{color:var(--accent)}
.pkg-card:before{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--accent);
  transition:width .55s var(--ease);z-index:4
}
.pkg-card:hover:before{width:100%}
/* tier meter: fills further the higher the level */
.pkg-meter{display:flex;gap:3px;margin-top:14px}
.pkg-meter i{flex:1;height:3px;background:#26262b;transition:background .35s var(--ease),transform .35s var(--ease)}
.pkg-meter i.on{background:var(--accent)}
.pkg-card:hover .pkg-meter i.on{transform:scaleY(2)}
.pkg-card:hover .pkg-meter i.on:nth-child(1){transition-delay:0s}
.pkg-card:hover .pkg-meter i.on:nth-child(2){transition-delay:.05s}
.pkg-card:hover .pkg-meter i.on:nth-child(3){transition-delay:.1s}
.pkg-card:hover .pkg-meter i.on:nth-child(4){transition-delay:.15s}
.pkg-card:hover .pkg-meter i.on:nth-child(5){transition-delay:.2s}
.pkg-card:hover .pkg-meter i.on:nth-child(6){transition-delay:.25s}
.pkg-features li{transition:transform .35s var(--ease),color .35s,border-color .35s}
.pkg-card:hover .pkg-features li{transform:translateX(5px);color:#d2d2d8}
.pkg-card:hover .pkg-features li:nth-child(1){transition-delay:.04s}
.pkg-card:hover .pkg-features li:nth-child(2){transition-delay:.09s}
.pkg-card:hover .pkg-features li:nth-child(3){transition-delay:.14s}
.pkg-price{transition:color .35s var(--ease)}
.pkg-card:hover .pkg-price{color:var(--accent)}
/* recommended card breathes so the eye lands on it first */
.pkg-card.recommended{animation:recbreathe 3.4s ease-in-out infinite}
@keyframes recbreathe{
  0%,100%{box-shadow:inset 0 2px 0 var(--red),0 0 0 rgba(226,20,10,0)}
  50%{box-shadow:inset 0 2px 0 var(--red),0 0 34px rgba(226,20,10,.20)}
}
.pkg-card.recommended:hover{animation:none}

/* ---------- GALLERY: interactive specs ---------- */
.gallery-card{transition:flex-basis .55s var(--ease),border-color .4s}
.gallery-card:hover{border-color:#50201b}
.gallery-meta{transition:transform .5s var(--ease)}
.gallery-card:hover .gallery-meta{transform:translateY(-6px)}
.gallery-specs{
  margin-top:12px;display:grid;gap:5px;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s var(--ease)
}
.gallery-card:hover .gallery-specs,.gallery-card:focus-within .gallery-specs{max-height:130px;opacity:1}
.gallery-specs div{
  display:flex;justify-content:space-between;gap:12px;
  font:500 9px "JetBrains Mono",monospace;letter-spacing:.09em;
  color:#9c9ca4;border-top:1px solid rgba(255,255,255,.09);padding-top:5px
}
.gallery-specs div b{color:var(--red2);font-weight:700}
.gallery-hint{
  margin-top:16px;font:500 9px "JetBrains Mono",monospace;letter-spacing:.18em;color:#5e5e66;
  display:flex;align-items:center;gap:9px
}
.gallery-hint:before{content:"";width:26px;height:1px;background:var(--red);animation:hintslide 2.6s var(--ease) infinite}
@keyframes hintslide{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(9px);opacity:1}}

/* ---------- INSTRUCTORS / SAFETY / FAQ / TESTIMONIALS motion ---------- */
.inst-card{transition:transform .5s var(--ease),background .4s}
.inst-card:hover{transform:translateY(-8px)}
.inst-grid.hovering .inst-card{opacity:.5;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.inst-grid.hovering .inst-card:hover{opacity:1}

.req i{transition:transform .35s var(--ease)}
.req:hover i{transform:translateX(3px) scale(1.15)}
.req b{transition:transform .35s var(--ease)}
.req:hover b{transform:scale(1.06)}
.gear .tick{transform:rotate(0);transition:.35s var(--ease)}
.gear:hover .tick{transform:rotate(-8deg) scale(1.1)}

.tst{transform-origin:center bottom}
.tst-grid.hovering .tst{opacity:.5;transition:opacity .4s var(--ease),background .4s}
.tst-grid.hovering .tst:hover{opacity:1}

/* ---------- COMPETE: launch flash ---------- */
#compete{position:relative}
.launch-flash{
  position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(226,20,10,.5),transparent 62%);
  opacity:0;pointer-events:none;z-index:1
}
.launch-flash.fire{animation:launchflash .42s ease-out}
@keyframes launchflash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
#compete.launch-shake{animation:shake .38s ease-in-out}
@keyframes shake{
  0%,100%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-3px,1px,0)}
  40%{transform:translate3d(3px,-1px,0)}
  60%{transform:translate3d(-2px,-1px,0)}
  80%{transform:translate3d(2px,1px,0)}
}

/* ---------- FINAL CTA: shimmer ---------- */
#final .btn.primary{position:relative;overflow:hidden}
#final .btn.primary:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.4) 50%,transparent 62%);
  transform:translateX(-130%);animation:shimmer 4.5s var(--ease) infinite
}
@keyframes shimmer{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}

/* ---------- NAV: hide on scroll down, show on scroll up ---------- */
#nav{transition:transform .4s var(--ease),background .35s,border-color .35s,padding .35s}
#nav.nav-hidden{transform:translateY(-102%)}
.navlinks a.current{color:#fff}
.navlinks a.current:after{width:100%}

/* ---------- STICKY MOBILE CTA (audit 3.1) ---------- */
#mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:1200;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);transform:translateY(105%);
  transition:transform .45s var(--ease)
}
#mobile-cta.show{transform:none}
#mobile-cta a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 10px;font:700 11px "JetBrains Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;background:#0b0b0d
}
#mobile-cta a.book{background:var(--red);color:#fff}
/* The sticky bottom bar already carries WhatsApp on small screens, so the
   floating button is both a duplicate and an obstruction there (it sat on top
   of the Journey panel). Desktop keeps the float; mobile keeps the bar. */
@media(max-width:900px){#mobile-cta{display:grid}#wa{display:none}}

/* ---------- FOCUS VISIBILITY (audit a11y) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--red2);outline-offset:3px
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:3000;background:var(--red);color:#fff;
  padding:12px 18px;font:700 11px "JetBrains Mono",monospace;letter-spacing:.12em
}
.skip-link:focus{left:8px;top:8px}


/* ---------- BUTTON SHAPE: clipped corner (motorsport badge) ---------- */
/* One corner cut instead of four sharp points or a full radius. The cut
   scales with the control, and --clip can be overridden per element. */
.nav-cta,.btn,.pill,.wa-btn,#mobile-cta a,.submit-btn{
  --clip:11px;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--clip)), calc(100% - var(--clip)) 100%, 0 100%)
}
/* Small controls get a proportionally smaller cut so it still reads as a
   deliberate bevel rather than a chopped-off corner. */
.pill,.wa-btn{--clip:9px}
#mobile-cta a{--clip:0px}          /* full-bleed bar: a cut would look like a gap */
.final-inner .btn{--clip:15px}     /* largest button on the page */
.hero-ctas .btn{--clip:13px}

/* clip-path crops box-shadow, so the red glow on hover is re-created as an
   inset ring that stays inside the clipped shape. */
.nav-cta:hover,.btn.primary:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}


/* ---------- ABOUT PRINCIPLES: real accordion (fix 7) ---------- */
.principle-item{border-bottom:1px solid var(--line)}
.principle{
  width:100%;background:none;border:0;color:inherit;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:50px 1fr 22px;align-items:center;padding:17px 4px;
  transition:padding .3s var(--ease),color .3s
}
.principle:hover{padding-left:12px}
.principle:hover strong,.principle[aria-expanded="true"] strong{color:var(--red2)}
.principle-arrow{
  color:#666;font-size:16px;display:inline-block;
  transition:transform .4s var(--ease),color .3s
}
.principle:hover .principle-arrow{color:var(--red2)}
.principle[aria-expanded="true"] .principle-arrow{transform:rotate(90deg);color:var(--red)}
.principle-detail{overflow:hidden;height:0;transition:height .4s var(--ease)}
.principle-detail p{
  padding:0 4px 20px 50px;color:var(--muted);font-size:13.5px;line-height:1.8;max-width:560px
}
@media(max-width:560px){.principle-detail p{padding-left:4px}}


/* ---------- PROGRESS RAIL CLEARANCE ----------
   #progress is fixed at 62px wide and paints a translucent panel over
   whatever is beneath it. Content must start clear of it whenever it is
   visible (>900px). The inset only kicks in when the centred layout has not
   already produced enough margin on its own, so wide screens are unchanged. */
@media(min-width:901px){
  .wrap{padding-left:max(34px,calc(86px - max(0px,(100vw - var(--max))/2)))}
  .gallery-wrap{padding-left:max(86px,calc((100vw - var(--max))/2 + 34px))}
  .info-panel{padding-left:max(6vw,86px)}
  .hero{padding-left:max(100px,86px)}
  /* Centre-aligned sections get the inset on BOTH sides, otherwise the
     asymmetric padding would push their headings off centre. */
  #compete .wrap,#final .wrap{
    padding-right:max(34px,calc(86px - max(0px,(100vw - var(--max))/2)))
  }
}



/* ---------- EXTREME NARROW (small phone at high browser zoom) ----------
   At ~195px of CSS width every fixed gutter, gap and nowrap token counts.
   These rules only ever apply below 400px, so they cost nothing elsewhere. */
@media(max-width:400px){
  .route{padding-left:22px}
  .station-dot{margin-left:-22px}
  .station{gap:8px}
  .station-name{font-size:14px}
  .safety-layout>*,.req-list,.req,.gear-list,.gear,.gear span,
  .inst-tags,.inst-tags span,.start-grid,.competition-hud,.race-path{min-width:0}
  .gear{gap:10px;padding:13px 12px}
  .gear em{letter-spacing:.04em}
  .inst-tags span{overflow-wrap:break-word}
  .start-grid{gap:3px}
  .competition-hud{gap:12px}
  .compete-inner,.final-inner{min-width:0}
  .tst-who,.tst-who>div{min-width:0}
  .tst-who img{width:34px;height:34px;flex:0 0 34px}
  .tst-who strong,.tst-who small{overflow-wrap:break-word}
  .faq-q{grid-template-columns:24px 1fr 18px;gap:9px}
  .faq-q strong,.faq-list,.faq-item{min-width:0;overflow-wrap:break-word}
  .faq-a p{padding-left:4px}
  .wrap{padding:0 20px}
}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  /* Phase 3 motion layer: remove it outright rather than just speeding it up,
     so nothing flashes, pulses or sweeps for visitors who asked it not to. */
  #smoke-canvas,.speed-lines,.launch-flash,#final .btn.primary:after,.gallery-hint:before{display:none!important}
  /* Loader keeps only the fade: no streaks, no pulsing dot, no rising letters.
     The rail still ends full because its keyframe finishes immediately. */
  .loader-streaks{display:none!important}
  .lm-dot{animation:none!important;opacity:1!important}
  .lm-line>span{transform:none!important;animation:none!important}
  .loader-inner{transition:opacity .3s ease!important;transform:none!important}
  #loader.hide .loader-inner{transform:none!important}
  /* The 2s hold exists to let the clip breathe. Reduced-motion visitors do not
     get the clip at all, so holding the text back would just be a blank wait.
     animation-duration is already neutralised above, but the DELAY is not. */
  :root{--hero-hold:0s}
  .hero .eyebrow,.hero-copy,.hero-ctas,.hero-metrics,.hero-scroll{
    opacity:1!important;animation:none!important;transform:none!important
  }
  .hero h1 .line span{letter-spacing:-.025em!important}
  .progress-dot.active,.pkg-card.recommended{animation:none!important}
  .inst-photo:before{display:none!important}
  .dual-grid.hovering .dual-card,.inst-grid.hovering .inst-card,.tst-grid.hovering .tst{opacity:1!important}
  .reveal{opacity:1!important;transform:none!important}
  #nav.nav-hidden{transform:none!important}
  .faq-a{transition:none!important}
}

/* ===================================================================
   WORDPRESS INTEGRATION — appended by the migration build.
   Nothing above this line was altered from the source project.
   =================================================================== */

/* The admin bar is position:fixed at the top of the viewport for logged-in
   users (32px wide screens, 46px at <=782px). Without this the fixed nav sits
   underneath it and every anchor target lands 32px too high. */
body.admin-bar nav{top:32px}
body.admin-bar #progress{top:32px}
body.admin-bar section[id],body.admin-bar footer[id]{scroll-margin-top:116px}
@media screen and (max-width:782px){
  body.admin-bar nav{top:46px}
  body.admin-bar #progress{top:46px}
  body.admin-bar section[id],body.admin-bar footer[id]{scroll-margin-top:130px}
}
/* The loader is position:fixed inset:0 and would cover the admin bar. */
body.admin-bar #loader{top:32px}
@media screen and (max-width:782px){body.admin-bar #loader{top:46px}}

/* Honest unavailable state for the booking form (see class-v10-rest.php). */
.form-unavailable{
  border:1px solid var(--red3);background:rgba(226,20,10,.07);
  padding:16px 18px;margin-bottom:22px
}
.form-unavailable b{display:block;font:700 13px Oswald,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red2);margin-bottom:6px}
.form-unavailable p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}


/* ===================================================================
   MOBILE UX FIXES (19 Oct 2026) — from mobile screenshots of the live page.
   Appended as overrides so the CSS extracted from index.html stays verbatim.
   =================================================================== */

/* --- 1. Hamburger / close overlap -------------------------------------
   Cause: nav is z-index:900, #mobile-menu is z-index:850, so the open menu
   rendered UNDERNEATH the nav. .mobile-close (right:24px top:18px) landed on
   almost the same coordinates as .menu-btn, and the hamburger painted on top
   of the X — the garbled glyph in the screenshot.

   Fix: lift the menu above the nav and retire the hamburger while the menu is
   open, so there is exactly one visible control. The close button is kept and
   enlarged, never hidden. */
#mobile-menu{z-index:1500}
body.menu-open .menu-btn{opacity:0;pointer-events:none}
body.menu-open{overflow:hidden}          /* stop the page scrolling behind */

/* Keep the logo visible over the open menu, as it was before this fix.
   The nav is lifted above the menu for that, but made transparent to pointer
   events so the close button underneath still receives taps; only the logo
   itself stays clickable. */
body.menu-open nav{z-index:1600;pointer-events:none;background:none;border-bottom:0}
body.menu-open nav .logo{pointer-events:auto}

.mobile-close{
  right:14px;top:10px;
  width:48px;height:48px;              /* >=44px: comfortable tap target */
  display:grid;place-items:center;
  font-size:34px;line-height:1;
  border-radius:50%;
  -webkit-tap-highlight-color:transparent
}
.mobile-close:focus-visible{outline:2px solid var(--red2);outline-offset:2px}

/* --- 2. Menu typography ----------------------------------------------
   Was clamp(26px,8.5vw,46px) — ~33px at 390px wide and visibly oversized in
   the screenshot. Reduced while staying well above tap-target minimums. */
.mobile-links a{
  font-size:clamp(21px,6.2vw,32px);
  padding:12px 0                        /* taller hit area than the old 8px */
}
.mobile-links a span{font-size:.4em}
@media(max-height:680px){
  .mobile-links a{font-size:clamp(18px,5.2vw,26px);padding:9px 0}
}
/* 320px-class phones: keep the menu clear of the nav without clipping. */
@media(max-width:360px){
  #mobile-menu{padding:92px 20px 24px}
}

/* --- 3. Product details image ----------------------------------------
   Cause: .detail-media is aspect-ratio:16/9 with object-fit:cover, so an
   800x800 product photo lost ~44% of its height. The catalogue thumbnail
   (.prod-media, 1:1 cover) is a deliberate crop and is NOT changed.

   Fix: contain the image inside a near-square frame so the whole product is
   visible, on a dark panel so the letterboxing reads as intentional. */
.pkg-panel .detail-media{
  /* Square frame, sized by whichever is smaller: the panel width or the
     viewport height. Every product photo is square, so a square frame means
     the image fills it edge to edge with NO letterboxing at all, and on short
     screens the frame shrinks instead of leaving wide empty bands (a 4:3 box
     left 53% of its width empty at 1366x700). object-fit:contain stays, so a
     future non-square photo still shows in full rather than being cropped.
     The head below draws its own 2px accent line, so this border is dropped
     now that the frame no longer spans the full panel width. */
  aspect-ratio:1/1;
  width:min(100%,54vh);
  margin-inline:auto;
  border-bottom:0;
  background:#0d0d10;
  /* NO display:grid here. With `grid` + `place-items:center` the <img> stopped
     stretching to the grid area, so `height:100%` resolved against an auto row
     and the element laid out at its own 1:1 ratio — 638x638 inside a 638x478
     box. object-fit:contain was honoured INSIDE that oversized element, so the
     property looked correct while the container clipped the bottom ~160px.
     That is why desktop looked cropped and mobile (a 1:1 container, where the
     square element happened to fit) looked right. Plain block layout makes the
     image exactly fill the box, and contain then letterboxes properly. */
  display:block
}
.pkg-panel .detail-media img{
  width:100%;height:100%;
  object-fit:contain;                   /* was cover — this is the fix */
  object-position:center
}
@media(max-width:560px){
  .pkg-panel .detail-media{width:100%}   /* phones: fill the panel edge to edge */
}
/* The 54vh width cap above already keeps the title, price and CTA reachable
   on short screens, so the old height override (which forced a wide, short box
   and huge side bands) is gone. */

/* --- 4. Modal usability on small screens ------------------------------
   The panel was max-height:92vh with overflow:auto. On short phones the
   browser chrome makes 92vh taller than the visible area, so the CTA could
   sit under the URL bar. dvh tracks the real viewport where supported. */
.pkg-panel,.booking-panel{
  max-height:92vh;max-height:92dvh;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch
}

/* --- 5. Footer alignment ----------------------------------------------
   Kept LEFT, not centred. Every section heading on this page is left-aligned,
   and the footer logo sits left; centring the link list would fight that
   rhythm and leave the logo orphaned. The only centred block on the page is
   the final CTA, which is centred deliberately.
   This just makes the stacked mobile order explicit and keeps the bottom row
   left-aligned now that the EN/AR switch has been removed from beside it. */
@media(max-width:700px){
  .footer-grid{flex-direction:column;align-items:flex-start;gap:26px}
  .footer-links{gap:14px 18px;row-gap:10px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
}

/* --- 6. Hero eyebrow --------------------------------------------------
   "V10 DRIFTING ACADEMY · DRIVER DEVELOPMENT" broke mid-phrase on a 390px
   screen. Slightly tighter tracking keeps it on two balanced lines. */
@media(max-width:430px){
  .hero .eyebrow{letter-spacing:.14em;line-height:1.7}
}


/* ===================================================================
   1.3.0 FIXES (19 Oct 2026) — from live-site screenshots after 1.2.0.
   =================================================================== */

/* --- Issue 3: modal close button was unclickable ----------------------
   `.close` is position:absolute with NO z-index. Its later siblings
   `.pkg-panel-head` and `.detail-media` are position:relative, so with every
   stacking order equal they paint in DOM order and covered the button.
   elementFromPoint at the X's own centre returned `.pkg-panel-head` (package
   modals) or the IMG (product modals), and a real click never reached it.

   This was invisible to earlier tests because they called .click() on the
   element directly, which bypasses hit-testing entirely.

   It also measured 14x24px — far below a usable tap target. */
.pkg-panel .close,
.booking-panel .close,
.modal .close{
  z-index:6;
  width:46px;height:46px;           /* was ~14x24; 46 keeps it clear of the
                                       44px minimum after sub-pixel rounding */
  right:10px;top:8px;
  display:grid;place-items:center;
  font-size:26px;line-height:1;
  border-radius:50%;
  -webkit-tap-highlight-color:transparent
}
.pkg-panel .close:focus-visible,
.booking-panel .close:focus-visible,
.modal .close:focus-visible{outline:2px solid var(--red2);outline-offset:2px}

/* --- Issue 2: mobile menu close button hidden behind the WP admin bar ---
   #mobile-menu is position:fixed;inset:0 and the close sits at top:10px
   inside it. The WordPress admin bar is position:fixed over the top 32px
   (46px <=782px) at z-index 99999, so for logged-in editors it covered the
   X completely — exactly what the screenshot shows.
   Pushing the menu below the bar keeps the X clear of it. */
body.admin-bar #mobile-menu{top:32px}
@media screen and (max-width:782px){
  body.admin-bar #mobile-menu{top:46px}
}

/* --- Issue 4: mobile hero framing ------------------------------------
   MEASURED: with the hero full-bleed (.hero-media inset:0) and the video
   object-fit:cover, a 16:9 clip on a 390x844 portrait hero is scaled to
   1500x844 and only the centre 390px is visible — 74% of the frame width is
   thrown away, plus the 4% scale(1.04). Only ~333px of the 1280-wide encode
   ever reached the screen, magnified ~3.5x on a DPR-3 phone. The crop, not
   the bitrate, was the main cause of the "much worse quality" report.

   Fix: on phones the video becomes a 16:9 band across the top of the hero.
   The band matches the clip's own ratio, so the ENTIRE frame is visible with
   no letterboxing and no crop, and it renders at ~1:1 device pixels instead
   of being blown up. The hero keeps its height; the existing red wash, grid
   and sweep decorations continue over the area below the band, and a gradient
   blends the band into the page so it reads as composed rather than empty.

   Desktop is untouched: it keeps the full-bleed cover treatment. */
@media(max-width:900px){
  .hero-media{
    inset:0 0 auto 0;
    height:56.25vw;              /* exactly 9/16 of the viewport width */
    background:#050506            /* no min-height: it forced the band off 16:9
                                     at 320px (180px computed vs a 190px floor)
                                     and reintroduced letterboxing */
  }
  .hero-media img,.hero-media video{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:contain;          /* band is already 16:9, so nothing is cut */
    transform:none
  }
  /* Blend the bottom edge of the band into the hero background. */
  .hero-media:after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
    background:linear-gradient(to bottom,rgba(5,5,6,0),#050506);
    pointer-events:none
  }
}


/* ===================================================================
   1.4.1 FIXES (19 Oct 2026) — product imagery.

   MEASURED from the actual Media Library files, not assumed:

     Racing Pedals / Seat / H-Shifter / Gloves   1254x1254   square
     Sim Racing Wheel                            1536x1024   3:2
     Racing Helmet                               1264x843    3:2

   So the catalogue holds TWO aspect ratios, not one. 1.3.0 sized the detail
   frame as a square on the assumption they were all square, which is why the
   two 3:2 photos sat in a square box with large empty bands above and below.
   =================================================================== */

/* --- Detail modal: frame follows the image -----------------------------
   The frame no longer imposes a ratio. The image is laid out at its own
   dimensions, capped by the panel width and the viewport height, and the
   frame shrink-wraps around it. Result: every photo is shown complete, at its
   true proportions, with no letterboxing for any ratio. */
.pkg-panel .detail-media{
  aspect-ratio:auto;
  width:100%;
  margin-inline:0;
  display:block;
  line-height:0;                 /* no stray inline-box gap under the image */
  background:#0d0d10
}
.pkg-panel .detail-media img{
  width:auto;height:auto;
  max-width:100%;
  max-height:54vh;               /* keeps title, price and CTA reachable */
  object-fit:contain;            /* only bites if a future file is odd */
  display:block;
  margin:0 auto
}
@media(max-width:560px){
  .pkg-panel .detail-media img{max-height:46vh}
}

/* --- Catalogue cards: stop clipping the product ------------------------
   The tiles are 1:1. With object-fit:cover a 3:2 photo keeps only the middle
   16.7%-83.3% of its width, and measuring where the product actually sits in
   each file shows that range cuts into the product itself, not just backdrop:

     Sim Racing Wheel  product spans L0.10 - R0.82  -> left edge clipped
     Racing Helmet     product spans L0.11 - R0.84  -> both edges clipped

   The four square photos are unaffected either way. Switching the tiles to
   contain keeps the grid uniform and shows all six products whole; the dark
   backdrop in every photo makes the small top/bottom bands on the two 3:2
   files read as part of the image. */
.prod-media img{object-fit:contain}