/* Quiet, consistent interaction layer. Existing brand and content are preserved. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--surface-soft:#f5f4f0;--focus-color:#687c85}
html{scrollbar-gutter:stable}
h1,h2,h3{font-optical-sizing:auto;text-wrap:balance}
p{ text-wrap:pretty }
.section-head>p,.page-title>p,.case-story-grid p{max-width:62ch}
.work-caption h3{line-height:1.18}
.collection-open{opacity:1}
.header a[aria-current=page],.footer a[aria-current=page]{text-decoration:underline;text-underline-offset:7px}
:where(button,a,summary,select,textarea):focus-visible{outline:3px solid var(--focus-color);outline-offset:5px}
.category-hero :focus-visible,.atelier-intro :focus-visible,.consult :focus-visible{outline-color:#fff}
.btn,.menu-toggle,.close-dialog,.gallery-controls button,.filters button,.mobile-actions button{touch-action:manipulation;min-height:44px;transition:transform 160ms var(--ease-out)}
.btn:active,.menu-toggle:active,.close-dialog:active,.gallery-controls button:active,.filters button:active,.mobile-actions button:active{transform:scale(.97);transition-duration:100ms}
.atelier-intro .btn,.consult .btn{background:#f5f4f0;color:#161616;border-color:#f5f4f0}
.hero-actions{flex-wrap:wrap}
.hero-footnote{color:#c9c9c9}
.filter-count{margin:0 0 24px;color:#555;font-size:15px}
.portfolio .filters{gap:8px 12px}
.portfolio .filters button{padding:10px 16px;border:1px solid #c6c6c1;border-radius:2px}
.portfolio .filters button.active{background:#202020;color:#fff;border-color:#202020}
.work-photo img,.work-card,.benefit-card,.assurance-grid article,.steps article,.collection-list a{transition:none}
.work-card:hover .work-photo img{transform:none}
.case-story-grid article{padding:28px;background:var(--surface-soft);border-top:2px solid #202020}
.case-materials{padding-bottom:30px}
.contact-address{padding:30px;background:var(--surface-soft);border-top:2px solid #222}
.request-help{font-size:15px;line-height:1.65;color:#555;margin:0}
dialog{overscroll-behavior:contain;scrollbar-gutter:stable;padding-top:54px}
dialog textarea:focus,dialog select:focus{border-color:#333}
dialog .close-dialog{position:sticky;top:-40px;float:right;margin:-36px -12px 0 0;background:#fff;color:#161616;z-index:2}
#lightbox .close-dialog{background:#141414;color:white;top:0}
#lightbox .lightbox-caption{color:#ddd;font-size:15px;line-height:1.6;margin:12px 0 0;max-width:75ch}
.lightbox-controls{display:flex;justify-content:space-between;gap:16px;margin-top:12px;clear:both}
.lightbox-controls button{min-height:44px;padding:10px 12px;color:white;background:transparent;border:1px solid #777;font-size:15px}
.film-toggle-label{transition:opacity 160ms var(--ease-out)}
.film-toggle.is-playing:hover .film-toggle-label{opacity:0}
.film-toggle:focus-visible .film-toggle-label{opacity:1}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .work-card,.benefit-card,.assurance-grid article,.steps article,.collection-list a{transition:transform 200ms var(--ease-out)}
 .work-card:hover,.benefit-card:hover,.assurance-grid article:hover,.steps article:hover{transform:translateY(-2px) scale(1.005);box-shadow:none}
 .collection-list a:hover{transform:translateX(3px);background:var(--surface-soft)}
 .film-toggle.is-playing:hover .film-toggle-label{opacity:1}
}
@media(max-width:1100px){.header nav{gap:16px}.header-request{white-space:nowrap}}
@media(max-width:760px){
 .atelier-intro{min-height:0;padding:34px 6% 30px}
 .atelier-intro h1{font-size:clamp(3.25rem,14vw,5rem);line-height:1.02}
 .atelier-intro .eyebrow{margin-bottom:22px}
 .atelier-intro>p{margin:22px 0 24px}
 .hero-gallery{height:clamp(390px,110vw,500px)}
 .category-hero h1,.case h1,.page-title h1{font-size:clamp(2.45rem,10.5vw,3.4rem);line-height:1.08;overflow-wrap:break-word}
 .about-hero h1{font-size:clamp(2.2rem,9vw,3rem)}
 .material-copy h2,.consult h2{font-size:clamp(2.8rem,11vw,3.8rem);line-height:1.06}
 .collection-list a{column-gap:12px}.home .collection-list h3{font-size:clamp(1.7rem,7.2vw,2rem)}
 .home .collection-open{font-size:13px}
 .case-story-grid article{padding:24px}
 .contact-address{padding:26px 22px}
 .mobile-menu{max-height:calc(100dvh - 170px);grid-template-columns:1fr 1fr;gap:8px 16px}
 .mobile-menu a{padding:10px 0;min-height:44px}
 .mobile-actions{box-shadow:0 -4px 20px #00000008}
 .footer{padding-bottom:calc(115px + env(safe-area-inset-bottom))}
 dialog{max-height:calc(100dvh - 32px);padding-left:22px;padding-right:22px}
 dialog h2{font-size:2.5rem;line-height:1.1}
 #lightbox img{max-width:100%;max-height:72dvh}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.work-card:hover,.work-card:hover .work-photo img,.benefit-card:hover,.assurance-grid article:hover,.steps article:hover,.collection-list a:hover,button:active{transform:none!important}}
html[data-input=keyboard]{scroll-behavior:auto}
html[data-input=keyboard] *,html[data-input=keyboard] *::before,html[data-input=keyboard] *::after{transition:none!important;animation:none!important}
html[data-input=keyboard] button:active{transform:none!important}
@media(prefers-reduced-transparency:reduce){dialog::backdrop{backdrop-filter:none;background:#000d}}
@media(prefers-contrast:more){.eyebrow,.source-link,.filter-count,.request-help{color:inherit}.btn,.filters button{border-width:2px}}