html { scroll-padding-top: 132px; }
.topbar {
  position: fixed;
  inset: 20px 3.5% auto;
  width: 93%;
  max-width: 1536px;
  height: 88px;
  margin: 0 auto;
  padding: 0 20px 0 24px;
  gap: 24px;
  border: 1px solid #a1e9e32a;
  border-radius: 24px;
  background: linear-gradient(110deg, #123441f2, #0b2533f2 70%);
  box-shadow: 0 12px 44px #020f1b26, inset 0 1px 0 #b7fff50a;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transition: box-shadow .25s, border-color .25s;
  z-index: 40;
}
.topbar.is-scrolled { border-color: #a1e9e345; box-shadow: 0 10px 35px #020f1b40; }
.topbar .wordmark { flex: none; gap: 12px; font: 500 23px/1 Outfit, sans-serif; letter-spacing: 2.8px; }
.topbar .wordmark img { width: 35px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 9px #b1eee31f); }
.topbar .wordmark small { margin-top: 7px; font: 500 9px/1 Manrope, sans-serif; letter-spacing: 6.8px; color: #a7cdc9; }
.topbar .main-nav { display: block; flex: 0 1 auto; }
.nav-links { display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid #b0e1e50d; border-radius: 50px; background: #051c2870; }
.topbar .nav-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 10px 16px; border-radius: 28px; color: #c5d8df; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s; }
.topbar .nav-link:hover { color: #fff; background: #baf9ec0d; }
.topbar .nav-link.is-current { background: #9aeadc18; color: #a5f2e2; box-shadow: inset 0 0 0 1px #a8f3e41c; }
.nav-badge { display: inline-block; margin-left: 3px; vertical-align: 1px; padding: 3px 4px; border: 1px solid #8ee7d745; border-radius: 5px; color: #9debdc; font-size: 8px; line-height: 1; letter-spacing: .3px; font-weight: 600; }
.nav-index, .nav-arrow, .mobile-nav-heading, .topbar .mobile-nav-contact { display: none; }
.topbar .top-actions { flex: none; gap: 10px; }
.topbar .staff-link { display: none; }
.topbar .nav-book { min-height: 49px; gap: 20px; padding: 7px 8px 7px 20px; font-size: 12px; }
.topbar .nav-book-label, .topbar .nav-book-label span { font: 700 12px/1.3 Manrope, sans-serif; }
.topbar .nav-book-arrow { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: #0d3840; color: #bdf8e9; font-size: 21px; }
.menu-toggle { display: none; }
.clinic-hero { padding-top: 166px; }
.topbar :is(a, button):focus-visible { outline: 2px solid #b8ffed; outline-offset: 4px; }
.staff-mode .topbar { position: relative; inset: auto; width: 93%; margin: 18px auto; height: 78px; background: #0b2533; }
.staff-mode .topbar .main-nav, .staff-mode .topbar .menu-toggle, .staff-mode .topbar .nav-book { display: none; }
.staff-mode .topbar .staff-link { display: block; padding: 12px; font-size: 12px; }
@media (max-width: 1200px) and (min-width: 1061px) {
  .topbar { gap: 14px; padding: 0 15px; }
  .topbar .wordmark { font-size: 20px; gap: 9px; }
  .topbar .nav-link { padding: 10px 10px; font-size: 11px; }
  .topbar .nav-book { gap: 10px; padding-left: 14px; }
}
@media (max-width: 1060px) {
  html { scroll-padding-top: 116px; }
  .topbar { inset: 16px 4% auto; width: 92%; height: 78px; padding: 0 16px 0 20px; border-radius: 21px; }
  .topbar .main-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px;
    border: 1px solid #a1e9e238;
    border-radius: 22px;
    background: #0d2b39;
    box-shadow: 0 24px 70px #020f1bad;
  }
  .menu-toggle { display: flex; align-items: center; justify-content: center; gap: 13px; min-width: 91px; min-height: 46px; padding: 12px; border: 1px solid #92c7cd40; border-radius: 50px; background: #9edac608; color: #eefdfa; }
  .menu-toggle-label { font-size: 11px; font-weight: 600; }
  .menu-toggle-icon { position: relative; display: block; width: 18px; height: 14px; }
  .menu-toggle-icon i { position: absolute; width: 18px; height: 1.5px; border-radius: 2px; background: #a9ecdd; left: 0; top: 3px; transition: transform .2s; }
  .menu-toggle-icon i:last-child { top: 10px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .menu-toggle[aria-expanded="true"] { border-color: #8cebd8; background: #9edac615; }
  .mobile-nav-heading { display: block; padding: 0 8px 18px; }
  .mobile-nav-heading > span { color: #8dadb5; font-size: 8px; letter-spacing: 2px; }
  .mobile-nav-heading p { margin: 12px 0 0; font: 400 30px/1.12 Outfit, sans-serif; letter-spacing: -.6px; }
  .mobile-nav-heading em { font: inherit; color: #99e5d6; }
  .nav-links { display: block; padding: 0; background: none; border: 0; border-radius: 0; }
  .topbar .nav-link { justify-content: flex-start; gap: 18px; min-height: 58px; margin: 0; padding: 14px 12px; border-radius: 10px; font: 400 21px/1.2 Outfit, sans-serif; white-space: normal; border-top: 1px solid #97bac51f; }
  .topbar .nav-link.is-current { border-top-color: transparent; box-shadow: none; }
  .nav-index { display: block; font: 500 9px/1 Manrope, sans-serif; color: #7babb6; }
  .nav-arrow { display: block; margin-left: auto; color: #7ba5b0; font-size: 22px; }
  .is-current .nav-index, .is-current .nav-arrow { color: #a5f2e2; }
  .nav-badge { padding: 4px 5px; margin-left: 7px; vertical-align: 3px; font: 600 9px/1 Manrope, sans-serif; }
  .topbar .mobile-nav-contact { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 10px 0; margin-top: 13px; border-top: 1px solid #9dded330; font-size: 8px; letter-spacing: 1px; color: #8baeb8; }
  .mobile-nav-contact strong { display: block; margin-top: 7px; color: #a2ecdd; font-size: 13px; font-weight: 500; letter-spacing: 0; }
  .mobile-nav-contact > span:last-child { color: #a2ecdd; font-size: 26px; }
  .clinic-hero { padding-top: 139px; }
}
@media (max-width: 600px) {
  .topbar { inset: 12px 3% auto; width: 94%; height: 72px; padding: 0 10px 0 14px; gap: 8px; border-radius: 19px; }
  .topbar .wordmark { font-size: 18px; letter-spacing: 2px; gap: 8px; }
  .topbar .wordmark img { width: 27px; height: 38px; }
  .topbar .wordmark small { font-size: 7px; letter-spacing: 5.4px; margin-top: 6px; }
  .topbar .nav-book { min-height: 43px; padding: 6px 7px 6px 14px; gap: 8px; }
  .topbar .nav-book-label, .topbar .nav-book-label span { font-size: 11px; }
  .topbar .nav-book-label .book-extra { display: none; }
  .topbar .nav-book-arrow { width: 29px; height: 29px; font-size: 19px; }
  .topbar .top-actions { gap: 7px; }
  .menu-toggle { min-width: 43px; width: 43px; min-height: 43px; padding: 10px; }
  .menu-toggle-label { display: none; }
  .topbar .main-nav { padding: 23px 18px; max-height: calc(100dvh - 108px); }
  .clinic-hero { padding-top: 125px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .topbar, .topbar .nav-link, .menu-toggle-icon i { transition: none; }
}