/* =========================
   1) DESIGN TOKENS
   SCI Roofing (Southern Coatings Inc) brand palette
   Brick red #BB2C20 · Sky blue #439DBE · Deep teal-navy #033648 · Pale blue #EAF6FC
========================= */
:root {
    /* Brand */
    --brand-header: #033648;
    /* Deep teal-navy (logo wordmark) */
    --brand-primary: linear-gradient(135deg, #033648 0%, #439DBE 100%);
    --brand-secondary: #BB2C20;
    /* SCI brick red (logo mark + primary CTA) */
    --brand-accent: #BB2C20;
    --brand-border: #BB2C20;

    /* Supporting brand tones */
    --brand-blue: #439DBE;
    /* SCI sky blue (logo swoosh) */
    --brand-tint: #EAF6FC;
    /* Pale blue section wash */
    --brand-red-hover: #B91D0C;

    /* Neutrals */
    --text-dark: #033648;
    /* Deep brand teal-navy */
    --text-body: #374151;
    /* Soft dark gray for reading */
    --bg-light: #ffffff;
    --bg-white: #ffffff;
    --border-color: #E2E8F0;

    /* Typography — SCI brand faces */
    --font-body: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    --font-heading: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    /* Back-compat / header usage */
    --font-main: var(--font-heading);

    /* Layout */
    --container: 1320px;

    /* Header (set by JS) */
    --header-h: 0px;
}

/* =========================
   2) RESET / BASE
========================= */
html {
    scroll-padding-top: var(--header-h);
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
}

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

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

/* Prevent accidental overflow from sections using 100vw etc. */
body {
    overflow-x: clip;
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.1px;
    color: var(--text-dark);
}

/* =========================
   3) HEADER
   - Sticky on desktop, fixed on mobile
   - CTA button uses 2 lines (no overlap)
========================= */
.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    background: linear-gradient(110deg, #ffffff 40.5%, #033648 40%);
    z-index: 1000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.header-inner {
    max-width: 1720px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 90px;
    /* matches logo + breathing room */
    gap: 18px;
}

.header-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.header-logo img {
    height: 72px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .20));
}

.header-cta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* CTA button (tel link) */
.btn-solid {
    display: inline-flex;
    width: auto;
    max-width: 500px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    white-space: nowrap;
    font-family: var(--font-main);

    border-radius: 999px;
    border: 2px solid #B91D0C;
    background: #BB2C20;
    color: #ffffff;

    padding: 14px 20px;
    gap: 2px;

    box-shadow: 0 3px 10px rgba(187, 44, 32, .35);
}

.header-btn-line1 {
    display: inline;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: .04em;
    font-size: clamp(16px, 1.55vw, 24px);
    text-transform: uppercase;
}

.header-btn-line1::after {
    content: "\00a0\00a0";
}

.header-btn-line2 {
    display: inline;
    font-weight: 900;
    line-height: 1.05;
    font-size: clamp(16px, 1.55vw, 34px);
    text-transform: uppercase;
    letter-spacing: .01em;
}


.call-wrap {
    width: fit-content;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
}

/* Header alignment helpers */
.header-logo {
    margin-left: clamp(0px, 2.5vw, 48px);
}


.call-sub {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: clamp(18px, 1.2vw, 28px);
    color: var(--bg-white);
    font-family: var(--font-main);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

/* Keep the "Call now for 24/7 Service" line centered under the pill */
.site-header .call-sub {
    display: block;
    width: auto;
    max-width: 500px;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    /* shrink-to-fit + center directly under the pill */
    text-align: center;
}

@media (max-width: 992px) {
    .site-header .call-sub {
        max-width: none;
        align-self: stretch;
    }
}



/* =========================
   MOBILE HEADER
========================= */
@media (max-width: 992px) {
    /* Reserve the fixed-header height from first paint (matches .header-inner's
       68px) so JS setting --header-h after load does NOT push content down.
       This was the hero's ~0.083 layout shift. */
    :root {
        --header-h: 68px;
    }

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        /* Full blue — no gradient split that breaks on narrow screens */
        background: #033648;
    }

    body {
        padding-top: var(--header-h);
    }

    .header-inner {
        padding: 0 14px 0 12px;
        height: 68px;
        min-height: 68px;
        gap: 10px;
        align-items: center;
    }

    .header-nav {
        display: none;
    }

    /* White card behind logo — preserves logo colors on blue bg */
    .header-logo {
        flex: 0 0 auto;
        margin-left: 0;
        background: #ffffff;
        border-radius: 6px;
        padding: 6px 10px;
        display: flex;
        align-items: center;
    }

    .header-logo img {
        height: 50px;
    }

    .header-cta {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .btn-outline {
        display: none;
    }

    .call-wrap {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        margin-top: 0;
    }

    .btn-solid {
        width: 100%;
        max-width: none;
        border-radius: 8px;
        padding: 8px 12px;
        white-space: nowrap;
        text-align: center;
        flex-direction: row;
        box-shadow: 0 2px 8px rgba(187, 44, 32, .35);
    }

    .header-btn-line1 {
        display: none;
    }

    .header-btn-line1::after {
        content: none;
    }

    .header-btn-line2 {
        display: block;
        font-size: 17px;
        font-weight: 900;
        letter-spacing: 0.8px;
    }

    .call-sub {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1.5px;
        line-height: 1;
        color: rgba(255, 255, 255, 0.90);
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .header-inner {
        padding: 0 12px 0 10px;
    }

    .header-logo {
        padding: 5px 8px;
    }

    .header-logo img {
        height: 48px;
    }

    .btn-solid {
        padding: 8px 10px;
    }

    .header-btn-line2 {
        font-size: 20px;
        letter-spacing: 0.5px;
    }

    .call-sub {
        font-size: 16px;
        letter-spacing: 1.2px;
        white-space: nowrap;
    }
}

/* The SCI Roofing logo is a wide 4.35:1 wordmark (the template's previous mark was
   ~2:1), so the mobile header caps it by WIDTH to keep the call button on screen. */
@media (max-width: 992px) {
    .header-logo img {
        height: auto;
        max-height: 50px;
        max-width: 210px;
    }
}

@media (max-width: 560px) {
    .header-logo {
        padding: 5px 7px;
    }

    .header-logo img {
        max-height: 42px;
        max-width: 140px;
    }

    .btn-solid {
        padding: 8px 9px;
    }

    .header-btn-line2 {
        font-size: 15px;
        letter-spacing: 0.2px;
    }

    /* The campaign LPs run a much longer sub-line ("15% OFF ALL ROOF LEAK
       REPAIRS") than /roofing, so let it wrap instead of forcing it off the
       right edge. Short subcopy still sits on one line. */
    .call-sub {
        font-size: 12px;
        letter-spacing: 0.8px;
        white-space: normal;
        text-align: right;
        line-height: 1.2;
    }
}

/* Smallest phones (<=360px): the button label is nowrap, so step it down once
   more. Declared last so it wins over the blocks above. */
@media (max-width: 360px) {
    .header-logo img {
        max-height: 36px;
        max-width: 118px;
    }

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

    .call-sub {
        font-size: 10.5px;
        letter-spacing: 0.4px;
    }
}

/* =========================================================
   4) HERO (from hero.css)
========================================================= */

.hero {
    position: relative;
    background: #ffffff;
    padding-bottom: 180px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 580px;
    height: auto;
}

/* LEFT */
.hero-left {
    position: relative;
    overflow: hidden;
    background: url("../images/oceanfront-commercial-rooftop.webp") center / cover no-repeat;
}

.hero-left::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(3, 54, 72, 0.384) 0%, rgba(3, 54, 72, 0.349) 100%);
}

.hero-left-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px 48px;
}

/* Mobile-only location pill (hidden on desktop) */
.hero-loc {
    display: none;
    justify-content: center;
    margin-bottom: 16px;
}

.hero-loc-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 12px;
    font-family: var(--font-heading);
    text-transform: uppercase;
}

.hero-loc-icon {
    width: 14px;
    height: 14px;
    display: block;
    filter: brightness(0) invert(1);
}

.hero-copy {
    width: 100%;
    max-width: 720px;
    text-align: left;
    color: #fff;
}

.hero-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(187, 44, 32, 0.15);
    border: 1.5px solid #BB2C20;
    backdrop-filter: blur(6px);
    color: #ffffff;
}

.hero-title {
    margin: 0 0 24px;
    font-weight: 900;
    line-height: 1.1;
    font-size: 40px;
    font-family: var(--font-body);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
}

/* Secondary CTA under hero title */
.hero-trust-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    padding: 12px 24px;
    margin: 0 0 20px;

    border-radius: 999px;
    text-decoration: none;

    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.6px;

    color: #fff;
    background: linear-gradient(135deg, #033648 0%, #439DBE 100%);
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);

    backdrop-filter: blur(8px);
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.hero-trust-btn:hover {
    transform: translateY(-1px);
    background: #439DBE;
    border-color: rgba(3, 54, 72, 0.28);
    color: #ffffff;
}

.hero-trust-btn:active {
    transform: translateY(0);
}

@media (min-width: 769px) {
    .hero-trust-btn {
        width: auto;
        padding: 10px 28px;
        justify-content: center;
    }
}

/* =========================
   HERO ICON LIST (under title)
========================= */
.hero-points {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 520px;
}

.hero-point {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 18px 12px 54px;
    margin-bottom: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    transition: background 0.2s ease;
}

.hero-point:hover {
    background: rgba(255, 255, 255, 0.16);
}

.hero-point::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background:var(--brand-header);
    border: 1px solid rgba(67, 157, 190, 0.35);
}

