/* =============================================================================
   Forward Oral Surgery, nav.css (builder N, NAV-REDESIGN v2). The x01 header bar, the Services panel, the phone panel and the
   menu overlay. Replaces the old header, Services dropdown, menu overlay and floating notes rules of base.css.
   Tokens only (tokens.css); the few spec numbers of NAV-REDESIGN v2 are named below. One breakpoint (1023 / 1024).
   No shadows, no glass blur, spruce only on call controls.
   ========================================================================== */
:root {
  --nav-glyph: min(var(--icon), 18px);                   /* v2 section 3: the phone glyph, the pill's icon slot, never over 18px */
  --nav-phone-w: 340px;                                  /* v2 section 3: the phone panel is never narrower */
  --nav-svc-w: 1100px;                                   /* v2 section 2: the Services panel at most */
  --nav-svc-name: calc((var(--t-h4-size) + var(--t-h5-size)) / 2);   /* "about h3": between the h4 and h5 roles */
  --nav-link: clamp(30px, min(5vw, 6vh), 132px);       /* v2 section 4: sized from the smaller of width and height */
  --nav-open: .75s;
}

/* ---- x01 bar: fixed, 72px, transparent at the top, A3's measured states (hide past 200px down, light fill) ---- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 120; height: var(--hdr-h); padding: var(--gap-12) var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-24); color: var(--ink);
  transition: color var(--dur-fast) var(--ease-io), transform var(--dur-fast) var(--ease-io), background-color var(--dur-fast) var(--ease-io); }
.hdr.is-hide { transform: translateY(-105%); }
.hdr.is-filled { background-color: var(--ground-light); color: var(--ink); }
.hdr:focus-within, html.menu-open .hdr, html.modal-open .hdr { transform: none; }
.hdr .is-dark { color: var(--ink-invert); }
.hdr .pill--spruce, .hdr .pill--spruce.is-dark { color: var(--cta-ink); }
.hdr__brand { display: inline-flex; align-items: center; min-height: var(--btn-h); }
.hdr__word { display: grid; white-space: nowrap; font-family: var(--body); font-size: var(--t-c2-size); line-height: var(--t-c3-lh); font-weight: 700; letter-spacing: var(--t-c1-track); }
.hdr__r { display: flex; align-items: center; gap: var(--gap-24); }
.hdr__dd { position: relative; }
.hdr__svc { position: static; }   /* the Services panel aligns to the bar, not to its button */
.hdr__btn { display: inline-flex; align-items: center; gap: var(--gap-8); min-height: var(--btn-h); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; white-space: nowrap;
  font-family: var(--t-c2-family); font-size: var(--t-c2-size); line-height: var(--t-c2-lh); font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); }
.hdr__btn .ico-chev { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur-fast) var(--ease-io); }
.hdr__btn[aria-expanded="true"] .ico-chev { transform: rotate(180deg); }
.hdr__btn:hover .roll > span, .hdr__btn:focus-visible .roll > span { transform: translateY(-100%); }

/* the ring device: Menu (two lines, a close X when open) and, on phones, the spruce call ring */
.hdr__ring { display: inline-grid; place-items: center; flex: none; width: var(--circ); height: var(--circ); padding: 0; border: 1px solid currentColor;
  border-radius: var(--r-circle); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-io), color var(--dur-fast) var(--ease-io); }
.hdr__ring:hover { background-color: var(--tint); color: var(--anchor); border-color: var(--tint); }
.hdr__call { display: none; border-color: var(--cta); background: var(--cta); color: var(--cta-ink); }
.hdr__call:hover { background: var(--cta); color: var(--cta-ink); border-color: var(--cta); }
.hdr__call svg { width: var(--nav-glyph); height: var(--nav-glyph); }
.burger__lines { position: relative; display: block; width: var(--icon); height: 8px; }
.burger__lines span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform var(--dur-fast) var(--ease-io); }
.burger__lines span:nth-child(1) { top: 0; }
.burger__lines span:nth-child(2) { top: 6.5px; }
.burger[aria-expanded="true"] .burger__lines span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* ---- the phone panel: nothing wraps, the call pill's glyph in the icon slot ---- */
/* N2: the panel is as wide as its longest row (width: max-content), never under 340px at 1440 and scaled with the type above
   1440 (340 / 14.4 = 23.6111vw), so "Mon to Thu" and "9:00 am to 5:00 pm" never wrap. The rows are <p>, and base.css gives every
   p text-wrap: pretty, which resets the wrap mode the panel inherits; so nowrap is set on the rows themselves. */
