/* ── 5th Place component bridge CSS ──
   Externalised from the old inline 5th-place.css (2026-06-12).
   Depends on tokens.css (CSS variables). Served as a versioned external
   file: browser-cached, filemtime cache-busted — CSS edits no longer
   require Cloudflare zone purges. */

/* === 5th Place — Site CSS === */

/* 1. Design Tokens */

/* ── 5th Place Design Tokens ──────────────────────────────────────────────
   Single source of truth. All mockup and production pages link here.
   Source: colour-system.html (proofed 2026-02-23)
   DO NOT edit this file directly — update colour-system.html :root first,
   then copy the block here.
   ───────────────────────────────────────────────────────────────────────── */



/* ── BASE ── */
html { font-size: 18px; scroll-behavior: smooth; overflow-x: hidden; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 2rem; }


/* 2. Homepage Section Styles */


    /* Zero BB's structural spacing — scoped to page 13491 content only.
       Uses .fl-builder-content-13491 (not body.hp-layout) so nav/footer are unaffected. */
    .fl-builder-content-13491 .fl-row,
    .fl-builder-content-13491 .fl-module,
    .fl-builder-content-13491 .fl-module-content { margin: 0; padding: 0; }


    html { font-size: 18px; scroll-behavior: smooth; }
    body {
      font-family: var(--font-b); color: var(--text-b);
      background: var(--s1); -webkit-font-smoothing: antialiased;
    }
    body::before {
      content: ''; position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      opacity: 0.025; pointer-events: none; z-index: 999;
    }

    /* ── SHARED ── */

    .wave { width: 100%; overflow: hidden; line-height: 0; display: block; margin-bottom: -2px; }
    .wave svg { display: block; width: 100%; }
    .section-label {
      display: inline-block; font-family: var(--font-h); font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.13em; text-transform: uppercase; color: var(--green-500);
      background: rgba(23,147,85,0.1); padding: 0.3rem 0.85rem;
      border-radius: var(--pill); margin-bottom: 0.65rem;
    }
    .section-h2 {
      font-family: var(--font-h); font-weight: 700;
      font-size: clamp(1.8rem, 2.8vw, 2.4rem);
      line-height: 1.12; letter-spacing: -0.022em; color: var(--text-h);
    }
    .btn {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.7rem 1.45rem; border-radius: var(--pill);
      font-family: var(--font-h); font-size: 0.85rem; font-weight: 600;
      text-decoration: none; border: 2px solid transparent;
      transition: transform 0.18s, box-shadow 0.18s, background 0.15s;
      cursor: pointer; letter-spacing: -0.005em;
    }
    .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
    .btn-green   { background: var(--green-500); color: #fff; border-color: var(--green-500); }
    .btn-green:hover { background: var(--green-800); border-color: var(--green-800); }
    .btn-yellow  { background: var(--yellow-500); color: var(--slate-900); border-color: var(--yellow-500); }
    .btn-yellow:hover { background: var(--yellow-600); border-color: var(--yellow-600); }
    .btn-lavender { background: var(--lav-500); color: #fff; border-color: var(--lav-500); }
    .btn-lavender:hover { background: #9a55d4; border-color: #9a55d4; }
    .btn-outline {
      background: transparent; border-color: rgba(250,249,247,0.45); color: var(--s1);
    }
    .btn-outline:hover { background: rgba(250,249,247,0.12); box-shadow: none; }
    .btn-outline-slate {
      background: transparent; border-color: rgba(34,85,96,0.3); color: var(--slate-500);
    }
    .btn-outline-slate:hover { background: var(--s3); box-shadow: none; }
    .btn-turq-outline {
      background: transparent; border-color: var(--turq); color: var(--turq);
    }
    .btn-turq-outline:hover { background: rgba(66,242,247,0.08); box-shadow: none; }
    .btn-white { background: #fff; color: var(--slate-900); border-color: #fff; }
    .btn-white:hover { background: rgba(255,255,255,0.88); }

    /* ── ACCESSIBILITY — keyboard focus ── */
    :focus-visible {
      outline: 2.5px solid var(--green-500);
      outline-offset: 3px;
    }
    .btn:focus-visible, .track-card:focus-visible {
      border-radius: var(--pill); outline-offset: 5px;
    }
    .learn-btn:focus-visible { outline-offset: 4px; }
    .learn-dot:focus-visible { outline-offset: 0; }


    /* ══════════════════════════════════════════
       HERO — full-bleed 1920×1080 watercolour.
       Text anchored at the bottom of the image
       within the 1100px container.
       S1 gradient dissolves image into section
       below — no hard edge.
    ══════════════════════════════════════════ */
    .hero {
      position: relative;
      height: 72vh;
      min-height: 640px;
      overflow: hidden;
      background: var(--s1);
    }
    .hero-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center 30%;
      animation: ken-burns 15s ease-in-out infinite alternate;
      transform-origin: center center;
      will-change: transform;
    }
    @keyframes ken-burns {
      0%   { transform: scale(1.0)  translate(0%,   0%);  }
      100% { transform: scale(1.1) translate(-3%,  3%);  }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-img { animation: none; }
      .p-card, .learn-card, .i-card,
      .track-card, .btn, .learn-card-link, .i-link,
      .learn-track { transition: none; }
    }
    /* Gradient fades all four edges into S1.
       Bottom is strongest — dissolves into next section. */
    .hero-overlay {
      position: absolute; inset: 0;
      background:
        /* Bottom — strongest: dissolves image into next section, text sits here */
        linear-gradient(to top,    var(--s1) 0%, rgba(250,249,247,0.94) 22%, rgba(250,249,247,0.48) 44%, transparent 66%),
        /* Left — strong: text lives here, needs clear reading surface */
        linear-gradient(to right,  var(--s1) 0%, rgba(250,249,247,0.92) 22%, rgba(250,249,247,0.6) 40%, transparent 62%),
        /* Right — light: image can show through, no text here */
        linear-gradient(to left,   var(--s1) 0%, rgba(250,249,247,0.2) 8%, transparent 24%),
        /* Top — light: just softens the image edge */
        linear-gradient(to bottom, var(--s1) 0%, rgba(250,249,247,0.18) 8%, transparent 22%);
    }
    /* Text sits in the lower portion of the hero,
       anchored to the 1100px spine. No left padding. */
    .hero-content {
      position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
    }
    .hero-content-inner {
      max-width: var(--max); margin: 0 auto;
      padding: 0 0 3.75rem 0;
    }
    .hero-eyebrow {
      display: inline-block;
      font-family: var(--font-h); font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.13em; text-transform: uppercase;
      color: var(--green-500);
      background: rgba(23,147,85,0.1);
      padding: 0.3rem 0.85rem;
      border-radius: var(--pill);
      margin-bottom: 0.9rem;
    }
    .hero-h1 {
      font-family: var(--font-h); font-weight: 700;
      font-size: clamp(2.8rem, 5vw, 4.8rem);
      line-height: 1.04; letter-spacing: -0.03em;
      color: var(--text-h); margin-bottom: 1.1rem;
      max-width: 600px;
    }
    .hero-h1 em { font-style: normal; color: var(--green-500); }
    .hero-sub {
      font-family: var(--font-b); font-weight: 300; font-size: 1rem;
      line-height: 1.75; color: var(--text-b);
      max-width: 500px; margin-bottom: 2rem;
    }
    /* 4 audience track cards — sit below hero sub-text, above book CTA.
       Serve as the primary navigation from the hero into each section.
       All variants use low-opacity backgrounds readable on S1 (#faf9f7). */
    .hero-tracks {
      display: flex; flex-wrap: wrap; gap: 0.65rem;
      margin-bottom: 1.25rem;
    }
    .track-card {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.7rem 1.2rem 0.7rem 1rem;
      min-height: 44px;
      border-radius: 10px;
      font-family: var(--font-h); font-size: 0.87rem; font-weight: 600;
      letter-spacing: -0.005em; text-decoration: none; border: 1.5px solid;
      transition: transform 0.18s, box-shadow 0.18s, background 0.15s;
    }
    .track-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.1); }
    /* Track colours — dark enough for ≥4.5:1 contrast on S1 background */
    .track-green    { background: rgba(23,147,85,0.08);   border-color: rgba(23,147,85,0.22);   color: #0d6e40; }
    .track-yellow   { background: rgba(253,202,64,0.14);  border-color: rgba(253,202,64,0.4);   color: #7a5800; }
    .track-lavender { background: rgba(180,119,235,0.1);  border-color: rgba(180,119,235,0.28); color: #7033b8; }
    .track-cerulean { background: rgba(0,166,251,0.08);   border-color: rgba(0,166,251,0.25);   color: #0070c4; }
    .track-card:hover.track-green    { background: rgba(23,147,85,0.14); }
    .track-card:hover.track-yellow   { background: rgba(253,202,64,0.22); }
    .track-card:hover.track-lavender { background: rgba(180,119,235,0.16); }
    .track-card:hover.track-cerulean { background: rgba(0,166,251,0.14); }

    .hero-ctas { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }

    /* ══════════════════════════════════════════
       PRACTITIONERS — S2, 3 columns.
       Each card uses its track colour.
    ══════════════════════════════════════════ */
    .practitioners {
      background: var(--s2);
      padding: 5rem 0 5.5rem;
    }
    .practitioners-header {
      margin-bottom: 2.75rem;
    }
    .p-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .p-card {
      background: var(--s0);
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(34,85,96,0.08);
      display: flex; flex-direction: column;
      transition: transform 0.22s, box-shadow 0.22s;
    }
    .p-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(34,85,96,0.1); }
    /* Track colour accent bar at top of each card */
    .p-card-green  { border-top: 4px solid var(--green-500); }
    .p-card-yellow { border-top: 4px solid var(--yellow-500); }
    .p-card-lavender { border-top: 4px solid var(--lav-500); }
    /* Watercolour portrait — padded, contained, rounded rect (not circle).
       White bg of illustration blends with white card seamlessly. */
    .p-photo-wrap {
      padding: 1.25rem 1.25rem 0;
    }
    .p-photo {
      width: 100%; display: block;
      border-radius: 10px;
      aspect-ratio: 1 / 1;
      object-fit: contain;
    }
    .p-body { padding: 1.25rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
    .p-tag {
      display: inline-block; font-family: var(--font-h); font-size: 0.66rem;
      font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
      padding: 0.22rem 0.7rem; border-radius: var(--pill);
      margin-bottom: 0.7rem; width: fit-content;
    }
    .tag-g { background: rgba(23,147,85,0.1);   color: var(--green-500); }
    .tag-y { background: rgba(253,202,64,0.18); color: #7a5800; }
    .tag-l { background: rgba(180,119,235,0.12); color: #7033b8; }
    .p-name {
      font-family: var(--font-h); font-weight: 700; font-size: 1.12rem;
      color: var(--text-h); letter-spacing: -0.015em; margin-bottom: 0.18rem;
    }
    .p-role {
      font-family: var(--font-b); font-size: 0.78rem; color: var(--text-m);
      margin-bottom: 0.9rem;
    }
    .p-pitch {
      font-family: var(--font-b); font-size: 0.87rem; line-height: 1.72;
      color: var(--text-b); flex: 1; margin-bottom: 1.35rem; font-weight: 300;
    }

    /* ══════════════════════════════════════════
       LEARN — S1, 3-column framework carousel.
       4 framework cards, 3 visible at a time.
       Rotates through SOE / AAA / 5 Pillars / Model of EF.
    ══════════════════════════════════════════ */
    .learn { background: var(--s1); padding: 5rem 0 5.5rem; }
    .learn-header {
      display: flex; align-items: flex-end;
      justify-content: space-between; margin-bottom: 2.75rem; gap: 1rem;
    }
    .learn-nav { display: flex; gap: 0.5rem; flex-shrink: 0; }
    .learn-btn {
      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;
    }
    .learn-btn:hover { border-color: var(--green-500); color: var(--green-500); background: rgba(23,147,85,0.05); }
    .learn-track-wrap { overflow: hidden; }
    .learn-track {
      display: flex;
      gap: 1.5rem;
      transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .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;
    }
    .learn-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(34,85,96,0.09); }
    .learn-card-num {
      font-family: var(--font-h); font-size: 0.65rem; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--green-500); margin-bottom: 0.9rem;
    }
    .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-bottom: 0.85rem;
    }
    .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-bottom: 1.35rem;
    }
    .learn-card-link {
      font-family: var(--font-h); font-size: 0.81rem; font-weight: 600;
      color: var(--green-500); text-decoration: none;
      display: inline-flex; align-items: center; gap: 0.3rem;
      transition: gap 0.18s; margin-top: auto;
    }
    .learn-card-link:hover { gap: 0.6rem; }
    .learn-controls { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-top: 2.25rem; }
    .learn-dots { display: flex; gap: 0.5rem; }
    .learn-arrows { display: flex; gap: 0.5rem; }
    /* 44×44 touch target wraps an 8px visual dot (Apple HIG compliance) */
    .learn-dot {
      width: 44px; height: 44px; border-radius: 50%; border: none;
      background: transparent; cursor: pointer; padding: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .learn-dot::before {
      content: ''; width: 8px; height: 8px; border-radius: 50%;
      background: var(--s4);
      transition: background 0.2s, transform 0.2s;
    }
    .learn-dot.active::before { background: var(--green-500); transform: scale(1.35); }

    /* ══════════════════════════════════════════
       ORGANISATIONS — slate dark background.
       Turquoise outline CTA (correct per colour
       system: turquoise only on dark backgrounds).
    ══════════════════════════════════════════ */
    .organisations {
      background: var(--slate-500);
      padding: 4.5rem 0;
    }
    .org-layout {
      display: grid; grid-template-columns: 1.15fr 1fr;
      gap: 4rem; align-items: center;
    }
    .org-text { /* inherits grid cell width */ }
    .org-label {
      display: inline-block; font-family: var(--font-h); font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.13em; text-transform: uppercase;
      color: var(--cerulean-500); margin-bottom: 0.65rem;
    }
    .org-h2 {
      font-family: var(--font-h); font-weight: 700;
      font-size: clamp(1.65rem, 2.5vw, 2.25rem);
      line-height: 1.14; letter-spacing: -0.022em;
      color: #fff; margin-bottom: 0.9rem;
    }
    .org-p {
      font-family: var(--font-b); font-size: 0.97rem; line-height: 1.78;
      color: rgba(255,255,255,0.82); font-weight: 300;
    }

    /* ══════════════════════════════════════════
       INSIGHTS — S2
    ══════════════════════════════════════════ */
    .insights { background: var(--s2); padding: 5rem 0 5.5rem; }
    .insights-header {
      display: flex; justify-content: space-between; align-items: flex-end;
      margin-bottom: 2.75rem; flex-wrap: wrap; gap: 1rem;
    }
    .i-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
    .i-card {
      background: var(--s0); border-radius: 14px;
      border: 1px solid rgba(34,85,96,0.08); padding: 1.75rem;
      display: flex; flex-direction: column; gap: 0.65rem;
      transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
    }
    .i-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(34,85,96,0.09); border-color: rgba(34,85,96,0.14); }
    .i-tag {
      font-family: var(--font-h); font-size: 0.66rem; font-weight: 700;
      letter-spacing: 0.11em; text-transform: uppercase;
      padding: 0.25rem 0.65rem; border-radius: var(--pill);
      display: inline-block; width: fit-content;
    }
    .tag-green    { background: rgba(23,147,85,0.1);   color: var(--green-500); }
    .tag-yellow   { background: rgba(253,202,64,0.18); color: #7a5800; }
    .tag-cerulean { background: rgba(0,166,251,0.1);   color: #0070c4; }
    .i-h {
      font-family: var(--font-h); font-weight: 600; font-size: 1.02rem;
      line-height: 1.38; color: var(--text-h); letter-spacing: -0.01em;
    }
    .i-ex {
      font-family: var(--font-b); font-size: 0.87rem; line-height: 1.72;
      color: var(--text-m); flex: 1; font-weight: 300;
    }
    .i-link {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-family: var(--font-h); font-size: 0.82rem; font-weight: 600;
      color: var(--green-500); text-decoration: none;
      transition: gap 0.18s; margin-top: auto;
    }
    .i-link:hover { gap: 0.5rem; }
    .i-link-y { color: #7a5800; }
    .i-link-c { color: #0070c4; }
    .insights-controls { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-top: 2.25rem; }
    .insights-dots { display: flex; gap: 0.5rem; }
    .insights-arrows { display: flex; gap: 0.5rem; }

    /* ══════════════════════════════════════════
       COURSE CTA STRIP — Udemy
    ══════════════════════════════════════════ */
    .course-strip {
      background: var(--s1);
      padding: 3.5rem 0;
    }
    .course-strip-inner {
      display: flex; align-items: center;
      justify-content: space-between; gap: 2.5rem; flex-wrap: wrap;
    }
    .course-strip-text { flex: 1; min-width: 280px; }
    .course-strip-eyebrow {
      display: inline-block;
      font-family: var(--font-h); font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.13em; text-transform: uppercase;
      background: var(--yellow-500); color: var(--slate-900);
      padding: 0.28rem 0.85rem; border-radius: var(--pill);
      margin-bottom: 0.85rem;
    }
    .course-strip-h {
      font-family: var(--font-h); font-weight: 700;
      font-size: clamp(1.4rem, 2vw, 1.85rem);
      color: var(--text-h); letter-spacing: -0.02em;
      margin: 0 0 0.5rem;
    }
    .course-strip-tag {
      font-family: var(--font-b); font-size: 1rem; line-height: 1.72;
      color: var(--text-b); font-weight: 300; margin-bottom: 1.1rem;
    }
    .course-bullets {
      list-style: none; padding: 0; margin: 0 0 1.75rem;
      display: flex; flex-direction: column; gap: 0.4rem;
    }
    .course-bullets li {
      font-family: var(--font-b); font-size: 0.91rem; line-height: 1.6;
      color: var(--text-b); font-weight: 400;
      padding-left: 1.2rem; position: relative;
    }
    .course-bullets li::before {
      content: '→'; position: absolute; left: 0;
      color: var(--yellow-800); font-size: 0.8rem;
    }
    .course-rating {
      font-family: var(--font-h); font-size: 0.88rem; font-weight: 500;
      color: var(--yellow-800); margin-bottom: 1.25rem;
    }
    .course-rating strong { font-weight: 700; }
    .course-strip-visual { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }


    /* ── PRACTITIONERS lead-in ── */
    .p-lead {
      font-family: var(--font-b); font-size: 1rem; line-height: 1.78;
      color: var(--text-b); font-weight: 300;
      max-width: 560px; margin-top: 0.7rem;
    }

    /* ── LEARN — icon boxes (design/framework-icons.md) ── */
    .learn-icon-box {
      width: 44px; height: 44px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1rem; font-size: 1.35rem; flex-shrink: 0;
    }
    .learn-icon-soe  { background: rgba(23,147,85,0.12);  color: #179355; }
    .learn-icon-aaa  { background: rgba(0,166,251,0.12);  color: #0070c4; }
    .learn-icon-five { background: rgba(253,202,64,0.22); color: #7a5800; }
    .learn-icon-mef  { background: rgba(34,85,96,0.1);   color: #225560; }
    /* Per-framework number colours */
    .num-soe  { color: var(--green-500); }
    .num-aaa  { color: #0070c4; }
    .num-five { color: #7a5800; }
    .num-mef  { color: var(--slate-500); }
    /* Learn excerpt below heading */
    .learn-lead {
      font-family: var(--font-b); font-size: 0.97rem; line-height: 1.8;
      color: var(--text-b); font-weight: 300;
      max-width: 460px; margin-top: 0.55rem;
    }

    /* ── ORGANISATIONS — enhanced ── */
    .org-eyebrow {
      display: inline-block;
      font-family: var(--font-h); font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.13em; text-transform: uppercase;
      color: var(--turq);
      background: rgba(66,242,247,0.1);
      border: 1px solid rgba(66,242,247,0.28);
      padding: 0.28rem 0.85rem; border-radius: var(--pill);
      margin-bottom: 0.85rem;
    }
    .org-services {
      display: flex; flex-wrap: wrap; gap: 0.45rem;
      margin-top: 1.25rem;
    }
    .org-service {
      font-family: var(--font-h); font-size: 0.7rem; font-weight: 600;
      letter-spacing: 0.05em; text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      border: 1px solid rgba(255,255,255,0.15);
      padding: 0.28rem 0.8rem; border-radius: var(--pill);
    }
    .org-cta-row {
      display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
      margin-top: 1.75rem;
    }
    .org-cta-note {
      font-family: var(--font-b); font-size: 0.78rem;
      color: rgba(255,255,255,0.45); font-weight: 300;
      line-height: 1.6;
    }
    /* Framed painting panel — floats on dark slate like artwork on a wall */
    .org-visual { display: flex; align-items: center; justify-content: center; }
    .org-frame {
      background: var(--s0);
      border-radius: 16px;
      padding: 1.25rem;
      box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.3);
      max-width: 380px; width: 100%;
    }
    .org-frame img {
      width: 100%; display: block;
      border-radius: 8px;
      object-fit: contain;
    }

    /* ── INSIGHTS lead ── */
    .insights-lead {
      font-family: var(--font-b); font-size: 0.97rem; line-height: 1.78;
      color: var(--text-b); font-weight: 300;
      max-width: 460px; margin-top: 0.55rem;
    }


    /* Organisations section — no position:relative needed (no absolutely positioned children) */


    /* ── INSIGHTS — image strip on cards ── */
    /* mix-blend-mode: multiply — white bg of watercolour PNGs blends into
       the track-colour container, painting colours show through naturally */
    .i-card { padding: 0; overflow: hidden; gap: 0; }
    .i-card-img {
      height: 148px; overflow: hidden; flex-shrink: 0;
    }
    .i-card-img img {
      width: 100%; height: 100%; object-fit: cover;
      mix-blend-mode: multiply;
    }
    /* Track-colour container backgrounds for multiply blend */
    .i-img-green    { background: #e6f4ed; }
    .i-img-yellow   { background: #fdf5d0; }
    .i-img-cerulean { background: #ddf1fc; }
    .i-card-body {
      padding: 1.25rem 1.75rem 1.75rem;
      display: flex; flex-direction: column; gap: 0.65rem; flex: 1;
    }

    /* ── QUOTE SECTION ── */
    .quote-section {
      background: var(--slate-500);
      padding: 6rem 0;
      position: relative; overflow: hidden;
      text-align: center;
    }
    .quote-petal-img {
      position: absolute; width: 220px; height: auto;
      opacity: 0.06; filter: brightness(0) invert(1);
      pointer-events: none; z-index: 0;
    }
    .quote-petal-open  { top: 5%;    left: max(2rem, calc((100% - 1320px) / 2 + 2rem));  transform: rotate(-35deg); }
    .quote-petal-close { bottom: 5%; right: max(2rem, calc((100% - 1320px) / 2 + 2rem)); transform: rotate(145deg); }
    .quote-inner {
      position: relative; z-index: 1;
      max-width: 680px; margin: 0 auto;
      padding: 0;
      display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
    }
    .quote-text {
      font-family: var(--font-q); font-weight: 400;
      font-size: clamp(1.15rem, 1.9vw, 1.65rem);
      line-height: 1.65; color: #fff;
      font-style: italic; margin: 0;
    }
    .quote-attr {
      font-family: var(--font-b); font-size: 0.78rem; font-weight: 500;
      color: rgba(255,255,255,0.5); letter-spacing: 0.1em;
      text-transform: uppercase; font-style: normal;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 1100px) {
      .nav-inner, .hero-content-inner,
      .practitioners .container,
      .soe .container, .organisations .container,
      .insights .container, .course-strip .container,
      footer .container { padding: 0 1.25rem; }
    }
    @media (max-width: 860px) {
      .p-grid { grid-template-columns: 1fr 1fr; }
      .soe-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .i-grid { grid-template-columns: 1fr 1fr; }
      .f-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
      .org-layout { grid-template-columns: 1fr; gap: 2.5rem; }
      .org-visual { justify-content: flex-start; }
      .org-frame { max-width: 340px; }
      .course-strip-inner { flex-direction: column; align-items: flex-start; }
      .course-strip-visual { display: none; }
    }
    @media (max-width: 600px) {
      .nav-inner { padding: 0 1rem; }
      .hero { height: 80vh; min-height: 560px; }
      .hero-content-inner { padding: 0 1rem 2.5rem; }
      .hero-h1 { font-size: 2.4rem; }
      .track-card { font-size: 0.82rem; padding: 0.5rem 1rem 0.5rem 0.85rem; }
      .p-grid { grid-template-columns: 1fr; }
      .i-grid { grid-template-columns: 1fr; }
      .f-grid { grid-template-columns: 1fr; }
    }
  

/* 3. BB Full-Width Fix */

/* ── HP layout: full-width row overrides (homepage, page_id=13491) ──
   Scoped to .fl-builder-content-13491 — ONLY affects this page's content.
   Nav (fl-builder-content-719) and footer (fl-builder-content-6909/13495) are not affected.
   Specificity (0,0,3) beats BB compiled node CSS (0,0,2). */
.fl-builder-content-13491 .fl-row-content-wrap { max-width: none; padding: 0; }
.fl-builder-content-13491 .fl-row-content { max-width: none; padding: 0; }
.fl-builder-content-13491 .fl-col-content { padding: 0; }



/* ══════════════════════════════════════════════════════════════════════════════
   5. BB BRIDGE

   Maps Beaver Builder module HTML output → 5th Place design tokens.

   Philosophy: BB module settings (via /patch endpoint) own font, color, size,
   weight, transform, letter-spacing — those go in BB data, not CSS.
   CSS handles only what BB cannot do natively:
     - pseudo-elements (leaf pattern, atmospheric overlays)
     - position/overflow for pseudo-element containment
     - hover transitions
     - flex gap on lists
     - border-left accent on headings

   Selector strategy: .component-class .fl-module-X .fl-element
   Three classes = specificity (0,0,3) — beats BB compiled CSS (0,0,2).
   Load order (priority 1001) resolves ties. No !important anywhere.
   ══════════════════════════════════════════════════════════════════════════════ */


/* ── A. Global BB defaults ──────────────────────────────────────────────────
   Sane baseline for ALL BB content on the site.
   Per-component overrides below. */

.fl-builder-content .fl-module-heading .fl-heading {
  font-family: var(--font-h);
  color: var(--text-h);
}

.fl-builder-content .fl-module-rich-text .fl-rich-text {
  font-family: var(--font-b);
  color: var(--text-b);
  line-height: 1.7;
}

.fl-builder-content .fl-module-rich-text .fl-rich-text a {
  color: var(--cerulean-800);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.15s;
}

.fl-builder-content .fl-module-rich-text .fl-rich-text a:hover {
  color: var(--cerulean-500);
}

.fl-builder-content .fl-button-wrap .fl-button {
  font-family: var(--font-h);
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: var(--pill);
  text-decoration: none;
  transition: background 0.2s, opacity 0.2s;
}




/* -- B. Footer bridge (BB Themer template 13495) ----------------------------
   Architecture: background + ::before/::after live on footer.fl-builder-content.
   Rows are transparent -- no competing BB row backgrounds.

   z-index stack:
     footer.fl-builder-content  bg (z auto)
     ::before  leaf pattern      z-index: 1
     ::after   cerulean depth    z-index: 2
     .fl-row-content-wrap        z-index: 3  (content above overlays)

   BB row settings own: padding_top, padding_bottom, column widths.
   Bridge owns: shell bg, overlays, content max-width, column spacing,
                heading border+color, list gap, hover, HTML module styles. */

/* -- Shell ----------------------------------------------------------------- */
footer.fl-builder-content {
  background: var(--slate-900);
  position: relative;
  overflow: hidden;
}

/* -- Layer 1: Leaf-pattern watermark ---------------------------------------
   opacity: 0.15 on dark bg = warm leaf texture. NO filter. NO mix-blend-mode.
   Mask: visible at bottom only, fades out going up. DO NOT change. */
footer.fl-builder-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://5th.place/wp-content/uploads/2020/07/5th-Place__half-moon-pattern__05.png');
  background-repeat: repeat;
  background-size: 500px auto;
  background-position: bottom left;
  opacity: 0.15;
  -webkit-mask-image: linear-gradient(to top, black 0%, black 8%, transparent 32%);
  mask-image: linear-gradient(to top, black 0%, black 8%, transparent 32%);
  pointer-events: none;
  z-index: 1;
}

/* -- Layer 2: Atmospheric cerulean depth ----------------------------------- */
footer.fl-builder-content::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 88% 0%, rgba(0,166,251,0.06) 0%, transparent 65%),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 45%);
  pointer-events: none;
  z-index: 2;
}

/* -- Rows: transparent, above overlays ------------------------------------- */
.fp-footer .fl-row-content-wrap {
  background: transparent;
  position: relative;
  z-index: 3;
  padding-left: 0;
  padding-right: 0;
}

/* -- Row content: constrained to max-w -------------------------------------
   BB compiles: .fl-row-default-height .fl-row-full-width.fl-row-content { max-width:100% }
   = specificity 0,0,3. Need 3-class selector to match; we win on load order. */
/* BB uses border-box globally. max-width includes padding, so we add 4rem
   to keep 1320px of actual content space (matching the CSS Grid mockup). */
.fp-footer .fl-row-content-wrap .fl-row-content {
  max-width: calc(var(--max-w) + 4rem);
  margin: 0 auto;
  padding: 0 2rem;
}

/* -- Column spacing ---------------------------------------------------------
   Padding on .fl-col-content (inside border-box). Gap = 1rem x 2 = 2rem.
   Float layout: col width = % of content area (1256px). 16.67% = 209px.
   At 1rem each side: 209 - 32 = 177px inner — matches original CSS Grid calc.
   (Grid gap: 3rem was subtracting from remaining space before % calc;
   floats need less padding to achieve equivalent inner column width.)
   First col flush left, last col flush right. */
.fp-footer-main .fl-col-content {
  padding-left: 1rem;
  padding-right: 1rem;
}
.fp-footer-main .fl-col:first-child .fl-col-content { padding-left: 0; }
.fp-footer-main .fl-col:last-child  .fl-col-content { padding-right: 0; }

/* -- Heading modules --------------------------------------------------------
   BB structure (v1 deprecated, include_wrapper=true):
   div.fl-module-heading > div.fl-module-content > h4.fl-heading > span.fl-heading-text
   Target .fl-heading (the <h4>). Specificity: (0,0,3) — beats BB's 2-class global.
   BB global uses !important on .fl-heading padding/margin — we must counter. */
.fp-footer .fl-module-heading .fl-heading {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 1.1rem 0 !important;
  padding: 0.1em 0 0.1em 0.6rem !important;
  border-left: 2px solid rgba(23,147,85,0.65);
}

/* -- Rich-text link lists ---------------------------------------------------
   BB structure (v1 deprecated, include_wrapper=true):
   div.fl-module-rich-text > div.fl-module-content > div.fl-rich-text > ul
   Must include .fl-rich-text in selector — gives (0,0,3,0+) which beats
   BB global: .fl-builder-content .fl-module-rich-text .fl-rich-text a (0,0,3,1). */
.fp-footer .fl-module-rich-text .fl-rich-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.fp-footer .fl-module-rich-text .fl-rich-text ul li a {
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 300;
  display: inline-block;
  transition: color 0.15s, padding-left 0.15s;
}
.fp-footer .fl-module-rich-text .fl-rich-text ul li a:hover {
  color: rgba(255,255,255,0.95);
  padding-left: 0.25rem;
}
.fp-footer .fl-module-rich-text .fl-rich-text ul li.sep { height: 0.5rem; }

/* -- Brand column: HTML module custom classes ------------------------------ */
.fp-footer-brand-logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.25rem;
}
.fp-footer-logo { height: 40px; width: auto; flex-shrink: 0; }
.fp-footer-company {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.15s;
}
.fp-footer-company:hover { color: rgba(255,255,255,0.85); }
.fp-footer-tagline {
  font-size: var(--text-sm);
  line-height: 1.78;
  color: rgba(255,255,255,0.65);
  max-width: 240px;
  font-weight: 300;
}
.fp-footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.fp-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--green-500);
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fp-footer-social a:hover {
  background: rgba(23,147,85,0.18);
  border-color: var(--green-500);
  color: var(--yellow-500);
}
.fp-footer-sa {
  display: block;
  width: 64px;
  height: auto;
  margin-top: 1.1rem;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.fp-footer-sa:hover { opacity: 0.9; }

/* -- Bottom bar ------------------------------------------------------------ */
.fp-footer-bottom-row .fl-row-content-wrap {
  border-top: 1px solid rgba(255,255,255,0.10);
}
.fp-footer-bottom-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.76rem;
  font-weight: 300;
  color: rgba(255,255,255,0.52);
  margin-bottom: 0.6rem;
}
.fp-footer-bottom-main a {
  color: rgba(255,255,255,0.52);
  text-decoration: none;
  transition: color 0.15s;
}
.fp-footer-bottom-main a:hover { color: rgba(255,255,255,0.85); }
.fp-footer-legal { display: flex; gap: 1.75rem; }
.fp-footer-attr {
  font-size: 0.68rem;
  font-weight: 300;
  color: rgba(255,255,255,0.28);
}
.fp-footer-attr a {
  color: rgba(255,255,255,0.28);
  text-decoration: none;
  transition: color 0.15s;
}
.fp-footer-attr a:hover { color: rgba(255,255,255,0.60); }

/* -- Responsive ------------------------------------------------------------ */
@media (max-width: 560px) {
  .fp-footer-bottom-main { flex-direction: column; align-items: flex-start; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   NAV — Bridge CSS (fp-nav)
   Template 719 — BB Themer header | BB native Menu module
   DOM verified against live HTML 2026-02-28
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Row wrapper — backdrop bg + border-bottom ─────────────────────────────
   Rule 6: override BB's default 20px padding on .fl-row-content-wrap.
   Background overrides BB's compiled bg_color (#faf9f7) with semi-transparent
   version. Same specificity (0,2,0); our CSS loads later so we win. ---------- */
.fp-nav .fl-row-content-wrap {
  padding: 0;
  background: rgba(250,249,247,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(34,85,96,0.1);
}

/* ── Row content — constrained width ───────────────────────────────────────
   Rule 1: calc() adds 4rem to compensate for border-box padding.
   Rule 3: 3-class selector (.fp-nav .fl-row-content-wrap .fl-row-content)
           beats BB's .fl-row-default-height .fl-row-full-width.fl-row-content
           at (0,0,3) — same count, ours loads later. ----------------------- */
.fp-nav .fl-row-content-wrap .fl-row-content {
  max-width: calc(var(--max-w) + 4rem);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── Logo (HTML module) ─────────────────────────────────────────────────────
   Selector path: .fp-nav .fl-module-html .fl-html .fp-nav-logo
   v1 wrapping confirmed: fl-module-html > fl-module-content > fl-html > a --- */
.fp-nav .fl-module-html .fl-html .fp-nav-logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}
.fp-nav .fl-module-html .fl-html .fp-nav-logo-img {
  height: 32px;
  width: auto;
  display: block;
}
.fp-nav .fl-module-html .fl-html .fp-nav-logo-text {
  font-family: var(--font-h);
  font-size: 1rem;
  font-weight: 700;
  color: var(--slate-500);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ── Top-level menu list — right-aligned flex ───────────────────────────────
   BB already sets display:flex via .fl-menu-horizontal. We add justify-content
   and remove default list chrome. ------------------------------------------ */
.fp-nav .fl-menu .menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* ── Top-level links (items WITH submenu) ───────────────────────────────────
   Specificity: .fp-nav(1) .fl-menu(1) .menu(1) li.fl-has-submenu(1)
                .fl-has-submenu-container(1) a(element) = (0,5,1)
   Beats BB's compiled .fl-node-XXXX .fl-menu a = (0,2,1) ✓ ------------- */
.fp-nav .fl-menu .menu > li.fl-has-submenu > .fl-has-submenu-container > a {
  font-family: var(--font-h);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--slate-500);
  text-decoration: none;
  padding: 0.4rem 0.85rem;
  border-radius: var(--pill);
  transition: background 0.15s;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.fp-nav .fl-menu .menu > li.fl-has-submenu:hover > .fl-has-submenu-container > a {
  background: rgba(34,85,96,0.07);
}

/* ── Dropdown indicator arrow ───────────────────────────────────────────────
   BB native menu has no built-in arrow — we add one via ::after ------------- */
.fp-nav .fl-menu .menu > li.fl-has-submenu > .fl-has-submenu-container > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.45;
  margin-left: 0.3rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.fp-nav .fl-menu .menu > li.fl-has-submenu:hover > .fl-has-submenu-container > a::after {
  transform: rotate(180deg);
}

/* ── Dropdown panel ─────────────────────────────────────────────────────────
   BB renders position:absolute on .sub-menu. We add visual styling.
   Specificity: .fp-nav(1) .fl-menu(1) .sub-menu(1) = (0,3,0) ✓ ------------ */
.fp-nav .fl-menu .sub-menu {
  background: var(--s0);
  border-radius: var(--r);
  box-shadow: 0 8px 32px rgba(34,85,96,0.13), 0 2px 8px rgba(34,85,96,0.07);
  border: 1px solid var(--s4);
  padding: 0.45rem 0;
  min-width: 210px;
}
.fp-nav .fl-menu .sub-menu a {
  font-family: var(--font-b);
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--text-b);
  text-decoration: none;
  padding: 0.55rem 1.1rem;
  display: block;
  transition: color 0.12s, background 0.12s;
  white-space: nowrap;
}
.fp-nav .fl-menu .sub-menu a:hover {
  color: var(--green-500);
  background: rgba(23,147,85,0.05);
}

/* ── Separator items (menu-sep-above class on li) ───────────────────────────
   Adds visual rule above the first item after a separator group. ------------ */
.fp-nav .fl-menu .sub-menu li.menu-sep-above {
  border-top: 1px solid var(--s4);
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}

/* ── External link indicator ────────────────────────────────────────────────
   Appended to link text via ::after (not to inner span) --------------------- */
.fp-nav .fl-menu .sub-menu a[target="_blank"]::after {
  content: ' ↗';
  font-size: 0.75em;
  opacity: 0.55;
}

/* ── CTA button — "Get in touch" (nav-book class on li) ─────────────────────
   Specificity: (0,4,1) — beats BB's (0,2,1) link colour rule ✓ ------------- */
.fp-nav .fl-menu .menu > li.nav-book > a {
  font-family: var(--font-h);
  font-size: 0.84rem;
  font-weight: 600;
  background: var(--slate-900);
  color: #fff;
  text-decoration: none;
  padding: 0.4rem 1.15rem;
  border-radius: var(--pill);
  white-space: nowrap;
  transition: background 0.15s;
  display: inline-block;
}
.fp-nav .fl-menu .menu > li.nav-book > a:hover {
  background: var(--slate-500);
  color: #fff;
}


/* ── Shared: full-bleed rows with max-width content ── */
.fp-mg-hero .fl-row-content-wrap .fl-row-content,
.fp-mg-pitch .fl-row-content-wrap .fl-row-content,
.fp-mg-stats .fl-row-content-wrap .fl-row-content,
.fp-mg-work-header .fl-row-content-wrap .fl-row-content,
.fp-mg-work-grid .fl-row-content-wrap .fl-row-content,
.fp-mg-process-header .fl-row-content-wrap .fl-row-content,
.fp-mg-process-grid .fl-row-content-wrap .fl-row-content,
.fp-mg-testimonials .fl-row-content-wrap .fl-row-content,
.fp-mg-cta .fl-row-content-wrap .fl-row-content,
.fp-mg-quote .fl-row-content-wrap .fl-row-content {
  max-width: 100%; padding-left: 0; padding-right: 0; }

/* ── R1 — Hero (sl-hero sl-green) ── */
.fp-mg-hero .fl-row-content-wrap .fl-row-content {
  max-width: var(--max); padding: 80px 2rem; margin: 0 auto; }
.fp-mg-hero .fl-module-html .fl-html .sl-pill {
  display: inline-block; padding: 0.3rem 0.85rem; border-radius: var(--pill);
  background: rgba(23,147,85,0.1); color: var(--green-600);
  border: 1px solid rgba(23,147,85,0.2);
  font-size: 0.72rem; font-weight: 700; font-family: var(--font-h);
  letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 1.1rem; }
.fp-mg-hero .fl-module-heading .fl-heading {
  font-family: var(--font-h); font-size: clamp(2rem, 3.5vw, 3.2rem); font-weight: 700;
  color: var(--text-h); line-height: 1.08; letter-spacing: -0.03em;
  margin-bottom: 1rem; max-width: 520px; }
.fp-mg-hero .fl-module-rich-text .fl-rich-text p {
  font-size: 1rem; font-weight: 300; color: var(--text-b);
  line-height: 1.75; max-width: 460px; margin-bottom: 2rem; }
.fp-mg-hero .fl-module-button .fl-button {
  background: var(--green-500); color: var(--s0); border-radius: var(--pill);
  font-weight: 600; padding: 0.65rem 1.5rem; font-family: var(--font-h); font-size: 0.88rem; }
.fp-mg-hero .fl-module-button .fl-button:hover { background: var(--green-600); }
.fp-mg-hero .fl-row-content { background-color: var(--green-50); }
.fp-mg-hero .fl-module-photo .fl-photo-content img {
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
  mask-image: linear-gradient(to right, transparent 0%, black 30%);
  max-height: 420px; width: auto; display: block; margin: 0 auto; }

/* ── R2 — Pitch (rp-ti rp-ti--s1) ── */
.fp-mg-pitch .fl-row-content-wrap .fl-row-content {
  max-width: var(--max); padding: 80px 2rem; margin: 0 auto; }
.fp-mg-pitch h6.fl-heading {
  display: inline-block; font-family: var(--font-h); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--green-500); background: var(--green-50);
  border: 1px solid rgba(23,147,85,0.2); padding: 0.28rem 0.85rem;
  border-radius: var(--pill); margin-bottom: 1rem; }
.fp-mg-pitch h2.fl-heading {
  font-family: var(--font-h); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700;
  color: var(--text-h); letter-spacing: -0.025em; line-height: 1.18; margin: 0 0 1rem; }
.fp-mg-pitch .fl-module-rich-text .fl-rich-text p {
  font-size: 0.97rem; font-weight: 300; line-height: 1.82; color: var(--text-b); margin-bottom: 1.75rem; }
.fp-mg-pitch .fl-module-button .fl-button {
  background: var(--green-500); color: var(--s0); border-radius: var(--pill);
  font-weight: 600; padding: 0.65rem 1.5rem; font-family: var(--font-h); font-size: 0.88rem; }
.fp-mg-pitch .fl-module-button .fl-button:hover { background: var(--green-600); }
.fp-mg-pitch .fl-col:last-child .fl-photo-content {
  background: var(--s0); border-radius: var(--r-lg); padding: 1.25rem;
  box-shadow: 0 24px 64px rgba(34,85,96,0.14), 0 6px 18px rgba(34,85,96,0.08); }
.fp-mg-pitch .fl-col:last-child .fl-photo-img {
  width: 100%; display: block; border-radius: 8px; object-fit: contain; }

/* ── R3 — Stats (rp-stats rp-stats--s2) ── */
.fp-mg-stats .fl-row-content-wrap .fl-row-content {
  max-width: var(--max); padding: 60px 2rem; margin: 0 auto; text-align: center; }
.fp-mg-stats .fl-col-content { padding: 0 1rem; }
.fp-mg-stats h2.fl-heading {
  font-family: var(--font-h); font-size: clamp(2.4rem, 4vw, 3.6rem); color: var(--green-500);
  font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.fp-mg-stats h6.fl-heading {
  font-size: 0.82rem; color: var(--text-m); font-weight: 400;
  font-family: var(--font-b); margin-top: 0.375rem; letter-spacing: 0; text-transform: none; line-height: 1.4; }
.fp-mg-stats .fl-col:nth-child(3) .fl-rich-text p {
  font-size: 0.78rem; font-weight: 300; line-height: 1.5; color: var(--text-m); }
.fp-mg-stats .fl-col:last-child h2.fl-heading {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--green-50); color: var(--green-800);
  border: 1px solid rgba(23,147,85,0.2); border-radius: var(--pill);
  padding: 0.3rem 0.75rem; margin-bottom: 0.35rem; }

/* ── R4 — Work Areas (pw-section pw-section--green) ── */
.fp-mg-work-header .fl-row-content-wrap .fl-row-content {
  max-width: var(--max); padding: 80px 2rem 0; margin: 0 auto; }
.fp-mg-work-grid .fl-row-content-wrap .fl-row-content {
  max-width: var(--max); padding: 40px 2rem 80px; margin: 0 auto; }
.fp-mg-work-header h6.fl-heading {
  display: block; font-family: var(--font-b); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-500); margin-bottom: 0.5rem; }
.fp-mg-work-header h2.fl-heading {
  font-family: var(--font-h); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 700;
  color: var(--text-h); line-height: 1.2; margin: 0 0 0.75rem; }
.fp-mg-work-header .fl-module-rich-text .fl-rich-text p {
  font-size: 1rem; color: var(--text-m); max-width: 640px; line-height: 1.7; }
.fp-mg-work-grid .fl-module-heading .fl-heading {
  font-family: var(--font-h); font-size: var(--h4); font-weight: 600; color: var(--text-h); margin: 0 0 0.6rem; }
.fp-mg-work-grid .fl-module-rich-text .fl-rich-text p {
  font-size: var(--text-sm); color: var(--text-m); line-height: 1.7; }
.fp-mg-work-grid .fl-col-content {
  border-top: 3px solid var(--green-500); border-radius: var(--r); overflow: hidden; }

/* ── R5 — Process (pp-section pp-section--green) ── */
.fp-mg-process-header .fl-row-content-wrap .fl-row-content {
  max-width: var(--max); padding: 80px 2rem 0; margin: 0 auto; }
.fp-mg-process-grid .fl-row-content-wrap .fl-row-content {
  max-width: var(--max); padding: 40px 2rem 80px; margin: 0 auto; }
.fp-mg-process-header h6.fl-heading {
  display: block; font-family: var(--font-b); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-500); margin-bottom: 0.5rem; }
.fp-mg-process-header h2.fl-heading {
  font-family: var(--font-h); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 700;
  color: var(--text-h); line-height: 1.2; margin: 0; }
.fp-mg-process-grid .fl-module-html .fl-html {
  font-family: var(--font-h); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-500);
  display: block; margin-bottom: 0.75rem; }
.fp-mg-process-grid .fl-col-content {
  border-left: 3px solid rgba(23,147,85,0.35); padding-left: 1.25rem; }
.fp-mg-process-grid .fl-module-heading .fl-heading {
  font-family: var(--font-h); font-size: 1.05rem; font-weight: 600; color: var(--text-h); margin: 0 0 0.6rem; }
.fp-mg-process-grid .fl-module-rich-text .fl-rich-text p {
  font-size: var(--text-sm); color: var(--text-m); line-height: 1.7; }

/* ── R6 — Testimonials ── */
.fp-mg-testimonials .fl-row-content-wrap .fl-row-content {
  max-width: var(--max); padding: 0 2rem; margin: 0 auto; text-align: center; }
.fp-mg-testimonials .fl-module-heading:first-of-type .fl-heading {
  font-size: var(--h5); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--green-600); margin-bottom: 0.5rem; }
.fp-mg-testimonials .fl-module-heading:last-of-type .fl-heading {
  font-size: var(--h2); color: var(--text-h); font-weight: 700;
  line-height: var(--text-lh-h); margin-bottom: 3rem; }
.fp-mg-testimonials .fl-module-testimonials .fl-testimonial {
  background: var(--s0); border: 1px solid var(--s4); border-radius: var(--r);
  padding: 2.5rem 2.5rem 2rem;
  box-shadow: 0 2px 16px rgba(34,85,96,0.07); text-align: center; }
.fp-mg-testimonials .fl-module-testimonials .fl-testimonial-text p:first-child {
  font-family: var(--font-q); font-style: italic; font-size: 1.15rem;
  line-height: 1.7; color: var(--text-h); margin: 0 0 1.25rem;
  position: relative; padding-top: 2.75rem; }
.fp-mg-testimonials .fl-module-testimonials .fl-testimonial-text p:first-child::before {
  content: '\201C'; position: absolute; top: -0.25rem; left: 50%;
  transform: translateX(-50%); font-size: 4rem; line-height: 1;
  font-style: normal; color: var(--green-500); }
.fp-mg-testimonials .fl-module-testimonials .fl-testimonial-text p:last-child {
  font-family: var(--font-b); font-size: 0.75rem; font-weight: 600;
  color: var(--text-m); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.fp-mg-testimonials .fl-module-testimonials .bx-pager a.active {
  color: var(--green-500); }

/* ── R7 — FAQ ── */
.fp-mg-faq .fl-row-content-wrap .fl-row-content {
  max-width: 760px; padding: 0 2rem; margin: 0 auto; }
.fp-mg-faq .fl-module-heading .fl-heading {
  font-size: var(--h2); color: var(--text-h); font-weight: 700;
  line-height: var(--text-lh-h); margin-bottom: 2rem; }
.fp-mg-faq .fl-accordion-button {
  border-bottom: 1px solid var(--s4); padding: 1rem 0; }
.fp-mg-faq .fl-accordion-button-label {
  font-family: var(--font-h); font-size: var(--h4); color: var(--text-h); font-weight: 600; }
.fp-mg-faq .fl-accordion-item-active .fl-accordion-button {
  border-bottom-color: var(--green-500); }
.fp-mg-faq .fl-accordion-item-active .fl-accordion-button-label {
  color: var(--green-600); }
.fp-mg-faq .fl-accordion-content p {
  color: var(--text-b); line-height: var(--text-lh); padding: 1rem 0; }

/* ── R8 — CTA ── */
.fp-mg-cta .fl-row-content-wrap .fl-row-content {
  max-width: var(--max-w); padding: 2.5rem 2rem; margin: 0 auto;
  display: flex; align-items: center; }
.fp-mg-cta .fl-module-heading .fl-heading {
  color: var(--s0); font-size: 1.3rem; font-weight: 700;
  line-height: var(--text-lh-h); margin-bottom: 0.3rem; }
.fp-mg-cta .fl-module-rich-text .fl-rich-text p {
  color: rgba(255,255,255,0.75); font-size: 0.9rem; line-height: 1.65; }
.fp-mg-cta .fl-module-button .fl-button {
  background: var(--s0); color: var(--slate-900); border-radius: var(--pill);
  font-weight: 600; font-size: 0.88rem; padding: 0.65rem 1.5rem;
  white-space: nowrap; }
.fp-mg-cta .fl-module-button .fl-button:hover {
  background: rgba(255,255,255,0.88); }

/* ── R9 — Quote ── */
/* Note: petal decorations require PETAL_URL — set in 5th-place.css manually */
.fp-mg-quote .fl-row-content-wrap {
  position: relative; overflow: hidden; padding: 5rem 2rem; }
.fp-mg-quote .fl-row-content-wrap .fl-row-content {
  max-width: 640px; margin: 0 auto; text-align: center;
  position: relative; z-index: 1; }
.fp-mg-quote .fl-module-rich-text:nth-of-type(1) .fl-rich-text blockquote {
  font-family: var(--font-q); font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: var(--s0); line-height: 1.65; font-style: italic;
  margin: 0 0 1rem; font-weight: 400; border: none; padding: 0; }
.fp-mg-quote .fl-module-rich-text:nth-of-type(2) .fl-rich-text p {
  font-family: var(--font-b); font-size: 0.75rem; font-weight: 500;
  color: rgba(255,255,255,0.45); letter-spacing: 0.1em; text-transform: uppercase; }


/* ── Row colour variants ──
   --accent        = 500 shade — borders, decorative (NOT text on light bg)
   --accent-dark   = 800 shade — small text on tint bg (WCAG AA pass)
   --accent-btn    = 600 shade — button bg with white text (WCAG AA pass)
   --accent-btn-tx = button text colour (white for most, slate-900 for yellow)
   --accent-bg     = 50 shade — tint backgrounds
   --accent-border = semi-transparent border
── */
.fp-ti-green    { --accent: var(--green-500);    --accent-dark: var(--green-800);    --accent-btn: var(--green-600);    --accent-btn-tx: var(--s0);          --accent-bg: var(--green-50);    --accent-border: rgba(23,147,85,0.2); }
.fp-ti-cerulean { --accent: var(--cerulean-500); --accent-dark: var(--cerulean-800); --accent-btn: var(--cerulean-600); --accent-btn-tx: var(--s0);          --accent-bg: var(--cerulean-50); --accent-border: rgba(0,166,251,0.2); }
.fp-ti-lavender { --accent: var(--lav-500);      --accent-dark: var(--lav-800);      --accent-btn: var(--lav-500);      --accent-btn-tx: var(--s0);          --accent-bg: var(--lav-50);      --accent-border: rgba(180,119,235,0.2); }
.fp-ti-yellow   { --accent: var(--yellow-500);   --accent-dark: var(--yellow-800);   --accent-btn: var(--yellow-500);   --accent-btn-tx: var(--yellow-text); --accent-bg: var(--yellow-50);   --accent-border: rgba(253,202,64,0.3); }

/* ── Ti — Eyebrow pill ── */
.fp-ti-eyebrow .fl-rich-text p {
  display: inline-block; font-family: var(--font-h); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent-dark, var(--text-h)); background: var(--accent-bg, var(--slate-50));
  border: 1px solid var(--accent-border, rgba(34,85,96,0.2)); padding: 0.28rem 0.85rem;
  border-radius: var(--pill); margin: 0;
}

/* ── Ti — Button ── */
.fl-builder-content .fp-ti-button .fl-button,
.fl-builder-content .fp-ti-button a.fl-button:visited {
  background-color: var(--accent-btn, var(--text-h)); color: var(--accent-btn-tx, var(--s0));
}
.fl-builder-content .fp-ti-button .fl-button *,
.fl-builder-content .fp-ti-button a.fl-button:visited * {
  color: var(--accent-btn-tx, var(--s0));
}
.fl-builder-content .fp-ti-button .fl-button:hover {
  opacity: 0.85; transform: translateY(-1px);
}

/* ── Key Takeaway Box ── */
/* Component styling — works standalone, no row variant class needed */
.fp-ab-takeaway .fl-rich-text .ab-takeaway {
  margin: 2rem 0; background: var(--s2); border-radius: 12px;
  padding: 1.5rem 1.75rem;
  border-top: 3px solid var(--accent, var(--text-h));
}
.fp-ab-takeaway .fl-rich-text .ab-takeaway-label {
  display: block; font-family: var(--font-h); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-dark, var(--text-h)); margin-bottom: 0.85rem;
}
.fp-ab-takeaway .fl-rich-text .ab-takeaway-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.fp-ab-takeaway .fl-rich-text .ab-takeaway-list li {
  font-family: var(--font-b); font-size: 0.92rem; line-height: 1.62;
  color: var(--text-b); padding-left: 1.5rem; position: relative;
}
.fp-ab-takeaway .fl-rich-text .ab-takeaway-list li::before {
  content: '\2713'; position: absolute; left: 0;
  color: var(--accent-dark, var(--text-h)); font-weight: 700; font-size: 0.82rem; top: 0.08em;
}

/* ── Practitioner Hero — Layout ── */
.fp-ph .fl-row-content-wrap {
  background-color: var(--accent-bg, var(--slate-50));
}
/* Text column: breathing room */
.fp-ph-text .fl-col-content {
  padding-left: 3rem;
  padding-right: 3rem;
}

/* ── Practitioner Hero — Portrait column ── */
/* removed — old rule conflicting with saved component bridge CSS */
/* Credentials border-bottom */
.fp-ph-creds .fl-rich-text p {
  font-family: var(--font-h); font-size: 0.78rem; font-weight: 500;
  color: var(--text-m); letter-spacing: 0.03em;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--s4);
}

/* ── FAQ Accordion — matches body-library.html ── */
/* BB base: .fl-accordion-small .fl-accordion-button = 0,2,0
   Our selectors must be 0,3,0+ to win */

/* Wrapper flex layout with gap between items */
.fl-module.fp-ab-faq-accordion .fl-accordion { display: flex; flex-direction: column; gap: 0.65rem; }

/* Items: bordered cards with rounded corners */
.fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-item {
  border: 1px solid var(--s4); border-radius: var(--r);
  overflow: hidden; background: var(--s0);
  transition: border-color 0.15s;
}
.fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-item.fl-accordion-item-active {
  border-color: var(--accent-border, rgba(0,166,251,0.35));
}

/* Button: flex layout, override BB display:table */
.fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-button {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; cursor: pointer;
  background: var(--accent-bg, var(--s0));
  border-bottom: none;
}
.fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-item-active .fl-accordion-button {
  border-bottom: 1px solid var(--s4);
}

/* Label: override BB display:table-cell */
.fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-button-label {
  display: block; width: auto;
  font-family: var(--font-h); font-weight: 600; font-size: 0.95rem;
  color: var(--accent-dark, var(--text-h)); transition: color 0.15s;
}
.fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-item-active .fl-accordion-button-label {
  color: var(--accent, var(--cerulean-500));
}

/* Icon: small chevron, override BB opacity */
.fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-button .fl-accordion-button-icon {
  display: block; font-size: 0.85rem; color: var(--accent-dark, var(--text-m));
  opacity: 1; transition: color 0.15s; margin-inline-start: auto;
}
.fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-item-active .fl-accordion-button-icon {
  color: var(--accent, var(--cerulean-500));
}

/* Content panel */
.fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-content {
  padding: 1.1rem 1.25rem 1.25rem;
  font-family: var(--font-b); font-size: 0.92rem;
  line-height: 1.75; color: var(--text-b);
}


/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE TEMPLATE v2 — ah-hero, sb-layout, sidebar panels, ig-section, CTA
   Components: signed-off library designs adapted for BB Themer template 13620
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Article Hero (ah-hero) ─────────────────────────────────────────────────
   Full-viewport-width row. Container is fixed 1100px. 2-col CSS grid:
   57% title/deck/byline  |  43% hero image (mix-blend-mode: multiply)
   ─────────────────────────────────────────────────────────────────────────── */

/* Row background fills viewport (handled by BB full_width row setting).
   Inner HTML module provides the layout container. */
.fp-ah-hero .fl-row-content { max-width: 100%; }

.fp-ah-hero .ah-hero-container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 2rem;
  padding-top: calc(var(--nav-h, 68px) + 1rem);
}
.fp-ah-hero .ah-hero-grid {
  display: grid;
  grid-template-columns: 57fr 43fr;
  min-height: 480px;
}
.fp-ah-hero .ah-hero-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 3.5rem 3rem 0;
}
.fp-ah-hero .ah-hero-title {
  font-family: var(--font-h); font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  line-height: 1.1; letter-spacing: -0.025em;
  color: var(--text-h); margin: 0 0 0.9rem;
}
.fp-ah-hero .ah-hero-deck {
  font-family: var(--font-b); font-weight: 300; font-size: 1rem;
  line-height: 1.8; color: var(--text-m); margin: 0 0 1.75rem;
}
.fp-ah-hero .ah-byline {
  display: flex; align-items: center; gap: 0.85rem;
  padding-top: 1.25rem; border-top: 1px solid var(--s4);
  flex-wrap: wrap;
}
.fp-ah-hero .ah-byline-avatar {
  width: 40px; height: 40px; border-radius: 8px; overflow: hidden;
  flex-shrink: 0; border: 2px solid rgba(23,147,85,0.22);
}
.fp-ah-hero .ah-byline-avatar img { width: 100%; height: 100%; object-fit: contain; }
.fp-ah-hero .ah-byline-meta { display: flex; flex-direction: column; gap: 0.18rem; }
.fp-ah-hero .ah-byline-name {
  font-family: var(--font-h); font-weight: 600; font-size: 0.86rem;
  color: var(--green-500); text-decoration: none;
}
.fp-ah-hero .ah-byline-details {
  font-family: var(--font-h); font-size: 0.74rem; color: var(--text-m);
}
.fp-ah-hero .ah-share-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-left: auto;
  font-family: var(--font-h); font-size: 0.76rem; font-weight: 600;
  color: var(--text-m); background: none; border: 1px solid var(--s4);
  padding: 0.32rem 0.85rem; border-radius: var(--pill);
  cursor: pointer; transition: border-color 0.13s, color 0.13s;
}
.fp-ah-hero .ah-share-btn:hover { border-color: var(--green-500); color: var(--green-500); }
.fp-ah-hero .ah-hero-right { position: relative; overflow: hidden; }
.fp-ah-hero .ah-hero-img {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 100%; width: auto;
  mix-blend-mode: multiply;
}
.fp-ah-hero .ah-hero-right::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  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%);
}

