/*
 * Metrics layout correction
 *
 * Keep the editorial heading in the left column while the three measured
 * outputs stack vertically in the right column at the same visual level.
 */

.metrics-section .section-shell {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(56px, 9vw, 150px);
}

.metrics-heading {
  position: sticky;
  top: 118px;
  max-width: none;
}

.metrics-footnote {
  max-width: 54ch;
  margin: 0 auto;
}

.metric-rail {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: clamp(14px, 1.8vw, 22px);
  width: 100%;
}

.metric-row {
  min-height: clamp(230px, 22vw, 300px);
  padding: clamp(26px, 3vw, 40px);
}

.metric-row > div {
  margin-top: clamp(34px, 4vw, 54px);
}

.metric-row h3 {
  font-size: clamp(34px, 3.8vw, 54px);
}

@media (max-width: 980px) {
  .metrics-section .section-shell {
    grid-template-columns: 1fr;
    gap: clamp(52px, 7vw, 82px);
  }

  .metrics-heading {
    position: static;
    max-width: 760px;
  }

  .metric-rail {
    grid-column: 1;
  }
}

@media (max-width: 560px) {
  .metric-row {
    min-height: 270px;
  }
}