:where(.mobile-nav-container) {
    display: none;
    margin-left: 2rem;


    :where(.mobile-nav-icon) {
        border: none;
        background: none;
        margin-top: 1rem;
        &:hover {
            cursor: pointer;
        }

        svg {
            width: 3rem;
            height: 3rem;

            & > path {
                fill: var(--logo-color);
            }
        }
    }

    @starting-style {
        .mobile-menu-dialog[open] {
            right: -100dvw;
        }
    }

    :where(.mobile-menu-dialog) {
        height: 100%;
        max-height: 100dvh;
        right: -100dvw;
        padding-left: 4rem;
        width: 75dvw;
        background: var(--color-brand-corporate-blue);
        color: var(--color-primary-white);
        margin-right: 0;
        border: none;
        overflow-x: hidden;
        transition: right 350ms ease-in-out;

        &[open] {
            right: 0;
        }

        &::backdrop {
            background: rgba(0, 0, 0, 0.6);
        }

        :where(.mobile-nav-wrapper) {
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            height: 100%;
            padding-block: 4rem;

            :where(.mobile-back-button, .close-modal) {
                color: var(--color-primary-white);
                background: none;
                border: none;
                z-index: 2;
                position: absolute;
                padding: 0;
                & svg {
                    color: var(--color-primary-white);
                    width: 3.5rem;
                    height: 3.5rem;
                    border: 2px solid var(--color-primary-white);
                    border-radius: 50%;
                    & path{
                        transform: rotate(45deg);
                        transform-origin: center;
                    }
                }

                &:hover {
                    cursor: pointer;
                }
            }
            :where(.mobile-back-button) {
                font-size: 3rem;
            }

            :where(.mobile-back-button) {
                left: .5rem;
                top: .5rem;
            }

            :where(.close-modal) {
                right: 2rem;
                top: 2rem;
                font-size: 0;
                &:focus-visible {
                    outline: none;
                    :where(.close){
                        outline: 3px solid lightblue;
                    }
                }
            }

            & ul {
                padding: 0;
                list-style: none;
                margin: 0;

                :where(.clickableMenu:hover) {
                    cursor: pointer;
                }

                & a {
                    color: var(--color-primary-white);
                    text-decoration: none;
                }
            }

            :where(
                .mobile-utility-nav-links,
                .mobile-primary-nav-links,
                .mobile-utility-curtain,
                .mobile-utility-curtain-links
            ) {
                display: flex;
                flex-flow: column;
                gap: 1rem;

                & a {
                    color: var(--color-primary-white);
                    text-decoration: none;
                }
            }


            :where(.mobile-primary-nav-links) {
                margin-bottom: 6rem;

                & > ul {
                    padding: 0;
                    list-style: none;
                }

                :where(.l2-menu-item) {
                    display: flex;
                    flex-flow: row;
                    justify-content: space-between;
                    padding-block: 1rem;
                    border-bottom: 1px solid var(--color-brand-sky-blue);
                }

                :where(.tip-down-arrow) {
                    transform: rotate(-90deg);
                    padding-inline: 3rem;

                    &:hover {
                        cursor: pointer;
                    }

                    & > svg {
                        width: 2rem;

                        & > path {
                            stroke: var(--color-primary-white);
                        }
                    }
                }
            }

            :where(.mobile-utility-nav-links) {
                .utility-nav-menu-link.call-to-action.call-to-action-button.call-to-action-primary {
                    padding: 0;
                    background: none;
                    width: fit-content;
                }

                :where(.mobile-curtain-label-container) {
                    display: flex;
                    flex-flow: row;
                    gap: 1rem;
                    align-items: flex-end;
                    margin-bottom: 1rem;
                }

                :where(.mobile-utility-curtain) {
                    margin-block: 4rem;

                    :where(.mobile-curtain-label) {
                        font-weight: 600;
                        line-height: 1;
                    }
                }

            }

            :where(.l2-menu-item-link, .curtain-column-label) {
                text-transform: uppercase;
                font-weight: 600;
            }

            :where(.mobile-l3-container) {
                position: absolute;
                max-height: 90dvh;
                height: 100%;
                transition: all 250ms ease-in-out;
                transform: translateX(-1rem);
                background: var(--color-brand-corporate-blue);
                display: block;
                z-index: 2;
                overflow-y: auto;
                width: calc(100% - 4rem);

                transition-behavior: allow-discrete;

                &.inactive {
                    transform: translateX(100dvw);
                    transition-behavior: allow-discrete;

                    & :where(.l3-link) {
                        display: none;
                    }
                }


                :where(.l3-curtain-column) {
                    :where(.curtain-column-label) {
                        margin-top: 2.6rem;
                        margin-bottom: 1.6rem;
                    }
                }

                :where(.l3-curtain-copy > *) {
                    color: var(--color-primary-white);
                }


                :where(.l3-menu-item:has(*)) {
                    padding-block: 0.7rem;
                    border-bottom: solid 1px var(--color-brand-sky-blue);
                    width: 80%;

                    & > a {
                        display: inline-block;
                        width: 100%;
                    }
                }
            }


        }

    }
}

@media screen and (max-width: 1080px) {
    :where(.mobile-nav-container) {
        display: block;
    }
}