/* ============================================================================
   Z LAB DESIGN — "Graphite & Signal"
   A motorsport-telemetry system: hairline rules, monospace indices, expanded
   display type, one high-visibility accent, footage as the photography layer.

   Contents
   01 tokens · 02 fonts · 03 base · 04 type · 05 layout · 06 chrome
   07 nav + menu · 08 hero · 09 marquee · 10 manifesto · 11 services
   12 process · 13 numbers · 14 booking · 15 footer · 16 work page
   17 modal · 18 responsive · 19 reduced motion
   ========================================================================== */

/* -- 01 tokens ------------------------------------------------------------ */
:root{
  /* One black, expressed as channels so every scrim can set its own alpha
     from the SAME colour: rgb(var(--void-rgb) / .72). Before this there were
     four near-blacks in the file (8,8,10 / 6,6,8 / 0,0,0 / 14,14,17) and the
     most-used one was not a token at all. */
  --void-rgb:8 8 10;
  --void:rgb(var(--void-rgb));
  --ink-rgb:13 13 16;
  --ink:rgb(var(--ink-rgb));
  --panel:#131317;
  --panel-2:#191920;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);
  --text:#ecece8;
  --dim:#8c8c95;                          /* 6.0:1 on --void */
  --faint:#7c7c86;                        /* 4.5:1 on --void — AA for small text */

  /* one accent drives the whole site — change this line to rebrand */
  --signal:#ffa51f;                       /* saffron */
  --signal-ink:#1b0e00;                   /* text that sits on saffron */
  --signal-glow:rgba(255,165,31,.38);

  --wa:#25d366;

  --f-display:"Archivo","Archivo Fallback",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Type scale. The small end was sixteen near-identical one-offs
     (.54 .56 .58 .60 .62 .66 .68 .70 .72 .74 .78 .82 .94 .95 .96 .98rem);
     it collapses to five steps, and nothing renders below ~10.5px now.
     --fs-d* are the four display steps used by .d-xl/.d-lg/.d-md/.d-sm. */
  --fs-2xs:.66rem;                        /* only where space is genuinely tight */
  --fs-xs:.7rem;                          /* mono labels, indices */
  --fs-sm:.78rem;
  --fs-base:.95rem;
  --fs-md:1.05rem;
  --fs-d1:clamp(3.1rem,14.2vw,15rem);
  --fs-d2:clamp(2.5rem,8.4vw,7.6rem);
  --fs-d3:clamp(2rem,5.2vw,4.4rem);
  --fs-d4:clamp(1.5rem,3.1vw,2.5rem);

  --r-xs:3px;                             /* was 2/3/4px, arbitrarily */
  --r-pill:100px;
  --r-round:50%;

  /* Section scroll lengths. Longer section = more scrolling for the same
     animation, so these are the page's pacing dial — keep them on a scale
     instead of hand-tuning each one. Overridden per breakpoint below. */
  --sec-xs:140svh;
  --sec-sm:160svh;
  --sec-md:200svh;
  --sec-lg:300svh;

  --pad:clamp(18px,4.2vw,64px);
  --shell:1680px;
  --nav-h:76px;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);

  --z-rules:2; --z-content:3; --z-grain:55; --z-hud:60; --z-nav:80;
  --z-menu:90; --z-modal:100; --z-curtain:110; --z-cursor:120; --z-load:130;
}

/* -- 02 fonts (self-hosted: no third-party render block) ------------------ */
@font-face{
  font-family:"Archivo";
  src:url("../assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900; font-stretch:62% 125%; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../assets/fonts/jetbrains-mono-var.woff2") format("woff2-variations");
  font-weight:400 700; font-display:swap;
}
/* metric-ish fallback so the swap does not jolt the layout */
@font-face{
  font-family:"Archivo Fallback";
  src:local("Arial");
  size-adjust:96%; ascent-override:92%; descent-override:24%;
}

/* -- 03 base -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:var(--f-display);font-size:16px;line-height:1.55;
  font-variation-settings:"wdth" 100,"wght" 400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;}
img,canvas,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;}
::selection{background:var(--signal);color:var(--signal-ink);}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:var(--r-xs);}

.skip{
  position:fixed;top:-100px;left:16px;z-index:200;background:var(--signal);
  color:var(--signal-ink);padding:12px 18px;font-family:var(--f-mono);font-size:12px;
  transition:top .2s;
}
.skip:focus{top:16px;}

/* Lenis — the full required stylesheet. NB: the document must be in standards
   mode (<!DOCTYPE html>) or Lenis reads the wrong scroll metrics and the wheel
   stops working. */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-scrolling iframe{pointer-events:none;}

