.nav-right {
    position: relative;

    .nav-contact-toggle-shell {
        display: inline-flex;
        align-items: center;
        padding: var(--space-xs) var(--space-sm);
        background: transparent;
        color: inherit;
        border-radius: var(--space-xxs) var(--space-xxs) 0 0;

        &:hover {
            background: var(--jet-black);
            color: var(--super-white);
            border-radius: var(--space-xxs);
        }
    }

    .nav-contact-panel {
        position: absolute;
        inset: 100% 0 auto auto;
        z-index: 1200;
        width: max(100%, 38rem);
        max-width: calc(100vw - 2 * var(--space-md));
        box-sizing: border-box;
        padding: var(--space-md);
        border-radius: var(--space-xs) 0 var(--space-xs) var(--space-xs);
        background: var(--jet-black);
        color: var(--the-white);
        color-scheme: dark;
        text-transform: none;
    }

    .nav-contact-panel__content {
        display: grid;
        gap: 2rem;
    }

    .nav-contact-section {
        width: auto;
        min-width: 0;
        min-height: 0;
    }

    .nav-contact-overview {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 2rem;
    }

    .nav-contact-overview__main,
    .nav-contact-location {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        min-width: 0;
    }

    .nav-contact-label {
        margin: 0 0 0.75rem;
        color: var(--grey);
        font-size: var(--fs-sm);
        line-height: 1.4;
    }

    .nav-contact-link {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        min-height: 2rem;
        padding-block: 0.25rem;
        box-sizing: border-box;
        color: var(--the-white);
        font-size: 1.2rem;
        line-height: 1.3;
        text-decoration: none;
        overflow-wrap: anywhere;
        transition: color 300ms var(--out), background-size 300ms var(--out);

        &:hover,
        &:focus-visible {
            color: var(--super-white);
        }
    }

    .nav-contact-phone {
        font-size: clamp(1.4rem, 1.2rem + 0.4vw, 1.65rem);
        letter-spacing: -0.025em;
    }

    .nav-contact-messengers,
    .nav-contact-maps {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 1rem;
    }

    .nav-contact-messengers {
        margin-top: 0.5rem;
    }

    .nav-contact-address-wrap {
        position: relative;
        min-width: 0;
        max-width: 100%;
    }

    .nav-contact-address {
        display: inline;
        max-width: 100%;
        border-radius: 0;
        text-align: left;
        font: inherit;
        overflow-wrap: anywhere;
    }

    .nav-contact-copy-status {
        position: absolute;
        inset: auto 0 calc(100% + 0.4rem) auto;
        z-index: 1;
        width: max-content;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.5rem 0.75rem;
        border-radius: var(--space-xxs);
        background: var(--the-white);
        color: var(--jet-black);
        font-size: var(--fs-sm);
        line-height: 1.4;
        pointer-events: none;
    }

    .nav-contact-link:has(img) {
        gap: 0.4rem;
    }

    .nav-contact-link img {
        flex: 0 0 1rem;
        width: 1rem;
        height: 1rem;
        border-radius: 0;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }

    .nav-contact-location address {
        margin: 0;
        font-size: var(--fs-md);
        line-height: 1.35;
        letter-spacing: -0.015em;
        overflow-wrap: anywhere;
        text-wrap: pretty;
    }

    .nav-contact-hours {
        margin: 0;
        color: var(--grey);
        font-size: var(--fs-sm);
        line-height: 1.5;
    }

    .nav-contact-callback {
        padding-top: 1.5rem;
        border-top: 1px solid var(--opaque-white);
    }

    .nav-contact-title {
        margin: 0 0 1.5rem;
        font-size: var(--fs-md);
        line-height: 1.3;
        letter-spacing: -0.025em;
    }

    .callback-form--panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 1.5rem;
    }

    .callback-form--panel > :not(.callback-form__field--telephone, .callback-form__field--name) {
        grid-column: 1 / -1;
    }

    .callback-form--panel .callback-form__field > label:not(.callback-form__consent) {
        color: var(--grey);
        font-size: var(--fs-sm);
    }

    .callback-form--panel input:not([type="hidden"]):not([type="checkbox"]) {
        border: 0;
        border-bottom: 1px solid var(--opaque-white);
        padding: 0.65rem 0;
        font-size: max(16px, 1.2rem);
        transition: border-color 160ms ease;

        &::placeholder {
            color: var(--grey);
            opacity: 1;
        }

        &:hover,
        &:focus-visible {
            border-bottom-color: var(--the-white);
        }
    }

    .callback-form--panel .callback-form__consent {
        color: var(--grey);
        font-size: var(--fs-sm);
    }

    .callback-form--panel .callback-form__privacy,
    .callback-form--panel input[type="checkbox"] {
        color: var(--the-white);
    }

    .callback-form--panel .callback-form__privacy {
        font-size: inherit;
    }

    .callback-form--panel .primary-btn {
        justify-self: start;
        width: auto;
        min-width: 50%;
        margin-top: 0.5rem;
        padding: 0.75rem 1.5rem;
        border-color: var(--opaque-white);
        border-radius: var(--space-xxs);
        font-size: 1.2rem;
    }

    .nav-contact-panel :is(a, input, button):focus-visible {
        outline: 2px solid var(--the-white);
        outline-offset: 3px;
        box-shadow: none;
    }

    &.is-open {
        .nav-contact-toggle-shell {
            background: var(--jet-black);
            color: var(--the-white);
            border-radius: var(--space-xxs) var(--space-xxs) 0 0;
        }

        .nav-contact-toggle {
            border-radius: 0;
            background-size: 100% 1px;
        }

        .nav-contact-panel {
            animation: nav-contact-enter 240ms var(--out) both;
        }

        [style*="--contact-stagger-index"],
        .callback-form--panel > :not([hidden], .callback-form__trap, input) {
            animation: nav-contact-enter 440ms var(--out) both;
            animation-delay: calc(50ms + var(--contact-stagger-index, 4) * 55ms);
        }

        .callback-form__field--name { --contact-stagger-index: 5; }
        .callback-form__field--email { --contact-stagger-index: 6; }
        .callback-form__field--consent { --contact-stagger-index: 7; }
        .callback-form--panel > button { --contact-stagger-index: 8; }

        .nav-contact-panel:focus-within,
        [style*="--contact-stagger-index"]:focus-within,
        .callback-form--panel > :focus-within {
            animation: none;
        }
    }
}

