Center spec columns; enlarge featured film video

index.html

@@ -298,6 +298,20 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
 }
 .film-unmute:hover { background: rgba(20,16,12,0.8); border-color: var(--gold); }
 .film-unmute .film-unmute-icon { font-size: 0.85rem; line-height: 1; }
+/* featured film block sitting directly under the hero */
+.hero-film { padding: 46px 0 26px; }
+.hero-film-inner {
+  position: relative;
+  width: min(1400px, 95vw);
+  margin: 0 auto;
+  aspect-ratio: 16 / 9;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #000;
+  border: 1px solid rgba(200,169,106,0.30);
+  box-shadow: 0 34px 90px rgba(0,0,0,0.5);
+}
+@media (max-width: 720px) { .hero-film { padding: 30px 0 16px; } }
 .story-text h2 {
   font-family: var(--display);
   font-size: clamp(2rem, 4vw, 3rem);
@@ -319,6 +333,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
 }
 .story-detail {
   display: flex; gap: 40px;
+  justify-content: center; text-align: center;
   margin-top: 32px; padding-top: 24px;
   border-top: 1px solid var(--line);
 }
@@ -736,9 +751,18 @@ footer {
     <a href="#subscribe" class="btn">Start Your Subscription <span class="arrow">→</span></a>
     <a href="#story" class="btn btn-ghost">Our Origin</a>
   </div>
-  <div class="hero-scroll">
+</section>
-    <span>Scroll</span>
+
-    <div class="line"></div>
+<!-- FILM (featured, directly under the hero) -->
+<section class="hero-film">
+  <div class="hero-film-inner">
+    <video
+      class="story-visual-video"
+      autoplay muted loop playsinline preload="metadata"
+      poster="assets/film/var-film1-poster.jpg">
+      <source src="assets/film/var-film1.mp4" type="video/mp4">
+    </video>
+    <button type="button" class="film-unmute lang-skip" aria-label="Turn film sound on"><span class="film-unmute-icon" aria-hidden="true">&#128264;</span><span class="film-unmute-label">Sound on</span></button>
   </div>
 </section>
 
@@ -764,15 +788,7 @@ footer {
 <section class="story" id="story">
   <div class="container">
     <div class="story-grid">
-      <div class="story-visual has-film reveal">
+      <div class="story-visual reveal" style="background-image: url('assets/farm/origin-plants.webp'); background-size: cover; background-position: center;"></div>
-        <video
-          class="story-visual-video"
-          autoplay muted loop playsinline preload="metadata"
-          poster="assets/film/var-film1-poster.jpg">
-          <source src="assets/film/var-film1.mp4" type="video/mp4">
-        </video>
-        <button type="button" class="film-unmute lang-skip" aria-label="Turn film sound on"><span class="film-unmute-icon" aria-hidden="true">&#128264;</span><span class="film-unmute-label">Sound on</span></button>
-      </div>
       <div class="story-text reveal">
         <span class="eyebrow">The Origin</span>
         <h2>Grown in the shadow of <em>three volcanoes</em></h2>