/* Gemini handoff layer: presentation-only adjustments for static placeholders. */
.nav-dev,
.menu-button,
.mission-row { cursor: default; }
.nav-dev { display: inline-flex; align-items: center; }
.mission-row { width: 100%; border: 0; font: inherit; text-align: left; }
.button span,
.text-link span,
.all-missions-link span,
.educators-actions a > span:last-child,
.hero-bottom-note a > span { display: inline-block; }
.hero-actions a,
.hero-bottom-note a,
.story-copy > a,
.mission-detail a,
.all-missions-link,
.educators-actions a,
.footer-top > a:last-child,
.footer-bottom a { cursor: default; }
@media (max-width: 760px) {
  .main-nav { display: none; }
  .menu-button { display: inline-flex; }
}

/* Match the Impact page banner, with a documentary crop and readable title. */
.page-page--about .about-banner {
  width: min(1250px, calc(100% - 30px));
  height: 320px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  border-radius: 0;
  margin: 22px auto 0;
  overflow: hidden;
  background: #dfe4d8;
}

.page-page--about .about-banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 60%;
  position: absolute;
  inset: 0;
  z-index: -2;
}

@media (max-width: 760px) {
  .page-page--about .about-banner {
    width: calc(100% - 24px);
    height: 260px;
    margin-top: 12px;
  }

  .page-page--about .about-banner img {
    object-position: 54% center;
  }
}

.page-page--about .about-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(20, 47, 41, .56), rgba(20, 47, 41, .38));
  pointer-events: none;
}
html body .page-page--about .about-banner h1 {
  margin: 0;
  padding: 24px;
  color: #fff;
  font-size: clamp(43px, 4.5vw, 72px);
  letter-spacing: -.055em;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 2px 18px rgba(8, 25, 21, .28);
}
/* Keep both About story headings at the same responsive size. */
html body .page-page--about :is(.page-hero--intro, .page-hero--mirrored) .page-hero-copy h2 {
  font-size: clamp(43px, 4.5vw, 72px);
}

html body .page-page--about .page-image-card span:last-child {
  font-family: var(--mapfix-font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

html body .page-page--about .page-image-card .map-comparison-caption {
  text-align: center;
}