diff --git a/src/app/globals.css b/src/app/globals.css
index 366502e..c9ec0ec 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -901,7 +901,9 @@ body {
    width falls below 1536px). Match the home breakpoint instead. */
 @media (max-width: 840px) {
   .custom-standard-hero-container {
-    padding: 10px 10px 10px 10px !important;
+    /* No top gap on mobile: the hero card sits flush to the top so the floating
+       navbar rests directly on the hero instead of leaving a band above it. */
+    padding: 0 10px 10px 10px !important;
   }
   .custom-standard-hero-card {
     height: 600px !important;
@@ -910,3 +912,22 @@ body {
   }
 }
 
+/* Consistent flush hero across every page on mobile/tablet — the floating navbar
+   (position:absolute; top:5px) should rest directly on the hero with no band
+   above it. Home / How It Works / Solutions share .elementor-element-741f56c;
+   MileTruth uses .miletruth-hero-container. (About / Contact / Blog already use
+   .custom-standard-hero-container, handled above.) */
+@media (max-width: 1024px) {
+  /* The e-con applies top padding via the --padding-top / --padding-block-start
+     vars (site.css sets them to 10px at a higher specificity), so override the
+     vars — not just padding-top — to actually zero the gap. */
+  .elementor-element.elementor-element-741f56c {
+    --padding-top: 0px !important;
+    --padding-block-start: 0px !important;
+    padding-top: 0 !important;
+  }
+  .miletruth-hero-container {
+    margin-top: 0 !important;
+  }
+}
+
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index a073a4b..63ba852 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -130,7 +130,12 @@ export default function Footer() {
                           <div className="elementor-element elementor-element-df89993 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="df89993" data-element_type="container" data-e-type="container">
                             <div className="elementor-element elementor-element-69b6892 elementor-widget elementor-widget-logico_heading" data-id="69b6892" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                               <div className="elementor-widget-container">
-                                <div className="logico-title">Call Center</div>
+                                <div className="logico-title dm-foot-label">
+                                  <svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
+                                  </svg>
+                                  <span>Call Center</span>
+                                </div>
                               </div>
                             </div>
                             <div className="elementor-element elementor-element-87be926 elementor-widget elementor-widget-text-editor" data-id="87be926" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
@@ -142,7 +147,13 @@ export default function Footer() {
                           <div className="elementor-element elementor-element-f5d8e63 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f5d8e63" data-element_type="container" data-e-type="container">
                             <div className="elementor-element elementor-element-774e540 elementor-widget elementor-widget-logico_heading" data-id="774e540" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                               <div className="elementor-widget-container">
-                                <div className="logico-title">Our Location</div>
+                                <div className="logico-title dm-foot-label">
+                                  <svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+                                    <circle cx="12" cy="10" r="3" />
+                                  </svg>
+                                  <span>Our Location</span>
+                                </div>
                               </div>
                             </div>
                             <div className="elementor-element elementor-element-9c1cf03 elementor-widget elementor-widget-text-editor" data-id="9c1cf03" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
@@ -158,7 +169,13 @@ export default function Footer() {
                           <div className="elementor-element elementor-element-a96d151 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="a96d151" data-element_type="container" data-e-type="container">
                             <div className="elementor-element elementor-element-37e647f elementor-widget elementor-widget-logico_heading" data-id="37e647f" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                               <div className="elementor-widget-container">
-                                <div className="logico-title">Email</div>
+                                <div className="logico-title dm-foot-label">
+                                  <svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                                    <rect x="2" y="4" width="20" height="16" rx="2" />
+                                    <path d="m22 7-10 5L2 7" />
+                                  </svg>
+                                  <span>Email</span>
+                                </div>
                               </div>
                             </div>
                             <div className="elementor-element elementor-element-ba67644 elementor-widget elementor-widget-text-editor" data-id="ba67644" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
@@ -172,7 +189,16 @@ export default function Footer() {
                           <div className="elementor-element elementor-element-9ba4b82 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ba4b82" data-element_type="container" data-e-type="container">
                             <div className="elementor-element elementor-element-e9a5d79 elementor-widget elementor-widget-logico_heading" data-id="e9a5d79" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                               <div className="elementor-widget-container">
-                                <div className="logico-title">Social network</div>
+                                <div className="logico-title dm-foot-label">
+                                  <svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                                    <circle cx="18" cy="5" r="3" />
+                                    <circle cx="6" cy="12" r="3" />
+                                    <circle cx="18" cy="19" r="3" />
+                                    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
+                                    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
+                                  </svg>
+                                  <span>Social network</span>
+                                </div>
                               </div>
                             </div>
                             <div className="elementor-element elementor-element-a6bccba elementor-shape-square elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="a6bccba" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default">
@@ -521,6 +547,97 @@ export default function Footer() {
                 width: 25px;
                 height: 25px;
             }
+
+            /* Compact footer link columns on phones (<=480px). The kit only sets
+               column --width at min-width:481px, so below that all four blocks
+               fall back to 100% and stack into one very tall column. Put the
+               logo+social full-width on top, then lay the three link groups out
+               in a 2-up grid (matching the tablet 47% intent) so the footer is
+               roughly half as tall. */
+            /* Inline icon beside each contact label (Call Center / Our Location /
+               Email / Social network). */
+            .elementor-6585 .dm-foot-label {
+                display: inline-flex !important;
+                align-items: center;
+                gap: 8px;
+            }
+            .elementor-6585 .dm-foot-label .dm-foot-ic {
+                flex: 0 0 auto;
+                color: #C01227;
+            }
+
+            /* ── Compact mobile contact footer (<=600px) ──
+               On phones the upper contact section stacked into one very tall
+               column with 50px margins between every block. Tighten the heading,
+               collapse those stack margins, and pair Email + Social side-by-side
+               (both are short) so the footer is far shorter without losing the
+               full-width address readability. */
+            @media (max-width: 600px) {
+                /* Trim the band's oversized top/bottom padding on phones. */
+                .elementor-6585 .elementor-element.elementor-element-b29b8fc > .e-con-inner {
+                    padding-top: 40px !important;
+                    padding-bottom: 40px !important;
+                }
+                .elementor-6585 .elementor-element.elementor-element-687d944 .logico-title {
+                    font-size: clamp(24px, 6.6vw, 32px) !important;
+                    line-height: 1.2 !important;
+                }
+                .elementor-6585 .dm-foot-label .dm-foot-ic { width: 14px; height: 14px; }
+                /* The Call Center / Our Location group carries a 10px side padding
+                   the Email / Social group doesn't, leaving its labels indented
+                   10px out of line with everything else — zero it so all four
+                   contact blocks share the same left edge as the heading. */
+                .elementor-6585 .elementor-element.elementor-element-2631b42 {
+                    padding-left: 0 !important;
+                    padding-right: 0 !important;
+                }
+                /* All four contact blocks stack in one left-aligned column with a
+                   consistent gap (Social network sits below Email). */
+                .elementor-6585 .elementor-element.elementor-element-2631b42,
+                .elementor-6585 .elementor-element.elementor-element-f5d8e63,
+                .elementor-6585 .elementor-element.elementor-element-645be8d,
+                .elementor-6585 .elementor-element.elementor-element-9ba4b82 {
+                    margin-top: 22px !important;
+                }
+                .elementor-6585 .elementor-element.elementor-element-645be8d > .e-con-inner {
+                    flex-direction: column !important;
+                    gap: 0 !important;
+                    align-items: stretch !important;
+                }
+                .elementor-6585 .elementor-element.elementor-element-a96d151,
+                .elementor-6585 .elementor-element.elementor-element-9ba4b82 {
+                    width: 100% !important;
+                }
+            }
+
+            @media (max-width: 480px) {
+                .elementor-6585 .elementor-element.elementor-element-3f1ba7a {
+                    display: flex !important;
+                    flex-direction: row !important;
+                    flex-wrap: wrap !important;
+                    gap: 36px 16px !important;
+                }
+                .elementor-6585 .elementor-element.elementor-element-64e2e81 {
+                    flex: 0 0 100% !important;
+                    width: 100% !important;
+                }
+                .elementor-6585 .elementor-element.elementor-element-5b73dd3,
+                .elementor-6585 .elementor-element.elementor-element-451f15c,
+                .elementor-6585 .elementor-element.elementor-element-44a1f5d {
+                    flex: 1 1 calc(50% - 8px) !important;
+                    width: calc(50% - 8px) !important;
+                    min-width: 0 !important;
+                }
+                /* Allow long links (e.g. "Women entrepreneurship") to wrap inside
+                   the narrow columns instead of overflowing. */
+                .elementor-6585 .logico-custom-menu-widget li a {
+                    white-space: normal !important;
+                }
+                /* Trim the large social-icons top gap so the brand block stays tight. */
+                .elementor-6585 .elementor-element.elementor-element-e4e6486 > .elementor-widget-container {
+                    margin-top: 24px !important;
+                }
+            }
           `,
         }}
       />
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index adbd3e9..f8c21f7 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -550,6 +550,17 @@ export default function Header() {
                 #masthead .menu-trigger {
                     display: block !important;
                 }
+
+                /* Sticky header on scroll for mobile/tablet too — the desktop
+                   rule lived only in the min-width:1025px block, so on phones the
+                   absolutely-positioned navbar scrolled away with the page. Pin it
+                   to the top once scrolled past 50px, matching desktop behaviour. */
+                #masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled {
+                    position: fixed !important;
+                    top: 0 !important;
+                    left: 0 !important;
+                    right: 0 !important;
+                }
             }
 
             @media (max-width: 480px) {
@@ -571,6 +582,34 @@ export default function Header() {
                     display: block !important;
                 }
             }
+
+            /* The bundled 'fontello' subset is missing the search (\\e85c) and
+               close (\\e845) glyphs, so those two icons render as empty tofu
+               boxes. Replace them with inline SVGs via CSS masks so they paint
+               in the current text colour (matching the working cart/user icons)
+               and respond to hover. */
+            #masthead .header-icon.search-link .search-trigger-icon::before,
+            #masthead .header-icon.menu-close .menu-close-icon::before {
+                content: "" !important;
+                display: block;
+                width: 1em;
+                height: 1em;
+                background-color: currentColor;
+                -webkit-mask-repeat: no-repeat;
+                mask-repeat: no-repeat;
+                -webkit-mask-position: center;
+                mask-position: center;
+                -webkit-mask-size: contain;
+                mask-size: contain;
+            }
+            #masthead .header-icon.search-link .search-trigger-icon::before {
+                -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
+                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
+            }
+            #masthead .header-icon.menu-close .menu-close-icon::before {
+                -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
+                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
+            }
           `,
         }}
       />
diff --git a/src/components/layout/LoadingScreen.tsx b/src/components/layout/LoadingScreen.tsx
index c5e018c..78dd48a 100644
--- a/src/components/layout/LoadingScreen.tsx
+++ b/src/components/layout/LoadingScreen.tsx
@@ -79,11 +79,10 @@ export default function LoadingScreen() {
         <Image
           src="/images/preloader.png"
           alt="Doormile"
-          width={200}
-          height={38}
+          width={325}
+          height={239}
           priority
           className="dm-loader__logo"
-          style={{ width: "auto", height: "auto" }}
         />
       </div>
 
@@ -100,8 +99,8 @@ export default function LoadingScreen() {
           will-change: opacity;
         }
         .dm-loader.is-hiding { opacity: 0; pointer-events: none; }
-        .dm-loader__pulse { animation: dmLoaderPulse 1.5s linear infinite; }
-        .dm-loader__logo { width: clamp(140px, 18vw, 200px); height: auto; }
+        .dm-loader__pulse { animation: dmLoaderPulse 1.5s linear infinite; display: grid; place-items: center; }
+        .dm-loader__logo { display: block; margin: 0 auto; width: clamp(120px, 32vw, 180px); height: auto; }
         @keyframes dmLoaderPulse {
           50%  { transform: scale(0.85); }
           100% { transform: scale(1); }
diff --git a/src/components/optimization/OptimizationSection.tsx b/src/components/optimization/OptimizationSection.tsx
index 0d96b38..f4724e9 100644
--- a/src/components/optimization/OptimizationSection.tsx
+++ b/src/components/optimization/OptimizationSection.tsx
@@ -1011,7 +1011,9 @@ const styles = `
 
   .dm-opt-mobile {
     position: relative;
-    margin: 0 10px;
+    /* Top gap separates this card from the hero stats bar above; sides stay 10px
+       and bottom stays flush so the Performance card butts against it below. */
+    margin: 16px 10px 0;
     padding: 24px 13px 22px;
     display: flex;
     flex-direction: column;
diff --git a/src/components/sections/CompetitiveEdge.tsx b/src/components/sections/CompetitiveEdge.tsx
index 706a109..ead04e8 100644
--- a/src/components/sections/CompetitiveEdge.tsx
+++ b/src/components/sections/CompetitiveEdge.tsx
@@ -498,26 +498,79 @@ export default function CompetitiveEdge() {
           .moat-heading {
             font-size: 1.8rem;
           }
+        }
 
-          /* Capability Matrix table gains responsive horizontal swipe scrolls */
+        /* On phones the 5-column table can't fit, so transform each row into a
+           stacked card: capability as the card title, then one "label: value"
+           line per competitor. Column labels are injected via nth-of-type so no
+           markup changes are needed (every row has the same column order). */
+        @media (max-width: 600px) {
           .table-wrapper {
-            width: 100%;
-            overflow-x: auto;
-            -webkit-overflow-scrolling: touch;
+            background: transparent;
+            border: none;
+            box-shadow: none;
+            border-radius: 0;
+            overflow: visible;
           }
-          
-          .comparison-table {
-            min-width: 720px; /* Forces optimal reading width swipe trail */
+          .comparison-table { min-width: 0; width: 100%; }
+          .comparison-table thead { display: none; }
+          .comparison-table tbody,
+          .comparison-table tr,
+          .comparison-table td { display: block; width: auto; }
+
+          .comparison-table tr {
+            background: #ffffff;
+            border: 1px solid rgba(0,0,0,0.07);
+            border-radius: 16px;
+            padding: 6px 16px 8px;
+            margin-bottom: 14px;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.04);
           }
 
-          .comparison-table th, 
-          .comparison-table td {
-            padding: 16px 18px;
-            font-size: 0.9rem;
+          /* Capability = card title (icon + name), no label */
+          .comparison-table td.capability-cell {
+            display: flex;
+            justify-content: flex-start;
+            gap: 12px;
+            font-size: 1.02rem;
+            padding: 12px 0 12px;
+            border-bottom: 1.5px solid #eef0f4;
+            margin-bottom: 4px;
           }
 
-          .capability-cell {
-            font-size: 0.98rem;
+          /* Value cells = "Label .... value" rows */
+          .comparison-table td:not(.capability-cell) {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            padding: 10px 0;
+            border-bottom: 1px solid #f4f5f7;
+            font-size: 0.95rem;
+            text-align: right;
+          }
+          .comparison-table tr td:last-child { border-bottom: none; }
+
+          .comparison-table td.col-highlight::before { content: "Doormile"; }
+          .comparison-table td:nth-of-type(3)::before { content: "Aggregators"; }
+          .comparison-table td:nth-of-type(4)::before { content: "Local Couriers"; }
+          .comparison-table td:nth-of-type(5)::before { content: "Software Platforms"; }
+          .comparison-table td:not(.capability-cell)::before {
+            font-weight: 700;
+            font-size: 0.72rem;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+            color: #8a8f9d;
+            flex: 0 0 auto;
+          }
+
+          /* Neutralise the desktop highlight column styling inside the card */
+          .comparison-table td.col-highlight {
+            background: transparent !important;
+            border-left: none;
+            border-right: none;
+            animation: none !important;
+            color: inherit !important;
           }
         }
       `}} />
diff --git a/src/components/sections/ContactsHero.tsx b/src/components/sections/ContactsHero.tsx
index c2f4120..0a0942f 100644
--- a/src/components/sections/ContactsHero.tsx
+++ b/src/components/sections/ContactsHero.tsx
@@ -7,7 +7,7 @@ export default function ContactsHero() {
       <style dangerouslySetInnerHTML={{ __html: `
         .contacts-hero-custom {
           background-color: #0b0b0b !important;
-          background-image: url('/images/home2-slide-1.jpg') !important;
+          background-image: url('/images/home2-banner-3.jpg') !important;
           background-size: cover !important;
           background-position: center !important;
         }
@@ -27,7 +27,9 @@ export default function ContactsHero() {
         .contacts-hero-bg-overlay {
           position: absolute !important;
           inset: 0 !important;
-          background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.95) 100%) !important;
+          /* Lighter wash so the red van / sunset stays vivid like the reference,
+             while keeping the centered heading readable. */
+          background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0.62) 100%) !important;
           z-index: 1 !important;
         }
 
@@ -70,27 +72,27 @@ export default function ContactsHero() {
           z-index: 2 !important;
         }
 
-        /* Glassmorphic Center Card */
+        /* Center content — card frame removed (no background, border, blur or
+           shadow); the text sits directly on the hero background. */
         .contacts-hero-glass-card {
           position: relative !important;
           z-index: 3 !important;
-          background: rgba(10, 10, 10, 0.55) !important;
-          backdrop-filter: blur(24px) saturate(180%) !important;
-          -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
-          border: 1px solid rgba(255, 255, 255, 0.08) !important;
-          border-radius: 30px !important;
-          padding: 60px 50px !important;
+          background: transparent !important;
+          backdrop-filter: none !important;
+          -webkit-backdrop-filter: none !important;
+          border: none !important;
+          border-radius: 0 !important;
+          padding: 0 16px !important;
           max-width: 820px !important;
           width: 90% !important;
-          box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
+          box-shadow: none !important;
           text-align: center !important;
-          transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease, border-color 0.6s ease !important;
         }
 
         .contacts-hero-glass-card:hover {
-          transform: translateY(-5px) scale(1.005) !important;
-          box-shadow: 0 45px 90px rgba(192, 18, 39, 0.14), 0 30px 60px rgba(0, 0, 0, 0.6) !important;
-          border-color: rgba(192, 18, 39, 0.3) !important;
+          transform: none !important;
+          box-shadow: none !important;
+          border-color: transparent !important;
         }
 
         /* Spaced kicker */
@@ -196,7 +198,7 @@ export default function ContactsHero() {
 
         @media (max-width: 768px) {
           .contacts-hero-glass-card {
-            padding: 40px 24px !important;
+            padding: 0 16px !important;
             width: 95% !important;
           }
         }
diff --git a/src/components/sections/EVLogisticSection.tsx b/src/components/sections/EVLogisticSection.tsx
index 246cc05..6ba311b 100644
--- a/src/components/sections/EVLogisticSection.tsx
+++ b/src/components/sections/EVLogisticSection.tsx
@@ -408,16 +408,19 @@ export default function EVLogisticSection() {
             margin-bottom: 60px;
           }
 
+          /* Base rules above use !important (flex-direction:row, the 58/42%
+             column widths), so these overrides MUST also use !important or the
+             grid never stacks and the image/text stay squished side-by-side. */
           .ev-logistic-body-grid {
-            flex-direction: column;
-            gap: 50px;
+            flex-direction: column !important;
+            gap: 50px !important;
           }
 
           .ev-logistic-image-col {
-            flex: 1 1 100%;
-            max-width: 100%;
-            min-height: auto;
-            justify-content: center; /* Center layout on mobile */
+            flex: 1 1 100% !important;
+            max-width: 100% !important;
+            min-height: auto !important;
+            justify-content: center !important; /* Center layout on mobile */
           }
 
           .ev-logistic-image-wrapper {
@@ -428,8 +431,8 @@ export default function EVLogisticSection() {
           }
 
           .ev-logistic-content-col {
-            flex: 1 1 100%;
-            max-width: 100%;
+            flex: 1 1 100% !important;
+            max-width: 100% !important;
           }
 
           .ev-logistic-title {
diff --git a/src/components/sections/EVSection.tsx b/src/components/sections/EVSection.tsx
index a3f91ad..731f20c 100644
--- a/src/components/sections/EVSection.tsx
+++ b/src/components/sections/EVSection.tsx
@@ -302,7 +302,7 @@ export default function EVSection() {
         .evnd-feature {
             position: relative;
             display: grid;
-            grid-template-columns: 48px 1fr auto;
+            grid-template-columns: 48px minmax(0, 1fr) auto;
             gap: 20px;
             align-items: start;
             background: rgba(255,255,255,0.02);
@@ -312,6 +312,7 @@ export default function EVSection() {
             overflow: hidden;
             transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(.25,1,.5,1);
         }
+        .evnd-feature__body { min-width: 0; }
         .evnd-feature::before {
             content: '';
             position: absolute;
@@ -441,6 +442,19 @@ export default function EVSection() {
             .evnd__bar-item::after { display: none !important; }
             .evnd__badge { padding: 8px 12px; }
             .evnd__badge b { font-size: 20px; }
+
+            /* feature cards: tighter, no overflow, more room for text */
+            .evnd-feature {
+                grid-template-columns: 40px minmax(0, 1fr);
+                gap: 14px;
+                padding: 18px 16px;
+            }
+            .evnd-feature__icon-container { width: 40px; height: 40px; border-radius: 10px; }
+            .evnd-icon { width: 20px; height: 20px; }
+            .evnd-feature__title { font-size: 14px !important; letter-spacing: 0.03em; margin: 2px 0 6px; padding-right: 22px; }
+            .evnd-feature__desc { font-size: 13px !important; line-height: 1.55 !important; }
+            /* arrow occupies its own slot to the right of the icon, no extra column */
+            .evnd-feature__arrow { position: absolute; top: 16px; right: 16px; margin: 0; }
         }
       `}} />
 
diff --git a/src/components/sections/HowItWorksHero.tsx b/src/components/sections/HowItWorksHero.tsx
index 84d1146..cd5af4e 100644
--- a/src/components/sections/HowItWorksHero.tsx
+++ b/src/components/sections/HowItWorksHero.tsx
@@ -57,6 +57,10 @@ export default function HowItWorksHero() {
             width: 100% !important;
             max-width: 1000px !important;
             margin: 0 auto !important;
+            /* site.css gives the inner content-box sizing + 20px padding,
+               which makes it 40px wider than its parent and overflows.
+               Force border-box so width:100% actually fits. */
+            box-sizing: border-box !important;
         }
 
         .elementor-element.elementor-element-6c7cbcb .content-slider-item-heading,
@@ -110,6 +114,12 @@ export default function HowItWorksHero() {
                 border-radius: 25px !important;
             }
 
+            /* Collapse the stage-outer to the slide height so no empty
+               black space is left below the hero card on mobile/tablet. */
+            .elementor-element.elementor-element-6c7cbcb .owl-stage-outer {
+                height: 620px !important;
+            }
+
             .elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
                 width: 100% !important;
                 min-height: 620px !important;
@@ -133,24 +143,81 @@ export default function HowItWorksHero() {
                 border-radius: 22px !important;
             }
 
+            .elementor-element.elementor-element-6c7cbcb .owl-stage-outer {
+                height: 560px !important;
+            }
+
             .elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
                 min-height: 560px !important;
                 height: 560px !important;
                 border-radius: 22px !important;
             }
 
-            .elementor-element.elementor-element-6c7cbcb .slide-content {
+            /* Center BOTH slides' content. Use the .elementor prefix +
+               repeater-item classes so these beat the per-slide rules in
+               site.css (slide 1 has no centering there; slide 2 carries an
+               asymmetric top margin). */
+            .elementor .elementor-element.elementor-element-6c7cbcb .slide-content {
                 min-height: 560px !important;
                 padding-left: 22px !important;
                 padding-right: 22px !important;
+                align-items: center !important;
+                justify-content: center !important;
+                text-align: center !important;
             }
 
-            .elementor-element.elementor-element-6c7cbcb .content-slider-item-heading {
+            .elementor .elementor-element.elementor-element-6c7cbcb .elementor-repeater-item-3264830 .slide-content-inner,
+            .elementor .elementor-element.elementor-element-6c7cbcb .elementor-repeater-item-6867061 .slide-content-inner {
+                margin: 0 auto !important;
+                width: 100% !important;
                 max-width: 100% !important;
-                font-size: clamp(38px, 11vw, 48px) !important;
-                line-height: 1.05 !important;
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+                box-sizing: border-box !important;
+                align-items: center !important;
+                text-align: center !important;
+            }
+
+            .elementor .elementor-element.elementor-element-6c7cbcb .content-slider-item-heading,
+            .elementor .elementor-element.elementor-element-6c7cbcb .content-slider-item-text,
+            .elementor .elementor-element.elementor-element-6c7cbcb .text-content {
+                text-align: center !important;
+                margin-left: auto !important;
+                margin-right: auto !important;
+            }
+
+            /* Smaller, fitting heading so it never overflows the card edge.
+               site.css forced clamp(38px,11vw,48px) which clipped at 320px. */
+            .elementor .elementor-element.elementor-element-6c7cbcb .elementor-repeater-item-3264830 .content-slider-item-heading,
+            .elementor .elementor-element.elementor-element-6c7cbcb .elementor-repeater-item-6867061 .content-slider-item-heading {
+                max-width: 100% !important;
+                font-size: clamp(26px, 8vw, 34px) !important;
+                line-height: 1.12 !important;
                 overflow-wrap: break-word !important;
             }
+
+            /* Slide counter ("01/02"): keep it bottom-RIGHT, aligned with the
+               hero text padding (22px) and lifted cleanly off the edge. */
+            .elementor .elementor-element.elementor-element-6c7cbcb .slider-footer {
+                text-align: right !important;
+                margin-bottom: 24px !important;
+            }
+            .elementor .elementor-element.elementor-element-6c7cbcb .slider-footer .slider-pagination {
+                justify-content: flex-end !important;
+                margin-left: 22px !important;
+                margin-right: 22px !important;
+            }
+            /* The wide dot navigation eats the right side and shoves "01/02" to
+               the centre. Hide it on mobile (matching the home hero) so the
+               counter sits cleanly on the right. */
+            .elementor .elementor-element.elementor-element-6c7cbcb .owl-dots {
+                display: none !important;
+            }
+            /* Hide the prev/next arrows on mobile (they overlap the counter) —
+               slides still auto-rotate, matching the home hero. */
+            .elementor .elementor-element.elementor-element-6c7cbcb .owl-nav {
+                display: none !important;
+            }
         }
       `}} />
 
@@ -226,14 +293,45 @@ export default function HowItWorksHero() {
                       </div>
                     </div>
 
+                    {/* Navigation controls (prev/next) — matches the home hero slider */}
+                    <div className="owl-nav">
+                      <button
+                        type="button"
+                        className="owl-next"
+                        onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
+                        aria-label="Next"
+                        style={{ cursor: "pointer", border: "none", outline: "none" }}
+                      />
+                      <button
+                        type="button"
+                        className="owl-prev"
+                        onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
+                        aria-label="Previous"
+                        style={{ cursor: "pointer", border: "none", outline: "none" }}
+                      />
+                    </div>
+
                     {/* Progress indicators */}
                     <div className="slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-inside">
                       <div className="slider-footer-content">
                         <div className="slider-pagination" style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "10px" }}>
-                          <div className="slider-progress-wrapper" style={{ marginRight: "15px" }}>
-                            <span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
-                            /
-                            <span className="slider-progress-all">02</span>
+                          <div className="slider-progress-wrapper" style={{ marginRight: "15px", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
+                            <div style={{ marginBottom: "4px" }}>
+                              <span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
+                              {" / "}
+                              <span className="slider-progress-all" style={{ opacity: 0.6 }}>02</span>
+                            </div>
+                            {/* Progress line — red bar slides to match the active slide (mirrors the home hero) */}
+                            <div style={{ width: "80px", height: "2px", background: "rgba(255, 255, 255, 0.2)", position: "relative", borderRadius: "1px", overflow: "hidden" }}>
+                              <div style={{
+                                position: "absolute",
+                                left: activeSlide === 0 ? "0" : "50%",
+                                width: "50%",
+                                height: "100%",
+                                background: "#c01227",
+                                transition: "left 0.3s ease"
+                              }} />
+                            </div>
                           </div>
                           <div className="owl-dots owl-dots-6c7cbcb" style={{ display: "flex", gap: "8px" }}>
                             <button 
diff --git a/src/components/sections/IndexHero.tsx b/src/components/sections/IndexHero.tsx
index af50110..c259678 100644
--- a/src/components/sections/IndexHero.tsx
+++ b/src/components/sections/IndexHero.tsx
@@ -128,6 +128,30 @@ export default function IndexHero() {
             font-size: clamp(20px, 7vw, 32px) !important;
           }
         }
+
+        /* Slide counter ("01/02" + progress line): site.css pushes it ~80px in
+           from the right and only 9px off the bottom on mobile, so it sits in an
+           awkward spot. Pin it cleanly to the bottom-right with even padding. */
+        @media (max-width: 767px) {
+          .elementor-61 .elementor-element.elementor-element-6c7cbcb .slider-footer {
+            text-align: right !important;
+            margin-bottom: 24px !important;
+          }
+          .elementor-61 .elementor-element.elementor-element-6c7cbcb .slider-footer .slider-pagination {
+            justify-content: flex-end !important;
+            margin-left: 22px !important;
+            margin-right: 22px !important;
+          }
+          .elementor-61 .elementor-element.elementor-element-6c7cbcb .slider-progress-wrapper {
+            margin-right: 0 !important;
+          }
+          /* The prev/next arrows sit in the bottom-right corner and overlap the
+             counter once it's pinned right. Hide them on mobile — slides
+             auto-rotate and the counter shows progress. */
+          .elementor-61 .elementor-element.elementor-element-6c7cbcb .owl-nav {
+            display: none !important;
+          }
+        }
       `}} />
       <div className="elementor-element elementor-element-6c7cbcb elementor-widget elementor-widget-logico_content_slider" data-id="6c7cbcb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_content_slider.default">
         <div className="elementor-widget-container">
diff --git a/src/components/sections/IndustryStack.tsx b/src/components/sections/IndustryStack.tsx
index 72b3cfe..eed5e9d 100644
--- a/src/components/sections/IndustryStack.tsx
+++ b/src/components/sections/IndustryStack.tsx
@@ -305,6 +305,17 @@ const CSS = `
   #ind-stack .istk__media { flex: none; min-height: 0; height: 300px; }
   #ind-stack .istk__content { max-width: none; }
 }
+@media (max-width: 600px) {
+  #ind-stack .istk { padding: 10px 14px; }
+  #ind-stack .istk__card { padding: 22px 20px; border-radius: 24px; }
+  #ind-stack .istk__media { height: 240px; }
+  #ind-stack .istk__title { margin-bottom: 16px !important; }
+  #ind-stack .istk__desc { margin: 0 0 24px; }
+  /* Two equal-width pills that always fit the card — no horizontal overflow. */
+  #ind-stack .istk__tabs { gap: 8px; margin-bottom: 22px; }
+  #ind-stack .istk__tab { flex: 1 1 0; min-width: 0; padding: 12px 8px; text-align: center; font-size: 13px; }
+  #ind-stack .istk__list li { margin-bottom: 18px; }
+}
 @media (prefers-reduced-motion: reduce) {
   #ind-stack .istk__list li { animation: none !important; opacity: 1; transform: none; }
 }
diff --git a/src/components/sections/IntelligenceGrid.tsx b/src/components/sections/IntelligenceGrid.tsx
index 2eca7b3..88f9b2a 100644
--- a/src/components/sections/IntelligenceGrid.tsx
+++ b/src/components/sections/IntelligenceGrid.tsx
@@ -712,24 +712,91 @@ export default function IntelligenceGrid() {
 
           @media (max-width: 768px) {
             .roadmap-hero-section {
-              width: calc(100% - 40px); /* keep the 20px site-standard band gutter */
-              padding: 60px 16px;
-            }
-
-            .roadmap-grid-container {
-              grid-template-columns: 1fr; 
-              gap: 16px;
+              width: calc(100% - 24px); /* tighter 12px gutter so the band reads edge-to-edge on phones */
+              padding: 52px 16px 44px;
+              border-radius: 22px;
             }
+            .vision-main-subtitle { margin-bottom: 40px !important; }
 
+            /* Progress header → compact, centered summary card */
             .roadmap-track-container {
               flex-direction: column;
-              align-items: flex-start;
-              gap: 20px;
+              align-items: center;
+              text-align: center;
+              gap: 16px;
+              padding: 20px 18px;
+              margin-bottom: 36px;
             }
+            .roadmap-track-label { font-size: 12px; letter-spacing: 1.5px; }
+            .timeline-horizontal-wrapper { width: 100%; }
+            .roadmap-complete-pct-container { justify-content: center; }
 
-            .timeline-horizontal-wrapper {
-              width: 100%;
+            /* ── Vertical timeline: the four stacked cards become a connected
+               journey (2026 → 2030) with a coloured rail + phase node dots. ── */
+            .roadmap-grid-container {
+              grid-template-columns: 1fr;
+              gap: 18px;
+              position: relative;
+              padding-left: 32px;
             }
+            .roadmap-grid-container::before {
+              content: '';
+              position: absolute;
+              left: 6px;
+              top: 16px;
+              bottom: 16px;
+              width: 2px;
+              border-radius: 2px;
+              background: linear-gradient(180deg, #eab308 0%, #22c55e 34%, #3b82f6 67%, #C8102E 100%);
+              opacity: 0.55;
+            }
+            .roadmap-col-card { padding: 24px 22px; }
+            /* node dot sits on the rail, aligned with the year number */
+            .roadmap-col-card::before {
+              content: '';
+              position: absolute;
+              left: -32px;
+              top: 28px;
+              width: 14px;
+              height: 14px;
+              border-radius: 50%;
+              background: #09090b;
+              border: 2px solid #C8102E;
+              box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(200, 16, 46, 0.7);
+              z-index: 3;
+            }
+            .roadmap-col-card[data-card="2026"]::before {
+              border-color: #eab308;
+              box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(234, 179, 8, 0.6);
+            }
+            .roadmap-col-card[data-card="2027"]::before {
+              border-color: #22c55e;
+              box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(34, 197, 94, 0.6);
+            }
+            .roadmap-col-card[data-card="2028"]::before {
+              border-color: #3b82f6;
+              box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(59, 130, 246, 0.6);
+            }
+            .roadmap-col-card[data-card="2030"]::before {
+              border-color: #ffffff;
+              background: #C8102E;
+              box-shadow: 0 0 0 4px #09090b, 0 0 16px rgba(200, 16, 46, 0.9);
+            }
+            /* the 2030 card's sweeping border (::after) would sit over the rail
+               gutter — keep it from bleeding past the card's rounded edge */
+            .glowing-vision-card::after { inset: -1px; }
+          }
+
+          @media (max-width: 480px) {
+            .roadmap-hero-section { padding: 44px 14px 38px; }
+            .roadmap-hero-section .intelligence-grid-title { font-size: clamp(28px, 8.4vw, 38px) !important; letter-spacing: -1px !important; }
+            .roadmap-grid-container { padding-left: 28px; }
+            .roadmap-grid-container::before { left: 5px; }
+            .roadmap-col-card { padding: 22px 18px; }
+            .roadmap-col-card::before { left: -28px; top: 26px; }
+            .year-num { font-size: 23px; }
+            .card-heading { font-size: 16px; }
+            .card-text { font-size: 13px; }
           }
         `}} />
 
