/* ==========================================================================
   PHARSYDE DIGITAL — v2 (dark)
   Vanilla CSS/JS, no framework, no CDN, no build step.
   Effects are ported from the source sites you supplied; each one is
   credited above its block with the mechanism it reproduces.
   ========================================================================== */

@font-face{font-family:'Anton';src:url('../fonts/anton-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('../fonts/schibsted-latin.woff2') format('woff2-variations');
  font-weight:400 900;font-style:normal;font-display:swap}

:root{
  /* Blood orange red. Warm and orange-leaning so it never reads pink, and
     light enough that it stays hot rather than going maroon on black. */
  --red:#F53D1A;
  --red-lo:#C22E10;   /* the dim state of the same hue, for the word reveal */
  --ink:#0A0A0A;      /* the page */
  --cream:#F3F0E7;    /* warm off-white: felt, not named */

  --fg:var(--cream);
  --bg:var(--ink);
  --line:rgba(243,240,231,.18);
  --line-2:rgba(243,240,231,.38);
  --mute:rgba(243,240,231,.60);

  /* Anton is reserved for the hero and the closing screen. Everything else
     is the grotesk — a display face at body sizes is what makes a page look
     templated. */
  --display:'Anton','Haettenschweiler','Arial Narrow',sans-serif;
  --sans:'Schibsted Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;

  --t-mega:clamp(3.6rem,17.5vw,18rem);
  --t-xl:clamp(2.1rem,5.4vw,4.2rem);   /* section display, grotesk */
  --t-lg:clamp(1.7rem,3.4vw,2.9rem);   /* section headings */
  --t-lede:clamp(1.05rem,1.5vw,1.32rem);
  --t-body:clamp(1rem,1.05vw,1.07rem);
  --t-mini:.76rem;

  --pad:clamp(1.15rem,4.4vw,4.5rem);
  --gap:clamp(4.5rem,12vh,9rem);
  --max:100rem;
  --out:cubic-bezier(.16,1,.3,1);
  --io:cubic-bezier(.7,0,.3,1);
  --mid:.45s;
}

/* Light islands invert the token set rather than overriding colours
   one selector at a time. */
.pale{--fg:var(--ink);--bg:var(--cream);--line:rgba(10,10,10,.16);
  --line-2:rgba(10,10,10,.34);--mute:rgba(10,10,10,.58);
  background:var(--cream);color:var(--ink)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);
  font-size:var(--t-body);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:var(--ink)}

.d{font-family:var(--sans);font-weight:800;text-transform:none;
  line-height:1.04;letter-spacing:-.025em}
/* the two places the blocky face is allowed: the hero and the closing screen */
.d--anton{font-family:var(--display);font-weight:400;text-transform:uppercase;
  line-height:.9;letter-spacing:-.012em}
.d-xl{font-size:var(--t-xl)}.d-lg{font-size:var(--t-lg)}
.lede{font-size:var(--t-lede);line-height:1.45;max-width:38ch}
.tag{font-size:var(--t-mini);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;color:var(--mute)}
.mute{color:var(--mute)}
.shell{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.band{position:relative;padding-block:var(--gap)}
.skip{position:absolute;left:-9999px;z-index:200;background:var(--cream);
  color:var(--ink);padding:.9rem 1.2rem;font-weight:600}
.skip:focus{left:1rem;top:1rem}

/* ==========================================================================
   THE WASH — hero colour field                  (ref: Love and Money)
   Their red hero fades to white on scroll. Ours is the blood orange
   fading to the black page. The colour is on a fixed layer, not the section, so it
   drains off the whole frame at once; motion.js steps <meta theme-color>
   in the same loop and lerps the hero type from ink to cream as it goes,
   because black text on a black page would otherwise disappear.
   ========================================================================== */
#wash{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--red);will-change:opacity}
#page{position:relative;z-index:2}

/* ---------- header ----------
   Nothing in the bar exists on load. It arrives once the hero is behind
   you, which is also when the colour has finished draining. */
.top{position:fixed;inset:0 0 auto 0;z-index:70;display:flex;align-items:center;
  justify-content:space-between;padding:clamp(.9rem,1.8vw,1.4rem) var(--pad);
  opacity:0;transform:translateY(-12px);pointer-events:none;
  transition:opacity .55s var(--out),transform .55s var(--out)}
.top.in{opacity:1;transform:none;pointer-events:auto}
.logo{font-family:var(--display);font-size:clamp(1rem,1.5vw,1.2rem);
  text-transform:uppercase;letter-spacing:.02em;line-height:1}
/* same measurement, at the logo's ratio */
.logo sup{font-size:.30em;line-height:1;margin-left:.09em;
  vertical-align:baseline;position:relative;bottom:2.01em}
.arc sup,h2 sup,h3 sup{font-size:.42em;vertical-align:top;line-height:1}
.top nav{display:flex;align-items:center;gap:clamp(.9rem,2.2vw,1.9rem)}
.nav-l{font-size:var(--t-mini);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;position:relative;padding-block:.3rem;background:none;
  border:0;cursor:pointer}
.nav-l::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--mid) var(--out)}
.nav-l:hover::after,.nav-l:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav-cta{border:2px solid currentColor;padding:.55rem 1rem}
.nav-cta::after{display:none}
@media (max-width:800px){.nav-hide{display:none}}

