@font-face{font-family:"Fluro";src:url("../fonts/Fluro-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Fluro";src:url("../fonts/Fluro-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fluro Outline";src:url("../fonts/FluroOutline-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Hedvig Letters Serif";src:url("../fonts/HedvigLettersSerif-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Rethink Sans";src:url("../fonts/RethinkSans-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("../fonts/ChivoMono-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Chivo Mono";src:url("../fonts/ChivoMono-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+FEFF,U+FFFD}

/* Layout: full-bleed chapters on the brand grounds (crème about 60%, off-black and cyan about 30%, accents about 10%), each one ground plus one accent. 12-column grid, 80px outer margin and 40px gutter at 1920. Fluro Bold carries every title at maximum size, Helvetica Neue the reading, strings of Martian Mono the HUD. */
:root{
  --creme:#EFE7D4; --creme-2:#E2D9C3; --hair:#C9BFA6;
  --black:#111311; --black-80:#3D3F3D; --black-60:#696A69; --black-40:#959695; --black-20:#C1C2C1;
  --green:#214E42; --green-80:#4A6F65; --green-60:#738F88;
  --cyan:#00DA83; --cyan-80:#00AE69; --cyan-20:#002C1A;
  --pink:#D3196A; --pink-80:#A91455; --pink-text:#BE1560; --pink-hi:#F2639B; --pink-20:#2A0515;
  --acc:var(--cyan); --acc-text:var(--cyan); --ink:var(--creme); --muted:var(--black-40); --rule:var(--black-80);
  --display:"Fluro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --outline:"Fluro Outline","Fluro",sans-serif;
  --sans:"Chivo Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --mono:"Chivo Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --m:clamp(16px,4.17vw,107px);
  --gl:max(var(--m),env(safe-area-inset-left,0px));
  --gr:max(var(--m),env(safe-area-inset-right,0px));
  --g:clamp(16px,2.08vw,53px);
  --hh:clamp(64px,3.34vw,86px);
  --ease:cubic-bezier(.7,0,.2,1);
  --out:cubic-bezier(.16,1,.3,1);
  --r-md:24px; --r-lg:48px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-x:clip;background:var(--black);-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--creme);color:var(--black);font-family:var(--sans);font-size:clamp(15px,.8vw,20px);line-height:1.5;letter-spacing:-.01em;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:150;background:var(--band,var(--black))}
::selection{background:var(--cyan);color:var(--black)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;text-align:inherit;letter-spacing:inherit;text-transform:inherit}
img,video{max-width:100%;display:block}
p,h1,h2,h3,h4,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
input,textarea,select{font:inherit}
:focus-visible{outline:2px solid var(--acc,var(--cyan));outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:var(--gl);top:-80px;z-index:300;background:var(--cyan);color:var(--black);padding:12px 16px;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;border-radius:999px}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}

/* ---------- grounds: one ground, one accent ---------- */
.g-dark{background:var(--black);color:var(--creme);--acc:var(--cyan);--acc-text:var(--cyan);--ink:var(--creme);--muted:var(--black-40);--rule:var(--black-80)}
.g-light{background:var(--creme);color:var(--black);--acc:var(--pink-80);--acc-text:var(--pink-text);--ink:var(--black);--muted:var(--green);--rule:var(--hair)}
.g-cyan{background:var(--cyan);color:var(--black);--acc:var(--green);--acc-text:var(--green);--ink:var(--black);--muted:var(--green);--rule:var(--green)}
.g-green{background:var(--green);color:var(--creme);--acc:var(--cyan);--acc-text:var(--cyan);--ink:var(--creme);--muted:var(--creme-2);--rule:var(--green-80)}
.g-pink{background:var(--pink);color:var(--black);--acc:var(--creme);--acc-text:var(--black);--ink:var(--black);--muted:var(--black);--rule:var(--black)}
.g-lab{background:var(--black);color:var(--creme);--acc:var(--pink);--acc-text:var(--pink-hi);--ink:var(--creme);--muted:var(--black-40);--rule:var(--black-80)}

/* ---------- type ---------- */
.wrap{padding-left:var(--gl);padding-right:var(--gr)}
.mono{font-family:var(--mono);font-weight:400;font-size:clamp(11px,.6vw,15px);letter-spacing:.06em;text-transform:uppercase;line-height:1.6}
.mono b,.mono strong{font-weight:600}
.hd{font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:.86;text-transform:uppercase}
.hd--s{text-transform:none}
.out{font-family:var(--outline);font-weight:700}
.sub{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.15;font-size:clamp(22px,2vw,51px)}
.lede{font-size:clamp(16px,1.3vw,33px);line-height:1.38;letter-spacing:-.025em}
.lede + .lede{margin-top:.9em}
.body{font-size:clamp(14px,1vw,26px);line-height:1.55}
.body p + p{margin-top:1em}
.muted{color:var(--muted)}
.acc{color:var(--acc-text)}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln > span{display:inline-block}
.fit .ln > span{white-space:nowrap}
.fit{display:block;white-space:nowrap}
.fit .ln{line-height:.84}
.label{display:inline-flex;align-items:center;gap:10px}
.label::before{content:"";width:8px;height:8px;background:currentColor;flex:none}
.tag{display:inline-flex;align-items:center;height:28px;padding-inline:11px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;white-space:nowrap}

/* character entrances: GSAP SplitText takes over the big fitted titles */
.fit .ln{perspective:1000px}

/* reveals (JS adds .js) */
.js [data-reveal="stagger"] > *{opacity:0;transform:translateY(30px);transition:opacity .9s var(--out) calc(var(--i,0) * 70ms + var(--d,0ms)),transform 1.2s var(--out) calc(var(--i,0) * 70ms + var(--d,0ms))}
.js [data-reveal="stagger"].in > *{opacity:1;transform:none}
.js [data-reveal="rule"]{transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) var(--d,0ms)}
.js [data-reveal="rule"].in{transform:none}

/* shared video fade: a still sits underneath until the loop is actually playing */
[data-vwrap] video{opacity:0;transition:opacity .6s,transform 1.2s var(--out)}
[data-vwrap].playing video{opacity:1}
.lc,.lc *{text-transform:none!important}

/* ---------- grain ---------- */

@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}

/* ---------- loader ---------- */
.loader__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@keyframes gateIn{from{opacity:0;transform:translateY(16px)}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes logIn{to{opacity:1}}

/* ---------- curtain (page transitions) ---------- */

/* ---------- cursor ---------- */
.cur{position:fixed;left:0;top:0;z-index:250;pointer-events:none;display:none;transform:translate3d(-100px,-100px,0);--cur:var(--cyan);--curInk:var(--black)}
.cur__sq{position:absolute;left:-5px;top:-5px;width:10px;height:10px;background:var(--cur);transition:transform .35s var(--ease),background .25s}
.cur__lbl{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(0);background:var(--cur);color:var(--curInk);padding:11px 15px;border-radius:999px;white-space:nowrap;transition:transform .45s var(--out),background .25s,color .25s;font-weight:600}
.cur.is-label .cur__lbl{transform:translate(-50%,-50%) scale(1)}
.cur.is-label .cur__sq{transform:scale(0)}
.cur.is-link .cur__sq{transform:scale(2.4)}
.cur.is-down .cur__sq{transform:scale(.6) rotate(45deg)}
.cur.is-text .cur__sq{transform:scaleX(.25) scaleY(2.4)}
@media (hover:hover) and (pointer:fine){
  .has-cur .cur{display:block}
  .has-cur, .has-cur a, .has-cur button, .has-cur [role="slider"], .has-cur label, .has-cur [data-cursor]{cursor:none}
  .has-cur input,.has-cur textarea,.has-cur select{cursor:text}
}

/* ---------- scroll progress ---------- */
.prog{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:2px;z-index:125;pointer-events:none}
.prog i{display:block;height:100%;background:var(--pbar,var(--cyan));transform-origin:left;transform:scaleX(0)}
.prog[data-theme="light"] i{background:var(--pink-80)}
.prog[data-theme="cyan"] i{background:var(--black)}

/* ---------- header ---------- */
.hdr{position:fixed;z-index:120;left:0;right:0;top:0;padding-top:env(safe-area-inset-top,0px);color:var(--hfg,var(--creme));transition:transform .7s var(--ease),color .4s;pointer-events:none}
.hdr > *{pointer-events:auto}
.hdr.away{transform:translateY(-120%)}
.hdr__in{height:var(--hh);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-top:10px}
.hdr__logo{display:inline-flex;align-items:center;gap:10px;justify-self:start;height:44px;padding-inline:0;border-radius:999px;transition:background .4s,padding .5s var(--out)}
.mark{display:block;fill:currentColor;flex:none}
.hdr__nav{display:flex;gap:2px;padding:5px;border-radius:999px;background:var(--hbg,rgba(17,19,17,.6));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .4s}
.hdr__nav a{position:relative;padding:clamp(10px,.52vw,14px) clamp(14px,.73vw,20px);border-radius:999px;color:var(--hnav,var(--creme));transition:background .3s,color .3s;line-height:1}
.hdr__nav a:hover{background:var(--hnav-h,rgba(239,231,212,.12))}
.hdr__nav a[aria-current="page"]{background:var(--hnav-on,var(--creme));color:var(--hnav-on-fg,var(--black))}
.hdr__right{justify-self:end;display:flex;align-items:center;gap:10px}
.hdr__time{font-variant-numeric:tabular-nums;white-space:nowrap}
.hdr__sound{display:inline-flex;align-items:center;gap:8px;height:44px;padding-inline:4px;white-space:nowrap}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.eq i{display:block;width:2px;height:3px;background:currentColor}
.on .eq i{animation:eq .8s ease-in-out infinite alternate}
.on .eq i:nth-child(2){animation-delay:-.3s}.on .eq i:nth-child(3){animation-delay:-.55s}
@keyframes eq{to{height:12px}}
.hdr__cta{background:var(--hcta,var(--creme));color:var(--hcta-fg,var(--black))}
.hdr__cta::before{background:var(--hcta-h,var(--pink))}
.hdr__cta:hover,.hdr__cta:focus-visible{color:var(--hcta-hfg,var(--black))}
.hdr__menu{display:none;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:999px;background:var(--hbg,rgba(17,19,17,.6));color:var(--hnav,var(--creme));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hdr__menu .bars{display:grid;gap:4px}
.hdr__menu i{display:block;width:16px;height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
.menu-open .hdr__menu .bars i:first-child{transform:translateY(2.75px) rotate(45deg)}
.menu-open .hdr__menu .bars i:last-child{transform:translateY(-2.75px) rotate(-45deg)}
.hdr[data-theme="light"]{--hfg:var(--black);--hbg:rgba(239,231,212,.72);--hnav:var(--black);--hnav-h:rgba(17,19,17,.08);--hnav-on:var(--black);--hnav-on-fg:var(--creme);--hcta:var(--black);--hcta-fg:var(--creme);--hcta-h:var(--pink-80);--hcta-hfg:var(--creme)}
.hdr[data-theme="cyan"]{--hfg:var(--black);--hbg:rgba(17,19,17,.9);--hnav:var(--creme);--hcta:var(--black);--hcta-fg:var(--creme);--hcta-h:var(--creme);--hcta-hfg:var(--black)}
.hdr[data-theme="green"]{--hbg:rgba(17,19,17,.5)}
.hdr[data-theme="pink"]{--hfg:var(--black);--hbg:rgba(17,19,17,.88);--hnav:var(--creme);--hcta:var(--black);--hcta-fg:var(--creme);--hcta-h:var(--creme);--hcta-hfg:var(--black)}
.menu-open .hdr{--hfg:var(--creme);--hbg:rgba(239,231,212,.1);--hnav:var(--creme);--hcta:var(--cyan);--hcta-fg:var(--black);transform:none}
@media (max-width:1100px){.hdr__time{display:none}}
@media (max-width:980px){.hdr .hdr__nav,.hdr .hdr__cta,.hdr .hdr__sound{display:none}.hdr__menu{display:inline-flex}.hdr__in{grid-template-columns:1fr auto}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:clamp(52px,2.7vw,70px);padding-inline:clamp(24px,1.25vw,34px);border-radius:999px;font:600 clamp(11px,.6vw,15px)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;overflow:hidden;isolation:isolate;white-space:nowrap;transition:color .45s var(--out)}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--out);z-index:-1}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn i{font-style:normal;display:inline-block;transition:transform .55s var(--out)}
.btn:hover i{transform:translateX(4px)}
.btn--sm{height:clamp(44px,2.3vw,60px);padding-inline:clamp(18px,.94vw,26px)}
.btn--lg{height:clamp(60px,6vw,154px);padding-inline:clamp(28px,3vw,77px);font:700 clamp(18px,1.7vw,44px)/1 var(--display);letter-spacing:-.03em;text-transform:uppercase}
.btn--cyan{background:var(--cyan);color:var(--black)}.btn--cyan::before{background:var(--creme)}
.btn--dark{background:var(--black);color:var(--creme)}.btn--dark::before{background:var(--creme-2)}
.g-pink .btn--dark::before{background:var(--creme)}
.g-pink .btn--line:hover,.g-pink .btn--line:focus-visible{color:var(--pink)}
.g-pink .btn--line::before{background:var(--black)}.btn--dark:hover,.btn--dark:focus-visible{color:var(--black)}
.g-cyan .btn--dark::before{background:var(--creme)}
.btn--creme{background:var(--creme);color:var(--black)}.btn--creme::before{background:var(--acc)}
.g-lab .btn--creme::before{background:var(--creme-2)}
.btn--line{box-shadow:inset 0 0 0 1px currentColor}.btn--line::before{background:var(--ink)}
.g-dark .btn--line:hover,.g-dark .btn--line:focus-visible,.g-green .btn--line:hover,.g-lab .btn--line:hover,.g-lab .btn--line:focus-visible{color:var(--black)}
.g-light .btn--line:hover,.g-light .btn--line:focus-visible,.g-cyan .btn--line:hover,.g-cyan .btn--line:focus-visible{color:var(--creme)}
.btn--pink{background:var(--pink-80);color:var(--creme)}.btn--pink::before{background:var(--black)}
.ulink{position:relative;display:inline-flex;align-items:center;gap:10px;padding-bottom:5px}
.ulink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .6s var(--out)}
.ulink:hover::after{transform:scaleX(0)}
.ulink i{font-style:normal;transition:transform .5s var(--out)}
.ulink:hover i{transform:translate(3px,-3px)}

/* ---------- roll text ---------- */
.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;line-height:1.1}
.roll__a,.roll__b{display:block;white-space:nowrap}
.roll__b{position:absolute;left:0;top:100%}
.roll .c{display:inline-block;transition:transform .55s var(--out) calc(var(--i) * 14ms)}
.roll-host:hover .roll .c,.roll-host:focus-visible .roll .c{transform:translateY(-100%)}

