/* page reset (as on the prototype) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
@font-face{font-family:"PP Neue Machina";src:url(/fonts/NeueMachina-PlainRegular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PP Neue Machina";src:url(/fonts/NeueMachina-PlainUltrabold.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* Layout: one quiet field, one live specimen, one grid — labels in columns 1–3, content from column 4; amber only where something is being clarified. */
:root{
  --bg:#ECEEED;
  --fg:#0D1012;
  --muted:#5F676B;
  --line:rgba(13,16,18,.12);
  --accent:#F0A500;
  --accent-ink:#8C5C00;
  --plate:#DEE1E0;
  --plate-2:#CDD2D1;
  --display:"PP Neue Machina","Funnel Display","Helvetica Neue",Arial,sans-serif;
  --brand:"PP Neue Machina","Funnel Display","Helvetica Neue",Arial,sans-serif;
  --sans:"Funnel Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gx:clamp(16px,3.2vw,44px);
  --col:clamp(12px,1.6vw,24px);
  --t-hero:clamp(2.45rem,6.1vw,7rem);
  --t-h2:clamp(1.7rem,3vw,3rem);
  --t-body:clamp(1rem,1.02vw,1.1rem);
  --t-mono:.72rem;
  --ease:cubic-bezier(.22,1,.36,1);
  --d1:.45s;--d2:.9s;--d3:1.3s;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0D0E;--fg:#E6E9E7;--muted:#878E92;--line:rgba(230,233,231,.12);
    --accent:#FFB61A;--accent-ink:#FFB61A;--plate:#141819;--plate-2:#1C2122;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B0D0E;--fg:#E6E9E7;--muted:#878E92;--line:rgba(230,233,231,.12);
  --accent:#FFB61A;--accent-ink:#FFB61A;--plate:#141819;--plate-2:#1C2122;color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:var(--t-body);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
::selection{background:var(--accent);color:#0D1012}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance;letter-spacing:-.03em;line-height:1}
p{margin:0;text-wrap:pretty}
.mono{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.05em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.wrap{padding-inline:var(--gx);max-width:1760px;margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col)}
.c-lbl{grid-column:1/-1}
.c-main{grid-column:1/-1;min-width:0}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;clip-path:inset(0 0 0 0);transition:clip-path var(--d3) var(--ease);animation:introFailsafe .01s 3.2s forwards}
#intro.out{clip-path:inset(0 0 100% 0)}
#intro .ib{display:flex;align-items:baseline;gap:1.2rem}
#intro .iw{font-family:var(--brand);font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.04em}
#intro .prog{position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--fg);transform-origin:left;transform:scaleX(var(--ip,0))}
@keyframes introFailsafe{to{visibility:hidden;opacity:0}}

/* ---------- case transition panel ---------- */
#wipe{position:fixed;inset:0;z-index:80;background:var(--fg);color:var(--bg);display:flex;align-items:flex-end;padding:var(--gx);padding-bottom:calc(var(--gx) + env(safe-area-inset-bottom,0px));clip-path:inset(100% 0 0 0);pointer-events:none}
#wipe.in{clip-path:inset(0 0 0 0);transition:clip-path .6s var(--ease)}
#wipe.out{clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
#wipe p{font-family:var(--display);font-size:var(--t-h2);letter-spacing:-.03em;overflow:hidden}
#wipe p span{display:inline-block;transform:translateY(105%)}
#wipe.in p span{transform:none;transition:transform .7s var(--ease) .12s}
.arrive #intro{display:none}
.arrive #wipe:not(.out){clip-path:inset(0 0 0 0)}
.arrive #wipe:not(.out) p span{transform:none}

/* ---------- gl ---------- */
#gl,#metal,#ann{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%;display:block}
/* metal & plastic objects: empty anchors the WebGL layer follows */
.sec{position:relative}
.metal{position:absolute;pointer-events:none;aspect-ratio:1;max-width:100%}
footer{position:relative}
.grabbing,.grabbing *{-webkit-user-select:none!important;user-select:none!important}
.m-footer{right:7vw;top:clamp(-40px,-3vw,-10px);width:clamp(150px,17vw,320px)}
.m-footer2{left:4vw;top:clamp(20px,5vw,100px);width:clamp(120px,13vw,240px)}
@media (max-width:1000px){.m-footer{right:4vw;top:-8vw;width:30vw}.m-footer2{left:0;top:6vw;width:20vw}}
main,header,footer,#caseview,#aiview{position:relative;z-index:1}

/* ---------- cursor ---------- */
#cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;display:none;mix-blend-mode:difference;color:#FFFFFF}
.has-cursor #cursor{display:block}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor .compare{cursor:none}
#cursor .dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#FFFFFF;transition:transform var(--d1) var(--ease)}
#cursor .ring{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1px solid rgba(255,255,255,.35);transition:transform var(--d1) var(--ease),border-color var(--d1)}
#cursor .lbl{position:absolute;left:24px;top:-.5em;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity var(--d1) var(--ease),transform var(--d1) var(--ease)}
#cursor[data-state="link"] .ring{transform:scale(1.5);border-color:rgba(255,255,255,.8)}
#cursor[data-state="label"] .ring{transform:scale(.45);border-color:#FFFFFF}
#cursor[data-state="label"] .lbl{opacity:1;transform:none}
#cursor[data-state="hidden"]{opacity:0}
#cursor.down .ring{transform:scale(.7)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:transform var(--d2) var(--ease)}
.nav.hide{transform:translateY(-110%)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px;position:relative}
.nav::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:var(--navbg,0);transition:opacity var(--d2)}
.logo{font-family:var(--brand);font-weight:800;font-size:1.4rem;letter-spacing:-.04em;line-height:1;display:inline-flex;align-items:baseline;gap:.08em}
.logo i{display:inline-block;width:.22em;height:.22em;background:var(--accent);border-radius:50%}
.nav ul{display:flex;gap:clamp(1rem,2.2vw,2.2rem)}
.nav ul a{font-size:.92rem;display:inline-block;overflow:hidden;vertical-align:top;position:relative}
.nav ul a span{display:block;transition:transform var(--d1) var(--ease)}
.nav ul a span+span{position:absolute;inset:0;transform:translateY(100%)}
.nav ul a:hover span:first-child{transform:translateY(-100%)}
.nav ul a:hover span+span{transform:none}
.nav__r{display:flex;align-items:center;gap:1.4rem}
.menu-btn{display:none}
.site-sw{display:inline-flex;padding:2px;border:1px solid var(--line);border-radius:999px}
.site-sw a{padding:.32rem .7rem;border-radius:999px;color:var(--muted);transition:color var(--d1) var(--ease),background var(--d1) var(--ease)}
.site-sw a:hover{color:var(--fg)}
.site-sw a.on{background:var(--fg);color:var(--bg)}
@media (max-width:520px){.theme-sw__l{display:none}.nav__r{gap:.9rem}}
@media (max-width:400px){.nav__r{gap:.6rem}.nav .site-sw a{padding:.3rem .48rem;font-size:.66rem}.nav__in{gap:.6rem}}
.theme-sw{display:inline-flex;align-items:center;gap:.55rem;color:var(--muted);transition:color var(--d1) var(--ease)}
.theme-sw:hover{color:var(--fg)}
.theme-sw__t{position:relative;width:30px;height:16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--fg) 35%,transparent);transition:border-color var(--d1) var(--ease)}
.theme-sw:hover .theme-sw__t{border-color:var(--fg)}
.theme-sw__t::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--fg);transition:transform var(--d1) var(--ease)}
.theme-sw[aria-checked="true"] .theme-sw__t::after{transform:translateX(14px)}
html.theme-anim,html.theme-anim *{transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),fill .5s var(--ease)!important}
#menu{position:fixed;inset:0;z-index:49;background:var(--bg);padding:calc(90px + env(safe-area-inset-top,0px)) var(--gx) var(--gx);display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(0 0 100% 0);transition:clip-path var(--d2) var(--ease);visibility:hidden}
#menu.open{clip-path:inset(0 0 0 0);visibility:visible}
.menu__foot{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}
#menu a.big{font-family:var(--display);font-size:clamp(2.2rem,10vw,4rem);letter-spacing:-.04em;line-height:1.1;display:block}