.hdr__panel { position: absolute; top: calc(100% + var(--gap-8)); right: calc(-1 * var(--gap-24)); width: max-content; min-width: max(var(--nav-phone-w), 23.6111vw); padding: var(--gap-24);
  background: var(--ground); color: var(--ink); border-radius: var(--r-card); border: 1px solid var(--hairline-light); white-space: nowrap; }   /* the hairline draws the card where it sits on the same paper, as the Treatments panel does */
.hdr__panel[hidden] { display: none; }
.hdr__panel .lbl { margin-bottom: var(--gap-8); white-space: nowrap; }
.ph__line { display: flex; justify-content: space-between; gap: var(--gap-24); padding: var(--gap-12) 0; border-top: 1px solid var(--hairline-light); white-space: nowrap; }
.ph__line span { white-space: nowrap; }
.ph__line:first-of-type { border-top: 0; }
.ph__call { display: flex; width: 100%; justify-content: space-between; margin-top: var(--gap-12); white-space: nowrap; }
.ph__call svg { width: var(--nav-glyph); height: var(--nav-glyph); flex: none; }

/* ---- the Services panel: right aligned under the bar, three columns, 30 / 22 nested radius ---- */
.svc { position: absolute; top: calc(100% + var(--gap-8)); right: var(--pad-x); width: min(var(--nav-svc-w), calc(100vw - 2 * var(--pad-x)));
  max-height: calc(100svh - var(--hdr-h) - var(--gap-24)); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--gap-24); background: var(--ground); color: var(--ink); border-radius: var(--r-card); animation: svc-in var(--dur-mid) var(--ease-out);
  border: 1px solid var(--hairline-light); }   /* N2: the DNA hairline draws the 30px corners where the panel sits on the light ground,
     so a photo edge behind the bar no longer reads as a square corner of the panel */
.svc[hidden] { display: none; }
@keyframes svc-in { from { opacity: 0; transform: translateY(calc(-1 * var(--gap-12))); } }
.svc__grid { display: grid; grid-template-columns: 1.2fr 1fr .9fr; gap: var(--gap-32); align-items: start; }
.svc__col > .lbl, .svc__list > .lbl { margin-bottom: var(--gap-12); }
.svc__groups li + li .svc__g { border-top: 1px solid var(--hairline-light); }
.svc__g { display: flex; align-items: baseline; gap: var(--gap-16); padding: var(--gap-12) 0; color: var(--ink); }
.svc__n { flex: none; width: 2.2em; color: var(--ink-quiet); }
.svc__name { font-family: var(--display); font-size: var(--nav-svc-name); line-height: 1; letter-spacing: var(--t-h4-track); white-space: nowrap; }
.svc__g.is-on .svc__name { font-style: italic; }
/* N2: hover and the selected group show italic only. The keyboard focus is :focus-visible alone, and refined to the row's own
   language: the base pill ring is replaced by two ink rules that bracket the hairline row (8.1:1 on the ground). */
.svc__g:focus-visible { outline: 0; border-radius: 0; box-shadow: inset 0 1px 0 var(--ink), inset 0 -1px 0 var(--ink); }
.svc__list ul li + li .proc { border-top: 1px solid var(--hairline-light); }
.svc .proc, .nav__col .proc { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-16); min-height: 44px; padding: var(--gap-8) 0;
  font-family: var(--t-c2-family); font-size: var(--t-c2-size); font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); }
