/* ==========================================================================
   02 Energy - main stylesheet
   Production WordPress theme styles for the 02 Energy launch site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Framework v1.1 canonical aliases (main.css historically uses
       --color-primary/-accent names; new code may use either).
       CPI "Blueprint Standard" palette (rebrand 2026-07-13, Lucas):
       ink navy carries the brand, drafting cyan is the single accent
       (CTAs, links, linework). All pairs AA verified: cyan CTA 4.8:1
       with white text, cyan text #0b6683 6.5:1 on white, bright cyan
       #58b7d4 6.2:1 on ink navy. */
    --color-brand: #1b2a4a;
    --color-brand-hover: #14213a;
    --color-brand-tint: #f2f5f9;

    /* Project palette - primary = ink navy (dark bands, headings) */
    --color-primary: #1b2a4a;
    --color-primary-hover: #14213a;
    --color-primary-dark: #101a30;
    --color-primary-soft: #f2f5f9;
    --color-primary-tint: rgba(27,42,74,0.10);

    /* Core surface colors */
    --color-secondary: #4a5a75;
    --color-text: #3d4a63;
    --color-heading: #16233c;
    --color-muted: #64718a;
    --color-line: #dee5ee;
    --color-border: #dee5ee;
    --color-bg: #ffffff;
    --color-bg-soft: #f2f5f9;
    --color-bg-accent: #e9eff6;
    /* Inverse / dark-surface tokens for footer, hero overlays, dark sections */
    --color-bg-inverse: #101a30;
    --color-bg-inverse-soft: #16233c;
    --color-text-inverse: rgba(255, 255, 255, 0.86);
    --color-text-inverse-muted: rgba(255, 255, 255, 0.62);
    --color-heading-inverse: #ffffff;
    --color-line-inverse: rgba(255, 255, 255, 0.16);
    --color-accent-on-dark: #58b7d4; /* bright drafting cyan - dark bands only */
    --color-overlay-dark: rgba(13, 20, 35, 0.82);
    --color-overlay-dark-mid: rgba(16, 26, 48, 0.66);
    --color-footer-bg: #0a1122; /* near-black, tinted toward navy (never pure #000) */
    --color-footer-text: var(--color-text-inverse);
    --color-footer-link: var(--color-text-inverse);
    --color-topbar-bg: #1b2a4a;
    --color-topbar-text: #ffffff;
    --color-white: #ffffff;
    --color-star: #f4b323;
    --color-accent: #0e7c9c;       /* CTA drafting cyan - 4.8:1 with white text */
    --color-accent-text: #0b6683;  /* link/text cyan - 6.5:1 on white */
    --color-accent-hover: #0c6e8b;
    --color-accent-soft: rgba(14, 124, 156, 0.12);
    --color-silver: #b8c2cf;       /* slate silver - secondary neutral */
    /* Blueprint drafting-grid linework (background patterns only) */
    --color-grid-line: rgba(88, 183, 212, 0.10);
    --color-grid-line-faint: rgba(88, 183, 212, 0.07);
    --color-success:        #1d6a2c;
    --color-success-bg:     #E7F7EC;
    --color-success-border: #b6e3bf;
    --color-error:          #e85a4f;
    --color-error-bg:       #fbeaea;
    --color-error-border:   #e3b6b6;
    /* Alpha variants of --color-primary used in hover/focus/border states */
    --color-primary-alpha-16: rgba(27,42,74,0.16);
    --color-primary-alpha-35: rgba(27,42,74,0.35);
    --color-primary-alpha-45: rgba(27,42,74,0.45);

    /* Type system - layout improvements PRESERVED */
    --font-body: 'Inter', ui-sans-serif, -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Inter', ui-sans-serif, -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Inter', ui-sans-serif, -apple-system, system-ui, sans-serif;

    /* ===========================================================
       CANONICAL TYPE SCALE - 8 steps, no bespoke per-component tokens.
       Sampled from North Hill rendered DOM at 1280px viewport.
       All font-size declarations in this codebase MUST reference one
       of these tokens. See DESIGN.md section 0 (Hard Rules).
       =========================================================== */
    --fs-xs:     0.75rem;   /* 12px - tiny labels, eyebrows, footnotes */
    --fs-sm:     0.9rem;    /* 14.4px - nav, buttons, bullets, small body (North Hill scale) */
    --fs-base:   1rem;      /* 16px - body text default */
    --fs-lg:     1.1rem;    /* 17.6px - lead paragraphs, body-lg, H4 (North Hill scale) */
    --fs-xl:     1.25rem;   /* 20px - card headings, small H3 */
    --fs-2xl:    1.5rem;    /* 24px - H3 */
    --fs-3xl:    2.375rem;  /* 38px - H2 (North Hill scale) */
    --fs-4xl:    3.25rem;   /* 52px - H1, display (North Hill scale) */

    /* Heading tokens use clamp() for responsive scaling. */
    --fs-h1: clamp(1.875rem, 3vw + 0.5rem, var(--fs-4xl));   /* peak 40px */
    --fs-h2: clamp(1.5rem,   2vw + 0.5rem, var(--fs-3xl));   /* peak 32px */
    --fs-h3: clamp(1.25rem,  1vw + 0.5rem, var(--fs-2xl));   /* peak 24px */
    --fs-h4: var(--fs-lg);   /* 18px */

    /* Body aliases (back-compat for older selectors). */
    --fs-body:  var(--fs-base);
    --fs-small: var(--fs-sm);

    /* Retired bespoke per-primitive tokens (kept as aliases so nothing
       breaks; new code MUST use the canonical scale above instead). */
    --fs-eyebrow:  var(--fs-xs);
    --fs-utility:  var(--fs-sm);
    --fs-meta:     var(--fs-sm);
    --fs-body-sm:  var(--fs-sm);
    --fs-body-lg:  var(--fs-lg);

    /* Font weights - canonical, no aliases. */
    --fw-regular:  400;
    --fw-body:     var(--fw-regular);
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;

    /* Line-heights - canonical 3 plus back-compat aliases. */
    --lh-tight:    1.25;     /* 40/32 - large headings */
    --lh-normal:   1.5;      /* 24/16 - body */
    --lh-relaxed:  1.65;     /* lead paragraphs */
    --lh-body:     var(--lh-normal);
    --lh-heading:  var(--lh-tight);
    --lh-display:  1.2;      /* 48/40 - H1 */

    /* Letter-spacings - canonical 4. */
    --ls-tight:    -0.01em;   /* large headings */
    --ls-normal:    0;
    --ls-wide:      0.06em;   /* buttons, uppercase nav, CTA labels */
    --ls-eyebrow:   0.12em;   /* uppercase eyebrows */
    --ls-display:   var(--ls-normal);

    /* Button tokens - canonical. .btn-sm/.btn/.btn-lg all consume these.
       Default .btn height matches the header chrome height so a button
       in the header looks the same as a button anywhere else. */
    --btn-height:        40px;
    --btn-height-sm:     32px;
    --btn-height-lg:     52px;
    --btn-padding-x:     1.5rem;
    --btn-padding-x-sm:  1rem;
    --btn-padding-x-lg:  2rem;

    /* Z-index scale - documented stacking order. Never use a raw number. */
    --z-base:       0;     /* Default flow */
    --z-content:    1;     /* Lifted within a section (overlays, decorations) */
    --z-sticky:    50;     /* Sticky elements (mobile bottom bar) */
    --z-header:   100;     /* Site header */
    --z-overlay:  150;     /* Mobile drawer overlay */
    --z-drawer:   190;     /* Mobile drawer panel */
    --z-modal:    200;     /* Modals, lightboxes */
    --z-skiplink:1000;     /* Accessibility skip link */

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-pill: 999px;

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

    --container: 1280px;
    --container-narrow: 1280px;

    --shadow-xs: 0 1px 2px rgba(15, 30, 50, 0.05);
    --shadow-sm: 0 1px 2px rgba(15, 30, 50, 0.05);
    --shadow-md: 0 6px 18px rgba(15, 30, 50, 0.08);
    --shadow-lg: 0 18px 48px rgba(15, 30, 50, 0.12);
    --shadow-glow: 0 8px 28px rgba(238, 118, 35, 0.28);

    --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 520ms cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);

    /* --- WordPress Theme Framework v1 canonical aliases ------------------- */
    /* New components reference --color-brand* for cross-theme parity with
       North Hill. These resolve to RE's --color-primary tokens. See
       /root/.claude/wordpress-theme-framework/FRAMEWORK.md */
    --color-brand:        var(--color-primary);
    --color-brand-hover:  var(--color-primary-hover);
    --color-brand-tint:   var(--color-primary-soft);
    --color-text-muted:   var(--color-muted);
    --radius:             var(--radius-md);
    --maxw:               var(--container);
    --maxw-narrow:        var(--container-narrow);
    --shadow:             var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   Base / reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-bg);
    /* Guard against sub-pixel / off-canvas-drawer horizontal overflow. Uses
       clip (not hidden) so position:sticky descendants still work. */
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-hover); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-heading); line-height: var(--lh-heading); margin: 0 0 var(--space-4); font-weight: 700; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
li { margin-bottom: var(--space-2); }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-8) 0; }
h1,
h2,
h3,
.section-header h2,
.hero-copy h1,
.closing-cta h2 {
    text-wrap: balance;
}
p,
li {
    text-wrap: pretty;
}

/* Accessibility */
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; overflow: hidden;
    padding: 0; position: absolute !important; word-wrap: normal !important;
}
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
.skip-link {
    position: absolute; left: -9999px; top: 0; background: var(--color-primary);
    color: var(--color-heading-inverse); padding:var(--space-3); z-index: var(--z-skiplink);
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); }
/* Single content width site-wide (Lucas 2026-07-04). .narrow now matches the
   main container; long-form text keeps a readable measure via max-width on the
   text elements themselves, not the container. */
.container.narrow > p,
.container.narrow > ul:not(.grid):not([class*="grid"]),
.container.narrow > ol:not(.steps) {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
.container.narrow > h2,
.container.narrow > h3 {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.container.narrow > .section-header,
.section-header { max-width: 900px; }
.section.accent { background: var(--color-bg-accent); }

/* Grid utilities */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
.flex { display: flex; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { align-items: center; justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Top bar (above header)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.primary-nav > ul { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-2); align-items: center; }
.primary-nav > ul > li { position: relative; margin: 0; }
.primary-nav > ul > li > a {
    display: inline-flex; align-items: center; gap: 4px;
    padding:var(--space-3);
    color: var(--color-heading);
    font-size: var(--fs-sm);
    font-weight: 500;
}
.primary-nav > ul > li > a:hover { color: var(--color-accent); }
.primary-nav .caret { font-size: var(--fs-xs); opacity: 0.7; }
/* Flat company nav: multi-word labels never wrap mid-item */
.primary-nav > ul > li > a,
.primary-nav .menu > li > a { white-space: nowrap; }

.primary-nav .sub-menu {
    position: absolute;
    top: 100%; left: 0;
    background: var(--color-bg);
    list-style: none; padding: 0.5rem 0; margin: 0;
    min-width: 240px;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    opacity: 0; visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: var(--z-header);
}
.primary-nav .has-children:hover > .sub-menu,
.primary-nav .has-children:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.primary-nav .sub-menu li { margin: 0; }
.primary-nav .sub-menu a {
    display: block; padding:var(--space-2);
    color: var(--color-heading); font-size: var(--fs-utility); font-weight: 500;
}
.primary-nav .sub-menu a:hover { background: var(--color-bg-soft); color: var(--color-primary); }

/* ── Mega-menu: rich dropdown panels (Residential / Commercial / About) ──── */
.primary-nav .has-mega { position: static; }
.primary-nav .has-mega > a { display: inline-flex; align-items: center; gap: 4px; }
.mega-panel {
    position: absolute;
    left: 50%;
    right: auto;
    top: 100%;
    width: min(980px, calc(100vw - var(--space-12)));
    padding-top: var(--space-3);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: var(--z-header);
}
.primary-nav .has-mega:hover > .mega-panel,
.primary-nav .has-mega:focus-within > .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.mega-panel-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 280px);
    gap: var(--space-6);
    max-width: none;
    margin: 0 auto;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
}
.mega-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: var(--space-6);
    align-items: start;
}
.mega-col { min-width: 0; }
.mega-col-heading {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    font-weight: var(--fw-bold);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li { margin: 0; }
.mega-col li a {
    display: block;
    padding: var(--space-2);
    margin: 0 calc(var(--space-3) * -1);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--transition);
}
.mega-col li a:hover { background: var(--color-bg-soft); }
.mega-link-title {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-heading);
}
.mega-link-desc {
    display: block;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-top: 1px;
}
.mega-col li a:hover .mega-link-title { color: var(--color-accent-text); }
.mega-feature {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 100%;
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--color-brand);
    color: var(--color-heading-inverse);
    text-decoration: none;
    transition: transform var(--transition);
}
.mega-feature:hover {
    transform: translateY(-2px);
    color: var(--color-heading-inverse);
}
.mega-feature-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.mega-feature:hover .mega-feature-title { color: var(--color-heading-inverse); }
.mega-feature-desc { font-size: var(--fs-sm); color: var(--color-text-inverse); line-height: var(--lh-relaxed); }
.mega-feature:hover .mega-feature-desc { color: var(--color-text-inverse); }
.mega-feature-cta { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-accent-on-dark); margin-top: var(--space-1); }
.mega-feature:hover .mega-feature-cta { color: var(--color-accent-on-dark); }
@media (max-width: 1100px) {
    .mega-feature { display: none; }
    .mega-panel-inner { grid-template-columns: 1fr; }
    .mega-panel { width: min(760px, calc(100vw - var(--space-8))); }
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    background: none; border: none;
    width: 44px; height: 44px;
    padding: 0;
    color: var(--color-heading);
    align-items: center; justify-content: center;
}
.menu-toggle .bar {
    display: block; width: 24px; height: 2px;
    background: currentColor; position: relative;
}
.menu-toggle .bar::before,
.menu-toggle .bar::after {
    content: ''; position: absolute; left: 0; width: 24px; height: 2px;
    background: currentColor;
}
.menu-toggle .bar::before { top: -7px; }
.menu-toggle .bar::after { top: 7px; }

/* Mobile drawer */
.mobile-drawer {
    position: fixed; inset: 0 0 0 auto;
    width: min(360px, 90vw);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 320ms var(--ease-out-soft);
    z-index: var(--z-modal);
    padding: var(--space-16) var(--space-6) var(--space-6);
    overflow-y: auto;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer ul { list-style: none; padding: 0; margin: 0; }
/* Nav links only - scoped to the menu list so the .btn action buttons in
   .mobile-drawer-actions keep their centered button styling (was warping). */
.mobile-drawer .mobile-submenu a,
.mobile-drawer ul:not(.mobile-menu) a {
    display: block; padding: 0.95rem var(--space-3);
    color: var(--color-heading); font-weight: 500;
    border-bottom: 1px solid var(--color-border);
    transition: color var(--transition), padding-left var(--transition);
}
.mobile-drawer .mobile-submenu a:hover,
.mobile-drawer ul:not(.mobile-menu) a:hover { color: var(--color-primary); padding-left: var(--space-4); }
.mobile-menu-group {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    font-weight: var(--fw-bold);
    color: var(--color-text-muted);
    padding: var(--space-5) 0 var(--space-2);
    margin-top: var(--space-2);
    border-top: 1px solid var(--color-line);
}
.mobile-menu-group:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.mobile-menu {
    display: grid;
    gap: var(--space-3);
}
.mobile-menu-section {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    overflow: hidden;
}
.mobile-menu-trigger {
    width: 100%;
    border: 0;
    background: var(--color-bg-soft);
    color: var(--color-heading);
    min-height: 58px;
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    cursor: pointer;
}
.mobile-menu-trigger-icon {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-pill);
    position: relative;
    flex: 0 0 auto;
}
.mobile-menu-trigger-icon::before,
.mobile-menu-trigger-icon::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 9px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: currentColor;
}
.mobile-menu-trigger-icon::after {
    transform: rotate(90deg);
    transition: transform var(--transition);
}
.mobile-menu-section.is-open .mobile-menu-trigger {
    background: var(--color-brand);
    color: var(--color-heading-inverse);
}
.mobile-menu-section.is-open .mobile-menu-trigger-icon::after { transform: rotate(0deg); }
.mobile-drawer .mobile-submenu {
    display: none;
    padding: var(--space-2) var(--space-5) var(--space-3);
}
.mobile-menu-section.is-open .mobile-submenu { display: block; }
.mobile-submenu li:last-child a { border-bottom: 0; }
.mobile-drawer-close {
    position: absolute; top: var(--space-4); right: var(--space-4);
    background: none; border: none; font-size: var(--fs-2xl); line-height: 1;
    width: 44px; height: 44px; cursor: pointer;
}
.mobile-overlay {
    position: fixed; inset: 0; background: rgba(15, 30, 50, 0.4);
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    z-index: var(--z-drawer);
}
.mobile-overlay.is-open { opacity: 1; visibility: visible; }
body.has-mobile-menu { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    background: var(--color-primary-soft);
    padding: var(--space-20) 0 var(--space-12);
    position: relative;
    overflow: hidden;
}
.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}
.hero-content h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    color: var(--color-heading);
    margin-bottom: var(--space-6);
}
.hero-content p.lead {
    font-size: var(--fs-lg);
    color: var(--color-secondary);
    margin-bottom: var(--space-8);
    max-width: 520px;
}
.hero-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* Page hero (interior pages) */
.page-hero {
    background: var(--color-primary-soft);
    padding: var(--space-16) 0 var(--space-12);
    text-align: center;
}
.page-hero h1 { margin-bottom: var(--space-3); }
.page-hero p { color: var(--color-secondary); max-width: 680px; margin: 0 auto; font-size: var(--fs-body-lg); }
.breadcrumbs { color: var(--color-muted); font-size: var(--fs-utility); margin-bottom: var(--space-3); }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs .sep { margin: 0 0.5rem; opacity: 0.6; }

/* --------------------------------------------------------------------------
   Card / service grid
   -------------------------------------------------------------------------- */
