/* ============================================================
   ESTAARA — Mizumi pillar page, INSTRUMENT stylesheet (v2).
   Styles ONLY the JS-generated SVG nodes (location radius map +
   isometric masterplan) plus the loan sliders. Concrete hex — no
   CSS vars, no @import, no tag/base styles (the page is Designer-
   styled; this file must never fight Webflow classes).
   Palette: fg #1C1A18 / #4B4640 / #726B63 · accent #BF9B6F /
   dark #A6804F · border rgba(28,26,24,.10) / -2 .16
   ============================================================ */

/* ---------- location radius map (inside [data-locmap]) ---------- */
.locmap__svg { display: block; width: 100%; height: auto; max-width: 33.75rem; margin: 0 auto; }
.lm-ring { fill: none; stroke: rgba(28,26,24,0.16); stroke-width: 1; }
.lm-ring-lab { fill: #726B63; font: 500 12px 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; }
.lm-core { fill: #BF9B6F; }
.lm-core-ring { fill: none; stroke: #BF9B6F; stroke-width: 1.5; opacity: 0.45; }
.lp { cursor: default; }
.lp-halo { fill: rgba(28,26,24,0); transition: fill .2s cubic-bezier(0.16,1,0.3,1); }
.lp.is-hl .lp-halo { fill: rgba(28,26,24,0.07); }
.lp-dot { stroke: rgba(255,255,255,0); stroke-width: 2.5; transition: stroke .2s cubic-bezier(0.16,1,0.3,1); }
.lp.is-hl .lp-dot { stroke: #fff; }
.lp-ic { pointer-events: none; }

/* ---------- isometric masterplan (inside [data-mp-svg]) ---------- */
[data-mp-svg] svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 20rem); margin: 0 auto; }
.iso-zone { fill: #F0EBE1; stroke: rgba(28,26,24,.16); stroke-width: 1.2; }
.iso-future { fill: rgba(28,26,24,.03); stroke: rgba(28,26,24,.16); stroke-width: 1.2; stroke-dasharray: 4 7; }
.iso-lawn { fill: rgba(158,148,136,.24); stroke: rgba(28,26,24,.12); stroke-width: 1.2; }
.iso-lake { fill: rgba(147,164,181,.42); stroke: rgba(147,164,181,.7); stroke-width: 1; }
.iso-road { fill: none; stroke: rgba(28,26,24,.18); stroke-linecap: round; stroke-linejoin: round; }
.iso-tree ellipse { fill: rgba(28,26,24,.08); }
.iso-tree circle { fill: rgba(158,148,136,.55); stroke: rgba(28,26,24,.18); stroke-width: .8; }
.iso-tower { cursor: pointer; }
.iso-tower .f-top { fill: #FFFFFF; stroke: rgba(28,26,24,.35); stroke-width: 1; }
.iso-tower .f-x { fill: #E7E1D6; stroke: rgba(28,26,24,.28); stroke-width: 1; }
.iso-tower .f-y { fill: #D8D1C4; stroke: rgba(28,26,24,.28); stroke-width: 1; }
.iso-tower.is-hl .f-top { fill: rgba(191,155,111,.30); }
.iso-tower.is-hl .f-x { fill: #E2D4BF; }
.iso-tower.is-hl .f-y { fill: #D4C3AA; }
.iso-bld .f-top { fill: #F0E2CD; stroke: rgba(166,128,79,.5); stroke-width: 1; }
.iso-bld .f-x { fill: #E2D2BA; stroke: rgba(166,128,79,.4); stroke-width: 1; }
.iso-bld .f-y { fill: #D5C3A8; stroke: rgba(166,128,79,.4); stroke-width: 1; }
/* labels carry a paper-coloured halo (paint-order) so they stay legible over plates/towers */
.iso-tid { fill: #1C1A18; font: 600 12px 'Hanken Grotesk', Arial, sans-serif; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: #FFFFFF; stroke-width: 3; stroke-linejoin: round; }
.iso-label { fill: #4B4640; font: 600 15px 'Hanken Grotesk', Arial, sans-serif; paint-order: stroke; stroke: #F8F6F2; stroke-width: 4; stroke-linejoin: round; }
.iso-label.is-faint { fill: #6F6860; font-weight: 500; }
.iso-am { cursor: pointer; }
.iso-am line { stroke: #A6804F; stroke-width: 1.5; }
.iso-am circle { fill: #FFFFFF; stroke: #BF9B6F; stroke-width: 2; transition: all .25s cubic-bezier(0.16,1,0.3,1); }
.iso-am text { fill: #A6804F; font: 700 12px 'Hanken Grotesk', Arial, sans-serif; text-anchor: middle; transition: fill .25s cubic-bezier(0.16,1,0.3,1); }
.iso-am:hover circle, .iso-am.is-active circle { fill: #BF9B6F; }
.iso-am:hover text, .iso-am.is-active text { fill: #FFFFFF; }

/* ---------- loan calculator sliders (brand accent, not browser blue) ---------- */
.loan input[type="range"] { accent-color: #BF9B6F; height: 1.25rem; }
.loan input[type="range"]:focus-visible { outline: 2px solid rgba(191,155,111,.5); outline-offset: 2px; }