diff --git a/src/pages/index.astro b/src/pages/index.astro
index 902b828..ad12e51 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -167,6 +167,13 @@ const sponsors       = cms?.sponsors?.length  ? cms.sponsors  : DEFAULTS.sponsor
             .scroll-indicator { display: none; }
         }
 
+        /* On mobile, margin-top: auto can collapse to 0 when the headline
+           fills most of the hero — enforce a minimum gap above the blockquote */
+        .hero-mission { margin-top: auto; }
+        @media (max-width: 639px) {
+            .hero-mission { margin-top: clamp(40px, 6vh, 80px); }
+        }
+
         /* Hero content padding: clear the fixed nav (mobile logo 80px + 24px py = ~104px; desktop logo 93px + 32px py = ~125px) */
         #hero-content {
             padding: 144px 48px 48px;
@@ -286,8 +293,8 @@ const sponsors       = cms?.sponsors?.length  ? cms.sponsors  : DEFAULTS.sponsor
 
                     <!-- Mission blockquote -->
                     <div
-                        class="anim-fade-up2"
-                        style="margin-top: auto; max-width: 500px; background: rgba(0,0,0,0.48); backdrop-filter: blur(6px); border-radius: 7px; padding: 22px 26px;"
+                        class="anim-fade-up2 hero-mission"
+                        style="max-width: 500px; background: rgba(0,0,0,0.48); backdrop-filter: blur(6px); border-radius: 7px; padding: 22px 26px;"
                     >
                         <div style="width: 32px; height: 3px; background: #7DA371; margin-bottom: 14px;" />
                         <blockquote style="font-family: 'Merriweather', serif; font-weight: 700; font-style: italic; font-size: 16px; color: #F6F1E8; line-height: 1.6; margin: 0;">