.service-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex; flex-direction: column;
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.service-card-image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-soft); }
.service-card-image img { width: 100%; height: 100%; object-fit: cover; }
.service-card-body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.service-card h3 { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.service-card p { margin-bottom: var(--space-4); flex: 1; }
.service-card .card-link { color: var(--color-primary); font-weight: 600; font-size: var(--fs-utility); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.service-card .card-link:hover { letter-spacing: var(--ls-wide); }

/* Icon service card - centered icon chip + heading + copy + link. Mirrors the
   North Hill home "Our Services" grid. Distinct from the image .service-card so
   image cards elsewhere are untouched. Composes inside .grid.grid-3. */
.icon-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}
.icon-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.icon-card .icon-chip {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-4);
    background: var(--color-primary-soft);
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}
.icon-card .icon-chip svg { width: 28px; height: 28px; }
.icon-card h3 { font-size: var(--fs-xl); margin-bottom: var(--space-2); color: var(--color-heading); }
.icon-card p { font-size: var(--fs-sm); color: var(--color-text); flex: 1; margin: 0 0 var(--space-4); }
.icon-card .card-link {
    color: var(--color-accent-text);
    font-weight: 700;
    font-size: var(--fs-utility);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    text-decoration: none;
    margin-top: auto;
}
.icon-card .card-link:hover { color: var(--color-accent-text); text-decoration: underline; }
.icon-card--cta {
    background: var(--color-bg-inverse);
    border-color: var(--color-bg-inverse-soft);
}
.icon-card--cta .icon-chip {
    background: color-mix(in srgb, var(--color-white) 12%, transparent);
    color: var(--color-accent-on-dark);
}
.icon-card--cta h3,
.icon-card--cta p,
.icon-card--cta .card-link {
    color: var(--color-heading-inverse);
}
.icon-card--cta .card-link:hover {
    color: var(--color-accent-on-dark);
}

/* --------------------------------------------------------------------------
   Value props - editorial 5-column proof strip below the home hero.
   Section header + numbered (01-05) columns with hairline dividers.
   No icons, no boxes - reads like a magazine spread.
   -------------------------------------------------------------------------- */
.value-props {
    background: var(--color-bg);
    padding: var(--space-24) 0;
}
.value-props.surface-soft {
    background: var(--color-bg-soft);
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}
.value-props.surface-white {
    background: var(--color-bg);
}
.value-props-header {
    max-width: 720px;
    margin: 0 auto var(--space-12);
    text-align: center;
}
.value-props-header h2 {
    color: var(--color-heading);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    margin: 0;
    font-weight: 700;
    text-wrap: balance;
}
.value-props-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
}
.value-prop {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    background: transparent;
}
/* Hover surface so the lifted card (shadow + border, see polish section) reads
   as a proper padded card instead of content hugging the shadow edges. */
.value-prop:hover { background: var(--color-bg); }
.value-prop .icon-chip {
    width: 56px;
    height: 56px;
    margin: 0 0 var(--space-2);
    background: var(--color-primary-soft);
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}
.value-prop .icon-chip svg { width: 28px; height: 28px; }
.value-prop-title {
    color: var(--color-heading);
    font-family: var(--font-display);
    font-size: var(--fs-body-lg);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    margin: 0;
}
.value-prop-desc {
    color: var(--color-text);
    font-size: var(--fs-meta);
    line-height: var(--lh-relaxed);
    margin: 0;
}

@media (max-width: 1100px) {
    .value-props-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .value-props { padding: var(--space-16) 0; }
    .value-props-header { margin-bottom: var(--space-10); }
    .value-props-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
}
@media (max-width: 480px) {
    .value-props-grid { grid-template-columns: 1fr; row-gap: var(--space-6); }
}

/* --------------------------------------------------------------------------
   Hero with background video. Used on home page. Video sits absolute behind
   .container; dark overlay keeps copy readable; form card stays opaque.
   -------------------------------------------------------------------------- */
.hero.has-video-bg { position: relative; overflow: hidden; background: var(--color-bg-inverse); }
.hero.has-video-bg .hero-video {
    position: absolute; inset: 0;
    overflow: hidden;
    z-index: var(--z-base);
}
.hero.has-video-bg .hero-video-el {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.05);
}
.hero.has-video-bg .hero-video-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(120deg, var(--color-overlay-dark) 0%, var(--color-overlay-dark-mid) 55%, var(--color-overlay-dark) 100%);
    z-index: var(--z-content);
}
.hero.has-video-bg .container { position: relative; z-index: var(--z-content); }
.hero.has-video-bg .hero-copy h1,
.hero.has-video-bg .hero-copy .lead,
.hero.has-video-bg .hero-copy .trust-strip li,
.hero.has-video-bg .hero-copy .trust-strip li strong,
.hero.has-video-bg .hero-copy .hero-cta-anchor { color: var(--color-heading-inverse); }
.hero.has-video-bg .hero-copy .eyebrow,
.hero.has-video-bg .hero-copy .trust-strip li::before { color: var(--color-accent-on-dark); }

/* --------------------------------------------------------------------------
   Doctor intro (home) - layout owned by .doctor-grid, NOT the container.
   Portrait left, copy right with bullets + dual CTAs.
   -------------------------------------------------------------------------- */
.doctor-portrait {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 11;
    background: var(--color-bg-soft);
    box-shadow: var(--shadow-md);
    position: relative;
}
.doctor-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Doctor block typography - tightened for readability. Eyebrow → name H2 →
   subtitle (specialty) → lead sentence → 4 short bullets → CTA row. */
.doctor-copy .doctor-title {
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--fs-base);
    margin: 0 0 var(--space-5);
    letter-spacing: var(--ls-normal);
}
.doctor-copy .doctor-lead {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
    color: var(--color-text);
    margin: 0 0 var(--space-6);
}
.doctor-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8);
    display: grid;
    gap: var(--space-3);
}
.doctor-bullets li {
    position: relative;
    padding-left: var(--space-8);
    color: var(--color-heading);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    font-weight: 500;
}
.doctor-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-pill);
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 10.5l3 3 7-7' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat,
        var(--color-primary);
}
.doctor-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 880px) {
    .doctor-portrait { aspect-ratio: 16/10; }
}

/* --------------------------------------------------------------------------
   Location cards - layout owned by .locations-grid (.grid.grid-2),
   NOT the container. The container stays a plain block so the section
   header above + the locations grid below render at full width.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */
.contact-block .container {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--space-12);
    align-items: flex-start;
}
.contact-info h2 { margin-bottom: var(--space-4); }
.contact-info .lead { font-size: var(--fs-body-lg); margin-bottom: var(--space-6); color: var(--color-secondary); }
.contact-info ul { list-style: none; padding: 0; }
.contact-info li { padding-left: 1.5rem; position: relative; margin-bottom: var(--space-2); }
.contact-info li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--color-primary); font-weight: 700; }

.contact-form {
    background: var(--color-bg);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}
.contact-form h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-6); }
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field.required label::after { content: ' *'; color: var(--color-error); }
.form-actions .btn { width: 100%; }
.form-recaptcha-note { font-size: var(--fs-xs); color: var(--color-muted); margin-top: var(--space-3); text-align: center; }

/* --------------------------------------------------------------------------
   Content prose (single page / post body)
   -------------------------------------------------------------------------- */
.prose { max-width: 72ch; margin: 0 auto; }
.prose h1 { font-size: var(--fs-4xl); margin-bottom: var(--space-6); }
.prose h2 { font-size: var(--fs-3xl); margin-top: var(--space-10); margin-bottom: var(--space-4); }
.prose h3 { font-size: var(--fs-2xl); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose p { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.prose ul li, .prose ol li { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--radius-md); margin: var(--space-6) 0; }
.prose blockquote { border-left: 3px solid var(--color-primary); padding-left: var(--space-4); margin: var(--space-6) 0; color: var(--color-secondary); font-style: italic; }

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.post-card { background: var(--color-bg); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); display: flex; flex-direction: column; }
.post-card .thumb { aspect-ratio: 16 / 10; background: var(--color-bg-soft); overflow: hidden; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.post-card .meta { font-size: var(--fs-xs); color: var(--color-muted); }
.post-card h3 { font-size: var(--fs-xl); margin: 0; }
.post-card .excerpt { font-size: var(--fs-sm); flex: 1; }
.post-card .read-more { color: var(--color-primary); font-weight: 600; font-size: var(--fs-utility); text-transform: uppercase; letter-spacing: var(--ls-wide); }

/* --------------------------------------------------------------------------
   Service hub (Children's Dentistry / Orthodontics parent pages)
   -------------------------------------------------------------------------- */
.service-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }

/* --------------------------------------------------------------------------
   Proof strip - sits between the hero and the first content section on hub
   pages. Four credibility chips, no images, brand tokens only.
   -------------------------------------------------------------------------- */
.proof-strip {
    background: var(--color-bg-soft);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-12) 0;
}
.proof-strip.surface-white {
    background: var(--color-bg);
}
.proof-strip.surface-white .proof-strip-item {
    background: var(--color-bg-soft);
}
.proof-strip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
}
.proof-strip-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    min-width: 0;
}
.proof-strip-item .icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}
.proof-strip-item .icon-chip svg {
    width: 24px;
    height: 24px;
}
.proof-strip-item .proof-strip-logo {
    display: inline-flex;
    align-items: center;
    height: 48px;
    margin-bottom: var(--space-2);
}
.proof-strip-item .proof-strip-logo img {
    display: block;
    max-height: 100%;
    width: auto;
}
.proof-strip-label {
    font-weight: 700;
    color: var(--color-heading);
    font-size: var(--fs-base);
    line-height: var(--lh-tight);
}
.proof-strip-sub {
    color: var(--color-text);
    font-size: var(--fs-utility);
    line-height: var(--lh-normal);
}
@media (max-width: 900px) {
    .proof-strip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .proof-strip-list { grid-template-columns: 1fr; gap: var(--space-4); }
    .proof-strip { padding: var(--space-8) 0; }
}

/* --------------------------------------------------------------------------
   Contact "Three Ways to Reach Us" - replaces the duplicate appointment form
   on /contact/. Three icon cards: call, callback (anchors back to hero form),
   visit (anchors to locations below).
   -------------------------------------------------------------------------- */
.contact-ways-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.contact-way {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.contact-way:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}
.contact-way-icon {
    width: 56px; height: 56px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-2xl);
    margin: 0 auto var(--space-4);
}
.contact-way h3 { color: var(--color-heading); margin: 0 0 var(--space-2); font-size: var(--fs-xl); }
.contact-way p { color: var(--color-text); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); margin: 0 0 var(--space-4); }
.contact-way-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--fs-base);
    text-decoration: none;
    border-bottom: 2px solid var(--color-primary-soft);
    padding-bottom: 2px;
    transition: border-color var(--transition);
}
.contact-way-link:hover { border-bottom-color: var(--color-primary); }
.contact-fineprint {
    max-width: 720px;
    margin: var(--space-10) auto 0;
    text-align: center;
    color: var(--color-text);
    font-size: var(--fs-meta);
    line-height: var(--lh-relaxed);
}
.contact-fineprint strong { color: var(--color-heading); }
@media (max-width: 900px) { .contact-ways-grid { grid-template-columns: 1fr; gap: var(--space-4); } }

/* --------------------------------------------------------------------------
   Related treatments - auto-injected above the credentials block on
   sub-service pages. Sibling cards across the same hub.
   -------------------------------------------------------------------------- */
.related-treatments { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.related-treatments-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-10);
}
.related-treatments-header h2 { margin: 0; }
.related-treatments-grid {
    display: grid;
    gap: var(--space-5);
    margin-inline: auto;
}
.related-treatments-grid--count-1 { grid-template-columns: minmax(0, 28rem); justify-content: center; }
.related-treatments-grid--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.related-treatments-grid--count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related-treatment-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.related-treatment-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}
.related-treatment-media {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-soft);
    overflow: hidden;
}
.related-treatment-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.related-treatment-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
}
.related-treatment-card h3 {
    color: var(--color-heading);
    font-size: var(--fs-lg);
    margin: 0;
}
.related-treatment-card p {
    color: var(--color-text);
    font-size: var(--fs-meta);
    margin: 0;
    flex: 1;
}
.related-treatment-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--fs-meta);
    margin-top: var(--space-2);
}
@media (max-width: 900px) {
    .related-treatments-grid,
    .related-treatments-grid--count-1,
    .related-treatments-grid--count-2,
    .related-treatments-grid--count-3 {
        grid-template-columns: 1fr;
        max-width: 34rem;
    }
}

/* --------------------------------------------------------------------------
   CTA strip (used on interior pages)
   -------------------------------------------------------------------------- */

/* Footer styles are defined in the dark-footer block further down. */

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .hero .container { grid-template-columns: 1fr; gap: var(--space-8); }
    .hero-image { max-width: 540px; }
    .doctor-block .container { grid-template-columns: 1fr; }
    .contact-block .container { grid-template-columns: 1fr; }
    .locations-block .container { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .primary-nav { display: none; }
    .menu-toggle { display: inline-flex; }
    .header-phone { display: none; }
    .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
    .hero { padding: var(--space-12) 0 var(--space-10); }
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .footer-bottom { justify-content: center; text-align: center; }
    .form-row { grid-template-columns: 1fr; }
    .reviews-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .container { padding-left: var(--space-4); padding-right: var(--space-4); }
    .contact-form { padding: var(--space-5); }
    .topbar { font-size: var(--fs-xs); padding-left: var(--space-3); padding-right: var(--space-3); }
}

/* ==========================================================================
   New service-page patterns (added 2026-05-26 - covers classes used by
   page-childrens-dentistry, page-orthodontics, page-dental-surgeries and
   all sub-service templates)
   ========================================================================== */

/* Small eyebrow label above H1 */
/* Canonical eyebrow chip - ONE universal style used by every section
   (hero, value-props, services, doctor, reviews, related, etc.). A blue
   pill. Do not create section-specific eyebrow variants; override only the
   color for dark photo-hero backgrounds. */
.eyebrow {
    display: inline-block;
    background: var(--color-primary-tint);
    color: var(--color-primary-hover);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    margin: 0 0 1.1rem;
}

/* Hero pillars - the 4 brand differentiators under hero CTAs */
.hero-pillars li {
    padding:var(--space-3) var(--space-4) var(--space-3);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    position: relative;
    font-size: var(--fs-body-sm);
    color: var(--color-text);
    line-height: var(--lh-normal);
}
.hero-pillars li::before {
    content: "\2713";
    position: absolute;
    left: 1rem;
    top: 0.7rem;
    color: var(--color-primary);
    font-weight: 700;
}
.hero-pillars li strong {
    color: var(--color-heading);
    font-weight: 600;
}

/* "Why us" reason cards. Card treatment so flat h3+p sections never look
   like raw text blocks. Background contrast inverts based on section bg:
   white section uses a soft-tint card; soft section uses a white card. */
.reason {
    padding: 1.75rem;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.reason:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-primary-alpha-45);
    transform: translateY(-2px);
}
.reason h3 {
    color: var(--color-heading);
    font-size: var(--fs-lg);
    margin: 0 0 0.6rem;
    font-weight: 700;
    line-height: var(--lh-tight);
}
.reason p {
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    margin: 0;
}
/* On soft sections, invert card surfaces to white. */
.section.soft .reason { background: var(--color-bg); }

/* ── media-split: two-column copy + image band (About story, feature rows) ──
   Left = copy (eyebrow + h2 + prose + optional button), right = image.
   Stacks to single column below 880px. Reusable across content pages. */
.media-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}
.media-split-copy > * + * { margin-top: var(--space-4); }
.media-split-copy .eyebrow + h2 { margin-top: var(--space-3); }
.media-split-media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    max-height: none;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: block;
}
.product-media img {
    object-fit: contain;
    background: var(--color-bg);
    padding: var(--space-6);
}
.media-split--equal-height {
    align-items: stretch;
}
.media-split--equal-height .media-split-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.media-split--equal-height .media-split-media {
    display: flex;
    align-items: stretch;
}
.media-split--equal-height .media-split-media img {
    max-height: none;
}
.media-split--reverse .media-split-media { order: -1; }
@media (max-width: 880px) {
    .media-split { grid-template-columns: 1fr; gap: var(--space-8); }
    .media-split--reverse .media-split-media { order: 0; }
    .media-split-media img { max-height: none; }
    .media-split--equal-height .media-split-copy { display: block; }
}

/* ── value-card: icon + heading + copy card (why-us, benefits, trust rows) ──
   Composes the same surface language as .icon-card but tuned for prose blocks
   rather than a "learn more" link. Fills its grid cell edge to edge. */
.value-card {
    min-width: 0;
    padding: var(--space-8);
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.value-card .button-row .btn {
    white-space: normal;
    text-align: center;
}
.value-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-primary-alpha-45);
    transform: translateY(-2px);
}
.value-card .icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}
.value-card .icon-chip svg { width: 26px; height: 26px; }
.value-card h3 {
    color: var(--color-heading);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-tight);
    margin: 0 0 var(--space-2);
}
.value-card p {
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    margin: 0;
}
.section.soft .value-card { background: var(--color-bg); }
.value-card--emphasis {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    padding: var(--space-10);
    border-color: color-mix(in srgb, var(--color-primary) 36%, var(--color-line));
    background:
        linear-gradient(135deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-primary-soft) 42%, var(--color-bg)) 100%);
    box-shadow: var(--shadow-lg);
}
.value-card--emphasis::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 38%, var(--color-primary)));
}
.value-card--emphasis:hover {
    border-color: var(--color-primary-alpha-45);
    box-shadow: var(--shadow-lg);
}
.value-card--emphasis .icon-chip {
    width: 64px;
    height: 64px;
    background: var(--color-bg-inverse);
    color: var(--color-heading-inverse);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-6);
}
.value-card--emphasis .icon-chip svg {
    width: 32px;
    height: 32px;
}
.value-card--emphasis h3 {
    max-width: 16ch;
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-4);
    text-wrap: balance;
}
.value-card--emphasis p {
    max-width: 48ch;
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
}
@media (max-width: 640px) {
    .value-card--emphasis {
        min-height: auto;
        padding: var(--space-8);
    }
    .value-card--emphasis h3 {
        font-size: var(--fs-xl);
    }
}

