/* The Founder's Vision (founders-vision.html ONLY — loaded after styles.css).
   Editorial "vision document": narrow centred reading measure, refined serif,
   gold kickers with hairline rules, purple pull-quotes with gold accent bars,
   numbered pillars, cream personal panel, purple four-check band.

   FONTS — deliberate deviation from the design doc (flagged in the task
   report): the doc named Source Serif 4 + Source Han Serif SC, but the site's
   established system is Lora + Inter (already loaded on every page). Adding
   two new families — one of them a large CJK face with no Chinese text on the
   page — would break site consistency and weigh the page down, so the site
   serif carries the document voice instead.

   DEVICE SAFETY: no backdrop-filter, no WebGL, no flex gap, no `inset`
   shorthand; the only interactive piece is a native <details> (no JS, nothing
   for reduced-motion to gate — no animation is used on this page). */

/* ---- Reading measure ---- */
.fv { background: var(--white); }
.fv__measure {
  max-width: 44rem;                     /* ~704px reading measure, centred */
  margin-inline: auto;
}
.fv__measure > p {
  max-width: none;                      /* the column IS the measure */
  font-size: 1.1rem;                    /* 17.6px reading size (was 16.96px) */
  line-height: 1.7;
  color: var(--text);                   /* deep purple ink (~13:1) — no grey-on-grey (a11y pass) */
  margin: 0 0 1.2rem;
}
.fv__lede {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem) !important;
  line-height: 1.55 !important;
  color: var(--purple) !important;      /* ~11.7:1 on white */
  margin-bottom: 1.4rem !important;
}

/* ---- Section kickers (2026-08): raised from the old 0.85rem caps treatment
   to the SITE STANDARD kicker recipe (--fs-kicker ~20-25px, Title Case,
   weight 500, quiet tracking - same as the homepage primary kicker). Gold
   color + hairline rule kept. Page-scoped class - no other page affected. ---- */
.fv__kicker {
  margin: clamp(3rem, 6.5vw, 4.5rem) 0 1.2rem;   /* wider section rhythm (was 2.25-3.25rem) */
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(187, 134, 63, 0.45);   /* hairline gold rule */
  font-family: var(--font-body);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;                 /* markup is Title Case - renders like the homepage kickers */
  color: var(--gold-deep);              /* accessible deep gold — 5.4:1 on white */
}

/* ---- Pull-quotes: large serif italic, purple, gold accent bar ---- */
.fv__pull {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0;
  padding-left: 1.15rem;
  border-left: 4px solid var(--gold);
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 600;                     /* matched to the fv-intro quotes (2026-08 aesthetic pass) */
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.5;
  color: var(--purple-deep);            /* ~14:1 on white; matches fv-intro quotes */
}
.fv__pull--big {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 600;
  color: var(--purple-deep);
}

/* ---- Four Pillars: four consistent EDITORIAL CARDS (2026-08).
   2x2 grid on tablet/desktop (01-02 top, 03-04 bottom), single column on
   phones. align-items:start = top-aligned cards, so uneven heights never
   stretch, and Pillar 3's <details> growth only extends its own row. ---- */
.fv__pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: clamp(1.1rem, 2.5vw, 1.5rem);
  align-items: start;
}
@media (min-width: 640px) {
  .fv__pillars { grid-template-columns: 1fr 1fr; }
}
.fv__pillar {
  display: block;                         /* the card is now a foldable <details> (2026-08) */
  margin: 0;                              /* grid-gap owns the rhythm */
  padding: 0;                             /* padding moved onto summary/body */
  background: linear-gradient(165deg, var(--white) 55%, var(--lavender-light) 130%);   /* soft wash - matches the new panel family */
  border: 1px solid rgba(58, 42, 102, 0.14);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 8px 26px rgba(46, 33, 80, 0.08);
  overflow: hidden;                       /* summary hover tint respects the radius */
}
/* Foldable cards (2026-08): number + title collapsed by default; native
   <details>/<summary> - keyboard accessible, no JS, reduced-motion safe (the
   chevron transition is gated below). Pillar 3's old nested "Read the full
   proposal" sub-expander was FLATTENED into the body, so opening a card
   always shows that pillar's complete verbatim text. */
.fv__pillar-summary {
  display: block;                         /* two rows now: head row + clamped preview */
  min-height: 44px;
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(1.1rem, 2.8vw, 1.75rem);
  cursor: pointer;
  list-style: none;
}
.fv__pillar-head {
  display: flex;
  align-items: center;
}
/* ~4-line VERBATIM preview of the pillar's own first paragraph, shown while
   collapsed; hidden when open (the full text renders below), so the words are
   never visibly doubled. -webkit-line-clamp: Safari-safe. */
.fv__pillar-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin: 0.55rem 0 0;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
}
.fv__pillar-fold[open] .fv__pillar-preview { display: none; }
.fv__pillar-summary::-webkit-details-marker { display: none; }
.fv__pillar-summary:hover { background: var(--lavender-light); }
.fv__pillar-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 6px; }
.fv__pillar-head .fv__pillar-title { flex: 1 1 auto; min-width: 0; margin: 0; }   /* two-class specificity beats the old in-card margin rule below regardless of order */
.fv__pillar-chevron {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-left: 0.6rem;                    /* margin, not flex gap */
  color: var(--gold-deep);
}
.fv__pillar-fold[open] .fv__pillar-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .fv__pillar-chevron { transition: transform 0.18s ease; }
}
.fv__pillar-body { padding: 0 clamp(1.1rem, 2.8vw, 1.75rem) clamp(1.1rem, 2.5vw, 1.6rem); }

/* WIDER (2026-08): where the container is wider than the 704px reading
   measure, the pillar grid breaks out to the FULL content-column width
   (same CW recipe the site uses elsewhere), so two cards together span it. */
@media (min-width: 1024px) {
  .fv__pillars {
    width: min(100vw - 3.6rem, 1080px);
    margin-left: calc((min(100vw - 3.6rem, 1080px) - 100%) / -2);
  }
}
.fv__pillar-num {
  flex-shrink: 0;
  width: 3.4rem;
  margin-right: 1rem;                   /* margin, not flex gap */
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--gold);                   /* large decorative numeral — 3.2:1 on white clears large-text AA */
}
.fv__pillar-body { min-width: 0; }
.fv__pillar-title {
  margin: 0.2rem 0 0.55rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  color: var(--purple);
}
.fv__pillar-body p {
  max-width: none;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text);                   /* deep purple ink (a11y pass) */
  margin: 0 0 1rem;
}
/* Uniform card rhythm (2026-08): the last element in every card (paragraph,
   or Pillar 3's closed <details>) sheds its trailing margin, so all four
   cards end with identical internal padding. */
.fv__pillar-body > :last-child { margin-bottom: 0; }
.fv__pillar-body > p:last-child { margin-bottom: 0; }

