/* ==========================================================================
   TidyGlow.ca — theme.css
   --------------------------------------------------------------------------
   The single design system for the public site.

   Principles
     1. ONE spacing scale (8px base) drives every margin, gap and pad.
     2. Every "box" uses --pad-box. No component invents its own padding.
     3. Content -> action row is always --gap-stack. Grid gutter is always --gap.
     4. Hairline borders, restrained shadows. No heavy chrome.
     5. NOTHING scrolls sideways. Tables reflow into stacked cards.
     6. Mobile-first: base rules are the phone, min-width queries scale up.

   JS contract (assets/js/main.js) — do not rename:
     .site-header      gets .is-stuck
     .nav-toggle       toggles .is-open on .site-nav
     .has-submenu      gets .is-expanded
     .nav-toggle       display:none means "desktop" to the JS
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
    /* Ink */
    --ink:       #0d1524;
    --text:      #4b5b70;
    --text-soft: #7d8b9e;

    /* Surfaces */
    --surface:       #ffffff;
    --surface-soft:  #f7fafc;
    --surface-sunken:#eff4f9;

    /* Lines */
    --line:      #e6ecf3;
    --line-soft: #f1f5f9;

    /* Brand — Fresh Sky */
    --brand:        #0284c7;
    --brand-dark:   #0369a1;
    --brand-deep:   #0b3c5d;
    --brand-bright: #38bdf8;
    --brand-tint:   #e0f2fe;
    --brand-tint-2: #f0f9ff;

    /* Feedback */
    --ok:   #059669;
    --warn: #b45309;

    /* Radii */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* Spacing scale */
    --s1: 8px;
    --s2: 16px;
    --s3: 24px;
    --s4: 32px;
    --s5: 48px;
    --s6: 64px;

    --pad-box:    28px;
    --pad-box-sm: 20px;
    --gap:         26px;  /* grid gutter                 */
    --gap-stack:   34px;  /* content -> action row       */
    --gap-heading: 46px;  /* section heading -> content  */
    --section-y:   clamp(56px, 6.5vw, 104px);

    --container:        1180px;
    --container-narrow: 760px;
    --container-pad:    20px;

    /* Type */
    --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Motion */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --t: 180ms var(--ease);

    /* Elevation — restrained */
    --shadow-xs: 0 1px 2px rgba(13, 21, 36, .04);
    --shadow-sm: 0 6px 18px -10px rgba(13, 21, 36, .18);
    --shadow-md: 0 18px 40px -26px rgba(13, 21, 36, .30);
    --shadow-lg: 0 30px 60px -34px rgba(13, 21, 36, .36);

    /* Chrome */
    --header-h: 68px;
    --topbar-h: 38px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Keep anchor targets clear of the sticky header. */
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* nothing should ever scroll sideways */
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .6em;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.022em;
    color: var(--ink);
}

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

a { color: var(--brand-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand); }

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

/* Browsers inset <figure> by 1em/40px; that silently broke photo grids. */
figure { margin: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }

button { font: inherit; color: inherit; }

blockquote { margin: 0; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }

:focus-visible {
    outline: 3px solid rgba(2, 132, 199, .45);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* ==========================================================================
   3. TYPOGRAPHY SCALE
   ========================================================================== */
h1 { font-size: clamp(2.05rem, 1.35rem + 2.9vw, 3.45rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem); }
h3 { font-size: clamp(1.14rem, 1.05rem + .4vw, 1.32rem); }
h4 { font-size: 1.06rem; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .7rem;
    font-family: var(--font-body);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--brand-dark);
}

.eyebrow--light { color: rgba(255, 255, 255, .78); }

.lead { font-size: 1.08rem; color: var(--text); }

.prose { max-width: 72ch; }
.prose > :last-child { margin-bottom: 0; }
.prose__lead { font-size: 1.08rem; color: var(--ink); }

/* Icons */
.icon    { width: 20px; height: 20px; flex: 0 0 auto; }
.icon-sm { width: 16px; height: 16px; flex: 0 0 auto; }
.icon-xs { width: 14px; height: 14px; flex: 0 0 auto; }

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

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

/*
 * SECTION RHYTHM — the single source of vertical spacing.
 * Every section is identical; no --tight special case, no one-off overrides.
 */
.section { padding-block: var(--section-y); }
.section--tint { background: var(--surface-soft); }
/* Kept for template compatibility; intentionally identical to .section. */
.section--tight { padding-block: var(--section-y); }

.section-heading {
    max-width: 62ch;
    margin: 0 auto var(--gap-heading);
    text-align: center;
}
.section-heading--left { margin-inline: 0; text-align: left; }
.section-heading__title { margin: 0 0 .55rem; }
.section-heading__intro { margin: 0; font-size: 1.04rem; color: var(--text-soft); }

/* The generic grid: 1 column on phones, more as space allows. */
.cards-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
}
.cards-grid--3 { grid-template-columns: minmax(0, 1fr); }

/* A grid never owns the space beneath it — the action row does. */
.cards-grid,
.plan-grid,
.process,
.family-nav,
.table-wrap,
.faq__list { margin-block: 0; }

.center-text {
    margin: var(--gap-stack) 0 0;
    text-align: center;
}

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-stack); }
.split__aside h2 { margin-bottom: 0; }
.split__main > :first-child { margin-top: 0; }

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: .8rem 1.2rem;
    background: var(--ink);
    color: #fff;
    border-radius: 0 0 var(--r-sm) 0;
    text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

.site-main { display: block; }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: transparent;
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--t), border-color var(--t), color var(--t),
                transform var(--t), box-shadow var(--t);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 8px 20px -12px rgba(2, 132, 199, .8);
}
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.btn--outline {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}
.btn--outline:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint-2); }

.btn--light { background: #fff; border-color: #fff; color: var(--brand-deep); }
.btn--light:hover { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--brand-dark); }

.btn--ghost-light {
    background: transparent;
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.btn--sm { padding: 10px 18px; font-size: .875rem; }
.btn--lg { padding: 16px 30px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

/* ==========================================================================
   6. TOPBAR
   ========================================================================== */
.topbar {
    background: var(--brand-deep);
    color: rgba(255, 255, 255, .82);
    font-size: .82rem;
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2) var(--s4);
    min-height: var(--topbar-h);
    flex-wrap: wrap;
}
.topbar__item {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
}
.topbar__item svg { flex: 0 0 auto; color: var(--brand-bright); }
.topbar__item strong { color: #fff; font-weight: 600; }
.topbar__item a { color: #fff; text-decoration: none; }
.topbar__item--hours { margin-left: auto; }

/* ==========================================================================
   7. HEADER + NAVIGATION
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.site-header.is-stuck { box-shadow: 0 10px 24px -22px rgba(13, 21, 36, .45); }

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    min-height: var(--header-h);
}

/* Brand */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
}
.brand__mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--brand-bright), var(--brand-dark));
    color: #fff;
}
.brand__mark svg { width: 20px; height: 20px; }
.brand__text { display: grid; gap: 1px; }
.brand__name {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--ink);
    line-height: 1.1;
}
.brand__tld { color: var(--brand); }
.brand__slogan {
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-soft);
}

/* Nav list */
.site-nav__list {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav__list > li { margin: 0; }

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem .8rem;
    border-radius: var(--r-pill);
    font-size: .93rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: background-color var(--t), color var(--t);
}
.nav-link:hover { background: var(--surface-sunken); color: var(--brand-dark); }
.nav-link.is-active { color: var(--brand-dark); background: var(--brand-tint-2); }

.site-nav__actions { display: flex; align-items: center; gap: .6rem; }
.header__phone {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}
.header__phone:hover { color: var(--brand-dark); }
.header__phone svg { color: var(--brand); }

.header__mobile-actions { display: none; align-items: center; gap: .5rem; }
.header__call {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-pill);
    background: var(--brand-tint-2);
    color: var(--brand-dark);
}

.nav-toggle {
    /* display:none on desktop is a CONTRACT with main.js: it decides whether it
       is in mobile mode by reading this computed value. Do not change the base
       display without updating that check. */
    display: none;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform var(--t), opacity var(--t);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ''; position: relative; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-4px) rotate(-45deg); }

/* Mega menu / dropdown — desktop only */
.mega, .dropdown { display: none; }

@media (min-width: 1025px) {
    /* Without this the link list and the action buttons stack as blocks and
       double the header height. */
    .site-nav {
        display: flex;
        align-items: center;
        gap: var(--s3);
    }

    .has-submenu { position: relative; }

    .has-submenu > .mega,
    .has-submenu > .dropdown {
        position: absolute;
        top: calc(100% + 12px);
        left: 50%;
        z-index: 60;
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 8px);
        transition: opacity var(--t), transform var(--t), visibility var(--t);
    }
    .has-submenu--sm > .dropdown { left: auto; right: 0; transform: translateY(8px); }

    .has-submenu:hover > .mega,
    .has-submenu:focus-within > .mega,
    .has-submenu:hover > .dropdown,
    .has-submenu:focus-within > .dropdown {
        opacity: 1;
        visibility: visible;
    }
    .has-submenu:hover > .mega,
    .has-submenu:focus-within > .mega { transform: translate(-50%, 0); }
    .has-submenu:hover > .dropdown,
    .has-submenu:focus-within > .dropdown { transform: translateY(0); }

    .mega {
        width: min(1080px, calc(100vw - 40px));
        padding: var(--s3);
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-md);
    }
    .mega__inner {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(200px, .9fr);
        gap: var(--s3);
    }
    .mega__column { min-width: 0; }
    .mega__heading {
        display: flex;
        align-items: center;
        gap: .4rem;
        margin: 0 0 .6rem;
        padding-bottom: .5rem;
        border-bottom: 1px solid var(--line-soft);
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--brand-dark);
    }
    .mega__list { margin: 0; padding: 0; list-style: none; }
    .mega__list a {
        display: block;
        padding: .38rem .5rem;
        border-radius: var(--r-xs);
        font-size: .88rem;
        color: var(--text);
        text-decoration: none;
    }
    .mega__list a:hover { background: var(--brand-tint-2); color: var(--brand-dark); }
    .mega__promo {
        display: flex;
        flex-direction: column;
        gap: .55rem;
        padding: var(--s3);
        border-radius: var(--r-md);
        background: var(--surface-sunken);
    }
    .mega__promo-title { margin: 0; font-weight: 600; color: var(--ink); font-size: .93rem; }
    .mega__promo-text { margin: 0 0 .3rem; font-size: .84rem; color: var(--text-soft); }
    .mega__promo .btn { width: 100%; }
    .mega__promo .btn + .btn { margin-top: 0; }

    .dropdown {
        min-width: 232px;
        padding: .5rem;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-md);
    }
    .dropdown ul { margin: 0; padding: 0; list-style: none; }
    .dropdown a {
        display: block;
        padding: .5rem .7rem;
        border-radius: var(--r-xs);
        font-size: .9rem;
        color: var(--text);
        text-decoration: none;
    }
    .dropdown a:hover { background: var(--brand-tint-2); color: var(--brand-dark); }
}

