.space-showcase{background:#f7f8f2}.space-showcase>.wrap{max-width:1240px}.space-showcase .section-heading{max-width:760px;margin-bottom:32px}
.space-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:36px;align-items:start}
.space-selector{display:grid;gap:8px;align-content:start;min-width:0;position:relative}
.space-choice{display:block;position:relative;width:100%;min-height:56px;padding:14px 18px;text-align:left;border:0;border-radius:10px;background:transparent;color:var(--muted);font:inherit;cursor:pointer}
.space-choice.is-active{background:#e4eeea;color:var(--ink)}.space-choice.is-active::before{content:'';position:absolute;left:0;top:18px;height:20px;width:3px;border-radius:3px;background:var(--brand)}
.space-title{display:block;font-size:21px;line-height:1.3;font-weight:600;letter-spacing:-.025em}.space-description{display:block;margin-top:9px;font-size:15px;line-height:1.55;font-weight:400;color:#465f66}.space-description[hidden]{display:none}
.space-scene{grid-column:2;grid-row:1 / span 3;position:relative;isolation:isolate;width:100%;max-width:680px;aspect-ratio:1.15;margin:0;overflow:visible;align-self:center}
.space-circle{position:absolute;left:8%;top:1%;width:84%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 24%,#eaf0df,#c9e0df);z-index:-1}
.space-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none}.space-slide.is-active{opacity:1;visibility:visible}.space-slide[hidden]{display:none}
.space-slide img{position:absolute;display:block;object-fit:contain;height:auto;filter:drop-shadow(0 10px 14px #17313c18)}
.space-building{width:94%;left:3%;top:3%;max-height:70%;object-position:top center}
.space-monitor{width:58%;left:0;bottom:1%;z-index:2}
.space-phone{width:23%;right:4%;bottom:2%;z-index:3;transform:rotate(9deg);transform-origin:50% 85%}
.space-quote{grid-column:1;grid-row:2;margin:20px 0 0;justify-self:start;max-width:100%;min-height:50px}
.space-controls{grid-column:1;grid-row:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:10px}.space-toggle{min-height:44px;padding:8px 0;border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:#43656b;cursor:pointer}.space-note{font-size:12px;color:var(--muted)}
.space-choice:focus-visible,.space-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.space-measure{position:absolute!important;visibility:hidden!important;pointer-events:none!important;display:block!important;top:0;left:18px;margin:9px 0 0!important}
@media(prefers-reduced-motion:no-preference){
 .space-slide.is-active .space-building{animation:space-building-in .55s both}.space-slide.is-active .space-monitor{animation:space-monitor-in .55s .07s both}.space-slide.is-active .space-phone{animation:space-phone-in .55s .14s both}.space-choice.is-active .space-description:not(.space-measure){animation:space-description-in .45s both}
}
@keyframes space-building-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes space-monitor-in{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes space-phone-in{from{opacity:0;transform:translateX(12px) rotate(9deg)}to{opacity:1;transform:translateX(0) rotate(9deg)}}
@keyframes space-description-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:960px) and (max-width:1199px){.space-layout{grid-template-columns:minmax(0,46fr) minmax(0,54fr);column-gap:20px}.space-title{font-size:20px}.space-monitor{width:56%;left:2%}.space-phone{right:6%;width:24%}.space-choice{padding:12px 16px}}
@media(max-width:959px){
 .space-layout{grid-template-columns:minmax(0,1fr);gap:0}.space-selector{grid-column:1;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.space-choice:last-child{grid-column:1/-1}
 .space-title{font-size:19px}.space-scene{grid-column:1;grid-row:2;width:min(560px,100%);justify-self:center;margin-top:20px;aspect-ratio:1.15}
 .space-quote{grid-column:1;grid-row:3;justify-self:center;margin-top:20px}.space-controls{grid-column:1;grid-row:4;justify-content:center}
}
@media(max-width:599px){
 .space-showcase{padding-block:40px}.space-showcase .section-heading{margin-bottom:22px}.space-choice{padding:12px 13px;min-height:52px}.space-title{font-size:17px;line-height:1.35}.space-description{font-size:14px;line-height:1.5;margin-top:8px}.space-choice.is-active::before{top:15px;height:18px}
 .space-scene{margin-top:14px;aspect-ratio:1.08}.space-building{top:4%;max-height:67%}.space-monitor{width:58%;left:0;bottom:3%}.space-phone{width:25%;right:4%;bottom:4%;transform:rotate(6deg)}
 .space-quote{width:100%;justify-self:stretch;margin-top:16px}.space-controls{justify-content:space-between;margin-top:6px}.space-note{font-size:11px}
 @keyframes space-building-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
 @keyframes space-monitor-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
 @keyframes space-phone-in{from{opacity:0;transform:translateX(6px) rotate(6deg)}to{opacity:1;transform:translateX(0) rotate(6deg)}}
}
@media(max-width:359px){.space-selector{grid-template-columns:1fr;gap:6px}.space-choice:last-child{grid-column:auto}.space-choice{padding:10px 13px}.space-title{font-size:17px}.space-scene{aspect-ratio:1}.space-phone{width:26%;right:3%}.space-monitor{width:60%}}
.space-slide.is-leaving{visibility:visible;opacity:0;transition:opacity .5s ease}
.space-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.space-selection-column{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-width:0}.space-selection-column .space-quote{align-self:flex-start}.space-scene{grid-row:1}.space-quote{scroll-margin-block:100px}.space-scene{scroll-margin-bottom:100px}
@media(max-width:959px){.space-selection-column{display:contents}.space-scene{grid-row:2}}

/* A quieter selector, with its accent spanning the complete active item. */
.space-choice{border-radius:0}
.space-choice.is-active{background:#edf0ea}
.space-choice.is-active::before{top:0;bottom:0;height:auto;border-radius:0}
.space-circle{left:2%;top:-3%;width:96%}
@media(min-width:960px){.space-layout{position:relative}.space-scene{align-self:start;transform:translateY(var(--space-scene-offset,0px))}}
.space-showcase .space-choice{border-radius:0}

/* Scrolling drives the five scenes; short viewports pin only the artwork. */
.space-scroll-track{position:relative;min-width:0}
.space-scene-track{display:contents}
.space-scroll-sticky{position:sticky;top:var(--space-pin-top,90px)}
.space-scroll-scene-only .space-scene-track{display:block;grid-column:2;grid-row:1;min-width:0}
.space-scroll-scene-only .space-scene{position:sticky;top:var(--space-pin-top,90px);transform:none;width:min(100%,calc((100svh - 130px)*1.08));margin-inline:auto}
.space-progress{font-size:14px;font-weight:600;color:#43656b;min-height:44px;display:flex;align-items:center}
.space-scroll-pinned .mobile-bar{display:none}
@media(max-width:959px){.space-scroll-scene-only .space-scene-track{grid-column:1;grid-row:2}}

/* Keep the section story visible throughout the scroll sequence. */
.space-pinned-heading{position:sticky;top:var(--space-heading-top,90px);z-index:5;background:#f7f8f2;padding-bottom:8px}
.space-scroll-scene-only .space-scene{width:min(100%,calc(var(--space-art-height,400px)*1.08));max-height:var(--space-art-height,400px)}
@media(max-width:599px){.space-pinned-heading h2{font-size:28px}.space-pinned-heading>p:not(.eyebrow){font-size:14px;line-height:1.45}.space-pinned-heading .eyebrow{margin-bottom:8px}}
@media(max-height:500px){.space-pinned-heading h2{font-size:24px}.space-pinned-heading h2 br{display:none}.space-pinned-heading>p:not(.eyebrow){font-size:13px;line-height:1.35}.space-showcase .space-pinned-heading{margin-bottom:10px}.space-pinned-heading .eyebrow{margin-bottom:4px}}

.space-scroll-whole .space-pinned-heading{background:transparent}

/* Desktop keeps the selector and scene together, including laptop heights. */
@media(min-width:960px) and (max-height:900px){
 .space-showcase .space-pinned-heading{margin-bottom:20px}
 .space-pinned-heading h2{font-size:clamp(36px,4vw,48px);line-height:1.08}
 .space-pinned-heading>p:not(.eyebrow){font-size:15px;line-height:1.45}
 .space-showcase .space-choice{min-height:44px;padding:9px 16px}
 .space-title{font-size:19px}.space-description{font-size:14px;line-height:1.45}
 .space-selection-column .space-quote{margin-top:12px;min-height:44px}
 .space-controls{margin-top:4px}
 .space-scroll-whole .space-scene{max-width:min(100%,calc((100svh - 260px)*1.15))}
}

.space-heading-track{display:flow-root;position:relative}

/* Each property has its own device composition, palette and entrance path. */
.space-scene{--scene-colour:#c9e0df;--fly-distance:22px}
.space-scene[data-property=shop]{--scene-colour:#efd2af}
.space-scene[data-property=office]{--scene-colour:#cbdcf0}
.space-scene[data-property=community]{--scene-colour:#ddd0ea}
.space-scene[data-property=commercial]{--scene-colour:#d8deb4}
.space-circle{background:radial-gradient(circle at 32% 24%,#ffffff70,transparent 75%),var(--scene-colour);transition:background-color .55s ease}
.space-slide{--monitor-left:0%;--monitor-bottom:3%;--monitor-width:56%;--phone-left:72%;--phone-bottom:4%;--phone-width:23%;--phone-tilt:7deg;--monitor-x:-1;--monitor-y:0;--phone-x:1;--phone-y:0;--building-x:0;--building-y:1}
#space-slide-shop{--monitor-left:42%;--monitor-bottom:5%;--monitor-width:56%;--phone-left:5%;--phone-bottom:2%;--phone-tilt:-7deg;--monitor-x:1;--monitor-y:1;--phone-x:-1;--building-y:-1}
#space-slide-office{--monitor-left:4%;--monitor-bottom:7%;--monitor-width:54%;--phone-left:73%;--phone-bottom:3%;--phone-tilt:3deg;--monitor-x:0;--monitor-y:1;--phone-x:0;--phone-y:-1;--building-x:-1;--building-y:0}
#space-slide-community{--monitor-left:40%;--monitor-bottom:2%;--monitor-width:57%;--phone-left:4%;--phone-bottom:8%;--phone-tilt:-5deg;--monitor-x:1;--monitor-y:0;--phone-x:-1;--phone-y:-1;--building-x:1;--building-y:0}
#space-slide-commercial{--monitor-left:1%;--monitor-bottom:1%;--monitor-width:58%;--phone-left:71%;--phone-bottom:9%;--phone-tilt:5deg;--monitor-x:-1;--monitor-y:1;--phone-x:1;--phone-y:-1;--building-y:-1}
.space-slide .space-monitor{left:var(--monitor-left);bottom:var(--monitor-bottom);width:var(--monitor-width)}
.space-slide .space-phone{left:var(--phone-left);right:auto;bottom:var(--phone-bottom);width:var(--phone-width);transform:rotate(var(--phone-tilt))}
@media(prefers-reduced-motion:no-preference){
 .space-slide.is-active .space-building{animation:space-property-arrive .6s both}
 .space-slide.is-active .space-monitor{animation:space-display-arrive .65s .06s both}
 .space-slide.is-active .space-phone{animation:space-mobile-arrive .65s .13s both}
}
@keyframes space-property-arrive{from{opacity:0;transform:translate(calc(var(--building-x)*var(--fly-distance)),calc(var(--building-y)*var(--fly-distance)))}to{opacity:1;transform:translate(0,0)}}
@keyframes space-display-arrive{from{opacity:0;transform:translate(calc(var(--monitor-x)*var(--fly-distance)),calc(var(--monitor-y)*var(--fly-distance)))}to{opacity:1;transform:translate(0,0)}}
@keyframes space-mobile-arrive{from{opacity:0;transform:translate(calc(var(--phone-x)*var(--fly-distance)),calc(var(--phone-y)*var(--fly-distance))) rotate(var(--phone-tilt))}to{opacity:1;transform:translate(0,0) rotate(var(--phone-tilt))}}
@media(max-width:599px){.space-scene{--fly-distance:10px}.space-slide{--phone-width:25%}#space-slide-office{--phone-left:71%}#space-slide-commercial{--phone-left:70%}}
@media(prefers-reduced-motion:reduce){.space-circle{transition:none}}

/* Short screens keep the active property copy with its artwork. */
.space-scene-frame{display:contents}.space-scene-copy{display:none}
.space-scroll-scene-only .space-scene-frame{display:block;position:sticky;top:var(--space-pin-top,90px)}
.space-scroll-scene-only .space-scene{position:relative;top:auto;margin-top:8px}
.space-scroll-scene-only .space-scene-copy{display:block;box-sizing:border-box;padding:0 0 10px;background:#f7f8f2}
.space-scene-copy h3{font-size:19px;line-height:1.3;margin:0 0 6px;color:var(--ink)}
.space-scene-copy p{font-size:14px;line-height:1.45;margin:0;color:#465f66}
@media(max-height:500px) and (min-width:600px){.space-scroll-scene-only .space-scene-frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px}.space-scroll-scene-only .space-scene-copy{min-height:0!important}.space-scroll-scene-only .space-scene{width:min(100%,calc(var(--space-art-height)*1.08))}}