.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   GLOBAL.CSS — design tokens, reset, typography, layout utilities
   Source: assets/css/global.css
   ============================================================ */
/* =========================================================================
   Settlement Options — global.css
   Design tokens & base styles.

   Source of truth for every value below: lifesettlementgrp.com's own live,
   deployed CSS (its Elementor kit's Custom CSS, fetched and inspected
   directly — not approximated from memory or screenshots). Content,
   structure, pages, and URLs stay Settlement Options' own; only the visual
   system below is matched to lifesettlementgrp.com. Variable NAMES are
   unchanged from the previous (Settlement Services-matched) system so every
   existing component rule keeps working — only the hex/value assignments
   moved. See documentation/design-system.md for the full reference and the
   reasoning behind each choice.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
    /* --- Color: brand ------------------------------------------------------
     Navy + gold, read directly from lifesettlementgrp.com's --navy-*
     and --gold-* custom properties. --color-accent now holds the signature gold
     (previously identical to --color-primary, a flat blue-only palette) —
     this is the single biggest visual change: gold is lifesettlementgrp's
     recognizable accent for CTAs, eyebrows, and focus rings, and Settlement
     Options had no second accent color before this. */
    --color-primary: #2E5B7C;
    /* lifesettlementgrp --navy-800 — headings, links, primary brand blue */
    --color-primary-dark: #1E3D57;
    /* lifesettlementgrp --navy-900 — deepest navy: hero/CTA gradient start, footer, gold-button text */
    --color-primary-light: #5489A6;
    /* lifesettlementgrp --navy-600 — input focus border, lighter tint */
    --color-secondary: #3B6F8F;
    /* lifesettlementgrp --navy-700 — secondary blue: hero/CTA gradient end, outline-button color */
    --color-accent: #C9A45A;
    /* lifesettlementgrp --gold-500 — THE signature accent: gold CTA buttons, eyebrow dash, focus ring */
    --color-accent-dark: #B08C42;
    /* lifesettlementgrp --gold-600 — gold hover state, eyebrow text color */
    --color-accent-soft: #FAF5EA;
    /* lifesettlementgrp --gold-050 — pale gold tint: icon-block backgrounds, badge fills, callouts */

    --color-background: #FFFFFF;
    --color-background-alt: #FFFAF9;
    /* lifesettlementgrp --paper — warm off-white section tint (was a cool light gray before) */
    --color-surface: #FFFFFF;
    /* cards / panels */
    --color-surface-dark: #1E3D57;
    /* lifesettlementgrp --navy-900 — flat dark fills: footer, CTA-panel, process-step number badge, skip-link (the hero itself uses a gradient built from this + --color-primary + --color-secondary — see .hero below) */

    --color-text: #2B0708;
    /* lifesettlementgrp --ink — headings and body copy: a warm near-black, not the previous blue-black. A deliberate, distinctive part of this palette — don't round it to pure black or navy. */
    --color-text-muted: #6B3B3B;
    /* lifesettlementgrp --ink-soft — secondary/supporting text: warm brown-gray, matches --color-text's warm undertone */
    --color-text-inverse: #FFFFFF;
    --color-text-inverse-muted: #E9F1F6;
    /* lifesettlementgrp --navy-100 — secondary text on dark backgrounds */

    --color-border: #EADEDC;
    /* lifesettlementgrp --line — warm beige border, not cool gray */
    --color-border-dark: rgba(255, 255, 255, 0.14);
    /* unchanged — already matches lifesettlementgrp's own hero/footer border value exactly */

    --color-success: #1E7A4C;
    /* no lifesettlementgrp equivalent — kept as-is (functional/system color, not a brand color) */
    --color-focus: #C9A45A;
    /* lifesettlementgrp --gold-500 — matches their own focus-ring color exactly */

    /* --- Typography ----------------------------------------------------
     lifesettlementgrp's live site loads a licensed font ("Aeonik") we don't
    have rights to on this domain, with Fraunces/Inter Tight as its own
    documented fallback stack (loaded from Google Fonts either way) — using
    that same fallback here, deliberately, not as a compromise. */
    --font-heading: "Aeonik", "Georgia", serif;
    --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Bumped a step up across the board (~1-2px each) from the
       lifesettlementgrp-matched values this system started from — a
       deliberate, requested departure from that exact match, not a typo. */
    --fs-eyebrow: 0.875rem;
    --fs-small: 0.9375rem;
    --fs-body: 1.125rem;
    --fs-body-lg: clamp(1.125rem, 1.0625rem + 0.3vw, 1.3125rem);
    --fs-h4: clamp(1.1875rem, 1.1125rem + 0.4vw, 1.4375rem);
    --fs-h3: clamp(1.3125rem, 1.2125rem + 0.5vw, 1.475rem);
    --fs-h2: clamp(1.7rem, 1.45rem + 1.2vw, 2.2rem);
    --fs-h1: clamp(2.125rem, 1.625rem + 2.4vw, 3.125rem);
    --fs-display: clamp(2.375rem, 1.825rem + 2.6vw, 3.375rem);
    /* homepage hero only — a modest step above h1's own cap, unlike the old
     5rem display size. lifesettlementgrp never exceeds 3rem anywhere on the
     site; keeping this close to that restrained scale is part of the match. */

    --lh-tight: 1.22;
    --lh-heading: 1.22;
    /* lifesettlementgrp uses one heading line-height throughout (1.22), not a separate tight/heading split */
    --lh-body: 1.7;
    /* matches lifesettlementgrp's body line-height exactly */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --ls-eyebrow: 0.14em;
    /* already matched lifesettlementgrp's eyebrow letter-spacing exactly — no change needed */

    /* --- Spacing scale --------------------------------------------------- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --section-space: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
    /* brackets lifesettlementgrp's actual section rhythm (2.5rem mobile → 4.5rem desktop) — was clamp(3.5rem,...,7rem), noticeably larger than this system */

    /* --- Layout ------------------------------------------------------------ */
    --container-max: 1160px;
    /* lifesettlementgrp --wrap (was 1280px) */
    --container-narrow: 820px;
    /* lifesettlementgrp --wrap-narrow (was 860px) */
    --container-pad: clamp(1.1rem, 3.5vw, 1.5rem);
    /* brackets lifesettlementgrp's 1.5rem default / 1.1rem tightest-mobile side padding */

    /* --- Radius / shadow / border ------------------------------------------ */
    --radius-sm: 10px;
    /* lifesettlementgrp --radius-sm (was 8px) — inputs, small chips, dropdown cards */
    --radius-md: 16px;
    /* lifesettlementgrp --radius (was 14px) — icon blocks */
    --radius-lg: 16px;
    /* lifesettlementgrp --radius (was 22px) — cards, CTA panels, hero visual. lifesettlementgrp uses one radius for both; kept as two tokens here so nothing that references --radius-md vs --radius-lg needs renaming. */
    --radius-pill: 999px;
    /* unchanged — already matched */

    /* rgba tint moved to lifesettlementgrp's own shadow formula — RGB (20,
     40, 58) instead of the previous (46, 91, 124). Both are brand-navy
     tinted rather than plain black; only the exact tint/blur values move. */
    --shadow-sm: 0 1px 2px rgba(20, 40, 58, 0.06), 0 2px 8px rgba(20, 40, 58, 0.06);
    --shadow-md: 0 2px 6px rgba(20, 40, 58, 0.07), 0 12px 32px rgba(20, 40, 58, 0.1);
    --shadow-lg: 0 8px 20px rgba(20, 40, 58, 0.1), 0 24px 56px rgba(20, 40, 58, 0.16);
    /* lifesettlementgrp doesn't define an "lg" shadow — extrapolated from its sm/md formula for larger surfaces (dropdowns, hero visual) */
    --shadow-focus: 0 0 0 3px rgba(201, 164, 90, 0.35);
    /* gold — matches lifesettlementgrp's own gold focus-ring color */

    /* --- Motion -------------------------------------------------------------- */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 260ms;
    --duration-slow: 480ms;

    /* --- Z-index scale --------------------------------------------------- */
    --z-header: 100;
    --z-dropdown: 110;
    --z-overlay: 120;
    --z-modal: 130;
}

