/* Hallmark · macrostructure: Split Studio (lean: Narrative Workflow band) · tone: grounded, direct, dignified · anchor hue: brick 29° · page: About
 * theme: studied-DNA via design.md "limestone and brick" (locked; pages share it) · nav: N1b · footer: Ft3 (verbatim from index.html)
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 * Page layer over tokens.css + site.css. Tokens only: no raw colours, fonts or off-scale spacing.
 * Shared-component candidates kept here per the Phase 3 brief: .values__list (display-face ledger),
 * .seals (accreditation seals beside their text), .cta-band__copy.
 */

/* ── Values: the intro holds still while the six values pass on a ledger ── */
.values { padding-block: var(--space-3xl); }
.values__grid { display: grid; gap: var(--space-xl); }
.values__intro { display: grid; gap: var(--space-md); align-content: start; }
.values__list { display: grid; border-top: var(--rule-strong) solid var(--color-ink); }
.values__list > div { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-control); }
.values__list dt {
  font-family: var(--font-display); font-weight: var(--weight-h3); font-size: var(--text-lg);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-display); overflow-wrap: anywhere; min-width: 0;
}
.values__list dd { max-width: var(--measure); color: var(--color-text-2); }
.values__list dd a:active { color: var(--color-accent-deep); } /* in-sentence links: site.css covers hover and focus */
@media (min-width: 60rem) {
  .values__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
  .values__intro { position: sticky; top: calc(var(--header-h) + var(--space-xl)); }
}

/* ── Leadership: the photo aligns to the heading, not the middle of a tall column ── */
.leaders { padding-block: var(--space-3xl) var(--space-2xl); }
.leaders .split { align-items: start; }

/* ── Accreditation: each seal sits beside what it means ── */
.seals-band { padding-block: var(--space-2xl) var(--space-3xl); }
.seals { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-xl); }
.seals li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.seals img { width: 4.5rem; height: auto; }
.seals li > div { display: grid; gap: var(--space-2xs); }
.seals h3 { font-size: var(--text-md); }
@media (min-width: 40rem) { .seals li { grid-template-columns: 5.5rem minmax(0, 1fr); } .seals img { width: 5.5rem; } }
@media (min-width: 60rem) { .seals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); } }

/* ── Closing call band: the copy column stacks heading, line and link ── */