/* ---- page: about ----
   About page specific layout. Loaded AFTER main.css. Reuses shared tokens,
   utilities, and components from main.css wherever possible. */

/* Centered intro header on linen */
.about-intro { text-align: center; padding-block: clamp(48px, 7vw, 88px) clamp(32px, 4vw, 52px); }
.about-intro .eyebrow-serif {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  color: var(--sage-deep); display: block; margin-bottom: 10px;
}
.about-intro h1 { font-size: clamp(2.3rem, 5.2vw, 3.8rem); }
.about-intro .intro-sub {
  font-family: var(--serif); font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--body); margin-top: 14px;
}
.about-intro .hero-cta { margin-top: clamp(24px, 3.5vw, 34px); }

/* Portrait band: real photo in an arched editorial frame on a sage wall */
.portrait-band { padding-block: clamp(52px, 8vw, 96px); text-align: center; position: relative; overflow: hidden; }
.portrait-band .band-sprig { position: absolute; z-index: 1; width: min(240px, 26vw); opacity: .3; pointer-events: none; }
.portrait-band .band-sprig-l { left: clamp(-20px, 2vw, 60px); bottom: 18px; }
.portrait-band .band-sprig-r { right: clamp(-20px, 2vw, 60px); top: 24px; transform: rotate(180deg); }
.portrait-band .portrait-frame, .portrait-band .portrait-caption { position: relative; z-index: 2; }
@media (max-width: 620px) { .portrait-band .band-sprig { opacity: .18; } }
.portrait-frame {
  width: min(400px, 80vw); margin-inline: auto;
  background: var(--ivory); padding: 12px;
  border-radius: 50% 50% 12px 12px / 30% 30% 6px 6px;
  box-shadow: 0 8px 24px rgba(46, 58, 46, .12);
}
.portrait-frame img {
  width: 100%; height: auto; display: block;
  border-radius: 50% 50% 6px 6px / 30% 30% 4px 4px;
}
.portrait-caption {
  font-family: var(--serif); font-style: italic;
  color: var(--ivory); opacity: .92; margin-top: 26px; font-size: 1.05rem;
}

/* Quote interlude (near-white band) */
.about-quote { background: var(--ivory); }
.about-quote .quote blockquote { line-height: 1.4; }

/* Approach prose block */
.approach { text-align: center; }
.approach .prose { max-width: 640px; margin-inline: auto; }
.approach .prose p { margin-top: 16px; }

/* Approach page: centered mid-page CTA on the sage methods band (approach.html only) */
.approach-midcta { text-align: center; margin-top: clamp(40px, 5vw, 60px); }
.approach .approach-cta { margin-top: clamp(28px, 3.5vw, 40px); }
@media (max-width: 480px) { .approach .approach-cta .btn { display: block; } }

/* Full-bleed courtyard band */
.about-band img { width: 100%; height: clamp(240px, 30vw, 420px); object-fit: cover; }

/* For Children, Adolescents & Young Adults: a heading, a divider and one
   small-caps line. The section carries a single line of content, so its
   rhythm is tighter than a full content section and it reads as a deliberate
   strip rather than an empty band. */
.ages-strip { padding-block: clamp(36px, 4.2vw, 58px); }
.ages-strip .leaf-divider { margin-top: 14px; }
.ages-line {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin-top: 18px; line-height: 1.6;
}
.ages-line li { white-space: nowrap; }            /* never split a phrase */
.ages-line li + li::before {
  content: "\00B7"; color: var(--sage); margin: 0 .75em;
}
/* Below the width where the whole line fits, set one phrase per row and drop
   the separators rather than stranding them at the ends of wrapped lines. */
@media (max-width: 900px) {
  .ages-line { flex-direction: column; align-items: center; gap: 7px; }
  .ages-line li + li::before { content: none; }
}

