/* =============================================================================
   SCI ROOFING — PREMIUM REFINEMENT LAYER
   Loaded after styles.css. Re-skins the existing markup on one token system.
   Nothing here renames a class or removes a hook the inline JS binds to.

   Order: tokens → primitives → sections in DOM order → responsive.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1 · TOKENS
   The four brand hexes are unchanged; everything else derives from them.
   -------------------------------------------------------------------------- */
:root {
    /* Brand — from the logo */
    --sci-navy: #033648;
    --sci-red: #BB2C20;
    --sci-sky: #439DBE;

    /* Navy ramp — surfaces and scrims */
    --navy-900: #021C26;
    --navy-800: #032B3A;
    --navy-700: #033648;
    --navy-600: #0A4E68;
    --navy-500: #136A88;

    /* Red ramp — action only, never decoration */
    --red-700: #8E2118;
    --red-600: #A5261A;
    --red-500: #BB2C20;
    --red-400: #D14231;

    /* Sky ramp — accents, icon strokes, links */
    --sky-700: #2A7B99;
    --sky-600: #3690B2;
    --sky-500: #439DBE;
    --sky-200: #B6DDEC;
    --sky-100: #DCEEF6;

    /* Ink — cool neutrals tuned to sit beside the navy */
    --ink-900: #0A1E28;
    --ink-800: #123040;
    --ink-700: #234454;
    --ink-600: #3D5A69;
    --ink-500: #5A7383;
    --ink-400: #7B93A1;

    /* Lines and surfaces — three surfaces, two line weights, nothing else */
    --line-300: #C9DBE5;
    --line-200: #DCEAF2;
    --line-100: #EDF4F8;
    --surface-0: #FFFFFF;
    --surface-1: #F4FAFD;
    --surface-2: #EAF6FC;

    /* Elevation — one light source, navy-tinted, four steps */
    --e1: 0 1px 2px rgba(3, 54, 72, .06), 0 2px 6px rgba(3, 54, 72, .06);
    --e2: 0 2px 4px rgba(3, 54, 72, .06), 0 10px 24px rgba(3, 54, 72, .10);
    --e3: 0 4px 8px rgba(3, 54, 72, .07), 0 22px 46px rgba(3, 54, 72, .13);
    --e4: 0 8px 16px rgba(3, 54, 72, .08), 0 36px 72px rgba(3, 54, 72, .18);

    /* Radius — four steps and a pill */
    --r-sm: 10px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 999px;

    /* Layout */
    --container: 1280px;
    --gutter: 32px;
    --sec-y: clamp(64px, 6.6vw, 96px);
    --sec-y-lg: clamp(80px, 8vw, 124px);

    /* Motion */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --t-fast: 140ms;
    --t: 240ms;

    /* Focus — one recipe everywhere */
    --focus-ring: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 6px rgba(67, 157, 190, .65);
}

@media (max-width: 768px) {
    :root {
        --gutter: 20px;
    }
}


/* -----------------------------------------------------------------------------
   2 · BASE + TYPE SCALE
   Poppins carries display only. Roboto carries everything you actually read.
   -------------------------------------------------------------------------- */
body {
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink-700);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(select):focus-visible,
:where(summary):focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* One container spine so every section shares a left edge. */
.services-inner,
.pros-inner,
.gallery-inner,
.reviews-split__inner,
.sa2-inner,
.faq-inner {
    width: min(var(--container), 100% - var(--gutter) * 2);
    max-width: none;
    margin-inline: auto;
}

/* One section rhythm. */
.services,
.pros,
.reviews-split,
.gallery,
.service-areas,
.faq {
    padding-block: var(--sec-y);
}

/* Section eyebrow — one spec, three sections (was 18px/6px tracking, and the
   gallery's was white-on-white, i.e. invisible). */
.services-kicker,
.gallery-kicker,
.faq-kicker,
.pros-eyebrow {
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    /* --sky-500 is 3.1:1 on white and fails AA at this size; --sky-700 is 4.8:1 */
    color: var(--sky-700);
    margin: 0 0 14px;
    /* compensate the trailing letter-space so centred text is optically centred */
    margin-right: -.14em;
}

.pros-eyebrow {
    color: var(--red-600);
}

/* Section headings — one size token, was 28/40/42/44/45/48/50/54px. */
.services-title,
.pros-title,
.reviews-split__title,
.gallery-title,
.sa2-title,
.faq-title,
.financing-cta__title,
.final-title {
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 3.3vw, 42px);
    line-height: 1.1;
    letter-spacing: -.015em;
    text-transform: none;
    text-shadow: none;
    text-wrap: balance;
}

.services-title,
.gallery-title,
.faq-title,
.reviews-split__title,
.sa2-title,
.pros-title {
    color: var(--navy-700);
}

/* Card headings. */
.svc-title,
.pros-card h3,
.gallery-cap-title,
.sa2-card-title,
.faq-q {
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.005em;
    text-transform: none;
}

/* Body copy moves off Poppins Medium onto Roboto Regular. */
.svc-desc,
.pros-card p,
.review2-text,
.gallery-cap-sub,
.sa2-list li,
.faq-a p,
.hero-form-sub,
.financing-cta__text,
.ci-feature__desc {
    font-family: "Roboto", system-ui, -apple-system, Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
}

/* The one accent rule used under headings, replacing two competing idioms. */
.ci-hero__redline,
.sa2-title::after {
    width: 64px;
    height: 4px;
    background: var(--red-500);
    border-radius: 2px;
    margin: 24px 0;
}


/* -----------------------------------------------------------------------------
   3 · PRIMITIVES — buttons, inputs, cards
   -------------------------------------------------------------------------- */

/* Primary action. Flat brick red at every breakpoint — the page previously
   used a navy→sky gradient on desktop and flat red on mobile. */
.hf-submit-btn,
.final-submit,
.cta-modal__submit,
.financing-cta__btn,
.pros-btn,
.why-btn,
.btn-solid,
.final-call {
    background: var(--red-500) !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--e2) !important;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    transition: background-color var(--t) var(--ease),
        transform var(--t-fast) var(--ease),
        box-shadow var(--t) var(--ease);
}

.hf-submit-btn:hover,
.final-submit:hover,
.cta-modal__submit:hover,
.financing-cta__btn:hover,
.pros-btn:hover,
.why-btn:hover,
.btn-solid:hover,
.final-call:hover {
    background: var(--red-600) !important;
    box-shadow: var(--e3) !important;
    transform: translateY(-2px);
    filter: none;
}

.hf-submit-btn:active,
.final-submit:active,
.cta-modal__submit:active,
.financing-cta__btn:active,
.pros-btn:active,
.why-btn:active {
    transform: translateY(0);
    box-shadow: var(--e1) !important;
}

/* Two button sizes. min-width slabs (the pros CTA was 420px wide for a
   22-character label) are replaced by content sizing. */
.hf-submit-btn,
.final-submit,
.cta-modal__submit {
    height: 58px;
    min-width: 0;
    padding: 0 30px;
    font-size: 16px;
}

.financing-cta__btn,
.pros-btn,
.why-btn {
    height: 56px;
    min-width: 0 !important;
    width: auto;
    padding: 0 32px;
    font-size: 16px;
}

/* Arrow glyphs (➤ / ▶) come from a fallback symbol font and sit heavy and low
   next to Poppins. Normalise every one of them rather than patching one. */
.hf-submit-btn span[aria-hidden],
.final-submit span[aria-hidden],
.cta-modal__submit span[aria-hidden],
.financing-cta__btn span[aria-hidden],
.pros-btn span[aria-hidden],
.why-btn span[aria-hidden],
.svc-btn .svc-arrow,
.gallery-cta a span[aria-hidden] {
    font-size: .72em;
    font-weight: 400;
    line-height: 1;
    display: inline-block;
    transform: translateY(-.5px);
    margin-left: .15em;
}