/* ── Sidebar layout (sb-layout) ──────────────────────────────────────────────
   BB uses floats for .fl-col. Override with CSS grid on .fl-col-group
   to achieve: 1fr content + 280px sticky sidebar.
   ─────────────────────────────────────────────────────────────────────────── */

.fp-sb-layout .fl-row-content {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem 2rem;
}
.fp-sb-layout > .fl-row-content-wrap > .fl-row-content > .fl-col-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 2rem;
  align-items: start;
}
/* Cancel BB floats on layout columns — scoped to direct children of sb-layout grid only */
.fp-sb-layout .fl-col-group > .fp-content-col,
.fp-sb-layout .fl-col-group > .fp-sidebar-col { float: none; width: auto !important; }

/* Sticky sidebar: panels stick below the nav */
.fp-sb-layout .fp-sidebar-col > .fl-col-content {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  display: flex; flex-direction: column; gap: 1.25rem;
}

/* Gap between stacked sidebar modules */
.fp-sb-layout .fp-sidebar-col .fl-module { margin-bottom: 0; }

/* ── Article body typography — overrides BB Customizer globals ────────────
   BB Customizer sets H2 to green-500 36px 500w. Body text to ~22px.
   Library spec: H2 = text-h 1.55rem 700w, body = text-b 1rem.
   3-class selectors beat BB's 2-class Customizer rules.
   ─────────────────────────────────────────────────────────────────────────── */
