.ufa-immersive{width:min(1160px,96vw);height:min(850px,94dvh);overflow:hidden;display:none;flex-direction:column;background:#faf9f7}
.ufa-immersive[open]{display:flex;animation:ufa-arrive .65s cubic-bezier(.16,1,.3,1)}
.ufa-immersive header{flex:none;border:0}
.ufa-heading{padding:8px 32px;z-index:2;pointer-events:none}
.ufa-heading h2{font:36px Georgia;margin:7px 0}
.ufa-heading p{font-size:12px;color:#686879;margin:0;min-height:2.6em}
.ufa-space{position:relative;flex:1;min-height:180px;perspective:1400px;display:grid;place-items:center;background:radial-gradient(ellipse,#e2e8f288,transparent 68%)}
.ufa-orbit{width:min(390px,58vw);height:145px;position:relative;transform-style:preserve-3d;transform:translateY(35px) rotateX(52deg) rotateZ(-25deg);transition:transform .85s cubic-bezier(.22,1,.36,1),width .85s cubic-bezier(.22,1,.36,1),height .85s cubic-bezier(.22,1,.36,1)}
/* No opacity/filter/overflow on the 3D container: those flatten its walls. */
.ufa-surface{position:absolute;inset:0;padding:0;border:0;border-radius:0;background:transparent;transform-style:preserve-3d;transform:translateZ(calc(var(--level)*105px));transition:transform .85s cubic-bezier(.22,1,.36,1);cursor:pointer;outline-offset:8px;appearance:none;color:#000066}
.ufa-surface,.ufa-surface:hover{filter:none}
.ufa-surface[hidden]{display:none}
.ufa-shell{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(0);transition:transform .35s cubic-bezier(.22,1,.36,1);pointer-events:none}
.ufa-surface:focus-visible{outline:3px solid #990000}
@media(hover:hover){.ufa-surface:hover .ufa-shell{transform:translateZ(10px)}}
.ufa-surface:focus-visible .ufa-shell{transform:translateZ(10px)}
.ufa-face{position:absolute;inset:0;background:#d9d3c4;border:1px solid #a9a28f;box-shadow:0 18px 45px #294a3928;overflow:hidden;backface-visibility:hidden;transition:background .55s,border-color .55s,box-shadow .55s}
.ufa-roof{position:absolute;inset:-3px;transform-style:preserve-3d;transition:opacity .35s;pointer-events:none}
.ufa-roof-plane{position:absolute;left:0;right:0;height:52.6%;background:#54584e;border:1px solid #696d61;backface-visibility:hidden;overflow:hidden}
.ufa-roof-back{top:0;transform-origin:top;transform:rotateX(18deg)}
.ufa-roof-front{bottom:0;transform-origin:bottom;transform:rotateX(-18deg)}
.ufa-roof svg{display:block;width:100%;height:100%}
.ufa-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;background:#ffffff;pointer-events:none;user-select:none;transform-origin:50% 50%;transition:opacity .5s .15s;will-change:transform}
.ufa-edge{position:absolute;left:0;right:0;top:100%;height:70px;transform-origin:top;transform:rotateX(-90deg);background:#a55d4d;border:1px solid #845d4a;box-sizing:border-box;backface-visibility:hidden;transition:opacity .25s}
.ufa-edge svg{display:block;width:100%;height:100%}
.ufa-edge>b{position:absolute;left:12px;bottom:12px;font:15px Georgia;color:#fff6e9;text-shadow:0 1px 3px #462d22}
.ufa-side{position:absolute;top:0;left:100%;width:70px;height:100%;transform-origin:left;transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#865e49 0 9px,#b48b7155 10px 11px);border:1px solid #785543;backface-visibility:hidden;transition:opacity .25s}
.ufa-surface-label{position:absolute;bottom:10px;left:14px;display:flex;justify-content:space-between;gap:25px;padding:7px 10px;border-radius:6px;background:#fcfdf5ed;color:#000066;font-size:12px;transition:opacity .2s}
.ufa-controls{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 24px;z-index:3;flex:none;flex-wrap:wrap}
.ufa-controls button,.ufa-controls select{border:1px solid #d0d9e6;border-radius:9px;padding:10px 14px;background:#ffffff;color:#000066;font:inherit;font-size:12px}
.ufa-controls [hidden]{display:none!important}
.ufa-navigation{display:flex;gap:3px}
.ufa-unit-select{font-size:11px;color:#686879}
.ufa-original{font-size:12px;color:#000066}
.ufa-evidence{font-size:10px;text-align:center;color:#686879;padding:0 24px 14px;flex:none}
.ufa-expanded .ufa-orbit{width:96%;height:100%;transform:translateY(0) rotateX(0) rotateZ(0)}
.ufa-expanded .ufa-surface.chosen{transform:translateZ(0);cursor:grab;touch-action:none}
.ufa-expanded .ufa-surface .ufa-shell{transform:translateZ(0)}
.ufa-expanded .ufa-surface:not(.chosen){transform:translateZ(-180px) translateX(900px) rotateZ(12deg);visibility:hidden;pointer-events:none;transition:transform .7s,visibility 0s .7s}
.ufa-expanded .ufa-face{border-color:transparent;box-shadow:none;background:transparent}
.ufa-expanded .ufa-surface.floor-preview .ufa-face{border-color:transparent;box-shadow:none}
.ufa-expanded .ufa-face img{opacity:1}
.ufa-expanded .ufa-edge,.ufa-expanded .ufa-side,.ufa-expanded .ufa-surface-label,.ufa-expanded .ufa-roof{opacity:0}
.ufa-dragging .ufa-surface.chosen{cursor:grabbing}
.ufa-single .ufa-orbit{transform:translateY(0) rotateX(52deg) rotateZ(-25deg)}
.ufa-single.ufa-expanded .ufa-orbit{transform:none}
@keyframes ufa-arrive{from{opacity:0;transform:translateY(30px) scale(.92)}to{opacity:1;transform:none}}
@media(max-width:600px){.ufa-immersive{width:100vw;height:100dvh;max-height:none;border-radius:0;margin:0}.ufa-heading{padding:4px 22px}.ufa-heading h2{font-size:29px}.ufa-orbit{width:260px;height:115px}.ufa-surface-label{font-size:10px;left:7px;gap:12px}.ufa-controls{gap:8px;padding:10px}.ufa-controls button,.ufa-controls select{padding:9px 10px}.ufa-evidence{font-size:9px;padding:0 15px 8px}.ufa-expanded .ufa-orbit{width:98%;height:100%}}
@media(prefers-reduced-motion:reduce){.ufa-immersive,.ufa-orbit,.ufa-surface,.ufa-shell,.ufa-face,.ufa-face img,.ufa-edge,.ufa-side,.ufa-surface-label,.ufa-roof{animation:none!important;transition:none!important}}
/* Each pitched plane uses its corresponding half of the roof texture. */
.ufa-roof-plane svg{height:200%;position:absolute;left:0;top:0}
.ufa-roof-front svg{top:-100%}
/* Row -> representative townhouse -> floor; no unit-letter locations inferred. */
.ufa-townhouse-row{position:absolute;width:min(92%,850px);display:flex;align-items:flex-end;perspective:900px;transform:rotate(-3deg);transition:opacity .45s,transform .8s cubic-bezier(.22,1,.36,1)}
.ufa-townhouse{position:relative;flex:1;padding:0;border:0;background:none;border-radius:0;filter:none!important;transform-style:preserve-3d;cursor:pointer;transition:transform .5s;box-shadow:0 14px 20px #263d3522}
.ufa-townhouse:focus-visible{outline:3px solid #396e52;outline-offset:5px;z-index:2}.ufa-townhouse:hover{transform:translateY(-6px);z-index:2}
.ufa-townhouse-storey{display:block;position:relative;aspect-ratio:1.6;background:#a55d4d}.ufa-townhouse-storey svg{position:absolute;inset:0;width:100%;height:100%}
.ufa-townhouse-roof{display:block;height:28px;background:linear-gradient(150deg,#8a8b7e,#424c43);clip-path:polygon(0 100%,12% 0,100% 0,100% 100%);border-bottom:4px solid #e5dfcf;margin:0 -2px}
.ufa-row-porch{position:absolute;left:48%;top:13%;width:40%;height:30%;background:#f0ead6;clip-path:polygon(0 100%,50% 0,100% 100%);filter:drop-shadow(0 4px 1px #26362b);transform:translateY(-4px)}
.ufa-immersive:not(.ufa-unit-focused) .ufa-orbit{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(40px) rotateX(52deg) rotateZ(-25deg) scale(.4)}
.ufa-unit-focused .ufa-townhouse-row{opacity:0;transform:scale(1.8) translateY(30px);pointer-events:none;visibility:hidden;transition:opacity .4s,transform .8s,visibility 0s .8s}
.ufa-unit-focused .ufa-orbit{width:250px;height:220px;transition:transform .85s,width .85s,height .85s,opacity .6s;opacity:1}
.ufa-unit-focused.ufa-expanded .ufa-orbit{width:96%;height:100%}
.ufa-immersive:not(.ufa-unit-focused) .ufa-unit-select{display:none}
.ufa-back-row{border:1px solid #d0d9e6;border-radius:9px;padding:10px 14px;background:#ffffff;color:#000066;font-size:12px}
/* UFA photo: a steep shed hood with triangular SIDE cheeks, not a front gable.
   Shared local coordinates: wall at y=0, front at y=32, roof drops 28px.
   Keeping every piece on those same endpoints avoids the old twisted porch. */
.ufa-porch{position:absolute;top:100%;left:53%;width:39%;height:32px;transform:translateZ(-16px);transform-style:preserve-3d;pointer-events:none;transition:opacity .25s}
.ufa-porch-top{position:absolute;top:0;left:-2px;right:-2px;height:42.52px;box-sizing:border-box;background:repeating-linear-gradient(0deg,#4e5860 0 7px,#657078 7px 8px);border:1px solid #696f69;transform:rotateX(-41.19deg);transform-origin:top;backface-visibility:hidden}
.ufa-porch-cheek{position:absolute;top:0;width:28px;height:32px;background:#eee9db;clip-path:polygon(0 0,100% 100%,100% 0);transform-origin:left top;transform:rotateY(90deg);backface-visibility:visible}
.ufa-porch-cheek-left{left:0;background:#d9d5c8}
.ufa-porch-cheek-right{left:100%}
.ufa-porch-posts{position:absolute;top:100%;left:0;right:0;height:26px;box-sizing:border-box;border-top:4px solid #eee9db;border-left:3px solid #eee9db;border-right:3px solid #eee9db;transform-origin:top;transform:translateZ(-28px) rotateX(-90deg)}
.ufa-expanded .ufa-porch{opacity:0;visibility:hidden}
@media(max-width:600px){.ufa-townhouse-row{width:94%}.ufa-townhouse-roof{height:17px}.ufa-unit-focused .ufa-orbit{width:185px;height:175px}.ufa-unit-focused.ufa-expanded .ufa-orbit{width:98%;height:100%}.ufa-surface-label{font-size:10px;padding:5px;left:5px;gap:5px}}
@media(prefers-reduced-motion:reduce){.ufa-townhouse-row,.ufa-townhouse,.ufa-porch{transition:none!important}}
/* A unit uses one bay of the shared façade artwork; clip the other bays. */
.ufa-edge svg,.ufa-townhouse-storey svg{overflow:hidden}

/* Immediate entry with one gentle fade, not stacked map/dialog jumps. */
.ufa-immersive[open]{animation:ufa-entry-fade .4s ease-out}
@keyframes ufa-entry-fade{from{opacity:0}to{opacity:1}}
.ufa-floor-name{position:absolute;bottom:5px;left:38px;color:#fff8e8;font:12px Arial,sans-serif;text-shadow:0 1px 3px #3e3028;background:#5c4237b8;padding:2px 5px;border-radius:3px}
.ufa-surface-label{display:none}
@media(prefers-reduced-motion:reduce){.ufa-immersive[open]{animation:none}}
/* Screen-space labels cannot collide with the roof or neighboring slice. */
.ufa-floor-name{display:none}
.ufa-floor-callouts{position:absolute;left:calc(50% - 290px);top:42%;display:flex;flex-direction:column;gap:65px;z-index:4}
.ufa-floor-callouts button{background:#ffffff;border:1px solid #d0d9e6;border-radius:9px;padding:10px 14px;text-align:left;font-size:13px;color:#000066;filter:none!important;transition:background .18s,border-color .18s}
.ufa-floor-callouts button span{display:block;font-size:10px;margin-top:3px;color:#686879}
.ufa-floor-callouts button.floor-preview{background:#f5e5e5;border-color:#990000}
.ufa-surface:hover .ufa-shell,.ufa-surface:focus-visible .ufa-shell{transform:translateZ(0)}
.ufa-surface.floor-preview .ufa-face{border:3px solid #990000;box-shadow:0 0 0 3px #d99b9b55,0 16px 40px #294a3920}
.ufa-surface.floor-preview .ufa-edge{border:3px solid #990000}
.ufa-surface.floor-preview .ufa-edge::after{content:'';position:absolute;inset:0;background:#d99b9b38;pointer-events:none}
.ufa-expanded .ufa-floor-callouts{display:none}
@media(max-width:600px){.ufa-floor-callouts{left:8px;top:38%;gap:92px}.ufa-floor-callouts button{padding:7px;font-size:11px;max-width:90px}.ufa-unit-focused:not(.ufa-expanded) .ufa-orbit{margin-left:35px}}
.ufa-immersive.ufa-spatial-arrival[open]{animation:ufa-scene-materialize 1.1s ease-out}
.ufa-spatial-arrival::backdrop{animation:ufa-map-recede 1.1s ease-out}
.ufa-spatial-arrival .ufa-heading,.ufa-spatial-arrival header,.ufa-spatial-arrival .ufa-controls,.ufa-spatial-arrival .ufa-evidence,.ufa-spatial-arrival .ufa-floor-callouts{animation:ufa-controls-arrive .8s .2s both}
@keyframes ufa-scene-materialize{0%{background:transparent;border-color:transparent;box-shadow:none}30%{background:#faf9f777;border-color:transparent;box-shadow:none}100%{background:#faf9f7}}
@keyframes ufa-map-recede{from{background:transparent;backdrop-filter:blur(0)}to{background:#00006645;backdrop-filter:blur(8px)}}
@keyframes ufa-controls-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.ufa-spatial-arrival,.ufa-spatial-arrival::backdrop,.ufa-spatial-arrival *{animation:none!important}}
/* Hit-test the visible architectural faces, not the overlapping slab rectangle.
   Events bubble from each face to its owning floor button. */
.ufa-immersive:not(.ufa-expanded) .ufa-surface{pointer-events:none}
.ufa-immersive:not(.ufa-expanded) .ufa-face,
.ufa-immersive:not(.ufa-expanded) .ufa-edge,
.ufa-immersive:not(.ufa-expanded) .ufa-side,
.ufa-immersive:not(.ufa-expanded) .ufa-roof-plane,
.ufa-immersive:not(.ufa-expanded) .ufa-porch-top,
.ufa-immersive:not(.ufa-expanded) .ufa-porch-cheek,
.ufa-immersive:not(.ufa-expanded) .ufa-porch-posts{pointer-events:auto;cursor:pointer}
.ufa-expanded .ufa-surface.chosen{pointer-events:auto}
/* Bring the model toward its heading while keeping labels aligned with floors. */
.ufa-unit-focused:not(.ufa-expanded) .ufa-orbit{top:-55px}
.ufa-floor-callouts{margin-top:-55px}
@media(max-width:600px){.ufa-unit-focused:not(.ufa-expanded) .ufa-orbit{top:-25px}.ufa-floor-callouts{margin-top:-25px}}

/* Architectural materials: slate roofs and outlined limestone porch supports. */
.ufa-roof-plane{background:#34445c;border-color:#26374e}
.ufa-edge{background:#9b493e;border-color:#713b34}
.ufa-side{background:repeating-linear-gradient(90deg,#74382f 0 9px,#a66b6366 10px 11px);border-color:#713b34}
.ufa-porch-top{background:repeating-linear-gradient(0deg,#34445c 0 7px,#60748e 7px 8px);border-color:#26374e}
.ufa-porch-posts{border-color:#a2aab5;border-width:5px 4px 0;filter:drop-shadow(1px 1px 0 #46576b);box-shadow:inset 1px 0 #f1f2f5,inset -1px 0 #f1f2f5}
.ufa-porch-cheek{background:#d4dae2}
.ufa-porch-cheek-left{background:#9ca8b7}