/* Deliberate, quiet motion; the work remains the focus. */
/* Editorial spacing: one grid, landscape images, quiet supporting type. */
.hero{max-width:none;padding:76px 0 62px}
.hero-top{margin-bottom:24px}
.hero h1{font-size:clamp(3rem,5.8vw,5rem);letter-spacing:-.055em;margin-bottom:24px}
.hero-bottom{max-width:470px}
#work>.section-label{border-top:1px solid #ffffff20;padding-top:22px;margin-bottom:28px}
.projects{gap:58px 32px}
.card-image{aspect-ratio:16/9;border-radius:6px}
.card-caption{padding-top:22px}
.card-caption>div{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.card-caption h3{font-size:clamp(1.15rem,1.85vw,1.5rem);line-height:1.25;max-width:75%;text-wrap:balance}
.card-caption p{margin:0;font-size:.75rem;white-space:nowrap}
.card-caption p .card-type{display:none}
.card-open{border-radius:7px;background:#171717b8;backdrop-filter:blur(12px)}
.project-card:hover .card-caption h3{transform:none}
.about{border-top:1px solid #ffffff16;margin-top:90px;padding-top:64px}
.project-page .section-label h2{font-size:1.35rem;letter-spacing:-.025em}
.next-project{border-radius:6px}
.next-project-copy{padding:48px}
@media(max-width:680px){.hero{padding:48px 0 46px}.hero h1{font-size:3.15rem}.hero-top{margin-bottom:20px}.projects{gap:38px}.card-caption{padding-top:17px}.card-caption h3{font-size:1.25rem;max-width:78%}.card-caption>div{gap:12px}.card-caption p{font-size:.6875rem}.about{margin-top:58px;padding-top:40px}.next-project-copy{padding:26px}}
.cover-stage{height:calc(var(--stage-cover-height) + 220px);position:relative}
.cover-stage>.project-cinema{position:sticky;top:100px;transform:scale(var(--cover-scale,1));border-radius:var(--cover-radius,6px);transform-origin:center center}
.cover-reveal .card-image{clip-path:inset(10% 13% round 18px);transition:clip-path 1.25s cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0ms)}
.cover-reveal .card-caption{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--reveal-delay,0ms) + 180ms)}
.cover-open .card-image{clip-path:inset(0 round 6px)}
.cover-open .card-caption{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.cover-reveal .card-image{clip-path:none}.cover-reveal .card-caption{opacity:1;transform:none}}
.hero .title-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.hero .title-mask>span{display:inline-block;animation:title-arrive 1s cubic-bezier(.22,1,.36,1) both}
.hero .title-mask:nth-child(2)>span{animation-delay:.12s}
@keyframes title-arrive{from{transform:translateY(110%)}to{transform:translateY(0)}}

