/* True Performance: the hover MEGA MENU + the mobile accordion drawer (TASK NAV, 2026-09-26, owner request).
   A site addition in the approved V5 system (tokens, Onest / Big Shoulders / JetBrains Mono, the dark glass pill, crimson
   accents); the vendored v5.css stays byte-identical, so the few V5 chrome rules this changes are overridden here:
     · the desktop link row now shows from 1024 px (V5 hid it below 1100 px and showed the hamburger only below 768 px);
     · the drawer (.menu) scrolls and carries accordions instead of five display-size links.
   Motion is GSAP only (public/js/megamenu.js): no CSS transition or @keyframes touches transform or opacity here.
   Panels are absolutely positioned (no layout shift on open) and closed panels are display:none (never focusable). */

/* ── the top-level row ────────────────────────────────────────────────── */
.nav__pill { position: relative; }
.mm__list { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.mm__item { list-style: none; }
.mm__item--small { position: static; }
.nav__links .mm__top {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  font: 500 14px/1.2 var(--f-body); color: var(--muted); text-decoration: none; white-space: nowrap;
}
.nav__links .mm__top:hover, .mm__btn[aria-expanded="true"], .mm__item.is-current > .mm__top { color: var(--paper); }
.mm__item.is-current > .mm__top { box-shadow: inset 0 -1.5px 0 var(--crimson); }
.mm__chev { width: 10px; height: 10px; flex: none; color: var(--crimson-hi); }
.mm__btn[aria-expanded="true"] .mm__chev, .mm-acc__btn[aria-expanded="true"] .mm__chev { transform: rotate(180deg); }
/* JS on: the button is the trigger. JS off: the plain link to the index page (html.js is set before the CSS loads). */
.js .nav__links .mm__top--nojs, .js .menu .mm__top--nojs, html:not(.js) .nav__links .mm__btn, html:not(.js) .menu .mm-acc__btn,
html:not(.js) .nav__pill .mm__burger, .js .nav__pill .mm__burger--nojs { display: none; }

/* ── the panel: a transparent positioning shell (its top strip bridges the gap under the pill) + the glass card ── */
.mm__panel { display: none; position: absolute; z-index: 2; top: calc(100% - 6px); padding-top: 16px; text-align: left; cursor: auto; }
.mm__item.is-open > .mm__panel { display: block; }
html:not(.js) .mm__item:hover > .mm__panel, html:not(.js) .mm__item:focus-within > .mm__panel { display: block; }
.mm__panel--wide { left: 0; right: 0; }
.mm__panel--small { right: 0; width: min(500px, calc(100vw - 28px)); }
.mm__inner {
  position: relative; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow: auto; overscroll-behavior: contain;
  padding: 24px 28px 20px; border-radius: var(--radius-in); border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(29, 23, 25, .985), rgba(14, 11, 12, .985));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 44px 80px -36px rgba(0, 0, 0, .85), 0 18px 40px -24px rgba(58, 10, 29, .7);
}
.mm__eyebrow { margin: 0 0 20px; }
.mm__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.mm__inner--services .mm__body { grid-template-columns: minmax(0, 1fr) 232px; }
.mm__grid { display: grid; gap: 26px 24px; }
.mm__grid--services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mm__grid--conditions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mm__grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm__grid--locations { grid-template-columns: minmax(0, 1fr); }
.mm__col { min-width: 0; }
.nav__links .mm__head {
  display: block; margin: 0 0 8px; padding: 0 0 10px; border-bottom: 1px solid var(--line);
  font: 600 13.5px/1.3 var(--f-body); color: var(--paper); text-decoration: none;
}
.mm__head::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--crimson-hi); vertical-align: 2px; }
.nav__links a.mm__head:hover { color: var(--crimson-hi); }
.mm__links { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.nav__links .mm__link {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 5px 0;
  font: 400 14px/1.35 var(--f-body); color: var(--muted); text-decoration: none;
}
.nav__links .mm__link:hover { color: var(--paper); }
.nav__links [aria-current="page"].mm__link, .nav__links [aria-current="page"].mm__head { color: var(--crimson-hi); }
.mm__tag {
  display: inline-block; padding: 3px 7px; border: 1px solid rgba(236, 107, 126, .38); border-radius: 999px;
  font: 600 9.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crimson-hi); white-space: nowrap;
}

