/* Havells Pest Control — global layout */

    :root {
        /* Must match actual fixed header height (see .header-inner in FINAL CLEAN HEADER block) */
        --header-offset: 56px;
        /* Single locked theme: auspicious light-green palette */
        --brand-red: #2f9e44;
        --accent-soft: #d8f5a2;
        --header-bg: #d8f5a2;
        --header-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
        --nav-link: #1f4f23;
        --dropdown-bg: #b7efc5;
        --dropdown-border: #74c69d;
        --slider-bg: #95d5b2;
        --about-hero-start: #95d5b2;
        --about-hero-end: #52b788;
        --footer-bg: #40916c;
        --footer-heading: #f1ffe7;
        --footer-text: #e6ffe2;
        --page-services-bg: #f4fff3;
        --section-soft-bg: linear-gradient(140deg, #f4fff3 0%, #e9fce8 50%, #ddf8de 100%);
        --form-submit-bg: #2f9e44;
        --service-hero-start: #74c69d;
        --service-hero-mid: #52b788;
        --service-hero-end: #2d6a4f;
        --surface-tint-1: #f4fff3;
        --surface-tint-2: #e9fce8;
        --surface-tint-3: #ddf8de;
        --text: #1e3f24;
        --muted: #3e6b49;
    }

    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

body {
    margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        color: var(--text);
        padding-top: var(--header-offset);
        line-height: 1.6;
        background: linear-gradient(180deg, #f4fff3 0%, #ebfae8 45%, #dcf5da 100%);
    }

    /* Edge-to-edge hero; keep vertical overflow visible so negative hero margin isn’t clipped */
    body.home {
        overflow-x: clip;
        overflow-y: visible;
    }

    body.home #main {
        padding: 0;
        max-width: none;
        margin-top: 0;
        /* Was: light gradient here — that painted a tall “white” band above the hero. Keep transparent. */
        background: transparent;
        overflow: visible;
    }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

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

    a {
        color: inherit;
    }

    /* ----- Fixed header ----- */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background: linear-gradient(90deg, #ecfbcf 0%, #d8f5a2 55%, #b7efc5 100%);
        z-index: 1000;
        box-shadow: 0 6px 18px rgba(45, 106, 79, 0.22);
        overflow: visible;
        height: 70px !important;
        padding: 10px 20px !important;
    }

    /* Full-width bar; logo flush to viewport left (notch safe-area only) */
    .header-inner {
        width: 100%;
        max-width: none;
        margin: 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px 12px;
        height: 70px !important;
        padding: 10px 20px !important;
        box-sizing: border-box;
        overflow: visible;
    }

    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px !important;
        padding: 10px 20px !important;
    }

    .header-controls {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-end;
        flex: 0 1 auto;
        flex-wrap: nowrap;
        gap: 4px 10px;
        min-width: 0;
        margin-left: 0;
        padding-top: 6px;
    }

    .logo {
        display: flex;
        align-items: center;
        line-height: 0;
        text-decoration: none;
        color: inherit;
        position: static;
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        align-self: flex-start;
    }

    /* Logo — doubled from prior cap; global img { max-width:100% } must not shrink it */
    .header .logo img {
        display: block;
        width: auto;
        height: 50px !important;
        max-height: none;
        max-width: none;
        object-fit: contain;
        object-position: left center;
        transform: none;
        transform-origin: center;
        filter: none;
    }

    .nav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 4px 10px;
        flex: 0 1 auto;
        min-width: 0;
        margin: 0;
    }

    .nav a {
        color: var(--nav-link);
        font-size: 13px;
        font-weight: bold;
        text-decoration: none;
        white-space: nowrap;
        letter-spacing: 0.01em;
    }

    .nav a:hover {
        color: #2f9e44;
        text-shadow: 0 0 8px rgba(216, 245, 162, 0.8);
    }

    .dropdown {
        position: relative;
        /* Keeps hover active while moving from trigger into the menu (no “dead air” gap) */
        padding-bottom: 6px;
        margin-bottom: -6px;
    }

    .dropdown > a {
        cursor: pointer;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        /* Touch the trigger slightly so the pointer never leaves .dropdown */
        top: calc(100% - 4px);
        margin-top: 0;
        padding-top: 6px;
        background: var(--dropdown-bg);
        min-width: 220px;
        border: 1px solid var(--dropdown-border);
        z-index: 1001;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    }

    .dropdown-content a {
        display: block;
        padding: 12px 16px;
        color: var(--nav-link);
        font-size: 15px;
        font-weight: 600;
    }

    .dropdown-content a:hover {
        background: var(--brand-red);
        color: var(--nav-link);
    }

    .dropdown:hover .dropdown-content,
    .dropdown:focus-within .dropdown-content {
        display: block;
    }

    /* ----- Hero slider (home) ----- */
    .slider {
        position: relative;
        width: 100%;
        height: min(78vh, 720px);
        min-height: 280px;
        overflow: hidden;
        background: var(--slider-bg);
        margin: 0;
    }

    /*
    * Home hero: use a definite height (not aspect-ratio + height:auto + % children).
    * When .slider__viewport’s height:100% failed to resolve, the hero collapsed and
    * the next .services block (72px padding + light bg) looked like a huge “white gap”.
    */
    body.home #main > .slider {
        position: relative;
        width: 100%;
        max-width: 100%;
        /* Cancel the “dead” band: body padding reserves header space, but that strip can still
        show the page background; pull hero up so it starts under the fixed bar. */
        margin-top: calc(-1 * var(--header-offset));
        z-index: 0;
        height: auto;
        min-height: 0;
        max-height: none;
        /* Taller than 8/3 so subjects + caption fit; caption strip is never clipped */
        aspect-ratio: 2 / 1;
        padding: 0 0 max(8px, env(safe-area-inset-bottom)) 0;
        box-sizing: border-box;
        background: #2f6f3e;
        overflow: hidden;
    }

    .slider__viewport {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    body.home #main > .slider .slider__viewport {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        min-height: 100%;
        background: #2f6f3e;
    }

    /* One full-bleed slide: image area + fixed caption (matches across all services) */
    body.home #main > .slider .slider__slide {
        position: absolute;
        inset: 0;
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        z-index: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
    }

    body.home #main > .slider .slider__slide.active {
        opacity: 1;
        visibility: visible;
        z-index: 1;
        pointer-events: auto;
    }

    body.home #main > .slider .slider__slide-media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: #2f6f3e;
        overflow: hidden;
    }

    body.home #main > .slider .slider__slide-media img {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        object-position: center center;
        box-sizing: border-box;
    }

    body.home #main > .slider .slider__caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        width: 100%;
        box-sizing: border-box;
        padding: clamp(10px, 2.2vw, 18px) clamp(14px, 3.5vw, 28px) clamp(12px, 2.8vw, 22px);
        text-align: center;
        background:
            radial-gradient(ellipse 85% 120% at 50% 100%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.35) 52%, transparent 72%),
            linear-gradient(180deg, rgba(20, 55, 32, 0.2) 0%, rgba(15, 45, 28, 0.75) 100%);
    }

    body.home #main > .slider .slider__title {
        margin: 0 0 clamp(6px, 1.5vw, 10px);
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: clamp(1.35rem, 3.8vw, 2.35rem);
        font-weight: 700;
        color: #8b1538;
        line-height: 1.15;
        letter-spacing: 0.02em;
        text-shadow: 0 0 24px rgba(255, 255, 255, 0.95), 0 2px 8px rgba(0, 0, 0, 0.35);
    }

    body.home #main > .slider .slider__cta.btn {
        margin-top: 0;
        margin-bottom: 0;
        padding: 10px 22px;
        font-size: 0.95rem;
    }

    /* Non-home or legacy slider images (if any) */
    .slider .slider-img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center center;
        opacity: 0;
        visibility: hidden;
        z-index: 0;
    }

    .slider .slider-img.active {
        opacity: 1;
        visibility: visible;
        z-index: 1;
    }

    /* Prev / next (manual) */
    .slider__nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 6;
        width: 46px;
        height: 46px;
        padding: 0;
        margin: 0;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.45);
        color: #fff;
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    }

    .slider__nav:hover {
        background: rgba(196, 0, 0, 0.85);
        border-color: rgba(255, 255, 255, 0.55);
    }

    .slider__nav:focus-visible {
        outline: 3px solid var(--accent-soft);
        outline-offset: 2px;
    }

    .slider__nav--prev {
        left: max(10px, env(safe-area-inset-left));
    }

    .slider__nav--next {
        right: max(10px, env(safe-area-inset-right));
    }

    @media (max-width: 600px) {
        body.home #main > .slider {
            height: auto;
            min-height: 0;
            max-height: none;
            aspect-ratio: 2 / 1;
            padding-left: 0;
            padding-right: 0;
        }

        .slider__nav {
            width: 40px;
            height: 40px;
            font-size: 1.15rem;
        }
    }

    /* ----- About page ----- */
    .about-hero {
        background: linear-gradient(135deg, var(--about-hero-start) 0%, var(--about-hero-end) 100%);
        color: var(--nav-link);
        text-align: center;
        padding: 42px 20px;
    }

    .about-hero h1 {
        margin: 0;
        font-size: clamp(1.5rem, 4vw, 2.25rem);
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .about-content {
        max-width: 880px;
        margin: 0 auto;
        padding: 36px 22px 72px;
    }

    .about-content h2 {
        margin: 2rem 0 0.75rem;
        font-size: 1.25rem;
        color: var(--brand-red);
    }

    .about-content h2:first-of-type {
        margin-top: 0;
    }

    .about-content p {
        margin: 0 0 1rem;
        color: var(--muted);
    }

    .about-content ul.points {
        margin: 0 0 1rem;
        padding-left: 1.25rem;
        color: var(--muted);
    }

    .about-content ul.points li {
        margin-bottom: 0.45rem;
    }

    /* ----- Services grid ----- */
.services {
        padding: 72px 24px;
    text-align: center;
        background: var(--section-soft-bg);
    }

    .services > h2 {
        margin-top: 0;
        font-size: 1.75rem;
        color: #542c97;
        letter-spacing: 0.02em;
}

.grid {
    display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
        max-width: 1200px;
        margin: 32px auto 0;
}

.card {
        border: 1px solid rgba(123, 44, 191, 0.18);
        padding: 12px;
        background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%);
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(90, 24, 154, 0.12);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
        border-radius: 10px;
    }

    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 34px rgba(90, 24, 154, 0.2);
    }

    /* Home: two service cards per row, larger clearer images (body prefix beats generic .grid) */
    body.home .services .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 36px;
        max-width: 1080px;
    }

    body.home .services .card {
        padding: 16px 16px 18px;
    }

    body.home .services .card img {
        width: 100%;
        max-width: none;
        height: 190px !important;
        max-height: 190px;
        min-height: 0;
        object-fit: cover !important;
        object-position: center top;
        background: transparent;
        border-radius: 8px;
        display: block;
    }

    body.home .services .card .service-card__title {
        display: none;
    }

    .service-title,
    .card-title,
    .card h3 {
        display: none !important;
    }

    .card-body {
        padding-bottom: 10px !important;
    }

    /* Final header stripe override: dark (not black) */
    .header,
    .header-inner,
    .navbar,
    .site-header {
        background: #244b2f !important;
        background-image: none !important;
    }

    .nav a,
    .dropdown > a {
        color: #f3ffe9 !important;
    }

    .dropdown-content a,
    .dropdown-content a:hover {
        color: #001f54 !important;
    }