/* -- 04 type -------------------------------------------------------------- */
.display{
  font-variation-settings:"wdth" 118,"wght" 800;
  text-transform:uppercase;line-height:.85;letter-spacing:-.018em;margin:0;
}
.d-xl{font-size:var(--fs-d1);}
.d-lg{font-size:var(--fs-d2);}
.d-md{font-size:var(--fs-d3);}
.d-sm{font-size:var(--fs-d4);}

.label{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);font-weight:500;
}
.label--signal{color:var(--signal);}
.idx{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--faint);font-variant-numeric:tabular-nums;}
.lede{
  font-size:clamp(1rem,1.32vw,1.2rem);line-height:1.6;color:var(--dim);
  max-width:52ch;font-variation-settings:"wdth" 100,"wght" 400;
}
.lede strong{color:var(--text);font-variation-settings:"wdth" 100,"wght" 600;}
.sig{color:var(--signal);}

/* masked word reveal (motion.js) */
.word{display:inline-block;overflow:hidden;vertical-align:top;}
.word__i{display:inline-block;will-change:transform;}

/* -- 05 layout ------------------------------------------------------------ */
.shell{width:min(var(--shell),100% - var(--pad)*2);margin-inline:auto;}
.section{position:relative;z-index:var(--z-content);}
/* NB: no overflow on .pin — an overflow value on the ancestor silently
   disables position:sticky on .stage. Clipping belongs on .stage itself. */
.pin{position:relative;}
.stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  /* Own compositing layer. Without it mobile GPUs re-rasterise the sticky
     content during fast scroll and leave a ghosted/doubled copy of the text. */
  transform:translateZ(0);
  backface-visibility:hidden;
}
.layer{position:absolute;inset:0;width:100%;height:100%;}
.layer--canvas{z-index:1;background:var(--void);}
.layer--scrim{z-index:2;pointer-events:none;}
.layer--content{z-index:3;display:flex;align-items:center;}

/* Anything sitting directly on footage needs its own contrast — the scrims
   alone can't cover every frame, and --dim body copy disappears over a bright
   panel. Brighter text plus a tight shadow keeps it readable on any frame. */
/* .hero__meta sits outside .layer--content, so it must be listed explicitly */
.layer--content .lede,.whero__inner .lede,.hero__meta .lede,.step p{
  color:#dfe0e2;
  text-shadow:0 1px 3px rgba(0,0,0,.92),0 4px 20px rgba(0,0,0,.65);
}
.layer--content .lede strong,.whero__inner .lede strong,.hero__meta .lede strong{color:#fff;}
.layer--content .label,.whero__inner .label,.hero__meta .label{
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 12px rgba(0,0,0,.6);
}
.layer--content .display,.whero__inner .display{
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
/* the process cards have their own solid panel, so no shadow needed there */
.step p{text-shadow:none;color:var(--dim);}

/* --- deliberate colour swaps (extra class raises specificity over the
       generic overlay rules above) --------------------------------------- */
/* hero eyebrow reads as a tagline, so it stays white rather than accented */
.hero__kicker .label.label--signal{color:#fff;}
/* booking lede carries the accent instead */
.layer--content .lede.booking__lede{color:var(--signal);}

/* scrims: precise, so footage stays visible but text never fights it */
.scrim-vignette{background:radial-gradient(115% 85% at 50% 45%,transparent 32%,rgb(var(--void-rgb) / .72) 100%);}
.scrim-bottom{background:linear-gradient(180deg,rgb(var(--void-rgb) / .5) 0%,transparent 24%,transparent 62%,rgb(var(--void-rgb) / .82) 100%);}
/* the hero already carries a vignette, so its bottom scrim stays light —
   two full-strength scrims stacked crushes the footage to black */
.hero .scrim-bottom{background:linear-gradient(180deg,rgb(var(--void-rgb) / .35) 0%,transparent 22%,transparent 66%,rgb(var(--void-rgb) / .6) 100%);}
.scrim-left{background:linear-gradient(90deg,rgb(var(--void-rgb) / .92) 0%,rgb(var(--void-rgb) / .62) 40%,rgb(var(--void-rgb) / .12) 74%,rgb(var(--void-rgb) / .4) 100%);}
.scrim-soft{background:linear-gradient(180deg,rgb(var(--void-rgb) / .5),rgb(var(--void-rgb) / .2) 40%,rgb(var(--void-rgb) / .8));}

/* hairline column rules — the "technical sheet" device */
.rules{
  position:fixed;inset:0;z-index:var(--z-rules);pointer-events:none;
  width:min(var(--shell),100% - var(--pad)*2);margin-inline:auto;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:calc(100% / 4) 100%;opacity:.55;
}
@media (max-width:860px){.rules{background-size:calc(100% / 2) 100%;}}

/* -- 06 chrome: preloader / grain / progress / cursor --------------------- */
#preload{
  position:fixed;inset:0;z-index:var(--z-load);background:var(--void);
  display:grid;place-items:center;
}
.pl__inner{width:min(560px,84vw);}
.pl__row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;}
.pl__mark{
  font-variation-settings:"wdth" 120,"wght" 800;text-transform:uppercase;
  font-size:clamp(2.2rem,7vw,4.4rem);line-height:.85;letter-spacing:-.02em;
}
.pl__mark i{color:var(--signal);font-style:normal;}
.pl__mark img{height:clamp(30px,6vw,56px);width:auto;display:block;}
.pl__pct{font-family:var(--f-mono);font-size:clamp(2rem,6vw,3.6rem);color:var(--signal);font-variant-numeric:tabular-nums;line-height:1;}
.pl__bar{margin-top:20px;height:2px;background:var(--line-2);overflow:hidden;}
.pl__fill{height:100%;width:100%;background:var(--signal);transform:scaleX(0);transform-origin:0 50%;}
.pl__meta{margin-top:14px;display:flex;justify-content:space-between;}

.grain{
  /* the drift below is only ±3%, so -12% covers it. At -60% this layer was
     220%x220% of the viewport — ~4.8x the screen area held as a live
     composited texture, which is real GPU cost for a noise overlay. */
  position:fixed;inset:-12%;z-index:var(--z-grain);pointer-events:none;opacity:.045;
  will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 5s steps(5) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,2%)}100%{transform:translate(0,0)}
}

