/* =========================
   1) DESIGN TOKENS
   Thunder Restoration – Mold Remediation
   Brand Kit — Deep Ocean Navy #023049 + Teal-Blue #0C7DAC
   (single blue family — deep navy through teal, no green, no neon cyan)
   Primary typeface: Archivo Black (heading) + Inter (body)
========================= */
:root {
    /* Brand */
    --primary-color: #023049;       /* deep ocean navy (gradient base) */
    --primary-dark: #011F30;        /* darker navy */
    --accent-color: #0C7DAC;        /* teal-blue (gradient top, used for CTAs) */
    --accent-dark: #085B7E;         /* darker teal-blue hover */
    --accent-light: #3FA9D4;        /* lighter teal-blue */
    --dark-text: #023049;
    --border-color: #023049;

    /* Typography */
    --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-heading: "Archivo Black", "Montserrat", 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(--dark-text);
}

/* =========================
   3) HEADER
========================= */

/* ── Accent top bar ───────────────────────────────────── */
.site-header::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #011F30 0%, #023049 40%, #0C7DAC 100%);
}

/* ── Sticky shell ──────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .06);
}

/* ── Inner row ─────────────────────────────────────────── */
.header-inner,
.header-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
}

.header-inner {
    max-width: none;
    margin: 0;
    padding: 10px clamp(16px, 2vw, 32px);
    width: 100%;
    min-height: 82px;
    overflow: hidden;
}

/* ── Remove old diagonal panel ────────────────────────── */
.header-v2::before {
    display: none;
}

/* ── LOGO ──────────────────────────────────────────────── */
.header-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 10px 0;
    position: relative;
    z-index: 1;
}

.header-logo img {
    height: 85px;
    width: auto;
    display: block;
}

/* ── CENTER: credential badges ────────────────────────── */
.header-badges {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 700;
    color: #023049;
    background: #E8F0FF;
    border: 1px solid #c8e0b8;
    border-radius: 999px;
    padding: 5px 12px 5px 8px;
    white-space: nowrap;
}

.header-badge svg {
    color: #023049;
    flex-shrink: 0;
}

.header-badge-sep {
    color: #bbb;
    font-size: 16px;
    font-weight: 300;
    flex-shrink: 0;
}

/* ── RIGHT: CTA ────────────────────────────────────────── */
.header-cta {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.call-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* Header CTA: desktop/tablet shows "Get A Free Quote", mobile shows "CALL ..."
   Breakpoint stays in lockstep with MOBILE_QUERY in lp-mobile-call.js so iPad
   portrait (768px) sees the form-fill CTA, not the tel: link. */
.header-cta-desktop { display: flex; }
.header-cta-mobile { display: none; }

@media (max-width: 767px) {
    .header-cta-desktop { display: none; }
    .header-cta-mobile { display: flex; }
}

/* Two-line call button (used by lp-mobile-call.js conversions)
   Layout: phone number on top (big focal point), title-case subtitle below.
   Title case avoids the multi-line wrap problem caused by wide uppercase tracking. */
.lp-mc-call-label,
.lp-mc-call-number {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.2;
}

.lp-mc-call-label {
    order: 1;
    font-size: 14px;
    font-weight: 700;
    opacity: 0.95;
    letter-spacing: 1.4px;
    margin: 0 0 6px;
    text-transform: uppercase;
    line-height: 1.25;
}

.lp-mc-call-number {
    order: 2;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.3px;
    text-transform: none;
    margin: 0;
    line-height: 1.1;
}

/* Bigger, premium button — flex column with serious breathing room */
a[data-lp-mc-text="1"] {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 88px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    line-height: 1.2 !important;
    gap: 0 !important;
    border-radius: 12px !important;
}

@media (max-width: 480px) {
    a[data-lp-mc-text="1"] {
        min-height: 78px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
    .lp-mc-call-label {
        font-size: 13px;
        letter-spacing: 1.2px;
    }
    .lp-mc-call-number {
        font-size: 25px;
    }
}

@media (max-width: 380px) {
    a[data-lp-mc-text="1"] {
        min-height: 72px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    .lp-mc-call-label {
        font-size: 12px;
        letter-spacing: 1px;
    }
    .lp-mc-call-number {
        font-size: 22px;
    }
}

/* ── Main call button ──────────────────────────────────── */
.btn-solid {
    font-family: var(--font-heading);
    font-weight: 800;
    background: #0C7DAC;
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(12, 125, 172, .30);

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

    padding: 14px 32px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.15;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn-solid:hover {
    background: #085B7E;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(12, 125, 172, .45);
}

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

.header-btn-line1 {
    display: block;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    opacity: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.header-btn-line2 {
    display: block;
    font-size: 29px;
    font-weight: 900;
    letter-spacing: 2.9px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ── Sub-label below button ────────────────────────────── */
.call-sub {
    margin: 0;
    font-size: 20px;
    color: #374151;
    font-family: var(--font-heading);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1160px) {
    .header-badges {
        gap: 6px;
    }

    .header-badge {
        font-size: 11.5px;
        padding: 4px 10px 4px 7px;
    }

    .header-inner {
        padding: 0 28px;
    }

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

@media (max-width: 960px) {
    .header-badges {
        display: none;
    }

    .header-logo {
        padding-right: 0;
    }

    .header-inner {
        padding: 0 20px;
        min-height: 72px;
    }

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

    .call-sub {
        font-size: 13px;
    }
}

/* The header used to switch to position:fixed here, with
   `body { padding-top: var(--header-h) }` holding its place — and --header-h is
   set by JavaScript that cannot run until the header exists, i.e. after first
   paint. On a throttled phone the hero therefore painted at y=0 and then jumped
   down by the full header height once the script ran: a single 93px shift worth
   0.113 CLS, measured at 412x823 with Lighthouse's 4x CPU / 1.6Mbps throttling.
   No fallback value can fix that properly either, because the header's height is
   content-driven (87px at 360px wide, 93px at 412, 103px at 540, 109px at 601+)
   and the CallRail number swap changes it again at runtime.

   The base rule is already `position: sticky; top: 0`, which pins the header
   exactly the same way while keeping it in flow — so it reserves its own space,
   no padding compensation is needed, and there is nothing left to shift. Sticky
   survives here because `body` uses `overflow-x: clip` rather than `hidden`:
   clip leaves overflow-y visible, so no scroll container is created. Do not
   change that to hidden, and do not reintroduce position:fixed. */
@media (max-width: 992px) {
    /* .site-header inherits sticky from the base rule; nothing to override. */
}

@media (max-width: 600px) {
    .site-header::before {
        height: 3px;
    }

    .header-inner {
        padding: 5px 10px;
        min-height: 62px;
        gap: 8px;
    }

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

    .btn-solid {
        padding: 12px 18px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(12, 125, 172, .45);
        flex-direction: column;
        align-items: center;
        gap: 1px;
        white-space: nowrap;
    }

    .header-btn-line1 {
        font-size: 10px;
        letter-spacing: 0.8px;
    }

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

    .call-sub {
        display: block;
        font-size: 14px;
        text-align: center;
        white-space: nowrap;
        max-width: none;
    }
}

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

    .header-btn-line1 {
        font-size: 9px;
        letter-spacing: 0.8px;
    }

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

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

    .call-sub {
        font-size: 12px;
        max-width: none;
        white-space: nowrap;
    }
}

/* ── Keep new hdr-* classes inert if referenced ──────── */
.hdr-top,
.hdr-main,
.hdr-trust,
.hdr-phone,
.hdr-btn {
    display: none;
}


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

.hero {
    position: relative;
    background: #E8F0FF;
}

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

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

.hero-left::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 24, 132, 0.85) 0%, rgba(6, 24, 132, 0.65) 40%, rgba(6, 24, 132, 0.45) 100%);
}

/* RIGHT */
.hero-right {
    display: block;
    position: relative;
    overflow: hidden;
    
}

.hero-right::after {
    content: "";
    position: absolute;
    inset: 0;
    /* subtle right-edge fade so images blend naturally */
    background: linear-gradient(270deg, rgba(6, 24, 132, 0.30) 0%, rgba(6, 24, 132, 0.08) 60%, transparent 100%);
    pointer-events: none;
}

.hero-left-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 48px 48px 56px clamp(48px, 8vw, 150px);
    max-width: 900px;
}

/* 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.15);
    border: 1px solid rgba(255, 255, 255, 0.22);
    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: 920px;
    text-align: left;
    color: #fff;
}

.hero-kicker {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-heading);
    letter-spacing: 3.4px;
    line-height: 1.5;
    text-transform: uppercase;
    opacity: 1;
    margin-bottom: 0;
    padding-bottom: 18px;
    color: #3FA9D4;
    position: relative;
}

.hero-kicker::after {
    content: "";
    display: block;
    width: 72px;
    height: 2px;
    margin: 14px 0 0;
    background: linear-gradient(90deg, #0C7DAC, rgba(12, 125, 172, 0));
    border-radius: 2px;
}

.hero-title {
    margin: 0 0 22px;
    font-weight: 900;
    line-height: 1.06;
    font-size: 44px;
    letter-spacing: -0.5px;
    font-family: var(--font-heading);
    text-wrap: balance;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

/* Secondary CTA under hero title */
.hero-trust-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    padding: 10px 22px;
    margin: 0 0 18px;
    border-radius: 999px;
    text-decoration: none;
    cursor: default;

    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 0.4px;
    white-space: nowrap;

    color: #fff;
    background: var(--primary-color);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);

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


.hero-trust-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
}

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

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

/* =========================
   HERO ICON LIST (under title)
========================= */
.hero-points {
    list-style: none;
    padding: 18px 20px;
    margin: 0 0 28px;
    display: grid;
    gap: 6px;
    max-width: 650px;
    position: relative;
    border-radius: 14px;
    background: rgba(6, 24, 132, 0.78);
    border: 1px solid rgba(12, 125, 172, 0.22);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-points::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(120% 90% at 50% 0%,
            rgba(12, 125, 172, 0.06) 0%,
            rgba(255, 255, 255, 0) 55%);
    opacity: .85;
}

.hero-point {
    position: relative;
    z-index: 1;
    padding-left: 40px;
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    margin-top: 5px;
}

.hero-point::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 999px;

    background: rgba(12, 125, 172, 0.2);
    border: 1px solid rgba(12, 125, 172, 0.35);
}

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

/* Structured (title + description) bullet variant — desktop */
.hero-points--structured .hero-point {
    padding-left: 36px;
    margin: 0;
    padding-top: 4px;
    padding-bottom: 4px;
}

.hero-points--structured .hero-point::before {
    width: 24px;
    height: 24px;
    top: 6px;
    transform: none;
}

.hero-points--structured .hero-point > .icon-list__icon {
    width: 13px !important;
    height: 13px !important;
    left: 5px;
    top: 11px;
    transform: none;
}

.hero-points--structured .hero-point > .icon-list__text {
    display: block;
}

.hero-points--structured .hero-point .icon-list__title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 1px;
}

.hero-points--structured .hero-point .icon-list__desc {
    display: block;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.3;
    opacity: .85;
}