/* ---- Pillar 3 expander: native <details>; the summary reads as an obvious
   CONTROL (bordered pill, not a tiny text link) per the readability pass. ---- */
.fv__details { margin-top: 0.6rem; }
.fv__details summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                     /* tap target */
  padding: 0.4rem 1.1rem;
  border: 1.5px solid var(--purple-bright);
  border-radius: 999px;
  background: var(--white);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--purple-bright);          /* 6.5:1 on white */
  list-style: none;                     /* we draw our own marker */
}
.fv__details summary:hover { background: var(--lavender-light); }
.fv__details summary::-webkit-details-marker { display: none; }
.fv__details summary::before {
  content: "+";
  margin-right: 0.45rem;
  font-weight: 700;
  color: var(--gold-deep);
}
.fv__details[open] summary::before { content: "\2212"; }   /* minus */
.fv__details summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.fv__details[open] summary { margin-bottom: 0.6rem; }

/* ---- Scientific hypothesis: DISTINCT from the pillar cards (lavender ground,
   purple side rail, explicit optional-context tag) so it can never scan as a
   fifth pillar. ---- */
.fv__hypothesis {
  margin: clamp(2.25rem, 5vw, 3.25rem) 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--lavender-light);
  border: 1px solid rgba(58, 42, 102, 0.14);
  border-left: 4px solid var(--purple-mid);
  border-radius: var(--radius);
}
.fv__optional-tag {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;   /* 2026-08: raised with the kickers, kept subordinate to the heading beside it */
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple-mid);              /* ~6.6:1 on lavender-light = AA */
}
.fv__hypothesis .fv__details summary { background: var(--white); }   /* the pill control keeps its affordance on the lavender ground */
.fv__hypothesis .fv__details p { margin-top: 0.9rem; }
.fv__hypothesis .fv__kicker { margin-top: 0; }
.fv__hypothesis p {
  max-width: none;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text);                   /* full strength on lavender = AA+ */
  margin: 0 0 1rem;
}
/* ---- Nature & Nurture band (2026-08): own tinted full-width section,
   two columns (label left / content right), stacks under 900px. The old
   .fv__hypothesis in-measure panel rules above are superseded (markup no
   longer uses that class). ---- */
.fv-nn {
  margin: clamp(2.25rem, 5vw, 3.25rem) 0;
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--lavender-light);
  border-top: 1px solid rgba(58, 42, 102, 0.14);
  border-bottom: 1px solid rgba(58, 42, 102, 0.14);
  border-left: 4px solid var(--purple-mid);   /* keeps the distinct optional-context rail */
}
.fv-nn__cols {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1.5rem;
}
@media (min-width: 900px) {
  .fv-nn__cols {
    grid-template-columns: minmax(220px, 1fr) minmax(0, 1.7fr);
    grid-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
}
.fv-nn .fv__optional-tag { margin: 0 0 0.3rem; }
.fv-nn .fv__kicker { margin-top: 0; }
.fv-nn__framing {
  margin: 0.9rem 0 0;
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--purple);                  /* AA on lavender-light */
}
.fv-nn__content p {
  max-width: none;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 1rem;
}
.fv-nn .fv__details summary { background: var(--white); }   /* pill affordance on the tinted ground */
.fv-nn .fv__details p { margin-top: 0.9rem; }

.fv__caption {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: #4A4658 !important;
  border-top: 1px solid rgba(58, 42, 102, 0.14);
  padding-top: 0.8rem;
  margin-bottom: 0 !important;
}

/* ---- Transition line: ROMAN serif (italic is reserved for pull-quotes). ---- */
.fv__transition {
  font-family: var(--font-head) !important;
  font-style: normal;
  font-size: 1.18rem !important;
  line-height: 1.7 !important;
  color: var(--purple) !important;
}

/* ---- A Personal Message: warm cream reading panel ---- */
.fv__personal {
  margin: clamp(2rem, 4.5vw, 3rem) 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background:
    radial-gradient(420px 220px at 92% -8%, rgba(187, 134, 63, 0.10), transparent 62%),
    var(--cream);                       /* letter-paper warmth + faint gold watercolor breath */
  border: 1px solid rgba(187, 134, 63, 0.28);
  border-radius: var(--radius);
}
.fv__personal .fv__kicker {
  margin-top: 0;
  /* 2026-08: elevated beyond the standard kicker - this is the page's most
     important section and should read as such. */
  font-size: clamp(1.45rem, 2.4vw, 1.8rem);
  font-weight: 600;
}
.fv__personal p {
  max-width: none;
  font-size: 1.1rem;                    /* 2026-08: primary reading size (~17.6px, was 17.3) */
  line-height: 1.75;
  color: var(--text);                   /* deep purple ink on cream ~12:1 (a11y pass) */
  margin: 0 0 1.1rem;
}
.fv__personal p:last-child { margin-bottom: 0; }

/* ---- Four-check band: gold checks on deep purple, full-bleed ---- */
.fv__checks {
  margin: clamp(2.25rem, 5vw, 3.25rem) 0;
  background: var(--purple-deep);
  border-top: 4px solid var(--gold);
  border-bottom: 4px solid var(--gold);
  padding-block: clamp(1.1rem, 2.5vw, 1.6rem);
}
.fv__checks-row {
  list-style: none;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.fv__check {
  display: inline-flex;
  align-items: center;
  margin: 0.4rem 0.45rem;               /* margin, not flex gap */
  font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.1rem);   /* 2026-08: more prominent (was 0.95rem) but sized so all four hold ONE desktop row */
  letter-spacing: 0.03em;               /* eased with the size bump so the row fits */
  text-transform: uppercase;
  color: var(--white);                  /* ~14:1 on purple-deep */
}
.fv__check svg {
  width: 24px; height: 24px;            /* 2026-08: enlarged with the labels (was 18px) */
  margin-right: 0.55rem;
  color: var(--gold);                   /* gold check strokes — decorative */
}

/* ---- Closing ---- */
.fv__closing-line {
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 !important;
  font-family: var(--font-head) !important;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.35rem, 2.8vw, 1.75rem) !important;
  line-height: 1.45 !important;
  color: var(--purple-deep) !important;
}

/* ---- Signature block ---- */
.fv__signature {
  display: flex;
  align-items: center;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0;
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid rgba(58, 42, 102, 0.14);
}
.fv__sig-photo {
  flex-shrink: 0;
  width: 92px; height: 92px;
  margin-right: 1.1rem;                 /* margin, not flex gap */
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
}
.fv__sig-text p { max-width: none; margin: 0; }
.fv__sig-gratitude {
  font-family: var(--font-head);
  font-style: normal;                   /* italic reserved for pull-quotes */
  font-size: 1.05rem;
  color: #4A4658;
  margin-bottom: 0.35rem !important;
}
.fv__sig-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--purple);                 /* ~11.7:1 */
}
.fv__sig-role {
  font-family: var(--font-head);
  font-style: normal;                   /* italic reserved for pull-quotes */
  font-size: 1rem;
  color: var(--gold-deep);              /* muted-gold role line — 5.4:1 on white */
}