/* -------------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* overflow-x: hidden guards against the .site-header/.site-footer full-bleed
   breakout (margin-inline: calc(50% - 50vw) — see components.css) causing a
   horizontal scrollbar: 100vw includes the desktop scrollbar's own width,
   which %-based layout widths don't, so the breakout can overshoot the
   visible viewport by a few px without this. Harmless no-op otherwise. */
html,
body {
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-body) !important;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-background);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
    max-width: 100%;
    display: block;
}

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading) !important;
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
}

h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    letter-spacing: -0.005em;
}

h3 {
    font-size: var(--fs-h3);
}

h4 {
    font-size: var(--fs-h4);
}

p {
    margin: 0 0 var(--space-sm);
}

p:last-child {
    margin-bottom: 0;
}

/* Focus visibility (WCAG 2.2 AA) */
:focus {
    outline: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
    position: absolute;
    left: var(--space-sm);
    top: -60px;
    background: var(--color-surface-dark);
    color: var(--color-text-inverse);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    z-index: 1000;
    transition: top var(--duration-base) var(--ease-standard);
}

.skip-link:focus {
    top: var(--space-sm);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   ------------------------------------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-body) !important;
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent-dark);
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--color-accent);
    border-radius: var(--radius-pill);
}

.eyebrow--on-dark {
    color: var(--color-accent);
}

.eyebrow--on-dark::before {
    background: var(--color-accent);
}

.text-body-lg {
    font-size: var(--fs-body-lg);
}

.text-small {
    font-size: var(--fs-small);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-inverse {
    color: var(--color-text-inverse);
}

.text-inverse-muted {
    color: var(--color-text-inverse-muted);
}

.text-center {
    text-align: center;
}

.italic-accent {
    font-style: italic;
    color: var(--color-accent);
}

/* -------------------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-block: var(--section-space);
}

.section--alt {
    background: var(--color-background-alt);
}

.section--dark {
    background: var(--color-surface-dark);
    color: var(--color-text-inverse);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: var(--color-text-inverse);
}

.section-head {
    max-width: 720px;
    margin-bottom: var(--space-xl);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.grid {
    display: grid;
    gap: var(--space-lg);
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.flex {
    display: flex;
    gap: var(--space-sm);
}

.flex--center {
    align-items: center;
    justify-content: center;
}

.flex--between {
    align-items: center;
    justify-content: space-between;
}

.flex--wrap {
    flex-wrap: wrap;
}

.flex--col {
    flex-direction: column;
}

/* Scroll-reveal base state (progressively enhanced by main.js).
   Visible by default — main.js opts elements INTO the hidden
   pre-animation state (via the "js-anim" class on <html>) only once it
   confirms it's actually running (IntersectionObserver exists, visitor
   doesn't prefer reduced motion). This means .reveal content never gets
   stuck invisible if main.js fails to load or errors out for any reason
   (caching/minify plugin stripping it, ad blocker, slow network, etc.) —
   a real risk on a live WordPress + Elementor deployment where scripts
   can end up shipped inline inside an Elementor HTML widget instead of
   properly enqueued. This replaces the previous fail-closed approach
   (.reveal hidden by default, requiring a "no-js"/"js-disabled" class to
   reveal it) with a fail-open one. */
.js-anim .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duration-slow) var(--ease-standard),
        transform var(--duration-slow) var(--ease-standard);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   COMPONENTS.CSS — buttons, header/nav, hero, cards, footer, forms
   Source: assets/css/components.css
   ============================================================ */
/* =========================================================================
   Settlement Options — components.css
   Buttons, header/nav, hero, stat band, cards, process steps, CTA panels,
   affiliates, accordion, forms, footer, badges.

   Shared component library with settlementservices.io — see
   documentation/design-system.md and documentation/elementor-guide.md.
   ========================================================================= */

/* -------------------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-block: var(--section-space);
}

.section--alt {
    background: var(--color-background-alt);
}

.section--dark {
    background: var(--color-surface-dark);
    color: var(--color-text-inverse);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: var(--color-text-inverse);
}

.section-head {
    max-width: 720px;
    margin-bottom: var(--space-xl);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.grid {
    display: grid;
    gap: var(--space-lg);
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.flex {
    display: flex;
    gap: var(--space-sm);
}

.flex--center {
    align-items: center;
    justify-content: center;
}

.flex--between {
    align-items: center;
    justify-content: space-between;
}

.flex--wrap {
    flex-wrap: wrap;
}

.flex--col {
    flex-direction: column;
}

/* Scroll-reveal base state (progressively enhanced by main.js).
   Visible by default — main.js opts elements INTO the hidden
   pre-animation state (via the "js-anim" class on <html>) only once it
   confirms it's actually running (IntersectionObserver exists, visitor
   doesn't prefer reduced motion). This means .reveal content never gets
   stuck invisible if main.js fails to load or errors out for any reason
   (caching/minify plugin stripping it, ad blocker, slow network, etc.) —
   a real risk on a live WordPress + Elementor deployment where scripts
   can end up shipped inline inside an Elementor HTML widget instead of
   properly enqueued. This replaces the previous fail-closed approach
   (.reveal hidden by default, requiring a "no-js"/"js-disabled" class to
   reveal it) with a fail-open one. */
.js-anim .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duration-slow) var(--ease-standard),
        transform var(--duration-slow) var(--ease-standard);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================================
   PART 2 — components.css (buttons, nav, cards, footer, etc.)
   ========================================================================= */

/* -------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-body) !important;
    font-weight: var(--fw-semibold);
    font-size: 1rem;
    /* matches lifesettlementgrp's .btn exactly */
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-pill);
    transition: transform var(--duration-base) var(--ease-standard),
        background-color var(--duration-base) var(--ease-standard),
        box-shadow var(--duration-base) var(--ease-standard),
        color var(--duration-base) var(--ease-standard);
    white-space: nowrap;
    min-height: 48px;
    /* touch target — matches lifesettlementgrp's own 48px minimum */
}

.btn svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    transition: transform var(--duration-base) var(--ease-standard);
}

