/* Route Marketing mock: layout and components. All values come from tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--black)}
body{margin:0;background:var(--black);color:var(--ivory);font:300 var(--t-body)/1.65 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure,blockquote,fieldset{margin:0}
h1,h2,h3{font-weight:300}
button{font:inherit;color:inherit}
code{font-family:ui-monospace,monospace;font-size:.85em;color:var(--ivory-72)}
:focus-visible{outline:1px solid var(--ivory);outline-offset:4px}
.skip{position:fixed;left:1rem;top:-5rem;z-index:3000;background:var(--ivory);color:var(--black);padding:.7rem 1rem;font:400 var(--t-label)/1 var(--font-label);letter-spacing:var(--track-label);text-transform:uppercase}
.skip:focus{top:1rem}
.wrap{padding-inline:var(--gutter)}
.logo{display:block;color:var(--ivory)}
.logo svg{display:block;width:100%;height:auto}

/* ---------- type roles ---------- */
.label{font:400 var(--t-label)/1.5 var(--font-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ivory-72)}
.mega{font:var(--display-w-large) var(--t-mega)/.92 var(--font-display);letter-spacing:var(--display-track);color:var(--ivory)}
.mega-s{font-size:clamp(2.8rem,7.4vw,8rem)}
.xl{font:var(--display-w-large) var(--t-xl)/.98 var(--font-display);letter-spacing:var(--display-track)}
.lede{font:300 var(--t-m)/1.4 var(--font-body);color:var(--ivory)}
.ulink{font:400 var(--t-label)/1 var(--font-label);letter-spacing:var(--track-label);text-transform:uppercase;padding-bottom:.55rem;background:linear-gradient(var(--ivory),var(--ivory)) 0 100%/100% 1px no-repeat;transition:background-size .6s var(--ease-soft)}
.ulink:hover{background-size:28% 1px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:1rem 1.9rem;border:1px solid var(--ivory);border-radius:999px;font:400 var(--t-label)/1 var(--font-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ivory);background:transparent;cursor:pointer;transition:background .5s var(--ease-out),color .5s var(--ease-out)}
.btn:hover{background:var(--ivory);color:var(--black)}
.btn-ghost{border-color:var(--line)}

/* ---------- motion primitives (hidden only when JS runs) ---------- */
.js [data-reveal]{opacity:0;transform:translate3d(0,24px,0);transition:opacity var(--dur-fade) var(--ease-soft),transform var(--dur-fade) var(--ease-soft)}
.js [data-reveal].in{opacity:1;transform:none}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js [data-split] .w>span{display:inline-block;transform:translate3d(0,108%,0);transition:transform 1.1s var(--ease-expo);transition-delay:calc(var(--i)*60ms)}
.js.ready [data-split].in .w>span{transform:none}
[data-wipe]{overflow:hidden}
[data-wipe]:not(.close-media){position:relative}
.js [data-wipe]::before{content:"";position:absolute;inset:0;z-index:1;background:var(--wipe-bg,var(--black));transform-origin:50% 0;transition:transform var(--dur-slow) var(--ease-expo);pointer-events:none}
.js [data-wipe].in::before{transform:scaleY(0)}
.js [data-wipe] img{transform:scale(1.08);transition:transform 2s var(--ease-expo)}
.js [data-wipe].in img{transform:none}

/* ---------- intro ---------- */
.intro{position:fixed;inset:0;z-index:2500;display:grid;place-items:center;background:var(--black);transition:opacity .7s var(--ease-out),visibility .7s}
.intro .logo{width:64px;opacity:0;animation:introIn .8s var(--ease-soft) .1s forwards}
.intro.out{opacity:0;visibility:hidden}
@keyframes introIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- header + menu ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:1000;display:flex;align-items:center;gap:2rem;padding:1.25rem var(--gutter);transition:background .6s var(--ease-out),padding .6s var(--ease-out)}
.site-header::before{content:"";position:absolute;inset:0 0 -40px;background:linear-gradient(#000 0,#000 calc(100% - 40px),rgba(0,0,0,0));pointer-events:none;opacity:0;transition:opacity .6s}
.site-header.is-scrolled::before{opacity:1}
.brand{position:relative;width:30px;flex:none}
.nav-desk{position:relative;margin-left:auto}
.nav-desk ul{display:flex;gap:2.2rem}
.nav-desk a{font:400 var(--t-label)/1 var(--font-label);letter-spacing:var(--track-label);text-transform:uppercase;padding:.6rem 0;position:relative}
.nav-desk a::after{content:"";position:absolute;left:0;right:0;bottom:.2rem;height:1px;background:var(--ivory);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-soft)}
.nav-desk a:hover::after,.nav-desk a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.pill{position:relative;font:400 var(--t-micro)/1 var(--font-label);letter-spacing:var(--track-label);padding:.85rem 1.2rem;border:1px solid rgba(250,249,241,.4);border-radius:999px;transition:opacity .5s,transform .5s var(--ease-soft),background .4s,color .4s}
.pill:hover{background:var(--ivory);color:var(--black)}
body[data-page=home] .site-header:not(.show-cta) .pill{opacity:0;transform:translateY(-6px);pointer-events:none}
body[data-page=contact] .pill{display:none}
.menu-btn{display:none;position:relative;align-items:center;gap:.8rem;background:none;border:0;padding:.7rem 0 .7rem .6rem;min-height:44px;cursor:pointer;font:400 var(--t-label)/1 var(--font-label);letter-spacing:var(--track-label);text-transform:uppercase}
.bars{position:relative;display:block;width:22px;height:8px}
.bars::before,.bars::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--ivory);transition:transform .5s var(--ease-soft),top .5s var(--ease-soft)}
.bars::before{top:0}.bars::after{top:7px}
.menu-open .bars::before{top:3.5px;transform:rotate(45deg)}.menu-open .bars::after{top:3.5px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:900;background:var(--olive-deep);display:flex;flex-direction:column;justify-content:space-between;padding:7rem var(--gutter) 2.5rem;visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-expo),opacity .4s,visibility .8s}
.menu-open .menu{visibility:visible;opacity:1;clip-path:inset(0)}
.menu ul{display:grid;gap:.2rem}
.menu nav a{display:inline-block;font:var(--display-w-large) clamp(2.6rem,11vw,5rem)/1.08 var(--font-display);letter-spacing:var(--display-track);transform:translateY(30px);opacity:0;transition:transform .8s var(--ease-expo),opacity .8s}
.menu-open .menu nav li:nth-child(n) a{transform:none;opacity:1}
.menu nav li:nth-child(2) a{transition-delay:.05s}.menu nav li:nth-child(3) a{transition-delay:.1s}.menu nav li:nth-child(4) a{transition-delay:.15s}.menu nav li:nth-child(5) a{transition-delay:.2s}.menu nav li:nth-child(6) a{transition-delay:.25s}
.menu-foot{font:400 var(--t-label)/2 var(--font-label);letter-spacing:var(--track-label);color:var(--ivory-72)}
.menu-open body{overflow:hidden}

