/* Hallmark · macrostructure: Split Studio (system-managed by design.md; pages share it) · page: family-program · tone: grounded, direct, dignified · anchor hue: brick 29°
 * theme: studied-DNA "limestone and brick" (design.md) · tokens only (no raw colour or font values) · eyebrows: none · motion: none
 * sections: page head · what family therapy is (+ what it helps with) · the program (facts + privacy note) · Gary French (portrait on the plate)
 *           · if he isn't in treatment yet (steps + a mother's review) · call band (ink)
 * grounds: paper · paper · paper-2 · paper · paper-2 · ink; one 4xl break on the program band
 * Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4
 * Shared-component candidates (kept here per the brief): .facts (also in admissions.css) · .family-quote (a paper-ground review)
 */

/* ── What family therapy is ── */
.family-what { padding-block: var(--space-2xl) var(--space-3xl); }
.family-what__grid, .family-program__grid { display: grid; gap: var(--space-xl); }
.family-what__intro, .family-program__intro { display: grid; gap: var(--space-md); align-content: start; }
.helps { display: grid; gap: var(--space-sm); align-content: start; }
.helps h3 { font-size: var(--text-md); }
.helps__list { list-style: none; padding: 0; border-top: var(--rule-strong) solid var(--color-ink); }
.helps__list li { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-text-2); }
.helps__list strong {
  display: block; margin-bottom: var(--space-3xs); color: var(--color-ink);
  font-family: var(--font-display); font-weight: var(--weight-h3); font-size: var(--text-md); line-height: var(--leading-snug);
}

/* ── The program ── */
.family-program { padding-block: var(--space-4xl) var(--space-3xl); }
.family-program__aside { display: grid; gap: var(--space-lg); align-content: start; }
@media (min-width: 60rem) {
  .family-what__grid, .family-program__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
}

/* Facts sheet: label + value rows on hairlines, closed by the same 2px ink rule as the FAQ */
@media (min-width: 40rem) { .facts > div { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); } }

/* ── Gary French: a real 2:3 portrait on the brick plate ── */
.family-lead { padding-block: var(--space-3xl); }
.family-lead .plate { max-width: 13rem; }
.family-lead .plate img { aspect-ratio: 2 / 3; }
@media (min-width: 40rem) { .family-lead .plate { max-width: 16rem; } }
@media (min-width: 60rem) {
  .family-lead__grid { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
  .family-lead .plate { max-width: none; }
}

/* ── If he isn't in treatment yet ── */
.family-start { padding-block: var(--space-3xl); }
.family-start__grid { display: grid; gap: var(--space-2xl); }
.family-start__steps h2 { max-width: 20ch; }
.family-quote {
  display: grid; gap: var(--space-sm); align-content: start;
  padding-top: var(--space-md); border-top: var(--rule-strong) solid var(--color-ink);
}
.family-quote p { font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--text-md); line-height: 1.5; }
.family-quote footer { font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-text-muted); }
@media (min-width: 60rem) {
  .family-start__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .family-quote { margin-top: var(--space-2xl); }
}

/* ── Closing call band ── */
/* The band sits directly on the ink footer, whose statement line repeats the number: a rule-ink hairline keeps them two things */