SW hero: subtle binder-stack background video (Adobe Stock 35598738) at 0.45 opacity with a left paper scrim protecting the headline; muted/loop/playsinline + poster + reduced-motion + mobile dimming. ~817KB mp4. Verified locally. Staging/preview only.

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

index.html

@@ -82,6 +82,9 @@
 <main id="top">
 
   <section class="hero band light" data-bg="light">
+    <video class="hero-video" autoplay muted loop playsinline poster="assets/hero/hero-poster.jpg" aria-hidden="true">
+      <source src="assets/hero/hero.mp4" type="video/mp4" />
+    </video>
     <div class="wrap hero-wrap"><div class="hero-col">
       <p class="eyebrow">Knowledge continuity · for Canadian manufacturers</p>
       <h1>Your best people are retiring. Their know&#8209;how doesn't <em>have to.</em></h1>

style.css

@@ -134,6 +134,10 @@ a.tel { text-decoration: none; }
 .hero { background: var(--paper); position: relative; min-height: min(82vh, 760px); display: flex; align-items: center; padding: 150px 0 96px; }
 .hero-wrap { position: relative; z-index: 2; width: 100%; }
 .hero h1 { margin-bottom: 0.35em; }
+.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 1; opacity: 0.45; pointer-events: none; }
+.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--paper) 40%, rgba(247,244,239,0.5) 68%, rgba(247,244,239,0.06) 100%); }
+@media (max-width: 640px) { .hero-video { opacity: 0.22; } .hero::after { background: linear-gradient(180deg, rgba(247,244,239,0.72), rgba(247,244,239,0.42)); } }
+@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
 .lead { font-size: 1.25rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 2.4em; }
 
 .actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }