/* One surface palette shared by every visible homepage section. */
.home-page{--surface:#fff;--ink:#111;--muted:#727272;background:var(--surface);color:var(--ink)}
.home-page .homepage-surface,.home-page .sequence-section,.home-page .project-gallery,.home-page .process-section,.home-page .process-background{background:var(--surface);color:var(--ink);transition:none}
.home-page .sequence-label,.home-page .experience-note{color:var(--muted)}
.home-page .service-list-flow button[aria-pressed=true]{color:var(--ink)}
.home-page .service-list-flow button:focus-visible{outline-color:var(--ink)}
.home-page .gallery-card{color:var(--ink)}
.home-page .gallery-image::after{inset:55% 0 0;background:linear-gradient(transparent,var(--surface));backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);mask-image:linear-gradient(transparent,#000 85%);pointer-events:none}
.home-page .gallery-image{transform:none;transition:opacity 180ms ease}
.home-page .gallery-image img{transform:none;transition:none}
.home-page .gallery-card:focus-visible{outline-color:var(--ink)}
.project-explore{position:fixed;left:0;top:0;z-index:12;padding:11px 15px;background:#171a19bb;color:#fff;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:13px;line-height:1.4;letter-spacing:.015em;pointer-events:none;border-radius:2px;opacity:0;visibility:hidden;transition:opacity 160ms,visibility 160ms;will-change:transform}
.project-explore.is-visible{opacity:1;visibility:visible}.project-explore span{margin-left:20px}
@media(min-width:901px){.home-page .gallery-card{width:min(62vw,1000px)}.home-page .gallery-track{gap:18vw;padding-left:12vw;padding-right:12vw}.home-page .gallery-image{height:min(47vh,480px)}.home-page .project-gallery:not(.is-pinned) .gallery-card{width:100%}}

@media(prefers-reduced-motion:reduce){.home-page .gallery-image,.home-page .gallery-image img{transform:none;transition:none}.project-explore{display:none}}

/* Clip the photograph and blur together, including fractional hover positions. */
.home-page .gallery-image{isolation:isolate;overflow:hidden;clip-path:inset(0);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
.home-page .gallery-image::after{inset:55% -2px -2px;}

/* Blur an oversized photograph copy rather than the frame's backdrop: this
   prevents GPU sampling seams while the frame moves by fractional pixels. */
.home-page .gallery-image::before{content:'';position:absolute;inset:-12px;z-index:1;background-image:var(--project-photo);background-size:cover;background-position:center;filter:blur(9px);mask-image:linear-gradient(transparent 45%,#000 85%);pointer-events:none}
.home-page .gallery-image::after{z-index:2;backdrop-filter:none;-webkit-backdrop-filter:none}

/* A transparent safety margin removes the residual compositing edge. */
.home-page .gallery-image{clip-path:inset(1px);mask-image:linear-gradient(to bottom,#000 68%,transparent calc(100% - 5px));-webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent calc(100% - 5px))}
.home-page .gallery-card h3{position:relative;margin:4px 0 0 -28px;z-index:3}
.home-page .gallery-end{height:min(55vh,550px);display:flex;align-items:center;justify-content:center;text-align:center}
.all-projects-link{display:block;overflow:hidden;padding:10px;font-size:clamp(30px,3vw,46px);font-weight:500;letter-spacing:-.025em;line-height:1.2;transition:color 180ms}
.all-projects-link>span{display:block;transform:translateY(120%);transition:transform 650ms cubic-bezier(.2,.7,.2,1)}
.gallery-end.is-visible .all-projects-link>span,.gallery-end:focus-within .all-projects-link>span{transform:translateY(0)}
.all-projects-link:hover,.all-projects-link:focus-visible{color:#999}

@media(max-width:900px){.home-page .gallery-card h3{margin-left:-10px;font-size:26px}.home-page .gallery-end{height:40svh}.all-projects-link{font-size:30px}}
@media(prefers-reduced-motion:reduce){.all-projects-link>span{transform:none;transition:none}}
@media(min-width:901px){.home-page .gallery-card.gallery-end{width:76vw}}
@media(max-width:900px){.home-page .gallery-card.gallery-end{width:100%}}

/* Guard all four sides against subpixel/compositor bleed. The second mask
   clips the blur's overscan independently of the lower photographic fade. */
.home-page .gallery-image{
 clip-path:inset(4px);
 -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent calc(100% - 10px)),linear-gradient(to right,transparent 3px,#000 7px,#000 calc(100% - 7px),transparent calc(100% - 3px));
 mask-image:linear-gradient(to bottom,#000 80%,transparent calc(100% - 10px)),linear-gradient(to right,transparent 3px,#000 7px,#000 calc(100% - 7px),transparent calc(100% - 3px));
 -webkit-mask-composite:source-in;mask-composite:intersect;
}
.home-page .gallery-image::before{inset:-24px;filter:blur(7px);mask-image:linear-gradient(transparent 70%,#000 97%);-webkit-mask-image:linear-gradient(transparent 70%,#000 97%)}
.home-page .gallery-image::after{inset:76% -24px -24px;mask-image:none;-webkit-mask-image:none;background:linear-gradient(transparent,var(--surface) 85%)}

/* Only the gallery row moves. Individual images never translate or zoom. */
.home-page .gallery-image{opacity:var(--project-visibility,1)}
.home-page .gallery-card h3{opacity:var(--project-visibility,1);transition:opacity 180ms ease}
.home-page .gallery-card:focus-within .gallery-image,.home-page .gallery-card:focus-within h3{opacity:1}
@media(hover:hover) and (pointer:fine){.home-page .gallery-card:hover .gallery-image,.home-page .gallery-card:hover h3{opacity:1}}
@media(prefers-reduced-motion:reduce){.home-page .gallery-image,.home-page .gallery-card h3{opacity:1;transition:none}}