/* FAQ accordion: the canonical style is the card-style `.faq-list .faq-item`
   block (search "FAQ - canonical"). Page FAQs render via partials/faq-list.php;
   blog article FAQs use partials/faq-group.php (`.faq-list summary` + .faq-body).
   No generic `.faq-item` rules here - they previously conflicted. */

/* Button safety defs (in case main.css doesnt define these yet) */
.btn-lg {
    padding:var(--space-3);
    font-size: var(--fs-base);
}
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Page hero polish (already exists but ensure consistent spacing) */
.page-hero .hero-cta {
    margin-top: 1.25rem;
}

/* ==========================================================================
   v2 DESIGN UPGRADE (2026-05-27) - hero photo, video embed, real service
   images, top bar, premium cards, reviews + locations polish
   ========================================================================== */

/* Top bar (trust signals, above header) */
.top-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
}
.top-bar-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.top-bar-item::before { content: "\2713"; opacity: 0.85; font-weight: 700; }
.top-bar-sep { opacity: 0.5; }
@media (max-width: 640px) {
    .top-bar { font-size: var(--fs-eyebrow); padding:var(--space-2); }
    .top-bar-sep { display: none; }
}

/* Hero with background image */
.hero.hero-image {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-white);
    padding: 96px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-inner { width: 100%; }
.hero-content-centered { text-align: center; max-width: 920px; margin: 0 auto; }
.hero h1 {
    color: var(--color-white);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.1;
    margin: 0 0 1.25rem;
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
    letter-spacing: var(--ls-tight);
}
.hero .lead {
    color: rgba(255, 255, 255, 0.95);
    font-size: var(--fs-xl);
    line-height: var(--lh-relaxed);
    margin: 0 0 2.25rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.hero-eyebrow {
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    margin: 0 0 1rem;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.hero-cta {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    padding:var(--space-4);
    box-shadow: 0 4px 16px var(--color-primary-alpha-35);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--color-primary-alpha-45);
}
.btn-outline-light {
    background: transparent;
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.85);
    padding:var(--space-3);
    transition: background 0.18s ease, border-color 0.18s ease;
}
.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: white;
    color: white;
}
@media (max-width: 640px) {
    .hero.hero-image { padding: 64px 0; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { width: 100%; text-align: center; }
}

/* Intro paragraph */
.intro-section { padding: 4rem 0 3rem; }
.intro-paragraph {
    font-size: var(--fs-xl);
    line-height: var(--lh-relaxed);
    color: var(--color-text);
    max-width: 800px;
    margin: 0 auto;
}
.intro-paragraph strong { color: var(--color-heading); }
.text-center { text-align: center; }

/* Service cards with hero image */

/* Doctor block with Wistia video */
.doctor-eyebrow {
    color: var(--color-primary);
    font-size: var(--fs-utility);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    margin: 0 0 0.5rem;
    font-weight: 600;
}
.doctor-copy p strong { color: var(--color-heading); }
@media (max-width: 880px) {
    .doctor-grid { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* Locations upgrade */

/* Section spacing polish */
.container.narrow { max-width: var(--container-narrow); }

/* ==========================================================================
   v2 FIXES (2026-05-27) - hero video, kill hero border-radius, style
   existing header.php .topbar instead of duplicate top-bar
   ========================================================================== */

/* Kill the rounded corners on the hero (the existing .hero-image rule was
   adding border-radius which made no sense for a full-width hero) */
.hero, .hero-image, .hero-video {
    border-radius: 0 !important;
    overflow: hidden;
}

/* Full-bleed video hero */
.hero.hero-video {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-white);
    padding: 96px 0;
    overflow: hidden;
    background: var(--color-bg-inverse);
}
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: var(--z-base);
    pointer-events: none;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 39, 56, 0.55) 0%, rgba(15, 39, 56, 0.45) 100%);
    z-index: var(--z-content);
    pointer-events: none;
}
.hero-video .hero-inner { position: relative; z-index: var(--z-content); }

/* Style the EXISTING header.php .topbar (single source of truth) */
@media (max-width: 640px) {
    .topbar { font-size: var(--fs-eyebrow); padding:var(--space-2); line-height: var(--lh-normal); }
}

/* Hide the unused .top-bar class (no-op, but defensive in case any markup
   slips through) */

/* ==========================================================================
   v3 (2026-05-27) - North-Hill-style 2-column hero with callback form
   card, About video section, why-list, action-block, form-band, footer CTA
   on every page. Used by cpi_page_hero() helper.
   ========================================================================== */

/* Reset .hero rules from earlier that assumed white text on dark hero image */

/* The form card on the right side of the hero
   ------------------------------------------------------------------------ */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.form-field label span { color: var(--color-error); margin-left: 2px; }
.form-field input::placeholder { color: var(--color-muted); }
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }
.form-actions { margin-top: 0.5rem; }
.btn-full { width: 100%; display: block; text-align: center; }
.form-status {
    margin: 0 0 1rem;
    padding:var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--fs-meta);
    line-height: var(--lh-normal);
}
.form-status--success {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
}
.form-status--error,
.form-status--invalid {
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error-border);
}

/* About section (split video + copy)
   ------------------------------------------------------------------------ */
@media (max-width: 880px) {
    .about-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* Why list - checkmark bullets used in About and form-band copy
   ------------------------------------------------------------------------ */

/* Form band (mid-page CTA - gradient bg with copy + form card)
   ------------------------------------------------------------------------ */

/* Eyebrow inside form-band-copy uses light pill */

/* Responsive
   ------------------------------------------------------------------------ */
@media (max-width: 980px) {
    .hero.hero-split .wrap,
    .form-band .wrap {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
    .hero-form-card,
    .form-band-card {
        justify-self: stretch;
        max-width: 100%;
    }
}
@media (max-width: 640px) {
    .hero.hero-split { padding: 2.5rem 0 2.5rem; }
    .hero.hero-split h1 { font-size: var(--fs-3xl); }
    .hero.hero-split .lead {
        font-size: 1.0625rem;
        line-height: 1.42;
    }
    .hero.hero-split .hero-cta { flex-direction: column; align-items: stretch; }
    .hero.hero-split .hero-cta .btn { width: 100%; }
    .form-band { padding: 3rem 0; }
    .form-band-card,
    .hero-form-card { padding:var(--space-6) var(--space-5); }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .about-block { padding: 3rem 0; }
    .about-grid { gap: var(--space-6); }
}

/* Service pages: kill the existing white-on-dark .hero rules from earlier
   that get inherited because the new hero is .hero.hero-split */
.hero.hero-split.hero-image { background-image: none !important; }

/* ==========================================================================
   v1.2.4 utility classes (2026-05-27) - extracted from previously inline
   style attributes so all styling lives in CSS.
   ========================================================================== */

/* Footer brand phone line */

/* Mobile drawer footer (Call + Book buttons stack) */
.mobile-drawer-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: var(--space-3);
    flex-direction: column;
}

/* About-page gallery - portrait images cropped to landscape so 3-col looks
   balanced instead of tall portrait towers */
.about-gallery img {
    border-radius: var(--radius-lg);
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    display: block;
    box-shadow: var(--shadow-sm);
}
.about-trust {
    max-width: 760px;
    margin: 2.5rem auto 0;
    text-align: center;
}

/* Contact-page Call us link */
.contact-call { margin-top: 1.5rem; }
.contact-call-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--fs-lg);
}

/* Single post meta + post-nav */
.post-meta {
    color: var(--color-muted);
    font-size: var(--fs-small);
}
.post-nav {
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.post-nav-next { text-align: right; }

/* page.php CTA strip buttons (also used by partials/cta-strip.php) */
.cta-strip-buttons {
    display: inline-flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

/* 404 page centred prose + action spacing */
.error-404 { text-align: center; }
.error-404-action { margin-top: 2rem; }

/* Locations grid mobile collapse - replaces the inline <style> block in
   partials/locations.php */
@media (max-width: 1024px) {
    .locations-grid { grid-template-columns: 1fr !important; }
}

/* FAQ section narrow container utility */
.faq-section .container.narrow,
.faq-section .container {
    max-width: var(--container-narrow);
}

/* Responsive grid collapse - was previously forcing 3-col / 2-col on phone
   ------------------------------------------------------------------------ */
@media (max-width: 880px) {
    .grid.grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .grid.grid-3,
    .grid.grid-2,
    .grid.grid-4 { grid-template-columns: 1fr; }
    .locations-grid { grid-template-columns: 1fr; }
}
/* Doctor block + about block also collapse on tablet */
@media (max-width: 880px) {
    .doctor-grid { grid-template-columns: 1fr !important; gap: var(--space-8); }
}

/* ==========================================================================
   v1.2.0 (2026-05-27) - top bar polish, hero CTA anchor, reduced-motion,
   eyebrow text wrap control
   ========================================================================== */

/* Top bar: pipe-separated items with inline check marks */
@media (max-width: 640px) {
    .topbar .container { gap: 0.25rem 0.6rem; font-size: var(--fs-eyebrow); }
    .topbar-sep { display: none; }
}

/* Hero "or request a callback" anchor under primary CTA */
/* Hide the "Or request a callback" anchor on desktop (form is right there)
   and surface it on tablet/mobile where the form is below the fold */
@media (min-width: 981px) {
    .hero.hero-split .hero-cta-anchor { display: none; }
}

/* Cap eyebrow pill width and keep it tidy when text is long */
.hero.hero-split .hero-copy .eyebrow,
.about-copy .eyebrow,
.form-band-copy .eyebrow {
    max-width: 100%;
    white-space: normal;
}

/* Lazy iframe placeholders - prevent flash of empty gray box while map /
   Wistia iframes load. Subtle brand-tint gradient + skeleton sweep. */
.location-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(65,182,230,0.08) 0, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(65,182,230,0.06) 0, transparent 45%);
    pointer-events: none;
}

/* About-media fallback poster - prevents the dark navy flash before the
   muted-autoplay video paints its first frame */

/* Tablet hero polish - when hero collapses to 1-col below 980px, the form
   card was stretching full container width and looked oversized. Cap it
   and centre it. Also tighten the hero top/bottom padding so the page
   does not feel sparse on tablet. */
@media (max-width: 980px) {
    .hero.hero-split { padding: 2.5rem 0 2.5rem; }
    .hero.hero-split .wrap { gap: var(--space-8); }
    .hero-form-card,
    .form-band-card {
        justify-self: center;
        max-width: 520px;
    }
}

/* Thank-you page card */
.hero-thanks .hero-thanks-card { text-align: center; }
.thanks-checkmark {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-heading-inverse);
    font-size: var(--fs-4xl);
    line-height: 72px;
    text-align: center;
    margin: 0 auto 1rem;
    box-shadow: 0 6px 20px var(--color-primary-alpha-35);
}
.thanks-next {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 1rem;
    text-align: left;
    display: grid;
    gap: 0.55rem;
}
.thanks-next li {
    position: relative;
    padding-left: 1.5rem;
    font-size: var(--fs-body-sm);
    color: var(--color-text);
    line-height: var(--lh-normal);
    margin: 0;
}
.thanks-next li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.5rem;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Credentials block (Dr. Isfeld E-E-A-T footer on service pages) */
.credentials-block {
    background: var(--color-bg-soft);
    padding: 3rem 0;
    border-top: 1px solid var(--color-border);
}
.credentials-card {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}
.credentials-photo img {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    flex-shrink: 0;
}
.credentials-body { flex: 1; }
.credentials-eyebrow {
    color: var(--color-primary-hover);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    margin: 0 0 0.3rem;
}
.credentials-body h3 {
    color: var(--color-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    margin: 0 0 0.3rem;
}
.credentials-title {
    color: var(--color-secondary);
    font-size: var(--fs-meta);
    font-weight: var(--fw-medium);
    margin: 0 0 0.6rem;
}
.credentials-bio {
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    margin: 0 0 0.6rem;
}
.credentials-link a {
    color: var(--color-primary-hover);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    text-decoration: underline;
}
@media (max-width: 640px) {
    .credentials-card { flex-direction: column; align-items: center; text-align: center; padding:var(--space-6); }
    .credentials-photo img { width: 80px; height: 80px; }
}

/* Image band - wide topical photo between hero and first section */
.image-band-section {
    padding: 0 0 4rem 0;
}
.image-band-section.soft { background: var(--color-bg-soft); padding-top: 4rem; }
.image-band {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
}
.image-band img {
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    display: block;
}
.image-band-caption {
    background: var(--color-bg-soft);
    color: var(--color-muted);
    font-size: var(--fs-sm);
    padding:var(--space-3);
    text-align: center;
}
@media (max-width: 640px) {
    .image-band img { max-height: 280px; }
    .image-band-section { padding-bottom: 3rem; }
}

/* Get Directions inline link */
.directions-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary-hover);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body-sm);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.directions-link:hover { color: var(--color-primary-dark); }
.directions-link span { font-size: 1.05em; }

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
    .about-video { display: none; }
    .service-card-image-hero:hover { transform: none; }
    .service-card-image-hero:hover .service-card-image { transform: none; }
    .review-card:hover { transform: none; }
    .btn-primary:hover { transform: none; }
    html { scroll-behavior: auto; }
}

/* =========================================================================
   v1.2.6 (2026-05-27) - PREMIUM PASS
   Full visual overhaul: premium typography, layered shadows, warm accent,
   real Wistia thumbnail, SVG stars, polished trust-strip cards.
   This block overrides earlier ones intentionally to upgrade the look.
   ========================================================================= */

/* Topbar gradient */
@media (max-width: 640px) {
    .topbar { font-size: var(--fs-xs); padding:var(--space-2); }
    .topbar .container { gap: 4px 10px; }
    .topbar-sep { display: none; }
}

/* Site header - white, refined, with subtle border */
.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* More breathing room above the logo/nav so the header isn't squished
       against the top of the hero (more hero background shows through). */
    padding-top: var(--space-8);
    padding-bottom: var(--space-5);
    gap: var(--space-6);
}
@media (max-width: 880px) {
    .site-header .container { padding-top: var(--space-5); padding-bottom: var(--space-4); }
}
.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}
.site-logo a { display: block; }
.site-logo img { height: 56px; width: auto; display: block; }
.primary-nav { display: flex; align-items: center; }
.primary-nav .menu { flex-wrap: nowrap; }
.primary-nav .menu {
    display: flex;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
}
.primary-nav .menu > li { margin: 0; }
.primary-nav .menu > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding:var(--space-2);
    color: var(--color-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-meta);
    border-radius: var(--radius-md);
    transition: background var(--transition), color var(--transition);
}
.primary-nav .menu > li > a:hover { background: transparent; color: var(--color-accent); }
.primary-nav .menu .caret { font-size: 0.6em; opacity: 0.7; transition: transform var(--transition); }
.primary-nav .menu > li:hover .caret,
.primary-nav .menu > li:focus-within .caret { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.header-phone {
    color: var(--color-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body-sm);
    padding:var(--space-2);
    border-radius: var(--radius-md);
    transition: background var(--transition), color var(--transition);
}
.header-phone:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); }
@media (max-width: 1120px) {
    .primary-nav { display: none; }
    .header-phone { font-size: var(--fs-utility); }
    .header-actions .btn { padding:var(--space-3); font-size: var(--fs-eyebrow); }
}

/* Buttons - premium pill, layered shadow on primary, warm accent for highlights */
/* ===========================================================
   BUTTON COMPONENT - canonical, token-driven, no per-context overrides.
   See DESIGN.md section 4 (Component inventory) for usage rules.
   - Default = gold (brand CTA). Variants: .btn-outline, .btn-white.
   - Sizes: .btn-sm, .btn (default), .btn-lg. Heights are token-locked.
   =========================================================== */
.btn {
    box-sizing: border-box;
    height: var(--btn-height);
    padding: 0 var(--btn-padding-x);
    /* Rounded-rect like North Hill (not full pill). */
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    border: 0;
    box-shadow: none;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    line-height: 1;
    white-space: nowrap;
}
.btn:hover {
    background: var(--color-accent-hover);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.btn.btn-outline {
    background: transparent;
    color: var(--color-primary-dark);
    border: 2px solid var(--color-primary);
}
.btn.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-bg);
    border-color: var(--color-primary);
}
.btn.btn-white {
    background: var(--color-bg);
    color: var(--color-primary-dark);
}
.btn.btn-white:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}
/* Variant overrides at .btn.<variant> specificity so they beat the base .btn
   background regardless of source order (base .btn is defined above). */
.btn.btn-outline-light {
    background: transparent;
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.85);
}
.btn.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--color-white);
    color: var(--color-white);
}
.btn.btn-primary {
    background: var(--color-accent);
    color: var(--color-white);
}
.btn.btn-primary:hover {
    background: var(--color-accent-hover);
    color: var(--color-white);
}
.btn.btn-sm {
    height: var(--btn-height-sm);
    padding: 0 var(--btn-padding-x-sm);
    font-size: var(--fs-xs);
}
.btn.btn-lg {
    height: var(--btn-height-lg);
    padding: 0 var(--btn-padding-x-lg);
    font-size: var(--fs-base);
}

/* HERO (split with form) - layout polish ==================================== */
.hero.hero-split {
    background: linear-gradient(160deg, var(--color-bg-soft) 0%, var(--color-bg-accent) 100%);
    padding: 5.5rem 0 5rem;
    position: relative;
    overflow: hidden;
}
.hero.hero-split::before {
    content: "";
    position: absolute;
    top: -120px; right: -120px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, var(--color-primary-alpha-16) 0%, rgba(65,182,230,0) 70%);
    border-radius: 50%;
    pointer-events: none;
}
.hero.hero-split::after {
    content: "";
    position: absolute;
    bottom: -160px; left: -100px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(65,182,230,0.12) 0%, rgba(65,182,230,0) 70%);
    border-radius: 50%;
    pointer-events: none;
}
/* When .hero-form-card is suppressed (hide_form_card arg), the hero copy
   spans the full row instead of leaving an empty right column. */