/* ---------- menu (narrow screens) ---------- */
.menu{position:fixed;inset:0;z-index:110;background:var(--black);color:var(--creme);display:grid;grid-template-rows:minmax(0,1fr) auto;padding-top:calc(env(safe-area-inset-top,0px) + var(--hh) + 34px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 22px);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease),visibility 0s .8s;overflow-y:auto}
.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .8s var(--ease),visibility 0s}
.menu__list{align-self:center;display:grid}
.menu__list li{border-top:1px solid var(--black-80)}
.menu__list li:last-child{border-bottom:1px solid var(--black-80)}
.menu__list a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:baseline;gap:12px;padding-block:8px}
.menu__list .mono{color:var(--cyan)}
.menu__list .note{color:var(--black-40);text-align:right}
.menu__list .hd{font-size:clamp(34px,min(12.4vw,9.2vh),300px);display:block;overflow:hidden;white-space:nowrap}
@media (max-width:1100px){.menu__list .note{display:none}.menu__list a{grid-template-columns:44px minmax(0,1fr)}}
.menu__list .hd > span{display:inline-block;transform:translateY(108%);transition:transform .9s var(--out)}
.menu-open .menu__list .hd > span{transform:none;transition-delay:calc(.18s + var(--i) * 60ms)}
.menu__list a[aria-current="page"] .hd{color:var(--cyan)}
.menu__foot{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--black-40);padding-top:22px}
.menu__foot a{color:var(--creme)}
@media (max-width:420px){.menu__list .note{display:none}.menu__list a{grid-template-columns:36px minmax(0,1fr)}}

/* ---------- section scaffolding ---------- */
.sec{position:relative}
.pad{padding-block:clamp(96px,10vw,256px)}
.pad-s{padding-block:clamp(64px,7vw,179px)}
.head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:clamp(32px,4vw,102px)}
.head > :first-child{color:var(--acc-text)}
.head__r{text-align:right;color:var(--muted)}
.chap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:var(--g);align-items:end;margin-bottom:clamp(36px,4.5vw,115px)}
.chap__t{font-size:clamp(56px,9vw,230px)}
.chap__d{justify-self:end;max-width:44ch;display:grid;gap:16px;justify-items:start}
@media (max-width:860px){.chap{grid-template-columns:1fr}.chap__d{justify-self:start}}

/* ---------- home: hero (pinned eclipse that opens into the reel) ---------- */
.hero{position:relative;height:280vh;background:var(--black);color:var(--creme);--acc:var(--pink);--acc-text:var(--pink)}
.hero__sticky{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden}
.hero__media{position:absolute;inset:0;overflow:hidden;background:var(--black)}
.hero__cv,.hero__vid,.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero__vid{opacity:0;pointer-events:none}
.hero[data-mode="gl"] .hero__poster{opacity:0}
.hero[data-mode="video"] .hero__vid{opacity:1}
.hero[data-mode="video"] .hero__cv,.hero[data-mode="poster"] .hero__cv{display:none}
.hero[data-mode="video"] .hero__poster{opacity:0}
.hero__poster{transition:opacity .8s}
.hero__copy{position:absolute;left:0;right:0;bottom:calc(52px + clamp(18px,2.4vw,61px));display:grid;gap:clamp(18px,2vw,51px);will-change:transform,opacity}
.hero__main{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(24px,4vw,102px)}
.hero__eyebrow{color:var(--pink-hi);max-width:40ch}
.hero__side{width:min(34ch,30vw);display:grid;gap:18px;justify-items:start;padding-bottom:.6em}
.hero__side p:first-child{font-size:clamp(16px,1.15vw,29px);line-height:1.42}
.hero__cta{display:flex;flex-wrap:wrap;gap:8px}
.hero__title{color:var(--creme)}
.hero__title .out{color:var(--pink)}
.hero__bar{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr) minmax(0,1.4fr) auto;gap:16px;padding-block:14px;border-top:1px solid rgba(239,231,212,.16);color:var(--creme-2);font-variant-numeric:tabular-nums}
.hero__bar > :nth-child(2){color:var(--pink)}
.hero__bar > :nth-child(3){text-align:right;color:var(--creme)}
.hero__bar > :last-child{text-align:right;min-width:5ch}
.hero__reel{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding-top:calc(env(safe-area-inset-top,0px) + var(--hh) + 28px);padding-bottom:clamp(20px,3vw,77px);opacity:0;pointer-events:none;color:var(--creme)}
.hero__reeltop{display:flex;justify-content:space-between;gap:16px}
.hero__play{place-self:center;width:clamp(120px,11vw,282px);aspect-ratio:1;border-radius:50%;background:var(--creme);color:var(--black);display:grid;place-items:center;text-align:center;font:600 clamp(11px,.62vw,16px)/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 0 0 var(--pink);transition:transform .6s var(--out),box-shadow .6s var(--out)}
.hero__play:hover{transform:scale(1.08);box-shadow:0 0 0 14px var(--pink)}
.hero__play span{display:grid;gap:8px;justify-items:center}
.hero__play svg{width:20px;height:20px;fill:currentColor}
.hero__reelt{font-size:clamp(40px,7vw,179px)}
.js .hero .ln > span{transform:translateY(112%) rotate(3deg);transform-origin:0 0;transition:transform 1.45s var(--out) calc(var(--i,0) * 110ms + .1s)}
.js .hero.in .ln > span{transform:none}
.js .hero [data-hero-fade]{opacity:0;transform:translateY(18px);transition:opacity 1s var(--out) var(--d,.55s),transform 1.2s var(--out) var(--d,.55s)}
.js .hero.in [data-hero-fade]{opacity:1;transform:none}
@media (max-width:860px){.hero__eyebrow{display:none}.hero{height:240vh}.hero__main{grid-template-columns:minmax(0,1fr)}.hero__side{grid-row:2;width:auto}.hero__bar{grid-template-columns:1fr auto}.hero__bar > :nth-child(2),.hero__bar > :nth-child(3){display:none}.hero__copy{bottom:calc(46px + 16px)}}
@media (max-height:720px) and (min-width:861px){.hero__side p:first-child{display:none}}

/* ---------- crossing bands ---------- */
.bands{position:relative;height:clamp(240px,30vw,768px);overflow:hidden}
.band{position:absolute;left:-10vw;right:-10vw;top:50%;padding-block:clamp(14px,1.4vw,36px);transform:translateY(-50%) rotate(var(--rot));overflow:hidden}
.band--pink{background:var(--pink);color:var(--black);--rot:-4deg;z-index:2}
.band--black{background:var(--black);color:var(--creme);--rot:3.5deg}
.band .ticker__track{display:flex;width:max-content;will-change:transform}
.band .ticker__track > span{display:inline-flex;align-items:center;gap:.32em;padding-right:.32em;white-space:nowrap;font:700 clamp(44px,6.4vw,164px)/.86 var(--display);letter-spacing:-.045em;text-transform:uppercase}
.band .sq{display:inline-block;width:.42em;height:.42em;background:currentColor;transform:translateY(-.04em)}
.band--black .sq{background:var(--pink)}

/* ---------- strings of monotype ---------- */
.strings{margin-top:clamp(40px,5vw,128px);display:grid;gap:6px;overflow:hidden;color:var(--green);font:400 clamp(11px,.7vw,18px)/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.strings div{will-change:transform}
.strings div:nth-child(2){color:var(--pink-text)}
.strings div:nth-child(3){color:var(--black)}

/* ---------- rhythm (pink field, scrubbed reel) ---------- */
.g-pink{background:var(--pink);color:var(--black);--acc:var(--creme);--acc-text:var(--black);--ink:var(--black);--muted:var(--black);--rule:var(--black)}
.rhythm{position:relative;height:320vh}
.rhythm__sticky{position:sticky;top:0;height:100vh;height:100svh;min-height:600px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(14px,2vh,28px);padding-top:calc(env(safe-area-inset-top,0px) + var(--hh) + clamp(14px,3vh,40px));padding-bottom:clamp(16px,3vh,36px);overflow:hidden}
.rhythm__top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--g);align-items:end}
.rhythm__t{font-size:clamp(52px,min(8.6vw,15vh),190px)}
.rhythm__t .ln:last-child > span{color:var(--creme)}
.rhythm__side{display:grid;gap:12px;justify-self:end;max-width:40ch}
.rhythm__stage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--g);align-items:stretch;min-height:0}
.rhythm__screen{position:relative;height:100%;max-height:52vh;aspect-ratio:16/9;max-width:62vw;border-radius:var(--r-md);overflow:hidden;background:var(--black)}
.rhythm__screen img,.rhythm__screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rhythm__screen video{opacity:0;transition:opacity .4s}
.rhythm__screen.ready video{opacity:1}
.rhythm__rec{position:absolute;left:14px;top:12px;display:inline-flex;align-items:center;gap:8px;background:rgba(17,19,17,.6);color:var(--creme);padding:6px 10px;border-radius:999px}
.rhythm__rec i{width:8px;height:8px;border-radius:50%;background:var(--pink);animation:blink 1.2s steps(2) infinite}
.rhythm__stats{display:grid;align-content:space-between;gap:12px;border-left:1px solid var(--black);padding-left:var(--g)}
.rhythm__stats div{display:grid;gap:4px}
.rhythm__stats dd{font-variant-numeric:tabular-nums}
.rhythm__stats dd.hd{font-size:clamp(44px,min(6vw,10vh),130px);letter-spacing:-.05em}
.rhythm__stats dd.mono{font-size:clamp(14px,1.2vw,31px)}
.rhythm__wave{display:block;width:100%;height:clamp(70px,13vh,150px)}
@media (max-width:860px){.rhythm{height:260vh}.rhythm__top{grid-template-columns:1fr}.rhythm__side{justify-self:start}.rhythm__side .lede{font-size:16px}.rhythm__stage{grid-template-columns:1fr;align-content:start}.rhythm__screen{height:auto;width:100%;max-width:none;max-height:none}.rhythm__stats{grid-template-columns:repeat(3,minmax(0,1fr));border-left:0;padding-left:0;border-top:1px solid var(--black);padding-top:10px}.rhythm__stats dd.hd{font-size:clamp(28px,8vw,205px)}}

/* ---------- clients ---------- */
.clients{padding-block:clamp(80px,9vw,230px);overflow:hidden}
.cmarq{overflow:hidden;padding-block:clamp(10px,1.4vw,36px);border-block:1px solid var(--black-80)}
.cmarq .ticker__track{display:flex;width:max-content;will-change:transform}
.cmarq .ticker__track > span{display:inline-flex;align-items:center;gap:.3em;padding-right:.3em;white-space:nowrap;font:700 clamp(64px,11vw,282px)/.84 var(--display);letter-spacing:-.05em;text-transform:uppercase}
.cmarq .sq{display:inline-block;width:.3em;height:.3em;border-radius:50%;background:var(--cyan)}
.clients__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g);margin-top:clamp(28px,3vw,77px)}
.clients__list li{display:grid;gap:6px;border-top:1px solid var(--black-80);padding-top:14px}
.clients__list b{font:700 clamp(22px,1.9vw,48px)/1 var(--display);letter-spacing:-.04em}
.clients__list .mono:last-child{color:var(--black-40)}
@media (max-width:860px){.clients__list{grid-template-columns:1fr 1fr;row-gap:28px}}
.clients-big{display:flex;flex-wrap:wrap;gap:0 clamp(20px,3vw,77px)}
.clients-big li{font:700 clamp(44px,7vw,179px)/.9 var(--display);letter-spacing:-.045em;text-transform:uppercase}
.clients-big li span{color:var(--acc)}

/* ---------- chapter counter + index (home, wide screens) ---------- */

/* ---------- ticker ---------- */
.ticker{position:relative;overflow:hidden;padding-block:clamp(16px,1.6vw,41px) clamp(12px,1.2vw,31px);display:grid;gap:clamp(8px,.8vw,20px)}
.ticker__track{display:flex;width:max-content;will-change:transform}
.ticker__track > span{display:inline-flex;align-items:center;white-space:nowrap}
.ticker__big > span{font:700 clamp(44px,6.6vw,169px)/.86 var(--display);letter-spacing:-.045em;text-transform:uppercase;padding-right:.32em;gap:.32em}
.ticker__big .sq{display:inline-block;width:.42em;height:.42em;background:var(--acc);transform:translateY(-.04em)}
.ticker__mono > span{padding-right:2.4em;color:var(--acc-text)}

/* ---------- statement ---------- */
.stmt__big{font-family:var(--display);font-weight:700;font-size:clamp(38px,5.6vw,143px);line-height:.94;letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance}
.stmt__big .w{display:inline-block;transition:opacity .25s linear}
.stmt__big em{font-style:normal;color:var(--acc)}
.stmt__foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);margin-top:clamp(48px,6vw,154px)}
.stmt__foot > div{border-top:1px solid var(--rule);padding-top:14px;display:grid;gap:6px}
.stmt__foot .k{color:var(--acc-text);font-weight:600}
.stmt__foot p:last-child{font-size:15px;line-height:1.4}
@media (max-width:860px){.stmt__foot{grid-template-columns:1fr 1fr}}

/* ---------- reel (sticky scale) ---------- */
.reel{position:relative;height:230vh}
.reel__sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.reel__frame{position:relative;width:var(--rw,58vw);height:var(--rh,auto);aspect-ratio:16/9;max-width:100%;border-radius:var(--rr,24px);overflow:hidden;background:var(--black);will-change:width,height,border-radius}
.reel__frame video,.reel__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel__ui{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(14px,2vw,51px);color:var(--creme);pointer-events:none}
.reel__ui > *{pointer-events:auto}
.reel__top,.reel__bot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.reel__play{place-self:center;width:clamp(104px,10vw,256px);aspect-ratio:1;border-radius:50%;background:var(--cyan);color:var(--black);display:grid;place-items:center;text-align:center;font:600 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:transform .6s var(--out)}
.reel__play:hover{transform:scale(1.08)}
.reel__play span{display:grid;gap:6px;justify-items:center}
.reel__play svg{width:18px;height:18px;fill:currentColor}
.reel__title{font-size:clamp(28px,4.4vw,113px)}
.reel__side{position:absolute;left:var(--gl);right:var(--gr);top:calc(env(safe-area-inset-top,0px) + var(--hh) + 34px);display:flex;justify-content:space-between;gap:16px;color:var(--ink);transition:opacity .4s}
@media (max-width:860px){.reel{height:auto;padding-block:84px 72px}.reel__sticky{position:relative;height:auto;display:block;place-items:normal}.reel__frame{justify-self:stretch;width:auto!important;margin-inline:var(--gl) var(--gr);border-radius:var(--r-md)!important}.reel__side{position:static;margin-bottom:18px;padding-inline:var(--gl) var(--gr)}.reel__ui{padding:12px}.reel__top .mono:last-child{display:none}}