.fp-sb-layout .fp-content-col .fl-rich-text h2 {
  font-family: var(--font-h); font-weight: 700;
  font-size: 1.55rem; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--text-h);
  margin: 2.5rem 0 0.85rem;
}
.fp-sb-layout .fp-content-col .fl-rich-text h3 {
  font-family: var(--font-h); font-weight: 600;
  font-size: 1.18rem; line-height: 1.28;
  letter-spacing: -0.015em; color: var(--text-h);
  margin: 2rem 0 0.7rem;
}
.fp-sb-layout .fp-content-col .fl-rich-text p {
  font-family: var(--font-b);
  font-size: 1rem; line-height: 1.78;
  color: var(--text-b); margin: 0 0 1.25rem;
}
.fp-sb-layout .fp-content-col .fl-rich-text p:last-child { margin-bottom: 0; }
.fp-sb-layout .fp-content-col .fl-rich-text p a {
  color: var(--cerulean-800); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.fp-sb-layout .fp-content-col .fl-rich-text ul,
.fp-sb-layout .fp-content-col .fl-rich-text ol {
  font-family: var(--font-b); font-size: 1rem;
  line-height: 1.78; color: var(--text-b);
  margin: 0 0 1.25rem;
}

/* ── Pull quote — within content column ──────────────────────────────────── */
/* In the sidebar layout, the pull quote stays within the content column.
   Styled as a centred, elegant quote block — warm linen background, no border. */
/* Pull quote: --s2 bg, Lora italic, cerulean-800, centred.
   Mobile spec: m-pullquote — padding 1.75rem, no border-radius.
   Desktop: slight radius, wider padding. */
/* Standfirst desktop: larger font, green left border accent (mobile decision 2026-03-21) */
.fl-module.fp-ab-standfirst .fl-rich-text {
  font-size: 1.13rem;
  line-height: 1.68;
  color: var(--slate-500);
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  border-left: 3px solid var(--green-500);
}

/* Pull quote desktop: s2 bg, centred, cerulean-800 (mobile decision 2026-03-21) */
.fp-ab-pullquote-row {
  margin: 2rem 0;
}
.fp-ab-pullquote-row .fl-row-content-wrap {
  background: transparent !important;
  padding: 0 !important;
}
.fl-module.fp-ab-pullquote .fl-rich-text {
  padding: 2rem;
  background: var(--s2);
  border-radius: 8px;
  text-align: center;
}
.fl-module.fp-ab-pullquote .fl-rich-text,
.fl-module.fp-ab-pullquote .fl-rich-text p {
  font-family: var(--font-q);
  font-style: italic;
  font-weight: 400;
  text-align: center;
  color: var(--cerulean-800);
  font-size: 1.22rem;
  line-height: 1.62;
}

/* ── Sidebar panel base ───────────────────────────────────────────────────── */

.sb-panel {
  background: var(--s0);
  border-radius: 12px;
  border: 1px solid rgba(34,85,96,0.08);
  overflow: hidden;
}
.sb-panel-inner { padding: 1.35rem 1.3rem; }

/* ── Sidebar: Table of Contents ──────────────────────────────────────────── */

.sb-toc-title {
  font-family: var(--font-h); font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-m); margin: 0 0 0.8rem;
}
.sb-toc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.sb-toc li a {
  display: block; font-family: var(--font-h); font-size: 0.81rem; font-weight: 500;
  color: var(--text-b); text-decoration: none;
  padding: 0.38rem 0.65rem; border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sb-toc li a.active,
.sb-toc li a.is-active {
  border-left-color: var(--green-500);
  color: var(--green-500); font-weight: 600;
  background: rgba(23,147,85,0.06);
}
.sb-toc li.sb-toc-sub a { padding-left: 1.3rem; font-size: 0.75rem; color: var(--text-m); }
.sb-toc-loading { font-family: var(--font-b); font-size: 0.8rem; color: var(--text-m); margin: 0; }

/* ── Sidebar: Author card ────────────────────────────────────────────────── */

.sb-eyebrow {
  font-family: var(--font-h); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-m); margin: 0 0 0.75rem;
}
.sb-author-top { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.sb-author-photo {
  width: 52px; height: 52px; border-radius: var(--r); overflow: hidden;
  flex-shrink: 0; border: 2px solid rgba(23,147,85,0.2);
}
.sb-author-photo img { width: 100%; height: 100%; object-fit: contain; }
.sb-author-name {
  font-family: var(--font-h); font-weight: 700; font-size: 0.95rem;
  color: var(--text-h); letter-spacing: -0.01em; margin: 0 0 0.15rem;
}
.sb-author-role {
  font-family: var(--font-b); font-size: 0.75rem; color: var(--text-m); margin: 0;
}
.sb-author-cta {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-size: 0.8rem; font-weight: 600;
  color: var(--green-500); text-decoration: none;
  padding: 0.55rem 1rem; border-radius: var(--pill);
  border: 1.5px solid var(--green-500);
  transition: background 0.13s, color 0.13s, transform 0.13s;
}
.sb-author-cta:hover { background: var(--green-500); color: var(--s0); transform: translateY(-1px); }

/* ── Sidebar: Related reading ────────────────────────────────────────────── */

.sb-related-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.sb-related-item { padding: 0.7rem 0; border-bottom: 1px solid var(--s3); }
.sb-related-item:first-child { padding-top: 0; }
.sb-related-item:last-child  { border-bottom: none; padding-bottom: 0; }
.sb-related-title {
  font-family: var(--font-h); font-size: 0.83rem; font-weight: 600;
  color: var(--text-h); text-decoration: none; line-height: 1.35; display: block;
}
.sb-related-title:hover { color: var(--green-500); }

/* ── Tags strip (below post content) ─────────────────────────────────────── */

.fp-ab-tags { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--s4); }
.fp-ab-tags .ab-tags-label {
  display: block; font-family: var(--font-h); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-m); margin: 0 0 0.65rem;
}
/* [wpbb post:terms_list] renders plain <a> tags — style as pills */
.fp-ab-tags .ab-tags-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fp-ab-tags .ab-tags-list a {
  font-family: var(--font-h); font-size: 0.76rem; font-weight: 500;
  color: var(--cerulean-800); background: var(--cerulean-50);
  border: 1px solid var(--cerulean-200);
  padding: 0.3rem 0.9rem; border-radius: var(--pill);
  text-decoration: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fp-ab-tags .ab-tags-list a:hover {
  background: rgba(0,166,251,0.08);
  border-color: rgba(0,166,251,0.3);
  color: var(--cerulean-800);
}

/* ── Author strip (below tags) ───────────────────────────────────────────── */
/* Wraps [5p_author_block] shortcode output. Outer div provides top border + bg. */

.fp-ab-author-strip {
  margin-top: 2.5rem;
  background: var(--s1);
  border-bottom: 3px solid var(--green-500);
  overflow: hidden;
}

/* ── Related articles grid (ig-section) ──────────────────────────────────── */

.fp-ig-section .fl-row-content { max-width: var(--max); margin: 0 auto; padding: 3rem 2rem; }
.fp-ig-section .ig-container { }
.fp-ig-section .ig-eyebrow {
  font-family: var(--font-h); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-m);
  text-align: center; margin: 0 0 2rem;
}
.fp-ig-section .ig-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.fp-ig-section .ig-card {
  background: var(--s0); border-radius: 14px;
  border: 1px solid rgba(34,85,96,0.08);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.fp-ig-section .ig-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(34,85,96,0.09); border-color: rgba(34,85,96,0.14); }
.fp-ig-section .ig-card-img-link { display: block; height: 180px; overflow: hidden; flex-shrink: 0; }
.fp-ig-section .ig-card-img-link img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; mix-blend-mode: multiply; display: block; }
.fp-ig-section .ig-card-body { padding: 1.25rem 1.75rem 1.75rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1; }
.fp-ig-section .ig-card-tag {
  font-family: var(--font-h); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green-500); margin: 0 0 0.35rem;
}
.fp-ig-section .ig-card-title {
  font-family: var(--font-h); font-weight: 600; font-size: 0.92rem;
  color: var(--text-h); text-decoration: none; line-height: 1.4; display: block;
}
.fp-ig-section .ig-card-title:hover { color: var(--green-500); }

/* ── CTA strip ───────────────────────────────────────────────────────────── */

.fp-cta-strip--light {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--s1);
}
.fp-cta-strip--light .cta-container { max-width: 640px; margin: 0 auto; }
.fp-cta-strip--light .cta-eyebrow {
  font-family: var(--font-h); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green-500); margin: 0 0 0.75rem;
}
.fp-cta-strip--light .cta-heading {
  font-family: var(--font-h); font-weight: 700; font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  letter-spacing: -0.02em; line-height: 1.2; color: var(--text-h); margin: 0 0 0.9rem;
}
.fp-cta-strip--light .cta-body {
  font-family: var(--font-b); font-size: 1rem; line-height: 1.72;
  color: var(--text-m); margin: 0 0 1.75rem;
}
.fp-cta-strip--light .cta-btn {
  display: inline-flex; align-items: center;
  font-family: var(--font-h); font-size: 0.95rem; font-weight: 600;
  text-decoration: none; padding: 0.85rem 2.2rem; border-radius: var(--pill);
  transition: background 0.15s, transform 0.15s;
}
.fp-cta-strip--light .cta-btn--green {
  background: var(--green-500); color: var(--s0);
}
.fp-cta-strip--light .cta-btn--green:hover { background: var(--green-600); transform: translateY(-2px); }