/* ==========================================================================
   8. HERO + PAGE HERO
   ========================================================================== */
.hero {
    position: relative;
    padding-block: clamp(44px, 5.5vw, 76px) var(--section-y);
    background: var(--surface-soft);
    overflow: hidden;
}
.hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(760px 380px at 8% -12%, var(--brand-tint) 0%, transparent 68%),
        radial-gradient(560px 300px at 96% 4%, var(--brand-tint-2) 0%, transparent 62%);
    pointer-events: none;
}
.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 4vw, 60px);
    align-items: center;
}
.hero__title { margin: 0 0 1rem; }
.hl { color: var(--brand-dark); }
.hero__lead { margin: 0 0 1.6rem; font-size: 1.06rem; max-width: 58ch; }
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}
.hero__points {
    display: grid;
    gap: .6rem;
    margin: var(--s4) 0 0;
    padding: 0;
    list-style: none;
}
.hero__points li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    font-size: .94rem;
}
.hero__points svg { flex: 0 0 auto; margin-top: 3px; color: var(--brand); }
.hero__points--tight { margin-top: var(--s3); }
.hero__stats { margin-top: var(--gap-stack); }

.page-hero {
    padding-block: clamp(36px, 4.5vw, 64px);
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
}
.page-hero--compact { padding-block: clamp(28px, 3.5vw, 44px); }
.page-hero__title { margin: 0 0 .8rem; max-width: 26ch; }
.page-hero__lead { margin: 0 0 1.6rem; max-width: 68ch; font-size: 1.05rem; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    margin: var(--s3) 0 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
    color: var(--text-soft);
}
.page-hero__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-stack); }

/* Breadcrumbs */
.breadcrumbs { padding-top: var(--s3); }
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .84rem;
    color: var(--text-soft);
}
.breadcrumbs__item { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.breadcrumbs__item + .breadcrumbs__item::before { content: '/'; color: var(--line); }
.breadcrumbs__item a { color: var(--text-soft); text-decoration: none; }
.breadcrumbs__item a:hover { color: var(--brand-dark); }
.breadcrumbs__item.is-current { color: var(--ink); font-weight: 600; }

/* Jump nav + table of contents */
.jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: var(--pad-box-sm);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-soft);
}
.jump-nav a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: .85rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--t), color var(--t);
}
.jump-nav a:hover { border-color: var(--brand); color: var(--brand-dark); }

.toc {
    padding: var(--pad-box);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-soft);
}
.toc__label {
    margin: 0 0 .8rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--text-soft);
}

/* ==========================================================================
   9. CARDS  — every box shares one padding value
   ========================================================================== */
.service-card,
.feature-card,
.area-card,
.plan,
.testimonial,
.aside-card,
.form-card {
    padding: var(--pad-box);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}

/* Service card */
.service-card {
    display: flex;
    flex-direction: column;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.service-card:hover { border-color: var(--brand-tint); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.service-card--compact { padding: var(--pad-box-sm); border-radius: var(--r-md); }
.service-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s2);
    margin-bottom: var(--s2);
}
.service-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: var(--r-md);
    background: var(--brand-tint-2);
    color: var(--brand-dark);
}
.service-card__price {
    padding: .3rem .7rem;
    border-radius: var(--r-pill);
    background: var(--surface-sunken);
    color: var(--ink);
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}
.service-card__title { margin: 0 0 .5rem; font-size: 1.12rem; }
.service-card__title a { color: inherit; text-decoration: none; }
.service-card__title a:hover { color: var(--brand-dark); }
.service-card__text { flex: 1 1 auto; margin: 0 0 var(--s3); font-size: .93rem; }
.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    font-size: .88rem;
    font-weight: 600;
    color: var(--brand-dark);
    text-decoration: none;
}
.service-card__link svg { transition: transform var(--t); }
.service-card__link:hover { color: var(--brand); }
.service-card__link:hover svg { transform: translateX(3px); }

/* Feature card */
.feature-card { display: flex; flex-direction: column; border-radius: var(--r-md); }
.feature-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--s2);
    border-radius: var(--r-md);
    background: var(--brand-tint-2);
    color: var(--brand-dark);
}
.feature-card__title { margin: 0 0 .45rem; font-size: 1.05rem; }
.feature-card__text { flex: 1 1 auto; margin: 0; font-size: .93rem; }

/* Area card */
.area-card { display: flex; flex-direction: column; }
.area-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--s2);
    border-radius: var(--r-md);
    background: var(--brand-tint-2);
    color: var(--brand-dark);
}
.area-card__title { margin: 0 0 .5rem; font-size: 1.14rem; }
.area-card__title a { color: inherit; text-decoration: none; }
.area-card__title a:hover { color: var(--brand-dark); }
.area-card__text { margin: 0 0 var(--s3); font-size: .93rem; }
.area-card__postal {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 var(--s2);
    font-size: .84rem;
    color: var(--text-soft);
}
.area-card--primary { border-color: var(--brand-tint); }

/* Family nav — slim service-category rows */
.family-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
    margin-bottom: var(--gap-stack);
}
.family-nav__item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 16px var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--t), background-color var(--t);
}
.family-nav__item:hover { border-color: var(--brand-tint); background: var(--brand-tint-2); }
.family-nav__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--r-sm);
    background: var(--brand-tint-2);
    color: var(--brand-dark);
}
.family-nav__label { display: grid; gap: 1px; margin-right: auto; }
.family-nav__label strong { font-size: .96rem; font-weight: 600; color: var(--ink); }
.family-nav__label span { font-size: .82rem; color: var(--text-soft); }
.family-nav__item > svg { color: var(--text-soft); transition: transform var(--t), color var(--t); }
.family-nav__item:hover > svg { color: var(--brand); transform: translateX(3px); }

/* Group header (services overview) */
.group-header {
    max-width: 66ch;
    margin: 0 auto var(--gap-heading);
    text-align: center;
}
.group-header__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto .9rem;
    border-radius: var(--r-md);
    background: var(--brand-tint-2);
    color: var(--brand-dark);
}
.group-header__title { margin: 0 0 .4rem; }
.group-header__tagline {
    margin: 0 0 .6rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--brand-dark);
}
.group-header__text { margin: 0; color: var(--text-soft); }

/* Plan card */
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.plan {
    position: relative;
    display: flex;
    flex-direction: column;
}
.plan--popular { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.plan__badge {
    position: absolute;
    top: -12px;
    left: var(--pad-box);
    padding: .25rem .8rem;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.plan__name { margin: 0 0 .35rem; font-size: 1.06rem; }
.plan__price {
    margin: 0 0 .5rem;
    font-family: var(--font-display);
    font-size: 2.35rem;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.05;
    color: var(--ink);
}
.plan__currency { font-size: 1.1rem; vertical-align: super; margin-right: 2px; }
.plan__unit { font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--text-soft); }
.plan__note { margin: 0 0 var(--s3); font-size: .89rem; color: var(--text-soft); }
.plan__features {
    flex: 1 1 auto;
    display: grid;
    gap: .55rem;
    margin: 0 0 var(--s3);
    padding: var(--s3) 0 0;
    border-top: 1px solid var(--line-soft);
    list-style: none;
}
.plan__features li { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font-size: .91rem; }
.plan__features svg { flex: 0 0 auto; margin-top: 4px; color: var(--brand); }

/* Testimonial */
.testimonial { display: flex; flex-direction: column; border-radius: var(--r-md); }
.testimonial__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.testimonial__icon { color: var(--line); }
.testimonial__quote { margin: 0 0 var(--s3); padding: 0; border: 0; }
.testimonial__quote p { margin: 0; font-size: .95rem; }
.testimonial__meta { margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--line-soft); }
.testimonial__author { display: block; font-weight: 600; color: var(--ink); font-size: .93rem; }
.testimonial__detail { display: block; font-size: .81rem; color: var(--text-soft); }

.stars { display: inline-flex; gap: 2px; }
.star { display: inline-flex; color: var(--line); }
.star.is-filled { color: #e6a63a; }

/* ==========================================================================
   10. PROCESS
   ========================================================================== */
.process {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
.process__step {
    position: relative;
    margin: 0;
    padding: calc(var(--pad-box) + 6px) var(--pad-box) var(--pad-box);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}
.process__number {
    position: absolute;
    top: -13px;
    left: var(--pad-box);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 700;
}
.process__icon { display: block; margin: .3rem 0 .8rem; color: var(--brand-dark); }
.process__icon svg { width: 24px; height: 24px; }
.process__title { margin: 0 0 .4rem; font-size: 1.02rem; }
.process__text { margin: 0; font-size: .91rem; }

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.faq__list { display: grid; gap: .6rem; margin-bottom: var(--gap-stack); }
.faq__group-title { margin: 0 0 var(--s3); font-size: 1.18rem; }
.faq {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    overflow: hidden;
    transition: border-color var(--t);
}
.faq:hover { border-color: var(--brand-tint); }
.faq[open] { border-color: var(--brand-tint); }
.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: 18px var(--pad-box-sm);
    font-family: var(--font-body);
    font-size: .97rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--brand-dark); }
