/* v3 nav — the persistent sticky top nav (desktop dropdowns + mobile full-page takeover). Part of the v3 design layer; linked by build-pages.ts sharedStyle(). */
    /* ── v3 persistent sticky nav ──────────────────────────────────────
       Prefixed .v3nav (NOT .nav) so it owns its styling and never collides
       with a generic .nav. */
    .v3nav {
      position: sticky; top: 0; z-index: 100000;
      background: transparent; border-bottom: 1px solid transparent;
      transition: background-color 0.2s ease, border-color 0.2s ease,
                  -webkit-backdrop-filter 0.2s ease, backdrop-filter 0.2s ease;
    }
    /* Once off the top, a light frosted bar — more transparent, NO border
       (the blur alone separates it from content). At the very top it's fully
       transparent. .is-scrolled is toggled by Alpine on the header
       (scrollY > 24). The header also gets an inline translateY that hides it
       on scroll-down and reveals it 1:1 on scroll-up (see v3nav() below). */
    .v3nav.is-scrolled {
      background: rgba(255, 255, 255, 0.7);
      -webkit-backdrop-filter: saturate(160%) blur(10px);
      backdrop-filter: saturate(160%) blur(10px);
    }
    /* Mobile menu open → the bar goes solid (no blur) so it reads as the top edge
       of the full-page takeover below it, not a frosted strip over the page. */
    .v3nav.menu-open {
      background: #fff; border-bottom-color: transparent;
      -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    /* position:relative → this is the containing block for the mega-menu panel, which is
       too wide to hang off its own trigger without running off-screen (see Mega-menu). */
    .v3nav__inner {
      position: relative;
      max-width: var(--w-content); margin: 0 auto;
      padding: 8px 24px;
      display: flex; align-items: center; justify-content: space-between; gap: 24px;
    }
    .v3nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
    /* Tooth mark (tooth.svg, navy #264068, ~108x160) — the round badge logo
       turned to mush when shrunk to nav size, so the nav shows just the tooth;
       the round badge is featured full-size on the hero instead. */
    .v3nav__brand img { height: 38px; width: auto; display: block; }
    /* stretch → the CTA matches the pill's height exactly. */
    .v3nav__actions { display: flex; align-items: stretch; gap: 12px; }
    /* The links live inside ONE rounded "pill" wearing the blue button skin
       (card bg, brand border with a heavier bottom edge, one offset drop-shadow)
       — so all the items are surrounded by the blue thing instead of each item
       carrying its own box. The items themselves are plain text buttons. */
    .v3nav__links {
      display: flex; align-items: center; gap: 6px;
      background: var(--color-bg-card, #fff);
      border: 2px solid var(--color-brand, #264068); border-bottom-width: 3px;
      border-radius: var(--radius); padding: 6px 8px;
      box-shadow: -4px 4px 0 0 rgba(173,165,162,0.55);
    }
    .v3nav__item { position: relative; display: inline-flex; }
    /* Plain text buttons inside the pill — no per-item box/shadow; hover is a
       soft brand tint, the active page is a filled navy chip. */
    .v3nav__link {
      display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
      font-family: var(--font-sans);
      font-weight: 600; font-size: 0.9rem; color: var(--color-brand, #264068);
      text-decoration: none; background: transparent; border: 0;
      border-radius: 5px; padding: 6px 12px; line-height: 1.2;
      transition: background-color .12s ease, color .12s ease;
    }
    .v3nav__link:hover { background: rgba(38,64,104,0.08); color: var(--color-brand-deep, #1b2f4d); text-decoration: none; }
    .v3nav__link:active { background: rgba(38,64,104,0.14); }
    .v3nav__link:focus-visible { outline: 2px solid var(--color-brand, #264068); outline-offset: 2px; }
    .v3nav__link.is-active { background: var(--color-brand, #264068); color: #fff; }
    .v3nav__link.is-active:hover { background: var(--color-brand-deep, #1b2f4d); color: #fff; }
    /* Handbook = a draft/internal entry — flagged in terracotta so it never
       reads as a live page. Light-orange chip + orange ring at rest; fills
       orange with white text on hover, deep orange when it's the current page.
       Placed after the base link rules to win the equal-specificity cascade. */
    .v3nav__link--draft { background: var(--ds-terracotta-100); color: var(--ds-terracotta-900); box-shadow: inset 0 0 0 1px var(--ds-terracotta-300); }
    .v3nav__link--draft:hover { background: var(--ds-terracotta-500); color: #fff; }
    .v3nav__link--draft:active { background: var(--ds-terracotta-700); color: #fff; }
    .v3nav__link--draft.is-active { background: var(--ds-terracotta-700); color: #fff; box-shadow: none; }
    .v3nav__link--draft.is-active:hover { background: var(--ds-terracotta-900); color: #fff; }
    /* Dropdown trigger = label link + caret button as ONE rounded surface.
       The label navigates to the section landing; the caret toggles the menu.
       The wrapper (not the parts) carries the hover/active fill. */
    .v3nav__trigger { display: inline-flex; align-items: center; border-radius: 5px; }
    .v3nav__trigger:hover, .v3nav__trigger:focus-within { background: rgba(38,64,104,0.08); }
    .v3nav__trigger.is-active { background: var(--color-brand, #264068); }
    .v3nav__trigger.is-active:hover, .v3nav__trigger.is-active:focus-within { background: var(--color-brand-deep, #1b2f4d); }
    .v3nav__triglink {
      display: inline-flex; align-items: center;
      font-family: var(--font-sans);
      font-weight: 600; font-size: 0.9rem; color: var(--color-brand, #264068);
      text-decoration: none; padding: 6px 4px 6px 12px; line-height: 1.2; border-radius: 5px 0 0 5px;
    }
    .v3nav__trigger.is-active .v3nav__triglink, .v3nav__trigger.is-active .v3nav__caretbtn { color: #fff; }
    .v3nav__caretbtn {
      display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: inherit;
      background: transparent; border: 0; box-shadow: none !important; font: inherit;
      /* min 24x24 hit target (WCAG 2.5.8); left pad trimmed so it tucks against the label */
      min-width: 24px; min-height: 24px;
      padding: 6px 8px 6px 2px; margin: 0; border-radius: 0 5px 5px 0;
      -webkit-appearance: none; appearance: none;
    }
    .v3nav__caretbtn:focus-visible { outline: 2px solid var(--color-brand, #264068); outline-offset: 2px; }
    /* (The reset's link border-bottom + hover-underline are killed globally in
       the Links section above; the CTA below keeps its own border via :hover.) */
    /* Loud CTA — the one filled button, same navy as the home-page main CTA
       (.btn). align-items:stretch on the row sizes it to the pill height.
       :hover/:active set 'border' (full shorthand) so the reset's a:hover
       border-bottom can't shrink it. */
    .v3nav__cta {
      display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
      font-family: var(--font-sans);
      font-weight: 500; font-size: 0.9rem; color: #fff; white-space: nowrap;
      text-decoration: none; background: var(--color-brand, #264068);
      border: 1.5px solid var(--color-brand, #264068);
      border-radius: 6px; padding: 4px 18px; line-height: 1.2;
      box-shadow: -4px 4px 0 0 rgba(173,165,162,0.55);
      transition: background-color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .12s ease;
    }
    /* No transform — stay put on hover/active; the box-shadow carries the lift. */
    .v3nav__cta:hover { background: #2f4d7d; border: 1.5px solid #2f4d7d; color: #fff; box-shadow: -6px 6px 0 0 rgba(150,168,190,0.7); text-decoration: none; }
    .v3nav__cta:active { background: #2f4d7d; border: 1.5px solid #2f4d7d; box-shadow: -1px 1px 0 0 rgba(150,168,190,0.45); transition-duration: .06s; }
    .v3nav__cta:focus-visible { outline: 2px solid var(--color-brand, #264068); outline-offset: 3px; }
    /* A second copy of the CTA + the financing bento live inside the mobile
       takeover menu; both hidden on desktop. */
    .v3nav__cta--in-menu, .v3nav__fin { display: none; }
    .v3nav__caret { display: inline-flex; font-size: 0.8em; margin-right: -2px; }
    /* Dropdown panel — same card + brand-border + offset-shadow language. A 6px
       gap reads cleaner; the ::before bridge fills it so hover doesn't drop. */
    .v3nav__menu {
      position: absolute; top: 100%; left: 0; margin-top: 14px; min-width: 210px; z-index: 20;
      display: flex; flex-direction: column; gap: 2px;
      background: var(--color-bg-card, #fff); border: 2px solid var(--color-brand, #264068);
      border-bottom-width: 3px; border-radius: 6px; padding: 7px;
      box-shadow: -4px 4px 0 0 rgba(173,165,162,0.55);
    }
    /* Bridge fills the gap between the pill and the menu so hover doesn't drop. */
    .v3nav__menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
    .v3nav__menulink {
      font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem;
      color: var(--color-brand, #264068); text-decoration: none; white-space: nowrap;
      padding: 8px 12px; border-radius: var(--radius-sm); transition: background-color .12s ease, color .12s ease;
    }
    .v3nav__menulink:hover { background: rgba(38,64,104,0.08); color: var(--color-brand-deep, #1b2f4d); text-decoration: none; }

    /* ── Mega-menu ────────────────────────────────────────────────────────────
       A flat dropdown listed categories ("Biological care") and the treatments
       inside them ("Ozone therapy") as siblings, which read as one confusing list.
       Columns restore the hierarchy: category heading, treatments beneath. One
       level deep — no nested flyout (bad on touch, bad on keyboard).

       ANCHORED TO THE NAV CONTAINER, NOT THE TRIGGER. The panel is far wider than the
       item that opens it, so anchoring it to that item is what pushed it off-screen:
       the links pill sits on the RIGHT of the bar (space-between), so 720px starting at
       Services' left edge ran past the right edge of the viewport. Clamping the WIDTH
       (`min(720px, 100vw - 32px)`) couldn't save it — the panel's left edge is hundreds
       of px in, so the clamp was measuring from the wrong origin. Left-aligning to the
       trigger overflows right; right-aligning to it overflows left; both are the same bug.
       Anchor it to .v3nav__inner instead — the same centred, max-width box the bar itself
       lives in — and it's bounded by construction: it cannot leave the screen at either
       edge, at any width. Hugs the right (margin-left:auto) so it hangs under the pill. */
    .v3nav__item--mega { position: static; } /* → .v3nav__inner becomes the containing block */
    .v3nav__menu--mega {
      left: 24px; right: 24px;       /* .v3nav__inner's own gutter */
      width: auto; max-width: 860px; /* both offsets + auto width = "fill, but never past 860" (5 cols) */
      margin-left: auto;             /* ...and hang it off the right, under the links pill */
      margin-top: 10px;
      padding: 12px;
      align-items: start; /* stop children stretching to the full panel width */
    }
    /* The hover bridge has to span the real gap, which is now measured from the CONTAINER's
       bottom edge, not the item's — bigger than the flat menu's 14px. Too short and the
       pointer crosses dead space on its way down and the menu closes under it. */
    .v3nav__menu--mega::before { top: -28px; height: 28px; }
    /* "Services overview" is one short link, not a banner — without this it stretches
       across the whole 720px panel and its hover state reads as a giant grey bar. */
    .v3nav__menu--mega > .v3nav__menulink { width: auto; max-width: 260px; }
    .v3nav__cols { align-self: stretch; } /* ...but the columns DO span the panel */
    .v3nav__cols {
      display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 10px;
      margin-top: 6px; padding-top: 8px;
      border-top: 1px solid rgba(38,64,104,0.14);
    }
    .v3nav__col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    /* The category heading is a real link to its section — the client's care
       categories are the point of the menu, so they read louder than the treatments. */
    .v3nav__colhead {
      font-family: var(--font-sans); font-weight: 700; font-size: 0.82rem;
      letter-spacing: 0.02em; color: var(--color-brand-deep, #1b2f4d);
      text-decoration: none; padding: 8px 10px 6px; border-radius: var(--radius-sm);
      transition: background-color .12s ease;
    }
    .v3nav__colhead:hover { background: rgba(38,64,104,0.08); text-decoration: none; }
    /* Treatments sit visually subordinate: lighter, smaller, and allowed to wrap —
       nowrap (the flat-menu default) would force the panel absurdly wide. */
    .v3nav__cols .v3nav__menulink {
      font-weight: 500; font-size: 0.84rem; white-space: normal;
      padding: 6px 10px; color: #3d5378;
    }
    /* Active sub-page: the mega-menu item for the page you're on gets the same
       brand pill as the top-level nav, so "you are here" reads inside the menu too.
       The .v3nav__cols compound selector (0,3,0) beats the treatment color above. */
    .v3nav__menulink.is-active,
    .v3nav__cols .v3nav__menulink.is-active,
    .v3nav__colhead.is-active {
      background: var(--color-brand, #264068); color: #fff;
    }
    .v3nav__menulink.is-active:hover,
    .v3nav__cols .v3nav__menulink.is-active:hover,
    .v3nav__colhead.is-active:hover {
      background: var(--color-brand-deep, #1b2f4d); color: #fff;
    }
    /* Hamburger — hidden on desktop */
    .v3nav__toggle {
      display: none; background: none; border: 0; box-shadow: none !important;
      cursor: pointer; padding: 8px; color: #264068; border-radius: 6px;
    }
    .v3nav__toggle:focus-visible { outline: 2px solid #264068; outline-offset: 2px; }
    /* block (not inline) so the icon doesn't sit on the text baseline — that
       baseline gap was pushing the hamburger/X visually above center. */
    .v3nav__toggle span { display: inline-flex; }
    .v3nav__toggle .iconify { width: 28px; height: 28px; display: block; }
    @media (max-width: 820px) {
      .v3nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
      /* Logo + X stay above the takeover. The bar's appointment CTA is hidden once the
         menu opens — it reappears as the one CTA INSIDE the menu (below). */
      .v3nav__brand, .v3nav__toggle { position: relative; z-index: 2; }
      /* Pin the bar to the viewport while the takeover is open. Opening the menu
         sets overflow:hidden on html/body to lock scroll, which collapses the
         sticky header back to its document-flow position — off-screen above the
         viewport if you'd scrolled, taking the logo + X with it. Fixed keeps them
         on the overlay (transform is already none when open). */
      .v3nav.menu-open { position: fixed; top: 0; left: 0; right: 0; }
      .v3nav.menu-open .v3nav__actions > .v3nav__cta { display: none; }
      /* While the takeover is open: center the tooth mark over the bar (larger + nudged
         down ~3px so it OPTICALLY centers with the X — the crown-heavy tooth reads high at
         its geometric center). X stays at the right. */
      .v3nav.menu-open .v3nav__inner { position: relative; justify-content: flex-end; }
      .v3nav.menu-open .v3nav__brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 3px)); margin: 0; }
      .v3nav.menu-open .v3nav__brand img { height: 46px; }

      /* FULL-SCREEN TAKEOVER — plain white, one sans face, no row fills. position:fixed =
         viewport-relative (the nav drops its transform/blur while open: header :style +
         .v3nav.menu-open). Page scroll is locked via the header x-effect. */
      .v3nav__links {
        display: none;
        position: fixed; inset: 0; z-index: 1;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border: 0; border-radius: 0; box-shadow: none;
        padding: 84px 26px max(28px, env(safe-area-inset-bottom));
        overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
      }
      /* The white sheet z-indexes up and washes to fully opaque FIRST (fast), so it
         covers the page before any link moves; the link stagger below waits for it. */
      .v3nav__links.is-open { display: flex; animation: v3navSheetIn 0.13s ease both; }
      /* Vertically CENTER the whole block (links + CTA) via auto-margins — balanced in the
         viewport, not jammed at the top. Auto-margins (not justify-content:center) so it
         still scrolls gracefully if it ever overflows a short screen. */
      .v3nav__links > *:first-child { margin-top: auto; }

      /* TRASH the submenus + carets on mobile — Services/About are plain links to their
         landing pages, same as the rest. */
      .v3nav__menu, .v3nav__caretbtn { display: none !important; }
      .v3nav__item { display: block; width: 100%; }
      .v3nav__trigger { display: block; width: 100%; }
      .v3nav__triglink { display: block; flex: none; }

      /* One typeface, one scale, generous rhythm; navy ink. border:0 at REST so the reset's
         hover border-bottom can never change the row height (the trigger links carry a 1px
         border at rest; plain links gain one on hover — either way = a jump). Constant 0. */
      .v3nav__link, .v3nav__triglink {
        font-family: var(--font-sans); font-weight: 600; font-size: 1.5rem; line-height: 1.2;
        color: var(--color-ink); width: 100%; justify-content: flex-start;
        padding: 14px 2px; border: 0; border-radius: 6px;
      }

      /* Nav rows never get a fill — kill every hover/focus/active background
         (those caused the blue-on-blue). Current page = brand-blue text only. */
      .v3nav__links .v3nav__link, .v3nav__links .v3nav__link:hover, .v3nav__links .v3nav__link:focus,
      .v3nav__links .v3nav__link.is-active, .v3nav__links .v3nav__link.is-active:hover,
      .v3nav__links .v3nav__trigger, .v3nav__links .v3nav__trigger:hover, .v3nav__links .v3nav__trigger:focus-within,
      .v3nav__links .v3nav__trigger.is-active, .v3nav__links .v3nav__trigger.is-active:hover,
      .v3nav__links .v3nav__trigger.is-active:focus-within { background: transparent; box-shadow: none; }
      .v3nav__links .v3nav__link.is-active,
      .v3nav__links .v3nav__trigger.is-active .v3nav__triglink { color: var(--color-brand); }

      /* Handbook (draft) — a plain link, marked only by a quiet terracotta tint. No button. */
      .v3nav__links .v3nav__link--draft, .v3nav__links .v3nav__link--draft:hover, .v3nav__links .v3nav__link--draft.is-active {
        background: transparent; box-shadow: none; border: 0; color: var(--ds-terracotta-700);
      }

      /* Hover = a clean underline (desktop; touch has no hover). KILL the reset's 1px
         hover border-bottom — it grew the row by 1px and re-centered the whole block, the
         jarring "offset". No transform/shadow either. */
      .v3nav__links .v3nav__link:hover, .v3nav__links .v3nav__triglink:hover {
        border-bottom: 0; box-shadow: none; transform: none; background: transparent;
        text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
      }

      /* THE primary CTA — "Make an appointment", identical brand-blue to the bar button
         (inherits .v3nav__cta), full-width. Sits in the centered block; the bottom anchor
         (margin-bottom:auto, pairs with the first row's margin-top:auto) now lives on the
         financing bento below it, so this just keeps a clear gap above. */
      .v3nav__cta--in-menu {
        display: flex; width: 100%; margin-top: 32px;
        font-size: 1.05rem; font-weight: 600; padding: 16px 24px; border-radius: var(--radius-sm);
      }
      /* The two financing links as the SAME thin-line bento as the footer (.v3-fin-bento),
         stacked full-width under the CTA — two big touch targets. It's the bottom of the
         centered block, so it carries the margin-bottom:auto anchor. */
      /* .v3nav__links descendant selector (0,2,0) so it beats .v3-fin-bento's
         2-col default (0,1,0), which loads after this file. Stacked = two big
         full-width touch targets matching the CTA above. */
      .v3nav__links .v3nav__fin {
        display: grid; grid-template-columns: 1fr; width: 100%; margin: 14px 0 auto;
      }
      .v3nav__fin .v3-cta { font-size: 1.05rem; padding: 16px 24px; }
      /* Kill the brand button's translate + shadow-grow on hover/active/tap — nothing
         should MOVE. Just a static colour darken for feedback. */
      .v3nav__cta--in-menu:hover, .v3nav__cta--in-menu:active, .v3nav__cta--in-menu:focus-visible {
        transform: none; box-shadow: -4px 4px 0 0 rgba(173,165,162,0.55);
      }
      .v3nav__cta--in-menu:hover, .v3nav__cta--in-menu:active {
        background: #2f4d7d; border-color: #2f4d7d; color: #fff;
      }

      /* Staggered reveal — each row eases up in turn, but only AFTER the white
         sheet is opaque (0.16s base, past the 0.13s sheet wash) so nothing ever
         animates over the still-visible page. */
      .v3nav__links.is-open > * { animation: v3navReveal 0.4s cubic-bezier(0.16,1,0.3,1) backwards; }
      .v3nav__links.is-open > *:nth-child(1) { animation-delay: 0.16s; }
      .v3nav__links.is-open > *:nth-child(2) { animation-delay: 0.20s; }
      .v3nav__links.is-open > *:nth-child(3) { animation-delay: 0.24s; }
      .v3nav__links.is-open > *:nth-child(4) { animation-delay: 0.28s; }
      .v3nav__links.is-open > *:nth-child(5) { animation-delay: 0.32s; }
      .v3nav__links.is-open > *:nth-child(6) { animation-delay: 0.36s; }
      .v3nav__links.is-open > *:nth-child(7) { animation-delay: 0.40s; }
      @media (prefers-reduced-motion: reduce) { .v3nav__links.is-open, .v3nav__links.is-open > * { animation: none; } }
    }
    @keyframes v3navSheetIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes v3navReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }