/* ============================================================
   main.css — page layout + homepage section styles.
   Import order matters: tokens -> base -> components -> main.
   (index.html links them in this order.)
   ============================================================ */

/* ---- Scroll-reveal ------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- HERO ----------------------------------------------- */
.hero { background: var(--c-blue); position: relative; overflow: hidden; isolation: isolate; }
/* Lime abstract pattern layer — full composition mapped across the whole panel
   (stretched to show all squiggles at their designed edge positions). */
.hero__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Lime squiggle artwork extracted from the comp, framed to the blue panel so the
     curls land at the panel's left/right edges (stretch-to-fit keeps edges anchored). */
  background: url("../patterns/PNG/home-hero-squiggle.png") center top / 100% 100% no-repeat;
}
.hero__inner {
  position: relative; z-index: 1; max-width: 1500px;   /* wider than default so copy + a wide photo both fit */
  display: grid; grid-template-columns: 1fr 0.86fr; gap: var(--space-lg);  /* photo narrower again per review */
  align-items: end;                          /* image bottom aligns to hero bottom */
  padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: 0;  /* image sits flush to the marquee */
}
/* Copy sits in toward the photo (client: "too far left") — indent the column content. */
.hero__copy { align-self: center; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); padding-left: clamp(1rem, 4.5vw, 4.5rem); }
/* Scales toward the 72px design spec on wide screens; scales down on smaller so the forced
   3-line wrap never overflows into a 4th line. */
.hero__title { font-size: clamp(2.1rem, 3.7vw, 3.423rem); line-height: 1.04; color: var(--c-olive); }
.hero__lead { font-size: var(--fs-300); max-width: 40ch; margin-top: var(--space-md); color: var(--c-olive); line-height: 1.42; letter-spacing: -0.005em; }
.hero__lead strong { display: block; font-size: var(--fs-400); margin-bottom: .25em; white-space: nowrap; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
/* CTA scales like the rest of the hero: 17px at the ~1900 design width, smaller here so it
   stays proportional (and no wider than the bold lead line above it). */
.hero__actions .btn { font-size: clamp(0.8125rem, 0.9vw, 0.833rem); } /* padding inherited from base .btn */
/* Arch-clipped photo (rounded dome top, straight sides/bottom) — mirrors the brand arch logo.
   Taller frame, bottom-flush so it connects to the marquee bar below. */
.hero__media {
  position: relative; align-self: end; overflow: hidden;
  height: clamp(440px, 47vw, 640px);
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transform: translateY(26px) scale(1.12); }
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-lg); padding-bottom: 0; }
  .hero__copy { padding-bottom: 0; padding-left: 0; }
  .hero__lead strong { white-space: normal; }   /* allow the bold line to wrap on small screens */
  /* Match the assessment section's arch (.assess__media) on mobile, not a shallow dome. */
  .hero__media { height: clamp(360px, 70vw, 480px); border-radius: 50% 50% 0 0 / 40% 40% 0 0; }
}

/* ---- Intro / "Since 2014" band -------------------------- */
.intro-band { text-align: center; padding-block: clamp(5rem, 3.5rem + 6vw, 9.5rem); position: relative; overflow: hidden; } /* taller than default section */
/* Subtle topographic pattern behind the section (lighter olive on the olive bg) */
.intro-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background: url("../logos/SVG/background-pattern-header-green-abstract-2.svg") center center / cover no-repeat;
}
.intro-band .container { display: grid; gap: var(--space-md); justify-items: center; position: relative; z-index: 1; }
.intro-band__title { font-size: var(--fs-700); line-height: 1.08; }
.intro-band__sub { max-width: 52ch; color: var(--color-on-dark); font-size: var(--fs-400); }
.intro-band__sub strong { font-weight: var(--fw-bold); }
.callout-pill {
  display: inline-block; background: var(--c-cream-warm); color: var(--c-olive);
  border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-400); max-width: 60ch; box-shadow: var(--shadow-sm);
}
/* Full-width blue callout (hero blue), sits beneath both columns */
.callout-pill--blue {
  display: block; max-width: none; background: var(--c-blue); box-shadow: none;
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem) clamp(1.75rem, 1rem + 3vw, 3.5rem);
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.15rem); line-height: 1.35;
}
.callout-pill--blue strong { font-weight: var(--fw-bold); }

/* ---- Two-column "doubt" section ------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; gap: var(--space-lg); } }
.doubt .callout-pill { margin-top: var(--space-3xl); }
/* Mobile: tighten the gap above the blue "live faithfully" pill (client). */
@media (max-width: 800px) { .doubt .callout-pill { margin-top: var(--space-lg); } }

/* ---- "Safe Place" orange section ------------------------ */
.feature-orange { position: relative; overflow: hidden; }
/* Faint blue-gray squiggle pattern behind the orange (same family as hero/intro patterns) */
.feature-orange__pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 1;
  /* Blue-gray squiggle waves extracted from the comp, framed to the section
     (waves sit across the top + a curl bottom-left). */
  background: url("../patterns/PNG/home-orange-squiggle.png") center top / 100% 100% no-repeat;
}
.feature-orange .container { position: relative; z-index: 1; }
/* Image card with the heading overlaid on top-left. Per client the photo is a
   ROUNDED RECTANGLE (not a dome) with a faint white wash over it so the overlaid
   white heading stays readable. Comp photo aspect ≈ 1678/978. */
.feature-orange__card {
  position: relative; max-width: 1240px; margin-inline: auto;
}
.feature-orange__media {
  position: relative; overflow: hidden;
  border-radius: clamp(20px, 2.2vw, 40px);
  aspect-ratio: 1678 / 978;
}
.feature-orange__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 600px) { .feature-orange__media { aspect-ratio: 4 / 3.2; } }
/* Title overlaid top-left on the photo. Re-added as live HTML after the new PNG dropped the
   baked-in title: white Biennale, faint white bar behind "Wrestle", thin slate-blue (--c-blue)
   underline under "Big Questions". */
.feature-orange__heading {
  position: absolute; top: clamp(1rem, 3.5%, 2.25rem); left: clamp(1.25rem, 4%, 3rem);
  z-index: 2; margin: 0; max-width: none;
  color: var(--c-white); font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(2rem, 3.4vw, 3.145rem); line-height: 1.08;
  text-shadow: 0 2px 18px rgba(28, 28, 27, 0.22);
}
/* "Big Questions" — slate-blue HIGHLIGHT bar behind the text (same treatment as the peach
   highlight on the "world feels loud and confusing" section), translucent so the photo reads
   through. Uses the standard .hl-mark bar geometry (do NOT override background/text-decoration). */
.feature-orange__heading .hl-mark--blue { --hl-color: rgba(168, 184, 199, 0.62); }
/* Centered intro paragraph beneath the image. Desktop pins the comp's exact 6-line wrap with
   .br-desk; sized to comp proportions (~18px). Pulled up closer to the photo per client. */
.feature-orange__intro {
  max-width: 900px; margin: clamp(1rem, 0.6rem + 1.5vw, 1.8rem) auto 0;
  text-align: center; color: var(--c-white);
  font-size: clamp(1.05rem, 0.85rem + 0.55vw, 1.15rem); line-height: 1.55;
}
/* Collapse the pinned breaks below 960px so the paragraph reflows on tablet/mobile. */
@media (max-width: 960px) { .feature-orange__intro .br-desk { display: none; } }
.feature-orange__intro strong { font-weight: var(--fw-semibold); }
.feature-orange__intro em { font-style: italic; }

/* ---- "We don't pretend" blue follow-up band ------------- */
.feature-followup { background: var(--c-blue); position: relative; overflow: hidden; }
/* Orange squiggle ribbons seated in the corners over the blue */
.feature-followup__pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Orange brush squiggles extracted from the comp, framed to the blue band
     (curl top-left, ribbon bottom-right). */
  background: url("../patterns/PNG/home-followup-squiggle.png") center center / 100% 100% no-repeat;
}
.feature-followup .container { position: relative; z-index: 1; }
.feature-followup__statement {
  max-width: 41ch; margin-inline: auto; text-align: center;
  font-family: var(--font-display); color: var(--c-white);
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.3rem); line-height: 1.22;
}
/* Mobile: keep the copy clear of the corner squiggle ribbons (client: don't overlap). */
@media (max-width: 600px) {
  .feature-followup { padding-block: clamp(3.5rem, 14vw, 5rem); }
  .feature-followup .container { padding-inline: clamp(1.75rem, 9vw, 3rem); }
  .feature-followup__statement { max-width: 24ch; font-size: clamp(1.3rem, 5.4vw, 1.6rem); }
}
@media (max-width: 640px) {
  .feature-orange__heading { max-width: 11ch; }
}

/* ---- How We Come Alongside You — section head ----------- */
/* No max-width on the head so the title sits on ONE line (wraps only on narrow mobile). */
.alongside__head { margin-bottom: var(--space-xl); }
.alongside__title { font-size: var(--fs-600); text-wrap: nowrap; }
/* Subtitle: line breaks are pinned with <br> in the markup (matches the comp wrap). */
.alongside__sub {
  margin-inline: auto; margin-top: var(--space-md);
  color: var(--c-olive); font-size: var(--fs-450); line-height: 1.3;
}
@media (max-width: 600px) { .alongside__title { text-wrap: balance; } }
/* "View All Services" button uses the shared .btn--sm modifier (small caps pill). */

/* ---- Stat band ------------------------------------------ */
/* Extra vertical breathing room to match the comp's generous band padding. */
.stat-band { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); }
/* Lime corner blobs extracted from the comp (top-left + bottom-right), framed to the band. */
.stat-band__pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(../patterns/PNG/home-stat-blobs.png) center / 100% 100% no-repeat;
}
.stat-band > .container { position: relative; z-index: 1; }
.stat-band__head { text-align: center; margin-inline: auto; margin-bottom: var(--space-2xl); }
/* Title wraps to two lines (pinned with <br>); highlight bar behind "experience to guide you."
   Comp (1920): 72px Biennale Bold. */
.stat-band__title { font-size: clamp(2.2rem, 3.75vw, 3.469rem); line-height: 1.14; }
/* ---- Meet the Ambassadors (two-column intro on white) --- */
.meet-band__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  max-width: 920px; margin-inline: auto;
  font-size: var(--fs-200); line-height: 1.65;
}
@media (max-width: 760px) { .meet-band__cols { grid-template-columns: 1fr; gap: var(--space-md); text-align: center; } }

/* ---- "Join the Movement" steps -------------------------- */
.movement-band { position: relative; overflow: hidden; }
/* Cream brushstroke texture (raster from the comp) covering the whole band.
   Muted to sit quietly behind the copy (client: "more muted than the mock up"). */
.movement-band__pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(../patterns/PNG/home-movement-bg.png) center / cover no-repeat;
  opacity: 0.5;
}
.movement-band > .container { position: relative; z-index: 1; }
/* Desktop: title top-left, Schedule button beneath it, steps spanning the right column.
   Mobile: title → steps → button (client: button under step 3). */
.movement {
  display: grid; gap: var(--space-xl); align-items: start;
  grid-template-columns: 0.85fr 1.15fr; grid-template-rows: auto 1fr;
  grid-template-areas: "head steps" "cta steps";
}
.movement__head { grid-area: head; align-self: center; }
.movement__steps { grid-area: steps; }
.movement__cta { grid-area: cta; justify-self: start; align-self: start; }
.movement__title { font-size: var(--fs-700); text-transform: uppercase; line-height: 1.04; }
/* Bands behind "Join" / "Movement" use .hl-mark--muted (slate-blue, per comp). */
@media (max-width: 800px) {
  .movement {
    grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: var(--space-lg);
    grid-template-areas: "head" "steps" "cta";
  }
  .movement__head { align-self: start; }
}

/* ---- Assessment band ------------------------------------ */
.assess-band { position: relative; overflow: hidden; }
/* Colorful angular blobs extracted from the comp (slate/brown top-left, lime bottom-right). */
.assess-band__pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(../patterns/PNG/home-assess-blobs.png) center / 100% 100% no-repeat;
}
.assess-band > .container { position: relative; z-index: 1; }
.assess { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-xl); align-items: center; }
/* Nudge the copy column in toward centre (client: header/body/button shifted right a bit). */
.assess > div:first-child { padding-left: clamp(1.25rem, 5vw, 5rem); }
/* Slightly smaller cap so the heading holds 3 lines (was wrapping "Your Ambassadors" to a 4th). */
.assess__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
/* Body copy a touch larger per client */
.assess__lead { max-width: 42ch; margin-top: var(--space-md); font-size: clamp(1.05rem, 1.15vw, 1.064rem); line-height: 1.6; }
/* "Take the Assessment" bold + roomier pill per client */
.assess .btn { font-weight: var(--fw-bold); padding: 0.95em 2.2em; }
@media (max-width: 800px) { .assess > div:first-child { padding-left: 0; } }
/* Arch clip: rounded dome top, straight sides + flat bottom (same motif as the hero photo). */
.assess__media { border-radius: 50% 50% 0 0 / 40% 40% 0 0; overflow: hidden; aspect-ratio: 4/4.4; }
.assess__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
@media (max-width: 800px) {
  .assess { grid-template-columns: 1fr; }
  .assess__media { order: -1; aspect-ratio: 4/3.4; max-width: 420px; margin-inline: auto; }
}

/* ---- Testimonials ("What Leaders Are Saying") ----------- */
/* The lime quote-mark SVG sits centered behind the text as a frame; its
   clusters flank far-left/far-right, the rotating quote lives in the gap. */
.testimonials__frame {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  padding-block: var(--space-lg);
  background: url(../patterns/SVG/quote-style.svg) center / contain no-repeat;
}
/* Static fallback: a lone testimonial (no JS rotation, e.g. About page) stays visible;
   also a graceful no-JS fallback for the rotating homepage set (slide 0 shows). */
.testimonial.is-active { opacity: 1; visibility: visible; }
.testimonial {
  grid-area: 1 / 1;            /* stack all slides in one cell for cross-fade */
  max-width: 42rem;            /* wider lines, still clear of the flanking quote clusters */
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  text-align: center;
  opacity: 0;                  /* fade is driven by JS (Web Animations API) */
  will-change: opacity, transform;
}
.testimonial__text { font-family: var(--font-body); font-size: var(--fs-425); color: var(--c-ink); line-height: 1.55; }
.testimonial__cite {
  display: block;
  margin-top: var(--space-md);
  font-style: normal;
  font-weight: var(--fw-bold);
  font-size: var(--fs-75);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-olive);
}

/* ---- Newsletter ----------------------------------------- */
/* Comp (TAF_Resources.ai §6, 1920 artboard): content spans ~1620px (wider than
   .container--wide); columns top-aligned; right lead drops to the wordmark's 2nd
   line (AMBASSADORS); form fields line up with the left body copy. Type measured:
   lead 48px, body 27px, fields/labels 17px, button 17px SemiBold 0.16em caps. */
.newsletter { background: var(--c-blue-pale); }
.newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; max-width: 1620px; }
/* SVG wordmark replaces the rendered heading; alt text keeps it an accessible <h2>. */
.newsletter__title { margin: 0; line-height: 0; }
.newsletter__title img { width: min(100%, 809px); height: auto; }
/* Body copy — comp 27px; pinned <br> breaks reproduce the comp's 3 lines. */
.newsletter__body { margin-top: 1.7rem; max-width: min(100%, 700px); color: var(--c-ink); font-size: clamp(1.05rem, 1.41vw, 1.304rem); line-height: 1.48; }
.newsletter__body--strong { margin-top: 1.4rem; font-weight: var(--fw-bold); }
/* Right column — drop the lead to the wordmark's AMBASSADORS line (comp offset ≈ 85/1920). */
.newsletter__signup { padding-top: clamp(0px, 4.4vw, 85px); }
.newsletter__lead { font-size: clamp(1.5rem, 2.5vw, 2.312rem); font-weight: var(--fw-regular); line-height: 1.17; color: var(--c-olive); max-width: min(100%, 740px); }
.newsletter__lead strong { font-weight: var(--fw-bold); }
/* Form margin lands the first field beside the left body copy (comp lead→field gap ≈ 103/1920). */
.newsletter__form { margin-top: clamp(2rem, 5.4vw, 103px); gap: var(--space-lg); max-width: 640px; }
.newsletter__form input {
  border: none;
  background: var(--c-white);
  border-radius: 0;                 /* square fields (per comp) */
  padding: 1.3em 1.3em;
  font-size: clamp(1rem, 0.9vw, 0.833rem);
  color: var(--c-ink);
}
.newsletter__form input::placeholder { text-transform: uppercase; letter-spacing: 0.2em; color: rgba(54, 68, 31, 0.5); }
/* Join button — comp 17px Inter SemiBold, 0.16em tracking; bolded per client. */
.newsletter__form .btn { justify-self: start; margin-top: var(--space-md); font-size: clamp(0.95rem, 0.9vw, 0.833rem); font-weight: var(--fw-bold); padding: 1.5em 2.8em; letter-spacing: 0.16em; }
/* Honeypot — kept in the DOM for bots, off-screen for humans (never display:none). */
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Inline submit feedback. */
.newsletter__status { margin-top: var(--space-sm); font-weight: var(--fw-medium); min-height: 1.2em; }
.newsletter__status.is-success { color: var(--c-olive); }
.newsletter__status.is-error { color: #B3261E; }
@media (max-width: 800px) {
  .newsletter__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .newsletter__signup { padding-top: 0; }
  .newsletter__form { margin-top: var(--space-lg); }
}

/* ---- CTA banner ----------------------------------------- */
/* Photo fills the section; an orange panel with a rounded top slots in at the
   bottom so the (duotone-tinted) image floats behind it. */
.cta-banner { position: relative; overflow: hidden; color: var(--c-white); }
/* Image already has the orange duotone baked in (cta-questions-80.jpg) — no CSS tint/filter.
   Top-anchored crop so the photo fills the visible band and the image's bottom solid-orange
   strip falls behind the orange panel. */
.cta-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; z-index: 0; }
.cta-banner__panel {
  position: relative;
  z-index: 2;
  margin-top: clamp(380px, 47vw, 580px);
  background: var(--c-orange);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding-block: clamp(2rem, 4vw, 3.25rem);
}
.cta-banner__title { color: var(--c-white); font-size: var(--fs-700); max-width: 38ch; text-wrap: pretty; }
.cta-banner__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-lg); margin-top: var(--space-md);
}
.cta-banner__sub { color: rgba(255, 255, 255, 0.92); white-space: nowrap; }
.cta-banner__row .btn { flex: none; }
@media (max-width: 900px) {
  .cta-banner__row { flex-direction: column; align-items: flex-start; }
  .cta-banner__sub { white-space: normal; }
}

