fix: resize and rearrange hero landing illustrations for tablet and mobile screens

src/components/HeroSection.module.css

@@ -109,11 +109,10 @@
 .heroTitle {
   margin-bottom: clamp(8px, 1vw, 14px);
   color: var(--text-primary);
-  /* Scale title fluidly so it never overflows into illustration zones */
   font-size: clamp(32px, 5vw, 64px);
   line-height: 1.12;
   text-shadow: none;
-  white-space: nowrap;
+  /* Allow wrapping on smaller screens so text never clips */
 }
 
 /* ── Subtitle ───────────────────────────────────────────────── */
@@ -124,7 +123,6 @@
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  white-space: nowrap;
 }
 
 /* ── Action buttons ─────────────────────────────────────────── */
@@ -183,7 +181,6 @@
   font-size: clamp(11px, 1vw, 14px);
   font-weight: 500;
   line-height: 1.6;
-  white-space: nowrap;
 }
 
 [data-theme="dark"] .contactBar {
@@ -223,14 +220,44 @@
 /* ================================================================
    MOBILE  ≤ 640px
    ================================================================ */
-@media (max-width: 640px) {
+/* ================================================================
+   TABLET  501px – 1100px — match the illustration breakpoint
+   ================================================================ */
+@media (max-width: 1100px) and (min-width: 501px) {
+  .heroContent {
+    /* Top-anchor content so it sits nicely in the upper-center zone */
+    justify-content: flex-start;
+    padding-top: clamp(60px, 8vw, 90px);
+  }
+
+  .heroTitle {
+    /* Allow wrapping at tablet so text stays within the center zone */
+    max-width: 520px;
+  }
+
+  .contactBar {
+    /* Wrap contact items on narrow tablets */
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px 14px;
+  }
+
+  .contactDivider {
+    display: none;
+  }
+}
+
+/* ================================================================
+   MOBILE  ≤ 500px  (screensizes under 500px)
+   ================================================================ */
+@media (max-width: 500px) {
   .heroContentWrapper {
     height: auto;
-    min-height: 680px;
+    min-height: 520px;
   }
 
   .topBar {
-    padding-top: 18px;
+    padding: 16px 14px 0;
   }
 
   .iconButton {
@@ -239,47 +266,47 @@
   }
 
   .heroContent {
-    /* Switch to top-anchored layout on mobile */
     height: auto;
-    min-height: 680px;
-    padding: 72px 24px 40px;
+    min-height: 520px;
+    padding: 66px 16px 36px;
     justify-content: flex-start;
   }
 
   .heroTitle {
-    font-size: clamp(30px, 8.5vw, 42px);
+    font-size: clamp(26px, 7.8vw, 36px);
     white-space: normal;
-    max-width: 300px;
+    max-width: 270px;
     line-height: 1.15;
   }
 
   .heroSubtitle {
     white-space: normal;
-    max-width: 260px;
-    letter-spacing: 0.14em;
+    max-width: 250px;
+    font-size: 11px;
+    letter-spacing: 0.12em;
   }
 
   .actionButtons {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     width: 100%;
-    max-width: 320px;
-    gap: 8px;
+    max-width: 276px;
+    gap: 6px;
   }
 
   .heroButton {
     min-width: 0;
     width: auto;
-    height: 42px;
-    padding: 0 8px;
-    font-size: 13px;
+    height: 38px;
+    padding: 0 6px;
+    font-size: 12px;
   }
 
   .contactBar {
     flex-direction: column;
-    gap: 6px;
+    gap: 5px;
     white-space: normal;
-    font-size: 12px;
+    font-size: 11.5px;
   }
 
   .contactItem {

src/components/ScenicHeroJourney.module.css

@@ -1,9 +1,10 @@
 /* ============================================================
-   ScenicHeroJourney — hero stage with fluid-scaling SVG backdrop
-   Strategy: illustrations use fluid width via clamp() so they
-   always leave a comfortable gap to the center content.
-   They are pushed left/right so ~half bleeds off the canvas edge,
-   clipped by heroStage overflow:hidden — matching the design.
+   ScenicHeroJourney — hero stage with SVG backdrop
+   Breakpoint strategy:
+     ≤ 640px   → mobile   (large bold crop, small sun clear of toggle)
+     641-1100px → tablet  (large bold crop, fluid width)
+     1101-1440px → laptop (fluid clamp bleed — the approved look)
+     > 1440px  → ultra-wide (frozen at 1440px values, overflow:visible)
    ============================================================ */
 
 /* ── Container ─────────────────────────────────────────────── */
@@ -19,7 +20,6 @@
 .heroStage {
   position: relative;
   width: 100%;
-  /* fluid height: shrinks on narrower screens */
   height: clamp(360px, 46vw, 680px);
   overflow: hidden;
   background: var(--bg-page);
@@ -48,65 +48,121 @@
 }
 
 /* ================================================================
-   LEFT illustration  (SVG intrinsic: 397 × 600)
-   Strategy: width scales with viewport so it's always ~28% of
-   the canvas width. Pushed so its RIGHT edge aligns with the
-   leftmost ~22% of the canvas (the rest bleeds off the left edge).
+   LAPTOP  1101px – 1440px  (default — approved bleed look)
+   Illustrations scale with vw and partially bleed off canvas edges.
    ================================================================ */
 .backdropLeft {
-  /* Start below the topBar icon zone (padding ~32px + icon 44px = ~76px) */
   top: clamp(72px, 8vw, 100px);
   left: clamp(-220px, calc(22% - 28vw), -40px);
   width: clamp(240px, 28vw, 440px);
 }
 
-/* ================================================================
-   RIGHT illustration  (SVG intrinsic: 435 × 533)
-   Mirror of left: right edge bleeds off the right edge.
-   ================================================================ */
 .backdropRight {
-  /* Slightly lower than left to maintain visual rhythm */
   top: clamp(80px, 9vw, 110px);
   right: clamp(-240px, calc(22% - 29vw), -40px);
   width: clamp(250px, 29vw, 460px);
 }
 
-/* ================================================================
-   SUN illustration  (SVG intrinsic: 139 × 139)
-   Sits in the upper-right quadrant, between the center text and
-   the right cubes.  Scales fluidly.
-   ================================================================ */
 .backdropSun {
   top: clamp(20px, 3.5vw, 52px);
-  /* place sun between center (50%) and right illustration edge  */
   right: clamp(100px, calc(22% + 2vw), 380px);
   width: clamp(52px, 10vw, 139px);
 }
 
 /* ================================================================
-   MOBILE  ≤ 640px  — tighter crop, smaller presence
+   TABLET  501px – 1100px
+   Large illustrations with heavy bleed — bold fragments at edges.
+   Width scales fluidly; fixed bleed offset keeps content clear.
    ================================================================ */
-@media (max-width: 640px) {
+@media (max-width: 1100px) and (min-width: 501px) {
+  .heroStage {
+    height: clamp(360px, 52vw, 480px);
+  }
+
+  /* Left — visible slice ≈ width - 150px, always < content padding */
+  .backdropLeft {
+    top: clamp(88px, 10vw, 108px);
+    left: -150px;
+    width: clamp(280px, 36vw, 360px);
+  }
+
+  /* Right — slightly larger, deeper bleed */
+  .backdropRight {
+    top: clamp(96px, 11vw, 116px);
+    right: -165px;
+    width: clamp(295px, 38vw, 380px);
+  }
+
+  /* Sun — upper-right zone, between avatar and right cubes */
+  .backdropSun {
+    top: clamp(26px, 3.5vw, 44px);
+    right: clamp(120px, 33vw, 280px);
+    width: clamp(62px, 9vw, 96px);
+  }
+}
+
+/* ================================================================
+   MOBILE  ≤ 500px  (screensizes under 500px)
+   Assets moved UP to the sides (matching desktop/tablet aesthetic):
+   - Anchored via top, flanking the avatar & title
+   - Fluid side bleed maintains balance between visibility & clearance
+   - Zero collision with central avatar, title, buttons, or contact bar
+   ================================================================ */
+@media (max-width: 500px) {
   .heroStage {
     height: auto;
-    min-height: 680px;
+    min-height: 520px;
   }
 
   .backdropLeft {
-    top: 130px;
-    left: -30px;
-    width: clamp(100px, 26vw, 160px);
+    top: clamp(75px, 16vw, 95px);
+    bottom: auto;
+    left: clamp(-100px, calc(20vw - 230px), -100px);
+    width: clamp(200px, 44vw, 250px);
   }
 
   .backdropRight {
-    top: 136px;
-    right: -30px;
-    width: clamp(110px, 28vw, 170px);
+    top: clamp(82px, 18vw, 102px);
+    bottom: auto;
+    right: clamp(-120px, calc(20vw - 240px), -120px);
+    width: clamp(210px, 46vw, 260px);
   }
 
   .backdropSun {
-    top: 44px;
-    right: 16px;
-    width: clamp(36px, 9vw, 56px);
+    top: clamp(24px, 5vw, 36px);
+    right: clamp(52px, 15vw, 68px);
+    width: clamp(34px, 8vw, 42px);
+  }
+}
+
+/* ================================================================
+   ULTRA-WIDE  > 1440px
+   Canvas capped at 1440px but vw keeps growing → bleed explodes.
+   Freeze at the values the clamp() formulas resolve to @ 1440px.
+   heroStage overflow:visible lets illustrations escape into the
+   extra viewport space (body overflow-x:hidden prevents scrollbar).
+   ================================================================ */
+@media (min-width: 1441px) {
+  .heroStage {
+    height: 662px;
+    overflow: visible;
+  }
+
+  .backdropLeft {
+    top: 100px;
+    left: -86px;
+    width: 403px;
+  }
+
+  .backdropRight {
+    top: 110px;
+    right: -101px;
+    width: 418px;
+  }
+
+  .backdropSun {
+    top: 50px;
+    right: 346px;
+    width: 139px;
   }
 }