:root{
  --bg:#f3f3f1; --ink:#0c0c0c; --mute:#6b6b67; --line:#d9d9d5; --dark:#0c0c0c; --dark2:#161616;
  --accent:#ff4a1c; --pad:clamp(16px,2.2vw,32px);
  --f-display:'Antonio',sans-serif; --f-body:'Inter Tight',system-ui,sans-serif; --f-mono:'Space Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;overflow-x:hidden}
body.is-loading{overflow:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}

/* type */
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.idx{font-family:var(--f-mono);font-size:13px}
.display{font-family:var(--f-display);text-transform:uppercase;line-height:.86;letter-spacing:-.01em;font-weight:400}
.h-xl{font-size:clamp(84px,20.5vw,360px)}
.h-l{font-size:clamp(52px,8vw,140px)}
.h-m{font-size:clamp(36px,4.6vw,76px)}
.lead{font-family:var(--f-mono);text-transform:uppercase;font-size:clamp(18px,2.1vw,30px);line-height:1.25;letter-spacing:.01em}
.muted{color:var(--mute)}

/* grain + cursor */
.grain{pointer-events:none;position:fixed;inset:-50%;z-index:90;opacity:.07;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(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.cursor{position:fixed;left:0;top:0;z-index:100;pointer-events:none;mix-blend-mode:difference}
.cursor .dot{width:10px;height:10px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:width .3s,height .3s}
.cursor .lbl{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(0);font-family:var(--f-mono);font-size:11px;color:#000;background:#fff;padding:6px 10px;border-radius:40px;white-space:nowrap;transition:transform .3s}
.cursor.has-lbl .dot{width:0;height:0}.cursor.has-lbl .lbl{transform:translate(-50%,-50%) scale(1)}
@media (hover:none){.cursor{display:none}}

/* loader */
.loader{position:fixed;inset:0;z-index:200;background:var(--dark);color:#fff;display:flex;align-items:flex-end;justify-content:space-between;padding:var(--pad)}
.loader .count{font-family:var(--f-display);font-size:clamp(90px,16vw,260px);line-height:.8}
.loader .ltxt{max-width:280px}
.pix{position:fixed;inset:0;z-index:199;display:grid;pointer-events:none}
.pix i{background:var(--dark);display:block}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);mix-blend-mode:difference;color:#fff}
.nav .logo{font-family:var(--f-display);font-size:30px;line-height:1;text-transform:uppercase}
.nav ul{display:flex;gap:34px;list-style:none}
.nav ul a{position:relative}
.nav ul a::after{content:'';position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.nav .avail{display:flex;align-items:center;gap:8px}
.nav .avail i{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 #3ddc84;animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
@media (max-width:760px){.nav ul{display:none}}

/* hero */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden}
#ribbon{position:absolute;inset:0;width:100%;height:100%}
.hero .bottom{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) 10px;pointer-events:none}
.hero .wordmark{white-space:nowrap;display:inline-block;line-height:.82}
.hero .wm-wrap{overflow:hidden;line-height:.8}
.hero .card{position:absolute;right:var(--pad);top:90px;width:240px;background:#fff;padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 50px rgba(0,0,0,.08)}
.hero .card .row{display:flex;gap:6px}
.hero .card .row img{width:36px;height:36px;object-fit:cover}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:#fff;padding:12px 18px;font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;position:relative;overflow:hidden}
.btn span{position:relative;z-index:1}
.btn::before{content:'';position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .45s cubic-bezier(.7,0,.2,1)}
.btn:hover::before{transform:none}
.btn.light{background:#fff;color:var(--ink)}
@media (max-width:760px){.hero .card{display:none}}

/* sections */
section{position:relative}
.sec{padding:clamp(80px,12vw,180px) var(--pad)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:clamp(40px,6vw,90px)}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.vert{writing-mode:vertical-rl;position:absolute;right:var(--pad);top:clamp(80px,12vw,180px)}

/* about */
.about .lead{grid-column:2/12}
.about .body{grid-column:6/10;margin-top:60px;color:#333;font-size:16px}
.stack{position:relative;height:260px;margin-top:60px}
.stack span{position:absolute;font-family:var(--f-mono);font-size:13px;text-transform:uppercase;white-space:nowrap}
@media (max-width:760px){.about .lead,.about .body{grid-column:1/-1}.stack{height:auto;display:flex;flex-wrap:wrap;gap:10px 18px}.stack span{position:static}}

/* reel */
.reel{height:250vh}
.reel .stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.reel .frame{width:34vw;aspect-ratio:16/9;overflow:hidden;position:relative;will-change:width}
.reel video{width:100%;height:100%;object-fit:cover}
.reel .tag{position:absolute;display:flex;align-items:center;gap:12px;color:#fff;mix-blend-mode:difference}
.reel .tl{left:var(--pad);top:50%}.reel .tr{right:var(--pad);top:50%}
.reel .play{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);color:#fff;z-index:2}

/* capabilities */
.caps .row{display:flex;align-items:baseline;gap:24px;border-top:1px solid var(--line);padding:14px 0;overflow:hidden}
.caps .row:last-child{border-bottom:1px solid var(--line)}
.caps .row .display{font-size:clamp(40px,6.4vw,110px)}
.caps .row .mono{max-width:220px}
.caps .row:nth-child(2n){justify-content:flex-end}
.caps .row:nth-child(2n) .mono{order:-1;text-align:right}
.caps .row .n{width:60px}
.line-in{display:block;transform:translateY(110%)}

/* works */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;border:1px solid var(--ink);padding:7px 12px;border-radius:40px;transition:background .3s,color .3s}
.chip.on,.chip:hover{background:var(--ink);color:#fff}
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2vw,30px) 20px;align-items:start}
.work{display:block;position:relative}
.work .media{position:relative;overflow:hidden;background:#ddd}
.work .media img,.work .media video{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.work .media video{position:absolute;inset:0;opacity:0;transition:opacity .4s}
.work:hover .media video{opacity:1}
.work:hover .media img{transform:scale(1.04)}
.work .info{display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.work .title{font-family:var(--f-mono);text-transform:uppercase;font-size:14px}
.work .tags{display:flex;gap:10px;flex-wrap:wrap}
.work .tags span{font-family:var(--f-mono);font-size:11px;color:var(--mute);text-transform:uppercase}
.work.hide{display:none}
.lL{grid-column:1/8}.lP{grid-column:2/6}
.rL{grid-column:7/13;margin-top:14vh}.rP{grid-column:8/12;margin-top:14vh}
@media (max-width:760px){.works>*{grid-column:1/-1!important;margin-top:0!important}}

/* process (dark, pinned) */
.process{background:var(--dark);color:#fff}
.process .pin{height:100vh;position:relative;overflow:hidden;padding:var(--pad)}
.process .step{position:absolute;inset:90px var(--pad) 40px;display:flex;flex-direction:column;justify-content:space-between;opacity:0}
.process .step .display{font-size:clamp(64px,10vw,180px)}
.process .step p{max-width:360px;color:#bdbdb8}
.process .step .top{display:flex;justify-content:space-between}
.process .step:nth-child(2n) .bottom{align-self:flex-end;text-align:right}
.process .cards{position:absolute;left:47%;top:46%;width:min(28vw,400px);aspect-ratio:4/5;transform:translate(-50%,-50%);perspective:1200px;pointer-events:none}
.process .cards img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px;backface-visibility:hidden}
.process .bar{position:absolute;left:var(--pad);right:var(--pad);bottom:16px;height:1px;background:#333}
.process .bar i{display:block;height:100%;width:0;background:var(--accent)}

/* filmstrip */
.strip{height:300vh;background:var(--bg)}
.strip .stick{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.strip .track{display:flex;gap:16px;padding-left:var(--pad);will-change:transform}
.strip .track figure{flex:0 0 auto;height:56vh;position:relative}
.strip .track img{height:100%;width:auto}
.strip .track figcaption{position:absolute;left:0;bottom:-24px;font-family:var(--f-mono);font-size:11px;text-transform:uppercase}
.strip .perf{height:18px;margin:18px 0;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 22px);opacity:.85}

/* image wall + trail */
.wall{columns:4 260px;column-gap:14px}
.wall a{display:block;margin-bottom:14px;break-inside:avoid;overflow:hidden}
.wall img{width:100%;transition:transform 1s}
.wall a:hover img{transform:scale(1.05)}
.wall .more{display:none}
.trail{height:80vh;position:relative;overflow:hidden;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center}
.trail img{position:absolute;width:220px;aspect-ratio:4/5;object-fit:cover;pointer-events:none;transform:translate(-50%,-50%)}
.trail .display{position:relative;z-index:2;mix-blend-mode:difference;pointer-events:none}

/* badge */
.badge{width:150px;height:150px;animation:spin 18s linear infinite}
.badge text{font-family:var(--f-mono);font-size:10px;text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}

/* footer */
.footer{background:var(--dark);color:#fff;padding:var(--pad);min-height:100vh;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;overflow:hidden;position:relative}
.footer .big a{display:block;font-family:var(--f-display);text-transform:uppercase;font-size:clamp(40px,5.4vw,92px);line-height:.95;transition:color .3s,padding .4s}
.footer .big a:hover{color:var(--accent);padding-left:14px}
.footer .col-img{position:relative;height:100%;min-height:80vh;overflow:hidden}
.footer .col-img .lane{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;animation:lane 40s linear infinite}
.footer .col-img img{width:70%;margin-left:15%;border-radius:8px}
.footer .col-img .lane img:nth-child(2n){margin-left:30%}
@keyframes lane{to{transform:translateY(-50%)}}
.footer .end{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid #2a2a2a;padding-top:16px}
.footer .mail{font-family:var(--f-display);font-size:clamp(34px,6vw,96px);text-transform:uppercase;line-height:1;word-break:break-all}
@media (max-width:900px){.footer{grid-template-columns:1fr}.footer .col-img{min-height:50vh}}

/* reveal helpers */
.reveal{position:relative}
.px-cover{position:absolute;inset:0;display:grid;z-index:3;pointer-events:none}
.px-cover i{background:var(--bg)}
.dark .px-cover i,.process .px-cover i{background:var(--dark)}

/* modal player + lightbox */
.modal{position:fixed;inset:0;z-index:150;background:rgba(8,8,8,.96);display:none;align-items:center;justify-content:center;padding:4vw}
.modal.open{display:flex}
.modal video,.modal img{max-width:100%;max-height:88vh}
.modal .x{position:absolute;top:20px;right:var(--pad);color:#fff}
.modal .prev,.modal .next{position:absolute;top:50%;color:#fff;transform:translateY(-50%);padding:20px}
.modal .prev{left:10px}.modal .next{right:10px}

/* project page */
.p-wrap{display:grid;grid-template-columns:1fr 360px;gap:40px;padding:110px var(--pad) 80px;align-items:start}
.p-media{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.p-media .full{grid-column:1/-1}.p-media .half{grid-column:span 3}.p-media .third{grid-column:span 2}
.p-media figure{overflow:hidden;cursor:zoom-in;background:#ddd;position:relative}
.p-media img{width:100%}
.p-media .vid{grid-column:1/-1;cursor:default;background:#000}
.p-media .vid video{width:100%}
.p-info{position:sticky;top:100px;display:flex;flex-direction:column;gap:22px}
.p-info .meta{border-top:1px solid var(--line)}
.p-info .meta div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:10px 0}
.p-info .meta div span:last-child{text-align:right}
.p-tags{display:flex;gap:8px;flex-wrap:wrap}
.p-tags span{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;border:1px solid var(--line);padding:5px 9px;border-radius:30px}
.next-p{display:block;background:var(--dark);color:#fff;padding:var(--pad);position:relative;overflow:hidden;height:80vh}
.next-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity .6s,transform 1.2s}
.next-p:hover img{opacity:.8;transform:scale(1.04)}
.next-p .in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:space-between}
@media (max-width:900px){.p-wrap{grid-template-columns:1fr}.p-info{position:static;order:-1}.p-media .half,.p-media .third{grid-column:1/-1}}
@media (max-width:760px){.vert{display:none}}
.process .step{z-index:2}.process .cards{z-index:1}.process .step p{text-shadow:0 1px 12px rgba(0,0,0,.8)}

/* ---------- polish ---------- */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);z-index:95}
.nav .right{display:flex;align-items:center;gap:22px}
.nav .clock{opacity:.8}
.menu-btn{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;gap:6px}
.menu-btn i{display:block;height:1.5px;background:currentColor;transition:transform .4s}
.menu-open .menu-btn i:first-child{transform:translateY(4px) rotate(45deg)}.menu-open .menu-btn i:last-child{transform:translateY(-4px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:79;background:var(--dark);color:#fff;padding:110px var(--pad) var(--pad);display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.menu-open .mmenu{clip-path:inset(0)}
.mmenu a.display{display:block;font-size:clamp(56px,16vw,120px);line-height:.95}
@media (max-width:760px){.menu-btn{display:flex}.nav .avail,.nav .clock{display:none}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:10px;z-index:300;background:#fff;padding:8px 12px}.skip:focus{left:10px}
.tx{position:fixed;inset:0;z-index:250;display:grid;pointer-events:none}
.tx i{background:var(--dark);opacity:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.grain{display:none}}

/* ---------- optimisation / a11y ---------- */
img{height:auto}
.strip .track img{height:100%}
.p-media img{height:100%}
.work .media img{height:100%}
.process .step h2{font-weight:400}
.reel .tag{mix-blend-mode:normal;background:rgba(0,0,0,.55);padding:6px 10px;border-radius:30px}
.reel .play{background:rgba(0,0,0,.6);padding:10px 16px;border-radius:30px}
.work .tags span,.p-tags span,.strip .track figcaption,.cursor .lbl{font-size:12px}
.mono{font-size:12px}
.grain{will-change:transform}
.footer .muted,.process .muted,.mmenu .muted{color:#a3a39e}
.p-wrap{min-height:100vh}.next-p{content-visibility:auto}

/* ---------- true aspect ratios, no forced crops ---------- */
.p-media{align-items:start}
.p-media figure img{height:auto;object-fit:initial}
.p-media .mid{grid-column:2/span 4}
.trail img{aspect-ratio:auto;height:auto}
@media (max-width:900px){.p-media .mid{grid-column:1/-1}}

/* ---------- toolkit + marquee ---------- */
.toolkit{margin-top:clamp(70px,9vw,140px)}
.tk-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:12px}
.tk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px}
.tk-cat{display:flex;gap:12px;align-items:baseline;padding:18px 0 10px}
.tk-item{--line:1;position:relative;display:flex;justify-content:space-between;align-items:center;padding:10px 0;cursor:default}
.tk-item::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform:scaleX(var(--line));transform-origin:left}
.tk-name{display:block;overflow:hidden;font-family:var(--f-display);text-transform:uppercase;font-size:clamp(26px,2.6vw,44px);line-height:1}
.tk-arrow{font-size:18px;opacity:0;transform:translate(-8px,8px);transition:opacity .35s,transform .35s,color .35s}
.tk-item:hover .tk-arrow{opacity:1;transform:none;color:var(--accent)}
.tk-item:hover .tk-name{color:var(--accent)}
.tk-name,.tk-name .line-in{transition:color .35s}
.marquee{overflow:hidden;padding:clamp(30px,5vw,70px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mq-row{overflow:hidden;white-space:nowrap}
.mq-track{display:inline-flex;align-items:center;gap:clamp(20px,3vw,48px);padding-right:clamp(20px,3vw,48px);will-change:transform}
.mq-track span{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(64px,10vw,170px);line-height:1}
.mq-track i{font-style:normal;color:var(--accent);font-size:clamp(28px,4vw,60px)}
.mq-row.out .mq-track span{color:transparent;-webkit-text-stroke:1.2px var(--ink)}
@media (max-width:760px){.tk-grid{grid-template-columns:1fr 1fr;gap:0 16px}.tk-head .muted{display:none}}

/* ---------- capability hover ---------- */
.caps .row{position:relative;color:inherit;transition:color .35s,padding .45s cubic-bezier(.2,.7,.2,1)}
.caps .row .fill{position:absolute;inset:0;background:var(--dark);transform:scaleY(0);z-index:0}
.caps .row>*:not(.fill){position:relative;z-index:1}
.caps .cap-t{overflow:hidden;padding-bottom:.06em;line-height:.9}
.caps .row .line-in{transition:transform .5s cubic-bezier(.2,.7,.2,1),letter-spacing .5s,color .35s}
.caps .row.on{color:#fff;padding-left:24px;padding-right:24px}
.caps .row.on .muted{color:#a3a39e}
.caps .row.on .line-in{letter-spacing:.02em;color:var(--accent)}
.caps .cap-arrow{font-size:clamp(28px,3vw,52px);opacity:0;transform:translate(-20px,20px) rotate(-20deg);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.caps .row:nth-child(2n) .cap-arrow{order:-2}
.caps .row.on .cap-arrow{opacity:1;transform:none;color:var(--accent)}
.cap-float{position:fixed;left:0;top:0;width:min(22vw,300px);aspect-ratio:4/5;pointer-events:none;z-index:60;opacity:0;overflow:hidden;border-radius:8px;box-shadow:0 30px 60px rgba(0,0,0,.35);transition:opacity .3s}
.cap-float img{transform:scale(.7);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cap-float.show{opacity:1}.cap-float.show img{transform:none}
.cap-float img{width:100%;height:100%;object-fit:cover}
@media (hover:none){.cap-float{display:none}}

/* ---------- symmetric work rows ---------- */
.works{display:flex;flex-direction:column;gap:clamp(40px,5vw,80px)}
.wrow{display:flex;gap:20px;align-items:flex-start}
.wrow .work{flex-basis:0;min-width:0;grid-column:auto!important;margin:0!important}
.wrow.single{justify-content:center}.wrow.single .work{max-width:62%}
.work .media{aspect-ratio:auto}
@media (max-width:760px){.wrow{flex-direction:column}.wrow .work,.wrow.single .work{max-width:none;width:100%}}

/* ---------- nav on scroll ---------- */
.nav{transition:transform .5s cubic-bezier(.2,.7,.2,1),background .4s,padding .4s}
.nav.solid{mix-blend-mode:normal;color:var(--ink);background:rgba(243,243,241,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.nav.hidden{transform:translateY(-100%)}
#ptitle{font-size:clamp(42px,5vw,96px);overflow-wrap:break-word}
#ptitle{line-height:.92;padding-bottom:.08em}