/* ============================================================
   SHOOX — Night Current
   Design: Figma “SHOOX” · page “B · Night Current · 1440”
   Full-height screens · full-bleed photography · content in a 1440 column
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --base:#0B0D12;
  --cream:#F5EFE3;
  --steel:#8B94A3;
  --amber:#FFAE2B;

  --cream-80:rgba(245,239,227,.8);
  --cream-60:rgba(245,239,227,.6);
  --cream-45:rgba(245,239,227,.45);
  --amber-70:rgba(255,174,43,.7);

  --font:"Geist","Geist Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --shell:1440px;
  --gutter:64px;

  /* glows — matched to Figma’s drop shadows */
  --glow-line:0 2px 5px rgba(0,0,0,.5), 0 0 7px rgba(255,173,43,.3);
  --glow-bead:0 0 20px 1px rgba(255,174,43,.6), 0 6px 12px rgba(0,0,0,.55);
  --glow-bead-tight:0 0 12px rgba(255,174,43,.5), 0 4px 10px rgba(0,0,0,.5);

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.1,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--base);color:var(--cream);
  font-family:var(--font);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
p,h1,h2,h3{margin:0}
s{text-decoration-thickness:.055em}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:99}
.skip:focus{left:16px;top:16px;background:var(--amber);color:var(--base);padding:10px 16px;border-radius:8px}

/* ---------- screen + 1440 content column ---------- */
.sec{
  position:relative;
  display:flex;
  min-height:100vh;
  min-height:100svh;
  background:var(--base);
  overflow:clip;
}
.frame{
  position:relative;z-index:3;
  width:100%;max-width:var(--shell);margin-inline:auto;
  display:flex;flex-direction:column;
}

/* discrete scrolling — one full screen per step, phones included */
@media (min-height:680px){
  html{scroll-snap-type:y mandatory}
  .sec{scroll-snap-align:start;scroll-snap-stop:always}
}

/* ---------- full-bleed media ---------- */
.media{position:absolute;inset:0;overflow:clip;z-index:0;background:#14171d}
.media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

.parallax img{will-change:transform}
@keyframes bg-drift{
  from{transform:translate3d(0,-7%,0) scale(1.14)}
  to  {transform:translate3d(0, 7%,0) scale(1.14)}
}
@supports ((animation-timeline:view()) and (animation-range:entry)){
  .parallax{view-timeline-name:--sec;view-timeline-axis:block}
  .parallax img{animation:bg-drift linear both;animation-timeline:--sec;animation-range:cover 0% cover 100%}
}
.js-parallax .parallax img{transform:translate3d(0,calc(var(--py,0) * 7%),0) scale(1.14)}

/* ---------- type scale ---------- */
.h1{font-weight:700;font-size:clamp(38px,4.58vw,66px);line-height:1.091;letter-spacing:-.02em}
.h2{font-weight:700;font-size:clamp(32px,3.61vw,52px);line-height:1.115;letter-spacing:-.03em}
.body-l{font-size:clamp(17px,1.46vw,21px);line-height:1.571;font-weight:400}
.body-m{font-size:clamp(16px,1.32vw,19px);line-height:1.579;font-weight:400}
.muted{color:var(--steel)}
.cream-60{color:var(--cream-60)}
.eyebrow{
  font-family:var(--mono);font-weight:500;font-size:14px;line-height:19px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber);
}
.eyebrow--tight{letter-spacing:.08em}

/* ---------- reveal ---------- */
.reveal{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);
  transition-delay:var(--d,0ms);will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}
.fade{opacity:0;transition:opacity .8s var(--ease-out);transition-delay:var(--d,0ms)}
.fade.is-in{opacity:1}

/* ---------- bead ---------- */
/* Bead — rebuilt 1:1 from the Figma node (stroke gradient, radial fill,
   two inner shadows and two drop shadows, with Figma’s gradient transforms
   converted to CSS stop positions). */
.bead{
  --s:14px;
  display:block;flex:none;
  width:var(--s);height:var(--s);
  padding:2px;border-radius:50%;
  /* the base colour underneath keeps the ring opaque, so a line running
     through the bead is hidden on both sides instead of bleeding through */
  background:linear-gradient(135deg,
    #fff 0%,#fff 9%,
    var(--amber) 24%,
    var(--amber) 55%,
    rgba(255,174,43,.55) 80%,
    rgba(255,174,43,.35) 100%),
    var(--base);
  box-shadow:var(--glow-bead);
  transition:transform .5s var(--ease-soft),box-shadow .5s var(--ease-soft);
}
.bead::before{
  content:"";display:block;width:100%;height:100%;border-radius:50%;
  background:
    radial-gradient(ellipse 80.6% 80.6% at 48.4% 54.8%,
      rgba(255,174,43,.02) 0%,
      rgba(255,174,43,.12) 55%,
      rgba(255,174,43,.45) 86%,
      rgba(255,174,43,.85) 100%),
    var(--base);
  box-shadow:
    inset 0 0 3px rgba(255,174,43,.5),
    inset -1px -1px 2px rgba(255,255,255,.3);
}
.bead--dim{
  background:linear-gradient(135deg,
    rgba(255,255,255,.75) 0%,rgba(255,255,255,.75) 9%,
    rgba(255,174,43,.85) 24%,
    rgba(255,174,43,.8) 55%,
    rgba(255,174,43,.4) 80%,
    rgba(255,174,43,.22) 100%),
    var(--base);
}
.bead--dim::before{
  background:
    radial-gradient(ellipse 80.6% 80.6% at 48.4% 54.8%,
      rgba(255,174,43,.02) 0%,
      rgba(255,174,43,.08) 55%,
      rgba(255,174,43,.30) 86%,
      rgba(255,174,43,.55) 100%),
    var(--base);
}
.bead--15{--s:15px}
.bead--17{--s:17px}
.bead--20{--s:20px;padding:2.4px}
.bead--22{--s:22px}

/* ---------- button ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--amber);color:var(--base);font-weight:500;
  border-radius:12px;padding:18px 34px;font-size:17px;line-height:24px;
  letter-spacing:-.01em;white-space:nowrap;
  transition:transform .45s var(--ease-soft),box-shadow .45s var(--ease-soft),background-color .35s var(--ease);
}
.btn:hover{background:#FFBC4E;transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(255,107,0,.5)}
.btn:active{transform:translateY(0)}
.btn--nav{padding:13px 24px;border-radius:10px}
.btn--lg{padding:19px 38px;font-size:19px;line-height:25px}
.btn--glow{box-shadow:0 12px 28px -8px rgba(255,107,0,.32)}

/* ============================================================
   01 · HERO
   ============================================================ */
