/* psyflo.com — "About" page.
   The warmest, most editorial expression of the system: a point of view,
   almost an essay. More serif, more whitespace, longer-form prose, fewer
   screenshots. Reuses .home layout primitives (wrap, section, eyebrow,
   display, h2, lede, btn, foot) from home.css. Patient-safe. No hype. */

.about { background: var(--cream-50, #FBF8F2); }
.about .eyebrow { color: var(--accent-700, #7A5F36); }
.about .cred .eyebrow { color: rgba(255,255,255,.72); }

/* Editorial measure for long-form prose */
.about .prose { max-width: 680px; }
.about .prose p { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.62; color: var(--ink-700, #404040); margin: 0 0 1.1em; text-wrap: pretty; }
.about .prose p:last-child { margin-bottom: 0; }
.about .prose strong { color: #0A0A0A; font-weight: 600; }

/* ── 2 · Thesis hero ───────────────────────────────────────────── */
.about .thesis { padding-top: clamp(64px, 10vw, 132px); padding-bottom: clamp(56px, 8vw, 104px); text-align: center; }
.about .thesis__eyebrow-row { display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); }
.about .thesis__eyebrow-row .eyebrow { white-space: nowrap; }
.about .thesis__rule { width: 38px; height: 1px; background: var(--cream-500, #B8A580); flex: 0 0 38px; }
.about .thesis__statement {
  font-family: var(--headline-font); font-weight: var(--headline-weight);
  letter-spacing: -0.022em; line-height: 1.06;
  font-size: clamp(34px, 5.4vw, 66px);
  color: #0A0A0A; margin: 0 auto; max-width: min(94vw, 980px); text-wrap: balance;
}
.about .thesis__statement .lead { display: block; max-width: none; }
.about .thesis__body { margin-top: clamp(32px, 4vw, 44px); }
.about .thesis__follow { max-width: 720px; margin-inline: auto; }
.about .accent-italic {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-style: italic; font-weight: 400; color: var(--accent-700);
}

/* centered closing line of the hero argument */
.about .thesis__exists {
  margin: clamp(36px, 4.5vw, 56px) auto 0; padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--cream-300, #DFD3B7);
  font-family: var(--headline-font); font-weight: var(--headline-weight);
  letter-spacing: -0.015em; line-height: 1.24;
  font-size: clamp(21px, 2.4vw, 30px); color: #0A0A0A; max-width: 760px;
}

/* ── 3 · Clinical seriousness ──────────────────────────────────── */
.about .clinical { background: var(--band, #F4EBD7); }
.about .clinical image-slot { display: block; width: 100%; height: clamp(300px, 36vw, 460px); margin-top: clamp(40px, 5vw, 64px); background: var(--cream-100, #F6F1E8); }
.about .clinical__lead {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.about .clinical__quote {
  font-family: var(--headline-font); font-weight: var(--headline-weight);
  letter-spacing: -0.018em; line-height: 1.2;
  font-size: clamp(26px, 3.1vw, 40px); color: #0A0A0A; margin: 14px 0 0;
  text-wrap: balance;
}
.about .clinical__quote em { font-style: italic; color: var(--accent-700); }
.about .clinical__prose { } /* uses .prose measure */
/* three signals span the full width as an even, generously-guttered row */
.about .clinical__signals {
  margin: clamp(48px, 6vw, 80px) 0 0; padding: clamp(44px, 5vw, 60px) 0 0;
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 5vw, 64px); border-top: 1px solid var(--cream-300, #DFD3B7);
}
.about .clinical__signal { display: block; text-align: center; }
.about .clinical__ico {
  display: inline-grid; place-items: center; width: 52px; height: 52px;
  border-radius: 14px; background: var(--accent-50);
  border: 1px solid var(--accent-200); color: var(--accent-700);
  margin-bottom: 22px;
}
.about .clinical__ico svg { width: 26px; height: 26px; }
.about .clinical__signal b { display: block; font-size: 19px; font-weight: 600; color: #0A0A0A; margin-bottom: 10px; letter-spacing: -0.01em; line-height: 1.3; }
.about .clinical__desc { display: block; font-size: 16px; color: var(--ink-600, #525252); line-height: 1.6; }

/* ── 4 · The team ──────────────────────────────────────────────── */
.about .team__head { max-width: 640px; margin: 0 auto clamp(48px, 6vw, 72px); text-align: center; }
.about .team__head .lede { margin-inline: auto; }
.about .team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: clamp(40px, 5vw, 72px); justify-content: center; }
.about .person { text-align: center; }
.about .person__photo {
  width: 100%; height: auto; aspect-ratio: 1 / 1; display: block;
  border-radius: 18px; overflow: hidden; object-fit: cover;
  background: var(--cream-200, #ECE4D2); border: 1px solid var(--cream-300, #DFD3B7);
}
.about .person__name { font-family: var(--headline-font); font-weight: var(--headline-weight); letter-spacing: -0.015em; font-size: clamp(24px, 2.4vw, 30px); color: #0A0A0A; margin: clamp(22px, 2.6vw, 30px) 0 0; }
.about .person__cred { font-size: 14px; color: var(--ink-600, #525252); margin-top: 4px; }
.about .person__role { font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-700); font-weight: 600; margin-top: 14px; }
.about .person__bio { font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; color: var(--ink-800, #2A2A2A); margin: 14px auto 0; max-width: 30ch; text-wrap: pretty; }
.about .person__bio::before { content: '\201C'; color: var(--accent-700); }
.about .person__bio::after { content: '\201D'; color: var(--accent-700); }

/* Credibility markers (centered, restrained) */
.about .cred { background: #5C7259; color: #fff; text-align: center; }
.about .cred .eyebrow { color: rgba(255,255,255,.62); }
.about .cred__lead { font-family: var(--headline-font); font-weight: var(--headline-weight); letter-spacing: -0.015em; line-height: 1.16; font-size: clamp(28px, 3.4vw, 46px); color: #fff; margin: 16px auto 0; max-width: min(92vw, 820px); text-wrap: balance; }
.about .cred__backers-block { margin-top: clamp(44px, 6vw, 68px); }
.about .cred__anchor { font-family: var(--headline-font); font-weight: var(--headline-weight); font-size: clamp(32px, 3.6vw, 46px); letter-spacing: -0.02em; color: #fff; line-height: 1; }
.about .cred__anchor span { font-size: 0.34em; color: rgba(255,255,255,.62); display: block; margin-top: 12px; letter-spacing: .02em; font-family: var(--body-font); font-weight: 400; }
.about .cred__backers { margin: clamp(32px, 4.5vw, 52px) auto 0; padding: 0; max-width: 760px; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 32px; }
.about .cred__backers li { font-size: clamp(16px, 1.6vw, 19px); color: rgba(255,255,255,.9); }

/* Vision (centered editorial) */
.about .vision { text-align: center; }
.about .vision__inner { max-width: 980px; margin: 0 auto; }
.about .vision__statement {
  font-family: var(--headline-font); font-weight: var(--headline-weight);
  letter-spacing: -0.02em; line-height: 1.1;
  font-size: clamp(30px, 4.6vw, 58px); color: #0A0A0A; margin: clamp(24px, 3vw, 36px) auto 0; max-width: min(94vw, 900px);
  text-wrap: balance;
}
.about .vision__statement em { font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-style: italic; color: var(--accent-700); }
.about .vision__body { margin: clamp(36px, 4.5vw, 56px) auto 0; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .about .clinical__lead { grid-template-columns: 1fr; gap: 28px; }
  .about .clinical__signals { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; }
  .about .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 720px; margin-inline: auto; }
  .about .person__photo { aspect-ratio: 1 / 1; }
}
@media (max-width: 560px) {
  .about .team__grid { grid-template-columns: minmax(0, 360px); justify-content: center; gap: 44px; }
  .about .person__photo { aspect-ratio: 1 / 1; max-width: 360px; margin-inline: auto; }
}