/* =====================================================================
   MOLD REMOVAL AND TESTING - design tokens
   Single source of truth for the web brand kit. Framework-neutral.
   Derived verbatim from Brand/Mold Removal and Testing/tokens.css.
   Do NOT edit token :root values to taste - change the brand kit instead.
   ===================================================================== */

:root {

    /* ----- BRAND COLORS ---------------------------------------------- */
    --navy: #0F2A44;            /* primary anchor - headings, dark surfaces, links */
    --cream: #FAF7F2;           /* page ground */
    --ink: #0F1419;             /* default body text */
    --white: #FFFFFF;           /* pure surfaces (forms, modals) */

    --sage: #7A8B6E;            /* verified accent - UI / large text only */
    --sage-deep: #5C6B53;       /* sage when used as body text (passes AA) */

    --bronze: #A87E3D;          /* eyebrow / tagline / hairline-rule accent - UI / large only */
    --bronze-deep: #7A5A2B;     /* bronze when used as body text */

    --terracotta: #B8552E;      /* CTA accent - primary buttons, conversion moments */
    --terracotta-hover: #A04826;/* button hover */


    /* ----- NEUTRAL RAMP (warm gray, tuned to cream ground) ----------- */
    --gray-50:  #F2EFEA;
    --gray-100: #E5E0D7;
    --gray-200: #CBC3B5;
    --gray-300: #ADA493;
    --gray-400: #8A8174;
    --gray-500: #6B6358;
    --gray-600: #4E483F;
    --gray-700: #36312A;
    --gray-800: #211E1A;
    --gray-900: #100E0B;


    /* ----- SEMANTIC COLORS (UI variant / body-text variant) ---------- */
    --success: #2F8F5C;         /* UI / pill / large only */
    --success-deep: #1F6B40;    /* body text */

    --warning: #C98A06;         /* UI / icon / pill bg only */
    --warning-deep: #8B5C00;    /* body text */

    --error: #C0392B;           /* passes body on cream */
    --error-deep: #C0392B;      /* alias for consistency */

    --info: #2B6FB8;            /* passes body on cream */
    --info-deep: #2B6FB8;       /* alias for consistency */


    /* ----- SURFACE / LINE TOKENS ------------------------------------- */
    --bg: var(--cream);
    --surface: var(--white);
    --surface-dark: var(--navy);
    --line: var(--gray-100);
    --line-strong: var(--gray-200);
    --muted: var(--gray-500);
    --ink-2: var(--gray-700);


    /* ----- TYPOGRAPHY ------------------------------------------------- */
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Type scale (modular ~1.25) */
    --text-display:   4rem;      /* 64px */
    --text-h1:        3rem;      /* 48px */
    --text-h2:        2.25rem;   /* 36px */
    --text-h3:        1.75rem;   /* 28px */
    --text-h4:        1.375rem;  /* 22px */
    --text-h5:        1.125rem;  /* 18px */
    --text-h6:        1rem;      /* 16px */
    --text-body-lg:   1.125rem;  /* 18px */
    --text-body:      1rem;      /* 16px */
    --text-body-sm:   0.875rem;  /* 14px */
    --text-caption:   0.75rem;   /* 12px */
    --text-eyebrow:   0.75rem;   /* 12px */

    /* Line-heights */
    --lh-display:  1.05;
    --lh-h1:       1.10;
    --lh-h2:       1.15;
    --lh-h3:       1.20;
    --lh-h4:       1.25;
    --lh-h5:       1.30;
    --lh-h6:       1.40;
    --lh-body-lg:  1.65;
    --lh-body:     1.60;
    --lh-body-sm:  1.55;
    --lh-caption:  1.45;
    --lh-eyebrow:  1.00;

    /* Letter-spacing */
    --tracking-display:  -0.02em;
    --tracking-h1:       -0.02em;
    --tracking-h2:       -0.015em;
    --tracking-h3:       -0.01em;
    --tracking-h4:       -0.005em;
    --tracking-eyebrow:   0.14em;

    /* Weights */
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semibold: 600;
    --weight-bold:    700;


    /* ----- SPACING (4-px base) --------------------------------------- */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;


    /* ----- RADII ------------------------------------------------------ */
    --radius-sm:   6px;
    --radius:      12px;
    --radius-lg:   20px;
    --radius-full: 9999px;


    /* ----- SHADOWS --------------------------------------------------- */
    --shadow-sm: 0 2px 6px  rgba(15, 42, 68, .06);
    --shadow:    0 8px 28px rgba(15, 42, 68, .08);
    --shadow-lg: 0 18px 50px rgba(15, 42, 68, .14);


    /* ----- BREAKPOINTS (reference only; use in @media) --------------- */
    --bp-sm:  480px;
    --bp-md:  768px;
    --bp-lg:  1024px;
    --bp-xl:  1280px;
    --bp-2xl: 1440px;


    /* ----- CONTAINERS ------------------------------------------------- */
    --container-narrow: 720px;
    --container:        1180px;
    --container-wide:   1320px;
    --content-pad:      clamp(1rem, 3vw, 2rem);


    /* ----- ICONS ----------------------------------------------------- */
    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon:    20px;
    --icon-md: 24px;
    --icon-lg: 32px;
    --icon-xl: 48px;


    /* ----- MOTION ---------------------------------------------------- */
    --motion-fast:   120ms;
    --motion-base:   200ms;
    --motion-slow:   300ms;
    --ease:          cubic-bezier(.2, .8, .2, 1);


    /* ----- FOCUS RING (a11y) ---------------------------------------- */
    --focus-ring: 3px solid var(--bronze);
    --focus-offset: 2px;
}


/* =====================================================================
   Base element styles (from tokens.css base layer + Mold-Removal-and-
   Testing customizations).
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--bg);
}

html, body { max-width: 100%; overflow-x: hidden; }

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

a {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color var(--motion-fast) var(--ease);
}
a:hover { color: var(--terracotta); }

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    margin: 0 0 .6em;
}

h1 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4.5vw, var(--text-h1));
    font-weight: var(--weight-bold);
    line-height: var(--lh-h1);
    letter-spacing: var(--tracking-h1);
}
h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, var(--text-h2));
    font-weight: var(--weight-bold);
    line-height: var(--lh-h2);
    letter-spacing: var(--tracking-h2);
}
h3 {
    font-family: var(--font-body);
    font-size: clamp(1.2rem, 2vw, var(--text-h3));
    font-weight: var(--weight-bold);
    line-height: var(--lh-h3);
    letter-spacing: var(--tracking-h3);
}
h4 {
    font-family: var(--font-body);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    line-height: var(--lh-h4);
    letter-spacing: var(--tracking-h4);
}
h5 {
    font-family: var(--font-body);
    font-size: var(--text-h5);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-h5);
}
h6 {
    font-family: var(--font-body);
    font-size: var(--text-h6);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-h6);
}

p { margin: 0 0 var(--space-4); }
small { font-size: var(--text-body-sm); color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-8) 0; }

code {
    font-family: var(--font-mono);
    font-size: .92em;
    background: var(--gray-50);
    padding: .12em .32em;
    border-radius: 4px;
    color: var(--ink-2);
}

ul, ol { padding-left: 1.25rem; margin: 0 0 var(--space-4); }
li { margin-bottom: .3em; }

blockquote {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--sage);
    background: var(--gray-50);
    color: var(--ink-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
th, td { padding: var(--space-3); border-bottom: 1px solid var(--line); text-align: left; }
th {
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    background: var(--gray-50);
    color: var(--ink-2);
    font-size: var(--text-body-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
}

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
}

@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;
    }
}


/* =====================================================================
   LAYOUT PRIMITIVES
   ===================================================================== */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--content-pad); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--content-pad); }
.container-wide { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--content-pad); }

.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section--dark { background: var(--navy); color: rgba(255,255,255,.92); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark a:not(.btn) { color: #D9C99B; }   /* don't recolor buttons; they own their own contrast */
.section--soft { background: var(--surface); }
.section--tinted { background: linear-gradient(180deg, var(--gray-50) 0%, var(--bg) 100%); }

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.text-center { text-align: center; }
.muted { color: var(--muted); }

.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-bold);
    color: var(--bronze-deep);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    line-height: var(--lh-eyebrow);
    margin-bottom: var(--space-2);
}
.eyebrow--on-dark { color: #D9C99B; }   /* lightened bronze for AA on navy */

.lead { font-size: var(--text-body-lg); color: var(--ink-2); line-height: var(--lh-body-lg); }


/* =====================================================================
   NAVIGATION
   ===================================================================== */
/* Sticky header with backdrop blur. position: relative on inner .nav so the
   dropdown panels can anchor to it. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 247, 242, .96);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
}
.nav {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: .6rem 0;
    gap: var(--space-4);
}

/* -- brand block (left column) -- */
.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--navy);
    flex: 0 0 auto;
}
.nav-brand img,
.nav-brand .nav-brand-mark {
    width: auto;
    height: 52px;
    max-width: 56px;
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
}
.nav-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.nav-brand-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: var(--weight-bold);
    color: var(--navy);
    letter-spacing: -.005em;
    white-space: nowrap;
}
.nav-brand-sub {
    font-family: var(--font-body);
    font-size: .66rem;
    color: var(--bronze-deep);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    margin-top: 2px;
    white-space: nowrap;
}

/* -- main links (middle column) -- */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-item { position: relative; }

/* a tag OR button styled as a link */
.nav-link,
.nav-link--toggle {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: .92rem;
    padding: .55rem .75rem;
    border-radius: var(--radius-sm);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    line-height: 1.1;
    white-space: nowrap;
    transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.nav-link:hover,
.nav-link--toggle:hover,
.nav-item.is-active > .nav-link,
.nav-item.is-active > .nav-link--toggle { background: var(--gray-50); color: var(--navy); }

.nav-chevron { font-size: .7rem; opacity: .65; transition: transform var(--motion-fast) var(--ease); }
.nav-link--toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); opacity: 1; }
.nav-link--toggle[aria-expanded="true"] { background: var(--gray-50); color: var(--navy); }