.hero.hero-split .wrap:not(:has(.hero-form-card)) {
    grid-template-columns: minmax(0, 1fr);
}
.hero.hero-split .wrap:not(:has(.hero-form-card)) .hero-copy {
    max-width: 780px;
}
.hero.hero-split .wrap {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 5rem;
    align-items: start;
    position: relative;
    z-index: var(--z-content);
}
.hero.hero-split .hero-copy { text-align: left; color: var(--color-text); }
/* Hero eyebrow uses the canonical .eyebrow chip. No one-off dot or bg here. */
.hero.hero-split h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    font-weight: var(--fw-black);
    color: var(--color-heading);
    margin: 0 0 var(--space-6);
    max-width: none; /* let it fill the column instead of jamming into 3 lines */
    text-shadow: none;
}
.hero.hero-split .lead {
    font-size: clamp(1.0625rem, 0.65vw + 0.95rem, 1.375rem);
    line-height: 1.42;
    color: var(--color-secondary);
    margin: 0 0 var(--space-8);
    max-width: 660px;
    text-shadow: none;
}
.hero.hero-split .lead-line {
    display: block;
}
.hero.hero-split .lead-tail {
    margin-top: var(--space-4);
}
/* Trust strip - simple vertical bullets for older templates. */
.hero.hero-split .trust-strip {
    list-style: none;
    padding: 0;
    margin: 0 0 1.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 560px;
    font-size: var(--fs-sm);
    color: var(--color-text);
}
.hero.hero-split .trust-strip li {
    position: relative;
    padding-left: 1.1rem;
    margin: 0;
    line-height: var(--lh-normal);
}
.hero.hero-split .trust-strip li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
}
.hero.hero-split .trust-strip li strong {
    color: var(--color-heading);
    font-weight: 700;
    margin-right: 4px;
}
.hero.hero-split .hero-cta {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.hero.hero-split .hero-cta .btn { padding:var(--space-4); }

/* Hero form card - premium card, layered shadow */
.hero-form-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding:var(--space-8) var(--space-8);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-line);
    max-width: 460px;
    width: 100%;
    justify-self: end;
    position: relative;
}
/* removed gradient border (was using amber) */
.hero-form-card .hero-form-title {
    font-family: var(--font-display);
    color: var(--color-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    text-align: center;
    margin: 0 0 1.4rem;
    letter-spacing: var(--ls-tight);
    text-wrap: balance;
}

/* Form fields - premium */
.form-field { margin-bottom: 0.85rem; }
.form-field label {
    display: block;
    font-size: var(--fs-xs);
    color: var(--color-heading);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    margin-bottom: 6px;
    text-transform: uppercase;
}
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding:var(--space-3);
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-size: var(--fs-body-sm);
    color: var(--color-heading);
    line-height: var(--lh-tight);
    transition: border-color var(--transition), box-shadow var(--transition);
    font-family: inherit;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-alpha-16);
}
.form-actions .btn-full {
    width: 100%;
    padding: 1.05rem;
    /* Inherit base .btn hover behaviour (solid swap + translateY) for
       consistency with every other CTA on the site. */
}
.form-fineprint { font-size: var(--fs-xs); color: var(--color-muted); text-align: center; margin: 1rem 0 0; line-height: var(--lh-normal); }

/* Consent checkbox */
.form-consent { margin: 0.5rem 0 0.75rem; }
.form-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--fs-xs);
    color: var(--color-muted);
    line-height: var(--lh-normal);
}
.form-consent-label input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.15em;
    accent-color: var(--color-primary);
    width: 1em;
    height: 1em;
    cursor: pointer;
}

/* Inline thank-you message - sits directly under the submit button */
.form-thankyou {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md, 0.5rem);
    text-align: center;
}
.form-thankyou-message {
    font-size: var(--fs-sm);
    color: var(--color-primary-dark);
    line-height: var(--lh-normal);
    font-weight: 600;
    margin: 0;
}

/* SECTION SPACING + headers ================================================
   .section padding lives in the canonical .section rule near the end of the
   file (it consumes --section-py / --section-py-mobile). Do not override it
   here or in any media query - use the tokens instead. */
.section.soft { background: var(--color-bg-soft); }
.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}
/* .section-header .eyebrow inherits the canonical .eyebrow chip - no override. */
.section-header h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-display);
    color: var(--color-heading);
    margin: 0 0 1rem;
}
.section-header p {
    color: var(--color-secondary);
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
    margin: 0;
}

/* SERVICE CARDS (home page hero blocks) ===================================== */
.service-grid { gap: var(--space-8); }
.service-card-image-hero {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
}
.service-card-image-hero:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-alpha-45);
}
.service-card-image-link { display: block; overflow: hidden; line-height: 0; }
.service-card-image-hero .service-card-image {
    width: 100%;
    height: 260px;
    background-size: cover;
    background-position: center;
    transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.service-card-image-hero:hover .service-card-image { transform: scale(1.06); }
.service-card-image-hero .service-card-body { padding:var(--space-8) var(--space-8); display: flex; flex-direction: column; flex: 1; }
.service-card-image-hero h3 {
    font-size: var(--fs-2xl);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    color: var(--color-heading);
    margin: 0 0 0.75rem;
    line-height: var(--lh-tight);
}
.service-card-image-hero h3 a { color: inherit; }
.service-card-image-hero h3 a:hover { color: var(--color-primary-hover); }
.service-card-image-hero p { color: var(--color-text); margin: 0 0 1.5rem; line-height: var(--lh-relaxed); flex: 1; font-size: var(--fs-sm); }
.service-card-image-hero .card-link {
    color: var(--color-primary-hover);
    font-weight: var(--fw-bold);
    font-size: var(--fs-utility);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    align-self: flex-start;
    transition: gap var(--transition);
}
.service-card-image-hero .card-link:hover { color: var(--color-primary-dark); }

/* ABOUT VIDEO BLOCK - clean photo + minimal overlay ========================= */
/* About-media overlay removed in v1.2.8 - photo speaks for itself */
.why-list { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; display: grid; gap: 0.8rem; }
.why-list li {
    position: relative;
    padding-left: 2rem;
    color: var(--color-text);
    line-height: var(--lh-normal);
    font-size: var(--fs-sm);
    margin: 0;
}
.why-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 3px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 10.5l3 3 7-7' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat,
        linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    box-shadow: 0 2px 6px rgba(65,182,230,0.32);
}
.action-block { margin-top: 1.5rem; }

/* DOCTOR (Wistia) BLOCK - real thumbnail poster ============================ */
.doctor-block { padding: 6rem 0; background: var(--color-bg); }
.doctor-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-16);
    align-items: center;
}
/* .doctor-copy .eyebrow inherits the canonical .eyebrow chip - no override. */
.doctor-copy h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    color: var(--color-heading);
    margin: 0 0 1.25rem;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-display);
}
.doctor-copy p { color: var(--color-text); line-height: var(--lh-relaxed); margin: 0 0 1.25rem; font-size: var(--fs-base); }
@media (max-width: 880px) {
    .doctor-grid { grid-template-columns: 1fr !important; gap: var(--space-10); }
    .about-grid { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* REVIEWS - SVG stars, premium cards ======================================== */
.reviews-block,
.reviews-block.surface-soft { background: var(--color-bg-soft); }
.reviews-block.surface-white { background: var(--color-bg); }
/* Reviews header now uses the shared centered section-header pattern (chip +
   title spacing identical to Our Services), with the rating centered beneath. */
.reviews-header h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    color: var(--color-heading);
    margin: 0;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-display);
}
.reviews-rating {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.reviews-rating .score {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    color: var(--color-heading);
    line-height: 1;
    letter-spacing: var(--ls-tight);
}
.reviews-rating .reviews-meta { margin-top: 0; }
.stars {
    display: inline-block;
    color: var(--color-star);
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    min-width: 110px;
}
.stars::before {
    content: "";
    display: block;
    width: 110px; height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='20' viewBox='0 0 110 20'><defs><polygon id='s' points='10,2 12.4,7.4 18.5,8 13.7,12 15.2,17.8 10,14.8 4.8,17.8 6.3,12 1.5,8 7.6,7.4' fill='%23f4b323'/></defs><use href='%23s' x='0'/><use href='%23s' x='22'/><use href='%23s' x='44'/><use href='%23s' x='66'/><use href='%23s' x='88'/></svg>");
    background-repeat: no-repeat;
}
.review-card .stars::before { width: 100px; height: 18px; background-size: 100px 18px; }
.reviews-meta { font-size: var(--fs-utility); color: var(--color-muted); margin-top: 6px; font-weight: var(--fw-medium); }
/* Reviews: 3-up at desktop / 2 at tablet / 1 at mobile. With 5 reviews
   the last row has 2 cards which we center via justify-self so the section
   reads balanced instead of orphaned. */
.reviews-widget {
    max-width: var(--container);
    margin: var(--space-8) auto 0;
}
.reviews-widget .lc_reviews_widget {
    min-width: 100%;
    width: 100%;
    min-height: 420px;
    border: 0;
    display: block;
}
.review-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    max-width: 1180px;
    margin: var(--space-8) auto 0;
}
.review-cards--1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 540px;
}
.review-cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
}
.review-cards > .review-card:nth-child(3n+1):nth-last-child(2),
.review-cards > .review-card:nth-child(3n+1):nth-last-child(2) ~ .review-card {
    /* When exactly 2 cards remain in the last row, shift them to centre. */
    grid-column: span 1;
}
.review-cards > .review-card:nth-child(3n+1):nth-last-child(2) {
    grid-column-start: 1;
}
@media (max-width: 1024px) {
    .review-cards { grid-template-columns: repeat(2, 1fr); max-width: 820px; }
    .review-cards > .review-card:nth-child(3n+1):nth-last-child(2) { grid-column-start: auto; }
}
@media (max-width: 600px) {
    .review-cards { grid-template-columns: 1fr; max-width: 540px; }
}
.review-card {
    background: var(--color-bg);
    padding:var(--space-8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
    position: relative;
}
.review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-alpha-35);
}
.review-card .stars { margin-bottom: 1.1rem; }
.review-card .quote {
    color: var(--color-heading);
    line-height: var(--lh-relaxed);
    margin: 0 0 1.25rem;
    font-size: var(--fs-base);
    font-style: normal;
    flex: 1;
    font-weight: var(--fw-medium);
}
.review-card .reviewer { color: var(--color-muted); font-size: var(--fs-utility); margin: 0; font-weight: var(--fw-semibold); }

/* FORM BAND - mid-page CTA ================================================== */

/* LOCATIONS ================================================================ */
.locations-block { background: var(--color-bg); }

/* ── service-area: map + county coverage (mobile electrical contractor) ──── */
.service-area-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-12);
    align-items: stretch;
    margin-top: var(--space-10);
}
.service-area-map {
    display: grid;
    grid-template-rows: minmax(380px, 1fr) auto;
    gap: var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    min-height: 460px;
}
.service-area--compact-top {
    --section-py: var(--space-16);
}
.service-area-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
    filter: saturate(0.95) contrast(0.98);
}
.service-area-map-caption {
    margin: 0;
    padding: 0 var(--space-5) var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    text-align: center;
}
.service-area-body { display: flex; flex-direction: column; }
.service-area-body h3 {
    font-size: var(--fs-lg);
    color: var(--color-heading);
    margin: 0 0 var(--space-4);
}
.county-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2) var(--space-4);
}
.county-list li {
    font-size: var(--fs-sm);
    color: var(--color-text);
    padding-left: var(--space-5);
    position: relative;
}
.county-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.45em;
    width: 8px; height: 8px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
}
.service-area-note {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-5);
}
.service-area-cta {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}
.service-area-hq {
    font-size: var(--fs-sm);
    font-style: normal;
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-line);
    margin-top: auto;
}
.service-area-hq strong { color: var(--color-heading); }
@media (max-width: 880px) {
    .service-area-grid { grid-template-columns: 1fr; gap: var(--space-8); }
    .county-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .service-area-map {
        grid-template-rows: minmax(260px, auto) auto;
        min-height: 0;
    }
    .service-area-map iframe {
        min-height: 260px;
    }
}
.locations-grid { margin-top: 3rem; gap: var(--space-8); }
.location-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), border-color var(--transition);
}
.location-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary-alpha-35); }
.location-map {
    min-height: 280px;
    background:
        linear-gradient(120deg, rgba(65,182,230,0.12) 0%, rgba(65,182,230,0.20) 50%, rgba(65,182,230,0.12) 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.4) 0 22px, transparent 22px 44px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.4) 0 22px, transparent 22px 44px),
        var(--color-bg-accent);
}
.location-map iframe {
    width: 100%; height: 100%; min-height: 280px; border: 0; display: block;
}
.location-body { padding: var(--space-8); display: flex; flex-direction: column; flex: 1; }
.location-body h3 {
    margin: 0 0 0.3rem;
    color: var(--color-heading);
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
}
.location-name { color: var(--color-muted); margin-bottom: 1rem; font-size: var(--fs-meta); }
.location-address { font-style: normal; color: var(--color-text); margin: 0 0 1rem; line-height: var(--lh-relaxed); font-size: var(--fs-sm); }
.location-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary-hover);
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    margin: 0 0 1.5rem;
}
.location-phone:hover { color: var(--color-primary-dark); }
.location-hours {
    list-style: none;
    padding: 0;
    margin: var(--space-5) 0 1.5rem;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}
.location-hours li {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-line);
    font-size: var(--fs-meta);
    margin: 0;
}
.location-hours li:last-child { border-bottom: 0; }
.location-hours .day { color: var(--color-heading); font-weight: var(--fw-semibold); }
.location-hours .hrs { color: var(--color-text); }
.location-body > div:last-child { margin-top: auto; }

/* FOOTER - dark premium surface. All colors via inverse tokens so brand
   palette stays consistent and theme swaps cleanly. =========================== */
/* (Legacy footer block removed 2026-07-05 - it duplicated the canonical
   .site-footer rules further down and caused cascade drift. Single source of
   truth now lives in the "Footer (rebuilt 2026-07-05)" block below.) */

/* FAQ accordion - polished =================================================== */
.faq-section .container { max-width: var(--container); }
.faq-section .section-header h2 { text-align: center; }
.faq-list { display: grid; gap: 0.85rem; max-width: 900px; margin: 0 auto; }
.faq-list .faq-item {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 0;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.faq-list .faq-item:hover, .faq-list .faq-item[open] { box-shadow: var(--shadow-sm); border-color: var(--color-primary-alpha-35); }
.faq-list .faq-item summary {
    font-weight: var(--fw-bold);
    color: var(--color-heading);
    cursor: pointer;
    list-style: none;
    padding:var(--space-5) var(--space-12) var(--space-5);
    position: relative;
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    border-top: 0;
}
.faq-list .faq-item summary::-webkit-details-marker { display: none; }
.faq-list .faq-item summary::after {
    content: "";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%232ea0d0' stroke-width='2.4' stroke-linecap='round'><path d='M3 7h8M7 3v8'/></svg>") center/14px no-repeat;
    transition: transform var(--transition), background var(--transition);
}
.faq-list .faq-item[open] summary::after {
    background: var(--color-primary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'><path d='M3 7h8'/></svg>") center/14px no-repeat;
    transform: translateY(-50%) rotate(180deg);
}
.faq-list .faq-item > p {
    padding: 0 1.5rem 1.25rem;
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    margin: 0;
}

/* CTA STRIP ================================================================= */
.cta-strip {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: var(--color-heading-inverse);
    padding: 4.5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-strip::after {
    content: "";
    position: absolute;
    top: -50%; left: -10%;
    width: 60%; height: 200%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.14) 0, transparent 60%);
    pointer-events: none;
}
.cta-strip h2 {
    color: var(--color-heading-inverse);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    margin: 0 0 0.85rem;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-display);
    position: relative;
}
.cta-strip p { color: rgba(255,255,255,0.92); margin: 0 0 1.85rem; font-size: var(--fs-lg); position: relative; }
.cta-strip .hero-cta { justify-content: center; gap: var(--space-4); flex-wrap: wrap; display: flex; position: relative; }
.cta-strip .btn-outline { color: var(--color-heading-inverse) !important; border-color: rgba(255,255,255,0.6); background: transparent; }
.cta-strip .btn-outline:hover { background: var(--color-bg); color: var(--color-primary-hover) !important; }

/* Hero cta anchor (mobile "or request a callback") */
.hero.hero-split .hero-cta-anchor {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-primary-hover);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.hero.hero-split .hero-cta-anchor:hover { color: var(--color-primary-dark); }
@media (min-width: 981px) {
    .hero.hero-split .hero-cta-anchor { display: none; }
}

/* PAGE HERO (sub-page header still using .hero.hero-split - handled above) */

/* RESPONSIVE ROLLUP ======================================================= */
@media (max-width: 980px) {
    .hero.hero-split .wrap,
    .form-band .wrap { grid-template-columns: 1fr; gap: var(--space-10); }
    .hero-form-card, .form-band-card { justify-self: center; max-width: 520px; }
    /* .section padding handled by canonical token rule (--section-py-mobile). */
    .about-block, .doctor-block { padding: var(--space-16) 0; }
}
@media (max-width: 640px) {
    .hero.hero-split h1 { font-size: var(--fs-3xl); }
    .hero.hero-split .lead {
        font-size: 1.0625rem;
        line-height: 1.42;
        margin-bottom: var(--space-6);
    }
    .hero.hero-split .trust-strip li { padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); }
    .hero.hero-split .hero-cta { flex-direction: column; align-items: stretch; }
    .hero.hero-split .hero-cta .btn { width: 100%; }
    .form-band-card, .hero-form-card { padding: var(--space-8) var(--space-5) var(--space-5); }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .about-block, .doctor-block { padding: var(--space-12) 0; }
    .service-card-image-hero .service-card-image { height: 200px; }
    .reviews-rating .score { font-size: var(--fs-4xl); }
    .reviews-header { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* Force kill the older .hero-pillars styles (we use trust-strip now) */
.hero-pillars { display: none !important; }

/* Force the older inline-style .topbar overrides not to fight us */
.top-bar { display: none !important; }

/* =========================================================================
   v1.2.36 - Design system alignment pass
   Normalizes the mixed section eras into one clear page rhythm.
   ========================================================================= */

h1, h2, h3,
.hero h1,
.section-header h2,
.doctor-copy h2,
.reviews-header h2,
.cta-strip h2 {
    letter-spacing: 0;
}

.hero.hero-split {
    background: var(--color-bg-accent);
    padding: var(--space-20) 0;
}

.hero.hero-split::before,
.hero.hero-split::after {
    display: none;
}

.hero.has-video-bg .hero-video-overlay {
    background: linear-gradient(90deg, var(--color-overlay-dark) 0%, var(--color-overlay-dark-mid) 58%, var(--color-overlay-dark) 100%);
}

.hero.hero-split.has-video-bg .hero-copy .eyebrow {
    background: var(--color-line-inverse);
    color: var(--color-accent-on-dark);
}

.hero.hero-split .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    gap: var(--space-16);
    align-items: center;
}

