/* Exterior first, interior second: two independent construction stories. */
.page-commercial .commercial-intro{padding-bottom:28px}
.commercial-build-story{position:relative;isolation:isolate;background:var(--surface);scroll-margin-top:calc(var(--header-height) + 20px)}
.commercial-build-heading{display:grid;grid-template-columns:1fr .8fr;gap:8vw;align-items:end;padding-block:32px 24px}
.commercial-build-heading h2,.commercial-directions h2{font-size:clamp(30px,3.2vw,46px);line-height:1.4;margin:0}
.commercial-build-heading .eyebrow{margin-bottom:14px}
.commercial-build-heading-copy>p:first-child{font-size:1rem;line-height:1.9;max-width:43ch;color:var(--muted);margin:0}
.commercial-build-hint{display:flex;gap:14px;align-items:center;font-size:.875rem;line-height:1.8;color:var(--muted);margin:14px 0 0}
.commercial-build-hint>span:first-child{font-size:23px;color:var(--accent)}
.commercial-build-track{position:relative}
.commercial-build-panel{max-width:1600px;margin-inline:auto;padding:8px 28px 20px;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;background:var(--surface)}
.is-commercial-build-scroll .commercial-build-track{height:var(--commercial-build-scene-height,auto)}
.is-commercial-build-scroll .commercial-build-panel{position:sticky;top:var(--header-height)}
.commercial-build-figure{width:100%;min-width:0;margin:0}
.commercial-build-art{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--paper)}
.commercial-build-layer{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none}
.commercial-build-layer:last-of-type{opacity:1}
/* Two columns and three rows, with a slight overscan to exclude panel seams. */
.commercial-build-layer img{position:absolute;display:block;width:202%;height:303%;max-width:none;left:-.5%;top:-.5%;user-select:none;-webkit-user-drag:none}
.commercial-build-layer[data-commercial-build-frame="1"] img{left:-101.5%}
.commercial-build-layer[data-commercial-build-frame="2"] img{top:-101.5%}
.commercial-build-layer[data-commercial-build-frame="3"] img{left:-101.5%;top:-101.5%}
.commercial-build-layer[data-commercial-build-frame="4"] img{top:-202.5%}
.commercial-build-scan{position:absolute;left:0;right:0;height:1px;background:var(--paper);opacity:0;pointer-events:none}
.commercial-build-figure figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;padding:12px 0}
.commercial-build-stage-name{display:block;font-size:1rem;line-height:1.6}
.commercial-build-concept{font-size:.75rem;line-height:1.7;color:var(--muted);text-align:right}
.commercial-build-stage-detail{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.commercial-build-progress{width:100%;min-width:0}
.commercial-build-progress-line{height:1px;background:var(--line);overflow:hidden}
.commercial-build-progress-line>span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(var(--commercial-build-progress,1));transform-origin:left}
.commercial-build-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding-top:10px}
.commercial-build-stages button{position:relative;min-height:44px;text-align:left;border:0;background:none;color:var(--muted);padding:5px 0 10px;font-size:.875rem;line-height:1.8}
.commercial-build-stages button::after{content:"";position:absolute;left:0;bottom:2px;width:28px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.commercial-build-stages button[aria-pressed="true"],.commercial-build-stages button:hover{color:var(--accent)}
.commercial-build-stages button[aria-pressed="true"]::after{transform:scaleX(1)}
.commercial-build-stages button:disabled{cursor:default}
.commercial-build-load-status{display:none;font-size:.875rem;color:var(--muted);padding:12px 0;margin:0}
.commercial-build-story.is-loading .commercial-build-load-status,.commercial-build-story.is-load-error .commercial-build-load-status{display:block}
.commercial-build-story.is-load-error .commercial-build-art{display:none}
.is-commercial-build-manual .commercial-build-figure,.is-commercial-build-manual .commercial-build-progress{max-width:1200px}
.commercial-directions{padding-block:52px;background:var(--surface)}
.commercial-directions-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:30px}
.commercial-directions-heading .text-link{flex-shrink:0}
.commercial-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.commercial-services-grid article{min-width:0}
.commercial-service-image{position:relative;aspect-ratio:1;overflow:hidden;background:var(--paper)}
.commercial-service-image img{position:absolute;width:303%;height:101%;max-width:none;top:-.5%;left:-.5%;object-fit:fill}
.commercial-service-image[data-service-image="1"] img{left:-101.5%}
.commercial-service-image[data-service-image="2"] img{left:-202.5%}
.commercial-service-image--portfolio{display:block;aspect-ratio:4/3}
.commercial-service-image--portfolio img{width:100%;height:100%;inset:0;object-fit:cover}
.commercial-service-image--portfolio:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.commercial-services-grid h3{font-size:clamp(18px,1.6vw,23px);line-height:1.6;margin:18px 0 8px}
.commercial-services-grid p{font-size:1rem;line-height:1.9;color:var(--muted);margin:0}
.commercial-directions-note{font-size:.8125rem;line-height:1.8;color:var(--muted);margin:24px 0 0}
@media(min-width:761px){.is-commercial-build-scroll .commercial-build-figure,.is-commercial-build-scroll .commercial-build-progress{width:min(100%,calc((100svh - var(--header-height) - 158px) * 1.5))}}
/* Leave room for the longer Georgian office stage labels at laptop heights. */
@media(min-width:761px){.page-commercial .is-office-scroll .office-figure,.page-commercial .is-office-scroll .office-progress{width:min(100%,calc((100svh - var(--header-height) - 192px) * 1.5))}}
@media(max-width:760px){
 .commercial-build-heading{grid-template-columns:1fr;gap:16px;padding-block:28px 18px}
 .commercial-build-panel{padding:8px 16px 18px}
 .commercial-build-figure figcaption{display:block;padding-block:10px}
 .commercial-build-stage-name{font-size:.875rem}
 .commercial-build-concept{display:block;text-align:left;margin-top:5px}
 .commercial-build-stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px}
 .commercial-directions{padding-block:34px}
 .commercial-directions-heading{display:block;margin-bottom:24px}
 .commercial-directions-heading .text-link{margin-top:16px}
 .commercial-services-grid{grid-template-columns:1fr;gap:28px}
 .commercial-service-image{aspect-ratio:1}
 .commercial-services-grid h3{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){.is-commercial-build-scroll .commercial-build-track{height:auto}.commercial-build-panel{position:relative!important}.commercial-build-scan{display:none}}