.svc .proc svg, .nav__col .proc svg { width: var(--icon); height: var(--icon); flex: none; transition: transform var(--dur-fast) var(--ease-io); }
.svc .proc:hover svg, .nav__col .proc:hover svg { transform: translate(2px, -2px); }
.svc__foot { display: flex; justify-content: flex-start; margin-top: var(--gap-24); padding-top: var(--gap-16); border-top: 1px solid var(--hairline-light); }

/* =============================================================================
   The menu overlay (the gate's .nav): a circle grown from the Menu ring (nav.js sets --mx --my --mr), content always below
   the bar, every text in full ink on the dark ground (no faded grey).
   ========================================================================== */
.nav { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; overflow: hidden;
  padding: 0; background: var(--anchor); color: var(--ink-invert);
  visibility: hidden; clip-path: circle(0px at var(--mx, calc(100% - 56px)) var(--my, 36px));
  transition: clip-path var(--nav-open) cubic-bezier(.7, 0, .2, 1), visibility 0s linear var(--nav-open); }
.nav.is-open { visibility: visible; clip-path: circle(var(--mr, 150vmax) at var(--mx, calc(100% - 56px)) var(--my, 36px)); transition-delay: 0s; }
.nav .lbl, .nav .lbl--faded { color: var(--ink-invert); opacity: 1; }
/* the overlay scrolls INSIDE this box, which starts below the bar: content never runs under the wordmark or the ring */
.nav__in { position: absolute; inset: calc(var(--hdr-h) + var(--gap-16)) 0 0 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--gap-8) var(--pad-x) var(--gap-24); display: grid; grid-template-columns: 4fr 6fr; gap: var(--gap-64); align-items: start; }
.nav__stage { display: grid; grid-template-rows: 1fr; min-height: 0; height: calc(100svh - var(--hdr-h) - var(--gap-16) - var(--gap-8) - var(--gap-24)); position: sticky; top: 0; }
/* N2: the photo is clipped by its own box (.nav__ph), not by .nav__frames, so the one-line caption under it (top: 100%) shows
   in the row .nav__stage::after keeps for it (before, .nav__frames clipped it away on every page). */
.nav__frames { position: relative; min-height: 0; border-radius: var(--r-card); background: var(--photo-black); }
.nav__frame { position: absolute; inset: 0; margin: 0; display: grid; grid-template-rows: 1fr; }
.nav__ph { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-card); }
.nav__frame .nav__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease-io), transform 1.6s var(--ease-out); }
.nav__frame.is-on .nav__img { opacity: 1; transform: scale(1); }
/* FX5 (items 3/17): the stage has no caption any more, so no caption row is kept under the photo */
.nav__main { display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap-24); min-width: 0; }
.nav__big { display: grid; gap: 2px; }
.nav__link { display: inline-flex; align-items: baseline; gap: var(--gap-16); color: var(--ink-invert); }
.nav__n { flex: none; width: 2.4em; }
.nav__t { font-family: var(--display); font-size: var(--nav-link); line-height: 1; letter-spacing: var(--t-h4-track); transition: letter-spacing var(--dur-fast) var(--ease-io); }
.nav__link:hover .nav__t, .nav__link:focus-visible .nav__t, .nav__link.is-hot .nav__t { font-style: italic; }
.nav__link[aria-current="page"] .nav__n::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: var(--gap-8); border-radius: var(--r-circle); background: var(--ink-invert); vertical-align: middle; }
.nav__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-40); }
.nav__col .lbl { margin-bottom: var(--gap-8); }
.nav__col li { border-top: 1px solid var(--hairline-dark); }
.nav__col .proc { min-height: 0; padding: 6px 0; color: var(--ink-invert); }
.nav__foot { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: var(--gap-24); padding-top: var(--gap-16); border-top: 1px solid var(--hairline-dark); }
.nav__cell { display: grid; gap: var(--gap-8); align-content: start; font-size: var(--t-c2-size); line-height: 1.35; }
.nav__cell .ulink { justify-self: start; }
.nav__cell--call { grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: var(--gap-24); }
.nav__cell--call .lbl { grid-column: 1 / -1; }
.nav__tel { font-family: var(--display); font-size: var(--t-h5-size); line-height: 1; white-space: nowrap; }
.nav__exp, .nav__sub { display: none; }
.nav__gl { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-16); }
.nav__t, .nav__cell .nw { white-space: nowrap; }

