/* =========================================================
   ASC Pest Control — Global Website CSS
   Header, Navigation, Footer, ASC page fixes, Mobile fixes
   Loaded site-wide (every front-end page) by the ASC Pest
   Pages plugin so it styles the live WordPress / HT Builder
   theme, not just the standalone plugin templates.
   ========================================================= */

/* =========================================================
   1. Base / Global Fixes
   ========================================================= */

html,
body {
    visibility: visible !important;
    opacity: 1 !important;
    overflow-x: hidden;
}

body {
    background: #ffffff;
}

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

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

/* Remove unwanted WordPress/Kadence entry spacing on full-width pages */
.content-area {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.content-container.site-container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.entry-content-wrap {
    padding: 0 !important;
}

.entry.single-entry {
    box-shadow: none !important;
}

.entry-content.single-content {
    margin: 0 !important;
}

/* Hide page title if theme outputs it */
.entry-title,
.page-title {
    display: none !important;
}

/* EA overlay fix */
.eael-cta-overlay-yes .eael-call-to-action.bg-img::after {
    background: rgba(0, 0, 0, 0.72) !important;
}

/* =========================================================
   2. ASC Top Brand Bar
   ========================================================= */

.asc-bar,
.asc-bar * {
    box-sizing: border-box;
}

.asc-bar {
    --burgundy: #B02040;
    --burgundy-deep: #8a1832;
    --olive: #6B8E23;
    --olive-deep: #557018;
    --fg: #1c2128;
    --muted: #5b6470;
    --line: #E5E5E5;
    --bg-alt: #EBEEF0;

    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    color: var(--fg);
    font-family: "DM Sans", Arial, Helvetica, sans-serif;
    position: relative;
    z-index: 10020;
}

.asc-bar a {
    text-decoration: none;
    color: inherit;
}

.asc-bar-inner {
    max-width: 1180px;
    margin: 0 auto;
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(14px, 2.4vw, 30px);
    padding: 10px clamp(18px, 3vw, 32px);
}

.asc-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.asc-logo {
    flex-shrink: 0;
    display: inline-flex;
}

.asc-logo img {
    height: 46px;
    width: auto;
    display: block;
}

.asc-word {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.05;
    min-width: 0;
}

.asc-brand-top {
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--fg);
    white-space: nowrap;
}

.asc-brand-top strong {
    color: var(--burgundy);
    font-weight: 800;
}

.asc-brand-sub {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.asc-creds {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.asc-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--fg);
    background: var(--bg-alt);
    border: 1px solid var(--line);
}

.asc-chip i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--olive);
}

.asc-chip.b i {
    background: var(--burgundy);
}

.asc-actions {
    display: inline-flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 20px);
    flex-shrink: 0;
}

.asc-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--fg);
    white-space: nowrap;
}

.asc-phone svg {
    width: 17px;
    height: 17px;
    color: var(--olive-deep);
}

.asc-phone:hover {
    color: var(--burgundy);
}

.asc-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    background: var(--burgundy);
    border: 2px solid transparent;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.asc-cta svg {
    width: 15px;
    height: 15px;
}

.asc-cta:hover {
    background: var(--burgundy-deep);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(176, 32, 64, 0.28);
}

/* =========================================================
   3. Main Navigation — Actual HT Builder Menu
   ========================================================= */

/*
   Your visible navigation is NOT #site-navigation.
   It is generated by HT Builder / HT Mega:
   .htbuilder-menu-area
   .htbuilder-nav
   ul.htbuilder-mainmenu
   #menu-f411387
*/

.htbuilder-menu-area,
.htbuilder-menu-area * {
    box-sizing: border-box;
}

.htbuilder-menu-area {
    position: relative !important;
    z-index: 10010 !important;
    width: 100% !important;
    background-color: rgba(8, 11, 16, 0.98) !important;
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.055) 24%,
            rgba(255, 255, 255, 0.018) 48%,
            rgba(0, 0, 0, 0.28) 100%
        ),
        radial-gradient(
            circle at 22% 0%,
            rgba(105, 118, 138, 0.16) 0%,
            rgba(105, 118, 138, 0.055) 28%,
            rgba(105, 118, 138, 0) 58%
        ),
        linear-gradient(
            90deg,
            rgba(5, 7, 11, 0.99) 0%,
            rgba(10, 14, 21, 0.98) 34%,
            rgba(13, 17, 25, 0.98) 66%,
            rgba(6, 8, 13, 0.99) 100%
        ) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(255, 255, 255, 0.18),
        inset 0 16px 22px rgba(255, 255, 255, 0.025),
        0 14px 34px rgba(0, 0, 0, 0.52) !important;
    backdrop-filter: blur(12px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(135%) !important;
}

.htbuilder-menu-area::before {
    content: "" !important;
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.28),
        rgba(255, 255, 255, 0.06)
    ) !important;
    pointer-events: none;
    z-index: 2;
}

.htbuilder-menu-area::after {
    content: "" !important;
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.64),
        rgba(255, 255, 255, 0.12)
    ) !important;
    pointer-events: none;
    z-index: 2;
}

.htbuilder-nav {
    max-width: 1220px !important;
    margin: 0 auto !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 22px !important;
    background: transparent !important;
    position: relative !important;
    z-index: 3 !important;
}

.htbuilder-nav ul.htbuilder-mainmenu,
.htbuilder-nav ul.htbuilder-mainmenu ul {
    list-style: none !important;
}