.faq__chevron { flex: 0 0 auto; color: var(--brand); transition: transform var(--t); }
.faq[open] .faq__chevron { transform: rotate(180deg); }
.faq__answer { padding: 0 var(--pad-box-sm) var(--pad-box-sm); }
.faq__answer p { margin: 0; font-size: .94rem; }

/* ==========================================================================
   12. TABLES — never scroll sideways
   --------------------------------------------------------------------------
   Desktop: a clean, quiet table.
   Phone:   the same data as stacked label/value cards. The old build forced
            min-width:560px inside overflow-x:auto, so phones had to scroll.
   Labels come from data-label attributes emitted by the templates.
   ========================================================================== */
.table-wrap { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }

.price-table { font-size: .94rem; }
.price-table caption { text-align: left; }
.price-table th,
.price-table td { padding: 15px var(--pad-box); text-align: left; border-bottom: 1px solid var(--line-soft); }
.price-table thead th {
    background: var(--surface-soft);
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-soft);
    white-space: nowrap;
}
.price-table tbody th { font-weight: 600; color: var(--ink); }
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table .sr-only { position: absolute !important; }

@media (max-width: 760px) {
    .table-wrap { border: 0; background: none; }

    .price-table,
    .price-table thead,
    .price-table tbody,
    .price-table tr,
    .price-table th,
    .price-table td { display: block; width: auto; min-width: 0; }

    .price-table thead { display: none; }

    .price-table tbody tr {
        margin-bottom: var(--s2);
        padding: var(--pad-box-sm);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: var(--surface);
    }
    .price-table tbody tr:last-child { margin-bottom: 0; }

    .price-table tbody th {
        margin: 0 0 .6rem;
        padding: 0 0 .6rem;
        border-bottom: 1px solid var(--line-soft);
        font-size: 1.02rem;
    }
    .price-table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--s2);
        padding: 7px 0;
        border-bottom: 0;
    }
    .price-table td::before {
        content: attr(data-label);
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--text-soft);
    }
    .price-table td:last-child { padding-bottom: 0; }
}

.table-note { margin: var(--s2) 0 0; font-size: .85rem; color: var(--text-soft); }

/* ==========================================================================
   13. LISTS
   ========================================================================== */
.check-list,
.fact-list,
.addon-list,
.chip-list,
.link-list,
.link-card-grid { margin: 0 0 var(--gap-stack); padding: 0; list-style: none; }

.check-list { display: grid; gap: .6rem; margin-top: 0; }
.check-list li { display: flex; align-items: flex-start; gap: .6rem; margin: 0; font-size: .95rem; }
.check-list svg { flex: 0 0 auto; margin-top: 4px; color: var(--brand); }

.fact-list { display: grid; gap: .6rem; }
.fact-list li { display: flex; align-items: flex-start; gap: .6rem; margin: 0; font-size: .94rem; }
.fact-list svg { flex: 0 0 auto; margin-top: 4px; color: var(--brand); }

.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-list li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .35rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: .84rem;
}
.chip-list svg { color: var(--brand); }

/* Two-column SEO link list — becomes one column on phones */
.link-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
.link-list li { margin: 0; }
.link-list a { display: inline-block; padding: 3px 0; font-size: .86rem; color: var(--text); text-decoration: none; }
.link-list a:hover { color: var(--brand-dark); text-decoration: underline; }

.addon-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.addon-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    margin: 0;
    padding: 13px var(--pad-box-sm);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: .92rem;
}
.addon-list li:hover { border-color: var(--brand-tint); }
.addon-list strong { color: var(--ink); }

.link-card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.link-card-grid li { margin: 0; }
.link-card-grid a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: 13px var(--pad-box-sm);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--t), background-color var(--t), color var(--t);
}
.link-card-grid a:hover { border-color: var(--brand); background: var(--brand-tint-2); color: var(--brand-dark); }
.link-card-grid svg { flex: 0 0 auto; color: var(--brand); }

/* Hours (contact page) */
.hours { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; font-size: .92rem; }
.hours li { display: flex; justify-content: space-between; gap: var(--s2); margin: 0; }

/* ==========================================================================
   14. PANELS, PRICE BLOCKS, ESTIMATOR
   ========================================================================== */
/* Two-column content + sidebar */
.layout-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--gap) * 1.6); align-items: start; }
.layout-split__main { min-width: 0; }
.layout-split__aside { display: grid; gap: var(--gap); }

/* Sidebar card */
.aside-card { display: flex; flex-direction: column; border-radius: var(--r-md); }
.aside-card--accent { background: var(--brand-tint-2); border-color: var(--brand-tint); }
.aside-card--soft { background: var(--surface-soft); }
.aside-card__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: var(--s3);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--brand-dark);
}
.aside-card__title { margin: 0 0 .6rem; font-size: 1.16rem; }
.aside-card__text { margin: 0 0 var(--s3); font-size: .93rem; }
.aside-card__text:last-child { margin-bottom: 0; }
.aside-card__list { display: grid; gap: .5rem; margin: 0 0 var(--s3); padding: 0; list-style: none; }
.aside-card__list li { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font-size: .92rem; }
.aside-card__list svg { flex: 0 0 auto; margin-top: 4px; color: var(--brand); }
.aside-card__list--plain li { font-size: .9rem; color: var(--text-soft); }
.aside-card__phone {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}
.aside-card__phone svg { color: var(--brand); }
.aside-card__phone:hover { color: var(--brand-dark); }
.aside-card__phone--lg { font-size: 1.45rem; }
.aside-card .btn { margin-top: var(--s3); }

/* Price callout */
.price-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    margin: 0 0 var(--gap);
    padding: var(--pad-box);
    border: 1px solid var(--brand-tint);
    border-radius: var(--r-md);
    background: var(--brand-tint-2);
}
.price-callout__label {
    margin: 0;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.price-callout__value {
    margin: .2rem 0 0;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--ink);
}
.price-callout__note { margin: .25rem 0 0; font-size: .85rem; color: var(--text-soft); }

/* Dark price panel */
.price-panel {
    padding: var(--pad-box);
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, var(--brand-deep), var(--brand-dark));
    color: rgba(255, 255, 255, .82);
}
.price-panel--light { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.price-panel__label {
    margin: 0 0 .3rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}
.price-panel--light .price-panel__label { color: var(--text-soft); }
.price-panel__label--sub { margin-top: var(--s3); }
.price-panel__price {
    margin: 0 0 .6rem;
    font-family: var(--font-display);
    font-size: 2.05rem;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.1;
    color: #fff;
}
.price-panel--light .price-panel__price { color: var(--ink); }
.price-panel__note { margin: 0 0 var(--s3); font-size: .85rem; color: #fff; }
.price-panel--light .price-panel__note { color: var(--text-soft); }
.price-panel__note--center { margin: var(--s2) 0 0; text-align: center; }

/* Inline links inside the dark panel must never inherit the global --brand-dark
   link colour. The panel's gradient ends at exactly #0369a1 — which IS
   --brand-dark — so a default link renders blue text on a blue card and all but
   disappears. .btn is excluded so the solid primary button is never underlined. */
.price-panel:not(.price-panel--light) a:not(.btn) {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.price-panel:not(.price-panel--light) a:not(.btn):hover,
.price-panel:not(.price-panel--light) a:not(.btn):focus {
    color: #fff;
    text-decoration-thickness: 2px;
}
.price-panel__list { display: grid; gap: .45rem; margin: 0 0 var(--s3); padding: 0; list-style: none; }
.price-panel__list li { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font-size: .9rem; }
.price-panel__list svg { flex: 0 0 auto; margin-top: 4px; color: var(--brand-bright); }
.price-panel--light .price-panel__list svg { color: var(--brand); }
.price-panel__list--inline { display: flex; flex-wrap: wrap; gap: .45rem; }
.price-panel__list--inline li {
    padding: .3rem .7rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .14);
    font-size: .82rem;
    font-weight: 600;
    color: #fff;
}
.price-panel--light .price-panel__list--inline li { background: var(--surface-sunken); color: var(--ink); }
.price-panel .btn { width: 100%; }

/* Quick quote (hero) */
.quick-quote {
    padding: var(--pad-box);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}
.quick-quote__badge {
    display: inline-block;
    margin: 0 0 .7rem;
    padding: .25rem .7rem;
    border-radius: var(--r-pill);
    background: var(--brand-tint);
    color: var(--brand-dark);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.quick-quote__title { margin: 0 0 .25rem; font-size: 1.24rem; }
.quick-quote__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.quick-quote__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    margin: var(--s3) 0 0;
    padding: var(--s3) 0 0;
    border-top: 1px solid var(--line);
}
.quick-quote__price-label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.quick-quote__price-value {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -.035em;
    color: var(--ink);
}
.quick-quote__note { margin: var(--s2) 0 0; font-size: .8rem; color: var(--text-soft); }
.quick-quote .btn { margin-top: var(--s3); }

/* Estimator */
.estimator {
    padding: var(--pad-box);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}
.estimator__head { display: flex; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s4); }
.estimator__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--r-md);
    background: var(--brand-tint-2);
    color: var(--brand-dark);
}
.estimator__title { margin: 0; font-size: 1.2rem; }
.estimator__subtitle { margin: .2rem 0 0; font-size: .89rem; color: var(--text-soft); }
.estimator__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.estimator__wide { grid-column: 1 / -1; }
.estimator__addons { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.estimator__addons legend { padding: 0; margin-bottom: .5rem; font-size: .85rem; font-weight: 600; color: var(--ink); }
.estimator__checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.estimator__result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    margin-top: var(--s4);
    padding: var(--s3);
    border-radius: var(--r-md);
    background: var(--brand-tint-2);
}
.estimator__result-label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.estimator__result-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.035em;
    color: var(--ink);
}
.estimator__result-note { margin: .2rem 0 0; font-size: .8rem; color: var(--text-soft); }

/* ==========================================================================
   15. FORMS
   ========================================================================== */
.form-card { border-radius: var(--r-lg); }
.form-card__title { margin: 0 0 .5rem; font-size: 1.3rem; }
.form-card__intro { margin: 0 0 var(--s4); font-size: .94rem; color: var(--text-soft); }

