/*
Theme Name: WATER RESTORATION INDIANAPOLIS
Theme URI: https://waterrestorationindianapolis.com/
Author: Trishala
Description: Synchronized professional water damage theme layout & design
Version: 2.1
*/

:root {
    --primary: #1C3144;
    --accent: #0077B6;
    --accent-hover: #023E8A;
    --bg-light: #F4F9FB;
    --secondary: #EAF4F7;
    --text-main: #334155;
    --text-muted: #475569;
    --border: #E2E8F0;
    --white: #FFFFFF;
    --radius: 12px;
    --shadow: 0 10px 30px rgba(0, 119, 182, 0.08);
    --shadow-hover: 0 18px 40px rgba(0, 119, 182, 0.14);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    padding: 0;
    color: var(--text-main);
    background: var(--white);
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

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

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.25s ease;
}

a:hover {
    color: var(--accent-hover);
}

h1, h2, h3, h4 {
    margin-top: 0;
    color: var(--primary);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

h1 {
    font-size: clamp(2.3rem, 4.5vw, 3.8rem);
    margin-bottom: 20px;
}

h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin-bottom: 18px;
}

h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

p {
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--text-muted);
}

section {
    position: relative;
    padding: 80px 0;
}
.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-logo {
    display: block;
    width: 220px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .brand-logo {
        width: 180px;
    }
}

