/* Equal panoramic desktop frames; artwork keeps its original 3:2 scale. */
:root{--motion-aspect:2}
:root .page-home .hero--build :is(.build-figure,.build-progress),
:root .page-home .renovation-journey :is(.reno-figure,.reno-progress),
:root .page-commercial :is(.commercial-build-figure,.commercial-build-progress,.office-figure,.office-progress){
 width:min(100%,var(--motion-frame-width,100%));
 max-width:none;
}
:root .page-home .hero--build .build-art,
:root .page-home .renovation-journey .reno-art,
:root .page-commercial :is(.commercial-build-art,.office-art){aspect-ratio:var(--motion-aspect)}
:root .page-home .hero--build .build-layer,
:root .page-home .renovation-journey .reno-layer,
:root .page-commercial :is(.commercial-build-layer,.office-layer){
 inset:auto 0;top:50%;height:auto;aspect-ratio:3/2;transform:translateY(-50%);
}
:root .page-home .hero--build .build-layer{top:55%}
:root .page-home .renovation-journey .reno-layer{top:38%}
:root .page-commercial .commercial-build-layer{top:60%}
:root .page-home .hero--build .build-panel,
:root .page-home .renovation-journey .reno-panel,
:root .page-commercial :is(.commercial-build-panel,.office-panel){
 padding-block:12px 16px;min-height:var(--motion-panel-height,0);
 grid-template-rows:auto auto;align-items:start;align-content:start;row-gap:0;
}
:root .page-commercial :is(.commercial-build-panel,.office-panel){
 max-width:calc(var(--content-width) + var(--gutter)*2);padding-inline:var(--gutter);
}
@media(max-width:760px){
 :root{--motion-aspect:1.5}
 :root .page-home .hero--build .build-layer,
 :root .page-home .renovation-journey .reno-layer,
 :root .page-commercial :is(.commercial-build-layer,.office-layer){
  inset:0;top:0;height:100%;aspect-ratio:auto;transform:none;
 }
}