/* ---------- featured (horizontal) ---------- */
.feat{position:relative}
.feat__sticky{padding-block:clamp(96px,8vw,205px) clamp(56px,5vw,128px);display:flex;flex-direction:column;gap:clamp(28px,3vw,77px)}
.feat__top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.feat__title{font-size:clamp(56px,9.4vw,241px)}
.feat__title .out{color:var(--acc)}
.feat__track{display:flex;gap:var(--g);padding-left:var(--gl);padding-right:var(--gr);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.feat__track::-webkit-scrollbar{display:none}
.fcard{flex:none;width:min(80vw,820px);scroll-snap-align:start;display:grid;gap:16px;align-content:start}
.fcard__media{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-md);background:var(--black-80)}
.fcard__media img,.fcard__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out),opacity .6s}
.fcard:hover .fcard__media img,.fcard:hover .fcard__media video{transform:scale(1.05)}
.fcard__no{position:absolute;left:16px;top:14px;z-index:2;color:var(--creme);background:rgba(17,19,17,.55);padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fcard__meta{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.fcard__t{font-size:clamp(28px,2.6vw,67px);line-height:.92}
.fcard__tags{color:var(--muted);text-align:right;flex:none}
.fcard__sub{color:var(--creme-2);margin-top:8px}
.feat__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--muted);flex-wrap:wrap}
.feat__bar{height:2px;background:var(--rule);position:relative;flex:1;min-width:120px}
.feat__bar i{position:absolute;inset:0;background:var(--acc);transform-origin:left;transform:scaleX(0)}
@media (min-width:861px){
  .feat.is-h{height:var(--fh,300vh)}
  .feat.is-h .feat__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;justify-content:center}
  .feat.is-h .feat__track{overflow:visible;scroll-snap-type:none;width:max-content;will-change:transform}
  .feat.is-h .fcard{width:min(44vw,62vh * 1.6,860px)}
}
@media (max-width:860px){.fcard{width:84vw}}

/* ---------- services rows ---------- */
.svc{border-top:1px solid var(--ink)}
.svc__row{display:grid;grid-template-columns:clamp(44px,6vw,154px) minmax(0,1.2fr) minmax(0,1fr) auto;gap:var(--g);align-items:center;padding:clamp(18px,2vw,51px) 12px;border-bottom:1px solid var(--ink);position:relative;isolation:isolate;transition:color .45s var(--out)}
.svc__row::before{content:"";position:absolute;inset:0;background:var(--black);transform:scaleY(0);transform-origin:var(--o,bottom);transition:transform .6s var(--ease);z-index:-1}
.svc__row:hover::before,.svc__row:focus-visible::before{transform:scaleY(1)}
.svc__row:hover,.svc__row:focus-visible{color:var(--creme)}
.svc__icon{width:clamp(36px,3.4vw,87px);height:clamp(36px,3.4vw,87px);fill:currentColor}
.svc__t{font-size:clamp(40px,6.6vw,169px)}
.svc__d{font-size:clamp(15px,1.1vw,28px);line-height:1.4;max-width:38ch}
.svc__go{width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;display:grid;place-items:center;transition:transform .6s var(--out),background .3s,color .3s}
.svc__row:hover .svc__go{transform:rotate(-45deg);background:var(--creme);color:var(--black);box-shadow:none}
@media (max-width:860px){.svc__row{grid-template-columns:auto minmax(0,1fr) auto;padding-inline:0}.svc__d{grid-column:1/-1;grid-row:2}.svc__row:hover{padding-inline:0}}

/* ---------- numbers ---------- */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.num{display:grid;gap:14px;border-left:1px solid var(--rule);padding-left:clamp(12px,1.2vw,31px);align-content:start}
.num__val{display:flex;align-items:flex-start;font-family:var(--display);font-weight:700;letter-spacing:-.06em;font-size:clamp(84px,10.5vw,269px);line-height:.82}
.num__digits{display:flex;height:.82em;overflow:hidden}
.num__reel{display:flex;flex-direction:column;transition:transform 2s var(--out) var(--dd,0ms),width 1.2s var(--out) var(--dd,0ms)}
.num__reel span{display:block;height:.82em;line-height:.82}
.num__suf{font-size:.3em;letter-spacing:-.02em;color:var(--acc);margin-left:.12em;line-height:1}
.num__lbl{font-weight:600}
.num__lbl small{display:block;font-weight:400;color:var(--muted);font-size:inherit}
@media (max-width:860px){.nums{grid-template-columns:1fr 1fr;row-gap:48px}}

/* ---------- quotes ---------- */
.quotes__wrap{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);gap:var(--g)}
.quotes__side{display:grid;align-content:space-between;gap:28px}
.quotes__nav{display:flex;gap:8px}
.qbtn{width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;display:grid;place-items:center;transition:background .3s,color .3s,box-shadow .3s}
.qbtn:hover{background:var(--acc);color:var(--black);box-shadow:none}
.quotes__stage{position:relative;display:grid}
.quote{grid-area:1/1;display:grid;align-content:space-between;gap:32px;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.quote.on{opacity:1;visibility:visible;transition:opacity .6s}
.quote__q{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.02;font-size:clamp(26px,2.9vw,74px);text-wrap:pretty}
.quote__q .w{display:inline-block;opacity:0;transform:translateY(40%);transition:opacity .6s var(--out) calc(var(--i) * 16ms),transform .9s var(--out) calc(var(--i) * 16ms)}
.quote.on .quote__q .w{opacity:1;transform:none}
.quote__q .qm{color:var(--acc)}
.quote__who{display:flex;gap:16px;align-items:center}
.quote__badge{width:56px;height:56px;border-radius:50%;background:var(--acc);color:var(--black);display:grid;place-items:center;font:700 19px/1 var(--display);letter-spacing:-.04em;flex:none}
.quote__who b{display:block;font-weight:500;font-size:18px}
.quote__who span{color:var(--muted)}
.quotes__prog{display:flex;gap:8px;margin-top:32px}
.quotes__prog button{flex:1;height:20px;position:relative}
.quotes__prog button::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--rule)}
.quotes__prog i{position:absolute;left:0;right:0;top:9px;height:2px;background:var(--acc);transform-origin:left;transform:scaleX(0)}
@media (max-width:860px){.quotes__wrap{grid-template-columns:1fr}}

/* ---------- CTA ---------- */
.cta__title{display:block}
.cta__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-top:clamp(28px,4vw,102px)}
.cta__row .lede{max-width:30ch}
@media (max-width:860px){.cta__row{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{overflow:hidden}
.foot__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);padding-block:clamp(120px,14vw,360px) clamp(40px,4vw,102px)}
.foot__lead{display:grid;gap:22px;align-content:start;justify-items:start}
.foot__lead .hd{font-size:clamp(32px,3vw,77px);line-height:.92}
.foot__col h2{color:var(--muted);margin-bottom:14px;font-weight:400}
.foot__col ul{display:grid;gap:9px}
.foot__col a,.foot__col span{display:inline-flex;gap:8px;font-family:var(--display);font-weight:700;font-size:clamp(16px,1.05vw,24px);letter-spacing:-.02em;line-height:1.25;transition:color .3s}
.foot__col .blink,.foot__col .muted,.foot__col [data-clock]{display:inline}
.foot__col .muted{color:var(--muted)}
[data-clock] .blink{display:inline;transition:opacity .12s}
.tock .blink{opacity:0}
.foot__col a:hover{color:var(--acc)}
.foot__row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding-block:18px;border-top:1px solid var(--rule);color:var(--muted);font-variant-numeric:tabular-nums}
.foot__row a:hover,.foot__row button:hover{color:var(--acc)}
.foot__row div{display:flex;gap:24px;flex-wrap:wrap}
@media (max-width:860px){.foot__grid{grid-template-columns:1fr 1fr;row-gap:36px}}

/* ---------- page heads ---------- */
.phead{padding-top:calc(env(safe-area-inset-top,0px) + var(--hh) + clamp(48px,6vw,154px));padding-bottom:clamp(40px,5vw,128px)}
.phead__top{display:flex;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,1.6vw,41px)}
.phead__top > :first-child{color:var(--acc-text)}
.phead__top > :last-child{color:var(--muted);text-align:right}
.phead__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--g);align-items:end;margin-top:clamp(24px,2.6vw,67px);padding-top:16px;border-top:1px solid var(--rule)}
.phead__row .lede{max-width:30ch}
.phead__list{display:grid;gap:4px;justify-self:end;text-align:right;color:var(--muted)}
@media (max-width:860px){.phead__row{grid-template-columns:1fr}.phead__list{justify-self:start;text-align:left}}