.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:var(--z-nav);
  background:var(--signal);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;box-shadow:0 0 14px var(--signal-glow);
}

.cursor{position:fixed;top:0;left:0;z-index:var(--z-cursor);pointer-events:none;}
.cursor__ring,.cursor__dot,.cursor__label{position:fixed;top:0;left:0;}
.cursor__ring{
  width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid var(--line-2);
  border-radius:var(--r-round);transition:width .3s var(--e-out),height .3s var(--e-out),
    margin .3s var(--e-out),border-color .3s,background .3s,opacity .25s;
}
.cursor__dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:var(--r-round);background:var(--signal);transition:opacity .25s;}
.cursor.is-active .cursor__ring{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:var(--signal);background:rgba(255,165,31,.1);}
.cursor.is-down .cursor__ring{width:28px;height:28px;margin:-14px 0 0 -14px;}
.cursor.is-out .cursor__ring,.cursor.is-out .cursor__dot{opacity:0;}
.cursor__label{
  font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal-ink);background:var(--signal);padding:5px 9px;border-radius:var(--r-pill);
  transform-origin:0 0;margin:14px 0 0 14px;opacity:0;transition:opacity .22s;white-space:nowrap;
}
.cursor.is-labelled .cursor__label{opacity:1;}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor [data-cursor]{cursor:none;}

/* chapter HUD */
.hud{
  position:fixed;right:calc(var(--pad) * .6);top:50%;transform:translateY(-50%);
  z-index:var(--z-hud);display:flex;flex-direction:column;gap:14px;
  mix-blend-mode:normal;
}
.hud a{display:flex;align-items:center;gap:9px;justify-content:flex-end;}
.hud i{
  font-family:var(--f-mono);font-style:normal;font-size:var(--fs-2xs);color:var(--faint);
  opacity:0;transform:translateX(6px);transition:all .35s var(--e-out);letter-spacing:.1em;
}
.hud b{display:block;width:16px;height:1px;background:var(--line-2);transition:all .35s var(--e-out);}
.hud a:hover i,.hud a.is-on i{opacity:1;transform:none;color:var(--signal);}
.hud a:hover b,.hud a.is-on b{width:30px;background:var(--signal);}
@media (max-width:1100px){.hud{display:none;}}

