Hero loop: add H.264 mp4 fallback source for old Safari/iOS

Transcoded the VP9 webm to H.264 mp4 (~220KB) and add it as a second <source>
after the webm — modern browsers take the smaller VP9, pre-2021 Safari/iOS fall
back to mp4. JS appends both sources before load().

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

index.html

@@ -91,7 +91,7 @@
     </div>
     </div>
     <div class="hero-media" aria-hidden="true">
-      <video class="hero-video" muted loop playsinline preload="none" data-src="assets/media/hero-loop.webm"></video>
+      <video class="hero-video" muted loop playsinline preload="none" data-src="assets/media/hero-loop.webm" data-src-mp4="assets/media/hero-loop.mp4"></video>
     </div>
   </section>
 
@@ -374,9 +374,12 @@ Cal("init", { origin: "https://cal.shopwisdom.ca" });
   var conn = navigator.connection || {};
   if (conn.saveData === true) return;
   if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
-  var src = hv.getAttribute('data-src'); if (!src) return;
-  var s = document.createElement('source'); s.src = src; s.type = 'video/webm';
-  hv.appendChild(s); hv.load();
+  var webm = hv.getAttribute('data-src'), mp4 = hv.getAttribute('data-src-mp4');
+  if (!webm && !mp4) return;
+  function addSrc(u, t) { if (!u) return; var s = document.createElement('source'); s.src = u; s.type = t; hv.appendChild(s); }
+  addSrc(webm, 'video/webm');   // modern browsers pick this (smaller VP9)
+  addSrc(mp4, 'video/mp4');     // old Safari / iOS fall back to H.264
+  hv.load();
   hv.addEventListener('playing', function () { hv.classList.add('is-playing'); }, { once: true });
   var p = hv.play(); if (p && p.catch) p.catch(function () {});
 })();