/* ─────────────────────────────────────────────────────────────
   STRATA — Construction, Dubai
   Monochrome editorial layout — ink, paper, and one photograph
   at a time. Two pinned scroll-scrubbed build sequences.
   ───────────────────────────────────────────────────────────── */

:root{
  --obsidian:#0A0A0B;
  --carbon:#141416;
  --concrete:#2A2A2E;
  --ash:#6E6E73;
  --bone:#EDE9E3;
  --paper:#F7F5F2;
  --white:#FFFFFF;
  /* monochrome only — one grey between ink and paper */
  --mute:#9A9A9F;

  --display:"Plus Jakarta Sans","Inter Tight",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --text:"Inter Tight","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;

  --ease:cubic-bezier(0.16,1,0.3,1);
  --dur:760ms;

  --pad:clamp(96px,11vw,180px);
  --gut:clamp(20px,5vw,72px);
  --max:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--carbon);
  font-family:var(--text);
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,canvas{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,dl,dd{margin:0}
a{color:inherit;text-decoration:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:-100px;left:24px;z-index:200;
  background:var(--white);color:var(--obsidian);
  padding:12px 20px;border-radius:0;font-size:13px;font-weight:600;
  transition:top 240ms var(--ease);
}
.skip:focus{top:20px}

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
  border-radius:2px;
}

.wrap{
  width:100%;max-width:var(--max);margin:0 auto;
  padding-inline:var(--gut);
}
/* the bar is fixed, so anchors need to clear it */
section[id]{scroll-margin-top:76px}

/* ── type scale ─────────────────────────────────────────────── */
.display{
  font-family:var(--display);
  font-size:clamp(3.2rem,10.5vw,9.5rem);
  font-weight:500;
  line-height:0.92;
  letter-spacing:-0.045em;
  color:var(--carbon);
}
.h2{
  font-family:var(--display);
  font-size:clamp(2.1rem,4.6vw,4.1rem);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-0.035em;
  color:var(--carbon);
  text-wrap:balance;
}
.display em,.h2 em{font-style:normal;color:var(--ash)}
.h2--light em{color:var(--mute)}

.micro{
  font-family:var(--text);
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.18em;
  line-height:1.4;
  color:var(--ash);
}

.pill{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--text);
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.16em;
  color:var(--carbon);
  border:1px solid rgba(42,42,46,.18);
  border-radius:0;
  padding:8px 16px 8px 13px;
  background:transparent;
}
.pill .dot{width:5px;height:5px;border-radius:999px;background:currentColor;flex:none}
.pill em{font-style:normal;color:inherit}
.pill--dark{color:var(--bone);border-color:rgba(237,233,227,.24)}

/* ── scroll progress ────────────────────────────────────────── */
.scroll-progress{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:120;
  background:rgba(42,42,46,.10);pointer-events:none;
  transition:background var(--dur) var(--ease);
}
.scroll-progress--dark{background:rgba(237,233,227,.14)}
.scroll-progress span{
  display:block;height:100%;width:100%;
  background:var(--carbon);
  transition:background var(--dur) var(--ease);
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}
.scroll-progress--dark span{background:var(--white)}

/* ── nav ────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:110;
  background:rgba(247,245,242,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(42,42,46,.10);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.nav__inner{
  max-width:var(--max);margin:0 auto;
  padding:0 var(--gut);height:76px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;
}
.nav__end{display:flex;align-items:center;justify-content:flex-end;gap:clamp(18px,2.4vw,36px)}
.wordmark{justify-self:center}
.wordmark{
  font-family:var(--display);
  font-size:19px;font-weight:700;letter-spacing:0.16em;
  color:var(--carbon);
}
.nav__links{display:flex;gap:clamp(18px,2.6vw,40px)}
.nav__links a{
  position:relative;
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.16em;
  color:var(--ash);padding:6px 0;
  transition:color 400ms var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 620ms var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current="true"]{color:var(--carbon)}
.nav__links a:hover::after,.nav__links a[aria-current="true"]::after{transform:scaleX(1)}

/* nav over a dark act */
.nav--dark{
  background:rgba(10,10,11,.74);
  border-bottom-color:rgba(237,233,227,.12);
}
.nav--dark .wordmark{color:var(--white)}
.nav--dark .nav__links a{color:var(--bone)}
.nav--dark .nav__links a:hover,
.nav--dark .nav__links a[aria-current="true"]{color:var(--white)}