.hero .frame{padding:40px var(--gutter) 51px}
.hero__scrim-bottom{
  position:absolute;left:0;right:0;top:8%;bottom:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,13,18,0) 0%,rgba(11,13,18,.34) 40%,rgba(11,13,18,.78) 68%,#0B0D12 90%,#0B0D12 100%);
}
.hero__scrim-top{
  position:absolute;left:0;right:0;top:0;height:26%;z-index:1;
  background:linear-gradient(180deg,rgba(11,13,18,.85) 0%,rgba(11,13,18,0) 100%);
}
.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:50px;flex:none}
.logo{font-weight:700;font-size:26px;line-height:32px;letter-spacing:-.01em;color:var(--cream)}
.logo--sm{font-size:22px}
.nav__menu{display:flex;align-items:center;gap:36px}
.nav__menu a{font-weight:500;font-size:16px;line-height:24px;color:var(--steel);transition:color .3s var(--ease)}
.nav__menu a:hover{color:var(--cream)}
.burger{display:none;flex-direction:column;gap:5px;padding:13px 0}
.burger span{display:block;width:24px;height:2.5px;border-radius:2px;background:var(--cream);transition:transform .4s var(--ease-soft),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.hero__body{position:relative;z-index:4;margin-top:auto;max-width:864px}
.hero__title{font-weight:700;font-size:clamp(40px,6.39vw,92px);line-height:1.043;letter-spacing:-.04em;color:var(--cream)}
.hero__lead{margin-top:26px;color:var(--steel);font-size:clamp(17px,1.46vw,21px);line-height:1.571}
.hero__cta{margin-top:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero__note{color:var(--steel);font-weight:500;font-size:16px;line-height:24px}

.avail{
  position:absolute;right:var(--gutter);bottom:71px;z-index:4;
  display:flex;align-items:center;gap:16px;font-family:var(--mono);font-weight:500;
}
.avail__glow{
  position:absolute;right:-180px;top:50%;translate:0 -50%;width:890px;height:240px;
  pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(11,13,18,.78) 0%,rgba(11,13,18,.5) 45%,rgba(11,13,18,0) 75%);
}
/* the line runs 1.4px past the bead’s left edge (as in Figma), so the opaque
   bead swallows its end instead of leaving a gap */
.avail__line{
  width:300px;height:2.5px;border-radius:2px;margin-right:-17.4px;flex:0 1 300px;
  background:linear-gradient(90deg,rgba(255,174,43,0) 0%,rgba(255,174,43,.16) 30%,rgba(255,174,43,.5) 65%,var(--amber) 100%);
  box-shadow:var(--glow-line);
}
.avail__word{font-size:13px;line-height:18px;letter-spacing:.03em;text-transform:uppercase;color:var(--cream-80);text-shadow:0 0 10px rgba(255,173,43,.45);white-space:nowrap}
.avail__word--dim{color:var(--cream-60)}
.avail__flags{display:flex;align-items:center;gap:8px;filter:drop-shadow(0 0 4px rgba(255,173,43,.45))}
.avail__flags img{width:26.6px;height:19px;border-radius:1px}
.avail__price{font-size:14px;line-height:19px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);text-shadow:0 0 10px rgba(255,173,43,.45);white-space:nowrap}

/* The hero photo is a wide landscape shot with the scooter in its right
   third. The taller the window, the narrower the slice of that photo a
   full-bleed cover crop can show — so as the viewport gets squarer the crop
   walks to the right, keeping the mirror and the scooter in frame instead of
   drifting onto the empty road. */
@media (min-width:1025px){
  @media (max-aspect-ratio:3/2)  { .hero .media img{object-position:62% 50%} }
  @media (max-aspect-ratio:7/5)  { .hero .media img{object-position:72% 50%} }
  @media (max-aspect-ratio:5/4)  { .hero .media img{object-position:80% 50%} }
  @media (max-aspect-ratio:1/1)  { .hero .media img{object-position:88% 50%} }
}

/* ============================================================
   02 · MANIFESTO
   ============================================================ */
.manifesto .frame{padding:120px var(--gutter);justify-content:center}
.manifesto__grid{display:grid;grid-template-columns:640px 1fr;align-items:center}
.manifesto__left .h2{margin-top:28px;color:var(--cream)}
.manifesto__left .body-l{margin-top:28px}

.minifleet{margin-top:34px;display:flex;gap:32px}
.mini{width:136px;display:flex;flex-direction:column}
.mini__shot{display:flex;align-items:flex-end;height:96px}
.mini__shot img{height:100%;width:auto;max-width:none;object-fit:contain}
.mini__name{margin-top:14px;font-weight:500;font-size:17px;line-height:24px;letter-spacing:-.01em;color:var(--cream)}
.mini__price{margin-top:5px;font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px;letter-spacing:.08em;color:var(--amber)}

.pillars{position:relative;padding-left:144px;display:flex;flex-direction:column;justify-content:center;gap:clamp(64px,14vh,152px);align-self:stretch}
.pillars__rail{
  position:absolute;left:102px;top:-120px;bottom:-120px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,rgba(90,100,115,0) 0%,rgba(90,100,115,.35) 14%,rgba(90,100,115,.35) 85%,rgba(90,100,115,0) 100%);
}
.pillar{position:relative;max-width:528px;--rail-x:-40.5px}
.pillar span{display:block;font-weight:700;font-size:clamp(20px,1.81vw,26px);line-height:1.231;letter-spacing:-.01em;color:var(--cream)}
/* lit segment of the rail, always centred on this pillar’s bead */
.pillar::before{
  content:"";position:absolute;left:var(--rail-x);top:50%;
  width:3px;height:230px;border-radius:2px;transform:translate(-50%,-50%);pointer-events:none;
  background:linear-gradient(180deg,rgba(255,174,43,0) 0%,rgba(255,174,43,.16) 22%,rgba(255,174,43,.95) 50%,rgba(255,174,43,.16) 78%,rgba(255,174,43,0) 100%);
  box-shadow:var(--glow-line);
}
/* bead centred on the 3px rail: rail centre is 103.5px from the column’s left edge */
.pillar .bead{position:absolute;left:var(--rail-x);top:50%;transform:translate(-50%,-50%);z-index:2}

/* Tall desktop windows leave a lot of air under the manifesto: there the four
   vehicles break into two rows, grow, and get more room around them. */
@media (min-width:1025px) and (min-height:980px){
  .minifleet{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(28px,3.4vh,60px) clamp(28px,2.6vw,56px);
    margin-top:clamp(34px,4.2vh,68px);
    max-width:min(560px,100%);
  }
  .mini{width:auto}
  .mini__shot{height:clamp(96px,11vh,168px)}
  .mini__name{margin-top:16px;font-size:18px;line-height:25px}
  .mini__price{margin-top:6px;font-size:13px;line-height:17px}
  .manifesto__left .h2,.manifesto__left .body-l{margin-top:clamp(28px,3.2vh,44px)}
}

