diff --git a/public/images/card 1.png b/public/images/card 1.png
new file mode 100644
index 0000000..7e7c9cf
Binary files /dev/null and b/public/images/card 1.png differ
diff --git a/public/images/card 2.png b/public/images/card 2.png
new file mode 100644
index 0000000..864f4d3
Binary files /dev/null and b/public/images/card 2.png differ
diff --git a/public/images/card 3.png b/public/images/card 3.png
new file mode 100644
index 0000000..ec145b8
Binary files /dev/null and b/public/images/card 3.png differ
diff --git a/public/images/card4.png b/public/images/card4.png
new file mode 100644
index 0000000..90e4dd2
Binary files /dev/null and b/public/images/card4.png differ
diff --git a/public/images/card5.png b/public/images/card5.png
new file mode 100644
index 0000000..39adac1
Binary files /dev/null and b/public/images/card5.png differ
diff --git a/public/images/card6.png b/public/images/card6.png
new file mode 100644
index 0000000..825ff3a
Binary files /dev/null and b/public/images/card6.png differ
diff --git a/public/videos/fleet.mp4 b/public/videos/fleet.mp4
new file mode 100644
index 0000000..dc8c334
Binary files /dev/null and b/public/videos/fleet.mp4 differ
diff --git a/src/app/globals.css b/src/app/globals.css
index c7b1fe5..0bd857c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -153,16 +153,21 @@ body {
   #masthead .elementor-element.elementor-element-0b7bf6f > .elementor-widget-container {
     padding: 0 42px !important;
     border-radius: 22px !important;
+    height: 58px !important;
+    display: flex !important;
+    align-items: center !important;
   }
 
   #masthead .elementor-element.elementor-element-0b7bf6f .header-menu-container .main-menu > li > a {
-    padding-top: 15px !important;
-    padding-bottom: 16px !important;
+    padding-top: 6px !important;
+    padding-bottom: 6px !important;
     padding-left: 14px !important;
     padding-right: 14px !important;
     font-size: 15px !important;
     line-height: 1.2 !important;
     white-space: nowrap !important;
+    min-height: auto !important;
+    height: auto !important;
   }
 
   #masthead .header-menu-container .main-menu {
