diff --git a/index.html b/index.html
index 8aaa73d..f6c5e5f 100644
--- a/index.html
+++ b/index.html
@@ -88,7 +88,7 @@
       <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 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>
+      <video class="hero-video" muted loop playsinline preload="none" data-src="assets/media/hero-loop.webm"></video>
     </div>
     </div>
   </section>
@@ -374,6 +374,7 @@ Cal("init", { origin: "https://cal.shopwisdom.ca" });
   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();
+  hv.addEventListener('playing', function () { hv.classList.add('is-playing'); }, { once: true });
   var p = hv.play(); if (p && p.catch) p.catch(function () {});
 })();
 </script>
diff --git a/style.css b/style.css
index 1995bf4..b1b4d78 100644
--- a/style.css
+++ b/style.css
@@ -130,7 +130,8 @@ a.tel { text-decoration: none; }
 /* 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; }
+.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .8s ease; }
+.hero-video.is-playing { opacity: 1; }
 @media (max-width: 860px) {
   .hero-wrap { grid-template-columns: 1fr; gap: 2.2rem; }
   .hero-media { aspect-ratio: 16 / 10; max-height: 320px; }