/* ==========================================================================
   1 · HERO                                      (ref: Love and Money)
   Everything sits inside the first frame — name, sub-line and meta — so
   nothing waits below the fold. No rule under the section: the hero has
   to dissolve into the page, not end at a visible seam.
   ========================================================================== */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;
  /* the name runs to tighter gutters than the rest of the page, which is
     what lets it get this large */
  padding:clamp(2rem,4vh,3rem) clamp(1rem,3vw,3rem) clamp(1.6rem,4.5vh,3.2rem)}
.hero h1{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:var(--t-mega);line-height:1.1;letter-spacing:-.02em;
  margin-bottom:clamp(.6rem,1.6vh,1.1rem)}
/* The clip box has to be a full em or the reveal shaves the glyphs;
   the lines are pulled back together with a negative margin instead. */
.hero h1 .l{display:block;white-space:nowrap;overflow:hidden;line-height:1.1}
.hero h1 .l+.l{margin-top:-.20em}
/* the registered mark rides the cap line of PHARSYDE */
/* `bottom` resolves against the SUP's own font-size, not the heading's.
   Offset measured from real font metrics rather than guessed: Anton's cap
   ascent is .86em and the ™ glyph's is .86 of its own size, so the lift
   that puts the mark's ink top exactly level with the cap of the E is
   (capAscent - tmAscent) / supFontSize = 6.61 of the sup's own em.
   Both terms scale with font-size, so this ratio holds at every size. */
.hero h1 sup{font-size:.115em;line-height:1;margin-left:.06em;
  vertical-align:baseline;position:relative;bottom:6.61em}
.hero h1 .l>i{display:block;font-style:normal;transform:translateY(110%);
  transition:transform 1.05s var(--out)}
.hero h1 .l:nth-child(2)>i{transition-delay:.08s}
.lit .hero h1 .l>i{transform:none}
/* fitHero() sets font-size on the h1 and letter-spacing/margin on line 2 */
.hero__end{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.1rem 2rem;opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--out) .45s,transform .8s var(--out) .45s}
.lit .hero__end{opacity:1;transform:none}
.hero__sub{max-width:44ch;font-size:var(--t-lede);line-height:1.4}
.hero__meta{display:flex;gap:clamp(1rem,3vw,2.2rem);font-size:var(--t-mini);
  font-weight:600;text-transform:uppercase;letter-spacing:.14em}

/* ==========================================================================
   2 · LIGHT-UP STATEMENT                             (ref: MONOLOG)
   The source splits to lines/words/chars, groups the chars BY LINE, and
   runs one scrubbed timeline where line p starts at time p * 0.3 while its
   own chars stagger 0.1 apart. Chars ease left-to-right inside a line and
   each line starts later than the one above it, so the lit edge travels
   diagonally from the top-left of the block to the bottom-right — which is
   the effect, not a per-character colour flash. It is plain opacity
   0.2 -> 1; no accent colour is involved at all.
   ========================================================================== */
/* pushed down and given extra room so the sweep never overlaps the hero
   reveal and never runs out of scroll mid-sentence */
.glow{padding-block:calc(var(--gap) * 1.9) calc(var(--gap) * 1.4)}
.glow__grid{display:grid;gap:clamp(1.8rem,4vw,4.5rem);
  grid-template-columns:minmax(0,14rem) minmax(0,1fr)}
