/* ============================================================
   Alpha Platforms · One wall. One day. No shed.
   Two typefaces only: Bebas Neue (display) + system grotesk.
   Tone is set per section via --bg / --fg / --mute / --ghost.
   ============================================================ */

@font-face{
  font-family:'Bebas Neue';
  src:url('../assets/BebasNeue.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --cyan:#29B6E8;
  --yellow:#FFD100;
  --blue:#123C8C;
  --ink:#0E0F12;
  --paper:#F1F1EC;          /* warm off-white, the typographic ground */
  --disp:'Bebas Neue', Impact, 'Haettenschweiler', sans-serif;
  --grot:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);

  /* default tone: dark ground */
  --bg:var(--ink);
  --fg:#F1F1EC;
  --mute:rgba(241,241,236,.56);
  --line:rgba(241,241,236,.14);
  --ghost:rgba(241,241,236,.17);
  --accent:var(--cyan);
}

/* ---------- tones ---------- */
.t-paper{
  --bg:var(--paper); --fg:#16171B;
  --mute:rgba(22,23,27,.58); --line:rgba(22,23,27,.16);
  --ghost:rgba(22,23,27,.19); --accent:var(--cyan);
}
.t-ink{
  --bg:var(--ink); --fg:#F1F1EC;
  --mute:rgba(241,241,236,.56); --line:rgba(241,241,236,.14);
  --ghost:rgba(241,241,236,.17); --accent:var(--cyan);
}
.t-cyan{
  --bg:var(--cyan); --fg:#0E0F12;
  --mute:rgba(14,15,18,.68); --line:rgba(14,15,18,.2);
  --ghost:rgba(14,15,18,.22); --accent:#FFFFFF;
}
.t-blue{
  --bg:var(--blue); --fg:#F1F1EC;
  --mute:rgba(241,241,236,.62); --line:rgba(255,209,0,.24);
  --ghost:rgba(241,241,236,.2); --accent:var(--yellow);
}

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

/* line breaking: headings split evenly instead of dropping one orphan word
   ("YOUR CREW CLIPS / IN"), body copy never ends on a single word */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

html,body{
  height:100%;
  /* the genre: the page itself never scrolls. Scrolling is virtual. */
  overflow:hidden;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--grot);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
body{position:fixed;inset:0;width:100%;touch-action:none}

img,video{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* ============================================================
   the signature: a gradient wipe clipped to the text.
   ink behind the head, accent in the head, ghost ahead of it.
   ============================================================ */
.sweep{
  /* background-size is 300%, so the visible window is one third of the
     gradient. Everything before 33.3% must be pure --fg and everything
     after 66.6% pure --ghost, otherwise the sweep never settles clean. */
  background-image:linear-gradient(90deg,
    var(--fg) 0%, var(--fg) 40%,
    var(--accent) 44%, var(--accent) 46%,
    var(--ghost) 50%, var(--ghost) 100%);
  background-size:300% 100%;
  background-position:100% 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  /* clip to the glyphs, not the column, so the head crosses letters */
  width:fit-content;max-width:100%;
}
.sc--announce .sweep,.sc--end .sweep{margin-left:auto;margin-right:auto}
/* The hero reads slower than the section heads: it is the first thing seen.
   Deliberately NOT --ease here. That curve is a hard ease-out, so the wipe
   fired in a burst and then crawled. A wipe wants an even travel. */
.sweep.go{animation:sweep 2.8s cubic-bezier(.5,.02,.25,1) forwards}
.sweep.go--2{animation-delay:.5s}
.sweep.go--3{animation-delay:1s}
/* scoped to .sc__in so the day captions are not caught here: they re-fire
   per moment from .cap.on instead */
.sc.is-in > .sc__in .sweep{animation:sweep 2s cubic-bezier(.5,.02,.25,1) forwards}
.cap.on .sweep{animation:sweep 1.25s cubic-bezier(.5,.02,.25,1) forwards}
@keyframes sweep{to{background-position:0% 0}}

@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .sweep{color:var(--fg);-webkit-text-fill-color:currentColor}
}

/* ---------- shared type ---------- */
.supra{
  font-size:clamp(9px,.86vw,11px);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
}
.t-cyan .supra{color:rgba(14,15,18,.6)}
.t-blue .supra{color:var(--cyan)}

/* every heading is set in caps */
.h2{line-height:.86;letter-spacing:-.01em;color:var(--fg);text-transform:uppercase}
.h2--disp{font-family:var(--disp);font-size:clamp(48px,8.8vw,136px);letter-spacing:.005em;line-height:.84}
.h2--sent{font-size:clamp(28px,4.2vw,58px);font-weight:700;line-height:1.04;letter-spacing:-.005em}
.h2--low{font-size:clamp(24px,3.2vw,44px);font-weight:600;letter-spacing:0;line-height:1.06}
.h2--title{font-size:clamp(25px,3.4vw,48px);font-weight:700;letter-spacing:-.004em}

.body{font-size:clamp(15px,1.28vw,18px);line-height:1.5;color:var(--mute);max-width:44ch}

/* ---------- progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:rgba(128,128,128,.18);opacity:0;transition:opacity .5s var(--ease)}
.progress i{display:block;height:100%;width:0;background:var(--cyan)}
body.is-live .progress{opacity:1}

/* ---------- nav ---------- */
.nav{
  /* above the start screen (80) so the mark and the phone sit on the first
     screen too, below the loader (90) */
  position:fixed;top:0;left:0;right:0;z-index:86;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.2vw,28px) clamp(24px,6vw,90px);
  opacity:0;pointer-events:none;
  transition:opacity .6s var(--ease),color .5s var(--ease);
  color:#F1F1EC;
}
body.is-live .nav{opacity:1;pointer-events:auto}
body.on-light .nav{color:#16171B}

/* the mark keeps brand cyan everywhere except on the cyan plate, where it
   would disappear. Paths are recoloured through currentColor: a CSS fill
   beats the fill attribute baked into the file. */
/* driven by an inherited custom property rather than a cascade override, so
   there is no specificity question about which rule wins */
.nav__mark{display:block;width:clamp(112px,10.6vw,148px);color:var(--markInk,#29B6E8);transition:color .5s var(--ease)}
.nav__mark svg{display:block;width:100%;height:auto}
.nav__mark svg path{fill:currentColor}

.nav__tel{color:var(--telInk,currentColor);font-size:clamp(12px,1.05vw,15px);font-weight:600;letter-spacing:.08em;opacity:.86;font-variant-numeric:tabular-nums}
@media(hover:hover){.nav__tel:hover{opacity:1}}

/* ---------- 1 · loading ----------
   No separate progress bar: the mark itself fills left to right, using the
   same wipe as every heading on the page. */
.loadingScreen{
  position:fixed;inset:0;z-index:90;background:var(--paper);color:#16171B;
  display:grid;place-items:center;transition:opacity .7s var(--ease);
}
.loadingScreen.is-out{opacity:0;pointer-events:none}
.loadingScreen__in{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,30px)}
.loadingScreen__logo{position:relative;width:clamp(240px,30vw,440px)}
.loadingScreen__logo img{display:block;width:100%;height:auto}
.loadingScreen__ghost{opacity:.16}
.loadingScreen__fill{
  position:absolute;inset:0;
  clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);
  transition:clip-path .3s linear;
}
.loadingScreen__pct{
  font-family:var(--disp);font-size:clamp(16px,1.6vw,22px);line-height:1;
  letter-spacing:.14em;color:var(--cyan);font-variant-numeric:tabular-nums;
}
.loadingScreen__pct em{font-style:normal;opacity:.55;margin-left:.15em}

/* ---------- 2 · start screen, typographic, no video ---------- */
.startScreen{
  position:fixed;inset:0;z-index:80;
  background:var(--paper);color:#16171B;
  --fg:#16171B;--ghost:rgba(22,23,27,.19);--accent:var(--cyan);
  /* Bebas is condensed, so the headline can never fill a wide canvas.
     The composition leans into that: one heavy block upper left, one light
     block lower right, nothing else competing. */
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-content:center;
  column-gap:clamp(28px,5vw,110px);
  padding:clamp(84px,12vh,130px) clamp(24px,6vw,90px) clamp(40px,7vh,84px);
  /* no transition here: opacity and transform are driven per frame by the
     same smoothed scalar as the sections, so it scrolls away like a layer */
  will-change:transform,opacity;
}
.startScreen__head{grid-column:1;align-self:center}
.startScreen__h1{
  font-family:var(--disp);
  font-size:clamp(50px,11.7vw,198px);
  line-height:.83;letter-spacing:.004em;margin:0;
}
.startScreen__h1 span{display:block;width:fit-content}
.startScreen__lede{
  grid-column:2;align-self:end;justify-self:end;
  text-align:right;max-width:30ch;padding-bottom:.5em;
  font-size:clamp(15px,1.3vw,19px);line-height:1.45;color:rgba(22,23,27,.42);
  opacity:0;animation:rise 1s var(--ease) 1.9s forwards;
}

.btn{
  display:inline-flex;align-items:center;gap:.8em;
  background:var(--cyan);color:#0E0F12;
  border:0;border-radius:999px;cursor:pointer;
  padding:1.05em 2.1em;
  font-size:clamp(11px,1vw,13px);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.btn::after{content:'';width:16px;height:1px;background:currentColor;transition:width .35s var(--ease)}
@media(hover:hover){.btn:hover{background:#43c6f2}.btn:hover::after{width:26px}}
.btn:active{transform:scale(.97)}
.btn--y{background:var(--yellow)}
@media(hover:hover){.btn--y:hover{background:#ffdb33}}
.startScreen .btn{margin-top:clamp(26px,3.2vw,46px);opacity:0;animation:rise .9s var(--ease) 1.6s forwards}

@keyframes rise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}

/* ---------- experience shell ---------- */
.experience_wrap{position:fixed;inset:0;opacity:0;transition:opacity .6s var(--ease)}
body.is-live .experience_wrap{opacity:1}
.stage{position:absolute;inset:0}

.sc{
  position:absolute;inset:0;
  display:flex;align-items:center;
  padding:clamp(64px,9vh,120px) clamp(24px,6vw,90px);
  opacity:0;visibility:hidden;
  background:var(--bg);color:var(--fg);   /* opaque: the next layer wipes in, never blends */
  will-change:transform,opacity;
}
.sc.is-on{visibility:visible}
/* one left rail for every section, same edge as the nav and the start screen */
.sc__in{width:100%;max-width:1320px;margin:0}

/* staggered reveal, fired once per entry */
.sc .sc__in > *{opacity:0;transform:translate3d(0,20px,0)}
.sc.is-in .sc__in > *{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.sc.is-in .sc__in > *:nth-child(1){transition-delay:.02s}
.sc.is-in .sc__in > *:nth-child(2){transition-delay:.08s}
.sc.is-in .sc__in > *:nth-child(3){transition-delay:.14s}
.sc.is-in .sc__in > *:nth-child(4){transition-delay:.2s}
.sc.is-in .sc__in > *:nth-child(5){transition-delay:.26s}
.sc.is-in .sc__in > *:nth-child(6){transition-delay:.32s}

/* ---------- 3 · announce ----------
   The shift is drawn across the whole width, with the count set inside it.
   Previously this card held 38% of the height in a narrow centred stack. */
.sc--announce{text-align:center;justify-content:center}
.sc--announce .sc__in{max-width:none;margin:0;display:flex;flex-direction:column;align-items:center}
.announce__span{
  margin-top:clamp(16px,2.2vw,38px);width:100%;display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);
  font-family:var(--disp);color:var(--cyan);font-variant-numeric:tabular-nums;
}
.announce__span b{font-weight:400;font-size:clamp(30px,4.6vw,86px);line-height:.9;letter-spacing:.02em}
.announce__span em{font-style:normal;font-size:.42em;margin-left:.12em;vertical-align:.2em;opacity:.75;text-transform:uppercase}
.announce__span i{
  flex:1;height:1px;background:currentColor;opacity:.42;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.4s cubic-bezier(.5,.02,.25,1) .85s;
}
/* the shift draws itself in after the heading has wiped through */
.sc--announce.is-in .announce__span i{transform:scaleX(1)}
.announce__span b{opacity:0}
.sc--announce.is-in .announce__span b{animation:rise .85s var(--ease) forwards}
.sc--announce.is-in .announce__span b:first-child{animation-delay:.7s}
.sc--announce.is-in .announce__span b:last-child{animation-delay:1.5s}
.sc--announce.is-in .sc__in > .body{transition-delay:1.85s}
.sc--announce.is-in .sc__in > .drop{transition-delay:2.15s}

.sc--announce .body{margin-top:clamp(16px,2vw,28px);text-align:center;max-width:44ch}

/* no arrowhead: a cyan segment falling down a hairline, in the same language
   as the rules and tick marks elsewhere */
.drop{
  position:relative;display:block;overflow:hidden;
  width:1px;height:clamp(46px,6.4vh,68px);
  margin-top:clamp(24px,3.2vw,44px);background:var(--line);
}
.drop i{
  position:absolute;left:0;top:0;width:100%;height:34%;background:var(--cyan);
  animation:dropRun 2.4s cubic-bezier(.55,.05,.3,1) infinite;
}
@keyframes dropRun{
  0%{transform:translateY(-110%)}
  62%,100%{transform:translateY(300%)}
}

/* ---------- 5 · the day ---------- */
.sc--day{padding:0;display:block}
.day__video{position:absolute;inset:0;background:var(--ink)}
.day__video video{width:100%;height:100%;object-fit:cover}
.day__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(14,15,18,.9) 0%,rgba(14,15,18,.45) 32%,rgba(14,15,18,0) 62%),
    linear-gradient(to bottom,rgba(14,15,18,.6) 0%,rgba(14,15,18,0) 20%),
    linear-gradient(to right,rgba(14,15,18,.55) 0%,rgba(14,15,18,0) 48%);
}
.day__hud{position:absolute;inset:0;pointer-events:none}
.day__clock{
  position:absolute;top:clamp(74px,11vh,116px);left:clamp(24px,6vw,90px);
  font-family:var(--disp);font-size:clamp(46px,7.4vw,104px);line-height:.9;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  text-shadow:0 2px 40px rgba(14,15,18,.6);
}
.day__clock em{
  font-style:normal;font-size:.38em;margin-left:.14em;
  vertical-align:.16em;opacity:.8;letter-spacing:.04em;
}
/* the rail sits on the caption's baseline, bottom right, so the clock, the
   caption and the rail form one diagonal instead of three floating islands */
.day__rail{
  position:absolute;right:clamp(24px,6vw,90px);bottom:clamp(52px,9vh,92px);
  list-style:none;display:flex;flex-direction:row;align-items:flex-end;
  gap:clamp(10px,1.1vw,18px);
}
.day__rail li{
  display:flex;flex-direction:column-reverse;align-items:center;gap:9px;
  font-family:var(--disp);font-size:clamp(15px,1.5vw,20px);letter-spacing:.1em;
  color:rgba(241,241,236,.52);
  text-shadow:0 1px 14px rgba(14,15,18,.75);
  transition:color .5s var(--ease),opacity .5s var(--ease);
}
.day__rail li i{display:block;width:clamp(16px,1.8vw,26px);height:2px;background:currentColor;transition:width .5s var(--ease),height .5s var(--ease)}
.day__rail li b{font-weight:400;font-variant-numeric:tabular-nums}
.day__rail li.on{color:var(--cyan);font-size:clamp(20px,2.1vw,30px)}
.day__rail li.on i{width:clamp(30px,3.4vw,50px);height:3px}

.day__captions{position:absolute;left:clamp(24px,6vw,90px);bottom:clamp(44px,8vh,86px);width:min(48ch,74vw)}
.cap{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translate3d(0,16px,0);pointer-events:none;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.cap.on{opacity:1;transform:none}
.cap__h{
  font-size:clamp(24px,3.3vw,44px);font-weight:700;
  text-transform:uppercase;letter-spacing:-.004em;line-height:1.04;
}
.cap__b{margin-top:14px;font-size:clamp(14px,1.28vw,19px);line-height:1.45;color:rgba(241,241,236,.8);max-width:42ch}

/* ---------- 4 · the shed ---------- */
.shed__h{margin-top:0}

/* ---------- 8 · comparison ---------- */
/* ============================================================
   One of ninety.
   Ninety marks across the page, one per day of a shed permit.
   The first is the lift. The ratio is drawn, not described.
   ============================================================ */
.sc--shed .sc__in{max-width:none}

.ratio{margin-top:clamp(32px,4.2vw,58px)}
.ratio__ends{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.ratio__end{display:flex;flex-direction:column;align-items:flex-start}
.ratio__end:last-child{align-items:flex-end;text-align:right}
.ratio__end b{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(46px,6.6vw,112px);line-height:.78;
  color:var(--mute);font-variant-numeric:tabular-nums;
}
.ratio__end span{
  margin-top:.85em;font-size:clamp(9px,.86vw,11px);
  letter-spacing:.22em;text-transform:uppercase;color:var(--mute);opacity:.62;
}
.ratio__end--own b{color:var(--fg)}
.ratio__end--own span{color:var(--fg);opacity:.85}

.ratio__field{
  margin-top:clamp(16px,2vw,26px);
  display:flex;justify-content:space-between;align-items:flex-end;
  height:clamp(76px,11.5vh,132px);
}
.ratio__field i{
  display:block;width:2px;height:44%;background:var(--ghost);
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .55s cubic-bezier(.5,.02,.25,1);
  transition-delay:calc(var(--i) * 9ms);
}
.sc--shed.is-in .ratio__field i{transform:scaleY(1)}
/* every thirtieth day, plus the last, reads as an axis mark */
.ratio__field i:nth-child(30n+1),.ratio__field i:last-child{height:68%}
.ratio__field i.on{
  width:6px;height:100%;background:var(--fg);
}
/* diagonal: heavy heading upper left, light text lower right */
.ratio__note{margin-top:clamp(20px,2.4vw,32px);margin-left:auto;text-align:right;max-width:42ch}

/* ---------- 5 · case rack ----------
   Three columns hold the screen the whole time. Scrolling opens one at a
   time: the widths are flex-grow weights driven from the same scalar, so the
   opening is continuous rather than a snap between states. */
.sc--rack .sc__in{max-width:none}
.sc--rack .body{margin-top:clamp(10px,1.2vw,18px)}
.rack{
  display:flex;gap:clamp(8px,.9vw,14px);
  margin-top:clamp(24px,3.2vw,44px);
  height:clamp(300px,56vh,620px);
}
.rack__item{
  position:relative;flex:0 1 0;min-width:0;overflow:hidden;background:#141519;
  /* Deliberately no transition on flex-grow. JS writes it every frame, so a
     transition restarts toward a new target on each write and fights the
     scroll smoothing: the result stutters. The easing already lives in the
     smoothed scroll scalar, which is the only place it should live. */
}
.rack__item img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);
}
.rack__item::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(14,15,18,.92) 0%,rgba(14,15,18,.35) 34%,rgba(14,15,18,0) 62%),
             linear-gradient(to bottom,rgba(14,15,18,.6) 0%,rgba(14,15,18,0) 26%);
}
.rack__no{
  position:absolute;top:.34em;left:.5em;z-index:2;
  font-family:var(--disp);font-size:clamp(26px,2.6vw,42px);line-height:1;
  color:var(--cyan);text-shadow:0 2px 20px rgba(14,15,18,.8);
}
/* A narrow column cannot carry a wrapped horizontal title: it stranded the
   text mid panel with dead space under it. Collapsed columns get a vertical
   label instead, and the two states cross fade. */
.rack__vlabel{
  position:absolute;z-index:2;
  left:clamp(13px,1.3vw,20px);bottom:clamp(16px,1.7vw,26px);
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:clamp(11px,.95vw,14px);font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;
  text-shadow:0 2px 18px rgba(14,15,18,.85);
}
.rack__txt{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(16px,1.7vw,26px);
}
/* the heading grows with the column, so an open panel is not carrying
   fourteen point type across twelve hundred pixels of photograph */
.rack__txt h3{
  font-size:calc(clamp(12px,1.05vw,15px) + var(--e,0) * clamp(7px,1.6vw,25px));
  font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.1;
  max-width:26ch;
  /* same wipe as every other heading, but fired on opening rather than on
     section entry, so the gradient is set up here instead of via .sweep */
  background-image:linear-gradient(90deg,
    var(--fg) 0%, var(--fg) 40%,
    var(--accent) 44%, var(--accent) 46%,
    rgba(241,241,236,.22) 50%, rgba(241,241,236,.22) 100%);
  background-size:300% 100%;background-position:100% 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  width:fit-content;
}
.rack__item.is-open .rack__txt h3{
  animation:sweep 1.15s cubic-bezier(.5,.02,.25,1) forwards;
}
/* the sentence belongs to the open column only, so it fades with the width */
.rack__txt p{
  margin-top:10px;max-width:44ch;
  font-size:clamp(12px,1.02vw,15px);line-height:1.45;color:rgba(241,241,236,.76);
}
.rack__cta{
  display:inline-flex;align-items:center;gap:.7em;margin-top:16px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--cyan);white-space:nowrap;
}
.rack__cta::after{
  content:'';width:20px;height:1px;background:currentColor;
  transition:width .35s var(--ease);
}

@media(hover:hover){
  .rack__item{cursor:pointer}
  .rack__item img{transition:transform .8s var(--ease)}
  .rack__item::after{transition:opacity .5s var(--ease)}
  .rack__item.is-hot img{transform:scale(1.1)}
  .rack__item.is-hot::after{opacity:.68}
  .rack__cta:hover::after{width:34px}
}
.rack__item:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---------- 6 · numbers, yellow on blue ----------
   The numbers are the content, so they get the whole canvas. The heading and
   its one line sit as a diagonal above them, and the credentials go quiet at
   the bottom instead of shouting louder than the figures. */
/* ---------- 6 · the fleet ----------
   Layered: the wordmark sits behind the machine, the machine on the plate,
   the figures in front along the foot. */
.sc--nums{padding-bottom:clamp(26px,4vh,48px)}
.sc--nums .sc__in{max-width:none}
.fleet{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:0}

.fleet__h{
  position:absolute;left:0;top:0;z-index:1;margin:0;
  font-size:min(11.2vw, 19.2vh, 200px);line-height:.8;opacity:.9;
}
.fleet__truck{
  position:relative;z-index:2;align-self:center;
  /* sized by the height that is actually free, not by window width: on a
     short laptop screen a width-driven machine grew into the heading */
  width:min(60vw, 60vh * 1.497, 1040px);height:auto;
  /* the image already carries its contact shadow, and its lower edge lands
     exactly on the rule below. No CSS drop shadow: that spilled past the rule
     by up to sixty pixels. */
  margin-bottom:0;
  opacity:0;transform:translate3d(0,24px,0) scale(.986);
}
.sc--nums.is-in .fleet__truck{
  opacity:1;transform:none;
  transition:opacity 1.1s var(--ease) .1s,transform 1.5s var(--ease) .1s;
}
.fleet__note{
  position:absolute;right:0;top:clamp(6px,1.4vw,26px);z-index:3;
  max-width:30ch;text-align:right;
  font-size:clamp(12px,1.02vw,16px);line-height:1.5;color:rgba(241,241,236,.74);
}
.fleet__specs{
  position:relative;z-index:3;list-style:none;
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(10px,1.4vw,26px);
  padding-top:clamp(14px,1.8vw,26px);
  border-top:1px solid rgba(255,209,0,.32);
}
.fleet__specs li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.14em;
  opacity:0;transform:translate3d(0,14px,0);
}
/* the figures arrive after the machine has landed, one after another */
.sc--nums.is-in .fleet__specs li{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .8s var(--ease);
}
.sc--nums.is-in .fleet__specs li:nth-child(1){transition-delay:.62s}
.sc--nums.is-in .fleet__specs li:nth-child(2){transition-delay:.71s}
.sc--nums.is-in .fleet__specs li:nth-child(3){transition-delay:.80s}
.sc--nums.is-in .fleet__specs li:nth-child(4){transition-delay:.89s}
.sc--nums.is-in .fleet__specs li:nth-child(5){transition-delay:.98s}
.sc--nums.is-in .fleet__specs li:nth-child(6){transition-delay:1.07s}
.fleet__specs b{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(32px,4.2vw,80px);line-height:.8;
  color:var(--yellow);font-variant-numeric:tabular-nums;
}
.fleet__specs em{font-style:normal;font-size:clamp(10px,1vw,16px);color:var(--yellow);opacity:.75}
.fleet__specs span{
  flex:1 0 100%;margin-top:clamp(5px,.7vw,10px);
  font-size:clamp(8.5px,.76vw,10.5px);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(241,241,236,.66);
}

@media (max-width:1024px){
  .fleet__h{position:static;opacity:1}
  .fleet__note{position:static;text-align:left;max-width:40ch;margin-top:12px}
  .fleet__truck{width:min(94vw,700px);margin:clamp(10px,2vh,20px) auto -14px}
  .fleet__specs{grid-template-columns:repeat(3,1fr);gap:16px 12px}
}

/* ---------- 7 · what comes with it ----------
   One claim per screen. Six at once became a table of small grey text and the
   meanings did not land; at this size each one is an event. */
.sc--why{padding:0;display:block;overflow:hidden}
/* A strip pulled sideways by the vertical scroll: the heading leaves through
   the left edge as the next claim arrives. The numeral lives in the rail only,
   so it is not said twice, and the sentence sits with its heading. */
.why__track{position:absolute;top:0;left:0;height:100%;display:flex;will-change:transform}
.why__one{
  position:relative;flex:0 0 100vw;height:100%;
  padding:clamp(64px,9vh,120px) clamp(24px,6vw,90px);
}
/* the panel runs the full height of the screen and stops on the right rail:
   as a column of image it holds the composition, as a floating rectangle in
   the middle of empty space it did not */
.why__ph{
  position:absolute;top:0;bottom:0;right:0;
  width:min(78vh, 40vw, 720px);
  display:block;overflow:hidden;background:#d9d9d3;
}
.why__ph img{width:100%;height:100%;object-fit:cover}
/* the phone sits over this panel, and the photo can be light up there */
.why__ph::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,15,18,.5) 0%,rgba(14,15,18,0) 16%);
}

.why__txt{
  position:relative;z-index:2;min-width:0;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding-right:clamp(20px,3vw,56px);
}
.why__one h3{
  max-width:15ch;
  font-family:var(--disp);
  /* 700 like every other display heading: Bebas has one weight, so the browser
     bolds it synthetically. At 400 this one rendered visibly thinner. */
  font-weight:700;
  font-size:min(7.4vw, 18vh, 140px);line-height:.86;
  text-transform:uppercase;letter-spacing:.006em;
  background-image:linear-gradient(90deg,
    var(--fg) 0%, var(--fg) 40%,
    var(--accent) 44%, var(--accent) 46%,
    var(--ghost) 50%, var(--ghost) 100%);
  background-size:300% 100%;background-position:100% 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.why__one.on h3{animation:sweep 1.5s cubic-bezier(.5,.02,.25,1) forwards}
.why__one p{
  margin-top:clamp(16px,2vw,30px);max-width:32ch;
  font-size:clamp(15px,1.36vw,23px);line-height:1.42;color:var(--mute);
  transition:opacity .5s var(--ease) .12s;
}
.why__one:not(.on) p{opacity:.25}

.why__hud{position:absolute;inset:0;pointer-events:none;z-index:2}
.why__rail{
  /* left, under the text: the right side belongs to the photograph now */
  position:absolute;left:clamp(24px,6vw,90px);bottom:clamp(46px,8vh,84px);
  list-style:none;display:flex;flex-direction:row;align-items:flex-end;
  gap:clamp(10px,1.1vw,18px);
}
.why__rail li{
  display:flex;flex-direction:column-reverse;align-items:center;gap:9px;
  font-family:var(--disp);font-size:clamp(15px,1.5vw,20px);letter-spacing:.1em;
  color:rgba(22,23,27,.42);transition:color .5s var(--ease),font-size .5s var(--ease);
}
.why__rail li i{display:block;width:clamp(16px,1.8vw,26px);height:2px;background:currentColor;transition:width .5s var(--ease),height .5s var(--ease)}
.why__rail li b{font-weight:400;font-variant-numeric:tabular-nums}
.why__rail li.on{color:var(--cyan);font-size:clamp(20px,2.1vw,30px)}
.why__rail li.on i{width:clamp(30px,3.4vw,50px);height:3px}

/* ---------- 8 · the close ----------
   The statement, the contact and the form on one screen over the last frame
   of the day: one call to action instead of two in a row. */
.sc--close{--bg:#12336f;overflow:hidden}
.close__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;opacity:0;transform:scale(1.05);
}
.sc--close.is-in .close__bg{
  opacity:1;
  transition:opacity 1.4s var(--ease);
  /* a slow continuous drift so the closing frame is not a dead still.
     transform only, so it costs nothing and never reflows the layout. */
  animation:closeDrift 30s ease-in-out infinite alternate;
}
@keyframes closeDrift{
  from{transform:scale(1.06) translate3d(.8%,.6%,0)}
  to{transform:scale(1.15) translate3d(-1.6%,-1.4%,0)}
}
.close__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(15,44,104,.94) 0%,rgba(15,44,104,.88) 44%,rgba(15,44,104,.84) 100%),
    linear-gradient(to top,rgba(15,44,104,.7) 0%,rgba(15,44,104,.3) 46%,rgba(15,44,104,.46) 100%);
}
.sc--close .sc__in{
  position:relative;z-index:2;max-width:none;
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(30px,5vw,92px);align-items:center;
}
.close__say{min-width:0}
/* sized so the widest heading line matches the phone and the address:
   the block reads as one measure instead of a rag */