.hero.hero-split h1 {
    font-size: var(--fs-h1);
}

.section-header h2,
.doctor-copy h2,
.reviews-header h2,
.cta-strip h2 {
    font-size: var(--fs-h2);
}

.hero.hero-split .hero-copy .eyebrow,
.section-header .eyebrow,
.doctor-copy .eyebrow,
.value-props-header .eyebrow {
    letter-spacing: var(--ls-eyebrow);
}

.hero.hero-split .lead {
    max-width: 660px;
}

.hero.hero-split .trust-strip {
    gap: var(--space-3);
}

.hero.hero-split .trust-strip li {
    padding: 0 0 0 var(--space-5);
    background: transparent;
}

.hero.hero-split .trust-strip li::before {
    top: 0.55rem;
}

.hero-form-card,
.service-card,
.service-card-image-hero,
.review-card,
.location-card,
.contact-way,
.faq-list .faq-item,
.credentials-card {
    border-radius: var(--radius-md);
}

/* Removed the duplicate .btn / .btn-outline override block (was redundant
   after canonical .btn definition above consumed --color-accent). Keep the
   shadow reset for the form actions which sit on a colored band. */
.header-actions .btn,
.form-actions .btn-full {
    box-shadow: none;
}

.section,
.doctor-block,
.value-props {
    padding: var(--space-20) 0;
}

.section.soft {
    background: var(--color-bg-soft);
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.section-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto var(--space-12);
}

.section-header p {
    max-width: 690px;
    margin-left: auto;
    margin-right: auto;
}

.locations-block .section-header,
.faq-section .section-header,
.section-header--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
/* Center the sub-paragraph inside centered headers (it carries its own
   max-width, so it needs auto side-margins to sit under the heading). */
.locations-block .section-header p,
.faq-section .section-header p,
.section-header--center p {
    margin-left: auto;
    margin-right: auto;
}

.value-props {
    border-bottom: 1px solid var(--color-line);
}

.value-props-header {
    margin-bottom: var(--space-12);
}

.service-grid {
    gap: var(--space-8);
}

.service-card {
    box-shadow: none;
}

.service-card:not(.service-card-image-hero) {
    border-top: 3px solid var(--color-primary);
}

.service-card:not(.service-card-image-hero):hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--color-primary);
}

.service-card:not(.service-card-image-hero) .service-card-body {
    padding: var(--space-6);
}

.service-card:not(.service-card-image-hero) h3 {
    font-size: var(--fs-lg);
    line-height: var(--lh-tight);
}

.service-card .card-link,
.related-treatment-link,
.directions-link {
    color: var(--color-primary-dark);
}

.reason {
    background: transparent;
    border: 0;
    border-left: 3px solid var(--color-primary);
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-1) 0 var(--space-1) var(--space-5);
}

.reason:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-primary-dark);
}

.section.soft .reason {
    background: transparent;
}

.proof-strip-label {
    font-size: var(--fs-sm);
}

.contact-ways-grid {
    gap: var(--space-5);
}

.contact-way {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    text-align: left;
    padding: var(--space-6);
    box-shadow: none;
}

.contact-way:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

.contact-way-icon {
    display: none;
}

.contact-way h3,
.contact-way p,
.contact-way-link {
    grid-column: 1;
}

.contact-way-link {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-primary-tint);
}

.reviews-header {
    align-items: flex-start;
}

.location-card {
    box-shadow: none;
}

/* Removed `.location-map { display: none }` override - Google Maps embeds
   are restored per 2026-05-29 ask. Canonical sizing lives at line 2150. */

.location-body {
    padding: var(--space-6);
}

.cta-strip {
    background: var(--color-bg-inverse);
}

.cta-strip::after {
    display: none;
}

.cta-strip .btn {
    background: var(--color-accent);
    color: var(--color-white) !important;
}

.cta-strip .btn-outline {
    background: transparent;
    color: var(--color-bg) !important;
    border-color: var(--color-line-inverse);
}

.cta-strip .btn-outline:hover {
    background: var(--color-bg);
    color: var(--color-bg-inverse) !important;
}
.cta-strip.cta-strip-light {
    background: var(--color-bg);
    color: var(--color-text);
}
.cta-strip.cta-strip-light h2 {
    color: var(--color-heading);
}
.cta-strip.cta-strip-light p {
    color: var(--color-text);
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}
.cta-strip.cta-strip-light .btn-outline {
    color: var(--color-heading) !important;
    border-color: var(--color-line);
}
.cta-strip.cta-strip-light .btn-outline:hover {
    background: var(--color-bg-soft);
    color: var(--color-heading) !important;
}

@media (max-width: 980px) {
    :root {
        --fs-h1: 2.45rem;
        --fs-h2: 2rem;
        --fs-h3: 1.25rem;
    }

    .hero.hero-split {
        padding: var(--space-12) 0;
    }

    .hero.hero-split .wrap {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .section,
    .doctor-block,
    .value-props {
        padding: var(--space-16) 0;
    }
}

@media (max-width: 640px) {
    :root {
        --fs-h1: 2rem;
        --fs-h2: 1.65rem;
        --fs-h3: 1.15rem;
    }

    .hero.hero-split {
        padding: var(--space-10) 0 var(--space-12);
    }

    .hero.hero-split h1 {
        font-size: var(--fs-h1);
    }

    .hero.hero-split .trust-strip li {
        padding: 0 0 0 var(--space-5);
    }

    .section,
    .doctor-block,
    .value-props {
        padding: var(--space-12) 0;
    }

    .section-header,
    .locations-block .section-header,
    .faq-section .section-header {
        text-align: center;
        margin-bottom: var(--space-8);
    }

    .contact-way { padding: var(--space-5); }

    .reviews-rating {
        align-items: flex-start;
    }
}

/* ===========================================================================
   v2: Transparent floating header, light-blue footer, hero bg-image,
   mobile sticky bottom bar.

   Pattern: North Hill. The header sits absolutely positioned on top of the
   hero band on every page. Once scrolled past the threshold, it gains a
   white surface + dark text. Two logo images are swapped via CSS so the
   light logo shows over hero, dark logo shows on solid white.
   =========================================================================== */

/* --- Header surface state ------------------------------------------------- */
.site-header {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
}
/* Static, no scroll behavior. Header is anchored at the top of the page
   over the hero band and scrolls away with content. North Hill pattern.
   Edge case: pages without a hero (404, search) get a white surface so the
   header chrome is readable on a plain background. */
body:not(.has-hero) .site-header {
    position: relative;
    background: var(--color-bg);
    box-shadow: var(--shadow-xs);
}

/* --- Header layout dimensions ------------------------------------------
   ONLY layout-specific dimensions live here. Font-size, letter-spacing,
   and weight all come from the canonical scale (--fs-sm, --ls-wide,
   --fw-bold). The bespoke per-primitive tokens are retired. */
:root {
    --header-action-height:    40px;
    --header-action-padding-x: var(--space-4);
    --header-action-radius:    var(--radius-pill);
    --header-actions-gap:      var(--space-3);

    /* Back-compat aliases (deprecated - new code uses --fs-sm / --ls-wide). */
    --header-action-font-size:     var(--fs-sm);
    --header-action-letter-spacing: var(--ls-wide);
    --header-nav-font-size:        var(--fs-sm);
    --header-nav-letter-spacing:    var(--ls-normal);
}

/* --- Header layout: 3-column grid (logo left | nav center | actions right)
   This is what gives true horizontal centering of the nav, matching North
   Hill. With justify-content: space-between, the middle item just sits
   between the outer two - it doesn't get centered in the bar. */
.site-header .container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-6);
}
.site-header .container > .site-logo { justify-self: start; }
.site-header .container > .primary-nav { justify-self: center; }
.site-header .container > .header-actions { justify-self: end; }
.header-actions { display: flex; align-items: center; gap: var(--header-actions-gap); }

/* --- Logo: emblem + wordmark side-by-side, no tagline -------------------
   Proportions: wordmark is the primary read; emblem is roughly 1.5x taller
   to accommodate the stacked R/E + flower. Both flex-centered vertically. */
.site-logo a,
.site-logo .site-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}
/* Single horizontal-lockup SVG (emblem + wordmark with optical-center
   alignment baked in). No runtime composition; no per-piece sizing. The
   sizing target is the whole lockup, height-driven. */
.site-logo .site-logo-img { height: calc(var(--space-12) + var(--space-2)); width: auto; }

/* Header is always transparent over a hero band, so the on-dark logo
   variant (gold poppy + white wordmark) shows everywhere. Light variant
   is only used on hero-less edge pages (404, search). Specificity bumped
   to .site-logo .site-logo-img--* so it matches the sizing rule and
   wins by source order. */
.site-logo .site-logo-img--dark  { display: block; }
.site-logo .site-logo-img--light { display: none; }
body:not(.has-hero) .site-logo .site-logo-img--dark  { display: none; }
body:not(.has-hero) .site-logo .site-logo-img--light { display: block; }

/* --- Nav links: canonical --fs-sm (14px). Same scale as phone + button. */
.primary-nav .menu > li > a,
.primary-nav > ul > li > a {
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-normal);
    font-weight: var(--fw-semibold);
    padding: var(--space-2) var(--space-3);
}

body.has-hero .primary-nav .menu > li > a,
body.has-hero .primary-nav > ul > li > a {
    color: var(--color-heading-inverse);
}
body.has-hero .primary-nav .menu > li > a:hover,
body.has-hero .primary-nav > ul > li > a:hover {
    background: transparent;
    color: var(--color-accent);
}
body.has-hero .menu-toggle .bar,
body.has-hero .menu-toggle .bar::before,
body.has-hero .menu-toggle .bar::after {
    background: var(--color-bg);
}

/* --- Phone link: inline text + icon, NO outline, NO background ----------
   North Hill pattern. The phone is a plain link, the gold pill is the
   only visual CTA in the header. */
.header-phone-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--color-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    line-height: 1;
    letter-spacing: var(--ls-normal);
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition);
}
.header-phone-btn:hover { color: var(--color-primary); background: transparent; border: 0; }
.header-phone-btn svg { flex: 0 0 auto; }
.header-phone-btn-label { white-space: nowrap; }
body.has-hero .header-phone-btn { color: var(--color-heading-inverse); }
body.has-hero .header-phone-btn:hover { color: rgba(255,255,255,0.75); }

/* Header book button: compact and typeset to match the nav links (same
   font-size/weight, no uppercase) so it doesn't dominate the header and the
   centered nav has room to sit in the middle. Stays a gold button, just smaller. */
.header-actions .header-book-btn {
    height: var(--btn-height-sm);
    padding: 0 var(--space-4);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-transform: none;
    letter-spacing: var(--ls-normal);
}
.header-actions .header-book-btn:hover {
    transform: none;
}

/* --- Mobile header chrome: hide nav + book button + phone label ----------
   Specificity bumped (.header-actions .header-book-btn) so it wins over
   the shared geometry token rule above. Hamburger toggle has to flip
   visible at the SAME breakpoint where the nav collapses (was 768px,
   leaving tablet 769-980 with no menu access at all). */
@media (max-width: 1120px) {
    .primary-nav { display: none; }
    /* Default hamburger color = dark heading (visible on solid white header).
       The body.has-hero rules earlier flip it to white over dark hero. */
    .menu-toggle { display: inline-flex; color: var(--color-heading); }
    .header-actions .header-book-btn { display: none; }
    .header-phone-btn-label { display: none; }
    .header-phone-btn {
        padding: 0;
        width: var(--header-action-height);
        height: var(--header-action-height);
        border-radius: 50%;
    }
    .site-logo .site-logo-img { height: var(--space-12); }
}

/* --- Hero with background image (replaces video bg) ---------------------- */
.hero.has-bg-image {
    position: relative;
    overflow: hidden;
    background: var(--color-primary-dark);
}
.hero.has-bg-image .hero-bg {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
}
.hero.has-bg-image .hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
    /* Slow Ken-Burns zoom - makes the static hero feel alive. Very subtle
       (1.0 -> 1.08 over 20s, ping-pong) so it never distracts. */
    animation: cpi-hero-zoom 24s ease-in-out infinite alternate;
    transform-origin: center 45%;
    will-change: transform;
}
@keyframes cpi-hero-zoom {
    from { transform: scale(1.0); }
    to   { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .hero.has-bg-image .hero-bg-img { animation: none; }
}

/* Motion hero: the video sits over the poster image (same cover fit). When a
   video is present, the image is the instant poster and the CSS zoom is off
   (the video carries the motion). Video fades in once it can play. */
.hero.has-bg-image .hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
    opacity: 0;
    transition: opacity 600ms ease;
    z-index: 1;
}
.hero.has-hero-video .hero-bg-video.is-ready { opacity: 1; }
.hero.has-hero-video .hero-bg-img { animation: none; }
.hero.has-bg-image .hero-bg-overlay { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
    .hero.has-bg-image .hero-bg-video { display: none; }
}
.hero.has-bg-image .hero-bg-overlay {
    position: absolute;
    inset: 0;
    /* Static photo heroes use the standard O2 fade: a deep left-side text
       veil that transitions cleanly into the photo, plus a soft top scrim for
       the floating header. Home video gets a lighter override below. */
    background:
        linear-gradient(180deg, rgba(8,14,22,0.56) 0%, rgba(8,14,22,0) 24%),
        linear-gradient(90deg, rgba(7,13,21,0.96) 0%, rgba(7,13,21,0.88) 25%, rgba(7,13,21,0.60) 44%, rgba(7,13,21,0.22) 64%, rgba(7,13,21,0.10) 82%, rgba(7,13,21,0.22) 100%);
}
.hero.has-hero-video .hero-bg-overlay {
    background:
        linear-gradient(180deg, rgba(11,13,16,0.55) 0%, rgba(11,13,16,0) 22%),
        linear-gradient(90deg, rgba(14,16,19,0.88) 0%, rgba(14,16,19,0.62) 42%, rgba(14,16,19,0.18) 72%, rgba(14,16,19,0.30) 100%);
}
.hero.has-bg-image .container,
.hero.has-bg-image .wrap { position: relative; z-index: var(--z-content); }
.hero.has-bg-image .hero-copy h1,
.hero.has-bg-image .hero-copy h2,
.hero.has-bg-image .hero-copy .lead,
.hero.has-bg-image .hero-copy .trust-strip li,
.hero.has-bg-image .hero-copy .trust-strip li strong,
.hero.has-bg-image .hero-copy .hero-cta-anchor { color: var(--color-heading-inverse); }
.hero.has-bg-image .hero-copy .trust-strip li::before { color: var(--color-accent-on-dark); }
/* Eyebrow chip on the dark photo hero: translucent-white pill + white text so
   the same chip component stays legible over the navy overlay. */
.hero.has-bg-image .hero-copy .eyebrow,
.hero.has-video-bg .hero-copy .eyebrow {
    background: var(--color-line-inverse);
    color: var(--color-heading-inverse);
}
/* Match the North Hill hero headline size (clamp max 3.25rem). High specificity
   here intentionally wins over the older .hero h1 / .hero-split h1 rules.
   The closing-cta uses an h2 (never h1 mid-page) but should read identically. */
.hero.has-bg-image .hero-copy h1,
.hero.has-bg-image .hero-copy h2 {
    font-size: clamp(2.125rem, 5vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: 0;
    margin-bottom: var(--space-6);
}
/* Closing CTA: compact image-backed conversion band. No form, no bullets -
   just eyebrow + fixed-line H2 + lead + two actions. */
.closing-cta {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-inverse);
    padding-block: var(--space-24);
    text-align: center;
}
.closing-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: var(--z-content);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-footer-bg) 34%, transparent) 0%, color-mix(in srgb, var(--color-footer-bg) 48%, transparent) 100%),
        linear-gradient(90deg, color-mix(in srgb, var(--color-footer-bg) 48%, transparent) 0%, color-mix(in srgb, var(--color-footer-bg) 24%, transparent) 54%, color-mix(in srgb, var(--color-footer-bg) 42%, transparent) 100%);
}
.closing-cta-bg {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
}
.closing-cta-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
}
.closing-cta .container {
    position: relative;
    z-index: var(--z-content);
}
.closing-cta-inner {
    max-width: 64ch;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}
.closing-cta .eyebrow {
    color: var(--color-accent-on-dark);
    background: rgba(255, 255, 255, 0.10);
}
.closing-cta h2 {
    color: var(--color-white);
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: var(--lh-tight);
    margin: 0;
}
.closing-cta h2 span,
.generac-authority .section-header h2 span {
    display: block;
}
.closing-cta-lead {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--fs-lg);
    line-height: var(--lh-normal);
    max-width: 60ch;
    margin: 0;
}
.closing-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
.closing-cta-actions .btn {
    height: calc(var(--btn-height-lg) + var(--space-3));
    padding: 0 var(--space-10);
    font-size: var(--fs-lg);
}
@media (max-width: 640px) {
    .closing-cta { padding-block: var(--space-16); }
    .closing-cta-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; }
    .closing-cta-actions .btn { width: 100%; }
}
/* Home hero CTAs - North Hill style: subtle white buttons, Call first, kept
   low-prominence (the callback form card is the primary conversion). */
