/* =========================================================
   AG BODY SHOP — GLOBAL SITE HEADER

   Required markup:
   - #agSiteHeaderWrap
   - #s1Header
   - #s1HeaderSpacer
   - #s1MobileMenu
   - #s1MobilePanel
   - #s1MobileServices
   - #s1MobileServicesTrigger
   - #s1MobileServicesSubmenu

   Required JavaScript:
   - assets/js/site-header.js
========================================================= */


/* =========================================================
   01 — FALLBACK VARIABLES
========================================================= */

:root {

    --color-yellow:
        #e7b900;

    --color-yellow-hover:
        #f2c600;

    --font-title:
        "AmericanaWeb",
        Georgia,
        serif;

    --font-body:
        "AvenirWeb",
        "Avenir",
        Arial,
        sans-serif;

    --ag-admin-bar-offset:
        0px;
}


/* =========================================================
   02 — WORDPRESS ADMIN BAR OFFSET
========================================================= */

body.admin-bar {

    --ag-admin-bar-offset:
        32px;
}


@media(max-width:782px) {

    body.admin-bar {

        --ag-admin-bar-offset:
            46px;
    }

}


/* =========================================================
   03 — LOCAL RESET
========================================================= */

.ag-site-header-wrap,
.ag-site-header-wrap *,
.ag-site-header-wrap *::before,
.ag-site-header-wrap *::after {

    box-sizing:
        border-box;
}


.ag-site-header-wrap a {

    text-decoration:
        none;
}


.ag-site-header-wrap button,
.ag-site-header-wrap input {

    font:
        inherit;
}


.ag-site-header-wrap button,
.ag-site-header-wrap a {

    -webkit-tap-highlight-color:
        transparent;
}


/* =========================================================
   04 — HEADER WRAPPER
========================================================= */

.ag-site-header-wrap {

    position:
        relative;

    z-index:
        10000;

    width:
        100%;

    min-height:
        98px;

    isolation:
        isolate;
}


/*
   در صفحه اصلی Header روی Hero قرار می‌گیرد و فضای جداگانه
   در بالای Hero ایجاد نمی‌کند.
--------------------------------------------------------- */

body.home
.ag-site-header-wrap {

    position:
        absolute;

    top:
        0;

    left:
        0;

    min-height:
        0;
}


/* =========================================================
   05 — SKIP LINK
========================================================= */

.skip-link {

    position:
        fixed;

    z-index:
        2147483000;

    left:
        18px;

    top:

        calc(
            var(--ag-admin-bar-offset)
            +
            18px
        );

    padding:
        12px 18px;

    color:
        #111416;

    background:
        var(--color-yellow);

    border-radius:
        8px;

    font-family:
        var(--font-body);

    font-size:
        14px;

    font-weight:
        700;

    transform:
        translateY(-170%);

    transition:
        transform .2s ease;
}


.skip-link:focus {

    transform:
        translateY(0);

    outline:

        2px solid
        #111416;

    outline-offset:
        3px;
}


/* =========================================================
   06 — MAIN HEADER
========================================================= */

.s1-header {

    position:
        relative;

    z-index:
        1000;

    width:

        min(
            1480px,
            calc(100% - 48px)
        );

    height:
        74px;

    margin:

        24px
        auto
        0;

    padding:

        0
        24px;

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    border:

        1px solid
        rgba(255, 255, 255, .65);

    border-radius:
        40px;

    background:
        rgba(247, 247, 247, .96);

    box-shadow:

        0 12px 34px
        rgba(0, 0, 0, .20);
}


/* =========================================================
   07 — BRAND / LOGO
========================================================= */

.s1-brand {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;
}


.s1-logo {

    display:
        block;

    width:

        clamp(
            135px,
            10.5vw,
            180px
        );

    max-height:
        56px;

    object-fit:
        contain;

    filter:

        drop-shadow(
            0 1px 1px
            rgba(255, 255, 255, .55)
        )

        drop-shadow(
            0 3px 6px
            rgba(0, 0, 0, .24)
        );
}


/* =========================================================
   08 — DESKTOP NAVIGATION
========================================================= */

.s1-nav {

    flex:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:

        clamp(
            16px,
            1.8vw,
            32px
        );
}


