:root{--portfolio-dark:#20221e;--portfolio-paper:#f0eee8;--portfolio-olive:#545c47;--portfolio-ink:#242522}
.skip-link{position:fixed;top:8px;left:8px;z-index:9999;background:#fff;color:#111;padding:10px 14px;transform:translateY(-150%)}.skip-link:focus{transform:none}
.portfolio-page{background:var(--portfolio-paper);color:var(--portfolio-ink)}.portfolio-header{position:fixed}.desktop-nav a.active{color:var(--portfolio-olive)}
.portfolio-hero{min-height:100svh;position:relative;background:var(--portfolio-dark);color:#fff;overflow:hidden}.portfolio-hero-media{position:absolute;inset:0 0 0 33%;overflow:hidden}.portfolio-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--portfolio-dark) 0,rgba(32,34,30,.78) 15%,rgba(32,34,30,.08) 65%),linear-gradient(0deg,rgba(10,12,9,.38),transparent 55%)}.portfolio-hero-media img{width:100%;height:100%;object-fit:cover;display:block;animation:hero-in 1.4s cubic-bezier(.2,.7,.2,1) both}.portfolio-hero-copy{position:absolute;z-index:2;left:var(--pad);bottom:10vh;width:min(760px,62vw)}.portfolio-hero h1{font:400 clamp(54px,7.5vw,122px)/.91 Manrope,Arial,sans-serif;letter-spacing:-.055em;margin:22px 0 28px;text-wrap:balance}.portfolio-hero-copy>p:not(.eyebrow){max-width:560px;color:rgba(255,255,255,.72);font-size:clamp(16px,1.3vw,20px);line-height:1.6}.portfolio-scroll{display:flex;align-items:center;gap:18px;margin-top:42px;color:#fff;text-decoration:none;width:max-content}.portfolio-scroll span{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.45);border-radius:50%;font-size:12px}.portfolio-scroll b{font-size:12px;text-transform:uppercase;letter-spacing:.16em}.portfolio-scroll:hover span{background:#fff;color:#20221e}
.portfolio-manifesto{display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,2.2fr);gap:8vw;padding:clamp(90px,12vw,180px) var(--pad)}.portfolio-manifesto h2{font:400 clamp(38px,5vw,76px)/1.04 Manrope,Arial,sans-serif;letter-spacing:-.045em;max-width:1040px;margin:0}.portfolio-manifesto>div>p{margin:35px 0 0;max-width:720px;color:#686a64;line-height:1.75}
.case{padding:clamp(90px,10vw,160px) var(--pad);border-top:1px solid rgba(36,37,34,.18)}.case-dark{background:var(--portfolio-dark);color:#fff}.case-head{display:grid;grid-template-columns:.65fr 1fr 1fr;gap:5vw;align-items:start;margin-bottom:clamp(55px,7vw,100px)}.case-head>div p{margin:18px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#6a6d65}.case-dark .case-head>div p{color:rgba(255,255,255,.58)}.case-index{font:500 11px Manrope,Arial,sans-serif;letter-spacing:.16em}.case-head h2{margin:0;font:400 clamp(50px,6.3vw,102px)/.9 Manrope,Arial,sans-serif;letter-spacing:-.055em}.case-head>p{margin:0;max-width:510px;color:#666961;line-height:1.75}.case-dark .case-head>p{color:rgba(255,255,255,.65)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,16px)}.compare figure{margin:0;position:relative;height:clamp(420px,58vw,880px);overflow:hidden;background:#d7d5ce}.compare img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s}.compare-before img{filter:saturate(.55) contrast(.94)}.compare figure:hover img{transform:scale(1.018)}.compare figcaption{position:absolute;left:18px;right:18px;bottom:18px;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;color:#fff;background:rgba(24,26,22,.72);backdrop-filter:blur(8px)}.compare figcaption b{font-size:12px;text-transform:uppercase;letter-spacing:.15em}.compare figcaption span{font-size:12px;color:rgba(255,255,255,.7)}
.case-actions{display:flex;justify-content:space-between;align-items:center;padding:28px 0 0}.case-actions p{margin:0;color:#777a72;font-size:12px;text-transform:uppercase;letter-spacing:.12em}.case-actions p b{color:inherit;font-size:18px;margin-right:7px}.case-dark .case-actions p{color:rgba(255,255,255,.58)}.archive-button{appearance:none;border:0;border-bottom:1px solid currentColor;background:transparent;color:inherit;padding:10px 0;display:flex;align-items:center;gap:20px;cursor:pointer;font:500 12px Manrope,Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em}.archive-button i{width:16px;height:16px;position:relative}.archive-button i:before,.archive-button i:after{content:"";position:absolute;background:currentColor;left:0;top:7px;width:16px;height:1px}.archive-button i:after{transform:rotate(90deg);transition:transform .25s}.archive-button[aria-expanded="true"] i:after{transform:rotate(0)}
.archive{margin-top:50px}.archive-section+.archive-section{margin-top:70px}.archive-title{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid rgba(80,82,76,.25);padding-bottom:14px;margin-bottom:18px}.case-dark .archive-title{border-color:rgba(255,255,255,.18)}.archive-title h3{margin:0;font:500 13px Manrope,Arial,sans-serif;text-transform:uppercase;letter-spacing:.13em}.archive-title span{font-size:11px;opacity:.55}.archive-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.archive-thumb{appearance:none;border:0;padding:0;background:#d9d7d1;cursor:zoom-in;aspect-ratio:4/3;overflow:hidden;position:relative}.archive-thumb:nth-child(7n+1){grid-column:span 2;grid-row:span 2}.archive-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s,filter .4s}.archive-section:first-child .archive-thumb img{filter:saturate(.58)}.archive-thumb:hover img,.archive-thumb:focus-visible img{transform:scale(1.04);filter:saturate(1)}.archive-thumb:focus-visible{outline:3px solid #8d956f;outline-offset:3px}
.portfolio-cta{padding:clamp(100px,13vw,190px) var(--pad);background:var(--portfolio-olive);color:#fff}.portfolio-cta h2{margin:18px 0 22px;font:400 clamp(48px,7vw,108px)/.94 Manrope,Arial,sans-serif;letter-spacing:-.055em}.portfolio-cta>p:not(.eyebrow){max-width:620px;color:rgba(255,255,255,.75);font-size:18px;line-height:1.7}.portfolio-cta>div{display:flex;align-items:center;gap:32px;margin-top:40px}.portfolio-cta>div>a:last-child{color:#fff;text-underline-offset:6px}
.lightbox{border:0;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(16,17,15,.96);color:#fff}.lightbox::backdrop{background:rgba(16,17,15,.96)}.lightbox[open]{display:grid;grid-template-columns:80px 1fr 80px;align-items:center}.lightbox figure{margin:0;display:grid;place-items:center;gap:16px;height:100%;padding:70px 20px 35px}.lightbox img{display:block;max-width:100%;max-height:calc(100dvh - 130px);object-fit:contain}.lightbox figcaption{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.68)}.lightbox button{border:0;background:transparent;color:#fff;cursor:pointer;font-size:28px}.lightbox-close{position:absolute;top:22px;right:26px;z-index:2;width:48px;height:48px}.lightbox-prev,.lightbox-next{height:100%}
@keyframes hero-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@media(max-width:1000px){.case-head{grid-template-columns:1fr 1fr}.case-head>div{grid-column:1/-1;display:flex;justify-content:space-between}.case-head>div p{margin:0}.archive-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.portfolio-hero-media{inset:0}.portfolio-hero-media:after{background:linear-gradient(0deg,rgba(23,25,21,.94) 0,rgba(23,25,21,.35) 65%,rgba(23,25,21,.2))}.portfolio-hero-copy{width:auto;right:var(--pad);bottom:8vh}.portfolio-hero h1{font-size:clamp(48px,14vw,72px)}.portfolio-manifesto{grid-template-columns:1fr;gap:35px}.case-head{grid-template-columns:1fr;gap:25px}.case-head>div{display:flex}.compare{grid-template-columns:1fr}.compare figure{height:72vw;min-height:310px}.compare figcaption span{display:none}.case-actions{align-items:flex-end;gap:20px}.archive-grid{grid-template-columns:repeat(2,1fr)}.archive-thumb:nth-child(7n+1){grid-column:span 2}.portfolio-cta>div{align-items:flex-start;flex-direction:column}.lightbox[open]{grid-template-columns:44px 1fr 44px}.lightbox figure{padding-left:4px;padding-right:4px}}
@media(max-width:460px){.case-actions p span{display:none}.archive-button{font-size:10px}.archive-grid{gap:6px}.archive{margin-top:35px}.portfolio-scroll{margin-top:28px}}
@media(prefers-reduced-motion:reduce){.portfolio-hero-media img{animation:none}.compare img,.archive-thumb img{transition:none}}