.spatial-feature{padding:0}
.spatial-feature-track{position:relative;height:100svh;background:var(--bg)}
.spatial-feature-track.is-scroll-driven{height:280svh}
.spatial-feature-stage{position:sticky;top:0;height:100svh;overflow:clip}
.experience-home .progress{transition:opacity .2s}
html.spatial-immersive .progress{opacity:0}
@media(prefers-reduced-motion:reduce){.experience-home .progress{transition:none}}
.spatial-feature-copy{text-align:center;padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(64px,8vw,120px)}
.spatial-feature-label{position:absolute;top:clamp(88px,12svh,120px);left:24px;right:24px;text-align:center;font:500 11px/1.5 var(--sans);letter-spacing:.13em;color:#21382f;pointer-events:none;opacity:var(--spatial-label-opacity,1)}
.spatial-feature-scroll{position:absolute;bottom:32px;left:0;right:0;display:grid;gap:10px;text-align:center;font:12px/1.5 var(--sans);color:#62746b;pointer-events:none;opacity:var(--spatial-label-opacity,1)}
.spatial-feature-scroll>span{font-size:23px}
.spatial-feature h2{font-size:clamp(36px,4.4vw,62px);line-height:1.06;margin:18px 0 24px}
.spatial-feature h2 em{font-weight:inherit}
.spatial-feature-copy>p:not(.kicker){font-size:15px;line-height:1.75;color:var(--ink-2);max-width:60ch;margin:0 auto 16px}
.spatial-feature-actions{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:26px;font-size:13px}
.spatial-preview{display:block;position:relative;min-width:0;aspect-ratio:1.12;border-radius:24px;overflow:hidden;isolation:isolate;background:#39433a;color:#fff}
.spatial-preview-room{width:100%;height:100%;object-fit:cover;object-position:43% 50%;transition:transform .7s ease}
.spatial-preview:hover .spatial-preview-room{transform:scale(1.025)}
.spatial-preview::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#152a2440,transparent 45%,#152a2480);z-index:0;pointer-events:none}
.spatial-preview-label{position:absolute;top:25px;left:25px;z-index:1;font-size:10px;letter-spacing:.14em;text-shadow:0 2px 8px #152a24}
.spatial-preview-note{position:absolute;right:22px;top:26%;z-index:1;display:grid;gap:10px;width:190px;padding:22px;border-radius:16px;background:#fcfcf4;color:#21382f;box-shadow:0 12px 35px #10251e30}
.spatial-preview-note small{font:10px/1.3 var(--sans);letter-spacing:.09em;color:#62746b}
.spatial-preview-note strong{font:400 25px/1.15 var(--display)}
.spatial-preview-note>span{font:12px/1.6 var(--sans)}
.spatial-preview-dot{position:absolute;top:66%;left:27%;z-index:1;width:15px;height:15px;border:1px solid #fff;background:#fff6;border-radius:50%;box-shadow:0 0 0 7px #ffffff20}
.spatial-preview-open{position:absolute;z-index:1;bottom:25px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.spatial-preview-open b{font-size:23px;font-weight:400}
.spatial-service-visual{grid-area:viz;min-width:0}
.spatial-service-visual .spatial-preview{aspect-ratio:1.15}
.spatial-service-link{margin-top:26px}
.svc-anchor{display:block;scroll-margin-top:90px}
@media(max-width:760px){.spatial-feature h2{font-size:40px}.spatial-feature-copy>p:not(.kicker){font-size:14px}.spatial-preview{aspect-ratio:1.05}.spatial-preview-note{width:165px;padding:17px;right:16px}.spatial-preview-note strong{font-size:23px}.spatial-feature-actions{gap:16px}.spatial-service-visual .spatial-preview{aspect-ratio:1.1}}
@media(prefers-reduced-motion:reduce){.spatial-preview-room{transition:none}.spatial-preview:hover .spatial-preview-room{transform:none}}

.spatial-embed{position:relative;min-width:0;width:100%;height:520px;overflow:hidden;border:1px solid rgba(81,129,196,.13);border-radius:24px;background:radial-gradient(ellipse at 65% 30%,rgba(188,211,255,.2),rgba(255,255,255,.2));isolation:isolate}
.spatial-embed[hidden]{display:none!important}
.spatial-embed iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .25s}
.spatial-embed.is-ready iframe{opacity:1}
.spatial-feature-stage .spatial-embed{height:100%;border:0;border-radius:0;background:linear-gradient(180deg,var(--bg),#f5f5f3 clamp(160px,24svh,260px))}
.spatial-feature-stage iframe{pointer-events:none}
.spatial-feature-stage .is-interactive iframe{pointer-events:auto}
@media(max-width:760px){.spatial-embed{height:540px}}
@media(prefers-reduced-motion:reduce){.spatial-embed iframe{transition:none}.spatial-feature-track.is-scroll-driven{height:100svh}.spatial-feature-scroll,.spatial-feature-label{display:none}}
@media(max-width:600px){.experience-home .hd-dots{gap:0}.experience-home .hd-dot{width:auto;min-width:0;flex:1 1 0}}

.spatial-showcase{position:relative;min-width:0;--slide-progress:0;--spatial-viewer-height:520px}
.spatial-slide[hidden]{display:none!important}
.spatial-slide:not([hidden]){animation:spatial-slide-in .45s ease both}
@keyframes spatial-slide-in{from{opacity:0}to{opacity:1}}
.spatial-motion{height:520px;border:1px solid rgba(81,129,196,.13);border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 65% 30%,rgba(188,211,255,.2),rgba(255,255,255,.2))}
.spatial-motion canvas{display:block;width:100%;height:100%}
.spatial-caption{padding:72px 6px 0;min-height:202px;box-sizing:border-box;text-align:center}
.spatial-caption>p{margin:0 0 8px;font:10px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.13em;color:var(--ink-2)}
.spatial-caption h3{margin:0 0 10px;font:400 clamp(22px,2.1vw,28px)/1.15 var(--display);color:var(--ink)}
.spatial-caption>span{display:block;max-width:52ch;margin-inline:auto;font:13px/1.65 var(--sans);color:var(--ink-2)}
.spatial-slide-controls{position:absolute;top:var(--spatial-viewer-height);left:0;right:0;z-index:2;display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px}
.spatial-dots{display:flex;gap:4px}
.spatial-dots button,.spatial-play{appearance:none;background:transparent;border:0;color:var(--ink);width:44px;height:44px;display:grid;place-items:center;cursor:pointer;padding:0;border-radius:50%}
.spatial-dots button:focus-visible,.spatial-play:focus-visible{outline:2px solid #486cfc;outline-offset:1px}
.spatial-dots button span{position:relative;width:7px;height:7px;background:#0c245433;border-radius:10px;overflow:hidden;transition:width .25s}
.spatial-dots button[aria-selected=true] span{width:28px;background:#486cfc66}
.spatial-dots button[aria-selected=true] span::after{content:'';position:absolute;inset:0;background:#486cfc;transform:scaleX(var(--slide-progress));transform-origin:left}
.spatial-play{font-size:15px}
.spatial-play[hidden]{display:none}
@media(max-width:760px){.spatial-motion{height:540px}.spatial-caption{min-height:220px}.spatial-caption h3{font-size:25px}}
@media(prefers-reduced-motion:reduce){.spatial-slide:not([hidden]){animation:none}.spatial-dots button span{transition:none}.spatial-dots button[aria-selected=true] span::after{transform:none}}

/* The interactive room needs the full content width, not a half-column preview. */
#interactive.svc-row .svc-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "viz";gap:36px}
#interactive.svc-row .svc-copy{width:100%;max-width:800px;margin-inline:auto;text-align:center}
#interactive.svc-row .svc-copy h2,#interactive.svc-row .svc-copy p,#interactive.svc-row .svc-copy .spec{margin-inline:auto}
#interactive.svc-row .svc-copy p{max-width:64ch}
#interactive.svc-row .svc-copy .spec li{max-width:none;margin:0 0 8px;padding:0;border:0}
#interactive.svc-row .spatial-showcase{--spatial-viewer-height:clamp(600px,76svh,800px)}
#interactive.svc-row .spatial-embed,#interactive.svc-row .spatial-motion{height:var(--spatial-viewer-height)}
/* Keep the controls in the space between the active viewer and its caption. */
@media(max-width:900px){#interactive.svc-row .spatial-showcase:has(.spatial-slide:not([hidden]) .spatial-embed){--spatial-viewer-height:860px}}
/* A little less vertical space for the room demo on portrait phones. */
@media(max-width:760px) and (orientation:portrait){#interactive.svc-row .spatial-showcase:has(.spatial-slide:not([hidden]) .spatial-embed){--spatial-viewer-height:740px}}