/* ============================================================
   Liquid-glass button system (PREVIEW — loaded last on every page).
   Translucent, frosted, seamless. Softer rounded-rect (not a pill),
   and more transparent so it reads as glass, not a filled block.
   • Light content   -> faint navy-tinted frosted glass
   • Dark banner/hero -> white frosted glass (blur shows over photos)
   ============================================================ */
:root { --btn-accent:#12457e; --btn-ink:#0c2143; }

.btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  background: rgba(18,69,126,0.03) !important;
  color: var(--btn-accent) !important;
  border: 1px solid rgba(18,69,126,0.12) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-family: "Mukta","Segoe UI",Helvetica,Arial,sans-serif !important;
  font-weight: 600 !important; font-size: 0.98rem !important; line-height: 1.15 !important; letter-spacing: 0 !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 2px 10px -6px rgba(12,33,67,0.22) !important;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.btn:hover {
  background: rgba(18,69,126,0.08) !important;
  border-color: rgba(18,69,126,0.20) !important;
  color: var(--btn-ink) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 6px 18px -9px rgba(12,33,67,0.34) !important;
}
.btn:active { transform: translateY(0) !important; }
.btn svg { width: 16px !important; height: 16px !important; }
.btn-large { padding: 14px 30px !important; font-size: 1.02rem !important; border-radius: 13px !important; }

/* Secondary / ghost — barely-there glass */
.btn-outline, .btn-ghost {
  background: rgba(18,69,126,0.02) !important;
  border: 1px solid rgba(18,69,126,0.11) !important;
  color: var(--btn-accent) !important;
}
.btn-outline:hover, .btn-ghost:hover {
  background: rgba(18,69,126,0.08) !important; color: var(--btn-ink) !important;
}

/* On dark photo banners / hero / navy panels — white frosted glass */
.hero .btn, .page-banner .btn, .section-navy .btn, .callout .btn {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 2px 16px -8px rgba(0,0,0,0.4) !important;
}
.hero .btn:hover, .page-banner .btn:hover, .section-navy .btn:hover, .callout .btn:hover {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.55) !important;
  color: #fff !important;
}
.hero .btn-outline, .page-banner .btn-outline, .section-navy .btn-outline, .callout .btn-outline {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.36) !important;
  color: #fff !important;
}
.hero .btn-outline:hover, .page-banner .btn-outline:hover, .section-navy .btn-outline:hover {
  background: rgba(255,255,255,0.13) !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-outline, .btn-ghost { transition: none !important; }
}