/*
Theme Name: Thrive Blocks
Theme URI: https://www.thrivecreative.ltd/
Author: Thrive Creative
Author URI: https://www.thrivecreative.ltd/
Description: Custom Gutenberg-native block theme for Thrive Creative. Minimal, no third-party dependencies, self-hosted fonts, native block patterns only.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thrive-blocks
Tags: block-theme, full-site-editing, custom-colors, custom-logo, custom-menu
*/

/*
 * This is a block theme — most styling is defined in theme.json.
 * This file holds only the small amount of CSS that cannot be expressed
 * through theme.json (block-style variations, specific pattern effects).
 */

/* ===============================================================
 * GLOBAL TOKENS
 *
 * Single source of truth for values reused across patterns. Existing
 * inline hex values still work — these tokens are for new patterns
 * and incremental migration. The per-page accent system
 * (--accent-page, --accent-page-soft) is defined further down,
 * scoped to body.thrive-page-* classes.
 * =============================================================== */
:root {
    /* Primary palette */
    --navy:       #00194C;
    --navy-700:   #0a2461;
    --navy-300:   #5b6b94;
    --ink:        #0f172a;
    --body:       #3a4358;
    --muted:      #6b7390;
    --line:       #e6e8ef;

    /* Backgrounds */
    --bg:         #ffffff;
    --bg-soft:    #f5f7fb;
    --bg-softer:  #fafbfd;

    /* Accents */
    --accent:       #4f7cff;
    --accent-soft:  #dde7ff;

    /* Warm / non-profits palette */
    --warm:         #C0613A;
    --warm-soft:    #F4E5DC;
    --warm-on-navy: #E8B98A;

    /* Geometry */
    --radius:    14px;
    --radius-lg: 20px;
    --maxw:      1180px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 6px 24px -8px rgba(0, 25, 76, 0.12), 0 2px 6px rgba(0, 25, 76, 0.06);
    --shadow-lg: 0 24px 60px -20px rgba(0, 25, 76, 0.25);

    /* Easing */
    --t: 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ===============================================================
 * SCROLL BEHAVIOR
 *
 * scroll-padding-top compensates for the fixed site header so that
 * anchor jumps (e.g., /book → /contact-us/#contact-form) don't bury
 * the target under the header. 90px ≈ scrolled-header height + a
 * little breathing room.
 * =============================================================== */
html {
    scroll-padding-top: 90px;
}

/* ===============================================================
 * FULL-BLEED ALIGNMENT
 *
 * Force .alignfull to span the full viewport regardless of nested
 * layout contexts. WordPress's generated alignfull escape rules
 * only undo the parent's padding (e.g., -24px), which leaves
 * full-bleed sections capped at the post-content's wide-size
 * (~1200px) instead of viewport-spanning.
 *
 * Pattern: max-width:none + margin: calc(50% - 50vw) lets the
 * background paint pixel-edge to pixel-edge on any viewport. The
 * inner content of each alignfull block stays constrained to its
 * own contentSize, so the background spans viewport but the
 * children center at ~1180px.
 *
 * `width: auto` is important — otherwise some browsers (Safari)
 * treat the calc'd margins as creating a wider-than-viewport box.
 * =============================================================== */
.alignfull {
    max-width: none;
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ===============================================================
 * ROOT-LEVEL + MAIN-CHILD + POST-CONTENT-CHILD BLOCK SPACING
 *
 * WP's global-styles inline CSS injects `margin-block-start: 24px`
 * via multiple rules:
 *   :where(.wp-site-blocks) > *                  (spec 0,0,1)
 *   :root :where(.is-layout-flow) > *            (spec 0,1,1)
 *   :root :where(.is-layout-constrained) > *     (spec 0,1,1)
 *
 * Our DOM has three levels worth overriding:
 *   .wp-site-blocks                              (root grid wrapper)
 *     > <main is-layout-flow>                    (template-level wrapper)
 *       > <.wp-block-post-content is-layout-constrained>   (post-content)
 *         > <section thrive-page-hero ...>       (the actual sections)
 *         > <section thrive-premise ...>
 *         > <section thrive-closing-cta>
 *
 * With our fixed-position header and sections that own their own
 * vertical padding (88->120 mid, 96->130 page-end), the 24px gaps at
 * any of these levels create visible seams between section backgrounds.
 *
 * Three overrides — each scoped tightly so inner wp:groups (section
 * heads, sidebars, button rows) keep their existing block-gap.
 *   - .wp-site-blocks > *                        (spec 0,0,1)
 *   - .wp-site-blocks > main > *                 (spec 0,1,2)
 *   - .wp-block-post-content > *                 (spec 0,1,1)
 * All beat or tie-then-cascade-wins over WP's rules.
 * =============================================================== */
:where(.wp-site-blocks) > *,
.wp-site-blocks > main > *,
.wp-block-post-content > * {
    margin-block-start: 0;
}

/* ===============================================================
 * SECTION-HEAD ALIGNMENT
 *
 * Section-head wrappers (eyebrow + h2 + lede) live inside alignfull
 * sections with a wider 1180px container. The wrapper itself uses a
 * narrower contentSize (e.g., 720px) for line-length reasons, but
 * WP's constrained layout auto-margins its children — that centers
 * each child within the wrapper's available width and creates an
 * unwanted indent versus other content (premise grid, scenario card)
 * that aligns to the 1180px container's left edge.
 *
 * Anchor the children to the wrapper's left edge instead.
 * =============================================================== */
.thrive-section-head > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    margin-left: 0 !important;
}

/* ===============================================================
 * ACCESSIBILITY UTILITIES
 *
 * .visually-hidden / .sr-only — visually hide while remaining
 * accessible to screen readers and keyboard navigation.
 *
 * prefers-reduced-motion — reduce animations + transitions for
 * users who request reduced motion. WCAG 2.3.3 / 2.2.2.
 * Uses 0.01ms (rather than 0) so JS that listens for transitionend
 * events still fires — recommended approach over a hard `none`.
 * =============================================================== */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------
 * Block style variation: `is-style-no-bullets` on core/list
 * Used in the footer to match the existing icon-list visual.
 * --------------------------------------------------------------- */
.wp-block-list.is-style-no-bullets {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.wp-block-list.is-style-no-bullets li {
    position: relative;
    padding-left: 18px;
}
.wp-block-list.is-style-no-bullets li::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 0;
    color: currentColor;
    opacity: 0.75;
    font-weight: 700;
}
.wp-block-list.is-style-no-bullets a {
    color: inherit;
    text-decoration: none;
}
.wp-block-list.is-style-no-bullets a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------
 * Flip card — used by the /patterns/flip-card.php pattern.
 * CSS-only 3D flip on hover. No JS dependency.
 * --------------------------------------------------------------- */
.thrive-flip-card {
    perspective: 1200px;
    min-height: 280px;
}
.thrive-flip-card__inner {
    position: relative;
    width: 100%;
    min-height: 280px;
    transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
}
.thrive-flip-card:hover .thrive-flip-card__inner,
.thrive-flip-card:focus-within .thrive-flip-card__inner {
    transform: rotateY(180deg);
}
.thrive-flip-card__face {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 280px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 8px;
}
.thrive-flip-card__back {
    transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .thrive-flip-card__inner {
        transition: none;
    }
    .thrive-flip-card__back {
        transform: none;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .thrive-flip-card:hover .thrive-flip-card__back,
    .thrive-flip-card:focus-within .thrive-flip-card__back {
        opacity: 1;
    }
    .thrive-flip-card:hover .thrive-flip-card__front,
    .thrive-flip-card:focus-within .thrive-flip-card__front {
        opacity: 0;
    }
}

/* ===============================================================
 * REDESIGN — utility classes used by patterns
 * Added 2026-05-09 for the new visual system based on Aaron's
 * thrive-home-v2.html / thrive-service-daas.html mockups.
 * =============================================================== */

/* ---------------------------------------------------------------
 * Dark nav background — layered hero treatment
 *
 * Used on:
 *   - patterns/page-hero.php (sub-page hero)
 *   - patterns/dark-nav-section.php (reusable sec-dark wrapper)
 *   - any group block where you want the same visual treatment;
 *     just add the className "thrive-dark-nav-bg".
 *
 * Layers:
 *   - base navy gradient
 *   - radial blue glow (top-right) and softer one (bottom-left)
 *   - dotted grid via ::before, masked to fade at edges
 *   - diagonal accent line via ::after
 * --------------------------------------------------------------- */
.thrive-dark-nav-bg {
    position: relative;
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(79, 124, 255, 0.18), transparent 60%),
        radial-gradient(700px 400px at 5% 110%, rgba(79, 124, 255, 0.10), transparent 65%),
        linear-gradient(180deg, #001442 0%, #00194C 60%, #001a52 100%);
    color: #ffffff;
    overflow: hidden;
    isolation: isolate;
}
.thrive-dark-nav-bg > * {
    position: relative;
    z-index: 1;
}
.thrive-dark-nav-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
.thrive-dark-nav-bg::after {
    content: "";
    position: absolute;
    right: -8%;
    top: -12%;
    width: 60%;
    height: 120%;
    background: linear-gradient(135deg, transparent 49.6%, rgba(255, 255, 255, 0.08) 49.8%, rgba(255, 255, 255, 0.08) 50.2%, transparent 50.4%);
    transform: rotate(8deg);
    pointer-events: none;
    z-index: 0;
}

/* ---------------------------------------------------------------
 * Page hero — sub-page hero pattern
 *
 * Two-layer structure (matches canonical):
 *   <section class="thrive-page-hero">      (full-bleed bg + v-padding)
 *     <div class="thrive-page-hero__inner"> (1180px container, h-padding)
 *       eyebrow / h1 / tagline / lede / CTAs
 *     </div>
 *   </section>
 *
 * The fixed site header is transparent at top and ~64px tall, so
 * page hero needs generous top padding to clear it. Mobile and
 * desktop have different spacings to match the mockup.
 * --------------------------------------------------------------- */
.thrive-page-hero {
    padding-top: 128px;
    padding-bottom: 70px;
}
@media (min-width: 860px) {
    .thrive-page-hero {
        padding-top: 160px;
        padding-bottom: 90px;
    }
}

/* Inner container — provides the shared 1180px column that all hero
 * children flow from. Without this, each child gets WP's constrained-
 * layout auto-margin individually and the left edge goes jagged. */
.thrive-page-hero__inner {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* Breadcrumb chip: "Services / 01" small caps + numbered pill */
.thrive-page-hero__crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a8b6dc;
    margin: 0 0 22px;
}
.thrive-page-hero__crumb a {
    color: inherit;
    text-decoration: none;
    transition: color 200ms ease;
}
.thrive-page-hero__crumb a:hover {
    color: #ffffff;
}
.thrive-page-hero__crumb .sep {
    opacity: 0.4;
}
.thrive-page-hero__crumb .num {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    letter-spacing: 0.08em;
}

/* H1 — fluid sizing, gradient on <em> highlight word.
 * 18ch keeps the headline to 1–2 lines on most viewports. */
.thrive-page-hero__h1 {
    font-size: clamp(36px, 5.6vw, 60px);
    color: #ffffff;
    letter-spacing: -0.025em;
    line-height: 1.04;
    max-width: 18ch;
    margin: 0;
}
.thrive-page-hero__h1 em {
    font-style: normal;
    background: linear-gradient(180deg, #ffffff 0%, #c6d2f0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Tagline — italic, lighter weight, muted blue-gray */
.thrive-page-hero__tagline {
    margin: 22px 0 0;
    font-style: italic;
    color: #a8b6dc;
    font-weight: 500;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.5;
    max-width: 46ch;
}

/* Lede — main supporting paragraph */
.thrive-page-hero__lede {
    margin: 18px 0 0;
    color: #c4cee5;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.6;
    max-width: 62ch;
}

/* Hero CTA row — extra spacing above the buttons */
.thrive-page-hero .wp-block-buttons {
    margin-top: 34px;
}

/* ---------------------------------------------------------------
 * Pull quote — italic, navy left rule, Georgia open-quote glyph
 * ghosted behind. Used on the homepage model section and as
 * mid-page interstitial breaks on services hub + clients page.
 *
 * Pattern: patterns/pull-quote.php
 * Markup: a wp:group with tagName=blockquote and className=thrive-pull-quote
 * --------------------------------------------------------------- */
.thrive-pull-quote {
    position: relative;
    padding: 8px 0 8px 28px;
    border-left: 4px solid #00194C;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.35;
    color: #0f172a;
    letter-spacing: -0.012em;
    margin: 0;
}
.thrive-pull-quote::before {
    content: "\201C";
    position: absolute;
    left: -2px;
    top: -32px;
    font-style: normal;
    font-size: 90px;
    line-height: 1;
    color: #00194C;
    opacity: 0.12;
    font-family: Georgia, serif;
    pointer-events: none;
}
.thrive-pull-quote p {
    margin: 0;
    font-style: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}
.thrive-pull-quote p + p {
    margin-top: 0.6em;
}

/* ---------------------------------------------------------------
 * Five skills callout — DDaaS value-prop callout
 * "Five skill sets. One blended rate. No tacked-on fees."
 *
 * Locked-in copy per Aaron's brief — used on the homepage model
 * section, how-it-works page, and DaaS sub-page. Each surface
 * treats it slightly differently but the visual is shared.
 *
 * Pattern: patterns/five-skills-callout.php
 * --------------------------------------------------------------- */
.thrive-five-skills-callout {
    margin-top: 28px;
    padding: 16px 22px;
    border-radius: 12px;
    background: #fafbfd;
    border: 1px solid #e6e8ef;
    border-left: 3px solid #00194C;
}
.thrive-five-skills-callout__line {
    margin: 0;
    font-weight: 600;
    color: #0f172a;
    font-size: 15.5px;
    letter-spacing: -0.005em;
    line-height: 1.45;
}
.thrive-five-skills-callout__skills {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    font-size: 12px;
    font-weight: 600;
    color: #5b6b94;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.thrive-five-skills-callout__skills li {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
}
.thrive-five-skills-callout__skills li::before {
    /* override the is-style-no-bullets chevron from the footer styling */
    display: none;
    content: none;
}
.thrive-five-skills-callout__skills li:not(:last-child)::after {
    content: "\00b7";
    margin: 0 10px;
    color: #cdd5e3;
}

/* ---------------------------------------------------------------
 * Service tile (numbered) — service tile for the services grid
 * Numbered eyebrow chip, italic navy tagline, hover lift +
 * animated top-edge gradient line.
 *
 * Pattern: patterns/service-tile-numbered.php
 * Replaces the older service-card.php which still exists in the
 * library tagged for legacy use.
 * --------------------------------------------------------------- */
.thrive-service-tile {
    position: relative;
    background: #ffffff;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius-lg);
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    transition:
        transform 200ms cubic-bezier(.2, .7, .2, 1),
        box-shadow 200ms cubic-bezier(.2, .7, .2, 1),
        border-color 200ms cubic-bezier(.2, .7, .2, 1);
    overflow: hidden;
}
.thrive-service-tile::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #00194C, #4f7cff);
    transition: width 320ms cubic-bezier(.2, .7, .2, 1);
}
.thrive-service-tile:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 24px -8px rgba(0, 25, 76, 0.12),
        0 2px 6px rgba(0, 25, 76, 0.06);
    border-color: #d8dde9;
}
.thrive-service-tile:hover::before {
    width: 100%;
}
.thrive-service-tile__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(180deg, #eef2fb, #e3e9f6);
    display: grid;
    place-items: center;
    color: #00194C;
    margin-bottom: 18px;
}
.thrive-service-tile__icon svg {
    width: 22px;
    height: 22px;
}
.thrive-service-tile__num {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #5b6b94;
    letter-spacing: 0.16em;
}
.thrive-service-tile h3 {
    margin: 10px 0 0;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.018em;
    color: #0f172a;
}
.thrive-service-tile__tagline {
    margin: 12px 0 0;
    color: #00194C;
    font-weight: 500;
    font-size: 15px;
    font-style: italic;
}
.thrive-service-tile__desc {
    margin: 14px 0 0;
    color: #3a4358;
    font-size: 15.5px;
    line-height: 1.6;
}
.thrive-service-tile__cta {
    margin: 22px 0 0;
    align-self: flex-start;
    font-weight: 600;
}
.thrive-service-tile__cta a {
    color: #00194C;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
}
.thrive-service-tile__cta a:hover {
    border-bottom-color: #00194C;
}

@media (prefers-reduced-motion: reduce) {
    .thrive-service-tile,
    .thrive-service-tile::before {
        transition: none;
    }
}

/* ---------------------------------------------------------------
 * Pain → relief pairs
 *
 * Two-line cards: muted gray "pain" line on top, navy "relief" line
 * below with an arrow glyph leading. Used on the non-profits page
 * and the homepage non-profits section. Warm beige border palette
 * is non-profit-context-specific (matches the warm #FAF8F4 bg used
 * on those sections); reuse outside that context will look slightly
 * off but not broken.
 *
 * Pattern: patterns/pain-relief-pair.php
 * --------------------------------------------------------------- */
.thrive-pain-relief-pairs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.thrive-pain-relief-pair {
    background: #ffffff;
    border: 1px solid #ece7dc;
    border-radius: var(--radius);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition:
        border-color 200ms ease,
        transform 200ms ease,
        box-shadow 200ms ease;
}
.thrive-pain-relief-pair:hover {
    border-color: #dcd4c1;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px -8px rgba(138, 113, 64, 0.18);
}
.thrive-pain-relief-pair__pain {
    margin: 0;
    color: #7a8095;
    font-size: 14.5px;
    line-height: 1.55;
}
.thrive-pain-relief-pair__relief {
    margin: 0;
    color: #00194C;
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.5;
    letter-spacing: -0.005em;
}
.thrive-pain-relief-pair__relief::before {
    content: "\2192\00a0";
    color: #4f7cff;
    font-weight: 700;
    margin-right: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .thrive-pain-relief-pair {
        transition: none;
    }
}

/* ---------------------------------------------------------------
 * Five-step process — small numbered-circle cards in a row
 *
 * Used on the DaaS sub-page (5 steps from discovery to QBR) and
 * other narrative pages that need a process timeline. Uses small
 * filled navy circles for numbers — distinct from the
 * how-we-work-steps pattern which uses big numerals.
 *
 * Responsive: 1 col mobile -> 2 cols tablet (>=680px) -> 5 cols
 * desktop (>=980px).
 *
 * Pattern: patterns/five-step-process.php
 * --------------------------------------------------------------- */
.thrive-five-step-process {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 680px) {
    .thrive-five-step-process {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 980px) {
    .thrive-five-step-process {
        grid-template-columns: repeat(5, 1fr);
    }
}
.thrive-five-step-process__step {
    background: #ffffff;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius);
    padding: 22px 20px;
    position: relative;
    transition:
        transform 200ms ease,
        box-shadow 200ms ease,
        border-color 200ms ease;
    list-style: none;
}
.thrive-five-step-process__step::before {
    /* override the is-style-no-bullets chevron from footer styling */
    display: none;
    content: none;
}
.thrive-five-step-process__step:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 24px -8px rgba(0, 25, 76, 0.12),
        0 2px 6px rgba(0, 25, 76, 0.06);
    border-color: #d8dde9;
}
.thrive-five-step-process__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #00194C;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 14px;
    letter-spacing: 0.04em;
}
.thrive-five-step-process__step h3 {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #0f172a;
}
.thrive-five-step-process__step p {
    margin: 8px 0 0;
    color: #3a4358;
    font-size: 13.5px;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .thrive-five-step-process__step {
        transition: none;
    }
}

/* ===============================================================
 * Per-page accent variables
 *
 * Each service sub-page sets a different --accent-page color. Default
 * is navy; specific service pages override via body class. See
 * docs/service-pages-template.md for the canonical mapping.
 * =============================================================== */
:root {
    --accent-page:      #00194C; /* fallback = primary navy */
    --accent-page-soft: #eef2fb;
}
body.thrive-page-development-as-a-service { --accent-page: #7d8fb7; --accent-page-soft: #eef0f5; }
body.thrive-page-digital-transformation   { --accent-page: #94a3b8; --accent-page-soft: #eef0f5; }
body.thrive-page-cloud-migration          { --accent-page: #e0a45c; --accent-page-soft: #fbeed7; }
body.thrive-page-ai-integration           { --accent-page: #36c5b8; --accent-page-soft: #d8f5f0; }

/* ---------------------------------------------------------------
 * Triggers grid — "If any of these sound familiar, you're in the
 * right place." Six checkmark items in a 2-column grid (1 column
 * mobile). Used on every service sub-page right after the
 * "How we work" steps.
 *
 * Pattern: patterns/triggers-grid.php
 * --------------------------------------------------------------- */
.thrive-triggers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}
@media (min-width: 680px) {
    .thrive-triggers {
        grid-template-columns: repeat(2, 1fr);
    }
}
.thrive-trigger {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius);
    padding: 18px 20px;
    transition: border-color 200ms ease, transform 200ms ease;
    list-style: none;
}
.thrive-trigger::before {
    /* override the is-style-no-bullets chevron from footer styling */
    display: none;
    content: none;
}
.thrive-trigger:hover {
    border-color: #d8dde9;
    transform: translateY(-1px);
}
.thrive-trigger__glyph {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-page-soft);
    color: var(--accent-page);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin-top: 1px;
}
.thrive-trigger__glyph svg {
    width: 14px;
    height: 14px;
}
.thrive-trigger p {
    margin: 0;
    color: #0f172a;
    font-size: 15.5px;
    line-height: 1.5;
    font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
    .thrive-trigger {
        transition: none;
    }
}

/* ---------------------------------------------------------------
 * Scenario card — illustrative case study card on a dark navy
 * background. Drops inside a dark-nav-section (or any sec-dark
 * wrapper). The label glyph (horizontal line) uses --accent-page
 * so the page-specific color shows through.
 *
 * Pattern: patterns/scenario-card-dark.php
 * --------------------------------------------------------------- */
.thrive-scenario-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
}
.thrive-scenario-card__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #a8b6dc;
    text-transform: uppercase;
    margin: 0 0 18px;
}
.thrive-scenario-card__label::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--accent-page);
    display: inline-block;
}
.thrive-scenario-card p {
    margin: 0;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.6;
    color: #e7eaf3;
}
.thrive-scenario-card p + p {
    margin-top: 18px;
}