/* -- right-side cluster (search + CTA) -- */
.nav-search {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    margin-right: var(--space-2);
    border: 1px solid var(--cream-shade, #E5E0D7);
    border-radius: 999px;
    overflow: hidden;
    background: #FFF;
    transition: box-shadow .15s, border-color .15s;
}
.nav-search:focus-within {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(15, 42, 68, .15);
}
.nav-search input[type="search"] {
    border: 0;
    outline: 0;
    background: transparent;
    padding: .35rem .7rem;
    font-size: .88rem;
    font-family: inherit;
    color: var(--navy);
    width: 12rem;
    min-width: 0;
}
.nav-search input[type="search"]::placeholder { color: var(--bronze, #7A5A2B); opacity: .8; }
.nav-search button {
    border: 0;
    background: transparent;
    color: var(--bronze, #7A5A2B);
    padding: 0 .7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.nav-search button:hover { color: var(--terracotta, #B8552E); }
@media (max-width: 1024px) {
    .nav-search { display: none; }
}

.nav-cta { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.phone-link {
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    color: var(--navy);
    text-decoration: none;
    font-size: .92rem;
    white-space: nowrap;
    padding: .45rem .65rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-sm);
}
.phone-link:hover { color: var(--terracotta); background: var(--gray-50); }

/* -- mobile toggle (hidden on desktop) -- */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: .45rem .55rem;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    color: var(--ink);
    align-items: center;
    justify-content: center;
}
.nav-toggle i { font-size: var(--icon-md); }

/* =====================================================================
   DROPDOWN PANELS (desktop hover-open, mobile click-open)
   ===================================================================== */
.nav-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 280px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    display: none;
    opacity: 0;
    z-index: 60;
    transition: opacity var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.nav-dropdown a {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: .65rem .8rem;
    text-decoration: none;
    color: var(--ink);
    border-radius: var(--radius-sm);
    font-size: var(--text-body-sm);
    line-height: 1.3;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible,
.nav-dropdown a.is-active { background: var(--gray-50); color: var(--navy); }
.nav-dropdown a > i {
    color: var(--sage-deep);
    font-size: var(--icon-sm);
    margin-top: 2px;
    flex: 0 0 auto;
}
.nav-dropdown a > span { display: flex; flex-direction: column; gap: 1px; }
.nav-dropdown a > span strong {
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    color: var(--navy);
    font-size: .95rem;
}
.nav-dropdown a > span small {
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.3;
}

/* heading row inside the wide Service-area dropdown */
.nav-dropdown-heading { border-bottom: 1px solid var(--line); margin-bottom: var(--space-2); padding-bottom: var(--space-3) !important; }

/* 2-column city grid inside Service area dropdown */
.nav-dropdown--two-col { min-width: 460px; }
.nav-dropdown--two-col .nav-dropdown-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
.nav-dropdown--two-col .nav-dropdown-cols a {
    padding: .45rem .7rem;
    font-size: .85rem;
}

/* desktop: hover or focus-within opens dropdown */
@media (hover: hover) and (min-width: 1025px) {
    .nav-item--dropdown:hover > .nav-dropdown,
    .nav-item--dropdown:focus-within > .nav-dropdown,
    .nav-item--dropdown .nav-link--toggle[aria-expanded="true"] + .nav-dropdown {
        display: block;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    .nav-item--dropdown:hover > .nav-link--toggle .nav-chevron { transform: rotate(180deg); }
}

/* desktop: click-to-open (also used as the mobile-accordion trigger via JS) */
.nav-item--dropdown .nav-link--toggle[aria-expanded="true"] + .nav-dropdown {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* hide the brand sub-label between 881px and 1100px so the row doesn't cramp */
@media (max-width: 1100px) and (min-width: 1025px) {
    .nav-brand-sub { display: none; }
    .nav-link, .nav-link--toggle { padding: .55rem .55rem; font-size: .88rem; }
    .phone-link { font-size: .85rem; padding: .45rem .5rem; }
}

/* =====================================================================
   MOBILE / TABLET NAV (<=1024px): collapse into hamburger, vertical menu,
   accordion dropdowns. The .nav grid switches to flex so brand + hamburger
   sit on one row and the menu slides down full-width.
   ===================================================================== */
@media (max-width: 1024px) {
    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
    }
    .nav-brand-sub { display: none; }
    .nav-cta { order: 2; }
    .nav-cta .phone-link { display: none; }
    .nav-toggle { display: inline-flex; order: 3; }

    .nav-links {
        order: 99;
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--cream);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        padding: var(--space-3) var(--content-pad);
        box-shadow: var(--shadow);
        gap: 2px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        z-index: 55;
    }
    .nav.is-open .nav-links { display: flex; }

    .nav-item { width: 100%; }
    .nav-link, .nav-link--toggle {
        width: 100%;
        justify-content: space-between;
        padding: .9rem .8rem;
        font-size: 1rem;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        min-height: 52px;
    }
    .nav-item:last-child .nav-link,
    .nav-item:last-child .nav-link--toggle { border-bottom: none; }

    /* on mobile the dropdown is a static accordion panel, not a floating menu */
    .nav-dropdown {
        position: static;
        transform: none;
        opacity: 1;
        min-width: 0;
        box-shadow: none;
        border: none;
        background: var(--gray-50);
        border-radius: var(--radius-sm);
        margin: 0 0 .5rem;
        padding: var(--space-2);
        display: none;
    }
    .nav-item--dropdown .nav-link--toggle[aria-expanded="true"] + .nav-dropdown { display: block; }
    .nav-dropdown a { padding: .7rem .6rem; min-height: 44px; }
    .nav-dropdown--two-col { min-width: 0; }
    .nav-dropdown--two-col .nav-dropdown-cols { grid-template-columns: 1fr; }
}

/* small phones: hide the top-bar CTA (sticky bottom call bar handles conversion) */
@media (max-width: 560px) {
    .nav-cta .btn--sm { display: none; }
}
@media (max-width: 420px) {
    .nav-brand-name { font-size: .95rem; }
}


/* =====================================================================
   BUTTONS  (components.md verbatim)
   ===================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: .8rem 1.3rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: var(--text-body);
    line-height: 1.1;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease),
                color var(--motion-fast) var(--ease),
                transform var(--motion-fast) var(--ease),
                box-shadow var(--motion-fast) var(--ease);
    min-height: 44px;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn--disabled { opacity: .6; pointer-events: none; }

.btn--primary { background: var(--terracotta); color: var(--white); box-shadow: 0 6px 18px rgba(184, 85, 46, .35); }
.btn--primary:hover { background: var(--terracotta-hover); color: var(--white); }

.btn--secondary { background: var(--navy); color: var(--white); }
.btn--secondary:hover { background: #163e63; color: var(--white); }

.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--white); }

.btn--ghost { background: transparent; color: var(--sage-deep); }
.btn--ghost:hover { background: var(--gray-50); }

.btn--on-dark { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .4); }
.btn--on-dark:hover { background: rgba(255, 255, 255, .1); }

.btn--sm { padding: .5rem .85rem; font-size: var(--text-body-sm); min-height: 36px; }
.btn--lg { padding: 1rem 1.6rem; font-size: var(--text-body-lg); }

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }


/* =====================================================================
   HERO
   ===================================================================== */
.hero {
    background: linear-gradient(135deg, var(--navy) 0%, #1c4687 75%);
    color: rgba(255, 255, 255, .92);
    position: relative;
    overflow: hidden;
    min-height: clamp(520px, 70vh, 720px);
}
.hero::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(122, 139, 110, .25), transparent 70%);
}
.hero::after {
    content: "";
    position: absolute;
    left: -160px;
    bottom: -240px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 126, 61, .10), transparent 70%);
}
.hero-inner {
    position: relative;
    padding: clamp(3rem, 7vw, 5.5rem) 0;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
.hero h1 { color: var(--white); margin-bottom: var(--space-4); max-width: 18ch; }
.hero .lead { color: rgba(255, 255, 255, .85); max-width: 56ch; font-size: var(--text-body-lg); }
.hero .button-row { margin-top: var(--space-6); }
.hero-aside {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    backdrop-filter: blur(8px);
}
.hero-aside h3 { color: var(--white); margin-bottom: var(--space-3); font-size: var(--text-h5); }
.hero-aside ul { margin: 0; padding-left: 1rem; }
.hero-aside li { color: rgba(255, 255, 255, .9); }
@media (max-width: 760px) {
    .hero-inner { grid-template-columns: 1fr; padding: clamp(2.5rem, 8vw, 4rem) 0; }
}


/* =====================================================================
   CARDS
   ===================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-6);
    box-shadow: var(--shadow);
}
.card--featured { border-top: 4px solid var(--bronze); }
.card--dark { background: var(--navy); color: rgba(255,255,255,.92); border-color: transparent; }
.card--dark h3, .card--dark h2 { color: var(--white); }
.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: #E5EBE0;          /* sage @ ~18% */
    color: var(--sage-deep);
    display: grid;
    place-items: center;
    margin-bottom: var(--space-4);
    font-size: var(--icon-md);
}
.card-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-caption);
    color: var(--muted);
    margin-bottom: var(--space-2);
}


/* =====================================================================
   PILLS / BADGES
   ===================================================================== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: .25rem .65rem;
    border-radius: var(--radius-full);
    font-weight: var(--weight-bold);
    font-size: var(--text-caption);
    line-height: 1.5;
    background: #E5EBE0;      /* sage @ ~18% default */
    color: var(--sage-deep);
}
.pill--success { background: rgba(47, 143, 92, .14); color: var(--success-deep); }
.pill--warning { background: rgba(201, 138, 6, .14); color: var(--warning-deep); }
.pill--error { background: rgba(192, 57, 43, .14); color: var(--error); }
.pill--info { background: rgba(43, 111, 184, .12); color: var(--info); }
.pill--bronze { background: rgba(168, 126, 61, .14); color: var(--bronze-deep); }
.pill .dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }


/* =====================================================================
   ALERTS
   ===================================================================== */
.alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius);
    border-left: 4px solid;
    align-items: flex-start;
    font-size: var(--text-body-sm);
}
.alert i { font-size: var(--icon-md); flex: 0 0 auto; line-height: 1; }
.alert strong { display: block; margin-bottom: 2px; }
.alert--info    { background: rgba(43, 111, 184, .12); border-color: var(--info);    color: var(--info); }
.alert--success { background: rgba(47, 143, 92, .12);  border-color: var(--success); color: var(--success-deep); }
.alert--warning { background: rgba(201, 138, 6, .14);  border-color: var(--warning); color: var(--warning-deep); }
.alert--error   { background: rgba(192, 57, 43, .12);  border-color: var(--error);   color: var(--error); }


/* =====================================================================
   TRUST STRIP
   ===================================================================== */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--space-4);
    padding: var(--space-5) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.trust-item { display: flex; align-items: center; gap: var(--space-3); }
.trust-item-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: #E5EBE0;
    color: var(--sage-deep);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: var(--icon);
}
.trust-item-text {
    font-weight: var(--weight-semibold);
    font-size: var(--text-body-sm);
    color: var(--ink-2);
}


/* =====================================================================
   PROCESS STEPS (numbered)
   ===================================================================== */
.steps {
    counter-reset: step;
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    padding: 0;
    list-style: none;
}
.step {
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    position: relative;
}
.step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: -18px;
    left: var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    background: var(--terracotta);
    color: var(--white);
    width: 44px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(184, 85, 46, .35);
}
.step h3 { margin-top: .8rem; font-size: var(--text-h5); }
.step p { margin: 0; color: var(--ink-2); }


/* =====================================================================
   QUOTE CARD
   ===================================================================== */