@@ -966,18 +971,30 @@ body {
 
 /* ============================================================
    SHARED PAGE CONTENT CONTAINER
-   Mirrors the site's e-con-boxed > e-con-inner system: 1480px
-   max-width centred with fluid horizontal padding identical to the
-   Industry Solutions / OurTeam override above. Apply this class to
-   any section's inner container div to guarantee that content edges
-   line up with every other page section (Home, About, Solutions…).
+   Matches the Hero/Header/Footer's real rendered OUTER edge, not the
+   Footer's narrower inner text column. The Hero card
+   (.owl-stage-outer, via .wings-hero-page.elementor-element-741f56c)
+   and the Footer's outer band (.elementor-element-b29b8fc) both sit a
+   fixed, uncapped 20px in from the viewport edge at every desktop
+   width (verified 1280px-2400px — no max-width ever kicks in). Apply
+   this class to any Wings-page section's content wrapper to guarantee
+   its cards/timeline/grid hug those same edges instead of sitting
+   narrower and more centered.
    ============================================================ */
 .dm-section-container {
-  max-width: 1480px;
+  width: 100%;
   margin-left: auto;
   margin-right: auto;
   box-sizing: border-box;
-  width: 100%;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+@media (max-width: 1024px) {
+  .dm-section-container {
+    padding-left: var(--dm-mobile-gutter, 10px);
+    padding-right: var(--dm-mobile-gutter, 10px);
+  }
 }
 
 /* Doormile Wings hero frame: the generic vendor CSS assigns 32px padding to
@@ -1197,3 +1214,24 @@ body {
     margin-top: var(--space-section) !important;
   }
 }
+
+/* Global Desktop Hero Formatting (Matches live site) */
+@media (min-width: 1025px) {
+  /* Give every hero wrapper a consistent gap from the top and sides */
+  .elementor-element.elementor-element-741f56c,
+  .custom-standard-hero-container,
+  .miletruth-hero-container {
+    padding: 20px 24px !important;
+    margin-top: 8px !important;
+  }
+
+  /* Ensure all inner dark hero cards have elegant rounded corners */
+  .elementor-element.elementor-element-741f56c .owl-carousel.owl-theme .content-item,
+  .elementor-element.elementor-element-741f56c .content-item,
+  .custom-standard-hero-card,
+  .miletruth-hero .slide-content,
+  .miletruth-hero .miletruth-hero-container {
+    border-radius: 24px !important;
+    overflow: hidden !important;
+  }
+}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index c69e564..435c6c7 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -797,11 +797,13 @@ export default function Header() {
                     grid-template-columns: 1fr auto 1fr !important;
                     align-items: center !important;
                     column-gap: clamp(16px, 2vw, 32px) !important;
-                    /* Equal left/right safe areas pull the logo and Contact
-                       button inward off the viewport edges. Because the inset
-                       is symmetric, the 1fr side columns shrink equally and the
+                    /* Fixed 20px safe area on both sides — matches the Hero
+                       card and Footer's outer band exactly (both use a flat
+                       20px inset, uncapped, at every desktop width), so the
+                       header aligns with the rest of the page instead of
+                       drifting wider on large screens. Symmetric, so the
                        centred nav does not shift. */
-                    padding-inline: clamp(24px, 3vw, 48px) !important;
+                    padding-inline: 20px !important;
                     /* Consistent top/bottom breathing room inside the bar; with
                        align-items:center every section stays vertically centred. */
                     padding-block: clamp(8px, 1vw, 16px) !important;
@@ -833,9 +835,13 @@ export default function Header() {
                     align-items: center !important;
                 }
 
-                /* navbar-right: Contact button, aligned to the right edge. */
+                /* navbar-right: Contact button, aligned to the right edge.
+                   The vendor kit's own --margin-right:3% (site.css) would add
+                   extra drift off the grid's 20px safe area — zero it so the
+                   button's true right edge lands flush with that 20px inset. */
                 #masthead .elementor-element.elementor-element-f961133 {
                     justify-self: end !important;
+                    margin-right: 0 !important;
                 }
             }
 
diff --git a/src/components/sections/TheDoormileWay.module.css b/src/components/sections/TheDoormileWay.module.css
new file mode 100644
index 0000000..c4231f4
--- /dev/null
+++ b/src/components/sections/TheDoormileWay.module.css
@@ -0,0 +1,62 @@
+/* "The Doormile Way" — eyebrow + hairline divider + a huge display/graphic
+   headline (transparent fill, thin red stroke), composed as a poster-scale
+   typographic element rather than a plain large heading. Font, scale, and
+   line length are deliberately tuned to the reference composition, not
+   derived from a generic fluid-fill formula. */
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.kicker {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.eyebrow {
+  margin: 0 0 18px 0;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 2.5px;
+  text-transform: uppercase;
+  color: rgba(23, 20, 15, 0.6);
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  margin: 0 0 40px 0;
+  border: none;
+  background-color: rgba(23, 20, 15, 0.16);
+}
+
+.headingWrap {
+  width: 100%;
+}
+
+/* !important beats the sitewide `.elementor-kit-5 h2` rule
+   (public/css/site.css:48-56, specificity 0-1-1 > this single class). */
+.heading {
+  margin: 0;
+  max-width: 1220px;
+  font-family: var(--font-syne), "Syne", sans-serif !important;
+  font-weight: 800 !important;
+  font-style: normal !important;
+  letter-spacing: -0.03em !important;
+  line-height: 0.86 !important;
+  text-transform: none !important;
+  color: transparent !important;
+  -webkit-text-stroke: 2px #c01227;
+  font-size: clamp(72px, 14vw, 240px) !important;
+}
+
+@media (max-width: 640px) {
+  .heading {
+    -webkit-text-stroke-width: 1.5px;
+  }
+}
diff --git a/src/components/sections/TheDoormileWay.tsx b/src/components/sections/TheDoormileWay.tsx
index 23a1888..9d65455 100644
--- a/src/components/sections/TheDoormileWay.tsx
+++ b/src/components/sections/TheDoormileWay.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
+import styles from "./TheDoormileWay.module.css";
 
 export default function TheDoormileWay() {
   return (
@@ -10,29 +11,15 @@ export default function TheDoormileWay() {
       <div className="elementor-element elementor-element-88745f4 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="88745f4" data-element_type="container" data-e-type="container">
         <div className="e-con-inner">
           <div className="elementor-element elementor-element-343b363 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="343b363" data-element_type="container" data-e-type="container">
-            <ScrollReveal delay={0.05} duration={0.7} yOffset={20}>
-              <div className="elementor-element elementor-element-7afb238 elementor-widget elementor-widget-logico_heading" data-id="7afb238" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
-                <div className="elementor-widget-container">
-                  <div className="logico-title">/ Doormile Approach /</div>
-                </div>
-              </div>
-            </ScrollReveal>
-            <ScrollReveal delay={0.15} duration={0.85} yOffset={30}>
-              <div className="elementor-element elementor-element-1cc335a elementor-widget elementor-widget-logico_heading" data-id="1cc335a" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
-                <div className="elementor-widget-container">
-                  <div 
-                    className="logico-title"
-                    style={{
-                      WebkitTextStroke: "4px #c01227",
-                      color: "#fff",
-                      fontWeight: 800,
-                    }}
-                  >
-                    The Doormile Way
-                  </div>
-                </div>
-              </div>
-            </ScrollReveal>
+            <div className={styles.header}>
+              <ScrollReveal delay={0.05} duration={0.7} yOffset={20} className={styles.kicker}>
+                <p className={styles.eyebrow}>/ Doormile Approach /</p>
+                <hr className={styles.divider} />
+              </ScrollReveal>
+              <ScrollReveal delay={0.15} duration={0.85} yOffset={30} className={styles.headingWrap}>
+                <h2 className={styles.heading}>The Doormile Way</h2>
+              </ScrollReveal>
+            </div>
             <div className="elementor-element elementor-element-4c3e632 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="4c3e632" data-element_type="container" data-e-type="container">
               <ScrollReveal delay={0.2} duration={0.8} yOffset={25}>
                 <div className="elementor-element elementor-element-5ba6bbf e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5ba6bbf" data-element_type="container" data-e-type="container">
diff --git a/src/components/sections/WingsFeatureGrid.tsx b/src/components/sections/WingsFeatureGrid.tsx
index 34e8cae..2bbb972 100644
--- a/src/components/sections/WingsFeatureGrid.tsx
+++ b/src/components/sections/WingsFeatureGrid.tsx
@@ -54,7 +54,7 @@ export default function WingsFeatureGrid() {
           __html: `
         .wfg-section {
           background: #ffffff;
-          padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
+          padding: var(--space-section-lg, 80px) 0;
         }
 
         .wfg-header {
@@ -82,9 +82,12 @@ export default function WingsFeatureGrid() {
           margin: 0;
         }
 
-        .wfg-grid {
-          max-width: 1280px;
+        .wfg-inner {
+          max-width: 1380px;
           margin: 0 auto;
+        }
+
+        .wfg-grid {
           display: grid;
           grid-template-columns: repeat(4, minmax(0, 1fr));
           gap: 20px;
@@ -145,20 +148,24 @@ export default function WingsFeatureGrid() {
       />
 
       <section className="wfg-section" id="wings-features">
-        <ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wfg-header">
-          <div className="wfg-eyebrow">/ Why Businesses Choose Doormile Wings /</div>
-          <h2 className="wfg-title">Built to be depended on</h2>
-        </ScrollReveal>
+        <div className="dm-section-container">
+          <div className="wfg-inner">
+            <ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wfg-header">
+              <div className="wfg-eyebrow">/ Why Businesses Choose Doormile Wings /</div>
+              <h2 className="wfg-title">Built to be depended on</h2>
+            </ScrollReveal>
 
-        <StaggerChildren stagger={0.1} duration={0.7} yOffset={30} className="wfg-grid">
-          {FEATURES.map((f) => (
-            <div key={f.title} className="wfg-card">
-              <div className="wfg-icon" aria-hidden="true">{f.icon}</div>
-              <h3 className="wfg-card-title">{f.title}</h3>
-              <p className="wfg-card-desc">{f.desc}</p>
-            </div>
-          ))}
-        </StaggerChildren>
+            <StaggerChildren stagger={0.1} duration={0.7} yOffset={30} className="wfg-grid">
+              {FEATURES.map((f) => (
+                <div key={f.title} className="wfg-card">
+                  <div className="wfg-icon" aria-hidden="true">{f.icon}</div>
+                  <h3 className="wfg-card-title">{f.title}</h3>
+                  <p className="wfg-card-desc">{f.desc}</p>
+                </div>
+              ))}
+            </StaggerChildren>
+          </div>
+        </div>
       </section>
     </>
   );
diff --git a/src/components/sections/WingsFinalCTA.tsx b/src/components/sections/WingsFinalCTA.tsx
index 5642c7e..6015982 100644
--- a/src/components/sections/WingsFinalCTA.tsx
+++ b/src/components/sections/WingsFinalCTA.tsx
@@ -6,6 +6,15 @@ export default function WingsFinalCTA() {
       <style
         dangerouslySetInnerHTML={{
           __html: `
+        /* dm-section-container replaces the vendor .we-container class here
+           (which is otherwise reused verbatim on the About page CTA), so this
+           section's edges line up with the Footer's shared container instead
+           of that widget's own 1320px width. It carries no vertical margin,
+           so restore the same top spacing .we-container provided. */
+        .wfcta-container {
+          margin-top: 50px;
+        }
+
         .wfcta-box {
           position: relative;
           overflow: hidden;
@@ -68,7 +77,7 @@ export default function WingsFinalCTA() {
       `,
         }}
       />
-      <div className="we-container wfcta-container" id="wings-final-cta">
+      <div className="dm-section-container wfcta-container" id="wings-final-cta">
         <div className="we-cta wfcta-box">
           <div className="we-cta-inner">
             <h2 className="we-cta-title wfcta-title">
diff --git a/src/components/sections/WingsFleetStrategy.tsx b/src/components/sections/WingsFleetStrategy.tsx
index b220287..12e15d1 100644
--- a/src/components/sections/WingsFleetStrategy.tsx
+++ b/src/components/sections/WingsFleetStrategy.tsx
@@ -61,29 +61,29 @@ export default function WingsFleetStrategy() {
         metrics={METRICS}
         cardsHeading="FLEET SPECIFICATIONS"
         cardsTheme={{ accent: "#c8102e", accent2: "#ff6a3d", glow: "rgba(200,16,46,0.22)" }}
+        gapTop
+        gapBottom
         badges={[
           { value: "3", label: "Phase 1 Aircraft" },
           { value: "25", label: "Phase 2 Vision" },
         ]}
         mediaSlot={
-          <div
+          <video
+            autoPlay
+            loop
+            muted
+            playsInline
             style={{
               width: "100%",
               height: "100%",
               minHeight: 420,
-              background: "linear-gradient(150deg, #17171b 0%, #0b0b0d 100%)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
+              objectFit: "cover",
+              display: "block",
+              background: "#17171b"
             }}
-            aria-hidden="true"
           >
-            {/* Placeholder — swap for sourced ATR72/Q400 photography or a
-                designed illustration once available. */}
-            <svg width="88" height="88" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.15)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M22 12h-6l-4-9-2 1 3 8H5l-2-3-1.5.6L3 14l1.5 4.4L6 18l-2-3h8l3 8 2-1-3-8h6z" />
-            </svg>
-          </div>
+            <source src="/videos/fleet.mp4" type="video/mp4" />
+          </video>
         }
         ariaLabel="Doormile Wings fleet strategy"
       />
diff --git a/src/components/sections/WingsHero.tsx b/src/components/sections/WingsHero.tsx
index 13f1311..21660f0 100644
--- a/src/components/sections/WingsHero.tsx
+++ b/src/components/sections/WingsHero.tsx
@@ -36,23 +36,29 @@ export default function WingsHero() {
       return;
     }
 
-    gsap.fromTo(
-      heading,
-      { y: 55, opacity: 0, scale: 0.95 },
-      { y: 0, opacity: 1, scale: 1, duration: 1.1, ease: "power4.out" }
-    );
+    if (heading) {
+      gsap.fromTo(
+        heading,
+        { y: 55, opacity: 0, scale: 0.95 },
+        { y: 0, opacity: 1, scale: 1, duration: 1.1, ease: "power4.out" }
+      );
+    }
 
-    gsap.fromTo(
-      text,
-      { y: 30, opacity: 0 },
-      { y: 0, opacity: 1, duration: 0.95, ease: "power3.out", delay: 0.25 }
-    );
+    if (text) {
+      gsap.fromTo(
+        text,
+        { y: 30, opacity: 0 },
+        { y: 0, opacity: 1, duration: 0.95, ease: "power3.out", delay: 0.25 }
+      );
+    }
 
-    gsap.fromTo(
-      actions,
-      { y: 24, opacity: 0 },
-      { y: 0, opacity: 1, duration: 0.85, ease: "power3.out", delay: 0.38 }
-    );
+    if (actions) {
+      gsap.fromTo(
+        actions,
+        { y: 24, opacity: 0 },
+        { y: 0, opacity: 1, duration: 0.85, ease: "power3.out", delay: 0.38 }
+      );
+    }
   }, [activeSlide]);
 
   const handleDotClick = (index: number) => {
@@ -72,14 +78,14 @@ export default function WingsHero() {
           __html: `
         .wings-hero-bg.elementor-repeater-item-3264830,
         .wings-hero-bg.elementor-repeater-item-6867061 {
-          background-image: linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.16)), url('/images/wings-heroslider3.png') !important;
+          background-image: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.06)), url('/images/wings-heroslider3.png') !important;
           background-position: center !important;
           background-repeat: no-repeat !important;
           background-size: cover !important;
         }
 
         .wings-hero-bg.elementor-repeater-item-6867061 {
-          background-image: linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.16)), url('/images/wings-heroslide2.png') !important;
+          background-image: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.06)), url('/images/wings-heroslide2.png') !important;
         }
 
         #doormile-wings,