/* Inputs — were borderless grey slabs with focus rings switched off. */
.field input,
.field select,
.final-field input,
.final-field select,
.cta-modal__field input,
.cta-modal__field select {
    height: 56px;
    background: var(--surface-0);
    border: 1.5px solid var(--line-300);
    border-radius: var(--r-sm);
    padding: 0 16px;
    font-family: "Roboto", system-ui, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--ink-900);
    box-shadow: none;
    transition: border-color var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
}

.field input::placeholder,
.final-field input::placeholder,
.cta-modal__field input::placeholder {
    color: var(--ink-400);
    opacity: 1;
}

.field input:hover,
.final-field input:hover,
.cta-modal__field input:hover {
    border-color: var(--sky-200);
}

.field input:focus,
.field input:focus-visible,
.final-field input:focus,
.final-field input:focus-visible,
.cta-modal__field input:focus,
.cta-modal__field input:focus-visible {
    outline: 0;
    border-color: var(--sky-500);
    box-shadow: 0 0 0 3px rgba(67, 157, 190, .22);
}

/* Field labels — one spec across all three forms. */
.field label,
.final-field label,
.cta-modal__field label {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin: 0 0 8px;
    display: block;
}


/* -----------------------------------------------------------------------------
   4 · HEADER
   The 110deg gradient split had inverted stops (40.5% then 40%), producing a
   hard aliased diagonal. Replaced with a clean white bar.
   -------------------------------------------------------------------------- */
.site-header {
    background: var(--surface-0);
    border-bottom: 1px solid var(--line-200);
    box-shadow: 0 1px 0 rgba(3, 54, 72, .04), 0 6px 24px rgba(3, 54, 72, .06);
}

/* Share the content spine, so the logo's left edge lines up with the hero H1
   and the service grid instead of floating 48px outside them. */
.header-inner {
    width: min(var(--container), 100% - var(--gutter) * 2);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
    padding-block: 10px;
    min-height: 88px;
}

.header-logo {
    margin-left: 0;
}

/* styles.css:5841 sets `.site-header .header-logo img { height: 90px }` inside a
   min-width:993px block — higher specificity than a bare `.header-logo img`, so
   it has to be matched here. At 90px the mark filled a 91px bar edge to edge
   with no breathing room, which is what made the header look cramped. */
.site-header .header-logo img {
    height: 64px;
    width: auto;
    /* the wordmark sat on white with a drop shadow, which read as pasted-on */
    filter: none;
}

/* Phone button first, supporting line centred beneath it.
   styles.css:5849 sets align-items:flex-end at the same breakpoint. */
.site-header .call-wrap {
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin-top: 0;
    width: fit-content;
}


/* "Free roof inspection" was clamp(18px,1.2vw,28px)/700 uppercase — nearly as
   loud as the phone number it supports. Demoted to a supporting line. */
.site-header .call-sub {
    margin: 0;
    font-family: "Poppins", system-ui, sans-serif;
    /* sized to sit clearly under the number without competing with it —
       the button label tops out at 21px */
    font-size: clamp(14px, 1.05vw, 20px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-500);
    text-align: center;
    max-width: none;
}

@media (min-width: 993px) {
    .site-header .call-sub {
        white-space: nowrap;
    }
}

.site-header .btn-solid {
    padding: 12px 26px;
    border-radius: var(--r-pill) !important;
}

/* Both halves of one phone number were clamped to different maxima. */
.header-btn-line1,
.header-btn-line2 {
    font-size: clamp(16px, 1.35vw, 21px);
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.1;
}


/* -----------------------------------------------------------------------------
   5 · HERO
   Was: the ::before wash painted the left 48% of the LCP photo opaque white,
   erasing the image and leaving ~55% of the hero empty. Now the photograph
   carries the section under a navy scrim, which is also what makes the
   headline legible without a text-shadow.
   -------------------------------------------------------------------------- */
.hero {
    background: var(--surface-0);
    padding-bottom: 150px;
}

.ci-hero-block {
    min-height: 712px;
    margin-bottom: 0;
    /* this 1px rule was the stray hairline crossing the page behind the form */
    border-bottom: 0;
    background-position: 62% 42%;
    background-color: var(--navy-800);
}

.ci-hero-block::before {
    background:
        linear-gradient(180deg, rgba(2, 28, 38, .55) 0%, rgba(2, 28, 38, .10) 34%, rgba(2, 28, 38, .30) 72%, rgba(2, 28, 38, .82) 100%),
        linear-gradient(90deg, rgba(3, 43, 58, .94) 0%, rgba(3, 43, 58, .88) 34%, rgba(3, 43, 58, .58) 56%, rgba(3, 43, 58, .26) 74%, rgba(3, 43, 58, .16) 100%);
}

.ci-hero {
    padding: 72px 0 0;
}

.ci-hero__container {
    max-width: none;
    width: min(var(--container), 100% - var(--gutter) * 2);
    margin-inline: auto;
    padding: 0;
}

.ci-hero__top {
    max-width: 780px;
}

/* An eyebrow above the H1 gives the credential somewhere to live and stops the
   headline from starting cold against the top of the photo. */
.ci-hero__eyebrow {
    display: inline-flex;
    /* .ci-hero__top is a column flex container, so without this the pill
       stretches the full width of the hero copy block */
    align-self: flex-start;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 9px 16px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .26);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #fff;
}

.ci-hero__eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red-400);
    flex: 0 0 auto;
}

.ci-hero__title {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(36px, 4.4vw, 60px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.025em;
    text-transform: none;
    /* the scrim does this job now */
    text-shadow: none;
    text-wrap: balance;
}

.ci-hero__title-navy {
    color: #fff;
    font-weight: 600;
}

.ci-hero__title-red {
    color: #fff;
    font-weight: 800;
    margin-top: 2px;
}

.ci-hero__sub {
    font-family: "Roboto", system-ui, Arial, sans-serif;
    font-size: clamp(17px, 1.35vw, 20px);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .88);
    max-width: 620px;
}

/* Trust strip — becomes a glass bar sitting on the photo instead of three
   circles floating in the white void. */
.ci-features-strip {
    padding: 0;
    margin-top: 44px;
}

.ci-features-strip__inner {
    max-width: none;
    width: min(var(--container), 100% - var(--gutter) * 2);
    margin-inline: auto;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    background: rgba(2, 28, 38, .42);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-lg);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    overflow: hidden;
}

.ci-feature {
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    border-left: 1px solid rgba(255, 255, 255, .14);
}

.ci-feature:first-child {
    border-left: 0;
}

.ci-feature__icon {
    width: 46px;
    height: 46px;
    border-radius: var(--r-md);
    border: 0;
    background: rgba(255, 255, 255, .12);
}

.ci-feature__icon svg {
    width: 23px;
    height: 23px;
    stroke: #fff;
}

.ci-feature__title {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    margin: 0 0 3px;
}

.ci-feature__desc {
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .74);
}


/* -----------------------------------------------------------------------------
   6 · LEAD FORM CARD
   -------------------------------------------------------------------------- */
.hero-form-wrap {
    width: min(var(--container), 100% - var(--gutter) * 2);
    bottom: 24px;
}

.hero-form-card {
    border-radius: var(--r-xl);
    box-shadow: var(--e4);
    border: 1px solid var(--line-200);
    border-top: 4px solid var(--red-500);
    padding: 30px 32px 24px;
}

.hero-form-head {
    margin-bottom: 20px;
}

.hero-form-title {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(24px, 2.3vw, 32px);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
    text-transform: none;
    color: var(--navy-700);
}

.hero-form-sub {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-500);
    font-weight: 400 !important;
    max-width: 640px;
    margin-top: 8px;
}

.hf-flat-grid {
    gap: 18px 20px;
}

.hf-cta-cell {
    align-items: flex-end;
}

.hf-flat-grid .hf-submit-btn {
    height: 56px;
}

/* Reassurance row — the strongest microcopy on the site was locked inside the
   desktop-only modal; this surfaces it under both forms. */
.hero-form-note,
.final-note {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 20px;
    margin-top: 16px;
    font-family: "Roboto", system-ui, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: var(--ink-500);
    text-align: center;
}

