/* Components mapped onto tokens. Loaded after site.css; same markup. */
/* Base refinements kept from the old site.css patches */
html{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;font-feature-settings:"kern","liga","calt";font-optical-sizing:auto}
h1,h2,h3,summary{text-wrap:balance}p,li,blockquote{text-wrap:pretty}
.b .l{font-size:max(10.2px,.62cqw);letter-spacing:var(--tr-label)}
.card h3 span{font-weight:400;letter-spacing:inherit}
.card .t{padding-bottom:0}
.two{position:relative;width:100%;aspect-ratio:16/9;background:var(--c-surface);border-radius:var(--r-media);overflow:hidden}
.two img{position:absolute;top:10.926%;width:20.3125%;height:78.148%;border-radius:var(--r-phone);display:block;opacity:0}
.two .ph-l{left:23.4375%}.two .ph-r{left:56.25%}
.two.in img{opacity:1}
@media (prefers-reduced-motion:reduce){.two img{opacity:1!important;transform:none!important;transition:none!important}}
.dsimg a{display:block;cursor:zoom-in}.case .dsimg img{transform:none!important}
.dsvid video{aspect-ratio:16/9;object-fit:cover}
.appvid{background:var(--c-paper);display:flex;justify-content:center}.appvid video{width:auto;max-width:100%;height:min(80vh,900px);aspect-ratio:1/2}

