:root{--bg:#000;--fg:#f2f2f2;--mute:#8a8a86;--line:#262626;--red:#e3150b;--acc:#ff2a1f}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}html,body{overflow-x:clip}
body{background:var(--bg);color:var(--fg);font:400 16px/1.45 "Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.mono{font:500 11px/1.5 "JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.03em;color:var(--mute)}
h1,h2,h3{font-weight:500;text-transform:uppercase;letter-spacing:-.03em;line-height:.95}
.pad{padding-left:clamp(16px,3vw,44px);padding-right:clamp(16px,3vw,44px)}

/* top bar */
.top{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px clamp(16px,3vw,44px);background:rgba(0,0,0,.85);backdrop-filter:blur(10px)}
.home .top{position:relative;background:none;backdrop-filter:none}
.top nav{display:flex;gap:4px;font:600 11px "Inter Tight";text-transform:uppercase;letter-spacing:.02em}
.top nav a{padding:5px 8px}.top nav a:hover{background:#1c1c1c}.top nav a.on{background:var(--fg);color:#000}
.top .url{font:600 14px "Inter Tight";text-transform:uppercase}
.top .order{justify-self:end;font:600 11px "Inter Tight";text-transform:uppercase;border:1px solid var(--fg);padding:5px 10px}
.top .order:hover{background:var(--acc);border-color:var(--acc);color:#000}

/* hero (home) */
.fm{position:relative;height:100svh;min-height:660px;overflow:hidden;text-transform:uppercase}
.svc{position:relative;z-index:5;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:10px clamp(16px,3vw,44px) 0}
.svc>div{display:grid;grid-template-columns:40px 1fr 30px;align-items:start}
.svc .n{font:500 12px/1.75 "Inter Tight"}.svc .h{font:500 clamp(18px,2vw,30px)/1 "Inter Tight";letter-spacing:-.02em}
.svc .pl{font:300 26px/.75 "Inter Tight";text-align:right}.svc a:hover{color:var(--acc)}
.duo{position:absolute;z-index:2;left:50%;top:34%;transform:translate(-50%,-50%);display:flex;background:var(--red);overflow:hidden;isolation:isolate}
.duo::after{content:'';position:absolute;inset:0;z-index:2;background:#000;opacity:0;animation:blink 5s ease-in-out infinite}
.duo div{position:relative;width:clamp(140px,17vw,280px);aspect-ratio:4/5;overflow:hidden}
.duo div+div{margin-left:-1px}
.duo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(1.55) contrast(1.3);mix-blend-mode:multiply}
@keyframes blink{0%,100%{opacity:0}42%,58%{opacity:1}}
@media (prefers-reduced-motion:reduce){.duo::after{animation:none}}
.claim{position:absolute;z-index:4;left:50%;top:55%;transform:translate(-50%,-50%);width:min(820px,88vw);text-align:center;font:500 clamp(24px,3.3vw,52px)/.92 "Inter Tight";letter-spacing:-.03em;mix-blend-mode:difference;margin-top:-3vh;color:#fff}
#beam{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none}
.fm::after{content:'';position:absolute;z-index:4;left:0;right:0;bottom:0;height:40px;background:#000;pointer-events:none}
.fm-bot{position:absolute;z-index:5;left:clamp(16px,3vw,44px);right:clamp(16px,3vw,44px);bottom:18px;display:flex;justify-content:space-between;gap:20px;font:600 10px "Inter Tight";letter-spacing:.02em}
.fm-bot h1{font:600 10px/1.4 "Inter Tight";letter-spacing:.02em}

/* sections */
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:160px clamp(16px,3vw,44px) 40px}
.intro p{font:400 clamp(28px,3.2vw,48px)/1.1 "Inter Tight";letter-spacing:-.02em;max-width:22ch;text-indent:3em}
.sec{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:110px clamp(16px,3vw,44px) 22px}
.sec h2{font:500 clamp(40px,6vw,96px)/.85 "Inter Tight";letter-spacing:-.05em}
.sec a:hover,.also a:hover{color:var(--acc)}

/* project list rows */
.list{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:1.1fr 1.2fr .4fr 3.2fr;gap:20px;align-items:start;padding:18px clamp(16px,3vw,44px);border-bottom:1px solid var(--line);transition:background .3s}
.row:hover{background:#0f0f0f}
.row h3{font:400 21px/1.1 "Inter Tight";letter-spacing:-.01em;text-transform:none}
.row .rt .mono{margin-top:22px}
.tags{display:flex;flex-wrap:wrap;gap:4px}.tags span{border:1px solid #3a3a3a;padding:3px 7px;font:500 10px "JetBrains Mono";text-transform:uppercase}
.plus{font:500 11px "JetBrains Mono";color:var(--mute)}
.strip{display:flex;gap:6px;justify-content:flex-end;overflow:hidden}
.strip img{height:122px;width:auto;flex:none;background:#0d0d0d;transition:transform .4s}
.strip.identity img{height:110px}
.row:hover .strip img{transform:translateY(-4px)}

/* services */
.services{padding:120px clamp(16px,3vw,44px) 0}
.svc-list{margin-top:18px;border-top:1px solid var(--line)}
.svc-list a{display:grid;grid-template-columns:60px 1.1fr 1.6fr 40px;gap:20px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
.svc-list .n{font:500 13px "Inter Tight"}.svc-list h3{font-size:clamp(24px,2.6vw,40px)}.svc-list p{color:#b5b5b0;max-width:52ch}
.svc-list .pl{font:300 30px/1 "Inter Tight";text-align:right}.svc-list a:hover h3,.svc-list a:hover .pl{color:var(--acc)}

/* about */
.about{display:grid;grid-template-columns:minmax(220px,.8fr) 1.4fr;gap:clamp(24px,5vw,80px);align-items:end;padding:140px clamp(16px,3vw,44px) 0}
.ab-img{background:var(--red);aspect-ratio:4/5;overflow:hidden}
.ab-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(1.55) contrast(1.3);mix-blend-mode:multiply}
.about h2{font-size:clamp(44px,6vw,96px);margin:14px 0 30px}
.mix{font:600 clamp(20px,2.2vw,32px)/1.15 "Inter Tight";text-transform:uppercase;letter-spacing:-.01em}
.mix i{font-weight:300;color:#777;padding-right:.14em}
.small{color:#b5b5b0;margin-top:24px;max-width:56ch}

/* faq */
.faq{padding:140px clamp(16px,3vw,44px) 0}
.faq h2{font-size:clamp(36px,5vw,72px);margin:14px 0 30px}
details{border-top:1px solid var(--line);padding:22px 0;max-width:1100px}details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font:500 clamp(17px,1.6vw,22px) "Inter Tight";text-transform:uppercase;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}summary span{font-weight:300;transition:transform .3s}details[open] summary span{transform:rotate(45deg)}
details p{color:#b5b5b0;margin-top:12px;max-width:70ch}

/* contact + footer */
.contact{padding:150px clamp(16px,3vw,44px) 70px;margin-top:140px;border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:18px;align-items:end}
.contact h2{font-size:clamp(48px,7vw,120px);line-height:.86;letter-spacing:-.05em}
.cl a{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:18px 0;font:500 22px "Inter Tight";text-transform:uppercase}
.cl a span{font:500 12px "JetBrains Mono";color:var(--mute);text-transform:none;align-self:center}
.cl a:hover{color:var(--acc)}
.note{margin-top:28px;color:var(--mute)}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:22px clamp(16px,3vw,44px) 28px;border-top:1px solid var(--line);font:600 10px "Inter Tight";text-transform:uppercase;letter-spacing:.02em;color:var(--mute)}
footer a:hover{color:var(--fg)}

/* category + work pages */
.page-head{padding:60px clamp(16px,3vw,44px) 40px}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.page-head h1{font:500 clamp(52px,9vw,150px)/.84 "Inter Tight";letter-spacing:-.055em;margin:28px 0 36px}
.page-head h1 span{display:block;color:#3a3a3a}
.ph-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.lead{font-size:clamp(17px,1.4vw,20px);color:#cfcfca;max-width:60ch}
.also{display:flex;flex-wrap:wrap;gap:28px;align-items:baseline;padding:70px clamp(16px,3vw,44px) 0;font:500 clamp(20px,2vw,30px) "Inter Tight";text-transform:uppercase}
.work .page-head h1{font-size:clamp(44px,7vw,120px)}
dl{display:grid;grid-template-columns:repeat(2,minmax(120px,auto));gap:14px 36px;flex:none}
dt{font:500 10px "JetBrains Mono";text-transform:uppercase;color:var(--mute)}dd{font:500 14px "Inter Tight";text-transform:uppercase;margin-top:3px}
.gallery{display:grid;gap:6px;padding:0 clamp(16px,3vw,44px)}
.gallery.n1{grid-template-columns:minmax(0,900px);justify-content:center}
.gallery.n2{grid-template-columns:1fr 1fr}
.gallery.n3{grid-template-columns:repeat(3,1fr)}
.gallery.identity{grid-template-columns:1fr}
.gallery figure{background:#0b0b0b;display:flex;align-items:center;justify-content:center}
.gallery img{width:100%;height:auto;max-height:92vh;object-fit:contain}
.pn{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;padding:40px clamp(16px,3vw,44px);border-bottom:1px solid var(--line);font:500 16px "Inter Tight";text-transform:uppercase}
.pn a span{display:block;margin-bottom:6px}.pn a:last-child{text-align:right}.pn a:hover{color:var(--acc)}
.order-btn{background:var(--fg);color:#000;padding:12px 20px;font-size:13px}.order-btn:hover{background:var(--acc);color:#000!important}

@media(max-width:900px){
 .top{grid-template-columns:1fr auto}.top .url{display:none}.top nav{flex-wrap:wrap}.top nav a:nth-child(n+4){display:none}
 .svc{grid-template-columns:1fr}
 .duo{top:47%}.claim{top:64%}#beam{display:none}
 .fm-bot{flex-direction:column;gap:4px}
 .intro{flex-direction:column;align-items:flex-start;padding-top:100px}
 .row{grid-template-columns:1fr auto}.row .plus{display:none}.row .strip{grid-column:1/-1;justify-content:flex-start;overflow-x:auto}.strip img{height:96px}
 .svc-list a{grid-template-columns:36px 1fr 24px}.svc-list p{grid-column:2/3}
 .about,.contact-grid{grid-template-columns:1fr}.ab-img{max-width:360px}
 .ph-row{flex-direction:column;align-items:flex-start;gap:24px}
 .gallery.n2,.gallery.n3{grid-template-columns:1fr}
 .pn{grid-template-columns:1fr 1fr}.pn .order-btn{grid-column:1/-1;grid-row:1;text-align:center}
}