/* ==========================================================================
   GOODBYE TREES — SAFE BRAND FINISHING LAYER
   Load AFTER style.css, components.css, responsive.css and utilities.css.
   This file intentionally does NOT redefine .btn-primary or .btn-secondary
   globally. It targets conversion CTAs by destination/context so service
   "Learn More" buttons keep their existing appearance.
   ========================================================================== */

:root {
    --gt-gold-hi: #fff1a6;
    --gt-gold-light: #f7cf62;
    --gt-gold: #e7ad2d;
    --gt-gold-deep: #c78316;
    --gt-green-ink: #08291c;
}

/* Shared metallic treatment ONLY for estimate/contact conversion buttons. */
.main-navigation a.call-now-btn,
.main-navigation .call-now-btn,
a.btn[href*="/contact.php"],
a.btn[href$="contact.php"],
a.btn[href*="/contact/"] {
    background: linear-gradient(
        180deg,
        var(--gt-gold-hi) 0%,
        var(--gt-gold-light) 22%,
        var(--gt-gold) 62%,
        var(--gt-gold-deep) 100%
    ) !important;
    color: var(--gt-green-ink) !important;
    border: 1px solid #ffe38a !important;
    text-shadow: none !important;
    box-shadow:
        0 7px 20px rgba(231, 173, 45, .30),
        inset 0 2px 0 rgba(255,255,255,.58),
        inset 0 -2px 0 rgba(92,52,5,.18) !important;
}

/* Header estimate CTA gets slightly stronger emphasis. */
.main-navigation a.call-now-btn,
.main-navigation .call-now-btn {
    box-shadow:
        0 9px 26px rgba(231, 173, 45, .38),
        inset 0 2px 0 rgba(255,255,255,.64),
        inset 0 -2px 0 rgba(92,52,5,.20) !important;
}

/* Keep nested icon/text colors consistent. */
.main-navigation .call-now-btn *,
a.btn[href*="/contact.php"] *,
a.btn[href$="contact.php"] *,
a.btn[href*="/contact/"] * {
    color: var(--gt-green-ink) !important;
}

/* Matching hover — still scoped only to estimate/contact CTAs. */
.main-navigation a.call-now-btn:hover,
.main-navigation .call-now-btn:hover,
a.btn[href*="/contact.php"]:hover,
a.btn[href$="contact.php"]:hover,
a.btn[href*="/contact/"]:hover {
    background: linear-gradient(
        180deg,
        #fff7c5 0%,
        #ffdc73 22%,
        #efba39 62%,
        #d18b1b 100%
    ) !important;
    color: #061f15 !important;
    border-color: #ffeba5 !important;
    transform: translateY(-2px);
}

/* The dedicated emergency/call CTA may share the same brand gold.
   This does NOT affect ordinary .btn-primary buttons elsewhere. */
.btn-emergency-call {
    background: linear-gradient(
        180deg,
        var(--gt-gold-hi) 0%,
        var(--gt-gold-light) 22%,
        var(--gt-gold) 62%,
        var(--gt-gold-deep) 100%
    ) !important;
    color: var(--gt-green-ink) !important;
    border-color: #ffe38a !important;
    text-shadow: none !important;
    box-shadow:
        0 7px 20px rgba(231, 173, 45, .30),
        inset 0 2px 0 rgba(255,255,255,.58),
        inset 0 -2px 0 rgba(92,52,5,.18) !important;
}

.btn-emergency-call:hover {
    background: linear-gradient(
        180deg,
        #fff7c5 0%,
        #ffdc73 22%,
        #efba39 62%,
        #d18b1b 100%
    ) !important;
    color: #061f15 !important;
    border-color: #ffeba5 !important;
}

/* IMPORTANT:
   No .btn-primary rule.
   No .btn-secondary rule.
   No service-card button rule.
   No layout/navigation/mobile overrides.
   Existing working component behavior remains in the original stylesheets.
*/
/* ==========================================================================
   GOODBYE TREES
   HEADER REQUEST ESTIMATE CTA — PREMIUM GOLD VERSION
   ========================================================================== */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn {

    /* Brighter metallic-gold face */
    background:
        linear-gradient(
            180deg,
            #fff7c9 0%,
            #ffe38a 14%,
            #f6c44d 42%,
            #e6a72a 70%,
            #ca8111 100%
        ) !important;

    color:
        #062c1d !important;

    /* Strong champagne edge like the call button */
    border:
        2px solid #ffe9a1 !important;

    border-radius:
        999px !important;

    /* Slightly larger premium CTA */
    min-height:
        62px !important;

    padding:
        16px 30px !important;

    font-size:
        1.02rem !important;

    font-weight:
        900 !important;

    letter-spacing:
        0.005em !important;

    white-space:
        nowrap !important;

    text-shadow:
        none !important;

    /* Metallic depth + subtle surrounding glow */
    box-shadow:

        0 10px 24px rgba(213, 145, 19, 0.38),

        0 0 20px rgba(246, 196, 77, 0.14),

        inset 0 3px 0 rgba(255, 255, 255, 0.72),

        inset 0 -3px 0 rgba(112, 61, 2, 0.18)

        !important;

    position:
        relative !important;

    overflow:
        hidden !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        filter .22s ease
        !important;
}


