fix: adjust hero top spacing and keep title and contact info on one row on large screens

src/components/HeroSection.module.css

@@ -65,10 +65,16 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
-  height: 100%;
+  width: 100%;
-  /* Horizontal padding keeps text clear of illustration zones   */
+  max-width: 920px;
-  padding: 0 clamp(160px, 22vw, 460px);
+  margin: 0 auto;
+  height: auto;
+  min-height: 100%;
+  padding-top: clamp(64px, 6.5vw, 96px);
+  padding-bottom: clamp(28px, 3vw, 40px);
+  padding-left: 20px;
+  padding-right: 20px;
   text-align: center;
 }
 
@@ -109,10 +115,10 @@
 .heroTitle {
   margin-bottom: clamp(8px, 1vw, 14px);
   color: var(--text-primary);
-  font-size: clamp(32px, 5vw, 64px);
+  font-size: clamp(32px, 3.6vw, 54px);
-  line-height: 1.12;
+  line-height: 1.15;
   text-shadow: none;
-  /* Allow wrapping on smaller screens so text never clips */
+  white-space: nowrap;
 }
 
 /* ── Subtitle ───────────────────────────────────────────────── */
@@ -174,6 +180,7 @@
 .contactBar {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: clamp(10px, 1.4vw, 18px);
   border: 0;
   background: transparent;
@@ -181,6 +188,7 @@
   font-size: clamp(11px, 1vw, 14px);
   font-weight: 500;
   line-height: 1.6;
+  white-space: nowrap;
 }
 
 [data-theme="dark"] .contactBar {
@@ -192,6 +200,7 @@
   align-items: center;
   gap: 6px;
   color: inherit;
+  white-space: nowrap;
   transition: opacity var(--motion-duration-fast) ease;
 }
 
@@ -240,6 +249,7 @@
   .heroTitle {
     /* Allow wrapping at tablet so text stays within the center zone */
     max-width: 520px;
+    white-space: normal;
   }
 
   .contactBar {
@@ -247,6 +257,7 @@
     flex-wrap: wrap;
     justify-content: center;
     gap: 8px 14px;
+    white-space: normal;
   }
 
   .contactDivider {

src/components/ScenicHeroJourney.module.css

@@ -21,7 +21,7 @@
   position: relative;
   width: 100%;
   height: auto;
-  min-height: clamp(520px, 46vw, 680px);
+  min-height: clamp(580px, 48vw, 700px);
   overflow: hidden;
   background: var(--bg-page);
 }
@@ -190,7 +190,8 @@
    ================================================================ */
 @media (min-width: 1441px) {
   .heroStage {
-    height: 662px;
+    height: auto;
+    min-height: 680px;
     overflow: visible;
   }