/* =========================================================
   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-top:       var(--gs-charcoal, #2f2f2f);   /* nav link text — darkest gray, so the harbor wordmark + primary CTA own the deep harbor */
  --pn-body:      var(--gs-slate, #41505b);
  --pn-accent:    var(--gs-green-cta, #0a8744);
  --pn-bright:    var(--gs-green, #85c441);
  --pn-teal:      var(--gs-teal, #457aba);    /* Harbor-300 */
  --pn-orange:    var(--gs-warning, #e6a219); /* palette warning (was off-palette orange) */
  --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. The scrolled bar's bottom corners
     use the design-system panel radius (--gs-radius-md) rather than a one-off. */
  --pn-r-bar:     var(--gs-radius-md, 12px);
  --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; }

/* ---------- Nav swap (driven from outside this module) ----------
   A section control can ask to stand in for this bar while its own section owns
   the screen — today that is the gs-bento industry selector's "Take the nav's
   place" mode. That module puts .gs-navswap on <html> and hangs its own
   half-pill in this slot; the bar retracts upward and stops taking pointer
   events until the class is removed.

   The contract is one class on the root element and nothing else: this module
   never learns about gs-bento, gs-bento never reaches into these internals, and
   a page with no nav (or no bento) is unaffected. The swapping module is
   responsible for skipping the swap while this nav is compact (drawer layout),
   so the menu button is never the thing that gets hidden. */
html.gs-navswap .gs-pnav__bar {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--pn-slow) var(--pn-ease), opacity var(--pn-slow) var(--pn-ease);
}
.gs-pnav__bar { transition: transform var(--pn-slow) var(--pn-ease), opacity var(--pn-slow) var(--pn-ease); }
@media (prefers-reduced-motion: reduce) {
  html.gs-navswap .gs-pnav__bar, .gs-pnav__bar { transition: none; }
}

/* 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);
  /* Was this recipe inline; now the shared --gs-shadow-bar token, which resolves
     to exactly the same value (--pn-ink is --gs-navy). The gs-bento selector's
     nav-swap mode reads the same token, so a control standing in for this bar
     cannot drift away from the shadow it is standing in for. */
  box-shadow: var(--gs-shadow-bar, 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); --pn-top: 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;
  /* Never shrink below content: if the row can't fit, the measured overflow trips
     the drawer (see evaluateLayout) instead of the last link spilling onto the
     search icon. */
  flex: 0 0 auto;
}
.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: var(--pn-top);
  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,
.gs-pnav__utillink.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: var(--pn-top);
  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: var(--pn-top);
  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; }

/* Header CTAs use the shared .gs-btn system: primary = Primary solid (Fern),
   secondary "sign in" = Tertiary ghost, both Medium. The nav only owns spacing
   between them here — chrome/color/states/lift/focus all come from .gs-btn.
   The ghost gets .gs-btn--on-dark on a dark bar (added in module.html). */
.gs-pnav__cta { margin-left: 6px; }

/* ---------- 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);
}
/* Panel is a 2-column shell: the body (heading + link grid) and the full-height
   aside. Making the aside a sibling of the body — not a child of panel-cols below
   the heading — lets the featured promo span the whole panel height (up alongside
   the heading) instead of forcing the panel taller. */
.gs-pnav__panel-in { display: flex; align-items: stretch; gap: clamp(16px, 2vw, 26px); padding: clamp(18px, 2vw, 26px); }
.gs-pnav__panel-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.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: var(--gs-eyebrow-weight, 500);
  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: 14px; grid-template-columns: repeat(3, minmax(0, 208px)); justify-content: start; }

/* ----- 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; }

/* Paper icons (hosted set) render as images; let the artwork carry the color, so
   drop the tinted tile background/hover-tint behind them. Sized to sit in the
   tile like the line icons; tune once the real assets are in. */
.gs-pnav__ico--paper { width: 44px; height: 44px; object-fit: contain; }
/* Paper icons render at their full 44×44; the container sizes to fit and drops
   its tinted background so the artwork carries its own color. */
.gs-pnav__card-tile:has(.gs-pnav__ico--paper),
.gs-pnav__acc-chip:has(.gs-pnav__ico--paper) { width: 44px; height: 44px; background: transparent; }
.gs-pnav__card:hover .gs-pnav__card-tile:has(.gs-pnav__ico--paper) { background: transparent; }