/* ==========================================================================
   TOP SPECULAR HIGHLIGHT
   Creates the polished "Call button" shine
   ========================================================================== */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn::before,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn::before {

    content:
        "" !important;

    position:
        absolute !important;

    top:
        3px !important;

    left:
        8% !important;

    width:
        84% !important;

    height:
        42% !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.56) 0%,
            rgba(255,255,255,.14) 65%,
            transparent 100%
        ) !important;

    pointer-events:
        none !important;

    z-index:
        0 !important;
}


/* ==========================================================================
   KEEP BUTTON CONTENT ABOVE THE SHINE
   ========================================================================== */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn > *,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn > * {

    position:
        relative !important;

    z-index:
        2 !important;
}


/* ==========================================================================
   CTA TEXT
   ========================================================================== */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn span,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn span {

    color:
        #062c1d !important;

    font-weight:
        900 !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.18) !important;
}


/* ==========================================================================
   CLIPBOARD ICON
   Dark, crisp, larger and more visible
   ========================================================================== */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn i,

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn svg,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn i,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn svg {

    color:
        #073b27 !important;

    stroke:
        #073b27 !important;

    opacity:
        1 !important;

    width:
        21px !important;

    height:
        21px !important;

    font-size:
        1.18rem !important;

    margin-right:
        9px !important;

    filter:
        drop-shadow(0 1px 0 rgba(255,255,255,.40))
        !important;

    position:
        relative !important;

    z-index:
        2 !important;
}


/* Font-icon fallback */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn i::before,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn i::before {

    color:
        #073b27 !important;

    opacity:
        1 !important;
}


/* ==========================================================================
   HOVER
   ========================================================================== */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn:hover,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn:hover {

    background:
        linear-gradient(
            180deg,
            #fffde1 0%,
            #ffeb9b 14%,
            #fbd05c 42%,
            #edb235 70%,
            #d48b18 100%
        ) !important;

    color:
        #041f15 !important;

    border-color:
        #fff4bc !important;

    transform:
        translateY(-2px) !important;

    box-shadow:

        0 14px 32px rgba(213,145,19,.50),

        0 0 25px rgba(246,196,77,.20),

        inset 0 3px 0 rgba(255,255,255,.82),

        inset 0 -3px 0 rgba(112,61,2,.14)

        !important;
}


/* Keep icon and text dark on hover */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn:hover span,

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn:hover i,

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn:hover svg,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn:hover span,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn:hover i,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn:hover svg {

    color:
        #041f15 !important;

    stroke:
        #041f15 !important;
}


/* ==========================================================================
   CLICK / ACTIVE
   ========================================================================== */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn:active,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn:active {

    transform:
        translateY(0) scale(.985) !important;

    box-shadow:

        0 6px 15px rgba(213,145,19,.34),

        inset 0 2px 0 rgba(255,255,255,.58),

        inset 0 -2px 0 rgba(112,61,2,.20)

        !important;
}

/* ==========================================================================
   HEADER CTA — ICON + TEXT ALIGNMENT FIX
   ========================================================================== */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn {

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    min-width: 305px !important;

    padding-left: 26px !important;
    padding-right: 26px !important;

    overflow: visible !important;

    box-sizing: border-box !important;
}


/* Keep every direct child in the normal row flow */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn > *,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn > * {

    position: relative !important;
    z-index: 2 !important;

    flex: 0 0 auto !important;
}


/* ==========================================================================
   ICON
   ========================================================================== */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn i,

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn svg,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn i,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn svg {

    display: inline-block !important;

    width: 20px !important;
    height: 20px !important;

    min-width: 20px !important;

    margin: 0 !important;

    color: #073b27 !important;
    stroke: #073b27 !important;

    vertical-align: middle !important;

    position: relative !important;
    z-index: 3 !important;
}


