header {
    background: transparent;
    box-shadow: none;
}

header.header-background {
    background-color: var(--c-white);
    box-shadow: var(--elevation-s);
}

nav.eos-topnav__links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav.eos-topnav__links > a.eos-btn {
    color: var(--c-white);
}

header.header-background a.eos-btn {
    color: var(--c-base-500);
}

button#mobile-menu {
    display: none;
}

button#mobile-menu[aria-expanded="true"] {
    color: var(--c-white);
}

@media screen and (max-width: 35rem) {
    nav.eos-topnav__links {
        position: fixed;
        inset: 0 0 0 30%;
        z-index: 1000;
        flex-direction: column;
        padding: var(--spacing-xxl) var(--spacing-m);
        gap: var(--spacing-s);
        transform: translateX(100%);
        transition: transform 200ms ease;
        background-color: var(--c-base-500);
    }
    @supports (backdrop-filter: blur(1rem)) {
        nav.eos-topnav__links {
            background-color: var(--c-base-opacity-80);
            backdrop-filter: blur(0.75rem);
        }
    }
    nav.eos-topnav__links a.eos-btn {
        color: var(--c-white);
        width: 100%;
        text-align: left;
        justify-content: left;
        padding: var(--spacing-s);
    }
    button#mobile-menu {
        display: block;
        z-index: 1001;
    }
    header:not(.header-background) button#mobile-menu {
        color: var(--c-white);
    }
    nav.eos-topnav__links.mobile-nav__visible {
        transform: translateX(0);
        box-shadow: calc(-1 * var(--spacing-xxs)) 0 var(--spacing-xs) var(--c-black-opacity-40);
    }
    .eos-dropdown#services-dropdown {
        display: none;
    }
}