@media (max-width:880px){.glow__grid{grid-template-columns:1fr}}
.glow__side{position:sticky;top:clamp(5.5rem,13vh,8rem);align-self:start}
.glow__side .tag{display:block;margin-bottom:.8rem}
.glow__side p{font-size:.95rem;line-height:1.5;color:var(--mute);max-width:24ch}
.glow__t{font-family:var(--sans);font-weight:800;text-transform:none;
  font-size:clamp(1.5rem,3.5vw,2.9rem);line-height:1.3;letter-spacing:-.02em}
/* Each character is its own inline-block, which makes every character a
   legal line-break opportunity — that is what was snapping words like
   "studied" in half. The word wrapper is the fix: breaks can only happen
   between words now. */
.glow__t .wd{display:inline-block;white-space:nowrap}
.glow__t .ch{display:inline-block;opacity:.2;will-change:opacity}

/* ==========================================================================
   3 · CLIENTS                            (grid: SLIK · heading: HOBRO)
   SLIK's wall is 21 small, uniform cells — that density is the point, so
   ours is 21 too. No checkerboard, no hover, no reveal: the wall is
   deliberately inert so the only thing moving here is the heading.

   The heading is HOBRO's letter roll. Two stacked copies of the line, the
   second sitting exactly one line below; both shift up 100% with a small
   per-character stagger, so the old letters leave as the new ones arrive.
   ========================================================================== */
.roster{padding-block:var(--gap)}
.swap{display:inline-block;position:relative;overflow:hidden;vertical-align:top;
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:var(--t-xl);line-height:1;letter-spacing:-.012em}
/* An invisible sizer holding the LONGER of the two words keeps the box wide
   enough for both. Without it the box is sized by whichever line sits in
   flow, and the wider word gets shaved by overflow:hidden — which is what
   was clipping the final "u" of "Could be You". Both real lines are
   absolutely positioned so neither decides the width. */
.swap__z{display:block;white-space:nowrap;visibility:hidden;pointer-events:none}
.swap__line{position:absolute;left:0;top:0;display:block;white-space:nowrap}
.swap__line--copy{top:100%}
.swap .ch{display:inline-block;will-change:transform}

.wall{display:grid;gap:1px;margin-top:clamp(2rem,5vw,3.2rem);
  grid-template-columns:repeat(auto-fill,minmax(clamp(7.5rem,12vw,10.5rem),1fr));
  background:var(--line);border:1px solid var(--line)}
.wall li{aspect-ratio:5/3;display:grid;place-items:center;background:var(--ink);
  text-align:center;padding:.5rem}
.wall span{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(.7rem,1.1vw,.86rem);line-height:1.1;letter-spacing:.04em;
  color:var(--mute)}
.wall span b{display:block;font-weight:400;font-size:1.5em;color:var(--cream);
  letter-spacing:.01em}

/* ==========================================================================
   4 · BRAND STRATEGY                       (ref: NBNZIA / CTO Bees)
   The card behaviour is the source's: the outgoing card tilts back in 3D
   and shrinks — rotationX 40deg, scale 0.7, a small random Z-rotation,
   power1.in — while the next rises over it.

   One change you asked for: the whole section is pinned ONCE and every
   card is stacked inside it, so the page never appears to travel. The
   first pass gave each card its own 200vh of scroll, which is what made it
   feel like you were scrolling down a long page instead of standing still.
   ========================================================================== */
.build__head{padding-block:var(--gap) clamp(1.4rem,3.5vh,2.2rem)}
.build{position:relative}                 /* height set by JS: one screen per card */
.build__pin{position:sticky;top:0;height:100vh;height:100svh;
  perspective:1500px;perspective-origin:50% 45%;overflow:hidden}
.slide__card{position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(.7rem,1.8vh,1.3rem);
  padding:clamp(2.5rem,7vw,7rem) var(--pad);
  background:var(--ink);border-top:1px solid var(--line);
  transform-style:preserve-3d;will-change:transform;backface-visibility:hidden}