/* ---- Contact form (Contact page, Section 2) ------------- */
/* Olive band with the orange squiggle layered behind (background-pattern recipe:
   absolute __pattern at z0, .container at z1). Form is a 2-col grid: left = stacked
   short fields + "*Required" note; right = tall message + submit. Stacks ≤640px. */
.contact-section { position: relative; overflow: hidden; }
.contact-section__pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(../patterns/SVG/squiggle-bg-orange.svg) center / cover no-repeat;
}
.contact-section > .container { position: relative; z-index: 1; }
.contact-form {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 5vw, 4rem); row-gap: var(--space-md); align-items: start;
}
.contact-form__fields { grid-column: 1; display: flex; flex-direction: column; gap: var(--space-sm); }
.contact-form__message { grid-column: 2; grid-row: 1; }
.contact-form__note { grid-column: 1; align-self: center; margin: 0; font-size: var(--fs-100); color: var(--c-cream); }
.contact-form__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: flex-end; align-items: center; }
/* Submit feedback — light colors for the dark-olive panel (the shared .newsletter__status
   uses dark olive, which would vanish here). Wraps onto its own line under the button. */
.contact-form__status { flex-basis: 100%; margin: 0; text-align: right; font-weight: var(--fw-medium); font-size: var(--fs-100); color: var(--c-cream); }
.contact-form__status:empty { display: none; }
.contact-form__status.is-success { color: var(--c-lime); }
.contact-form__status.is-error { color: #FFD2CE; }
/* Borderless white fields — same treatment as .newsletter__form (uppercase placeholder). */
.contact-form .field input, .contact-form .field textarea {
  border: none; background: var(--c-white); border-radius: 0;   /* square fields — match comp + adjacent newsletter inputs */
  padding: 1.15em 1.25em; font-size: var(--fs-200); color: var(--c-ink);
}
.contact-form .field input::placeholder, .contact-form .field textarea::placeholder {
  text-transform: uppercase; letter-spacing: 0.12em; color: rgba(54, 68, 31, 0.5);
}
@media (max-width: 640px) {
  .contact-form { grid-template-columns: 1fr; }
  .contact-form__fields, .contact-form__message, .contact-form__note, .contact-form__actions { grid-column: 1; }
  .contact-form__message { grid-row: auto; }
  .contact-form__actions { justify-content: flex-start; }
  .contact-form__status { text-align: left; }
}

/* ---- Footer styles -------------------------------------- */
.site-footer { padding-block: clamp(2.5rem, 5vw, 4rem); }
.site-footer__inner { display: flex; align-items: center; gap: clamp(1.75rem, 5vw, 5rem); }
.site-footer__logo { height: clamp(54px, 5vw, 72px); width: auto; }
/* Nav: same item set + text size as the header's primary nav, recoloured for the dark panel. */
/* Two columns (fills top→bottom, then wraps): 9 links → 5 + 4, keeps the footer short. */
.site-footer__nav ul { list-style: none; display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 0.55em clamp(1.5rem, 4vw, 3rem); }
.site-footer__nav a {
  font-family: var(--font-body); font-weight: var(--fw-light); font-size: var(--fs-150);
  letter-spacing: 0.05em; line-height: 1.15; color: var(--c-cream);
  display: inline-flex; align-items: center; gap: 0.4em;
}
.site-footer__nav a:hover { color: var(--c-lime); }
.site-footer__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-lg); }
/* Header hides .social-icons into the mobile drawer; keep them visible in the footer. */
.site-footer .social-icons { display: flex; }
@media (max-width: 760px) {
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
  .site-footer__actions { margin-left: 0; }
}

/* ============================================================
   ABOUT PAGE  (/about)
   Page-specific section styles. Reuses .page-hero, .split, .testimonials,
   .newsletter, .cta-banner. NEW components documented in design-system.md.
   ============================================================ */

/* 1. Hero — the orange highlight is a near-full-coverage BLOCK behind line 2
   (comp measured: orange ≈ 1.6× cap height, covers cap-top through descenders),
   fuller than the site-wide inner-page hero bar. Rotating keyword fades on swap. */
.page-hero--about { min-height: clamp(460px, 56vw, 760px); }
/* Group photo's heads sit high in the frame — bias the crop toward the top so they aren't cut off.
   (Lightness now comes from the global lighter --tint; see .page-hero__tint.) */
.page-hero--about .page-hero__bg { object-position: 50% 24%; }
/* Comp: title 72px Biennale (was reading larger than the mockup). */
.page-hero--about .page-hero__title { font-size: clamp(2.2rem, 3.75vw, 3.469rem); }
/* Animated highlight only rises ~halfway up the words (client). */
.page-hero--about .page-hero__title .hl-mark { --hl-height: 0.52em; --hl-pos: 74%; }
.page-hero--about .page-hero__lead { margin-top: var(--space-lg); }   /* drop the subheader off the title */
.page-hero--about [data-hero-rotate] { transition: opacity 0.28s ease; }

/* 2. Video band — centered title + responsive 16:9 placeholder player (real embed dropped in later). */
.video-band { text-align: center; }
.video-band__title { font-size: var(--fs-700); color: var(--c-olive); }
.video-band__frame {
  position: relative; max-width: 880px; margin: var(--space-lg) auto 0;
  aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--c-ink);
}
.video-band__frame iframe, .video-band__frame video, .video-band__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0;
}
.video-band__play {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border: 0; cursor: pointer;
  border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.82);
}
.video-band__play::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent var(--c-ink);
  transform: translateX(3px);
}
.video-band__play:hover { background: var(--c-white); }

/* 3. Mission statement over photo — slate/blue duotone (NOT olive). Sibling of .feature-followup
   (same statement-band idea on a flat blue panel); here the panel is a tinted photo. */
.mission-band { position: relative; overflow: hidden; text-align: center; color: var(--c-white); padding-block: clamp(5rem, 8vw, 9rem); }
/* Blue-gray wash is now BAKED INTO the photo (about-mission.jpg) — no CSS tint/filter needed
   (was: saturate(0.52) brightness(1.08) + a translucent --c-blue overlay at 0.66). The image
   already reads uniform blue-gray so the olive lead stays legible over the lower photo. */
.mission-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.mission-band > .container { position: relative; z-index: 2; }
/* Label sized up to ~match the width of the statement's first line (per comp). */
.mission-band__label { font-family: var(--font-display); font-size: var(--fs-700); color: var(--c-olive); line-height: var(--lh-snug); }
.mission-band__statement {
  font-family: var(--font-accent); text-transform: uppercase; font-weight: var(--fw-regular);
  font-size: clamp(2.2rem, 3.7vw, 3.423rem);
  color: var(--c-cream-warm); line-height: var(--lh-snug); max-width: min(100%, 1080px); margin: var(--space-md) auto 0;
}
.mission-band__statement .hl-mark { --hl-height: 0.88em; --hl-pos: 88%; }
/* Lead smaller + tighter than before (client). Comp: 24px Inter Light. */
.mission-band__lead { max-width: 56ch; margin: var(--space-lg) auto 0; color: var(--c-olive);
  font-size: clamp(1rem, 1.15vw, 1.064rem); line-height: 1.42; letter-spacing: -0.01em; }

/* 4. Values bar — orange full-bleed row of icon columns. ICONS are pending client assets:
   .values-bar__icon is a labeled placeholder slot until the 5 line-icons arrive. */
.values-bar { background: var(--c-orange); color: var(--c-cream); }
.values-bar__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; text-align: center; }
.values-bar__item { display: flex; flex-direction: column; align-items: center; }
/* Icons have different intrinsic aspect ratios (heart 1.13 · book 0.75 · head 0.90 · bible 1.56 ·
   hands 1.07). Normalize by HEIGHT (width:auto) so they read at one consistent scale — a square box
   with object-fit:contain would shrink the wide icons (bible) and break the visual rhythm. */
.values-bar__icon { height: clamp(64px, 6.4vw, 92px); display: flex; align-items: center; justify-content: center; margin-bottom: clamp(1.5rem, 2.8vw, 2.25rem); }
.values-bar__icon img, .values-bar__icon svg { height: 100%; width: auto; max-width: 100%; }
/* Title = Hello Imperfect (hand-drawn accent); sub = Inter caps, tighter to its title than to the icon. */
.values-bar .values-bar__title { font-family: var(--font-accent); font-weight: var(--fw-regular); text-transform: uppercase; font-size: var(--fs-450); line-height: var(--lh-snug); color: var(--c-cream); margin: 0; }
.values-bar__sub { font-family: var(--font-body); font-size: var(--fs-425); text-transform: uppercase; letter-spacing: 0.03em; color: rgba(250, 243, 233, 0.92); line-height: var(--lh-snug); margin-top: var(--space-2xs); }
@media (max-width: 900px) { .values-bar__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-lg); } }
@media (max-width: 560px) { .values-bar__grid { grid-template-columns: 1fr; } }

/* 5–7. Belief rows — alternating text+image (ADAPT of .split): rounded media vertically
   centered to the text. Soft pale-lime marker (--lime-soft) behind the key word, fuller than the
   site default bar. .belief-row--media-left reverses columns. */
.belief-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.belief-row + .belief-row { margin-top: clamp(4.5rem, 8vw, 8rem); }   /* generous space between rows */
.belief-row__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 2; }
.belief-row__media img { width: 100%; height: 100%; object-fit: cover; }
.belief-row__title { font-size: var(--fs-700); color: var(--c-olive); line-height: var(--lh-snug); }
.belief-row__title .hl-mark { --hl-height: 0.5em; --hl-pos: 82%; }
.belief-row__body { margin-top: var(--space-md); max-width: 58ch; color: var(--c-ink); font-size: var(--fs-400); line-height: 1.6; }
.belief-row--media-left .belief-row__media { order: -1; }
@media (max-width: 800px) {
  .belief-row { grid-template-columns: 1fr; gap: var(--space-md); }
  .belief-row__media { order: -1; }                 /* photo above text when stacked */
  .belief-row__body { max-width: none; }
}

/* 9. Nation map — centered caps title + centered US map graphic (map is a PENDING client asset:
   .nation-band__map renders a placeholder box until the artwork is dropped in). */
.nation-band { text-align: center; position: relative; overflow: hidden; }
/* Pale-yellow watercolor side bands extracted from TAF_About.ai. In the comp only a thin
   inner sliver shows at each edge — most of the blob bleeds off-canvas, so push them out. */
.nation-band__edge { position: absolute; top: 50%; height: 130%; width: auto; z-index: 0; pointer-events: none; opacity: 0.85; }
.nation-band__edge--left  { left: 0;  transform: translate(-78%, -50%); }
.nation-band__edge--right { right: 0; transform: translate(78%, -50%); }
.nation-band > .container { position: relative; z-index: 1; }
.nation-band__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-700); color: var(--c-olive); line-height: var(--lh-snug); }
.nation-band__map { max-width: 1000px; margin: var(--space-xl) auto 0; }
.nation-band__map img { width: 100%; height: auto; }
.nation-band__map--placeholder {
  aspect-ratio: 16 / 10; display: grid; place-items: center; border-radius: var(--radius-md);
  border: 2px dashed var(--c-blue-deep); color: var(--c-blue-deep);
  font-size: var(--fs-100); text-transform: uppercase; letter-spacing: 0.12em;
}

/* 10. Arch cards — two arch-topped solid-color cards (dome top via percentage radius, like
   .assess__media), centered heading + body + a pill button. */
.arch-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; }
.arch-card {
  position: relative;
  border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 46% 46% 0 0;
  min-height: clamp(460px, 44vw, 580px);
  padding: clamp(3.25rem, 6vw, 5rem) clamp(1.75rem, 3vw, 2.75rem) clamp(3rem, 5vw, 4rem);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-md);
}
.arch-card--blue { background: var(--c-blue); }
.arch-card--lime { background: var(--c-lime-acid); }
.arch-card__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-700); color: var(--c-olive); line-height: var(--lh-snug); }
.arch-card__body { color: var(--c-ink); max-width: 34ch; font-size: var(--fs-400); line-height: 1.5; letter-spacing: -0.005em; }
/* Button STRADDLES the card's bottom edge (same idiom as .related-card__btn): centered, half-overhang.
   Slightly more padding than the default --sm pill; keep the transform on hover so it doesn't unseat. */
.arch-card .btn { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); margin-top: auto; font-size: var(--fs-300); padding: 1.15em 2.6em; letter-spacing: 0.08em; white-space: nowrap; }
.arch-card .btn:hover, .arch-card .btn:active { transform: translate(-50%, 50%); }
/* Pull the arch-cards band up toward the map (tighten the inter-section gap). */
.nation-band { padding-bottom: var(--space-md); }
.about-arches { padding-top: var(--space-lg); }
/* Stack earlier (≤840px): the enlarged one-line buttons crowd the cards in a narrow 2-col. */
@media (max-width: 840px) { .arch-cards { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 3.5rem); max-width: 520px; margin-inline: auto; } }

/* 11. Invitation statement — centered caps statement in the hand-drawn Hello Imperfect font
   (--font-accent), accent phrases in orange (.hl-orange). ~4 lines like the comp. */
.invite-band { text-align: center; }
/* Comp: 45px Hello-Imperfect, MIXED case (the uppercase render read too heavy/bold). */
.invite-band__statement {
  font-family: var(--font-accent); font-weight: var(--fw-regular); font-size: clamp(1.7rem, 2.34vw, 2.164rem);
  color: var(--c-olive); line-height: var(--lh-snug); max-width: 44ch; margin-inline: auto;
}

/* 12. Audience circles — 3 soft-tinted discs with centered labels (watercolor texture pending). */
.audience-circles { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: var(--space-2xl); }
.audience-circle {
  width: clamp(180px, 22vw, 235px); aspect-ratio: 1; border-radius: var(--radius-pill);
  display: grid; place-items: center; text-align: center; padding: var(--space-md);
  text-decoration: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.audience-circle:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.audience-circle p { font-weight: var(--fw-bold); color: var(--c-ink); font-size: var(--fs-400); line-height: var(--lh-snug); margin: 0; }
/* Watercolor texture discs extracted from the comp (.ai clip groups) — already circular with
   transparent corners, so cover fills the round element. Tint token kept as a fallback behind. */
.audience-circle--1 { background: var(--c-tint-peach)  url("../patterns/PNG/about-circle-1.png") center / cover no-repeat; }
.audience-circle--2 { background: var(--c-tint-lime)   url("../patterns/PNG/about-circle-2.png") center / cover no-repeat; }
.audience-circle--3 { background: var(--c-tint-salmon) url("../patterns/PNG/about-circle-3.png") center / cover no-repeat; }

/* ============================================================
   SERVICES PAGE  (/services)
   Reuses .page-hero, .split, .video-band, .belief-row, .newsletter, .cta-banner.
   NEW: .statements, .service-card(s), .note-band, .steps. Documented in design-system.md.
   ============================================================ */

/* 1. Hero — LEFT-aligned page-hero variant, lime Biennale caps title + white subhead. */
.page-hero--services { min-height: clamp(500px, 54vw, 720px); }
.page-hero--services > .container { text-align: left; max-width: var(--container-max); }
.page-hero--services .page-hero__title { font-family: var(--font-accent); color: var(--c-lime); text-transform: uppercase; font-size: clamp(2.3rem, 4.2vw, 3.55rem); max-width: 30ch; line-height: 1.05; }
.page-hero__subhead { font-family: var(--font-display); color: var(--c-white); font-size: var(--fs-450); line-height: var(--lh-snug); margin-top: var(--space-md); }
.page-hero--services .page-hero__lead { margin-inline: 0; max-width: 60ch; }
/* Subheader left-aligned with the header + tighter to it (client). */
.page-hero--services .page-hero__subhead { text-align: left; margin-top: var(--space-2xs); }
.page-hero--services .hero-cta { margin-top: var(--space-lg); }
/* Mobile: scale the hero CTA down to a normal button ratio (client). */
@media (max-width: 600px) { .page-hero--services .hero-cta { font-size: var(--fs-200); padding: 0.9em 1.9em; } }

/* Shared centered section heading for Services bands (statements / 3-ways / note / steps). */
.svc-head { text-align: center; font-size: var(--fs-700); color: var(--c-olive); line-height: var(--lh-snug); }

/* 2. Statements — 3-col quote grid; lime quote-mark SVG frames the group; rotating title phrase. */
.statements { text-align: center; }
/* Comp quote marks: large lime open-quote top-left + close-quote bottom-right, framing the whole
   block. Painted on a correctly-proportioned layer (aspect = the SVG's) over the container so the
   marks keep their natural size instead of being squashed into the short grid box. */
.statements > .container { position: relative; }
.statements > .container::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1340px, 106%); height: clamp(360px, 34vw, 520px);
  background: url(../patterns/SVG/services-quote.svg) center / contain no-repeat;
  opacity: 0.5;   /* muted quote marks (client) */
}
.statements > .container > * { position: relative; z-index: 1; }
.statements__grid {
  position: relative; max-width: 1040px; margin: var(--space-2xl) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: var(--space-lg);
}
.statement { padding-inline: var(--space-sm); }
.statement__text { font-size: var(--fs-400); color: var(--c-ink); line-height: 1.55; }
.statement__cite { display: block; margin-top: var(--space-md); font-weight: var(--fw-bold); font-size: var(--fs-75); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-olive); }
@media (max-width: 700px) { .statements__grid { grid-template-columns: 1fr; gap: var(--space-xl); } .statements > .container::before { display: none; } }
/* Rotating testimonial wall (JS-driven): only the windowed statements show (3 desktop /
   1 mobile); the rest are hidden and the active set fades in on each page change. */
.statements__grid.is-rotating .statement { display: none; }
.statements__grid.is-rotating .statement.is-shown { display: block; }
.statements__grid.is-rotating.is-fading .statement.is-shown { animation: stmt-fade 0.5s ease; }
@keyframes stmt-fade { from { opacity: 0; } to { opacity: 1; } }

/* 3. "Most people are wrestling" — reuses .split; heading column narrower so the body runs wider/shorter. */
.split--wrestle { grid-template-columns: 0.85fr 1.15fr; }
@media (max-width: 800px) { .split--wrestle { grid-template-columns: 1fr; } }
.wrestle__title { font-size: var(--fs-700); color: var(--c-olive); line-height: var(--lh-snug); }
.wrestle__body > * + * { margin-top: var(--space-md); }
.wrestle__body { color: var(--c-ink); font-size: var(--fs-400); line-height: 1.6; }