.ag-site-header-wrap
.s1-nav > a,

.ag-site-header-wrap
.s1-services-trigger {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    white-space:
        nowrap;

    color:
        #161616;

    font-family:
        var(--font-body);

    font-size:
        14px;

    font-weight:
        300;
}


.s1-nav > a::after,
.s1-services-trigger::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -8px;

    width:
        0;

    height:
        1px;

    transform:
        translateX(-50%);

    background:
        var(--color-yellow);

    transition:
        width .25s ease;
}


.s1-nav > a:hover::after,
.s1-nav > a:focus-visible::after,
.s1-nav > a.is-current::after,
.s1-services-trigger:hover::after,
.s1-services-trigger:focus-visible::after,
.s1-services-trigger.is-current::after {

    width:
        100%;
}


.s1-nav > a:focus-visible,
.s1-services-trigger:focus-visible {

    outline:

        2px solid
        var(--color-yellow);

    outline-offset:
        7px;
}


/* =========================================================
   09 — SERVICES DROPDOWN
========================================================= */

.s1-nav-item {

    position:
        relative;
}


.s1-services-trigger {

    gap:
        7px;
}


.s1-menu-arrow {

    width:
        7px;

    height:
        7px;

    border-right:
        1px solid #333333;

    border-bottom:
        1px solid #333333;

    transform:

        translateY(-2px)
        rotate(45deg);

    transition:
        transform .25s ease;
}


/*
   پل نامرئی میان لینک Services و Dropdown.
   مانع بسته‌شدن Dropdown هنگام حرکت Pointer می‌شود.
--------------------------------------------------------- */

.s1-nav-services::after {

    content:
        "";

    position:
        absolute;

    z-index:
        1;

    left:
        -30px;

    right:
        -30px;

    top:
        100%;

    height:
        26px;
}


.s1-services-dropdown {

    position:
        absolute;

    z-index:
        100;

    left:
        50%;

    top:
        calc(100% + 22px);

    width:
        510px;

    padding:
        15px;

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        5px;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:

        translate(
            -50%,
            9px
        );

    border:

        1px solid
        rgba(0, 0, 0, .08);

    border-radius:
        18px;

    background:
        rgba(249, 249, 249, .985);

    box-shadow:

        0 22px 55px
        rgba(0, 0, 0, .27);

    transition:

        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;
}


.s1-services-dropdown::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        25px;

    right:
        25px;

    height:
        2px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--color-yellow),
            transparent
        );
}


.ag-site-header-wrap
.s1-services-dropdown a {

    padding:

        12px
        14px;

    border-radius:
        10px;

    color:
        #242424;

    font-family:
        var(--font-body);

    font-size:
        13px;

    font-weight:
        300;

    transition:

        padding-left .2s ease,
        color .2s ease,
        background .2s ease;
}


.s1-services-dropdown a:hover,
.s1-services-dropdown a:focus-visible,
.s1-services-dropdown a.is-current {

    padding-left:
        18px;

    color:
        #927500;

    background:
        rgba(231, 185, 0, .10);
}


.s1-services-dropdown a:focus-visible {

    outline:

        2px solid
        var(--color-yellow);

    outline-offset:
        -2px;
}


.s1-nav-services:hover
.s1-services-dropdown,

.s1-nav-services:focus-within
.s1-services-dropdown {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:

        translate(
            -50%,
            0
        );
}


.s1-nav-services:hover
.s1-menu-arrow,

.s1-nav-services:focus-within
.s1-menu-arrow {

    transform:

        translateY(2px)
        rotate(225deg);
}


/* =========================================================
   10 — HEADER ACTIONS
========================================================= */