@media (max-width: 768px) {
    .hero-points--structured {
        padding: 18px 16px;
        gap: 14px;
    }

    .hero-points--structured .hero-point {
        align-items: flex-start !important;
        padding-left: 44px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .hero-points--structured .hero-point::before {
        width: 30px;
        height: 30px;
        top: 0;
        transform: none;
    }

    .hero-points--structured .hero-point > .icon-list__icon {
        width: 15px !important;
        height: 15px !important;
        left: 8px;
        top: 8px;
        transform: none;
    }

    .hero-points--structured .hero-point .icon-list__title {
        font-size: 15px;
        line-height: 1.25;
        margin-bottom: 3px;
    }

    .hero-points--structured .hero-point .icon-list__desc {
        font-size: 13.5px;
        line-height: 1.4;
        opacity: .9;
    }
}

.hero-call {
    display: inline-block;
    text-decoration: none;
    background: #0C7DAC;
    color: #fff;
    border-radius: 10px;
    padding: 16px 28px;
    box-shadow: 0 4px 16px rgba(12, 125, 172, .35);
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}

.hero-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(12, 125, 172, .45);
    background: #085B7E;
}

.hero-call-top {
    display: block;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 15px;
    font-family: var(--font-heading);
    text-transform: uppercase;
    margin-bottom: 4px;
    text-align: center;
    opacity: 0.9;
}

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



/* =========================
   Floating Form (desktop)
========================= */
.hero-form-wrap {
    position: relative;
    margin: -20px 0 0;
    padding: 0 24px 48px;
    width: 100%;
    background: #f4f9ff;
    z-index: 5;
}

.hero-form-card {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow:
        0 18px 50px rgba(6, 24, 132, 0.14),
        0 4px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    padding: 26px 32px 20px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

/* Subtle gold top accent bar */
.hero-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3FA9D4, #0C7DAC, #023049);
}

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

.hero-form-title {
    font-weight: 900;
    font-size: 26px;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
    color: #011F30;
    line-height: 1.15;
    text-transform: uppercase;
}

/* subtitle like your 2nd reference (not spaced-out) */
.hero-form-sub {
    letter-spacing: 0.3px !important;
    font-weight: 600;
    color: #6b7280;
    margin-top: 6px;
    font-size: 14px;
    font-family: var(--font-heading);
    max-width: 1060px;
    margin-left: auto;
    margin-right: auto;
}

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

.field label {
    display: block;
    font-size: 12px;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #374151;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.field input,
.field select {
    width: 100%;
    height: 52px;
    border: 1.5px solid #e5e7eb;
    outline: 0;
    background: #f9fafb;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 15px;
    font-family: var(--font-heading);
    color: #1b1b1b;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s;
}

.field input:focus,
.field select:focus {
    border-color: #023049;
    background: #fff;
}

/* 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: 1.5px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 8px;
    height: 52px;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: border-color 0.2s, background 0.2s;
}

.hero-form-card .form-select:focus {
    border-color: #023049;
    background: #fff;
}

.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 2: email + service in ONE ROW */
.hero-step[data-step="2"] .hero-fields--step {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: end;
}

/* Buttons */
.hero-step-btn {
    height: 58px;
    min-width: 220px;
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    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: #0C7DAC;
    color: #fff;
    font-size: 16px;
    transition: background 0.2s, transform 0.15s;
}

.hero-step-btn:hover {
    background: #085B7E;
    transform: translateY(-1px);
}

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

/* =============================================================
   SINGLE-STEP HERO FORM (revamped)
   - Row 1: name | phone | email
   - Row 2: address | service | submit button
============================================================= */
.hero-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: end;
}

.hero-form-grid .hero-submit-wrap {
    display: flex;
    justify-content: center;
    grid-column: 1 / -1;
}

.hero-form-grid .hero-submit-btn {
    width: auto;
    min-width: 280px;
}

/* Refined input + select feel */
.hero-form-grid .field input,
.hero-form-grid .field select,
.hero-form-grid .form-select {
    height: 50px;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    background: #fafafa;
    font-size: 14px;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.hero-form-grid .field label {
    font-size: 11px;
    letter-spacing: 1.4px;
    margin-bottom: 6px;
}

.hero-form-grid .field input:focus,
.hero-form-grid .field select:focus,
.hero-form-grid .form-select:focus {
    border-color: #023049;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(2, 48, 73, .10);
}

/* Eye-catchy submit button */
.hero-submit-btn {
    position: relative;
    overflow: hidden;
    border: 0;
    cursor: pointer;
    width: 100%;
    max-width: none;
    height: 50px;
    padding: 0 22px;
    border-radius: 10px;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    white-space: nowrap;
    background: linear-gradient(135deg, #3FA9D4 0%, #0C7DAC 50%, #023049 100%);
    box-shadow:
        0 10px 24px rgba(12, 125, 172, 0.38),
        0 2px 4px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
    transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
}

.hero-submit-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.28) 50%,
        transparent 70%);
    transform: translateX(-110%);
    transition: transform .65s ease;
}

.hero-submit-btn:hover {
    transform: translateY(-2px);
    filter: saturate(1.08);
    box-shadow:
        0 16px 34px rgba(12, 125, 172, 0.48),
        0 3px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

.hero-submit-btn:hover::before {
    transform: translateX(110%);
}

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

.hero-submit-btn .hero-submit-arrow {
    display: inline-block;
    transition: transform .25s ease;
    font-size: 14px;
}

.hero-submit-btn:hover .hero-submit-arrow {
    transform: translateX(4px);
}

@media (max-width: 900px) {
    .hero-form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px 14px;
    }
}

@media (max-width: 600px) {
    .hero-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .hero-submit-btn {
        width: 100%;
        min-width: 0;
    }
}

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

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

    .hero-form-wrap {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        background: transparent;
    }

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

    .hero-form-card::before {
        display: none;
    }

    .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 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Step 2: force single-column on mobile to match Step 1 layout */
    .hero-step[data-step="2"] .hero-fields--step {
        grid-template-columns: 1fr;
        gap: 14px;
    }

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

/* =========================================
   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;
        border: 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;
    transform: translateZ(0);

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.38),
        0 2px 0 rgba(255, 255, 255, 0.06) inset;
}

.hero-loc-media img {
    width: 100%;
    height: auto;
    /* max-height removed to prevent cropping */
    object-fit: contain;
    display: block;
    filter: contrast(1.06) saturate(1.04);
    transform: scale(1.02);
}

.hero-loc-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.28) 100%);
    opacity: 0.95;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset;
}