/* ============================================================
   03 · SCENARIOS
   ============================================================ */
.scenarios .frame{padding:clamp(76px,11.5vh,112px) var(--gutter) clamp(84px,13vh,126px)}
.scenarios__scrim-v{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,#0B0D12 0%,rgba(11,13,18,.55) 10%,rgba(11,13,18,.16) 37%,rgba(11,13,18,.66) 68%,#0B0D12 90%,#0B0D12 100%);
}
.scenarios__scrim-l{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(11,13,18,.5) 0%,rgba(11,13,18,.1) 26%,rgba(11,13,18,.28) 48%,rgba(11,13,18,.66) 72%,rgba(11,13,18,.9) 100%);
}
.scenarios__head{position:relative;z-index:2;flex:none}
.scenarios__head .h1{color:var(--cream);max-width:864px}
.scenarios__head .body-l{margin-top:clamp(14px,2.4vh,22px);max-width:864px}

/* scene backdrops — one photo per scenario, cross-faded */
.scene-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  opacity:0;transition:opacity 1.1s var(--ease-soft);
}
.scene-bg.is-on{opacity:1}

/* middle band: the rider’s own words on the left, their vehicle on the right */
.scenarios__stage{
  position:relative;z-index:2;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:flex-end;
  padding-block:clamp(16px,3vh,56px);
}
.quotes{position:relative;width:min(560px,46%);min-height:clamp(180px,26vh,250px);flex:none;margin-left:auto}
.quote{
  position:absolute;left:0;right:0;top:0;margin:0;
  opacity:0;transform:translate3d(-30px,0,0);
  transition:opacity .5s var(--ease-soft),transform .8s cubic-bezier(.16,.84,.3,1);
}
.quote.is-on{opacity:1;transform:none}
.quote__text{
  position:relative;
  font-weight:500;font-size:clamp(19px,1.8vw,26px);line-height:1.46;letter-spacing:-.01em;
  color:var(--cream);text-wrap:pretty;
}
.quote__text::before{
  content:"";position:absolute;left:-26px;top:.35em;width:3px;height:calc(100% - .5em);
  border-radius:2px;background:linear-gradient(180deg,rgba(255,174,43,0) 0%,var(--amber) 22%,rgba(255,174,43,.45) 78%,rgba(255,174,43,0) 100%);
  box-shadow:var(--glow-line);
}
.quote__by{margin-top:26px;display:flex;align-items:center;gap:14px}
.quote__ava{
  --av:clamp(44px,3.6vw,54px);
  width:var(--av);height:var(--av);min-width:var(--av);flex:0 0 var(--av);
  border-radius:50%;object-fit:cover;background:#14171d;
  box-shadow:0 0 18px 2px rgba(255,174,43,.34),0 6px 14px rgba(0,0,0,.5);
}
.quote__who{
  font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber);
}
.quote__who span{color:var(--cream-60)}

.scene-vehicles{position:absolute;left:0;right:auto;top:0;bottom:0;width:56%;pointer-events:none}
/* The vehicle fills the gap between the sub-headline and the amber eyebrow —
   with a little air top and bottom, and never taller than half the screen.
   `--tl` is that PNG’s own transparent left margin, pulled back so the metal
   starts on the same line as the headline rather than the file’s edge. */
.scene-veh{
  position:absolute;left:0;right:auto;top:50%;width:auto;
  height:min(50vh,calc(100% - clamp(12px,2.4vh,36px)));
  opacity:0;transform:translate3d(calc(var(--vx,150px) - var(--tl,0%)),-50%,0);
  transition:opacity .5s var(--ease-soft),transform .85s cubic-bezier(.16,.84,.3,1);
}
.scene-veh img{height:100%;width:auto;max-width:none;display:block}
.scene-veh.is-on{opacity:1;transform:translate3d(calc(0px - var(--tl,0%)),-50%,0);transition-duration:.6s,.85s}

.rail{position:relative;z-index:2;margin-top:auto;flex:none}
.rail .eyebrow{margin-bottom:clamp(32px,6vh,65px)}
.rail__stops{display:grid;grid-template-columns:repeat(6,1fr);gap:32px;align-items:start}
.stop{position:relative;height:clamp(112px,15vh,136px);cursor:pointer}
.stop__no{
  display:block;font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px;
  letter-spacing:.08em;color:var(--amber-70);transition:color .45s var(--ease-soft);
}
/* both sizes are laid out up front and cross-fade — nothing reflows on hover,
   so the transition stays perfectly smooth */
.stop__texts{position:relative;display:block;margin-top:10px}
.stop__text{
  position:absolute;left:0;top:0;right:-8px;
  font-weight:500;font-size:clamp(15px,1.32vw,19px);line-height:1.32;letter-spacing:-.01em;
  color:var(--cream-60);overflow-wrap:break-word;
  transition:opacity .5s var(--ease-soft),transform .6s var(--ease-soft),color .5s var(--ease-soft);
  will-change:opacity,transform;
}
.stop__text--lg{
  font-weight:700;font-size:clamp(18px,1.81vw,26px);line-height:1.231;color:var(--cream);
  opacity:0;transform:translate3d(0,5px,0);
}
.stop.is-active .stop__no{color:var(--amber)}
.stop.is-active .stop__text{opacity:0;transform:translate3d(0,-5px,0)}
.stop.is-active .stop__text--lg{opacity:1;transform:none}

/* the line and its beads share one box, so the beads always sit dead centre on it */
.rail__track{position:relative;height:22px;margin-top:12px}
.rail__line{
  position:absolute;left:0;right:0;top:50%;translate:0 -50%;height:3px;border-radius:2px;
  box-shadow:var(--glow-line);
  background:linear-gradient(90deg,rgba(255,174,43,.34) 0%,rgba(255,174,43,.03) 8.33%,rgba(255,174,43,.34) 16.67%,rgba(255,174,43,.03) 25%,rgba(255,174,43,.95) 33.33%,rgba(255,174,43,.03) 41.67%,rgba(255,174,43,.34) 50%,rgba(255,174,43,.03) 58.33%,rgba(255,174,43,.34) 66.67%,rgba(255,174,43,.03) 75%,rgba(255,174,43,.34) 83.33%,rgba(255,174,43,.1) 91.67%,rgba(255,174,43,0) 100%);
}
.rail__beads{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);gap:32px;align-items:center}
.rail__beads .bead{justify-self:start;align-self:center;transform:translateX(-50%);opacity:.92}
.rail__beads .bead.is-active{opacity:1;transform:translateX(-50%) scale(1.28)}