.quote-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.quote-form__note { margin: var(--s3) 0 0; font-size: .82rem; color: var(--text-soft); }
.quote-form__actions { margin-top: var(--s4); }
.quote-form__actions .btn { width: 100%; }

.field { display: grid; gap: .4rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__hint { font-size: .8rem; color: var(--text-soft); }
.field label,
.field > span:first-child {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
}
.req { color: var(--brand); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--ink);
    transition: border-color var(--t), box-shadow var(--t);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #a9b5c4; }
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, .14);
    outline: none;
}
.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' stroke='%237d8b9e' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

/* Checkbox */
.field--check { display: flex; align-items: flex-start; gap: .6rem; }
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .92rem;
    cursor: pointer;
}
.checkbox input {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0;
    accent-color: var(--brand);
    cursor: pointer;
}
.checkbox--sm { font-size: .86rem; }
.checkbox--sm input { width: 18px; height: 18px; flex-basis: 18px; }

/* Honeypot — visually gone, still in the DOM for bots */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   16. NOTICES / DISCLAIMER
   ========================================================================== */
.notice {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    padding: var(--pad-box);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-soft);
    margin-bottom: var(--gap);
}
.notice--accent { border-color: var(--brand-tint); background: var(--brand-tint-2); }
.notice__icon { flex: 0 0 auto; color: var(--brand-dark); }
.notice__title { margin: 0 0 .3rem; font-size: 1.02rem; }
.notice__text { margin: 0; font-size: .92rem; }
.notice__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--s2); }

.disclaimer {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: var(--gap) 0 0;
    padding: var(--pad-box-sm);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    font-size: .89rem;
    color: var(--text);
}
.disclaimer svg { flex: 0 0 auto; margin-top: 3px; color: var(--brand); }

/* ==========================================================================
   17. TRUST STRIP + STATS
   ========================================================================== */
.trust-strip { border-block: 1px solid var(--line); background: var(--surface); }
.trust-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1.8rem;
    padding-block: var(--s3);
}
.trust-strip__item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text);
}
.trust-strip__item svg { flex: 0 0 auto; color: var(--brand); }

.stat-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--line);
    overflow: hidden;
}
.stat-bar li {
    margin: 0;
    padding: var(--s3) var(--s2);
    background: var(--surface);
    text-align: center;
}
.stat-bar__value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.2rem + .7vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--ink);
}
.stat-bar__label { display: block; font-size: .8rem; color: var(--text-soft); }
.stat-bar--light li { background: var(--surface-soft); }

/* ==========================================================================
   18. CTA BAND
   ========================================================================== */
.cta-band {
    padding-block: clamp(48px, 5.5vw, 80px);
    background: linear-gradient(120deg, var(--brand-deep), var(--brand-dark));
}
.cta-band__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
    align-items: center;
}
.cta-band__title { margin: 0 0 .6rem; color: #fff; }
.cta-band__text { margin: 0; color: rgba(255, 255, 255, .82); max-width: 56ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ==========================================================================
   19. FOOTER
   ========================================================================== */
.site-footer {
    padding-block: var(--s6) var(--s4);
    border-top: 1px solid var(--line);
    background: var(--surface-soft);
}
.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s5);
}
.footer__col { min-width: 0; }
.footer__heading {
    margin: 0 0 var(--s2);
    font-family: var(--font-body);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ink);
}
.footer__heading--spaced { margin-top: var(--s4); }
.footer__list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.footer__list a { font-size: .89rem; color: var(--text); text-decoration: none; }
.footer__list a:hover { color: var(--brand-dark); text-decoration: underline; }
.brand--footer { margin-bottom: var(--s2); }
.footer__about { margin: 0 0 var(--s3); font-size: .89rem; color: var(--text-soft); max-width: 42ch; }
.footer__tagline { margin: 0; font-size: .85rem; color: var(--text-soft); }
.footer__contact { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.footer__contact li { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font-size: .89rem; }
.footer__contact svg { flex: 0 0 auto; margin-top: 3px; color: var(--brand); }
.footer__contact a { color: var(--text); text-decoration: none; }
.footer__contact a:hover { color: var(--brand-dark); }
.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    margin-top: var(--s5);
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
    font-size: .83rem;
    color: var(--text-soft);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.footer__legal a { color: var(--text-soft); text-decoration: none; }
.footer__legal a:hover { color: var(--brand-dark); }

/* ==========================================================================
   20. MOBILE CTA BAR
   ========================================================================== */
.mobile-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
}
.mobile-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: 15px var(--s2);
    background: var(--surface);
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}
.mobile-cta__btn--primary { background: var(--brand); color: #fff; }

/* ==========================================================================
   21. RESPONSIVE — mobile-first, scale up
   ========================================================================== */
@media (min-width: 620px) {
    .cards-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .addon-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .link-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-quote__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .estimator__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cta-band__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
    .cta-band__actions { justify-content: flex-end; }
    .layout-split__aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
    .hero__inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
    .page-hero__split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
    .split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: calc(var(--gap) * 1.6); }
    .family-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mobile-cta { display: none; }
    .layout-split { grid-template-columns: minmax(0, 1fr) 320px; }
    .layout-split--wide { grid-template-columns: minmax(0, 1fr) 360px; }
    .layout-split__aside { grid-template-columns: minmax(0, 1fr); }
    .estimator__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    .cards-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
    .cta-band__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* Below 1025px the whole nav collapses into a full-screen panel. */
@media (max-width: 1024px) {
    .header__mobile-actions { display: flex; }
    .nav-toggle { display: grid; }

    /*
     * backdrop-filter creates a containing block, which would make the
     * position:fixed nav resolve against the header instead of the viewport.
     * Keep it off below the breakpoint.
     */
    .site-header { backdrop-filter: none; }

    .site-nav {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 99;
        width: min(420px, 100%);
        padding: calc(var(--header-h) + var(--s3)) var(--container-pad) var(--s6);
        background: var(--surface);
        border-left: 1px solid var(--line);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--t), visibility var(--t);
    }
    .site-nav.is-open { transform: translateX(0); visibility: visible; }

    .site-nav__list { display: grid; gap: .2rem; }
    .site-nav__list > li { margin: 0; }

    .nav-link {
        width: 100%;
        justify-content: space-between;
        padding: .85rem .9rem;
        border-radius: var(--r-sm);
        font-size: 1rem;
        font-weight: 600;
    }
    .nav-link svg { transition: transform var(--t); }
    .has-submenu.is-expanded > .nav-link svg { transform: rotate(180deg); }

    /* Collapsed by default; the JS toggles .is-expanded on the parent. */
    .mega,
    .dropdown {
        display: none;
        position: static;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        left: auto;
        top: auto;
        right: auto;
    }
    .has-submenu.is-expanded > .mega,
    .has-submenu.is-expanded > .dropdown { display: block; }

    /* Never inherit the desktop hover transforms in the mobile panel. */
    .has-submenu:hover > .mega,
    .has-submenu:focus-within > .mega,
    .has-submenu > .mega,
    .has-submenu:hover > .dropdown,
    .has-submenu:focus-within > .dropdown,
    .has-submenu > .dropdown { transform: none; }

    .mega { padding: .4rem 0 var(--s2) .9rem; }
    .mega__inner { display: grid; gap: var(--s2); }
    .mega__heading {
        display: flex;
        align-items: center;
        gap: .4rem;
        margin: 0 0 .35rem;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--brand-dark);
    }
    .mega__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .5rem; margin: 0; padding: 0; list-style: none; }
    .mega__list a { display: block; padding: .5rem .35rem; font-size: .89rem; color: var(--text); text-decoration: none; }
    .mega__promo {
        display: grid;
        gap: .5rem;
        margin-top: .4rem;
        padding: var(--pad-box-sm);
        border-radius: var(--r-md);
        background: var(--surface-soft);
    }
    .mega__promo-title { margin: 0; font-size: .92rem; font-weight: 600; color: var(--ink); }
    .mega__promo-text { display: none; }
    .dropdown ul { margin: 0; padding: .2rem 0 var(--s2) .9rem; list-style: none; }
    .dropdown a { display: block; padding: .5rem .35rem; font-size: .92rem; color: var(--text); text-decoration: none; }

    .site-nav__actions {
        display: grid;
        gap: .6rem;
        margin-top: var(--s3);
        padding-top: var(--s3);
        border-top: 1px solid var(--line);
    }
    .site-nav__actions .btn { width: 100%; }
    .header__phone { justify-content: center; }

    /* Keep the sticky bottom bar from covering the end of the page. */
    body { padding-bottom: 56px; }
}

/* Tighter gutters on small phones. */
@media (max-width: 480px) {
    :root {
        --pad-box: 20px;
        --pad-box-sm: 16px;
        --gap: 18px;
        --gap-stack: 26px;
        --gap-heading: 30px;
    }
    .card-grid { grid-template-columns: minmax(0, 1fr); }
    .stat-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .btn { padding: 12px 20px; }
    .btn--lg { padding: 14px 22px; }
    .hero__actions .btn, .page-hero__actions .btn, .cta-band__actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   22. MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .btn:hover, .service-card:hover { transform: none; }
}

@media print {
    .topbar, .site-header, .site-footer, .cta-band, .mobile-cta, .nav-toggle, .hero__bg { display: none !important; }
    body { font-size: 11pt; color: #000; padding-bottom: 0; }
    .container { max-width: none; padding-inline: 0; }
    .section { padding-block: 1rem; }
    a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}

/* ==========================================================================
   23. ALIGNMENT & ICON REFINEMENTS
   --------------------------------------------------------------------------
   Larger centred icons, centred card content, centred pricing columns.
   Loaded last so it wins over the component rules above.
   ========================================================================== */

/* Larger, consistently centred card icons */
.service-card__icon,
.feature-card__icon,
.area-card__icon,
.aside-card__icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: var(--r-md);
}
.service-card__icon svg,
.feature-card__icon svg,
.area-card__icon svg,
.aside-card__icon svg { width: 26px; height: 26px; }

/* Feature cards — fully centred */
.feature-card { align-items: center; text-align: center; }
.feature-card__icon { margin: 0 auto var(--s3); }

