/* sticky nav + brand */
.nav{
    position:sticky; top:0; z-index:60;
    height:var(--nav-h);
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(255,255,255,.08);
    transition:height 240ms ease;
}
.nav__inner{
    height:var(--nav-h); display:flex; align-items:center; justify-content:space-between;
    padding:0 24px; max-width:1200px; margin:0 auto;
}
.nav__brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px }
.nav__logo{ height:28px; width:auto; display:block }
/* NAV links/buttons look identical */
.nav__links{ display:flex; align-items:center; }
.nav__links > * + *{ margin-left:18px; }

.nav__anchor,
.nav__btn{
    color:#fff;
    text-decoration:none;
    background:transparent;
    border:0;
    padding:0;              /* no extra height */
    line-height:1;
    font:inherit;
    cursor:pointer;
}
.nav__anchor:hover,
.nav__btn:hover{ text-decoration:underline; }

/* spacing */
.nav__links{ display:flex; align-items:center; gap:18px; }
/* submenu (second row) */
.nav__submenu{
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center; gap:14px;
    padding:10px 24px 14px;
    border-top:1px solid rgba(255,255,255,.08);
}
.nav__sub{ color:#fff; text-decoration:none; opacity:.9; padding-right: 24px }
.nav__sub:hover{ text-decoration:underline }

/* expanded state */
#nav-submenu[hidden]{ display:none }
.nav.nav--open{ height:calc(var(--nav-h) * 2) }
.nav.nav--open #nav-submenu[hidden]{ display:flex !important }