/* Loaded after page styles: every page uses the same navigation geometry. */
/* Font bytes are embedded in site-fonts.css, loaded early in every document head. */
.topbar, .mega, .searchbar {
  --green: #064e04;
  --green-dk: #0a6b06;
  --ink: #14140f;
  --parchment: #f5f5eb;
  --white: #fff;
  --ash: #d2d2c8;
  --graphite: #6e6e64;
  font-family: 'Agro Navigation', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-synthesis: none;
  font-kerning: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-variant: normal;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.topbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(1180px, calc(100vw - 32px));
  min-height: 67.75px;
  padding: 10px 12px 10px 24px;
  border: 1px solid rgba(210,210,200,.9);
  border-radius: 9999px;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* The source logo is 1482 × 485. Reserve its slot before it decodes. */
.topbar > a:first-child { flex: 0 0 auto; }
.topbar .logo {
  display: block;
  width: calc(36px * 1482 / 485);
  height: 36px;
  object-fit: contain;
}
.topbar .topnav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 28px;
  font-size: 14.5px;
}
.topbar .top-right { flex: 0 0 auto; }
.topbar .t-icon { flex: 0 0 36px; }
.topbar .cta-lime { line-height: 1.5; }
.topbar .topnav > a, .topbar .nav-item > a {
  /* A hover underline should not fade back in on the destination page. */
  transition: none;
}
@media (max-width: 1000px) {
  .topbar .topnav { gap: 18px; font-size: 13.5px; }
}
@media (max-width: 900px) {
  .topbar .topnav { display: none; }
}


/* Desktop navigation: open page header becomes a centered floating capsule.
   Progress is scroll-linked; only the fixed navigation geometry changes. */
:root { --nav-progress: 0; }
@media (min-width: 901px) {
  .topbar {
    --nav-wide: min(1440px, calc(100vw - 64px));
    --nav-compact: min(1100px, calc(100vw - 32px));
    width: calc(var(--nav-wide) * (1 - var(--nav-progress)) + var(--nav-compact) * var(--nav-progress));
    top: calc(24px - 8px * var(--nav-progress));
    gap: calc(40px - 16px * var(--nav-progress));
    padding: 10px 16px;
    background: rgba(255, 255, 255, calc(.96 * var(--nav-progress)));
    border-color: rgba(210, 210, 200, calc(.75 * var(--nav-progress)));
    box-shadow: 0 7px 24px rgba(26, 48, 16, calc(.07 * var(--nav-progress)));
    -webkit-backdrop-filter: blur(calc(18px * var(--nav-progress)));
    backdrop-filter: blur(calc(18px * var(--nav-progress)));
    transition: none;
  }
  .topbar .topnav { margin-right: auto; }
  .mega, .searchbar { top: calc(100px - 8px * var(--nav-progress)); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .topbar {
    --nav-wide: calc(100vw - 32px);
    --nav-compact: calc(100vw - 32px);
    gap: 12px;
  }
  .topbar .topnav { gap: 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  .topbar { width: var(--nav-compact); top: 16px; gap: 24px; }
  .mega, .searchbar { top: 92px; }
}