.roof-map-section{--ink:#0b335b;--navy:#0b335b;--muted:#486684;--surface:#f3f4f6;--teal:#35baba;--teal-ink:#1a7e7f;--sale:var(--teal);--soon:#e3c281;--sold:#9aa2ad;--map-bg:#edebe8;--map-bg2:#e8e8e8;--map-water:#96b7e3;--ease-card:cubic-bezier(.25, 1, .5, 1);--ease-nav:cubic-bezier(.4, 0, .2, 1);--ease-grid:cubic-bezier(.2, 0, 0, 1);--ease:var(--dur-base) var(--ease-nav);position:relative;overflow:hidden}.roof-map-section a{color:inherit;text-decoration:none}.roof-map-section .explore-layout{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;display:grid}.roof-map-section .explore-layout>.map-panel{grid-column:span 8}.roof-map-section .explore-layout>.explore-rail{grid-column:span 4}.roof-map-section .map-panel,.roof-map-section .proj-slider{border-radius:4px;overflow:hidden}.roof-map-section .map-panel{background:var(--map-bg);height:460px;position:relative}.roof-map-section .map-stage{transition:opacity var(--dur-base) var(--ease-nav) calc(var(--step) * 6);position:absolute;inset:0}.roof-map-section .map-canvas{width:100%;height:100%;position:absolute;inset:0}.roof-map-section .map-live .map-stage{opacity:0;pointer-events:none}.roof-map-section .mp-land{fill:var(--map-bg)}.roof-map-section .mp-block{fill:var(--map-bg2)}.roof-map-section .mp-green{fill:#cecece;opacity:.5}.roof-map-section .mp-water{fill:var(--map-water);opacity:.38}.roof-map-section .mp-street{stroke:#fff;stroke-width:3px;fill:none;vector-effect:non-scaling-stroke}.roof-map-section .mp-art-case{stroke:#cecece;stroke-width:13px;fill:none;opacity:.5;stroke-linecap:round;vector-effect:non-scaling-stroke}.roof-map-section .mp-art{stroke:#fff;stroke-width:9px;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}.roof-map-section .map-photo{cursor:grab;transition:opacity var(--dur-base) var(--ease-nav) calc(var(--step) * 6);position:absolute;inset:0;overflow:hidden}.roof-map-section .map-live .map-photo{opacity:0;pointer-events:none}.roof-map-section .map-photo img{-webkit-user-select:none;user-select:none;max-width:none;position:absolute}.roof-map-section .map-photo .gpin-wrap{position:absolute;top:0;left:0}.roof-map-section .map-photo[data-pz=far] .pin-chip,.roof-map-section .map-photo[data-pz=mid] .pin-chip{display:none}.roof-map-section .map-photo[data-pz=mid] .gpin:hover .pin-chip,.roof-map-section .map-photo[data-pz=mid] .gpin.active .pin-chip{display:block}.roof-map-section .map-photo[data-pz=far] .pin-photo{border-width:4px;border-radius:14px}.roof-map-section .map-photo-attrib{z-index:3;color:var(--muted);cursor:auto;background:#ffffffd1;border-radius:5px 0 0;padding:0 6px;font-size:10px;line-height:18px;position:absolute;bottom:0;right:0}.roof-map-section .map-photo-attrib a{color:var(--muted)}.roof-map-section .map-loading{z-index:4;border:2px solid #0b335b29;border-top-color:var(--navy);border-radius:50%;width:22px;height:22px;animation:.8s linear infinite map-loading-turn;position:absolute;top:142px;right:26px}@keyframes map-loading-turn{to{transform:rotate(360deg)}}.roof-map-section .gmap{opacity:0;pointer-events:none;transition:opacity var(--dur-reveal) var(--ease-nav);position:absolute;inset:0}.roof-map-section .map-live .gmap{opacity:1;pointer-events:auto}.roof-map-section .gmap canvas{outline:none}.roof-map-section .maplibregl-map{font-family:inherit}.roof-map-section .maplibregl-ctrl-attrib{background:#ffffffd1;border-radius:5px 0 0;font-size:10px}.roof-map-section .maplibregl-ctrl-attrib a{color:var(--muted)}.roof-map-section .maplibregl-ctrl-bottom-right{z-index:3}.roof-map-section .maplibregl-cooperative-gesture-screen{display:none}.roof-map-section .gpin-wrap{will-change:transform;line-height:0}.roof-map-section .gpin{color:var(--sale);transform:scale(var(--pz,1));transform-origin:bottom;transition:transform var(--dur-quick) var(--ease-card), opacity var(--dur-quick) var(--ease-card), filter var(--dur-quick) var(--ease-card);flex-direction:column;align-items:center;display:flex}.roof-map-section .gpin:hover{transform:scale(calc(var(--pz,1) * 1.07))}.roof-map-section .gpin.active{transform:scale(calc(var(--pz,1) * 1.12))}:is(.roof-map-section .gpin-wrap:has(.gpin:hover),.roof-map-section .gpin-wrap:has(.gpin.active)){z-index:6}.roof-map-section .pin-photo{background-position:50%;background-size:cover;border:3px solid;border-radius:10px;width:56px;height:56px;display:block;box-shadow:0 6px 18px #0b335b38}.roof-map-section .pin-stem{background:currentColor;width:2px;height:10px;display:block}.roof-map-section .pin-chip{letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:var(--sale);color:#fff;border-radius:5px;margin-top:6px;padding:6px 14px;font-size:11px;font-weight:600;line-height:1.1}[dir=rtl] .roof-map-section .pin-chip{letter-spacing:0;text-transform:none}.roof-map-section .pin-soon{color:var(--soon)}.roof-map-section .pin-soon .pin-chip{background:var(--soon)}.roof-map-section .pin-sold{color:var(--sold)}.roof-map-section .pin-sold .pin-chip{background:var(--sold)}.roof-map-section .pin-sold .pin-photo{filter:grayscale();opacity:.8}.roof-map-section .gpin.active .pin-photo{box-shadow:0 0 0 4px #35baba47,0 10px 24px #0b335b4d}.roof-map-section .pin-soon.gpin.active .pin-photo{box-shadow:0 0 0 4px #f47b4747,0 10px 24px #0b335b4d}.roof-map-section .gpin.pin-dim{opacity:.14;filter:grayscale();pointer-events:none}.roof-map-section .gmap[data-pz=far] .pin-chip,.roof-map-section .gmap[data-pz=mid] .pin-chip{display:none}.roof-map-section .gmap[data-pz=mid] .gpin:hover .pin-chip,.roof-map-section .gmap[data-pz=mid] .gpin.active .pin-chip{display:block}.roof-map-section .gmap[data-pz=far] .pin-photo{border-width:4px;border-radius:14px}.roof-map-section .map-legend{z-index:4;background:#fff;border-radius:10px;align-items:center;gap:18px;padding:10px 16px;display:flex;position:absolute;top:20px;left:20px;box-shadow:0 4px 16px #0b335b1a}.roof-map-section .map-legend button{color:var(--navy);cursor:pointer;transition:color var(--ease);align-items:center;gap:7px;font-size:12px;display:inline-flex}.roof-map-section .map-legend button:disabled{cursor:default}.roof-map-section .map-legend button:not(:disabled):hover,.roof-map-section .map-legend button.on{color:var(--teal-ink)}.roof-map-section .map-legend button.on{font-weight:600}.roof-map-section .map-legend i{border-radius:50%;flex:none;width:9px;height:9px}.roof-map-section .lg-sale{background:var(--sale)}.roof-map-section .lg-soon{background:var(--soon)}.roof-map-section .lg-sold{background:var(--sold)}.roof-map-section .map-zoom{z-index:4;flex-direction:column;gap:6px;display:flex;position:absolute;top:20px;right:20px}.roof-map-section .map-zoom button{width:34px;height:34px;color:var(--navy);cursor:pointer;transition:background var(--ease);background:#fff;border-radius:8px;justify-content:center;align-items:center;font-size:17px;line-height:1;display:flex;box-shadow:0 4px 16px #0b335b1a}.roof-map-section .map-zoom button:hover{background:var(--surface)}.roof-map-section .map-zoom button svg{display:block}.roof-map-section .map-card{z-index:5;width:286px;color:var(--navy);opacity:0;visibility:hidden;transform-origin:0 100%;transition:opacity var(--dur-base) var(--ease-nav), transform var(--dur-base) var(--ease-card), visibility 0s linear var(--dur-base);background:#fff;border-radius:10px;position:absolute;bottom:44px;left:20px;overflow:hidden;transform:translateY(14px)scale(.97);box-shadow:0 18px 44px #0b335b42}.roof-map-section .map-card.open{transition:opacity var(--dur-base) var(--ease-nav), transform var(--dur-base) var(--ease-card), visibility 0s linear 0s;opacity:1;visibility:visible;transform:none}.roof-map-section .mc-img{background:var(--map-bg2) center / cover no-repeat;height:132px}.roof-map-section .mc-body{padding:14px 16px 16px}.roof-map-section .mc-chip{letter-spacing:.06em;text-transform:uppercase;background:var(--sale);color:#fff;border-radius:5px;margin-bottom:8px;padding:4px 9px;font-size:11px;font-weight:600;display:inline-block}.roof-map-section .mc-chip.chip-soon{background:var(--soon)}.roof-map-section .mc-chip.chip-sold{background:var(--sold)}.roof-map-section .mc-title{font-size:17px;font-weight:500;line-height:1.25}.roof-map-section .mc-sub{color:var(--muted);margin-top:3px;font-size:12px}.roof-map-section .mc-cta{letter-spacing:.04em;text-transform:uppercase;color:var(--teal-ink);align-items:center;gap:6px;margin-top:12px;font-size:12px;font-weight:600;display:inline-flex}.roof-map-section .mc-x{z-index:2;width:26px;height:26px;color:var(--navy);cursor:pointer;transition:background var(--ease), color var(--ease);background:#ffffffe6;border-radius:2px;justify-content:center;align-items:center;font-size:19px;line-height:1;display:flex;position:absolute;top:8px;right:10px}.roof-map-section .mc-x:hover{color:var(--teal-ink);background:#fff}.roof-map-section .proj-slider{background:var(--navy);touch-action:pan-y;height:460px;position:relative}.roof-map-section .ps-track{height:100%;transition:transform var(--dur-reveal) var(--ease-nav);will-change:transform;display:flex}.roof-map-section .ps-slide{flex:0 0 100%;height:100%;position:relative;overflow:hidden}.roof-map-section .ps-img{background-position:50%;background-size:cover;position:absolute;inset:0}.roof-map-section .ps-slide:after{content:"";background:linear-gradient(#0b335b00 0%,#0b335b0f 44%,#0b335b57 68%,#0b335b9e 84%,#0b335bcc 100%);position:absolute;inset:0}.roof-map-section .ps-body{z-index:2;color:#fff;padding:28px 28px 62px;position:absolute;bottom:0;left:0;right:0}.roof-map-section .ps-body h3{letter-spacing:-.01em;margin-bottom:8px;font-size:24px;font-weight:500;line-height:1.2}.roof-map-section .ps-body p{color:#ffffffbf;font-size:13.5px}.roof-map-section .ps-progress{z-index:3;gap:6px;display:flex;position:absolute;bottom:28px;left:28px}.roof-map-section .ps-bar{cursor:pointer;background:#ffffff52;border-radius:2px;width:24px;height:3px;padding:0;display:block;overflow:hidden}.roof-map-section .ps-bar i{background:var(--teal);width:0;height:100%;display:block}.roof-map-section .ps-bar.active i{animation:4s linear forwards rms-rail-fill}.roof-map-section .proj-slider.paused .ps-bar.active i{animation-play-state:paused}@keyframes rms-rail-fill{0%{width:0}to{width:100%}}@media (max-width:1024px){.roof-map-section .explore-layout{grid-template-columns:1fr}.roof-map-section .explore-layout>.map-panel,.roof-map-section .explore-layout>.explore-rail{grid-column:auto}.roof-map-section .map-panel{height:460px}.roof-map-section .proj-slider{height:400px}}@media (max-width:640px){.roof-map-section .map-panel{--pz:.8;height:380px}.roof-map-section .map-legend{flex-wrap:wrap;gap:6px 10px;max-width:calc(100% - 70px);padding:9px 10px;top:14px;left:14px}.roof-map-section .map-legend button{white-space:nowrap;gap:5px;font-size:11px}.roof-map-section .map-zoom{top:14px;right:14px}.roof-map-section .map-card{width:auto;display:flex;bottom:40px;left:14px;right:14px}.roof-map-section .mc-img{flex:none;width:104px;height:auto;min-height:104px}.roof-map-section .mc-body{padding:12px 14px 14px}.roof-map-section .mc-title{font-size:15px}.roof-map-section .proj-slider{height:360px}.roof-map-section .ps-body{padding:22px 22px 56px}.roof-map-section .ps-body h3{font-size:21px}}@media (prefers-reduced-motion:reduce){.roof-map-section .ps-track,.roof-map-section .gpin{transition:none}}@media (pointer:coarse){.roof-map-section .map-legend button,.roof-map-section .map-zoom button{position:relative}.roof-map-section .map-legend button:before,.roof-map-section .map-zoom button:before{content:"";width:max(100%,44px);height:max(100%,44px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.roof-map-section .ps-bar{position:relative;overflow:visible}.roof-map-section .ps-bar i{border-radius:inherit}.roof-map-section .ps-bar:before{content:"";position:absolute;inset:-21px -3px}.roof-map-section .ps-body h3 a{display:inline-block;position:relative}.roof-map-section .ps-body h3 a:before{content:"";width:max(100%,44px);height:max(100%,44px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}[dir=rtl] .roof-map-section .map-legend{left:auto;right:20px}[dir=rtl] .roof-map-section .map-zoom{left:20px;right:auto}[dir=rtl] .roof-map-section .map-card{transform-origin:100% 100%;left:auto;right:20px}[dir=rtl] .roof-map-section .mc-x{left:10px;right:auto}[dir=rtl] .roof-map-section .ps-progress{left:auto;right:28px}@media (max-width:640px){[dir=rtl] .roof-map-section .map-legend{left:auto;right:14px}[dir=rtl] .roof-map-section .map-zoom{left:14px;right:auto}[dir=rtl] .roof-map-section .map-card{left:14px;right:14px}}[dir=rtl] .roof-map-section .map-loading{left:26px;right:auto}@media (max-width:640px){.roof-map-section .map-loading{top:136px;right:20px}[dir=rtl] .roof-map-section .map-loading{left:20px;right:auto}}