/* N2, desktop composition (1024 and up). Three columns on one grid, the same at every desktop size: the stage | the six links |
   the Services and Patients rows stacked; then Visit, Hours and Call on a full-width hairline, each under its column. The
   rows no longer sit under the links, so the whole menu fits on short wide screens (1280 x 720, 1568 x 794) without shrinking,
   and the right column is never a dead strip at 2560. Link size = the smaller of what the links column is wide enough for
   ("Patient Information" is about 6.55 em plus its number) and what the first row is tall enough for (six links about 6.6 em,
   the bar, the paddings and the bottom row about 240px at 1440). Above 1440 every term is in vw like the tokens, so 2560 is
   1440 scaled. If a screen is shorter still, the first row keeps its content height and .nav__in scrolls (the last resort). */
@media (min-width: 1024px) {
  .nav { --nav-cols: minmax(0, 30fr) minmax(0, 40fr) minmax(0, 30fr);
    --nav-link: clamp(30px, min(calc(6vw - 18px), calc((100svh - var(--hdr-h) - 240px) / 6.6)), 132px); }
  .nav__in { grid-template-columns: var(--nav-cols); grid-template-rows: minmax(min-content, 1fr) auto; column-gap: var(--gap-48); row-gap: var(--gap-32); }
  .nav__main { display: contents; }
  .nav__stage { grid-column: 1; grid-row: 1; align-self: stretch; height: auto; position: relative; top: auto; }
  .nav__big { grid-column: 2; grid-row: 1; align-self: start; }
  .nav__cols { grid-column: 3; grid-row: 1; align-self: start; grid-template-columns: minmax(0, 1fr); gap: var(--gap-24); }
  .nav__col .proc { padding: calc(var(--gap-12) / 2) 0; }
  .nav__foot { grid-column: 1 / -1; grid-row: 2; grid-template-columns: var(--nav-cols); column-gap: var(--gap-48); }
  .nav__cell--call { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--gap-12) var(--gap-24); }
  .nav__cell--call .lbl { flex: 0 0 100%; }
}
@media (min-width: 1441px) {
  :root { --nav-svc-w: 76.3889vw; }   /* N2: the Services panel scales with the type above 1440 (1100 / 14.4), as every token does */
  .nav { --nav-link: max(30px, min(4.75vw, calc((100svh - var(--hdr-h) - 16.6667vw) / 6.6))); }
}
/* the links rise in after the circle, the stage settles */
.nav.is-open .nav__row, .nav.is-open .nav__cols, .nav.is-open .nav__foot { animation: nav-rise var(--dur-link) var(--ease-out) both; animation-delay: calc(.3s + var(--i, 6) * var(--stagger)); }
.nav.is-open .nav__frames { animation: nav-settle 1.2s var(--ease-out) both; animation-delay: .15s; }
@keyframes nav-rise { from { opacity: 0; transform: translateY(var(--rise-y)); } }
@keyframes nav-settle { from { opacity: 0; transform: scale(.96); } }
/* the bar while the menu is open: the wordmark and the ring (a close X) only */
html.menu-open .hdr { background-color: transparent; color: var(--ink-invert); }
html.menu-open .hdr .is-dark, html.menu-open .hdr__brand, html.menu-open .hdr__menu { color: var(--ink-invert); }
html.menu-open .hdr__menu:hover { color: var(--anchor); }
html.menu-open .hdr__svc, html.menu-open .hdr__phone, html.menu-open .hdr__pay, html.menu-open .hdr__book, html.menu-open .hdr__call, html.menu-open .hdr__sched { visibility: hidden; }
html.menu-open, html.modal-open { overflow: hidden; }