/* ---------- work index ---------- */
.wtools{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:14px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:8px;height:clamp(38px,2vw,52px);padding-inline:clamp(15px,.8vw,22px);border-radius:999px;box-shadow:inset 0 0 0 1px var(--hair);font:600 clamp(11px,.6vw,15px)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:background .3s,color .3s,box-shadow .3s}
.chip:hover{box-shadow:inset 0 0 0 1px var(--black)}
.chip[aria-pressed="true"]{background:var(--black);color:var(--creme);box-shadow:none}
.chip sup{font-size:9px;opacity:.7;margin-left:-2px}
.toggle{display:flex;border-radius:999px;padding:3px;position:relative;box-shadow:inset 0 0 0 1px var(--hair)}
.toggle button{position:relative;z-index:1;height:32px;padding-inline:15px;border-radius:999px;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:color .3s}
.toggle button[aria-pressed="true"]{color:var(--creme)}
.toggle__pill{position:absolute;top:3px;bottom:3px;left:0;border-radius:999px;background:var(--black);transition:transform .6s var(--ease),width .6s var(--ease)}
.wlist{border-bottom:1px solid var(--rule)}
.wrow{border-top:1px solid var(--rule);transition:opacity .4s}
.wrow:first-child{border-top:0}
.wrow a{position:relative;display:grid;grid-template-columns:clamp(40px,5vw,128px) minmax(0,2.3fr) minmax(0,.8fr) minmax(0,.8fr) 64px auto;gap:var(--g);align-items:center;padding:clamp(16px,1.7vw,44px) 12px;isolation:isolate;transition:color .45s var(--out)}
.wrow a::before{content:"";position:absolute;inset:0;background:var(--black);transform:scaleY(0);transform-origin:var(--o,bottom);transition:transform .6s var(--ease);z-index:-1}
.wrow a:hover::before,.wrow a:focus-visible::before{transform:scaleY(1)}
.wrow a:hover,.wrow a:focus-visible{color:var(--creme)}
.wrow__no{color:var(--acc-text);transition:color .3s}
.wrow a:hover .wrow__no{color:var(--creme)}
.wrow__t{font-size:clamp(30px,3.4vw,87px);line-height:.92}
.wrow__t.lc{text-transform:none}
.wrow__type,.wrow__disc{color:var(--muted);transition:color .3s}
.wrow a:hover .wrow__type,.wrow a:hover .wrow__disc{color:var(--creme-2)}
.wrow__yr{font-variant-numeric:tabular-nums}
.wrow__go{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;display:grid;place-items:center;transition:transform .6s var(--out),background .3s,color .3s}
.wrow a:hover .wrow__go{background:var(--creme);color:var(--black);box-shadow:none;transform:rotate(-45deg)}
@media (hover:hover){.wlist:hover .wrow:not(:hover){opacity:.4}}
.is-off{display:none!important}
@media (max-width:980px){.wrow a{grid-template-columns:minmax(0,1fr) auto;padding-inline:0;row-gap:6px}.wrow__no,.wrow__disc,.wrow__yr{display:none}.wrow__type{grid-column:1/-1;grid-row:2}}
.wgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(44px,5vw,128px) var(--g);padding-top:clamp(32px,3vw,77px)}
.wcard{display:grid;gap:14px;min-width:0;align-content:start}
.wcard.shift{margin-top:clamp(0px,9vw,230px)}
.wcard__media{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-md);background:var(--black)}
.wcard__media img,.wcard__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out),opacity .5s}
.wcard:hover .wcard__media img,.wcard:hover .wcard__media video{transform:scale(1.05)}
.wcard__no{position:absolute;left:14px;top:12px;color:var(--creme);z-index:2;background:rgba(17,19,17,.55);padding:6px 10px;border-radius:999px}
.wcard__meta{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.wcard__t{font-size:clamp(28px,2.6vw,67px);line-height:.92}
.wcard__t.lc{text-transform:none}
.wcard__sub{color:var(--muted);text-align:right;flex:none}
@media (max-width:760px){.wgrid{grid-template-columns:1fr}.wcard.shift{margin-top:0}}
.fprev{position:fixed;left:0;top:0;z-index:90;width:min(26vw,440px);aspect-ratio:16/10;pointer-events:none;transform:translate3d(-999px,-999px,0);will-change:transform}
.fprev__in{position:absolute;inset:0;clip-path:inset(50% 50% 50% 50% round var(--r-md));transition:clip-path .7s var(--out);background:var(--black);overflow:hidden;border-radius:var(--r-md)}
.fprev.on .fprev__in{clip-path:inset(0 0 0 0 round var(--r-md))}
.fprev img,.fprev video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fprev video{opacity:0;transition:opacity .4s}
.fprev video.ready{opacity:1}
.fprev__lbl{position:absolute;left:12px;bottom:10px;z-index:2;color:var(--creme);background:rgba(17,19,17,.6);padding:6px 10px;border-radius:999px}
.empty{padding-block:56px;color:var(--muted)}
.wcount{color:var(--muted)}

/* ---------- case ---------- */
.chero{position:relative;padding-top:calc(env(safe-area-inset-top,0px) + var(--hh) + clamp(40px,5vw,128px))}
.chero__crumb{display:flex;flex-wrap:wrap;gap:6px 12px;color:var(--muted);margin-bottom:clamp(18px,2vw,51px)}
.chero__crumb a{color:var(--acc-text)}
.chero__crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.chero__title.lc .ln > span{text-transform:none}
.chero__sub{margin-top:clamp(16px,1.6vw,41px);color:var(--creme-2)}
.chero__meta{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g);margin-top:clamp(36px,4vw,102px);padding-top:16px;border-top:1px solid var(--rule)}
.chero__meta dt{color:var(--muted);margin-bottom:6px}
.chero__meta dd{font-size:15px;line-height:1.35}
.chero__media{position:relative;margin-top:clamp(28px,3vw,77px);height:min(86vh,calc((100vw - var(--gl) - var(--gr)) * 9 / 16));overflow:hidden;border-radius:var(--r-md) var(--r-md) 0 0;background:var(--black-80)}
.chero__media .media__in{position:absolute;inset:-6% 0;will-change:transform}
.chero__media img,.chero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chero__badge{position:absolute;left:clamp(14px,2vw,51px);bottom:clamp(14px,2vw,51px);z-index:2;display:flex;gap:8px;flex-wrap:wrap}
.chero__badge > *{background:rgba(17,19,17,.6);color:var(--creme);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chero__badge .tag{box-shadow:none}
@media (max-width:980px){.chero__meta{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}}
.cintro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding-block:clamp(72px,8vw,205px) clamp(40px,4vw,102px)}
.cintro__lbl{grid-column:1/4;position:sticky;top:calc(var(--hh) + 34px);align-self:start;color:var(--acc-text)}
.cintro__txt{grid-column:4/12}
.cintro__links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(28px,3vw,77px)}
@media (max-width:860px){.cintro__lbl,.cintro__txt{grid-column:1/-1}.cintro__lbl{position:static;margin-bottom:22px}}
.cblocks{display:grid;gap:var(--g);padding-bottom:clamp(64px,7vw,179px)}
.bh{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding-top:clamp(40px,5vw,128px);padding-bottom:clamp(4px,.8vw,20px);align-items:end}
.bh h3{grid-column:1/7;font-size:clamp(36px,4.6vw,118px);text-transform:none}
.bh p{grid-column:7/12;font-size:clamp(16px,1.15vw,29px);line-height:1.45;max-width:46ch}
@media (max-width:860px){.bh h3,.bh p{grid-column:1/-1}.bh p{margin-top:14px}}
.btext{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding-block:clamp(40px,5vw,128px)}
.btext h3{grid-column:1/4;color:var(--acc-text);font-weight:600}
.btext div{grid-column:4/12}
@media (max-width:860px){.btext h3,.btext div{grid-column:1/-1}.btext h3{margin-bottom:16px}}
.media{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--creme-2)}
.g-dark .media{background:var(--black-80)}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.media[data-zoom]{cursor:zoom-in}
.has-cur .media[data-zoom]{cursor:none}
.media__cap{display:flex;justify-content:space-between;gap:16px;padding-top:10px;color:var(--muted)}
.jrow{display:flex;gap:var(--g);align-items:flex-start}
.jrow > figure{min-width:0;display:grid}
@media (max-width:700px){.jrow{flex-direction:column}.jrow > figure{width:100%;flex:none!important}}
.bimg{display:grid}
.bimg--narrow{max-width:min(720px,100%);justify-self:center;width:100%}
.bpair{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding-block:clamp(24px,3vw,77px);align-items:start}
.bpair figure{grid-column:1/7}
.bpair .bpair__t{grid-column:8/12;position:sticky;top:calc(var(--hh) + 40px);display:grid;gap:18px}
.bpair.flip figure{grid-column:7/13;grid-row:1}
.bpair.flip .bpair__t{grid-column:2/6;grid-row:1}
.bpair__t h3{font-size:clamp(40px,4.8vw,123px);text-transform:none}
@media (max-width:860px){.bpair figure,.bpair.flip figure,.bpair .bpair__t,.bpair.flip .bpair__t{grid-column:1/-1;grid-row:auto}.bpair .bpair__t{position:static;margin-top:28px}}
.film{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--black);color:var(--creme);isolation:isolate}
.film--v{aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);background:var(--black)}
.film img,.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--out),opacity .6s}
.film:not(.film--v)::after,.film__poster::after{content:"";position:absolute;inset:0;background:rgba(17,19,17,.3);z-index:1;pointer-events:none}
.film--v .film__poster{position:relative;aspect-ratio:9/16;overflow:hidden}
.film:hover img,.film:hover video{transform:scale(1.04)}
.film__ui{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(14px,2vw,51px);z-index:2;text-align:left}
.film--v .film__ui{position:relative;inset:auto}
.film__ui > *{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.film__ui .tag,.film__chip{background:rgba(17,19,17,.62);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.film__go{place-self:center;width:clamp(96px,9vw,230px);aspect-ratio:1;border-radius:50%;background:var(--creme);color:var(--black);display:grid!important;place-items:center;place-content:center!important;padding:0 12px;text-align:center;font:600 10px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:transform .6s var(--out),background .3s}
.film:hover .film__go{transform:scale(1.08)}
.film__t{font-size:clamp(26px,3.4vw,87px)}
.film__t.lc{text-transform:none}
.film--v .film__t{font-size:clamp(30px,4vw,102px)}
.film--v .film__go{place-self:start}
.film__chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding-inline:12px;border-radius:999px}
.film__chip i{width:8px;height:8px;border-radius:50%;background:var(--pink);font-style:normal;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
@media (max-width:760px){.film--v{grid-template-columns:1fr}.film--v .film__poster{aspect-ratio:9/12}.film__go{width:84px}}
.cquote{padding-block:clamp(88px,9vw,230px)}
.cquote__in{display:grid;grid-template-columns:minmax(0,.28fr) minmax(0,1fr);gap:var(--g)}
.cquote__lbl{color:var(--acc-text)}
.cquote__q{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.02;font-size:clamp(28px,3.3vw,84px);text-wrap:pretty}
.cquote__q .qm{color:var(--acc)}
.cquote__who{display:flex;gap:16px;align-items:center;margin-top:clamp(28px,3vw,77px)}
.cquote__who b{display:block;font-weight:500;font-size:18px}
.cquote__who span{color:var(--muted)}
@media (max-width:860px){.cquote__in{grid-template-columns:1fr}}
.ccredits{border-top:1px solid var(--rule);padding-block:28px 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.ccredits h3{grid-column:1/4;font-weight:600;color:var(--acc-text)}
.ccredits dl{grid-column:4/12;display:grid;gap:0}
.ccredits dl div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--g);padding-block:10px;border-bottom:1px solid var(--rule)}
.ccredits dt{color:var(--muted)}
.ccredits dd{font-size:16px}
@media (max-width:860px){.ccredits h3,.ccredits dl{grid-column:1/-1}.ccredits dl{margin-top:14px}}
.series{display:grid;gap:clamp(40px,4vw,102px)}
.sitem{display:grid;gap:10px}
.sitem__no{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.sitem__no b{font-family:var(--display);font-weight:700;font-size:clamp(22px,2vw,51px);letter-spacing:-.04em;text-transform:none}
.sitem .media{cursor:pointer}
.sitem__snd{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:34px;padding-inline:12px;border-radius:999px;background:rgba(17,19,17,.62);color:var(--creme);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vloop{position:relative}
.vloop video{position:absolute;inset:0}
.cnext{display:block;position:relative;overflow:hidden;padding-block:clamp(80px,8vw,205px) clamp(48px,5vw,128px);isolation:isolate}
.cnext__lbl{display:flex;justify-content:space-between;gap:16px;color:var(--muted)}
.cnext__lbl > :first-child{color:var(--acc-text)}
.cnext__t{margin-top:clamp(20px,2vw,51px);transition:color .5s var(--out)}
.cnext__t.lc .ln > span{text-transform:none}
.cnext:hover .cnext__t{color:var(--acc)}
.cnext__img{position:absolute;right:var(--gr);top:50%;width:min(32vw,540px);aspect-ratio:16/10;transform:translateY(-50%) rotate(-3deg) scale(.88);border-radius:var(--r-md);overflow:hidden;opacity:0;transition:opacity .6s,transform .9s var(--out);pointer-events:none;z-index:-1}
.cnext__img img{width:100%;height:100%;object-fit:cover}
@media (hover:hover){.cnext:hover .cnext__img{opacity:1;transform:translateY(-50%) rotate(0) scale(1)}}
.cnext__bar{height:2px;background:var(--rule);margin-top:clamp(28px,3vw,77px);position:relative}
.cnext__bar i{position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.cnext:hover .cnext__bar i{transform:scaleX(1)}

/* ---------- modal player ---------- */
.modal{position:fixed;inset:0;z-index:230;background:var(--black);color:var(--creme);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px;padding-top:calc(env(safe-area-inset-top,0px) + 16px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);--acc:var(--cyan)}
.modal__top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.modal__title{font-size:clamp(26px,3.4vw,87px)}
.modal__title.lc{text-transform:none}
.modal__meta{color:var(--black-40);margin-top:6px}
.modal__big{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .3s}
.modal__big span{width:clamp(88px,8vw,205px);aspect-ratio:1;border-radius:50%;background:var(--cyan);color:var(--black);display:grid;place-items:center;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.modal.playing .modal__big{opacity:0;pointer-events:none}
.modal__bar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:16px;align-items:center;font-variant-numeric:tabular-nums}
.modal__btn{height:42px;min-width:42px;padding-inline:16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--black-80);font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s}
.modal__btn:hover,.modal__btn[aria-pressed="true"]{background:var(--cyan);color:var(--black);box-shadow:none}
.scrub{position:relative;height:40px;touch-action:none;cursor:pointer}
.scrub__ticks{position:absolute;inset:8px 0;display:flex;justify-content:space-between;align-items:center}
.scrub__ticks i{width:1px;height:8px;background:var(--black-80)}
.scrub__ticks i:nth-child(5n+1){height:16px;background:var(--black-60)}
.scrub__buf{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;background:var(--black-80);width:0}
.scrub__fill{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;background:var(--cyan);width:0}
.scrub__head{position:absolute;top:2px;bottom:2px;width:2px;background:var(--cyan);left:0}
.scrub__head::before{content:"";position:absolute;top:-2px;left:-5px;width:12px;height:12px;background:var(--cyan)}
@media (max-width:700px){.modal__bar{grid-template-columns:auto minmax(0,1fr) auto}.modal__bar .hide-s{display:none}}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:232;background:var(--black);color:var(--creme);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;padding-top:calc(env(safe-area-inset-top,0px) + 16px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);--acc:var(--cyan)}
.lb__top,.lb__foot{display:flex;justify-content:space-between;align-items:center;gap:16px}
.lb__count{font-variant-numeric:tabular-nums;color:var(--cyan)}
.lb__nav{display:flex;gap:8px}
.lb__cap{color:var(--black-40);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- studio ---------- */
.facts{width:100%;border-collapse:collapse}
.facts th,.facts td{text-align:left;vertical-align:top;padding:16px 0;border-bottom:1px solid var(--rule)}
.facts tr:first-child th,.facts tr:first-child td{border-top:1px solid var(--rule)}
.facts th{font:700 clamp(22px,2vw,51px)/1 var(--display);letter-spacing:-.04em;width:32%;padding-right:var(--g)}
.facts td{font-size:clamp(15px,1.1vw,28px);line-height:1.4}
.facts td.n{text-align:right;color:var(--acc-text);white-space:nowrap;padding-left:16px}
@media (max-width:700px){.facts th{display:block;width:auto;border-bottom:0;padding-bottom:4px}.facts tr:first-child td{border-top:0}.facts td{display:inline-block;padding-top:0}.facts td.n{display:none}}
.showcase{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--g);align-items:end}
.showcase .media{aspect-ratio:16/9;border-radius:var(--r-lg)}
.showcase__t{display:grid;gap:20px;align-content:end}
@media (max-width:860px){.showcase{grid-template-columns:1fr}}
.princ{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.princ__it{border-radius:var(--r-lg);padding:clamp(24px,2.6vw,67px);display:grid;gap:clamp(40px,6vw,154px);align-content:space-between;min-height:clamp(340px,30vw,768px)}
.princ__it:nth-child(1){background:var(--black);color:var(--creme)}
.princ__it:nth-child(2){background:var(--green);color:var(--creme)}
.princ__it:nth-child(3){background:var(--creme-2);color:var(--black)}
.princ__it h3{font-size:clamp(40px,4vw,102px)}
.princ__it p{font-size:clamp(16px,1.2vw,31px);line-height:1.4;max-width:26ch}
.princ__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.princ__icon{width:56px;height:56px;fill:currentColor}
@media (max-width:900px){.princ{grid-template-columns:1fr}.princ__it{min-height:0}}
.kit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.kit__it{border-top:1px solid var(--rule);padding-top:16px;display:grid;gap:8px;align-content:start}
.kit__it b{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.4vw,61px);letter-spacing:-.04em;line-height:.95}
.kit__it p{font-size:15px;line-height:1.4}
@media (max-width:860px){.kit{grid-template-columns:1fr 1fr;row-gap:32px}}
.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.sw{border-radius:var(--r-md);aspect-ratio:3/4;padding:18px;display:grid;align-content:space-between;text-align:left;transition:transform .6s var(--out)}
.sw:hover{transform:translateY(-8px)}
.sw b{font-family:var(--display);font-weight:700;font-size:clamp(20px,1.7vw,44px);letter-spacing:-.04em;line-height:1}
.sw .mono{opacity:.85}
.sw--line{box-shadow:inset 0 0 0 1px var(--hair)}
@media (max-width:860px){.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.sw:last-child{grid-column:1/-1;aspect-ratio:3/1.3}}
.typespec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--g);margin-top:var(--g)}
.typespec__it{border-radius:var(--r-lg);padding:clamp(24px,2.6vw,67px);background:var(--black);color:var(--creme);display:grid;gap:24px;min-width:0}
.typespec__it:last-child{background:var(--creme-2);color:var(--black)}
.typespec__big{font-size:clamp(72px,9vw,230px);line-height:.85;text-transform:none}
.typespec__body{font-size:clamp(26px,2.6vw,67px);line-height:1.1;letter-spacing:-.01em}
@media (max-width:860px){.typespec{grid-template-columns:1fr}}
.clients{display:flex;flex-wrap:wrap;gap:0 clamp(20px,3vw,77px)}
.clients li{font:700 clamp(44px,7vw,179px)/.9 var(--display);letter-spacing:-.045em;text-transform:uppercase}
.clients li span{color:var(--acc)}

/* ---------- services page ---------- */
.sdet{border-top:1px solid var(--rule)}
.sdet__it{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding-block:clamp(48px,5vw,128px);border-bottom:1px solid var(--rule)}
.sdet__head{grid-column:1/6;display:grid;gap:18px;align-content:start;position:sticky;top:calc(var(--hh) + 34px);align-self:start}
.sdet__head .hd{font-size:clamp(52px,6.4vw,164px)}
.sdet__head .mono{color:var(--acc-text)}
.sdet__icon{width:64px;height:64px;fill:currentColor}
.sdet__body{grid-column:6/13;display:grid;gap:28px;align-content:start}
.sdet__list{display:flex;flex-wrap:wrap;gap:6px}
.sdet__list li{height:36px;display:inline-flex;align-items:center;padding-inline:13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--ink)}
.sdet__projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sdet__projects a{display:grid;gap:10px}
.sdet__projects .media{aspect-ratio:16/10}
.sdet__projects img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--out)}
.sdet__projects a:hover img{transform:scale(1.06)}
.sdet__projects .mono{display:flex;justify-content:space-between;gap:12px}
@media (max-width:860px){.sdet__head,.sdet__body{grid-column:1/-1}.sdet__head{position:static;margin-bottom:28px}}
@media (max-width:480px){.sdet__projects{grid-template-columns:1fr}}
.proc__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,128px)}
.proc__aside{position:sticky;top:calc(var(--hh) + 40px);align-self:start;display:grid;gap:20px}
.proc__num{display:flex;align-items:flex-start;font-family:var(--display);font-weight:700;letter-spacing:-.07em;font-size:clamp(150px,19vw,486px);line-height:.8;color:var(--acc)}
.proc__digits{height:.82em;overflow:hidden}
.proc__reel{display:flex;flex-direction:column;transition:transform 1s var(--ease)}
.proc__reel span{display:block;height:.82em;line-height:.82}
.proc__dot{font-size:.5em;line-height:1.3}
.proc__tc{display:flex;justify-content:space-between;color:var(--creme-2);font-variant-numeric:tabular-nums}
.proc__tc b{color:var(--acc)}
.proc__track{height:2px;background:var(--rule);position:relative}
.proc__track i{position:absolute;inset:0;background:var(--acc);transform-origin:left;transform:scaleX(0)}
.steps > li{min-height:62vh;display:grid;align-content:center;gap:16px;padding-block:36px;border-top:1px solid var(--rule);opacity:.28;transition:opacity .6s var(--out)}
.steps > li:last-child{border-bottom:1px solid var(--rule)}
.steps > li.on{opacity:1}
.steps .mono:first-child{color:var(--acc)}
.steps h3{font-size:clamp(48px,6vw,154px)}
.steps p{font-size:clamp(16px,1.3vw,33px);line-height:1.42;max-width:40ch}
.steps ul{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:860px){.proc__grid{grid-template-columns:1fr}.proc__aside{position:relative;top:0}.proc__num{font-size:clamp(130px,42vw,1075px)}.steps > li{min-height:0;opacity:1}}
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.specs__it{border-top:1px solid var(--ink);padding-top:16px;display:grid;gap:12px;align-content:start}
.specs__it b{font-family:var(--display);font-weight:700;font-size:clamp(32px,3.4vw,87px);letter-spacing:-.045em;line-height:.92}
.specs__it p{font-size:15px;line-height:1.4}
@media (max-width:860px){.specs{grid-template-columns:1fr 1fr;row-gap:36px}}

