/* About opening: fixed header, hero and purpose share one viewport. */
body[data-page="about"] .about-opening { height: 100vh; height: 100dvh; padding-top: var(--header-height); display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #020f1e; }
body[data-page="about"] .about-opening .about-hero { min-height: 0; padding: clamp(12px, 4dvh, 48px) 0 0; display: flex; }
body[data-page="about"] .about-opening .hero-content { min-height: 0; width: min(calc(100% - 48px), var(--container)); grid-template-columns: .85fr 1.15fr; grid-template-rows: minmax(0, 1fr); }
body[data-page="about"] .about-opening .hero-visual { min-height: 0; height: 100%; width: 100%; margin: 0; }
body[data-page="about"] .about-opening h1 { font-size: clamp(1.8rem, min(3.9vw, 6.4dvh), 3.55rem); margin-bottom: clamp(12px, 2.5dvh, 24px); }
body[data-page="about"] .about-opening .hero-copy p { margin-bottom: 16px; }
body[data-page="about"] .purpose-band { padding-block: clamp(22px, 4dvh, 48px); background: #fff; border-bottom: 1px solid var(--line); color: var(--ink); }
body[data-page="about"] .purpose-band .eyebrow { color: var(--blue); }
body[data-page="about"] .purpose-inner { grid-template-columns: 1.1fr 1fr; gap: 64px; text-align: left; }
body[data-page="about"] .purpose-band h2 { color: var(--ink); font-size: clamp(1.6rem, min(3vw, 4.5dvh), 2.6rem); max-width: 24ch; }
body[data-page="about"] .purpose-band p { color: var(--muted); }
@media (max-width: 800px) and (orientation: portrait) {
  body[data-page="about"] .about-opening .hero-content { width: calc(100% - 36px); grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
  body[data-page="about"] .about-opening h1 { font-size: clamp(1.65rem, min(7vw, 4.5dvh), 3rem); }
  body[data-page="about"] .about-opening .hero-copy p { font-size: clamp(.8rem, 1.8dvh, .94rem); line-height: 1.5; margin-bottom: 0; }
  body[data-page="about"] .purpose-band { padding-block: clamp(12px, 2.5dvh, 24px); }
  body[data-page="about"] .purpose-inner { grid-template-columns: 1fr; gap: 10px; text-align: left; }
  body[data-page="about"] .purpose-inner > p { grid-column: auto; font-size: .82rem; line-height: 1.5; }
  body[data-page="about"] .purpose-inner h2 { font-size: clamp(1.3rem, 4.6vw, 2rem); }
  body[data-page="about"] .purpose-inner .eyebrow { margin-bottom: 6px; font-size: .65rem; }
}
@media (max-height: 600px) and (orientation: landscape) {
  body[data-page="about"] .about-opening .about-hero { padding-top: 12px; }
  body[data-page="about"] .about-opening .hero-content { gap: 24px; }
  body[data-page="about"] .about-opening h1 { font-size: clamp(1.2rem, 5.5dvh, 2rem); margin-bottom: 8px; }
  body[data-page="about"] .about-opening .hero-copy p { font-size: .75rem; line-height: 1.4; margin-bottom: 8px; }
  body[data-page="about"] .purpose-band { padding-block: 12px; }
  body[data-page="about"] .purpose-inner { grid-template-columns: 1.1fr 1fr; gap: 18px; text-align: left; }
  body[data-page="about"] .purpose-inner h2 { font-size: 1.25rem; }
  body[data-page="about"] .purpose-inner p { font-size: .75rem; line-height: 1.4; }
  body[data-page="about"] .purpose-inner .eyebrow { margin-bottom: 4px; font-size: .6rem; }
}