/* ===== Premium UI polish (CSS-only, no content/image changes) ===== */
:root {
    --premium-shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.12);
    --premium-shadow-strong: 0 20px 48px rgba(15, 23, 42, 0.22);
    --premium-border: rgba(255, 255, 255, 0.32);
    --premium-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1));
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(1200px 500px at 8% -5%, rgba(46, 204, 113, 0.12) 0%, transparent 60%),
        radial-gradient(1100px 480px at 92% 0%, rgba(52, 152, 219, 0.1) 0%, transparent 62%),
        #edf7ec;
}

.header,
.header-inner,
.navbar,
.site-header {
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.nav a,
.dropdown > a {
    position: relative;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.nav a::after,
.dropdown > a::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -4px;
    height: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
    background: rgba(255, 255, 255, 0.85);
}

.nav a:hover::after,
.nav a:focus-visible::after,
.dropdown > a:hover::after,
.dropdown > a:focus-visible::after {
    transform: scaleX(1);
}

.dropdown-content {
    border-radius: 12px;
    overflow: hidden;
    background: var(--premium-glass), #bcecc8;
    border: 1px solid var(--premium-border);
    box-shadow: var(--premium-shadow-soft);
}

.slider,
.service-hero,
.services,
.contact-section,
.about-content,
.service-prose,
.feature {
    border-radius: 16px;
}

.services,
.contact-section,
.about-content,
.service-prose {
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow: var(--premium-shadow-soft);
}

.card,
.service-hub-card {
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow: var(--premium-shadow-soft) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.card:hover,
.service-hub-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--premium-shadow-strong) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
}

.btn,
.slider__cta.btn,
.service-hub-card__cta {
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn:hover,
.slider__cta.btn:hover,
.service-hub-card__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(236, 72, 153, 0.42);
    filter: saturate(108%);
}

.form input,
.form textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form input:focus,
.form textarea:focus {
    border-color: rgba(34, 139, 34, 0.72);
    box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.16);
    outline: none;
    background: #fcfffb;
}

.map iframe {
    border-radius: 14px;
    box-shadow: var(--premium-shadow-soft);
}

.whatsapp {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28) !important;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Final Theme Refresh: Navy + dynamic slider ===== */
:root {
    --header-offset: 98px !important;
}

body {
    background:
        radial-gradient(1200px 600px at 5% -10%, rgba(37, 99, 235, 0.2) 0%, transparent 62%),
        radial-gradient(1200px 600px at 95% -10%, rgba(14, 165, 233, 0.15) 0%, transparent 62%),
        #eaf1ff !important;
}

.header,
.header-inner,
.navbar,
.site-header {
    min-height: 98px !important;
    height: 98px !important;
    background: linear-gradient(90deg, #0b1f5e 0%, #1d4ed8 30%, #06b6d4 52%, #7c3aed 74%, #ec4899 100%) !important;
    background-size: 180% 180% !important;
    animation: topStripeShift 10s ease infinite;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

@keyframes topStripeShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.logo img,
.site-logo img {
    height: 64px !important;
}

.nav a,
.dropdown > a {
    color: #f8fbff !important;
}

.slider {
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(8, 25, 77, 0.28) !important;
}

body.home #main > .slider .slider__slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 54%, rgba(255, 255, 255, 0.08) 0%, transparent 38%),
        linear-gradient(180deg, rgba(6, 24, 74, 0.25) 0%, rgba(6, 24, 74, 0.05) 40%, rgba(6, 24, 74, 0.34) 100%);
}

body.home #main > .slider .slider__slide-media img {
    transition: transform 0.9s ease, filter 0.9s ease !important;
    filter: saturate(1.08) contrast(1.05);
}

body.home #main > .slider .slider__slide.active .slider__slide-media img {
    transform: scale(1.025);
}

/* remove any leftover manual service name label if present */
.card__service-name {
    display: none !important;
}

.services,
.contact-section,
.about-content,
.service-prose,
.feature {
    box-shadow: 0 14px 38px rgba(13, 39, 109, 0.16) !important;
}

/* ===== Absolute final: Navy theme + large multicolor top stripe ===== */
:root {
    /* 98px base + 3 inches (CSS in = 96px) */
    --header-offset: calc(98px + 3in) !important;
}

body {
    background:
        radial-gradient(1200px 700px at 10% -5%, rgba(56, 189, 248, 0.15) 0%, transparent 60%),
        radial-gradient(1200px 700px at 90% 0%, rgba(99, 102, 241, 0.16) 0%, transparent 62%),
        #0a1638 !important;
    color: #e8eeff !important;
}

/* top stripe: multicolor + larger height */
.header,
.header-inner,
.navbar,
.site-header {
    min-height: calc(98px + 3in) !important;
    height: calc(98px + 3in) !important;
    background: linear-gradient(110deg, #1e3a8a 0%, #2563eb 18%, #06b6d4 36%, #22c55e 54%, #eab308 70%, #f97316 85%, #ec4899 100%) !important;
    background-size: 220% 220% !important;
    animation: topStripeShift 12s ease-in-out infinite !important;
}

/* replace remaining green blocks with navy variants */
.slider,
.feature,
.services,
.contact-section,
.about-content,
.service-prose,
.service-hub-card__media,
.page-service-single .service-hero,
body.home #main > .slider .slider__viewport,
body.home #main > .slider .slider__slide,
body.home #main > .slider .slider__slide-media,
.page-service-single .service-hero__media {
    background-color: #0f1f4d !important;
}

.services,
.contact-section,
.about-content,
.service-prose {
    background-image: linear-gradient(145deg, rgba(23, 43, 97, 0.92), rgba(12, 28, 71, 0.95)) !important;
    color: #e8eeff !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

.service-prose p,
.service-prose li,
.about-content p,
.about-content li,
.services-page-lead {
    color: #dbe7ff !important;
}

.services > h2,
.about-hero h1,
.services-page-hero h1,
.feature__content h2 {
    color: #f8fbff !important;
}

.feature {
    background: linear-gradient(135deg, #132b69 0%, #0f1f4d 55%, #0b1738 100%) !important;
}

.feature__content p,
.feature ul,
.feature ul li {
    color: #e9efff !important;
}

/* Service detail hero: show lower banner text lines instead of full contain frame */
.page-service-single .service-hero__media img {
    object-fit: cover !important;
    object-position: center 86% !important;
}

    /* Final footer override: dark green (not black) */
    .footer {
        background: #244b2f !important;
        background-image: none !important;
    }

    .footer h3 {
        color: #f1ffe7 !important;
    }

    .footer p {
        color: #e3f8dc !important;
    }

    /* Hide stray card copy */
    body.home .services .card h1,
    body.home .services .card h2,
    body.home .services .card h3,
    body.home .services .card h4,
    body.home .services .card h5,
    body.home .services .card h6,
    body.home .services .card p,
    body.home .services .card small,
    body.home .services .card .service-title,
    body.home .services .card .card-title,
    body.home .services .card .service-card__title,
    body.home .services .card .card__service-name {
        display: none !important;
    }

    body.home .services .card h3.card__service-name {
        display: block !important;
        margin: 12px 8px 6px !important;
        font-size: 1rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        color: #1f5c2b !important;
        letter-spacing: 0.01em !important;
    }

    body.home .services .card .btn {
        margin-top: 8px;
    }

    @media (max-width: 600px) {
        body.home .services .grid {
            grid-template-columns: 1fr;
            gap: 22px;
        }

        body.home .services .card img {
            max-height: min(680px, 94vw);
        }
}

.btn {
        background: linear-gradient(135deg, #ff4d6d 0%, #f72585 55%, #b5179e 100%);
        color: #fff;
    padding: 10px 18px;
    display: inline-block;
    margin-top: 10px;
        text-decoration: none;
        font-weight: bold;
        border-radius: 999px;
        box-shadow: 0 10px 18px rgba(247, 37, 133, 0.32);
    }

    .btn:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
        box-shadow: 0 14px 22px rgba(247, 37, 133, 0.42);
    }

    .btn--outline {
        background: transparent;
        color: #fff;
        border: 2px solid rgba(255, 255, 255, 0.85);
        padding: 10px 20px;
        border-radius: 4px;
        text-decoration: none;
        font-weight: bold;
        display: inline-block;
        margin-top: 8px;
    }

    .btn--outline:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: #fff;
        filter: none;
    }

    .page-service-single .btn--outline {
        color: var(--brand-red);
        border-color: var(--brand-red);
    }

    .page-service-single .btn--outline:hover {
        background: rgba(196, 0, 0, 0.08);
        color: var(--brand-red);
    }

    @supports (color: color-mix(in srgb, red, blue)) {
        .page-service-single .btn--outline:hover {
            background: color-mix(in srgb, var(--brand-red) 14%, transparent);
        }
    }

    /* Hero sits on dark band — keep outline button light */
    .service-hero .btn--outline {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.9);
    }

    .service-hero .btn--outline:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        border-color: #fff;
    }

    /* ----- Feature strip ----- */
.feature {
        background: #e10000;
        color: #fff;
        padding: 34px 24px 30px;
    display: flex;
        justify-content: center;
    align-items: center;
}

    .feature__content {
        width: 100%;
        max-width: 1100px;
        text-align: center;
    }

    .feature__content h2 {
        margin: 0 0 8px;
        color: #fff;
        font-size: clamp(1.65rem, 2.5vw, 2.2rem);
        font-weight: 800;
    }

    .feature__content p {
        margin: 0 auto 20px;
        max-width: 860px;
        color: #fff;
        font-size: 1.04rem;
        line-height: 1.5;
    }

    .feature__inner {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 32px;
        /* Full width of green strip so image % is not capped by a narrow max-width (that made “+25%” smaller in px) */
        width: 100%;
        max-width: none;
    }

.feature img {
        box-sizing: border-box;
        display: block;
        flex: 0 0 34%;
        min-width: 0;
        width: 100%;
        max-width: 360px;
        height: auto;
        align-self: center;
        padding: 0;
        object-fit: contain;
    }

    .feature ul {
        margin: 0;
        padding-left: 1.25rem;
        text-align: left;
        flex: 0 1 auto;
        min-width: 0;
        color: #fff;
        list-style: none;
    }

    .feature ul li {
        margin-bottom: 10px;
        font-size: 1.55rem;
        font-weight: 700;
        line-height: 1.25;
    }

    /* ----- Contact section ----- */
.contact-section {
    display: flex;
        flex-wrap: wrap;
        padding: 48px 24px;
        gap: 28px;
        max-width: 1200px;
        margin: 0 auto;
        background: linear-gradient(135deg, rgba(243, 255, 240, 0.9) 0%, rgba(229, 252, 227, 0.9) 100%);
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(64, 145, 108, 0.16);
    }

    .map {
        flex: 1 1 320px;
        min-width: 0;
    }

    .form {
        flex: 1 1 320px;
        min-width: 0;
        padding: 0;
    }

    .form input,
    .form textarea {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
        font-family: inherit;
        border: 1px solid rgba(82, 183, 136, 0.45);
        border-radius: 10px;
        background: #fff;
}