.hero-form-note .hf-chip,
.final-note .hf-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hero-form-note .hf-chip svg,
.final-note .hf-chip svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    stroke: var(--sky-600);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.final-note {
    color: rgba(255, 255, 255, .78);
}

.final-note .hf-chip svg {
    stroke: var(--sky-200);
}


/* -----------------------------------------------------------------------------
   7 · SERVICES
   -------------------------------------------------------------------------- */
.services {
    background: var(--surface-0);
}

.services-head {
    text-align: center;
    margin-bottom: 44px;
    max-width: 790px;
    margin-inline: auto;
}

.services-lead {
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-500);
}

.services-grid {
    margin-top: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.svc-card {
    border: 1px solid var(--line-200);
    border-radius: var(--r-lg);
    box-shadow: var(--e1);
    padding: 28px 26px 24px;
    min-height: 0;
    transition: transform var(--t) var(--ease),
        box-shadow var(--t) var(--ease),
        border-color var(--t) var(--ease);
}

/* The card previously filled with a navy→sky gradient on hover and swapped
   every colour inside it. Replaced with a lift. */
.svc-card::before,
.svc-card::after {
    content: none;
}

.svc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--e3);
    border-color: var(--sky-200);
}

.svc-card:hover .svc-title,
.svc-card:hover .svc-desc {
    color: inherit;
}

.svc-card:hover .svc-title {
    color: var(--navy-700);
}

.svc-card:hover .svc-desc {
    color: var(--ink-600);
}

.svc-card-head {
    flex-direction: column;
    gap: 18px;
}

.svc-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    background: var(--surface-2) !important;
    color: var(--navy-700) !important;
    transform: none !important;
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

.svc-card:hover .svc-icon {
    background: var(--navy-700) !important;
    color: #fff !important;
}

.svc-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.75;
}

.svc-title {
    font-size: 19px;
    color: var(--navy-700);
    margin: 0 0 8px;
}

.svc-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-600);
}

/* Six identical full-width gradient bars read as one repeated object rather
   than six services. On desktop the per-card CTA becomes a text link and the
   section carries one real button; on mobile it stays a tap target. */
@media (min-width: 769px) {
    .svc-btn {
        margin-top: 20px;
        padding-top: 16px;
        height: auto;
        border-top: 1px solid var(--line-100);
        border-radius: 0;
        background: none !important;
        background-image: none !important;
        color: var(--red-500) !important;
        justify-content: flex-start;
        font-family: "Poppins", system-ui, sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        gap: 8px;
        transition: color var(--t) var(--ease), gap var(--t) var(--ease);
    }

    .svc-card:hover .svc-btn {
        background: none !important;
        color: var(--red-600) !important;
        gap: 12px;
    }

    .svc-card:hover .svc-btn .svc-arrow {
        transform: translateX(2px) translateY(-.5px);
    }
}

/* One primary action for the whole grid, under it. */
.services-cta {
    margin-top: 44px;
    text-align: center;
}


/* -----------------------------------------------------------------------------
   8 · PROS / "3 GENERATIONS"
   -------------------------------------------------------------------------- */
.pros {
    background: var(--surface-1);
}

.pros-inner {
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}

.pros-collage__wide img,
.pros-collage__sq img {
    border-radius: var(--r-lg);
}

.pros-collage__wide,
.pros-collage__sq {
    box-shadow: var(--e2);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.pros-title {
    margin-bottom: 8px;
}

/* Three cards in a 3-column grid wrapped 2-then-1 and stranded an orphan. */
.pros-grid {
    grid-template-columns: 1fr;
    gap: 4px;
    margin-top: 28px;
}

.pros-card {
    background: transparent;
    padding: 18px 0 18px 40px;
    border: 0;
    border-bottom: 1px solid var(--line-200);
    box-shadow: none;
}

.pros-card:last-child {
    border-bottom: 0;
}

.pros-card::before {
    top: 22px;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--navy-700) !important;
    background-image: none !important;
    border-radius: 50%;
}

.pros-card h3 {
    font-size: 18px;
    color: var(--navy-700);
    margin: 0 0 6px;
}

.pros-card p {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink-600);
    margin: 0;
}

.pros-cta {
    margin-top: 32px;
}


/* -----------------------------------------------------------------------------
   9 · FINANCING BAND
   -------------------------------------------------------------------------- */
.financing-cta {
    padding-block: 0;
}

.financing-cta__inner {
    padding-block: var(--sec-y-lg);
}

.financing-cta__content {
    max-width: 640px;
}

.financing-cta__title,
.financing-cta__text {
    /* shadowed body copy is the classic "text pasted on photo" tell */
    text-shadow: none;
    color: #fff;
}

.financing-cta__title {
    color: #fff;
    margin-bottom: 18px;
}

.financing-cta__text {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 32px;
}

/* The photo was ungraded: the scrim reached full transparency at 100%, so the
   right third showed raw candid detail (open van doors, a skip, hoses) with no
   vignette. Hold the scrim, add a vertical grade, and re-frame on the crew. */
.financing-cta__bg {
    background-image:
        linear-gradient(180deg, rgba(2, 28, 38, .40) 0%, rgba(2, 28, 38, .04) 34%, rgba(2, 28, 38, .52) 100%),
        linear-gradient(90deg,
            rgba(3, 43, 58, .94) 0%,
            rgba(3, 43, 58, .88) 34%,
            rgba(3, 43, 58, .70) 54%,
            rgba(3, 43, 58, .52) 74%,
            rgba(3, 43, 58, .44) 100%),
        url("../images/roofing-crew-service-trucks.webp");
    background-size: cover, cover, cover;
    background-position: center, center, 62% 44%;
    filter: saturate(.92);
}

@media (min-width: 1024px) {
    .financing-cta__bg {
        background-size: cover, cover, 118% auto;
        background-position: center, center, 34% 46%;
    }
}


/* -----------------------------------------------------------------------------
   10 · CREDENTIALS ("Why South Florida Trusts SCI")
   Was a 3-card horizontal scroller crammed into a 636px column, so the third
   card was clipped off the viewport at 1440px with no arrows or dots.
   -------------------------------------------------------------------------- */
.reviews-split {
    background: var(--surface-1);
}

.reviews-split__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
}

.reviews-split__left {
    max-width: 720px;
    margin-inline: auto;
}

.reviews-split__track {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 24px;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
}

.review2-card {
    border-radius: var(--r-lg);
    border: 1px solid var(--line-200);
    box-shadow: var(--e2);
    padding: 30px 28px;
    min-height: 0;
    text-align: left;
}

/* The class is named for stars but holds a credential label — give it an icon
   so it reads as a credential rather than a missing rating. */
.review2-stars {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--red-600);
    margin-bottom: 14px;
}

.review2-stars::before {
    content: "";
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    background: var(--red-500);
    -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8 3v6c0 5-3.5 9.4-8 11-4.5-1.6-8-6-8-11v-6l8-3z'/%3E%3Cpath d='M8.5 12l2.3 2.3 4.7-5'/%3E%3C/svg%3E");
    mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8 3v6c0 5-3.5 9.4-8 11-4.5-1.6-8-6-8-11v-6l8-3z'/%3E%3Cpath d='M8.5 12l2.3 2.3 4.7-5'/%3E%3C/svg%3E");
}

.review2-text {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink-600);
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    margin-bottom: 16px;
}

.review2-meta {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line-100);
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy-700);
}


/* -----------------------------------------------------------------------------
   11 · GALLERY
   -------------------------------------------------------------------------- */
.gallery {
    background: var(--surface-0);
}

.gallery-head {
    text-align: center;
    margin-bottom: 40px;
}

/* was clamp(28px, 2.5vw, 22px) — a max below its min, so it resolved to 28px
   at every viewport and the section demoted itself to a caption */
.gallery-title {
    font-size: clamp(30px, 3.3vw, 42px);
}

.gallery-card {
    border-radius: var(--r-xl);
    border: 1px solid var(--line-200);
    box-shadow: var(--e2);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.gallery-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--e3);
}

.gallery-viewport {
    border-radius: var(--r-xl);
}