.close__say .h2{font-size:clamp(48px,7.3vw,127px);line-height:.86}
.close__slog{
  display:flex;align-items:center;gap:.9em;flex-wrap:wrap;
  margin-top:clamp(18px,2.2vw,30px);
  font-size:clamp(9.5px,.84vw,11.5px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);font-weight:700;
}
.close__slog i{display:block;width:26px;height:1px;background:currentColor;opacity:.55}
.close__tel{
  display:block;margin-top:clamp(18px,2.4vw,34px);
  font-family:var(--disp);font-size:clamp(40px,5.4vw,92px);
  letter-spacing:.02em;line-height:.9;
}
.close__area{
  margin-top:clamp(10px,1.2vw,16px);
  font-size:clamp(11px,.94vw,13px);line-height:1.55;color:var(--mute);
  white-space:nowrap;   /* it is one line, not two */
}

.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px)}
.form label{display:block}
.form__wide{grid-column:1/-1}
.form span{
  display:block;font-size:clamp(9px,.8vw,11px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin-bottom:9px;font-weight:700;
}
.form input,.form textarea{
  width:100%;background:transparent;border:0;border-bottom:2px solid rgba(241,241,236,.38);
  padding:clamp(9px,1.1vw,15px) 0;font-size:clamp(15px,1.15vw,18px);
  resize:none;border-radius:0;color:var(--fg);
  transition:border-color .4s var(--ease);
}
.form input:focus,.form textarea:focus{outline:0;border-bottom-color:var(--cyan)}
.form .btn{grid-column:1/-1;justify-self:start;margin-top:clamp(4px,.8vw,12px)}
.form__msg{grid-column:1/-1;font-size:12px;color:var(--yellow);min-height:1em}

@media (max-width:1024px){
  .why{grid-template-columns:repeat(2,1fr);gap:20px 18px}
  .sc--close .sc__in{grid-template-columns:1fr;gap:26px}
  .close__area{white-space:normal;max-width:38ch}
  .why__ph{position:static;width:min(84vw,460px);height:auto;aspect-ratio:4/5;margin-top:18px}
  .why__txt{height:auto;display:block;padding-right:0}
  .form{grid-template-columns:1fr}
}

/* ---------- scroll hint ---------- */
.hint{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,0);
  /* above the start screen (80), below the loader (90), or the cue is buried */
  z-index:85;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(241,241,236,.42);opacity:0;
  transition:opacity .6s var(--ease),color .5s var(--ease);pointer-events:none;
}
body.is-live .hint{opacity:1}
body.is-live:not(.has-moved) .hint{animation:hintNudge 2.6s var(--ease) infinite}
body.is-live.has-moved .hint{opacity:0}
@keyframes hintNudge{
  0%,100%{transform:translate(-50%,0);opacity:.5}
  50%{transform:translate(-50%,5px);opacity:1}
}
body.on-light .hint{color:rgba(22,23,27,.45)}
body.on-light .progress{background:rgba(22,23,27,.14)}
body.on-light .progress i{background:#16171B}   /* cyan on cyan would vanish */

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:1024px){
  .sc--form .sc__in{grid-template-columns:1fr;gap:32px}
  .sc--nums .sc__in{grid-template-columns:1fr;gap:clamp(20px,3vh,34px)}
}
/* ============================================================
   phones. Every effect is kept, but the two horizontal strips turn
   vertical: on a tall narrow screen sideways travel reads as broken.
   ============================================================ */
