/* ── Header ─────────────────────────────── */
header.nav{ position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-bottom:1px solid var(--sand-200); }
.nav .wrap{ display:flex; align-items:center; gap:18px; height:80px; }
.nav__brand{ text-decoration:none; color:var(--brand); display:inline-flex; align-items:center; flex:none; }
.nav__brand-logo{ width:193px; height:auto; display:block; }
@media(max-width:760px){ .nav__brand-logo{ width:170px; } }
.nav__links{ display:flex; gap:2px; margin-left:auto; }
.nav__links a{ font-size:13.5px; font-weight:600; color:var(--ink-700); padding:8px 11px; border-radius:6px; white-space:nowrap; text-decoration:none; }
.nav__links a:hover{ color:var(--brand); background:var(--teal-050); }
@media(max-width:1080px){ .nav__links{ display:none; } }

/* ── Dropdown ─────────────────────────── */
.nav__dd{ position:relative; }
.nav__dd__trigger{ font-size:13.5px; font-weight:600; color:var(--ink-700); padding:8px 11px; border-radius:6px; white-space:nowrap; display:flex; align-items:center; gap:3px; cursor:pointer; background:none; border:0; font-family:inherit; letter-spacing:inherit; }
.nav__dd__trigger:hover{ color:var(--brand); background:var(--teal-050); }
.nav__dd__trigger i{ width:13px; height:13px; }
.nav__dd__menu{ position:absolute; top:100%; right:0; background:#fff; border:1px solid var(--sand-200); border-radius:10px; box-shadow:var(--shadow-md); padding:12px 6px 6px; min-width:170px; opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .18s, transform .18s; z-index:200; }
.nav__dd.open .nav__dd__menu{ opacity:1; pointer-events:all; transform:translateY(0); }
.nav__dd__menu a{ display:block; font-size:13px; font-weight:600; color:var(--ink-700); padding:10px 14px; border-radius:7px; white-space:nowrap; text-decoration:none; }
.nav__dd__menu a:hover{ background:var(--teal-050); color:var(--brand); }

/* ── CTA button ───────────────────────── */
.nav__cta{ display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:#fff; font-family:inherit; font-size:13px; font-weight:700; padding:9px 18px; border-radius:var(--radius-pill); border:0; cursor:pointer; text-decoration:none; white-space:nowrap; flex-shrink:0; transition:background .15s; }
.nav__cta:hover{ background:var(--accent-strong); color:#fff; }
.nav__cta i{ width:15px; height:15px; }
@media(max-width:1080px){ .nav__cta{ display:none; } }

/* ── Mobile button ────────────────────── */
.nav__mob-btn{ display:none; width:40px; height:40px; background:var(--sand-100); border:0; border-radius:8px; cursor:pointer; color:var(--ink-700); padding:0; align-items:center; justify-content:center; margin-left:auto; flex:none; }
.nav__mob-btn i{ width:22px; height:22px; }
@media(max-width:1080px){ .nav__mob-btn{ display:flex; } }

/* ── Mobile drawer ────────────────────── */
.nav__drawer{ position:fixed; inset:80px 0 0 0; background:rgba(255,255,255,.98); backdrop-filter:blur(16px); z-index:99; overflow-y:auto; padding:16px 20px 40px; display:flex; flex-direction:column; gap:4px; opacity:0; pointer-events:none; transform:translateY(-10px); transition:opacity .22s, transform .22s; }
.nav__drawer.open{ opacity:1; pointer-events:all; transform:translateY(0); }
.nav__drawer a{ font-size:16px; font-weight:600; color:var(--ink-700); padding:13px 16px; border-radius:10px; display:block; text-decoration:none; }
.nav__drawer a:active{ background:var(--teal-050); color:var(--brand); }
.nav__drawer__sep{ height:1px; background:var(--sand-200); margin:8px 0; }
.nav__drawer__sub-head{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500); padding:10px 16px 4px; }
.nav__drawer .nav__drawer__indent{ padding-left:28px; }
.nav__drawer__cta{ margin-top:16px; }
.nav__drawer__cta a{ display:flex; align-items:center; justify-content:center; gap:8px; background:var(--accent); color:#fff !important; font-size:16px; font-weight:700; padding:14px 24px; border-radius:var(--radius-pill); }
.nav__drawer__cta a:hover{ background:var(--accent-strong); }