/* ---------- HOME: hero window that opens to full bleed ---------- */
.hero{position:relative;height:300vh}
.hero-stage{position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden}
.hero-window{position:absolute;inset:0}
.hero{--p:0}
.hero .hero-window{clip-path:inset(calc((1 - var(--p)) * 17vh) calc((1 - var(--p)) * 33vw))}
.hero-window .slide{position:absolute;inset:0;opacity:0;transition:opacity 2s var(--ease-out)}
.hero-window .slide.on{opacity:1}
.hero-window img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - var(--p) * .12))}
.hero-scrim{position:absolute;inset:0;background:var(--scrim);opacity:calc(.55 + var(--p,0) * .45);pointer-events:none}
.hero-run{position:absolute;top:6.2rem;left:var(--gutter);z-index:2}
.hero-h{position:absolute;inset:auto var(--gutter) 0;z-index:2;font:var(--display-w-large) var(--t-mega)/.9 var(--font-display);letter-spacing:var(--display-track);display:grid;grid-template-rows:auto auto;height:100%;padding:8.5rem 0 11.5rem}
.hero-h .l1{align-self:start}
.hero-h .l2{align-self:end;justify-self:end;text-align:right;width:min-content;max-width:100%}
.hero-cap{position:absolute;left:var(--gutter);bottom:2.4rem;z-index:2;display:flex;align-items:flex-end;gap:2.4rem;max-width:44rem}
.hero-cap p{font-size:var(--t-small);line-height:1.55;max-width:30ch;color:var(--ivory)}
.js .hero-h .l1,.js .hero-h .l2{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease-soft),transform 1.4s var(--ease-expo)}
.js .hero-h .l2{transition-delay:.15s}
.js.ready .hero-h .l1,.js.ready .hero-h .l2{opacity:1;transform:none}
.panel{position:relative;z-index:2;background:var(--black);margin-top:-100vh}
.panel::before{content:"";position:absolute;inset:-1px 0 auto;height:1px;background:var(--line)}

/* positioning statements: oversized, stepped */
.pos{padding-block:var(--space-section) calc(var(--space-section)*.7);display:grid;gap:clamp(3rem,7vw,6.5rem)}
.pos-row{display:grid;grid-template-columns:4rem 1fr;gap:1rem;max-width:62rem}
.pos-row:nth-child(2){margin-left:12vw}.pos-row:nth-child(3){margin-left:24vw}
.pos-n{font:200 var(--t-small)/2.2 var(--font-numeric);color:var(--ivory-55)}
.pos-t{font:var(--display-w-mid) var(--t-l)/1.14 var(--font-display);letter-spacing:var(--display-track)}
.pos-more{margin-left:calc(24vw + 5rem)}