/* the Services feature card (the GyroStim loop still + Book) */
.nav__links .mm__feature {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  min-height: 260px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--wine-deep); text-decoration: none; color: var(--paper);
}
.mm__feature img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.mm__feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 11, 12, 0) 25%, rgba(58, 10, 29, .72) 62%, rgba(14, 11, 12, .95)); }
.mm__feature-eyebrow { font: 600 10.5px/1.3 var(--f-mono); letter-spacing: .1em; text-wrap: balance; text-transform: uppercase; color: var(--on-field); }
.mm__feature-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 800 26px/.95 var(--f-display); text-transform: uppercase; }
.mm__feature-title .btn__icon { background: var(--crimson); color: #fff; }
.mm__feature:hover .btn__icon { transform: translate(3px, -1px) scale(1.06); }

/* the Locations cards */
.mm__grid--locations .mm__links { gap: 10px; }
.nav__links .mm__loc {
  display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(243, 236, 232, .03); text-decoration: none; color: var(--paper);
}
.nav__links .mm__loc:hover { border-color: rgba(236, 107, 126, .45); }
.mm__loc-meta { font: 600 10.5px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--crimson-hi); }
.mm__loc-name { font: 600 15px/1.3 var(--f-body); }
.mm__loc-note { font: 400 13px/1.45 var(--f-body); color: var(--muted); }

/* the panel foot: see-all + phone */
.mm__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.nav__links .mm__all { font-size: 14px; color: var(--paper); }
.nav__links .mm__all .btn__icon { width: 28px; height: 28px; }
.nav__links .mm__tel { font: 500 13px/1.3 var(--f-mono); color: var(--dim); text-decoration: none; }
.mm__tel strong { color: var(--paper); font-weight: 500; border-bottom: 1px solid var(--line-2); }
.nav__links .mm__tel:hover strong { border-color: var(--crimson-hi); }

/* ── breakpoints: desktop row from 1024, the drawer below it ───────────── */
@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__tel { margin-left: 0; }
  .nav__menu, .nav .menu { display: none !important; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .nav__pill { gap: 16px; padding-left: 18px; }
  .nav__logo img { height: 30px; }
  .mm__list { gap: 16px; }
  .nav__links .mm__top { font-size: 13.5px; }
  .mm__inner { padding: 22px 22px 18px; }
  .mm__inner--services .mm__body { grid-template-columns: minmax(0, 1fr) 200px; gap: 22px; }
  .mm__grid { gap: 22px 18px; }
}
@media (max-width: 1023.98px) {
  .nav__links { display: none; }
  .nav__menu { display: grid; }
}
@media (min-width: 769px) and (max-width: 1023.98px) {
  .nav__tel { margin-left: auto; }
  .nav__menu { margin-left: 0; }
}

/* ── the mobile drawer (< 1024 px) ────────────────────────────────────── */
.nav .mm-drawer { justify-content: flex-start; gap: 36px; overflow-y: auto; overscroll-behavior: contain; padding: 96px 24px calc(40px + env(safe-area-inset-bottom)); }
html:not(.js) .nav .mm-drawer:target { display: flex; }
.mm-drawer > * { flex: none; }
.mm-drawer__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mm-acc { border-bottom: 1px solid var(--line); }
.menu .mm-acc__top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 0; border: 0; background: none; cursor: pointer;
  font: 800 clamp(1.9rem, 8vw, 2.6rem)/1 var(--f-display); text-transform: uppercase; text-align: left; text-decoration: none; color: var(--paper);
}
.mm-acc__top .mm__chev { width: 18px; height: 18px; }
.mm-acc__panel { overflow: hidden; padding: 0 0 22px; }
html:not(.js) .mm-acc__panel[hidden] { display: block; }
.mm-acc__group + .mm-acc__group { margin-top: 18px; }
.menu .mm-acc__head { display: flex; align-items: center; min-height: 40px; margin: 0; padding: 6px 0 2px; font: 600 13px/1.4 var(--f-body); letter-spacing: .01em; text-transform: none; color: var(--crimson-hi); text-decoration: none; }
.mm-acc__links { margin: 0; padding: 0; list-style: none; }
.menu .mm-acc__link {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; padding: 8px 0;
  font: 500 16px/1.35 var(--f-body); text-transform: none; color: var(--muted); text-decoration: none;
}
.menu .mm-acc__link:hover, .menu .mm-acc__link[aria-current="page"] { color: var(--paper); }
.mm-acc__note { flex-basis: 100%; font-size: 13px; color: var(--dim); }
.menu .mm-acc__all { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; padding: 0; font: 600 15px/1.2 var(--f-body); text-transform: none; text-decoration: none; color: var(--paper); }
.mm-acc__all .btn__icon { background: var(--crimson); color: #fff; }
@media (max-width: 768px) {
  .nav .mm-drawer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}