/* ============================================================
   04 · FLEET
   ============================================================ */
.fleet .frame{padding:112px var(--gutter) 74px}
.fleet .media img{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease-soft)}
.fleet .media img.is-on{opacity:1}
.fleet__scrim-b{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,#0B0D12 0%,rgba(11,13,18,.5) 10%,rgba(11,13,18,.3) 40%,rgba(11,13,18,.62) 68%,#0B0D12 90%,#0B0D12 100%);
}
.fleet__scrim-l{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(11,13,18,.9) 0%,rgba(11,13,18,0) 100%);
}
.fleet__vehicles{position:absolute;inset:0;z-index:2;pointer-events:none}
/* vehicles drive in from the side you came from */
.fleet__veh{
  position:absolute;top:22%;height:clamp(260px,56%,620px);
  opacity:0;transform:translate3d(var(--vx,160px),0,0);
  transition:opacity .5s var(--ease-soft),transform .85s cubic-bezier(.16,.84,.3,1);
}
.fleet__veh img{height:100%;width:auto;max-width:none;display:block}
.fleet__veh.is-on{opacity:1;transform:translate3d(0,0,0);transition-duration:.6s,.85s}
.fleet__veh--moped{right:5.99%}
.fleet__veh--bike{right:6.27%}
.fleet__veh--scooter{right:11.73%}
.fleet__veh--car{right:4.95%}

.fleet__head{position:relative;z-index:3;flex:none}
.fleet__head .h1{margin-top:26px;color:var(--cream)}
.fleet__desc{margin-top:26px;max-width:534px;color:var(--cream-60)}

.fleet__info{position:relative;z-index:3;flex:none;margin-top:clamp(48px,11vh,117px);min-height:96px;max-width:528px}
.info{
  position:absolute;left:0;right:0;top:0;
  opacity:0;visibility:hidden;transform:translate3d(0,12px,0);
  transition:opacity .28s var(--ease-soft),transform .5s var(--ease-soft),visibility .5s;
}
/* the outgoing block clears out before the incoming one arrives, so the two
   never read on top of each other */
.info.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease-soft) .18s,transform .6s var(--ease-soft) .12s,visibility 0s}
.info__price{font-weight:500;font-size:clamp(24px,2.08vw,30px);line-height:1.2;letter-spacing:-.01em;color:var(--amber);text-shadow:0 0 14px rgba(255,173,43,.25)}
.info__specs,.info__cities{margin-top:12px;font-family:var(--mono);font-weight:500;font-size:13px;line-height:18px;letter-spacing:.03em;text-transform:uppercase}
.info__specs{color:var(--cream-80)}
.info__cities{color:var(--amber);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.info__cities img{width:16.8px;height:12px;border-radius:1px}

/* ---- switcher: 4 equal tabs, one underline + one marker that slide ---- */
.switcher{
  position:relative;z-index:3;flex:none;margin-top:auto;padding-top:56px;padding-bottom:18px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
}
.tab{
  position:relative;display:flex;align-items:center;gap:12px;height:52px;text-align:left;
  color:var(--cream-45);font-weight:500;font-size:clamp(24px,2.64vw,38px);line-height:1.158;letter-spacing:-.04em;
  transition:color .45s var(--ease-soft);
}
.tab:hover{color:var(--cream-80)}
.tab.is-active{color:var(--cream);font-weight:700;font-size:clamp(25px,2.78vw,40px);letter-spacing:-.0375em}
.tab__soon{font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}

/* the underline runs 64px past the bead on the left and fades in over that
   whole tail, so it never reads as a cut edge */
.switcher__ul{
  position:absolute;left:0;top:calc(56px + 67px);height:3px;border-radius:2px;
  width:calc(var(--ul-w,289px) + 64px);
  transform:translateX(calc(var(--ul-x,0px) - 64px));
  background:linear-gradient(90deg,
    rgba(255,174,43,0) 0%,
    rgba(255,174,43,.08) 8%,
    rgba(255,174,43,.45) 14%,
    var(--amber) 19%,
    var(--amber) 26%,
    rgba(255,174,43,.5) 56%,
    rgba(255,174,43,.14) 82%,
    rgba(255,174,43,0) 100%);
  box-shadow:var(--glow-line);
  transition:transform .62s cubic-bezier(.16,.84,.3,1),width .62s cubic-bezier(.16,.84,.3,1);
}
.switcher__mk{
  position:absolute;left:0;top:calc(56px + 61px);
  transform:translateX(var(--mk-x,0px)) translateX(-50%);
  transition:transform .45s var(--ease-soft) .17s;
}
.switcher__mk .bead{box-shadow:var(--glow-bead-tight)}

/* the line drives across first, the bead lands on it a beat later */
.switcher.is-travel .switcher__ul{animation:ul-travel .62s var(--ease-soft) both}
.switcher.is-travel .switcher__mk .bead{animation:mk-land .5s cubic-bezier(.3,1.1,.4,1) .17s both}
@keyframes ul-travel{
  0%{opacity:.3}
  45%{opacity:.62}
  100%{opacity:1}
}
@keyframes mk-land{
  0%{transform:scale(.3);opacity:0}
  55%{transform:scale(1.22);opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* ============================================================
   05 · PASSES
   ============================================================ */
.passes .frame{padding:112px var(--gutter) 120px;justify-content:center}
.passes__title{color:var(--cream)}
.passes__perminute{margin-top:clamp(44px,9vh,92px)}
.passes__or{margin-top:clamp(44px,9vh,92px)}
.passes__row{margin-top:clamp(56px,9vh,92px);display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.pass{position:relative}
.pass__line{position:absolute;top:-42.25px;left:0;height:2.5px;border-radius:2px;box-shadow:var(--glow-line)}
.pass__line--1{width:62px;background:linear-gradient(90deg,rgba(255,174,43,.65) 0%,rgba(255,174,43,.325) 35%,rgba(255,174,43,.104) 70%,rgba(255,174,43,0) 100%)}
.pass__line--2{width:186px;background:linear-gradient(90deg,rgba(255,174,43,.8) 0%,rgba(255,174,43,.4) 35%,rgba(255,174,43,.128) 70%,rgba(255,174,43,0) 100%)}
.pass__line--3{width:434px;max-width:104%;height:3px;background:linear-gradient(90deg,var(--amber) 0%,rgba(255,174,43,.5) 35%,rgba(255,174,43,.16) 70%,rgba(255,174,43,0) 100%)}
/* centred with margins (not transform) so the entrance animation owns transform */
.pass__bead{position:absolute;top:-41px;left:0;margin-left:calc(var(--s) / -2);margin-top:calc(var(--s) / -2)}
.pass__term{font-family:var(--mono);font-weight:500;font-size:14px;line-height:19px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-70)}
.pass__price{margin-top:14px;font-weight:700;font-size:clamp(48px,5.28vw,76px);line-height:1.053;letter-spacing:-.03em;color:var(--cream-80)}
.pass__unit{margin-top:14px;font-family:var(--mono);font-weight:500;font-size:14px;line-height:19px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-60)}
.pass.is-best .pass__term{color:var(--amber)}
.pass.is-best .pass__price{color:var(--cream)}

/* staged entrance: every rail drives in from the left one after another,
   then the day labels, then the prices, then the per-day figures.
   `.is-reset` rewinds the block instantly once it is off screen, so the
   sequence plays again in full the next time you scroll onto it. */
.stage.is-reset *{transition:none !important}
.pass:nth-child(1){--o:0ms}
.pass:nth-child(2){--o:150ms}
.pass:nth-child(3){--o:300ms}
.pass__line,.pass__bead,.pass__term,.pass__price,.pass__unit{
  opacity:0;transform:translate3d(-72px,0,0);
  transition:opacity .7s var(--ease-out) var(--sd,0ms),
             transform 1s cubic-bezier(.16,.84,.3,1) var(--sd,0ms);
}
.pass__line,.pass__bead{--sd:var(--o,0ms)}
.pass__term {--sd:calc(var(--o,0ms) + 440ms)}
.pass__price{--sd:calc(var(--o,0ms) + 700ms)}
.pass__unit {--sd:calc(var(--o,0ms) + 940ms)}
.passes__row.is-in .pass__line,
.passes__row.is-in .pass__bead,
.passes__row.is-in .pass__term,
.passes__row.is-in .pass__price,
.passes__row.is-in .pass__unit{opacity:1;transform:none}

/* ============================================================
   06 · IMPACT — full-bleed columns
   ============================================================ */
.impact{display:block}
.impact__cols{position:absolute;inset:0;display:flex;z-index:0}
.icol{position:relative;flex:0 0 auto;width:26.6667%;cursor:pointer;transition:width .75s var(--ease-soft)}
.icol[data-i="1"],.icol[data-i="2"]{width:23.3333%}
.icol__media{position:absolute;inset:0;overflow:hidden;background:#14171d}
.icol__bg{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.icol__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,13,18,.93) 0%,rgba(11,13,18,.34) 22%,rgba(11,13,18,.16) 46%,rgba(11,13,18,.74) 68%,rgba(11,13,18,.97) 100%);
}
/* rule box is 24px wide with the 2px line painted dead centre — the bead
   shares the same box, so the two can never drift apart */
.icol__rule{
  position:absolute;left:-12px;top:0;bottom:0;width:24px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,174,43,0) 0%,rgba(255,174,43,.3) 16%,rgba(255,174,43,.5) 55%,rgba(255,174,43,.62) 76%,rgba(255,174,43,.22) 92%,rgba(255,174,43,0) 100%) 50% 0 / 2px 100% no-repeat;
  filter:drop-shadow(0 0 5px rgba(255,173,43,.35));
}
.icol__rule .bead{position:absolute;left:50%;top:73.2%;transform:translate(-50%,-50%)}
.icol__text{
  position:absolute;left:64px;right:24px;top:61.5%;z-index:2;
  transition:left .75s var(--ease-soft),right .75s var(--ease-soft),top .75s var(--ease-soft);
}
.icol__num{font-weight:700;font-size:clamp(44px,5.28vw,76px);line-height:1.053;letter-spacing:-.03em;color:var(--cream);white-space:nowrap;transition:font-size .75s var(--ease-soft)}
.icol__label{margin-top:12px;font-family:var(--mono);font-weight:500;font-size:14px;line-height:19px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);transition:font-size .75s var(--ease-soft),margin-top .75s var(--ease-soft)}
.icol__desc{margin-top:12px;max-width:256px;font-size:17px;line-height:26px;color:var(--cream-60);transition:opacity .45s var(--ease-soft),transform .6s var(--ease-soft)}