.hero.has-bg-image .hero-cta { gap: var(--space-3); }
.hero.has-bg-image .hero-cta .hero-cta-secondary { order: -1; }
.hero.has-bg-image .hero-cta .hero-cta-secondary.btn {
    background: var(--color-white);
    color: var(--color-bg-inverse);
    border: 2px solid var(--color-white);
}
.hero.has-bg-image .hero-cta .hero-cta-secondary.btn:hover {
    background: var(--color-bg-soft);
    border-color: var(--color-bg-soft);
    color: var(--color-bg-inverse);
}
.hero.has-bg-image .hero-cta .btn:not(.hero-cta-secondary) {
    background: transparent;
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.6);
}
.hero.has-bg-image .hero-cta .btn:not(.hero-cta-secondary):hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--color-white);
    color: var(--color-white);
}
/* Trust bullets stack into two columns like North Hill */
.hero.has-bg-image .trust-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-6);
}
@media (max-width: 560px) {
    .hero.has-bg-image .trust-strip { grid-template-columns: 1fr; }
}

/* Hero gets extra top padding so the floating header doesn't overlap copy */
.hero.hero-split { padding-top: 8rem; }
@media (max-width: 980px) {
    .hero.hero-split { padding-top: 6.5rem; }
}

/* ===========================================================================
   v4 (2026-05-29): Pre-footer CTA band + dark navy footer (NH pattern).
   Pre-footer renders on every page above the footer. Footer mirrors
   North Hill's 4-column layout (brand | services | ortho | company) with
   social + Built by Ad Blitz credit at the bottom.
   =========================================================================== */

/* --- Pre-footer CTA band ------------------------------------------------ */
.pre-footer-cta {
    background: var(--color-bg-accent);
    padding: var(--space-20) 0;
    border-top: 1px solid rgba(65,182,230,0.18);
}
.pre-footer-cta__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-16);
    align-items: center;
}
.pre-footer-cta__copy h2 {
    margin: var(--space-3) 0 var(--space-4);
}
.pre-footer-cta__copy p {
    color: var(--color-text);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-6);
}
.pre-footer-cta .check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}
.pre-footer-cta .check-list li {
    position: relative;
    padding-left: var(--space-8);
    color: var(--color-heading);
    font-weight: var(--fw-medium);
}
.pre-footer-cta .check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: var(--color-accent);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1f33' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.85rem 0.85rem;
}
@media (max-width: 980px) {
    .pre-footer-cta__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* --- Footer: dark premium four-column band ------------------------------ */
.site-footer {
    background-color: var(--color-footer-bg);
    background-image:
        repeating-linear-gradient(0deg, var(--color-grid-line-faint) 0, var(--color-grid-line-faint) 1px, transparent 1px, transparent 96px),
        repeating-linear-gradient(90deg, var(--color-grid-line-faint) 0, var(--color-grid-line-faint) 1px, transparent 1px, transparent 96px);
    color: var(--color-text-inverse);
    padding: var(--space-16) 0 var(--space-8);
    border-top: 0;
}
.site-footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: flex-start;
    gap: var(--space-10);
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--color-line-inverse);
}
.footer-brand-link { display: inline-block; }
.site-footer .footer-brand img {
    filter: none;
    display: block;
    height: auto;
    max-width: 240px;
    width: 100%;
    margin-bottom: var(--space-4);
}
.footer-brand-line {
    color: var(--color-text-inverse-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-4);
    max-width: 28ch;
}
.footer-brand-phone { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0; }
.footer-brand-phone a {
    color: var(--color-heading-inverse);
    text-decoration: none;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 2px;
    transition: border-color var(--transition);
}
.footer-brand-phone a:hover { border-color: var(--color-heading-inverse); }

.footer-social { display: flex; gap: var(--space-2); }
.footer-social-link {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--color-line-inverse);
    color: var(--color-text-inverse);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.footer-social-link:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-footer-bg);
}

.footer-col-title {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    /* Titles may be plain text (not links) - they must still read on the
       dark footer band, not inherit the light-surface heading color. */
    color: var(--color-heading-inverse);
}
.footer-col-title a {
    color: var(--color-heading-inverse);
    text-decoration: none;
    transition: color var(--transition);
}
.footer-col-title a:hover { color: var(--color-accent); }
.footer-nav-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.footer-nav-col ul a {
    color: var(--color-text-inverse-muted);
    text-decoration: none;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    transition: color var(--transition);
}
.footer-nav-col ul a:hover { color: var(--color-heading-inverse); }

.footer-bottom {
    padding-top: var(--space-6);
    display: grid;
    gap: var(--space-4);
    color: var(--color-text-inverse-muted);
    font-size: var(--fs-sm);
}
.footer-bottom__main,
.footer-bottom__legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}
.footer-bottom__copy {
    margin: 0;
}
.footer-bottom__legal {
    padding-top: var(--space-4);
    color: color-mix(in srgb, var(--color-text-inverse-muted) 88%, transparent);
    justify-content: space-between;
    gap: var(--space-8);
}
.footer-license-line {
    display: inline-block;
    color: color-mix(in srgb, var(--color-text-inverse-muted) 94%, transparent);
}
.footer-bottom__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
}
.footer-bottom__actions--credit {
    justify-content: flex-end;
}
.footer-credit-link {
    color: var(--color-text-inverse-muted);
    text-decoration: none;
    transition: color var(--transition);
    white-space: nowrap;
}
.footer-legal-link {
    color: var(--color-text-inverse-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition);
}
.footer-credit-link:hover { color: var(--color-heading-inverse); }
.footer-legal-link:hover { color: var(--color-heading-inverse); }

@media (max-width: 900px) {
    .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10) var(--space-8); }
}
@media (max-width: 560px) {
    .site-footer .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom__main,
    .footer-bottom__legal { flex-direction: column; align-items: center; text-align: center; }
    .footer-bottom__actions { margin-left: 0; flex-direction: column; gap: var(--space-3); }
}

/* --- Mobile sticky bottom bar -------------------------------------------- */
.mobile-bottom-bar { display: none; }
@media (max-width: 880px) {
    .mobile-bottom-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-sticky);
        background: var(--color-bg);
        border-top: 1px solid var(--color-line);
        box-shadow: 0 -6px 24px rgba(12,31,51,0.10);
    }
    .mobile-bottom-bar-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding:var(--space-4);
        font-weight: var(--fw-bold);
        font-size: var(--fs-xs);
        letter-spacing: var(--ls-wide);
        text-transform: uppercase;
        text-decoration: none;
        line-height: 1.1;
        text-align: center;
        transition: background var(--transition), color var(--transition);
    }
    .mobile-bottom-bar-call {
        color: var(--color-primary-dark);
        background: var(--color-bg);
        border-right: 1px solid var(--color-line);
    }
    .mobile-bottom-bar-call:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }
    .mobile-bottom-bar-book {
        color: var(--color-white);
        background: var(--color-accent);
    }
    .mobile-bottom-bar-book:hover { background: var(--color-accent-hover); color: var(--color-white); }

    /* Push main content up so the bottom bar doesn't cover the footer */
    .site-footer { padding-bottom: 5.5rem; }
}

/* ===========================================================================
   v2: Hero trust-strip - gold checkmark bullets (North Hill pattern)
   Replaces the legacy dot bullets when used inside the hero. The
   checklist is the canonical trust signal under the H1, no lead paragraph.
   =========================================================================== */
.hero.hero-split .trust-strip,
.hero.has-bg-image .hero-copy .trust-strip {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2rem;
    /* Sorted longest-to-shortest (cpi_sort_bullets) so the stacked column
       steps down cleanly. Single column reads as confident proof points,
       not cramped list text. */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.7rem 1.5rem;
    max-width: 560px;
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: var(--lh-snug);
    letter-spacing: 0.01em;
}
.hero.hero-split .trust-strip li,
.hero.has-bg-image .hero-copy .trust-strip li {
    position: relative;
    padding: 0 0 0 1.4rem;
    margin: 0;
    background: transparent;
    font-weight: 500;
}
/* On a light hero (default), bullet text is dark body. On dark hero (photo
   overlay), bullets flip to white. Strong stays heading-color in both. */
.hero.hero-split .trust-strip li { color: var(--color-text); }
.hero.has-bg-image .hero-copy .trust-strip li { color: var(--color-heading-inverse); }
.hero.has-bg-image .hero-copy .trust-strip li strong { color: var(--color-heading-inverse); }
/* Small round bullet dot (North Hill style), not a checkbox. */
.hero.hero-split .trust-strip li::before,
.hero.has-bg-image .hero-copy .trust-strip li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
}
.hero.has-bg-image .hero-copy .trust-strip li::before { background: var(--color-accent-on-dark); }
/* Hero CTAs left-aligned like North Hill (base .hero-cta centers them). */
.hero.hero-split .hero-cta { justify-content: flex-start; }

/* Secondary CTA on hero (outline white) - same size as primary */
/* Hero secondary CTA on DARK heroes only: white outline. On light heroes
   the canonical .btn.btn-outline styling applies. */
.hero.has-bg-image .hero-cta .hero-cta-secondary {
    background: transparent;
    color: var(--color-heading-inverse);
    border: 2px solid rgba(255,255,255,0.7);
    box-shadow: none;
}
.hero.has-bg-image .hero-cta .hero-cta-secondary:hover {
    background: var(--color-bg);
    color: var(--color-primary-dark);
    border-color: var(--color-heading-inverse);
}

/* ===========================================================================
   v3: Hero 80vh, Wistia embed, canonical FAQ, doctor block video,
   section padding token alignment, intermediate font-size tokens.
   =========================================================================== */

/* Promote the intermediate font sizes seen 3+ places. One-offs stay inline. */
:root {
    --fs-eyebrow:   0.78rem;    /* eyebrow/uppercase labels */
    --fs-utility:   0.85rem;    /* nav links, mobile bottom bar, small CTAs */
    --fs-meta:      0.92rem;    /* metadata, secondary copy, footer link */
    --fs-body-sm:   0.95rem;    /* tightened body copy, captions in cards */
    --fs-body-lg:   1.05rem;    /* lead paragraph below H1, lifted body */

    /* Section padding tokens (resolves the documented vs implemented drift) */
    --section-py:        var(--space-20);  /* 5rem desktop default */
    --section-py-mobile: var(--space-12);  /* 3rem mobile default */
}

/* Hero: consistent min-height across every page (Lucas 2026-07-04). A single
   clamp keeps all heroes the same tall, premium proportion regardless of copy
   length. Copy + form card vertically centered inside. */
.hero.hero-split {
    min-height: clamp(680px, 100vh, 1040px);
    display: flex;
    align-items: center;
}
.hero.hero-split .container.wrap {
    width: 100%;
}
@media (max-width: 880px) {
    .hero.hero-split {
        min-height: clamp(600px, 90vh, 860px);
    }
}

/* Section padding token alignment: replace .section's hardcoded 6rem
   (used to be `padding: 6rem 0`) with the documented --space-20 token. */
.section {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
}
@media (max-width: 880px) {
    .section {
        padding-top: var(--section-py-mobile);
        padding-bottom: var(--section-py-mobile);
    }
}

/* Doctor block: video frame replaces static image when doctor_video is set.
   Wistia provides the iframe; we wrap it in a 16:9 aspect-ratio container
   so it scales responsively without inline JS. */
/* Plain video embed - no card, no shadow, no dark background. Just a clean
   rounded 16:9 frame holding the Wistia player. The light placeholder bg
   only shows for the split second before the lazy player hydrates. */
.doctor-portrait .wistia-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-soft);
}
.doctor-portrait .wistia-embed iframe,
.doctor-portrait .wistia-embed .wistia_embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* When the portrait holds a video, the wrapper is a plain transparent
   container - the inner .wistia-embed owns the rounded frame. Strip the
   card styling (bg / shadow / its own aspect-ratio) so there is no
   "card under a card", no bottom gap, and no dark hairline at the radius. */
.doctor-portrait--video {
    border-radius: 0;
    background: none;
    box-shadow: none;
    aspect-ratio: auto;
    overflow: visible;
}

/* Canonical FAQ accordion (was inline in page-templates/about.php).
   One source of truth, lives here, no per-page <style> blocks. */
.faq-section .container.narrow { max-width: var(--container-narrow); }
/* Center the accordion column under its centered heading. The canonical
   .faq-list (line ~2609) sets max-width:900px + margin:0 auto; keep the auto
   side margins so the list is centered, not left-pinned, on every page. */
.faq-list { margin-block: 0; margin-inline: auto; }
/* (Legacy generic .faq-item block removed - it conflicted with the canonical
   .faq-list .faq-item card style. All page FAQs use that single style now.) */


/* ==========================================================================
   WordPress Theme Framework v1 - Canonical library components
   Added 2026-05-29. These primitives match the framework spec at:
   /root/.claude/wordpress-theme-framework/FRAMEWORK.md
   Use --color-brand* aliases so the same classes render correctly on
   any theme that follows the framework.
   ========================================================================== */

/* Service panel - the canonical PANEL primitive
   -------------------------------------------------------------------------- */
.service-panel {
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    margin-top: var(--space-6);
}
.service-panel--brand {
    background: var(--color-brand);
    color: #fff;
}
.service-panel--soft {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
}
.service-panel--tint {
    background: var(--color-brand-tint);
    border: 0;
}
.service-panel--center {
    text-align: center;
}
.service-panel--center .service-panel-copy {
    margin-left: auto;
    margin-right: auto;
    max-width: 56ch;
}
.service-panel-title {
    font-size: var(--fs-xl);
    font-family: var(--font-heading);
    margin: 0 0 var(--space-3);
    color: var(--color-heading);
}
.service-panel--brand .service-panel-title { color: #fff; }
.service-panel-copy {
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}
.service-panel--brand .service-panel-copy { color: rgba(255,255,255,0.9); }
.service-panel-cta { margin-top: var(--space-5); }
.service-panel-cta .btn { width: 100%; justify-content: center; }

.financing-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
    max-width: 1100px;
    margin-inline: auto;
    padding: var(--space-10);
    text-align: left;
    background: var(--color-bg);
    border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
    box-shadow: var(--shadow-sm);
}
.financing-panel .service-panel-title {
    font-size: var(--fs-h3);
    margin-bottom: var(--space-3);
}
.financing-panel .service-panel-copy {
    max-width: 68ch;
    margin: 0;
}
.financing-panel .button-row {
    justify-content: flex-end;
    margin: 0;
}
@media (max-width: 900px) {
    .financing-panel {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .financing-panel .service-panel-copy {
        margin-inline: auto;
    }
    .financing-panel .button-row {
        justify-content: center;
    }
}

.steps--cards {
    list-style: none;
    counter-reset: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
    max-width: var(--container);
    margin: 0 auto;
    padding: 0;
}
.steps--cards .step {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    margin: 0;
    padding: var(--space-6);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.steps--cards .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
}
.steps--cards .step h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-lg);
}
.steps--cards .step p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}
/* Count-aware columns (card grid contract): the grid always matches the
   number of steps, never leaving a dangling empty column. */
.steps--cards.steps--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps--cards.steps--count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .steps--cards,
    .steps--cards.steps--count-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .steps--cards,
    .steps--cards.steps--count-2,
    .steps--cards.steps--count-3 {
        grid-template-columns: 1fr;
    }
}

/* Comparison cards - 2-up binary side-by-side
   -------------------------------------------------------------------------- */
.comparison-cards {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
}
@media (min-width: 768px) {
    .comparison-cards { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.comparison-card {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}
.comparison-card--accent {
    background: var(--color-brand-tint);
    border-color: var(--color-brand);
}
.comparison-card-title {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--color-heading);
    margin: 0 0 var(--space-2);
}
.comparison-card-tagline {
    color: var(--color-brand-hover);
    font-style: italic;
    margin: 0 0 var(--space-3);
    font-size: var(--fs-sm);
}
.comparison-card-body {
    color: var(--color-text);
    margin: 0 0 var(--space-4);
    font-size: var(--fs-body-sm);
}
.comparison-card-specs {
    list-style: none;
    padding: 0;
    margin: 0;
}
.comparison-card-specs li {
    display: flex;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-line);
    font-size: var(--fs-sm);
}
.comparison-card-specs li:last-child { border-bottom: none; }
.comparison-card-specs li strong { color: var(--color-heading); }
.comparison-card-specs li span { color: var(--color-text); text-align: right; }

/* Cost cards - pricing range grid (no dollar amounts)
   -------------------------------------------------------------------------- */
.cost-cards {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
}
@media (min-width: 768px) {
    .cost-cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
    .cost-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cost-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1100px) {
    .cost-cards--3,
    .cost-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cost-card {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: grid;
    gap: 0.55rem;
    align-content: start;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.cost-card:hover {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-sm);
}
.cost-card-title {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--color-heading);
    line-height: var(--lh-heading);
    margin: 0;
}
.cost-card-range {
    display: inline-block;
    justify-self: start;
    background: var(--color-brand-tint);
    color: var(--color-brand-hover);
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    margin: 0;
}
.cost-card-body {
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-body-sm);
}
.section-note {
    max-width: 72ch;
    margin: var(--space-8) auto 0;
    color: var(--color-text);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
    text-align: center;
}
.section-note-card {
    max-width: 860px;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-6) var(--space-8);
}
.section:not(.soft) .section-note-card {
    background: var(--color-bg-soft);
}
.centered-prose {
    max-width: 78ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: var(--color-text);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
}
.centered-prose p {
    margin: 0;
}
.centered-prose p + p {
    margin-top: var(--space-4);
}

/* Alert callout - inline emphasis panel
   -------------------------------------------------------------------------- */
.alert-callout {
    background: var(--color-brand-tint);
    border-left: 4px solid var(--color-brand);
    border-radius: var(--radius-sm);
    padding: var(--space-5) var(--space-6);
    margin: 0;
}
.alert-callout-title {
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--color-brand-hover);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    margin: 0 0 var(--space-2);
}
.alert-callout-body { margin: 0; color: var(--color-heading); }
.alert-callout-body p { margin: 0 0 var(--space-3); }
.alert-callout-body p:last-child { margin: 0; }

/* Utilities
   -------------------------------------------------------------------------- */
.note-center {
    text-align: center;
    color: var(--color-text);
    font-size: var(--fs-body-sm);
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}
.attribution {
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--color-heading);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    margin: var(--space-3) 0 0;
}
.button-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}
.button-row--center { justify-content: center; }
/* A button row directly following a grid (not inline body copy) needs its
   own top space to read as a separate action, matching .section-note's rhythm. */
.grid + .button-row { margin-top: var(--space-8); }