.htbuilder-nav > ul.htbuilder-mainmenu,
.htbuilder-nav > ul#menu-f411387 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.htbuilder-nav ul.htbuilder-mainmenu > li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    position: relative !important;
    float: none !important;
}

.htbuilder-nav ul.htbuilder-mainmenu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
    font-family: "Inter", "Montserrat", "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.15px !important;
    text-transform: none !important;
    line-height: 1 !important;
    padding: 20px 13px !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: auto !important;
    height: auto !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease !important;
    position: relative !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.htbuilder-nav ul.htbuilder-mainmenu > li:hover > a,
.htbuilder-nav ul.htbuilder-mainmenu > li:focus-within > a,
.htbuilder-nav ul.htbuilder-mainmenu > li.current-menu-item > a,
.htbuilder-nav ul.htbuilder-mainmenu > li.current_page_item > a,
.htbuilder-nav ul.htbuilder-mainmenu > li.current-menu-parent > a,
.htbuilder-nav ul.htbuilder-mainmenu > li.current-menu-ancestor > a,
.htbuilder-nav ul.htbuilder-mainmenu > li > a:hover,
.htbuilder-nav ul.htbuilder-mainmenu > li > a:focus {
    color: #ffffff !important;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.13),
        rgba(118, 132, 154, 0.1)
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1) !important;
}

.htbuilder-nav ul.htbuilder-mainmenu > li > a::after {
    content: "" !important;
    position: absolute !important;
    left: 13px !important;
    right: 13px !important;
    bottom: 11px !important;
    height: 2px !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0),
        rgba(230, 235, 242, 0.95),
        rgba(255, 255, 255, 0)
    ) !important;
    border-radius: 10px !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform 0.25s ease !important;
}

.htbuilder-nav ul.htbuilder-mainmenu > li:hover > a::after,
.htbuilder-nav ul.htbuilder-mainmenu > li:focus-within > a::after {
    transform: scaleX(1) !important;
}

.htbuilder-nav ul.htbuilder-mainmenu > li.current-menu-item > a::after,
.htbuilder-nav ul.htbuilder-mainmenu > li.current_page_item > a::after {
    display: none !important;
}

/* =========================================================
   4. Desktop Dropdown Menus
   ========================================================= */

@media screen and (min-width: 981px) {
    .htbuilder-nav ul.htbuilder-mainmenu li {
        position: relative !important;
    }

    .htbuilder-nav ul.htbuilder-mainmenu > li > ul.sub-menu {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        width: auto !important;
        min-width: 260px !important;
        max-width: 340px !important;
        margin: 0 !important;
        padding: 10px !important;
        list-style: none !important;
        background-color: rgba(8, 11, 16, 0.99) !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.11) 0%,
                rgba(255, 255, 255, 0.045) 30%,
                rgba(0, 0, 0, 0.26) 100%
            ),
            radial-gradient(
                circle at 12% 0%,
                rgba(105, 118, 138, 0.14),
                rgba(105, 118, 138, 0) 55%
            ) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 0 0 14px 14px !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 24px 48px rgba(0, 0, 0, 0.56) !important;
        backdrop-filter: blur(14px) saturate(135%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(6px) !important;
        transition:
            opacity 0.18s ease,
            visibility 0.18s ease,
            transform 0.18s ease !important;
        z-index: 10080 !important;
        overflow: visible !important;
    }

    .htbuilder-nav ul.htbuilder-mainmenu > li.menu-item-has-children::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: -8px !important;
        height: 8px !important;
        background: transparent !important;
        z-index: 10079 !important;
    }

    .htbuilder-nav ul.htbuilder-mainmenu > li:hover > ul.sub-menu,
    .htbuilder-nav ul.htbuilder-mainmenu > li:focus-within > ul.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li {
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        float: none !important;
    }

    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li a {
        display: block !important;
        width: 100% !important;
        color: rgba(255, 255, 255, 0.9) !important;
        background: transparent !important;
        font-family: "Inter", "Montserrat", "Segoe UI", Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.1px !important;
        line-height: 1.35 !important;
        padding: 11px 14px !important;
        border: none !important;
        border-radius: 9px !important;
        text-decoration: none !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        transition:
            color 0.18s ease,
            background-color 0.18s ease,
            padding-left 0.18s ease !important;
    }

    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li a::after {
        display: none !important;
    }

    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li:hover > a,
    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li a:hover,
    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li a:focus {
        color: #ffffff !important;
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.13),
            rgba(118, 132, 154, 0.09)
        ) !important;
        padding-left: 18px !important;
    }

    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li.current-menu-item > a,
    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li.current_page_item > a {
        color: #ffffff !important;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18),
            rgba(118, 132, 154, 0.14)
        ) !important;
    }

    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu ul.sub-menu {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 100% !important;
        right: auto !important;
        min-width: 260px !important;
        max-width: 340px !important;
        margin: 0 0 0 8px !important;
        padding: 10px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        background-color: rgba(8, 11, 16, 0.99) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 24px 48px rgba(0, 0, 0, 0.56) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(6px) !important;
        transition:
            opacity 0.18s ease,
            visibility 0.18s ease,
            transform 0.18s ease !important;
        z-index: 10090 !important;
    }

    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li:hover > ul.sub-menu,
    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li:focus-within > ul.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
    }
}

/* =========================================================
   5. Mobile Navigation — HT Builder
   ========================================================= */

.htbuilder-mobile-button {
    display: none;
}

.htbuilder-mobile-menu-area {
    z-index: 100000 !important;
}

.htbuilder-mobile-menu {
    background: rgba(8, 11, 16, 0.99) !important;
    color: #ffffff !important;
}

.htbuilder-mobile-menu ul,
.htbuilder-mobile-menu li {
    list-style: none !important;
}

.htbuilder-mobile-menu ul {
    margin: 0 !important;
    padding: 0 !important;
}

.htbuilder-mobile-menu ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.htbuilder-mobile-menu ul li a {
    display: block !important;
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
    font-family: "Inter", "Montserrat", "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    padding: 14px 22px !important;
    text-decoration: none !important;
}

.htbuilder-mobile-menu ul li a:hover,
.htbuilder-mobile-menu ul li.current-menu-item > a,
.htbuilder-mobile-menu ul li.current_page_item > a {
    color: #ffffff !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.13),
        rgba(118, 132, 154, 0.08)
    ) !important;
}

.htbuilder-mobile-menu ul.sub-menu {
    background: rgba(11, 15, 22, 0.99) !important;
}

.htbuilder-mobile-menu ul.sub-menu li a {
    font-size: 13px !important;
    font-weight: 600 !important;
    padding-left: 38px !important;
}

.htbuilder-mobile-menu ul.sub-menu ul.sub-menu li a {
    padding-left: 54px !important;
}

.htbuilder-mobile-menu .menu-expand {
    color: #ffffff !important;
    background: transparent !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: right !important;
    cursor: pointer !important;
    z-index: 10 !important;
    position: relative !important;
}

.htbuilder-mobile-close {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 14px !important;
}

/* Mobile breakpoint */
@media screen and (max-width: 980px) {
    .htbuilder-nav {
        display: none !important;
    }

    .htbuilder-mobile-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 54px !important;
        color: #ffffff !important;
        background-color: rgba(8, 11, 16, 0.99) !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.105) 0%,
                rgba(255, 255, 255, 0.035) 100%
            ) !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        font-size: 22px !important;
        text-decoration: none !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 10030 !important;
    }

    .htbuilder-mobile-button::after {
        content: "Menu";
        font-family: "Inter", "Montserrat", "Segoe UI", Arial, sans-serif;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.2px;
        margin-left: 10px;
    }

    .htbuilder-menu-area {
        position: relative !important;
        z-index: 10020 !important;
    }
}

/* =========================================================
   6. Legacy / Theme Navigation Fallbacks
   These are harmless if the theme outputs Kadence menus too.
   ========================================================= */

#site-navigation,
.main-navigation {
    background-color: rgba(8, 11, 16, 0.98) !important;
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.055) 24%,
            rgba(255, 255, 255, 0.018) 48%,
            rgba(0, 0, 0, 0.28) 100%
        ),
        linear-gradient(
            90deg,
            rgba(5, 7, 11, 0.99) 0%,
            rgba(10, 14, 21, 0.98) 34%,
            rgba(13, 17, 25, 0.98) 66%,
            rgba(6, 8, 13, 0.99) 100%
        ) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 14px 34px rgba(0, 0, 0, 0.52) !important;
    position: relative !important;
    z-index: 9999 !important;
    width: 100% !important;
}

.main-navigation .inside-navigation,
.main-navigation .main-nav,
.main-navigation .main-nav > ul {
    background: transparent !important;
    border: none !important;
}

.site-header,
header.site-header,
.main-header-bar,
.ast-primary-header-bar,
.ast-above-header-wrap,
.ast-below-header-wrap,
.ast-main-header-wrap,
.ast-builder-grid-row,
.inside-header {
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* =========================================================
   7. Responsive Top Bar
   ========================================================= */

@media screen and (max-width: 1024px) {
    .asc-creds {
        display: none;
    }

    .htbuilder-nav {
        padding: 0 10px !important;
    }

    .htbuilder-nav ul.htbuilder-mainmenu > li > a {
        font-size: 11.5px !important;
        padding: 18px 7px !important;
    }
}

@media screen and (max-width: 680px) {
    .asc-bar-inner {
        flex-wrap: wrap;
        gap: 10px 12px;
        min-height: 0;
        padding: 12px clamp(14px, 4vw, 20px);
    }

    .asc-brand {
        flex: 1 1 auto;
    }

    .asc-brand-sub {
        display: none;
    }

    .asc-logo img {
        height: 40px;
    }

    .asc-actions {
        width: 100%;
        justify-content: space-between;
        gap: 12px;
    }

    .asc-phone {
        font-size: 13px;
    }

    .asc-cta {
        flex: 1;
        justify-content: center;
        padding: 12px 16px;
    }
}

@media screen and (max-width: 430px) {
    .asc-brand-top {
        font-size: 17px;
    }

    .asc-logo img {
        height: 36px;
    }

    .asc-actions {
        flex-wrap: wrap;
    }

    .asc-phone {
        width: 100%;
        justify-content: center;
        order: 2;
        padding: 11px 14px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #ffffff;
    }

    .asc-cta {
        width: 100%;
        order: 1;
    }
}

@media screen and (max-width: 340px) {
    .asc-brand-top {
        font-size: 15px;
    }

    .asc-logo img {
        height: 32px;
    }
}

/* =========================================================
   8. ASC Page Reveal / Visibility Fixes
   Fixes sections appearing only after hover/scroll/interaction
   ========================================================= */

.asc-premium-page .asc-reveal,
.asc-premium-page .asc-reveal.visible,
.asc-premium-page .asc-tab-panel,
.asc-elite-page .asc-reveal,
.asc-elite-page .asc-reveal.visible,
.asc-elite-page .asc-tab-panel,
.ascfs-reveal,
.ascfs-reveal:not(.visible),
.ascbrc-reveal,
.ascbrc-reveal:not(.visible),
.ascbrcp-reveal,
.ascbrcp-reveal:not(.visible) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
}