/* Service cards — centred content, price badge sits beneath the icon */
.service-card { align-items: center; text-align: center; }
.service-card__top { flex-direction: column; align-items: center; gap: .6rem; }
.service-card__icon { margin: 0; }
.service-card__price { position: static; }
.service-card__text { max-width: 52ch; }
.service-card__link { margin-inline: auto; }

/* Area cards — centred intro, the two-column link list stays left to scan */
.area-card { align-items: center; text-align: center; }
.area-card__icon { margin: 0 auto var(--s3); }
.area-card__text { max-width: 48ch; }
.area-card .link-list { text-align: left; align-self: stretch; }

/* Group header — larger icon */
.group-header__icon { width: 60px; height: 60px; margin: 0 auto var(--s3); }
.group-header__icon svg { width: 28px; height: 28px; }

/* Process steps — centred content */
.process__step { text-align: center; }
.process__number { left: 50%; transform: translateX(-50%); }
.process__icon { display: grid; place-items: center; margin: .5rem auto .8rem; }
.process__icon svg { width: 28px; height: 28px; }
.process__text { max-width: 42ch; margin-inline: auto; }

/* Aside cards — left-aligned: a narrow sidebar box reads better flush-left,
   and icons sit beside their text rather than above it. */
.aside-card { align-items: stretch; text-align: left; }
.aside-card__icon { margin: 0 0 var(--s3); }
.aside-card__list { text-align: left; }
.aside-card__phone { margin-inline: 0; }

/* Pricing columns centred; the row-label column stays left-aligned */
.price-table th,
.price-table td { text-align: center; }
.price-table thead th:first-child,
.price-table tbody th { text-align: left; }

/* Quick-quote "Instant estimate" badge — the icon was stacking above the
   text because the badge was inline-block while svgs are block-level. */
.quick-quote__badge { display: inline-flex; align-items: center; gap: .4rem; }

/* Pricing plan cards — centre the name, price and note; keep the feature
   list left-aligned so its checkmarks line up in a column. */
.plan { align-items: center; text-align: center; }
.plan__badge { left: 50%; transform: translateX(-50%); }
.plan__features { align-self: stretch; text-align: left; }

/* Hero copy centres on the single-column (mobile) layout. */
@media (max-width: 860px) {
    .hero__copy { text-align: center; }
    .hero__lead { margin-inline: auto; }
    .hero__actions { justify-content: center; }
    .hero__points li { justify-content: center; }
}

/* ==========================================================================
   24. SPACING & SIDEBAR-LIST REFINEMENTS
   ========================================================================== */

/* Tight sections are genuinely tighter (FAQ groups, stats, estimator). */
.section--tight { padding-block: var(--s4); }

/* Jump nav: breathe — it was flush against the breadcrumb and the content. */
.jump-nav { margin: var(--s4) 0 var(--gap-heading); }

/* Sidebar list links: the icon was block-level, rendering above the text. */
.aside-card__list a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.aside-card__list a svg { flex: 0 0 auto; }

/* ==========================================================================
   25. RESPONSIVE CENTERING
   ========================================================================== */

@media (max-width: 640px) {
    /* Topbar: the two items wrapped left/right — stack and centre them. */
    .topbar__inner { justify-content: center; text-align: center; }
    .topbar__item { justify-content: center; }
    .topbar__item--hours { margin-left: 0; }
}

@media (max-width: 620px) {
    /* CTA band: centre the copy and the buttons. */
    .cta-band__inner { text-align: center; }
    .cta-band__text { margin-inline: auto; }
    .cta-band__actions { justify-content: center; }

    /* Footer: centre every column and the bottom bar. */
    .footer__grid { text-align: center; }
    .brand--footer { justify-content: center; }
    .footer__about { margin-inline: auto; }
    .footer__contact li { justify-content: center; }
    .footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: var(--s3); }
    .footer__legal { justify-content: center; }
}

/* ==========================================================================
   26. ESTIMATOR & SIDEBAR SPACING POLISH
   ========================================================================== */

/* Section sub-headings ("What is included", "Related services") get a
   consistent top/bottom rhythm. */
.h3 {
    font-size: 1.3rem;
    margin: var(--s4) 0 var(--s3);
}

/* Topbar: stack the two lines with no gap on phones. */
@media (max-width: 640px) {
    .topbar__inner { row-gap: 0; }
}

/* Estimator / quick-quote result: stack the price and the button vertically
   instead of cramming them side by side. */
.estimator__result {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--s3);
}
.estimator__result .btn { width: 100%; }

.quick-quote__price {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s3);
}
.quick-quote__price .btn { width: 100%; margin-top: 0; }

/* Sidebar boxes: even title -> text -> button -> phone spacing. */
.aside-card__title { margin: 0 0 .7rem; }
.aside-card__text { margin: 0 0 var(--s3); }
.aside-card .btn { margin: 0 0 var(--s2); }
.aside-card__phone { margin: 0; }