.gallery-media img {
    transition: transform var(--t-slow, 420ms) var(--ease);
}

.gallery-card:hover .gallery-media img {
    transform: scale(1.04);
}

.gallery-cap {
    padding: 20px 22px 22px;
}

.gallery-cap-title {
    font-size: 18px;
    color: var(--navy-700);
    margin: 0 0 6px;
}

.gallery-cap-sub {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-500);
}

.gallery-nav {
    width: 48px;
    height: 48px;
    border: 1px solid var(--line-200);
    box-shadow: var(--e1);
    color: var(--navy-700);
    transition: background-color var(--t) var(--ease), opacity var(--t) var(--ease);
}

.gallery-nav:hover:not(:disabled) {
    background: var(--surface-2);
}

/* All three cards fit on desktop, so the controls are permanently disabled —
   hide them rather than showing dead affordances. */
.gallery-nav:disabled {
    opacity: 0;
    pointer-events: none;
}

.gallery-dots:has(> :only-child) {
    display: none;
}

.gallery-dot {
    height: 8px;
    width: 8px;
    background: var(--line-300);
}

.gallery-dot.is-active {
    background: var(--navy-700);
    width: 24px;
}

.gallery-zoom {
    background: rgba(2, 28, 38, .55);
    border: 1px solid rgba(255, 255, 255, .5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color var(--t) var(--ease);
}

.gallery-zoom:hover {
    background: var(--navy-700);
}

.gallery-zoom svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.gallery-cta {
    margin-top: 40px;
}

/* Three cards at three-per-view means the slider can never move, so the
   arrow gutters were reserving 120px for controls that are always disabled. */
@media (min-width: 1025px) {
    .gallery-slider {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .gallery-nav {
        display: none;
    }

    .gallery-dots {
        display: none;
    }
}


/* -----------------------------------------------------------------------------
   12 · SERVICE AREAS
   The watermark was a WORLD map behind a company that serves five Florida
   counties, and the flex row left a ~330px hole down the middle.
   -------------------------------------------------------------------------- */
.service-areas {
    background: var(--surface-0);
}

.service-areas::before {
    background-image: none;
    background: radial-gradient(72% 90% at 8% 50%, var(--surface-2) 0%, rgba(234, 246, 252, 0) 62%);
    opacity: 1;
}

.sa2-inner {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 64px;
    align-items: center;
}

.sa2-left {
    flex: none;
}

.sa2-title::after {
    margin: 24px 0 0;
    background: var(--red-500);
}

.sa2-lead {
    margin: 22px 0 0;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--ink-600);
    max-width: 46ch;
}

.sa2-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.sa2-cities li {
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--line-200);
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-700);
}

.sa2-hq {
    margin: 24px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-500);
}

.sa2-hq a {
    color: var(--red-500);
    font-weight: 700;
    text-decoration: none;
}

.sa2-hq a:hover {
    text-decoration: underline;
}

.sa2-right {
    flex: none;
}

.sa2-card {
    border-radius: var(--r-lg);
    border: 1px solid var(--line-200);
    box-shadow: var(--e2);
}

.sa2-card:hover {
    transform: none;
    box-shadow: var(--e3);
}

/* was a 135deg red→navy gradient; the interpolated midpoint is a muddy maroon
   that exists nowhere in the brand */
.sa2-card-head {
    background: var(--navy-700) !important;
    background-image: none !important;
    border-top: 4px solid var(--red-500);
    padding: 20px 24px;
}

.sa2-card-title {
    font-size: 17px;
    letter-spacing: .01em;
    text-transform: none;
}

.sa2-list li {
    font-size: 15.5px;
    color: var(--ink-700);
}

.sa2-list li::before {
    background: var(--sky-500) !important;
    background-image: none !important;
}


/* -----------------------------------------------------------------------------
   13 · FAQ
   -------------------------------------------------------------------------- */
.faq {
    background: var(--surface-1);
}

.faq-head {
    text-align: center;
    margin-bottom: 40px;
}

.faq-list {
    max-width: 880px;
    margin-inline: auto;
}

.faq-item {
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--r-lg);
    box-shadow: none;
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

.faq-item:hover {
    border-color: var(--sky-200);
}

.faq-item[open] {
    box-shadow: var(--e2);
    border-color: var(--line-200);
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    font-size: 17px;
    color: var(--navy-700);
    cursor: pointer;
    list-style: none;
}

/* the marker was a 26px "+" pinned at top:15px, so it stuck to the first line
   whenever a question wrapped */
.faq-q::after {
    content: "";
    position: static;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    background: var(--navy-700);
    transform: none;
    transition: transform var(--t) var(--ease), background-color var(--t) var(--ease);
    -webkit-mask: center / 22px 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
    mask: center / 22px 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
}

.faq-item[open] .faq-q::after {
    transform: rotate(180deg);
    background: var(--red-500);
}

.faq-a {
    padding: 0 24px 22px;
    border-top: 1px solid var(--line-100);
}

.faq-a p {
    margin: 18px 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-600);
}


/* -----------------------------------------------------------------------------
   14 · FINAL CTA / FOOTER
   -------------------------------------------------------------------------- */
.final-cta-bg-card {
    /* was 40px 50px 0 0 — visibly lopsided */
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background-image:
        linear-gradient(180deg, rgba(2, 28, 38, .40) 0%, rgba(2, 28, 38, .10) 30%, rgba(2, 28, 38, .55) 100%),
        linear-gradient(120deg, rgba(3, 43, 58, .96) 0%, rgba(3, 54, 72, .90) 46%, rgba(10, 78, 104, .88) 100%),
        url("../images/architectural-shingle-roof-texture.webp");
    padding-block: var(--sec-y-lg);
}

.final-cta-bg-card::before,
.final-cta-bg-card::after,
.final-cta-bg,
.final-cta-overlay {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
}

.final-cta-container {
    max-width: calc(var(--container) + 80px);
    padding-inline: var(--gutter);
}

.final-cta-content {
    gap: clamp(40px, 5vw, 72px);
}

.final-logo-box {
    box-shadow: var(--e2);
    border-radius: var(--r-md);
}

.final-title {
    color: #fff;
    margin-bottom: 12px;
}

.final-desc {
    font-family: "Roboto", system-ui, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 28px;
}

.final-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 34px;
    border-radius: var(--r-md) !important;
}

.final-call-main {
    font-size: clamp(20px, 1.9vw, 26px);
    font-weight: 800;
}

.final-offer-text {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
    color: #fff;
}

/* was 20px/800 with 6px (0.3em) tracking — it decoded letter by letter */
.final-offer-sub {
    font-family: "Roboto", system-ui, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: none;
    color: rgba(255, 255, 255, .78);
    margin-bottom: 24px;
}

.final-grid {
    gap: 16px;
}

.final-field label {
    color: rgba(255, 255, 255, .72);
}

.final-submit {
    width: 100%;
    margin-top: 20px;
}

.final-bottom,
.final-nap {
    color: rgba(255, 255, 255, .62);
    font-size: 13.5px;
}

.final-nap a {
    color: rgba(255, 255, 255, .88);
}


/* -----------------------------------------------------------------------------
   15 · DESKTOP LEAD MODAL
   -------------------------------------------------------------------------- */
.cta-modal__box {
    border-radius: var(--r-xl);
    box-shadow: var(--e4);
    border-top: 4px solid var(--red-500);
}

.cta-modal__badge {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--sky-600);
}

.cta-modal__title {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--navy-700);
    text-transform: none;
}

.cta-modal__sub {
    font-family: "Roboto", system-ui, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-500);
}

.cta-modal__close {
    width: 40px;
    height: 40px;
    border-radius: var(--r-pill);
    color: var(--ink-500);
}

.cta-modal__close:hover {
    background: var(--surface-1);
    color: var(--navy-700);
}

.cta-modal__trust {
    font-size: 13px;
    color: var(--ink-500);
}

.cta-modal__or {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--ink-400);
}

.cta-modal__call {
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 800;
    color: var(--navy-700);
    border-radius: var(--r-md);
}