/* ---- CTA ---- */
.fv__cta { margin-top: clamp(1.5rem, 3.5vw, 2rem) !important; }
.fv__cta .btn { margin-right: 1.1rem; }
.fv__evidence-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                     /* tap target */
  font-size: 1.1rem;                    /* steps with the body (readability pass) */
  color: var(--purple-bright);          /* 6.5:1 on white */
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fv__evidence-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* ---- Phones ---- */
@media (max-width: 479.98px) {
  .fv__pillar { display: block; }
  .fv__pillar-num { display: block; width: auto; margin: 0 0 0.35rem; }
  .fv__signature { flex-direction: column; align-items: flex-start; }
  .fv__sig-photo { margin: 0 0 0.9rem; }
  .fv__cta .btn { margin-right: 0.75rem; }
}


/* ---- A11y pass (2026-08): one visible keyboard focus treatment for EVERY
   interactive element on the page (links, buttons, disclosure summaries) —
   reinforces the per-element rules above so nothing can slip through. ---- */
.fv a:focus-visible,
.fv summary:focus-visible,
.fv .btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Two-column hero (2026-08 redesign): the Chairman's real consented
   portrait LEFT, kicker/title/name/role + editorial framing line RIGHT,
   over the watercolor wash. Stacks photo-above-text on narrow screens.
   Margins, not flex gap (Safari <14.1). ---- */