/* featured portrait carousel */
.featured{padding-block:4rem var(--space-section)}
.sec-head{display:flex;align-items:center;gap:2rem;margin-bottom:2.6rem}
.sec-head .arrows{margin-left:auto;display:flex;gap:.5rem}
.arrows button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;transition:background .4s,color .4s}
.arrows button:hover{background:var(--ivory);color:var(--black)}
.carousel{display:flex;gap:2vw;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 calc(50vw - 13.5vw);scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.carousel>li{flex:0 0 27vw;scroll-snap-align:center;transform:scale(.88);opacity:.42;transition:transform .9s var(--ease-soft),opacity .9s var(--ease-soft)}
.carousel>li.active{transform:scale(1);opacity:1}
.reduced .carousel>li{transform:none;opacity:1}
.card{display:grid;gap:.9rem;text-align:center;justify-items:center}
.card-img{display:block;width:100%;aspect-ratio:4/5;overflow:hidden}
.card-img picture,.card-img img{width:100%;height:100%;object-fit:cover}
.card-img img{transition:transform 1.4s var(--ease-soft)}
.card:hover .card-img img{transform:scale(1.04)}
.card-name{font:var(--display-w-mid) clamp(1.7rem,2.3vw,2.35rem)/1.1 var(--font-display);margin-top:.6rem}
.card-stat li{display:flex;gap:.5rem;align-items:baseline;justify-content:center;flex-wrap:wrap}
.s-big{font:200 1.5rem/1 var(--font-numeric);letter-spacing:-.01em}
.s-pre,.s-post{font:400 var(--t-micro)/1.5 var(--font-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-72)}
.s-stmt-li{list-style:none}
.s-stmt{display:block;font:var(--display-w-mid) clamp(1.08rem,1.2vw,1.22rem)/1.35 var(--font-display);color:var(--ivory-72);max-width:30ch;margin-inline:auto;text-wrap:balance}
.reel-item .s-stmt{margin-inline:0}
.card-view{font:400 var(--t-micro)/1 var(--font-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ivory-55);border-bottom:1px solid var(--line);padding-bottom:.4rem}

/* press line */
.press{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:1rem 3rem;padding:3rem var(--gutter);border-block:1px solid var(--line);text-align:center}
.press ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.6rem}
.press li{font:400 var(--t-label)/1.5 var(--font-label);letter-spacing:var(--track-wide);text-transform:uppercase}

/* practice: numbered, expanding */
.practice{padding-block:var(--space-section)}
.practice>h2{max-width:11ch;margin-bottom:clamp(3rem,6vw,5.5rem)}
.prac{border-top:1px solid var(--line)}
.prac:last-child{border-bottom:1px solid var(--line)}
.prac summary{display:grid;grid-template-columns:5rem 1fr 3rem;align-items:baseline;gap:1rem;padding:1.9rem 0;cursor:pointer;list-style:none}
.prac summary::-webkit-details-marker{display:none}
.prac-n{font:200 var(--t-small)/1 var(--font-numeric);color:var(--ivory-55)}
.prac-name{font:400 clamp(.85rem,1.1vw,1rem)/1.4 var(--font-label);letter-spacing:var(--track-label);text-transform:uppercase;transition:letter-spacing .6s var(--ease-soft)}
.prac summary:hover .prac-name{letter-spacing:.32em}
.prac-x{justify-self:end;width:14px;height:14px;position:relative}
.prac-x::before,.prac-x::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ivory);transition:transform .5s var(--ease-soft)}
.prac-x::after{transform:rotate(90deg)}
.prac[open] .prac-x::after{transform:rotate(0)}
.prac-body{padding:0 0 2.6rem 6rem;max-width:58rem;color:var(--ivory-72)}
.prac[open] .prac-body{animation:open .8s var(--ease-soft)}
@keyframes open{from{opacity:0;transform:translateY(-8px)}}
.prac.big .prac-name{font:var(--display-w-mid) clamp(1.7rem,3vw,3rem)/1.1 var(--font-display);letter-spacing:var(--display-track);text-transform:none}
.prac.big summary:hover .prac-name{letter-spacing:0}
.prac.big summary{padding:2.4rem 0}
.prac-body.two{display:grid;grid-template-columns:1.3fr 1fr;gap:4vw;max-width:none}
.prac-lead{font:300 var(--t-m)/1.45 var(--font-body);color:var(--ivory)}
.caps{columns:2;column-gap:2rem;margin-top:1rem}
.caps li{font:300 var(--t-small)/2 var(--font-body);break-inside:avoid}
.prac-cta{margin-top:3.5rem}

/* testimonial statements: one at a time, large */
.statements{padding-block:calc(var(--space-section)*.6)}
.statement{display:grid;gap:1.6rem;padding:clamp(4rem,10vw,9rem) var(--gutter);max-width:78rem}
.statement blockquote{margin:0}
.statement blockquote p{font:var(--display-w-mid) clamp(1.65rem,3vw,3rem)/1.22 var(--font-display);letter-spacing:var(--display-track)}
.statement figcaption{font:400 var(--t-label)/1 var(--font-label);letter-spacing:var(--track-label)}
.st-1{margin-left:auto;text-align:right}
.st-2{margin-inline:auto;text-align:center}
.statement.compact blockquote p{font-size:clamp(1.25rem,1.8vw,1.6rem)}
.statement.compact{padding:2.4rem 0 0}
.statements.solo{padding-block:2rem}