@media (max-width:760px){
  .sc{padding:clamp(76px,13vh,104px) 20px clamp(46px,8vh,70px)}

  /* nav */
  .nav{padding:14px 20px}
  .nav__mark{width:104px}
  .nav__tel{font-size:12px;letter-spacing:.06em}

  /* loader */
  .loadingScreen__logo{width:min(62vw,260px)}
  .loadingScreen__pct{font-size:15px}

  /* start screen */
  .startScreen{
    grid-template-columns:1fr;align-content:center;row-gap:clamp(22px,4vh,36px);
    padding:clamp(76px,13vh,104px) 20px clamp(26px,5vh,44px);
  }
  .startScreen__head,.startScreen__lede{grid-column:1}
  /* the sentence belongs under the statement, not under the button */
  .startScreen__head{display:contents}
  .startScreen__h1{order:1;font-size:min(15.4vw, 12.6vh, 96px)}
  .startScreen__lede{order:2}
  .startScreen .btn{order:3;justify-self:start}
  .startScreen__lede{text-align:left;justify-self:start;max-width:32ch;padding-bottom:0;font-size:15px}
  .startScreen .btn{margin-top:22px;padding:.95em 1.7em;font-size:11px}

  /* announce */
  .announce__span{gap:12px}
  .announce__span b{font-size:clamp(24px,7.4vw,34px)}
  .sc--announce .body{font-size:15px}

  /* the day: the film keeps scrubbing, the HUD just gets out of its way */
  .day__clock{left:20px;top:72px;font-size:clamp(38px,13vw,56px)}
  .day__captions{left:20px;right:20px;width:auto;bottom:clamp(74px,13vh,104px)}
  .cap__h{font-size:clamp(22px,6.6vw,30px)}
  .cap__b{font-size:14px;max-width:none}
  .day__rail{left:20px;right:auto;bottom:clamp(30px,5vh,46px);gap:8px}
  .day__rail li{font-size:13px}
  .day__rail li.on{font-size:17px}
  .day__rail li i{width:12px}
  .day__rail li.on i{width:22px}

  /* the shed: ninety marks stay, thinner so they still read as ninety */
  .shed__h{font-size:min(13.4vw, 11vh, 74px)}
  .ratio__ends{gap:14px}
  .ratio__end b{font-size:clamp(38px,12vw,58px)}
  .ratio__field{height:clamp(54px,9vh,84px)}
  .ratio__field i{width:1px}
  .ratio__field i.on{width:3px}
  .ratio__note{margin-left:0;text-align:left;max-width:none;font-size:14px}

  /* case rack: the accordion turns on its side, rows instead of columns */
  .rack{flex-direction:column;height:clamp(340px,62vh,560px);gap:8px}
  .rack__item{flex:0 1 0}
  .rack__vlabel{
    writing-mode:horizontal-tb;transform:none;
    left:16px;bottom:14px;right:16px;font-size:12px;white-space:normal;
  }
  .rack__txt{height:auto;padding:16px}
  .rack__txt h3{font-size:calc(14px + var(--e,0) * 12px);max-width:24ch}
  .rack__txt p{font-size:13px;margin-top:8px;max-width:40ch}
  .rack__cta{margin-top:12px;font-size:10px}

  /* the fleet */
  .fleet__h{position:static;font-size:min(15vw,11vh,84px);opacity:1}
  .fleet__note{position:static;text-align:left;max-width:none;margin-top:10px;font-size:14px}
  .fleet{min-height:0}
  .fleet__truck{width:min(96vw,560px);margin:clamp(10px,2vh,20px) auto -6px}
  .fleet__specs{grid-template-columns:repeat(3,1fr);gap:14px 10px;padding-top:14px}
  .fleet__specs b{font-size:clamp(26px,8.4vw,40px)}
  .fleet__specs em{font-size:11px}
  .fleet__specs span{font-size:8px;letter-spacing:.14em;margin-top:5px}

  /* what comes with it: the strip runs down instead of across */
  .why__track{flex-direction:column;width:100%;height:auto}
  .why__one{
    flex:0 0 auto;height:100vh;height:100dvh;width:100%;
    padding:clamp(76px,13vh,104px) 20px clamp(58px,10vh,84px);
  }
  .why__ph{
    position:absolute;left:0;right:0;top:auto;bottom:0;
    width:auto;height:42vh;height:42dvh;
    aspect-ratio:auto;   /* the tablet rule set 4/5 and it stopped stretching */
    margin:0;
  }
  .why__ph::after{background:linear-gradient(to top,rgba(14,15,18,.34) 0%,rgba(14,15,18,0) 34%)}
  .why__txt{height:auto;display:block;padding-right:0;padding-bottom:calc(42vh + 44px)}
  .why__one h3{font-size:min(12.6vw, 10vh, 66px);max-width:14ch}
  .why__one p{font-size:15px;max-width:34ch;margin-top:14px}
  .why__rail{left:20px;bottom:calc(42vh + 14px);gap:8px}
  .why__rail li{font-size:13px}
  .why__rail li.on{font-size:17px}
  .why__rail li i{width:12px}
  .why__rail li.on i{width:22px}

  /* the close */
  /* the close carries a statement, a phone and six fields. Everything is
     trimmed so the centred block still clears the fixed nav on an 800px phone. */
  .sc--close .sc__in{grid-template-columns:1fr;gap:18px;align-content:center}
  .close__say .h2{font-size:min(12vw, 9.4vh, 64px)}
  .close__slog{gap:.55em;font-size:8.5px;margin-top:10px}
  .close__tel{font-size:min(11vw,46px);margin-top:10px}
  .close__area{white-space:normal;max-width:34ch;margin-top:6px;font-size:12px}
  .form{grid-template-columns:1fr;gap:9px}
  .form input,.form textarea{font-size:16px;padding:6px 0}  /* 16px stops iOS zooming on focus */
  .form span{margin-bottom:4px;font-size:8.5px}
  .form textarea{rows:1}
  .form .btn{margin-top:2px;padding:.9em 1.6em}

  .hint{bottom:14px;font-size:9px}
}

/* very small phones */
@media (max-width:400px){
  .fleet__specs{grid-template-columns:repeat(2,1fr)}
  .startScreen__h1{font-size:min(16vw,88px)}
  .rack__txt p{display:none}
}

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .sc .sc__in > *{opacity:1;transform:none}
  .ratio__field i{transform:scaleY(1)}
  .sweep{background-position:0 0}
  .startScreen .supra,.startScreen__lede,.startScreen__foot,.startScreen .btn{opacity:1}
}