/* ==========================================================================
   TEXT
   ========================================================================== */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn span,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn span {

    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;

    line-height: 1.1 !important;

    color: #062c1d !important;

    position: relative !important;
    z-index: 3 !important;
}

/* ----------------------------------------------------------
   CTA TEXT
   ---------------------------------------------------------- */

.main-navigation .call-now-btn span,
.main-navigation a.call-now-btn span {

    color: #073523 !important;
    font-weight: 800 !important;
}


/* ----------------------------------------------------------
   CLIPBOARD ICON
   Make it clearly visible against the gold
   ---------------------------------------------------------- */

.main-navigation .call-now-btn i,
.main-navigation .call-now-btn svg,
.main-navigation a.call-now-btn i,
.main-navigation a.call-now-btn svg {

    color: #0b4b31 !important;
    fill: none !important;
    stroke: #0b4b31 !important;

    opacity: 1 !important;

    filter:
        drop-shadow(0 1px 0 rgba(255,255,255,.35))
        !important;
}


/* If the icon is Font Awesome / Bootstrap Icons */

.main-navigation .call-now-btn i::before,
.main-navigation a.call-now-btn i::before {

    color: #0b4b31 !important;
    opacity: 1 !important;
}


/* ----------------------------------------------------------
   HOVER
   ---------------------------------------------------------- */

.main-navigation .call-now-btn:hover,
.main-navigation a.call-now-btn:hover {

    background:
        linear-gradient(
            180deg,
            #fff8c8 0%,
            #ffe17d 18%,
            #f6c343 48%,
            #e4a126 76%,
            #ce8514 100%
        ) !important;

    color: #052c1d !important;

    border-color: #fff0ad !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 13px 32px rgba(214, 151, 28, 0.48),
        0 0 22px rgba(244, 190, 58, 0.18),
        inset 0 2px 0 rgba(255,255,255,.82),
        inset 0 -2px 0 rgba(105,58,3,.16)
        !important;
}


/* Keep icon dark on hover */

.main-navigation .call-now-btn:hover i,
.main-navigation .call-now-btn:hover svg,
.main-navigation a.call-now-btn:hover i,
.main-navigation a.call-now-btn:hover svg,
.main-navigation .call-now-btn:hover i::before {

    color: #052c1d !important;
    stroke: #052c1d !important;
}
/* ==========================================================================
   HEADER CTA — FINAL SIZE & POSITION REFINEMENT
   ========================================================================== */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn {

    /* Slightly more compact */
    min-width: 275px !important;
    min-height: 56px !important;

    padding: 13px 24px !important;

    font-size: 0.96rem !important;

    /* Pull button away from right edge */
    margin-right: 24px !important;
}


/* Slightly tighten icon spacing */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn i,

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn svg,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn i,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn svg {

    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;

    margin: 0 !important;
}


/* Keep icon/text spacing proportional */

html[data-theme="hyper-glass"]
.main-navigation
.call-now-btn,

html[data-theme="hyper-glass"]
.main-navigation
a.call-now-btn {

    gap: 8px !important;
}

/* ==========================================================================
   GOODBYE TREES — FINAL MOBILE NAVIGATION
   Clean mobile-only override. Desktop header styling above remains untouched.
   ========================================================================== */

/* Mobile estimate item must NEVER appear in the desktop navigation row.
   This selector is intentionally stronger than legacy .nav-menu li rules. */
.main-navigation .nav-menu > li.mobile-estimate-menu-item,
.main-navigation #primary-menu > li.mobile-estimate-menu-item {
    display: none !important;
}


/* ==========================================================================
   MOBILE / TABLET NAVIGATION
   ========================================================================== */

