/* =========================================================
   GS — Primary Navigation   (namespaced under .gs-pnav)
   Fixed glass bar + a single morphing panel surface. One signature motion
   curve everywhere. All color via theme tokens with fallbacks; nav-scoped
   custom properties (--pn-*) derive from them so a Theme Settings change
   re-skins the nav. No global bleed: every selector lives under .gs-pnav.
   ========================================================= */

.gs-pnav,
.gs-pnav *,
.gs-pnav *::before,
.gs-pnav *::after,
.gs-pnav__announce,
.gs-pnav__announce *,
.gs-pnav__spacer { box-sizing: border-box; }

.gs-pnav {
  /* -------- nav-scoped design tokens -------- */
  --pn-ink:       var(--gs-navy, #062a47);
  --pn-body:      var(--gs-slate, #41505b);
  --pn-accent:    var(--gs-green-cta, #0a8744);
  --pn-bright:    var(--gs-green, #85c441);
  --pn-teal:      var(--gs-teal, #0d9389);
  --pn-orange:    var(--gs-orange, #ed7c2e);
  --pn-line:      var(--gs-line, #e7e9ec);
  --pn-mist:      var(--gs-mist, #eef4f1);
  --pn-white:     var(--gs-white, #ffffff);
  --pn-heading:   var(--gs-heading-font, 'PT Serif', Georgia, serif);
  --pn-sans:      var(--gs-body-font, 'Source Sans Pro', 'Segoe UI', Arial, sans-serif);
  /* the one motion curve, three speeds */
  --pn-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --pn-fast:      140ms;
  --pn-med:       220ms;
  --pn-slow:      300ms;
  /* radii scale: bar > panel > card > tile */
  --pn-r-bar:     22px;
  --pn-r-panel:   18px;
  --pn-r-card:    12px;
  --pn-r-tile:    9px;
  --pn-bar-h:     64px;

  position: fixed;
  top: var(--gs-banner-h, 0px);
  left: 0;
  right: 0;
  z-index: 1100;
  font-family: var(--pn-sans);
  color: var(--pn-ink);
}
.gs-pnav--static { position: static; }

/* Visually-hidden utility (screen-reader text) */
.gs-pnav__sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.gs-pnav__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.gs-pnav__ico {
  width: 1em; height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.gs-pnav__ico--ext { width: 0.7em; height: 0.7em; margin-left: 5px; opacity: 0.55; }

/* ---------- Skip link ---------- */
.gs-pnav__skip {
  position: absolute;
  left: 12px; top: -48px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--pn-ink);
  color: var(--pn-white);
  font-weight: 700; font-size: 0.875rem;
  text-decoration: none;
  transition: top var(--pn-fast) var(--pn-ease);
}
.gs-pnav__skip:focus-visible { top: 10px; outline: 2px solid var(--pn-bright); outline-offset: 2px; }

/* ---------- Announcement bar (in flow, above the fixed bar's spacer) ---------- */
.gs-pnav__announce {
  background: var(--pn-ink, #062a47);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--gs-body-font, 'Source Sans Pro', sans-serif);
  font-size: 0.85rem;
}
.gs-pnav__announce-in {
  max-width: var(--gs-content-max, 1280px);
  margin-inline: auto;
  padding-block: 8px;
  padding-inline: var(--gs-content-pad, clamp(36px, 5vw, 84px));
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.gs-pnav__announce-text { margin: 0; text-align: center; }
.gs-pnav__announce-link {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 10px;
  color: var(--gs-green, #85c441);
  font-weight: 700; text-decoration: none;
}
.gs-pnav__announce-link:hover { text-decoration: underline; }
.gs-pnav__announce-link .gs-pnav__ico { width: 0.85em; height: 0.85em; }
.gs-pnav__announce-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border: 0; border-radius: 7px;
  background: transparent; color: inherit; cursor: pointer;
  font-size: 0.9rem;
}
.gs-pnav__announce-x:hover { background: rgba(255, 255, 255, 0.12); }
.gs-pnav__announce-x:focus-visible { outline: 2px solid var(--gs-green, #85c441); outline-offset: 2px; }

/* ---------- The bar ----------
   The visible bar is a finite-width "half-pill" (rounded bottom corners) that
   hangs from the top edge, centered. .gs-pnav__bar is just a full-width,
   transparent positioning layer; .gs-pnav__inner is the pill itself.
   At the top of the page the pill is solid white (crisp, no blur); once the
   page scrolls it melts into liquid glass. Same signature curve. */
.gs-pnav__bar { position: relative; background: transparent; }

.gs-pnav__inner {
  position: relative;
  z-index: 2;
  max-width: var(--gs-content-max, 1280px);
  margin-inline: auto;
  padding-inline: clamp(20px, 3vw, 40px);
  min-height: var(--pn-bar-h);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  /* Surface is transparent: the visible white/glass fill lives on ::before.
     Keeping backdrop-filter OFF the .gs-pnav__inner element itself is what makes
     the utility popovers nested inside it render identical glass to the mega
     panels — an element with backdrop-filter becomes a "backdrop root" and a
     descendant popover's own backdrop-filter would then sample the empty space
     inside the bar instead of the page, reading as clear (the bug). */
  background: transparent;
  border: 1px solid transparent;
  border-top: 0;
  border-radius: 0 0 var(--pn-r-bar) var(--pn-r-bar);
  transition:
    border-color var(--pn-slow) var(--pn-ease),
    box-shadow var(--pn-slow) var(--pn-ease);
}
/* The bar's own fill: solid white at the top of the page, liquid glass once
   scrolled. On a z-index:-1 pseudo so it sits behind the bar content while
   leaving .gs-pnav__inner free of any backdrop-root triggers. */
.gs-pnav__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--pn-white);
  transition:
    background-color var(--pn-slow) var(--pn-ease),
    -webkit-backdrop-filter var(--pn-slow) var(--pn-ease),
    backdrop-filter var(--pn-slow) var(--pn-ease);
}
.gs-pnav.is-scrolled .gs-pnav__inner {
  border-color: color-mix(in srgb, var(--pn-ink) 9%, transparent);
  box-shadow: 0 14px 34px -22px color-mix(in srgb, var(--pn-ink) 55%, transparent);
}
.gs-pnav.is-scrolled .gs-pnav__inner::before {
  background: color-mix(in srgb, var(--pn-white) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
}
@supports not (backdrop-filter: blur(1px)) {
  .gs-pnav.is-scrolled .gs-pnav__inner::before { background: var(--pn-white); }
}

.gs-pnav[data-theme="dark"] { color: var(--pn-white); }
.gs-pnav[data-theme="dark"] .gs-pnav__inner::before { background: var(--pn-ink); }
.gs-pnav[data-theme="dark"].is-scrolled .gs-pnav__inner::before {
  background: color-mix(in srgb, var(--pn-ink) 78%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
  .gs-pnav[data-theme="dark"].is-scrolled .gs-pnav__inner::before { background: var(--pn-ink); }
}

.gs-pnav__logo {
  display: inline-flex; align-items: center;
  flex: 0 0 auto;
  margin-right: 14px;
  color: inherit;
  border-radius: 8px;
}
.gs-pnav__logo-img, .gs-pnav__logo-svg { height: var(--pn-logo-h, 26px); width: auto; display: block; }
.gs-pnav__logo:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: 4px; }

/* ---------- Top-level items ---------- */
.gs-pnav__list {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 2px;
  list-style: none; margin: 0; padding: 0;
  min-width: 0;
}
.gs-pnav__item { position: relative; flex: 0 0 auto; }

.gs-pnav__toplink {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  padding: 10px 13px;
  border-radius: 9px;
  color: inherit;
  font-size: 0.9375rem; font-weight: 600; line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--pn-fast) var(--pn-ease), color var(--pn-fast) var(--pn-ease);
}
.gs-pnav__toplink:hover { background: color-mix(in srgb, var(--pn-ink) 6%, transparent); }
.gs-pnav[data-theme="dark"] .gs-pnav__toplink:hover { background: rgba(255, 255, 255, 0.1); }
.gs-pnav__toplink:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: 2px; }
.gs-pnav__toplink.is-open { background: color-mix(in srgb, var(--pn-ink) 7%, transparent); }
.gs-pnav[data-theme="dark"] .gs-pnav__toplink.is-open { background: rgba(255, 255, 255, 0.12); }

/* current-page: a quiet underline dot, not a shout */
.gs-pnav__toplink.is-current::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 4px;
  height: 2px; border-radius: 2px;
  background: var(--pn-accent);
}
.gs-pnav[data-theme="dark"] .gs-pnav__toplink.is-current::after { background: var(--pn-bright); }

.gs-pnav__chev {
  width: 0.8em; height: 0.8em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.55;
  transition: transform var(--pn-fast) var(--pn-ease), opacity var(--pn-fast) var(--pn-ease);
}
.gs-pnav__toplink.is-open .gs-pnav__chev { transform: rotate(180deg); opacity: 0.9; }

/* ---------- Right cluster ----------
   Stretches to the full pill height so utility popovers anchor to the same
   baseline as the mega-panel surface (their gaps under the bar match). */
.gs-pnav__right { display: flex; align-items: center; align-self: stretch; flex-wrap: nowrap; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.gs-pnav__util { flex: 0 0 auto; }

.gs-pnav__iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 9px;
  background: transparent; color: inherit;
  font-size: 1.05rem; cursor: pointer;
  text-decoration: none;
  transition: background-color var(--pn-fast) var(--pn-ease);
}
.gs-pnav__iconbtn:hover { background: color-mix(in srgb, var(--pn-ink) 6%, transparent); }
.gs-pnav[data-theme="dark"] .gs-pnav__iconbtn:hover { background: rgba(255, 255, 255, 0.1); }
.gs-pnav__iconbtn:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: 2px; }

.gs-pnav__utillink {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px;
  padding: 10px 11px;
  border-radius: 9px;
  color: inherit;
  font-size: 0.875rem; font-weight: 600; line-height: 1;
  text-decoration: none;
  opacity: 0.85;
  transition: background-color var(--pn-fast) var(--pn-ease), opacity var(--pn-fast) var(--pn-ease);
}
.gs-pnav__utillink:hover, .gs-pnav__utillink.is-open { opacity: 1; background: color-mix(in srgb, var(--pn-ink) 6%, transparent); }
.gs-pnav[data-theme="dark"] .gs-pnav__utillink:hover,
.gs-pnav[data-theme="dark"] .gs-pnav__utillink.is-open { background: rgba(255, 255, 255, 0.1); }
.gs-pnav__utillink:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: 2px; }

/* Matches the site's standard button (gs-hero): 4px radius, 2px border, green
   fill → bright-green fill + navy text on hover. No arrow — the bar is tight on
   space and the label alone carries it. */
.gs-pnav__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  margin-left: 6px;
  padding: 12px 22px;
  border: var(--gs-btn-border-width, 2px) solid var(--pn-accent);
  border-radius: var(--gs-btn-radius, 6px);
  background: var(--pn-accent);
  color: var(--pn-white);
  font-size: 0.9375rem; font-weight: 700; line-height: 1;
  text-decoration: none;
  box-shadow: var(--gs-btn-shadow, var(--gs-shadow-cta, 0 14px 30px -14px rgba(10, 137, 68, 0.85)));
  transition: transform var(--pn-fast) var(--pn-ease), background-color var(--pn-fast) var(--pn-ease), border-color var(--pn-fast) var(--pn-ease), color var(--pn-fast) var(--pn-ease), box-shadow var(--pn-fast) var(--pn-ease);
}
.gs-pnav__cta:hover {
  background: var(--pn-bright);
  border-color: var(--pn-bright);
  color: var(--pn-ink);
  transform: translateY(-2px);
}
.gs-pnav__cta:focus-visible { outline: 3px solid var(--pn-bright); outline-offset: 3px; }
.gs-pnav__cta--ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
  box-shadow: none;
}
.gs-pnav[data-theme="dark"] .gs-pnav__cta--ghost { border-color: rgba(255, 255, 255, 0.5); }
.gs-pnav__cta--ghost:hover {
  background: color-mix(in srgb, var(--pn-ink) 6%, transparent);
  border-color: currentColor;
  color: inherit;
  transform: translateY(-2px);
}

/* ---------- Search (opens as a dropdown below the bar) ---------- */
.gs-pnav__search { position: relative; align-self: stretch; display: flex; align-items: center; }
.gs-pnav__searchpanel {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  width: min(460px, 84vw);
  padding: 12px;
  border-radius: var(--pn-r-panel);
  background: var(--pn-white);
  border: 1px solid color-mix(in srgb, var(--pn-ink) 9%, transparent);
  box-shadow:
    0 2px 6px -2px color-mix(in srgb, var(--pn-ink) 18%, transparent),
    0 30px 70px -24px color-mix(in srgb, var(--pn-ink) 45%, transparent);
  display: none;
  transition: background-color var(--pn-slow) var(--pn-ease), -webkit-backdrop-filter var(--pn-slow) var(--pn-ease), backdrop-filter var(--pn-slow) var(--pn-ease);
}
html.gs-pnav-on .gs-pnav__search.is-open .gs-pnav__searchpanel { display: block; animation: gsPnavPop var(--pn-med) var(--pn-ease); }
.gs-pnav.is-scrolled .gs-pnav__searchpanel {
  background: color-mix(in srgb, var(--pn-white) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
}
@supports not (backdrop-filter: blur(1px)) {
  .gs-pnav.is-scrolled .gs-pnav__searchpanel { background: var(--pn-white); }
}
.gs-pnav__searchpanel-form {
  display: flex; align-items: center; gap: 8px;
  padding: 0 6px 0 14px;
  border: 1.5px solid var(--pn-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pn-mist) 45%, var(--pn-white));
}
.gs-pnav__searchpanel-form:focus-within { border-color: var(--pn-accent); background: var(--pn-white); }
.gs-pnav__searchpanel-ico { color: var(--pn-body); font-size: 1.05rem; flex: 0 0 auto; }
.gs-pnav__searchpanel-input {
  flex: 1; min-width: 0;
  min-height: 48px;
  border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 0.98rem;
  color: var(--gs-charcoal, #2f2f2f);
}
.gs-pnav__searchpanel-go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  border: 0; border-radius: 9px;
  background: var(--pn-accent); color: var(--pn-white);
  cursor: pointer;
  transition: background-color var(--pn-fast) var(--pn-ease);
}
.gs-pnav__searchpanel-go:hover { background: color-mix(in srgb, var(--pn-accent) 88%, #000000); }
.gs-pnav__searchpanel-go:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: 2px; }

/* ---------- Dock + morphing surface ----------
   Constrained to the pill's width and centered so panels line up under it. */
.gs-pnav__dock {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--gs-content-max, 1280px));
  pointer-events: none;
}
.gs-pnav__surface {
  position: absolute;
  top: 10px; left: 0;
  width: 0; height: 0;
  border-radius: var(--pn-r-panel);
  background: var(--pn-white);
  border: 1px solid color-mix(in srgb, var(--pn-ink) 9%, transparent);
  box-shadow:
    0 2px 6px -2px color-mix(in srgb, var(--pn-ink) 18%, transparent),
    0 30px 70px -24px color-mix(in srgb, var(--pn-ink) 45%, transparent);
  opacity: 0;
}
/* the surface's "lip": a slim brand arc along the top edge */
.gs-pnav__surface::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--pn-bright), color-mix(in srgb, var(--pn-bright) 20%, transparent) 70%, transparent);
  opacity: 0.9;
}
.gs-pnav.is-panel-open .gs-pnav__dock { pointer-events: auto; }
.gs-pnav.is-panel-open .gs-pnav__surface { opacity: 1; }

/* Dropdowns follow the bar, but stay much more opaque than the bar so panel
   text is always crisp: near-solid frost + heavy blur (a hint of glass, not a
   see-through sheet). */
.gs-pnav.is-scrolled .gs-pnav__surface {
  background: color-mix(in srgb, var(--pn-white) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
}
@supports not (backdrop-filter: blur(1px)) {
  .gs-pnav.is-scrolled .gs-pnav__surface { background: var(--pn-white); }
}

/* The morph: the surface animates position and size between panels; panels
   themselves only cross-fade. .no-anim commits a frame without transition
   (first open, reduced motion). */
.gs-pnav__surface {
  transition:
    left var(--pn-med) var(--pn-ease),
    width var(--pn-med) var(--pn-ease),
    height var(--pn-med) var(--pn-ease),
    background-color var(--pn-slow) var(--pn-ease),
    -webkit-backdrop-filter var(--pn-slow) var(--pn-ease),
    backdrop-filter var(--pn-slow) var(--pn-ease),
    opacity var(--pn-fast) var(--pn-ease);
}
.gs-pnav__surface.no-anim { transition: opacity var(--pn-fast) var(--pn-ease); }

html.gs-pnav-on .gs-pnav__dock .gs-pnav__panel {
  position: absolute;
  top: 10px; left: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--pn-fast) var(--pn-ease), visibility 0s linear var(--pn-fast);
}
html.gs-pnav-on .gs-pnav__dock .gs-pnav__panel.is-active { transition-delay: 0s, 0s; }
html.gs-pnav-on .gs-pnav__dock .gs-pnav__panel.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
html.gs-pnav-on .gs-pnav__dock .gs-pnav__panel.is-measuring {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  display: block;
}

/* ---------- Panel internals ---------- */
.gs-pnav__panel {
  width: max-content;
  max-width: min(1080px, calc(100vw - 32px));
  color: var(--pn-ink);
}
.gs-pnav__panel-in { padding: clamp(18px, 2vw, 26px); }

.gs-pnav__panel-head { margin: 2px 6px 14px; }
.gs-pnav__panel-heading {
  margin: 0;
  font-family: var(--pn-heading);
  font-size: 1.25rem; font-weight: 700; line-height: 1.2;
  color: var(--pn-ink);
}
.gs-pnav__panel-subhead {
  margin: 4px 0 0;
  font-size: 0.875rem; line-height: 1.45;
  color: var(--pn-body);
}

.gs-pnav__panel-cols { display: flex; gap: clamp(16px, 2vw, 26px); align-items: stretch; }
.gs-pnav__main { min-width: 0; }
.gs-pnav__main > .gs-pnav__group + .gs-pnav__group { margin-top: 16px; }

.gs-pnav__eyebrow {
  margin: 0 6px 8px;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pn-body);
}
.gs-pnav__eyebrow--ondark { color: color-mix(in srgb, var(--pn-bright) 85%, #ffffff); }

.gs-pnav__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 2px 8px;
}
.gs-pnav__group[data-cols="1"] .gs-pnav__grid { grid-template-columns: 1fr; }
.gs-pnav__group[data-cols="3"] .gs-pnav__grid { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
.gs-pnav__group[data-cols="4"] .gs-pnav__grid { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.gs-pnav__group--links .gs-pnav__grid { gap: 1px; }
.gs-pnav__group--links[data-cols="auto"] .gs-pnav__grid { grid-template-columns: 1fr; }
.gs-pnav__group--featured .gs-pnav__grid { gap: 8px; }

/* ----- cards ----- */
.gs-pnav__card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--pn-r-card);
  color: inherit; text-decoration: none;
  transition: background-color var(--pn-fast) var(--pn-ease);
}
.gs-pnav__card:hover { background: var(--pn-mist); }
.gs-pnav__card:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: -2px; }

