/* header.css — Top navigation bar, logo and mobile menu. */

.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .logo{height:44px;width:auto;display:block;color:var(--ink)}
@media (max-width:520px){.brand .logo{height:38px}}
.nav-links{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:15px;padding:14px 24px;border-radius:2px;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--brass);border-color:var(--brass);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn svg{width:16px;height:16px}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--ink);width:44px;height:44px;border-radius:2px;cursor:pointer}
.nav .cta-small{padding:10px 18px;font-size:14px}
@media (max-width:980px){
  .nav-links,.nav .cta-small{display:none}
  .menu-btn{display:grid;place-items:center}
  .nav.open .nav-links{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:72px;background:var(--paper);padding:20px clamp(16px,4vw,40px) 28px;border-bottom:1px solid var(--line);gap:18px}
  .nav.open .nav-links a{font-size:18px;color:var(--ink)}
}
