diff --git a/public/css/style.css b/public/css/style.css
index 6c8b065..6617006 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -127,11 +127,13 @@ a { color: var(--accent2); }
 
 /* ── Hero: asymmetric split ───────────────────────────────── */
 
+/* Sized by its content, not by 100dvh. A viewport-height hero centred its copy
+   a third of the way down a laptop screen and buried the details strip; this
+   still clears the fold on a 900px screen and lets the next section peek. */
 .hero {
   max-width: var(--shell); margin: 0 auto;
-  min-height: 100dvh;
   display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 4rem; align-items: center;
-  padding: calc(64px + 3rem) var(--gut) 4rem;
+  padding: calc(64px + 3.5rem) var(--gut) 5rem;
 }
 
 .eyebrow {
@@ -310,7 +312,7 @@ form { margin-top: 2rem; }
 /* ── Responsive ───────────────────────────────────────────── */
 
 @media (max-width: 1000px) {
-  .hero { grid-template-columns: 1fr; gap: 2.8rem; min-height: 0; padding-top: calc(64px + 2.5rem); }
+  .hero { grid-template-columns: 1fr; gap: 2.8rem; padding: calc(64px + 2.5rem) var(--gut) 3.5rem; }
   .hero-figure { order: -1; }
   .hero-figure img { aspect-ratio: 16 / 10; }
   .bento { grid-template-columns: 1fr 1fr; }