/* 4. Video — pale placeholder variant of .video-band (blue-pale frame, no title). Pulled up
   tight under the white "Most people" section above (both white → drop the doubled gap). */
/* Pull the panel up tight under the white "Most people" text (both white). The frame's own
   40px margin-top would collapse out of the zero-padding section and reveal the cream body
   ("tan bar"); zero it, then lift the whole band into the section above's bottom padding. */
.video-band--pale { padding-top: 0; margin-top: calc(var(--section-y) * -0.55); }
.video-band--pale .video-band__frame { background: var(--c-blue-pale); margin-top: 0; }
/* "video" placeholder label — only when the frame has no real <video>/<iframe> child. */
.video-band--pale .video-band__frame:not(:has(video, iframe))::after { content: "video"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-olive); font-size: var(--fs-300); }

/* 5. "Welcome to TAF" — reuses .belief-row(--media-left) + a button slot.
   --tall: media cell stretches to the (long) text column height instead of a fixed 3:2 crop. */
.belief-row__actions { margin-top: var(--space-lg); }
.belief-row__actions .btn { padding-inline: 3.2em; }
/* Services "About TAF" — a touch more padding than the shared belief-row button; wider tracking (client). */
.belief-row--tall .belief-row__actions .btn { padding: 1.55em 4.4em 1.4em; font-size: var(--fs-200); letter-spacing: 0.18em; }
/* Comp/AI: orange belief-row buttons use near-black label text (not cream). */
.belief-row__actions .btn--orange { color: var(--c-ink); }
.belief-row__actions .btn--orange:hover { color: var(--c-ink); }
.belief-row--tall { align-items: stretch; }
.belief-row--tall .belief-row__media { aspect-ratio: auto; min-height: clamp(360px, 38vw, 520px); }
/* Welcome photo: subject sits far-right in the source — shift the cover window
   right so she reads centered in the portrait frame (client, 2026-06-14). */
.belief-row--tall .belief-row__media img { object-position: 90% 50%; }

/* 6. Service cards — number label + Hello Imperfect title + body + full-width lime button. */
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 1.75rem); margin-top: var(--space-lg); margin-bottom: var(--space-lg); align-items: stretch; }
.service-card {
  position: relative;                                  /* anchor for the straddling button */
  background: var(--c-mist); border-radius: var(--radius-lg); overflow: visible;
  display: flex; flex-direction: column; padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 2.5vw, 2.25rem) clamp(2.5rem, 4vw, 3.25rem);
}
.service-card__label { font-family: var(--font-accent); text-transform: uppercase; color: var(--c-orange); font-size: var(--fs-300); letter-spacing: 0.04em; }
.service-card__title { font-family: var(--font-accent); text-transform: uppercase; color: var(--c-olive); font-size: var(--fs-500); line-height: var(--lh-snug); margin-top: var(--space-sm); }
.service-card__body { color: var(--c-ink); font-size: var(--fs-200); line-height: 1.6; margin-top: var(--space-md); }
.service-card__body + .service-card__body { margin-top: var(--space-sm); }
/* Lime pill straddling the card's bottom edge (same idiom as the About arch cards). Text wraps:
   the long card-1 label runs 2 lines; the shorter card-2/3 labels stay on one. */
.service-card__btn {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  white-space: normal; text-align: center; justify-content: center; font-weight: var(--fw-bold);
  width: max-content; max-width: min(94%, 290px); font-size: var(--fs-75); letter-spacing: 0.03em; line-height: 1.25;
  padding: 1.05em 1.5em;
}
/* Keep the straddle transform on hover/active — the base .btn lift would otherwise yank the
   pinned button off the card edge. */
.service-card__btn:hover, .service-card__btn:active { transform: translate(-50%, 50%); }
/* Stacked single column: widen the row gap so each card's straddling button (which hangs
   ~30px below its card) clears the next card instead of overlapping it. */
@media (max-width: 860px) { .service-cards { grid-template-columns: 1fr; max-width: 460px; margin-top: var(--space-md); margin-inline: auto; gap: 3.5rem; } }

/* 7. Note band — centered statement + taped handwritten-note placeholder + orange squiggle corners. */
.note-band { position: relative; overflow: hidden; text-align: center; }
/* Comp shows two discrete orange brush squiggles — top-left + bottom-right, each bleeding off
   its edge — NOT a full-cover wash. Extracted from TAF_Services.ai (uuid 699 + 645) and CROPPED
   to the artboard edges so the off-canvas bleed the comp clips isn't shown. Comp proportions:
   TL = 26% of section width (flush top-left), BR = 33% (flush bottom-right). */
.note-band__pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url(../patterns/PNG/services-note-squiggle-tl.png),
                    url(../patterns/PNG/services-note-squiggle-br.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right bottom;
  background-size: clamp(200px, 26%, 500px) auto, clamp(240px, 33%, 640px) auto;
}
.note-band > .container { position: relative; z-index: 1; }
.note-band .svc-head { max-width: 22ch; margin-inline: auto; }
/* Highlight bar behind "Life's Biggest Questions" — comp uses lime #D6D82A at 37% opacity over
   the cream band (measured from TAF_Services.ai rect 1769), NOT the full-strength site lime. */
.note-band__title .hl-mark { --hl-color: rgba(214, 216, 42, 0.37); }
/* Taped torn-paper note — paper + torn orange tape + drop shadow baked into the transparent PNG.
   The questions rotate live in the white area (placeholder handwriting was erased from the PNG). */
.note-band__paper { position: relative; display: inline-block; width: clamp(340px, 45vw, 540px); margin: var(--space-2xl) auto 0; }
.note-band__note { display: block; width: 100%; height: auto; }
/* Rotating question box pinned inside the paper's clean white zone (below the tape, above the torn edge). */
.note-band__qs {
  position: absolute; left: 11%; right: 11%; top: 28%; bottom: 24%;
  display: grid; place-items: center; text-align: center;
  transform: rotate(-4deg); transform-origin: center;
}
.note-band__qa { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity 0.5s ease; }
.note-band__qa.is-active { opacity: 1; }
.note-band__q { font-family: var(--font-body); font-weight: var(--fw-medium); color: var(--c-ink); font-size: clamp(0.85rem, 1.35vw, 1.1rem); line-height: 1.25; }
.note-band__by { display: block; margin-top: 0.7em; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 0.74em; letter-spacing: 0.02em; color: var(--c-olive); font-style: normal; }
.note-band__by::before { content: "\2014\00a0"; }

/* 8. Steps — 3-col numbered steps (orange numeral) + centered CTA. */
.steps { text-align: center; }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin: var(--space-2xl) auto var(--space-xl); text-align: left; }
/* Flex (not grid): the big numeral sits left and no longer drives the text-row heights —
   so every step's body starts at the same baseline regardless of the numeral glyph or
   body length (the old grid row-span distributed the numeral's height unevenly). */
.step-item { display: flex; align-items: flex-start; column-gap: var(--space-sm); }
.step-item__num { font-family: var(--font-accent); color: var(--c-orange); font-size: var(--fs-800); line-height: 0.8; flex: none; }
.step-item__text { flex: 1; min-width: 0; }
/* Uniform 2-line title box so every step's body copy starts at the same baseline (step 1 wraps to
   2 lines; pad the shorter step-2/3 titles to match so their bodies don't ride up). */
.step-item__title { font-family: var(--font-body); font-weight: var(--fw-bold); color: var(--c-olive); font-size: var(--fs-300); line-height: var(--lh-snug); min-height: calc(2 * var(--lh-snug) * 1em); }
.step-item__body { color: var(--c-ink); font-size: var(--fs-200); line-height: 1.6; margin-top: var(--space-2xs); }
@media (max-width: 700px) { .steps__grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } .step-item__title { min-height: 0; } }

/* Brand divider — olive band carrying a pale-blue abstract pattern, between the steps CTA and
   the newsletter. Pattern SVG is a PENDING client asset; __pattern is a ready hook (empty now). */
.brand-divider { position: relative; overflow: hidden; background: var(--c-olive); min-height: clamp(96px, 13vw, 168px); }
.brand-divider__pattern { position: absolute; inset: 0; background: var(--c-olive) url("../patterns/PNG/speaking-divider-band.png") center / cover no-repeat; pointer-events: none; }
/* Speaking divider: the wave PNG is 14:1 (full-width artwork incl. brush ends). `cover` blew the
   waves up ~1.2x and cropped the brushes; show it full-width at near-native scale instead, with a
   band height tracking the comp (~7% of width, ~134px at 1920). Scoped so Services is untouched. */
.brand-divider--speaking { min-height: clamp(64px, 7vw, 134px); }
.brand-divider--speaking .brand-divider__pattern { background-size: 100% 100%; background-position: center; }
/* Services has its own divider artwork (olive band + blue waves), extracted from TAF_Services.ai. */
.brand-divider--services .brand-divider__pattern { background-image: url("../patterns/PNG/services-divider-pattern.png"); }

/* ============================================================
   SPEAKING AT CHURCHES PAGE  (/speaking)
   Reuses .page-hero, .statements__grid, .belief-row, .values-bar, .brand-divider, .newsletter.
   NEW: .faith-cards, .topic-list (accordion), .menu-band, .speakers, .invite-steps,
   .events-table/.materials, .separation, .values-bar--olive. Documented in design-system.md.
   ============================================================ */

/* 1. Hero — centered (default .page-hero), white Biennale title + light centered subhead. */
.page-hero--speaking { min-height: clamp(480px, 52vw, 700px); }
/* Comp fades the photo into a dusty-rose wash (normal blend lightens; the default olive multiply darkens). */
/* Hero filter: orangey hue per client (was blush). */
.page-hero--speaking .page-hero__tint { background: var(--c-orange); mix-blend-mode: normal; opacity: 0.6; }
.page-hero--speaking .page-hero__title { font-size: clamp(2rem, 4.2vw, 3.2rem); max-width: 40ch; margin-inline: auto; color: var(--c-white); } /* comp title is pure white, not warm cream */
/* Highlight bar behind "Understand and Articulate": comp is brand olive at ~43% (warm taupe over the rose photo), NOT cool slate. Page-scoped so the shared .hl-mark--slate / Donate use are untouched. */
.page-hero--speaking .page-hero__title .hl-mark--slate { --hl-color: rgba(54, 68, 31, 0.43); } /* --c-olive #36441F @ 43% */
.page-hero--speaking .page-hero__subhead { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-300); color: var(--c-cream); margin-top: var(--space-sm); }
/* WP page-hero renders the subhead as .page-hero__lead (static markup uses .page-hero__subhead);
   carry the same bold Inter treatment so the WP hero subhead matches (was rendering regular 400). */
.page-hero--speaking .page-hero__lead { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-300); }
.page-hero__subhead--center { text-align: center; margin-inline: auto; }
.page-hero--speaking .hero-cta { margin-top: var(--space-lg); }
/* Mobile: scale the oversized header button down to a normal ratio (client). */
@media (max-width: 600px) { .page-hero--speaking .hero-cta { font-size: var(--fs-200); padding: 0.9em 1.9em; } }

/* 2. "Trying to raise kids…" — centered text + 3 quote-glyph questions (reuses .statements__grid). */
.raise { text-align: center; }
.raise__title { font-size: var(--fs-700); color: var(--c-olive); max-width: 24ch; margin-inline: auto; line-height: var(--lh-snug); }
.raise__lead { font-size: var(--fs-400); font-weight: var(--fw-bold); color: var(--c-ink); max-width: 46ch; margin: var(--space-md) auto 0; }
.raise__sub { font-weight: var(--fw-bold); color: var(--c-olive); font-size: var(--fs-400); margin-top: var(--space-xl); }
.raise__questions { background: none; max-width: 920px; margin-inline: auto; margin-top: var(--space-sm); }
.raise__questions .statement { position: relative; padding: var(--space-md) var(--space-md); display: flex; align-items: center; justify-content: center; }
/* Faint blue-gray "?" glyph behind each quote (extracted from comp). */
.raise__questions .statement::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3.6rem; height: 7rem; background: url("../patterns/SVG/speaking-q-mark.svg") center / contain no-repeat; z-index: 0; pointer-events: none; }
.raise__questions .statement__text { position: relative; z-index: 1; font-size: var(--fs-400); color: var(--c-ink); }
.raise__body { max-width: 72ch; margin: var(--space-lg) auto 0; color: var(--c-ink); font-size: var(--fs-300); line-height: 1.7; }
.raise__body > p + p { margin-top: var(--space-md); }
.raise__actions { margin-top: var(--space-xl); }

/* 3. "What growing faith looks like…" — blue band + 3 placeholder white cards (content pending). */
.faith-band { position: relative; overflow: hidden; }
.faith-band__pattern { position: absolute; inset: 0; background: var(--c-blue) url("../patterns/PNG/speaking-faith-band.png") center / cover no-repeat; pointer-events: none; }
.faith-band > .container { position: relative; z-index: 1; }
.faith-band__title { color: var(--c-olive); max-width: 22ch; margin-inline: auto; }
.faith-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); margin-top: var(--space-2xl); }
.faith-card { background: var(--c-white); border-radius: var(--radius-lg); min-height: clamp(320px, 30vw, 430px); box-shadow: 0 18px 40px rgba(40, 40, 40, 0.10); overflow: hidden; }
.faith-card img { display: block; width: 100%; height: 100%; min-height: clamp(320px, 30vw, 430px); object-fit: cover; }
/* Per-photo framing so each subject sits centered in the cropped portrait frame
   (these are placeholder photos; re-tune object-position if the images change). */
.faith-card:nth-child(1) img { object-position: 36% 50%; }  /* baptism subject (mobile crop) */
.faith-card:nth-child(2) img { object-position: 40% 50%; }  /* two speakers on stools */
.faith-card:nth-child(3) img { object-position: 16% 50%; }  /* panel — shift off the empty stage */
/* Desktop only: pan the baptism photo right so the baptizer on the right is in frame
   (mobile keeps 36% per client — that crop reads fine stacked). */
@media (min-width: 801px) { .faith-card:nth-child(1) img { object-position: 72% 50%; } }
@media (max-width: 800px) { .faith-cards { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* 4. "Speaker Set List" — accordion: numeral + Hello Imperfect orange title + lime pill + chevron. */
.topics__title { font-size: var(--fs-700); color: var(--c-olive); }
.topics__sub { color: var(--c-ink); font-size: var(--fs-400); margin-top: var(--space-2xs); }
.topic-list { margin-top: var(--space-xl); border-top: 1px solid rgba(54, 68, 31, 0.18); }
.topic { border-bottom: 1px solid rgba(54, 68, 31, 0.18); }
.topic__head { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: clamp(0.85rem, 2.5vw, 2rem); width: 100%; text-align: left; padding: clamp(1.4rem, 3vw, 2.1rem) 0; }
.topic__num { font-family: var(--font-accent); color: var(--c-olive); font-size: var(--fs-600); line-height: 1; }
.topic__title { font-family: var(--font-accent); text-transform: uppercase; color: var(--c-orange); font-size: var(--fs-600); line-height: var(--lh-snug); }
.topic__pill { justify-self: end; background: var(--c-lime); color: var(--c-olive); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-75); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.15; text-align: center; padding: 0.7em 1em; border-radius: var(--radius-pill); max-width: 7em; }
.topic__chevron { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--c-olive); position: relative; flex: none; }
.topic__chevron::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0.66rem; height: 0.66rem; border-right: 2.5px solid var(--c-cream); border-bottom: 2.5px solid var(--c-cream); transform: translateY(-25%) rotate(45deg); transition: transform var(--dur) var(--ease); }
.topic__head[aria-expanded="true"] .topic__chevron::after { transform: translateY(20%) rotate(225deg); }
.topic__panel { overflow: hidden; max-height: 0; transition: max-height 0.34s var(--ease); padding-left: calc(1.12 * var(--fs-600) + clamp(0.85rem, 2.5vw, 2rem)); }
.topic__head[aria-expanded="true"] + .topic__panel { max-height: 64rem; }
.topic__lede { color: var(--c-ink); font-size: var(--fs-300); padding-bottom: var(--space-md); max-width: 70ch; }
.topic__label { font-weight: var(--fw-bold); color: var(--c-olive); }
.topic__body { color: var(--c-ink); font-size: var(--fs-200); line-height: 1.7; padding: var(--space-2xs) 0 clamp(1.4rem, 3vw, 2.1rem); max-width: 76ch; }
/* Tighten the gap between the "Intro" label and the body copy right under it (drop the global p+p margin). */
.topic__label + .topic__body { margin-top: 0; padding-top: var(--space-3xs); }
@media (max-width: 680px) {
  .topic__head { grid-template-columns: auto 1fr auto; gap: var(--space-sm) var(--space-md); }
  .topic__pill { grid-column: 2 / 3; grid-row: 2; justify-self: start; margin-top: var(--space-2xs); }
  .topic__panel { padding-left: 0; }
}

/* 5. "Lots of questions / speaking topics" — Hello Imperfect orange title + menu CTA + art hook. */
.menu-band > .container { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; }
.menu-band__title { font-family: var(--font-accent); text-transform: uppercase; color: var(--c-orange); font-size: clamp(1.55rem, 2.7vw, 2.3rem); line-height: var(--lh-snug); max-width: 34ch; }
.menu-band__text > p { margin-top: var(--space-md); color: var(--c-ink); font-size: var(--fs-400); max-width: 56ch; }
.menu-band__text .btn { margin-top: var(--space-lg); }
.menu-band__art { min-height: clamp(280px, 27vw, 420px); background: url("../patterns/PNG/speaking-question-bubbles.png") center / contain no-repeat; }
@media (max-width: 800px) { .menu-band > .container { grid-template-columns: 1fr; } .menu-band__art { display: none; } }

/* 7. "Meet Your Speakers" — heading + lead + client polaroid composite (transparent PNG). */
.speakers { text-align: center; position: relative; overflow: hidden; padding-bottom: clamp(1.5rem, 3vw, 3rem); }
/* Header-only use (Speaking page): when a .speakers header is immediately followed by a
   speaker row, drop its bottom padding so the title+lead flows into the first row (both bg-blue-pale). */
.speakers:has(+ .speaker) { padding-bottom: 0; }
.speakers > .container { position: relative; z-index: 1; }
.speakers__title { color: var(--c-olive); }
.speakers__lead { max-width: 64ch; margin: var(--space-md) auto 0; color: var(--c-ink); font-size: var(--fs-400); }
.speakers__art { margin-top: var(--space-xl); }
.speakers__art img { width: 100%; max-width: 1340px; margin-inline: auto; }
/* Blue brush-squiggle in the lower-right background (extracted from comp; right-anchored). */
.speakers__squiggle { position: absolute; right: 0; bottom: 0; width: min(1180px, 82%); aspect-ratio: 1828 / 813; background: url("../patterns/PNG/speaking-blue-squiggle.png") right bottom / contain no-repeat; z-index: 0; pointer-events: none; }

