:root{
  --brand-blue:#034EA2;
  --nav-text:#0f2f62;
  --panel-bg:#ffffff;
  --panel-border: rgba(0,0,0,.08);
  --shadow: 0 18px 55px rgba(3,78,162,0.16);
}

/* =========================================================
   STICKY HEADER
========================================================= */
#siteHeader{
  position: sticky;
  top: 0;
  z-index: 5000;
}

html, body{
  overflow-x: visible;
}

/* =========================================================
   BASE HEADER
========================================================= */
.topbar,
.topbar *{
  box-sizing:border-box;
}

.topbar a{ color:inherit; text-decoration:none; }
.topbar a:hover{ text-decoration:none; }
.topbar a:visited{ text-decoration:none; }
.topbar button{ font:inherit; }

.topbar{
  position: relative;
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(255,255,255,.75);
  border-bottom:1px solid rgba(0,0,0,.06);
  overflow:visible;
}

/* Screen-reader only */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* =========================================================
   INNER WRAPPER
========================================================= */
.topbar .topbar-inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

/* =========================================================
   BRAND
========================================================= */
.topbar .brand{
  display:flex;
  gap:10px;
  align-items:center;
  font-family:Montserrat,Inter,sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  white-space:nowrap;
  font-size:18px;
  line-height:1;
  color:var(--brand-blue);
}

.topbar .brand span{ color:var(--brand-blue); }

.topbar .brand img{
  width:28px;
  height:28px;
  object-fit:contain;
}

/* =========================================================
   DESKTOP NAV
========================================================= */
.topbar .nav-desktop{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:14px;
  color:var(--nav-text);
  white-space:nowrap;
}

.topbar .nav-desktop .nav-link{
  background:transparent;
  border:0;
  padding:8px 8px;
  border-radius:10px;
  cursor:pointer;
  line-height:1;
}

.topbar .nav-desktop .nav-link:hover{
  background:rgba(3,78,162,.08);
}

@media (max-width:1100px){
  .topbar .topbar-inner{ gap:10px; }
  .topbar .nav-desktop{ gap:8px; }
  .topbar .nav-desktop .nav-link{ padding:8px 7px; }
}

/* =========================================================
   DROPDOWNS
========================================================= */
.topbar .nav-dd{ position:relative; }

.topbar .nav-dd > summary{ list-style:none; }
.topbar .nav-dd > summary::-webkit-details-marker{ display:none; }

.topbar .nav-dd-menu{
  position:absolute;
  top:42px;
  right:0;
  min-width:220px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:8px;
  display:none;
  z-index:5200;
}

.topbar .nav-dd[open] .nav-dd-menu{ display:block; }

.topbar .nav-dd-menu a{
  display:block;
  padding:10px;
  border-radius:10px;
  font-weight:700;
  color:var(--nav-text);
}

.topbar .nav-dd-menu a:hover{
  background:rgba(3,78,162,0.08);
}

.topbar .caret{
  width:10px;
  height:10px;
  display:inline-block;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-left:6px;
  margin-top:-2px;
  opacity:.7;
}

/* =========================================================
   HAMBURGER
========================================================= */
.topbar .nav-toggle{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

.topbar .nav-toggle-btn{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.topbar .nav-toggle-icon{
  width:20px;
  height:2px;
  background:var(--nav-text);
  position:relative;
  border-radius:2px;
}

.topbar .nav-toggle-icon::before,
.topbar .nav-toggle-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:var(--nav-text);
  border-radius:2px;
}

.topbar .nav-toggle-icon::before{ top:-6px; }
.topbar .nav-toggle-icon::after{ top:6px; }

.topbar .nav-toggle:checked ~ .topbar-inner .nav-toggle-icon{
  background:transparent;
}
.topbar .nav-toggle:checked ~ .topbar-inner .nav-toggle-icon::before{
  top:0;
  transform:rotate(45deg);
}
.topbar .nav-toggle:checked ~ .topbar-inner .nav-toggle-icon::after{
  top:0;
  transform:rotate(-45deg);
}

/* =========================================================
   MOBILE NAV
========================================================= */
.topbar .nav-mobile{ display:none; }

@media (max-width:900px){
  .topbar .nav-desktop{ display:none; }
  .topbar .nav-toggle-btn{ display:flex; }
}

@media (max-width:620px){
  .topbar .topbar-inner{
    width:100%;
    padding:12px 14px;
  }

  .topbar .nav-mobile{
    display:block;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
    border-top:1px solid rgba(0,0,0,.06);
    background:rgba(255,255,255,.85);
  }

  .topbar .nav-toggle:checked ~ .nav-mobile{
    max-height:80vh;
    overflow:auto;
  }

  .topbar .m-panel{
    padding:14px;
  }

  .topbar .m-view[hidden]{ display:none !important; }

  .topbar .m-item,
  .topbar .m-back{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:14px;
    margin-bottom:10px;
    background:var(--panel-bg);
    border:1px solid var(--panel-border);
    border-radius:18px;
    font-weight:800;
    font-size:18px;
    color:var(--nav-text);
  }

  .topbar .m-back::before{
    content:"";
    width:10px;
    height:10px;
    border-left:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    opacity:.6;
  }
}