/* ---- phones: wordmark left, the spruce call ring and the Menu ring right (44px); the menu stacks, no stage ---- */
@media (max-width: 1023px) {
  .hdr__svc, .hdr__phone, .hdr__book, .hdr__portal { display: none; }
  .hdr__r { gap: var(--gap-12); }
  .hdr__ring { width: 44px; height: 44px; }
  .hdr__call { display: inline-grid; }
  .nav { --nav-link: clamp(30px, min(10vw, 5.4vh), 48px); }
  .nav__in { grid-template-columns: 1fr; gap: var(--gap-32); padding-bottom: var(--gap-40); }
  .nav__cell--call { grid-template-columns: auto; }
  .nav__stage { display: none; }
  .nav__big { gap: 0; }
  .nav__row { border-bottom: 1px solid var(--hairline-dark); padding: var(--gap-8) 0; }
  .nav__exp { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid currentColor; border-radius: var(--r-circle);
    background: transparent; color: var(--ink-invert); cursor: pointer; }
  .nav__exp svg { width: var(--icon); height: var(--icon); transition: transform var(--dur-fast) var(--ease-io); }
  .nav__exp[aria-expanded="true"] svg { transform: rotate(45deg); }
  .nav__sub:not([hidden]), .nav__procs:not([hidden]) { display: grid; }
  .nav__sub { padding: var(--gap-8) 0 var(--gap-8) calc(2.4em + var(--gap-16)); }
  .nav__gl > a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-size: var(--t-h5-size); line-height: 1; }
  .nav__link { min-height: 44px; align-items: center; }
  .nav__col--svc { display: none; }   /* the groups already sit under 01 Services here */
  .nav__cols { grid-template-columns: 1fr; }
  .nav__col .proc { min-height: 44px; }
  .nav__foot { grid-template-columns: 1fr; gap: var(--gap-24); }
  .nav__cell .ulink, .nav__cell a { min-height: 44px; }
}

/* reduced motion: a plain fade, nothing grows, rises or settles */
@media (prefers-reduced-motion: reduce) {
  .nav { clip-path: none !important; opacity: 0; transition: opacity .25s linear, visibility 0s linear .25s !important; }
  .nav.is-open { opacity: 1; transition: opacity .25s linear, visibility 0s !important; }
  .nav.is-open .nav__row, .nav.is-open .nav__cols, .nav.is-open .nav__foot, .nav.is-open .nav__frames { animation: none !important; }
  .nav__frame .nav__img { transform: none !important; }
  .svc { animation: none; }
}

/* FX10 (fix wave 4, B6): the dialog carries two titles (booking, and new patient forms); nav.js shows one. The split
   heading's own display rule would otherwise beat the hidden attribute */
.modal__head [hidden] { display: none; }
.modal--portal .modal__head { margin-bottom: 0; }   /* the portal dialog is only a heading and one line: no empty space under it */

/* FX11 (fix wave 5, item 1): a twelfth row in the right column to the right column, which on short desktop
   screens pushed the Call pill below the fold (measured: pill bottom 811 at 1568 x 794 and 747 at 1280 x 720, was 779 and
   717). Only there, the right column's rows tighten from gap-12/2 to 0.375 of gap-12 a side, so the bottom row sits where
   it sat before; every other size keeps N2's rows exactly. */
@media (min-width: 1024px) and (max-height: 800px) {
  .nav__col .proc { padding: calc(var(--gap-12) * .375) 0; }
}