.gs-pnav__card-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: var(--pn-r-tile);
  background: var(--pn-mist);
  color: var(--pn-ink);
  font-size: 1.1rem;
  transition: background-color var(--pn-fast) var(--pn-ease), color var(--pn-fast) var(--pn-ease), transform var(--pn-fast) var(--pn-ease);
}
.gs-pnav__card:hover .gs-pnav__card-tile {
  background: color-mix(in srgb, var(--pn-bright) 22%, var(--pn-white));
  color: var(--pn-accent);
  transform: translateY(-1px);
}
.gs-pnav__card-tile--img { background: var(--pn-white); border: 1px solid var(--pn-line); overflow: hidden; }
.gs-pnav__card-tile--img img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

.gs-pnav__card-body { min-width: 0; }
.gs-pnav__card-title {
  display: flex; align-items: center;
  font-size: 0.9375rem; font-weight: 600; line-height: 1.3;
  color: var(--pn-ink);
  transition: color var(--pn-fast) var(--pn-ease);
}
.gs-pnav__card:hover .gs-pnav__card-title { color: var(--pn-accent); }
.gs-pnav__card-desc {
  display: block;
  margin-top: 1px;
  font-size: 0.8125rem; line-height: 1.45;
  color: var(--pn-body);
}

/* compact link rows */
.gs-pnav__card--links { padding: 8px 12px; gap: 10px; align-items: center; }
.gs-pnav__card--links .gs-pnav__card-tile { width: 30px; height: 30px; font-size: 0.9rem; border-radius: 8px; }

