/* ==========================================================================
   Mission page components only. Everything shared lives in site.css.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------
   Text left, a tall 3/4 portrait of standing-practice.jpg right, on the
   gradient plate. Text column is the wider of the two since the photo is
   already visually dense at portrait proportions. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(2rem, 3.5vw, 3rem);
  align-items: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 2vw, 1.75rem);
}
.hero h1 { max-width: none; }
.hero .lede { max-width: 42ch; }
.hero__media .frame { max-width: 380px; margin-inline: auto; }
@media (max-width: 800px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero__media { order: -1; }
  .hero__media .frame { max-width: 320px; }
}

/* --- The story: two text columns, a wide photo underneath -------------------
   Paragraph left, paragraph right (reuses .split), then a 21:9 strip of
   early-intervention.jpg spanning the full shell below. */
.story__split { align-items: start; }
.story__band {
  aspect-ratio: 21 / 9;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 800px) {
  .story__band { aspect-ratio: 4 / 3; }
}

/* --- The black box: a data visual, then comparison columns -------------------
   The clinician-with-tablet render sits above the columns, half width and
   right aligned at desktop so it reads as evidence for the response column
   below it, full width on mobile. Two columns with a vertical rule between
   at desktop, a horizontal rule on mobile. */
.blackbox__media { margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 1024px) {
  .blackbox__media { width: 50%; margin-left: auto; }
}
.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}
.compare__col + .compare__col {
  border-left: 1px solid var(--rule);
  padding-left: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 800px) {
  .compare { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .compare__col + .compare__col {
    border-left: 0;
    padding-left: 0;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
  }
}

/* --- Three pillars: thumbnail rows ------------------------------------------
   Reuses the shared .thumb-row grid (thumbnail, title, sentence, hairline
   between rows). Title styling matches index's "Who it is for" rows. */
.pillars__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.pillars__body { color: var(--ink-2); max-width: 46ch; }

/* --- Photo band quote --------------------------------------------------------
   This page's quote runs longer than the shared 34ch cap allows in three
   lines at desktop, so it gets a wider measure here only. It is also the
   longest quote on the site, so at narrow widths it needs a size step down
   to stay at 4 lines rather than 5. */
.band__quote { max-width: 46ch; }
@media (max-width: 480px) {
  .band__quote { font-size: 1.0625rem; }
}

/* --- Closing CTA: two intents -------------------------------------------------
   A secondary link to the product page alongside the primary contact button. */
.cta { --flow: 1rem; }
.cta p { max-width: 46ch; color: var(--ink-2); }
.cta__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
/* The callout keeps its own stacking order above the spark watermark. */
.cta > :not(.spark) { position: relative; z-index: 1; }
@media (max-width: 480px) {
  .cta__actions { flex-direction: column; align-items: stretch; width: 100%; }
}