/*
 * Zeftack responsive safety layer.
 * This stylesheet complements the exported Webflow CSS; it deliberately does
 * not replace its layouts, interactions, or animation definitions.
 */

html,
body {
  max-width: 100%;
}

img,
video,
svg,
canvas,
iframe {
  max-width: 100%;
}

.btn-primary-text[aria-hidden="true"] {
  pointer-events: none;
}

/* These are the moving-track viewports, not document-level overflow masks. */
.marquee-slider,
.brand-slider-area {
  overflow: hidden;
}

.offcanvas-menu[role="button"]:focus-visible,
.offcanvas-link:focus-visible,
.faq-tab-link:focus-visible,
.research-list-item:focus-visible,
.accordion-header:focus-visible,
.btn-primary:focus-visible,
.btn-outline-dark:focus-visible,
.btn-text-link:focus-visible,
.btn-newsletter:focus-visible,
.btn-submit:focus-visible,
.nav-link:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

@media screen and (max-width: 767px) {
  .offcanvas-menu[role="button"] {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .offcanvas-main {
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  body.zf-menu-open {
    overflow: hidden;
  }

  .service-list {
    flex-wrap: wrap;
  }

  .service-list-item,
  .service-list-text,
  .footer-top,
  .footer-newsletter,
  .newsletter-form,
  .single-input {
    min-width: 0;
  }

  .service-list-text {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .newsletter-input {
    min-width: 0;
    flex: 1 1 0;
  }

  .footer-info .section-content-sm {
    overflow-wrap: anywhere;
  }

  .form .input {
    min-height: 48px;
    font-size: 16px;
  }

  .form textarea.input {
    min-height: 144px;
  }
}

@media screen and (max-width: 479px) {
  .testimonial-slide-inner {
    padding-right: 16px;
    padding-left: 16px;
  }

  .testimonial-slide-item {
    flex: 0 0 calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }
}

/*
 * Webflow's IX3 bootstrap is not active on narrow viewports in the exported
 * homepage. Keep the real hero heading readable until the existing IX3
 * lifecycle is available; when it is, this selector no longer matches and
 * Webflow retains full ownership of the reveal.
 */
@media screen and (max-width: 991px) {
  html.w-mod-js:not(.w-mod-ix3) .hero-area .heading-two.text-white {
    visibility: visible !important;
  }

  /*
   * Exported inner-page title wrappers are initially hidden for IX3. On
   * narrow viewports where that bootstrap is unavailable, retain the real
   * content instead. Once IX3 initializes, this fallback no longer matches
   * and the existing reveal interaction remains fully in control.
   */
  html.w-mod-js:not(.w-mod-ix3) .title-animation,
  html.w-mod-js:not(.w-mod-ix3) .section-title-anim {
    visibility: visible !important;
  }

  /*
   * The export stores the initial state of reveal interactions inline. This
   * is only a narrow-viewport bootstrap fallback: when IX3 cannot initialize,
   * content in the page body must not remain at its initial transparent state.
   * It has no effect once IX3 is present, so the original desktop and working
   * mobile reveal timelines retain their own opacity control.
   */
  html.w-mod-js:not(.w-mod-ix3) .main-wrap [data-w-id][style*="opacity:0"],
  html.w-mod-js:not(.w-mod-ix3) .main-wrap [data-w-id][style*="opacity: 0"] {
    opacity: 1 !important;
  }
}