From 4adf5b7b9f59926a0d9bccac97f56cb6b0cab8b0 Mon Sep 17 00:00:00 2001
From: Aravind <aravind@tenext.in>
Date: Mon, 13 Jul 2026 17:35:12 +0530
Subject: [PATCH] fix rebuild issue

---
 src/app/empowerment/page.tsx                  |   2 +-
 .../sections/EmpowermentHowItWorks.tsx        |  72 +++++++++--
 .../sections/EmpowermentPrograms.tsx          | 115 ++++++++++++++----
 .../sections/EmpowermentStories.tsx           |   9 +-
 4 files changed, 163 insertions(+), 35 deletions(-)

diff --git a/src/app/empowerment/page.tsx b/src/app/empowerment/page.tsx
index 64cc74f..9c3eb97 100644
--- a/src/app/empowerment/page.tsx
+++ b/src/app/empowerment/page.tsx
@@ -100,7 +100,7 @@ export default function EmpowermentPage() {
             <EmpowermentVision />
             <EmpowermentStory />
             <WomenSection
-              eyebrow="/ Doormile Wings /"
+              eyebrow="/ Women Empowerment /"
               bannerLabel="Women Entrepreneurship"
               bannerCopy="An ecosystem where women build, own, and scale enterprises across logistics."
               ctaLabel="Explore the ecosystem"
diff --git a/src/components/sections/EmpowermentHowItWorks.tsx b/src/components/sections/EmpowermentHowItWorks.tsx
index 4bd83e6..d41337b 100644
--- a/src/components/sections/EmpowermentHowItWorks.tsx
+++ b/src/components/sections/EmpowermentHowItWorks.tsx
@@ -169,30 +169,78 @@ export default function EmpowermentHowItWorks() {
           }
         }
 
