.deployment-map {
  --map-ocean: #071c32;
  --map-accent: #8ac9ff;
  margin-top: clamp(2rem, 5vw, 4rem);
}

.deployment-map h3 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  letter-spacing: -.035em;
}

.deployment-map > p {
  margin: .45rem 0 1rem;
  color: var(--muted);
  line-height: 1.55;
}

.map-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--blue-wash);
  box-shadow: 0 1rem 2.5rem #12396014;
}

.market-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.market-filters button, .map-tools button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue-ink);
}

.market-filters button { min-height: 2.75rem; padding: .42rem .85rem; font-size: .85rem; font-weight: 600; }
.market-filters button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: var(--white); }
.market-filters button:hover:not([aria-pressed="true"]) { border-color: var(--blue); background: var(--blue-pale); }

.map-stage { position: relative; height: clamp(320px, 47vw, 565px); background: var(--map-ocean); }
#map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y pinch-zoom; }
.map-grid { stroke: #8ac9ff; opacity: .2; vector-effect: non-scaling-stroke; stroke-dasharray: 2 6; }
.map-pin.expandable { cursor: pointer; }
.map-pin .halo { fill: #8ac9ff36; stroke: #8ac9ff80; stroke-width: 1; }
.map-pin .dot { fill: var(--map-accent); stroke: var(--map-ocean); stroke-width: 1.2; }
.map-pin .cluster-dot { fill: #bbdeff; stroke: var(--map-ocean); stroke-width: 1.4; }
.map-pin text {
  fill: var(--blue-ink);
  font: 700 11px "Space Grotesk", sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.map-pin.expandable:hover .halo, .map-pin:focus .halo { stroke: white; stroke-width: 2; }

.map-tools, .map-key { position: absolute; bottom: .8rem; }
.map-tools { right: .8rem; display: flex; gap: .3rem; }
.map-tools button { width: 2.75rem; height: 2.75rem; line-height: 1; }
.map-tools button:hover:not(:disabled) { background: var(--blue-pale); }
.map-tools button:focus-visible, .map-pin:focus-visible { outline-color: var(--map-accent); }
.map-tools button:disabled { opacity: .5; cursor: default; }

.map-key {
  left: .8rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .6rem;
  border: 1px solid #3e5d7b;
  border-radius: .6rem;
  background: var(--map-ocean);
  color: #d5e3ef;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  pointer-events: none;
}

.beacon { width: .45rem; height: .45rem; border-radius: 50%; background: var(--map-accent); }
.key-cluster { margin-left: .3rem; color: var(--map-accent); }
.map-error { padding: .8rem 1.25rem; color: var(--muted); }

@media (max-width: 650px) {
  .map-card { border-radius: var(--radius-md); }
  .market-filters { padding: .65rem .75rem; }
  .market-filters button { padding-inline: .7rem; }
  .map-key { bottom: 4rem; }
}