/* =============================================================================
   NAVIGATION V2 + FOOTER V2 (September 2026)
   Loaded only while Navigation V2 / Footer V2 mode is Preview or Live.
   Theme rem base = 10px. Brand tokens:
     blue #2C3CBB  green #8FFF3E  warm #3A352E  muted #5D564B  black #000
     oatmeal #E7E4DF  line-strong #B6ADA0  neutral-50 #F6F6F6
   Type (deck slides 22/28): eyebrow + column headings = Ballinger Mono;
     panel title = Proxima Nova Wide; links/body = Ballinger.
   ============================================================================= */

:root {
  --nv2-blue: #2C3CBB;
  --nv2-blue-hover: rgba(44, 60, 187, .06);
  --nv2-green: #8FFF3E;
  --nv2-warm: #3A352E;
  --nv2-muted: #5D564B;
  --nv2-line: #E7E4DF;
  --nv2-line-strong: #B6ADA0;
  --nv2-soft: #F6F6F6;
  --nv2-focus: #586AF2;
  --nv2-radius: 2.2rem;
}

/* ---------------------------------------------------------------------------
   HEADER BAR (visually identical to today; only the item list changed)
   --------------------------------------------------------------------------- */
body.nav-v2 header { position: fixed; top: 0; left: 0; width: 100%; z-index: 90; }
/* Page elements that carry their own z-index (the sticky A-Z bar on the SDS index page is z-index 100) sat on
   top of an open panel because the theme's header is z-index 90. While a menu is open, lift the whole header. */
body.navv2-panel-open header, body.navv2-open header { z-index: 1000; }
/* .site-main-nav must NOT be positioned: the panel's containing block is <header>, so panels
   span the full viewport width (prototype: up to 1760px) instead of the 1140px page frame. */

.navv2 { display: flex; align-items: center; margin-left: auto; }
.navv2-bar { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0; }
.navv2-item { position: static; display: flex; align-items: center; margin: 0; padding: 0; }
.navv2-item--cta { margin-left: 1.6rem; }

.navv2 .navv2-root {
  display: flex; align-items: center; gap: .6rem;
  font-family: "ballinger-mono", sans-serif !important;
  font-size: 1.4rem !important; font-weight: 500; line-height: 1;
  text-transform: uppercase; letter-spacing: 0; white-space: nowrap;
  color: #fff; text-decoration: none; text-underline-offset: 3px;
  padding: 1.4rem 0; margin-right: 2.4rem;
}
@media (min-width: 1440px) { .navv2 .navv2-root { margin-right: 3.2rem; } }
.navv2 .navv2-root:hover, .navv2-item.is-open .navv2-root { text-decoration: underline; }
.navv2-chev { flex: 0 0 auto; transition: transform .2s ease; color: currentColor; box-sizing: content-box; padding: .8rem .6rem; margin: -.8rem -.6rem; } /* padding+negative margin = bigger click target, same layout */
.navv2-item.is-open .navv2-chev { transform: rotate(180deg); }
.navv2 .navv2-demo { margin: 0 !important; white-space: nowrap; }