body{background:var(--c-paper);color:var(--fg);font:var(--fw) var(--fs-body)/var(--lh-body) var(--font);letter-spacing:var(--tr-body)}
.t-mega,.cta-s h2{font-size:var(--fs-mega);letter-spacing:var(--tr-mega);line-height:var(--lh-mega);font-weight:400}
.t-display,.ph h1{font-size:var(--fs-display);letter-spacing:var(--tr-display);line-height:var(--lh-display);font-weight:400}
.t-section,.sh h2{font-size:var(--fs-section);letter-spacing:var(--tr-section);line-height:var(--lh-section);font-weight:400}
.cta-s .mail{font-size:var(--fs-mail);letter-spacing:var(--tr-mail);line-height:var(--lh-mail);font-weight:400}
.t-title,.hero h1{font-size:var(--fs-title);letter-spacing:var(--tr-title);line-height:var(--lh-title);font-weight:400}
.t-heading,.card h3,.block__body h3,.stat b{font-size:var(--fs-heading);letter-spacing:var(--tr-heading);line-height:var(--lh-heading);font-weight:400}
.t-lead,.hero p,.ph-sub,.quote blockquote,.svc h3,.proc h3,.faq summary{font-size:var(--fs-lead);letter-spacing:var(--tr-lead);line-height:var(--lh-lead);font-weight:400}
.t-body,.svc p,.proc p,.faq p,.about p,.pm p,.block__body p,.block__body li,.who,.who small,.nav ul,.trusted,.pl,.logo,.nav .cta,.card .view{font-size:var(--fs-body);letter-spacing:var(--tr-body);line-height:var(--lh-body);font-weight:400}
.mono,.t-label{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tr-label);line-height:var(--lh-label);text-transform:uppercase;color:var(--mute);font-weight:400}
.cs-title{text-transform:none}
/* links: always underlined, one style */
.u,.card .view,footer nav a,.cta-s .mail{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
.nav ul a:hover,.nav .cta:hover{text-decoration-thickness:1px;text-underline-offset:.14em}
/* layout */
.wrap{max-width:var(--max);padding:0 var(--margin)}
.grid3,.work,.svc,.proc,.about,.pd,.pair,.split,.g2,.block{gap:var(--gutter)}
.case,.frames,.pg{gap:var(--gutter)}
section.s{padding-top:var(--s-18)}.sh{margin-bottom:var(--s-6)}
.nav .wrap{height:var(--s-8)}.nav ul{gap:var(--s-4)}.logo{gap:var(--s-1)}
/* hero */
.hero{padding-top:var(--s-20);padding-bottom:var(--s-12)}.hero h1{margin-top:var(--s-4)}.hero p{margin-top:var(--s-12)}
.ph{padding-top:var(--s-12)}.ph h1{margin-top:var(--s-4)}.ph-sub{margin:var(--s-2) 0 var(--s-6);color:var(--mute)}
/* media frame: one radius, one surface */
.card .img,.ph-media,.case .img,.two,.frames img,.pg figure,.svc article{border-radius:var(--r-media);background:var(--c-surface);overflow:hidden}
.card:nth-child(even) .img{background:var(--c-surface)}
.dsvid video,.appvid video{display:block;width:100%;height:auto}
/* project card */
.card .t{margin-top:var(--s-3)}
.card .meta{gap:var(--s-4);margin-top:var(--s-3);padding:var(--s-2) 0 var(--s-8)}
.card .img img,.card .img video{transition:transform var(--d-reveal) var(--ease-reveal)}
/* data row (Industry / Deliverables / Year) */
.pd{padding-top:var(--s-8);padding-bottom:var(--s-12)}.pd-col{gap:var(--s-3)}.pm p{margin-top:var(--s-1);max-width:var(--measure)}
/* text block */
.block{padding:var(--s-15) 0 var(--s-6)}.block__body{gap:var(--s-2);max-width:var(--measure-wide)}.block__label span{margin-bottom:var(--s-1)}
.block__body ul{gap:var(--s-1)}
/* services / quotes */
.svc article{padding:var(--s-3)}.svc h3{margin:var(--s-2) 0}.svc .foot{padding-top:var(--s-4)}
.quote{padding-top:var(--s-3)}.quote blockquote{margin:var(--s-3) 0 var(--s-4)}
.faq details{padding:var(--s-3) 0}.faq p{margin-top:var(--s-2)}
/* cta + footer */
.cta-s{padding-top:var(--s-20)}.cta-s .mail{margin-top:var(--s-8)}
footer{margin-top:var(--s-20)}footer .wrap{padding-top:var(--s-3);padding-bottom:var(--s-4)}footer nav{gap:var(--s-3)}
/* no shadows */
.b .c{box-shadow:none;outline:1px solid rgba(10,10,10,.06);outline-offset:-1px}
.cur.click{animation:none}
/* motion */
.rv{transform:translateY(var(--rv-y));transition:opacity var(--d-reveal) var(--ease-reveal),transform var(--d-reveal) var(--ease-reveal)}
.h-line>span{animation:up var(--d-reveal) var(--ease-reveal) forwards}
.hero-img{animation:wipe 1.4s var(--ease-loop) .25s forwards}
.cur{transition:left var(--d-reveal) var(--ease-loop),top var(--d-reveal) var(--ease-loop)}
/* mobile 2-up: left from top, right from bottom */
.two img{transition:opacity var(--d-phone) var(--ease-reveal),transform var(--d-phone) var(--ease-push)}
.two .ph-l{transform:translateY(calc(var(--phone-y)*-1))}.two .ph-r{transform:translateY(var(--phone-y));transition-delay:var(--phone-stagger)}
.two.in img{transform:none}
/* push carousel utility (for future HTML loops; videos use the same values) */
.push{position:relative;overflow:hidden;border-radius:var(--r-media);background:var(--c-paper)}
.push__track{display:flex;transition:transform var(--d-push) var(--ease-push)}
@media (max-width:900px){.hero{padding-top:var(--s-12);padding-bottom:var(--s-5)}.hero p{margin-top:var(--s-6)}.ph{padding-top:var(--s-8)}.block{padding:var(--s-15) 0 var(--s-4)}.card .meta{gap:var(--s-1) var(--s-3);padding-bottom:var(--s-5)}footer{margin-top:var(--s-12)}}
@media (prefers-reduced-motion:reduce){.push__track{transition:none}}