/* DROP PANEL */
/* The panel sat on rgba white with a backdrop blur, but .nav already sets a
   backdrop-filter, which makes it the backdrop root for its children. The
   child blur therefore sampled nothing and the hero read straight through.
   A menu this text-heavy wants a solid ground anyway. */
.drop{background:#FFFFFF;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 20px 48px -12px rgba(31,24,9,.30),
             0 0 0 1px rgba(31,24,9,.07)}

/* The two calls to action were carrying four competing margin rules between
   them. One flex column with a gap replaces the lot. */
.drop .da{display:flex;flex-direction:column;gap:.5rem;
  padding:.9rem 1rem 1.05rem;margin:0}
.drop .da .drop__cta,
.drop .da .drop__ret{display:block;margin:0;text-align:center;
  padding:.85rem 1rem;border-radius:999px;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;line-height:1}
.drop .da .drop__cta{background:var(--ink);color:var(--white);border:1px solid var(--ink)}
.drop .da .drop__ret{color:var(--ink-2);background:transparent;
  border:1px solid var(--rule)}
.drop .da .drop__ret:hover,
.drop .da .drop__ret:focus-visible{background:var(--tint);color:var(--ink);
  border-color:var(--tint)}

/* Book a visit sat at 50% ink on a translucent pill over a photograph, which
   is not enough on its own. */
.nav .ret a{color:var(--ink-2)}

/* The hover panels have the same backdrop-root problem as .drop. They are
   hidden while the nav is menu-only, but keep them solid in case the inline
   links are ever switched back on. */
.mega{background:#FFFFFF;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 20px 48px -12px rgba(31,24,9,.30),
             0 0 0 1px rgba(31,24,9,.07)}

/* The wordmark was shrunk in the nav on the main pages but the schedule and
   virtual-care pages kept the older larger one, which pushed Get started out
   of the pill on a 320px screen. One size everywhere. */
.nav .wm{height:13px;width:105.1px}
/* And on the narrowest phones, let the pill tighten rather than overflow. */
@media(max-width:360px){
  .nav{padding-left:.85rem;gap:.35rem}
  .nav .book{padding:.62rem .8rem;font-size:.54rem}
  .nav .burger{margin-left:auto}
}