/* market.css — Our Market section, Service-area map, neighborhood detail templates
   Visual map (no pan/zoom). Heat map for active + under-contract counts.
   Toggle for average values. Click → /neighborhoods/:slug.
   ──────────────────────────────────────────────────────── */

/* ───── Section frame ───── */
.market {
  position: relative;
  padding: var(--pad-section) 0;
  background: var(--bg);
}
.market-head {
  padding: 0 var(--pad-gutter);
  margin-bottom: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
}
.market-head .section-num { color: var(--accent); }
.market-head h2 {
  font-family: var(--f-display);
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 12px 0 0;
}
.market-head p.market-lede {
  max-width: 38ch;
  color: var(--ink-soft);
  line-height: 1.55;
  font-size: 16px;
}

/* ───── Layer / data toggles ───── */
.market-controls {
  padding: 0 var(--pad-gutter);
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-top: 18px;
  padding-bottom: 18px;
}
.market-controls-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.market-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.market-toggle:hover { color: var(--ink); border-color: var(--ink-soft); }
.market-toggle.on {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}
.market-toggle .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.market-toggle.on .dot { background: var(--bg); }

.market-legend {
  display: inline-flex; align-items: center; gap: 12px;
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.market-legend-bar {
  width: 140px; height: 8px; border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(235,230,221,0.05) 0%,
    var(--accent-2) 55%,
    var(--accent) 100%
  );
}

/* ───── The map ───── */
.market-map-wrap {
  position: relative;
  margin: 0 var(--pad-gutter);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(201,169,110,0.04) 0%, transparent 60%),
    linear-gradient(180deg, #0d1015 0%, #0a0c10 100%);
}
.market-map {
  position: relative;
  width: 100%;
  height: 450px;
  max-height: 450px;
  display: block;
}
@media (max-width: 768px) {
  .market-map { height: 360px; max-height: 360px; }
}

/* "Click map to explore · Scroll to continue" hint — small gold text
   anchored to the bottom of the map. Fades to a dimmer state once the
   user has clicked in and scroll-zoom is active. */
.market-map-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
  padding: 7px 14px;
  background: rgba(10, 12, 16, 0.78);
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.market-map-hint.is-dim {
  color: var(--ink-dim);
  border-color: var(--line);
  opacity: 0.7;
}
@media (max-width: 600px) {
  .market-map-hint { font-size: 9px; letter-spacing: 0.16em; padding: 6px 10px; }
}

/* the SVG canvas (legacy) */
.market-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: default;
}

/* Mapbox container fills the .market-map area. The .market-map div itself
   is the map's container — Mapbox injects a canvas + tiles inside it. */
.market-map > .mapboxgl-map { width: 100%; height: 100%; }
.market-map .mapboxgl-canvas { outline: none; }

/* Status overlay (no token / no api / loading / error) */
.market-map-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 14, 0.55);
  pointer-events: none;
  z-index: 4;
}
.market-map-status-label {
  position: relative;
  z-index: 1;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(0,0,0,0.5);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
}

