/* Homepage-only additions within the existing moodboard. */
.selected-work .feature-grid > *{min-width:0}
.selected-work .showcase-all{margin-top:24px;color:#fff;border-color:#777b73;gap:32px}
.selected-work .showcase-all:hover,.selected-work .showcase-all:focus-visible{background:#fff;color:var(--black)}
.selected-work .project-choice-label{margin-top:32px;color:#b8bab4;font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.project-selector{display:grid;margin-top:8px}
.project-selector a{position:relative;display:flex;align-items:center;gap:16px;min-height:68px;padding:10px 0;color:#b8bab4;border-bottom:1px solid #ffffff26;transition:color .25s,border-color .25s}
.project-selector img{width:76px;height:48px;object-fit:cover;flex-shrink:0;opacity:.82;transition:opacity .3s}
.selector-label{display:flex;flex-direction:column;gap:5px;min-width:0}
.selector-label small{font-size:9px;letter-spacing:.1em}
.selector-label strong{font-size:14px;font-weight:500;line-height:1.3}
.project-selector a[aria-current=true],.project-selector a:hover{color:#fff}
.project-selector a[aria-current=true]{border-bottom-color:#d1d0c8}
.project-selector a[aria-current=true] img,.project-selector a:hover img,.project-selector a:focus-visible img{opacity:1}
.project-selector a[aria-current=true]::after{content:"";position:absolute;right:1px;width:4px;height:4px;background:currentColor;border-radius:50%}
.showcase-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.showcase-track::-webkit-scrollbar{display:none}
.selected-work .feature-project{display:flex;flex-direction:column;flex:0 0 100%;min-width:0;min-height:0;background:transparent;scroll-snap-align:start;scroll-snap-stop:always}
.selected-work .feature-project>.project-art{display:block;position:relative;inset:auto;padding:0;background:#e9e5de;aspect-ratio:1600/1015;overflow:hidden}
.selected-work .feature-project img{width:100%;height:100%;object-fit:cover;object-position:top}
.project-still{display:block;width:100%;height:100%}
/* Supplied 753×450 laptop; keep the existing stage and the full 1440×770 capture. */
.selected-work .feature-project>.laptop-preview{background:transparent;--screen-left:11.952191%;--screen-top:16.381909%;--screen-width:75.962815%;--screen-height:64.029959%}
.laptop-shell{position:absolute;inset:auto 0 0;aspect-ratio:753/450;background:url('/assets/projects/showcase-laptop.png') center/100% 100% no-repeat;pointer-events:none}
.laptop-shell::before{content:"";position:absolute;left:11.952191%;top:5.555556%;width:75.962815%;height:79.333334%;background:#080808}
.laptop-preview .project-still,.laptop-preview .showcase-viewer{position:absolute;left:var(--screen-left)!important;top:var(--screen-top)!important;width:var(--screen-width)!important;height:var(--screen-height)!important;overflow:hidden}
/* Crop only the old mockup border from the existing no-JS/reduced-motion fallback. */
.selected-work .laptop-preview .project-still img{position:absolute;left:-6.980057%;top:-20.533333%;width:113.960114%;height:auto;max-width:none;object-fit:initial}
.selected-work .feature-project[data-showcase-scenes]:hover .project-still img,.selected-work .feature-project[data-showcase-scenes]:focus-within .project-still img{transform:none}
.project-art:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.showcase-viewer{position:absolute;overflow:hidden;background:#080808;isolation:isolate}
.showcase-scene{position:absolute;inset:0;opacity:0;transition:opacity .3s ease;pointer-events:none;overflow:hidden}
.showcase-scene.is-ready{opacity:1}
.selected-work .showcase-scene img{display:block;width:100%;height:auto;max-width:none;transform-origin:top left;transition:none}
.showcase-scene video{display:block;width:100%;height:100%;object-fit:cover}
.showcase-toggle{position:absolute;right:10px;bottom:10px;z-index:2;min-width:44px;min-height:32px;padding:6px 12px;border:1px solid #ffffff70;border-radius:30px;background:#111e;color:#fff;font:500 12px 'Inter Variable',Inter,sans-serif;cursor:pointer;opacity:0;pointer-events:none}
.project-art:focus-visible .showcase-toggle,.showcase-toggle:focus{opacity:1;pointer-events:auto}
.showcase-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
.project-art .showcase-callout{position:absolute;left:11.952191%;right:11.952191%;top:0;display:flex;align-items:center;gap:12px;margin:0;padding:0;border:0;background:none;color:#d3d4ce;font:500 15px/20px 'Inter Variable',Inter,sans-serif;letter-spacing:.02em;text-align:left;pointer-events:none}
.project-art .showcase-callout::before{content:"";width:24px;height:1px;background:#8a8c85;flex-shrink:0}
.project-art .showcase-callout[hidden]{display:none}
@media(max-width:760px){.project-art .showcase-callout{left:6.125%;right:6.125%;gap:8px;font-size:12px;line-height:16px}.project-art .showcase-callout::before{width:12px}}
@media(max-width:380px){.project-art .showcase-callout{font-size:11px;line-height:14px}}
.selected-work .feature-project>.project-info{position:static;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;background:none;min-height:90px}
.project-identity{display:flex;flex-direction:column;gap:7px;min-width:0}
.selected-work .project-identity small{color:#c9cac6;line-height:1.5}
.selected-work .project-open{font-size:11px;letter-spacing:normal;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
.selected-work .feature-project:focus-visible{outline-offset:-4px}
.showcase-caption{display:flex;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid #ffffff26;color:#c9cac6;font-size:10px;letter-spacing:.08em}
/* Reframe the approved concept photo as a workspace detail, without repeating a client logo.
   A future CMS image keeps its own full composition. */
.about-slice .about-photo img[src="/assets/visuals/hero-workspace.webp"]{transform:scale(1.9);transform-origin:100% 100%}
.client-voices[hidden]{display:none}
.client-voices{display:grid;grid-template-columns:31% 1fr;gap:62px;padding-block:72px}
.voices-intro h2{font-size:clamp(32px,3vw,46px);margin-top:20px}
.voices-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.client-voice{min-width:0}
.voice-client{font-size:14px;font-weight:600}.voice-type{font-size:11px;color:var(--grey);margin-top:5px}
.client-voice blockquote{margin:22px 0}.voice-quote{font-size:21px;line-height:1.4;letter-spacing:-.025em}
.client-voice audio{display:block;width:100%;height:40px;margin-bottom:18px}
.client-voice summary{cursor:pointer;min-height:44px;display:list-item;font-size:12px;padding-block:12px}
.voice-transcript{white-space:pre-wrap;font-size:13px;line-height:1.7;margin-top:10px}
.voice-audio-error{font-size:12px;line-height:1.6}
.client-voice .under-link{margin-top:14px}
@media(max-width:1000px) and (min-width:761px){.selected-work .feature-grid{grid-template-columns:35% minmax(0,1fr);gap:36px}.selected-work .feature-project>.project-info{align-items:flex-start;flex-direction:column;gap:14px}}
@media(max-width:760px){.selected-work .feature-grid{gap:32px}.project-selector{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.project-selector a{gap:10px;min-height:66px;padding-right:8px}.project-selector img{width:56px;height:36px}.selector-label strong{font-size:12px}.selector-label small{font-size:8px}.selected-work .project-choice-label{margin-top:28px}.client-voices{grid-template-columns:1fr;gap:32px;padding-block:56px}.voices-list{gap:28px}}
@media(max-width:480px){.selected-work .feature-project>.project-info{gap:12px;min-height:88px;padding-block:18px}.selected-work .project-identity strong{font-size:21px}.selected-work .project-identity small{font-size:10px}.selected-work .project-open{font-size:10px}.voices-list{grid-template-columns:1fr}.client-voice+.client-voice{border-top:1px solid var(--border);padding-top:28px}}
@media(max-width:360px){.selected-work .feature-project>.project-info{align-items:flex-start;flex-direction:column}.project-selector img{width:46px;height:32px}.project-selector a{gap:8px}.selector-label strong{font-size:10px}}