@media (min-width: 992px) {
    .nav-button .button { background-color: #fffcfa !important; }
    .nav-button .button .btn-text, .nav-button .button .arrow-wrap_button { color: #243523 !important; }
    .nav.scrolled .nav-button .button { background-color: #243523 !important; }
    .nav.scrolled .nav-button .button .btn-text, .nav.scrolled .nav-button .button .arrow-wrap_button { color: #fffcfa !important; }
  }

  .nav-cta-video {
    display: inline-flex !important; align-items: center; gap: 0.45em;
    color: #d6af0b !important; font-weight: 700;
  }
  .nav-cta-video__icon { flex-shrink: 0; }

  /* The header CTA used Webflow's default pill border-radius (100rem),
     a full round that clashes with the header bar's own 12px rounded
     corners instead of nesting inside them. */
  @media (min-width: 992px) {
    .nav-button .button { border-radius: 6px !important; }

    /* Webflow's own :hover rule swaps the button background to cream but
       sets the hover text color from --button--hover-text, which in this
       component's scope also resolves to cream - invisible white-on-white
       text. Force the text (and arrow icon) dark green on hover instead. */
    .nav.scrolled .nav-button .button:hover { background-color: #fffcfa !important; }
    .nav.scrolled .nav-button .button:hover .btn-text, .nav.scrolled .nav-button .button:hover .arrow-wrap_button { color: #243523 !important; }
  }

  .hero-cta-video__icon { flex-shrink: 0; }

  /* A bit more breathing room between the very top of the page and the
     top of the white nav pill (was just 10px). */
  .nav { padding-top: 24px !important; }
  /* Subtle shadow so the white nav pill separates from light/white
     page backgrounds behind it, where it would otherwise blend in
     completely (border-less white-on-white). */
  .container.cc-nav { box-shadow: 0 2px 14px rgba(20,30,20,0.10); }

  /* Center the remaining nav links on the FULL header bar (including the
     logo's space), not just within the leftover space after the logo -
     a first pass grid-ing .nav-menu_container centered relative to that
     narrower sub-box, which visually reads off-center since the logo
     eats space to its left. Making the two wrapper levels (<nav> and
     .nav-menu_container) `display: contents` promotes .nav-menu_center/
     .nav-menu_end to be direct grid items of .container.cc-nav itself,
     alongside the logo, so a 1fr/auto/1fr grid there truly centers
     against the whole bar: both 1fr tracks are forced equal regardless
     of their own content's width, so the logo's track mirrors however
     wide the Login/Demo track is. Scoped to desktop only - this media
     query never fires below 992px, so the mobile full-screen dropdown
     (which reuses this exact markup) is untouched. (An absolute+transform
     version of just .nav-menu_center was tried first, but an
     absolutely-positioned flex container has to shrink-to-fit its own
     width, and something about this markup made that collapse to a too-
     narrow box that wrapped the links onto extra lines - grid sidesteps
     that sizing ambiguity entirely.) */
  /* .nav-menu_center/.nav-menu_end are wrapper divs added for the desktop
     centering grid above - they don't exist in the original markup, where
     every nav link was a direct flex child of .nav-menu_container. That
     container is display:flex/align-items:center on mobile too, and the
     vendor CSS's .nav-link{width:100%} only fills whatever it's a direct
     percentage-child of. With the links now one level deeper, that 100%
     resolves against the wrapper's own shrink-to-fit width instead of the
     full menu width, so the wrappers (and therefore every link in them)
     end up centered and narrow instead of stretched full-width and left-
     aligned like the rest of the mobile menu. */
  @media (max-width: 991px) {
    .nav-menu_center, .nav-menu_end { width: 100%; }
  }

  @media (min-width: 992px) {
    .container.cc-nav { display: grid !important; grid-template-columns: 1fr auto 1fr; }
    .nav-logo_wrapper { grid-column: 1; }
    .nav-menu.w-nav-menu, .nav-menu_container { display: contents; }
    .nav-menu_center { grid-column: 2; justify-self: center; display: flex; align-items: center; }
    .nav-menu_end { grid-column: 3; justify-self: end; display: flex; align-items: center; }
    .nav-menu_end > * { flex-shrink: 0; }

    /* .nav-menu's own position:relative/z-index:2 (meant to keep nav links
       above the absolutely-positioned .mega_menu-wrapper) is inert once it's
       display:contents - contents boxes generate no box of their own, so
       position/z-index on the element do nothing, and its children fall back
       to being unpositioned static content that paints *behind* the
       positioned .mega_menu-wrapper on hover, covering the whole pill in
       white. Re-establish that stacking directly on the children instead. */
    .nav-logo_wrapper, .nav-menu_center, .nav-menu_end {
      position: relative;
      z-index: 2;
    }
    /* .nav-button also carries Webflow's generic .container utility
       (width:100%), which resolves against this flex row in a way that
       squeezed it down to a sliver, wrapping "Book a Demo" onto three
       lines inside a near-circle. It only ever needs to fit its own
       button, not act as a page-width container. */
    .nav-button.container { width: auto !important; max-width: none !important; }
  }

  /* The right side of the header pill had noticeably more padding than
     the top/bottom breathing room around its content; match them. */
  @media (min-width: 991px) {
    .container.cc-nav { padding-right: 8px !important; }
  }

  /* The vendor CSS's .nav-dropdown_overlay is a 100vw/100vh, backdrop-
     filter:blur(40px) layer meant to frost the whole page behind the open
     mega menu. Now that it's correctly nested (see the earlier fix moving
     it back under .container.cc-nav), its :has() trigger can finally match
     and the blur actually renders - covering the entire viewport in a
     heavy blur rather than just sitting behind the dropdown panel. Not the
     desired look; keep it fully disabled. */
  .nav-dropdown_overlay { display: none !important; }

  /* Any intentionally-oversized horizontal-scroll content (e.g. the
     testimonials marquee, width: max-content) is meant to be clipped by
     its own overflow:hidden wrapper, but that wrapper only clips
     visually - the oversized width still gets picked up as the
     document's own scrollable area, stretching any 0%-to-0%-positioned
     element (like the mobile nav's "Book a Demo" pill) out with it.
     This is a site-wide safety net so no page can blow out its mobile
     layout this way, regardless of what oversized content it adds. */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* ---------------------------------------------------------------------
     Below this point: Webflow's own original Navbar component CSS
     (scrolled-state colors, mega-menu hover-expand animation, hamburger
     bar animation, link underline hover, mobile menu icon color-swap).
     This used to be duplicated as an inline <style> block inside the nav
     markup on every single page (baked in by Webflow's export, not added
     by any of the fixes above) - folded in here so it's one copy instead
     of ~110. Untouched from the original content otherwise. */
  .nav {
    transition: transform 0.3s ease;
  }

  .nav.nav-hidden {
    transform: translateY(-100%);
  }

  .nav.scrolled .container.cc-nav {
    background-color: var(--_swatches---neutral--white);
  }

  .nav.scrolled .container.cc-nav .vertical-divider {
    background-color: var(--_swatches---main--dark-green);
  }

  .nav.scrolled .container.cc-nav .nav-logo_link .u-svg.cc-nav-icon,
  .nav.scrolled .container.cc-nav .nav-logo_link.w--current .u-svg.cc-nav-icon {
    color: var(--_swatches---main--gold);
  }

  @media screen and (min-width: 991px) {
    .nav.scrolled .container.cc-nav .nav-link,
    .nav.scrolled .container.cc-nav .nav-logo_link.w--current {
      color: var(--_swatches---main--dark-green);
    }
  }

  .nav.scrolled .container.cc-nav .nav-logo_link {
    color: var(--_swatches---main--dark-green);
  }

  .nav.scrolled .nav-menu_btn-bar {
    background-color: var(--_swatches---main--dark-green) !important;
  }

  @media screen and (min-width: 992px) {
    .mega_menu-wrapper {
      transition:
        height 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
        opacity 0.35s ease 0.2s;
    }

    .mega_menu.is--1 {
      display: block;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .container.cc-nav:has(.nav-link.cc-mega:hover) .mega_menu.is--1,
    .container.cc-nav:has(.mega_menu:hover) .mega_menu.is--1 {
      opacity: 1;
      pointer-events: auto;
      transition: opacity 0.2s ease 0.2s;
    }

    .container.cc-nav:hover .mega_menu-wrapper {
      display: block;
      opacity: 1;
      color: var(--_swatches---main--dark-green);
    }

    .container.cc-nav:hover .vertical-divider {
      background-color: var(--_swatches---main--dark-green);
    }

    .container.cc-nav:hover .nav-link,
    .container.cc-nav:hover .nav-logo_link.w--current,
    .container.cc-nav:hover .nav-logo_link {
      color: var(--_swatches---main--dark-green);
    }

    .container.cc-nav:hover .nav-logo_link .u-svg.cc-nav-icon,
    .container.cc-nav:hover .nav-logo_link.w--current .u-svg.cc-nav-icon {
      color: var(--_swatches---main--gold);
    }

    .container.cc-nav:has(.nav-link.cc-mega:hover) .mega_menu-wrapper,
    .container.cc-nav:has(.mega_menu:hover) .mega_menu-wrapper {
      height: 35rem;
      opacity: 1;
      transition:
        height 0.35s cubic-bezier(0, 0, 0.2, 1),
        opacity 0.25s ease;
    }

    .container.cc-nav:has(.nav-link.cc-mega:hover) .mega_menu.is--1,
    .container.cc-nav:has(.mega_menu:hover) .mega_menu.is--1 {
      display: block;
      opacity: 1;
      transition: opacity 0.2s ease 0.3s;
    }

    .container.cc-nav:has(.nav-link.cc-mega:hover) .nav-dropdown_overlay,
    .container.cc-nav:has(.mega_menu:hover) .nav-dropdown_overlay {
      opacity: 1;
      pointer-events: auto;
    }

    .nav:has(.nav-link.cc-mega:hover) .nav-dropdown_overlay,
    .nav:has(.mega_menu:hover) .nav-dropdown_overlay {
      opacity: 1;
      pointer-events: auto;
      display: block;
    }

    .nav-link {
      position: relative;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 0%;
      height: 1px;
      background: var(--_swatches---main--dark-green);
      transition: width 0.3s ease;
    }

    .nav-link:hover::after {
      width: calc(100% - 24px);
    }
  }

  .nav-logo_link .u-svg:last-child {
    color: currentColor;
    clip-path: inset(0% 0 0 0);
    transition:
      clip-path 0s,
      color 0s;
  }

  .nav-logo_link:hover .u-svg:last-child,
  .footer-logo_link:hover .u-svg {
    color: var(--_swatches---main--gold);
    clip-path: inset(0% 0 0 0);
    animation: fillUp 0.4s cubic-bezier(0, 0, 0.2, 1) forwards;
  }

  @keyframes fillUp {
    from {
      clip-path: inset(100% 0 0 0);
    }
    to {
      clip-path: inset(0% 0 0 0);
    }
  }

  @media (min-width: 992px) {
    .nav-menu:has(.nav-link.w--open) .nav-dropdown_overlay {
      display: block;
    }
  }

  body:has(.w-nav-button.w--open) {
    overflow: hidden;
  }

  .nav-menu_btn.w--open .cc-top {
    transform: translateY(9px) rotate(45deg);
  }
  .nav-menu_btn.w--open .cc-middle {
    opacity: 0;
    transform: translateY(0);
  }
  .nav-menu_btn.w--open .cc-bottom {
    transform: translateY(-9px) rotate(-45deg);
  }

  @media screen and (max-width: 991px) {
    .nav-button.container .button {
      background-color: var(--button--text);
      color: var(--button--bg);
      width: 100%;
    }

    .nav-button.container:hover {
      border: none;
    }

    .nav-button.container:hover .button .button-bg {
      border: none;
    }
  }

  @media screen and (min-width: 992px) {
    .nav-dropdown_link .circle-arrow {
      overflow: hidden;
      transition: border-color 0.3s ease;
    }

    .nav-dropdown_link .circle-arrow .u-svg {
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav-dropdown_link .circle-arrow::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      transform: translate(calc(-50% - 150px), -50%);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 5 20 14' fill='none' stroke='%231a3a2a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav-dropdown_link:hover .circle-arrow {
      border-color: var(--_swatches---main--dark-green);
    }

    .nav-dropdown_link:hover .circle-arrow .u-svg {
      transform: translateX(150px);
    }

    .nav-dropdown_link:hover .circle-arrow::after {
      transform: translate(-50%, -50%);
    }
  }

  @media screen and (max-width: 992px) {
    .nav-link.w--open .nav-link_dropicon {
      transform: rotate(0deg);
    }

    .nav-menu.w--open ~ .nav-logo_wrapper .nav-logo_link .u-svg.cc-nav-icon,
    body:has(.w-nav-button.w--open) .nav-logo_link .u-svg.cc-nav-icon {
      color: var(--_swatches---main--gold) !important;
    }

    .nav-menu.w--open ~ .nav-logo_wrapper .nav-logo_link .u-svg:not(.cc-nav-icon),
    body:has(.w-nav-button.w--open) .nav-logo_link .u-svg:not(.cc-nav-icon) {
      color: var(--_swatches---neutral--white) !important;
    }

    .nav-menu_btn.w--open {
      background-color: transparent !important;
    }

    .nav-menu_btn.w--open .nav-menu_btn-bar {
      background-color: var(--_swatches---neutral--white) !important;
    }
  }