Hero: reinstate the ambient loop as a split layout, done right

Bring back the reference's hero ambient — text left, looping WebM right — but
fixed: self-hosted (62KB, off Manus's S3), poster-first with a paper-tinted
container so it's NEVER blank, and loaded via JS only when appropriate (skipped
on Save-Data and prefers-reduced-motion; poster stays if autoplay is blocked).
No autoplay attribute = no surprise download. Poster image added next.

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

index.html

@@ -77,7 +77,7 @@
 <main id="top">
 
   <section class="hero" data-bg="light">
-    <div class="wrap"><div class="hero-col">
+    <div class="wrap hero-wrap"><div class="hero-col">
       <p class="eyebrow">The human side of change · for Canadian manufacturers</p>
       <h1>The systems are the <em>easy part.</em></h1>
       <p class="lead">Getting your people to trust the change, share what they know, and lead through it — that's what decides whether any of it sticks. That's our work.</p>
@@ -86,7 +86,11 @@
         <a class="btn link" href="#work">See how we work</a>
       </div>
       <p class="call">or call <a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="#contact">778&#8209;985&#8209;OPEN (6736)</a></p>
-    </div></div>
+    </div>
+    <div class="hero-media" aria-hidden="true">
+      <video class="hero-video" muted loop playsinline preload="none" poster="assets/media/hero-loop-poster.webp" data-src="assets/media/hero-loop.webm"></video>
+    </div>
+    </div>
   </section>
 
   <section class="band dark statement" data-bg="dark" id="problem">
@@ -359,6 +363,21 @@
 Cal("init", { origin: "https://cal.shopwisdom.ca" });
 </script>
 
+<!-- Hero ambient loop: poster-first. Loads the video only when appropriate (skipped on Save-Data / reduced-motion); poster or paper bg shows if autoplay is blocked. -->
+<script>
+(function () {
+  var hv = document.querySelector('.hero-video');
+  if (!hv) return;
+  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 p = hv.play(); if (p && p.catch) p.catch(function () {});
+})();
+</script>
+
 <div class="float-cta">
   <a class="btn" href="https://cal.shopwisdom.ca/michaelvictory/20min-opencommunications-meeting" data-cal-link="michaelvictory/20min-opencommunications-meeting" data-cal-origin="https://cal.shopwisdom.ca" data-cal-config='{"theme":"light"}'>Book a conversation</a>
 </div>

style.css

@@ -127,6 +127,15 @@ a.tel { text-decoration: none; }
 .hero h1 { margin-bottom: 0.35em; }
 .lead { font-size: 1.25rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 2.4em; }
 
+/* Hero split — text left, ambient loop right. Poster-first + paper fallback = never blank. */
+.hero-wrap { display: grid; grid-template-columns: 1.05fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
+.hero-media { position: relative; border-radius: 10px; overflow: hidden; background: var(--paper-2); aspect-ratio: 1 / 1; }
+.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
+@media (max-width: 860px) {
+  .hero-wrap { grid-template-columns: 1fr; gap: 2.2rem; }
+  .hero-media { aspect-ratio: 16 / 10; max-height: 320px; }
+}
+
 .actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
 .actions.center { justify-content: center; }
 .btn {