@@ -809,9 +876,10 @@ export default function IntelligenceGrid() {
               const is2030 = card.year === 2030;
               const isActive = activeYear === card.year;
               return (
-                <div 
+                <div
                   key={card.year}
                   onMouseEnter={() => setActiveYear(card.year)}
+                  onClick={() => setActiveYear(card.year)}
                   className={`roadmap-col-card ${is2030 ? "glowing-vision-card" : ""} ${isActive ? "active" : ""}`}
                   data-card={card.year}
                 >
diff --git a/src/components/sections/MileTruthHero.tsx b/src/components/sections/MileTruthHero.tsx
index 4a972cf..ad80783 100644
--- a/src/components/sections/MileTruthHero.tsx
+++ b/src/components/sections/MileTruthHero.tsx
@@ -116,6 +116,14 @@ export default function MileTruthHero() {
           padding: 0 40px !important;
           box-sizing: border-box !important;
         }
+        .miletruth-hero .slide-content,
+        .miletruth-hero .slide-content-inner {
+          /* These carry inherited 20px padding from the slider theme with
+             content-box sizing, so width:100% + padding overflowed the viewport
+             by ~40px and pushed the hero off-center. Force border-box so the
+             padding is contained and the block stays centered. */
+          box-sizing: border-box !important;
+        }
         .miletruth-hero .slide-content-inner {
           display: flex !important;
           flex-direction: column !important;
@@ -284,17 +292,33 @@ export default function MileTruthHero() {
           .miletruth-hero .elementor-element-86f3204 {
             padding: 0 12px;
           }
+          /* Collapse the nested horizontal padding (was 40px + 40px on top of the
+             12px wrapper) — at 320px that left only ~136px for text and the long
+             heading words overflowed, causing horizontal scroll + off-center look. */
+          .miletruth-content {
+            padding: 0 14px !important;
+          }
+          .miletruth-hero .slide-content {
+            padding: 0 !important;
+          }
           .miletruth-hero .elementor-element-8e5c81e {
             padding: 30px 0 !important;
             border-radius: 20px !important;
           }
+          .miletruth-hero .elementor-element-8e5c81e > .e-con-inner {
+            padding: 0 20px !important;
+          }
           .miletruth-hero .elementor-element-628123a {
             grid-template-columns: 1fr !important;
             gap: 36px !important;
           }
           .miletruth-hero .content-slider-item-heading,
           .miletruth-hero .content-slider-item-heading .heading-content {
-            font-size: 32px !important;
+            font-size: clamp(26px, 8vw, 32px) !important;
+            letter-spacing: -0.5px !important;
+            /* never let a single long word push past the viewport */
+            overflow-wrap: break-word;
+            word-break: break-word;
           }
         }
       `}} />
diff --git a/src/components/sections/Miles3.tsx b/src/components/sections/Miles3.tsx
index 70b5d1c..d3d4122 100644
--- a/src/components/sections/Miles3.tsx
+++ b/src/components/sections/Miles3.tsx
@@ -98,6 +98,11 @@ export default function Miles3() {
            while keeping the 70px row-gap. */
         .elementor-element-4add972 {
           display: grid;
+          /* Elementor's ".e-con.e-grid" (specificity 0,2,0) sets grid-template-columns
+             from this CSS var, which OUT-RANKS a plain ".elementor-element-4add972"
+             (0,1,0) rule — so the responsive breakpoints below MUST drive the var,
+             not grid-template-columns directly, or the grid never collapses on mobile. */
+          --e-con-grid-template-columns: repeat(3, 1fr);
           grid-template-columns: repeat(3, 1fr);
           grid-auto-flow: row;
           gap: 70px 60px;
@@ -165,15 +170,15 @@ export default function Miles3() {
           .logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(40px, 5vw, 60px); }
         }
         @media (max-width: 1020px) {
-          .elementor-element-c36a604 { margin: 15px 15px 0 15px; padding: 76px 0 0 0; }
+          .elementor-element-c36a604 { margin: 15px 15px 0 15px; padding: 76px 0 60px 0; }
           .elementor-element-77d1265 { padding: 0 30px; }
-          .elementor-element-4add972 { grid-template-columns: repeat(2, 1fr); gap: 50px 40px; }
+          .elementor-element-4add972 { --e-con-grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); gap: 50px 40px; }
           .logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(34px, 6vw, 52px); }
         }
         @media (max-width: 480px) {
-          .elementor-element-c36a604 { margin: 12px 12px 0 12px; border-radius: 20px 20px 0 0; padding: 70px 0 0 0; }
+          .elementor-element-c36a604 { margin: 12px 12px 0 12px; border-radius: 20px 20px 0 0; padding: 70px 0 50px 0; }
           .elementor-element-77d1265 { padding: 0 22px; }
-          .elementor-element-4add972 { grid-template-columns: 1fr; gap: 56px; }
+          .elementor-element-4add972 { --e-con-grid-template-columns: 1fr; grid-template-columns: 1fr; gap: 56px; }
           .logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(30px, 9vw, 44px); }
         }
       `}} />
diff --git a/src/components/sections/SolutionsHero.tsx b/src/components/sections/SolutionsHero.tsx
index 3348bfe..f31f09d 100644
--- a/src/components/sections/SolutionsHero.tsx
+++ b/src/components/sections/SolutionsHero.tsx
@@ -57,6 +57,10 @@ export default function SolutionsHero() {
             width: 100% !important;
             max-width: 1000px !important;
             margin: 0 auto !important;
+            /* Contain the slider theme's inherited 20px padding (content-box) so
+               width:100% + padding doesn't overflow the viewport and push the
+               heading off-center on mobile. */
+            box-sizing: border-box !important;
         }
 
         .elementor-element.elementor-element-6c7cbcb .content-slider-item-heading,
@@ -110,6 +114,12 @@ export default function SolutionsHero() {
                 border-radius: 25px !important;
             }
 
+            /* The stage-outer carries an inline height:800px; collapse it to the
+               slide height so there is no dead empty space below the hero card. */
+            .elementor-element.elementor-element-6c7cbcb .owl-stage-outer {
+                height: 620px !important;
+            }
+
             .elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
                 width: 100% !important;
                 min-height: 620px !important;
@@ -133,6 +143,10 @@ export default function SolutionsHero() {
                 border-radius: 22px !important;
             }
 
+            .elementor-element.elementor-element-6c7cbcb .owl-stage-outer {
+                height: 560px !important;
+            }
+
             .elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
                 min-height: 560px !important;
                 height: 560px !important;
@@ -151,6 +165,28 @@ export default function SolutionsHero() {
                 line-height: 1.05 !important;
                 overflow-wrap: break-word !important;
             }
+
+            /* Pin the slide counter ("01/02") cleanly bottom-RIGHT — matching the
+               Home and How-It-Works heroes. site.css parks it ~80px in from the
+               right (looks left/centred), and the wide dot navigation eats the
+               right side, so hide the dots on mobile and right-align the counter. */
+            .elementor .elementor-element.elementor-element-6c7cbcb .slider-footer {
+                text-align: right !important;
+                margin-bottom: 24px !important;
+            }
+            .elementor .elementor-element.elementor-element-6c7cbcb .slider-footer .slider-pagination {
+                justify-content: flex-end !important;
+                margin-left: 22px !important;
+                margin-right: 22px !important;
+            }
+            .elementor .elementor-element.elementor-element-6c7cbcb .owl-dots {
+                display: none !important;
+            }
+            /* Hide the prev/next arrows on mobile (they overlap the counter) —
+               slides still auto-rotate, matching the home hero. */
+            .elementor .elementor-element.elementor-element-6c7cbcb .owl-nav {
+                display: none !important;
+            }
         }
       `}} />
 
@@ -226,14 +262,45 @@ export default function SolutionsHero() {
                       </div>
                     </div>
 
+                    {/* Navigation controls (prev/next) — matches the home hero slider */}
+                    <div className="owl-nav">
+                      <button
+                        type="button"
+                        className="owl-next"
+                        onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
+                        aria-label="Next"
+                        style={{ cursor: "pointer", border: "none", outline: "none" }}
+                      />
+                      <button
+                        type="button"
+                        className="owl-prev"
+                        onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
+                        aria-label="Previous"
+                        style={{ cursor: "pointer", border: "none", outline: "none" }}
+                      />
+                    </div>
+
                     {/* Progress indicators */}
                     <div className="slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-inside">
                       <div className="slider-footer-content">
                         <div className="slider-pagination" style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "10px" }}>
-                          <div className="slider-progress-wrapper" style={{ marginRight: "15px" }}>
-                            <span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
-                            /
-                            <span className="slider-progress-all">02</span>
+                          <div className="slider-progress-wrapper" style={{ marginRight: "15px", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
+                            <div style={{ marginBottom: "4px" }}>
+                              <span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
+                              {" / "}
+                              <span className="slider-progress-all" style={{ opacity: 0.6 }}>02</span>
+                            </div>
+                            {/* Progress line — red bar slides to match the active slide (mirrors the home hero) */}
+                            <div style={{ width: "80px", height: "2px", background: "rgba(255, 255, 255, 0.2)", position: "relative", borderRadius: "1px", overflow: "hidden" }}>
+                              <div style={{
+                                position: "absolute",
+                                left: activeSlide === 0 ? "0" : "50%",
+                                width: "50%",
+                                height: "100%",
+                                background: "#c01227",
+                                transition: "left 0.3s ease"
+                              }} />
+                            </div>
                           </div>
                           <div className="owl-dots owl-dots-6c7cbcb" style={{ display: "flex", gap: "8px" }}>
                             <button 
diff --git a/src/components/sections/WhyChooseDoormile.tsx b/src/components/sections/WhyChooseDoormile.tsx
index 3dd6832..c47556d 100644
--- a/src/components/sections/WhyChooseDoormile.tsx
+++ b/src/components/sections/WhyChooseDoormile.tsx
@@ -229,14 +229,18 @@ export default function WhyChooseDoormile() {
         }
 
          @media (max-width: 1020px) {
-          .wcd-section { margin: -150px 15px 15px 15px; padding: 40px 0 80px; }
+          /* No pull-up overlap on mobile/tablet: the Miles3 cards stack into a
+             1–2 col layout, so a negative margin-top covers the last card's
+             text. Both sections share #1F1F1F + equal side margins, so butting
+             them at margin-top:0 keeps the seamless dark panel. */
+          .wcd-section { margin: 0 15px 15px 15px; padding: 40px 0 80px; }
           .wcd-inner { padding: 0 30px; }
           .wcd-grid { grid-template-columns: 1fr; gap: 24px; }
           .wcd-card-body { padding: 32px; }
           .logico-front-end .wcd-section h3.wcd-card-title { font-size: 28px; }
         }
         @media (max-width: 480px) {
-          .wcd-section { margin: -100px 12px 12px 12px; border-radius: 0 0 20px 20px; padding: 30px 0 64px; }
+          .wcd-section { margin: 0 12px 12px 12px; border-radius: 0 0 20px 20px; padding: 30px 0 64px; }
           .wcd-inner { padding: 0 20px; }
           .wcd-card-body { padding: 24px; }
         }
diff --git a/src/components/sections/WomenSection.tsx b/src/components/sections/WomenSection.tsx
index 82848d6..9ae1952 100644
--- a/src/components/sections/WomenSection.tsx
+++ b/src/components/sections/WomenSection.tsx
@@ -179,6 +179,21 @@ export default function WomenSection() {
             white-space: nowrap !important;
         }
 
+        /* The banner image (bg-header-women.png) is very wide (≈2.48:1) and the
+           woman — the subject of this section — sits on the right. On narrow
+           screens "cover" center-crops her out, so shift the focal point right
+           to keep her face in frame. */
+        @media (max-width: 1024px) {
+            .elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
+                background-position: 78% center !important;
+            }
+        }
+        @media (max-width: 600px) {
+            .elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
+                background-position: 82% center !important;
+            }
+        }
+
         /* Stack the two columns below the desktop breakpoint so the box group
            always gets full width and stays centered — never clipped. */
         @media (max-width: 1024px) {
@@ -187,11 +202,46 @@ export default function WomenSection() {
             }
             .elementor-element.elementor-element-2ed47f3 { grid-template-columns: 1fr !important; }
             #ws-stories { max-width: 640px; margin: 0 auto; }
+            /* Align the heading, image and stats/cards to one shared left/right
+               edge — the heading + image widgets carried extra inset that left
+               them staggered (80px / 70px / 60px) against the stats column. */
+            #women-entrepreneurship .elementor-element-36efec7,
+            #women-entrepreneurship .elementor-element-b2c956f {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+            }
+            #women-entrepreneurship .elementor-element-778840d,
+            #women-entrepreneurship .elementor-element-bbfb67f,
+            #women-entrepreneurship .elementor-element-778840d > .elementor-widget-container,
+            #women-entrepreneurship .elementor-element-bbfb67f > .elementor-widget-container {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+                margin-left: 0 !important;
+                margin-right: 0 !important;
+            }
         }
         @media (max-width: 600px) {
-            #ws-stories .ws__stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
-            #ws-stories .ws__stat { padding: 14px 10px; }
-            #ws-stories .ws__stat-label { font-size: 11px !important; letter-spacing: 0.02em; }
+            /* KPI stat cards stack one-per-row on mobile. Inside each card the big
+               number sits on the left and the label on the right, vertically
+               centered, so every stat reads as a clean full-width row instead of
+               three cramped columns. */
+            #ws-stories .ws__stats { grid-template-columns: 1fr; gap: 12px; }
+            #ws-stories .ws__stat {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                gap: 16px;
+                padding: 20px 22px;
+                min-width: 0;
+            }
+            #ws-stories .ws__stat-num { font-size: clamp(30px, 9vw, 40px); }
+            #ws-stories .ws__stat-label {
+                margin-top: 0;
+                font-size: 13px !important;
+                letter-spacing: 0.02em;
+                text-align: right;
+                min-height: 0;
+            }
             #ws-stories .ws__cards { grid-template-columns: 1fr; }
         }
       `}} />