.slide__card:nth-child(even){background:#0E0E0E}
.slide__bar{position:absolute;left:0;top:0;height:5px;background:var(--red);width:var(--w,20%)}
.slide__n{font-family:var(--sans);font-weight:800;line-height:1;
  font-size:clamp(.8rem,1vw,.9rem);letter-spacing:.18em;color:var(--red)}
.slide__t{font-family:var(--sans);font-weight:800;text-transform:none;
  font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.028em}
.slide__o{font-size:clamp(1.05rem,1.8vw,1.45rem);line-height:1.4;max-width:36ch;color:var(--cream)}
.slide__tac{display:flex;flex-wrap:wrap;gap:.4rem .45rem;max-width:58ch}
.slide__tac li{font-size:var(--t-mini);font-weight:600;
  letter-spacing:.04em;padding:.34rem .65rem;border:1px solid var(--line-2);color:var(--mute)}
.slide__m{font-size:var(--t-mini);color:var(--mute);margin-top:.4rem}
.slide__m b{color:var(--red);font-weight:700}
.slide__card [data-item]{opacity:0;transform:translateY(40px);
  transition:opacity .7s var(--out),transform .7s var(--out)}
.slide__card.on [data-item]{opacity:1;transform:none}
.slide__card.on [data-item]:nth-child(2){transition-delay:.10s}
.slide__card.on [data-item]:nth-child(3){transition-delay:.20s}
.slide__card.on [data-item]:nth-child(4){transition-delay:.30s}
.slide__card.on [data-item]:nth-child(5){transition-delay:.40s}
.slide__card.on [data-item]:nth-child(6){transition-delay:.50s}

/* ==========================================================================
   5 · SERVICES                            (ref: Buzzworthy "attitude")
   Rebuilt against their CSS and JS rather than from a description:

     .boxes { position:absolute; top:10%; height:80%;
              margin-left:99.9984vw;            <- a full viewport off-screen
              display:flex; justify-content:space-between; }
     .boxes > div          { width:37.4994vw; }
     .boxes > div.b-middle { align-self:center;    }
     .boxes > div.b-end    { align-self:flex-end;  }

   Three things that matter and that the first pass missed: the belt starts
   ONE FULL VIEWPORT to the right, so the boxes travel in from off-screen;
   the boxes are wide (~37vw); and they sit at three different vertical
   alignments inside an 80%-tall band. That stagger, plus the velocity
   squash in the JS, is what reads as bouncing across the screen.
   ========================================================================== */
.svc{position:relative}                    /* height set by JS */
.svc__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* the two stacked copies of the word, centred in the pin */
.word{position:absolute;left:0;right:0;top:50%;translate:0 -50%;
  display:flex;justify-content:center;height:1em;line-height:1;z-index:1;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:min(24vw,19rem);letter-spacing:-.02em;pointer-events:none;user-select:none}
.word p{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  white-space:nowrap;margin:0}
.word .ch{display:inline-block;will-change:transform}
.word p:first-of-type{z-index:2;color:var(--red);
  clip-path:inset(0% 0% 0% 100%);-webkit-clip-path:inset(0% 0% 0% 100%)}
.word p:nth-of-type(2){z-index:1;color:rgba(245,61,26,.17)}

.boxes{position:absolute;top:10%;left:0;height:80%;z-index:2;
  display:flex;align-items:flex-start;gap:0;width:max-content;
  will-change:transform}
.boxes > div{flex:none;width:min(42vw,39rem);padding-left:clamp(1.2rem,4.16vw,4.5rem);
  display:flex}
.boxes > div:first-of-type{padding-left:0;width:min(38vw,35rem)}
.boxes > div.b-middle{align-self:center}
.boxes > div.b-end{align-self:flex-end}
/* No outline at all, as in the source — the box is separated from the page
   by a barely-there lift in the surface colour instead (theirs is #222650
   on a #151833 page; ours is the same idea against near-black). Padding is
   generous, the way theirs is at 4.1666vw. */
.scard{width:100%;padding:clamp(1.6rem,3.4vw,3.2rem);
  background:#17171A;border:0;border-radius:10px;min-height:clamp(17rem,38vh,26rem);
  display:flex;flex-direction:column;gap:.7rem;
  transform-origin:center center;will-change:transform}
/* deliberately no hover state — the boxes are for reading, not clicking */
.scard__n{font-size:var(--t-mini);font-weight:700;letter-spacing:.16em;color:var(--red)}
.scard__t{font-family:var(--sans);font-weight:800;text-transform:none;
  font-size:clamp(1.5rem,2.9vw,2.4rem);line-height:1.02;letter-spacing:-.028em}
.scard__c{font-size:1rem;line-height:1.5;color:var(--mute);margin-top:auto}

/* ==========================================================================
   6 · WHY PHARSYDE
   You said this does not need their look — no outlined 01s, no pill boxes —
   only their smoothness. Bucks Sauce's own bundle is rate-limited (429) so
   I could not read it; what every one of these sites actually does for that
   quality is scrub with a CATCH-UP LAG rather than mapping scroll straight
   to position (GSAP `scrub: <number>`). So the wheel angle here eases
   toward its scroll-derived target each frame instead of snapping to it,
   which is the same mechanism, and the look is ours.
   ========================================================================== */
.why__head{padding-block:var(--gap) 0}
.arc{display:block;width:100%;height:auto;overflow:visible}
.arc text{font-family:var(--sans);font-weight:800;fill:var(--cream);letter-spacing:-.02em}
.arc tspan{opacity:0;transition:opacity .5s ease}
.arc.in tspan{opacity:1}

.wheel{position:relative}                  /* height set by JS */
.wheel__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.wheel__rail{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(46rem,86vw);height:1px;background:var(--line)}
.reason{position:absolute;left:50%;top:50%;width:min(42rem,86vw);
  display:flex;flex-direction:column;align-items:center;gap:clamp(.7rem,2vh,1.2rem);
  text-align:center;will-change:transform,opacity}
.reason__k{font-size:var(--t-mini);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red)}
.reason__t{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.9rem,4.8vw,3.8rem);line-height:1.02}
.reason__c{max-width:38ch;font-size:var(--t-lede);line-height:1.5;color:var(--mute)}
/* progress ticks, so the section reads as three things not one */
.wheel__dots{position:absolute;left:50%;bottom:clamp(2rem,7vh,4rem);translate:-50% 0;
  display:flex;gap:.5rem}