@@ -125,7 +131,7 @@ export default function WingsHero() {
           align-items: center !important;
           text-align: center !important;
           width: 100% !important;
-          max-width: 1040px !important;
+          max-width: 1000px !important;
           margin: 0 auto !important;
           box-sizing: border-box !important;
         }
@@ -157,7 +163,7 @@ export default function WingsHero() {
 
         .wings-hero-page .text-content {
           text-align: center !important;
-          max-width: 760px !important;
+          max-width: 680px !important;
           width: 100% !important;
           margin: 0 auto !important;
           padding-left: 15px !important;
@@ -222,12 +228,15 @@ export default function WingsHero() {
 
         @media (min-width: 1025px) {
           .wings-hero-page.elementor-element-741f56c {
-            padding: 20px !important;
+            padding: 20px 24px !important;
+            margin-top: 8px !important;
           }
 
           .wings-hero-page .owl-carousel.owl-theme .content-item {
             height: 800px !important;
             min-height: 800px !important;
+            border-radius: 24px !important;
+            overflow: hidden !important;
           }
         }
 
@@ -245,19 +254,19 @@ export default function WingsHero() {
           }
 
           .wings-hero-page .owl-stage-outer {
-            height: 620px !important;
+            height: 600px !important;
           }
 
           .wings-hero-page .owl-carousel.owl-theme .content-item {
             width: 100% !important;
-            min-height: 620px !important;
-            height: 620px !important;
+            min-height: 600px !important;
+            height: 600px !important;
             border-radius: 25px !important;
             overflow: hidden !important;
           }
 
           .wings-hero-page .slide-content {
-            min-height: 620px !important;
+            min-height: 600px !important;
             padding-left: 0 !important;
             padding-right: 0 !important;
           }
@@ -284,13 +293,13 @@ export default function WingsHero() {
           }
 
           .wings-hero-page .owl-stage-outer {
-            height: 560px !important;
+            height: 520px !important;
           }
 
           .wings-hero-page .owl-carousel.owl-theme .content-item,
           .wings-hero-page .slide-content {
-            min-height: 560px !important;
-            height: 560px !important;
+            min-height: 520px !important;
+            height: 520px !important;
             border-radius: 22px !important;
           }
 
@@ -303,7 +312,7 @@ export default function WingsHero() {
 
           .wings-hero-page .content-slider-item-heading {
             max-width: 100% !important;
-            font-size: clamp(24px, 7.2vw, 32px) !important;
+            font-size: clamp(20px, 7vw, 32px) !important;
             line-height: 1.12 !important;
           }
 
diff --git a/src/components/sections/WingsHowItWorks.module.css b/src/components/sections/WingsHowItWorks.module.css
new file mode 100644
index 0000000..3ecfd05
--- /dev/null
+++ b/src/components/sections/WingsHowItWorks.module.css
@@ -0,0 +1,264 @@
+/* Premium editorial "How It Works" — bright warm-white surface, huge uppercase
+   display headline, top-right slide counter, and a five-column process row
+   divided by hairlines with oversized outlined numerals pinned to the top and
+   copy pinned to the bottom, echoing a tall, breathing editorial layout. */
+
+.section {
+  background: linear-gradient(180deg, #fbfaf7 0%, #f5f2ec 100%);
+  padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 8vw, 120px);
+  margin-bottom: 40px;
+  margin-right: 24px;
+  margin-left: 24px;
+  border-radius: 30px;
+  position: relative;
+  overflow: hidden;
+}
+
+.sectionShell {
+  width: 100%;
+  max-width: 1420px;
+  margin: 0 auto;
+  padding: 0 5vw;
+  box-sizing: border-box;
+  position: relative;
+}
+
+@media (max-width: 1024px) {
+  .sectionShell {
+    padding: 0 24px;
+  }
+}
+
+/* ---------- Header: eyebrow + giant display headline, counter top-right ---------- */
+
+.headerRow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 32px;
+  margin-bottom: clamp(48px, 6vw, 88px);
+}
+
+.header {
+  text-align: left;
+  max-width: 780px;
+  margin: 0;
+}
+
+.eyebrow {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1.5px;
+  text-transform: lowercase;
+  color: rgba(20, 18, 15, 0.5);
+  margin-bottom: 22px;
+}
+
+.title {
+  font-size: clamp(32px, 4.6vw, 68px) !important;
+  font-weight: 800 !important;
+  letter-spacing: -0.01em !important;
+  line-height: 1.02 !important;
+  text-transform: uppercase !important;
+  color: #17140f !important;
+  margin: 0;
+}
+
+.progress {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
+  margin-top: 4px;
+}
+
+.progressCount {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  color: #17140f;
+  white-space: nowrap;
+}
+
+.progressTrack {
+  position: relative;
+  width: 110px;
+  height: 2px;
+  border-radius: 2px;
+  background: rgba(23, 20, 15, 0.12);
+  overflow: hidden;
+}
+
+.progressFill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: #c8102e;
+  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ---------- Process row: hairline-divided columns, numeral up top, copy at the bottom ---------- */
+
+.flow {
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+}
+
+.step {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: clamp(200px, 18vw, 260px);
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  padding: 0 32px;
+  border-left: 1px solid rgba(23, 20, 15, 0.14);
+  cursor: pointer;
+}
+
+.step:first-child {
+  padding-left: 0;
+  border-left: none;
+}
+
+.step:last-child {
+  padding-right: 0;
+}
+
+.step:focus-visible {
+  outline: 2px solid rgba(200, 16, 46, 0.55);
+  outline-offset: 8px;
+  border-radius: 4px;
+}
+
+.stepTop {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.stepNum {
+  font-size: clamp(44px, 5.1vw, 92px);
+  font-weight: 800;
+  line-height: 0.85;
+  letter-spacing: -0.02em;
+  color: transparent;
+  -webkit-text-stroke: 1.5px rgba(23, 20, 15, 0.22);
+  transition: -webkit-text-stroke-color 0.4s ease, filter 0.4s ease;
+}
+
+.stepActive .stepNum {
+  -webkit-text-stroke-color: #c8102e;
+  filter: drop-shadow(0 0 14px rgba(200, 16, 46, 0.18));
+}
+
+.stepTag {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: rgba(23, 20, 15, 0.4);
+  transition: color 0.4s ease;
+}
+
+.stepIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.stepActive .stepTag {
+  color: #c8102e;
+}
+
+.stepBottom {
+  align-self: end;
+  max-width: 280px;
+}
+
+.stepTitle {
+  font-size: 19px !important;
+  font-weight: 700 !important;
+  line-height: 1.3 !important;
+  text-transform: none !important;
+  color: #17140f !important;
+  margin: 0 0 10px 0 !important;
+}
+
+.stepDesc {
+  font-size: 13.5px;
+  line-height: 1.65;
+  color: rgba(23, 20, 15, 0.55);
+  margin: 0;
+}
+
+@media (max-width: 1024px) {
+  .headerRow {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 24px;
+  }
+
+  .progress {
+    align-items: flex-start;
+  }
+
+  .flow {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 40px 28px;
+  }
+
+  .step {
+    flex: none;
+    border-left: none;
+    padding: 0;
+    min-height: 0;
+    display: block;
+  }
+
+  .stepBottom {
+    max-width: none;
+    margin-top: 24px;
+  }
+
+  .step:nth-child(n + 3) {
+    border-top: 1px solid rgba(23, 20, 15, 0.14);
+    padding-top: 28px;
+  }
+
+  .flow > .step:last-child {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 600px) {
+  .flow {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .step {
+    padding: 28px 0;
+  }
+
+  .step:first-child {
+    padding-top: 0;
+  }
+
+  .step:not(:first-child) {
+    border-top: 1px solid rgba(23, 20, 15, 0.14);
+  }
+
+  .step:last-child {
+    padding-bottom: 0;
+  }
+}
diff --git a/src/components/sections/WingsHowItWorks.tsx b/src/components/sections/WingsHowItWorks.tsx
index e202af8..35d1b8b 100644
--- a/src/components/sections/WingsHowItWorks.tsx
+++ b/src/components/sections/WingsHowItWorks.tsx
@@ -1,14 +1,15 @@
 "use client";
 
 import { useState } from "react";
-import { ScrollReveal } from "@/animations/Reveal";
+import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
+import styles from "./WingsHowItWorks.module.css";
 
 const STEPS = [
   {
     label: "Local Pickup",
     desc: "Fast, on-demand first-mile logistics dispatched by electric vehicle.",
     icon: (
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
         <path d="M3 13h13l3 4h2v3H3z" />
         <circle cx="7" cy="20" r="1.6" />
         <circle cx="16" cy="20" r="1.6" />
@@ -20,7 +21,7 @@ const STEPS = [
     label: "Airport Clearance",
     desc: "Automated screening, grouping, and rapid cross-docking at the hub.",
     icon: (
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
         <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />
         <path d="m9 12 2 2 4-4" />
       </svg>
@@ -30,7 +31,7 @@ const STEPS = [
     label: "Air Transit",
     desc: "Optimized cargo flights bypass surface congestion on our regional fleet.",
     icon: (
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
         <path d="M22 12h-6l-4-9-2 1 3 8H5l-2-3-1.5.6L3 14l1.5 4.4L6 18l-2-3h8l3 8 2-1-3-8h6z" />
       </svg>
     ),
@@ -39,7 +40,7 @@ const STEPS = [
     label: "Destination Hub",
     desc: "Immediate de-consolidation and screening upon arrival.",
     icon: (
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
         <rect x="4" y="10" width="16" height="11" rx="1" />
         <path d="M9 21v-6h6v6M4 10 12 3l8 7" />
       </svg>
@@ -49,7 +50,7 @@ const STEPS = [
     label: "EV Last-Mile",
     desc: "Zero-emission electric vehicles complete the final delivery.",
     icon: (
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
         <path d="M3 13h13l3 4h2v3H3z" />
         <circle cx="7" cy="20" r="1.6" />
         <circle cx="16" cy="20" r="1.6" />
@@ -61,246 +62,63 @@ const STEPS = [
 
 export default function WingsHowItWorks() {
   const [active, setActive] = useState(0);
-  const fillPct = ((active + 1) / STEPS.length) * 100;
 
   return (
-    <>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-        .whw-section {
-          background: #09090b;
-          padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
-        }
+    <section className={styles.section} id="wings-how-it-works">
+      <div className={styles.sectionShell}>
+        <div className={styles.headerRow}>
+          <ScrollReveal delay={0.05} duration={0.75} yOffset={25} className={styles.header}>
+            <div className={styles.eyebrow}>/ How It Works /</div>
+            <h2 className={styles.title}>
+              Pickup to
+              <br />
+              delivery, one
+              <br />
+              connected flow
+            </h2>
+          </ScrollReveal>
 
-        .whw-header {
-          margin: 0 auto 56px auto;
-          max-width: 720px;
-          text-align: center;
-        }
-
-        .whw-eyebrow {
-          font-size: 13px;
-          font-weight: 700;
-          letter-spacing: 2px;
-          text-transform: uppercase;
-          color: #c8102e;
-          margin-bottom: 16px;
-        }
-
-        .whw-title {
-          font-size: clamp(28px, 3.2vw, 46px) !important;
-          font-weight: 800 !important;
-          letter-spacing: -0.03em !important;
-          line-height: 1.15 !important;
-          text-transform: none !important;
-          color: #ffffff !important;
-          margin: 0;
-        }
-
-        .whw-inner {
-          max-width: 1200px;
-          margin: 0 auto;
-        }
-
-        .whw-track-wrap {
-          position: relative;
-          height: 4px;
-          background: rgba(255, 255, 255, 0.08);
-          border-radius: 2px;
-          margin: 0 auto 44px auto;
-        }
-
-        .whw-track-fill {
-          position: absolute;
-          left: 0;
-          top: 0;
-          height: 100%;
-          background: #c8102e;
-          box-shadow: 0 0 10px #c8102e;
-          border-radius: 2px;
-          transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
-        }
-
-        .whw-nodes {
-          position: absolute;
-          inset: 0;
-        }
-
-        .whw-node {
-          position: absolute;
-          top: 50%;
-          transform: translate(-50%, -50%);
-          width: 12px;
-          height: 12px;
-          border-radius: 50%;
-          background: #18181b;
-          border: 2px solid rgba(255, 255, 255, 0.2);
-          transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
-        }
-
-        .whw-node.is-active {
-          background: #c8102e;
-          border-color: #ffffff;
-          box-shadow: 0 0 10px #c8102e;
-        }
-
-        .whw-steps {
-          display: grid;
-          grid-template-columns: repeat(5, minmax(0, 1fr));
-          gap: 20px;
-        }
-
-        .whw-step {
-          min-width: 0;
-          padding: 22px 18px;
-          border-radius: 16px;
-          border: 1px solid rgba(255, 255, 255, 0.06);
-          background: rgba(255, 255, 255, 0.02);
-          cursor: pointer;
-          transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
-        }
-
-        .whw-step.is-active {
-          border-color: rgba(200, 16, 46, 0.5);
-          background: rgba(200, 16, 46, 0.06);
-          transform: translateY(-4px);
-        }
-
-        .whw-step-num {
-          font-size: 12px;
-          font-weight: 800;
-          letter-spacing: 1px;
-          color: rgba(255, 255, 255, 0.35);
-          margin-bottom: 14px;
-        }
-
-        .whw-step.is-active .whw-step-num {
-          color: #c8102e;
-        }
-
-        .whw-step-icon {
-          width: 40px;
-          height: 40px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 10px;
-          background: rgba(255, 255, 255, 0.05);
-          color: rgba(255, 255, 255, 0.7);
-          margin-bottom: 14px;
-        }
-
-        .whw-step.is-active .whw-step-icon {
-          background: rgba(200, 16, 46, 0.15);
-          color: #ffffff;
-        }
-
-        .whw-step-label {
-          font-size: 15px !important;
-          font-weight: 700 !important;
-          line-height: 1.3 !important;
-          text-transform: none !important;
-          color: #ffffff !important;
-          margin: 0 0 6px 0;
-        }
-
-        .whw-step-desc {
-          font-size: 12.5px;
-          line-height: 1.5;
-          color: rgba(255, 255, 255, 0.5);
-          margin: 0;
-        }
-
-        @media (max-width: 767px) {
-          .whw-track-wrap { display: none; }
-
-          .whw-steps {
-            grid-template-columns: 1fr;
-            gap: 16px;
-            position: relative;
-            padding-left: 28px;
-          }
-
-          .whw-steps::before {
-            content: '';
-            position: absolute;
-            left: 5px;
-            top: 8px;
-            bottom: 8px;
-            width: 2px;
-            border-radius: 2px;
-            background: rgba(255, 255, 255, 0.12);
-          }
-
-          .whw-step {
-            position: relative;
-          }
-
-          .whw-step::before {
-            content: '';
-            position: absolute;
-            left: -27px;
-            top: 24px;
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background: #18181b;
-            border: 2px solid rgba(255, 255, 255, 0.2);
-          }
-
-          .whw-step.is-active::before {
-            background: #c8102e;
-            border-color: #ffffff;
-            box-shadow: 0 0 10px rgba(200, 16, 46, 0.7);
-          }
-        }
-      `,
-        }}
-      />
-
-      <section className="whw-section" id="wings-how-it-works">
-        <ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="whw-header">
-          <div className="whw-eyebrow">/ How It Works /</div>
-          <h2 className="whw-title">Pickup to delivery, one connected flow</h2>
-        </ScrollReveal>
-
-        <ScrollReveal delay={0.1} duration={0.8} yOffset={30} className="whw-inner">
-          <div className="whw-track-wrap" aria-hidden="true">
-            <div className="whw-track-fill" style={{ width: `${fillPct}%` }} />
-            <div className="whw-nodes">
-              {STEPS.map((_, i) => (
-                <div
-                  key={i}
-                  className={`whw-node${i <= active ? " is-active" : ""}`}
-                  style={{ left: `${((i + 0.5) / STEPS.length) * 100}%` }}
-                />
-              ))}
-            </div>
+          <div className={styles.progress} aria-hidden="true">
+            <span className={styles.progressCount}>
+              {String(active + 1).padStart(2, "0")} / {String(STEPS.length).padStart(2, "0")}
+            </span>
+            <span className={styles.progressTrack}>
+              <span
+                className={styles.progressFill}
+                style={{ width: `${((active + 1) / STEPS.length) * 100}%` }}
+              />
+            </span>
           </div>
+        </div>
 
-          <div className="whw-steps">
-            {STEPS.map((step, i) => (
-              <div
-                key={step.label}
-                className={`whw-step${i === active ? " is-active" : ""}`}
-                onMouseEnter={() => setActive(i)}
-                onClick={() => setActive(i)}
-                role="button"
-                tabIndex={0}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" || e.key === " ") setActive(i);
-                }}
-              >
-                <div className="whw-step-num">0{i + 1}</div>
-                <div className="whw-step-icon" aria-hidden="true">{step.icon}</div>
-                <h3 className="whw-step-label">{step.label}</h3>
-                <p className="whw-step-desc">{step.desc}</p>
+        <StaggerChildren stagger={0.06} duration={0.6} yOffset={24} className={styles.flow}>
+          {STEPS.map((step, i) => (
+            <div
+              key={step.label}
+              className={`${styles.step} ${i === active ? styles.stepActive : ""}`}
+              onMouseEnter={() => setActive(i)}
+              onClick={() => setActive(i)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") setActive(i);
+              }}
+            >
+              <div className={styles.stepTop}>
+                <span className={styles.stepNum}>{String(i + 1).padStart(2, "0")}</span>
+                <span className={styles.stepTag}>
+                  <span className={styles.stepIcon} aria-hidden="true">{step.icon}</span>
+                  Step
+                </span>
               </div>
-            ))}
-          </div>
-        </ScrollReveal>
-      </section>
-    </>
+              <div className={styles.stepBottom}>
+                <h3 className={styles.stepTitle}>{step.label}</h3>
+                <p className={styles.stepDesc}>{step.desc}</p>
+              </div>
+            </div>
+          ))}
+        </StaggerChildren>
+      </div>
+    </section>
   );
 }
diff --git a/src/components/sections/WingsIndustries.tsx b/src/components/sections/WingsIndustries.tsx
index 1064511..64d988b 100644
--- a/src/components/sections/WingsIndustries.tsx
+++ b/src/components/sections/WingsIndustries.tsx
@@ -5,31 +5,37 @@ const INDUSTRIES = [
     title: "Quick Commerce",
     challenge: "Sub-3-hour delivery windows for dark stores and micro-warehouses.",
     solution: "Dedicated same-day air capacity linking metros to fulfillment hubs.",
+    image: "/images/card 1.png",
   },
   {
     title: "Express B2B Cargo",
     challenge: "Time-critical industrial parts and components stuck on slow trunk routes.",
     solution: "Rapid airport-to-airport transport between major economic nodes.",
+    image: "/images/card 2.png",
   },
   {
     title: "Healthcare & Pharma",
     challenge: "Temperature-sensitive, compliance-critical shipments with zero margin for error.",
     solution: "Active and passive cold-chain packaging with full chain-of-custody tracking.",
+    image: "/images/card 3.png",
   },
   {
     title: "Cold Chain Logistics",
     challenge: "Perishables and fresh goods that can't survive slow surface transit.",
     solution: "Precision temperature tracking matched to airline-speed transit.",
+    image: "/images/card4.png",
   },
   {
     title: "High-Value Cargo",
     challenge: "Zero tolerance for loss, tampering, or delay on high-value shipments.",
     solution: "Maximum-security handling with real-time electronic custody tracking.",
+    image: "/images/card5.png",
   },
   {
     title: "E-Commerce Logistics",
     challenge: "Next-day and same-day fulfillment expectations across tier-1 and tier-2 cities.",
     solution: "Direct sorting-hub-to-airport clearance network for faster regional delivery.",
+    image: "/images/card6.png",
   },
 ];
 
@@ -41,7 +47,7 @@ export default function WingsIndustries() {
           __html: `
         .wind-section {
           background: #fafafa;
-          padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
+          padding: var(--space-section-lg, 80px) 0 20px 0; /* Reduced bottom padding to minimize gap */
         }
 
         .wind-header {
@@ -69,9 +75,12 @@ export default function WingsIndustries() {
           margin: 0;
         }
 
-        .wind-grid {
-          max-width: 1280px;
+        .wind-inner {
+          max-width: 1380px;
           margin: 0 auto;
+        }
+
+        .wind-grid {
           display: grid;
           grid-template-columns: repeat(3, minmax(0, 1fr));
           gap: 20px;
@@ -178,34 +187,46 @@ export default function WingsIndustries() {
       />
 
       <section className="wind-section" id="wings-industries">
-        <ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wind-header">
-          <div className="wind-eyebrow">/ Industries We Serve /</div>
-          <h2 className="wind-title">Built for the shipments that can&rsquo;t wait</h2>
-        </ScrollReveal>
+        <div className="dm-section-container">
+          <div className="wind-inner">
+            <ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wind-header">
+              <div className="wind-eyebrow">/ Industries We Serve /</div>
+              <h2 className="wind-title">Built for the shipments that can&rsquo;t wait</h2>
+            </ScrollReveal>
 
-        <ScrollReveal delay={0.1} duration={0.8} yOffset={30} className="wind-grid">
-          {INDUSTRIES.map((ind) => (
-            <div key={ind.title} className="wind-card">
-              <div className="wind-card-wash" aria-hidden="true" />
+            <ScrollReveal delay={0.1} duration={0.8} yOffset={30} className="wind-grid">
+              {INDUSTRIES.map((ind) => (
+                <div 
+                  key={ind.title} 
+                  className="wind-card"
+                  style={ind.image ? {
+                    backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url('${ind.image}')`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center'
+                  } : undefined}
+                >
+                  <div className="wind-card-wash" aria-hidden="true" />
 
-              <div className="wind-card-default">
-                <h3 className="wind-card-default-title">{ind.title}</h3>
-              </div>
+                  <div className="wind-card-default">
+                    <h3 className="wind-card-default-title">{ind.title}</h3>
+                  </div>
 
-              <div className="wind-card-hover">
-                <h3 className="wind-card-hover-title">{ind.title}</h3>
-                <div>
-                  <p className="wind-card-label">Challenge</p>
-                  <p className="wind-card-text">{ind.challenge}</p>
+                  <div className="wind-card-hover">
+                    <h3 className="wind-card-hover-title">{ind.title}</h3>
+                    <div>
+                      <p className="wind-card-label">Challenge</p>
+                      <p className="wind-card-text">{ind.challenge}</p>
+                    </div>
+                    <div>
+                      <p className="wind-card-label">Doormile Wings</p>
+                      <p className="wind-card-text">{ind.solution}</p>
+                    </div>
+                  </div>
                 </div>
-                <div>
-                  <p className="wind-card-label">Doormile Wings</p>
-                  <p className="wind-card-text">{ind.solution}</p>
-                </div>
-              </div>
-            </div>
-          ))}
-        </ScrollReveal>
+              ))}
+            </ScrollReveal>
+          </div>
+        </div>
       </section>
     </>
   );
diff --git a/src/components/sections/WingsInfrastructure.module.css b/src/components/sections/WingsInfrastructure.module.css
new file mode 100644
index 0000000..df94ef8
--- /dev/null
+++ b/src/components/sections/WingsInfrastructure.module.css
@@ -0,0 +1,217 @@
+.section {
+  background: #09090b;
+  padding: var(--space-section-lg, 100px) 0;
+  margin-bottom: 30px;
+  margin-right: 24px;
+  margin-left: 24px;
+  border-radius: 30px;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Ambient depth: calm, near-static light (stable mood) instead of the more
+   energetic red glow used on How It Works, plus a matching vignette. */
+.section::before {
+  content: "";
+  position: absolute;
+  top: -18%;
+  left: 50%;
+  width: 58%;
+  aspect-ratio: 1;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(200, 16, 46, 0.05) 40%, rgba(0, 0, 0, 0) 68%);
+  transform: translateX(-50%);
+  filter: blur(8px);
+  pointer-events: none;
+  z-index: 0;
+  animation: infraGlowDrift 14s ease-in-out infinite alternate;
+}
+
+.section::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(120% 90% at 50% 0%, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+@keyframes infraGlowDrift {
+  0% {
+    transform: translateX(-52%) translateY(0);
+    opacity: 0.7;
+  }
+  100% {
+    transform: translateX(-48%) translateY(10px);
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .section::before {
+    animation: none;
+  }
+}
+
+/*
+ * Single page-alignment wrapper. Numbers verified against the Footer's real
+ * rendered content container (elementor-element-e183a77) with Playwright at
+ * 320-2560px: that row sits flush at a 20px gutter up to a 1420px cap, then
+ * centers beyond it, dropping to a 10px gutter under ~1024px. max-width:1420
+ * + padding:20px reproduces the same edge as a 20px-gutter + inner
+ * max-width:1380px pair in one box (no nested max-width needed). Kept
+ * byte-identical to WingsHowItWorks.module.css's .sectionShell.
+ */
+.sectionShell {
+  width: 100%;
+  max-width: 1420px;
+  margin: 0 auto;
+  padding: 0 5vw;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 1;
+}
+
+@media (max-width: 1024px) {
+  .sectionShell {
+    padding: 0 24px;
+  }
+}
+
+.header {
+  width: 100%;
+  max-width: 700px;
+  margin: 0 auto 56px auto;
+  text-align: center;
+}
+
+.eyebrow {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.45);
+  margin-bottom: 16px;
+}
+
+.title {
+  font-size: clamp(28px, 3.2vw, 46px) !important;
+  font-weight: 800 !important;
+  letter-spacing: -0.03em !important;
+  line-height: 1.15 !important;
+  text-transform: none !important;
+  color: #ffffff !important;
+  margin: 0;
+}
+
+/* Capability row — editorial columns divided by hairline rules, matching
+   How It Works' language but unnumbered (these aren't sequential steps). */
+.grid {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+}
+
+.card {
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 0 30px;
+  border-left: 1px solid rgba(255, 255, 255, 0.09);
+  transition: border-color 0.4s ease;
+}
+
+.card:first-child {
+  padding-left: 0;
+  border-left: none;
+}
+
+.icon {
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  color: rgba(255, 255, 255, 0.55);
+  margin-bottom: 26px;
+  transition: border-color 0.4s ease, color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
+}
+
+.card:hover .icon {
+  border-color: rgba(200, 16, 46, 0.55);
+  color: #ffffff;
+  background: rgba(200, 16, 46, 0.12);
+  box-shadow: 0 0 18px rgba(200, 16, 46, 0.28);
+}
+
+.cardTitle {
+  font-size: 17px !important;
+  font-weight: 700 !important;
+  line-height: 1.3 !important;
+  text-transform: none !important;
+  color: rgba(255, 255, 255, 0.82) !important;
+  margin: 0 0 10px 0;
+  transition: color 0.4s ease;
+}
+
+.card:hover .cardTitle {
+  color: #ffffff !important;
+}
+
+.cardDesc {
+  font-size: 14px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.45);
+  margin: 0;
+  transition: color 0.4s ease;
+}
+
+.card:hover .cardDesc {
+  color: rgba(255, 255, 255, 0.62);
+}
+
+@media (max-width: 1024px) {
+  .section {
+    padding: var(--space-section, 64px) 0;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 34px 28px;
+  }
+
+  .card {
+    border-left: none;
+    padding: 0;
+  }
+
+  .card:nth-child(n + 3) {
+    border-top: 1px solid rgba(255, 255, 255, 0.09);
+    padding-top: 28px;
+  }
+}
+
+@media (max-width: 600px) {
+  .grid {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card {
+    padding: 28px 0;
+  }
+
+  .card:first-child {
+    padding-top: 0;
+  }
+
+  .card:not(:first-child) {
+    border-top: 1px solid rgba(255, 255, 255, 0.09);
+  }
+
+  .card:last-child {
+    padding-bottom: 0;
+  }
+}
diff --git a/src/components/sections/WingsInfrastructure.tsx b/src/components/sections/WingsInfrastructure.tsx
index e8da23c..d48773d 100644
--- a/src/components/sections/WingsInfrastructure.tsx
+++ b/src/components/sections/WingsInfrastructure.tsx
@@ -1,4 +1,5 @@
 import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
+import styles from "./WingsInfrastructure.module.css";
 
 const CARDS = [
   {
@@ -44,117 +45,23 @@ const CARDS = [
 
 export default function WingsInfrastructure() {
   return (
-    <>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-        .wia-section {
-          background: #09090b;
-          padding: var(--space-section, 64px) clamp(20px, 5vw, 40px);
-        }
-
-        .wia-header {
-          margin: 0 auto 44px auto;
-          max-width: 720px;
-          text-align: center;
-        }
-
-        .wia-eyebrow {
-          font-size: 13px;
-          font-weight: 700;
-          letter-spacing: 2px;
-          text-transform: uppercase;
-          color: rgba(255, 255, 255, 0.4);
-          margin-bottom: 16px;
-        }
-
-        .wia-title {
-          font-size: clamp(26px, 3vw, 40px) !important;
-          font-weight: 800 !important;
-          letter-spacing: -0.03em !important;
-          line-height: 1.2 !important;
-          text-transform: none !important;
-          color: #ffffff !important;
-          margin: 0;
-        }
-
-        .wia-grid {
-          max-width: 1280px;
-          margin: 0 auto;
-          display: grid;
-          grid-template-columns: repeat(4, minmax(0, 1fr));
-          gap: 20px;
-        }
-
-        .wia-card {
-          min-width: 0;
-          padding: 28px 24px;
-          border: 1px solid rgba(255, 255, 255, 0.07);
-          border-radius: 18px;
-          background: rgba(255, 255, 255, 0.02);
-          transition: border-color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .wia-card:hover {
-          border-color: rgba(255, 255, 255, 0.14);
-          background: rgba(255, 255, 255, 0.035);
-        }
-
-        .wia-icon {
-          width: 44px;
-          height: 44px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 12px;
-          background: rgba(255, 255, 255, 0.05);
-          color: rgba(255, 255, 255, 0.7);
-          margin-bottom: 18px;
-        }
-
-        .wia-card-title {
-          font-size: 15.5px !important;
-          font-weight: 700 !important;
-          line-height: 1.3 !important;
-          text-transform: none !important;
-          color: #ffffff !important;
-          margin: 0 0 8px 0;
-        }
-
-        .wia-card-desc {
-          font-size: 13.5px;
-          line-height: 1.55;
-          color: rgba(255, 255, 255, 0.5);
-          margin: 0;
-        }
-
-        @media (max-width: 1024px) {
-          .wia-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-        }
-
-        @media (max-width: 600px) {
-          .wia-grid { grid-template-columns: 1fr; }
-        }
-      `,
-        }}
-      />
-
-      <section className="wia-section" id="wings-infrastructure">
-        <ScrollReveal delay={0.05} duration={0.7} yOffset={20} className="wia-header">
-          <div className="wia-eyebrow">/ Infrastructure /</div>
-          <h2 className="wia-title">A network built to move, not to sit idle</h2>
+    <section className={styles.section} id="wings-infrastructure">
+      <div className={styles.sectionShell}>
+        <ScrollReveal delay={0.05} duration={0.7} yOffset={20} className={styles.header}>
+          <div className={styles.eyebrow}>/ Infrastructure /</div>
+          <h2 className={styles.title}>A network built to move, not to sit idle</h2>
         </ScrollReveal>
 
-        <StaggerChildren stagger={0.08} duration={0.6} yOffset={20} className="wia-grid">
+        <StaggerChildren stagger={0.08} duration={0.6} yOffset={20} className={styles.grid}>
           {CARDS.map((c) => (
-            <div key={c.title} className="wia-card">
-              <div className="wia-icon" aria-hidden="true">{c.icon}</div>
-              <h3 className="wia-card-title">{c.title}</h3>
-              <p className="wia-card-desc">{c.desc}</p>
+            <div key={c.title} className={styles.card}>
+              <div className={styles.icon} aria-hidden="true">{c.icon}</div>
+              <h3 className={styles.cardTitle}>{c.title}</h3>
+              <p className={styles.cardDesc}>{c.desc}</p>
             </div>
           ))}
         </StaggerChildren>
-      </section>
-    </>
+      </div>
+    </section>
   );
 }
diff --git a/src/components/sections/WingsMileTruth.tsx b/src/components/sections/WingsMileTruth.tsx
index 739e8cb..bc304a8 100644
--- a/src/components/sections/WingsMileTruth.tsx
+++ b/src/components/sections/WingsMileTruth.tsx
@@ -160,7 +160,7 @@ export default function WingsMileTruth() {
         .wmt-section {
           position: relative;
           width: calc(100% - 40px);
-          margin: 0 auto;
+          margin: clamp(24px, 4vw, 40px) auto;
           border-radius: 28px;
           overflow: hidden;
           box-sizing: border-box;
@@ -195,7 +195,7 @@ export default function WingsMileTruth() {
         .wmt-inner {
           position: relative;
           z-index: 1;
-          max-width: 1200px;
+          max-width: 1380px;
           margin: 0 auto;
         }
 
@@ -357,7 +357,7 @@ export default function WingsMileTruth() {
         <div className="wmt-glow tl" aria-hidden="true" />
         <div className="wmt-glow br" aria-hidden="true" />
 
-        <div className="wmt-inner">
+        <div className="wmt-inner dm-section-container">
           <ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wmt-header">
             <div className="wmt-eyebrow">/ MileTruth&trade; AI /</div>
             <h2 className="wmt-title">The intelligence layer behind every delivery</h2>
diff --git a/src/components/sections/WingsRoadmap.tsx b/src/components/sections/WingsRoadmap.tsx
index f514c6e..3aa230d 100644
--- a/src/components/sections/WingsRoadmap.tsx
+++ b/src/components/sections/WingsRoadmap.tsx
@@ -53,7 +53,7 @@ export default function WingsRoadmap() {
         .wrm-section {
           position: relative;
           width: calc(100% - 40px);
-          margin: 0 auto;
+          margin: clamp(56px, 7vw, 96px) auto clamp(24px, 4vw, 40px);
           border-radius: 28px;
           overflow: hidden;
           box-sizing: border-box;
@@ -87,7 +87,7 @@ export default function WingsRoadmap() {
         }
 
         .wrm-inner {
-          max-width: 1200px;
+          max-width: 1380px;
           margin: 0 auto;
         }
 
@@ -244,43 +244,45 @@ export default function WingsRoadmap() {
       />
 
       <section className="wrm-section" id="wings-roadmap">
-        <div className="wrm-header">
-          <div className="wrm-eyebrow">/ Future Roadmap /</div>
-          <h2 className="wrm-title">A ten-year path to national scale</h2>
-        </div>
-
-        <div className="wrm-inner">
-          <div className="wrm-track-wrap" aria-hidden="true">
-            <div className="wrm-track-fill" style={{ width: `${fillPct}%` }} />
-            <div className="wrm-nodes">
-              {ROADMAP_DATA.map((_, i) => (
-                <div
-                  key={i}
-                  className={`wrm-node${i <= active ? " is-active" : ""}`}
-                  style={{ left: `${((i + 0.5) / ROADMAP_DATA.length) * 100}%` }}
-                />
-              ))}
-            </div>
+        <div className="dm-section-container">
+          <div className="wrm-header">
+            <div className="wrm-eyebrow">/ Future Roadmap /</div>
+            <h2 className="wrm-title">A ten-year path to national scale</h2>
           </div>
 
-          <div className="wrm-grid">
-            {ROADMAP_DATA.map((item, i) => (
-              <div
-                key={item.year}
-                className={`wrm-card${item.glow ? " wrm-glow" : ""}${i === active ? " is-active" : ""}`}
-                onMouseEnter={() => setActive(i)}
-                onClick={() => setActive(i)}
-                role="button"
-                tabIndex={0}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" || e.key === " ") setActive(i);
-                }}
-              >
-                <div className="wrm-card-year">{item.year}</div>
-                <span className={`wrm-phase-pill ${item.phaseClass}`}>{item.phase}</span>
-                <p className="wrm-card-desc">{item.desc}</p>
+          <div className="wrm-inner">
+            <div className="wrm-track-wrap" aria-hidden="true">
+              <div className="wrm-track-fill" style={{ width: `${fillPct}%` }} />
+              <div className="wrm-nodes">
+                {ROADMAP_DATA.map((_, i) => (
+                  <div
+                    key={i}
+                    className={`wrm-node${i <= active ? " is-active" : ""}`}
+                    style={{ left: `${((i + 0.5) / ROADMAP_DATA.length) * 100}%` }}
+                  />
+                ))}
               </div>
-            ))}
+            </div>
+
+            <div className="wrm-grid">
+              {ROADMAP_DATA.map((item, i) => (
+                <div
+                  key={item.year}
+                  className={`wrm-card${item.glow ? " wrm-glow" : ""}${i === active ? " is-active" : ""}`}
+                  onMouseEnter={() => setActive(i)}
+                  onClick={() => setActive(i)}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") setActive(i);
+                  }}
+                >
+                  <div className="wrm-card-year">{item.year}</div>
+                  <span className={`wrm-phase-pill ${item.phaseClass}`}>{item.phase}</span>
+                  <p className="wrm-card-desc">{item.desc}</p>
+                </div>
+              ))}
+            </div>
           </div>
         </div>
       </section>
diff --git a/src/components/sections/WingsSpeedAdvantage.tsx b/src/components/sections/WingsSpeedAdvantage.tsx
index e38f456..8a6f2c4 100644
--- a/src/components/sections/WingsSpeedAdvantage.tsx
+++ b/src/components/sections/WingsSpeedAdvantage.tsx
@@ -43,7 +43,7 @@ export default function WingsSpeedAdvantage() {
           __html: `
         .wsa-section {
           background: #fafafa;
-          padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
+          padding: var(--space-section-lg, 80px) 0;
         }
 
         .wsa-header {
@@ -71,10 +71,13 @@ export default function WingsSpeedAdvantage() {
           margin: 0;
         }
 
+        .wsa-inner {
+          max-width: 1380px;
+          margin: 0 auto;
+        }
+
         .wsa-face-off {
           position: relative;
-          max-width: 1100px;
-          margin: 0 auto;
           display: grid;
           grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
           gap: 24px;
@@ -166,32 +169,36 @@ export default function WingsSpeedAdvantage() {
       />
 
       <section className="wsa-section" ref={sectionRef} id="wings-speed">
+        <div className="dm-section-container">
         <div className="wsa-header" ref={headerRef}>
           <div className="wsa-eyebrow">/ The Speed Advantage /</div>
           <h2 className="wsa-title">Same-day, not some-day</h2>
         </div>
 
-        <div className="wsa-face-off">
-          <div className="wsa-panel wsa-panel-surface" ref={leftRef}>
-            <div className="wsa-panel-label">Surface Logistics</div>
-            <div className="wsa-value">
-              48–<CountUp end={96} duration={1.6} triggerOnce />
+        <div className="wsa-inner">
+          <div className="wsa-face-off">
+            <div className="wsa-panel wsa-panel-surface" ref={leftRef}>
+              <div className="wsa-panel-label">Surface Logistics</div>
+              <div className="wsa-value">
+                48–<CountUp end={96} duration={1.6} triggerOnce />
+              </div>
+              <div className="wsa-unit">Hours</div>
+              <p className="wsa-panel-sub">Delhi–Mumbai standard surface transit time.</p>
             </div>
-            <div className="wsa-unit">Hours</div>
-            <p className="wsa-panel-sub">Delhi–Mumbai standard surface transit time.</p>
-          </div>
 
-          <div className="wsa-vs" ref={vsRef}>VS</div>
+            <div className="wsa-vs" ref={vsRef}>VS</div>
 
-          <div className="wsa-panel wsa-panel-wings" ref={rightRef}>
-            <div className="wsa-panel-label">Doormile Wings</div>
-            <div className="wsa-value">
-              Max <CountUp end={3} duration={1.4} triggerOnce />
+            <div className="wsa-panel wsa-panel-wings" ref={rightRef}>
+              <div className="wsa-panel-label">Doormile Wings</div>
+              <div className="wsa-value">
+                Max <CountUp end={3} duration={1.4} triggerOnce />
+              </div>
+              <div className="wsa-unit">Hours, Door-to-Door</div>
+              <p className="wsa-panel-sub">Same-day delivery between major regional capitals.</p>
             </div>
-            <div className="wsa-unit">Hours, Door-to-Door</div>
-            <p className="wsa-panel-sub">Same-day delivery between major regional capitals.</p>
           </div>
         </div>
+        </div>
       </section>
     </>
   );
diff --git a/src/components/sections/WingsWhyGrid.tsx b/src/components/sections/WingsWhyGrid.tsx
index 7441ba4..53b09e8 100644
--- a/src/components/sections/WingsWhyGrid.tsx
+++ b/src/components/sections/WingsWhyGrid.tsx
@@ -56,7 +56,7 @@ export default function WingsWhyGrid() {
           __html: `
         .wwg-section {
           background: #ffffff;
-          padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
+          padding: var(--space-section-lg, 80px) 0;
         }
 
         .wwg-header {
@@ -84,9 +84,12 @@ export default function WingsWhyGrid() {
           margin: 0;
         }
 
-        .wwg-grid {
-          max-width: 1280px;
+        .wwg-inner {
+          max-width: 1380px;
           margin: 0 auto;
+        }
+
+        .wwg-grid {
           display: grid;
           grid-template-columns: repeat(4, minmax(0, 1fr));
           gap: 24px;
@@ -147,20 +150,24 @@ export default function WingsWhyGrid() {
       />
 
       <section className="wwg-section" id="wings-why">
-        <ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wwg-header">
-          <div className="wwg-eyebrow">/ Why Doormile Wings /</div>
-          <h2 className="wwg-title">Built for the speed of the Gen-Z economy</h2>
-        </ScrollReveal>
+        <div className="dm-section-container">
+          <div className="wwg-inner">
+            <ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wwg-header">
+              <div className="wwg-eyebrow">/ Why Doormile Wings /</div>
+              <h2 className="wwg-title">Built for the speed of the Gen-Z economy</h2>
+            </ScrollReveal>
 
-        <StaggerChildren stagger={0.1} duration={0.7} yOffset={30} className="wwg-grid">
-          {FEATURES.map((f) => (
-            <div key={f.title} className="wwg-card">
-              <div className="wwg-icon" aria-hidden="true">{f.icon}</div>
-              <h3 className="wwg-card-title">{f.title}</h3>
-              <p className="wwg-card-desc">{f.desc}</p>
-            </div>
-          ))}
-        </StaggerChildren>
+            <StaggerChildren stagger={0.1} duration={0.7} yOffset={30} className="wwg-grid">
+              {FEATURES.map((f) => (
+                <div key={f.title} className="wwg-card">
+                  <div className="wwg-icon" aria-hidden="true">{f.icon}</div>
+                  <h3 className="wwg-card-title">{f.title}</h3>
+                  <p className="wwg-card-desc">{f.desc}</p>
+                </div>
+              ))}
+            </StaggerChildren>
+          </div>
+        </div>
       </section>
     </>
   );