/* -- 07 nav + menu -------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--pad);
  transition:transform .5s var(--e-out),background .4s;
}
/* A blurred backdrop on a fixed bar re-blurs the moving footage behind it on
   every scrolled frame — the single most expensive thing on the page. A solid
   gradient reads the same at this opacity and costs nothing. */
.nav.is-solid{
  background:linear-gradient(180deg,rgb(var(--void-rgb) / .94),rgb(var(--void-rgb) / .78));
  border-bottom:1px solid var(--line);
}
.nav.is-hidden{transform:translateY(-102%);}
.brand{display:flex;align-items:center;gap:10px;}
/* the supplied wordmark is white-on-transparent, which suits the dark shell */
.brand img{height:clamp(30px,3.6vw,44px);width:auto;display:block;}
.brand i{width:7px;height:7px;background:var(--signal);border-radius:var(--r-round);font-style:normal;flex:none;}
.nav__right{display:flex;align-items:center;gap:clamp(12px,2vw,26px);}
.nav__link{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);transition:color .3s;}
.nav__link:hover{color:var(--text);}

.btn{
  display:inline-flex;align-items:center;gap:10px;position:relative;
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  padding:12px 20px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  color:var(--text);overflow:hidden;transition:color .35s var(--e-out),border-color .35s;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--signal);z-index:-1;
  transform:translateY(101%);transition:transform .45s var(--e-out);
}
.btn:hover{color:var(--signal-ink);border-color:var(--signal);}
.btn:hover::before{transform:none;}
.btn--solid{background:var(--signal);color:var(--signal-ink);border-color:var(--signal);}
.btn--solid::before{background:#fff;}
.btn--lg{padding:18px 30px;font-size:var(--fs-sm);}
.btn__dot{width:6px;height:6px;border-radius:var(--r-round);background:currentColor;}

.burger{display:flex;align-items:center;gap:10px;padding:10px 4px;}
.burger__lines{width:22px;height:10px;position:relative;}
.burger__lines span{position:absolute;left:0;width:100%;height:1.5px;background:currentColor;transition:transform .45s var(--e-io),opacity .3s;}
.burger__lines span:nth-child(1){top:0;}
.burger__lines span:nth-child(2){bottom:0;}
body.menu-open .burger__lines span:nth-child(1){transform:translateY(4.25px) rotate(45deg);}
body.menu-open .burger__lines span:nth-child(2){transform:translateY(-4.25px) rotate(-45deg);}
.burger__txt{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;}
@media (max-width:560px){.burger__txt{display:none;}}

.menu{
  position:fixed;inset:0;z-index:var(--z-menu);background:var(--void);
  clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--e-io);
  display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 4vh) var(--pad) 5vh;
  visibility:hidden;
}
.menu.is-open{clip-path:inset(0 0 0% 0);visibility:visible;}
.menu__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1s var(--e-out) .12s;}
.menu.is-open .menu__canvas{opacity:.75;}
.menu__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgb(var(--void-rgb) / .94) 0%,rgb(var(--void-rgb) / .72) 42%,rgb(var(--void-rgb) / .24) 78%,rgb(var(--void-rgb) / .5) 100%),
             linear-gradient(180deg,rgb(var(--void-rgb) / .6) 0%,transparent 30%,rgb(var(--void-rgb) / .8) 100%);
}
.menu__inner{position:relative;z-index:2;width:min(var(--shell),100%);margin-inline:auto;}
.menu__list{list-style:none;margin:0;padding:0;}
.menu__list li{overflow:hidden;}
/* The reveal is CSS-owned on purpose: it is pure open/closed state, so it must
   not depend on a JS tween's clock to end up in the right place. */
.menu__list a{
  display:flex;align-items:baseline;gap:clamp(12px,2vw,28px);
  font-variation-settings:"wdth" 118,"wght" 800;text-transform:uppercase;
  font-size:clamp(2.4rem,9.5vw,7.5rem);line-height:1.02;letter-spacing:-.02em;
  transform:translateY(105%);
  transition:transform .95s var(--e-out),color .35s var(--e-out);
}
.menu.is-open .menu__list a{transform:none;}
.menu.is-open .menu__list li:nth-child(1) a{transition-delay:.14s;}
.menu.is-open .menu__list li:nth-child(2) a{transition-delay:.21s;}
.menu.is-open .menu__list li:nth-child(3) a{transition-delay:.28s;}
.menu.is-open .menu__list li:nth-child(4) a{transition-delay:.35s;}
.menu__list a em{font-family:var(--f-mono);font-style:normal;font-size:var(--fs-xs);color:var(--faint);letter-spacing:.2em;font-variation-settings:normal;}
.menu__list a:hover{color:var(--signal);}
.menu__foot{
  position:relative;z-index:2;width:min(var(--shell),100%);margin:6vh auto 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;
  border-top:1px solid var(--line);padding-top:22px;opacity:0;transition:opacity .6s var(--e-out) .45s;
}
.menu.is-open .menu__foot{opacity:1;}
.menu__foot h4{margin:0 0 8px;}
.menu__foot p,.menu__foot a{margin:0;color:var(--text);font-size:var(--fs-base);}
.menu__foot a:hover{color:var(--signal);}