/* index rows */
.index{padding-block:var(--space-section) calc(var(--space-section)*.8)}
.ix{margin-top:2rem;border-top:1px solid var(--line)}
.ix-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:baseline;padding:1.15rem 0;border-bottom:1px solid var(--line);transition:padding .6s var(--ease-soft),color .4s}
.ix-name{font:var(--display-w-mid) clamp(1.4rem,2.3vw,2.4rem)/1.1 var(--font-display)}
.ix-tag{font:400 var(--t-micro)/1.5 var(--font-label);letter-spacing:.2em;color:var(--ivory-72)}
.ix-res{display:block;font:300 1.02rem/1.4 var(--font-body);color:var(--ivory-72);text-align:right;text-wrap:balance}
.ix-res::first-letter{text-transform:uppercase}
.ix-n{font:300 1.15rem/1 var(--font-numeric);color:var(--ivory);letter-spacing:-.01em}
.ix-names{grid-template-columns:1fr;justify-items:center;text-align:center}
a.ix-row:hover{padding-left:1.2rem}
.ix-row.is-static .ix-name{color:var(--ivory-55)}
.ix-press .ix-row{grid-template-columns:1fr auto}
.preview{position:fixed;left:0;top:0;z-index:50;width:240px;aspect-ratio:4/5;pointer-events:none;opacity:0;transition:opacity .4s;overflow:hidden}
.preview.on{opacity:1}
.preview img{width:100%;height:100%;object-fit:cover}

/* closing */
.close{position:relative;padding:var(--space-section) var(--gutter);text-align:center;background:var(--olive-deep)}
.close.has-media{background:var(--black);min-height:100vh;display:grid;align-items:center;overflow:hidden}
.close-media{position:absolute;inset:0}
.close-media picture,.close-media img{width:100%;height:100%;object-fit:cover}
.close.has-media::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.58);pointer-events:none}
.close-inner{position:relative;z-index:1;display:grid;justify-items:center;gap:1.8rem}
.close-h{font:var(--display-w-large) var(--t-xl)/1 var(--font-display);letter-spacing:var(--display-track);max-width:16ch}
.close-cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}

/* footer */
.site-footer{padding:5rem var(--gutter) 2.4rem;border-top:1px solid var(--line);font:400 var(--t-micro)/2 var(--font-label);letter-spacing:.2em}
.f-grid{display:grid;grid-template-columns:auto 1fr auto auto;gap:3rem 4rem;align-items:start}
.f-logo{width:42px}
.f-nav{display:flex;flex-wrap:wrap;gap:.4rem 2rem}
.f-social{text-align:right}
.f-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;margin-top:4.5rem;padding-top:1.6rem;border-top:1px solid var(--line);color:var(--ivory-72)}
.site-footer a{transition:opacity .3s}.site-footer a:hover{opacity:.7}

/* ---------- PAGE HEADS ---------- */
.page-head{padding-top:clamp(8rem,16vw,13rem);padding-bottom:clamp(3rem,7vw,6rem)}
.split{display:grid;grid-template-columns:1.5fr 1fr;gap:4vw;align-items:end}
.lede-col{display:grid;gap:1.6rem;justify-items:start}
.lede-col .lede{font-size:clamp(1.15rem,1.4vw,1.35rem);color:var(--ivory-72)}
.page-head .lede{font-size:clamp(1.15rem,1.4vw,1.35rem);color:var(--ivory-72);max-width:34ch}