.impact.is-hovering .icol{width:8.3333%}
.impact.is-hovering .icol.is-open{width:75%}
.impact.is-hovering .icol:not(.is-open) .icol__text{left:24px;right:12px;top:68.5%}
.impact.is-hovering .icol:not(.is-open) .icol__num{font-size:26px}
.impact.is-hovering .icol:not(.is-open) .icol__label{font-size:10px;letter-spacing:.06em;margin-top:6px}
.impact.is-hovering .icol:not(.is-open) .icol__desc{opacity:0;transform:translate3d(0,6px,0);pointer-events:none}

.impact__scrim-head{
  position:absolute;left:0;right:0;top:0;height:52%;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,13,18,.72) 0%,rgba(11,13,18,.28) 60%,rgba(11,13,18,0) 100%);
}
.impact__head{position:absolute;left:0;right:0;top:108px;z-index:5;pointer-events:none}
.impact__lead{
  position:absolute;left:var(--gutter);top:0;
  width:min(1200px,calc(100% - var(--gutter) * 2));
  opacity:0;transform:translate3d(0,12px,0);
  transition:opacity .55s var(--ease-soft),transform .65s var(--ease-soft);
}
.impact__lead.is-on{opacity:1;transform:none}
.lead__text{
  font-weight:700;font-size:clamp(24px,2.78vw,40px);line-height:1.3;letter-spacing:-.02em;color:var(--cream);
}
/* the open column gets a narrower headline and a four-column read below it */
/* an open column is 75 % of the screen — the text that belongs to it lives
   inside that column, never spilling onto the collapsed strips beside it */
.impact__lead:not([data-lead="base"]){width:min(1120px,calc(75% - var(--gutter) * 2));container-type:inline-size}
.impact__lead:not([data-lead="base"]) .lead__text{max-width:min(584px,52%)}

