:root { --ink:#111112; --paper:#f1eee8; --red:#ed2630; --muted:#aaa7a4; --mono:'DM Mono',monospace; --sans:'Manrope',sans-serif; --serif:'Playfair Display',serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--ink); color:var(--paper); font-family:var(--sans); } a { color:inherit; }
.topbar { position:fixed; inset:0 0 auto; z-index:30; display:flex; align-items:center; height:92px; padding:0 4.4vw; border-bottom:1px solid #353436; background:rgba(17,17,18,.9); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; } .brand img { display:block; width:154px; height:auto; } .topbar nav { display:flex; gap:30px; margin-left:auto; margin-right:37px; } .topbar nav a,.eyebrow,.contact-pill { font:10px var(--mono); letter-spacing:1px; text-decoration:none; text-transform:uppercase; } .topbar nav a { color:var(--paper); opacity:.68; } .topbar nav a:hover { opacity:1; }
.contact-pill { display:flex; align-items:center; gap:8px; padding:10px 15px; border:1px solid #686769; border-radius:20px; color:var(--paper); }.contact-pill span { width:7px;height:7px;border-radius:50%;background:var(--red); }.menu-toggle,.sr-only { display:none; }
.case-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.72fr); gap:6vw; min-height:75vh; padding:170px 8vw 90px; background:radial-gradient(ellipse at 84% 16%,#3d2025 0,transparent 37%),var(--ink); } .case-hero h1 { max-width:900px; margin:28px 0; font-size:clamp(58px,8vw,118px); letter-spacing:-.075em; line-height:.87; }.case-hero h1 em,.case-body h2 em { color:var(--red); font-family:var(--serif); font-weight:600; }.eyebrow { display:flex; align-items:center; gap:10px; color:#b9b5b1; }.eyebrow::before { width:24px; height:1px; content:''; background:var(--red); }.lede { max-width:700px; margin:0; color:#c8c4c0; font-size:clamp(18px,2vw,25px); line-height:1.5; }
.case-media { align-self:end; min-height:310px; overflow:hidden; background:#29282a; }.case-media img { display:block; width:100%; height:100%; min-height:310px; object-fit:cover; }.case-media--brand { display:grid; place-items:center; padding:35px; background:var(--paper); }.case-media--brand img { width:min(70%,260px); min-height:0; height:auto; object-fit:contain; }
.case-body { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(240px,.56fr); gap:9vw; padding:110px 8vw; background:var(--paper); color:var(--ink); }.case-body h2 { margin:0 0 24px; font-size:clamp(35px,4.2vw,62px); letter-spacing:-.06em; line-height:.94; }.case-copy { max-width:690px; font-size:17px; line-height:1.72; }.case-copy p { margin:0 0 22px; }.case-copy h3 { margin:48px 0 14px; font-size:22px; letter-spacing:-.035em; }.case-facts { align-self:start; padding:28px; background:#e3ded6; }.case-facts div { padding:14px 0; border-top:1px solid #bcb5ae; }.case-facts div:first-child { padding-top:0; border:0; }.case-facts dt { margin-bottom:5px; font:10px var(--mono); letter-spacing:1px; text-transform:uppercase; color:#716b65; }.case-facts dd { margin:0; font-size:15px; line-height:1.45; }
.case-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding:92px 8vw 110px; background:#1b1a1c; color:var(--paper); }.case-gallery__heading { grid-column:1 / -1; display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:22px; }.case-gallery__heading p { margin:0; color:var(--red); font:10px var(--mono); letter-spacing:1px; text-transform:uppercase; }.case-gallery__heading h2 { max-width:650px; margin:0; font-size:clamp(34px,4.2vw,60px); letter-spacing:-.06em; line-height:.92; }.case-gallery__heading em { color:var(--red); font-family:var(--serif); }.case-gallery figure,.case-video { min-height:0; margin:0; overflow:hidden; border:1px solid #414043; background:#29282a; }.case-gallery img { display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; transition:transform .4s ease; }.case-gallery figure:hover img { transform:scale(1.025); }.case-gallery figcaption { min-height:52px; display:flex; align-items:center; padding:12px 14px; border-top:1px solid #414043; color:#c8c4c0; font:10px/1.4 var(--mono); letter-spacing:.8px; text-transform:uppercase; }.case-video { grid-column:span 1; aspect-ratio:16 / 10; }.case-video iframe { display:block; width:100%; height:100%; border:0; }.case-video__fallback { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:center; gap:13px; width:100%; height:100%; overflow:hidden; padding:28px; background:#19181a; color:var(--paper); font-size:19px; font-weight:700; line-height:1.25; text-decoration:none; }.case-video__fallback::after { position:absolute; z-index:-1; inset:0; content:''; background:linear-gradient(90deg,rgba(19,18,20,.92),rgba(19,18,20,.56)),linear-gradient(0deg,rgba(19,18,20,.65),transparent); }.case-video__thumbnail { position:absolute; z-index:-2; inset:0; width:100%; height:100%; aspect-ratio:auto!important; object-fit:cover; filter:saturate(.85) contrast(1.04); }.case-video__fallback::before { width:42px; height:30px; border-radius:7px; content:'▶'; display:grid; place-items:center; background:#f03b46; color:#fff; font-size:13px; }.case-video__fallback span { color:#f2eeea; font:10px var(--mono); letter-spacing:1px; text-transform:uppercase; }
.case-performance { display:grid; grid-template-columns:minmax(0,.82fr) minmax(360px,1.18fr); gap:7vw; padding:110px 8vw; background:var(--paper); color:var(--ink); }.case-performance__copy { max-width:630px; }.case-performance__copy .eyebrow { color:#5d5854; }.case-performance__copy h2 { margin:24px 0 28px; font-size:clamp(40px,4.8vw,68px); letter-spacing:-.065em; line-height:.92; }.case-performance__copy h2 em { color:var(--red); font-family:var(--serif); font-weight:600; }.case-performance__copy>p { margin:0 0 19px; font-size:17px; line-height:1.7; }.case-performance__scores { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:38px 0 22px; padding:0; list-style:none; }.case-performance__scores li { display:grid; gap:6px; padding:14px 8px; border-top:2px solid var(--red); background:#e3ded6; }.case-performance__scores strong { font-size:clamp(25px,3vw,40px); letter-spacing:-.07em; line-height:1; }.case-performance__scores span { font:9px/1.35 var(--mono); letter-spacing:.55px; text-transform:uppercase; }.case-performance__note { color:#615b56; font-size:13px!important; line-height:1.55!important; }.case-performance__audit { align-self:center; margin:0; overflow:hidden; border:1px solid #cbc5bd; background:#201f21; box-shadow:0 24px 55px rgba(18,17,17,.17); }.case-performance__audit img { display:block; width:100%; height:auto; }.case-performance__audit figcaption { padding:14px 18px; border-top:1px solid #cbc5bd; background:#f8f6f2; color:#615b56; font:10px/1.5 var(--mono); letter-spacing:.45px; }
.next-case { padding:90px 8vw; background:#1b1a1c; }.next-case p { margin:0 0 22px; color:#b9b5b1; font:10px var(--mono); letter-spacing:1px; text-transform:uppercase; }.next-case h2 { max-width:750px; margin:0; font-size:clamp(42px,6vw,84px); letter-spacing:-.065em; line-height:.9; }.next-case a { display:inline-block; margin-top:28px; padding:14px 17px; background:var(--red); color:var(--ink); font:10px var(--mono); letter-spacing:1px; text-decoration:none; text-transform:uppercase; }
.is-lightbox-trigger { cursor:zoom-in; }.is-lightbox-trigger:focus-visible { outline:3px solid var(--red); outline-offset:4px; }.lightbox-open { overflow:hidden; }.lightbox { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:30px; }.lightbox[hidden] { display:none; }.lightbox__backdrop { position:absolute; inset:0; background:rgba(7,7,8,.9); backdrop-filter:blur(9px); }.lightbox__dialog { position:relative; z-index:1; display:flex; flex-direction:column; width:min(1100px,100%); max-height:100%; }.lightbox__close { align-self:flex-end; display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:8px 0; border:0; background:transparent; color:var(--paper); cursor:pointer; font:10px var(--mono); letter-spacing:1px; text-transform:uppercase; }.lightbox__close span { display:grid; width:27px; height:27px; place-items:center; border:1px solid #8b8785; border-radius:50%; font:22px/1 var(--sans); }.lightbox__content { display:grid; place-items:center; min-height:0; overflow:auto; background:#111112; }.lightbox__content img { display:block; max-width:100%; max-height:calc(100vh - 110px); object-fit:contain; }.lightbox__content iframe { display:block; width:min(100%,1000px); aspect-ratio:16 / 9; border:0; }.lightbox__video-link { display:grid; width:min(100%,700px); min-height:290px; place-items:center; padding:36px; background:radial-gradient(circle at 70% 30%,#542145 0,transparent 44%),#19181a; color:var(--paper); font-size:clamp(20px,3vw,35px); font-weight:700; text-align:center; text-decoration:none; }
.work-list { padding:155px 8vw 100px; background:var(--paper); color:var(--ink); }.work-list h1 { margin:28px 0 60px; font-size:clamp(60px,9vw,126px); letter-spacing:-.075em; line-height:.85; }.work-list h1 em { color:var(--red); font-family:var(--serif); }.work-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }.work-card { position:relative; isolation:isolate; min-height:320px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; padding:28px; background:#1b1a1c; color:var(--paper); text-decoration:none; transition:transform .2s,background .2s; }.work-card::before { position:absolute; z-index:-1; inset:0; content:''; background:linear-gradient(90deg,rgba(16,16,18,.96) 0%,rgba(16,16,18,.84) 47%,rgba(16,16,18,.5) 100%),linear-gradient(0deg,rgba(16,16,18,.66) 0%,transparent 55%); transition:background .25s ease; }.work-card>img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.78) contrast(1.05); transition:transform .45s ease,filter .45s ease; }.work-card:hover { transform:translateY(-4px); background:#29282a; }.work-card:hover::before { background:linear-gradient(90deg,rgba(16,16,18,.9) 0%,rgba(16,16,18,.7) 48%,rgba(16,16,18,.32) 100%),linear-gradient(0deg,rgba(16,16,18,.52) 0%,transparent 55%); }.work-card:hover>img { transform:scale(1.035); filter:saturate(1) contrast(1.03); }.work-card span,.work-card div { position:relative; z-index:1; }.work-card span { color:#ff3b45; font:10px var(--mono); letter-spacing:1px; }.work-card h2 { max-width:470px; margin:40px 0 0; font-size:clamp(32px,4vw,54px); letter-spacing:-.06em; line-height:.92; }.work-card p { max-width:430px; margin:18px 0 0; color:#e1ddd8; line-height:1.5; }
.work-card--iron-mountain { background:#1d2d3a; }.work-card--iron-mountain>img { object-fit:contain; padding:38px; filter:grayscale(1) brightness(2.6) contrast(.75); opacity:.52; }.work-card--iron-mountain:hover>img { filter:grayscale(.25) brightness(2) contrast(.9); }
footer { height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 4.4vw; border-top:1px solid #343334; background:#151517; color:#a09d99; font:9px var(--mono); letter-spacing:.9px; } footer a { text-decoration:none; } footer b { color:var(--red); }
@media(max-width:760px){ body.menu-open{overflow:hidden}.topbar{height:75px;padding:0 6vw}.brand img{width:122px}.topbar nav{position:fixed;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;margin:0;padding:100px 8vw 12vh;background:rgba(17,17,18,.98);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4%);transition:opacity .22s,transform .22s,visibility .22s}.topbar.nav-open nav{opacity:1;visibility:visible;pointer-events:auto;transform:none}.topbar nav a{opacity:1;font:700 clamp(32px,10vw,48px)/1 var(--sans);letter-spacing:-.06em;text-transform:none}.menu-toggle{position:relative;z-index:31;display:grid;width:38px;height:38px;gap:6px;margin-left:auto;padding:9px 3px;border:0;background:transparent}.menu-toggle i{display:block;width:100%;height:1px;align-self:center;background:#fff;transform-origin:center;transition:transform .2s}.topbar.nav-open .menu-toggle i:first-of-type{transform:translateY(3.5px) rotate(45deg)}.topbar.nav-open .menu-toggle i:last-of-type{transform:translateY(-3.5px) rotate(-45deg)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.contact-pill{display:none}.case-hero{display:block;min-height:0;padding:125px 6vw 65px}.case-media{margin-top:45px;min-height:220px}.case-media img{min-height:220px}.case-body{display:block;padding:72px 6vw}.case-facts{margin-top:45px}.case-gallery{display:block;padding:72px 6vw}.case-gallery__heading{display:block;margin-bottom:30px}.case-gallery__heading p{margin-bottom:14px}.case-gallery figure,.case-video{margin:0 0 18px}.case-gallery img{height:auto;aspect-ratio:auto}.next-case,.work-list{padding:72px 6vw}.work-list h1{margin-bottom:42px}.work-cards{grid-template-columns:1fr}.work-card{min-height:265px}.lightbox{padding:16px}.lightbox__content img{max-height:calc(100vh - 90px)}.lightbox__video-link{min-height:220px}footer{height:auto;min-height:72px;padding:16px 6vw}footer span:nth-child(2){display:none}footer a{margin-left:auto}}
@media(max-width:760px){.case-performance{display:block;padding:72px 6vw}.case-performance__audit{margin-top:42px}}