.quote-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow);
    margin: 0;
}
.quote-card .quote-text {
    font-size: var(--text-body-lg);
    color: var(--ink-2);
    margin: 0 0 var(--space-3);
    font-style: italic;
}
.quote-card .quote-cite {
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    color: var(--navy);
    font-size: var(--text-body-sm);
}
.quote-card .quote-cite small {
    font-weight: var(--weight-regular);
    color: var(--muted);
    display: block;
}
.stars {
    color: #f5a623;
    letter-spacing: 2px;
    font-size: var(--text-body);
    margin-bottom: var(--space-2);
}


/* =====================================================================
   FORMS
   ===================================================================== */
.form-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
.form-grid > .form-full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field label {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-body-sm);
    color: var(--ink);
}

/* Scoped to text-style inputs only - excluding checkbox/radio so they keep
   their native sizing. Without these :not() guards, a checkbox inside a
   .form-field gets width:100% + min-height:44px + 1.5px border, which
   blows out any inline-checkbox layout like the SMS consent block. */
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field textarea,
.form-field select {
    width: 100%;
    padding: .75rem .85rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--ink);
    background: var(--white);
    min-height: 44px;
    transition: border-color var(--motion-fast) var(--ease),
                box-shadow var(--motion-fast) var(--ease);
}
.form-field input:not([type="checkbox"]):not([type="radio"]):focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: var(--terracotta);
    box-shadow: 0 0 0 3px rgba(184, 85, 46, .18);
    outline: none;
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field .hint { font-size: var(--text-caption); color: var(--muted); }
.form-field .err { font-size: var(--text-body-sm); color: var(--error); }
.required-mark { color: var(--terracotta); }

/* honeypot - invisible to humans + assistive tech */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field-validation-error { color: var(--error); font-size: var(--text-body-sm); }
.validation-summary-errors {
    color: var(--error);
    background: rgba(192, 57, 43, .12);
    border: 1px solid rgba(192, 57, 43, .35);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
}
.validation-summary-errors ul { margin: 0; }


/* =====================================================================
   BLOG
   ===================================================================== */
.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: var(--muted);
    font-size: var(--text-body-sm);
    align-items: center;
}
.post-card h3 { font-size: var(--text-h5); margin-bottom: var(--space-1); }
.post-card p { color: var(--ink-2); margin: 0; font-size: var(--text-body-sm); }
.post-body { font-size: var(--text-body-lg); line-height: 1.75; color: var(--ink); }
.post-body h2 { margin-top: var(--space-8); }
.post-body h3 { margin-top: var(--space-6); }
.post-body img { border-radius: var(--radius); margin: var(--space-4) 0; }


/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
    background: var(--navy);
    color: rgba(250, 247, 242, .85);
    padding: var(--space-12) 0 var(--space-6);
    margin-top: var(--space-16);
}
.site-footer h2 {
    color: var(--white);
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-3);
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.footer-grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer a:not(.btn) {
    color: rgba(250, 247, 242, .85);
    text-decoration: none;
    display: block;
    padding: var(--space-1) 0;
    font-size: var(--text-body-sm);
}
.site-footer a:not(.btn):hover { color: #B5C5A8; }

.footer-brand img { width: 54px; height: 64px; margin-bottom: var(--space-3); }
.footer-brand p { color: rgba(250, 247, 242, .75); font-size: var(--text-body-sm); }
.footer-brand p strong { color: var(--white); }

.footer-cta-block {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    padding: var(--space-5);
}
.footer-cta-block p { color: rgba(250, 247, 242, .85); font-size: var(--text-body-sm); }

.footer-bottom {
    border-top: 1px solid rgba(250, 247, 242, .12);
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-caption);
    color: rgba(250, 247, 242, .6);
}
.footer-bottom a { display: inline-block; padding: 0 var(--space-2); color: rgba(250, 247, 242, .7); }


/* =====================================================================
   CONSENT BANNER
   ===================================================================== */
.consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--navy);
    color: var(--white);
    padding: var(--space-3) var(--content-pad);
    display: none;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
    z-index: 90;
    box-shadow: 0 -8px 24px rgba(15, 42, 68, .25);
    flex-wrap: wrap;
}
.consent-banner.is-open { display: flex; }
.consent-banner p {
    margin: 0;
    font-size: var(--text-body-sm);
    color: rgba(255, 255, 255, .9);
    flex: 1 1 320px;
}
.consent-banner a:not(.btn) { color: #D9C99B; }
.consent-banner .button-row { flex: 0 0 auto; }


/* =====================================================================
   SKIP LINK
   ===================================================================== */
.skip-link {
    position: absolute;
    left: 0;
    top: 0;
    padding: var(--space-2) var(--space-4);
    background: var(--navy);
    color: var(--white);
    transform: translateY(-100%);
    transition: transform var(--motion-fast) var(--ease);
    z-index: 100;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) 0;
    font-weight: var(--weight-bold);
}
.skip-link:focus { transform: translateY(0); color: var(--white); }


/* =====================================================================
   CITY LIST
   ===================================================================== */
.city-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    padding: 0;
    list-style: none;
}
.city-grid li {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-weight: var(--weight-semibold);
    font-size: var(--text-body-sm);
    color: var(--navy);
    margin: 0;
}


/* =====================================================================
   UTILITY
   ===================================================================== */
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.hide-md-down { display: initial; }
@media (max-width: 760px) { .hide-md-down { display: none; } }
.show-md-down { display: none; }
@media (max-width: 760px) { .show-md-down { display: initial; } }


/* =====================================================================
   STICKY MOBILE CALL BAR (≤760px)
   ===================================================================== */
.sticky-call { display: none; }
@media (max-width: 760px) {
    .sticky-call {
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 80;
        background: var(--white);
        border-top: 1px solid var(--line-strong);
        box-shadow: 0 -6px 18px rgba(15, 42, 68, .12);
    }
    .sticky-call a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: .85rem .5rem;
        text-decoration: none;
        min-height: 56px;
        font-family: var(--font-body);
        font-weight: var(--weight-bold);
        font-size: var(--text-body-sm);
        line-height: 1.1;
    }
    .sticky-call--three { grid-template-columns: 1fr 1fr 1fr; }
    .sticky-call .sticky-call-msg,
    .sticky-call .sticky-call-id,
    .sticky-call .sticky-call-emergency,
    .sticky-call .sticky-call-photo { color: var(--navy); border-right: 1px solid var(--line); }
    .sticky-call .sticky-call-msg span,
    .sticky-call .sticky-call-id span,
    .sticky-call .sticky-call-emergency span,
    .sticky-call .sticky-call-photo span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
    .sticky-call .sticky-call-msg strong,
    .sticky-call .sticky-call-id strong,
    .sticky-call .sticky-call-emergency strong,
    .sticky-call .sticky-call-photo strong { font-size: .82rem; font-weight: var(--weight-bold); color: var(--navy); }
    .sticky-call .sticky-call-msg small,
    .sticky-call .sticky-call-id small,
    .sticky-call .sticky-call-emergency small,
    .sticky-call .sticky-call-photo small { font-size: .64rem; color: var(--muted); font-weight: var(--weight-semibold); }
    .sticky-call .sticky-call-emergency { background: #FFF5EE; }
    .sticky-call .sticky-call-emergency i { color: #B43A1F; font-size: 1.1rem; }
    .sticky-call .sticky-call-emergency strong { color: #B43A1F; }
    .sticky-call .sticky-call-photo { background: var(--cream); }
    .sticky-call .sticky-call-photo i { color: var(--terracotta); font-size: 1.1rem; }
    .sticky-call .sticky-call-cta { background: var(--terracotta); color: var(--white); }
    .sticky-call .sticky-call-cta:hover { background: var(--terracotta-hover); }

    /* push body content up so sticky bar doesn't cover the footer */
    .site-footer { padding-bottom: calc(var(--space-6) + 64px); }
}


/* =====================================================================
   NEWSLETTER SIGNUP
   ===================================================================== */
.newsletter-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 4px solid var(--bronze);
    border-radius: var(--radius);
    padding: var(--space-6);
    box-shadow: var(--shadow);
}
.newsletter-eyebrow { display: flex; align-items: center; gap: var(--space-2); color: var(--bronze-deep); margin-bottom: var(--space-2); }
.newsletter-eyebrow i { font-size: var(--icon); }
.newsletter-card h3 { margin: 0 0 .5em; font-size: var(--text-h4); }
.newsletter-card p { color: var(--ink-2); margin-bottom: var(--space-4); }

.newsletter-form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.newsletter-form input[type="email"] {
    flex: 1 1 200px;
    padding: .75rem .85rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--ink);
    background: var(--white);
    min-height: 44px;
}
.newsletter-form input[type="email"]:focus {
    border-color: var(--terracotta);
    box-shadow: 0 0 0 3px rgba(184, 85, 46, .18);
    outline: none;
}

.newsletter-footer {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    padding: var(--space-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-6);
}
@media (max-width: 760px) { .newsletter-footer { grid-template-columns: 1fr; } }
.newsletter-form--footer input[type="email"] { background: rgba(255,255,255,.95); }


/* =====================================================================
   POLISHED STATUS / 404
   ===================================================================== */
.status-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(2rem, 4vw, 3rem);
    box-shadow: var(--shadow);
    max-width: 760px;
    width: 100%;
}
.status-card .eyebrow { margin-bottom: var(--space-2); display: inline-block; }
.status-card h1 { margin: 0 0 .5em; }
.status-card p { color: var(--ink-2); margin-bottom: var(--space-4); }
.status-suggest {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}
@media (max-width: 600px) { .status-suggest { grid-template-columns: 1fr; } }


/* =====================================================================
   A11Y UTILITY - visually hidden but available to screen readers
   ===================================================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =====================================================================
   PAGE BYLINE (E-E-A-T signals: author + last-updated visible)
   ===================================================================== */
.page-byline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--text-body-sm);
    color: var(--muted);
    margin: 0 0 var(--space-4);
}
.page-byline-author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    color: var(--navy);
}
.page-byline-author i { color: var(--sage-deep); }
.page-byline time { color: var(--muted); }


/* =====================================================================
   DESIGN-POLISH PASS - hero depth, card refinement, button + form
   microinteractions, trust strip upgrade, scroll-reveal, section
   transitions. Everything here respects prefers-reduced-motion.
   ===================================================================== */

/* ---- Hero: dotted-grid texture + radial glows for visual depth ---- */
.hero {
    background:
        radial-gradient(circle at 18% 110%, rgba(184, 85, 46, .12), transparent 55%),
        radial-gradient(circle at 85% -10%, rgba(122, 139, 110, .15), transparent 50%),
        linear-gradient(135deg, var(--navy) 0%, #1c4687 75%);
}
.hero::before {
    /* subtle dotted-grid pattern, faded out toward edges */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .045) 1.2px, transparent 1.6px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at 50% 40%, black 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 35%, transparent 80%);
    pointer-events: none;
    /* override the bigger circle decoration from base hero rules */
    right: 0; top: 0; width: 100%; height: 100%;
    border-radius: 0;
    background-color: transparent;
}
.hero::after {
    /* large faint verified-circle watermark in the lower-right */
    content: "";
    position: absolute;
    right: -180px;
    bottom: -180px;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .04);
    background:
        radial-gradient(circle at 35% 30%, rgba(78, 209, 196, .08), transparent 60%);
    pointer-events: none;
}
.hero-aside {
    /* slight glass-card emphasis */
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}