/* ---------------------------------------------------------------
 * Proof-mini — 3-up small client name plates with an "Already
 * running this way for" eyebrow header. Used on each service page
 * just before the FAQ. (Distinct from the homepage proof strip
 * which is 6-up, larger plates.)
 *
 * Pattern: patterns/proof-mini.php
 * --------------------------------------------------------------- */
.thrive-proof-mini-head {
    margin: 0 0 22px;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6b7390;
    font-weight: 600;
    text-align: center;
}
.thrive-proof-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #e6e8ef;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius);
    overflow: hidden;
    max-width: 760px;
    margin: 0 auto;
}
.thrive-proof-mini__client {
    background: #ffffff;
    padding: 24px 16px;
    display: grid;
    place-items: center;
    text-align: center;
    min-height: 84px;
    transition: background 200ms ease;
}
.thrive-proof-mini__client:hover {
    background: #fafbfd;
}
.thrive-proof-mini__client span {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #5a6486;
    line-height: 1.35;
}

/* ---------------------------------------------------------------
 * FAQ accordion — native HTML <details>/<summary> with a chevron
 * SVG that rotates 180° on open. Used on every service sub-page
 * inside a sec-soft wrapper.
 *
 * Pattern: patterns/faq-accordion.php
 * --------------------------------------------------------------- */
.thrive-faq {
    max-width: 840px;
    margin: 0 auto;
}
.thrive-faq details {
    border-bottom: 1px solid #e6e8ef;
    padding: 18px 0;
}
.thrive-faq details:first-of-type {
    border-top: 1px solid #e6e8ef;
}
.thrive-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-weight: 600;
    color: #0f172a;
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: -0.012em;
    padding: 6px 0;
}
.thrive-faq summary::-webkit-details-marker {
    display: none;
}
.thrive-faq summary::after {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300194C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center/contain;
    transition: transform 200ms ease;
}
.thrive-faq details[open] summary::after {
    transform: rotate(180deg);
}
.thrive-faq__answer {
    padding: 14px 0 6px;
    color: #3a4358;
    font-size: 15.5px;
    line-height: 1.65;
    max-width: 62ch;
}
.thrive-faq__answer p {
    margin: 0;
}
.thrive-faq__answer p + p {
    margin-top: 10px;
}

/* ---------------------------------------------------------------
 * Premise section — 5fr/7fr text grid (eyebrow+h2 left, body
 * paragraphs right) with an illustration figure below. The
 * illustration itself is custom SVG per page; this pattern is the
 * outer wrapper.
 *
 * Pattern: patterns/premise-section.php
 * --------------------------------------------------------------- */
.thrive-premise-grid {
    display: grid;
    gap: 48px;
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 980px) {
    .thrive-premise-grid {
        grid-template-columns: 5fr 7fr;
        gap: 80px;
    }
}
.thrive-premise__head h2 {
    font-size: clamp(28px, 3.4vw, 42px);
    letter-spacing: -0.022em;
    line-height: 1.1;
    margin: 0;
}
.thrive-premise__body p {
    margin: 0;
    color: #0f172a;
    font-size: 17.5px;
    line-height: 1.7;
}
.thrive-premise__body p + p {
    margin-top: 18px;
}
.thrive-premise__body strong {
    color: #0f172a;
    font-weight: 600;
}
.thrive-illustration {
    margin: 52px 0 0;
    background: #fafbfd;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.05);
}
.thrive-illustration svg {
    width: 100%;
    height: auto;
}
.thrive-illustration__caption {
    margin: 14px 0 0;
    text-align: center;
    color: #6b7390;
    font-size: 13px;
    letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------
 * What-you-get grid — 8 numbered cards in a responsive grid
 * (1 col mobile, 2 col tablet, 3 col desktop). Each card has a
 * small navy-blue numbered eyebrow, an h3, and a short paragraph.
 *
 * Pattern: patterns/what-you-get-grid.php
 * --------------------------------------------------------------- */
.thrive-what-you-get {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 680px) {
    .thrive-what-you-get {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1020px) {
    .thrive-what-you-get {
        grid-template-columns: repeat(3, 1fr);
    }
}
.thrive-what-you-get__item {
    background: #ffffff;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition:
        transform 200ms ease,
        box-shadow 200ms ease,
        border-color 200ms ease;
}
.thrive-what-you-get__item:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 24px -8px rgba(0,25,76,0.12),
        0 2px 6px rgba(0,25,76,0.06);
    border-color: #d8dde9;
}
.thrive-what-you-get__num {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #5b6b94;
}
.thrive-what-you-get__item h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #0f172a;
    letter-spacing: -0.012em;
}
.thrive-what-you-get__item p {
    margin: 0;
    color: #3a4358;
    font-size: 14.5px;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .thrive-what-you-get__item {
        transition: none;
    }
}

/* ===============================================================
 * Group B — page-specific secondary visuals
 *
 * Each of these is used on exactly one service sub-page:
 *   .thrive-comparison      -> DaaS (DDaaS vs SaaS vs Agency)
 *   .thrive-fit-grid        -> AI (where AI fits / where it doesn't)
 *   .thrive-pillars         -> Cloud (4 pillars: Resilient / Cost / etc.)
 *   .thrive-stats-strip     -> Modernization (3 large-figure stats)
 *
 * They use --accent-page so each picks up its own color via the
 * body class set on its page (see :root + body.thrive-page-X).
 * =============================================================== */

/* ---------------------------------------------------------------
 * Comparison table — 4-col table comparing DDaaS to alternatives
 *
 * Pattern: patterns/comparison-table.php
 * Used on: DaaS sub-page only
 *
 * Mobile note: at <760px the grid drops to 2 columns. Each cell
 * remains visible but rows wrap, which produces a denser stack.
 * Acceptable for narrow widths but the desktop layout is the
 * primary target.
 * --------------------------------------------------------------- */
.thrive-comparison {
    background: #ffffff;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.thrive-comparison__row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    border-top: 1px solid #e6e8ef;
}
.thrive-comparison__row:first-child {
    border-top: 0;
    background: #fafbfd;
}
.thrive-comparison__row > div {
    padding: 16px 18px;
    font-size: 14.5px;
    color: #3a4358;
    line-height: 1.5;
}
.thrive-comparison__row > div:first-child {
    color: #0f172a;
    font-weight: 600;
}
.thrive-comparison__row.is-head > div {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5b6b94;
    padding: 18px;
}
.thrive-comparison__row.is-head > div.is-thrive {
    color: #00194C;
}
.thrive-comparison__row > div.is-thrive {
    background: #f5f8ff;
    color: #0f172a;
    font-weight: 500;
}
@media (max-width: 760px) {
    .thrive-comparison__row {
        grid-template-columns: 1fr 1fr;
    }
    .thrive-comparison__row > div {
        font-size: 13.5px;
        padding: 12px 14px;
    }
}

/* ---------------------------------------------------------------
 * Fit grid (yes/no) — where AI lands vs. where it's a distraction
 *
 * Pattern: patterns/fit-grid-yes-no.php
 * Used on: AI sub-page only (but reusable for any "honest scope"
 * yes/no comparison if needed elsewhere).
 *
 * Yes card uses --accent-page; no card uses neutral grays.
 * --------------------------------------------------------------- */
.thrive-fit-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}
@media (min-width: 860px) {
    .thrive-fit-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.thrive-fit-card {
    background: #ffffff;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    position: relative;
    overflow: hidden;
}
.thrive-fit-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 100%;
}
.thrive-fit-card.is-yes::before {
    background: linear-gradient(90deg, var(--accent-page), var(--accent-page));
    opacity: 0.85;
}
.thrive-fit-card.is-no::before {
    background: linear-gradient(90deg, #a3acc1, #cdd5e3);
}
.thrive-fit-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.thrive-fit-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex: 0 0 auto;
}
.thrive-fit-card.is-yes .thrive-fit-card__badge {
    background: var(--accent-page-soft);
    color: var(--accent-page);
}
.thrive-fit-card.is-no .thrive-fit-card__badge {
    background: #eef0f5;
    color: #5a6486;
}
.thrive-fit-card__badge svg {
    width: 18px;
    height: 18px;
}
.thrive-fit-card__head h3 {
    margin: 0;
    font-size: 17px;
    letter-spacing: -0.012em;
    color: #0f172a;
}
.thrive-fit-card__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #5b6b94;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
}
.thrive-fit-card__list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.thrive-fit-card__list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #3a4358;
    font-size: 15px;
    line-height: 1.55;
    padding: 10px 0;
    border-top: 1px solid #e6e8ef;
}
.thrive-fit-card__list li:first-child {
    border-top: 0;
    padding-top: 0;
}
.thrive-fit-card__list li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-top: 9px;
}
.thrive-fit-card.is-yes .thrive-fit-card__list li::before {
    background: var(--accent-page);
}
.thrive-fit-card.is-no .thrive-fit-card__list li::before {
    background: #cdd5e3;
}

/* ---------------------------------------------------------------
 * Pillars grid — 4 pillar cards with gradient-bg icon containers
 *
 * Pattern: patterns/pillars-grid.php
 * Used on: Cloud sub-page only ("What 'right' looks like" — four
 * properties of a cloud you can live in).
 *
 * Icon container uses --accent-page-soft as bg and --accent-page
 * as the foreground so each service can theme it via body class.
 * Animated top-edge gradient on hover (navy -> page accent).
 * --------------------------------------------------------------- */