/* -- 08 hero -------------------------------------------------------------- */
.hero{height:var(--sec-md);}
.hero__content{flex-direction:column;justify-content:center;padding-inline:var(--pad);}
.hero__kicker{display:flex;align-items:center;gap:14px;margin-bottom:clamp(14px,2vh,26px);}
.hero__kicker b{display:block;width:clamp(28px,5vw,64px);height:1px;background:var(--signal);}
.hero__title{width:min(var(--shell),100%);margin-inline:auto;}
.hero__title .l2{display:block;padding-left:.12em;}
.hero__meta{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(20px,4vh,44px);z-index:4;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
}
.hero__lede{max-width:34ch;}
.scrollcue{display:flex;flex-direction:column;align-items:center;gap:10px;}
.scrollcue b{display:block;width:1px;height:52px;background:linear-gradient(var(--signal),transparent);
  transform-origin:50% 0;animation:cue 1.9s var(--e-io) infinite;}
@keyframes cue{0%{transform:scaleY(.2);opacity:.3}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);opacity:.3}}
@media (max-width:860px){.hero__meta{flex-direction:column;align-items:flex-start;} .scrollcue{display:none;}}

/* -- 09 marquee ----------------------------------------------------------- */
.marquee{
  position:relative;z-index:var(--z-content);overflow:hidden;background:var(--void);
  border-block:1px solid var(--line);padding:clamp(14px,2vw,22px) 0;
}
.marquee__track{display:flex;width:max-content;will-change:transform;}
.marquee__track span{
  display:flex;align-items:center;gap:clamp(20px,3vw,44px);padding-right:clamp(20px,3vw,44px);
  font-variation-settings:"wdth" 112,"wght" 700;text-transform:uppercase;
  font-size:clamp(1.1rem,2.4vw,2rem);letter-spacing:-.01em;white-space:nowrap;color:var(--text);
}
.marquee__track i{width:7px;height:7px;background:var(--signal);border-radius:var(--r-round);flex:none;}

/* -- 10 manifesto --------------------------------------------------------- */
.manifesto{height:var(--sec-sm);}
.manifesto__content{padding-inline:var(--pad);}
.manifesto__grid{
  width:min(var(--shell),100%);margin-inline:auto;display:grid;
  grid-template-columns:1fr;gap:clamp(22px,4vh,42px);
}
.manifesto__line{
  font-variation-settings:"wdth" 112,"wght" 700;text-transform:uppercase;
  font-size:clamp(1.5rem,4.6vw,3.9rem);line-height:1.06;letter-spacing:-.015em;margin:0;
  max-width:20ch;
}
/* .18 made the un-lit half of the line effectively invisible over footage;
   .32 still reads clearly as "not yet lit" but stays legible on arrival */
.manifesto__line .word__i{opacity:.32;transition:opacity .45s var(--e-out);}
.manifesto__line .word__i.on{opacity:1;}
/* words in the manifesto wrap normally — masking would clip descenders */
.manifesto__line .word{overflow:visible;}
.manifesto__line em{font-style:normal;color:var(--signal);}
.manifesto__aside{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;
  border-top:1px solid var(--line);padding-top:20px;max-width:760px;
}