.fv-hero__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.fv-hero__founder {
  margin: 0.5rem 2.75rem 0.5rem 0;
  flex: 0 0 auto;
}
.fv-hero__photo {
  display: block;
  width: clamp(180px, 24vw, 290px);
  height: clamp(180px, 24vw, 290px);
  border-radius: 20px;
  object-fit: cover;
  border: 3px solid var(--white);
  box-shadow: 0 18px 44px -18px rgba(46, 33, 80, 0.45), 0 0 0 1px rgba(187, 134, 63, 0.45);
}
.fv-hero__copy { flex: 1 1 320px; min-width: 0; }
.fv-hero__name {
  margin: 1rem 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.3;
  color: var(--purple-deep);             /* ~13:1 on the light wash */
}
.fv-hero__role {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: #7C581F;                        /* AA pass (2026-08): measured 4.82:1 over the
                                            WORST wash blend (lavender + 0.16 purple radial);
                                            plain --gold-deep measured 4.09:1 there */
}
/* Same deepened gold for the kicker over the wash (shared .eyebrow is gold-deep). */
.page-banner.fv-hero .eyebrow { color: #7C581F; }
.fv-hero__framing {
  margin: 1.6rem 0 0;   /* more air between the role line and the framing sentence (2026-08) */
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.5;
  color: var(--purple);
  max-width: 44ch;
}
@media (max-width: 719.98px) {
  .fv-hero__founder { margin-right: 0; }
  .fv-hero__copy { flex-basis: 100%; margin-top: 1.25rem; }
}
/* ============ CHAPTER RHYTHM + CLOSING (2026-08, page-scoped) ============
   ONE major vision section (The Vision & Mission) and the whole conclusion
   sit on deep brand purple, so the page reads as chapters, not one flat
   column. All light-on-purple pairs verified AA: white ~14.7:1, #EFEAF6
   ~13:1, champagne #F0CE95 ~8.8:1 on #2E2150. */
.fv__chapter {
  background: var(--purple-deep);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  margin-block: clamp(2.5rem, 5.5vw, 3.75rem);
}
.fv__chapter .fv__kicker,
.fv__closing-chapter .fv__kicker { margin-top: 0; }
.fv__kicker--onpurple { color: #F0CE95; border-bottom-color: rgba(240, 206, 149, 0.4); }
.fv__chapter p { color: #EFEAF6; }
.fv__chapter .fv__pull,
.fv__chapter .fv__pull--big { color: var(--white); border-left-color: var(--gold); }

/* The four-check strip becomes the TRANSITION into the conclusion: its bottom
   margin and rule are removed so it flows straight into the purple closing
   chapter below. */
.fv__checks { margin-bottom: 0; border-bottom: 0; }

.fv__closing-chapter {
  background: var(--purple-deep);
  /* 2026-08: top padding added - clear air between the four-check strip and
     the relocated "Whether you are..." lead-in below it (was 0). */
  padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2.75rem, 6vw, 4rem);
}
.fv__closing-chapter p { color: #EFEAF6; }
.fv__closing-chapter .fv__closing-line { color: var(--white) !important; }
.fv__closing-chapter .fv__signature { border-top-color: rgba(255, 255, 255, 0.22); }
.fv__closing-chapter .fv__sig-gratitude { color: #E7DEEA; }
.fv__closing-chapter .fv__sig-name { color: var(--white); }
.fv__closing-chapter .fv__sig-role { color: #F0CE95; }

/* Signature + CTA side by side — the CTA sits immediately BESIDE the
   signature block; wraps beneath it on narrow screens. */
.fv__final-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.fv__final-row .fv__signature { flex: 1 1 300px; min-width: 0; margin-right: 1.5rem; }
.fv__final-row .fv__sig-text { max-width: 28ch; }   /* the long role line wraps, so the CTA fits BESIDE the signature inside the measure */
.fv__final-row .fv__cta {
  /* 2026-08: the two closing actions sit SIDE BY SIDE on desktop/tablet
     (Join dominant, See the Evidence quieter); they stack on phones via the
     479.98px rules below. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.25rem !important;
}
.fv__final-row .fv__cta .btn { margin-right: 0.75rem; margin-bottom: 0.6rem; }
/* 2026-08: ONE balanced row at >=900px - signature LEFT, button pair RIGHT,
   vertically centered. The row breaks out of the 704px measure to the full
   content column (same CW recipe as the pillar grid) so both sides fit with
   comfortable space between; below 900px the buttons drop beneath the
   signature (and stack full-width under 480px). */
@media (min-width: 900px) {
  .fv-outro .fv__final-row {
    width: min(100vw - 3.6rem, 1080px);
    margin-left: calc((min(100vw - 3.6rem, 1080px) - 100%) / -2);
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }
  .fv-outro .fv__final-row .fv__signature { flex: 0 1 auto; margin-right: 2.5rem; margin-bottom: 0.5rem; }
  .fv-outro .fv__final-row .fv__cta { flex: 0 0 auto; margin-top: 0.5rem !important; }
  .fv-outro .fv__final-row .fv__cta .btn { margin-bottom: 0; }
}
/* Join the Movement = the single DOMINANT action (white on the purple band,
   48px+); See the evidence = quieter light link. */
.fv__closing-chapter .btn--primary {
  min-height: 48px;
  padding: 0.85rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--white);
  color: var(--purple-deep);             /* ~14.7:1 */
  border-color: var(--white);
}
.fv__closing-chapter .btn--primary:hover { background: var(--cream); }
.fv__closing-chapter .fv__evidence-link { color: #E7DEEA; }   /* ~11.9:1, quiet secondary */

/* Phones: chapter padding eases; final row stacks; CTA buttons full-width. */
@media (max-width: 479.98px) {
  .fv__final-row .fv__signature { margin-right: 0; }
  .fv__final-row .fv__cta { width: 100%; align-items: stretch; }   /* the flex-column CTA must span the row for the full-width button below */
  .fv__closing-chapter .btn--primary { width: 100%; justify-content: center; }
}

/* ============ DECORATIVE SCAFFOLDING (2026-08): static + device-safe ============
   Watercolor wash (pure CSS gradients), gold botanical line-art (low-opacity
   inline SVG in the HTML), and a curved SVG divider under the hero. All purely
   decorative: aria-hidden, pointer-events none, zero JS, nothing animates -
   reduced-motion is unaffected because there is no motion. Content sits above
   via z-index layering. Safari/WeChat-safe: gradients + plain SVG only. */
.page-banner.fv-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;                     /* 2026-08: the shared banner's gold hairline is removed under THIS hero - the curved divider is the only edge */
  background:
    radial-gradient(560px 300px at 12% 8%, rgba(122, 96, 180, 0.16), transparent 65%),
    radial-gradient(640px 360px at 88% 18%, rgba(187, 134, 63, 0.10), transparent 60%),
    radial-gradient(760px 420px at 55% 105%, rgba(122, 96, 180, 0.13), transparent 62%),
    linear-gradient(150deg, var(--lavender-light) 0%, var(--cream) 58%, #F4EFF9 100%);
  padding-bottom: clamp(2.8rem, 6vw, 4.6rem);   /* room for the curved divider */
}
.page-banner.fv-hero > .container { position: relative; z-index: 1; }

.fv-flourish {
  position: absolute;
  pointer-events: none;
  color: var(--gold);
  opacity: 0.22;
  z-index: 0;
  height: auto;
}
.fv-flourish--hero    { right: clamp(-18px, -1vw, 0px); bottom: 10px; width: clamp(96px, 13vw, 170px); transform: rotate(-14deg); }   /* INERT since 2026-08 (markup commented) - the watercolour below replaced it; kept as its restore path */
/* Lavender watercolour corner element (2026-08, replaces the outline ginkgo):
   sized comparably to the old flourish's ~206px rotated footprint, anchored
   lower-right with a deliberate bleed off both edges. The artwork's fade is
   baked in - no mask, no overlay. Decorative (aria-hidden, empty alt). */
.fv-hero__flourish {
  position: absolute;
  right: -34px;
  bottom: -30px;
  z-index: 0;
  width: clamp(130px, 16vw, 230px);
  pointer-events: none;
  opacity: 0.4;
}
.fv-hero__flourish img { display: block; width: 100%; height: auto; }
@media (max-width: 639.98px) {
  .fv-hero__flourish { width: 84px; right: -30px; bottom: -16px; }   /* narrow hero: reduced (never hidden) and tucked - measured clear of the framing line's longest glyph run at 375 */
}
.fv-flourish--article { top: 18px; right: 3vw; width: clamp(78px, 10vw, 130px); transform: rotate(24deg); opacity: 0.15; }
.fv-flourish--closing { left: 2vw; bottom: 12px; width: clamp(88px, 11vw, 150px); transform: rotate(-158deg); opacity: 0.2; }

.fv-divider {
  position: absolute;
  left: 0; right: 0; bottom: -1px;      /* longhand, not inset */
  width: 100%;
  height: clamp(29px, 5vw, 62px);      /* 2026-08: ~10% deeper curve (was 26/4.5vw/56) */
  display: block;
  color: var(--white);                  /* = the next section's background */
  z-index: 0;
}

/* Content layers above the flourishes. */
.fv { position: relative; overflow: hidden; }   /* clips rotated flourish bboxes — no page h-scroll */
.fv > .container,
.fv__chapter,
.fv__checks,
.fv__closing-chapter > .container { position: relative; z-index: 1; }
.fv__closing-chapter { position: relative; }

/* ============ TWO-COLUMN INTRO: message + resources (2026-08) ============
   Left: verbatim excerpt arrangement (large serif-italic pull-quotes with a
   gold rail, 17-18px serif body). Right: "Learn more about Endometriosis"
   panel with three coming-soon resource rows (site icon style: inline stroke
   SVG). Grid with grid-gap; stacks message-above-panel under 900px. */
.fv-intro {
  position: relative;
  background: var(--white);
  padding-top: clamp(2.5rem, 5.5vw, 4.25rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);   /* 2026-08 breathing room: 24->40px @375, 40->72px @1440 between the content block and the closing banner */
}
.fv-intro__cols {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
}
@media (min-width: 900px) {
  .fv-intro__cols {
    grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr);   /* 2026-08 rebalance: 1.55fr -> 1.75fr, the text column carries more weight */
    grid-gap: clamp(2.25rem, 4vw, 3.75rem);
    align-items: start;
  }
}
.fv-intro__quote {
  margin: 0 0 1.15rem;
  padding-left: 1.05rem;
  border-left: 3px solid var(--gold);
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.35;
  color: var(--purple-deep);
}
.fv-intro__message > p {
  margin: 0 0 1.15rem;
  font-family: var(--font-head);          /* readable serif per the brief */
  font-size: clamp(1.1rem, 1.05rem + 0.25vw, 1.15rem);   /* 2026-08 rebalance: 17.6px flat -> 17.7px @375 / 18.4px @1440 (~18px desktop target) */
  line-height: 1.7;
  color: var(--text);
  max-width: 68ch;                        /* 2026-08: widened with the column; measured 68 chars/line at 1440 - inside the 62-72 window */
}
.fv-intro__message > p + .fv-intro__quote { margin-top: 1.7rem; }

.fv-intro__panel {
  background: linear-gradient(160deg, var(--lavender-light) 0%, var(--cream) 100%);
  border: 1px solid rgba(58, 42, 102, 0.12);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: 0 14px 34px -20px rgba(46, 33, 80, 0.4);
}
.fv-intro__panel-title {
  margin: 0;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--gold);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.55rem);   /* 2026-08: panel title keeps its role but never smaller than the kickers */
  line-height: 1.25;
  color: var(--purple-deep);
}
.fv-res { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.fv-res__item {
  display: flex;
  align-items: flex-start;
  margin-top: 0.8rem;
  padding: 0.9rem 1rem;
  background: var(--white);
  border: 1px solid rgba(58, 42, 102, 0.10);
  border-radius: 12px;
}
.fv-res__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: 0.85rem;                 /* margin, not flex gap */
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  color: var(--purple);
}
.fv-res__icon svg { width: 22px; height: 22px; }
.fv-res__body { min-width: 0; }
.fv-res__label {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--purple-deep);
}
/* --- Read the Original Vision additions (2026-08) --------------------------
   The panel/row shells above are reused as-is; these dress the new pieces:
   intro line, per-row action buttons (44px tap floor, small caps label),
   shield note, and the attribution credit. */
.fv-res__intro {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}
/* 2026-08 inline-button rows: GRID, not flex - heading and button share ROW 1
   (button right-aligned), while the description spans the FULL width of row 2
   under both, so the narrow card never squeezes it into extra wraps (a naive
   side-by-side flex measured TALLER, 818px vs 702, for exactly that reason).
   Below 560px the row stacks: icon + heading, description, button full-width. */
.fv-res__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-column-gap: 0.85rem;
  align-items: start;
}
.fv-res__icon { grid-column: 1; grid-row: 1 / span 2; margin-right: 0; color: var(--gold-deep); }   /* 2026-08 icon refine: the existing gold (accessible deep gold on light), matching the shield - was purple */
.fv-res__body { display: contents; }   /* lifts label + desc into the row's grid */
.fv-res__label { grid-column: 2; grid-row: 1; align-self: center; }
.fv-res__desc { grid-column: 2 / -1; grid-row: 2; }
.fv-res__action {
  grid-column: 3;
  grid-row: 1;
  align-self: center;                  /* centred on the heading line */
  margin: 0;
}
@media (max-width: 559.98px) {
  .fv-res__item { grid-template-columns: 44px minmax(0, 1fr); }
  .fv-res__label { align-self: center; }
  .fv-res__desc { grid-column: 2; }
  .fv-res__action { grid-column: 1 / -1; grid-row: 3; margin: 0.55rem 0 0; }
  .fv-res__action .fv-res__btn { width: 100%; justify-content: center; }
}
.fv-res__btn {
  min-height: 35.64px;                   /* 2026-08 round 2: -10% again (44 -> 39.6 -> 35.64px visible); the 44px TAP floor stays on the ::after overlay below - the same technique as the cookie banner's action buttons */
  min-width: 112px;                      /* 2026-08: the shared width tracks the LONGEST label so the pair stays EQUALISED - that equality is the point of this rule. Measured natural widths: "READ ONLINE" 95px, "DOWNLOAD PDF" 112px. (It was briefly 153px while the label carried "· 6 MB"; the size now lives in the description line instead.) Below the mobile breakpoint both go 100% width anyway. */
  position: relative;                    /* anchors the 44px hit overlay */
  /* 2026-08 VERTICAL CENTRING FIX: the base .btn is inline-block, so the
     min-height extension grew DOWNWARD below the single text line - the
     label sat 10.8px above centre with an empty band beneath it. inline-flex
     centres the label on the true optical centre both ways. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.2rem 0.25rem;               /* 2026-08 round 2: horizontal 0.55->0.25rem so the longer label (103.6px rendered) fits the -10% width; min-width equalises both */
  font-size: 0.7rem;                     /* 2026-08 reduced (was 0.78rem = 12.48px -> 11.2px; -20% would hit 10px, too small to read comfortably) */
  font-weight: 700;
  letter-spacing: 0.06em;
}
/* 44px HIT FLOOR (2026-08): the visible pill is 35.64px - a centred transparent
   overlay carries the tap area without consuming layout space (matches the
   cookie banner's .cookie-banner__actions .btn::after pattern). The overlay
   extends only ~4.2px beyond the pill top/bottom - nowhere near the next row. */
.fv-res__btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.fv-res__btn:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 2px; }   /* NOT the raw --focus token; the outline traces the 35.64px pill, not the overlay */
.fv-res__note {
  display: flex;
  align-items: flex-start;
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(58, 42, 102, 0.12);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-warm);
}
.fv-res__noteicon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0.1rem 0.55rem 0 0;            /* margin, not flex gap */
  color: var(--gold-deep);
}
.fv-res__noteicon svg { width: 18px; height: 18px; display: block; }
.fv-res__credit {
  /* 2026-08 correction: a closing SENTIMENT, not a label - the site's italic
     serif attribution voice (Lora italic, as the story-letter closings use),
     replacing the upright bold sans. Left edge aligned to the shield
     paragraph's TEXT above it: 18px icon + 0.55rem gap (the two previously
     sat 26.8px apart, which read as an error). */
  margin: 0.85rem 0 0;
  padding-left: calc(18px + 0.55rem);
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 500;
  color: var(--purple);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* (INERT since 2026-08 - the COMING SOON badges are gone from the panel;
   kept as the restore path.) */
.fv-res__tag {
  display: inline-block;
  margin-left: 0.45rem;
  vertical-align: middle;
  font-family: var(--font-body);
  font-size: 0.68rem;   /* exact match with the site pill recipe (.feature-card__tag / .edu-card__tag / .portal-login__tag) */
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--purple-deep);
  background: var(--white);
  border: 1px solid var(--gold);
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}
.fv-res__desc {
  margin: 0 0 0;                          /* 2026-08: tightened under the heading/button row (was 0.15rem top) */
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- Aesthetic pass (2026-08): curved white wave INTO the purple
   Vision & Mission chapter, echoing the hero divider. Static SVG,
   aria-hidden, no motion. ---- */
.fv__chapter { overflow: hidden; }
.fv-wave {
  position: absolute;
  top: -1px; left: 0; right: 0;         /* longhand, not inset */
  width: 100%;
  height: clamp(22px, 3.5vw, 46px);
  display: block;
  color: var(--white);                  /* = the section above */
  z-index: 0;
  pointer-events: none;
}

/* ============ CLOSING: thank-you strip + signature + dual CTA (2026-08) ============
   Full-width lavender band (heart | globe items, hairline divider), then the
   signature + CTAs on white. The signature block moved OUT of the purple
   chapter, so its base light-background colors apply directly.
   NOTE (Aug 2026): the .fv-thanks strip markup is COMMENTED OUT in
   founders-vision.html at client request. These rules are inert without it
   and are deliberately KEPT (not deleted) so uncommenting the HTML block
   fully restores the strip. They are used by no other element or page. */
.fv-thanks {
  background: var(--lavender-light);
  border-top: 1px solid rgba(187, 134, 63, 0.45);
  border-bottom: 1px solid rgba(58, 42, 102, 0.12);
  padding-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}
.fv-thanks__row { display: flex; align-items: center; flex-wrap: wrap; }
.fv-thanks__item {
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  min-width: 0;
  margin: 0.4rem 0;
  font-family: var(--font-head);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--purple-deep);             /* ~12.6:1 on lavender-light */
}
.fv-thanks__icon {
  /* 2026-08 matched to the resource-card icon treatment (same 1.5px gold ring
     circle, same gold-deep 1.75-stroke line art) - was a white-filled circle
     with a purple icon. Size and position unchanged. */
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-right: 0.9rem;                  /* margin, not flex gap */
  background: transparent;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-deep);               /* 5.2:1 on the lavender-light band */
}
.fv-thanks__icon svg { width: 22px; height: 22px; }
.fv-thanks__divider {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  margin: 0.4rem clamp(1rem, 3vw, 2.25rem);
  background: rgba(58, 42, 102, 0.18);
}
/* 2026-08 closing banner: the strip is LIVE again as the page's closing band
   (globe line + Join button, two elements only). The button cell rides the
   same flex row; its focus ring avoids the raw --focus token. */
