/* =============================================================================
   QuickCare Design System — GLOBAL NAVIGATION   (@layer qc.components)
   -----------------------------------------------------------------------------
   One self-contained, token-driven system for the global site chrome:
     .qc-site-header  — sticky dark header shell (brand + primary nav + actions)
     .qc-main-nav     — desktop primary navigation (links that open mega panels)
     .qc-mega         — mega-menu layer; .qc-mega-panel — one panel per section
     .qc-mobile-nav   — the < desktop hamburger drawer (accordion sections)

   Design goals (2026 rebuild):
     • Every mega panel shares ONE dark surface, radius, spacing + type scale.
       Sections differ only by a single restrained accent (--qc-mega-accent),
       set per-panel via a --accent-* modifier — never a whole new theme.
     • Panels are sized to their content and anchored just under the header.
       max-height is a *safety net*, so internal scrollbars almost never appear.
     • Behaviour (open on hover/focus, Escape, outside-click, aria-expanded,
       mobile drawer) lives in /assets/js/navigation.js. CSS only reflects state
       via .is-open + aria-expanded; it never depends on JS to stay hidden.
     • qc- namespaced + layered so it coexists with the legacy Bootstrap stack.
   ========================================================================== */
@layer qc.components {

  /* ==========================================================================
     0. LOCAL TOKENS  (resolve to the global scale; tweak nav in one place)
     ========================================================================== */
  .qc-site-header,
  .qc-mega,
  .qc-mobile-nav {
    --_nav-surface: #0f1b2d;                 /* shared dark panel base */
    --_nav-surface-2: #16263c;               /* raised rows / cards */
    --_nav-hairline: rgba(255, 255, 255, 0.10);
    --_nav-hairline-strong: rgba(255, 255, 255, 0.16);
    --_nav-text: rgba(255, 255, 255, 0.92);
    --_nav-text-muted: rgba(255, 255, 255, 0.62);
    --_nav-text-faint: rgba(255, 255, 255, 0.45);
    --_nav-ring: 0 0 0 3px rgba(255, 255, 255, 0.65);
  }

  /* ==========================================================================
     1. HEADER SHELL
     ========================================================================== */
  .qc-site-header {
    position: sticky;
    top: 0;
    z-index: var(--qc-z-fixed);
    background: var(--qc-gradient-header);
    color: var(--_nav-text);
    border-bottom: 1px solid var(--_nav-hairline);
    box-shadow: var(--qc-shadow-md);
  }
  .qc-site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--qc-space-2);
    width: 100%;
    max-width: var(--qc-container-wide);
    min-height: var(--qc-header-height);
    margin-inline: auto;
    padding-inline: var(--qc-container-pad);
  }

  /* Brand */
  .qc-site-header__brand { display: inline-flex; align-items: center; flex: none; }
  .qc-site-header__brand img { display: block; height: 30px; width: auto; }
  .qc-site-header__brand:focus-visible { outline: none; box-shadow: var(--_nav-ring); border-radius: var(--qc-radius-sm); }

  /* Right-side actions cluster (CTA + hamburger live here). margin-left:auto
     pushes it right on mobile (where primary + secondary are hidden) and sits
     flush after the secondary cluster on desktop. */
  .qc-site-header__actions { display: flex; align-items: center; gap: var(--qc-space-2); flex: none; margin-left: auto; }

  /* The desktop nav + secondary cluster are hidden until there's room (see §6) */
  .qc-site-header__primary,
  .qc-site-header__secondary { display: none; }
  /* When shown on desktop: primary hugs the brand, secondary is pushed right. */
  .qc-site-header__primary { margin-left: var(--qc-space-1); }
  .qc-site-header__secondary { margin-left: auto; }

  /* Hamburger — reuses the .qc-menu-toggle look but self-contained here */
  .qc-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 44px; height: 44px; padding: 0;
    color: inherit; background: transparent;
    border: 1px solid var(--_nav-hairline-strong); border-radius: var(--qc-radius-md);
    cursor: pointer;
    transition: background-color var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-nav-toggle:hover { background: rgba(255, 255, 255, 0.10); }
  .qc-nav-toggle:focus-visible { outline: none; box-shadow: var(--_nav-ring); }
  .qc-nav-toggle .material-icons { font-size: 1.6rem; line-height: 1; }

  /* Header CTA button — solid light pill on the dark bar */
  .qc-site-header .qc-nav-cta {
    display: inline-flex; align-items: center; gap: var(--qc-space-2);
    min-height: 40px; padding: var(--qc-space-2) var(--qc-space-4);
    font-weight: var(--qc-fw-semibold); font-size: var(--qc-fs-sm); white-space: nowrap;
    color: var(--qc-color-primary-dark); background: #fff;
    border: 1px solid transparent; border-radius: var(--qc-radius-pill);
    text-decoration: none;
    transition: transform var(--qc-dur-fast) var(--qc-ease-standard),
                box-shadow var(--qc-dur-fast) var(--qc-ease-standard),
                background-color var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-site-header .qc-nav-cta:hover { background: var(--qc-neutral-100); transform: translateY(-1px); box-shadow: var(--qc-shadow-md); }
  .qc-site-header .qc-nav-cta:focus-visible { outline: none; box-shadow: var(--_nav-ring); }

  /* ==========================================================================
     2. PRIMARY NAV (desktop)
     ========================================================================== */
  .qc-main-nav { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
  .qc-main-nav__item { position: static; }

  .qc-main-nav__link {
    display: inline-flex; align-items: center; gap: 1px;
    padding: var(--qc-space-2) var(--qc-space-1);
    color: var(--_nav-text); text-decoration: none;
    font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-medium); white-space: nowrap;
    border-radius: var(--qc-radius-md);
    transition: background-color var(--qc-dur-fast) var(--qc-ease-standard),
                color var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-main-nav__link:hover,
  .qc-main-nav__link:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.10); }
  .qc-main-nav__link:focus-visible { outline: none; box-shadow: var(--_nav-ring); }

  /* Dropdown caret — rotates while the panel is open */
  /* The desktop bar omits dropdown carets (removed from markup) so 11 links + brand
     + CTA stay within the container width; the hover panel + aria-expanded convey the
     dropdown. The mobile drawer keeps its own .qc-mobile-nav__chevron indicators. */
  .qc-main-nav__link[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.12); }

  /* Active / current-section state (subtle underline, not a loud pill) */
  .qc-main-nav__link[aria-current="page"],
  .qc-main-nav__link--active {
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--qc-color-secondary);
  }

  /* Secondary cluster (About / Investors / Contact) sits between nav + CTA */
  .qc-site-header__secondary { align-items: center; gap: var(--qc-space-1); }
  .qc-site-header__secondary .qc-main-nav__link { color: var(--_nav-text-muted); }
  .qc-site-header__secondary .qc-main-nav__link:hover,
  .qc-site-header__secondary .qc-main-nav__link:focus-visible { color: #fff; }
  .qc-main-nav__link--accent { color: var(--qc-color-secondary) !important; font-weight: var(--qc-fw-semibold); }
  .qc-main-nav__link--accent:hover { color: #fff !important; }

  .qc-site-header__divider { width: 1px; height: 22px; background: var(--_nav-hairline-strong); flex: none; }

  /* ==========================================================================
     3. MEGA MENU — shared panel system
     ========================================================================== */
  .qc-mega { position: static; }                 /* layout-neutral wrapper */

  .qc-mega-panel {
    /* per-panel accent (overridden by --accent-* modifiers) */
    --_acc: var(--qc-color-primary);
    --_acc-soft: color-mix(in srgb, var(--_acc) 16%, transparent);
    --_acc-line: color-mix(in srgb, var(--_acc) 45%, transparent);
    --_acc-glow: color-mix(in srgb, var(--_acc) 22%, transparent);

    position: fixed;
    z-index: var(--qc-z-fixed);                  /* sit above page content (hero sections create their own stacking contexts) */
    top: var(--qc-header-height);                /* JS sets the exact px on open */
    left: 0;                                     /* JS sets the exact px on open — anchored to the trigger, not the viewport */
    width: var(--_mega-w, 640px);                /* set per layout variant, see below */
    max-width: calc(100vw - 2 * var(--qc-container-pad));  /* safety net regardless of JS */
    max-height: min(76vh, calc(100vh - var(--qc-header-height) - var(--qc-space-4)));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    color: var(--_nav-text);
    background: var(--_nav-surface);
    background-image:
      radial-gradient(85% 70% at 0% 0%, var(--_acc-glow), transparent 60%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 120px);
    border: 1px solid var(--_nav-hairline);
    border-radius: var(--qc-radius-lg);
    box-shadow:
      0 1px 0 0 var(--_acc-line) inset,
      0 24px 48px -12px rgba(8, 14, 24, 0.45),
      0 8px 20px -8px rgba(8, 14, 24, 0.35),
      0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    /* hidden default — does NOT rely on JS */
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6px);                 /* horizontal is JS-driven `left`, never a transform */
    transition: opacity var(--qc-dur-base) var(--qc-ease-standard),
                transform var(--qc-dur-base) var(--qc-ease-emphasized),
                visibility 0s linear var(--qc-dur-base);
  }
  .qc-mega-panel.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity var(--qc-dur-base) var(--qc-ease-standard),
                transform var(--qc-dur-base) var(--qc-ease-emphasized),
                visibility 0s;
  }

  /* Soft top-corner glow anchors the panel's identity without a hard bar */
  .qc-mega-panel::before {
    content: "";
    position: absolute; top: 0; left: 0;
    width: 220px; height: 130px;
    background: radial-gradient(circle at 20% 0%, var(--_acc-glow), transparent 70%);
    border-radius: var(--qc-radius-lg) 0 0 0;
    pointer-events: none;
  }

  /* Accent modifiers — the ONLY per-section colour difference */
  .qc-mega-panel--accent-violet { --_acc: var(--qc-color-primary); }
  .qc-mega-panel--accent-green  { --_acc: var(--qc-color-accent); }
  .qc-mega-panel--accent-cyan   { --_acc: var(--qc-color-secondary); }
  .qc-mega-panel--accent-amber  { --_acc: var(--qc-color-warning); }

  /* Green/cyan/amber are too light for white CTA text at solid fill (measured
     contrast: 2.1:1 / 2.4:1 / 1.9:1 — both fail WCAG AA even for bold/large
     text). Dark navy text clears 7–8.7:1 on all three. Hover LIGHTENS toward
     white here (not darkens) since darkening a light accent toward black
     would erode the very contrast this override exists to fix. */
  .qc-mega-panel--accent-green .qc-btn--mega-primary,
  .qc-mega-panel--accent-cyan .qc-btn--mega-primary,
  .qc-mega-panel--accent-amber .qc-btn--mega-primary {
    --_qc-btn-fg: var(--qc-neutral-900);
    --_qc-btn-bg-hover: color-mix(in srgb, var(--_acc) 82%, #fff);
  }

  .qc-mega-panel__inner { position: relative; z-index: 1; padding: var(--qc-space-4) var(--qc-space-6); }

  /* --- Panel head (icon + title + blurb + optional quicklink) ------------- */
  .qc-mega-panel__head { display: flex; align-items: flex-start; gap: var(--qc-space-4); margin-bottom: var(--qc-space-3); }
  .qc-mega-panel__head-icon {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px;
    color: #fff; border-radius: var(--qc-radius-md);
    background: linear-gradient(135deg, var(--_acc), color-mix(in srgb, var(--_acc) 55%, #000));
    box-shadow: 0 6px 16px var(--_acc-soft);
  }
  .qc-mega-panel__head-icon .material-icons { font-size: 24px; }
  .qc-mega-panel__head-title { margin: 0; font-size: var(--qc-fs-xl); font-weight: var(--qc-fw-bold); color: #fff; line-height: var(--qc-lh-snug); }
  .qc-mega-panel__head-desc { margin: var(--qc-space-1) 0 0; font-size: var(--qc-fs-sm); color: var(--_nav-text-muted); line-height: var(--qc-lh-base); max-width: 60ch; }
  .qc-mega-panel__head-link {
    display: inline-flex; align-items: center; gap: var(--qc-space-1); margin-top: var(--qc-space-2);
    font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-semibold);
    color: var(--qc-color-secondary); text-decoration: none;
  }
  .qc-mega-panel__head-link .material-icons { font-size: 1.1em; transition: transform var(--qc-dur-fast) var(--qc-ease-standard); }
  .qc-mega-panel__head-link:hover { color: #fff; }
  .qc-mega-panel__head-link:hover .material-icons { transform: translateX(3px); }

  /* --- Columns ----------------------------------------------------------- */
  .qc-mega-panel__cols { display: grid; gap: var(--qc-space-5) var(--qc-space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qc-mega-panel__col { min-width: 0; display: flex; flex-direction: column; gap: var(--qc-space-3); }

  /* --rail: identity/priority column + link grid + feature rail.
     Used by panels with one clear #1 buyer path: ProTrain, Products,
     Solutions, Pricing, Service Areas. */
  .qc-mega-panel--rail { --_mega-w: 880px; }
  .qc-mega-panel--rail .qc-mega-panel__cols {
    grid-template-columns: 220px 1fr 260px;
    align-items: start;
  }
  .qc-mega-panel--rail .qc-mega-panel__cols > :nth-child(2),
  .qc-mega-panel--rail .qc-mega-panel__cols > :nth-child(3) {
    padding-inline-start: var(--qc-space-6);
    border-inline-start: 1px solid var(--_nav-hairline);
  }
  @media (max-width: 1100px) {
    .qc-mega-panel--rail { --_mega-w: min(560px, calc(100vw - 2 * var(--qc-container-pad))); }
    .qc-mega-panel--rail .qc-mega-panel__cols { grid-template-columns: 1fr; }
    .qc-mega-panel--rail .qc-mega-panel__cols > :nth-child(2),
    .qc-mega-panel--rail .qc-mega-panel__cols > :nth-child(3) {
      padding-inline-start: 0; border-inline-start: none;
      padding-top: var(--qc-space-4); border-top: 1px solid var(--_nav-hairline);
    }
  }

  /* --simple: link grid + feature rail, no identity column.
     Used by editorial/institutional panels: Client Success, Documentation,
     Expert Insights, About. */
  .qc-mega-panel--simple { --_mega-w: 720px; }
  .qc-mega-panel--simple .qc-mega-panel__cols {
    grid-template-columns: 1fr 1fr 240px;
    align-items: start;
  }
  .qc-mega-panel--simple .qc-mega-panel__cols > :nth-child(3) {
    padding-inline-start: var(--qc-space-6);
    border-inline-start: 1px solid var(--_nav-hairline);
  }
  @media (max-width: 1100px) {
    .qc-mega-panel--simple { --_mega-w: min(480px, calc(100vw - 2 * var(--qc-container-pad))); }
    .qc-mega-panel--simple .qc-mega-panel__cols { grid-template-columns: 1fr; }
    .qc-mega-panel--simple .qc-mega-panel__cols > :nth-child(3) {
      padding-inline-start: 0; border-inline-start: none;
      padding-top: var(--qc-space-4); border-top: 1px solid var(--_nav-hairline);
    }
  }

  /* --- Bespoke ProTrain path-chooser (Employer vs. Individual) ------------ */
  .qc-mega-path-chooser { display: flex; flex-direction: column; gap: var(--qc-space-2); }
  .qc-mega-path-card {
    display: flex; align-items: center; gap: var(--qc-space-3);
    padding: var(--qc-space-3); min-height: 64px;
    background: var(--_nav-surface-2);
    border: 1px solid var(--_nav-hairline);
    border-radius: var(--qc-radius-md);
    text-decoration: none; color: var(--_nav-text);
    transition: border-color var(--qc-dur-fast) var(--qc-ease-standard), background-color var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-mega-path-card:hover,
  .qc-mega-path-card:focus-visible { border-color: var(--_acc); background: rgba(255, 255, 255, 0.06); }
  .qc-mega-path-card:focus-visible { outline: none; box-shadow: var(--_nav-ring); }
  .qc-mega-path-card > .material-icons { flex: none; font-size: 22px; color: var(--_acc); }
  .qc-mega-path-card__label { display: block; font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-semibold); color: #fff; }
  .qc-mega-path-card__caption { display: block; margin-top: 1px; font-size: var(--qc-fs-xs); color: var(--_nav-text-muted); }

  /* --- Group (heading + link list) --------------------------------------- */
  .qc-mega-group { min-width: 0; }
  .qc-mega-group__title {
    margin: 0 0 var(--qc-space-2);
    font-size: var(--qc-fs-xs); font-weight: var(--qc-fw-semibold);
    letter-spacing: var(--qc-ls-wide); text-transform: uppercase;
    color: var(--_nav-text-faint);
  }
  .qc-mega-group__title::after { content: ""; display: block; width: 26px; height: 2px; margin-top: var(--qc-space-2); background: var(--_acc); border-radius: 2px; }
  .qc-mega-group__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }

  /* Compact icon + label link (the workhorse — keeps panels small) */
  .qc-mega-link {
    display: flex; align-items: center; gap: var(--qc-space-3); min-width: 0;
    padding: var(--qc-space-2) var(--qc-space-3);
    color: var(--_nav-text); text-decoration: none;
    border-radius: var(--qc-radius-md);
    transition: background-color var(--qc-dur-fast) var(--qc-ease-standard), color var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-mega-link > .material-icons { flex: none; font-size: 20px; color: var(--_acc); transition: color var(--qc-dur-fast) var(--qc-ease-standard); }
  .qc-mega-link__label { min-width: 0; font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-medium); }
  .qc-mega-link__text { min-width: 0; display: block; }
  .qc-mega-link__title { display: block; font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-semibold); color: #fff; line-height: var(--qc-lh-snug); }
  .qc-mega-link__desc { display: block; margin-top: 2px; font-size: var(--qc-fs-xs); color: var(--_nav-text-muted); line-height: var(--qc-lh-snug); }
  .qc-mega-link:hover,
  .qc-mega-link:focus-visible { background: rgba(255, 255, 255, 0.06); color: #fff; }
  .qc-mega-link:hover > .material-icons { color: #fff; }
  .qc-mega-link:focus-visible { outline: none; box-shadow: var(--_nav-ring); }
  .qc-mega-link--rich { align-items: flex-start; padding-block: var(--qc-space-3); }
  .qc-mega-link--rich > .material-icons { margin-top: 1px; }

  /* --- Featured / promo card -------------------------------------------- */
  .qc-mega-card {
    display: flex; flex-direction: column; gap: var(--qc-space-1);
    padding: var(--qc-space-3);
    background: var(--_nav-surface-2);
    border: 1px solid var(--_nav-hairline-strong);
    border-radius: var(--qc-radius-md);
    text-decoration: none; color: var(--_nav-text);
    transition: transform var(--qc-dur-base) var(--qc-ease-emphasized),
                border-color var(--qc-dur-base) var(--qc-ease-standard),
                box-shadow var(--qc-dur-base) var(--qc-ease-standard);
  }
  a.qc-mega-card:hover {
    transform: translateY(-2px);
    border-color: var(--_acc-line);
    box-shadow: 0 12px 24px -8px var(--_acc-soft), 0 4px 8px -2px rgba(8, 14, 24, 0.3);
  }
  a.qc-mega-card:focus-visible { outline: none; box-shadow: var(--_nav-ring); }
  /* Eyebrow badge: dot + uppercase label — no filled pill, no icon */
  .qc-mega-card__badge {
    align-self: flex-start; display: inline-flex; align-items: center; gap: var(--qc-space-2);
    font-size: var(--qc-fs-xs); font-weight: var(--qc-fw-semibold); text-transform: uppercase; letter-spacing: var(--qc-ls-wide);
    color: var(--_acc);
  }
  .qc-mega-card__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--_acc); flex: none; }
  /* line-clamp is a height safety net — copy is written to fit in ~2 lines at
     this card's width, but this guards against a future edit running long. */
  .qc-mega-card__title {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    margin: 0; font-size: var(--qc-fs-base); font-weight: var(--qc-fw-bold); color: #fff;
  }
  .qc-mega-card__text {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    margin: 0; font-size: var(--qc-fs-sm); color: var(--_nav-text-muted); line-height: var(--qc-lh-base);
  }
  .qc-mega-card__action { display: inline-flex; align-items: center; gap: var(--qc-space-1); margin-top: var(--qc-space-1); font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-semibold); color: var(--_acc); }
  a.qc-mega-card:hover .qc-mega-card__action { color: #fff; }
  .qc-mega-card__action .material-icons { font-size: 1.1em; transition: transform var(--qc-dur-fast) var(--qc-ease-standard); }
  a.qc-mega-card:hover .qc-mega-card__action .material-icons { transform: translateX(3px); }

  /* --- CTA footer band --------------------------------------------------- */
  .qc-mega-panel__cta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--qc-space-3) var(--qc-space-5);
    margin-top: var(--qc-space-4); padding-top: var(--qc-space-4);
    border-top: 1px solid var(--_nav-hairline);
  }
  .qc-mega-panel__cta-text { min-width: 0; margin-right: auto; }
  .qc-mega-panel__cta-text h4 { margin: 0; font-size: var(--qc-fs-base); font-weight: var(--qc-fw-semibold); color: #fff; }
  .qc-mega-panel__cta-text p { margin: 2px 0 0; font-size: var(--qc-fs-sm); color: var(--_nav-text-muted); }
  .qc-mega-panel__cta-actions { display: flex; flex-wrap: wrap; gap: var(--qc-space-3); }
  /* NOTE: CTA button foreground color inside nav surfaces is asserted in
     coexistence.css (`.qc-mega a.qc-btn` etc.) — that unlayered rule is what
     actually wins over Bootstrap's `a{color}`, so button color fixes belong
     there, not here. */

  /* --- Compact panel (Contact) — anchored to its trigger via JS
     data-mega-align="end", see navigation.js positionPanel() -------------- */
  .qc-mega-panel--compact { --_mega-w: 320px; }
  .qc-mega-panel--compact .qc-mega-panel__inner { padding: var(--qc-space-4) var(--qc-space-4); }
  .qc-mega-panel--compact .qc-mega-group__list { gap: 2px; }

  /* --- Stat strip (About panel) — stacked rows read better in the narrow
     feature rail than a cramped 3-column grid would. ---------------------- */
  .qc-mega-stats { display: flex; flex-direction: column; gap: var(--qc-space-2); }
  .qc-mega-stat {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--qc-space-2);
    padding: var(--qc-space-2) var(--qc-space-3);
    background: var(--_nav-surface-2); border: 1px solid var(--_nav-hairline); border-radius: var(--qc-radius-md);
  }
  .qc-mega-stat__value { font-size: var(--qc-fs-base); font-weight: var(--qc-fw-bold); color: #fff; }
  .qc-mega-stat__label { font-size: var(--qc-fs-xs); color: var(--_nav-text-muted); text-align: right; }

  /* --- Local-SEO chips (Service Areas panel) ----------------------------- */
  .qc-mega-chips { display: flex; flex-wrap: wrap; gap: var(--qc-space-2); }
  .qc-mega-chip {
    display: inline-flex; align-items: center; padding: var(--qc-space-1) var(--qc-space-3);
    font-size: var(--qc-fs-xs); color: var(--_nav-text); text-decoration: none;
    background: transparent; border: 1px solid var(--_nav-hairline-strong); border-radius: var(--qc-radius-pill);
    transition: background-color var(--qc-dur-fast) var(--qc-ease-standard), border-color var(--qc-dur-fast) var(--qc-ease-standard), color var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-mega-chip:hover,
  .qc-mega-chip:focus-visible { color: #fff; border-color: var(--_acc); background: var(--_acc-soft); }
  .qc-mega-chip:focus-visible { outline: none; box-shadow: var(--_nav-ring); }

  /* ==========================================================================
     4. MOBILE NAV DRAWER  (default; desktop hides it — see §6)
     ========================================================================== */
  .qc-mobile-nav__overlay {
    position: fixed; inset: 0; z-index: var(--qc-z-overlay);
    background: rgba(8, 14, 24, 0.55); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity var(--qc-dur-base) var(--qc-ease-standard), visibility 0s linear var(--qc-dur-base);
  }
  .qc-mobile-nav__overlay.is-open { opacity: 1; visibility: visible; transition: opacity var(--qc-dur-base) var(--qc-ease-standard); }

  .qc-mobile-nav {
    position: fixed; top: 0; right: 0; z-index: var(--qc-z-modal);
    display: flex; flex-direction: column;
    width: min(92vw, 400px); height: 100dvh;
    background: var(--_nav-surface); color: var(--_nav-text);
    border-left: 1px solid var(--_nav-hairline);
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform var(--qc-dur-base) var(--qc-ease-emphasized);
    visibility: hidden;
  }
  .qc-mobile-nav.is-open { transform: translateX(0); visibility: visible; }

  .qc-mobile-nav__header {
    display: flex; align-items: center; gap: var(--qc-space-3);
    padding: var(--qc-space-3) var(--qc-space-4);
    border-bottom: 1px solid var(--_nav-hairline);
  }
  .qc-mobile-nav__header img { height: 30px; width: auto; margin-right: auto; }
  .qc-mobile-nav__close {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; color: inherit; background: transparent;
    border: 1px solid var(--_nav-hairline-strong); border-radius: var(--qc-radius-md); cursor: pointer;
  }
  .qc-mobile-nav__close:hover { background: rgba(255, 255, 255, 0.08); }
  .qc-mobile-nav__close:focus-visible { outline: none; box-shadow: var(--_nav-ring); }

  .qc-mobile-nav__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--qc-space-3) var(--qc-space-3) var(--qc-space-6); }

  /* Quick-path zone — 4 priority actions shown before the accordions so the
     drawer leads with "what can I do" rather than a wall of link categories. */
  .qc-mobile-nav__quick { padding: var(--qc-space-2) var(--qc-space-2) var(--qc-space-3); }
  .qc-mobile-nav__quick-eyebrow {
    margin: 0 0 2px; padding-inline: var(--qc-space-2);
    font-size: var(--qc-fs-xs); font-weight: var(--qc-fw-semibold);
    text-transform: uppercase; letter-spacing: var(--qc-ls-wide);
    color: var(--qc-color-secondary);
  }
  .qc-mobile-nav__quick-heading {
    margin: 0 0 var(--qc-space-2); padding-inline: var(--qc-space-2);
    font-size: var(--qc-fs-base); font-weight: var(--qc-fw-semibold); color: #fff;
  }
  .qc-mobile-nav__quick-grid { display: grid; grid-template-columns: 1fr; gap: var(--qc-space-2); }
  .qc-mobile-nav__quick-card {
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--qc-space-2) var(--qc-space-3); min-height: 44px;
    background: var(--_nav-surface-2); border: 1px solid var(--_nav-hairline);
    border-radius: var(--qc-radius-md); text-decoration: none; color: var(--_nav-text);
    transition: border-color var(--qc-dur-fast) var(--qc-ease-standard), background-color var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-mobile-nav__quick-card .material-icons { font-size: 20px; color: var(--qc-color-secondary); margin-bottom: 2px; }
  .qc-mobile-nav__quick-card:hover,
  .qc-mobile-nav__quick-card:focus-visible { border-color: var(--qc-color-secondary); background: rgba(255, 255, 255, 0.06); }
  .qc-mobile-nav__quick-card:focus-visible { outline: none; box-shadow: var(--_nav-ring); }
  .qc-mobile-nav__quick-card-title { font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-semibold); color: #fff; }
  .qc-mobile-nav__quick-card-desc { font-size: var(--qc-fs-xs); color: var(--_nav-text-muted); line-height: var(--qc-lh-snug); }

  /* Contextual prompt rows (e.g. inline "Use ProTrain" nudges near related
     accordions) — a single muted line, not a full card. */
  .qc-mobile-nav__prompt { padding: var(--qc-space-2) var(--qc-space-4); font-size: var(--qc-fs-xs); color: var(--_nav-text-muted); }
  .qc-mobile-nav__prompt a { color: var(--qc-color-secondary); font-weight: var(--qc-fw-semibold); text-decoration: none; }

  /* Top-level row (link or accordion trigger) */
  .qc-mobile-nav__link,
  .qc-mobile-nav__toggle {
    display: flex; align-items: center; gap: var(--qc-space-3); width: 100%;
    min-height: 52px; padding: var(--qc-space-3) var(--qc-space-4);
    font-size: var(--qc-fs-base); font-weight: var(--qc-fw-medium); text-align: left;
    color: var(--_nav-text); text-decoration: none;
    background: transparent; border: none; border-radius: var(--qc-radius-md); cursor: pointer;
  }
  .qc-mobile-nav__toggle { justify-content: space-between; }
  .qc-mobile-nav__toggle-label { display: inline-flex; align-items: center; gap: var(--qc-space-3); min-width: 0; }
  .qc-mobile-nav__link:hover,
  .qc-mobile-nav__toggle:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
  .qc-mobile-nav__link:focus-visible,
  .qc-mobile-nav__toggle:focus-visible { outline: none; box-shadow: var(--_nav-ring); }
  .qc-mobile-nav__link > .material-icons,
  .qc-mobile-nav__toggle-label > .material-icons { font-size: 22px; color: var(--qc-color-secondary); flex: none; }
  .qc-mobile-nav__chevron { transition: transform var(--qc-dur-base) var(--qc-ease-standard); color: var(--_nav-text-muted); }
  .qc-mobile-nav__toggle[aria-expanded="true"] { color: #fff; }
  .qc-mobile-nav__toggle[aria-expanded="true"] .qc-mobile-nav__chevron { transform: rotate(180deg); }

  /* Collapsible section body */
  .qc-mobile-nav__panel { padding: 2px 0 var(--qc-space-2) calc(22px + var(--qc-space-3) + var(--qc-space-4)); }
  .qc-mobile-nav__panel[hidden] { display: none; }
  .qc-mobile-nav__sublink {
    display: block; min-height: 44px; padding: var(--qc-space-2) var(--qc-space-3);
    font-size: var(--qc-fs-sm); color: var(--_nav-text-muted); text-decoration: none; border-radius: var(--qc-radius-sm);
  }
  .qc-mobile-nav__sublink:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
  .qc-mobile-nav__sublink:focus-visible { outline: none; box-shadow: var(--_nav-ring); }
  .qc-mobile-nav__subhead { margin: var(--qc-space-3) 0 var(--qc-space-1); font-size: var(--qc-fs-xs); font-weight: var(--qc-fw-semibold); text-transform: uppercase; letter-spacing: var(--qc-ls-wide); color: var(--_nav-text-faint); }
  .qc-mobile-nav__divider { height: 1px; margin: var(--qc-space-3) var(--qc-space-2); background: var(--_nav-hairline); border: 0; }

  /* Pinned footer (phone + primary CTA) */
  .qc-mobile-nav__footer { padding: var(--qc-space-4); border-top: 1px solid var(--_nav-hairline); display: flex; flex-direction: column; gap: var(--qc-space-3); }
  .qc-mobile-nav__phone {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--qc-space-2);
    min-height: 44px; font-weight: var(--qc-fw-semibold); color: #fff; text-decoration: none;
  }
  .qc-mobile-nav__phone .material-icons { color: var(--qc-color-secondary); }

  /* Lock the page behind the open drawer */
  body.qc-nav-scroll-lock { overflow: hidden; }

  /* ==========================================================================
     4b. TABLET BAND — richer drawer between phone and the full desktop bar
     -----------------------------------------------------------------------------
     768px matches --qc-bp-md (tokens.css) — the same "tablet" boundary already
     used elsewhere in the design system. No explicit upper bound is needed here:
     this band stops applying once the 1300px query below hides the drawer
     entirely and hands off to the desktop bar.
     ========================================================================== */
  @media (min-width: 768px) {
    /* Widen the drawer and dock it as a fuller side panel rather than a
       narrow phone sheet. */
    .qc-mobile-nav { width: min(70vw, 560px); }

    /* Quick-path cards (see .qc-mobile-nav__quick-*) go 2-up at this width
       instead of stacking. */
    .qc-mobile-nav__quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Accordion body content reflows to 2 columns so a long list (Solutions'
       3 subhead groups, Service Areas' CA/GA/local-services groups) doesn't
       scroll as one tall single column. */
    .qc-mobile-nav__panel {
      padding-left: var(--qc-space-4);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--qc-space-5);
    }

    /* Subheads and the trailing divider / "view all" row must span both
       columns, or CSS Grid's auto-placement will drop a subhead into column 2
       mid-list and visually detach it from the links it's supposed to head. */
    .qc-mobile-nav__subhead,
    .qc-mobile-nav__panel > hr.qc-mobile-nav__divider,
    .qc-mobile-nav__panel > a.qc-mobile-nav__sublink:last-child {
      grid-column: 1 / -1;
    }

    /* Footer CTA row goes side-by-side instead of stacked full-width buttons. */
    .qc-mobile-nav__footer { flex-direction: row; flex-wrap: wrap; }
    .qc-mobile-nav__footer .qc-btn--block { width: auto; flex: 1 1 auto; }
  }

  /* ==========================================================================
     5. RESPONSIVE — show desktop chrome / hide drawer once it fits
     -----------------------------------------------------------------------------
     Breakpoint tuned so the full bar never wraps. Below it, only the brand +
     CTA + hamburger show; the drawer carries everything. @media needs a literal
     px (cannot read var()).
     ========================================================================== */
  /* Show the full desktop bar only once all 11 links + brand + CTA genuinely fit
     (the compact, caret-free bar's intrinsic width is ~1200px). Below this the
     drawer takes over, so the bar never overflows / wraps. @media needs a literal px. */
  @media (min-width: 1300px) {
    .qc-site-header__primary { display: flex; }
    .qc-site-header__secondary { display: flex; }
    .qc-nav-toggle { display: none; }
    .qc-mobile-nav, .qc-mobile-nav__overlay { display: none; }
  }
  /* A touch more breathing room once the container hits its max width. */
  @media (min-width: 1500px) {
    .qc-main-nav { gap: 2px; }
    .qc-main-nav__link { padding-inline: var(--qc-space-2); }
  }

  /* Mega columns reflow to a single stacked column on the narrow desktop band
     — handled per layout variant (see .qc-mega-panel--rail/--simple above),
     since the new asymmetric column widths don't reflow cleanly to a generic
     2-column rule. */

  /* ==========================================================================
     6. MOTION / A11Y PREFERENCES
     ========================================================================== */
  @media (prefers-reduced-motion: reduce) {
    .qc-mega-panel, .qc-mega-panel.is-open,
    .qc-mobile-nav, .qc-mobile-nav__overlay,
    .qc-main-nav__caret, .qc-mobile-nav__chevron,
    a.qc-mega-card, .qc-mega-link, .qc-site-header .qc-nav-cta,
    .qc-mobile-nav__quick-card, .qc-btn--mega-primary, .qc-mega-path-card { transition: none; }
  }
}