:root{
  --iw-navy:#08133C;
  --iw-blue:#0E2885;
  --iw-purple:#883C97;
  --iw-orange:#F95E28;
  --iw-cream:#F0E9E0;
  --iw-line:rgba(8,19,60,.12);
}
/* No min-height. The map column sizes itself to the space actually left
   below the header (see .hp-iw-map-shell), so forcing a full viewport
   here only added the header's height back on and put a scrollbar on a
   page that now fits. */
.hp-iw{background:#f5f6f8;color:var(--iw-navy)}
/* ── The title bar is a label, not a hero ───────────────────────────
 * It used to be a 64px headline over a 17px paragraph with 34px of
 * padding: about 300px, measured, before the map began. On a 1280x720
 * laptop that left 325px for the map, so the tool this page exists for
 * did not fit on the screen and the visitor had to scroll it into view —
 * and then any movement scrolled it back out.
 *
 * A landing page earns a headline that size. A workspace someone came to
 * use does not: it needs to say where you are and get out of the way. */
.hp-iw-topbar{
  display:flex;justify-content:space-between;align-items:center;gap:30px;
  padding:16px clamp(22px,4vw,64px);background:#fff;border-bottom:1px solid var(--iw-line)
}
.hp-iw-topbar>div:first-child{max-width:860px}
.hp-iw-eyebrow{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--iw-purple)}
.hp-iw-topbar h1{margin:3px 0 0;font-size:clamp(21px,2vw,27px);line-height:1.15;letter-spacing:-.03em}
/* The description is orientation for a first visit, worth nothing on the
   fifth — and on a short screen it costs map. Kept, but it yields first. */
.hp-iw-topbar p{margin:4px 0 0;max-width:760px;color:#657086;font-size:14px;line-height:1.45}
@media (max-height:820px){ .hp-iw-topbar p{display:none} }
.hp-iw-top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hp-iw-top-actions a,.hp-iw-top-actions button{
  min-height:44px;padding:0 16px;border-radius:999px;font-weight:800;text-decoration:none;cursor:pointer
}
.hp-iw-top-actions a{display:inline-flex;align-items:center;background:var(--iw-blue);color:#fff}
/* "All listings" is the way out of the map, not the thing to do on it —
   so it reads as a link with a border, and the primary action keeps the
   only solid fill in the row. Two filled buttons side by side is how a
   header stops telling you which one matters. */
.hp-iw-top-actions a.hp-iw-secondary{background:#fff;color:var(--iw-blue);border:1px solid rgba(14,40,133,.28)}
.hp-iw-top-actions button{display:none;border:1px solid var(--iw-line);background:#fff;color:var(--iw-navy)}
.hp-iw-layout{display:grid;grid-template-columns:360px minmax(0,1fr)}
/* The filter column scrolls inside itself rather than scrolling the page,
   so a long filter list never drags the map off screen. */
.hp-iw-sidebar{
  padding:25px 22px 34px;background:#fff;border-right:1px solid var(--iw-line);
  overflow:auto;max-height:calc(100dvh - var(--iw-chrome, 230px) + 22px);position:sticky;top:0
}
.hp-iw-sidebar-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.hp-iw-sidebar-head strong{display:block;font-size:18px}
.hp-iw-sidebar-head span{display:block;color:#778096;font-size:13px;margin-top:3px}
.hp-iw-sidebar-head button{display:none;border:0;background:none;font-size:30px;color:var(--iw-navy)}
.hp-iw-lenses{display:flex;gap:7px;overflow:auto;padding:2px 0 17px}
.hp-iw-lenses button{
  border:1px solid var(--iw-line);background:#fff;color:#4c566d;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:850;white-space:nowrap;cursor:pointer
}
.hp-iw-lenses button.is-active{background:var(--iw-navy);border-color:var(--iw-navy);color:#fff}
.hp-iw-filters{display:grid;gap:15px}
.hp-iw-filters label{display:grid;gap:6px}
.hp-iw-filters label>span,.hp-iw-personalize summary{font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.07em;color:#606a80}
.hp-iw-filters input,.hp-iw-filters select{
  width:100%;min-height:45px;border:1px solid rgba(8,19,60,.15);border-radius:11px;background:#fff;color:var(--iw-navy);padding:0 12px;font:inherit
}
.hp-iw-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hp-iw-transaction{display:grid;grid-template-columns:1fr 1fr;padding:4px;background:#f0f2f6;border-radius:12px}
.hp-iw-transaction button{border:0;background:transparent;border-radius:9px;min-height:39px;color:#606a80;font-weight:850;cursor:pointer}
.hp-iw-transaction button.is-active{background:#fff;color:var(--iw-blue);box-shadow:0 4px 13px rgba(8,19,60,.08)}
.hp-iw-personalize{border:1px solid var(--iw-line);border-radius:13px;padding:13px}
.hp-iw-personalize summary{cursor:pointer;color:var(--iw-blue)}
.hp-iw-personalize label{margin-top:13px}
.hp-iw-personalize label span{display:flex;justify-content:space-between}
.hp-iw-personalize input[type=range]{min-height:auto;padding:0;border:0}
.hp-iw-update{min-height:49px;border:0;border-radius:12px;background:var(--iw-orange);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 11px 24px rgba(249,94,40,.2)}
.hp-iw-layer-switches{display:grid;gap:9px;margin-top:18px;padding-top:18px;border-top:1px solid var(--iw-line);font-size:13px;color:#596176}
.hp-iw-layer-switches label{display:flex;gap:8px;align-items:center}
/* ── The map fills its column, and the column fits the screen ───────
 * This used to be `grid-template-rows: minmax(580px,1fr) auto` with a
 * 610px-tall map above a panel of listing cards. Both rows together were
 * taller than the viewport, so the map could not be looked at without
 * scrolling it partly off — and the page scrolled itself whenever a pin
 * was hovered. The card panel is gone (r34); the map now gets the whole
 * column, sized so the bottom edge lands inside the window rather than
 * below it. Nothing on this page scrolls vertically any more, which is
 * the actual fix for "the map is not staying". */
.hp-iw-map-column{min-width:0;padding:22px;display:grid;grid-template-rows:1fr}
.hp-iw-map-shell{
  position:relative;
  /* Fill the column, but never demand more height than the window has
     left under the header — dvh so mobile browser chrome collapsing does
     not leave a gap. The floor keeps it usable on a short laptop screen. */
  min-height:max(440px, calc(100dvh - var(--iw-chrome, 230px)));
  border-radius:25px;overflow:hidden;background:#dae2e6;box-shadow:0 18px 50px rgba(8,19,60,.12)
}
.hp-iw-map{position:absolute;inset:0;z-index:1}
.hp-iw-map .leaflet-tile-pane{filter:saturate(.72) contrast(.94) brightness(1.05)}
.hp-iw-map-head{
  position:absolute;z-index:700;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;gap:16px;align-items:center;pointer-events:none
}
/* The white pill is for the lens/status badge only — not for the button
   group that now shares this bar, which would otherwise be wrapped in a
   card of its own. */
.hp-iw-map-badge{
  padding:12px 15px;border:1px solid rgba(255,255,255,.7);border-radius:15px;background:rgba(255,255,255,.9);box-shadow:0 12px 30px rgba(8,19,60,.12);backdrop-filter:blur(14px)
}
/* Scoped to the badge. These were bare `.hp-iw-map-head span/button`
   descendant selectors, which is fine while the bar holds one badge and
   one button — and wrong the moment anything else moves in, because the
   Draw and Full screen buttons each contain a <span> label and would
   have been rendered as 10px uppercase purple eyebrows on a blue pill.
   Type selectors this broad are how a stylesheet acquires a cascade you
   cannot reason about; the specificity here is deliberate. */
.hp-iw-map-badge span{display:block;color:var(--iw-purple);font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.hp-iw-map-badge strong{display:block;margin-top:2px;font-size:13px}
#hpIwSearchArea{
  pointer-events:auto;border:0;border-radius:999px;padding:11px 15px;background:var(--iw-blue);color:#fff;font-weight:850;box-shadow:0 10px 24px rgba(14,40,133,.24);cursor:pointer
}
.hp-iw-legend{
  position:absolute;z-index:700;left:18px;bottom:18px;display:flex;gap:12px;padding:10px 13px;border-radius:999px;background:rgba(255,255,255,.9);font-size:11px;font-weight:800;color:#566078;backdrop-filter:blur(13px)
}
.hp-iw-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}.hp-iw-dot.low{background:#b54a3a}.hp-iw-dot.good{background:#e8b84a}.hp-iw-dot.excellent{background:#156b45}
.hp-iw-insight{
  position:absolute;z-index:700;right:18px;bottom:18px;width:min(330px,calc(100% - 36px));padding:20px;border:1px solid rgba(255,255,255,.55);border-radius:20px;background:rgba(8,19,60,.91);color:#fff;box-shadow:0 18px 40px rgba(8,19,60,.25);backdrop-filter:blur(15px)
}
.hp-iw-insight-kicker{display:block;font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#cfd5f7}
.hp-iw-insight>strong{display:block;font-size:23px;margin:5px 0 6px}
.hp-iw-insight p{margin:0;color:#cbd1e1;font-size:13px;line-height:1.5}
.hp-iw-score-main{display:flex;align-items:flex-end;gap:10px;margin:7px 0}.hp-iw-score-main b{font-size:42px;line-height:1}.hp-iw-score-main span{padding-bottom:4px;color:#d4daf0;font-size:12px}
.hp-iw-score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:13px}.hp-iw-score-grid span{padding:8px;border-radius:10px;background:rgba(255,255,255,.08);font-size:10px}.hp-iw-score-grid b{display:block;color:#fff;font-size:14px}
/* ── Listing grid (not rendered on /intelligence-map/ since r34) ────
 * The page dropped its card grid; the script still renders one on any
 * page that supplies #hpIwResults, so these rules stay. They are inert
 * without that element — nothing here is a global. */
.hp-iw-results-panel{background:#fff;border:1px solid var(--iw-line);border-radius:20px;padding:18px}
.hp-iw-results-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px}
.hp-iw-results-head span{display:block;color:#7c8496;font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.hp-iw-results-head strong{display:block;margin-top:2px;font-size:18px}
.hp-iw-results-head a{color:var(--iw-blue);font-weight:850;text-decoration:none}
.hp-iw-results{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:12px;overflow:auto}
.hp-iw-card{min-width:0;border:1px solid var(--iw-line);border-radius:15px;overflow:hidden;color:var(--iw-navy);text-decoration:none;background:#fff}
.hp-iw-card img{width:100%;height:120px;object-fit:cover;background:#e9ebef}
.hp-iw-card-body{display:grid;padding:12px}.hp-iw-card-body strong{font-size:17px}.hp-iw-card-body span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:750}.hp-iw-card-body small{color:#727b90;margin-top:3px}
.hp-iw-price-pin{background:transparent;border:0}.hp-iw-price-pin span{display:inline-flex;align-items:center;justify-content:center;min-width:62px;height:29px;padding:0 9px;border:2px solid #fff;border-radius:999px;background:var(--iw-blue);color:#fff;font:850 11px/1 system-ui;box-shadow:0 7px 17px rgba(8,19,60,.22)}
.hp-iw-community-marker{display:grid;place-items:center;width:44px!important;height:44px!important;border:3px solid #fff;border-radius:50%;background:var(--iw-navy);color:#fff;font:900 12px/1 system-ui;box-shadow:0 8px 22px rgba(8,19,60,.28)}
@media(max-width:1100px){
  .hp-iw-layout{grid-template-columns:320px minmax(0,1fr)}
  .hp-iw-results{grid-template-columns:repeat(3,minmax(190px,1fr))}
}
@media(max-width:860px){
  .hp-iw-top-actions button{display:inline-flex;align-items:center}
  .hp-iw-layout{display:block}
  .hp-iw-sidebar{position:fixed;z-index:2000;inset:0 auto 0 0;width:min(380px,92vw);max-height:none;transform:translateX(-105%);transition:transform .24s ease;box-shadow:20px 0 60px rgba(8,19,60,.22)}
  .hp-iw-sidebar.is-open{transform:translateX(0)}
  .hp-iw-sidebar-head button{display:block}
  .hp-iw-map-column{padding:14px}
  .hp-iw-results{grid-template-columns:repeat(2,minmax(210px,1fr))}
}
@media(max-width:620px){
  /* Was a 40px headline in a stacked column: 506px of chrome, measured,
     on a 390x844 phone — more than half the screen spent before the map.
     The actions wrap under the title instead of the title growing. */
  .hp-iw-topbar{align-items:flex-start;flex-direction:column;gap:12px;padding:14px 18px}
  .hp-iw-topbar h1{font-size:20px}
  /* Three lines of description on a phone is three lines of map. */
  .hp-iw-topbar p{display:none}
  /* Phones: the title bar is a real part of the page and is meant to
     scroll away, so the map takes what is left of the screen with a
     smaller floor than the desktop one. */
  .hp-iw-map-shell{min-height:max(430px, calc(100dvh - var(--iw-chrome, 300px)))}
  .hp-iw-insight{right:12px;bottom:58px;left:12px;width:auto}
  .hp-iw-legend{left:12px;bottom:12px}
  .hp-iw-results{display:flex}.hp-iw-card{min-width:255px}
}

/* ═══════════════════════════════════════════════════════════════════
 * Release 20 — map: clusters, full screen, community legend
 * ═══════════════════════════════════════════════════════════════════ */

/* Cluster badge. Deliberately a different SHAPE from the price pin —
   round versus pill — so the two read as different kinds of thing at a
   glance rather than as a price you cannot quite make out. */
.hp-iw-cluster{background:transparent;border:0}
.hp-iw-cluster span{
  display:grid;place-items:center;
  border-radius:50%;
  border:3px solid #fff;
  background:radial-gradient(circle at 32% 28%, #1d4ed8, #0e2885 68%);
  color:#fff;
  font:900 13px/1 system-ui,-apple-system,'Segoe UI',sans-serif;
  font-variant-numeric:tabular-nums;
  box-shadow:0 8px 22px rgba(8,19,60,.32);
  cursor:pointer;
  transition:transform .15s cubic-bezier(.22,1,.36,1);
}
.hp-iw-cluster:hover span{transform:scale(1.08)}

/* Full-screen control */
.hp-iw-fullscreen-btn{
  display:inline-flex; align-items:center; gap:7px;
  height:38px; padding:0 14px;
  border:1px solid rgba(8,19,60,.14); border-radius:999px;
  background:rgba(255,255,255,.96); color:#0e2885;
  font:800 12px/1 system-ui,-apple-system,'Segoe UI',sans-serif;
  box-shadow:0 6px 18px rgba(8,19,60,.16);
  cursor:pointer;
}
.hp-iw-fullscreen-btn svg{width:15px;height:15px;flex:none}
.hp-iw-fullscreen-btn:hover{background:#fff}
.hp-iw-fullscreen-btn:focus-visible{outline:3px solid rgba(249,94,40,.5);outline-offset:2px}

/* The CSS path is the PRIMARY one on iPhone, where the Fullscreen API
   does not work on arbitrary elements. position:fixed + inset:0 gives
   the same result without it. */
.hp-iw-map-shell.is-fullscreen{
  position:fixed; inset:0; z-index:4000;
  /* dvh, not vh: on iOS Safari 100vh is taller than the visible area
     while the toolbars are showing, which pushed the map's bottom edge
     and the exit button off screen — in full screen, of all places. */
  border-radius:0; min-height:100dvh; height:100dvh; width:100vw;
  box-shadow:none;
}
body.hp-iw-fullscreen-open{overflow:hidden}

/* The insight card is useful full screen but must not cover the map on a
   phone, where it would take most of the viewport. */
@media (max-width:640px){
  .hp-iw-map-shell.is-fullscreen .hp-iw-insight{display:none}
  /* Icon-only on phones: three labelled pills plus the badge do not fit
     across a 390px bar, and wrapping them pushes the row over the map. */
  .hp-iw-fullscreen-btn span,.hp-iw-draw-btn span{display:none}
  .hp-iw-fullscreen-btn,.hp-iw-draw-btn{padding:0;width:38px;justify-content:center}
  .hp-iw-map-head{gap:8px}
  .hp-iw-map-badge{padding:9px 11px}
}

/* ── Cluster panel: the homes behind the number ────────────────────── */
.hp-iw-cluster-popup .leaflet-popup-content-wrapper{
  border-radius:16px; padding:0; overflow:hidden;
  box-shadow:0 22px 60px rgba(8,19,60,.28);
}
.hp-iw-cluster-popup .leaflet-popup-content{margin:0;width:330px!important}
.hp-iw-cluster-popup .leaflet-popup-tip{background:#fff}

.hp-iw-cluster-panel header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid rgba(8,19,60,.10);
  background:#0e2885; color:#fff;
}
.hp-iw-cluster-panel header strong{font:800 14px/1 system-ui,-apple-system,'Segoe UI',sans-serif}
.hp-iw-cluster-panel header button{
  border:1px solid rgba(255,255,255,.45); border-radius:999px;
  background:transparent; color:#fff; cursor:pointer;
  font:800 11px/1 system-ui,-apple-system,'Segoe UI',sans-serif; padding:6px 11px;
}
.hp-iw-cluster-panel header button:hover{background:rgba(255,255,255,.15)}

/* Fixed height + scroll: a 40-home cluster must not grow a popup taller
   than the map it sits on. */
.hp-iw-cp-scroll{max-height:326px; overflow-y:auto; overscroll-behavior:contain}

.hp-iw-cp-row{
  display:grid; grid-template-columns:66px 1fr; gap:10px;
  padding:9px 12px; border-bottom:1px solid rgba(8,19,60,.08);
  color:inherit; text-decoration:none;
}
.hp-iw-cp-row:last-child{border-bottom:0}
.hp-iw-cp-row:hover{background:#f4f6fc}
.hp-iw-cp-thumb{display:block;width:66px;height:50px;border-radius:8px;overflow:hidden;background:#dfe4f0}
.hp-iw-cp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hp-iw-cp-noimg{display:block;width:100%;height:100%;
  background:linear-gradient(135deg,#e3e8f4,#cfd7ea)}
.hp-iw-cp-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.hp-iw-cp-body strong{font:800 14px/1.2 system-ui,-apple-system,'Segoe UI',sans-serif;color:#07142e}
.hp-iw-cp-addr{font-size:12px;color:#4a5468;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-iw-cp-meta{font-size:11px;color:#78829a}
.hp-iw-cluster-panel footer{
  padding:9px 13px; font-size:11px; color:#667084;
  background:#f7f8fb; border-top:1px solid rgba(8,19,60,.08);
}

@media (max-width:640px){
  .hp-iw-cluster-popup .leaflet-popup-content{width:270px!important}
  .hp-iw-cluster-popup .leaflet-popup-content-wrapper{max-width:270px}
  .hp-iw-cp-scroll{max-height:250px}
}

/* ── Draw to search ────────────────────────────────────────────────── */
/* Draw area and Full screen sit in the map's top bar (see the JS comment
   on mapHeadActions): the bottom-right corner they used to occupy is
   under the opaque insight card, which made both invisible. */
.hp-iw-map-head-actions{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  justify-content:flex-end; pointer-events:auto;
}
.hp-iw-draw-btn{
  display:inline-flex; align-items:center; gap:7px;
  height:38px; padding:0 14px;
  border:1px solid rgba(8,19,60,.14); border-radius:999px;
  background:rgba(255,255,255,.96); color:#0e2885;
  font:800 12px/1 system-ui,-apple-system,'Segoe UI',sans-serif;
  box-shadow:0 6px 18px rgba(8,19,60,.16); cursor:pointer;
}
.hp-iw-draw-btn svg{width:15px;height:15px;flex:none}
.hp-iw-draw-btn:hover{background:#fff}
.hp-iw-draw-btn:focus-visible{outline:3px solid rgba(249,94,40,.5);outline-offset:2px}
.hp-iw-draw-btn.is-active,
.hp-iw-draw-btn.is-set{background:#f95e28;border-color:#f95e28;color:#fff}

/* Crosshair only while drawing, so the map still reads as draggable the
   rest of the time. */
.hp-iw-map.is-drawing{cursor:crosshair}
.hp-iw-map.is-drawing .leaflet-grab{cursor:crosshair}

/* ── Map and list share one selection ──────────────────────────────── */
.hp-iw-card.is-focus{
  background:#fff6f2;
  box-shadow:inset 3px 0 0 #f95e28;
}
.hp-iw-price-pin.is-focus span{
  background:#f95e28;
  transform:scale(1.12);
  z-index:900;
}
.hp-iw-price-pin span{transition:transform .12s ease, background .12s ease}

/* Already opened. Dimmed, not hidden — a listing you looked at is still a
   listing, and hiding it would quietly edit what someone is shown. */
.hp-iw-price-pin.is-seen span{
  background:#8a93a8;
  border-color:rgba(255,255,255,.85);
}