/* ---------- contact ---------- */
.ct{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(40px,6vw,154px)}
.form{display:grid;gap:clamp(30px,3vw,77px)}
.form fieldset{border:0;margin:0;padding:0;min-width:0}
.form legend{padding:0;margin-bottom:14px;font-weight:600;color:var(--acc-text)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:inline-block}
.opt input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer}
.opt span{display:inline-block;font-family:var(--display);font-weight:700;letter-spacing:-.03em;text-transform:uppercase;font-size:clamp(20px,2vw,51px);line-height:1;border-radius:999px;box-shadow:inset 0 0 0 1px var(--black-60);padding:.32em .72em .3em;transition:background .25s,color .25s,box-shadow .25s}
.opt:hover span{box-shadow:inset 0 0 0 1px var(--cyan);color:var(--cyan)}
.opt input:checked + span{background:var(--cyan);color:var(--black);box-shadow:none}
.opt input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:3px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px var(--g)}
.field{display:grid;gap:8px;min-width:0;position:relative;align-content:start}
.field--full{grid-column:1/-1}
.field label{color:var(--creme-2)}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--black-60);color:var(--creme);font:400 clamp(18px,1.5vw,38px)/1.3 var(--sans);padding:10px 0;outline:none;border-radius:0;resize:vertical;min-height:50px}
.field textarea{min-height:130px}
.field input::placeholder,.field textarea::placeholder{color:var(--black-60)}
.field__ctl{position:relative}
.field__ctl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--out);pointer-events:none}
.field__ctl:focus-within::after{transform:scaleX(1)}
.field.err .field__ctl::after{background:var(--pink);transform:scaleX(1)}
.field.err input,.field.err textarea{border-color:var(--pink)}
.field .msg{color:var(--creme-2);min-height:1.6em}
.field.err .msg{color:var(--creme)}
.field.err .msg::before{content:"";display:inline-block;width:8px;height:8px;background:var(--pink);margin-right:8px;vertical-align:0}
.form__send{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap}
.form__note{color:var(--black-40);max-width:52ch}
.done{border-radius:var(--r-lg);background:var(--cyan);color:var(--black);padding:clamp(24px,3vw,77px);display:grid;gap:22px;--acc:var(--green)}
.done h2{font-size:clamp(40px,5vw,128px)}
.done pre{white-space:pre-wrap;word-break:break-word;font:400 13px/1.6 var(--mono);background:rgba(17,19,17,.08);border-radius:16px;padding:18px;margin:0;max-height:300px;overflow:auto}
.done__btns{display:flex;flex-wrap:wrap;gap:10px}
.ct__side{display:grid;gap:clamp(30px,3vw,77px);align-content:start}
.ct__side h3{color:var(--black-40);margin-bottom:12px;font-weight:400}
.ct__links li{border-top:1px solid var(--black-80)}
.ct__links li:last-child{border-bottom:1px solid var(--black-80)}
.ct__links a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:15px;font-family:var(--display);font-weight:700;font-size:clamp(24px,2.2vw,56px);letter-spacing:-.04em;line-height:1;transition:color .3s,padding .5s var(--out)}
.ct__links a:hover{color:var(--cyan);padding-left:10px}
.ct__links small{font:400 11px/1 var(--mono);letter-spacing:.06em;color:var(--black-40);text-transform:uppercase}
.ct__card{border-radius:var(--r-md);background:var(--black-80);padding:22px;display:grid;gap:12px}
@media (max-width:900px){.ct{grid-template-columns:1fr}.fields{grid-template-columns:1fr}}

/* ---------- lab ---------- */
.lab{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:100vh;min-height:100svh;padding-top:calc(env(safe-area-inset-top,0px) + var(--hh) + 10px);overflow:hidden}
.lab__stage{position:relative;min-height:clamp(460px,66vh,800px);touch-action:pan-y}
.lab__layer{position:absolute;inset:0}
.lab__layer canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lab__eyebrow{position:absolute;top:22px;left:var(--gl);color:var(--pink-hi);font-weight:600;z-index:2}
.lab__title{position:absolute;right:var(--gr);top:50%;transform:translateY(-50%);text-align:right;display:grid;justify-items:end;gap:14px;z-index:3;pointer-events:none;max-width:min(46vw,1200px)}
.lab__title .mono{color:var(--creme-2)}
.lab__title .mono b{color:var(--pink);font-size:14px}
.lab__title .hd{font-size:clamp(56px,6.6vw,180px);white-space:nowrap}
.lab__title p:not(.mono){font-size:clamp(15px,1.1vw,28px);color:var(--creme-2);max-width:32ch}
.lab__btns{display:flex;gap:8px;pointer-events:auto;flex-wrap:wrap;justify-content:flex-end}
.lab__bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;border-top:1px solid var(--black-80);background:var(--black);min-height:150px}
.lab__bar > *{border-right:1px solid var(--black-80);padding:18px clamp(14px,1.6vw,41px)}
.lab__bar > :first-child{padding-left:var(--gl)}
.lab__concept h3,.lab__details h3{margin:0 0 10px;font-weight:600;color:var(--pink-hi)}
.lab__concept p:not(.mono){font:400 14px/1.5 var(--sans);text-transform:none;letter-spacing:0;color:var(--creme-2);max-width:54ch}
.lab__details dl{display:grid;gap:4px}
.lab__details dl div{display:grid;grid-template-columns:auto 1fr;gap:12px}
.lab__details dt{color:var(--black-40)}
.lab__details dd{text-align:right}
.lab__tabs{display:flex;padding:0!important;border-right:0!important}
.lab__tabs button{writing-mode:vertical-rl;padding:18px 15px;border-left:1px solid var(--black-80);color:var(--black-40);position:relative;letter-spacing:.2em;transition:color .3s,background .3s}
.lab__tabs button[aria-selected="true"]{color:var(--creme);background:var(--black-80)}
.lab__tabs button[aria-selected="true"]::before{content:"";position:absolute;top:8px;left:50%;width:5px;height:5px;margin-left:-2.5px;background:var(--pink)}
.lab__tabs button:hover{color:var(--creme)}
@media (max-width:900px){
  .lab__title{top:auto;bottom:20px;transform:none;max-width:calc(100% - 32px)}
  .lab__title p:not(.mono){display:none}
  .lab__bar{grid-template-columns:1fr}
  .lab__bar > *{border-right:0;border-bottom:1px solid var(--black-80);padding-left:var(--gl);padding-right:var(--gr)}
  .lab__tabs{order:-1;padding:0!important}
  .lab__tabs button{writing-mode:horizontal-tb;flex:1;border-left:0;border-right:1px solid var(--black-80);padding:15px 8px;text-align:center}
  .lab__tabs button:last-child{border-right:0}
}
.push{display:flex;align-items:center;justify-content:center;touch-action:none}
.push__word{display:flex;font-family:var(--display);font-weight:700;letter-spacing:-.05em;line-height:.9;white-space:pre;user-select:none;text-transform:uppercase;margin-right:min(30vw,440px)}
.push__word span{display:inline-block;will-change:transform;transition:color .2s}
.push__word span.hot{color:var(--pink)}
.push__in{position:absolute;left:var(--gl);bottom:24px;display:flex;gap:12px;align-items:center;width:min(380px,calc(100% - 32px));z-index:4}
.push__in label{color:var(--creme-2);white-space:nowrap}
.push__in input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--creme);color:var(--creme);font:600 14px/1.4 var(--mono);text-transform:uppercase;padding:8px 0;outline:none;border-radius:0}
.scr{display:grid;grid-template-rows:minmax(0,1fr) auto;padding-left:var(--gl);padding-right:var(--gr);padding-bottom:24px}
.scr__word{display:flex;align-self:center;font-family:var(--display);font-weight:700;letter-spacing:-.05em;line-height:.9;overflow:hidden;padding-block:.08em;user-select:none}
.scr__word span{display:inline-block;transform-origin:50% 100%;will-change:transform}
.ruler{position:relative;height:56px;touch-action:none;border-top:1px solid var(--black-80);max-width:min(760px,55vw);cursor:ew-resize}
.ruler__ticks{position:absolute;inset:0;display:flex;justify-content:space-between}
.ruler__ticks i{width:1px;height:10px;background:var(--black-80);position:relative}
.ruler__ticks i.maj{height:18px;background:var(--creme-2)}
.ruler__ticks i.maj::after{content:attr(data-l);position:absolute;top:22px;left:50%;transform:translateX(-50%);font:400 9px/1 var(--mono);color:var(--creme-2)}
.ruler__head{position:absolute;top:-6px;bottom:0;width:2px;background:var(--pink);left:100%}
.ruler__head::before{content:"";position:absolute;top:0;left:-6px;width:14px;height:14px;background:var(--pink)}
.scr__read{display:flex;gap:16px;align-items:center;margin-top:10px;font-variant-numeric:tabular-nums;color:var(--creme-2)}
.scr__read b{color:var(--creme)}
@media (max-width:900px){.push__word{margin-right:0}.ruler{max-width:none}.push__in{bottom:auto;top:56px}.scr{padding-bottom:200px}.scr__word{align-self:start;margin-top:96px}}

/* ---------- lab: side projects ---------- */
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g) 16px}
.scard{display:grid;gap:10px;align-content:start;min-width:0}
.scard__media{position:relative;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:var(--black-80);display:grid;place-items:center;transition:transform .7s var(--out),background .4s}
.scard:hover .scard__media{transform:translateY(-6px)}
.scard__media img,.scard__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scard__media .mono{position:absolute;left:14px;top:12px;color:var(--creme-2)}
.scard__icon{width:30%;height:auto;fill:var(--creme);opacity:.9;transition:transform .9s var(--out)}
.scard--empty .scard__media{background:transparent;box-shadow:inset 0 0 0 1px var(--black-80)}
.scard--empty:hover .scard__media{background:var(--pink)}
.scard--empty:hover .scard__icon{fill:var(--black);transform:rotate(90deg) scale(1.1)}
.scard__t{font-size:clamp(22px,1.8vw,46px);text-transform:none}
.scard__m{color:var(--black-40)}
.scard__x{font-size:15px;line-height:1.4;color:var(--creme-2)}
@media (max-width:980px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- seamless image transition ---------- */
.flip{position:fixed;z-index:241;overflow:hidden;background:var(--black);color:var(--creme);pointer-events:none}
.flip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flip::after{content:"";position:absolute;inset:0;background:rgba(17,19,17,.35)}
.flip__ui{position:absolute;left:var(--gl);right:var(--gr);bottom:clamp(24px,3vw,56px);z-index:2;display:grid;gap:14px}
.flip__ui .mono{color:var(--pink)}
.flip__t{font-size:clamp(56px,11vw,280px);overflow:hidden;padding-bottom:.05em}
.flip__t span{display:inline-block}

/* ---------- WebGL hover layer ---------- */
.hfx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0}

/* ---------- journal ---------- */
.jgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4vw,80px) var(--g);padding-block:clamp(24px,3vw,56px)}
.jcard{display:grid;gap:12px;align-content:start;min-width:0}
.jcard__media{position:relative;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--creme-2)}
.jcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out)}
.jcard:hover .jcard__media img{transform:scale(1.05)}
.jcard__m{display:flex;justify-content:space-between;gap:12px;color:var(--acc-text)}
.jcard__t{font-size:clamp(28px,2.6vw,66px);text-transform:none;line-height:.95}
.jcard__x{color:var(--green)}
@media (max-width:860px){.jgrid{grid-template-columns:1fr}}

/* ---------- 3D mark on the studio page ---------- */
.studio-head{position:relative;overflow:hidden}
.ascii{padding-bottom:clamp(40px,5vw,128px);margin-top:calc(-1 * clamp(16px,2vw,60px))}
.ascii canvas{display:block;width:100%;height:clamp(300px,56vh,760px);color:var(--black)}
.ascii__cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);color:var(--muted)}
@media (max-width:860px){.ascii canvas{height:34vh}}

/* ---------- 404 ---------- */
.nf{min-height:100vh;min-height:100svh;display:grid;align-content:end;gap:28px;padding-top:calc(var(--hh) + 60px);padding-bottom:clamp(48px,6vw,154px)}
.nf__btns{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:236;transform:translate(-50%,calc(100% + 48px + env(safe-area-inset-bottom,0px)));visibility:hidden;background:var(--cyan);color:var(--black);padding:14px 20px;border-radius:999px;transition:transform .6s var(--out),visibility 0s .6s;font-weight:600;max-width:calc(100% - 32px);text-align:center}
.toast.on{transform:translate(-50%,0);visibility:visible;transition:transform .6s var(--out),visibility 0s}

/* motion switched off by the visitor */

.calm *,.calm *::before,.calm *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}
.calm .hero,.calm .rhythm{height:auto}
.calm .hero__sticky{position:relative}
.calm .rhythm__sticky{position:relative}
/* header mark: light on the bright grounds, pulsing with the beat */
/* ---------- case blocks: beat map, script, palette, specimen ---------- */
.beat{display:grid;gap:clamp(18px,2vw,40px);padding-top:clamp(40px,5vw,128px);color:var(--black)}
.beat__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:end}
.beat__head h3{grid-column:1/7;font-size:clamp(36px,4.6vw,118px);text-transform:none}
.beat__head p{grid-column:7/12;font-size:clamp(16px,1.15vw,29px);max-width:46ch}
.beat__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);border-top:1px solid var(--rule);padding-top:14px}
.beat__stats div{display:grid;gap:6px;min-width:0}
.beat__stats dt{color:var(--muted)}
.beat__stats dd.hd{font-size:clamp(32px,4vw,102px);letter-spacing:-.05em;font-variant-numeric:tabular-nums;text-transform:none}
.beat__wave{display:block;width:100%;height:clamp(110px,14vw,300px);cursor:crosshair}
@media (max-width:860px){.beat__head h3,.beat__head p{grid-column:1/-1}.beat__head p{margin-top:12px}.beat__stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.script{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding-block:clamp(48px,6vw,150px);border-top:1px solid var(--rule);margin-top:clamp(40px,5vw,128px)}
.script h3{grid-column:1/4;color:var(--acc-text);font-weight:600}
.script ol{grid-column:4/13;display:grid;gap:clamp(6px,.8vw,18px);counter-reset:none}
.script li{display:grid;grid-template-columns:clamp(56px,5vw,120px) minmax(0,1fr);gap:16px;align-items:baseline}
.script li .mono{color:var(--muted)}
.script li p{font-size:clamp(26px,3.1vw,80px);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.script li:last-child p{color:var(--pink-text)}
@media (max-width:860px){.script h3,.script ol{grid-column:1/-1}.script h3{margin-bottom:20px}.script li{grid-template-columns:1fr;gap:4px}}
.pal{display:grid;gap:clamp(20px,2vw,44px)}
.pal__group{display:grid;gap:12px}
.pal__group > .mono{color:var(--muted)}
.pal__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,20px)}
.pal__chip{position:relative;aspect-ratio:4/3;border-radius:var(--r-md);background:var(--c);color:var(--t);padding:clamp(14px,1.2vw,28px);display:flex;flex-direction:column;justify-content:space-between;text-align:left;box-shadow:inset 0 0 0 1px rgba(17,19,17,.08);transition:transform .6s var(--out),border-radius .6s var(--out)}
.pal__chip:hover{transform:translateY(-6px);border-radius:calc(var(--r-md) * 1.6)}
.pal__n{font-family:"Hedvig Letters Serif",Georgia,serif;font-size:clamp(24px,1.8vw,46px);line-height:1}
@media (max-width:700px){.pal__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spec{display:grid;gap:clamp(18px,2vw,44px);padding:clamp(28px,4vw,100px);border-radius:var(--r-lg);background:#2A1F18;color:#EDE3D2;margin-top:clamp(20px,3vw,80px)}
.spec > .mono{color:#C9A07A}
.spec__serif{font-family:"Hedvig Letters Serif",Georgia,serif;font-size:clamp(40px,6.4vw,164px);line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.spec__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--g)}
.spec__sans,.spec__abc{font-family:"Rethink Sans",Helvetica,Arial,sans-serif;font-size:clamp(16px,1.2vw,30px);line-height:1.35;letter-spacing:0}
.spec__sans{color:#C9A07A}
@media (max-width:860px){.spec__row{grid-template-columns:1fr}}
.clients__list a{display:contents}
.clients-big a{color:inherit}
/* ---------- fit to the screen height (16:9 laptops and desktops) ---------- */
@media (min-width:861px){
  .feat.is-h .feat__sticky{padding-block:calc(var(--hh) + 2.5vh) 3vh;gap:clamp(16px,3vh,64px)}
  .feat__title{font-size:clamp(56px,min(9.4vw,11vh),241px)}
  .feat.is-h .fcard{width:min(44vw,calc((67svh - 250px) * 1.6),860px)}
  .rhythm__t{font-size:clamp(48px,min(7.4vw,11.5vh),190px)}
  .rhythm__screen{max-height:none;max-width:min(100%,70vw)}
}
/* the chapter counter needs a wide margin; below that it would touch the content */
.clients__list li{transition:border-color .4s}
.clients__list li:hover{border-top-color:var(--cyan)}
.clients__list li:hover b{color:var(--cyan)}
/* rolling digits: no clipped glyphs, no gap after a narrow 1 */
.num__digits,.proc__digits{padding-right:.09em;margin-right:-.05em}
.num__reel span,.proc__reel span{text-align:right}

/* ================= v6: Bennett & Clive-inspired structure, the beat everywhere ================= */
/* ---------- loader: the wordmark fills the screen, letters drop in on sixteenth notes ---------- */
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- split logo: Bamboo / mark / Productions across the middle of the screen ---------- */
@media (max-width:860px){.slogo{font-size:12px}}
/* header: on wide screens the nav sits alone, Bennett & Clive style, the logo lives in the middle */

/* ---------- tempo widget ---------- */
.bpm{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;background:var(--hbg,rgba(17,19,17,.6));color:var(--hnav,var(--creme));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-variant-numeric:tabular-nums;white-space:nowrap}
.bpm b{font-weight:600}
.bpm__dots{display:inline-flex;gap:3px}
.bpm__dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.25;transition:opacity .08s,transform .08s}
.bpm__dots i.on{opacity:1;transform:scale(1.35);background:var(--pink)}
.bpm__dots i:first-child.on{background:var(--cyan)}
.bpm.tap{animation:tap .25s var(--out)}
@keyframes tap{50%{transform:scale(.92)}}
@media (max-width:980px){.hdr .bpm{display:none}}

/* ---------- clients hero ---------- */

/* ---------- statement: we make it move ---------- */

/* ---------- beat lab ---------- */
.blab{position:relative;overflow:hidden;padding-block:clamp(80px,8vw,205px)}
.blab__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--g);align-items:end}
.blab__t{font-size:clamp(60px,min(10vw,17vh),260px)}
.blab__side{display:grid;gap:12px;justify-self:end;max-width:44ch}
.blab__deck{margin-top:clamp(36px,4vw,100px);display:grid;gap:clamp(16px,1.6vw,40px);padding:clamp(18px,2vw,52px);border-radius:var(--r-lg);background:var(--black);color:var(--creme)}
.blab__transport{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.blab__transport .btn--line{color:var(--creme)}
.blab__transport .btn--line[aria-pressed="true"]{background:var(--pink);box-shadow:none;color:var(--creme)}
.blab__play.on{background:var(--cyan);color:var(--black)}
.btn--dark.blab__play{background:var(--creme);color:var(--black)}
.blab__tempo{display:flex;align-items:center;gap:10px;padding:0 6px}
.blab__tempo button{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--black-60);font-size:22px;line-height:1;display:grid;place-items:center}
.blab__tempo button:hover{background:var(--creme);color:var(--black)}
.blab__tempo output{font-size:clamp(36px,3.4vw,88px);min-width:2.2ch;text-align:center;font-variant-numeric:tabular-nums;color:var(--cyan)}
.blab__pos{margin-left:auto;font-size:clamp(24px,2.2vw,56px);font-variant-numeric:tabular-nums;color:var(--pink)}
.blab__grid{display:grid;gap:8px}
.blab__row{display:grid;grid-template-columns:clamp(70px,7vw,140px) minmax(0,1fr);gap:12px;align-items:center}
.blab__lbl{color:var(--creme-2)}
.blab__pads{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:clamp(3px,.4vw,10px)}
.bpad{height:clamp(26px,2.3vw,54px);border-radius:clamp(4px,.5vw,12px);background:var(--black-80);transition:background .12s,transform .1s,box-shadow .12s}
.bpad--b{background:#4d504d}
.bpad:hover{box-shadow:inset 0 0 0 2px var(--creme)}
.bpad.on{background:var(--pink)}
.bpad[data-k="kick"].on{background:var(--cyan)}
.bpad[data-k="hat"].on{background:var(--creme)}
.bpad[data-k="hey"].on{background:#F3C623}
.bpad.now{box-shadow:inset 0 0 0 2px var(--creme);transform:scale(.9)}
.bpad.on.now{transform:scale(1.08)}
.blab__ruler .blab__pads span{text-align:center;color:var(--black-40)}
.blab__ruler .blab__pads span.b{color:var(--creme)}
.blab__presets{display:flex;flex-wrap:wrap;gap:8px}
.blab__presets .chip{color:var(--creme);box-shadow:inset 0 0 0 1px var(--black-60)}
.blab__presets .chip:hover{background:var(--creme);color:var(--black)}
.sticker{position:absolute;z-index:0;font:700 clamp(16px,1.6vw,40px)/1 var(--display);text-transform:uppercase;letter-spacing:-.03em;padding:.5em .8em;border-radius:.4em;pointer-events:none}
.sticker--a{right:8%;top:6%;background:var(--pink);color:var(--creme);transform:rotate(7deg)}
.sticker--b{left:44%;top:clamp(40px,5vw,120px);background:var(--black);color:var(--cyan);transform:rotate(-5deg)}
.blab .wrap{position:relative;z-index:1}
@media (max-width:860px){.blab__head{grid-template-columns:1fr}.blab__side{justify-self:start}.blab__row{grid-template-columns:1fr}.blab__pads{grid-template-columns:repeat(8,minmax(0,1fr))}.blab__ruler{display:none}.blab__pos{margin-left:0}.sticker--b{display:none}}

/* ---------- services: fixed reel, the list scrolls through it ---------- */

/* ---------- clients on an axis ---------- */

/* ---------- cards: cuts per minute ---------- */
.fcard__cpm,.wcard__cpm{position:absolute;right:16px;top:14px;z-index:2;color:var(--black);background:var(--cyan);padding:6px 10px;border-radius:999px}
.chero__claim{margin-top:clamp(16px,1.6vw,40px);max-width:30ch;font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,50px);line-height:1.12;letter-spacing:-.025em;color:var(--creme);text-wrap:balance}
.chero__meta{grid-template-columns:repeat(auto-fit,minmax(min(160px,40vw),1fr))}
/* ---------- work index: a sticky title that becomes the project under the cursor ---------- */
/* ---------- lab: side projects ---------- */

/* ================= v7: one ease, one logo that travels, titles that grow out of their corner ================= */
:root{--bc:cubic-bezier(.32,.94,.6,1);--bo:cubic-bezier(.22,1,.36,1)}
/* reading: Chivo Mono needs size and air */
body{font-size:clamp(15px,.84vw,20px);line-height:1.55}
.lede{font-size:clamp(17px,1.22vw,30px);line-height:1.45;letter-spacing:-.02em}
.mono{font-size:clamp(11px,.62vw,15px)}

/* ---------- reveals (Bennett & Clive): titles grow from the bottom-left corner, text lines rise ---------- */
.js [data-reveal] .ln > span{transform:scale(0);transform-origin:0 100%;transition:transform .95s var(--bc) calc(var(--i,0) * 80ms + var(--d,0ms))}
.js [data-reveal].in .ln > span{transform:none}
.js .hero .fit .ln > span{transform:none;transition:none}
.js .hero .fit:not(.split) .ln > span{opacity:0}
.fit .ln{perspective:1000px}
.fit .spc{will-change:transform}
.js [data-reveal="fade"]{opacity:0;transform:translateY(max(14px,1.04vw));transition:opacity .8s var(--bc) var(--d,0ms),transform .8s var(--bc) var(--d,0ms)}
.js [data-reveal="fade"].in{opacity:1;transform:none}
/* media open from a slit in the middle (Akaru) */
.js [data-reveal="media"]{clip-path:inset(100% 22% 0 22% round var(--rr,var(--r-md)));transition:clip-path 1.25s var(--ease) var(--d,0ms)}
.js [data-reveal="media"] > img,.js [data-reveal="media"] > video,.js [data-reveal="media"] > .media__in{transform:scale(1.18);transition:transform 1.9s var(--out) var(--d,0ms)}
.js [data-reveal="media"].in{clip-path:inset(0 0 0 0 round var(--rr,var(--r-md)))}
.js [data-reveal="media"].in > img,.js [data-reveal="media"].in > video,.js [data-reveal="media"].in > .media__in{transform:none}

/* ---------- the lockup ---------- */
.lk{display:inline-flex;align-items:center;gap:.16em;font-family:var(--display);font-weight:700;font-size:100px;line-height:1;letter-spacing:-.045em;white-space:nowrap;vertical-align:top}
.lk .mark{width:1.08em;height:1em;flex:none;fill:currentColor;overflow:visible}
.lk .mark rect{transform-box:fill-box;transform-origin:center}
.lk__w{display:inline-flex;overflow:hidden;line-height:.86;padding:.08em .02em .12em 0}
.lk__w > span{display:inline-block}
.lgm{position:fixed;left:0;top:0;z-index:245;color:var(--creme);transform-origin:0 0;transition:color .45s var(--bc);-webkit-tap-highlight-color:transparent}
.lgm[data-ink="dark"]{color:var(--black)}
.lgm .lk{font-size:100px}
.lgm.is-ld,.lgm.is-fly{pointer-events:none;z-index:270}
.is-overlay .lgm{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.lgm.is-ld .lk__w > span{transform:translateY(118%);animation:lkIn .7s var(--out) forwards;animation-delay:calc(180ms + var(--i) * var(--sps,163ms))}
.lgm.is-ld .mark rect{animation:lkSq .7s var(--out) .05s both}
.lgm.is-ld .mark polygon{transform-box:fill-box;transform-origin:50% 100%;animation:lkSl .7s var(--out) .22s both}
@keyframes lkIn{to{transform:none}}
@keyframes lkSq{from{transform:scale(0)}}
@keyframes lkSl{from{transform:scaleY(0)}}
.lgm:focus-visible{outline:none}
.lgm:focus-visible .lk{outline:2px solid var(--cyan);outline-offset:8px}
.hdr__logo{display:inline-flex;align-items:center;justify-self:start;height:44px}
.hdr__logo .lk{font-size:clamp(23px,1.3vw,34px)}

.hdr[data-theme="light"] .hdr__logo,.hdr[data-theme="pink"] .hdr__logo,.hdr[data-theme="cyan"] .hdr__logo{color:var(--black)}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:260;background:var(--creme);color:var(--black);display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:max(16px,env(safe-area-inset-top,0px)) var(--gr) max(16px,env(safe-area-inset-bottom,0px)) var(--gl);clip-path:inset(0 0 0 0)}
.loader__top{display:flex;justify-content:space-between;gap:16px;color:var(--black-60);transition:transform .8s var(--bc)}
.loader__top span:nth-child(2){color:var(--pink-text)}
.loader__lk{align-self:center;margin:0;display:flex;min-width:0}
.loader__bottom{display:grid;gap:10px;transition:transform .8s var(--bc)}
.loader__row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;color:var(--black-60)}
.loader__log{display:flex;gap:18px;color:var(--pink-text)}
.loader__log span{opacity:0;animation:logIn .01s linear forwards}
.loader__log span:nth-child(1){animation-delay:.05s}.loader__log span:nth-child(2){animation-delay:.38s}.loader__log span:nth-child(3){animation-delay:.72s}.loader__log span:nth-child(4){animation-delay:1.08s}.loader__log span:nth-child(5){animation-delay:1.45s}
@keyframes logIn{to{opacity:1}}
.loader__count{font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,77px);letter-spacing:-.05em;line-height:.8;color:var(--black);font-variant-numeric:tabular-nums}
.loader__bar{height:2px;background:var(--hair);overflow:hidden}
.loader__bar i{display:block;height:100%;background:var(--pink);transform-origin:left;animation:bar 1.75s cubic-bezier(.6,.05,.3,1) forwards}
.loader__marq{overflow:hidden;white-space:nowrap;color:var(--black-60);border-top:1px solid var(--hair);padding-top:8px}
.loader__marq div{display:inline-block;animation:marq 14s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.loader__gate{position:absolute;left:var(--gl);right:var(--gr);bottom:max(16px,env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--black);background:var(--creme);animation:gateIn .7s var(--bc) both}
.loader__gate.done{animation:gateOut .4s var(--bc) forwards}
@keyframes gateIn{from{opacity:0;transform:translateY(16px)}}
@keyframes gateOut{to{opacity:0;transform:translateY(16px)}}
.loader__ask{font-size:clamp(16px,1.1vw,26px);line-height:1.4;max-width:44ch}
.loader__btns{display:flex;flex-wrap:wrap;gap:10px}
.loader .btn--line:hover,.loader .btn--line:focus-visible{color:var(--creme)}
.loader.ask .loader__bottom{visibility:hidden}
.loader.out{animation:ldOut 1.15s var(--ease) forwards}
.loader.out .loader__top{transform:translateY(-140%)}
.loader.out .loader__bottom,.loader.out .loader__gate{transform:translateY(140%);opacity:0;transition:transform .8s var(--bc),opacity .4s}
@keyframes ldOut{to{clip-path:inset(0 0 100% 0)}}
@media (max-width:700px){.loader__log span:not(:last-child){display:none}.loader__gate{flex-direction:column;align-items:flex-start}}
.calm .loader{display:none}

/* ---------- page change: the page blurs, the next name grows from its corner ---------- */
.veil{position:fixed;inset:0;z-index:240;pointer-events:none;opacity:0;visibility:hidden;background:rgba(17,19,17,.46);-webkit-backdrop-filter:blur(48px) saturate(1.15);backdrop-filter:blur(48px) saturate(1.15);display:grid;align-items:end;padding:0 var(--gr) clamp(22px,5vh,64px) var(--gl)}
.veil.on{visibility:visible;pointer-events:auto}
.veil__in{display:grid;gap:clamp(10px,1.2vw,22px);min-width:0}
.veil__no{color:var(--creme-2)}
.veil__t{font-size:clamp(56px,11vw,300px);line-height:.86;color:var(--creme);white-space:nowrap;overflow:hidden;padding-bottom:.04em}
.veil__t span{display:inline-block;transform-origin:0 100%;transform:scale(0)}
.flip__t span{transform-origin:0 100%}

/* ---------- footer: the wordmark builds itself out of its bottom-left corners ---------- */
.foot__lk{display:flex;padding-top:clamp(8px,1vw,24px);padding-bottom:clamp(14px,1.6vw,40px)}
.foot__lk .pc3.is-build .pc{transform-origin:0 100%;transform:scale(0);will-change:transform}
.lgp-on .foot__lk .pc3,.lgp-on .loader__lk .pc3{visibility:hidden}
.lgp-on .foot__lk .pc3.is-build .pc{transform:none}
/* the lockup in three pieces: bamboo / the mark / productions */
.pc3{display:flex;justify-content:space-between;align-items:center;width:100%;font-family:var(--display);font-weight:700;font-size:100px;line-height:.86;letter-spacing:-.045em;white-space:nowrap}
.pc{display:block;flex:none;padding-bottom:.06em}
.pc--b{display:flex;align-items:center}
.pcs,.pcl{height:1em;fill:currentColor;display:block;overflow:visible}
.pcs{width:.4em}.pcl{width:.68em}
.pcs rect{transform-box:fill-box;transform-origin:center}
.pc--a,.pc--b{line-height:1;padding-bottom:0}
.loader__lk .pc{overflow:hidden}
.loader__lk .pc > *,.loader__lk .pc--a,.loader__lk .pc--c{animation:lkIn2 .8s var(--out) both}
.loader__lk .pc--b{animation-delay:calc(var(--sps,163ms) * 2)}
.loader__lk .pc--c{animation-delay:calc(var(--sps,163ms) * 4)}
@keyframes lkIn2{from{transform:translateY(60%);opacity:0}}
.lgp{position:fixed;inset:0;z-index:245;pointer-events:none;color:#fff;mix-blend-mode:difference}
.lgp.is-ld,.lgp.is-fly{mix-blend-mode:normal;color:var(--black)}
.lgp__p{position:absolute;left:0;top:0;transform-origin:0 0;font-family:var(--display);font-weight:700;font-size:100px;line-height:.86;letter-spacing:-.045em;white-space:nowrap;will-change:transform}
.lgp__p > span{display:block;padding-bottom:.06em}
a.lgp__p{pointer-events:auto}
.lgp.is-ld .lgp__p > span{animation:lkIn2 .8s var(--out) both}
.lgp.is-ld #pB > span{animation-delay:calc(var(--sps,163ms) * 2)}
.lgp.is-ld #pC > span{animation-delay:calc(var(--sps,163ms) * 4)}
.lgp.is-ld,.lgp.is-fly{z-index:270}
.is-overlay .lgp{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.menu-open .lgp{opacity:0}
.foot__row{border-top:1px solid var(--rule)}

/* ---------- home: clients (Bennett & Clive) ---------- */
.sc{position:relative;height:calc((var(--n) - 1) * 50vh + 100vh);background:var(--black);color:var(--creme)}
.sc__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;min-height:520px}
.sc__media{position:absolute;inset:0;background:var(--black);z-index:0}
.sc__a{position:absolute;inset:0;overflow:hidden;will-change:transform}
.sc__a + .sc__a{transform:translate3d(0,100%,0)}
.sc__f{position:absolute;inset:0;will-change:transform}
.sc__f img,.sc__f video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc__f video{opacity:0;transition:opacity .5s}
.sc__f video.ready{opacity:1}
.sc__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(17,19,17,.55) 0%,rgba(17,19,17,.16) 28%,rgba(17,19,17,.16) 50%,rgba(17,19,17,.82) 100%)}
.sc__titles{position:absolute;left:.27vw;right:.54vw;top:0;z-index:2}
.sc__t{position:absolute;left:0;top:0;display:block;font-size:13.4vw;line-height:.6;white-space:nowrap;color:var(--creme);transform-origin:0 100%;will-change:transform}
.sc__t:first-child{position:relative}
.sc__t{width:max-content}
.sc__t span{display:inline-block;padding-bottom:.02em}
.sc__t:hover,.sc__t:focus-visible{color:var(--pink)}
.sc__list{position:absolute;right:.7vw;top:calc(50% + 1.02vw);z-index:2;margin:0;padding:0;text-align:right;line-height:.615;color:var(--creme);pointer-events:none}
.sc__list li{white-space:nowrap;transform-origin:100% 0;will-change:transform}
.sc__list li span{display:inline-block}
.sc__info{position:absolute;left:var(--gl);bottom:clamp(18px,4.5vh,64px);z-index:3;width:min(36vw,600px);display:grid;gap:clamp(10px,1.4vh,18px)}
.sc__tag{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--creme-2)}
.sc__tag span:first-child{color:var(--cyan)}
.sc__claim{font:400 clamp(19px,1.5vw,36px)/1.2 var(--display);letter-spacing:-.02em;color:var(--creme);text-wrap:balance}
.sc__row{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap}
.sc__cpm{color:var(--creme-2)}
@media (max-width:860px){.sc__list{top:calc(50% + 2vh)}}
@media (max-height:620px) and (min-width:861px){.sc__claim{font-size:clamp(16px,1.2vw,24px)}}

