@import url("bb-bricks-bridge.css?ver=4b7dd8371b4a");
/*
 * components.css — Bridge CSS for all 5th Place BB components
 * Single source of truth. Linked by bb-library.html, flow-article.html, flow-dispatch.html.
 *
 * What belongs here: bridge CSS only — rules that BB cannot set natively.
 *   mix-blend-mode, isolation, pseudo-elements, pill badge styling,
 *   CSS Grid on fl-col-group, max-width/padding on fl-row-content,
 *   float override (fl-col: float none), variant colour overrides.
 *
 * What does NOT belong here:
 *   Tokens (each page provides its own / imports design/tokens.css)
 *   Library shell CSS (nav, component frame, section headings)
 *   BB base layout reset (fl-row, fl-col-group, fl-col base declarations)
 *   Page-level CSS (flow control bars, wave overlays, page backgrounds)
 *
 * Selector pattern: .fp-[component] .fl-[bb-element] { }
 * Variant overrides: .fp-x.fp-x--variant .fl-module-y .fl-element
 *   (4-class specificity beats BB global 2-class selectors)
 *
 * status: signed-off
 * date: 2026-04-09
 */


/* ══════════════════════════════════════════════════════════════════
   GLOBAL BUTTON SYSTEM — applies to every BB button
   ══════════════════════════════════════════════════════════════════
   Per-instance colour/padding/border/radius are set via BB module settings.
   Typography stays in bridge CSS — BB's button typography field emits
   `font-size: 0.9rempx` (broken concatenation) on this BB version regardless
   of flat or nested format. Until that's fixed, bridge owns the typography.

   What BB can't natively express, bridge owns:
   - typography (broken in BB this version — see above)
   - min-height (44px tap target, WCAG 2.5.5)
   - focus-visible outline (BB has no focus-state field)
   - transition (BB writes `transition: none` in compiled CSS)
   - hover transform (BB has no transform field)

   Surface-context variants encode the researched hover behaviour delta:
   - fp-pill--on-dark: white pill on dark surface, weight 700, soft hover
   - fp-pill--on-light: accent pill on light surface, weight 600, lift hover
*/

.fl-button {
  font-family: var(--font-h);
  font-size: 0.9rem;
  min-height: 44px;
  transition: background-color 0.15s, color 0.15s, transform 0.15s;
}
.fl-button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
.fl-button-text { color: inherit; }

.fp-pill--on-dark .fl-button { font-weight: 700; }

.fp-pill--on-light .fl-button { font-weight: 600; }
.fp-pill--on-light .fl-button:hover { transform: translateY(-1px); }


/* ══════════════════════════════════════════════════════════════════
   CTA STRIP — fp-cta
   ══════════════════════════════════════════════════════════════════ */

