@font-face{font-family:Satoshi;src:url('assets/satoshi-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url('assets/satoshi-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url('assets/satoshi-700.woff2') format('woff2');font-weight:700;font-display:swap}
:root{font-family:Satoshi,sans-serif;color:#272727;background:#fff;font-synthesis:none;--muted:#797d7d;--unit:calc(100vw / 1920)}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #003d3d;outline-offset:7px}h1,p,dl,dd{margin:0}button{border:0;background:none;cursor:pointer;padding:0}img{display:block;width:100%;height:100%;object-fit:cover}body.is-home{overflow:hidden}
.gallery{height:100dvh;overflow:hidden;position:relative;touch-action:pan-x}
.project-info{position:fixed;left:8.645833vw;top:50%;transform:translateY(-50%);width:19.583333vw;z-index:4;pointer-events:none}
.project-info h1{font-size:3.075469vw;font-weight:500;line-height:1.13467;letter-spacing:-.092266vw;color:#000;margin-left:-.15625vw;margin-bottom:.729167vw}
.meta{font-size:.989583vw;line-height:1.37684;letter-spacing:-.0625vw}
.meta-row{display:flex;justify-content:space-between;align-items:baseline;gap:.4vw;min-height:1.40625vw}
.meta dt{color:var(--muted);flex-shrink:0}.meta dd{text-align:right}.meta-row+.meta-row{border-top:1px solid #797d7d;margin-top:.260417vw;padding-top:.260417vw}
.project-description{position:fixed;left:75.416667vw;top:50%;transform:translateY(-50%);width:19.583333vw;font-size:.989583vw;line-height:1.37684;letter-spacing:-.0625vw;color:var(--muted);z-index:4;pointer-events:none}
.dots{position:fixed;left:1.614583vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.325vw;z-index:6}
.dot{width:.593073vw;height:.593073vw;min-width:7px;min-height:7px;border-radius:50%;background:#d9d9d9;position:relative;transition:background .18s}
.dot::before{content:'';position:absolute;inset:-.23vw -.55vw}.dot[aria-current=true]{background:#1a1813}.dot:hover{background:#797d7d}
.cards{position:absolute;inset:0;pointer-events:none}
.project-card{position:absolute;left:50%;top:50%;width:36.719531vw;height:20.7vw;will-change:transform;pointer-events:auto;border-radius:.873906vw;display:block;overflow:hidden;background:#f8f8f8}
.project-card img{object-fit:cover}.project-card:focus-visible{outline-offset:9px}
.project-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity 160ms linear}
.project-card.is-playing .project-preview{opacity:1}
.edge-fade{position:absolute;left:28%;right:28%;height:4.5vh;z-index:5;pointer-events:none}.edge-fade.top{top:0;background:linear-gradient(#fff,transparent)}.edge-fade.bottom{bottom:0;background:linear-gradient(transparent,#fff)}
.detail{min-height:100dvh;padding:9.479167vw 3.5vw 8.4vw 4.114583vw;display:grid;grid-template-columns:28.90625vw 1fr;column-gap:1.354167vw;align-items:start}
.brand{position:fixed;left:3.541667vw;top:1.979167vw;width:10.520833vw;height:3.506944vw;z-index:8}.brand img{object-fit:contain}
.detail-info{position:sticky;top:9.479167vw;align-self:start}.detail-info h1{font-size:2.604167vw;font-weight:500;line-height:1.1;letter-spacing:-.0625vw;color:#000;margin-top:-.6vw}
.detail-info .meta{margin-top:4.6875vw;width:27.5vw}.detail-info .meta-row{min-height:1.40625vw}.team-row{display:flex;justify-content:space-between;gap:.4vw;min-height:1.40625vw}.team-row+.team-row{margin-top:.260417vw}.team-name{display:block;text-align:right}.team-name small{color:var(--muted);font-size:.625vw;letter-spacing:-.038vw}
.detail-copy{margin-top:5.208333vw;color:var(--muted);font-size:1.041667vw;line-height:1.308;letter-spacing:-.0625vw}.detail-copy p+p{margin-top:1.3625vw}
.detail-media{padding-top:3.333333vw;display:flex;flex-direction:column;gap:3.333333vw;min-width:0}.detail-media figure{margin:0}.detail-media img,.detail-media video{display:block;width:100%;height:auto;aspect-ratio:1193/671;object-fit:cover}.detail-media video{background:#fff}
.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}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.lottie-preview{background:#DAFBF2}
.lottie-preview svg{display:block;width:100%;height:100%}

.detail-hero{display:block;position:relative;width:100%;aspect-ratio:1193/671;overflow:hidden;transform-origin:top left;background:#f8f8f8;z-index:9}
.detail-hero.is-playing .project-preview{opacity:1}
.detail-media .detail-hero img,.detail-media .detail-hero video{height:100%}

.detail-media video.detail-clip{aspect-ratio:auto;height:auto}
.full-film iframe{display:block;border:0;width:100%;aspect-ratio:16/9}
.full-film figcaption{font-size:1.25vw;margin-bottom:1vw}
.full-film>a{display:inline-block;font-size:.9vw;color:var(--muted);margin-top:.75vw;text-decoration:underline;text-underline-offset:3px}

.detail-clip{pointer-events:none}
.detail-hero video.detail-clip{height:100%;aspect-ratio:1193/671}

.gallery-outgoing{position:fixed;inset:0;z-index:8;pointer-events:none}
.gallery-outgoing *{pointer-events:none!important}

.detail-media video.detail-clip.crop-landscape{aspect-ratio:16/9;object-fit:cover;object-position:center center;height:auto}

.site-header{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:.8vw 3.54vw;pointer-events:none}
.site-header a{pointer-events:auto}
.site-logo{display:flex;flex-direction:column;align-items:flex-start;width:10.52vw;min-width:76px}.site-logo img{display:block;width:100%;height:auto;object-fit:contain}.site-tagline{display:block;margin-top:.15em;margin-left:6.25%;color:var(--muted);font-size:clamp(10px,.85vw,16px);font-weight:400;line-height:1.3;white-space:nowrap}
.site-header nav{display:flex;align-items:center;gap:2vw;font-size:clamp(11px,1vw,18px)}
.all-projects-link[aria-current=page]::after{transform:scaleX(1)}
.contact-cta{position:relative;display:flex;gap:.65em;align-items:center;color:inherit;padding:10px 0}
.contact-cta::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.contact-cta span{display:inline-block;transition:transform .25s ease}
.contact-cta:hover::after,.contact-cta:focus-visible::after{transform:scaleX(1)}
.contact-cta:hover span{transform:translate(2px,-2px)}
.project-index{padding:12vw 5vw 7vw;min-height:100dvh}
.index-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4vw}.index-heading h1{font-size:clamp(28px,4vw,76px);font-weight:500;letter-spacing:-.045em}.index-heading>span{font-size:clamp(11px,1vw,18px);color:var(--muted)}
.project-row,.project-table-labels{display:grid;grid-template-columns:2fr 2fr .6fr 24px;gap:2vw;align-items:center}
.project-table-labels{padding:0 1vw 1vw;font-size:clamp(10px,.9vw,16px);color:var(--muted)}
.project-row{border-top:1px solid #d9dddc;padding:2.2vw 1vw;transition:background .2s,color .2s;position:relative}.project-row:last-child{border-bottom:1px solid #d9dddc}.project-row:hover,.project-row:focus-visible{background:#eef8f4;color:#004d43}
.row-name{display:flex;align-items:center;gap:2vw;font-size:clamp(19px,2.5vw,48px);letter-spacing:-.04em}.row-name small{font-size:clamp(10px,.8vw,14px);letter-spacing:0;color:var(--muted)}
.row-service,.row-year{font-size:clamp(10px,1vw,18px);line-height:1.4;color:var(--muted)}.row-arrow{font-size:24px}
.index-preview{position:fixed;left:0;top:0;width:29vw;aspect-ratio:16/9;overflow:hidden;border-radius:12px;z-index:20;pointer-events:none;opacity:0;transform:translateY(16px) rotate(2deg);transition:opacity .2s,transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 18px 60px #0002;background:#DAFBF2}
.index-preview.is-visible{opacity:1;transform:translateY(0) rotate(-2deg)}.index-preview>img,.index-preview>video,.index-preview>.lottie-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(hover:none){.index-preview{display:none}}

/* Landscape opening, followed by two native portrait screens. */
.detail-media.tweener-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:2.4vw;padding-inline:2.5vw}
.tweener-media .detail-hero{grid-column:1 / -1;grid-row:1;aspect-ratio:2050/1226;background:transparent}
.tweener-media>figure:nth-of-type(2){grid-column:1;grid-row:2}
.tweener-media>figure:nth-of-type(3){grid-column:2;grid-row:2}
.detail-media.tweener-media video.detail-clip{object-fit:contain;aspect-ratio:auto;height:auto}
.detail-media.tweener-media .detail-hero video.detail-clip{height:100%;aspect-ratio:2050/1226;object-fit:contain}

/* Rounded media across project detail pages. */
.detail-media video,.detail-media .detail-hero,.detail-media iframe{border-radius:12px}

/* Keep navigation readable over scrolling project media. */
.site-header{isolation:isolate}
.site-header::before{content:"";position:absolute;inset:0 0 -18px;z-index:-1;pointer-events:none;background:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.9) 35%,rgba(0,0,0,.45) 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.9) 35%,rgba(0,0,0,.45) 72%,transparent 100%)}

/* Blend the white logo background into the translucent header. */
.site-logo img{filter:url(#logo-remove-white)}

.detail-media .artboard-crop{position:relative;aspect-ratio:1193/671;overflow:hidden;border-radius:12px}
.detail-media .artboard-crop>img,.index-preview.artboard-crop>img{position:absolute;width:160.939%;height:160.656%;max-width:none;left:-55.323%;top:-36.662%;object-fit:fill;aspect-ratio:auto}

.project-card video[src*="tweener-splash"],.index-preview video[src*="tweener-splash"]{object-fit:cover;object-position:50% 50%}

.tweener-media>figure:nth-of-type(4){grid-column:1 / -1;grid-row:3}

.detail-lottie-grid{grid-column:1 / -1;grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2vw}
.detail-lottie-cell{aspect-ratio:1;overflow:hidden;border-radius:12px;background:#f6f7f3;padding:10%}
.detail-lottie-cell svg{display:block;width:100%;height:100%}
.tweener-media:has(.detail-lottie-grid)>.detail-hero{grid-row:2}
.tweener-media:has(.detail-lottie-grid)>figure:nth-of-type(2),.tweener-media:has(.detail-lottie-grid)>figure:nth-of-type(3){grid-row:3}
.tweener-media:has(.detail-lottie-grid)>figure:nth-of-type(4){grid-row:4}

@media(max-width:767px){
 .site-header{padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));gap:16px}
 .site-logo{width:108px;min-width:90px}.site-tagline{font-size:11px}
 .site-header nav{font-size:12px;gap:18px}.contact-cta{min-height:44px;white-space:nowrap}
 .project-info{left:24px;right:24px;top:100px;transform:none;width:auto}
 .project-info h1{font-size:30px;letter-spacing:-1px;margin:0 0 10px}
 .project-info .meta{display:none}
 .project-info .meta-row{display:block;flex:1;border:0;margin:0;padding:0}.project-info .meta dd{text-align:left}
 .cards{top:150px;bottom:155px;overflow:hidden}
 .project-card{width:calc(100vw - 48px);height:calc((100vw - 48px)*.5625);border-radius:12px}
 .project-description{left:24px;right:24px;top:auto;bottom:65px;width:auto;transform:none;font-size:13px;line-height:1.45;letter-spacing:0;max-height:76px;overflow:hidden}
 .dots{left:50%;top:auto;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);flex-direction:row;gap:0}
 .dot{width:30px;height:30px;min-width:0;min-height:0;border-radius:0;background:transparent!important}
 .dot::before{inset:11px;border-radius:50%;background:#d9d9d9}.dot[aria-current=true]::before{background:#272727}
 .edge-fade{display:none}
 .detail{display:flex;flex-direction:column;padding:105px 20px 40px;gap:28px}
 .detail-info{position:static;width:100%}.detail-info h1{font-size:32px;line-height:1.12;letter-spacing:-1px;margin:0}
 .detail-info .meta{width:100%;margin-top:24px;font-size:13px;letter-spacing:0;line-height:1.5}
 .detail-info .meta-row,.team-row{gap:12px;min-height:24px}.meta-row+.meta-row{margin-top:5px;padding-top:5px}.team-row+.team-row{margin-top:4px}
 .team-name small{font-size:11px;letter-spacing:0}.detail-copy{margin-top:24px;font-size:14px;line-height:1.55;letter-spacing:0}.detail-copy p+p{margin-top:14px}
 .detail-media,.detail-media.tweener-media{width:100%;padding:0;gap:20px}
 .detail-lottie-grid{gap:10px}.detail-lottie-cell{border-radius:10px;padding:6%}
 .full-film figcaption{font-size:14px;margin-bottom:12px}
 .project-index{padding:115px 20px 40px}.index-heading{margin-bottom:32px;gap:12px}.index-heading h1{font-size:32px}.index-heading>span{white-space:nowrap;font-size:12px}
 .project-table-labels{display:none}.project-row{grid-template-columns:minmax(0,1fr) 45px 20px;gap:8px 12px;padding:20px 0;min-height:86px}
 .row-name{grid-column:1;grid-row:1;font-size:22px;gap:10px}.row-name small{font-size:10px}.row-service{grid-column:1;grid-row:2;font-size:12px;padding-left:24px}.row-year{grid-column:2;grid-row:1 / 3;font-size:12px}.row-arrow{grid-column:3;grid-row:1 / 3;font-size:20px}
 .index-preview{display:none}
}
@media(max-width:767px) and (max-height:650px){
 .project-info{top:85px}.project-info h1{font-size:25px}.cards{top:130px;bottom:115px}.project-description{bottom:52px;max-height:48px;font-size:12px}
}
@media(max-width:767px){.cards{-webkit-mask-image:linear-gradient(transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(transparent,#000 6%,#000 94%,transparent)}}
@media(max-width:359px){.site-header{padding-inline:12px;gap:10px}.site-logo{width:94px}.site-header nav{font-size:11px;gap:12px}.index-heading h1{font-size:27px}}

@media(max-width:767px){.project-description{display:none}.cards{bottom:60px}}

.scroll-hint{display:none}
@media(max-width:767px){
 .project-card{top:min(50%,calc((100vw - 48px)*.28125 + 48px))}
 .scroll-hint{display:flex;align-items:center;justify-content:center;gap:9px;position:absolute;bottom:max(53px,calc(env(safe-area-inset-bottom) + 35px));left:0;right:0;z-index:5;color:var(--muted);font-size:12px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
 .scroll-hint span{animation:scroll-nudge 1.8s ease-in-out 3}
 .gallery.is-explored .scroll-hint{opacity:0;transform:translateY(5px)}
 .cards{bottom:85px}
}
@keyframes scroll-nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.scroll-hint span{animation:none}.scroll-hint{transition:none}}