:where( .site-header .utility-nav) {
    display: flex;
    flex-flow: row;
    gap: 2rem;
    align-items: center;

    :where(.utility-nav-items) {
        display: flex;
        flex-flow: row;
        align-items: center;
        gap: 2rem;
        list-style: none;

        .call-to-action {
            --local-padding-block: var(--size-xx-small);

            &:not(.call-to-action-button) {
                --local-padding-inline: 0;
            }
        }

        :where(.call-to-action) {
            text-decoration: none;
            color: var(--logo-color);

            &:hover {
                text-decoration: underline;
            }
        }

    }

    :where(.login-container) {
        border-bottom: solid 2px transparent;
        padding-bottom: 0.5rem;
        transform: translateY(0.5rem);

        .login {
            display: flex;
            flex-flow: row;
            gap: 0.5rem;
            align-items: center;
            background: unset;
            border: unset;
            padding: unset;
            margin: unset;
            outline-offset: 1rem;

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

            & > span {
                line-height: 1;
                display: flex;
                flex-flow: row;
                gap: 0.5rem;
                align-items: center;
                color: var(--logo-color);

                & > svg {
                    width: 1.5rem;
                    height: 1rem;

                    path {
                        stroke: var(--logo-color);
                    }
                }
            }
        }

        :where(.login-options) {
            display: none;
            padding: 1rem 2rem;
            background: var(--color-brand-light-grey);
            position: absolute;
            min-width: 20rem;
            transform: translateY(0.8rem);

            & > a {
                color: var(--color-brand-dark-grey);
            }
        }

        &:hover, &:focus-within {
            border-bottom: solid 2px var(--color-brand-corporate-blue);

            :where(.login-options) {
                display: flex;
                flex-flow: column;
                gap: 1rem;

                & > a {
                    text-decoration: none;

                    &:hover {
                        color: var(--color-brand-corporate-blue)
                    }
                }

            }
        }
    }

}