.lead__facts{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.2vw,32px);
  margin-top:clamp(26px,4.4vh,52px);
}
/* four in a row only while all four actually fit; otherwise two by two */
@container (min-width:900px){
  .lead__facts{grid-template-columns:repeat(4,1fr)}
}
.fact{
  padding-top:17px;border-top:1px solid rgba(255,174,43,.24);
  opacity:0;transform:translate3d(-26px,0,0);
  transition:opacity .6s var(--ease-out) var(--fd,0ms),
             transform .85s cubic-bezier(.16,.84,.3,1) var(--fd,0ms);
}
.fact:nth-child(1){--fd:240ms}
.fact:nth-child(2){--fd:340ms}
.fact:nth-child(3){--fd:440ms}
.fact:nth-child(4){--fd:540ms}
.impact__lead.is-on .fact{opacity:1;transform:none}
.fact__num{
  font-weight:700;font-size:clamp(20px,1.94vw,28px);line-height:1.2;letter-spacing:-.02em;
  color:var(--cream);white-space:nowrap;
}
.fact__label{
  margin-top:9px;font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber);
}
.fact__note{margin-top:11px;font-size:15px;line-height:22px;color:var(--cream-60);max-width:26ch}
/* one collapsed column (8.3333%) of offset per step — always flush with the open column’s number */
.impact__lead[data-lead="1"]{margin-left:8.3333%}
.impact__lead[data-lead="2"]{margin-left:16.6667%}
.impact__lead[data-lead="3"]{margin-left:25%}

/* ============================================================
   07 · CTA
   ============================================================ */
.cta .frame{padding:0 var(--gutter)}
.cta__copy{margin-block:auto}
/* scrim so the copy stays readable over the city lights */
.cta::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,13,18,.86) 0%,rgba(11,13,18,.62) 34%,rgba(11,13,18,.2) 60%,rgba(11,13,18,0) 100%),
    linear-gradient(180deg,rgba(11,13,18,.5) 0%,rgba(11,13,18,.12) 28%,rgba(11,13,18,.2) 70%,rgba(11,13,18,.62) 100%);
}
.cta__veil{position:absolute;border-radius:50%;pointer-events:none;z-index:1}
.cta__veil--1{
  width:1230px;height:1230px;left:-350px;top:-10%;
  background:radial-gradient(circle at 50% 50%,rgba(11,14,18,.62) 0%,rgba(11,14,18,.55) 26%,rgba(11,14,18,.3) 48%,rgba(11,14,18,0) 68%);
}
.cta__veil--2{
  width:950px;height:950px;left:-270px;top:6%;
  background:radial-gradient(circle at 50% 50%,rgba(11,14,18,.7) 0%,rgba(11,14,18,.6) 26%,rgba(11,14,18,.32) 48%,rgba(11,14,18,0) 68%);
}
.cta__glow{
  position:absolute;width:62.5%;aspect-ratio:1;left:43.85%;top:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,174,43,.22) 0%,rgba(255,174,43,.08) 42%,rgba(255,174,43,0) 70%);
}
.cta__phone{
  position:absolute;left:75.1%;top:54.6%;width:37.08%;aspect-ratio:534/753;z-index:2;
  transform:translate(-50%,-50%) rotate(-4.46deg);
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.55));
}
.cta__phone img{width:100%;height:100%;object-fit:contain}
.cta__copy{position:relative;z-index:3;max-width:640px}
.cta__copy .h1{margin-top:30px;color:var(--cream)}
.cta__lead{margin-top:30px;max-width:446px}
.cta__actions{margin-top:30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cta__note{color:var(--cream-60);font-size:17px;line-height:26px}

/* ============================================================
   FOOTER + mobile menu
   ============================================================ */
.foot{position:relative;z-index:3;flex:none;border-top:1px solid rgba(245,239,227,.1)}
.foot__inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0;flex-wrap:wrap}
.foot__menu{display:flex;gap:28px}
.foot__menu a{color:var(--steel);font-size:15px;transition:color .3s var(--ease)}
.foot__menu a:hover{color:var(--cream)}
.foot__copy{color:rgba(245,239,227,.35);font-family:var(--mono);font-size:12px;letter-spacing:.06em}

.mmenu{
  position:fixed;inset:0;z-index:50;background:rgba(11,13,18,.97);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  font-size:26px;font-weight:500;
}
.mmenu[hidden]{display:none}
.mmenu .btn{font-size:18px;margin-top:12px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1280px){
  :root{--gutter:40px}
  .manifesto__grid{grid-template-columns:1fr 1fr}
  .pillars{padding-left:110px}
  .pillars__rail{left:72px}
  .pillar{--rail-x:-36.5px}
  .switcher{gap:20px}
}

/* ============================================================
   TABLET + PHONE — the same scheme: one section = one screen
   ============================================================ */