/* featured content cards (image on top) */
.gs-pnav__card--featured {
  flex-direction: column; gap: 7px;
  padding: 7px;
}
.gs-pnav__card-thumb {
  display: block;
  border-radius: 9px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--pn-mist);
}
.gs-pnav__card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--pn-slow) var(--pn-ease);
}
.gs-pnav__card--featured:hover .gs-pnav__card-thumb img { transform: scale(1.03); }
.gs-pnav__card-cat {
  display: block;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pn-accent);
  margin-bottom: 3px;
}
.gs-pnav__card--featured .gs-pnav__card-title { font-size: 0.8125rem; line-height: 1.32; display: block; }
.gs-pnav__card--featured .gs-pnav__card-body { padding: 0 3px 3px; }

.gs-pnav__badge {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pn-accent);
  background: color-mix(in srgb, var(--pn-bright) 22%, var(--pn-white));
}

/* ----- tabs ----- */
.gs-pnav__tabs { display: flex; gap: 8px; align-items: stretch; }
.gs-pnav__tablist {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 168px;
  padding-right: 14px;
  border-right: 1px solid var(--pn-line);
}
.gs-pnav__tab {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--pn-body);
  font-family: inherit; font-size: 0.875rem; font-weight: 600; text-align: left;
  cursor: pointer;
  transition: background-color var(--pn-fast) var(--pn-ease), color var(--pn-fast) var(--pn-ease);
}
.gs-pnav__tab .gs-pnav__ico { opacity: 0; transform: translateX(-3px); transition: opacity var(--pn-fast) var(--pn-ease), transform var(--pn-fast) var(--pn-ease); font-size: 0.8rem; }
.gs-pnav__tab:hover { background: var(--pn-mist); color: var(--pn-ink); }
.gs-pnav__tab:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: -2px; }
.gs-pnav__tab[aria-selected="true"] {
  background: var(--pn-mist);
  color: var(--pn-ink);
}
.gs-pnav__tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 3px;
  background: var(--pn-accent);
}
.gs-pnav__tab[aria-selected="true"] .gs-pnav__ico { opacity: 0.7; transform: none; }
.gs-pnav__panes { min-width: 0; flex: 1; }
.gs-pnav__pane { outline: none; }
.gs-pnav__pane:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: 2px; border-radius: 8px; }
.gs-pnav__pane-head { margin: 4px 6px 10px; }
.gs-pnav__pane-heading {
  margin: 0;
  font-family: var(--pn-heading);
  font-size: 1.05rem; font-weight: 700;
  color: var(--pn-ink);
}
.gs-pnav__pane > .gs-pnav__group + .gs-pnav__group { margin-top: 14px; }