diff --git a/src/components/sections/Workflow3.tsx b/src/components/sections/Workflow3.tsx
index 62e9405..bb33e17 100644
--- a/src/components/sections/Workflow3.tsx
+++ b/src/components/sections/Workflow3.tsx
@@ -249,7 +249,8 @@ const styles = `
 }
 @media (max-width: 767px) {
   .dm-wf3-card {
-    margin: 0 10px 0;
+    /* Bottom gap separates this last workflow card from the contact section below. */
+    margin: 0 10px 16px;
     border-radius: 0 0 20px 20px;
     padding: 36px 28px;
     gap: 36px;
diff --git a/v.mjs b/v.mjs
new file mode 100644
index 0000000..1c990c3
--- /dev/null
+++ b/v.mjs
@@ -0,0 +1,22 @@
+import { chromium } from 'playwright-core';
+const exe = process.env.HOME + '/Library/Caches/ms-playwright/chromium-1223/chrome-mac-arm64/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing';
+const browser = await chromium.launch({ executablePath: exe });
+const page = await browser.newPage({ viewport: { width: 390, height: 760 }, deviceScaleFactor: 2 });
+// keep the loader on screen long enough: throttle nothing, just capture during initial window
+const resp = page.goto('http://localhost:3000/contact', { waitUntil: 'commit' }).catch(()=>{});
+// poll quickly for the loader + logo box while visible
+let measured = null;
+for (let i=0;i<40;i++){
+  try {
+    const m = await page.evaluate(()=>{
+      const loader=document.querySelector('.dm-loader'); const logo=document.querySelector('.dm-loader__logo');
+      if(!loader||!logo) return null;
+      const r=logo.getBoundingClientRect();
+      return { vw:innerWidth, logoLeft:Math.round(r.left), logoRight:Math.round(r.right), logoW:Math.round(r.width), centerOffset:Math.round((r.left+r.width/2)-(innerWidth/2)) };
+    });
+    if(m){ measured=m; if(i===2){ await page.screenshot({path:'/tmp/loader.png'}); } }
+  } catch(e){}
+  await page.waitForTimeout(40);
+}
+console.log(JSON.stringify(measured));
+await browser.close();