@widelab-nc/widelab 1.1.46 → 1.1.48

package/src/index.js

@@ -116,25 +116,25 @@ function contactFormOpenAnimation() {
 }
 
 //Smooth scroll init
-  const lenis = new Lenis({
-    duration: 1.2,
-    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
-  });
-  function lenisScroll() {
-    lenis.on('scroll', ScrollTrigger.update);
-    gsap.ticker.add((time)=>{
-      lenis.raf(time * 1000)
-    })
-    gsap.ticker.lagSmoothing(0)
-    function raf(time) {
-      lenis.raf(time);
-      requestAnimationFrame(raf);
-    }
+const lenis = new Lenis({
+  duration: 1.2,
+  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+});
+function lenisScroll() {
+  lenis.on('scroll', ScrollTrigger.update);
+  gsap.ticker.add((time)=>{
+    lenis.raf(time * 1000)
+  })
+  gsap.ticker.lagSmoothing(0)
+  function raf(time) {
+    lenis.raf(time);
     requestAnimationFrame(raf);
   }
+  requestAnimationFrame(raf);
+}
 
-  // Lazy load videos
-  function lazyLoadVideos() {
+// Lazy load videos
+function lazyLoadVideos() {
   let lazyVideos = [].slice.call(document.querySelectorAll("video.lazyload"));
   if ("IntersectionObserver" in window) {
     let lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
@@ -155,54 +155,54 @@ function contactFormOpenAnimation() {
   }
 }
 
-  // Reload page on browser back action
-  function reloadOnBack() {
-    window.addEventListener('pageshow', function (event) {
-      if (event.persisted) {
-        window.location.reload();
-      }
-    });
-  }
+// Reload page on browser back action
+function reloadOnBack() {
+  window.addEventListener('pageshow', function (event) {
+    if (event.persisted) {
+      window.location.reload();
+    }
+  });
+}
 
-  // Scroll disable when mobile menu opened
-  function disableScrollMenu() {
-    function observeNavOverlay() {
-      const target = document.querySelector('.w-nav-overlay');
-      const config = { attributes: true, attributeFilter: ['style'] };
-      const callback = function(mutationsList, observer) {
-        for(const mutation of mutationsList) {
-          if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
-            const displayValue = target.style.display;
-            if (displayValue === 'none') {
-              document.body.classList.remove('is-scroll-off');
-              lenis.start();
-            } else {
-              document.body.classList.add('is-scroll-off');
-              lenis.stop();
-            }
+// Scroll disable when mobile menu opened
+function disableScrollMenu() {
+  function observeNavOverlay() {
+    const target = document.querySelector('.w-nav-overlay');
+    const config = { attributes: true, attributeFilter: ['style'] };
+    const callback = function(mutationsList, observer) {
+      for(const mutation of mutationsList) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+          const displayValue = target.style.display;
+          if (displayValue === 'none') {
+            document.body.classList.remove('is-scroll-off');
+            lenis.start();
+          } else {
+            document.body.classList.add('is-scroll-off');
+            lenis.stop();
           }
         }
-      };
-      const observer = new MutationObserver(callback);
-      observer.observe(target, config);
-    }
-    observeNavOverlay();
+      }
+    };
+    const observer = new MutationObserver(callback);
+    observer.observe(target, config);
   }
+  observeNavOverlay();
+}
 
-  // Hero move to reveal footer
-  function revealFooter() {
-    const footer = document.querySelector('.is-footer');
-    if (footer) {
-      gsap.to('#heroSection', {
-        scrollTrigger: {
-          trigger: '#bottomWrapper',
-          start: 'top bottom',
-          toggleActions: 'restart none none reverse',
-        },
-        autoAlpha: 0,
-      });
-    }
+// Hero move to reveal footer
+function revealFooter() {
+  const footer = document.querySelector('.is-footer');
+  if (footer) {
+    gsap.to('#heroSection', {
+      scrollTrigger: {
+        trigger: '#bottomWrapper',
+        start: 'top bottom',
+        toggleActions: 'restart none none reverse',
+      },
+      autoAlpha: 0,
+    });
   }
+}
 
 // Page load animation (no-op below 992px)
 function pageLoadAnimation() {
@@ -273,9 +273,9 @@ function pageTransitionAnimation() {
     }
   });
 }
-  // Header on scroll animation
+// Header on scroll animation
 const infoBar = document.querySelector('.info-bar');
-  const showHideHeader = gsap.timeline({  paused: true,})
+const showHideHeader = gsap.timeline({  paused: true,})
 showHideHeader.to('.navbar', {
   y: '-100%',
   duration: 0.2,
@@ -288,19 +288,19 @@ if (infoBar) {
     ease: 'loader2',
   }, "<") }
 
-  // Custom cursor on mousedown and mouseup
-  function customCursorOnClick() {
-    const cursorElements = document.querySelectorAll('[wide="customCursor"]');
-    const customCursor = document.querySelector('.custom_cursor');
-    cursorElements.forEach((element) => {
-      element.addEventListener('mousedown', function () {
-        customCursor.style.transform = 'scale3d(0.8, 0.8, 1)';
-      });
-      element.addEventListener('mouseup', function () {
-        customCursor.style.transform = 'scale3d(1, 1, 1)';
-      });
+// Custom cursor on mousedown and mouseup
+function customCursorOnClick() {
+  const cursorElements = document.querySelectorAll('[wide="customCursor"]');
+  const customCursor = document.querySelector('.custom_cursor');
+  cursorElements.forEach((element) => {
+    element.addEventListener('mousedown', function () {
+      customCursor.style.transform = 'scale3d(0.8, 0.8, 1)';
     });
-  }
+    element.addEventListener('mouseup', function () {
+      customCursor.style.transform = 'scale3d(1, 1, 1)';
+    });
+  });
+}
 
 // === SKILLS TRIGGER HARD-FIX (drop-in) ===
 (function () {
@@ -410,43 +410,43 @@ if (infoBar) {
   }
 })();
 
-  // Header scroll trigger
-  window.standardHeaderScrollAnimation = function() {
-    ScrollTrigger.create({
-      start: 'top top',
-      endTrigger: '.bottom-wrapper',
-      end: 'bottom bottom',
-      onUpdate: (self) => {
-        self.direction === 1 ? showHideHeader.play() : showHideHeader.reverse();
-      },
-    });
-  }
+// Header scroll trigger
+window.standardHeaderScrollAnimation = function() {
+  ScrollTrigger.create({
+    start: 'top top',
+    endTrigger: '.bottom-wrapper',
+    end: 'bottom bottom',
+    onUpdate: (self) => {
+      self.direction === 1 ? showHideHeader.play() : showHideHeader.reverse();
+    },
+  });
+}
 
-  // Place video inside the text
-  window.videoInsideText = function(e)  {
+// Place video inside the text
+window.videoInsideText = function(e)  {
   const headlineContent = e.querySelector('[class*="copy-this"]');
   const headlineSpan = e.querySelector('[class*="headline-span"]');
   headlineSpan.appendChild(headlineContent);
 }
 
-  // Span video mask animation
-  window.spanVideoMaskAnimation = function(e) {
-    gsap.to(e, {
-      scrollTrigger: { trigger: e, start: 'bottom bottom-=5%' },
-      width: 0,
-      ease: 'loader2',
-      duration: 0.6,
-    });
-  }
+// Span video mask animation
+window.spanVideoMaskAnimation = function(e) {
+  gsap.to(e, {
+    scrollTrigger: { trigger: e, start: 'bottom bottom-=5%' },
+    width: 0,
+    ease: 'loader2',
+    duration: 0.6,
+  });
+}
 
-  // Custom cursor text change
-  window.customCursorText = function(e) {
-    e.addEventListener('mouseenter', () => {
-      const wideCursorTextValue = e.getAttribute('wideCursorText');
-      const customCursorTextElement = document.querySelector('.custom_cursor_text');
-      customCursorTextElement.innerHTML = wideCursorTextValue;
-    });
-  }
+// Custom cursor text change
+window.customCursorText = function(e) {
+  e.addEventListener('mouseenter', () => {
+    const wideCursorTextValue = e.getAttribute('wideCursorText');
+    const customCursorTextElement = document.querySelector('.custom_cursor_text');
+    customCursorTextElement.innerHTML = wideCursorTextValue;
+  });
+}
 
 let articleModalOpen;
 function articleModalOpenAnimation() {
@@ -550,6 +550,131 @@ window.hueAwardsAnimation = function(e) {
 };
 
 
+window.expandableProcessSticky = function (e) {
+  var wrapper = e;
+  if (!wrapper || wrapper.dataset.expandableProcessStickyInit === 'true') return;
+  wrapper.dataset.expandableProcessStickyInit = 'true';
+
+  var items = wrapper.querySelectorAll('.process-item');
+  var count = items.length;
+  if (count === 0) return;
+
+  var currentActive = -1;
+  var ticking = false;
+
+  function setActive(index) {
+    if (index === currentActive) return;
+    currentActive = index;
+    for (var i = 0; i < items.length; i++) {
+      var isTarget = i === index;
+      items[i].classList.toggle('is-active', isTarget);
+      items[i].style.height = isTarget ? items[i].scrollHeight + 'px' : '0px';
+    }
+  }
+
+  function update() {
+    ticking = false;
+    var rect = wrapper.getBoundingClientRect();
+    var total = wrapper.offsetHeight - window.innerHeight;
+    if (total <= 0) { setActive(0); return; }
+    var scrolled = -rect.top;
+    var progress = Math.min(1, Math.max(0, scrolled / total));
+    var activeIndex = Math.min(count - 1, Math.floor(progress * (count + 1)));
+    setActive(activeIndex);
+  }
+
+  function onScrollOrResize() {
+    if (!ticking) { requestAnimationFrame(update); ticking = true; }
+  }
+
+  function onResize() {
+    onScrollOrResize();
+    if (currentActive !== -1) {
+      items[currentActive].style.height = items[currentActive].scrollHeight + 'px';
+    }
+  }
+
+  // Click the row (number + title) to scroll to the trigger point that opens this item.
+  // Ignore clicks that originate inside the already-open .process-item panel (e.g. reading
+  // the description or clicking a link inside it shouldn't re-trigger a scroll).
+  function scrollToIndex(index) {
+    var rect = wrapper.getBoundingClientRect();
+    var absoluteTop = rect.top + window.pageYOffset;
+    var total = wrapper.offsetHeight - window.innerHeight;
+    if (total <= 0) return;
+    var progress = (index + 0.5) / (count + 1);
+    var targetY = absoluteTop + progress * total;
+
+    lenis.scrollTo(targetY, {
+      duration: 1.2,
+      easing: function (t) { return Math.min(1, 1.001 - Math.pow(2, -10 * t)); },
+    });
+  }
+
+  for (var i = 0; i < items.length; i++) {
+    (function (index) {
+      var tab = items[index].closest('.process-wrapper');
+      if (!tab) return;
+      tab.addEventListener('click', function (event) {
+        if (event.target.closest('.process-item')) return;
+        scrollToIndex(index);
+      });
+    })(i);
+  }
+
+  window.addEventListener('scroll', onScrollOrResize, { passive: true });
+  window.addEventListener('resize', onResize);
+  update();
+};
+
+
+window.faqDropdowns = function (e) {
+  var wrapper = e;
+  if (!wrapper || wrapper.dataset.faqDropdownsInit === 'true') return;
+  wrapper.dataset.faqDropdownsInit = 'true';
+
+  var faqItems = wrapper.querySelectorAll('.faq_ci');
+  var count = faqItems.length;
+  if (count === 0) return;
+
+  var currentActive = -1;
+
+  function setActive(index) {
+    currentActive = index;
+    for (var i = 0; i < count; i++) {
+      var isTarget = i === index;
+      var faqCi = faqItems[i];
+      var item = faqCi.querySelector('.faq-item');
+      var verticalBar = faqCi.querySelector('.is-vertical');
+
+      if (item) {
+        item.classList.toggle('is-active', isTarget);
+        item.style.height = isTarget ? item.scrollHeight + 'px' : '0px';
+      }
+      if (verticalBar) {
+        verticalBar.classList.toggle('is-active', isTarget);
+      }
+    }
+  }
+
+  // Keeps the open item's height correct if content reflows on resize (e.g. text wrapping)
+  function onResize() {
+    if (currentActive === -1) return;
+    var item = faqItems[currentActive].querySelector('.faq-item');
+    if (item) item.style.height = item.scrollHeight + 'px';
+  }
+
+  for (var i = 0; i < count; i++) {
+    (function (index) {
+      faqItems[index].addEventListener('click', function () {
+        var nextIndex = currentActive === index ? -1 : index;
+        setActive(nextIndex);
+      });
+    })(i);
+  }
+
+  window.addEventListener('resize', onResize);
+};
 
 
 window.navbarThemeWatcher = function () {
@@ -578,10 +703,6 @@ window.navbarThemeWatcher = function () {
 };
 
 
-
-
-
-
 window.stickyServices = function (e) {
   var wrapper = e;
   if (!wrapper || wrapper.dataset.stickyServicesInit === 'true') return;
@@ -595,6 +716,7 @@ window.stickyServices = function (e) {
 
   var currentActive = -1;
   var displayedProgress = 0;
+  var pendingIndex = -1; // set while a click-triggered scroll is animating
 
   function setActive(index) {
     if (index === currentActive) return;
@@ -617,6 +739,21 @@ window.stickyServices = function (e) {
 
   function loop() {
     var target = getTargetProgress();
+
+    // While a click-triggered scroll is in flight, keep the clicked tab
+    // forced active instead of letting the lerp below pull it back to the
+    // tab that matches the not-yet-moved real scroll position.
+    if (pendingIndex !== -1) {
+      var pendingProgress = (pendingIndex + 0.5) / count;
+      if (Math.abs(target - pendingProgress) < 0.02) {
+        pendingIndex = -1; // real scroll has caught up, resume normal driving
+      } else {
+        setActive(pendingIndex);
+        requestAnimationFrame(loop);
+        return;
+      }
+    }
+
     displayedProgress += (target - displayedProgress) * 0.18;
     if (Math.abs(target - displayedProgress) < 0.001) {
       displayedProgress = target;
@@ -626,12 +763,36 @@ window.stickyServices = function (e) {
     requestAnimationFrame(loop);
   }
 
-  loop();
-};
+  // Click a tab to scroll to the point where it becomes active, forcing it
+  // active immediately instead of waiting for the scroll animation to finish.
+  function scrollToIndex(index) {
+    var rect = wrapper.getBoundingClientRect();
+    var absoluteTop = rect.top + window.pageYOffset;
+    var total = wrapper.offsetHeight - window.innerHeight;
+    if (total <= 0) return;
+    var progress = (index + 0.5) / count;
+    var targetY = absoluteTop + progress * total;
 
+    pendingIndex = index;
+    displayedProgress = progress;
+    setActive(index);
 
+    lenis.scrollTo(targetY, {
+      duration: 1.2,
+      easing: function (t) { return Math.min(1, 1.001 - Math.pow(2, -10 * t)); },
+    });
+  }
 
+  for (var k = 0; k < navItems.length; k++) {
+    (function (index) {
+      navItems[index].addEventListener('click', function () {
+        scrollToIndex(index);
+      });
+    })(k);
+  }
 
+  loop();
+};
 
 
 window.heroAnimationOnLoad = function(e) {
@@ -743,8 +904,6 @@ window.heroAnimationOnLoad = function(e) {
 };
 
 
-
-
 // Case study mask animation + pill fade-in (full, iOS-safe, L->R reveal)
 window.caseStudyInteraction = function (e) {
   const mask = e.querySelector('.portfolio_item_image-mask');
@@ -826,220 +985,219 @@ window.caseStudyInteraction = function (e) {
 };
 
 
+// Reviews slider
+window.reviewsSlider = function(e) {
+  // Put content of static slide into list
+  const staticContent = e.querySelector(
+    '.splide__slide.reviews_collection_item.is-static'
+  ).innerHTML;
+  const dynamicElement = e.querySelector('.reviews_collection_item');
+  dynamicElement.innerHTML = staticContent;
+  dynamicElement.classList.add('is-static');
 
-  // Reviews slider
-  window.reviewsSlider = function(e) {
-    // Put content of static slide into list
-    const staticContent = e.querySelector(
-      '.splide__slide.reviews_collection_item.is-static'
-    ).innerHTML;
-    const dynamicElement = e.querySelector('.reviews_collection_item');
-    dynamicElement.innerHTML = staticContent;
-    dynamicElement.classList.add('is-static');
-
-    // Init reviews splide
-    const reviewsSplide = new Splide(e, {
-      type: 'slide',
-      fixedWidth: '24.5rem',
-      rewind: true,
-      focus: 0,
-      padding: { left: '2.5rem', right: 0 },
-      gap: 0,
-      omitEnd: true,
-      arrows: false,
-      drag: false,
-      easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
-      snap: true,
-      classes: {
-        pagination: 'splide__pagination reviews-pagination',
-        page: 'splide__pagination__page reviews-page',
-      },
-      breakpoints: {
-        992: { fixedWidth: '17.438rem', padding: { left: '1.75rem' }, drag: 'free', snap: false },
-        480: { fixedWidth: '16.25rem', padding: { left: '1.375rem' }},
-      },
-    }).mount();
-
-    // Next slide on click
-    if (window.innerWidth > 992) {
-      reviewsSplide.on('click', function () {
-        reviewsSplide.go('+1');
-      });
-    }
+  // Init reviews splide
+  const reviewsSplide = new Splide(e, {
+    type: 'slide',
+    fixedWidth: '24.5rem',
+    rewind: true,
+    focus: 0,
+    padding: { left: '2.5rem', right: 0 },
+    gap: 0,
+    omitEnd: true,
+    arrows: false,
+    drag: false,
+    easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
+    snap: true,
+    classes: {
+      pagination: 'splide__pagination reviews-pagination',
+      page: 'splide__pagination__page reviews-page',
+    },
+    breakpoints: {
+      992: { fixedWidth: '17.438rem', padding: { left: '1.75rem' }, drag: 'free', snap: false },
+      480: { fixedWidth: '16.25rem', padding: { left: '1.375rem' }},
+    },
+  }).mount();
 
-    // Animation in
-    gsap.from(e, {
-      scrollTrigger: {
-        trigger: e,
-        start: 'top bottom',
-        end: 'bottom bottom-=15%',
-        scrub: 1,
-        once: true,
-      },
-      x: '10%',
-      opacity: 0,
-      ease: 'linear',
+  // Next slide on click
+  if (window.innerWidth > 992) {
+    reviewsSplide.on('click', function () {
+      reviewsSplide.go('+1');
     });
   }
 
-  // Facts slider
-  window.factsSlider = function(e) {
-    // Facts slider splide initialize
-    const factsSplide = new Splide(e, {
-      type: 'loop',
-      perPage: 1,
-      gap: 0,
-      arrows: false,
-      drag: false,
-      duration: 0.15,
-      easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
-      classes: {
-        pagination: 'splide__pagination facts-pagination',
-        page: 'splide__pagination__page facts-page',
-      },
-      breakpoints: {
-        992: { gap: '1.75rem', drag: true },
-        480: { gap: '1.375rem' },
-      },
-    }).mount();
-    // Next on click
-    if (window.innerWidth > 992) {
-      factsSplide.on('click', function () {
-        factsSplide.go('+1');
-      });
-    }
+  // Animation in
+  gsap.from(e, {
+    scrollTrigger: {
+      trigger: e,
+      start: 'top bottom',
+      end: 'bottom bottom-=15%',
+      scrub: 1,
+      once: true,
+    },
+    x: '10%',
+    opacity: 0,
+    ease: 'linear',
+  });
+}
 
-    // Click on external link
-    const externalLink = e.querySelectorAll('.external_link.is-cursor');
-    // Loop through each element and execute customCursorIn.reverse()
-    externalLink.forEach((link) => {
-      link.addEventListener('click', () => {
-        event.stopPropagation();
-      });
+// Facts slider
+window.factsSlider = function(e) {
+  // Facts slider splide initialize
+  const factsSplide = new Splide(e, {
+    type: 'loop',
+    perPage: 1,
+    gap: 0,
+    arrows: false,
+    drag: false,
+    duration: 0.15,
+    easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
+    classes: {
+      pagination: 'splide__pagination facts-pagination',
+      page: 'splide__pagination__page facts-page',
+    },
+    breakpoints: {
+      992: { gap: '1.75rem', drag: true },
+      480: { gap: '1.375rem' },
+    },
+  }).mount();
+  // Next on click
+  if (window.innerWidth > 992) {
+    factsSplide.on('click', function () {
+      factsSplide.go('+1');
     });
+  }
 
-    // Animations
-// Function to play video on the active slide
-    function playActiveSlideVideo(newIndex) {
-      var activeSlide = factsSplide.Components.Elements.slides[newIndex];
-      var activeVideo = activeSlide.querySelector('video');
-      if (activeVideo) {
-        activeVideo.play();
-      }
-    }
-
-// Function to pause and rewind videos on inactive slides
-    function pauseAndRewindInactiveVideos(newIndex) {
-      var slides = factsSplide.Components.Elements.slides;
-      slides.forEach(function (slide, index) {
-        var video = slide.querySelector('video');
-        if (video && index !== newIndex) {
-          video.pause();
-          video.currentTime = 0; // rewind the video
-        }
-      });
-    }
-// Function to animate elements on the active slide
-    function animateSlideElements(slide) {
-      gsap.fromTo(
-        [
-          slide.querySelector('.is-h4'),
-          slide.querySelector('.facts-slide_legend-wrapper'),
-          slide.querySelector('.facts-slide_diagram-wrapper'),
-          slide.querySelector('.facts-slide_source')
-        ],
-        {
-          x: '2rem',
-          opacity: 0
-        },
-        {
-          x: '0',
-          opacity: 1,
-          stagger: 0.2,
-          duration: 0.5,
-          easing: 'loader2'
-        }
-      );
-    }
-// Function to reset animation for the elements in the slide
-    function resetSlideAnimation(slide) {
-      gsap.set(
-        [
-          slide.querySelector('.is-h4'),
-          slide.querySelector('.facts-slide_legend-wrapper'),
-          slide.querySelector('.facts-slide_diagram-wrapper'),
-          slide.querySelector('.facts-slide_source')
-        ],
-        {
-          x: '2rem',
-          opacity: 0
-        }
-      );
-    }
-// Event listener for 'move' event
-    factsSplide.on('move', function (newIndex) {
-      playActiveSlideVideo(newIndex);
-      var activeSlide = factsSplide.Components.Elements.slides[newIndex];
-      animateSlideElements(activeSlide);
-    });
-// Event listener for 'moved' event
-    factsSplide.on('moved', function (oldIndex) {
-      pauseAndRewindInactiveVideos(oldIndex);
-      var previousSlide = factsSplide.Components.Elements.slides[oldIndex];
-      resetSlideAnimation(previousSlide);
+  // Click on external link
+  const externalLink = e.querySelectorAll('.external_link.is-cursor');
+  // Loop through each element and execute customCursorIn.reverse()
+  externalLink.forEach((link) => {
+    link.addEventListener('click', () => {
+      event.stopPropagation();
     });
+  });
 
+  // Animations
+  // Function to play video on the active slide
+  function playActiveSlideVideo(newIndex) {
+    var activeSlide = factsSplide.Components.Elements.slides[newIndex];
+    var activeVideo = activeSlide.querySelector('video');
+    if (activeVideo) {
+      activeVideo.play();
+    }
   }
 
-  // Team slider
-  window.teamSlider = function(e) {
-    // Randomize order of slides
-    const teamList = e.querySelector('.team_collection_list');
-    const teamItems = Array.from(teamList.children);
-    teamItems.sort(function () {
-      return 0.5 - Math.random();
-    });
-    teamItems.forEach(function (item) {
-      teamList.appendChild(item);
+  // Function to pause and rewind videos on inactive slides
+  function pauseAndRewindInactiveVideos(newIndex) {
+    var slides = factsSplide.Components.Elements.slides;
+    slides.forEach(function (slide, index) {
+      var video = slide.querySelector('video');
+      if (video && index !== newIndex) {
+        video.pause();
+        video.currentTime = 0; // rewind the video
+      }
     });
-
-    // Team slider splide initialize
-    new Splide(e, {
-      type: 'slide',
-      fixedWidth: '20%',
-      padding: { left: '2.5rem', right: 0 },
-      focus: 0,
-      gap: 0,
-      pagination: false,
-      omitEnd: true,
-      arrows: false,
-      drag: true,
-      easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
-      snap: true,
-      classes: {
-        pagination: 'splide__pagination facts-pagination',
-        page: 'splide__pagination__page facts-page',
-      },
-      breakpoints: {
-        992: { fixedWidth: '40%', padding: { left: '1.75rem' }, drag: 'free', snap: false },
-        560: { fixedWidth: '75%', padding: { left: '1.375rem' }, drag: 'free', snap: false },
-      },
-    }).mount();
-
-    // Animation in
-   gsap.from(e, {
-      scrollTrigger: {
-        trigger: e,
-        start: 'top bottom',
-        end: 'bottom bottom',
-        scrub: 1,
-        once: true,
+  }
+  // Function to animate elements on the active slide
+  function animateSlideElements(slide) {
+    gsap.fromTo(
+      [
+        slide.querySelector('.is-h4'),
+        slide.querySelector('.facts-slide_legend-wrapper'),
+        slide.querySelector('.facts-slide_diagram-wrapper'),
+        slide.querySelector('.facts-slide_source')
+      ],
+      {
+        x: '2rem',
+        opacity: 0
       },
-      x: '10%',
-      opacity: 0,
-      ease: 'linear',
-    });
+      {
+        x: '0',
+        opacity: 1,
+        stagger: 0.2,
+        duration: 0.5,
+        easing: 'loader2'
+      }
+    );
+  }
+  // Function to reset animation for the elements in the slide
+  function resetSlideAnimation(slide) {
+    gsap.set(
+      [
+        slide.querySelector('.is-h4'),
+        slide.querySelector('.facts-slide_legend-wrapper'),
+        slide.querySelector('.facts-slide_diagram-wrapper'),
+        slide.querySelector('.facts-slide_source')
+      ],
+      {
+        x: '2rem',
+        opacity: 0
+      }
+    );
   }
+  // Event listener for 'move' event
+  factsSplide.on('move', function (newIndex) {
+    playActiveSlideVideo(newIndex);
+    var activeSlide = factsSplide.Components.Elements.slides[newIndex];
+    animateSlideElements(activeSlide);
+  });
+  // Event listener for 'moved' event
+  factsSplide.on('moved', function (oldIndex) {
+    pauseAndRewindInactiveVideos(oldIndex);
+    var previousSlide = factsSplide.Components.Elements.slides[oldIndex];
+    resetSlideAnimation(previousSlide);
+  });
+
+}
+
+// Team slider
+window.teamSlider = function(e) {
+  // Randomize order of slides
+  const teamList = e.querySelector('.team_collection_list');
+  const teamItems = Array.from(teamList.children);
+  teamItems.sort(function () {
+    return 0.5 - Math.random();
+  });
+  teamItems.forEach(function (item) {
+    teamList.appendChild(item);
+  });
+
+  // Team slider splide initialize
+  new Splide(e, {
+    type: 'slide',
+    fixedWidth: '20%',
+    padding: { left: '2.5rem', right: 0 },
+    focus: 0,
+    gap: 0,
+    pagination: false,
+    omitEnd: true,
+    arrows: false,
+    drag: true,
+    easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
+    snap: true,
+    classes: {
+      pagination: 'splide__pagination facts-pagination',
+      page: 'splide__pagination__page facts-page',
+    },
+    breakpoints: {
+      992: { fixedWidth: '40%', padding: { left: '1.75rem' }, drag: 'free', snap: false },
+      560: { fixedWidth: '75%', padding: { left: '1.375rem' }, drag: 'free', snap: false },
+    },
+  }).mount();
+
+  // Animation in
+  gsap.from(e, {
+    scrollTrigger: {
+      trigger: e,
+      start: 'top bottom',
+      end: 'bottom bottom',
+      scrub: 1,
+      once: true,
+    },
+    x: '10%',
+    opacity: 0,
+    ease: 'linear',
+  });
+}
 
 // Partner slider
 window.partnerSlider = function (e) {
@@ -1087,68 +1245,68 @@ window.partnerSlider = function (e) {
     ease: 'linear',
   });
 };
-  // Element padding change on scroll
-  window.elementPaddingChange = function(e) {
-    gsap.to(e, {
-      scrollTrigger: {
-        trigger: e,
-        start: 'top bottom',
-        end: 'top top',
-        toggleActions: 'restart none none reverse',
-        scrub: 1,
+// Element padding change on scroll
+window.elementPaddingChange = function(e) {
+  gsap.to(e, {
+    scrollTrigger: {
+      trigger: e,
+      start: 'top bottom',
+      end: 'top top',
+      toggleActions: 'restart none none reverse',
+      scrub: 1,
+    },
+    paddingLeft: '0rem',
+    paddingRight: '0rem',
+    ease: 'linear',
+  });
+}
+
+// Section bg change
+window.sectionBgChange = function(e) {
+  gsap.set(e, { backgroundColor: '#fff' });
+  gsap.set('#heroNavbarLottie path', { fill: 'rgb(21, 21, 21)' });
+  const sectionsBgChange = gsap.timeline({
+    duration: 0.15,
+    ease: 'loader2',
+    scrollTrigger: {
+      trigger: e,
+      start: 'top center',
+      end: 'bottom top',
+      toggleActions: 'play reverse play reverse',
+    },
+  });
+  sectionsBgChange.to(['#skills', '#portfolio'], {
+    backgroundColor: '#151515',
+  }, '<');
+  sectionsBgChange.to(".info-bar_wrapper", {
+    backgroundColor: '#2E2E2E',
+    color: "#fff"
+  }, '<');
+  // Change navbar element on bg animation
+  sectionsBgChange.to(
+    [
+      '.button_small',
+      '.button_small_icon',
+      '.navbar_brand_svg',
+      '#heroNavbarLottie path ',
+    ],
+    {
+      color: '#fff',
+      fill: 'rgb(254, 254, 254)',
+    },
+    '<'
+  );
+  if (window.innerWidth > 992) {
+    sectionsBgChange.to(
+      '.navbar_menu_link',
+      {
+        color: '#fff',
+        fill: 'rgb(254, 254, 254)',
       },
-      paddingLeft: '0rem',
-      paddingRight: '0rem',
-      ease: 'linear',
-    });
+      '<'
+    );
   }
-
-  // Section bg change
-  window.sectionBgChange = function(e) {
-    gsap.set(e, { backgroundColor: '#fff' });
-    gsap.set('#heroNavbarLottie path', { fill: 'rgb(21, 21, 21)' });
-      const sectionsBgChange = gsap.timeline({
-        duration: 0.15,
-        ease: 'loader2',
-        scrollTrigger: {
-          trigger: e,
-          start: 'top center',
-          end: 'bottom top',
-          toggleActions: 'play reverse play reverse',
-        },
-      });
-      sectionsBgChange.to(['#skills', '#portfolio'], {
-        backgroundColor: '#151515',
-      }, '<');
-    sectionsBgChange.to(".info-bar_wrapper", {
-      backgroundColor: '#2E2E2E',
-      color: "#fff"
-    }, '<');
-      // Change navbar element on bg animation
-      sectionsBgChange.to(
-        [
-          '.button_small',
-          '.button_small_icon',
-          '.navbar_brand_svg',
-          '#heroNavbarLottie path ',
-        ],
-        {
-          color: '#fff',
-          fill: 'rgb(254, 254, 254)',
-        },
-        '<'
-      );
-    if (window.innerWidth > 992) {
-      sectionsBgChange.to(
-          '.navbar_menu_link',
-        {
-          color: '#fff',
-          fill: 'rgb(254, 254, 254)',
-        },
-        '<'
-      );
-    }
-    }
+}
 
 // Awwwards badge color change
 window.badgeColorChange = function(e) {
@@ -1170,262 +1328,261 @@ window.badgeColorChange = function(e) {
   }, '<');
 }
 
-  // Client logos animation
-  window.clientLogosAnimation = function(e) {
-    const logosStagger = 0.15;
-    const logoMask = e.querySelectorAll('[class*="item_mask"]');
-    const logoImg = e.querySelectorAll('[class*="image"]');
-    gsap.from(logoMask, {
-      scrollTrigger: {
-        trigger: logoMask,
-        start: 'top bottom-=25%',
-      },
-      width: '0%',
-      duration: 0.7,
-      ease: 'loader2',
-      stagger: logosStagger,
+// Client logos animation
+window.clientLogosAnimation = function(e) {
+  const logosStagger = 0.15;
+  const logoMask = e.querySelectorAll('[class*="item_mask"]');
+  const logoImg = e.querySelectorAll('[class*="image"]');
+  gsap.from(logoMask, {
+    scrollTrigger: {
+      trigger: logoMask,
+      start: 'top bottom-=25%',
+    },
+    width: '0%',
+    duration: 0.7,
+    ease: 'loader2',
+    stagger: logosStagger,
+  });
+  gsap.from(logoImg, {
+    scrollTrigger: {
+      trigger: logoMask,
+      start: 'top bottom-=25%',
+    },
+    opacity: 0,
+    delay: 0.4,
+    duration: 0.45,
+    ease: 'loader2',
+    stagger: logosStagger,
+  });
+}
+
+// Hero span video on hover
+window.heroSpanVideoOnHover = function(e) {
+  window.customCursorText(e);
+  const heroSpanContentAnimation = gsap.timeline({ paused: true, ease: 'loader2' });
+  heroSpanContentAnimation.to('.hero-line-mask', { clipPath: 'none', duration: 0.05 }, '>');
+  heroSpanContentAnimation.to(e, { scale: 2, duration: 0.35 }, '>');
+  if (window.innerWidth > 992) {
+    e.addEventListener('mouseenter', () => {
+      heroSpanContentAnimation.timeScale(1).play();
     });
-    gsap.from(logoImg, {
-      scrollTrigger: {
-        trigger: logoMask,
-        start: 'top bottom-=25%',
-      },
-      opacity: 0,
-      delay: 0.4,
-      duration: 0.45,
-      ease: 'loader2',
-      stagger: logosStagger,
+    e.addEventListener('mouseleave', () => {
+      heroSpanContentAnimation.timeScale(2).reverse();
     });
   }
+}
 
-  // Hero span video on hover
-  window.heroSpanVideoOnHover = function(e) {
-    window.customCursorText(e);
-    const heroSpanContentAnimation = gsap.timeline({ paused: true, ease: 'loader2' });
-    heroSpanContentAnimation.to('.hero-line-mask', { clipPath: 'none', duration: 0.05 }, '>');
-    heroSpanContentAnimation.to(e, { scale: 2, duration: 0.35 }, '>');
-      if (window.innerWidth > 992) {
-        e.addEventListener('mouseenter', () => {
-          heroSpanContentAnimation.timeScale(1).play();
-        });
-        e.addEventListener('mouseleave', () => {
-          heroSpanContentAnimation.timeScale(2).reverse();
-        });
+// Reel modal
+window.reelModal = function() {
+  const reelTrigger = document.querySelectorAll('[wideClick="playReel"]');
+  const reelModal = document.querySelector('.reel-modal');
+  const reelModalPlayer = document.getElementById('fullReel');
+  const reelPlayback = 0;
+  const reelModalShow = gsap.timeline({ ease: 'loader2', paused: true });
+  reelModalShow.to(reelModal, { display: 'flex', opacity: 0, duration: 0 });
+  reelModalShow.to(reelModal, { opacity: 1, duration: 0.6 }, '>');
+  if (window.innerWidth > 992) {
+    reelTrigger.forEach((element) => {
+      element.addEventListener('click', () => {
+        lenis.stop();
+        reelModalShow.timeScale(1).play();
+        // Set the video source based on whether the player can handle WebM
+        if (reelPlayback === 0) {
+          if (reelModalPlayer.canPlayType('video/webm')) {
+            reelModalPlayer.src =
+              'https://widelabco.sfo3.cdn.digitaloceanspaces.com/Widelab-reel.webm';
+          } else {
+            reelModalPlayer.src =
+              'https://widelabco.sfo3.cdn.digitaloceanspaces.com/Widelab-reel.mp4';
+          }
+          // Load the video
+          reelModalPlayer.load();
+        } else {
+          return;
+        }
+
+        reelModalPlayer.play();
+      });
+    });
+    reelModal.addEventListener('click', () => {
+      reelModalShow.timeScale(4).reverse();
+      reelModalPlayer.pause();
+      lenis.start();
+    });
+    window.addEventListener('keydown', function (event) {
+      // The key code for the ESC key is 27
+      if (event.keyCode === 27) {
+        reelModalShow.timeScale(4).reverse();
+        reelModalPlayer.pause();
+        lenis.start();
       }
-  }
+    });
+  } else {
+    reelTrigger.forEach((element) => {
+      element.addEventListener('click', () => {
+        // Set the video source based on whether the player can handle WebM
+        if (reelModalPlayer.canPlayType('video/webm')) {
+          reelModalPlayer.src = 'https://widelabco.sfo3.cdn.digitaloceanspaces.com/Widelab-reel.webm';
+        } else {
+          reelModalPlayer.src = 'https://widelabco.sfo3.cdn.digitaloceanspaces.com/Widelab-reel.mp4';
+        }
 
-  // Reel modal
-  window.reelModal = function() {
-      const reelTrigger = document.querySelectorAll('[wideClick="playReel"]');
-      const reelModal = document.querySelector('.reel-modal');
-      const reelModalPlayer = document.getElementById('fullReel');
-      const reelPlayback = 0;
-      const reelModalShow = gsap.timeline({ ease: 'loader2', paused: true });
-      reelModalShow.to(reelModal, { display: 'flex', opacity: 0, duration: 0 });
-      reelModalShow.to(reelModal, { opacity: 1, duration: 0.6 }, '>');
-      if (window.innerWidth > 992) {
-        reelTrigger.forEach((element) => {
-          element.addEventListener('click', () => {
-            lenis.stop();
-            reelModalShow.timeScale(1).play();
-            // Set the video source based on whether the player can handle WebM
-            if (reelPlayback === 0) {
-              if (reelModalPlayer.canPlayType('video/webm')) {
-                reelModalPlayer.src =
-                  'https://widelabco.sfo3.cdn.digitaloceanspaces.com/Widelab-reel.webm';
-              } else {
-                reelModalPlayer.src =
-                  'https://widelabco.sfo3.cdn.digitaloceanspaces.com/Widelab-reel.mp4';
-              }
-              // Load the video
-              reelModalPlayer.load();
-            } else {
-              return;
-            }
+        // Load the video
+        reelModalPlayer.load();
 
+        // Add a listener to the 'canplaythrough' event
+        reelModalPlayer.addEventListener(
+          'canplaythrough',
+          () => {
+            // Once there's enough data loaded to play through, start playback
             reelModalPlayer.play();
-          });
-        });
-        reelModal.addEventListener('click', () => {
-          reelModalShow.timeScale(4).reverse();
-          reelModalPlayer.pause();
-          lenis.start();
-        });
-        window.addEventListener('keydown', function (event) {
-          // The key code for the ESC key is 27
-          if (event.keyCode === 27) {
-            reelModalShow.timeScale(4).reverse();
-            reelModalPlayer.pause();
-            lenis.start();
-          }
-        });
-      } else {
-        reelTrigger.forEach((element) => {
-          element.addEventListener('click', () => {
-            // Set the video source based on whether the player can handle WebM
-            if (reelModalPlayer.canPlayType('video/webm')) {
-              reelModalPlayer.src = 'https://widelabco.sfo3.cdn.digitaloceanspaces.com/Widelab-reel.webm';
-            } else {
-              reelModalPlayer.src = 'https://widelabco.sfo3.cdn.digitaloceanspaces.com/Widelab-reel.mp4';
-            }
-
-            // Load the video
-            reelModalPlayer.load();
-
-            // Add a listener to the 'canplaythrough' event
-            reelModalPlayer.addEventListener(
-              'canplaythrough',
-              () => {
-                // Once there's enough data loaded to play through, start playback
-                reelModalPlayer.play();
-              },
-              { once: true }
-            ); // Ensure this event only fires once per click
-          });
-        });
-        reelModal.addEventListener('click', () => {
-          reelModalPlayer.pause();
-        });
-      }
+          },
+          { once: true }
+        ); // Ensure this event only fires once per click
+      });
+    });
+    reelModal.addEventListener('click', () => {
+      reelModalPlayer.pause();
+    });
   }
+}
 
-  // Founders tooltip
-  window.foundersTooltip = function(e) {
-    const line = e.querySelector('.line');
-    const arrow = e.querySelector('.arrow');
-    const foundersHover = gsap.timeline({ paused: true, ease: 'loader2' });
-    foundersHover.from(e, {
-      x: '5%',
-      opacity: 0,
-      duration: 0.4,
-    });
-    foundersHover.from(
-      line,
-      {
-        drawSVG: '0% 0%',
-        duration: 0.2,
-      },
-      '>-0.2'
-    );
-    foundersHover.from(arrow, {
+// Founders tooltip
+window.foundersTooltip = function(e) {
+  const line = e.querySelector('.line');
+  const arrow = e.querySelector('.arrow');
+  const foundersHover = gsap.timeline({ paused: true, ease: 'loader2' });
+  foundersHover.from(e, {
+    x: '5%',
+    opacity: 0,
+    duration: 0.4,
+  });
+  foundersHover.from(
+    line,
+    {
       drawSVG: '0% 0%',
-      duration: 0.15,
-    }),
-      '>';
-      if (window.innerWidth > 992) {
-        e.addEventListener('mouseenter', () => {
-          foundersHover.timeScale(1).play();
-        });
-        e.addEventListener('mouseleave', () => {
-          foundersHover.timeScale(3).reverse();
-        });
-      }
+      duration: 0.2,
+    },
+    '>-0.2'
+  );
+  foundersHover.from(arrow, {
+    drawSVG: '0% 0%',
+    duration: 0.15,
+  }),
+    '>';
+  if (window.innerWidth > 992) {
+    e.addEventListener('mouseenter', () => {
+      foundersHover.timeScale(1).play();
+    });
+    e.addEventListener('mouseleave', () => {
+      foundersHover.timeScale(3).reverse();
+    });
   }
+}
 
-  // Clients map actions
-  window.clientsMapActions = function(e) {
-    // Map animation
-    const mapAnimation = gsap.timeline({
-      scrollTrigger: {
-        trigger: '.reviews_map_base',
-        start: 'bottom-=160px bottom',
-      },
-    });
-    mapAnimation.from('.map-point', {
+// Clients map actions
+window.clientsMapActions = function(e) {
+  // Map animation
+  const mapAnimation = gsap.timeline({
+    scrollTrigger: {
+      trigger: '.reviews_map_base',
+      start: 'bottom-=160px bottom',
+    },
+  });
+  mapAnimation.from('.map-point', {
+    duration: 1,
+    opacity: 0,
+    stagger: 0.1,
+    ease: 'loader2',
+  });
+  mapAnimation.from(
+    '.map-pin_wrapper',
+    {
       duration: 1,
       opacity: 0,
       stagger: 0.1,
       ease: 'loader2',
-    });
-    mapAnimation.from(
-      '.map-pin_wrapper',
-      {
-        duration: 1,
+    },
+    '0.3'
+  );
+
+  // Map pins animation on hover
+  const allMapPins = document.querySelectorAll('.map-pin_wrapper');
+  allMapPins.forEach(function (element) {
+    element.addEventListener('mouseenter', function () {
+      const mapPin = this.getAttribute('w-map-pin');
+      const oldPin = document.querySelectorAll('.map_info-collection-item');
+      const infoElements = document.querySelectorAll(
+        ".map_info-collection-item[w-map-info='" + mapPin + "']"
+      );
+      const infoElementsAppear = gsap.timeline({});
+      infoElementsAppear.to(oldPin, {
         opacity: 0,
-        stagger: 0.1,
         ease: 'loader2',
-      },
-      '0.3'
-    );
-
-// Map pins animation on hover
-    const allMapPins = document.querySelectorAll('.map-pin_wrapper');
-    allMapPins.forEach(function (element) {
-      element.addEventListener('mouseenter', function () {
-        const mapPin = this.getAttribute('w-map-pin');
-        const oldPin = document.querySelectorAll('.map_info-collection-item');
-        const infoElements = document.querySelectorAll(
-          ".map_info-collection-item[w-map-info='" + mapPin + "']"
-        );
-        const infoElementsAppear = gsap.timeline({});
-        infoElementsAppear.to(oldPin, {
-          opacity: 0,
-          ease: 'loader2',
-          duration: 0.1,
-        });
-        infoElementsAppear.to(oldPin, {
-          display: 'none',
-          duration: 0.01,
-        });
-        infoElementsAppear.to(infoElements, {
-          display: 'block',
-          duration: 0.01,
-        });
-        infoElementsAppear.to(infoElements, {
-          opacity: 1,
-          ease: 'loader2',
-          duration: 0.2,
-        });
+        duration: 0.1,
+      });
+      infoElementsAppear.to(oldPin, {
+        display: 'none',
+        duration: 0.01,
+      });
+      infoElementsAppear.to(infoElements, {
+        display: 'block',
+        duration: 0.01,
+      });
+      infoElementsAppear.to(infoElements, {
+        opacity: 1,
+        ease: 'loader2',
+        duration: 0.2,
       });
     });
-// Map boxes link special code
-      const elements = document.querySelectorAll('.map_info-wrapper');
-      for (let i = 0; i < elements.length; i++) {
-        const href = elements[i].getAttribute('href');
-        if (href && href.length > 3) {
-          elements[i].style.cursor = 'pointer';
-        }
-      }
+  });
+  // Map boxes link special code
+  const elements = document.querySelectorAll('.map_info-wrapper');
+  for (let i = 0; i < elements.length; i++) {
+    const href = elements[i].getAttribute('href');
+    if (href && href.length > 3) {
+      elements[i].style.cursor = 'pointer';
+    }
   }
+}
 
 
-
-  // Stats section headline animation
-  window.statsHeadlineAnimation = function() {
-    const statsHeadlineAnimation = gsap.timeline({
-        scrollTrigger: {
-          trigger: '#statsKnow',
-          start: 'center center',
-          toggleActions: 'restart none none reverse',
-          end: '+=500',
-        },
-        pause: 'paused',
-        ease: 'defaultEase',
-      }),
-      homeStatsHeading = new SplitText('#statsDone', {
-        type: 'lines',
-        linesClass: 'stats-line',
-      }),
-      homeStatsHeadingMask = new SplitText('#statsDone', {
-        type: 'lines',
-        linesClass: 'stats-line-mask',
-      });
-    statsHeadlineAnimation.to(
-      '#statsKnow',
-      {
-        duration: 0.5,
-        opacity: 0,
-        display: 'none',
+// Stats section headline animation
+window.statsHeadlineAnimation = function() {
+  const statsHeadlineAnimation = gsap.timeline({
+      scrollTrigger: {
+        trigger: '#statsKnow',
+        start: 'center center',
+        toggleActions: 'restart none none reverse',
+        end: '+=500',
       },
-      '>'
-    );
-    statsHeadlineAnimation.from('.stats-line', {
+      pause: 'paused',
+      ease: 'defaultEase',
+    }),
+    homeStatsHeading = new SplitText('#statsDone', {
+      type: 'lines',
+      linesClass: 'stats-line',
+    }),
+    homeStatsHeadingMask = new SplitText('#statsDone', {
+      type: 'lines',
+      linesClass: 'stats-line-mask',
+    });
+  statsHeadlineAnimation.to(
+    '#statsKnow',
+    {
       duration: 0.5,
       opacity: 0,
-      y: '100%',
-      stagger: 0.25,
-    });
-  }
+      display: 'none',
+    },
+    '>'
+  );
+  statsHeadlineAnimation.from('.stats-line', {
+    duration: 0.5,
+    opacity: 0,
+    y: '100%',
+    stagger: 0.25,
+  });
+}
 
 // Single entry you call from x-init
 window.clientFilters = function () {
@@ -2049,7 +2206,7 @@ window.initBentoRevealScrub = function (container) {
       start: 'top 90%',     // start easing in slightly later
       end: 'bottom 65%',    // full reveal by near the end of container
       scrub: 0.5,           // smoothing; use true for no smoothing
-        markers: false,     // uncomment for debugging
+      markers: false,     // uncomment for debugging
     }
   });
 
@@ -2151,101 +2308,101 @@ window.initPartnerVideos = function (container) {
 };
 
 
-  // Case study - What's next interaction
-  window.whatsNext = function() {
-    const caseItem = document.querySelectorAll('.whats-next_links_item.is-case');
-    const allCases = document.querySelector('.whats-next_links_item.is-all');
-    caseItem.forEach((item) => {
-      const imageMask = item.querySelector('.whats-next_links_item_image_mask');
-      const imageWrapper = item.querySelector('.whats-next_links_item_image-wrapper');
-      const whatsNextHover = gsap.timeline({ paused: true, ease: 'loader2' });
-      whatsNextHover.to(imageWrapper, { opacity: 0.8, duration: 0.15 });
-      whatsNextHover.to(imageMask, { width: '0%', duration: 0.3 }, '>-0.');
-      item.addEventListener('mouseenter', () => {
-        whatsNextHover.timeScale(1).play();
-        caseItem.forEach((i) => {
-          if (i !== event.target) {
-            gsap.to(i, { color: '#7A7A7A', duration: 0.2, ease: 'loader2' });
-          }
-        });
-      });
-      item.addEventListener('mouseleave', () => {
-        whatsNextHover.timeScale(3).reverse();
-        caseItem.forEach((i) => {
-          if (i !== event.target) {
-            gsap.to(i, { color: '#fff', duration: 0.1, ease: 'loader2' });
-          }
-        });
+// Case study - What's next interaction
+window.whatsNext = function() {
+  const caseItem = document.querySelectorAll('.whats-next_links_item.is-case');
+  const allCases = document.querySelector('.whats-next_links_item.is-all');
+  caseItem.forEach((item) => {
+    const imageMask = item.querySelector('.whats-next_links_item_image_mask');
+    const imageWrapper = item.querySelector('.whats-next_links_item_image-wrapper');
+    const whatsNextHover = gsap.timeline({ paused: true, ease: 'loader2' });
+    whatsNextHover.to(imageWrapper, { opacity: 0.8, duration: 0.15 });
+    whatsNextHover.to(imageMask, { width: '0%', duration: 0.3 }, '>-0.');
+    item.addEventListener('mouseenter', () => {
+      whatsNextHover.timeScale(1).play();
+      caseItem.forEach((i) => {
+        if (i !== event.target) {
+          gsap.to(i, { color: '#7A7A7A', duration: 0.2, ease: 'loader2' });
+        }
       });
     });
-    allCases.addEventListener('mouseenter', () => {
-      gsap.to(allCases, { color: '#fff', duration: 0.2, ease: 'loader2' });
-      caseItem.forEach((item) => {
-        gsap.to(item, { color: '#7A7A7A', duration: 0.2, ease: 'loader2' });
+    item.addEventListener('mouseleave', () => {
+      whatsNextHover.timeScale(3).reverse();
+      caseItem.forEach((i) => {
+        if (i !== event.target) {
+          gsap.to(i, { color: '#fff', duration: 0.1, ease: 'loader2' });
+        }
       });
     });
-    allCases.addEventListener('mouseleave', () => {
-      gsap.to(allCases, { color: '#7A7A7A', duration: 0.2, ease: 'loader2' });
-      caseItem.forEach((item) => {
-        gsap.to(item, { color: '#fff', duration: 0.2, ease: 'loader2' });
-      });
+  });
+  allCases.addEventListener('mouseenter', () => {
+    gsap.to(allCases, { color: '#fff', duration: 0.2, ease: 'loader2' });
+    caseItem.forEach((item) => {
+      gsap.to(item, { color: '#7A7A7A', duration: 0.2, ease: 'loader2' });
+    });
+  });
+  allCases.addEventListener('mouseleave', () => {
+    gsap.to(allCases, { color: '#7A7A7A', duration: 0.2, ease: 'loader2' });
+    caseItem.forEach((item) => {
+      gsap.to(item, { color: '#fff', duration: 0.2, ease: 'loader2' });
     });
+  });
 
-// Remove responsive image feature from CS pages
-    for (var i = 0; i < document.getElementsByTagName('img').length; i++) {
-      document.getElementsByTagName('img')[i].srcset = '';
-    }
-    for (var i = 0; i < document.getElementsByTagName('img').length; i++) {
-      document.getElementsByTagName('img')[i].sizes = '';
-    }
+  // Remove responsive image feature from CS pages
+  for (var i = 0; i < document.getElementsByTagName('img').length; i++) {
+    document.getElementsByTagName('img')[i].srcset = '';
+  }
+  for (var i = 0; i < document.getElementsByTagName('img').length; i++) {
+    document.getElementsByTagName('img')[i].sizes = '';
   }
+}
 
-  // Case study - images mask animation
-  window.csMaskAnimation = function() {
-    const csImageMasks = document.querySelectorAll('.portfolio_item_image-mask');
-    csImageMasks.forEach((mask, index) => {
-      if (index === 0) {
-        return;
-      }
-      const maskAnimation = gsap.from(mask, {
-        width: '100%',
-        duration: 0.7,
-        ease: 'loader2',
-        paused: true,
-      });
-      ScrollTrigger.create({
-        animation: maskAnimation,
-        trigger: mask,
-        start: 'top 80%',
-        onEnter: () => maskAnimation.play(),
-      });
+// Case study - images mask animation
+window.csMaskAnimation = function() {
+  const csImageMasks = document.querySelectorAll('.portfolio_item_image-mask');
+  csImageMasks.forEach((mask, index) => {
+    if (index === 0) {
+      return;
+    }
+    const maskAnimation = gsap.from(mask, {
+      width: '100%',
+      duration: 0.7,
+      ease: 'loader2',
+      paused: true,
     });
-  }
+    ScrollTrigger.create({
+      animation: maskAnimation,
+      trigger: mask,
+      start: 'top 80%',
+      onEnter: () => maskAnimation.play(),
+    });
+  });
+}
 
-  // Update the scroll trigger on page load
+// Update the scroll trigger on page load
 window.updateScrollTrigger = function() {
   window.onload = function() {
     ScrollTrigger.update();
   };
 }
 
-  // Blog post main image mask animation
-  window.blogPostMaskAnimation = function(e) {
-    const blogHero = document.querySelector('#heroSection');
-    const blogMaskAnimation = gsap.from('.post_main-mask-ract', {
-      left: '0%',
-      ease: 'loader2',
-    });
-    ScrollTrigger.create({
-      animation: blogMaskAnimation,
-      trigger: blogHero,
-      start: 'top -5%',
-      end: 'bottom 50%',
-      scrub: 0.5,
-    });
-  }
+// Blog post main image mask animation
+window.blogPostMaskAnimation = function(e) {
+  const blogHero = document.querySelector('#heroSection');
+  const blogMaskAnimation = gsap.from('.post_main-mask-ract', {
+    left: '0%',
+    ease: 'loader2',
+  });
+  ScrollTrigger.create({
+    animation: blogMaskAnimation,
+    trigger: blogHero,
+    start: 'top -5%',
+    end: 'bottom 50%',
+    scrub: 0.5,
+  });
+}
 
-  // Custom checkboxes
+// Custom checkboxes
 window.changeCheckboxLabelColor = function() {
   let checkboxInputs = document.querySelectorAll('.w-checkbox-input');
 
@@ -2270,7 +2427,7 @@ window.changeCheckboxLabelColor = function() {
   });
 }
 
-  // Contact modal open animation
+// Contact modal open animation
 window.openContactModal = function() {
   contactFormOpen.play();
   document.body.classList.add('is-scroll-off');
@@ -2315,15 +2472,15 @@ window.successMsgAnimation = function(e) {
       ease: 'loader2',
     }
   );
-    successMsgAnim.to(
-      e,
-      {
-        width: '0%',
-        duration: 0.6,
-        ease: 'loader2',
-      },
-      '>-0.5'
-    );
+  successMsgAnim.to(
+    e,
+    {
+      width: '0%',
+      duration: 0.6,
+      ease: 'loader2',
+    },
+    '>-0.5'
+  );
   successMsgAnim.from(
     '#successParagraph',
     {
@@ -2370,7 +2527,6 @@ window.contactUsHide = function(e) {
 }
 
 
-
 window.expandablePadSticky = function (e) {
   var wrapper = e;
   if (!wrapper || wrapper.dataset.expandablePadStickyInit === 'true') return;
@@ -2415,13 +2571,38 @@ window.expandablePadSticky = function (e) {
     }
   }
 
+  // Click a tab (the title row next to .service_expanded) to scroll to its trigger point
+  function scrollToIndex(index) {
+    var rect = wrapper.getBoundingClientRect();
+    var absoluteTop = rect.top + window.pageYOffset;
+    var total = wrapper.offsetHeight - window.innerHeight;
+    if (total <= 0) return;
+    var progress = (index + 0.5) / (count + 1);
+    var targetY = absoluteTop + progress * total;
+
+    lenis.scrollTo(targetY, {
+      duration: 1.2,
+      easing: function (t) { return Math.min(1, 1.001 - Math.pow(2, -10 * t)); },
+    });
+  }
+
+  for (var i = 0; i < items.length; i++) {
+    (function (index) {
+      var parent = items[index].parentElement;
+      var tab = parent ? parent.querySelector('.service_item-wrapper.is-p-l') : null;
+      if (!tab) return;
+      tab.addEventListener('click', function () {
+        scrollToIndex(index);
+      });
+    })(i);
+  }
+
   window.addEventListener('scroll', onScrollOrResize, { passive: true });
   window.addEventListener('resize', onResize);
   update();
 };
 
 
-
 // Refresh Gsap scrollTriggers
 window.scrollTriggerRefresh = function() {
   function refreshScrollTrigger() {
@@ -2435,7 +2616,7 @@ window.scrollTriggerRefresh = function() {
 
 // Info bar close animation
 window.closeInfoBar = function() {
-    const infoBarClose = gsap.timeline({});
+  const infoBarClose = gsap.timeline({});
   infoBarClose.to('.info-bar', {
     height: 0,
     autoAlpha: 0,
@@ -2456,31 +2637,29 @@ window.closeInfoBar = function() {
 }
 
 
+// !!!!!!!!! Keep this Alpine init at the end !!!!!!!!!
+window.Webflow ||= [];
+window.Webflow.push(() => {
 
-
-  // !!!!!!!!! Keep this Alpine init at the end !!!!!!!!!
-  window.Webflow ||= [];
-  window.Webflow.push(() => {
-
-    console.log('The new code source is loaded!');
-    initAlpine();
-    lazyLoadVideos();
-    if (Webflow.env("editor") === undefined) {
-      lenisScroll();
-      lenis.start();
-    } else {
-      console.log('Editor mode ON');
-      lenis.destroy();
-    }
-    customGsapEasing();
-    reloadOnBack();
-    revealFooter();
-    pageLoadAnimation();
-    pageTransitionAnimation();
-    customCursorOnClick();
-    contactFormOpenAnimation();
-    disableScrollMenu();
-    scrollToHashOnLoad();
-    initClientLogosAnimation();
-    articleModalOpenAnimation();
-  });
+  console.log('The new code source is loaded!');
+  initAlpine();
+  lazyLoadVideos();
+  if (Webflow.env("editor") === undefined) {
+    lenisScroll();
+    lenis.start();
+  } else {
+    console.log('Editor mode ON');
+    lenis.destroy();
+  }
+  customGsapEasing();
+  reloadOnBack();
+  revealFooter();
+  pageLoadAnimation();
+  pageTransitionAnimation();
+  customCursorOnClick();
+  contactFormOpenAnimation();
+  disableScrollMenu();
+  scrollToHashOnLoad();
+  initClientLogosAnimation();
+  articleModalOpenAnimation();
+});