/* OCEANIQ brand system / Brand Book version 02. White canvas, slate structure, cyan wave. */
:root{--ink:#2E3748;--navy:#2E3748;--deep:#F4F7F7;--cyan:#0ED9E7;--gold:#D6BDA8;--paper:#FFFFFF;--text:#2E3748;--muted:#738D78;--line:#2E37482b;--mist:#F4F7F7;--sage:#738D78;font-family:'Manrope','DM Sans',Arial,sans-serif;color:var(--ink);background:var(--paper)}
body{background:#fff;color:var(--ink);font-family:'Manrope','DM Sans',Arial,sans-serif}
.header{height:88px;padding:0 38px;background:#fff;border-bottom:1px solid #2e37481f;color:var(--ink)}
.brand{gap:12px;align-items:center}.brand-lockup{display:block;width:180px;height:auto;object-fit:contain}.brand-location{display:block;font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:1.7px;color:#738d78;white-space:nowrap}
.nav{gap:30px}.nav-button{color:#738d78;font-weight:550}.nav-button.active{color:#2E3748}.nav-button:hover{color:#2E3748}.nav-button:after{background:#0ED9E7}.nav-count{border-color:#2e37483d;color:#2E3748}.nav-button.active .nav-count{background:#0ed9e71a;border-color:#0ed9e7}
.header-tools{color:#2E3748}.collection-trigger,.locale-trigger{border-color:#2e374834;background:#fff;color:#2E3748}.collection-trigger:hover,.locale-trigger:hover,.locale-trigger[aria-expanded=true]{border-color:#0ED9E7;background:#F4F7F7}.collection-trigger strong{background:#0ED9E7;color:#2E3748}.header-action{border-color:#2e37483d;color:#2E3748}.header-action:hover{background:#F4F7F7}
.workspace{background:#fff}.explorer{background:#fff}.map-topbar{background:#fff;border-bottom:1px solid #2e37481f;color:#2E3748}.map-topbar .map-heading .eyebrow{color:#0ED9E7}.map-topbar .map-heading h1{color:#2E3748;font-family:'Manrope','DM Sans',Arial,sans-serif;font-weight:500;letter-spacing:-1.35px}.map-tool-button{background:#fff;border-color:#2e37483d;color:#2E3748}.map-tool-button:hover,.map-tool-button[aria-expanded=true]{background:#F4F7F7;border-color:#0ED9E7}.tool-icon{color:#0ED9E7}.hotel-explore-button{background:#0ED9E7;color:#2E3748;border-color:#0ED9E7;box-shadow:0 7px 18px #0ed9e744}.hotel-explore-button:hover,.hotel-explore-button.is-highlighted{background:#43e5ee;border-color:#0ED9E7}.map-actions .angle-button{background:#fff;color:#2E3748;border-color:#2e37483d}.map-actions .angle-button:hover{background:#F4F7F7;border-color:#0ED9E7}
.map-shade{background:linear-gradient(90deg,#2e37482d,transparent 30%),linear-gradient(0deg,#2e37484a,transparent 18%)}.map-bottom-bar{background:#fff;border-top:1px solid #2e37481f;color:#2E3748}.map-bottom-bar .map-help{color:#2E3748;text-shadow:none}.map-bottom-bar .map-controls{background:#fff;border-color:#2e374834;box-shadow:0 5px 22px #2e374814}.map-bottom-bar .map-controls button{color:#2E3748}.map-bottom-bar .map-controls button:hover{background:#F4F7F7;color:#2E3748}.map-controls #zoomLevel{color:#2E3748}.map-footer{background:#2E3748;border-color:#2e3748;color:#F4F7F7}.map-footer p{color:#dbe6e1}.outline-key{border-color:#0ED9E7;background:#0ed9e71b}.footer-mark{color:#F4F7F7}
.fog-toggle,.traffic-toggle{background:#fff;color:#2E3748;border-color:#fff;box-shadow:0 5px 18px #2e374855}.fog-toggle:hover,.traffic-toggle:hover{background:#F4F7F7;border-color:#0ED9E7}.fog-toggle:focus-visible,.traffic-toggle:focus-visible{outline-color:#0ED9E7}
.unit .plot{stroke:#2e374889}.unit:hover .plot,.unit:focus .plot,.unit.selected .plot{fill:#0ed9e720;stroke:#0ED9E7}.unit .marker rect{fill:#2E3748;stroke:#fff;stroke-width:1.2}.unit .marker text{fill:#fff}.unit:hover .marker rect,.unit:focus .marker rect,.unit.selected .marker rect{fill:#0ED9E7;stroke:#2E3748}.unit:hover .marker text,.unit:focus .marker text,.unit.selected .marker text{fill:#2E3748}
.hover-card{background:#fff;color:#2E3748;border:1px solid #2e37481f;box-shadow:0 22px 55px #2e374840}.hover-body p{color:#738D78}.hover-footer{border-color:#2e37481c;color:#738D78}.hover-label{background:#F4F7F7;color:#2E3748}.hover-tags span{background:#F4F7F7;border-color:#738d7852;color:#2E3748}
.detail-panel{background:#fff;color:#2E3748;border-left-color:#2e37481f}.detail-top{background:#fff;border-color:#2e37481f}.detail-top span,.detail-title .eyebrow,.section-label{color:#738D78}.detail-title h2{font-family:'Manrope','DM Sans',Arial,sans-serif;font-weight:500;color:#2E3748}.detail-subtitle{color:#738D78}.subtle-badge{color:#2E3748;background:#F4F7F7;border-color:#738d7852}.detail-tabs{background:#fffffff5;border-color:#2e37481f}.detail-tabs button{color:#738D78}.detail-tabs button.active{color:#2E3748;border-color:#0ED9E7}.detail-description,.note{color:#526170}.feature{color:#738D78}.feature svg{stroke:#2E3748}.detail-pagination{background:#F4F7F7;border-color:#2e37481f;color:#738D78}.detail-pagination button{background:#fff;border-color:#2e37483d;color:#2E3748}.detail-pagination button:hover{background:#F4F7F7;border-color:#0ED9E7}.primary-button{background:#0ED9E7;color:#2E3748;border-radius:4px}.primary-button:hover{background:#43e5ee;box-shadow:0 8px 20px #0ed9e744}.secondary-button{border-color:#2e37483d;color:#2E3748;background:#fff}.secondary-button:hover{background:#F4F7F7;border-color:#0ED9E7}
.list-view{background:#fff;color:#2E3748}.list-heading h1{font-family:'Manrope','DM Sans',Arial,sans-serif;color:#2E3748;font-weight:500;letter-spacing:-1px}.list-heading p{color:#738D78}.villa-card{background:#F4F7F7;border-color:#2e37481f}.villa-card:hover{border-color:#0ED9E7;box-shadow:0 18px 38px -16px #2e37483b}.card-id{background:#2E3748;color:#fff;border-color:#fff}.card-content h3{font-family:'Manrope','DM Sans',Arial,sans-serif;color:#2E3748;font-weight:500}.card-content p,.property-card-facts{color:#738D78}.villa-tag{background:#fff;color:#2E3748;border-color:#738d7852}.villa-tag.gold{background:#D6BDA8;color:#2E3748;border-color:#D6BDA8}.card-open{color:#2E3748;border-color:#738d7852}
.collection-trigger svg,.property-action svg{stroke:currentColor}.property-action{background:#fff;color:#2E3748;border-color:#2e37483d}.property-action:hover,.property-action[aria-pressed=true]{background:#F4F7F7;border-color:#0ED9E7;color:#2E3748}.property-action[aria-pressed=true][data-property-action=save] svg{fill:#0ED9E7;stroke:#2E3748}.whatsapp-enquiry{background:#0ED9E7;color:#2E3748!important}.whatsapp-enquiry:hover{background:#43e5ee}.property-facts>div{border-color:#2e37481f}.property-facts dt{color:#738D78}.property-facts dd{color:#2E3748}
.media-dialog{background:#2E3748;color:#fff}.gallery-shell .media-thumbs,.gallery-footer .gallery-step{background:#2E3748;border-color:#738d7852}.gallery-shell .media-header h2{font-family:'Manrope','DM Sans',Arial,sans-serif}.gallery-shell .media-thumbs button.active{border-color:#0ED9E7}.about-dialog{border-color:#2e374833}.about-content h2{font-family:'Manrope','DM Sans',Arial,sans-serif;color:#2E3748}.about-content .eyebrow{color:#0ED9E7}.about-features span{border-color:#738d7852;color:#2E3748}.toast{background:#0ED9E7;color:#2E3748}
/* Brandbook overrides for the premium interaction layer. */
.welcome-backdrop{background:linear-gradient(130deg,#2e3748f2,#2e3748d9),url('assets/bright/masterplan-front-main.webp') center/cover}.welcome-card{background:#fff;color:#2E3748;border-color:#2e374833;box-shadow:0 30px 100px #2e374866}.welcome-card .eyebrow{color:#0ED9E7}.welcome-card h1{font-family:'Manrope','DM Sans',Arial,sans-serif;font-weight:500;letter-spacing:-1.9px;color:#2E3748}.welcome-card>p{color:#526170}.welcome-mark{border-color:#0ED9E7;color:#2E3748}.welcome-note{color:#738D78}.welcome-note>span:first-child{color:#0ED9E7}.layer-panel{background:#fff;color:#2E3748;border-color:#2e374833;box-shadow:0 25px 70px #2e374840}.layer-panel h2{font-family:'Manrope','DM Sans',Arial,sans-serif;font-weight:500}.layer-panel-copy{color:#738D78}.layer-close{background:#F4F7F7;color:#2E3748;border-color:#2e374833}.layer-close:hover{background:#0ED9E7}.layer-option{background:#F4F7F7;color:#2E3748}.layer-option:hover{border-color:#0ED9E7;background:#fff}.layer-option small{color:#738D78}.layer-option i{background:#dce5e0;border-color:#738d78aa}.layer-option input:checked+i{background:#0ED9E7;border-color:#0ED9E7}.layer-option input:checked+i:after{background:#2E3748}.layer-panel-actions .secondary-button{background:#fff}.tour-dialog,.enquiry-dialog{border-color:#2e374833}.tour-copy h2,.enquiry-dialog h2{font-family:'Manrope','DM Sans',Arial,sans-serif;font-weight:500;color:#2E3748}.tour-copy .eyebrow,.tour-dialog .eyebrow,.enquiry-dialog .eyebrow{color:#0ED9E7}.tour-copy p,.enquiry-dialog>p,.enquiry-dialog label{color:#526170}.tour-progress i{background:#0ED9E7}.tour-dialog.tour-is-last #tourNext{background:#0ED9E7;color:#2E3748}.locale-panel{border-color:#2e374833}.locale-options button[aria-pressed=true]{background:#0ED9E7;border-color:#0ED9E7;color:#2E3748}
.theme-night .header,.theme-night .map-topbar,.theme-night .map-bottom-bar{background:#2E3748;color:#fff}.theme-night .brand-location,.theme-night .nav-button,.theme-night .map-topbar .map-heading h1{color:#fff}.theme-night .nav-button.active{color:#0ED9E7}.theme-night .collection-trigger,.theme-night .locale-trigger{background:#2E3748;color:#fff;border-color:#ffffff55}.theme-night .map-bottom-bar .map-controls{background:#2E3748;color:#fff;border-color:#ffffff55}.theme-night .map-bottom-bar .map-help{color:#fff}.theme-night .map-footer{background:#2E3748}
@media(max-width:900px){.header{padding-inline:23px}.brand-lockup{width:155px}.brand-location{font-size:8px;letter-spacing:1.2px}.nav{gap:22px}}
@media(max-width:700px){.header{height:86px;padding:8px 15px 0;display:grid;grid-template-columns:1fr auto;grid-template-rows:46px 32px;background:#fff}.brand-lockup{width:140px}.brand-location{display:none}.nav{grid-column:1/-1;grid-row:2;height:32px;gap:18px;justify-content:flex-start;margin:0}.nav-button{font-size:12px}.header-tools{gap:5px}.locale-trigger{font-size:9px;padding:6px 5px}.workspace{height:calc(100dvh - 86px)}.map-topbar{padding:13px 16px}.map-topbar .map-heading h1{font-size:24px}.map-actions{margin-top:10px}.map-bottom-bar{background:#fff}.list-view{background:#fff}}
@media(max-height:550px) and (orientation:landscape){.header{height:62px;display:flex;padding:0 16px}.workspace{height:calc(100dvh - 62px)}.brand-lockup{width:140px}.brand-location{display:none}}
/* Front view / Skyview switch: the supplied front composition remains the default. */
.view-toggle{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid #2e37483d;border-radius:6px;background:#fff;box-shadow:0 4px 14px #2e374812}
.view-toggle-label{font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:#738d78;padding:0 6px 0 7px}
.view-toggle-button{min-height:30px;padding:0 10px;border-radius:4px;background:transparent;color:#2e3748;font-size:12px;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.view-toggle-button:hover{background:#f4f7f7}.view-toggle-button.active{background:#2e3748;color:#fff;box-shadow:0 3px 8px #2e37482e}.view-toggle-button:focus-visible{outline-color:#0ed9e7}
.map-backdrop{background-image:url('assets/bright/masterplan-front-main.webp')}
.map-world .masterplan-sky-backdrop{position:absolute;inset:-28px;background:url('assets/bright/masterplan-skyview.webp') center/cover;filter:blur(18px) saturate(.9);opacity:0;transition:opacity .45s;pointer-events:none}
.map-world .sky-view-image{display:none;object-fit:fill;object-position:center;opacity:0;transition:opacity .45s;position:absolute;inset:0;width:100%;height:100%;z-index:2;background:#163b35}
.map-world .front-view-image{opacity:1;transition:opacity .45s;position:absolute;inset:0;width:100%;height:100%;z-index:1}
body.masterplan-skyview .map-world .masterplan-sky-backdrop{opacity:.58}
body.masterplan-skyview .map-world .front-view-image{opacity:0}
body.masterplan-skyview .map-world .sky-view-image{display:block;opacity:1}
body.masterplan-skyview .map-world>#hotspots,body.masterplan-skyview .map-world>.resort-focus,body.masterplan-skyview .map-world>.hill-fog,body.masterplan-skyview .map-world>.road-traffic{opacity:0;pointer-events:none}
body:not(.masterplan-skyview) .map-world>#skyHotspots{opacity:0;pointer-events:none}
body.masterplan-skyview .map-world>#skyHotspots{opacity:1;pointer-events:auto}
.sky-unit{cursor:pointer;outline:none}.sky-hit{fill:#0ed9e700;stroke:#0ed9e700;transition:fill .18s,stroke .18s}.sky-marker{transition:opacity .2s}.sky-marker rect{fill:#2e3748e8;stroke:#fff;stroke-width:1.1;filter:drop-shadow(0 4px 7px #06241e66);transition:fill .18s,stroke .18s}.sky-marker text{fill:#fff;font:700 15px 'DM Sans',sans-serif;text-anchor:middle;dominant-baseline:middle}.sky-unit:hover .sky-hit,.sky-unit:focus-visible .sky-hit,.sky-unit.selected .sky-hit{fill:#0ed9e72b;stroke:#0ed9e7}.sky-unit:hover .sky-marker rect,.sky-unit:focus-visible .sky-marker rect,.sky-unit.selected .sky-marker rect{fill:#0ed9e7;stroke:#2e3748}.sky-unit:hover .sky-marker text,.sky-unit:focus-visible .sky-marker text,.sky-unit.selected .sky-marker text{fill:#2e3748}.labels-hidden .sky-marker{opacity:0}.labels-hidden .sky-unit:hover .sky-marker,.labels-hidden .sky-unit.selected .sky-marker{opacity:1}
body:not(.masterplan-skyview) .map-world .marker,body:not(.masterplan-skyview) .map-world .hotel-callout{opacity:0;pointer-events:none}
body.masterplan-skyview .map-shade{background:linear-gradient(180deg,#0b2e2a12,#0b2e2a32)}
body.masterplan-skyview .map-heading h1{color:#fff;text-shadow:0 2px 18px #06241e}
@media(max-width:700px){.map-actions{flex-wrap:wrap;gap:6px}.view-toggle{order:5}.view-toggle-label{display:none}.view-toggle-button{min-height:28px;padding-inline:9px}}
body.theme-night .brand-lockup{content:url('assets/brand/oceaniq-lockup-reverse.png')}
/* Skyview selection layer sits above the aerial image and keeps villa numbers readable at every zoom. */
.map-world>#skyHotspots{z-index:3}
/* Refined hover: a quiet halo, slight depth, and a glass detail card keep the map elegant. */
.map-world.has-hover .unit:not(.hovered):not(.selected),.map-world.has-hover .sky-unit:not(.hovered):not(.selected){opacity:.62;transition:opacity .28s ease}
.map-world .unit,.map-world .sky-unit{transition:opacity .28s ease,filter .28s ease}
.map-world .unit.hovered,.map-world .sky-unit.hovered{filter:drop-shadow(0 7px 11px #05241e66);}
.map-world .unit.hovered .plot,.map-world .unit:focus-visible .plot{stroke:#0ed9e7;stroke-width:2.3;filter:drop-shadow(0 0 6px #0ed9e799)}
.map-world .sky-unit.hovered .sky-hit,.map-world .sky-unit:focus-visible .sky-hit{fill:#0ed9e72e;stroke:#b7fff4;stroke-width:2;filter:drop-shadow(0 0 7px #0ed9e7aa)}
.map-world .unit.hovered .marker rect,.map-world .sky-unit.hovered .sky-marker rect{fill:#0ed9e7;stroke:#fff;filter:drop-shadow(0 5px 10px #06241e88)}
.hover-card{border:1px solid #0ed9e766;border-radius:14px;background:linear-gradient(180deg,#fffffff5,#f4f7f7f2);backdrop-filter:blur(18px) saturate(1.1);box-shadow:0 24px 60px #06241e52,0 0 0 1px #ffffffaa inset;transform:translateY(10px) scale(.97);transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
.hover-card:before{content:'';display:block;position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#0ed9e7,#d6bda8);opacity:.9}
.hover-card.visible{transform:translateY(0) scale(1)}
.hover-image{height:108px;filter:saturate(1.05)}
.hover-body{padding:15px 16px 16px}.hover-body h3{letter-spacing:-.3px}.hover-footer{margin-top:2px;padding-top:11px}.hover-label{border:1px solid #0ed9e74d}.hover-tags span{border-radius:999px}
@media(prefers-reduced-motion:reduce){.map-world .unit,.map-world .sky-unit,.hover-card{transition:none}}