/* For Children, Teens & Young Adults: 3 columns with faint vertical hairlines */
.ages-cols { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(36px, 5vw, 60px); }
.ages-cols > * { padding-inline: clamp(18px, 3vw, 40px); text-align: center; }
.ages-cols > * + * { border-left: 1px solid var(--line); }
.ages-cols h3 { font-size: 1.3rem; margin-bottom: 12px; }
.ages-cols .col-rule { width: 30px; height: 1px; background: var(--sage); border: 0; margin: 0 auto 16px; }
.ages-cols p { font-size: .95rem; }
@media (max-width: 760px) {
  .ages-cols { grid-template-columns: 1fr; gap: 40px; }
  .ages-cols > * + * { border-left: 0; border-top: 1px solid var(--line); padding-top: 40px; }
}

/* Credentials & Education: heading block left, table right.
   The heading block is a third the height of the card grid beside it, so it
   sits centered against the grid instead of leaving the space below it empty,
   and the grid takes the wider share of the split. */
.credentials { align-items: center; grid-template-columns: .82fr 1.18fr; }
@media (max-width: 860px) { .credentials { grid-template-columns: 1fr; } }
.cred-head h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.14; }
.cred-head .rule { margin: 22px 0 0; }
.cred-head .cred-sprig { width: 84px; height: auto; margin-top: 24px; opacity: .9; }
/* scannable card grid: small label, serif institution, one detail line */
.cred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.5vw, 44px) clamp(28px, 4vw, 56px); }
.cred-item { border-top: 2px solid var(--sage); padding-top: 16px; }
.cred-item .cred-k {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sage-deep);
  margin-bottom: 10px;
}
.cred-item h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.25; margin-bottom: 6px; }
.cred-item p { font-size: .95rem; color: var(--body); }
/* Shared baselines across a row: each card hands its three lines to grid rows
   it shares with the card beside it, so a two or three line institution name
   no longer pushes its own detail line out of line with its neighbour. The
   row gap becomes a fourth track between bands (grid-auto-rows cycles), which
   is why row-gap is zeroed and the bands are placed explicitly. */
@media (min-width: 621px) {
  .cred-grid { row-gap: 0; grid-auto-rows: auto auto auto clamp(28px, 3.5vw, 44px); }
  .cred-item { display: grid; grid-template-rows: subgrid; }
  .cred-item:nth-child(1), .cred-item:nth-child(2) { grid-row: 1 / span 3; }
  .cred-item:nth-child(3), .cred-item:nth-child(4) { grid-row: 5 / span 3; }
  .cred-item:nth-child(5), .cred-item:nth-child(6) { grid-row: 9 / span 3; }
  .cred-item:nth-child(odd)  { grid-column: 1; }
  .cred-item:nth-child(even) { grid-column: 2; }
}
@media (max-width: 620px) {
  .cred-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* Warm, clear, and practical care: flush-left photo, text right */
.warm-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.warm-split .warm-photo { min-height: 100%; }
.warm-split .warm-photo img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.warm-split .warm-text {
  background: var(--ivory);
  padding: clamp(40px, 6vw, 88px) clamp(28px, 5vw, 80px);
  display: flex; flex-direction: column; justify-content: center;
}
/* no hard <br>: the headline breaks where the column allows, balanced */
.warm-split .warm-text h2 { margin-bottom: 4px; text-wrap: balance; }
.warm-split .warm-text .rule { margin: 20px 0 24px; }
.warm-split .warm-text p + p { margin-top: 16px; }
@media (max-width: 760px) {
  .warm-split { grid-template-columns: 1fr; }
  .warm-split .warm-photo img { min-height: 300px; }
}

/* Closing sage CTA band */
.about-cta { position: relative; text-align: center; overflow: hidden; }
.about-cta .cta-inner { position: relative; z-index: 2; max-width: 640px; margin-inline: auto; }
.about-cta h2 { margin-bottom: 0; }
.about-cta .leaf-divider { margin-top: 18px; margin-bottom: 22px; filter: brightness(0) invert(1); opacity: .7; }
.about-cta p { color: rgba(251, 248, 241, .9); margin-bottom: 26px; }
.about-cta .btn { background: var(--ivory); color: var(--ink); }
.about-cta .btn:hover { background: #fff; transform: translateY(-1px); }
.about-cta .sprig {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  width: min(260px, 32vw); opacity: .5; pointer-events: none;
}
@media (max-width: 620px) { .about-cta .sprig { width: 150px; opacity: .35; } }