/* ---------- PORTFOLIO reel (horizontal, pinned) ---------- */
.reel{position:relative}
.reel-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.reel-bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:2rem;height:1px;background:var(--line)}
.reel-bar span{position:absolute;inset:0;background:var(--ivory);transform-origin:0 0;transform:scaleX(var(--q,0))}
.reel-track{display:flex;gap:4vw;padding:5rem var(--gutter) 0;width:max-content;will-change:transform;align-items:flex-start}
.reel-item{width:26vw;display:grid;gap:.7rem;align-content:start}
.reel-item.r1{margin-top:7vh}.reel-item.r2{margin-top:2vh;width:22vw}
.reel-link{display:grid;gap:.9rem}
.reel-n{font:200 var(--t-micro)/1 var(--font-numeric);letter-spacing:.1em;color:var(--ivory-55)}
.reel-img{display:block;aspect-ratio:4/5;overflow:hidden;max-height:46vh}
.reel-img picture,.reel-img img{width:100%;height:100%;object-fit:cover}
.reel-img img{transition:transform 1.4s var(--ease-soft)}
.reel-link:hover .reel-img img{transform:scale(1.05)}
.reel-name{font:var(--display-w-mid) clamp(1.6rem,2.1vw,2.2rem)/1.05 var(--font-display)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tags li,.tags a{font:400 .58rem/1 var(--font-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-72)}
.tags li{border:1px solid var(--line);border-radius:999px;padding:.45rem .7rem}
.reel-item .card-stat li{justify-content:flex-start}
.reel-blurb{font-size:.92rem;line-height:1.5;color:var(--ivory-72);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.reel-view{justify-self:start}
.reel.static .reel-pin{position:relative;height:auto;display:block}
.reel.static .reel-track{flex-direction:column;width:auto;padding-top:0;gap:4.5rem}
.reel.static .reel-item{width:auto;margin:0}
.reel.static .reel-img{max-height:none}
.reel.static .reel-blurb{-webkit-line-clamp:unset;display:block}
.reel.static .reel-bar{display:none}

/* ---------- CASE: magazine feature ---------- */
.c-hero{position:relative;height:100vh;min-height:560px}
.c-hero-img{position:sticky;top:0;height:100vh;overflow:hidden}
.c-hero-img picture,.c-hero-img img{width:100%;height:100%;object-fit:cover}
.c-hero-img img{object-position:var(--op,50% 50%)}
@media (min-width:821px){.c-hero-img img{object-position:50% 50%}}
.c-hero .hero-scrim{opacity:1;position:absolute}
.c-hero-text{position:absolute;inset:auto 0 0;padding-bottom:3rem;z-index:2;display:grid;gap:1rem}
.c-title{font-size:clamp(3.2rem,12vw,12.5rem);overflow-wrap:anywhere}
.js .c-hero-img img{animation:settle 1.6s var(--ease-expo) both}
@keyframes settle{from{transform:scale(1.12)}}
.from-card .c-hero-img img{animation:none}
.js .c-title{animation:rise 1.2s var(--ease-expo) .2s both}
@keyframes rise{from{opacity:0;transform:translateY(50px)}}
body[data-page=case] .panel{margin-top:0}
.feature{display:grid;grid-template-columns:minmax(12rem,1fr) 2.4fr;gap:3rem 5vw;padding-block:var(--space-section)}
.feat-rail{position:sticky;top:7rem;align-self:start;display:grid;gap:1.2rem}
.feat-rail .tags{display:grid;gap:.4rem;justify-items:start}
.feat-rail .tags a{display:inline-flex;align-items:flex-end;min-height:24px;border-bottom:1px solid var(--line);padding:.35rem 0 .3rem;border-radius:0}
.feat-rail .tags li{border:0;padding:0}
.feat-main{display:grid;gap:clamp(3rem,6vw,5.5rem)}
.stats{display:grid;border-top:1px solid var(--line)}
.stats li{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"big pre" "big post";column-gap:3vw;align-items:end;padding:1.6rem 0;border-bottom:1px solid var(--line)}
.stats .s-big{grid-area:big;font:200 clamp(2.6rem,4.6vw,4.6rem)/.95 var(--font-numeric);letter-spacing:-.03em;overflow-wrap:anywhere}
.stats .s-pre{grid-area:pre;align-self:end}.stats .s-post{grid-area:post;align-self:end}
.stats .s-pre,.stats .s-post{font-size:var(--t-label)}
.stats .s-stmt-li{padding:1.6rem 0;border-bottom:1px solid var(--line)}
.stats .s-stmt{font-size:clamp(1.5rem,2.4vw,2.4rem);line-height:1.2;color:var(--ivory);max-width:28ch;margin:0;text-wrap:pretty}
.feat-text{font:var(--display-w-mid) clamp(1.7rem,2.9vw,3rem)/1.24 var(--font-display);letter-spacing:var(--display-track)}
.feat-text::first-letter{-webkit-initial-letter:2;initial-letter:2;margin-right:.14em;font-weight:var(--display-w-large)}
.lead-em{font-style:normal;color:var(--white);border-bottom:1px solid var(--line)}
.feat-img{grid-column:2;width:min(36rem,72%);justify-self:end}
.feat-img img{width:100%}
.next-case{position:relative;display:block;height:78vh;overflow:hidden;margin-top:0}
.next-img{position:absolute;inset:0}
.next-img picture,.next-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-soft)}
.next-case:hover .next-img img{transform:scale(1.04)}
.next-case::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.next-text{position:absolute;inset:auto 0 0;z-index:2;padding-bottom:3rem;display:grid;gap:.8rem}
.next-name{font:var(--display-w-large) var(--t-xl)/.98 var(--font-display);letter-spacing:var(--display-track)}
.case-ghost{position:fixed;z-index:2000;background:center/cover no-repeat;transition:all .6s cubic-bezier(.22,.61,.36,1)}
body.leaving main,body.leaving .site-footer{opacity:0;transition:opacity .45s var(--ease-out)}