/* ── GEO definition (fp-ab-geo-summary) ──────────────────────────────────── */
.fl-module.fp-ab-geo-summary .fl-rich-text {
  background: var(--green-50);
  border-left: 3px solid var(--green-500);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-b);
}

/* ── Category pill — desktop + mobile ─────────────────────────────────────── */
.fp-ah-hero .ah-category-wrap { margin-bottom: 1rem; }
.fp-ah-hero .ah-category-wrap a {
  display: inline-flex; align-items: center;
  font-family: var(--font-h); font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--s0); background: var(--green-500);
  padding: 0.28rem 0.75rem; border-radius: var(--pill);
  text-decoration: none; transition: background 0.15s;
}
.fp-ah-hero .ah-category-wrap a:hover { background: var(--green-600); }

/* Suppress BB clearfix pseudo-element inside grid (it becomes a ghost grid item) — scoped to direct col-group only */
.fp-sb-layout > .fl-row-content-wrap > .fl-row-content > .fl-col-group::after,
.fp-sb-layout > .fl-row-content-wrap > .fl-row-content > .fl-col-group::before { display: none; }

/* Explicit grid-column placement to guard against reordering */
.fp-sb-layout .fp-content-col { grid-column: 1; }
.fp-sb-layout .fp-sidebar-col { grid-column: 2; }