.btn:hover svg {
    transform: translateX(3px);
}

.btn:active {
    transform: translateY(1px);
}

/* The signature CTA look on lifesettlementgrp.com is a gold-filled pill
   with dark navy text (their .btn-gold) — this is the single most
   recognizable piece of their button language, so .btn-primary maps to it
   directly rather than staying navy-filled. Text is --color-primary-dark
   (navy-900), not white: gold-500 fill needs a dark foreground to clear
   AA contrast, exactly as lifesettlementgrp's own CSS does it. */
.btn-primary {
    background: var(--color-accent);
    color: var(--color-primary-dark);
    border: 1.5px solid transparent;
}

.btn-primary:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-text-inverse);
}

/* Matches lifesettlementgrp's .btn-outline: transparent fill, navy border
   + text, hover fills solid navy with white text — a full fill on hover,
   not the previous faint-tint-only treatment. */
.btn-secondary {
    background: transparent;
    color: var(--color-secondary);
    border: 1.5px solid var(--color-secondary);
}

.btn-secondary:hover {
    background: var(--color-secondary);
    color: var(--color-text-inverse);
    border-color: var(--color-secondary);
}

/* Matches lifesettlementgrp's .btn-outline-light (for use on dark hero/
   CTA backgrounds): translucent white border at 55% opacity — bumped up
   from the previous 14%-opacity --color-border-dark, which read as barely
   visible against navy. Hover fills solid white with navy text, exactly
   as lifesettlementgrp's own dark-background button does. */
.btn-on-dark.btn-secondary {
    background: transparent;
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.55);
}

.btn-on-dark.btn-secondary:hover {
    background: var(--color-text-inverse);
    color: var(--color-primary);
    border-color: var(--color-text-inverse);
}

/* Matches lifesettlementgrp's .card-link pattern: navy by default, gold on
   hover — not gold by default (gold is reserved for CTA buttons/eyebrows,
   matching how lifesettlementgrp itself distinguishes the two). */
.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0;
    border-radius: 0;
    color: var(--color-secondary);
    font-weight: var(--fw-semibold);
    border-bottom: 1.5px solid transparent;
    transition: color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.btn-text:hover {
    color: var(--color-accent-dark);
    border-color: currentColor;
}

.btn-text svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}

.btn-lg {
    padding: 1.05rem 2rem;
    font-size: var(--fs-body);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* -------------------------------------------------------------------------
   SITE HEADER / NAVIGATION
   ------------------------------------------------------------------------- */
.site-header {
    /* Sticky header, pinned to the top of the viewport on scroll. Note for
     the Elementor/WordPress rebuild: sticky breaks the moment any ancestor
     up the Container chain has non-visible overflow (and fixed breaks
     differently — confined to a boxed width instead of the real viewport —
     the moment an ancestor has a transform/filter/perspective/will-change
     set). If this header is wrapped in an Elementor Container with either
     of those, either strip that ancestor's overflow/transform or use
     Elementor's own built-in Sticky control on the Header Container
     instead of relying on this rule. */
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    border-bottom: 1px solid transparent;
    transition: box-shadow var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard);
    /* Full-bleed regardless of the width of whatever wraps this in
     Elementor — see the same rule on .site-footer below for why.
     !important because Elementor's own Container width classes/inline
     styles can otherwise win the specificity fight. This margin-based
     breakout works from normal flow regardless of any ancestor's
     transform/filter/overflow — none of those affect how a
     non-positioned block computes its own width/margin, only
     sticky/fixed's containing-block lookup, which no longer applies now
     that this is neither. */
    width: auto !important;
    max-width: none !important;
    margin-inline: calc(50% - 50vw) !important;
}

/*
 * The frosted-glass background lives on a ::before pseudo-element rather
 * than directly on .site-header. A `backdrop-filter` (like `transform` or
 * `filter`) on an element establishes a new containing block for any
 * `position: fixed` descendant — and .nav-primary / .nav-overlay (the
 * mobile nav drawer) are descendants of .site-header. Putting the filter
 * here instead keeps .site-header itself filter/transform-free, so the
 * fixed-position mobile drawer still sizes and positions itself against
 * the real viewport instead of the ~72px-tall header bar.
 */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
}

.site-header.is-scrolled {
    box-shadow: var(--shadow-sm);
    border-bottom-color: var(--color-border);
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: 1.1rem;
}

.site-header__logo {
    display: flex;
    align-items: center;
}

.site-header__logo img,
.site-header__logo .custom-logo {
    height: 36px;
    width: auto;
    display: block;
}

/* flex: 1 makes .nav-primary claim all the space between the logo and its
   own right edge, so .nav-primary__list (also flex: 1, justify-content:
   center below) has genuine room to center itself in — not just sit
   flush-left against whatever's left after the logo. Both are overridden
   entirely by the mobile drawer's own flex-direction/position rules in
   the 1024px media query, so this only affects desktop. */
.nav-primary {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex: 1;
}

.nav-primary__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    flex: 1;
}

.nav-primary__link {
    position: relative;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    padding: 0.5rem 0.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.nav-primary__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 2px;
    background: var(--color-accent);
    transition: right var(--duration-base) var(--ease-standard);
    border-radius: var(--radius-pill);
}

.nav-primary__link:hover::after,
.nav-primary__item.is-open>.nav-primary__link::after {
    right: 0;
}

.nav-primary__item {
    position: relative;
}

.nav-caret {
    width: 9px;
    height: 9px;
    transition: transform var(--duration-base) var(--ease-standard);
}

.nav-primary__item.is-open .nav-caret {
    transform: rotate(180deg);
}

/* Invisible hover bridge over the 14px visual gap between the nav link and
   .nav-dropdown below it (see that rule's `top: calc(100% + 14px)`).
   .nav-dropdown is position:absolute, so it doesn't extend
   .nav-primary__item's own box downward — the empty gap between the link
   and the dropdown falls OUTSIDE .nav-primary__item's actual hoverable
   area. Moving the cursor from the link down into the dropdown crosses
   that gap, losing :hover along the way and closing the menu before the
   click on a submenu item can register — exactly the "submenu disappears
   the moment you try to pick something" bug. This bridge fills that gap
   so the item stays hovered the whole way down. Only appears once the
   item is already hovered/open, so it can't accidentally intercept clicks
   on whatever sits just below the header the rest of the time. */
.nav-primary__item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
    display: none;
}

.nav-primary__item:hover::after,
.nav-primary__item.is-open::after {
    display: block;
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    /* --dropdown-shift (set on .nav-primary__item by main.js's
     positionDropdown()) nudges this centered position back on-screen when
     centering under an edge item — e.g. the first/leftmost nav item —
     would otherwise push part of the dropdown past the viewport edge.
     Defaults to 0px so nothing shifts until JS measures an actual
     overflow. */
    --dropdown-shift: 0px;
    transform: translate(calc(-50% + var(--dropdown-shift)), 8px);
    min-width: 300px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-sm);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-standard),
        transform var(--duration-base) var(--ease-standard),
        visibility 0s linear var(--duration-base);
    z-index: var(--z-dropdown);
}