@media (max-width:1024px){
  :root{--gutter:28px}

  .nav__menu,.btn--nav{display:none}
  .burger{display:flex}

  .sec{min-height:100svh}
  .frame{flex:1 1 auto;min-height:0}

  .h1{font-size:clamp(30px,6.6vw,46px);line-height:1.08;letter-spacing:-.03em}
  .h2{font-size:clamp(26px,6.2vw,42px);line-height:1.12}
  .body-l{font-size:16px;line-height:1.5}
  .body-m{font-size:15px;line-height:1.5}
  .eyebrow{font-size:12px;line-height:16px;letter-spacing:.1em}
  .btn{padding:16px 28px;font-size:16px}
  .btn--lg{padding:17px 30px;font-size:17px;line-height:24px}

  /* ---------- 01 · hero ---------- */
  /* the frame is portrait, the photo is not: pull the crop across to the
     right so the mirror and the dash stay in shot instead of the empty road */
  .hero .media img{object-position:86% 50%}
  .hero .frame{padding:8px var(--gutter) 26px}
  .hero__body{display:contents}
  .hero__title,.hero__lead{order:1}
  .hero__title{margin-top:26px;font-size:clamp(34px,8.6vw,54px);line-height:1.08}
  .hero__lead{margin-top:16px;font-size:16px;line-height:1.5;color:var(--cream-60)}
  .hero__lead br{display:none}
  .hero__cta{order:3;margin-top:auto;padding-top:32px;flex-direction:column;align-items:stretch;text-align:center;gap:12px}
  .hero__cta .btn{width:100%}
  .hero__note{color:var(--cream-60);text-align:center;font-size:15px}
  .avail{position:static;order:2;margin-top:16px;gap:9px;flex-wrap:nowrap}
  .avail__line,.avail__glow{display:none}
  .avail .bead{--s:11px;padding:1.6px}
  .avail__word,.avail__price{font-size:11px;line-height:15px;letter-spacing:.04em}
  .avail__flags{gap:6px}
  .avail__flags img{width:17px;height:12px}

  /* ---------- 02 · manifesto ---------- */
  .manifesto .frame{padding:clamp(52px,7.4vh,104px) var(--gutter) clamp(30px,4.6vh,68px);justify-content:center}
  .manifesto__grid{grid-template-columns:1fr;gap:clamp(22px,4.2vh,52px)}
  .manifesto__left .h2{margin-top:12px}
  .manifesto__left .body-l{margin-top:14px}

  .minifleet{margin-top:clamp(18px,3.2vh,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.8vh,44px) 20px}
  .mini{width:auto}
  .mini__shot{height:clamp(70px,10.6vh,152px)}
  .mini__name{margin-top:12px;font-size:clamp(16px,2vh,21px);line-height:1.3;letter-spacing:-.01em}
  .mini__price{margin-top:5px;font-size:clamp(13px,1.65vh,17px);line-height:1.35;letter-spacing:.05em}

  .pillars{padding-left:38px;gap:clamp(13px,2.6vh,36px);align-self:auto}
  .pillars__rail{left:10px;top:2px;bottom:2px}
  .pillar{--rail-x:-28px;max-width:none}
  .pillar span{font-size:clamp(16px,2.2vh,23px);line-height:1.3;letter-spacing:-.01em}
  .pillar::before{height:72px}
  .pillars .bead{--s:clamp(16px,2.1vh,21px);padding:2.4px}

  /* ---------- 03 · scenarios ---------- */
  /* vehicle across the full width, the rider’s words under it,
     the six scenarios in two columns at the foot of the screen */
  .scenarios .frame{padding:56px var(--gutter) 24px}
  .scenarios__scrim-l{background:linear-gradient(180deg,rgba(11,13,18,.72) 0%,rgba(11,13,18,.1) 34%,rgba(11,13,18,.55) 72%,rgba(11,13,18,.9) 100%)}
  .scenarios__head .body-l{margin-top:12px}
  .scenarios__stage{flex-direction:column;align-items:stretch;padding-block:clamp(10px,1.6vh,20px);gap:clamp(12px,2vh,20px)}

  .scene-vehicles{position:relative;order:-1;inset:auto;width:100%;height:auto;min-height:140px;flex:1 1 auto}
  .scene-veh{position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;transform:translate3d(var(--vx,150px),0,0)}
  .scene-veh img{width:100%;height:100%;object-fit:contain}
  .scene-veh.is-on{transform:none}

  .quotes{width:auto;min-height:clamp(150px,20vh,192px);flex:none;margin-left:0}
  .quote{position:absolute;inset:0 0 auto 0}
  .quote__text{font-size:17px;line-height:1.45;padding-left:16px}
  .quote__text::before{left:0}
  .quote__by{margin-top:16px}
  .quote__ava{--av:44px}
  .quote__who{font-size:11px;line-height:15px;letter-spacing:.09em}

  .rail{margin-top:auto}
  .rail .eyebrow{margin-bottom:clamp(14px,2.4vh,24px)}
  .rail__stops{grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:clamp(9px,1.6vh,16px) 18px}
  .stop{height:auto;min-height:0;padding-left:20px;cursor:pointer}
  .stop::before{
    content:"";position:absolute;left:0;top:3px;width:11px;height:11px;border-radius:50%;
    background:rgba(255,174,43,.2);box-shadow:0 0 0 1px rgba(255,174,43,.3) inset;
    transition:background-color .4s var(--ease-soft),box-shadow .4s var(--ease-soft);
  }
  .stop.is-active::before{background:var(--amber);box-shadow:0 0 12px rgba(255,174,43,.75)}
  .stop__no{font-size:11px;line-height:14px}
  .stop__texts{margin-top:5px}
  /* one static line of text per stop — nothing overlaps, nothing reflows */
  .stop__text{position:static;right:auto;font-size:14px;line-height:1.32;transform:none;opacity:1}
  .stop__text--lg{display:none}
  .stop.is-active .stop__text{opacity:1;transform:none;color:var(--cream)}
  .rail__track{display:none}

  /* ---------- 04 · fleet ---------- */
  .fleet .frame{padding:84px var(--gutter) 34px}
  .fleet__scrim-l{background:linear-gradient(180deg,rgba(11,13,18,.75) 0%,rgba(11,13,18,.12) 36%,rgba(11,13,18,.5) 74%,rgba(11,13,18,.92) 100%)}
  .fleet__head{order:1}
  .fleet__head .h1{margin-top:12px}
  .fleet__desc{margin-top:14px;max-width:none}

  .fleet__vehicles{position:relative;order:2;inset:auto;width:100%;height:auto;min-height:150px;flex:1 1 auto;margin-top:clamp(14px,2.2vh,24px)}
  .fleet__veh{position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;transform:translate3d(var(--vx,160px),0,0)}
  .fleet__veh--moped,.fleet__veh--bike,.fleet__veh--scooter,.fleet__veh--car{right:0}
  .fleet__veh img{width:100%;height:100%;object-fit:contain}
  .fleet__veh.is-on{transform:none}

  .fleet__info{order:3;margin-top:clamp(16px,2.6vh,28px);min-height:84px;max-width:none}
  .info__price{font-size:22px}
  .info__specs,.info__cities{margin-top:8px;font-size:11px;line-height:16px}

  .switcher{order:4;margin-top:auto;padding:clamp(18px,3vh,30px) 0 0;grid-template-columns:1fr 1fr;gap:clamp(12px,2vh,20px) 18px}
  .tab{height:auto;min-height:40px;font-size:20px;letter-spacing:-.03em;gap:10px}
  .tab.is-active{font-size:20px;letter-spacing:-.03em}
  .tab::before{
    content:"";flex:none;width:11px;height:11px;border-radius:50%;
    background:rgba(255,174,43,.2);box-shadow:0 0 0 1px rgba(255,174,43,.3) inset;
    transition:background-color .4s var(--ease-soft),box-shadow .4s var(--ease-soft);
  }
  .tab.is-active::before{background:var(--amber);box-shadow:0 0 12px rgba(255,174,43,.75)}
  .tab__soon{font-size:10px}
  .switcher__ul,.switcher__mk{display:none}

  /* ---------- 05 · passes ---------- */
  .passes .frame{padding:84px var(--gutter) 40px;justify-content:center}
  .passes__perminute{margin-top:clamp(18px,3vh,32px)}
  .passes__or{margin-top:clamp(22px,3.6vh,38px)}
  .passes__row{margin-top:clamp(30px,5vh,52px);grid-template-columns:1fr;gap:clamp(30px,5vh,52px)}
  .pass__line{top:-26px}
  .pass__bead{top:-24.5px}
  .pass__line--3{width:min(434px,100%)}
  .pass__term{font-size:12px;line-height:16px}
  .pass__price{margin-top:8px;font-size:clamp(38px,10vw,56px)}
  .pass__unit{margin-top:8px;font-size:12px;line-height:16px}

  /* ---------- 06 · impact ---------- */
  /* four photo tiles in a 2 × 2 grid under the headline */
  .impact{display:flex;flex-direction:column}
  .impact__scrim-head{display:none}
  .impact__head{position:static;order:1;flex:none;padding:84px var(--gutter) clamp(18px,3vh,30px);pointer-events:auto}
  .impact__lead{position:static;display:none;width:auto;margin-left:0}
  .impact__lead[data-lead="base"]{display:block;opacity:1;transform:none}
  .lead__text{font-size:17px;line-height:1.48;font-weight:500;color:var(--cream-80);max-width:none}

  /* the same fan-out, turned on its side: four bands stacked down the screen,
     the one you tap grows and the other three give way */
  .impact__cols{position:static;order:2;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:2px}
  .icol,.icol[data-i="1"],.icol[data-i="2"]{
    width:auto;min-height:0;flex:1 1 0;cursor:pointer;overflow:hidden;
    transition:flex-grow .75s var(--ease-soft);
  }
  /* the desktop fan works on width — on a phone it has to work on height */
  .impact.is-hovering .icol,
  .impact.is-hovering .icol.is-open{width:auto}
  .impact.is-hovering .icol{flex-grow:.62}
  .impact.is-hovering .icol.is-open{flex-grow:2.14}
  /* numbers, beads and the lit point of the rule all sit on one 30 % line */
  .impact{--ix:30%}
  .icol__text{left:var(--ix);right:16px;top:auto;bottom:18px;transition:bottom .75s var(--ease-soft)}
  .icol__num{font-size:clamp(34px,10.4vw,56px);line-height:1.02}
  .icol__label{margin-top:8px;font-size:11px;letter-spacing:.1em}
  /* the description takes no room until its band is open, so the numbers in a
     collapsed band never ride up into the rule above them */
  .icol__desc{
    display:block;margin-top:0;max-height:0;max-width:38ch;
    font-size:15px;line-height:22px;overflow:hidden;
    opacity:0;transform:none;pointer-events:none;
    transition:opacity .4s var(--ease-soft),max-height .65s var(--ease-soft),margin-top .65s var(--ease-soft);
  }
  .icol.is-open .icol__desc{opacity:1;max-height:9em;margin-top:10px}
  .impact.is-hovering .icol:not(.is-open) .icol__text{left:var(--ix);right:16px;top:auto}
  .impact.is-hovering .icol:not(.is-open) .icol__num{font-size:clamp(26px,7.6vw,42px)}
  .impact.is-hovering .icol:not(.is-open) .icol__label{font-size:10px;letter-spacing:.09em;margin-top:6px}
  .icol__scrim{background:linear-gradient(180deg,rgba(11,13,18,.55) 0%,rgba(11,13,18,.2) 34%,rgba(11,13,18,.72) 74%,rgba(11,13,18,.95) 100%)}
  .icol__rule{
    left:0;right:0;top:0;bottom:auto;width:auto;height:22px;
    background:linear-gradient(90deg,
      rgba(255,174,43,0) 0%,
      rgba(255,174,43,.1) 10%,
      rgba(255,174,43,.45) 24%,
      var(--amber) 30%,
      rgba(255,174,43,.42) 64%,
      rgba(255,174,43,.08) 88%,
      rgba(255,174,43,0) 100%) 0 50% / 100% 2px no-repeat;
  }
  .icol__rule .bead{--s:15px;left:var(--ix);top:50%}

  /* ---------- 07 · cta ---------- */
  .cta .frame{padding:26px var(--gutter) 0}
  .cta__phone{
    position:relative;left:auto;top:auto;flex:none;
    width:min(340px,66vw,26.5vh);margin:clamp(6px,1.6vh,26px) auto 0;
    transform:rotate(-4.46deg);
  }
  .cta__copy{margin-block:auto 0;padding-top:clamp(20px,3.4vh,36px);max-width:none}
  .cta__copy .h1{margin-top:12px}
  .cta__lead{margin-top:14px;max-width:none}
  .cta__actions{margin-top:20px;gap:14px}
  .cta__note{font-size:14px;line-height:20px}
  .cta__veil,.cta__glow{display:none}
  .cta::before{background:linear-gradient(180deg,rgba(11,13,18,.5) 0%,rgba(11,13,18,.18) 26%,rgba(11,13,18,.62) 62%,rgba(11,13,18,.92) 100%)}

  .foot{margin-top:auto}
  .foot__inner{padding:16px 0;gap:12px;flex-direction:column;align-items:flex-start}
  .foot__menu{gap:20px}
  .foot__menu a{font-size:14px}
}

