Hero: waves on desktop, C (dots) on mobile — viewport picks the loop

Desktop swaps to the flowing thin-line waves (they blend clean against the cream;
C's cool-gray background never did) with the Manus-style left-edge paper fade
restored. Mobile keeps the C loop Mike approved (rotated 90deg, centered, tinted).
JS chooses the source by viewport at load. Drop the unused comparison clips.

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

style.css

@@ -138,7 +138,7 @@ a.tel { text-decoration: none; }
   position: absolute; top: 0; right: 0; bottom: 0; width: 56%;
   z-index: 1; pointer-events: none; background: var(--paper);
 }
-.hero-media::after { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: .2; pointer-events: none; }
+.hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, var(--paper) 0%, rgba(247,244,239,0) 30%); }
 .hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; }
 .hero-video.is-playing { opacity: .5; }
 @media (max-width: 760px) {
@@ -147,6 +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-media::after { background: rgba(247,244,239,.2); }   /* flat lightening wash on mobile (no desktop left-fade) */
   .hero-video { position: absolute; top: 50%; left: 50%; width: 100vh; height: 100vw; object-fit: cover; object-position: 50% 50%; transform: translate(-50%, -50%) rotate(90deg); mix-blend-mode: normal; }
   .hero-video.is-playing { opacity: .5; }
 }