.wheel__dots i{width:26px;height:2px;background:var(--line-2);transition:background .4s var(--out)}
.wheel__dots i.on{background:var(--red)}

/* ==========================================================================
   7 · REVIEWS  —  mine, not Bucks Sauce
   A reservation ledger rather than a wall of empty testimonial cards. Five
   numbered slots, each one openly unfilled, with the first marked as the
   one going. It reads as confident and honest about being new instead of
   apologetic — and dropping a real review in later is one <li>.
   ========================================================================== */
.voices{padding-block:var(--gap)}
.voices__grid{display:grid;gap:clamp(1.6rem,4vw,4rem);
  grid-template-columns:minmax(0,16rem) minmax(0,1fr)}
@media (max-width:880px){.voices__grid{grid-template-columns:1fr}}
.voices__side .tag{display:block;margin-bottom:.8rem}
.voices__side p{font-size:.95rem;line-height:1.5;color:var(--mute);max-width:26ch}
.ledger{border-top:1px solid var(--line)}
.ledger li{position:relative;display:grid;align-items:baseline;gap:.4rem 1.4rem;
  grid-template-columns:auto 1fr auto;
  padding:clamp(1rem,2.4vh,1.6rem) 0;border-bottom:1px solid var(--line)}
.ledger__n{font-size:var(--t-mini);font-weight:700;letter-spacing:.18em;color:var(--mute)}
.ledger__t{font-family:var(--sans);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.15rem,2.4vw,1.8rem);line-height:1.1;color:var(--mute)}
.ledger__s{font-size:var(--t-mini);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap}
/* the open slot */
.ledger li.open .ledger__n,.ledger li.open .ledger__s{color:var(--red)}
.ledger li.open .ledger__t{color:var(--cream)}
.ledger li.open::before{content:'';position:absolute;left:0;bottom:-1px;height:1px;
  width:var(--fill,0%);background:var(--red);transition:width 1.1s var(--out)}
.ledger li.in.open::before{width:100%}
/* rows arrive one after another */
.ledger li{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--out),transform .7s var(--out)}
.ledger li.in{opacity:1;transform:none}

/* ---------- 8 · closing (mine) ---------- */
.close{padding-block:clamp(6rem,17vh,11rem)}
.close h2 em{font-style:normal;position:relative;white-space:nowrap;color:var(--red)}
.close__row{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 2rem;
  margin-top:clamp(1.8rem,5vh,3rem)}

