:root {
    --bg: #FFFFFF;
    --ink: #16211F;
    --accent: #EE2225;
    --accent-soft: #FDEAEA;
    --trust: #0F3D3E;
    --gray: #63706C;
    --line: #E7E7E5;
    --nav-h: 84px;
    --font-nav: 'Manrope', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #FBFAF8;
    font-family: var(--font-nav);
    color: var(--ink);
}

/* ---------- NAVBAR ---------- */
/* Outer wrapper: intentionally has NO filter/transform/backdrop-filter.
   Those properties create a new containing block for position:fixed
   descendants — if .mobile-menu lived inside a blurred element, its
   "fixed; inset:0" would be measured against that element's box instead
   of the real viewport (this was the full-screen bug). Keeping the blur
   on the inner .nav-bar only, and .mobile-menu as a sibling of it, keeps
   .mobile-menu's fixed positioning relative to the actual viewport. */
.nav {
    position: relative;
    z-index: 100;
    width: 100%;
    display: grid;
}

.nav-bar {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: auto 1fr; /* logo left, everything else pushed right */
    align-items: center;
    column-gap: 24px;
    min-height: var(--nav-h);
    padding: 0 clamp(20px, 5vw, 56px);
    background: rgb(255 255 255 / 97%);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    z-index: 100;
}

/* Left / right link groups */
.nav-side {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-side--right {
    justify-self: end;
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    padding: 6px 0;
    transition: color .25s ease;
}

    .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s cubic-bezier(.16,1,.3,1);
    }

    .nav-link:hover {
        color: var(--accent);
    }

        .nav-link:hover::after {
            transform: scaleX(1);
        }

    .nav-link .icon {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        stroke-width: 2;
    }

/* Centered logo block */
.logo-block {
    justify-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-decoration: none;
    color: var(--ink);
}

.logo-img {
    height: 42px;
    width: auto;
    display: block;
}

.logo-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--trust);
}

/* CTA / logout pill */
.btn-cta {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    background: var(--accent-soft);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 999px;
    isolation: isolate;
    transition: color .35s ease, transform .3s cubic-bezier(.16,1,.3,1);
}

    .btn-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--accent);
        border-radius: 999px;
        transform: scale(0);
        transition: transform .45s cubic-bezier(.65,0,.35,1);
        z-index: -1;
    }

    .btn-cta:hover {
        color: #fff;
        transform: translateY(-2px);
    }

        .btn-cta:hover::before {
            transform: scale(1);
        }

    .btn-cta .icon {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        stroke-width: 2;
        transition: transform .4s cubic-bezier(.34,1.56,.64,1);
    }

    .btn-cta:hover .icon {
        transform: translateX(3px);
    }

    .btn-cta:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: 3px;
    }

/* Burger — hidden on desktop, doubles as close (X) */
.burger {
    display: none;
    position: relative;
    z-index: 110;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    justify-self: end;
}

    .burger span {
        position: absolute;
        left: 8px;
        width: 24px;
        height: 2px;
        background: var(--ink);
        border-radius: 2px;
        transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease, top .3s ease;
    }

        .burger span:nth-child(1) {
            top: 15px;
        }

        .burger span:nth-child(2) {
            top: 20px;
        }

        .burger span:nth-child(3) {
            top: 25px;
        }

.nav.is-open .burger span:nth-child(1) {
    top: 20px;
    transform: rotate(45deg);
}

.nav.is-open .burger span:nth-child(2) {
    opacity: 0;
}

.nav.is-open .burger span:nth-child(3) {
    top: 20px;
    transform: rotate(-45deg);
}

/* Full-screen mobile overlay */
.mobile-menu {
    background: rgb(255 255 255 / 97%);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0);
    transition: clip-path .6s cubic-bezier(.65,0,.35,1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 26px;
    padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) clamp(28px,10vw,80px) 0;
    z-index: 90;
}

.nav.is-open .mobile-menu {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.mobile-menu a {
    text-decoration: none;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: clamp(32px,9vw,36px);
    font-weight: 800;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateX(28px);
    transition: opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1);
}

    .mobile-menu a .icon {
        width: 26px;
        height: 26px;
        stroke: var(--accent);
        stroke-width: 2;
    }

.nav.is-open .mobile-menu a {
    opacity: 1;
    transform: translateX(0);
}

    .nav.is-open .mobile-menu a:nth-child(1) {
        transition-delay: .15s;
    }

    .nav.is-open .mobile-menu a:nth-child(2) {
        transition-delay: .25s;
    }

.mobile-menu a:active {
    opacity: .7;
}

@media (max-width: 768px) {
    .nav-side--right {
        display: none;
    }

    .nav-bar {
        grid-template-columns: 1fr auto; /* logo left, burger right */
    }

    .logo-block {
        justify-self: start;
        flex-direction: row;
        gap: 10px;
    }

    .logo-eyebrow {
        display: none;
    }
    /* tight on mobile, the wordmark carries it */
    .burger {
        display: block;
        justify-self: end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-link, .btn-cta, .burger span, .mobile-menu, .mobile-menu a {
        transition: none !important;
        animation: none !important;
    }
}