/* V2.1 navigation: compact frosted pill, bottom centre, expanding in place into section panels.
   Self-contained: every rule is scoped to .nv / .nv-masthead / .nv-spacer. Reads the V2.1 token
   contract (assets/v21.css: --ink, --ink-2, --c-accent, --glass-*, --font-display, --tint-*) with
   fallbacks. Bottom space comes from the .nv-spacer element after the footer (not body padding). */
:root {
  --nv-ink: var(--ink, #0B0B0C);
  --nv-ink-2: var(--ink-2, #3A3C41);
  --nv-accent: var(--c-accent, var(--slate, #355C8A));
  --nv-glass: rgba(255, 255, 255, .82);          /* a touch stronger than --glass-bg-strong: the bar sits over any content */
  --nv-glass-solid: var(--glass-solid, #F7F7F6);  /* no backdrop-filter / reduced transparency */
  --nv-glass-line: var(--glass-edge, rgba(11, 11, 12, .10));
  --nv-glass-hi: var(--glass-border, rgba(255, 255, 255, .75));
  --nv-blur: var(--glass-blur, 18px);
  --nv-saturate: var(--glass-saturate, 160%);
  --nv-hover: rgba(11, 11, 12, .06);
  --nv-shadow: 0 1px 1px rgba(11, 11, 12, .04), 0 28px 56px -28px rgba(11, 11, 12, .45), 0 6px 18px -10px rgba(11, 11, 12, .2);
  --nv-font: var(--font-display, 'Inter Tight', 'Helvetica Neue', Arial, system-ui, sans-serif);
  --nv-gap: 14px;                 /* distance from the bottom edge */
  --nv-h: 60px;                   /* pill height at top level; nav-v21.js measures the real value */
  --nv-dur: .48s;
  --nv-ease: cubic-bezier(.2, .9, .25, 1);
  --nv-bottom: calc(var(--nv-gap) + env(safe-area-inset-bottom, 0px));
  --nv-space: calc(var(--nv-h) + var(--nv-gap) + 14px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 720px) { :root { --nv-h: 116px; --nv-gap: 10px; } }

/* ---------- spacer after the footer: keeps the footer's last links above the bar.
   Give it the footer colour with --nv-spacer-bg (V2.1: var(--ink)). */
.nv-spacer { display: block; height: var(--nv-space); background: var(--nv-spacer-bg, transparent); }

/* ---------- top brand mark (static, never overlaps content) */
.nv-masthead { display: flex; align-items: center; padding: 18px var(--gutter, 20px) 6px; }
.nv-brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--nv-ink); text-decoration: none; border-radius: 10px; }
.nv-brand .amp { color: var(--nv-accent); }
.nv-brand:focus-visible { outline: 3px solid var(--nv-accent); outline-offset: 4px; }

/* ---------- placement: full-width fixed rail that ignores pointer events; only the pill is interactive */
.nv {
  position: fixed; z-index: 80; left: 0; right: 0; bottom: var(--nv-bottom);
  display: flex; justify-content: center;
  padding: 0 max(12px, env(safe-area-inset-left, 0px)) 0 max(12px, env(safe-area-inset-right, 0px));
  pointer-events: none;
  font-family: var(--nv-font); color: var(--nv-ink);
  -webkit-font-smoothing: antialiased;
}
.nv *, .nv *::before, .nv *::after { box-sizing: border-box; }
.nv ul { list-style: none; margin: 0; padding: 0; }
.nv a { text-decoration: none; color: inherit; }
.nv button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; }
.nv [hidden] { display: none !important; }

/* ---------- the glass pill */
.nv-pill {
  position: relative; pointer-events: auto;
  max-width: 100%;
  border-radius: 30px;
  background: var(--nv-glass-solid);
  border: 1px solid var(--nv-glass-line);
  box-shadow: inset 0 1px 0 var(--nv-glass-hi), var(--nv-shadow);
  overflow: hidden; isolation: isolate;
  transition: border-radius var(--nv-dur) var(--nv-ease);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nv-pill {
    background: var(--nv-glass);
    -webkit-backdrop-filter: blur(var(--nv-blur)) saturate(var(--nv-saturate));
    backdrop-filter: blur(var(--nv-blur)) saturate(var(--nv-saturate));
  }
}
@media (prefers-reduced-transparency: reduce) {
  .nv-pill { background: var(--nv-glass-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* soft top highlight, the "glass edge" */
.nv-pill::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%);
}
/* column flex anchored to the bottom: while the size animates, the new view stays centred and
   any overflow is clipped at the top, so the panel appears to open upward out of the bar */
.nv-pill { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.nv-pill > .nv-root, .nv-pill > .nv-panel { flex: none; align-self: stretch; }
.nv-pill.is-sizing > .nv-root, .nv-pill.is-sizing > .nv-panel { align-self: center; }
.nv-pill.is-open { border-radius: 26px; }
.nv-pill.is-sizing { transition: width var(--nv-dur) var(--nv-ease), height var(--nv-dur) var(--nv-ease), border-radius var(--nv-dur) var(--nv-ease); }

.nv :focus-visible { outline: 3px solid var(--nv-accent); outline-offset: 2px; }

/* ---------- top level */
.nv-root { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px; }
.nv-items { display: flex; align-items: center; gap: 2px; }
.nv-top {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 16px; border-radius: 999px;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
  transition: background-color .2s;
}
.nv-top:hover { background: var(--nv-hover); }
.nv-chev { width: 14px; height: 14px; opacity: .7; transition: transform .25s var(--nv-ease); }
.nv-top-btn:hover .nv-chev { transform: translateY(-2px); }
/* current section: a slate dot above the label, plus weight */
.nv-item.is-current .nv-top { font-weight: 800; }
.nv-item.is-current .nv-top::after {
  content: ''; position: absolute; left: 50%; top: 5px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--nv-accent);
}
.nv-actions { display: flex; align-items: center; gap: 6px; padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--nv-glass-line); }
.nv-context {
  display: inline-flex; align-items: center; gap: 7px; min-height: 46px; max-width: 290px; padding: 0 14px;
  border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--nv-ink);
  box-shadow: inset 0 0 0 1px var(--nv-glass-line); transition: background-color .2s, box-shadow .2s;
}
.nv-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-context .nv-go { flex: none; width: 15px; height: 15px; color: var(--nv-accent); }
.nv-context:hover { background: var(--nv-hover); box-shadow: inset 0 0 0 1px var(--nv-accent); }
.nv-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px;
  border-radius: 999px; background: var(--nv-ink); color: var(--on-dark, #fff) !important;
  font-size: 15px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; transition: background-color .2s, transform .2s;
}
.nv-cta:hover { background: var(--nv-accent); }
.nv-cta:active { transform: translateY(1px); }

/* ---------- panels (open upward: the pill is anchored to the bottom, so extra height grows up) */
.nv-panel { display: flex; flex-direction: column; max-height: calc(100dvh - var(--nv-bottom) - 24px); }
@supports not (height: 100dvh) { .nv-panel { max-height: calc(100vh - var(--nv-bottom) - 24px); } }
.nv-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 4px; }
.nv-panel-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px; border-top: 1px solid var(--nv-glass-line); }
.nv-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px 0 12px;
  border-radius: 999px; font-size: 15px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--nv-glass-line);
  transition: background-color .2s;
}
.nv-back:hover { background: var(--nv-hover); }
.nv-back-ico { width: 18px; height: 18px; }
.nv-panel-title { margin: 0 6px 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--nv-ink-2); }
.nv-panel-index { margin-left: auto; display: inline-flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 650; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: rgba(17,17,17,.3) !important; }
.nv-panel-index:hover { background: var(--nv-hover); }

/* list items: icon + title + short description */
.nv-grid-list { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 2px 6px; }
.nv-n7.nv-grid-list { grid-template-columns: repeat(3, minmax(0, 296px)); }
.nv-link { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 11px 12px; border-radius: 16px; transition: background-color .2s; }
.nv-link:hover { background: var(--nv-hover); }
.nv-link-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px var(--nv-glass-line); color: var(--nv-ink); transition: color .2s, box-shadow .2s; }
.nv-ico { width: 21px; height: 21px; }
.nv-link:hover .nv-link-ico { color: var(--nv-accent); box-shadow: inset 0 0 0 1px var(--nv-accent); }
.nv-link-body { display: grid; gap: 2px; min-width: 0; }
.nv-link-title { font-size: 15px; font-weight: 750; letter-spacing: -.01em; line-height: 1.25; }
.nv-link-text { font-size: 13px; line-height: 1.4; color: var(--nv-ink-2); }
.nv-link[aria-current] .nv-link-title { text-decoration: underline; text-decoration-color: var(--nv-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* industry tiles: pastel glass, no coloured strips */
.nv-grid-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 196px)); gap: 8px; padding-bottom: 6px; }
.nv-grid-tiles > li { display: flex; }
.nv-tile { flex: 1 1 auto; }
.nv-tile {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 16px 16px 44px;
  border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.1)), var(--nv-tint);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(17,17,17,.07);
  transition: transform .25s var(--nv-ease), box-shadow .25s;
}
.nv-tile:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1.5px var(--nv-accent); }
.nv-tile-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--nv-ink-2); }
.nv-tile-title { font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.nv-tile-text { font-size: 13px; line-height: 1.4; color: var(--nv-ink-2); }
.nv-tile-go { position: absolute; left: 16px; bottom: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--nv-ink); color: #fff; }
.nv-tile-go .nv-go { width: 14px; height: 14px; }
.nv-tile[aria-current] { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 2px var(--nv-ink); }

/* content swap: incoming view fades and lifts slightly */
.nv-pill.is-sizing .nv-panel:not([hidden]), .nv-pill.is-sizing .nv-root { animation: nv-in calc(var(--nv-dur) * .8) var(--nv-ease) both; }
@keyframes nv-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- mobile: full-width thumb bar, two rows at top level, one-column panels */
@media (max-width: 720px) {
  .nv-pill { width: 100%; border-radius: 24px; }
  .nv-root { flex-wrap: wrap; gap: 4px; padding: 5px; }
  .nv-items { flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nv-top { width: 100%; min-height: 48px; padding: 0 2px; font-size: 14px; letter-spacing: -.02em; }
  .nv-chev { display: none; }
  .nv-actions { flex: 1 1 100%; padding: 0; margin: 0; border: 0; gap: 4px; }
  .nv-context { flex: 1 1 auto; min-width: 0; max-width: none; min-height: 48px; font-size: 13.5px; }
  .nv-cta { flex: none; min-height: 48px; padding: 0 18px; }
  .nv-actions .nv-cta:only-child { flex: 1 1 auto; }
  .nv-grid-list, .nv-n7.nv-grid-list { grid-template-columns: minmax(0, 1fr); }
  .nv-grid-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-tile { min-height: 132px; padding: 14px 14px 42px; }
  .nv-tile-title { font-size: 19px; }
  .nv-tile-text { display: none; }
  .nv-panel-bar { flex-wrap: wrap; }
  .nv-back { min-height: 48px; }
  .nv-panel-title { display: none; }
  .nv-panel-index { min-height: 48px; }
  .nv-cta-panel { display: none; }
}
@media (max-width: 360px) { .nv-top { font-size: 13px; } }

/* ---------- reduced motion: instant swap, no size animation */
@media (prefers-reduced-motion: reduce) {
  .nv-pill, .nv-pill.is-sizing, .nv-top, .nv-tile, .nv-chev, .nv-cta { transition: none !important; }
  .nv-pill .nv-panel, .nv-pill .nv-root { animation: none !important; }
}

/* other fixed-bottom UI on the site sits above the bar */
.picker-mini:not([hidden]) { bottom: calc(var(--nv-space) + 4px) !important; }

@media print { .nv, .nv-spacer { display: none !important; } }

/* ---------- V2.1 nav fit (2:03 PM, ported from V2.2B): the pill always fits the viewport minus safe areas (via .nv
   padding + max-width: 100%) and the CTA never shrinks or clips. The context link ellipsizes first, then hides
   (721–900px, where the desktop row is tightest). */
.nv-root, .nv-actions { min-width: 0; }
.nv-context { min-width: 0; flex: 0 1 auto; }
@media (max-width: 720px) { .nv-context { flex: 1 1 auto; } } /* phones: context fills the second row, CTA stays at its end */
.nv-context span { min-width: 0; }
.nv-actions > .nv-cta { flex: none; }
@media (min-width: 721px) and (max-width: 900px) { .nv-context { display: none; } }