/* Stable navigation surfaces keep artwork and canvas patterns out of the header. */
html.has-section-navigation {
    scroll-behavior: auto;
    scroll-padding-top: 0
}

main > section {
    scroll-margin-top: 116px
}

main > section:focus {
    outline: none
}

.site-header {
    color: var(--nav-ink);
    --nav-ink: #F4F2F7;
    isolation: isolate;
    mix-blend-mode: normal;
    --nav-muted: #D4C6DF;
    --nav-surface: 17 14 24;
}

.site-header[data-nav-theme=light] {
    --nav-ink: #18151F;
    --nav-muted: #574264;
    --nav-surface: 244 242 247
}

.site-header[data-nav-theme=dark] {
    --nav-ink: #F4F2F7;
    --nav-muted: #D4C6DF;
    --nav-surface: 17 14 24
}

.site-header.is-past-hero {
    border-color: color-mix(in srgb, var(--nav-ink) 22%, transparent);
    color: var(--nav-ink);
    mix-blend-mode: normal;
}

.site-header:before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgb(var(--nav-surface));
    content: '';
    inset: 0 calc(-1 * var(--gutter));
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.site-header.is-past-hero:before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgb(var(--nav-surface));
    display: block;
}

.site-header > .wordmark, .site-header > nav, .site-header > .menu-toggle, .site-header.is-past-hero > .wordmark, .site-header.is-past-hero > nav, .site-header.is-past-hero > .menu-toggle {
    color: var(--nav-ink);
    filter: none;
    mix-blend-mode: normal;
}

.site-header .wordmark img, .site-header.is-past-hero .wordmark img {
    filter: none
}

.site-header .wordmark .nav-logo-on-light {
    display: none
}

.site-header[data-nav-theme=light] .wordmark .nav-logo-on-dark {
    display: none
}

.site-header[data-nav-theme=light] .wordmark .nav-logo-on-light {
    display: block
}

.site-header > nav, .site-header.is-past-hero > nav {
    background: transparent
}

.site-header nav a:not(.nav-contact) {
    color: var(--nav-ink);
    opacity: 1;
    text-underline-offset: 7px;
    transition: opacity .2s;
}

.site-header nav a:not(.nav-contact):hover, .site-header.is-past-hero nav a:not(.nav-contact):hover {
    color: var(--nav-ink);
    opacity: 1;
    text-decoration: underline
}

.site-header nav a[aria-current=location]:not(.nav-contact) {
    text-decoration: underline;
    text-decoration-thickness: 2px
}

.site-header nav sup, .site-header.is-past-hero nav sup {
    color: var(--nav-muted);
    opacity: 1
}

.site-header a:focus-visible, .site-header button:focus-visible {
    outline: 3px solid var(--nav-ink);
    outline-offset: 5px
}

.site-header nav .nav-contact, .site-header.is-past-hero nav .nav-contact {
    background: #6827F5;
    color: #FFF;
    mix-blend-mode: normal
}

.site-header nav .nav-contact:hover, .site-header.is-past-hero nav .nav-contact:hover {
    background: #8044F7;
    color: #FFF
}

.site-header nav .nav-contact[aria-current=location] {
    background: #8044F7;
    outline: 2px solid var(--nav-ink);
    outline-offset: 5px;
}

@media (max-width: 1050px) {
    .site-header {
        height: 88px
    }

    .site-header .wordmark {
        flex-shrink: 0;
        width: clamp(175px, 25vw, 220px);
    }

    .site-header .menu-toggle:not([hidden]) {
        align-items: center;
        background: transparent;
        border: 1px solid color-mix(in srgb, var(--nav-ink) 30%, transparent);
        border-radius: 999px;
        color: var(--nav-ink);
        display: inline-flex;
        font-size: 16px;
        gap: 14px;
        justify-content: space-between;
        line-height: 1.4;
        min-height: 48px;
        padding: 10px 15px;
    }

    .menu-toggle > span {
        font-size: 24px;
        line-height: 1;
        transition: transform .2s
    }

    .menu-toggle[aria-expanded=true] {
        background: var(--nav-ink);
        color: rgb(var(--nav-surface))
    }

    .menu-toggle[aria-expanded=true] > span {
        transform: rotate(45deg)
    }

    .site-header > nav, .site-header.is-past-hero > nav {
        align-items: stretch;
        background: #191320;
        border: 1px solid #50405F;
        border-radius: 22px;
        box-shadow: 0 22px 60px #0006;
        color: #F4F2F7;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        left: 0;
        max-height: calc(100dvh - 116px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 12px 22px 22px;
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
    }

    .site-header nav[data-open=false] {
        display: none
    }

    .site-header nav a:not(.nav-contact) {
        border-bottom: 1px solid #FFFFFF21;
        color: #F4F2F7;
        font-size: clamp(22px, 3vw, 30px);
        justify-content: space-between;
        line-height: 1.3;
        min-height: 62px;
        padding: 14px 0;
    }

    .site-header nav a:not(.nav-contact):hover, .site-header.is-past-hero nav a:not(.nav-contact):hover {
        color: #D3BAFF;
        text-decoration: none
    }

    .site-header nav sup, .site-header.is-past-hero nav sup {
        color: #BDA9CE;
        font-size: 16px;
        letter-spacing: .04em
    }

    .site-header nav .nav-contact {
        border-radius: 12px;
        box-shadow: none;
        display: flex;
        font-size: 18px;
        margin: 20px 0 0;
        min-height: 58px;
        padding: 14px 18px;
        width: 100%;
    }

    .site-header nav .nav-contact .nav-cta-arrow {
        border-radius: 5px
    }

    .site-header nav a:focus-visible {
        outline-color: #D3BAFF;
        outline-offset: 3px
    }

    .site-header:has(.menu-toggle[hidden]) {
        flex-wrap: wrap;
        gap: 12px;
        height: auto;
        min-height: 88px;
        padding: 18px 0;
    }

    .site-header:has(.menu-toggle[hidden]) nav {
        margin: 0;
        max-height: none;
        position: static;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .site-header {
        height: 80px
    }

    .site-header > nav, .site-header.is-past-hero > nav {
        max-height: calc(100dvh - 108px);
        padding: 10px 20px 20px
    }

    .site-header .wordmark {
        width: clamp(170px, 48vw, 205px)
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header nav a:not(.nav-contact), .menu-toggle > span {
        transition: none
    }
}

/* Companion guidance lives in the menu on touch-capable devices. */
.handheld-cat-tip {
    display: none
}

@media (max-width: 1050px) and (any-pointer: coarse) {
    .handheld-cat-tip {
        border-top: 1px solid currentColor;
        color: inherit;
        display: block;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.6;
        margin: 20px 0 0;
        max-width: 36ch;
        opacity: 1;
        padding-top: 16px;
    }

    .handheld-cat-tip > span {
        display: block;
        font-weight: 500;
        margin-bottom: 4px
    }

    .handheld-cat-tip kbd {
        border: 1px solid currentColor;
        border-radius: 3px;
        font: inherit;
        padding: 0 5px;
    }
}