/* -----------------------------------------------------------------------------
   17 · RESPONSIVE
   -------------------------------------------------------------------------- */

/* ---- ≤1200px: services drop to 2-up, service areas stack ---- */
@media (max-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sa2-inner {
        grid-template-columns: 1fr 400px;
        gap: 44px;
    }
}

/* ---- ≤1024px ---- */
@media (max-width: 1024px) {
    .reviews-split__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sa2-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .ci-hero__top {
        max-width: 100%;
    }
}

/* ---- ≤900px: hero photo needs a taller, more vertical crop ---- */
@media (max-width: 900px) {
    .ci-features-strip__inner {
        grid-template-columns: 1fr;
    }

    .ci-feature {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .ci-feature:first-child {
        border-top: 0;
    }
}

/* ---- ≤768px: the mobile page ---- */
@media (max-width: 768px) {

    .services-grid,
    .reviews-split__track {
        grid-template-columns: 1fr;
    }

    /* Put the lead form above the photo carousel so it lands closer to the
       fold. .hero is not a flex container by default, so establish one. */
    .hero {
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
    }

    .ci-hero-block {
        order: 1;
        min-height: 0;
        margin-bottom: 0;
        /* the full-bleed carousel butts straight up against this, so this is
           just breathing room under the trust panel now */
        padding-bottom: 26px;
    }

    .hero-form-wrap {
        order: 3;
        width: 100%;
        margin-top: 24px;
    }

    .mob-slider {
        order: 2;
        width: 100%;
        margin: 0;
    }

    /* Navy scrim, not the white veil that washed the photo out and left the
       red headline line at ~2:1 contrast. */
    .ci-hero-block::before {
        background: linear-gradient(180deg,
                rgba(2, 28, 38, .72) 0%,
                rgba(2, 28, 38, .64) 46%,
                rgba(2, 28, 38, .78) 100%) !important;
    }

    .ci-hero-block .ci-hero {
        padding: 28px 0 34px !important;
    }

    .ci-hero-block .ci-hero__container {
        /* the width formula already subtracts the gutter; padding on top of it
           squeezed the headline measure to 310px instead of 350px */
        padding: 0 !important;
    }

    .ci-hero__eyebrow {
        font-size: 11px;
        padding: 7px 13px;
        margin-bottom: 14px;
        color: #fff !important;
    }

    /* the H1 was two sizes inside one sentence: 44px then 27px */
    .ci-hero__title,
    .ci-hero__title .ci-hero__title-navy {
        font-size: clamp(36px, 10.4vw, 46px) !important;
        line-height: 1.05 !important;
        letter-spacing: -.032em !important;
    }

    /* Keep the credential chip to one line on a phone. */
    .ci-hero__eyebrow-lead {
        display: none;
    }

    /* Icon beside the title, not above it — stacking added ~60px per card
       across six cards. */
    .svc-card-head {
        flex-direction: row;
        /* align the tile to the title, not to the middle of the paragraph */
        align-items: flex-start;
        gap: 14px;
    }

    .svc-icon {
        margin-top: 2px;
    }

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

    .svc-card {
        padding: 20px 18px 18px;
    }

    .services-lead {
        font-size: 15.5px;
    }

    .ci-hero__title-navy,
    .ci-hero__title-red {
        color: #fff !important;
        /* each span is a block, so balancing the parent does nothing */
        text-wrap: balance;
    }

    .ci-hero__redline {
        margin: 16px 0;
        width: 56px;
        height: 4px;
    }

    /* was a white card with a red edge floating on the photo */
    .ci-hero-block .ci-hero__sub {
        background: none !important;
        border: 0 !important;
        border-left: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        color: rgba(255, 255, 255, .90) !important;
        text-align: left !important;
        font-size: 17.5px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
    }

    /* Trust strip: one glass panel, stacked rows, so each item keeps its
       description. Same treatment as desktop, just turned vertical. */
    .ci-hero-block .ci-features-strip {
        background: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 22px 0 0 !important;
        padding: 0 var(--gutter) !important;
    }

    .ci-hero-block .ci-features-strip__inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        /* the strip already pads by --gutter; the desktop width formula
           subtracted it a second time, so this sat 40px in while the form
           card sat 20px in */
        width: 100% !important;
        background: rgba(2, 28, 38, .46);
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: var(--r-lg);
        backdrop-filter: blur(10px) saturate(1.1);
        -webkit-backdrop-filter: blur(10px) saturate(1.1);
        overflow: hidden;
    }

    .ci-hero-block .ci-feature {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 13px !important;
        padding: 13px 15px !important;
        border: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .13) !important;
        border-radius: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .ci-hero-block .ci-feature:first-child {
        border-top: 0 !important;
    }

    .ci-hero-block .ci-feature__icon {
        width: 38px !important;
        height: 38px !important;
        border: 0 !important;
        border-radius: var(--r-md);
        background: rgba(255, 255, 255, .12) !important;
        flex: 0 0 auto !important;
    }

    .ci-hero-block .ci-feature__icon svg {
        width: 20px;
        height: 20px;
        stroke: #fff;
    }

    .ci-hero-block .ci-feature__title {
        color: #fff !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        letter-spacing: .04em !important;
        text-align: left !important;
        margin: 0 0 2px !important;
    }

    .ci-hero-block .ci-feature__desc {
        display: block !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
        color: rgba(255, 255, 255, .74) !important;
        text-align: left !important;
        margin: 0 !important;
    }

    /* The form was the only unstyled surface on a page full of cards. */
    .hero-form-card {
        width: auto;
        margin: 0 var(--gutter);
        border-radius: var(--r-lg);
        border: 1px solid var(--line-200);
        border-top: 4px solid var(--red-500);
        box-shadow: var(--e3);
        padding: 24px 20px 20px;
    }

    .hero-form-title {
        font-size: 25px;
    }

    .hero-form-sub {
        font-size: 14.5px;
    }

    .mob-slider {
        border-radius: 0;
        overflow: hidden;
        box-shadow: none;
        position: relative;
        z-index: 2;
    }

    /* Mobile keeps a real button per service card — but with brand elevation
       instead of the rgba(187,44,32,.35) red glow. */
    .svc-btn {
        height: 52px;
        border: 0 !important;
        border-radius: var(--r-md) !important;
        background: var(--red-500) !important;
        background-image: none !important;
        box-shadow: var(--e2) !important;
        font-size: 15px;
    }

    .btn-solid,
    .financing-cta__btn,
    .pros-btn,
    .why-btn,
    .final-submit,
    .hf-submit-btn,
    .final-call {
        box-shadow: var(--e2) !important;
    }

    /* header CTA was 36px tall — under the 44px minimum tap target */
    .site-header .btn-solid {
        min-height: 44px;
        padding: 10px 14px;
        border-radius: var(--r-md) !important;
    }

    .site-header .call-sub {
        font-size: 15px;
        letter-spacing: .07em;
        color: rgba(255, 255, 255, .86);
    }

    .site-header {
        background: var(--navy-700);
        border-bottom: 0;
    }

    .call-wrap {
        flex-direction: column;
        gap: 4px;
    }

    .services-head,
    .gallery-head,
    .faq-head {
        margin-bottom: 28px;
    }

    .sa2-inner {
        gap: 28px;
    }

    .pros-card {
        padding: 16px 0 16px 38px;
    }

    .final-cta-bg-card {
        border-radius: var(--r-lg) var(--r-lg) 0 0;
    }
}

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

}


/* -----------------------------------------------------------------------------
   18 · LATE FIXES
   -------------------------------------------------------------------------- */

/* Footer form: with the readonly SERVICE box gone, email takes the full row. */
.final-field--full {
    grid-column: 1 / -1;
}

/* Keep the hero sub from breaking on a conjunction. */
.ci-hero__sub {
    max-width: 640px;
    text-wrap: pretty;
}