/* ---- Card refinement: gradient hover, smoother lift, better elevation ---- */
.card {
    transition: transform var(--motion-base) var(--ease),
                box-shadow var(--motion-base) var(--ease),
                border-color var(--motion-base) var(--ease);
}
.card-link { transition: inherit; }
.card-link:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--line-strong);
}
.card-link:hover .card-icon {
    transform: scale(1.06) rotate(-3deg);
    box-shadow: 0 8px 20px rgba(122, 139, 110, .25);
}

.card-icon {
    transition: transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease);
    background: linear-gradient(135deg, #E5EBE0 0%, #D4DCC9 100%);
    border: 1px solid rgba(122, 139, 110, .18);
    box-shadow: 0 2px 6px rgba(122, 139, 110, .12);
}

/* on dark cards: lighter icon tile to maintain contrast */
.card--dark .card-icon {
    background: linear-gradient(135deg, rgba(122, 139, 110, .25) 0%, rgba(78, 209, 196, .18) 100%);
    border-color: rgba(255, 255, 255, .15);
    color: #E5EBE0;
}


/* ---- Button refinement: lift on hover, smoother shadow transition ---- */
.btn {
    position: relative;
    transition: background var(--motion-fast) var(--ease),
                color var(--motion-fast) var(--ease),
                transform var(--motion-fast) var(--ease),
                box-shadow var(--motion-base) var(--ease),
                border-color var(--motion-fast) var(--ease);
}
.btn--primary {
    box-shadow: 0 4px 14px rgba(184, 85, 46, .32),
                inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(184, 85, 46, .42),
                inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn--primary:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(184, 85, 46, .28),
                inset 0 1px 0 rgba(255, 255, 255, .08);
}
.btn--secondary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(15, 42, 68, .25); }
.btn--outline:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 42, 68, .18); }


/* ---- Form polish: deeper focus glow, smoother transitions ---- */
.form-field input,
.form-field textarea,
.form-field select {
    transition: border-color var(--motion-fast) var(--ease),
                box-shadow var(--motion-base) var(--ease),
                background var(--motion-fast) var(--ease);
}
.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover { border-color: var(--gray-300); }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    box-shadow: 0 0 0 4px rgba(184, 85, 46, .15);
    background: #fffbf9;
}


/* ---- Section transitions: subtle gradient fade between alternating sections ---- */
.section + .section--tinted,
.section--tinted + .section,
.section--soft + .section--tinted { position: relative; }
.section--dark { position: relative; }
.section--dark::before {
    /* soft top-edge gradient to ease into the dark section */
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--navy));
    opacity: .35;
    pointer-events: none;
}


/* ---- Trust strip upgrade: numerical stats with gradient borders ---- */
.trust-strip {
    background: linear-gradient(180deg, var(--surface) 0%, var(--gray-50) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-5) var(--space-5);
    box-shadow: var(--shadow-sm);
}
.trust-item {
    transition: transform var(--motion-fast) var(--ease);
}
.trust-item:hover { transform: translateY(-1px); }
.trust-item-icon {
    background: linear-gradient(135deg, #E5EBE0 0%, #D4DCC9 100%);
    border: 1px solid rgba(122, 139, 110, .25);
    box-shadow: 0 2px 6px rgba(122, 139, 110, .15), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* numerical stat tile (used inside trust strip or section) */
.stat-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 4px solid var(--sage);
    border-radius: var(--radius);
    padding: var(--space-5) var(--space-4);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease);
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-tile .stat-value {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--navy);
    line-height: 1;
    letter-spacing: -.02em;
}
.stat-tile .stat-suffix { font-size: .6em; color: var(--bronze-deep); }
.stat-tile .stat-label {
    margin-top: var(--space-2);
    font-size: var(--text-body-sm);
    color: var(--ink-2);
    line-height: 1.35;
}
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--space-4);
}


/* ---- Scroll-reveal: subtle fade-up on intersection ----
   Guarded by .js-reveal-ready on <html> so content is visible by default
   if JS fails / disabled / no IntersectionObserver / reduced-motion. */
.js-reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    will-change: opacity, transform;
}
.js-reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
.js-reveal-ready [data-reveal-delay="1"] { transition-delay: .08s; }
.js-reveal-ready [data-reveal-delay="2"] { transition-delay: .16s; }
.js-reveal-ready [data-reveal-delay="3"] { transition-delay: .24s; }
.js-reveal-ready [data-reveal-delay="4"] { transition-delay: .32s; }


/* ---- Eyebrow with hairline rule (used as section opener) ---- */
.eyebrow-rule {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-bold);
    color: var(--bronze-deep);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    margin-bottom: var(--space-3);
}
.eyebrow-rule::before {
    content: "";
    width: 24px;
    height: 2px;
    background: var(--bronze);
    border-radius: 2px;
}
.eyebrow-rule--on-dark { color: #D9C99B; }
.eyebrow-rule--on-dark::before { background: #D9C99B; }
.eyebrow-rule--center {
    justify-content: center;
}
.eyebrow-rule--center::after {
    content: "";
    width: 24px;
    height: 2px;
    background: var(--bronze);
    border-radius: 2px;
}
.eyebrow-rule--center.eyebrow-rule--on-dark::after { background: #D9C99B; }


/* ---- Section header pattern - consistent top of each section ---- */
.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-10);
}
.section-head h2 { margin-bottom: var(--space-3); }
.section-head p { color: var(--ink-2); font-size: var(--text-body-lg); margin: 0; }


/* ---- Hero CTA cluster polish: subtle backdrop behind buttons ---- */
.hero .button-row { gap: var(--space-3); }


/* ---- Nav: subtle bottom gradient hairline ----
   Position is declared as `sticky` in _Layout.cshtml inline critical CSS so
   the nav stays pinned during scroll. We deliberately do NOT re-declare it
   here - this previously set `position: relative` which silently overrode the
   sticky rule (since brand.css loads after the inline <style>), causing the
   nav to scroll off-screen on reload + scroll-restoration. `position: sticky`
   itself establishes a positioning context, so the absolutely-positioned
   ::after gradient line still anchors correctly without needing relative. */
.site-header { border-bottom: 1px solid var(--line); }
.site-header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--bronze), transparent);
    opacity: .35;
    pointer-events: none;
}


/* =====================================================================
   SCHEDULING FORM - multi-step legend pattern + chip selectors
   ===================================================================== */
.form-step {
    border: 0;
    padding: 0;
    margin: 0;
}
.form-step + .form-step {
    border-top: 1px solid var(--line);
    padding-top: var(--space-6);
    margin-top: var(--space-2);
}
.form-step-legend {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    color: var(--ink);
    margin-bottom: var(--space-3);
    padding: 0;
}
.form-step-num {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--terracotta);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(184, 85, 46, .3);
}

/* Chip selector - shared by single/multi/card variants */
.chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: var(--space-2);
}
.chip-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .chip-grid--two { grid-template-columns: 1fr; } }
.chip-grid--small { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }

.chip {
    position: relative;
    display: block;
    cursor: pointer;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .65rem .8rem;
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-body-sm);
    color: var(--ink);
    min-height: 44px;
    transition: background var(--motion-fast) var(--ease),
                border-color var(--motion-fast) var(--ease),
                color var(--motion-fast) var(--ease),
                box-shadow var(--motion-fast) var(--ease),
                transform var(--motion-fast) var(--ease);
}
.chip:hover .chip-inner { border-color: var(--gray-300); }
.chip input:checked ~ .chip-inner,
.chip input:checked + .chip-inner {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
    box-shadow: 0 6px 14px rgba(15, 42, 68, .22);
}
.chip input:focus-visible ~ .chip-inner,
.chip input:focus-visible + .chip-inner {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* card-style chip with icon + title + sub */
.chip--card .chip-card-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    text-align: left;
    min-height: 88px;
    transition: background var(--motion-fast) var(--ease),
                border-color var(--motion-fast) var(--ease),
                box-shadow var(--motion-fast) var(--ease),
                transform var(--motion-fast) var(--ease);
}
.chip--card .chip-card-inner i {
    font-size: var(--icon-md);
    color: var(--sage-deep);
    margin-top: 2px;
    transition: color var(--motion-fast) var(--ease);
}
.chip--card .chip-card-inner span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chip--card .chip-card-inner strong {
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: var(--text-body);
    color: var(--navy);
}
.chip--card .chip-card-inner small {
    font-size: .78rem;
    color: var(--muted);
}
.chip--card:hover .chip-card-inner {
    border-color: var(--navy);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.chip--card input:checked ~ .chip-card-inner,
.chip--card input:checked + .chip-card-inner {
    background: var(--navy);
    border-color: var(--navy);
    box-shadow: 0 8px 20px rgba(15, 42, 68, .25);
}
.chip--card input:checked ~ .chip-card-inner strong,
.chip--card input:checked + .chip-card-inner strong { color: var(--white); }
.chip--card input:checked ~ .chip-card-inner small,
.chip--card input:checked + .chip-card-inner small { color: rgba(255, 255, 255, .8); }
.chip--card input:checked ~ .chip-card-inner i,
.chip--card input:checked + .chip-card-inner i { color: #D9C99B; }


/* =====================================================================
   "HOW WE WORK" digital-first expectation panel - used on home + contact
   ===================================================================== */
.how-we-work {
    background: linear-gradient(180deg, var(--surface) 0%, var(--gray-50) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2rem);
    box-shadow: var(--shadow-sm);
}
.how-we-work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-5);
    margin-top: var(--space-5);
}
.how-we-work-item {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.how-we-work-item i {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #E5EBE0 0%, #D4DCC9 100%);
    color: var(--sage-deep);
    display: grid;
    place-items: center;
    font-size: var(--icon-md);
    border: 1px solid rgba(122, 139, 110, .2);
}
.how-we-work-item strong {
    display: block;
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    color: var(--navy);
    margin-bottom: 2px;
}
.how-we-work-item p {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-body-sm);
    line-height: 1.5;
}

/* ============================================================
   /help triage hub - decision tree UI
   ============================================================ */

.triage-step[data-active="0"] { display: none; }

.triage-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-5);
}
@media (max-width: 720px) { .triage-cards { grid-template-columns: 1fr; } }