/* ── Mobile menu touch target — Apple HIG 44px minimum ───────────────────── */
.fl-module-pp-advanced-menu .pp-advanced-menu-mobile-toggle { min-height: 44px; }

/* ── Article template — mobile responsive ───────────────────────────────────
   Design principle: mobile is NOT a mini-desktop. Different layout entirely.
   Hero: full-bleed image at top (banner), then title + compact byline.
   Sidebar: hidden (ToC, author card). Author strip handles author context.
   Share: hidden in hero (share after reading). TODO: add at bottom.
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {

  /* Hero: image FIRST (full-bleed banner), text SECOND */
  .fp-ah-hero .ah-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  /* No top padding — image fills top, sits behind fixed nav (cinematic) */
  .fp-ah-hero .ah-hero-container { padding-top: 0; }

  .fp-ah-hero .ah-hero-right {
    display: block;
    order: 1;
    height: 220px;
    border-radius: 0;
    overflow: hidden;
  }
  .fp-ah-hero .ah-hero-img {
    position: static;
    transform: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    mix-blend-mode: normal;
  }
  /* Subtle fade at bottom only */
  .fp-ah-hero .ah-hero-right::after {
    background: linear-gradient(to bottom, transparent 70%, rgba(250,249,247,0.6) 88%, #faf9f7 100%);
  }

  /* Suppress BB row default padding (20px top/bottom) — hero→content gap fix */
  .fp-ah-hero .fl-row-content-wrap { padding-bottom: 0; }
  .fp-sb-layout .fl-row-content-wrap { padding-top: 0; }

  /* Title + byline: comes after image */
  .fp-ah-hero .ah-hero-left {
    order: 2;
    padding: 2rem 1.25rem 1.75rem;
    justify-content: flex-start;
    background: var(--s0);
  }
  /* Avatar: circular on mobile (36px) */
  .fp-ah-hero .ah-byline-avatar { width: 36px; height: 36px; border-radius: 50%; }
  /* Hide excerpt — standfirst in article body serves this role */
  .fp-ah-hero .ah-hero-deck { display: none; }

  /* Hide share button — share after reading, not before */
  .fp-ah-hero .ah-share-btn { display: none; }

  /* Byline: show author name + role stacked on mobile */
  .fp-ah-hero .ah-byline { gap: 0.75rem; }
  .fp-ah-hero .ah-byline-meta { gap: 0.25rem; }
  .fp-ah-hero .ah-byline-role {
    font-family: var(--font-b);
    font-size: 0.72rem;
    color: var(--text-m);
  }

  /* Sidebar layout: switch off CSS grid entirely — columns stack as natural blocks.
     CSS grid 1fr overflows the container on mobile (min-content issue).
     With display:block, content col and sidebar col stack in DOM order.
     CRITICAL: BB sets display:grid with high specificity — !important required. */
  .fp-sb-layout .fl-col-group { display: block !important; }
  .fp-sb-layout .fp-content-col,
  .fp-sb-layout .fp-sidebar-col {
    width: 100% !important;   /* Override BB inline percentage width */
    float: none !important;
    display: block;
  }
  .fp-sb-layout .fp-sidebar-col > .fl-col-content { position: static; gap: 0; }

  /* Hide redundant panels */
  .sb-toc-wrap,
  .sb-author-wrap { display: none !important; }

  /* Sidebar column: hidden on mobile — IG related articles grid replaces it */
  .fp-sb-layout .fp-sidebar-col { display: none; }

  /* Zero BB default row padding — it compounds at TWO nesting levels (template row +
     post-content inner rows) turning 390px viewport into ~95px text column.
     Content padding is owned by .fp-content-col (1.25rem) and component CSS. */
  .fp-sb-layout > .fl-row-content-wrap > .fl-row-content { padding: 0 !important; }
  .fp-sb-layout .fl-builder-content .fl-row-content { padding: 0 !important; }

  /* Body text: side padding on mobile — this is the ONLY horizontal padding layer */
  .fp-sb-layout .fp-content-col > .fl-col-content { padding: 0 1.25rem; }

  /* Body typography — mobile overrides */
  .fp-sb-layout .fp-content-col .fl-rich-text h2 {
    font-size: 1.25rem; margin: 2rem 0 0.75rem;
  }

  /* Author strip: stacked column, --s1 bg, green bottom border */
  .fp-ab-author-strip {
    background: var(--s1);
    border-top: none;
    border-bottom: 3px solid var(--green-500);
    border-radius: 0;
    margin-top: 0;
  }
  .fp-ab-author-strip .ab-author-strip {
    flex-direction: column; gap: 1rem; align-items: flex-start;
    padding: 1.5rem 1.25rem;
  }
  .fp-ab-author-strip .ab-author-strip__photo { width: 72px; height: 72px; border-radius: 50%; }
  .fp-ab-author-strip .ab-author-strip__name { font-size: 1rem; }
  .fp-ab-author-strip .ab-author-strip__creds { font-size: 0.75rem; }
  .fp-ab-author-strip .ab-author-strip__body p { font-size: 0.875rem; }

  /* GEO definition: vertical breathing room — side margins zeroed (content col owns horizontal padding) */
  .fl-module.fp-ab-geo-summary .fl-rich-text { margin: 1.5rem 0 1rem; }

  /* FAQ accordion: line-separated style (not card-style) on mobile
     Side padding zeroed — content col owns horizontal spacing */
  .fl-module.fp-ab-faq-accordion { padding: 0.5rem 0 1.5rem; }
  .fl-module.fp-ab-faq-accordion .fl-accordion { gap: 0; }
  .fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-item {
    border: none; border-top: 1px solid var(--s4);
    border-radius: 0; background: transparent;
  }
  .fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-item:last-child {
    border-bottom: 1px solid var(--s4);
  }
  .fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-button {
    padding: 0.9rem 0; background: transparent; border-bottom: none;
  }
  .fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-item-active .fl-accordion-button {
    border-bottom: none;
  }
  .fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-button-label { font-size: 0.9rem; }
  .fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-content {
    padding: 0 0 0.9rem; font-size: 0.875rem;
  }
  .fl-module.fp-ab-faq-accordion .fl-accordion .fl-accordion-button .fl-accordion-button-icon {
    color: var(--green-500);
  }

  /* Tags: hidden on mobile (signed off 2026-03-21) */
  .fp-ab-tags { display: none; }

  /* IG grid: single column, compact cards */
  .fp-ig-section .ig-grid { grid-template-columns: 1fr; }
  .fp-ig-section .fl-row-content { padding: 2rem 1.25rem; }
  .fp-ig-section .ig-card {
    background: var(--s3); border-radius: 8px;
    padding: 0.9rem 1rem; border: none;
  }
  .fp-ig-section .ig-card-img-link { display: none; }
  .fp-ig-section .ig-card-body { padding: 0; }
  .fp-ig-section .ig-card-title { font-size: 0.88rem; }
  .fp-ig-section .ig-card-tag { font-size: 0.62rem; margin-bottom: 0.35rem; }

  /* CTA strip: mobile sizing */
  .fp-cta-strip--light { padding: 2.5rem 1.25rem; }
  .fp-cta-strip--light .cta-heading { font-size: 1.35rem; }
  .fp-cta-strip--light .cta-body { font-size: 0.9rem; }
  .fp-cta-strip--light .cta-btn { font-size: 0.9rem; padding: 0.8rem 2rem; }

  /* Standfirst: --s0 bg, green left border — side margins zeroed because
     content column already provides 1.25rem horizontal padding.
     !important required: BB auto-spacing re-applies side margins at higher specificity. */
  .fl-module.fp-ab-standfirst .fl-rich-text p { font-size: 1rem; line-height: 1.72; }
  .fl-module.fp-ab-standfirst .fl-rich-text {
    background: var(--s0);
    border-left: 3px solid var(--green-500);
    border-bottom: none;
    padding: 0.9rem 1rem;
    margin: 0 0 1.5rem !important;
    color: var(--text-b);
  }

  /* Separator: BB default width is ~71% — force full-width on mobile */
  .fp-sb-layout .fp-content-col .fl-separator { width: 100% !important; }

  /* Pull quote mobile: same s2/centred as desktop, just smaller + no radius */
  .fp-ab-pullquote-row { margin: 1.5rem 0; }
  .fl-module.fp-ab-pullquote .fl-rich-text {
    border-radius: 0;
    padding: 1.75rem;
  }
  .fl-module.fp-ab-pullquote .fl-rich-text,
  .fl-module.fp-ab-pullquote .fl-rich-text p {
    font-size: 1.25rem;
  }
}