.s1-header-actions {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


/* Phone
--------------------------------------------------------- */

.ag-site-header-wrap
.s1-phone {

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:

        10px
        13px;

    border:

        1px solid
        rgba(20, 20, 20, .16);

    border-radius:
        24px;

    white-space:
        nowrap;

    color:
        #181818;

    font-family:
        var(--font-body);

    font-size:
        13px;

    font-weight:
        700;

    transition:

        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}


.s1-phone:hover {

    color:
        #181818;

    border-color:
        rgba(20, 20, 20, .34);

    background:
        rgba(0, 0, 0, .035);

    transform:
        translateY(-1px);
}


.s1-phone:focus-visible {

    outline:

        2px solid
        var(--color-yellow);

    outline-offset:
        3px;
}


.s1-phone-icon {

    width:
        17px;

    height:
        17px;

    flex:
        0 0 auto;

    color:
        #181818;
}


/* Estimate Button
--------------------------------------------------------- */

.ag-site-header-wrap
.s1-estimate-button {

    min-height:
        42px;

    padding:

        12px
        18px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        24px;

    white-space:
        nowrap;

    color:
        #111111;

    background:
        var(--color-yellow);

    font-family:
        var(--font-body);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .45px;

    transition:

        transform .22s ease,
        background .22s ease;
}


.s1-estimate-button:hover {

    color:
        #111111;

    transform:
        translateY(-2px);

    background:
        var(--color-yellow-hover);
}


.s1-estimate-button:focus-visible {

    outline:

        2px solid
        #111416;

    outline-offset:
        3px;
}


/* =========================================================
   11 — MOBILE ELEMENTS HIDDEN ON DESKTOP
========================================================= */

.s1-mobile-actions,
.s1-mobile-panel {

    display:
        none;
}


/* =========================================================
   12 — HEADER SPACER
========================================================= */

.s1-header-spacer {

    width:
        100%;

    height:
        0;

    flex:
        0 0 auto;

    pointer-events:
        none;

    transition:
        height .28s ease;
}


.s1-header-spacer.is-active {

    height:
        98px;
}


/* =========================================================
   13 — COMPACT DESKTOP HEADER
========================================================= */

@media(min-width:861px) {

    #s1Header {

        transition:

            width .32s ease,
            height .32s ease,
            top .32s ease,
            padding .32s ease,
            gap .32s ease,
            border-radius .32s ease,
            box-shadow .32s ease,
            background .32s ease;
    }


    #s1Header .s1-logo,
    #s1Header .s1-nav,
    #s1Header .s1-phone,
    #s1Header .s1-phone > span,
    #s1Header .s1-estimate-button {

        transition:

            width .28s ease,
            height .28s ease,
            max-height .28s ease,
            padding .28s ease,
            gap .28s ease,
            opacity .2s ease;
    }


    #s1Header.is-compact {

        position:
            fixed;

        z-index:
            10000;

        top:

            calc(
                var(--ag-admin-bar-offset)
                +
                14px
            );

        left:
            50%;

        width:

            min(
                1040px,
                calc(100% - 32px)
            );

        height:
            66px;

        margin:
            0;

        padding:

            0
            16px;

        gap:
            18px;

        transform:
            translateX(-50%);

        border:

            1px solid
            rgba(17, 20, 23, .11);

        border-radius:
            35px;

        background:
            rgba(255, 255, 255, .98);

        box-shadow:

            0 14px 38px
            rgba(0, 0, 0, .19);

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;

        animation:
            s1CompactHeaderEnter .3s ease both;
    }


    #s1Header.is-compact
    .s1-logo {

        width:
            160px;

        max-height:
            50px;
    }


    #s1Header.is-compact
    .s1-nav {

        gap:

            clamp(
                18px,
                2vw,
                30px
            );
    }


    #s1Header.is-compact
    .s1-nav > a,

    #s1Header.is-compact
    .s1-services-trigger {

        font-size:
            14px;
    }


    #s1Header.is-compact
    .s1-phone {

        width:
            46px;

        height:
            46px;

        min-width:
            46px;

        flex:
            0 0 46px;

        padding:
            0;

        justify-content:
            center;

        border-radius:
            50%;
    }


    #s1Header.is-compact
    .s1-phone > span {

        display:
            none;
    }


    #s1Header.is-compact
    .s1-phone-icon {

        width:
            19px;

        height:
            19px;
    }


    #s1Header.is-compact
    .s1-estimate-button {

        min-height:
            46px;

        padding:

            0
            22px;

        font-size:
            12px;
    }


    #s1Header.is-compact
    .s1-services-dropdown {

        top:
            calc(100% + 18px);
    }


    #s1Header.is-compact
    .s1-nav-services::after {

        height:
            22px;
    }

}


/* =========================================================
   14 — COMPACT HEADER ANIMATION
========================================================= */