/* Two-column card grid (related services). */
.cards-grid--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) {
    .cards-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   27. PAGE-HERO CENTERING ON MOBILE
   ========================================================================== */
@media (max-width: 860px) {
    .page-hero { text-align: center; }
    .page-hero__title,
    .page-hero__lead { margin-inline: auto; }
    .page-hero__actions { justify-content: center; }
    .page-hero__meta { justify-content: center; }
    .page-hero .hero__points li { justify-content: center; }
    /* The dark price panel in the split heroes stays left-aligned. */
    .page-hero__split .price-panel { text-align: left; }
}

/* ==========================================================================
   28. SIDEBAR CONTACT LINKS
   --------------------------------------------------------------------------
   Every "get in touch" sidebar box follows one pattern:
     title -> text -> button -> phone -> email
   .aside-card__phone and .aside-card__email are inline-flex so the icon always
   sits BESIDE the text rather than above it (the block-level svg default).
   ========================================================================== */
.aside-card__email {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: var(--s2);
    font-size: .95rem;
    color: var(--ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.aside-card__email svg { flex: 0 0 auto; color: var(--brand); }
.aside-card__email:hover { color: var(--brand-dark); }

/* ==========================================================================
   29. SITE-WIDE RHYTHM, WIDTH & RESPONSIVE CENTERING PASS
   --------------------------------------------------------------------------
   29.1  The breadcrumb strip, and the first content band below it, are now
         identical on every page — content never starts at a different height.
   29.2  Two stacked plain-white bands share ONE gap instead of adding two.
   29.3  Notices always span the full content width.
   29.4  Mobile: the "section furniture" (notices, stat bars, group titles,
         breadcrumbs, split headings) is centred, while body copy and feature
         lists stay left-aligned for readability.
   ========================================================================== */

/* -- 29.1 Breadcrumb strip + first content band --------------------------- */
.breadcrumbs {
    padding-block: var(--s3);
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
}
.breadcrumbs__list { margin: 0; padding: 0; }

/* Whatever comes first after the crumbs starts the same distance down. */
.breadcrumbs + .section,
.breadcrumbs + .section--tight,
.breadcrumbs + .container > .section:first-child,
.breadcrumbs + .container > .section--tight:first-child {
    padding-top: var(--s4);
}

/* -- 29.2 One gap, not two, between stacked bands ------------------------ */
/* A plain white band sitting directly above another plain white band drops its
   bottom padding, so the join is a single --section-y gap. Tinted bands keep
   their padding on purpose: the colour change then lands in the middle of the
   gap rather than flush against the content.
   The CTA band is deliberately NOT collapsed: it is a dark full-width band, and
   the section above it still needs its own bottom padding, otherwise the last
   card or button in that section ends up glued to the band edge. */
.section:not(.section--tight):not(.section--tint):has(+ .section:not(.section--tint)) {
    padding-bottom: 0;
}

/* -- 29.3 Notices are always full content width -------------------------- */
.notice {
    width: 100%;
    max-width: none;
}

/* -- 29.4 Mobile centering ----------------------------------------------- */
@media (max-width: 640px) {
    /* Breadcrumb trail */
    .breadcrumbs__list {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Notices: icon stacks above the copy and everything centres */
    .notice {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .notice > div { width: 100%; }
    .notice__icon { margin: 0 auto var(--s2); }
    .notice__title,
    .notice__text { margin-inline: auto; }
    .notice__actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Stat bars */
    .stat-bar { text-align: center; }
    .stat-bar > li { align-items: center; }

    /* Headings that live inside split blocks */
    .split__aside { text-align: center; }
    .split__aside .eyebrow { justify-content: center; }

    /* FAQ group titles */
    .faq__group-title { text-align: center; }
}

/* ==========================================================================
   30. PRICE TABLE DIRECTLY BELOW A CARD GRID
   --------------------------------------------------------------------------
   .plan-grid / .cards-grid have no padding of their own and .table-wrap has no
   margin of its own either, so on the pricing page the recurring plan cards and
   the "home size" table used to render completely flush against each other.
   Use the same 46px rhythm the commercial table already gets below its heading.
   ========================================================================== */
.plan-grid + .table-wrap,
.cards-grid + .table-wrap {
    margin-top: var(--gap-heading);
}

/* ==========================================================================
   31. PRICE TABLE HEADER ROW
   --------------------------------------------------------------------------
   The "Home size / Weekly / Bi-weekly / Monthly" row is brand furniture, not a
   grey afterthought. Every cell now carries the same primary blue as the
   buttons with white text, so the row reads as ONE solid bar.
   ========================================================================== */
.price-table thead th {
    background: var(--brand);
    color: #fff;
    border-bottom: 1px solid var(--brand-dark);
}

/* .table-wrap has a 14px radius but visible overflow, so the header row has to
   round its own outer corners to sit neatly inside the frame. */
.price-table thead tr:first-child th:first-child { border-top-left-radius: 13px; }
.price-table thead tr:first-child th:last-child { border-top-right-radius: 13px; }

/* ==========================================================================
   32. BUTTON SYSTEM — ONE BLUE, ONE WHITE
   --------------------------------------------------------------------------
   Two tiers, always used in the same roles sitewide:
     --primary   solid brand blue    -> the main action
     --outline   solid white button  -> the secondary action next to it
   The dark quote band flips the pairing so it stays legible there:
     --light        solid white     -> the main action
     --ghost-light  white outline   -> the secondary action
   --sm / --lg / --block stay pure size modifiers.

   Card call-to-actions are the one exception: they use the brand tint instead
   of white, because they sit inside white cards where a white button has no
   edge and the card reads as having no action at all. See section 33.
   ========================================================================== */
.btn--primary {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
}
.btn--primary:hover,
.btn--primary:focus {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

/**/
.btn--outline {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
}
.btn--outline:hover,
.btn--outline:focus {
    background: var(--brand-tint-2);
    border-color: var(--brand);
    color: var(--brand-dark);
}

.btn--light {
    background: var(--surface);
    border: 1px solid var(--surface);
    color: var(--brand-deep);
}
.btn--light:hover,
.btn--light:focus {
    background: var(--brand-tint);
    border-color: var(--brand-tint);
    color: var(--brand-deep);
}

.btn--ghost-light {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
}
.btn--ghost-light:hover,
.btn--ghost-light:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    color: #fff;
}

.btn:focus-visible,
.btn--primary:focus-visible,
.btn--outline:focus-visible,
.btn--light:focus-visible,
.btn--ghost-light:focus-visible {
    outline: 3px solid var(--brand-bright);
    outline-offset: 2px;
}

/* ==========================================================================
   33. CARD CALL-TO-ACTIONS ARE BUTTONS, NOT TEXT
   --------------------------------------------------------------------------
   "Learn more" / "Everything in Chilliwack" used to be a small coloured text
   link with a 23px tap target — awkward to hit on a phone and visually weaker
   than everything around it. Every card CTA is now a full-width solid button.

   The fill was a pale blue (--brand-tint-2) intended as a "quiet" tier below
   the solid primary buttons. On a white card it read washed out and slightly
   grubby beside the crisper blue used everywhere else, so card CTAs now use the
   same --brand blue as .btn--primary and deepen to --brand-dark on hover.
   ========================================================================== */
.service-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    align-self: stretch;
    width: 100%;
    margin-top: var(--s3);
    padding: 0.7rem 1.1rem;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: var(--r-pill);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: var(--t);
}
.service-card__link:hover,
.service-card__link:focus {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}
.service-card__link svg { flex: 0 0 auto; }

/* ==========================================================================
   34. HEADER + FOOTER LOGO
   ========================================================================== */
.site-header .brand__mark,
.site-footer .brand__mark {
    display: block;
    width: 42px;
    height: 42px;
    padding: 0;
    background: none;
    border-radius: 0;
    object-fit: contain;
}

/* ==========================================================================
   35. CARD CTAs ALWAYS ALIGN TO THE BOTTOM OF THE CARD
   --------------------------------------------------------------------------
   Cards in a grid row are already equal height (grid stretch), but each CTA
   used to sit wherever the copy above it happened to end. On /service-areas
   that put the Mission button 24px higher than its two neighbours, because
   .service-card__text grows (flex: 1 1 auto) while .area-card__text did not.

   `margin-top: auto` on the CTA pins it to the bottom edge of its card, so
   every button in a row lines up regardless of how long the copy is. The
   breathing room ABOVE the button still comes from the preceding block's own
   margin-bottom, so the button never goes tight against the text.
   ========================================================================== */
.area-card > .service-card__link,
.service-card > .service-card__link,
.plan > .btn,
.testimonial-card > .btn {
    margin-top: auto;
}

/* ==========================================================================
   36. TRUST STRIP
   --------------------------------------------------------------------------
   Four signals instead of six slogans. Each one now carries a supporting line
   that says something concrete ("Criminal check on every cleaner" rather than
   a bare label), and each icon chip gets its own accent tint so the row has
   colour instead of reading as six identical grey phrases.
   Sits on the page background — no band colour, no cards — separated by
   hairlines: vertical dividers across the row on desktop, tidelines between the
   rows on a phone.
   ========================================================================== */
.trust-strip {
    padding-block: 0;
    background: transparent;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.trust-strip__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    text-align: center;
}

.trust-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--s2);
}

/* Deliberately identical to every other icon box on the site — the service,
   area, feature, group-header and aside cards all use 56x56, --r-md radius,
   --brand-tint-2 fill and a --brand-dark glyph. The trust bar previously used
   its own 40px circle, its own tint and its own blue, which is what made it
   look like it belonged to a different design. */
.trust-strip__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    margin-bottom: 0.7rem;
    border-radius: var(--r-md);
    background: var(--brand-tint-2);
    color: var(--brand-dark);
}

.trust-strip__icon svg {
    width: 26px;
    height: 26px;
}

.trust-strip__label {
    margin: 0;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
}

.trust-strip__sub {
    margin: 0.25rem 0 0;
    color: var(--text-soft);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
}

/* Phone: a tideline between the two rows. */
.trust-strip__item:nth-child(n + 3) {
    border-top: 1px solid var(--line-soft);
}

@media (min-width: 860px) {
    .trust-strip__inner {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .trust-strip__item {
        padding: var(--s4) var(--s3);
    }

    /* One row on desktop, so the tidelines become vertical dividers. */
    .trust-strip__item:nth-child(n + 3) {
        border-top: 0;
    }

    .trust-strip__item + .trust-strip__item {
        border-left: 1px solid var(--line-soft);
    }
}

/* ==========================================================================
   37. INSTANT ESTIMATE — CENTRED ONCE THE HERO STACKS
   --------------------------------------------------------------------------
   Below 860px the hero collapses to one column and the estimate card goes full
   width, so left-aligned contents left a long empty right edge. The badge,
   title, price and disclaimer centre; the form controls deliberately stay left,
   because centred <select> and <label> text is genuinely harder to scan.
   ========================================================================== */
@media (max-width: 859px) {
    .quick-quote { text-align: center; }

    /* The badge is inline-flex, so text-align already centres it — this is the
       belt-and-braces version for very narrow phones. */
    .quick-quote__badge { margin-inline: auto; }

    .quick-quote__note { margin-inline: auto; }

    .quick-quote .field,
    .quick-quote .field label,
    .quick-quote .field select {
        text-align: left;
    }
}

/* ==========================================================================
   38. MOBILE NAVIGATION
   --------------------------------------------------------------------------
   Three defects this fixes:

   1. CLOSE BUTTON UNREACHABLE. The panel was a full-viewport fixed overlay at
      z-index 99 while .header__mobile-actions carried no z-index at all, so the
      panel painted straight over the hamburger. There was literally no way to
      close the menu. The panel now starts BELOW the header, so the logo and the
      toggle stay visible and clickable.

   2. MEGA-MENU DUMP. Expanding "Services" injected the whole desktop mega panel
      (669px: three columns plus a promo block) into the list. It is now a real
      accordion: single column, grouped by family, animated open/closed.

   3. NO CONTACT. The panel carried no phone, email or hours. There is now a
      contact block at the foot of the panel.
   ========================================================================== */
@media (max-width: 1024px) {
    /* ---- Backdrop ---- */
    .nav-backdrop { display: none; }

    html.nav-open .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 96;
        background: rgba(13, 21, 36, .45);
        -webkit-tap-highlight-color: transparent;
    }

    /* ---- Drawer ----
       Anchored to the RIGHT edge — the same side as the toggle that opens it —
       and pinned top:0 / bottom:0 so there is never a gap above or below.

       The previous version set left:0 + right:0 without resetting the inherited
       width, so on any viewport wider than 420px `left` won and the panel opened
       on the LEFT while its button sat on the right. Width is now explicit and
       `left` is reset to auto. */
    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(400px, 88vw);
        height: auto;
        padding: 0;
        display: block;
        z-index: 97;
        background: var(--surface);
        border: 0;
        border-left: 1px solid var(--line);
        box-shadow: -24px 0 50px -30px rgba(13, 21, 36, .45);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        visibility: hidden;
        opacity: 1;
        transition: transform .26s var(--ease), visibility .26s var(--ease);
        scrollbar-width: none;
    }

    .site-nav::-webkit-scrollbar { width: 0; height: 0; }

    .site-nav.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    /* The page header sits behind the overlay while the drawer is open — the
       drawer carries its own brand row and close button instead. That also
       removes any dependency on where the sticky header happens to be. */
    html.nav-open .header__mobile-actions { visibility: hidden; }

    /* ---- Drawer head ---- */
    .site-nav__head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s2);
        padding: var(--s2) var(--s3);
        background: var(--surface);
        border-bottom: 1px solid var(--line);
    }

    .site-nav__brand {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-width: 0;
    }

    .site-nav__brand img { flex: 0 0 auto; width: 34px; height: 34px; }

    .site-nav__brand strong {
        display: block;
        font-family: var(--font-display);
        font-size: 1.06rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        color: var(--ink);
    }

    .site-nav__brand strong i { font-style: normal; color: var(--brand); }

    .site-nav__brand em {
        display: block;
        font-style: normal;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-soft);
    }

    .nav-close {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--surface-soft);
        color: var(--ink);
        cursor: pointer;
    }

    .nav-close:hover { background: var(--brand-tint-2); border-color: var(--brand); color: var(--brand-dark); }

    .nav-close svg { width: 16px; height: 16px; }

    /* ---- Drawer body ---- */
    .site-nav .site-nav__list {
        display: block;
        margin: 0;
        padding: var(--s1) var(--s3) 0;
        list-style: none;
    }

    /* ---- Top-level rows ---- */
    .site-nav .site-nav__list > li {
        border-bottom: 1px solid var(--line-soft);
    }

    .site-nav .site-nav__list > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: 54px;
        padding: 0.9rem 0.25rem;
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--ink);
        text-decoration: none;
        background: none;
        border-radius: 0;
    }

    /* Active page: brand colour and weight, not a random grey pill. */
    .site-nav .site-nav__list > li > a.is-active,
    .site-nav .site-nav__list > li > a[aria-current] {
        color: var(--brand);
        background: none;
    }

    .site-nav .has-submenu > a svg {
        flex: 0 0 auto;
        color: var(--text-soft);
        transition: transform .22s ease, color .22s ease;
    }

    .site-nav .has-submenu.is-expanded > a {
        color: var(--brand-dark);
    }

    .site-nav .has-submenu.is-expanded > a svg {
        transform: rotate(180deg);
        color: var(--brand);
    }

    /* ---- Accordion (animated, no fixed heights needed) ---- */
    .site-nav .has-submenu > .mega,
    .site-nav .has-submenu > .dropdown {
        display: grid;
        grid-template-rows: 0fr;
        position: static;
        opacity: 0;
        overflow: hidden;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        transition: grid-template-rows .24s ease, opacity .2s ease;
    }

    .site-nav .has-submenu > .mega > *,
    .site-nav .has-submenu > .dropdown > * {
        min-height: 0;
    }

    .site-nav .has-submenu.is-expanded > .mega,
    .site-nav .has-submenu.is-expanded > .dropdown {
        grid-template-rows: 1fr;
        opacity: 1;
    }

    /* ---- Services mega-menu, flattened into the accordion ---- */
    .site-nav .mega__inner {
        display: block;
        padding: 0 0 var(--s2);
    }

    .site-nav .mega__column {
        margin-bottom: var(--s3);
    }

    .site-nav .mega__heading {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin: 0 0 0.35rem;
        padding: 0 0.25rem;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--text-soft);
        border: 0;
    }

    .site-nav .mega__heading svg {
        color: var(--brand);
    }

    .site-nav .mega__list {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-nav .mega__list li {
        border: 0;
        margin: 0;
    }

    .site-nav .mega__list a {
        display: block;
        padding: 0.62rem 0.25rem 0.62rem 0.9rem;
        font-size: 0.94rem;
        color: var(--text);
        text-decoration: none;
        border-left: 2px solid var(--line);
    }

    .site-nav .mega__list a:active,
    .site-nav .mega__list a:hover {
        color: var(--brand-dark);
        border-left-color: var(--brand);
    }

    /* The promo block belongs to the desktop hover panel, not the phone list —
       the panel already carries its own quote button. */
    .site-nav .mega__promo {
        display: none;
    }

    /* ---- Areas dropdown ---- */
    .site-nav .dropdown > ul {
        margin: 0;
        padding: 0 0 var(--s2);
        list-style: none;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .site-nav .dropdown > ul > li {
        border: 0;
        margin: 0;
    }

    .site-nav .dropdown > ul > li > a {
        display: block;
        padding: 0.62rem 0.25rem 0.62rem 0.9rem;
        font-size: 0.94rem;
        color: var(--text);
        text-decoration: none;
        border-left: 2px solid var(--line);
    }

    .site-nav .dropdown > ul > li > a:active {
        color: var(--brand-dark);
        border-left-color: var(--brand);
    }

    /* ---- Actions ---- */
    .site-nav .site-nav__actions {
        display: grid;
        gap: var(--s2);
        margin: 0 var(--s3);
        padding-top: var(--s4);
        border-top: 1px solid var(--line);
    }

    /* The contact block below covers the phone number — don't print it twice. */
    .site-nav .site-nav__actions .header__phone {
        display: none;
    }

    .site-nav .site-nav__actions .btn {
        width: 100%;
        min-height: 50px;
    }

    /* ---- Contact block ---- */
    .nav-contact {
        display: grid;
        gap: 2px;
        margin: 0 var(--s3);
        padding: var(--s4) 0 var(--s6);
    }

    .nav-contact__row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 0.25rem;
        color: var(--ink);
        text-decoration: none;
    }

    .nav-contact__icon {
        display: grid;
        place-items: center;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--brand-tint-2);
        color: var(--brand-dark);
    }

    .nav-contact__row strong {
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-soft);
    }

    .nav-contact__row em {
        display: block;
        font-style: normal;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--ink);
    }

    /* Footer line inside the panel */
    .nav-contact__foot {
        margin: var(--s3) 0 0;
        padding: 0 0.25rem;
        font-size: 0.82rem;
        color: var(--text-soft);
    }
}