@media (max-width: 600px) {
  .fp-ah-hero .ah-hero-container { padding-inline: 1rem; }
  .fp-ah-hero .ah-hero-title { font-size: clamp(1.65rem, 7vw, 2rem); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SAVED COMPONENT BRIDGE CSS
   Built 2026-03-27. One block per saved component.
   Selector pattern: .fp-[component] .fl-module-X .fl-element (3 classes)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Practitioner Hero (fp-ph) ────────────────────────────────────────────── */
/* Library source: .ph-hero — 62/38 grid, min-height 500px, overflow hidden */
/* CSS copied from: design/row-library.css lines 483–543 (ph-* rules)       */

/* Stacking context fix — blend target must have the row bg colour */
.fp-ph .fl-row-content {
  background-color: inherit;
}

/* BB owns width: width="full" (bg edge-to-edge), content_width="fixed" at 1320px.
   Matches library: max-width: var(--max-w) on ph-hero. No bridge CSS width overrides. */

/* Text column — vertical centre, flex layout. BB owns padding via column settings. */
.fp-ph .fp-ph-text .fl-col-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Eyebrow pill — ph-pill: 0.72rem, 700, uppercase, pill shape */
.fp-ph .fp-ph-pill .fl-rich-text p {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-h);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: var(--pill);
  margin-bottom: 0.9rem;
}

/* H1 name — ph-name: var(--h1) = 3.33rem/60px from tokens */
.fp-ph .fp-ph-name .fl-heading {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: var(--h1);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text-h);
  margin: 0 0 0.6rem;
}