/* ============================
   Form Bottom Image (spicy)
============================ */
.hero-form-bottom-media {
    display: none;
    margin-top: 14px;
    height: 240px;
    border-radius: 1px;
    overflow: hidden;
    position: relative;
    isolation: isolate;

    background: url("../images/hero-ac.webp") center / cover no-repeat;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

@media (max-width: 768px) {
    .hero-form-bottom-media {
        height: auto;
        aspect-ratio: auto;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding-top: 56%;
    }

    .hero-loc-media {
        display: block;
        width: 100vw;
        max-width: none;
        margin: 0 0 18px;
        margin-top: -25px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 0;
        box-shadow: none;
    }

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

    .hero-trust-btn {
        display: flex;
        width: 100%;
        max-width: 100%;
        padding: 10px 16px;
        margin: 16px auto 9px;
        font-size: clamp(14px, 4vw, 18px);
        white-space: normal;
        text-align: center;
    }

    .hero-loc-media {
        display: block;
    }

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

    .hero-loc-media img {
        max-height: 100%;
    }

    .hero {
        padding-bottom: 0;
    }

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

    /* Stronger, brand-consistent overlay on mobile */
    .hero-left::after {
        background: linear-gradient(180deg, rgba(6, 24, 132, 0.88) 0%, rgba(6, 24, 132, 0.72) 35%, rgba(6, 24, 132, 0.50) 100%);
    }

    .hero-left-inner {
        padding: 26px 16px 30px;
        display: block;
    }

    .hero-loc {
        display: none;
    }

    .hero-copy {
        text-align: center;
        max-width: 520px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }

    .hero-kicker {
        font-size: 11px;
        letter-spacing: 2.2px;
        line-height: 1.45;
        margin: 0 0 18px;
        padding-top: 14px;
        padding-bottom: 0;
        opacity: 1;
        color: #3FA9D4;
        order: 1;
        position: relative;
    }

    .hero-kicker::after {
        content: none;
    }

    .hero-kicker::before {
        content: "";
        display: block;
        width: 44px;
        height: 2px;
        margin: 0 auto 12px;
        background: linear-gradient(90deg, transparent, #0C7DAC, transparent);
        border-radius: 2px;
    }

    .hero-title {
        font-size: clamp(22px, 6.2vw, 28px);
        line-height: 1.15;
        letter-spacing: -0.2px;
        margin: 4px 0 14px;
        text-wrap: balance;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
        order: 0;
    }

    .hero-trust-btn { order: 2; }
    .hero-points { order: 3; }
    .hero-call { order: 4; }

    .hero-points {
        position: relative;
        padding: 18px 14px;
        border-radius: 16px;

        background: rgba(6, 24, 132, 0.88);
        border: 1px solid rgba(12, 125, 172, 0.20);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        overflow: hidden;
        width: min(100%, 560px);
        margin: 10px auto 18px;
    }

    .hero-points li {
        margin-top: 5px;
    }

    .hero-points::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(120% 90% at 50% 0%,
                rgba(12, 125, 172, 0.06) 0%,
                rgba(255, 255, 255, 0) 55%);
        opacity: .85;
        border-radius: inherit;
    }

    .hero-point {
        position: relative;
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding-left: 46px;
        text-align: left;
    }

    .hero-point::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);

        width: 36px;
        height: 36px;
        border-radius: 999px;

        background: rgba(12, 125, 172, 0.18);
        border: 1px solid rgba(12, 125, 172, 0.35);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
        backdrop-filter: blur(6px);
    }

    .hero-point>.icon-list__icon {
        position: absolute !important;
        left: 9px;
        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 {
        display: inline-block;
        font-weight: 600;
        font-size: clamp(13px, 3.5vw, 15px);
        line-height: 1.3;
    }

    .hero-call {
        display: block;
        width: min(92%, 460px);
        margin: 0 auto;
        border-radius: 12px;
        padding: 14px 18px;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
        text-align: center;
    }

    .hero-call-top {
        font-size: clamp(12px, 3.2vw, 14px);
        letter-spacing: 1.6px;
        opacity: 0.95;
    }

    .hero-call-main {
        font-size: clamp(20px, 5.5vw, 26px);
        line-height: 1.05;
    }

    .hero-form-head {
        text-align: center;
        margin-bottom: 22px;
        padding-top: 6px;
    }

    .hero-form-head::before {
        content: "";
        display: block;
        width: 52px;
        height: 3px;
        margin: 0 auto 14px;
        border-radius: 3px;
        background: linear-gradient(90deg, #3FA9D4 0%, #0C7DAC 100%);
        box-shadow: 0 2px 8px rgba(12, 125, 172, 0.32);
    }

    .hero-form-title {
        font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1.3;
        color: #023049;
        text-transform: uppercase;
        padding: 0 8px;
        white-space: normal;
        text-align: center;
        margin: 0 auto;
        max-width: 100%;
    }

    .hero-form-title br {
        display: none;
    }

    .hero-form-sub {
        font-family: "Inter", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        font-size: 13px;
        font-weight: 500;
        color: #5b6478;
        letter-spacing: 0.1px;
        line-height: 1.55;
        margin: 10px auto 0;
        max-width: 92%;
        text-transform: none;
    }

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

    .field input,
    .field select {
        height: 52px;
        border-radius: 6px;
        background: #f9fafb;
        border: 1.5px solid #e5e7eb;
        padding: 0 14px;
        font-size: 15px;
    }

    .hero-right {
        display: none;
    }

    .hero-form-bottom-media {
        display: block;
    }

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

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

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

    /* Brand swoosh background */
    /* Was /static/demo/images/... - a leftover development path. It did not
       404 in practice only because atlas-lp.css overrides it with !important;
       corrected here so the base rule stands on its own. */
    background-image: url('/assets/img/why-trust-bg.webp');
    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;
    position: relative;
}

/* Premium green kicker bar above section title */
.why-inner::before {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: 0 auto 18px;
    border-radius: 4px;
    background: linear-gradient(90deg, #3FA9D4 0%, #0C7DAC 100%);
    box-shadow: 0 3px 10px rgba(12, 125, 172, 0.32);
}

.why-title {
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-style: normal;
    margin: 0 0 14px;
    font-weight: 800;
    letter-spacing: -0.5px;
    font-size: 38px;
    line-height: 1.15;
    color: #0e1a3d;
}

/* 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(12, 30, 8, 0.8);
    font-family: var(--font-heading);
}

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

.why-card {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    padding: 32px 30px 32px;
    border: 1px solid rgba(2, 48, 73, 0.08);
    box-shadow:
        0 20px 50px -22px rgba(2, 48, 73, 0.22),
        0 4px 12px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;

    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    gap: 6px;
}

/* Premium green gradient number badge — replaces the faded big "01" */
.why-card::before {
    counter-increment: reason;
    content: counter(reason, decimal-leading-zero);
    position: absolute;
    top: 32px;
    left: 30px;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3FA9D4 0%, #0C7DAC 60%, #023049 100%);
    color: #ffffff;
    font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 52px;
    text-align: center;
    letter-spacing: 0.5px;
    opacity: 1;
    pointer-events: none;
    box-shadow:
        0 10px 22px -6px rgba(12, 125, 172, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform .35s ease, box-shadow .35s ease;
}

/* Remove old gradient top accent — badge is the focal point now */
.why-card::after {
    display: none;
}

.why-card:hover {
    transform: translateY(-6px);
    border-color: rgba(12, 125, 172, 0.30);
    box-shadow:
        0 32px 70px -22px rgba(2, 48, 73, 0.30),
        0 8px 20px rgba(15, 23, 42, 0.06);
}

.why-card:hover::before {
    transform: translateY(-2px);
    box-shadow:
        0 14px 28px -6px rgba(12, 125, 172, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.why-corner {
    display: none;
}

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

.why-big {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 85px;
    line-height: 1;
    color: var(--primary-color);
    margin: 0;
    word-break: keep-all;
    white-space: nowrap;
}

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

.why-mid {
    position: relative;
    padding-top: 14px;
    padding-left: 72px;
    min-height: 56px;
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.28;
    letter-spacing: -0.1px;
    color: #023049;
    margin: 0;
}

/* Old green bar above the title removed — the badge handles the accent */
.why-mid::before {
    display: none;
}

.why-small {
    font-family: "Inter", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: 0.1px;
    color: #4a5266;
    margin: 8px 0 0;
}

.why-card .why-divider {
    height: 1px;
    background: rgba(6, 24, 132, 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(6, 24, 132, 0.75);
    padding: 0 2px;
}

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

.why-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #3FA9D4 0%, #0C7DAC 50%, #023049 100%);
    color: #fff;
    text-decoration: none;
    height: 60px;
    padding: 0 40px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 15px;
    font-family: var(--font-heading);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 12px 28px rgba(12, 125, 172, 0.35);
    cursor: pointer;
    transition: transform .2s ease, filter .25s ease, box-shadow .25s ease;
}

.why-btn:hover {
    transform: translateY(-2px);
    filter: saturate(1.08);
    box-shadow: 0 16px 34px rgba(12, 125, 172, 0.45);
}

/* Tablet */
@media (max-width: 980px) {
    .why-title {
        font-size: 32px;
    }

    .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

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

    .why-card::before {
        top: 26px;
        left: 24px;
        width: 46px;
        height: 46px;
        border-radius: 12px;
        font-size: 15px;
        line-height: 46px;
    }

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

    .why-mid {
        padding-top: 12px;
        padding-left: 62px;
        min-height: 50px;
        font-size: 18px;
    }

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

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

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

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

    /* Premium green kicker bar above the section title */
    .why-inner::before {
        content: "";
        display: block;
        width: 48px;
        height: 3px;
        margin: 0 auto 14px;
        border-radius: 3px;
        background: linear-gradient(90deg, #3FA9D4 0%, #0C7DAC 100%);
        box-shadow: 0 2px 8px rgba(12, 125, 172, 0.32);
    }

    .why-title {
        font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        font-style: normal;
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -0.3px;
        line-height: 1.22;
        margin-bottom: 6px;
        color: #0e1a3d;
    }

    .why-sub {
        font-family: "Inter", "Montserrat", system-ui, sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #5b6478;
        line-height: 1.55;
        margin-bottom: 22px;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 22px;
    }

    /* Refined premium card */
    .why-card {
        min-height: 0;
        padding: 22px 22px 22px;
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid rgba(2, 48, 73, 0.08);
        box-shadow:
            0 14px 32px -16px rgba(2, 48, 73, 0.22),
            0 2px 6px rgba(15, 23, 42, 0.04);
        gap: 4px;
    }

    /* Small green rounded badge with white number — replaces the big faded 01 */
    .why-card::before {
        content: counter(reason, decimal-leading-zero);
        counter-increment: reason;
        position: absolute;
        top: 22px;
        left: 22px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: linear-gradient(135deg, #3FA9D4 0%, #0C7DAC 60%, #023049 100%);
        color: #ffffff;
        font-family: "Montserrat", system-ui, sans-serif;
        font-weight: 800;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
        letter-spacing: 0.5px;
        opacity: 1;
        transform: none;
        box-shadow:
            0 6px 14px -4px rgba(12, 125, 172, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    /* Hide the top accent line on mobile for a cleaner look */
    .why-card::after {
        display: none;
    }

    .why-card:hover::before {
        opacity: 1;
        transform: none;
    }

    .why-big {
        font-size: 60px;
        white-space: normal;
    }

    /* Title sits beside the number badge */
    .why-mid {
        padding-top: 10px;
        padding-left: 56px;
        min-height: 42px;
        font-family: "Montserrat", system-ui, sans-serif;
        font-weight: 800;
        font-size: 17px;
        line-height: 1.3;
        letter-spacing: 0.1px;
        color: #023049;
        margin: 0;
    }

    /* Remove the old green bar above title — badge handles the accent now */
    .why-mid::before {
        display: none;
    }

    .why-small {
        font-family: "Inter", "Montserrat", system-ui, sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.6;
        color: #4a5266;
        margin-top: 6px;
    }

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

/* =========================
   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, 38, 12, 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(239, 247, 232, 1) 0%,
            rgba(239, 247, 232, 0) 10%,
            rgba(239, 247, 232, 0) 90%,
            rgba(239, 247, 232, 1) 100%);
    z-index: 3;
}

.why-marquee__centerline {
    position: absolute;
    left: 50%;
    top: 10px;
    bottom: 10px;
    width: 1px;
    transform: translateX(-50%);
    background: rgba(15, 38, 12, 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, 38, 12, 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, 38, 12, 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: 38px;
    position: relative;
}

.services-kicker {
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 3.5px;
    font-size: 18px;
    color: var(--accent-color);
    margin-top: 32px;
    margin-bottom: 14px;
    text-transform: uppercase;
    position: relative;
    padding-top: 24px;
}

.services-kicker::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    border-radius: 2px;
}

.services-title {
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 38px;
    text-transform: none;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #0e1a3d;
    margin: 0;
}

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

.services-checks > span,
.services-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-family: "Inter", "Montserrat", system-ui, sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    color: #3a4256;
    letter-spacing: 0.1px;
}

.services-check-ico {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    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;
}

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

    background: #ffffff;
    border: 1px solid rgba(2, 48, 73, 0.08);
    border-radius: 16px;
    padding: 26px;

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

    box-shadow:
        0 18px 40px -20px rgba(2, 48, 73, 0.20),
        0 2px 8px rgba(15, 23, 42, 0.04);

    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(--primary-color);
    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%,
            var(--border-color) 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(2, 48, 73, 0.25);
    border-color: var(--border-color);
}

.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: 54px;
    height: 54px;
    border-radius: 14px;

    background: linear-gradient(135deg, #1a3ed1 0%, #023049 55%, #011F30 100%);
    color: #ffffff;

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

    box-shadow:
        0 10px 22px -8px rgba(2, 48, 73, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);

    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

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

/* On hover the icon background turns white - invert the white SVG to dark */
.svc-card:hover .svc-icon img {
    filter: brightness(0) saturate(100%) invert(13%) sepia(35%) saturate(2845%) hue-rotate(184deg) brightness(95%) contrast(98%);
}

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

.svc-title {
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: #023049;
    margin: 0 0 6px;
    transition: color 0.25s ease;
}

.svc-desc {
    font-family: "Inter", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.62;
    letter-spacing: 0.05px;
    color: #4a5266;
    margin: 0;
    transition: color 0.25s ease;
}

/* =========================
   CTA Button (turns white on hover)
========================= */
.svc-btn {
    margin-top: 16px;
    height: 44px;
    border-radius: 10px;
    text-transform: uppercase;
    background: var(--border-color);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    width: 100%;
    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;
}

/* Checklist-section CTA: size to content instead of full width */
.services-cta .svc-btn {
    display: inline-flex;
    width: auto;
    padding: 0 56px;
    margin-left: auto;
    margin-right: auto;
}

/* 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(2, 48, 73, 0.35);
    outline-offset: 3px;
}

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

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

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

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

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

/* When the card grid has an odd count (e.g. 5 cards in 2 cols), the lonely
   last card spans the full row and is centered at half-width to match
   sibling cards. Only applies when there are actually 2+ columns — at
   mobile (≤560px) the grid is 1 col, so leave the card at full width. */
@media (min-width: 561px) {
    .svc-card:nth-child(odd):last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 13px);
        margin: 0 auto;
    }
}

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

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

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

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

    .services-head {
        margin-bottom: 26px;
    }

    .services-kicker {
        font-size: 14px;
        letter-spacing: 3px;
        margin-bottom: 12px;
    }

    .services-title {
        font-size: 26px;
        letter-spacing: -0.3px;
        line-height: 1.18;
    }

    .services-checks {
        gap: 10px;
        margin-top: 16px;
    }

    .services-checks > span,
    .services-check {
        font-size: 11.5px;
        padding: 7px 12px !important;
        letter-spacing: 0.8px !important;
        white-space: nowrap;
    }

    .services-grid {
        margin-top: 26px;
        gap: 14px;
    }

    .svc-card {
        padding: 20px 18px;
        border-radius: 14px;
        min-height: 0;
        box-shadow:
            0 14px 32px -18px rgba(2, 48, 73, 0.22),
            0 2px 6px rgba(15, 23, 42, 0.04);
    }

    .svc-card-head {
        gap: 14px;
    }

    .svc-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

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

    .svc-title {
        font-size: 15px;
        letter-spacing: 0.3px;
        margin: 2px 0 6px;
    }

    .svc-desc {
        font-size: 14px;
        line-height: 1.58;
    }

    .svc-btn {
        height: 46px;
        font-size: 14px;
    }
}

@media (max-width: 380px) {
    .services-title {
        font-size: 23px;
    }

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

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

/* =========================
   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 / WHY CHOOSE US - Professional Redesign
   ========================================================= */

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

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

.pros-collage__grid {
    box-shadow:
        0 30px 70px -28px rgba(2, 48, 73, 0.35),
        0 8px 18px rgba(15, 23, 42, 0.06);
}

/* ---- LEFT: Collage ---- */
.pros-collage {
    position: relative;
}

.pros-collage__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
    border-radius: 20px;
    overflow: hidden;
}

.pros-collage__item {
    overflow: hidden;
    background: #d1e8c4;
}

.pros-collage__item--tall {
    grid-row: span 2;
}

.pros-collage__item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pros-collage__item--tall img {
    aspect-ratio: 3/4;
}

.pros-collage__item:not(.pros-collage__item--tall) img {
    aspect-ratio: 4/3;
}

.pros-collage__item:hover img {
    transform: scale(1.04);
}

/* Credential badge overlay */
.pros-badge {
    position: absolute;
    bottom: -18px;
    right: -18px;
    background: linear-gradient(135deg, #1a3ed1 0%, #023049 55%, #011F30 100%);
    color: #fff;
    border-radius: 16px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow:
        0 22px 44px -14px rgba(2, 48, 73, 0.55),
        0 4px 10px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    z-index: 2;
}

.pros-badge__icon {
    width: 44px;
    height: 44px;
    background: rgba(12, 125, 172, 0.22);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #3FA9D4;
    box-shadow: inset 0 0 0 1px rgba(95, 208, 96, 0.35);
}

.pros-badge__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pros-badge__title {
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.3px;
    line-height: 1;
}

.pros-badge__sub {
    font-family: "Inter", "Montserrat", system-ui, sans-serif;
    font-weight: 500;
    font-size: 12px;
    opacity: 0.85;
    letter-spacing: 0.2px;
}

/* ---- RIGHT: Content ---- */
.pros-content {
    max-width: 680px;
}

.pros-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--primary-color, #0B1FAA);
    background: #DFF2E0;
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 16px;
}

.pros-title {
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 36px;
    line-height: 1.18;
    letter-spacing: -0.5px;
    color: #0e1a3d;
    margin: 0 0 26px;
}

.pros-intro {
    font-family: "Inter", "Montserrat", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #5b6478;
    line-height: 1.65;
    margin: 0 0 32px;
    max-width: 560px;
}

/* ---- Feature cards grid ---- */
.pros-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 36px;
}

.pros-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #ffffff;
    border: 1px solid rgba(2, 48, 73, 0.08);
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow:
        0 14px 32px -18px rgba(2, 48, 73, 0.18),
        0 2px 8px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.pros-card:hover {
    transform: translateY(-4px);
    border-color: rgba(12, 125, 172, 0.22);
    box-shadow:
        0 28px 56px -22px rgba(2, 48, 73, 0.30),
        0 6px 14px rgba(15, 23, 42, 0.05);
}

.pros-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0C7DAC 0%, #023049 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(2, 48, 73, 0.25), inset 0 1px 0 rgba(255,255,255,0.15);
    flex-shrink: 0;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(12, 125, 172, 0.18);
    transition: background 0.22s ease, transform 0.22s ease;
}

.pros-card:hover .pros-card__icon {
    transform: scale(1.04);
}

.pros-card__body {
    flex: 1;
}

.pros-card h3 {
    margin: 2px 0 6px;
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 15.5px;
    letter-spacing: 0.1px;
    color: #023049;
    line-height: 1.3;
}

.pros-card p {
    margin: 0;
    font-family: "Inter", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    color: #4a5266;
}

/* ---- CTA ---- */
.pros-cta {
    margin-top: 6px;
}

.pros-btn {
    background: var(--primary-color, #0B1FAA);
    color: #fff;
    border-radius: 12px;
    padding: 0 32px;
    height: 56px;
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 14.5px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow:
        0 16px 34px -10px rgba(12, 125, 172, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
    cursor: pointer;
    border: none;
}

.pros-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
        0 22px 44px -12px rgba(12, 125, 172, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

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

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

    .pros-collage {
        max-width: 560px;
        margin: 0 auto;
    }

    .pros-badge {
        bottom: -14px;
        right: -8px;
    }

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

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

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

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

    .pros-title {
        font-size: 24px;
        letter-spacing: -0.3px;
        line-height: 1.22;
        margin: 0 0 20px;
    }

    .pros-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 26px;
    }

    .pros-card {
        padding: 18px 16px;
        border-radius: 14px;
        gap: 12px;
    }

    .pros-card__icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .pros-card h3 {
        font-size: 14.5px;
        margin: 0 0 4px;
    }

    .pros-card p {
        font-size: 13.5px;
        line-height: 1.55;
    }

    .pros-btn {
        width: 100%;
        height: 54px;
        font-size: 13.5px;
        padding: 0 18px;
        letter-spacing: 0.4px;
    }

    .pros-badge {
        right: 0;
        bottom: -14px;
        padding: 12px 16px;
        border-radius: 14px;
    }

    .pros-badge__icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .pros-badge__title {
        font-size: 13.5px;
    }

    .pros-badge__sub {
        font-size: 11px;
    }
}


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

.financing-cta {
    position: relative;
    width: 100%;
    min-height: 480px;
    display: grid;
    align-items: center;
    overflow: hidden;
   
}

.financing-cta__bg {
    position: absolute;
    inset: 0;
    background-image: url("../images/financing-banner.webp");
    background-size: cover;
    background-position: center right;
    opacity: 0.18;
    transform: scale(1.04);
}



.financing-cta__inner {
    position: relative;
    z-index: 2;
    width: min(860px, calc(100% - 48px));
    margin: 0 auto;
    padding: 80px 0;
    text-align: center;
}

.financing-cta__eyebrow {
    display: inline-block;
    margin: 0 0 20px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--cta-orange);
    background: rgba(244, 166, 35, 0.15);
    border: 1px solid rgba(244, 166, 35, 0.4);
    border-radius: 999px;
    padding: 7px 20px;
}

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

.financing-cta__title {
    margin: 0 0 20px;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 52px;
    line-height: 1.1;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.financing-cta__text {
    margin: 0 auto 36px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    max-width: 690px;
}

.financing-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 48px;
    border-radius: 12px;
    color: #fff;
    background: var(--cta-orange);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 900;
    letter-spacing: 1px;
    font-size: 17px;
    text-transform: uppercase;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.financing-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(63, 169, 212, 0.55);
    filter: brightness(1.06);
}

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

.financing-cta__arrow {
    font-size: 15px;
    transition: transform 0.18s ease;
}

.financing-cta__btn:hover .financing-cta__arrow {
    transform: translateX(4px);
}

.financing-cta__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.financing-cta__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.3px;
}

.financing-cta__trust-item svg {
    width: 16px;
    height: 16px;
    color: var(--cta-orange);
    flex-shrink: 0;
}

.financing-cta__trust-divider {
    color: rgba(255,255,255,0.3);
    font-size: 16px;
}

@media (max-width: 992px) {
    .financing-cta {
        min-height: 420px;
    }
    .financing-cta__inner {
        width: min(860px, calc(100% - 32px));
        padding: 72px 0;
    }
    .financing-cta__title {
        font-size: 40px;
    }
}

@media (max-width: 640px) {
    .financing-cta {
        min-height: 0;
    }
    .financing-cta__inner {
        padding: 60px 0;
    }
    .financing-cta__title {
        font-size: 32px;
        letter-spacing: -0.2px;
    }
    .financing-cta__text {
        font-size: 16px;
        margin-bottom: 28px;
    }
    .financing-cta__btn {
        width: 100%;
        padding: 18px 24px;
        font-size: 15px;
    }
    .financing-cta__trust {
        gap: 8px;
    }
    .financing-cta__trust-divider {
        display: none;
    }
}
/* =========================================================
   SERVICE GUARANTEE
   ========================================================= */

.ga-guarantee {
    position: relative;
    background: var(--dark-text);
    padding: 52px 0;
    overflow: visible;
}

/* green bars */
.ga-guarantee::before,
.ga-guarantee::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 7px;
    background: var(--border-color);
    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 */
.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: var(--dark-text) !important;
    stroke: var(--dark-text) !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: #F2F8EC;
}

.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: #121417;
    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;
}

.review2-stars {
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--primary-color);
    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: #023049;
    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;

    background: rgba(10, 12, 16, 0.65);
    backdrop-filter: blur(4px);
}

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

.review-modal__box {
    position: relative;
    width: min(640px, calc(100% - 32px));
    max-height: 86vh;

    background: #ffffff;
    border-radius: 18px;
    padding: 28px 28px 26px;

    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.22),
        0 10px 20px rgba(0, 0, 0, 0.10);

    display: flex;
    flex-direction: column;
    gap: 18px;

    animation: modalFadeUp 220ms ease;
}

