/* Shared design system for the home-services leaf templates ONLY.
       Included by the home-services leaf page templates.

       Two colours carry the whole page: deep navy for authority, one warm amber for every
       call-to-action. Sections alternate white / warm-grey / navy so the page reads as a
       sequence of designed bands rather than one long column of text.

       One hero photograph, applied as a CSS background over a gradient so a CDN failure
       degrades to the gradient instead of a broken image. Every other graphic is inline SVG
       or pure CSS and ships inside the HTML. Class names match the existing markup so the
       RUN 333 render contracts are untouched -- selectors are added here, never renamed. */
    :root {
        --ink: #12212f;
        --ink-soft: #45566a;
        --muted: #6b7a89;
        --brand: #143d59;
        --brand-deep: #0b2233;
        --brand-mid: #1b4f70;
        --brand-tint: #eaf0f5;
        /* One accent, used for every CTA, every divider rule and every stat figure. Amber
           with navy text on the button clears WCAG AA comfortably (9.4:1), and amber on the
           navy bands clears it as a figure colour (8.1:1). */
        --cta: #f5a524;
        --cta-deep: #b8730a;
        --cta-ink: #12212f;
        --surface: #f7f6f2;
        --card: #ffffff;
        --line: #e2dfd6;
        --line-soft: #edeae2;
        --shadow-sm: 0 1px 2px rgba(11, 34, 51, 0.06), 0 2px 8px rgba(11, 34, 51, 0.05);
        --shadow-md: 0 10px 28px rgba(11, 34, 51, 0.13);
        --shadow-lg: 0 22px 50px rgba(11, 34, 51, 0.18);
        --band-pad: 5.5rem;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        color: var(--ink);
        background: var(--card);
        font-size: 17px;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
    }

    a { color: var(--brand); }

    h1, h2, h3 { text-wrap: balance; }

    /* Phone numbers line up and stop shifting width mid-animation. */
    .callbar-cta, .cta-button, .cta, .stat-num { font-variant-numeric: tabular-nums; }

    /* ------------------------------------------------------------- sticky call bar (top) */
    .callbar {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(11, 34, 51, 0.97);
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }
    .callbar-inner {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0.6rem 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    .callbar-brand {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        color: #fff;
        font-size: 1.12rem;
        font-weight: 800;
        letter-spacing: -0.015em;
        white-space: nowrap;
    }
    .callbar-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: var(--cta);
        color: var(--brand-deep);
        flex: none;
    }
    .callbar-mark svg { width: 17px; height: 17px; }
    .callbar-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--cta);
        color: var(--cta-ink);
        font-weight: 800;
        font-size: 0.98rem;
        text-decoration: none;
        padding: 0.6rem 1.15rem;
        border-radius: 8px;
        white-space: nowrap;
        transition: background 0.15s ease, transform 0.15s ease;
    }
    .callbar-cta:hover { background: #ffb733; transform: translateY(-1px); }
    .callbar-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
    .callbar-cta svg { width: 16px; height: 16px; flex: none; }

    /* ---------------------------------------------------------------- above the fold */
    .hero {
        position: relative;
        background-color: var(--brand-deep);
        /* Three layers, front to back. The worker in the roofing photograph is composed dead
           centre, which is exactly where the centred headline lands, so the amber accent line
           was sitting on a hi-vis shirt at roughly 3.5:1. The ellipse darkens the copy column
           only and fades out well inside the frame; because it carries that load, the flat
           wash underneath can be lighter than it used to be, and the worker actually reads
           more clearly now than he did under a single heavy scrim.

           The ellipse is a variable so the narrow breakpoint can retune it without repeating
           the photo URL. It has to: a portrait viewport crops a different slice of the same
           photograph, and there the accent line lands on open sky rather than on the roof. */
        --hero-scrim: radial-gradient(62% 68% at 50% 44%,
            rgba(6, 20, 31, 0.72) 0%,
            rgba(6, 20, 31, 0.62) 48%,
            rgba(6, 20, 31, 0.26) 76%,
            rgba(6, 20, 31, 0.08) 100%);
        background-image:
            var(--hero-scrim),
            linear-gradient(180deg, rgba(8, 24, 36, 0.60) 0%, rgba(8, 24, 36, 0.38) 42%, rgba(8, 24, 36, 0.88) 100%),
            url("hero.jpg");
        background-size: cover;
        background-position: center 42%;
        background-repeat: no-repeat;
        color: #fff;
        padding: 5.5rem 1.5rem 4.5rem;
        text-align: center;
    }
    /* Hairline of accent colour along the bottom edge ties the hero to the phone button. */
    .hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 4px;
        background: var(--cta);
    }
    .hero-inner {
        position: relative;
        max-width: 820px;
        margin: 0 auto;
    }
    .hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.30);
        border-radius: 999px;
        padding: 0.35rem 0.95rem;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #fff;
        margin: 0 auto 1.25rem;
    }
    .hero-eyebrow svg { width: 15px; height: 15px; flex: none; color: var(--cta); }
    .hero h1 {
        font-size: clamp(2.1rem, 5.4vw, 3.4rem);
        line-height: 1.08;
        letter-spacing: -0.028em;
        font-weight: 800;
        max-width: 20ch;
        margin: 0 auto 1rem;
        text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
    }
    .hero-accent { color: var(--cta); display: block; }
    .hero p {
        font-size: 1.12rem;
        line-height: 1.6;
        color: #e6eef4;
        max-width: 58ch;
        margin: 0 auto 2rem;
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
    }
    .hero-note {
        font-size: 0.93rem !important;
        color: #cfdde8 !important;
        margin: 1.1rem auto 0 !important;
        letter-spacing: 0.01em;
    }

    /* The money element: one primary phone CTA, thumb-friendly (>=52px tall) on mobile. */
    .cta-button, .cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        background: var(--cta);
        color: var(--cta-ink);
        font-size: 1.22rem;
        font-weight: 800;
        letter-spacing: 0.005em;
        text-decoration: none;
        padding: 1.15rem 2.3rem;
        min-height: 58px;
        border-radius: 10px;
        border-bottom: 3px solid var(--cta-deep);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
        transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    }
    .cta-button:hover, .cta:hover {
        background: #ffb733;
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
    }
    .cta-button:active, .cta:active { transform: translateY(1px); }
    .cta-button:focus-visible, .cta:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 3px;
    }
    .cta-button svg, .cta svg { width: 21px; height: 21px; flex: none; }

    /* ------------------------------------------------------------------- trust band */
    .trust-band {
        background: var(--brand-deep);
        color: #cddae4;
        font-size: 0.94rem;
        text-align: center;
        padding: 0.95rem 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .trust-band ul {
        list-style: none;
        max-width: 1140px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem 2.2rem;
        justify-content: center;
    }
    .trust-band li {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
    }
    .trust-band svg {
        width: 18px;
        height: 18px;
        flex: none;
        color: var(--cta);
    }
    /* Inside the hero the trust row is part of the hero, not a separate stripe. */
    .hero .trust-band {
        background: transparent;
        border-bottom: 0;
        padding: 1.75rem 0 0;
        color: #e6eef4;
    }
    .hero .trust-band ul { gap: 0.6rem 1.9rem; }
    .hero .trust-band li { font-size: 0.96rem; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }

    /* -------------------------------------------------------------- full-bleed bands */
    .band { padding: var(--band-pad) 1.5rem; }
    .band-inner { max-width: 1140px; margin: 0 auto; }
    .band-white { background: var(--card); }
    .band-tint { background: var(--surface); }
    .band-navy {
        background:
            radial-gradient(110% 130% at 50% -10%, var(--brand-mid) 0%, var(--brand-deep) 60%);
        color: #fff;
    }
    /* Doubled class: the generic `.band h2` below matches with the same specificity and would
       otherwise win on source order, painting navy headings navy-on-navy. */
    .band.band-navy h2, .band.band-navy h3 { color: #fff; }
    .band-navy p { color: #cddae4; }

    .band-head { max-width: 62ch; margin: 0 auto 2.75rem; text-align: center; }
    .band-head p { margin: 0 auto; color: var(--ink-soft); font-size: 1.05rem; }
    .band-navy .band-head p { color: #cddae4; }
    .eyebrow {
        display: block;
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--cta-deep);
        margin-bottom: 0.7rem;
    }
    .band-navy .eyebrow { color: var(--cta); }

    /* ---------------------------------------------------------------------- sections */
    .section, .wrapper {
        max-width: 1140px;
        margin: 0 auto;
        padding: 3.5rem 1.5rem;
    }
    .section + .section { border-top: 1px solid var(--line); }
    .section h2, .wrapper h2, .band h2 {
        font-size: clamp(1.65rem, 3.4vw, 2.4rem);
        line-height: 1.16;
        letter-spacing: -0.024em;
        font-weight: 800;
        color: var(--brand);
        margin-bottom: 1rem;
    }
    .section h3 { font-size: 1.08rem; margin-bottom: 0.4rem; color: var(--ink); }
    .section p { margin-bottom: 1rem; color: var(--ink-soft); max-width: 70ch; }
    .section ul { margin: 0 0 0 1.1rem; color: var(--ink-soft); }
    .section li { margin-bottom: 0.5rem; }

    .section-lede {
        max-width: 70ch;
        color: var(--ink-soft);
        font-size: 1.05rem;
    }
    .band-navy .section-lede { color: #cddae4; }

    /* Short accent rule under a section heading. */
    .section > h2::after, .steps-inner > h2::after, .band-head h2::after {
        content: "";
        display: block;
        width: 56px;
        height: 4px;
        border-radius: 2px;
        background: var(--cta);
        margin-top: 0.85rem;
    }
    .band-head h2::after { margin-left: auto; margin-right: auto; }

    /* --------------------------------------------------------------- cards and grids */
    .grid, .businesses, .compare-grid, .season-grid, .service-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.35rem;
        margin-top: 1.75rem;
        list-style: none;
    }
    .card, .biz-card, .compare-card, .season-card, .service-card, .faq {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 1.75rem 1.6rem;
        box-shadow: var(--shadow-sm);
        transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    }
    .card:hover, .biz-card:hover, .compare-card:hover, .season-card:hover, .service-card:hover {
        box-shadow: var(--shadow-md);
        border-color: #cfd8e0;
        transform: translateY(-3px);
    }
    /* Three across at 1140px: six cards fill two clean rows instead of leaving orphans. */
    .service-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
    .card p, .compare-card p, .season-card p, .service-card p, .biz-card p { margin-bottom: 0; }
    .card h3, .compare-card h3, .season-card h3, .service-card-title {
        font-size: 1.12rem;
        margin-bottom: 0.5rem;
        color: var(--brand);
        letter-spacing: -0.01em;
    }
    .biz-card h3 { font-size: 1.04rem; margin-bottom: 0.3rem; }
    .biz-card .rating { color: #a16207; font-weight: 600; font-size: 0.94rem; }
    .biz-card .address, .card .rating { font-size: 0.92rem; color: var(--muted); }

    /* Inline-SVG glyph at the top of a card. Ships in the HTML, so it cannot fail to load. */
    .card-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 12px;
        background: var(--brand-tint);
        color: var(--brand);
        margin-bottom: 1rem;
    }
    .card-icon svg { width: 25px; height: 25px; }

    .answer-box {
        background: #fff;
        border: 1px solid var(--line);
        border-left: 4px solid var(--cta);
        border-radius: 10px;
        padding: 1.5rem 1.7rem;
        box-shadow: var(--shadow-sm);
    }
    .answer-box strong {
        display: block;
        margin-bottom: 0.4rem;
        color: var(--brand);
        font-size: 0.82rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .answer-box p { margin-bottom: 0; }

    /* ------------------------------------------------------------------- value strip */
    .value-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 1.35rem;
        list-style: none;
    }
    .value-card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 1.85rem 1.5rem;
        text-align: center;
        box-shadow: var(--shadow-sm);
        transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    }
    .value-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
        border-color: #cfd8e0;
    }
    .value-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: var(--brand);
        color: var(--cta);
        margin-bottom: 1.1rem;
    }
    .value-icon svg { width: 27px; height: 27px; }
    .value-card h3 {
        font-size: 1.1rem;
        color: var(--brand);
        margin-bottom: 0.45rem;
        letter-spacing: -0.01em;
    }
    .value-card p { color: var(--ink-soft); font-size: 0.99rem; margin: 0; }

    /* -------------------------------------------------------------------- stat strip */
    .stat-strip {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 1.5rem 1rem;
        list-style: none;
        max-width: 1000px;
        margin: 0 auto;
        text-align: center;
    }
    .stat { padding: 0.5rem 0.75rem; }
    .stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.16); }
    /* One shared row height for every value slot, so the labels underneath sit on a common
       baseline even though only one of the four is a numeral. */
    .stat-num, .stat-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: clamp(2.4rem, 5.5vw, 3.4rem);
    }
    .stat-num {
        font-size: clamp(2.4rem, 5.5vw, 3.4rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.035em;
        color: var(--cta);
    }
    /* Word-based values need to drop a size or they wrap mid-phrase in a 235px column. */
    .stat-num.is-text {
        font-size: clamp(1.45rem, 2.7vw, 1.95rem);
        letter-spacing: -0.018em;
    }
    .stat-badge { color: var(--cta); }
    .stat-badge svg { width: clamp(2.3rem, 4.6vw, 2.9rem); height: auto; }
    .stat-label {
        display: block;
        margin-top: 0.6rem;
        font-size: 0.97rem;
        color: #cddae4;
        line-height: 1.45;
    }

    /* ------------------------------------------------------------------- how it works */
    .steps-band {
        background: var(--surface);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }
    .steps-inner {
        max-width: 1140px;
        margin: 0 auto;
        padding: var(--band-pad) 1.5rem;
    }
    .steps-inner > h2 {
        font-size: clamp(1.65rem, 3.4vw, 2.4rem);
        letter-spacing: -0.024em;
        font-weight: 800;
        color: var(--brand);
        margin-bottom: 1rem;
    }
    .steps {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.75rem;
        margin: 2.5rem 0 0;
        padding: 0;
        counter-reset: step;
    }
    .step {
        position: relative;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 2.6rem 1.5rem 1.6rem;
        box-shadow: var(--shadow-sm);
    }
    .step-num {
        position: absolute;
        left: 1.5rem;
        top: -22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--cta);
        color: var(--cta-ink);
        font-weight: 800;
        font-size: 1.15rem;
        box-shadow: 0 6px 16px rgba(11, 34, 51, 0.18);
    }
    .step h3 {
        font-size: 1.14rem;
        color: var(--brand);
        margin-bottom: 0.4rem;
        letter-spacing: -0.01em;
    }
    .step p { color: var(--ink-soft); margin: 0; font-size: 1rem; }

    /* --------------------------------------------------------- what to expect / bullets */
    .expect-layout {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: 3rem;
        align-items: start;
    }
    .expect-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
    .expect-item {
        display: flex;
        gap: 0.9rem;
        align-items: flex-start;
        padding: 0.85rem 0;
        border-top: 1px solid var(--line-soft);
    }
    .expect-item:first-child { border-top: 0; padding-top: 0; }
    .expect-item svg {
        width: 22px;
        height: 22px;
        flex: none;
        margin-top: 0.2rem;
        color: var(--cta-deep);
    }
    .expect-item strong { display: block; color: var(--ink); font-weight: 700; }
    .expect-item span { color: var(--ink-soft); font-size: 0.99rem; }

    .callout {
        background: var(--brand);
        color: #fff;
        border-radius: 16px;
        padding: 2.25rem 2rem;
        box-shadow: var(--shadow-lg);
    }
    .callout h3 {
        color: #fff;
        font-size: 1.3rem;
        letter-spacing: -0.015em;
        margin-bottom: 0.75rem;
    }
    .callout p { color: #cddae4; margin-bottom: 1.5rem; font-size: 1rem; }
    .callout .cta-button { width: 100%; font-size: 1.1rem; padding: 1rem 1.25rem; }
    .callout-note { font-size: 0.9rem !important; color: #a9c0d0 !important; margin: 1rem 0 0 !important; }

    /* -------------------------------------------------------------- problem cards */
    /* Long-form education copy: two wide columns read far better than four narrow ones. */
    .problem-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
        gap: 1.5rem;
        list-style: none;
    }
    .problem-card {
        position: relative;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 1.9rem 1.7rem 1.7rem;
        box-shadow: var(--shadow-sm);
        transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    }
    .problem-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
        border-color: #cfd8e0;
    }
    .problem-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 1.9rem;
        bottom: 1.7rem;
        width: 4px;
        border-radius: 0 3px 3px 0;
        background: var(--cta);
    }
    .problem-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 12px;
        background: var(--brand-tint);
        color: var(--brand);
        margin-bottom: 1rem;
    }
    .problem-icon svg { width: 24px; height: 24px; }
    .problem-card h3 {
        font-size: 1.14rem;
        color: var(--brand);
        margin-bottom: 0.55rem;
        letter-spacing: -0.012em;
        line-height: 1.28;
    }
    .problem-card p { color: var(--ink-soft); margin: 0 0 0.7rem; font-size: 1rem; }
    .problem-nudge {
        max-width: 62ch;
        margin: 2.25rem auto 0;
        text-align: center;
        color: var(--ink-soft);
        font-size: 1.02rem;
    }
    .band-cta { text-align: center; margin-top: 2rem; }

    /* --------------------------------------------------------------- work photo strip */
    .work-tiles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.35rem;
        list-style: none;
    }
    .work-tile {
        position: relative;
        aspect-ratio: 4 / 3;
        border-radius: 14px;
        overflow: hidden;
        /* The gradient sits under the photo in the inline style, so a dead CDN URL leaves a
           legible dark tile with its caption rather than an empty box. */
        background-color: var(--brand-mid);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: var(--shadow-md);
        border: 1px solid rgba(255, 255, 255, 0.14);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .work-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
    .work-caption {
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 0.95rem;
        color: #fff;
        font-weight: 700;
        font-size: 1.02rem;
        letter-spacing: -0.01em;
        line-height: 1.3;
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
    }
    /* Accent tick above the caption ties the strip to the rest of the page. */
    .work-caption::before {
        content: "";
        display: block;
        width: 26px;
        height: 3px;
        border-radius: 2px;
        background: var(--cta);
        margin-bottom: 0.5rem;
    }

    /* -------------------------------------------------------------- trust bar (RUN 333) */
    .trust-badges, .trust-proof-points {
        list-style: none;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem 1rem;
    }
    .trust-badge {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--brand);
        box-shadow: var(--shadow-sm);
    }
    .trust-proof-points { margin-top: 0.75rem; color: var(--muted); font-size: 0.94rem; }

    .why-choose-points { list-style: none; margin: 1rem 0 0; }
    .why-choose-point { margin-bottom: 0.7rem; color: var(--ink-soft); }
    .why-choose-point-text { font-weight: 700; color: var(--ink); }
    .why-choose-point-proof { display: block; font-size: 0.92rem; color: var(--muted); }

    /* -------------------------------------------------------------------------- FAQs */
    .faqs {
        max-width: 860px;
        margin: 0 auto;
        padding: 0;
    }
    .faqs h2 {
        font-size: clamp(1.65rem, 3.4vw, 2.4rem);
        letter-spacing: -0.024em;
        font-weight: 800;
        color: var(--brand);
        margin-bottom: 1.5rem;
        text-align: center;
    }
    .faqs details {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 1.15rem 1.45rem;
        margin-bottom: 0.8rem;
        box-shadow: var(--shadow-sm);
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .faqs details:hover { border-color: #cfd8e0; }
    .faqs details[open] {
        border-color: var(--cta);
        box-shadow: var(--shadow-md);
    }
    .faqs summary {
        cursor: pointer;
        color: var(--ink);
        font-weight: 700;
        font-size: 1.04rem;
        list-style: none;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }
    .faqs summary::-webkit-details-marker { display: none; }
    /* Chevron drawn in CSS so the accordion reads as one without any JS. */
    .faqs summary::after {
        content: "";
        flex: none;
        width: 10px;
        height: 10px;
        margin-top: 0.42rem;
        border-right: 2.5px solid var(--cta-deep);
        border-bottom: 2.5px solid var(--cta-deep);
        transform: rotate(45deg);
        transition: transform 0.18s ease;
    }
    .faqs details[open] summary::after { transform: rotate(-135deg); margin-top: 0.7rem; }
    .faqs details p { margin: 0.8rem 0 0; color: var(--ink-soft); }
    .faq h3 { margin: 1.2rem 0 0.35rem; color: var(--brand); font-size: 1.02rem; }
    .faq h3:first-of-type { margin-top: 0; }
    .faq p { color: var(--ink-soft); margin-bottom: 0; }
    .faq-item { border-top: 1px solid var(--line); padding: 1.1rem 0; }
    .faq-item strong { display: block; margin-bottom: 0.35rem; color: var(--ink); }
    .faq-item p { color: var(--ink-soft); margin-bottom: 0; }

    /* ------------------------------------------------------------------------- links */
    .links, .related, .link-list, .internal-links ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
        margin: 1.25rem 0 0;
        list-style: none;
        padding: 0;
    }
    .links a, .related a, .link-list a, .internal-links a {
        display: inline-block;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0.5rem 1.1rem;
        color: var(--brand);
        text-decoration: none;
        font-weight: 700;
        font-size: 0.96rem;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .links a:hover, .related a:hover, .link-list a:hover, .internal-links a:hover {
        border-color: var(--cta);
        box-shadow: var(--shadow-sm);
    }

    /* -------------------------------------------------------------- closing CTA band */
    .bottom-cta {
        position: relative;
        background:
            radial-gradient(120% 140% at 50% 0%, var(--brand-mid) 0%, var(--brand-deep) 62%);
        color: #fff;
        text-align: center;
        padding: var(--band-pad) 1.5rem;
    }
    .bottom-cta h2 {
        font-size: clamp(1.75rem, 4vw, 2.6rem);
        letter-spacing: -0.026em;
        font-weight: 800;
        line-height: 1.14;
        color: #fff;
        max-width: 22ch;
        margin: 0 auto 0.85rem;
    }
    .bottom-cta p { color: #cddae4; max-width: 55ch; margin: 0 auto 2rem; font-size: 1.06rem; }
    .bottom-cta-note {
        font-size: 0.93rem !important;
        color: #a9c0d0 !important;
        margin: 1.2rem auto 0 !important;
    }

    /* ------------------------------------------------------------------ page chrome */
    .lr-author-byline {
        max-width: 1140px !important;
        border-bottom: 0 !important;
        padding-top: 1rem !important;
        padding-bottom: 0.25rem !important;
    }
    .lr-compliance-footer {
        max-width: 1140px !important;
        border-top: 1px solid var(--line);
    }

    footer {
        text-align: center;
        padding: 1.75rem 1.5rem 3rem;
        font-size: 0.88rem;
        color: var(--muted);
        background: var(--surface);
    }
    footer p { margin-bottom: 0.3rem; }
    footer a { color: var(--brand); }

    /* ---------------------------------------------------- pinned mobile call bar */
    .mobile-callbar { display: none; }

    @media (max-width: 900px) {
        .expect-layout { grid-template-columns: 1fr; gap: 2.25rem; }
        .stat + .stat { border-left: 0; }
    }

    @media (max-width: 820px) {
        .work-tiles { grid-template-columns: repeat(2, 1fr); }
    }

    /* One per row below this: a 165px-wide tile shows nothing useful of the work. */
    @media (max-width: 560px) {
        .work-tiles { grid-template-columns: 1fr; gap: 1.1rem; }
        .work-tile { aspect-ratio: 16 / 10; }
    }

    @media (max-width: 640px) {
        :root { --band-pad: 3.5rem; }
        /* Room for the pinned call bar so it never covers the compliance footer. */
        body { font-size: 16px; padding-bottom: 86px; }
        .callbar-inner { padding: 0.55rem 1.1rem; }
        .callbar-brand { font-size: 1rem; }
        .callbar-cta { padding: 0.55rem 0.9rem; font-size: 0.92rem; }
        .hero {
            padding: 3.25rem 1.25rem 3rem;
            /* The copy fills a portrait hero top to bottom, so the photograph is scrimmed
               everywhere and a fit-to-width worker just dissolves. Zooming in on him means the
               part that does read through is recognisably a roofer rather than a dark shape.
               Sizes are per layer: the two gradients stay pinned to the box, only the photo
               scales. */
            background-size: 100% 100%, 100% 100%, auto 150%;
            background-position: 46% 26%;
            /* Portrait crops a tall slice of open sky in behind the headline. What the desktop
               ellipse gets wrong here is its width, not its depth -- a 62% radius leaves the
               ends of a full-bleed headline hanging off it -- so this one is much wider and
               only slightly deeper. Going deeper instead just erases the worker. */
            --hero-scrim: radial-gradient(112% 50% at 50% 38%,
                rgba(6, 20, 31, 0.72) 0%,
                rgba(6, 20, 31, 0.62) 55%,
                rgba(6, 20, 31, 0.30) 84%,
                rgba(6, 20, 31, 0.10) 100%);
        }
        .hero h1 { max-width: none; }
        .hero p { font-size: 1.04rem; }
        .section, .wrapper, .band, .steps-inner { padding-left: 1.25rem; padding-right: 1.25rem; }
        .section, .wrapper { padding-top: 2.5rem; padding-bottom: 2.5rem; }
        .cta-button, .cta { display: flex; width: 100%; padding: 1.15rem 1.25rem; font-size: 1.1rem; }
        .steps { gap: 2.5rem; }
        .band-head { margin-bottom: 2rem; }
        .stat-strip { grid-template-columns: repeat(2, 1fr); }
        .callout { padding: 1.75rem 1.4rem; }

        .mobile-callbar {
            display: block;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 60;
            background: rgba(11, 34, 51, 0.98);
            border-top: 1px solid rgba(255, 255, 255, 0.12);
            padding: 0.6rem 0.9rem;
            box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.28);
        }
        .mobile-callbar .cta-button {
            width: 100%;
            min-height: 54px;
            font-size: 1.08rem;
            padding: 0.9rem 1rem;
            box-shadow: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .cta-button, .cta, .callbar-cta, .card, .biz-card, .compare-card, .season-card,
        .service-card, .value-card, .problem-card, .work-tile, .faqs details,
        .faqs summary::after {
            transition: none;
        }
        .cta-button:hover, .cta:hover, .callbar-cta:hover, .card:hover, .biz-card:hover,
        .compare-card:hover, .season-card:hover, .service-card:hover,
        .value-card:hover, .problem-card:hover, .work-tile:hover {
            transform: none;
        }
    }

/* ---------------------------------------------------------------------------
   local-sites overrides. Everything above this line is the ported theme and
   should not be edited per site. Everything below is a deliberate variant.
   --------------------------------------------------------------------------- */

/* The brand in the call bar is a home link here rather than a plain label, so it
   inherits the anchor underline. It is a wordmark, not body copy. */
.callbar-brand { text-decoration: none; }
.callbar-brand:hover { text-decoration: none; }

/* Sourced-fact cards sit on a navy band. .card is designed for light surfaces,
   so its ink headings vanished into the background. This is the dark variant. */
.band-navy .card {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: none;
}
.band-navy .card h3 { color: #fff; }
.band-navy .card p { color: rgba(255, 255, 255, 0.87); }
.band-navy .card p strong { color: #fff; }
.band-navy .card .callout-note { color: rgba(255, 255, 255, 0.62); }
.band-navy .card .callout-note a { color: var(--cta); }

/* Source URLs are the one place a long unbroken string can appear. */
.callout-note a { overflow-wrap: anywhere; }

/* No element may push the page wider than the viewport on a phone. */
html, body { overflow-x: hidden; max-width: 100%; }

/* A long local brand ("Overland Park Garage Door Pros" vs a two-word national one)
   pushes the top call button off a 390px viewport, where overflow-x:hidden would
   silently clip it. The sticky bottom bar already carries the call action on
   phones, so the duplicate in the top bar comes out instead. */
@media (max-width: 600px) {
    .callbar-cta { display: none; }
    .callbar-inner { justify-content: center; }
    .callbar-brand { font-size: 1.02rem; }
}

/* Inner pages carry one column of prose, not a two-column layout, so the section
   needs a measure of its own or the copy strands on the left of a wide band. */
.band-inner > .section { max-width: 44rem; margin: 0 auto; }
.band-inner > .section > *:first-child { margin-top: 0; }


/* Each home-page failure card now points at the service page that covers it. */
.problem-more { margin: .9rem 0 0; }
.problem-more a {
    font-weight: 700;
    font-size: .95rem;
    color: var(--brand-mid);
    text-decoration: none;
    border-bottom: 2px solid var(--cta);
    padding-bottom: 1px;
}
.problem-more a:hover { color: var(--cta-deep); }
.service-card { display: block; text-decoration: none; color: inherit; }
.service-card:hover { border-color: var(--cta); }
.service-card p { color: var(--muted, #5b6b78); }


/* Service-page articles run 600-plus words, so their subheads need to read as
   structure rather than as bold body copy. */
.band-inner > .section h3 {
    font-size: 1.32rem;
    line-height: 1.25;
    margin: 2.6rem 0 .7rem;
    color: var(--brand);
    letter-spacing: -.01em;
}
.band-inner > .section h3:first-child { margin-top: 0; }
.band-inner > .section p { margin: 0 0 1.05rem; }
.band-inner > .section p strong { color: var(--brand); }
.band-navy .card h3 a { color: #fff; text-decoration: none; }
.band-navy .card h3 a:hover { color: var(--cta); }