From 89ce3cdcac2c3947d4c3a05f9ae14273a7961420 Mon Sep 17 00:00:00 2001
From: Michael Victory <opcomm@gmail.com>
Date: Mon, 22 Jun 2026 19:58:52 -0700
Subject: [PATCH] Hero: full-bleed ambient loop behind nav + left-edge blend
 (match reference)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  2 +-
 style.css  | 25 ++++++++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index f6c5e5f..72075e3 100644
--- a/index.html
+++ b/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">
diff --git a/style.css b/style.css
index b1b4d78..194cb79 100644
--- a/style.css
+++ b/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-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; opacity: 0; transition: opacity .8s ease; }
+/* Hero — text left; the ambient loop bleeds off the right edge and up behind the
+   frosted nav, its left edge dissolved into the paper bg with a gradient mask, plus a
+   subtle warm overlay so the loop reads as cream (matched from the reference build). */
+.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) {
-  .hero-wrap { grid-template-columns: 1fr; gap: 2.2rem; }
-  .hero-media { aspect-ratio: 16 / 10; max-height: 320px; }
+@media (max-width: 760px) {
+  .hero { min-height: 0; padding: 132px 0 64px; display: block; }
+  .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; }