/* ---------- SERVICES ---------- */
.duo{display:grid;grid-template-columns:2fr 1fr;gap:4vw;align-items:end;padding-bottom:2rem}
.duo-b{margin-bottom:-6rem}
.duo img{width:100%}
.how{padding-block:var(--space-section);display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
.how-t{font:var(--display-w-mid) var(--t-l)/1.16 var(--font-display);letter-spacing:var(--display-track);max-width:24ch}
.how-t:nth-of-type(2){margin-left:auto;max-width:30ch;font-size:clamp(1.4rem,2.4vw,2.3rem)}
.how-t:last-child{font-size:var(--t-xl);max-width:16ch}
.names{padding-bottom:var(--space-section)}
.names ul{display:flex;flex-wrap:wrap;gap:.3rem 0;margin-top:1.6rem}
.names li{font:var(--display-w-mid) clamp(1.25rem,2vw,2rem)/1.5 var(--font-display)}
.names li:not(:last-child)::after{content:"/";margin:0 .6em;color:var(--ivory-55)}
.names a{border-bottom:1px solid transparent;transition:border-color .3s}.names a:hover{border-color:var(--ivory)}

/* ---------- ABOUT ---------- */
.about-head{padding-top:clamp(8rem,16vw,13rem);padding-bottom:clamp(4rem,8vw,7rem);display:grid;gap:2.4rem;justify-items:start;max-width:82rem}
.about-statement{font:var(--display-w-mid) var(--t-l)/1.18 var(--font-display);letter-spacing:var(--display-track)}
.about-img{width:min(58vw,62rem);margin-left:auto;margin-right:var(--gutter);aspect-ratio:3/2;max-height:72vh}
.about-img picture,.about-img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.manifesto{max-width:var(--col-narrow);margin:0 auto;padding:var(--space-section) var(--gutter);display:grid;gap:1.6rem}
.manifesto .label{margin-bottom:2rem}
.m-big{font:var(--display-w-mid) var(--t-l)/1.14 var(--font-display);letter-spacing:var(--display-track);margin-block:2.4rem 1rem}
.m-p{color:var(--ivory-72)}
.founder{display:grid;grid-template-columns:1fr 1.25fr;gap:6vw;align-items:start;padding-bottom:var(--space-section)}
.founder .founder-img{position:sticky;top:6rem}
.founder-q blockquote{margin:0;display:grid;gap:1.3rem;font-size:clamp(1.1rem,1.3vw,1.3rem)}
.fq-last{font:italic 400 clamp(1.7rem,2.8vw,2.7rem)/1.22 var(--font-accent);margin-top:1.4rem}
.founder-q figcaption{margin:2.2rem 0 2rem;font:400 var(--t-label)/1.5 var(--font-label);letter-spacing:var(--track-label)}

/* ---------- CONTACT ---------- */
.contact{display:grid;grid-template-columns:1.5fr 1fr;gap:6vw;padding-top:clamp(8rem,14vw,11rem);padding-bottom:var(--space-section)}
.contact-main{display:grid;gap:1.8rem;align-content:start}
.contact-main .lede{font-size:clamp(1.1rem,1.3vw,1.25rem);color:var(--ivory-72);max-width:44ch}
.contact-side{display:grid;gap:2rem;align-content:start;padding-top:clamp(0rem,12vw,13rem)}
.c-details{font:400 var(--t-label)/2.2 var(--font-label);letter-spacing:var(--track-label)}
.form{display:grid;gap:1.6rem;margin-top:1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;border:0;padding:0;margin:0}
.field-row legend{font:400 var(--t-label)/1 var(--font-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ivory-72);padding:0;margin-bottom:1rem}
.field{display:grid;gap:.5rem}
.field label{font:400 var(--t-label)/1.5 var(--font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-72)}
.req{text-transform:none;letter-spacing:.04em;color:var(--ivory-55)}
.field input,.field textarea{font:300 1.1rem/1.4 var(--font-body);color:var(--ivory);background:transparent;border:0;border-bottom:1px solid rgba(250,249,241,.4);padding:.6rem 0;border-radius:0;transition:border-color .3s}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--ivory)}
.field.check{display:flex;align-items:center;gap:.8rem}
.field.check input{width:20px;height:20px;accent-color:var(--olive)}
.form .btn{justify-self:start;margin-top:.6rem}
.form-success{font:var(--display-w-mid) var(--t-l)/1.2 var(--font-display);padding:3rem 0}