.triage-card {
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    cursor: pointer;
    transition: all var(--motion-fast) var(--ease);
    text-align: left;
    font-family: inherit;
    min-height: 132px;
}
.triage-card i {
    font-size: 1.75rem;
    color: var(--terracotta);
    margin-bottom: .25rem;
}
.triage-card-title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    color: var(--navy);
    font-size: 1.1rem;
    line-height: 1.25;
}
.triage-card-sub {
    color: var(--ink-2);
    font-size: var(--text-body-sm);
}
.triage-card:hover {
    border-color: var(--terracotta);
    background: var(--cream);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.triage-card:focus-visible {
    outline: 3px solid var(--terracotta);
    outline-offset: 2px;
}

.triage-progress {
    font-size: var(--text-body-sm);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .25rem;
}

.triage-choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.triage-choice {
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    text-align: left;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    cursor: pointer;
    transition: all var(--motion-fast) var(--ease);
    min-height: 56px;
}
.triage-choice:hover {
    border-color: var(--terracotta);
    background: var(--cream);
}
.triage-choice:focus-visible {
    outline: 3px solid var(--terracotta);
    outline-offset: 2px;
}

.triage-nav {
    margin-top: var(--space-4);
    display: flex;
    justify-content: flex-start;
}
.triage-back {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: var(--text-body-sm);
    padding: .5rem 0;
    font-family: inherit;
}
.triage-back:hover { color: var(--terracotta); }

/* Terminal panel - one of 3 tones (good / primary / emergency) */
.triage-terminal {
    text-align: center;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
    border: 2px solid var(--line);
}
.triage-terminal-icon i {
    font-size: 3rem;
    color: var(--terracotta);
}
.triage-terminal--good .triage-terminal-icon i { color: var(--moss); }
.triage-terminal--emergency { border-color: var(--terracotta); background: linear-gradient(180deg, #FFF5EE 0%, var(--white) 60%); }
.triage-terminal--emergency .triage-terminal-icon i { color: #B43A1F; }

.triage-summary {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-top: var(--space-5);
    font-size: var(--text-body-sm);
    color: var(--ink-2);
    text-align: left;
    line-height: 1.7;
}

/* Emergency rail (the small box under the 4-branch picker) */
.emergency-rail {
    border-left: 4px solid var(--terracotta);
    background: #FFF5EE;
    padding: var(--space-4) var(--space-5);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.emergency-rail strong {
    color: #B43A1F;
    display: block;
    margin-bottom: .25rem;
}
.emergency-rail p {
    margin: 0 0 var(--space-3);
    color: var(--ink-2);
    font-size: var(--text-body-sm);
}

.btn--emergency {
    background: #B43A1F;
    color: var(--white);
    border: 2px solid #B43A1F;
}
.btn--emergency:hover {
    background: #963015;
    border-color: #963015;
    color: var(--white);
}

/* ============================================================
   /emergency interstitial - gated phone reveal
   ============================================================ */
.emergency-page {
    max-width: 640px;
    margin: 3rem auto;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 2px solid #FFD9CC;
    padding: var(--space-7);
}
.emergency-page h1 {
    color: #B43A1F;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.emergency-page h1 i { font-size: 1.5em; }
.emergency-criteria {
    background: #FFF5EE;
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0;
}
.emergency-criteria ul { margin: 0; padding-left: 1.2rem; line-height: 1.8; }
.emergency-criteria-radio {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: var(--space-3) 0;
    cursor: pointer;
    line-height: 1.5;
}
.emergency-criteria-radio input { margin-top: .25rem; }
.emergency-reveal {
    text-align: center;
    background: var(--navy);
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-5);
}
.emergency-reveal a.phone-number {
    color: var(--white);
    font-size: 2.25rem;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    letter-spacing: .02em;
    text-decoration: none;
    display: inline-block;
    margin: var(--space-3) 0;
}
.emergency-reveal a.phone-number:hover { color: #FFD9CC; }
.emergency-not-urgent {
    text-align: center;
    margin-top: var(--space-5);
    font-size: var(--text-body-sm);
    color: var(--muted);
}
.emergency-not-urgent a { color: var(--terracotta); font-weight: var(--weight-bold); }

/* ============================================================
   Home hero - above-the-fold triage cards
   ============================================================ */
.hero-triage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    max-width: 880px;
    margin: var(--space-6) auto 0;
}
@media (max-width: 720px) { .hero-triage { grid-template-columns: 1fr; gap: var(--space-3); } }

.hero-triage-card {
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    text-decoration: none;
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    text-align: left;
    transition: all var(--motion-fast) var(--ease);
    min-height: 108px;
}
.hero-triage-card:hover {
    background: var(--white);
    border-color: var(--terracotta);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.hero-triage-card:hover .hero-triage-title,
.hero-triage-card:hover .hero-triage-sub,
.hero-triage-card:hover i { color: var(--navy); }
.hero-triage-card:hover .hero-triage-sub { color: var(--ink-2); }
.hero-triage-card:focus-visible {
    outline: 3px solid var(--terracotta);
    outline-offset: 2px;
}
.hero-triage-card i {
    font-size: 1.5rem;
    color: #FFD9CC;
    margin-bottom: .15rem;
}
.hero-triage-title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--white);
}
.hero-triage-sub {
    color: rgba(255, 255, 255, .82);
    font-size: var(--text-body-sm);
    line-height: 1.3;
}

.hero-fallback-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
    font-size: .92rem;
    /* Reserve vertical space so the row doesn't shift when Inter swaps in
       from the async font load (was a small but reported CLS hit). 2.5rem
       covers the link text + padding at standard line-height for both
       Inter and the system-font fallback. */
    min-height: 2.5rem;
}
.hero-fallback-link {
    color: var(--white);
    text-decoration: none;
    font-weight: var(--weight-bold);
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    transition: background var(--motion-fast) var(--ease);
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}
.hero-fallback-link:hover {
    background: rgba(255, 255, 255, .12);
    color: var(--white);
}
.hero-fallback-link--emergency { color: #FFD9CC; }
.hero-fallback-link--emergency:hover { background: rgba(255, 217, 204, .15); color: #FFD9CC; }
.hero-fallback-sep {
    color: rgba(255, 255, 255, .35);
    font-weight: var(--weight-bold);
}
@media (max-width: 540px) {
    .hero-fallback-sep { display: none; }
    .hero-fallback-row { flex-direction: column; gap: .5rem; }
}

/* ============================================================
   Home pricing teaser (_HomePricingTeaser)
   ============================================================ */
.pricing-teaser-grid {
    max-width: 1000px;
    margin: 0 auto var(--space-6);
}
.pricing-tile {
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: center;
    transition: all var(--motion-fast) var(--ease);
}
.pricing-tile:hover {
    border-color: var(--terracotta);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.pricing-tile-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    border-radius: 50%;
}
.pricing-tile-icon i {
    font-size: 1.5rem;
    color: var(--terracotta);
}
.pricing-tile-label {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: var(--weight-bold);
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .35rem;
}
.pricing-tile-range {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: var(--weight-bold);
    color: var(--terracotta);
    line-height: 1;
    margin-bottom: var(--space-3);
}
.pricing-tile-sub {
    color: var(--ink-2);
    font-size: var(--text-body-sm);
    line-height: 1.4;
}
.pricing-teaser-foot {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.pricing-teaser-foot p {
    color: var(--ink-2);
    margin-bottom: var(--space-4);
}

/* ============================================================
   Chat widget (_ChatWidget) - floating bottom-right bubble
   ============================================================ */
.chat-widget {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    z-index: 90;
    font-family: var(--font-body);
}
@media (max-width: 760px) {
    .chat-widget { bottom: calc(64px + var(--space-3)); right: var(--space-3); }
}

.chat-launcher {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--terracotta);
    color: var(--white);
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--motion-fast) var(--ease);
    font-size: 1.6rem;
}
.chat-launcher:hover { background: var(--terracotta-hover); transform: scale(1.04); }
.chat-launcher:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.chat-launcher .chat-launcher-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--navy);
    color: var(--white);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: var(--weight-bold);
}

.chat-panel {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: min(380px, calc(100vw - 32px));
    height: 560px;
    max-height: calc(100vh - 120px);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
}
.chat-panel[data-open="1"] { display: flex; }

.chat-header {
    background: var(--navy);
    color: var(--white);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.chat-header-info { display: flex; align-items: center; gap: var(--space-3); }
.chat-header-avatar {
    width: 36px;
    height: 36px;
    background: var(--terracotta);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: var(--weight-bold);
    font-size: .85rem;
}
.chat-header-title { font-weight: var(--weight-bold); font-size: .95rem; line-height: 1.1; }
.chat-header-sub { font-size: .72rem; color: rgba(255, 255, 255, .75); }
.chat-close {
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 1.2rem;
    line-height: 1;
    min-height: 32px;
}
.chat-close:hover { color: #FFD9CC; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--gray-50);
}
.chat-msg { display: flex; gap: var(--space-2); max-width: 85%; }
.chat-msg-bubble {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    line-height: 1.4;
    font-size: .92rem;
}
.chat-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg--user .chat-msg-bubble {
    background: var(--terracotta);
    color: var(--white);
    border-bottom-right-radius: 4px;
}
.chat-msg--assistant .chat-msg-bubble {
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
}
.chat-msg--typing .chat-msg-bubble { font-style: italic; color: var(--muted); }

.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: var(--space-2);
}
.chat-suggestion {
    background: var(--white);
    color: var(--navy);
    border: 1.5px solid var(--terracotta);
    border-radius: 20px;
    padding: .5rem .85rem;
    font-size: .82rem;
    font-weight: var(--weight-bold);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--motion-fast) var(--ease);
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}
.chat-suggestion:hover { background: var(--terracotta); color: var(--white); }

.chat-input-form {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--white);
    border-top: 1px solid var(--line);
    flex-shrink: 0;
}
.chat-input {
    flex: 1;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: .92rem;
    min-height: 40px;
}
.chat-input:focus {
    outline: none;
    border-color: var(--terracotta);
}
.chat-send {
    background: var(--terracotta);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0 var(--space-4);
    cursor: pointer;
    font-weight: var(--weight-bold);
    min-height: 40px;
}
.chat-send:hover { background: var(--terracotta-hover); }
.chat-send:disabled { background: var(--muted); cursor: not-allowed; }

.chat-disclaimer {
    background: var(--cream);
    padding: var(--space-2) var(--space-4);
    font-size: .72rem;
    color: var(--muted);
    text-align: center;
    border-top: 1px solid var(--line);
}

/* ============================================================
   Tier cards (Good / Better / Best) - shared by home pricing teaser
   and /packages remediation tier breakdown.
   ============================================================ */
.tier-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-5);
    max-width: 1100px;
    margin: 0 auto var(--space-6);
    align-items: stretch;
}
@media (max-width: 920px) { .tier-grid { grid-template-columns: 1fr; gap: var(--space-4); } }

.tier-card {
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all var(--motion-fast) var(--ease);
}
.tier-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.tier-card--featured {
    border-color: var(--terracotta);
    border-width: 3px;
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}
.tier-card--featured:hover { transform: scale(1.02) translateY(-3px); }
@media (max-width: 920px) {
    .tier-card--featured { transform: none; }
    .tier-card--featured:hover { transform: translateY(-3px); }
}

