.nav-simple__panel {
    --nav-simple-bg: var(--grey-980, #0a0a0a);
    --nav-simple-border: rgb(255 255 255 / 0.2);
    --nav-simple-link-color: var(--grey-50, #e5e2e1);
    --nav-simple-link-active: var(--green-500, #5aad5a);
}

@media (max-width: 1024px) {
    .nav-simple {
        --nav-simple-control-size: 4.5rem;
        --nav-simple-padding-block: 2.4rem 2.5rem;
        --nav-simple-padding-inline: 1.5rem;
        --nav-simple-cta-bg: #f5f5f0;
        --nav-simple-cta-border: transparent;
        --nav-simple-cta-color: var(--black, #000);
    }

    .nav-simple__mainbar {
        --row-width: 90%;
        gap: 1rem;
        min-block-size: auto;
        padding-block: var(--nav-simple-padding-block);
    }

    .nav-simple__logo svg {
        block-size: 3.2rem;
    }


    .nav-simple__cta {
        --btn-bg: var(--nav-simple-cta-bg);
        --btn-bordercolor: var(--nav-simple-cta-border);
        --btn-color: var(--nav-simple-cta-color);
        --btn-fontface: var(--font-special);
        --btn-fontsize: var(--fs-16, 1.6rem);
        --btn-fontweight: 400;
        --btn-padding: 0 2.4rem;
        --btn-radius: 0;

        display: inline-flex;
        align-items: center;
        block-size: var(--nav-simple-control-size);
        letter-spacing: -0.08rem;
        line-height: 1.6;
        text-transform: uppercase;
    }

    .nav-simple__icons {
        display: flex;
        align-items: stretch;
        z-index: 2;
    }

    button.nav-simple__toggle {
        inline-size: var(--nav-simple-control-size);
        block-size: var(--nav-simple-control-size);
        flex-shrink: 0;
        margin-inline-start: 0;
        padding: 0;
        border-radius: 0;
    }

    .nav-simple__panel {
        position: fixed;
        inset: var(--nav-height, 9.1rem) 0 0 0;
        flex: none;
        inline-size: 100%;
        padding-block: 5.2rem 2rem;
        padding-inline: 1.5rem;
        background: var(--grey-950, #141414);
        overflow-y: auto;
        translate: -100% 0;
        transition: translate 0.25s ease;
    }

    body.nav--is-expanded .nav-simple__panel {
        translate: 0;
    }

    .nav-simple__list.main-menu {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    .nav-simple__item {
        inline-size: 100%;
    }

    .nav-simple__item--has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .nav-simple__link-row {
        display: flex;
        align-items: center;
        inline-size: 100%;
    }

    .nav-simple__item--has-children > .nav-simple__link-row .nav-simple__link {
        flex: 1;
        min-inline-size: 0;
    }

    .nav-simple__item--has-children > .nav-simple__link-row .nav-simple__chevron {
        --twz-icon-size: .8em;

        flex-shrink: 0;
    }

    .nav-simple__item--has-children.nav-simple__item--open > .nav-simple__link-row .nav-simple__chevron {
        rotate: 180deg;
    }

    .nav-simple__link {
        display: flex;
        padding-block: 0;
        color: var(--nav-simple-link-color);
        font-family: var(--font-special);
        font-size: var(--fs-24, 2.4rem);
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0;
        text-align: start;
        text-transform: uppercase;
        text-decoration: none;
    }

    .nav-simple__link--active {
        color: var(--nav-simple-link-active);
        border-block-end: 0;
    }

    .nav-simple__item--has-children > .nav-simple__submenu {
        display: none;
        flex: 0 0 100%;
        flex-direction: column;
        gap: 1rem;
        margin-block-start: 1rem;
        padding-inline-start: 1.6rem;
        border-inline-start: 0.1rem solid rgb(255 255 255 / 0.2);
    }

    .nav-simple__item--has-children.nav-simple__item--open > .nav-simple__submenu {
        display: flex;
    }

    .nav-simple__submenu-link {
        padding: 0;
        font-family: var(--font-special);
        font-size: var(--fs-20, 2rem);
        font-weight: 400;
        line-height: normal;
        text-align: start;
        text-transform: uppercase;
    }

    .nav-simple__submenu-link--active {
        color: var(--nav-simple-link-active);
    }

    .nav-simple--open :is(.nav-simple__hamburger-line--top, .nav-simple__hamburger-line--bottom) {
        opacity: 0;
    }

    .nav-simple--open .nav-simple__hamburger-line--mid {
        opacity: 1;
    }

    body.nav--is-expanded {
        overflow: hidden;
    }
}

body.nav--is-expanded::after {
    opacity: 1;
}

body.no-scroll {
    overflow: clip;
}

:is(.nav-simple, .nav-simple__panel) {
    --nav-simple-bg: var(--grey-980, #0a0a0a);
    --nav-simple-border: rgb(255 255 255 / 0.2);
    --nav-simple-link-color: var(--grey-50, #e5e2e1);
    --nav-simple-link-active: var(--green-500, #5aad5a);
}

.nav-simple {
    --nav-simple-gap: 3.2rem;
    --nav-simple-padding-block: 2.4rem 2.5rem;
    --nav-simple-padding-inline: 3.2rem;
    --nav-simple-cta-bg: transparent;
    --nav-simple-cta-border: var(--nav-simple-link-color);
    --nav-simple-cta-color: var(--nav-simple-link-color);

    position: sticky;
    overflow-x: clip;
    inset-block: 0 auto;
    inset-inline: 0;
    z-index: 900;
    background: var(--nav-simple-bg);
    border-block-end: 0.1rem solid var(--nav-simple-border);

    .nav-simple__mainbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        inline-size: min(var(--row-width, 95%), var(--row-maxwidth, 140rem));
        margin-inline: auto;
        padding-block: var(--nav-simple-padding-block);

        @media (min-width: 1025px) {
            min-block-size: var(--nav-height, 9.1rem);
        }
    }

    .nav-simple__logo {
        flex-shrink: 0;
        z-index: 2;

        a {
            display: block;
            line-height: 0;
        }

        svg {
            display: block;
            inline-size: auto;
            block-size: 5.2rem;
        }
    }

    .nav-simple__cta-bar {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 1.6rem;

        @media (min-width: 1025px) {
            margin-inline-start: var(--nav-simple-gap);
        }

        @media (max-width: 1024px) {
            align-items: stretch;
            margin-inline-start: auto;
        }
    }

    .nav-simple__panel {
        z-index: 1;
        display: flex;
        justify-content: flex-end;
        flex: 1;
        min-inline-size: 0;

        @media (min-width: 1025px) {
            position: relative;
            align-items: center;
        }
    }

    .nav-simple__list.main-menu {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--nav-simple-gap);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav-simple__item {
        position: relative;
        margin: 0;
        padding: 0;
    }

    .nav-simple__link-row {
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
    }

    .nav-simple__item--has-children {
        @media (min-width: 1025px) {
            > .nav-simple__submenu.sub-menu--0 {
                z-index: 950;
                display: none;
                min-inline-size: 22rem;
                max-inline-size: min(22rem, calc(100vw - (2 * var(--nav-simple-padding-inline))));
                padding-block: 1.6rem;
                background: var(--grey-950, #141414);
                border: 0.1rem solid var(--nav-simple-border);
            }

            &:is(:hover, :focus-within) > .nav-simple__submenu.sub-menu--0 {
                display: block;
            }

            @supports (anchor-name: --nav-simple-item) {
                anchor-name: --nav-simple-item;

                > .nav-simple__submenu.sub-menu--0 {
                    position: fixed;
                    position-anchor: --nav-simple-item;
                    inset-block-start: anchor(bottom);
                    inset-inline-start: anchor(left);
                    position-try-fallbacks: flip-inline;
                }
            }

            @supports not (anchor-name: --nav-simple-item) {
                > .nav-simple__submenu.sub-menu--0 {
                    position: absolute;
                    inset-block-start: calc(100% + 1.2rem);
                    inset-inline-start: 0;
                    inset-inline-end: auto;
                }

                .nav-simple__list.main-menu > &:nth-last-child(-n+3) > .nav-simple__submenu.sub-menu--0 {
                    inset-inline-start: auto;
                    inset-inline-end: 0;
                }
            }
        }
    }

    .nav-simple__link {
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
        padding-block: 0.2rem;
        color: var(--nav-simple-link-color);
        font-family: var(--font-special);
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.1rem;
        text-decoration: none;
        text-transform: uppercase;
        transition: color 0.2s ease, border-color 0.2s ease;

        @media (min-width: 1025px) {
            font-size: var(--fs-p);
        }

        &:is(:hover, :focus-visible) {
            color: var(--nav-simple-link-active);
        }
    }

    .nav-simple__link--active {
        color: var(--nav-simple-link-active);
        border-block-end: 0.2rem solid var(--nav-simple-link-active);
        padding-block-end: .3em;
    }

    .nav-simple__cta {
        --btn-bg: var(--nav-simple-cta-bg);
        --btn-bordercolor: var(--nav-simple-cta-border);
        --btn-color: var(--nav-simple-cta-color);
        --btn-fontface: var(--font-special);
        --btn-fontsize: var(--fs-16, 1.6rem);
        --btn-fontweight: 400;
        --btn-padding: 0.8rem 2.4rem;
        --btn-radius: 0;

        letter-spacing: -0.08rem;
        text-transform: uppercase;

        &:is(:hover, :focus-visible) {
            --btn-bg: transparent;
            --btn-bordercolor: var(--nav-simple-link-active);
            --btn-color: var(--nav-simple-link-active);
        }
    }

    .nav-simple__chevron {
        --twz-icon-size: .65em;
        --twz-icon-fill: var(--white);

        display: inline-flex;
        flex-shrink: 0;
        transition: rotate 0.2s ease;
        background: transparent;
        padding: 0;
    }

    .nav-simple__icons {
        @media (min-width: 1025px) {
            display: none;
        }
    }

    .nav-simple__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.8rem;
        border: 0.1rem solid var(--nav-simple-link-color);
        background: transparent;
        color: var(--nav-simple-link-color);
        cursor: pointer;
    }

    .nav-simple__hamburger {
        --nav-simple-hamburger-height: 0.1rem;
        --nav-simple-hamburger-gap: 0.55rem;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        inline-size: 1.6rem;
        block-size: calc(var(--nav-simple-hamburger-height) * 3 + var(--nav-simple-hamburger-gap) * 2);
    }

    .nav-simple__hamburger-line {
        display: block;
        inline-size: 100%;
        block-size: var(--nav-simple-hamburger-height);
        background: currentColor;
        transform-origin: center;
        transition:
            translate 0.25s ease,
            rotate 0.25s ease,
            opacity 0.25s ease;
    }

    .nav-simple__submenu {
        margin: 0;
        padding: 0;
        list-style: none;

        &.sub-menu--1 {
            @media (min-width: 1025px) {
                position: static;
                padding-inline-start: 1.6rem;
                border-inline-start: 0.1rem solid var(--nav-simple-border);
            }
        }
    }
}

:is(.nav-simple__inner, .nav-simple__list-wrap) {
    inline-size: 100%;
}

@media (min-width: 1025px) {
    .nav-simple__item:is(:hover, :focus-within) .nav-simple__chevron {
        rotate: 180deg;
    }
}

.nav-simple__submenu-link {
    display: block;
    padding: 1rem 2rem;
    color: var(--nav-simple-link-color);
    font-family: var(--font-special);
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
    text-transform: uppercase;

    @media (min-width: 1025px) {
        font-size: var(--fs-16, 1.6rem);
    }

    &:is(:hover, :focus-visible) {
        color: var(--nav-simple-link-active);
    }
}

.nav-simple__submenu-link--active {
    color: var(--nav-simple-link-active);
}

.list--unstyled {
    margin: 0;
    padding: 0;
    list-style: none;
}