.btn{
  display:inline-flex;align-items:center;
  background:var(--obsidian);color:var(--white);
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.14em;
  padding:14px 26px;border-radius:0;
  transition:background 500ms var(--ease),transform 500ms var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--carbon)}
.btn--light{background:var(--white);color:var(--obsidian)}
.btn--light:hover{background:var(--bone)}
.nav--dark .btn{background:var(--white);color:var(--obsidian)}
.nav--dark .btn:hover{background:var(--bone)}

/* ── hero ───────────────────────────────────────────────────── */
.hero{
  position:relative;
  height:100vh;height:100svh;
  min-height:560px;
  overflow:hidden;
  background:var(--obsidian);
}
/* the photograph, revealed through an expanding square mask */
.hero__stage{
  position:absolute;inset:0;
  clip-path:inset(0 round 0);
  transition:clip-path 1250ms var(--ease);
  will-change:clip-path;
}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
  transition:transform 1600ms var(--ease);
}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,10,11,.72) 0%,
    rgba(10,10,11,.30) 34%,
    rgba(20,20,22,.42) 68%,
    var(--carbon) 100%);
}

.hero__ui{
  position:absolute;inset:0;z-index:2;
  max-width:var(--max);margin:0 auto;
  padding-inline:var(--gut);
}
.hero__title{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(3rem,10.5vw,9.5rem);
  line-height:0.94;letter-spacing:-0.045em;
  color:var(--white);
  margin:0;
}
.hero__part{
  position:absolute;display:block;
  transform-origin:50% 50%;
  transition:transform 1150ms var(--ease);
  will-change:transform;
}
.hero__part--a{left:var(--gut);top:26%}
.hero__part--b{right:var(--gut);top:54%;text-align:right}
.hero__line{
  display:block;
  transform:translateY(0);
  transition:transform 1000ms var(--ease),opacity 1000ms var(--ease);
}

/* top-right ledger */
.hero__stats{
  position:absolute;right:var(--gut);top:clamp(96px,13vh,132px);
  display:flex;gap:clamp(20px,3.4vw,56px);
  font-size:13px;color:var(--bone);
}
.hero__stats em{font-style:normal;color:var(--white);font-weight:500;margin-right:6px}

/* mid-right call to action */
.hero__cta{position:absolute;right:var(--gut);top:39%}

/* bottom-left: two finished projects, then the line about how we work */
.hero__work{
  position:absolute;left:var(--gut);bottom:clamp(128px,20vh,200px);
  display:flex;flex-direction:column;gap:12px;
}
.hero__thumbs{display:flex}
.hero__thumbs img{
  width:56px;height:56px;object-fit:cover;
  border:1px solid rgba(237,233,227,.45);
}
.hero__thumbs img+img{margin-left:8px}
.hero__worklabel{
  color:var(--bone);position:relative;width:max-content;padding-bottom:3px;
}
.hero__worklabel::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 620ms var(--ease);
}
.hero__work:hover .hero__worklabel::after{transform:scaleX(1)}

.hero__blurb{
  position:absolute;left:var(--gut);bottom:clamp(40px,7vh,72px);
  max-width:34ch;font-size:15px;line-height:1.65;color:var(--bone);
}

/* bottom-right locator */
.hero__place{
  position:absolute;right:var(--gut);bottom:clamp(40px,7vh,72px);
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  border:1px solid rgba(237,233,227,.28);padding:12px 18px;
}
.hero__place .micro{color:var(--white)}
.hero__country{color:var(--mute)!important}

.hero__cue{
  position:absolute;left:50%;bottom:clamp(40px,7vh,72px);
  width:1px;height:56px;background:rgba(237,233,227,.20);overflow:hidden;
}
.hero__cue span{
  display:block;width:100%;height:22px;background:var(--white);
  animation:cue 2600ms var(--ease) infinite;
}
@keyframes cue{
  0%{transform:translateY(-26px)}
  60%,100%{transform:translateY(56px)}
}

/* ── intro timeline ─────────────────────────────────────────── */
/* boot: black screen, nothing but the title's first move */
.booting{overflow:hidden}
.booting .nav{opacity:0;pointer-events:none;transform:translateY(-8px)}
.nav{transition:opacity 800ms var(--ease),transform 800ms var(--ease),
     background var(--dur) var(--ease),border-color var(--dur) var(--ease)}

/* Pre-boot. Set on <html> by an inline script in <head>, so it is the
   INITIAL computed style and no transition can run from it. Without this
   the stage is painted wide open on first paint and the deferred script
   then animates it SHUT over 1250ms before the intro even begins. */
.js-intro .hero__stage{clip-path:inset(50% 50% 50% 50% round 12px)}
.js-intro .hero__img{transform:scale(1.22)}
.js-intro .hero__line{transform:translateY(110%);opacity:0}
.js-intro [data-pop]{opacity:0;transform:translateY(10px)}

/* the layers were only ever for the intro */
[data-hero].is-done .hero__stage,
[data-hero].is-done .hero__part{will-change:auto}

[data-hero].is-boot .hero__stage{clip-path:inset(50% 50% 50% 50% round 12px)}
[data-hero].is-boot .hero__img{transform:scale(1.22)}
[data-hero].is-boot .hero__line{transform:translateY(110%);opacity:0}
[data-hero].is-boot [data-pop]{opacity:0;transform:translateY(10px)}

/* stage 1 — the words arrive on black, small and centred */
[data-hero].is-type .hero__line{transform:translateY(0);opacity:1}

/* stage 2 — square opens onto the film */
[data-hero].is-mask .hero__stage{clip-path:inset(var(--mt) var(--mr) var(--mb) var(--ml) round 12px)}

/* stage 3 — mask fills the frame, words travel to their final size */
[data-hero].is-open .hero__stage{clip-path:inset(0 round 0)}
[data-hero].is-open .hero__img{transform:scale(1)}

[data-pop]{
  transition:opacity 800ms var(--ease),transform 800ms var(--ease);
  transition-delay:var(--d,0ms);
}

/* ── acts: white portal → circular reveal → full-frame scrub ── */
.act{
  position:relative;
  height:700vh;
  background:var(--paper);
}
.act__pin{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
  background:var(--paper);
}
/* obsidian layer that takes over as the circle fills the frame */
.act__dark{position:absolute;inset:0;background:var(--obsidian);opacity:0}

/* the hairline that draws in and anchors the dot */
.act__thread{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;
}
.act__thread line{stroke:var(--concrete);stroke-width:1;opacity:.5}
/* the travelling dot — JS drives it along the thread */
.act__dot{
  position:absolute;left:0;top:0;
  width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:999px;background:var(--obsidian);
  transform:translate3d(0,0,0) scale(0);
}

/* the circle that opens onto the film */
.act__portal{
  position:absolute;inset:0;
  clip-path:circle(0px at 50% 50%);
}
.act__canvas,.act__video,.act__still{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.act__video{display:none}
.act__canvas{opacity:0}
/* the only gradient over media: obsidian → carbon vertical fade */
.act__fade{
  position:absolute;inset:0;opacity:0;
  background:linear-gradient(180deg,
    var(--obsidian) 0%,
    rgba(10,10,11,0) 32%,
    rgba(20,20,22,0) 58%,
    var(--carbon) 100%);
}
.act__wash{position:absolute;inset:0;opacity:0;background:rgba(10,10,11,.46)}

/* details flanking the circle */
.act__meta{position:absolute;inset:0;opacity:0;pointer-events:none}
.act__index{
  position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);
  font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.4rem);
  font-weight:400;letter-spacing:-0.03em;line-height:1.9;
  display:flex;flex-direction:column;
}
.act__index em{font-style:normal;color:var(--carbon)}
.act__index span{color:rgba(42,42,46,.22)}
.act__id{
  position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);
  text-align:right;
}
.act__name{
  font-family:var(--display);
  font-size:clamp(1.6rem,3vw,2.6rem);
  font-weight:400;letter-spacing:-0.03em;line-height:1.1;color:var(--carbon);
}
.act__sub{margin-top:6px;font-size:15px;color:var(--ash)}
.act__metric{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(40px,7vh,72px);
  font-family:var(--display);
  font-size:clamp(1.2rem,2.2vw,1.9rem);
  font-weight:400;letter-spacing:-0.02em;color:var(--carbon);
}
.act__note{
  position:absolute;left:var(--gut);bottom:clamp(40px,7vh,72px);color:var(--ash);
}

.act__overlay{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;
  padding-block:clamp(96px,13vh,148px) clamp(72px,10vh,120px);
  pointer-events:none;
}
.act__overlay .card{pointer-events:auto}

.act__beats{
  position:relative;flex:1;
  display:grid;align-content:center;
  max-width:min(720px,60vw);
}
.beat{
  grid-area:1/1;
  opacity:0;visibility:hidden;
  will-change:opacity,transform;
}
.beat__h{
  font-family:var(--display);
  font-size:clamp(2.6rem,6.4vw,6rem);
  font-weight:500;line-height:0.95;letter-spacing:-0.045em;
  color:var(--white);
}
.beat__p{
  margin-top:clamp(18px,2.4vw,30px);
  max-width:44ch;
  font-size:17px;line-height:1.7;color:var(--bone);
}

.card{
  align-self:flex-end;
  border:1px solid rgba(237,233,227,.16);
  border-radius:0;
  background:rgba(20,20,22,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:22px 26px;
  min-width:min(340px,80vw);
  opacity:0;transform:translateY(12px);
  will-change:opacity,transform;
}
.card__title{
  font-family:var(--display);
  font-size:22px;font-weight:600;letter-spacing:-0.02em;color:var(--white);
}
.card__meta{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;
}
.card__meta li{
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.14em;
  color:var(--bone);
  border:1px solid rgba(237,233,227,.22);
  border-radius:0;padding:5px 12px;
}

/* preload line — sits under the circle */
.act__loader{
  position:absolute;left:var(--gut);bottom:clamp(40px,7vh,72px);z-index:3;
  display:flex;align-items:center;gap:14px;
  transition:opacity 700ms var(--ease);
}
.act__loader[hidden]{display:flex;opacity:0;pointer-events:none}
.act__loaderline{width:min(200px,40vw);height:1px;background:rgba(42,42,46,.16);overflow:hidden}
.act__loaderline span{
  display:block;height:100%;width:100%;background:var(--white);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 320ms linear;
}
.act__loaderpct{color:var(--ash)}

.act__bar{
  position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;
  background:rgba(237,233,227,.12);opacity:0;
}
.act__bar span{
  display:block;height:100%;width:100%;background:var(--white);
  transform:scaleX(0);transform-origin:0 50%;
}

/* ── section heads ──────────────────────────────────────────── */
.head{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(18px,2.4vw,28px);
  margin-bottom:clamp(56px,7vw,104px);
}
.head--left{align-items:flex-start;text-align:left}
.head .h2{max-width:18ch}
.h2--light{color:var(--bone)}

/* ── capabilities: staircase grid over a held photograph ────── */
.cap{
  position:relative;overflow:hidden;
  background:var(--obsidian);
  padding-block:var(--pad);
}
.cap__bg{
  position:absolute;left:0;right:0;top:-14%;height:128%;
  will-change:transform;
}
.cap__bg img{width:100%;height:100%;object-fit:cover}
.cap__veil{position:absolute;inset:0;background:rgba(10,10,11,.48)}
.cap__inner{position:relative;z-index:1}

.stair{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:clamp(84px,10vh,132px);
}
.stair__cell{
  position:relative;
  grid-column:var(--col);
  grid-row:var(--row) / span 2;
  padding:clamp(18px,2vw,30px);
  transition:background 620ms var(--ease);
}
/* the hairline frame, wiped in left → right */
.stair__cell::before{
  content:"";position:absolute;inset:0;
  border:1px solid rgba(237,233,227,.26);
  clip-path:inset(0 100% 0 0);
  transition:clip-path 900ms var(--ease);
  transition-delay:calc(var(--i) * 90ms);
  pointer-events:none;
}
.stair.is-in .stair__cell::before{clip-path:inset(0)}
.stair__cell:hover,
.stair__cell:focus-within{background:var(--paper)}

.stair__n{
  display:block;
  font-size:11px;font-weight:500;letter-spacing:0.18em;color:var(--mute);
}
.stair__t{
  font-family:var(--display);
  margin-top:14px;
  font-size:clamp(1.25rem,1.9vw,1.65rem);
  font-weight:500;letter-spacing:-0.025em;line-height:1.2;
  color:var(--white);
  transition:color 620ms var(--ease);
}
.stair__p{
  margin-top:10px;max-width:32ch;
  font-size:15px;line-height:1.6;color:var(--bone);
  opacity:0;transform:translateY(6px);
  transition:opacity 620ms var(--ease),transform 620ms var(--ease),color 620ms var(--ease);
}
.stair__cell:hover .stair__t,
.stair__cell:focus-within .stair__t{color:var(--carbon)}
.stair__cell:hover .stair__p,
.stair__cell:focus-within .stair__p{opacity:1;transform:none;color:var(--ash)}

/* numbers */
.numbers{
  position:relative;overflow:hidden;
  background:var(--obsidian);
  padding-block:clamp(88px,10vw,150px);
}
.numbers__ghost{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:700;
  font-size:clamp(9rem,26vw,26rem);letter-spacing:-0.05em;line-height:1;
  color:rgba(237,233,227,.028);
  pointer-events:none;user-select:none;white-space:nowrap;
}
.numbers__grid{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(28px,4vw,64px);
}
.stat{border-top:1px solid rgba(237,233,227,.16);padding-top:clamp(20px,2.4vw,32px)}
.stat__n{
  font-family:var(--display);
  font-size:clamp(2.6rem,6vw,5.2rem);
  font-weight:500;letter-spacing:-0.045em;line-height:0.95;
  color:var(--white);
  font-variant-numeric:tabular-nums;
}
.stat__l{margin-top:14px;color:var(--mute)}

/* footer */
.footer{background:var(--carbon);padding-block:clamp(80px,9vw,132px) 44px}
.footer__grid{display:flex;flex-direction:column;gap:clamp(40px,5vw,68px)}
.footer__line{
  font-family:var(--display);
  font-size:clamp(2rem,5.6vw,4.6rem);
  font-weight:500;letter-spacing:-0.04em;line-height:1.02;color:var(--bone);
}
.footer__line em{font-style:normal;color:var(--ash)}
.footer__nav{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px);
  padding-top:clamp(28px,3vw,44px);
  border-top:1px solid rgba(237,233,227,.14);
}
.footer__nav a{
  position:relative;
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.16em;
  color:var(--mute);padding-bottom:4px;
  transition:color 400ms var(--ease);
}
.footer__nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--white);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 620ms var(--ease);
}
.footer__nav a:hover{color:var(--bone)}
.footer__nav a:hover::after{transform:scaleX(1)}
.footer__legal{color:var(--ash);letter-spacing:0.14em}