@media (max-width: 991px) {

    /* ----------------------------------------------------------------------
       NAV WRAPPER
       ---------------------------------------------------------------------- */

    html[data-theme="hyper-glass"] .main-navigation {
        position: relative !important;
        overflow: visible !important;
    }

    html[data-theme="hyper-glass"] .main-navigation .nav-container {
        position: relative !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        max-width: 100% !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        gap: 14px !important;

        box-sizing: border-box !important;
    }


    /* ----------------------------------------------------------------------
       MOBILE LOGO
       ---------------------------------------------------------------------- */

    html[data-theme="hyper-glass"] .main-navigation .brand-logo {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-theme="hyper-glass"] .main-navigation .brand-logo img {
        display: block !important;
        width: 230px !important;
        max-width: 230px !important;
        height: auto !important;
        max-height: 78px !important;
        margin: 0 !important;
    }


    /* ----------------------------------------------------------------------
       HIDE THE SEPARATE DESKTOP ESTIMATE CTA
       It is the direct child of .nav-container after #primary-menu.
       ---------------------------------------------------------------------- */

    html[data-theme="hyper-glass"]
    .main-navigation
    .nav-container > a.call-now-btn,

    html[data-theme="hyper-glass"]
    .main-navigation
    .nav-container > .call-now-btn {

        display: none !important;
    }


    /* ----------------------------------------------------------------------
       HAMBURGER
       ---------------------------------------------------------------------- */

    html[data-theme="hyper-glass"] .main-navigation .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 46px !important;

        width: 46px !important;
        height: 46px !important;

        margin: 0 0 0 auto !important;
        padding: 10px !important;

        background: transparent !important;
        border: 0 !important;

        position: relative !important;
        z-index: 100002 !important;
    }

    html[data-theme="hyper-glass"] .main-navigation .hamburger,
    html[data-theme="hyper-glass"] .main-navigation .hamburger::before,
    html[data-theme="hyper-glass"] .main-navigation .hamburger::after {
        background-color: #ffffff !important;
    }

    html[data-theme="hyper-glass"]
    .main-navigation
    .mobile-menu-toggle[aria-expanded="true"]
    .hamburger {
        background-color: transparent !important;
    }


    /* ----------------------------------------------------------------------
       MAIN MOBILE PANEL — CLOSED
       Exact selectors override responsive.css white panel.
       ---------------------------------------------------------------------- */

    html[data-theme="hyper-glass"] .main-navigation #primary-menu,
    html[data-theme="hyper-glass"] .main-navigation .nav-menu {

        display: none !important;

        position: absolute !important;

        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding: 18px 18px 28px !important;

        background:
            linear-gradient(
                180deg,
                #0b3a28 0%,
                #082d1f 55%,
                #061f16 100%
            ) !important;

        border-top: 1px solid rgba(231, 173, 45, .48) !important;
        border-bottom: 2px solid #d8991a !important;

        box-shadow: 0 18px 36px rgba(0,0,0,.42) !important;

        list-style: none !important;

        text-align: center !important;

        z-index: 100000 !important;

        max-height: calc(100vh - 90px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        box-sizing: border-box !important;
    }


    /* ----------------------------------------------------------------------
       MAIN MOBILE PANEL — OPEN
       ---------------------------------------------------------------------- */

    html[data-theme="hyper-glass"] .main-navigation #primary-menu.active,
    html[data-theme="hyper-glass"] .main-navigation #primary-menu.is-open,
    html[data-theme="hyper-glass"] .main-navigation .nav-menu.active,
    html[data-theme="hyper-glass"] .main-navigation .nav-menu.is-open {

        display: flex !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 2px !important;
    }


    /* ----------------------------------------------------------------------
       TOP-LEVEL MENU ITEMS
       ---------------------------------------------------------------------- */

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu > li:not(.mobile-estimate-menu-item) {

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: 420px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        position: relative !important;
    }


    /* ----------------------------------------------------------------------
       STANDARD MOBILE NAV LINKS
       ---------------------------------------------------------------------- */

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu > li > a.nav-link {

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

        width: 100% !important;

        padding: 12px 16px !important;

        color: #ffffff !important;
        background: transparent !important;

        font-size: 1.05rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;

        text-align: center !important;
        text-decoration: none !important;

        border-radius: 10px !important;

        text-shadow: none !important;

        box-sizing: border-box !important;
    }

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu > li > a.nav-link:hover {

        color: #f7cf62 !important;
        background: rgba(255,255,255,.055) !important;
    }

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu > li > a.nav-link.active {

        color: #f7cf62 !important;
    }

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu
    .nav-link.active::after {

        display: none !important;
    }


    /* ----------------------------------------------------------------------
       DROPDOWN ARROWS
       ---------------------------------------------------------------------- */

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu
    .dropdown-arrow {

        display: inline-block !important;

        margin-left: 7px !important;

        color: #f7cf62 !important;

        transition: transform .25s ease !important;
    }

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu
    .dropdown.mobile-dropdown-open
    .dropdown-arrow {

        transform: rotate(180deg) !important;
    }


    /* ----------------------------------------------------------------------
       SERVICES / SERVICE AREAS SUBMENUS — CLOSED
       ---------------------------------------------------------------------- */

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu
    .dropdown-menu {

        display: none !important;

        position: static !important;
        float: none !important;

        width: calc(100% - 20px) !important;

        margin: 6px auto 10px !important;
        padding: 7px 0 !important;

        background: rgba(3, 25, 17, .96) !important;

        border: 1px solid rgba(231,173,45,.28) !important;
        border-radius: 12px !important;

        box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;

        list-style: none !important;

        box-sizing: border-box !important;
    }


    /* ----------------------------------------------------------------------
       SUBMENUS — OPEN
       Works with existing mobile-dropdown-open JS.
       ---------------------------------------------------------------------- */

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu
    .dropdown.mobile-dropdown-open > .dropdown-menu,

    html[data-theme="hyper-glass"]
    .main-navigation
    #servicesDropdown.mobile-dropdown-open > .dropdown-menu,

    html[data-theme="hyper-glass"]
    .main-navigation
    #locationsDropdown.mobile-dropdown-open > .dropdown-menu {

        display: block !important;
    }


    /* ----------------------------------------------------------------------
       SUBMENU ITEMS / LINKS
       ---------------------------------------------------------------------- */

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu
    .dropdown-menu li {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu
    .dropdown-menu li a {

        display: block !important;

        width: 100% !important;

        padding: 9px 14px !important;

        color: #e8eee9 !important;
        background: transparent !important;

        font-size: .95rem !important;
        font-weight: 600 !important;

        text-align: center !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu
    .dropdown-menu li a:hover {

        color: #f7cf62 !important;
        background: rgba(255,255,255,.05) !important;
    }


    /* ==========================================================================
       MOBILE REQUEST A FREE ESTIMATE
       This item exists inside #primary-menu after Contact.
       ========================================================================== */

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu.active > li.mobile-estimate-menu-item,

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu.is-open > li.mobile-estimate-menu-item {

        display: flex !important;

        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 420px !important;

        margin: 12px auto 0 !important;
        padding: 18px 8px 0 !important;

        border-top: 1px solid rgba(231,173,45,.25) !important;

        box-sizing: border-box !important;
    }

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu
    a.mobile-estimate-btn {

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 9px !important;

        width: 100% !important;
        max-width: 330px !important;

        margin: 0 auto !important;
        padding: 14px 18px !important;

        background:
            linear-gradient(
                180deg,
                #fff7c9 0%,
                #ffe38a 14%,
                #f6c44d 42%,
                #e6a72a 70%,
                #ca8111 100%
            ) !important;

        color: #062c1d !important;

        border: 2px solid #ffe9a1 !important;
        border-radius: 999px !important;

        font-size: .98rem !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;

        text-align: center !important;
        text-decoration: none !important;

        white-space: nowrap !important;

        text-shadow: none !important;

        box-shadow:
            0 8px 22px rgba(213,145,19,.34),
            inset 0 2px 0 rgba(255,255,255,.72),
            inset 0 -2px 0 rgba(105,58,3,.18)
            !important;

        box-sizing: border-box !important;
    }

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu
    .mobile-estimate-btn span {

        color: #062c1d !important;

        font-weight: 900 !important;
        line-height: 1.15 !important;
    }

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu
    .mobile-estimate-icon {

        display: block !important;

        flex: 0 0 19px !important;

        width: 19px !important;
        height: 19px !important;

        margin: 0 !important;

        color: #073b27 !important;
        stroke: #073b27 !important;
    }

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu
    a.mobile-estimate-btn:hover {

        background:
            linear-gradient(
                180deg,
                #fffde1 0%,
                #ffeb9b 14%,
                #fbd05c 42%,
                #edb235 70%,
                #d48b18 100%
            ) !important;

        color: #041f15 !important;

        border-color: #fff4bc !important;
    }


    /* ----------------------------------------------------------------------
       MOBILE OVERFLOW SAFETY
       ---------------------------------------------------------------------- */

    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

}


/* ==========================================================================
   SMALL PHONE REFINEMENT
   ========================================================================== */

@media (max-width: 575px) {

    html[data-theme="hyper-glass"]
    .main-navigation
    .brand-logo img {

        width: 205px !important;
        max-width: 205px !important;
    }

    html[data-theme="hyper-glass"]
    .main-navigation
    #primary-menu
    a.mobile-estimate-btn {

        max-width: 300px !important;

        padding: 13px 15px !important;

        font-size: .93rem !important;
    }

}
/* ==========================================================================
   GOODBYE TREES — TOP UTILITY BAR
   Deep bark brown pulled from the logo palette
   ========================================================================== */

html[data-theme="hyper-glass"] .top-bar {
    background:
        linear-gradient(
            180deg,
            #563b22 0%,
            #493019 52%,
            #3d2816 100%
        ) !important;

    border-bottom:
        1px solid rgba(231, 173, 45, 0.38) !important;

    box-shadow:
        inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
}