.nav-primary__item.is-open .nav-dropdown,
.nav-primary__item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(calc(-50% + var(--dropdown-shift)), 0);
    transition-delay: 0s;
}

.nav-dropdown__link {
    display: flex;
    flex-direction: column;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    color: var(--color-text);
}

.nav-dropdown__link:hover {
    background: var(--color-background-alt);
}

.nav-dropdown__link strong {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
}

.nav-dropdown__link span {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

/* Matches lifesettlementgrp's gold nav CTA pill exactly — the one gold
   element inside the header, standing out against the plain-text nav
   links around it. */
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.3rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-primary-dark) !important;
    font-size: 0.95rem;
    font-weight: var(--fw-semibold);
    transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.nav-cta:hover {
    background: var(--color-accent-dark);
    color: var(--color-text-inverse) !important;
}

.nav-cta svg {
    width: 15px;
    height: 15px;
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    /* !important: the active theme/host site may ship its own default
     button background/border reset with higher specificity than this
     class alone. */
    background: transparent !important;
    border: none !important;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text) !important;
    border-radius: var(--radius-pill);
    transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}

.nav-toggle__bars::before {
    transform: translateY(-7px);
}

.nav-toggle__bars::after {
    transform: translateY(5px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    transform: translateY(0) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    transform: translateY(0) rotate(-45deg);
}

/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding-block: clamp(3rem, 5vw, 6rem) clamp(3.5rem, 6vw, 7rem);
    /* Diagonal navy gradient + radial gold glow — matches
     lifesettlementgrp.com's own hero exactly (their .hero/.hero::after).
     This reverses an earlier "flat fill, no gradient" direction; that
     direction predates the decision to match lifesettlementgrp.com's
     visual system, which uses this gradient+glow treatment as one of its
     most recognizable signatures. White text on the darkest stop measures
     ~11.9:1; the lightest stop (--color-secondary) still clears AA. */
    background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, var(--color-secondary) 100%);
    color: var(--color-text-inverse);
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    right: -180px;
    top: -180px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 164, 90, 0.22), rgba(201, 164, 90, 0) 65%);
    pointer-events: none;
}

.hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

.hero__eyebrow {
    margin-bottom: var(--space-md);
}

.hero h1,
.hero h2,
.hero h3,
.hero__title {
    color: var(--color-text-inverse);
    font-size: 48px;
    font-weight: 500;
    line-height: 1.45;
    margin-bottom: 36px;
}

.hero__lede {
    font-size: var(--fs-body-lg);
    color: var(--color-text-inverse-muted);
    max-width: 68ch;
    margin-bottom: var(--space-lg);
}

.hero__actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
}

.hero__trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-small);
    color: var(--color-text-inverse-muted);
}

/* Same invisible-on-hero issue as .italic-accent/.eyebrow--on-dark above —
   --color-accent now equals the flat .hero background color exactly. */
.hero__trust-item svg {
    width: 16px;
    height: 16px;
    color: var(--color-accent-soft);
    flex-shrink: 0;
}

.hero__visual {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.14);
    aspect-ratio: 4 / 5;
}

.hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__visual-badge {
    position: absolute;
    left: var(--space-md);
    bottom: var(--space-md);
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    max-width: 260px;
}

.hero__visual-badge strong {
    display: block;
    font-size: 1.35rem;
    font-family: var(--font-heading) !important;
    color: var(--color-text-inverse);
}

.hero__visual-badge span {
    font-size: 0.78rem;
    color: var(--color-text-inverse-muted);
}

/* .hero--light (a white-background homepage-only variant) is retired: to
   match lifesettlementgrp.com — whose own homepage hero uses the exact
   same dark gradient as every other page's hero — the homepage hero now
   uses the plain, unmodified .hero above. The class name is left in
   page_index.py's git history rather than reused for anything else, in
   case a future design pass wants a light-hero option back. */

/* -------------------------------------------------------------------------
   STAT BAND
   ------------------------------------------------------------------------- */
.stat-band {
    background: var(--color-background-alt);
    border-bottom: 1px solid var(--color-border);
}

.stat-band__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    padding-block: var(--space-xl);
}

.stat-card {
    text-align: center;
}

.stat-card__value {
    font-family: var(--font-heading) !important;
    font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    display: block;
    line-height: 1;
    margin-bottom: var(--space-2xs);
}

.stat-card__label {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   CARDS — services / audiences / pillars
   ------------------------------------------------------------------------- */
.card {
    /* !important throughout this block: Elementor's own widget/theme
     defaults (card/box padding, borders, flex alignment) can otherwise
     win the specificity fight against this plain single-class .elementor-kit-6 —
     same reasoning as .site-header/.site-footer above. */
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-lg) !important;
    transition: transform var(--duration-base) var(--ease-standard),
        box-shadow var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md) !important;
    border-color: transparent !important;
}

.icon-block {
    width: 52px !important;
    height: 52px !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-accent-soft) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: var(--space-md) !important;
    transition: background var(--duration-base) var(--ease-standard);
}

.icon-block svg {
    width: 26px !important;
    height: 26px !important;
    color: var(--color-accent-dark) !important;
}

.card:hover .icon-block {
    background: var(--color-accent) !important;
}

/* Same reasoning as .btn-primary above — --color-accent is gold, which
   needs a dark foreground (not white) to stay readable, exactly like the
   gold button text. */
.card:hover .icon-block svg {
    color: var(--color-primary-dark) !important;
}

.service-card__title {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-2xs);
}

.service-card__desc {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    margin-bottom: var(--space-sm);
}

/* Navy by default, gold on hover — matches lifesettlementgrp's .card-link
   convention (see .btn-text above). Gold stays reserved for CTA
   buttons/eyebrows, not link text. */
.service-card__link {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color var(--duration-base) var(--ease-standard);
}

.service-card__link:hover {
    color: var(--color-accent-dark);
}

.service-card__link svg {
    width: 14px;
    height: 14px;
    transition: transform var(--duration-base) var(--ease-standard);
}

.service-card__link:hover svg {
    transform: translateX(3px);
}

.audience-card {
    text-align: left;
}

.audience-card__title {
    font-size: var(--fs-body-lg);
    font-family: var(--font-heading) !important;
    margin-bottom: var(--space-2xs);
}

.pillar-card {
    display: flex !important;
    gap: var(--space-md) !important;
    align-items: flex-start !important;
    padding: var(--space-md) 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
}

/* border-bottom-width only via :last-child, not the border-bottom
   shorthand — the shorthand would also reset border-bottom-color to
   currentColor (initial), which breaks the .grid--3/.grid--4 override
   right below: it re-enables the line but, without touching color itself,
   would inherit that reset currentColor (solid white) instead of the same
   var(--color-border)/inline-overridden color its sibling columns use —
   two visibly different-colored dividers in the same row. */
.pillar-card:last-child {
    border-bottom-width: 0 !important;
}

/* :last-child only makes sense as "no line" for a single-column, stacked
   list (the homepage Technology section) — there the last item really is
   the end of the list. Inside a multi-column grid (technology.html's
   Digital Servicing Portal, 3 pillar-cards side by side in .grid--3), the
   third card is only "last" in DOM order, not visually last — it's a
   sibling column, not the end of a vertical stack, so it still needs its
   own divider line like the other two. Without this, that third column's
   divider silently disappears while its siblings keep theirs. */