/* 8. "How to Invite…" — 3 big color discs (STEP N) + CTA. */
.invite { text-align: center; }
.invite__eyebrow { font-family: var(--font-accent); color: var(--c-olive); letter-spacing: 0.03em; }
.invite__title { font-size: var(--fs-700); color: var(--c-olive); max-width: 22ch; margin: var(--space-sm) auto 0; line-height: var(--lh-tight); }
.invite-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin: var(--space-2xl) auto var(--space-xl); max-width: 980px; }
.invite-step { text-align: center; }
.invite-step__disc { width: clamp(108px, 11vw, 142px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto var(--space-md); color: var(--c-cream); }
/* Disc colors measured from TAF_Speaking.ai: step1 acid-lime #AAAD17, step2 brand blue
   #A8B8C7, step3 orange. (The --olive/--blue modifier names are step-slot labels.) */
.invite-step__disc--olive { background: var(--c-lime-acid); }
.invite-step__disc--blue { background: var(--c-blue); }
.invite-step__disc--orange { background: var(--c-orange); }
/* "STEP" + numeral are Hello Imperfect (hand-drawn) per both the Workshop AND Speaking comps. */
.invite-step__kicker { font-family: var(--font-accent); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-200); line-height: 1; margin-bottom: 0.32em; }
.invite-step__num { font-family: var(--font-accent); font-size: var(--fs-800); line-height: 0.9; }
/* Reserve 2 title lines so single-line titles push their body to the same baseline (comp aligns all 3). */
.invite-step__title { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-300); color: var(--c-olive); line-height: 1.3; min-height: 2.6em; }
.invite-step__body { color: var(--c-ink); font-size: var(--fs-300); margin-top: var(--space-sm); max-width: 22ch; margin-inline: auto; }
.invite__actions { margin-top: var(--space-lg); }
.invite__actions .btn { padding-inline: 3.2em; }
@media (max-width: 760px) { .invite-steps { grid-template-columns: 1fr; max-width: 340px; } }

/* 9. "Join An Event Near You" — white DATE/LOCATION table + EVENT MATERIALS bullet grid. */
.events-near { text-align: center; position: relative; overflow: hidden; }
.events-near::before { content: ""; position: absolute; inset: 0; background: url("../patterns/PNG/speaking-events-band.png") center / cover no-repeat; z-index: 0; pointer-events: none; }
.events-near > .container { position: relative; z-index: 1; }
.events-near__title { color: var(--c-olive); }
.events-table { max-width: 620px; margin: var(--space-xl) auto 0; }
.events-table__cap, .materials__cap { font-family: var(--font-accent); color: var(--c-olive); font-size: var(--fs-500); letter-spacing: 0; text-transform: none; line-height: 1.1; }
.events-table table { width: 100%; background: var(--c-white); border-radius: var(--radius-md); border-collapse: collapse; margin-top: var(--space-md); box-shadow: 0 14px 34px rgba(40, 40, 40, 0.08); overflow: hidden; }
/* Comp: hand-drawn brush underline under each header; no row dividers; tight rows. */
.events-table th { font-family: var(--font-display); color: var(--c-olive); font-size: var(--fs-300); padding: clamp(1rem, 2vw, 1.4rem) clamp(0.9rem, 2vw, 1.3rem) clamp(0.9rem, 1.8vw, 1.15rem); background: url("../patterns/SVG/speaking-th-underline.svg") center bottom 0.5rem / 88px auto no-repeat; }
.events-table td { padding: 0.32em 1.4em; color: var(--c-ink); font-size: var(--fs-200); text-align: center; }
.events-table tbody tr:first-child td { padding-top: 0.55em; }
.events-table tbody tr:last-child td { padding-bottom: 0.7em; }
.materials { max-width: 780px; margin: var(--space-2xl) auto 0; text-align: center; }
.materials__lead { color: var(--c-ink); font-size: var(--fs-425); margin-top: var(--space-2xs); }
.materials__lead::after { content: ""; display: block; width: 60px; height: 2px; background: var(--c-olive); margin: var(--space-md) auto 0; }
/* Column-fill: each column holds 2 items top→bottom; the long "Event Promotion" item spans both rows of column 2. */
.materials-list { display: grid; grid-template-columns: repeat(4, auto); grid-template-rows: repeat(2, auto); grid-auto-flow: column; justify-content: center; gap: var(--space-2xs) clamp(1.5rem, 4vw, 3rem); margin-top: var(--space-lg); text-align: left; }
.materials-list li { position: relative; padding-left: 1.1em; color: var(--c-ink); font-size: var(--fs-200); }
.materials-list li::before { content: "•"; position: absolute; left: 0; color: var(--c-olive); }
.materials-list__span2 { grid-row: 1 / span 2; align-self: start; max-width: 18ch; }
/* Speaking page has 3–4 short materials: lay them out as ONE centered row (not a 2-row block)
   so they read centered under the header. Scoped by item count so the 7-item Workshop list is untouched. */
.materials-list:has(> li:nth-child(3):last-child),
.materials-list:has(> li:nth-child(4):last-child) { grid-template-rows: auto; grid-auto-flow: row; }
@media (max-width: 700px) { .materials-list { grid-template-columns: repeat(2, auto); grid-template-rows: auto; grid-auto-flow: row; } .materials-list__span2 { grid-row: auto; } }

/* 10. "What Separation From Faith Does…" — blue band, centered title over 2-col (body | photo). */
.separation { position: relative; overflow: hidden; }
.separation__pattern { position: absolute; inset: 0; background: var(--c-blue) url("../patterns/PNG/speaking-separation-band.png") center / cover no-repeat; pointer-events: none; }
.separation > .container { position: relative; z-index: 1; }
.separation__title { text-align: center; font-size: var(--fs-700); color: var(--c-olive); line-height: var(--lh-snug); max-width: 26ch; margin: 0 auto var(--space-2xl); }
.separation__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.separation__body { color: var(--c-ink); font-size: var(--fs-300); line-height: 1.7; }
.separation__body > p + p { margin-top: var(--space-md); }
.separation__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.separation__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .separation__cols { grid-template-columns: 1fr; gap: var(--space-lg); } .separation__media { order: -1; } }

/* 11. "Why choose…" — olive band, white title + 7-col line-icon row (icons pending → placeholders). */
.values-bar--olive { background: var(--c-olive); color: var(--c-cream); }
.values-bar__head { text-align: center; color: var(--c-cream); font-size: var(--fs-700); max-width: 24ch; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.values-bar--olive .values-bar__grid { grid-template-columns: repeat(7, 1fr); gap: clamp(1.25rem, 1.6vw, 1.9rem); }
.values-bar__cap { font-family: var(--font-body); font-size: var(--fs-300); line-height: var(--lh-snug); color: rgba(250, 243, 233, 0.92); margin-top: var(--space-md); max-width: 22ch; margin-inline: auto; }
.values-bar__ph { font-size: var(--fs-75); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(250, 243, 233, 0.5); border: 1px dashed rgba(250, 243, 233, 0.4); border-radius: var(--radius-sm); padding: 0.4em 0.7em; }
@media (max-width: 1000px) { .values-bar--olive .values-bar__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 680px) { .values-bar--olive .values-bar__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   WORKSHOP / INTERACTIVE Q&A WORKSHOP  (workshop.html)
   One page serves both nav items (client-confirmed same comp 2026-06-04).
   Reuses .page-hero, .testimonials, .invite-steps, .events-table/.materials,
   .belief-row, .newsletter, .cta-banner. NEW: .page-hero--workshop, .outcomes,
   .workshop-types, .testimonials--peach, .welcome-list, .qa-cards, .host-circles,
   .faq-list. Documented in design-system.md.
   ============================================================ */

/* 1. Hero — lime Hello Imperfect title (mirrors --services), slate-blue CTA. */
.page-hero--workshop { min-height: clamp(520px, 56vw, 740px); }
/* Client's new banner photo (workshop-banner-hero) has the correct olive tone BAKED IN,
   so drop the global olive .page-hero__tint overlay + the bg saturate filter here — they
   were stacking extra green and reading too dark. */
.page-hero--workshop .page-hero__tint { display: none; }
.page-hero--workshop .page-hero__bg { filter: none; }
.page-hero--workshop .page-hero__title { font-family: var(--font-accent); color: var(--c-lime); text-transform: uppercase; font-size: clamp(2.4rem, 4.7vw, 3.9rem); max-width: 22ch; margin-inline: auto; line-height: 1.04; }
.page-hero--workshop .page-hero__title .hl-mark { color: var(--c-cream-warm); }  /* #F6E9D7 cream text over the yellow/lime bar on "in Real-Time." */
.page-hero--workshop .page-hero__subhead { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-300); max-width: 56ch; margin-inline: auto; }
/* WP page-hero renders the subhead as .page-hero__lead (static uses .page-hero__subhead);
   carry the same bold Inter treatment so the WP hero subhead is bold too (was rendering regular 400). */
.page-hero--workshop .page-hero__lead { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-300); max-width: 56ch; }
.page-hero--workshop .hero-cta { margin-top: var(--space-lg); }

/* 2. Outcomes — cream; Biennale title (peach hl) + 5 line-icon outcomes + closer.
   Flex-wrap grid so the 5th item centers on its own row when it wraps. Icons pending. */
/* Section uses .bg-cream in markup; override to the exact comp beige #F6E9D7
   (= --c-cream-warm), pulled from TAF_Workshop.ai by the client (2026-06-14). */
.outcomes { text-align: center; background: var(--c-cream-warm); }
.outcomes__title { font-size: var(--fs-700); color: var(--c-olive); max-width: 20ch; margin: 0 auto; }
.outcomes__lead { font-size: var(--fs-450); color: var(--c-olive); max-width: 60rem; margin: var(--space-md) auto 0; line-height: var(--lh-snug); }
.outcomes__sub { font-size: var(--fs-200); color: var(--c-ink); max-width: 56ch; margin: var(--space-md) auto 0; }
.outcomes__intro { font-weight: var(--fw-bold); color: var(--c-olive); font-size: var(--fs-200); margin-top: var(--space-xs); }
.outcomes__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.75rem, 3.5vw, 3rem); margin-top: var(--space-lg); }
.outcomes__item { flex: 0 1 168px; display: flex; flex-direction: column; align-items: center; }
.outcomes__icon { height: clamp(44px, 4.8vw, 60px); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-sm); }
.outcomes__icon img, .outcomes__icon svg { height: 100%; width: auto; }
.outcomes__ph { font-size: var(--fs-75); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(54, 68, 31, 0.4); border: 1px dashed rgba(54, 68, 31, 0.32); border-radius: var(--radius-sm); padding: 0.5em 0.7em; }
.outcomes__cap { font-size: var(--fs-300); line-height: var(--lh-snug); color: var(--c-ink); }
/* Orange squiggle divider (pending client SVG → flat rounded rule placeholder). */
.outcomes__divider { width: clamp(120px, 22vw, 240px); height: 6px; border-radius: 999px; background: var(--c-orange); margin: var(--space-md) auto var(--space-sm); opacity: 0.85; }
.outcomes__closer { font-weight: var(--fw-bold); color: var(--c-olive); font-size: var(--fs-400); max-width: 34ch; margin-inline: auto; }
.outcomes__closer-body { font-size: var(--fs-400); color: var(--c-ink); max-width: 62ch; margin: var(--space-md) auto 0; line-height: var(--lh-snug); }

/* 3. Workshop types — orange band; Hello Imperfect 2-tone title + 3 type columns. */
.workshop-types { text-align: center; }
.workshop-types__title { font-family: var(--font-accent); line-height: 1; margin-bottom: var(--space-2xl); }
.workshop-types__title .wt-top { display: block; text-transform: uppercase; color: var(--c-cream); font-size: clamp(2.2rem, 4.6vw, 3.6rem); text-shadow: 0 4px 0 rgba(42, 52, 25, 0.18); }
/* "we bring to you" is NOT the bubble face (client) — use the display font. */
.workshop-types__title .wt-bot { display: block; font-family: var(--font-display); color: var(--c-white); font-size: clamp(1.4rem, 2.9vw, 2.3rem); margin-top: 0.18em; }
.workshop-types__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 2.8vw, 2.5rem); max-width: 1260px; margin: 0 auto var(--space-2xl); }
.workshop-type { display: flex; flex-direction: column; align-items: center; }
.workshop-type__icon { height: clamp(56px, 6vw, 84px); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); color: var(--c-cream); }
.workshop-type__icon img, .workshop-type__icon svg { height: 100%; width: auto; }
.workshop-type__ph { font-size: var(--fs-75); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(250, 243, 233, 0.55); border: 1px dashed rgba(250, 243, 233, 0.45); border-radius: var(--radius-sm); padding: 0.5em 0.7em; }
.workshop-type__title { font-family: var(--font-accent); font-weight: var(--fw-regular); text-transform: uppercase; color: var(--c-cream); font-size: var(--fs-700); line-height: 1.05; margin-bottom: var(--space-sm); }
.workshop-type__body { color: var(--c-white); font-size: var(--fs-400); line-height: var(--lh-snug); max-width: 42ch; }
@media (max-width: 800px) { .workshop-types__grid { grid-template-columns: 1fr; max-width: 360px; gap: var(--space-xl); } }

/* 4. Testimonials --peach modifier — blue-pale band, peach quote glyphs (no lime SVG frame).
   Quotes bracket the WHOLE block (heading + rotating quote) and hug the section edges per
   Atasha's comp: open top-left at heading level, close bottom-right near the band floor.
   Sized ~13% of page width (comp glyph 532 / 4000 artboard). Scoped to the section so they
   wrap the centered heading too, not just the inner 960px frame. (2026-06-14) */
.testimonials--peach .testimonials__frame { background: none; position: relative; }
.section:has(> .container > .testimonials--peach) { position: relative; }
.section:has(> .container > .testimonials--peach) > .container { position: relative; z-index: 1; }
.section:has(> .container > .testimonials--peach)::before,
.section:has(> .container > .testimonials--peach)::after {
  content: ""; position: absolute; z-index: 0; width: clamp(96px, 13vw, 320px);
  aspect-ratio: 258 / 183; background-repeat: no-repeat; background-position: center;
  background-size: contain; pointer-events: none;
}
.section:has(> .container > .testimonials--peach)::before { background-image: url("../patterns/SVG/workshop-quote-open.svg"); top: 12%; left: clamp(10px, 5%, 110px); }
.section:has(> .container > .testimonials--peach)::after { background-image: url("../patterns/SVG/workshop-quote-close.svg"); bottom: 12%; right: clamp(10px, 5%, 110px); }
.testimonials__title { font-size: var(--fs-700); color: var(--c-olive); text-align: center; margin-bottom: var(--space-md); }
/* Close the (oversized 96px) gap between the heading and the first quote on the Q&A workshop
   testimonials (client). Scoped to the peach variant so other pages' spacing is untouched;
   beats the .center inline margin-bottom:var(--space-2xl). */
.center:has(+ .testimonials--peach) { margin-bottom: var(--space-lg) !important; }
/* Mobile: tighten the (large) gap between the testimonials heading and the quote (client). */
@media (max-width: 600px) { .center:has(> .testimonials__title) { margin-bottom: var(--space-sm) !important; } }

/* 5. Welcome list — cream-pale; Biennale title (peach hl) + 2-col blue-square checklist. */
.welcome { text-align: center; position: relative; overflow: hidden; }
.welcome > .container { position: relative; z-index: 1; }
.welcome__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.welcome__title { font-size: var(--fs-700); color: var(--c-olive); max-width: 22ch; margin: 0 auto var(--space-2xl); }
/* Column-fill so the reading order down the left column is items 1-3, right is 4-6 (per comp). */
.welcome-list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: clamp(1.25rem, 3vw, 2.25rem) clamp(2rem, 5vw, 4rem); max-width: 940px; margin: 0 auto var(--space-2xl); text-align: left; list-style: none; padding: 0; }
.welcome-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: start; color: var(--c-ink); font-size: var(--fs-200); line-height: var(--lh-snug); }
.welcome-list li::before { content: ""; width: 22px; height: 17px; border-radius: 3px 999px 999px 3px; background: var(--c-blue); margin-top: 0.25em; flex-shrink: 0; }
@media (max-width: 720px) { .welcome-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; max-width: 460px; } }

/* 6. Q&A cards — white; Biennale title (lime hls) + 3 tall OUTLINE rounded cards (content pending). */
.qa-band { text-align: center; }
.qa-band__title { font-size: var(--fs-700); color: var(--c-olive); max-width: 30ch; margin: 0 auto; }
.qa-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); margin-top: var(--space-2xl); }
.qa-card { border: 1.5px solid rgba(54, 68, 31, 0.28); border-radius: var(--radius-lg); min-height: clamp(300px, 28vw, 400px); }
/* Photo variant: filled card that opens a lightbox on click. */
.qa-card--photo { position: relative; padding: 0; border: none; overflow: hidden; cursor: zoom-in; background: var(--c-blue-pale, #eef2f6); display: block; transition: transform .25s ease, box-shadow .25s ease; }
.qa-card--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qa-card--photo:hover, .qa-card--photo:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(54, 68, 31, 0.18); outline: none; }
.qa-card__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; color: #fff; font-size: var(--fs-100); text-align: left; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }
@media (max-width: 800px) { .qa-cards { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* 7. Host circles — cream-pale (+ gray watercolor pending); Biennale title (muted hl) + 3 portrait circles. */
.hosts { text-align: center; position: relative; overflow: hidden; }
.hosts > .container { position: relative; z-index: 1; }
.hosts__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.hosts__title { font-size: var(--fs-700); color: var(--c-olive); max-width: 22ch; margin: 0 auto var(--space-2xl); }
.host-circles { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2rem, 6vw, 5rem); margin-bottom: var(--space-2xl); }
.host { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.host__photo { width: clamp(190px, 21vw, 290px); aspect-ratio: 1; border-radius: 50%; background-color: var(--c-white); background-size: cover; background-position: center 18%; background-repeat: no-repeat; overflow: hidden; }
/* Shawn & Adrian were shot wider than Roy — zoom their crops in to match his head size. */
.host--shawn .host__photo,
.host--adrian .host__photo { background-size: 135%; background-position: center 16%; }
.host__photo img { width: 100%; height: 100%; object-fit: cover; }
.host__name { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-300); color: var(--c-olive); }

/* 9. FAQ list — white; Biennale title (lime hl) + static blue-pale Q/A panels + note. */
.faq-band { text-align: center; }
.faq-band__title { font-size: var(--fs-700); color: var(--c-olive); max-width: 24ch; margin: 0 auto var(--space-sm); }
.faq-band__intro { font-size: var(--fs-400); color: var(--c-ink); max-width: 46rem; margin: 0 auto var(--space-lg); line-height: var(--lh-snug); }
.faq-list { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); max-width: 880px; margin: 0 auto; text-align: left; }
.faq { background: var(--c-blue-pale); border-radius: var(--radius-md); padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.5rem, 3vw, 2.4rem); }
.faq__q { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-400); color: var(--c-olive); margin-bottom: var(--space-2xs); }
.faq__a { font-size: var(--fs-200); color: var(--c-ink); line-height: 1.65; }
.faq__a > p + p { margin-top: var(--space-md); }
.faq__a em { font-style: italic; }
.faq__note { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: center; max-width: 880px; margin: var(--space-2xl) auto 0; text-align: left; }
.faq__arrow { width: clamp(48px, 5.5vw, 68px); height: auto; flex-shrink: 0; }
.faq__arrow-ph { display: inline-flex; align-items: center; justify-content: center; width: clamp(40px, 5vw, 56px); height: clamp(28px, 3.4vw, 38px); background: var(--c-lime); border-radius: var(--radius-sm); color: var(--c-olive); font-weight: var(--fw-bold); font-size: var(--fs-300); }
.faq__note p { font-size: var(--fs-200); color: var(--c-ink); }
.faq__note strong { color: var(--c-olive); }
@media (max-width: 560px) { .faq__note { grid-template-columns: 1fr; gap: var(--space-sm); text-align: center; justify-items: center; } }