-        /* Mobile: single column — dividers rotate from vertical to horizontal. */
+        /* Mobile: compact numbered editorial index — number in a narrow
+           left column, title/description/divider sharing one right
+           content column, laid out on the existing milestone markup via
+           CSS Grid (no duplicated JSX, no new step markup). */
         @media (max-width: 640px) {
+          .ehw-head {
+            margin-bottom: clamp(40px, 10vw, 56px);
+          }
+
           .ehw-sequence {
             row-gap: 0;
           }
+
           .ehw-step {
+            display: grid;
+            grid-template-columns: 48px minmax(0, 1fr);
+            column-gap: 14px;
             flex-basis: 100%;
             padding-left: 0;
-            padding-top: clamp(28px, 8vw, 38px);
+            padding-top: clamp(28px, 8vw, 36px);
             border-left: none;
-            border-top: 1px solid rgba(17, 17, 17, 0.14);
-          }
-          .ehw-step:first-child {
-            padding-top: 0;
             border-top: none;
           }
-          .ehw-step:nth-child(4) {
-            border-top: 1px solid rgba(17, 17, 17, 0.14);
-          }
-          .ehw-step:hover {
-            border-left-color: transparent;
+
+          .ehw-step:first-child {
+            padding-top: 0;
           }
+
+          /* Compact solid index number — replaces the oversized pale
+             outline treatment used on desktop/tablet. */
           .ehw-step-num {
-            font-size: clamp(44px, 13vw, 56px);
+            grid-column: 1;
+            grid-row: 1;
+            align-self: start;
+            font-size: clamp(32px, 9vw, 40px);
+            line-height: 1;
+            color: #c8102e;
+            -webkit-text-stroke: 0;
+            margin: 0;
+          }
+
+          /* Hidden completely — no reserved gap left in its place since a
+             display:none grid item takes no track space. */
+          .ehw-step-kicker {
+            display: none;
+          }
+
+          .ehw-step-title {
+            grid-column: 2;
+            grid-row: 1;
+            font-size: clamp(22px, 6vw, 26px) !important;
+          }
+
+          .ehw-step-desc {
+            grid-column: 2;
+            grid-row: 2;
+            max-width: none;
+            font-size: 16px;
+          }
+
+          /* Divider lives inside the description box (content column
+             only), so it never runs underneath the number column. */
+          .ehw-step-desc::after {
+            content: "";
+            display: block;
+            margin-top: clamp(24px, 6vw, 28px);
+            height: 1px;
+            background-color: rgba(17, 17, 17, 0.14);
+          }
+
+          .ehw-step:last-child .ehw-step-desc::after {
+            display: none;
           }
         }
 
diff --git a/src/components/sections/EmpowermentPrograms.tsx b/src/components/sections/EmpowermentPrograms.tsx
index 34115f1..934233f 100644
--- a/src/components/sections/EmpowermentPrograms.tsx
+++ b/src/components/sections/EmpowermentPrograms.tsx
@@ -38,7 +38,8 @@ export default function EmpowermentPrograms() {
           __html: `
         .epr-section {
           background: #ffffff;
-          padding: clamp(78px, 9vw, 132px) 0;
+          padding-top: clamp(28px, 3.2vw, 48px);
+          padding-bottom: clamp(78px, 9vw, 132px);
           overflow: visible;
         }
 
@@ -90,7 +91,11 @@ export default function EmpowermentPrograms() {
           display: grid;
           grid-template-columns: minmax(300px, 0.38fr) minmax(0, 0.62fr);
           gap: clamp(32px, 5vw, 78px);
-          align-items: start;
+          /* stretch (not start): .epr-aside-wrap must span the full row
+             height — the tall Programs column's implicit-row height — so it
+             defines the sticky travel distance. The visual box no longer
+             lives here, so stretching this item no longer distorts it. */
+          align-items: stretch;
           min-width: 0;
         }
 
@@ -98,12 +103,55 @@ export default function EmpowermentPrograms() {
           min-width: 0;
         }
 
-        .epr-aside {
-          position: sticky;
-          top: 110px;
+        /* Responsibility split (desktop sticky architecture):
+             .epr-aside-wrap    — plain grid item, stretched to the full
+                                  Programs-list row height. Defines travel
+                                  distance. No sizing responsibility of its
+                                  own beyond that.
+             .epr-aside-sticky  — owns position: sticky. Its height is
+                                  explicitly clamped to the viewport
+                                  (100dvh minus header clearance and a
+                                  bottom safe-margin), so it can never grow
+                                  taller than what's actually visible —
+                                  the tall min-height that previously fought
+                                  the sticky top offset is gone entirely.
+             .epr-aside         — the visual composition (ghost number, map,
+                                  heading, paragraph). Fills the sticky
+                                  frame's height and arranges its existing
+                                  content inside it; owns the decorative
+                                  bleed clipping (overflow: hidden). */
+        .epr-aside-wrap {
           min-width: 0;
-          min-height: clamp(480px, 44vw, 660px);
-          padding: clamp(18px, 3vw, 34px) 0 clamp(24px, 3.5vw, 42px);
+        }
+
+        .epr-aside-sticky {
+          /* 132px clears the site header's fixed state (~122px tall once
+             scrolled) with a small margin; only grows on very tall
+             viewports. This is viewport-height-derived, NOT content-height
+             derived — unlike the old top formula, it never has to react to
+             how tall the aside's own content happens to be. */
+          --epr-sticky-top: clamp(132px, 12dvh, 160px);
+          --epr-sticky-bottom-safe: 28px;
+          position: sticky;
+          top: var(--epr-sticky-top);
+          height: calc(100dvh - var(--epr-sticky-top) - var(--epr-sticky-bottom-safe));
+          min-height: 0;
+          min-width: 0;
+          /* Lets the visual composition react to the frame's OWN resolved
+             height (container query below) rather than guessing from the
+             viewport or the write-up's vw-based type scale. */
+          container-type: size;
+          container-name: epr-frame;
+        }
+
+        .epr-aside {
+          --epr-aside-pad-t: clamp(18px, 3vw, 34px);
+          --epr-aside-pad-b: clamp(24px, 3.5vw, 42px);
+          position: relative;
+          height: 100%;
+          min-width: 0;
+          min-height: 0;
+          padding: var(--epr-aside-pad-t) 0 var(--epr-aside-pad-b);
           display: flex;
           flex-direction: column;
           justify-content: center;
@@ -166,6 +214,26 @@ export default function EmpowermentPrograms() {
           margin: 0;
         }
 
+        /* Constrained-frame fallback: the sticky frame is short (short
+           desktop viewport height), so the decorative ghost number/map
+           shrink first — spacing second — while the heading and paragraph
+           stay full size and fully visible, per spec. Placed after the base
+           .epr-aside-num/-content/-map rules so it wins the cascade at
+           matching container sizes (equal selector specificity; source
+           order decides). */
+        @container epr-frame (max-height: 660px) {
+          .epr-aside { padding-top: clamp(12px, 1.8vw, 22px); padding-bottom: clamp(16px, 2.2vw, 26px); }
+          .epr-aside-content { gap: clamp(12px, 1.6vw, 20px); }
+          .epr-aside-num { font-size: clamp(90px, 11vw, 180px); }
+        }
+
+        @container epr-frame (max-height: 560px) {
+          .epr-aside { padding-top: clamp(8px, 1.2vw, 14px); padding-bottom: clamp(10px, 1.6vw, 18px); }
+          .epr-aside-content { gap: clamp(6px, 1vw, 12px); }
+          .epr-aside-num { font-size: clamp(48px, 7vw, 100px); }
+          .epr-aside-map { opacity: 0.14; }
+        }
+
         .epr-list {
           display: grid;
           gap: clamp(28px, 4vw, 52px);
@@ -283,7 +351,6 @@ export default function EmpowermentPrograms() {
         /* Laptop: sticky stays enabled, just a narrower gutter. */
         @media (max-width: 1180px) {
           .epr-stage { grid-template-columns: minmax(220px, 0.34fr) minmax(0, 0.66fr); gap: clamp(28px, 4vw, 46px); }
-          .epr-aside { min-height: 420px; }
           .epr-row:nth-child(even) { margin-left: 0; }
         }
 
@@ -291,9 +358,11 @@ export default function EmpowermentPrograms() {
            of pinning, since there's no longer enough vertical runway next to
            the (now narrower, shorter) program list for pinning to read well. */
         @media (max-width: 1023px) {
-          .epr-aside {
+          .epr-aside-sticky {
             position: relative;
             top: auto;
+            height: auto;
+            container-type: normal;
           }
         }
 
@@ -327,7 +396,7 @@ export default function EmpowermentPrograms() {
         }
 
         @media (max-width: 640px) {
-          .epr-section { padding-top: 54px; padding-bottom: 54px; }
+          .epr-section { padding-top: 28px; padding-bottom: 54px; }
           .epr-title {
             font-size: clamp(34px, 10vw, 40px) !important;
             letter-spacing: -0.045em !important;
@@ -357,18 +426,22 @@ export default function EmpowermentPrograms() {
             </div>
 
             <div className="epr-stage">
-              <aside className="epr-aside">
-                <div className="epr-aside-map" aria-hidden="true">
-                  <IndustryWorldMap />
+              <div className="epr-aside-wrap">
+                <div className="epr-aside-sticky">
+                  <aside className="epr-aside">
+                    <div className="epr-aside-map" aria-hidden="true">
+                      <IndustryWorldMap />
+                    </div>
+                    <ScrollReveal delay={0.05} duration={0.8} yOffset={24} className="epr-aside-content">
+                      <div className="epr-aside-num">05</div>
+                      <p className="epr-aside-copy">Building tomorrow&rsquo;s <em>women entrepreneurs.</em></p>
+                      <p className="epr-aside-desc">
+                        Every enterprise starts with one decision. Our pillars move women from idea to ownership through mentorship, real industry partnerships, and hands-on venture building across the logistics ecosystem.
+                      </p>
+                    </ScrollReveal>
+                  </aside>
                 </div>
-                <ScrollReveal delay={0.05} duration={0.8} yOffset={24} className="epr-aside-content">
-                  <div className="epr-aside-num">05</div>
-                  <p className="epr-aside-copy">Building tomorrow&rsquo;s <em>women entrepreneurs.</em></p>
-                  <p className="epr-aside-desc">
-                    Every enterprise starts with one decision. Our pillars move women from idea to ownership through mentorship, real industry partnerships, and hands-on venture building across the logistics ecosystem.
-                  </p>
-                </ScrollReveal>
-              </aside>
+              </div>
 
               <div>
                 <ScrollReveal delay={0.1} duration={0.8} yOffset={24}>
diff --git a/src/components/sections/EmpowermentStories.tsx b/src/components/sections/EmpowermentStories.tsx
index 3d620c6..044f8b3 100644
--- a/src/components/sections/EmpowermentStories.tsx
+++ b/src/components/sections/EmpowermentStories.tsx
@@ -265,7 +265,14 @@ export default function EmpowermentStories() {
         }
 
         @media (max-width: 640px) {
-          .est-section { padding-top: 54px; padding-bottom: 54px; }
+          .est-section { padding-top: 54px; padding-bottom: 6px; }
+          /* .est-feature's margin-bottom (clamp(44px, 6vw, 76px)) was sized
+             to precede an .est-list testimonial row block that no longer
+             exists in this component's JSX. Since .est-feature is now the
+             section's last child, that margin was pure dead space stacking
+             on top of .est-section's own padding-bottom above — the real
+             source of the oversized mobile gap before the next section. */
+          .est-feature { margin-bottom: 0; }
           .est-title {
             font-size: clamp(34px, 10vw, 40px) !important;
             letter-spacing: -0.045em !important;