.site-header{position:sticky;top:0;background:var(--surface-elevated);border-bottom:1px solid var(--border-muted);z-index:1000}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:72px}
.brand{display:flex;align-items:center;gap:0.75rem;color:var(--text-primary)}
.brand-mark{width:52px;height:auto}
.brand-text{font-family:var(--font-heading);font-size:1.25rem}

.nav{display:flex;align-items:center;gap:var(--space-3)}
.nav-list{display:flex;gap:var(--space-3);margin:0;padding:0}
.nav-list li{margin:0}
.nav-list a{color:var(--text-primary);font-weight:500}
.nav-list a[aria-current="page"]{color:var(--brand-primary)}
.nav-cta{white-space:nowrap}

.nav-extra{display:none}

.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;gap:4px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text-primary)}

.nav-close{display:none;background:transparent;border:none;color:var(--text-primary);cursor:pointer;padding:8px;border-radius:50%;transition:background-color var(--transition-fast),color var(--transition-fast);margin-left:auto}
.nav-close:hover{background-color:rgba(0,0,0,0.06);color:var(--brand-primary)}

@media (max-width:900px){
.header-inner{min-height:64px}
.nav-toggle{display:flex}
.nav-close{display:flex;align-items:center;justify-content:center;align-self:flex-end;width:44px;height:44px;margin-bottom:var(--space-1)}
.nav{position:fixed;inset:0 0 0 auto;width:min(360px,100%);height:100vh;height:100dvh;background:var(--surface-elevated);flex-direction:column;align-items:stretch;padding:1.25rem;transform:translateX(100%);transition:transform var(--transition-fast);overflow-y:auto;box-shadow:-4px 0 20px rgba(0,0,0,0.15)}
.nav.open{transform:translateX(0)}
.nav-list{flex-direction:column;width:100%}
.nav-list a{display:block;padding-block:.35rem;font-size:1.1rem}
.nav-cta{width:100%}
.nav-extra{display:flex;flex-direction:column;gap:0.75rem;margin-top:var(--space-3)}
.nav-extra a{padding-block:.2rem}
body.nav-open{overflow:hidden}
}

@media (max-width:380px){
.brand-mark{width:44px}
.brand-text{font-size:1.05rem}
}

ul { list-style: none !important; } .nav-toggle { flex-direction: column; }