.tier-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--terracotta);
    color: var(--white);
    font-size: .75rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .3rem .85rem;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.tier-card-eyebrow {
    font-size: .85rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .25rem;
}
.tier-card--good .tier-card-eyebrow { color: var(--moss); }
.tier-card--better .tier-card-eyebrow { color: var(--terracotta); }
.tier-card--best .tier-card-eyebrow { color: var(--navy); }

.tier-card-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: var(--weight-bold);
    color: var(--navy);
    margin-bottom: var(--space-3);
    line-height: 1.2;
}

.tier-card-price {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--weight-bold);
    color: var(--navy);
    line-height: 1;
    margin-bottom: var(--space-3);
}
.tier-card-price-unit {
    font-size: 1.1rem;
    color: var(--ink-2);
    font-weight: var(--weight-semibold);
}

.tier-card-tagline {
    color: var(--ink-2);
    font-size: var(--text-body-sm);
    line-height: 1.4;
    margin: 0 0 var(--space-4);
    font-style: italic;
}

.tier-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    flex: 1;
}
.tier-card-features li {
    padding: .35rem 0 .35rem 1.5rem;
    position: relative;
    font-size: var(--text-body-sm);
    line-height: 1.5;
    color: var(--ink);
    border-bottom: 1px dashed var(--line);
}
.tier-card-features li:last-of-type { border-bottom: none; }
.tier-card-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--moss);
    font-weight: var(--weight-bold);
}
.tier-card--better .tier-card-features li::before { color: var(--terracotta); }
.tier-card--best .tier-card-features li::before { color: var(--navy); }

.tier-card .btn { width: 100%; }

/* ============================================================
   Mold-vs-not quiz (_MoldVsNotQuiz) - flip cards
   ============================================================ */
.mvn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-4);
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 900px) { .mvn-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mvn-grid { grid-template-columns: 1fr; } }

.mvn-card {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    perspective: 1200px;
    height: 320px;
    font-family: inherit;
}
.mvn-card:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 4px; border-radius: var(--radius-md); }

.mvn-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
}
.mvn-card[data-flipped="1"] .mvn-card-inner { transform: rotateY(180deg); }

.mvn-card-front,
.mvn-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.mvn-card-front {
    background: var(--mvn-bg, var(--gray-50));
    color: var(--white);
}
.mvn-card-img {
    flex: 1;
    background: linear-gradient(135deg, var(--mvn-bg) 0%, var(--mvn-fg) 100%);
    position: relative;
    overflow: hidden;
}

/* Pattern variants - abstract textures that read as "mold-like" or "not-mold-like"
   without committing to specific imagery. Owner can later swap in real photos
   by replacing the .mvn-pattern-* class with an <img> tag. */
.mvn-pattern-stachy::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 30%, rgba(0,0,0,.5) 0, transparent 18%),
        radial-gradient(circle at 70% 60%, rgba(0,0,0,.55) 0, transparent 22%),
        radial-gradient(circle at 45% 75%, rgba(0,0,0,.4) 0, transparent 15%),
        radial-gradient(circle at 80% 25%, rgba(0,0,0,.35) 0, transparent 12%);
}
.mvn-pattern-efflorescence::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,.85) 0, transparent 8%),
        radial-gradient(circle at 60% 50%, rgba(255,255,255,.75) 0, transparent 6%),
        radial-gradient(circle at 50% 70%, rgba(255,255,255,.7) 0, transparent 5%),
        radial-gradient(circle at 75% 30%, rgba(255,255,255,.6) 0, transparent 7%),
        radial-gradient(circle at 20% 80%, rgba(255,255,255,.5) 0, transparent 4%);
}
.mvn-pattern-cladosporium::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(50,80,40,.6) 0, transparent 25%),
        radial-gradient(ellipse at 65% 60%, rgba(40,70,30,.7) 0, transparent 22%),
        radial-gradient(ellipse at 50% 80%, rgba(60,90,50,.55) 0, transparent 20%);
}
.mvn-pattern-waterstain::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(0,0,0,.35) 0, transparent 40%),
        radial-gradient(circle at 50% 50%, transparent 38%, rgba(0,0,0,.25) 42%, transparent 48%);
}
.mvn-pattern-aspergillus::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(150,140,40,.6) 0, transparent 12%),
        radial-gradient(circle at 60% 30%, rgba(140,130,30,.65) 0, transparent 15%),
        radial-gradient(circle at 45% 65%, rgba(160,150,50,.55) 0, transparent 10%),
        radial-gradient(circle at 75% 55%, rgba(130,120,30,.7) 0, transparent 14%),
        radial-gradient(circle at 25% 75%, rgba(140,130,40,.5) 0, transparent 9%);
}
.mvn-pattern-soot::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 40%, transparent 100%);
}

.mvn-card-label {
    padding: var(--space-3) var(--space-4);
    background: rgba(0, 0, 0, .6);
    color: var(--white);
    font-weight: var(--weight-semibold);
    font-size: .92rem;
    line-height: 1.3;
    text-align: left;
}

.mvn-card-back {
    background: var(--white);
    color: var(--ink);
    transform: rotateY(180deg);
    padding: var(--space-5);
    text-align: left;
    justify-content: center;
}
.mvn-card-back--mold { border-top: 6px solid var(--terracotta); }
.mvn-card-back--notmold { border-top: 6px solid var(--moss); }

.mvn-card-verdict {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--weight-bold);
    margin-bottom: .25rem;
}
.mvn-card-back--mold .mvn-card-verdict { color: var(--terracotta); }
.mvn-card-back--notmold .mvn-card-verdict { color: var(--moss); }

.mvn-card-species {
    color: var(--navy);
    font-weight: var(--weight-semibold);
    font-size: .95rem;
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mvn-card-back p {
    color: var(--ink-2);
    font-size: .9rem;
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   Live activity badge (home stats prelude)
   ============================================================ */
.live-activity {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .4rem .9rem;
    font-size: .85rem;
    color: var(--ink-2);
    margin: 0 auto var(--space-4);
    font-family: var(--font-body);
}
.live-activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--moss);
    box-shadow: 0 0 0 0 rgba(120, 160, 100, .6);
    animation: live-pulse 2s ease-out infinite;
    flex-shrink: 0;
}
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(120, 160, 100, .6); }
    70% { box-shadow: 0 0 0 8px rgba(120, 160, 100, 0); }
    100% { box-shadow: 0 0 0 0 rgba(120, 160, 100, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .live-activity-dot { animation: none; }
}
.live-activity strong { color: var(--navy); font-weight: var(--weight-bold); }

/* Center the badge above the stat row */
.live-activity-wrap {
    text-align: center;
    margin-bottom: var(--space-4);
}

/* ---- Exit-intent modal ---- */
/* When .exit-intent-open is on <html>, body scroll is locked. */
html.exit-intent-open, html.exit-intent-open body { overflow: hidden; }

.exit-intent {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.exit-intent[hidden] { display: none !important; }

.exit-intent-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(2px);
    cursor: pointer;
}

.exit-intent-card {
    position: relative;
    z-index: 1;
    background: var(--white);
    color: var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: 0 28px 60px -12px rgba(15, 23, 42, 0.55);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    max-width: 520px;
    width: 100%;
    text-align: center;
    animation: exit-intent-in 220ms cubic-bezier(.2,.9,.3,1);
}

@keyframes exit-intent-in {
    from { transform: translateY(12px) scale(.97); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .exit-intent-card { animation: none; }
}

.exit-intent-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background: transparent;
    border: none;
    color: var(--ink-2);
    font-size: 1.05rem;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, color 120ms ease;
}
.exit-intent-close:hover, .exit-intent-close:focus-visible {
    background: var(--gray-100);
    color: var(--ink);
    outline: none;
}

.exit-intent-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--cream);
    color: var(--terracotta);
    font-size: 1.6rem;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
}

.exit-intent-title {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    margin: 0 0 .5rem;
    color: var(--navy);
    line-height: 1.2;
}
.exit-intent-body {
    margin: 0 0 1.25rem;
    color: var(--ink-2);
    font-size: .95rem;
    line-height: 1.55;
}
.exit-intent-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: stretch;
    margin-bottom: .75rem;
}
.exit-intent-actions .btn { width: 100%; }
.exit-intent-fine {
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.4;
}

@media (min-width: 520px) {
    .exit-intent-actions {
        flex-direction: row;
        justify-content: center;
    }
    .exit-intent-actions .btn { width: auto; }
}

/* ---- Did-you-know trivia chip ---- */
.did-you-know {
    margin: 1.5rem auto 0;
    max-width: 720px;
    background: var(--cream);
    border-left: 3px solid var(--terracotta);
    padding: .85rem 1.1rem;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .92rem;
    line-height: 1.5;
}
.did-you-know-label {
    color: var(--terracotta);
    font-weight: var(--weight-bold);
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.did-you-know-label .bi { margin-right: .35rem; }
.did-you-know-text { color: var(--ink); }

/* ---- Remediation tier comparison table (/packages) ---- */
.tier-table-section {
    margin: 2.5rem 0 1.5rem;
}
.tier-table-head { margin-bottom: 1.25rem; }
.tier-table-head h2 { margin: 0 0 .5rem; }
.tier-table-head p  { margin: 0; max-width: 70ch; }

.tier-table-wrap {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 18px -8px rgba(15,23,42,.18);
    border: 1px solid var(--gray-200);
    background: var(--white);
}

.tier-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    background: var(--white);
}
.tier-table-feature-col { width: 46%; }
.tier-table thead th {
    background: var(--gray-50);
    text-align: center;
    padding: 1rem .75rem;
    font-weight: var(--weight-bold);
    color: var(--ink);
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
}
.tier-table thead .tier-table-feature-col {
    text-align: left;
    color: var(--ink-2);
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tier-table-th--featured {
    background: var(--cream) !important;
    color: var(--navy) !important;
    position: relative;
}
.tier-table-th-label {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.1;
}
.tier-table-th-sub {
    display: block;
    font-size: .72rem;
    font-weight: var(--weight-regular);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-top: .15rem;
}
/* WCAG AA: --terracotta (#B8552E) on cream gave 4.29:1 — fails 4.5:1 for small
   text. --terracotta-hover (#A04826) on cream is 5.36:1 — passes. */
.tier-table-th--featured .tier-table-th-sub { color: var(--terracotta-hover); }
.tier-table-th-pill {
    display: inline-block;
    margin-top: .35rem;
    background: var(--terracotta);
    color: var(--white);
    font-size: .65rem;
    letter-spacing: .04em;
    padding: .15rem .5rem;
    border-radius: 999px;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
}

.tier-table tbody .tier-table-section-row th {
    background: var(--navy);
    color: var(--white);
    text-align: left;
    padding: .55rem .9rem;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
}

.tier-table-row td,
.tier-table-row .tier-table-feature {
    padding: .65rem .8rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}
.tier-table-row:last-child td,
.tier-table-row:last-child .tier-table-feature { border-bottom: none; }

.tier-table-feature {
    text-align: left;
    font-weight: var(--weight-regular);
    color: var(--ink);
}
.tier-table-feature-name { display: inline; }
.tier-table-row--emphasis .tier-table-feature-name { font-weight: var(--weight-bold); color: var(--navy); }

.tier-table-info {
    background: transparent;
    border: none;
    margin-left: .3rem;
    color: var(--terracotta);
    cursor: help;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
}
.tier-table-info:hover, .tier-table-info:focus-visible {
    color: var(--navy);
    outline: none;
}

/* Shared popover for the tier-table info buttons. Single element appended
   to body by site.js. Positioned absolute so it floats above table layout. */
.tier-info-popover {
    position: absolute;
    z-index: 100;
    max-width: 280px;
    background: var(--navy);
    color: var(--cream);
    padding: .65rem .85rem;
    border-radius: var(--radius);
    font-size: .85rem;
    line-height: 1.45;
    box-shadow: 0 10px 30px rgba(15, 42, 68, .25);
    pointer-events: auto;
}

.tier-table-cell {
    text-align: center;
    color: var(--ink-2);
}
.tier-table-cell--featured { background: rgba(243, 235, 220, 0.35); }
.tier-table-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--mint, #d8efe1);
    color: #0f7a3f;
    font-size: .95rem;
}
.tier-table-empty { color: var(--muted); }

