/* Phone and tablet menu: a full-height sheet that opens out of the menu button. Desktop (above 1180px) is untouched.
   Loaded after site.css / index.html's inline styles so these rules win at equal specificity. */
.m-foot{display:none}   /* built by nav.js; only the sheet shows it */
@media (max-width:1180px){
  /* the pill dissolves into the sheet; brand, cart and close button stay on top */
  .pillnav{transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
  .pillnav>.brand,.pillnav>.cartbtn,.pillnav>.menu-btn{position:relative;z-index:2}
  .menu-open .pillnav{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .menu-open .site-header .pillnav{background:transparent}
  .menu-open.menu-closing .site-header .pillnav{background:rgba(42,43,27,.94);border-color:rgba(244,169,82,.5)}   /* pill returns as the sheet shrinks; blur comes back after */
  body.menu-open{overflow:hidden}
  .menu-open .mbar{opacity:0;visibility:hidden;pointer-events:none}   /* the sheet's dock replaces the phone bottom bar */

  .menu-btn{cursor:pointer;transition:background .25s,border-color .25s}
  .menu-btn svg{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .menu-btn[aria-expanded="true"]{border-color:rgba(248,203,151,.55);background:rgba(248,203,151,.1)}
  .menu-btn[aria-expanded="true"] svg{transform:rotate(90deg)}

  .nav{
    --sx:max(var(--gutter),calc((100vw - 600px) / 2));display:flex;position:fixed;inset:0;z-index:1;flex-direction:column;align-items:stretch;gap:0;
    padding:calc(var(--mtop,92px) + 14px) var(--sx) 0;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    background:
      radial-gradient(110% 55% at 100% 0%,rgba(244,169,82,.16),rgba(244,169,82,0) 62%),
      radial-gradient(90% 50% at 0% 100%,rgba(195,135,66,.12),rgba(195,135,66,0) 60%),
      #272716;
    border:0;border-radius:0;box-shadow:none;
    clip-path:circle(0 at var(--mx,calc(100% - 40px)) var(--my,46px));visibility:hidden;
    transition:clip-path .55s cubic-bezier(.7,0,.84,0),visibility 0s linear .55s;
    scrollbar-width:none
  }
  .nav::-webkit-scrollbar{display:none}
  .nav:not(.open)::before{display:none}   /* the pill's backdrop-filter makes it the containing block, so the closed watermark would hang off the right edge and let the page pan sideways */
  .nav::before{content:"";position:fixed;right:-90px;bottom:-70px;width:340px;height:340px;background:url("brand/mark.webp") center/contain no-repeat;opacity:.05;filter:grayscale(1) brightness(2.4);pointer-events:none}
  .nav::after{content:"";position:fixed;left:0;right:0;top:0;height:calc(var(--mtop,92px) + 10px);background:inherit;-webkit-mask:linear-gradient(180deg,#000 72%,transparent);mask:linear-gradient(180deg,#000 72%,transparent);pointer-events:none}   /* rows scroll away under the brand, not over it */
  .nav.open{clip-path:circle(150vmax at var(--mx,calc(100% - 40px)) var(--my,46px));visibility:visible;transition:clip-path .7s cubic-bezier(.16,1,.3,1),visibility 0s}
  .nav .sp{display:none}

  /* primary rows: big serif, hairline between, arrow that leans in on press */
  .nav>a:not(.book),.nav .dd-toggle{
    position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:15px 2px;border-radius:0;background:none;
    font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:clamp(30px,8.6vw,40px);line-height:1.1;letter-spacing:-.01em;color:var(--ivory);
    border-bottom:1px solid rgba(246,241,231,.12);
    opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1),color .25s
  }
  .nav>a:not(.book)::after{content:"";flex:none;width:22px;height:22px;background:var(--turmeric);opacity:.75;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .25s;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
  .nav>a:not(.book):hover,.nav .dd-toggle:hover{background:none;color:var(--turmeric-light)}
  .nav>a:not(.book):active::after{transform:translateX(5px);opacity:1}
  .nav>a.active,.nav .dd-toggle.active,.nav .has-dd:has(.cur) .dd-toggle{background:none;color:var(--turmeric-light);font-weight:400}
  .nav>a.active::after{opacity:1}
  .nav .has-dd{opacity:1}
  .nav .dd-toggle .chev{width:22px;height:22px;stroke-width:1.4;color:var(--turmeric);transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .nav .has-dd.open .dd-toggle{border-bottom-color:transparent;color:var(--turmeric-light)}
  .nav.open>a:not(.book),.nav.open .dd-toggle{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 45ms + 160ms)}

  /* Services opens in place, carrying the desktop panel's content */
  .dd,.has-dd.open .dd{display:none;position:static;padding:0;background:none;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none;overflow:visible}
  .has-dd.open .dd{display:block;padding:2px 0 22px;border-bottom:1px solid rgba(246,241,231,.12);animation:mdd .5s cubic-bezier(.16,1,.3,1) both}
  @keyframes mdd{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .dd-main{padding:0;border:0}
  .nav .dd .dd-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 14px;padding:16px 18px;border-radius:18px;background:rgba(246,241,231,.05);border:1px solid rgba(248,203,151,.22)}
  .nav .dd .dd-head .tt{gap:2px}
  .dd-head .dev{font-size:17px}
  .dd-head b{font-size:23px}
  .dd-head .d{display:block;justify-self:auto;text-align:left;max-width:none;font-size:13.5px;line-height:1.5;color:rgba(246,241,231,.68)}
  .dd-main .dd-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0;border:0}
  .nav .dd .dd-list a{gap:10px;min-height:52px;padding:6px 10px 6px 6px;border-radius:14px;background:rgba(246,241,231,.035);font-size:14.5px;line-height:1.25;color:rgba(246,241,231,.9)}
  .nav .dd .dd-list a:active{background:rgba(246,241,231,.09)}
  .dd-list .ico{width:38px;height:38px}

  .dd-side{display:flex;gap:12px;margin:18px calc(-1 * var(--sx)) 0;padding:0 var(--sx);background:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--sx);scrollbar-width:none}
  .dd-side::-webkit-scrollbar{display:none}
  .nav .dd .dd-tile{flex:0 0 min(76%,340px);scroll-snap-align:start;padding:0;border-radius:18px;background:rgba(246,241,231,.04);border:1px solid rgba(246,241,231,.1);overflow:hidden}
  .nav .dd .dd-tile.cur{border-color:rgba(248,203,151,.5)}
  .dd-tile img{display:block;aspect-ratio:2/1;margin:0;border-radius:0}
  .dd-tile .tx{padding:12px 14px 14px;gap:3px}
  .dd-tile .dev{font-size:15px}
  .dd-tile b{font-size:20px}
  .dd-tile .d{display:block;font-size:13px;color:rgba(246,241,231,.66)}
  .dd-foot{display:none}

  /* the dock: booking, the three ways to reach the clinic, and where it is */
  .m-foot{position:sticky;bottom:0;margin:auto calc(-1 * var(--sx)) 0;padding:26px var(--sx) calc(18px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(39,39,22,0),rgba(39,39,22,.94) 30%);display:flex;flex-direction:column;gap:12px;
    opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
  .nav.open .m-foot{opacity:1;transform:none;transition-delay:.38s}
  .nav .m-foot .book{display:flex;justify-content:center;align-items:center;gap:10px;min-height:56px;margin:0;padding:0 24px;border-radius:999px;font-family:'Jost',sans-serif;font-size:16px;font-weight:500;letter-spacing:.03em;background:var(--turmeric);color:var(--ink);box-shadow:0 12px 24px -12px rgba(0,0,0,.55)}
  .nav .m-foot .book:hover{background:var(--turmeric-light)}
  .m-reach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .nav .m-reach a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 8px;border-radius:999px;border:1px solid rgba(246,241,231,.2);font-family:'Jost',sans-serif;font-size:14px;font-weight:400;color:var(--ivory);white-space:nowrap}
  .nav .m-reach a:active{background:rgba(246,241,231,.08)}
  .nav .m-reach svg{flex:none;width:16px;height:16px;color:var(--turmeric-light)}
  .m-where{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 0;font-family:'Jost',sans-serif;font-size:13px;line-height:1.4;color:rgba(246,241,231,.62);text-align:center}
  .m-where svg{flex:none}

  .nav a:focus-visible,.nav .dd-toggle:focus-visible{outline:2px solid var(--turmeric-light);outline-offset:3px;border-radius:10px}
}
@media (max-width:1180px) and (max-height:640px){
  .nav>a:not(.book),.nav .dd-toggle{padding:11px 2px;font-size:clamp(26px,7.4vw,34px)}
}
@media (max-width:1180px) and (prefers-reduced-motion:reduce){
  .nav,.nav.open{transition:visibility 0s;clip-path:none}
  .nav:not(.open){visibility:hidden}
  .nav>a:not(.book),.nav .dd-toggle,.m-foot{opacity:1;transform:none;transition:none}
  .has-dd.open .dd{animation:none}
}