.review-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;

    width: 36px;
    height: 36px;
    border-radius: 50%;

    border: none;
    background: #f2f4f7;
    color: #111;

    font-size: 20px;
    font-weight: 700;
    cursor: pointer;

    display: grid;
    place-items: center;
}

.review-modal__close:hover {
    background: #e6e9ee;
}

.review-modal__stars {
    font-size: 20px;
    letter-spacing: 3px;
    color: var(--primary-color);
}

.review-modal__text {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    color: #1c1f23;

    overflow-y: auto;
    padding-right: 6px;
}

.review-modal__name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    color: #023049;
}

/* animation */
@keyframes modalFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 640px) {
    .review-modal__box {
        padding: 22px 20px 20px;
        border-radius: 16px;
    }

    .review-modal__text {
        font-size: 15px;
    }
}

/* =========================================================
   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: #023049;
}

.gallery-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 900;
    letter-spacing: -0.8px;
    line-height: 1.05;
    font-size: clamp(28px, 3.6vw, 52px);
    color: #0b0f19;
}

/* 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);
}

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

.gallery-media {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f6fb;
    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: #0b0f19;
    margin: 0 0 4px;
}

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

/* Nav buttons */
.gallery-nav {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(15, 38, 12, 0.12);
    background: #ffffff;
    box-shadow: 0 10px 18px rgba(15, 38, 12, 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(11, 15, 25, 0.25);
    cursor: pointer;
}

.gallery-dot.is-active {
    background: #023049;
    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, 38, 12, 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, 38, 12, 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: #0b0f19;
}

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

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

.gallery-modal__sub {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    color: rgba(11, 15, 25, 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(11, 15, 25, 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 {
    position: relative;
    padding: 96px 0 120px;
    background: #ffffff;
    overflow: hidden;
}

/* background image layer */
.service-areas::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/service-areas.webp");
    /* change path if needed */
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
}

.sa2-inner {
    position: relative;
    z-index: 1;
}

.sa2-inner {
    width: min(1200px, 92%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: start;
}

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

.sa2-right {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* top row = 2 cards */
.sa2-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

/* cards */
.sa2-card {
    border: 2px solid var(--primary-color);
    /* green border like reference */
    border-radius: 16px;
    background: #ffffff;
    padding: 18px 20px;
}

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

.sa2-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.sa2-pin {
    width: 22px;
    height: 22px;
    color: var(--primary-color);
    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: 18px;
    font-weight: 800;
    color: #111827;
}

/* lists */
.sa2-list {
    margin: 0;
    padding: 0;
    list-style: none;

    display: grid;
    gap: 10px 34px;

    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

/* columns */
.sa2-list--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

/* airy / prevent overlap */
.sa2-list li {
    white-space: normal;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.35;
}

/* ✅ FIX: prevent overlap at high zoom (125–200%) */
.sa2-list {
    grid-auto-rows: minmax(0, auto);
}

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

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

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

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

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

@media (max-width: 520px) {

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

/* =========================================================
   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: url("../images/footer-bg.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;
}

.final-logo-box {
    width: 228px;
    height: 122px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f5f9 100%);
    border-radius: 18px;

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

    box-shadow:
        0 24px 50px -16px rgba(0, 0, 0, 0.35),
        0 4px 10px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    margin-bottom: 24px;
}

.final-logo-box img {
    width: 210px;
}

.final-title {
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
    color: #ffffff;
}

.final-desc {
    font-family: "Inter", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    max-width: 520px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 26px;
}

/* CALL BUTTON */
.final-call {
    display: inline-block;
    background: linear-gradient(135deg, #1a3ed1 0%, #023049 55%, #011F30 100%);
    border-radius: 14px;
    padding: 18px 26px;
    text-decoration: none;
    color: #fff;
    box-shadow:
        0 20px 40px -12px rgba(2, 48, 73, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.final-call:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
        0 26px 50px -12px rgba(2, 48, 73, 0.65),
        0 6px 14px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.final-call-top {
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 6px;
}

.final-call-main {
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    display: block;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    letter-spacing: -0.3px;
}

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

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

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

.final-offer-pill {
    background: linear-gradient(135deg, #3FA9D4 0%, #0C7DAC 60%, #023049 100%);
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 26px;
    font-weight: 800;
    font-family: "Montserrat", system-ui, sans-serif;
    box-shadow: 0 10px 22px -8px rgba(12, 125, 172, 0.50);
}

.final-offer-text {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.15;
    text-transform: uppercase;
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.final-offer-sub {
    font-size: 17px;
    letter-spacing: 3.5px;
    margin-bottom: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* 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: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    margin-bottom: 8px;
    display: block;
    text-align: left;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
}

.final-field input,
.final-field select {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 0 14px;
    font-size: 14.5px;
    font-family: "Inter", "Montserrat", system-ui, sans-serif;
    background: rgba(255, 255, 255, 0.96);
    color: #1b1b1b;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.final-field input:focus,
.final-field select:focus {
    outline: none;
    background: #ffffff;
    border-color: rgba(95, 208, 96, 0.55);
    box-shadow:
        0 0 0 3px rgba(95, 208, 96, 0.20),
        0 6px 14px rgba(0, 0, 0, 0.15);
}

/* SUBMIT */
.final-submit {
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin-top: 18px;
    width: 100%;
    height: 56px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #3FA9D4 0%, #0C7DAC 55%, #023049 100%);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow:
        0 18px 36px -10px rgba(12, 125, 172, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.final-submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
        0 24px 46px -12px rgba(12, 125, 172, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* NOTE */
.final-note {
    font-family: "Inter", "Montserrat", system-ui, sans-serif;
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.2px;
}

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

.final-bottom {
    font-family: "Inter", "Montserrat", system-ui, sans-serif;
    margin-top: 52px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    text-align: center;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.1px;
    color: rgba(255, 255, 255, 0.82);
}

.credits {
    font-family: "Inter", "Montserrat", system-ui, sans-serif;
    margin-top: 8px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.65);
}

.fw-semibold {
    color: rgba(255, 255, 255, 0.92);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.2px;
}

/* ==========================================================
   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: 26px 0 26px;
        border-radius: 40px 40px 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 14px;
        overflow-x: clip;
    }

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

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

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

    .final-logo-box {
        width: 200px;
        height: 110px;
        margin: 0 auto 14px;
        border-radius: 14px;
    }

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

    .final-title {
        font-size: 28px;
        line-height: 1.2;
        letter-spacing: -0.3px;
        margin: 0 0 12px;
    }

    .final-desc {
        max-width: 520px;
        font-weight: 500;
        margin: 0 auto 18px;
        font-size: 14.5px;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.80);
    }

    .final-call {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
        padding: 16px 18px;
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        overflow: hidden;
    }

    .final-call-top {
        font-size: 11px;
        letter-spacing: 2.2px;
        margin-bottom: 6px;
        white-space: normal;
    }

    .final-call-main {
        font-size: 22px;
        letter-spacing: -0.2px;
        white-space: normal;
    }

    .final-right {
        width: 100%;
    }

    .final-offer {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 12px 0 8px;
        align-items: center;
        justify-content: center;
    }

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

    .final-offer-text {
        font-size: 22px;
        line-height: 1.15;
        letter-spacing: -0.3px;
    }

    .final-offer-sub {
        font-size: 11px;
        letter-spacing: 3px;
        margin-bottom: 16px;
    }

    .final-form {
        width: 100%;
    }

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

    .final-field label {
        display: none;
    }

    .final-field input,
    .final-field select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 52px;
        border-radius: 10px;
        padding: 0 16px;
        font-size: 14.5px;
        box-sizing: border-box;
    }

    .final-submit {
        width: 100%;
        height: 54px;
        border-radius: 12px;
        font-size: 14px;
        letter-spacing: 0.8px;
        margin-top: 16px;
    }

    .final-note {
        font-size: 11px;
        line-height: 1.6;
        margin-top: 12px;
    }

    .final-bottom {
        margin-top: 26px;
        padding-top: 18px;
        padding-bottom: 4px;
        font-size: 11.5px;
        line-height: 1.75;
        text-align: center;
    }

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

/* 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: #12b055;
    color: #fff;
    box-shadow: 0 12px 22px rgba(18, 176, 85, .25);
}

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

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


.ty-hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 16px;
    background: #fcfaf8;
}

.ty-hero__bg {
    position: absolute;
    inset: 0;
    background: url("../images/hero-city.webp") center/cover no-repeat;
    transform: scale(1.02);
    z-index: 0;
}

.ty-hero__overlay {
    position: absolute;
    inset: 0;

    z-index: 1;
}

.ty-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.ty-card {
    text-align: center;
    border-radius: 26px;
    padding: 44px 34px;
    background: rgba(44, 43, 43, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

.ty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(255, 211, 90, 0.16);
    border: 1px solid rgba(255, 211, 90, 0.35);
}

.ty-icon svg {
    width: 38px;
    height: 38px;
    fill: var(--primary-color);
}

.ty-title {
    color: #fff;
    font-family: "Archivo Black", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 44px;
    letter-spacing: -0.8px;
    margin: 0 0 10px;
    line-height: 1.05;
}

.ty-sub {
    font-family: "Archivo Black", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: rgba(255, 255, 255, 0.90);
    max-width: 880px;
    margin: 0 auto 24px;
    font-size: 15px;
    line-height: 1.6;
}

.ty-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.ty-btn {
    font-family: "Archivo Black", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: 0.6px;
    border: 0;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

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

.ty-btn--primary {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 1px 2px var(--border-color);
}

.ty-btn--primary:hover {
    opacity: 0.95;
}

.ty-btn--secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(209, 202, 202, 0.18);
}

.ty-btn--secondary:hover {
    opacity: 0.95;
}

.ty-call {
    font-family: "Archivo Black", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    font-size: 14px;
}

.ty-call a {
    color: white;
    text-decoration: none;
    font-weight: 900;
}

.ty-call a:hover,
.ty-call a:focus,
.split-hero__call:hover,
.split-hero__call:focus,
.split-hero__call a:hover,
.split-hero__call a:focus {
    text-decoration: none !important;
}

.ty-foot {
    font-family: "Archivo Black", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .ty-card {
        padding: 34px 18px;
        border-radius: 20px;
    }

    .ty-title {
        font-size: 32px;
    }

    .ty-sub {
        font-size: 14px;
    }

    .ty-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }
}

@media (max-width: 420px) {
    .ty-title {
        font-size: 28px;
    }

    .ty-btn {
        width: 100%;
    }
}


.fe-hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 16px;
    background: #0F2204;
}

.fe-hero__bg {
    position: absolute;
    inset: 0;
    background: url("../images/hero-city.webp") center/cover no-repeat;
    transform: scale(1.02);
    z-index: 0;
}

.fe-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.fe-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.fe-card {
    text-align: center;
    border-radius: 26px;
    padding: 44px 34px;
    background: rgba(44, 43, 43, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

.fe-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(255, 211, 90, 0.16);
    border: 1px solid rgba(255, 211, 90, 0.35);
}

.fe-icon svg {
    width: 38px;
    height: 38px;
    fill: var(--primary-color);
}

.fe-title {
    font-family: "Archivo Black", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #fff;
    font-weight: 700;
    font-size: 44px;
    letter-spacing: -0.8px;
    margin: 0 0 10px;
    line-height: 1.05;
}

.fe-sub {
    font-family: "Archivo Black", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: rgba(255, 255, 255, 0.90);
    max-width: 700px;
    margin: 0 auto 24px;
    font-size: 15px;
    line-height: 1.6;
}

.fe-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.fe-btn {
    font-family: "Archivo Black", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: 0.6px;
    border: 0;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

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

.fe-btn--primary {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 2px 2px var(--primary-color);
}

.fe-btn--primary:hover {
    opacity: 0.95;
}

.fe-btn--secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.fe-btn--secondary:hover {
    opacity: 0.95;
}

.fe-call {
    font-family: "Archivo Black", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    font-size: 14px;
}

.fe-call a {
    color: var(--fe-yellow);
    font-weight: 900;
    text-decoration: none;
    /* remove underline */
}

.fe-call a:hover,
.fe-call a:focus {
    text-decoration: none;
    /* keep underline removed */
}

.fe-foot {
    font-family: "Archivo Black", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .fe-card {
        padding: 34px 18px;
        border-radius: 20px;
    }

    .fe-title {
        font-size: 32px;
    }

    .fe-sub {
        font-size: 14px;
    }

    .fe-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }
}

@media (max-width: 420px) {
    .fe-title {
        font-size: 28px;
    }

    .fe-btn {
        width: 100%;
    }
}

/* ==========================================================
   SERVICE ESTIMATE POP-UP MODAL
   ========================================================== */
.svc-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
}

.svc-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.svc-modal__card {
    position: relative;
    width: min(560px, calc(100% - 32px));
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    margin: 0 auto;

    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);

    color: #1b1b1b;
    transform: translateY(16px);
    opacity: 0;
    animation: svcModalIn 0.25s ease-out forwards;
}

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

.svc-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #555;
    transition: background 0.2s, color 0.2s;
    z-index: 2;
}

.svc-modal__close:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #1b1b1b;
}

.svc-modal__header {
    padding: 28px 28px 0;
    text-align: center;
}

.svc-modal__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.5px;
    color: #1b1b1b;
}

.svc-modal__subtitle {
    font-family: var(--font-heading);
    font-size: 14px;
    color: #666;
    margin-top: 6px;
}

/* ── Form Fields ───────────────────────────────────────────── */
.svc-modal__form {
    padding: 24px 28px 28px;
}

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

.svc-modal__field {
    min-width: 0;
}

.svc-modal__field label {
    display: block;
    font-size: 12px;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1px;
    color: #1b1b1b;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.svc-modal__field input,
.svc-modal__field select {
    width: 100%;
    height: 48px;
    border: 1.5px solid #e0e0e0;
    outline: 0;
    background: #fafafa;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 15px;
    font-family: var(--font-heading);
    color: #1b1b1b;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.svc-modal__field input:focus,
.svc-modal__field select:focus {
    border-color: var(--primary-darkred);
    background: #fff;
}

.svc-modal__field input::placeholder {
    color: #aaa;
}

.svc-modal__recaptcha {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

.svc-modal__recaptcha .recaptcha-scale {
    display: inline-block;
    transform: scale(0.85);
    transform-origin: left bottom;
}

/* ── Submit Button ─────────────────────────────────────────── */
.svc-modal__submit {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 16px;
    border: 0;
    border-radius: 10px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #f0f0ef;
    background: linear-gradient(135deg, #011F30, #023049);
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}

.svc-modal__submit:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.svc-modal__submit:active {
    transform: translateY(0);
}

.svc-modal__note {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 12px;
    font-family: var(--font-heading);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 600px) {
    .svc-modal__card {
        width: calc(100% - 24px);
        border-radius: 14px;
    }

    .svc-modal__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .svc-modal__header {
        padding: 24px 20px 0;
    }

    .svc-modal__form {
        padding: 20px 20px 24px;
    }

    .svc-modal__title {
        font-size: 19px;
    }
}

/* ==========================================================
   RECAPTCHA CONFIRMATION MODAL
   ========================================================== */
.recaptcha-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: none;
}

.recaptcha-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.recaptcha-modal__card {
    position: relative;
    width: min(440px, calc(100% - 32px));
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
    padding: 32px 28px 28px;
    color: #1b1b1b;
    transform: translateY(16px);
    opacity: 0;
    animation: rcModalIn 0.25s ease-out forwards;
}

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

.recaptcha-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #555;
    transition: background 0.2s;
    z-index: 2;
}

.recaptcha-modal__close:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #1b1b1b;
}

.recaptcha-modal__header {
    text-align: center;
    margin-bottom: 22px;
}

.recaptcha-modal__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 24px;
    color: #011F30;
}

.recaptcha-modal__subtitle {
    font-family: var(--font-heading);
    font-size: 14px;
    color: #666;
    margin-top: 6px;
    line-height: 1.4;
}

.recaptcha-modal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.recaptcha-modal__widget {
    margin-bottom: 18px;
}

.recaptcha-modal__submit {
    display: block;
    width: 100%;
    padding: 16px;
    border: 0;
    border-radius: 10px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    background: #0C7DAC;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 3px 12px rgba(12, 125, 172, 0.35);
}

.recaptcha-modal__submit:hover {
    background: #085B7E;
    transform: translateY(-1px);
}

.recaptcha-modal__submit .arrow {
    margin-left: 6px;
}

@media (max-width: 600px) {
    .recaptcha-modal__card {
        width: calc(100% - 24px);
        border-radius: 14px;
        padding: 28px 20px 24px;
    }
    .recaptcha-modal__title { font-size: 20px; }
    .recaptcha-modal__widget {
        transform: scale(0.9);
        transform-origin: center;
    }
}

/* ============================================================
   PILAR SERVICES BRAND OVERRIDES
   Primary call buttons use Thunder green to match the brand's CTA style
   ============================================================ */

/* Header CTA button – gold */
.btn-solid {
    background: #0C7DAC !important;
    border-color: #0C7DAC !important;
    box-shadow: 0 3px 12px rgba(12, 125, 172, 0.40) !important;
}

/* Hero call block – gold */
.hero-call {
    background: #0C7DAC !important;
    box-shadow: 0 4px 16px rgba(12, 125, 172, 0.35) !important;
}

/* Why-trust section CTA button – gold */
.why-btn {
    background: #0C7DAC !important;
    box-shadow: 0 10px 22px rgba(12, 125, 172, 0.30) !important;
}

/* Financing/CTA banner button – white */
.financing-cta__btn {
    background: #ffffff !important;
    border-color: #ffffff !important;
}

/* Final form submit – gold */
.final-submit {
    background: #0C7DAC !important;
}

/* Modal submit button – gold */
.svc-modal__submit {
    background: linear-gradient(135deg, #023049, #0C7DAC) !important;
}

/* Step button (form wizard next/submit) – gold */
.hero-step-btn {
    background: #0C7DAC !important;
    color: #fff !important;
}

/* Why trust "Why Trust Us?" badge – gold accent */
.hero-trust-btn {
    background: rgba(12, 125, 172, 0.9) !important;
    border-color: rgba(12, 125, 172, 0.5) !important;
}

/* Service card hover fill stays green (brand primary) */
.svc-card::before {
    background: #023049 !important;
}

/* svc-btn (Get a Quote on service cards) – Thunder navy */
.svc-btn {
    background: #023049 !important;
    border: none;
}

.svc-card:hover .svc-btn {
    background: #ffffff !important;
    color: #023049 !important;
}

.svc-card:hover .svc-icon {
    background: #ffffff !important;
    color: #023049 !important;
}

/* pros section CTA */
.pros-btn {
    background: #0C7DAC !important;
}

/* Review stars – gold */
.review2-stars,
.review-modal__stars {
    color: #0C7DAC !important;
}

/* Certification marquee label */
.why-marquee__label {
    color: #023049 !important;
}

/* Services kicker */
.services-kicker {
    color: #023049 !important;
}

/* SA2 pin icon color */
.sa2-pin svg {
    color: #023049 !important;
}

/* financing-cta section background */
.financing-cta {
    background: #011F30 !important;
}

/* final-cta bg card background color (footer) */
.final-cta-bg-card {
    background-color: #011F30;
}


/* ============================
   TRIPLE WORRY FREE GUARANTEE
============================ */
.guarantee-badges {
    background: linear-gradient(160deg, #f8f6f0 0%, #edeae0 50%, #f2f0e8 100%);
    padding: 80px 24px;
    position: relative;
    overflow: hidden;
}

.guarantee-badges::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 15% 50%, rgba(26,74,71,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 85% 50%, rgba(161,136,76,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.guarantee-badges__inner {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.guarantee-badges__header {
    text-align: center;
    margin-bottom: 56px;
}

.guarantee-badges__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #1a4a47;
    background: rgba(26,74,71,0.1);
    border: 1px solid rgba(26,74,71,0.2);
    padding: 5px 16px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.guarantee-badges__title {
    font-size: 36px;
    font-weight: 800;
    font-family: var(--font-body);
    color: #1a1a1a;
    margin: 0 0 14px;
    line-height: 1.15;
}

.guarantee-badges__sub {
    font-size: 16px;
    color: #555;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

.guarantee-badges__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.guarantee-badge {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 36px 24px 32px;
    text-align: center;
    box-shadow:
        0 4px 6px rgba(0,0,0,0.04),
        0 12px 32px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.9);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.guarantee-badge:hover {
    transform: translateY(-6px);
    box-shadow:
        0 8px 12px rgba(0,0,0,0.06),
        0 24px 48px rgba(0,0,0,0.14);
}

.guarantee-badge--featured {
    background: #f9fafa;
    border-color: rgba(255,255,255,0.1);
    transform: scale(1.04);
}

.guarantee-badge--featured:hover {
    transform: scale(1.04) translateY(-6px);
}



.guarantee-badge--featured .guarantee-badge__desc {
    color: rgba(255,255,255,0.65);
}

.guarantee-badge__glow {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
    filter: blur(40px);
}

.guarantee-badge__glow--gold {
    background: radial-gradient(circle, rgba(161,136,76,0.6) 0%, transparent 70%);
}

.guarantee-badge__glow--dark {
    background: radial-gradient(circle, rgba(26,74,71,0.8) 0%, transparent 70%);
}

.guarantee-badge__glow--olive {
    background: radial-gradient(circle, rgba(12, 125, 172,0.6) 0%, transparent 70%);
}

.guarantee-badge__img-wrap {
    width: 140px;
    height: 140px;
    margin: 0 auto 22px;
    position: relative;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
}

.guarantee-badge__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.15));
    transition: transform 0.3s ease;
    border-radius: 20px;
}

.guarantee-badge:hover .guarantee-badge__img-wrap img {
    transform: scale(1.08) rotate(-2deg);
}

.guarantee-badge__label {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
    font-family: var(--font-body);
}

.guarantee-badge__desc {
    font-size: 14px;
    color: #666;
    line-height: 1.55;
    margin: 0;
}

/* Mobile */
@media (max-width: 768px) {
    .guarantee-badges {
        padding: 56px 16px;
    }

    .guarantee-badges__title {
        font-size: 26px;
    }

    .guarantee-badges__sub {
        font-size: 15px;
    }

    .guarantee-badges__header {
        margin-bottom: 36px;
    }

    .guarantee-badges__row {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 360px;
        margin: 0 auto;
    }

    .guarantee-badge--featured {
        transform: none;
    }

    .guarantee-badge--featured:hover {
        transform: translateY(-6px);
    }

    .guarantee-badge__img-wrap {
        width: 110px;
        height: 110px;
        margin-bottom: 16px;
    }
}


/* =========================================================
   CUSTOM INFO & FAQ SECTIONS (From Image References)
========================================================= */

/* --- Detailed Services Section --- */
.info-services-section {
  background-color: #f8f9fa; /* Light off-white background */
  padding: 80px 0;
}

.info-services-inner {
  width: min(900px, calc(100% - 48px)); /* Keeps text from stretching too wide */
  margin: 0 auto;
}

.info-title {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 900;
  color: #0b1528; /* Dark navy/black */
  margin-bottom: 24px;
}

.info-desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 20px;
}

.info-subtitle {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: #0b1528;
  margin: 36px 0 20px;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  border-top: 1px solid #e0e4e8;
}

.info-list li {
  display: flex;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #e0e4e8;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

.info-check {
  color: #1161B1; /* Blue checkmark */
  font-weight: 800;
  margin-right: 14px;
  font-size: 16px;
  flex-shrink: 0;
}

.info-footer {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

.info-footer a {
  color: #1161B1;
  font-weight: 700;
  text-decoration: underline;
}

/* --- FAQ Section --- */
.faq-section {
  background-color: #ffffff;
  padding: 80px 0;
}

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

.faq-title {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 900;
  color: #0b1528;
  margin-bottom: 40px;
}

.faq-accordion {
  border-top: 1px solid #e0e4e8;
}

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

.faq-question {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: #0b1528;
  cursor: pointer;
  text-align: left;
}

.faq-icon {
  color: #1161B1;
  font-size: 24px;
  font-weight: 500;
  transition: transform 0.3s ease;
  line-height: 1;
}

/* --- Smooth FAQ Accordion --- */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease-in-out;
}

.faq-answer-content {
  overflow: hidden;
}

.faq-answer p {
  padding-bottom: 24px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}

/* Active state toggled by JS */
.faq-item.is-open .faq-icon {
  transform: rotate(45deg); /* Turns the + into an x */
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr; /* Perfectly smooth opening */
}

/* --- Reusable Elements --- */
.text-center {
  text-align: center;
}

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

.btn-yellow-pill {
  display: inline-block;
  background-color: #0C7DAC; /* Thunder Green */
  color: #ffffff; /* White text for contrast */
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 900;
  padding: 18px 48px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(12, 125, 172, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-yellow-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(12, 125, 172, 0.6);
  background-color: #085B7E; /* Darker gold for hover state */
  color: #ffffff;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .info-title, .faq-title { font-size: 28px; }
  .btn-yellow-pill { font-size: 18px; padding: 16px 36px; width: 100%; box-sizing: border-box; }
}

/* ============================================================
   PILAR SERVICES — HVAC THEME ANIMATIONS
   Cool, breeze-inspired motion. Tasteful, never distracting.
   All animations respect prefers-reduced-motion below.
   ============================================================ */

/* ── 1) Drifting cool-air particles (snowflake-style dots) ── */
.hero {
  position: relative;
  overflow: hidden;
}
.cool-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.cool-particle {
  position: absolute;
  top: -10%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(12, 125, 172, 0.55) 0%, rgba(12, 125, 172, 0.15) 60%, transparent 100%);
  opacity: 0;
  animation: coolDrift linear infinite;
}
.cool-particle:nth-child(1)  { left: 6%;  width: 6px;  height: 6px;  animation-duration: 18s; animation-delay: 0s;   }
.cool-particle:nth-child(2)  { left: 14%; width: 10px; height: 10px; animation-duration: 22s; animation-delay: 3s;   }
.cool-particle:nth-child(3)  { left: 22%; width: 5px;  height: 5px;  animation-duration: 16s; animation-delay: 6s;   }
.cool-particle:nth-child(4)  { left: 32%; width: 8px;  height: 8px;  animation-duration: 24s; animation-delay: 1.5s; background: radial-gradient(circle, rgba(2, 48, 73, 0.4) 0%, transparent 70%); }
.cool-particle:nth-child(5)  { left: 42%; width: 7px;  height: 7px;  animation-duration: 20s; animation-delay: 4s;   }
.cool-particle:nth-child(6)  { left: 52%; width: 9px;  height: 9px;  animation-duration: 26s; animation-delay: 2s;   }
.cool-particle:nth-child(7)  { left: 62%; width: 6px;  height: 6px;  animation-duration: 19s; animation-delay: 7s;   background: radial-gradient(circle, rgba(2, 48, 73, 0.4) 0%, transparent 70%); }
.cool-particle:nth-child(8)  { left: 72%; width: 8px;  height: 8px;  animation-duration: 23s; animation-delay: 5s;   }
.cool-particle:nth-child(9)  { left: 82%; width: 5px;  height: 5px;  animation-duration: 17s; animation-delay: 8s;   }
.cool-particle:nth-child(10) { left: 92%; width: 10px; height: 10px; animation-duration: 25s; animation-delay: 2.5s; }

@keyframes coolDrift {
  0%   { transform: translate3d(0, 0, 0)         scale(0.6); opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translate3d(-15px, 55vh, 0)  scale(1);   opacity: 0.7; }
  90%  { opacity: 0.4; }
  100% { transform: translate3d(0, 110vh, 0)     scale(0.5); opacity: 0; }
}

/* Make sure hero content stays above particles */
.hero-grid,
.hero-form-wrap { position: relative; z-index: 2; }

/* ── 2) Hero kicker: animated cool shimmer ── */
.hero-kicker {
  background: linear-gradient(
    90deg,
    var(--accent-color)  0%,
    var(--primary-color) 25%,
    var(--accent-color)  50%,
    var(--primary-color) 75%,
    var(--accent-color)  100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kickerShimmer 6s ease-in-out infinite;
  font-weight: 700;
}
@keyframes kickerShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── 3) Service card icons: gentle "cool breeze" pulse ── */
.svc-card .svc-icon {
  transition: transform 0.4s cubic-bezier(.2,.7,.3,1), color 0.3s ease;
  will-change: transform;
}
.svc-card:hover .svc-icon {
  transform: translateY(-3px) rotate(-4deg);
  animation: iconBreeze 1.6s ease-in-out infinite;
}
@keyframes iconBreeze {
  0%, 100% { transform: translateY(-3px) rotate(-4deg); }
  50%      { transform: translateY(-6px) rotate(4deg);  }
}

/* ── 4) Primary CTA: sheen sweep (sub-quarterly, very subtle) ── */
.btn-solid,
.svc-btn,
.hero-call,
.final-call,
.financing-cta__btn,
.final-submit,
.hero-submit-btn,
.svc-modal__submit {
  position: relative;
  overflow: hidden;
}
.btn-solid::after,
.svc-btn::after,
.hero-call::after,
.final-call::after,
.financing-cta__btn::after,
.final-submit::after,
.hero-submit-btn::after,
.svc-modal__submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  transform: skewX(-22deg);
  animation: sheenSweep 5.5s ease-in-out infinite;
  pointer-events: none;
}
/* Animates transform, not `left`. This sheen runs infinitely on eight buttons at
   once, and `left` is a layout property: every frame relaid out the button and
   Chrome charged each one to CLS, so the animation accumulated layout shift for
   as long as the page stayed open — 0.097 of it per load on mobile, second only
   to the header jump. translateX is compositor-only: same sweep, no layout, no
   shift.

   The distance converts because `left` percentages resolve against the parent
   width while translateX resolves against the element's own. The band travels
   from -75% to 130% of the button (205%) and is 50% of the button wide, so
   205/50 = 410% of its own width. `left: -75%` stays on the base rule as the
   start position; skewX has to be repeated in the keyframes or the animation
   would drop it. */
@keyframes sheenSweep {
  0%, 100%  { transform: translateX(0) skewX(-22deg); }
  35%, 65%  { transform: translateX(410%) skewX(-22deg); }
}

/* ── 5) Trust-promise badge: pulsing ring (Thunder promise / ISA-style) ── */
.pros-badge {
  position: relative;
}
.pros-badge::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid rgba(12, 125, 172, 0.5);
  animation: badgePulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes badgePulse {
  0%   { transform: scale(0.98); opacity: 0.9; }
  70%  { transform: scale(1.08); opacity: 0;   }
  100% { transform: scale(1.08); opacity: 0;   }
}

/* ── 6) Final CTA: animated cooling-wave background tint ── */
.financing-cta {
  position: relative;
  overflow: hidden;
}
.financing-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(12, 125, 172, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(2, 48, 73, 0.20) 0%, transparent 55%);
  animation: climateDrift 14s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}
@keyframes climateDrift {
  0%   { transform: translate(0, 0)     scale(1);    }
  100% { transform: translate(-2%, 2%)  scale(1.06); }
}
.financing-cta__inner { position: relative; z-index: 2; }

/* ── 7) Scroll-reveal: fade-in-up for service cards / sections ── */
.fade-in-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children when their parent has data-stagger */
[data-stagger] > .fade-in-up:nth-child(1) { transition-delay: 0.05s; }
[data-stagger] > .fade-in-up:nth-child(2) { transition-delay: 0.15s; }
[data-stagger] > .fade-in-up:nth-child(3) { transition-delay: 0.25s; }
[data-stagger] > .fade-in-up:nth-child(4) { transition-delay: 0.35s; }
[data-stagger] > .fade-in-up:nth-child(5) { transition-delay: 0.45s; }
[data-stagger] > .fade-in-up:nth-child(6) { transition-delay: 0.55s; }

/* ── 8) 24/7 Emergency badge — slow rotating ring ── */
.emergency-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(2, 48, 73, 0.25);
}
.emergency-badge::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 0 0 rgba(12, 125, 172, 0.85);
  animation: emergencyPulse 1.8s ease-out infinite;
}
@keyframes emergencyPulse {
  0%   { box-shadow: 0 0 0 0   rgba(12, 125, 172, 0.85); }
  70%  { box-shadow: 0 0 0 12px rgba(12, 125, 172, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(12, 125, 172, 0);    }
}

/* ── 9) Hero loc pill: small "live" indicator ── */
.hero-loc-pill {
  position: relative;
}
.hero-loc-pill::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 0 0 rgba(12, 125, 172, 0.7);
  animation: locDot 2s ease-out infinite;
}
@keyframes locDot {
  0%   { box-shadow: 0 0 0 0   rgba(12, 125, 172, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(12, 125, 172, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(12, 125, 172, 0);   }
}

/* ── 10) Service card lift with branded shadow ── */
.svc-card {
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(2, 48, 73, 0.15),
              0 4px 12px  rgba(12, 125, 172, 0.10);
}

/* ── Reduce motion preference ── */
@media (prefers-reduced-motion: reduce) {
  .cool-particle,
  .hero-kicker,
  .btn-solid::after, .svc-btn::after, .hero-call::after,
  .final-call::after, .financing-cta__btn::after, .final-submit::after,
  .hero-submit-btn::after, .svc-modal__submit::after,
  .pros-badge::before,
  .financing-cta::after,
  .emergency-badge::before,
  .hero-loc-pill::after,
  .svc-card:hover .svc-icon {
    animation: none !important;
  }
  .fade-in-up {
    opacity: 1;
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   BRAND KIT v2 — ITALIC DISPLAY OVERRIDES
   Per brand kit: Primary typeface MUSEO SANS 900 ITALIC.
   Substitute on web: Archivo Black w/ italic style.
   ──────────────────────────────────────────────────────────────── */

.hero-title,
.services-title,
.pros-title,
.why-title,
.final-title,
.financing-cta__title {
  font-family: "Anton", "Bebas Neue", "Archivo Black", "Montserrat", system-ui, sans-serif !important;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* Tighten hero kicker too — that small all-caps "lead-in" line */
.hero-kicker,
.services-kicker {
  font-family: "Archivo Black", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.04em;
}

/* Header logo + final-cta logo wrappers stay non-italic — they're images */

/* ════════════════════════════════════════════════════════════════
   WIDE HERO BANNER (.ep-hero)
   Long-wide single-row hero: big title + green rule tagline + 3 feature icons
   Layered over a background image with a left-side white fade.
   ──────────────────────────────────────────────────────────────── */

.ep-hero {
    position: relative;
    width: 100%;
    min-height: 760px;
    overflow: hidden;
    background: #ffffff;
    isolation: isolate;
}

.ep-hero__bg {
    position: absolute;
    inset: 0;
    background-size: auto 130%;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Left-to-right white fade — keeps copy readable over any bg image */
.ep-hero__fade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            #ffffff 0%,
            #ffffff 32%,
            rgba(255, 255, 255, 0.85) 44%,
            rgba(255, 255, 255, 0.3) 58%,
            rgba(255, 255, 255, 0) 72%);
    z-index: 1;
    pointer-events: none;
}

.ep-hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--container);
    margin: 0;
    padding: 140px clamp(24px, 6vw, 96px) 88px clamp(24px, 3vw, 48px);
    min-height: 760px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 48px;
}

/* COPY BLOCK ─────────────────────────────────────────────── */
/* Container is widened to give the H1 room for 2 lines, but the tagline
   below keeps its original 640px max-width via .ep-hero__tagline. */
.ep-hero__copy {
    max-width: 900px;
}

.ep-hero__title {
    margin: 0;
    font-family: "Archivo Black", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: 900;
    color: var(--primary-color);
    font-size: clamp(34px, 5vw, 62px);
    line-height: 0.98;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.ep-hero__title--accent {
    color: var(--primary-color);
    display: inline-block;
}

/* Slug-matching keyword in hero H1 (e.g. "AC Maintenance" on /ac-maintenance).
   Highlighted in brand green to mirror the URL/ad-group focus keyword. */
.ep-hero__title--slug {
    color: var(--accent-color);
}

.ep-hero__tagline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 0;
    max-width: 640px;
}

.ep-hero__rule {
    display: inline-block;
    width: 4px;
    height: clamp(24px, 2.4vw, 32px);
    background: var(--accent-color);
    border-radius: 2px;
    flex-shrink: 0;
}

.ep-hero__sub-text {
    font-family: var(--font-body);
    font-size: clamp(18px, 1.8vw, 26px);
    font-weight: 600;
    color: #1a2540;
    letter-spacing: 0.2px;
    line-height: 1.3;
}

/* FEATURES ROW ───────────────────────────────────────────── */
.ep-hero__features {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: flex;
    gap: clamp(28px, 5vw, 64px);
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Wrapper for tagline + feature icons. Desktop = transparent passthrough
   (tagline and icon row render exactly where they were). Mobile (≤992px) =
   one white card so the tagline copy is readable over the hero photo. */
.ep-hero__feature-card { width: 100%; }

@media (max-width: 992px) {
    .ep-hero__feature-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 18px 14px 16px;
        background: #ffffff;
        border-radius: 18px;
        border: 1px solid rgba(2, 48, 73, 0.08);
        box-shadow:
            0 18px 40px -22px rgba(2, 48, 73, 0.35),
            0 2px 8px rgba(15, 23, 42, 0.06);
    }
    /* Tagline inside the card — drop outside spacing, add a subtle
       divider so it reads as a separate row from the icons. */
    .ep-hero__feature-card .ep-hero__tagline {
        margin-top: 0;
        max-width: 100%;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(2, 48, 73, 0.10);
    }
    /* Strip the duplicate white card styles from the inner features list
       since the wrapper now provides the card surface. */
    .ep-hero__feature-card .ep-hero__features {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        margin-top: 0;
        border-radius: 0;
    }
}

.ep-feat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 130px;
}

.ep-feat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
}

.ep-feat__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ep-feat__label {
    font-family: "Archivo Black", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-style: italic;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.2;
    letter-spacing: 0.6px;
}

/* Hero CTA button sitting under the feature icons. Reuses .final-call
   styles; this just controls placement inside the hero feature card. */
.ep-hero__final-call {
    margin-top: 22px;
}

@media (max-width: 992px) {
    .ep-hero__final-call {
        margin-top: 14px;
        width: 100%;
        max-width: 460px;
        align-self: center;
    }
}

/* MOBILE & TABLET ────────────────────────────────────────── */
@media (max-width: 900px) {
    .ep-hero {
        min-height: 0;
    }

    .ep-hero__fade {
        /* On mobile, keep a soft white wash only at the very top so the title
           and tagline stay readable, then let the background photo show through
           below. The feature row and trust badges carry their own white cards,
           so they no longer need the fade for contrast. */
        background:
            linear-gradient(180deg,
                rgba(255, 255, 255, 0.92) 0%,
                rgba(255, 255, 255, 0.78) 22%,
                rgba(255, 255, 255, 0.38) 42%,
                rgba(255, 255, 255, 0.10) 60%,
                rgba(255, 255, 255, 0.04) 100%);
    }

    .ep-hero__bg {
        background-size: cover;
        background-position: center center;
    }

    .ep-hero__inner {
        padding: 34px 18px 28px;
        min-height: 0;
        gap: 22px;
        align-items: center;
    }

    .ep-hero__copy {
        max-width: 100%;
        text-align: center;
    }

    .ep-hero__title {
        font-size: clamp(34px, 7.5vw, 54px);
        letter-spacing: -0.8px;
        line-height: 1.0;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
        word-break: keep-all;
        overflow-wrap: normal;
        hyphens: none;
        min-width: 0;
        max-width: 100%;
        text-align: center;
    }

    .ep-hero__tagline {
        margin-top: 14px;
        gap: 12px;
    }

    .ep-hero__rule {
        width: 4px;
        height: 22px;
        border-radius: 3px;
    }

    .ep-hero__sub-text {
        font-size: 16px;
        font-weight: 700;
        color: #0e1c3f;
        letter-spacing: 0.1px;
    }

    /* Lift the feature row into a premium white card */
    .ep-hero__features {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
        margin-top: 18px;
        padding: 18px 12px 16px;
        background: #ffffff;
        border-radius: 18px;
        border: 1px solid rgba(2, 48, 73, 0.08);
        box-shadow:
            0 18px 40px -22px rgba(2, 48, 73, 0.35),
            0 2px 8px rgba(15, 23, 42, 0.06);
    }

    .ep-feat {
        flex: 1 1 0;
        max-width: none;
        min-width: 0;
        gap: 10px;
    }

    /* Soft circular badge behind each icon for that polished feel */
    .ep-feat__icon {
        width: 58px;
        height: 58px;
        padding: 11px;
        border-radius: 50%;
        background: linear-gradient(180deg, #f6f8ff 0%, #eaf0ff 100%);
        box-shadow:
            inset 0 0 0 1px rgba(2, 48, 73, 0.10),
            0 4px 10px -4px rgba(2, 48, 73, 0.18);
    }

    .ep-feat__icon svg {
        width: 100%;
        height: 100%;
    }

    .ep-feat__label {
        font-size: 11px;
        letter-spacing: 0.5px;
        line-height: 1.25;
    }
}

@media (max-width: 480px) {
    .ep-hero__inner {
        padding: 28px 16px 24px;
        gap: 18px;
    }

    .ep-hero__title {
        font-size: clamp(30px, 9vw, 42px);
        letter-spacing: -0.6px;
    }

    .ep-hero__sub-text {
        font-size: 15px;
    }

    .ep-hero__features {
        padding: 16px 8px 14px;
        border-radius: 16px;
        gap: 6px;
    }

    .ep-feat {
        gap: 8px;
    }

    .ep-feat__icon {
        width: 52px;
        height: 52px;
        padding: 10px;
    }

    .ep-feat__label {
        font-size: 10.5px;
        letter-spacing: 0.4px;
    }
}

@media (max-width: 360px) {
    .ep-hero__title {
        font-size: clamp(26px, 10vw, 34px);
        letter-spacing: -0.4px;
    }

    .ep-hero__sub-text {
        font-size: 14px;
    }

    .ep-feat__icon {
        width: 46px;
        height: 46px;
        padding: 9px;
    }

    .ep-feat__label {
        font-size: 10px;
    }
}

/* =========================================================
   TESTIMONIAL POPUP MODAL
   Click any .tst-card (or its "Read full review" button) to
   open a centered modal showing the full review body.
   Shared by all LPs that use the .tst-card pattern.
   ========================================================= */
.tst-card[data-tst-trigger] { cursor: pointer; }
.tst-card[data-tst-trigger]:hover .tst-read-more { text-decoration: underline; }

/* Truncate the review preview on the card to 4 lines.
   Higher specificity (.tst-card .tst-body) so this overrides the
   inline .tst-body styles in each LP without needing !important. */
.tst-card .tst-body {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tst-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: "Inter", "Montserrat", system-ui, sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: #0C7DAC;
    text-decoration: none;
}
.tst-read-more:hover { text-decoration: underline; color: #023049; }

.tst-modal {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.tst-modal.is-open { display: flex; }

.tst-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

.tst-modal__card {
    position: relative;
    width: min(600px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 18px;
    padding: 40px 36px 30px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    transform: translateY(8px);
    opacity: 0;
    animation: tstModalIn 0.22s ease-out forwards;
    box-sizing: border-box;
}
@keyframes tstModalIn { to { transform: translateY(0); opacity: 1; } }

.tst-modal__close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f2f5fa;
    border: 0;
    color: #4b5563;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s, color 0.15s;
}
.tst-modal__close:hover { background: #023049; color: #fff; }

.tst-modal__stars {
    color: #f5a623;
    font-size: 20px;
    letter-spacing: 4px;
    margin-bottom: 16px;
}

.tst-modal__body {
    font-family: "Inter", "Montserrat", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #1a2238;
    margin: 0 0 22px;
    white-space: pre-wrap;
}

.tst-modal__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid #e8eef5;
}
.tst-modal__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0C7DAC 0%, #023049 100%);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.tst-modal__author {
    font-family: "Inter", "Montserrat", system-ui, sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #0e1a3d;
}
.tst-modal__tag {
    font-size: 12px;
    color: #5b6478;
    font-weight: 600;
    margin-top: 2px;
}

@media (max-width: 560px) {
    .tst-modal__card { padding: 34px 22px 24px; border-radius: 14px; }
    .tst-modal__body { font-size: 15px; }
    .tst-modal__close { top: 10px; right: 12px; width: 32px; height: 32px; font-size: 20px; }
}