.tier-table-foot {
    margin: 1rem 0 0;
    font-size: .88rem;
    text-align: center;
}

/* Mobile: shrink padding so the table still fits. Don't card-stack -
   the visual scan-ability of an actual grid is the whole point. */
@media (max-width: 540px) {
    .tier-table { font-size: .8rem; }
    .tier-table thead th, .tier-table-row td, .tier-table-row .tier-table-feature {
        padding: .5rem .4rem;
    }
    .tier-table-th-label { font-size: .95rem; }
    .tier-table-th-pill { display: none; }
}

/* ---- Tier preference picker (/quote) ---- */
.tier-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .65rem;
}
.tier-picker-card {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: .85rem .9rem;
    cursor: pointer;
    background: var(--white);
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
    position: relative;
}
.tier-picker-card input { position: absolute; opacity: 0; pointer-events: none; }
.tier-picker-card:hover { border-color: var(--terracotta); transform: translateY(-1px); }
.tier-picker-card:has(input:checked) {
    border-color: var(--terracotta);
    background: var(--cream);
}
.tier-picker-card:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(214,143,93,.35); outline: none; }
/* "Most picked" pill alone signals the recommended tier. We deliberately do
   NOT apply a persistent background or border tint here - that visually
   collided with the :has(input:checked) "selected" state and made it look
   like the Better card was always selected. The pill carries the signal. */
.tier-picker-card--featured::after {
    content: "Most picked";
    position: absolute;
    top: -8px;
    right: .65rem;
    background: var(--terracotta);
    color: var(--white);
    font-size: .62rem;
    font-weight: var(--weight-bold);
    letter-spacing: .04em;
    padding: .1rem .45rem;
    border-radius: 999px;
    text-transform: uppercase;
}
.tier-picker-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--navy);
    line-height: 1.1;
}
.tier-picker-sub {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--terracotta);
    margin-top: .15rem;
}
.tier-picker-tagline {
    font-size: .82rem;
    color: var(--ink-2);
    margin-top: .35rem;
    line-height: 1.4;
}

