/* ═══════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════ */
.topbar{background:#001d3d;color:rgba(255,255,255,.75);font-size:.78rem;padding:7px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar-inner{max-width:1220px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.topbar-left{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.topbar-left a{color:rgba(255,255,255,.7);display:flex;align-items:center;gap:6px;transition:color .2s}
.topbar-left a:hover{color:#fff}
.topbar-right{display:flex;align-items:center;gap:14px}
.topbar-right a{color:rgba(255,255,255,.65);font-size:.72rem;font-weight:600;display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:4px;transition:all .2s}
.topbar-right a:hover{background:rgba(255,255,255,.1);color:#fff}
.topbar-right .support-btn{background:var(--accent);color:#fff;border-radius:4px;padding:4px 12px}
.topbar-right .support-btn:hover{background:#c73212}
.topbar-divider{width:1px;height:14px;background:rgba(255,255,255,.15)}

/* ═══════════════════════════════════════════
   MAIN HEADER / NAV
   ═══════════════════════════════════════════ */
.site-header{padding:11px 0px 11px 0px; background:#fff;position:sticky;top:0;z-index:1000;box-shadow:0 2px 16px rgba(0,29,61,.09);border-bottom:1px solid var(--border)}
.header-inner{max-width:1220px;margin:0 auto;padding:0px;display:flex;align-items:center;gap:0;height:68px}

/* Logo */
.header-logo{flex-shrink:0;margin-right:32px;display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{width:38px;height:38px;background:var(--blue);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;font-family:var(--fhead);font-weight:800;letter-spacing:-1px;flex-shrink:0}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text strong{font-family:var(--fhead);font-size:1.12rem;font-weight:800;color:var(--dark);letter-spacing:.3px;text-transform:uppercase}
.logo-text span{font-size:.62rem;color:var(--muted);font-weight:600;letter-spacing:1.2px;text-transform:uppercase}

/* Nav */
.main-nav{flex:1;display:flex;align-items:center}
.nav-list{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;height:68px}
.nav-item{position:relative;height:100%;display:flex;align-items:center}
.nav-link{display:flex;align-items:center;gap:5px;padding:0 14px;height:100%;font-size:.85rem;font-weight:700;color:var(--dark);white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;text-decoration:none;letter-spacing:.2px}
.nav-link:hover,.nav-item.active>.nav-link{color:var(--blue);border-bottom-color:var(--blue)}
.nav-arrow{font-size:.55rem;margin-left:2px;transition:transform .22s;display:inline-block}
.nav-item:hover .nav-arrow{transform:rotate(180deg)}

/* Mega / Dropdown */
.dropdown{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--border);border-top:2px solid var(--blue);border-radius:0 0 10px 10px;box-shadow:0 12px 40px rgba(0,29,61,.12);min-width:220px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s,transform .22s,visibility .22s;z-index:900;pointer-events:none}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:all}
.dropdown-inner{padding:10px 0}
.dropdown a{display:flex;align-items:center;gap:8px;padding:9px 20px;font-size:.82rem;font-weight:600;color:var(--body);transition:background .15s,color .15s;white-space:nowrap}
.dropdown a:hover{background:var(--light-blue);color:var(--blue)}
.dropdown-divider{height:1px;background:var(--border);margin:6px 0}
.dropdown-label{padding:8px 20px 4px;font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px}

/* Mega menu */
.mega-dropdown{min-width:760px;left:50%;transform:translateX(-50%) translateY(8px);padding:0}
.nav-item:hover .mega-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:all}
.mega-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.mega-col{padding:20px 22px;border-right:1px solid var(--border)}
.mega-col:last-child{border-right:none}
.mega-col-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.mega-col a{display:block;padding:6px 0;font-size:.81rem;font-weight:500;color:var(--body);transition:color .15s}
.mega-col a:hover{color:var(--blue)}
.mega-col a::before{content:'›';margin-right:6px;color:var(--blue);font-weight:700}

/* Header right */
.header-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.hdr-search{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.95rem;color:var(--muted);transition:all .2s}
.hdr-search:hover{background:var(--light-blue);color:var(--blue);border-color:var(--blue)}
.hdr-phone{display:flex;align-items:center;gap:7px;background:var(--light-blue);color:var(--blue);padding:8px 14px;border-radius:6px;font-size:.8rem;font-weight:700;text-decoration:none;transition:all .2s;white-space:nowrap}
.hdr-phone:hover{background:var(--blue);color:#fff}
.hdr-quote{background:var(--accent);color:#fff;padding:8px 16px;border-radius:6px;font-size:.82rem;font-weight:700;text-decoration:none;transition:background .2s;white-space:nowrap}
.hdr-quote:hover{background:#c73212}

/* Mobile hamburger — hidden on desktop */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border:none;background:none;margin-left:8px;-webkit-tap-highlight-color:transparent}
.hamburger span{display:block;width:24px;height:2px;background:var(--dark);border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile nav — hidden by default on ALL sizes, shown via JS class */
.mobile-nav{display:block;position:fixed;inset:0;background:#fff;z-index:2000;overflow-y:auto;padding:0;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);-webkit-overflow-scrolling:touch}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--dark)}
.mobile-nav-close{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1;padding:4px 8px}
.mobile-nav-body{padding:8px 0 40px}
.mob-item{border-bottom:1px solid var(--border)}
.mob-link{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-size:.95rem;font-weight:700;color:var(--dark);cursor:pointer;text-decoration:none;min-height:52px;-webkit-tap-highlight-color:transparent;user-select:none}
.mob-link:hover,.mob-link:active{color:var(--blue);background:var(--light-blue)}
.mob-toggle{font-size:.7rem;transition:transform .2s}
.mob-sub{display:none;background:var(--bg);padding:6px 0}
.mob-item.open .mob-sub{display:block}
.mob-item.open .mob-toggle{transform:rotate(180deg)}
.mob-sub a{display:block;padding:10px 32px;font-size:.83rem;color:var(--body);font-weight:500;border-bottom:1px solid var(--border)}
.mob-sub a:last-child{border-bottom:none}
.mob-sub a:hover{color:var(--blue);background:#fff}
.mob-cta-area{padding:20px;display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--border);margin-top:8px}

/* Search overlay */
.search-overlay{position:fixed;inset:0;background:rgba(0,29,61,.88);z-index:3000;display:flex;align-items:flex-start;justify-content:center;padding-top:100px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;backdrop-filter:blur(6px)}
.search-overlay.open{opacity:1;visibility:visible}
.search-box{background:#fff;border-radius:12px;padding:8px 16px;display:flex;align-items:center;gap:12px;width:100%;max-width:600px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.search-box input{flex:1;border:none;outline:none;font-size:1.1rem;font-family:var(--fbody);color:var(--dark);padding:10px 0;background:transparent}
.search-box input::placeholder{color:var(--muted)}
.search-close{background:none;border:none;color:var(--muted);font-size:1.4rem;cursor:pointer;padding:4px 8px;transition:color .2s}
.search-close:hover{color:var(--dark)}
.search-hint{color:rgba(255,255,255,.6);font-size:.82rem;margin-top:16px;text-align:center}

/* Overlay backdrop */
.nav-overlay{display:none;position:fixed;inset:0;z-index:1999;background:rgba(0,0,0,.4)}
.nav-overlay.open{display:block}


/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET  (≤1100px) — Header/Nav
   ═══════════════════════════════════════════ */
@media(max-width:1100px){
.nav-link{padding:0 9px;font-size:.78rem}
.hdr-phone{display:none}
.mega-dropdown{min-width:500px;left:0;transform:translateX(0) translateY(8px)}
.nav-item:hover .mega-dropdown{transform:translateX(0) translateY(0)}
.mega-inner{grid-template-columns:1fr 1fr}
.mega-col:last-child{display:none}
.topbar-left span:not(a span){display:none}
}

/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE NAV  (≤900px) — Header/Nav
   ═══════════════════════════════════════════ */
@media(max-width:900px){
/* ── Header ── */
.main-nav{display:none}
.hamburger{display:flex}
.hdr-quote{display:none}
.header-inner{height:60px;padding:0 16px;gap:8px}
.logo-text span{display:none}
.logo-text strong{font-size:1rem}
.header-right{margin-left:auto}

/* ── Top bar ── */
.topbar-left{display:none}
.topbar-inner{justify-content:flex-end}
.topbar-right{gap:8px}
.topbar-right a:not(.support-btn){display:none}
.topbar-right .support-btn{display:flex}

/* ── Mobile nav drawer ── */
.mobile-nav{display:block}
}

/* ═══════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE  (≤600px) — Header/Nav
   ═══════════════════════════════════════════ */
@media(max-width:600px){
/* ── Top bar: hide entirely ── */
.topbar{display:none}

/* ── Header ── */
.header-inner{height:56px;padding:0 14px}
.logo-mark{width:34px;height:34px;font-size:.95rem}
.logo-text strong{font-size:.88rem}
.hdr-search{width:30px;height:30px;font-size:.85rem}
.hamburger span{width:22px}

/* ── Mobile nav header fix ── */
.mobile-nav-header{padding:14px 16px}

/* ── Search overlay ── */
.search-overlay{padding-top:72px;padding-left:12px;padding-right:12px}
.search-box input{font-size:.95rem}
.search-hint{font-size:.75rem}
}

/* ═══════════════════════════════════════════
   RESPONSIVE — XS  (≤400px) — Header/Nav
   ═══════════════════════════════════════════ */
@media(max-width:400px){
.header-inner{padding:0 10px}
.logo-mark{width:30px;height:30px;font-size:.82rem}
.logo-text strong{font-size:.78rem}
.hamburger{padding:4px}
.mob-cta-area{padding:16px}
.mob-cta-area a{font-size:.85rem;padding:12px 14px;text-align:center;justify-content:center;display:flex}
}