.topbar{
  display:grid;
  grid-template-columns:minmax(220px, var(--page-header-logo-column, 360px)) minmax(0,1fr);
  align-items:center;
  gap:var(--page-header-gap, 16px);
  margin-bottom:24px;
  padding:var(--page-header-padding, 4px 10px);
  border:1px solid rgba(226,232,240,.95);
  border-radius:var(--page-header-radius, 28px);
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 34px rgba(15,23,42,.06);
  overflow:visible;
}

.logo{
  display:inline-flex;
  align-items:center;
  min-height:var(--page-header-logo-min-height, 42px);
  min-width:0;
  max-width:100%;
  padding:6px 0;
  text-decoration:none;
}

.logo-image{
  display:block;
  height:var(--page-header-logo-height, 72px);
  width:auto;
  max-width:100%;
}

.logo-fallback{
  font-size:30px;
  font-weight:900;
  letter-spacing:-.04em;
}

.logo .dark{color:#0f2f6b}
.logo .teal{color:#14b8a6}

.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
  padding:1px 4px;
  border-radius:999px;
  background:rgba(248,250,252,.92);
  border:1px solid rgba(226,232,240,.9);
}

.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:#475569;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.nav a:hover{
  background:#fff;
  color:#0f172a;
  border-color:#dbe5f0;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}

.nav a.primary{
  background:#0f2f6b;
  border-color:#0f2f6b;
  color:#fff;
}

.mobile-nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:92px;
  height:48px;
  border:1px solid rgba(226,232,240,.95);
  border-radius:18px;
  background:
    radial-gradient(circle at top, rgba(34,211,238,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(241,245,249,.96) 100%);
  box-shadow:0 12px 24px rgba(15,23,42,.08);
  cursor:pointer;
  padding:0 16px;
  color:#0f2f6b;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.mobile-nav-toggle span{
  display:none;
}

@media (max-width:1280px){
  .topbar{
    grid-template-columns:1fr;
  }

  .nav{
    justify-content:flex-start;
  }
}

@media (max-width:720px){
  .topbar{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:stretch;
    padding:var(--page-header-mobile-padding, 8px 12px);
    border-radius:22px;
  }

  .logo{
    min-height:var(--page-header-mobile-logo-min-height, 30px);
    grid-column:1 / -1;
    justify-content:center;
  }

  .logo-image{
    height:var(--page-header-mobile-logo-height, 48px);
  }

  .logo-fallback{
    font-size:26px;
  }

  .nav{
    display:none;
    grid-column:1 / -1;
    grid-template-columns:1fr;
    width:100%;
    padding:8px;
  }

  .nav a{
    width:100%;
    min-height:44px;
    background:#fff;
    border:1px solid #dbe5f0;
    box-shadow:0 8px 18px rgba(15,23,42,.05);
  }

  .mobile-nav-toggle{
    display:inline-flex;
    justify-self:start;
  }

  .topbar.is-mobile-nav-open .nav{
    display:grid;
  }
}

@media screen{
  .topbar,
  .nav,
  .nav a{
    min-width:0;
    max-width:100%;
  }

  .nav{
    gap:6px;
  }

  .nav a{
    min-width:0;
    padding-inline:10px;
    text-align:center;
    line-height:1.15;
    overflow-wrap:anywhere;
  }
}

@media screen and (max-width: 1024px){
  .nav{
    justify-content:flex-start;
  }
}

@media screen and (min-width: 721px){
  .topbar{
    width:100% !important;
    max-width:1240px !important;
    margin-inline:auto !important;
    grid-template-columns:minmax(220px, 360px) minmax(0, 1fr) !important;
    gap:10px !important;
    padding:4px 8px !important;
  }

  .logo{
    min-width:0 !important;
    max-width:100% !important;
    padding:6px 0 !important;
  }

  .logo-image{
    height:58px !important;
    width:auto !important;
    max-width:100% !important;
    transform:none !important;
    top:auto !important;
    position:relative !important;
  }

  .nav{
    gap:6px !important;
    padding:1px 3px !important;
  }

  .nav a{
    min-height:34px !important;
    padding:6px 10px !important;
    font-size:.86rem !important;
  }
}