/* 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; }
}