.gs-pnav__card-body { min-width: 0; }
.gs-pnav__card-title {
  display: flex; align-items: center;
  font-family: var(--pn-sans);   /* Algebra is reserved for the panel top title only */
  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); }
/* Featured resource promos are title-only; the Explore list keeps its subtexts. */
.gs-pnav__panel[data-layout="panel_resources"] .gs-pnav__card--featured .gs-pnav__card-desc { display: none; }
.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) — a real, lift-on-hover card: full-bleed
   cover, a category chip, a two-line headline, and an excerpt. Reads as an
   editorial promo, not a thumbnail. */
.gs-pnav__card--featured {
  flex-direction: column; gap: 0;
  padding: 0;
  background: var(--pn-white);
  border: 1px solid var(--pn-line);
  border-radius: var(--pn-r-card);
  overflow: hidden;
  box-shadow: var(--gs-shadow-sm, 0 1px 2px rgba(6, 42, 71, 0.06));
  transition: transform var(--pn-fast) var(--pn-ease), box-shadow var(--pn-fast) var(--pn-ease), border-color var(--pn-fast) var(--pn-ease);
}
.gs-pnav__card--featured:hover {
  background: var(--pn-white);
  transform: translateY(-3px);
  box-shadow: var(--gs-shadow-md, 0 20px 44px -24px rgba(6, 42, 71, 0.42));
  border-color: color-mix(in srgb, var(--pn-accent) 40%, transparent);
}
.gs-pnav__card-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--pn-mist), color-mix(in srgb, var(--pn-mist) 40%, var(--pn-white)));
}
.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.04); }
.gs-pnav__card-cat {
  display: inline-block;
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pn-accent);
  margin-bottom: 4px;
}
.gs-pnav__card--featured .gs-pnav__card-body { padding: 10px 12px 12px; }
.gs-pnav__card--featured .gs-pnav__card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 0.85rem; font-weight: 700; line-height: 1.3;
}
.gs-pnav__card--featured .gs-pnav__card-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 6px; font-size: 0.8rem; line-height: 1.45;
}

.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-sans);   /* Algebra is reserved for the panel top title only */
  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 promo ----- */
.gs-pnav__aside {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 12px;
  width: 296px; flex: 0 0 auto;   /* a touch wider so promo headlines fit one line */
  padding-left: clamp(16px, 2vw, 26px);
  border-left: 1px solid var(--pn-line);
}
/* Aside featured promo — a TALL, image-capable tile that fills the column. Default
   is the light harbor-fade card (dark text); the --deep modifier is the harbor-navy
   developer theme (light text), reserved for API / developer content. The optional
   image fills the top and fades into the body, where a DS primary-button CTA sits. */
.gs-pnav__featured {
  position: relative;
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;   /* adapt to the panel's left-column height; never force it taller */
  border-radius: var(--pn-r-card);
  overflow: hidden;
  text-decoration: none; color: inherit;
  background: var(--gs-grad-harbor-fade, linear-gradient(180deg, var(--gs-harbor-100, #e1e8ea) 0%, var(--gs-white, #ffffff) 100%));
  border: 1px solid var(--pn-line);
  box-shadow: var(--gs-shadow-sm, 0 1px 2px rgba(6, 42, 71, 0.06));
  transition: transform var(--pn-fast) var(--pn-ease), border-color var(--pn-fast) var(--pn-ease), box-shadow var(--pn-fast) var(--pn-ease);
}
.gs-pnav__featured:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--pn-accent) 40%, transparent);
  box-shadow: var(--gs-shadow-md, 0 20px 44px -24px rgba(6, 42, 71, 0.42));
}
.gs-pnav__featured:focus-visible { outline: 2px solid var(--pn-bright); outline-offset: 2px; }
/* Image fills the top and grows. Its BOTTOM is faded to transparent with a mask
   so the photo dissolves into the card's OWN background (light harbor-fade or deep
   navy) — a true alpha fade, not a fixed-color scrim that leaves a hard seam or a
   color step against the body. Works for both themes with no per-theme override. */