.thrive-pillars {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 680px) {
    .thrive-pillars {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1020px) {
    .thrive-pillars {
        grid-template-columns: repeat(4, 1fr);
    }
}
.thrive-pillar {
    background: #ffffff;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition:
        transform 200ms ease,
        box-shadow 200ms ease,
        border-color 200ms ease;
}
.thrive-pillar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #00194C, var(--accent-page));
    transition: width 320ms cubic-bezier(.2, .7, .2, 1);
}
.thrive-pillar:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 24px -8px rgba(0, 25, 76, 0.12),
        0 2px 6px rgba(0, 25, 76, 0.06);
    border-color: #d8dde9;
}
.thrive-pillar:hover::before {
    width: 100%;
}
.thrive-pillar__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--accent-page-soft);
    color: var(--accent-page);
    display: grid;
    place-items: center;
}
.thrive-pillar__icon svg {
    width: 22px;
    height: 22px;
}
.thrive-pillar h3 {
    margin: 0;
    font-size: 17px;
    letter-spacing: -0.012em;
    color: #0f172a;
    line-height: 1.3;
}
.thrive-pillar p {
    margin: 0;
    color: #3a4358;
    font-size: 14.5px;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .thrive-pillar,
    .thrive-pillar::before {
        transition: none;
    }
}

/* ---------------------------------------------------------------
 * Stats strip large — 3-up large-figure stat cards
 *
 * Pattern: patterns/stats-strip-large.php
 * Used on: Modernization sub-page only ("What gets unstuck — the
 * shape of the relief").
 *
 * Distinct from trust-strip-stats: that pattern is small homepage
 * trust signals; this one is content-heavy with h3 + paragraph
 * accompanying each figure.
 * --------------------------------------------------------------- */
.thrive-stats-strip {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 760px) {
    .thrive-stats-strip {
        grid-template-columns: repeat(3, 1fr);
    }
}
.thrive-stat-card {
    background: #ffffff;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius-lg);
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.thrive-stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #00194C, #4f7cff);
    transition: width 320ms cubic-bezier(.2, .7, .2, 1);
}
.thrive-stat-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 24px -8px rgba(0, 25, 76, 0.12),
        0 2px 6px rgba(0, 25, 76, 0.06);
}
.thrive-stat-card:hover::before {
    width: 100%;
}
.thrive-stat-card__label {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #5b6b94;
    text-transform: uppercase;
}
.thrive-stat-card__figure {
    margin: 0;
    font-size: clamp(36px, 4.2vw, 52px);
    font-weight: 800;
    color: #00194C;
    letter-spacing: -0.025em;
    line-height: 1;
}
.thrive-stat-card h3 {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #0f172a;
}
.thrive-stat-card p {
    margin: 0;
    color: #3a4358;
    font-size: 14.5px;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .thrive-stat-card,
    .thrive-stat-card::before {
        transition: none;
    }
}

/* ===============================================================
 * Non-profit page accent
 *
 * Adds a 5th body class for the non-profits page. The brand brief
 * specifies a warm brick (#C0613A) accent paired with navy on this
 * page only — pages built with body class thrive-page-nonprofits
 * pick it up automatically through the same --accent-page mechanism
 * as the four service sub-pages. The body_class filter in functions.php
 * adds this class for slug `non-profits` (and `nonprofits`).
 *
 * Note: per Aaron's direction, the non-profits page should align
 * stylistically with the rest of the site (same buttons, brand
 * mark, eyebrow style, etc.) — only the warm accent color and the
 * sector-specific copy/visuals change. This body class enables that.
 * =============================================================== */
body.thrive-page-non-profits {
    --accent-page: #C0613A;
    --accent-page-soft: #F4E5DC;
}

/* ===============================================================
 * Group C-content — cross-page marketing patterns
 *
 * These 5 patterns appear on multiple new pages (homepage, services
 * hub, how-it-works, non-profits) — high leverage to build, used
 * across the marketing site.
 * =============================================================== */

/* ---------------------------------------------------------------
 * Client proof strip (6-up)
 *
 * Pattern: patterns/client-proof-strip.php
 * Used on: Homepage + Services Hub
 *
 * Distinct from proof-mini (3-up) which appears on each service
 * sub-page. This is the bigger version: 6 plates in a 2×3 grid on
 * tablet+, with a centered section head above. Plates are uppercase
 * letter-spaced caps reading like a logo wall before real logos
 * exist. Hover: subtle bg shift on each plate.
 * --------------------------------------------------------------- */
.thrive-client-proof {
    padding: 0;
}
.thrive-client-proof__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 44px;
}
.thrive-client-proof__head h2 {
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.thrive-client-proof__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #e6e8ef;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
@media (min-width: 680px) {
    .thrive-client-proof__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.thrive-client-proof__client {
    background: #ffffff;
    padding: 34px 22px;
    display: grid;
    place-items: center;
    text-align: center;
    min-height: 100px;
    transition: background 200ms ease;
}
.thrive-client-proof__client:hover {
    background: #fafbfd;
}
.thrive-client-proof__client span {
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #5a6486;
    line-height: 1.35;
}

/* ---------------------------------------------------------------
 * Closing CTA — large marketing-page closing section
 *
 * Pattern: patterns/closing-cta.php
 * Used on: Every marketing page (homepage + services hub + service
 * sub-pages + how-it-works + non-profits + clients + booking).
 *
 * Distinct from cta-bar (smaller, single-button strip — kept around
 * for legacy use on the older pages tagged page_lifecycle=legacy).
 * This is the canonical closing-CTA section: full-bleed navy with
 * radial glow, eyebrow + large h2 + lede + 2 CTAs + meta line.
 * --------------------------------------------------------------- */
.thrive-closing-cta {
    background: #00194C;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    padding: 96px 0;
}
@media (min-width: 860px) {
    .thrive-closing-cta {
        padding: 130px 0;
    }
}
.thrive-closing-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 400px at 80% 100%, rgba(79, 124, 255, 0.18), transparent 60%),
        radial-gradient(600px 400px at 10% 0%, rgba(79, 124, 255, 0.10), transparent 65%);
    pointer-events: none;
}
.thrive-closing-cta__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 740px;
    margin: 0 auto;
    padding: 0 24px;
}
.thrive-closing-cta__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a8b6dc;
    margin: 0 0 18px;
}
.thrive-closing-cta h2 {
    color: #ffffff;
    font-size: clamp(32px, 4.2vw, 48px);
    letter-spacing: -0.022em;
    line-height: 1.08;
    margin: 0;
}
.thrive-closing-cta__lede {
    margin: 20px auto 0;
    color: #bcc7e3;
    font-size: 18px;
    line-height: 1.6;
    max-width: 60ch;
}
.thrive-closing-cta__meta {
    margin-top: 46px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 28px;
    color: #a8b6dc;
    font-size: 14px;
}
.thrive-closing-cta .wp-block-buttons {
    margin-top: 36px;
    justify-content: center;
}

/* ---------------------------------------------------------------
 * Chip list — labeled checkmark chip pills
 *
 * Pattern: patterns/chip-list.php
 * Used on: Services Hub (×4 — "What's included" for each service),
 * How It Works "what you own" supplement.
 *
 * Wrap in any container; the label sits above and the chips wrap
 * below. Each chip is a small SVG checkmark + text.
 * --------------------------------------------------------------- */
.thrive-chips-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6b7390;
    margin: 0 0 12px;
}
.thrive-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.thrive-chip-list li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e6e8ef;
    font-size: 13.5px;
    font-weight: 500;
    color: #0f172a;
    transition: border-color 200ms ease, transform 200ms ease;
    list-style: none;
}
.thrive-chip-list li::before {
    /* override any inherited bullet/chevron */
    display: none;
    content: none;
}
.thrive-chip-list li:hover {
    border-color: #cfd5e3;
    transform: translateY(-1px);
}
.thrive-chip-list li svg {
    width: 14px;
    height: 14px;
    color: #00194C;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------
 * Interstitial quote band
 *
 * Pattern: patterns/interstitial-quote-band.php
 * Used on: Services Hub (between Service 02 and Service 03), and
 * any other place a mid-page break is wanted.
 *
 * Slimmer than the dark-nav-section hero treatment (64px padding
 * vs. 96-130px). Uses a navy bg with the same dotted accent line
 * but no dotted-grid mask — keeps it simple. 2-col layout on
 * desktop with label chip on left and italic quote on right.
 * --------------------------------------------------------------- */
.thrive-interstitial {
    padding: 64px 0;
    background: #00194C;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.thrive-interstitial::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 400px at 80% 50%, rgba(79, 124, 255, 0.18), transparent 60%),
        radial-gradient(700px 400px at 0% 50%, rgba(79, 124, 255, 0.10), transparent 60%);
    pointer-events: none;
}
.thrive-interstitial::after {
    content: "";
    position: absolute;
    right: -10%;
    top: -30%;
    width: 50%;
    height: 160%;
    background: linear-gradient(135deg, transparent 49.6%, rgba(255, 255, 255, 0.06) 49.8%, rgba(255, 255, 255, 0.06) 50.2%, transparent 50.4%);
    transform: rotate(8deg);
    pointer-events: none;
}
.thrive-interstitial__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
    align-items: center;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}
@media (min-width: 860px) {
    .thrive-interstitial__inner {
        grid-template-columns: auto 1fr;
        gap: 32px;
    }
}
.thrive-interstitial__label {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #a8b6dc;
    text-transform: uppercase;
    border-left: 3px solid #4f7cff;
    padding-left: 12px;
}
.thrive-interstitial__quote {
    margin: 0;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.4;
    color: #ffffff;
    font-weight: 500;
    letter-spacing: -0.012em;
    font-style: italic;
}

/* ---------------------------------------------------------------
 * Funding band (large)
 *
 * Pattern: patterns/funding-band-large.php
 * Used on: Non-profits page (promoted to primary section), and
 * any other page that needs the full funding pitch.
 *
 * Full-bleed navy bg with a warm-brick light leak in the bottom-
 * right corner. 2-col layout: copy block (left) + stat card (right).
 * The stat card uses a glassmorphism-ish translucent white bg, with
 * a large figure, sub-text, and a chip list of the canonical
 * Canadian innovation programs (SR&ED / CDAP / NRC IRAP / ACAF).
 *
 * Warm accent is hardcoded (#E8B98A on navy) since this pattern is
 * thematically tied to "warmth/funding" regardless of which page
 * it's on. Page-specific accent (--accent-page) would override the
 * thematic intent.
 * --------------------------------------------------------------- */
.thrive-funding {
    background: #00194C;
    color: rgba(234, 238, 248, 1);
    position: relative;
    overflow: hidden;
    padding: 88px 0;
}
@media (min-width: 860px) {
    .thrive-funding {
        padding: 120px 0;
    }
}
.thrive-funding::before {
    /* warm light-leak in bottom-right */
    content: "";
    position: absolute;
    inset: auto -5% -40% auto;
    width: 55%;
    height: 90%;
    background: radial-gradient(closest-side, rgba(232, 185, 138, 0.18), transparent 70%);
    pointer-events: none;
}
.thrive-funding__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 36px;
    grid-template-columns: 1fr;
    align-items: center;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}
