/* KORTIQ v3: nocturnal, precise, expensive */
html,body{background:#050506}
@font-face{font-family:GS;src:url(/fonts/gsans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:GS;src:url(/fonts/gsans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:GS;src:url(/fonts/gsans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:IS;src:url(/fonts/iserif-it.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:GM;src:url(/fonts/geistmono-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:TK;src:url(/fonts/tanker.woff2) format("woff2");font-display:swap}
:root{--bg:#050506;--bg2:#0b0c0e;--ink:#f2f3f1;--mute:#8b9095;--dim:#5a5f64;--line:rgba(255,255,255,.09);--neon:#1ef2ff;--px:clamp(20px,4vw,64px);--ease:cubic-bezier(.22,1,.36,1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{color:var(--ink);font:400 16px/1.55 GS,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--neon);color:#000}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:4px}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--neon);color:#000;padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}
em{font-family:IS,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--neon)}
main>section,.foot>*{padding-inline:var(--px)}

/* labels */
.k{font:400 11.5px/1.2 GM,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;gap:14px;align-items:center}
.k span{color:var(--neon)}

/* buttons */
.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{--b:var(--ink);--c:#050506;display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 8px 0 24px;border-radius:99px;background:var(--b);color:var(--c);font-weight:500;font-size:15px;letter-spacing:-.005em;transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);white-space:nowrap}
.btn-i{width:40px;height:40px;border-radius:50%;background:#050506;color:var(--ink);display:grid;place-items:center;overflow:hidden;transition:transform .5s var(--ease)}
.ar{width:16px;height:16px;flex:none;transition:transform .5s var(--ease)}
.btn:hover{--b:var(--neon)}
.btn:hover .ar,a:hover>.ar,.of:hover .ar{transform:rotate(45deg)}
.btn-ghost{--b:transparent;--c:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.btn-ghost .btn-i{background:rgba(255,255,255,.08)}
.btn-ghost:hover{--b:rgba(255,255,255,.06);--c:var(--ink)}

/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;height:76px;padding-inline:var(--px);transition:background .5s,backdrop-filter .5s,transform .6s var(--ease)}
.hdr.solid{background:rgba(5,5,6,.62);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.hdr.hide{transform:translateY(-100%)}
.logo{font:400 26px/1 TK,sans-serif;letter-spacing:.02em}
.logo sup{font-size:.35em;vertical-align:1.3em;margin-left:2px;font-family:GS}
.hdr-nav{display:flex;gap:4px;padding:5px;border-radius:99px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line)}
.hdr-nav a{padding:8px 16px;border-radius:99px;font-size:14px;color:#c9cdd0;transition:background .3s,color .3s}
.hdr-nav a:hover,.hdr-nav a[aria-current]{background:rgba(255,255,255,.08);color:var(--ink)}
.hdr-r{display:flex;gap:10px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px;border-radius:99px;background:var(--ink);color:#050506;font-size:14px;font-weight:500;transition:background .3s}
.pill:hover{background:var(--neon)}
.pill i,.dock-main i{width:7px;height:7px;border-radius:50%;background:#0a9;box-shadow:0 0 0 3px rgba(0,170,150,.18);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(0,170,150,0)}}
.menu-btn{display:none;width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);position:relative}
.menu-btn span{position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.menu-btn span:first-child{top:17px}.menu-btn span:last-child{top:23px}
.menu-btn[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:45;background:#050506;padding:110px var(--px) 40px;display:flex;flex-direction:column;justify-content:space-between}
.menu[hidden]{display:none}
.menu li a{display:flex;align-items:baseline;gap:16px;font-size:clamp(40px,11vw,64px);font-weight:500;letter-spacing:-.04em;line-height:1.12;border-bottom:1px solid var(--line);padding:6px 0}
.menu li a span{font:400 12px GM,monospace;color:var(--neon)}
.menu-foot{display:grid;gap:8px;color:var(--mute);font-size:14px}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto auto;padding-top:110px;padding-bottom:28px;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-v{width:100%;height:100%;object-fit:cover;opacity:.85}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,6,.55) 0%,rgba(5,5,6,0) 30%,rgba(5,5,6,.2) 60%,#050506 100%),radial-gradient(80% 60% at 0% 100%,rgba(5,5,6,.85),transparent 70%)}
.hero-top{display:flex;justify-content:space-between;gap:20px}
.hero-h{align-self:end;font-weight:500;font-size:clamp(54px,9.4vw,172px);line-height:.9;letter-spacing:-.055em;margin:40px 0 34px}
.hero-h>span,.ph-h>span{display:block}
.hero-h em{font-size:1.04em;letter-spacing:-.03em;padding-right:.06em}
.hero-b{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:56px}
.hero-p{max-width:440px;font-size:clamp(16px,1.25vw,19px);color:#b9bec2;line-height:1.5}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.hero-stats div{padding:20px 20px 4px 0;display:grid;gap:4px}
.hero-stats div+div{padding-left:20px;border-left:1px solid var(--line)}
.hero-stats b{font-weight:500;font-size:clamp(24px,2.4vw,38px);letter-spacing:-.04em;line-height:1}
.hero-stats span{font-size:13px;color:var(--mute)}

/* section heads */
section{position:relative}
.shead{display:grid;grid-template-columns:1fr auto;gap:22px 40px;align-items:end;margin-bottom:clamp(40px,6vw,88px)}
.shead .k{grid-column:1/-1}
.h2{font-weight:500;font-size:clamp(40px,5.6vw,100px);line-height:.96;letter-spacing:-.05em;max-width:14ch}
.shead .lead{grid-column:1;max-width:520px;color:var(--mute);font-size:17px}
.shead .btn{grid-column:2;grid-row:2/4;align-self:end}
.mani,.work,.svs,.proof,.offer,.brands,.faq,.compare,.xl,.brief,.ct,.grid{padding-block:clamp(90px,12vw,180px)}
.mani+.work,.work+.svs{padding-top:clamp(40px,6vw,90px)}

/* manifesto */
.mani{display:grid;grid-template-columns:minmax(160px,1fr) 3fr;gap:40px}
.mani-p{font-weight:500;font-size:clamp(28px,3.9vw,64px);line-height:1.08;letter-spacing:-.04em;max-width:22ch}
.mani-p .w{opacity:.14;transition:opacity .2s}
html:not(.js) .mani-p .w{opacity:1}

/* phone frame */
.phone{display:block;aspect-ratio:9/19;border-radius:clamp(22px,2.6vw,40px);overflow:hidden;background:#111 center/cover;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 80px -30px rgba(0,0,0,.9);position:relative}
.phone video{width:100%;height:100%;object-fit:cover;object-position:top}

/* work: sticky list + stage */
.wk{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(40px,6vw,120px)}
.wk-list{border-top:1px solid var(--line)}
.wk-r{display:grid;grid-template-columns:56px 1fr auto;grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);min-height:28vh;align-content:center;transition:opacity .5s}
.wk-r .wk-n{font:400 12px GM,monospace;color:var(--dim);grid-row:1/3}
.wk-t{font-weight:500;font-size:clamp(26px,2.9vw,46px);letter-spacing:-.04em;line-height:1.05}
.wk-l{color:var(--mute);font-size:15px;grid-column:2}
.wk-r .ar{grid-row:1/3;grid-column:3;width:22px;height:22px;color:var(--mute)}
.wk-list.live .wk-r{opacity:.3}
.wk-list.live .wk-r.on{opacity:1}
.wk-r.on .wk-n{color:var(--neon)}
.wk-stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;align-self:start}
.wk-frame{position:relative;width:min(340px,26vw);aspect-ratio:9/19}
.wk-frame::before{content:"";position:absolute;inset:-30%;background:radial-gradient(closest-side,rgba(30,242,255,.18),transparent);z-index:-1;filter:blur(20px)}
.wk-s{position:absolute;inset:0;opacity:0;transform:scale(.96) translateY(14px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.wk-s.on{opacity:1;transform:none}
.wk-s .phone{height:100%}
.wk-cap{position:absolute;bottom:6vh}
.wk-cur{color:var(--neon)}
.wk-cards{display:none}

/* services */
.sv-list{border-top:1px solid var(--line)}
.sv{display:grid;grid-template-columns:80px 1.1fr 1fr 150px;gap:30px;padding:44px 0;border-bottom:1px solid var(--line);align-items:start}
.sv-n{font:400 12px GM,monospace;color:var(--neon);padding-top:14px}
.sv-t{font-weight:500;font-size:clamp(34px,4vw,68px);letter-spacing:-.05em;line-height:.98}
.sv-b p{font-size:17px;color:#c3c7ca;margin-bottom:18px;max-width:42ch}
.sv-b li{color:var(--mute);font-size:15px;padding:9px 0;border-top:1px solid var(--line);display:flex;gap:10px}
.sv-b li::before{content:"";width:5px;height:5px;margin-top:9px;border-radius:50%;background:var(--neon);flex:none}
.sv-img{transform:rotate(4deg);transition:transform .7s var(--ease)}
.sv:hover .sv-img{transform:rotate(0) translateY(-6px)}

/* showreel */
.reel{padding-block:40px}
.reel-f{position:relative;border-radius:clamp(18px,2vw,32px);overflow:hidden;aspect-ratio:16/8;background:#0b0c0e;transform-origin:50% 50%}
.reel-f video{width:100%;height:100%;object-fit:cover}
.reel-f::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,5,6,.85),transparent 45%);pointer-events:none}
.reel-cap{position:absolute;left:clamp(20px,3vw,48px);right:clamp(20px,3vw,48px);bottom:clamp(20px,3vw,44px);z-index:1;display:flex;justify-content:space-between;align-items:end;gap:20px}
.reel-cap p:last-child{max-width:380px;color:#d5d8da;font-size:16px}

/* proof */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.pf{padding:40px 30px 44px 0;border-bottom:1px solid var(--line);display:grid;gap:14px}
.pf:not(:nth-child(3n+1)){padding-left:30px;border-left:1px solid var(--line)}
.pf b{font-weight:500;font-size:clamp(52px,6.4vw,112px);letter-spacing:-.06em;line-height:.9}
.pf:nth-child(1) b{color:var(--neon)}
.pf span{color:var(--mute);max-width:30ch}

/* offers + steps */
.of-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:clamp(60px,8vw,120px)}
.of{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:16px;min-height:clamp(320px,30vw,440px);padding:clamp(26px,3vw,44px);border-radius:28px;background:linear-gradient(160deg,#101215,#08090a);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .5s}
.of::before{content:"";position:absolute;right:-20%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(30,242,255,.22),transparent);transition:transform 1s var(--ease)}
.of:hover{box-shadow:inset 0 0 0 1px rgba(30,242,255,.4)}
.of:hover::before{transform:translate(-10%,10%) scale(1.2)}
.of-t{margin-top:auto;font-weight:500;font-size:clamp(34px,3.6vw,60px);letter-spacing:-.05em;line-height:1}
.of-d{color:var(--mute);max-width:36ch}
.of-go{display:flex;align-items:center;gap:10px;font-weight:500;padding-top:18px;border-top:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.steps li{padding:28px 24px 10px 0;display:grid;gap:10px;align-content:start}
.steps li+li{padding-left:24px;border-left:1px solid var(--line)}
.steps span{font:400 12px GM,monospace;color:var(--neon)}
.steps h3{font-weight:500;font-size:24px;letter-spacing:-.03em}
.steps p{color:var(--mute);font-size:15px}

/* brands */
.br-list{border-top:1px solid var(--line)}
.br{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:30px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line)}
.br-n{font-weight:500;font-size:clamp(30px,3.4vw,54px);letter-spacing:-.045em}
.br-v{font-family:IS,serif;font-style:italic;font-size:clamp(26px,2.6vw,42px);color:var(--neon)}
.br-d{color:var(--mute)}

/* compare */
.cp{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:24px 0;border-bottom:1px solid var(--line);font-size:17px}
.cp span:first-child{color:var(--mute)}
.cp span:nth-child(2){color:var(--dim);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.2)}
.cp span:last-child{color:var(--ink)}
.cp-h{border-top:1px solid var(--line);font:400 11.5px GM,monospace;letter-spacing:.14em;text-transform:uppercase}
.cp-h span:nth-child(2){text-decoration:none}
.cp-h span:last-child{color:var(--neon)}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:start}
.faq .shead{position:sticky;top:110px;margin:0;grid-template-columns:1fr}
.fq-list{border-top:1px solid var(--line)}
.fq summary{list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:28px 0;font-weight:500;font-size:clamp(19px,1.7vw,26px);letter-spacing:-.025em;cursor:pointer}
.fq summary::-webkit-details-marker{display:none}
.fq i{width:14px;height:14px;position:relative;flex:none}
.fq i::before,.fq i::after{content:"";position:absolute;left:0;right:0;top:6px;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.fq i::after{transform:rotate(90deg)}
.fq[open] i::after{transform:rotate(0)}
.fq p{color:var(--mute);padding:0 40px 28px 0;max-width:60ch}
.fq{border-bottom:1px solid var(--line)}

/* page head */
.ph{min-height:78svh;display:grid;grid-template-rows:auto 1fr auto;padding-top:120px;padding-bottom:60px;overflow:hidden;isolation:isolate}
.ph-glow{position:absolute;z-index:-1;right:-15vw;top:-20vw;width:70vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(30,242,255,.16),transparent 70%)}
.ph-h{align-self:end;font-weight:500;font-size:clamp(50px,8.2vw,150px);line-height:.92;letter-spacing:-.055em;margin:40px 0 36px;max-width:13ch}
.ph-b{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--line)}

/* work page grid */
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--px)}
.chip{height:40px;padding:0 18px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-size:14px;color:#c9cdd0;transition:background .3s,color .3s}
.chip[aria-pressed=true],.chip:hover{background:var(--ink);color:#050506}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:56px 28px;padding-top:60px!important}
.gc{display:grid;gap:12px}
.gc[hidden]{display:none}
.gc .phone{transition:transform .7s var(--ease)}
.gc:hover .phone{transform:translateY(-8px)}
.gc-m{display:grid;gap:2px}
.gc .wk-t{font-size:22px}
.gc .wk-l{font-size:14px}
.gc-u{font:400 11px GM,monospace;color:var(--dim);display:flex;gap:8px;align-items:center}
.gc-u .ar{width:12px;height:12px}
.xl-r{display:grid;grid-template-columns:1fr 1fr auto;gap:20px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
.xl-r:first-of-type{border-top:1px solid var(--line)}
.xl-r .ar{width:22px;height:22px}

/* forms + contact */
.brief .shead{margin-bottom:40px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:980px}
.form label{display:grid;gap:8px}
.form label span{font:400 11.5px GM,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.form input,.form select,.form textarea{font:inherit;font-size:17px;color:var(--ink);background:rgba(255,255,255,.03);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);border-radius:14px;padding:16px 18px;transition:box-shadow .3s}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;box-shadow:inset 0 0 0 1px var(--neon)}
.form select option{background:#111}
.form .btn{justify-self:start;grid-column:1/-1}
.form-note{grid-column:1/-1;color:var(--dim);font-size:13px}
.ct-r{display:grid;grid-template-columns:160px 1fr auto;gap:20px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line)}
.ct-r:first-child{border-top:1px solid var(--line)}
.ct-v{font-weight:500;font-size:clamp(28px,4vw,64px);letter-spacing:-.045em;line-height:1}
.ct-sm{font-size:clamp(20px,2.6vw,40px)}
.ct-r .ar{width:26px;height:26px}

/* footer finale */
.fin{position:relative;min-height:100svh;display:grid;align-items:end;padding-block:120px 80px;overflow:hidden;isolation:isolate}
.fin-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.7}
.fin::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#050506 0%,rgba(5,5,6,.2) 35%,rgba(5,5,6,.75) 80%,#050506 100%)}
.fin-in{display:grid;gap:30px;max-width:1100px}
.fin-h{font-weight:500;font-size:clamp(50px,8vw,148px);line-height:.92;letter-spacing:-.055em}
.fin-p{max-width:480px;color:#c3c7ca;font-size:18px}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-block:60px;border-top:1px solid var(--line)}
.foot-grid .k{margin-bottom:12px}
.foot-grid a:hover{color:var(--neon)}
.foot-links{display:grid;gap:4px}
.foot-word{font:400 clamp(120px,30vw,560px)/.78 TK,sans-serif;letter-spacing:-.01em;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(30,242,255,.25),transparent 75%);-webkit-background-clip:text;background-clip:text;user-select:none;overflow:hidden;padding-top:20px}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:22px 30px;border-top:1px solid var(--line);color:var(--dim);font-size:13px}
.dock{display:none}

/* reveal states (JS on) */
.js [data-up]{opacity:0;transform:translateY(28px)}
.js [data-lines]>.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.js [data-lines]>.ln>span{display:block;transform:translateY(105%)}

/* tablet */
@media(max-width:1100px){
  .hdr-nav{display:none}
  .menu-btn{display:block}
  .grid{grid-template-columns:repeat(3,1fr)}
  .sv{grid-template-columns:60px 1fr 1fr}
  .sv-img{display:none}
}
/* phone */
@media(max-width:820px){
  body{font-size:15.5px}
  .hdr{height:64px}
  .pill{display:none}
  .hero{padding-top:90px;padding-bottom:96px}
  .hero-top .k:last-child{display:none}
  .hero-h{font-size:clamp(46px,14.2vw,92px);margin:30px 0 24px;letter-spacing:-.05em}
  .hero-b{margin-bottom:36px;gap:24px}
  .hero-b .acts{width:100%}
  .hero-b .btn{flex:1;justify-content:space-between}
  .hero-stats{grid-template-columns:1fr 1fr}
  .hero-stats div{padding:16px 12px 14px 0!important;border-left:0!important}
  .hero-stats div:nth-child(even){padding-left:16px!important;border-left:1px solid var(--line)!important}
  .hero-stats div:nth-child(n+3){border-top:1px solid var(--line)}
  .hero-v{opacity:.95}
  .shead{grid-template-columns:1fr}
  .shead .btn{grid-column:1;grid-row:auto;justify-self:start}
  .h2{font-size:clamp(38px,11vw,64px)}
  .mani{grid-template-columns:1fr;gap:24px}
  .mani-p{font-size:clamp(28px,8.4vw,44px)}
  .wk{display:none}
  .wk-cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--px)*-1);padding:0 var(--px) 10px;scrollbar-width:none}
  .wk-cards::-webkit-scrollbar{display:none}
  .wk-c{flex:0 0 68vw;scroll-snap-align:start;display:grid;gap:8px}
  .wk-c .wk-t{font-size:22px}
  .sv{grid-template-columns:1fr;gap:16px;padding:34px 0}
  .sv-n{padding:0}
  .reel{padding-inline:0}
  .reel-f{border-radius:0;aspect-ratio:4/5}
  .reel-cap{flex-direction:column;align-items:start}
  .pf-grid{grid-template-columns:1fr 1fr}
  .pf{padding:28px 14px 30px 0!important;border-left:0!important}
  .pf:nth-child(even){padding-left:16px!important;border-left:1px solid var(--line)!important}
  .pf b{font-size:clamp(40px,12vw,64px)}
  .pf span{font-size:14px}
  .of-grid{grid-template-columns:1fr}
  .of{min-height:280px}
  .steps{grid-template-columns:1fr}
  .steps li{padding:22px 0!important;border-left:0!important;border-bottom:1px solid var(--line);grid-template-columns:40px 1fr;column-gap:10px}
  .steps li p{grid-column:2}
  .br{grid-template-columns:1fr;gap:6px;padding:26px 0}
  .cp{grid-template-columns:1fr 1fr;gap:6px 16px;font-size:15px}
  .cp span:first-child{grid-column:1/-1}
  .cp-h span:first-child{display:none}
  .faq{grid-template-columns:1fr;gap:0}
  .faq .shead{position:static;margin-bottom:30px}
  .ph{min-height:72svh;padding-top:96px}
  .ph-h{font-size:clamp(44px,13vw,84px)}
  .grid{grid-template-columns:1fr 1fr;gap:36px 14px}
  .gc .wk-t{font-size:17px}
  .gc-u{display:none}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .chip{flex:none}
  .xl-r{grid-template-columns:1fr auto}
  .xl-r .wk-l{grid-column:1;grid-row:2}
  .xl-r .ar{grid-row:1/3;grid-column:2}
  .form{grid-template-columns:1fr}
  .ct-r{grid-template-columns:1fr auto;gap:8px 16px;padding:26px 0}
  .ct-r .k{grid-column:1/-1}
  .ct-sm{word-break:break-word}
  .fin{min-height:90svh;padding-block:100px 60px}
  .fin-h{font-size:clamp(44px,13vw,84px)}
  .fin .acts{flex-direction:column;align-items:stretch}
  .fin .btn{justify-content:space-between}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid div:nth-child(2) a{word-break:break-all;font-size:14px}
  .foot-bot{padding-bottom:100px}
  .dock{display:flex;gap:8px;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:40;transition:transform .5s var(--ease)}
  .dock.off{transform:translateY(140%)}
  .dock-main{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:99px;background:var(--ink);color:#050506;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.5)}
  .dock-call{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(20,22,24,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* v3 fix pass 1 */
.wk-c .wk-l,.gc .wk-l{grid-column:auto}
.wk-c .phone{background:#111}
.mani,.work,.svs,.proof,.offer,.brands,.faq,.compare,.xl,.brief,.ct,.grid{padding-block:clamp(80px,9vw,140px)}
.mani{align-items:start}.mani>.k{padding-top:1.2em}
.wk-r{min-height:22vh}
.sv{grid-template-columns:80px 1.1fr 1fr 130px}
.sv-img{transform:rotate(3deg)}
.foot-word{margin-bottom:-.06em}
@media(max-width:820px){.wk-cards{scroll-padding-inline:var(--px)}.wk-c{flex:0 0 58vw}}

/* ===== v3.1 NEON + MOTION ===== */
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
:root{--glowc:rgba(30,242,255,.55)}
em{text-shadow:0 0 18px rgba(30,242,255,.55),0 0 48px rgba(30,242,255,.25)}
em.flick{animation:flick 1.6s steps(1) 1}
@keyframes flick{0%,6%,10%,14%{opacity:.25;text-shadow:none}4%,8%,12%,100%{opacity:1}}
.k span{text-shadow:0 0 10px var(--glowc)}
.k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon);animation:blink 2.4s ease-in-out infinite;order:-1}
.foot-grid .k::before,.form .k::before,.of .k::before{display:none}
@keyframes blink{50%{opacity:.25}}

/* cursor glow */
.glow{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;background:radial-gradient(closest-side,rgba(30,242,255,.10),transparent 70%);pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:0;transition:opacity .6s}
.glow.on{opacity:1}

/* hero: neon grid + scanline + rotator */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(30,242,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(30,242,255,.07) 1px,transparent 1px);background-size:72px 72px;-webkit-mask:radial-gradient(70% 60% at 50% 40%,#000,transparent 75%);mask:radial-gradient(70% 60% at 50% 40%,#000,transparent 75%);animation:gridmove 14s linear infinite}
@keyframes gridmove{to{background-position:0 72px,72px 0}}
.hero::after{content:"";position:absolute;left:0;right:0;height:140px;top:-140px;z-index:-1;background:linear-gradient(180deg,transparent,rgba(30,242,255,.07),transparent);animation:scan 7s linear infinite;pointer-events:none}
@keyframes scan{to{transform:translateY(calc(100svh + 140px))}}
.hero-h{text-shadow:0 0 60px rgba(30,242,255,.12)}
.hero-rot{font-size:clamp(20px,2vw,30px);letter-spacing:-.02em;color:#c9cdd0;margin:-14px 0 34px;display:flex;gap:.35em;align-items:baseline}
.rot{display:inline-grid;font-family:IS,serif;font-style:italic;color:var(--neon);text-shadow:0 0 18px var(--glowc);overflow:hidden;vertical-align:bottom;min-width:6ch}
.rot>span{grid-area:1/1;display:block}
.hero-v{filter:saturate(1.15) contrast(1.05)}

/* characters */
.ch{display:inline-block;will-change:transform}
.wd{display:inline-block;white-space:nowrap}
.js [data-lines]>.ln>span{transform:none}
.js [data-lines] .ch{transform:translateY(110%) rotate(6deg);opacity:0}

/* buttons: rolling label + neon */
.btn-t{display:inline-block;overflow:hidden;position:relative;height:1.3em;line-height:1.3em}
.btn-t>span{display:block;transition:transform .6s var(--ease)}
.btn-t>span::after{content:attr(data-t);position:absolute;left:0;top:100%}
.btn:hover .btn-t>span{transform:translateY(-100%)}
.btn:not(.btn-ghost){box-shadow:0 0 0 0 rgba(30,242,255,0);transition:background .4s var(--ease),box-shadow .5s var(--ease),transform .4s var(--ease)}
.btn:not(.btn-ghost):hover{box-shadow:0 0 28px rgba(30,242,255,.55),0 0 80px rgba(30,242,255,.25)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--neon),0 0 24px rgba(30,242,255,.25)}
.pill{box-shadow:0 0 22px rgba(30,242,255,.25)}

/* neon marquee bands */
.band{overflow:hidden;padding:26px 0;border-block:1px solid var(--line);position:relative;background:linear-gradient(90deg,#050506,rgba(30,242,255,.04),#050506)}
.band-t{display:flex;width:max-content;gap:40px;align-items:center;animation:mq 30s linear infinite}
.band-alt .band-t{animation-direction:reverse;animation-duration:36s}
@keyframes mq{to{transform:translateX(-50%)}}
.band span{font-weight:500;font-size:clamp(40px,6vw,96px);letter-spacing:-.05em;line-height:1;white-space:nowrap}
.band span.o{color:transparent;-webkit-text-stroke:1.2px var(--neon);filter:drop-shadow(0 0 10px rgba(30,242,255,.5))}
.band i{font-style:normal;color:var(--neon);font-size:clamp(20px,2.4vw,36px);text-shadow:0 0 14px var(--neon)}
.band:hover .band-t{animation-play-state:paused}

/* neon line draw on lists */
.wk-list,.sv-list,.pf-grid,.br-list,.fq-list,.steps,.hero-stats{position:relative}
.wk-list::before,.sv-list::before,.pf-grid::before,.br-list::before,.fq-list::before,.steps::before,.hero-stats::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--neon),transparent);box-shadow:0 0 12px var(--neon);transform:scaleX(0);transition:transform 1.6s var(--ease)}
.drawn::before{transform:scaleX(1)!important}
html:not(.js) .wk-list::before{transform:scaleX(1)}

/* neon animated card borders */
.of::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a),transparent 0 70%,var(--neon) 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none}
@keyframes spin{to{--a:360deg}}
.of:hover{box-shadow:inset 0 0 0 1px rgba(30,242,255,.4),0 0 60px rgba(30,242,255,.15)}
.phone{transition:box-shadow .6s var(--ease)}
.wk-s.on .phone,.gc:hover .phone,.wk-c .phone{box-shadow:0 0 0 1px rgba(30,242,255,.35),0 0 50px rgba(30,242,255,.18),0 40px 80px -30px rgba(0,0,0,.9)}
.wk-frame::after{content:"";position:absolute;left:10%;right:10%;bottom:-40px;height:60px;background:radial-gradient(closest-side,rgba(30,242,255,.45),transparent);filter:blur(14px);z-index:-1}

/* proof neon */
.pf b{transition:color .4s,text-shadow .4s}
.pf:hover b,.pf:nth-child(1) b{color:var(--neon);text-shadow:0 0 30px rgba(30,242,255,.45)}

/* hover letter roll on list titles */
.wk-r .wk-t,.xl-r .wk-t,.br-n{transition:transform .6s var(--ease),color .4s,text-shadow .4s}
.wk-r:hover .wk-t,.xl-r:hover .wk-t{transform:translateX(12px);color:var(--neon);text-shadow:0 0 20px rgba(30,242,255,.4)}
.fq summary:hover{color:var(--neon)}

/* footer wordmark neon */
.foot-word{-webkit-text-stroke:1px rgba(30,242,255,.45);filter:drop-shadow(0 0 18px rgba(30,242,255,.25));animation:wordglow 5s ease-in-out infinite}
@keyframes wordglow{50%{-webkit-text-stroke-color:rgba(30,242,255,.9);filter:drop-shadow(0 0 30px rgba(30,242,255,.5))}}
.logo{text-shadow:0 0 14px rgba(30,242,255,.35)}
.reel-f{box-shadow:0 0 0 1px rgba(30,242,255,.25),0 0 80px rgba(30,242,255,.12)}
@media(max-width:820px){.glow{display:none}.band{padding:18px 0}.hero-rot{margin:-6px 0 26px}.hero::before{background-size:48px 48px}}

.hero::before,.hero::after{z-index:0;pointer-events:none}
.rot{font-size:1.35em;line-height:1}
@media(max-width:820px){.hero-v{opacity:.6!important}.hero-media::after{background:linear-gradient(180deg,rgba(5,5,6,.6),rgba(5,5,6,.25) 40%,rgba(5,5,6,.7) 75%,#050506)}}
/* proof screenshots */
.shots{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:clamp(40px,5vw,70px);padding-bottom:12px;scrollbar-width:thin}
.sh{flex:0 0 clamp(240px,26vw,340px);margin:0;scroll-snap-align:start}
.sh img,.sh video{width:100%;aspect-ratio:480/983;object-fit:cover;object-position:top;display:block;border:1px solid var(--line);border-radius:14px;background:#0a0a0a}
.sh figcaption{margin-top:12px;font-size:13px;opacity:.7}
.pnote{margin-top:22px;font-size:13px;opacity:.5}

/* ===== v4: aurora palette, live shader hero, preloader, kinetic stack, video letters ===== */
:root{--vio:#8b5cff;--mag:#ff4fd8;--grad:linear-gradient(90deg,#1ef2ff,#8b5cff 50%,#ff4fd8)}
body{background:transparent}
main,.foot{position:relative;z-index:2}
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aura i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;opacity:.16;will-change:transform}
.aura i:nth-child(1){background:radial-gradient(closest-side,#1ef2ff,transparent);left:-25vmax;top:-20vmax;animation:au1 26s ease-in-out infinite alternate}
.aura i:nth-child(2){background:radial-gradient(closest-side,#8b5cff,transparent);right:-30vmax;top:20vh;animation:au2 32s ease-in-out infinite alternate}
.aura i:nth-child(3){background:radial-gradient(closest-side,#ff4fd8,transparent);left:20vw;bottom:-45vmax;opacity:.1;animation:au3 38s ease-in-out infinite alternate}
@keyframes au1{to{transform:translate(30vw,40vh) scale(1.2)}}
@keyframes au2{to{transform:translate(-40vw,30vh) scale(.85)}}
@keyframes au3{to{transform:translate(-20vw,-50vh) scale(1.3)}}
.glow{background:radial-gradient(closest-side,rgba(139,92,255,.16),rgba(30,242,255,.06) 50%,transparent 70%)}

/* gradient accent words (non-split) */
.br-v,.pf:nth-child(1) b,.of-t{background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradmove 6s ease-in-out infinite alternate}
@keyframes gradmove{to{background-position:100% 0}}
.pf:nth-child(1) b{text-shadow:none;filter:drop-shadow(0 0 22px rgba(139,92,255,.35))}
.of-t{filter:drop-shadow(0 0 18px rgba(30,242,255,.25))}
.k span{color:var(--neon)}
.btn:not(.btn-ghost):hover{background:linear-gradient(90deg,#1ef2ff,#a58bff);box-shadow:0 0 30px rgba(30,242,255,.5),0 0 90px rgba(139,92,255,.35)}
.band span.o{-webkit-text-stroke:1.2px transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0;filter:drop-shadow(0 0 14px rgba(139,92,255,.45))}
.band i{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.of::after{background:conic-gradient(from var(--a),transparent 0 60%,#1ef2ff 75%,#8b5cff 85%,#ff4fd8 92%,transparent 100%)}

/* hero shader */
.hero-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-media{background:radial-gradient(60% 60% at 70% 30%,rgba(139,92,255,.35),transparent 70%),radial-gradient(50% 50% at 30% 60%,rgba(30,242,255,.3),transparent 70%),#050506}
.hero-media::after{background:linear-gradient(180deg,rgba(5,5,6,.35) 0%,rgba(5,5,6,0) 30%,rgba(5,5,6,.15) 60%,#050506 100%),radial-gradient(70% 55% at 0% 100%,rgba(5,5,6,.8),transparent 70%)}
.hero::before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}

/* rotating badge */
.badge{position:absolute;right:var(--px);top:24%;width:150px;height:150px;z-index:3;display:grid;place-items:center}
.badge svg{position:absolute;inset:0;width:100%;height:100%;animation:rot 14s linear infinite;fill:#e8ecef;font:500 13.4px GM,monospace;letter-spacing:.2em}
@keyframes rot{to{transform:rotate(360deg)}}
.badge-c{width:64px;height:64px;border-radius:50%;background:var(--grad);color:#050506;display:grid;place-items:center;box-shadow:0 0 30px rgba(139,92,255,.6);transition:transform .6s var(--ease)}
.badge-c .ar{width:22px;height:22px}
.badge:hover .badge-c{transform:scale(1.15) rotate(45deg)}
.badge:hover svg{animation-duration:4s}

/* preloader */
.loader{position:fixed;inset:0;z-index:300;background:#050506;display:none;align-items:end;justify-content:space-between;padding:var(--px);flex-wrap:wrap}
.js.first .loader{display:flex}
.ld-n{display:flex;font:500 clamp(90px,16vw,260px)/.8 GS,sans-serif;letter-spacing:-.06em;overflow:hidden;height:.82em}
.ld-d{display:block}
.ld-bar{position:absolute;left:50%;top:50%;width:160px;height:4px;margin-left:-80px;background:rgba(255,255,255,.12);overflow:hidden}
.ld-bar i{display:block;height:100%;width:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
.ld-w{font:400 clamp(30px,4vw,56px)/1 TK,sans-serif;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* kinetic word stack */
.ks{padding-block:clamp(40px,6vw,80px);overflow:hidden;display:grid;gap:0;padding-inline:0!important}
.ks-r{display:flex;gap:.35em;white-space:nowrap;font-weight:500;font-size:clamp(64px,11vw,200px);line-height:.92;letter-spacing:-.06em;will-change:transform}
.ks-r span{flex:none}
.ks-0 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28)}
.ks-1 span{color:var(--ink)}
.ks-2 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(139,92,255,.35))}
.ks-r span:nth-child(2n){font-family:IS,serif;font-style:italic;font-weight:400;letter-spacing:-.03em}

/* video inside letters, zoom-through */
.vt{height:260vh;padding:0!important}
.vt-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.vt-pin video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vt-mask{position:absolute;inset:0;background:#050506;color:#fff;mix-blend-mode:multiply;display:grid;place-items:center;will-change:transform}
.vt-mask span{font:400 clamp(130px,27vw,520px)/.8 TK,sans-serif;letter-spacing:-.01em}
.vt-cap{position:absolute;left:var(--px);right:var(--px);bottom:clamp(24px,5vh,56px);display:flex;justify-content:space-between;align-items:end;gap:20px;z-index:2}
.vt-cap p:last-child{max-width:380px;color:#d5d8da}

/* split-char accent colouring is set inline by JS; keep glow */
em .ch{text-shadow:inherit}
@media(max-width:820px){
  .badge{width:104px;height:104px;top:auto;bottom:220px;right:14px}
  .badge svg{font-size:14px}
  .badge-c{width:44px;height:44px}
  .ks-r{font-size:clamp(52px,17vw,96px)}
  .vt{height:200vh}
  .vt-mask span{font-size:34vw}
  .vt-cap{flex-direction:column;align-items:start}
  .aura i{opacity:.2}
}
@media(max-width:820px){.badge{top:78px;bottom:auto;right:12px;width:92px;height:92px}.badge-c{width:40px;height:40px}}
.badge svg{animation:none}
.badge>svg{animation:rot 14s linear infinite;font-size:15px;letter-spacing:.24em}
.badge-c svg{position:static;width:22px;height:22px}
.hero-gl{opacity:.82}
/* portrait showreel: sharp at native size, blurred fill behind */
.vt-pin::before,.reel-f::before{content:"";position:absolute;inset:-40px;background:url(/reel/showreel.jpg) center/cover;filter:blur(40px) saturate(1.3) brightness(.55)}
.vt-pin video,.reel-f video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.reel-f{aspect-ratio:16/9}