/* Site-specific tweaks layered on top of the Webflow CSS. */

/* Replicates the exact Webflow IX2 SCROLL_INTO_VIEW animation that targets
   .fade-in-first / -second / -third / -fourth and [data-w-id] elements.
   Spec extracted from the live IX2 store:
     - Initial state: opacity 0, translateY(36px)
     - Reveal: 300ms ease-out, simultaneous opacity + transform
     - Stagger between tiers: 0 / 300 / 600 / 900ms
   The .in-view class is added by site.js via IntersectionObserver. */
@media (min-width: 992px) {
  .fade-in-first,
  .fade-in-second,
  .fade-in-third,
  .fade-in-fourth,
  [data-animate] {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition:
      opacity 300ms ease-out,
      transform 300ms ease-out;
    will-change: opacity, transform;
  }

  .fade-in-first.in-view,
  [data-animate].in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0ms;
  }

  .fade-in-second.in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 300ms;
  }

  .fade-in-third.in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 600ms;
  }

  .fade-in-fourth.in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 900ms;
  }
}

/* Mobile nav open state — webflow.js used to toggle this; now our small script does. */
.w-nav-menu.is-open {
  display: flex;
}

/* CTA inside the mobile nav menu — duplicated on desktop by the Navbar's
   right slot, so hide there. */
@media (min-width: 992px) {
  .nav-link.mobile-cta {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .w-nav-menu {
    display: none;
  }
  .w-nav-menu.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow-y: auto;
  }
  body.menu-open {
    overflow: hidden;
  }
}

/* Make the hamburger button reset look clean. */
.menu-button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Reduce-motion users get no animation. */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  .fade-in-first,
  .fade-in-second,
  .fade-in-third,
  .fade-in-fourth {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Semantic headings (SEO/accessibility): the hero/section headlines were
   originally <div>s carrying the .heading-* visual classes. We now use real
   <h1>/<h2>/<h3> tags with the same classes. The classes already control
   size/weight/line-height (they beat the element rules on specificity), but
   the browser's/Webflow's default heading MARGIN is not set by the classes,
   so zero it here — scoped to design headings so the 404 page's plain <h1>
   is untouched. Result: the tags render pixel-identical to the former divs. */
:is(h1, h2, h3, h4, h5, h6).heading-one,
:is(h1, h2, h3, h4, h5, h6).heading-two,
:is(h1, h2, h3, h4, h5, h6).heading-three,
:is(h1, h2, h3, h4, h5, h6).heading-four {
  margin: 0;
}