.hero-point>.icon-list__icon {
    position: absolute !important;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.hero-point>.icon-list__text {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.hero-call {
    display: inline-block;
    text-decoration: none;
    background: var(--brand-secondary);
    color: var(--bg-light);
    border-radius: 12px;
    padding: 16px 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-call-2 {
    display: inline-block;
    text-decoration: none;
    background: var(--brand-primary);
    color: var(--bg-light);
    border-radius: 12px;
    padding: 16px 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.hero-call-top {
    display: block;
    font-weight: 800;
    letter-spacing: 1.5px;
    font-size: 18px;
    font-family: var(--font-heading);
    text-transform: uppercase;
    margin-bottom: 4px;
    text-align: center;
    color: #033648;
}

.hero-call-main {
    display: block;
    font-weight: 900;
    font-size: 30px;
    font-family: var(--font-heading);
    line-height: 1;
    color: var(--bg-white);
}

/* RIGHT */
.hero-right {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #02303F;
    background: #439DBE;
}

/* ---- Hero Composite (Desktop) ---- */
.hero-composite-desktop {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* =========================
   Floating Form (desktop)
========================= */
.hero-form-wrap {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: min(1420px, calc(100% - 48px));
    z-index: 5;
}

.hero-form-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    padding: 26px 28px 18px;
}

.hero-form-head {
    text-align: center;
    margin-bottom: 14px;
}

.hero-form-title {
    font-weight: 900;
    font-size: 40px;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    color: var(--brand-header);
    line-height: 1.05;
    text-transform: uppercase;
}

/* subtitle like your 2nd reference (not spaced-out) */
.hero-form-sub {
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 600;
    color: #4b5563;
    margin-top: 10px;
    /* Matches .ci-feature__desc (the trust-strip description text). */
    font-size: 14px;
    font-family: var(--font-heading);
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================
   FORM FIELDS BASE
========================= */
.field {
    min-width: 0;
}

.field label {
    display: block;
    font-size: 14px;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    color: #1b1b1b;
    /* Breathing room above the label and between the label and its input. */
    margin-top: 14px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.field input,
.field select {
    width: 100%;
    height: 54px;
    border: 0;
    outline: 0;
    background: #f3f3f3;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 15px;
    font-family: var(--font-heading);
    color: #1b1b1b;
    box-sizing: border-box;
}

/* bootstrap floating select support */
.hero-form-card .form-floating {
    width: 100%;
}

.hero-form-card .form-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 0;
    background: #f3f3f3;
    border-radius: 8px;
    height: 54px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.hero-form-card .form-floating>label {
    padding: 10px 14px;
    font-size: 13px;
    opacity: 0.7;
}

/* ==========================================================
   ✅ 3-STEP WIZARD LAYOUT (DESKTOP)
========================================================== */

/* grid container: left = fields, right = button */
.hero-steps {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: end;
}

/* steps hidden by default */
.hero-step {
    display: none;
}

/* active step goes to LEFT column */
.hero-step.is-active {
    display: block;
    grid-column: 1;
    grid-row: 1;
}

/* controls go to RIGHT column (same row) */
.hero-step-controls {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
}

/* fields grid (Step 1 + Step 2) */
.hero-fields--step {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
}

/* ✅ STEP 3: service + recaptcha in ONE ROW */
/* Update the main container to use Flexbox */
.hero-fields--step {
    display: flex;
    gap: 16px;
    align-items: end;
    width: 100%;
}

/* Force all input fields to grow equally to fill the space */
.hero-fields--step>.field {
    flex: 1 1 0%;
    min-width: 0;
    /* Prevents inputs from overflowing */
}

/* Ensure the reCAPTCHA box (if it loads) doesn't stretch out of proportion */
.hero-fields--step>.hero-recaptcha {
    flex: 0 0 auto;
}

/* keep dropdown flexible */
.hero-step[data-step="2"] .service-field {
    min-width: 0;
}

/* recaptcha sits to the right side of dropdown */
.hero-recaptcha {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

/* desktop: slightly scale down so it fits the row cleanly */
.hero-recaptcha .g-recaptcha {
    transform: scale(0.92);
    transform-origin: right bottom;
}

/* Buttons */
.hero-step-btn {
    height: 64px;
    min-width: 240px;
    padding: 0 26px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    background: var(--brand-primary);
    color: var(--bg-white);
    font-size: 18px;
}

/* ✅ remove/hide any "back" button */
.hero-step-btn.is-ghost,
.hero-step-btn.back-btn,
#heroBackBtn {
    display: none !important;
}

#heroSubmitBtn {
    display: none;
    /* JS shows on step 3 */
}

/* Note text */
.hero-form-note {
    text-align: center;
    font-size: 12px;
    color: #030303;
    margin-top: 8px;
}

/* ==========================================================
   FLAT HERO FORM GRID
========================================================== */
.hf-flat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 20px;
    align-items: end;
}

.hf-cta-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CTA button lives in the last grid column: fill it and bottom-align with the inputs */
.hf-flat-grid .hf-submit-btn {
    width: 100%;
    min-width: 0;
}

.hf-bottom-row {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.hf-submit-btn {
    height: 64px;
    min-width: 240px;
    padding: 0 26px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    background: var(--brand-primary);
    color: var(--bg-white);
    transition: filter 0.15s ease, transform 0.15s ease;
}

.hf-submit-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .hero-form-wrap {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }
    .hero-form-card {
        border-radius: 0;
        box-shadow: none;
        padding: 22px 16px 18px;
    }
    .hero {
        padding-bottom: 0;
    }
    .hf-flat-grid {
        grid-template-columns: 1fr;
    }
    .hf-cta-cell {
        justify-content: center;
    }
    .hf-submit-btn {
        width: 100%;
        min-width: 0;
    }
    .hero-form-title {
        font-size: 24px;
    }
    .hero-form-sub {
        /* Matches .ci-feature__desc at this breakpoint. */
        font-size: 13.5px;
    }
}

/* Tablet: hero form drops to 2 columns so the CTA button keeps enough room */
@media (min-width: 769px) and (max-width: 1200px) {
    .hf-flat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1200px) {
    .hero {
        margin-bottom: 0;
    }

    .hero-form-wrap {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
    }

    .hero-form-card {
        width: 100%;
        box-sizing: border-box;
        border-radius: 0;
        box-shadow: none;
        padding: 22px 16px 18px;
    }

    .hero-steps {
        grid-template-columns: 1fr;
        gap: 14px;
        align-items: stretch;
    }

    .hero-step.is-active {
        grid-column: 1;
        grid-row: auto;
    }

    .hero-step-controls {
        grid-column: 1;
        grid-row: auto;
        justify-content: center;
    }

    .hero-fields--step {
        flex-direction: column;
        gap: 14px;
        width: 100%;
    }

    .hero-fields--step>.field {
        flex: 1 1 100%;
        width: 100%;
    }

    .hero-step[data-step="2"] .hero-fields--step {
        flex-direction: column;
    }

    .hero-step-btn {
        width: 100%;
        min-width: 0;
    }

    .hero-recaptcha {
        justify-content: center;
    }

    .hero-recaptcha .g-recaptcha {
        transform: scale(0.88);
        transform-origin: center;
    }
}

/* =========================================
   FIX: Browser Zoom (133%–150%) floating bug
   Trigger when viewport height is short
========================================= */
@media (max-height: 820px) {
    .hero {
        margin-bottom: 0;
    }

    .hero-form-wrap {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
    }

    .hero-form-card {
        border-radius: 0;
        box-shadow: none;
        padding: 22px 16px 18px;
    }
}

/* ============================
   HERO IMAGE (premium card)
============================ */
.hero-loc-media {
    display: none;
    width: 100%;
    max-width: 960px;
    margin: 0 auto 30px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hero-loc-media img {
    width: 100%;
    height: auto;
    display: block;
}


/* ============================
   Form Bottom Image (spicy)
============================ */
.hero-form-bottom-media {
    display: none;
    margin-top: 14px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

/* Slider */
.form-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
}

.form-slider__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.form-slider__img.is-active {
    opacity: 1;
}

/* Dot indicators */
.form-slider__dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 10px 0 4px;
}

.form-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(67, 157, 190, 0.20);
    border: 1.5px solid rgba(67, 157, 190, 0.35);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.form-slider__dot.is-active {
    background: #033648;
    border-color: #033648;
    transform: scale(1.25);
}

/* Mobile-only hero image slider (shown before the hero form card on mobile) */
.mob-slider {
    display: none;
}

@media (max-width: 768px) {
    .mob-slider {
        display: block;
        position: relative;
        width: 100%;
        margin: 0 auto 14px;
        box-sizing: border-box;
    }

    .mob-slider__track {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .mob-slider__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    .mob-slider__img.is-active {
        opacity: 1;
    }

    /* Dots overlaid inside the image, bottom-center */
    .mob-slider__dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 8px;
        z-index: 2;
        display: flex;
        justify-content: center;
        gap: 7px;
        padding: 0;
    }

    .mob-slider__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.55);
        border: 1.5px solid rgba(255, 255, 255, 0.9);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
        cursor: pointer;
        transition: background 0.3s ease, transform 0.3s ease;
        display: inline-block;
    }

    .mob-slider__dot.is-active {
        background: #BB2C20;
        border-color: #ffffff;
        transform: scale(1.25);
    }
}

@media (max-width: 768px) {

    /* ── Layout ── */
    .hero {
        padding-bottom: 0;
    }

    .hero::after {
        content: none !important;
        display: none !important;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero-right {
        display: none;
    }

    .hero-left-inner {
        padding: 20px 16px 24px;
        display: block;
    }

    /* ── Hero composite image (full-bleed strip) ── */
    .hero-loc-media {
        display: block;
        width: 100vw;
        max-width: none;
        margin: -20px 0 18px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 0;
        overflow: hidden;
        box-shadow: none;
    }

    .hero-loc-media img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        display: block;
    }

    /* ── Location pill — hidden on mobile ── */
    .hero-loc {
        display: none;
    }

    /* ── Copy block ── */
    .hero-copy {
        text-align: center;
        max-width: 480px;
        margin: 0 auto;
        padding: 0;
    }

    /* ── Kicker — compact badge, not a button ── */
    .hero-kicker {
        font-size: 11px;
        letter-spacing: 2px;
        margin-bottom: 12px;
        padding: 6px 14px;
        background: rgba(187, 44, 32, 0.12);
        border: 1.5px solid rgba(187, 44, 32, 0.7);
        border-radius: 999px;
    }

    /* ── H1 — professional size on mobile ── */
    .hero-title {
        font-size: 22px;
        line-height: 1.15;
        margin-bottom: 12px;
        text-transform: none;
        letter-spacing: 0;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        text-wrap: balance;
    }
    .hero-title br {
        display: none;
    }

    /* ── "Skip the Shovel" — demoted to subtle secondary tag ── */
    .hero-trust-btn {
        display: inline-flex;
        width: auto;
        padding: 7px 16px;
        margin: 0 auto 14px;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.5px;
        border-radius: 999px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.28);
        box-shadow: none;
        color: rgb(255, 254, 254);
    }

    /* ── Icon list — compact, tight rows ── */
    .hero-points {
        position: relative;
        padding: 0;
        border-radius: 0;
        background: none;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: visible;
        width: 100%;
        max-width: 420px;
        margin: 0 auto 18px;
        gap: 4px;
    }

    .hero-points::before {
        display: none;
    }

    .hero-points li {
        margin-top: 0;
    }

    .hero-point {
        position: relative;
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 9px 12px 9px 44px;
        text-align: left;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .hero-point::before {
        content: "";
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 26px;
        height: 26px;
        border-radius: 6px;
        background: rgba(3, 54, 72, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: none;
        backdrop-filter: none;
    }

    .hero-point>.icon-list__icon {
        position: absolute !important;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        width: 15px !important;
        height: 15px !important;
        margin: 0 !important;
        display: block;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }

    .hero-point>.icon-list__text {
        display: inline-block;
        font-weight: 600;
        font-size: 15px;
        line-height: 1.3;
        color: rgba(255, 255, 255, 0.92);
    }

    /* ── Bottom CTA call button ── */
    .hero-call {
        width: min(100%, 400px);
        border-radius: 12px;
        padding: 14px 20px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
        margin: 0 auto;
        display: block;
        text-align: center;
        background: var(--brand-secondary);
    }

    .hero-call-top {
        font-size: 20px;
        letter-spacing: 2px;
        font-weight: 800;
        margin-bottom: 2px;
        color: rgba(255, 255, 255, 0.88);
    }

    .hero-call-main {
        font-size: 28px;
        line-height: 1.1;
        font-weight: 900;
        color: #fff;
    }

    /* ── Form section ── */
    .hero-form-bottom-media {
        display: none !important;
    }

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

    .hero-form-sub {
        /* Matches .ci-feature__desc at this breakpoint. */
        font-size: 13.5px;
    }

    .field label {
        font-size: 13px;
        letter-spacing: 1.6px;
        margin-bottom: 6px;
    }

    .field input,
    .field select {
        height: 52px;
        border-radius: 8px;
        background: #f2f2f2;
        padding: 0 16px;
        font-size: 16px;
    }
}

/* =========================================================
   WHY TRUST US 
   ========================================================= */

.why-trust {
    position: relative;
    padding: 300px 0 110px;
    background-color: #EAF6FC;

    /* Old-brand logo watermark removed during the SCI Roofing rebrand */
    background-image: none;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 2020px auto;
}

.why-inner {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    text-align: center;
}

.why-title {
    font-family: var(--font-heading);
    margin: 0 0 18px;
    font-weight: 900;
    letter-spacing: 0.5px;
    font-size: 53px;
    color:var(--text-dark);
}

/* Optional subtitle (still safe if you un-comment HTML) */
.why-sub {
    margin: 0 auto 46px;
    max-width: 920px;
    font-size: 20px;
    line-height: 1.5;
    color: rgba(2, 26, 36, 0.8);
    font-family: var(--font-heading);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    align-items: stretch;
    margin: 0 auto 44px;
}

.why-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 40px 28px 34px;
    border: 2px dashed rgba(67, 157, 190, 0.55);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.why-corner {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 20px;
    height: 20px;
    color: rgba(0, 0, 0, 0.45);
}

.why-corner svg {
    width: 100%;
    height: 100%;
    display: block;
}

.why-big {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(34px, 3vw, 44px);
    line-height: 1.05;
    color: var(--brand-secondary);
    margin: 0;
    white-space: normal;
    overflow-wrap: break-word;
}

.why-card:nth-child(3) .why-big {
    white-space: normal;
    line-height: 0.95;
}

.why-mid {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 26px;
    color: var(--brand-header);
    margin: 0;
}

.why-small {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 18px;
    color: var(--text-dark);
    margin: 0;
}

.why-card .why-divider {
    height: 1px;
    background: rgba(3, 54, 72, 0.10);
    width: 88%;
    margin: 18px auto 0;
}

.why-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    font-family: var(--font-heading);
    font-size: 14px;
    color: rgba(3, 54, 72, 0.75);
    padding: 0 2px;
}

.why-foot strong {
    color: #044054;
    font-weight: 800;
}

.why-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--brand-primary);
    color: var(--bg-white);
    text-decoration: none;
    min-height: 56px;
    height: auto;
    padding: 15px 34px;
    border-radius: 12px;
    font-weight: 800;
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 1.15;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 10px 24px rgba(3, 54, 72, 0.22);
    transition: filter 0.15s ease, transform 0.15s ease;
}

.why-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* The trailing glyph reads heavy at the label's size and weight. */
.why-btn > span[aria-hidden="true"] {
    font-size: 0.8em;
    font-weight: 400;
    line-height: 1;
    position: relative;
    top: 0.5px;
}

/* Tablet */
@media (max-width: 980px) {
    .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .why-card {
        min-height: 270px;
        padding: 38px 24px 30px;
    }

    .why-big {
        font-size: 42px;
    }

    .why-mid {
        font-size: 24px;
    }

    .why-small {
        font-size: 17px;
    }
}

@media (max-height: 820px) {
    .why-trust {
        padding: 100px 0 110px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .why-trust {
        padding-top: 24px !important;
        padding-bottom: 70px !important;
        background-position: center bottom;
        background-size: 820px auto;
    }

    .why-inner {
        width: min(340px, calc(100% - 28px));
    }

    .why-title {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .why-sub {
        font-size: 16px;
        margin-bottom: 26px;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .why-card {
        min-height: 0;
        padding: 32px 22px 26px;
    }

    .why-big {
        font-size: 40px;
        white-space: normal;
        line-height: 1;
    }

    .why-mid {
        font-size: 20px;
    }

    .why-small {
        font-size: 16px;
    }

    .why-card .why-divider {
        width: 92%;
        margin-top: 16px;
    }

    /* ── CTA button: red, auto-height for 2-line JS text ── */
    .why-btn {
        display: flex;
        width: 100%;
        height: auto;
        min-height: 64px;
        padding: 14px 20px;
        border-radius: 12px;
        background: #BB2C20;
        border: 2px solid #B91D0C;
        box-shadow: 0 6px 20px rgba(187, 44, 32, 0.38);
        letter-spacing: 0.5px;
        font-size: 15px;
    }
}

/* =========================
   BRAND MARQUEE (Deals top)
   - stable on mobile
   - no breaking after load
========================= */

.why-marquee {
    --marquee-speed: 18s;
    --logo-h: clamp(36px, 4.2vw, 58px);
    --gap: clamp(20px, 3vw, 44px);

    width: 100%;
    max-width: 1200px;
    margin: 0 auto 18px;
    position: relative;
}

.why-marquee__label {
    font-family: var(--font-heading);
    margin: 0 0 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: rgba(15, 23, 42, 0.75);
    font-size: 18px;
}

.why-marquee__viewport {
    overflow: hidden;
    border-radius: 16px;
    padding: 14px 0;

    /* iOS stability */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.why-marquee__fade {
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(90deg,
            rgba(234, 246, 252, 1) 0%,
            rgba(234, 246, 252, 0) 10%,
            rgba(234, 246, 252, 0) 90%,
            rgba(234, 246, 252, 1) 100%);
    z-index: 3;
}

.why-marquee__centerline {
    position: absolute;
    left: 50%;
    top: 10px;
    bottom: 10px;
    width: 1px;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.06);
    z-index: 2;
    pointer-events: none;
    display: none;
}

.why-marquee__track {
    display: flex;
    align-items: center;
    gap: var(--gap);
    width: max-content;
    will-change: transform;

    /* IMPORTANT: paused until window load */
    animation: why-marquee-move var(--marquee-speed) linear infinite;
    animation-play-state: paused;

    /* iOS GPU */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

body.is-ready .why-marquee__track {
    animation-play-state: running;
}

/* item card */
.why-marquee__item {
    flex: 0 0 auto;
    height: calc(var(--logo-h) + 24px);
    padding: 10px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;

    /* DO NOT use margin here (breaks loop) */
    transform: scale(1);
    transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease;
}

.why-marquee__item img {
    height: var(--logo-h);
    width: auto;
    max-width: 190px;
    object-fit: contain;
    display: block;
}

/* Desktop center highlight only (JS toggles .is-center) */
.why-marquee__item.is-center {
    transform: scale(1.18);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
    z-index: 5;
}

@keyframes why-marquee-move {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (hover:hover) {
    .why-marquee__viewport:hover .why-marquee__track {
        animation-play-state: paused;
    }
}

/* Mobile: keep it stable (no center scaling) */
@media (max-width: 768px) {

    .why-marquee__item,
    .why-marquee__item.is-center {
        transform: none !important;
    }

    .why-marquee__centerline {
        display: none;
    }
}

@media (max-width: 600px) {
    .why-marquee {
        --marquee-speed: 22s;
        --logo-h: clamp(32px, 6vw, 50px);
        margin: 0 auto 12px;
    }

    .why-marquee__viewport {
        padding: 12px 0;
    }

    .why-marquee__item {
        height: calc(var(--logo-h) + 20px);
        padding: 9px 14px;
        border-radius: 13px;
    }

    .why-marquee__item img {
        max-width: 160px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .why-marquee__track {
        animation: none;
        transform: none;
    }

    .why-marquee__item {
        transition: none;
    }
}

/* =========================================================
   SERVICES 
   ========================================================= */

.services {
    position: relative;
    padding: 86px 0 90px;
    background: #ffffff;
}

.services-inner {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

/* =========================
   Header
========================= */
.services-head {
    text-align: center;
    margin-bottom: 34px;
}

.services-kicker {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 6px;
    font-size: 18px;
    color: #439DBE;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.services-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 45px;
    line-height: 1.05;
    color: var(--brand-header);
    margin: 0;
}

/* checklist line under title */
.services-checks {
    margin-top: 14px;
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}

.services-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 16px;
    color: #1b1b1b;
}

.services-check-ico {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    /* Changed to Sky Blue */
    border: 2px solid var(--brand-secondary);
    color: var(--brand-secondary);
    line-height: 1;
    font-weight: 900;
    font-size: 14px;
}

/* =========================
   Grid
========================= */
.services-grid {
    margin-top: 42px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 26px;
    align-items: stretch;
}

.services-grid .svc-card--centered {
    grid-column: 1 / -1;
    max-width: calc(50% - 13px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* =========================
   Card (with hover-fill animation)
========================= */
.svc-card {
    position: relative;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #DCEAF2;
    border-radius: 14px;
    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 168px;

    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* blue fill layer */
.svc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand-primary);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.2, 1);
    z-index: 0;
}

/* subtle sheen sweep */
.svc-card::after {
    content: "";
    position: absolute;
    inset: -40% -60%;

    background: linear-gradient(120deg,
            transparent 40%,
            rgba(255, 255, 255, 0.18) 50%,
            transparent 60%);

    transform: translateX(-60%) rotate(0deg);
    transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.2, 1);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
}

/* keep content above the fill layers */
.svc-card>* {
    position: relative;
    z-index: 1;
}

.svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(112, 124, 145, 0.22);
    border-color: rgba(67, 157, 190, 0.55);
}

.svc-card:hover::before {
    transform: translateY(0%);
}

.svc-card:hover::after {
    opacity: 1;
    transform: translateX(30%) rotate(0deg);
}

/* =========================
   Card head
========================= */
.svc-card-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* Icon box */
.svc-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;

    background: var(--brand-primary);
    color: #ffffff;

    display: grid;
    place-items: center;
    flex-shrink: 0;

    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* If you paste SVG inside .svc-icon */
.svc-icon svg {
    width: 30px;
    height: 30px;
    display: block;
}

/* Text */
.svc-text {
    text-align: left;
}

.svc-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--brand-header);
    margin: 0 0 6px;
    transition: color 0.25s ease;
}

.svc-desc {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.55;
    color: #2a2a2a;
    margin: 0;
    transition: color 0.25s ease;
}

/* =========================
   CTA Button (turns white on hover)
========================= */
.svc-btn {
    margin-top: 16px;
    height: 44px;
    border-radius: 10px;

    background: var(--brand-primary);
    color: #ffffff;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 0.3px;

    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* arrow micro-motion */
.svc-arrow {
    display: inline-block;
    transform: translateX(0);
    transition: transform 0.22s ease;
}

.svc-btn:active {
    transform: translateY(1px);
}

/* Keyboard focus */
.svc-btn:focus-visible {
    outline: 3px solid rgba(67, 157, 190, 0.25);
    outline-offset: 3px;
}

.svc-card:hover .svc-title,
.svc-card:hover .svc-desc {
    color: var(--bg-white);
}

.svc-card:hover .svc-icon {
    background: #ffffff;
    color: var(--brand-header);
    transform: translateY(-1px);
}

.svc-card:hover .svc-btn {
    background: #ffffff;
    color: var(--brand-primary)
}

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

.svc-card:hover .svc-btn:hover {
    transform: translateY(-1px);
}

/* =========================
   Responsive
========================= */
@media (max-width: 1100px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .services-grid .svc-card--centered {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .services {
        padding: 62px 0 70px;
    }

    .services-inner {
        width: min(1200px, calc(100% - 28px));
    }

    .services-title {
        font-size: 38px;
    }

    .services-check {
        font-size: 15px;
    }

    .services-grid {
        margin-top: 30px;
        gap: 18px;
    }

    .svc-card {
        padding: 18px;
    }

    .svc-title {
        font-size: 20px;
    }

    .svc-desc {
        font-size: 18px;
    }

    .svc-btn {
        width: 100%;
        height: auto;
        min-height: 62px;
        padding: 13px 20px;
        font-size: 15px;
        border-radius: 12px;
        background: #BB2C20;
        border: 2px solid #B91D0C;
        box-shadow: 0 6px 20px rgba(187, 44, 32, 0.35);
        letter-spacing: 0.5px;
    }

    /* Keep red on touch — no white hover flip on mobile */
    .svc-card:hover .svc-btn {
        background: #BB2C20;
        color: #ffffff;
    }
}

/* =========================
   Respect reduced motion
========================= */
@media (prefers-reduced-motion: reduce) {

    .svc-card,
    .svc-card::before,
    .svc-card::after,
    .svc-icon,
    .svc-title,
    .svc-desc,
    .svc-btn,
    .svc-arrow {
        transition: none !important;
    }
}

/* =========================================================
   PROS
   ========================================================= */

.pros {
    padding: 96px 0;
    background: #fff;
}

.pros-inner {
    width: min(1250px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(360px, 520px) 1fr;
    gap: 64px;
    align-items: center;
}

/* LEFT IMAGE */
.pros-media {
    position: relative;
}

.pros-photo {
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.14),
        0 0 0 1px rgba(0, 0, 0, 0.06);
}

.pros-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* RIGHT CONTENT */
.pros-content {
    max-width: 720px;
}

.pros-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.05;
    color: var(--brand-header);
    margin: 0 0 26px;
}

.pros-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 44px;
}

.pros-card {
    position: relative;
    padding-left: 34px;
}

/* Pros checkmark background */
.pros-card::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    /* Use your new Pale Ice Blue image color */
    background: var(--brand-primary);
    color: var(--bg-light);
    font-weight: 900;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pros-card h3 {
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 20px;
    color: #121212;
}

.pros-card p {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.55;
    color: #1f2937;
}

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

.pros-btn {
    background: var(--brand-primary);
    color: var(--bg-white);
    border-radius: 10px;
    padding: 14px 18px;
    font-family: var(--font-heading);
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 420px;
    transition: transform .18s ease, filter .18s ease;
}

.pros-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
    .pros {
        padding: 80px 0;
    }

    .pros-inner {
        grid-template-columns: 1fr;
        gap: 34px;
        align-items: start;
    }

    .pros-content {
        max-width: 820px;
    }

    .pros-title {
        font-size: 40px;
    }
}

@media (max-width: 640px) {
    .pros {
        padding: 56px 0;
    }

    .pros-inner {
        width: min(1250px, calc(100% - 32px));
        gap: 22px;
    }

    .pros-title {
        font-size: 32px;
        text-align: center;
    }

    .pros-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pros-btn {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 62px;
        padding: 13px 20px;
        font-size: 15px;
        border-radius: 12px;
        background: #BB2C20;
        border: 2px solid #B91D0C;
        box-shadow: 0 6px 20px rgba(187, 44, 32, 0.35);
        letter-spacing: 0.5px;
    }

    .pros-card h3 {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .pros-card p {
        font-size: 14px;
        line-height: 1.5;
    }

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

/* =========================================================
   FINANCING CTA
   ========================================================= */

.financing-cta {
    position: relative;
    width: 100%;
    min-height: 520px;
    display: grid;
    align-items: center;
    overflow: hidden;
    background: #011A24;
}

/* background image layer */
.financing-cta__bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg,
            rgba(2, 26, 36, 0.88) 0%,
            rgba(2, 26, 36, 0.80) 30%,
            rgba(2, 26, 36, 0.58) 48%,
            rgba(2, 26, 36, 0.22) 62%,
            rgba(2, 26, 36, 0.05) 80%,
            rgba(2, 26, 36, 0.00) 100%),
        url("../images/roofing-crew-service-trucks.webp");
    background-size: cover;
    background-position: center right;
}

/* Desktop: zoom in slightly and anchor left so the van sits to the RIGHT of
   the headline (cover leaves no horizontal slack at this wide aspect, so we
   scale up; only applied >=1024px where the scaled image is guaranteed to cover). */
@media (min-width: 1024px) {
    .financing-cta__bg {
        background-size: 125% auto;
        background-position: left center;
    }
}

/* inner container */
.financing-cta__inner {
    position: relative;
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    padding: 90px 0;
}

/* content block */
.financing-cta__content {
    max-width: 640px;
}

.financing-cta__title {
    margin: 0 0 18px;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 54px;
    line-height: 1.03;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.65);
}