/* pane content entrance (tab switch) */
html.gs-pnav-on .gs-pnav__pane.is-entering { animation: gsPnavPane var(--pn-med) var(--pn-ease); }
@keyframes gsPnavPane { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ----- CTA rows ----- */
.gs-pnav__cta-row {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin-top: 14px;
  padding: 12px 6px 0;
  border-top: 1px solid var(--pn-line);
}
.gs-pnav__panel-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.875rem; font-weight: 700;
  color: var(--pn-accent);
  text-decoration: none;
  border-radius: 6px;
}
.gs-pnav__panel-cta .gs-pnav__ico { font-size: 0.8rem; transition: transform var(--pn-fast) var(--pn-ease); }
.gs-pnav__panel-cta:hover .gs-pnav__ico { transform: translateX(3px); }
.gs-pnav__panel-cta:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: 3px; }
.gs-pnav__panel-cta--button {
  padding: 10px 16px;
  border-radius: 9px;
  background: var(--pn-accent);
  color: var(--pn-white);
}
.gs-pnav__panel-cta--button:hover { background: color-mix(in srgb, var(--pn-accent) 88%, #000000); }

/* ----- aside: featured + callout ----- */
.gs-pnav__aside {
  display: flex; flex-direction: column; gap: 12px;
  width: 264px; flex: 0 0 auto;
  padding-left: clamp(16px, 2vw, 26px);
  border-left: 1px solid var(--pn-line);
}
.gs-pnav__featured {
  display: block;
  border-radius: var(--pn-r-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, var(--pn-mist), color-mix(in srgb, var(--pn-mist) 30%, var(--pn-white)));
  border: 1px solid color-mix(in srgb, var(--pn-ink) 7%, transparent);
  transition: border-color var(--pn-fast) var(--pn-ease), box-shadow var(--pn-fast) var(--pn-ease);
}
.gs-pnav__featured:hover {
  border-color: color-mix(in srgb, var(--pn-accent) 40%, transparent);
  box-shadow: var(--gs-shadow-sm, 0 2px 12px rgba(6, 42, 71, 0.08));
}
.gs-pnav__featured:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: 2px; }
.gs-pnav__featured-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.gs-pnav__featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-pnav__featured-body { display: block; padding: 14px 16px 16px; }
.gs-pnav__featured-body .gs-pnav__eyebrow { margin: 0 0 6px; color: var(--pn-accent); }
.gs-pnav__featured-title {
  display: block;
  font-family: var(--pn-heading);
  font-size: 1rem; font-weight: 700; line-height: 1.3;
  color: var(--pn-ink);
}
.gs-pnav__featured-desc { display: block; margin-top: 5px; font-size: 0.8125rem; line-height: 1.45; color: var(--pn-body); }
.gs-pnav__featured-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 0.84rem; font-weight: 700; color: var(--pn-accent);
}
.gs-pnav__featured-link .gs-pnav__ico { font-size: 0.78rem; transition: transform var(--pn-fast) var(--pn-ease); }
.gs-pnav__featured:hover .gs-pnav__featured-link .gs-pnav__ico { transform: translateX(3px); }

.gs-pnav__callout {
  display: flex; gap: 12px;
  padding: 14px;
  border-radius: var(--pn-r-card);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--pn-teal) 30%, transparent), transparent 55%),
    var(--pn-ink);
  color: var(--pn-white);
  text-decoration: none;
  transition: box-shadow var(--pn-fast) var(--pn-ease), transform var(--pn-fast) var(--pn-ease);
}
.gs-pnav__callout:hover { transform: translateY(-1px); box-shadow: var(--gs-shadow-md, 0 18px 40px -28px rgba(6, 42, 71, 0.45)); }
.gs-pnav__callout:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: 2px; }
.gs-pnav__callout-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--pn-bright);
  font-size: 1rem;
}
.gs-pnav__callout-title { display: block; font-size: 0.9rem; font-weight: 700; }
.gs-pnav__callout-desc { display: block; margin-top: 3px; font-size: 0.78rem; line-height: 1.45; color: rgba(255, 255, 255, 0.78); }
.gs-pnav__callout-link {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px;
  font-size: 0.8rem; font-weight: 700; color: var(--pn-bright);
}
.gs-pnav__callout-link .gs-pnav__ico { font-size: 0.75rem; }

/* ---------- Utility popovers ---------- */
/* Utility items stretch to the full bar height so their popovers anchor to the
   exact same baseline as the mega-panel surface — matching the gap under the
   bar (both sit 10px below it). */
.gs-pnav__util { position: relative; align-self: stretch; display: flex; align-items: center; }
/* Popovers share the panel surface language (radius, shadow, top lip,
   signature-curve entrance) but the lip is a neutral hairline so utility reads
   as a distinct, quiet tier — no colored accent. */
.gs-pnav__pop {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  width: 300px;
  border-radius: var(--pn-r-panel);
  background: var(--pn-white);
  border: 1px solid color-mix(in srgb, var(--pn-ink) 9%, transparent);
  box-shadow:
    0 2px 6px -2px color-mix(in srgb, var(--pn-ink) 18%, transparent),
    0 30px 70px -24px color-mix(in srgb, var(--pn-ink) 45%, transparent);
  padding: 10px;
  color: var(--pn-ink);
  overflow: hidden;
  display: none;
  transition: background-color var(--pn-slow) var(--pn-ease), -webkit-backdrop-filter var(--pn-slow) var(--pn-ease), backdrop-filter var(--pn-slow) var(--pn-ease);
}
.gs-pnav__pop::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 3px; border-radius: 0 0 3px 3px;
  /* same 3px + left-anchored gradient as the main panel lip, in a neutral tone */
  background: linear-gradient(90deg, color-mix(in srgb, var(--pn-ink) 30%, transparent), color-mix(in srgb, var(--pn-ink) 8%, transparent) 70%, transparent);
  opacity: 0.9;
}
html.gs-pnav-on .gs-pnav__pop.is-active { display: block; animation: gsPnavPop var(--pn-med) var(--pn-ease); }
@keyframes gsPnavPop { from { opacity: 0; transform: translateY(-6px) scale(0.99); } to { opacity: 1; transform: none; } }
.gs-pnav__pop-link .gs-pnav__pop-title { transition: color var(--pn-fast) var(--pn-ease); }
/* glass on scroll, matching the mega panels (near-solid for legibility) */
.gs-pnav.is-scrolled .gs-pnav__pop {
  background: color-mix(in srgb, var(--pn-white) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
}
@supports not (backdrop-filter: blur(1px)) {
  .gs-pnav.is-scrolled .gs-pnav__pop { background: var(--pn-white); }
}
.gs-pnav__pop-list { list-style: none; margin: 0; padding: 0; }
.gs-pnav__pop-link {
  display: block;
  padding: 9px 11px;
  border-radius: 9px;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--pn-fast) var(--pn-ease);
}
.gs-pnav__pop-link:hover { background: var(--pn-mist); }
.gs-pnav__pop-link:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: -2px; }
.gs-pnav__pop-title { display: flex; align-items: center; font-size: 0.875rem; font-weight: 600; color: var(--pn-ink); }
.gs-pnav__pop-desc { display: block; margin-top: 1px; font-size: 0.78rem; color: var(--pn-body); }

/* ---------- Utility morphing surface (udock) ----------
   With JS on, the popovers are reparented into the udock and share ONE quiet
   surface that morphs between them (position + size), so hovering from one
   utility dropdown to the next glides exactly like the mega panels — the
   utility-tier echo of the mega dock, just with the neutral (uncolored) lip. */