/* Broader ASC reveal systems */
.asc-premium-page [class*="reveal"],
.asc-premium-page [class*="fade-in"],
.asc-premium-page [class*="fade-up"],
.asc-premium-page [class*="animate"],
.asc-elite-page [class*="reveal"],
.asc-elite-page [class*="fade-in"],
.asc-elite-page [class*="fade-up"],
.asc-elite-page [class*="animate"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Main wrappers visible on load */
.ascfs-premium-page,
.ascbrc-premium-page,
.ascbrcp-premium-page,
.ascbasket-page,
.asc-premium-page,
.asc-elite-page,
.asc-page {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}

/* Make sure ASC images are not hidden */
.asc-premium-page img,
.asc-elite-page img,
.asc-page img {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Extra high-specificity reveal force */
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .ascbrc-premium-page) .ascbrc-reveal,
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .ascbrc-premium-page) .ascbrc-reveal:not(.visible),
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .ascbrc-premium-page) .ascbrc-reveal.visible,
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .ascbrcp-premium-page) .ascbrcp-reveal,
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .ascbrcp-premium-page) .ascbrcp-reveal:not(.visible),
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .ascbrcp-premium-page) .ascbrcp-reveal.visible,
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .ascfs-premium-page) .ascfs-reveal,
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .ascfs-premium-page) .ascfs-reveal:not(.visible),
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .ascfs-premium-page) .ascfs-reveal.visible,
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .asc-premium-page) .asc-reveal,
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .asc-premium-page) .asc-reveal:not(.visible),
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .asc-premium-page) .asc-reveal.visible,
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .asc-elite-page) .asc-reveal,
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .asc-elite-page) .asc-reveal:not(.visible),
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .asc-elite-page) .asc-reveal.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
}

:is(#ascForceLoad#ascForceLoad#ascForceLoad, .ascbrc-premium-page),
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .ascbrcp-premium-page),
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .ascfs-premium-page),
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .ascbasket-page),
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .asc-premium-page),
:is(#ascForceLoad#ascForceLoad#ascForceLoad, .asc-elite-page) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}

/* =========================================================
   9. Hidden Panels / Overlays Should Not Block Clicks
   ========================================================= */

.ascfs-mobile-sections-overlay[hidden],
.ascfs-mobile-sections-panel[hidden],
.ascfs-sticky-cta[aria-hidden="true"],
.ascbrc-sticky-cta[aria-hidden="true"],
.ascbrcp-sticky-cta[aria-hidden="true"],
.asc-sticky-cta[aria-hidden="true"] {
    pointer-events: none !important;
}

.ascbrc-premium-page [hidden],
.ascbrcp-premium-page [hidden],
.ascfs-premium-page [hidden],
.asc-premium-page [hidden],
.asc-elite-page [hidden],
.asc-page [hidden] {
    pointer-events: none !important;
}

/* Important: keep real modals clickable when opened */
.amodal:not([hidden]) {
    pointer-events: auto !important;
}

.amodal:not([hidden]) .amodal-dialog,
.amodal:not([hidden]) .amodal-backdrop {
    pointer-events: auto !important;
}

/* =========================================================
   10. Cookie Banner / Admin Bar Safety
   ========================================================= */

#wpadminbar {
    z-index: 999999 !important;
}

.cmplz-cookiebanner {
    z-index: 999998 !important;
}

#cmplz-manage-consent {
    z-index: 999997 !important;
}

/* On logged-in mobile, prevent admin bar from crushing layout too badly */
@media screen and (max-width: 782px) {
    html {
        margin-top: 46px !important;
    }
}

/* =========================================================
   11. Floating Contact / Chat Stack Fixes
   ========================================================= */

.chat-stack,
.contact-fab,
.sentinel {
    z-index: 99990 !important;
}

.contact-fab a,
.sentinel-launcher,
.sentinel-panel {
    pointer-events: auto !important;
}

/* Prevent floating widgets from covering mobile form submit too aggressively */
@media screen and (max-width: 680px) {
    .chat-stack {
        right: 12px !important;
        bottom: 12px !important;
    }

    .sentinel-panel {
        max-width: calc(100vw - 24px) !important;
        right: 12px !important;
        left: 12px !important;
    }
}

/* =========================================================
   12. Footer Fixes
   ========================================================= */

.asc-hf.site-footer {
    margin-top: 0 !important;
    position: relative;
    z-index: 1;
}

.asc-hf.site-footer a {
    text-decoration: none !important;
}

/* Fix footer logo if image path fails or is too large */
.asc-hf .logo--footer img {
    max-width: 42px;
    max-height: 42px;
    object-fit: contain;
}

/* =========================================================
   13. Small Screen Refinements
   ========================================================= */