/* ---------- reveal ---------- */
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.js [data-split] .w>span{display:inline-block;transform:translateY(108%);transition:transform var(--d3) var(--ease);transition-delay:calc(var(--i,0) * 40ms + var(--d,0ms))}
.js [data-split].in .w>span{transform:none}
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- section opener (one style everywhere) ---------- */
.sec{padding-top:clamp(110px,15vw,230px)}
.sec-head{position:relative;padding-top:1.1rem;margin-bottom:clamp(2.6rem,6vw,5.2rem);align-items:baseline;row-gap:.8rem}
.sec-head::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left;transform:scaleX(var(--hl,1))}
.js .sec-head::before{--hl:0;transition:transform var(--d3) var(--ease)}
.js .sec-head.in::before{--hl:1}
.sec-head .mono{color:var(--muted)}
.sec-head h2{font-size:var(--t-h2)}

/* ---------- hero ---------- */
@media (pointer:coarse){.hero{-webkit-user-select:none;user-select:none}}
.hero{min-height:92svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(110px + env(safe-area-inset-top,0px));padding-bottom:clamp(28px,4vw,52px);-webkit-touch-callout:none}
.hero__eyebrow{margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.hero h1{font-size:var(--t-hero);max-width:11.5ch;letter-spacing:-.045em;line-height:.93}
.hl{position:relative;white-space:nowrap}
.hl::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.07em;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform var(--d3) var(--ease) 1.1s}
.is-ready .hl::after,html:not(.js) .hl::after{transform:scaleX(1)}
.hero__foot{margin-top:clamp(2rem,4.5vw,4rem);align-items:end;row-gap:1.6rem}
.hero__lede{grid-column:1/span 5;max-width:42ch;color:var(--muted)}
.hero__r{grid-column:7/-1;display:flex;justify-content:flex-end;align-items:baseline;gap:2rem;flex-wrap:wrap}
.ulink{position:relative;display:inline-flex;gap:.5em;align-items:baseline;padding-bottom:.2em}
.ulink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform var(--d2) var(--ease)}
.ulink:hover::after{transform:scaleX(0);transform-origin:left}
.ulink .arr{display:inline-block;transition:transform var(--d2) var(--ease)}
.ulink:hover .arr{transform:translateY(3px)}