/* ============================================================
   MEET THE FOUNDERS (founders.html) — spec: design/pages/founders.md
   Reuse-heavy: .page-hero (olive duotone), .invite (×2), .newsletter.
   NEW below: .founders-story + .polaroid-stack, .founder-card, .board grid.
   Zero new color tokens — every fill maps to an existing --c-* token.
   ============================================================ */

/* §2 — "Making God Known… Since 2014": 2-col text + tilted polaroid cluster on blue-pale.
   Lime brush accents (client art, extracted from the comp) bleed from the left + right edges. */
/* Hero subheader: narrower column + bold (client). */
.page-hero--founders .page-hero__lead { max-width: 42ch; font-weight: var(--fw-bold); }
/* New client header photo has the olive tone baked in → drop the global overlay + saturate filter
   so the image renders as shipped. Title runs a touch smaller than the site default (client). */
.page-hero--founders .page-hero__tint { display: none; }
/* Anchor the cover-crop low so the flat olive ceiling strip at the top of the photo is pushed
   above the frame (client: "green bar at the top"). Slight scale gives extra crop headroom. */
.page-hero--founders .page-hero__bg { filter: none; object-position: 50% 100%; transform: scale(1.06); }
.page-hero--founders .page-hero__title { font-size: clamp(2.1rem, 4vw, 3.7rem); }
.founders-story-band { position: relative; overflow: hidden; }
.founders-story-band > .container { position: relative; z-index: 1; }
.founders-edge { position: absolute; top: 0; height: 100%; width: auto; z-index: 0; pointer-events: none; }
.founders-edge--left { left: 0; }
.founders-edge--right { right: 0; }
/* Tighter column gap brings the copy nearer the photos (client). */
.founders-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 2rem); align-items: center; }
.founders-story__title { font-family: var(--font-display); color: var(--c-olive); font-size: var(--fs-700); line-height: var(--lh-snug); margin: 0; }
/* Comp body is smaller + tighter than the site body, with even gaps between the three sentences. */
.founders-story__body { margin-top: var(--space-md); color: var(--c-ink); font-size: var(--fs-200); line-height: 1.6; }
.founders-story__body > p + p { margin-top: var(--space-md); }
.founders-story__actions { margin-top: var(--space-lg); }
/* Comp button: solid slate-blue pill with tonal pale text (low-contrast, measured #A8B8C7 / #DCE5EB). */
.founders-story__actions .btn--blue { color: var(--c-blue-pale); }
.founders-story__actions .btn--blue:hover { color: var(--c-cream); }
/* Three blank white cards (photo placeholders), overlapping + rotated. Per-card shape + position
   measured from the comp's .ai rects (cluster ≈841×844 design-px): small square top-left,
   large portrait right, wide landscape bottom — NOT three identical portraits. */
.polaroid-stack { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.polaroid { position: absolute; overflow: hidden; background: var(--c-white); border: var(--border); border-radius: var(--radius-lg); box-shadow: 0 16px 36px rgba(40, 40, 40, 0.13); }
.polaroid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.polaroid--1 { left: 20.6%; top: 0;      width: 33.7%; height: 36.6%; transform: rotate(-8deg); z-index: 3; } /* small ~square, top-left */
.polaroid--2 { left: 40%;   top: 10%;    width: 60%;   height: 65%;   transform: rotate(7deg);  z-index: 1; } /* large portrait, right */
.polaroid--3 { left: 0;     top: 45.5%;  width: 63.7%; height: 54.5%; transform: rotate(-5deg); z-index: 2; } /* wide landscape, bottom */

/* §3 — Meet the Founders: two two-tone cards, each with a circle portrait straddling the top. */
.founders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); max-width: 1000px; margin: clamp(5.5rem, 8vw, 7rem) auto 0; align-items: start; }
.founder-card { position: relative; border-radius: var(--radius-lg); padding: clamp(5.5rem, 8vw, 7rem) clamp(1.75rem, 3vw, 2.75rem) clamp(2rem, 3.5vw, 2.75rem); }
.founder-card--lime { background: var(--c-lime); }
.founder-card--blue { background: var(--c-blue); }
.founder-card__avatar { position: absolute; top: clamp(-110px, -9vw, -82px); left: 50%; transform: translateX(-50%); width: clamp(150px, 17vw, 192px); aspect-ratio: 1; border-radius: 50%; background: var(--c-white); border: 5px solid var(--c-white); overflow: hidden; box-shadow: 0 12px 28px rgba(40, 40, 40, 0.16); }
.founder-card__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.founder-card__name { font-family: var(--font-accent); text-transform: uppercase; color: var(--c-cream); font-size: var(--fs-800); line-height: 1; margin: 0 0 var(--space-md); }
.founder-card__bio { color: var(--c-olive); font-size: var(--fs-200); line-height: 1.7; }
.founder-card__bio > p + p { margin-top: var(--space-sm); }

/* §4 — Meet the Board: Hello Imperfect title + 3-col grid of bordered placeholder cards. */
.board { text-align: center; }
.board__title { font-family: var(--font-accent); text-transform: uppercase; color: var(--c-olive); font-size: var(--fs-700); line-height: var(--lh-snug); margin: 0 auto var(--space-2xl); }
.board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); max-width: 1040px; margin-inline: auto; }
.board-card { background: var(--c-white); border: var(--border); border-radius: var(--radius-md); overflow: hidden; }
.board-card__media { aspect-ratio: 4 / 3.4; background: var(--c-white); display: block; }
.board-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
/* Rex Smith is framed lower in his source shot — nudge his crop up so he sits level with the others. */
.board-card__media img[src*="board-rex"] { object-position: 50% 32%; }
.board-card__label { border-top: var(--border); padding: clamp(0.9rem, 1.8vw, 1.2rem); text-align: center; }
.board-card__name { font-family: var(--font-body); color: var(--c-ink); font-size: var(--fs-300); margin: 0; }
.board-card__role { font-family: var(--font-body); color: var(--c-olive); font-size: var(--fs-100); letter-spacing: 0.04em; text-transform: uppercase; margin: 0.3em 0 0; }

/* §5 — reuses .invite; adds a centered lead paragraph (additive, Founders-only). */
.invite__lead { max-width: 62ch; margin: var(--space-md) auto 0; color: var(--c-ink); font-size: var(--fs-300); line-height: 1.7; }
.invite__lead strong { font-weight: var(--fw-bold); color: var(--c-olive); }
/* §5 sage watercolor blobs (extracted from comp) wash the band edges behind the content. */
/* §3 "Meet the Founders" — soft pastel brushstroke pattern extracted from the .ai. */
.founders-meet { position: relative; overflow: hidden; }
.founders-meet__pattern { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; opacity: 0.7; }
.founders-meet > .container { position: relative; z-index: 1; }
.founders-cta { position: relative; overflow: hidden; }
.founders-cta > .container { position: relative; z-index: 1; }
.founders-cta__blobs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
/* §6 lime brush art on the blue band: a squiggle from the top-left + brush hatches bottom-right. */
.founders-exp { position: relative; overflow: hidden; }
.founders-exp > .container { position: relative; z-index: 1; }
.founders-exp__squiggle { position: absolute; left: 0; top: 0; height: 80%; width: auto; z-index: 0; pointer-events: none; }
.founders-exp__br { position: absolute; right: 0; bottom: 0; width: clamp(220px, 26vw, 400px); height: auto; z-index: 0; pointer-events: none; }

/* Founders responsive */
@media (max-width: 840px) {
  .founders-story { grid-template-columns: 1fr; gap: clamp(2.5rem, 7vw, 3.5rem); }
  .polaroid-stack { max-width: 440px; margin-inline: auto; }
  .board-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .founders-grid { grid-template-columns: 1fr; max-width: 420px; gap: clamp(5rem, 16vw, 6rem); }
}
@media (max-width: 520px) {
  .board-grid { grid-template-columns: 1fr; max-width: 320px; }
}

/* ============================================================
   MEET THE SPEAKERS (meet-speakers.html · spec design/pages/meet-speakers.md)
   Reuses .page-hero, .testimonials, .newsletter. NEW: .speakers-intro,
   .speaker (alternating bio + extracted arrow callouts), .topics-cta,
   .movement-cta, .speaker-rule. Arrow SVGs = speaker-arrow-{1..6}.svg.
   ============================================================ */

/* 1. Hero — centered, orange hl behind "Biggest Questions". */
.page-hero--speakers { min-height: clamp(440px, 46vw, 720px); }
/* Comp: hero title smaller than the site default; "pull up a chair" bolded with more space (client). */
.page-hero--speakers .page-hero__title { font-size: clamp(2rem, 3.5vw, 3.238rem); }
/* Highlight behind "Biggest Questions": comp (TAF_Meet the Speakers.ai, rect uuid 4178) is brand
   orange #E9682D at 44% opacity, not solid — the solid base read too bright. Page-scoped. */
.page-hero--speakers .page-hero__title .hl-mark--orange { --hl-color: rgba(233, 104, 45, 0.44); }
.page-hero--speakers .page-hero__subhead { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-400); color: var(--c-cream); margin-top: var(--space-lg); }
/* WP page-hero renders the subhead as .page-hero__lead (static uses .page-hero__subhead); carry the
   same bold treatment so "Pull up a chair…" is bold on WP too (was rendering regular 400). */
.page-hero--speakers .page-hero__lead { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-400); }

/* 2. Speakers intro — mint band, centered lead + big Biennale caps heading. */
.speakers-intro { position: relative; text-align: center; overflow: hidden; }
/* Wavy lime squiggle brush behind the band (extracted from the .ai, clip group 641). */
/* Flattened mint+squiggle band exported straight from TAF_Meet the Speakers.ai (clip group 641,
   composited over white) — the prior SVG/pattern overlay read too yellow vs the comp. (2026-06-14) */
.speakers-intro__pattern { position: absolute; inset: 0; pointer-events: none; background: url("../patterns/PNG/speakers-intro-bg.png") center / cover no-repeat; }
.speakers-intro > .container { position: relative; z-index: 1; }
.speakers-intro__lead { font-family: var(--font-body); font-weight: var(--fw-bold); color: var(--c-olive); font-size: var(--fs-400); line-height: var(--lh-snug); max-width: 62ch; margin-inline: auto; }
.speakers-intro__title { font-family: var(--font-accent); font-weight: 400; text-transform: uppercase; color: var(--c-olive); font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: var(--lh-tight); letter-spacing: 0.01em; margin-top: var(--space-lg); }

/* 3–5. Speaker bios — 2-col (media | content), alternating side. The media side is a SINGLE
   PNG composite (photo + arrows + facts + name + name highlight) exported from the .ai, so
   positioning is baked in and the whole thing swaps as one asset. Placed large + bottom-flush
   to the panel (padding-bottom:0 + align-self:end). */
.speaker { padding-bottom: 0; overflow: hidden; }   /* photo bleeds to the band bottom; button gap comes from the copy being shorter than the photo */
.speaker__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
/* Top-align the copy with the photo and size it to fit within the photo height, so the photo
   stays bottom-flush to the band (client: copy was sitting higher than the images, throwing off
   the proportions — top of copy should line up with the top of the photo). */
.speaker__content { align-self: start; padding-block: 0; }
/* Photo top-aligns with the copy (NOT bottom-flush) so the copy can never overhang the photo top
   when narrower columns wrap the bio taller — the layout stays correct on resize. At wide widths
   the copy is shorter than the photo, so the photo fills the row and bleeds to the band bottom. */
.speaker__media { align-self: start; }
.speaker__composite { display: block; width: 100%; max-width: 660px; height: auto; }
.speaker--media-left  .speaker__composite { margin-right: auto; }
.speaker--media-right .speaker__composite { margin-left: auto; }

/* content side — scripture quote, bio, watch CTA. */
.speaker__quote { margin: 0 0 var(--space-sm); }
/* Inter LIGHT — sized so the forced 4-/2-line wrap fits the brush highlight without an extra wrap
   (e.g. Adrian's first segment must hold one line so the verse stays 2 lines, not 3). */
.speaker__quote p { font-family: var(--font-body); font-weight: var(--fw-light); font-size: clamp(1rem, 0.82rem + 0.5vw, 1.25rem); line-height: 1.32; color: var(--c-olive); margin: 0; }
/* Painterly brush shape behind the verse — extracted per panel from the .ai
   (blue=Shawn matches the Watch button, coral=Roy, lime=Adrian). Applied as the element's
   OWN background (not a -z-index pseudo) so the scroll-reveal stacking context can't hide it. */
.speaker__quote-text { display: block; padding: 0.3em 0.55em; background: var(--q-hl) center / 100% 100% no-repeat; }
.speaker--shawn  .speaker__quote-text { --q-hl: url("../patterns/SVG/speaker-quote-hl-1.svg"); }
.speaker--roy    .speaker__quote-text { --q-hl: url("../patterns/SVG/speaker-quote-hl-2.svg"); }
.speaker--adrian .speaker__quote-text { --q-hl: url("../patterns/SVG/speaker-quote-hl-3.svg"); }
.speaker__ref { display: block; text-align: right; font-style: normal; font-weight: var(--fw-bold); color: var(--c-olive); font-size: var(--fs-400); margin-top: var(--space-xs); }
.speaker__bio { display: grid; gap: var(--space-xs); }
.speaker__bio p { font-family: var(--font-body); font-size: var(--fs-200); line-height: var(--lh-relaxed); color: var(--c-muted); margin: 0; }
.speaker__watch { margin-top: var(--space-md); }
.speaker__content .btn--blue { color: var(--c-white); }       /* white caps on Shawn's slate pill */
.speaker__content .btn--blue:hover { color: var(--c-white); }

/* ---- Speaking page "Meet Your Speakers" variant ----
   These rows carry a live name graphic (.speaker__name) above the bio and have no quote/button.
   Scope the tweaks to rows with .speaker__name so Meet the Speakers (baked composites) is untouched. */
.speaker__name { display: block; height: clamp(3rem, 6.4vw, 5.6rem); width: auto; margin-bottom: var(--space-sm); }
.speaker:has(.speaker__name) .speaker__inner { align-items: center; }                 /* center the copy against the body */
.speaker:has(.speaker__name) .speaker__content { align-self: center; max-width: 33rem; } /* comp text column is narrower than half */
.speaker--media-left:has(.speaker__name) .speaker__content { margin-inline-start: clamp(0rem, 2.5vw, 2.5rem); } /* gap from the photo */
.speakers + .speaker { padding-top: clamp(1rem, 3vw, 2.5rem); }   /* pull the first speaker (Shawn) up under the header */

/* Thin full-width color rules between speaker sections. */
.speaker-rule { height: clamp(10px, 1.3vw, 18px); }
.speaker-rule--olive { background: var(--c-olive); }
.speaker-rule--lime  { background: var(--c-lime); }

/* 6/7. Centered CTA bands. */
/* Soft tonal watercolor washes behind "Browse the Speaking Topics", extracted from the .ai
   and multiplied over the sage bg so they read as subtle same-hue bands (per comp). */
.topics-cta { position: relative; overflow: hidden; }
.topics-cta > .container { position: relative; z-index: 1; }
.topics-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../patterns/PNG/speakers-topics-bg.png") center / cover no-repeat;
  mix-blend-mode: multiply; opacity: 0.7;
}
.topics-cta__title, .movement-cta__title { font-family: var(--font-display); color: var(--c-olive); font-size: var(--fs-700); line-height: var(--lh-snug); }
/* Roomier pills for the two download / event CTAs (override .btn--sm's tight padding). */
.topics-cta .btn, .movement-cta .btn { padding: 1.05em 2.6em; }
.topics-cta__lead { max-width: 64ch; margin: var(--space-md) auto var(--space-lg); font-size: var(--fs-300); line-height: var(--lh-body); color: var(--c-ink); }
.movement-cta { position: relative; overflow: hidden; }
.movement-cta > .container { position: relative; z-index: 1; }
.movement-cta__title { margin-bottom: var(--space-lg); }
/* Lime brush squiggles color-keyed from the comp (TAF_Meet the Speakers): a tall wavy ribbon
   down the LEFT edge (full height, flowing top→bottom) + two short brush strokes at the
   BOTTOM-RIGHT corner. Earlier asset/placement was wrong. (2026-06-14) */
.movement-cta__art { position: absolute; pointer-events: none; background-repeat: no-repeat; }
.movement-cta__art--l { top: 0; left: 0; height: 100%; width: clamp(120px, 18vw, 280px); background-image: url("../patterns/PNG/movement-ribbon.png"); background-position: left top; background-size: contain; }
.movement-cta__art--r { bottom: 0; right: 0; width: clamp(200px, 30vw, 440px); height: clamp(80px, 12vw, 160px); background-image: url("../patterns/PNG/movement-stroke.png"); background-position: right bottom; background-size: contain; }

/* Mobile: stack columns; composite (with baked name + facts) above the bio, sized as large
   as the column allows so the baked text stays legible. */
