.dist-title {
  background: #0A0A0A;
  padding: clamp(1.75rem, 4vw, 2.75rem) var(--section-pad-x) 8px;
}
.dist-title__h1 {
  color: var(--color-white);
  margin: 0;
}
.dist-title__sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: #888;
  margin: 14px 0 0;
  max-width: 560px;
  line-height: 1.4;
}

/* Single full-width column now. The old `6fr 1fr` split was for the hand-coded layout
   (map in one column, UK grid in the other); the live module is one element that lays out
   its own map + legend, so a second column just squeezed it into 6/7 of the width. */
.dist-map-section {
  padding: clamp(1.25rem, 3vw, 1.75rem) var(--section-pad-x) 8px;
}

/* Branded panel behind the map + legend, so the page isn't an all-black field. Bright box
   + dark content, same as the homepage's lime/cyan sections. Cyan reads well behind a
   yellow/gold-heavy map, and the states carry white borders so nothing blends into it.
   The offset shadow is RED, not black — a black shadow would be invisible on the black
   page background. */
.dist-map-panel {
  background: var(--color-cyan);
  border: 3px solid var(--color-black);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard-lg);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  color: var(--color-black);
}

/* Extra top gap so the panel's 14px red offset shadow doesn't crowd the button. */
.dist-downloads { padding: clamp(2.25rem, 5vw, 3.5rem) var(--section-pad-x) 48px; text-align: center; }