/* ---- Forward: the Treatments panel (two columns, no photos), the Patient Portal button, menu buttons ---- */
.svc__grid { grid-template-columns: 1fr 1.25fr; }
.svc__intro { margin: 0 0 var(--gap-16); max-width: 38ch; color: var(--ink-quiet); }
.svc__rows { display: grid; margin: 0 0 var(--gap-16); padding: 0; list-style: none; }
.svc__row { padding: var(--gap-12) 0; border-top: 1px solid var(--hairline-light); font-family: var(--t-c2-family); font-size: var(--t-c2-size); font-weight: var(--t-c2-weight); }
.svc__row:last-child { border-bottom: 1px solid var(--hairline-light); }
.hdr__portal { font: inherit; }
.proc--btn { width: 100%; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; }
.nav__sub--flat { display: grid; gap: var(--gap-4, 4px); margin: var(--gap-8) 0 0; padding: 0 0 0 calc(2.4em + var(--gap-16)); list-style: none; }
.nav__sub--flat a { display: inline-block; padding: var(--gap-8) 0; font-family: var(--t-c1-family); font-size: var(--t-c1-size); font-weight: var(--t-c2-weight); color: var(--ink-invert); }
.nav__frame .nav__ph:empty { background: var(--ground-dark); }
@media (min-width: 1024px) and (max-width: 1279px) { .hdr__r { gap: var(--gap-16); } }

/* =============================================================================
   Forward Oral Surgery: the two-line wordmark, Pay Online, the schedule ring on phones, the nine-procedure panel, the schedule dialog.
   ========================================================================== */
.hdr .pill--navy, .hdr .pill--navy.is-dark { color: var(--cta-ink); }
.hdr__word { gap: 1px; }
.hdr__word > span:first-child { font-family: var(--display); font-weight: 400; font-size: calc(var(--t-h5-size) * .82); line-height: .86; letter-spacing: -.02em; }
.hdr__word > span:last-child { font-size: calc(var(--t-c3-size) * .96); line-height: 1.1; font-weight: 500; letter-spacing: 0; }
.hdr__pay { text-decoration: none; }
.hdr__sched { display: none; border-color: var(--cta); background: var(--cta); color: var(--cta-ink); }
.hdr__sched:hover { background: var(--cta); color: var(--cta-ink); border-color: var(--cta); }
.hdr__sched svg { width: var(--nav-glyph); height: var(--nav-glyph); }
.ico-cal { width: var(--icon); height: var(--icon); flex: none; }
.hdr__panel--phone { width: max(340px, 25vw); min-width: 0; white-space: normal; }
.ph__line--text { display: grid; gap: 2px; white-space: normal; }
.ph__line--text span { white-space: normal; }
.ph__line--text span:first-child { font-weight: 700; }
.svc__foot { gap: var(--gap-12); flex-wrap: wrap; }
.svc__intro:empty { display: none; }
.modal__sched { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-16) var(--gap-24); margin: 0 0 var(--gap-32); }
.modal__call { margin: 0; }
/* the scheduling button with its plain "sample link" line right under it, then the call line: one short column at every width */
.modal__sched { flex-direction: column; align-items: flex-start; gap: var(--gap-16); }
.modal__open { display: grid; gap: var(--gap-8); justify-items: start; }
.modal__sample { margin: 0; max-width: 52ch; color: var(--ink-3-dark); }   /* the dialog is a dark ground */
/* the menu's right column: Patients over Doctors, one stack beside the Procedures column (the third column of the grid is too
   narrow for three sub-columns, and Patients and Doctors are three links each) */
.nav__stack { display: grid; align-content: start; gap: var(--gap-24); min-width: 0; }
.nav__stack .nav__col { min-width: 0; }
.modal__tel { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.modal__or { margin: 0 0 var(--gap-16); }
@media (min-width: 1024px) {
  .nav__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-24); }
  .nav .nav__sub--flat { display: none; }
}
@media (max-width: 1023px) {
  .hdr__pay { display: none; }
  .hdr__sched { display: inline-grid; }
  .hdr__r { gap: var(--gap-8); }
  .hdr__ring { width: 40px; height: 40px; }
  .nav__col--svc { display: none; }
  .nav__cell--call { gap: var(--gap-12); }
}
.nav__sub--flat[hidden] { display: none; }