.financing-cta__text {
    margin: 0 0 28px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.84);
    max-width: 560px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* CTA button */
.financing-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 16px 26px;
    border-radius: 12px;

    background: var(--brand-secondary);
    color: var(--bg-white);
    text-decoration: none;

    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: 0.4px;
    font-size: 18px;

    transition: transform 160ms ease, filter 160ms ease;
}

.financing-cta__btn:hover {
    transform: translateY(-1px);
    filter: brightness(0.98);
}

.financing-cta__btn:active {
    transform: translateY(0px);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 992px) {
    .financing-cta {
        min-height: 460px;
    }

    .financing-cta__inner {
        width: min(1200px, calc(100% - 32px));
        padding: 72px 0;
    }

    .financing-cta__title {
        font-size: 42px;
    }
}

@media (max-width: 640px) {
    .financing-cta {
        min-height: 520px;
    }

    /* stronger overlay on mobile for readability */
    .financing-cta__bg {
        background-image:
            linear-gradient(180deg,
                rgba(2, 26, 36, 0.78) 0%,
                rgba(2, 26, 36, 0.62) 45%,
                rgba(2, 26, 36, 0.25) 100%),
            url("../images/roofing-crew-service-trucks.webp");
        background-position: center;
    }

    .financing-cta__inner {
        padding: 66px 0;
    }

    .financing-cta__content {
        max-width: 100%;
    }

    .financing-cta__title {
        font-size: 38px;
        text-align: center;
    }

    .financing-cta__text {
        font-size: 16px;
        text-align: center;
    }

    .financing-cta__btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   SERVICE GUARANTEE
   ========================================================= */

.ga-guarantee {
    position: relative;
    background: var(--brand-primary);
    /* Updates from lighter blue to Deep Navy */
    padding: 52px 0;
    overflow: visible;
}




/* Update the top/bottom bars from green to Sky Blue */
.ga-guarantee::before,
.ga-guarantee::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 7px;
    background: var(--brand-secondary);
    /* Updates to Sky Blue */
    opacity: .95;
    z-index: 1;
}

.ga-guarantee::before {
    top: 0;
}

.ga-guarantee::after {
    bottom: 0;
}

/* main layout */
.ga-guarantee__bar {
    width: min(1500px, calc(100% - 120px));
    margin: 0 auto;
    padding: 0 10px;

    display: grid;
    grid-template-columns: clamp(320px, 34vw, 520px) clamp(240px, 22vw, 320px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(18px, 3vw, 44px);

    position: relative;
    z-index: 2;
}

/* title */
.ga-guarantee__title {
    margin: 0 0 0 90px;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.03;
    color: #fff;
}

/* badge */
.ga-guarantee__badge {
    display: grid;
    place-items: center;
    overflow: visible;
    z-index: 2;
}

.ga-guarantee__badge img {
    width: 340px;
    height: auto;
    display: block;
    margin-top: -90px;
    margin-bottom: -90px;
    transform: translateX(-20px);
    shape-rendering: geometricPrecision;
    image-rendering: auto;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35));
}

.ga-guarantee__text {
    display: block;
    max-width: 280px;
    /* keeps columns consistent */
    word-break: normal;
    overflow-wrap: anywhere;
    /* prevents overflow at zoom */
}

.ga-guarantee__list {
    margin: 0;
    padding-left: clamp(0px, 2.2vw, 34px);
    list-style: none;
    margin-left: -50px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(18px, 3.2vw, 70px);
    row-gap: clamp(18px, 2.2vw, 28px);
    grid-auto-flow: start;
}

/* item style */
.ga-guarantee__item {
    display: flex;
    align-items: center;
    gap: 16px;

    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.2;
    color: #fff;
}

.ga-guarantee__ico {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 16px;
    background: #fff;
    display: grid;
    place-items: center;
}

/* svg sizing */
.ga-guarantee__ico svg {
    width: 26px;
    height: 26px;
}

.go-left,
.go-right {
    margin-left: 0 !important;
}

/* force icon blue */
/* Force icon fill to Sky Blue */
.ga-guarantee__ico svg path,
.ga-guarantee__ico svg rect,
.ga-guarantee__ico svg circle,
.ga-guarantee__ico svg line,
.ga-guarantee__ico svg polygon {
    fill: #033648 !important;
    stroke: #033648 !important;
}

/* ✅ FORCE EXACT POSITIONS (NO MORE WRONG ORDER) */
.ga-guarantee__item--emergency {
    grid-column: 1;
    grid-row: 1;
}

.ga-guarantee__item--pricing {
    grid-column: 2;
    grid-row: 1;
}

.ga-guarantee__item--experience {
    grid-column: 1;
    grid-row: 2;
}

.ga-guarantee__item--servicearea {
    grid-column: 2;
    grid-row: 2;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1200px) {
    .ga-guarantee__bar {
        width: min(1200px, calc(100% - 60px));
        grid-template-columns: 1fr 320px;
        grid-template-rows: auto auto;
        gap: 30px;
    }

    .ga-guarantee__badge img {
        transform: translateX(0);
        margin-bottom: -90px;
    }

    .ga-guarantee__list {
        grid-column: 1 / -1;
        padding-left: 0 !important;
        justify-self: center;
        transform: translateX(0);
    }
}

@media (max-width: 860px) {
    .ga-guarantee {
        padding: 46px 0;
    }

    /* order: BADGE → TITLE → LIST */
    .ga-guarantee__bar {
        width: calc(100% - 40px);
        margin: 0 auto;

        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "badge"
            "title"
            "list";
        gap: 18px;

        text-align: left;
        justify-items: stretch;
    }

    .ga-guarantee__badge {
        grid-area: badge;
        display: grid;
        place-items: center;
    }

    .ga-guarantee__badge img {
        width: 300px;
        height: auto;
        margin-top: -78px;
        margin-bottom: -6px;
        transform: none;
    }

    .ga-guarantee__left {
        grid-area: title;
    }

    .ga-guarantee__title {
        margin: 0;
        font-size: 38px;
        line-height: 1.05;
        font-weight: 900;
        padding-left: 6px;
        text-align: center;
    }

    .ga-guarantee__list {
        grid-area: list;
        margin: 0;
        padding: 0;
        list-style: none;

        display: grid;
        grid-template-columns: 1fr;
        row-gap: 22px;

        margin-left: 0;
        justify-items: stretch;
    }

    /* remove desktop nudges on mobile */
    .go-left,
    .go-right {
        margin-left: 0 !important;
    }

    .ga-guarantee__item {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 16px;
        justify-content: flex-start;
        text-align: left;

        padding-left: 6px;
        font-size: 18px;
        line-height: 1.15;
    }

    .ga-guarantee__ico {
        width: 56px;
        height: 56px;
        flex: 0 0 56px;
        border-radius: 16px;
        background: #fff;
        display: grid;
        place-items: center;
    }

    .ga-guarantee__ico svg {
        width: 26px;
        height: 26px;
    }
}

/* =========================================================
   REVIEWS
   ========================================================= */

.reviews-split {
    padding: 88px 0;
    background: #f6f8fb;
}

.reviews-split__inner {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 56px;
    align-items: center;
}

/* LEFT */
.reviews-split__left {
    display: block;
}

.reviews-split__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--brand-header);
    font-size: 50px;
    line-height: 1.05;
    letter-spacing: -0.5px;
}

/* RIGHT */
.reviews-split__right {
    min-width: 0;
}

/* Track: show 2-ish cards, allow scroll */
.reviews-split__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(320px, 1fr);
    gap: 22px;

    overflow-x: auto;
    padding: 6px 4px 12px;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar (desktop) */
.reviews-split__track::-webkit-scrollbar {
    height: 10px;
}

.reviews-split__track::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .18);
    border-radius: 999px;
}

.reviews-split__track::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .06);
    border-radius: 999px;
}

/* Review card */
.review2-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px 22px 18px;

    box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
    border: 1px solid rgba(10, 12, 14, .06);

    min-height: 210px;

    display: flex;
    flex-direction: column;

    scroll-snap-align: start;
}

/* Credential eyebrow on each trust card */
.review2-stars {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #BB2C20;

    margin-bottom: 12px;
}

.review2-text {
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-weight: 500;
    color: #1c1f23;
    font-size: 14.5px;
    line-height: 1.65;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.review2-link {
    margin-top: auto;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;

    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: #439DBE;
    text-align: left;
}

.review2-link:hover {
    text-decoration: underline;
}

.review2-meta {
    margin-top: 14px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    color: #121417;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
    .reviews-split__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: start;
    }

    .reviews-split__title {
        font-size: 44px;
    }

    .reviews-split__track {
        grid-auto-columns: minmax(300px, 1fr);
    }
}

@media (max-width: 640px) {
    .reviews-split {
        padding: 64px 0;
    }

    .reviews-split__inner {
        width: min(1200px, calc(100% - 28px));
    }

    .reviews-split__title {
        font-size: 38px;
        line-height: 1.05;
        text-align: center;
    }

    .reviews-split__track {
        grid-auto-columns: 88%;
        gap: 16px;
        padding-bottom: 10px;
    }

    .review2-card {
        padding: 18px 18px 16px;
        border-radius: 16px;
        min-height: 200px;
    }

    .review2-text {
        -webkit-line-clamp: 5;
    }
}

/* =========================
   REVIEW MODAL
========================= */

.review-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.review-modal.is-open {
    display: flex;
}

.review-modal__box {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    animation: modalFadeUp 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Close */
.review-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
    display: grid;
    place-items: center;
    transition: background 0.15s;
}

.review-modal__close:hover {
    background: #e2e8f0;
    color: #334155;
}

/* Stars — fixed header */
.review-modal__stars {
    padding: 30px 32px 20px;
    font-size: 20px;
    letter-spacing: 3px;
    color: #BB2C20;
    flex-shrink: 0;
    border-bottom: 1px solid #f1f5f9;
}

/* Review text — scrollable middle */
.review-modal__text {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.9;
    color: #475569;
    padding: 24px 32px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

.review-modal__text::-webkit-scrollbar {
    display: none;
}

/* Name row — sticky footer */
.review-modal__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
    padding: 16px 32px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.review-modal__name::before {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand-header);
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E");
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
}

@keyframes modalFadeUp {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
    .review-modal {
        padding: 16px;
    }

    .review-modal__box {
        max-width: 100%;
        border-radius: 14px;
        max-height: 78vh;
    }

    .review-modal__stars {
        padding: 24px 24px 16px;
    }

    .review-modal__text {
        font-size: 14.5px;
        line-height: 1.85;
        padding: 20px 24px;
    }

    .review-modal__name {
        padding: 14px 24px;
    }
}

/* =========================================================
   GALLERY
   ========================================================= */

.gallery {
    padding: 80px 0 90px;
    background: #ffffff;
}

.gallery-inner {
    width: min(1400px, calc(100% - 48px));
    margin: 0 auto;
}

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

.gallery-kicker {
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-size: 18px;
    color: #ffffff;
}

.gallery-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.05;
    font-size: clamp(28px, 2.5vw, 22px);
    color: var(--brand-header);
}