@media (max-width:640px){
  :root{--gutter:20px}
  body{font-size:16px}
  .logo{font-size:23px;line-height:28px}

  .hero__title{letter-spacing:-.035em}
  .avail{gap:7px}
  .avail__word,.avail__price{font-size:10px;letter-spacing:.02em}
  .avail__flags{gap:5px}
  .avail__flags img{width:15px;height:11px}

  .quote__text{font-size:16px}
  .stop__text{font-size:13px}
  .tab{font-size:18px}
  .tab.is-active{font-size:18px}

  .icol__text{right:12px;bottom:14px}
  .lead__text{font-size:16px}
}

/* narrow phones wrap every line more, so the whole scale steps down a notch
   to keep each section inside one screen */
@media (max-width:374px){
  .h1{font-size:26px;line-height:1.1}
  .h2{font-size:24px;line-height:1.14}
  .hero__title{font-size:31px;line-height:1.08}
  .hero__lead{font-size:15px;margin-top:14px}
  .manifesto__left .body-l{font-size:15px;line-height:1.44}
  .mini__shot{height:clamp(62px,9vh,120px)}
  .mini__name{font-size:15px}
  .mini__price{font-size:12px}
  .pillar span{font-size:15px}
  .scenarios__head .body-l{display:none}
  .quote__text{font-size:15px;line-height:1.42}
  .quote__by{margin-top:12px}
  .stop__no{font-size:10px}
  .stop__text{font-size:12px;line-height:1.3}
  .fleet__desc{font-size:14px;line-height:1.45}
  .info__specs,.info__cities{font-size:10px;line-height:15px}
  .tab{font-size:17px}
  .tab.is-active{font-size:17px}
  .lead__text{font-size:15px;line-height:1.46}
  .cta__lead{font-size:15px}
}

/* screens too short to hold a whole panel: fall back to ordinary scrolling
   rather than clipping the bottom of every section */
@media (max-height:679px){
  .sec{min-height:0}
  .hero{min-height:100svh}
  .manifesto .frame,.scenarios .frame,.fleet .frame,.passes .frame{padding-block:64px 52px}
  .impact__head{padding-block:64px 24px}
  .icol{min-height:170px}
  .cta .frame{padding-block:40px 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .parallax img{transform:none!important;animation:none!important}
  .reveal,.fade{opacity:1!important;transform:none!important}
}