/* ---------- BLOG ---------- */
.posts{padding-bottom:var(--space-section)}
.post-row{display:grid;grid-template-columns:9rem 1.4fr 1.2fr auto;gap:2rem;align-items:baseline;padding:1.8rem 0;border-top:1px solid var(--line)}
.post-date{font:200 var(--t-small)/1 var(--font-numeric);color:var(--ivory-72)}
.post-t{font:var(--display-w-mid) clamp(1.4rem,1.9vw,2rem)/1.15 var(--font-display)}
.post-t a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.post-ex{font-size:.95rem;line-height:1.55;color:var(--ivory-72);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post{padding-top:clamp(8rem,14vw,11rem);padding-bottom:var(--space-section)}
.post-head{max-width:68rem;display:grid;gap:1.6rem;margin-bottom:clamp(3rem,6vw,5rem)}
.post-h1{font:var(--display-w-large) clamp(2.4rem,5.4vw,5.6rem)/1.02 var(--font-display);letter-spacing:var(--display-track)}
.post-meta{display:flex;gap:2rem;font:400 var(--t-label)/1 var(--font-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ivory-72)}
.post-meta time{font-family:var(--font-numeric);font-weight:200;letter-spacing:.06em}
.post-body{max-width:var(--col-narrow);margin:0 auto;display:grid;gap:1.3rem;color:var(--ivory)}
.post-body p{color:rgba(250,249,241,.86)}
.post-sub{font:var(--display-w-mid) clamp(1.55rem,2.2vw,2.2rem)/1.2 var(--font-display);margin-top:2.2rem}
.post-img{margin:2rem 0}
.post-next{max-width:var(--col-narrow);margin:5rem auto 0;border-top:1px solid var(--line);padding-top:2rem}
.post-next a{display:grid;gap:.6rem}
.post-next-t{font:var(--display-w-mid) var(--t-m)/1.2 var(--font-display)}

/* ---------- 404 + styleguide ---------- */
.nf{min-height:80vh;display:grid;align-content:center;gap:3rem;padding-top:8rem}
.nf-links{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;font:400 var(--t-label)/1 var(--font-label);letter-spacing:var(--track-label)}
.sg{padding-top:10rem;padding-bottom:6rem;display:grid;gap:3rem}
.sg-row{display:grid;grid-template-columns:18rem 1fr;gap:3rem;border-top:1px solid var(--line);padding-top:2rem}
.sg-meta{display:grid;gap:.4rem;font-size:.92rem;color:var(--ivory-72);align-content:start}
.sg-xl{font:var(--display-w-large) var(--t-xl)/1 var(--font-display);letter-spacing:var(--display-track)}
.sg-l{font:var(--display-w-mid) var(--t-l)/1.14 var(--font-display)}
.sg-label{font:400 var(--t-label)/1.8 var(--font-label);letter-spacing:var(--track-label)}
.sg-body{font:300 var(--t-body)/1.65 var(--font-body);max-width:46ch}
.sg-accent{font:italic 400 var(--t-l)/1.2 var(--font-accent)}
.sg-num{font:200 var(--t-xl)/1 var(--font-numeric);letter-spacing:-.03em}
.swatches{display:flex;flex-wrap:wrap;gap:1.4rem}
.sw{display:grid;gap:.5rem}
.sw-chip{width:9rem;height:6rem;background:var(--c);border:1px solid var(--line)}

.close-h,.mega,.xl,.statement blockquote p,.pos-t,.how-t,.m-big,.post-h1,.next-name{text-wrap:balance}
/* v2: client/case names always set in caps (consistent with the FEATURED CLIENTS index and NATULIQUE's brand casing). Display style only; DOM text is unchanged. */
.card-name,.reel-name,.c-title,.next-name{text-transform:uppercase;letter-spacing:.01em}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .nav-desk{display:none}
  .pill{margin-left:auto;padding:.75rem 1rem}
  .menu-btn{display:inline-flex}
  .hero{height:240vh}
  .stats li{grid-template-columns:1fr;grid-template-areas:"pre" "big" "post";row-gap:.5rem}
  .stats .s-big{overflow-wrap:normal;font-size:clamp(2.4rem,11vw,3.4rem)}
  .hero .hero-window{clip-path:inset(calc((1 - var(--p)) * 20vh) calc((1 - var(--p)) * 14vw))}
  .hero-h{padding:7.5rem 0 14.5rem;font-size:clamp(3rem,13.5vw,4.6rem)}
  .hero-h .l2{width:auto}
  .hero-cap{flex-direction:column;align-items:flex-start;gap:1.2rem;right:var(--gutter);bottom:1.8rem}
  .hero-run{top:5.4rem}
  .pos-row,.pos-row:nth-child(n){margin-left:0;grid-template-columns:2.4rem 1fr}
  .pos-more{margin-left:3.4rem}
  .carousel{padding:0 13vw}.carousel>li{flex-basis:74vw}
  .sec-head{flex-wrap:wrap}
  .prac summary{grid-template-columns:2.6rem 1fr 1.6rem}
  .prac-body{padding-left:3.6rem}
  .prac-body.two{grid-template-columns:1fr}
  .caps{columns:1}
  .statement,.st-1,.st-2{text-align:left;margin:0}
  .ix-row{grid-template-columns:1fr;gap:.35rem}
  .ix-res{text-align:left}
  .ix-names{grid-template-columns:1fr;gap:.6rem;justify-items:start;text-align:left}
  .f-grid{grid-template-columns:1fr;gap:2rem}
  .f-social{text-align:left}
  .split{grid-template-columns:1fr;gap:2rem}
  .feature{grid-template-columns:1fr}
  .feat-rail{position:static}
  .feat-img{grid-column:auto;width:100%}
  .duo{grid-template-columns:1fr}.duo-b{margin:0;width:70%;justify-self:end}
  .how-t:nth-of-type(2){margin-left:0}
  .about-img{width:auto;margin-inline:var(--gutter);aspect-ratio:4/3;max-height:none}
  .founder{grid-template-columns:1fr;gap:2.6rem}.founder .founder-img{position:relative;top:auto;width:78%}
  .contact{grid-template-columns:1fr}.contact-side{padding-top:0}
  .field-row{grid-template-columns:1fr}
  .post-row{grid-template-columns:1fr;gap:.7rem}
  .sg-row{grid-template-columns:1fr}
  .close.has-media{min-height:86vh}
}

/* ---------- v3 overlap fixes, kept in v4 ---------- */
/* portfolio reel: card content fades in without moving, so a revealing figure never slides over the copy below it */
.reel-item [data-reveal]{transform:none!important}
.reel-item{grid-template-rows:auto;row-gap:.8rem}
.reel-item .card-stat{position:relative;z-index:0;padding-bottom:.15rem}
/* v4: the pinned horizontal reel is back at every desktop size; the image gives way on short windows so nothing clips */
.reel-img{max-height:min(46vh,calc(100vh - 27rem));min-height:9rem}
.reel-track{padding-top:4.5rem}.reel-item.r1{margin-top:4vh}.reel-item.r2{margin-top:1.5vh}
.reel-bar{bottom:1.25rem}
.reel:not(.static) .reel-pin{padding-bottom:2.5rem}
.reel-blurb{-webkit-line-clamp:2}