/* Slider shell */
.gallery-slider {
    position: relative;
    margin-top: 20px;
    display: grid;
    grid-template-columns: 46px 1fr 46px;
    align-items: center;
    gap: 14px;
}

.gallery-viewport {
    overflow: hidden;
    border-radius: 22px;
    outline: none;
    touch-action: pan-y;
}

.gallery-track {
    display: grid;
    grid-auto-flow: column;
    gap: 24px;
    transform: translate3d(0, 0, 0);
    transition: transform 420ms ease;
    will-change: transform;
    padding: 6px;
}

/* Desktop (3 cards) */
.gallery-track {
    grid-auto-columns: calc((100% - 48px) / 3);
}

/* Center when slider has only 2 cards (auto-reverts once a 3rd card is added) */
.gallery-track:has(.gallery-card:nth-child(2):last-child) {
    justify-content: center;
}

/* Card */
.gallery-card {
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.gallery-media {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #F2FAFD;
    position: relative;
}

.gallery-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.gallery-cap {
    padding: 14px 16px 16px;
}

.gallery-cap-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 16px;
    color: #011A24;
    margin: 0 0 4px;
}

.gallery-cap-sub {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    color: rgba(2, 26, 36, 0.65);
}

/* Nav buttons */
.gallery-nav {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.10);
    display: inline-grid;
    place-items: center;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.gallery-nav:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* Dots */
.gallery-dots {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 18px;
}

.gallery-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 0;
    background: rgba(2, 26, 36, 0.25);
    cursor: pointer;
}

.gallery-dot.is-active {
    background: #033648;
    width: 22px;
}

/* Tablet: 2 cards */
@media (max-width: 1024px) {
    .gallery {
        padding: 70px 0 80px;
    }

    .gallery-slider {
        grid-template-columns: 44px 1fr 44px;
    }

    .gallery-track {
        grid-auto-columns: calc((100% - 24px) / 2);
    }
}

/* Mobile: Stack 2-3 cards vertically, NO scroll */
@media (max-width: 640px) {
    .gallery {
        padding: 70px 0 50px;
    }

    .gallery-inner {
        width: min(1200px, calc(100% - 32px));
    }

    .gallery-slider {
        display: block;
    }

    .gallery-nav {
        display: none;
    }

    .gallery-dots {
        display: none;
    }

    .gallery-viewport {
        border-radius: 18px;
        overflow: visible;
    }

    .gallery-track {
        display: flex;
        flex-direction: column;
        gap: 18px;
        transform: none !important;
        transition: none !important;
    }

    .gallery-card {
        border-radius: 16px;
        width: 100%;
    }

    /* Show only first 3 cards on mobile */
    .gallery-card:nth-child(n+6) {
        display: none;
    }

    .gallery-zoom {
        left: 10px;
        top: 10px;
        width: 40px;
        height: 40px;
    }
}

/* =========================
   GALLERY ZOOM ICON
========================= */
.gallery-zoom {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 999px;

    background: transparent;
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;

    transition: transform 160ms ease;
}

.gallery-zoom:hover {
    transform: translateY(-1px);
}

.gallery-zoom span {
    font-size: 18px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}

/* =========================
   GALLERY MODAL (LIGHTBOX)
========================= */
.gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.gallery-modal.is-open {
    display: block;
}

.gallery-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.68);
}

.gallery-modal__dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1000px, calc(100% - 28px));
    max-height: calc(100% - 28px);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.gallery-modal__close {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.95);
    cursor: pointer;
}

.gallery-modal__figure {
    margin: 0;
}

.gallery-modal__img {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 210px);
    display: block;
    object-fit: contain;
    background: #011A24;
}

.gallery-modal__cap {
    padding: 14px 16px 16px;
    background: #ffffff;
}

.gallery-modal__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 18px;
    color: #011A24;
    margin-bottom: 4px;
}

.gallery-modal__sub {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    color: rgba(2, 26, 36, 0.65);
}

/* modal arrows */
.gallery-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(2, 26, 36, 0.55);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 26px;
    z-index: 5;
}

.gallery-modal__prev {
    left: 10px;
}

.gallery-modal__next {
    right: 10px;
}

@media (max-width: 640px) {
    .gallery-zoom {
        left: 10px;
        top: 10px;
        width: 40px;
        height: 40px;
    }

    .gallery-modal__img {
        max-height: calc(100vh - 190px);
    }
}

/* =========================================================
   SERVICE AREAS
   ========================================================= */

/* =========================================================
   SERVICE AREAS — Dark blue full-width design
   ========================================================= */
.service-areas {
    position: relative;
    padding: 50px 0 56px;
    background: #ffffff;
    overflow: hidden;
}

/* subtle pattern overlay */
.service-areas::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/service-area-map-pattern.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

.sa2-inner {
    position: relative;
    z-index: 1;
    width: min(1200px, 92%);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}

/* Left column: title */
.sa2-left {
    text-align: left;
    margin-bottom: 0;
    flex: 1 1 320px;
}

.sa2-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111827;
}

.sa2-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: var(--brand-primary);
    border-radius: 2px;
    margin: 20px 0 0;
}

/* Right column: the service-areas card */
.sa2-right {
    flex: 0 0 440px;
}

.sa2-row {
    display: grid;
    /* Card fills the right column. */
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

/* H1 geo modifier ("in Broward") — slightly lighter than the slug keyword */
.ci-hero__title-geo {
    color: #439DBE;
}

/* Mobile hero: uniform + slightly larger H1 across all pages, smaller subheadline.
   More specific than the per-page inline rules so it overrides them consistently. */
@media (max-width: 768px) {
    .ci-hero__title .ci-hero__title-navy {
        font-size: 44px;
        line-height: 1.05;
    }
    .ci-hero .ci-hero__sub {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
}

/* ============================================================
   Mobile hero "card" concept (uniform across all landing pages)
   Image behind H1 → white subheadline card → white 3-icon card
   ============================================================ */
@media (max-width: 768px) {
    /* Let the background photo show behind the H1, light veil for legibility */
    .ci-hero-block::before {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.60) 0%,
            rgba(255, 255, 255, 0.45) 55%,
            rgba(255, 255, 255, 0.30) 100%) !important;
    }
    .ci-hero-block .ci-hero {
        padding: 11vw 0 0 !important;
    }
    .ci-hero-block .ci-hero__container {
        padding: 0 16px !important;
    }
    /* Subheadline → white card with red accent */
    .ci-hero-block .ci-hero__sub {
        background: #ffffff !important;
        color: #033648 !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        font-weight: 600 !important;
        text-align: center !important;
        border-left: 4px solid #BB2C20 !important;
        border-radius: 12px !important;
        padding: 15px 16px !important;
        margin: 6px 0 12px !important;
        max-width: none !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12) !important;
    }

    /* Feature icons → WHITE card, 3 across, navy labels */
    .ci-hero-block .ci-features-strip {
        background: #ffffff !important;
        border-radius: 16px !important;
        margin: 0 16px 12px !important;
        padding: 18px 18px !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12) !important;
    }
    /* Stacked list: each feature is a row (icon acts as the bullet) with its description visible */
    .ci-hero-block .ci-features-strip__inner {
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 16px !important;
    }
    .ci-hero-block .ci-feature {
        flex: 0 0 auto !important;
        width: 100% !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 14px !important;
    }
    .ci-hero-block .ci-feature__icon {
        width: 46px !important;
        height: 46px !important;
        flex-shrink: 0 !important;
        background: #ffffff !important;
        border: 2px solid #BB2C20 !important;
    }
    .ci-hero-block .ci-feature__title {
        color: #033648 !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        text-align: left !important;
        margin: 0 !important;
    }
    .ci-hero-block .ci-feature__desc {
        display: block !important;
        font-size: 13.5px !important;
        line-height: 1.4 !important;
        color: #4a5568 !important;
        text-align: left !important;
        margin: 2px 0 0 !important;
    }
}

/* Card */
.sa2-card {
    border-radius: 14px;
    background: #ffffff;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sa2-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}

/* Card header */
.sa2-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    margin-bottom: 0;
    background: linear-gradient(135deg, #BB2C20 0%, #033648 100%);
    border-bottom: 3px solid rgba(0, 0, 0, 0.06);
}

.sa2-pin {
    width: 22px;
    height: 22px;
    color: #ffffff;
    flex: 0 0 auto;
    display: inline-block;
}

.sa2-pin svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sa2-card-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.3px;
}

/* Lists */
.sa2-list {
    margin: 0;
    padding: 20px 22px 24px;
    list-style: none;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, 1fr);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    grid-auto-rows: minmax(0, auto);
}

.sa2-list li {
    padding: 10px 0 10px 20px;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
    white-space: normal;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.35;
}

.sa2-list li:nth-last-child(-n+2) {
    border-bottom: none;
}

.sa2-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-primary);
    opacity: 0.7;
}

/* Remove old modifiers */
.sa2-card--enhanced {
    border: none;
}

.sa2-card--wide {
    width: 100%;
}

.sa2-list--2 { grid-template-columns: repeat(2, 1fr); }
.sa2-list--3 { grid-template-columns: repeat(3, 1fr); }

/* 3-column variant: clear the bottom border across the last row (up to 3 items).
   Scoped to >=521px since the list collapses to a single column below that. */
@media (min-width: 521px) {
    .sa2-list--3 li:nth-last-child(-n+3) { border-bottom: none; }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {
    .service-areas {
        padding: 40px 0 48px;
    }

    .sa2-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sa2-card-head {
        justify-content: center;
    }

    .sa2-card-title {
        font-size: 18px;
        text-align: center;
    }

    .sa2-inner {
        flex-direction: column;
        align-items: center;
    }

    .sa2-left {
        text-align: center;
        margin-bottom: 32px;
        flex-basis: auto;
    }

    .sa2-title::after {
        margin: 20px auto 0;
    }

    .sa2-right {
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .sa2-list {
        grid-template-columns: 1fr;
    }

    .sa2-list li:last-child {
        border-bottom: none;
    }

    .sa2-list li:nth-last-child(2) {
        border-bottom: 1px solid #f0f0f0;
    }
}

/* =========================================================
   FOOTER / FINAL CTA (append from footer.css)
   ========================================================= */

.final-cta {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* IMPORTANT:
   Remove the 100vw breakout (it causes horizontal scrollbar).
   The section is already full width by default. */
.final-cta-bg-wrap {
    width: 100%;
    margin: 0;
}

/* BLUE BACKGROUND CARD */
.final-cta-bg-card {
    position: relative;
    width: 100%;

    /* TOP corners rounded, BOTTOM corners square */
    border-radius: 40px 50px 0 0;

    overflow: hidden;
    background-image:
        radial-gradient(120% 130% at 88% 8%, rgba(187, 44, 32, 0.28) 0%, rgba(187, 44, 32, 0) 42%),
        linear-gradient(135deg, rgba(3, 54, 72, 0.95) 0%, rgba(67, 157, 190, 0.88) 52%, rgba(3, 54, 72, 0.96) 100%),
        url("../images/architectural-shingle-roof-texture.webp");
    background-size: cover;
    background-position: center;

    /* No extra space outside blue */
    padding: 64px 0 64px;
}

/* If you use overlays/pseudo elements, match the SAME radius */
.final-cta-bg-card::before,
.final-cta-bg-card::after {
    border-radius: 52px 52px 0 0;
}

.final-cta-bg,
.final-cta-overlay {
    border-radius: 52px 52px 0 0;
}

/* ==========================================================
   CENTERED CONTENT
========================================================== */

.final-cta-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* MAIN GRID */
.final-cta-content {
    display: grid;
    grid-template-columns: 1.05fr 1.35fr;
    gap: 56px;
    align-items: center;
}

/* ==========================================================
   LEFT SIDE
========================================================== */

.final-left {
    color: #fff;
}

/* Sized for the SCI Roofing wordmark (4.35:1) rather than the template's old ~2:1 mark. */
.final-logo-box {
    width: 210px;
    height: 66px;
    background: #fff;
    border-radius: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
    margin-bottom: 22px;
}

.final-logo-box img {
    width: 186px;
    height: auto;
}

.final-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 44px;
    line-height: 1.05;
    margin: 0 0 12px;
}

.final-desc {
    font-family: var(--font-heading);
    max-width: 520px;
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 24px;
}

.final-call {
    display: inline-block;
    background: var(--brand-secondary);
    /* Ensures it uses Sky Blue */
    border-radius: 12px;
    padding: 16px 22px;
    text-decoration: none;
    color: #ffffff;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22);
}

.final-call-top {
    font-family: var(--font-heading);
    display: block;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    color: var(--brand-header);
}

.final-call-main {
    font-family: var(--font-heading);
    display: block;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    color: var(--bg-white);
}

/* ==========================================================
   RIGHT SIDE
========================================================== */

.final-right {
    text-align: center;
    color: #fff;
}

/* Offer heading */
.final-offer {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.final-offer-pill {
    background: linear-gradient(90deg, #BB2C20, #B91D0C);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 28px;
    font-weight: 900;
    font-family: var(--font-heading);
}

.final-offer-text {
    font-size: 34px;
    font-weight: 900;
    font-family: var(--font-heading);
}

.final-offer-sub {
    font-size: 20px;
    letter-spacing: 6px;
    margin-bottom: 16px;
    font-weight: 800;
    font-family: var(--font-heading);
}

/* FORM */
.final-form {
    max-width: 760px;
    margin: 0 auto;
}

.final-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.final-field label {
    font-family: var(--font-heading);
    font-size: 16px;
    letter-spacing: 1.6px;
    margin-bottom: 6px;
    display: block;
    text-align: left;
}

.final-field input,
.final-field select {
    width: 100%;
    height: 44px;
    border-radius: 7px;
    border: none;
    padding: 0 14px;
    font-size: 16px;
    font-family: var(--font-heading);
    box-sizing: border-box;
}

.final-submit {
    font-family: var(--font-heading);
    margin-top: 16px;
    width: 100%;
    height: 54px;
    border-radius: 12px;
    border: none;
    background: var(--brand-secondary);
    /* Ensures it uses Sky Blue */
    color: var(--bg-white);
    font-weight: 900;
    font-size: 20px;
    cursor: pointer;
}

/* NOTE */
.final-note {
    font-family: var(--font-heading);
    margin-top: 10px;
    font-size: 12px;
    opacity: 0.75;
    color: #ffffff;
}

/* ==========================================================
   BOTTOM FOOTER TEXT (INSIDE BLUE)
========================================================== */

.final-bottom {
    font-family: var(--font-heading);
    margin-top: 48px;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
}

.credits {
    font-family: var(--font-heading);
    margin-top: 8px;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
}

.fw-semibold {
    color: rgb(229, 229, 229);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
}

/* ==========================================================
   BACK TO TOP BUTTON
========================================================== */

.final-top-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    border: none;
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 992px) {
    .final-cta {
        padding: 0;
        background: #fff;
    }

    .final-cta-bg-wrap {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .final-cta-bg-card {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 32px 0 28px;
        /* Subtle top curve — not a pill shape */
        border-radius: 20px 20px 0 0;
        background-position: center top;
    }

    .final-cta-bg-card::before,
    .final-cta-bg-card::after,
    .final-cta-bg,
    .final-cta-overlay {
        border-radius: 0;
    }

    .final-cta-container {
        max-width: 100%;
        padding: 0 16px;
        overflow-x: clip;
    }

    .final-cta-content {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

    .final-cta-content>* {
        min-width: 0;
    }

    .final-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Logo — smaller on mobile, no excess height */
    .final-logo-box {
        width: 176px;
        height: 56px;
        margin: 0 auto 14px;
        border-radius: 12px;
    }

    .final-logo-box img {
        width: 156px;
        height: auto;
    }

    .final-title {
        font-family: var(--font-heading);
        font-size: 26px;
        line-height: 1.15;
        margin: 0 0 10px;
    }

    .final-desc {
        max-width: 480px;
        font-weight: 500;
        margin: 0 auto 16px;
        font-size: 15px;
        line-height: 1.6;
        color: rgba(255, 255, 255, .86);
    }

    /* Call button — full width, strong red */
    .final-call {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
        padding: 14px 16px;
        border-radius: 12px;
        border: 2px solid #B91D0C;
        box-shadow: 0 6px 20px rgba(187, 44, 32, 0.35);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .final-call-top {
        font-size: 13px;
        letter-spacing: 1.5px;
        color: rgba(255, 255, 255, 0.80);
        margin-bottom: 2px;
        white-space: normal;
    }

    .final-call-main {
        font-size: 24px;
        font-weight: 900;
        white-space: normal;
        color: #fff;
    }

    .final-right {
        width: 100%;
    }

    /* Form heading — tight, readable */
    .final-offer {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0 0 16px;
        align-items: center;
        justify-content: center;
    }

    .final-offer-pill {
        font-size: 20px;
        padding: 8px 16px;
        border-radius: 8px;
    }

    .final-offer-text {
        font-size: 22px;
        line-height: 1.15;
        font-weight: 900;
    }

    .final-offer-sub {
        font-size: 13px;
        letter-spacing: 4px;
        margin-bottom: 10px;
    }

    .final-form {
        width: 100%;
    }

    .final-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 0;
    }

    .final-field label {
        display: none;
    }

    /* Inputs — clean, consistent height */
    .final-field input,
    .final-field select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 52px;
        border-radius: 10px;
        padding: 0 16px;
        font-size: 15px;
        box-sizing: border-box;
    }

    /* Submit button — red, auto-height, consistent with all CTAs */
    .final-submit {
        width: 100%;
        height: auto;
        min-height: 62px;
        padding: 14px 20px;
        margin-top: 14px;
        border-radius: 12px;
        border: 2px solid #B91D0C;
        background: var(--brand-secondary);
        color: #fff;
        font-size: 19px;
        font-weight: 900;
        letter-spacing: 0.8px;
        line-height: 1.3;
        box-shadow: 0 6px 20px rgba(187, 44, 32, 0.35);
        cursor: pointer;
        text-transform: uppercase;
    }

    .final-note {
        font-size: 12px;
        line-height: 1.6;
        margin-top: 10px;
        color: rgba(255, 255, 255, 0.70);
    }

    /* Footer bottom text */
    .final-bottom {
        margin-top: 20px;
        padding-bottom: 4px;
        font-size: 15px;
        line-height: 1.8;
        text-align: center;
    }

    .final-field input::placeholder {
        opacity: 0.85;
    }
}

/* Placeholders OFF on desktop */
@media (min-width: 430px) {
    .final-submit {
        width: 100%;
        height: auto;
        min-height: 62px;
        padding: 14px 20px;
        margin-top: 14px;
        border-radius: 12px;
        border: 2px solid #B91D0C;
        background: var(--brand-secondary);
        color: #fff;
        font-size: 20px;
        font-weight: 900;
        letter-spacing: 0.8px;
        line-height: 1.3;
        box-shadow: 0 6px 20px rgba(187, 44, 32, 0.35);
        cursor: pointer;
        text-transform: uppercase;
    }
}


/* Placeholders OFF on desktop */
@media (min-width: 993px) {
    .final-field input::placeholder {
        opacity: 0;
    }
}

/* ===== reCAPTCHA (desktop) ===== */
.final-recaptcha {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin: 0 0 0 35px;
}

.final-recaptcha .recaptcha-scale {
    display: inline-block;
    transform: scale(0.88);
    transform-origin: left center;
    width: calc(304px * 0.88);
    height: calc(78px * 0.88);
}

/* ===== mobile ===== */
@media (max-width: 992px) {
    .final-recaptcha {
        grid-column: 1 / -1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 12px 0 6px;
    }
}

/* =========================================================
   UI MODAL + reCAPTCHA
   ========================================================= */

.ui-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.ui-modal.is-open {
    display: block;
}

.ui-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
}

.ui-modal__card {
    position: relative;
    width: min(520px, calc(100% - 32px));
    margin: 0 auto;
    top: 18vh;

    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);

    color: #fff;
    overflow: hidden;
    transform: translateY(10px);
    opacity: 0;
    animation: uiModalIn .18s ease-out forwards;
}

@keyframes uiModalIn {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.ui-modal__header {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.ui-modal__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 24px;
    font-family: var(--font-heading);
    background: rgba(255, 74, 74, .18);
    border: 1px solid rgba(255, 74, 74, .35);
}

.ui-modal__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 20px;
}

.ui-modal__subtitle {
    font-family: var(--font-heading);
    font-size: 18px;
    opacity: .85;
}

.ui-modal__body {
    padding: 14px 18px 18px;
    font-family: var(--font-heading);
    font-size: 16px;
    line-height: 1.4;
}

.ui-modal__footer {
    padding: 14px 18px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ui-modal__btn {
    border: 0;
    border-radius: 12px;
    padding: 10px 16px;
    font-family: var(--font-heading);
    font-weight: 800;
    cursor: pointer;
    background: #439DBE;
    color: #fff;
    box-shadow: 0 12px 22px rgba(67, 157, 190, .25);
}

.ui-modal__btn:hover {
    filter: brightness(1.05);
}

@media (max-width: 480px) {
    .ui-modal__card {
        top: 14vh;
    }
}



.cta-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s, visibility 0s .25s
}

.cta-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s, visibility 0s 0s
}

.cta-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    cursor: pointer
}

.cta-modal__box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 36px 40px;
    width: min(640px, 95vw);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    transform: translateY(20px);
    transition: transform .25s
}

.cta-modal.is-open .cta-modal__box {
    transform: none
}

.cta-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: #eee;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.cta-modal__badge {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #439DBE;
    border: 1.5px solid #439DBE;
    border-radius: 20px;
    display: inline-block;
    padding: 4px 14px;
    margin: 0 auto 12px;
    display: block;
    width: fit-content;
    margin-inline: auto
}

.cta-modal__title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: #033648;
    margin: 0 0 6px
}

.cta-modal__sub {
    text-align: center;
    color: #555;
    font-size: .95rem;
    margin: 0 0 24px
}

/* One field per line — Name, then Phone, then Email. Was 1fr 1fr, which put
   Name and Phone side by side and left the email input at half width,
   because --full never actually spanned both columns. */
.cta-modal__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px
}

.cta-modal__field {
    display: flex;
    flex-direction: column;
    gap: 5px
}

/* Kept for the markup that still carries the class. Spacing now comes from
   the row alone, so the gap above the submit button matches the gaps between
   the fields instead of doubling to 32px. */
.cta-modal__field--full {
    grid-column: 1 / -1
}

.cta-modal__field label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    color: #333
}

.cta-modal__field input,
.cta-modal__field select {
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: .95rem;
    outline: none;
    transition: border-color .2s
}

.cta-modal__field input:focus,
.cta-modal__field select:focus {
    border-color: #439DBE
}

.cta-modal__recaptcha {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}

.cta-modal__submit {
    width: 100%;
    background: linear-gradient(135deg, #439DBE, #439DBE);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .08em;
    padding: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity .2s
}

.cta-modal__submit:hover {
    opacity: .9
}

.cta-modal__trust {
    text-align: center;
    font-size: .8rem;
    color: #666;
    margin: 10px 0 16px
}

.cta-modal__or {
    text-align: center;
    font-size: .8rem;
    letter-spacing: .08em;
    color: #999;
    margin: 0 0 10px
}

.cta-modal__call {
    display: block;
    text-align: center;
    border: 2px solid #033648;
    border-radius: 8px;
    padding: 14px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #033648;
    text-decoration: none;
    transition: background .2s
}

.cta-modal__call:hover {
    background: #EAF6FC
}

@media(max-width:560px) {
    /* .cta-modal__row is single-column at every width now, so the override
       that used to live here is redundant. */
    .cta-modal__box {
        padding: 24px 20px
    }
}

/* Service Content Section */
.svc-content {
    padding: 60px 20px;
    background: #f8f9fa;
}

.svc-content__inner {
    max-width: 900px;
    margin: 0 auto;
}

.svc-content__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: #022733;
    margin-bottom: 24px;
}

.svc-content__body {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: #333;
}

.svc-content__body p {
    margin-bottom: 16px;
}

.svc-content__body h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #022733;
    margin: 28px 0 12px;
}

.svc-content__body a {
    color: #033648;
    font-weight: 600;
    text-decoration: underline;
}

.svc-content__list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.svc-content__list li {
    position: relative;
    padding: 8px 0 8px 24px;
    border-bottom: 1px solid #e9ecef;
}

.svc-content__list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #033648;
    font-weight: 700;
}

/* Centered CTA button (svc-content + FAQ) */
.svc-content__cta,
.faq-section__cta {
    text-align: center;
    margin-top: 36px;
}