.fv-thanks__cta { margin: 0.4rem 0 0.4rem auto; flex: 0 0 auto; }
.fv-thanks__cta .btn { min-height: 44px; letter-spacing: 0.04em; }
.fv-thanks__cta .btn:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 2px; }
@media (max-width: 759.98px) {
  .fv-thanks__cta { margin-left: 0; }
}
@media (max-width: 759.98px) {
  .fv-thanks__divider { display: none; }
  .fv-thanks__item { flex-basis: 100%; }
}

.fv-outro {
  background: var(--white);
  padding-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);   /* 2026-08: tightened - footer follows naturally */
}
.fv-outro .fv__signature { border-top: 0; padding-top: 0; margin-top: 0.5rem; margin-bottom: 0.5rem; }   /* 2026-08: drop the 40px trailing margin */
/* 2026-08: the shared .section bottom padding (72px) doubled up under the
   outro - retired on this article only (page-scoped selector). */
.fv.section { padding-bottom: 0; }
.fv-outro .btn--primary { min-height: 48px; padding: 0.85rem 2rem; font-size: 1.1rem; font-weight: 700; }
.fv-outro .btn--ghost { min-height: 44px; }
@media (max-width: 479.98px) {
  .fv-outro .fv__final-row .fv__signature { margin-right: 0; }
  .fv-outro .fv__final-row .fv__cta { width: 100%; flex-direction: column; align-items: stretch; }   /* phones: stack (desktop is row) */
  .fv-outro .btn--primary, .fv-outro .btn--ghost { width: 100%; justify-content: center; margin-right: 0; }
}


/* ==========================================================================
   A PERSONAL WELCOME - welcome.html (2026-09). Hand-built sibling of the
   Founder's Vision page: the same shell and this same stylesheet, reusing
   its band, card and closing-strip patterns. Every rule here is prefixed
   welcome- and reaches no other page. GEM purple and gold only.
   Measured pairs (flat, token on token):
     --purple-deep on cream / lavender-light   13.4 / 13.0
     --text on white 13.86 - --text-warm on white 9.10 / on lavender-light 8.36
     --gold-deep eyebrow on cream 5.18 / on lavender-light 5.01
     callout: white on --purple 12.33 - --lavender body 10.8 - gold rail (non-text)
     buttons: white on --purple-bright 6.5 - white on --purple 12.33
     held action: --text-muted on white 6.98, dashed rgba(58,42,102,.4) edge
   ========================================================================== */

/* ---- 0. One column (2026-09-24): every block of the page - the hero copy, the
   letter card, the pillar row, the callout, the paragraphs and the action row -
   shares ONE 900px container (the site's is 1120), so each has the same left
   and right edge and no paragraph stops short of the block around it. The
   reading measure caps below are gone for the same reason. */
.welcome .container { max-width: calc(900px + 2.5rem); }
/* the site's base p { max-width: 72ch } would still stop these short of the
   blocks around them - the column IS the measure here */
.welcome-letter__text > p,
.welcome-prose,
.welcome-signoff,
.welcome-closing-line,
.welcome-callout__text { max-width: none; }

/* ---- 1. Hero: the shared band as a compact banner, copy on the container's
   left edge. The letter card below overlaps the band's lower edge by
   --welcome-overlap (60px desktop, 32px phone), so the band carries that much
   extra bottom padding and the two read as one composition. ---------------- */
.welcome { --welcome-overlap: 32px; }
@media (min-width: 47.5rem) { .welcome { --welcome-overlap: 60px; } }
/* A deep band in GEM's own purple, --purple to --purple-deep on the diagonal.
   White headline and subline, the light brand gold for the eyebrow. Measured
   on the composited pixels: white 12.3-14.5, gold-light 7.7-9.0. */
.page-banner.welcome-hero {
  position: relative;
  overflow: hidden;
  text-align: left;
  background: linear-gradient(118deg, var(--purple) 0%, var(--purple-deep) 100%);
  border-bottom: 0;
  color: var(--white);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-bottom: calc(var(--welcome-overlap) + clamp(1.5rem, 3vw, 2.25rem));
  display: flex;
  flex-direction: column;
  justify-content: center;           /* the copy centres in any extra height the sprig needs */
}
@media (min-width: 48rem) { .page-banner.welcome-hero { min-height: 15.5rem; } }   /* 248px: the flower head clears the card top */
@media (min-width: 64rem) { .page-banner.welcome-hero { min-height: 22rem; } }   /* 352px: room for the sprig above the card */
.welcome-hero__inner { display: block; position: relative; z-index: 1; }
/* the eyebrow is a small label - 13px, 600, tracked - so the gold sprig is
   the band's one large gold element */
