Hero: waves on desktop, C (dots) on mobile — viewport picks the loop

Desktop swaps to the flowing thin-line waves (they blend clean against the cream;
C's cool-gray background never did) with the Manus-style left-edge paper fade
restored. Mobile keeps the C loop Mike approved (rotated 90deg, centered, tinted).
JS chooses the source by viewport at load. Drop the unused comparison clips.

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-mp4="assets/media/hero-loop.mp4"></video>
+      <video class="hero-video" muted loop playsinline preload="none" data-src-desktop="assets/media/hero-desktop.mp4" data-src-mobile="assets/media/hero-mobile.mp4"></video>
     </div>
   </section>
 
@@ -374,11 +374,11 @@ 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 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
+  // viewport picks the loop: flowing waves on desktop, dotted-particle (C) rotated on mobile
+  var isMobile = window.matchMedia('(max-width: 760px)').matches;
+  var mp4 = hv.getAttribute(isMobile ? 'data-src-mobile' : 'data-src-desktop');
+  if (!mp4) return;
+  var s = document.createElement('source'); s.src = mp4; s.type = 'video/mp4'; hv.appendChild(s);
   hv.load();
   hv.addEventListener('playing', function () { hv.classList.add('is-playing'); }, { once: true });
   var p = hv.play(); if (p && p.catch) p.catch(function () {});