@media (max-width: 900px) {
  .speaker__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .speaker__media { order: -1; }                 /* photo+name+facts always above the bio */
  .speaker__composite { max-width: 520px; margin-inline: auto !important; }
  .speaker__content { padding-bottom: var(--section-y); }  /* stacked: photo no longer provides the bottom, so give the button room */
  .speaker__ref { text-align: left; }            /* mobile: pull the verse ref in from the far right (client) */
}

/* ============================================================================
   DONATE PAGE (donate.html)  ·  spec: design/pages/donate.md
   Reuse-heavy: .page-hero, .belief-row (×2), .testimonials, .newsletter.
   NEW page-scoped blocks: .give-steps, .give-options, .give-circles,
   .founded card, .impact-steps, .give-list. No new tokens (orange/olive/
   lime/blue all exist). Comp-measured: hero title lime, §3 orange, §5 olive,
   §6 circles ORANGE (homepage stat circles are blue — overridden here).
   ============================================================================ */

/* 1. Hero — centered lime Hello-Imperfect caps title, Biennale subhead, lime CTA.
   Comp (1920): title Hello Imperfect 78px (lh 78.6 ≈1.0) → 4.06vw; subhead Biennale
   Bold 44px (lh 50) → 2.29vw, 3 lines pinned. */
.page-hero--donate { min-height: clamp(560px, 62vw, 900px); }
.page-hero--donate .page-hero__bg { object-position: 50% 30%; }
.page-hero--donate .page-hero__title { font-family: var(--font-accent); color: var(--c-lime); text-transform: uppercase; font-size: clamp(2.6rem, 4.06vw, 3.755rem); max-width: 16ch; margin-inline: auto; line-height: 1.02; }
.page-hero--donate .page-hero__subhead { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--c-cream); font-size: clamp(1.25rem, 2.0vw, 1.85rem); line-height: 1.18; max-width: min(1000px, 80vw); margin: var(--space-md) auto 0; }
.page-hero--donate .hero-cta { margin-top: var(--space-xl); }

/* 2. Questions about faith — reuses .belief-row. Comp: title Biennale 72px, body Inter 42px. */
.donate-q .belief-row { grid-template-columns: 1.7fr 1fr; gap: clamp(1.75rem, 3.5vw, 3.5rem); }
/* Taller portrait photo per comp (was the shared 3:2 landscape crop). */
.donate-q .belief-row__media { aspect-ratio: 4 / 5; }
.donate-q .belief-row__title { font-size: clamp(2.4rem, 3.75vw, 3.469rem); line-height: 1.1; }
/* Comp highlight behind "Away From God" is --c-orange at 66% (peachy), not the solid
   `.hl-mark--orange` used by inner-page hero titles over photos — page-scope it. */
.donate-q .belief-row__title .hl-mark--orange { --hl-color: rgba(233, 104, 45, 0.66); }
.donate-q .belief-row__body { font-size: clamp(1.3rem, 2.19vw, 2.026rem); line-height: 1.22; max-width: 41rem; }
.donate-q__notes { margin-top: var(--space-lg); display: grid; gap: 0.9rem; }
/* Footnotes are dark olive (sampled #36441E ≈ --c-olive in the .ai — not the faded blue-grey),
   comp-size 24px Light, widened so each sentence falls on the comp's two lines. */
.donate-q__notes p { margin: 0; font-size: clamp(1.05rem, 1.25vw, 1.156rem); font-weight: var(--fw-light); color: var(--c-olive); line-height: 1.34; max-width: 46rem; }

/* 3. Comes alongside (orange band) — cream Hello-Imperfect 78px title + 4 cream cards,
   each with a dark-olive circular badge (extracted comp icon) straddling the top edge. */
/* Selector carries .donate-alongside so it beats base.css `.bg-orange h2` (else title forced pure white). */
.donate-alongside .donate-alongside__title { font-family: var(--font-accent); color: var(--c-cream-warm); text-transform: uppercase; text-align: center; font-size: clamp(2.6rem, 4.06vw, 3.755rem); line-height: 1.05; max-width: 22ch; margin: 0 auto var(--space-lg); }
.give-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.give-step { position: relative; margin-top: 2.7rem; padding: calc(var(--space-lg) + 1.6rem) var(--space-md) var(--space-lg); background: var(--c-cream); border-radius: var(--radius-md); text-align: center; }
.give-step__icon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 5rem; height: 5rem; border-radius: 50%; background: var(--c-olive); display: grid; place-items: center; }
.give-step__icon img { width: 50%; height: 50%; object-fit: contain; }
.give-step__body { margin: 0; font-size: var(--fs-300); color: var(--c-ink); line-height: 1.5; }

/* 4. The Solution — "THE SOLUTION" eyebrow ABOVE a 2-col grid: left = Biennale H2 + olive lead,
   right = BLACK intro + BOLD black bullets. Columns TOP-aligned so the right text starts level with
   the heading (per comp). Intro + bullets are comp-size 24px. */
.donate-solution__title { font-family: var(--font-display); color: var(--c-olive); font-size: clamp(2.4rem, 3.75vw, 3.469rem); line-height: var(--lh-tight); margin: 0; }
.donate-solution__grid { margin-top: var(--space-sm); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.donate-solution__lead { margin: var(--space-md) 0 0; max-width: 31rem; font-size: clamp(1.25rem, 1.9vw, 1.758rem); color: var(--c-olive); line-height: 1.3; }
.donate-solution__intro { margin: 0 0 var(--space-md); font-size: clamp(0.9rem, 1.05vw, 1rem); color: var(--c-ink); line-height: 1.32; }
.donate-solution__intro strong { font-weight: var(--fw-bold); }
.give-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.give-list li { position: relative; padding-left: 1.9rem; font-size: clamp(0.9rem, 1.05vw, 1rem); font-weight: var(--fw-bold); color: var(--c-ink); line-height: 1.3; }
.give-list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 12px; height: 12px; border-radius: 50%; background: var(--c-blue); }
/* §4 background: faint tan brush-stroke curves (extracted from TAF_Donate.ai clip 926), right side. */
.donate-solution { position: relative; overflow: hidden; }
.donate-solution::before { content: ""; position: absolute; inset: 0; background: url("../patterns/PNG/donate-solution-pattern.png") right center / auto 100% no-repeat; pointer-events: none; z-index: 0; }
.donate-solution > .container { position: relative; z-index: 1; }

/* 5. Two ways to give (olive band) — LEFT: lime-highlighted Biennale title (72px), 2 extracted
   lime-iconed contribution rows + grateful footnote. RIGHT: DonorBox donation-form card (replica;
   wire to the live DonorBox campaign embed when the client supplies it). */
/* Wider form column + smaller gap pulls the left content closer to the donate box (per comp);
   top-aligned so the heading sits level with the form's top edge. */
.donate-ways__grid { display: grid; grid-template-columns: 1fr clamp(380px, 36vw, 520px); gap: clamp(1.5rem, 3.2vw, 3.25rem); align-items: start; }
.donate-ways__title { font-family: var(--font-display); color: var(--c-cream); font-size: clamp(2.4rem, 3.75vw, 3.469rem); text-align: left; line-height: var(--lh-tight); margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem); }
/* Rows hug their content (icon + label) so there's no full-width "long bar" past the heading,
   but stay LEFT-aligned to share the heading/footnote's left edge (not centered). */
.give-options { display: flex; flex-direction: column; align-items: stretch; gap: clamp(1rem, 1.6vw, 1.4rem); }
/* Rounder pill rows; icon box shortened so the hand-icon isn't taller than the label. */
.give-option { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 1.9rem); padding: clamp(1.2rem, 2.1vw, 1.7rem) clamp(1.6rem, 2.8vw, 2.4rem); background: rgba(168, 184, 199, 0.22); border-radius: 28px; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease; }
.give-option:hover { background: rgba(168, 184, 199, 0.32); transform: translateY(-3px); }
.give-option__icon { flex: 0 0 auto; width: clamp(2.9rem, 3.7vw, 4.1rem); height: clamp(2.9rem, 3.7vw, 4.1rem); display: grid; place-items: center; }
.give-option__icon img, .give-option__icon svg { width: 100%; height: 100%; object-fit: contain; }
.give-option__label { flex: 1 1 auto; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.6rem, 2.6vw, 2.4rem); color: var(--c-cream); line-height: 1.05; }
/* "Mail a Check" is informational (an address, not a link) — no hover lift, and the PO box
   prints below the label in body type so it doesn't read as a giant heading. */
.give-option--mail { cursor: default; align-items: flex-start; }
.give-option--mail:hover { background: rgba(168, 184, 199, 0.22); transform: none; }
.give-option__address { display: block; margin-top: 0.55rem; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-200); line-height: 1.5; color: rgba(250, 243, 233, 0.82); }
.donate-ways__note { margin: clamp(1.5rem, 2.5vw, 2.25rem) 0 0; max-width: 42rem; font-size: var(--fs-200); color: rgba(250, 243, 233, 0.72); line-height: 1.55; }

/* DonorBox form replica (right column) — comp-matched: extra-round card, taller lime header,
   roomier amount buttons (rounder + larger numerals), bigger custom-amount label, taller toggle. */
.donate-form { background: var(--c-cream); border-radius: 36px; overflow: hidden; box-shadow: 0 22px 55px rgba(0, 0, 0, 0.22); }
.donate-form__head { display: flex; align-items: center; gap: 0.7rem; background: var(--c-lime); color: var(--c-olive); padding: 1.4rem 1.5rem; }
.donate-form__lock svg { display: block; }
.donate-form__step { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.2rem; }
.donate-form__meta { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; }
.donate-form__body { padding: clamp(1.4rem, 2.6vw, 2rem); }
.donate-form__amounts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.donate-form__amt { padding: 1.2rem 0.5rem; border: 1.5px solid rgba(54, 68, 31, 0.28); border-radius: 18px; background: transparent; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.55rem; color: var(--c-olive); cursor: pointer; transition: background-color 0.15s ease; }
.donate-form__amt:hover { background: rgba(54, 68, 31, 0.06); }
.donate-form__amt.is-selected { background: var(--c-olive); border-color: var(--c-olive); color: var(--c-cream); }
.donate-form__field { margin-top: 0.85rem; }
.donate-form__field input { width: 100%; padding: 1.3rem; border: 1.5px solid rgba(54, 68, 31, 0.28); border-radius: 18px; background: transparent; font-family: var(--font-body); font-size: 1rem; color: var(--c-ink); }
.donate-form__field input.is-error { border-color: var(--c-orange); }
.donate-form__fieldlabel { display: block; margin-top: 0.55rem; font-size: 0.95rem; color: rgba(40, 40, 40, 0.6); }
.donate-form__toggle { margin-top: 1.1rem; display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--c-orange); border-radius: var(--radius-pill); overflow: hidden; }
.donate-form__tgl { padding: 1.15rem 0.5rem; border: none; background: transparent; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.15rem; color: var(--c-orange); cursor: pointer; }
.donate-form__tgl.is-active { background: var(--c-orange); color: var(--c-white); }
.donate-form__next { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin: 1.2rem auto 0; padding: 1.05rem 2.7rem; background: var(--c-olive); color: var(--c-cream); border: none; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--fs-75); cursor: pointer; }
.donate-form__next svg { display: block; }
.donate-form__powered { margin: 0.95rem 0 0; text-align: center; font-size: var(--fs-75); color: rgba(40, 40, 40, 0.6); }
.donate-form__powered a, .donate-form__powered { text-decoration: underline; }

/* 6. Your own questions matter too — orange stat discs (NOT the blue homepage ones) + dark pill. */
.donate-matter { position: relative; overflow: hidden; text-align: center; }
.donate-matter__pattern { position: absolute; inset: 0; background: url(../patterns/PNG/home-movement-bg.png) center / cover no-repeat; opacity: 0.4; pointer-events: none; }
/* Wider than --container-wide so all 3 give-circles (3×400 + 2×40 gap = 1280px)
   fit on ONE row at large viewports (1360 container only gave 1264px inner -> 3rd wrapped).
   The heading/sub keep their own max-widths, so only the circle row uses the extra room. */
.donate-matter > .container { position: relative; z-index: 1; max-width: 1440px; }
.donate-matter__title { font-family: var(--font-display); color: var(--c-olive); font-size: clamp(2.4rem, 3.75vw, 3.469rem); line-height: var(--lh-tight); max-width: min(1248px, 68vw); margin: 0 auto; }
/* Comp highlight behind line 2 is brand slate-BLUE (--c-blue #A8B8C7), not the shared slate-gray
   `.hl-mark--slate` (used by the Speaking hero) — override page-scoped so Speaking is untouched. */
.donate-matter__title .hl-mark--slate { --hl-color: rgba(168, 184, 199, 0.85); }
.donate-matter__sub { margin: var(--space-xl) auto var(--space-xl); max-width: 38ch; font-size: clamp(1.05rem, 1.25vw, 1.156rem); font-weight: var(--fw-semibold); color: var(--c-ink); line-height: 1.32; }
.give-circles { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.give-circle { flex: 0 1 clamp(220px, 26vw, 400px); aspect-ratio: 1; border-radius: 50%; background: var(--c-orange); color: var(--c-white); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; padding: clamp(2.6rem, 6vw, 4.4rem) clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem); }
.give-circle__icon { width: clamp(4rem, 6.2vw, 5.9rem); height: clamp(4rem, 6.2vw, 5.9rem); margin-bottom: 0.7rem; display: grid; place-items: center; }
.give-circle__icon img { width: 100%; height: 100%; object-fit: contain; }
.give-circle__title { margin: 0 0 0.15rem; font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: clamp(1.05rem, 1.25vw, 1.156rem); line-height: 1.2; color: var(--c-white); }
.give-circle__body { margin: 0; font-weight: var(--fw-light); font-size: clamp(1.05rem, 1.25vw, 1.156rem); line-height: 1.3; color: var(--c-white); }
.donate-matter__actions { margin-top: var(--space-xl); }

/* 7. Top quotes — near-white mist band (per comp, not blue); reuses .testimonials--peach.
   Comp quote glyphs are a much lighter blush than the shared peach SVG (#E0B8A8); recolor them
   donate-only by masking the SAME shapes with --c-blush-pale (Workshop's glyphs stay untouched). */
.donate-quotes { text-align: center; }
.donate-quotes__title { font-family: var(--font-display); color: var(--c-olive); font-size: clamp(2.4rem, 3.75vw, 3.469rem); line-height: var(--lh-tight); margin-bottom: var(--space-lg); }
.section.donate-quotes::before, .section.donate-quotes::after {
  background-image: none; background-color: var(--c-blush-pale);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.section.donate-quotes::before { -webkit-mask-image: url("../patterns/SVG/workshop-quote-open.svg"); mask-image: url("../patterns/SVG/workshop-quote-open.svg"); }
.section.donate-quotes::after { -webkit-mask-image: url("../patterns/SVG/workshop-quote-close.svg"); mask-image: url("../patterns/SVG/workshop-quote-close.svg"); }

/* 8. Led by people who care (olive band) — reuses .belief-row, recolored for the dark band. */
/* Wider text column so the heading fits on ONE line beside a slightly smaller photo (per comp). */
.donate-led .belief-row { grid-template-columns: 1.3fr 1fr; }
.donate-led .belief-row__title { color: var(--c-white); font-size: clamp(1.9rem, 3vw, 2.775rem); line-height: var(--lh-tight); white-space: nowrap; }
.donate-led .belief-row__body { color: var(--c-white); font-size: clamp(1rem, 1.05vw, 0.971rem); line-height: 1.5; }
.donate-led .btn--outline { color: var(--c-white); border-color: var(--c-lime); letter-spacing: 0.18em; padding-inline: 3.1em; }
.donate-led .btn--outline:hover { background: var(--c-lime); color: var(--c-olive); border-color: var(--c-lime); }
/* Mobile: heading reflows (no forced one-line) once the row stacks. */
@media (max-width: 800px) { .donate-led .belief-row { grid-template-columns: 1fr; } .donate-led .belief-row__title { white-space: normal; } }

/* 9. Founded on — blue-gray band, centered white Biennale + translucent card + orange CTA. */
.donate-founded { background: var(--c-blue); text-align: center; position: relative; overflow: hidden; }
.donate-founded__title { font-family: var(--font-display); color: var(--c-cream); font-size: clamp(2.4rem, 3.75vw, 3.469rem); line-height: var(--lh-tight); max-width: 24ch; margin: 0 auto; }
/* Card is a SOLID pale-blue panel per comp (#DCE3E9 ≈ --c-blue-pale), not a translucent cream wash;
   text reads dark olive on it. */
.donate-founded__card { max-width: 680px; margin: var(--space-lg) auto; background: var(--c-blue-pale); border-radius: var(--radius-md); padding: clamp(1.6rem, 3vw, 2.6rem); }
.donate-founded__card p { margin: 0; color: var(--c-olive); font-size: var(--fs-400); line-height: var(--lh-body); }

/* 11. Lasting impact — peach band, 3 big-numeral pill cards + orange CTA. */
.donate-impact { text-align: center; position: relative; overflow: hidden; }
.donate-impact__title { font-family: var(--font-display); color: var(--c-olive); font-size: clamp(2.4rem, 3.75vw, 3.469rem); line-height: var(--lh-tight); max-width: min(1218px, 68vw); margin: 0 auto; }
/* Subheading: comp = Inter Light 300, 27px (TAF_Donate.ai uuid 5480). */
.donate-impact__sub { margin: var(--space-md) auto var(--space-lg); max-width: 48ch; font-size: clamp(1.1rem, 1.41vw, 1.304rem); font-weight: var(--fw-light); line-height: 1.5; color: var(--c-ink); }
/* Cards: comp = 3× white pill cards ~510px wide, gap ~56px (≈1642px content @1920). */
.impact-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.9vw, 3.5rem); max-width: 1240px; margin-inline: auto; }
.impact-step { display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.5rem); padding: clamp(1.6rem, 2.6vw, 2.2rem) clamp(1.5rem, 2.4vw, 2rem); background: var(--c-white); border-radius: var(--radius-lg); text-align: left; }
/* Numeral: comp = Hello Imperfect 112.6px, #A8B8C7 (uuid 5499). */
.impact-step__num { flex: 0 0 auto; font-family: var(--font-accent); font-weight: var(--fw-regular); font-size: clamp(3rem, 5.87vw, 5.43rem); color: var(--c-blue); line-height: 1; }
/* Title: comp = Inter SemiBold 24px, left, #36441F (uuid 5502). */
.impact-step__title { margin: 0; font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: clamp(1.1rem, 1.25vw, 1.156rem); color: var(--c-olive); line-height: 1.25; }
.donate-impact__actions { margin-top: var(--space-xl); }