.gs-pnav__featured-img {
  /* flex-basis 0 (not auto): the img's intrinsic pixel height must NOT feed the
     card's min-height, or a short panel's card would be forced taller than its
     left column. The image only GROWS into whatever space the left column leaves. */
  position: relative; display: block; flex: 1 1 0; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
}
.gs-pnav__featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--pn-slow) var(--pn-ease); }
.gs-pnav__featured:hover .gs-pnav__featured-img img { transform: scale(1.05); }
/* Body over the surface; on the image-less card it grows so content settles to
   the bottom of the tall tile. */
.gs-pnav__featured-body { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 18px; }
.gs-pnav__featured:not(:has(.gs-pnav__featured-img)) .gs-pnav__featured-body {
  flex: 1 1 auto; justify-content: flex-end; padding-top: 22px;
}
.gs-pnav__featured-body .gs-pnav__eyebrow { margin: 0; color: var(--pn-accent); font-weight: 600; }
.gs-pnav__featured-title {
  display: block; margin: 0;
  font-family: var(--pn-heading);   /* Algebra display serif, matching the panel top title */
  font-size: 1.05rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--pn-ink);
}
.gs-pnav__featured-desc { display: block; margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--pn-body); }
/* CTA reads as the DS primary button: bright-green fill, navy label (AA on any surface). */
.gs-pnav__featured-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  align-self: flex-start; margin-top: 6px;
  padding: 9px 16px; border-radius: var(--gs-btn-radius, 8px);
  background: var(--pn-bright); color: var(--pn-ink);
  font-size: 0.85rem; font-weight: 600; white-space: nowrap;   /* match the DS primary button weight */
}
.gs-pnav__featured-link .gs-pnav__ico { font-size: 0.8rem; transition: transform var(--pn-fast) var(--pn-ease); }
.gs-pnav__featured:hover .gs-pnav__featured-link .gs-pnav__ico { transform: translateX(3px); }

/* Deep (developer) theme — dark harbor-navy gradient + green corner glow, light
   text. Reserved for API / developer-focused cards (feat_deep). */
.gs-pnav__featured--deep {
  background:
    radial-gradient(125% 85% at 100% 0%, color-mix(in srgb, var(--pn-bright) 30%, transparent) 0%, transparent 52%),
    linear-gradient(165deg, var(--gs-harbor-400, #1d3a5d) 0%, var(--gs-navy, #062a47) 70%);
  border-color: color-mix(in srgb, var(--pn-bright) 20%, var(--pn-line));
}
.gs-pnav__featured--deep:hover {
  border-color: color-mix(in srgb, var(--pn-bright) 55%, transparent);
  box-shadow: var(--gs-shadow-md, 0 24px 50px -24px rgba(6, 42, 71, 0.55));
}
.gs-pnav__featured--deep .gs-pnav__featured-body .gs-pnav__eyebrow { color: var(--pn-bright); }
.gs-pnav__featured--deep .gs-pnav__featured-title { color: #ffffff; }
.gs-pnav__featured--deep .gs-pnav__featured-desc { color: rgba(255, 255, 255, 0.76); }

/* ---------- 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: var(--pn-top);   /* darkest gray, matching the desktop top-level items (white in dark theme) */
  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; height: auto; min-height: 50px; }

/* ---------- 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; }

/* Compact desktop row — the full item set (top links + search + utilities + CTA)
   is tight against the content cap, so the search icon can collide with the last
   menu item. Tighten the menu (less side padding, a hair smaller label, tighter
   chevron + gaps) so the row stays clean on ONE line, instead of the last link
   overflowing onto the search or dropping to the mobile drawer early.
   NOTE: no upper bound. The bar's inner is capped at the 1280 content width, so
   the row is at that same tight width at EVERY viewport ≥1301 too — the full-size
   layout never fits the cap, which is why the collision reappeared above 1300px
   when this only ran up to 1300. Only applies while the desktop row is shown
   (the compact drawer hides the list anyway). */
@media (min-width: 1180px) {
  .gs-pnav__toplink { padding-inline: 9px; font-size: 0.875rem; gap: 4px; }
  .gs-pnav__list { gap: 0; }
  .gs-pnav__utillink { padding-inline: 8px; }
  .gs-pnav__right { gap: 4px; }
}

/* 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; }
}