@media (min-width: 860px) {
    .thrive-funding__inner {
        grid-template-columns: 1.1fr 1fr;
        gap: 64px;
    }
}
.thrive-funding__copy h2 {
    color: #ffffff;
    font-size: clamp(28px, 3.4vw, 42px);
    letter-spacing: -0.022em;
    line-height: 1.1;
    margin: 14px 0 18px;
}
.thrive-funding__copy p {
    color: rgba(255, 255, 255, 0.82);
    max-width: 55ch;
    font-size: 17px;
    line-height: 1.65;
}
.thrive-funding__copy p + p {
    margin-top: 14px;
}
.thrive-funding__cta {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.thrive-funding__stat-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius);
    padding: 32px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.thrive-funding__stat {
    display: block;
    font-size: clamp(42px, 5vw, 58px);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 10px;
}
.thrive-funding__stat-sub {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}
.thrive-funding__programs {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding-left: 0;
}
.thrive-funding__programs li {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    padding: 6px 11px;
    border-radius: 999px;
    list-style: none;
}
.thrive-funding__programs li::before {
    /* override is-style-no-bullets chevron */
    display: none;
    content: none;
}
.thrive-funding__programs li.is-warm {
    background: rgba(232, 185, 138, 0.12);
    border-color: rgba(232, 185, 138, 0.4);
    color: #F4D6B6;
}

/* ===============================================================
 * Site header — transparent over hero, solid on scroll
 *
 * The header is fixed at the top of every page. At scroll-y 0 it's
 * fully transparent and the (dark navy) hero shows through. Past
 * 50px scroll, the JS adds .is-scrolled which transitions the
 * header to solid navy with a backdrop blur and drop shadow over
 * 250ms.
 *
 * Markup: parts/header.html (block template part)
 * JS: assets/js/thrive-header-scroll.js (enqueued from functions.php)
 *
 * IMPORTANT: every page that uses this header should start with a
 * dark hero (or any section that's tall enough to cover the
 * transparent header). Otherwise the header content is invisible
 * against a white page.
 * =============================================================== */
.thrive-site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
        background-color 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease,
        backdrop-filter 250ms ease,
        -webkit-backdrop-filter 250ms ease;
}
.thrive-site-header.is-scrolled {
    background: #00194C;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.45);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.thrive-site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    max-width: var(--maxw);
    margin: 0 auto;
}

/* Site logo */
.thrive-site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.thrive-site-header__brand-text {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    line-height: 1;
}
.thrive-site-header__brand-text:hover {
    color: #ffffff;
    text-decoration: none;
}
.thrive-site-header .wp-block-site-logo img {
    height: 44px;
    width: auto;
    display: block;
}

/* Right cluster: nav links + audience-pivot + CTA button */
.thrive-site-header__right {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Primary nav links */
.thrive-site-header__nav {
    display: none;
    gap: 32px;
    align-items: center;
}
.thrive-site-header__nav a {
    font-size: 14px;
    font-weight: 500;
    color: #c4cee5;
    text-decoration: none;
    transition: color 200ms ease;
}
.thrive-site-header__nav a:hover,
.thrive-site-header__nav a.is-current {
    color: #ffffff;
}

/* Audience-pivot pill ("For non-profits") — subtle pill that lives
 * between the main nav and the CTA. Works in both transparent and
 * is-scrolled header states because the header background is dark
 * in both. */
.thrive-audience-pill {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    font-size: 13px;
    font-weight: 500;
    color: #dbe2f5;
    text-decoration: none;
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
    white-space: nowrap;
}
.thrive-audience-pill:hover {
    border-color: rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.thrive-audience-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9ec3ff;
    flex: 0 0 auto;
}
.thrive-audience-pill__arr {
    transition: transform 200ms ease;
}
.thrive-audience-pill:hover .thrive-audience-pill__arr {
    transform: translateX(2px);
}

/* "Let's Talk" CTA button (white pill on dark header) */
.thrive-site-header__cta {
    display: none;
}
.thrive-site-header__cta .wp-block-button__link {
    background: #ffffff !important;
    color: #00194C !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
.thrive-site-header__cta .wp-block-button__link:hover {
    background: #eef1f8 !important;
}

/* Reveal nav + pill + CTA on tablet+ widths */
@media (min-width: 860px) {
    .thrive-site-header__nav,
    .thrive-site-header__cta {
        display: flex;
    }
    .thrive-audience-pill {
        display: inline-flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .thrive-site-header,
    .thrive-audience-pill,
    .thrive-audience-pill__arr,
    .thrive-site-header__nav a {
        transition: none;
    }
}

/* ===============================================================
 * Service hub section — expanded service block on the services hub
 *
 * 5fr/7fr grid: numbered title block on the left, body on the right.
 * Used 4 times on the services hub (one per service). Background
 * variants are toggled via parent classes:
 *   default                -> white
 *   .is-on-soft (parent)   -> recolors number chip border
 *   .is-on-dark (parent)   -> recolors title/tagline/learn-more/lede
 *
 * Pattern: patterns/service-hub-section.php
 * Used on: services hub page only
 * =============================================================== */
.thrive-service-hub-section {
    /* outer wrapper — full-bleed, padding handled inline per-page */
}
.thrive-service-hub-grid {
    display: grid;
    gap: 36px;
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 980px) {
    .thrive-service-hub-grid {
        grid-template-columns: 5fr 7fr;
        gap: 80px;
    }
}
.thrive-service-hub__num {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #5b6b94;
    border: 1px solid #e6e8ef;
    border-radius: 999px;
    padding: 5px 12px;
    background: #ffffff;
}
.thrive-service-hub__title-block h2 {
    margin: 18px 0 0;
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: #0f172a;
}
.thrive-service-hub__tagline {
    margin: 14px 0 0;
    font-style: italic;
    color: #00194C;
    font-weight: 500;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.5;
}
.thrive-service-hub__learn-more {
    margin: 26px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #00194C;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
    text-decoration: none;
}
.thrive-service-hub__learn-more:hover {
    border-bottom-color: #00194C;
}
.thrive-service-hub__lede {
    margin: 0;
    color: #0f172a;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.65;
}
.thrive-service-hub__chips {
    margin-top: 30px;
}
.thrive-service-hub__cta {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Sec-dark variant: recolor for navy background contexts */
.is-on-dark .thrive-service-hub__num {
    color: #bcd0ff;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
}
.is-on-dark .thrive-service-hub__title-block h2 {
    color: #ffffff;
}
.is-on-dark .thrive-service-hub__tagline {
    color: #a8b6dc;
}
.is-on-dark .thrive-service-hub__learn-more {
    color: #ffffff;
}
.is-on-dark .thrive-service-hub__learn-more:hover {
    border-bottom-color: #ffffff;
}
.is-on-dark .thrive-service-hub__lede {
    color: #e7eaf3;
}
.is-on-dark .thrive-chips-label {
    color: #9aa7c8;
}
.is-on-dark .thrive-chip-list li {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: #e7eaf3;
}
.is-on-dark .thrive-chip-list li:hover {
    border-color: rgba(255, 255, 255, 0.32);
}
.is-on-dark .thrive-chip-list li svg {
    color: #bcd0ff;
}
/* On dark, the CTA button flips to white pill */
.is-on-dark .thrive-service-hub__cta .wp-block-button__link {
    background: #ffffff !important;
    color: #00194C !important;
}

/* ---------------------------------------------------------------
 * Jumpto pills — anchor-link nav used in the services hub hero
 *
 * Small navigation pills below the hero copy that anchor to each
 * service section. Each pill has a numbered chip and label.
 * Inline HTML in the services hub page (not a standalone pattern).
 * --------------------------------------------------------------- */
.thrive-jumpto {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.thrive-jumpto a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: #dbe2f5;
    font-weight: 500;
    font-size: 13.5px;
    text-decoration: none;
    transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.thrive-jumpto a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.32);
}
.thrive-jumpto__num {
    font-size: 11px;
    font-weight: 700;
    color: #bcd0ff;
    background: rgba(79, 124, 255, 0.18);
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.06em;
}

/* ===============================================================
 * HOMEPAGE — sections specific to the home-rebuild page (page slug: home-rebuild).
 * The homepage uses a custom hero with a team-roles visual card,
 * a 2-col model section, a warm-beige non-profits 2-col section,
 * and a small inline funding band. These styles are NOT used elsewhere.
 * =============================================================== */

/* ---------------------------------------------------------------
 * Homepage hero — dark navy with team-roles card on the right
 * --------------------------------------------------------------- */
.thrive-home-hero {
    position: relative;
    background:
        radial-gradient(1100px 600px at 85% -10%, rgba(79, 124, 255, 0.22), transparent 60%),
        radial-gradient(900px 500px at 5% 110%, rgba(79, 124, 255, 0.12), transparent 65%),
        linear-gradient(180deg, #001442 0%, #00194C 60%, #001a52 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    /* Extra top padding clears the fixed transparent header */
    padding: 118px 0 110px;
}
.thrive-home-hero::before {
    /* Subtle dotted grid */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
.thrive-home-hero::after {
    /* Diagonal accent line */
    content: "";
    position: absolute;
    right: -8%;
    top: -12%;
    width: 60%;
    height: 120%;
    background: linear-gradient(135deg, transparent 49.6%, rgba(255, 255, 255, 0.08) 49.8%, rgba(255, 255, 255, 0.08) 50.2%, transparent 50.4%);
    transform: rotate(8deg);
    pointer-events: none;
    z-index: 0;
}
.thrive-home-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
    align-items: center;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}
.thrive-home-hero__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a8b6dc;
    margin-bottom: 18px;
}
.thrive-home-hero h1 {
    font-size: clamp(38px, 6.4vw, 68px);
    color: #fff;
    letter-spacing: -0.025em;
    line-height: 1.04;
    max-width: 18ch;
    margin: 0;
    font-weight: 700;
}
.thrive-home-hero h1 em {
    font-style: normal;
    background: linear-gradient(180deg, #ffffff 0%, #c6d2f0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.thrive-home-hero__sub {
    margin-top: 22px;
    font-size: clamp(17px, 1.6vw, 20px);
    color: #c4cee5;
    max-width: 58ch;
    line-height: 1.55;
}
.thrive-home-hero__ctas {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.thrive-home-hero__ctas .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
    white-space: nowrap;
}
.thrive-home-hero__meta {
    margin-top: 46px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px 36px;
    color: #a8b6dc;
    font-size: 13.5px;
}
.thrive-home-hero__meta span {
    display: inline-flex;
    align-items: center;
}
.thrive-home-hero__meta span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4f7cff;
    display: inline-block;
    margin-right: 10px;
}

/* Hero visual: translucent card with role rows */
.thrive-home-hero__visual {
    position: relative;
    display: none;
}
.thrive-home-hero__card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 22px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}
.thrive-home-hero__card-cap {
    margin: 0 0 6px;
    padding: 14px 12px 4px;
    color: #8c9bc4;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}
.thrive-home-hero__card-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 10px;
    color: #dbe2f5;
    font-size: 14px;
    transition: background 200ms ease;
}
.thrive-home-hero__card-row + .thrive-home-hero__card-row {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.thrive-home-hero__card-row:hover {
    background: rgba(255, 255, 255, 0.04);
}
.thrive-home-hero__card-role {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    flex: 0 0 auto;
}
.thrive-home-hero__card-pill {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(79, 124, 255, 0.18);
    color: #bcd0ff;
    text-transform: uppercase;
}
@media (min-width: 980px) {
    .thrive-home-hero {
        padding: 150px 0 140px;
    }
    .thrive-home-hero__inner {
        grid-template-columns: 1.15fr 0.85fr;
        gap: 64px;
    }
    .thrive-home-hero__visual {
        display: block;
    }
}

/* ---------------------------------------------------------------
 * Homepage model section — DDaaS pull-quote + skills callout +
 * mini stats on left; narrative on right.
 * --------------------------------------------------------------- */
.thrive-home-model {
    padding: 88px 0;
}
@media (min-width: 860px) {
    .thrive-home-model {
        padding: 120px 0;
    }
}
.thrive-home-model__head {
    max-width: 720px;
    margin-bottom: 56px;
}
.thrive-home-model__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5b6b94;
    margin-bottom: 18px;
}
.thrive-home-model__head h2 {
    font-size: clamp(30px, 3.8vw, 46px);
    letter-spacing: -0.022em;
    line-height: 1.08;
    color: #0f172a;
    margin: 0;
}
.thrive-home-model__grid {
    display: grid;
    gap: 48px;
    grid-template-columns: 1fr;
    align-items: start;
}
.thrive-home-model__stats {
    margin-top: 36px;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
}
.thrive-home-model__stat {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius);
    padding: 18px;
}
.thrive-home-model__stat-n {
    font-size: 24px;
    font-weight: 700;
    color: #00194C;
    letter-spacing: -0.02em;
    line-height: 1;
}
.thrive-home-model__stat-l {
    margin-top: 6px;
    font-size: 12.5px;
    color: #6b7390;
    letter-spacing: 0.02em;
}
.thrive-home-model__body p {
    color: #3a4358;
    font-size: 17.5px;
    line-height: 1.7;
    margin: 0;
}
.thrive-home-model__body p + p {
    margin-top: 18px;
}
.thrive-home-model__body strong {
    color: #0f172a;
    font-weight: 600;
}
@media (min-width: 860px) {
    .thrive-home-model__grid {
        grid-template-columns: 0.95fr 1.05fr;
        gap: 72px;
    }
}

/* ---------------------------------------------------------------
 * Homepage services section — 2x2 grid of service-tile-numbered
 * --------------------------------------------------------------- */
.thrive-home-services {
    padding: 88px 0;
    background: #f5f7fb;
}
@media (min-width: 860px) {
    .thrive-home-services {
        padding: 120px 0;
    }
}
.thrive-home-services__head {
    max-width: 720px;
    margin-bottom: 56px;
}
.thrive-home-services__head h2 {
    font-size: clamp(30px, 3.8vw, 46px);
    letter-spacing: -0.022em;
    line-height: 1.08;
    color: #0f172a;
    margin: 0;
}
.thrive-home-services__head p {
    margin-top: 18px;
    color: #6b7390;
    font-size: 18px;
    line-height: 1.6;
}
.thrive-home-services__grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 680px) {
    .thrive-home-services__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}

/* ---------------------------------------------------------------
 * Homepage non-profits section — warm beige 2-col with pain-relief
 * --------------------------------------------------------------- */
.thrive-home-nonprofits {
    background: #FAF8F4;
    position: relative;
    overflow: hidden;
    padding: 88px 0;
}
@media (min-width: 860px) {
    .thrive-home-nonprofits {
        padding: 120px 0;
    }
}
.thrive-home-nonprofits::before {
    /* Warm radial glow, top right */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 500px at 95% 0%, rgba(216, 194, 150, 0.18), transparent 60%);
    pointer-events: none;
}
.thrive-home-nonprofits > * {
    position: relative;
    z-index: 1;
}
.thrive-home-nonprofits__grid {
    display: grid;
    gap: 48px;
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 980px) {
    .thrive-home-nonprofits__grid {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
    }
}
.thrive-home-nonprofits__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a7140;
    margin-bottom: 18px;
}
.thrive-home-nonprofits__lede h2 {
    font-size: clamp(30px, 3.8vw, 46px);
    letter-spacing: -0.022em;
    line-height: 1.08;
    color: #0f172a;
    margin: 0;
}
.thrive-home-nonprofits__lede p {
    margin: 18px 0 0;
    color: #3a4358;
    font-size: 17.5px;
    line-height: 1.7;
}
.thrive-home-nonprofits__lede p + p {
    margin-top: 14px;
}
.thrive-home-nonprofits__lede strong {
    color: #0f172a;
    font-weight: 600;
}
.thrive-home-nonprofits__cta-row {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.thrive-home-nonprofits__cta-row .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 999px;
    background: #00194C;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 6px 24px -8px rgba(0, 25, 76, 0.12), 0 2px 6px rgba(0, 25, 76, 0.06);
    transition: background 200ms ease, box-shadow 200ms ease;
}
.thrive-home-nonprofits__cta-row .wp-block-button__link:hover {
    background: #001a55;
    box-shadow: 0 24px 60px -20px rgba(0, 25, 76, 0.25);
}
.thrive-home-nonprofits__grant-note {
    font-size: 13.5px;
    color: #6b6450;
    line-height: 1.55;
    margin: 0;
}
.thrive-home-nonprofits__grant-note a {
    color: #00194C;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
    text-decoration: none;
}
.thrive-home-nonprofits__grant-note a:hover {
    border-bottom-color: #00194C;
}

/* 3-up np-clients grid */
.thrive-home-nonprofits__clients {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #ece7dc;
    border: 1px solid #ece7dc;
    border-radius: var(--radius);
    overflow: hidden;
}
.thrive-home-nonprofits__client {
    background: #FAF8F4;
    padding: 18px 12px;
    display: grid;
    place-items: center;
    text-align: center;
    min-height: 74px;
    transition: background 200ms ease;
}
.thrive-home-nonprofits__client:hover {
    background: #fff;
}
.thrive-home-nonprofits__client span {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #5a6486;
    line-height: 1.35;
}

/* ---------------------------------------------------------------
 * Homepage funding band — small inline variant (NOT funding-band-large)
 * --------------------------------------------------------------- */
.thrive-home-fund {
    background: linear-gradient(135deg, #eef2fb 0%, #e2e9f7 100%);
    border-top: 1px solid #dde3ef;
    border-bottom: 1px solid #dde3ef;
    padding: 38px 0;
}
.thrive-home-fund__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}
.thrive-home-fund__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #dde3ef;
    display: grid;
    place-items: center;
    color: #00194C;
    flex: 0 0 auto;
}
.thrive-home-fund__text {
    color: #0f172a;
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
}
.thrive-home-fund__text strong {
    color: #00194C;
    font-weight: 600;
}
.thrive-home-fund__link {
    color: #00194C;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
    text-decoration: none;
    white-space: nowrap;
}
.thrive-home-fund__link:hover {
    border-bottom-color: #00194C;
}
@media (min-width: 860px) {
    .thrive-home-fund__inner {
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }
    .thrive-home-fund__text {
        flex: 1;
    }
}

/* ===============================================================
 * HOW IT WORKS — sections specific to the /how-it-works page.
 * Six unique section types: model 3-card (embed/own/not),
 * engagement arc list with numbered circles + "what you'll
 * experience" callout, 4-up what-you-own grid with icons,
 * compounding 2-col body + pull quote, and "not the right fit"
 * 4-card negative-space grid. Page-specific; not used elsewhere.
 * =============================================================== */

/* ---------------------------------------------------------------
 * The model — 3-card grid (What gets embedded / What stays yours /
 * What we don't do)
 * --------------------------------------------------------------- */
.thrive-how-premise {
    margin-bottom: 36px;
}
.thrive-how-premise p {
    color: #0f172a;
    font-size: 17.5px;
    line-height: 1.7;
    max-width: 62ch;
    margin: 0;
}
.thrive-how-premise p + p {
    margin-top: 18px;
}
.thrive-how-premise strong {
    color: #0f172a;
    font-weight: 600;
}
.thrive-how-model {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
    margin-top: 36px;
}
@media (min-width: 860px) {
    .thrive-how-model {
        grid-template-columns: repeat(3, 1fr);
    }
}
.thrive-how-model__card {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.thrive-how-model__card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 100%;
}
.thrive-how-model__card.is-embed::before {
    background: linear-gradient(90deg, #00194C, #4f7cff);
}
.thrive-how-model__card.is-own::before {
    background: linear-gradient(90deg, #00194C, #7d8fb7);
}
.thrive-how-model__card.is-not::before {
    background: linear-gradient(90deg, #a3acc1, #cdd5e3);
}
.thrive-how-model__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px -8px rgba(0, 25, 76, 0.12), 0 2px 6px rgba(0, 25, 76, 0.06);
    border-color: #d8dde9;
}
.thrive-how-model__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #5b6b94;
    text-transform: uppercase;
    margin: 0;
}
.thrive-how-model__card.is-not .thrive-how-model__label {
    color: #7d8493;
}
.thrive-how-model__card h3 {
    font-size: 18px;
    letter-spacing: -0.012em;
    color: #0f172a;
    line-height: 1.3;
    margin: 0;
}
.thrive-how-model__card ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.thrive-how-model__card li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14.5px;
    line-height: 1.5;
    color: #3a4358;
}
.thrive-how-model__card li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-top: 8px;
    background: #00194C;
}
.thrive-how-model__card.is-not li::before {
    background: #cdd5e3;
}

/* ---------------------------------------------------------------
 * Engagement arc — illustration container reused from premise-section,
 * plus a vertical numbered-stage list below
 * --------------------------------------------------------------- */
.thrive-how-arc {
    margin-top: 48px;
    list-style: none;
    padding: 0;
}
.thrive-how-arc__stage {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 24px;
    padding: 32px 0;
    border-bottom: 1px solid #e6e8ef;
    align-items: start;
}
.thrive-how-arc__stage:first-child {
    padding-top: 8px;
}
.thrive-how-arc__stage:last-child {
    border-bottom: 0;
    padding-bottom: 8px;
}
@media (min-width: 760px) {
    .thrive-how-arc__stage {
        grid-template-columns: 80px 1fr;
        gap: 36px;
    }
}
.thrive-how-arc__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #00194C;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
}
.thrive-how-arc__content h3 {
    font-size: clamp(20px, 1.9vw, 24px);
    letter-spacing: -0.014em;
    color: #0f172a;
    line-height: 1.25;
    margin: 0;
}
.thrive-how-arc__desc {
    margin: 10px 0 0;
    color: #3a4358;
    font-size: 16px;
    line-height: 1.65;
    max-width: 58ch;
}
.thrive-how-arc__experience {
    margin-top: 14px;
    font-style: italic;
    color: #5b6b94;
    font-size: 14.5px;
    line-height: 1.55;
    max-width: 58ch;
}
.thrive-how-arc__experience::before {
    content: "What you'll experience";
    display: block;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    color: #5b6b94;
    margin-bottom: 6px;
}

/* ---------------------------------------------------------------
 * How billing works — intro + reuses thrive-comparison from
 * comparison-table pattern for the table itself
 * --------------------------------------------------------------- */
.thrive-how-billing-intro {
    margin-bottom: 48px;
}
.thrive-how-billing-intro p {
    color: #0f172a;
    font-size: 17px;
    line-height: 1.7;
    max-width: 62ch;
    margin: 0;
}
.thrive-how-billing-intro p + p {
    margin-top: 14px;
}
.thrive-how-billing-intro__lead {
    font-size: clamp(18px, 1.8vw, 22px) !important;
    color: #00194C !important;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.014em;
    margin: 0 0 22px !important;
    max-width: 60ch;
}

/* ---------------------------------------------------------------
 * What you own — 4-up grid with icon cards
 * --------------------------------------------------------------- */
.thrive-how-own {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 680px) {
    .thrive-how-own {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1020px) {
    .thrive-how-own {
        grid-template-columns: repeat(4, 1fr);
    }
}
.thrive-how-own__card {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.thrive-how-own__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px -8px rgba(0, 25, 76, 0.12), 0 2px 6px rgba(0, 25, 76, 0.06);
    border-color: #d8dde9;
}
.thrive-how-own__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eef2fb;
    color: #00194C;
    display: grid;
    place-items: center;
}
.thrive-how-own__icon svg {
    width: 18px;
    height: 18px;
}
.thrive-how-own__card h3 {
    font-size: 16px;
    letter-spacing: -0.012em;
    color: #0f172a;
    line-height: 1.3;
    margin: 0;
}
.thrive-how-own__card p {
    color: #3a4358;
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
}

/* ---------------------------------------------------------------
 * Compounding — 2-col body + pull quote
 * --------------------------------------------------------------- */
.thrive-how-compound {
    display: grid;
    gap: 36px;
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 980px) {
    .thrive-how-compound {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 64px;
    }
}
.thrive-how-compound__body p {
    color: #0f172a;
    font-size: 17.5px;
    line-height: 1.7;
    margin: 0;
}
.thrive-how-compound__body p + p {
    margin-top: 18px;
}
.thrive-how-compound__body strong {
    color: #0f172a;
    font-weight: 600;
}
.thrive-how-compound__quote {
    border-left: 4px solid #00194C;
    padding: 6px 0 6px 24px;
    font-style: italic;
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.4;
    color: #0f172a;
    font-weight: 500;
    letter-spacing: -0.012em;
    margin: 0;
}
.thrive-how-compound__quote-attr {
    display: block;
    margin-top: 14px;
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5b6b94;
}

/* ---------------------------------------------------------------
 * Not the right fit — 4 "not us" cards in 2-col grid
 * --------------------------------------------------------------- */
.thrive-how-nofit {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}
@media (min-width: 760px) {
    .thrive-how-nofit {
        grid-template-columns: repeat(2, 1fr);
    }
}
.thrive-how-nofit__card {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: var(--radius);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 200ms ease, transform 200ms ease;
}
.thrive-how-nofit__card:hover {
    border-color: #d8dde9;
    transform: translateY(-1px);
}
.thrive-how-nofit__head {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #5b6b94;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.thrive-how-nofit__head svg {
    width: 14px;
    height: 14px;
}
.thrive-how-nofit__card h3 {
    font-size: 17px;
    letter-spacing: -0.012em;
    color: #0f172a;
    line-height: 1.3;
    margin: 0;
}
.thrive-how-nofit__card p {
    color: #3a4358;
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
}

/* ===============================================================
 * NON-PROFITS — sections specific to the /non-profits page.
 * Five unique section types: hero with cool+warm light leaks +
 * meta strip, pain cards with tagged headers, why-us 2x2 numbered
 * items, proof plates with sector subtitles, mini case study with
 * navy visual card + body chunks + quote.
 * Funding section reuses the existing funding-band-large pattern.
 * Closing CTA reuses the existing closing-cta pattern.
 * =============================================================== */

/* ---------------------------------------------------------------
 * Non-profits hero — dark navy, warm light leak (bottom-right),
 * cool light leak (top-left), meta strip with top border
 * --------------------------------------------------------------- */
.thrive-np-hero {
    background: #00194C;
    color: #EAEEF8;
    padding-top: 150px;
    padding-bottom: 120px;
    position: relative;
    overflow: hidden;
}
@media (max-width: 760px) {
    .thrive-np-hero {
        padding-top: 118px;
        padding-bottom: 80px;
    }
}
.thrive-np-hero::before {
    content: "";
    position: absolute;
    inset: auto -10% -30% auto;
    width: 60%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(192, 97, 58, 0.18), transparent 70%);
    pointer-events: none;
}
.thrive-np-hero::after {
    content: "";
    position: absolute;
    inset: -30% auto auto -10%;
    width: 55%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(105, 150, 220, 0.18), transparent 70%);
    pointer-events: none;
}
.thrive-np-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
}
.thrive-np-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #EAEEF8;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.thrive-np-hero__h1 {
    color: #fff !important;
    margin: 18px 0 22px !important;
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.06;
}
.thrive-np-hero__lead {
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 32px;
    max-width: 60ch;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.55;
}
.thrive-np-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 32px;
}
.thrive-np-hero__ctas .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15.5px;
    text-decoration: none;
    transition: transform 150ms ease, background 200ms ease;
}
.thrive-np-hero__ctas .wp-block-button__link:hover {
    transform: translateY(-1px);
}
.thrive-np-hero__meta {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14.5px;
}
.thrive-np-hero__meta strong {
    color: #fff;
    font-weight: 600;
}

/* ---------------------------------------------------------------
 * Pain cards — 3-up grid, each with tag label + body, left border
 * --------------------------------------------------------------- */
.thrive-np-pain {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 860px) {
    .thrive-np-pain {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}
.thrive-np-pain__card {
    background: transparent;
    border-left: 2px solid rgba(0, 25, 76, 0.18);
    padding: 6px 0 10px 22px;
}
.thrive-np-pain__tag {
    display: block;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0, 25, 76, 0.7);
    font-weight: 600;
    margin-bottom: 10px;
}
.thrive-np-pain__card p {
    font-size: 17px;
    line-height: 1.55;
    color: #0B1530;
    font-weight: 400;
    margin: 0;
}

/* ---------------------------------------------------------------
 * Why us — 2x2 numbered items
 * --------------------------------------------------------------- */
.thrive-np-why {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 56px;
}
@media (max-width: 760px) {
    .thrive-np-why {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}
.thrive-np-why__item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.thrive-np-why__num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #00194C;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.02em;
}
.thrive-np-why__item h4 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: #00194C;
    line-height: 1.3;
}
.thrive-np-why__item p {
    color: rgba(0, 25, 76, 0.7);
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
}

/* ---------------------------------------------------------------
 * Proof plates — 3-up with name + sector subtitle
 * (distinct from proof-mini which is uppercase name-only)
 * --------------------------------------------------------------- */
.thrive-np-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 920px;
    margin: 0 auto;
}
@media (max-width: 760px) {
    .thrive-np-proof {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
.thrive-np-proof__plate {
    background: #fff;
    border: 1px solid rgba(0, 25, 76, 0.12);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.thrive-np-proof__plate:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(0, 25, 76, 0.04), 0 18px 40px -28px rgba(0, 25, 76, 0.25);
    border-color: rgba(0, 25, 76, 0.18);
}
.thrive-np-proof__name {
    font-weight: 700;
    color: #00194C;
    font-size: 16.5px;
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}
.thrive-np-proof__type {
    font-size: 12.5px;
    color: rgba(0, 25, 76, 0.7);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
}

/* ---------------------------------------------------------------
 * Mini case study — 2-col with navy visual card + body chunks + quote
 * --------------------------------------------------------------- */
.thrive-np-case {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: start;
}
@media (max-width: 980px) {
    .thrive-np-case {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}
.thrive-np-case__visual {
    background: #00194C;
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 40px;
    aspect-ratio: 4 / 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(0, 25, 76, 0.04), 0 18px 40px -28px rgba(0, 25, 76, 0.25);
}
@media (max-width: 980px) {
    .thrive-np-case__visual {
        aspect-ratio: auto;
        padding: 32px;
    }
}
.thrive-np-case__visual::before {
    content: "";
    position: absolute;
    inset: auto -10% -30% auto;
    width: 70%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(232, 185, 138, 0.22), transparent 70%);
}
.thrive-np-case__visual-tag {
    position: relative;
    z-index: 1;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}
.thrive-np-case__visual-name {
    position: relative;
    z-index: 1;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin-top: 12px;
}
.thrive-np-case__visual-meta {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14.5px;
}
.thrive-np-case__visual-meta strong {
    color: #fff;
    font-weight: 600;
}
.thrive-np-case__body h2 {
    margin: 14px 0 16px;
}
.thrive-np-case__lead {
    color: rgba(0, 25, 76, 0.7);
    font-size: 17px;
    margin-bottom: 28px;
    max-width: 55ch;
}
.thrive-np-case__chunk {
    margin-bottom: 22px;
}
.thrive-np-case__chunk-tag {
    display: block;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(0, 25, 76, 0.5);
    margin-bottom: 6px;
}
.thrive-np-case__chunk p {
    margin: 0;
    color: #0B1530;
}
.thrive-np-case__quote {
    margin: 32px 0 24px;
    padding: 24px 26px;
    background: #fff;
    border-left: 3px solid #C0613A;
    border-radius: 0 12px 12px 0;
}
.thrive-np-case__quote p {
    font-size: 17.5px;
    line-height: 1.55;
    color: #00194C;
    font-style: italic;
    margin: 0 0 12px;
}
.thrive-np-case__quote-attr {
    font-size: 13.5px;
    color: rgba(0, 25, 76, 0.7);
    font-style: normal;
}
.thrive-np-case__quote-attr strong {
    color: #00194C;
    font-weight: 600;
}

/* ===============================================================
 * CONTACT — page-specific sections for /contact-us page rebuild.
 * Hero (navy with subtle radial leaks), 2-col contact section
 * (CF7 form-card on left + numbered "what happens next" sidebar
 * on right), 3-up alternatives cards, and a centered reassurance
 * band. CF7 form output is restyled here to render as the
 * mockup's pill radios + clean input fields.
 * =============================================================== */

/* ---------------------------------------------------------------
 * Contact hero — same dark-nav-bg family but no breadcrumb, with
 * the eyebrow chip + em-accent h1 + sub paragraph
 * --------------------------------------------------------------- */
.thrive-contact-hero {
    background: #00194C;
    color: #fff;
    padding: 150px 0 96px;
    position: relative;
    overflow: hidden;
}
@media (max-width: 760px) {
    .thrive-contact-hero {
        padding: 118px 0 72px;
    }
}
.thrive-contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% -10%, rgba(255, 255, 255, 0.10), transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(255, 255, 255, 0.05), transparent 50%);
    pointer-events: none;
}
.thrive-contact-hero__inner {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 24px;
}
.thrive-contact-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.thrive-contact-hero__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
}
.thrive-contact-hero h1 {
    color: #fff !important;
    margin: 18px 0 0 !important;
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.06;
    letter-spacing: -0.03em;
    font-weight: 800;
}
.thrive-contact-hero h1 em {
    font-style: normal;
    color: #B7C2DC;
    font-weight: 800;
}
.thrive-contact-hero__sub {
    margin-top: 22px;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    max-width: 620px;
}

/* ---------------------------------------------------------------
 * Contact section — 2-col grid (form-card + sidebar)
 * --------------------------------------------------------------- */
.thrive-contact-section {
    background: #fff;
    padding: 88px 0;
}
@media (min-width: 860px) {
    .thrive-contact-section {
        padding: 120px 0;
    }
}
.thrive-contact-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 64px;
    align-items: start;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}
@media (max-width: 860px) {
    .thrive-contact-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

/* ---------------------------------------------------------------
 * Form card — wraps the CF7 shortcode output
 * --------------------------------------------------------------- */
.thrive-contact-form-card {
    background: #fff;
    border: 1px solid #E5E8EF;
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: 0 1px 2px rgba(0, 25, 76, 0.04), 0 2px 6px rgba(0, 25, 76, 0.04);
}
@media (max-width: 760px) {
    .thrive-contact-form-card {
        padding: 28px 22px;
    }
}
.thrive-contact-form-card h2 {
    margin: 0 0 8px;
    font-size: 24px;
    letter-spacing: -0.015em;
    color: #0E1530;
    font-weight: 700;
}
.thrive-contact-form-card__lede {
    color: #3A4360;
    margin: 0 0 28px;
    font-size: 17px;
}
.thrive-contact-form-card__microcopy {
    margin-top: 18px;
    font-size: 14.5px;
    color: #6B7388;
    line-height: 1.55;
}

/* ---------------------------------------------------------------
 * CF7 output restyle — make .wpcf7-form-control look like the
 * mockup's clean inputs + render .wpcf7-radio as pills
 * --------------------------------------------------------------- */
.thrive-contact-form-card .wpcf7 .form-row {
    display: block;
    margin-bottom: 22px;
}
.thrive-contact-form-card .wpcf7 .form-row > label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #0E1530;
    letter-spacing: -0.005em;
}
.thrive-contact-form-card .wpcf7 .form-control {
    width: 100%;
    border: 1px solid #CDD3DF;
    border-radius: 8px;
    padding: 13px 14px;
    margin-top: 8px;
    font-family: inherit;
    font-size: 16px;
    color: #0E1530;
    background: #fff;
    transition: border-color 180ms ease, box-shadow 180ms ease;
    -webkit-appearance: none;
}
.thrive-contact-form-card .wpcf7 .form-control:focus {
    outline: none;
    border-color: #00194C;
    box-shadow: 0 0 0 4px rgba(0, 25, 76, 0.08);
}
.thrive-contact-form-card .wpcf7 textarea.form-control {
    min-height: 140px;
    resize: vertical;
    line-height: 1.55;
}
.thrive-contact-form-card .wpcf7 .form-control::placeholder {
    color: #9AA1B4;
}

/* 2-column row for paired optional fields (Phone + Company) */
.thrive-contact-form-card .wpcf7 .form-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}
.thrive-contact-form-card .wpcf7 .form-row--split > .form-col {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #0E1530;
}
@media (max-width: 680px) {
    .thrive-contact-form-card .wpcf7 .form-row--split {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .thrive-contact-form-card .wpcf7 .form-row--split > .form-col {
        margin-bottom: 22px;
    }
    .thrive-contact-form-card .wpcf7 .form-row--split > .form-col:last-child {
        margin-bottom: 0;
    }
}

/* Interest pill-group — CF7 outputs spans, we re-style as pills */
.thrive-contact-form-card .form-row-interest__label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #0E1530;
    margin-bottom: 12px;
}
.thrive-contact-form-card .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.thrive-contact-form-card .wpcf7-radio .wpcf7-list-item {
    margin: 0;
    display: inline-flex;
}
.thrive-contact-form-card .wpcf7-radio .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border: 1px solid #CDD3DF;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 500;
    color: #3A4360;
    cursor: pointer;
    background: #fff;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    user-select: none;
}
.thrive-contact-form-card .wpcf7-radio .wpcf7-list-item label:hover {
    border-color: #00194C;
    color: #00194C;
}
/* Hide native radio, style its label */
.thrive-contact-form-card .wpcf7-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.thrive-contact-form-card .wpcf7-radio .wpcf7-list-item:has(input:checked) label {
    background: #00194C;
    color: #fff;
    border-color: #00194C;
}
.thrive-contact-form-card .wpcf7-radio .wpcf7-list-item:has(input:focus-visible) label {
    box-shadow: 0 0 0 4px rgba(0, 25, 76, 0.15);
}
.thrive-contact-form-card .wpcf7-list-item-label {
    line-height: 1;
}

/* Submit button */
.thrive-contact-form-card .wpcf7 .form-submit {
    margin-top: 8px;
}
.thrive-contact-form-card .wpcf7 input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 16px;
    border: 1px solid transparent;
    background: #00194C;
    color: #fff;
    cursor: pointer;
    transition: transform 200ms cubic-bezier(.2,.7,.2,1), background 200ms ease, box-shadow 200ms ease;
    box-shadow: 0 1px 2px rgba(0, 25, 76, 0.04), 0 2px 6px rgba(0, 25, 76, 0.04);
    line-height: 1;
}
.thrive-contact-form-card .wpcf7 input[type="submit"]:hover {
    background: #001236;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 25, 76, 0.08), 0 2px 6px rgba(0, 25, 76, 0.04);
}

/* ---------------------------------------------------------------
 * "What happens next" sidebar — sticky on desktop
 * --------------------------------------------------------------- */
.thrive-contact-next {
    position: sticky;
    top: 110px;
}
@media (max-width: 860px) {
    .thrive-contact-next {
        position: static;
    }
}
.thrive-contact-next__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6B7388;
}
.thrive-contact-next__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
}
.thrive-contact-next h2 {
    font-size: 22.5px;
    margin: 14px 0 4px;
    letter-spacing: -0.015em;
    color: #0E1530;
    font-weight: 700;
    line-height: 1.15;
}
.thrive-contact-next__lede {
    color: #3A4360;
    margin: 0 0 28px;
}
.thrive-contact-next__step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid #E5E8EF;
}
.thrive-contact-next__step:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.thrive-contact-next__step:last-of-type {
    padding-bottom: 0;
}
.thrive-contact-next__num {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #00194C;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.thrive-contact-next__step h3 {
    font-size: 17px;
    margin: 0 0 4px;
    color: #0E1530;
    font-weight: 600;
}
.thrive-contact-next__step p {
    font-size: 15.5px;
    color: #3A4360;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------
 * Alternatives — 3-up cards on light bg
 * --------------------------------------------------------------- */
.thrive-contact-alts {
    background: #F7F8FA;
    padding: 88px 0;
    border-top: 1px solid #E5E8EF;
    border-bottom: 1px solid #E5E8EF;
}
@media (min-width: 860px) {
    .thrive-contact-alts {
        padding: 120px 0;
    }
}
.thrive-contact-alts__head {
    max-width: 720px;
    margin: 0 auto 48px;
    padding: 0 24px;
}
.thrive-contact-alts__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6B7388;
}
.thrive-contact-alts__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
}
.thrive-contact-alts__head h2 {
    margin: 14px 0;
    font-size: clamp(28px, 3.4vw, 42px);
    color: #0E1530;
    line-height: 1.12;
    font-weight: 700;
}
.thrive-contact-alts__head p {
    color: #3A4360;
    margin: 0;
    font-size: 17px;
    max-width: 600px;
}
.thrive-contact-alts__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}
@media (max-width: 860px) {
    .thrive-contact-alts__grid {
        grid-template-columns: 1fr;
    }
}
.thrive-contact-alt {
    background: #fff;
    border: 1px solid #E5E8EF;
    border-radius: 12px;
    padding: 32px 28px;
    transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms cubic-bezier(.2,.7,.2,1), border-color 220ms ease;
    display: flex;
    flex-direction: column;
}
.thrive-contact-alt:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 25, 76, 0.08), 0 2px 6px rgba(0, 25, 76, 0.04);
    border-color: #CDD3DF;
}
.thrive-contact-alt__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(0, 25, 76, 0.06);
    color: #00194C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.thrive-contact-alt__icon svg {
    width: 22px;
    height: 22px;
}
.thrive-contact-alt h3 {
    font-size: 17.5px;
    margin: 0 0 8px;
    color: #0E1530;
    font-weight: 700;
    line-height: 1.3;
}
.thrive-contact-alt p {
    color: #3A4360;
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0 0 18px;
}
.thrive-contact-alt__action {
    margin-top: auto;
}
.thrive-contact-alt__link {
    color: #00194C;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color 180ms ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    word-break: break-word;
}
.thrive-contact-alt__link:hover {
    border-bottom-color: #00194C;
}
.thrive-contact-alt__note {
    font-size: 13.5px;
    color: #6B7388;
    margin: 10px 0 0;
}

/* ---------------------------------------------------------------
 * Reassurance band — centered, navy
 * --------------------------------------------------------------- */
.thrive-contact-reassure {
    background: #00194C;
    color: #fff;
    padding: 96px 0;
    text-align: center;
}
@media (min-width: 860px) {
    .thrive-contact-reassure {
        padding: 130px 0;
    }
}
.thrive-contact-reassure__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}
.thrive-contact-reassure__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    justify-content: center;
}
.thrive-contact-reassure__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
}
.thrive-contact-reassure h2 {
    color: #fff;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.15;
    max-width: 760px;
    margin: 18px auto 0;
    letter-spacing: -0.02em;
    font-weight: 700;
}
.thrive-contact-reassure p {
    color: rgba(255, 255, 255, 0.72);
    margin: 22px auto 0;
    max-width: 560px;
    font-size: 17px;
    line-height: 1.6;
}

/* ===============================================================
 * SITE FOOTER — compact typography
 *
 * Default body is 17px (from theme.json). Scale down inside the
 * footer for a tighter, more conventional secondary-content feel.
 * Copyright already at 13px via WP's small font-size preset — leave.
 * =============================================================== */
footer.wp-block-group {
    font-size: 14px;
    line-height: 1.55;
}
footer.wp-block-group h4 {
    font-size: 15px;
}