/* -- 11 services ---------------------------------------------------------- */
.services{height:var(--sec-lg);}
.services__content{align-items:stretch;padding:calc(var(--nav-h) + 4vh) var(--pad) 5vh;}
.services__grid{
  width:min(var(--shell),100%);margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(20px,4vw,64px);
  align-content:center;height:100%;
  /* 'safe' keeps overflow out of the fixed nav if content ever exceeds the stage */
  align-content:safe center;
}
.services__intro{align-self:start;padding-top:2vh;}
.services__intro h2{margin:14px 0 18px;}
.services__count{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--dim);letter-spacing:.14em;}
.services__count b{color:var(--signal);font-size:2.4rem;font-variant-numeric:tabular-nums;display:block;line-height:1;margin-bottom:4px;}
.services__list{list-style:none;margin:0;padding:0;align-self:center;width:100%;}
.svc{
  position:relative;border-top:1px solid var(--line);opacity:0;
  transform:translateY(18px);transition:opacity .5s var(--e-out),transform .5s var(--e-out);
}
.svc:last-child{border-bottom:1px solid var(--line);}
.svc.is-in{opacity:1;transform:none;}
.svc__btn{
  width:100%;display:flex;align-items:center;gap:clamp(12px,2vw,24px);
  /* vh-based so all ten rows fit any viewport height without scrolling */
  padding:clamp(5px,1.15vh,17px) 0;text-align:left;position:relative;
}
.svc__i{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--faint);width:26px;flex:none;transition:color .3s;}
.svc__n{
  flex:1;font-variation-settings:"wdth" 114,"wght" 700;text-transform:uppercase;
  font-size:clamp(1rem,3.1vh,2.15rem);line-height:1.04;letter-spacing:-.012em;
  color:var(--text);transition:color .35s var(--e-out),transform .45s var(--e-out);
}
.svc__go{
  /* must scale with the viewport too — a fixed 38px circle silently becomes
     the row's min-height and pushes the ten rows past the stage */
  flex:none;width:clamp(26px,4.4vh,38px);height:clamp(26px,4.4vh,38px);
  border:1px solid var(--line-2);border-radius:var(--r-round);
  display:grid;place-items:center;opacity:0;transform:scale(.6);
  transition:all .4s var(--e-out);
}
.svc__go svg{width:12px;height:12px;fill:var(--signal-ink);}
.svc.is-on .svc__i{color:var(--signal);}
.svc.is-on .svc__n{color:var(--signal);transform:translateX(10px);}
.svc.is-on .svc__go{opacity:1;transform:none;background:var(--signal);border-color:var(--signal);}
@media (hover:hover){
  .svc__btn:hover .svc__n{color:var(--signal);transform:translateX(10px);}
  .svc__btn:hover .svc__go{opacity:1;transform:none;background:var(--signal);border-color:var(--signal);}
}
@media (max-width:900px){
  /* the rows stack here, so the list needs a longer run to reveal through */
  :root{--sec-lg:330svh;}
  .services__grid{grid-template-columns:1fr;gap:12px;align-content:center;}
  .services__intro h2{display:none;}
  .services__intro{padding-top:0;}
  /* compact the index so ten rows still clear the fixed nav */
  .services__count b{display:inline;font-size:1.35rem;margin-right:8px;}
  .services__count{display:flex;align-items:baseline;gap:2px;}
}

/* -- 12 process (horizontal) ---------------------------------------------- */
.process{position:relative;}
/* GSAP pins this section, so the stage must not also try to stick */
.process .stage{position:relative;}
.process__track{display:flex;height:100svh;align-items:center;will-change:transform;}
.process__head{
  flex:none;width:min(46vw,560px);padding-inline:var(--pad);
}
.step{
  flex:none;width:min(78vw,420px);margin-right:clamp(18px,3vw,44px);
  border:1px solid var(--line);
  /* No backdrop-filter here: inside a transformed track it makes mobile GPUs
     blit the layer twice, which shows up as ghosted/doubled text. A solid
     panel is cheaper and renders identically everywhere. */
  background:rgb(var(--ink-rgb) / .9);
  padding:clamp(20px,2.4vw,34px);border-radius:var(--r-xs);position:relative;overflow:hidden;
}
.step::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--signal);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--e-out);
}
.step.is-in::after{transform:none;}
.step__i{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--signal);letter-spacing:.2em;}
.step h3{margin:16px 0 12px;font-variation-settings:"wdth" 114,"wght" 700;text-transform:uppercase;
  font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.02;letter-spacing:-.01em;}
.step p{margin:0;color:var(--dim);font-size:var(--fs-base);line-height:1.62;}
@media (max-width:900px){.process__head{width:86vw;}}