/* FAQ group (for partials/faq-group.php; coexists with RE's .faq-item)
   -------------------------------------------------------------------------- */
.faq-group {
    margin-bottom: var(--space-12);
}
.faq-group-title {
    margin-top: var(--space-2);
}
.faq-group .faq-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
/* Blog article FAQ (partials/faq-group.php: .faq-group > ul.faq-list > li >
   details > summary + .faq-body). Scoped to .faq-group so it never collides
   with the canonical page FAQ (.faq-list .faq-item, partials/faq-list.php). */
.faq-group .faq-list details {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    transition: border-color var(--transition);
}
.faq-group .faq-list details[open] { border-color: var(--color-brand); }
.faq-group .faq-list summary {
    cursor: pointer;
    list-style: none;
    font-weight: var(--fw-semibold);
    color: var(--color-heading);
    position: relative;
    padding-right: var(--space-8);
    font-family: var(--font-heading);
}
.faq-group .faq-list summary::-webkit-details-marker { display: none; }
.faq-group .faq-list summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-brand);
    font-weight: var(--fw-body);
    font-size: var(--fs-2xl);
    line-height: 1;
    transition: transform var(--transition);
}
.faq-group .faq-list details[open] summary::after { content: '\2212'; }
.faq-group .faq-list .faq-body { padding-top: var(--space-3); }
.faq-group .faq-list .faq-body p {
    color: var(--color-text);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
    margin: 0 0 var(--space-3);
}
.faq-group .faq-list .faq-body p:last-child { margin: 0; }

/* Why-list overflow guard (framework v1 fix - prevents mobile overflow when
   list items contain long anchor text)
   -------------------------------------------------------------------------- */
.why-list li {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* In-content figure (single-column image in body content)
   -------------------------------------------------------------------------- */
.content-figure {
    margin: var(--space-10) auto;
    max-width: 100%;
}
.content-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.content-figure--portrait { max-width: 480px; }
.content-figure-caption {
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--color-text);
    text-align: center;
    font-style: italic;
}
@media (max-width: 600px) {
    .content-figure--portrait { max-width: 100%; }
}

/* Design system registry (page-design-system.php only) - layout for /design-system/
   -------------------------------------------------------------------------- */
.ds-toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); margin: var(--space-6) 0 0; }
.ds-toc a { color: var(--color-brand-hover); font-weight: var(--fw-semibold); }
.ds-section { padding: var(--space-12) 0; border-top: 1px solid var(--color-line); }
.ds-section:first-of-type { border-top: 0; }
.ds-section-label { display: inline-block; font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--color-brand-hover); background: var(--color-brand-tint); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); margin-bottom: var(--space-3); }
.ds-section-title { margin: 0 0 var(--space-2); font-size: var(--fs-2xl); }
.ds-section-meta { color: var(--color-text); font-size: var(--fs-body-sm); margin: 0 0 var(--space-8); }
.ds-component { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-5); }
.ds-component-name { font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; font-size: var(--fs-xs); background: var(--color-bg-inverse); color: #fff; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); display: inline-block; margin-bottom: var(--space-2); letter-spacing: 0.02em; }
.ds-component-when { color: var(--color-text); font-size: var(--fs-body-sm); margin: 0 0 var(--space-6); }
.ds-preview { padding-top: var(--space-2); }
.ds-rule { display: block; border: 1px dashed var(--color-accent); background: rgba(244,163,64,0.06); color: var(--color-heading); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); margin: 0 0 var(--space-8); font-size: var(--fs-body-sm); }
.ds-rule strong { color: var(--color-accent-hover); }
.ds-token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); }
.ds-token { border: 1px solid var(--color-line); border-radius: var(--radius-sm); overflow: hidden; }
.ds-token-swatch { height: 70px; border-bottom: 1px solid var(--color-line); }
.ds-token-meta { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); }
.ds-token-meta strong { display: block; color: var(--color-heading); font-family: var(--font-heading); font-size: var(--fs-sm); }
.ds-token-meta code { color: var(--color-text); font-size: var(--fs-xs); }
/* Type-scale specimen for the h1 row (a span styled as h1 so the registry has only one real h1) */
.ds-h1-specimen { font-family: var(--font-heading); font-size: var(--fs-h1); color: var(--color-heading); font-weight: 700; line-height: var(--lh-heading); }
.ds-btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) 0; }
.ds-btn-row--dark { background: var(--color-bg-inverse); padding: var(--space-4); border-radius: var(--radius-sm); }

/* ==========================================================================
   Blog system - canonical components (2026-05-29)
   answer-box, post-toc, author-box, post-feature, post-card upgrades,
   topic-chips, breadcrumbs, pagination, post-layout-v2, blog-layout
   All values consume 02 Energy design tokens. No raw hex or px literals.
   ========================================================================== */

/* Answer box
   --------------------------------------------------------------------------
   "Quick answer" panel. Distinct from .alert-callout (warnings/limits).
   Tinted primary background, bold small-caps label, 1-3 sentence body.
   -------------------------------------------------------------------------- */
.answer-box {
    background: var(--color-primary-soft);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-8);
    max-width: 980px;
    margin: 0 auto var(--space-16);
    box-shadow: var(--shadow-xs);
}
.section .answer-box:last-child {
    margin-bottom: 0;
}
.answer-box-label {
    display: inline-block;
    font-size: var(--fs-xs);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    font-weight: var(--fw-bold);
    color: var(--color-accent-text);
    margin: 0 0 var(--space-3);
}
.answer-box-body { margin: 0; }
.answer-box-body p {
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
    color: var(--color-heading);
    margin: 0;
}
.answer-box-body p + p { margin-top: var(--space-2); }
.answer-box + h2,
.answer-box + h3 {
    margin-top: var(--space-16);
}

/* Table of contents
   --------------------------------------------------------------------------
   Mobile: collapsible <details>. Desktop: always open (pointer-events off).
   -------------------------------------------------------------------------- */
.post-toc {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin: var(--space-6) 0;
    overflow: hidden;
}
.post-toc-details { display: block; }
.post-toc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--color-heading);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.post-toc-summary::-webkit-details-marker { display: none; }
.post-toc-summary::after {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-right: 2px solid var(--color-muted);
    border-bottom: 2px solid var(--color-muted);
    transform: rotate(45deg);
    transition: transform var(--transition);
    margin-left: var(--space-2);
    flex-shrink: 0;
}
.post-toc-details[open] .post-toc-summary::after {
    transform: rotate(-135deg);
}
.post-toc-list {
    list-style: decimal;
    margin: 0;
    padding: var(--space-1) var(--space-5) var(--space-4) var(--space-10);
    border-top: 1px solid var(--color-border);
}
.post-toc-item {
    padding: var(--space-1) 0;
    font-size: var(--fs-sm);
}
.post-toc-item a {
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: color var(--transition);
}
.post-toc-item a:hover { color: var(--color-primary); text-decoration: underline; }

/* Desktop: keep details always open */
@media (min-width: 768px) {
    .post-toc-details { pointer-events: none; }
    .post-toc-details > .post-toc-list { display: block !important; border-top: 1px solid var(--color-border); }
    .post-toc-summary { pointer-events: none; cursor: default; }
    .post-toc-summary::after { display: none; }
}

/* Author box
   --------------------------------------------------------------------------
   E-E-A-T author panel. Portrait + credentials + link. Used at the bottom
   of each blog single post, before the FAQ and related sections.
   -------------------------------------------------------------------------- */
.author-box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: var(--space-10) 0;
}
.author-box-portrait {
    flex-shrink: 0;
    margin: 0;
}
.author-box-portrait img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-primary-soft);
}
.author-box-body { min-width: 0; }
.author-box-name {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    color: var(--color-heading);
    margin: 0 0 var(--space-1);
}
.author-box-credentials {
    font-size: var(--fs-sm);
    color: var(--color-muted);
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-2);
}
.author-box-link {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-dark);
    text-decoration: none;
}
.author-box-link:hover { color: var(--color-primary); text-decoration: underline; }

/* Post feature (large lead card on blog index)
   --------------------------------------------------------------------------
   .post-feature is the oversized lead card. .post-card (existing RE component)
   is the standard grid card. Both share some sub-element class names.
   -------------------------------------------------------------------------- */
.post-feature {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-10);
    transition: box-shadow var(--transition);
}
.post-feature:hover { box-shadow: var(--shadow-md); }
.post-feature-thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg-soft);
}
.post-feature-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.post-feature:hover .post-feature-thumb img { transform: scale(1.025); }
.post-feature-body {
    padding: var(--space-8);
}
.post-feature-title {
    font-size: clamp(var(--fs-2xl), 2.5vw, var(--fs-h2));
    line-height: var(--lh-heading);
    margin: var(--space-2) 0 var(--space-3);
}
.post-feature-title a {
    color: var(--color-heading);
    text-decoration: none;
}
.post-feature-title a:hover { color: var(--color-primary-dark); }

/* Post card meta row - shared by .post-card and .post-feature */
.post-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--color-muted);
    margin: 0 0 var(--space-1);
    flex-wrap: wrap;
}
.post-card-meta-badge {
    background: var(--color-primary);
    color: var(--color-bg);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    padding: 0.15em 0.5em;
    border-radius: var(--radius-pill);
    margin-right: var(--space-1);
}
.post-card-meta-sep { opacity: 0.5; }

/* Post card overrides for blog feed (extends existing .post-card component) */
.post-card .post-card-meta { font-size: var(--fs-xs); margin-bottom: var(--space-1); }
.post-card-excerpt {
    font-size: var(--fs-sm);
    color: var(--color-muted);
    line-height: var(--lh-relaxed);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.post-card-read-more {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    text-decoration: none;
    margin-top: var(--space-2);
}
.post-card-read-more:hover { color: var(--color-primary-dark); text-decoration: underline; }
.post-feature-excerpt {
    font-size: var(--fs-base);
    color: var(--color-muted);
    line-height: var(--lh-relaxed);
    margin: 0 0 var(--space-5);
}
.post-feature .post-card-read-more { font-size: var(--fs-base); }
.post-card-title { font-size: var(--fs-xl); margin: 0; }

/* Topic chips - slim filter row
   --------------------------------------------------------------------------
   Hidden by default. Render only when real (non-default) categories exist.
   -------------------------------------------------------------------------- */
.topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}
.topic-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-border);
    background: var(--color-bg);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    font-family: var(--font-heading);
    color: var(--color-muted);
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    white-space: nowrap;
}
.topic-chip:hover,
.topic-chip.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}
/* Horizontal scroll on mobile */
@media (max-width: 599px) {
    .topic-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--space-1);
    }
    .topic-chips::-webkit-scrollbar { display: none; }
}

/* Pagination
   --------------------------------------------------------------------------
   WordPress paginate_links() produces .page-numbers. Style as .pagination.
   -------------------------------------------------------------------------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-12);
    flex-wrap: wrap;
}
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-border);
    background: var(--color-bg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    font-family: var(--font-heading);
    color: var(--color-heading);
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.page-numbers:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-dark); }
.page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-bg); pointer-events: none; }
.page-numbers.dots { border: none; background: none; color: var(--color-muted); pointer-events: none; }
.page-numbers.prev, .page-numbers.next { padding: 0 var(--space-4); }

/* Blog single v2 - post-layout-v2 with sticky rail
   --------------------------------------------------------------------------
   Two-column on desktop (>=1024px): reading column + sticky rail.
   Single column on mobile. The rail holds CTA card, TOC, services.
   Lives inside the standard .container - no nested .container.narrow.
   -------------------------------------------------------------------------- */
.post-layout-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: start;
}
.post-main { min-width: 0; }
/* Consistent vertical rhythm between the reading-column blocks */
.post-main > * + * { margin-top: var(--space-8); }
.post-rail { display: none; }
@media (min-width: 1024px) {
    .post-layout-v2 {
        /* Main absorbs space; rail is a fixed 300px column */
        grid-template-columns: minmax(0, 1fr) 300px;
    }
    .post-rail {
        display: block;
        position: sticky;
        top: 90px;
    }
}
.post-rail-card {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-4);
}
.post-rail-card:last-child { margin-bottom: 0; }
.post-rail-card h3 {
    font-size: var(--fs-base);
    color: var(--color-heading);
    margin: 0 0 var(--space-2);
}
.post-rail-card p {
    font-size: var(--fs-sm);
    color: var(--color-muted);
    margin: 0 0 var(--space-4);
    line-height: var(--lh-normal);
}
.post-rail-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: var(--space-2);
}
.post-rail-btn:last-child { margin-bottom: 0; }
.post-rail-services {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--fs-sm);
}
.post-rail-services li { border-bottom: 1px solid var(--color-border); }
.post-rail-services li:last-child { border-bottom: none; }
.post-rail-services a {
    display: block;
    padding: var(--space-2) 0;
    color: var(--color-heading);
    text-decoration: none;
    transition: color var(--transition);
}
.post-rail-services a:hover { color: var(--color-primary); }

/* Mobile inline CTA row (Call + Book) below hero on single posts */
.post-mobile-cta {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.post-mobile-cta .btn {
    flex: 1;
    min-width: 130px;
    text-align: center;
    justify-content: center;
}
@media (min-width: 1024px) {
    .post-mobile-cta { display: none; }
}

/* Post meta line (byline below H1 in single post hero) */
.post-meta-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    color: var(--color-muted);
    margin: var(--space-2) 0 0;
}

/* Related posts section heading */
.related-section-heading {
    font-size: var(--fs-h3);
    margin-bottom: var(--space-6);
    color: var(--color-heading);
}

/* .section--soft: soft background variant (used in related posts band) */
.section--soft { background: var(--color-bg-soft); }

/* Blog index + archive - 70/30 two-column layout
   --------------------------------------------------------------------------
   Desktop (>=1024px): CSS grid main feed 7fr / sidebar 3fr = exactly 70/30.
   Mobile (<1024px): single column - feed then sidebar widgets stacked.
   -------------------------------------------------------------------------- */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: start;
}
@media (min-width: 1024px) {
    .blog-layout {
        /* 70% main / 30% sidebar - exact ratio via fr units */
        grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
        gap: var(--space-12);
    }
    .blog-sidebar {
        position: sticky;
        top: 90px;
    }
}

/* Main feed: single-column vertical stack of post cards */
.post-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}
.post-feed > .post-card { width: 100%; }

/* Sidebar wrapper */
.blog-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* sidebar-topics uses topic-chip classes but flows as a wrap group */
.sidebar-topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Recent posts list */
.recent-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.recent-post {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.recent-post-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-soft);
    display: block;
    border: 1px solid var(--color-border);
}
.recent-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.recent-post-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.recent-post-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-heading);
    line-height: var(--lh-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    word-break: break-word;
    min-width: 0;
}
.recent-post-title:hover { color: var(--color-primary); }
.recent-post-date {
    font-size: var(--fs-xs);
    color: var(--color-muted);
}

/* Sidebar search widget */
.sidebar-search { display: flex; gap: var(--space-2); }
.sidebar-search-input {
    flex: 1;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    background: var(--color-bg);
    color: var(--color-heading);
}
.sidebar-search-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}
.sidebar-search-btn { flex-shrink: 0; }

/* Sidebar author E-E-A-T card (compact) */
.sidebar-author { display: flex; gap: var(--space-3); align-items: flex-start; }
.sidebar-author-portrait {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    border: 1px solid var(--color-border);
    display: block;
}
.sidebar-author-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-author-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.sidebar-author-name { font-weight: var(--fw-semibold); color: var(--color-heading); font-size: var(--fs-sm); }
.sidebar-author-cred { font-size: var(--fs-xs); color: var(--color-muted); line-height: var(--lh-normal); }
.sidebar-author-link { font-size: var(--fs-xs); color: var(--color-primary); font-weight: var(--fw-semibold); }
.sidebar-author-link:hover { color: var(--color-primary-dark); }

/* Mobile: sidebar stacks naturally below feed */
@media (max-width: 1023px) {
    .blog-sidebar { position: static; }
}

/* Responsive adjustments for blog single */
@media (max-width: 599px) {
    .author-box {
        flex-direction: column;
        gap: var(--space-4);
    }
    .post-feature-body { padding: var(--space-5); }
    .post-mobile-cta { flex-direction: column; }
    .post-mobile-cta .btn { min-width: 0; }
}
@media (max-width: 767px) {
    .post-layout-v2 { gap: 0; }
}

/* Post grid (related posts 3-up band) */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}

/* ==========================================================================
   Premium polish - motion, hover, reveal, focus  (added 2026-06-02)
   All token-based + reusable, gated by prefers-reduced-motion. No
   page-namespaced classes. Documented on /design-system/ ("Motion & polish").
   ========================================================================== */

/* Scroll reveal: elements fade + rise on viewport entry. main.js adds .reveal
   to a curated set, .is-visible on intersect, and --reveal-delay for stagger. */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Image fade-in: content images clear from a soft blur as they load.
   main.js adds .js-fade, then .is-loaded on load. */
img.js-fade {
    opacity: 0;
    filter: blur(12px);
    transition: opacity var(--transition-slow), filter var(--transition-slow);
}
img.js-fade.is-loaded { opacity: 1; filter: none; }

/* Card hover lift: deepen the existing card interactions. */
.service-card,
.icon-card,
.value-prop,
.reason {
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.service-card:hover,
.icon-card:hover,
.value-prop:hover,
.reason:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}
.icon-chip { transition: transform var(--transition); }
.service-card:hover .icon-chip,
.value-prop:hover .icon-chip,
.icon-card:hover .icon-chip { transform: translateY(-2px) scale(1.05); }

/* "Learn more" card link: arrow rendered via CSS, nudges right on hover.
   The link keeps its natural display so parent text-align still governs
   alignment (centered on .icon-card grids, left on .service-card). */
.card-link { transition: color var(--transition); }
.card-link::after {
    content: '\2192';
    display: inline-block;
    margin-left: 0.4em;
    transition: transform var(--transition);
}
.card-link:hover::after { transform: translateX(4px); }

/* Animated nav underline (desktop primary nav), in currentColor so it reads on
   both the solid and the transparent/white hero header. */
/* Nav hover: clean color change only (no underline sweep, no pill). */