.welcome-hero .eyebrow {
  color: var(--guide-gold-light);    /* 7.65 on --purple, 8.99 on --purple-deep */
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.welcome-hero h1 { max-width: 22ch; color: var(--white); }
.welcome-hero__sub {
  margin: 0.75rem 0 0;
  max-width: 36ch;
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  color: var(--white);               /* 12.33 on --purple */
}
/* The sprig, the band's feature (2026-09-24, enlarged): a fan of four stems
   from one point at the bottom-right corner, opened to a wider angle
   (760x440 viewBox) and sweeping left toward the headline. Anchored to the
   corner with preserveAspectRatio xMaxYMax, in a box that runs 3rem past the
   band's bottom edge, so a larger fan grows DOWN off the corner rather than
   up into the copy. Its WIDTH is what the copy allows: at least 80px from
   every text run (measured point by point along the stems and buds at
   640-1920). The hero copy sits in the 900px column and its longest run (the
   subline) ends ~445px in, which gives the widths below; from ~1500px the
   band's 352px height is the cap instead (the fan tops out at ~600px wide).
   Gold two-tone: --gold stems .42, --guide-gold-light buds .58. Hidden below
   640px. */
.welcome-hero__sprig {
  display: none;
  position: absolute;
  top: 0.5rem;
  right: 1.5rem;
  height: calc(100% - 0.5rem);       /* 640-1023: the whole fan inside the band, base at the corner */
  width: calc(100vw - 470px);        /* 170px at 640, 298px at 768; the band's height caps it from ~900px */
  overflow: visible;
  color: var(--gold);
  opacity: 0.42;
  pointer-events: none;
}
.welcome-hero__sprig .sprig-bud { color: var(--guide-gold-light); opacity: 0.58; }
@media (min-width: 40rem) { .welcome-hero__sprig { display: block; } }
@media (min-width: 64rem) {
  .welcome-hero__sprig {
    height: calc(100% + 2.5rem);     /* the box runs 48px past the band's bottom edge: the fan grows down off the corner */
    width: clamp(450px, calc(56vw - 162px), 700px);   /* 450 at 1024, 555 at 1280, 644 at 1440; height-capped from ~1500 */
  }
}

/* ---- 2. The letter: framed card, portrait | text ------------------------- */
.welcome-letter {
  background: var(--cream);          /* the page's surface; the white card is a sheet on it */
  padding-top: 0;                    /* the card's negative margin sets its top */
  padding-bottom: 0;
}
.welcome-letter__card {
  position: relative;
  z-index: 1;                        /* over the band it overlaps */
  margin-top: calc(-1 * var(--welcome-overlap));
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--white);
  border: 1px solid rgba(58, 42, 102, 0.12);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px -20px rgba(46, 33, 80, 0.4);
}
@media (min-width: 47.5rem) {         /* 760px: portrait left, text right */
  .welcome-letter__card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
}
.welcome-letter__figure { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
/* the same treatment as .fv-hero__photo */
.welcome-letter__photo {
  display: block;
  width: clamp(180px, 24vw, 260px);
  height: clamp(180px, 24vw, 260px);
  border-radius: 20px;
  object-fit: cover;
  border: 3px solid var(--white);
  box-shadow: 0 18px 44px -18px rgba(46, 33, 80, 0.45), 0 0 0 1px rgba(187, 134, 63, 0.45);
}
.welcome-letter__caption { margin-top: 0.85rem; display: flex; flex-direction: column; }
/* a short gold rule between the portrait and the name: 40x3, the card's gold,
   the same air above and below it */
.welcome-letter__caption::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 0 0 0.85rem;
  background: var(--gold);
  border-radius: 2px;
}
.welcome-letter__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--purple-deep);         /* 14.49 on white */
}
.welcome-letter__role { font-size: 0.9375rem; color: var(--text-warm); }   /* 9.10 on white */
.welcome-letter__title {
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  color: var(--purple-deep);
}
.welcome-letter__text > p {
  margin: 0 0 1.1rem;
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 1.05rem + 0.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--text);                /* 13.86 on white */
}
.welcome-letter__text > p:last-child { margin-bottom: 0; }
.welcome-letter__text strong { font-weight: 700; color: var(--purple-deep); }

/* ---- 3. The five pillars (2026-09-28) ------------------------------------ */
.welcome-pillars {
  background: var(--cream);          /* one continuous ground: no band behind the set */
  padding-top: clamp(2rem, 3.5vw, 3rem);
  padding-bottom: 0;
}
.welcome-pillars .eyebrow { margin-bottom: 0.5rem; }   /* --gold-deep, 5.18 on cream */
.welcome-pillars__title {
  margin: 0 0 0.5rem;                /* the intro line follows (2026-09-25) */
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.18;
  color: var(--purple-deep);
}
/* the one-line intro under the heading: the page's body measure, warm ink */
.welcome-pillars__intro {
  margin: 0 0 clamp(1.1rem, 2.5vw, 1.5rem);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-warm);           /* 8.85 on cream */
}
.welcome-pillars__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
/* 640-1023px: two across, the fifth card spanning both columns */
@media (min-width: 40rem) {
  .welcome-pillars__grid { grid-template-columns: repeat(2, 1fr); }
  .welcome-pillar:nth-child(5) { grid-column: 1 / -1; }
}
/* from 1024px: three across, then two beneath running edge to edge - a six-track
   grid where cards 01-03 span two tracks and cards 04-05 span three, so both
   rows share the same outer left and right edges and the same gap */
@media (min-width: 64rem) {
  .welcome-pillars__grid { grid-template-columns: repeat(6, 1fr); }
  .welcome-pillar { grid-column: span 2; }
  .welcome-pillar:nth-child(4),
  .welcome-pillar:nth-child(5) { grid-column: span 3; }
  /* the wider cards keep a comfortable line; the card itself stays full width */
  .welcome-pillar:nth-child(4) .welcome-pillar__text,
  .welcome-pillar:nth-child(5) .welcome-pillar__text { max-width: 62ch; }
}
.welcome-pillar {
  display: flex;
  flex-direction: column;
  height: 100%;                      /* equal heights across a row */
  padding: 1.25rem 1.25rem 1.35rem;
  /* one family, five accents: every card keeps the --lavender ground (a step
     deeper than the cream surface, plus a whisper of an edge); over it, a 4px bar
     of the card's accent along the top edge and a soft wash of the same accent
     fading into the ground by 60% of the card's height. background-origin puts
     the bar flush with the card's outer edge, inside the rounded corners. */
  --pillar-accent: var(--purple);
  --pillar-wash: var(--pillar-wash-purple);
  background-color: var(--lavender);
  background-image:
    linear-gradient(var(--pillar-accent), var(--pillar-accent)),
    linear-gradient(to bottom, var(--pillar-wash), rgba(255, 255, 255, 0) 60%);
  background-size: 100% 4px, 100% 100%;
  background-repeat: no-repeat;
  background-origin: border-box;
  border: 1px solid rgba(58, 42, 102, 0.08);
  border-radius: 12px;
}
.welcome-pillar:nth-child(2),
.welcome-pillar:nth-child(5) { --pillar-accent: var(--gold); --pillar-wash: var(--pillar-wash-gold); }
.welcome-pillar:nth-child(3) { --pillar-accent: var(--teal); --pillar-wash: var(--pillar-wash-teal); }
.welcome-pillar:nth-child(4) { --pillar-accent: var(--purple-mid); --pillar-wash: var(--pillar-wash-purple-mid); }
.welcome-pillar__num {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--purple-deep);         /* the heading colour: carries the 9% wash (--gold-deep fell to 4.16) */
}
.welcome-pillar__title {
  margin: 0.35rem 0 0.5rem;
  font-family: var(--font-head);
  font-weight: 700;                  /* bold, his instruction */
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--purple-deep);         /* 12.67 on --lavender */
}
.welcome-pillar__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-warm);           /* 7.95 on --lavender */
}
/* (the two-paragraph card of 2026-09-25 is gone: Research and Education are
   cards 04 and 05 now) */