.grid--3 .pillar-card:last-child,
.grid--4 .pillar-card:last-child {
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
}

.pillar-card .icon-block {
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}

/* color has no !important: several instances (Technology page, homepage
   Technology section) intentionally override it inline (style="color:#fff")
   for on-dark-background variants — !important here would win over that
   inline style and force dark text unreadable on a dark card. */
.pillar-card__title {
    font-size: var(--fs-body-lg) !important;
    margin-bottom: var(--space-3xs) !important;
    color: var(--color-text);
    font-weight: var(--fw-semibold) !important;
}

/* color has no !important: on-dark instances add .text-inverse-muted for a
   lighter, dark-background-appropriate tone — !important here would win
   over that class's (non-important) color rule regardless of it too. */
.pillar-card__desc {
    color: var(--color-text-muted);
    font-size: var(--fs-small) !important;
}

/* .pillar-card__desc and .text-inverse-muted are both single-class
   .elementor-kit-6s (equal specificity) — since .pillar-card__desc is declared
   later in this file than .text-inverse-muted (in PART 1's typography
   utilities), it wins the tie by source order alone, forcing the muted
   GRAY text even on on-dark instances that add .text-inverse-muted
   specifically to opt out of it (e.g. the homepage Technology section,
   technology.html's Digital Servicing Portal). A matching two-class
   override guarantees the lighter on-dark tone wins regardless of source
   order. */
.pillar-card__desc.text-inverse-muted {
    color: var(--color-text-inverse-muted);
}

/* -------------------------------------------------------------------------
   PROCESS STEPS
   ------------------------------------------------------------------------- */
.process {
    position: relative;
}

.process__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    position: relative;
}

/* Settlement Options addition: a 3-column variant for a 3-step process
   (homepage) — same responsive collapse behavior as the base 4-column
   version, defined in responsive.css right after each breakpoint's
   .process__list override so source order still wins. */
.process__list--3 {
    grid-template-columns: repeat(3, 1fr);
}

.process__list--6 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.process__list::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: var(--color-border);
}

.process-step {
    position: relative;
}

/* Matches lifesettlementgrp's timeline .step-num exactly: a white circle
   with a gold ring rather than a solid-filled dark one — their single most
   recognizable "signature element." */
.process-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-accent);
    color: var(--color-primary);
    font-family: var(--font-heading) !important;
    font-weight: var(--fw-bold);
    font-size: 1.1rem;
    margin-bottom: var(--space-md);
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-sm);
}

.process-step__title {
    font-size: var(--fs-body-lg);
    margin-bottom: var(--space-2xs);
    color: var(--color-text);
    font-weight: var(--fw-semibold);
}

.process-step__desc {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
}

/* -------------------------------------------------------------------------
   CTA PANELS
   ------------------------------------------------------------------------- */
.cta-panel {
    /* Matches lifesettlementgrp's .cta-band gradient exactly (a shallower
     150deg two-stop version of the .hero gradient above — same reversal
     of the earlier flat-fill-only direction). */
    background: linear-gradient(150deg, var(--color-primary-dark), var(--color-secondary));
    border-radius: var(--radius-lg);
    padding: clamp(2.5rem, 3vw, 4.5rem);
    color: var(--color-text-inverse);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-panel__inner {
    position: relative;
    max-width: 640px;
    margin-inline: auto;
}

.cta-panel__title {
    color: var(--color-text-inverse);
    margin-bottom: var(--space-sm);
}

.cta-panel__desc {
    color: var(--color-text-inverse-muted);
    margin-bottom: var(--space-lg);
}

.cta-panel__actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.portal-panel {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-xl);
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 3vw, 3.5rem);
}

.portal-panel__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-accent-soft);
    color: var(--color-accent-dark);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-sm);
}

.portal-panel__visual {
    background: var(--color-background-alt);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    padding: var(--space-lg);
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -------------------------------------------------------------------------
   AFFILIATES
   ------------------------------------------------------------------------- */
.affiliate-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.affiliate-card__logo {
    font-family: var(--font-heading) !important;
    font-weight: var(--fw-semibold);
    font-size: 1.25rem;
    color: var(--color-text);
}

.affiliate-card__desc {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    flex-grow: 1;
}

/* -------------------------------------------------------------------------
   ACCORDION
   ------------------------------------------------------------------------- */
.accordion__item {
    border-bottom: 1px solid var(--color-border);
}

.accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    text-align: left;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    font-size: var(--fs-body-lg);
    /* !important on all four: this is a bare <button> element (see the
       global `button { background: none; border: none; }` reset above),
       and the WordPress host theme typically ships its own generic
       `button:hover`/`:focus` background — same failure mode as
       .nav-toggle above, just triggered by :hover instead of by default.
       Without !important here, that theme rule paints a solid color
       block behind this trigger the moment it's hovered or focused. */
    background: transparent !important;
    border: none !important;
}

.accordion__trigger:hover,
.accordion__trigger:focus,
.accordion__trigger:active {
    background: transparent !important;
    border: none !important;
    color: var(--color-text) !important;
}

.accordion__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transition: transform var(--duration-base) var(--ease-standard);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
    transform: rotate(45deg);
}

/* Elementor Pro's Accordion widget ships its own "Active" state background
   color (defaults to the site's accent color), which this design never
   had — the trigger stays flat/transparent at every state, only the icon
   rotates. If the widget's own Style tab > Toggle > Active > Background
   isn't set to None/transparent, that default paints a solid color block
   behind the open item, so these overrides force it back to flat
   regardless of widget version (classic Accordion vs. Nested Accordion). */
.elementor-widget-accordion .elementor-tab-title,
.elementor-widget-accordion .elementor-tab-title.elementor-active,
.elementor-widget-accordion .elementor-tab-title:hover,
.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-title.elementor-active,
.elementor-accordion .elementor-tab-title:hover {
    background: transparent !important;
    color: var(--color-text) !important;
}

.e-n-accordion,
.elementor-widget-n-accordion {
    --n-accordion-item-title-background-color: transparent !important;
    --n-accordion-item-title-background-color-active: transparent !important;
    --n-accordion-item-title-background-color-hover: transparent !important;
    --n-accordion-item-title-color-active: var(--color-text) !important;
}

.e-n-accordion-item-title,
.e-n-accordion-item-title[aria-expanded="true"],
.e-n-accordion-item-title:hover {
    background: transparent !important;
    color: var(--color-text) !important;
}

.accordion__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-base) var(--ease-standard);
}

.accordion__panel-inner {
    padding-bottom: var(--space-md);
    color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   FORMS
   ------------------------------------------------------------------------- */
.form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--shadow-sm);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: var(--space-sm);
}

.form-group label {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.form-group .hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.form-control {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    font-size: var(--fs-body);
    background: var(--color-background);
    transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
    min-height: 44px;
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.form-control:focus-visible {
    border-color: var(--color-focus);
    box-shadow: var(--shadow-focus);
}

.form-microcopy {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: var(--space-sm);
}

.form-microcopy svg {
    width: 14px;
    height: 14px;
    color: var(--color-success);
}

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
    background: var(--color-surface-dark);
    color: var(--color-text-inverse-muted);
    padding-block: var(--space-2xl) var(--space-lg);
    /* Full-bleed regardless of the width of whatever wraps this in Elementor
     (e.g. a "Boxed" Container around the HTML widget) — without this, the
     footer's dark background only spans that Container's content width
     instead of the full viewport. !important because Elementor's own
     Container width classes/inline styles can otherwise win the
     specificity fight. */
    width: auto !important;
    max-width: none !important;
    margin-inline: calc(50% - 50vw) !important;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
    gap: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border-dark);
}

.footer-brand__logo {
    margin-bottom: var(--space-md);
}

.footer-brand__logo img {
    height: 31px;
    width: auto;
    display: block;
}

.footer-brand__desc {
    max-width: 34ch;
    font-size: var(--fs-small);
}

.footer-col__title {
    color: var(--color-text-inverse);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-sm);
}

.footer-col__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.footer-col__list a {
    font-size: var(--fs-small);
    transition: color var(--duration-base) var(--ease-standard);
}

.footer-col__list a:hover {
    color: var(--color-text-inverse);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: var(--fs-small);
}

.footer-contact svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* .footer-contact (phone/email) and .footer-legal__links (Privacy Policy)
   are the only footer links with no explicit :hover/:visited rule of their
   own — they were relying on the plain `a { color: inherit; }` reset up in
   PART 1 to keep them light on this dark footer. .footer-col__list a right
   above already has its own explicit :hover color and never showed this
   problem; these two didn't, and could fall back to the browser/host-theme
   default link-hover blue instead. */
.footer-contact a:hover,
.footer-contact a:visited,
.footer-legal__links a:hover,
.footer-legal__links a:visited {
    color: var(--color-text-inverse);
}

.footer-note {
    margin: var(--space-lg) 0 0;
    color: var(--color-text-inverse-muted);
    font-size: var(--fs-small);
}

.footer-note a {
    text-decoration: underline;
}

.footer-note a:hover,
.footer-note a:visited {
    color: var(--color-text-inverse);
}

.service-card__desc svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.footer-legal {
    padding-top: var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.8rem;
}

.footer-legal__links {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   BADGES
   ------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: var(--fw-semibold);
    background: var(--color-background-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* -------------------------------------------------------------------------
   BLOG — reskins Elementor PRO's native "Posts" widget to match this
   design system (cards, eyebrow badges, buttons, pagination) with zero
   copy/paste: this file is already enqueued site-wide, so the moment an
   editor drops a Posts widget onto any page it picks up this styling
   automatically. Targets the widget's own stable markup/classes
   (elementor-post*, elementor-pagination) rather than anything custom.
   See elementor/instructions/blog.md for full build steps + how to
   customize every piece below.
   ------------------------------------------------------------------------- */

/* Card skin (works with the widget's "Cards" or "Classic" skin) */
.elementor-widget-posts .elementor-post {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--duration-base) var(--ease-standard),
        box-shadow var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard);
}

.elementor-widget-posts .elementor-post:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.elementor-widget-posts .elementor-post__card {
    padding: 0;
}

.elementor-widget-posts .elementor-post__thumbnail__link {
    display: block;
}

.elementor-widget-posts .elementor-post__thumbnail {
    aspect-ratio: 8 / 5;
    object-fit: cover;
    width: 100%;
}

.elementor-widget-posts .elementor-post__text {
    padding: var(--space-md) var(--space-md) var(--space-lg);
}

/* Category "badge" (Terms meta) — styled like .eyebrow, not a raw link chip */
.elementor-widget-posts .elementor-post__badge {
    display: inline-flex;
    font-family: var(--font-body) !important;
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent-dark);
    background: none;
    padding: 0;
    margin-bottom: var(--space-2xs);
}

.elementor-widget-posts .elementor-post__title {
    font-family: var(--font-heading) !important;
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    font-size: var(--fs-h4);
    margin: 0 0 var(--space-2xs);
}

.elementor-widget-posts .elementor-post__title a {
    color: var(--color-primary);
}

.elementor-widget-posts .elementor-post__title a:hover {
    color: var(--color-primary-dark);
}

.elementor-widget-posts .elementor-post__meta-data {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    margin-bottom: var(--space-sm);
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.elementor-widget-posts .elementor-post__excerpt {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
}

.elementor-widget-posts .elementor-post__excerpt p {
    margin: 0 0 var(--space-sm);
}

.elementor-widget-posts .elementor-post__read-more {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.elementor-widget-posts .elementor-post__read-more:hover {
    color: var(--color-primary-dark);
}

/* Faux arrow to match .service-card__link elsewhere on the site, since the
   Posts widget's Read More text has no built-in icon control. */
.elementor-widget-posts .elementor-post__read-more::after {
    content: "\2192";
    transition: transform var(--duration-base) var(--ease-standard);
}

.elementor-widget-posts .elementor-post__read-more:hover::after {
    transform: translateX(3px);
}

/* Pagination (Numbers layout) — styled like small pill buttons */
.elementor-widget-posts .elementor-pagination,
.elementor-widget-posts nav.elementor-pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-2xs);
    margin-top: var(--space-xl);
}

.elementor-widget-posts .elementor-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: var(--space-xs);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    transition: background var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard),
        color var(--duration-base) var(--ease-standard);
}

.elementor-widget-posts .elementor-pagination .page-numbers:hover {
    border-color: var(--color-primary);
    background: var(--color-background-alt);
}

.elementor-widget-posts .elementor-pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.elementor-widget-posts .elementor-pagination .page-numbers.dots {
    border: none;
    color: var(--color-text-muted);
}

/* Single blog post body copy (post.php / single.php the_content output) —
   gives real paragraph/heading/list/quote rhythm to post body text, since
   .entry-content otherwise only sets font-size via the .text-body-lg
   utility applied in single.php. */
.entry-content h2 {
    font-size: var(--fs-h3);
    margin-top: var(--space-xl);
}

.entry-content h3 {
    font-size: var(--fs-h4);
    margin-top: var(--space-lg);
}

.entry-content p,
.entry-content ul,
.entry-content ol {
    margin-bottom: var(--space-md);
}

.entry-content ul,
.entry-content ol {
    padding-left: 1.25em;
    list-style: revert;
}

.entry-content img {
    border-radius: var(--radius-md);
    margin-block: var(--space-md);
}

.entry-content blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-md);
    margin: var(--space-lg) 0;
    font-style: italic;
    color: var(--color-text-muted);
}

.entry-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
}

.entry-content a:hover {
    text-decoration-color: currentColor;
}

/* -------------------------------------------------------------------------
   SETTLEMENT OPTIONS ADDITIONS — content split, calculator steps, legal
   prose. Same tokens as everything above; new class names only, nothing
   here overrides or duplicates a Settlement Services rule.
   ------------------------------------------------------------------------- */