.btn{position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:1rem 1.6rem;border:2px solid currentColor;background:none;
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:1rem;letter-spacing:.03em;cursor:pointer;overflow:hidden;isolation:isolate}
.btn span{position:relative;z-index:1;transition:color var(--mid) var(--out)}
.btn::before{content:'';position:absolute;inset:0;background:var(--red);z-index:0;
  transform:translateY(101%);transition:transform var(--mid) var(--out)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover span,.btn:focus-visible span{color:var(--ink)}

/* ---------- menu / footer / form ---------- */
.menu{position:fixed;inset:0;z-index:80;background:var(--cream);color:var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(4.5rem,11vh,7rem) var(--pad) clamp(1.5rem,4vh,2.5rem);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--out);visibility:hidden}
.menu[data-open]{clip-path:inset(0 0 0 0);visibility:visible}
.menu__nav{display:flex;flex-direction:column}
.menu__l{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.1rem,8vw,5.5rem);line-height:1.04;opacity:0;transform:translateY(34px);
  transition:opacity .5s var(--out),transform .6s var(--out),color var(--mid) var(--out);
  width:max-content}
.menu[data-open] .menu__l{opacity:1;transform:none;transition-delay:calc(.1s + var(--i,0)*.05s)}
.menu__nav:hover .menu__l{color:rgba(10,10,10,.35)}
.menu__nav .menu__l:hover{color:var(--ink)}
.menu__foot{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;justify-content:space-between;
  border-top:1px solid rgba(10,10,10,.2);padding-top:1.2rem;font-size:var(--t-mini)}
.foot{padding:clamp(3rem,8vh,5rem) var(--pad) clamp(1.4rem,4vh,2rem);border-top:1px solid var(--line)}
.foot__top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot__nav{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;font-size:var(--t-mini);
  font-weight:600;text-transform:uppercase;letter-spacing:.13em}
.foot__social{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:var(--t-mini);
  font-weight:600;text-transform:uppercase;letter-spacing:.13em}
.foot__social a{display:inline-flex;align-items:center;gap:.35rem;
  transition:color var(--mid) var(--out)}
.foot__social a i{font-style:normal;font-size:1.05em;
  transition:transform var(--mid) var(--out)}
.foot__social a:hover{color:var(--red)}
.foot__social a:hover i{transform:translate(2px,-2px)}
.foot__mail{border-bottom:1px solid var(--line-2);transition:color var(--mid) var(--out),border-color var(--mid) var(--out)}
.foot__mail:hover{color:var(--red);border-color:var(--red)}
.foot__bar{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  margin-top:clamp(2rem,6vh,3rem);padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:var(--t-mini);color:var(--mute)}
.f{display:grid;gap:1.1rem;max-width:38rem}
.f label{display:block;font-size:var(--t-mini);font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;margin-bottom:.45rem}
.f input,.f textarea,.f select{width:100%;padding:.85rem 1rem;background:transparent;
  color:var(--cream);border:1px solid var(--line-2);border-radius:0}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--red)}
.f .err{color:#FF6B5E;font-size:var(--t-mini);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.todo{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:.2rem .45rem;border:1px dashed var(--red);
  color:var(--red);vertical-align:middle}

[data-rev]{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--out),transform .85s var(--out)}
[data-rev].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  [data-rev],.hero h1 .l>i,.hero__end{opacity:1!important;transform:none!important}
  .glow__t .ch{opacity:1!important}
  .boxes{transform:none!important}
  .top{opacity:1;transform:none;pointer-events:auto}
  /* every pinned section unpins into a plain vertical stack */
  .build,.svc,.wheel{height:auto!important}
  .boxes{position:static;height:auto;flex-wrap:wrap;gap:1rem;width:auto}
  .boxes > div{width:100%;padding-left:0}
  .word{position:static;translate:none;margin-block:2rem}
  .build__pin,.svc__pin,.wheel__pin{position:static;height:auto;overflow:visible;
    perspective:none;display:block}
  .slide__card{position:static;transform:none!important;min-height:70vh;min-height:70svh}
  .slide__card [data-item]{opacity:1!important;transform:none!important}
  .word p:first-of-type{clip-path:none!important;-webkit-clip-path:none!important}
  .reason{position:static;width:auto;transform:none!important;opacity:1!important;
    padding-block:3rem}
  .wheel__rail,.wheel__dots{display:none}
  .ledger li{opacity:1!important;transform:none!important}
}