/* ==========================================================================
   Site utilities
   ========================================================================== */

:root {
  --radius-media: 32px;
  --accent-blue: #8bb8ff;

  --progress-track: #e8f2fe;
  --progress-fill: #dbe8fa;
  --progress-dot: #ddebfd;
  --progress-dot-active: #03133d;
}

body {
  overflow-x: hidden !important;
  width: 100%;
}


html {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-x: hidden !important;
  width: 100%;
}

p,
li {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.elementor-heading-title .accent {
  color: var(--accent-blue) !important;
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
  transition: none !important;
}

body.elementor-editor-active .reveal-on-scroll {
  opacity: 1 !important;
  transform: none !important;
}

/* ==========================================================================
   Products scroll section
   ========================================================================== */

.products-scroll {
  position: relative;
  min-height: 100vh;
  background: transparent;
}

@supports (height: 100dvh) {
  .products-scroll {
    min-height: 100dvh;
  }
}

.products-scroll::before,
.products-scroll::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 12vh;
  pointer-events: none;
  z-index: 10;
}

/* Pin container */

.products-pin {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 900px;
  max-height: 900px;
  margin: 0 auto;
  overflow: hidden;
  z-index: 2;
}

/* Background circles layer sits behind pin content */
.products-bg-circles{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0; /* GSAP drives this */
}

/* Each circle is anchored at center-bottom and can exceed container width */
.products-bg-circles .circle{
  position: absolute;
  left: 50%;
  top: 100%;
  width: 220vmax;
  height: 220vmax;
  border-radius: 9999px;

  /* IMPORTANT: use percent transforms so GSAP scale does not overwrite centering */
  transform: translate3d(0,0,0);
  transform-origin: 50% 50%;

  /* anchor */
  x-percent: -50; /* not valid CSS, set via GSAP below */
  y-percent: -50; /* not valid CSS, set via GSAP below */

  background: rgba(47, 194, 250, 0.1);
}

.products-bg-circles .circle.circle-2{ background: rgba(147, 194, 250, 0.2); }
.products-bg-circles .circle.circle-3{ background: rgba(147, 194, 250, 0.3); }

.products-pin > .elementor-container,
.products-pin > .e-con-inner {
  height: 100%;
}

/* Columns */