/* base water/land tones drawn in svg via paths; these are accent strokes */
.market-svg .land { fill: #14181f; }
.market-svg .water { fill: #0a1620; }
.market-svg .road { stroke: #1f242c; stroke-width: 1; fill: none; }
.market-svg .road-major { stroke: #283038; stroke-width: 1.4; }
.market-svg .ctaline { stroke-width: 2; fill: none; opacity: 0.55; mix-blend-mode: screen; }

.market-svg .hood {
  fill: rgba(201,169,110,0.10);
  stroke: rgba(201,169,110,0.55);
  stroke-width: 1;
  cursor: pointer;
  transition: fill var(--dur-fast) var(--ease), stroke var(--dur-fast) var(--ease);
}
.market-svg .hood:hover,
.market-svg .hood.active {
  fill: rgba(201,169,110,0.32);
  stroke: rgba(201,169,110,0.95);
  stroke-width: 1.5;
}

/* heat-mode overrides (set on parent group) */
.market-svg.mode-heat .hood { fill: var(--heatfill, rgba(201,169,110,0.10)); stroke: rgba(201,169,110,0.35); }
.market-svg.mode-heat .hood:hover, .market-svg.mode-heat .hood.active { stroke: var(--accent); stroke-width: 1.5; }

/* labels */
.market-svg .hood-label {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--ink-soft);
  pointer-events: none;
  text-anchor: middle;
}
.market-svg .hood:hover + .hood-label,
.market-svg .hood.active + .hood-label { fill: var(--ink); }

/* ───── Tooltip ───── */
.market-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(12, 11, 10, 0.96);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  padding: 14px 16px 14px 14px;
  min-width: 200px;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--ink);
  z-index: 5;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  transform: translate(12px, -50%);
}
.market-tooltip.show { opacity: 1; }
.market-tooltip-name {
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.market-tooltip-rule {
  height: 1px; background: var(--line);
  margin: 8px 0;
}
.market-tooltip-row {
  display: flex; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin: 3px 0;
}
.market-tooltip-row strong { color: var(--ink); font-weight: 500; }
.market-tooltip-cta {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ───── Pills (quick access) ───── */
.market-pills {
  padding: 32px var(--pad-gutter) 0;
  display: flex; flex-wrap: wrap;
  gap: 8px 10px;
}
.market-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  text-decoration: none;
}
.market-pill:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
  transform: translateY(-1px);
}
.market-pill .count {
  font-family: var(--f-body);
  font-size: 10px;
  color: var(--accent);
}
.market-pill.luxe { border-color: rgba(201,169,110,0.35); color: var(--accent); }

/* ───── Disclaimer ───── */
.market-foot {
  padding: 22px var(--pad-gutter) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ─────────────────────────────────────────────────────────────
   NEIGHBORHOOD DETAIL PAGE
   ───────────────────────────────────────────────────────────── */
.hood-page main { padding-top: 0; }
.hood-hero {
  padding: clamp(80px, 10vw, 140px) var(--pad-gutter) clamp(40px, 5vw, 80px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  border-bottom: 1px solid var(--line);
}
.hood-crumb {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 24px;
}
.hood-crumb a { color: var(--ink-soft); }
.hood-crumb a:hover { color: var(--accent); }
.hood-title {
  font-family: var(--f-display);
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}
.hood-title em { font-style: italic; color: var(--accent); }
.hood-sub {
  font-family: var(--f-body);
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-soft);
  max-width: 56ch;
  line-height: 1.5;
}

/* Mini map */
.hood-mini-map {
  margin: 0 var(--pad-gutter) clamp(40px, 5vw, 72px);
  position: relative;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  height: 320px;
  background: linear-gradient(180deg, #0d1015 0%, #0a0c10 100%);
}
.hood-mini-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hood-mini-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hood-mini-canvas .mapboxgl-canvas { outline: none; }
.hood-mini-cap {
  position: absolute;
  bottom: 16px; left: 18px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hood-mini-legend {
  position: absolute;
  top: 16px; right: 18px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hood-mini-legend .swatch {
  width: 14px; height: 14px;
  background: rgba(201,169,110,0.35);
  border: 1px solid var(--accent);
}

/* Market snapshot stat grid */
.hood-section {
  padding: clamp(40px, 5vw, 80px) var(--pad-gutter);
  border-bottom: 1px solid var(--line);
}
.hood-section h2 {
  font-family: var(--f-display);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.hood-section h2 em { font-style: italic; color: var(--accent); }
.hood-section .section-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 16px;
}
.hood-snap-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 1100px) { .hood-snap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .hood-snap-grid { grid-template-columns: repeat(2, 1fr); } }
.hood-snap {
  background: var(--bg);
  padding: 24px 22px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.hood-snap-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hood-snap-num {
  font-family: var(--f-display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  color: var(--ink);
}
.hood-snap-num.mono {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
}
.hood-snap-trend {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.hood-snap-trend.up { color: var(--accent); }
.hood-snap-trend.down { color: #c46c5b; }

/* Months of supply bar */
.hood-supply {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  margin-top: 32px;
  align-items: start;
}
@media (max-width: 900px) { .hood-supply { grid-template-columns: 1fr; } }
.hood-supply-num {
  font-family: var(--f-display);
  font-size: clamp(80px, 12vw, 200px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 10px;
}
.hood-supply-num small {
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.hood-supply-bar {
  margin-top: 24px;
  height: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  position: relative;
}
.hood-supply-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.hood-supply-bar-mark {
  position: absolute;
  top: -6px; bottom: -6px;
  width: 2px;
  background: var(--ink);
  opacity: 0.4;
}
.hood-supply-status {
  margin-top: 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #ef4444;
}
.hood-supply-status.balanced { color: var(--accent); }
.hood-supply-status.buyer { color: #4ade80; }
.hood-supply-copy {
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Q&A blocks */
.hood-qa {
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.hood-qa-item {
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 900px) { .hood-qa-item { grid-template-columns: 1fr; gap: 16px; } }
.hood-qa-q {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hood-qa-q em { font-style: italic; color: var(--accent); }
.hood-qa-q-num {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ink-dim);
  margin-bottom: 12px;
}
.hood-qa-a-num {
  font-family: var(--f-display);
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 4px;
}
.hood-qa-a-sub {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.hood-qa-a-copy {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
}
.hood-qa-a-copy + .hood-qa-source {
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hood-qa-a-copy strong { color: var(--ink); font-weight: 500; }

/* Inline contact lead handoff */
.hood-lead {
  background: var(--bg-soft);
  padding: clamp(48px, 6vw, 96px) var(--pad-gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hood-lead-inner {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 900px) { .hood-lead-inner { grid-template-columns: 1fr; } }
.hood-lead h3 {
  font-family: var(--f-display);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.hood-lead h3 em { font-style: italic; color: var(--accent); }
.hood-lead p {
  color: var(--ink-soft);
  line-height: 1.55;
  font-size: 17px;
  margin: 0 0 24px;
  max-width: 50ch;
}

/* Related */
.hood-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 900px) { .hood-related { grid-template-columns: 1fr; } }
.hood-related-card {
  border: 1px solid var(--line);
  padding: 28px 26px;
  display: flex; flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: all var(--dur-fast) var(--ease);
}
.hood-related-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.hood-related-name {
  font-family: var(--f-display);
  font-size: 28px;
  letter-spacing: -0.01em;
}
.hood-related-stats {
  display: flex; gap: 24px;
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hood-related-stats strong { color: var(--accent); font-weight: 500; }

/* ─────────────────────────────────────────────────────────────
   LISTINGS PAGE — IDX-style additions
   ───────────────────────────────────────────────────────────── */
.idx-banner {
  margin: 0 var(--pad-gutter) 32px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  display: flex; align-items: center; gap: 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.idx-banner .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.5);
  animation: pulse-live 2s ease-out infinite;
}
@keyframes pulse-live {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  100% { box-shadow: 0 0 0 12px rgba(74,222,128,0); }
}
.idx-banner-link {
  margin-left: auto;
  color: var(--accent);
  text-decoration: none;
}

.listings-status-tabs {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}
.listings-status-tab {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.listings-status-tab:hover { color: var(--ink); border-color: var(--ink-soft); }
.listings-status-tab.on {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.listings-status-tab .badge {
  font-family: var(--f-body);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.listings-status-tab.on .badge { background: rgba(0,0,0,0.15); color: inherit; }

/* Listing card status badge variants */
.listing-tag.active { background: #4ade80; color: #061d10; }
.listing-tag.contract { background: #facc15; color: #2a1d04; }
.listing-tag.sold { background: rgba(255,255,255,0.12); color: var(--ink-soft); }

/* Sold archive section */
.sold-archive {
  padding: clamp(60px, 8vw, 120px) var(--pad-gutter);
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}
.sold-archive-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 36px;
}
.sold-archive h2 {
  font-family: var(--f-display);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}
.sold-archive h2 em { font-style: italic; color: var(--accent); }
.sold-archive-lede {
  max-width: 50ch;
  color: var(--ink-soft);
  line-height: 1.55;
  font-size: 16px;
  margin-top: 12px;
}
.sold-archive-search {
  display: flex; align-items: center;
  border: 1px solid var(--line);
  padding: 10px 14px;
  width: 320px;
  max-width: 100%;
}
.sold-archive-search input {
  border: 0; outline: none; background: transparent; color: var(--ink);
  font-family: var(--f-body);
  font-size: 13px;
  width: 100%;
}
.sold-archive-search-icon {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-dim);
  margin-right: 10px;
}
.sold-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-mono);
  font-size: 13px;
}
.sold-table th, .sold-table td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
}
.sold-table th {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
}
.sold-table tr:hover td { background: rgba(235,230,221,0.02); }
.sold-table .sold-addr { color: var(--ink); }
.sold-table .sold-price { color: var(--accent); }
.sold-table .sold-hood { color: var(--ink-soft); }
.sold-table .sold-date { color: var(--ink-dim); }

/* ─────────────────────────────────────────────────────────────
   Print / accessibility
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .idx-banner .live-dot { animation: none; }
}

/* ─────────────────────────────────────────────────────────────
   NEIGHBORHOOD INDEX (hub) — /neighborhoods/index.html
   ───────────────────────────────────────────────────────────── */
.hubidx-totals {
  margin: 0 var(--pad-gutter) clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 700px) { .hubidx-totals { grid-template-columns: repeat(2, 1fr); } }
.hubidx-totals > div {
  background: var(--bg);
  padding: 28px 24px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.hubidx-totals strong {
  font-family: var(--f-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hubidx-totals span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ── Citywide rankings (heating up / softening) ─────────────── */
.hubidx-rankings {
  margin: clamp(40px, 5vw, 64px) 0;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(201,169,110,0.04) 0%, transparent 30%);
}
.hubidx-rankings-head {
  margin-bottom: clamp(20px, 3vw, 32px);
}
.hubidx-rankings-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.hubidx-rankings-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.05;
  color: var(--ink);
}
.hubidx-rankings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
}
@media (max-width: 720px) {
  .hubidx-rankings-grid { grid-template-columns: 1fr; gap: 28px; }
}
.hubidx-rank-col {}
.hubidx-rank-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.hubidx-rank-glyph { font-size: 16px; }
.hubidx-rank-list {
  list-style: none;
  margin: 0; padding: 0;
}
.hubidx-rank-link {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.18s, padding 0.18s;
}
.hubidx-rank-link:hover {
  background: rgba(201,169,110,0.04);
  padding-left: 8px;
}
.hubidx-rank-num {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
}
.hubidx-rank-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hubidx-rank-name {
  color: var(--accent);
  font-size: 15px;
  font-weight: 500;
}
.hubidx-rank-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hubidx-rank-arrow {
  color: var(--ink-dim);
  font-size: 14px;
}
.hubidx-rank-link:hover .hubidx-rank-arrow { color: var(--accent); }
.hubidx-rankings-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.hubidx-toolbar {
  margin: 0 var(--pad-gutter) 32px;
  display: flex; flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.hubidx-search {
  display: flex; align-items: center;
  border: 1px solid var(--line);
  padding: 14px 18px;
  max-width: 520px;
}
.hubidx-search-icon {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink-dim);
  margin-right: 12px;
}
.hubidx-search input {
  border: 0; outline: none; background: transparent;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  width: 100%;
}
.hubidx-tabs {
  display: flex; flex-wrap: wrap;
  gap: 6px 8px;
}
.hubidx-tab {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.hubidx-tab:hover { color: var(--ink); border-color: var(--ink-soft); }
.hubidx-tab.on {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.hubidx-tab .badge {
  font-family: var(--f-body);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.hubidx-tab.on .badge { background: rgba(0,0,0,0.15); }

.hubidx-region {
  padding: 0 var(--pad-gutter) clamp(48px, 6vw, 80px);
}
.hubidx-region-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 28px;
}
.hubidx-region-area {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hubidx-region-name {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  grid-column: 1 / 2;
}
@media (max-width: 700px) {
  .hubidx-region-head { grid-template-columns: 1fr; gap: 8px; }
  .hubidx-region-name { grid-column: 1; }
}
.hubidx-region-count {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.hubidx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.hubidx-card {
  background: var(--bg);
  padding: 24px 22px 20px;
  display: flex; flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease);
  position: relative;
  min-height: 200px;
}
.hubidx-card:hover { background: var(--bg-soft); }
.hubidx-card:hover .hubidx-card-cta { color: var(--accent); }
.hubidx-card.luxe {
  background: linear-gradient(180deg, rgba(201,169,110,0.04) 0%, var(--bg) 60%);
}
.hubidx-card.luxe:hover {
  background: linear-gradient(180deg, rgba(201,169,110,0.08) 0%, var(--bg-soft) 60%);
}
.hubidx-card-head {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
}
.hubidx-card-name {
  font-family: var(--f-display);
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.hubidx-flag {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.hubidx-flag.luxe-flag { color: var(--accent); }
.hubidx-flag.hot-flag { color: #f97316; }
.hubidx-card-note {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
  /* clamp to 3 lines max */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hubidx-card-stats {
  display: flex; flex-wrap: wrap;
  gap: 12px 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: auto;
}
.hubidx-card-stats strong {
  color: var(--ink);
  font-weight: 500;
}
.hubidx-card-price {
  color: var(--accent) !important;
}
.hubidx-card-cta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 4px;
  transition: color var(--dur-fast) var(--ease);
}

.hubidx-empty {
  margin: 0 var(--pad-gutter);
  padding: 80px 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 16px;
}
.hubidx-empty a { color: var(--accent); text-decoration: none; margin-left: 6px; }
.hubidx-empty a:hover { text-decoration: underline; }

.hubidx-cta {
  margin: clamp(48px, 6vw, 80px) var(--pad-gutter) 0;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1.6fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 800px) { .hubidx-cta { grid-template-columns: 1fr; } }
.hubidx-cta h3 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.hubidx-cta h3 em { font-style: italic; color: var(--accent); }
.hubidx-cta p {
  color: var(--ink-soft);
  line-height: 1.55;
  font-size: 15px;
  margin: 0;
  max-width: 56ch;
}