/* ---------- home: statement (Bennett & Clive "Let's raise your idea") ---------- */
.ab{padding-block:clamp(90px,9vw,230px) clamp(120px,12vw,300px);overflow:hidden}
.ab__t{font-size:clamp(60px,13.4vw,420px);line-height:.8;display:grid;letter-spacing:-.05em}
.ab__t .ln{line-height:.82}
.ab__last{display:flex;justify-content:flex-end;line-height:.82;padding-bottom:.06em}
.ab__w{display:inline-block;will-change:transform;color:var(--pink-text)}
.ab__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--g);margin-top:clamp(28px,3vw,80px)}
.ab__copy{grid-column:1/span 2;display:grid;gap:clamp(16px,1.4vw,28px);justify-items:start;max-width:52ch}
.ab__copy{grid-column:1/span 2;margin-top:clamp(20px,4vw,120px)}
.ab__big{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.7vw,78px);line-height:1;letter-spacing:-.04em;max-width:30vw}
.ab__p{font-size:clamp(17px,1.2vw,29px);line-height:1.5;letter-spacing:-.01em}
.ab__p--s{font-size:clamp(15px,.95vw,22px);color:var(--green)}
.ab__p--s b{color:var(--pink-text);font-weight:600}
@media (max-width:860px){.ab__copy{grid-column:1/-1}}

/* ---------- home: services cross the reel (Bennett & Clive) ---------- */
.sv{position:relative;padding-top:clamp(150px,20.8vw,560px);padding-bottom:clamp(160px,30vh,420px)}
.sv__head{position:absolute;left:0;right:0;top:clamp(56px,6vw,150px);display:flex;justify-content:space-between;align-items:center;gap:16px;z-index:3}
.sv__reelw{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.sv__reeli{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center;justify-items:center;padding:0!important}
.sv__reel{position:relative;margin:0;width:84.6vw;height:80vh;height:80svh;border-radius:0;overflow:hidden;background:var(--black-80);isolation:isolate}
/* the reel runs as a pink duotone, so the names crossing it always read */
.sv__reel::after{content:"";position:absolute;inset:0;z-index:1;background:var(--pink);mix-blend-mode:multiply;pointer-events:none}
.sv__reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s;filter:grayscale(1) contrast(1.12) brightness(.92)}
.sv__reel video.on{opacity:1}
.sv__cap{position:absolute;left:14px;bottom:12px;z-index:2;color:var(--creme);background:rgba(17,19,17,.62);padding:7px 11px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sv__left,.sv__right{margin:0;padding:0;color:#fff;mix-blend-mode:difference;font-size:clamp(36px,6.7vw,200px);line-height:.96;letter-spacing:-.045em;text-transform:none}
.sv__left{position:fixed;left:var(--gl);bottom:52%;visibility:hidden;pointer-events:none}
.sv:not(.live) .sv__left{display:none}
.sv.live .sv__left{visibility:visible}
.sv__left li{position:absolute;left:0;bottom:0;white-space:nowrap;transform-origin:0 100%;transform:scale(0)}
.sv__right{position:relative;width:max-content;max-width:calc(100% - var(--gl) - var(--gr));margin-left:auto;margin-right:var(--gr);text-align:right}
.sv__right li{position:sticky;top:52vh;top:52svh;white-space:nowrap}
.sv__right li span{display:inline-block;transform-origin:100% 0}
.sv__sp{visibility:hidden}
@media (max-width:860px){.sv__left,.sv__right{font-size:clamp(30px,8.4vw,60px)}.sv__reel{height:auto;aspect-ratio:16/9}}

/* ---------- home: worked with, on an axis ---------- */
.ax{padding-block:clamp(120px,16vh,260px) clamp(140px,22vh,320px);overflow:hidden}
.ax__list{display:grid;gap:0}
.ax__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(8px,.55vw,14px);align-items:center;padding-inline:var(--gl) var(--gr)}
.ax__i{display:block;width:max-content;max-width:calc(50vw - var(--gl));font-family:var(--display);font-weight:700;font-size:clamp(28px,4.4vw,130px);line-height:1;letter-spacing:-.05em;white-space:nowrap;will-change:transform;transition:color .3s}
.ax__l{justify-self:end;text-align:right}
.ax__r{justify-self:start}
.ax__i span{display:inline-block}
.ax__i:hover,.ax__i:focus-visible{color:var(--pink-text)}
.ax__logo{display:block;height:var(--lh,.7em);background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ax__i--logo{padding-block:.2em}
.ax__row:nth-child(even) .ax__l{margin-right:clamp(10px,2.2vw,60px)}
.ax__row:nth-child(3n) .ax__r{margin-left:clamp(10px,3.4vw,90px)}
@media (max-width:760px){.ax__row{column-gap:6px}.ax__i{font-size:clamp(18px,6vw,34px)}.ax__row .ax__l,.ax__row .ax__r{margin:0}}

/* ---------- work index (Bennett & Clive) ---------- */
.wk{position:relative;isolation:isolate;padding-top:50svh;padding-bottom:clamp(120px,14vw,360px);min-height:100svh}
.wk__t{position:fixed;left:var(--gl);top:calc(env(safe-area-inset-top,0px) + var(--hh) + clamp(4px,1vh,16px));z-index:-1;margin:0;font-size:clamp(64px,13.4vw,420px);line-height:.86;white-space:nowrap;pointer-events:none;transition:opacity .45s var(--bc)}
.wk__tt{display:inline-block;transform-origin:0 100%}
.wk__hov{position:fixed;left:var(--gl);top:calc(env(safe-area-inset-top,0px) + var(--hh) + clamp(4px,1vh,16px));z-index:3;width:75vw;font-size:clamp(48px,13.4vw,420px);line-height:.86;pointer-events:none;transition:opacity .45s var(--bc)}
.wk__hov .ln{display:block}
.wk__hov .ln > span{display:inline-block;white-space:nowrap;transform-origin:0 100%;transform:scale(0)}
.wk__t.gone,.wk__hov.gone{opacity:0}
.wk__top{transition:opacity .35s var(--bc)}
.wk.is-hov .wk__top{opacity:0;pointer-events:none}
.wk__top{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--g);row-gap:clamp(18px,2vw,36px);align-items:end;margin-bottom:clamp(28px,3.4vw,80px)}
.wk__lede{grid-column:3/span 2;max-width:46ch;font-size:clamp(16px,1.05vw,24px);line-height:1.5}
.wk .wtools{grid-column:1/-1}
.wk__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:7.8vw;row-gap:clamp(56px,7vw,180px);align-items:start;padding-inline:7.6vw}
@media (max-width:900px){.wk__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;padding-inline:var(--gl) var(--gr)}.wk{padding-top:42svh}}
.wk__grid::after{content:"";position:absolute;top:-40px;bottom:-40px;left:calc(-1 * var(--gl));right:calc(-1 * var(--gr));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:rgba(239,231,212,.3);opacity:0;pointer-events:none;transition:opacity .55s linear}
.wk.is-hov .wk__grid::after{opacity:1;transition-duration:.25s}
.wk__c{position:relative;z-index:1;display:grid;gap:10px;min-width:0;align-content:start}
.wk.is-hov .wk__c{z-index:-1}
.wk.is-hov .wk__c.is-hot{z-index:10}
.wk__m{position:relative;margin:0;overflow:hidden;background:var(--creme-2)}
.wk__m img,.wk__m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wk__cap{display:flex;justify-content:space-between;gap:12px;font-weight:600;color:var(--black)}
.wk__ct.lc{text-transform:none}
.wk__sub{color:var(--green);margin-top:-6px}
.js .wk__c[data-reveal]{transform:translateY(50vh);opacity:0;transition:transform 1.8s var(--bo) var(--d,0ms),opacity .25s linear var(--d,0ms)}
.js .wk__c[data-reveal].in{transform:none;opacity:1}
.wk .wlist{position:relative;z-index:1}
@media (max-width:1240px){.wk__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.wk__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wk__top{grid-template-columns:1fr}.wk__lede{grid-column:1}.wk__hov{display:none}}
@media (max-width:520px){.wk__grid{grid-template-columns:1fr}}

/* ---------- modal + lightbox: the picture always fits the stage ---------- */
.modal__stage{position:relative;margin-inline:var(--gl) var(--gr);min-height:0;overflow:hidden;border-radius:var(--r-md)}
.modal__stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--black)}
.lb__stage{position:relative;margin-inline:var(--gl) var(--gr);min-height:0;touch-action:pan-y}
.lb__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}