.products-text,
.products-visual {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.products-text {
  display: flex;
  align-items: center;
  height: 420px;
}

.products-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Text track */

.products-text-track {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.products-text-track .product-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.products-text-track .product-slide.is-active {
  z-index: 1;
  pointer-events: auto;
}

/* Visual stage */

.products-visual-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.products-visual-stage .product-visual {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.products-visual-stage .product-visual.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.products-visual-stage .product-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ==========================================================================
   Products progress indicator
   ========================================================================== */

.products-progress {
  position: fixed;
  top: 50%;
  right: clamp(16px, 2vw, 24px);
  left: auto;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(4px, 0.6vw, 6px) 0;
  opacity: 0;
  pointer-events: none;
}

.products-progress.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.products-progress::before {
  content: "";
  position: absolute;
  top: clamp(4px, 0.6vw, 6px);
  bottom: clamp(4px, 0.6vw, 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  border-radius: 999px;
  background: var(--progress-track);
  z-index: 0;
}

.products-progress-fill {
  position: absolute;
  top: clamp(4px, 0.6vw, 6px);
  bottom: clamp(4px, 0.6vw, 6px);
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  width: 2px;
  border-radius: 999px;
  background: var(--progress-fill);
  z-index: 1;
}

.products-progress-dot {
  position: relative;
  z-index: 4;
  width: clamp(8px, 0.75vw, 12px);
  height: clamp(8px, 0.75vw, 12px);
  border-radius: 999px;
  background: var(--progress-dot);
  transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
}

.products-progress-dot.is-active {
  width: clamp(12px, 1vw, 16px);
  height: clamp(12px, 1vw, 16px);
  background: var(--progress-dot-active);
}

/* ==========================================================================
   Client logos carousel
   ========================================================================== */

.client-logos-carousel .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.client-logos-carousel .swiper-slide img,
.client-logos-carousel .elementor-image-carousel-wrapper img {
  display: block;
  width: auto;
  height: auto;
  max-height: 48px;
  margin: 0 auto;
  object-fit: contain;
}

.client-logos-carousel img {
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.client-logos-carousel img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* ==========================================================================
   Rounded media in post content
   ========================================================================== */

.single-post .elementor-widget-theme-post-content .elementor-widget-image img,
.single-post .elementor-widget-theme-post-content .elementor-widget-video,
.single-post .elementor-widget-theme-post-content .elementor-widget-video img,
.single-post .elementor-widget-theme-post-content .elementor-widget-video iframe,
.elementor-widget-theme-post-content .elementor[data-elementor-post-type="case"] .elementor-widget-image img,
.elementor-widget-theme-post-content .elementor[data-elementor-post-type="case"] .elementor-widget-video,
.elementor-widget-theme-post-content .elementor[data-elementor-post-type="case"] .elementor-widget-video img,
.elementor-widget-theme-post-content .elementor[data-elementor-post-type="case"] .elementor-widget-video iframe,
.elementor-widget-theme-post-content .elementor[data-elementor-post-type="solution"] .elementor-widget-image img,
.elementor-widget-theme-post-content .elementor[data-elementor-post-type="solution"] .elementor-widget-video,
.elementor-widget-theme-post-content .elementor[data-elementor-post-type="solution"] .elementor-widget-video img,
.elementor-widget-theme-post-content .elementor[data-elementor-post-type="solution"] .elementor-widget-video iframe,
.elementor-widget-theme-post-content .elementor[data-elementor-post-type="product"] .elementor-widget-image img,
.elementor-widget-theme-post-content .elementor[data-elementor-post-type="product"] .elementor-widget-video,
.elementor-widget-theme-post-content .elementor[data-elementor-post-type="product"] .elementor-widget-video img,
.elementor-widget-theme-post-content .elementor[data-elementor-post-type="product"] .elementor-widget-video iframe {
  border-radius: var(--radius-media);
  overflow: hidden;
}

/* Opt-out for icons or any image that should stay square */
.elementor-widget-theme-post-content .no-radius img {
  border-radius: 0 !important;
  overflow: visible !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
  .products-text-track {
    width: 90%;
    height: auto !important;
    min-height: 240px;
  }

  .products-pin {
    height: auto !important;
    max-height: none !important;
    padding: 24px 0;
  }

  .products-pin > .e-con-inner,
  .products-pin > .elementor-container {
    height: auto !important;
  }

  .products-text {
    height: auto !important;
    min-height: 0 !important;
  }

  .products-visual {
    height: auto !important;
  }

  .products-visual-stage {
    height: clamp(260px, 42vh, 420px) !important;
  }

  .products-visual-stage .product-visual img {
    max-height: 100%;
    object-fit: contain;
  }

  .products-progress {
    right: 16px !important;
    left: auto !important;
  }
}

@media (min-width: 768px) {
  .products-text-track {
    width: 100%;
  }

  .products-scroll {
    display: flex;
    align-items: center;
  }
}

/* ==========================================================================
   Elementor editor: Products section should be fully editable (no stacking)
   ========================================================================== */

body.elementor-editor-active .products-scroll{
  min-height: auto !important;
  display: block !important; 
  margin-top: 100px !important;
  margin-bottom: 800px !important;
}

body.elementor-editor-active .products-pin{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: flex-start !important;
}

body.elementor-editor-active .products-pin > .elementor-container,
body.elementor-editor-active .products-pin > .e-con-inner{
  height: auto !important;
}

body.elementor-editor-active .products-text,
body.elementor-editor-active .products-visual{
  height: auto !important;
  align-items: flex-start !important;
}

body.elementor-editor-active .products-text-track,
body.elementor-editor-active .products-visual-stage{
  height: auto !important;
  min-height: 0 !important;
}

body.elementor-editor-active .products-text-track .product-slide,
body.elementor-editor-active .product-slide{
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  z-index: auto !important;
  margin-bottom: 24px !important;
}

body.elementor-editor-active .products-visual-stage .product-visual,
body.elementor-editor-active .product-visual{
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  margin-bottom: 24px !important;
}

body.elementor-editor-active .products-visual-stage .product-visual img{
  height: auto !important;
  max-height: 420px !important;
  object-fit: contain !important;
}

body.elementor-editor-active .products-progress{
  display: none !important;
}