/* ---------- marquee ---------- */
.clients{border-block:1px solid var(--line);padding-block:1.15rem;display:flex;align-items:center;gap:2rem;overflow:hidden;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.clients__lbl{flex:none;padding-left:var(--gx)}
.marquee{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__track span{font-family:var(--display);font-size:clamp(1.15rem,1.6vw,1.45rem);letter-spacing:-.02em;padding-right:3rem;white-space:nowrap;display:inline-flex;align-items:center;gap:3rem}
.marquee__track span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.5}


/* ---------- placeholders ---------- */
.plate{--ox:30%;--oy:30%;position:relative;overflow:hidden;background:radial-gradient(110% 90% at var(--ox) var(--oy),color-mix(in oklab,var(--accent) 12%,var(--plate)) 0%,var(--plate) 50%,var(--plate-2) 100%);container-type:inline-size}
.plate[data-v="2"]{--ox:72%;--oy:65%}
.plate[data-v="3"]{--ox:50%;--oy:105%}
.plate[data-v="4"]{--ox:18%;--oy:82%}
.plate__orb{position:absolute;left:50%;top:50%;width:28cqw;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 34% 28%,color-mix(in oklab,var(--bg) 80%,var(--accent)) 0%,var(--plate) 40%,color-mix(in oklab,var(--fg) 26%,var(--plate-2)) 100%);box-shadow:0 3cqw 7cqw -3cqw color-mix(in srgb,var(--fg) 26%,transparent);animation:orb 14s ease-in-out infinite alternate}
.plate[data-v="2"] .plate__orb{border-radius:22%}
.plate[data-v="3"] .plate__orb{width:44cqw;aspect-ratio:2.2;border-radius:999px}
.plate[data-v="4"] .plate__orb{border-radius:50% 50% 14% 14%}
@keyframes orb{0%{transform:translate(-53%,-48%) rotate(-3deg)}100%{transform:translate(-47%,-52%) rotate(4deg)}}
.plate__hud{position:absolute;left:0;right:0;bottom:0;padding:clamp(10px,2.6cqw,18px);display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:clamp(.56rem,1.5cqw,.68rem);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.plate__hud span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- reel ---------- */
.reel{position:relative;height:270vh;height:270svh}
.reel__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.reel__meta{position:absolute;left:var(--il,5vw);right:var(--il,5vw);top:calc(var(--it,20vh) - 1.9rem);display:flex;justify-content:space-between;gap:1rem;opacity:var(--mo,1)}
.reel__frame{position:absolute;inset:0;clip-path:inset(var(--it,20vh) var(--il,5vw));will-change:clip-path}
.reel__frame{background:var(--plate)}
.reel__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(var(--rs,1.06))}
/* overlay on the reel: a halftone screen that hides compression, a field of crosses, corner marks and timecode */
.reel__screen,.reel__grid{position:absolute;inset:0;pointer-events:none}
.reel__screen{background-image:radial-gradient(circle,rgba(0,0,0,.42) 0 .75px,transparent 1.15px);background-size:3px 3px;opacity:.55}
.reel__grid{mix-blend-mode:difference;color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 31.5v9M31.5 36h9' stroke='%23fff' stroke-width='1' stroke-opacity='.5'/%3E%3C/svg%3E");background-size:72px 72px;background-position:center}
.reel__grid::before{content:"";position:absolute;inset:clamp(14px,2vw,28px);opacity:.85;background:
  linear-gradient(#fff,#fff) top left/22px 1px no-repeat,linear-gradient(#fff,#fff) top left/1px 22px no-repeat,
  linear-gradient(#fff,#fff) top right/22px 1px no-repeat,linear-gradient(#fff,#fff) top right/1px 22px no-repeat,
  linear-gradient(#fff,#fff) bottom left/22px 1px no-repeat,linear-gradient(#fff,#fff) bottom left/1px 22px no-repeat,
  linear-gradient(#fff,#fff) bottom right/22px 1px no-repeat,linear-gradient(#fff,#fff) bottom right/1px 22px no-repeat}
.reel__grid::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:linear-gradient(#fff,#fff) center/1px 64px no-repeat,linear-gradient(#fff,#fff) center/64px 1px no-repeat;opacity:.6}
.reel__tc{position:absolute;right:calc(clamp(14px,2vw,28px) + 30px);bottom:calc(clamp(14px,2vw,28px) - .35em);font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:#fff;mix-blend-mode:difference;font-variant-numeric:tabular-nums;pointer-events:none}
/* sits on the footage, so it keeps its own dark chip in both themes */
.reel__snd{position:absolute;left:calc(var(--il,5vw) + 1rem);bottom:calc(var(--it,20vh) + 1rem);z-index:2;display:inline-flex;align-items:center;gap:.6em;padding:.55rem .9rem;border-radius:999px;background:rgba(11,13,14,.55);color:#E6E9E7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background var(--d1) var(--ease)}
.reel__snd:hover{background:rgba(11,13,14,.8)}
.reel__snd i{display:inline-block;width:7px;height:7px;border-radius:50%;border:1px solid currentColor}
.reel__snd[aria-pressed="true"] i{background:var(--accent);border-color:var(--accent)}

/* ---------- work ---------- */
.work-list{border-top:1px solid var(--line)}
.wrow{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr) minmax(0,2fr);gap:1rem;align-items:baseline;padding-block:clamp(1rem,1.8vw,1.5rem);border-bottom:1px solid var(--line);transition:color var(--d1) var(--ease)}
.wrow__t{font-family:var(--display);font-size:clamp(1.35rem,2.3vw,2.2rem);letter-spacing:-.03em;line-height:1.05;transition:transform var(--d2) var(--ease)}
.wrow:hover .wrow__t{transform:translateX(.3em)}
.wrow .yr{text-align:right}
.wrow__thumb{display:none}
.work-list:hover .wrow:not(:hover){color:var(--muted)}
#preview{position:fixed;left:0;top:0;width:clamp(260px,24vw,400px);aspect-ratio:16/10;z-index:40;pointer-events:none;overflow:hidden;border-radius:3px;opacity:0;transform:translate3d(-50vw,-50vh,0);transition:opacity var(--d1),clip-path var(--d2) var(--ease);clip-path:inset(50% 0 50% 0);will-change:transform}
#preview.on{opacity:1;clip-path:inset(0 0 0 0)}
#preview__strip{position:absolute;inset:0;transition:transform var(--d2) var(--ease)}
#preview__strip img{position:absolute;left:0;width:100%;height:100%;object-fit:cover;display:block}
.work-foot{margin-top:1.2rem}
.wfilter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.wfilter button{padding:.5rem .85rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);transition:color var(--d1) var(--ease),background var(--d1) var(--ease),border-color var(--d1) var(--ease)}
.wfilter button span{opacity:.6;margin-left:.25em}
.wfilter button:hover{color:var(--fg);border-color:color-mix(in srgb,var(--fg) 40%,transparent)}
.wfilter button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.wrow__thumb img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- fields (pinned stage) ---------- */
.fp{position:relative;height:calc(100svh + (var(--n) - 1) * 62svh)}
.fp__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.9rem,2.4vh,1.7rem);padding:84px var(--gx) 76px;text-align:center}
.fp__icon{display:block;width:clamp(150px,26vmin,250px);aspect-ratio:1;max-width:100%;flex:none}
.fp__stack{display:grid;width:100%;max-width:62rem;justify-items:center}
.fp__stack>*{grid-area:1/1;min-width:0;width:100%}
/* each title keeps its own height, so a short one rolling away is clipped by its own box */
.fp__t{align-self:center}
.fp__d{align-self:start}
.fp__t{font-size:clamp(1.7rem,4.2vw,4rem);letter-spacing:-.045em;line-height:1;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
/* titles roll well past their own box and fade, so descenders (g, p) and i-dots never peek into the next one */
.fp__t span{display:block;transform:translateY(135%);opacity:0;transition:transform var(--d2) var(--ease),opacity .4s var(--ease)}
.fp__t.on span{transform:none;opacity:1;transition:transform var(--d2) var(--ease),opacity .5s var(--ease) .08s}
.fp__t.past span{transform:translateY(-135%)}
.fp__d{display:flex;flex-direction:column;align-items:center;gap:1rem;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .9s var(--ease)}
.fp__d.on{opacity:1;transform:none;transition-delay:.12s}
.fp__d p{color:var(--muted);max-width:44ch;font-size:clamp(1rem,1.25vw,1.2rem)}
.fp__d .ex{display:flex;flex-direction:column;align-items:center;gap:.55rem;color:var(--muted)}
.fp__d .ex a{color:var(--fg);border-bottom:1px solid var(--line);padding-bottom:.15em;transition:border-color var(--d1) var(--ease)}
.fp__d .ex a:hover{border-color:var(--fg)}
.fp__prog{position:absolute;left:var(--gx);right:var(--gx);bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;gap:1rem;color:var(--muted)}
.fp__prog .track{width:min(220px,40vw);height:1px;background:var(--line);position:relative}
.fp__prog .track i{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(var(--p,0))}

/* ---------- on AI ---------- */
.ai-intro{max-width:52ch;display:grid;gap:1rem}
.ai-intro p+p{color:var(--muted)}
.compare{position:relative;margin-top:clamp(2.6rem,5vw,4.4rem);aspect-ratio:2.1/1;max-width:100%;background:transparent;border:1px solid var(--line);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
#cmp,#cmp3d{position:absolute;inset:0;width:100%;height:100%;display:block}
#cmp3d{clip-path:inset(0 0 0 var(--x,50%))}
.compare__lbl em{display:block;max-width:min(30ch,44vw);margin-top:.4rem;font-style:normal;text-transform:none;letter-spacing:.01em;color:var(--fg);opacity:.75;line-height:1.4}
.compare__line{position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;background:var(--fg);pointer-events:none}
.compare__handle{position:absolute;top:50%;left:var(--x,50%);width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--bg);border:1px solid var(--fg);pointer-events:none;transition:transform var(--d1) var(--ease)}
.compare__handle::before,.compare__handle::after{content:"";position:absolute;top:50%;width:5px;height:5px;border-top:1px solid var(--fg);border-left:1px solid var(--fg);margin-top:-3px}
.compare__handle::before{left:11px;transform:rotate(-45deg)}
.compare__handle::after{right:11px;transform:rotate(135deg)}
.compare.drag .compare__handle{transform:scale(.85)}
.compare__lbl{position:absolute;top:1rem;color:var(--muted);pointer-events:none}
.compare__lbl.l{left:1rem}
.compare__lbl.r{right:1rem}
#cmp-range{position:absolute;left:0;bottom:0;width:100%;height:2px;margin:0;opacity:0}
#cmp-range:focus-visible ~ .compare__handle{outline:2px solid var(--accent);outline-offset:4px}
.compare-cap{margin-top:.9rem}
.compare__gen{position:absolute;inset:0;pointer-events:none;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.gen-ui{position:absolute;left:1rem;bottom:1rem;display:flex;align-items:center;gap:.9rem;pointer-events:auto}
.gen-btn{display:inline-flex;align-items:center;gap:.55em;padding:.55rem .95rem .55rem .8rem;border:1px solid color-mix(in srgb,var(--fg) 28%,transparent);border-radius:999px;background:var(--bg);transition:background var(--d1) var(--ease),color var(--d1) var(--ease),border-color var(--d1) var(--ease),opacity var(--d1)}
.gen-btn:hover:not(:disabled){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.gen-btn:disabled{opacity:.45;cursor:default}
.gen-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gen-ic{display:inline-block;transition:transform .9s var(--ease)}
.gen-btn.busy .gen-ic{transform:rotate(360deg);transition:transform .9s cubic-bezier(.3,0,.2,1)}
.gen-cr{color:var(--muted);font-variant-numeric:tabular-nums;transition:color .4s}
.gen-cr.drop{color:var(--accent);transition:none}
.vs{margin-top:clamp(3rem,6vw,5rem)}
.vs__row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,4fr);gap:1rem;padding-block:.95rem;border-top:1px solid var(--line);align-items:baseline}
.vs__row:last-child{border-bottom:1px solid var(--line)}
.vs__head{border-top:0;padding-block:0 .6rem;color:var(--muted)}
.vs__row .ai{color:var(--muted)}
.vs__row .ml{display:none}
.ai-lists{margin-top:clamp(3rem,6vw,5rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col)}
.ai-lists .mono{display:block;padding-bottom:.7rem;color:var(--muted)}
.ai-lists li{padding-block:.7rem;border-top:1px solid var(--line)}
.ai-note{margin-top:1.4rem;color:var(--muted);max-width:52ch}

/* ---------- process ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--col);padding-top:2.2rem}
.steps__line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.steps__line i{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(var(--p,0))}
.step{position:relative;display:flex;flex-direction:column;gap:.6rem;min-width:0}
.step::before{content:"";position:absolute;top:calc(-2.2rem - 4px);left:0;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--muted);transition:background var(--d1),border-color var(--d1)}
.step.on::before{background:var(--accent);border-color:var(--accent)}
.step h3{font-size:clamp(1.1rem,1.4vw,1.35rem);letter-spacing:-.02em;line-height:1.15}
.step p{font-size:.95rem;color:var(--muted)}
.step .mono{color:var(--muted)}
.process-note{margin-top:clamp(2.6rem,5vw,4rem);max-width:52ch;color:var(--muted)}

/* ---------- studio ---------- */
.studio-text{max-width:52ch;font-size:clamp(1.1rem,1.4vw,1.35rem);line-height:1.45}
.people{margin-top:clamp(2.6rem,5vw,4.4rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col)}
.person .plate{aspect-ratio:4/5;max-width:100%}
.person__meta{padding-top:.8rem;display:flex;flex-direction:column;gap:.2rem}
.person__meta b{font-weight:500}

/* ---------- contact ---------- */
.contact{padding-bottom:clamp(60px,8vw,110px)}
.mail{display:flex;flex-wrap:wrap;align-items:baseline;gap:.8rem 1.6rem}
.mail__addr{font-family:var(--display);font-size:clamp(2rem,5.6vw,5.6rem);letter-spacing:-.045em;line-height:1;position:relative;display:inline-block;user-select:all;-webkit-user-select:all}
.mail__addr::after{content:"";position:absolute;left:0;right:0;bottom:-.05em;height:.04em;background:var(--fg);transform:scaleX(0);transform-origin:right;transition:transform var(--d2) var(--ease)}
.mail__addr:hover::after{transform:scaleX(1);transform-origin:left}
.contact__meta{margin-top:clamp(2.6rem,5vw,4.4rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem var(--col)}
.contact__meta>div{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.contact__meta .mono{color:var(--muted)}
.clock{font-variant-numeric:tabular-nums}

/* ---------- case pages ---------- */
#caseview,#aiview{padding-top:calc(110px + env(safe-area-inset-top,0px))}
#aiview{padding-bottom:clamp(4rem,9vw,8rem)}
#aiview .ai-intro{margin-top:clamp(2.4rem,5vw,4rem)}
#aiview .ai-intro p{font-size:clamp(1.1rem,1.4vw,1.35rem);line-height:1.45}
.case__top{display:flex;justify-content:space-between;gap:1rem;margin-bottom:clamp(2.4rem,5vw,4rem)}
.case__back .arr{display:inline-block;transition:transform var(--d2) var(--ease)}
.case__back:hover .arr{transform:translateX(-4px)}
.case__title{font-size:clamp(2.6rem,7.2vw,7.4rem);letter-spacing:-.05em;line-height:.92;max-width:14ch}
.case__metaline{margin-top:1.4rem;color:var(--muted)}
.case__lede{margin-top:clamp(1.6rem,3vw,2.4rem);font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.4;max-width:42ch}
.case__hero{margin-top:clamp(2.4rem,5vw,4rem);max-width:100%;overflow:hidden;position:relative;background:var(--plate)}
.case__hero>img,.case__hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(var(--hs,1.08))}
.case__blocks{margin-top:clamp(4rem,8vw,7rem);display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--col)}
.cb{border-top:1px solid var(--line);padding-top:.9rem;display:flex;flex-direction:column;gap:.8rem;min-width:0}
.cb .mono{color:var(--muted)}
.cb p{font-size:.98rem}
.case__quote{margin:clamp(4rem,8vw,7rem) 0 0;max-width:32ch}
.case__quote blockquote{margin:0;font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2.6rem);letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
.case__quote figcaption{margin-top:1rem;color:var(--muted)}
.gal{margin-top:clamp(4rem,8vw,7rem);columns:2;column-gap:var(--col)}
.gal__it{break-inside:avoid;margin-bottom:var(--col);background:var(--plate);max-width:100%}
.gal__it img,.gal__it video{display:block;width:100%;height:auto;max-width:100%}
.gal video,.case__hero video{cursor:pointer}
.case__src{display:inline-block;margin-top:1rem;border-bottom:1px solid var(--line);padding-bottom:.2em;transition:border-color var(--d1) var(--ease)}
.case__src:hover{border-color:var(--fg)}
.nextcase{display:block;margin-top:clamp(5rem,10vw,9rem);border-top:1px solid var(--line);padding-top:1.1rem}
.nextcase .mono{color:var(--muted)}
.nextcase__t{font-family:var(--display);font-size:clamp(2.2rem,6vw,6rem);letter-spacing:-.045em;line-height:1;display:flex;gap:.25em;align-items:baseline;margin-top:1rem;transition:transform var(--d2) var(--ease)}
.nextcase:hover .nextcase__t{transform:translateX(.12em)}

/* ---------- footer ---------- */
footer{overflow:hidden;padding-top:clamp(40px,6vw,80px);padding-bottom:calc(var(--gx) + env(safe-area-inset-bottom,0px))}
.wordmark{display:flex;justify-content:space-between;font-family:var(--brand);font-weight:800;font-size:clamp(5rem,24vw,28rem);letter-spacing:-.04em;line-height:.78;padding-top:.06em;overflow:hidden;user-select:none;transform:skewX(var(--skew,0deg));transform-origin:bottom}
.wordmark span{display:inline-block;transform:translateY(var(--ty,0%));will-change:transform}
.wordmark span.dot{color:var(--accent)}
.legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.2rem;border-top:1px solid var(--line);margin-top:1.2rem;color:var(--muted)}

#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,calc(100% + 48px));visibility:hidden;z-index:95;background:var(--fg);color:var(--bg);padding:.65rem 1rem;border-radius:999px;transition:transform var(--d2) var(--ease),visibility 0s var(--d2)}
#toast.on{transform:translate(-50%,0);visibility:visible;transition:transform var(--d2) var(--ease)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav ul,.nav__time{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:1000px){
  .c-lbl,.c-main{grid-column:1/-1}
  .hero__lede,.hero__r{grid-column:1/-1}
  .hero__r{justify-content:flex-start}
  .steps{grid-template-columns:minmax(0,1fr);padding-top:0;padding-left:1.8rem;gap:2rem}
  .steps__line{left:4px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .steps__line i{transform-origin:top;transform:scaleY(var(--p,0))}
  .step::before{top:.2rem;left:-1.8rem}
  .case__blocks{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.2rem}
}
@media (max-width:760px){
  .wrow{grid-template-columns:96px minmax(0,1fr) auto;column-gap:1rem;row-gap:.3rem;align-items:center}
  .wrow__thumb{display:block;grid-column:1;grid-row:1/span 2;aspect-ratio:16/10;overflow:hidden;max-width:100%}
  .wrow__t{grid-column:2;grid-row:1;font-size:1.25rem}
  .wrow .yr{grid-column:3;grid-row:1}
  .wrow .disc{grid-column:2/-1;grid-row:2}
  .gal{columns:1}
  .fp__pin{padding-block:72px 64px}
  .people{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .people .person:last-child{grid-column:1/-1}
  .people .person:last-child .plate{aspect-ratio:16/10}
  .contact__meta{grid-template-columns:minmax(0,1fr)}
  .clients{flex-direction:column;align-items:stretch;gap:.8rem}
  .marquee{flex:none}
  .compare{aspect-ratio:4/5}
  .gen-ui{flex-direction:column-reverse;align-items:flex-start;gap:.55rem}
  .vs__head{display:none}
  .vs__row{grid-template-columns:minmax(0,1fr);gap:.35rem}
  .vs__row .ml{display:inline;color:var(--muted);font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;margin-right:.5em}
  .ai-lists{grid-template-columns:minmax(0,1fr);row-gap:2rem}
  .case__blocks{grid-template-columns:minmax(0,1fr)}
  .st1,.st2,.st3{grid-column:1/-1;aspect-ratio:4/3}
}
/* phones: declutter, the content and the 3D carry the page */
@media (max-width:760px){
  #ann,.hero__eyebrow,#hint,.sec-head .c-lbl,.clients__lbl,.fp__d .ex>span,.fp__prog .track,.reel__meta,.plate__hud{display:none}
  .sec-head::before{display:none}
  .sec-head{padding-top:0}
  .clients{border-block:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
}

.wordmark span{letter-spacing:0}
.wordmark{padding-right:.02em}

/* migration: the haste mark before the wordmark, in the text colour of either theme; it turns on hover */
.logo::before{content:"";display:inline-block;width:.92em;height:.92em;margin-right:.3em;align-self:center;background:currentColor;-webkit-mask:url(/brand/haste-mark.png) center/contain no-repeat;mask:url(/brand/haste-mark.png) center/contain no-repeat;transition:transform 1.4s var(--ease)}
.logo:hover::before{transform:rotate(-104deg)}
@media (prefers-reduced-motion:reduce){.logo::before{transition:none}}

/* migration: real team portraits from the CMS replace the placeholder plates */
.plate--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block}
/* migration: the contact form (Wix Forms, src/components/ContactForm.tsx) */
.cform{margin-top:clamp(2.6rem,5vw,4.4rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem var(--col);max-width:58rem}
.cform--loading{min-height:22rem}
.cform__intro{grid-column:1/-1;margin:0;font-family:var(--display);font-size:clamp(1.25rem,1.9vw,1.7rem);letter-spacing:-.02em;line-height:1.2}
.cform__f{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.cform__f--wide{grid-column:1/-1}
.cform label{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cform input,.cform textarea{font:inherit;font-size:1.05rem;color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.6rem 0;outline:none;width:100%;transition:border-color var(--d1) var(--ease)}
.cform textarea{min-height:7.5rem;resize:vertical;line-height:1.5}
.cform input:focus,.cform textarea:focus{border-color:var(--fg)}
.cform input:focus-visible,.cform textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.cform [aria-invalid="true"]{border-color:#E74000}
.cform__err{color:#E74000;font-size:.88rem}
.cform__row{grid-column:1/-1;display:flex;align-items:center;gap:1.2rem 1.6rem;flex-wrap:wrap;margin-top:.4rem}
.cform button[type="submit"]{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--fg);color:var(--bg);border:0;border-radius:999px;padding:.95rem 1.5rem;cursor:pointer;transition:opacity var(--d1) var(--ease)}
.cform button[type="submit"]:hover{opacity:.85}
.cform button[disabled]{opacity:.5;cursor:default}
.cform__note{margin-top:2rem;color:var(--muted)}
@media (max-width:760px){.cform{grid-template-columns:minmax(0,1fr)}}