Place the below code in your header script area this delete this block.

<script>/* Zoom-out hero (row background version) */
(function () {
  var SCALE_START = 1.35; // how zoomed in the photo starts (1 = no zoom)
  var INSET_MAX = 40;     // px the frame pulls in from each edge by the end
  var RADIUS_MAX = 24;    // px of corner rounding by the end
  var DISTANCE = 0.6;     // how much scrolling the effect takes (0.6 = 60% of a screen)

  var heroes = [];
  var ticking = false;
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  function easeOut(t) {
    return 1 - Math.pow(1 - t, 3);
  }

  // Copy the row's background image onto our zoom layer.
  // Re-run on resize so tablet/mobile background images from Kadence still work.
  function readBackground(h) {
    h.row.style.backgroundImage = ''; // briefly let Kadence's own styles show through
    var cs = window.getComputedStyle(h.row);
    var bg = cs.backgroundImage;

    if (bg && bg !== 'none') {
      h.img.style.backgroundImage = bg;
      h.img.style.backgroundSize = cs.backgroundSize === 'auto' ? 'cover' : cs.backgroundSize;
      h.img.style.backgroundPosition = cs.backgroundPosition;
      h.img.style.backgroundRepeat = cs.backgroundRepeat;
    }
    h.row.style.backgroundImage = 'none'; // the row keeps its background color only
  }

  // Work out where the effect starts and ends on the page
  function measure(h) {
    readBackground(h);
    var rect = h.row.getBoundingClientRect();
    var vh = window.innerHeight;
    var docTop = rect.top + window.scrollY;
    h.start = Math.max(0, docTop - vh * 0.85); // top-of-page heroes start right away
    h.distance = vh * DISTANCE;
    h.inset = Math.min(INSET_MAX, window.innerWidth * 0.04); // smaller frame on phones
  }

  function update(h) {
    var p = Math.min(1, Math.max(0, (window.scrollY - h.start) / h.distance));
    var e = easeOut(p);
    var inset = (h.inset * e).toFixed(2);
    var radius = (RADIUS_MAX * e).toFixed(2);
    var scale = (SCALE_START - (SCALE_START - 1) * e).toFixed(4);
    var clip = 'inset(' + inset + 'px round ' + radius + 'px)';

    h.frame.style.clipPath = clip;
    if (h.overlay) h.overlay.style.clipPath = clip; // Kadence overlay follows the frame
    h.img.style.transform = 'scale(' + scale + ')';
  }

  function updateAll() {
    heroes.forEach(update);
    ticking = false;
  }

  function measureAll() {
    heroes.forEach(measure);
    updateAll();
  }

  function onScroll() {
    if (!ticking) {
      ticking = true;
      requestAnimationFrame(updateAll);
    }
  }

  function init() {
    if (reduce) return; // leave the normal row background in place

    document.querySelectorAll('.cc-zoom-hero').forEach(function (row) {
      var frame = document.createElement('div');
      frame.className = 'cc-zoom-bg';
      frame.setAttribute('aria-hidden', 'true');

      var img = document.createElement('div');
      img.className = 'cc-zoom-bg-img';
      frame.appendChild(img);
      row.insertBefore(frame, row.firstChild);

      // promote to their own GPU layers upfront (the curtain reveal lesson)
      frame.style.willChange = 'clip-path';
      img.style.willChange = 'transform';

      var overlay = null;
      for (var i = 0; i < row.children.length; i++) {
        if (row.children[i].classList.contains('kt-row-layout-overlay')) overlay = row.children[i];
      }

      heroes.push({ row: row, frame: frame, img: img, overlay: overlay });
    });
    if (!heroes.length) return;

    measureAll(); // correct state right away on load
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', measureAll);
    window.addEventListener('load', measureAll);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();</script>