@media screen and (max-width: 480px) {
    .htbuilder-mobile-button {
        min-height: 52px !important;
        font-size: 20px !important;
    }

    .htbuilder-mobile-button::after {
        font-size: 13.5px !important;
    }

    .htbuilder-mobile-menu ul li a {
        font-size: 13.5px !important;
        padding: 14px 18px !important;
    }

    .htbuilder-mobile-menu ul.sub-menu li a {
        font-size: 13px !important;
        padding-left: 34px !important;
    }

    .htbuilder-mobile-menu ul.sub-menu ul.sub-menu li a {
        padding-left: 48px !important;
    }
}

@media screen and (max-width: 360px) {
    .htbuilder-mobile-button {
        min-height: 50px !important;
    }

    .htbuilder-mobile-button::after {
        font-size: 13px !important;
    }

    .htbuilder-mobile-menu ul li a {
        font-size: 13px !important;
        padding: 13px 16px !important;
    }

    .htbuilder-mobile-menu ul.sub-menu li a {
        font-size: 12.5px !important;
        padding-left: 30px !important;
    }
}

/* =========================================================
   14. Extra Defensive Fixes for Elementor / Theme Conflicts
   ========================================================= */

.elementor-widget:not(:last-child) {
    margin-bottom: 0 !important;
}

.elementor-section,
.elementor-container,
.e-con {
    max-width: none;
}

/* Prevent Elementor lazy background behaviour from hiding important blocks */
.e-con.e-parent:not(.e-lazyloaded),
.e-con.e-parent:not(.e-lazyloaded) * {
    visibility: visible;
}

/* Keep SVG industry images visible */
.ind-media img,
.svc-card svg,
.card-icon svg {
    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================================================
   15. Optional: Hide WordPress/Kadence duplicate mobile drawer
   Use this because your HT Builder menu already provides mobile nav.
   ========================================================= */

#mobile-drawer,
.popup-drawer,
.drawer-overlay {
    display: none !important;
    pointer-events: none !important;
}

/* =========================================================
   16. ENHANCEMENT LAYER  (brand-aligned polish + a11y)
   Added on top of the base global CSS. Ties the live theme
   nav/brand bar to the ASC burgundy/olive system, sharpens
   focus states for keyboard users, and respects motion prefs.
   ========================================================= */

:root {
    --asc-burgundy: #B02040;
    --asc-burgundy-deep: #8a1832;
    --asc-olive: #6B8E23;
    --asc-olive-bright: #7faa2c;
}

/* Sticky the live nav so it stays reachable while scrolling long pages */
.htbuilder-menu-area {
    position: sticky !important;
    top: 0 !important;
}
/* Keep dropdowns above sticky stacking context */
.htbuilder-nav ul.htbuilder-mainmenu > li > ul.sub-menu { z-index: 10085 !important; }

/* Brand-tint the nav hover underline (was plain white) so the dark nav
   reads as ASC, not generic. Olive→burgundy gradient picks up the logo. */
.htbuilder-nav ul.htbuilder-mainmenu > li > a::after {
    background: linear-gradient(
        90deg,
        rgba(127, 170, 44, 0),
        var(--asc-olive-bright) 35%,
        var(--asc-burgundy) 75%,
        rgba(176, 32, 64, 0)
    ) !important;
    height: 2.5px !important;
}
/* The active page gets a persistent burgundy underline (best-practice
   "you are here" affordance the original CSS hid). */
.htbuilder-nav ul.htbuilder-mainmenu > li.current-menu-item > a::after,
.htbuilder-nav ul.htbuilder-mainmenu > li.current_page_item > a::after,
.htbuilder-nav ul.htbuilder-mainmenu > li.current-menu-parent > a::after,
.htbuilder-nav ul.htbuilder-mainmenu > li.current-menu-ancestor > a::after {
    display: block !important;
    transform: scaleX(1) !important;
    background: linear-gradient(90deg, var(--asc-olive-bright), var(--asc-burgundy)) !important;
}

/* Visible keyboard focus everywhere (accessibility / WCAG 2.4.7) */
.htbuilder-nav a:focus-visible,
.htbuilder-mobile-menu a:focus-visible,
.asc-bar a:focus-visible,
.asc-cta:focus-visible,
.asc-phone:focus-visible {
    outline: 3px solid var(--asc-olive-bright) !important;
    outline-offset: 2px !important;
    border-radius: 6px;
}
.htbuilder-menu-area a:focus-visible { outline-color: #ffffff !important; }

/* Brand-bar logo: visible with softly curved edges + subtle ring. */
.asc-bar .asc-logo { display: inline-flex !important; align-items: center; }
.asc-bar .asc-logo img {
    height: 46px !important; width: auto !important;
    border-radius: 12px !important;
    background: var(--burgundy, #B02040);
    padding: 4px !important;
    box-shadow: 0 4px 14px rgba(176,32,64,.22), 0 0 0 1px rgba(0,0,0,.04);
    object-fit: contain;
}

/* Brand-bar CTA: a touch more presence + clear active state */
.asc-cta:active { transform: translateY(0) !important; }

/* Smooth in-page anchor scrolling, offset for the sticky nav */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 90px; }

/* Respect reduced-motion: kill transitions/animations for those users */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   17. MARKETING BLOCKS  (.ascx-*) — enterprise sections
   Drop-in shortcodes: trust bar, 4-step process, testimonials,
   free-survey band, enquiry form. Brand: burgundy + olive.
   ========================================================= */

.ascx {
    --bg-deep: #8a1832;
    --line: #e5e7eb;
    --fg: #161b21;
    --muted: #4a5560;
    font-family: "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    padding: clamp(2.75rem, 2rem + 4vw, 5rem) 0;
}
.ascx *, .ascx *::before, .ascx *::after { box-sizing: border-box; }
.ascx-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, .5rem + 2vw, 1.75rem); }

