/* Shared site nav: floating frosted pill. Identical markup + styles on every page. */
.topbar { position: fixed; z-index: 50; top: 14px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 1120px; border-radius: 999px; line-height: normal;
  background: rgba(255,255,255,.55); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.65); box-shadow: 0 8px 30px rgba(0,49,83,.12), inset 0 1px 0 rgba(255,255,255,.7);
  transition: max-width .45s cubic-bezier(.22,1,.36,1), top .45s cubic-bezier(.22,1,.36,1), background .3s; }
.topbar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 10px 14px 10px 26px; transition: padding .45s cubic-bezier(.22,1,.36,1); }
.topbar .brand { grid-column: 1; justify-self: start; display: flex; align-items: center; text-decoration: none; }
.topbar .brand img { display: block; height: 1.9rem; width: auto; transition: height .45s cubic-bezier(.22,1,.36,1); }
.topbar .nav-links { grid-column: 2; display: flex; align-items: center; gap: 30px; }
.topbar .nav-links a { font-family: var(--display, "Clash Display", -apple-system, BlinkMacSystemFont, sans-serif);
  font-weight: 600; font-size: .92rem; color: var(--brand, #003153); text-decoration: none; opacity: .7;
  transition: opacity .2s; white-space: nowrap; }
.topbar .nav-links a:hover, .topbar .nav-links a[aria-current="page"] { opacity: 1; }
.topbar .nav-cta { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; white-space: nowrap;
  background: var(--brand, #003153); color: #fff; text-decoration: none; padding: 11px 20px; border-radius: 999px;
  font-family: var(--display, "Clash Display", -apple-system, BlinkMacSystemFont, sans-serif);
  font-weight: 600; font-size: .88rem; box-shadow: 0 4px 14px rgba(0,49,83,.08);
  transition: transform .2s cubic-bezier(.22,1,.36,1); }
.topbar .nav-cta:hover { transform: translateY(-2px); }

.topbar.scrolled { max-width: 880px; top: 10px; background: rgba(255,255,255,.72); }
.topbar.scrolled .topbar-inner { padding-top: 6px; padding-bottom: 6px; }
.topbar.scrolled .brand img { height: 1.5rem; }

@media (max-width: 900px) {
  .topbar .nav-links { display: none; }
  .topbar-inner { padding: 10px 12px 10px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar, .topbar-inner, .topbar .brand img, .topbar .nav-cta { transition: none; }
}