(function () {
  "use strict";
  const SITE_JS_VERSION = "4.11.0";
  console.log(`[site] global.js v${SITE_JS_VERSION} loaded`);

  if (typeof gsap === "undefined") {
    console.error("[site] GSAP not found. Enable it in Webflow Project Settings → Integrations.");
    throw new Error("[site] Missing dependency: gsap");
  }
  // v4.0.0 dropped the Observer plugin — it was never used in this file and
  // its registration cost ~3KB of GSAP bundle for nothing.
  gsap.registerPlugin(ScrollTrigger);

  // ── Global perf config ────────────────────────────────────────────────────
  // ignoreMobileResize stops ScrollTrigger from refreshing every time the
  // iOS / Android URL bar shows or hides. A refresh mid-scroll blows away
  // animation caches and was a big contributor to mobile Safari stutter.
  //
  // force3D is NOT enabled globally (it was in v3.0.x). Promoting every
  // transformed element to a GPU layer — sliders, dots, menu items — causes
  // layer explosion on Safari and makes compositing slower, not faster.
  // Instead, force3D is set per-tween on the specific animations that
  // genuinely benefit from a layer (parallax + footer unveil).
  ScrollTrigger.config({ ignoreMobileResize: true });

  const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  // Safe Number parse — returns the fallback for NaN / Infinity / malformed
  // input. Protects against setInterval(fn, NaN) and similar footguns when
  // data-* attributes are mistyped in the CMS.
  const numOr = (v, fallback) => {
    const n = Number(v);
    return Number.isFinite(n) ? n : fallback;
  };

  // ── Lenis ─────────────────────────────────────────────────────────────────
  // Driven by GSAP's ticker — one RAF loop, not two. lagSmoothing(0) is the
  // Lenis-recommended pairing; it stops GSAP from re-timing after a long
  // background tab, which would otherwise show as a lurch on tab re-focus.
  // syncTouch: false keeps touch scrolling on the browser's native path.
  //
  // lerp 0.1 replaces the previous duration-based smoothing. The long tail
  // that `duration: 1` produces is a known Firefox / Safari stutter source
  // because every frame compounds fractional-pixel scroll work; lerp is
  // frame-rate linear and lands in ~5 frames at 60fps, which feels similar
  // but has far less per-frame compounding. If you need a looser feel, nudge
  // this down to 0.08 (slower) or 0.14 (tighter).
  const lenis = new Lenis({
    lerp: 0.1,
    smoothWheel: true,
    smoothTouch: false,
    syncTouch: false,
    wheelMultiplier: 1,
  });
  gsap.ticker.add((time) => lenis.raf(time * 1000));
  gsap.ticker.lagSmoothing(0);
  lenis.on("scroll", ScrollTrigger.update);
  if (prefersReduced) lenis.stop();

  // ── Single resize → ScrollTrigger refresh ─────────────────────────────────
  let _rTimer;
  const _refresh = () => { clearTimeout(_rTimer); _rTimer = setTimeout(() => ScrollTrigger.refresh(), 200); };
  window.addEventListener("resize", _refresh, { passive: true });
  window.addEventListener("orientationchange", _refresh, { passive: true });

  // ── Shared matchMedia instance ─────────────────────────────────────────────
  const mm = gsap.matchMedia();

  // ── Slider settings ────────────────────────────────────────────────────────
  const DEFAULT_SETTINGS = {
    startIndex: 0, autoPlay: true, autoPlayDelay: 5000, pauseOnHover: true,
    swipeThreshold: 50, fadeOutDuration: 0.2, fadeInDuration: 0.6, fadePause: 0.06,
    fadeEase: "power4.out", dotClass: "quote-dot", dotInactiveAlpha: 0.5,
    dotActiveAlpha: 1, dotActiveWidth: "2rem", dotCloseDuration: 0.3,
    dotOpenDuration: 0.5, dotPause: 0.04, dotEase: "power4.out", counterFormat: "index",
  };

  function readSettings(el) {
    const s = { ...DEFAULT_SETTINGS }, d = el.dataset;
    if (d.autoplay !== undefined)       s.autoPlay       = d.autoplay !== "false";
    if (d.autoplayDelay !== undefined)  s.autoPlayDelay  = numOr(d.autoplayDelay,  DEFAULT_SETTINGS.autoPlayDelay);
    if (d.swipeThreshold !== undefined) s.swipeThreshold = numOr(d.swipeThreshold, DEFAULT_SETTINGS.swipeThreshold);
    if (d.startIndex !== undefined)     s.startIndex     = numOr(d.startIndex, 0);
    if (d.counterFormat !== undefined)  s.counterFormat  = d.counterFormat;
    return s;
  }

  const activeSliders = [];
  document.addEventListener("visibilitychange", () => {
    activeSliders.forEach(c => document.hidden ? c.stopAutoPlay() : c.resetAutoPlay());
  });

  function createSliderCore(sliderEl, slides, settings, onAfterTransition) {
    let currentIndex = Math.min(settings.startIndex, slides.length - 1);
    let autoPlayTimer = null, touchStartX = 0, isHovered = false, isAnimating = false;
    let navigateNext = () => goToSlide(currentIndex + 1);
    let navigatePrev = () => goToSlide(currentIndex - 1);

    // will-change set once — avoids per-transition layer promotion churn.
    slides.forEach((slide, i) => {
      const active = i === currentIndex;
      slide.setAttribute("aria-hidden", active ? "false" : "true");
      slide.style.willChange = "opacity";
      gsap.set(slide, { autoAlpha: active ? 1 : 0, display: active ? "block" : "none" });
    });

    function goToSlide(targetIndex) {
      if (slides.length <= 1 || isAnimating) return;
      const nextIndex = ((targetIndex % slides.length) + slides.length) % slides.length;
      if (nextIndex === currentIndex) return;
      const outSlide = slides[currentIndex], inSlide = slides[nextIndex];
      outSlide.setAttribute("aria-hidden", "true");
      inSlide.setAttribute("aria-hidden", "false");
      gsap.killTweensOf([outSlide, inSlide]);
      isAnimating = true;
      const tl = gsap.timeline({
        onComplete: () => { currentIndex = nextIndex; isAnimating = false; onAfterTransition?.(currentIndex); },
      });
      tl.to(outSlide, { autoAlpha: 0, duration: settings.fadeOutDuration, ease: settings.fadeEase, onComplete: () => gsap.set(outSlide, { display: "none" }) });
      if (settings.fadePause > 0) tl.to({}, { duration: settings.fadePause });
      tl.set(inSlide, { display: "block", autoAlpha: 0 });
      tl.to(inSlide, { autoAlpha: 1, duration: settings.fadeInDuration, ease: settings.fadeEase });
      return tl;
    }

    const nextSlide = () => navigateNext();
    const prevSlide = () => navigatePrev();

    function startAutoPlay() {
      if (!settings.autoPlay || slides.length <= 1 || prefersReduced) return;
      stopAutoPlay();
      autoPlayTimer = setInterval(() => { if (!isHovered && !isAnimating) nextSlide(); }, settings.autoPlayDelay);
    }
    function stopAutoPlay()  { if (autoPlayTimer) { clearInterval(autoPlayTimer); autoPlayTimer = null; } }
    function resetAutoPlay() { if (settings.autoPlay && slides.length > 1) startAutoPlay(); }

    if (settings.pauseOnHover && slides.length > 1) {
      sliderEl.addEventListener("mouseenter", () => { isHovered = true; });
      sliderEl.addEventListener("mouseleave", () => { isHovered = false; });
    }
    if (slides.length > 1) {
      sliderEl.addEventListener("touchstart", e => { touchStartX = e.changedTouches[0].clientX; }, { passive: true });
      sliderEl.addEventListener("touchend", e => {
        if (isAnimating) return;
        const dist = e.changedTouches[0].clientX - touchStartX;
        if (Math.abs(dist) < settings.swipeThreshold) return;
        dist < 0 ? nextSlide() : prevSlide();
        resetAutoPlay();
      }, { passive: true });
    }

    const core = {
      goToSlide, nextSlide, prevSlide, startAutoPlay, stopAutoPlay, resetAutoPlay,
      getCurrentIndex: () => currentIndex,
      setNavigate: (next, prev) => { navigateNext = next; navigatePrev = prev; },
    };
    activeSliders.push(core);
    return core;
  }

  // ── Quote slider ───────────────────────────────────────────────────────────
  function initQuoteSliders() {
    document.querySelectorAll("[data-quote-slider]").forEach(sliderEl => {
      if (sliderEl.dataset.initDone) return;
      sliderEl.dataset.initDone = "1";
      const settings  = readSettings(sliderEl);
      const dotsWrap  = sliderEl.querySelector("[data-quote-dots]");
      const allSlides = Array.from(sliderEl.querySelectorAll("[data-quote-slide]"));
      const slides    = allSlides.filter(s => !dotsWrap?.contains(s));
      if (!slides.length) return;
      const dots = buildDots(dotsWrap, slides, settings);
      dots.forEach((dot, i) => gsap.set(dot, {
        autoAlpha: i === 0 ? settings.dotActiveAlpha : settings.dotInactiveAlpha,
        width:     i === 0 ? settings.dotActiveWidth : dot.dataset.baseWidth,
      }));
      const core = createSliderCore(sliderEl, slides, settings, null);
      function goToWithDots(targetIndex) {
        const fromIndex = core.getCurrentIndex();
        const tl = core.goToSlide(targetIndex);
        if (tl && dots.length) tl.add(buildDotAnimation(dots, fromIndex, targetIndex, settings), 0);
      }
      core.setNavigate(() => goToWithDots(core.getCurrentIndex() + 1), () => goToWithDots(core.getCurrentIndex() - 1));
      dots.forEach((dot, i) => {
        dot.addEventListener("click",   ()  => { goToWithDots(i); core.resetAutoPlay(); });
        dot.addEventListener("keydown", e   => {
          if (e.key === "Enter" || e.key === " ") { e.preventDefault(); goToWithDots(i); core.resetAutoPlay(); }
        });
      });
      core.startAutoPlay();
    });
  }

  // ── Gallery slider ─────────────────────────────────────────────────────────
  function initGallerySliders() {
    document.querySelectorAll("[data-gallery-slider]").forEach(sliderEl => {
      if (sliderEl.dataset.initDone) return;
      sliderEl.dataset.initDone = "1";
      const settings  = readSettings(sliderEl);
      const slides    = Array.from(sliderEl.querySelectorAll("[data-gallery-slide]"));
      if (!slides.length) return;
      const prevBtn   = sliderEl.querySelector("[data-gallery-prev]");
      const nextBtn   = sliderEl.querySelector("[data-gallery-next]");
      const counterEl = sliderEl.querySelector("[data-gallery-counter]");
      const total     = slides.length;
      function updateCounter(i) {
        if (!counterEl) return;
        counterEl.textContent = settings.counterFormat === "fraction" ? `${i + 1} / ${total}` : `${i + 1} \u2014 ${total}`;
        counterEl.setAttribute("aria-label", `Image ${i + 1} of ${total}`);
      }
      updateCounter(0);
      const core = createSliderCore(sliderEl, slides, settings, updateCounter);
      if (prevBtn) prevBtn.addEventListener("click", () => { core.prevSlide(); core.resetAutoPlay(); });
      if (nextBtn) nextBtn.addEventListener("click", () => { core.nextSlide(); core.resetAutoPlay(); });
      sliderEl.addEventListener("keydown", e => {
        if (e.key === "ArrowLeft")  { core.prevSlide(); core.resetAutoPlay(); }
        if (e.key === "ArrowRight") { core.nextSlide(); core.resetAutoPlay(); }
      });
      core.startAutoPlay();
    });
  }

  // ── Dot helpers ────────────────────────────────────────────────────────────
  function buildDots(dotsWrap, slides, settings) {
    if (!dotsWrap) return [];
    if (slides.length <= 1) { dotsWrap.style.display = "none"; return []; }
    const tmpl = dotsWrap.querySelector(`.${settings.dotClass}`) || dotsWrap.firstElementChild;
    dotsWrap.style.display = "";
    dotsWrap.innerHTML = "";
    return slides.map((_, i) => {
      const dot = tmpl ? tmpl.cloneNode(true) : document.createElement("div");
      dot.classList.add(settings.dotClass);
      dot.setAttribute("role", "button");
      dot.setAttribute("tabindex", "0");
      dot.setAttribute("aria-label", `Go to slide ${i + 1}`);
      dotsWrap.appendChild(dot);
      dot.dataset.baseWidth = window.getComputedStyle(dot).width;
      return dot;
    });
  }

  function buildDotAnimation(dots, fromIndex, toIndex, settings) {
    if (!dots.length) return gsap.timeline();
    const to     = ((toIndex % dots.length) + dots.length) % dots.length;
    const outDot = dots[fromIndex], inDot = dots[to];
    const tl = gsap.timeline();
    if (outDot && outDot !== inDot)
      tl.to(outDot, { width: outDot.dataset.baseWidth ?? "8px", autoAlpha: settings.dotInactiveAlpha, duration: settings.dotCloseDuration, ease: settings.dotEase });
    if (settings.dotPause > 0) tl.to({}, { duration: settings.dotPause });
    if (inDot)
      tl.to(inDot, { width: settings.dotActiveWidth, autoAlpha: settings.dotActiveAlpha, duration: settings.dotOpenDuration, ease: settings.dotEase });
    return tl;
  }

  // ── Menu ───────────────────────────────────────────────────────────────────
  function initMenu() {
    const openButtons  = document.querySelectorAll("[data-menu-open]");
    const closeButtons = document.querySelectorAll("[data-menu-close]");
    const overlay = document.querySelector("[data-menu-overlay]");
    const panel   = document.querySelector("[data-menu-panel]");
    const site    = document.querySelector(".site");
    if (!overlay || !panel || !site) { console.warn("[menu] Missing elements"); return; }
    if (overlay.dataset.initDone) return;
    overlay.dataset.initDone = "1";
    let menuOpen = false;
    // Backdrop blur is SET statically and never animated. Animating
    // backdrop-filter is the single most expensive thing this file can do on
    // Safari — it blurs the entire viewport on every frame of the transition.
    // Fading opacity from 0 to 1 gives a near-identical visual result for
    // effectively zero paint cost. Blur reduced 30 → 24px (below the
    // diminishing-returns knee on every browser).
    gsap.set(overlay, {
      autoAlpha: 0,
      pointerEvents: "none",
      backdropFilter: "blur(24px) saturate(180%)",
      willChange: "opacity",
    });
    gsap.set(panel, { autoAlpha: 1, clipPath: "inset(0 0 100% 0)", y: "0vh" });
    gsap.set(site,  { y: "0vh" });
    const menuTl = gsap.timeline({ paused: true })
      .to(overlay, { autoAlpha: 1, pointerEvents: "auto", duration: 0.7, ease: "power4.inOut" }, 0)
      .to(panel,   { clipPath: "inset(0 0 0% 0)", y: 0,   duration: 1.2, ease: "power4.inOut" }, 0)
      .to(site,    { y: "15vh",                           duration: 1.2, ease: "power4.inOut" }, 0);
    function openMenu()  { if (!menuOpen) { menuOpen = true;  menuTl.timeScale(1).play(); } }
    function closeMenu() { if (menuOpen)  { menuOpen = false; menuTl.timeScale(1.5).reverse(); } }
    openButtons.forEach(btn  => btn.addEventListener("click", openMenu));
    closeButtons.forEach(btn => btn.addEventListener("click", closeMenu));
    document.addEventListener("keydown", e => { if (e.key === "Escape" && menuOpen) closeMenu(); });
    overlay.addEventListener("click", closeMenu);
  }

  // ── Image scroller ─────────────────────────────────────────────────────────
  function initImageScroller() {
    document.querySelectorAll("[data-img-scroll]").forEach(scroller => {
      if (scroller.dataset.initDone) return;
      scroller.dataset.initDone = "1";
      const track   = scroller.querySelector("[data-img-track]");
      const prevBtn = scroller.querySelector("[data-img-prev]");
      const nextBtn = scroller.querySelector("[data-img-next]");
      if (!track) return;
      if (window.matchMedia("(pointer: coarse)").matches) {
        // Touch device — disable the custom drag/snap logic entirely and rely
        // on native CSS scroll. Force the correct overflow + touch-action so
        // CSS alone works regardless of any inherited styles.
        scroller.style.overflowX   = "scroll";
        scroller.style.overflowY   = "hidden";
        scroller.style.touchAction = "pan-x";
        track.querySelectorAll("img").forEach(img => img.setAttribute("draggable", "false"));
        return;
      }
      const originals = Array.from(track.children);
      const N = originals.length;
      if (!N) return;
      const preFrag = document.createDocumentFragment();
      originals.forEach(item => { const c = item.cloneNode(true); c.setAttribute("aria-hidden", "true"); preFrag.appendChild(c); });
      track.insertBefore(preFrag, track.firstChild);
      originals.forEach(item => { const c = item.cloneNode(true); c.setAttribute("aria-hidden", "true"); track.appendChild(c); });
      track.querySelectorAll("img").forEach(img => { img.setAttribute("draggable", "false"); img.addEventListener("dragstart", e => e.preventDefault()); });

      // Shared state — lives outside init so listeners reference latest values.
      const allItems = Array.from(track.children);
      let scrollerW = 0, singleW = 0, allSnaps = [], origSnaps = [];
      const centerL  = item => Math.round(item.offsetLeft - (scrollerW - item.offsetWidth) / 2);
      const nearest  = sl => allSnaps.length ? allSnaps.reduce((b, s) => Math.abs(s - sl) < Math.abs(b - sl) ? s : b, allSnaps[0]) : sl;
      const nextSnap = sl => allSnaps.filter(s => s > sl + 2).sort((a, b) => a - b)[0] ?? nearest(sl);
      const prevSnap = sl => allSnaps.filter(s => s < sl - 2).sort((a, b) => b - a)[0] ?? nearest(sl);

      function loopCheck() {
        if (!origSnaps.length) return;
        const sl = scroller.scrollLeft;
        if      (sl < origSnaps[0]     - 2) scroller.scrollLeft += singleW;
        else if (sl > origSnaps[N - 1] + 2) scroller.scrollLeft -= singleW;
      }

      // rAF-batched scrollLeft writes. Writing scrollLeft inside a GSAP
      // onUpdate every tick forces synchronous layout on Firefox / Safari.
      // Coalescing through rAF keeps the writes aligned with paint, which
      // noticeably reduces drag / tween jitter on those browsers.
      let pendingSL = null, rafId = 0;
      const flushSL = () => { if (pendingSL !== null) { scroller.scrollLeft = pendingSL; pendingSL = null; } rafId = 0; };
      const writeSL = v => { pendingSL = v; if (!rafId) rafId = requestAnimationFrame(flushSL); };

      const proxy = { v: 0 };
      let tween = null;
      function snapTo(target, dur = 0.65) {
        if (tween) tween.kill();
        proxy.v = scroller.scrollLeft;
        tween = gsap.to(proxy, { v: target, duration: dur, ease: "expo.out", onUpdate() { writeSL(proxy.v); }, onComplete() { flushSL(); loopCheck(); } });
      }

      function calcSnaps() {
        scrollerW = scroller.clientWidth;
        singleW   = Math.round(track.scrollWidth / 3);
        allSnaps  = allItems.map(centerL);
        origSnaps = allSnaps.slice(N, 2 * N);
      }

      // Listeners attached immediately — slider is interactive before images
      // decode. Handlers guard against empty allSnaps (pre-decode state).
      if (prevBtn) prevBtn.addEventListener("click", () => { if (allSnaps.length) snapTo(prevSnap(scroller.scrollLeft)); });
      if (nextBtn) nextBtn.addEventListener("click", () => { if (allSnaps.length) snapTo(nextSnap(scroller.scrollLeft)); });

      let active = false, axis = null, startX = 0, startY = 0, startSL = 0;
      scroller.addEventListener("pointerdown", e => {
        if (tween) { tween.kill(); tween = null; }
        active = true; axis = null; startX = e.clientX; startY = e.clientY; startSL = scroller.scrollLeft;
        scroller.setPointerCapture(e.pointerId);
        scroller.style.cursor = "grabbing";
      }, { passive: true });
      scroller.addEventListener("pointermove", e => {
        if (!active) return;
        const dx = e.clientX - startX, dy = e.clientY - startY;
        if (!axis) {
          if      (Math.abs(dx) > Math.abs(dy) + 3) axis = "x";
          else if (Math.abs(dy) > Math.abs(dx) + 3) axis = "y";
          else return;
        }
        if (axis === "y") return;
        e.preventDefault();
        writeSL(startSL - dx);
      }, { passive: false });
      const onEnd = () => {
        if (!active) return;
        active = false;
        scroller.style.cursor = "grab";
        flushSL();
        if (axis !== "x" || !allSnaps.length) return;
        const sl = scroller.scrollLeft, absM = Math.abs(sl - startSL);
        if      (absM < 20)               snapTo(nearest(startSL), 0.45);
        else if (absM < scrollerW * 0.22) snapTo(sl > startSL ? nextSnap(startSL) : prevSnap(startSL), 0.6);
        else                              snapTo(nearest(sl), 0.7);
      };
      scroller.addEventListener("pointerup",     onEnd, { passive: true });
      scroller.addEventListener("pointercancel", onEnd, { passive: true });

      // ResizeObserver — fires only when the scroller itself changes size.
      let centredIndex = N, roTimer;
      new ResizeObserver(() => {
        if (allSnaps.length) {
          const idx = allSnaps.indexOf(nearest(scroller.scrollLeft));
          if (idx !== -1) centredIndex = idx;
        }
        clearTimeout(roTimer);
        roTimer = setTimeout(() => {
          calcSnaps();
          scroller.scrollLeft = allSnaps[centredIndex] ?? origSnaps[0] ?? 0;
          loopCheck();
        }, 150);
      }).observe(scroller);

      // img.decode() — waits for full decode before setting initial scroll
      // position. Listeners are already live above so the slider responds to
      // interaction immediately. Snapping kicks in as soon as this resolves
      // (near-instant for normal-sized images).
      const allImgs = Array.from(track.querySelectorAll("img"));
      const decodeImg = img => img.decode ? img.decode().catch(() => {}) : Promise.resolve();
      Promise.all(allImgs.map(img => {
        if (img.complete && img.naturalWidth > 0) return decodeImg(img);
        return new Promise(resolve => {
          img.addEventListener("load",  () => decodeImg(img).then(resolve), { once: true });
          img.addEventListener("error", resolve, { once: true });
        });
      })).then(() => requestAnimationFrame(() => requestAnimationFrame(() => {
        calcSnaps();
        scroller.scrollLeft = origSnaps[0] ?? 0;
        loopCheck();
      })));
    });
  }

  // ── Accordion ──────────────────────────────────────────────────────────────
  //
  // Wrapper: [data-accordion]               — group scope. By default, only
  //                                           ONE item inside a group may be
  //                                           open at a time. Add
  //                                           data-accordion="independent"
  //                                           to allow multiple open.
  //
  // Required children:
  //   [data-accordion-item] ............... each collapsible block.
  //   [data-accordion-header] ............. click target (should be a
  //                                         <button> for a11y; <div> also fine).
  //   [data-accordion-content] ............ animated panel. Must contain a
  //                                         single wrapper child — we measure
  //                                         THAT child's natural height
  //                                         rather than the panel itself, so
  //                                         the panel can stay overflow:hidden
  //                                         with height:0 in the base style.
  //
  // Optional:
  //   [data-accordion-icon] ............... element whose transform is
  //                                         animated 0 → 45deg to turn a
  //                                         "+" into an "×". Animation is
  //                                         driven entirely by JS — no CSS
  //                                         transition needed in Webflow.
  //   [data-accordion-item data-open] ..... item opens on load.
  //
  // Animation is height-based (not max-height) and uses GSAP so it
  // participates in the same ticker as Lenis. After every open/close we
  // call ScrollTrigger.refresh() because the document height changes and
  // any triggers below the accordion would otherwise fire at stale offsets.
  function initAccordion() {
    const groups = document.querySelectorAll("[data-accordion]");
    if (!groups.length) return;

    // DURATION is a fixed wall-clock time — open and close both take exactly
    // this long regardless of how tall the panel ends up. Bigger panels do
    // NOT animate for longer; they cover more pixels in the same window.
    //
    // EASE was previously "power3.out", which front-loads the motion: roughly
    // 75% of the distance is covered in the first 25% of the duration. On a
    // short FAQ panel that reads as a nice settle; on a tall panel (e.g. the
    // Care Instructions block with images) the first ~100ms move through
    // hundreds of pixels and the eye reads it as a snap. "power2.inOut" ramps
    // the velocity up and down symmetrically, so the open feels the same on
    // a 120px panel and a 1200px panel — same duration, no snap on the long
    // ones.
    const DURATION = prefersReduced ? 0 : 0.45;
    const EASE     = "power2.inOut";

    groups.forEach(group => {
      if (group.dataset.initDone) return;
      group.dataset.initDone = "1";

      const independent = group.dataset.accordion === "independent";
      const items = group.querySelectorAll("[data-accordion-item]");
      if (!items.length) return;

      const state = []; // parallel array of { item, header, content, icon, open }

      items.forEach(item => {
        const header  = item.querySelector("[data-accordion-header]");
        const content = item.querySelector("[data-accordion-content]");
        const icon    = item.querySelector("[data-accordion-icon]");
        if (!header || !content) return;

        // Base styles — set once so Webflow doesn't need custom CSS. Three
        // things matter here:
        //   overflow:hidden  — clips content while the panel is shorter than
        //                      its natural size. Without this the animation
        //                      looks like a reveal; with it, a slide.
        //   boxSizing:border-box — critical when the designer adds padding
        //                      to the panel. With content-box (the CSS
        //                      default), height:0 only zeroes the content
        //                      area, so top+bottom padding still takes up
        //                      space and a strip of content leaks through.
        //                      border-box makes height:0 truly mean 0px.
        //   height:0         — the collapsed state.
        gsap.set(content, { height: 0, overflow: "hidden", boxSizing: "border-box" });
        if (icon) gsap.set(icon, { rotate: 0, transformOrigin: "50% 50%" });
        header.setAttribute("aria-expanded", "false");

        const entry = { item, header, content, icon, open: false };
        state.push(entry);

        header.addEventListener("click", () => toggle(entry));
        // Keyboard parity when the header isn't a native <button>.
        if (header.tagName !== "BUTTON") {
          header.setAttribute("role", "button");
          header.setAttribute("tabindex", "0");
          header.addEventListener("keydown", e => {
            if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(entry); }
          });
        }
      });

      function openEntry(entry) {
        if (entry.open) return;
        entry.open = true;
        entry.header.setAttribute("aria-expanded", "true");
        entry.item.classList.add("is-open");
        // scrollHeight gives the minimum height required to show everything
        // inside the panel, INCLUDING its own padding. Combined with
        // box-sizing:border-box this means the panel animates to the exact
        // visual height of its rendered content — whether padding is on the
        // panel itself or on an inner wrapper.
        const target = entry.content.scrollHeight;
        gsap.to(entry.content, {
          height: target,
          duration: DURATION,
          ease: EASE,
          onComplete: () => {
            // Release the fixed height so the panel reflows if its content
            // changes (images loading, responsive breakpoint, etc.).
            gsap.set(entry.content, { height: "auto" });
            ScrollTrigger.refresh();
          },
        });
        if (entry.icon) gsap.to(entry.icon, { rotate: 45, duration: DURATION, ease: EASE });
      }

      function closeEntry(entry) {
        if (!entry.open) return;
        entry.open = false;
        entry.header.setAttribute("aria-expanded", "false");
        entry.item.classList.remove("is-open");
        // Lock the current pixel height before animating to 0 — required
        // because we set height:auto on open, and you can't tween from auto.
        const current = entry.content.getBoundingClientRect().height;
        gsap.set(entry.content, { height: current });
        gsap.to(entry.content, {
          height: 0,
          duration: DURATION,
          ease: EASE,
          onComplete: () => ScrollTrigger.refresh(),
        });
        if (entry.icon) gsap.to(entry.icon, { rotate: 0, duration: DURATION, ease: EASE });
      }

      function toggle(entry) {
        if (entry.open) { closeEntry(entry); return; }
        if (!independent) state.forEach(other => { if (other !== entry) closeEntry(other); });
        openEntry(entry);
      }

      // Honour data-open on initial render. Opened without animation so
      // first-paint doesn't flash a collapse.
      state.forEach(entry => {
        if (entry.item.hasAttribute("data-open")) {
          entry.open = true;
          entry.header.setAttribute("aria-expanded", "true");
          entry.item.classList.add("is-open");
          gsap.set(entry.content, { height: "auto" });
          if (entry.icon) gsap.set(entry.icon, { rotate: 45 });
          // If we're in single-open mode and the markup mistakenly flags
          // more than one as data-open, keep only the first.
          if (!independent) {
            state.forEach(o => { if (o !== entry && o.open) closeEntry(o); });
          }
        }
      });
    });
  }

  // ── Consent ────────────────────────────────────────────────────────────────
  //
  // Wrapper:  .consent_components       — the consent modal/banner.
  //
  // Required in Webflow Designer:
  //   Set .consent_components to opacity: 0 and visibility: hidden so it is
  //   invisible before JS runs (no flash). Do NOT use display:none — GSAP
  //   can't transition from it. The autoAlpha tween handles both together.
  //
  // Accept button:
  //   Add data-consent-accept to any button/link inside the component that
  //   confirms consent. Clicking it records the decision in localStorage and
  //   fades the component out.
  //
  // Storage key: "off_field_consent_done"
  //   Delete from DevTools → Application → localStorage to test the flow again.
  //
  // Fade-in delay: CONSENT_DELAY seconds after DOMContentLoaded.
  const CONSENT_KEY   = "off_field_consent_done";
  const CONSENT_DELAY = 1; // seconds before the form fades in

  function initConsent() {
    const form = document.querySelector(".consent_components");
    if (!form) return;

    // Already consented — stay hidden, nothing to do.
    if (localStorage.getItem(CONSENT_KEY)) return;

    // Not yet consented — fade in after a short delay so the page settles first.
    gsap.to(form, {
      autoAlpha: 1,
      duration: 0.6,
      ease: "power2.out",
      delay: CONSENT_DELAY,
    });

    // Wire up every accept button inside the component.
    form.querySelectorAll("[data-consent-accept]").forEach(btn => {
      btn.addEventListener("click", () => {
        localStorage.setItem(CONSENT_KEY, "1");
        gsap.to(form, {
          autoAlpha: 0,
          duration: 0.4,
          ease: "power2.in",
          onComplete: () => { form.style.display = "none"; },
        });
      });
    });
  }

  // ── Init orchestration ─────────────────────────────────────────────────────
  // Modules are split into three buckets based on how soon they need to run.
  // The aim is to clear the main thread for first paint, then layer in the
  // rest as the browser has cycles to spare.
  //
  //   CRITICAL — run synchronously on DOMContentLoaded. Above-the-fold UI
  //   the user might touch immediately: menu, the hero parallax triggers,
  //   accordions (cheap; listeners only), and the collection-list filter /
  //   pagination state (needs to be responsive the moment a filter button
  //   shows up).
  //
  //   LAZY     — IntersectionObserver-deferred. The init function fires
  //   only once its first target element is within `rootMargin` of the
  //   viewport. Above-the-fold instances are detected via a synchronous
  //   getBoundingClientRect check and skip the observer entirely — so
  //   there's no user-visible delay for hero-area sliders or audio
  //   players.
  //
  //   IDLE     — requestIdleCallback (with a tiny setTimeout fallback for
  //   Safari, which still doesn't ship it). Side features that don't
  //   compete with paint.
  //
  // safeInit wraps every call in try/catch so a single failing component
  // can't break the rest of the site. Errors are logged with the module
  // name so they're grep-able in production consoles.
  //
  // Every bucket also guards on `document.querySelector(selector)` before
  // calling the init — so the JS for an unused module costs nothing on
  // pages that don't include it. (The function definitions themselves are
  // already hoisted; this just skips the work.)
  function safeInit(name, fn) {
    try { fn(); }
    catch (err) { console.error(`[site] init failed: ${name}`, err); }
  }

  function lazyInit(selector, name, fn, rootMargin = '300px') {
    const first = document.querySelector(selector);
    if (!first) return; // nothing on this page

    // Above-the-fold fast path. The IntersectionObserver fires its first
    // callback asynchronously on the next idle frame, which is ~50–100ms
    // away. For modules whose target is already on screen at load time
    // (hero slider, hero audio player) that delay is noticeable, so we
    // synchronously measure with getBoundingClientRect and init now if
    // the element is within the same margin the observer would use.
    const rect   = first.getBoundingClientRect();
    const margin = parseInt(rootMargin, 10) || 0;
    if (rect.top < window.innerHeight + margin && rect.bottom > -margin) {
      safeInit(name, fn);
      return;
    }

    if (!('IntersectionObserver' in window)) { safeInit(name, fn); return; }

    const io = new IntersectionObserver(entries => {
      if (entries.some(e => e.isIntersecting)) {
        io.disconnect();
        safeInit(name, fn);
      }
    }, { rootMargin });
    io.observe(first);
  }

  function idleInit(name, fn) {
    const run = () => safeInit(name, fn);
    if ('requestIdleCallback' in window) {
      requestIdleCallback(run, { timeout: 2000 });
    } else {
      // Safari doesn't ship requestIdleCallback as of Safari 17 — a tiny
      // setTimeout still gets us off the critical path without blocking.
      setTimeout(run, 1);
    }
  }

  document.addEventListener("DOMContentLoaded", () => {
    // ── Critical: synchronous, only if any target element exists ──────────
    if (document.querySelector('.consent_components'))
      safeInit('consent',          initConsent);
    if (document.querySelector('[data-menu-overlay]'))
      safeInit('menu',             initMenu);
    if (document.querySelector('[data-hero]'))
      safeInit('parallax',         initParallax);
    if (document.querySelector('[data-accordion]'))
      safeInit('accordion',        initAccordion);
    if (document.querySelector('[data-list="dynamic"]'))
      safeInit('dynamicLists',     initDynamicLists);
    if (document.querySelector('[data-list]'))
      safeInit('collectionLists',  initCollectionLists);

    // ── Idle: queue for browser idle time ─────────────────────────────────
    if (document.querySelector('[data-share-email],[data-share-copy]'))
      idleInit('share',            initShare);

    // ── Lazy: IntersectionObserver-deferred (with above-fold fast path) ──
    lazyInit('[data-img-scroll]',     'imageScroller',  initImageScroller);
    lazyInit('[data-quote-slider]',   'quoteSliders',   initQuoteSliders);
    lazyInit('[data-gallery-slider]', 'gallerySliders', initGallerySliders);
    lazyInit('.audio__player',        'audioPlayer',    initAudioPlayer);
    lazyInit('[data-footer-unveil]',  'footerUnveil',   initFooterUnveil);

    // initCartCount intentionally NOT called here — it lives in its own
    // IIFE at the bottom of this file so it survives pages that don't load
    // GSAP (Webflow's Ecommerce cart / checkout / order confirmation chrome).
  });
  window.addEventListener("load", () => ScrollTrigger.refresh());

  // ── Audio player ───────────────────────────────────────────────────────────
  //
  // Wrapper: .audio__player (one or many per page — each is independent)
  //   [data-pod-speeds="1,1.5,2"]     — optional: comma-separated playback
  //                                     rates to cycle through. Default "1,1.5,2".
  //
  // Required children:
  //   <audio> ................... the source element (bind CMS audio URL here).
  //   [data-pod-play] ........... play/pause toggle button.
  //
  // Optional children:
  //   [data-pod-icon-play]  \\___ wrap two icon elements inside the play
  //   [data-pod-icon-pause] /    button. The script sets inline display
  //                              on each so you don't need any CSS.
  //                              In Webflow, make BOTH icons Visible (no
  //                              display:none in the Designer) and they
  //                              should be the same display type as the
  //                              play icon (block / inline-block / flex).
  //   [data-pod-time] ........... text element; updated every timeupdate with
  //                               the REMAINING time (countdown). Before play
  //                               it shows the total duration. Kept for
  //                               back-compat; new players should use the
  //                               split current/remaining pair below.
  //   [data-pod-current] ........ text element showing ELAPSED time (e.g. "0:16").
  //   [data-pod-remaining] ...... text element showing REMAINING time prefixed
  //                               with a minus (e.g. "-10:28"). Use this AND
  //                               [data-pod-current] together for the split
  //                               "0:16 ──── -10:28" layout.
  //   [data-pod-duration] ....... text element showing TOTAL duration. Optional;
  //                               useful if you'd rather show "0:16 / 10:44".
  //   [data-pod-scrub] .......... clickable / draggable scrubber TRACK. Make
  //                               this a div with a fixed height (4–6px works
  //                               well) and a background colour. Click anywhere
  //                               on it to seek; drag to scrub. While dragging,
  //                               playback is paused and resumed on release
  //                               only if it was already playing — prevents
  //                               glitchy "fast forward" when the user
  //                               overshoots and corrects.
  //   [data-pod-progress] ....... inner FILL element inside [data-pod-scrub].
  //                               Its `width` is set to the playback percent.
  //                               Style it absolutely positioned at 0,0 with
  //                               height:100% and width:0%; the script grows
  //                               the width from 0 → 100% as the audio plays.
  //   [data-pod-speed] .......... click to cycle through data-pod-speeds. Its
  //                               text content becomes "1x" / "1.5x" / "2x".
  //                               If you want custom markup inside the button,
  //                               nest [data-pod-speed-label] and that span is
  //                               what gets updated instead.
  //
  // Minimal CSS you'd add in Webflow for the scrubber, given divs called
  // .scrub-track + .scrub-fill:
  //   .scrub-track { position: relative; height: 4px; background: #d8d8d8;
  //                  cursor: pointer; flex: 1; }
  //   .scrub-fill  { position: absolute; left: 0; top: 0; height: 100%;
  //                  background: #111; width: 0%; pointer-events: none; }
  //
  // State:
  //   The wrapper carries data-pod-playing="true|false" so you can style any
  //   descendant (icon swap, waveform bars, colour change…) with CSS alone.
  //   The play button carries aria-pressed="true|false" for assistive tech.
  //   While the user is actively dragging the scrubber the wrapper also
  //   carries data-pod-scrubbing="true" so you can highlight the thumb /
  //   freeze a hover state if you like.
  function initAudioPlayer() {
    document.querySelectorAll('.audio__player').forEach(player => {
      if (player.dataset.initDone) return;
      player.dataset.initDone = "1";

      const audio   = player.querySelector('audio');
      const playBtn = player.querySelector('[data-pod-play]');
      if (!audio || !playBtn) return;

      const timeEl      = player.querySelector('[data-pod-time]');       // legacy: remaining
      const currentEl   = player.querySelector('[data-pod-current]');    // elapsed
      const remainingEl = player.querySelector('[data-pod-remaining]');  // -remaining
      const durationEl  = player.querySelector('[data-pod-duration]');   // total
      const speedBtn    = player.querySelector('[data-pod-speed]');
      const playIcon    = player.querySelector('[data-pod-icon-play]');
      const pauseIcon   = player.querySelector('[data-pod-icon-pause]');
      const scrubTrack  = player.querySelector('[data-pod-scrub]');
      const scrubFill   = player.querySelector('[data-pod-progress]');

      // Sample the play icon's display so we can restore it later. Fall back
      // to 'inline-block' if the icon is missing or already hidden.
      let shownDisplay = 'inline-block';
      if (playIcon) {
        const d = getComputedStyle(playIcon).display;
        if (d && d !== 'none') shownDisplay = d;
      }

      // Parse speed list, falling back to a sensible default if malformed.
      const speeds = (player.dataset.podSpeeds || '1,1.5,2')
        .split(',').map(s => parseFloat(s)).filter(n => n > 0);
      if (!speeds.length) speeds.push(1);
      let speedIndex = 0;

      const fmtTime = s => {
        s = Math.max(0, Math.floor(s));
        const m = Math.floor(s / 60);
        const r = s % 60;
        return m + ':' + (r < 10 ? '0' : '') + r;
      };

      const setPlaying = on => {
        player.setAttribute('data-pod-playing', on ? 'true' : 'false');
        playBtn.setAttribute('aria-pressed', on ? 'true' : 'false');
        if (playIcon)  playIcon.style.display  = on ? 'none' : shownDisplay;
        if (pauseIcon) pauseIcon.style.display = on ? shownDisplay : 'none';
      };

      const updateTime = () => {
        const dur = isFinite(audio.duration) ? audio.duration : 0;
        const cur = Math.max(0, Math.min(audio.currentTime, dur));
        const remaining = Math.max(0, dur - cur);
        // Legacy single-element display — keeps the old [data-pod-time]
        // contract (REMAINING time, no minus sign) intact.
        if (timeEl)      timeEl.textContent      = fmtTime(remaining);
        // New split display. Remaining gets a leading "-" because that's the
        // convention every podcast app uses ("-10:28") — easy to grok at a
        // glance.
        if (currentEl)   currentEl.textContent   = fmtTime(cur);
        if (remainingEl) remainingEl.textContent = '-' + fmtTime(remaining);
        if (durationEl)  durationEl.textContent  = fmtTime(dur);
      };

      // Scrubber fill is driven from the same time tick as the text displays.
      // We grow the inner element's `width` rather than animating a transform
      // so the fill is pixel-accurate at any track width — no need to read
      // the track size on every frame.
      const updateScrub = () => {
        if (!scrubFill) return;
        const dur = isFinite(audio.duration) ? audio.duration : 0;
        const pct = dur > 0 ? (audio.currentTime / dur) * 100 : 0;
        scrubFill.style.width = pct + '%';
      };

      const updateSpeedLabel = () => {
        if (!speedBtn) return;
        const s = speeds[speedIndex];
        const txt = (s % 1 === 0 ? s.toFixed(0) : String(s)) + 'x';
        const label = speedBtn.querySelector('[data-pod-speed-label]') || speedBtn;
        label.textContent = txt;
      };

      // Seed initial state.
      setPlaying(false);
      updateSpeedLabel();
      if (audio.readyState >= 1) { updateTime(); updateScrub(); }

      const tick = () => { updateTime(); updateScrub(); };
      audio.addEventListener('loadedmetadata', tick);
      audio.addEventListener('durationchange', tick);
      audio.addEventListener('timeupdate',     tick);
      audio.addEventListener('play',           () => setPlaying(true));
      audio.addEventListener('pause',          () => setPlaying(false));
      audio.addEventListener('ended',          () => { setPlaying(false); tick(); });

      playBtn.addEventListener('click', () => {
        if (audio.paused) audio.play();
        else              audio.pause();
      });

      if (speedBtn) {
        speedBtn.addEventListener('click', () => {
          speedIndex = (speedIndex + 1) % speeds.length;
          audio.playbackRate = speeds[speedIndex];
          updateSpeedLabel();
        });
      }

      // ── Scrubber ──────────────────────────────────────────────────────────
      // Pointer events unify mouse, touch and pen, and pointer capture means
      // the drag keeps tracking even if the cursor leaves the track. We pause
      // playback for the duration of the drag and only resume if it was
      // playing when the user grabbed — so a paused scrub stays paused.
      if (scrubTrack) {
        let isScrubbing = false;
        let wasPlaying  = false;

        // touchAction:none on the track itself stops the browser hijacking
        // horizontal drags as a page scroll on mobile.
        scrubTrack.style.touchAction = 'none';

        const seekFromPointer = e => {
          const rect  = scrubTrack.getBoundingClientRect();
          const ratio = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
          const dur   = isFinite(audio.duration) ? audio.duration : 0;
          if (dur <= 0) return;
          audio.currentTime = ratio * dur;
          updateScrub();
          updateTime();
        };

        scrubTrack.addEventListener('pointerdown', e => {
          isScrubbing = true;
          wasPlaying  = !audio.paused;
          if (wasPlaying) audio.pause();
          player.setAttribute('data-pod-scrubbing', 'true');
          try { scrubTrack.setPointerCapture(e.pointerId); } catch (_) {}
          seekFromPointer(e);
        });
        scrubTrack.addEventListener('pointermove', e => {
          if (isScrubbing) seekFromPointer(e);
        });
        const endScrub = e => {
          if (!isScrubbing) return;
          isScrubbing = false;
          player.setAttribute('data-pod-scrubbing', 'false');
          try { scrubTrack.releasePointerCapture(e.pointerId); } catch (_) {}
          if (wasPlaying) audio.play();
        };
        scrubTrack.addEventListener('pointerup',     endScrub);
        scrubTrack.addEventListener('pointercancel', endScrub);

        // Keyboard a11y — focus the track and use ←/→ for ±5s, Shift+arrow
        // for ±15s. Lets keyboard users seek without a mouse.
        scrubTrack.setAttribute('role', 'slider');
        scrubTrack.setAttribute('tabindex', '0');
        if (!scrubTrack.hasAttribute('aria-label')) {
          scrubTrack.setAttribute('aria-label', 'Audio scrubber');
        }
        scrubTrack.addEventListener('keydown', e => {
          const step = e.shiftKey ? 15 : 5;
          const dur  = isFinite(audio.duration) ? audio.duration : 0;
          if (e.key === 'ArrowLeft') {
            e.preventDefault();
            audio.currentTime = Math.max(0, audio.currentTime - step);
            tick();
          } else if (e.key === 'ArrowRight') {
            e.preventDefault();
            audio.currentTime = Math.min(dur, audio.currentTime + step);
            tick();
          }
        });
      }
    });
  }

  // ── Share ──────────────────────────────────────────────────────────────────
  function initShare() {
    const emailBtn = document.querySelector('[data-share-email]');
    const copyBtn  = document.querySelector('[data-share-copy]');
    if (emailBtn) {
      emailBtn.addEventListener('click', () => {
        window.location.href = 'mailto:?subject=' + encodeURIComponent(document.title) + '&body=' + encodeURIComponent(window.location.href);
      });
    }
    if (copyBtn) {
      copyBtn.addEventListener('click', function () {
        const orig = this.textContent;
        navigator.clipboard.writeText(window.location.href)
          .then(() => { this.textContent = 'Copied'; setTimeout(() => { this.textContent = orig; }, 2000); })
          .catch(err => console.warn('[site] Clipboard write failed:', err));
      });
    }
  }

  // ── Collection lists (CMS) ─────────────────────────────────────────────────
  // Reusable list controller — configured per wrapper via data attributes.
  // Each wrapper acts independently: multiple lists on the same page do not
  // share state. All controls are optional; the script safely no-ops if any
  // are missing.
  //
  // Wrapper attributes:
  //   data-list                — marks the wrapper (required).
  //   data-initial-count="N"   — how many items to show on first render
  //                              (desktop). Default: no limit (all items shown).
  //   data-initial-count-mobile="N"
  //                            — mobile override for data-initial-count.
  //                              Applied when the viewport is <= the mobile
  //                              breakpoint at INIT TIME. Defaults to the
  //                              desktop value if omitted, so you only need
  //                              to set this when you want a different number
  //                              on small screens (e.g. 9 desktop, 6 mobile).
  //   data-load-count="N"      — how many items to reveal per load-more click
  //                              (desktop). Default: 6.
  //   data-load-count-mobile="N"
  //                            — mobile override for data-load-count. Falls
  //                              back to the desktop value if omitted.
  //   data-mobile-breakpoint="767"
  //                            — max viewport width (px) treated as mobile.
  //                              Default 767, matching Webflow's tablet/mobile
  //                              boundary. Evaluated once at init — resizing
  //                              after load does not re-pick the count, so
  //                              the experience stays stable mid-session.
  //   data-fade-duration="0.5" — seconds per item for the load-more fade-in.
  //                              Default 0.5.
  //   data-fade-stagger="0.06" — seconds between successive items in the
  //                              fade-in cascade. Default 0.06.
  //   data-fade-y="20"         — px of upward translation each item travels
  //                              during the fade-in. Set to 0 for a pure
  //                              opacity fade. Default 20.
  //   data-fade-disable        — presence opts the wrapper out of fade-in;
  //                              items snap in as before. Useful if the list
  //                              sits inside a parent transform / overflow
  //                              clip that the animation interacts badly with.
  //
  // Child elements (all optional unless noted):
  //   [data-list-item]         — each filterable / paginated item (required).
  //   [data-list-item data-category="a,b"]
  //                            — comma-separated categories the item belongs
  //                              to, used for filtering. Bind in Webflow to
  //                              a CMS category field.
  //   [data-filter="<cat>"]    — filter button. Use data-filter="all" for
  //                              a reset / show-all button.
  //   [data-load-more]         — button that reveals the next N items.
  //   [data-count-visible]     — text content is kept in sync with the
  //                              number of currently-visible items.
  //   [data-count-total]       — text content is kept in sync with the
  //                              total number of items matching the current
  //                              filter.
  //   [data-count-format="({n})"]
  //                            — optional, on either counter element. A
  //                              template where {n} is replaced with the
  //                              number. Use it to wrap the count, e.g.
  //                              "({n})" → "(12)", "{n} stories" → "12 stories".
  //                              Omit for a plain number.
  //
  // Behaviour:
  //   - Filter buttons get aria-pressed + an .is-active class for styling.
  //   - Hidden items get `hidden` + inline display:none, which beats any
  //     Webflow display rule without needing extra CSS.
  //   - Changing filter resets visibleCount to the initial value.
  //   - When all matching items are shown, the load-more button is hidden
  //     and removed from the tab order.
  //   - After load-more, newly-revealed items fade in via GSAP with a small
  //     upward translation, staggered so the reveal cascades rather than
  //     popping all at once. The first new item's first focusable child
  //     (link / button) is focused, so keyboard users land where they
  //     expect. If the item has no focusable child, the item itself is
  //     focused via a programmatic tabindex. The animation skips entirely
  //     under prefers-reduced-motion or when data-fade-disable is present.
  //   - Filter changes and initial render do NOT fade — only load-more.
  //     Filter changes show the new slice immediately; on initial render
  //     the items are already in place from Webflow, so fading them in
  //     would feel like a load shimmer rather than a deliberate reveal.
  //   - Event delegation is used for filter clicks — filter buttons added
  //     at runtime (e.g. via CMS) work without re-binding.
  //   - Any missing control (no filter buttons, no counters, no load-more)
  //     is handled silently.
  function initCollectionLists() {
    document.querySelectorAll('[data-list]').forEach(wrapper => {
      if (wrapper.dataset.initDone) return;
      // Skip blank data-list values — those are containers that carry the
      // attribute structurally but aren't meant to be list controllers.
      if (wrapper.getAttribute('data-list') === '') return;
      wrapper.dataset.initDone = "1";

      const items = Array.from(wrapper.querySelectorAll('[data-list-item]'));
      if (!items.length) return;

      const loadBtn      = wrapper.querySelector('[data-load-more]');
      const countVisible = wrapper.querySelector('[data-count-visible],[data-count-format]');
      const countTotal   = wrapper.querySelector('[data-count-total]');
      const filterBtns   = Array.from(wrapper.querySelectorAll('[data-filter]'));

      // Per-breakpoint counts. The mobile attributes are opt-in — when
      // they're absent we fall through to the desktop values, so existing
      // markup keeps working unchanged. The breakpoint is read at init
      // and not re-evaluated on resize, because flipping the cap mid-
      // session would silently re-hide items the user could already see.
      // Default initialCount is Infinity — no pagination unless explicitly
      // opted in via data-initial-count. Default loadCount is 6.
      const mobileBreakpoint = numOr(wrapper.dataset.mobileBreakpoint, 767);
      const isMobile         = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`).matches;
      const initialDesktop   = numOr(wrapper.dataset.initialCount, Infinity);
      const initialMobile    = numOr(wrapper.dataset.initialCountMobile, initialDesktop);
      const loadDesktop      = numOr(wrapper.dataset.loadCount, 6);
      const loadMobile       = numOr(wrapper.dataset.loadCountMobile, loadDesktop);
      const initialCount     = isMobile ? initialMobile : initialDesktop;
      const loadCount        = isMobile ? loadMobile    : loadDesktop;

      // Fade-in config — drives the load-more reveal animation. Read once
      // at init so a single fade tweak doesn't have to be repeated in JS.
      const fadeDisabled = wrapper.hasAttribute('data-fade-disable') || prefersReduced;
      const fadeDuration = numOr(wrapper.dataset.fadeDuration, 0.5);
      const fadeStagger  = numOr(wrapper.dataset.fadeStagger, 0.06);
      const fadeY        = numOr(wrapper.dataset.fadeY, 20);

      let currentFilter = 'all';
      let visibleCount  = initialCount;

      const setCount = (el, n) => {
        const fmt = el.dataset.countFormat;
        el.textContent = fmt ? fmt.replace('{n}', n) : String(n);
      };

      const matchesFilter = item => {
        if (currentFilter === 'all') return true;
        const cats = (item.dataset.category || '').split(',').map(s => s.trim());
        return cats.includes(currentFilter);
      };
      const getMatching = () =>
        currentFilter === 'all' ? items : items.filter(matchesFilter);

      function render() {
        const matching = getMatching();
        const shown    = matching.slice(0, visibleCount);

        // Hide everything first, then reveal the slice we want. Inline
        // display lets us beat Webflow's cascade without adding CSS.
        items.forEach(item => {
          item.hidden = true;
          item.style.display = 'none';
          item.setAttribute('aria-hidden', 'true');
        });
        shown.forEach(item => {
          item.hidden = false;
          item.style.display = '';
          item.setAttribute('aria-hidden', 'false');
        });

        if (countVisible) setCount(countVisible, shown.length);
        if (countTotal)   setCount(countTotal,   matching.length);

        if (loadBtn) {
          const allShown = shown.length >= matching.length;
          loadBtn.hidden = allShown;
          loadBtn.style.display = allShown ? 'none' : '';
          if (allShown) loadBtn.setAttribute('tabindex', '-1');
          else          loadBtn.removeAttribute('tabindex');
        }

        filterBtns.forEach(btn => {
          const isActive = btn.dataset.filter === currentFilter;
          btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
          btn.classList.toggle('is-active', isActive);
        });
      }

      // Delegated filter click — handles buttons added at runtime too.
      if (filterBtns.length) {
        wrapper.addEventListener('click', e => {
          const btn = e.target.closest('[data-filter]');
          if (!btn || !wrapper.contains(btn)) return;
          e.preventDefault();
          const next = btn.dataset.filter || 'all';
          if (next === currentFilter) return;
          currentFilter = next;
          visibleCount  = initialCount; // reset pagination on filter change
          render();
          // Document height changes when items are hidden / shown by the
          // filter, so anything anchored to scroll position below this list
          // (footer unveil, mid-page parallax) is now measuring against a
          // stale layout. Refresh once after the swap.
          ScrollTrigger.refresh();
        });
      }

      // Load-more — reveals the next slice, fades the newly-shown items in
      // with a small upward translation, and focuses the first new item
      // (or its first focusable child) for keyboard users.
      //
      // The matching slice is captured BEFORE render() because render()
      // doesn't mutate the matching array — but conceptually we want to
      // animate exactly the items that just transitioned from hidden →
      // visible, so we slice from the indices that were newly enabled.
      if (loadBtn) {
        loadBtn.addEventListener('click', e => {
          e.preventDefault();
          const prevCount = visibleCount;
          const matching  = getMatching();
          visibleCount    = Math.min(visibleCount + loadCount, matching.length);
          render();

          // Newly-revealed items just made the page taller, which moves
          // the footer (and any other below-the-fold trigger) down. Refresh
          // ScrollTrigger so the footer unveil and mid-page parallax pick
          // up the new geometry — otherwise they'd be measuring against the
          // pre-click document height and look "broken" until the next
          // resize event happens to fire a refresh of its own.
          ScrollTrigger.refresh();

          const newItems = matching.slice(prevCount, visibleCount);
          if (newItems.length && !fadeDisabled) {
            // clearProps releases the inline transform/opacity once the
            // animation finishes, so Webflow's own styles (or any IX2
            // interactions on the item) take over again afterwards.
            gsap.fromTo(newItems,
              { opacity: 0, y: fadeY },
              { opacity: 1, y: 0,
                duration: fadeDuration,
                stagger: fadeStagger,
                ease: 'power2.out',
                clearProps: 'transform,opacity' }
            );
          }

          const firstNew = newItems[0];
          if (firstNew) {
            const focusable = firstNew.querySelector('a, button, [tabindex]') || firstNew;
            if (focusable === firstNew && !firstNew.hasAttribute('tabindex')) {
              firstNew.setAttribute('tabindex', '-1');
            }
            focusable.focus({ preventScroll: true });
          }
        });
      }

      render();
    });
  }

  // ── Dynamic CMS lists ─────────────────────────────────────────────────────
  // Handles [data-list="dynamic"] wrappers — fetches paginated Webflow pages
  // and appends items server-side instead of hiding/showing pre-loaded DOM items.
  // initCollectionLists skips these because initDone is set immediately.
  //
  // Webflow setup (do once per list in the Designer):
  //   1. Enable native Pagination on the Collection List; set "Items per page"
  //      to however many you want per load-more click (e.g. 6).
  //   2. Set the wrapper's data-list value to "dynamic".
  //   3. Keep [data-list-item], [data-load-more], [data-count-visible] as-is.
  //   Webflow's pagination UI is auto-hidden — no need to touch it.
  //
  // Wrapper attributes (same as initCollectionLists):
  //   data-list="dynamic"          required — opts into dynamic mode.
  //   data-load-count="6"          items per load-more (desktop). Default: 6.
  //   data-load-count-mobile="3"   mobile override. If less than server page
  //                                size, surplus items are buffered so the next
  //                                tap drains the buffer before fetching again.
  //   data-mobile-breakpoint="767" px threshold for mobile. Default: 767.
  //   data-fade-duration="0.5"     seconds per item for fade-in.
  //   data-fade-stagger="0.06"     seconds between items in the cascade.
  //   data-fade-y="20"             px upward travel during fade-in (0 = pure fade).
  //   data-fade-disable            disables fade entirely.
  function initDynamicLists() {
    document.querySelectorAll('[data-list="dynamic"]').forEach(wrapper => {
      try { initDynamicList(wrapper); }
      catch (err) { console.error('[site] dynamic list failed:', wrapper, err); }
    });
  }

  function initDynamicList(wrapper) {
    if (wrapper.dataset.initDone) return;
    wrapper.dataset.initDone = "1"; // block initCollectionLists from also claiming this

    // Load-more button may be a sibling of the wrapper (Webflow places it
    // outside the Collection List Wrapper element), so search parent too.
    const loadBtn      = wrapper.querySelector("[data-load-more]")
                      || wrapper.parentElement?.querySelector("[data-load-more]");
    // Accept [data-count-visible] OR [data-count-format] — either attribute
    // marks the counter element. This lets designers set only the format
    // template without needing a second attribute on the same element.
    const countVisible = wrapper.querySelector("[data-count-visible],[data-count-format]")
                      || wrapper.parentElement?.querySelector("[data-count-visible],[data-count-format]");

    const firstItem = wrapper.querySelector("[data-list-item]");
    if (!firstItem) return;
    const itemContainer = firstItem.parentElement;

    const mobileBreakpoint = numOr(wrapper.dataset.mobileBreakpoint, 767);
    const isMobile         = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`).matches;
    const loadDesktop      = numOr(wrapper.dataset.loadCount, 6);
    const loadMobile       = numOr(wrapper.dataset.loadCountMobile, loadDesktop);
    const loadCount        = isMobile ? loadMobile : loadDesktop;

    const fadeDisabled = wrapper.hasAttribute("data-fade-disable") || prefersReduced;
    const fadeDuration = numOr(wrapper.dataset.fadeDuration, 0.5);
    const fadeStagger  = numOr(wrapper.dataset.fadeStagger, 0.06);
    const fadeY        = numOr(wrapper.dataset.fadeY, 20);

    // Try Webflow's rendered pagination link first. If it's absent (e.g.
    // the Pagination component wasn't added in the Designer) fall back to
    // constructing the ?offset= URL ourselves — Webflow's CMS always
    // accepts ?offset=N on any paginated collection page.
    const paginationEl    = wrapper.querySelector(".w-pagination-wrapper")
                         || document.querySelector(".w-pagination-wrapper");
    const initialNextLink = paginationEl?.querySelector(".w-pagination-next");

    let visibleCount      = wrapper.querySelectorAll("[data-list-item]").length;
    // serverOffset tracks how many items have been fetched from the server
    // (may differ from visibleCount when using the mobile buffer).
    let serverOffset      = visibleCount;

    let useOffsetFallback = false;
    let nextPageUrl       = initialNextLink?.href || null;
    // totalCount: full collection size across all pages. Null until the
    // background prefetch resolves. updateCounters() waits for this value
    // so the counter always shows the real total, not just what's visible.
    // Declared here (before updateCounters() is called) to avoid TDZ errors.
    let totalCount        = null;

    if (!nextPageUrl && visibleCount > 0) {
      // No Webflow pagination link — construct ?offset= URL and attempt a
      // fetch. If the response contains no items we hide the button then.
      nextPageUrl       = `${window.location.pathname}?offset=${visibleCount}`;
      useOffsetFallback = true;
    }

    // Hide Webflow's native prev/next links — we handle navigation ourselves.
    // Hide only the anchor links, NOT the wrapper, because the wrapper may
    // contain other elements (e.g. [data-count-visible]) that must stay visible.
    if (paginationEl) {
      const prevLink = paginationEl.querySelector(".w-pagination-previous");
      const nextLink = paginationEl.querySelector(".w-pagination-next");
      if (prevLink) prevLink.style.display = "none";
      if (nextLink) nextLink.style.display = "none";
    }

    updateCounters();

    if (!nextPageUrl || !loadBtn) { hideLoadMore(); return; }

    // Show the button — it may start hidden in the Designer.
    loadBtn.hidden = false;
    loadBtn.style.display = "";
    loadBtn.removeAttribute("tabindex");

    let isLoading = false;
    // Buffer for when mobile load-count < server page size. Surplus items
    // from a fetch are held here and shown on the next click without a
    // new network request.
    let heldItems = [];

    loadBtn.addEventListener("click", async (e) => {
      e.preventDefault();
      if (isLoading) return;

      // Drain buffer first — no fetch needed.
      if (heldItems.length > 0) {
        const batch = heldItems.splice(0, loadCount);
        appendAndAnimate(batch);
        if (heldItems.length === 0 && !nextPageUrl) hideLoadMore();
        return;
      }

      if (!nextPageUrl) { hideLoadMore(); return; }

      isLoading = true;
      loadBtn.setAttribute("aria-busy", "true");
      loadBtn.setAttribute("data-loading", "true");

      try {
        const res  = await fetch(nextPageUrl, { credentials: "same-origin" });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const html = await res.text();
        const doc  = new DOMParser().parseFromString(html, "text/html");

        // Scope to [data-list="dynamic"] on the fetched page so we don't
        // accidentally grab items from unrelated lists.
        const fetchedWrapper = doc.querySelector('[data-list="dynamic"]');
        const rawItems = Array.from(
          (fetchedWrapper || doc).querySelectorAll("[data-list-item]")
        );

        if (!rawItems.length) { hideLoadMore(); return; }

        // Deduplicate — Webflow can return the same page when ?offset exceeds
        // the collection size (it wraps rather than returning empty). Build a
        // set of hrefs already in the DOM and filter fetched items against it.
        const existingHrefs = new Set(
          Array.from(itemContainer.querySelectorAll('a[href]')).map(a => a.href)
        );
        const uniqueItems = rawItems.filter(item => {
          const link = item.querySelector('a[href]');
          return !link || !existingHrefs.has(link.href);
        });

        if (!uniqueItems.length) { hideLoadMore(); return; }

        if (useOffsetFallback) {
          // Advance the offset by the number of items the server returned
          // (not just unique ones) so the next ?offset skips the right amount.
          serverOffset += rawItems.length;
          nextPageUrl = rawItems.length >= loadCount
            ? `${window.location.pathname}?offset=${serverOffset}`
            : null;
        } else {
          nextPageUrl = doc.querySelector(".w-pagination-next")?.href || null;
        }

        // importNode deep-clones into the current document so scripts,
        // event listeners and Webflow attributes all transfer correctly.
        const cloned = uniqueItems.map(item => document.importNode(item, true));
        const toShow = cloned.splice(0, loadCount);
        heldItems    = cloned;

        appendAndAnimate(toShow);
        if (!nextPageUrl && heldItems.length === 0) hideLoadMore();

      } catch (err) {
        console.error("[site] dynamic list fetch failed:", err);
      } finally {
        isLoading = false;
        loadBtn.removeAttribute("aria-busy");
        loadBtn.removeAttribute("data-loading");
      }
    });

    function appendAndAnimate(items, instant = false) {
      items.forEach(item => itemContainer.appendChild(item));
      visibleCount += items.length;
      updateCounters();
      // Persist loaded count in URL hash so back-navigation from an article
      // page returns the user to the same number of stories.
      history.replaceState(null, '', '#loaded=' + visibleCount);

      if (!instant && !fadeDisabled) {
        gsap.fromTo(items,
          { opacity: 0, y: fadeY },
          { opacity: 1, y: 0, duration: fadeDuration, stagger: fadeStagger,
            ease: "power2.out", clearProps: "transform,opacity" }
        );
      }

      if (!instant) {
        // Move focus to first new item for keyboard users.
        const first = items[0];
        if (first) {
          const focusable = first.querySelector("a, button, [tabindex]") || first;
          if (focusable === first && !first.hasAttribute("tabindex"))
            first.setAttribute("tabindex", "-1");
          focusable.focus({ preventScroll: true });
        }
      }

      ScrollTrigger.refresh();
    }

    function hideLoadMore() {
      if (!loadBtn) return;
      loadBtn.hidden = true;
      loadBtn.style.display = "none";
    }

    function updateCounters() {
      if (!countVisible) return;
      // Show the full collection total (from background prefetch), not just
      // the number of items currently loaded in the DOM. Hold off until
      // totalCount is known so the counter doesn't flash an incorrect number.
      if (totalCount === null) return;
      const fmt = countVisible.dataset.countFormat;
      countVisible.textContent = fmt
        ? fmt.replace("{n}", totalCount)
        : String(totalCount);
    }

    // ── Hash restore ──────────────────────────────────────────────────────────
    // After load-more, the URL becomes /stories#loaded=9. When the user clicks
    // into an article and presses Back, the browser restores that URL and we
    // silently fetch-and-append items until visibleCount matches the hash value.
    // `instant` flag suppresses animation and focus-shift for the restore pass.
    (async function restoreFromHash() {
      const m = window.location.hash.match(/loaded=(\d+)/);
      if (!m) return;
      const target = parseInt(m[1], 10);
      if (target <= visibleCount) return;

      isLoading = true;
      if (loadBtn) {
        loadBtn.setAttribute("aria-busy", "true");
        loadBtn.setAttribute("data-loading", "true");
      }

      while (visibleCount < target) {
        // Drain any held buffer before fetching again.
        if (heldItems.length > 0) {
          const need  = target - visibleCount;
          const batch = heldItems.splice(0, need);
          appendAndAnimate(batch, true);
          if (heldItems.length === 0 && !nextPageUrl) { hideLoadMore(); break; }
          continue;
        }
        if (!nextPageUrl) break;

        try {
          const res = await fetch(nextPageUrl, { credentials: "same-origin" });
          if (!res.ok) break;
          const html = await res.text();
          const doc  = new DOMParser().parseFromString(html, "text/html");

          const fetchedWrapper = doc.querySelector('[data-list="dynamic"]');
          const rawItems = Array.from(
            (fetchedWrapper || doc).querySelectorAll("[data-list-item]")
          );
          if (!rawItems.length) { hideLoadMore(); break; }

          const existingHrefs = new Set(
            Array.from(itemContainer.querySelectorAll('a[href]')).map(a => a.href)
          );
          const uniqueItems = rawItems.filter(item => {
            const link = item.querySelector('a[href]');
            return !link || !existingHrefs.has(link.href);
          });
          if (!uniqueItems.length) { hideLoadMore(); break; }

          if (useOffsetFallback) {
            serverOffset += rawItems.length;
            nextPageUrl = rawItems.length >= loadCount
              ? `${window.location.pathname}?offset=${serverOffset}`
              : null;
          } else {
            nextPageUrl = doc.querySelector(".w-pagination-next")?.href || null;
          }

          const cloned = uniqueItems.map(item => document.importNode(item, true));
          const need   = target - visibleCount;
          const toShow = cloned.splice(0, need);
          heldItems    = cloned;

          appendAndAnimate(toShow, true);
          if (!nextPageUrl && heldItems.length === 0) { hideLoadMore(); break; }

        } catch (err) {
          console.error("[site] dynamic list hash-restore failed:", err);
          break;
        }
      }

      isLoading = false;
      if (loadBtn) {
        loadBtn.removeAttribute("aria-busy");
        loadBtn.removeAttribute("data-loading");
      }
    })();

    // ── Total count prefetch ──────────────────────────────────────────────────
    // Fetches all remaining pages in the background (read-only — does NOT
    // modify shared state like nextPageUrl or heldItems) to discover the full
    // collection size, then calls updateCounters() once with the real total.
    (async function prefetchTotal() {
      const seen = new Set(
        Array.from(itemContainer.querySelectorAll('a[href]')).map(a => a.href)
      );
      let count  = visibleCount;
      let url    = nextPageUrl;
      let offset = serverOffset; // local — don't touch the shared variable

      while (url) {
        try {
          const res = await fetch(url, { credentials: "same-origin" });
          if (!res.ok) break;
          const html = await res.text();
          const doc  = new DOMParser().parseFromString(html, "text/html");

          const fetchedWrapper = doc.querySelector('[data-list="dynamic"]');
          const pageItems = Array.from(
            (fetchedWrapper || doc).querySelectorAll("[data-list-item]")
          );
          if (!pageItems.length) break;

          const uniqueItems = pageItems.filter(item => {
            const link = item.querySelector('a[href]');
            if (link && seen.has(link.href)) return false;
            if (link) seen.add(link.href);
            return true;
          });
          if (!uniqueItems.length) break;

          count += uniqueItems.length;

          if (useOffsetFallback) {
            offset += pageItems.length;
            url = pageItems.length >= loadCount
              ? `${window.location.pathname}?offset=${offset}`
              : null;
          } else {
            url = doc.querySelector(".w-pagination-next")?.href || null;
          }
        } catch (err) {
          console.warn("[site] total count prefetch failed:", err);
          break;
        }
      }

      totalCount = count;
      updateCounters();
    })();
  }

  // ── Parallax ───────────────────────────────────────────────────────────────
  // Controlled entirely by data-hero="top|middle|middle-top|lrg".
  //
  //  data-hero="top"         — Full-bleed hero at the top of the page.
  //                            Image stays anchored as content scrolls over
  //                            it (recedes underneath). scrub: true (no
  //                            smoothing) prevents any catch-up bounce on
  //                            page load.
  //
  //  data-hero="middle"      — Subtle parallax for mid-page sections.
  //                            ±8% travel. Triggers as section enters view.
  //
  //  data-hero="middle-top"  — NEW in v3.0.0, adjusted in v3.0.1. Starts
  //                            flush at yPercent 0 (no gap on page load —
  //                            fixes the black-bar-at-bottom issue) and
  //                            drifts to +8% as the section scrolls past
  //                            the top of the viewport. Trigger geometry
  //                            matches the "top" variant. Magnitude matches
  //                            the max endpoint of "middle".
  //
  //  data-hero="lrg"         — More pronounced parallax for larger feature
  //                            sections. ±20% travel, amplified depth.
  //
  // All effects are desktop-only (≥768px). Mobile resets yPercent to 0 and
  // does not touch autoAlpha so CSS fade values are preserved.
  //
  // Perf notes:
  //  - force3D is set per-tween (see below) instead of via will-change on
  //    the element. force3D promotes to a GPU layer only while the tween is
  //    running, whereas a permanent will-change reserves a layer for every
  //    parallax item for the entire session and costs memory without any
  //    added smoothness.
  //  - scrub uses a small numeric smoothing (0.3) on middle / middle-top /
  //    lrg. This lets Firefox and Safari interpolate across skipped frames
  //    rather than snapping to the exact scroll progress every tick — it's
  //    the single biggest fix for the in-view parallax stutter. The "top"
  //    variant keeps scrub: true because its no-bounce-on-load behaviour
  //    depends on zero smoothing.
  //  - invalidateOnRefresh keeps from-values correct after resize.
  //  - prefers-reduced-motion short-circuits the entire function.
  function initParallax() {
    const items = document.querySelectorAll('[data-hero]');
    if (!items.length || prefersReduced) return;

    // Pre-position so first paint matches the scrub's at-scroll-0 value,
    // preventing a layout jump on load. middle-top pre-sets to 0 — on page
    // load (scroll 0, scrub progress 0) its from-value is 0, so there is no
    // gap / black-bar at the bottom of the element. It only starts to
    // offset once the user begins scrolling.
    if (window.matchMedia("(min-width: 768px)").matches) {
      items.forEach(el => {
        if      (el.dataset.hero === 'top')        gsap.set(el, { yPercent: 0 });
        else if (el.dataset.hero === 'middle')     gsap.set(el, { yPercent: -8 });
        else if (el.dataset.hero === 'middle-top') gsap.set(el, { yPercent: 0 });
        else if (el.dataset.hero === 'lrg')        gsap.set(el, { yPercent: -20 });
      });
    }

    mm.add("(min-width: 768px)", () => {
      items.forEach(el => {
        const type = el.dataset.hero;

        if (type === 'top') {
          // Image recedes behind content as the hero section scrolls away.
          // Starts at 0 (page load = scroll 0), drifts to +30% as section
          // exits. scrub: true = no smoothing lag → zero bounce on load.
          gsap.fromTo(el,
            { yPercent: 0 },
            { yPercent: 30, ease: 'none', force3D: true,
              scrollTrigger: {
                trigger: el.parentElement,
                start: 'top top',
                end:   'bottom top',
                scrub: true,
                invalidateOnRefresh: true,
              }
            }
          );

          // Fade runs on its own independent ScrollTrigger so timing can
          // differ. Alpha start is read from computed CSS so it respects
          // whatever opacity is set in Webflow (override via
          // data-hero-alpha-from).
          const aFrom = numOr(el.dataset.heroAlphaFrom, parseFloat(getComputedStyle(el).opacity ?? 1));
          gsap.fromTo(el,
            { autoAlpha: aFrom },
            { autoAlpha: numOr(el.dataset.heroAlphaTo, 0.4), ease: 'none',
              scrollTrigger: {
                trigger: el.parentElement,
                start: el.dataset.heroFadeStart || 'top top',
                end:   el.dataset.heroFadeEnd   || 'bottom top',
                scrub: true,
                invalidateOnRefresh: true,
              }
            }
          );
        }

        if (type === 'middle') {
          // Subtle mid-page parallax — light depth, won't distract.
          gsap.fromTo(el,
            { yPercent: -8 },
            { yPercent: 8, ease: 'none', force3D: true,
              scrollTrigger: {
                trigger: el.parentElement,
                start: 'top bottom',
                end:   'bottom top',
                scrub: 0.3,
                invalidateOnRefresh: true,
              }
            }
          );
        }

        if (type === 'middle-top') {
          // Starts flush (yPercent 0) at page top, drifts to +8% as the
          // section scrolls past top-of-viewport. Same trigger geometry as
          // "top" but with middle's endpoint magnitude. Flip the sign of
          // the to-value if you want the image to drift upward instead.
          gsap.fromTo(el,
            { yPercent: 0 },
            { yPercent: 8, ease: 'none', force3D: true,
              scrollTrigger: {
                trigger: el.parentElement,
                start: 'top top',
                end:   'bottom top',
                scrub: true,
                invalidateOnRefresh: true,
              }
            }
          );
        }

        if (type === 'lrg') {
          // Pronounced parallax — larger travel for feature sections.
          gsap.fromTo(el,
            { yPercent: -20 },
            { yPercent: 20, ease: 'none', force3D: true,
              scrollTrigger: {
                trigger: el.parentElement,
                start: 'top bottom',
                end:   'bottom top',
                scrub: 0.3,
                invalidateOnRefresh: true,
              }
            }
          );
        }
      });
    });

    mm.add("(max-width: 767px)", () => {
      // No parallax on mobile — reset position only. Do NOT touch autoAlpha:
      // GSAP's matchMedia revert restores the element's original CSS opacity
      // automatically when the desktop context tears down, so the fade is
      // never stripped on mobile.
      items.forEach(el => gsap.set(el, { yPercent: 0 }));
    });
  }

  // ── Footer unveil ──────────────────────────────────────────────────────────
  function initFooterUnveil() {
    const footer = document.querySelector('[data-footer-unveil]');
    if (!footer) return;
    if (prefersReduced) { gsap.set(footer, { yPercent: 0 }); return; }
    mm.add("(min-width: 768px)", () => {
      gsap.fromTo(footer, { yPercent: -40 }, { yPercent: 0, ease: 'none', force3D: true,
        scrollTrigger: { trigger: footer.parentElement, start: 'top bottom', end: 'bottom bottom', scrub: 0.3, invalidateOnRefresh: true } });
    });
    mm.add("(max-width: 767px)", () => gsap.set(footer, { yPercent: 0 }));
  }
})();