/* Band decorations. §8 + §9 use the ACTUAL cream brush-stroke artwork extracted from the .ai
   (clip groups 656/1070), each PNG sized to its band so `background-size:100% 100%` aligns it.
   §3 + §11 keep the blue-gray river waves the comp shows at those band edges. */
.donate-alongside, .donate-led { position: relative; overflow: hidden; }
.donate-alongside::before, .donate-led::before, .donate-founded::before, .donate-impact::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
}
/* §3 orange — blue-gray wave accents (top-left + bottom-right). */
.donate-alongside::before { background-image: url("../patterns/PNG/donate-waves-orange.png"); }
/* §8 olive — real cream brush strokes (right side + bottom), per comp. */
.donate-led::before { background-image: url("../patterns/PNG/donate-led-pattern.png"); }
/* §11 impact (peach) — full blue-gray river texture. */
.donate-impact::before { background-image: url("../patterns/PNG/donate-waves.png"); opacity: 0.65; }
/* §9 founded (blue band) — real cream brush swirls on both sides, per comp. */
.donate-founded::before { background-image: url("../patterns/PNG/donate-founded-pattern.png"); }
.donate-alongside > .container, .donate-led > .container,
.donate-founded > .container, .donate-impact > .container { position: relative; z-index: 1; }

/* Donate responsive — stack the new multi-col grids. (belief-row stacks via its own global rule.) */
@media (max-width: 980px) {
  /* §5 two-up (text | form) drops to a single centred column; form caps width + centres. */
  .donate-ways__grid { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); }
  .donate-ways__title { text-align: center; }
  .donate-ways__note { margin-inline: auto; text-align: center; }
  /* Stacked/centred column → centre the contribution rows too (they're left-aligned on desktop). */
  .give-options { align-items: center; }
  .donate-form { width: 100%; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .give-steps { grid-template-columns: repeat(2, 1fr); }
  .impact-steps { grid-template-columns: 1fr; }
  .impact-step { justify-content: flex-start; }
  .donate-solution__grid { grid-template-columns: 1fr; }
  /* §2 override re-specifies the grid, so it must restack here too (else it stays 2-col). */
  .donate-q .belief-row { grid-template-columns: 1fr; }
  /* §6 discs: stack vertically — tighten the gap + cap the size so the trio reads as a connected
     group (round shapes leave cream wedges; a small gap keeps them from feeling disconnected). */
  .give-circles { gap: clamp(0.5rem, 2vw, 1rem); }
  .give-circle { flex-basis: clamp(260px, 60vw, 300px); }
}
@media (max-width: 520px) {
  .give-steps { grid-template-columns: 1fr; }
}

/* =====================================================================
   RESOURCES PAGE  (resources.html — spec: design/pages/resources.md)
   Sections: hero+pills · Start Here cards · Watch video grid · Podcast
   band · Scholarship cards · newsletter (reused) · Impact CTA.
   New components are Resources-scoped for now; promote to components.css
   if reused on another page.
   ===================================================================== */

/* ---- 1. Hero (orange duotone) + category pill nav -------------------- */
/* Comp hero band = 852.8px @ 1920 artboard → 44.4vw. */
.page-hero--resources { min-height: clamp(440px, 44vw, 800px); }
/* Warm terracotta duotone (comp photo+overlay ≈ #C8845F) — orange multiply
   over the photo. object-position + lifted shadows keep the keyboard (mid-tone)
   behind the heading instead of the dark laptop hinge (which the multiply turned
   into a muddy bar). */
/* Muted terracotta duotone — matches the comp exactly: --c-orange #E9682D at
   mix-blend MULTIPLY, opacity 0.64, over a lightly desaturated/lifted photo. The
   multiply lets the keyboard/desk read through warmly instead of a flat solid wash
   (the old normal-blend @0.82 read too orange/opaque). */
.page-hero--resources .page-hero__bg { filter: grayscale(1) brightness(1.32) contrast(0.9); object-position: 50% 42%; }
.page-hero--resources .page-hero__tint { background: var(--c-orange); mix-blend-mode: normal; opacity: 0.62; }
/* Comp type (1920 artboard): title Biennale 72px (lh 68) → 3.75vw; lead Inter 24px
   (lh 32) → 1.25vw. Line breaks PINNED in the markup (rule 7). */
.page-hero--resources .page-hero__title { font-size: clamp(2.4rem, 3.75vw, 3.469rem); line-height: 0.95; }
/* Lead: nudged down off the title + a touch smaller per client (2026-06-15). */
.page-hero--resources .page-hero__lead { font-size: clamp(1rem, 1.15vw, 1.05rem); line-height: 1.4; max-width: 60rem; margin-top: var(--space-lg); }
/* Give the title block room above the overlapping pill row. */
.page-hero--resources > .container { padding-bottom: clamp(3.5rem, 7vw, 6rem); }

/* Talks archive hero: shorter than the Resources hero (no overlapping pill nav
   below it), and no extra bottom padding that the pill row needed. */
.page-hero--talks { min-height: clamp(300px, 30vw, 440px); }
.page-hero--talks > .container { padding-bottom: 0; }

.resource-nav { position: relative; z-index: 3; margin-top: clamp(-84px, -7vw, -56px); }
.resource-nav__row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  /* Comp pill row = 1184.9px @1920 = 61.7% of width; cap to that so pills keep
     the comp's h/w ≈ 0.61 instead of stretching flat across the full container. */
  max-width: min(1185px, 62vw); margin-inline: auto;
}
/* Pill box: comp 273.7×166.9 @1920 (h/w ≈ 0.61) → min-height 8.7vw. Label: comp
   Inter SemiBold 17px all-caps, tracking 0.16em → 0.885vw. */
.resource-nav__pill {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: clamp(110px, 8.7vw, 167px); padding: 1rem 1.25rem; border-radius: 16px;
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: clamp(0.78rem, 0.9vw, 0.833rem);
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3;
  text-decoration: none; box-shadow: 0 18px 34px rgba(40, 40, 40, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.resource-nav__pill:hover { transform: translateY(-3px); box-shadow: 0 22px 40px rgba(40, 40, 40, 0.22); }
.resource-nav__pill--olive  { background: var(--c-olive);  color: var(--c-cream); }
.resource-nav__pill--orange { background: var(--c-orange); color: var(--c-white); }
.resource-nav__pill--lime   { background: var(--c-lime);   color: var(--c-olive); }
.resource-nav__pill--blue   { background: var(--c-blue);   color: var(--c-olive); }

/* ---- 2. Start Here cards -------------------------------------------- */
/* Comp type (1920 artboard): heading Biennale 72px (lh 82) → 3.75vw; card title
   Hello Imperfect 35.4px → 1.845vw; card body Inter LIGHT 24px (lh 32) → 1.25vw;
   button label Inter SemiBold 17px / 0.16em. Card 465.8×518.9, gap 62.6, row 79.4%
   of width → cards row scales with vw so the PINNED body line breaks (rule 7) fit. */
/* Tighter band per client (2026-06-15): less air above + below the heading. */
.resource-start { padding-block: clamp(2.25rem, 4vw, 4rem); }
.resource-start__title {
  font-family: var(--font-display); color: var(--c-olive);
  font-size: clamp(2.4rem, 3.75vw, 3.469rem); line-height: 1.14;
  text-align: center; margin: 0 0 var(--space-lg);
}
.resource-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3.25vw, 2.6rem);
  max-width: min(1380px, 84vw); margin-inline: auto;
}
.resource-card {
  position: relative;                                  /* anchor for the straddling button */
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--c-white); border-radius: 18px; overflow: visible;
  padding: clamp(2rem, 2.7vw, 2.7rem) clamp(1.6rem, 2.4vw, 2.4rem) clamp(3.5rem, 5vw, 4.5rem);
  box-shadow: 0 16px 36px rgba(40, 40, 40, 0.07);
}
.resource-card__title {
  font-family: var(--font-accent); color: var(--c-olive); text-transform: uppercase;
  font-size: clamp(1.4rem, 1.845vw, 1.707rem); line-height: 1.02; margin: 0;
}
.resource-card__rule { display: block; width: 82%; height: 1px; background: var(--c-ink); margin: var(--space-md) auto; }
.resource-card__body { color: var(--c-ink); font-size: clamp(1.05rem, 1.25vw, 1.156rem); font-weight: var(--fw-light); line-height: 1.34; margin: 0; }
/* Lime pill straddling the card's bottom edge (~42% below, per comp), label hugs
   its text (max-content). Same straddle idiom as .service-card__btn. */
.resource-card__btn {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 42%);
  width: max-content; max-width: 98%; white-space: nowrap; justify-content: center; text-align: center;
  font-size: clamp(0.78rem, 0.9vw, 0.833rem); letter-spacing: 0.16em; line-height: 1.25;
  padding: 1.45em 1.7em;
}
.resource-card__btn:hover, .resource-card__btn:active { transform: translate(-50%, 42%); }

/* ---- 3. Watch — "Ways to Dive Deeper" video grid -------------------- */
/* Comp type (1920 artboard): eyebrow Inter SemiBold 17px / 0.16em; heading Biennale
   72px (lh 82) → 3.75vw; intro Inter LIGHT 24px (lh 32, 2 lines pinned) → 1.25vw.
   Tiles 268.99×280.39 (≈square, h/w 1.04 — NOT the tall 3:4), gap h34/v40, row 61.4%
   of width; tile text Inter Light 24px. See More pill 247×82, label 17px / 0.16em. */
.video-grid-band {
  background-color: var(--c-blue);
  background-image: url("../patterns/PNG/resources-watch-bg.png");
  background-repeat: no-repeat; background-position: center; background-size: cover;
  text-align: center;
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem); /* tighter than the full --section-y below the See More button */
}
.video-grid-band__eyebrow {
  color: var(--c-olive); margin: 0 0 var(--space-sm);
  font-size: clamp(0.78rem, 0.9vw, 0.833rem); letter-spacing: 0.16em;
}
.video-grid-band__title {
  font-family: var(--font-display); color: var(--c-olive);
  font-size: clamp(2.4rem, 3.75vw, 3.469rem); line-height: 1.14; margin: 0 auto;
}
.video-grid-band__intro {
  color: var(--c-ink); font-size: clamp(1.05rem, 1.25vw, 1.156rem); font-weight: var(--fw-light);
  line-height: 1.34; max-width: min(880px, 62vw); margin: var(--space-md) auto 0;
}
.video-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.1rem, 2vw, 2.5rem) clamp(0.9rem, 1.78vw, 2.1rem);
  max-width: min(1340px, 74vw); margin-inline: auto; margin-top: clamp(1.75rem, 3vw, 3rem);
}
/* Placeholder tile (no talks seeded yet) — keeps the original comp look. */
.video-tile[aria-hidden] {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 269 / 280; padding: 1rem; border-radius: 16px;
  background: rgba(255, 255, 255, 0.34);
}
.video-tile__ph { color: rgba(54, 68, 31, 0.78); font-size: clamp(1.05rem, 1.25vw, 1.156rem); font-weight: var(--fw-light); line-height: 1.34; }