@media (max-width: 480px) {
    .brand-logo {
        width: 150px;
    }
}
```

/* =========================================
   HEADER & NAVIGATION
========================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: #FFFFFF;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.nav-container {
    width: min(1200px, calc(100% - 48px));
    min-height: 88px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}


.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;
    margin-left: auto;
}

.main-nav a {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.main-nav a:hover {
    color: var(--accent);
}

.mobile-menu-toggle {
    display: none;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    color: #FFFFFF;
    background: var(--accent);
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

/* =========================================
   BUTTONS
========================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 24px;
    color: #FFFFFF;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 750;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 119, 182, 0.2);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover {
    color: #FFFFFF;
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 119, 182, 0.28);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--border);
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--bg-light);
    color: var(--accent);
    border-color: var(--accent);
}

.btn-white {
    background: #FFFFFF;
    color: var(--primary);
    border-color: #FFFFFF;
}

.btn-white:hover {
    background: var(--bg-light);
    color: var(--accent-hover);
}

/* =========================================
   HERO SECTION
========================================= */


/* ============================================
   PREMIUM HERO — WATER DAMAGE RESTORATION
============================================ */

.hero-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 76px 0 82px;
    background:
        radial-gradient(ellipse at 88% 15%,
            rgba(132, 203, 237, 0.20), transparent 36%),
        radial-gradient(ellipse at 4% 88%,
            rgba(221, 240, 250, 0.48), transparent 34%),
        linear-gradient(135deg, #f2f8fc 0%, #f8fbfd 52%, #edf6fb 100%);
}

/* Subtle decorative background shape */

.hero-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -155px;
    right: -125px;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(67, 150, 194, 0.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(67, 150, 194, 0.035),
        0 0 0 75px rgba(67, 150, 194, 0.025);
    pointer-events: none;
}

.hero-grid {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
    gap: clamp(36px, 5vw, 68px);
}

/* Left content */

.hero-content {
    min-width: 0;
    animation: heroContentEnter .75s ease-out both;
}

.hero-content .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    padding: 9px 13px;
    border: 1px solid #d4e8f4;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.72);
    color: #176d9e;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 1.15px;
    line-height: 1.4;
}

.hero-content .eyebrow i {
    font-size: 14px;
}

.hero-content h1 {
    max-width: 620px;
    margin: 0;
    color: #16334c;
    font-size: clamp(36px, 3.65vw, 48px);
    font-weight: 750;
    line-height: 1.13;
    letter-spacing: -1.65px;
    text-wrap: balance;
}

.hero-content h1 span {
    display: block;
    margin-top: 8px;
    color: #167cb5;
    font-weight: 700;
}

.hero-content .hero-description {
    max-width: 535px;
    margin: 21px 0 0;
    color: #5d7183;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;
}

/* Buttons */

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 27px 0 25px;
}

.hero-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 13px 19px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    transition:
        transform .28s ease,
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.hero-actions .btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #167eb8, #11699f);
    box-shadow: 0 7px 18px rgba(19, 112, 168, .19);
}

.hero-actions .btn-primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #116da5, #0b5688);
    box-shadow: 0 11px 25px rgba(19, 112, 168, .25);
}

.hero-actions .btn-primary i {
    font-size: 12px;
    transition: transform .25s ease;
}

.hero-actions .btn-primary:hover i {
    transform: translateX(3px);
}

.hero-actions .btn-outline {
    color: #176b9b;
    border-color: #c9deeb;
    background: rgba(255, 255, 255, .75);
}

.hero-actions .btn-outline:hover {
    transform: translateY(-2px);
    border-color: #8fc5e4;
    background: #fff;
    box-shadow: 0 7px 18px rgba(24, 75, 107, .07);
}

/* Compact service highlights */

.hero-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    max-width: 560px;
    padding-top: 21px;
    border-top: 1px solid #dce8f0;
    color: #405e74;
    font-size: 13px;
    font-weight: 550;
}

.hero-highlights span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1.5;
}

.hero-highlights i {
    color: #1688b7;
    font-size: 13px;
}

/* ============================================
   HERO IMAGE — EDITORIAL CARD
============================================ */

.hero-visual {
    position: relative;
    min-width: 0;
    padding: 0 0 22px 12px;
    animation: heroImageEnter .85s .12s ease-out both;
}

.hero-visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -15px;
    right: -12px;
    width: 72%;
    height: 72%;
    border: 1px solid rgba(38, 132, 183, .18);
    border-radius: 24px;
    pointer-events: none;
}

.hero-visual img {
    display: block;
    width: 100%;
    height: clamp(350px, 37vw, 450px);
    object-fit: cover;
    object-position: center;
    border: 5px solid rgba(255, 255, 255, .9);
    border-radius: 22px;
    background: #e1edf4;
    box-shadow:
        0 24px 55px rgba(28, 65, 91, .13),
        0 4px 12px rgba(28, 65, 91, .05);
    transition:
        transform .55s ease,
        box-shadow .55s ease;
}

.hero-visual:hover img {
    transform: translateY(-3px);
    box-shadow:
        0 30px 65px rgba(28, 65, 91, .17),
        0 5px 14px rgba(28, 65, 91, .07);
}

/* Floating information card */

.image-note {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 24px);
    padding: 15px 18px;
    border: 1px solid rgba(222, 234, 242, .95);
    border-radius: 14px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 14px 35px rgba(25, 60, 85, .12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: noteEnter .7s .65s ease-out both;
}

.note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border: 1px solid #d5eaf5;
    border-radius: 12px;
    background: #eaf6fc;
    color: #1479ac;
    font-size: 18px;
}

.image-note strong {
    display: block;
    color: #193a54;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.5;
}

.image-note small {
    display: block;
    margin-top: 3px;
    color: #718393;
    font-size: 11px;
    line-height: 1.5;
}

/* ============================================
   PREMIUM TRUST STRIP
============================================ */

.trust-strip {
    position: relative;
    padding: 25px 0;
    background: #fff;
    border-top: 1px solid #e6eef4;
    border-bottom: 1px solid #e6eef4;
}

.trust-grid {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 5px 22px;
    border-right: 1px solid #e8eff4;
}

.trust-item:first-child {
    padding-left: 0;
}

.trust-item:last-child {
    padding-right: 0;
    border-right: 0;
}

.trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid #e1edf5;
    border-radius: 12px;
    background: #f1f8fc;
    color: #1978a9;
    font-size: 17px;
    transition:
        transform .3s ease,
        background .3s ease;
}

.trust-item:hover .trust-icon {
    transform: translateY(-2px);
    background: #e5f4fc;
}

.trust-item strong {
    display: block;
    color: #203e56;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.trust-item p {
    margin: 3px 0 0;
    color: #748696;
    font-size: 12px;
    line-height: 1.55;
}

/* ============================================
   ENTRANCE ANIMATIONS
============================================ */

@keyframes heroContentEnter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroImageEnter {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes noteEnter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   TABLET RESPONSIVENESS
============================================ */

@media (max-width: 1024px) {
    .hero-section {
        padding: 62px 0 70px;
    }

    .hero-grid {
        gap: 35px;
    }

    .hero-content h1 {
        font-size: clamp(34px, 4.1vw, 43px);
        letter-spacing: -1.2px;
    }

    .hero-visual img {
        height: 380px;
    }

    .trust-item {
        padding: 5px 12px;
        gap: 9px;
    }

    .trust-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .trust-item strong {
        font-size: 12px;
    }

    .trust-item p {
        font-size: 11px;
    }
}

/* ============================================
   MOBILE RESPONSIVENESS
============================================ */

@media (max-width: 760px) {
    .hero-section {
        padding: 46px 0 56px;
    }

    .hero-grid {
        width: min(100% - 36px, 560px);
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    .hero-content .eyebrow {
        margin-bottom: 17px;
        padding: 8px 11px;
        font-size: 10px;
        letter-spacing: .9px;
    }

    .hero-content h1 {
        max-width: 570px;
        font-size: clamp(32px, 7vw, 42px);
        line-height: 1.16;
        letter-spacing: -1.1px;
    }

    .hero-content h1 span {
        margin-top: 5px;
    }

    .hero-content .hero-description {
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.8;
    }

    .hero-actions {
        gap: 10px;
        margin: 22px 0;
    }

    .hero-actions .btn {
        min-height: 45px;
        padding: 12px 14px;
        font-size: 13px;
    }

    .hero-highlights {
        gap: 11px 15px;
        padding-top: 18px;
        font-size: 12px;
    }

    .hero-visual {
        padding: 0 0 18px 8px;
    }

    .hero-visual::before {
        top: -9px;
        right: -5px;
        border-radius: 19px;
    }

    .hero-visual img {
        height: clamp(250px, 68vw, 365px);
        border-width: 4px;
        border-radius: 18px;
    }

    .image-note {
        left: 0;
        max-width: calc(100% - 12px);
        gap: 10px;
        padding: 12px 14px;
        border-radius: 12px;
    }

    .note-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .image-note strong {
        font-size: 12px;
    }

    .image-note small {
        font-size: 10px;
    }

    .trust-strip {
        padding: 20px 0;
    }

    .trust-grid {
        width: calc(100% - 36px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 18px;
    }

    .trust-item {
        padding: 5px 10px;
        border-right: 0;
    }

    .trust-item:nth-child(odd) {
        padding-left: 0;
        border-right: 1px solid #e8eff4;
    }

    .trust-item:nth-child(even) {
        padding-right: 0;
    }

    .trust-item strong {
        font-size: 12px;
    }

    .trust-item p {
        font-size: 11px;
    }
}

/* Smaller phones */

@media (max-width: 380px) {
    .hero-grid {
        width: calc(100% - 28px);
    }

    .hero-content h1 {
        font-size: 30px;
        letter-spacing: -.8px;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-highlights {
        gap: 10px;
    }

    .trust-grid {
        width: calc(100% - 28px);
    }

    .trust-item {
        gap: 7px;
    }

    .trust-icon {
        flex-basis: 33px;
        width: 33px;
        height: 33px;
        font-size: 14px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .hero-content,
    .hero-visual,
    .image-note {
        animation: none !important;
    }

    .hero-visual img,
    .hero-actions .btn,
    .hero-actions .btn-primary i,
    .trust-icon {
        transition: none !important;
    }
}


/* =========================================
   INTRO / ABOUT SECTION
========================================= */

.intro-section {
    background: #FFFFFF;
}

.intro-grid {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    align-items: center;
    gap: 60px;
}

.intro-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.check-list {
    margin: 20px 0 24px;
    padding: 0;
    list-style: none;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--primary);
}

.check-list i {
    color: var(--accent);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 750;
    color: var(--accent);
}

.text-link:hover {
    color: var(--accent-hover);
}


/* ==========================================
   PREMIUM WHY CHOOSE US + SERVICES CAROUSEL
========================================== */

/* ==========================================
   WHY CHOOSE US — PREMIUM RESTORATION DESIGN
========================================== */

.why-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 88px 0 94px;
    background:
        radial-gradient(
            ellipse at 8% 12%,
            rgba(89, 195, 230, 0.13),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 94% 85%,
            rgba(33, 117, 190, 0.09),
            transparent 32%
        ),
        linear-gradient(135deg, #f1f8fc 0%, #f8fbfe 48%, #edf6fb 100%);
}

/* Subtle decorative background circles */
.why-section::before,
.why-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}

.why-section::before {
    width: 300px;
    height: 300px;
    top: -155px;
    right: -70px;
    border: 45px solid rgba(36, 143, 201, 0.045);
}

.why-section::after {
    width: 230px;
    height: 230px;
    bottom: -135px;
    left: -75px;
    border: 35px solid rgba(20, 157, 177, 0.055);
}

/* Section heading */
.why-section .section-heading {
    position: relative;
    max-width: 760px;
    margin: 0 auto 45px;
}

.why-section .section-heading .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 9px 15px;
    border: 1px solid #cce9f5;
    border-radius: 50px;
    background: linear-gradient(135deg, #e3f6fc, #edf4ff);
    color: #0876a9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    line-height: 1.4;
}

.why-section .section-heading .eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #13a5b7;
    box-shadow: 0 0 0 4px rgba(19, 165, 183, 0.12);
}

.why-section .section-heading h2 {
    margin: 0 0 14px;
    color: #123651;
    font-size: clamp(30px, 3.2vw, 41px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.1px;
}

.why-section .section-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: #5d7386;
    font-size: 16px;
    line-height: 1.8;
}

/* Six-card grid */
.why-section .why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* Individual feature card */
.why-section .why-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 17px;
    min-width: 0;
    min-height: 150px;
    padding: 26px 23px;
    overflow: hidden;
    border: 1px solid #dceaf2;
    border-radius: 20px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(244, 250, 254, 0.97) 100%
    );
    box-shadow:
        0 5px 12px rgba(22, 66, 96, 0.035),
        0 14px 32px rgba(22, 66, 96, 0.045);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

/* Accent line along the top */
.why-section .why-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 3px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, #12a7b8, #2186d4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

/* Soft decorative glow */
.why-section .why-card::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -48px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(30, 151, 194, 0.045);
    transition:
        transform 0.4s ease,
        background 0.4s ease;
    pointer-events: none;
}

.why-section .why-card:hover {
    transform: translateY(-7px);
    border-color: #a6d9ed;
    background: linear-gradient(145deg, #ffffff, #effaff);
    box-shadow:
        0 12px 24px rgba(18, 77, 112, 0.07),
        0 22px 42px rgba(18, 77, 112, 0.09);
}

.why-section .why-card:hover::before {
    transform: scaleX(1);
}

.why-section .why-card:hover::after {
    transform: scale(1.4);
    background: rgba(30, 151, 194, 0.085);
}

/* Icon tile */
.why-section .feature-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 53px;
    width: 53px;
    height: 53px;
    border: 1px solid #d0eaf5;
    border-radius: 16px;
    background: linear-gradient(145deg, #e5f8fc, #e5efff);
    color: #087db0;
    font-size: 21px;
    box-shadow: 0 5px 12px rgba(18, 113, 157, 0.07);
    transition:
        transform 0.35s ease,
        color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.why-section .why-card:hover .feature-icon {
    transform: translateY(-3px) rotate(-4deg);
    border-color: transparent;
    background: linear-gradient(135deg, #087eb5, #14a6b6);
    color: #ffffff;
    box-shadow: 0 8px 17px rgba(8, 126, 181, 0.23);
}

/* Card content */
.why-section .why-card > div {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.why-section .why-card h3 {
    margin: 2px 0 9px;
    color: #173b55;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.45;
    letter-spacing: -0.2px;
    transition: color 0.3s ease;
}

.why-section .why-card:hover h3 {
    color: #087da9;
}

.why-section .why-card p {
    margin: 0;
    color: #62788a;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}

/* Tablet */
@media (max-width: 1024px) {
    .why-section {
        padding: 72px 0 78px;
    }

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

    .why-section .why-card {
        min-height: 145px;
        padding: 23px 21px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .why-section {
        padding: 58px 0 62px;
    }

    .why-section .section-heading {
        margin-bottom: 30px;
    }

    .why-section .section-heading .eyebrow {
        margin-bottom: 12px;
        padding: 8px 12px;
        font-size: 10px;
        letter-spacing: 1.3px;
    }

    .why-section .section-heading h2 {
        font-size: 30px;
        letter-spacing: -0.6px;
    }

    .why-section .section-heading p {
        font-size: 15px;
        line-height: 1.75;
    }

    .why-section .why-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .why-section .why-card {
        min-height: auto;
        gap: 15px;
        padding: 21px 19px;
        border-radius: 17px;
    }

    .why-section .feature-icon {
        flex-basis: 47px;
        width: 47px;
        height: 47px;
        border-radius: 14px;
        font-size: 19px;
    }

    .why-section .why-card h3 {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .why-section .why-card p {
        font-size: 14px;
        line-height: 1.7;
    }

    /* Keep touch interactions clean */
    .why-section .why-card:hover {
        transform: translateY(-2px);
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .why-section *,
    .why-section *::before,
    .why-section *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .why-section .why-card:hover {
        transform: none;
    }
}

/* Carousel wrapper */

.services-section .services-carousel {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    min-width: 0;
}

.services-section .services-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 22px;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 12px 3px 25px;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.services-section .services-grid::-webkit-scrollbar {
    display: none;
}

/* Three cards on desktop */

.services-section .service-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 44px) / 3);
    min-width: 0;
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
    border: 1px solid #e2eaf2;
    border-radius: 21px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(23, 59, 91, .065);
    transition:
        transform .4s cubic-bezier(.2, .8, .2, 1),
        box-shadow .4s ease,
        border-color .35s ease;
}

.services-section .service-card:hover {
    transform: translateY(-7px);
    border-color: #a9d8f5;
    box-shadow: 0 20px 42px rgba(20, 91, 139, .14);
}

.services-section .service-card > img {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 215px;
    object-fit: cover;
    background: #e5edf4;
    transition: transform .65s cubic-bezier(.2, .8, .2, 1);
}

.services-section .service-card:hover > img {
    transform: scale(1.055);
}

.services-section .service-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    padding: 23px 22px 25px;
}

.services-section .tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 50px;
    background: #eaf5ff;
    color: #1769a5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
}

.services-section .tag-badge.hazard {
    background: #fff1ed;
    color: #b84b32;
}

.services-section .service-body h3 {
    margin: 14px 0 10px;
    color: #163651;
    font-size: 20px;
    line-height: 1.4;
}

.services-section .service-body p {
    margin: 0 0 21px;
    color: #667b8e;
    font-size: 14px;
    line-height: 1.8;
}

.services-section .text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    color: #0879bd;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: gap .3s ease, color .3s ease;
}

.services-section .text-link:hover {
    gap: 15px;
    color: #075587;
}

/* Carousel navigation arrows */

.services-section .services-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    padding: 0;
    border: 1px solid #d8e6f1;
    border-radius: 50%;
    background: #ffffff;
    color: #0879bd;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(25, 63, 94, .08);
    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease,
        opacity .3s ease;
}

.services-section .services-arrow:hover:not(:disabled) {
    transform: scale(1.08);
    border-color: #0879bd;
    background: #0879bd;
    color: #ffffff;
}

.services-section .services-arrow:disabled {
    opacity: .35;
    cursor: not-allowed;
    box-shadow: none;
}

.services-section .services-arrow:focus-visible {
    outline: 3px solid #80c9f5;
    outline-offset: 4px;
}

/* Progress bar */

.services-section .services-progress {
    position: relative;
    width: 180px;
    height: 4px;
    margin: 7px auto 0;
    overflow: hidden;
    border-radius: 30px;
    background: #dce8f1;
}

.services-section .services-progress span {
    display: block;
    position: relative;
    width: 25%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0879bd, #53b5ed);
    transition: width .2s ease, transform .2s ease;
}

.services-section .services-hint {
    margin: 15px 0 0;
    color: #788b9b;
    font-size: 12px;
    text-align: center;
}

.services-section .services-hint i {
    margin-right: 5px;
    color: #0879bd;
}

/* Entrance animation */

@keyframes premiumCardReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.why-section .why-card {
    animation: premiumCardReveal .65s both;
}

.why-section .why-card:nth-child(2) {
    animation-delay: .06s;
}

.why-section .why-card:nth-child(3) {
    animation-delay: .12s;
}

.why-section .why-card:nth-child(4) {
    animation-delay: .18s;
}

.why-section .why-card:nth-child(5) {
    animation-delay: .24s;
}

.why-section .why-card:nth-child(6) {
    animation-delay: .30s;
}

/* Tablet */

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

    .services-section .service-card {
        flex-basis: calc((100% - 22px) / 2);
    }

    .services-section .services-carousel {
        gap: 10px;
    }

    .services-section .services-arrow {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
    }
}

/* Mobile */

@media (max-width: 600px) {
    .why-section {
        padding: 52px 0;
    }

    .services-section {
        padding: 55px 0 48px;
    }

    .why-section .section-heading,
    .services-section .section-heading {
        margin-bottom: 25px;
    }

    .why-section .section-heading h2,
    .services-section .section-heading h2 {
        font-size: 30px;
        letter-spacing: -.7px;
    }

    .why-section .section-heading p,
    .services-section .section-heading p {
        font-size: 15px;
        line-height: 1.7;
    }

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

    .why-section .why-card {
        padding: 17px;
        gap: 14px;
    }

    .why-section .feature-icon {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
        font-size: 17px;
    }

    .why-section .why-card h3 {
        font-size: 16px;
    }

    .why-section .why-card p {
        font-size: 14px;
    }

    .services-section .services-carousel {
        gap: 7px;
    }

    .services-section .services-grid {
        gap: 15px;
        padding: 8px 2px 20px;
    }

    .services-section .service-card {
        flex-basis: 100%;
        border-radius: 18px;
    }

    .services-section .service-card > img {
        height: 205px;
    }

    .services-section .service-body {
        padding: 21px 19px 23px;
    }

    .services-section .service-body h3 {
        font-size: 19px;
    }

    .services-section .service-body p {
        font-size: 14px;
    }

    .services-section .services-arrow {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        font-size: 11px;
    }

    .services-section .services-progress {
        width: 145px;
    }
}

/* Accessibility: respect reduced motion */

@media (prefers-reduced-motion: reduce) {
    .why-section .why-card,
    .services-section .service-card,
    .services-section .service-card > img,
    .services-section .services-arrow,
    .services-section .services-grid {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================
   RESTORATION PROCESS
========================================= */

/* ==========================================
   PREMIUM PROCESS SECTION
   Elegant Restoration Timeline
========================================== */

.process-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 90px 0 100px;
    background:
        radial-gradient(
            circle at 0% 10%,
            rgba(47, 164, 203, 0.11),
            transparent 32%
        ),
        radial-gradient(
            circle at 100% 90%,
            rgba(41, 108, 190, 0.09),
            transparent 30%
        ),
        linear-gradient(140deg, #edf6fb 0%, #f8fbfe 52%, #eff7fc 100%);
}

/* Decorative background elements */
.process-section::before,
.process-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}

.process-section::before {
    width: 280px;
    height: 280px;
    top: -170px;
    right: 7%;
    border: 42px solid rgba(27, 130, 185, 0.045);
}

.process-section::after {
    width: 220px;
    height: 220px;
    bottom: -145px;
    left: 5%;
    border: 34px solid rgba(17, 164, 177, 0.055);
}

/* Section heading */
.process-section .section-heading {
    max-width: 740px;
    margin: 0 auto 58px;
}

.process-section .section-heading .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 9px 15px;
    border: 1px solid #cce7f2;
    border-radius: 50px;
    background: linear-gradient(135deg, #e2f5fb, #eaf1ff);
    color: #0879a8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.process-section .section-heading .eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #11a4b4;
    box-shadow: 0 0 0 4px rgba(17, 164, 180, 0.12);
}

.process-section .section-heading h2 {
    margin: 0 0 14px;
    color: #123650;
    font-size: clamp(31px, 3.4vw, 43px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.1px;
}

.process-section .section-heading p {
    max-width: 630px;
    margin: 0 auto;
    color: #62798b;
    font-size: 16px;
    line-height: 1.8;
}

/* Six-step layout */
.process-section .process-grid {
    position: relative;
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

/* Connecting line behind the cards */
.process-section .process-grid::before {
    content: "";
    position: absolute;
    top: 49px;
    left: 16.66%;
    right: 16.66%;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(16, 153, 183, 0.15),
        rgba(31, 119, 194, 0.45),
        rgba(16, 153, 183, 0.15)
    );
    pointer-events: none;
}

/* Individual process card */
.process-section .process-card {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 238px;
    padding: 27px 27px 30px;
    overflow: hidden;
    border: 1px solid #dbe9f2;
    border-radius: 21px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.98),
        rgba(245, 250, 254, 0.98)
    );
    box-shadow:
        0 5px 14px rgba(24, 64, 92, 0.035),
        0 15px 35px rgba(24, 64, 92, 0.045);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

/* Fine accent line */
.process-section .process-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25px;
    right: 25px;
    height: 3px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, #12a6b6, #287ed0);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

/* Large translucent step number in the corner */
.process-section .process-card::after {
    content: attr(data-step);
    position: absolute;
    top: 14px;
    right: 18px;
    color: rgba(25, 112, 157, 0.055);
    font-size: 76px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -5px;
    pointer-events: none;
}

/* Number badge */
.process-section .process-number {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 25px;
    border: 1px solid #cce8f3;
    border-radius: 16px;
    background: linear-gradient(140deg, #e4f7fb, #e5efff);
    color: #087baa;
    font-size: 17px;
    font-weight: 850;
    box-shadow: 0 5px 13px rgba(16, 119, 164, 0.07);
    transition:
        color 0.35s ease,
        background 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

/* Step title */
.process-section .process-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 11px;
    color: #173b55;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.45;
    letter-spacing: -0.3px;
    transition: color 0.3s ease;
}

/* Step description */
.process-section .process-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #64798a;
    font-size: 14px;
    line-height: 1.85;
}

/* Premium hover interaction */
.process-section .process-card:hover {
    transform: translateY(-7px);
    border-color: #a7d8e9;
    background: linear-gradient(145deg, #ffffff, #effaff);
    box-shadow:
        0 12px 25px rgba(17, 76, 111, 0.07),
        0 24px 45px rgba(17, 76, 111, 0.09);
}

.process-section .process-card:hover::before {
    transform: scaleX(1);
}

.process-section .process-card:hover .process-number {
    transform: translateY(-3px);
    border-color: transparent;
    background: linear-gradient(135deg, #087eb5, #12a8b6);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(8, 126, 181, 0.23);
}

.process-section .process-card:hover h3 {
    color: #087da9;
}

/* Tablet */
@media (max-width: 1024px) {
    .process-section {
        padding: 75px 0 82px;
    }

    .process-section .section-heading {
        margin-bottom: 42px;
    }

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

    .process-section .process-grid::before {
        display: none;
    }

    .process-section .process-card {
        min-height: 220px;
        padding: 25px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .process-section {
        padding: 58px 0 65px;
    }

    .process-section .section-heading {
        margin-bottom: 32px;
    }

    .process-section .section-heading .eyebrow {
        padding: 8px 12px;
        font-size: 10px;
        letter-spacing: 1.3px;
    }

    .process-section .section-heading h2 {
        font-size: 30px;
        letter-spacing: -0.6px;
    }

    .process-section .section-heading p {
        font-size: 15px;
        line-height: 1.75;
    }

    .process-section .process-grid {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
    }

    .process-section .process-card {
        min-height: auto;
        padding: 23px 22px 25px;
        border-radius: 18px;
    }

    .process-section .process-card::after {
        top: 12px;
        right: 17px;
        font-size: 64px;
    }

    .process-section .process-number {
        width: 47px;
        height: 47px;
        margin-bottom: 20px;
        border-radius: 14px;
        font-size: 16px;
    }

    .process-section .process-card h3 {
        font-size: 17px;
    }

    .process-section .process-card p {
        font-size: 14px;
        line-height: 1.8;
    }

    .process-section .process-card:hover {
        transform: translateY(-2px);
    }
}

/* Accessibility: respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
    .process-section *,
    .process-section *::before,
    .process-section *::after {
        animation: none !important;
        transition: none !important;
    }

    .process-section .process-card:hover {
        transform: none;
    }
}


/* =========================================
   EMERGENCY CTA
========================================= */

.emergency-section {
    padding: 60px 24px;
    background: var(--primary);
}

.emergency-inner {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.emergency-section h2 {
    color: #FFFFFF;
}

.emergency-section p {
    max-width: 650px;
    margin-bottom: 0;
    color: #E2E8F0;
    font-size: 16px;
}

/* =========================================
   FAQ ACCORDION
========================================= */

.faq-section {
    background: #FFFFFF;
}

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

.faq-item {
    margin-bottom: 14px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    min-height: 64px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: var(--primary);
    background: #FFFFFF;
    font-size: 17px;
    font-weight: 750;
    cursor: pointer;
    border: none;
    text-align: left;
}

.faq-question:hover,
.faq-item.active .faq-question {
    background: var(--bg-light);
    color: var(--accent);
}

.faq-answer {
    display: none;
    padding: 0 22px 20px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.7;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-question i {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

/* =========================================
   CONTACT SECTION
========================================= */

.contact-section {
    background: var(--bg-light);
}

.contact-grid {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
    align-items: center;
    gap: 60px;
}

.contact-note {
    display: flex;
    gap: 14px;
    margin-top: 24px;
    padding: 18px;
    background: #FFFFFF;
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.contact-note i {
    color: var(--accent);
    font-size: 20px;
    margin-top: 2px;
}

.contact-note p {
    margin: 0;
    font-size: 14px;
}

.contact-card {
    padding: 32px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    text-align: center;
}

.contact-card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary);
    color: var(--accent);
    border-radius: 16px;
    font-size: 24px;
}

.contact-card h3 {
    margin-bottom: 10px;
    font-size: 22px;
}

.contact-card p {
    font-size: 15px;
}

.contact-card small {
    display: block;
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 13px;
}

/* =========================================
   FOOTER
========================================= */

.site-footer {
    padding: 60px 0 0;
    background: #111827;
    color: #9CA3AF;
}

.footer-grid {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    padding-bottom: 40px;
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.9fr 1fr;
    gap: 40px;
}

.footer-brand .brand {
    color: #FFFFFF;
    margin-bottom: 16px;
}

.footer-brand .brand-icon {
    background: rgba(0, 119, 182, 0.15);
}

.footer-brand .brand-copy strong {
    color: #FFFFFF;
}

.footer-column h3 {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 750;
    margin-bottom: 18px;
}

.footer-column p {
    color: #9CA3AF;
    font-size: 14px;
}

.footer-column a {
    display: block;
    color: #9CA3AF;
    font-size: 14px;
    margin-bottom: 10px;
}

.footer-column a:hover {
    color: #FFFFFF;
}

.footer-contact-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 16px !important;
    margin-top: 4px;
}

.footer-bottom {
    min-height: 64px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0B0F19;
    border-top: 1px solid #1F2937;
    font-size: 13px;
}

.footer-bottom p {
    margin: 0;
    color: #9CA3AF;
}

.footer-bottom a {
    color: #9CA3AF;
}

.footer-bottom a:hover {
    color: #FFFFFF;
}

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

@media (max-width: 1024px) {
    .trust-grid,
    .why-grid,
    .services-grid,
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .nav-container {
        flex-wrap: wrap;
        min-height: 72px;
        padding: 10px 0;
    }
    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background: var(--secondary);
        color: var(--primary);
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: 20px;
        cursor: pointer;
    }
    .main-nav {
        order: 3;
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 15px 0 10px;
        border-top: 1px solid var(--border);
        margin-top: 10px;
    }
    .main-nav.open {
        display: flex;
    }
    .hero-grid,
    .intro-grid,
    .contact-grid,
    .trust-grid,
    .why-grid,
    .services-grid,
    .process-grid,
    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .hero-visual img,
    .intro-image img {
        height: 300px;
    }
    .image-note {
        position: relative;
        bottom: 0;
        left: 0;
        margin-top: 15px;
    }
    .emergency-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* ==========================================================
   PREMIUM EDITORIAL REDESIGN — WATER RESTORATION INDIANAPOLIS
   Keeps your existing HTML and class names.
   Paste this as the complete stylesheet.
========================================================== */

:root {
    --primary: #142b3b;
    --accent: #087eaa;
    --accent-hover: #075d80;
    --bg-light: #f4f8f8;
    --secondary: #e5f2f5;
    --text-main: #233746;
    --text-muted: #536572;
    --border: #dce6e9;
    --white: #ffffff;
    --radius: 18px;
    --shadow: 0 14px 36px rgba(20, 43, 59, 0.07);
    --shadow-hover: 0 24px 55px rgba(20, 43, 59, 0.14);
    --container-width: 1200px;
    --section-space: clamp(72px, 8vw, 112px);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow-x: clip;
    color: var(--text-main);
    background: var(--white);
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a {
    color: var(--accent);
    text-decoration: none;
    transition: color .25s ease, background-color .25s ease,
                border-color .25s ease, transform .3s ease, box-shadow .3s ease;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(8, 126, 170, .45);
    outline-offset: 4px;
}

h1, h2, h3, h4 {
    margin-top: 0;
    color: var(--primary);
    font-weight: 750;
    line-height: 1.13;
    letter-spacing: -.04em;
    text-wrap: balance;
}

h1 {
    max-width: 760px;
    margin-bottom: 24px;
    font-size: clamp(2.65rem, 5.2vw, 5rem);
    line-height: 1.04;
    letter-spacing: -.06em;
}

h2 {
    margin-bottom: 20px;
    font-size: clamp(2rem, 3.5vw, 3.35rem);
    line-height: 1.1;
    letter-spacing: -.05em;
}

h3 {
    margin-bottom: 12px;
    font-size: clamp(1.12rem, 1.4vw, 1.35rem);
    line-height: 1.3;
    letter-spacing: -.025em;
}

p {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.8;
}

section {
    position: relative;
    padding: var(--section-space) 0;
    isolation: isolate;
}

.container,
.hero-grid,
.intro-grid,
.trust-grid,
.why-grid,
.services-grid,
.process-grid,
.contact-grid,
.footer-grid {
    width: min(var(--container-width), calc(100% - 56px));
    margin-right: auto;
    margin-left: auto;
}

::selection {
    color: #fff;
    background: var(--accent);
}

/* HEADER */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .91);
    border-bottom: 1px solid rgba(220, 230, 233, .85);
    box-shadow: 0 5px 24px rgba(20, 43, 59, .035);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.nav-container {
    width: min(var(--container-width), calc(100% - 56px));
    min-height: 88px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(18px, 2.2vw, 34px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    color: var(--primary);
}

.brand-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    color: #fff;
    background: linear-gradient(145deg, #0b8db8, #075b83);
    border-radius: 15px 15px 15px 5px;
    box-shadow: 0 8px 20px rgba(8, 126, 170, .22);
    font-size: 21px;
    transition: transform .35s ease, border-radius .35s ease;
}

.brand:hover .brand-icon {
    transform: rotate(-5deg) translateY(-2px);
    border-radius: 15px;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.brand-copy strong {
    color: var(--primary);
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 800;
    letter-spacing: -.045em;
}

.brand-copy span {
    color: var(--accent);
}

.brand-copy small {
    margin-top: 5px;
    color: #657985;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.45px;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(16px, 2vw, 30px);
    margin-left: auto;
}

.main-nav a {
    position: relative;
    padding: 8px 0;
    color: #344957;
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
}

.main-nav a::after {
    position: absolute;
    right: 0;
    bottom: 1px;
    left: 0;
    height: 2px;
    content: "";
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
    color: var(--accent);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

.mobile-menu-toggle {
    display: none;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 47px;
    padding: 12px 18px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
    box-shadow: none;
}

.header-cta:hover {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* BUTTONS */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 54px;
    padding: 14px 24px;
    overflow: hidden;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 9px 22px rgba(8, 126, 170, .18);
    cursor: pointer;
    transition: background .3s ease, color .3s ease, transform .3s ease,
                box-shadow .3s ease, border-color .3s ease;
}

.btn:hover {
    color: #fff;
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(8, 126, 170, .24);
}

.btn i,
.text-link i {
    transition: transform .3s ease;
}

.btn:hover i.fa-arrow-right,
.text-link:hover i.fa-arrow-right {
    transform: translateX(4px);
}

.btn-outline {
    color: var(--primary);
    background: rgba(255, 255, 255, .7);
    border-color: #cbd9df;
    box-shadow: none;
}

.btn-outline:hover {
    color: var(--accent);
    background: #fff;
    border-color: var(--accent);
    box-shadow: 0 10px 25px rgba(20, 43, 59, .08);
}

.btn-white {
    color: var(--primary);
    background: #fff;
    border-color: #fff;
    box-shadow: none;
}

.btn-white:hover {
    color: #fff;
    background: transparent;
    border-color: rgba(255,255,255,.7);
}

/* HERO — editorial split layout */
.hero-section {
    padding: clamp(66px, 8vw, 112px) 0 clamp(76px, 9vw, 124px);
    background:
        radial-gradient(ellipse at 88% 12%, rgb(69 91 96 / 73%), #49465030 38%), linear-gradient(284deg, #f8fbfb 0%, #f1f7f8 54%, #fff 100%);}

.hero-section::before {
    position: absolute;
    top: 12%;
    left: -110px;
    z-index: -1;
    width: 260px;
    height: 260px;
    content: "";
    border: 1px solid rgba(8, 126, 170, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(8, 126, 170, .025),
                0 0 0 70px rgba(8, 126, 170, .02);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    align-items: center;
    gap: clamp(42px, 6.4vw, 88px);
}

.hero-content {
    position: relative;
    z-index: 2;
    animation: rise-in .85s both;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.9px;
    line-height: 1.5;
    text-transform: uppercase;
}

.eyebrow i {
    font-size: 14px;
}

.hero-content h1 span {
    display: block;
    margin-top: 8px;
    color: var(--accent);
}

.hero-content p,
.hero-content .hero-description {
    max-width: 590px;
    margin-bottom: 0;
    color: #526773;
    font-size: clamp(16px, 1.35vw, 18px);
    line-height: 1.85;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin: 30px 0 30px;
}

.hero-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    color: #344b59;
    font-size: 13px;
    font-weight: 650;
}

.hero-highlights span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hero-highlights i {
    color: #1387a8;
    font-size: 14px;
}

.hero-visual {
    position: relative;
    min-width: 0;
    padding: 0 0 28px 24px;
    animation: image-arrive 1s .12s both;
}

.hero-visual::before {
    position: absolute;
    top: -20px;
    right: -16px;
    z-index: -1;
    width: 72%;
    height: 72%;
    content: "";
    border: 1px solid rgba(8, 126, 170, .23);
    border-radius: 28px;
}

.hero-visual::after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 62%;
    height: 56%;
    content: "";
    background: linear-gradient(135deg, #d7edf1, #edf7f7);
    border-radius: 24px;
}

.hero-visual img {
    width: 100%;
    height: clamp(380px, 43vw, 565px);
    object-fit: cover;
    object-position: center;
    border-radius: 24px 24px 24px 70px;
    box-shadow: 0 28px 70px rgba(20, 43, 59, .17);
    transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease;
}

.hero-visual:hover img {
    transform: scale(1.015);
    filter: saturate(1.06);
}

.image-note {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: calc(100% - 28px);
    padding: 17px 22px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(220, 230, 233, .9);
    border-radius: 17px;
    box-shadow: 0 18px 44px rgba(20, 43, 59, .13);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.note-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    flex: 0 0 43px;
    color: #fff;
    background: var(--accent);
    border-radius: 13px;
    font-size: 18px;
}

.image-note strong {
    display: block;
    color: var(--primary);
    font-size: 13px;
    line-height: 1.4;
}

.image-note small {
    display: block;
    margin-top: 3px;
    color: #627580;
    font-size: 11px;
    line-height: 1.4;
}

/* TRUST STRIP */
.trust-strip {
    padding: 27px 0;
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 5px 0;
}

.trust-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    color: var(--accent);
    background: var(--secondary);
    border-radius: 15px;
    font-size: 18px;
    transition: color .3s ease, background .3s ease, transform .3s ease;
}

.trust-item:hover .trust-icon {
    color: #fff;
    background: var(--accent);
    transform: translateY(-3px) rotate(-3deg);
}

.trust-item strong {
    display: block;
    color: var(--primary);
    font-size: 13px;
    line-height: 1.45;
}

.trust-item p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.5;
}

/* INTRO / ABOUT */
.intro-section {
    background: #fff;
}

.intro-grid {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(42px, 7vw, 95px);
}

.intro-image {
    position: relative;
    padding: 0 0 20px 20px;
}

.intro-image::before {
    position: absolute;
    top: -16px;
    left: 0;
    z-index: -1;
    width: 60%;
    height: 60%;
    content: "";
    background: var(--secondary);
    border-radius: 22px;
}

.intro-image img {
    width: 100%;
    height: clamp(340px, 37vw, 490px);
    object-fit: cover;
    border-radius: 20px 20px 65px 20px;
    box-shadow: var(--shadow);
    transition: transform .65s ease;
}

.intro-image:hover img {
    transform: translateY(-5px);
}

.intro-content h2 {
    max-width: 560px;
}

.intro-content > p {
    max-width: 620px;
}

.check-list {
    display: grid;
    gap: 11px;
    margin: 25px 0 28px;
    padding: 0;
    list-style: none;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #344b59;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.65;
}

.check-list i {
    margin-top: 4px;
    color: var(--accent);
    flex: 0 0 auto;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 800;
}

.text-link:hover {
    color: var(--accent-hover);
}

/* SECTION HEADINGS */
.section-heading {
    max-width: 800px;
    margin: 0 auto;
}

.section-heading.text-center {
    text-align: center;
}

.section-heading .eyebrow {
    justify-content: center;
}

.section-heading h2 {
    margin-right: auto;
    margin-left: auto;
}

.section-heading > p {
    max-width: 680px;
    margin: 0 auto;
    font-size: 16px;
}

.why-section,
.process-section {
    background:
        radial-gradient(ellipse at 5% 5%, rgba(207, 234, 239, .35), transparent 35%),
        #f3f8f9;
}

/* WHY CHOOSE US */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 48px;
}

.why-card {
    position: relative;
    min-height: 220px;
    padding: clamp(24px, 2.5vw, 34px);
    overflow: hidden;
    background: rgba(255,255,255,.92);
    border: 1px solid #e0e9ec;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(20, 43, 59, .035);
    transition: transform .4s cubic-bezier(.2,.7,.2,1),
                box-shadow .4s ease, border-color .4s ease;
}

.why-card::after {
    position: absolute;
    right: -34px;
    bottom: -42px;
    width: 110px;
    height: 110px;
    content: "";
    border: 1px solid rgba(8, 126, 170, .11);
    border-radius: 50%;
    transition: transform .5s ease;
}

.why-card:hover {
    transform: translateY(-7px);
    border-color: #c5e0e7;
    box-shadow: var(--shadow-hover);
}

.why-card:hover::after {
    transform: scale(1.5);
}

.feature-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    color: var(--accent);
    background: #e7f3f5;
    border-radius: 16px;
    font-size: 20px;
    transition: color .3s ease, background .3s ease, transform .3s ease;
}

.why-card:hover .feature-icon {
    color: #fff;
    background: var(--accent);
    transform: translateY(-3px);
}

.why-card h3 {
    margin-bottom: 10px;
    font-size: 18px;
}

.why-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
}

/* SERVICES */
.services-section {
    background: #fff;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 25px;
    margin-top: 48px;
}

.service-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e1e9ec;
    border-radius: 20px;
    box-shadow: 0 9px 28px rgba(20, 43, 59, .045);
    transition: transform .45s cubic-bezier(.2,.7,.2,1),
                box-shadow .45s ease, border-color .45s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: #c8e0e6;
    box-shadow: var(--shadow-hover);
}

.service-card img {
    width: 100%;
    height: 225px;
    object-fit: cover;
    background: #e8f0f2;
    transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}

.service-card:hover img {
    transform: scale(1.045);
    filter: saturate(1.08);
}

.service-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(22px, 2.4vw, 30px);
    background: #fff;
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 11px;
    margin-bottom: 14px;
    color: #08759a;
    background: #e7f4f6;
    border: 1px solid #d9ecef;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    line-height: 1.5;
    text-transform: uppercase;
}

.tag-badge.hazard {
    color: #a33333;
    background: #fff0ed;
    border-color: #f7d7d1;
}

.service-body h3 {
    margin-bottom: 12px;
    font-size: 20px;
}

.service-body p {
    flex: 1;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
}

.service-body .text-link {
    margin-top: auto;
}

/* PROCESS */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 48px;
}

.process-card {
    position: relative;
    min-height: 225px;
    padding: 30px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e9ec;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(20, 43, 59, .035);
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}

.process-card:hover {
    transform: translateY(-6px);
    border-color: #c6e0e7;
    box-shadow: var(--shadow-hover);
}

.process-number {
    position: relative;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 23px;
    color: #fff;
    background: linear-gradient(145deg, #0c91b6, #075b83);
    border-radius: 17px 17px 17px 5px;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(8, 126, 170, .18);
    transition: transform .35s ease, border-radius .35s ease;
}

.process-card:hover .process-number {
    transform: rotate(-4deg);
    border-radius: 17px;
}

.process-card h3 {
    font-size: 19px;
}

.process-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
}

/* EMERGENCY CTA */
.emergency-section {
    padding: clamp(56px, 7vw, 82px) 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 10%, rgba(54, 157, 188, .3), transparent 28%),
        linear-gradient(115deg, #102b3c 0%, #17465d 100%);
}

.emergency-section::after {
    position: absolute;
    top: -115px;
    right: 8%;
    z-index: -1;
    width: 320px;
    height: 320px;
    content: "";
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255,255,255,.025),
                0 0 0 70px rgba(255,255,255,.02);
}

.emergency-inner {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.emergency-section .eyebrow {
    color: #8ed9e9;
}

.emergency-section h2 {
    max-width: 760px;
    margin-bottom: 14px;
    color: #fff;
}

.emergency-section p {
    max-width: 680px;
    margin: 0;
    color: #d5e5eb;
    font-size: 16px;
}

/* FAQ */
.faq-section {
    background: #fff;
}

.faq-container {
    width: min(860px, calc(100% - 56px));
    margin: 46px auto 0;
}

.faq-item {
    margin-bottom: 13px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dfe8eb;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(20, 43, 59, .025);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.faq-item:hover {
    border-color: #c6dfe6;
}

.faq-item.active {
    border-color: #b8dce5;
    box-shadow: 0 12px 30px rgba(20, 43, 59, .065);
}

.faq-question {
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 21px 25px;
    color: var(--primary);
    background: #fff;
    border: 0;
    font: inherit;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    transition: color .25s ease, background .25s ease;
}

.faq-question:hover,
.faq-item.active .faq-question {
    color: var(--accent);
    background: #f7fbfc;
}

.faq-question i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    color: var(--accent);
    background: #e8f4f6;
    border-radius: 50%;
    font-size: 12px;
    transition: transform .35s ease, color .35s ease, background .35s ease;
}

.faq-item.active .faq-question i {
    color: #fff;
    background: var(--accent);
    transform: rotate(180deg);
}

.faq-answer {
    display: none;
    padding: 0 25px 22px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.85;
}

.faq-item.active .faq-answer {
    display: block;
    animation: answer-in .3s ease both;
}

.faq-answer p {
    margin: 0;
    font-size: 15px;
}

/* CONTACT */
.contact-section {
    background:
        radial-gradient(ellipse at 90% 10%, rgba(207, 234, 239, .45), transparent 36%),
        #f3f8f9;
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, .72fr);
    align-items: center;
    gap: clamp(40px, 7vw, 90px);
}

.contact-content h2 {
    max-width: 620px;
}

.contact-content > p {
    max-width: 600px;
}

.contact-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 28px;
    padding: 20px;
    background: rgba(255,255,255,.85);
    border: 1px solid #e0e9ec;
    border-left: 4px solid var(--accent);
    border-radius: 13px;
}

.contact-note i {
    margin-top: 3px;
    color: var(--accent);
    font-size: 18px;
}

.contact-note p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
}

.contact-card {
    position: relative;
    padding: clamp(30px, 4vw, 44px);
    background: #fff;
    border: 1px solid #dfe8eb;
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(20, 43, 59, .09);
    text-align: center;
    transition: transform .4s ease, box-shadow .4s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.contact-card-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin: 0 auto 21px;
    color: #fff;
    background: linear-gradient(145deg, #0c91b6, #075b83);
    border-radius: 20px 20px 20px 7px;
    font-size: 24px;
    box-shadow: 0 10px 24px rgba(8, 126, 170, .2);
}

.contact-card h3 {
    margin-bottom: 12px;
    font-size: 23px;
}

.contact-card p {
    margin-bottom: 24px;
    font-size: 14px;
}

.contact-card .btn {
    width: 100%;
}

.contact-card small {
    display: block;
    margin-top: 14px;
    color: #647782;
    font-size: 12px;
}

/* FOOTER */
.site-footer {
    padding: 65px 0 0;
    color: #c3d0d7;
    background: #102431;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.35fr .8fr .9fr 1fr;
    gap: clamp(26px, 4vw, 52px);
    padding-bottom: 45px;
}

.footer-brand .brand {
    margin-bottom: 20px;
}

.footer-brand .brand-icon {
    color: #fff;
    background: rgba(23, 151, 190, .2);
    box-shadow: none;
}

.footer-brand .brand-copy strong {
    color: #fff;
}

.footer-brand .brand-copy small {
    color: #a8c2ce;
}

.footer-brand > p {
    max-width: 330px;
    color: #b4c4cc;
    font-size: 14px;
    line-height: 1.85;
}

.footer-column h3 {
    margin-bottom: 20px;
    color: #fff;
    font-size: 15px;
    letter-spacing: -.01em;
}

.footer-column p {
    color: #b4c4cc;
    font-size: 14px;
}

.footer-column a {
    display: block;
    width: fit-content;
    margin-bottom: 11px;
    color: #b4c4cc;
    font-size: 13px;
    line-height: 1.65;
}

.footer-column a:hover {
    color: #fff;
    transform: translateX(3px);
}

.footer-contact-link {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 750;
}

.footer-contact-link i {
    color: #76d2e5;
}

.footer-bottom {
    min-height: 70px;
    padding: 18px max(28px, calc((100% - var(--container-width)) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #0b1b25;
    border-top: 1px solid rgba(255,255,255,.09);
    font-size: 12px;
}

.footer-bottom p {
    margin: 0;
    color: #a8bbc5;
    font-size: 12px;
}

.footer-bottom a {
    color: #c2d3dc;
    white-space: nowrap;
}

.footer-bottom a:hover {
    color: #fff;
}

/* MOTION — gentle, GPU-friendly, and reduced-motion aware */
@keyframes rise-in {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes image-arrive {
    from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes answer-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* RESPONSIVE */
@media (max-width: 1100px) {
    .nav-container {
        gap: 18px;
    }

    .main-nav {
        gap: 17px;
    }

    .brand-copy strong {
        font-size: 15px;
    }

    .brand-copy small {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .header-cta {
        padding-inline: 14px;
        font-size: 12px;
    }

    .hero-grid {
        gap: 42px;
    }

    .services-grid {
        gap: 20px;
    }

    .service-card img {
        height: 205px;
    }
}

@media (max-width: 900px) {
    :root {
        --section-space: 78px;
    }

    .nav-container {
        min-height: 78px;
    }

    .main-nav {
        gap: 14px;
    }

    .main-nav a {
        font-size: 13px;
    }

    .header-cta {
        min-height: 42px;
        padding: 10px 13px;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
        gap: 30px;
    }

    h1 {
        font-size: clamp(2.5rem, 5.3vw, 3.6rem);
    }

    .hero-visual img {
        height: 420px;
    }

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

    .why-grid,
    .services-grid,
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .intro-grid {
        gap: 42px;
    }
}

@media (max-width: 760px) {
    :root {
        --section-space: 68px;
    }

    .container,
    .hero-grid,
    .intro-grid,
    .trust-grid,
    .why-grid,
    .services-grid,
    .process-grid,
    .contact-grid,
    .footer-grid,
    .nav-container {
        width: min(100% - 36px, var(--container-width));
    }

    .site-header {
        position: sticky;
    }

    .nav-container {
        min-height: 74px;
        flex-wrap: wrap;
        gap: 12px;
        padding: 10px 0;
    }

    .brand-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 13px 13px 13px 5px;
        font-size: 18px;
    }

    .brand-copy strong {
        font-size: 14px;
    }

    .brand-copy small {
        font-size: 8px;
        letter-spacing: .85px;
    }

    .mobile-menu-toggle {
        width: 43px;
        height: 43px;
        display: inline-grid;
        place-items: center;
        margin-left: auto;
        color: var(--primary);
        background: #eef6f7;
        border: 1px solid #d8e7eb;
        border-radius: 13px;
        font-size: 18px;
        cursor: pointer;
        transition: color .25s ease, background .25s ease;
    }

    .mobile-menu-toggle:hover {
        color: #fff;
        background: var(--accent);
    }

    .header-cta {
        min-height: 42px;
        padding: 9px 12px;
        font-size: 12px;
    }

    .main-nav {
        order: 5;
        width: 100%;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 8px 0 4px;
        margin: 0;
        border-top: 1px solid var(--border);
    }

    .main-nav.open {
        display: flex;
        animation: rise-in .22s ease both;
    }

    .main-nav a {
        padding: 13px 7px;
        border-bottom: 1px solid #edf2f4;
        font-size: 14px;
    }

    .main-nav a::after {
        display: none;
    }

    .hero-section {
        padding: 60px 0 74px;
    }

    .hero-grid,
    .intro-grid,
    .contact-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 42px;
    }

    .hero-content {
        order: 1;
    }

    .hero-visual {
        order: 2;
        width: calc(100% - 8px);
        margin: 0 auto;
        padding-left: 12px;
    }

    h1 {
        max-width: 640px;
        font-size: clamp(2.45rem, 8.5vw, 4rem);
    }

    h2 {
        font-size: clamp(2rem, 7vw, 2.8rem);
    }

    .hero-content p,
    .hero-content .hero-description {
        font-size: 16px;
    }

    .hero-actions {
        margin: 25px 0;
    }

    .hero-highlights {
        gap: 11px 15px;
    }

    .hero-visual img {
        height: clamp(300px, 78vw, 440px);
        border-radius: 20px 20px 20px 52px;
    }

    .image-note {
        left: 0;
        bottom: -4px;
        max-width: calc(100% - 12px);
        padding: 13px 15px;
    }

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

    .trust-item {
        align-items: flex-start;
        gap: 10px;
    }

    .trust-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
        font-size: 16px;
    }

    .trust-item strong {
        font-size: 12px;
    }

    .trust-item p {
        font-size: 11px;
    }

    .intro-image {
        padding-left: 12px;
    }

    .intro-image img {
        height: clamp(280px, 72vw, 420px);
        border-radius: 18px 18px 48px 18px;
    }

    .why-grid,
    .services-grid,
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 34px;
    }

    .why-card,
    .process-card {
        min-height: 0;
        padding: 22px;
        border-radius: 17px;
    }

    .feature-icon {
        width: 45px;
        height: 45px;
        margin-bottom: 18px;
        border-radius: 13px;
        font-size: 18px;
    }

    .why-card h3,
    .process-card h3 {
        font-size: 16px;
    }

    .why-card p,
    .process-card p {
        font-size: 13px;
    }

    .services-grid {
        gap: 17px;
    }

    .service-card {
        border-radius: 17px;
    }

    .service-card img {
        height: 175px;
    }

    .service-body {
        padding: 19px;
    }

    .service-body h3 {
        font-size: 17px;
    }

    .service-body p {
        font-size: 13px;
    }

    .tag-badge {
        font-size: 9px;
    }

    .process-number {
        width: 45px;
        height: 45px;
        margin-bottom: 17px;
        border-radius: 14px 14px 14px 5px;
        font-size: 14px;
    }

    .emergency-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }

    .faq-container {
        width: min(100% - 36px, 860px);
        margin-top: 34px;
    }

    .faq-question {
        min-height: 66px;
        padding: 17px 18px;
        font-size: 14px;
    }

    .faq-answer {
        padding: 0 18px 19px;
        font-size: 14px;
    }

    .faq-answer p {
        font-size: 14px;
    }

    .contact-card {
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
    }

    .footer-grid {
        gap: 32px 24px;
    }

    .footer-bottom {
        padding: 20px 18px;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    :root {
        --section-space: 58px;
    }

    .container,
    .hero-grid,
    .intro-grid,
    .trust-grid,
    .why-grid,
    .services-grid,
    .process-grid,
    .contact-grid,
    .footer-grid,
    .nav-container {
        width: calc(100% - 32px);
    }

    .nav-container {
        gap: 9px;
    }

    .brand {
        gap: 8px;
    }

    .brand-copy strong {
        max-width: 178px;
        font-size: 12px;
    }

    .brand-copy small {
        font-size: 7px;
        letter-spacing: .7px;
    }

    .brand-icon {
        width: 37px;
        height: 37px;
        flex-basis: 37px;
        font-size: 16px;
    }

    .mobile-menu-toggle {
        width: 38px;
        height: 38px;
    }

    .header-cta {
        width: 100%;
        order: 4;
        min-height: 39px;
        margin-top: 2px;
    }

    .hero-section {
        padding-top: 46px;
    }

    .eyebrow {
        margin-bottom: 15px;
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    h1 {
        font-size: clamp(2.2rem, 10vw, 3.15rem);
    }

    h2 {
        font-size: clamp(1.9rem, 8.5vw, 2.45rem);
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-highlights {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
        font-size: 12px;
    }

    .hero-visual {
        padding-left: 7px;
    }

    .hero-visual::before {
        top: -10px;
        right: -7px;
    }

    .hero-visual img {
        height: 300px;
    }

    .image-note {
        gap: 10px;
        padding: 11px 12px;
    }

    .note-icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
        border-radius: 10px;
        font-size: 15px;
    }

    .image-note strong {
        font-size: 11px;
    }

    .image-note small {
        font-size: 10px;
    }

    .trust-grid {
        gap: 18px 10px;
    }

    .trust-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 14px;
    }

    .trust-item {
        gap: 8px;
    }

    .why-grid,
    .services-grid,
    .process-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
    }

    .why-card,
    .process-card {
        padding: 23px;
    }

    .service-card img {
        height: 215px;
    }

    .service-body {
        padding: 22px;
    }

    .service-body h3 {
        font-size: 19px;
    }

    .service-body p {
        font-size: 14px;
    }

    .process-card {
        padding: 24px;
    }

    .emergency-section {
        padding: 54px 16px;
    }

    .emergency-section .btn {
        width: 100%;
    }

    .faq-question {
        gap: 12px;
        padding: 16px;
        font-size: 13px;
    }

    .faq-question i {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .faq-answer {
        padding-right: 16px;
        padding-left: 16px;
    }

    .contact-card {
        padding: 28px 22px;
    }

    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .footer-brand > p {
        max-width: 100%;
    }
}

@media (hover: none) {
    .why-card:hover,
    .service-card:hover,
    .process-card:hover,
    .contact-card:hover {
        transform: none;
    }

    .service-card:hover img {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* =====================================================
   BALANCED LIGHT + DARK THEME
   Dark: hero, emergency CTA, footer
   Light: header, content sections, FAQ, contact
   Layout and responsive rules remain unchanged.
===================================================== */
:root {
    --primary: #182c36;
    --accent: #287b82;
    --accent-hover: #1d6268;
    --bg-light: #f4f5f1;
    --secondary: #e9efeb;
    --text-main: #293a42;
    --text-muted: #596970;
    --border: #dfe5e1;
    --white: #ffffff;
    --shadow: 0 10px 30px rgba(24, 44, 54, 0.07);
    --shadow-hover: 0 18px 40px rgba(24, 44, 54, 0.12);
}

body {
    color: #293a42;
    background: #ffffff;
}

/* Keep the header light and crisp */
.site-header {
    background: #ffffff;
    border-bottom-color: #e3e7e4;
    box-shadow: 0 4px 20px rgba(24, 44, 54, 0.045);
}
.site-header .brand,
.site-header .brand-copy strong,
.site-header .nav-links a,
.site-header .nav-menu a {
    color: #182c36;
}
.site-header a:hover,
.site-header .nav-links a:hover,
.site-header .nav-menu a:hover {
    color: #287b82;
}

/* Dark hero only — restrained teal highlights, not an all-blue look */
.hero-section {
    color: #e8eeeb;
    background:
        radial-gradient(ellipse at 86% 18%, rgba(69, 125, 127, 0.20), transparent 34%),
        linear-gradient(120deg, #172a32 0%, #20363d 58%, #17272e 100%);
}
.hero-section::before {
    border-color: rgba(188, 211, 205, 0.13);
    box-shadow: 0 0 0 35px rgba(188, 211, 205, 0.025),
                0 0 0 70px rgba(188, 211, 205, 0.018);
}
.hero-content .eyebrow {
    color: #b7d7d0;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(197, 220, 214, 0.22);
}
.hero-content h1,
.hero-content h1 span {
    color: #f5f7f4;
}
.hero-content h1 span {
    color: #a6cbc1;
}
.hero-content .hero-description {
    color: #d0d9d6;
}
.hero-highlights {
    color: #e0e7e4;
    border-top-color: rgba(226, 237, 232, 0.20);
}
.hero-highlights i {
    color: #9fc6bb;
}
.hero-actions .btn-primary {
    color: #14262d;
    background: #b4d2c8;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.16);
}
.hero-actions .btn-primary:hover {
    background: #c8dfd7;
}
.hero-actions .btn-outline {
    color: #f0f5f2;
    border-color: rgba(231, 241, 236, 0.38);
    background: rgba(255, 255, 255, 0.045);
}
.hero-actions .btn-outline:hover {
    color: #ffffff;
    border-color: #a6cbc1;
    background: rgba(255, 255, 255, 0.09);
}
.hero-visual::before {
    border-color: rgba(182, 214, 204, 0.26);
}

/* Content sections: soft off-white, with dark readable typography */
.intro-section,
.why-section,
.services-section,
.process-section,
.faq-section,
.contact-section {
    color: #293a42;
    background: #f7f7f3;
}
.intro-section {
    background: #ffffff;
}
.why-section,
.process-section {
    background: #f2f4f0;
}
.services-section,
.faq-section {
    background: #fbfbf8;
}
.contact-section {
    background: #f2f4f0;
}

/* Text on light backgrounds should stay dark, never pale blue */
.intro-section h1,
.intro-section h2,
.intro-section h3,
.why-section h1,
.why-section h2,
.why-section h3,
.services-section h1,
.services-section h2,
.services-section h3,
.process-section h1,
.process-section h2,
.process-section h3,
.faq-section h1,
.faq-section h2,
.faq-section h3,
.contact-section h1,
.contact-section h2,
.contact-section h3,
.section-heading h2 {
    color: #182c36;
}
.intro-section p,
.why-section p,
.services-section p,
.process-section p,
.faq-section p,
.contact-section p,
.section-heading > p {
    color: #596970;
}
.eyebrow,
.text-link,
.check-list i,
.why-section .feature-icon,
.process-section .process-number,
.faq-question i,
.contact-section .contact-card-icon {
    color: #287b82;
}

/* Cards stay white/soft neutral to create separation without blue panels */
.why-card,
.service-card,
.service-body,
.process-card,
.faq-item,
.faq-question,
.contact-card {
    background-color: #ffffff;
    border-color: #dfe5e1;
}
.why-card h3,
.service-body h3,
.process-card h3,
.faq-question,
.contact-card h3 {
    color: #182c36;
}
.why-card p,
.service-body p,
.process-card p,
.faq-answer,
.faq-answer p,
.contact-card p,
.contact-card small {
    color: #596970;
}
.feature-icon,
.tag-badge,
.process-number,
.faq-question i,
.contact-card-icon {
    background: #e8efeb;
    color: #287b82;
}
.why-card:hover,
.service-card:hover,
.process-card:hover,
.faq-item:hover,
.faq-item.active {
    border-color: #b9cec6;
}
.faq-question:hover,
.faq-item.active .faq-question {
    color: #1d6268;
    background: #f4f7f4;
}
.faq-item.active .faq-question i {
    color: #ffffff;
    background: #287b82;
}

/* Keep the emergency section before FAQ dark, as it already was */
.emergency-section {
    background:
        radial-gradient(circle at 90% 10%, rgba(92, 145, 137, 0.20), transparent 28%),
        linear-gradient(115deg, #172a32 0%, #20363d 100%);
}
.emergency-section .eyebrow {
    color: #b7d7d0;
}
.emergency-section h2 {
    color: #ffffff;
}
.emergency-section p {
    color: #d0d9d6;
}

/* Footer remains dark, with muted neutral text and restrained teal accents */
.site-footer {
    color: #c7d0cc;
    background: #172a32;
}
.footer-brand .brand,
.footer-brand .brand-copy strong,
.footer-column h3,
.footer-contact-link {
    color: #f5f7f4;
}
.footer-brand .brand-icon {
    color: #d7e7e0;
    background: rgba(180, 210, 200, 0.12);
}
.footer-brand .brand-copy small,
.footer-brand > p,
.footer-column p,
.footer-column a {
    color: #c1cbc7;
}
.footer-column a:hover,
.footer-bottom a:hover {
    color: #e2eee8;
}
.footer-contact-link i {
    color: #a6cbc1;
}
.footer-bottom {
    background: #112229;
    border-top-color: rgba(255, 255, 255, 0.10);
}
.footer-bottom p,
.footer-bottom a {
    color: #b9c5c0;
}

/* Keep form fields legible on light sections */
.contact-section input,
.contact-section select,
.contact-section textarea {
    color: #293a42;
    background: #ffffff;
    border-color: #d5dfda;
}
.contact-section input::placeholder,
.contact-section textarea::placeholder {
    color: #75827d;
}

/* Ensure dark hero/footer text does not inherit muted light-section colors */
.hero-section p,
.site-footer p {
    color: inherit;
}
.hero-section .hero-description { color: #d0d9d6; }
.site-footer .footer-brand > p,
.site-footer .footer-column p { color: #c1cbc7; }

/* =========================================================
   FINAL VISUAL POLISH — BALANCED LIGHT + DARK THEME
   Keeps existing HTML, section order, and layout intact.
   ========================================================= */

:root {
    --primary: #182c36;
    --accent: #587f73;
    --accent-hover: #41675c;
    --bg-light: #f5f5f0;
    --secondary: #e9efeb;
    --text-main: #293a42;
    --text-muted: #596970;
    --border: #dfe5e1;
    --white: #ffffff;
    --shadow: 0 8px 24px rgba(24, 44, 54, 0.065);
    --shadow-hover: 0 14px 32px rgba(24, 44, 54, 0.11);
}

html { scroll-behavior: smooth; }
body { font-size: 16px; line-height: 1.72; color: #293a42; }
p { font-size: 16px; line-height: 1.75; }

/* Consistent, accessible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid rgba(88, 127, 115, 0.48);
    outline-offset: 3px;
}

/* LIGHT HEADER — restrained and crisp */
.site-header {
    background: #fff !important;
    border-bottom: 1px solid #e2e6e2;
    box-shadow: 0 3px 18px rgba(24, 44, 54, 0.045);
}
.site-header .brand,
.site-header .brand-copy strong,
.site-header .nav-links a,
.site-header .nav-menu a,
.site-header .main-nav a {
    color: #182c36;
}
.site-header .brand-icon {
    background: #edf2ee;
    color: #587f73;
}
.site-header a:hover,
.site-header .nav-links a:hover,
.site-header .nav-menu a:hover,
.site-header .main-nav a:hover {
    color: #41675c;
}

/* DARK HERO — dark background, warm white text, muted sage accents */
.hero-section {
    background:
        radial-gradient(ellipse at 88% 16%, rgba(113, 153, 139, 0.16), transparent 34%),
        linear-gradient(118deg, #192b31 0%, #22383d 56%, #19292f 100%);
    color: #e8eeeb;
}
.hero-content h1,
.hero-content h1 span { color: #f7f8f5; }
.hero-content h1 span { color: #b4cec2; }
.hero-content .hero-description,
.hero-section .hero-description { color: #d0d9d5; }
.hero-content .eyebrow {
    color: #c2d8ce;
    background: rgba(255,255,255,0.055);
    border-color: rgba(210,228,219,0.2);
}
.hero-highlights { color: #e1e8e4; border-top-color: rgba(235,242,237,0.18); }
.hero-highlights i { color: #b4cec2; }
.hero-section::before,
.hero-visual::before { border-color: rgba(195,218,207,0.22); }
.hero-actions .btn-primary {
    color: #172a2d;
    background: #b4cec2;
    border-color: #b4cec2;
    box-shadow: 0 7px 18px rgba(0,0,0,0.13);
}
.hero-actions .btn-primary:hover { background: #c7dbd1; border-color: #c7dbd1; }
.hero-actions .btn-outline {
    color: #f5f7f4;
    background: rgba(255,255,255,0.035);
    border-color: rgba(235,242,237,0.38);
}
.hero-actions .btn-outline:hover {
    color: #fff;
    background: rgba(255,255,255,0.085);
    border-color: #b4cec2;
}
.hero-visual img {
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(0,0,0,0.18);
}

/* LIGHT CONTENT SECTIONS — alternating off-white and white for rhythm */
.intro-section { background: #fff; color: #293a42; }
.why-section,
.process-section,
.contact-section { background: #f2f4f0; color: #293a42; }
.services-section,
.faq-section { background: #fafaf7; color: #293a42; }
.intro-section h1, .intro-section h2, .intro-section h3,
.why-section h1, .why-section h2, .why-section h3,
.services-section h1, .services-section h2, .services-section h3,
.process-section h1, .process-section h2, .process-section h3,
.faq-section h1, .faq-section h2, .faq-section h3,
.contact-section h1, .contact-section h2, .contact-section h3,
.section-heading h2 {
    color: #182c36;
}
.intro-section p, .why-section p, .services-section p,
.process-section p, .faq-section p, .contact-section p,
.section-heading > p { color: #596970; }

/* Cards: clean white surfaces, subtle edges, gentle hover */
.why-card,
.service-card,
.process-card,
.faq-item,
.contact-card {
    border: 1px solid #e0e6e1;
    box-shadow: 0 7px 22px rgba(24,44,54,0.045);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.why-card,
.process-card,
.contact-card { background: #fff; }
.service-card { background: #fff; overflow: hidden; }
.service-body { background: #fff; }
.why-card:hover,
.service-card:hover,
.process-card:hover,
.contact-card:hover {
    transform: translateY(-4px);
    border-color: #c6d5cc;
    box-shadow: 0 13px 28px rgba(24,44,54,0.09);
}
.service-card img { transition: transform .35s ease; }
.service-card:hover img { transform: scale(1.025); }
.why-card h3, .service-body h3, .process-card h3, .contact-card h3 { color: #182c36; }
.why-card p, .service-body p, .process-card p, .contact-card p { color: #596970; }

/* Small accents only — no bright blue panels */
.eyebrow,
.text-link,
.check-list i,
.why-section .feature-icon,
.process-section .process-number,
.contact-section .contact-card-icon { color: #587f73; }
.feature-icon,
.tag-badge,
.process-number,
.contact-card-icon {
    background: #e9efeb;
    color: #41675c;
}
.btn-primary,
.header-cta,
.contact-section .btn-primary {
    background: #587f73;
    border-color: #587f73;
    color: #fff;
}
.btn-primary:hover,
.header-cta:hover,
.contact-section .btn-primary:hover {
    background: #41675c;
    border-color: #41675c;
    color: #fff;
}
.btn-outline { border-color: #aabbb2; color: #314b45; }
.btn-outline:hover { border-color: #587f73; color: #41675c; }

/* Keep the existing emergency section dark */
.emergency-section {
    color: #e8eeeb;
    background:
        radial-gradient(circle at 90% 10%, rgba(113,153,139,0.16), transparent 29%),
        linear-gradient(118deg, #192b31 0%, #22383d 100%);
}
.emergency-section h1,
.emergency-section h2,
.emergency-section h3 { color: #f7f8f5; }
.emergency-section p { color: #d0d9d5; }
.emergency-section .eyebrow { color: #b4cec2; }
.emergency-section .btn-primary { background: #b4cec2; border-color: #b4cec2; color: #172a2d; }
.emergency-section .btn-primary:hover { background: #c7dbd1; border-color: #c7dbd1; }

/* FAQ: light accordion with clear open state */
.faq-item { background: #fff; border-radius: 12px; overflow: hidden; }
.faq-item:hover, .faq-item.active { border-color: #c6d5cc; }
.faq-question { color: #182c36; background: #fff; }
.faq-question:hover, .faq-item.active .faq-question { color: #41675c; background: #f5f7f4; }
.faq-question i { color: #587f73; background: #e9efeb; }
.faq-item.active .faq-question i { color: #fff; background: #587f73; }
.faq-answer, .faq-answer p { color: #596970; }

/* Contact fields stay white and readable */
.contact-section input,
.contact-section select,
.contact-section textarea {
    color: #293a42;
    background: #fff;
    border: 1px solid #d5dfd9;
    border-radius: 8px;
}
.contact-section input::placeholder,
.contact-section textarea::placeholder { color: #7a8781; }
.contact-section input:focus,
.contact-section select:focus,
.contact-section textarea:focus {
    border-color: #789b8e;
    box-shadow: 0 0 0 3px rgba(88,127,115,0.12);
}

/* DARK FOOTER — soft neutral text and subtle sage accents */
.site-footer { color: #c7d0cc; background: #172a30; }
.footer-brand .brand,
.footer-brand .brand-copy strong,
.footer-column h3,
.footer-contact-link { color: #f5f7f4; }
.footer-brand .brand-icon { color: #b4cec2; background: rgba(180,206,194,0.12); }
.footer-brand .brand-copy small,
.footer-brand > p,
.footer-column p,
.footer-column a { color: #c1cbc7; }
.footer-column a:hover,
.footer-bottom a:hover { color: #d5e4dc; }
.footer-contact-link i { color: #b4cec2; }
.footer-bottom { background: #112126; border-top-color: rgba(255,255,255,0.09); }
.footer-bottom p, .footer-bottom a { color: #b9c5c0; }

/* Keep mobile motion subtle and prevent hover lift on touch devices */
@media (hover: none) {
    .why-card:hover, .service-card:hover, .process-card:hover, .contact-card:hover { transform: none; }
    .service-card:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =========================================================
   ALL WATER DAMAGE — REFINED PREMIUM FINISH
   Based on the supplied stylesheet.
   Preserves section order, markup, and existing layout.
   Palette: charcoal, warm off-white, white, muted sage.
   ========================================================= */

/* Warm, consistent foundation */
:root {
    --primary: #203239;
    --accent: #6f9184;
    --accent-hover: #527568;
    --bg-light: #f3f4ef;
    --secondary: #e8eee9;
    --text-main: #29383c;
    --text-muted: #5b686a;
    --border: #e0e5df;
    --white: #ffffff;
    --radius: 14px;
    --shadow: 0 8px 26px rgba(31, 49, 51, 0.065);
    --shadow-hover: 0 16px 34px rgba(31, 49, 51, 0.11);
}

html {
    scroll-padding-top: 100px;
    scroll-behavior: smooth;
}

body {
    color: #29383c;
    background: #ffffff;
    font-size: 16px;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

p {
    color: #5b686a;
    font-size: 16px;
    line-height: 1.78;
}

h1, h2, h3, h4 {
    color: #203239;
    text-wrap: balance;
}

a, button, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(111, 145, 132, 0.48);
    outline-offset: 3px;
}

/* LIGHT STICKY HEADER */
.site-header {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid #e4e8e3;
    box-shadow: 0 4px 18px rgba(27, 43, 45, 0.045);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.site-header .brand,
.site-header .brand-copy strong,
.site-header .main-nav a,
.site-header .nav-links a,
.site-header .nav-menu a {
    color: #203239;
}

.site-header .brand-icon {
    color: #527568;
    background: #edf2ee;
    border: 1px solid #e1e8e2;
}

.site-header .main-nav a:hover,
.site-header .nav-links a:hover,
.site-header .nav-menu a:hover {
    color: #527568;
}

.site-header .header-cta {
    color: #ffffff;
    background: #527568;
    border-color: #527568;
    box-shadow: 0 5px 14px rgba(54, 88, 75, 0.14);
}

.site-header .header-cta:hover {
    color: #ffffff;
    background: #3f6256;
    border-color: #3f6256;
    transform: translateY(-1px);
}

/* DARK HERO — keep it distinct, not blue */
.hero-section {
    color: #e9eeeb;
    background:
        radial-gradient(ellipse at 88% 12%, rgba(135, 170, 153, 0.13), transparent 32%),
        radial-gradient(ellipse at 0% 100%, rgba(255, 255, 255, 0.035), transparent 38%),
        linear-gradient(120deg, #1b2b30 0%, #24383c 56%, #1b2a2e 100%);
}

.hero-content h1,
.hero-content h1 span {
    color: #f7f8f5;
}

.hero-content h1 span {
    color: #c1d5c9;
}

.hero-content .eyebrow {
    color: #c9ddd2;
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(220, 234, 225, 0.2);
}

.hero-content .hero-description {
    color: #d0d9d5;
}

.hero-highlights {
    color: #e0e8e3;
    border-top-color: rgba(238, 244, 239, 0.18);
}

.hero-highlights i {
    color: #b8d0c3;
}

.hero-section::before,
.hero-visual::before {
    border-color: rgba(200, 221, 209, 0.2);
}

.hero-actions .btn-primary {
    color: #1b2b30;
    background: #bfd5c8;
    border-color: #bfd5c8;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.13);
}

.hero-actions .btn-primary:hover {
    color: #1b2b30;
    background: #d1e1d7;
    border-color: #d1e1d7;
}

.hero-actions .btn-outline {
    color: #f4f7f4;
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(235, 242, 237, 0.34);
}

.hero-actions .btn-outline:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.085);
    border-color: #bfd5c8;
}

.hero-visual img {
    border-color: rgba(255, 255, 255, 0.86);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.2);
}

.image-note {
    border-color: #e3e9e3;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.15);
}

.note-icon {
    color: #527568;
    background: #edf2ee;
    border-color: #dfe8e1;
}

/* TRUST STRIP — subtle dividers and restrained icons */
.trust-strip {
    background: #ffffff;
    border-top-color: #e5e9e4;
    border-bottom-color: #e5e9e4;
}

.trust-item {
    border-right-color: #e7ebe6;
}

.trust-icon {
    color: #527568;
    background: #f0f4f0;
    border-color: #e2e9e2;
}

.trust-item:hover .trust-icon {
    background: #e5eee7;
}

.trust-item strong {
    color: #293b3d;
}

.trust-item p {
    color: #6b7777;
}

/* SECTION RHYTHM — alternating neutral light surfaces */
.intro-section {
    background: #ffffff;
}

.why-section,
.process-section,
.contact-section {
    background: #f3f4ef;
}

.services-section,
.faq-section {
    background: #fafaf7;
}

.intro-section h1, .intro-section h2, .intro-section h3,
.why-section h1, .why-section h2, .why-section h3,
.services-section h1, .services-section h2, .services-section h3,
.process-section h1, .process-section h2, .process-section h3,
.faq-section h1, .faq-section h2, .faq-section h3,
.contact-section h1, .contact-section h2, .contact-section h3,
.section-heading h2 {
    color: #203239;
}

.intro-section p, .why-section p, .services-section p,
.process-section p, .faq-section p, .contact-section p,
.section-heading > p {
    color: #5b686a;
}

/* Section labels: neutral sage, no bright blue gradients */
.why-section .section-heading .eyebrow,
.process-section .section-heading .eyebrow {
    color: #527568;
    background: #e9efea;
    border-color: #dce6de;
}

.why-section .section-heading .eyebrow::before,
.process-section .section-heading .eyebrow::before {
    background: #789889;
    box-shadow: 0 0 0 4px rgba(111, 145, 132, 0.12);
}

.why-section .section-heading h2,
.process-section .section-heading h2 {
    color: #203239;
}

.why-section::before,
.why-section::after,
.process-section::before,
.process-section::after {
    opacity: 0.48;
}

/* ABOUT image — refined frame without changing dimensions */
.intro-image img {
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(31, 49, 51, 0.1);
}

.check-list li {
    color: #304448;
}

.check-list i,
.text-link {
    color: #527568;
}

.text-link:hover {
    color: #3f6256;
}

/* WHY CHOOSE US — quieter cards, elegant hover */
.why-section .why-card {
    background: #ffffff;
    border-color: #e0e6df;
    border-radius: 17px;
    box-shadow: 0 5px 18px rgba(31, 49, 51, 0.045);
}

.why-section .why-card::before {
    background: linear-gradient(90deg, #789889, #b8cfc1);
}

.why-section .why-card::after {
    background: rgba(111, 145, 132, 0.055);
}

.why-section .why-card:hover {
    border-color: #c5d5ca;
    background: #ffffff;
    box-shadow: 0 13px 28px rgba(31, 49, 51, 0.085);
}

.why-section .feature-icon {
    color: #527568;
    background: #edf2ee;
    border-color: #e0e8e1;
    box-shadow: none;
}

.why-section .why-card:hover .feature-icon {
    color: #ffffff;
    background: #527568;
    box-shadow: 0 7px 16px rgba(63, 98, 86, 0.18);
}

.why-section .why-card h3 {
    color: #24383c;
}

.why-section .why-card:hover h3 {
    color: #527568;
}

.why-section .why-card p {
    color: #5b686a;
}

/* SERVICE CAROUSEL — polished image cards and subtle controls */
.services-section .service-card {
    border-color: #e1e6e0;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(31, 49, 51, 0.055);
}

.services-section .service-card:hover {
    border-color: #c6d6ca;
    box-shadow: 0 16px 32px rgba(31, 49, 51, 0.105);
}

.services-section .service-card > img {
    background: #e9ede8;
}

.services-section .service-body {
    background: #ffffff;
}

.services-section .tag-badge {
    color: #527568;
    background: #edf2ee;
}

.services-section .tag-badge.hazard {
    color: #995c4c;
    background: #f7eeea;
}

.services-section .service-body h3 {
    color: #24383c;
}

.services-section .service-body p {
    color: #5b686a;
}

.services-section .text-link {
    color: #527568;
}

.services-section .text-link:hover {
    color: #3f6256;
}

.services-section .services-arrow {
    color: #527568;
    background: #ffffff;
    border-color: #dce4dc;
    box-shadow: 0 4px 13px rgba(31, 49, 51, 0.06);
}

.services-section .services-arrow:hover:not(:disabled) {
    color: #ffffff;
    background: #527568;
    border-color: #527568;
}

.services-section .services-progress {
    background: #e1e7e0;
}

.services-section .services-progress span {
    background: #789889;
}

.services-section .services-hint,
.services-section .services-hint i {
    color: #738078;
}

/* RESTORATION PROCESS — maintain existing grid/timeline */
.process-section .process-card {
    background: #ffffff;
    border-color: #e0e6df;
    border-radius: 17px;
    box-shadow: 0 6px 20px rgba(31, 49, 51, 0.05);
}

.process-section .process-card::before {
    background: linear-gradient(90deg, #789889, #b8cfc1);
}

.process-section .process-card::after {
    color: rgba(82, 117, 104, 0.07);
}

.process-section .process-number {
    color: #527568;
    background: #edf2ee;
    border-color: #dce6de;
    box-shadow: none;
}

.process-section .process-card h3 {
    color: #24383c;
}

.process-section .process-card p {
    color: #5b686a;
}

.process-section .process-grid::before {
    background: linear-gradient(90deg,
        rgba(111, 145, 132, 0.13),
        rgba(111, 145, 132, 0.38),
        rgba(111, 145, 132, 0.13));
}

/* Buttons across light sections */
.btn-primary,
.header-cta,
.contact-section .btn-primary {
    color: #ffffff;
    background: #527568;
    border-color: #527568;
    box-shadow: 0 6px 16px rgba(63, 98, 86, 0.14);
}

.btn-primary:hover,
.header-cta:hover,
.contact-section .btn-primary:hover {
    color: #ffffff;
    background: #3f6256;
    border-color: #3f6256;
    box-shadow: 0 9px 20px rgba(63, 98, 86, 0.18);
}

.btn-outline {
    color: #304b43;
    background: transparent;
    border-color: #cbd7ce;
    box-shadow: none;
}

.btn-outline:hover {
    color: #3f6256;
    background: #edf2ee;
    border-color: #a8beb0;
}

/* EMERGENCY SECTION BEFORE FAQ — intentionally dark */
.emergency-section {
    color: #e9eeeb;
    background:
        radial-gradient(circle at 90% 10%, rgba(135, 170, 153, 0.13), transparent 29%),
        linear-gradient(118deg, #1b2b30 0%, #24383c 100%);
}

.emergency-section h1,
.emergency-section h2,
.emergency-section h3 {
    color: #f7f8f5;
}

.emergency-section p {
    color: #d0d9d5;
}

.emergency-section .eyebrow {
    color: #c1d5c9;
}

.emergency-section .btn-primary {
    color: #1b2b30;
    background: #bfd5c8;
    border-color: #bfd5c8;
}

.emergency-section .btn-primary:hover {
    color: #1b2b30;
    background: #d1e1d7;
    border-color: #d1e1d7;
}

/* FAQ — calm, light accordion */
.faq-section {
    background: #fafaf7;
}

.faq-item {
    background: #ffffff;
    border: 1px solid #e1e6e0;
    border-radius: 13px;
    box-shadow: 0 4px 15px rgba(31, 49, 51, 0.035);
}

.faq-item:hover,
.faq-item.active {
    border-color: #c7d6cb;
}

.faq-question {
    color: #24383c;
    background: #ffffff;
}

.faq-question:hover,
.faq-item.active .faq-question {
    color: #3f6256;
    background: #f3f6f2;
}

.faq-question i {
    color: #527568;
    background: #edf2ee;
}

.faq-item.active .faq-question i {
    color: #ffffff;
    background: #527568;
}

.faq-answer,
.faq-answer p {
    color: #5b686a;
}

/* CONTACT — cleaner inputs and focus states */
.contact-section .contact-card {
    background: #ffffff;
    border-color: #e0e6df;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(31, 49, 51, 0.045);
}

.contact-section .contact-card-icon {
    color: #527568;
    background: #edf2ee;
    border-color: #e0e8e1;
}

.contact-section input,
.contact-section select,
.contact-section textarea {
    color: #29383c;
    background: #ffffff;
    border: 1px solid #d6dfd7;
    border-radius: 9px;
}

.contact-section input::placeholder,
.contact-section textarea::placeholder {
    color: #7a8580;
}

.contact-section input:focus,
.contact-section select:focus,
.contact-section textarea:focus {
    border-color: #789889;
    box-shadow: 0 0 0 3px rgba(111, 145, 132, 0.13);
    outline: none;
}

/* DARK FOOTER — warm neutral text, very restrained sage */
.site-footer {
    color: #cbd3ce;
    background: #1b2b30;
}

.footer-brand .brand,
.footer-brand .brand-copy strong,
.footer-column h3,
.footer-contact-link {
    color: #f5f7f4;
}

.footer-brand .brand-icon {
    color: #bfd5c8;
    background: rgba(191, 213, 200, 0.11);
    border: 1px solid rgba(191, 213, 200, 0.13);
}

.footer-brand .brand-copy small,
.footer-brand > p,
.footer-column p,
.footer-column a {
    color: #c1cbc5;
}

.footer-column a:hover,
.footer-bottom a:hover {
    color: #d6e5dc;
}

.footer-contact-link i {
    color: #bfd5c8;
}

.footer-bottom {
    background: #142226;
    border-top-color: rgba(255, 255, 255, 0.09);
}

.footer-bottom p,
.footer-bottom a {
    color: #b9c5bf;
}

/* Avoid overly large hover effects on touch screens */
@media (hover: none) {
    .why-section .why-card:hover,
    .services-section .service-card:hover,
    .process-section .process-card:hover,
    .contact-section .contact-card:hover {
        transform: none;
    }

    .services-section .service-card:hover > img {
        transform: none;
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   SHARP TYPOGRAPHY FIX — appended last on purpose
   Removes soft text rendering effects without changing layout.
   ========================================================= */
html, body {
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: auto !important;
}

body, body * {
    text-shadow: none !important;
}

body, p, li, a, span, label, small, strong, em, b, i,
button, input, select, textarea,
 h1, h2, h3, h4, h5, h6,
.site-header, .site-header *,
.hero, .hero *, .hero-section, .hero-section *,
section, section p, section li, section a,
.card, .card *, .service-card, .service-card *,
.why-card, .why-card *, .process-card, .process-card *,
.faq-item, .faq-item *, .faq-question, .faq-answer,
footer, footer * {
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: auto !important;
    filter: none;
}

/* Keep type crisp: avoid overly tight tracking and synthetic weights. */
body {
    font-weight: 400;
}

p, li, .faq-answer {
    letter-spacing: normal;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: normal;
    font-synthesis: none;
}

/* Do not blur header text with a translucent/backdrop-filter header. */
.site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #ffffff !important;
}

/* =========================================================
   PREMIUM MIDNIGHT BLUE THEME — final override
   Stronger, richer contrast while preserving the existing layout.
   Palette: midnight navy, deep ocean blue, crisp white, ice blue.
   ========================================================= */
:root {
    --awr-navy: #071a2f;
    --awr-deep-blue: #0b2a4a;
    --awr-ocean: #123e68;
    --awr-blue: #2474d2;
    --awr-sky: #64c8f2;
    --awr-ice: #e8f2fb;
    --awr-pale: #f1f5fa;
    --awr-white: #ffffff;
    --awr-ink: #172b40;
    --awr-muted: #536579;
}

/* Keep the header clean and bright so the dark sections feel intentional. */
.site-header {
    background: #ffffff !important;
    border-bottom: 1px solid #dce5ef !important;
    box-shadow: 0 4px 18px rgba(7, 26, 47, 0.07) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.site-header,
.site-header a,
.site-header .brand,
.site-header .brand-copy strong {
    color: #102a45 !important;
}
.site-header .brand-icon {
    color: #ffffff !important;
    background: #123e68 !important;
}
.site-header nav a:hover,
.site-header nav a:focus-visible {
    color: #2474d2 !important;
}
.site-header .header-cta,
.header-cta {
    color: #ffffff !important;
    background: #123e68 !important;
    border: 1px solid #123e68 !important;
    box-shadow: 0 6px 16px rgba(18, 62, 104, 0.18) !important;
}
.site-header .header-cta:hover,
.header-cta:hover {
    color: #ffffff !important;
    background: #2474d2 !important;
    border-color: #2474d2 !important;
}

/* Hero: bold midnight blue, not pale blue. */
.hero,
.hero-section {
    color: #edf5ff !important;
    background:
        radial-gradient(ellipse at 82% 14%, rgba(100, 200, 242, 0.20) 0%, transparent 32%),
        radial-gradient(ellipse at 8% 100%, rgba(36, 116, 210, 0.20) 0%, transparent 38%),
        linear-gradient(122deg, #061629 0%, #0a2745 54%, #103d66 100%) !important;
}
.hero h1,
.hero h2,
.hero h3,
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero .section-heading,
.hero-section .section-heading {
    color: #ffffff !important;
}
.hero p,
.hero li,
.hero-description,
.hero-section p,
.hero-section li {
    color: #d7e5f4 !important;
}
.hero .eyebrow,
.hero-section .eyebrow,
.hero .hero-kicker,
.hero-section .hero-kicker {
    color: #8bdcff !important;
}
.hero .btn-primary,
.hero-section .btn-primary {
    color: #061629 !important;
    background: #75d4f6 !important;
    border-color: #75d4f6 !important;
    box-shadow: 0 8px 22px rgba(100, 200, 242, 0.20) !important;
}
.hero .btn-primary:hover,
.hero-section .btn-primary:hover {
    background: #a0e5ff !important;
    border-color: #a0e5ff !important;
}
.hero .btn-outline,
.hero-section .btn-outline {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: rgba(219, 239, 255, 0.48) !important;
}
.hero .btn-outline:hover,
.hero-section .btn-outline:hover {
    color: #071a2f !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
}
.hero-highlights,
.hero .hero-highlights,
.hero-section .hero-highlights {
    color: #e2edf8 !important;
}
.hero .hero-highlights > *,
.hero-section .hero-highlights > * {
    border-color: rgba(226, 237, 248, 0.16) !important;
}

/* Intro section: cool blue-grey instead of plain white. */
.intro-section {
    color: var(--awr-ink) !important;
    background: #edf3f9 !important;
}
.intro-section h1,
.intro-section h2,
.intro-section h3,
.intro-section .section-heading {
    color: #102d4b !important;
}
.intro-section p,
.intro-section li {
    color: #4b6075 !important;
}

/* Why choose us: a second deep-blue statement section for visual impact. */
.why-section {
    color: #e8f1fb !important;
    background:
        radial-gradient(circle at 92% 8%, rgba(100, 200, 242, 0.12), transparent 26%),
        linear-gradient(130deg, #0a2038 0%, #0d3154 100%) !important;
}
.why-section h1,
.why-section h2,
.why-section h3,
.why-section .section-heading {
    color: #ffffff !important;
}
.why-section p,
.why-section li {
    color: #c8d8e8 !important;
}
.why-section .eyebrow {
    color: #80d8fb !important;
}
.why-section .why-card {
    color: #e6f0fb !important;
    background: linear-gradient(145deg, #123657 0%, #0d2b49 100%) !important;
    border: 1px solid rgba(151, 203, 239, 0.18) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.17) !important;
}
.why-section .why-card h3,
.why-section .why-card h4 {
    color: #ffffff !important;
}
.why-section .why-card p,
.why-section .why-card li {
    color: #c7d9ea !important;
}
.why-section .why-card i,
.why-section .why-card .icon,
.why-section .why-card-icon {
    color: #79d7fb !important;
}
.why-section .why-card:hover {
    border-color: rgba(121, 215, 251, 0.55) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24) !important;
}

/* Services: clean ice-blue canvas with strong ink and white service cards. */
.services-section {
    color: #20384f !important;
    background: #eaf1f8 !important;
}
.services-section h1,
.services-section h2,
.services-section h3,
.services-section .section-heading {
    color: #0c2a48 !important;
}
.services-section p,
.services-section li,
.services-section .services-hint {
    color: #52677c !important;
}
.services-section .service-card,
.services-section .services-carousel .service-card {
    color: #20384f !important;
    background: #ffffff !important;
    border: 1px solid #d5e1ed !important;
    box-shadow: 0 10px 26px rgba(7, 26, 47, 0.09) !important;
}
.services-section .service-card h3,
.services-section .service-card h4 {
    color: #0b2a4a !important;
}
.services-section .service-card p {
    color: #536579 !important;
}
.services-section .service-card:hover {
    border-color: #83b8e8 !important;
    box-shadow: 0 15px 32px rgba(7, 26, 47, 0.14) !important;
}
.services-section .service-card a,
.services-section .service-card .btn,
.services-section .service-card .btn-primary {
    color: #ffffff !important;
    background: #123e68 !important;
    border-color: #123e68 !important;
	padding: 8px;
    border-radius: 10px;
}
.services-section .service-card a:hover,
.services-section .service-card .btn:hover,
.services-section .service-card .btn-primary:hover {
    background: #2474d2 !important;
    border-color: #2474d2 !important;
}
.services-arrow {
    color: #ffffff !important;
    background: #123e68 !important;
    border-color: #123e68 !important;
}
.services-arrow:hover {
    background: #2474d2 !important;
    border-color: #2474d2 !important;
}
.services-progress {
    background: #c8d8e8 !important;
}
.services-progress > * {
    background: #2474d2 !important;
}

/* Process: restrained light surface with clearer blue numbered markers. */
.process-section {
    color: #20384f !important;
    background: #f5f8fc !important;
}
.process-section h1,
.process-section h2,
.process-section h3,
.process-section .section-heading {
    color: #102d4b !important;
}
.process-section p,
.process-section li {
    color: #526579 !important;
}
.process-section .process-card {
    color: #20384f !important;
    background: #ffffff !important;
    border: 1px solid #dce6f0 !important;
    box-shadow: 0 8px 24px rgba(7, 26, 47, 0.07) !important;
}
.process-section .process-card h3,
.process-section .process-card h4 {
    color: #102d4b !important;
}
.process-section .process-card p {
    color: #536579 !important;
}
.process-section .process-number {
    color: #ffffff !important;
    background: linear-gradient(145deg, #2474d2, #123e68) !important;
    box-shadow: 0 6px 16px rgba(36, 116, 210, 0.22) !important;
}

/* Emergency call-to-action before FAQ: rich navy with ice-blue highlight. */
.emergency-section {
    color: #eaf4ff !important;
    background:
        radial-gradient(circle at 88% 18%, rgba(100, 200, 242, 0.18), transparent 30%),
        linear-gradient(120deg, #061629 0%, #0b2a4a 58%, #124675 100%) !important;
    border-color: rgba(100, 200, 242, 0.15) !important;
}
.emergency-section h1,
.emergency-section h2,
.emergency-section h3 {
    color: #ffffff !important;
}
.emergency-section p {
    color: #d1e1f1 !important;
}
.emergency-section .eyebrow {
    color: #83dcff !important;
}
.emergency-section .btn-primary {
    color: #061629 !important;
    background: #75d4f6 !important;
    border-color: #75d4f6 !important;
}
.emergency-section .btn-primary:hover {
    color: #061629 !important;
    background: #a0e5ff !important;
    border-color: #a0e5ff !important;
}

/* FAQ: bright enough to read, but tinted blue to fit the new theme. */
.faq-section {
    color: #20384f !important;
    background: #eaf1f8 !important;
}
.faq-section h1,
.faq-section h2,
.faq-section h3,
.faq-section .section-heading {
    color: #0c2a48 !important;
}
.faq-section p {
    color: #536579 !important;
}
.faq-item {
    background: #ffffff !important;
    border: 1px solid #d5e1ed !important;
    box-shadow: 0 7px 20px rgba(7, 26, 47, 0.06) !important;
}
.faq-item:hover,
.faq-item.active {
    border-color: #7fb4e4 !important;
}
.faq-question {
    color: #102d4b !important;
    background: #ffffff !important;
}
.faq-question:hover,
.faq-item.active .faq-question {
    color: #145ba3 !important;
    background: #f0f7fd !important;
}
.faq-question i {
    color: #ffffff !important;
    background: #123e68 !important;
}
.faq-item.active .faq-question i {
    color: #061629 !important;
    background: #75d4f6 !important;
}
.faq-answer,
.faq-answer p {
    color: #536579 !important;
}

/* Contact: pale steel-blue backdrop and high-contrast white form cards. */
.contact-section {
    color: #20384f !important;
    background: #dfeaf5 !important;
}
.contact-section h1,
.contact-section h2,
.contact-section h3,
.contact-section .section-heading {
    color: #0c2a48 !important;
}
.contact-section p,
.contact-section li {
    color: #4e6378 !important;
}
.contact-section .contact-card {
    color: #20384f !important;
    background: #ffffff !important;
    border: 1px solid #cbdbea !important;
    box-shadow: 0 10px 28px rgba(7, 26, 47, 0.09) !important;
}
.contact-section .contact-card h3,
.contact-section .contact-card h4 {
    color: #102d4b !important;
}
.contact-section .contact-card p {
    color: #536579 !important;
}
.contact-section .contact-card-icon {
    color: #ffffff !important;
    background: #123e68 !important;
    border-color: #123e68 !important;
}
.contact-section input,
.contact-section select,
.contact-section textarea {
    color: #172b40 !important;
    background: #ffffff !important;
    border: 1px solid #bdcfe0 !important;
}
.contact-section input::placeholder,
.contact-section textarea::placeholder {
    color: #718297 !important;
}
.contact-section input:focus,
.contact-section select:focus,
.contact-section textarea:focus {
    border-color: #2474d2 !important;
    box-shadow: 0 0 0 3px rgba(36, 116, 210, 0.15) !important;
}
.contact-section .btn-primary,
.contact-section button[type="submit"] {
    color: #ffffff !important;
    background: #123e68 !important;
    border-color: #123e68 !important;
}
.contact-section .btn-primary:hover,
.contact-section button[type="submit"]:hover {
    background: #2474d2 !important;
    border-color: #2474d2 !important;
}

/* Footer: near-black navy for a confident finish. */
.site-footer {
    color: #c9d8e8 !important;
    background: #061629 !important;
    border-top: 1px solid rgba(100, 200, 242, 0.18) !important;
}
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .brand,
.site-footer .brand-copy strong,
.site-footer .footer-contact-link {
    color: #ffffff !important;
}
.site-footer p,
.site-footer li,
.site-footer .brand-copy small,
.site-footer .footer-brand > p,
.site-footer .footer-column p,
.site-footer .footer-column a {
    color: #b9cadd !important;
}
.site-footer a:hover,
.site-footer .footer-column a:hover,
.site-footer .footer-bottom a:hover {
    color: #83dcff !important;
}
.site-footer .brand-icon,
.site-footer .footer-brand .brand-icon {
    color: #061629 !important;
    background: #75d4f6 !important;
    border-color: #75d4f6 !important;
}
.footer-bottom {
    color: #aebfd1 !important;
    background: #04101e !important;
    border-top: 1px solid rgba(201, 216, 232, 0.12) !important;
}
.footer-bottom p,
.footer-bottom a {
    color: #aebfd1 !important;
}

/* Global accents, links and readable body copy. */
body {
    color: #263b50;
    background: #f5f8fc;
}
a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
:focus-visible {
    outline: 3px solid rgba(36, 116, 210, 0.65);
    outline-offset: 3px;
}
::selection {
    color: #ffffff;
    background: #123e68;
}

/* Small-screen contrast and layout remain intact. */
@media (max-width: 767px) {
    .hero,
    .hero-section {
        background:
            radial-gradient(ellipse at 80% 8%, rgba(100, 200, 242, 0.15), transparent 34%),
            linear-gradient(145deg, #061629 0%, #0b2a4a 100%) !important;
    }
    .why-section {
        background: linear-gradient(150deg, #0a2038 0%, #0d3154 100%) !important;
    }
}

/* ==========================================================
   FINAL SITE-WIDE COLOR PASS — DEEP BLUE, NO SAGE/GREEN CAST
   Appended last intentionally so it overrides earlier palettes.
   Keeps the existing page structure and component dimensions.
   ========================================================== */
:root {
  --awd-navy: #08233f;
  --awd-deep: #06182b;
  --awd-blue: #124b7a;
  --awd-blue-mid: #17649b;
  --awd-ice: #8bdcff;
  --awd-pale: #e7f0f8;
  --awd-soft: #f1f5f9;
  --awd-ink: #152c40;
  --awd-copy: #42576b;
  --awd-border: #cbd9e6;
}

html body {
  color: var(--awd-ink) !important;
  background: #f1f5f9 !important;
}

/* Keep the navigation/header clean and bright, with blue details. */
header, .site-header, .main-header, .header-wrapper, .top-header {
  background: #ffffff !important;
  color: var(--awd-ink) !important;
  border-color: #d8e2ec !important;
  box-shadow: 0 3px 16px rgba(6, 24, 43, .06) !important;
}
header a, .site-header a, .main-header a, .header-wrapper a {
  color: var(--awd-navy) !important;
}
header a:hover, .site-header a:hover, .main-header a:hover {
  color: var(--awd-blue-mid) !important;
}

/* Dark, premium hero. */
.hero, .hero-section {
  color: #edf7ff !important;
  background: radial-gradient(ellipse at 82% 8%, rgba(80, 177, 232, .20), transparent 34%),
              linear-gradient(130deg, #06182b 0%, #092b4c 58%, #104c78 100%) !important;
}
.hero h1, .hero h2, .hero h3, .hero-section h1, .hero-section h2,
.hero-section h3, .hero .section-heading, .hero-section .section-heading {
  color: #ffffff !important;
}
.hero p, .hero li, .hero-description, .hero-section p, .hero-section li {
  color: #d4e5f3 !important;
}
.hero .eyebrow, .hero-section .eyebrow, .hero .hero-kicker, .hero-section .hero-kicker {
  color: var(--awd-ice) !important;
}

/* The trust/feature strip in the screenshot: crisp blue icons, not sage. */
.hero-highlights, .hero .hero-highlights, .hero-section .hero-highlights,
.trust-strip, .feature-strip, .highlights-strip, .benefits-strip, .quick-features {
  color: white;
/*   background: #ffffff !important; */
  border-color: #d6e1eb !important;
}
.hero .hero-highlights > *, .hero-section .hero-highlights > *,
.trust-strip > *, .feature-strip > *, .highlights-strip > *,
.benefits-strip > *, .quick-features > * {
  border-color: #dbe4ed !important;
}
.hero-highlights i, .hero-highlights svg, .feature-strip i, .feature-strip svg,
.trust-strip i, .trust-strip svg, .highlights-strip i, .highlights-strip svg,
.benefits-strip i, .benefits-strip svg, .quick-features i, .quick-features svg {
  color: #ffffff !important;
  background-color: var(--awd-blue) !important;
  border-color: var(--awd-blue) !important;
}
.hero-highlights strong, .hero-highlights h3, .feature-strip strong,
.trust-strip strong, .highlights-strip strong, .benefits-strip strong {
  color: var(--awd-navy) !important;
}
.hero-highlights p, .feature-strip p, .trust-strip p, .highlights-strip p,
.benefits-strip p, .quick-features p {
  color: var(--awd-copy) !important;
}

/* Light content sections use a cool steel-blue tint instead of green/cream. */
.about-section, .process-section, .faq-section, .contact-section,
.comprehensive-section, .content-section, .how-it-works, .service-area-section {
  background-color: var(--awd-pale) !important;
  color: var(--awd-ink) !important;
}
.about-section h1, .about-section h2, .about-section h3,
.process-section h1, .process-section h2, .process-section h3,
.faq-section h1, .faq-section h2, .faq-section h3,
.contact-section h1, .contact-section h2, .contact-section h3,
.comprehensive-section h1, .comprehensive-section h2, .comprehensive-section h3,
.content-section h1, .content-section h2, .content-section h3,
.how-it-works h1, .how-it-works h2, .how-it-works h3,
.service-area-section h1, .service-area-section h2, .service-area-section h3 {
  color: var(--awd-navy) !important;
}
.about-section p, .process-section p, .process-section li,
.faq-section p, .contact-section p, .contact-section li,
.comprehensive-section p, .content-section p, .how-it-works p,
.service-area-section p {
  color: var(--awd-copy) !important;
}

/* Why Choose Us: retain dark blue section, ensure intro copy wraps naturally. */
.why-section {
  color: #eaf5ff !important;
  background: radial-gradient(circle at 85% 18%, rgba(39, 126, 185, .22), transparent 30%),
              linear-gradient(135deg, #06182b 0%, #092b4c 55%, #0d3c62 100%) !important;
  overflow: hidden;
}
.why-section h1, .why-section h2, .why-section h3, .why-section .section-heading {
  color: #ffffff !important;
}
.why-section > .container > p, .why-section .container > p,
.why-section .section-subtitle, .why-section .section-description {
  color: #d5e6f5 !important;
  max-width: 760px !important;
  width: calc(100% - 32px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
}
.why-section .why-card {
  color: #e8f4ff !important;
  background: linear-gradient(145deg, #123b5e 0%, #0c2b49 100%) !important;
  border: 1px solid #285a7e !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important;
}
.why-section .why-card h3, .why-section .why-card h4 { color: #ffffff !important; }
.why-section .why-card p, .why-section .why-card li { color: #c8dced !important; }
.why-section .why-card i, .why-section .why-card .icon,
.why-section .why-card-icon {
  color: #ffffff !important;
  background: #17649b !important;
  border-color: #3182b4 !important;
}
.why-section .why-card:hover {
  border-color: var(--awd-ice) !important;
  transform: translateY(-3px);
}

/* Service cards: white surfaces with navy text and confident blue actions. */
.services-section { background: #e7f0f8 !important; color: var(--awd-ink) !important; }
.services-section h1, .services-section h2, .services-section h3,
.services-section .section-heading { color: var(--awd-navy) !important; }
.services-section p, .services-section li, .services-section .services-hint { color: var(--awd-copy) !important; }
.services-section .service-card, .services-section .services-carousel .service-card,
.process-section .process-card, .faq-item, .contact-section .contact-card,
.comprehensive-section .card, .content-section .card {
  color: var(--awd-ink) !important;
  background: #ffffff !important;
  border-color: #cbd9e6 !important;
  box-shadow: 0 10px 28px rgba(8, 35, 63, .09) !important;
}
.services-section .service-card h3, .services-section .service-card h4,
.process-section .process-card h3, .process-section .process-card h4,
.contact-section .contact-card h3, .contact-section .contact-card h4 {
  color: var(--awd-navy) !important;
}
.services-section .service-card p, .process-section .process-card p,
.contact-section .contact-card p { color: var(--awd-copy) !important; }

/* Emergency dispatch / call section: this must read as dark blue, not pale sage. */
.emergency-section, .emergency-cta, .emergency-cta-section, .emergency-dispatch,
.call-now-section, .cta-section, .final-cta, .contact-cta {
  color: #eaf5ff !important;
  background: radial-gradient(circle at 88% 18%, rgba(80, 177, 232, .19), transparent 31%),
              linear-gradient(125deg, #06182b 0%, #092b4c 56%, #104c78 100%) !important;
  border-color: #1c4e73 !important;
}
.emergency-section h1, .emergency-section h2, .emergency-section h3,
.emergency-cta h1, .emergency-cta h2, .emergency-cta h3,
.emergency-cta-section h1, .emergency-cta-section h2, .emergency-cta-section h3,
.emergency-dispatch h1, .emergency-dispatch h2, .emergency-dispatch h3,
.call-now-section h1, .call-now-section h2, .call-now-section h3,
.cta-section h1, .cta-section h2, .cta-section h3,
.final-cta h1, .final-cta h2, .final-cta h3,
.contact-cta h1, .contact-cta h2, .contact-cta h3 { color: #ffffff !important; }
.emergency-section p, .emergency-cta p, .emergency-cta-section p,
.emergency-dispatch p, .call-now-section p, .cta-section p,
.final-cta p, .contact-cta p { color: #d2e4f3 !important; }
.emergency-section .eyebrow, .emergency-cta .eyebrow,
.emergency-cta-section .eyebrow, .emergency-dispatch .eyebrow { color: var(--awd-ice) !important; }

/* FAQ and contact details remain easy to read. */
.faq-section { background: #e7f0f8 !important; }
.faq-item { border: 1px solid #cbd9e6 !important; }
.faq-question { color: var(--awd-navy) !important; background: #ffffff !important; }
.faq-question:hover, .faq-item.active .faq-question { color: #12588b !important; background: #f0f7fc !important; }
.faq-question i, .faq-item .faq-question i { color: #ffffff !important; background: var(--awd-blue) !important; }
.faq-answer, .faq-answer p { color: var(--awd-copy) !important; }
.contact-section { background: #dce8f3 !important; }

/* Buttons, badges and icon chips: replace remaining green/sage accents with blue. */
.btn-primary, button.btn-primary, .button-primary, .primary-button,
button[type="submit"], input[type="submit"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, #145b8d 0%, #0a3457 100%) !important;
  border-color: #145b8d !important;
  box-shadow: 0 7px 18px rgba(8, 52, 87, .18) !important;
}
.btn-primary:hover, button.btn-primary:hover, .button-primary:hover,
.primary-button:hover, button[type="submit"]:hover, input[type="submit"]:hover {
  color: #06182b !important;
  background: var(--awd-ice) !important;
  border-color: var(--awd-ice) !important;
}
.btn-outline, .button-outline { color: #ffffff !important; border-color: #83c9ef !important; }
.btn-outline:hover, .button-outline:hover { color: var(--awd-navy) !important; background: #83c9ef !important; }
.eyebrow, .section-eyebrow, .section-label, .badge {
  border-color: #b8d9ed !important;
}
.icon-box, .feature-icon, .contact-card-icon, .brand-icon,
.service-icon, .process-number, .why-card-icon {
  color: #ffffff !important;
  background: #145b8d !important;
  border-color: #145b8d !important;
}

/* Footer stays the darkest surface for a strong finish. */
.site-footer, footer.site-footer, .footer, .main-footer {
  color: #cbdced !important;
  background: #041321 !important;
  border-color: #173a55 !important;
}
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.site-footer .brand, .site-footer .brand-copy strong,
.site-footer .footer-contact-link, .footer h1, .footer h2, .footer h3,
.main-footer h1, .main-footer h2, .main-footer h3 { color: #ffffff !important; }
.site-footer p, .site-footer li, .site-footer a, .footer p, .footer a,
.main-footer p, .main-footer a { color: #c0d2e2 !important; }
.site-footer a:hover, .footer a:hover, .main-footer a:hover { color: var(--awd-ice) !important; }
.footer-bottom { background: #020c15 !important; color: #a9bfd1 !important; }

/* Remove styling that can make text look fuzzy; do not blur text or containers. */
body, body * { text-shadow: none; }
body, button, input, select, textarea { -webkit-font-smoothing: antialiased; }

@media (max-width: 767px) {
  .why-section .why-card { max-width: 100%; }
  .why-section > .container > p, .why-section .container > p,
  .why-section .section-subtitle, .why-section .section-description {
    width: calc(100% - 24px) !important;
  }
}