/* ═══════════════════════════════════════════════════════════
   HILBERT STUDIO
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────── FONTS ───────────────────────── */
@font-face{
  font-family:'Overused Grotesk';
  src:url('assets/fonts/OverusedGroteskRoman-VF.woff2') format('woff2');
  font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('assets/fonts/IBMPlexMono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('assets/fonts/IBMPlexMono-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

/* ───────────────────────── TOKENS ───────────────────────── */
:root{
  --bg:#ffffff;
  --ink:#1d1d1d;
  --muted:#626262;
  --faint:#bebebe;
  --label:#494949;
  --soft:#f4f4f4;
  --line:rgba(29,29,29,.10);
  --inv-line:rgba(255,255,255,.14);

  --w:960px;
  --pad:24px;
  /* set from JS so 50vw maths ignores the scrollbar */
  --sbw:0px;
  --bleed:calc(50% - 50vw + var(--sbw) / 2);
  --bleed-pad:calc(50vw - var(--sbw) / 2 - 50%);

  --sans:'Overused Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xl:clamp(34px, 6.4vw, 74px);
  --fs-h2:clamp(26px, 4.4vw, 48px);
  --fs-h3:clamp(18px, 1.7vw, 24px);
  --fs-body:clamp(13px, 1.05vw, 14px);
  --fs-lede:clamp(15px, 1.5vw, 20px);
  --fs-mono:10px;

  --e:cubic-bezier(.44,0,.56,1);
  --e-out:cubic-bezier(.16,1,.3,1);
}

/* ───────────────────────── RESET ───────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:72px; /* clears the always-on fixed header */
}
body{
  margin:0; background:var(--ink); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body); font-weight:400;
  line-height:1.5; letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  /* contains the full-bleed sections; `clip` (unlike `hidden`) does not create a
     scroll container, so position:sticky keeps working underneath it */
  overflow-x:hidden;
  overflow-x:clip;
}
img,svg,video{display:block; max-width:100%}
h1,h2,h3,p,figure,ul,li,figcaption{margin:0; padding:0}
ul{list-style:none}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
::selection{background:var(--ink); color:#fff}

.skip{
  position:fixed; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; font-size:12px;
}
.skip:focus{left:0}

/* ───────────────────────── TYPE PRIMITIVES ───────────────────────── */
.mono{
  font-family:var(--mono); font-size:var(--fs-mono); font-weight:400;
  letter-spacing:-.02em; line-height:16px; text-transform:uppercase;
  color:var(--label);
}
.mono--dim{color:rgba(29,29,29,.48)}
.label{color:var(--label)}
.label--inv{color:rgba(255,255,255,.52)}

.display{
  font-family:var(--sans); font-weight:400;
  font-size:var(--fs-h2); line-height:1.14; letter-spacing:-.028em;
  text-transform:uppercase; color:var(--ink);
}
.display--xl{font-size:var(--fs-xl); line-height:1.06; letter-spacing:-.035em}

/* ───────────────────────── LAYOUT ───────────────────────── */
.page{position:relative; z-index:1; background:var(--bg)}
.main{max-width:var(--w); margin:0 auto; padding:0 var(--pad)}

.sec{padding:clamp(72px,10vw,128px) 0}
.sec--soft{
  background:var(--soft);
  margin:0 var(--bleed); padding-left:var(--bleed-pad); padding-right:var(--bleed-pad);
}
.sec--soft > *{max-width:var(--w); margin-inline:auto}

.secHead{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center; margin-bottom:clamp(40px,5vw,64px);
}

/* ───────────────────────── BUTTON ───────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink); color:#fff; border-radius:0;
  padding:13px 26px; font-size:14px; font-weight:500; letter-spacing:-.04em;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .35s var(--e);
}
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--muted);
  transform:translateY(101%); transition:transform .5s var(--e-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn--sm{padding:9px 18px; font-size:12px}

/* ───────────────────────── NAV ───────────────────────── */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .45s var(--e), border-color .4s var(--e);
}
.nav.is-scrolled{border-bottom-color:var(--line)}

/* over the dark manifesto panel the bar flips, so a translucent white strip
   never sits on top of a black section */