/* Real talk card: 16:9 thumbnail + centered title below. The whole card is a button. */
.video-tile { text-align: center; }
.video-tile__btn {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit; text-align: center; -webkit-appearance: none; appearance: none;
}
.video-tile__btn[disabled] { cursor: default; }
.video-tile__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, 0.22); box-shadow: 0 8px 24px rgba(28, 20, 12, 0.18);
}
.video-tile__thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.video-tile__thumb--empty { display: flex; align-items: center; justify-content: center; }
.video-tile__soon { color: rgba(255, 255, 255, 0.85); font-size: var(--fs-75); letter-spacing: 0.08em; text-transform: uppercase; }
.video-tile__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(46px, 4vw, 60px);
  z-index: 2; opacity: 0.92; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); transition: transform 0.25s ease, opacity 0.25s ease;
}
.video-tile__play svg { display: block; width: 100%; height: auto; }
.video-tile__play-bg { fill: #f00; }
.video-tile__thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(28, 20, 12, 0); transition: background 0.25s ease;
}
.video-tile__btn:hover .video-tile__thumb img,
.video-tile__btn:focus-visible .video-tile__thumb img { transform: scale(1.05); }
.video-tile__btn:hover .video-tile__thumb::after,
.video-tile__btn:focus-visible .video-tile__thumb::after { background: rgba(28, 20, 12, 0.12); }
.video-tile__btn:hover .video-tile__play,
.video-tile__btn:focus-visible .video-tile__play { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
.video-tile__btn:focus-visible .video-tile__thumb { outline: 3px solid var(--c-lime); outline-offset: 3px; }
.video-tile__info { display: block; padding: 0.85rem 0.15rem 0; }
.video-tile__title {
  display: block; font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem); line-height: 1.3; color: var(--c-olive);
}
/* On the blue "Dive Deeper" band the title goes light. */
.video-grid-band .video-tile__title { color: #fff; }

.video-grid-band__more { margin-top: clamp(1.75rem, 3vw, 3rem); }
/* See More: wide lime pill (comp 247×82, generous horizontal padding), 17px / 0.16em. */
.video-grid-band__more .btn { font-size: clamp(0.78rem, 0.9vw, 0.833rem); letter-spacing: 0.16em; padding: 1.85em 3.6em; }

/* Archive grid: more room than the resources teaser (which is capped at 62vw). */
.video-grid-band--archive { padding-block: clamp(2rem, 4vw, 3.5rem); }
/* The grid is the only thing in this band (no eyebrow/title/intro above it), so
   drop the .video-grid top margin that those normally need on the Resources page. */
.video-grid--archive { max-width: min(1320px, 92vw); margin-top: 0; }
@media (min-width: 1100px) { .video-grid--archive { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Talk video modal ----------------------------------------------- */
.talk-modal {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem); opacity: 0; transition: opacity 0.28s ease;
}
/* `display:flex` above overrides the `hidden` attribute, so hide it explicitly —
   otherwise the closed (opacity:0) overlay still covers the page and eats clicks. */
.talk-modal[hidden] { display: none; }
.talk-modal.is-open { opacity: 1; }
.talk-modal__backdrop { position: absolute; inset: 0; background: rgba(28, 20, 12, 0.72); cursor: pointer; }
.talk-modal__dialog {
  position: relative; z-index: 1; width: min(900px, 100%); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden; /* clip to rounded corners; inner area scrolls */
  background: var(--c-cream, #fff); border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  transform: translateY(16px) scale(0.98); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.talk-modal.is-open .talk-modal__dialog { transform: translateY(0) scale(1); }
.talk-modal__close {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 3; width: 40px; height: 40px; border: 0;
  border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 0.2s ease;
}
.talk-modal__close:hover { background: rgba(0, 0, 0, 0.8); }
.talk-modal__close svg { width: 20px; height: 20px; }
.talk-modal__player { position: relative; flex: 0 0 auto; aspect-ratio: 16 / 9; background: #000; border-radius: 18px 18px 0 0; overflow: hidden; }
.talk-modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Only the description area scrolls — the player stays pinned and the scrollbar
   never touches the rounded corners. Styled thin + on-brand (WebKit + Firefox). */
.talk-modal__meta {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  scrollbar-width: thin; scrollbar-color: var(--c-olive) transparent;
}
.talk-modal__meta::-webkit-scrollbar { width: 8px; }
.talk-modal__meta::-webkit-scrollbar-track { background: transparent; }
.talk-modal__meta::-webkit-scrollbar-thumb { background: var(--c-olive); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.talk-modal__meta::-webkit-scrollbar-thumb:hover { background: var(--c-ink); background-clip: padding-box; }
.talk-modal__by { margin: 0 0 0.4rem; color: var(--c-olive); font-weight: var(--fw-semibold); font-size: var(--fs-75); letter-spacing: 0.04em; }
.talk-modal__title { margin: 0 0 var(--space-md); font-family: var(--font-display); color: var(--c-olive); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.12; }
.talk-modal__desc { color: var(--c-ink); font-weight: var(--fw-light); line-height: 1.6; }
.talk-modal__desc p { margin: 0 0 1em; }
.talk-modal__desc p:last-child { margin-bottom: 0; }
.talk-modal__link { display: inline-block; margin-top: var(--space-md); color: var(--c-blue); font-weight: var(--fw-semibold); text-decoration: underline; }

/* ---- Single talk (watch) page --------------------------------------- */
.talk-single__head { background: var(--c-blue); color: #fff; text-align: center; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.talk-single__eyebrow { margin: 0 0 var(--space-sm); font-size: var(--fs-75); letter-spacing: 0.16em; text-transform: uppercase; }
.talk-single__eyebrow a { color: var(--c-lime); text-decoration: none; }
.talk-single__eyebrow a:hover { text-decoration: underline; }
.talk-single__title { margin: 0 auto; max-width: 22ch; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08; }
.talk-single__by { margin: var(--space-md) 0 0; font-weight: var(--fw-light); font-size: var(--fs-100); }
.talk-single__by strong { font-weight: var(--fw-semibold); }
.talk-single__body { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); background: var(--c-white); }
.talk-single__player { position: relative; aspect-ratio: 16 / 9; max-width: 900px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 16px 48px rgba(28, 20, 12, 0.22); }
.talk-single__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.talk-single__player--empty { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.85); aspect-ratio: 16 / 9; }
.talk-single__desc { max-width: 760px; margin: clamp(2rem, 4vw, 3rem) auto 0; color: var(--c-ink); font-weight: var(--fw-light); line-height: 1.7; }
.talk-single__desc p { margin: 0 0 1.1em; }
/* "More Talks to Explore" — centered heading + carousel, tightened so it reads as a
   connected band (the white content band above gives it the visual separation). */
.related--talk { padding-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.related--talk .related__title { text-align: center; margin-bottom: var(--space-md); }
.related--talk .video-grid-band__more { text-align: center; margin-top: var(--space-lg); }

/* Talk carousel: tiles ~3-up on desktop, horizontally scrollable, flip via the
   nav arrows (initCarousels). Reuses the .carousel component (flex viewport,
   scroll-snap, hidden scrollbar). */
.talk-carousel { --tc-gap: clamp(0.9rem, 1.8vw, 2rem); }
.talk-carousel__viewport { gap: var(--tc-gap); text-align: left; }
.talk-carousel__item { flex: 0 0 calc((100% - 2 * var(--tc-gap)) / 3); scroll-snap-align: start; }
@media (max-width: 980px) { .talk-carousel__item { flex-basis: calc((100% - var(--tc-gap)) / 2); } }
@media (max-width: 640px)  { .talk-carousel__item { flex-basis: 82%; } }

/* ---- 4. Listen — Podcast band --------------------------------------- */
/* Comp band 700px @1920 (≈36vw). Eyebrow Inter SemiBold 17px / 0.16em; heading Biennale
   72px (lh 82) UPPERCASE, 3 lines, left; body Inter LIGHT 24px (lh 32, 4 lines pinned),
   left; button dark-olive pill 382×82, 17px / 0.16em. */
.podcast-band { position: relative; overflow: hidden; background: var(--c-lime); padding-block: clamp(3.5rem, 8vw, 8rem); }
.podcast-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; mix-blend-mode: multiply; opacity: 0.34; z-index: 0; }
.podcast-band__tint { position: absolute; inset: 0; background: var(--c-lime); mix-blend-mode: multiply; opacity: 0.2; z-index: 1; pointer-events: none; }
/* vw-scaled width (comp content ≈79%) so the font (vw) and the two columns scale together
   and the PINNED heading/body line breaks hold across viewport widths. Own width + auto
   margins (not .container) so gutter padding doesn't shrink the body column below the comp. */
.podcast-band__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; width: min(1518px, 84vw); margin-inline: auto; }
.podcast-band__eyebrow { color: var(--c-olive); margin: 0 0 var(--space-sm); font-size: clamp(0.78rem, 0.9vw, 0.833rem); letter-spacing: 0.16em; }
/* white-space:nowrap so the explicit <br> define the 3 lines (THE / AMBASSADORS /
   FORUM PODCAST) and "FORUM PODCAST" never auto-wraps — our Biennale runs a touch wider
   than the comp's demo face, which otherwise split it onto a 4th line. */
.podcast-band__title { font-family: var(--font-display); color: var(--c-olive); font-size: clamp(2.4rem, 3.75vw, 3.469rem); line-height: 1.14; text-transform: uppercase; white-space: nowrap; margin: 0; }
.podcast-band__body p { color: var(--c-olive); font-size: clamp(1.05rem, 1.25vw, 1.156rem); font-weight: var(--fw-light); line-height: 1.34; margin: 0 0 var(--space-xl); }
.podcast-band__btn { font-size: clamp(0.78rem, 0.9vw, 0.833rem); letter-spacing: 0.16em; padding: 1.6em 3em; }

/* "Listen to the Podcast" service-picker modal (reuses the global .modal system).
   Each row opens its platform in a new tab. */
.listen-modal .modal__dialog { width: min(440px, 100%); }
.listen-options { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: 0.75rem; }
.listen-option {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 1rem; border-radius: var(--radius-md, 12px);
  border: 1.5px solid rgba(54, 68, 31, 0.16); background: var(--c-white);
  text-decoration: none; color: var(--c-olive);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.listen-option:hover, .listen-option:focus-visible {
  border-color: var(--c-olive); background: var(--c-cream);
  box-shadow: 0 10px 24px rgba(40, 40, 40, 0.12); transform: translateY(-2px);
  color: var(--c-olive);
}
.listen-option__icon { flex: none; width: 40px; height: 40px; }
.listen-option__icon svg { width: 100%; height: 100%; display: block; }
.listen-option__text { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.2; }
.listen-option__name { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-200); }
.listen-option__sub { font-size: var(--fs-75); color: var(--c-ink); opacity: 0.7; margin-top: 0.15rem; }
.listen-option__arrow { flex: none; width: 18px; height: 18px; color: var(--c-orange); transition: transform 0.18s ease; }
.listen-option:hover .listen-option__arrow, .listen-option:focus-visible .listen-option__arrow { transform: translateX(3px); }

/* ---- 5. Scholarships ------------------------------------------------ */
/* Comp type (1920 artboard): heading Biennale 72px (lh 82) → 3.75vw; intro Inter LIGHT
   24px (lh 32, 4 lines pinned) → 1.25vw; card titles Biennale 45px (lh 42) → 2.34vw,
   white, left. Cards 311.5×407.6 (aspect 0.764): photo top 78% with rounded bottom
   corners (the "curve" that cuts the image), solid-colour footer 22% with the extracted
   arrow + LEARN MORE (Inter SemiBold 17px / 0.16em). Grey wave brush pattern behind. */
.scholarships { position: relative; text-align: center; }
.scholarships__pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../patterns/PNG/resources-scholarship-bg.png") center / cover no-repeat;
}
.scholarships > .container { position: relative; z-index: 1; }
.scholarships__title { font-family: var(--font-display); color: var(--c-olive); font-size: clamp(2.4rem, 3.75vw, 3.469rem); line-height: 1.14; margin: 0 auto; }
.scholarships__intro { color: var(--c-ink); font-size: clamp(1.05rem, 1.25vw, 1.156rem); font-weight: var(--fw-light); line-height: 1.34; max-width: min(940px, 66vw); margin: var(--space-md) auto 0; }
/* Brighter lime bar behind "Faith and Leadership" — comp = --c-lime @ 68% (was the
   shared --lime-soft @ 50%, which read too muted). */
.scholarships__title .hl-mark { --hl-color: rgba(214, 216, 42, 0.68); }
/* Tighter gap above the cards per client (2026-06-15) — was --space-2xl (6rem). */
.scholarship-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4.45vw, 5.3rem); margin-top: var(--space-lg); max-width: min(1110px, 60vw); margin-inline: auto; }
.scholarship-card {
  position: relative; border-radius: 24px; aspect-ratio: 311 / 408; overflow: hidden;
  display: flex; flex-direction: column; text-align: left;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
/* Comp tile colours = full-strength brand orange / blue-gray / lime (the deep/acid
   variants used before read too dark — client, 2026-06-15). */
.scholarship-card--orange { background: var(--c-orange); --card-color: var(--c-orange); }
.scholarship-card--blue   { background: var(--c-blue);   --card-color: var(--c-blue); }
.scholarship-card--lime   { background: var(--c-lime);   --card-color: var(--c-lime); }
.scholarship-card__media { position: relative; flex: 0 0 78%; border-radius: 24px; overflow: hidden; }
.scholarship-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.5s ease; }
/* Comp is the full-COLOR photo under a translucent brand-color wash — NOT a
   duotone (a `color` blend stripped the photo's real colors to one hue) and NOT
   a dark photo (multiply crushed it). A plain `normal` overlay at 0.6 keeps the
   photo's real colors + detail visible while the brand color tints strongly. */
.scholarship-card__overlay { position: absolute; inset: 0; z-index: 1; background: var(--card-color); mix-blend-mode: normal; opacity: 0.6; }
.scholarship-card__title {
  position: absolute; left: 0; top: 0; z-index: 2; margin: 0;
  padding: clamp(1rem, 1.5vw, 1.5rem) clamp(1.1rem, 1.6vw, 1.6rem);
  font-family: var(--font-display); color: var(--c-white);
  font-size: clamp(1.6rem, 2.34vw, 2.164rem); line-height: 0.96;
}
.scholarship-card__btn {
  flex: 1; display: flex; align-items: center; gap: 0.9em;
  padding: 0 clamp(1.1rem, 1.6vw, 1.6rem); text-decoration: none;
  color: var(--c-olive-deep); font-weight: var(--fw-semibold);
  font-size: clamp(0.78rem, 0.9vw, 0.833rem); letter-spacing: 0.16em; text-transform: uppercase;
}
.scholarship-card__arrow { width: 1.75em; height: auto; flex: none; transition: transform 0.28s ease; }
/* Subtle hover: card lift + shadow, photo zoom, arrow nudge along its diagonal. */
.scholarship-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px rgba(40, 40, 40, 0.22); }
.scholarship-card:hover .scholarship-card__bg { transform: scale(1.06); }
.scholarship-card:hover .scholarship-card__arrow { transform: translate(3px, 3px); }
/* On hover the footer text + arrow go WHITE on every card (overrides the global
   a:hover link colour, which otherwise turned LEARN MORE orange on the orange card). */
.scholarship-card:hover .scholarship-card__btn,
.scholarship-card__btn:hover { color: var(--c-white); }

/* ---- 7. Impact CTA (solid blue band + extracted squiggle decor) ----- */
/* Comp type: heading Biennale 72px (lh 82, 2 lines pinned) → 3.75vw; sub Inter LIGHT
   24px (lh 32, 3 lines pinned) → 1.25vw; button 17px / 0.16em. Background = the exact
   comp decoration (left vertical stroke + bottom-right brush marks), extracted from the
   .ai clip group and stretched to fill the band over --c-blue. */
.impact-cta {
  position: relative; background-color: var(--c-blue);
  background-image: url("../patterns/PNG/resources-cta-bg.png");
  background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
  padding-block: clamp(4rem, 8vw, 8rem); text-align: center;
}
.impact-cta > .container { position: relative; z-index: 1; }
.impact-cta__title { font-family: var(--font-display); color: var(--c-olive); font-size: clamp(2.4rem, 3.75vw, 3.469rem); line-height: 1.14; margin: 0 auto; max-width: none; }
.impact-cta__sub { color: var(--c-olive); font-size: clamp(1.05rem, 1.25vw, 1.156rem); font-weight: var(--fw-light); line-height: 1.34; max-width: min(800px, 50vw); margin: var(--space-md) auto var(--space-xl); }
.impact-cta__btn { font-size: clamp(0.78rem, 0.9vw, 0.833rem); letter-spacing: 0.16em; padding: 1.6em 2.8em; }

/* ---- Resources responsive ------------------------------------------- */
@media (max-width: 900px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 840px) {
  /* Stacked: widen row gap so each card's straddling button clears the next card. */
  .resource-cards { grid-template-columns: 1fr; max-width: 440px; row-gap: 4.5rem; }
  .scholarship-cards { grid-template-columns: 1fr; max-width: 360px; gap: 2.5rem; }
  .podcast-band__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
}
/* Tablet 4-col: the 62vw cap gets too cramped — let pills + video grid use the full container. */
@media (max-width: 1024px) {
  .resource-nav__row { max-width: 100%; }
  .video-grid { max-width: 100%; }
  .scholarship-cards { max-width: 100%; gap: clamp(1.5rem, 3vw, 2.5rem); }
}
@media (max-width: 700px) {
  .resource-nav__row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; }
  .resource-nav { margin-top: clamp(-56px, -9vw, -40px); }
}
@media (max-width: 560px) {
  .video-grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
  /* Let the podcast heading wrap on small phones (nowrap would overflow the narrow column). */
  .podcast-band__title { white-space: normal; }
}

/* ============================================================
   SCHOLARSHIPS  (CPT: /scholarships archive + /scholarships/<slug> landing)
   Populate-able landing page per program. Accent maps to the program card
   color on the Resources page (orange / blue / lime / olive). Light text on
   the dark accents (orange/olive); dark olive text on the light ones (blue/lime).
   ============================================================ */
.scholarship-single--orange { --sch-bg: var(--c-orange);     --sch-fg: var(--c-cream); --sch-accent: var(--c-orange-deep); }
.scholarship-single--olive  { --sch-bg: var(--c-olive);      --sch-fg: var(--c-cream); --sch-accent: var(--c-olive-deep); }
.scholarship-single--blue   { --sch-bg: var(--c-blue);       --sch-fg: var(--c-olive); --sch-accent: var(--c-blue-deep); }
.scholarship-single--lime   { --sch-bg: var(--c-lime);       --sch-fg: var(--c-olive); --sch-accent: var(--c-lime-deep); }

/* --- Hero --- */
.scholarship-hero { position: relative; overflow: hidden; background: var(--sch-bg); color: var(--sch-fg); text-align: center; }
.scholarship-hero__tint { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.10)); pointer-events: none; }
.scholarship-hero > .container { position: relative; z-index: 1; padding-block: clamp(3rem, 6vw, 5.5rem); }
.scholarship-hero__eyebrow { font-size: var(--fs-100); letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--fw-semibold); margin: 0 0 var(--space-sm); opacity: 0.92; }
.scholarship-hero__eyebrow a { color: inherit; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.scholarship-hero__eyebrow a:hover { color: inherit; opacity: 0.78; }
.scholarship-hero__logo { display: block; max-height: 84px; width: auto; margin: 0 auto var(--space-md); }
.scholarship-hero__title { font-family: var(--font-display); color: inherit; font-size: clamp(2.2rem, 4.6vw, 3.75rem); line-height: 1.06; margin: 0 auto; max-width: 18ch; }
.scholarship-hero__kicker { font-family: var(--font-accent); font-size: var(--fs-450); margin: var(--space-sm) 0 0; }
.scholarship-facts { list-style: none; margin: var(--space-lg) auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 3vw, 2.75rem); max-width: 900px; }
.scholarship-fact { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.scholarship-fact__label { font-size: var(--fs-75); letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--fw-semibold); opacity: 0.8; }
.scholarship-fact__value { font-size: var(--fs-300); font-weight: var(--fw-semibold); line-height: 1.25; }
.scholarship-hero__actions { margin-top: var(--space-lg); }

/* --- Body: main prose + sticky "How to Apply" aside --- */
.scholarship-body { background: var(--c-cream); }
.scholarship-body__inner { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: clamp(2rem, 4.5vw, 4.5rem); padding-block: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.scholarship-block + .scholarship-block { margin-top: clamp(2rem, 4vw, 3rem); }
.scholarship-block__title { font-family: var(--font-display); color: var(--c-olive); font-size: var(--fs-600); line-height: 1.1; margin: 0 0 var(--space-sm); }
.scholarship-prose { color: var(--c-ink); font-size: var(--fs-300); line-height: 1.6; }
.scholarship-prose--sm { font-size: var(--fs-200); line-height: 1.5; }
.scholarship-prose p { margin: 0 0 0.85em; }
.scholarship-prose p:last-child { margin-bottom: 0; }
.scholarship-prose ul, .scholarship-prose ol { margin: 0 0 0.85em; padding-left: 1.25em; }
.scholarship-prose li { margin: 0 0 0.4em; padding-left: 0.2em; }
.scholarship-prose ul { list-style: none; padding-left: 0; }
.scholarship-prose ul li { position: relative; padding-left: 1.5em; }
.scholarship-prose ul li::before { content: ""; position: absolute; left: 0.1em; top: 0.62em; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--sch-accent, var(--c-orange)); }
.scholarship-prose a { color: var(--c-orange); text-decoration: underline; }

.scholarship-aside { position: sticky; top: clamp(90px, 12vw, 120px); }
.scholarship-apply { background: var(--c-white); border: var(--border); border-radius: 18px; padding: clamp(1.5rem, 2.4vw, 2rem); }
.scholarship-apply__title { font-family: var(--font-display); color: var(--c-olive); font-size: var(--fs-500); margin: 0 0 var(--space-sm); }
.scholarship-apply__row { margin: 0 0 var(--space-sm); font-size: var(--fs-300); color: var(--c-ink); }
.scholarship-apply__label { display: block; font-size: var(--fs-75); letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--c-olive-mid); margin-bottom: 0.15rem; }
.scholarship-apply__req { margin: var(--space-sm) 0; }
.scholarship-apply__btn { width: 100%; justify-content: center; margin-top: var(--space-sm); }
.scholarship-apply__contact, .scholarship-apply__ext { margin: var(--space-sm) 0 0; font-size: var(--fs-200); }
.scholarship-apply__contact a, .scholarship-apply__ext a { color: var(--c-orange); }

/* --- "Other Opportunities" footer cards --- */
.scholarship-more__title { font-family: var(--font-display); color: var(--c-olive); font-size: var(--fs-600); text-align: center; margin: 0 0 var(--space-lg); }
.scholarship-more__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); max-width: 900px; margin-inline: auto; }
.scholarship-more__card { display: flex; flex-direction: column; gap: 0.4rem; padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: 18px; color: var(--c-cream); text-decoration: none; transition: transform 0.28s ease, box-shadow 0.28s ease; }
.scholarship-more__card--orange { background: var(--c-orange); }
.scholarship-more__card--olive  { background: var(--c-olive); }
.scholarship-more__card--blue   { background: var(--c-blue);  color: var(--c-olive); }
.scholarship-more__card--lime   { background: var(--c-lime);  color: var(--c-olive); }
.scholarship-more__card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(40, 40, 40, 0.18); }
/* Keep each card's own text color on hover — the global a:hover (orange) is more
   specific than the modifier color and would make cream/olive labels unreadable. */
.scholarship-more__card:hover { color: var(--c-cream); }
.scholarship-more__card--blue:hover, .scholarship-more__card--lime:hover { color: var(--c-olive); }
.scholarship-more__name { font-family: var(--font-display); font-size: var(--fs-400); line-height: 1.1; }
.scholarship-more__date { font-size: var(--fs-200); opacity: 0.9; }
.scholarship-more__cta { margin-top: auto; font-size: var(--fs-100); letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--fw-semibold); }

/* --- Archive hub (/scholarships) --- */
.page-hero--scholarships { background: var(--c-olive); }
.page-hero--scholarships .page-hero__tint { background: var(--c-olive); opacity: 0.45; }
.scholarship-archive__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.25rem, 2.6vw, 2.25rem); max-width: 1100px; margin-inline: auto; }
.scholarship-tile { border-radius: 22px; overflow: hidden; transition: transform 0.28s ease, box-shadow 0.28s ease; }
.scholarship-tile--orange { background: var(--c-orange); --tile-fg: var(--c-cream); }
.scholarship-tile--olive  { background: var(--c-olive);  --tile-fg: var(--c-cream); }
.scholarship-tile--blue   { background: var(--c-blue);   --tile-fg: var(--c-olive); }
.scholarship-tile--lime   { background: var(--c-lime);   --tile-fg: var(--c-olive); }
.scholarship-tile__link { display: flex; flex-direction: column; gap: var(--space-sm); height: 100%; padding: clamp(1.5rem, 2.6vw, 2.25rem); color: var(--tile-fg); text-decoration: none; }
.scholarship-tile__name { font-family: var(--font-display); font-size: var(--fs-500); line-height: 1.08; margin: 0; }
.scholarship-tile__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--fs-200); opacity: 0.95; }
.scholarship-tile__cta { margin-top: auto; font-size: var(--fs-100); letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--fw-semibold); }
.scholarship-tile:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(40, 40, 40, 0.2); }
/* Preserve the tile's foreground on hover (global a:hover would repaint it orange). */
.scholarship-tile__link:hover { color: var(--tile-fg); }
.scholarship-archive__empty { text-align: center; color: var(--c-ink); font-size: var(--fs-400); }

@media (max-width: 900px) {
  .scholarship-body__inner { grid-template-columns: 1fr; }
  .scholarship-aside { position: static; }
}
@media (max-width: 600px) {
  .scholarship-facts { gap: 1.1rem 1.5rem; }
  .scholarship-fact { flex: 0 0 40%; align-items: center; }
}