.hero{overflow:clip}
.project-nav:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:#c7c7c7;transform:scaleX(var(--reading-progress,0));transform-origin:left;pointer-events:none}
.chapter-ready{opacity:.2;transform:translateY(30px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.chapter-ready .gallery-feature{clip-path:inset(4% 3% round 6px);transition:clip-path 1.2s cubic-bezier(.22,1,.36,1)}
.chapter-visible{opacity:1;transform:none}.chapter-visible .gallery-feature{clip-path:inset(0 round 6px)}
.gallery-feature{overflow:hidden}.gallery-thumbs button{transition:opacity .25s,border-color .25s,transform .25s}.gallery-thumbs button:hover{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.hero .title-mask:nth-child(2),.chapter-ready,.gallery-thumbs button:hover{transform:none}.chapter-ready{opacity:1}.chapter-ready .gallery-feature{clip-path:none}}
.project-card .card-image img{transform:scale(1.035) translate(var(--image-x,0px),var(--image-y,0px));transition:transform .8s cubic-bezier(.22,1,.36,1),filter .45s ease}
.project-card:hover .card-image img{transform:scale(1.055) translate(var(--image-x,0px),var(--image-y,0px))}
.project-card .card-caption h3{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.project-card:hover .card-caption h3{transform:none}
@media(hover:hover) and (pointer:fine){.projects:has(.project-card:hover) .project-card:not(:hover) .card-image img{filter:brightness(.86)}}
@media(prefers-reduced-motion:reduce){.hero .title-mask>span{animation:none}.project-card .card-image img,.project-card:hover .card-image img,.project-card:hover .card-caption h3{transform:none}.projects .project-card .card-image img{filter:none!important}}
.project-cinema .cinema-copy{left:8%;right:8%;bottom:54px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:22px}
.project-cinema .cinema-copy h1{font-size:clamp(2.4rem,4.9vw,4.5rem);line-height:1.08;letter-spacing:-.045em;text-wrap:balance;max-width:950px}
.project-cinema .cinema-copy .description{margin:0;max-width:550px;font-size:1rem;line-height:1.7;text-wrap:balance;color:#dedede}
.project-cinema .cinema-shade{background:linear-gradient(180deg,#0001 5%,#0001 30%,#0006 65%,#000c)}
.home-cinema .cinema-copy{bottom:48px;left:48px;right:48px}.home-cinema .cinema-copy h2{margin-top:12px;letter-spacing:-.04em}
.cinema{border-radius:6px}
.loop-toolbar{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
.loop-toolbar>span{display:none}
.loop-toolbar:focus-within{clip-path:none;overflow:visible;width:auto!important;height:auto!important;top:16px;right:16px;margin:0!important;z-index:10}
.loop-media{position:relative;min-width:0}
.loop-media .film{border-radius:6px;background:transparent;isolation:isolate}
.loop-media .film iframe{display:block;width:100%;height:100%;border:0}
.loop-media:not([data-video-state=error]) .video-fallback{visibility:hidden}
.mechanic{grid-template-columns:minmax(230px,.72fr) minmax(0,1.65fr);gap:64px;padding:48px 0 20px;border-top:0;align-items:center}
.mechanic>div:first-child{max-width:350px}.mechanic .eyebrow{display:none}.mechanic h3{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.15;margin:0 0 20px;letter-spacing:-.025em}
.mechanic p{font-size:1rem;line-height:1.8;color:#aaa}.mechanic .film{box-shadow:0 12px 36px #0002}
.mechanic .film iframe{transform:scale(1.045);transform-origin:center}
.reveal-ready{transform:translateY(22px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.mechanic.reveal-ready .film{clip-path:inset(3% 5% round 6px);transition:clip-path 1.1s cubic-bezier(.22,1,.36,1)}
.mechanic.is-visible .film{clip-path:inset(0 round 6px)}
.motion-enabled .cinema-poster,.motion-enabled .cinema>.loop-media>.film{transform:translateY(var(--cover-shift,0px)) scale(1.07);transform-origin:center}
.motion-enabled.home-cinema{clip-path:inset(0 var(--cinema-inset,0%) round 6px)}
.motion-enabled .cinema-copy{transform:translateY(var(--copy-shift,0px));opacity:var(--copy-opacity,1)}
.project-return .quiet-button{border:0;padding-left:0;color:#999}.project-return .quiet-button:hover{background:none;color:white}
@media(max-width:900px){.mechanic{gap:32px}}
@media(max-width:680px){.project-cinema .cinema-copy{left:24px;right:24px;bottom:32px;gap:18px;text-align:left;align-items:start}.project-cinema .cinema-copy h1{font-size:2.4rem;line-height:1.12}.project-cinema .cinema-copy .description{font-size:.9375rem;line-height:1.65;text-wrap:pretty}.home-cinema .cinema-copy{left:26px;right:26px;bottom:32px}.mechanic{grid-template-columns:1fr;gap:24px;padding:24px 0}.mechanic>div:first-child{max-width:none}.mechanic h3{margin-bottom:14px}.mechanic .loop-media{margin-inline:-5px}.motion-enabled.home-cinema{clip-path:none}}
@media(prefers-reduced-motion:reduce){.motion-enabled .cinema-poster,.motion-enabled .cinema>.loop-media>.film,.motion-enabled .cinema-copy{transform:none;opacity:1}.motion-enabled.home-cinema,.mechanic .film{clip-path:none!important}.reveal-ready{opacity:1;transform:none}}

/* A spatial signature for the introduction, built from simple level volumes. */
.has-blockout{position:relative;min-height:340px;isolation:isolate}
.has-blockout .hero-bottom{max-width:440px}
.blockout-scene{position:absolute;right:-26px;top:22px;width:49%;height:330px;pointer-events:none;perspective:900px;transform:translateY(var(--scene-scroll,0px));opacity:.88}
.blockout-scene svg{width:100%;height:100%;overflow:visible;transform:rotateX(var(--scene-x,0deg)) rotateY(var(--scene-y,0deg));transition:transform .8s cubic-bezier(.22,1,.36,1)}
.blockout-grid{stroke:#fff;stroke-opacity:.09;stroke-width:.8;mask-image:radial-gradient(ellipse,black 30%,transparent 72%)}
.blockout-side{fill:#151515;stroke:#777;stroke-width:.8}
.blockout-top{fill:#202020;stroke:#a4a4a4;stroke-width:.8}
.blockout-volume{animation:volume-rise 1.5s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--volume-delay)}
.blockout-route{stroke:#d4c2a0;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0;animation:route-draw 2s .35s cubic-bezier(.4,0,.2,1) both}
.blockout-node{fill:#d4c2a0;animation:node-arrive 1s .3s both}
@keyframes volume-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes route-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes node-arrive{from{opacity:0}to{opacity:1}}
.detail-enter{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1);transition-delay:var(--detail-delay,0ms)}
.detail-visible{opacity:1;transform:none}
.project-cinema h1,.document-heading h1,.contact-intro h1{animation:heading-reveal .95s cubic-bezier(.22,1,.36,1) both}
@keyframes heading-reveal{from{clip-path:inset(0 0 100%);transform:translateY(18px)}to{clip-path:inset(0);transform:translateY(0)}}
@view-transition{navigation:auto}
.header{view-transition-name:site-header}
::view-transition-old(root){animation:page-away .25s ease both}
::view-transition-new(root){animation:page-arrive .45s cubic-bezier(.22,1,.36,1) both}
::view-transition-group(site-header){animation-duration:.35s}
@keyframes page-away{to{opacity:0;transform:translateY(-8px)}}
@keyframes page-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:1000px) and (min-width:681px){.blockout-scene{width:43%;right:-16px;opacity:.7}.has-blockout .hero-bottom{max-width:48%}}
@media(max-width:680px){.blockout-scene{position:relative;top:auto;right:auto;width:100%;height:185px;margin:22px 0 -25px;opacity:.8}.has-blockout .hero-bottom{max-width:440px}.has-blockout{padding-bottom:32px}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}.blockout-volume,.blockout-route,.blockout-node,.project-cinema h1,.document-heading h1,.contact-intro h1{animation:none}.blockout-scene,.blockout-scene svg,.detail-enter{transform:none!important}.detail-enter{opacity:1}::view-transition-group(*){animation:none!important}}

.projects-toggle[aria-current=page]{color:white}