@font-face{font-family:Neue Montreal;src:url('assets/neue-montreal-regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Neue Montreal;src:url('assets/neue-montreal-medium.woff2') format('woff2');font-weight:500;font-display:swap}@font-face{font-family:Neue Montreal;src:url('assets/neue-montreal-bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--ink:#111111;--paper:#fff;--muted:#666666;--line:#e4e4e4;--gutter:clamp(22px,3.2vw,64px);--ease:cubic-bezier(.23,1,.32,1)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Neue Montreal,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}a:focus-visible,button:focus-visible{outline:2px solid #7151dc;outline-offset:7px}::selection{background:#d9fba0;color:var(--ink)}.skip-link{position:fixed;top:10px;left:10px;z-index:20;padding:12px;background:white;transform:translateY(-160%)}.skip-link:focus{transform:none}.header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);position:relative;z-index:5}.brand{width:128px}.brand img{width:100%;height:auto}.header nav{display:flex;gap:34px;align-items:center}.header nav a{font-size:16px;padding:12px 0;position:relative}.header nav a:after{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ease)}.header nav a:hover:after{transform:scaleX(1)}.header nav span{display:inline-block;margin-left:5px}.hero{overflow-x:hidden;overflow-x:clip;min-height:calc(100svh - 100px);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px var(--gutter) 36px}.hero-intro{font-size:clamp(16px,1.5vw,22px);line-height:1.25;letter-spacing:-.025em;position:relative;z-index:1}.mobile-break{display:none}.hero-art{width:clamp(min(560px,88vw),calc((100svh - 380px) * 1.5),min(1180px,88vw));margin:8px auto 0;overflow:hidden}.hero-art img{width:100%;height:auto}.hero h1{font-size:clamp(32px,4vw,64px);font-weight:400;letter-spacing:-.04em;line-height:1.05;margin-top:0}.hero h1 strong{font-weight:700}.explore{display:inline-flex;align-items:center;gap:10px;height:48px;margin-top:60px;padding:0 20px 0 24px;border:1px solid #d3d3d3;border-radius:999px;font-size:15px;letter-spacing:-.015em;line-height:1;color:var(--muted);transition:border-color 200ms ease,color 200ms ease,scale 160ms var(--ease)}.explore span:last-child{display:block;font-size:15px;transform:translateY(.04em);transition:transform 220ms var(--ease)}.explore:active{scale:.97}@media(hover:hover) and (pointer:fine){.explore:hover{border-color:var(--ink);color:var(--ink)}.explore:hover span:last-child{transform:translateY(3px)}}.section-pad{padding:0 var(--gutter)}.section-label{display:flex;justify-content:space-between;align-items:center;padding:52px 0 22px;border-top:1px solid var(--line)}.section-label h2,.section-label span{font-size:14px;font-weight:400}.section-label span{color:var(--muted)}.project{margin-bottom:40px}.project-art{position:relative;aspect-ratio:1.9;overflow:hidden;padding:30px;display:flex;flex-direction:column;justify-content:space-between}.kamakura{background:#e8e9e2}.project-kicker,.project-bottom{font-size:14px;position:relative;z-index:1}.kamakura-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.kamakura-mark>span{font-size:clamp(90px,22vw,350px);font-family:serif;color:#cfd0c6;letter-spacing:-.08em;line-height:1}.kamakura-mark>p{position:absolute;font-size:clamp(44px,8.5vw,145px);letter-spacing:-.045em;color:#111111}.project-caption{padding-top:16px;display:flex;justify-content:space-between;align-items:baseline;gap:14px}.project-caption h3{font-size:21px;font-weight:500;letter-spacing:-.03em}.project-caption>span{font-size:14px;color:var(--muted)}.about{padding-top:105px;padding-bottom:130px;text-align:center}.eyebrow{font-size:14px;margin-bottom:32px}.about h2{font-size:clamp(40px,6.5vw,100px);font-weight:400;line-height:1.03;letter-spacing:-.04em}.about h2>span{color:#808080}.about-copy{max-width:720px;font-size:clamp(18px,1.7vw,24px);line-height:1.45;letter-spacing:-.025em;margin:40px auto 0}.contact{background:var(--ink);color:white;text-align:center;padding:100px var(--gutter)}.contact h2{font-weight:400;font-size:clamp(36px,5vw,78px);letter-spacing:-.045em;line-height:1.1}.contact>p:not(.eyebrow){font-size:clamp(20px,2vw,30px);margin-top:12px;color:#bababa;letter-spacing:-.025em}.contact .eyebrow{color:#b0b0b0}.contact-link{display:flex;justify-content:space-between;align-items:center;text-align:left;background:white;color:var(--ink);max-width:730px;margin:48px auto 24px;padding:27px 32px;font-size:clamp(22px,2.5vw,38px);letter-spacing:-.04em;transition:background-color 200ms,transform 180ms var(--ease)}.contact-link:hover{background:#d9fba0}.contact-link:active{transform:scale(.985)}.contact-link span{transition:transform 220ms var(--ease)}.contact-link:hover span{transform:translate(4px,-4px)}.footer{padding:70px var(--gutter) 24px}.footer>p{text-align:center;font-size:16px;margin-bottom:65px}.footer-logo{width:100%;height:auto}.footer-meta{display:flex;justify-content:space-between;margin-top:34px;font-size:13px;color:var(--muted)}
@media(min-width:1600px){.hero{padding-top:45px;padding-bottom:55px}}@media(max-width:700px){.header{height:82px}.brand{width:108px}.header nav{gap:22px}.header nav a{font-size:14px}.header nav span{display:none}.hero{min-height:650px;min-height:calc(88svh - 82px);padding-top:30px;padding-bottom:42px}.hero-intro{font-size:17px}.mobile-break{display:block}.hero-art{width:calc(100% + 36px);margin:36px -18px 28px}.hero h1{max-width:360px;font-size:clamp(27px,7.5vw,40px);line-height:1.05}.hero h1 strong{display:block}.explore{margin-top:46px}.section-label{padding-top:30px}.section-label>span{display:none}.project-art{aspect-ratio:1.1;padding:22px}.kamakura-mark>span{font-size:36vw}.kamakura-mark>p{font-size:14vw}.project-kicker,.project-bottom{font-size:12px}.project-caption{align-items:flex-start}.project-caption h3{font-size:20px}.project-caption>span{font-size:13px;text-align:right;max-width:150px}.about{padding-top:65px;padding-bottom:80px}.about h2{font-size:49px}.about-copy{font-size:19px;margin-top:30px}.contact{padding:75px var(--gutter)}.contact h2{max-width:340px;margin:auto}.contact-link{padding:22px;margin-top:32px}.footer{padding-top:50px}.footer>p{max-width:250px;margin:0 auto 45px;line-height:1.35}.footer-meta{font-size:12px;margin-top:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.project-list{display:grid;gap:24px}.project-list .project{margin:0}.project-placeholder{background:var(--ink);color:#fff;aspect-ratio:1.95;padding:32px 36px}.project-placeholder .project-kicker{color:#9d9d9d}.coming-soon{font-size:clamp(36px,5.2vw,82px);letter-spacing:-.045em;line-height:1.03;max-width:850px}.coming-soon em{font-style:normal;color:#aeaeae}.placeholder-bottom{display:flex;justify-content:space-between;align-items:center;color:#9d9d9d;font-size:14px}.placeholder-bottom>span:last-child{font-size:28px;color:#e1e1e1}.about{padding-bottom:65px}.process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding-bottom:120px}.process-visual{aspect-ratio:1.35;position:relative;overflow:hidden;background:#f0f0f0;color:#111111}.process-visual svg{width:100%;height:100%;stroke:currentColor;stroke-width:2.25}.process-visual>span{position:absolute;left:20px;bottom:18px;font-size:13px;color:#6c6c6c}.process-visual .guide{stroke:#cccccc;stroke-width:1;stroke-dasharray:3 6}.angle-moving,.shape-one,.shape-two,.life-moving{transform-box:fill-box;transform-origin:center;transition:transform 650ms var(--ease)}.shape{background:#eceee8}.life{background:#eeebf1}.process-item h3{font-size:25px;letter-spacing:-.035em;font-weight:400;margin:23px 18px 10px}.process-item>p{font-size:17px;line-height:1.45;max-width:340px;margin:0 18px;color:#4a4a4a}.studio-stamp{font-weight:700;text-align:center;font-size:20px;line-height:.85;letter-spacing:-.08em;border:2px solid currentColor;border-radius:50%;width:65px;height:65px;display:flex;flex-direction:column;justify-content:center;margin:0 auto 20px;transform:rotate(-12deg)}.hero-art img{will-change:transform}.motion-ready .reveal{opacity:0;transform:translateY(18px);transition:opacity 650ms var(--ease),transform 650ms var(--ease)}.motion-ready .reveal.is-visible{opacity:1;transform:translateY(0)}.intro-enter{animation:arrive 650ms var(--ease) both}.hero-art.intro-enter{animation-delay:70ms}.hero h1.intro-enter{animation-delay:140ms}.explore.intro-enter{animation-delay:220ms}@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.process-item:hover .angle-moving{transform:rotate(-12deg)}.process-item:hover .shape-one{transform:translateX(-12px)}.process-item:hover .shape-two{transform:rotate(12deg)}.process-item:hover .life-moving{transform:rotate(22.5deg)}}
@media(max-width:700px){.project-list{gap:16px}.project-placeholder{aspect-ratio:1.12;padding:22px}.coming-soon{font-size:36px}.placeholder-bottom{font-size:12px}.process{grid-template-columns:1fr;padding-bottom:80px;gap:40px}.process-visual{aspect-ratio:1.5}.process-item h3{margin:18px 0 8px}.process-item>p{margin:0;font-size:18px}.about{padding-bottom:45px}.studio-stamp{width:58px;height:58px;font-size:18px}.footer .studio-stamp+p{margin-bottom:45px}}
@media(prefers-reduced-motion:reduce){.motion-ready .reveal{opacity:1;transform:none}.hero-art img{will-change:auto}}

.studio-stamp{border:0;border-radius:0;transform:none;width:76px;height:76px;display:block}

/* Studio signature between contact and footer. */
.pre-footer-badge{display:flex;justify-content:center;padding:64px var(--gutter) 0}
.pre-footer-badge .studio-stamp{width:83px;height:83px;margin:0;will-change:transform}
.pre-footer-badge + .footer{padding-top:12px}
@media(max-width:700px){.pre-footer-badge{padding-top:44px}.pre-footer-badge .studio-stamp{width:70px;height:70px}.pre-footer-badge + .footer{padding-top:10px}}

/* Equal-size layers keep the headline still as its final word changes. */
.rotating-word{display:inline-grid;justify-items:start;vertical-align:bottom;text-align:left;padding:.2em 3em;margin:-.2em -3em;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 .2em,#000 calc(100% - .2em),transparent);mask-image:linear-gradient(transparent,#000 .2em,#000 calc(100% - .2em),transparent);transition:width 700ms var(--ease)}
.rotating-word .word{grid-area:1/1;white-space:nowrap;opacity:0;transform:translateY(130%)}
.rotating-word .word.is-current{opacity:1;transform:translateY(0);transition:transform 700ms var(--ease),opacity 350ms var(--ease)}
.rotating-word .word.is-leaving{opacity:1;transform:translateY(-130%);transition:transform 700ms var(--ease)}
@media(max-width:700px){.hero h1{max-width:none;width:100%}.hero h1 strong{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.rotating-word,.rotating-word .word,.rotating-word .word.is-current,.rotating-word .word.is-leaving{transition:none}}

/* Floating glass navigation: full-width at the top, a glass pill once the page scrolls. */
:root{--glass-tint:rgba(255,255,255,.34);--glass-rim:rgba(255,255,255,.9);--nav-ink:var(--ink)}
.header{position:sticky;top:0;z-index:10;height:100px;padding:0;display:flex;align-items:flex-start;justify-content:center;pointer-events:none}
.header-bar{pointer-events:auto;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;width:100%;height:100px;margin-top:0;padding:0 var(--gutter);border-radius:0;color:var(--nav-ink);transition:width 500ms var(--ease),height 500ms var(--ease),margin-top 500ms var(--ease),padding 500ms var(--ease),border-radius 500ms var(--ease),color 250ms ease}
.header-bar::before,.header-bar::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 350ms var(--ease)}
.header-bar::before{z-index:-2;background:var(--glass-tint);-webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:var(--glass-filter,blur(14px) saturate(170%));box-shadow:0 12px 32px -14px rgba(17,17,17,.28),0 1px 3px rgba(17,17,17,.06);transition:opacity 350ms var(--ease),background-color 250ms ease,backdrop-filter 250ms var(--ease),-webkit-backdrop-filter 250ms var(--ease),box-shadow 250ms var(--ease)}
.header-bar::after{z-index:-1;padding:1px;background:linear-gradient(140deg,var(--glass-rim),rgba(255,255,255,.12) 32%,rgba(255,255,255,.04) 62%,rgba(255,255,255,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.brand{transform-origin:left center;transition:transform 500ms var(--ease)}
.brand img{transition:filter 250ms ease}
.header.is-floating .header-bar{width:min(880px,calc(100% - 32px));height:64px;margin-top:14px;padding:0 30px 0 28px;border-radius:32px}
.header.is-floating .header-bar::before,.header.is-floating .header-bar::after{opacity:1}
.header.is-floating .brand{transform:scale(.86)}
.header.on-dark{--glass-tint:rgba(31,31,31,.38);--glass-rim:rgba(255,255,255,.45);--nav-ink:#fff}
.header.on-dark .brand img{filter:brightness(0) invert(1)}
.glass-defs{position:absolute;width:0;height:0;overflow:hidden}
@media(max-width:700px){.header{height:82px}.header-bar{height:82px}.header.is-floating .header-bar{width:calc(100% - 24px);height:56px;margin-top:12px;padding:0 20px;border-radius:28px}.header.is-floating .brand{transform:scale(.9)}}
@media(prefers-reduced-motion:reduce){.header-bar,.brand{transition:color 250ms ease}}

/* WebGL lens (ybouane/liquidglass) behind the floating pill. The pill's tint layer stays above it:
   clear on light pages, smoky grey over dark panels. The frosted glass is the fallback. */
:root{--lens-tint:rgba(255,255,255,.3)}
.nav-lens{position:fixed;top:14px;left:0;right:0;z-index:9;width:min(880px,calc(100% - 32px));height:64px;margin:0 auto;border-radius:32px;pointer-events:none;opacity:0;transition:opacity 200ms var(--ease)}
.nav-lens.is-on{opacity:1;transition-duration:250ms}
.header.lens-on .header-bar::before{background:var(--lens-tint);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.header.lens-on .header-bar::after{opacity:0}
.header.on-dark{--lens-tint:rgba(145,145,145,.34)}
@media(max-width:700px){.nav-lens{top:12px;width:calc(100% - 24px);height:56px;border-radius:28px}}

/* Hover: the hero art leans like jelly from just below its middle; the badge swells and ripples. */
.hero-art{position:relative}.hero-art img{will-change:auto}
.hero-warp{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;visibility:hidden}.hero-warp.is-ready{visibility:visible}

/* Contact: a full-width statement, then one action row. */
.contact{text-align:left;padding:clamp(80px,9vw,140px) var(--gutter) clamp(56px,6vw,96px)}
.contact h2{max-width:none;margin:0;font-size:clamp(40px,6.4vw,104px);font-weight:400;line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.contact h2>span{display:block;color:#878787}
.contact-actions{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:12px;align-items:center;margin-top:clamp(48px,6vw,96px)}
.contact-lead{max-width:24ch;font-size:18px;line-height:1.35;letter-spacing:-.02em;color:#bababa}
.contact .contact-link{max-width:none;margin:0;min-height:72px;padding:0 28px;font-size:clamp(20px,1.9vw,28px);letter-spacing:-.035em}
.contact-copy{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:72px;padding:0 28px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;font-size:17px;letter-spacing:-.02em;text-align:left;cursor:pointer;transition:border-color 200ms ease,background-color 200ms ease,transform 160ms var(--ease)}
.contact-copy:active{transform:scale(.985)}
.contact-copy-state{font-size:14px;color:#9d9d9d;transition:color 200ms ease}
.contact-copy.is-copied .contact-copy-state{color:#d9fba0}
@media(hover:hover) and (pointer:fine){.contact-copy:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.05)}.contact-copy:hover .contact-copy-state{color:#fff}.contact-copy.is-copied:hover .contact-copy-state{color:#d9fba0}}
@media(hover:none){.contact .contact-link:hover{background:#fff}.contact .contact-link:hover span{transform:none}}
@media(max-width:1024px){.contact{padding-top:96px}.contact h2{font-size:clamp(44px,8.4vw,86px)}.contact-actions{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}.contact-lead{grid-column:1/-1;max-width:none;margin-bottom:12px}}
@media(max-width:700px){.contact{padding:72px var(--gutter) 56px}.contact h2{font-size:clamp(38px,10.5vw,56px)}.contact-actions{grid-template-columns:1fr;margin-top:40px}.contact .contact-link{min-height:68px;padding:0 22px}.contact-copy{min-height:60px;padding:0 22px;font-size:16px}}

/* About + process share one 12-column grid: a left-aligned statement, the copy offset to the
   right half, then the steps as rows whose descriptions start on the same column line. */
.about,.process-item{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px)}
.about{text-align:left;padding-top:clamp(72px,7vw,112px);padding-bottom:clamp(48px,5vw,80px)}
.about h2{grid-column:1/7;align-self:end;align-self:last baseline;font-size:clamp(44px,5.6vw,92px);line-height:1;letter-spacing:-.045em}
.about-copy{grid-column:7/-1;align-self:end;align-self:last baseline;max-width:46ch;margin:0;font-size:clamp(18px,1.45vw,22px);line-height:1.5;letter-spacing:-.01em;color:#343434}
.process{display:block;padding-bottom:clamp(64px,6vw,96px)}
.process-item{align-items:start;padding:clamp(18px,1.8vw,28px) 0;border-top:1px solid var(--line)}
.process-title{grid-column:1/7;display:flex;align-items:baseline;gap:clamp(16px,2vw,32px)}
.process-index{flex:none;width:2.2em;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.process-item h3{margin:0;font-size:clamp(26px,2.6vw,40px);font-weight:400;line-height:1.05;letter-spacing:-.04em}
.process-item>p{grid-column:7/10;max-width:30ch;margin:0;padding-top:.35em;font-size:17px;line-height:1.5;letter-spacing:-.01em;color:#4a4a4a}
.process-item .process-visual{grid-column:10/-1;aspect-ratio:2}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.process-item h3{transition:transform 450ms var(--ease)}.process-item:hover h3{transform:translateX(6px)}}
@media(max-width:1024px){.process-item{grid-template-rows:auto 1fr}.process-title{grid-column:1/8;flex-direction:column;gap:12px}.process-item>p{grid-column:1/8;grid-row:2;padding-top:14px}.process-item .process-visual{grid-column:8/-1;grid-row:1/3}.about h2{grid-column:1/-1;font-size:clamp(44px,7.4vw,76px)}.about-copy{grid-column:5/-1;margin-top:clamp(28px,4vw,44px)}}
@media(max-width:700px){.process-item{grid-template-rows:none}.about{padding-top:72px;padding-bottom:56px}.about h2{font-size:clamp(40px,11.5vw,56px)}.about-copy{grid-column:1/-1;margin-top:28px;font-size:18px}.process-item{grid-template-columns:1fr;row-gap:0;padding:20px 0 32px}.process-item .process-visual{grid-column:1;grid-row:1;aspect-ratio:2.2;margin-bottom:16px}.process-title{grid-column:1;grid-row:2;gap:8px}.process-item>p{grid-column:1;grid-row:3;max-width:none;padding-top:10px;font-size:17px}.process-item h3{font-size:28px}}
.about-copy,.process-item>p,.contact-lead{text-wrap:pretty}

/* Project page: details and contents in a sticky sidebar, the story on the right, on the site's 12-column grid. */
.case{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px);padding-top:clamp(16px,2vw,32px);padding-bottom:clamp(64px,6vw,96px)}
.case-side{grid-column:1/4;position:sticky;top:112px;align-self:start;max-height:calc(100svh - 128px);overflow-y:auto;margin-left:-6px;padding:0 0 24px 6px;scrollbar-width:none}
.case-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;padding:6px 0;font-size:14px;color:var(--muted);transition:color 200ms ease}
.case-back span{display:inline-block;transition:transform 220ms var(--ease)}
.case-title{font-size:clamp(36px,3.4vw,56px);font-weight:400;line-height:1;letter-spacing:-.045em}
.case-summary{max-width:24ch;margin-top:12px;font-size:18px;line-height:1.35;letter-spacing:-.02em;color:var(--muted)}
.case-meta{display:grid;gap:10px;margin:28px 0 0;font-size:14px}
.case-meta div{display:grid;grid-template-columns:76px 1fr;gap:12px}
.case-meta dt{color:var(--muted)}
.case-meta dd{margin:0}
.case-toc{margin-top:36px;padding-top:20px;border-top:1px solid var(--line)}
.case-toc ol{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.case-toc a{display:flex;align-items:center;padding:5px 0;font-size:15px;letter-spacing:-.01em;color:var(--muted);transition:color 200ms ease}
.case-toc a::before{content:'';width:0;height:1px;margin-right:0;background:currentColor;transition:width 250ms var(--ease),margin-right 250ms var(--ease)}
.case-toc a[aria-current]{color:var(--ink)}
.case-toc a[aria-current]::before{width:14px;margin-right:10px}
.case-body{grid-column:4/-1;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px);row-gap:clamp(12px,1.2vw,20px);align-content:start}
.case-body>*{grid-column:1/-1}
.case-section{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-columns:subgrid;padding:clamp(56px,6vw,96px) 0 clamp(36px,3.6vw,56px)}
.case-section h2{grid-column:1/4;font-size:clamp(22px,1.8vw,28px);font-weight:400;line-height:1.15;letter-spacing:-.03em}
.case-copy{grid-column:4/-1;max-width:58ch}
.case-copy p{font-size:clamp(17px,1.35vw,20px);line-height:1.5;letter-spacing:-.01em;color:#343434;text-wrap:pretty}
.case-copy p+p{margin-top:1em}
.case-quote{margin:40px 0 0;padding:0}
.case-quote p{font-size:clamp(24px,2.2vw,32px);line-height:1.2;letter-spacing:-.035em;color:var(--ink)}
.case-quote footer{margin-top:16px;font-size:14px;color:var(--muted)}
.case-tile{display:flex;align-items:center;justify-content:center;min-height:0;background:#f0f0f0;color:#9d9d9d;font-size:13px;letter-spacing:-.01em}
.case-tile.tone-sage{background:#eceee8}
.case-tile.tone-lilac{background:#eeebf1}
.case-tile.tone-ink{background:var(--ink);color:#808080}
.r-16x9{aspect-ratio:16/9}.r-21x9{aspect-ratio:21/9}.r-4x5{aspect-ratio:4/5}.r-3x4{aspect-ratio:3/4}.r-4x3{aspect-ratio:4/3}.r-1x1{aspect-ratio:1}
.case-grid{display:grid;gap:clamp(12px,1.2vw,20px)}
.grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-mosaic{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:1fr 1fr}
.grid-mosaic>:first-child{grid-row:1/3}
.case-next{display:block}
.case-next a{display:grid;gap:12px;padding:clamp(40px,5vw,72px) 0 clamp(64px,7vw,112px);border-top:1px solid var(--line)}
.case-next-label{font-size:14px;color:var(--muted)}
.case-next-title{font-size:clamp(44px,7vw,112px);line-height:1;letter-spacing:-.045em}
.case-next-title span{display:inline-block;transition:transform 300ms var(--ease)}
.project-art.project-placeholder .placeholder-bottom>span:last-child{transition:transform 220ms var(--ease)}
@media(hover:hover) and (pointer:fine){.case-back:hover{color:var(--ink)}.case-back:hover span{transform:translateX(-3px)}.case-toc a:hover{color:var(--ink)}.case-next a:hover .case-next-title span{transform:translateX(10px)}.project-art.project-placeholder:hover .placeholder-bottom>span:last-child{transform:translate(4px,-4px)}}
@media(max-width:1024px){.case-side{grid-column:1/-1;position:static;max-height:none;overflow:visible;margin-bottom:clamp(32px,5vw,48px)}.case-meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.case-meta div{grid-template-columns:1fr;gap:4px}.case-toc{display:none}.case-body{grid-column:1/-1}}
@media(max-width:700px){.case-section{grid-template-columns:1fr;padding:48px 0 28px}.case-section h2{grid-column:1;margin-bottom:14px}.case-copy{grid-column:1}.case-meta{grid-template-columns:1fr}.case-meta div{grid-template-columns:76px 1fr;gap:12px}.grid-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto}.grid-mosaic>:first-child{grid-column:1/-1;grid-row:auto}.grid-mosaic>:not(:first-child){aspect-ratio:1}}

/* Navbar hover: one soft pill that slides between links, clipped with clip-path so it stays on the GPU. */
.header nav{position:relative}
.header nav a{z-index:1;padding:10px 14px;margin:0 -14px}
.header nav a::after{content:none}
.header nav a span{transition:transform 220ms var(--ease)}
.nav-hover{position:absolute;top:0;bottom:0;left:-14px;right:-14px;border-radius:999px;background:rgba(17,17,17,.06);pointer-events:none;opacity:0;clip-path:inset(0 100% 0 0 round 999px);transition:clip-path 320ms var(--ease),opacity 180ms ease,background-color 250ms ease}
.nav-hover.is-visible{opacity:1}
.header.on-dark .nav-hover{background:rgba(255,255,255,.14)}
@media(hover:hover) and (pointer:fine){.header nav a:hover span{transform:translate(2px,-2px)}}
@media(prefers-reduced-motion:reduce){.nav-hover{transition:opacity 180ms ease,background-color 250ms ease}}
.header nav .nav-hover{display:block;margin:0}

/* Project page, desktop: the floating bar spans the grid, so the logo sits on the sidebar's left edge
   and the links end on the content's right edge. The bar keeps 16px from the window. */
@media(min-width:1025px){.page-case .header.is-floating .header-bar{width:calc(100% - 32px);padding:0 max(20px,calc(var(--gutter) - 16px))}.page-case .nav-lens{width:calc(100% - 32px)}}
/* Feather the hero frame's edges so the shifted image never shows a hard clip line against the page. */
.hero-art{-webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
.about h2 strong{color:var(--ink);font-weight:700}
/* Footer wordmark stretches open from its top edge as it scrolls into view, tied to the scroll. */
@keyframes wordmark-stretch{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){.footer-logo{transform-origin:50% 0;animation:wordmark-stretch auto linear both;animation-timeline:view();animation-range:entry 0% entry 100%}}}
/* Larger hero art on desktop, still fitting the first screen with the "Step into the patio" pill. */
@media(min-width:701px){.hero-art{width:clamp(min(560px,88vw),calc((100svh - 250px) * 1.3),min(1320px,92vw))}.hero{padding-top:16px}.explore{margin-top:40px}}

/* Real project media: tiles keep their ratio, media fills them. */
.case-tile{position:relative;overflow:hidden}
.case-tile>img,.case-tile>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}

/* Selected work panel with real artwork. */
.project-case{justify-content:flex-end;color:var(--ink)}
.project-case[data-nav-dark]{color:#fff}
.project-art-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project-name{position:relative;z-index:1;font-size:14px;line-height:1}
.case-swatches{display:grid;gap:clamp(12px,1.2vw,20px)}
.case-swatch{display:grid;grid-template-columns:1fr auto;align-items:baseline;align-content:end;column-gap:16px;aspect-ratio:5/1;padding:clamp(16px,1.8vw,28px);font-size:clamp(24px,2.4vw,36px);line-height:1;letter-spacing:-.04em}
.case-swatch span:last-child{font-size:clamp(16px,1.4vw,22px);letter-spacing:-.02em}
.swatch-ink{background:#252222;color:#efd8d8}
.swatch-mist{background:#efd8d8;color:#252222}
.swatch-stone{background:#c8c0ba;color:#252222}
@media(max-width:700px){.grid-stack-sm{grid-template-columns:1fr}.r-sm-1x1{aspect-ratio:1}.case-swatch{aspect-ratio:3/1;padding:16px 18px;font-size:26px}.case-swatch span:last-child{font-size:17px}}
.case-back svg{display:block;width:16px;height:12px}
.case-credit{margin-top:2px;font-size:12px;line-height:1.4;color:var(--muted)}
.grid-capsules{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-capsule{position:relative;display:grid;grid-template-columns:1fr auto;align-items:baseline;align-content:end;column-gap:12px;aspect-ratio:4/3;padding:clamp(16px,1.8vw,28px);overflow:hidden;background:#000;color:#fff;font-size:clamp(22px,2vw,30px);line-height:1;letter-spacing:-.04em}
.case-capsule img{position:absolute;top:10%;left:0;width:100%;height:64%;object-fit:contain}
.case-capsule span{position:relative}
.case-capsule span:last-of-type{font-size:clamp(16px,1.3vw,20px);letter-spacing:-.02em}
@media(max-width:700px){.grid-capsules{grid-template-columns:1fr}.case-capsule{aspect-ratio:2/1;padding:16px 18px;font-size:26px}.case-capsule img{top:8%;height:66%}.case-capsule span:last-of-type{font-size:17px}}
.case-tile.tone-line::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.swatch-black{background:#161616;color:#fff}
.swatch-amber{background:#eaaf66;color:#161616}
.swatch-white{background:#fff;color:#161616;box-shadow:inset 0 0 0 1px var(--line)}