:root{--bk:#0b0b0b;--wh:#f4f4f2;--g1:#1a1a1a;--g2:#6e6e6e;--g3:#a8a8a8;--red:#ff2b1c;--f:'Inter Tight',system-ui,sans-serif;--pad:clamp(16px,3vw,44px);--e:cubic-bezier(.76,0,.24,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--wh);color:var(--bk);font-family:var(--f);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.r{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.lbl{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;margin-bottom:30px}
.lbl::before{content:'● ';color:var(--red)}
/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:30px;padding:16px var(--pad);mix-blend-mode:difference;color:#fff}
.logo{font-weight:800;font-size:20px;letter-spacing:-.04em;text-decoration:none}
.logo .r{color:#00d4e3}
.clocks{display:flex;gap:22px;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.clocks span b{font-weight:500;opacity:.55;margin-right:6px}
.nav{margin-left:auto;display:flex;gap:22px}
.nav a{text-decoration:none;font-weight:700;font-size:15px;letter-spacing:-.01em}
.nav a:hover{text-decoration:underline;text-underline-offset:4px}
/* hero */
.hero{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:auto auto;gap:24px var(--pad);padding:90px var(--pad) 50px;min-height:100svh;align-items:end}
.stack{grid-row:1/3;font-weight:900;font-size:clamp(84px,17.5vw,330px);line-height:.8;letter-spacing:-.075em}
.w{display:block;overflow:hidden;padding-bottom:.04em}
.w>span{display:inline-block;transform:translateY(105%);animation:up 1.1s var(--e) forwards}
.w:nth-child(2)>span{animation-delay:.09s}.w:nth-child(3)>span{animation-delay:.18s}.w:nth-child(4)>span{animation-delay:.27s}
@keyframes up{to{transform:none}}
.hero-img{align-self:start;margin-top:10px;aspect-ratio:4/5;overflow:hidden;clip-path:inset(100% 0 0 0);animation:clip 1.3s var(--e) .4s forwards}
@keyframes clip{to{clip-path:inset(0 0 0 0)}}
.hero-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.hero-side p{font-size:clamp(17px,1.35vw,21px);font-weight:500;letter-spacing:-.015em;margin-bottom:22px;max-width:24em}
.pill{display:inline-flex;gap:12px;align-items:center;background:var(--bk);color:var(--wh);text-decoration:none;font-weight:700;padding:14px 22px;border-radius:999px;transition:background .25s}
.pill:hover{background:var(--red)}
/* marquee */
.mq{background:var(--bk);color:var(--wh);overflow:hidden;white-space:nowrap;padding:22px 0}
.mq-in{display:inline-flex;gap:50px;animation:mq 26s linear infinite;font-weight:800;font-size:clamp(40px,6vw,96px);letter-spacing:-.05em;line-height:1}
.mq-in .o{-webkit-text-stroke:1.5px var(--wh);color:transparent;font-style:italic}
@keyframes mq{to{transform:translateX(-50%)}}
/* work */
.work{padding:clamp(80px,10vw,150px) var(--pad)}
.work-head{display:flex;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:30px}
.work h2{font-weight:900;font-size:clamp(70px,11vw,190px);letter-spacing:-.075em;line-height:.8}
.wf{display:flex;gap:6px;flex-wrap:wrap}
.wf button,.view button{background:none;border:1.5px solid var(--bk);border-radius:999px;padding:8px 14px;font:700 14px var(--f);cursor:pointer;color:var(--bk);transition:all .2s}
.wf button[aria-pressed=true],.view button[aria-pressed=true]{background:var(--bk);color:var(--wh)}
.wf button sup{font-size:10px;margin-left:3px}
.view{margin-left:auto;display:flex;gap:6px}
.wlist{list-style:none;border-top:1.5px solid var(--bk)}
.wlist li{border-bottom:1.5px solid var(--bk);animation:fi .5s ease both}
@keyframes fi{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.wlist button{width:100%;display:grid;grid-template-columns:60px 1fr 200px 150px 60px;align-items:center;gap:16px;background:none;border:0;font:inherit;color:inherit;text-align:left;padding:22px 0;cursor:pointer;transition:padding .35s var(--e),color .2s}
.wlist .n{font-weight:500;color:var(--g2);font-size:14px;font-variant-numeric:tabular-nums}
.wlist .t{font-weight:800;font-size:clamp(28px,3.6vw,58px);letter-spacing:-.05em;line-height:1}
.wlist .c,.wlist .y{font-weight:500;font-size:15px;color:var(--g2)}
.wlist .a{font-size:24px;justify-self:end;transition:transform .3s}
.wlist .thumb{display:none}
.wlist button:hover,.wlist button:focus-visible{padding-left:20px;color:var(--red)}
.wlist button:hover .a{transform:rotate(-45deg)}
.wlist.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 18px;border-top:0}
.wlist.grid li{border-bottom:0}
.wlist.grid button{grid-template-columns:1fr auto;grid-template-areas:'th th' 't a' 'c y';padding:0;gap:6px 10px}
.wlist.grid button:hover{padding-left:0}
.wlist.grid .thumb{display:block;grid-area:th;aspect-ratio:4/3;overflow:hidden;margin-bottom:10px}
.wlist.grid .thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s,transform 1s var(--e)}
.wlist.grid button:hover .thumb img{filter:none;transform:scale(1.04)}
.wlist.grid .n{display:none}.wlist.grid .t{grid-area:t;font-size:clamp(22px,2vw,30px)}.wlist.grid .a{grid-area:a}.wlist.grid .c{grid-area:c}.wlist.grid .y{grid-area:y;justify-self:end}
.cursor{position:fixed;left:0;top:0;width:min(30vw,420px);aspect-ratio:4/3;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .3s,transform .4s var(--e);overflow:hidden}
.cursor.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
/* what */
.what{background:var(--bk);color:var(--wh);padding:clamp(80px,10vw,150px) var(--pad)}
.what-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:#333}
.svc{background:var(--bk);padding:28px 24px 34px;min-height:340px;display:flex;flex-direction:column;position:relative;overflow:hidden;cursor:default}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.45);opacity:0;transform:scale(1.08);transition:opacity .6s,transform 1.2s var(--e)}
.svc:hover img,.svc:focus-within img{opacity:1;transform:scale(1)}
.svc>*:not(img){position:relative}
.svc .n{font-weight:500;color:var(--g3);font-size:14px}
.svc h3{margin-top:auto;font-weight:800;font-size:clamp(34px,3.4vw,54px);letter-spacing:-.05em;line-height:.95}
.svc p{color:#c9c9c9;margin-top:12px;font-size:16px;max-width:22em}
/* for */
.for{padding:clamp(80px,10vw,150px) var(--pad)}
.giant{font-weight:800;font-size:clamp(40px,6.4vw,112px);letter-spacing:-.06em;line-height:.95}
.giant span{display:inline-block;opacity:.12;transition:opacity .5s}
.giant span.lit{opacity:1}
/* how */
.how{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);padding:0 var(--pad) clamp(80px,10vw,150px);align-items:start}
.how-img{position:sticky;top:80px;aspect-ratio:4/5;overflow:hidden}
.how-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.how-list{list-style:none;border-top:1.5px solid var(--bk)}
.how-list li{display:grid;grid-template-columns:70px 1fr;padding:30px 0;border-bottom:1.5px solid var(--bk)}
.how-list b{color:var(--red);font-weight:800}
.how-list h3{font-weight:800;font-size:clamp(34px,3.4vw,54px);letter-spacing:-.05em;line-height:1;margin-bottom:10px}
.how-list p{color:#444;max-width:28em}
/* contact */
.contact{background:var(--bk);color:var(--wh);padding:clamp(80px,10vw,150px) var(--pad)}
.ct-h{font-weight:900;font-size:clamp(56px,10vw,180px);letter-spacing:-.07em;line-height:.85;margin-bottom:70px}
.ct-h span{display:block}
.ct{max-width:1000px}
.ct fieldset{border:0;margin-bottom:30px}
.ct legend{font-weight:700;font-size:15px;margin-bottom:12px;color:var(--g3)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts button{background:none;border:1.5px solid #444;color:var(--wh);border-radius:999px;padding:12px 20px;font:700 16px var(--f);cursor:pointer;transition:all .2s}
.opts button:hover{border-color:var(--wh)}
.opts button[aria-pressed=true]{background:var(--red);border-color:var(--red)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fld{display:block;margin-bottom:24px}
.fld span{display:block;font-weight:700;font-size:15px;color:var(--g3);margin-bottom:6px}
.fld input,.fld textarea{width:100%;background:none;border:0;border-bottom:1.5px solid #444;color:var(--wh);font:700 24px var(--f);letter-spacing:-.02em;padding:10px 0;outline:none}
.fld input:focus,.fld textarea:focus{border-color:var(--wh)}
.fld [aria-invalid=true]{border-color:var(--red)}
.err{color:var(--red);font-weight:700;min-height:24px;margin-bottom:12px}
.send{display:inline-flex;gap:14px;align-items:center;background:var(--wh);color:var(--bk);border:0;border-radius:999px;padding:20px 32px;font:800 20px var(--f);letter-spacing:-.02em;cursor:pointer;transition:background .2s,color .2s}
.send:hover{background:var(--red);color:var(--wh)}
.done{margin-top:30px;border:1.5px solid #444;padding:24px}
.done h3{font-weight:800;font-size:34px;letter-spacing:-.04em;margin-bottom:10px}
.done p{color:#c9c9c9}
/* footer */
.ftr{background:var(--bk);color:var(--wh);padding:20px var(--pad) 24px;overflow:hidden;border-top:1.5px solid #222}
.ftr-big{font-weight:900;font-size:clamp(70px,16.5vw,300px);letter-spacing:-.08em;line-height:.85;white-space:nowrap}
.ftr-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:20px;font-size:13px;color:var(--g3)}
.ftr-row span:nth-child(2){max-width:44em}
/* modal */
.modal{position:fixed;inset:0;z-index:80;background:var(--bk);color:var(--wh);overflow:auto;animation:mo .5s var(--e)}
.modal[hidden]{display:none}
@keyframes mo{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.m-close{position:fixed;top:16px;right:var(--pad);z-index:2;background:var(--wh);color:var(--bk);border:0;border-radius:999px;padding:10px 18px;font:700 14px var(--f);cursor:pointer}
.m-in{display:grid;grid-template-columns:1.4fr 1fr;min-height:100%}
.m-in figure{height:100vh;position:sticky;top:0}
.m-in figure img{width:100%;height:100%;object-fit:cover}
.m-copy{padding:90px var(--pad) 40px;display:flex;flex-direction:column}
.m-copy h3{font-weight:900;font-size:clamp(46px,5vw,90px);letter-spacing:-.06em;line-height:.9;margin-bottom:22px}
.m-copy>p{color:#c9c9c9;font-size:18px}
.m-copy dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:30px 0;padding-top:20px;border-top:1.5px solid #333;font-size:15px}
.m-copy dt{color:var(--g2)}
.m-nav{margin-top:auto;display:flex;justify-content:space-between}
.m-nav button{background:none;border:0;color:var(--wh);font:700 16px var(--f);cursor:pointer}
.m-nav button:hover{color:var(--red)}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--e),transform .9s var(--e)}.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.w>span{transform:none}.hero-img{clip-path:none}.giant span{opacity:1}}
@media (hover:none){.cursor{display:none}}
@media (max-width:1000px){
 .clocks{display:none}
 .hero{grid-template-columns:1fr;grid-template-rows:auto;padding-top:80px;min-height:auto}
 .stack{grid-row:auto}
 .hero-img{aspect-ratio:16/10;margin-top:0}
 .wlist button{grid-template-columns:40px 1fr 40px}
 .wlist .c,.wlist .y{display:none}
 .wlist.grid{grid-template-columns:1fr 1fr}
 .what-grid{grid-template-columns:1fr 1fr}
 .how{grid-template-columns:1fr}.how-img{position:relative;top:0;aspect-ratio:16/10}
 .m-in{grid-template-columns:1fr}.m-in figure{height:50vh;position:relative}
}
@media (max-width:600px){
 .nav{gap:14px}.nav a{font-size:14px}
 .wlist.grid{grid-template-columns:1fr}
 .what-grid{grid-template-columns:1fr}
 .svc{min-height:240px}
 .svc img{opacity:.6;transform:none}
 .row{grid-template-columns:1fr;gap:0}
 .view{margin-left:0}
 .fld input,.fld textarea{font-size:20px}
}