.form button {
        background: linear-gradient(135deg, #2f9e44 0%, #2b8a3e 55%, #1b5e20 100%);
        color: #fff;
    padding: 12px;
    border: none;
    width: 100%;
        font-weight: bold;
        cursor: pointer;
        border-radius: 10px;
}

    /* ----- Footer ----- */
.footer {
        background: linear-gradient(110deg, #2d6a4f 0%, #40916c 40%, #52b788 100%);
        color: var(--nav-link);
        padding: 40px 24px;
    display: flex;
        flex-wrap: wrap;
    justify-content: space-between;
        gap: 28px;
    }

    .footer h3 {
        margin-top: 0;
        color: var(--footer-heading);
    }

    .footer div {
        flex: 1 1 200px;
        min-width: 160px;
    }

    .footer p {
        margin: 0.35rem 0;
        color: var(--footer-text);
    }

    /* ----- WhatsApp float (official-style circle) ----- */
.whatsapp {
    position: fixed;
        bottom: 22px;
        right: 22px;
        z-index: 998;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: #25d366;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .whatsapp:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 22px rgba(37, 211, 102, 0.55);
    }

    .whatsapp__icon {
        display: block;
        flex-shrink: 0;
    }

    /* ----- Theme picker (inside black header, top-right cluster on home) ----- */
    .theme-picker-dock--in-header {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 3px 5px;
        margin: 0;
        padding: 0;
        max-width: none;
        background: none;
        border: none;
        box-shadow: none;
    }

    /* Save vertical space; aside still has aria-label */
    .theme-picker-dock--in-header .theme-picker-dock__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .theme-picker-dock--in-header .theme-swatches {
        justify-content: flex-end;
        gap: 3px;
        flex-wrap: nowrap;
    }

    .theme-picker-dock--in-header .theme-swatch {
        width: 14px;
        height: 14px;
        border-width: 1px;
    }

    .theme-picker-dock--in-header .theme-swatch[aria-pressed="true"] {
        outline: 2px solid rgba(255, 255, 255, 0.85);
        outline-offset: 1px;
    }

    @media (max-width: 520px) {
        .theme-picker-dock--in-header .theme-swatch {
            width: 13px;
            height: 13px;
        }
    }

    .theme-swatches {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .theme-swatch {
        position: relative;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 2px solid rgba(0, 0, 0, 0.15);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .theme-swatch:hover {
        transform: scale(1.08);
    }

    .theme-swatch[aria-pressed="true"] {
        outline: 2px solid #111;
        outline-offset: 3px;
    }

    /* ----- Alternate color themes ----- */

    html[data-theme="forest"] {
        --brand-red: #22c55e;
        --accent-soft: #bbf7d0;
        --header-bg: #0d2818;
        --header-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
        --dropdown-bg: #123222;
        --dropdown-border: #1d4d36;
        --slider-bg: #071910;
        --about-hero-start: #0f3d26;
        --about-hero-end: #166534;
        --footer-bg: #071a10;
        --footer-heading: #ecfdf5;
        --footer-text: #bbf7d0;
        --page-services-bg: #ecfdf5;
        --section-soft-bg: #f0fdf4;
        --form-submit-bg: #15803d;
        --service-hero-start: #0f3d26;
        --service-hero-mid: #166534;
        --service-hero-end: #14532d;
        --surface-tint-1: #f0fdf4;
        --surface-tint-2: #dcfce7;
        --surface-tint-3: #bbf7d0;
    }

    html[data-theme="ocean"] {
        --brand-red: #0ea5e9;
        --accent-soft: #bae6fd;
        --header-bg: #0c2540;
        --header-shadow: 0 2px 14px rgba(8, 47, 73, 0.5);
        --dropdown-bg: #0f3557;
        --dropdown-border: #164e73;
        --slider-bg: #082f49;
        --about-hero-start: #0c4a6e;
        --about-hero-end: #075985;
        --footer-bg: #082f49;
        --footer-heading: #e0f2fe;
        --footer-text: #bae6fd;
        --page-services-bg: #e0f2fe;
        --section-soft-bg: #f0f9ff;
        --form-submit-bg: #0284c7;
        --service-hero-start: #0c4a6e;
        --service-hero-mid: #0369a1;
        --service-hero-end: #075985;
        --surface-tint-1: #f0f9ff;
        --surface-tint-2: #e0f2fe;
        --surface-tint-3: #bae6fd;
    }

    html[data-theme="sunset"] {
        --brand-red: #ea580c;
        --accent-soft: #fed7aa;
        --header-bg: #2d1b4e;
        --header-shadow: 0 2px 14px rgba(45, 27, 78, 0.45);
        --dropdown-bg: #3b2766;
        --dropdown-border: #5b21b6;
        --slider-bg: #1e1b4b;
        --about-hero-start: #4c1d95;
        --about-hero-end: #6d28d9;
        --footer-bg: #1e1b4b;
        --footer-heading: #fef3c7;
        --footer-text: #fde68a;
        --page-services-bg: #fff7ed;
        --section-soft-bg: #fffbeb;
        --form-submit-bg: #c2410c;
        --service-hero-start: #4c1d95;
        --service-hero-mid: #5b21b6;
        --service-hero-end: #4c1d95;
        --surface-tint-1: #fffbeb;
        --surface-tint-2: #ffedd5;
        --surface-tint-3: #fed7aa;
    }

    html[data-theme="slate"] {
        --brand-red: #6366f1;
        --accent-soft: #c7d2fe;
        --header-bg: #1e293b;
        --header-shadow: 0 2px 14px rgba(15, 23, 42, 0.45);
        --dropdown-bg: #273549;
        --dropdown-border: #334155;
        --slider-bg: #0f172a;
        --about-hero-start: #334155;
        --about-hero-end: #475569;
        --footer-bg: #0f172a;
        --footer-heading: #f1f5f9;
        --footer-text: #cbd5e1;
        --page-services-bg: #e2e8f0;
        --section-soft-bg: #f8fafc;
        --form-submit-bg: #4f46e5;
        --service-hero-start: #1e293b;
        --service-hero-mid: #334155;
        --service-hero-end: #0f172a;
        --surface-tint-1: #f8fafc;
        --surface-tint-2: #f1f5f9;
        --surface-tint-3: #e2e8f0;
    }

    html[data-theme="ruby"] {
        --brand-red: #be123c;
        --accent-soft: #fecdd3;
        --header-bg: #1a0508;
        --header-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
        --dropdown-bg: #2d0a12;
        --dropdown-border: #4c0519;
        --slider-bg: #0f0204;
        --about-hero-start: #4c0519;
        --about-hero-end: #881337;
        --footer-bg: #0f0204;
        --footer-heading: #ffe4e6;
        --footer-text: #fecdd3;
        --page-services-bg: #fff1f2;
        --section-soft-bg: #fff5f6;
        --form-submit-bg: #9f1239;
        --service-hero-start: #4c0519;
        --service-hero-mid: #881337;
        --service-hero-end: #4c0519;
        --surface-tint-1: #fff5f6;
        --surface-tint-2: #ffe4e6;
        --surface-tint-3: #fecdd3;
    }

    html[data-theme="gold"] {
        --brand-red: #ca8a04;
        --accent-soft: #fde68a;
        --header-bg: #171717;
        --header-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
        --dropdown-bg: #262626;
        --dropdown-border: #404040;
        --slider-bg: #0a0a0a;
        --about-hero-start: #292524;
        --about-hero-end: #44403c;
        --footer-bg: #0c0a09;
        --footer-heading: #fef3c7;
        --footer-text: #fde68a;
        --page-services-bg: #fafaf9;
        --section-soft-bg: #fafaf9;
        --form-submit-bg: #a16207;
        --service-hero-start: #292524;
        --service-hero-mid: #44403c;
        --service-hero-end: #1c1917;
        --surface-tint-1: #fafaf9;
        --surface-tint-2: #f5f5f4;
        --surface-tint-3: #e7e5e4;
    }

    html[data-theme="teal"] {
        --brand-red: #14b8a6;
        --accent-soft: #99f6e4;
        --header-bg: #0f766e;
        --header-shadow: 0 2px 14px rgba(15, 118, 110, 0.4);
        --dropdown-bg: #115e59;
        --dropdown-border: #134e4a;
        --slider-bg: #042f2e;
        --about-hero-start: #134e4a;
        --about-hero-end: #0f766e;
        --footer-bg: #042f2e;
        --footer-heading: #ccfbf1;
        --footer-text: #99f6e4;
        --page-services-bg: #ecfdf5;
        --section-soft-bg: #f0fdfa;
        --form-submit-bg: #0d9488;
        --service-hero-start: #134e4a;
        --service-hero-mid: #0f766e;
        --service-hero-end: #115e59;
        --surface-tint-1: #f0fdfa;
        --surface-tint-2: #ccfbf1;
        --surface-tint-3: #99f6e4;
    }

    /* ----- Contact page (when used with header include) ----- */
    .contact-page {
        max-width: 1100px;
        margin: 32px auto 48px;
        padding: 0 22px;
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
    }

    .contact-page .left,
    .contact-page .right {
        flex: 1 1 300px;
        min-width: 0;
    }

    .contact-page .right form input,
    .contact-page .right form textarea {
        width: 100%;
        padding: 10px;
        margin: 8px 0;
    }

    .contact-page .right form button {
        padding: 10px 20px;
        background: var(--brand-red);
        color: var(--nav-link);
        border: none;
        cursor: pointer;
    }

    .contact-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        max-width: 520px;
        position: relative;
    }

    .contact-form input,
    .contact-form textarea {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .contact-form button {
        width: 100%;
        margin-top: 4px;
        font-weight: bold;
    }

    .contact-honeypot {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .contact-form__alert {
        padding: 10px 14px;
        border-radius: 8px;
        margin: 0 0 14px;
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .contact-form__alert--error {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #991b1b;
    }

    /* Thank-you popup (contact form) */
    .modal-thanks {
        position: fixed;
        inset: 0;
        z-index: 2000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .modal-thanks--open {
        display: flex;
    }

    .modal-thanks__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        cursor: pointer;
    }

    .modal-thanks__panel {
        position: relative;
        background: #fff;
        padding: 28px 26px 22px;
        border-radius: 14px;
        max-width: 420px;
        width: 100%;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
        text-align: center;
        border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .modal-thanks__title {
        margin: 0 0 12px;
        color: var(--brand-red);
        font-size: 1.45rem;
    }

    .modal-thanks__text {
        margin: 0 0 22px;
        line-height: 1.6;
        color: var(--muted);
        font-size: 1.05rem;
    }

    .modal-thanks__btn {
        margin-top: 0;
    }

    body.modal-thanks-active {
        overflow: hidden;
    }

    /* ----- Services detail page ----- */
    .page-services {
        background: var(--page-services-bg);
    }

    .services-main {
        padding-bottom: 48px;
    }

    .services-page-hero {
        text-align: center;
        padding: 28px 20px 32px;
        background: #fff;
        border-bottom: 1px solid #e5e5e5;
    }

    .services-page-hero h1 {
        margin: 0 0 10px;
        color: var(--brand-red);
        font-size: clamp(1.6rem, 4vw, 2rem);
    }

    .services-page-lead {
        margin: 0 auto;
        max-width: 640px;
        color: var(--muted);
        font-size: 1rem;
    }

    /* ----- Services hub (services.php) ----- */
    .services-hub {
        padding-bottom: 56px;
    }

    .services-hub-grid {
        max-width: 1120px;
        margin: 0 auto;
        padding: 8px 20px 40px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 22px;
    }

    .service-hub-card {
        margin: 0;
        background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 22px rgba(90, 24, 154, 0.12);
        border: 1px solid rgba(123, 44, 191, 0.14);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .service-hub-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 32px rgba(90, 24, 154, 0.2);
    }

    .service-hub-card__link {
        display: block;
        padding: 0 0 18px;
        text-decoration: none;
        color: inherit;
        height: 100%;
    }

    .service-hub-card__media {
        position: relative;
        width: 100%;
        aspect-ratio: 2 / 1;
        min-height: 0;
        height: auto;
        overflow: hidden;
        background: #f0f0f0;
        padding: 0;
        box-sizing: border-box;
    }

    .service-hub-card__media img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .service-hub-card h2 {
        margin: 16px 18px 8px;
        font-size: 1.2rem;
        color: #1a1a1a;
        font-family: Georgia, 'Times New Roman', Times, serif;
        letter-spacing: -0.02em;
    }

    .service-hub-card p {
        margin: 0 18px 12px;
        font-size: 0.95rem;
        color: var(--muted);
        line-height: 1.55;
    }

    .service-hub-card__cta {
        margin: 0 18px;
        font-size: 0.9rem;
        font-weight: bold;
        color: var(--brand-red);
    }

    .service-hub-card__link:hover .service-hub-card__cta {
        text-decoration: underline;
    }

    /* ----- Single service page (premium layout) ----- */
    .page-service-single {
        background: linear-gradient(165deg, var(--surface-tint-1) 0%, var(--surface-tint-2) 45%, var(--surface-tint-3) 100%);
    }

    .service-single {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0 0 64px;
    }

    .service-hero {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: center;
        background: linear-gradient(135deg, var(--service-hero-start) 0%, var(--service-hero-mid) 55%, var(--service-hero-end) 100%);
        color: var(--nav-link);
        border-radius: 0;
        padding: 16px 20px 18px;
        margin: 0 0 20px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .service-hero__media {
        display: block;
        background: transparent;
        border-radius: 0;
        padding: 0;
        min-height: 0;
        overflow: hidden;
    }

    .service-hero__media img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        min-height: 0;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 21 / 9;
        border-radius: 0;
        display: block;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }

    .service-hero__intro,
    .service-prose,
    .service-single > p {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
    }

    .service-eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.14em;
        font-size: 0.7rem;
        color: var(--accent-soft);
        font-weight: bold;
        margin: 0 0 10px;
    }

    .service-hero__intro h1 {
        margin: 0 0 12px;
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: clamp(1.65rem, 4.2vw, 2.35rem);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .service-hero__tagline {
        margin: 0 0 6px;
        font-size: 0.95rem;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.82);
        max-width: 36em;
    }

    .service-prose {
        background: #fff;
        border-radius: 16px;
        padding: 32px 36px 36px;
        box-shadow: 0 6px 28px rgba(0, 0, 0, 0.07);
        border: 1px solid rgba(0, 0, 0, 0.05);
        font-size: 1.0625rem;
        line-height: 1.82;
        color: #3d3d3d;
        font-family: Georgia, 'Times New Roman', Times, serif;
    }

    .service-prose p {
        margin: 0 0 1.15em;
    }

    .service-prose p:last-child {
        margin-bottom: 0;
    }

    .service-prose strong {
        color: var(--text);
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 700;
    }

    @media (max-width: 768px) {
        .service-hero {
            padding: 12px 12px 14px;
        }

        .service-hero__media img {
            aspect-ratio: 16 / 9;
        }

        .service-prose {
            padding: 24px 20px 28px;
            font-size: 1rem;
        }

        .service-hero__intro,
        .service-prose,
        .service-single > p {
            padding-left: 12px;
            padding-right: 12px;
        }
    }

    @media (max-width: 720px) {
        .header-controls {
            justify-content: flex-end;
            margin-left: 0;
            padding-top: 4px;
        }

        .nav a {
            font-size: 12px;
        }
    }

    @media (max-width: 480px) {
        .header-inner {
            gap: 6px 8px;
            height: 56px;
            padding-block: 4px;
        }

        .header-controls {
            margin-left: 0;
            padding-top: 2px;
        }

        .nav a {
            font-size: 11px;
        }

        .theme-picker-dock--in-header .theme-swatch {
            width: 12px;
            height: 12px;
        }
    }

    @media (max-width: 600px) {
        .nav a {
            font-size: 12px;
        }

        .dropdown-content {
            left: 0;
            transform: none;
        }
    }

    /* ===== FINAL CLEAN HEADER + CARD TEXT HIDE ===== */
    .header {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    .header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 56px !important;
        height: 56px !important;
        padding: 4px 12px !important;
    }

    .logo img,
    .site-logo img {
        height: 46px !important;
        width: auto !important;
        max-width: none !important;
    }

    .header-controls {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin-left: auto !important;
        flex-wrap: nowrap !important;
    }

    .nav {
        order: 2;
        display: flex !important;
        align-items: center !important;
        gap: 4px 10px !important;
        flex-wrap: nowrap !important;
    }

    .nav a,
    .dropdown > a {
        color: #f3ffe9 !important;
    }

    .header-call-us {
        order: 1;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        align-self: center;
    }

    .header-call-us img {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        object-fit: cover;
    }

    .header-call-us a {
        color: #ffd43b !important;
        text-decoration: none;
        font-weight: 800;
        font-size: 18px;
        letter-spacing: 0.02em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    }

    .card h3,
    .card p,
    .service-title,
    .card-title {
        display: none !important;
    }

    .card-body {
        padding-bottom: 10px !important;
    }

    @media (max-width: 900px) {
        .header-inner {
            min-height: 52px !important;
            height: 52px !important;
            padding: 3px 8px !important;
        }

        .logo img,
        .site-logo img {
            height: 40px !important;
        }

        .header-call-us a {
            display: none;
        }

        .header-call-us img {
            width: 28px;
            height: 28px;
        }
    }

    /* ===== MOBILE ONLY HEADER FIX (does not affect desktop) ===== */
    @media (max-width: 768px) {
        :root {
            /* Match header.php inline bar height (56px) so no dead band under fixed header */
            --header-offset: 56px !important;
        }

        .header {
            height: auto !important;
            min-height: 56px !important;
            padding: 0 !important;
        }

        .header-inner {
            min-height: 56px !important;
            height: 56px !important;
            padding: 4px 8px !important;
            gap: 6px !important;
        }

        .header .logo img,
        .header .site-logo img {
            height: 34px !important;
            width: auto !important;
            max-width: none !important;
        }

        .header-controls {
            margin-left: auto !important;
            gap: 6px !important;
        }

        .header-call-us {
            gap: 4px !important;
        }

        .header-call-us img,
        .header-call-us__img {
            width: 18px !important;
            height: 18px !important;
        }

        /* Keep mobile header clean: show icon, hide long number text */
        .header-call-us a,
        .header-call-us__number {
            display: none !important;
        }

        .nav {
            gap: 4px 8px !important;
        }

        .nav a,
        .dropdown > a {
            font-size: 10px !important;
        }
    }  

    /* ===== SERVICE DETAIL IMAGE FULL VIEW (all Read More pages) ===== */
    .page-service-single .service-hero {
        display: block !important;
    }

    .page-service-single .service-hero__media {
        width: 100% !important;
        max-width: none !important;
    }

    .page-service-single .service-hero__media img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    .page-service-single .service-hero__intro {
        margin-top: 12px;
    }

    /* ===== FORCE FULL-WINDOW SERVICE IMAGE (all Read More pages) ===== */
    .page-service-single .service-hero {
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 0 20px !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .page-service-single .service-hero__media {
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: #2f6f3e !important;
        aspect-ratio: 2 / 1 !important;
    }

    .page-service-single .service-hero__media img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 2 / 1 !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .page-service-single .service-hero__intro {
        max-width: 1100px !important;
        margin: 14px auto 0 !important;
        padding: 0 20px !important;
    }

/* ===== FINAL: SERVICE HERO FITS SCREEN (no initial scroll) ===== */
.page-service-single .service-hero {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100vh - var(--header-offset)) !important;
    min-height: 320px !important;
    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #2f6f3e !important;
    box-shadow: none !important;
}

.page-service-single .service-hero__media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.page-service-single .service-hero__media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.page-service-single .service-hero__intro {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 3 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(12px, 2.2vw, 20px) 20px calc(12px + env(safe-area-inset-bottom)) !important;
    text-align: center !important;
    background:
        radial-gradient(ellipse 85% 120% at 50% 100%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 52%, transparent 72%),
        linear-gradient(180deg, rgba(20, 55, 32, 0.2) 0%, rgba(15, 45, 28, 0.72) 100%) !important;
}

/* ===== FINAL MOBILE COMPATIBILITY (desktop unchanged) ===== */
@media (max-width: 768px) {
    :root {
        --header-offset: 56px !important;
    }

    body {
        padding-top: var(--header-offset) !important;
    }

    .header {
        min-height: 56px !important;
        height: auto !important;
    }

    .header-inner {
        min-height: 56px !important;
        height: auto !important;
        padding: 4px 8px !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .logo img,
    .site-logo img,
    .header .logo img {
        height: 30px !important;
        width: auto !important;
    }

    .header-controls {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin-left: 0 !important;
        padding-top: 0 !important;
    }

    .header-call-us a,
    .header-call-us__number {
        display: none !important;
    }

    .header-call-us img,
    .header-call-us__img {
        width: 18px !important;
        height: 18px !important;
    }

    .nav {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav::-webkit-scrollbar {
        display: none;
    }

    .nav a,
    .dropdown > a {
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    body.home #main > .slider {
        width: 100% !important;
        margin: 0 !important;
        margin-top: calc(-1 * var(--header-offset)) !important;
        aspect-ratio: 2 / 1 !important;
        min-height: 200px !important;
    }

    .slider__nav {
        width: 34px !important;
        height: 34px !important;
        font-size: 1rem !important;
    }

    .services {
        padding: 30px 12px !important;
    }

    body.home .services .grid,
    .services-hub-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .about-hero {
        padding: 24px 12px !important;
    }

    .about-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .contact-page,
    .contact-section {
        display: block !important;
        margin: 16px 0 28px !important;
        padding: 0 12px !important;
        gap: 16px !important;
    }

    .contact-page .left,
    .contact-page .right,
    .map,
    .form {
        width: 100% !important;
    }

    .service-prose {
        padding: 18px 14px 22px !important;
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
    }

    .page-service-single .service-hero__intro {
        padding: 0 12px !important;
    }

    .whatsapp {
        width: 50px !important;
        height: 50px !important;
        right: 12px !important;
        bottom: 12px !important;
    }
}

@media (max-width: 768px) {
    .feature {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 28px 12px;
    }

    .feature__content h2 {
        font-size: 1.45rem;
    }

    .feature__content p {
        font-size: 0.94rem;
        margin-bottom: 16px;
    }

    .feature__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        max-width: none;
    }

    .feature img {
        flex: none;
        min-width: 0;
        width: 100%;
        max-width: 290px;
        height: auto;
        padding: 0;
        margin: 0 auto;
    }

    .feature ul {
        flex: none;
        width: 100%;
        padding-left: 1rem;
    }

    .feature ul li {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
}

/* ===== ABSOLUTE FINAL OVERRIDE: service hero must fit first viewport (desktop + mobile) ===== */
.page-service-single .service-hero {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100vh - var(--header-offset)) !important;
    min-height: 320px !important;
    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #2f6f3e !important;
    box-shadow: none !important;
}

.page-service-single .service-hero__media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    aspect-ratio: auto !important;
}

.page-service-single .service-hero__media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    aspect-ratio: auto !important;
}

.page-service-single .service-hero__intro {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 3 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(10px, 2vw, 18px) 14px calc(10px + env(safe-area-inset-bottom)) !important;
    text-align: center !important;
    background:
        radial-gradient(ellipse 85% 120% at 50% 100%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.32) 52%, transparent 72%),
        linear-gradient(180deg, rgba(20, 55, 32, 0.2) 0%, rgba(15, 45, 28, 0.72) 100%) !important;
}

/* ===== FINAL USER OVERRIDE: show full images, no manual text overlays ===== */
body.home #main > .slider {
    height: calc(100vh - var(--header-offset)) !important;
    min-height: 320px !important;
    aspect-ratio: auto !important;
}

body.home #main > .slider .slider__slide-media img {
    object-fit: contain !important;
    object-position: center center !important;
    background: #2f6f3e !important;
}

/* Keep only Read More button; remove heavy strip so image text remains visible */
body.home #main > .slider .slider__caption {
    background: none !important;
    padding: 0 0 calc(12px + env(safe-area-inset-bottom)) !important;
    text-align: center !important;
}

body.home #main > .slider .slider__cta.btn {
    margin-bottom: 8px !important;
}

/* Service detail pages: hide manually written heading/tagline block */
.page-service-single .service-hero__intro {
    display: none !important;
}

/* Services hub page: hide manual names/descriptions written below images */
.page-services .service-hub-card p {
    display: none !important;
}

.page-services .service-hub-card h2 {
    display: none !important;
}

.page-services .service-hub-card__cta {
    margin-top: 12px !important;
    display: inline-block !important;
}

/* ===== FINAL CONSISTENCY LOCK (slider + all service images) ===== */
/* Home slider: fixed consistent frame */
body.home #main > .slider {
    width: 100% !important;
    margin: 0 !important;
    margin-top: calc(-1 * var(--header-offset)) !important;
    height: min(calc(100vh - var(--header-offset)), 560px) !important;
    min-height: 320px !important;
    max-height: 560px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
}

body.home #main > .slider .slider__viewport,
body.home #main > .slider .slider__slide,
body.home #main > .slider .slider__slide-media {
    width: 100% !important;
    height: 100% !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

body.home #main > .slider .slider__slide-media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
}

/* Service detail pages: same visual frame as slider */
.page-service-single .service-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    height: min(calc(100vh - var(--header-offset)), 560px) !important;
    min-height: 320px !important;
    max-height: 560px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.page-service-single .service-hero__media {
    width: 100% !important;
    height: 100% !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.page-service-single .service-hero__media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
}

/* Services listing cards: unified ratio and fit */
.page-services .service-hub-card__media {
    aspect-ratio: 2 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #2f6f3e !important;
}

.page-services .service-hub-card__media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* ===== EXACT-RESOLUTION BANNER MODE (single image, full width, no initial scroll) ===== */
body.home #main > .slider {
    width: 100% !important;
    margin: 0 !important;
    margin-top: calc(-1 * var(--header-offset)) !important;
    height: calc(100vh - var(--header-offset)) !important;
    min-height: 320px !important;
    max-height: calc(100vh - var(--header-offset)) !important;
    overflow: hidden !important;
}

body.home #main > .slider .slider__viewport,
body.home #main > .slider .slider__slide,
body.home #main > .slider .slider__slide-media {
    width: 100% !important;
    height: 100% !important;
    background: #2f6f3e !important;
}

body.home #main > .slider .slider__slide-media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.page-service-single .service-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    height: calc(100vh - var(--header-offset)) !important;
    min-height: 320px !important;
    max-height: calc(100vh - var(--header-offset)) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.page-service-single .service-hero__media {
    width: 100% !important;
    height: 100% !important;
    background: #2f6f3e !important;
}

.page-service-single .service-hero__media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.page-services .service-hub-card__media {
    aspect-ratio: 12 / 5 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    background: #2f6f3e !important;
}

.page-services .service-hub-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Service content: emphasize first three words in first paragraph */
.service-prose__lead-words {
    font-weight: 800 !important;
    font-size: 1.22em !important;
    line-height: 1.1;
}

/* ===== Final layout correction ===== */
/* Reset exaggerated offset that caused large blank blue bands */
:root {
    --header-offset: 64px !important;
}

.header,
.header-inner,
.navbar,
.site-header {
    min-height: 64px !important;
    height: 64px !important;
}

/* Home: keep hero large and let only "Our Services" heading be visible initially */
body.home #main > .slider {
    margin-top: calc(-1 * var(--header-offset)) !important;
    height: calc(100vh - var(--header-offset) - 120px) !important;
    min-height: 420px !important;
    max-height: calc(100vh - var(--header-offset) - 120px) !important;
}

.services {
    padding-top: 18px !important;
}

.services > h2 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.home .services .grid {
    margin-top: 96px !important;
}

/* Service pages: remove top blue gap and lift banner up under header */
.page-service-single .service-hero {
    margin-top: calc(-1 * var(--header-offset)) !important;
    height: calc(100vh - var(--header-offset)) !important;
    max-height: calc(100vh - var(--header-offset)) !important;
}