.fp-cta .fl-row-content { max-width: var(--max-w); margin: 0 auto; padding: 4.5rem 2rem; }
.fp-cta .fl-col { float: none; width: 100%; }
.fp-cta .fl-col-content { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fp-cta .fl-module-content { margin: 0; }
.fp-cta .fl-button-wrap { display: flex; justify-content: center; }

@media (max-width: 768px) {
  .fp-cta .fl-row-content { padding: 2.5rem 1.25rem; }
}

/* Surface variants */
.fp-cta--light > .fl-row-content-wrap { background-color: #faf9f7; }
.fp-cta--dark  > .fl-row-content-wrap { background-color: #225560; }
.fp-cta--green > .fl-row-content-wrap { background-color: #0d6e40; }

/* Dark — 4-class specificity */
.fp-cta.fp-cta--dark .fl-module-heading .fl-heading { color: #ffffff; }
.fp-cta.fp-cta--dark .fl-module-rich-text .fl-rich-text p { color: rgba(255,255,255,0.65); }
.fp-cta.fp-cta--dark .fl-module-button .fl-button { background-color: #42f2f7; color: #1a2e25; }
.fp-cta.fp-cta--dark .fl-module-button .fl-button:hover { background-color: #2dd4d9; }
.fp-cta.fp-cta--dark .fl-module-button .fl-button:focus-visible { outline-color: #42f2f7; }

/* Green */
.fp-cta.fp-cta--green .fl-module-heading .fl-heading { color: #ffffff; }
.fp-cta.fp-cta--green .fl-module-rich-text .fl-rich-text p { color: rgba(255,255,255,0.85); }
.fp-cta.fp-cta--green .fl-module-button .fl-button { background-color: #ffffff; color: #0d6e40; }
.fp-cta.fp-cta--green .fl-module-button .fl-button:hover { background-color: #f0fdf4; }
.fp-cta.fp-cta--green .fl-module-button .fl-button:focus-visible { outline-color: #ffffff; }


/* ══════════════════════════════════════════════════════════════════
   TEXT + IMAGE — fp-ti
   ══════════════════════════════════════════════════════════════════ */

/* BB-NATIVE OWNS: row bg/padding/max-width, col widths, col2 frame
   (bg/border/radius/shadow/padding), all module margins, heading typography
   (except font-size clamp), body typography + colour, photo border-radius,
   button colours/padding/radius/border/background-transition (button_transition: enable).

   Bridge below is the residue — only what BB literally cannot express.
*/

/* Row width and vertical padding are BB-native: content_width: "fixed",
   max_content_width: "1100", max_content_width_unit: "px", padding_top: "80",
   padding_bottom: "80". Bridge owns ONLY col-group gap (no BB field). */

/* Col-group layout: CSS Grid handles the 4rem column gap. We tried "BB-native
   via column padding" on 2026-05-15, but that approach corrupts col-2 because
   col-2 is a white-card frame — putting the gap as col-2's padding-left makes
   the card extend 32px further left than spec and gives asymmetric inner
   padding (20/20/20/32 instead of 20 all round). Rule: when ANY column has bg
   or radius (card frame), column-gap must live OUTSIDE the column. Grid `gap`
   is the right tool. Companion: float reset + min-width 0 for grid cells. */
.fp-ti .fl-col-group { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.fp-ti .fl-col { float: none; min-width: 0; }

/* Eyebrow pill SHAPE: BB cannot pill-style a <span> inside a rich-text module */
.fp-ti .fl-module-rich-text:first-child .fl-rich-text p {
  display: inline-block;
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.28rem 0.85rem; border-radius: 9999px;
  margin-bottom: 1rem;
}
/* Eyebrow accent variants (driven by row class) */
.fp-ti.fp-ti--green .fl-module-rich-text:first-child .fl-rich-text p {
  color: #0d6e40; background: rgba(23,147,85,0.08); border: 1px solid rgba(23,147,85,0.18);
}
.fp-ti.fp-ti--cerulean .fl-module-rich-text:first-child .fl-rich-text p {
  color: #0070c4; background: rgba(0,166,251,0.07); border: 1px solid rgba(0,166,251,0.22);
}
.fp-ti.fp-ti--lav .fl-module-rich-text:first-child .fl-rich-text p {
  color: #7033b8; background: rgba(180,119,235,0.08); border: 1px solid rgba(180,119,235,0.2);
}

/* Photo fills its column (BB photo module doesn't auto-stretch) */
.fp-ti .fl-photo-img { width: 100%; display: block; }

/* Heading typography: BB has typography fields on the heading module, but
   on this BB version they require the nested `typography` object and BB
   throws a PHP fatal when that object is set via /patch. Bridge owns
   typography (font-family / weight / line-height / letter-spacing / size)
   until the API path supports the nested object reliably. BB-native owns
   colour and margin (those are flat-field settings — they render correctly). */
.fl-node-ti-r-h .fl-heading {
  font-family: var(--font-h);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

/* Photo border-radius: BB photo module's only radius path is the nested
   `border` field (same crash as col2 border via /patch). Bridge owns radius. */
.fl-node-ti-r-ph .fl-photo { border-radius: 8px; }

/* Body typography: rich-text module requires nested `typography` object for
   typography fields, and BB rejects nested objects via /patch (PHP fatal).
   Setting these via the BB GUI works; via API, bridge is the safe path. */
.fl-node-ti-r-t .fl-rich-text p {
  font-family: var(--font-b);
  font-size: 0.97rem;
  font-weight: 300;
  line-height: 1.82;
  color: #3d5f6b;
}

/* Col 2 frame: BB column has nested `border` field for radius + shadow.
   BB rejects this nested object via /patch (PHP fatal). bg-color + padding
   are BB-native (flat fields, set on the column). Bridge owns radius + shadow
   until the API path supports the nested border object reliably. Selector is
   positional (`:last-child`) — BB-generated column UUIDs are not predictable
   so we cannot bind via `.fl-node-<id>`. DOM order is unchanged by fp-ti-flip
   (only visual order via grid direction), so `:last-child` always = photo col. */
.fp-ti .fl-col:last-child > .fl-col-content {
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(34,85,96,0.14), 0 6px 18px rgba(34,85,96,0.08);
}

/* Flip: BB has no swap-column-order field. Grid-column reordering swaps the
   visual column order while DOM order is preserved (so `:last-child` still
   targets the photo column for the bridge frame). */
.fp-ti-flip .fl-col-group > .fl-col:nth-child(1) { grid-column: 2; }
.fp-ti-flip .fl-col-group > .fl-col:nth-child(2) { grid-column: 1; }


/* ══════════════════════════════════════════════════════════════════
   STATS STRIP — fp-stats
   ══════════════════════════════════════════════════════════════════ */

.fp-stats .fl-row-content { max-width: var(--max); margin: 0 auto; padding: 5rem 2rem; }
.fp-stats .fl-col-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.fp-stats .fl-col { float: none; width: 100%; }
.fp-stats .fl-col-content { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.fp-stats .fl-module-content { margin: 0; }
.fp-stats .fl-module-rich-text .fl-rich-text p { max-width: 140px; }

@media (max-width: 768px) {
  .fp-stats .fl-row-content { padding: 2.5rem 1.25rem; }
  .fp-stats .fl-col-group { grid-template-columns: repeat(2, 1fr); }
}

/* Surface variants */
.fp-stats--light > .fl-row-content-wrap { background-color: #f5f3ef; }
.fp-stats--dark  > .fl-row-content-wrap { background-color: #1a2e25; }
.fp-stats.fp-stats--dark .fl-module-heading .fl-heading { color: #ffffff; }
.fp-stats.fp-stats--dark .fl-module-rich-text .fl-rich-text p { color: rgba(255,255,255,0.6); }
.fp-stats.fp-stats--dark .fp-stats-stars .fl-rich-text p { color: #fdca40; }


/* ══════════════════════════════════════════════════════════════════
   EDITORIAL TEXT — fp-et
   ══════════════════════════════════════════════════════════════════ */

.fp-et .fl-row-content { max-width: 680px; margin: 0 auto; padding: 5rem 2rem; }
.fp-et .fl-col { float: none; width: 100%; }
.fp-et .fl-module-content { margin: 0; }

/* Eyebrow pill — base */
.fp-et .fl-module-rich-text:first-child .fl-rich-text p {
  display: inline-block;
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.28rem 0.85rem; border-radius: 9999px;
  margin-bottom: 1.5rem;
}
.fp-et--green .fl-module-rich-text:first-child .fl-rich-text p {
  color: #0d6e40; background: rgba(23,147,85,0.08); border: 1px solid rgba(23,147,85,0.18);
}
.fp-et--cerulean .fl-module-rich-text:first-child .fl-rich-text p {
  color: #0070c4; background: rgba(0,166,251,0.07); border: 1px solid rgba(0,166,251,0.22);
}
.fp-et--lav .fl-module-rich-text:first-child .fl-rich-text p {
  color: #7033b8; background: rgba(180,119,235,0.08); border: 1px solid rgba(180,119,235,0.2);
}

/* Blockquote */
.fp-et .fl-rich-text blockquote {
  margin: 2.5rem 0;
  padding: 1.25rem 0 1.25rem 1.75rem;
  border-left: 3px solid;
}
.fp-et .fl-rich-text blockquote p {
  font-family: 'Lora', Georgia, serif; font-style: italic;
  font-size: 1.18rem; line-height: 1.68; color: #225560; margin: 0;
}
.fp-et--green .fl-rich-text blockquote { border-color: #179355; }
.fp-et--cerulean .fl-rich-text blockquote { border-color: #00a6fb; }
.fp-et--lav .fl-rich-text blockquote { border-color: #b477eb; }

/* Lists */
.fp-et .fl-rich-text ul,
.fp-et .fl-rich-text ol {
  margin: 0 0 2rem; padding-left: 1.5rem;
  font-family: 'Open Sans', sans-serif; font-size: 1rem; line-height: 1.82; color: #3d5f6b;
}
.fp-et .fl-rich-text li { margin-bottom: 0.5rem; }
.fp-et .fl-rich-text li:last-child { margin-bottom: 0; }
.fp-et--green .fl-rich-text ul li::marker { color: #179355; }
.fp-et--green .fl-rich-text ol li::marker { color: #179355; font-weight: 600; }
.fp-et--cerulean .fl-rich-text ul li::marker { color: #00a6fb; }
.fp-et--cerulean .fl-rich-text ol li::marker { color: #00a6fb; font-weight: 600; }
.fp-et--lav .fl-rich-text ul li::marker { color: #b477eb; }
.fp-et--lav .fl-rich-text ol li::marker { color: #b477eb; font-weight: 600; }

@media (max-width: 768px) {
  .fp-et .fl-row-content { padding: 3rem 1.25rem; }
}


/* ══════════════════════════════════════════════════════════════════
   FRAMEWORK EXPLAINER — fp-fw
   ══════════════════════════════════════════════════════════════════ */

.fp-fw .fl-row-content { max-width: var(--max); margin: 0 auto; padding: 5rem 2rem; }
.fp-fw .fl-col { float: none; width: 100%; }
.fp-fw .fl-module-content { margin: 0; }

/* Eyebrow pill */
.fp-fw .fl-module-rich-text:first-child .fl-rich-text p {
  display: inline-block;
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.28rem 0.85rem; border-radius: 9999px;
  margin-bottom: 1.5rem;
}
.fp-fw--green .fl-module-rich-text:first-child .fl-rich-text p {
  color: #0d6e40; background: rgba(23,147,85,0.08); border: 1px solid rgba(23,147,85,0.18);
}
.fp-fw--cerulean .fl-module-rich-text:first-child .fl-rich-text p {
  color: #0070c4; background: rgba(0,166,251,0.07); border: 1px solid rgba(0,166,251,0.22);
}
.fp-fw--lav .fl-module-rich-text:first-child .fl-rich-text p {
  color: #7033b8; background: rgba(180,119,235,0.08); border: 1px solid rgba(180,119,235,0.2);
}

/* Steps list */
.fp-fw .fl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2.5rem; }
.fp-fw .fl-list-4 { grid-template-columns: repeat(4, 1fr); }
.fp-fw .fl-list-3 { grid-template-columns: repeat(3, 1fr); }
.fp-fw .fl-list-item { counter-increment: fw-step; display: flex; }
.fp-fw .fl-list-item-wrapper {
  flex: 1; position: relative;
  background: #ffffff; border-radius: 10px;
  padding: 1.75rem 1.5rem; border-top: 3px solid;
}
.fp-fw--green .fl-list-item-wrapper { border-color: #179355; }
.fp-fw--cerulean .fl-list-item-wrapper { border-color: #00a6fb; }
.fp-fw--lav .fl-list-item-wrapper { border-color: #b477eb; }

/* Step number */
.fp-fw .fl-list-item-wrapper::before {
  content: counter(fw-step, decimal-leading-zero);
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.05em; display: block; margin-bottom: 0.75rem;
}
.fp-fw--green .fl-list-item-wrapper::before { color: #179355; }
.fp-fw--cerulean .fl-list-item-wrapper::before { color: #00a6fb; }
.fp-fw--lav .fl-list-item-wrapper::before { color: #b477eb; }

.fp-fw .fl-list-item-heading { font-family: 'Outfit', sans-serif; font-size: 1.33rem; font-weight: 700; color: #225560; margin: 0 0 0.65rem; letter-spacing: -0.01em; line-height: 1.3; }
.fp-fw .fl-list-item-content p { font-family: 'Open Sans', sans-serif; font-size: 0.92rem; font-weight: 400; line-height: 1.7; color: #4e6879; margin: 0; }

/* CTA */
.fp-fw .fl-module-button { margin-top: 2.5rem; }
.fp-fw .fl-button-wrap { display: flex; justify-content: center; }

/* Surface + button per variant */
.fp-fw--green  > .fl-row-content-wrap { background-color: #f5f3ef; }
.fp-fw--cerulean > .fl-row-content-wrap { background-color: #faf9f7; }
.fp-fw--lav    > .fl-row-content-wrap { background-color: #f5f3ef; }
.fp-fw--green .fl-module-button .fl-button { background-color: #0d6e40; color: #ffffff; font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 600; padding: 0.75rem 2rem; border-radius: 9999px; transition: background-color 0.15s, transform 0.15s; }
.fp-fw--green .fl-module-button .fl-button:hover { background-color: #0a5a34; transform: translateY(-1px); }
.fp-fw--green .fl-module-button .fl-button:focus-visible { outline: 3px solid #0d6e40; outline-offset: 3px; }
.fp-fw--cerulean .fl-module-button .fl-button { background-color: #0070c4; color: #ffffff; font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 600; padding: 0.75rem 2rem; border-radius: 9999px; transition: background-color 0.15s, transform 0.15s; }
.fp-fw--cerulean .fl-module-button .fl-button:hover { background-color: #005a9e; transform: translateY(-1px); }
.fp-fw--cerulean .fl-module-button .fl-button:focus-visible { outline: 3px solid #0070c4; outline-offset: 3px; }
.fp-fw--lav .fl-module-button .fl-button { background-color: #7033b8; color: #ffffff; font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 600; padding: 0.75rem 2rem; border-radius: 9999px; transition: background-color 0.15s, transform 0.15s; }
.fp-fw--lav .fl-module-button .fl-button:hover { background-color: #5e28a0; transform: translateY(-1px); }
.fp-fw--lav .fl-module-button .fl-button:focus-visible { outline: 3px solid #7033b8; outline-offset: 3px; }

@media (max-width: 768px) {
  .fp-fw .fl-row-content { padding: 3rem 1.25rem; }
  .fp-fw .fl-list { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════
   COURSE OUTLINE — fp-co
   ══════════════════════════════════════════════════════════════════ */

.fp-co .fl-row-content { max-width: var(--max); margin: 0 auto; padding: 5rem 2rem; }
.fp-co .fl-col-group { display: grid; grid-template-columns: 70fr 30fr; gap: 3rem; align-items: start; }
.fp-co .fl-col { float: none; width: 100%; min-width: 0; }
.fp-co .fl-module-content { margin: 0; }

/* Eyebrow pill */
.fp-co .fp-co-eyebrow .fl-rich-text p {
  display: inline-block;
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.28rem 0.85rem; border-radius: 9999px; margin-bottom: 1.5rem;
}
.fp-co--green .fp-co-eyebrow .fl-rich-text p {
  color: #0d6e40; background: rgba(23,147,85,0.08); border: 1px solid rgba(23,147,85,0.18);
}
.fp-co--cerulean .fp-co-eyebrow .fl-rich-text p {
  color: #0070c4; background: rgba(0,166,251,0.07); border: 1px solid rgba(0,166,251,0.22);
}
.fp-co--lav .fp-co-eyebrow .fl-rich-text p {
  color: #7033b8; background: rgba(180,119,235,0.08); border: 1px solid rgba(180,119,235,0.2);
}

.fp-co .fp-co-lead .fl-rich-text p { margin-bottom: 2rem; }

/* Outcomes list */
.fp-co .fp-co-outcomes .fl-rich-text ul {
  padding-left: 1.25rem; margin: 0 0 1.5rem;
  font-family: 'Open Sans', sans-serif; font-size: 0.95rem; line-height: 1.75; color: #3d5f6b;
}
.fp-co .fp-co-outcomes .fl-rich-text ul li { margin-bottom: 0.4rem; }
.fp-co--green .fp-co-outcomes .fl-rich-text ul li::marker { color: #0d6e40; }
.fp-co--cerulean .fp-co-outcomes .fl-rich-text ul li::marker { color: #0070c4; }
.fp-co--lav .fp-co-outcomes .fl-rich-text ul li::marker { color: #7033b8; }

/* Metadata strip */
.fp-co .fp-co-meta .fl-rich-text p {
  font-family: 'Open Sans', sans-serif; font-size: 0.84rem; line-height: 2;
  color: #4e6879; border-top: 1px solid #e0dbd4; padding-top: 1rem; margin-top: 0.25rem;
}

/* CTA button */
.fp-co .fp-co-cta .fl-button-wrap { display: block; margin-top: 1.25rem; }
.fp-co .fp-co-cta .fl-button {
  display: flex; justify-content: center; width: 100%;
  font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 600;
  color: #ffffff; border-radius: 9999px;
  padding: 0.75rem 2rem; transition: background-color 0.15s;
}
.fp-co--green   .fp-co-cta .fl-button { background-color: #0d6e40; }
.fp-co--green   .fp-co-cta .fl-button:hover { background-color: #0a5a34; }
.fp-co--green   .fp-co-cta .fl-button:focus-visible { outline: 3px solid #0d6e40; outline-offset: 3px; }
.fp-co--cerulean .fp-co-cta .fl-button { background-color: #0070c4; }
.fp-co--cerulean .fp-co-cta .fl-button:hover { background-color: #005a9e; }
.fp-co--cerulean .fp-co-cta .fl-button:focus-visible { outline: 3px solid #0070c4; outline-offset: 3px; }
.fp-co--lav     .fp-co-cta .fl-button { background-color: #7033b8; }
.fp-co--lav     .fp-co-cta .fl-button:hover { background-color: #5e28a0; }
.fp-co--lav     .fp-co-cta .fl-button:focus-visible { outline: 3px solid #7033b8; outline-offset: 3px; }

@media (max-width: 768px) {
  .fp-co .fl-row-content { padding: 3rem 1.25rem; }
  .fp-co .fl-col-group { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════
   AUTHOR STRIP — fp-ab
   isolation: isolate on the outer fl-row creates the stacking context.
   BB sets row bg as inline style on .fl-row-content-wrap — that
   background acts as the blend backdrop within the isolated context.
   Confirmed production-safe. See design/specs/author-strip-spec.md.
   ══════════════════════════════════════════════════════════════════ */

.fp-ab { isolation: isolate; }
.fp-ab > .fl-row-content-wrap { background-color: #faf9f7; }
.fp-ab .fl-row-content { max-width: var(--max); margin: 0 auto; padding: 3rem 2rem; }
.fp-ab .fl-col-group { display: grid; grid-template-columns: 140px 1fr; gap: 2.5rem; align-items: center; }
.fp-ab .fl-col { float: none; width: 100%; }
.fp-ab .fl-module-content { margin: 0; }

/* Photo — mix-blend-mode only. Width is a BB module setting:
   set via BB module settings (inline style on <img>), NOT bridge CSS.
   Photo is 1024×1024 square watercolour — no aspect-ratio clipping needed. */
.fp-ab .fl-photo-img {
  display: block;
  mix-blend-mode: multiply;
}

/* Top border — accent colour per variant */
.fp-ab--green    { border-top: 3px solid #179355; }
.fp-ab--cerulean { border-top: 3px solid #00a6fb; }
.fp-ab--lav      { border-top: 3px solid #b477eb; }
.fp-ab--yellow   { border-top: 3px solid #fdca40; }
.fp-ab--slate    { border-top: 3px solid #225560; }

/* Eyebrow pill — base */
.fp-ab .fp-ab-eyebrow .fl-rich-text p {
  display: inline-block;
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.25rem 0.8rem; border-radius: 9999px; margin-bottom: 0.75rem;
}

/* Eyebrow pill — variants */
.fp-ab.fp-ab--green .fp-ab-eyebrow .fl-rich-text p {
  color: #0d6e40; background: rgba(23,147,85,0.08); border: 1px solid rgba(23,147,85,0.18);
}
.fp-ab.fp-ab--cerulean .fp-ab-eyebrow .fl-rich-text p {
  color: #0070c4; background: rgba(0,166,251,0.07); border: 1px solid rgba(0,166,251,0.22);
}
.fp-ab.fp-ab--lav .fp-ab-eyebrow .fl-rich-text p {
  color: #7033b8; background: rgba(180,119,235,0.08); border: 1px solid rgba(180,119,235,0.2);
}
.fp-ab.fp-ab--yellow .fp-ab-eyebrow .fl-rich-text p {
  color: #7a5800; background: rgba(253,202,64,0.1); border: 1px solid rgba(253,202,64,0.3);
}
.fp-ab.fp-ab--slate .fp-ab-eyebrow .fl-rich-text p {
  color: #225560; background: rgba(34,85,96,0.06); border: 1px solid rgba(34,85,96,0.15);
}

/* Credentials */
.fp-ab .fp-ab-credentials .fl-rich-text p {
  font-family: 'Open Sans', sans-serif; font-size: 0.84rem; font-style: italic; color: #4e6879;
}

/* Bio paragraphs */
.fp-ab .fp-ab-bio .fl-rich-text p {
  font-family: 'Open Sans', sans-serif; font-size: 0.97rem; line-height: 1.75; color: #3d5f6b; margin-bottom: 0.75rem;
}
.fp-ab .fp-ab-bio .fl-rich-text p:last-child { margin-bottom: 0; }

/* Read-more link — gap widens on hover */
.fp-ab .fp-ab-readmore .fl-rich-text a {
  font-family: 'Open Sans', sans-serif; font-size: 0.9rem; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem;
  transition: color 0.15s, gap 0.15s;
}
.fp-ab.fp-ab--green    .fp-ab-readmore .fl-rich-text a { color: #179355; }
.fp-ab.fp-ab--green    .fp-ab-readmore .fl-rich-text a:hover { color: #0d6e40; gap: 0.5rem; }
.fp-ab.fp-ab--cerulean .fp-ab-readmore .fl-rich-text a { color: #0070c4; }
.fp-ab.fp-ab--cerulean .fp-ab-readmore .fl-rich-text a:hover { color: #005a9e; gap: 0.5rem; }
.fp-ab.fp-ab--lav      .fp-ab-readmore .fl-rich-text a { color: #7033b8; }
.fp-ab.fp-ab--lav      .fp-ab-readmore .fl-rich-text a:hover { color: #5e28a0; gap: 0.5rem; }
.fp-ab.fp-ab--yellow   .fp-ab-readmore .fl-rich-text a { color: #7a5800; }
.fp-ab.fp-ab--yellow   .fp-ab-readmore .fl-rich-text a:hover { color: #7a5800; gap: 0.5rem; }
.fp-ab.fp-ab--slate    .fp-ab-readmore .fl-rich-text a { color: #225560; }
.fp-ab.fp-ab--slate    .fp-ab-readmore .fl-rich-text a:hover { color: #1a3f4a; gap: 0.5rem; }

/* ── Co-author modifier ──
   Two flat fl-module-photo siblings inside the photo column.
   fp-ab-photo-single: the default single photo (hidden when --coauthor).
   fp-ab-photo-coauthor: the second author's photo (hidden by default).
   CSS flex on .fl-col-content makes the two module siblings sit side-by-side.
   No wrapper div — BB renders modules as flat siblings inside fl-col-content. */
.fp-ab--coauthor .fp-ab-photo-single { display: none; }
.fp-ab--coauthor .fp-ab-photo-coauthor { display: flex; gap: 8px; align-items: flex-start; }
.fp-ab--coauthor .fl-col-group { align-items: start; }
.fp-ab:not(.fp-ab--coauthor) .fp-ab-photo-coauthor { display: none; }
.fp-ab--coauthor .fl-photo-img { width: 72px; }

@media (max-width: 768px) {
  .fp-ab .fl-row-content { padding: 2.5rem 1.25rem; }
  .fp-ab .fl-col-group { grid-template-columns: 1fr; gap: 1.5rem; }
  .fp-ab--coauthor .fl-photo-img { width: 64px; }
}


/* ══════════════════════════════════════════════════════════════════
   ARTICLE HERO — fp-ah
   ══════════════════════════════════════════════════════════════════ */

.fp-ah .fl-row-content { max-width: var(--max); margin: 0 auto; padding: 4rem 2rem 3rem; }
.fp-ah .fl-col { float: none; width: 100%; }
.fp-ah .fl-module-content { margin: 0; }

/* Hero text block — constrained to 720px, left-aligned */
.fp-ah .fl-col:first-child .fl-col-content { max-width: 720px; }

/* Category eyebrow — pill */
.fp-ah .ah-category-module .fl-rich-text a {
  display: inline-block;
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.28rem 0.85rem; border-radius: 9999px;
  text-decoration: none; transition: background 0.15s;
}

/* Eyebrow pill — colour variants */
.fp-ah.fp-ah--green .ah-category-module .fl-rich-text a {
  color: #0d6e40; background: rgba(23,147,85,0.08); border: 1px solid rgba(23,147,85,0.18);
}
.fp-ah.fp-ah--green .ah-category-module .fl-rich-text a:hover { background: rgba(23,147,85,0.14); }
.fp-ah.fp-ah--yellow .ah-category-module .fl-rich-text a {
  color: #7a5800; background: rgba(253,202,64,0.1); border: 1px solid rgba(253,202,64,0.3);
}
.fp-ah.fp-ah--yellow .ah-category-module .fl-rich-text a:hover { background: rgba(253,202,64,0.18); }
.fp-ah.fp-ah--lav .ah-category-module .fl-rich-text a {
  color: #7033b8; background: rgba(180,119,235,0.08); border: 1px solid rgba(180,119,235,0.2);
}
.fp-ah.fp-ah--lav .ah-category-module .fl-rich-text a:hover { background: rgba(180,119,235,0.14); }
.fp-ah.fp-ah--cerulean .ah-category-module .fl-rich-text a {
  color: #0070c4; background: rgba(0,166,251,0.07); border: 1px solid rgba(0,166,251,0.22);
}
.fp-ah.fp-ah--cerulean .ah-category-module .fl-rich-text a:hover { background: rgba(0,166,251,0.14); }
.fp-ah.fp-ah--slate .ah-category-module .fl-rich-text a {
  color: #225560; background: rgba(34,85,96,0.06); border: 1px solid rgba(34,85,96,0.15);
}
.fp-ah.fp-ah--slate .ah-category-module .fl-rich-text a:hover { background: rgba(34,85,96,0.1); }

/* Headline */
.fp-ah .fl-module-heading .fl-heading {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.15;
  letter-spacing: -0.02em; color: #225560;
  margin-top: 1rem;
}

/* Deck */
.fp-ah .ah-deck-module .fl-rich-text p {
  font-family: 'Open Sans', sans-serif; font-weight: 300;
  font-size: 1.05rem; line-height: 1.75; color: #4e6879;
  margin-top: 1rem;
}

/* Metadata cluster */
.fp-ah .ah-meta-module .fl-rich-text p {
  font-family: 'Outfit', sans-serif; font-weight: 500;
  font-size: var(--text-sm, 0.84rem); color: #4e6879;
  border-top: 1px solid #e0dbd4; padding-top: 1rem; margin-top: 1.75rem;
  display: flex; align-items: center; gap: 0;
}
.fp-ah .ah-meta-module .fl-rich-text a {
  text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.5rem;
}

/* Author link — colour follows practitioner accent */
.fp-ah.fp-ah--green   .ah-meta-module .fl-rich-text a { color: #0d6e40; }
.fp-ah.fp-ah--green   .ah-meta-module .fl-rich-text a:hover { color: #0d5c35; }
.fp-ah.fp-ah--yellow  .ah-meta-module .fl-rich-text a { color: #7a5800; }
.fp-ah.fp-ah--yellow  .ah-meta-module .fl-rich-text a:hover { color: #7a5800; }
.fp-ah.fp-ah--lav     .ah-meta-module .fl-rich-text a { color: #7033b8; }
.fp-ah.fp-ah--lav     .ah-meta-module .fl-rich-text a:hover { color: #5e28a0; }
.fp-ah.fp-ah--cerulean .ah-meta-module .fl-rich-text a { color: #0070c4; }
.fp-ah.fp-ah--cerulean .ah-meta-module .fl-rich-text a:hover { color: #005a9e; }
.fp-ah.fp-ah--slate   .ah-meta-module .fl-rich-text a { color: #225560; }
.fp-ah.fp-ah--slate   .ah-meta-module .fl-rich-text a:hover { color: #1a3f4a; }

.fp-ah .ah-meta-module .fl-rich-text .ah-sep { margin: 0 0.4rem; opacity: 0.4; }

/* Author avatar — small circle prefix */
.fp-ah .ah-meta-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}

/* Treatment A: Title-only (default) — hide photo module and image column */
.fp-ah .fl-node-ah-photo { display: none; }
.fp-ah .fl-col:nth-child(2) { display: none; }

/* Treatment B: Image below metadata */
.fp-ah.fp-ah--img-below .fl-node-ah-photo { display: block; margin-top: 2.5rem; }
.fp-ah.fp-ah--img-below .fl-node-ah-photo .fl-photo-content { border-radius: 12px; overflow: hidden; }
.fp-ah.fp-ah--img-below .fl-node-ah-photo .fl-photo-img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 10; object-fit: cover;
}

/* Treatment C: Image alongside (60/40 grid) */
.fp-ah.fp-ah--img-side .fl-row-content { max-width: var(--max); }
.fp-ah.fp-ah--img-side .fl-col-group {
  display: grid; grid-template-columns: 57fr 43fr;
  gap: 3rem; align-items: center; min-height: 420px;
}
.fp-ah.fp-ah--img-side .fl-col:first-child .fl-col-content { max-width: none; }
.fp-ah.fp-ah--img-side .fl-col:nth-child(2) { display: block; }
.fp-ah.fp-ah--img-side .fl-col:nth-child(2) .fl-photo {
  position: relative; width: 100%; min-height: 380px;
}
.fp-ah.fp-ah--img-side .fl-col:nth-child(2) .fl-photo-img {
  width: 100%; height: 100%; min-height: 380px;
  object-fit: cover; object-position: center top; display: block;
}
/* Fade edges on side image */
.fp-ah.fp-ah--img-side .fl-col:nth-child(2) .fl-photo-content { position: relative; }
.fp-ah.fp-ah--img-side .fl-col:nth-child(2) .fl-photo-content::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, #faf9f7 0%, rgba(250,249,247,0.45) 22%, transparent 50%),
    linear-gradient(to left,  #faf9f7 0%, rgba(250,249,247,0.55) 12%, transparent 40%),
    linear-gradient(to top,   #faf9f7 0%, rgba(250,249,247,0.3) 12%, transparent 38%),
    linear-gradient(to bottom,#faf9f7 0%, transparent 25%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .fp-ah .fl-row-content { padding: 2.5rem 1.25rem 2rem; }
  .fp-ah.fp-ah--img-side .fl-col-group { grid-template-columns: 1fr; }
  .fp-ah.fp-ah--img-side .fl-col:nth-child(2) .fl-photo-img { min-height: 240px; }
}


/* ══════════════════════════════════════════════════════════════════
   ARTICLE BODY — fp-ah-body
   ══════════════════════════════════════════════════════════════════ */

.fp-ah-body .fl-row-content { max-width: 640px; margin: 0 auto; padding: 3rem 2rem 4rem; }
.fp-ah-body .fl-col { float: none; width: 100%; }
.fp-ah-body .fl-module-content { margin: 0; }

/* Stack spacing */
.fp-ah-body .fl-col-content > .fl-module + .fl-module { margin-top: 1.5em; }

/* Heading spacing */
.fp-ah-body .fl-module-heading + .fl-module { margin-top: 0.75em; }
.fp-ah-body .fl-module + .fl-module-heading { margin-top: 3em; }
.fp-ah-body .fl-module-heading.ah-h3 + .fl-module { margin-top: 0.5em; }
.fp-ah-body .fl-module + .fl-module-heading.ah-h3 { margin-top: 2.5em; }

/* Body text */
.fp-ah-body .fl-module-rich-text .fl-rich-text p {
  font-family: 'Open Sans', sans-serif; font-size: 1rem; font-weight: 400;
  line-height: 1.7; color: #3d5f6b; margin-bottom: 0;
}
.fp-ah-body .fl-module-rich-text .fl-rich-text p + p { margin-top: 1.5em; }

/* Inline links — cerulean (editorial link colour, unchanged regardless of author accent) */
.fp-ah-body .fl-rich-text a {
  color: #005f8e; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.15em;
  transition: color 0.15s;
}
.fp-ah-body .fl-rich-text a:hover { color: #005f8e; }

/* Standfirst / lead — border follows author accent */
.fp-ah-body .ah-lead .fl-rich-text p {
  font-size: 1.1rem; line-height: 1.75; padding-left: 1.25rem;
}
.fp-ah-body.fp-ahb--green   .ah-lead .fl-rich-text p { border-left: 3px solid #179355; }
.fp-ah-body.fp-ahb--yellow  .ah-lead .fl-rich-text p { border-left: 3px solid #fdca40; }
.fp-ah-body.fp-ahb--lav     .ah-lead .fl-rich-text p { border-left: 3px solid #b477eb; }
.fp-ah-body.fp-ahb--cerulean .ah-lead .fl-rich-text p { border-left: 3px solid #00a6fb; }
.fp-ah-body.fp-ahb--slate   .ah-lead .fl-rich-text p { border-left: 3px solid #225560; }

/* H2 */
.fp-ah-body .fl-module-heading .fl-heading {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 2rem; line-height: 1.3; letter-spacing: -0.02em; color: #225560;
}
/* H3 */
.fp-ah-body .ah-h3 .fl-heading { font-size: 1.33rem; letter-spacing: -0.01em; }

/* Quote */
.fp-ah-body .ah-quote .fl-rich-text blockquote {
  margin: 0; padding: 0 0 0 1.75rem;
  border-left: 3px solid #00a6fb;
}
.fp-ah-body .ah-quote .fl-rich-text blockquote p {
  font-family: 'Lora', Georgia, serif; font-style: italic;
  font-size: 1.15rem; line-height: 1.6; color: #225560;
}
.fp-ah-body .ah-quote .fl-rich-text cite {
  display: block; margin-top: 0.5rem;
  font-family: 'Open Sans', sans-serif; font-style: normal;
  font-size: 0.84rem; color: #4e6879;
}

/* Key takeaway box */
.fp-ah-body .ah-takeaway .fl-rich-text {
  background: #ddf1fc; border-left: 3px solid #00a6fb;
  border-radius: 0 10px 10px 0; padding: 1.25rem 1.5rem;
}
.fp-ah-body .ah-takeaway .fl-rich-text .ah-takeaway-label {
  display: block; font-family: 'Outfit', sans-serif; font-size: 0.72rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: #0070c4; margin-bottom: 0.5rem;
}
.fp-ah-body .ah-takeaway .fl-rich-text p { font-size: 0.84rem; }

/* Section separator — cerulean dots */
.fp-ah-body .ah-sep .fl-rich-text p {
  display: flex; justify-content: center; align-items: center;
  gap: 0.4rem; padding: 1em 0; margin: 0;
}
.fp-ah-body .ah-sep .fl-rich-text span {
  display: block; width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,112,196,0.35);
}

/* Lists — cerulean markers */
.fp-ah-body .fl-rich-text ul,
.fp-ah-body .fl-rich-text ol {
  padding-left: 1.5rem; margin: 0;
  font-family: 'Open Sans', sans-serif; font-size: 1rem;
  line-height: 1.7; color: #3d5f6b;
}
.fp-ah-body .fl-rich-text li { margin-bottom: 0.5em; }
.fp-ah-body .fl-rich-text ul li::marker { color: #00a6fb; }
.fp-ah-body .fl-rich-text ol li::marker { color: #00a6fb; font-weight: 600; }

/* Image */
.fp-ah-body .fl-module-photo .fl-photo-content { border-radius: 10px; overflow: hidden; }
.fp-ah-body .fl-module-photo .fl-photo-img { width: 100%; display: block; }
.fp-ah-body .fl-module-photo .fl-photo-caption {
  font-family: 'Open Sans', sans-serif; font-size: 0.72rem;
  color: #4e6879; margin-top: 0.5rem;
}
.fp-ah-body .fl-module-photo + .fl-module { margin-top: 2em; }
.fp-ah-body .fl-module + .fl-module-photo { margin-top: 2em; }

@media (max-width: 768px) {
  .fp-ah-body .fl-row-content { padding: 2rem 1.25rem 3rem; }
}


/* ══════════════════════════════════════════════════════════════════
   DISPATCH HERO — fp-dh
   ══════════════════════════════════════════════════════════════════ */

.fp-dh .fl-row-content { max-width: var(--max); margin: 0 auto; padding: 3.5rem 2rem 3rem; }
.fp-dh .fl-col { float: none; width: 100%; }
.fp-dh .fl-module-content { margin: 0; }

/* Text block — 720px, centred within 1100px zone, content left-aligned */
.fp-dh .fl-col-content { max-width: 720px; margin: 0 auto; text-align: left; }

/* Eyebrow — cerulean pill */
.fp-dh .dh-eyebrow-module .fl-rich-text a {
  display: inline-block;
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.28rem 0.85rem; border-radius: 9999px;
  color: #0070c4; background: rgba(0,166,251,0.07); border: 1px solid rgba(0,166,251,0.22);
  text-decoration: none; transition: background 0.15s;
  margin: 0 0 1rem;
}
.fp-dh .dh-eyebrow-module .fl-rich-text a:hover { background: rgba(0,166,251,0.14); }

/* Metadata line */
.fp-dh .dh-meta-module .fl-rich-text p {
  font-family: 'Outfit', sans-serif; font-size: var(--text-sm, 0.84rem); font-weight: 400;
  color: #4e6879; margin: 0 0 1.25rem;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.fp-dh .dh-meta-module .fl-rich-text .dh-meta-dot { opacity: 0.4; font-size: 0.6rem; line-height: 1; }

/* Headline */
.fp-dh .fl-module-heading .fl-heading {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: clamp(1.75rem, 2.5vw, 2.25rem); line-height: 1.2;
  letter-spacing: -0.02em; color: #225560; margin: 0 0 1rem;
}

/* Deck */
.fp-dh .dh-deck-module .fl-rich-text p {
  font-family: 'Open Sans', sans-serif; font-weight: 300;
  font-size: 1rem; line-height: 1.75; color: #4e6879; margin: 0 0 1.75rem;
}

/* Author cluster */
.fp-dh .dh-authors-module .fl-rich-text p {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: 'Outfit', sans-serif; font-size: var(--text-sm, 0.84rem); font-weight: 500;
  color: #3d5f6b; margin: 0 0 2rem; flex-wrap: wrap;
}
.fp-dh .dh-authors-module .fl-rich-text .dh-avatar-wrap {
  display: flex; align-items: center; flex-shrink: 0;
}
.fp-dh .dh-authors-module .fl-rich-text .dh-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 2px solid #faf9f7; flex-shrink: 0;
}
.fp-dh .dh-authors-module .fl-rich-text .dh-avatar:nth-child(2) { margin-left: -10px; }
.fp-dh .dh-authors-module .fl-rich-text a { color: #0070c4; text-decoration: none; }
.fp-dh .dh-authors-module .fl-rich-text a:hover { color: #005a9e; }
.fp-dh .dh-authors-module .fl-rich-text .dh-amp { color: #4e6879; margin: 0 0.1rem; }

/* Featured image — 16:10 */
.fp-dh .dh-image-module .fl-photo-content { border-radius: 10px; overflow: hidden; }
.fp-dh .dh-image-module .fl-photo-img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 10; object-fit: cover;
}

@media (max-width: 820px) {
  .fp-dh .fl-row-content { padding: 3.5rem 1.25rem 3rem; }
}
@media (max-width: 600px) {
  .fp-dh .fl-row-content { padding: 2.5rem 1.25rem 2rem; }
}


/* ══════════════════════════════════════════════════════════════════
   DISPATCH BODY — fp-dh-body
   ══════════════════════════════════════════════════════════════════ */

.fp-dh-body .fl-row-content { max-width: 660px; margin: 0 auto; padding: 3rem 2rem 5rem; }
.fp-dh-body .fl-col { float: none; width: 100%; }
.fp-dh-body .fl-module-content { margin: 0; }

/* Stack spacing */
.fp-dh-body .fl-col-content > .fl-module + .fl-module { margin-top: 1.5em; }

/* Heading spacing */
.fp-dh-body .fl-module + .fl-module-heading { margin-top: 3em; }
.fp-dh-body .fl-module-heading + .fl-module { margin-top: 0.75em; }

/* Body text */
.fp-dh-body .fl-module-rich-text .fl-rich-text p {
  font-family: 'Open Sans', sans-serif; font-size: 1rem; font-weight: 400;
  line-height: 1.75; color: #3d5f6b; margin-bottom: 0;
}
.fp-dh-body .fl-module-rich-text .fl-rich-text p + p { margin-top: 1.5em; }

/* Inline links */
.fp-dh-body .fl-rich-text a {
  color: #005f8e; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.15em;
  transition: color 0.15s;
}
.fp-dh-body .fl-rich-text a:hover { color: #005f8e; }

/* H2 section headings */
.fp-dh-body .fl-module-heading .fl-heading {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 1.33rem; line-height: 1.3; letter-spacing: -0.01em; color: #225560;
}

/* Section divider — three cerulean dots */
.fp-dh-body .dh-sep .fl-rich-text p {
  display: flex; justify-content: center; align-items: center;
  gap: 0.4rem; padding: 1em 0; margin: 0;
}
.fp-dh-body .dh-sep .fl-rich-text span {
  display: block; width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,112,196,0.35);
}

/* Quote image */
.fp-dh-body .dh-quote-img .fl-photo-content { border-radius: 10px; overflow: hidden; }
.fp-dh-body .dh-quote-img .fl-photo-img { width: 100%; display: block; }

/* Captioned photo */
.fp-dh-body .dh-photo .fl-photo-content { border-radius: 10px; overflow: hidden; }
.fp-dh-body .dh-photo .fl-photo-img { width: 100%; display: block; }
.fp-dh-body .dh-photo .fl-photo-caption {
  font-family: 'Open Sans', sans-serif; font-style: italic;
  font-size: 0.84rem; color: #4e6879;
  margin-top: 0.6rem; text-align: center;
}
.fp-dh-body .fl-module-photo + .fl-module { margin-top: 2.5em; }
.fp-dh-body .fl-module + .fl-module-photo { margin-top: 2.5em; }

/* Sign-off */
.fp-dh-body .dh-signoff .fl-rich-text p {
  font-family: 'Outfit', sans-serif; font-weight: 500;
  font-size: 1rem; color: #225560; margin-top: 1rem;
}
.fp-dh-body .dh-signoff .fl-rich-text a {
  color: #005f8e; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.15em;
}
.fp-dh-body .dh-signoff .fl-rich-text a:hover { color: #005f8e; }

/* Credits */
.fp-dh-body .dh-credits .fl-rich-text p {
  font-family: 'Open Sans', sans-serif; font-size: 0.72rem; color: #4e6879; margin: 0;
}
.fp-dh-body .dh-credits .fl-rich-text a {
  color: #005f8e; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.15em;
}

@media (max-width: 600px) {
  .fp-dh-body .fl-row-content { padding: 2rem 1.25rem 4rem; }
}


/* ══════════════════════════════════════════════════════════════════
   SERIES NAV — fp-ah-series
   ══════════════════════════════════════════════════════════════════ */

/* Row content — constrain to article body width */
.fp-ah-series .fl-row-content { max-width: 1100px; margin: 0 auto; padding: 2rem 2rem 2.5rem; }
.fp-ah-series .fl-col { float: none; width: 100%; }
.fp-ah-series .fl-col-content { max-width: 680px; }
.fp-ah-series .fl-module-content { margin: 0; }
.fp-ah-series .fl-module { margin-bottom: 0; }
.fp-ah-series .fl-node-ser-eyebrow.fl-module { margin-bottom: 1.25rem; }

/* Eyebrow pill — base (series + tags share the same pill) */
.fp-ah-series .fl-node-ser-eyebrow .fl-heading,
.fp-ah-series .fl-node-tags-eyebrow .fl-heading {
  display: inline-block;
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em;
  padding: 0.28rem 0.85rem; border-radius: 9999px;
}

/* Eyebrow pill — accent variants */
.fp-ah-series.fp-ah-series--green .fl-node-ser-eyebrow .fl-heading {
  color: #0d6e40; background: rgba(23,147,85,0.08); border: 1px solid rgba(23,147,85,0.18);
}
.fp-ah-series.fp-ah-series--yellow .fl-node-ser-eyebrow .fl-heading {
  color: #7a5800; background: rgba(253,202,64,0.1); border: 1px solid rgba(253,202,64,0.3);
}
.fp-ah-series.fp-ah-series--lav .fl-node-ser-eyebrow .fl-heading {
  color: #7033b8; background: rgba(180,119,235,0.08); border: 1px solid rgba(180,119,235,0.2);
}
.fp-ah-series.fp-ah-series--cerulean .fl-node-ser-eyebrow .fl-heading {
  color: #0070c4; background: rgba(0,166,251,0.07); border: 1px solid rgba(0,166,251,0.22);
}
.fp-ah-series.fp-ah-series--slate .fl-node-ser-eyebrow .fl-heading {
  color: #225560; background: rgba(34,85,96,0.06); border: 1px solid rgba(34,85,96,0.15);
}

/* Tags eyebrow — always slate regardless of row accent */
.fp-ah-series .fl-node-tags-eyebrow .fl-heading {
  color: #225560; background: rgba(34,85,96,0.06); border: 1px solid rgba(34,85,96,0.15);
}

/* Nav links — flex row layout */
.fp-ah-series .post-navigation .nav-links { display: flex; flex-direction: row; width: 100%; }
.fp-ah-series .post-navigation .nav-links .nav-previous,
.fp-ah-series .post-navigation .nav-links .nav-next { display: block; width: 100%; }
.fp-ah-series .post-navigation .nav-links .nav-next { text-align: right; }

/* Links */
.fp-ah-series .post-navigation .nav-links a {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 500;
  color: #225560; text-decoration: none;
  padding: 0.5rem 0; transition: color 0.15s;
}

/* Arrow circle — green-600 always (action affordance, not identity) */
.fp-ah-series .post-navigation .nav-links a::before,
.fp-ah-series .post-navigation .nav-links .nav-next a::before {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; min-width: 30px;
  border-radius: 50%; background: #0d6e40; color: #ffffff;
  font-size: 0.85rem; font-weight: 400;
  transition: background 0.15s, transform 0.15s;
}
.fp-ah-series .post-navigation .nav-links .nav-previous a::before { content: "\2190"; }
.fp-ah-series .post-navigation .nav-links .nav-next a::before { content: "\2192"; order: 1; }

.fp-ah-series .post-navigation .nav-links a:hover::before {
  background: #0a5a34; transform: translateY(-1px);
}
.fp-ah-series .post-navigation .nav-links a:hover { color: #0d6e40; }

/* Screen reader text */
.fp-ah-series .post-navigation .screen-reader-text {
  clip: rect(1px,1px,1px,1px); position: absolute; height: 1px; width: 1px; overflow: hidden;
}

@media (max-width: 768px) {
  .fp-ah-series .fl-row-content { padding: 1.5rem 1.25rem 2rem; }
  .fp-ah-series .post-navigation .nav-links { display: block; }
  .fp-ah-series .post-navigation .nav-links .nav-previous,
  .fp-ah-series .post-navigation .nav-links .nav-next { width: 100%; text-align: left; }
  .fp-ah-series .post-navigation .nav-links .nav-next { margin-top: 0.75rem; }
}


/* ══════════════════════════════════════════════════════════════════
   SUBSCRIBE CTA — fp-ah-subscribe
   Two treatments: default (card) and --flush (inline, on s2 bg).
   Two mechanisms: --substack (link button) and --form (email input).
   Row bg is set by BB inline style — no bridge CSS needed for bg.
   ══════════════════════════════════════════════════════════════════ */

.fp-ah-subscribe .fl-row-content { max-width: 800px; margin: 0 auto; padding: 3rem 2rem; }

/* Card treatment (default) */
.fp-ah-subscribe .fl-node-ahs-inner > .fl-col-content {
  max-width: 680px; margin: 0 auto;
  background: #f5f3ef; border: 1px solid #e0dbd4;
  border-radius: 12px; padding: 2rem 2.5rem;
}

/* Flush treatment */
.fp-ah-subscribe--flush .fl-node-ahs-inner > .fl-col-content {
  max-width: 680px; margin: 0 auto;
  background: transparent; border: none;
  border-radius: 0; padding: 0;
}

/* Three-dot separator — flush mode only */
.fp-ah-subscribe .ahs-sep { display: none; }
.fp-ah-subscribe--flush .ahs-sep { display: block; }
.fp-ah-subscribe--flush .ahs-sep .fl-rich-text p {
  display: flex; justify-content: center; align-items: center;
  gap: 0.4rem; padding: 1.5em 0; margin: 0;
}
.fp-ah-subscribe--flush .ahs-sep .fl-rich-text span {
  display: block; width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0;
  background: rgba(23,147,85,0.4);
}
/* Flush form input — on white bg use s2 for contrast */
.fp-ah-subscribe--flush .ahs-input input { background: #f5f3ef; border-color: #e0dbd4; }

/* Eyebrow pill */
.fp-ah-subscribe .ahs-eyebrow .fl-rich-text p {
  display: inline-block;
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: #0d6e40; background: rgba(23,147,85,0.08); border: 1px solid rgba(23,147,85,0.18);
  padding: 0.28rem 0.85rem; border-radius: 9999px; margin: 0;
}
.fp-ah-subscribe .ahs-eyebrow.fl-module { margin: 0 0 1rem; }

/* Heading */
.fp-ah-subscribe .ahs-heading .fl-heading {
  font-family: 'Outfit', sans-serif; font-size: 1.33rem; font-weight: 700;
  line-height: 1.3; letter-spacing: -0.02em; color: #225560;
}
.fp-ah-subscribe .ahs-heading.fl-module { margin: 0 0 0.75rem; }

/* Copy */
.fp-ah-subscribe .ahs-copy .fl-rich-text p {
  font-family: 'Open Sans', sans-serif; font-size: 0.84rem; line-height: 1.7;
  color: #4e6879; margin: 0;
}
.fp-ah-subscribe .ahs-copy.fl-module { margin: 0 0 1.5rem; }

/* Button */
.fp-ah-subscribe .ahs-btn .fl-button {
  display: inline-flex; align-items: center;
  background: #0d6e40; color: #ffffff;
  font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 600;
  padding: 0.65rem 1.5rem; min-height: 44px;
  border-radius: 9999px; text-decoration: none; border: none; cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease; line-height: 1;
}
.fp-ah-subscribe .ahs-btn .fl-button:hover { background: #0a5a34; transform: translateY(-1px); }
.fp-ah-subscribe .ahs-btn .fl-button:focus-visible { outline: 3px solid #0d6e40; outline-offset: 3px; }
.fp-ah-subscribe .ahs-btn.fl-module { margin: 0; }

/* Mechanism visibility */
.fp-ah-subscribe--substack .ahs-action--form { display: none; }
.fp-ah-subscribe--form .ahs-action--substack { display: none; }

/* Form */
.fp-ah-subscribe .ahs-form .fl-rich-text form {
  display: flex; gap: 0.5rem; align-items: center; max-width: 480px;
}
.fp-ah-subscribe .ahs-form .fl-rich-text input[type="email"] {
  flex: 1; background: #ffffff; border: 1px solid #e0dbd4;
  border-radius: 10px; padding: 0.6rem 1rem;
  min-height: 44px; font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem; color: #3d5f6b; line-height: 1;
}
.fp-ah-subscribe .ahs-form .fl-rich-text input[type="email"]::placeholder { color: #4e6879; }
.fp-ah-subscribe .ahs-form .fl-rich-text input[type="email"]:focus {
  border-color: #179355; outline: none; box-shadow: 0 0 0 3px #e6f4ed;
}
.fp-ah-subscribe .ahs-form .fl-rich-text button[type="submit"] {
  display: inline-flex; align-items: center;
  background: #0d6e40; color: #ffffff;
  font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 600;
  padding: 0.65rem 1.5rem; min-height: 44px;
  border-radius: 9999px; border: none; cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease; line-height: 1;
}
.fp-ah-subscribe .ahs-form .fl-rich-text button[type="submit"]:hover {
  background: #0a5a34; transform: translateY(-1px);
}
.fp-ah-subscribe .ahs-form .fl-rich-text button[type="submit"]:focus-visible {
  outline: 3px solid #0d6e40; outline-offset: 3px;
}
.fp-ah-subscribe .ahs-form.fl-module { margin: 0; }

@media (max-width: 768px) {
  .fp-ah-subscribe .fl-row-content { padding: 2rem 1.25rem; }
  .fp-ah-subscribe .fl-node-ahs-inner > .fl-col-content { padding: 1.5rem; border-radius: 10px; }
  .fp-ah-subscribe--flush .fl-node-ahs-inner > .fl-col-content { padding: 0; border-radius: 0; }
  .fp-ah-subscribe .ahs-form .fl-rich-text form { flex-direction: column; align-items: stretch; }
  .fp-ah-subscribe .ahs-form .fl-rich-text input[type="email"] { width: 100%; }
  .fp-ah-subscribe .ahs-form .fl-rich-text button[type="submit"] { width: 100%; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════════
   TAGS — fp-ah-tags (inside fp-ah-series row)
   Eyebrow pill (slate) + plain text links with dot separators.
   Category link = green/bold. Remaining tags = slate.
   ══════════════════════════════════════════════════════════════════ */

/* Tags eyebrow — spacing (pill styling reuses series eyebrow base above) */
.fp-ah-series .fl-node-tags-eyebrow.fl-module { margin-bottom: 0.75rem; margin-top: 2rem; }

/* Tag links — plain text, dot-separated */
.fp-ah-series .fp-ah-tags-links {
  font-family: 'Open Sans', sans-serif; font-size: 0.9rem; line-height: 1.6;
  margin: 0;
}
.fp-ah-series .fp-ah-tags-links a {
  color: #3d5f6b; text-decoration: none; transition: color 0.15s;
}
.fp-ah-series .fp-ah-tags-links a:hover { color: #225560; text-decoration: underline; }

/* First link = category — green, bold */
.fp-ah-series .fp-ah-tags-links a:first-child {
  color: #0d6e40; font-weight: 600;
}
.fp-ah-series .fp-ah-tags-links a:first-child:hover { color: #0a5a34; }

/* Dot separators */
.fp-ah-series .fp-ah-tags-links .tag-sep {
  display: inline-block; margin: 0 0.4em; color: #8aafbb; font-weight: 400;
}


/* ══════════════════════════════════════════════════════════════════
   NOTE: fp-ah-breadcrumb, fp-ah-share, fp-ah-related
   have no bridge CSS. All styling is achieved via BB module settings
   (inline styles on the BB-rendered HTML). No rules needed here.
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   SL-HERO — Section Landing Hero
   Two-column: client-addressed headline (left) + watercolour portrait (right)
   4 variants: green, yellow, lavender, cerulean
   Spec: design/specs/sl-hero-spec.md
   ══════════════════════════════════════════════════════════════════ */

/* Layout — grid on col-group (same pattern as fp-ti, fp-co) */
.sl-hero.fl-row .fl-row-content-wrap { padding: 0; }

/* Row content: left-edge calc references row width, matching hh-hero / hh-org pattern.
   Right side stays flush to row edge so portrait can bleed off. */
.sl-hero .fl-row-content {
  padding-left: max(2rem, calc((100% - var(--max)) / 2));
  box-sizing: border-box;
}

.sl-hero .fl-col-group { display: grid; grid-template-columns: 58fr 42fr; }
.sl-hero .fl-col { float: none; width: 100%; min-width: 0; }
.sl-hero .fl-module { margin: 0; }

/* Portrait: blend + mask (BB cannot set mix-blend-mode or mask-image) */
.sl-hero .sl-portrait > .fl-col-content {
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%);
  mask-image: linear-gradient(to right, transparent 0%, black 15%);
}

/* fl-row-has-layers stacking fix — variant bg on .fl-row-content so blend works */
.sl-hero.sl-green    .fl-row-content { background-color: #e6f4ed; }
.sl-hero.sl-yellow   .fl-row-content { background-color: #fef8e0; }
.sl-hero.sl-lavender .fl-row-content { background-color: #f3e8fd; }
.sl-hero.sl-cerulean .fl-row-content { background-color: #ddf1fc; }

/* Text column spacing between modules */
.sl-hero .sl-text .fl-module + .fl-module { margin-top: 1.25rem; }
.sl-hero .sl-text .fl-module-rich-text + .fl-module-heading { margin-top: 0.75rem; }
.sl-hero .sl-text .fl-module-button { margin-top: 2rem; }

/* Eyebrow pill — BB cannot pill-style a span inside rich-text */
.sl-hero .fl-module-rich-text .sl-pill,
.hh-org .fl-node-hh-org-eyebrow .sl-pill,
.hh-learn .fl-node-hh-learn-eyebrow .sl-pill,
.hh-course .fl-node-hh-course-eyebrow .sl-pill {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  line-height: 1.5;
}

/* Pill variant colours — 4-class specificity */
.sl-hero.sl-green    .fl-module-rich-text .sl-pill { background: #179355; color: #ffffff; }
.sl-hero.sl-yellow   .fl-module-rich-text .sl-pill { background: #fdca40; color: #3a1800; }
.sl-hero.sl-lavender .fl-module-rich-text .sl-pill { background: #7033b8; color: #ffffff; }
.sl-hero.sl-cerulean .fl-module-rich-text .sl-pill { background: #005f8e; color: #ffffff; }

/* Mobile: stack columns */
@media (max-width: 768px) {
  .sl-hero .fl-col-group { grid-template-columns: 1fr; }
  .sl-hero .sl-portrait { min-height: 320px; }
}


/* ══════════════════════════════════════════════════════════════════
   PC-SECTION — Practitioner Card Grid (3-up)
   Outer column for section title/intro, nested column-group for card grid
   Follows BB Team-1 row template pattern
   Spec: design/specs/pc-section-spec.md
   ══════════════════════════════════════════════════════════════════ */

/* Row content — centred, max-width */
.pc-section .fl-row-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2rem;
}

/* Outer column — no float override needed (single 100% col) */
.pc-section > .fl-row-content-wrap .fl-module { margin: 0; }

/* Section title + intro spacing */
.pc-section .fl-node-pc-title { margin-bottom: 0.5rem; }
.pc-section .fl-node-pc-intro { margin-bottom: 2.5rem; }

/* Card grid — nested column-group, 3-up */
.pc-section .fl-col-group .fl-col-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.pc-section .fl-col-group .fl-col-group .fl-col {
  float: none;
  width: 100%;
  min-width: 0;
}

/* Card column fills grid cell height */
.pc-section .pc-card > .fl-col-content { height: 100%; }

/* Card photo — fill top of card, match card corner radius */
.pc-section .pc-card .fl-module-photo .fl-photo-img {
  border-radius: 12px 12px 0 0;
  display: block;
  width: 100%;
  height: auto;
}

/* Card internal module spacing */
.pc-section .pc-card .fl-module { margin: 0; }
.pc-section .pc-card .fl-module-content { margin: 0; }
.pc-section .pc-card .fl-module-heading .fl-module-content { padding: 1rem 1.5rem 0.25rem; }
.pc-section .pc-card .fl-module-rich-text .fl-module-content { padding: 0 1.5rem 0.75rem; }
.pc-section .pc-card .fl-module-button .fl-module-content { padding: 0 1.5rem 1.5rem; }
.pc-section .pc-card .fl-module-photo .fl-module-content { padding: 0; }

/* Mobile: stack cards */
@media (max-width: 768px) {
  .pc-section .fl-col-group .fl-col-group {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}


/* ══════════════════════════════════════════════════════════════════
   PW-SECTION — Practitioner Work Areas (3-card)
   One callout module per column, coloured top-border accent
   3 variants: green, yellow, lavender
   Spec: design/specs/pw-section-spec.md
   ══════════════════════════════════════════════════════════════════ */

/* Row content — centred, max-width */
.pw-section .fl-row-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2rem;
}

/* Card grid — 3-up equal columns */
.pw-section .fl-col-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.pw-section .fl-col {
  float: none;
  width: 100%;
  min-width: 0;
}

/* Module margin reset */
.pw-section .fl-module { margin: 0; }
.pw-section .fl-module-content { margin: 0; }

/* Card column fills grid cell height */
.pw-section .pw-card > .fl-col-content { height: 100%; }

/* Card top-border accent — variant colours */
.pw-section.pw-section--green .pw-card > .fl-col-content   { border-top: 4px solid #179355; }
.pw-section.pw-section--yellow .pw-card > .fl-col-content  { border-top: 4px solid #fdca40; }
.pw-section.pw-section--lav .pw-card > .fl-col-content     { border-top: 4px solid #b477eb; }

/* Callout title spacing */
.pw-section .fl-callout-title { margin: 0 0 0.5rem; }

/* Mobile: stack cards */
@media (max-width: 768px) {
  .pw-section .fl-col-group {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}


/* ══════════════════════════════════════════════════════════════════
   PP-SECTION — Practitioner Process (What to Expect)
   3 numbered step cards, one per column
   3 variants: green, yellow, lavender
   Spec: design/specs/pp-section-spec.md
   ══════════════════════════════════════════════════════════════════ */

/* Row content — centred, max-width */
.pp-section .fl-row-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2rem;
}

/* Card grid — flexible columns, 3-up at desktop, all rows same height */
.pp-section .fl-col-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: 1fr;
  gap: 2rem;
}
.pp-section .fl-col {
  float: none;
  width: 100%;
  min-width: 0;
}

/* Card fills grid cell height */
.pp-section .pp-card > .fl-col-content { height: 100%; }

/* Module margin reset */
.pp-section .fl-module { margin: 0; }
.pp-section .fl-module-content { margin: 0; }

/* Step number spacing */
.pp-section .pp-card .fl-module-heading:first-child { margin-bottom: 0.75rem; }

/* Step title spacing */
.pp-section .pp-card .fl-module-heading + .fl-module-heading { margin-bottom: 0.5rem; }

/* Step number variant colours */
.pp-section.pp-section--green .pp-card .fl-module-heading:first-child .fl-heading   { color: #0d6e40; }
.pp-section.pp-section--yellow .pp-card .fl-module-heading:first-child .fl-heading  { color: #7a5800; }
.pp-section.pp-section--lav .pp-card .fl-module-heading:first-child .fl-heading     { color: #7033b8; }

/* Mobile: stack cards */
@media (max-width: 768px) {
  .pp-section .fl-col-group {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* === pt-section — Practitioner Testimonials === */

.pt-section .fl-row-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2rem;
}

.pt-section .fl-module { margin: 0; }
.pt-section .fl-module-content { margin: 0; }

.pt-section .fl-testimonials-wrap {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 64px;
}

.pt-section .fl-testimonials {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pt-section .fl-testimonial {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(34,85,96,0.08);
  padding: 3rem 2.5rem;
}

.pt-section .fl-testimonial blockquote {
  margin: 0;
  padding: 0;
  border: none;
}

.pt-section .pt-quote {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
  color: #225560;
  margin: 0 0 1.5rem;
  position: relative;
}

.pt-section .pt-quote::before {
  content: '\201C';
  font-size: 4rem;
  line-height: 1;
  position: absolute;
  top: -1rem;
  left: -1rem;
  opacity: 0.25;
}

.pt-section.pt-section--green .pt-quote::before  { color: #0d6e40; }
.pt-section.pt-section--yellow .pt-quote::before { color: #7a5800; }
.pt-section.pt-section--lav .pt-quote::before    { color: #7033b8; }

.pt-section .pt-attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 1rem;
}

.pt-section .pt-author {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #225560;
  font-style: normal;
}

.pt-section .pt-role {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.84rem;
  color: #4e6879;
}

.pt-section .fl-slider-prev,
.pt-section .fl-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  z-index: 2;
}

.pt-section .fl-slider-prev { left: 0; }
.pt-section .fl-slider-next { right: 0; }

.pt-section .fl-slider-prev:hover,
.pt-section .fl-slider-next:hover {
  transform: translateY(-50%) scale(1.05);
}

.pt-section .fl-slider-prev:focus-visible,
.pt-section .fl-slider-next:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.pt-section.pt-section--green .fl-slider-prev,
.pt-section.pt-section--green .fl-slider-next  { background: #0d6e40; }
.pt-section.pt-section--yellow .fl-slider-prev,
.pt-section.pt-section--yellow .fl-slider-next { background: #7a5800; }
.pt-section.pt-section--lav .fl-slider-prev,
.pt-section.pt-section--lav .fl-slider-next    { background: #7033b8; }

.pt-section .bx-pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1.5rem;
}

.pt-section .bx-pager a {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8aafbb;
  text-indent: -9999px;
  overflow: hidden;
  transition: background 0.15s;
}

.pt-section.pt-section--green .bx-pager a.active  { background: #0d6e40; }
.pt-section.pt-section--yellow .bx-pager a.active { background: #7a5800; }
.pt-section.pt-section--lav .bx-pager a.active    { background: #7033b8; }

@media (max-width: 768px) {
  .pt-section .fl-testimonials-wrap { padding: 0 48px; }
  .pt-section .fl-testimonial { padding: 2rem 1.5rem; }
  .pt-section .fl-slider-prev,
  .pt-section .fl-slider-next { width: 40px; height: 40px; }
}

/* === ig-section — Insights Card Grid === */

.ig-section .fl-row-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2rem 5.5rem;
}

.ig-section .fl-module { margin: 0; }
.ig-section .fl-module-content { margin: 0; }

/* Header 2-col group */
.ig-section .ig-header {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.75rem;
}
.ig-section .ig-header .fl-col {
  float: none;
  width: 100%;
  min-width: 0;
}
.ig-section .ig-header-right > .fl-col-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Eyebrow */
.ig-section .ig-eyebrow .fl-rich-text p {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #0d6e40;
  background: rgba(23,147,85,0.1);
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  margin-bottom: 0.65rem;
}

/* Lead text */
.ig-section .ig-lead .fl-rich-text p {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.72;
  color: #4e6879;
  font-weight: 300;
  max-width: 480px;
}

/* "All Insights →" button */
.ig-section .ig-header-right .fl-button {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.65rem 1.35rem;
  border-radius: 9999px;
  border: 2px solid rgba(34,85,96,0.3);
  color: #225560;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.ig-section .ig-header-right .fl-button:hover {
  background: rgba(34,85,96,0.05);
  border-color: rgba(34,85,96,0.45);
  transform: translateY(-1px);
}
.ig-section .ig-header-right .fl-button:focus-visible {
  outline: 3px solid #225560;
  outline-offset: 3px;
}

/* Post grid — CSS grid (resets BB float columns) */
.ig-section .fl-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ig-section .fl-post-column {
  float: none;
  width: 100%;
  padding: 0;
}

/* Card */
.ig-section .fl-post {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(34,85,96,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.ig-section .fl-post:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(34,85,96,0.09);
  border-color: rgba(34,85,96,0.14);
}

/* Card image */
.ig-section .fl-post-grid-image {
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
}
.ig-section .fl-post-grid-image a { display: block; height: 100%; }
.ig-section .fl-post-grid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  mix-blend-mode: multiply;
  display: block;
}

/* Category accent backgrounds (multiply blend target) */
.ig-section .fl-post.category-for-men .fl-post-grid-image          { background: #e6f4ed; }
.ig-section .fl-post.category-for-women .fl-post-grid-image        { background: #fef8e0; }
.ig-section .fl-post.category-for-organisations .fl-post-grid-image { background: #ddf1fc; }

/* Card body */
.ig-section .fl-post-grid-text {
  padding: 1.25rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
}

/* Category term tag */
.ig-section .fl-post-grid-meta-terms { margin: 0; }
.ig-section .fl-post-grid-terms { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ig-section .fl-post-grid-terms a {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  text-decoration: none;
}
.ig-section .fl-post.category-for-men .fl-post-grid-terms a {
  color: #179355;
  background: rgba(23,147,85,0.1);
}
.ig-section .fl-post.category-for-women .fl-post-grid-terms a {
  color: #7a5800;
  background: rgba(253,202,64,0.18);
}
.ig-section .fl-post.category-for-organisations .fl-post-grid-terms a {
  color: #0070c4;
  background: rgba(0,166,251,0.1);
}

/* Card title */
.ig-section .fl-post-grid-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.38;
  color: #225560;
  letter-spacing: -0.01em;
  margin: 0;
}
.ig-section .fl-post-grid-title a {
  color: inherit;
  text-decoration: none;
}
.ig-section .fl-post-grid-title a:hover {
  text-decoration: underline;
  text-decoration-color: rgba(34,85,96,0.3);
}

/* Excerpt */
.ig-section .fl-post-grid-content { flex: 1; display: flex; flex-direction: column; }
.ig-section .fl-post-grid-content p {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.87rem;
  line-height: 1.72;
  color: #4e6879;
  font-weight: 300;
  flex: 1;
  margin: 0 0 0.75rem;
}

/* "Read more →" link */
.ig-section .fl-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.18s;
}
.ig-section .fl-more-link:hover { gap: 0.5rem; }
.ig-section .fl-post.category-for-men .fl-more-link          { color: #179355; }
.ig-section .fl-post.category-for-women .fl-more-link        { color: #7a5800; }
.ig-section .fl-post.category-for-organisations .fl-more-link { color: #0070c4; }

@media (max-width: 768px) {
  .ig-section .ig-header { grid-template-columns: 1fr; }
  .ig-section .fl-post-grid { grid-template-columns: 1fr; }
}

/* === rp-quote — Quote / Testimonial === */

.rp-quote .fl-row-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8rem 2rem 6rem;
}

.rp-quote .fl-module { margin: 0; }
.rp-quote .fl-module-content { margin: 0; }

.rp-quote .fl-row-content-wrap {
  position: relative;
  overflow: hidden;
}

.rp-quote .fl-row-content-wrap::before,
.rp-quote .fl-row-content-wrap::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background-image: url(assets/flower-petal.svg);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.07;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

.rp-quote .fl-row-content-wrap::before {
  top: 3.5rem;
  left: calc(50% - 150px);
  transform: rotate(-35deg);
}

.rp-quote .fl-row-content-wrap::after {
  top: 3.5rem;
  left: calc(50% - 50px);
  transform: rotate(145deg);
}

.rp-quote .fl-rich-text {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.rp-quote .fl-rich-text blockquote {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: 1.65;
  color: #ffffff;
  margin: 0 0 1.25rem;
  padding: 0;
  border: none;
}

.rp-quote .fl-rich-text cite {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* === hh-hero — Homepage Hero === */

.hh-hero .fl-row-content-wrap {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Background image — pseudo-element keeps it separate from content for Ken Burns */
.hh-hero .fl-row-content-wrap::before {
  content: '';
  position: absolute;
  inset: -8%;
  background-image: url(assets/alienespavo_sunrise_over_africa_in_the_style_of_Quentin_Blake_w_c395ce6a-2374-40f4-8a94-b56390ebe7fb.png);
  background-size: cover;
  background-position: center;
  animation: hh-ken-burns 15s ease-in-out infinite alternate;
  z-index: 0;
}

/* Dark overlay */
.hh-hero .fl-row-content-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 1;
}

/* Position above the ::before image and ::after overlay. Vertical padding uses
   max(8rem, 25vh) — BB px-only padding fields cannot express max() with a vh
   term, so bridge owns vertical here. Horizontal inset is BB-native via the
   row's content_width: "fixed" + max_content_width: "1100" + _unit: "px". */
.hh-hero .fl-row-content {
  position: relative;
  z-index: 2;
  padding-block: max(8rem, 25vh);
}

.hh-hero .fl-col-content {
  max-width: 640px;
}

/* Eyebrow */
.hh-hero .fl-node-hh-eyebrow .fl-rich-text p {
  font-family: var(--font-h);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.70);
  margin: 0 0 1.25rem;
}

/* H1 */
.hh-hero .fl-node-hh-title .fl-rich-text h1.hh-title {
  font-family: var(--font-h);
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 1.5rem;
}

/* Italic last word — Lora for warmth against Outfit 700 */
.hh-hero .fl-node-hh-title .fl-rich-text h1.hh-title em {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* Sub paragraph */
.hh-hero .fl-node-hh-sub .fl-rich-text p {
  font-family: var(--font-b);
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  margin: 0 0 2.25rem;
  max-width: 520px;
}

/* CTA — white pill, green text (dark overlay context) */
.hh-hero .fl-node-hh-cta .fl-button {
  background: #ffffff;
  color: var(--green-600);
  border: none;
  border-radius: 9999px;
  font-family: var(--font-h);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.75rem 2rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Inner span: bb-theme skin sets `a.fl-button * { color: #fff }` (0,2,1)
   which beats inherited colour on the span. 3-class selector below wins. */
.hh-hero .fl-node-hh-cta .fl-button-text {
  color: var(--green-600);
}

.hh-hero .fl-node-hh-cta .fl-button:hover {
  background: rgba(255,255,255,0.88);
}

.hh-hero .fl-node-hh-cta .fl-button:focus-visible {
  outline: 3px solid var(--cerulean-200);
  outline-offset: 3px;
}

/* Ken Burns keyframes */
@keyframes hh-ken-burns {
  0%   { transform: scale(1.0) translate(0%, 0%); }
  100% { transform: scale(1.1) translate(-3%, 2%); }
}

/* Accessibility: disable animation for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .hh-hero .fl-row-content-wrap::before { animation: none; }
}

/* Announcement mode — yellow eyebrow pill */
.hh-hero--announcement .fl-node-hh-eyebrow .fl-rich-text p {
  display: inline-block;
  background: var(--yellow-500);
  color: var(--yellow-text);
  padding: 0.25rem 0.875rem;
  border-radius: var(--pill);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

/* === hh-org — For Organisations Strip ===
   Row padding (vertical 5rem) and content-zone width (1100px) are BB-native:
   padding_top: "80", padding_bottom: "80", content_width: "fixed",
   max_content_width: "1100", max_content_width_unit: "px". No bridge here. */

.hh-org .fl-col-content {
  max-width: 720px;
}

/* Eyebrow — uses shared .sl-pill class (see line 1136 for base styling).
   Variant colours below scope to .hh-org context. */
.hh-org .fl-node-hh-org-eyebrow .fl-rich-text p { margin: 0 0 1.25rem; }
.hh-org .fl-node-hh-org-eyebrow .sl-pill {
  background: var(--cerulean-200);
  color: var(--slate-900);
}

/* Heading */
.hh-org .fl-node-hh-org-title .fl-heading {
  font-family: var(--font-h);
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: #ffffff;
  margin: 0 0 1.25rem;
}

/* Body */
.hh-org .fl-node-hh-org-body .fl-rich-text p {
  font-family: var(--font-b);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
  margin: 0 0 1.5rem;
}

/* Services line */
.hh-org .fl-node-hh-org-services .fl-rich-text p {
  font-family: var(--font-h);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cerulean-200);
  margin: 0 0 2rem;
}

/* CTA — white pill, cerulean text */
.hh-org .fl-node-hh-org-cta .fl-button {
  background: #ffffff;
  color: var(--cerulean-600);
  border: none;
  border-radius: 9999px;
  font-family: var(--font-h);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.75rem 2rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Inner span: bb-theme skin `a.fl-button *` would force white otherwise */
.hh-org .fl-node-hh-org-cta .fl-button-text {
  color: var(--cerulean-600);
}

.hh-org .fl-node-hh-org-cta .fl-button:hover {
  background: rgba(255,255,255,0.88);
}

.hh-org .fl-node-hh-org-cta .fl-button:focus-visible {
  outline: 3px solid var(--cerulean-200);
  outline-offset: 3px;
}


/* ══════════════════════════════════════════════════════════════════
   HH-LEARN — Homepage Learn Carousel (Row 4)
   S1 surface. 4 framework cards rotated through 3-visible carousel.
   Spec: design/specs/hh-learn-spec.md
   ══════════════════════════════════════════════════════════════════ */

.hh-learn .fl-row-content-wrap { background-color: var(--s1); }
.hh-learn .fl-row-content {
  max-width: var(--max);
  margin: 0 auto;
  padding: 5rem 2rem 5.5rem;
}

/* Reset BB default 20px module margin so text-edges align with other homepage rows */
.hh-learn .fl-module { margin: 0; }
.hh-learn .fl-module-content { margin: 0; }

/* Eyebrow pill colour variant — base styling lives in shared .sl-pill rule.
   Uses green-600 (#0d6e40) NOT green-500: white on green-500 = 3.93:1 (fails WCAG AA),
   white on green-600 = 6.34:1 (passes AA). */
.hh-learn .fl-node-hh-learn-eyebrow .fl-rich-text p { margin: 0 0 1rem; }
.hh-learn .fl-node-hh-learn-eyebrow .sl-pill {
  background: #0d6e40;
  color: #ffffff;
}

/* Section heading + intro */
.hh-learn .fl-node-hh-learn-title .fl-heading {
  font-family: var(--font-h);
  font-size: var(--h2);
  font-weight: 700;
  color: var(--text-h);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 1rem;
}
.hh-learn .fl-node-hh-learn-intro .fl-rich-text p {
  font-family: var(--font-b);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-b);
  max-width: 640px;
  margin: 0 0 2.75rem;
}

/* Carousel track */
.hh-learn .learn-track-wrap { overflow: hidden; }
.hh-learn .learn-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card */
.hh-learn .learn-card {
  flex: 0 0 calc((100% - 2 * 1.5rem) / 3);
  background: var(--s0);
  border-radius: 16px;
  border: 1px solid rgba(34, 85, 96, 0.08);
  padding: 1.75rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s, box-shadow 0.22s;
  box-sizing: border-box;
}
.hh-learn .learn-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(34, 85, 96, 0.09);
}

/* Icon box — 44×44 with framework accent tint + icon colour */
.hh-learn .learn-icon-box {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
  font-size: 1.35rem;
}
.hh-learn .learn-icon-soe  { background: rgba(23, 147, 85, 0.12); color: #179355; }
.hh-learn .learn-icon-aaa  { background: rgba(0, 166, 251, 0.12); color: #0070c4; }
.hh-learn .learn-icon-five { background: rgba(253, 202, 64, 0.22); color: #7a5800; }
.hh-learn .learn-icon-mef  { background: rgba(34, 85, 96, 0.10);  color: #225560; }

/* Card typography */
.hh-learn .learn-card-h {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--text-h);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 0.85rem;
}
.hh-learn .learn-card-p {
  font-family: var(--font-b);
  font-size: 0.87rem;
  line-height: 1.72;
  color: var(--text-b);
  font-weight: 300;
  flex: 1;
  margin: 0 0 1.35rem;
}
.hh-learn .learn-card-link {
  font-family: var(--font-h);
  font-size: 0.81rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: auto;
  transition: gap 0.18s;
}
.hh-learn .learn-card-link:hover { gap: 0.6rem; }
.hh-learn .learn-card-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Per-card link colour — AA-passing variants */
.hh-learn .learn-card-soe  .learn-card-link { color: #0d6e40; }
.hh-learn .learn-card-aaa  .learn-card-link { color: #0070c4; }
.hh-learn .learn-card-five .learn-card-link { color: #7a5800; }
.hh-learn .learn-card-mef  .learn-card-link { color: #225560; }

/* Controls — dots + arrows */
.hh-learn .learn-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
.hh-learn .learn-arrows { display: flex; gap: 0.5rem; }
.hh-learn .learn-prev,
.hh-learn .learn-next {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--s4);
  background: var(--s0);
  color: var(--text-h);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  line-height: 1;
}
.hh-learn .learn-prev:hover,
.hh-learn .learn-next:hover {
  border-color: var(--green-500);
  color: var(--green-500);
  background: rgba(23, 147, 85, 0.05);
}
.hh-learn .learn-prev:focus-visible,
.hh-learn .learn-next:focus-visible {
  outline: 3px solid #0d6e40;
  outline-offset: 3px;
}
.hh-learn .learn-prev:disabled,
.hh-learn .learn-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Dots — 44×44 touch target wrapping 8px visual dot (Apple HIG) */
.hh-learn .learn-dots { display: flex; gap: 0.5rem; }
.hh-learn .learn-dot {
  width: 44px; height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.hh-learn .learn-dot::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--s4);
  transition: background 0.2s, transform 0.2s;
}
.hh-learn .learn-dot.active::before {
  background: var(--green-500);
  transform: scale(1.35);
}
.hh-learn .learn-dot:focus-visible {
  outline: 3px solid #0d6e40;
  outline-offset: 0;
}

/* Reduced-motion: kill the transition */
@media (prefers-reduced-motion: reduce) {
  .hh-learn .learn-track { transition: none; }
  .hh-learn .learn-card { transition: none; }
}

/* Responsive — tablet (2 visible) */
@media (max-width: 1023px) {
  .hh-learn .learn-card { flex: 0 0 calc((100% - 1.5rem) / 2); }
}

/* Responsive — mobile (1.15 visible, native scroll-snap, hide arrows) */
@media (max-width: 767px) {
  .hh-learn .fl-row-content { padding: 4rem 1.25rem 4.5rem; }
  .hh-learn .learn-track-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .hh-learn .learn-card {
    flex: 0 0 88%;
    scroll-snap-align: start;
  }
  .hh-learn .learn-arrows { display: none; }
}


/* ══════════════════════════════════════════════════════════════════
   HH-COURSE — Homepage Course CTA Strip (Row 6)
   Green-500 surface (Learn track extension). Yellow eyebrow + CTA.
   2-col on desktop (text 60%, image 40%), stacked on mobile.
   Spec: design/specs/hh-course-spec.md
   ══════════════════════════════════════════════════════════════════ */

.hh-course .fl-row-content {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4.5rem 2rem;
}

/* Reset BB default 20px module margin so text-edges align with other homepage rows */
.hh-course .fl-module { margin: 0; }
.hh-course .fl-module-content { margin: 0; }

.hh-course .fl-col-group {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 2.5rem;
  align-items: center;
}
.hh-course .fl-col {
  float: none;
  width: 100%;
  min-width: 0;
}

/* Eyebrow pill — cerulean lane (5th Place voice). Base styling in shared .sl-pill rule */
.hh-course .fl-node-hh-course-eyebrow .fl-rich-text p { margin: 0 0 1rem; }
.hh-course .fl-node-hh-course-eyebrow .sl-pill {
  background: var(--cerulean-600);
  color: #ffffff;
}

/* Heading — slate-500 on S1 */
.hh-course .fl-node-hh-course-title .fl-heading {
  font-family: var(--font-h);
  font-size: var(--h2);
  font-weight: 700;
  color: var(--text-h);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

/* Tagline — italic Lora */
.hh-course .fl-node-hh-course-tagline .fl-rich-text p {
  font-family: var(--font-q);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-b);
  margin: 0 0 1.5rem;
  max-width: 540px;
}

/* Bullets — native disc markers, cerulean ::marker (matches fp-et / fp-co / fp-ah-body project pattern) */
.hh-course .hh-course-bullets {
  padding-left: 1.5rem;
  margin: 0 0 1.5rem;
}
.hh-course .hh-course-bullets li {
  font-family: var(--font-b);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-b);
  font-weight: 300;
  margin-bottom: 0.55rem;
}
.hh-course .hh-course-bullets li:last-child { margin-bottom: 0; }
.hh-course .hh-course-bullets li::marker {
  color: var(--cerulean-600);
}

/* Rating — confident social-proof block: big stars, h3-scale number, divider, soft meta */
.hh-course .hh-course-rating {
  font-family: var(--font-h);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 2rem;
}
.hh-course .hh-course-stars {
  color: var(--cerulean-600);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  line-height: 1;
}
.hh-course .hh-course-rating-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-h);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hh-course .hh-course-rating-meta {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-m);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-left: 0.75rem;
  border-left: 1px solid var(--s4);
  line-height: 1;
}

/* CTA — cerulean-600 pill, white text */
.hh-course .fl-node-hh-course-cta .fl-button {
  background: var(--cerulean-600);
  color: #ffffff;
  border-radius: 9999px;
  font-family: var(--font-h);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.85rem 2rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.hh-course .fl-node-hh-course-cta .fl-button:hover {
  background: #005a9e;  /* cerulean-600 hover, project convention */
  transform: translateY(-1px);
}
.hh-course .fl-node-hh-course-cta .fl-button:focus-visible {
  outline: 3px solid var(--cerulean-600);
  outline-offset: 3px;
}

/* Course image — multiply blend matches ig-section / fp-ab / sl-hero / fp-ph project pattern */
.hh-course .hh-course-visual .fl-photo-img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  mix-blend-mode: multiply;
}

/* Responsive — tablet/mobile: stack columns */
@media (max-width: 767px) {
  .hh-course .fl-row-content { padding: 3.5rem 1.25rem; }
  .hh-course .fl-col-group {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hh-course .hh-course-visual { order: -1; }  /* image on top on mobile */
  .hh-course .hh-course-visual .fl-photo-img {
    max-width: 280px;
    margin: 0 auto;
  }
}


/* ══════════════════════════════════════════════════════════════════
   HH-HERO — eyebrow pill SHAPE only
   Rich-text passes inline <span>; the pill shape (display:inline-block,
   padding, border-radius 9999) is not stylable via the rich-text module's
   own typography field — that targets <p> children only, not inline spans.
   ══════════════════════════════════════════════════════════════════ */
.hh-hero .hh-eyebrow-pill {
  display: inline-block;
  padding: 0.35rem 0.95rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}