:root{
  --bg:#040404; --ink:#efefef; --mute:#a5a5a5; --line:#1f1f1f;
  --card:#111; --card2:#181818;
  --acc:#ee421b; --acc-dk:#2d0800;
  --sans:"Inter Tight",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --r:20px; --max:1320px;
  --ease:cubic-bezier(.77,0,.175,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.eb{position:relative;display:inline-block;color:var(--acc)}
.eb .blk{position:absolute;inset:-2px -4px;background:var(--acc);clip-path:inset(0 100% 0 0)}
h1,h2,h3{font-weight:700;letter-spacing:-.025em;line-height:1.02}
h1{font-size:clamp(46px,7.6vw,118px)}
h2{font-size:clamp(34px,5vw,72px)}
h3{font-size:22px;letter-spacing:-.01em;line-height:1.15}
.lead{color:var(--mute);font-size:clamp(16px,1.4vw,18px);max-width:520px}
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:block}
@media(min-width:900px){[data-split] .ln>span{white-space:nowrap}}

/* buttons with char-roll hover */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 22px;border-radius:999px;background:var(--acc);color:#fff;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;transition:background .3s}
.btn:hover{background:#ff5a33}
.btn.ghost{background:var(--acc-dk);color:var(--acc)}
.btn.ghost:hover{background:#451000}
.btn.dark{background:#1a1a1a;color:var(--ink)}
.roll{display:inline-flex;overflow:hidden;height:1.25em;line-height:1.25em}
.roll .c{display:inline-block;white-space:pre;text-shadow:0 1.25em currentColor;transition:transform .5s var(--ease);transition-delay:calc(var(--i)*18ms)}
a:hover .roll .c,button:hover .roll .c{transform:translateY(-1.25em)}
.icon-btn{width:46px;height:46px;border-radius:12px;background:var(--acc-dk);color:var(--acc);display:grid;place-items:center;transition:background .2s}
.icon-btn:hover{background:#451000}

/* nav (hides on scroll down, like reference) */
header{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;padding:0 24px}
.nav>*{pointer-events:auto}
.nav-l{display:flex;align-items:center;gap:56px;transition:transform .6s var(--ease),opacity .4s}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.logo svg{width:32px;height:32px}
.links{display:flex;gap:34px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.links a{opacity:.8;transition:opacity .2s}.links a:hover{opacity:1}
.nav-r{display:flex;gap:8px;align-items:center}
.nav-r .txt{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:0 14px;transition:opacity .4s,transform .6s var(--ease)}
.menu-btn{transform:scale(0);width:0;margin-left:-8px;transition:transform .5s var(--ease),width .5s var(--ease),margin .5s var(--ease)}
header.compact .nav-l{transform:translateY(-120%);opacity:0;pointer-events:none}
header.compact .nav-r .txt{opacity:0;transform:translateY(-120%);pointer-events:none}
header.compact .menu-btn{transform:scale(1);width:46px;margin-left:0}
header.top-bg{background:linear-gradient(rgba(4,4,4,.85),rgba(4,4,4,0))}
@media(max-width:900px){.links,.nav-r .txt{display:none}.menu-btn{transform:scale(1);width:46px;margin-left:0}}
@media(max-width:560px){.nav-r .btn{display:none}}
.drawer{position:fixed;inset:0;z-index:60;background:var(--bg);padding:20px 24px;display:flex;flex-direction:column;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
.drawer.open{clip-path:inset(0 0 0 0)}
.drawer nav{display:flex;flex-direction:column;gap:6px;margin-top:70px}
.drawer nav a{font-size:clamp(40px,8vw,80px);font-weight:700;letter-spacing:-.03em;line-height:1.05}

/* ===== HERO (pinned scroll story) ===== */
.hero{position:relative;height:100vh;overflow:hidden;background:var(--bg)}
.gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.widgets{position:absolute;inset:0}
.wd{position:absolute;will-change:transform,opacity}
.wd.circ{border-radius:50%;overflow:hidden}
.wd img{width:100%;height:100%;object-fit:cover}
.wd.photo{border-radius:14px;overflow:hidden;border:4px solid #1c1c1c}
.wd.arrow{border-radius:50%;display:grid;place-items:center;font-size:30px}
.wd.chip{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:7px 12px;border-radius:8px;background:#3a0d22;color:#ff8ac4;white-space:nowrap}
.wd.cardp{background:linear-gradient(135deg,#6b1640,#2a0a1a);border-radius:16px;padding:20px 22px;font-size:clamp(20px,2.2vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.05;color:#ff8ac4}
.wd.bubble{background:#2a3a8f;color:#dfe5ff;border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.35;max-width:220px}
.wd.ring{border-radius:50%;border:1px solid #333;display:grid;place-items:center;text-align:center;font-size:clamp(22px,2.4vw,40px);font-weight:600;letter-spacing:-.02em;color:#cfcfcf;background:radial-gradient(circle,#202020,#111)}
.wd.ring small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--mute);margin-top:6px}
.hl{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;pointer-events:none}
.hl-in{position:relative;text-align:center;width:100%}
.pill{display:inline-flex;gap:8px;align-items:center;background:#151515;border:1px solid #222;border-radius:999px;padding:8px 14px;font-size:13px;pointer-events:auto}
.pill a{color:var(--acc)}
#l1{display:block;margin-top:24px}
#l2{display:flex;justify-content:center;align-items:center;height:1.02em;white-space:nowrap;font-size:clamp(46px,7.6vw,118px);font-weight:700;letter-spacing:-.025em;line-height:1.02}
#l2 .acc{color:var(--acc)}
#l2>.ln{flex:1 1 0;min-width:0;overflow:visible}
#l2>.ln:first-child{text-align:right}#l2>.ln:last-child{text-align:left}
#l2>.ln>span{display:inline-block}
#gm{width:0;height:.9em;margin:0 .14em;border-radius:14px;overflow:hidden;position:relative;flex:none;background:#111}
#gm video,#gm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-cta{margin-top:30px;pointer-events:auto}
.hero-logos{position:absolute;left:0;right:0;bottom:28px;text-align:center}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);margin:16px auto 0;max-width:900px}
.track{display:flex;gap:56px;width:max-content;animation:scroll 30s linear infinite}
.track span{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#d6d6d6;white-space:nowrap}
.track span i{font-style:normal;color:var(--acc)}
@keyframes scroll{to{transform:translateX(-50%)}}
.mosaic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:24vw 27vw 27vw 24vw;grid-template-rows:30vh 62vh 30vh;gap:16px;pointer-events:none}
.mosaic .t{border-radius:16px;overflow:hidden;opacity:0;background:#111}
.mosaic .t img{width:100%;height:100%;object-fit:cover}
.mosaic .hole{grid-column:2/4;grid-row:2}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:30vh;background:linear-gradient(transparent,var(--bg));opacity:0;pointer-events:none}
@media(max-width:700px){
  .mosaic{grid-template-columns:30vw 41vw 41vw 30vw;grid-template-rows:20vh 48vh 20vh;gap:10px}
  .hide-m{display:none}
  .wd.circ,.wd.photo,.wd.arrow{transform-origin:center}
}

/* sections */
section{padding:120px 0;position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:44px}
.sec-head .lead{margin-top:14px}
.split-head{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;margin-bottom:44px}
@media(max-width:800px){.split-head{grid-template-columns:1fr}}

/* results carousel */
.carousel{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 24px 4px max(24px,calc(50vw - var(--max)/2 + 24px));scroll-padding-left:max(24px,calc(50vw - var(--max)/2 + 24px))}
.carousel::-webkit-scrollbar{display:none}
.case{flex:0 0 min(440px,86vw);contain:layout paint;scroll-snap-align:start;background:var(--card);border-radius:var(--r);padding:18px;cursor:pointer;transition:background .3s}
.case:hover{background:var(--card2)}
.case .who{display:flex;align-items:center;gap:14px;margin-bottom:60px}
.case .av{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none}
.case .av img{width:100%;height:100%;object-fit:cover}
.case .who h3{font-size:24px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:#1c1c1c;border-radius:12px;padding:14px 16px}
.stat b{display:block;font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.stat small{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.case .ph{aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin-top:10px}
.case .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.case:hover .ph img{transform:scale(1.06)}
.arrows{display:flex;gap:8px}

/* categories wheel (pinned) */
.cats{position:relative;height:100vh;overflow:hidden}
.cats .bgimg{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(26px) brightness(.45);transform:scale(1.1);transition:background-image .5s}
.cats .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,4,4,.75),rgba(4,4,4,.1) 60%,rgba(4,4,4,.4))}
.cats .left{position:absolute;left:24px;top:110px;z-index:3}
.cats .left2{position:absolute;left:24px;bottom:40px;max-width:340px;z-index:2}
.cats .card{position:absolute;left:40%;top:56%;width:min(28vw,380px);aspect-ratio:4/3;transform:translate(-50%,-50%);border-radius:18px;overflow:hidden;z-index:2;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.cats .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s}
.wheel{position:absolute;right:0;top:50%;width:46vw;height:0;z-index:2}
.wheel li{list-style:none;position:absolute;left:0;top:0;font-size:clamp(30px,3.6vw,54px);font-weight:500;letter-spacing:-.02em;white-space:nowrap;color:#fff;will-change:transform,opacity}
@media(max-width:800px){.cats .card{left:50%;top:62%;width:62vw}.wheel{width:60vw;top:36%}.cats .left{top:90px}.cats .left2{display:none}}

/* fan section (like the phone fan) */
.fan-sec{background:radial-gradient(ellipse 80% 60% at 50% 70%,#3a0d02,transparent 70%),var(--bg);text-align:center;overflow:hidden}
.fan{position:relative;height:min(70vw,640px);margin-top:60px}
.fc{position:absolute;left:50%;top:0;width:min(26vw,300px);aspect-ratio:9/16;border-radius:34px;overflow:hidden;border:6px solid #1d1d1d;background:#111;transform:translateX(-50%);will-change:transform}
.fc img{width:100%;height:100%;object-fit:cover}
.fc .cap{position:absolute;left:0;right:0;bottom:0;padding:18px;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.fc .cap b{display:block;font-size:22px;letter-spacing:-.02em;line-height:1.05;color:#ff8a5c}
.sc{position:absolute;background:#1a1a1a;border:1px solid #262626;border-radius:12px;padding:12px 16px;text-align:center;z-index:3}
.sc b{display:block;font-size:clamp(20px,2.4vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.sc small{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px;text-align:left}
@media(max-width:800px){.feats{grid-template-columns:1fr}.fc{width:44vw}.fan{height:92vw}}
.ft{background:#141414;border-radius:16px;padding:22px;display:flex;justify-content:space-between;align-items:flex-end;min-height:130px;cursor:pointer;transition:background .3s}
.ft:hover{background:var(--acc-dk)}
.ft h3{font-size:20px}
.ft p{color:var(--mute);font-size:14px;margin-top:6px}
.ft .go{width:34px;height:34px;border-radius:9px;background:var(--acc);display:grid;place-items:center;flex:none;transition:transform .4s var(--ease)}
.ft:hover .go{transform:rotate(45deg)}

/* work */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:38px;padding:0 16px;border-radius:999px;border:1px solid #2a2a2a;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);transition:all .25s}
.chip.on,.chip:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-auto-flow:dense}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid{grid-template-columns:1fr}}
.tile{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;cursor:pointer;background:#111}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tile:hover img{transform:scale(1.07)}
.tile .meta{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.tile .meta .mono{color:#ddd}
.tile .meta h3{margin-top:6px}
.tile .go{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:12px;background:var(--acc);display:grid;place-items:center;transform:scale(0) rotate(-45deg);transition:transform .45s var(--ease)}
.tile:hover .go{transform:none}
.tile.hide{display:none}
.tile.wide{grid-column:span 2;aspect-ratio:auto;min-height:320px}
@media(max-width:620px){.tile.wide{grid-column:auto;aspect-ratio:4/5}}

/* process */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:900px){.process{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.process{grid-template-columns:1fr}}
.step{background:var(--card);border-radius:var(--r);padding:22px;min-height:210px;display:flex;flex-direction:column;justify-content:space-between;transition:background .3s}
.step:hover{background:var(--acc-dk)}
.step:hover .mono{color:var(--acc)}
.step p{color:var(--mute);font-size:15px;margin-top:6px}

/* stories (case study list) */
.story{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;border-radius:24px;padding:16px;margin-bottom:16px;cursor:pointer}
.story .ph{aspect-ratio:16/10;border-radius:16px;overflow:hidden}
.story .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.story:hover .ph img{transform:scale(1.05)}
.story h3{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.02em;line-height:1.12;padding-right:20px}
.story .btn{margin-top:22px;height:38px;font-size:11px}
@media(max-width:800px){.story{grid-template-columns:1fr;gap:18px}}
.allstories{display:flex;justify-content:space-between;align-items:center;background:#141414;border-radius:24px;padding:36px 48px;font-size:clamp(20px,2vw,28px);font-weight:500}

/* videos */
.vids{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
@media(max-width:800px){.vids{grid-template-columns:1fr 1fr}.vids .v:first-child{grid-column:span 2}}
.v{border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:9/14;background:#111}
.vids .v:first-child{aspect-ratio:auto}
.v video{width:100%;height:100%;object-fit:cover}
.v .mono{position:absolute;left:14px;bottom:14px;color:#fff;background:rgba(0,0,0,.55);padding:6px 10px;border-radius:999px}

/* about creds */
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:800px){.creds{grid-template-columns:1fr 1fr}}
.cred{border:1px solid var(--line);border-radius:16px;padding:22px}
.cred b{display:block;font-size:17px;margin-top:10px;font-weight:600}

/* faq */
.faq{max-width:820px;margin:0 auto}
.q{background:#111;border-radius:14px;margin-bottom:8px}
.q button{width:100%;text-align:left;display:flex;gap:14px;align-items:center;padding:18px 20px;font-size:17px;font-weight:500}
.q .pm{color:var(--acc);font-size:22px;line-height:1;transition:transform .4s var(--ease)}
.q.on .pm{transform:rotate(45deg)}
.q .a{height:0;overflow:hidden}
.q .a p{padding:0 20px 20px 50px;color:var(--mute);max-width:700px}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:56px}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
form{background:var(--card);border-radius:28px;padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:14px}
form .full{grid-column:1/-1}
@media(max-width:560px){form{grid-template-columns:1fr}}
label{display:flex;flex-direction:column;gap:8px}
label span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
input,select,textarea{font:inherit;color:var(--ink);background:#1a1a1a;border:1px solid #262626;border-radius:12px;padding:14px;outline:none;transition:border .2s}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
textarea{min-height:110px;resize:vertical}
.budget{display:flex;gap:8px;flex-wrap:wrap}
.budget input{display:none}
.budget label{display:block}
.budget label div{height:40px;padding:0 16px;border-radius:999px;border:1px solid #2a2a2a;display:flex;align-items:center;font-size:14px;cursor:pointer;transition:all .2s}
.budget input:checked+div{background:var(--acc);border-color:var(--acc);color:#fff}
.ok{display:none;grid-column:1/-1;background:var(--acc-dk);color:#ffb39f;border-radius:12px;padding:16px}
.ok.show{display:block}
.contact-card{display:flex;flex-direction:column;gap:12px;margin-top:34px}
.contact-card a,.contact-card div{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:16px;padding:18px 20px;transition:border .2s}
.contact-card a:hover{border-color:var(--acc)}

/* final collage CTA */
.final{position:relative;height:110vh;min-height:700px;overflow:hidden;border-radius:28px;margin:0 16px;background:#0d0d0d;display:grid;place-items:center;text-align:center}
.final .fx{position:absolute;overflow:hidden;will-change:transform}
.final .fx img{width:100%;height:100%;object-fit:cover}
.final .inner{position:relative;z-index:2}

/* footer */
footer{padding:90px 0 40px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
@media(max-width:800px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.fgrid ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}
.fgrid a:hover{color:var(--acc)}
.fbig{font-size:clamp(56px,14.5vw,240px);font-weight:800;letter-spacing:-.06em;line-height:.85;margin-top:80px;color:#141414;white-space:nowrap;overflow:hidden}
.fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:26px}

/* project modal */
.modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:none;align-items:flex-end;justify-content:center}
.modal.open{display:flex}
.sheet{background:var(--bg);width:100%;max-width:1100px;max-height:94vh;overflow:auto;border-radius:28px 28px 0 0;border:1px solid var(--line)}
.sheet .top{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:rgba(4,4,4,.9);backdrop-filter:blur(10px);z-index:2}
.sheet .gallery{display:grid;grid-template-columns:2fr 1fr;gap:12px;padding:0 24px}
.sheet .gallery img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.sheet .gallery .main{aspect-ratio:4/3;grid-row:span 2}
.sheet .gallery .sm{aspect-ratio:4/3}
@media(max-width:700px){.sheet .gallery{grid-template-columns:1fr 1fr}.sheet .gallery .main{grid-column:span 2;grid-row:auto}}
.sheet .body{padding:36px 24px 48px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px}
@media(max-width:800px){.sheet .body{grid-template-columns:1fr}}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.specs div{background:var(--card);border-radius:12px;padding:14px}
.specs b{display:block;font-weight:600;margin-top:4px}
.sheet blockquote{margin-top:26px;border-left:3px solid var(--acc);padding-left:18px;font-size:18px;color:#ddd}

/* JS-on initial states (content stays visible if scripts fail) */
.js .rv{opacity:0;transform:translateY(40px)}
.js .intro{opacity:0}
@media(prefers-reduced-motion:reduce){.track{animation:none}}

/* ===== v3 additions ===== */
/* carousel = transform slider (no native horizontal scroll -> no wobble) */
.carousel{overflow:hidden!important;scroll-snap-type:none!important;touch-action:pan-y;cursor:grab;user-select:none}
.carousel.drag{cursor:grabbing}
.ctrack{display:flex;gap:16px;will-change:transform}
.case{display:block}
.case img{pointer-events:none;-webkit-user-drag:none}
.arrows .icon-btn:disabled{opacity:.35;cursor:default}

/* client logo strip under hero */
.logos{padding:46px 0 40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;background:var(--bg);position:relative;z-index:2}
.logos .marquee{max-width:none;margin-top:18px}
.logos .track{gap:64px;animation-duration:36s}
.logos .track span{font-size:17px;font-weight:700;color:#8a8a8a;letter-spacing:-.01em;text-transform:uppercase;transition:color .3s}
.logos .track span:hover{color:#fff}
.logos .marquee:hover .track{animation-play-state:paused}

/* nav active link */
.links a.on{opacity:1;color:var(--acc)}

/* inner page hero */
.phero{padding:170px 0 70px}
.phero h1{font-size:clamp(44px,7vw,104px)}
.phero .lead{margin-top:22px}
.phero .row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}

/* case study page */
.chero{position:relative;height:88vh;min-height:560px;overflow:hidden;border-radius:0 0 28px 28px}
.chero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.chero:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(4,4,4,.35),transparent 30%,transparent 50%,rgba(4,4,4,.9))}
.chero .in{position:absolute;left:0;right:0;bottom:44px;z-index:2}
.chero h1{font-size:clamp(42px,6.6vw,100px)}
.back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#ddd;margin-bottom:22px}
.back:hover{color:var(--acc)}
.specbar{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:-34px;position:relative;z-index:3}
@media(max-width:900px){.specbar{grid-template-columns:repeat(2,1fr)}}
.specbar div{background:#121212;border:1px solid #1e1e1e;border-radius:14px;padding:16px}
.specbar b{display:block;font-weight:600;font-size:17px;margin-top:6px;letter-spacing:-.01em}
.cstory{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;padding:90px 0 40px}
@media(max-width:900px){.cstory{grid-template-columns:1fr;gap:24px}}
.cstory h3{font-size:15px;font-family:var(--mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.cstory p{color:#cfcfcf;font-size:18px;line-height:1.55}
.gallery{columns:3 320px;column-gap:14px}
.gallery figure{break-inside:avoid;margin:0 0 14px;border-radius:16px;overflow:hidden;cursor:zoom-in;position:relative;background:#111}
.gallery figure img,.gallery figure video{width:100%;display:block;transition:transform 1s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figure .mono{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.55);color:#fff;padding:5px 9px;border-radius:999px}
.tquote{background:var(--card);border-radius:28px;padding:clamp(30px,6vw,80px);margin-top:40px}
.tquote blockquote{font-size:clamp(24px,3.2vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1.2;max-width:1000px}
.tquote blockquote:before{content:"“";color:var(--acc)}
.nextp{position:relative;display:block;height:60vh;min-height:380px;border-radius:28px;overflow:hidden;margin-top:110px}
.nextp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.45);transition:transform 1.2s var(--ease),filter .6s}
.nextp:hover img{transform:scale(1.05);filter:brightness(.6)}
.nextp .in{position:absolute;left:40px;right:40px;bottom:40px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.nextp h2{font-size:clamp(34px,5vw,72px)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img,.lb video{max-width:92vw;max-height:84vh;border-radius:12px}
.lb .x,.lb .pv,.lb .nx{position:absolute;width:52px;height:52px;border-radius:14px;background:#1a1a1a;color:#fff;display:grid;place-items:center;font-size:20px}
.lb .x{top:20px;right:20px}.lb .pv{left:20px;top:50%}.lb .nx{right:20px;top:50%}
.lb .cnt{position:absolute;bottom:22px;left:50%;transform:translateX(-50%)}

/* structures */
.formats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:800px){.formats{grid-template-columns:1fr}}
.fmt{background:var(--card);border-radius:24px;overflow:hidden}
.fmt .ph{aspect-ratio:16/10;overflow:hidden}
.fmt .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.fmt:hover .ph img{transform:scale(1.05)}
.fmt .bd{padding:24px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.fmt h3{font-size:28px;letter-spacing:-.02em}
.fmt p{color:var(--mute);margin-top:8px;font-size:15px}
.fmt .tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--acc-dk);color:var(--acc);padding:8px 12px;border-radius:999px;white-space:nowrap}
.acc-list{max-width:none}
.q .a .ai{padding:0 20px 22px 50px;color:var(--mute);max-width:820px}
.q .a .ai p+p{margin-top:10px}
.q .a .ai a{color:var(--acc)}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 20px 22px 50px}
@media(max-width:700px){.team{grid-template-columns:1fr 1fr}}
.team div{background:#181818;border-radius:12px;padding:14px}
.team b{display:block;color:var(--ink)}
.team span{font-size:13px}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:900px){.split2{grid-template-columns:1fr}}
.bigtxt{font-size:clamp(24px,2.6vw,36px);font-weight:500;letter-spacing:-.02em;line-height:1.25;color:#dcdcdc}
.bigtxt em{font-style:normal;color:var(--acc)}
.logowall{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(max-width:700px){.logowall{grid-template-columns:repeat(2,1fr)}}
.logowall div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);height:120px;display:grid;place-items:center;font-weight:800;font-size:18px;letter-spacing:-.01em;color:#777;text-transform:uppercase;transition:color .3s,background .3s;text-align:center;padding:10px}
.logowall div:hover{color:#fff;background:#0d0d0d}
.deckcard{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:var(--card);border-radius:28px;overflow:hidden}
@media(max-width:800px){.deckcard{grid-template-columns:1fr}}
.deckcard .ph{min-height:320px;position:relative}
.deckcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.deckcard .bd{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.pagecta{text-align:center;padding:120px 24px;border-radius:28px;margin:0 16px;background:radial-gradient(ellipse at 50% 120%,#3a0d02,transparent 65%),#0b0b0b}
.pagecta .lead{margin:18px auto 28px}