/* Mission: one Dawn hero, then the homepage shell, measure, and section chrome.
   Hero padding matches the shell's section inset so the H1 starts on the same
   edge as the content below it. */
.mission-page {
  display: flex; flex-direction: column; gap: var(--ec-shell-inset);
  padding: 24px var(--ec-shell-inset) 0;
  color: var(--ec-text-primary);
}

.mission-hero {
  padding: 88px 40px 80px;
  border-radius: var(--ec-radius-md);
  background: var(--ec-surface-muted) url("/ds/img/gradient-dawn.png") 50% 50% / cover no-repeat;
}
.mission-hero h1 {
  max-width: 1160px; margin: 0;
  font-size: clamp(52px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -0.04em;
  color: var(--ec-text-primary);
  text-wrap: balance;
}
.mission-dek {
  max-width: 620px; margin: 28px 0 0;
  font-family: var(--ec-font-body); font-weight: 300;
  font-size: var(--ec-body-lg-size); line-height: var(--ec-body-lg-lh);
  color: var(--ec-text-primary);
}

/* Section headings sit one step below the homepage's so the long mission H1
   stays the largest line at every width. */
.mission-page .section-title {
  font-size: var(--ec-h2-size); line-height: 1.1; letter-spacing: var(--ec-h2-ls);
  text-wrap: balance;
}

/* Heading and copy side by side, as in the homepage's value section. */
.mission-page .mission-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px 48px;
  align-items: start;
}
.mission-copy { display: flex; flex-direction: column; gap: var(--ec-space-4); }
.mission-copy p {
  max-width: 680px; margin: 0;
  font-family: var(--ec-font-body); font-weight: 300;
  font-size: var(--ec-body-lg-size); line-height: var(--ec-body-lg-lh);
  color: var(--ec-text-primary);
  text-wrap: pretty;
}

.mission-page .mission-manifesto-panel {
  padding: 48px;
  border-radius: var(--ec-radius-xl);
  background: var(--ec-surface-strong);
}
.mission-manifesto-panel .section-title { color: var(--ec-text-inverse); }
.mission-manifesto-panel .mission-copy p { color: var(--ec-text-inverse-muted); }
.mission-manifesto-panel .mission-copy p:first-child { color: var(--ec-text-inverse); }

.mission-page .mission-cta-panel {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 32px;
  padding: 48px;
  border-radius: var(--ec-radius-xl);
  background: var(--ec-surface);
  box-shadow: var(--ec-ring-subtle);
}
.mission-cta-panel h2 {
  max-width: 720px; margin: 0;
  font-size: var(--ec-h3-size); line-height: var(--ec-h3-lh); letter-spacing: var(--ec-h3-ls);
  color: var(--ec-text-primary);
  text-wrap: balance;
}
.mission-cta-panel h2 span { white-space: nowrap; }
.mission-cta-panel .btn { flex: none; }

@media (max-width: 1100px) {
  .mission-hero h1 { font-size: clamp(42px, 4.4vw, 48px); }
  .mission-page .section-title { font-size: 34px; letter-spacing: -1.4px; }
  .mission-cta-panel h2 { font-size: 28px; line-height: 31px; }
  .mission-page .mission-split { grid-template-columns: minmax(0, 1fr); }
  .mission-page .mission-manifesto-panel,
  .mission-page .mission-cta-panel { padding: 40px 32px; }
}

@media (max-width: 960px) {
  .mission-hero { padding: 64px 40px 56px; }
}

@media (max-width: 640px) {
  .mission-hero { padding: 40px 24px 36px; }
  /* Chromium balances at most six lines, so the longer mobile H1 uses pretty
     to avoid a one-word last line. */
  .mission-hero h1 { font-size: 34px; line-height: 37px; letter-spacing: -1.3px; text-wrap: pretty; }
  .mission-page .section-title { font-size: 28px; letter-spacing: -1px; }
  .mission-dek { margin-top: 20px; font-size: var(--ec-body-size); line-height: var(--ec-body-lh); }
  .mission-copy p { font-size: var(--ec-body-size); line-height: var(--ec-body-lh); }
  .mission-page .mission-manifesto-panel,
  .mission-page .mission-cta-panel { padding: 32px 20px; border-radius: var(--ec-radius-md); }
  .mission-page .mission-cta-panel { flex-direction: column; align-items: stretch; gap: 24px; }
  .mission-cta-panel h2 { font-size: var(--ec-h4-size); line-height: 28px; letter-spacing: var(--ec-h4-ls); text-wrap: pretty; }
}