/* Credentials — ph-creds: 0.78rem, 500, with border-bottom separator */
.fp-ph .fp-ph-creds .fl-rich-text p {
  font-family: var(--font-h);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-m);
  letter-spacing: 0.03em;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--s4);
}

/* Location — ph-location: 0.78rem, muted */
.fp-ph .fp-ph-location .fl-rich-text p {
  font-family: var(--font-h);
  font-size: 0.78rem;
  color: var(--text-m);
  margin-bottom: 0.5rem;
}

/* Contact — ph-contact: links in cerulean, inline with gap */
.fp-ph .fp-ph-contact .fl-rich-text p {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.fp-ph .fp-ph-contact .fl-rich-text a {
  font-family: var(--font-h);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--cerulean-800);
  text-decoration: none;
}
.fp-ph .fp-ph-contact .fl-rich-text a:hover {
  text-decoration: underline;
}

/* Bio — ph-bio: 1rem, 300 weight, 1.75 line-height */
.fp-ph .fp-ph-bio .fl-rich-text p {
  font-family: var(--font-b);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-b);
  max-width: 460px;
  margin-bottom: 2rem;
}

/* CTA button — ph-btn: 0.88rem, 600, pill radius */
.fp-ph .fp-ph-btn .fl-button {
  font-family: var(--font-h);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border-radius: var(--pill);
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  align-self: flex-start;
  transition: background 0.15s, transform 0.15s;
}
.fp-ph .fp-ph-btn .fl-button:hover {
  transform: translateY(-1px);
}

/* Portrait column — centred, bg inherited for blend */
.fp-ph .fp-ph-portrait {
  position: relative;
  min-height: 35vw;
}
.fp-ph .fp-ph-portrait .fl-col-content {
  overflow: visible;
  background-color: inherit;
  min-height: 35vw;
}
/* Neutralise intermediate positioned elements — abs on img targets .fp-ph-portrait */
.fp-ph .fp-ph-portrait .fl-photo {
  position: static;
  background-color: inherit;
}
.fp-ph .fp-ph-portrait .fl-photo-content {
  position: static;
}
/* Portrait image — library-matched: abs position, vw height, left-fade mask */
.fp-ph .fp-ph-portrait .fl-photo img {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  height: 32vw;
  width: auto;
  max-width: none;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
  mask-image: linear-gradient(to right, transparent 0%, black 30%);
}

/* ── Colour variants — Practitioner Hero pill + button ─────────────────── */
/* Green */
.fp-ti-green .fp-ph-pill .fl-rich-text p {
  color: var(--green-600);
  background: rgba(23,147,85,0.1);
  border: 1px solid rgba(23,147,85,0.2);
}
.fp-ti-green .fp-ph-btn .fl-button {
  background: var(--green-500);
  color: var(--s0);
}
.fp-ti-green .fp-ph-btn .fl-button:hover {
  background: #0d6e40;
}
/* Yellow */
.fp-ti-yellow .fp-ph-pill .fl-rich-text p {
  color: var(--yellow-800);
  background: rgba(253,202,64,0.14);
  border: 1px solid rgba(253,202,64,0.4);
}
.fp-ti-yellow .fp-ph-btn .fl-button {
  background: var(--yellow-500);
  color: var(--slate-900);
}
.fp-ti-yellow .fp-ph-btn .fl-button:hover {
  background: #e8b800;
}
/* Lavender */
.fp-ti-lavender .fp-ph-pill .fl-rich-text p {
  color: var(--lav-600);
  background: rgba(180,119,235,0.1);
  border: 1px solid rgba(180,119,235,0.28);
}
.fp-ti-lavender .fp-ph-btn .fl-button {
  background: var(--lav-500);
  color: var(--s0);
}
.fp-ti-lavender .fp-ph-btn .fl-button:hover {
  background: #9a55d4;
}
/* Cerulean */
.fp-ti-cerulean .fp-ph-pill .fl-rich-text p {
  color: var(--cerulean-600);
  background: rgba(0,166,251,0.08);
  border: 1px solid rgba(0,166,251,0.25);
}
.fp-ti-cerulean .fp-ph-btn .fl-button {
  background: var(--cerulean-500);
  color: var(--s0);
}
.fp-ti-cerulean .fp-ph-btn .fl-button:hover {
  background: #0088d4;
}

/* ── Colour variants — Ti row eyebrow + button (shared) ───────────────── */
.fp-ti-green .fp-ti-eyebrow .fl-rich-text p { color: var(--green-600); }
.fp-ti-green .fp-ti-button .fl-button { background: var(--green-500); color: var(--s0); }
.fp-ti-green .fp-ti-button .fl-button:hover { background: #0d6e40; }
.fp-ti-yellow .fp-ti-eyebrow .fl-rich-text p { color: var(--yellow-800); }
.fp-ti-yellow .fp-ti-button .fl-button { background: var(--yellow-500); color: var(--slate-900); }
.fp-ti-yellow .fp-ti-button .fl-button:hover { background: #e8b800; }
.fp-ti-lavender .fp-ti-eyebrow .fl-rich-text p { color: var(--lav-600); }
.fp-ti-lavender .fp-ti-button .fl-button { background: var(--lav-500); color: var(--s0); }
.fp-ti-lavender .fp-ti-button .fl-button:hover { background: #9a55d4; }
.fp-ti-cerulean .fp-ti-eyebrow .fl-rich-text p { color: var(--cerulean-600); }
.fp-ti-cerulean .fp-ti-button .fl-button { background: var(--cerulean-500); color: var(--s0); }
.fp-ti-cerulean .fp-ti-button .fl-button:hover { background: #0088d4; }

/* ── Text+Image Row (fp-ti) ───────────────────────────────────────────────── */
/* Library source: .rp-ti — 50/50 or 55/45, image with border-radius */

.fp-ti .fl-row-content-wrap .fl-row-content {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 2rem;
}

.fp-ti .fp-ti-text .fl-col-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Eyebrow — inherits variant from row class (.fp-ti-green etc.) */
.fp-ti .fp-ti-eyebrow .fl-rich-text p {
  display: inline-block;
  font-family: var(--font-h);
  font-size: var(--h5);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Section heading */
.fp-ti .fl-module-heading .fl-heading {
  font-family: var(--font-h);
  font-size: var(--h2);
  color: var(--text-h);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Body text */
.fp-ti .fl-module-rich-text .fl-rich-text p {
  font-family: var(--font-b);
  color: var(--text-b);
  line-height: var(--text-lh);
  margin-bottom: 1.5rem;
}

/* Button — uses variant colours from row class */
.fp-ti .fp-ti-button .fl-button {
  font-family: var(--font-h);
  font-weight: 600;
  padding: 0.625rem 1.75rem;
  border-radius: var(--r);
  transition: background 0.15s, transform 0.15s;
}
.fp-ti .fp-ti-button .fl-button:hover {
  transform: translateY(-1px);
}

/* Image column */
.fp-ti .fp-ti-image .fl-photo-img {
  width: 100%;
  display: block;
  border-radius: var(--r-lg);
  object-fit: contain;
}

/* ── Author Box (fp-author-box / [author_boxes]) ──────────────────────────── */
/* The Athena Author Box card — a BB layout on the author_box CPT, rendered by
   the [author_boxes] shortcode below articles. Successor to ab-author-strip.
   Typography/colours/surface live in BB settings (Customizer = tokens; row bg
   = s2 #f5f3ef; separators = s4 #e0dbd4). This bridge carries ONLY what BB
   cannot express natively (RULE 0). */

/* Signature top rule on the author band — carried over from ab-author-strip
   (BB cannot do border-top natively). */
.fp-author-box > .fl-row-content-wrap {
  border-top: 3px solid var(--green-500);
}

/* Watercolour portrait dissolves into the linen band — the signature
   treatment (image-treatments-research §3): the headshot's white canvas
   multiplies into --s2, so the painting sits ON the page, not in a box. */
.fp-author-box .fl-photo-img {
  mix-blend-mode: multiply;
}

/* Bio blockquote — mirrors the article-body .ab-blockquote convention
   (BB cannot style a blockquote inside a rich-text module). */
.fp-author-box .fl-rich-text blockquote {
  margin: 1.25rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--s4);
}
.fp-author-box .fl-rich-text blockquote p {
  font-family: var(--font-q);
  font-style: italic;
  line-height: 1.7;
  color: var(--text-m);
  margin: 0;
}

/* BB's photo module ships position:relative + z-index:2, which creates a
   stacking context that isolates the img from the row's linen backdrop —
   multiply then has nothing to blend into (white canvas survives).
   Neutralise it inside the author box so the blend reaches the band. */
.fp-author-box .fl-module-photo {
  z-index: auto;
}