@media (max-width: 768px) {

    /* One alignment for the whole mobile hero — the H1 was centred by the
       existing stylesheet while the eyebrow, rule and sub were left-aligned. */
    .ci-hero__top {
        align-items: center;
        text-align: center;
    }

    .ci-hero__eyebrow {
        align-self: center;
    }

    .ci-hero-block .ci-hero__sub {
        text-align: center !important;
        margin-inline: auto !important;
    }

    .ci-hero__redline {
        margin-inline: auto;
    }

    /* Ten accordions at 17px wrapped to three lines each. */
    .faq-q {
        padding: 16px 18px;
        font-size: 15.5px;
        gap: 14px;
    }

    .faq-a {
        padding: 0 18px 18px;
    }

    .faq-a p {
        font-size: 15px;
        margin-top: 14px;
    }

    .faq-item {
        margin-bottom: 10px;
    }

    /* Reassurance chips read as a left-aligned list on a narrow column. */
    .hero-form-note,
    .final-note {
        flex-direction: column;
        
        gap: 10px;
        text-align: center;
    }

    .hero-form-note .hf-chip,
    .final-note .hf-chip {
        align-items: flex-start;
    }

    .hero-form-note .hf-chip svg,
    .final-note .hf-chip svg {
        margin-top: 2px;
    }

    .sa2-cities {
        justify-content: center;
    }

    .sa2-lead,
    .sa2-hq {
        margin-inline: auto;
    }

    .services-cta {
        margin-top: 32px;
    }
}


/* -----------------------------------------------------------------------------
   19 · CAMPAIGN LANDING PAGES (/roof-leak, /roof-repair)
   Same components, but a 4-up trust strip and a taller hero block.
   -------------------------------------------------------------------------- */
.ci-features-strip__inner--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.lp-campaign .ci-hero-block {
    min-height: 748px;
}

@media (max-width: 1100px) {
    .lp-campaign .ci-hero-block {
        min-height: 712px;
    }
}

@media (max-width: 900px) {
    .ci-features-strip__inner--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ci-features-strip__inner--4 .ci-feature:nth-child(2) {
        border-left: 1px solid rgba(255, 255, 255, .14);
        border-top: 0;
    }

    .ci-features-strip__inner--4 .ci-feature:nth-child(3),
    .ci-features-strip__inner--4 .ci-feature:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, .14);
    }
}

@media (max-width: 768px) {

    /* 2x2 chips read better than 3+1 on a phone. */
    .ci-hero-block .ci-features-strip__inner--4 {
        grid-template-columns: 1fr !important;
    }

    .lp-campaign .ci-hero-block {
        min-height: 0;
    }
}

/* Larger hit area for the carousel dots without changing how they look. */
.gallery-dot {
    height: 26px;
    padding: 9px 0;
    background-clip: content-box;
    box-sizing: border-box;
}


/* -----------------------------------------------------------------------------
   20 · MODAL DETAILS
   -------------------------------------------------------------------------- */
.cta-modal__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin-top: 16px;
}

.cta-modal__trust .hf-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cta-modal__trust .hf-chip svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--sky-600);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cta-modal__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cta-modal__call svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--red-500);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* -----------------------------------------------------------------------------
   21 · SERVICE-AREAS BALANCE
   The left column is ~750px but the copy was capped at 46ch, so the section
   read as two things pinned to opposite edges.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .sa2-inner {
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 56px;
    }

    .sa2-lead {
        max-width: 56ch;
    }

    .sa2-cities {
        max-width: 620px;
    }
}


/* -----------------------------------------------------------------------------
   22 · HERO FORM AT MID WIDTHS AND SHORT VIEWPORTS
   styles.css drops .hero-form-wrap out of absolute positioning below 1200px
   wide OR 820px tall (so: every 1366x768 laptop) and, at the same time, strips
   the card of its radius, shadow and contained width. The hero then holds 712px
   of min-height reserved for an overlap that no longer happens — which is where
   the ~250px of empty photo came from.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1200px),
(min-width: 769px) and (max-height: 820px) {
    .hero {
        padding-bottom: 0;
    }

    .ci-hero-block {
        min-height: 560px;
        padding-bottom: 76px;
    }

    /* Only safe here: styles.css has already set position:static and
       transform:none in these ranges. Re-centring the absolutely positioned
       variant this way would fight its own translateX(-50%). */
    .hero-form-wrap {
        /* styles.css sets position:static here, which drops z-index — the card
           would then paint behind the positioned .ci-hero-block and its top
           edge would be sliced off by the overlap. */
        position: relative;
        z-index: 5;
        width: min(var(--container), 100% - var(--gutter) * 2);
        margin: -46px auto 0;
    }
}

/* Keep the lead card a card at every width above the phone breakpoint. */
@media (min-width: 769px) {
    .hero-form-card {
        width: auto;
        border-radius: var(--r-xl);
        box-shadow: var(--e4);
        border-top: 4px solid var(--red-500);
        padding: 30px 32px 24px;
    }
}


/* -----------------------------------------------------------------------------
   23 · LIT TOP EDGE
   A 1px highlight along the top of raised white surfaces: the difference
   between a box with a blur under it and an object catching daylight.
   -------------------------------------------------------------------------- */
.svc-card,
.review2-card,
.gallery-card,
.sa2-card,
.faq-item {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--e1);
}

.svc-card:hover,
.gallery-card:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--e3);
}

.review2-card,
.sa2-card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--e2);
}

.faq-item[open] {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--e2);
}

.hero-form-card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--e4);
}


/* -----------------------------------------------------------------------------
   24 · MOBILE HEADER HEIGHT / LAYOUT SHIFT
   styles.css reserves --header-h: 68px at first paint (before the ResizeObserver
   measures the real bar) precisely so the hero does not jump. Stacking the call
   button over its supporting line needs more than 68px, so the reserved value
   has to move with it or that 20px jump comes back.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    :root {
        --header-h: 76px;
    }

    .header-inner {
        width: auto;
        height: 76px;
        min-height: 76px;
        padding: 0 14px 0 12px;
        margin-inline: 0;
    }

    .site-header .call-wrap {
        gap: 5px;
    }

    .site-header .btn-solid {
        padding: 10px 14px;
    }
}


/* -----------------------------------------------------------------------------
   25 · HERO BACKGROUND IMAGE
   Overridden here rather than in styles.css, which declares it three times:
   the base rule (L5395), a <=1100px re-declaration (L5660), and a <=768px
   mobile swap that carries !important (L6004).
   -------------------------------------------------------------------------- */
.ci-hero-block {
    background-image: url("/assets/images/hero/aerial-tile-roof-install-south-florida.webp");
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 1100px) {
    .ci-hero-block {
        background-position: 58% 40%;
    }
}

@media (max-width: 768px) {
    .ci-hero-block {
        background-image: url("/assets/images/hero/aerial-tile-roof-install-mobile.webp") !important;
        background-position: 50% 42% !important;
        background-size: cover !important;
    }
}