.gs-pnav__udock {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--gs-content-max, 1280px));
  pointer-events: none;   /* never blocks the page; the active pop captures its own hover */
}
.gs-pnav__usurface {
  position: absolute;
  top: 10px; left: 0;
  width: 0; height: 0;
  border-radius: var(--pn-r-panel);
  background: var(--pn-white);
  border: 1px solid color-mix(in srgb, var(--pn-ink) 9%, transparent);
  box-shadow:
    0 2px 6px -2px color-mix(in srgb, var(--pn-ink) 18%, transparent),
    0 30px 70px -24px color-mix(in srgb, var(--pn-ink) 45%, transparent);
  opacity: 0;
  transition:
    left var(--pn-med) var(--pn-ease),
    width var(--pn-med) var(--pn-ease),
    height var(--pn-med) var(--pn-ease),
    background-color var(--pn-slow) var(--pn-ease),
    -webkit-backdrop-filter var(--pn-slow) var(--pn-ease),
    backdrop-filter var(--pn-slow) var(--pn-ease),
    opacity var(--pn-fast) var(--pn-ease);
}
.gs-pnav__usurface.no-anim { transition: opacity var(--pn-fast) var(--pn-ease); }
.gs-pnav.is-upanel-open .gs-pnav__usurface { opacity: 1; }
/* neutral hairline lip — keeps utility a distinct, quiet tier (no colored accent) */
.gs-pnav__usurface::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pn-ink) 30%, transparent), color-mix(in srgb, var(--pn-ink) 8%, transparent) 70%, transparent);
  opacity: 0.9;
}
.gs-pnav.is-scrolled .gs-pnav__usurface {
  background: color-mix(in srgb, var(--pn-white) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
}
@supports not (backdrop-filter: blur(1px)) {
  .gs-pnav.is-scrolled .gs-pnav__usurface { background: var(--pn-white); }
}
/* Inside the udock the pop is just the surface's crossfading content: drop its
   own frame/lip/entrance (the usurface provides them) and gate by opacity so the
   morph reads cleanly, exactly like the mega panels. */
html.gs-pnav-on .gs-pnav__udock .gs-pnav__pop {
  position: absolute;
  top: 10px; left: 0; right: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--pn-fast) var(--pn-ease), visibility 0s linear var(--pn-fast);
}
html.gs-pnav-on .gs-pnav__udock .gs-pnav__pop::before { content: none; }
html.gs-pnav-on .gs-pnav__udock .gs-pnav__pop.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: none;
  transition-delay: 0s, 0s;
}
html.gs-pnav-on .gs-pnav__udock .gs-pnav__pop.is-measuring {
  visibility: hidden; opacity: 0; pointer-events: none; display: block;
}

/* ---------- No-JS fallback ----------
   Panels live inside their items; without the JS engine, hover/focus-within
   reveals them as classic dropdowns and top-level links stay plain links. */
html:not(.gs-pnav-on) .gs-pnav__slot .gs-pnav__panel {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: var(--pn-white);
  border: 1px solid var(--pn-line);
  border-radius: var(--pn-r-panel);
  box-shadow: var(--gs-shadow-xl, 0 30px 70px -20px rgba(6, 42, 71, 0.55));
  z-index: 5;
}
html:not(.gs-pnav-on) .gs-pnav__item:hover .gs-pnav__slot .gs-pnav__panel,
html:not(.gs-pnav-on) .gs-pnav__item:focus-within .gs-pnav__slot .gs-pnav__panel { display: block; }
html:not(.gs-pnav-on) .gs-pnav__pop { display: none; }
html:not(.gs-pnav-on) .gs-pnav__util:hover .gs-pnav__pop,
html:not(.gs-pnav-on) .gs-pnav__util:focus-within .gs-pnav__pop { display: block; }
html:not(.gs-pnav-on) .gs-pnav__pane[hidden] { display: none; }
html:not(.gs-pnav-on) .gs-pnav__burger { display: none; }

/* ---------- Mobile ----------
   Signature animated mark: three bars of staggered widths that, on open, spin
   the whole box a quarter turn (springy overshoot) while the bars cascade into
   a centered X and the middle bar irises out from the center. Distinctive
   motion, familiar end state. */
.gs-pnav__burger {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 12px;
  background: transparent; color: inherit;
  cursor: pointer;
  transition: background-color var(--pn-fast) var(--pn-ease);
}
.gs-pnav__burger:hover { background: color-mix(in srgb, var(--pn-ink) 6%, transparent); }
.gs-pnav[data-theme="dark"] .gs-pnav__burger:hover { background: rgba(255, 255, 255, 0.1); }
.gs-pnav__burger:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: 2px; }
.gs-pnav__burger-box {
  position: relative; width: 24px; height: 16px; display: inline-block;
  transition: transform var(--pn-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gs-pnav__burger[aria-expanded="true"] .gs-pnav__burger-box { transform: rotate(90deg); }
.gs-pnav__burger-box span {
  position: absolute; height: 2px;
  border-radius: 2px; background: currentColor;
  transform-origin: center;
  transition: transform var(--pn-med) cubic-bezier(0.34, 1.56, 0.64, 1),
              width var(--pn-med) var(--pn-ease),
              opacity 120ms var(--pn-ease),
              top var(--pn-med) cubic-bezier(0.34, 1.56, 0.64, 1),
              left var(--pn-med) var(--pn-ease),
              background-color var(--pn-med) var(--pn-ease);
}
/* staggered, asymmetric resting state (a subtle signal-bars look) */
.gs-pnav__burger-box span:nth-child(1) { top: 1px;  left: 0;   width: 24px; transition-delay: 0ms; }
.gs-pnav__burger-box span:nth-child(2) { top: 7px;  left: 4px; width: 20px; transition-delay: 40ms; }
.gs-pnav__burger-box span:nth-child(3) { top: 13px; left: 0;   width: 16px; transition-delay: 80ms; }
.gs-pnav__burger[aria-expanded="true"] .gs-pnav__burger-box span { background: var(--pn-accent); }
.gs-pnav__burger[aria-expanded="true"] .gs-pnav__burger-box span:nth-child(1) { top: 7px; left: 1px; width: 22px; transform: rotate(45deg); }
.gs-pnav__burger[aria-expanded="true"] .gs-pnav__burger-box span:nth-child(2) { width: 0; left: 12px; opacity: 0; }
.gs-pnav__burger[aria-expanded="true"] .gs-pnav__burger-box span:nth-child(3) { top: 7px; left: 1px; width: 22px; transform: rotate(-45deg); }

.gs-pnav__drawer-logo { display: inline-flex; align-items: center; color: var(--pn-ink); border-radius: 6px; }
.gs-pnav__drawer-logo svg { height: 26px; width: auto; display: block; }
.gs-pnav__drawer-logo:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: 3px; }

/* Scrim unused (the sheet is opaque and covers the page below the pill). */
.gs-pnav__scrim { display: none; }

/* The menu sheet slides out from UNDER the pill: anchored at the pill's bottom
   (top set by JS) and revealed top-to-bottom with a clip-path wipe, so it looks
   like it unrolls out from behind the bar. The bar (logo + hamburger, which
   morphs to an X) stays visible and is the only toggle — no duplicate chrome.
   z-index sits below the pill so the pill always overlaps the sheet's top.
   The sheet's top is pulled UP behind the pill by the bar radius so the sheet
   fill sits behind the pill's rounded bottom corners — otherwise those corner
   nooks expose the page through the glass. The overlap is added back as top
   padding so content still starts just below the pill. */
.gs-pnav__drawer {
  position: fixed;
  top: calc(var(--pn-drawer-top, var(--pn-bar-h)) - var(--pn-r-bar));
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: flex; flex-direction: column;
  padding-top: calc(8px + var(--pn-r-bar));
  background: var(--pn-white);
  color: var(--pn-ink);
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--pn-ink) 55%, transparent);
  transition: clip-path var(--pn-slow) var(--pn-ease);
}
.gs-pnav__drawer.is-open { clip-path: inset(0 0 0 0); }
.gs-pnav__drawer[hidden] { display: none; }
.gs-pnav[data-theme="dark"] .gs-pnav__drawer { background: var(--pn-ink); color: var(--pn-white); }

