/* Hero: headline on the left, the city on the right */
.hero {
  position: relative;
  padding: calc(var(--header-h) + 40px) 0 72px;
  min-height: min(100svh, 1000px);
  display: flex; align-items: center;
  overflow: hidden;
}
/* a faint coastal wash behind the map, nothing more */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 45%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%),
    linear-gradient(180deg, transparent 70%, var(--canvas));
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero-copy .h1 { max-width: 11ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.hero-facts { display: flex; gap: 0; margin: 20px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); max-width: 520px; }
.hero-facts div { flex: 1; display: flex; flex-direction: column-reverse; gap: 6px; padding-right: 20px; }
.hero-facts div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.hero-facts dt { font: 400 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); }
.hero-facts dd { margin: 0; font: 600 clamp(28px, 3vw, 36px)/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.hero-map { margin: 0; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.hero-map .map-stage { width: 100%; height: min(calc(100svh - var(--header-h) - 150px), 780px); min-height: 460px; }
.hero-map .map { cursor: crosshair; touch-action: manipulation; }

/* readout: sits beside the city, over the sea */
.readout {
  position: absolute; right: 0; bottom: 10%;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 190px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); border-radius: var(--r);
  background: var(--overlay);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 13px; color: var(--fg-muted);
  pointer-events: none;
}
.readout-ward { font: 600 20px/1.1 var(--display); color: var(--fg); letter-spacing: -0.01em; margin-bottom: 4px; }
.readout-n { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.readout-n b { color: var(--brand); font: 600 16px/1 var(--display); }
.readout-o b { color: var(--fg); font-weight: 600; }

/* ── tablet: map beside copy gets narrow, so stack with the map large ── */
@media (max-width: 1024px) {
  .hero { min-height: 0; padding-top: calc(var(--header-h) + 56px); }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy .h1 { max-width: 12ch; }
  .hero-map .map-stage { height: min(78vh, 760px); }
  .readout { right: 4%; }
}

/* ── phone: the headline carries the page; the map follows as the proof ── */
@media (max-width: 640px) {
  .hero { padding: calc(var(--header-h) + 32px) 0 48px; }
  .hero-copy { gap: 22px; }
  .hero-ctas .btn { flex: 1 1 auto; }
  .hero-facts { margin-top: 8px; }
  .hero-facts div { padding-right: 12px; }
  .hero-facts div + div { padding-left: 12px; }
  .hero-map .map-stage { height: calc(118vw + 88px); min-height: 0; max-height: 720px; }
  /* the readout leaves the map and sits under it as one line */
  .readout {
    position: static; order: 2;
    flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    width: 100%; min-width: 0; min-height: 76px; padding: 12px 14px;
  }
  .readout-ward { font-size: 17px; margin: 0; }
  .readout-n { margin: 0 0 0 auto; padding: 0; border: 0; }
  .hero-map .map-stage { display: flex; flex-direction: column; gap: 12px; }
  .hero-map .map { flex: 1; min-height: 0; }
  .hero-map { align-items: flex-start; }
}