/* -----------------------------------------------------------------------------
   26 · MOBILE POLISH
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* --- Text clarity over the hero photo -------------------------------------
       Measured contrast is already 7.8:1 worst case, so luminance was never the
       problem — it is texture. The tile bundles behind the headline are
       high-frequency detail that competes with the glyph edges. A slightly
       deeper, flatter scrim settles the background down without dimming the
       photograph into mud. */
    .ci-hero-block::before {
        background: linear-gradient(180deg,
                rgba(2, 28, 38, .80) 0%,
                rgba(2, 28, 38, .74) 42%,
                rgba(2, 28, 38, .66) 68%,
                rgba(2, 28, 38, .80) 100%) !important;
    }

    /* --- Service cards ---------------------------------------------------------
       Six identical full-width solid-red call blocks stacked down the page is
       the single loudest amateur signal on mobile: it devalues every one of
       them and makes the section read as a wall of buttons. The per-card action
       becomes an outlined call button — same tap target, same tel: link, same
       JS-injected two-line lockup — and the one solid red button for the whole
       section stays at the end, under the grid. */
    .svc-btn {
        height: auto !important;
        min-height: 48px;
        padding: 9px 14px !important;
        background: var(--surface-0) !important;
        background-image: none !important;
        color: var(--red-600) !important;
        border: 1.5px solid rgba(187, 44, 32, .30) !important;
        border-radius: var(--r-md) !important;
        box-shadow: none !important;
        font-size: 13.5px;
        line-height: 1.15;
    }

    .svc-btn:active {
        background: var(--surface-2) !important;
        border-color: var(--red-500) !important;
    }

    /* the injected lockup is two spans; keep it compact and on-brand */
    .svc-btn span {
        color: inherit !important;
    }

    /* the section's single primary action */
    .services-cta .pros-btn {
        width: 100%;
    }

    /* --- Service-areas heading rule -------------------------------------------
       The section is centred on mobile but the accent rule kept desktop's
       left-aligned margins. */
    .sa2-title::after {
        margin-inline: auto;
    }

    /* --- FAQ ------------------------------------------------------------------
       Questions were wrapping to three lines because the chevron, the gap and
       18px of padding left only ~278px of measure. */
    .faq-q {
        padding: 15px 14px !important;
        gap: 10px !important;
        font-size: 15px !important;
        line-height: 1.35;
    }

    .faq-q::after {
        width: 18px;
        height: 18px;
        -webkit-mask-size: 18px 18px;
        mask-size: 18px 18px;
    }

    .faq-a {
        padding: 0 14px 16px !important;
    }

    /* --- Reading sizes --------------------------------------------------------
       Nothing that carries information should sit below 15px on a phone. */
    .gallery-cap-sub {
        font-size: 15px;
        line-height: 1.55;
    }

    .final-nap,
    .final-bottom {
        font-size: 14px;
        line-height: 1.6;
    }
}


/* -----------------------------------------------------------------------------
   27 · MOBILE SECTION CTAs AND BANDS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Content-width buttons left-hanging under centred copy read as a mistake.
       On a phone a section CTA should span the measure. */
    .pros-btn,
    .why-btn,
    .financing-cta__btn,
    .gallery-cta .why-btn,
    .services-cta .pros-btn {
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        text-align: center;
    }

    .pros-cta,
    .gallery-cta,
    .services-cta,
    .financing-cta__content {
        text-align: center;
    }

    /* The financing band sits on a candid yard photo; on a phone the copy runs
       the full measure over it, so the scrim has to do more work than it does
       on desktop where the text only occupies the left half. */
    .financing-cta__bg {
        background-image:
            linear-gradient(180deg, rgba(2, 28, 38, .80) 0%, rgba(2, 28, 38, .84) 50%, rgba(2, 28, 38, .88) 100%),
            url("../images/roofing-crew-service-trucks.webp") !important;
        background-size: cover, cover !important;
        background-position: center, 58% 45% !important;
    }

    .financing-cta__title {
        margin-bottom: 14px;
    }

    .financing-cta__text {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 26px;
    }
}


/* -----------------------------------------------------------------------------
   28 · MOBILE TYPE FINISHING
   Tracked uppercase is a readability tax at phone sizes — ease it off and stop
   the long ones wrapping into ragged two-line blocks.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    .services-kicker,
    .gallery-kicker,
    .faq-kicker,
    .pros-eyebrow {
        font-size: 13px;
        letter-spacing: .08em;
        margin-right: -.08em;
        line-height: 1.45;
        text-wrap: balance;
    }

    .review2-stars {
        letter-spacing: .07em;
        font-size: 12.5px;
    }

    .field label,
    .final-field label,
    .cta-modal__field label {
        letter-spacing: .06em;
        font-size: 12.5px;
    }

    /* keep short trailing words off their own line */
    .final-offer-sub,
    .final-desc,
    .services-lead,
    .sa2-lead,
    .hero-form-sub {
        text-wrap: pretty;
    }

    /* section heads were sized for a wide measure */
    .services-title,
    .pros-title,
    .reviews-split__title,
    .gallery-title,
    .sa2-title,
    .faq-title,
    .financing-cta__title,
    .final-title {
        text-wrap: balance;
    }
}


/* -----------------------------------------------------------------------------
   29 · MOBILE: MOTION, TAP TARGETS, RED BUDGET
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* styles.css:5331 runs an infinite 4.5s white gleam across every red button.
       With several call buttons in view at once on a phone the whole column
       shimmers, which is the loudest "free template" cue on the page. Hover
       cannot fire on a touch device, so the sweep has no purpose here. */
    .btn-solid::after,
    .hf-submit-btn::after,
    .why-btn::after,
    .svc-btn::after,
    .pros-btn::after,
    .financing-cta__btn::after,
    .final-submit::after,
    .final-call::after,
    .cta-modal__submit::after,
    .cta-modal__call::after {
        content: none !important;
        animation: none !important;
    }

    /* Carousel dots were an 8px target on a 15px pitch. Keep the mark 8px and
       grow the hit box around it. */
    .mob-slider__dots {
        gap: 4px !important;
    }

    /* The element itself becomes an invisible 30px hit area and the visible mark
       is drawn by ::after. styles.css also gives it a 1.5px white border, a box
       shadow and a scale() on .is-active — all three have to go, or the hit area
       renders as a white square. */
    .mob-slider__dot {
        width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        position: relative;
        -webkit-appearance: none;
        appearance: none;
    }

    .mob-slider__dot::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        border-radius: var(--r-pill);
        background: rgba(255, 255, 255, .6);
        /* the mark sits on photography, so it needs its own separation */
        box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
        transition: width var(--t) var(--ease), background-color var(--t) var(--ease);
    }

    .mob-slider__dot.is-active {
        transform: none !important;
    }

    .mob-slider__dot.is-active::after {
        width: 22px;
        margin-left: -11px;
        background: #fff;
    }

    .gallery-zoom {
        width: 44px !important;
        height: 44px !important;
    }

    /* Inline phone links were a ~16px-tall hit box. */
    .sa2-hq a,
    .final-nap a {
        display: inline-block;
        padding: 11px 6px;
        font-weight: 700;
    }

    /* Red is reserved for actions. These two were spending it on decoration,
       which is part of why fifteen red buttons could hide in plain sight. */
    .review2-stars {
        color: var(--navy-700);
    }

    .review2-stars::before {
        background: var(--sky-700);
    }

    .pros-eyebrow {
        color: var(--sky-700);
    }
}


/* -----------------------------------------------------------------------------
   30 · MOBILE READING SETTINGS
   Corrections after measuring the shipped values: the credibility copy was the
   smallest, tightest type on the page, and two columns were being squeezed by a
   gutter applied on top of the spine width.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* styles.css:6022 adds 24px of padding on top of the spine width, so the
       FAQ column was 48px narrower than every other section and the questions
       wrapped below a readable measure. */
    .faq-inner {
        padding: 0 !important;
    }

    /* A question and its answer at the same size is not a hierarchy. */
    .faq-q {
        font-size: 16px !important;
        line-height: 1.4;
    }

    .faq-a p {
        font-size: 15px;
        line-height: 1.65;
    }

    /* The trust panel carries the first credibility copy a visitor reads. */
    .ci-hero-block .ci-feature__title {
        font-size: 13px !important;
        letter-spacing: .05em !important;
    }

    .ci-hero-block .ci-feature__desc {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Leading floor of 1.5 for anything that is read in sentences. */
    .sa2-list li {
        line-height: 1.55;
    }

    .hero-form-note,
    .final-note,
    .cta-modal__trust {
        line-height: 1.5;
    }

    /* Cap the measure so no paragraph runs past ~45 characters. */
    .services-lead,
    .sa2-lead,
    .financing-cta__text,
    .final-desc,
    .hero-form-sub,
    .reviews-split__left p {
        max-width: 45ch;
        margin-inline: auto;
    }

    /* Widow control on every body selector, not just five of them. */
    .svc-desc,
    .pros-card p,
    .review2-text,
    .faq-a p,
    .gallery-cap-sub,
    .sa2-list li,
    .ci-feature__desc,
    .final-offer-sub,
    .final-desc,
    .services-lead,
    .sa2-lead,
    .hero-form-sub,
    .financing-cta__text {
        text-wrap: pretty;
    }

    /* --ink-500 is 4.98:1 on white — a 0.5% margin over AA, and it drops below
       on the tinted surfaces. Secondary copy moves one step darker. */
    .services-lead,
    .sa2-lead,
    .gallery-cap-sub,
    .hero-form-sub,
    .sa2-hq {
        color: var(--ink-600);
    }
}


