Hero: full-bleed ambient loop behind nav + left-edge blend (match reference)

Stop boxing the loop. Pull .hero-media out of the content grid to a direct child
of .hero, absolutely positioned to bleed off the right edge and up behind the
frosted nav. Dissolve its left edge into the paper with a gradient mask-image and
warm it with a subtle paper/multiply overlay so it reads as cream, not stark
white — matching how Manus meshed it in. Mobile = full-width strip with a
bottom fade.

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

index.html

@@ -87,10 +87,10 @@
       </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 class="hero-media" aria-hidden="true">
       <video class="hero-video" muted loop playsinline preload="none" data-src="assets/media/hero-loop.webm"></video>
     </div>
-    </div>
   </section>
 
   <section class="band dark statement" data-bg="dark" id="problem">

style.css

@@ -127,14 +127,25 @@ 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 — text left; the ambient loop bleeds off the right edge and up behind the
-.hero-wrap { display: grid; grid-template-columns: 1.05fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
+   frosted nav, its left edge dissolved into the paper bg with a gradient mask, plus a
-.hero-media { position: relative; border-radius: 10px; overflow: hidden; background: var(--paper-2); aspect-ratio: 1 / 1; }
+   subtle warm overlay so the loop reads as cream (matched from the reference build). */
-.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .8s ease; }
+.hero { position: relative; overflow: hidden; min-height: min(86vh, 840px); display: flex; align-items: center; padding: 96px 0 72px; }
+.hero-wrap { position: relative; z-index: 2; width: 100%; }
+.hero-col { max-width: 600px; }
+.hero-media {
+  position: absolute; top: 0; right: 0; bottom: 0; width: 56%;
+  z-index: 1; pointer-events: none; background: var(--paper);
+  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44%);
+  mask-image: linear-gradient(to right, transparent 0, #000 44%);
+}
+.hero-media::after { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: .12; mix-blend-mode: multiply; pointer-events: none; }
+.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; }
 .hero-video.is-playing { opacity: 1; }
-@media (max-width: 860px) {
+@media (max-width: 760px) {
-  .hero-wrap { grid-template-columns: 1fr; gap: 2.2rem; }
+  .hero { min-height: 0; padding: 132px 0 64px; display: block; }
-  .hero-media { aspect-ratio: 16 / 10; max-height: 320px; }
+  .hero-media { position: relative; top: auto; right: auto; bottom: auto; width: 100%; height: 230px; margin-top: 1.6rem;
+    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
 }
 
 .actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }