/* Max Zaharenkov — "viewfinder" build. No scripts: motion is CSS scroll-driven animation, view transitions and @property. */
@font-face{font-family:"Big Shoulders Display";src:url(fonts/big-shoulders.woff2) format("woff2");font-weight:500 900;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

@property --n{syntax:"<integer>";inherits:false;initial-value:0}
@property --ss{syntax:"<integer>";inherits:false;initial-value:0}
@property --ff{syntax:"<integer>";inherits:false;initial-value:0}
@property --mm{syntax:"<integer>";inherits:false;initial-value:0}

:root{
 --bg:#0a0a09;--bg2:#121210;--bg3:#1b1a17;--tx:#eee9e0;--mut:#a39c90;--line:rgba(238,233,224,.15);--rec:#ff4d2e;--sun:#e9a33b;
 --pad:clamp(20px,4.5vw,72px);--gap:clamp(16px,2vw,28px);--sec:clamp(80px,10vw,150px);
 --disp:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;
 --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--serif:"Instrument Serif",Georgia,serif;
 color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 1.0625rem/1.6 var(--sans);overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto} /* line-break-ok: images and video scale to their box */
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:focus-visible,summary:focus-visible,label:focus-within{outline:2px solid var(--rec);outline-offset:3px}
h1,h2,h3,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.nb{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}
.mono{font:500 .75rem/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.disp{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:.005em;text-wrap:balance}
.fit{font-size:min(var(--cap,16vw),calc((100vw - 2 * var(--pad)) / var(--fit,6)))}
.lede{font-size:clamp(1.125rem,1rem + .45vw,1.35rem);line-height:1.55;color:var(--tx)}
.muted{color:var(--mut)}
.rule{border-top:1px solid var(--line)}

/* film grain over everything */
body::after{content:"";position:fixed;inset:-100px;z-index:90;pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-40px,22px)}40%{transform:translate(28px,-36px)}60%{transform:translate(-18px,40px)}80%{transform:translate(36px,10px)}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:1em 1.4em;border:1px solid var(--line);border-radius:2px;font:600 .8125rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.btn:hover{border-color:var(--tx)}
.btn.solid{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.btn.solid:hover{background:#fff}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.arrow::after{content:"→";font-family:var(--sans);transition:transform .25s}
.arrow:hover::after{transform:translateX(4px)}

/* header: blends over anything (difference); the phone menu lives outside it */
.top{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;gap:28px;padding:20px var(--pad);mix-blend-mode:difference;color:#fff}
.brand{font:800 1.5rem/1 var(--disp);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;margin-right:auto}
.top nav ul{display:flex;gap:clamp(18px,2.2vw,34px)}
.top nav a{font:500 .75rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding-block:.5em;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s}
.top nav a:hover,.top nav a[aria-current]{background-size:100% 1px}
.top .btn{border-color:rgba(255,255,255,.55);color:#fff;padding:.8em 1.15em}
.menu{display:none}
@media (max-width:899px){
 .top>nav,.top>.btn{display:none}
 .menu{display:block;position:fixed;top:14px;right:var(--pad);z-index:70}
 .menu summary{list-style:none;cursor:pointer;font:600 .75rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:.95em 1.2em;border-radius:2px;background:rgba(10,10,9,.72);border:1px solid var(--line);color:var(--tx);position:relative;z-index:72}
 .menu summary::-webkit-details-marker{display:none}
 .menu .shut{display:none}.menu[open] .shut{display:inline}.menu[open] .opn{display:none}
 .menu:not([open]) .panel{display:none}
 .menu .panel{position:fixed;inset:0;background:var(--bg);z-index:71;padding:96px var(--pad) 40px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;overflow:auto}
 .menu .panel ul{display:grid;gap:2px}
 .menu .panel a.big{display:block;font:800 clamp(2.8rem,13vw,4rem)/1.02 var(--disp);text-transform:uppercase;text-decoration:none}
}

/* ---------- home hero: the viewfinder ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#20262b url(img/poster.webp) 40% 50%/cover;isolation:isolate}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 26%,rgba(0,0,0,0) 46%,rgba(0,0,0,.72))}
.bar{position:absolute;left:0;right:0;height:50%;background:var(--bg);z-index:4;animation:letterbox 1.7s cubic-bezier(.76,0,.18,1) .25s both}
.bar.t{top:0;transform-origin:50% 0}.bar.b{bottom:0;transform-origin:50% 100%}
@keyframes letterbox{from{transform:scaleY(1)}to{transform:scaleY(0)}}
.vf{position:absolute;inset:84px var(--pad) 24px;z-index:3;pointer-events:none}



.rec{position:absolute;top:46px;left:40px;display:flex;align-items:center;gap:10px;color:#fff}
.rec b{width:9px;height:9px;border-radius:50%;background:var(--rec);animation:blink 1.2s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.15}}
.tc{counter-reset:m var(--mm) s var(--ss) f var(--ff);animation:tcm 3600s steps(60) infinite,tcs 60s steps(60) infinite,tcf 1s steps(25) infinite}
.tc::after{content:"00:" counter(m,decimal-leading-zero) ":" counter(s,decimal-leading-zero) ":" counter(f,decimal-leading-zero);font-variant-numeric:tabular-nums}
@keyframes tcm{to{--mm:60}}@keyframes tcs{to{--ss:60}}@keyframes tcf{to{--ff:25}}
.vf .meta{position:absolute;top:46px;right:40px;color:#fff;text-align:right}
.hero-in{position:absolute;left:0;right:0;bottom:44px;z-index:3;padding-inline:var(--pad);display:grid;gap:18px}
.hero h1{color:#fff;line-height:.8}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-top:.04em}
.hero h1 .w>span{display:inline-block;animation:rise 1.2s cubic-bezier(.2,.8,.2,1) both}
.hero h1 .w:nth-child(1)>span{animation-delay:1.1s}.hero h1 .w:nth-child(2)>span{animation-delay:1.25s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 32px;color:#fff;animation:fade 1s ease 1.6s both}
.hero-row p{font-size:clamp(1rem,.95rem + .3vw,1.2rem);color:#f0ebe2}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:899px){.vf .meta,.rec .tc{display:none}.rec{top:36px;left:16px}.hero h1 .w{display:block}}

/* ---------- knockout: video inside the number, then fly through it ---------- */
.ko{position:relative;background:var(--bg)}
.ko-stick{position:relative;height:100svh;overflow:hidden;isolation:isolate}
.ko video,.ko .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ko-mask{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1vw;background:var(--bg);color:#fff;mix-blend-mode:multiply;text-align:center}
.ko-mask .disp{font-size:min(56vw,78svh);line-height:.78;letter-spacing:-.01em}
.ko-mask .mono{color:#fff;font-size:clamp(.8rem,.6rem + .7vw,1.15rem);letter-spacing:.3em}
.ko-cap{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;display:flex;justify-content:space-between;gap:16px;z-index:2;color:var(--mut)}

/* ---------- statement with words that light up as you scroll ---------- */
.say{padding:var(--sec) var(--pad)}
.say p{font:600 clamp(1.9rem,1.1rem + 3.1vw,4.4rem)/1.08 var(--sans);letter-spacing:-.02em;text-wrap:balance}

/* ---------- counters ---------- */
.counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap)}
@media (min-width:900px){.counts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.counts li{border-top:1px solid var(--line);padding:22px 0 30px}
.num{display:block;font:800 clamp(4.2rem,2.6rem + 6vw,9rem)/.85 var(--disp);letter-spacing:-.01em}
.num::before{content:attr(data-n)}
.num::after{content:attr(data-s)}
.counts .mono{margin-top:14px;display:block}

/* ---------- chapters: full-screen case studies that stack ---------- */
.chapters{position:relative}
.ch{position:relative;min-height:100svh;overflow:hidden;display:grid;align-items:end;isolation:isolate;background:var(--bg2);border-top:1px solid var(--line)}
.ch .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ch .bgimg.blur{filter:blur(38px) saturate(1.2) brightness(.55);transform:scale(1.25)}
.ch::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,9,.55),rgba(10,10,9,.1) 30%,rgba(10,10,9,.25) 55%,rgba(10,10,9,.92))}
.ch-in{display:grid;gap:clamp(18px,2.5vw,32px);padding:120px var(--pad) clamp(36px,5vw,64px);grid-template-columns:1fr;width:100%}
.ch-in>.txt{display:grid;gap:clamp(16px,2.2vw,28px)}
.ch-in .mono{color:#ddd6ca}
.ch h3{color:#fff}
.ch .still{margin:0;width:min(62vw,300px);aspect-ratio:4/5;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)} /* line-break-ok: photo frame */
.ch .still img{width:100%;height:100%;object-fit:cover}
.data{display:flex;flex-wrap:wrap;gap:14px 40px}
.data li{display:grid;gap:4px}
.data b{font:800 clamp(2rem,1.5rem + 1.8vw,3.2rem)/1 var(--disp);color:#fff}
.data span{font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#d2cbbf}
@media (min-width:900px){
 .ch-in{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(32px,5vw,90px)}
 .ch .still{width:clamp(260px,24vw,400px);grid-column:2;grid-row:1;align-self:center} /* line-break-ok: photo frame */
}
@media (min-width:900px) and (min-height:640px){
 .ch{position:sticky;top:0;height:100svh;box-shadow:0 -40px 90px rgba(0,0,0,.65)}
}

/* ---------- film strip that slides sideways as you scroll ---------- */
.strip{position:relative;background:var(--bg)}
.strip-stick{position:relative;overflow:hidden;padding-block:var(--sec)}
.strip-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;padding-inline:var(--pad);margin-bottom:clamp(24px,3vw,40px)}
.track{display:flex;padding:0 var(--pad) 40px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.frame{scroll-snap-align:start}
.frame{position:relative;margin:0;padding:34px 10px;background:#171614;flex:none}
.frame::before,.frame::after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,transparent 0 9px,#0a0a09 9px 21px,transparent 21px 30px)}
.frame::before{top:10px}.frame::after{bottom:10px}
.frame img{height:min(56svh,520px);width:auto;max-width:none} /* line-break-ok: film frames keep their own ratio */
.frame figcaption{position:absolute;left:14px;right:14px;bottom:-30px;display:flex;justify-content:space-between;gap:10px;font:500 .7rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.frame figcaption b{color:var(--sun);font-weight:600}

/* ---------- work for your brand ---------- */
.match fieldset{border:0;margin:0 0 32px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.match legend{font:500 .75rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:16px;padding:0}
.match label{cursor:pointer;display:inline-flex;align-items:center;padding:.95em 1.3em;border:1px solid var(--line);border-radius:2px;font:600 .9375rem/1.2 var(--sans);transition:background .2s,color .2s}
.match label:hover{border-color:var(--tx)}
.match input{position:absolute;opacity:0;width:1px;height:1px}
.match label:has(input:checked){background:var(--tx);color:var(--bg);border-color:var(--tx)}
.match .pane{display:none;gap:var(--gap);grid-template-columns:1fr}
.match:has(#m-hotel:checked) .p-hotel,.match:has(#m-destination:checked) .p-destination,.match:has(#m-tech:checked) .p-tech,.match:has(#m-app:checked) .p-app,.match:has(#m-cars:checked) .p-cars{display:grid;animation:fade .45s ease both}
.pitch{background:var(--bg3);border:1px solid var(--line);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:16px;border-radius:4px}
.pitch h3{font:800 clamp(2rem,1.5rem + 1.6vw,3rem)/.95 var(--disp);text-transform:uppercase;text-wrap:balance}
.pitch p{color:var(--mut)}
.pitch .btn{align-self:flex-start;margin-top:auto}
.mini{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.mini a{position:relative;display:grid;align-content:end;min-height:280px;padding:20px;text-decoration:none;overflow:hidden;border-radius:4px;isolation:isolate;background:linear-gradient(160deg,#1f3f42,#0d1d1f)}
.mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s ease}
.mini a::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.85))}
.mini a:hover img{transform:scale(1.05)}
.mini b{font:800 1.9rem/1 var(--disp);text-transform:uppercase;color:#fff}
.mini a>span{margin-top:6px;font:500 .75rem/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#d8d1c5}
@media (min-width:1000px){.match .pane{grid-template-columns:5fr 7fr}}

/* ---------- audience meters ---------- */
.aud{display:grid;gap:clamp(36px,5vw,80px);grid-template-columns:1fr}
@media (min-width:900px){.aud{grid-template-columns:repeat(3,minmax(0,1fr))}}
.meters li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:end;padding:12px 0;border-top:1px solid var(--line)}
.meters .mono{color:var(--tx)}
.meters b{font:800 clamp(1.6rem,1.3rem + 1vw,2.4rem)/1 var(--disp)}
.meters .m{grid-column:1 / -1;height:12px;background:repeating-linear-gradient(90deg,rgba(238,233,224,.12) 0 5px,transparent 5px 8px)}
.meters .m i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--tx) 0 5px,transparent 5px 8px);transform-origin:0 50%}
.meters .hot .m i{background:repeating-linear-gradient(90deg,var(--sun) 0 5px,transparent 5px 8px)}
.reach{display:grid;gap:14px;align-content:start}
.reach .num{color:var(--sun)}

/* ---------- quote ---------- */
.quote blockquote{margin:0;display:grid;gap:26px}
.quote q{quotes:"“" "”";font:italic 400 clamp(2rem,1.2rem + 3vw,4.4rem)/1.04 var(--serif);text-wrap:balance}

/* ---------- credits roll ---------- */
.credits{display:grid;gap:clamp(40px,6vw,90px)}
.credits h2{text-align:center}
.cr{display:grid;gap:14px}
.cr li{display:grid;grid-template-columns:1fr;gap:2px;text-align:center}
.cr .mono{color:var(--mut)}
.cr b{display:block;font:800 clamp(1.5rem,1.2rem + 1.2vw,2.4rem)/1.05 var(--disp);text-transform:uppercase;text-wrap:balance}
.cr a{text-decoration:none}
.cr a:hover b{color:var(--sun)}
@media (min-width:900px){.cr li{grid-template-columns:1fr 1fr;gap:40px;text-align:left;align-items:baseline}.cr li .mono{text-align:right}}

/* ---------- final call ---------- */
.end{position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--sec) * 1.3) var(--pad) var(--sec);display:grid;gap:36px;min-height:90svh;align-content:end}
.end .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.5)}
.end::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg),rgba(10,10,9,0) 32%,rgba(10,10,9,.25) 70%,var(--bg))}
.end h2{color:#fff}
.mail{font:800 clamp(1.6rem,1rem + 3.2vw,4rem)/1.05 var(--disp);text-transform:uppercase;text-decoration:none;border-bottom:2px solid currentColor;overflow-wrap:anywhere;justify-self:start}
.mail:hover{color:var(--sun)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:48px var(--pad) 40px;display:grid;gap:28px}
.foot .grid{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:900px){.foot .grid{grid-template-columns:2fr 1fr 1fr}}
.foot ul{display:grid;gap:8px}
.foot a{text-decoration:none;color:var(--mut)}
.foot a:hover{color:var(--tx)}
.foot .brand{font-size:2.2rem;color:var(--tx);display:inline-block;margin-bottom:10px}
.foot p{color:var(--mut)}

/* ---------- inner pages ---------- */
.ph{padding:140px var(--pad) clamp(40px,5vw,72px);display:grid;gap:clamp(20px,3vw,40px)}
.ph .lede{color:var(--mut)}
@media (min-width:900px){.ph{grid-template-columns:7fr 5fr;align-items:end}}
.head{display:grid;gap:18px 40px;margin-bottom:clamp(32px,4vw,56px)}
.head p{color:var(--mut)}
@media (min-width:900px){.head{grid-template-columns:7fr 5fr;align-items:end}}

/* work grid */
.cards{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative;display:grid;align-content:end;aspect-ratio:4/5;padding:20px;overflow:hidden;text-decoration:none;isolation:isolate;border-radius:4px;background:linear-gradient(160deg,#1f3f42,#0d1d1f);container-type:inline-size}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .8s}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 30%,rgba(0,0,0,.88))}
.card:hover img{transform:scale(1.06);filter:saturate(1.15)}
.card .mono{color:#ddd6ca}
.card h3{font:800 min(3rem,15cqi)/.92 var(--disp);text-transform:uppercase;color:#fff;margin:6px 0 10px;text-wrap:balance}
.card .res{font:500 .75rem/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sun)}
.card .big{position:absolute;top:20px;left:20px;right:20px;font:800 min(5.4rem,22cqi)/.85 var(--disp);color:rgba(255,255,255,.92);white-space:nowrap}

/* client index */
.idx{display:grid;gap:40px var(--gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.idx h3{font:500 .75rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.idx li{font:700 1.35rem/1.25 var(--disp);text-transform:uppercase;letter-spacing:.02em;padding:6px 0;border-top:1px solid var(--line)}
.idx a{text-decoration:none;color:var(--sun)}

/* case page */
.case-hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.case-hero .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.case-hero .bgimg.blur{filter:blur(40px) brightness(.5) saturate(1.2);transform:scale(1.25)}
.case-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,9,.6),rgba(10,10,9,0) 30%,rgba(10,10,9,.3) 60%,var(--bg))}
.case-in{display:grid;gap:24px;padding:130px var(--pad) clamp(36px,5vw,72px);width:100%}
.case-in>.txt{display:grid;gap:22px}
.case-in .still{margin:0;width:min(70vw,320px);aspect-ratio:4/5;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)} /* line-break-ok: photo frame */
.case-in .still img{width:100%;height:100%;object-fit:cover}
.case-in .lede{color:#efe9df}
@media (min-width:900px){.case-in{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,5vw,90px);align-items:end}.case-in .still{width:clamp(280px,26vw,420px);grid-column:2;grid-row:1}} /* line-break-ok: photo frame */
.results{display:grid;gap:0 var(--gap);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.results{grid-template-columns:repeat(3,minmax(0,1fr))}}
.results li{border-top:1px solid var(--line);padding:22px 0 30px;container-type:inline-size}
.results b{display:block;font:800 min(clamp(3rem,2rem + 3.6vw,6rem),23cqi)/.86 var(--disp)}
.results li>span{display:block;margin-top:12px;font:500 .75rem/1.45 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.story{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr}
@media (min-width:900px){.story{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ticks{counter-reset:t}
.ticks li{border-top:1px solid var(--line);padding:14px 0 14px 2.6em;position:relative}
.ticks li::before{content:counter(t,decimal-leading-zero);counter-increment:t;position:absolute;left:0;top:1.15em;font:500 .7rem/1 var(--mono);color:var(--sun)}
.next{position:relative;display:grid;align-items:end;gap:14px;min-height:min(72svh,660px);overflow:hidden;isolation:isolate;text-decoration:none;padding:var(--sec) var(--pad) clamp(36px,5vw,64px)}
.next .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.45);transition:transform 1s cubic-bezier(.2,.8,.2,1),filter 1s}
.next .bgimg.blur{filter:blur(36px) brightness(.4);transform:scale(1.25)}
.next:hover .bgimg:not(.blur){transform:scale(1.04);filter:brightness(.6)}
.next::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg),rgba(10,10,9,0) 40%)}
.next .disp{color:#fff}

/* services rows */
.rows li{display:grid;gap:10px 40px;padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--line)}
.rows h3{font:800 min(clamp(2.4rem,1.6rem + 3vw,4.6rem),calc((100vw - 2 * var(--pad)) / 7))/.9 var(--disp);text-transform:uppercase;text-wrap:balance}
.rows p{color:var(--mut)}
.rows .mono{color:var(--sun)}
@media (min-width:900px){.rows li{grid-template-columns:5em minmax(0,6fr) minmax(0,5fr);align-items:baseline}}

/* media kit bits */
.plat{display:grid;gap:0 var(--gap);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.plat{grid-template-columns:repeat(4,minmax(0,1fr))}}
.plat a{display:grid;gap:6px;border-top:1px solid var(--line);padding:20px 0;text-decoration:none;container-type:inline-size}
.plat b{font:800 min(clamp(3rem,2rem + 3vw,5.4rem),30cqi)/.86 var(--disp)}
.plat span{font-weight:600}
.plat small{color:var(--mut);font-size:.875rem}
.facts{display:grid;gap:0 var(--gap);grid-template-columns:1fr}
@media (min-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.facts li{border-top:1px solid var(--line);padding:14px 0}
.clients{display:flex;flex-wrap:wrap;gap:.1em .9em;font:800 clamp(1.8rem,1.2rem + 2.2vw,3.4rem)/1.05 var(--disp);text-transform:uppercase}
.clients li{white-space:nowrap}
.clients li:nth-child(odd){color:var(--mut)}

/* about */
.duo{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:1fr}
@media (min-width:900px){.duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.portrait{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:4px}
.portrait img{width:100%;height:100%;object-fit:cover}
.cols{display:grid;gap:22px}
@media (min-width:1100px){.cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}}

/* pitch page */
.for-bar{position:relative;z-index:61;background:var(--sun);color:#14120e;padding:12px var(--pad);font:600 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.deliv{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.deliv li{background:var(--bg3);border:1px solid var(--line);padding:28px;border-radius:4px;display:grid;gap:10px;align-content:start}
.deliv h3{font:800 2.2rem/.95 var(--disp);text-transform:uppercase;text-wrap:balance}
.deliv p{color:var(--mut)}

/* link in bio */
.lbio{min-height:100svh;display:grid;justify-items:center;align-content:center;gap:24px;padding:72px var(--pad);text-align:center;position:relative;isolation:isolate;overflow:hidden}
.lbio .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:blur(30px) brightness(.35);transform:scale(1.2)}
.lbio .face{width:116px;height:116px;border-radius:50%;overflow:hidden;border:1px solid var(--line)}
.lbio .face img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.lbio h1{font:800 min(3.2rem,calc((100vw - 2 * var(--pad)) / 4.7))/.9 var(--disp);text-transform:uppercase}
.lbio ul{display:grid;gap:12px;width:min(100%,520px)} /* line-break-ok: link buttons */
.lbio li a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;border:1px solid var(--line);border-radius:2px;text-decoration:none;text-align:left;font-weight:650;background:rgba(10,10,9,.5);transition:background .2s}
.lbio li a:hover{background:rgba(238,233,224,.1)}
.lbio li a.first{background:var(--tx);color:var(--bg)}
.lbio li small{display:block;font:500 .7rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-top:3px}
.lbio li a.first small{color:#55504a}
.lbio .soc{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}

/* Benchlight's claim bar sits at the bottom of a preview */
body:has([data-benchlight-bar]){padding-bottom:72px}

/* ---------- motion: only where supported, never with reduced motion ---------- */
@media (prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition-group(*){animation-duration:.7s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
 @supports (animation-timeline:view()){
  .ko{height:320svh;view-timeline:--ko block}
  .ko-stick{position:sticky;top:0}
  .ko-mask{animation:dive linear both;animation-timeline:--ko;animation-range:contain 8% contain 92%}
  @keyframes dive{0%{transform:scale(1)}55%{opacity:1}100%{transform:scale(9);opacity:0}}
  .ko-cap{animation:fadeout linear both;animation-timeline:--ko;animation-range:contain 0% contain 30%}
  @keyframes fadeout{to{opacity:0}}

  .say{view-timeline:--say block}
  .say p span{opacity:.16;animation:lit linear both;animation-timeline:--say;animation-range:cover calc(18% + var(--i) * 1%) cover calc(22% + var(--i) * 1%)}
  @keyframes lit{to{opacity:1}}

  .num[data-to]::before{content:counter(n);counter-reset:n var(--n);animation:count linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  @keyframes count{from{--n:0}to{--n:var(--to)}}

  .ch .bgimg:not(.blur){animation:kb linear both;animation-timeline:view();animation-range:entry 0% exit 0%}
  @keyframes kb{from{transform:scale(1.2)}to{transform:scale(1)}}
  .ch-in{animation:up linear both;animation-timeline:view();animation-range:entry 25% entry 95%}
  @keyframes up{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}

  .strip{height:360svh;view-timeline:--strip block}
  .strip-stick{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:0}
  .track{width:max-content;overflow:visible;scroll-snap-type:none;animation:slide linear both;animation-timeline:--strip;animation-range:contain 0% contain 100%}
  @keyframes slide{to{transform:translateX(calc(-100% + 100vw))}}

  .meters .m i{animation:meter linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
  @keyframes meter{from{transform:scaleX(0)}}
  .reveal{animation:up linear both;animation-timeline:view();animation-range:entry 10% entry 70%}
  .results b{animation:wipe linear both;animation-timeline:view();animation-range:entry 20% entry 80%}
  @keyframes wipe{from{clip-path:inset(100% 0 0 0);transform:translateY(20px)}to{clip-path:inset(0);transform:none}}
 }
}
@media (prefers-reduced-motion:reduce){.hero video,.ko video{display:none}body::after,.bar,.hero h1 .w>span,.hero-row,.rec b,.tc{animation:none}.bar{display:none}}

@media print{
 :root{--bg:#fff;--bg2:#fff;--bg3:#f4f4f4;--tx:#111;--mut:#555;--line:#ccc;color-scheme:light}
 body::after,.top,.menu,.foot,.no-print,.end{display:none!important}
 .sec{padding-block:16pt}.ph{padding-top:0}
 a{text-decoration:none}
 @page{margin:14mm}
}

/* 200% text: let buttons, joined pairs and client names wrap on a very narrow page (keep last) */
main{container:main/inline-size}
@container main (max-width:15em){.nb,.btn,.clients li{white-space:normal}.quote q{hyphens:auto}.plat,.results,.counts{grid-template-columns:1fr}}

/* case pages without a photo: an outlined result number as the backdrop */
.case-hero:not(:has(.bgimg)){background:radial-gradient(120% 90% at 85% 10%,#16393c 0%,#0d1c1d 45%,var(--bg) 100%)}
.case-hero .ghost{position:absolute;right:var(--pad);top:12svh;z-index:-1;font-size:min(40vw,62svh);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(238,233,224,.24);white-space:nowrap}

/* photo chapters and case heroes: split screen, the photo fills the right half */
.ch.split,.case-hero.split{background:var(--bg2)}
.ch.split .still,.case-hero.split .still{position:absolute;z-index:-2;margin:0;box-shadow:none;aspect-ratio:auto;top:0;right:0;bottom:0;width:50%;grid-column:auto;grid-row:auto;align-self:auto} /* line-break-ok: photo half */
.ch.split .still,.case-hero.split .still{overflow:hidden}
.split .still img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.split .still::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg2) 0%,rgba(18,18,16,.55) 18%,rgba(18,18,16,0) 45%),linear-gradient(0deg,rgba(18,18,16,.65),rgba(18,18,16,0) 35%)}
.ch.split::before,.case-hero.split::before{display:none}
@media (min-width:900px){.ch.split .ch-in>.txt,.case-hero.split .case-in>.txt{padding-right:50%}}
@media (max-width:899px){
 .ch.split,.case-hero.split{display:block;min-height:0}
 .ch.split .still,.case-hero.split .still{position:relative;width:100%;height:58svh;z-index:0}
 .split .still::after{background:linear-gradient(0deg,var(--bg2) 0%,rgba(18,18,16,.72) 32%,rgba(18,18,16,0) 62%)}
 .ch.split .ch-in,.case-hero.split .case-in{padding-top:0;margin-top:-18svh;position:relative;z-index:1}
}

/* demo: still hero with a slow push-in, and a badge saying this is a demo */
.hero .hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%;z-index:-2;animation:push 22s ease-out both}
@keyframes push{from{transform:scale(1.14)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero .hero-still{animation:none}}
.demo-badge{position:fixed;left:14px;bottom:14px;z-index:80;font:600 .6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:#d39567;color:#0a0a09;padding:.7em .9em;border-radius:2px;text-decoration:none}
body:has([data-benchlight-bar]) .demo-badge{bottom:84px}