@keyframes nav-contact-enter {
    from {
        opacity: 0;
        transform: translateY(0.6rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 64rem) {
    .nav-right .nav-contact-panel {
        width: 40rem;
        padding: 1.5rem;
    }
}

@media (min-width: 48.001rem) {
    .nav-right .nav-contact-messengers {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 48rem) {
    .nav-right {
        .nav-contact-toggle-shell {
            position: relative;
            z-index: 1300;
            justify-content: flex-end;
            padding: 0;
        }

        .nav-contact-panel {
            position: fixed;
            inset: 0;
            width: 100%;
            max-width: none;
            height: 100dvh;
            padding: calc(var(--space-sm) * 2 + var(--tap-target-size)) max(1.5rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
            border-radius: 0;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        .nav-contact-overview,
        .callback-form--panel {
            grid-template-columns: minmax(0, 1fr);
        }

        .nav-contact-link,
        .callback-form--panel .callback-form__consent {
            min-height: var(--tap-target-size);
        }

        .callback-form--panel .primary-btn {
            width: 100%;
        }

        &.is-open .nav-contact-toggle-shell {
            background: transparent;
            color: inherit;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-right.is-open {
        .nav-contact-panel,
        [style*="--contact-stagger-index"],
        .callback-form--panel > :not([hidden], .callback-form__trap, input) {
            animation: none;
        }
    }

    .nav-right .nav-contact-panel :is(a, input, button) {
        transition: none;
    }
}