/* -----------------------------------------------------------------------------
   31 · NARROW PHONES (<=360px)
   The enlarged hero type is sized for a 390px measure; on a 320-360px screen
   both sub-headline sentences wrap, doubling the block to four lines and
   pushing the form heading past the fold.
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
    .ci-hero-block .ci-hero__sub {
        font-size: 16px !important;
        line-height: 1.48 !important;
    }

    .ci-hero-block .ci-hero {
        padding: 22px 0 30px !important;
    }

    .ci-hero__eyebrow {
        font-size: 10.5px;
        padding: 6px 12px;
    }
}


/* -----------------------------------------------------------------------------
   32 · HERO GAP
   The space under the sub-headline was 80px of nothing, built from three
   stacked paddings that nobody set together: .ci-hero__top pb 24 +
   .ci-hero pb 34 + .ci-features-strip mt 22. Collapsed to one 32px beat.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .ci-hero-block .ci-hero__top {
        padding-bottom: 0 !important;
    }

    .ci-hero-block .ci-hero {
        padding: 26px 0 12px !important;
    }

    .ci-hero-block .ci-features-strip {
        margin-top: 20px !important;
    }
}


/* -----------------------------------------------------------------------------
   33 · ONE GUTTER ON MOBILE
   Measured against a 20px spine: the financing band sat at 16px, the gallery
   cards at 26px (a 6px track padding meant for clipped desktop shadows), and
   the two pieces of fixed chrome carried their own 12/14px insets — so the
   logo and the sticky bar never lined up with the content underneath them.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .financing-cta__inner {
        width: min(var(--container), 100% - var(--gutter) * 2);
        max-width: none;
        margin-inline: auto;
    }

    .gallery-track {
        padding: 0;
    }

    .header-inner {
        padding: 0 var(--gutter);
    }

}


/* -----------------------------------------------------------------------------
   34 · MOBILE HEADER
   The logo was flex:0 0 auto and the call button is nowrap, so below ~400px the
   button ran over the logo card.

   The binding constraint is the button LABEL, not the logo. "Call (954)
   984-0100" set inline needs ~190px, which leaves under 150px for a 4.35:1
   wordmark that also carries a licence strap line — a 30px logo nobody can
   read. Stacking "CALL" above the number costs no words and ~45px less width.

   Sizes are explicit per breakpoint. The image gets a HEIGHT, and the card
   shrink-wraps it — a percentage max-width leaves the card's content size
   indeterminate, so it stops shrink-wrapping and grows back under the button.
   Selectors match `.site-header .header-logo img` (0,2,1) because the desktop
   rule at that specificity would otherwise win.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .header-inner {
        gap: 12px;
    }

    /* The button keeps its natural width so the label never wraps or clips;
       the logo absorbs whatever is left. width:100% on the image (rather than
       max-width:100%) keeps the card's content size determinate, so the card
       shrink-wraps AND scales instead of growing under the button. */
    .header-logo {
        flex: 0 1 auto;
        min-width: 64px;
        overflow: visible;
        padding: 4px 6px;
    }

    .site-header .header-logo img {
        width: 100%;
        max-width: 172px;
        height: auto;
        max-height: 44px;
    }

    .header-cta {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* styles.css stretches .btn-solid to 100% here, so the column is what sets
       the button width — shrink-wrap it instead of letting a long sub-line
       widen the button and squeeze the logo. */
    .site-header .call-wrap {
        width: fit-content;
        max-width: none;
        margin-left: auto;
    }

    .site-header .call-sub {
        white-space: normal;
        max-width: 100%;
    }

    /* One line: CALL (954) 984-0100 */
    .btn-call-word {
        display: inline;
    }

    .header-btn-line2 {
        display: block;
        white-space: nowrap;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .site-header .header-logo img {
        max-width: 152px;
        max-height: 38px;
    }

    .site-header .btn-solid {
        padding: 10px 14px;
    }

    .header-btn-line2 {
        font-size: 14.5px;
        letter-spacing: 0;
    }

    .site-header .call-sub {
        font-size: 13px;
        letter-spacing: .03em;
    }

    .site-header .call-wrap {
        max-width: none;
    }
}

/* Budget per width: vw - 20 (left) - 12 (gap) - 20 (right) must cover the logo
   card (image + 14px padding) plus the button. These steps are derived from
   that, not guessed. */
@media (max-width: 376px) {
    .site-header .header-logo img {
        max-width: 140px;
        max-height: 34px;
    }

    .site-header .call-wrap {
        max-width: none;
    }
}

@media (max-width: 344px) {
    .site-header .header-logo img {
        max-width: 128px;
        max-height: 30px;
    }

    .header-btn-line2 {
        font-size: 14px;
    }

    .site-header .call-wrap {
        max-width: none;
    }

    .header-inner {
        gap: 8px;
    }
}

@media (max-width: 330px) {
    .site-header .header-logo img {
        max-width: 116px;
        max-height: 28px;
    }

    .header-btn-line2 {
        font-size: 13px;
    }

    .site-header .call-wrap {
        max-width: none;
    }
}

/* The campaign pages run a much longer sub-line ("15% OFF ALL ROOF LEAK
   REPAIRS"); it has to stay within the reserved 76px bar or the hero jumps. */
@media (max-width: 992px) {
    .lp-campaign .site-header .call-sub {
        font-size: 14px;
        letter-spacing: .02em;
        line-height: 1.25;
    }
}


/* -----------------------------------------------------------------------------
   35 · VERY NARROW PHONES — HEADER HEIGHT
   At <=344px "Free Roof Inspection" wraps to two lines, which needs ~78px
   against a 76px bar. Grow the bar AND the reserved --header-h together, or the
   hero jumps when the ResizeObserver corrects it after first paint.
   -------------------------------------------------------------------------- */
@media (max-width: 344px) {
    :root {
        --header-h: 88px;
    }

    .header-inner {
        height: 88px;
        min-height: 88px;
    }

    .site-header .call-sub {
        font-size: 12px;
        line-height: 1.25;
    }
}


/* -----------------------------------------------------------------------------
   36 · FOOTER TAIL (mobile)
   With the sticky bar removed there is nothing to clear, so the final band's
   generous desktop bottom padding just reads as dead space at the end of the
   page. Section 29's clearance rule was removed with the bar.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .final-cta-bg-card {
        padding-bottom: 44px;
    }
}


/* -----------------------------------------------------------------------------
   37 · SERVICES SECTION CTA (mobile)
   On a phone every card already carries its own call button, so the button
   under the grid is the same action a seventh time in a row. Desktop keeps it:
   there the per-card CTA is demoted to a text link, so this is the section's
   only solid action.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .services-cta {
        display: none;
    }
}


/* -----------------------------------------------------------------------------
   38 · PROS EYEBROW (mobile)
   The section heading and body are centred on a phone but the eyebrow above
   them kept its left alignment, so the block started ragged.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .pros-eyebrow {
        text-align: center;
        margin-inline: auto;
    }
}


/* -----------------------------------------------------------------------------
   39 · CAMPAIGN HERO FORM GRID
   styles.css:6272 gives the campaign pages a 5-column grid because their form
   once carried a visible read-only SERVICE field. That field is a hidden input
   now, so only four cells render and the fifth track sat empty — 279px of dead
   space between the submit button and the right edge of the card.
   Four columns, matching /roofing.
   -------------------------------------------------------------------------- */
@media (min-width: 1201px) {
    .lp-campaign .hf-flat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px 20px;
    }

    .lp-campaign .hf-flat-grid .hf-submit-btn {
        padding: 0 26px;
    }
}


/* -----------------------------------------------------------------------------
   40 · CAMPAIGN SERVICES GRID — OPTION A (2 x 2)
   These pages carry 4 cards, not 6, so the 3-up grid orphans the fourth.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    .lp-campaign .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}