/* Drawer-only elements must never render on desktop. (These have to be
   min-width rules: an unconditional rule placed here would land AFTER the
   mobile block above and switch them off on phones too.) */
@media (min-width: 1025px) {
    .nav-contact,
    .site-nav__head,
    .nav-backdrop {
        display: none;
    }
}

/* ==========================================================================
   39. TOPBAR BREATHING ROOM ON SMALL SCREENS
   --------------------------------------------------------------------------
   On a phone the two topbar items stack, so the bar is already two lines tall
   and carries no vertical padding at all — the text sits hard against the top
   and bottom edges of the blue band.

   Safe to pad: --topbar-h is only a min-height on .topbar__inner, and the
   sticky header pins to top:0, so the topbar height does not feed into the
   sticky offset.
   ========================================================================== */
@media (max-width: 1024px) {
    .topbar {
        padding-block: 5px;
    }
}

/* ==========================================================================
   40. GLASS HEADER
   --------------------------------------------------------------------------
   The blur deliberately lives on a ::before pseudo-element rather than on
   .site-header itself.

   backdrop-filter on .site-header would make it a containing block for
   position:fixed descendants — and .site-nav IS the mobile drawer, so it would
   collapse from full-height down to the 68px header box. On a pseudo-element
   with no descendants that risk does not exist, so the glass can work at every
   width instead of desktop-only.

   The header's own background is made transparent so the pseudo-element's tint
   and blur are what you actually see through.
   ========================================================================== */
.site-header {
    background: transparent;
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

/* Kept subtle on purpose: the tint is 74% white over a white site, so the glass
   only really registers when something with colour slides underneath it. */
.site-header.is-stuck {
    box-shadow: 0 12px 28px -26px rgba(13, 21, 36, .5);
}

/* No backdrop-filter support (or it is disabled): revert to the solid bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header {
        background: var(--surface);
    }
}

/* Respect users who ask for less transparency. */
@media (prefers-reduced-transparency: reduce) {
    .site-header,
    .site-header::before {
        background: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ==========================================================================
   41. HERO SPARKLES — ambient "clean sparkle"
   --------------------------------------------------------------------------
   Twelve stars, each with its own position, size, speed and phase. Nothing is
   shared, so no two stars can ever fall into step — there is no repeating
   lattice and no "batch" of stars pulsing together.

   Two details matter for how it feels:

   * Every star gets its OWN animation-duration (3.3s-6.8s). A shared duration
     with staggered delays still produces a metronome — the pattern repeats and
     the eye reads a group. Varying the speed breaks that completely.
   * Delays are NEGATIVE (a phase offset, not a wait). The field is therefore
     already mid-twinkle on the first frame instead of being dark for the first
     six seconds while twenty positive delays elapse.

   The halo is a radial gradient on its own composited layer, NOT
   filter:drop-shadow(). Twenty drop-shadow filters had to be re-rendered every
   frame, which is what made the original feel sluggish. Nothing here animates
   anything but transform and opacity, so the whole effect stays on the
   compositor: no per-frame layout and no per-frame paint.

   The hero is already overflow:hidden, so a star near an edge cannot create a
   scrollbar.
   ========================================================================== */
.hero__sparkle {
    position: absolute;
    top: var(--y, 0);
    left: var(--x, 0);
    width: var(--sz, 16px);
    height: var(--sz, 16px);
    opacity: 0;
    animation: tg-twinkle var(--dur, 4.5s) cubic-bezier(.45, 0, .55, 1) infinite;
    animation-delay: var(--dl, 0s);
    will-change: transform, opacity;
}

/* Soft halo — kept deliberately faint so it reads as a twinkle rather than a
   smear of blue. On a pseudo-element because clip-path on .hero__sparkle itself
   would clip the glow away with the star. */
.hero__sparkle::before {
    content: "";
    position: absolute;
    inset: -80%;
    border-radius: 50%;
    background: radial-gradient(
        closest-side,
        rgba(56, 189, 248, .28),
        rgba(56, 189, 248, 0) 68%
    );
}

/* The star. Concave 4-point sparkle, sampled from the classic sparkle curve
   (M12 0 C12 6 18 12 24 12 ...) so the sides bow inward — a straight-edged
   star reads as an x once it gets small. */
.hero__sparkle::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, var(--brand-bright), var(--brand-dark));
    clip-path: polygon(
        50% 0%,
        54.3% 18.4%, 65.6% 34.4%, 81.6% 45.7%,
        100% 50%,
        81.6% 54.3%, 65.6% 65.6%, 54.3% 81.6%,
        50% 100%,
        45.7% 81.6%, 34.4% 65.6%, 18.4% 54.3%,
        0% 50%,
        18.4% 45.7%, 34.4% 34.4%, 45.7% 18.4%
    );
}

/* A quick flash rather than a slow swell. The star is lit for roughly the first
   third of its cycle and dark for the rest, which keeps the field to about
   three stars at any moment — and because every star is at a different stage of
   its own flash, they read as separate twinkles rather than a synced group. */
@keyframes tg-twinkle {
    0%   { opacity: 0;   transform: scale(.1) rotate(-12deg); }
    10%  { opacity: .95; transform: scale(1) rotate(16deg); }
    22%  { opacity: .92; transform: scale(1.08) rotate(44deg); }
    36%  { opacity: 0;   transform: scale(.1) rotate(78deg); }
    100% { opacity: 0;   transform: scale(.1) rotate(78deg); }
}

/* Durations run a deliberately irregular 3.3s-6.3s so no two stars can ever
   hold a relationship, and sizes span 12px-24px.

   The delays are NOT random. Each star sits at its own evenly-spaced slot
   around its own cycle (1/12th apart, with a small jitter so it never looks
   mechanical). Random phases seem tempting, but they clump: measured over 4.5s
   the random version produced a half-second window where not a single star was
   lit, then seven at once. Spacing the phases keeps the field even — roughly
   three glowing at any moment, and no dead spot.

   Order: position, size, duration, phase offset. */
.hero__sparkle:nth-child(1)  { --x:  5%; --y:  8%; --sz: 22px; --dur: 4.3s; --dl:  0s; }
.hero__sparkle:nth-child(2)  { --x: 24%; --y: 30%; --sz: 14px; --dur: 5.7s; --dl: -0.49s; }
.hero__sparkle:nth-child(3)  { --x: 40%; --y: 11%; --sz: 18px; --dur: 3.9s; --dl: -0.63s; }
.hero__sparkle:nth-child(4)  { --x: 58%; --y: 34%; --sz: 24px; --dur: 6.1s; --dl: -1.54s; }
.hero__sparkle:nth-child(5)  { --x: 76%; --y:  7%; --sz: 16px; --dur: 4.8s; --dl: -1.58s; }
.hero__sparkle:nth-child(6)  { --x: 90%; --y: 26%; --sz: 20px; --dur: 5.2s; --dl: -2.19s; }
.hero__sparkle:nth-child(7)  { --x: 11%; --y: 55%; --sz: 15px; --dur: 3.5s; --dl: -1.74s; }
.hero__sparkle:nth-child(8)  { --x: 30%; --y: 72%; --sz: 23px; --dur: 6.6s; --dl: -3.88s; }
.hero__sparkle:nth-child(9)  { --x: 50%; --y: 48%; --sz: 12px; --dur: 4.1s; --dl: -2.71s; }
.hero__sparkle:nth-child(10) { --x: 68%; --y: 63%; --sz: 17px; --dur: 5.5s; --dl: -4.15s; }
.hero__sparkle:nth-child(11) { --x: 84%; --y: 46%; --sz: 21px; --dur: 3.7s; --dl: -3.07s; }
.hero__sparkle:nth-child(12) { --x:  8%; --y: 86%; --sz: 19px; --dur: 6.3s; --dl: -5.80s; }

/* Motion off: keep the decoration as a still shimmer rather than removing it. */
@media (prefers-reduced-motion: reduce) {
    .hero__sparkle {
        animation: none;
        opacity: .3;
        transform: none;
        will-change: auto;
    }
}

/* On a phone the hero is much taller and the copy fills more of it — halve the
   field to ten stars, and scale the survivors down so none of them crowds the
   headline. */
@media (max-width: 640px) {
    .hero__sparkle {
        width: calc(var(--sz, 16px) * .74);
        height: calc(var(--sz, 16px) * .74);
    }

    .hero__sparkle:nth-child(even) {
        display: none;
    }
}

/* ==========================================================================
   42. POST-SUBMISSION SUMMARY LIST
   --------------------------------------------------------------------------
   The thank-you hero is centre-aligned, so a bare <ul> of Service / City /
   Reference rendered as a couple of stray centred bullet points, which read as
   a mistake at every width. It is now a row of labelled cards: the group stays
   centred, but each card is internally left-aligned so the values line up and
   are actually scannable. Collapses to a single column on a phone.
   ========================================================================== */
.summary-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: var(--s3) 0 0;
    padding: 0;
    list-style: none;
}