/* FAQ open animation (chevron rotate handled in the .faq-item block above). */
.faq-item[open] > p,
.faq-item[open] .faq-answer { animation: re-faq-reveal var(--transition) var(--ease-out-soft); }
@keyframes re-faq-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Form submit: spinner button + thank-you reveal (main.js toggles the classes). */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 1.1em; height: 1.1em;
    margin: -0.55em 0 0 -0.55em;
    border: 2px solid var(--color-heading-inverse);
    border-top-color: transparent;
    border-radius: var(--radius-pill);
    animation: re-spin 0.6s linear infinite;
}
@keyframes re-spin { to { transform: rotate(360deg); } }
.form-thankyou.is-revealed { animation: re-pop-in var(--transition-slow) var(--ease-out-soft); }
@keyframes re-pop-in {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Section depth: subtle radial accent on soft bands. */
.section.soft {
    position: relative;
    background-image: radial-gradient(62% 80% at 100% 0%, var(--color-primary-tint) 0%, transparent 62%);
    background-repeat: no-repeat;
}
.section.soft > .container { position: relative; }

/* Smooth-scroll anchor jumps clear the floating header. */
html { scroll-padding-top: 6rem; }

/* Refined focus ring. */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }

/* Mobile: center section headers (eyebrow + h2 + intro). Heroes use .hero-copy
   and are unaffected, so they keep their left alignment. */
@media (max-width: 640px) {
    .section-header { text-align: center; margin-left: auto; margin-right: auto; }
    .section-header p { margin-left: auto; margin-right: auto; }
}

/* Respect reduced-motion: neutralize all movement added above. */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    img.js-fade { opacity: 1; filter: none; transition: none; }
    .service-card:hover, .icon-card:hover, .value-prop:hover, .reason:hover { transform: none; }
    .card-link:hover::after { transform: none; }
    .faq-item[open] > p, .faq-item[open] .faq-answer { animation: none; }
    .form-thankyou.is-revealed { animation: none; }
    .mobile-drawer { transition: none; }
    * { scroll-behavior: auto !important; }
}

/* Partner logo strip - row of "trusted industry partners" marks on a dark
   .section.ink band. Source PNGs are background-stripped (transparent);
   the two shape modifiers balance visual mass so wide wordmarks and square
   emblems read as one uniform row. */
/* Standalone form card - the hero form-card reused outside the hero
   (single job application section). Centered, capped width. */
.hero-form-card--standalone {
    max-width: 560px;
    margin: 0 auto;
}

/* Job opening cards - value-card variant for the openings grid and the
   /careers/ single pages. Meta line + bottom-aligned CTA. */
.job-card { display: flex; flex-direction: column; }
.job-card h3 { margin-bottom: var(--space-2); }
.job-card .job-meta {
    color: var(--color-secondary);
    font-size: var(--fs-utility);
    line-height: var(--lh-normal);
    margin-bottom: var(--space-5);
}
.job-card .button-row { margin-top: auto; }

/* Proof-strip partners row - "Trusted Industry Partners" label + logo
   row rendered INSIDE the proof-strip section, under the four proof
   cards (Lucas 2026-07-20). Reuses .partner-strip for the logo row. */
.proof-strip-partners {
    margin-top: var(--space-10);
}
.partner-strip-label {
    text-align: center;
    font-size: var(--fs-utility);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-secondary);
    margin: 0 0 var(--space-6);
}
.proof-strip-partners .partner-strip { gap: var(--space-8); }
.proof-strip-partners .partner-logo--wordmark { max-height: 30px; max-width: 170px; }
.proof-strip-partners .partner-logo--mark { max-height: 48px; max-width: 90px; }
@media (max-width: 640px) {
    .proof-strip-partners { margin-top: var(--space-8); }
    .proof-strip-partners .partner-strip { gap: var(--space-5); }
    .proof-strip-partners .partner-logo--wordmark { max-height: 22px; max-width: 120px; }
    .proof-strip-partners .partner-logo--mark { max-height: 36px; max-width: 60px; }
}

.partner-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-10); }
.partner-strip img { width: auto; height: auto; }
.partner-logo--wordmark { max-height: 40px; max-width: 200px; }
.partner-logo--mark { max-height: 60px; max-width: 100px; }
@media (max-width: 640px) {
    .partner-strip { gap: var(--space-6); }
    .partner-logo--wordmark { max-height: 30px; max-width: 150px; }
    .partner-logo--mark { max-height: 44px; max-width: 72px; }
}

.section.ink {
    background-color: var(--color-bg-inverse);
    background-image:
        repeating-linear-gradient(0deg, var(--color-grid-line) 0, var(--color-grid-line) 1px, transparent 1px, transparent 96px),
        repeating-linear-gradient(90deg, var(--color-grid-line) 0, var(--color-grid-line) 1px, transparent 1px, transparent 96px);
    color: var(--color-text-inverse);
}
.section.ink h2, .section.ink h3 { color: var(--color-heading-inverse); }
.section.ink .section-header p { color: var(--color-text-inverse); }
.section.ink .eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: var(--color-heading-inverse);
}
.section.ink .value-card { background: var(--color-bg-inverse-soft); border-color: var(--color-line-inverse); }
.section.ink .value-card h3 { color: var(--color-heading-inverse); }
.section.ink .value-card p { color: var(--color-text-inverse); }

/* ── book-now: post-lead-form funnel page + GHL calendar embed ──────────── */
.book-now .section-header { margin-bottom: var(--space-8); }
/* The GHL widget renders its own card, so the iframe IS the card - no wrapper. */
.booking-embed {
    width: 100%;
    min-height: 700px;
    border: 0;
    display: block;
    margin: 0 auto;
}
.book-now-trust {
    list-style: none;
    margin: var(--space-8) auto 0;
    padding: var(--space-5) var(--space-6);
    max-width: 820px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-8);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
}
.book-now-trust li {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.book-now-trust li strong { color: var(--color-heading); font-weight: var(--fw-bold); }
.book-now-fallback {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--fs-base);
}
/* Generator estimate quiz funnel. */
.quiz-funnel {
    overflow-x: clip;
}
[hidden] {
    display: none !important;
}
.quiz-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    max-width: 1080px;
    margin: 0 auto;
    align-items: center;
}
.quiz-shell--complete {
    max-width: 980px;
}
.quiz-shell--complete .quiz-intro {
    display: none;
}
.quiz-intro {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}
.quiz-intro h1 {
    max-width: 940px;
    margin: var(--space-3) auto var(--space-4);
    font-size: clamp(var(--fs-3xl), 4vw, var(--fs-4xl));
    line-height: var(--lh-tight);
}
.quiz-intro p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-secondary);
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
}
.quiz-card {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-8);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    box-shadow: var(--shadow-md);
}
.quiz-progress {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.quiz-progress span {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-line);
}
.quiz-progress span.is-active { background: var(--color-primary); }
.quiz-progress-label {
    margin: 0 0 var(--space-6);
    color: var(--color-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-align: center;
}
.quiz-step {
    display: none;
    border: 0;
    padding: 0;
    margin: 0;
}
.quiz-step.is-active { display: block; }
.quiz-step legend {
    margin: 0 auto var(--space-5);
    max-width: 100%;
    color: var(--color-heading);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    text-align: center;
}
.quiz-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.quiz-options--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-options--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-option {
    display: block;
    cursor: pointer;
}
.quiz-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.quiz-option span {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.quiz-option svg {
    width: 28px;
    height: 28px;
    color: var(--color-primary);
}
.quiz-option strong {
    color: var(--color-heading);
    font-size: var(--fs-base);
}
.quiz-option small {
    color: var(--color-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}
.quiz-option input:checked + span {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: 0 0 0 3px var(--color-primary-tint);
}
.quiz-help {
    margin: 0 auto var(--space-4);
    max-width: 48ch;
    color: var(--color-muted);
    font-size: var(--fs-sm);
    text-align: center;
}
.photo-guide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.photo-guide {
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
}
.photo-guide h3 {
    margin: var(--space-3) 0 var(--space-2);
    font-size: var(--fs-lg);
}
.photo-guide p {
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}
.photo-guide input {
    width: 100%;
    margin-top: var(--space-4);
}
.photo-guide-example {
    margin: var(--space-3) 0 0;
}
.photo-guide-example img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
}
.photo-guide-example figcaption {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.quiz-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
}
/* Back belongs on the left (the "backwards" position); Continue/Submit
 * keep the right edge even on steps where Back is hidden. */
.quiz-actions .js-quiz-prev { margin-right: auto; }
.quiz-error { margin-top: var(--space-4); }
.quiz-complete { text-align: center; }
/* No broad .quiz-complete p rule here: block-centering every nested
 * paragraph made left-aligned lines inside cards look indented. */
.quiz-result-header { margin-bottom: var(--space-6); }
.quiz-result-header h2 {
    margin: 0;
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
}
.quiz-result-sub {
    max-width: 52ch;
    margin: var(--space-3) auto 0;
    color: var(--color-text-muted);
}
.quiz-complete .section-header p {
    max-width: 58ch;
    margin: var(--space-2) auto 0;
    color: var(--color-text-muted);
}
/* Transparent layout wrapper - the price cards inside carry their own
 * backgrounds. Never put typography/color rules on descendants of this
 * wrapper: they bleed into the financing accordion, fast-action banner
 * and next-step line nested inside (that bug shipped twice). Scope the
 * big-number treatment to the price cards themselves. */
.quiz-result-card {
    max-width: 720px;
    margin: 0 auto var(--space-6);
    text-align: left;
}
.quiz-monthly-highlight .eyebrow {
    color: var(--color-accent-on-dark);
}
.quiz-monthly-highlight strong,
.quiz-range-summary strong {
    display: block;
    margin: var(--space-2) 0 var(--space-3);
    color: var(--color-heading-inverse);
    font-size: clamp(var(--fs-3xl), 5vw, var(--fs-4xl));
    line-height: var(--lh-tight);
}
.quiz-monthly-highlight p,
.quiz-range-summary p {
    max-width: none;
    margin: 0;
    color: var(--color-text-inverse-muted);
}
/* The finance result view drops the outer dark card: the price cards carry
 * their own navy/accent backgrounds, so everything stacks full-width
 * vertically (mobile-first, per Lucas 2026-07-10). */
.quiz-result-card--finance {
    color: var(--color-text);
}
.quiz-result-card--finance .quiz-finance-disclaimer {
    color: var(--color-text-muted) !important;
}
.quiz-price-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
}
/* Accordion sits between the monthly and planning-estimate cards. */
.quiz-price-grid .quiz-financing-details {
    margin: 0;
    max-width: none;
}
.quiz-monthly-highlight,
.quiz-range-summary {
    min-width: 0;
    padding: var(--space-5);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-bg-inverse);
}
/* Planning estimate reads as a light card: grey surface, dark text,
 * eyebrow rendered as a simple chip (navy was hard to read). */
.quiz-range-summary {
    border: 1px solid var(--color-line);
    background: var(--color-bg-soft);
}
.quiz-range-summary .eyebrow {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-heading);
}
.quiz-range-summary strong { color: var(--color-heading); }
.quiz-range-summary p { color: var(--color-text-muted); }
/* Centered footer strip of the investment card: divider, one bold lead-in,
 * with the fine print tucked underneath. */
.quiz-next-step-line {
    max-width: none;
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-line);
    color: var(--color-text);
    text-align: center;
}
/* Reset the result-card strong treatment (block + 3xl) for the inline label. */
.quiz-next-step-line strong {
    display: inline;
    margin: 0;
    color: var(--color-heading);
    font-size: inherit;
}
.quiz-fast-action {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px dashed var(--color-accent);
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    text-align: left;
}
.quiz-fast-action > svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: var(--space-1);
    color: var(--color-accent);
}
.quiz-fast-action strong {
    display: block;
    margin: 0 0 var(--space-1);
    color: var(--color-heading);
    font-size: var(--fs-lg);
    line-height: var(--lh-tight);
}
.quiz-fast-action p {
    max-width: none;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.quiz-recap,
.quiz-need {
    max-width: 720px;
    margin: 0 auto var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    text-align: left;
}
/* Uniform section pattern for the estimate page: every block leads with a
 * centered neutral chip + fs-2xl heading (the global .eyebrow navy pill and
 * mixed h3 sizes read as inconsistent here). */
.quiz-complete .section-header {
    margin-bottom: var(--space-5);
}
.quiz-complete .section-header h3 {
    margin: 0;
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
}
.quiz-complete .section-header .eyebrow {
    display: inline-block;
    margin-bottom: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-text-muted);
}
.quiz-recap dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
}
.quiz-recap dl div {
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}
.quiz-recap dt {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}
.quiz-recap dd {
    margin: var(--space-1) 0 0;
    color: var(--color-heading);
    font-weight: var(--fw-bold);
    overflow-wrap: break-word;
}
.quiz-recap > p {
    max-width: none;
    margin: var(--space-4) 0 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.quiz-need h4 {
    margin: var(--space-5) 0 var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}
.quiz-need ul {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--color-text);
}
.quiz-need li { margin-bottom: var(--space-2); }
.quiz-need li:last-child { margin-bottom: 0; }
.quiz-need-flags { color: var(--color-text-muted); }
.quiz-next-steps {
    max-width: 920px;
    margin: 0 auto var(--space-6);
    text-align: left;
}
/* Three steps, three columns - the shared component defaults to four. */
.quiz-next-steps .steps--cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.quiz-authority-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-5);
    padding: var(--space-4);
    border-top: 1px solid var(--color-line);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.quiz-authority-bar .stars {
    color: var(--color-accent);
    letter-spacing: var(--ls-wide);
}
.quiz-authority-bar strong { color: var(--color-heading); }
@media (max-width: 1100px) {
    .quiz-next-steps .steps--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .quiz-recap dl { grid-template-columns: 1fr; }
    .quiz-next-steps .steps--cards { grid-template-columns: 1fr; }
}
.quiz-monthly-highlight {
    background: var(--color-accent);
    color: var(--color-text-inverse);
}
.quiz-monthly-highlight .eyebrow {
    color: var(--color-text-inverse);
}
.quiz-monthly-highlight strong {
    color: var(--color-heading-inverse);
    font-size: clamp(var(--fs-3xl), 6vw, var(--fs-4xl));
}
.quiz-range-summary strong {
    font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
}
.quiz-finance-disclaimer {
    margin-top: var(--space-2) !important;
    color: var(--color-text-inverse-muted) !important;
    font-size: var(--fs-sm);
    text-align: center;
}
.quiz-value-stack,
.quiz-financing-details {
    max-width: 920px;
    margin: 0 auto var(--space-6);
    text-align: left;
}
.quiz-value-stack {
    padding: var(--space-6);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}
.quiz-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}
.quiz-value-grid div {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding: var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
}
.quiz-value-grid .re-icon {
    color: var(--color-accent);
    font-size: var(--fs-2xl);
}
.quiz-value-grid strong {
    color: var(--color-heading);
    font-size: var(--fs-base);
}
.quiz-value-grid span {
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}
.quiz-financing-details {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    overflow: hidden;
}
.quiz-financing-details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    cursor: pointer;
    color: var(--color-heading);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}
.quiz-financing-details summary::-webkit-details-marker { display: none; }
.quiz-financing-details summary::after {
    content: '+';
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-accent);
}
.quiz-financing-details[open] summary::after { content: '-'; }
.quiz-financing-table {
    display: grid;
    gap: 0;
    padding: 0 var(--space-5) var(--space-4);
}
.quiz-financing-row {
    display: grid;
    grid-template-columns: 1.35fr 0.7fr 0.8fr 1fr;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-line);
    color: var(--color-text);
}
.quiz-financing-row--head {
    color: var(--color-heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}
.quiz-financing-row small {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
}
.quiz-financing-details > p {
    max-width: none;
    margin: 0;
    padding: 0 var(--space-5) var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.quiz-result-notes {
    max-width: 720px;
    margin: 0 auto var(--space-8);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    text-align: left;
}
.quiz-result-notes h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-xl);
}
.quiz-result-notes ul {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--color-text);
}
.quiz-booking {
    margin-top: var(--space-8);
}
.quiz-booking .booking-embed {
    margin-top: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
}
.quiz-booking .section-header h3 {
    margin: var(--space-2) 0;
    font-size: var(--fs-2xl);
}

@media (max-width: 640px) {
    .quiz-card { padding: var(--space-5); }
    .quiz-intro h1 {
        max-width: 100%;
        font-size: clamp(var(--fs-2xl), 7vw, var(--fs-3xl));
    }
    .quiz-intro p {
        font-size: var(--fs-base);
    }
    .quiz-options,
    .quiz-options--two,
    .quiz-options--compact,
    .photo-guide-grid { grid-template-columns: 1fr; }
    .quiz-progress {
        gap: 4px;
    }
    .quiz-step legend {
        max-width: 24ch;
        font-size: var(--fs-xl);
    }
    .quiz-actions {
        flex-direction: column-reverse;
    }
    .quiz-actions .btn { width: 100%; }
    .quiz-price-grid,
    .quiz-value-grid,
    .quiz-financing-row {
        grid-template-columns: 1fr;
    }
    .quiz-value-stack {
        padding: var(--space-5);
    }
    .quiz-financing-row--head {
        display: none;
    }
    .quiz-financing-row {
        gap: var(--space-2);
    }
    /* Column headers are hidden on mobile, so each stacked cell carries
     * its own label via data-label. */
    .quiz-financing-row span[data-label]::before {
        content: attr(data-label) ': ';
        color: var(--color-text-muted);
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
    }
}

/* Funnel-mode chrome: logo-only header, minimal footer (no nav/CTA/back). */
.site-header--funnel .container { justify-content: center; }
.site-header--funnel .site-logo { margin: 0 auto; }
.site-header--funnel .site-logo-link { cursor: default; }
.site-footer--funnel { padding: var(--space-8) 0; }
.footer-funnel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    color: var(--color-text-inverse-muted);
}
.footer-funnel p { margin: 0; }
.footer-funnel-phone a { color: var(--color-heading-inverse); text-decoration: none; }
.footer-funnel-phone a:hover { color: var(--color-accent); }
@media (max-width: 640px) {
    .footer-funnel { flex-direction: column; text-align: center; gap: var(--space-2); }
}