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

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;
   }
 }