/* ── reveal ─────────────────────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{opacity:1;transform:none}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:1080px){
  .numbers__grid{grid-template-columns:repeat(2,1fr)}
  .act__beats{max-width:none}
  .stair{grid-auto-rows:clamp(96px,13vh,140px)}
  .stair__p{font-size:14px}
}

@media (max-width:860px){
  body{font-size:16px}
  .nav__links{display:none}
  .nav__inner{height:66px}
  .hero__part--a{top:22%}
  .hero__part--b{top:38%;left:var(--gut);right:auto;text-align:left}
  .hero__cue{display:none}
  /* the staircase folds into a single column; descriptions stay open */
  .stair{grid-template-columns:1fr;grid-auto-rows:auto}
  .stair__cell{grid-column:1;grid-row:auto;padding:26px 22px}
  .stair__cell::before{clip-path:inset(0)}
  .stair__p{opacity:1;transform:none}
}

@media (max-width:680px){
  .numbers__grid{grid-template-columns:1fr}
  .card{min-width:0;width:100%}
}

/* mobile / no-pin fallback: looping MP4, static flow, no portal, no scrub */
.no-pin .act{height:auto;background:var(--obsidian)}
.no-pin .act__pin{position:relative;height:auto;overflow:visible;background:var(--obsidian)}
.no-pin .act__dark{opacity:1}
.no-pin .act__thread,
.no-pin .act__dot,
.no-pin .act__loader,
.no-pin .act__bar{display:none}
.no-pin .act__portal{
  position:relative;inset:auto;height:58vh;
  clip-path:none;-webkit-mask-image:none;mask-image:none;
}
.no-pin .act__canvas{display:none}
.no-pin .act__video{display:block}
.no-pin .act__fade,.no-pin .act__wash{opacity:1}
.no-pin .act__meta{
  position:relative;inset:auto;opacity:1;
  padding:clamp(28px,6vw,44px) var(--gut) 0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
}
.no-pin .act__index{display:none}
.no-pin .act__id,
.no-pin .act__metric,
.no-pin .act__note{position:static;transform:none;text-align:left}
.no-pin .act__name,
.no-pin .act__metric{color:var(--white)}
.no-pin .act__sub,.no-pin .act__note{color:var(--mute)}
.no-pin .act__overlay{
  position:relative;height:auto;
  padding-block:clamp(40px,7vw,64px);
}
.no-pin .act__beats{position:static;margin-top:0;display:grid;gap:clamp(40px,7vw,64px);max-width:none}
.no-pin .beat{position:static;opacity:1;visibility:visible;transform:none}
.no-pin .beat__h{font-size:clamp(2.1rem,8vw,3rem)}
.no-pin .card{opacity:1;transform:none;align-self:stretch;margin-top:48px}

/* reduced motion: still frame, everything visible, no scrub */
.rm .act__video{display:none}
.rm .act__still{display:block}
.rm .hero__cue{display:none}

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