/* .nav.nav--inv, not .nav--inv — it has to outrank .nav.is-scrolled on the border */
.nav.nav--inv{background:rgba(29,29,29,.72); border-bottom-color:var(--inv-line)}
.nav--inv .nav__logo img{filter:invert(1)}
.nav--inv .nav__links a{color:rgba(255,255,255,.62)}
.nav--inv .nav__links a:hover{color:#fff}
.nav--inv .btn{background:#fff; color:var(--ink)}
.nav--inv .btn::after{background:#e1e1df}

.nav__logo img,.nav__links a,.nav .btn{transition:color .4s var(--e), background .4s var(--e), filter .4s var(--e)}
.nav__in{
  max-width:var(--w); margin:0 auto; padding:0 var(--pad);
  height:56px; display:flex; align-items:center; gap:24px;
}
.nav__logo{display:flex; align-items:center; flex:0 0 auto}
.nav__logo img{height:19px; width:auto}
.nav__links{display:flex; gap:22px; margin-left:auto}
.nav__links a{
  font-size:12px; font-weight:500; letter-spacing:-.03em; color:var(--muted);
  transition:color .3s var(--e);
}
.nav__links a:hover{color:var(--ink)}

/* ───────────────────────── HERO ───────────────────────── */
.hero{
  min-height:clamp(460px,78vh,720px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:clamp(22px,3vw,34px);
  padding:120px 0 clamp(48px,6vw,72px);
}
.hero .display{max-width:14ch}
.hero__sub{
  font-size:var(--fs-lede); color:var(--muted); letter-spacing:-.025em;
  display:flex; align-items:baseline; gap:.4em; flex-wrap:wrap; justify-content:center;
}
.rotator{display:inline-flex; align-items:center; color:var(--ink); white-space:pre}
.rotator__caret{
  display:inline-block; width:1.5px; height:1em; background:var(--ink);
  margin-left:2px; border-radius:1px; transition:opacity .1s;
}
.rotator__caret.is-off{opacity:0}

/* ───────────────────────── REEL ───────────────────────── */
.reel{padding-bottom:clamp(56px,7vw,88px)}
.reel__frame{
  position:relative; aspect-ratio:16/9; background:var(--soft);
  overflow:hidden; border:1px solid var(--line);
}
.reel__video{width:100%; height:100%; object-fit:cover}
.reel__sound,.reel__expand{
  position:absolute; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:-.02em; color:var(--ink);
  background:rgba(255,255,255,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--e), transform .4s var(--e-out), background .3s var(--e);
}
.reel__sound{left:14px}
.reel__expand{right:14px}
.reel__frame:hover .reel__sound,.reel__frame:hover .reel__expand,
.reel__sound:focus-visible,.reel__expand:focus-visible{opacity:1; transform:translateY(0)}
.reel__sound:hover,.reel__expand:hover{background:#fff}
.reel__soundIcon{display:flex; align-items:center; gap:1.5px; height:10px}
.reel__soundIcon i{width:1.5px; background:var(--ink); height:3px; transition:height .2s var(--e)}
.reel__sound[aria-pressed="true"] .reel__soundIcon i{animation:eq .9s var(--e) infinite alternate}
.reel__soundIcon i:nth-child(1){animation-delay:0s}
.reel__soundIcon i:nth-child(2){animation-delay:.12s}
.reel__soundIcon i:nth-child(3){animation-delay:.24s}
.reel__soundIcon i:nth-child(4){animation-delay:.36s}
.reel__soundIcon i:nth-child(5){animation-delay:.48s}
@keyframes eq{from{height:2px} to{height:10px}}

.reel__meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding-top:12px; flex-wrap:wrap;
}

/* ───────────────────────── TICKER ───────────────────────── */
.ticker{
  margin:0 var(--bleed); padding:clamp(28px,4vw,44px) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px; overflow:hidden;
}
.ticker__row{overflow:hidden}
.ticker__track{display:flex; gap:10px; width:max-content; will-change:transform}
.chip{
  display:inline-flex; align-items:baseline; gap:10px; white-space:nowrap;
  border:1px solid var(--line); padding:9px 16px; background:var(--bg);
}
.chip b{
  font-size:12px; font-weight:500; letter-spacing:-.04em;
  text-transform:uppercase; color:var(--ink);
}
.chip i{
  font-style:normal; font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:-.02em; color:var(--faint);
}

/* ───────────────────────── WORK ───────────────────────── */
.work{display:flex; flex-direction:column; gap:0}
.work__stage{
  position:relative; aspect-ratio:16/9; background:var(--soft);
  border:1px solid var(--line); overflow:hidden;
}
.work__slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity .55s var(--e); pointer-events:none;
}
.work__slide.is-on{opacity:1}
.work__slide video{width:100%; height:100%; object-fit:cover}
.work__play{
  position:absolute; right:14px; bottom:14px; z-index:2;
  padding:8px 14px; font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:-.02em; background:rgba(255,255,255,.86); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--e), transform .4s var(--e-out), background .3s var(--e);
}
.work__stage:hover .work__play,.work__play:focus-visible{opacity:1; transform:translateY(0)}
.work__play:hover{background:#fff}

.work__list{border-top:1px solid var(--line); margin-top:0}
.work__row{
  display:grid; grid-template-columns:44px 1fr auto 56px; align-items:center; gap:16px;
  padding:20px 8px; border-bottom:1px solid var(--line);
  cursor:pointer; position:relative; isolation:isolate;
  transition:padding-left .45s var(--e-out);
}
.work__row::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--soft);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--e-out);
}
.work__row.is-on::before,.work__row:hover::before,.work__row:focus-visible::before{transform:scaleY(1)}
.work__row.is-on,.work__row:hover,.work__row:focus-visible{padding-left:20px; outline:none}
.work__i{color:var(--faint); transition:color .3s var(--e)}
.work__row.is-on .work__i{color:var(--label)}
.work__t{
  font-size:clamp(15px,1.7vw,20px); font-weight:500; letter-spacing:-.04em;
  text-transform:uppercase; color:var(--muted); transition:color .3s var(--e);
}
.work__row.is-on .work__t,.work__row:hover .work__t{color:var(--ink)}
.work__k{color:var(--faint); transition:color .3s var(--e)}
.work__row.is-on .work__k{color:var(--label)}
.work__d{text-align:right; color:var(--faint)}
.work__row.is-on .work__d{color:var(--label)}

/* ───────────────────────── PINNED APPROACH ───────────────────────── */
.pin{margin:0 var(--bleed)}
.pin__panel{
  position:sticky; top:0; height:100svh; min-height:520px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); border-top:1px solid var(--line);
  overflow:hidden;
}
.pin__panel--ink{background:var(--ink); color:#fff; border-top-color:transparent}
.pin__panel--ink .display{color:#fff}
.pin__in{
  position:relative; z-index:1;
  width:100%; max-width:var(--w); margin:0 auto; padding:0 var(--pad);
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.pin__in .display{max-width:16ch}
.pin__lede{font-size:var(--fs-lede); color:var(--muted); letter-spacing:-.025em; max-width:40ch}
.pin__lede--inv{color:rgba(255,255,255,.62)}

/* The bubbles are anchored to the panel, not to the text block, and are placed with
   left/right/top — percentages in `transform: translate()` resolve against the element's
   OWN box, which stacked all six on top of the heading. */
.bubbles{position:absolute; inset:0; z-index:0; pointer-events:none}
.bubble{
  position:absolute; top:var(--t); left:var(--gut);
  --gut:clamp(16px,3.4vw,72px);
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  background:var(--bg); border:1px solid var(--line); padding:10px 14px;
  width:min(244px,22vw); text-align:left;
  opacity:0; transform:translateY(26px) scale(.96);
  transition:opacity .7s var(--e-out), transform .9s var(--e-out);
  transition-delay:calc(var(--d) * 70ms);
}
.bubble--r{left:auto; right:var(--gut)}
.is-shown .bubble{opacity:1; transform:none}
.bubble em{
  font-style:normal; font-family:var(--mono); font-size:9px; text-transform:uppercase;
  letter-spacing:-.02em; color:rgba(29,29,29,.42);
}
.bubble span{font-size:11px; font-weight:500; letter-spacing:-.025em; line-height:1.35; color:var(--ink)}

/* ───────────────────────── PROCESS RAIL ───────────────────────── */
.rail{margin:0 var(--bleed); position:relative}
.rail__stick{
  position:sticky; top:0; height:100svh; min-height:520px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; gap:32px;
}
.rail__track{
  display:flex; gap:16px;
  padding:0 max(var(--pad), calc(50vw - var(--sbw) / 2 - var(--w) / 2));
  /* must start flush left, not centred, or the first card begins off-screen */
  align-self:flex-start;
  will-change:transform;
}
.step{
  flex:0 0 auto; width:clamp(230px,26vw,282px); min-height:clamp(320px,44vh,420px);
  border:1px solid var(--line); background:var(--bg);
  padding:20px; display:flex; flex-direction:column; gap:10px;
}
.step__n{color:var(--faint)}
.step__t{
  font-size:var(--fs-h3); font-weight:500; letter-spacing:-.045em;
  text-transform:uppercase; line-height:1.15; margin-top:2px;
}
.step__b{color:var(--muted); letter-spacing:-.02em}
.step__l{margin-top:auto; display:flex; flex-direction:column; gap:5px; padding-top:20px}
.step__l li{color:var(--faint); border-top:1px solid var(--line); padding-top:5px}
.rail__bar{width:min(var(--w),calc(100vw - 48px)); height:1px; background:var(--line); position:relative}
.rail__bar span{
  position:absolute; left:0; top:0; height:100%; width:0; background:var(--ink);
  transition:width .1s linear;
}

/* ───────────────────────── FORMATS ───────────────────────── */
.fmt{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line)}
.fmt__c{
  background:var(--bg); padding:clamp(22px,2.6vw,32px);
  display:flex; flex-direction:column; gap:10px;
}
.fmt__n{color:var(--faint)}
.fmt__t{
  font-size:var(--fs-h3); font-weight:500; letter-spacing:-.045em;
  text-transform:uppercase; line-height:1.15;
}
.fmt__b{color:var(--muted); letter-spacing:-.02em; max-width:44ch}
.fmt__l{margin-top:auto; display:flex; flex-direction:column; gap:6px; padding-top:24px}
.fmt__l li{color:var(--faint); border-top:1px solid var(--line); padding-top:6px}

/* ───────────────────────── ACCORDION ───────────────────────── */
.acc{border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__h{margin:0; font:inherit; font-weight:400}
.acc__b{
  width:100%; display:grid; grid-template-columns:44px 1fr 20px; align-items:center; gap:16px;
  padding:24px 8px; text-align:left; transition:padding-left .45s var(--e-out), color .3s var(--e);
}
.acc__b:hover,.acc__b:focus-visible{padding-left:20px; outline:none}
.acc__n{color:var(--faint)}
.acc__t{
  font-size:clamp(14px,1.5vw,18px); font-weight:500; letter-spacing:-.045em;
  text-transform:uppercase; color:var(--muted); transition:color .3s var(--e);
}
.acc__b:hover .acc__t,.acc__b[aria-expanded="true"] .acc__t{color:var(--ink)}
.acc__x{position:relative; width:11px; height:11px; justify-self:end}
.acc__x::before,.acc__x::after{
  content:''; position:absolute; left:0; top:5px; width:11px; height:1px; background:var(--ink);
  transition:transform .45s var(--e-out);
}
.acc__x::after{transform:rotate(90deg)}
.acc__b[aria-expanded="true"] .acc__x::after{transform:rotate(0deg)}
.acc__p{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--e-out)}
.acc__i.is-open .acc__p{grid-template-rows:1fr}
.acc__c{overflow:hidden}
.acc__c p{
  padding:0 60px 28px; color:var(--muted); max-width:68ch;
  font-size:var(--fs-lede); letter-spacing:-.025em; line-height:1.5;
}

/* ───────────────────────── CTA ───────────────────────── */
.cta{
  display:flex; flex-direction:column; align-items:center; gap:clamp(24px,3vw,34px);
  text-align:center; padding:clamp(88px,12vw,160px) 0 clamp(96px,13vw,168px);
  border-top:1px solid var(--line);
}
.cta .display{max-width:16ch}

/* ───────────────────────── FOOTER ───────────────────────── */
.foot{background:var(--ink); color:#fff; position:relative; z-index:0}
.has-reveal .foot{position:fixed; left:0; bottom:0; width:100%}
.has-reveal .page{margin-bottom:var(--foot-h,0px)}
.foot__in{max-width:var(--w); margin:0 auto; padding:clamp(40px,6vw,64px) var(--pad) 24px}
.foot__top{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:start;
  padding-bottom:clamp(40px,5vw,64px);
}
.foot__logo{width:min(300px,100%); height:auto; filter:invert(1)}
.foot__right{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.foot__mail{
  font-size:clamp(18px,2.6vw,32px); font-weight:500; letter-spacing:-.045em; color:#fff;
  position:relative; padding-bottom:3px;
}
.foot__mail::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#fff;
  transform:scaleX(0); transform-origin:right; transition:transform .55s var(--e-out);
}
.foot__mail:hover::after,.foot__mail:focus-visible::after{transform:scaleX(1); transform-origin:left}
.foot__note{color:rgba(255,255,255,.48); letter-spacing:-.02em; max-width:40ch; margin-top:6px}
.foot__bot{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid var(--inv-line);
}
.foot__bot .mono--dim{color:rgba(255,255,255,.4)}

/* ───────────────────────── LIGHTBOX ───────────────────────── */
.lb{
  position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center;
  background:rgba(16,16,16,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:clamp(16px,4vw,56px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--e), visibility .4s;
}
.lb.is-open{opacity:1; visibility:visible}
.lb__box{
  width:100%; max-width:1180px; aspect-ratio:16/9; background:#000;
  transform:scale(.97); transition:transform .55s var(--e-out);
}
.lb.is-open .lb__box{transform:scale(1)}
.lb__v{width:100%; height:100%; object-fit:contain; background:#000}
.lb__close{
  position:absolute; top:clamp(14px,2.4vw,26px); right:clamp(14px,2.4vw,26px);
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:-.02em;
  color:#fff; padding:8px 14px; border:1px solid rgba(255,255,255,.24);
  transition:background .3s var(--e), border-color .3s var(--e);
}
.lb__close:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5)}

/* ───────────────────────── REVEAL ANIMATION ───────────────────────── */
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .8s var(--e-out), transform .8s var(--e-out)}
[data-reveal].is-shown{opacity:1; transform:none}

.word{display:inline-block; overflow:hidden; vertical-align:top}
.word > span{
  display:inline-block; transform:translateY(105%);
  transition:transform .95s var(--e-out); transition-delay:calc(var(--i) * 55ms);
}
[data-split].is-shown .word > span{transform:translateY(0)}

/* ───────────────────────── RESPONSIVE ───────────────────────── */
/* Below this there is no room either side of the centred heading for a scattered
   field, so the bubbles stop being absolute and flow underneath it instead. */
@media (max-width:1023px){
  .pin__panel{
    position:relative; height:auto; min-height:0;
    flex-direction:column; gap:clamp(28px,4vw,40px);
    padding:clamp(76px,10vw,112px) 0;
  }
  .pin__in{order:1}
  .bubbles{
    position:static; order:2;
    width:100%; max-width:var(--w); margin:0 auto; padding:0 var(--pad);
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  }
  .bubble{position:static; width:auto; padding:9px 12px}
}

@media (max-width:860px){
  :root{--pad:20px}
  .nav__links{display:none}
  .fmt{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr; gap:36px}
  .foot__logo{width:min(230px,70%)}
  .work__row{grid-template-columns:32px 1fr auto; gap:12px; padding:16px 6px}
  .work__k{display:none}
  .acc__b{grid-template-columns:32px 1fr 16px; gap:12px; padding:20px 6px}
  .acc__c p{padding:0 0 24px}
  .bubble span{font-size:10px}
  .reel__sound,.reel__expand,.work__play{opacity:1; transform:none}
}
@media (max-width:560px){
  .bubbles{grid-template-columns:1fr}
  .rail__stick{height:auto; min-height:0; padding:0 0 24px; display:block}
  .rail__track{overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:16px; -webkit-overflow-scrolling:touch}
  .rail__track > *{scroll-snap-align:start}
  .rail__bar{display:none}
  .hero__sub{font-size:16px}
}

/* ───────────────────────── MOTION SAFETY ───────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1; transform:none}
  .word > span{transform:none}
  .bubble{opacity:1; transform:none}
}