/* Hero-page header states (mirrors the theme's a.root-link rules) */
body.hero-light .navv2 .navv2-root, body.hero-white .navv2 .navv2-root { color: #000; }
body.navv2-panel-open .navv2 .navv2-root, body.dropdown-active .navv2 .navv2-root, body.active-body-scroll .navv2 .navv2-root { color: #fff !important; }

/* Hamburger (display toggled by the CMS breakpoint in header-v2.php) */
.navv2-trigger { display: none; align-items: center; margin-left: auto; }
/* The theme styles every <button> as a 48px pill (plus 18px bottom margin under 700px), which made this
   hamburger 66px tall and the mobile bar 98px instead of the live site's 80px. Reset it hard. */
body.nav-v2 .navv2-trigger button.navv2-trigger-btn, body.nav-v2 .navv2-trigger button.navv2-trigger-btn:hover {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  margin: 0 !important; padding: .8rem !important; min-height: 0 !important; height: auto !important; width: auto !important;
  display: flex !important; align-items: center !important; justify-content: center !important; transition: none !important; cursor: pointer;
}
.navv2-trigger-btn svg path { fill: #fff; }
body.hero-light .navv2-trigger-btn svg path, body.hero-white .navv2-trigger-btn svg path { fill: #000; }
body.hero-has-bg-image .navv2-trigger-btn svg path, body.navv2-panel-open .navv2-trigger-btn svg path, body.navv2-open .navv2-trigger-btn svg path, body.dropdown-active .navv2-trigger-btn svg path { fill: #fff; }
body.nav-v2 .navv2-trigger ~ .navv2 { margin-left: 0; }

/* Open-state header paint. The theme's body.dropdown-active is deliberately NOT used: it un-hides
   the blue utility bar while scrolled (theme hides it via body.active-scroll:not(.dropdown-active)).
   So the header is painted for our own open class instead, mirroring the theme's dropdown-active rules. */
body.navv2-panel-open header { background-color: #000 !important; }
body.navv2-panel-open header div#logo svg path { fill: #8FFF3E !important; }
/* Scrolled = no utility bar, whether or not a panel is open (belt and braces). */
body.nav-v2.active-scroll .util-nav { display: none !important; }

/* ---------------------------------------------------------------------------
   MEGA PANEL (desktop)
   --------------------------------------------------------------------------- */
.navv2-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: -1.6rem; padding: 2.4rem 2.4rem 2.4rem;   /* negative margin + padding = the visual gap under the header */
  display: none; z-index: 95;
  text-align: left; color: #000;                       /* the header's .center utility would otherwise center everything */
  /* The transparent wrapper spans the whole header width and overlaps the bottom of the bar, so it used to
     "catch" the pointer (even over the logo) and keep the panel open. Only the card itself is hoverable now;
     the 8px gap between the label and the card is covered by the close grace period in nav-v2.js. */
  pointer-events: none;
}
.navv2-item.is-open .navv2-panel { display: block; }
.navv2-panel-inner {
  pointer-events: auto;
  max-width: 1760px; margin: 0 auto;
  background: #fff; color: #000;
  border: 1.5px solid var(--nv2-line-strong); border-radius: var(--nv2-radius);
  box-shadow: 0 12px 35px rgba(31, 28, 24, .10);
  max-height: calc(100vh - 16rem); overflow-y: auto; overflow-x: hidden;
}
.navv2-panel-body { padding: 3rem 4.8rem 2rem; }
.navv2-panel-header { margin-bottom: 2.4rem; }
.navv2-eyebrow { /* = theme .overline */
  margin: 0 0 1rem; color: var(--nv2-blue);
  font-family: "ballinger-mono", sans-serif; font-size: 1.4rem; font-weight: 500; line-height: 2rem;
  letter-spacing: var(--Typography-Misc-Overline-Tracking, 1.5px); text-transform: uppercase;
}
.navv2-title { /* = theme H5 */
  margin: 0; color: var(--nv2-warm);
  font-family: "proxima-nova-wide", sans-serif; font-size: 2.8rem; font-weight: 600; line-height: 3.4rem;
  letter-spacing: -.1rem; text-transform: uppercase;
}
.navv2-intro { margin: 1.2rem 0 0; color: var(--nv2-muted); font-family: "ballinger", sans-serif; font-size: 1.6rem; line-height: 1.4; }

.navv2-grid { display: flex; align-items: stretch; gap: 0; } /* stretch = column dividers all equal to the tallest column */
.navv2-col { flex: 1 1 0; min-width: 0; padding: 0 2.8rem; }
.navv2-col:first-child { padding-left: 0; }
.navv2-col + .navv2-col { border-left: 1px solid var(--nv2-line); }
.navv2-col.is-wide { flex: 2 1 0; }
.navv2-grid > .navv2-col:last-child { padding-right: 0; }
.navv2-promo-wrap { flex: 0 0 30rem; padding-left: 2.8rem; border-left: 1px solid var(--nv2-line); }

.navv2-col-heading {
  margin: 0 0 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--nv2-line-strong); /* QA 09-30: gray underline under every column heading */
  color: var(--nv2-muted);
  font-family: "ballinger-mono", sans-serif; font-size: 1.3rem; font-weight: 500; line-height: 1.2;
  letter-spacing: .06em; text-transform: uppercase;
}
.navv2-links { display: flex; flex-direction: column; gap: .2rem; }
.layout-grid .navv2-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 2.4rem; }

/* Link item: title (+ optional description) with a persistent arrow */
.navv2-link {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.2rem; align-items: start;
  margin: 0 -1rem; padding: .8rem 1rem .8rem 1.3rem; border-radius: 1.1rem;
  color: #000; text-decoration: none;
  transition: background-color .16s ease, transform .16s ease;
}
.navv2-link:hover, .navv2-link:focus-visible { background: var(--nv2-blue-hover); transform: translateX(2px); }
.navv2-link-copy { display: block; min-width: 0; }
.navv2-link-title {
  display: block; font-family: "ballinger", sans-serif; font-size: 1.6rem; font-weight: 500; line-height: 1.2; color: #000;
  transition: color .16s ease;
}
.navv2-link:hover .navv2-link-title, .navv2-link:focus-visible .navv2-link-title { color: var(--nv2-blue); }
/* "Call out the first column" (CMS toggle per panel, Gray-Text mockup): titles in every column after the
   first turn dark grey so the left column reads as the primary list. Descriptions and hover stay the same. */
.navv2-grid.has-callout .navv2-col:not(:first-child) .navv2-link-title,
.navv2-grid.has-callout .navv2-col:not(:first-child) .navv2-info-title { color: var(--nv2-warm); } /* linked rows and unlinked highlight rows alike */
.navv2-grid.has-callout .navv2-col:not(:first-child) .navv2-link:hover .navv2-link-title,
.navv2-grid.has-callout .navv2-col:not(:first-child) .navv2-link:focus-visible .navv2-link-title { color: var(--nv2-blue); }
.navv2-link-desc { display: block; margin-top: .3rem; color: var(--nv2-muted); font-family: "ballinger", sans-serif; font-size: 1.3rem; font-weight: 400; line-height: 1.3; }
/* Arrows are the site's own arrow icon (short tail, bolder), QA 09-30; rendered by vehs_navv2_arrow() as an inline SVG. */
.navv2-arrow { display: inline-block; flex: 0 0 auto; width: 1.4rem; height: 1.4rem; color: var(--nv2-blue); fill: currentColor; vertical-align: middle; margin-top: .3rem; opacity: .9; transition: transform .16s ease, opacity .16s ease; }
.navv2-link:hover .navv2-arrow, .navv2-link:focus-visible .navv2-arrow { transform: translateX(4px); opacity: 1; }
/* Current page: no shading (design decision), just aria-current for assistive tech */
.navv2-link[aria-current="page"] { background: transparent; }

.navv2-badge {
  display: inline-block; vertical-align: middle; margin-right: .8rem; padding: .2rem .8rem;
  background: var(--nv2-blue); color: #fff; border-radius: 99rem;
  font-family: "ballinger-mono", sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4;
}

/* Non-clickable highlight (e.g. Platform Highlights): icon + copy, no hover, no arrow */
.navv2-info { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 1.2rem; align-items: start; padding: .8rem 0; cursor: default; }
.navv2-info-icon { width: 2.8rem; height: 2.8rem; margin-top: .1rem; color: var(--nv2-blue); display: flex; align-items: center; justify-content: center; }
.navv2-info-icon svg { width: 2.8rem; height: 2.8rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.navv2-info-title { font-family: "ballinger", sans-serif; font-size: 1.6rem; font-weight: 500; line-height: 1.2; color: #000; }
.navv2-info-desc { margin-top: .3rem; color: var(--nv2-muted); font-family: "ballinger", sans-serif; font-size: 1.3rem; line-height: 1.3; }
.navv2-info:only-child { grid-column: 1 / -1; }

/* Promo card */
.navv2-promo { display: block; border-radius: 0; overflow: hidden; background: var(--nv2-blue); color: #fff; text-decoration: none; }
.navv2-promo.is-clickable { box-shadow: 0 8px 22px rgba(44, 60, 187, .16); transition: transform .18s ease, box-shadow .18s ease; }
.navv2-promo.is-clickable:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(44, 60, 187, .24); }
.navv2-promo-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1D2022; border-bottom: 1px solid var(--nv2-green); } /* 320x180 (16:9) + 1px green divider */
.navv2-promo-media.is-placeholder { background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.30)), linear-gradient(120deg, #444A4D 0%, #1D2022 52%, #697176 100%); }
.navv2-promo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.navv2-promo-badge {
  position: absolute; top: 1.4rem; left: 1.8rem; z-index: 2; padding: .4rem 1.4rem; border-radius: 99rem;
  background: var(--nv2-green); color: #19210E;
  font-family: "ballinger-mono", sans-serif; font-size: 1.2rem; font-weight: 500; text-transform: uppercase; line-height: 1.2;
}
.navv2-promo-body { padding: 1.8rem 1.8rem 2rem; }
.navv2-promo-eyebrow {
  margin: 0; color: var(--nv2-green);
  font-family: "ballinger-mono", sans-serif; font-size: 1.2rem; font-weight: 500; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase;
}
.navv2-promo-title { margin: .8rem 0 0; color: #fff; font-family: "proxima-nova-wide", sans-serif; font-size: 1.75rem; font-weight: 600; line-height: 1.15; text-transform: uppercase; }
.navv2-promo-copy { margin: .8rem 0 0; color: #fff; font-family: "ballinger", sans-serif; font-size: 1.4rem; line-height: 1.35; font-weight: 400; }
.navv2-promo-cta {
  display: flex; align-items: center; gap: .7rem; margin-top: 1.4rem; color: var(--nv2-green); text-decoration: none;
  font-family: "ballinger-mono", sans-serif; font-size: 1.3rem; font-weight: 500; line-height: 1.2; text-transform: uppercase;
}
.navv2-promo-cta .navv2-arrow { color: var(--nv2-green); margin-top: 0; }
.navv2-promo:hover .navv2-promo-cta .navv2-arrow, .navv2-promo-cta:hover .navv2-arrow { transform: translateX(5px); }
.navv2-promo--quote { min-height: 0; padding: 2rem 2rem 1.8rem; }
.navv2-promo--quote .navv2-promo-eyebrow { margin-bottom: 1.6rem; }
.navv2-quote-mark { font-family: "proxima-nova-wide", sans-serif; font-size: 5.6rem; line-height: .5; font-weight: 600; margin-bottom: -.8rem; } /* QA 09-30: bigger mark; the glyph sits high in its box, so pull the headline up under it */
.navv2-promo--quote .navv2-promo-title { margin-top: 0; }
.navv2-quote-attrib { margin-top: 1.8rem; font-family: "ballinger", sans-serif; font-size: 1.3rem; line-height: 1.35; font-weight: 700; text-transform: uppercase; }
.navv2-quote-role { color: var(--nv2-green); font-family: "ballinger-mono", sans-serif; font-weight: 500; text-transform: uppercase; }

/* Panel utility footer (prototype: blue links) */
.navv2-panel-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 3rem; min-height: 6rem;
  padding: 1.2rem 4.8rem; background: var(--nv2-line); border-top: 1px solid #D9D3CA;
  position: sticky; bottom: 0; z-index: 1;   /* if a very short screen still overflows, the footer stays in view */
}
.navv2-panel-footer-links { display: flex; align-items: center; gap: 3.4rem; flex-wrap: wrap; }
.navv2-footer-link {
  display: inline-flex; align-items: center; gap: .8rem; color: var(--nv2-blue); text-decoration: none; border-radius: .6rem;
  font-family: "ballinger", sans-serif; font-size: 1.6rem; font-weight: 700;
}
.navv2-footer-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.navv2-footer-link .navv2-arrow { margin-top: 0; }
.navv2-footer-link:hover .navv2-arrow { transform: translateX(5px); }
.navv2-footer-copy { margin: 0; margin-left: auto; color: var(--nv2-warm); text-align: right; font-family: "ballinger", sans-serif; font-size: 1.5rem; line-height: 1.35; }
.navv2-footer-copy strong { font-weight: 700; }
.navv2-footer-copy .navv2-badge { margin-right: 1rem; }

.navv2 a:focus-visible, .navv2-drawer a:focus-visible, .navv2-drawer button:focus-visible { outline: 3px solid var(--nv2-focus); outline-offset: 3px; }

/* Tighter panel at laptop widths */
@media (max-width: 1360px) {
  .navv2-panel-body { padding: 2.8rem 3.2rem 1.8rem; }
  .navv2-col { padding: 0 2.4rem; }
  .navv2-promo-wrap { flex-basis: 28rem; padding-left: 2.4rem; }
  .navv2-panel-footer { padding: 1.2rem 3.2rem; }
}

/* ---------------------------------------------------------------------------
   MOBILE DRAWER (V6 "crisp white" prototype, 2026-09-29). Shown at/below the CMS
   breakpoint (header-v2.php). A full-height white panel slides in from the right:
   black head (green logo, search, close), inline search, one accordion per section
   (only one open at a time) with collapsible groups inside (one open per section),
   then a black footer with the demo CTA and utility rows. Every <button> is reset
   first because the theme styles all buttons as pill CTAs. Above 640px the panel is
   a 48rem sheet over a dimmed page instead of full screen.
   --------------------------------------------------------------------------- */
body.navv2-open { overflow: hidden; }
.navv2-backdrop {
  position: fixed; inset: 0; z-index: 9998; background: rgba(17, 18, 22, .45);
  opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility 0s linear .26s;
}
body.navv2-open .navv2-backdrop { opacity: 1; visibility: visible; transition: opacity .26s ease; }
.navv2-drawer {
  position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column;
  background: #fff; color: #111216; text-align: left; font-family: "ballinger", sans-serif;
  transform: translateX(100%); visibility: hidden;
  transition: transform .26s cubic-bezier(.2, .75, .2, 1), visibility 0s linear .26s;
}
.navv2-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform .26s cubic-bezier(.2, .75, .2, 1); }
@media (min-width: 641px) {
  .navv2-drawer { left: auto; width: 48rem; box-shadow: -2rem 0 6rem rgba(22, 20, 17, .18); }
}
/* The theme styles EVERY <button> as a pill CTA: padding, 48px min-height, Proxima, centered inline-flex,
   a hover padding shift (button:not(.custom-filter-button):not(.secondary):hover) and, under 700px,
   "display:flex !important; width:100%". That centered the labels and made them jump on hover. Reset it all
   with !important here; each component below re-applies its layout with !important and higher specificity
   (body .navv2-drawer button.x beats the theme's button:not():not() at 0,2,1). */
.navv2-drawer button, .navv2-drawer button:hover {
  margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; width: auto !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: inherit !important;
  font: inherit !important; letter-spacing: 0 !important; text-transform: none !important; text-align: left !important;
  display: block !important; justify-content: flex-start !important; align-items: stretch !important; position: static !important;
  transition: none !important; transform: none !important; cursor: pointer;
}
.navv2-drawer a { color: inherit; text-decoration: none; }
.navv2-drawer button:focus-visible, .navv2-drawer a:focus-visible, .navv2-drawer input:focus-visible { outline: 3px solid var(--nv2-focus); outline-offset: 2px; }

/* Head */
.navv2-drawer-head {
  flex: 0 0 8.2rem; min-height: 8.2rem; padding: 0 1.6rem 0 2rem;
  display: flex; align-items: center; justify-content: space-between; background: #000; border-bottom: 1px solid #2C2924;
}
.navv2-drawer-brand { display: block; line-height: 0; }
.navv2-drawer-brand svg { width: 19.8rem; max-width: 58vw; height: auto; display: block; }
.navv2-drawer-brand-text { color: #fff; font-family: "proxima-nova-wide", sans-serif; font-size: 1.6rem; font-weight: 600; letter-spacing: .08em; line-height: 1; }
.navv2-drawer-brand-text span { color: var(--nv2-green); }
.navv2-head-actions { display: flex; align-items: center; gap: .4rem; }
body .navv2-drawer button.navv2-icon-btn {
  width: 4.4rem !important; height: 4.4rem !important; border-radius: 50% !important; display: grid !important; color: #fff !important;
  /* centered explicitly with !important: the button reset above forces align-items/justify-content and would otherwise pin the icon top-left */
  align-items: center !important; justify-items: center !important; justify-content: center !important; align-content: center !important;
}
body .navv2-drawer button.navv2-icon-btn:hover { background: rgba(255, 255, 255, .07) !important; }
.navv2-drawer .navv2-icon-btn svg { width: 2.1rem; height: 2.1rem; }
body .navv2-drawer button.navv2-search-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .14) !important; }
body .navv2-drawer button.navv2-drawer-close { color: var(--nv2-green) !important; }

/* Inline search */
.navv2-search { padding: 1.2rem 1.4rem; background: #fff; border-bottom: 1px solid #E1E4EA; }
.navv2-search[hidden] { display: none; }
.navv2-search-form {
  min-height: 4.6rem; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  border: 1px solid #CFC8BD; border-radius: 1rem; padding: 0 1.2rem; background: #fff;
}
.navv2-search-form > svg { width: 1.8rem; height: 1.8rem; color: #626773; }
.navv2-drawer .navv2-search-form input[type="search"] {
  margin: 0; padding: .8rem 0; min-height: 0; width: 100%; min-width: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none;
  background: transparent; color: #111216; font: inherit; font-size: 1.4rem; -webkit-appearance: none; appearance: none;
}
body .navv2-drawer .navv2-search-form button { padding: .8rem 0 .8rem .4rem !important; color: var(--nv2-blue) !important; font-size: 1.2rem !important; font-weight: 500 !important; }

/* Scrolling area */
.navv2-drawer-scroll { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: #fff; -webkit-overflow-scrolling: touch; }
.navv2-drawer-scroll > .navv2-sec { flex: 0 0 auto; }

/* Sections (top-level accordion) */
.navv2-sec { border-bottom: 1px solid #E1E4EA; }
.navv2-drawer .navv2-sec-btn, body .navv2-drawer button.navv2-sec-btn {
  width: 100% !important; min-height: 5.6rem !important; padding: 0 1.8rem !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem; align-items: center !important;
  background: #fff !important; color: #111216 !important; text-align: left !important;
}
.navv2-drawer .navv2-sec-btn:hover, body .navv2-drawer button.navv2-sec-btn:hover { background: #F7F8FB !important; }
.navv2-sec-label { font-family: "ballinger-mono", sans-serif; font-weight: 400; font-size: 1.5rem; letter-spacing: .045em; text-transform: uppercase; color: #111216; }
.navv2-sec-icon { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; color: #111216; }
.navv2-sec-icon svg { width: 1.7rem; height: 1.7rem; transition: transform .18s ease; }
.navv2-sec-arrow { color: var(--nv2-blue); }
.navv2-sec.is-open .navv2-sec-btn, body .navv2-drawer .navv2-sec.is-open button.navv2-sec-btn { background: #F2F4FF !important; }
.navv2-sec.is-open .navv2-sec-label, .navv2-sec.is-open .navv2-sec-icon { color: var(--nv2-blue); }
.navv2-sec.is-open .navv2-sec-icon svg { transform: rotate(180deg); }
.navv2-sec-body { border-top: 1px solid #ECEEF3; background: #FAFBFD; }
.navv2-sec-body[hidden] { display: none; }
.navv2-sec-inner { padding: 1rem 1.4rem 1.4rem; }

/* Groups (second-level accordion) */
/* QA 09-30 ("changes from prototype"): group headers are Ballinger Mono uppercase in forged steel with a 1px
   forged-steel line beneath, a link-count pill, and every group starts open (tap the header to collapse). */
.navv2-grp { border-top: 0; }
.navv2-grp + .navv2-grp { margin-top: 1.2rem; }
body .navv2-drawer button.navv2-grp-btn {
  width: 100% !important; min-height: 5rem !important; padding: 1rem .6rem .8rem .8rem !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center !important;
  border-bottom: 1px solid var(--nv2-warm) !important; border-radius: 0 !important; text-align: left !important;
}
body .navv2-drawer button.navv2-grp-btn:hover { background: #F7F8FB !important; }
.navv2-grp-title { display: inline-block; vertical-align: middle; font-family: "ballinger-mono", sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--nv2-warm); line-height: 1.3; }
.navv2-grp-count { display: inline-grid; place-items: center; vertical-align: middle; min-width: 2.2rem; height: 2.2rem; padding: 0 .6rem; margin-left: .8rem; border-radius: 1.1rem; background: #EEF1FF; color: var(--nv2-blue); font-family: "ballinger-mono", sans-serif; font-size: 1.2rem; font-weight: 500; line-height: 1; }
.navv2-grp-caption { display: block; margin-top: .4rem; color: #626773; font-family: "ballinger", sans-serif; font-size: 1.25rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.35; }
.navv2-grp-icon { width: 3rem; height: 3rem; display: grid; place-items: center; color: var(--nv2-blue); }
.navv2-grp-icon svg { width: 1.6rem; height: 1.6rem; transition: transform .18s ease; }
body .navv2-drawer .navv2-grp.is-open button.navv2-grp-btn { background: transparent !important; }
.navv2-grp.is-open .navv2-grp-icon svg { transform: rotate(180deg); }
.navv2-grp-body { padding: .4rem 0 .4rem; }
.navv2-grp-body[hidden] { display: none; }

/* Links */
/* QA 09-30: link + description one size up, subtle separators between links, CTA rows in Proxima Nova Wide blue. */
.navv2-drawer .navv2-m-link {
  position: relative; min-height: 4.8rem; margin: 0; padding: 1rem .8rem; border: 0; border-bottom: 1px solid #ECEEF3; border-radius: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; color: #111216; font-size: 1.5rem; line-height: 1.25;
}
.navv2-drawer .navv2-m-link:last-child { border-bottom: 0; }
.navv2-drawer .navv2-m-link:hover { background: #F1F4FF; }
.navv2-drawer .navv2-m-link[aria-current="page"] { background: #EEF1FF; color: var(--nv2-blue); box-shadow: inset 3px 0 0 var(--nv2-blue); }
.navv2-drawer .navv2-m-link .navv2-link-title { display: block; font-size: 1.5rem; font-weight: 400; }
.navv2-drawer .navv2-m-link .navv2-link-desc { display: block; margin-top: .3rem; color: #626773; font-size: 1.25rem; line-height: 1.3; }
.navv2-drawer .navv2-m-link--more .navv2-link-title { font-family: "proxima-nova-wide", sans-serif; font-weight: 600; font-size: 1.4rem; letter-spacing: .01em; text-transform: uppercase; color: var(--nv2-blue); }
.navv2-drawer .navv2-m-link .navv2-arrow { width: 1.5rem; height: 1.5rem; color: var(--nv2-blue); margin-top: 0; transition: transform .15s ease; }
.navv2-drawer .navv2-m-link:hover .navv2-arrow { transform: translateX(3px); }
.navv2-drawer .navv2-m-link .navv2-badge { margin-right: .6rem; vertical-align: middle; }
.navv2-m-divider { height: 1px; background: #ECEEF3; margin: 1rem 0; }

/* Compact promo card inside a section */
.navv2-drawer .navv2-promo.is-mobile { margin: 1.2rem 0 0; padding: 1.3rem 1.4rem; border-radius: 1.1rem; }
.navv2-drawer .navv2-promo.is-mobile .navv2-promo-body { padding: 0; }
.navv2-drawer .navv2-promo.is-mobile .navv2-promo-eyebrow { font-size: 1rem; }
.navv2-drawer .navv2-promo.is-mobile .navv2-promo-title { margin-top: .5rem; font-size: 1.35rem; line-height: 1.3; text-transform: none; }
.navv2-drawer .navv2-promo.is-mobile .navv2-promo-cta { margin-top: .7rem; font-size: 1.15rem; }
.navv2-drawer .navv2-promo--quote.is-mobile { min-height: 0; }
.navv2-drawer .navv2-promo--quote.is-mobile .navv2-promo-eyebrow { margin-bottom: .8rem; }
.navv2-drawer .navv2-promo--quote.is-mobile .navv2-quote-mark { font-size: 3.6rem; }
.navv2-drawer .navv2-promo--quote.is-mobile .navv2-promo-title { margin-top: .8rem; }
.navv2-drawer .navv2-promo--quote.is-mobile .navv2-quote-attrib { margin-top: 1.2rem; }

/* Black footer. Tightened 2026-09-29 so five sections + the demo button + five rows fit one small-laptop
   screen without scrolling; margin-top:auto pins it to the bottom of the panel on taller screens. */
.navv2-drawer-foot { flex: 0 0 auto; margin-top: auto; background: #050505; padding: 1.6rem 2rem calc(1.6rem + env(safe-area-inset-bottom)); }
.navv2-drawer .navv2-foot-cta {
  min-height: 4.8rem; padding: 0 1.6rem; border-radius: 999px; background: var(--nv2-green); color: #080808;
  display: grid; place-items: center; text-align: center;
  font-family: "proxima-nova-wide", sans-serif; font-weight: 600; font-size: 1.5rem; letter-spacing: .01em; text-transform: uppercase;
}
.navv2-drawer .navv2-foot-cta:hover { background: #7BEA2E; }
.navv2-foot-rule { height: 1px; background: #343434; margin: 1.6rem 0 .6rem; }
.navv2-drawer .navv2-foot-row, body .navv2-drawer button.navv2-foot-row {
  width: 100% !important; min-height: 4.6rem !important; padding: 0 1.4rem !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center !important; gap: 1.2rem;
  border-bottom: 1px solid #303030 !important; background: transparent !important; color: #F7F7F7 !important; text-align: left !important;
  font-family: "ballinger-mono", sans-serif !important; font-weight: 400 !important; font-size: 1.4rem !important;
}
.navv2-drawer .navv2-foot-row:last-child, body .navv2-drawer button.navv2-foot-row:last-child { border-bottom: 0 !important; }
.navv2-drawer .navv2-foot-row:hover, body .navv2-drawer button.navv2-foot-row:hover { background: #101010 !important; }
.navv2-foot-arrow { color: #BEBEBE; display: grid; place-items: center; }
.navv2-foot-arrow .navv2-arrow { width: 1.4rem; height: 1.4rem; color: inherit; margin-top: 0; }

/* ---------------------------------------------------------------------------
   FOOTER V2 (revised after the Footer QA, 2026-09-28). footer-v2.php reuses the
   current footer's own classes (.footer-logo, .footer-grid, .footer-item, p.overline,
   .footer-links, a.btn.secondary, .lower-flex-wrapper), so the type, colors, spacing
   and the mobile stack come from main.min.css and stay identical to the live footer.
   No vertical dividers; the five columns are separated by the grid gap only.
   --------------------------------------------------------------------------- */
footer.footv2 .footer-grid > div { min-width: 0; }
/* Section buttons ("Explore the Platform", "View All Solutions") sit one size below the
   1.4rem overline headings. Same theme .btn.secondary treatment (green, uppercase, arrow),
   just 1.2rem with a matching arrow. */
footer.footv2 .footer-item a.btn.secondary { font-size: 1.2rem; line-height: 1.8rem; padding-left: 1.8rem; }
footer.footv2 .footer-item a.btn.secondary:hover { padding-left: 0; padding-right: 1.8rem; }
footer.footv2 .footer-item a.btn.secondary svg.button-arrow-svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------------------------
   THEME OVERRIDES. The theme applies "div.site-main-nav a { color: #fff }" to every
   anchor in the header, and something outside our stylesheets underlines block-level
   anchors. These keep our link colors and decoration authoritative inside the new nav.
   --------------------------------------------------------------------------- */
body.nav-v2 header .navv2-link,
body.nav-v2 header .navv2-link:hover,
body.nav-v2 header .navv2-link:focus-visible { color: #000 !important; text-decoration: none !important; }
body.nav-v2 header .navv2-footer-link { color: var(--nv2-blue) !important; text-decoration: none !important; }
body.nav-v2 header .navv2-footer-link:hover,
body.nav-v2 header .navv2-footer-link:focus-visible { text-decoration: underline !important; text-underline-offset: 3px; }
body.nav-v2 header .navv2-promo,
body.nav-v2 header .navv2-promo:hover,
body.nav-v2 header .navv2-promo .navv2-promo-title,
body.nav-v2 header .navv2-promo .navv2-promo-copy,
body.nav-v2 header .navv2-promo .navv2-quote-attrib { color: #fff !important; text-decoration: none !important; }
body.nav-v2 header .navv2-promo .navv2-promo-eyebrow,
body.nav-v2 header .navv2-promo .navv2-promo-cta,
body.nav-v2 header .navv2-promo .navv2-quote-role { color: var(--nv2-green) !important; text-decoration: none !important; }
body.nav-v2 header .navv2-promo .navv2-promo-badge { color: #19210E !important; }
body.nav-v2 header .navv2 .navv2-root { text-decoration: none !important; }
body.nav-v2 header .navv2 .navv2-root:hover,
body.nav-v2 header .navv2-item.is-open .navv2-root { text-decoration: underline !important; }
body.nav-v2 header .navv2-drawer a,
body.nav-v2 header .navv2-drawer button { text-decoration: none !important; }
body.nav-v2 header .navv2-drawer .navv2-sec-btn,
body.nav-v2 header .navv2-drawer .navv2-grp-btn,
body.nav-v2 header .navv2-drawer .navv2-m-link { color: #111216 !important; }
body.nav-v2 header .navv2-drawer .navv2-m-link[aria-current="page"],
body.nav-v2 header .navv2-drawer .navv2-m-link--more { color: var(--nv2-blue) !important; }
body.nav-v2 header .navv2-drawer .navv2-search-form button { color: var(--nv2-blue) !important; }
body.nav-v2 header .navv2-drawer .navv2-foot-row { color: #F7F7F7 !important; }
body.nav-v2 header .navv2-drawer .navv2-foot-cta { color: #080808 !important; }
body.nav-v2 header .navv2-drawer .navv2-icon-btn { color: #fff !important; }
body.nav-v2 header .navv2-drawer .navv2-drawer-close { color: var(--nv2-green) !important; }

/* ---------------------------------------------------------------------------
   PROMO CARD COLOR OPTIONS (design mockups): blue (default) / black / light blue
   --------------------------------------------------------------------------- */
.navv2-promo--theme-black { background: #000; }
.navv2-promo--theme-light { background: #EEF0FF; color: #000; }
body.nav-v2 header .navv2-promo--theme-light,
body.nav-v2 header .navv2-promo--theme-light:hover,
body.nav-v2 header .navv2-promo--theme-light .navv2-promo-title,
body.nav-v2 header .navv2-promo--theme-light .navv2-promo-copy,
body.nav-v2 header .navv2-promo--theme-light .navv2-quote-attrib { color: #000 !important; }
body.nav-v2 header .navv2-promo--theme-light .navv2-promo-eyebrow,
body.nav-v2 header .navv2-promo--theme-light .navv2-promo-cta,
body.nav-v2 header .navv2-promo--theme-light .navv2-quote-role { color: var(--nv2-blue) !important; }
.navv2-promo--theme-light .navv2-promo-cta .navv2-arrow { color: var(--nv2-blue); }
.navv2-promo--theme-light .navv2-promo-media { border-bottom-color: var(--nv2-blue); }

/* ---------------------------------------------------------------------------
   COMPACT LAPTOP-HEIGHT MODE (QA 2026-09-26): wide-but-short screens such as a
   13-inch laptop. Same density tokens for every menu; every dropdown must fit
   with its utility footer visible, without an internal scrollbar.
   --------------------------------------------------------------------------- */
@media (max-height: 850px) {
  /* The header-bar tightening (.util-nav / .site-main-nav padding) lives in header-v2.php's runtime style,
     where it can be limited to desktop widths; phones are always under 850px tall and must keep the theme's bar. */
  .navv2-panel { margin-top: -1rem; padding-top: 1.6rem; }
  .navv2-panel-inner { max-height: calc(100vh - 12rem); }
  .navv2-panel-body { padding: 2.4rem 3.6rem 1.8rem; }
  .navv2-panel-header { margin-bottom: 2rem; }
  .navv2-eyebrow { font-size: 1.2rem; line-height: 1.6rem; margin-bottom: .6rem; }
  .navv2-title { font-size: 2.8rem; line-height: 3.2rem; }
  .navv2-intro { font-size: 1.4rem; margin-top: .8rem; }
  .navv2-col { padding: 0 2.4rem; }
  .navv2-col-heading { font-size: 1.2rem; margin-bottom: .8rem; }
  .navv2-link { padding: .6rem .8rem .6rem 1.1rem; }
  .navv2-links { gap: .6rem; }                                  /* QA 09-26: +2px between link rows in compact mode; QA 09-30: another +2px */
  .layout-grid .navv2-links { gap: .6rem 2.4rem; }
  .navv2-link-title, .navv2-info-title { font-size: 1.5rem; }
  .navv2-link-desc, .navv2-info-desc { font-size: 1.2rem; line-height: 1.3; }
  .navv2-info { padding: .6rem 0; }
  .navv2-promo-wrap { flex-basis: 28rem; padding-left: 2.4rem; }
  .navv2-promo-body { padding: 1.6rem 1.6rem 1.8rem; }
  .navv2-promo-title { font-size: 1.7rem; }
  .navv2-promo-copy { font-size: 1.3rem; }
  .navv2-promo-cta { margin-top: 1.2rem; }
  .navv2-promo--quote { padding: 1.8rem 1.8rem 1.6rem; }
  .navv2-panel-footer { min-height: 5.6rem; padding: 1rem 3.6rem; gap: 2rem; }
  .navv2-footer-link { font-size: 1.5rem; }
  .navv2-footer-copy { font-size: 1.4rem; }
}