/* ---------- v4: ONE type hierarchy (display / label / body / numeric), same roles on every page ---------- */
/* one-line highlight: figure in Montserrat, words in the body face (cards, portfolio reel, FEATURED CLIENTS) */
.card-stat{display:grid;gap:.3rem}
.card-stat .hl{display:flex;gap:.55rem;align-items:baseline;justify-content:center}
.card-stat .s-big,.ix-n{font:200 1.5rem/1 var(--font-numeric);letter-spacing:-.01em;color:var(--ivory)}
.hl-cap{font:300 .98rem/1.3 var(--font-body);color:var(--ivory-72)}
.hl-text .hl-cap{color:var(--ivory)}
.reel-item .card-stat .hl{justify-content:flex-start}
@media (min-width:821px){.card-stat .hl,.ix-res{white-space:nowrap}.card-stat .hl{flex-wrap:nowrap}
 .reel:not(.static) .reel-item{width:max(26vw,19.5rem)}.reel:not(.static) .reel-item.r2{width:max(22vw,19rem)}}
/* case page: hero → title → one-line positioning → service bubbles → story → Selected Results → Creative Deliverables → gallery */
.c-hero-text{gap:1.1rem}
.c-line{font:300 var(--t-m)/1.35 var(--font-body);color:var(--ivory);max-width:34ch;text-wrap:balance}
.c-tags{margin-top:.3rem}
.c-tags li{border-color:rgba(250,249,241,.42);padding:0}
.c-tags a,.c-tags span{display:inline-flex;align-items:center;min-height:30px;padding:.45rem .8rem;font:400 .62rem/1 var(--font-label);letter-spacing:.18em;color:var(--ivory)}
.c-tags a:hover{background:var(--ivory);color:var(--black);border-radius:999px}
.feature{display:block;padding-block:var(--space-section) calc(var(--space-section)*.55)}
.c-row{display:grid;grid-template-columns:minmax(12rem,1fr) 2.4fr;gap:2rem 5vw;padding-block:clamp(2.6rem,5vw,4.6rem);border-top:1px solid var(--line)}
.c-row:first-child{border-top:0;padding-top:0}
.c-k{position:sticky;top:7rem;align-self:start}
.c-story{display:grid;gap:1.7rem}
.feat-body{font:300 var(--t-body)/1.7 var(--font-body);color:var(--ivory-72);max-width:62ch}
.c-v.stats{border-top:0}
.c-v.stats li{grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);grid-template-areas:"big txt";align-items:center;padding:1.35rem 0}
.c-v.stats li:first-child{padding-top:0}.c-v.stats li:last-child{border-bottom:0;padding-bottom:0}
.c-v.stats .s-big{grid-area:big;font:200 clamp(2.4rem,4vw,4rem)/.95 var(--font-numeric);letter-spacing:-.03em}
.r-txt{grid-area:txt;font:300 var(--t-body)/1.55 var(--font-body);color:var(--ivory-72);max-width:46ch}
.c-v.stats .r-stmt{grid-template-columns:1fr;grid-template-areas:"txt"}
.r-stmt .r-txt{color:var(--ivory);max-width:58ch}
/* curated gallery */
.gallery{display:grid;gap:clamp(1rem,2vw,2rem);padding-bottom:var(--space-section)}
.g-full{margin:0;height:min(88vh,62vw);overflow:hidden}
.g-full picture,.g-full img{width:100%;height:100%;object-fit:cover}
.g-pair,.g-trio{display:grid;gap:clamp(1rem,2vw,2rem);align-items:start}
.g-pair{grid-template-columns:1fr 1fr}.g-trio{grid-template-columns:repeat(3,1fr)}
.g-pair figure,.g-trio figure,.g-single figure{margin:0;aspect-ratio:4/5;overflow:hidden}
.g-pair figure:nth-child(2){margin-top:12vh}
.g-trio figure:nth-child(2){margin-top:8vh}
.g-single{display:flex;justify-content:flex-end}.g-single figure{width:min(36rem,48%)}
.g-pair img,.g-trio img,.g-pair picture,.g-trio picture,.g-single picture,.g-single img{width:100%;height:100%;object-fit:cover}
/* v5: uncropped landscape figure (Canva mockups) and muted loop video inside a pair */
.g-wide figure{margin:0}.g-wide picture,.g-wide img{display:block;width:100%;height:auto}
.g-video{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:820px){
 .c-row{grid-template-columns:1fr;gap:1.4rem}.c-k{position:static}
 .c-v.stats li{grid-template-columns:1fr;grid-template-areas:"big" "txt";row-gap:.5rem}
 .c-v.stats .s-big{font-size:clamp(2.3rem,10vw,3.2rem)}
 .c-line{font-size:1.2rem}
 .g-pair,.g-trio{grid-template-columns:1fr 1fr}.g-trio figure:nth-child(3){grid-column:1/-1;aspect-ratio:4/3}
 .g-pair figure:nth-child(2),.g-trio figure:nth-child(2){margin-top:3rem}
 .g-full{height:auto;aspect-ratio:4/5}
 .g-single figure{width:78%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal],.js [data-split] .w>span,.js .hero-h .l1,.js .hero-h .l2{opacity:1;transform:none}
  .js [data-wipe]::before{display:none}.js [data-wipe] img{transform:none}
  .hero{height:auto}.hero-stage{position:relative}.hero .hero-window{clip-path:none}.panel{margin-top:0}
}
/* v5.2: OSUZA vertical video pair (9:16, uncropped, narrower than photo pairs) */
.g-vpair{max-width:min(100%,62rem);margin-inline:auto;width:100%}
.g-pair.g-vpair figure{aspect-ratio:9/16}