.gs-pnav__drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  flex: 0 0 auto;
  padding: 16px 14px 16px 22px;
  border-bottom: 1px solid var(--pn-line);
}
.gs-pnav__drawer-brand {
  position: relative;
  font-family: var(--pn-heading);
  font-size: 1.15rem; font-weight: 700;
  color: var(--pn-ink);
  padding-left: 16px;
}
.gs-pnav__drawer-brand::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 9px; height: 9px; margin-top: -4px;
  border-radius: 50%;
  background: var(--pn-bright);
}
.gs-pnav__drawer-search {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
  margin: 16px 16px 6px;
  padding: 0 14px;
  border: 1.5px solid var(--pn-line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--pn-mist) 55%, var(--pn-white));
  color: var(--pn-body);
}
.gs-pnav__drawer-search:focus-within { border-color: var(--pn-accent); background: var(--pn-white); }
.gs-pnav__drawer-search-input {
  flex: 1;
  min-height: 48px;
  border: 0; outline: none;
  background: transparent;
  /* 16px min: anything smaller makes iOS/Android zoom in on focus */
  font-family: inherit; font-size: 16px;
  color: var(--gs-charcoal, #2f2f2f);
}
/* ---------- Drill-down sheet (mobile) ----------
   The sheet is a horizontal viewport: the root list sits underneath, and each
   subpanel is parked off to the right and slides in over it (Ramp-style), with
   a Back header to return. Keeps everything above the fold — no accordion push. */
.gs-pnav__sheet {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.gs-pnav__mpanel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--pn-white);
}
.gs-pnav[data-theme="dark"] .gs-pnav__mpanel { background: var(--pn-ink); }
.gs-pnav__msub {
  /* parked off to the right; the sheet's overflow:hidden clips it, and `inert`
     (set in HTML / toggled by JS) keeps it out of the tab order + SR flow. No
     visibility toggling — one fewer moving part that a CSS pipeline could drop. */
  transform: translateX(100%);
  z-index: 1;
  transition: transform var(--pn-slow) var(--pn-ease);
}
/* Depth shadow only on the ACTIVE panel (as it slides over the root). Parked
   panels sit just off the right edge, so their left-edge shadow would otherwise
   bleed a grey band into the visible sheet. */
.gs-pnav__msub.is-active {
  transform: translateX(0);
  box-shadow: -14px 0 34px -24px color-mix(in srgb, var(--pn-ink) 55%, transparent);
}
.gs-pnav__mscroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 10px 16px;
}
/* Back header on a subpanel */
.gs-pnav__mback-row {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  padding: 8px 10px;
  border-bottom: 1px solid var(--pn-line);
}
.gs-pnav__mback {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0; border-radius: 10px;
  background: transparent; color: inherit;
  font-family: inherit; font-size: 0.95rem; font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .gs-pnav__mback:hover { background: var(--pn-mist); } }
.gs-pnav__mback:active { background: var(--pn-mist); }
.gs-pnav__mback:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: -2px; }
.gs-pnav__mtitle {
  margin-left: auto;      /* push to the right, clear of the Back button */
  padding-right: 4px;
  font-family: var(--pn-heading);
  font-size: 1rem; font-weight: 700; color: var(--pn-ink);
}
.gs-pnav[data-theme="dark"] .gs-pnav__mtitle { color: var(--pn-white); }
/* drill chevron: plain right arrow (no circle); flips left for Back */
.gs-pnav__mchev { width: 1.1em; height: 1.1em; flex: 0 0 auto; opacity: 0.5; }
.gs-pnav__mchev--left { transform: rotate(180deg); opacity: 0.9; }
/* search sits inside the root scroll area now */
.gs-pnav__drawer-search { margin: 6px 6px 12px; }

.gs-pnav__acc-list { list-style: none; margin: 0; padding: 0; }
/* every row — primary and utility alike — uses the same divider so the vertical
   rhythm is uniform top to bottom (no special gap before the utility group). */
.gs-pnav__acc-item + .gs-pnav__acc-item { border-top: 1px solid color-mix(in srgb, var(--pn-line) 70%, transparent); }

.gs-pnav__acc-btn, .gs-pnav__acc-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  min-height: 52px;
  /* symmetric vertical margin so the rounded highlight floats with equal space
     above and below and never touches the divider lines */
  margin-block: 4px;
  padding: 13px 10px 13px 12px;
  border: 0; border-radius: 11px;
  background: transparent;
  color: inherit;
  font-family: inherit; font-size: 1.02rem; font-weight: 700; text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* hover only on real pointers so a touch tap doesn't leave a sticky, misplaced
   highlight; touch gets a clean rounded press state via :active instead. */
