/* Mobile navigation shares the clinic's forest green and warm paper palette. */
.mobile-menu-intro, .mobile-menu-footer, .mobile-menu-index, .mobile-menu-arrow,
.menu-backdrop { display: none; }
@media (max-width: 760px) {
  html.mobile-menu-open { overflow: hidden; }
  .menu-backdrop {
    display: block; position: fixed; inset: 0; z-index: 9; padding: 0;
    background: #0d211c80; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  }
  .menu-backdrop[hidden] { display: none; }
  .header .menu-toggle { position: relative; transition: background .2s, border-color .2s; }
  .header .menu-toggle[aria-expanded="true"] { background: var(--cream); color: #233c30; border-color: var(--cream); }
  .menu-toggle span { transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .header .nav {
    top: 78px; left: 16px; right: 16px; z-index: 12; padding: 24px;
    max-height: calc(100dvh - 94px - env(safe-area-inset-bottom)); overflow-y: auto;
    border: 1px solid #e0e7d42b; border-radius: 24px;
    background: linear-gradient(145deg, #304b3c, #1b352b 75%); color: #f6f4ee;
    box-shadow: 0 24px 64px #07181050; gap: 0; align-items: stretch;
  }
  .header .nav.open { animation: mobile-menu-enter .24s ease-out both; }
  .mobile-menu-intro { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: #cad6bc; font-size: 10px; letter-spacing: 2px; }
  .mobile-menu-intro::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #c5d6aa; }
  .header .nav > a {
    display: flex; align-items: center; gap: 13px; min-height: 55px;
    padding: 9px 0; border-bottom: 1px solid #eef0df20;
    font-family: var(--display); font-size: clamp(28px, 7.5vw, 36px); line-height: 1.15;
    letter-spacing: -.5px;
  }
  .header .nav > a::after, .header .nav .mobile-menu-phone::after { display: none; }
  .mobile-menu-index { display: block; flex: 0 0 18px; align-self: center; color: #b6c4a5; font: 400 10px var(--body); letter-spacing: 1px; }
  .mobile-menu-arrow { display: block; margin-left: auto; color: #bdcdb0; font: 400 19px var(--body); }
  .mobile-menu-arrow svg, .mobile-menu-book svg { display: block; width: 20px; height: 20px; }
  .header .nav > a:hover, .header .nav > a:focus-visible { color: #d5e4bf; }
  .header .nav :focus-visible { outline-color: #d5e4bf; outline-offset: 3px; }
  .mobile-menu-footer { display: grid; gap: 16px; margin-top: 22px; }
  .header .nav .mobile-menu-book { width: 100%; min-height: 50px; justify-content: space-between; border-radius: 12px; background: #f1efdf; color: #233c30; font-size: 15px; }
  .header .nav .mobile-menu-book:hover { background: #e1e7cf; transform: none; }
  .header .nav .mobile-menu-phone { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #d8dfcf; font: 400 13px var(--body); letter-spacing: .2px; }
  .mobile-menu-phone span:last-child { color: #aebda2; font-size: 12px; }
  @keyframes mobile-menu-enter { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 360px), (max-height: 650px) and (max-width: 760px) {
  .header .nav { padding: 20px; }
  .mobile-menu-intro { margin-bottom: 10px; }
  .header .nav > a { min-height: 47px; font-size: 29px; }
  .mobile-menu-footer { margin-top: 18px; gap: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .header .nav.open { animation: none; }
  .header .menu-toggle, .menu-toggle span { transition: none; }
}