@keyframes s1CompactHeaderEnter {

    from {

        opacity:
            0;

        transform:

            translate(
                -50%,
                -14px
            );
    }


    to {

        opacity:
            1;

        transform:

            translate(
                -50%,
                0
            );
    }

}


/* =========================================================
   15 — MEDIUM DESKTOP
========================================================= */

@media(max-width:1180px) and (min-width:861px) {

    .s1-header {

        gap:
            14px;

        padding:

            0
            18px;
    }


    .s1-nav {

        gap:
            15px;
    }


    .s1-nav > a,
    .s1-services-trigger {

        font-size:
            13px;
    }


    .s1-phone {

        padding:

            9px
            11px;

        font-size:
            12px;
    }


    .s1-estimate-button {

        padding:

            11px
            14px;

        font-size:
            11px;
    }

}


/* =========================================================
   16 — MOBILE HEADER
========================================================= */

@media(max-width:860px) {

    .ag-site-header-wrap {

        min-height:
            86px;
    }


    body.home
    .ag-site-header-wrap {

        min-height:
            0;
    }


    body.s1-menu-open {

        overflow:
            hidden;

        touch-action:
            none;
    }


    .s1-header {

        position:
            fixed;

        z-index:
            10020;

        top:

            calc(
                var(--ag-admin-bar-offset)
                +
                12px
            );

        left:
            50%;

        width:
            calc(100% - 24px);

        height:
            62px;

        margin:
            0;

        padding:

            0
            14px;

        gap:
            0;

        transform:
            translateX(-50%);

        border:

            1px solid
            rgba(17, 20, 23, .11);

        border-radius:
            31px;

        background:
            #ffffff;

        box-shadow:

            0 10px 28px
            rgba(0, 0, 0, .14);

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }


    .s1-logo {

        width:
            132px;

        max-height:
            44px;
    }


    .s1-nav,
    .s1-header-actions {

        display:
            none;
    }


    .s1-mobile-actions {

        display:
            flex;

        align-items:
            center;

        gap:
            7px;

        margin-left:
            auto;
    }


    /* Hamburger Button
    ----------------------------------------------------- */

    .s1-mobile-menu {

        width:
            48px;

        height:
            48px;

        flex:
            0 0 48px;

        padding:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            4px;

        color:
            #181b1f;

        background:
            #f2f3f4;

        border:

            1px solid
            rgba(17, 20, 23, .14);

        border-radius:
            50%;

        box-shadow:

            inset
            0 1px 0
            rgba(255, 255, 255, .95);

        cursor:
            pointer;

        transition:

            background .2s ease,
            border-color .2s ease,
            transform .2s ease;
    }


    .s1-mobile-menu:hover,
    .s1-mobile-menu:focus-visible {

        background:
            rgba(231, 185, 0, .14);

        border-color:
            rgba(183, 146, 0, .42);

        transform:
            translateY(-1px);
    }


    .s1-mobile-menu:focus-visible {

        outline:

            2px solid
            var(--color-yellow);

        outline-offset:
            3px;
    }


    #s1MobileMenu > span {

        display:
            block;

        width:
            21px;

        height:
            2px;

        min-height:
            2px;

        flex:
            0 0 2px;

        margin:
            0;

        padding:
            0;

        opacity:
            1;

        background:
            #181b1f;

        border:
            0;

        border-radius:
            999px;

        transform:
            none;

        transform-origin:
            center;

        transition:

            transform .25s ease,
            opacity .2s ease;
    }


    #s1MobileMenu[aria-expanded="true"]
    > span:nth-child(1) {

        transform:

            translateY(6px)
            rotate(45deg);
    }


    #s1MobileMenu[aria-expanded="true"]
    > span:nth-child(2) {

        opacity:
            0;
    }


    #s1MobileMenu[aria-expanded="true"]
    > span:nth-child(3) {

        transform:

            translateY(-6px)
            rotate(-45deg);
    }


    /* Mobile Navigation Panel
    ----------------------------------------------------- */

    .s1-mobile-panel {

        position:
            fixed;

        z-index:
            10010;

        top:

            calc(
                var(--ag-admin-bar-offset)
                +
                86px
            );

        left:
            12px;

        right:
            12px;

        max-height:

            calc(
                100dvh
                -
                var(--ag-admin-bar-offset)
                -
                98px
            );

        display:
            grid;

        overflow-x:
            hidden;

        overflow-y:
            auto;

        overscroll-behavior:
            contain;

        padding:
            17px;

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        transform:
            translateY(-10px);

        border:

            1px solid
            rgba(255, 255, 255, .18);

        border-radius:
            22px;

        color:
            #ffffff;

        background:
            rgba(13, 17, 21, .88);

        backdrop-filter:

            blur(24px)
            saturate(140%);

        -webkit-backdrop-filter:

            blur(24px)
            saturate(140%);

        box-shadow:

            0 22px 55px
            rgba(0, 0, 0, .38);

        scrollbar-width:
            thin;

        transition:

            opacity .24s ease,
            transform .24s ease,
            visibility .24s ease;
    }


    .s1-mobile-panel.is-open {

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        transform:
            translateY(0);
    }


    .ag-site-header-wrap
    .s1-mobile-panel > a {

        padding:

            14px
            16px;

        border-radius:
            13px;

        color:
            rgba(255, 255, 255, .90);

        font-family:
            var(--font-body);

        font-size:
            15px;

        font-weight:
            300;

        transition:

            color .2s ease,
            background .2s ease;
    }


    .s1-mobile-panel > a:hover,
    .s1-mobile-panel > a:focus-visible,
    .s1-mobile-panel > a.is-current {

        color:
            #ffffff;

        background:
            rgba(231, 185, 0, .09);
    }


    .s1-mobile-panel > a:focus-visible {

        outline:

            2px solid
            var(--color-yellow);

        outline-offset:
            -2px;
    }


    /* Mobile Search
    ----------------------------------------------------- */

    .s1-menu-search {

        width:
            100%;

        margin:

            0
            0
            15px;

        padding-bottom:
            15px;

        border-bottom:

            1px solid
            rgba(255, 255, 255, .10);
    }


    .s1-menu-search-box {

        width:
            100%;

        min-height:
            54px;

        display:
            grid;

        grid-template-columns:

            43px
            minmax(0, 1fr)
            46px;

        align-items:
            center;

        overflow:
            hidden;

        background:
            #f4f5f6;

        border:

            1px solid
            rgba(17, 20, 23, .12);

        border-radius:
            15px;

        box-shadow:

            0 8px 20px
            rgba(0, 0, 0, .08);

        transition:

            border-color .22s ease,
            box-shadow .22s ease;
    }


    .s1-menu-search-box:focus-within {

        border-color:
            rgba(183, 146, 0, .55);

        box-shadow:

            0 9px 24px
            rgba(0, 0, 0, .11);
    }


    .s1-menu-search-icon {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        color:
            rgba(24, 27, 31, .60);
    }


    .s1-menu-search-icon svg {

        width:
            19px;

        height:
            19px;

        fill:
            none;

        stroke:
            currentColor;

        stroke-width:
            1.7;

        stroke-linecap:
            round;

        stroke-linejoin:
            round;
    }


    .s1-menu-search input {

        width:
            100%;

        min-width:
            0;

        height:
            52px;

        padding:

            0
            8px
            0
            0;

        color:
            #181b1f;

        background:
            transparent;

        border:
            0;

        outline:
            0;

        font-family:
            var(--font-body);

        font-size:
            15px;
    }


    .s1-menu-search input::placeholder {

        color:
            rgba(24, 27, 31, .45);
    }


    .s1-menu-search button {

        width:
            46px;

        height:
            52px;

        padding:
            0;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        color:
            #111416;

        background:
            var(--color-yellow);

        border:
            0;

        cursor:
            pointer;

        transition:

            color .2s ease,
            background .2s ease;
    }


    .s1-menu-search button:hover {

        color:
            #ffffff;

        background:
            #1c2024;
    }


    .s1-menu-search button:focus-visible {

        outline:

            2px solid
            #111416;

        outline-offset:
            -4px;
    }


    .s1-menu-search button svg {

        width:
            20px;

        height:
            20px;

        fill:
            none;

        stroke:
            currentColor;

        stroke-width:
            1.7;

        stroke-linecap:
            round;

        stroke-linejoin:
            round;
    }


    /* Mobile Services Accordion
    ----------------------------------------------------- */

    .s1-mobile-services {

        position:
            relative;

        width:
            100%;
    }


    .s1-mobile-services-trigger {

        width:
            100%;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        padding:

            14px
            16px;

        border:
            0;

        border-radius:
            13px;

        color:
            rgba(255, 255, 255, .92);

        background:
            transparent;

        font-family:
            var(--font-body);

        font-size:
            15px;

        font-weight:
            300;

        text-align:
            left;

        cursor:
            pointer;

        transition:

            color .2s ease,
            background .2s ease;
    }


    .s1-mobile-services-trigger:hover,
    .s1-mobile-services-trigger:focus-visible,
    .s1-mobile-services.is-current
    .s1-mobile-services-trigger {

        color:
            #ffffff;

        background:
            rgba(231, 185, 0, .09);
    }


    .s1-mobile-services-trigger:focus-visible {

        outline:

            2px solid
            var(--color-yellow);

        outline-offset:
            -2px;
    }


    .s1-mobile-services-arrow {

        width:
            8px;

        height:
            8px;

        border-right:
            1px solid #ffffff;

        border-bottom:
            1px solid #ffffff;

        transform:
            rotate(45deg);

        transition:
            transform .25s ease;
    }


    .s1-mobile-services.is-open
    .s1-mobile-services-arrow {

        transform:
            rotate(225deg);
    }


    .s1-mobile-services-submenu {

        position:
            relative;

        display:
            grid;

        max-height:
            0;

        margin:

            0
            10px;

        padding:
            0;

        overflow:
            hidden;

        opacity:
            0;

        visibility:
            hidden;

        border-radius:
            12px;

        background:
            rgba(255, 255, 255, .035);

        transition:

            max-height .35s ease,
            opacity .25s ease,
            visibility .25s ease,
            margin .25s ease,
            padding .25s ease;
    }


    .s1-mobile-services.is-open
    .s1-mobile-services-submenu {

        max-height:
            620px;

        margin-top:
            5px;

        margin-bottom:
            8px;

        padding:

            7px
            0;

        opacity:
            1;

        visibility:
            visible;
    }


    .s1-mobile-services-submenu::before {

        content:
            "";

        position:
            absolute;

        top:
            10px;

        bottom:
            10px;

        left:
            13px;

        width:
            1px;

        background:

            linear-gradient(
                180deg,
                transparent,
                var(--color-yellow) 15%,
                var(--color-yellow) 85%,
                transparent
            );
    }


    .ag-site-header-wrap
    .s1-mobile-services-submenu a {

        position:
            relative;

        padding:

            10px
            15px
            10px
            32px;

        color:
            rgba(255, 255, 255, .68);

        font-family:
            var(--font-body);

        font-size:
            13px;

        font-weight:
            300;

        transition:

            color .2s ease,
            background .2s ease;
    }


    .s1-mobile-services-submenu a::before {

        content:
            "";

        position:
            absolute;

        left:
            11px;

        top:
            50%;

        width:
            5px;

        height:
            5px;

        transform:
            translateY(-50%);

        border-radius:
            50%;

        background:
            var(--color-yellow);
    }


    .s1-mobile-services-submenu a:hover,
    .s1-mobile-services-submenu a:focus-visible,
    .s1-mobile-services-submenu a.is-current {

        color:
            #ffffff;

        background:
            rgba(231, 185, 0, .07);
    }


    .s1-mobile-services-submenu a:focus-visible {

        outline:

            2px solid
            var(--color-yellow);

        outline-offset:
            -2px;
    }

}


/* =========================================================
   17 — SMALL MOBILE
========================================================= */

@media(max-width:480px) {

    .s1-logo {

        width:
            124px;
    }


    .s1-mobile-panel {

        left:
            10px;

        right:
            10px;

        padding:
            15px;
    }

}


/* =========================================================
   18 — REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {

    #s1Header,
    #s1Header *,
    .s1-header-spacer,
    .s1-mobile-panel,
    .s1-mobile-services-submenu,
    .s1-mobile-menu,
    .s1-mobile-menu span {

        transition:
            none !important;

        animation:
            none !important;
    }

}