.svc-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    background: #BB2C20;
    color: #022733;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: 999px;
    border: 2px solid #B91D0C;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.svc-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .svc-cta-btn {
        width: 100%;
        max-width: 360px;
        padding: 15px 24px;
        font-size: 1.4rem;
    }
}

/* FAQ Section */
.faq-section {
    padding: 60px 20px;
    background: #fff;
}

.faq-section__inner {
    max-width: 900px;
    margin: 0 auto;
}

.faq-section__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: #022733;
    margin-bottom: 32px;
    text-align: center;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    border-bottom: 1px solid #dee2e6;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #022733;
    text-align: left;
    gap: 16px;
}

.faq-question:hover {
    color: #033648;
}

.faq-icon {
    font-size: 1.5rem;
    font-weight: 300;
    color: #033648;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.faq-item.is-open .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 0 20px;
}

.faq-item.is-open .faq-answer {
    display: block;
}

.faq-answer p {
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #000000;
    margin: 0;
}

/* NAP Footer */
.final-nap {
    text-align: center;
    padding: 12px 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Roboto', sans-serif;
}

.final-nap a {
    color: #fff;
    text-decoration: underline;
}

.final-nap strong {
    color: #fff;
}


/* =====================================================
   INFO SERVICES SECTION (service page content block)
   ===================================================== */
.info-services-section {
    background: #f4f6fa;
    padding: 64px 20px;
}

.info-services-inner {
    max-width: 900px;
    margin: 0 auto;
}

.info-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: #022733;
    margin: 0 0 24px;
    line-height: 1.25;
}

.info-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    line-height: 1.75;
    color: #333;
    margin: 0 0 18px;
}

.info-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #022733;
    margin: 32px 0 16px;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.info-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #dee2e6;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
}

.info-list li:last-child {
    border-bottom: none;
}

.info-check {
    flex-shrink: 0;
    color: #033648;
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 1px;
}

.info-footer {
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
    margin: 0 0 24px;
}

.info-footer a {
    color: #033648;
    font-weight: 600;
    text-decoration: none;
}

.info-footer a:hover {
    text-decoration: underline;
}

/* =====================================================
   FAQ INNER / TITLE (service pages use these classes)
   ===================================================== */
.faq-inner {
    max-width: 900px;
    margin: 0 auto;
}

.faq-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: #022733;
    margin-bottom: 32px;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-answer-content {
    padding: 0;
}

/* =====================================================
   CTA PILL BUTTON (brand — matches site buttons)
   ===================================================== */
.btn-yellow-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 48px;
    background: var(--brand-primary);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 10px;
    border: none;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
    transition: transform 0.18s ease, filter 0.18s ease;
}

.btn-yellow-pill:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

@media (max-width: 768px) {
    .btn-yellow-pill {
        width: 100%;
        max-width: 360px;
        padding: 15px 24px;
        font-size: 1rem;
    }
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */
.text-center {
    text-align: center;
}

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

/* =========================
   SHINE / GLEAM SWEEP ON ALL CTA BUTTONS
========================= */
.btn-solid,
.hf-submit-btn,
.why-btn,
.svc-btn,
.pros-btn,
.financing-cta__btn,
.final-submit,
.final-call,
.cta-modal__submit,
.cta-modal__call {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.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: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: translateX(-160%) skewX(-22deg);
    pointer-events: none;
    z-index: 2;
    animation: btn-shine 4.5s ease-in-out infinite;
}

/* Brighten the sweep on hover */
.btn-solid:hover::after,
.hf-submit-btn:hover::after,
.why-btn:hover::after,
.svc-btn:hover::after,
.pros-btn:hover::after,
.financing-cta__btn:hover::after,
.final-submit:hover::after,
.final-call:hover::after,
.cta-modal__submit:hover::after,
.cta-modal__call:hover::after {
    animation-duration: 1.6s;
}

@keyframes btn-shine {
    0% { transform: translateX(-160%) skewX(-22deg); }
    20% { transform: translateX(320%) skewX(-22deg); }
    100% { transform: translateX(320%) skewX(-22deg); }
}

@media (prefers-reduced-motion: reduce) {
    .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 {
        animation: none;
        display: none;
    }
}

/* ============================================================
   Moved from inline <style> in templates/index.html
   (kept at end of file to preserve original cascade order)
   ============================================================ */
    /* SCI Roofing: UVP eyebrow + section CTA helpers */
    .pros-eyebrow {
      font-family: "Poppins", system-ui, sans-serif;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #8E2118;
      font-size: 13px;
      margin: 0 0 10px;
    }
    .gallery-cta { text-align: center; margin-top: 28px; }

    /* =============================================
       LONG-WIDE HERO BANNER
       ============================================= */
    /* NEW: Unified hero block (hero + features) sharing one background */
    .ci-hero-block {
      position: relative;
      width: 100%;
      min-height: 520px;
      margin-bottom: 56px;
      background: url("/assets/images/hero/aerial-tile-roofs-south-florida.webp") center 35% / cover no-repeat;
      overflow: hidden;
      border-bottom: 1px solid #DCEAF2;
    }

    /* Overlay: left-to-right white wash + bottom-left fade */
    .ci-hero-block::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, transparent 0%, transparent 60%, rgba(255,255,255,0.85) 75%, #ffffff 90%),
        linear-gradient(90deg, #ffffff 0%, #ffffff 48%, rgba(255,255,255,0.85) 66%, rgba(255,255,255,0.30) 82%, transparent 94%);
      pointer-events: none;
      z-index: 1;
    }

    .ci-hero {
      position: relative;
      z-index: 2;
      width: 100%;
      background: transparent;
      padding: 64px 0 36px;
    }

    .ci-hero__container {
      max-width: 1720px;
      margin: 0 auto;
      padding: 0 16px;
      position: relative;
      z-index: 2;
    }

    .ci-hero__top {
      min-height: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      max-width: 80%;
    }

    .ci-hero__title {
      font-family: "Poppins", system-ui, sans-serif;
      font-weight: 900;
      font-size: clamp(28px, 3.9vw, 52px);
      line-height: 1.04;
      letter-spacing: -1px;
      margin: 0;
      text-transform: uppercase;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    }

    .ci-hero__title-navy {
      display: block;
      color: #033648;
    }

    .ci-hero__title-red {
      display: block;
      color: #BB2C20;
      margin-top: 4px;
    }

    .ci-hero__redline {
      width: 110px;
      height: 6px;
      background: #BB2C20;
      margin: 18px 0 16px;
      border-radius: 3px;
    }

    .ci-hero__sub {
      font-family: "Poppins", system-ui, sans-serif;
      font-size: clamp(18px, 1.8vw, 26px);
      color: #033648;
      font-weight: 500;
      margin: 0;
      letter-spacing: -0.2px;
    }

    /* Hero sub-headline forced break (before "We") applies on mobile only;
       suppressed on desktop so the line flows naturally. */
    @media (min-width: 769px) {
      .ci-hero__sub .sub-br { display: none; }
    }

    /* Pros section image collage: 1 wide on top, 2 squares below */
    .pros-collage {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .pros-collage figure {
      margin: 0;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 18px 44px rgba(3, 54, 72, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.05);
    }
    .pros-collage img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .pros-collage__wide { aspect-ratio: 16 / 10; }
    .pros-collage__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .pros-collage__sq { aspect-ratio: 1 / 1; }

    /* Locked / uneditable form field (the fixed Service = "Roofing") */
    input[readonly] {
      background: #EAF6FC !important;
      color: #033648 !important;
      cursor: default;
    }

    .ci-hero__stages {
      margin: 26px -48px 0;
      display: flex;
      align-items: center;
    }

    .ci-stage {
      position: relative;
      z-index: 1;
      flex: 1;
      min-width: 0;
      border-radius: 14px;
      overflow: hidden;
      aspect-ratio: 5 / 2;
      background: #EAF6FC;
      box-shadow: 0 14px 34px rgba(3, 54, 72, 0.18);
      transition: transform .25s ease, box-shadow .25s ease;
      border: 1px solid #ffffff;
    }

    .ci-stage:hover {
      transform: translateY(-4px);
      box-shadow: 0 22px 46px rgba(3, 54, 72, 0.24);
    }

    .ci-stage__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .ci-stage__label {
      position: absolute;
      top: 0;
      left: 0;
      padding: 8px 18px;
      border-radius: 0 0 6px 0;
      font-family: "Poppins", system-ui, sans-serif;
      font-weight: 800;
      font-size: 14px;
      letter-spacing: 1.2px;
      color: #fff;
      text-transform: uppercase;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    }

    .ci-stage__label--red { background: #BB2C20; }
    .ci-stage__label--navy { background: #033648; }

    .ci-stage__arrow {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      background: #ffffff;
      display: grid;
      place-items: center;
      box-shadow: 0 6px 18px rgba(3, 54, 72, 0.18);
      color: #033648;
      font-size: 20px;
      font-weight: 800;
      flex-shrink: 0;
      position: relative;
      z-index: 100;
      margin: 0 -50px;
    }

    .ci-stage__arrow svg {
      width: 42px;
      height: 42px;
      stroke: #033648;
      stroke-width: 2.5;
      fill: none;
    }

    /* Features strip — now visually inside the unified hero block */
    .ci-features-strip {
      position: relative;
      z-index: 2;
      background: transparent;
      padding: 4px 0 26px;
      margin-bottom: 0;
    }

    .ci-features-strip__inner {
      max-width: 1720px;
      margin: 0 auto;
      padding: 0 16px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 300px));
      gap: 24px;
      justify-content: start;
    }

    .ci-feature {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    .ci-feature__icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 2px solid #BB2C20;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      background: #fff;
    }

    .ci-feature__icon svg {
      width: 32px;
      height: 32px;
      stroke: #033648;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ci-feature__body {
      min-width: 0;
    }

    .ci-feature__title {
      font-family: "Poppins", system-ui, sans-serif;
      font-weight: 800;
      font-size: 15px;
      color: #033648;
      margin: 2px 0 6px;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      line-height: 1.15;
    }

    .ci-feature__desc {
      font-family: "Poppins", system-ui, sans-serif;
      font-size: 14px;
      color: #4a5568;
      line-height: 1.45;
      margin: 0;
    }

    @media (max-width: 1100px) {
      .ci-hero-block {
        background: url("/assets/images/hero/aerial-tile-roofs-south-florida.webp") center / cover no-repeat;
      }
      .ci-hero-block::before {
        background:
          linear-gradient(180deg, #ffffff 0%, #f4f6fa 55%, rgba(255, 255, 255, 0.85) 100%);
      }
      .ci-hero__top {
        max-width: 100%;
        min-height: auto;
        padding-bottom: 24px;
        text-align: center;
      }
      .ci-hero__container {
        padding: 0 28px;
      }
      .ci-features-strip__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
        padding: 0 28px;
      }
    }

    @media (max-width: 768px) {
      /* === GLOBAL OVERFLOW GUARD === */
      html, body { overflow-x: hidden !important; }

      /* === MOBILE HERO === */
      .ci-hero-block {
        background-position: 30% center !important;
        background-size: cover !important;
        background-color: #ffffff !important;
        min-height: auto !important;
        margin-bottom: 24px;
        overflow-x: hidden !important;
        max-width: 100vw !important;
        box-sizing: border-box;
      }

      /* Navy scrim over the hero photo: strong, fixed-height band keeps the
         whole headline (white + orange) legible regardless of block height,
         then fades to white before the subhead/feature cards. */
      .ci-hero-block::before {
        background: linear-gradient(180deg,
          rgba(3, 54, 72,0.82) 0%,
          rgba(3, 54, 72,0.80) 230px,
          rgba(3, 54, 72,0.42) 285px,
          rgba(255,255,255,0.60) 320px,
          #ffffff 370px) !important;
      }

      .ci-hero {
        padding: 60px 0 10px !important;
        max-width: 100% !important;
        box-sizing: border-box;
      }

      .ci-hero__container {
        padding: 0 20px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      .ci-hero__top {
        max-width: 100% !important;
        text-align: center;
      }

      .ci-hero__title {
        font-size: clamp(24px, 7vw, 36px) !important;
        letter-spacing: -0.5px !important;
      }

      /* Navy headline line flips to white over the navy scrim (mobile) */
      .ci-hero__title-navy {
        color: #ffffff !important;
      }

      .ci-hero__redline {
        width: 70px !important;
        height: 5px !important;
        margin: 14px auto 12px !important;
      }

      .ci-hero__sub {
        font-size: 16px !important;
        max-width: 100% !important;
        line-height: 1.4 !important;
      }

      /* === STAGES (override desktop -48px margins, force full-width column) === */
      .ci-hero__stages {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 20px 0 0 !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
      }
      .ci-stage {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        aspect-ratio: auto !important;
        box-sizing: border-box !important;
        align-self: stretch !important;
        overflow: hidden !important;
        margin: 0 !important;
      }
      .ci-stage__label {
        font-size: 16px !important;
        padding: 10px 14px !important;
        letter-spacing: 1px !important;
      }
      .ci-stage__img {
        aspect-ratio: 16 / 9 !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        background-color: #EAF6FC;
      }
      .ci-stage__arrow {
        width: 38px !important;
        height: 38px !important;
        border-width: 3px !important;
        margin: -4px auto !important;
        transform: rotate(90deg) !important;
        align-self: center !important;
      }
      .ci-stage__arrow svg {
        width: 18px !important;
        height: 18px !important;
      }

      /* === FEATURES === */
      .ci-features-strip {
        padding: 18px 0 28px !important;
        overflow-x: hidden !important;
        max-width: 100vw !important;
      }
      .ci-features-strip__inner {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 0 20px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }
      .ci-feature {
        width: 100% !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 14px !important;
        box-sizing: border-box !important;
      }
      .ci-feature + .ci-feature::before { display: none !important; }
      .ci-feature__icon {
        width: 52px !important;
        height: 52px !important;
        flex-shrink: 0;
      }
      .ci-feature__icon svg {
        width: 26px !important;
        height: 26px !important;
      }

    }
  
    /* ===== DESKTOP HEADER: logo flush left, CTA flush right ===== */
    @media (min-width: 993px) {
      .site-header .header-logo {
        margin-left: 0;
      }
      /* Bigger logo on desktop; stays within the header's min-height: 90px so the header height is unchanged. */
      .site-header .header-logo img {
        height: 90px;
        /* Logo bg is opaque white → a drop-shadow would frame it as a box on the white header. */
        filter: none;
      }
      .site-header .header-cta {
        justify-content: flex-end;
      }
      .site-header .call-wrap {
        width: auto;
        align-items: flex-end;
      }
      .site-header .call-sub {
        text-align: right;
        max-width: none;
      }
      .site-header .btn-solid {
        width: auto;
        max-width: none;
      }
    }
  
    /* === MOBILE CAROUSEL (overrides earlier vertical stack) === */
    @media (max-width: 768px) {
      .ci-hero__stages {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 10px !important;
        margin: 20px -20px 0 !important;
        padding: 4px 20px 16px !important;
        align-items: stretch !important;
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        scroll-padding-left: 20px !important;
      }
      .ci-hero__stages::-webkit-scrollbar { display: none !important; }

      .ci-stage {
        flex: 0 0 86% !important;
        width: 86% !important;
        max-width: 86% !important;
        min-width: 0 !important;
        aspect-ratio: auto !important;
        box-sizing: border-box !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        overflow: hidden !important;
        margin: 0 !important;
        border-radius: 14px !important;
      }

      .ci-stage__img {
        aspect-ratio: 4 / 3 !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        object-fit: cover !important;
        background-color: #EAF6FC;
      }

      .ci-stage__label {
        font-size: 13px !important;
        padding: 8px 12px !important;
        letter-spacing: 1px !important;
      }

      /* Arrows don't belong in a horizontal carousel */
      .ci-stage__arrow {
        display: none !important;
      }
    }
  
  
    /* === MOBILE TEXT SIZING (hero text preserved) === */
    @media (max-width: 768px) {
      .ci-feature__title {
        font-size: 12.5px !important;
        letter-spacing: 0.6px !important;
      }
      .ci-feature__desc {
        font-size: 12px !important;
        line-height: 1.4 !important;
      }
      .ci-stage__label {
        font-size: 11px !important;
        letter-spacing: 0.8px !important;
        padding: 7px 10px !important;
      }
    }
  
  
    /* === MOBILE CAROUSEL v2: one slide visible + dot indicators === */
    @media (max-width: 768px) {
      .ci-hero__stages {
        margin: 18px 0 0 !important;
        padding: 0 !important;
        scroll-padding-left: 0 !important;
        gap: 0 !important;
      }
      .ci-stage {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        scroll-snap-align: start !important;
        border-radius: 12px !important;
      }
      .ci-stage__img {
        aspect-ratio: 16 / 10 !important;
      }

      /* Dot indicator */
      .ci-stage-dots {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 12px 0 6px;
        padding: 0;
      }
      .ci-stage-dots__dot {
        appearance: none;
        -webkit-appearance: none;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(3, 54, 72, 0.22);
        border: 0;
        padding: 0;
        cursor: pointer;
        transition: width 0.35s ease, background 0.35s ease, border-radius 0.35s ease;
      }
      .ci-stage-dots__dot.is-active {
        background: #BB2C20;
        width: 22px;
        border-radius: 4px;
      }
    }

    /* Hide dots on desktop (they're injected by JS regardless of viewport) */
    .ci-stage-dots { display: none; }

    /* Hide the Before/During/After hero carousel entirely on mobile */
    @media (max-width: 768px) {
      .ci-hero__stages,
      .ci-stage-dots {
        display: none !important;
      }
    }

  
    /* === MOBILE HERO BG: roof/house focus === */
    @media (max-width: 768px) {
      .ci-hero-block {
        background-image: url("/assets/images/hero/tile-roof-home-mobile.webp") !important;
        background-repeat: no-repeat !important;
        background-position: 30% center !important;
        background-size: cover !important;
      }
    }


/* ============================================
   FAQ SECTION (accessible <details>, no JS)
   ============================================ */
.faq {
  padding: 64px 0;
  background: #f6f8fb;
}
.faq-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}
.faq-head {
  text-align: center;
  margin-bottom: 30px;
}
.faq-kicker {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 15px;
  color: #439DBE;
  margin: 0 0 10px;
}
.faq-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  color: var(--brand-header);
  margin: 0;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: #fff;
  border: 1px solid #DCEAF2;
  border-radius: 12px;
  padding: 0 22px;
  box-shadow: 0 1px 2px rgba(3, 54, 72, 0.04);
}
.faq-item[open] {
  border-color: var(--brand-accent);
  box-shadow: 0 8px 24px rgba(3, 54, 72, 0.08);
}
.faq-q {
  list-style: none;
  cursor: pointer;
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--brand-header);
  padding: 18px 40px 18px 0;
  position: relative;
}
.faq-q::-webkit-details-marker {
  display: none;
}
.faq-q::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 15px;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--brand-accent);
}
.faq-item[open] .faq-q::after {
  content: "\2212";
}
.faq-a {
  padding: 0 0 20px;
  margin-top: -2px;
}
.faq-a p {
  margin: 0;
  font-family: var(--font-body);
  color: #43536a;
  font-size: 15.5px;
  line-height: 1.65;
}
@media (max-width: 600px) {
  .faq {
    padding: 44px 0;
  }
  .faq-q {
    font-size: 16px;
    padding-right: 34px;
  }
}