/* Two-column text + visual block, used on explainer pages (Basics,
   Benefits, Viaticals) in place of a Settlement Services .hero when the
   section isn't a page-top hero — same grid ratio and gap as .hero__grid
   for visual consistency, but usable anywhere in the page flow. */
.content-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

.content-split--reverse .content-split__visual {
    order: -1;
}

.content-split__visual {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-background-alt);
    aspect-ratio: 4 / 3;
}

.content-split__visual img,
.content-split__visual svg {
    width: 100%;
    height: 100%;
    display: block;
}

.content-split__eyebrow {
    margin-bottom: var(--space-md);
}

.content-split ul.check-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    font-size: var(--fs-body);
    color: var(--color-text);
}

.check-list li svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 0.15em;
    color: var(--color-accent-dark);
}

/* "Free Estimate" pill badge — calculator hero only. Same recipe as
   .badge/.eyebrow (pill, accent-soft fill) plus a two-tone dot borrowed
   from the "live indicator" pattern: a soft outer ring in a translucent
   accent tint, a solid --color-primary-dark center. */
.estimate-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.45rem 1.1rem 0.45rem 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent-dark);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
    margin-bottom: var(--space-md);
}

.estimate-badge__dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(46, 91, 124, 0.25);
    /* rgb of --color-primary */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.estimate-badge__dot::after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-primary-dark);
}

/* Calculator — multi-step form progress indicator: a thin 4-segment bar
   (one segment per step) plus a small "STEP X OF N" label underneath,
   rather than the numbered-circle pattern used elsewhere in this system.
   Segments fill in order as the visitor completes each step. NOTE: not yet
   wired up in calculator-body.html/forms.js in this export — the page
   still uses the numbered-circle .step-progress pattern immediately below.
   Kept here only because it's already present in the current source
   components.css; leave both patterns in place until the calculator page
   itself is migrated. */
.step-progress-bar {
    display: flex;
    gap: var(--space-2xs);
    margin-bottom: var(--space-sm);
}

.step-progress-bar__seg {
    flex: 1;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    transition: background var(--duration-base) var(--ease-standard);
}

.step-progress-bar__seg.is-filled {
    background: var(--color-primary-dark);
}

.step-progress-bar__label {
    display: block;
    font-family: var(--font-body) !important;
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin-bottom: var(--space-xl);
}

/* Calculator — multi-step form progress indicator (numbered-circle pattern,
   currently the one actually wired up — see note above) */
.step-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-bottom: var(--space-xl);
}

.step-progress__item {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    flex: 1;
}

.step-progress__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-background-alt);
    border: 1.5px solid var(--color-border);
    color: var(--color-text-muted);
    font-family: var(--font-heading) !important;
    font-weight: var(--fw-semibold);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard),
        color var(--duration-base) var(--ease-standard);
}

.step-progress__label {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.step-progress__bar {
    flex: 1;
    height: 2px;
    background: var(--color-border);
    border-radius: var(--radius-pill);
}

.step-progress__item.is-complete .step-progress__num,
.step-progress__item.is-active .step-progress__num {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.step-progress__item.is-complete .step-progress__label,
.step-progress__item.is-active .step-progress__label {
    color: var(--color-text);
}

.form-step {
    display: none;
}

.form-step.is-active {
    display: block;
}

.form-step-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

/* Choice rows (health status, tobacco use, policy type, "who's insured") —
   a horizontal label + custom radio, full-width, two per row. Replaces an
   earlier centered-text "choice card" pattern; this is the one your team
   asked to standardize on across the whole calculator. NOTE: not yet wired
   up in calculator-body.html in this export — see the .step-progress-bar
   note above; the .choice-grid/.choice-card pattern right below is still
   the one actually in use here. */
.choice-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.choice-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    background: var(--color-surface);
    cursor: pointer;
    min-height: 44px;
    transition: border-color var(--duration-base) var(--ease-standard),
        color var(--duration-base) var(--ease-standard);
}

.choice-row input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}

.choice-row__radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    flex-shrink: 0;
    position: relative;
    transition: background var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard);
}

/* Checkmark, not a dot: two rotated border edges form the tick, matching
   the filled-circle-with-checkmark selected state used elsewhere in the
   calculator (choice-card, step-progress). */
.choice-row__radio::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--color-text-inverse);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard);
}

.choice-row:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent-dark);
    font-weight: var(--fw-semibold);
}

.choice-row:has(input:checked) .choice-row__radio {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.choice-row:has(input:checked) .choice-row__radio::after {
    opacity: 1;
}

.choice-row:has(input:focus-visible) {
    box-shadow: var(--shadow-focus);
}

/* Radio/choice cards (health status, tobacco use, policy type) — same
   visual language as .form-control but selectable as a group. */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.choice-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-sm);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    cursor: pointer;
    min-height: 44px;
    transition: border-color var(--duration-base) var(--ease-standard),
        background var(--duration-base) var(--ease-standard);
}

.choice-card input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}

.choice-card:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent-dark);
    font-weight: var(--fw-semibold);
}

.choice-card:has(input:focus-visible) {
    box-shadow: var(--shadow-focus);
}

/* Result panel shown after the calculator's final step */
.result-panel {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
}

.result-panel__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
}

.result-panel__icon svg {
    width: 32px;
    height: 32px;
}

/* Long-form legal prose (Privacy Policy, Compliance) */
.legal-content h2 {
    font-size: var(--fs-h3);
    margin-top: var(--space-xl);
}

.legal-content h3 {
    font-size: var(--fs-h4);
    margin-top: var(--space-lg);
}

.legal-content p,
.legal-content ul,
.legal-content ol {
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.legal-content ul,
.legal-content ol {
    padding-left: 1.25em;
    list-style: revert;
}

.legal-content strong {
    color: var(--color-text);
}

.legal-updated {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
}

/* ============================================================
   RESPONSIVE.CSS — breakpoint overrides (980/900/780/560/420)
   Source: assets/css/responsive.css
   ============================================================ */
/* =========================================================================
   Settlement Options — responsive.css
   Breakpoint overrides.

   Thresholds are remapped to lifesettlementgrp.com's own tested breakpoint
   set (980 / 900 / 860 / 780 / 640 / 560 / 420 — read directly out of its
   live CSS, same as every other value in this system) rather than the
   round 1200/1024/768/480/390 figures the previous system used. Each old
   tier moved to the closest LSG value that preserves its role and relative
   order: 1200→980 (early desktop tightening), 1024→900 (nav collapses to
   the mobile drawer + major grid restructuring — lifesettlementgrp's own
   header first steps down in this range), 768→780 (already near-identical),
   480→560, 390→420. lifesettlementgrp's other two breakpoints (860, 640)
   aren't needed by this site's simpler component set and are left unused.
   Load order matters: global.css, then components.css, then this file last.
   ========================================================================= */

/* ----------------------------- 980px ------------------------------------ */
@media (max-width: 980px) {
    :root {
        --container-pad: 2rem;
    }

    .hero__grid {
        gap: var(--space-xl);
    }

    .footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr;
    }

    .footer-grid> :last-child {
        grid-column: 1 / -1;
    }
}

/* ----------------------------- 900px ------------------------------------ */
@media (max-width: 900px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }

    .hero__visual {
        max-width: 480px;
        margin-inline: auto;
        aspect-ratio: 16/10;
    }

    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-band__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }

    .process__list,
    .process__list--3,
    .process__list--6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .process__list::before {
        display: none;
    }

    .portal-panel {
        grid-template-columns: 1fr;
    }

    .portal-panel__visual {
        order: -1;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-grid> :first-child {
        grid-column: 1 / -1;
    }

    /* Nav collapses to a mobile drawer */
    .nav-primary {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        height: 100vh;
        height: 100dvh;
        width: min(360px, 86vw);
        background: var(--color-surface);
        flex-direction: column;
        align-items: stretch;
        padding: 5.5rem var(--space-lg) var(--space-lg);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        transition: transform var(--duration-base) var(--ease-standard);
        z-index: var(--z-overlay);
        overflow-y: auto;
        gap: var(--space-lg);
    }

    .nav-primary.is-open {
        transform: translateX(0);
    }

    /* flex: 0 1 auto and justify-content: flex-start undo the desktop
     centering rule (.nav-primary__list { flex: 1; justify-content: center; })
     — inside this mobile drawer's column layout, flex: 1 on the list makes
     it grow to fill all remaining vertical space, and justify-content:
     center then centers the (few, short) nav items inside that huge box,
     stranding a large empty gap above and below them instead of a normal
     top-anchored list. */
    .nav-primary__list {
        flex: 0 1 auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        width: 100%;
    }

    .nav-primary__item {
        width: 100%;
        border-bottom: 1px solid var(--color-border);
    }

    .nav-primary__link {
        padding: 0.9rem 0;
        width: 100%;
        justify-content: space-between;
    }

    .nav-primary__link::after {
        display: none;
    }

    .nav-dropdown {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        opacity: 1;
        visibility: visible;
        display: none;
        padding: 0 0 var(--space-sm);
        min-width: 0;
    }

    /* `.nav-primary__item.is-open .nav-dropdown` / `:hover` (desktop centering
     + reveal transform, two classes = higher specificity than the plain
     `.nav-dropdown` reset just above, one class) still wins over that reset
     even inside this mobile-only media query — specificity beats source
     order regardless of which media query either rule sits in. Left
     unfixed, opening any accordion item re-applies translateX(-50%) here
     too, shoving the whole submenu half its own width off to the left and
     clipping its text — needs its own explicit override at matching
     specificity. */
    .nav-primary__item.is-open .nav-dropdown,
    .nav-primary__item:hover .nav-dropdown {
        transform: none;
    }

    /* .nav-dropdown__link's 0.7rem 0.8rem padding exists for the floating
     desktop card (needs breathing room inside its own border/shadow) — in
     this flat mobile accordion there's no card, so that same horizontal
     padding just shifts each sub-item's text start further right than the
     "Who We Serve" trigger text sitting directly above it, at 0 horizontal
     padding. Matching horizontal padding to the trigger keeps every level
     flush at the same left edge; vertical padding is kept for tap targets. */
    .nav-dropdown__link {
        padding-left: 0;
        padding-right: 0;
    }

    .nav-primary__item.is-open .nav-dropdown {
        display: block;
    }

    .nav-toggle {
        display: inline-flex !important;
    }

    .nav-cta {
        order: -1;
    }

    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: calc(var(--z-overlay) - 1);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--duration-base) var(--ease-standard);
    }

    .nav-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }
}

/* ------------------------------ 780px ------------------------------------ */
@media (max-width: 780px) {
    .section {
        padding-block: clamp(2.5rem, 8vw, 4rem);
    }

    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr 1fr;
    }

    .stat-band__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .process__list,
    .process__list--3,
    .process__list--6 {
        grid-template-columns: 1fr;
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__actions .btn {
        justify-content: center;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid>* {
        grid-column: auto;
    }

    .footer-legal {
        flex-direction: column;
        align-items: flex-start;
    }

    .pillar-card {
        flex-direction: column;
    }
}

/* ------------------------------ 560px ------------------------------------ */
@media (max-width: 560px) {

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }

    .hero {
        padding-block: 2.5rem 3rem;
    }

    .hero__visual {
        aspect-ratio: 4/3;
    }

    .cta-panel {
        padding: 2rem 1.25rem;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .site-header__bar {
        padding-block: 0.85rem;
    }
}

/* ------------------------------ 420px ------------------------------------ */
@media (max-width: 420px) {
    :root {
        --container-pad: 1.1rem;
    }

    .stat-card__value {
        font-size: 1.75rem;
    }

    .icon-block {
        width: 46px;
        height: 46px;
    }
}

/* End custom CSS */

/* ------------------------- Settlement Options additions ------------------ */
@media (max-width: 900px) {
    .content-split {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .content-split--reverse .content-split__visual {
        order: 0;
    }

    .content-split__visual {
        max-width: 480px;
        margin-inline: auto;
    }
}

@media (max-width: 780px) {
    /* .step-progress (numbered-circle pattern) is still the one actually
       wired up in calculator-body.html/forms.js in this export — see the
       note above .step-progress-bar in components.css's forms section —
       so its own responsive rule stays here, renumbered to the new 780px
       tier along with everything else in this file. */
    .step-progress__label {
        display: none;
    }

    .form-step-actions {
        flex-direction: column-reverse;
    }

    .form-step-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    /* .choice-grid (old pattern) is still the one actually wired up in
       calculator-body.html in this export — see the note above
       .choice-row-grid in components.css's forms section — kept here,
       renumbered to the new 560px tier. */
    .choice-grid {
        grid-template-columns: 1fr 1fr;
    }

    .choice-row-grid {
        grid-template-columns: 1fr;
    }
}

/* Match the SGI desktop header: capped logo on the left, nav links centered
   in the space between, phone CTA pinned right.

   The links are centered by flex distribution, NOT by margin-left: auto —
   an auto left margin on the first item pushed the whole list hard against
   the CTA (right-aligned), which is the opposite of centered. Instead the
   logo and the .nav-primary row each take a share of the bar, and the list
   (flex: 1) centers itself inside whatever room is left between them, with
   .nav-cta (flex-shrink: 0) holding the right edge.

   The list gap is a clamp rather than the flat --space-lg: at the narrow end
   of this tier (981–1200px) six nav items plus six 2.5rem gaps plus a 282px
   logo plus the CTA overflow the 1160px container, and gaps don't shrink the
   way flex items do. */
@media (min-width: 981px) {
    .site-header__bar {
        gap: var(--space-sm);
    }

    .site-header__logo {
        flex-shrink: 0;
        max-width: 282px;
    }

    .site-header__logo img,
    .site-header__logo .custom-logo {
        max-width: 100%;
    }

    .nav-primary {
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: var(--space-sm);
    }

    .nav-primary__list {
        flex: 1 1 auto;
        justify-content: center;
        width: auto;
        gap: clamp(1rem, 2.2vw, 2.5rem);
    }

    .nav-cta {
        flex-shrink: 0;
    }
}/* End custom CSS */