/* ---------- lab: side projects in rows of one height ---------- */
.srows{display:grid;gap:clamp(40px,4.4vw,110px);margin-top:clamp(40px,4vw,100px)}
.srow{display:flex;gap:var(--g);align-items:flex-start}
.srow > .sp{flex:var(--r) 1 0;min-width:0}
.sp{display:grid;gap:12px;text-align:left;color:var(--creme);align-content:start}
.sp__media{position:relative;display:block;overflow:hidden;border-radius:var(--r-md);background:#000}
.sp__media img,.sp__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out),opacity .5s}
.sp:hover .sp__media img,.sp:hover .sp__media video{transform:scale(1.04)}
.sp__no{position:absolute;left:14px;top:12px;z-index:2;background:rgba(17,19,17,.6);padding:6px 10px;border-radius:999px}
.sp__meta{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.sp__t{font-size:clamp(24px,2.1vw,56px);line-height:.92;text-transform:none}
.sp__k{color:var(--black-40)}
.sp__x{color:var(--creme-2);max-width:56ch;font-size:clamp(14px,.85vw,21px);line-height:1.5}
.sp:hover .sp__t{color:var(--pink)}
@media (max-width:760px){.srow{flex-direction:column}.srow > .sp{flex:none;width:100%}}

/* ---------- case: copy that reads ---------- */
.chero__sub{max-width:34ch}
.cintro__txt .lede{max-width:52ch}
.media__cap{font-size:clamp(11px,.62vw,15px)}

/* ---------- pink grounds: black on Aira! Pink is 3.7:1, so text there is large, or sits on black ---------- */
.g-pink .lede{font-size:clamp(24px,1.45vw,36px);line-height:1.35;letter-spacing:-.02em}
.g-pink p.mono{display:inline-flex;align-items:center;justify-self:start;width:max-content;background:var(--black);color:var(--creme);padding:7px 12px;border-radius:999px}
.rhythm__side{justify-items:start}
.rhythm__stats{background:var(--black);color:var(--creme);border-left:0;padding:clamp(14px,1.4vw,30px);border-radius:var(--r-md)}
.rhythm__stats dt{color:var(--creme-2)}
.rhythm__stats dd{color:var(--creme)}
.quote__who .quote__badge,.cquote__who .quote__badge{color:var(--black)}

/* small labels on colour swatches sit on a dark tag, whatever the swatch */
.pal__chip .mono,.sw .mono{justify-self:start;align-self:flex-start;width:max-content;background:rgba(17,19,17,.8);color:var(--creme);padding:5px 9px;border-radius:999px;opacity:1}
.sw--line .mono{background:var(--black)}
.g-pink .btn--line{background:var(--creme);box-shadow:none;color:var(--black)}
.g-pink .btn--line::before{background:var(--black)}
.g-pink .btn--line:hover,.g-pink .btn--line:focus-visible{color:var(--creme)}

/* ---------- page change: the curtain ---------- */
.curtain{position:fixed;inset:0;z-index:240;pointer-events:none;visibility:hidden}
.curtain.on{pointer-events:auto}
.curtain__under{position:absolute;inset:0;background:var(--pink);clip-path:inset(100% 0 0 0)}
.curtain__panel{position:absolute;inset:0;background:var(--black);color:var(--creme);display:grid;grid-template-rows:auto 1fr auto;padding:calc(env(safe-area-inset-top,0px) + 22px) var(--gr) calc(env(safe-area-inset-bottom,0px) + 26px) var(--gl);clip-path:inset(100% 0 0 0)}
.curtain__top{display:flex;justify-content:space-between;gap:16px;color:var(--black-40)}
.curtain__title{align-self:end;font-size:clamp(56px,12vw,307px);overflow:hidden;padding-bottom:.06em}
.curtain__title span{display:inline-block}
.curtain__meta{display:flex;justify-content:space-between;gap:16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--black-80);color:var(--black-40);font-variant-numeric:tabular-nums}
.curtain__meta span:first-child{color:var(--cyan)}
.side--first{padding-top:calc(env(safe-area-inset-top,0px) + var(--hh) + clamp(40px,6vw,140px))}

/* ---------- studio: the word wall and why us (Bennett & Clive about) ---------- */
.sab{position:relative;height:190vh;overflow:clip}
.sab__in{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.sab__rows{position:absolute;inset:0;display:grid;align-content:center;font-size:clamp(64px,13.4vw,420px);line-height:.8;letter-spacing:-.05em;white-space:nowrap;color:var(--black);user-select:none}
.sab__row{will-change:transform}
.sab__media{position:relative;z-index:1;width:min(80vw,calc(80svh * 16 / 9));aspect-ratio:16/9;overflow:hidden;background:var(--black);will-change:transform}
.sab__media img,.sab__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.why{position:relative;padding-block:clamp(60px,8vw,200px) clamp(120px,14vw,360px)}
.why__t{position:sticky;top:calc(var(--hh) + 10px);margin:0;padding-left:var(--gl);font-size:clamp(64px,13.4vw,420px);line-height:.8;z-index:0}
.why__txt{position:relative;z-index:1;display:grid;gap:1em;max-width:min(1500px,66vw);margin:clamp(60px,10vw,260px) auto 0;padding-inline:var(--gl) var(--gr);text-align:center;text-transform:none;font-size:clamp(24px,3.6vw,110px);line-height:.98;letter-spacing:-.045em;text-wrap:balance;color:#EFE7D4;mix-blend-mode:difference}
@media (max-width:860px){.why__txt{max-width:none;font-size:clamp(22px,6.4vw,40px)}.sab{height:140vh}.ab__big{max-width:none;font-size:clamp(20px,5.6vw,30px)}.sv__reel{width:calc(100vw - 32px);height:auto;aspect-ratio:16/9}}

.sc__no{position:absolute;left:var(--gl);bottom:clamp(16px,3vh,40px);z-index:3;display:flex;gap:14px;color:var(--creme-2)}
.sc__no span:first-child{color:var(--cyan)}
.sc__shade{background:rgba(0,0,0,.2)!important}

/* ---------- contact: laid over the page, which blurs behind it ---------- */
.cov{position:fixed;inset:0;z-index:238;color:var(--creme)}
.cov__bg{position:absolute;inset:0;background:rgba(17,19,17,.55);-webkit-backdrop-filter:blur(48px) saturate(1.1);backdrop-filter:blur(48px) saturate(1.1);opacity:0;transition:opacity .6s var(--bc)}
.cov.on .cov__bg{opacity:1}
.cov__in{position:relative;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:calc(env(safe-area-inset-top,0px) + var(--hh) + 12px) var(--gr) calc(env(safe-area-inset-bottom,0px) + clamp(20px,4vh,56px)) var(--gl);overflow-y:auto}
.cov__top{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--creme-2);opacity:0;transition:opacity .5s var(--bc) .15s}
.cov.on .cov__top{opacity:1}
.cov__x{color:var(--creme);padding:10px 16px;border:1px solid rgba(239,231,212,.4);border-radius:999px;transition:background .3s,color .3s}
.cov__x:hover,.cov__x:focus-visible{background:var(--creme);color:var(--black)}
.cov__t{align-self:end;margin:0;font-size:clamp(64px,min(17vw,30vh),460px);line-height:.8;letter-spacing:-.055em;padding-bottom:.06em}
.cov__t .ln{display:block}
.cov__t .ln > span{display:inline-block;transform-origin:0 100%;transform:scale(0);transition:transform .9s var(--bc) calc(.12s + var(--i,0) * 90ms)}
.cov.on .cov__t .ln > span{transform:none}
.cov.on .cov__t .ln:nth-child(2) > span{color:var(--pink)}
.cov__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);margin-top:clamp(24px,4vh,64px);padding-top:clamp(16px,2vh,24px);border-top:1px solid rgba(239,231,212,.25);opacity:0;transform:translateY(20px);transition:opacity .6s var(--bc) .35s,transform .8s var(--bc) .35s}
.cov.on .cov__grid{opacity:1;transform:none}
.cov__col{display:grid;gap:10px;align-content:start;min-width:0}
.cov__col h3{color:var(--creme-2);font-weight:400}
.cov__col ul{display:grid;gap:6px}
.cov__col li,.cov__col a{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.25vw,30px);letter-spacing:-.025em;line-height:1.2}
.cov__col a:hover{color:var(--cyan)}
.cov__col [data-clock]{display:inline}
.cov__mail{font-family:var(--display);font-weight:700;font-size:clamp(22px,2vw,52px);letter-spacing:-.04em;line-height:1.05;overflow-wrap:anywhere}
.cov__mail a{color:var(--cyan)}
.cov__note{color:var(--creme-2);max-width:34ch}
@media (max-width:860px){.cov__grid{grid-template-columns:1fr 1fr;row-gap:28px}.cov__col:first-child{grid-column:1/-1}}

@media (max-width:860px){.hero__copy.wrap{left:var(--gl);right:var(--gr);width:auto;padding-inline:0}}

.ab__copy{max-width:none}
/* the statement wraps around the mark in the middle of the screen */
.why__txt .ww{white-space:nowrap}
.why__txt .wc{display:inline-block;will-change:transform}

/* ================= v10: Bennett & Clive, measured at 1854 x 924 =================
   Their Inter caps are 72.7% of the size, Fluro's 56.6%, so every size below is theirs x 1.285
   and every line height is theirs / 1.285: the caps land on the same pixels. */
.sc__no{display:none}
.sc__t span{padding-top:.02em}
/* header: the four words top-right, white, inverting over whatever is behind */
@media (min-width:981px){
  .hdr{color:#fff;mix-blend-mode:difference}
  .hdr.away{transform:none}
  .hdr__in.wrap{display:flex;justify-content:flex-end;align-items:flex-start;height:auto;margin:0;padding:10px .54vw 0}
  /* the way home: the lockup top-left, at the height of the menu words; on the home page it waits until
     the clients have scrolled away, so it never sits on the giant names */
  .hdr__logo{position:absolute;left:.54vw;top:10px;height:auto;color:#fff!important;transition:opacity .45s var(--bc)}
  .hdr__logo .lk{font-size:clamp(18px,1.42vw,36px)}
  .is-home:not(.past-sc) .hdr__logo{opacity:0;pointer-events:none}
  .hdr__nav{background:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;gap:.85vw;border-radius:0}
  .hdr__nav a{padding:0 0 .14em;border-radius:0;background:none!important;color:#fff!important;font-family:var(--display);font-weight:700;font-size:clamp(15px,1.42vw,36px);letter-spacing:-.03em;text-transform:uppercase;line-height:1}
  .hdr__nav a .roll{line-height:1}
  .hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .8s var(--bc)}
  .hdr__nav a[aria-current="page"]::after,.hdr__nav a:hover::after{transform:scaleX(1);transform-origin:left}
  .hdr__right{position:absolute;right:.54vw;top:calc(10px + 1.42vw + 14px);gap:14px}
  .hdr__right .bpm,.hdr__right .hdr__sound{background:none!important;color:#fff!important;height:auto;padding:0;font-size:11px}
  .hdr__cta{display:none!important}
  .cov-open .hdr__nav a[data-nav="contact"]::after{transform:scaleX(1)}
}
/* statement: straight after the clients, lines at B&C spacing, copy in column three */
.ab{padding-block:0 clamp(80px,6vw,160px)}
.ab__t.wrap{padding-left:.27vw;padding-right:.54vw;font-size:13.4vw;line-height:.6;letter-spacing:-.05em}
.ab__t .ln,.ab__last{line-height:.6}
.ab__grid.wrap{padding-inline:7.8125vw;column-gap:7.8125vw;margin-top:clamp(40px,5.6vw,130px)}
.ab__copy{grid-column:3/span 1!important;margin-top:0!important;max-width:none}
.ab__big{font-size:clamp(20px,2.68vw,76px)!important;line-height:.95!important;letter-spacing:-.05em!important;max-width:none!important;text-wrap:auto}
.ab__copy .btn{height:auto;padding:7px 14px;font:400 clamp(13px,.86vw,20px)/1 var(--display);letter-spacing:-.01em;text-transform:none;border:1px solid currentColor}
/* services: the reel is the content box of the grid (7.8125vw in), 80% of the height */
.sv{padding-top:22vh}
.sv__head{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sv__reeli.wrap{padding:0 7.8125vw!important}
.sv__reel{width:100%!important;height:80vh!important;height:80svh!important}
.sv__left,.sv__right{font-size:clamp(34px,6.7vw,200px)!important;line-height:.7!important;letter-spacing:-.05em!important}
.sv__left{left:.54vw!important}
.sv__right{margin-right:.54vw!important;max-width:calc(100% - 1.08vw)!important}
.sv__right li{line-height:.7}
/* clients: two columns that meet at the centre, 9.66px apart, B&C size and spacing */
.ax{padding-block:50vh 30vh}
.ax__row{column-gap:.52vw;padding-inline:0}
.ax__i{font-size:clamp(24px,4.02vw,120px)!important;line-height:.74!important;letter-spacing:-.05em!important;padding-block:.08em}
.ax__row .ax__l,.ax__row .ax__r{margin:0!important}
.ax__logo{height:var(--lh,.55em)}
/* footer: four columns inside 7.8125vw, labels at B&C size, then the wordmark */
.foot__grid.wrap{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:7.8125vw;row-gap:27px;padding:clamp(120px,15.6vw,300px) 7.8125vw 0}
.foot__col h2{margin-bottom:6px}
.foot__col ul{gap:7px}
.foot__col a,.foot__col span{font-size:clamp(15px,1.34vw,32px);line-height:1;letter-spacing:-.05em}
.foot__row{display:none}
.foot__lk{padding-top:clamp(60px,7vw,170px)!important}
/* contact: the page blurs under a pale wash; CONTACT. and the footer columns sit in black */
.cov{color:var(--black)}
.cov__bg{background:rgba(239,231,212,.42);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}
.cov__in{display:block;padding:0}
.cov__top{position:absolute;left:.54vw;top:10px;color:var(--black)}
.cov__top > span{display:none}
.cov__x{color:var(--black);border-color:rgba(17,19,17,.4);font-family:var(--mono);font-size:11px}
.cov__x:hover,.cov__x:focus-visible{background:var(--black);color:var(--creme)}
.cov__t{position:absolute;left:7.8125vw;top:calc(50% + 4.6vh);font-size:13.4vw;line-height:.6;color:var(--black);padding:0}
.cov.on .cov__t .ln:nth-child(2) > span{color:inherit}
.cov__grid{position:absolute;left:0;right:0;top:81%;margin:0;padding:0 7.8125vw;border:0;column-gap:7.8125vw;row-gap:27px}
.cov__col h3{color:rgba(17,19,17,.55)}
.cov__col li,.cov__col a,.cov__mail{font-size:clamp(15px,1.34vw,32px);line-height:1.05;letter-spacing:-.05em}
.cov__col a{text-decoration:underline;text-underline-offset:3px}
.cov__col a:hover{color:var(--pink-text)}
.cov__note{color:rgba(17,19,17,.6);font-size:12px}
@media (max-width:860px){.cov__t{top:30%;left:var(--gl);font-size:22vw}.cov__grid{top:52%;padding:0 var(--gl)}.ab__copy{grid-column:1/-1!important}.ab__grid.wrap{padding-inline:var(--gl)}.foot__grid.wrap{padding:96px var(--gl) 0;grid-template-columns:1fr 1fr}.sv__reeli.wrap{padding:0 var(--gl)!important}.sv__reel{height:auto!important;aspect-ratio:16/9}}
.foot__col button{font-family:var(--display);font-weight:700;font-size:clamp(15px,1.34vw,32px);line-height:1;letter-spacing:-.05em;color:inherit;text-transform:none}
.foot__col button:hover{color:var(--acc)}
@media (max-width:980px){.sc__titles{top:calc(env(safe-area-inset-top,0px) + var(--hh) + 14px);left:var(--gl);right:var(--gr)}.sc__list{right:var(--gr)}}
@media (max-width:760px){.ax__row{column-gap:10px}.ax__i{font-size:clamp(18px,5.4vw,30px)!important;line-height:.95!important}.cov__t{font-size:16.5vw}}
@media (max-width:860px){.cov__bg{background:rgba(239,231,212,.72)}.cov__in{overflow-y:auto}}

/* the client names, compacted: tighter tracking so they take less of the screen */
.sc__t,.sc__list li{letter-spacing:-.06em}
.sc__t span,.sc__list li span{padding-right:.06em}