/* Liquid glass buttons. Loaded last so it overrides the per-page .btn colours. */
html body .btn {
  --lg-tint: rgba(16, 20, 32, 0.55);
  --lg-rim: rgba(255, 255, 255, 0.55);
  --lg-glow: rgba(255, 255, 255, 0.18);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #F4F6FA !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 55%), var(--lg-tint);
  border: 1px solid var(--lg-rim);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 18px var(--lg-glow),
    0 8px 24px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform .3s cubic-bezier(.175, .885, .32, 1.35), box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
/* glossy top sheen */
html body .btn::before {
  content: "";
  position: absolute;
  inset: 1px 1px 50% 1px;
  border-radius: 999px 999px 40% 40% / 999px 999px 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: -1;
}
/* moving light streak on hover */
html body .btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: -1;
  transition: left .6s ease;
}
html body .btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 55%), var(--lg-tint);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 24px var(--lg-glow),
    0 12px 30px rgba(0, 0, 0, 0.4);
}
html body .btn:hover::after { left: 120%; }
html body .btn:active { transform: translateY(0) scale(0.98); }
html body .btn:focus-visible { outline: 2px solid var(--amber, #F2A541); outline-offset: 3px; }

/* Amber CTAs: same glass, warm tint so they still read as the main action */
html body .btn-amber,
html body .nav .nav-cta,
html body .contact .btn-primary,
html body .cta .btn,
html body .ws-cta {
  --lg-tint: rgba(242, 165, 65, 0.42);
  --lg-rim: rgba(255, 214, 160, 0.8);
  --lg-glow: rgba(255, 196, 120, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  html body .btn, html body .btn::after { transition: none; }
  html body .btn:hover { transform: none; }
}