/* Slider image slightly larger so in-image text is less dominant */
body.home #main > .slider .slider__slide-media img {
    transform: scale(1.0) !important;
    transform-origin: center center !important;
}

/* Keep banner text area visible in slider images */
body.home #main > .slider .slider__slide-media img {
    object-position: center center !important;
}

/* ===== Theme-match polish: footer + send + read more buttons ===== */
.footer {
    background: linear-gradient(115deg, #0b1f5e 0%, #123a8a 35%, #0f766e 62%, #155e75 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 -8px 24px rgba(3, 12, 44, 0.25) inset !important;
}

.footer h3 {
    color: #f8fbff !important;
}

.footer p,
.footer li,
.footer a {
    color: #d8e8ff !important;
}

.footer a:hover {
    color: #ffffff !important;
}

.form button,
button[type="submit"] {
    background: linear-gradient(100deg, #2563eb 0%, #06b6d4 28%, #22c55e 52%, #f59e0b 74%, #ec4899 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35) !important;
}

.form button:hover,
button[type="submit"]:hover {
    filter: brightness(1.06) saturate(1.08);
    transform: translateY(-1px);
}

.btn,
.service-hub-card__cta,
.slider__cta.btn {
    background: linear-gradient(100deg, #2563eb 0%, #7c3aed 38%, #ec4899 72%, #f97316 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.35) !important;
}

.btn:hover,
.service-hub-card__cta:hover,
.slider__cta.btn:hover {
    filter: brightness(1.07) saturate(1.08);
}

/* Footer + WhatsApp final fancy look */
.footer {
    background: linear-gradient(110deg, #1e3a8a 0%, #2563eb 22%, #06b6d4 44%, #7c3aed 68%, #ec4899 100%) !important;
    background-size: 220% 220% !important;
    animation: topStripeShift 12s ease-in-out infinite !important;
    border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 -10px 30px rgba(7, 12, 45, 0.3) inset !important;
}

.footer iframe {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 10px 20px rgba(10, 25, 75, 0.3);
}

.whatsapp {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #22c55e 0%, #06b6d4 45%, #2563eb 100%) !important;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.2),
        0 14px 28px rgba(3, 18, 70, 0.45),
        0 0 26px rgba(34, 197, 94, 0.45) !important;
    display: grid !important;
    place-items: center !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

.whatsapp:hover {
    transform: translateY(-3px) scale(1.04) !important;
    filter: brightness(1.08) saturate(1.08) !important;
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.28),
        0 18px 36px rgba(3, 18, 70, 0.52),
        0 0 34px rgba(16, 185, 129, 0.58) !important;
}

.whatsapp__icon {
    width: 34px !important;
    height: 34px !important;
    color: #ffffff !important;
}

/* Dropdown: colorful theme match */
.dropdown-content {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.96) 0%, rgba(37, 99, 235, 0.94) 24%, rgba(6, 182, 212, 0.9) 46%, rgba(124, 58, 237, 0.9) 68%, rgba(236, 72, 153, 0.9) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 34px rgba(8, 14, 56, 0.4) !important;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    overflow: hidden !important;
}

.dropdown-content a {
    color: #f8fbff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover,
.dropdown-content a:focus-visible {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)) !important;
    color: #ffffff !important;
}

/* Professional brand placements */
.footer-copyright {
    text-align: center;
    padding: 10px 16px 14px;
    font-size: 0.92rem;
    color: #e6ecff;
    background: linear-gradient(90deg, #0f225e, #123c87, #0f225e);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    letter-spacing: 0.01em;
}

.footer-copyright strong {
    color: #ffffff;
}

/* Remove About page green patch */
.about-hero {
    background: linear-gradient(135deg, #112b72 0%, #1f4fa6 48%, #0f2f86 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.about-hero h1 {
    color: #f8fbff !important;
}

/* ===== Final color theme swap: light blue (as shared screenshot) ===== */
:root {
    --theme-sky: #1fb7cf;
    --theme-sky-deep: #149cb2;
    --theme-sky-soft: #4ec9da;
}

body {
    background: var(--theme-sky) !important;
    color: #0f2a36 !important;
}

.header,
.header-inner,
.navbar,
.site-header {
    background: linear-gradient(110deg, #149cb2 0%, #1fb7cf 45%, #4ec9da 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important;
}

.footer,
.footer-copyright,
.services,
.about-content,
.contact-section,
.service-prose,
.feature,
.page-service-single .service-hero,
body.home #main > .slider .slider__viewport,
body.home #main > .slider .slider__slide,
body.home #main > .slider .slider__slide-media {
    background: var(--theme-sky) !important;
    color: #0f2a36 !important;
}

.services > h2,
.about-hero h1,
.feature__content h2,
.footer h3 {
    color: #123247 !important;
}

.feature__content p,
.feature ul,
.feature ul li {
    color: #123247 !important;
}

.about-hero {
    background: linear-gradient(135deg, #4ec9da 0%, #1fb7cf 55%, #149cb2 100%) !important;
}

/* Send + Read More buttons in same blue theme */
.form button,
button[type="submit"],
.btn,
.service-hub-card__cta,
.slider__cta.btn {
    background: var(--theme-sky-deep) !important;
    color: #0e2836 !important;
    border: 1px solid #95b2c0 !important;
    box-shadow: 0 8px 18px rgba(85, 118, 136, 0.28) !important;
}

.form button:hover,
button[type="submit"]:hover,
.btn:hover,
.service-hub-card__cta:hover,
.slider__cta.btn:hover {
    background: #149cb2 !important;
    color: #0b2330 !important;
}

/* Final text-color unification: replace white text with heading ink color */
:root {
    --theme-ink: #123247;
}

body,
p,
li,
small,
strong,
span,
a,
h1, h2, h3, h4, h5, h6 {
    color: var(--theme-ink);
}

.nav a,
.dropdown > a,
.dropdown-content a,
.footer,
.footer p,
.footer li,
.footer a,
.feature__content p,
.feature ul,
.feature ul li,
.about-hero h1,
.services > h2,
.service-prose,
.service-prose p,
.service-prose li,
.contact-section,
.contact-section h2 {
    color: var(--theme-ink) !important;
}

/* About page explicit override */
body .about-content,
body .about-content p,
body .about-content li,
body .about-content ul,
body .about-content h2 {
    color: #123247 !important;
}

body .about-content h2 {
    font-weight: 800 !important;
}

/* ===== Fancy but readable typography for About + Service pages ===== */
.about-content,
.service-prose {
    font-family: "Segoe UI", "Inter", "Poppins", "Trebuchet MS", Arial, sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.85 !important;
    letter-spacing: 0.012em !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.about-content h2,
.service-prose h2,
.service-prose h3,
.service-prose h4 {
    font-family: "Poppins", "Segoe UI", "Inter", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.25 !important;
    margin-top: 1.45rem !important;
    margin-bottom: 0.55rem !important;
    color: #0f2f4a !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
}

.about-content h2 {
    font-size: clamp(1.2rem, 2vw, 1.55rem) !important;
}

.service-prose h2 {
    font-size: clamp(1.25rem, 2.1vw, 1.7rem) !important;
}

.service-prose h3 {
    font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
}

.service-prose h4 {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem) !important;
}

.about-content p,
.service-prose p {
    margin-bottom: 1.05rem !important;
    font-size: 1.02rem !important;
    color: #123247 !important;
}

.about-content ul.points li,
.service-prose li {
    font-size: 1.01rem !important;
    margin-bottom: 0.35rem !important;
    color: #123247 !important;
}

.service-prose strong,
.about-content strong {
    font-weight: 800 !important;
    color: #0f2d47 !important;
}

/* first 3 words still highlighted, now matching fancy style */
.service-prose__lead-words {
    font-weight: 900 !important;
    font-size: 1.24em !important;
    letter-spacing: 0.012em !important;
    color: #0f2d47 !important;
}

/* ===== Final customer palette: cream theme (keep header stripe as-is) ===== */
:root {
    --theme-cream: #ece9c6;
    --theme-cream-soft: #f3f0d9;
    --theme-cream-deep: #ddd8ae;
    --theme-ink: #3c3a2a;
}

body {
    background: var(--theme-cream) !important;
    color: var(--theme-ink) !important;
}

.services,
.about-content,
.contact-section,
.service-prose,
.feature,
.page-service-single .service-hero,
.page-services .service-hub-card__media,
body.home #main > .slider .slider__viewport,
body.home #main > .slider .slider__slide,
body.home #main > .slider .slider__slide-media {
    background: var(--theme-cream) !important;
    color: var(--theme-ink) !important;
}

.services,
.about-content,
.contact-section,
.service-prose {
    background-image: linear-gradient(145deg, var(--theme-cream-soft), var(--theme-cream)) !important;
    border-color: rgba(122, 116, 84, 0.2) !important;
}

.about-hero {
    background: linear-gradient(135deg, var(--theme-cream-soft) 0%, var(--theme-cream) 55%, var(--theme-cream-deep) 100%) !important;
}

.about-content h2,
.service-prose h2,
.service-prose h3,
.service-prose h4,
.services > h2,
.about-hero h1,
.feature__content h2,
.footer h3 {
    color: #3b3723 !important;
}

.about-content p,
.about-content li,
.service-prose p,
.service-prose li,
.feature__content p,
.feature ul,
.feature ul li,
.footer p,
.footer li,
.footer a,
.footer-copyright {
    color: var(--theme-ink) !important;
}

/* Footer stripe: darker cream as requested */
.footer {
    background: linear-gradient(90deg, #c2ba86, #b8b077, #c2ba86) !important;
    border-top: 1px solid rgba(95, 88, 56, 0.35) !important;
    box-shadow: 0 -8px 20px rgba(95, 88, 56, 0.18) inset !important;
}

.footer-copyright {
    background: linear-gradient(90deg, #c2ba86, #b8b077, #c2ba86) !important;
    border-top: 1px solid rgba(95, 88, 56, 0.28) !important;
    color: #3a351f !important;
}

/* Buttons aligned to cream palette */
.form button,
button[type="submit"],
.btn,
.service-hub-card__cta,
.slider__cta.btn {
    background: #c4bc89 !important;
    color: #322e1f !important;
    border: 1px solid #b0a874 !important;
    box-shadow: 0 8px 18px rgba(120, 110, 70, 0.24) !important;
}

.form button:hover,
button[type="submit"]:hover,
.btn:hover,
.service-hub-card__cta:hover,
.slider__cta.btn:hover {
    background: #b8af79 !important;
    color: #2c2819 !important;
}

/* Home services: reduce heading gap, image-only cards, Read More on image */
body.home .services .grid {
    margin-top: 16px !important;
}

body.home .services .card {
    position: relative !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(80, 74, 46, 0.16) !important;
}

body.home .services .card img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 18px !important;
}

body.home .services .card .btn {
    position: absolute !important;
    left: 50% !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 3 !important;
}

/* Cockroach card: match termite-style framing exactly */
body.home .services .card--cockroach img {
    transform: scale(1.14) !important;
    transform-origin: center center !important;
    object-position: center center !important;
}

/* ===== Final global theme (replace yellow) + selection color ===== */
:root {
    --site-bg: #eef3fb;
    --site-surface: #ffffff;
    --site-ink: #1f2d4a;
    --site-muted: #4f6286;
    --site-accent: #1e40af;
    --site-accent-2: #0ea5e9;
}

body {
    background: var(--site-bg) !important;
    color: var(--site-ink) !important;
}

::selection {
    background: #b7d4ff !important;
    color: #102447 !important;
}

::-moz-selection {
    background: #b7d4ff !important;
    color: #102447 !important;
}

/* Header/nav readability */
.header,
.header-inner,
.navbar,
.site-header {
    background: linear-gradient(100deg, #0b2a6b 0%, #1347b8 45%, #0ea5e9 100%) !important;
}

.nav a,
.dropdown > a {
    color: #f6f9ff !important;
}

/* Main sections */
.services,
.about-content,
.contact-section,
.service-prose,
.services-page-hero,
.about-hero,
.feature {
    background: var(--site-surface) !important;
    color: var(--site-ink) !important;
    border: 1px solid rgba(71, 98, 150, 0.14) !important;
    box-shadow: 0 10px 26px rgba(16, 34, 73, 0.08) !important;
}

.services > h2,
.about-hero h1,
.about-content h2,
.service-prose h2,
.service-prose h3,
.service-prose h4,
.services-page-hero h1 {
    color: var(--site-ink) !important;
}

.about-content p,
.about-content li,
.service-prose p,
.service-prose li,
.services-page-lead,
.feature__content p,
.feature ul li {
    color: var(--site-muted) !important;
}

/* Buttons */
.btn,
.service-hub-card__cta,
.slider__cta.btn,
.form button,
button[type="submit"] {
    background: linear-gradient(100deg, #1e40af 0%, #2563eb 45%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(30, 64, 175, 0.3) !important;
}

.btn:hover,
.service-hub-card__cta:hover,
.slider__cta.btn:hover,
.form button:hover,
button[type="submit"]:hover {
    filter: brightness(1.08) saturate(1.05) !important;
}

/* Footer theme */
.footer {
    background: linear-gradient(110deg, #102b6d 0%, #1e40af 48%, #0ea5e9 100%) !important;
}

.footer h3,
.footer p,
.footer li,
.footer a,
.footer-copyright,
.footer-copyright strong {
    color: #eef5ff !important;
}

/* ===== Final customer theme reset: modern, professional, high-conversion ===== */
:root {
    --final-bg: #edf2fb;
    --final-surface: #ffffff;
    --final-ink: #1d2a44;
    --final-muted: #465a83;
    --final-accent-1: #7c3aed;
    --final-accent-2: #ec4899;
}

body {
    background: var(--final-bg) !important;
    color: var(--final-ink) !important;
}

.services,
.about-content,
.contact-section,
.service-prose {
    background: var(--final-surface) !important;
    color: var(--final-ink) !important;
    border: 1px solid rgba(69, 90, 131, 0.12) !important;
    box-shadow: 0 10px 24px rgba(20, 35, 70, 0.1) !important;
}

.services > h2,
.about-hero h1,
.about-content h2,
.service-prose h2,
.service-prose h3,
.service-prose h4 {
    color: var(--final-ink) !important;
}

.about-content p,
.about-content li,
.service-prose p,
.service-prose li,
.footer p,
.footer li,
.footer a {
    color: var(--final-muted) !important;
}

/* Attractive CTA buttons */
.btn,
.service-hub-card__cta,
.slider__cta.btn,
.form button,
button[type="submit"] {
    background: linear-gradient(100deg, var(--final-accent-1) 0%, var(--final-accent-2) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.32) !important;
    font-weight: 700 !important;
}

.btn:hover,
.service-hub-card__cta:hover,
.slider__cta.btn:hover,
.form button:hover,
button[type="submit"]:hover {
    filter: brightness(1.08) saturate(1.08) !important;
}

/* Footer professional dark-blue */
.footer {
    background: linear-gradient(120deg, #1e3a8a 0%, #2563eb 45%, #0ea5e9 100%) !important;
}

.footer h3,
.footer-copyright,
.footer-copyright strong {
    color: #f8fbff !important;
}

/* ===== "View all services" page should look exactly like Home cards ===== */
.page-services .services-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

.page-services .service-hub-card {
    position: relative !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(20, 35, 70, 0.14) !important;
}

.page-services .service-hub-card__link {
    position: relative !important;
    display: block !important;
    padding: 0 !important;
}

.page-services .service-hub-card__media {
    width: 100% !important;
    aspect-ratio: 12 / 5 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: transparent !important;
}

.page-services .service-hub-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Hide extra text to match home-page card style */
.page-services .service-hub-card h2,
.page-services .service-hub-card p {
    display: none !important;
}

/* Place Read more on image, centered */
.page-services .service-hub-card__cta {
    position: absolute !important;
    left: 50% !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

@media (max-width: 900px) {
    .page-services .services-hub-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Final polish: non-colorful buttons + dark-golden nav text */
.btn,
.service-hub-card__cta,
.slider__cta.btn,
.form button,
button[type="submit"] {
    background: #2f4f8f !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 8px 18px rgba(26, 45, 86, 0.3) !important;
}

.btn:hover,
.service-hub-card__cta:hover,
.slider__cta.btn:hover,
.form button:hover,
button[type="submit"]:hover {
    background: #28457d !important;
    color: #ffffff !important;
    filter: none !important;
}

.nav a,
.dropdown > a {
    color: #cfa64a !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.nav a:hover,
.dropdown > a:hover,
.nav a:focus-visible,
.dropdown > a:focus-visible {
    color: #e1bf6a !important;
}

/* Hard override: normalize all Read More buttons */
body.home .services .card .btn,
.page-services .service-hub-card__cta,
.services .btn,
a.btn {
    background: #2f4f8f !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(26, 45, 86, 0.3) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    line-height: 1 !important;
}

body.home .services .card .btn:hover,
.page-services .service-hub-card__cta:hover,
.services .btn:hover,
a.btn:hover {
    background: #28457d !important;
    color: #ffffff !important;
    filter: none !important;
}

/* Services page Read more: same size feel as home page */
.page-services .service-hub-card__cta {
    font-size: 1.02rem !important;
    padding: 10px 24px !important;
    min-width: 132px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* Fix services-page heading clipped by fixed header */
.page-services .services-main {
    padding-top: 26px !important;
}

.page-services .services-page-hero {
    margin-top: 26px !important;
    padding-top: 16px !important;
}

/* Dropdown: remove multicolor, match website header color */
.dropdown-content {
    background: #0b2a6b !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow: 0 14px 28px rgba(8, 20, 56, 0.35) !important;
}

.dropdown-content a {
    color: #e1bf6a !important;
}

.dropdown-content a:hover,
.dropdown-content a:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f1cf79 !important;
}

/* Footer: single-color theme (no yellow/blue mix) */
.footer,
.footer-copyright {
    background: #12377a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.footer h3,
.footer p,
.footer li,
.footer a,
.footer-copyright,
.footer-copyright strong {
    color: #ffffff !important;
}

/* Header menu text size bump to match enlarged phone/icon */
.nav a,
.dropdown > a {
    font-size: 15.75px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255, 212, 59, 0.32) !important;
    background: linear-gradient(180deg, rgba(255, 212, 59, 0.2) 0%, rgba(255, 212, 59, 0.1) 100%) !important;
    box-shadow: 0 2px 6px rgba(8, 18, 50, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s ease, border-color 0.3s ease !important;
    will-change: transform !important;
}

.nav a:hover,
.dropdown > a:hover,
.nav a:focus-visible,
.dropdown > a:focus-visible {
    transform: translateY(-2px) !important;
    border-color: rgba(255, 212, 59, 0.5) !important;
    background: linear-gradient(180deg, rgba(255, 225, 120, 0.32) 0%, rgba(255, 206, 77, 0.18) 100%) !important;
    box-shadow: 0 8px 18px rgba(8, 18, 50, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.nav a:active,
.dropdown > a:active {
    transform: translateY(0) scale(0.98) !important;
    transition-duration: 0.1s !important;
    box-shadow: 0 1px 4px rgba(8, 18, 50, 0.25), inset 0 2px 3px rgba(0, 0, 0, 0.14) !important;
}

/* Keep page content below taller fixed header */
:root {
    --header-offset: 126px !important;
}

body {
    padding-top: var(--header-offset) !important;
}

.about-hero,
.services-hero,
.page-service-single .service-hero {
    margin-top: 0 !important;
}

/* About + all service pages: force text to black */
.about-hero h1,
.about-content,
.about-content h1,
.about-content h2,
.about-content h3,
.about-content p,
.about-content li,
.about-content a,
.page-services .service-hub-card h2,
.page-services .service-hub-card p,
.page-services .service-hub-card a,
.page-service-single .service-eyebrow,
.page-service-single .service-hero__intro h1,
.page-service-single .service-hero__intro p,
.page-service-single .service-prose,
.page-service-single .service-prose h1,
.page-service-single .service-prose h2,
.page-service-single .service-prose h3,
.page-service-single .service-prose p,
.page-service-single .service-prose li,
.page-service-single .service-prose strong,
.page-service-single .service-prose a {
    color: #000000 !important;
}

/* Strong final override: all About and Services content must stay true black */
.about-content *,
.page-services .service-hub-card *,
.page-service-single .service-hero__intro *,
.page-service-single .service-prose * {
    color: #000000 !important;
}

/* Strict About page black text override */
body.page-about .about-hero h1,
body.page-about .about-content,
body.page-about .about-content * {
    color: #000000 !important;
}

/* Contact website row with small globe icon */
.contact-website {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.contact-website__icon {
    width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: linear-gradient(165deg, #ffffff 0%, #eef2f8 100%) !important;
    border: 1px solid rgba(11, 42, 107, 0.22) !important;
    box-shadow: 0 3px 10px rgba(11, 42, 107, 0.18) !important;
}

.contact-website__icon svg {
    width: 15px !important;
    height: 15px !important;
    fill: #12377a !important;
}

.contact-website a {
    color: #000000 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}

.contact-website a:hover {
    text-decoration: underline !important;
}

/* Home slider: increase visual height so banner dominates */
body.home #main > .slider {
    height: clamp(460px, calc(100vh - var(--header-offset) + 90px), 740px) !important;
    max-height: none !important;
}

/* Remove white patch behind "Our Services" on home page */
body.home .services {
    background: transparent !important;
    background-image: none !important;
}

/* Services page hero should match page color (remove white patch) */
.services-page-hero {
    background: var(--page-services-bg) !important;
    border-bottom: 1px solid rgba(16, 32, 64, 0.12) !important;
}

/* Bottom footer TV-news style scroller */
.footer-ticker {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9998 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 10px 0 !important;
}

.footer-ticker__track {
    display: inline-block !important;
    min-width: 200% !important;
    padding-left: 100% !important;
    animation: footerTickerMove 24s linear infinite !important;
}

.footer-ticker__item,
.footer-ticker__sep {
    display: inline-block !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    vertical-align: middle !important;
}

.footer-ticker__item {
    letter-spacing: 0.02em !important;
}

.footer-ticker__sep {
    margin: 0 14px !important;
    opacity: 0.85 !important;
}

@keyframes footerTickerMove {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Keep page content visible above fixed ticker */
body {
    padding-bottom: 44px !important;
}

.whatsapp {
    bottom: 56px !important;
}

/* Top ticker (same style as footer ticker) */
.top-ticker {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 126px !important;
    z-index: 900 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 6px 0 !important;
    background: #12377a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.top-ticker__track {
    display: inline-block !important;
    min-width: 200% !important;
    padding-left: 100% !important;
    animation: footerTickerMove 24s linear infinite !important;
}

.top-ticker__item,
.top-ticker__sep {
    display: inline-block !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

.top-ticker__sep {
    margin: 0 12px !important;
    opacity: 0.85 !important;
}

/* Push header below top ticker */
.header {
    top: 0 !important;
}

:root {
    --header-offset: 156px !important;
}

/* Remove any remaining white patch in "Our Services" page hero */
.page-services,
.page-services .services-main,
.page-services .services-page-hero {
    background: var(--page-services-bg) !important;
}

.page-services .services-page-hero {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* About page title strip: same navy as header */
body.page-about .about-hero {
    background: #0b2a6b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.page-about .about-hero h1 {
    color: #ffffff !important;
}

/* Keep Services dropdown above the below-header ticker */
.dropdown {
    position: relative !important;
    z-index: 1100 !important;
}

.dropdown-content {
    z-index: 1101 !important;
}

/* Center "View all services" button on service detail pages */
.page-service-single .service-single > p {
    text-align: center !important;
}

/* Scroller color update: dark yellow background + red text */
.top-ticker,
.footer-ticker {
    background: #000000 !important;
    border-color: rgba(233, 200, 106, 0.38) !important;
}

.top-ticker__item,
.top-ticker__sep,
.footer-ticker__item,
.footer-ticker__sep {
    color: #e9c86a !important;
}

/* Home contact block: visible themed gap between map and form */
body.home .contact-section {
    gap: 34px !important;
    background: #dfe4ee !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: calc(100% - 48px) !important;
    margin: 0 24px !important;
    justify-content: space-between !important;
    align-items: stretch !important;
}

body.home .contact-section .map,
body.home .contact-section .form {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 2px solid #000000 !important;
    flex: 0 0 calc((100% - 34px) / 2) !important;
    width: calc((100% - 34px) / 2) !important;
    min-width: 0 !important;
}

body.home .contact-section .form button,
body.home .contact-section .form button:hover {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
}

body.home .contact-section .form h2 {
    text-align: center !important;
}

/* Match feature section background to requested light tone */
body.home .feature {
    background: #dfe4ee !important;
    background-image: none !important;
}

/* Content side-headings across pages: red + bold */
.about-content h2,
.about-content h3,
.service-prose h2,
.service-prose h3,
.service-prose h4,
.contact-page h2,
.services-page-hero h1,
.feature__content h2 {
    color: #c40000 !important;
    font-weight: 800 !important;
}

/* ===== FINAL MOBILE COMPATIBILITY OVERRIDES ===== */
@media (max-width: 768px) {
    /* Remove top ticker on phones to avoid overlap with nav/dropdown */
    .top-ticker {
        display: none !important;
    }

    :root {
        --header-offset: 126px !important;
    }

    body {
        padding-top: var(--header-offset) !important;
        padding-bottom: 36px !important;
    }

    .header {
        top: 0 !important;
    }

    .header-inner {
        min-height: 126px !important;
        height: 126px !important;
        padding: 6px 8px !important;
        flex-wrap: wrap !important;
        row-gap: 4px !important;
    }

    /* Keep logo + brand readable on mobile */
    .logo img,
    .header .logo img {
        height: 62px !important;
    }

    .logo > span > span:first-child {
        font-size: 20px !important;
    }

    .logo > span > span:last-child {
        font-size: 13px !important;
    }

    .header-controls {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: space-between !important;
        gap: 6px !important;
    }

    .header-call-us a {
        font-size: 22px !important;
    }

    .nav {
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 6px !important;
        padding-bottom: 2px !important;
    }

    .nav a,
    .dropdown > a {
        font-size: 12px !important;
        padding: 6px 10px !important;
        border-radius: 10px !important;
    }

    .dropdown-content {
        top: calc(100% + 4px) !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        z-index: 1200 !important;
    }

    /* Keep hero visible without being crushed by fixed elements */
    body.home #main > .slider {
        margin-top: 0 !important;
        height: 56vh !important;
        min-height: 320px !important;
        max-height: 56vh !important;
    }

    .footer-ticker {
        padding: 6px 0 !important;
    }

    .footer-ticker__item,
    .footer-ticker__sep {
        font-size: 13px !important;
    }

    .whatsapp {
        bottom: 46px !important;
    }
}

/* ===== HOTFIX: consistent mobile header/phone rendering across devices ===== */
@media (max-width: 768px) {
    :root {
        --header-offset: 138px !important;
    }

    .top-ticker {
        display: none !important;
    }

    .header {
        top: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .header-inner {
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 6px 8px !important;
        gap: 6px !important;
    }

    .logo {
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
        gap: 8px !important;
    }

    .logo img,
    .header .logo img {
        height: 46px !important;
        width: auto !important;
    }

    .logo > span > span:first-child {
        font-size: 17px !important;
    }

    .logo > span > span:last-child {
        font-size: 11px !important;
        letter-spacing: 0.04em !important;
    }

    .header-controls {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin-left: 0 !important;
        gap: 6px !important;
    }

    .header-call-us {
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }

    .header-call-us a,
    .header-call-us__number {
        display: inline-block !important;
        font-size: 22px !important;
        line-height: 1 !important;
        letter-spacing: 0.01em !important;
    }

    .header-call-us > span,
    .header-call-us img,
    .header-call-us__img {
        width: 24px !important;
        height: 24px !important;
    }

    .nav {
        order: 2 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 2px !important;
    }

    .nav a,
    .dropdown > a {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    body {
        padding-top: var(--header-offset) !important;
    }

    body.home #main > .slider {
        margin-top: 0 !important;
        height: 52vh !important;
        min-height: 300px !important;
        max-height: 52vh !important;
    }
}

/* ===== FINAL MOBILE HEADER VISIBILITY FIX ===== */
@media (max-width: 768px) {
    .header-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: start !important;
        justify-items: stretch !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 6px 8px !important;
        gap: 6px !important;
    }

    .logo {
        width: 100% !important;
        min-width: 0 !important;
    }

    .header-controls {
        width: 100% !important;
        margin-left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    .header-call-us {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .header-call-us a,
    .header-call-us__number {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 20px !important;
        line-height: 1.1 !important;
    }

    .nav {
        display: flex !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
        padding: 0 0 2px !important;
    }

    .nav a,
    .dropdown > a {
        display: inline-flex !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
        flex: 0 0 auto !important;
    }

    .dropdown {
        flex: 0 0 auto !important;
    }
}

/* ===== TOUCH DEVICE FALLBACK (works even if phone is in desktop-site mode) ===== */
@media (hover: none) and (pointer: coarse), (max-width: 1024px) {
    .top-ticker {
        display: none !important;
    }

    :root {
        --header-offset: 136px !important;
    }

    body {
        padding-top: var(--header-offset) !important;
    }

    .header {
        top: 0 !important;
    }

    .header-inner {
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        padding: 6px 8px !important;
    }

    .logo img,
    .header .logo img {
        height: 48px !important;
    }

    .logo > span > span:first-child {
        font-size: 18px !important;
    }

    .logo > span > span:last-child {
        font-size: 12px !important;
    }

    .header-controls {
        width: 100% !important;
        margin-left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        align-items: stretch !important;
    }

    .header-call-us {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .header-call-us a,
    .header-call-us__number {
        display: inline-block !important;
        font-size: 22px !important;
        line-height: 1.1 !important;
    }

    .nav {
        display: flex !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 6px !important;
        padding-bottom: 2px !important;
    }

    .nav a,
    .dropdown > a {
        font-size: 12px !important;
        padding: 6px 10px !important;
        flex: 0 0 auto !important;
    }

    .dropdown-content {
        z-index: 1200 !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }
}