/* ---- 4-7. Advocacy, callout, acknowledgment, sign-off, actions ----------- */
.welcome-close {
  background: var(--cream);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
/* .welcome-close__inner is the shared .container: same width and left edge
   as the letter card and the pillars - one column for the whole letter */
.welcome-prose {
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--font-head);
  /* 2026-09-24: sized to the 900px column - 21px from ~1000px (measured ~84
     characters per full line, was 96-100 at 18.4px), easing to ~18.3px at 390 */
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.3125rem);
  line-height: 1.65;
  color: var(--text);                /* 13.18 on cream */
}
.welcome-prose strong { color: var(--purple-deep); }

/* the registration callout: solid GEM purple, a gold rail down its left */
.welcome-callout {
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.25rem, 3.5vw, 2.5rem);
  background: var(--purple);
  border-left: 6px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--white);
}
.welcome-callout__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  line-height: 1.2;
  color: var(--white);               /* 12.33 on --purple */
}
.welcome-callout__text {
  margin: 0;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.28rem);   /* in step: ~20.5px on desktop, was 18 */
  line-height: 1.6;
  color: var(--lavender);            /* 10.8 on --purple */
}
.welcome-callout__text strong { color: var(--white); font-weight: 700; }

.welcome-signoff {
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.3125rem);   /* in step with .welcome-prose */
  line-height: 1.65;
  color: var(--text);
}
.welcome-signoff strong { color: var(--purple-deep); }

/* the three actions: primary, a held place, and the main participation
   button, which is larger and in the deeper purple with a gold edge */
.welcome-actions {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;               /* one row height for all three, whatever wraps */
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}
@media (min-width: 64rem) {
  .welcome-actions { grid-template-columns: repeat(3, 1fr); gap: 1rem; }   /* an even row across the column; below 1024px the labels would wrap in thirds, so the row stacks */
}
.welcome-actions .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding-inline: 1rem;
}
.welcome-actions__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.welcome-actions__join {
  background: var(--gold);           /* the dominant action: brand gold fill */
  border-color: var(--gold);
  color: var(--purple-deep);         /* 4.54:1 on --gold (measured 4.55 mean on the pixels).
                                        The label is 19px/700 = WCAG large text, so the bar
                                        is 3.0 and this clears it with room; at 17px it would
                                        have sat on the 4.5 line. White (3.18) and --purple
                                        (4.44) were rejected. */
  min-height: 44px;                  /* dominance by colour, not size: the row shares one height */
  padding: 0.85rem 1rem;
  font-size: 1.1875rem;              /* 19px: WCAG large text, which its 4.54:1 on gold depends on */
  font-weight: 700;
}
@media (max-width: 22.5rem) {
  /* 320-360px: the label keeps its large-text size; padding gives it the room */
  .welcome-actions__join { padding-inline: 0.5rem; }
}
.welcome-actions__join:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--white); }   /* 5.60:1, the .btn--gold hover */
/* The outlined action (2026-09-25, was the unlinked "For families & supporters"
   placeholder): a real link, the ghost counterpart of its two filled
   neighbours - solid --purple-bright outline on a white fill at rest (label
   6.46:1 on white), and on hover it settles into the same --purple fill and
   white label as the primaries (12.33:1); the focus ring is the row's 3px
   --focus ring, via .welcome-actions__btn. */
.welcome-actions__outline {
  background: var(--white);
  border: 2px solid var(--purple-bright);
  color: var(--purple-bright);
}
.welcome-actions__outline:hover { background: var(--purple); border-color: var(--purple); color: var(--white); }
/* (the row stacks below 768px via the grid above) */
.welcome-closing-line {
  margin: 0;
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  color: var(--purple-deep);
}

/* ---- 8. The way to the Founder's Vision: the closing strip, one link ---- */
.welcome-fvlink__link {
  font-weight: 700;
  color: var(--purple-deep);         /* 13.0 on lavender-light */
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.welcome-fvlink__link:hover { color: var(--purple-bright); }
.welcome-fvlink__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .welcome .btn { transition: none; }
  .welcome .btn:hover { transform: none; }
}


/* ==========================================================================
   PROFESSIONAL BIOGRAPHY - chairman-biography.html (2026-09). Sibling of
   welcome.html on this stylesheet: the same deep purple band, the Welcome
   page's portrait treatment (.welcome-letter__photo) and closing strip
   (.fv-thanks + .welcome-fvlink__link). Rules prefixed chairbio-, reaching
   no other page.
   Measured pairs (flat):
     band: white on --purple 12.33 / --purple-deep 14.49; --guide-gold-light
           eyebrow + credentials 7.65 / 8.99
     body: --text on --cream 13.18; note/source --text-muted on cream 6.63;
           link --purple on cream 11.72
   ========================================================================== */
.page-banner.chairbio-hero {
  background: linear-gradient(118deg, var(--purple) 0%, var(--purple-deep) 100%);
  border-bottom: 0;
  color: var(--white);
  padding-block: clamp(1.75rem, 4vw, 3rem);
}
.chairbio-hero__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
@media (min-width: 40rem) {           /* 640px: portrait left, copy right */
  .chairbio-hero__row { flex-direction: row; align-items: center; }
}
.chairbio-hero__figure { margin: 0; flex: 0 0 auto; }
/* the Welcome page's portrait, a touch smaller in a band */
.welcome-letter__photo.chairbio-hero__photo {
  width: clamp(140px, 18vw, 210px);
  height: clamp(140px, 18vw, 210px);
}
.chairbio-hero .eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--guide-gold-light);    /* 7.65 on --purple */
}
.chairbio-hero h1 { margin: 0; color: var(--white); max-width: none; }
.chairbio-hero__creds {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--guide-gold-light);    /* 7.65 on --purple */
}
.chairbio-hero__sub {
  margin: 0.6rem 0 0;
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  color: var(--white);               /* 12.33 on --purple */
}

/* the biography: one column at the Welcome letter's reading measure, on cream */
.chairbio-body {
  background: var(--cream);
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5.5vw, 4rem);
}
.chairbio-body__text > p {
  margin: 0 0 1.15rem;
  max-width: 68ch;
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 1.05rem + 0.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--text);                /* 13.18 on cream */
}
.chairbio-body__text > p.chairbio-note {
  margin: 1.75rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(58, 42, 102, 0.14);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);          /* 6.63 on cream */
}
.chairbio-body__text > p.chairbio-note--source { margin-top: 0.25rem; padding-top: 0; border-top: 0; }
.chairbio-note a {
  display: inline-block;             /* a 44px hit area, pulled back so the line does not move */
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  font-weight: 600;
  color: var(--purple);              /* 11.72 on cream */
  text-underline-offset: 3px;
}
.chairbio-note a:hover { color: var(--purple-bright); }
.chairbio-note a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }