:root{--v:#d4ff00;--h:#ff2e63;--k:#0b0b0b;--p:#f2f2f2;--f:"Arial Black","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--k);color:var(--p);font:17px/1.55 system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}.hot{color:var(--h)}
.cursor{position:fixed;width:22px;height:22px;border-radius:50%;background:var(--v);mix-blend-mode:difference;pointer-events:none;z-index:99;transform:translate(-50%,-50%);transition:width .2s,height .2s}@media(hover:none){.cursor{display:none}}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:16px 4vw;mix-blend-mode:normal;backdrop-filter:blur(8px);background:rgba(11,11,11,.6)}
.nav nav{display:flex;gap:28px;align-items:center;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.08em}.nav nav a:hover{color:var(--v)}
.pill{background:var(--v);color:var(--k);padding:10px 18px;border-radius:99px}.pill:hover{background:var(--h)!important;color:#fff!important}
.burger{display:none;background:none;border:0;width:36px;height:30px;position:relative}.burger span{position:absolute;left:4px;right:4px;height:3px;background:var(--v);transition:.3s}.burger span:first-child{top:9px}.burger span:last-child{top:18px}
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0 4vw 10vh;overflow:hidden}#grid{position:absolute;inset:0;width:100%;height:100%}
.hero-in{position:relative;max-width:1300px;pointer-events:none}.hero-in a{pointer-events:auto}
.kicker{font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--v)}
h1{font:900 clamp(52px,10.5vw,170px)/.86 var(--f);letter-spacing:-.045em;margin:0 0 24px;text-transform:uppercase}
h1 .l{display:inline-block;opacity:0;transform:translateY(60%) rotate(4deg);animation:up .9s cubic-bezier(.2,.9,.2,1.2) forwards}h1 .l:nth-child(2){animation-delay:.12s}h1 .l:nth-child(3){animation-delay:.24s}h1 .l:nth-child(4){animation-delay:.36s}
@keyframes up{to{opacity:1;transform:none}}
.sub{max-width:520px;font-size:clamp(17px,1.6vw,21px)}
.btn{display:inline-flex;gap:12px;align-items:center;background:var(--h);color:#fff;border:0;font:900 16px var(--f);text-transform:uppercase;padding:18px 28px;border-radius:99px;cursor:pointer;transition:transform .2s,background .2s}.btn:hover{background:var(--v);color:var(--k);transform:rotate(-3deg) scale(1.05)}.btn i{font-style:normal;transition:transform .2s}.btn:hover i{transform:translateX(6px)}
.scroll{position:absolute;right:4vw;bottom:4vh;writing-mode:vertical-rl;font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.marq{background:var(--v);color:var(--k);overflow:hidden;transform:rotate(-2deg);margin:2vh -2vw;padding:16px 0}.track{white-space:nowrap;font:900 clamp(28px,4vw,56px) var(--f);animation:m 18s linear infinite;width:max-content}@keyframes m{to{transform:translateX(-50%)}}
section{padding:14vh 4vw}.big{font:900 clamp(30px,4.6vw,72px)/1.05 var(--f);letter-spacing:-.03em;max-width:1300px;margin:0}.big em{color:var(--v);font-style:normal}
.h2{font:900 clamp(48px,8vw,130px)/.88 var(--f);letter-spacing:-.04em;text-transform:uppercase;margin:0 0 8vh}
.svc{list-style:none;margin:0;padding:0;border-top:2px solid #2a2a2a}.svc li{display:grid;grid-template-columns:80px 1fr 1fr;gap:24px;align-items:center;padding:34px 0;border-bottom:2px solid #2a2a2a;transition:background .3s,color .3s,padding .3s}
.svc li:hover{background:var(--v);color:var(--k);padding-left:24px}.svc b{font:900 18px var(--f);color:var(--h)}.svc h3{font:900 clamp(26px,3.4vw,52px)/1 var(--f);margin:0;letter-spacing:-.03em;text-transform:uppercase}.svc p{margin:0;max-width:440px}
.pin{height:220vh;padding:0}.pin-in{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;font:900 clamp(56px,13vw,220px)/.85 var(--f);text-transform:uppercase;letter-spacing:-.05em}.pin-in span{display:block;will-change:transform}@media(max-width:760px){.pin{height:auto;padding:12vh 0;overflow:hidden}.pin-in{position:static;height:auto;font-size:clamp(48px,17vw,120px)}}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card .ph{aspect-ratio:4/5;border:2px dashed #444;display:grid;place-items:center;text-align:center;padding:20px;color:#888;font-size:14px;transition:transform .4s,border-color .3s}.card:hover .ph{transform:rotate(-2deg);border-color:var(--h)}.card h3{font:900 24px var(--f);margin:18px 0 4px}.card p{margin:0;color:#aaa}.note{color:#888;margin-top:40px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.steps div{background:#151515;padding:36px;border-radius:24px}.steps div:nth-child(2){background:var(--h)}.steps div:nth-child(3){background:var(--v);color:var(--k)}.steps b{font:900 44px var(--f);text-transform:uppercase}
.contact{background:var(--p);color:var(--k)}.mega{font:900 clamp(64px,14vw,240px)/.84 var(--f);letter-spacing:-.05em;text-transform:uppercase;margin:0 0 8vh}
form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;max-width:1200px}label{display:flex;flex-direction:column;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em;gap:8px}
input,textarea{font:inherit;font-size:18px;text-transform:none;letter-spacing:0;font-weight:400;border:0;border-bottom:3px solid var(--k);background:transparent;padding:10px 0;outline:0}input:focus,textarea:focus{border-color:var(--h)}.full,fieldset{grid-column:1/-1}
fieldset{border:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}legend{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.chip{flex-direction:row;align-items:center;border:2px solid var(--k);border-radius:99px;padding:10px 18px;cursor:pointer}.chip input{display:none}.chip:has(input:checked){background:var(--k);color:var(--v)}
.invalid{border-color:var(--h)!important}.msg{grid-column:1/-1;font-weight:700}
footer{padding:10vh 4vw 6vh;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px;align-items:start}footer div{display:flex;flex-direction:column;gap:8px}footer a:hover{color:var(--v)}footer small{grid-column:1/-1;color:#777}
.rv{opacity:0;transform:translateY(60px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
@media(max-width:860px){.nav{backdrop-filter:none;-webkit-backdrop-filter:none}.nav nav{visibility:hidden;position:fixed;inset:0;background:var(--k);flex-direction:column;justify-content:center;font-size:28px;transform:translateY(-100%);transition:.4s}.nav.open nav{transform:none;visibility:visible}.burger{display:block;z-index:2}.nav.open .burger span:first-child{transform:translateY(4.5px) rotate(45deg)}.nav.open .burger span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.svc li{grid-template-columns:1fr;gap:10px}.cards,.steps,form,footer{grid-template-columns:1fr}.scroll{display:none}section{padding:10vh 5vw}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}h1 .l,.rv{opacity:1;transform:none}}
.lang{display:flex;gap:4px}.lang a{padding:6px 8px;border-radius:6px;opacity:.6}.lang a[aria-current]{opacity:1;color:var(--v);outline:1px solid var(--v)}
.lead{color:#aaa;margin:-5vh 0 6vh;font-size:20px}
.logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));border-top:2px solid #2a2a2a;border-left:2px solid #2a2a2a}
.logo{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;gap:12px;border-right:2px solid #2a2a2a;border-bottom:2px solid #2a2a2a;padding:28px;transition:background .3s}
.logo img{max-width:70%;max-height:56px;filter:grayscale(1) brightness(0) invert(.85);transition:filter .3s,transform .3s}
.logo span{font:900 clamp(20px,2vw,28px)/1 var(--f);letter-spacing:-.03em;color:#cfcfcf;text-transform:uppercase;text-align:center;transition:color .3s}.logo small{display:block;font:700 11px system-ui;letter-spacing:.15em;margin-top:6px;color:#888}
.logo:hover{background:var(--v)}.logo:hover img{filter:brightness(0)}.logo:hover span{color:var(--k)}.logo:hover small{color:var(--k)}
@media(max-width:860px){.logos{grid-template-columns:1fr 1fr}.logo{padding:18px}.nav .lang{font-size:18px}}
h1{overflow-wrap:anywhere;hyphens:auto}@media(max-width:860px){h1{font-size:clamp(40px,12.5vw,90px)}}body{max-width:100vw}
html,body{overflow-x:hidden}h1 .l{max-width:100%}
.logo img{max-height:64px}.logo img[src*="kontima"]{max-height:80px}
@media(max-width:860px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}.logo span{font-size:18px}}
/* ===== Selected work v2 ===== */
.work2{position:relative;overflow:hidden;padding:16vh 0 18vh;background:#0b0b0b;--mx:50%;--my:50%;isolation:isolate}
.wfx{position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(420px circle at var(--mx) var(--my),rgba(212,255,0,.22),transparent 60%),
repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 14px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 14px);
-webkit-mask:radial-gradient(700px circle at var(--mx) var(--my),#000,rgba(0,0,0,.35) 70%);mask:radial-gradient(700px circle at var(--mx) var(--my),#000,rgba(0,0,0,.35) 70%)}
.wfx::after{content:"";position:absolute;inset:-50%;opacity:.13;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(5%,-7%)}60%{transform:translate(-3%,8%)}80%{transform:translate(7%,2%)}100%{transform:translate(0,0)}}
.outl{position:relative;margin:0 4vw;font:900 clamp(64px,15vw,260px)/.82 var(--f);letter-spacing:-.05em;text-transform:uppercase;color:transparent;-webkit-text-stroke:2px var(--p);overflow-wrap:anywhere}
.outl span:last-child{position:absolute;left:0;top:0;-webkit-text-stroke:0;color:var(--v);clip-path:inset(0 calc(100% - var(--fill,0%)) 0 0);transition:clip-path .1s linear}
.lead2{margin:3vh 4vw 9vh;font:900 clamp(18px,2vw,28px) var(--f);text-transform:uppercase;color:var(--h);max-width:900px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lwall{display:flex;flex-direction:column;gap:22px;transform:rotate(-4deg);margin:0 -6vw}
.lrow{overflow:visible;--skew:0deg}.lrow:nth-child(2){transform:rotate(1.5deg)}
.ltrack{list-style:none;margin:0;padding:0;display:flex;gap:22px;width:max-content;will-change:transform;transform:translate3d(var(--x,0px),0,0) skewX(var(--skew))}
.tile{flex:0 0 auto;width:clamp(200px,22vw,340px);aspect-ratio:16/10;perspective:900px}
.flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.9,.2,1.2)}
.fr,.bk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;padding:24px}
.fr{background:#141414;border:2px solid #2c2c2c;box-shadow:inset 0 0 0 1px #000}
.fr img{max-width:72%;max-height:70px;filter:grayscale(1) brightness(0) invert(.92)}.fr img[src*="kontima"]{max-height:96px}
.wmk{font:900 clamp(22px,2.2vw,36px)/.95 var(--f);letter-spacing:-.03em;text-transform:uppercase;color:#e9e9e9;text-align:center}.wmk small{display:block;font:700 11px system-ui;letter-spacing:.2em;color:#8a8a8a;margin-top:8px}
.bk{background:var(--v);color:var(--k);transform:rotateX(180deg)}.pk .bk{background:var(--h);color:#fff}
.bk span{font:900 clamp(24px,2.6vw,42px)/.9 var(--f);text-transform:uppercase;letter-spacing:-.04em;text-align:center}
.tile:hover .flip,.tile.on .flip{transform:rotateX(180deg)}
@media(max-width:860px){.work2{padding:12vh 0 14vh}.outl{-webkit-text-stroke:1.5px var(--p)}.tile{width:58vw}.lwall{gap:14px}.ltrack{gap:14px}.fr img{max-height:52px}.fr img[src*="kontima"]{max-height:72px}}
@media(prefers-reduced-motion:reduce){.wfx::after{animation:none}.lwall{transform:none;margin:0 4vw}.lrow,.lrow:nth-child(2){transform:none}.ltrack{width:auto;flex-wrap:wrap;transform:none!important}.ltrack [aria-hidden]{display:none}.tile{width:calc(50% - 11px)}.flip{transition:none}.outl span:last-child{clip-path:none;color:transparent}}
.outl{font-size:clamp(56px,12vw,210px);overflow-wrap:normal;hyphens:manual}.lead2{margin:2.5vh 4vw 7vh}
@media(max-width:860px){.outl{font-size:clamp(36px,10.5vw,90px)}}
.tile>a{display:block;width:100%;height:100%;color:inherit}.tile>a:focus-visible{outline:3px solid var(--v);outline-offset:4px;border-radius:18px}.tile>a:focus-visible .flip{transform:rotateX(180deg)}
.bk{flex-direction:column;gap:6px}.bk i{font-style:normal;font:900 22px var(--f)}
/* ===== AI x human ===== */
.ai{position:relative;padding:0 0 16vh;background:var(--h);color:#fff;overflow:hidden}
.aitick{background:var(--k);color:var(--v);transform:rotate(2deg);margin:-1vh -2vw 12vh;padding:16px 0}.aitick .track{animation-direction:reverse;animation-duration:22s}
.ai-in{padding:0 4vw}.ai .kicker{color:var(--k)}
.aih{font:900 clamp(48px,9.5vw,170px)/.86 var(--f);letter-spacing:-.045em;text-transform:uppercase;margin:0 0 6vh}
.aih .w{display:inline-block;transform:translateX(calc(var(--ai,0)*var(--d,1)*-12vw));will-change:transform}.aih .w:nth-child(2n){--d:-1}.aih .hot{color:var(--k)}
.aip{font-size:clamp(19px,1.8vw,26px);max-width:820px;margin:0 0 7vh}
.aipts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.aipts li{background:var(--k);color:var(--p);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:10px;transition:transform .3s}
.aipts li:nth-child(2){background:var(--v);color:var(--k)}.aipts li:hover{transform:rotate(-2deg) scale(1.03)}
.aipts b{font:900 clamp(26px,2.6vw,40px)/1 var(--f);text-transform:uppercase}
@media(max-width:860px){.aipts{grid-template-columns:1fr}.aih{font-size:clamp(38px,11vw,90px)}.ai{padding-bottom:10vh}}
@media(prefers-reduced-motion:reduce){.aih .w{transform:none}}
/* legal pages */
.legalpage .lnav{display:flex!important;position:static!important;transform:none!important;visibility:visible!important;background:none!important;flex-direction:row!important;font-size:13px!important;gap:20px}
.legal{max-width:820px;margin:0 auto;padding:150px 5vw 12vh}.legal h1{font:900 clamp(44px,8vw,110px)/.9 var(--f);text-transform:uppercase;letter-spacing:-.04em;margin:0 0 14px;color:var(--v)}
.legal .upd{color:#888;margin:0 0 6vh}.legal h2{font:900 clamp(20px,2.4vw,30px) var(--f);text-transform:uppercase;margin:44px 0 10px;color:var(--h)}.legal p{color:#ddd}.legal a{color:var(--v);text-decoration:underline}
footer small a{text-decoration:underline}footer .sep{opacity:.5;margin:0 4px}
/* flip fix: <a> wrapper broke the 3D context in Safari/iOS, backs showed mirrored */
.tile>a{perspective:900px;transform-style:preserve-3d}
.fr{transform:rotateX(0deg) translateZ(1px)}.bk{transform:rotateX(180deg) translateZ(1px)}
.fr,.bk{transition:visibility 0s .15s}.bk{visibility:hidden}
.tile:hover .bk,.tile.on .bk,.tile>a:focus-visible .bk{visibility:visible}.tile:hover .fr,.tile.on .fr,.tile>a:focus-visible .fr{visibility:hidden}
@media(prefers-reduced-motion:reduce){.fr,.bk{transition:none}}