// ── Cart count (standalone) ──────────────────────────────────────────────────
//
// Lives OUTSIDE the main IIFE on purpose. The main IIFE hard-fails if GSAP
// isn't present, and Webflow's stock Ecommerce templates (the cart page,
// checkout, and order-confirmation) often don't include GSAP — so anything
// inside that IIFE silently dies on those pages. The cart counter has to run
// there above all, so it gets its own scope and its own readiness logic.
//
// Behaviour: Webflow's native cart-link counter shows the number of distinct
// LINE ITEMS rather than the total number of units in the basket — so two of
// the same product reads as "1". This rewires the counter to sum the quantity
// field across every line item, and re-renders whenever the user nudges a
// stepper or types a new value.
//
// Markup it targets (all stock Webflow Ecommerce classes — nothing custom
// needs to be added in the Designer):
//   .w-commerce-commercecartopenlinkcount      — the text node we update.
//   .w-commerce-commercecartitem               — one per row in the cart.
//   input.w-commerce-commercecartquantity      — the row's quantity input.
//   .w-commerce-commercecartcontainerwrapper   — scoped observer target.
//
// The MutationObserver is debounced to 30ms so a held-down stepper doesn't
// fire one render per keystroke. We also push a delayed render onto
// Webflow.ready() because the Ecommerce module mounts the cart panel a tick
// AFTER DOMContentLoaded — without that second pass the count is wrong the
// first time the user opens the cart.
//
// Strategy (v4.1.0+): the primary target is a custom [data-cart-count]
// element that Webflow never touches, so there's no flicker from Webflow
// overwriting our value. Add a plain Text Block next to your cart icon and
// give it the custom attribute `data-cart-count`.
//
// v4.2.0 also writes a fallback to Webflow's native counter element
// (.w-commerce-commercecartopenlinkcount) so the count stays visible even
// if the custom element hasn't been added yet. The native element is updated
// with the true unit total (not Webflow's line-item count) and hidden when
// empty — matching the old v3.x behaviour.
//
// Attributes you can set on [data-cart-count]:
//   data-cart-count                  marks the element (required).
//   data-cart-count-format="({n})"   optional template — {n} is replaced
//                                    with the number. e.g. "({n})" → "(7)",
//                                    "{n} items" → "7 items", omit for the
//                                    plain number "7".
//   data-cart-count-hide-empty       presence hides the element when the
//                                    cart total is 0. Omit to always show.
(function () {
  const COUNT_SELECTOR = "[data-cart-count]";
  const ITEM_SELECTOR  = ".w-commerce-commercecartitem";
  const QTY_SELECTOR   = "input.w-commerce-commercecartquantity";
  const CART_CONTAINER = ".w-commerce-commercecartcontainerwrapper";

  function totalQuantity() {
    let total = 0;
    document.querySelectorAll(ITEM_SELECTOR).forEach(item => {
      const input = item.querySelector(QTY_SELECTOR);
      if (!input) return;
      const v = parseInt(input.value, 10);
      if (!Number.isNaN(v)) total += v;
    });
    return total;
  }

  function render() {
    const total = totalQuantity();

    // Primary: custom [data-cart-count] elements.
    document.querySelectorAll(COUNT_SELECTOR).forEach(el => {
      const fmt   = el.dataset.cartCountFormat;
      const text  = fmt ? fmt.replace('{n}', total) : String(total);
      // Skip the write if nothing changed — keeps the DOM clean and
      // avoids any layout work when the cart is just being re-observed.
      if (el.textContent !== text) el.textContent = text;
      // Optional hide-when-empty behaviour — opt-in via attribute.
      if (el.hasAttribute('data-cart-count-hide-empty')) {
        el.style.display = total > 0 ? '' : 'none';
      }
    });

    // Fallback: also update Webflow's native counter so the count still
    // shows if no custom [data-cart-count] element has been added yet.
    document.querySelectorAll('.w-commerce-commercecartopenlinkcount').forEach(el => {
      const text = total > 0 ? `(${total})` : '';
      if (el.textContent !== text) el.textContent = text;
      el.style.display = total > 0 ? '' : 'none';
    });
  }

  // Debounced MO — coalesces the burst of DOM writes Webflow does when a
  // line item is added / removed so we only render once per change.
  let moTimer;
  const mo = new MutationObserver(() => {
    clearTimeout(moTimer);
    moTimer = setTimeout(render, 30);
  });

  function start() {
    const target = document.querySelector(CART_CONTAINER) || document.body;
    mo.observe(target, { childList: true, subtree: true, characterData: true });

    // Direct listeners for the inputs — catches the case where the user
    // types a new quantity instead of using the steppers.
    document.addEventListener("input",  e => { if (e.target.matches(QTY_SELECTOR)) render(); });
    document.addEventListener("change", e => { if (e.target.matches(QTY_SELECTOR)) render(); });

    render();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", start);
  } else {
    start();
  }

  // Second-pass kick: Webflow's Ecommerce module mounts the cart panel a
  // tick after DOMContentLoaded, so the first render can run against an
  // empty container. The 300ms tail covers slower connections.
  window.Webflow = window.Webflow || [];
  window.Webflow.push(() => setTimeout(render, 300));
})();