.ascx-head { max-width: 46rem; margin: 0 auto clamp(1.75rem, 3vw, 2.75rem); text-align: center; }
.ascx-head--left { text-align: left; margin-inline: 0; }
.ascx-eyebrow { display: inline-block; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--asc-olive); margin-bottom: .55rem; }
.ascx-on-dark { color: #d8e6bf; }
.ascx-head h2 { font-size: clamp(1.6rem, 1rem + 2.4vw, 2.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--fg); margin: 0 0 .5rem; }
.ascx-lead { color: var(--muted); font-size: 1.05rem; margin: 0; }
.ascx-head:not(.ascx-head--left) .ascx-lead { margin-inline: auto; max-width: 52ch; }

/* Buttons */
.ascx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700; font-size: .95rem; padding: .85rem 1.6rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
.ascx-btn-primary { background: var(--asc-burgundy); color: #fff; box-shadow: 0 8px 20px rgba(176,32,64,.26); }
.ascx-btn-primary:hover { background: var(--asc-burgundy-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(176,32,64,.36); }
.ascx-btn-light { background: #fff; color: var(--asc-burgundy-deep); }
.ascx-btn-light:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.18); }
.ascx-btn-wa { background: #25D366; color: #062b14; }
.ascx-btn-wa:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37,211,102,.4); }

/* 1. Trust bar */
.ascx-trust { background: #fff; border-block: 1px solid var(--line); padding-block: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.ascx-trust-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.ascx-trust-item { display: flex; align-items: center; gap: .85rem; }
.ascx-trust-item svg { flex: none; color: var(--asc-olive); }
.ascx-trust-item strong { display: block; font-size: .98rem; color: var(--fg); line-height: 1.2; }
.ascx-trust-item span { font-size: .85rem; color: var(--muted); }

/* 2. Process */
.ascx-process { background: #f6f7f8; }
.ascx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); counter-reset: none; }
.ascx-step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem 1.4rem; transition: transform .25s, box-shadow .25s, border-color .25s; }
.ascx-step:hover { transform: translateY(-4px); border-color: var(--asc-olive); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.ascx-step-num { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; font-weight: 900; font-size: 1.05rem; color: #fff; background: linear-gradient(135deg, var(--asc-burgundy), var(--asc-burgundy-deep)); margin-bottom: .9rem; }
.ascx-step h3 { font-size: 1.15rem; font-weight: 800; color: var(--fg); margin: 0 0 .35rem; }
.ascx-step p { color: var(--muted); font-size: .94rem; margin: 0; line-height: 1.55; }

/* 3. Testimonials */
.ascx-quotes { background: #fff; }
.ascx-quote-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.ascx-quote { margin: 0; background: #f6f7f8; border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .7rem; }
.ascx-stars { color: #f6b100; letter-spacing: 2px; font-size: 1.05rem; }
.ascx-quote blockquote { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--fg); }
.ascx-quote figcaption { display: flex; flex-direction: column; }
.ascx-quote figcaption strong { color: var(--fg); font-size: .95rem; }
.ascx-quote figcaption span { color: var(--muted); font-size: .82rem; }

/* 4. Free-survey band */
.ascx-survey { background: radial-gradient(900px 420px at 80% -20%, rgba(176,32,64,.55), transparent 60%), linear-gradient(135deg, var(--asc-burgundy-deep), #5e1022); color: #fff; }
.ascx-survey-inner { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 56rem) { .ascx-survey-inner { grid-template-columns: 1.5fr auto; } }
.ascx-survey h2 { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.4rem); font-weight: 800; color: #fff; margin: 0 0 .5rem; letter-spacing: -.02em; }
.ascx-survey p { color: rgba(255,255,255,.9); margin: 0; max-width: 52ch; }
.ascx-survey-cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* 5. Enquiry form */
.ascx-enquiry { background: #f6f7f8; }
.ascx-enquiry-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(1.5rem, 1rem + 3vw, 3rem); max-width: 880px; box-shadow: 0 18px 50px rgba(20,24,31,.07); }
.ascx-form { display: grid; gap: 1rem; margin-top: 1.4rem; }
.ascx-field-row { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .ascx-field-row { grid-template-columns: 1fr 1fr; } }
.ascx-field { display: flex; flex-direction: column; gap: .4rem; }
.ascx-field > span { font-weight: 700; font-size: .82rem; color: var(--fg); }
.ascx-field input, .ascx-field select, .ascx-field textarea { width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: 11px; background: #fff; color: var(--fg); font-size: .96rem; font-family: inherit; transition: border-color .2s, box-shadow .2s; }
.ascx-field input:focus, .ascx-field select:focus, .ascx-field textarea:focus { outline: none; border-color: var(--asc-burgundy); box-shadow: 0 0 0 3px rgba(176,32,64,.14); }
.ascx-field textarea { resize: vertical; min-height: 5.5rem; }
.ascx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.ascx-form-submit { justify-self: start; }
.ascx-form-status { margin: 0; font-size: .9rem; font-weight: 600; }
.ascx-form-status.is-ok { color: #1f7a3d; }
.ascx-form-status.is-err { color: #c0392b; }

/* =========================================================
   18. SITE-WIDE VISUAL OVERHAUL  (typography rhythm + links)
   Light touch so it lifts every page without fighting the
   page builders. Targets ASC content scopes only.
   ========================================================= */
.asc-page, .ascfs-premium-page, .ascbrc-premium-page, .asc-premium-page, .asc-elite-page {
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
}
.asc-page h1, .asc-page h2, .asc-page h3,
.asc-premium-page h1, .asc-premium-page h2, .asc-premium-page h3 {
    letter-spacing: -.02em;
}

/* =========================================================
   19. NAV ENHANCEMENT v3 — LIGHT, matches the page UI
   The base rules paint the HT Builder nav dark, which clashes
   with the white/burgundy/olive page. This converts the whole
   header (brand bar + main nav + dropdowns + mobile) to a
   cohesive LIGHT brand treatment and fixes button fit.
   Loaded last so it wins the cascade.
   ========================================================= */

/* ---- Brand bar: seamless with the nav below it ---- */
.asc-bar { box-shadow: none; border-bottom: 1px solid var(--line); }
.asc-brand-top { letter-spacing: -0.015em; }
.asc-chip { transition: border-color .2s, box-shadow .2s, transform .2s; }
.asc-chip:hover { border-color: rgba(176,32,64,.4); box-shadow: 0 4px 14px rgba(20,24,31,.08); transform: translateY(-1px); }

/* Buttons fit their container: never overflow, wrap gracefully */
.asc-bar-inner { flex-wrap: wrap; row-gap: 8px; }
.asc-actions { flex-wrap: wrap; max-width: 100%; }
.asc-cta {
    box-shadow: 0 6px 18px rgba(176,32,64,.28);
    letter-spacing: .01em; max-width: 100%;
}
.asc-cta::after { content: "→"; font-weight: 700; transform: translateX(-2px); transition: transform .2s ease; }
.asc-cta:hover::after { transform: translateX(2px); }

/* ---- Main nav: LIGHT bar matching the page ---- */
.htbuilder-menu-area {
    position: sticky !important;
    top: 0 !important;
    background-color: rgba(255,255,255,.92) !important;
    background-image: none !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
    backdrop-filter: saturate(180%) blur(14px) !important;
    border-top: 1px solid rgba(0,0,0,.05) !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 6px 22px rgba(20,24,31,.08) !important;
}
.htbuilder-menu-area::before,
.htbuilder-menu-area::after { display: none !important; }

.htbuilder-nav > ul.htbuilder-mainmenu { gap: 2px !important; }
.htbuilder-nav ul.htbuilder-mainmenu > li > a {
    color: #2b333d !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: .015em !important;
    padding: 20px 15px !important;
    border-radius: 10px 10px 0 0 !important;
    transition: color .2s ease, background-color .2s ease !important;
}
.htbuilder-nav ul.htbuilder-mainmenu > li > a:hover,
.htbuilder-nav ul.htbuilder-mainmenu > li:hover > a,
.htbuilder-nav ul.htbuilder-mainmenu > li:focus-within > a,
.htbuilder-nav ul.htbuilder-mainmenu > li.current-menu-item > a,
.htbuilder-nav ul.htbuilder-mainmenu > li.current_page_item > a,
.htbuilder-nav ul.htbuilder-mainmenu > li.current-menu-parent > a,
.htbuilder-nav ul.htbuilder-mainmenu > li.current-menu-ancestor > a {
    color: var(--asc-burgundy) !important;
    background: linear-gradient(180deg, rgba(127,170,44,.10), rgba(176,32,64,.07)) !important;
    box-shadow: none !important;
}
/* Brand underline (olive -> burgundy) */
.htbuilder-nav ul.htbuilder-mainmenu > li > a::after {
    background: linear-gradient(90deg, var(--asc-olive-bright), var(--asc-burgundy)) !important;
    height: 2.5px !important;
}
.htbuilder-nav ul.htbuilder-mainmenu > li.current-menu-item > a::after,
.htbuilder-nav ul.htbuilder-mainmenu > li.current_page_item > a::after {
    display: block !important; transform: scaleX(1) !important;
}

/* ---- Dropdowns: white card, dark text, brand accent ---- */
@media screen and (min-width: 981px) {
    .htbuilder-nav ul.htbuilder-mainmenu > li > ul.sub-menu,
    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu ul.sub-menu {
        min-width: 248px !important;
        padding: 8px !important;
        border: 1px solid rgba(0,0,0,.08) !important;
        border-top: 2px solid var(--asc-burgundy) !important;
        border-radius: 0 0 14px 14px !important;
        background-color: #ffffff !important;
        background-image: none !important;
        box-shadow: 0 22px 50px rgba(20,24,31,.16) !important;
    }
    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu ul.sub-menu { border-radius: 14px !important; }
    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li a {
        position: relative !important;
        color: #3a434e !important;
        font-size: 13px !important;
        padding: 11px 14px 11px 26px !important;
        border-radius: 10px !important;
    }
    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li a::before {
        content: "" !important; position: absolute !important;
        left: 12px !important; top: 50% !important; margin-top: -2.5px !important;
        width: 5px !important; height: 5px !important; border-radius: 50% !important;
        background: rgba(0,0,0,.2) !important;
        transition: background .18s ease, transform .18s ease !important;
    }
    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li:hover > a,
    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li a:hover {
        color: var(--asc-burgundy) !important;
        background: rgba(176,32,64,.07) !important;
        padding-left: 28px !important;
    }
    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li a:hover::before {
        background: var(--asc-olive) !important; transform: scale(1.5) !important;
    }
    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li.current-menu-item > a,
    .htbuilder-nav ul.htbuilder-mainmenu ul.sub-menu li.current_page_item > a {
        color: var(--asc-burgundy) !important; background: rgba(176,32,64,.10) !important;
    }
}

/* ---- Mobile: light drawer + light toggle button ---- */
.htbuilder-mobile-menu { background: #ffffff !important; color: #2b333d !important; }
.htbuilder-mobile-menu ul li { border-bottom: 1px solid rgba(0,0,0,.06) !important; }
.htbuilder-mobile-menu ul li a {
    color: #2b333d !important;
    padding: 15px 22px !important;
    transition: background-color .18s ease, padding-left .18s ease, color .18s ease !important;
}
.htbuilder-mobile-menu ul li a:hover,
.htbuilder-mobile-menu ul li.current-menu-item > a,
.htbuilder-mobile-menu ul li.current_page_item > a {
    color: var(--asc-burgundy) !important;
    background: rgba(176,32,64,.06) !important;
    box-shadow: inset 3px 0 0 var(--asc-burgundy) !important;
    padding-left: 26px !important;
}
.htbuilder-mobile-menu ul.sub-menu { background: #f6f7f8 !important; }
.htbuilder-mobile-menu ul.sub-menu li a { color: #3a434e !important; }
.htbuilder-mobile-menu .menu-expand,
.htbuilder-mobile-close { color: #2b333d !important; }
.htbuilder-mobile-close { background: rgba(0,0,0,.06) !important; }
.htbuilder-mobile-button {
    color: #ffffff !important;
    background-color: var(--asc-burgundy) !important;
    background-image: none !important;
    border-bottom: none !important;
    letter-spacing: .3px !important;
    transition: background-color .2s ease !important;
}
.htbuilder-mobile-button:hover { background-color: var(--asc-burgundy-deep) !important; }

/* Legacy theme nav fallback -> also light, so nothing renders dark */
#site-navigation, .main-navigation {
    background-color: rgba(255,255,255,.92) !important;
    background-image: none !important;
    border-top: 1px solid rgba(0,0,0,.05) !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 6px 22px rgba(20,24,31,.08) !important;
}

/* =========================================================
   20. MOBILE & LEGIBILITY HARDENING  (site-wide, defensive)
   Addresses QA feedback: faint colours, text over images,
   buttons not fitting, and mobile responsiveness. Conservative
   so it lifts every page (incl. Elementor) without breaking layout.
   ========================================================= */

/* Media never overflows its container; no horizontal scroll on phones */
img, svg, video, iframe { max-width: 100%; }
img:not([width]):not([height]) { height: auto; }
html, body { overflow-x: hidden; max-width: 100%; }

/* Long headings/words wrap instead of forcing horizontal scroll */
h1, h2, h3, h4, .ascx h1, .ascx h2, .ascx h3, .asc-brand-top { overflow-wrap: break-word; word-break: break-word; }

/* Stronger text contrast — fixes "faint colours / not appearing" */
.ascx-lead, .section-lead { color: #44505c !important; }
.ascx-eyebrow { color: var(--asc-olive-deep, #557018) !important; }
.asc-brand-sub { color: #5b6470 !important; }

/* Touch targets ≥ 44px for interactive ASC controls (WCAG / mobile) */
.asc-cta, .ascx-btn, .btn,
.htbuilder-nav ul.htbuilder-mainmenu > li > a,
.htbuilder-mobile-menu ul li a { min-height: 44px; }

/* Buttons fit their container and wrap their label instead of overflowing */
.ascx-btn, .asc-cta, .btn { max-width: 100%; white-space: normal; }

/* Any ASC section with text over a photo gets a readable scrim
   (the burgundy survey band already has one; this guards the rest) */
.ascx-survey { position: relative; }

@media (max-width: 700px) {
  /* CTAs go full-width so they're easy to tap and never clip */
  .asc-actions { width: 100%; }
  .asc-cta { width: 100%; justify-content: center; }
  .ascx-survey-cta { width: 100%; }
  .ascx-survey-cta .ascx-btn { flex: 1 1 100%; justify-content: center; }
  .ascx-btn, .btn { width: 100%; justify-content: center; }
  /* Trim section padding so content isn't lost in whitespace on phones */
  .ascx { padding: 2.25rem 0; }
  .ascx-enquiry-card { padding: 1.25rem; border-radius: 16px; }
  /* Form fields stack for thumb-friendly entry */
  .ascx-field-row { grid-template-columns: 1fr; }
  /* Process / trust / quote grids stack cleanly */
  .ascx-steps, .ascx-trust-grid, .ascx-quote-grid { grid-template-columns: 1fr; }
}

/* Respect users who prefer fewer animations */
@media (prefers-reduced-motion: reduce) {
  .asc-cta::after, .ascx-btn, .htbuilder-nav a { transition: none !important; }
}

/* =========================================================
   End of ASC Pest Control CSS
   ========================================================= */