/* =========================================================
   LANDING-PAGE VARIANTS (/roof-leak, /roof-repair)
   Additive only — these classes are absent from /roofing,
   so the main page renders exactly as before.
   ========================================================= */

/* Hero eyebrow above the H1 ("Commercial & Residential") */
.ci-hero__eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #BB2C20;
}

/* Four trust strips instead of three. Kept to roughly the same total width as
   the 3-up strip so every column stays inside the hero's white wash and none
   of the text lands on the photo. */
.ci-features-strip__inner--4 {
    grid-template-columns: repeat(4, minmax(0, 232px));
    gap: 18px;
}

/* Numbered UVP points */
.pros-num {
    color: #BB2C20;
    font-weight: 900;
    margin-right: 2px;
}

/* Star glyphs on real testimonials (the main page reuses this slot as a
   credential eyebrow, so the star styling is opt-in via the modifier). */
.review2-stars--glyph {
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: none;
    font-weight: 400;
}

/* CTA under the reviews headline. Must NOT set `display` — .why-btn relies on
   inline-flex for its vertical centring. */
.reviews-split__cta {
    margin-top: 22px;
}

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

@media (max-width: 768px) {
    /* Mobile drops a navy scrim behind the hero copy, so the red eyebrow goes
       white to match the headline instead of disappearing into it. */
    .ci-hero__eyebrow {
        font-size: 12px;
        letter-spacing: 1.6px;
        color: #ffffff;
    }

    .reviews-split__cta {
        margin-bottom: 8px;
    }
}

/* The campaign LPs carry an extra hero eyebrow, a 4-up trust strip and a taller
   lead-capture card than /roofing. The form is absolutely positioned against
   the bottom of the hero, so the hero block needs more height for the trust
   strip to clear it. */
.lp-campaign .ci-hero-block {
    min-height: 672px;
}

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

/* Licence credential seal under the hero trust strip on the campaign LPs.
   A circular, scalloped-edge seal (SVG so the scallops and text stay crisp at
   any size). Wrapped in a <span>, not a <button>: it states a credential and has
   no action, so it must not be focusable or announced as clickable. */
.ci-license-wrap {
    /* Seal hidden for now — delete this line to bring it back. */
    display: none;

    max-width: 1720px;
    margin: 18px auto 0;
    padding: 0 16px;
}

.ci-seal {
    display: inline-block;
    line-height: 0;
    filter: drop-shadow(0 6px 14px rgba(3, 54, 72, 0.22));
}

.ci-seal__svg {
    display: block;
    width: 126px;
    height: 126px;
}

.ci-seal__svg text {
    font-family: var(--font-heading);
    text-anchor: middle;
}

.ci-seal__t1 {
    font-size: 7.4px;
    font-weight: 700;
    letter-spacing: 1.15px;
    fill: #7b8b95;
}

.ci-seal__t2 {
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 1.5px;
    fill: #033648;
}

.ci-seal__t3 {
    font-size: 10.2px;
    font-weight: 900;
    letter-spacing: 0;
    fill: #BB2C20;
}

.ci-seal__t4 {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.1px;
    fill: #7b8b95;
}

@media (max-width: 1100px) {
    .ci-license-wrap {
        padding: 0 28px;
    }
}

@media (max-width: 768px) {
    .ci-license-wrap {
        margin-top: 14px;
        padding: 0 16px;
        text-align: center;
    }

    .ci-seal__svg {
        width: 106px;
        height: 106px;
    }
}

/* Campaign LPs carry a 4th (read-only Service) field per the brief, so the hero
   form needs a 5th column to keep fields + CTA on one row. Scoped to >=1201px so
   the existing tablet (2-col) and mobile (1-col) rules still apply below that. */
@media (min-width: 1201px) {
    .lp-campaign .hf-flat-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 14px 16px;
    }

    .lp-campaign .hf-flat-grid .hf-submit-btn {
        min-width: 0;
        padding: 0 14px;
        font-size: 15px;
    }
}

/* Narrow phones: the hero form collapses to one grid column, but grid items
   default to min-width:auto — so the CTA's nowrap label forced the column wider
   than the form card and the row was clipped (previously masked by the global
   overflow-x:hidden). Let the column shrink and the label wrap. Applies to every
   LP; the longer campaign CTA labels ("GET MY FREE LEAK INSPECTION") made it
   obvious, but /roofing overflowed by 12px too. */
@media (max-width: 768px) {
    .hf-flat-grid,
    .hf-flat-grid > * {
        min-width: 0;
    }

    .hf-flat-grid .field input {
        width: 100%;
    }

    .hf-flat-grid .hf-submit-btn {
        width: 100%;
        min-width: 0;
        white-space: normal;
        height: auto;
        min-height: 64px;
        padding: 12px 16px;
        line-height: 1.25;
    }
}

/* Hero-form CTA on the campaign LPs: two stacked lines per the brief —
   a smaller "Call Now" over the larger number. Still a submit button, so the
   lead form continues to post; only the label changed. */
.hf-submit-btn--call {
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
    text-transform: none;
    letter-spacing: 0;
}

.hf-submit-btn--call .hf-btn-line1 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.92;
}

.hf-submit-btn--call .hf-btn-line2 {
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 0.2px;
}

@media (min-width: 1201px) {
    .lp-campaign .hf-flat-grid .hf-submit-btn--call .hf-btn-line1 {
        font-size: 12px;
    }

    .lp-campaign .hf-flat-grid .hf-submit-btn--call .hf-btn-line2 {
        font-size: 19px;
    }
}