/* -- 13 numbers ----------------------------------------------------------- */
.numbers{padding:clamp(70px,11vh,150px) 0;border-top:1px solid var(--line);background:var(--ink);}
.numbers__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);}
.stat{background:var(--ink);padding:clamp(22px,3vw,40px);}
.stat b{
  display:block;font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(2.6rem,6vw,5rem);line-height:.9;letter-spacing:-.02em;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.stat b i{font-style:normal;color:var(--signal);}
.stat span{display:block;margin-top:12px;}

/* -- 14 booking ----------------------------------------------------------- */
.booking{height:var(--sec-sm);}
.booking__content{justify-content:center;text-align:center;padding-inline:var(--pad);}
.booking__inner{width:min(var(--shell),100%);margin-inline:auto;}
.booking__title{margin:16px 0 22px;}
.booking__lede{margin:0 auto 34px;text-align:center;}
.wa{
  display:inline-flex;align-items:center;gap:13px;background:var(--wa);color:#04120a;
  padding:19px 32px;border-radius:var(--r-pill);font-family:var(--f-mono);font-size:var(--fs-sm);
  letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  box-shadow:0 18px 60px rgba(37,211,102,.26);transition:box-shadow .4s,filter .3s;
}
.wa:hover{filter:brightness(1.06);box-shadow:0 24px 74px rgba(37,211,102,.4);}
.wa svg{width:22px;height:22px;fill:currentColor;}
.booking__meta{
  margin-top:38px;display:flex;gap:clamp(18px,4vw,60px);justify-content:center;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:22px;max-width:820px;margin-inline:auto;
}
.booking__meta div{text-align:left;}
.booking__meta b{display:block;color:var(--text);font-size:var(--fs-base);margin-top:5px;font-variation-settings:"wdth" 100,"wght" 600;}

/* -- 15 footer ------------------------------------------------------------ */
.footer{position:relative;z-index:var(--z-content);background:var(--void);border-top:1px solid var(--line);}
.footer__mark{overflow:hidden;padding:clamp(20px,4vw,44px) 0 0;}
.footer__mark h2{
  font-variation-settings:"wdth" 125,"wght" 800;text-transform:uppercase;
  font-size:clamp(3.4rem,19vw,17rem);line-height:.8;letter-spacing:-.03em;margin:0;
  text-align:center;color:var(--panel-2);
}
.footer__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px;
  padding:clamp(30px,5vw,60px) 0;
}
.footer__grid h4{margin:0 0 14px;}
.footer__grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer__grid a{color:var(--dim);transition:color .3s;font-size:var(--fs-base);}
.footer__grid a:hover{color:var(--signal);}
.footer__base{
  border-top:1px solid var(--line);padding:20px 0 30px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;
}

/* -- 16 work page --------------------------------------------------------- */
.whero{position:relative;height:88svh;min-height:520px;overflow:hidden;display:flex;align-items:flex-end;}
.whero__inner{position:relative;z-index:3;padding:0 var(--pad) clamp(36px,7vh,88px);width:100%;}
.whero__row{width:min(var(--shell),100%);margin-inline:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;}

.gallery{padding:clamp(46px,7vw,96px) 0 clamp(70px,11vw,150px);}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,48px);}
.chip{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  padding:10px 18px;border:1px solid var(--line-2);border-radius:var(--r-pill);color:var(--dim);
  transition:all .3s var(--e-out);
}
.chip:hover{color:var(--text);border-color:var(--text);}
.chip.is-on{background:var(--signal);border-color:var(--signal);color:var(--signal-ink);}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,20px);}
.card{
  position:relative;grid-column:span 4;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-xs);
  background:var(--panel);border:1px solid var(--line);
  transition:border-color .4s,transform .6s var(--e-out);
}
.card--wide{grid-column:span 8;aspect-ratio:16/10;}
.card--tall{grid-column:span 4;aspect-ratio:3/5;}
.card:hover{border-color:var(--line-2);}
.card__ph{
  position:absolute;inset:0;display:grid;place-items:center;
  transition:opacity .5s var(--e-out);
  background:radial-gradient(120% 90% at 30% 12%,rgba(255,165,31,.08),transparent 58%),
    repeating-linear-gradient(45deg,#101014 0 13px,#15151a 13px 26px);
}
/* poster frame shows through until the clip is ready */
.card__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;}
.card__ph svg{width:34px;height:34px;fill:none;stroke:var(--faint);stroke-width:1.2;}
.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.card__meta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,1.6vw,22px);
  background:linear-gradient(transparent,rgb(var(--void-rgb) / .9));
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
}
.card__t{font-variation-settings:"wdth" 114,"wght" 700;text-transform:uppercase;font-size:1.05rem;letter-spacing:-.005em;}
.card__c{font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--signal);}
@media (max-width:900px){
  .card,.card--wide,.card--tall{grid-column:span 6;aspect-ratio:4/5;}
}
@media (max-width:560px){
  .card,.card--wide,.card--tall{grid-column:span 12;aspect-ratio:16/11;}
}