/* ---- Insurance verdict card (/insurance/check/result) ---- */
.verdict-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1.5rem;
    border-left: 6px solid var(--terracotta);
}
.verdict-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--white);
    background: var(--navy);
}
.verdict-card--strong  { border-left-color: #2e9b56; }
.verdict-card--strong  .verdict-card-icon { background: #2e9b56; }
.verdict-card--mixed   { border-left-color: var(--terracotta); }
.verdict-card--mixed   .verdict-card-icon { background: var(--terracotta); }
.verdict-card--weak    { border-left-color: #d97706; }
.verdict-card--weak    .verdict-card-icon { background: #d97706; }
.verdict-card--denied  { border-left-color: #1d4ed8; }
.verdict-card--denied  .verdict-card-icon { background: #1d4ed8; }
.verdict-card--unknown { border-left-color: var(--muted); }
.verdict-card--unknown .verdict-card-icon { background: var(--muted); }

@media (max-width: 540px) {
    .verdict-card { grid-template-columns: 1fr; text-align: center; }
    .verdict-card-icon { margin: 0 auto; }
}

/* ---- Response time badge ---- */
.response-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    background: var(--cream);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--ink-2);
    line-height: 1.3;
}
.response-badge-text strong { color: var(--navy); font-weight: var(--weight-bold); }
.response-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #2e9b56;
    box-shadow: 0 0 0 4px rgba(46, 155, 86, 0.18);
    animation: response-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes response-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(46, 155, 86, 0.18); }
    50%      { box-shadow: 0 0 0 7px rgba(46, 155, 86, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
    .response-badge-dot { animation: none; }
}

/* ---- Humidity advisor card (home + /faq) ---- */
.humidity-card {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--terracotta);
    background: var(--cream);
}
.humidity-card--risky { border-left-color: #d97706; background: #fff7ec; }
.humidity-card--dry   { border-left-color: #2e9b56; background: #f3faf5; }

.humidity-card-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .5rem;
}
.humidity-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--navy);
    color: var(--white);
    font-size: 1.1rem;
}
.humidity-card--risky .humidity-card-icon { background: #d97706; }
.humidity-card--dry   .humidity-card-icon { background: #2e9b56; }
.humidity-card-eyebrow {
    flex: 1;
    font-size: .72rem;
    font-weight: var(--weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.humidity-card-range {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--navy);
    line-height: 1;
}
.humidity-card-headline {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
    color: var(--navy);
    line-height: 1.35;
}
.humidity-card-body {
    margin: 0 0 .65rem;
    color: var(--ink);
    line-height: 1.5;
}
.humidity-card-action {
    margin: 0 0 .65rem;
    color: var(--ink);
    line-height: 1.5;
}
.humidity-card-foot {
    margin: 0;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.5;
}
.humidity-card-foot a { color: var(--terracotta); font-weight: var(--weight-bold); }

/* ---- Mold-risk quiz result card ---- */
.risk-card {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: 1.5rem;
    border-left: 6px solid var(--terracotta);
}
.risk-card-score {
    text-align: center;
    padding: 1rem .5rem;
    border-radius: var(--radius-md);
    background: var(--gray-50);
}
.risk-card-score-num {
    font-family: var(--font-display);
    font-size: 3.25rem;
    line-height: 1;
    color: var(--navy);
    font-weight: 700;
}
.risk-card-score-denom { font-size: .85rem; color: var(--muted); margin-top: -.25rem; }
.risk-card-score-band {
    margin-top: .35rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-2);
}

.risk-card-body {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.risk-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--navy);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.risk-card--low      { border-left-color: #2e9b56; }
.risk-card--low      .risk-card-icon { background: #2e9b56; }
.risk-card--low      .risk-card-score-band { color: #1d6b3a; }
.risk-card--moderate { border-left-color: #f5b417; }
.risk-card--moderate .risk-card-icon { background: #b88810; }
.risk-card--moderate .risk-card-score-band { color: #92400e; }
.risk-card--elevated { border-left-color: var(--terracotta); }
.risk-card--elevated .risk-card-icon { background: var(--terracotta); }
.risk-card--elevated .risk-card-score-band { color: #b45324; }
.risk-card--high     { border-left-color: #e64a19; }
.risk-card--high     .risk-card-icon { background: #e64a19; }
.risk-card--high     .risk-card-score-band { color: #c1380f; }

@media (max-width: 600px) {
    .risk-card { grid-template-columns: 1fr; text-align: center; }
    .risk-card-body { flex-direction: column; align-items: center; text-align: center; }
}

/* ---- Hidden staff-login link in footer copyright ---- */
/* Renders as plain text indistinguishable from the surrounding © + year,
   but is clickable. Customers don't click copyright symbols; staff know
   it's there. Hover does NOT underline (would tip off curious mouse-overs). */
.footer-staff-login,
.footer-staff-login:hover,
.footer-staff-login:focus,
.footer-staff-login:visited {
    color: inherit;
    text-decoration: none;
    cursor: text;       /* shows the text-cursor on hover, not a pointer hand */
}
/* Keyboard-focus still gets the accessibility ring so screen-reader users can find it */
.footer-staff-login:focus-visible {
    outline: 2px solid var(--terracotta);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---- Footer bottom-most staff login link ---- */
/* Visible enough to find on purpose, quiet enough to not pull attention
   from prospects scanning the footer for service links. Right-aligned so
   it sits in the natural "fine print" corner. */
.footer-staff-row {
    margin-top: .5rem;
    padding: .5rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    text-align: right;
}
.footer-staff-link {
    color: rgba(255, 255, 255, .35);
    font-size: .72rem;
    letter-spacing: .04em;
    text-decoration: none;
    padding: .25rem .35rem;
    transition: color 120ms ease;
}
.footer-staff-link:hover,
.footer-staff-link:focus-visible {
    color: rgba(255, 255, 255, .9);
    text-decoration: underline;
}
@media (max-width: 540px) {
    .footer-staff-row { text-align: center; }
}

/* ---- Inline consent card (SMS opt-in on /schedule, future opt-ins) ----
   Replaces the inline-styled checkbox + text that collapsed to a narrow
   column inside the form-grid. Uses proper flex layout: checkbox fixed-width,
   text takes the remaining width with flex:1, line-height tuned for legal copy. */
.consent-block {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    cursor: pointer;
    padding: 1rem 1.15rem;
    background: var(--gray-50, #f6f7fa);
    border: 1px solid var(--gray-200, #e3e6ec);
    border-radius: var(--radius-md, 10px);
    line-height: 1.5;
    transition: border-color 120ms ease, background 120ms ease;
}
.consent-block:hover {
    border-color: var(--terracotta, #d68f5d);
}
.consent-block:has(input:checked) {
    border-color: var(--terracotta, #d68f5d);
    background: var(--cream, #faf7f2);
}
.consent-block-check {
    margin-top: .2rem;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--terracotta, #d68f5d);
}
.consent-block-text {
    flex: 1;
    min-width: 0;          /* allow text to shrink + wrap inside the flex item */
}
.consent-block-title {
    display: block;
    color: var(--ink, #1f2533);
    font-weight: var(--weight-bold, 700);
    margin-bottom: .25rem;
}
.consent-block-fine {
    display: block;
    color: var(--ink-2, #4a5567);
    font-size: .88rem;
    line-height: 1.55;
}

/* ===== Placeholder image system (chapter 106) =====
   Renders a styled box where a real ChatGPT-generated (or photographed) image
   will eventually go. The box respects the intended aspect ratio so the
   surrounding layout looks identical placeholder vs final.
   ImageCatalog.cs is the source of truth for codes + descriptions.        */

.placeholder-img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Real image present - just a subtle frame so it doesn't sit naked in
   text-heavy contexts. Most real-image styling is provided by the caller. */
img.placeholder-img {
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(15, 42, 68, .08);
}

/* Placeholder box - dimensions come from inline `aspect-ratio` style */
.placeholder-img--empty {
    position: relative;
    background: repeating-linear-gradient(
        135deg,
        var(--cream) 0,
        var(--cream) 12px,
        var(--gray-50, #f2efea) 12px,
        var(--gray-50, #f2efea) 24px
    );
    border: 2px dashed var(--bronze-deep, #7a5a2b);
    border-radius: var(--radius);
    padding: clamp(1rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
    color: var(--navy);
    width: 100%;
    overflow: hidden;
    /* min-height ensures the placeholder is at least visible even at very
       narrow widths where aspect-ratio could yield ~0 height */
    min-height: 120px;
}

/* "PLACEHOLDER" pill in the top-right corner */
.placeholder-img-badge {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: var(--bronze-deep, #7a5a2b);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    padding: .25rem .55rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.placeholder-img-code {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(.95rem, 1.6vw, 1.15rem);
    letter-spacing: .06em;
    color: var(--bronze-deep, #7a5a2b);
}

.placeholder-img-desc {
    font-family: var(--font-display, Georgia, serif);
    font-weight: 700;
    font-size: clamp(.95rem, 1.7vw, 1.2rem);
    line-height: 1.3;
    color: var(--navy);
    max-width: 56ch;
}

.placeholder-img-meta {
    font-family: var(--font-body);
    font-size: .75rem;
    color: var(--gray-500, #6b6358);
    letter-spacing: .04em;
}

.placeholder-img-notes {
    font-family: var(--font-body);
    font-size: .8rem;
    font-style: italic;
    color: var(--gray-500, #6b6358);
    max-width: 50ch;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--line, #e5e0d7);
}

.placeholder-img-caption {
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--gray-500, #6b6358);
    text-align: center;
    margin-top: .5rem;
    font-style: italic;
}

/* Error state when caller passes a code we don't have in ImageCatalog.
   Bright + loud so it's caught in dev before deploying. */
.placeholder-img--error {
    display: block;
    padding: 1rem;
    background: #fff3f3;
    border: 2px solid #b8552e;
    border-radius: var(--radius);
    color: #b8552e;
    font-family: var(--font-body);
}
.placeholder-img--error strong { display: block; margin-bottom: .25rem; }
.placeholder-img--error small { display: block; opacity: .75; font-size: .8rem; }

/* ===== SVG flow diagrams (chapter 106) ===== */
.s520-flow {
    width: 100%;
    height: auto;
    max-height: 320px;
    display: block;
    margin: 1rem 0;
}
/* On narrow screens the diagram becomes unreadable - hide and show a vertical
   list alternative via the surrounding view */
@media (max-width: 640px) {
    .s520-flow { display: none; }
}

/* ===== Image break section ===== */
/* Sandwich a placeholder/photo between content sections with appropriate
   breathing room. Section width matches narrow-container content widths
   so the image doesn't break the page reading rhythm. */
.section--image-break {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--cream);
}
.section--image-break .placeholder-img--empty {
    /* On the home page break, give it room to be noticed */
    min-height: 240px;
}
.cms-hero-img,
.hero-atmospheric-img {
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(15, 42, 68, .12);
}

/* ===== Compact placeholder (chapter 107) =====
   Used inside small cards / tiles (e.g. mold-vs-not quiz). Fills the parent
   container instead of using aspect-ratio. Shows just the badge + code so it
   stays readable at small sizes. */
.placeholder-img--compact {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: .5rem;
    gap: .25rem;
    /* Override the figure flex layout to center compactly */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    border-width: 1px;
}
.placeholder-img--compact .placeholder-img-badge {
    position: static;
    margin-bottom: .15rem;
}
.placeholder-img--compact .placeholder-img-code {
    font-size: .85rem;
}

/* When a quiz card has a real <img> dropped in via the placeholder partial,
   the image should fill the card-img container (cover, centered). */
.mvn-card-img > img.placeholder-img,
.mvn-card-img > img.mvn-card-img-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}

/* ===== Credential badges + containment + humidity (chapter 109) ===== */
.cred-badge { display: inline-block; vertical-align: middle; }
.cred-badge-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2rem);
    flex-wrap: wrap;
    margin: clamp(1rem, 3vw, 2rem) 0;
}
.containment-diagram,
.humidity-gauge {
    width: 100%;
    height: auto;
    max-width: 640px;
    display: block;
    margin: clamp(1rem, 3vw, 2rem) auto;
}

/* ===== Placeholder hint icon (chapter 116) =====
   Visual hint inside the placeholder box. Compact mode = icon is the
   primary content. Full mode = icon is a low-opacity watermark behind
   the text. Bootstrap Icons render via .placeholder-hint-icon; inline
   SVG sketches render via .placeholder-hint-svg. */
.placeholder-img-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.placeholder-hint-icon {
    color: var(--navy);
    line-height: 1;
}
.placeholder-hint-svg {
    width: 60%;
    height: 60%;
    max-width: 220px;
    color: var(--navy);
}

/* Compact mode: icon centered, fills most of the box, dominant visual.
   Badge + code overlay sit on top via absolute positioning. */
.placeholder-img--compact .placeholder-img-hint {
    position: absolute;
    inset: 0;
}
.placeholder-img--compact .placeholder-hint-icon {
    font-size: clamp(2.5rem, 12vw, 4.5rem);
    color: var(--bronze-deep, #7A5A2B);
    opacity: .55;
}
.placeholder-img--compact .placeholder-hint-svg {
    width: 70%;
    height: 70%;
    opacity: .55;
}
.placeholder-img--compact .placeholder-img-badge {
    z-index: 2;
}
.placeholder-img--compact .placeholder-img-code {
    position: relative;
    z-index: 2;
    background: rgba(250, 247, 242, .85);
    padding: .15rem .55rem;
    border-radius: var(--radius-sm);
}

/* Full mode: icon as background watermark, text on top, readable. */
.placeholder-img-hint--watermark {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.placeholder-img-hint--watermark .placeholder-hint-icon {
    font-size: clamp(4rem, 16vw, 9rem);
    color: var(--bronze-deep, #7A5A2B);
    opacity: .32;
}
.placeholder-img-hint--watermark .placeholder-hint-svg {
    opacity: .35;
    width: 65%;
    height: 65%;
}
.placeholder-img--empty > .placeholder-img-badge,
.placeholder-img--empty > .placeholder-img-code,
.placeholder-img--empty > .placeholder-img-desc,
.placeholder-img--empty > .placeholder-img-meta,
.placeholder-img--empty > .placeholder-img-notes {
    position: relative;
    z-index: 1;
}

/* Catalog-list preview thumbnail: render the SVG/icon hint at full
   opacity inside a 72x72 cell so Max can see all slot compositions
   at a glance on /Admin/Images. */
.catalog-preview-mockup {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.catalog-preview-mockup .placeholder-hint-svg {
    width: 100%;
    height: 100%;
    max-width: none;
    opacity: 1;
    color: var(--navy);
}
.catalog-preview-mockup .placeholder-hint-icon {
    font-size: 2rem;
    color: var(--bronze-deep, #7A5A2B);
    opacity: .75;
}

/* ===== Unified SVG-as-deliverable rendering =====
   When a slot has no uploaded image, the inline SVG mockup IS the
   visible content (NOT a development placeholder). Same shell as
   <img class="placeholder-img"> so the layout is byte-identical
   regardless of whether the ChatGPT raster has landed. Applies to
   Photo, Illustration, and Diagram kinds equally - one rendering
   path so swapping in an uploaded file is a pixel-perfect drop-in.
   ChatGPT image always wins when present. */
.placeholder-img--svg {
    display: block;
    width: 100%;
    background: var(--cream);
    overflow: hidden;
    line-height: 0;
    /* Inherits border-radius + box-shadow from img.placeholder-img above
       so the visual shell is identical to an uploaded image. */
}
.placeholder-img--svg .placeholder-hint-svg {
    width: 100%;
    height: 100%;
    max-width: none;
    opacity: 1;
    color: var(--navy);
    display: block;
}
.placeholder-img--svg .placeholder-hint-icon {
    font-size: clamp(3rem, 8vw, 6rem);
    color: var(--navy);
    opacity: .9;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
/* Compact variant (used in tight cards like the mold-vs-not quiz tiles). */
.placeholder-img--svg-compact {
    aspect-ratio: 1 / 1;
}
.placeholder-img--svg-compact .placeholder-hint-svg {
    width: 100%;
    height: 100%;
}

/* ===== Color-coded structured prompt builder (chapter 117) =====
   Each structured field has a distinct hue. The assembled prompt below
   uses spans with matching backgrounds so it's obvious which field
   contributed which sentence to the final ChatGPT prompt. */
.prompt-field-subject       { --field-tint: #E3F2FD; --field-edge: #1565C0; }
.prompt-field-composition   { --field-tint: #F3E5F5; --field-edge: #6A1B9A; }
.prompt-field-lighting      { --field-tint: #FFF8E1; --field-edge: #F57F17; }
.prompt-field-colorpalette  { --field-tint: #FFEBEE; --field-edge: #C62828; }
.prompt-field-referencestyle{ --field-tint: #E8F5E9; --field-edge: #2E7D32; }
.prompt-field-negativeprompt{ --field-tint: #ECEFF1; --field-edge: #455A64; }
.prompt-field-sceneraw      { --field-tint: #FAF7F2; --field-edge: #7A5A2B; }
.prompt-field-rider         { --field-tint: #FFE0B2; --field-edge: #E65100; }

.prompt-field {
    background: var(--field-tint);
    border-left: 4px solid var(--field-edge);
    padding: .65rem .85rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: .75rem;
}
.prompt-field label { font-weight: 700; color: var(--field-edge); }
.prompt-field textarea { background: rgba(255,255,255,.6); border-color: var(--field-edge); }

/* Assembled-prompt preview: each segment colored to match its source field */
.assembled-prompt {
    background: #FAF7F2;
    border: 1px solid #E5E0D7;
    border-radius: 6px;
    padding: .75rem;
    font-family: ui-monospace, monospace;
    font-size: .82rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.assembled-prompt .seg {
    border-radius: 3px;
    padding: 1px 3px;
    margin-right: 1px;
}
.seg-subject       { background: #E3F2FD; }
.seg-composition   { background: #F3E5F5; }
.seg-lighting      { background: #FFF8E1; }
.seg-colorpalette  { background: #FFEBEE; }
.seg-referencestyle{ background: #E8F5E9; }
.seg-negativeprompt{ background: #ECEFF1; }
.seg-sceneraw      { background: #FAF7F2; outline: 1px dashed #7A5A2B; }
.seg-rider         { background: #FFE0B2; }

.prompt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .5rem 0 .75rem;
    font-size: .72rem;
}
.prompt-legend .chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .4rem;
    border-radius: 99px;
    background: rgba(0,0,0,.04);
}
.prompt-legend .swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}