@media (hover: hover) {
  .gs-pnav__acc-btn:hover, .gs-pnav__acc-link:hover { background: var(--pn-mist); }
}
.gs-pnav__acc-btn:active, .gs-pnav__acc-link:active { background: var(--pn-mist); }
.gs-pnav__acc-btn:focus-visible, .gs-pnav__acc-link:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: -2px; }
/* chevron sits in a soft circle that fills green when open */
.gs-pnav__acc-btn .gs-pnav__chev {
  width: 1.5em; height: 1.5em; padding: 0.35em;
  border-radius: 50%;
  background: var(--pn-mist);
  opacity: 1;
  transition: transform var(--pn-fast) var(--pn-ease), background-color var(--pn-fast) var(--pn-ease), color var(--pn-fast) var(--pn-ease);
}
.gs-pnav__acc-btn[aria-expanded="true"] .gs-pnav__chev {
  transform: rotate(180deg);
  background: color-mix(in srgb, var(--pn-bright) 22%, var(--pn-white));
  color: var(--pn-accent);
}

/* Smoothly animate accordion open/close via the grid-rows 0fr->1fr trick
   (no JS height measurement). JS toggles .is-open + inert. */
.gs-pnav__acc-panel {
  display: grid;
  /* minmax(0, …) forces the track minimum to 0 — a bare 0fr keeps an implicit
     min-content minimum, so the collapsed panel leaves a sliver of height that
     pushes the next divider down and makes the row highlight look top-biased. */
  grid-template-rows: minmax(0, 0fr);
  overflow: hidden;
  transition: grid-template-rows var(--pn-med) var(--pn-ease);
}
.gs-pnav__acc-panel.is-open { grid-template-rows: minmax(0, 1fr); }
/* Clip to the collapsing track AND hard-hide when closed: visibility flips to
   hidden only after the collapse finishes (delay = --pn-med) so no sliver of the
   first eyebrow/link can peek through at rest, then back to visible instantly on
   open. Belt-and-suspenders against sub-pixel grid rounding. */
.gs-pnav__acc-panel > .gs-pnav__acc-panel-in {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear var(--pn-med);
}
.gs-pnav__acc-panel.is-open > .gs-pnav__acc-panel-in {
  visibility: visible;
  transition-delay: 0s;
}
.gs-pnav__acc-panel-in { padding: 0 6px 14px; }
.gs-pnav__acc-eyebrow { margin: 10px 6px 4px; }
.gs-pnav__acc-subeyebrow {
  margin: 10px 6px 2px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--pn-body) 70%, transparent);
}
.gs-pnav__acc-links { list-style: none; margin: 0; padding: 0; }
.gs-pnav__acc-sub {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--pn-ink);
  font-size: 0.9375rem; font-weight: 600;
  text-decoration: none;
}
.gs-pnav__acc-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 9px;
  background: var(--pn-mist);
  color: var(--pn-accent);
  font-size: 1.05rem;
}
.gs-pnav__acc-sub { -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  .gs-pnav__acc-sub:hover { background: var(--pn-mist); }
  .gs-pnav__acc-sub:hover .gs-pnav__acc-chip { background: color-mix(in srgb, var(--pn-bright) 24%, var(--pn-white)); }
}
.gs-pnav__acc-sub:active { background: var(--pn-mist); }
.gs-pnav__acc-sub:active .gs-pnav__acc-chip { background: color-mix(in srgb, var(--pn-bright) 24%, var(--pn-white)); }
.gs-pnav__acc-sub:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: -2px; }
.gs-pnav__acc-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 10px 6px 0;
  min-height: 44px;
  padding: 8px 2px;
  font-size: 0.9rem; font-weight: 700;
  color: var(--pn-accent);
  text-decoration: none;
}
.gs-pnav__acc-cta .gs-pnav__ico { font-size: 0.8rem; transition: transform var(--pn-fast) var(--pn-ease); }
.gs-pnav__acc-cta:hover .gs-pnav__ico { transform: translateX(3px); }
.gs-pnav__acc-cta:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: 2px; border-radius: 6px; }
.gs-pnav__drawer-ctas {
  display: flex; flex-direction: column; gap: 10px;
  flex: 0 0 auto;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--pn-line);
  background: var(--pn-white);
}
.gs-pnav__drawer-ctas .gs-pnav__cta { margin-left: 0; width: 100%; min-height: 50px; font-size: 0.95rem; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .gs-pnav *,
  .gs-pnav *::before,
  .gs-pnav *::after { transition: none !important; animation: none !important; }
  .gs-pnav__drawer { transform: none; }
  .gs-pnav__drawer[hidden] { display: none; }
}

/* ---------- Responsive ladder ----------
   The switch to the drawer is driven by MEASURED overflow, not a fixed width:
   module.js compares the inline row's natural width to the available bar width
   and toggles .gs-pnav.is-compact when it wouldn't fit. So the breakpoint tracks
   the actual item set (labels, count, zoom, font scaling) and never needs a
   manual bump — add a nav item and the drawer just takes over a little sooner.
   The @media block below is only the no-JS fallback. */
.gs-pnav.is-compact .gs-pnav__list,
.gs-pnav.is-compact .gs-pnav__util,
.gs-pnav.is-compact .gs-pnav__search,
.gs-pnav.is-compact .gs-pnav__right .gs-pnav__cta,
.gs-pnav.is-compact .gs-pnav__dock { display: none; }
.gs-pnav.is-compact .gs-pnav__burger { display: inline-flex; }
.gs-pnav.is-compact { --pn-bar-h: 60px; }
.gs-pnav.is-compact .gs-pnav__logo { margin-right: 0; }
.gs-pnav.is-compact .gs-pnav__right { gap: 8px; }

/* No-JS fallback: without measurement we can't be exact, so below a safe width
   drop the utility/search/in-bar CTA and let the top links wrap to a tidy row
   (wrapping never overlaps). The JS path above supersedes this whenever JS runs. */
@media (max-width: 1179px) {
  html:not(.gs-pnav-on) .gs-pnav__util,
  html:not(.gs-pnav-on) .gs-pnav__search,
  html:not(.gs-pnav-on) .gs-pnav__right .gs-pnav__cta,
  html:not(.gs-pnav-on) .gs-pnav__dock { display: none; }
  html:not(.gs-pnav-on) .gs-pnav__inner { flex-wrap: wrap; row-gap: 4px; }
  html:not(.gs-pnav-on) .gs-pnav__list {
    display: flex; flex-wrap: wrap; gap: 0;
    order: 10; width: 100%;
    padding-bottom: 8px;
  }
  html:not(.gs-pnav-on) .gs-pnav__slot .gs-pnav__panel { display: none !important; }
}
@media (max-width: 560px) {
  /* phone: full-bleed sheet */
  .gs-pnav__drawer { width: 100vw; border-radius: 0; }
  .gs-pnav__inner { gap: 6px; }
}