.endcta{position:relative;height:var(--sec-xs);}

/* -- 17 modal ------------------------------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:var(--z-modal);display:none;place-items:center;
  padding:var(--pad);background:rgb(var(--void-rgb) / .86);backdrop-filter:blur(10px);opacity:0;
  transition:opacity .35s var(--e-out);
}
.modal.is-open{display:grid;opacity:1;}
.modal__panel{
  width:min(940px,100%);background:var(--panel);border:1px solid var(--line-2);
  border-radius:var(--r-xs);overflow:hidden;transform:translateY(22px) scale(.98);
  transition:transform .5s var(--e-out);box-shadow:0 50px 130px rgba(0,0,0,.6);
}
.modal.is-open .modal__panel{transform:none;}
.modal__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);}
.modal__t{font-variation-settings:"wdth" 116,"wght" 700;text-transform:uppercase;font-size:1.32rem;letter-spacing:-.01em;}
.modal__x{width:40px;height:40px;border:1px solid var(--line-2);border-radius:var(--r-round);display:grid;place-items:center;transition:all .3s;}
.modal__x:hover{background:var(--signal);color:var(--signal-ink);border-color:var(--signal);transform:rotate(90deg);}
.modal__media{position:relative;aspect-ratio:16/9;background:repeating-linear-gradient(45deg,#101014 0 14px,#15151a 14px 28px);display:grid;place-items:center;}
.modal__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;}
.modal__ph{text-align:center;padding:24px;}
.modal__ph .ring{width:64px;height:64px;border:1px solid var(--line-2);border-radius:var(--r-round);display:grid;place-items:center;margin:0 auto 14px;}
.modal__ph .ring svg{width:20px;height:20px;fill:var(--signal);}
.modal__ph code{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--faint);display:block;margin-top:8px;}
.modal__body{padding:18px 20px 24px;color:var(--dim);font-size:var(--fs-base);max-width:64ch;}

/* page transition curtain */
.curtain{
  position:fixed;inset:0;z-index:var(--z-curtain);background:var(--void);
  transform:scaleY(0);transform-origin:50% 100%;pointer-events:none;
}

/* -- 18 responsive -------------------------------------------------------- */
@media (max-width:860px){
  /* one place to re-pace the whole page on phones */
  :root{--nav-h:64px; --sec-xs:130svh; --sec-sm:150svh; --sec-md:185svh;}
  /* Phones composite a full-screen layer per scrolled frame. The grain is an
     animated one and the column rules are a decorative one — neither is worth
     that budget on a handset. */
  .grain,.rules{display:none;}
  .lede{font-size:var(--fs-base);}
  /* the long eyebrow wraps on narrow screens — tighten it so it cannot
     collide with the display type below */
  .hero__kicker{margin-bottom:18px;}
  .hero__kicker .label{font-size:var(--fs-2xs);letter-spacing:.14em;line-height:1.5;}
  .hero__kicker b{width:20px;flex:none;}
  .manifesto__grid,.services__grid,.booking__inner{min-width:0;}
  .manifesto__aside{grid-template-columns:1fr;gap:14px;}
}
@media (max-width:560px){
  /* expanded display type is wide — long names like "Paint Protection Film"
     wrap to three lines and blow the ten rows past the stage. Drop to normal
     width and size off vh so every row stays on one line. */
  .svc__n{font-size:clamp(.78rem,2.1vh,1.15rem);font-variation-settings:"wdth" 100,"wght" 700;}
  .svc__btn{padding:clamp(4px,.95vh,11px) 0;gap:10px;}
  .svc__i{width:20px;font-size:var(--fs-2xs);}
  .svc__go{width:24px;height:24px;}
  .svc__go svg{width:9px;height:9px;}
}
@media (max-width:420px){
  .hero__kicker .label{font-size:var(--fs-2xs);}
}

/* -- 19 reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .grain{animation:none;}
  .word__i{transform:none !important;opacity:1 !important;}
  .svc{opacity:1 !important;transform:none !important;}
  .hero,.manifesto,.services,.booking,.endcta{height:auto;}
  .stage{position:relative;height:auto;min-height:100svh;}
  .process__track{flex-wrap:wrap;height:auto;}
  .step{width:100%;margin:0 0 14px;}
}