.summary-list li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 9.5rem;
    padding: 0.7rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-align: left;
}

.summary-list span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.summary-list strong {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink);
}

@media (max-width: 480px) {
    .summary-list {
        display: grid;
        grid-template-columns: 1fr;
    }

    .summary-list li {
        min-width: 0;
    }
}

/* ==========================================================================
   43. ADD-ON LISTS
   --------------------------------------------------------------------------
   Two separate problems lived here.

   (a) Popular add-ons: the tick icon was a block-level SVG inside a
       block-level <span>. A block inside a block forces its own line, so the
       icon sat ABOVE the label at every width instead of beside it. The span
       is now an inline-flex row, so icon and label share a line and the icon
       centres optically on the text.

   (b) The estimator's add-on picker was a bare wrapping flex row of unstyled
       labels — ten items ragged across the width, no visible hit area, the
       price floating wherever it landed, and nothing at all to show which
       add-ons were selected. Each add-on is now a real selectable card in an
       auto-fitting grid, price pinned right, with a brand-tinted selected
       state.
   ========================================================================== */

/* (a) Popular add-ons list ------------------------------------------------- */
.addon-list li > span {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    line-height: 1.35;
}

.addon-list li > span svg {
    flex: 0 0 auto;
    color: var(--brand);
}

/* (b) Estimator add-on picker --------------------------------------------- */
.estimator__checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.5rem;
    margin-top: 0.55rem;
}

.estimator__checks .checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: var(--t);
}

.estimator__checks .checkbox:hover {
    background: var(--brand-tint-2);
    border-color: var(--brand);
}

.estimator__checks .checkbox:has(input:checked) {
    background: var(--brand-tint-2);
    border-color: var(--brand);
}

.estimator__checks .checkbox input {
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--brand);
}

.estimator__checks .checkbox > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.3;
}

.estimator__checks em {
    margin-left: auto;
    font-style: normal;
    font-weight: 700;
    color: var(--brand-dark);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .estimator__checks {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   44. Service areas index — every service, by city
   --------------------------------------------------------------------------
   The /service-areas hub previously linked only to the three city pages, so
   the 24 service × city landing pages — the highest-intent layer on the site —
   had barely any internal links pointing at them. This directory gives the hub
   something to distribute authority through.
   ========================================================================== */
.area-index {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--s3) var(--s2);
}

.area-index__city {
    margin: 0 0 0.7rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--brand-tint);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.area-index__list {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.area-index__list a {
    display: inline-block;
    color: var(--brand-dark);
    font-size: 0.92rem;
    line-height: 1.4;
    text-decoration: none;
}

.area-index__list a:hover {
    color: var(--brand);
    text-decoration: underline;
}

/* On a phone every other block on the service-areas page centres — the section
   heading, the city cards and the notice all do — so this directory should too.
   It was the only left-aligned section left on the page. */
@media (max-width: 640px) {
    .area-index {
        text-align: center;
    }

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

/* ==========================================================================
   45. Aside cards — mobile alignment
   --------------------------------------------------------------------------
   These promo cards were internally inconsistent: the button label centre-
   aligned while the heading, the body copy and the phone/email links stayed
   hard left. That mix is what reads as "off" on a phone, and it affected 69 of
   the 76 pages, since every service and location page carries one.

   The surrounding blocks already centre on mobile — the hero lead, section
   headings, notice cards, area cards and the footer — so these now match.
   Two things are deliberately left alone: the Opening hours rows are a
   two-column day/time layout that has to stay a row, and form cards stay
   left-aligned because a form is data, not prose.
   ========================================================================== */
@media (max-width: 640px) {
    .aside-card {
        text-align: center;
    }

    .aside-card__phone,
    .aside-card__email {
        justify-content: center;
    }

    /* Centring a tick list item by item leaves every row starting at a
       different point. Centring the list block instead keeps all the rows on a
       common left edge, which is tidier and still balances under the heading. */
    .aside-card__list--plain {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        text-align: left;
    }

    .aside-card__list--plain li {
        justify-content: flex-start;
    }

    /* Day on the left, hours on the right — a row, not a centred block. */
    .aside-card .hours li {
        justify-content: space-between;
    }
}

/* ==========================================================================
   46. Standards & references
   --------------------------------------------------------------------------
   Editorial citations on service pages. Outbound links are not a ranking
   factor, but naming the authority behind a compliance claim is a genuine
   trust signal — so this is styled to read as a reference note, not an advert.
   ========================================================================== */
.source-list {
    margin: var(--s3) 0 0;
    padding: var(--s2) var(--s3);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-sm);
}

.source-list .h3 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.source-list ul {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.source-list a {
    color: var(--brand-dark);
    font-size: 0.9rem;
    text-decoration: underline;
}

.source-list a:hover {
    color: var(--brand);
}

/* ==========================================================================
   47. CARD ICONS — SOLID BLUE CIRCLES
   --------------------------------------------------------------------------
   Card icons were rounded squares on a pale tint with a blue glyph, which left
   them looking like soft chips rather than marks. They are now solid
   --brand circles with a white glyph, so they sit in the same colour family as
   the card CTAs directly beneath them.

   The icon SVGs are authored with stroke="currentColor", so setting color to
   white is all that is needed to invert every glyph — no per-icon overrides.

   Appended at the end of the sheet on purpose: every one of these selectors is
   (0,1,0) and matches an earlier rule, so source order is what makes it win.
   ========================================================================== */
.service-card__icon,
.feature-card__icon,
.area-card__icon,
.aside-card__icon,
.group-header__icon {
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
}

/* ==========================================================================
   48. HERO AND CTA BUTTON SIZING
   --------------------------------------------------------------------------
   Buttons in hero, CTA-band and notice rows were content-sized, so a short
   label sat beside a long one at a visibly different width. The CTA band ran
   237px against 289px on every one of the 76 pages — a 52px mismatch that
   reads as sloppy however good the individual buttons look.

   A shared min-width fixes it: the floor is set to the longest label in use
   ("Call or text 604-200-9577" at 289px), so short buttons pad out to match
   and no label is ever squeezed onto a second line. Using min-width rather
   than a fixed width means a future longer label grows rather than wraps.
   ========================================================================== */
.hero__actions .btn,
.page-hero__actions .btn,
.cta-band__actions .btn,
.notice__actions .btn {
    min-width: min(19rem, 100%);
    justify-content: center;
    text-align: center;
}

/* Below this the pair can no longer sit side by side at full size, so they
   stack and fill the row instead — which also keeps the two identical. */
@media (max-width: 620px) {
    .hero__actions .btn,
    .page-hero__actions .btn,
    .cta-band__actions .btn,
    .notice__actions .btn {
        flex: 1 1 100%;
    }
}

/* The CTA band held its copy and its buttons in two columns from 620px up,
   which left the actions column only 232px wide at 620px — narrower than a
   single button, so both of them spilled out of their own container. Going
   single-column below 900px gives the buttons their full width back and keeps
   them inside the layout box at every size. */
@media (max-width: 900px) {
    .cta-band__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .cta-band__actions {
        justify-content: flex-start;
    }
}

/* Safety net for very narrow screens: a long label on the largest button tier
   ("See full pricing & instant estimate") measured 328px inside a 280px
   container at 320px and pushed the whole page sideways. Capping the button at
   its container lets the label wrap instead of overflowing. */
.btn {
    max-width: 100%;
}