From 71219bde63c784cd3710b9906bd2f7efb572e449 Mon Sep 17 00:00:00 2001
From: Michael Victory <opcomm@gmail.com>
Date: Mon, 22 Jun 2026 21:43:43 -0700
Subject: [PATCH] Hero framing: desktop no-fade + waves lifted to the headline;
 mobile pushed left

Desktop: drop the left-edge mask (the near-white clip blends into paper on its
own) and zoom/lift the loop (scale 1.7, translateY -16%) so the waves center on
the "easy part" headline instead of sitting low. Mobile: shift the rotated loop
left (left:34%) so it reads as a left-third band behind the headline + book
button. Both dialed via offline still-frame mocks (the loop won't decode in the
review browser).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 style.css | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/style.css b/style.css
index 90c38aa..1e9e4cf 100644
--- a/style.css
+++ b/style.css
@@ -137,11 +137,9 @@ a.tel { text-decoration: none; }
 .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 { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; transform: scale(1.7) translateY(-16%); transform-origin: center; }
 .hero-video.is-playing { opacity: 1; }
 @media (max-width: 760px) {
   .hero { min-height: 88vh; padding: 120px 0 56px; display: block; }
@@ -149,7 +147,7 @@ a.tel { text-decoration: none; }
      faded from the top so the headline reads over paper and the ambient shows lower. Tint ::after still applies. */
   .hero-media { left: 0; width: 100%;
     -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%); }
-  .hero-video { position: absolute; top: 50%; left: 50%; width: 100vh; height: 100vw; object-fit: cover; transform: translate(-50%, -50%) rotate(90deg); }
+  .hero-video { position: absolute; top: 50%; left: 34%; width: 100vh; height: 100vw; object-fit: cover; transform: translate(-50%, -50%) rotate(90deg); }
 }
 
 .actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }