fix update email

next.config.ts

@@ -1,6 +1,10 @@
 import type { NextConfig } from "next";
+import path from "path";
 
 const nextConfig: NextConfig = {
+  turbopack: {
+    root: path.resolve(__dirname),
+  },
   output: "export",
   // Required by the How It Works 3D experience. React StrictMode double-invokes
   // mount/effects in dev, which tears down and re-creates the WebGL context of

package-lock.json

@@ -18,6 +18,7 @@
         "lenis": "^1.3.23",
         "maath": "^0.10.8",
         "next": "16.2.6",
+        "nodemailer": "^9.0.0",
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "react-leaflet": "^5.0.0",
@@ -31,6 +32,7 @@
         "@types/jest": "^30.0.0",
         "@types/leaflet": "^1.9.21",
         "@types/node": "^20",
+        "@types/nodemailer": "^8.0.1",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "@types/three": "^0.184.0",
@@ -3045,6 +3047,16 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/nodemailer": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-8.0.1.tgz",
+      "integrity": "sha512-PxpaInm8V1JQDd4j0ds5HfvWQk8JupS1C0Picb96QJsrrRDjBH+DlK7L4ZdNSqNULhiZRQHc40nLVShaGxXAMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/offscreencanvas": {
       "version": "2019.7.3",
       "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
@@ -9018,6 +9030,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/nodemailer": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-9.0.0.tgz",
+      "integrity": "sha512-tbPTid7d/p9jAA8CRZ3iomvrMaST0o6NYuY7v6JQZHpPRZ61mLFSPKYd7342NtOFuej9/+L48SOIxwfu2uDvtw==",
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "lenis": "^1.3.23",
     "maath": "^0.10.8",
     "next": "16.2.6",
+    "nodemailer": "^9.0.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-leaflet": "^5.0.0",
@@ -36,6 +37,7 @@
     "@types/jest": "^30.0.0",
     "@types/leaflet": "^1.9.21",
     "@types/node": "^20",
+    "@types/nodemailer": "^8.0.1",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/three": "^0.184.0",

public/css/site.css

@@ -507,7 +507,7 @@ body:not(.rtl) .elementor-element.elementor-element-13a7637 {
 }
 
 .elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
-    background-image: url("/images/home4-banner-4.jpg");
+    background-image: url("/images/bg-header-women.webp");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -5776,12 +5776,12 @@ body:not(.block-editor-page) .content-wrapper .widget p {
 @media (max-width: 1024px) {
     .elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
         width: 100% !important;
-        max-width: 450px !important;
+        max-width: 600px !important;
         /* Prevent oversized/zoomed appearance on tablets */
         height: auto !important;
         aspect-ratio: auto !important;
         /* Maintain original proportions */
-        object-fit: contain !important;
+        object-fit: cover !important;
         /* Ensure no cropping of important content */
         margin: 0 auto !important;
         /* Centering */
@@ -5799,10 +5799,10 @@ body:not(.block-editor-page) .content-wrapper .widget p {
 /* Specific scaling for small mobile phones */
 @media (max-width: 767px) {
     .elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
-        max-width: 90% !important;
+        max-width: 100% !important;
         /* Reduce scale on small screens */
         margin: 0 auto !important;
-        border-radius: 18px !important;
+        border-radius: 25px !important;
         /* Consistent rounded edges */
     }
 }
@@ -8650,7 +8650,7 @@ h1:where(.wp-block-heading).has-background,
         }
 
         .elementor .elementor-element.elementor-element-6c7cbcb .elementor-repeater-item-3264830 {
-            background-image:  url("/images/home2-slide-1.jpg");
+            background-image:  url("/images/home2-slide-1.webp");
             background-position: center;
             background-repeat: no-repeat;
             background-size: cover;
@@ -8710,7 +8710,7 @@ h1:where(.wp-block-heading).has-background,
         }
 
         .elementor .elementor-element.elementor-element-6c7cbcb .elementor-repeater-item-6867061 {
-            background-image: url("/images/home2-slide-2.jpg");
+            background-image: url("/images/home2-slide-2.webp");
             background-position: center;
             background-repeat: no-repeat;
             background-size: cover;
@@ -8833,7 +8833,7 @@ h1:where(.wp-block-heading).has-background,
         }
 
         .elementor .elementor-element.elementor-element-ca6bc63:not(.elementor-motion-effects-element-type-background) {
-            background-image: linear-gradient(to right, #00000080, #00000010), url("/images/home2-banner-1.jpg");
+            background-image: linear-gradient(to right, #00000080, #00000010), url("/images/home2-banner-1.webp");
             background-position: center center;
             background-repeat: no-repeat;
             background-size: cover;
@@ -8952,7 +8952,7 @@ h1:where(.wp-block-heading).has-background,
         }
 
         .elementor .elementor-element.elementor-element-f003242:not(.elementor-motion-effects-element-type-background) {
-            background-image: url("/images/home2-banner-3.jpg");
+            background-image: url("/images/home2-banner-3.webp");
             background-position: center center;
             background-repeat: no-repeat;
             background-size: cover;
@@ -10216,7 +10216,7 @@ h1:where(.wp-block-heading).has-background,
         }
 
         #side-panel-2f31137:before {
-            background-image: url("/images/bg-slide-sidebar.jpg");
+            background-image: url("/images/bg-slide-sidebar.webp");
             background-position: center center;
             background-repeat: no-repeat;
             background-size: cover;
@@ -11406,7 +11406,7 @@ h1:where(.wp-block-heading).has-background,
 }
 
 .elementor-61 .elementor-element.elementor-element-6c7cbcb .elementor-repeater-item-3264830 {
-    background-image: url("/images/home2-slide-1.jpg");
+    background-image: url("/images/home2-slide-1.webp");
     background-position: bottom center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -11458,7 +11458,7 @@ h1:where(.wp-block-heading).has-background,
 }
 
 .elementor-61 .elementor-element.elementor-element-6c7cbcb .elementor-repeater-item-6867061 {
-    background-image: url("/images/home2-slide-2.jpg");
+    background-image: url("/images/home2-slide-2.webp");
     background-position: bottom center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -11569,7 +11569,7 @@ h1:where(.wp-block-heading).has-background,
 }
 
 .elementor-61 .elementor-element.elementor-element-ca6bc63:not(.elementor-motion-effects-element-type-background) {
-    background-image: url("/images/home2-banner-1.jpg");
+    background-image: url("/images/home2-banner-1.webp");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -11684,7 +11684,7 @@ h1:where(.wp-block-heading).has-background,
 }
 
 .elementor-61 .elementor-element.elementor-element-f003242:not(.elementor-motion-effects-element-type-background) {
-    background-image: url("/images/home2-banner-3.jpg");
+    background-image: url("/images/home2-banner-3.webp");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -14856,7 +14856,7 @@ img:is([sizes=auto i]) {
         }
 
         .elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
-            background-image: url("/images/bg-header-5.png");
+            background-image: url("/images/bg-header-5.webp");
             background-position: center center;
             background-repeat: no-repeat;
             background-size: cover;
@@ -18143,14 +18143,101 @@ img:is([sizes=auto i]){contain-intrinsic-size:3000px 1500px}
 /* STYLE BLOCK 50 */
 .howits-hero-custom-bg.elementor-repeater-item-3264830,
     .howits-hero-custom-bg.elementor-repeater-item-6867061 {
-        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-1.png') !important;
+        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-1.webp') !important;
         background-position: center !important;
         background-repeat: no-repeat !important;
         background-size: cover !important;
     }
     .howits-hero-custom-bg.elementor-repeater-item-6867061 {
-        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-2.png') !important;
+        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-2.webp') !important;
         background-position: center !important;
         background-repeat: no-repeat !important;
         background-size: cover !important;
     }
+
+/* STYLE BLOCK 51: unified mobile gutters for card/content sections */
+@media (max-width: 767px) {
+    :root { --dm-mobile-gutter: 10px; }
+
+    .elementor.elementor-61 .elementor-element.elementor-element-89a0ca1,
+    .elementor.elementor-61 .elementor-element.elementor-element-88745f4,
+    .elementor.elementor-86 .elementor-element.elementor-element-c2c601a,
+    .elementor.elementor-104 .elementor-element.elementor-element-c70681e {
+        --padding-left: var(--dm-mobile-gutter) !important;
+        --padding-right: var(--dm-mobile-gutter) !important;
+        padding-left: var(--dm-mobile-gutter) !important;
+        padding-right: var(--dm-mobile-gutter) !important;
+        box-sizing: border-box !important;
+    }
+
+    .elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc {
+        --padding-left: 10px !important;
+        --padding-right: 10px !important;
+        padding-left: 10px !important;
+        padding-right: 10px !important;
+        box-sizing: border-box !important;
+    }
+
+    .elementor.elementor-61 .elementor-element.elementor-element-89a0ca1 > .e-con-inner,
+    .elementor.elementor-61 .elementor-element.elementor-element-88745f4 > .e-con-inner,
+    .elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc > .e-con-inner,
+    .elementor.elementor-86 .elementor-element.elementor-element-c2c601a > .e-con-inner,
+    .elementor.elementor-104 .elementor-element.elementor-element-c70681e > .e-con-inner {
+        width: 100% !important;
+        max-width: 100% !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        box-sizing: border-box !important;
+    }
+
+    .elementor.elementor-61 .elementor-element.elementor-element-89a0ca1 > .e-con-inner > .e-con,
+    .elementor.elementor-61 .elementor-element.elementor-element-88745f4 > .e-con-inner > .e-con,
+    .elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc > .e-con-inner > .e-con,
+    .elementor.elementor-86 .elementor-element.elementor-element-c2c601a > .e-con-inner > .e-con,
+    .elementor.elementor-104 .elementor-element.elementor-element-c70681e > .e-con-inner > .e-con {
+        --padding-left: 0px !important;
+        --padding-right: 0px !important;
+        width: 100% !important;
+        max-width: 100% !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        box-sizing: border-box !important;
+    }
+
+    .elementor.elementor-61 .elementor-element.elementor-element-6829276 {
+        --e-con-grid-template-columns: minmax(0, 1fr) !important;
+        --grid-justify-content: stretch !important;
+        --justify-items: stretch !important;
+        grid-template-columns: minmax(0, 1fr) !important;
+        justify-content: stretch !important;
+        justify-items: stretch !important;
+        min-width: 0 !important;
+    }
+
+    .elementor.elementor-61 .industry-solutions-grid,
+    .elementor.elementor-61 .industry-card-link {
+        width: 100% !important;
+        max-width: 100% !important;
+        min-width: 0 !important;
+    }
+
+    .comparison-section .container {
+        width: calc(100% - (var(--dm-mobile-gutter) * 2)) !important;
+        max-width: calc(100% - (var(--dm-mobile-gutter) * 2)) !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        box-sizing: border-box !important;
+    }
+
+    .wcd-inner {
+        width: 100% !important;
+        max-width: 100% !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        box-sizing: border-box !important;
+    }
+}

public/draco/draco_wasm_wrapper.js

@@ -0,0 +1,116 @@
+var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.arrayIteratorImpl=function(h){var n=0;return function(){return n<h.length?{done:!1,value:h[n++]}:{done:!0}}};$jscomp.arrayIterator=function(h){return{next:$jscomp.arrayIteratorImpl(h)}};$jscomp.makeIterator=function(h){var n="undefined"!=typeof Symbol&&Symbol.iterator&&h[Symbol.iterator];return n?n.call(h):$jscomp.arrayIterator(h)};$jscomp.ASSUME_ES5=!1;$jscomp.ASSUME_NO_NATIVE_MAP=!1;$jscomp.ASSUME_NO_NATIVE_SET=!1;$jscomp.SIMPLE_FROUND_POLYFILL=!1;
+$jscomp.ISOLATE_POLYFILLS=!1;$jscomp.FORCE_POLYFILL_PROMISE=!1;$jscomp.FORCE_POLYFILL_PROMISE_WHEN_NO_UNHANDLED_REJECTION=!1;$jscomp.getGlobal=function(h){h=["object"==typeof globalThis&&globalThis,h,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global];for(var n=0;n<h.length;++n){var k=h[n];if(k&&k.Math==Math)return k}throw Error("Cannot find global object");};$jscomp.global=$jscomp.getGlobal(this);
+$jscomp.defineProperty=$jscomp.ASSUME_ES5||"function"==typeof Object.defineProperties?Object.defineProperty:function(h,n,k){if(h==Array.prototype||h==Object.prototype)return h;h[n]=k.value;return h};$jscomp.IS_SYMBOL_NATIVE="function"===typeof Symbol&&"symbol"===typeof Symbol("x");$jscomp.TRUST_ES6_POLYFILLS=!$jscomp.ISOLATE_POLYFILLS||$jscomp.IS_SYMBOL_NATIVE;$jscomp.polyfills={};$jscomp.propertyToPolyfillSymbol={};$jscomp.POLYFILL_PREFIX="$jscp$";
+var $jscomp$lookupPolyfilledValue=function(h,n){var k=$jscomp.propertyToPolyfillSymbol[n];if(null==k)return h[n];k=h[k];return void 0!==k?k:h[n]};$jscomp.polyfill=function(h,n,k,p){n&&($jscomp.ISOLATE_POLYFILLS?$jscomp.polyfillIsolated(h,n,k,p):$jscomp.polyfillUnisolated(h,n,k,p))};
+$jscomp.polyfillUnisolated=function(h,n,k,p){k=$jscomp.global;h=h.split(".");for(p=0;p<h.length-1;p++){var l=h[p];if(!(l in k))return;k=k[l]}h=h[h.length-1];p=k[h];n=n(p);n!=p&&null!=n&&$jscomp.defineProperty(k,h,{configurable:!0,writable:!0,value:n})};
+$jscomp.polyfillIsolated=function(h,n,k,p){var l=h.split(".");h=1===l.length;p=l[0];p=!h&&p in $jscomp.polyfills?$jscomp.polyfills:$jscomp.global;for(var y=0;y<l.length-1;y++){var f=l[y];if(!(f in p))return;p=p[f]}l=l[l.length-1];k=$jscomp.IS_SYMBOL_NATIVE&&"es6"===k?p[l]:null;n=n(k);null!=n&&(h?$jscomp.defineProperty($jscomp.polyfills,l,{configurable:!0,writable:!0,value:n}):n!==k&&(void 0===$jscomp.propertyToPolyfillSymbol[l]&&(k=1E9*Math.random()>>>0,$jscomp.propertyToPolyfillSymbol[l]=$jscomp.IS_SYMBOL_NATIVE?
+$jscomp.global.Symbol(l):$jscomp.POLYFILL_PREFIX+k+"$"+l),$jscomp.defineProperty(p,$jscomp.propertyToPolyfillSymbol[l],{configurable:!0,writable:!0,value:n})))};
+$jscomp.polyfill("Promise",function(h){function n(){this.batch_=null}function k(f){return f instanceof l?f:new l(function(q,u){q(f)})}if(h&&(!($jscomp.FORCE_POLYFILL_PROMISE||$jscomp.FORCE_POLYFILL_PROMISE_WHEN_NO_UNHANDLED_REJECTION&&"undefined"===typeof $jscomp.global.PromiseRejectionEvent)||!$jscomp.global.Promise||-1===$jscomp.global.Promise.toString().indexOf("[native code]")))return h;n.prototype.asyncExecute=function(f){if(null==this.batch_){this.batch_=[];var q=this;this.asyncExecuteFunction(function(){q.executeBatch_()})}this.batch_.push(f)};
+var p=$jscomp.global.setTimeout;n.prototype.asyncExecuteFunction=function(f){p(f,0)};n.prototype.executeBatch_=function(){for(;this.batch_&&this.batch_.length;){var f=this.batch_;this.batch_=[];for(var q=0;q<f.length;++q){var u=f[q];f[q]=null;try{u()}catch(A){this.asyncThrow_(A)}}}this.batch_=null};n.prototype.asyncThrow_=function(f){this.asyncExecuteFunction(function(){throw f;})};var l=function(f){this.state_=0;this.result_=void 0;this.onSettledCallbacks_=[];this.isRejectionHandled_=!1;var q=this.createResolveAndReject_();
+try{f(q.resolve,q.reject)}catch(u){q.reject(u)}};l.prototype.createResolveAndReject_=function(){function f(A){return function(F){u||(u=!0,A.call(q,F))}}var q=this,u=!1;return{resolve:f(this.resolveTo_),reject:f(this.reject_)}};l.prototype.resolveTo_=function(f){if(f===this)this.reject_(new TypeError("A Promise cannot resolve to itself"));else if(f instanceof l)this.settleSameAsPromise_(f);else{a:switch(typeof f){case "object":var q=null!=f;break a;case "function":q=!0;break a;default:q=!1}q?this.resolveToNonPromiseObj_(f):
+this.fulfill_(f)}};l.prototype.resolveToNonPromiseObj_=function(f){var q=void 0;try{q=f.then}catch(u){this.reject_(u);return}"function"==typeof q?this.settleSameAsThenable_(q,f):this.fulfill_(f)};l.prototype.reject_=function(f){this.settle_(2,f)};l.prototype.fulfill_=function(f){this.settle_(1,f)};l.prototype.settle_=function(f,q){if(0!=this.state_)throw Error("Cannot settle("+f+", "+q+"): Promise already settled in state"+this.state_);this.state_=f;this.result_=q;2===this.state_&&this.scheduleUnhandledRejectionCheck_();
+this.executeOnSettledCallbacks_()};l.prototype.scheduleUnhandledRejectionCheck_=function(){var f=this;p(function(){if(f.notifyUnhandledRejection_()){var q=$jscomp.global.console;"undefined"!==typeof q&&q.error(f.result_)}},1)};l.prototype.notifyUnhandledRejection_=function(){if(this.isRejectionHandled_)return!1;var f=$jscomp.global.CustomEvent,q=$jscomp.global.Event,u=$jscomp.global.dispatchEvent;if("undefined"===typeof u)return!0;"function"===typeof f?f=new f("unhandledrejection",{cancelable:!0}):
+"function"===typeof q?f=new q("unhandledrejection",{cancelable:!0}):(f=$jscomp.global.document.createEvent("CustomEvent"),f.initCustomEvent("unhandledrejection",!1,!0,f));f.promise=this;f.reason=this.result_;return u(f)};l.prototype.executeOnSettledCallbacks_=function(){if(null!=this.onSettledCallbacks_){for(var f=0;f<this.onSettledCallbacks_.length;++f)y.asyncExecute(this.onSettledCallbacks_[f]);this.onSettledCallbacks_=null}};var y=new n;l.prototype.settleSameAsPromise_=function(f){var q=this.createResolveAndReject_();
+f.callWhenSettled_(q.resolve,q.reject)};l.prototype.settleSameAsThenable_=function(f,q){var u=this.createResolveAndReject_();try{f.call(q,u.resolve,u.reject)}catch(A){u.reject(A)}};l.prototype.then=function(f,q){function u(w,B){return"function"==typeof w?function(R){try{A(w(R))}catch(Z){F(Z)}}:B}var A,F,v=new l(function(w,B){A=w;F=B});this.callWhenSettled_(u(f,A),u(q,F));return v};l.prototype.catch=function(f){return this.then(void 0,f)};l.prototype.callWhenSettled_=function(f,q){function u(){switch(A.state_){case 1:f(A.result_);
+break;case 2:q(A.result_);break;default:throw Error("Unexpected state: "+A.state_);}}var A=this;null==this.onSettledCallbacks_?y.asyncExecute(u):this.onSettledCallbacks_.push(u);this.isRejectionHandled_=!0};l.resolve=k;l.reject=function(f){return new l(function(q,u){u(f)})};l.race=function(f){return new l(function(q,u){for(var A=$jscomp.makeIterator(f),F=A.next();!F.done;F=A.next())k(F.value).callWhenSettled_(q,u)})};l.all=function(f){var q=$jscomp.makeIterator(f),u=q.next();return u.done?k([]):new l(function(A,
+F){function v(R){return function(Z){w[R]=Z;B--;0==B&&A(w)}}var w=[],B=0;do w.push(void 0),B++,k(u.value).callWhenSettled_(v(w.length-1),F),u=q.next();while(!u.done)})};return l},"es6","es3");$jscomp.owns=function(h,n){return Object.prototype.hasOwnProperty.call(h,n)};$jscomp.assign=$jscomp.TRUST_ES6_POLYFILLS&&"function"==typeof Object.assign?Object.assign:function(h,n){for(var k=1;k<arguments.length;k++){var p=arguments[k];if(p)for(var l in p)$jscomp.owns(p,l)&&(h[l]=p[l])}return h};
+$jscomp.polyfill("Object.assign",function(h){return h||$jscomp.assign},"es6","es3");$jscomp.checkStringArgs=function(h,n,k){if(null==h)throw new TypeError("The 'this' value for String.prototype."+k+" must not be null or undefined");if(n instanceof RegExp)throw new TypeError("First argument to String.prototype."+k+" must not be a regular expression");return h+""};
+$jscomp.polyfill("String.prototype.startsWith",function(h){return h?h:function(n,k){var p=$jscomp.checkStringArgs(this,n,"startsWith");n+="";var l=p.length,y=n.length;k=Math.max(0,Math.min(k|0,p.length));for(var f=0;f<y&&k<l;)if(p[k++]!=n[f++])return!1;return f>=y}},"es6","es3");
+$jscomp.polyfill("Array.prototype.copyWithin",function(h){function n(k){k=Number(k);return Infinity===k||-Infinity===k?k:k|0}return h?h:function(k,p,l){var y=this.length;k=n(k);p=n(p);l=void 0===l?y:n(l);k=0>k?Math.max(y+k,0):Math.min(k,y);p=0>p?Math.max(y+p,0):Math.min(p,y);l=0>l?Math.max(y+l,0):Math.min(l,y);if(k<p)for(;p<l;)p in this?this[k++]=this[p++]:(delete this[k++],p++);else for(l=Math.min(l,y+p-k),k+=l-p;l>p;)--l in this?this[--k]=this[l]:delete this[--k];return this}},"es6","es3");
+$jscomp.typedArrayCopyWithin=function(h){return h?h:Array.prototype.copyWithin};$jscomp.polyfill("Int8Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");$jscomp.polyfill("Uint8Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");$jscomp.polyfill("Uint8ClampedArray.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");$jscomp.polyfill("Int16Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");
+$jscomp.polyfill("Uint16Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");$jscomp.polyfill("Int32Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");$jscomp.polyfill("Uint32Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");$jscomp.polyfill("Float32Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");$jscomp.polyfill("Float64Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");
+var DracoDecoderModule=function(){var h="undefined"!==typeof document&&document.currentScript?document.currentScript.src:void 0;"undefined"!==typeof __filename&&(h=h||__filename);return function(n){function k(e){return a.locateFile?a.locateFile(e,U):U+e}function p(e,b){if(e){var c=ia;var d=e+b;for(b=e;c[b]&&!(b>=d);)++b;if(16<b-e&&c.buffer&&ra)c=ra.decode(c.subarray(e,b));else{for(d="";e<b;){var g=c[e++];if(g&128){var t=c[e++]&63;if(192==(g&224))d+=String.fromCharCode((g&31)<<6|t);else{var aa=c[e++]&
+63;g=224==(g&240)?(g&15)<<12|t<<6|aa:(g&7)<<18|t<<12|aa<<6|c[e++]&63;65536>g?d+=String.fromCharCode(g):(g-=65536,d+=String.fromCharCode(55296|g>>10,56320|g&1023))}}else d+=String.fromCharCode(g)}c=d}}else c="";return c}function l(){var e=ja.buffer;a.HEAP8=W=new Int8Array(e);a.HEAP16=new Int16Array(e);a.HEAP32=ca=new Int32Array(e);a.HEAPU8=ia=new Uint8Array(e);a.HEAPU16=new Uint16Array(e);a.HEAPU32=Y=new Uint32Array(e);a.HEAPF32=new Float32Array(e);a.HEAPF64=new Float64Array(e)}function y(e){if(a.onAbort)a.onAbort(e);
+e="Aborted("+e+")";da(e);sa=!0;e=new WebAssembly.RuntimeError(e+". Build with -sASSERTIONS for more info.");ka(e);throw e;}function f(e){try{if(e==P&&ea)return new Uint8Array(ea);if(ma)return ma(e);throw"both async and sync fetching of the wasm failed";}catch(b){y(b)}}function q(){if(!ea&&(ta||fa)){if("function"==typeof fetch&&!P.startsWith("file://"))return fetch(P,{credentials:"same-origin"}).then(function(e){if(!e.ok)throw"failed to load wasm binary file at '"+P+"'";return e.arrayBuffer()}).catch(function(){return f(P)});
+if(na)return new Promise(function(e,b){na(P,function(c){e(new Uint8Array(c))},b)})}return Promise.resolve().then(function(){return f(P)})}function u(e){for(;0<e.length;)e.shift()(a)}function A(e){this.excPtr=e;this.ptr=e-24;this.set_type=function(b){Y[this.ptr+4>>2]=b};this.get_type=function(){return Y[this.ptr+4>>2]};this.set_destructor=function(b){Y[this.ptr+8>>2]=b};this.get_destructor=function(){return Y[this.ptr+8>>2]};this.set_refcount=function(b){ca[this.ptr>>2]=b};this.set_caught=function(b){W[this.ptr+
+12>>0]=b?1:0};this.get_caught=function(){return 0!=W[this.ptr+12>>0]};this.set_rethrown=function(b){W[this.ptr+13>>0]=b?1:0};this.get_rethrown=function(){return 0!=W[this.ptr+13>>0]};this.init=function(b,c){this.set_adjusted_ptr(0);this.set_type(b);this.set_destructor(c);this.set_refcount(0);this.set_caught(!1);this.set_rethrown(!1)};this.add_ref=function(){ca[this.ptr>>2]+=1};this.release_ref=function(){var b=ca[this.ptr>>2];ca[this.ptr>>2]=b-1;return 1===b};this.set_adjusted_ptr=function(b){Y[this.ptr+
+16>>2]=b};this.get_adjusted_ptr=function(){return Y[this.ptr+16>>2]};this.get_exception_ptr=function(){if(ua(this.get_type()))return Y[this.excPtr>>2];var b=this.get_adjusted_ptr();return 0!==b?b:this.excPtr}}function F(){function e(){if(!la&&(la=!0,a.calledRun=!0,!sa)){va=!0;u(oa);wa(a);if(a.onRuntimeInitialized)a.onRuntimeInitialized();if(a.postRun)for("function"==typeof a.postRun&&(a.postRun=[a.postRun]);a.postRun.length;)xa.unshift(a.postRun.shift());u(xa)}}if(!(0<ba)){if(a.preRun)for("function"==
+typeof a.preRun&&(a.preRun=[a.preRun]);a.preRun.length;)ya.unshift(a.preRun.shift());u(ya);0<ba||(a.setStatus?(a.setStatus("Running..."),setTimeout(function(){setTimeout(function(){a.setStatus("")},1);e()},1)):e())}}function v(){}function w(e){return(e||v).__cache__}function B(e,b){var c=w(b),d=c[e];if(d)return d;d=Object.create((b||v).prototype);d.ptr=e;return c[e]=d}function R(e){if("string"===typeof e){for(var b=0,c=0;c<e.length;++c){var d=e.charCodeAt(c);127>=d?b++:2047>=d?b+=2:55296<=d&&57343>=
+d?(b+=4,++c):b+=3}b=Array(b+1);c=0;d=b.length;if(0<d){d=c+d-1;for(var g=0;g<e.length;++g){var t=e.charCodeAt(g);if(55296<=t&&57343>=t){var aa=e.charCodeAt(++g);t=65536+((t&1023)<<10)|aa&1023}if(127>=t){if(c>=d)break;b[c++]=t}else{if(2047>=t){if(c+1>=d)break;b[c++]=192|t>>6}else{if(65535>=t){if(c+2>=d)break;b[c++]=224|t>>12}else{if(c+3>=d)break;b[c++]=240|t>>18;b[c++]=128|t>>12&63}b[c++]=128|t>>6&63}b[c++]=128|t&63}}b[c]=0}e=r.alloc(b,W);r.copy(b,W,e);return e}return e}function Z(e){if("object"===
+typeof e){var b=r.alloc(e,W);r.copy(e,W,b);return b}return e}function X(){throw"cannot construct a VoidPtr, no constructor in IDL";}function S(){this.ptr=za();w(S)[this.ptr]=this}function Q(){this.ptr=Aa();w(Q)[this.ptr]=this}function V(){this.ptr=Ba();w(V)[this.ptr]=this}function x(){this.ptr=Ca();w(x)[this.ptr]=this}function D(){this.ptr=Da();w(D)[this.ptr]=this}function G(){this.ptr=Ea();w(G)[this.ptr]=this}function H(){this.ptr=Fa();w(H)[this.ptr]=this}function E(){this.ptr=Ga();w(E)[this.ptr]=
+this}function T(){this.ptr=Ha();w(T)[this.ptr]=this}function C(){throw"cannot construct a Status, no constructor in IDL";}function I(){this.ptr=Ia();w(I)[this.ptr]=this}function J(){this.ptr=Ja();w(J)[this.ptr]=this}function K(){this.ptr=Ka();w(K)[this.ptr]=this}function L(){this.ptr=La();w(L)[this.ptr]=this}function M(){this.ptr=Ma();w(M)[this.ptr]=this}function N(){this.ptr=Na();w(N)[this.ptr]=this}function O(){this.ptr=Oa();w(O)[this.ptr]=this}function z(){this.ptr=Pa();w(z)[this.ptr]=this}function m(){this.ptr=
+Qa();w(m)[this.ptr]=this}n=void 0===n?{}:n;var a="undefined"!=typeof n?n:{},wa,ka;a.ready=new Promise(function(e,b){wa=e;ka=b});var Ra=!1,Sa=!1;a.onRuntimeInitialized=function(){Ra=!0;if(Sa&&"function"===typeof a.onModuleLoaded)a.onModuleLoaded(a)};a.onModuleParsed=function(){Sa=!0;if(Ra&&"function"===typeof a.onModuleLoaded)a.onModuleLoaded(a)};a.isVersionSupported=function(e){if("string"!==typeof e)return!1;e=e.split(".");return 2>e.length||3<e.length?!1:1==e[0]&&0<=e[1]&&5>=e[1]?!0:0!=e[0]||10<
+e[1]?!1:!0};var Ta=Object.assign({},a),ta="object"==typeof window,fa="function"==typeof importScripts,Ua="object"==typeof process&&"object"==typeof process.versions&&"string"==typeof process.versions.node,U="";if(Ua){var Va=require("fs"),pa=require("path");U=fa?pa.dirname(U)+"/":__dirname+"/";var Wa=function(e,b){e=e.startsWith("file://")?new URL(e):pa.normalize(e);return Va.readFileSync(e,b?void 0:"utf8")};var ma=function(e){e=Wa(e,!0);e.buffer||(e=new Uint8Array(e));return e};var na=function(e,
+b,c){e=e.startsWith("file://")?new URL(e):pa.normalize(e);Va.readFile(e,function(d,g){d?c(d):b(g.buffer)})};1<process.argv.length&&process.argv[1].replace(/\\/g,"/");process.argv.slice(2);a.inspect=function(){return"[Emscripten Module object]"}}else if(ta||fa)fa?U=self.location.href:"undefined"!=typeof document&&document.currentScript&&(U=document.currentScript.src),h&&(U=h),U=0!==U.indexOf("blob:")?U.substr(0,U.replace(/[?#].*/,"").lastIndexOf("/")+1):"",Wa=function(e){var b=new XMLHttpRequest;b.open("GET",
+e,!1);b.send(null);return b.responseText},fa&&(ma=function(e){var b=new XMLHttpRequest;b.open("GET",e,!1);b.responseType="arraybuffer";b.send(null);return new Uint8Array(b.response)}),na=function(e,b,c){var d=new XMLHttpRequest;d.open("GET",e,!0);d.responseType="arraybuffer";d.onload=function(){200==d.status||0==d.status&&d.response?b(d.response):c()};d.onerror=c;d.send(null)};a.print||console.log.bind(console);var da=a.printErr||console.warn.bind(console);Object.assign(a,Ta);Ta=null;var ea;a.wasmBinary&&
+(ea=a.wasmBinary);"object"!=typeof WebAssembly&&y("no native wasm support detected");var ja,sa=!1,ra="undefined"!=typeof TextDecoder?new TextDecoder("utf8"):void 0,W,ia,ca,Y,ya=[],oa=[],xa=[],va=!1,ba=0,qa=null,ha=null;var P="draco_decoder_gltf.wasm";P.startsWith("data:application/octet-stream;base64,")||(P=k(P));var pd=0,qd={b:function(e,b,c){(new A(e)).init(b,c);pd++;throw e;},a:function(){y("")},d:function(e,b,c){ia.copyWithin(e,b,b+c)},c:function(e){var b=ia.length;e>>>=0;if(2147483648<e)return!1;
+for(var c=1;4>=c;c*=2){var d=b*(1+.2/c);d=Math.min(d,e+100663296);var g=Math;d=Math.max(e,d);g=g.min.call(g,2147483648,d+(65536-d%65536)%65536);a:{d=ja.buffer;try{ja.grow(g-d.byteLength+65535>>>16);l();var t=1;break a}catch(aa){}t=void 0}if(t)return!0}return!1}};(function(){function e(g,t){a.asm=g.exports;ja=a.asm.e;l();oa.unshift(a.asm.f);ba--;a.monitorRunDependencies&&a.monitorRunDependencies(ba);0==ba&&(null!==qa&&(clearInterval(qa),qa=null),ha&&(g=ha,ha=null,g()))}function b(g){e(g.instance)}
+function c(g){return q().then(function(t){return WebAssembly.instantiate(t,d)}).then(function(t){return t}).then(g,function(t){da("failed to asynchronously prepare wasm: "+t);y(t)})}var d={a:qd};ba++;a.monitorRunDependencies&&a.monitorRunDependencies(ba);if(a.instantiateWasm)try{return a.instantiateWasm(d,e)}catch(g){da("Module.instantiateWasm callback failed with error: "+g),ka(g)}(function(){return ea||"function"!=typeof WebAssembly.instantiateStreaming||P.startsWith("data:application/octet-stream;base64,")||
+P.startsWith("file://")||Ua||"function"!=typeof fetch?c(b):fetch(P,{credentials:"same-origin"}).then(function(g){return WebAssembly.instantiateStreaming(g,d).then(b,function(t){da("wasm streaming compile failed: "+t);da("falling back to ArrayBuffer instantiation");return c(b)})})})().catch(ka);return{}})();var Xa=a._emscripten_bind_VoidPtr___destroy___0=function(){return(Xa=a._emscripten_bind_VoidPtr___destroy___0=a.asm.h).apply(null,arguments)},za=a._emscripten_bind_DecoderBuffer_DecoderBuffer_0=
+function(){return(za=a._emscripten_bind_DecoderBuffer_DecoderBuffer_0=a.asm.i).apply(null,arguments)},Ya=a._emscripten_bind_DecoderBuffer_Init_2=function(){return(Ya=a._emscripten_bind_DecoderBuffer_Init_2=a.asm.j).apply(null,arguments)},Za=a._emscripten_bind_DecoderBuffer___destroy___0=function(){return(Za=a._emscripten_bind_DecoderBuffer___destroy___0=a.asm.k).apply(null,arguments)},Aa=a._emscripten_bind_AttributeTransformData_AttributeTransformData_0=function(){return(Aa=a._emscripten_bind_AttributeTransformData_AttributeTransformData_0=
+a.asm.l).apply(null,arguments)},$a=a._emscripten_bind_AttributeTransformData_transform_type_0=function(){return($a=a._emscripten_bind_AttributeTransformData_transform_type_0=a.asm.m).apply(null,arguments)},ab=a._emscripten_bind_AttributeTransformData___destroy___0=function(){return(ab=a._emscripten_bind_AttributeTransformData___destroy___0=a.asm.n).apply(null,arguments)},Ba=a._emscripten_bind_GeometryAttribute_GeometryAttribute_0=function(){return(Ba=a._emscripten_bind_GeometryAttribute_GeometryAttribute_0=
+a.asm.o).apply(null,arguments)},bb=a._emscripten_bind_GeometryAttribute___destroy___0=function(){return(bb=a._emscripten_bind_GeometryAttribute___destroy___0=a.asm.p).apply(null,arguments)},Ca=a._emscripten_bind_PointAttribute_PointAttribute_0=function(){return(Ca=a._emscripten_bind_PointAttribute_PointAttribute_0=a.asm.q).apply(null,arguments)},cb=a._emscripten_bind_PointAttribute_size_0=function(){return(cb=a._emscripten_bind_PointAttribute_size_0=a.asm.r).apply(null,arguments)},db=a._emscripten_bind_PointAttribute_GetAttributeTransformData_0=
+function(){return(db=a._emscripten_bind_PointAttribute_GetAttributeTransformData_0=a.asm.s).apply(null,arguments)},eb=a._emscripten_bind_PointAttribute_attribute_type_0=function(){return(eb=a._emscripten_bind_PointAttribute_attribute_type_0=a.asm.t).apply(null,arguments)},fb=a._emscripten_bind_PointAttribute_data_type_0=function(){return(fb=a._emscripten_bind_PointAttribute_data_type_0=a.asm.u).apply(null,arguments)},gb=a._emscripten_bind_PointAttribute_num_components_0=function(){return(gb=a._emscripten_bind_PointAttribute_num_components_0=
+a.asm.v).apply(null,arguments)},hb=a._emscripten_bind_PointAttribute_normalized_0=function(){return(hb=a._emscripten_bind_PointAttribute_normalized_0=a.asm.w).apply(null,arguments)},ib=a._emscripten_bind_PointAttribute_byte_stride_0=function(){return(ib=a._emscripten_bind_PointAttribute_byte_stride_0=a.asm.x).apply(null,arguments)},jb=a._emscripten_bind_PointAttribute_byte_offset_0=function(){return(jb=a._emscripten_bind_PointAttribute_byte_offset_0=a.asm.y).apply(null,arguments)},kb=a._emscripten_bind_PointAttribute_unique_id_0=
+function(){return(kb=a._emscripten_bind_PointAttribute_unique_id_0=a.asm.z).apply(null,arguments)},lb=a._emscripten_bind_PointAttribute___destroy___0=function(){return(lb=a._emscripten_bind_PointAttribute___destroy___0=a.asm.A).apply(null,arguments)},Da=a._emscripten_bind_AttributeQuantizationTransform_AttributeQuantizationTransform_0=function(){return(Da=a._emscripten_bind_AttributeQuantizationTransform_AttributeQuantizationTransform_0=a.asm.B).apply(null,arguments)},mb=a._emscripten_bind_AttributeQuantizationTransform_InitFromAttribute_1=
+function(){return(mb=a._emscripten_bind_AttributeQuantizationTransform_InitFromAttribute_1=a.asm.C).apply(null,arguments)},nb=a._emscripten_bind_AttributeQuantizationTransform_quantization_bits_0=function(){return(nb=a._emscripten_bind_AttributeQuantizationTransform_quantization_bits_0=a.asm.D).apply(null,arguments)},ob=a._emscripten_bind_AttributeQuantizationTransform_min_value_1=function(){return(ob=a._emscripten_bind_AttributeQuantizationTransform_min_value_1=a.asm.E).apply(null,arguments)},pb=
+a._emscripten_bind_AttributeQuantizationTransform_range_0=function(){return(pb=a._emscripten_bind_AttributeQuantizationTransform_range_0=a.asm.F).apply(null,arguments)},qb=a._emscripten_bind_AttributeQuantizationTransform___destroy___0=function(){return(qb=a._emscripten_bind_AttributeQuantizationTransform___destroy___0=a.asm.G).apply(null,arguments)},Ea=a._emscripten_bind_AttributeOctahedronTransform_AttributeOctahedronTransform_0=function(){return(Ea=a._emscripten_bind_AttributeOctahedronTransform_AttributeOctahedronTransform_0=
+a.asm.H).apply(null,arguments)},rb=a._emscripten_bind_AttributeOctahedronTransform_InitFromAttribute_1=function(){return(rb=a._emscripten_bind_AttributeOctahedronTransform_InitFromAttribute_1=a.asm.I).apply(null,arguments)},sb=a._emscripten_bind_AttributeOctahedronTransform_quantization_bits_0=function(){return(sb=a._emscripten_bind_AttributeOctahedronTransform_quantization_bits_0=a.asm.J).apply(null,arguments)},tb=a._emscripten_bind_AttributeOctahedronTransform___destroy___0=function(){return(tb=
+a._emscripten_bind_AttributeOctahedronTransform___destroy___0=a.asm.K).apply(null,arguments)},Fa=a._emscripten_bind_PointCloud_PointCloud_0=function(){return(Fa=a._emscripten_bind_PointCloud_PointCloud_0=a.asm.L).apply(null,arguments)},ub=a._emscripten_bind_PointCloud_num_attributes_0=function(){return(ub=a._emscripten_bind_PointCloud_num_attributes_0=a.asm.M).apply(null,arguments)},vb=a._emscripten_bind_PointCloud_num_points_0=function(){return(vb=a._emscripten_bind_PointCloud_num_points_0=a.asm.N).apply(null,
+arguments)},wb=a._emscripten_bind_PointCloud___destroy___0=function(){return(wb=a._emscripten_bind_PointCloud___destroy___0=a.asm.O).apply(null,arguments)},Ga=a._emscripten_bind_Mesh_Mesh_0=function(){return(Ga=a._emscripten_bind_Mesh_Mesh_0=a.asm.P).apply(null,arguments)},xb=a._emscripten_bind_Mesh_num_faces_0=function(){return(xb=a._emscripten_bind_Mesh_num_faces_0=a.asm.Q).apply(null,arguments)},yb=a._emscripten_bind_Mesh_num_attributes_0=function(){return(yb=a._emscripten_bind_Mesh_num_attributes_0=
+a.asm.R).apply(null,arguments)},zb=a._emscripten_bind_Mesh_num_points_0=function(){return(zb=a._emscripten_bind_Mesh_num_points_0=a.asm.S).apply(null,arguments)},Ab=a._emscripten_bind_Mesh___destroy___0=function(){return(Ab=a._emscripten_bind_Mesh___destroy___0=a.asm.T).apply(null,arguments)},Ha=a._emscripten_bind_Metadata_Metadata_0=function(){return(Ha=a._emscripten_bind_Metadata_Metadata_0=a.asm.U).apply(null,arguments)},Bb=a._emscripten_bind_Metadata___destroy___0=function(){return(Bb=a._emscripten_bind_Metadata___destroy___0=
+a.asm.V).apply(null,arguments)},Cb=a._emscripten_bind_Status_code_0=function(){return(Cb=a._emscripten_bind_Status_code_0=a.asm.W).apply(null,arguments)},Db=a._emscripten_bind_Status_ok_0=function(){return(Db=a._emscripten_bind_Status_ok_0=a.asm.X).apply(null,arguments)},Eb=a._emscripten_bind_Status_error_msg_0=function(){return(Eb=a._emscripten_bind_Status_error_msg_0=a.asm.Y).apply(null,arguments)},Fb=a._emscripten_bind_Status___destroy___0=function(){return(Fb=a._emscripten_bind_Status___destroy___0=
+a.asm.Z).apply(null,arguments)},Ia=a._emscripten_bind_DracoFloat32Array_DracoFloat32Array_0=function(){return(Ia=a._emscripten_bind_DracoFloat32Array_DracoFloat32Array_0=a.asm._).apply(null,arguments)},Gb=a._emscripten_bind_DracoFloat32Array_GetValue_1=function(){return(Gb=a._emscripten_bind_DracoFloat32Array_GetValue_1=a.asm.$).apply(null,arguments)},Hb=a._emscripten_bind_DracoFloat32Array_size_0=function(){return(Hb=a._emscripten_bind_DracoFloat32Array_size_0=a.asm.aa).apply(null,arguments)},Ib=
+a._emscripten_bind_DracoFloat32Array___destroy___0=function(){return(Ib=a._emscripten_bind_DracoFloat32Array___destroy___0=a.asm.ba).apply(null,arguments)},Ja=a._emscripten_bind_DracoInt8Array_DracoInt8Array_0=function(){return(Ja=a._emscripten_bind_DracoInt8Array_DracoInt8Array_0=a.asm.ca).apply(null,arguments)},Jb=a._emscripten_bind_DracoInt8Array_GetValue_1=function(){return(Jb=a._emscripten_bind_DracoInt8Array_GetValue_1=a.asm.da).apply(null,arguments)},Kb=a._emscripten_bind_DracoInt8Array_size_0=
+function(){return(Kb=a._emscripten_bind_DracoInt8Array_size_0=a.asm.ea).apply(null,arguments)},Lb=a._emscripten_bind_DracoInt8Array___destroy___0=function(){return(Lb=a._emscripten_bind_DracoInt8Array___destroy___0=a.asm.fa).apply(null,arguments)},Ka=a._emscripten_bind_DracoUInt8Array_DracoUInt8Array_0=function(){return(Ka=a._emscripten_bind_DracoUInt8Array_DracoUInt8Array_0=a.asm.ga).apply(null,arguments)},Mb=a._emscripten_bind_DracoUInt8Array_GetValue_1=function(){return(Mb=a._emscripten_bind_DracoUInt8Array_GetValue_1=
+a.asm.ha).apply(null,arguments)},Nb=a._emscripten_bind_DracoUInt8Array_size_0=function(){return(Nb=a._emscripten_bind_DracoUInt8Array_size_0=a.asm.ia).apply(null,arguments)},Ob=a._emscripten_bind_DracoUInt8Array___destroy___0=function(){return(Ob=a._emscripten_bind_DracoUInt8Array___destroy___0=a.asm.ja).apply(null,arguments)},La=a._emscripten_bind_DracoInt16Array_DracoInt16Array_0=function(){return(La=a._emscripten_bind_DracoInt16Array_DracoInt16Array_0=a.asm.ka).apply(null,arguments)},Pb=a._emscripten_bind_DracoInt16Array_GetValue_1=
+function(){return(Pb=a._emscripten_bind_DracoInt16Array_GetValue_1=a.asm.la).apply(null,arguments)},Qb=a._emscripten_bind_DracoInt16Array_size_0=function(){return(Qb=a._emscripten_bind_DracoInt16Array_size_0=a.asm.ma).apply(null,arguments)},Rb=a._emscripten_bind_DracoInt16Array___destroy___0=function(){return(Rb=a._emscripten_bind_DracoInt16Array___destroy___0=a.asm.na).apply(null,arguments)},Ma=a._emscripten_bind_DracoUInt16Array_DracoUInt16Array_0=function(){return(Ma=a._emscripten_bind_DracoUInt16Array_DracoUInt16Array_0=
+a.asm.oa).apply(null,arguments)},Sb=a._emscripten_bind_DracoUInt16Array_GetValue_1=function(){return(Sb=a._emscripten_bind_DracoUInt16Array_GetValue_1=a.asm.pa).apply(null,arguments)},Tb=a._emscripten_bind_DracoUInt16Array_size_0=function(){return(Tb=a._emscripten_bind_DracoUInt16Array_size_0=a.asm.qa).apply(null,arguments)},Ub=a._emscripten_bind_DracoUInt16Array___destroy___0=function(){return(Ub=a._emscripten_bind_DracoUInt16Array___destroy___0=a.asm.ra).apply(null,arguments)},Na=a._emscripten_bind_DracoInt32Array_DracoInt32Array_0=
+function(){return(Na=a._emscripten_bind_DracoInt32Array_DracoInt32Array_0=a.asm.sa).apply(null,arguments)},Vb=a._emscripten_bind_DracoInt32Array_GetValue_1=function(){return(Vb=a._emscripten_bind_DracoInt32Array_GetValue_1=a.asm.ta).apply(null,arguments)},Wb=a._emscripten_bind_DracoInt32Array_size_0=function(){return(Wb=a._emscripten_bind_DracoInt32Array_size_0=a.asm.ua).apply(null,arguments)},Xb=a._emscripten_bind_DracoInt32Array___destroy___0=function(){return(Xb=a._emscripten_bind_DracoInt32Array___destroy___0=
+a.asm.va).apply(null,arguments)},Oa=a._emscripten_bind_DracoUInt32Array_DracoUInt32Array_0=function(){return(Oa=a._emscripten_bind_DracoUInt32Array_DracoUInt32Array_0=a.asm.wa).apply(null,arguments)},Yb=a._emscripten_bind_DracoUInt32Array_GetValue_1=function(){return(Yb=a._emscripten_bind_DracoUInt32Array_GetValue_1=a.asm.xa).apply(null,arguments)},Zb=a._emscripten_bind_DracoUInt32Array_size_0=function(){return(Zb=a._emscripten_bind_DracoUInt32Array_size_0=a.asm.ya).apply(null,arguments)},$b=a._emscripten_bind_DracoUInt32Array___destroy___0=
+function(){return($b=a._emscripten_bind_DracoUInt32Array___destroy___0=a.asm.za).apply(null,arguments)},Pa=a._emscripten_bind_MetadataQuerier_MetadataQuerier_0=function(){return(Pa=a._emscripten_bind_MetadataQuerier_MetadataQuerier_0=a.asm.Aa).apply(null,arguments)},ac=a._emscripten_bind_MetadataQuerier_HasEntry_2=function(){return(ac=a._emscripten_bind_MetadataQuerier_HasEntry_2=a.asm.Ba).apply(null,arguments)},bc=a._emscripten_bind_MetadataQuerier_GetIntEntry_2=function(){return(bc=a._emscripten_bind_MetadataQuerier_GetIntEntry_2=
+a.asm.Ca).apply(null,arguments)},cc=a._emscripten_bind_MetadataQuerier_GetIntEntryArray_3=function(){return(cc=a._emscripten_bind_MetadataQuerier_GetIntEntryArray_3=a.asm.Da).apply(null,arguments)},dc=a._emscripten_bind_MetadataQuerier_GetDoubleEntry_2=function(){return(dc=a._emscripten_bind_MetadataQuerier_GetDoubleEntry_2=a.asm.Ea).apply(null,arguments)},ec=a._emscripten_bind_MetadataQuerier_GetStringEntry_2=function(){return(ec=a._emscripten_bind_MetadataQuerier_GetStringEntry_2=a.asm.Fa).apply(null,
+arguments)},fc=a._emscripten_bind_MetadataQuerier_NumEntries_1=function(){return(fc=a._emscripten_bind_MetadataQuerier_NumEntries_1=a.asm.Ga).apply(null,arguments)},gc=a._emscripten_bind_MetadataQuerier_GetEntryName_2=function(){return(gc=a._emscripten_bind_MetadataQuerier_GetEntryName_2=a.asm.Ha).apply(null,arguments)},hc=a._emscripten_bind_MetadataQuerier___destroy___0=function(){return(hc=a._emscripten_bind_MetadataQuerier___destroy___0=a.asm.Ia).apply(null,arguments)},Qa=a._emscripten_bind_Decoder_Decoder_0=
+function(){return(Qa=a._emscripten_bind_Decoder_Decoder_0=a.asm.Ja).apply(null,arguments)},ic=a._emscripten_bind_Decoder_DecodeArrayToPointCloud_3=function(){return(ic=a._emscripten_bind_Decoder_DecodeArrayToPointCloud_3=a.asm.Ka).apply(null,arguments)},jc=a._emscripten_bind_Decoder_DecodeArrayToMesh_3=function(){return(jc=a._emscripten_bind_Decoder_DecodeArrayToMesh_3=a.asm.La).apply(null,arguments)},kc=a._emscripten_bind_Decoder_GetAttributeId_2=function(){return(kc=a._emscripten_bind_Decoder_GetAttributeId_2=
+a.asm.Ma).apply(null,arguments)},lc=a._emscripten_bind_Decoder_GetAttributeIdByName_2=function(){return(lc=a._emscripten_bind_Decoder_GetAttributeIdByName_2=a.asm.Na).apply(null,arguments)},mc=a._emscripten_bind_Decoder_GetAttributeIdByMetadataEntry_3=function(){return(mc=a._emscripten_bind_Decoder_GetAttributeIdByMetadataEntry_3=a.asm.Oa).apply(null,arguments)},nc=a._emscripten_bind_Decoder_GetAttribute_2=function(){return(nc=a._emscripten_bind_Decoder_GetAttribute_2=a.asm.Pa).apply(null,arguments)},
+oc=a._emscripten_bind_Decoder_GetAttributeByUniqueId_2=function(){return(oc=a._emscripten_bind_Decoder_GetAttributeByUniqueId_2=a.asm.Qa).apply(null,arguments)},pc=a._emscripten_bind_Decoder_GetMetadata_1=function(){return(pc=a._emscripten_bind_Decoder_GetMetadata_1=a.asm.Ra).apply(null,arguments)},qc=a._emscripten_bind_Decoder_GetAttributeMetadata_2=function(){return(qc=a._emscripten_bind_Decoder_GetAttributeMetadata_2=a.asm.Sa).apply(null,arguments)},rc=a._emscripten_bind_Decoder_GetFaceFromMesh_3=
+function(){return(rc=a._emscripten_bind_Decoder_GetFaceFromMesh_3=a.asm.Ta).apply(null,arguments)},sc=a._emscripten_bind_Decoder_GetTriangleStripsFromMesh_2=function(){return(sc=a._emscripten_bind_Decoder_GetTriangleStripsFromMesh_2=a.asm.Ua).apply(null,arguments)},tc=a._emscripten_bind_Decoder_GetTrianglesUInt16Array_3=function(){return(tc=a._emscripten_bind_Decoder_GetTrianglesUInt16Array_3=a.asm.Va).apply(null,arguments)},uc=a._emscripten_bind_Decoder_GetTrianglesUInt32Array_3=function(){return(uc=
+a._emscripten_bind_Decoder_GetTrianglesUInt32Array_3=a.asm.Wa).apply(null,arguments)},vc=a._emscripten_bind_Decoder_GetAttributeFloat_3=function(){return(vc=a._emscripten_bind_Decoder_GetAttributeFloat_3=a.asm.Xa).apply(null,arguments)},wc=a._emscripten_bind_Decoder_GetAttributeFloatForAllPoints_3=function(){return(wc=a._emscripten_bind_Decoder_GetAttributeFloatForAllPoints_3=a.asm.Ya).apply(null,arguments)},xc=a._emscripten_bind_Decoder_GetAttributeIntForAllPoints_3=function(){return(xc=a._emscripten_bind_Decoder_GetAttributeIntForAllPoints_3=
+a.asm.Za).apply(null,arguments)},yc=a._emscripten_bind_Decoder_GetAttributeInt8ForAllPoints_3=function(){return(yc=a._emscripten_bind_Decoder_GetAttributeInt8ForAllPoints_3=a.asm._a).apply(null,arguments)},zc=a._emscripten_bind_Decoder_GetAttributeUInt8ForAllPoints_3=function(){return(zc=a._emscripten_bind_Decoder_GetAttributeUInt8ForAllPoints_3=a.asm.$a).apply(null,arguments)},Ac=a._emscripten_bind_Decoder_GetAttributeInt16ForAllPoints_3=function(){return(Ac=a._emscripten_bind_Decoder_GetAttributeInt16ForAllPoints_3=
+a.asm.ab).apply(null,arguments)},Bc=a._emscripten_bind_Decoder_GetAttributeUInt16ForAllPoints_3=function(){return(Bc=a._emscripten_bind_Decoder_GetAttributeUInt16ForAllPoints_3=a.asm.bb).apply(null,arguments)},Cc=a._emscripten_bind_Decoder_GetAttributeInt32ForAllPoints_3=function(){return(Cc=a._emscripten_bind_Decoder_GetAttributeInt32ForAllPoints_3=a.asm.cb).apply(null,arguments)},Dc=a._emscripten_bind_Decoder_GetAttributeUInt32ForAllPoints_3=function(){return(Dc=a._emscripten_bind_Decoder_GetAttributeUInt32ForAllPoints_3=
+a.asm.db).apply(null,arguments)},Ec=a._emscripten_bind_Decoder_GetAttributeDataArrayForAllPoints_5=function(){return(Ec=a._emscripten_bind_Decoder_GetAttributeDataArrayForAllPoints_5=a.asm.eb).apply(null,arguments)},Fc=a._emscripten_bind_Decoder_SkipAttributeTransform_1=function(){return(Fc=a._emscripten_bind_Decoder_SkipAttributeTransform_1=a.asm.fb).apply(null,arguments)},Gc=a._emscripten_bind_Decoder_GetEncodedGeometryType_Deprecated_1=function(){return(Gc=a._emscripten_bind_Decoder_GetEncodedGeometryType_Deprecated_1=
+a.asm.gb).apply(null,arguments)},Hc=a._emscripten_bind_Decoder_DecodeBufferToPointCloud_2=function(){return(Hc=a._emscripten_bind_Decoder_DecodeBufferToPointCloud_2=a.asm.hb).apply(null,arguments)},Ic=a._emscripten_bind_Decoder_DecodeBufferToMesh_2=function(){return(Ic=a._emscripten_bind_Decoder_DecodeBufferToMesh_2=a.asm.ib).apply(null,arguments)},Jc=a._emscripten_bind_Decoder___destroy___0=function(){return(Jc=a._emscripten_bind_Decoder___destroy___0=a.asm.jb).apply(null,arguments)},Kc=a._emscripten_enum_draco_AttributeTransformType_ATTRIBUTE_INVALID_TRANSFORM=
+function(){return(Kc=a._emscripten_enum_draco_AttributeTransformType_ATTRIBUTE_INVALID_TRANSFORM=a.asm.kb).apply(null,arguments)},Lc=a._emscripten_enum_draco_AttributeTransformType_ATTRIBUTE_NO_TRANSFORM=function(){return(Lc=a._emscripten_enum_draco_AttributeTransformType_ATTRIBUTE_NO_TRANSFORM=a.asm.lb).apply(null,arguments)},Mc=a._emscripten_enum_draco_AttributeTransformType_ATTRIBUTE_QUANTIZATION_TRANSFORM=function(){return(Mc=a._emscripten_enum_draco_AttributeTransformType_ATTRIBUTE_QUANTIZATION_TRANSFORM=
+a.asm.mb).apply(null,arguments)},Nc=a._emscripten_enum_draco_AttributeTransformType_ATTRIBUTE_OCTAHEDRON_TRANSFORM=function(){return(Nc=a._emscripten_enum_draco_AttributeTransformType_ATTRIBUTE_OCTAHEDRON_TRANSFORM=a.asm.nb).apply(null,arguments)},Oc=a._emscripten_enum_draco_GeometryAttribute_Type_INVALID=function(){return(Oc=a._emscripten_enum_draco_GeometryAttribute_Type_INVALID=a.asm.ob).apply(null,arguments)},Pc=a._emscripten_enum_draco_GeometryAttribute_Type_POSITION=function(){return(Pc=a._emscripten_enum_draco_GeometryAttribute_Type_POSITION=
+a.asm.pb).apply(null,arguments)},Qc=a._emscripten_enum_draco_GeometryAttribute_Type_NORMAL=function(){return(Qc=a._emscripten_enum_draco_GeometryAttribute_Type_NORMAL=a.asm.qb).apply(null,arguments)},Rc=a._emscripten_enum_draco_GeometryAttribute_Type_COLOR=function(){return(Rc=a._emscripten_enum_draco_GeometryAttribute_Type_COLOR=a.asm.rb).apply(null,arguments)},Sc=a._emscripten_enum_draco_GeometryAttribute_Type_TEX_COORD=function(){return(Sc=a._emscripten_enum_draco_GeometryAttribute_Type_TEX_COORD=
+a.asm.sb).apply(null,arguments)},Tc=a._emscripten_enum_draco_GeometryAttribute_Type_GENERIC=function(){return(Tc=a._emscripten_enum_draco_GeometryAttribute_Type_GENERIC=a.asm.tb).apply(null,arguments)},Uc=a._emscripten_enum_draco_EncodedGeometryType_INVALID_GEOMETRY_TYPE=function(){return(Uc=a._emscripten_enum_draco_EncodedGeometryType_INVALID_GEOMETRY_TYPE=a.asm.ub).apply(null,arguments)},Vc=a._emscripten_enum_draco_EncodedGeometryType_POINT_CLOUD=function(){return(Vc=a._emscripten_enum_draco_EncodedGeometryType_POINT_CLOUD=
+a.asm.vb).apply(null,arguments)},Wc=a._emscripten_enum_draco_EncodedGeometryType_TRIANGULAR_MESH=function(){return(Wc=a._emscripten_enum_draco_EncodedGeometryType_TRIANGULAR_MESH=a.asm.wb).apply(null,arguments)},Xc=a._emscripten_enum_draco_DataType_DT_INVALID=function(){return(Xc=a._emscripten_enum_draco_DataType_DT_INVALID=a.asm.xb).apply(null,arguments)},Yc=a._emscripten_enum_draco_DataType_DT_INT8=function(){return(Yc=a._emscripten_enum_draco_DataType_DT_INT8=a.asm.yb).apply(null,arguments)},Zc=
+a._emscripten_enum_draco_DataType_DT_UINT8=function(){return(Zc=a._emscripten_enum_draco_DataType_DT_UINT8=a.asm.zb).apply(null,arguments)},$c=a._emscripten_enum_draco_DataType_DT_INT16=function(){return($c=a._emscripten_enum_draco_DataType_DT_INT16=a.asm.Ab).apply(null,arguments)},ad=a._emscripten_enum_draco_DataType_DT_UINT16=function(){return(ad=a._emscripten_enum_draco_DataType_DT_UINT16=a.asm.Bb).apply(null,arguments)},bd=a._emscripten_enum_draco_DataType_DT_INT32=function(){return(bd=a._emscripten_enum_draco_DataType_DT_INT32=
+a.asm.Cb).apply(null,arguments)},cd=a._emscripten_enum_draco_DataType_DT_UINT32=function(){return(cd=a._emscripten_enum_draco_DataType_DT_UINT32=a.asm.Db).apply(null,arguments)},dd=a._emscripten_enum_draco_DataType_DT_INT64=function(){return(dd=a._emscripten_enum_draco_DataType_DT_INT64=a.asm.Eb).apply(null,arguments)},ed=a._emscripten_enum_draco_DataType_DT_UINT64=function(){return(ed=a._emscripten_enum_draco_DataType_DT_UINT64=a.asm.Fb).apply(null,arguments)},fd=a._emscripten_enum_draco_DataType_DT_FLOAT32=
+function(){return(fd=a._emscripten_enum_draco_DataType_DT_FLOAT32=a.asm.Gb).apply(null,arguments)},gd=a._emscripten_enum_draco_DataType_DT_FLOAT64=function(){return(gd=a._emscripten_enum_draco_DataType_DT_FLOAT64=a.asm.Hb).apply(null,arguments)},hd=a._emscripten_enum_draco_DataType_DT_BOOL=function(){return(hd=a._emscripten_enum_draco_DataType_DT_BOOL=a.asm.Ib).apply(null,arguments)},id=a._emscripten_enum_draco_DataType_DT_TYPES_COUNT=function(){return(id=a._emscripten_enum_draco_DataType_DT_TYPES_COUNT=
+a.asm.Jb).apply(null,arguments)},jd=a._emscripten_enum_draco_StatusCode_OK=function(){return(jd=a._emscripten_enum_draco_StatusCode_OK=a.asm.Kb).apply(null,arguments)},kd=a._emscripten_enum_draco_StatusCode_DRACO_ERROR=function(){return(kd=a._emscripten_enum_draco_StatusCode_DRACO_ERROR=a.asm.Lb).apply(null,arguments)},ld=a._emscripten_enum_draco_StatusCode_IO_ERROR=function(){return(ld=a._emscripten_enum_draco_StatusCode_IO_ERROR=a.asm.Mb).apply(null,arguments)},md=a._emscripten_enum_draco_StatusCode_INVALID_PARAMETER=
+function(){return(md=a._emscripten_enum_draco_StatusCode_INVALID_PARAMETER=a.asm.Nb).apply(null,arguments)},nd=a._emscripten_enum_draco_StatusCode_UNSUPPORTED_VERSION=function(){return(nd=a._emscripten_enum_draco_StatusCode_UNSUPPORTED_VERSION=a.asm.Ob).apply(null,arguments)},od=a._emscripten_enum_draco_StatusCode_UNKNOWN_VERSION=function(){return(od=a._emscripten_enum_draco_StatusCode_UNKNOWN_VERSION=a.asm.Pb).apply(null,arguments)};a._malloc=function(){return(a._malloc=a.asm.Qb).apply(null,arguments)};
+a._free=function(){return(a._free=a.asm.Rb).apply(null,arguments)};var ua=function(){return(ua=a.asm.Sb).apply(null,arguments)};a.___start_em_js=11660;a.___stop_em_js=11758;var la;ha=function b(){la||F();la||(ha=b)};if(a.preInit)for("function"==typeof a.preInit&&(a.preInit=[a.preInit]);0<a.preInit.length;)a.preInit.pop()();F();v.prototype=Object.create(v.prototype);v.prototype.constructor=v;v.prototype.__class__=v;v.__cache__={};a.WrapperObject=v;a.getCache=w;a.wrapPointer=B;a.castObject=function(b,
+c){return B(b.ptr,c)};a.NULL=B(0);a.destroy=function(b){if(!b.__destroy__)throw"Error: Cannot destroy object. (Did you create it yourself?)";b.__destroy__();delete w(b.__class__)[b.ptr]};a.compare=function(b,c){return b.ptr===c.ptr};a.getPointer=function(b){return b.ptr};a.getClass=function(b){return b.__class__};var r={buffer:0,size:0,pos:0,temps:[],needed:0,prepare:function(){if(r.needed){for(var b=0;b<r.temps.length;b++)a._free(r.temps[b]);r.temps.length=0;a._free(r.buffer);r.buffer=0;r.size+=
+r.needed;r.needed=0}r.buffer||(r.size+=128,r.buffer=a._malloc(r.size),r.buffer||y(void 0));r.pos=0},alloc:function(b,c){r.buffer||y(void 0);b=b.length*c.BYTES_PER_ELEMENT;b=b+7&-8;r.pos+b>=r.size?(0<b||y(void 0),r.needed+=b,c=a._malloc(b),r.temps.push(c)):(c=r.buffer+r.pos,r.pos+=b);return c},copy:function(b,c,d){d>>>=0;switch(c.BYTES_PER_ELEMENT){case 2:d>>>=1;break;case 4:d>>>=2;break;case 8:d>>>=3}for(var g=0;g<b.length;g++)c[d+g]=b[g]}};X.prototype=Object.create(v.prototype);X.prototype.constructor=
+X;X.prototype.__class__=X;X.__cache__={};a.VoidPtr=X;X.prototype.__destroy__=X.prototype.__destroy__=function(){Xa(this.ptr)};S.prototype=Object.create(v.prototype);S.prototype.constructor=S;S.prototype.__class__=S;S.__cache__={};a.DecoderBuffer=S;S.prototype.Init=S.prototype.Init=function(b,c){var d=this.ptr;r.prepare();"object"==typeof b&&(b=Z(b));c&&"object"===typeof c&&(c=c.ptr);Ya(d,b,c)};S.prototype.__destroy__=S.prototype.__destroy__=function(){Za(this.ptr)};Q.prototype=Object.create(v.prototype);
+Q.prototype.constructor=Q;Q.prototype.__class__=Q;Q.__cache__={};a.AttributeTransformData=Q;Q.prototype.transform_type=Q.prototype.transform_type=function(){return $a(this.ptr)};Q.prototype.__destroy__=Q.prototype.__destroy__=function(){ab(this.ptr)};V.prototype=Object.create(v.prototype);V.prototype.constructor=V;V.prototype.__class__=V;V.__cache__={};a.GeometryAttribute=V;V.prototype.__destroy__=V.prototype.__destroy__=function(){bb(this.ptr)};x.prototype=Object.create(v.prototype);x.prototype.constructor=
+x;x.prototype.__class__=x;x.__cache__={};a.PointAttribute=x;x.prototype.size=x.prototype.size=function(){return cb(this.ptr)};x.prototype.GetAttributeTransformData=x.prototype.GetAttributeTransformData=function(){return B(db(this.ptr),Q)};x.prototype.attribute_type=x.prototype.attribute_type=function(){return eb(this.ptr)};x.prototype.data_type=x.prototype.data_type=function(){return fb(this.ptr)};x.prototype.num_components=x.prototype.num_components=function(){return gb(this.ptr)};x.prototype.normalized=
+x.prototype.normalized=function(){return!!hb(this.ptr)};x.prototype.byte_stride=x.prototype.byte_stride=function(){return ib(this.ptr)};x.prototype.byte_offset=x.prototype.byte_offset=function(){return jb(this.ptr)};x.prototype.unique_id=x.prototype.unique_id=function(){return kb(this.ptr)};x.prototype.__destroy__=x.prototype.__destroy__=function(){lb(this.ptr)};D.prototype=Object.create(v.prototype);D.prototype.constructor=D;D.prototype.__class__=D;D.__cache__={};a.AttributeQuantizationTransform=
+D;D.prototype.InitFromAttribute=D.prototype.InitFromAttribute=function(b){var c=this.ptr;b&&"object"===typeof b&&(b=b.ptr);return!!mb(c,b)};D.prototype.quantization_bits=D.prototype.quantization_bits=function(){return nb(this.ptr)};D.prototype.min_value=D.prototype.min_value=function(b){var c=this.ptr;b&&"object"===typeof b&&(b=b.ptr);return ob(c,b)};D.prototype.range=D.prototype.range=function(){return pb(this.ptr)};D.prototype.__destroy__=D.prototype.__destroy__=function(){qb(this.ptr)};G.prototype=
+Object.create(v.prototype);G.prototype.constructor=G;G.prototype.__class__=G;G.__cache__={};a.AttributeOctahedronTransform=G;G.prototype.InitFromAttribute=G.prototype.InitFromAttribute=function(b){var c=this.ptr;b&&"object"===typeof b&&(b=b.ptr);return!!rb(c,b)};G.prototype.quantization_bits=G.prototype.quantization_bits=function(){return sb(this.ptr)};G.prototype.__destroy__=G.prototype.__destroy__=function(){tb(this.ptr)};H.prototype=Object.create(v.prototype);H.prototype.constructor=H;H.prototype.__class__=
+H;H.__cache__={};a.PointCloud=H;H.prototype.num_attributes=H.prototype.num_attributes=function(){return ub(this.ptr)};H.prototype.num_points=H.prototype.num_points=function(){return vb(this.ptr)};H.prototype.__destroy__=H.prototype.__destroy__=function(){wb(this.ptr)};E.prototype=Object.create(v.prototype);E.prototype.constructor=E;E.prototype.__class__=E;E.__cache__={};a.Mesh=E;E.prototype.num_faces=E.prototype.num_faces=function(){return xb(this.ptr)};E.prototype.num_attributes=E.prototype.num_attributes=
+function(){return yb(this.ptr)};E.prototype.num_points=E.prototype.num_points=function(){return zb(this.ptr)};E.prototype.__destroy__=E.prototype.__destroy__=function(){Ab(this.ptr)};T.prototype=Object.create(v.prototype);T.prototype.constructor=T;T.prototype.__class__=T;T.__cache__={};a.Metadata=T;T.prototype.__destroy__=T.prototype.__destroy__=function(){Bb(this.ptr)};C.prototype=Object.create(v.prototype);C.prototype.constructor=C;C.prototype.__class__=C;C.__cache__={};a.Status=C;C.prototype.code=
+C.prototype.code=function(){return Cb(this.ptr)};C.prototype.ok=C.prototype.ok=function(){return!!Db(this.ptr)};C.prototype.error_msg=C.prototype.error_msg=function(){return p(Eb(this.ptr))};C.prototype.__destroy__=C.prototype.__destroy__=function(){Fb(this.ptr)};I.prototype=Object.create(v.prototype);I.prototype.constructor=I;I.prototype.__class__=I;I.__cache__={};a.DracoFloat32Array=I;I.prototype.GetValue=I.prototype.GetValue=function(b){var c=this.ptr;b&&"object"===typeof b&&(b=b.ptr);return Gb(c,
+b)};I.prototype.size=I.prototype.size=function(){return Hb(this.ptr)};I.prototype.__destroy__=I.prototype.__destroy__=function(){Ib(this.ptr)};J.prototype=Object.create(v.prototype);J.prototype.constructor=J;J.prototype.__class__=J;J.__cache__={};a.DracoInt8Array=J;J.prototype.GetValue=J.prototype.GetValue=function(b){var c=this.ptr;b&&"object"===typeof b&&(b=b.ptr);return Jb(c,b)};J.prototype.size=J.prototype.size=function(){return Kb(this.ptr)};J.prototype.__destroy__=J.prototype.__destroy__=function(){Lb(this.ptr)};
+K.prototype=Object.create(v.prototype);K.prototype.constructor=K;K.prototype.__class__=K;K.__cache__={};a.DracoUInt8Array=K;K.prototype.GetValue=K.prototype.GetValue=function(b){var c=this.ptr;b&&"object"===typeof b&&(b=b.ptr);return Mb(c,b)};K.prototype.size=K.prototype.size=function(){return Nb(this.ptr)};K.prototype.__destroy__=K.prototype.__destroy__=function(){Ob(this.ptr)};L.prototype=Object.create(v.prototype);L.prototype.constructor=L;L.prototype.__class__=L;L.__cache__={};a.DracoInt16Array=
+L;L.prototype.GetValue=L.prototype.GetValue=function(b){var c=this.ptr;b&&"object"===typeof b&&(b=b.ptr);return Pb(c,b)};L.prototype.size=L.prototype.size=function(){return Qb(this.ptr)};L.prototype.__destroy__=L.prototype.__destroy__=function(){Rb(this.ptr)};M.prototype=Object.create(v.prototype);M.prototype.constructor=M;M.prototype.__class__=M;M.__cache__={};a.DracoUInt16Array=M;M.prototype.GetValue=M.prototype.GetValue=function(b){var c=this.ptr;b&&"object"===typeof b&&(b=b.ptr);return Sb(c,b)};
+M.prototype.size=M.prototype.size=function(){return Tb(this.ptr)};M.prototype.__destroy__=M.prototype.__destroy__=function(){Ub(this.ptr)};N.prototype=Object.create(v.prototype);N.prototype.constructor=N;N.prototype.__class__=N;N.__cache__={};a.DracoInt32Array=N;N.prototype.GetValue=N.prototype.GetValue=function(b){var c=this.ptr;b&&"object"===typeof b&&(b=b.ptr);return Vb(c,b)};N.prototype.size=N.prototype.size=function(){return Wb(this.ptr)};N.prototype.__destroy__=N.prototype.__destroy__=function(){Xb(this.ptr)};
+O.prototype=Object.create(v.prototype);O.prototype.constructor=O;O.prototype.__class__=O;O.__cache__={};a.DracoUInt32Array=O;O.prototype.GetValue=O.prototype.GetValue=function(b){var c=this.ptr;b&&"object"===typeof b&&(b=b.ptr);return Yb(c,b)};O.prototype.size=O.prototype.size=function(){return Zb(this.ptr)};O.prototype.__destroy__=O.prototype.__destroy__=function(){$b(this.ptr)};z.prototype=Object.create(v.prototype);z.prototype.constructor=z;z.prototype.__class__=z;z.__cache__={};a.MetadataQuerier=
+z;z.prototype.HasEntry=z.prototype.HasEntry=function(b,c){var d=this.ptr;r.prepare();b&&"object"===typeof b&&(b=b.ptr);c=c&&"object"===typeof c?c.ptr:R(c);return!!ac(d,b,c)};z.prototype.GetIntEntry=z.prototype.GetIntEntry=function(b,c){var d=this.ptr;r.prepare();b&&"object"===typeof b&&(b=b.ptr);c=c&&"object"===typeof c?c.ptr:R(c);return bc(d,b,c)};z.prototype.GetIntEntryArray=z.prototype.GetIntEntryArray=function(b,c,d){var g=this.ptr;r.prepare();b&&"object"===typeof b&&(b=b.ptr);c=c&&"object"===
+typeof c?c.ptr:R(c);d&&"object"===typeof d&&(d=d.ptr);cc(g,b,c,d)};z.prototype.GetDoubleEntry=z.prototype.GetDoubleEntry=function(b,c){var d=this.ptr;r.prepare();b&&"object"===typeof b&&(b=b.ptr);c=c&&"object"===typeof c?c.ptr:R(c);return dc(d,b,c)};z.prototype.GetStringEntry=z.prototype.GetStringEntry=function(b,c){var d=this.ptr;r.prepare();b&&"object"===typeof b&&(b=b.ptr);c=c&&"object"===typeof c?c.ptr:R(c);return p(ec(d,b,c))};z.prototype.NumEntries=z.prototype.NumEntries=function(b){var c=this.ptr;
+b&&"object"===typeof b&&(b=b.ptr);return fc(c,b)};z.prototype.GetEntryName=z.prototype.GetEntryName=function(b,c){var d=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);return p(gc(d,b,c))};z.prototype.__destroy__=z.prototype.__destroy__=function(){hc(this.ptr)};m.prototype=Object.create(v.prototype);m.prototype.constructor=m;m.prototype.__class__=m;m.__cache__={};a.Decoder=m;m.prototype.DecodeArrayToPointCloud=m.prototype.DecodeArrayToPointCloud=function(b,c,d){var g=
+this.ptr;r.prepare();"object"==typeof b&&(b=Z(b));c&&"object"===typeof c&&(c=c.ptr);d&&"object"===typeof d&&(d=d.ptr);return B(ic(g,b,c,d),C)};m.prototype.DecodeArrayToMesh=m.prototype.DecodeArrayToMesh=function(b,c,d){var g=this.ptr;r.prepare();"object"==typeof b&&(b=Z(b));c&&"object"===typeof c&&(c=c.ptr);d&&"object"===typeof d&&(d=d.ptr);return B(jc(g,b,c,d),C)};m.prototype.GetAttributeId=m.prototype.GetAttributeId=function(b,c){var d=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&
+(c=c.ptr);return kc(d,b,c)};m.prototype.GetAttributeIdByName=m.prototype.GetAttributeIdByName=function(b,c){var d=this.ptr;r.prepare();b&&"object"===typeof b&&(b=b.ptr);c=c&&"object"===typeof c?c.ptr:R(c);return lc(d,b,c)};m.prototype.GetAttributeIdByMetadataEntry=m.prototype.GetAttributeIdByMetadataEntry=function(b,c,d){var g=this.ptr;r.prepare();b&&"object"===typeof b&&(b=b.ptr);c=c&&"object"===typeof c?c.ptr:R(c);d=d&&"object"===typeof d?d.ptr:R(d);return mc(g,b,c,d)};m.prototype.GetAttribute=
+m.prototype.GetAttribute=function(b,c){var d=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);return B(nc(d,b,c),x)};m.prototype.GetAttributeByUniqueId=m.prototype.GetAttributeByUniqueId=function(b,c){var d=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);return B(oc(d,b,c),x)};m.prototype.GetMetadata=m.prototype.GetMetadata=function(b){var c=this.ptr;b&&"object"===typeof b&&(b=b.ptr);return B(pc(c,b),T)};m.prototype.GetAttributeMetadata=m.prototype.GetAttributeMetadata=
+function(b,c){var d=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);return B(qc(d,b,c),T)};m.prototype.GetFaceFromMesh=m.prototype.GetFaceFromMesh=function(b,c,d){var g=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);d&&"object"===typeof d&&(d=d.ptr);return!!rc(g,b,c,d)};m.prototype.GetTriangleStripsFromMesh=m.prototype.GetTriangleStripsFromMesh=function(b,c){var d=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);
+return sc(d,b,c)};m.prototype.GetTrianglesUInt16Array=m.prototype.GetTrianglesUInt16Array=function(b,c,d){var g=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);d&&"object"===typeof d&&(d=d.ptr);return!!tc(g,b,c,d)};m.prototype.GetTrianglesUInt32Array=m.prototype.GetTrianglesUInt32Array=function(b,c,d){var g=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);d&&"object"===typeof d&&(d=d.ptr);return!!uc(g,b,c,d)};m.prototype.GetAttributeFloat=m.prototype.GetAttributeFloat=
+function(b,c,d){var g=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);d&&"object"===typeof d&&(d=d.ptr);return!!vc(g,b,c,d)};m.prototype.GetAttributeFloatForAllPoints=m.prototype.GetAttributeFloatForAllPoints=function(b,c,d){var g=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);d&&"object"===typeof d&&(d=d.ptr);return!!wc(g,b,c,d)};m.prototype.GetAttributeIntForAllPoints=m.prototype.GetAttributeIntForAllPoints=function(b,c,d){var g=this.ptr;
+b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);d&&"object"===typeof d&&(d=d.ptr);return!!xc(g,b,c,d)};m.prototype.GetAttributeInt8ForAllPoints=m.prototype.GetAttributeInt8ForAllPoints=function(b,c,d){var g=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);d&&"object"===typeof d&&(d=d.ptr);return!!yc(g,b,c,d)};m.prototype.GetAttributeUInt8ForAllPoints=m.prototype.GetAttributeUInt8ForAllPoints=function(b,c,d){var g=this.ptr;b&&"object"===typeof b&&(b=
+b.ptr);c&&"object"===typeof c&&(c=c.ptr);d&&"object"===typeof d&&(d=d.ptr);return!!zc(g,b,c,d)};m.prototype.GetAttributeInt16ForAllPoints=m.prototype.GetAttributeInt16ForAllPoints=function(b,c,d){var g=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);d&&"object"===typeof d&&(d=d.ptr);return!!Ac(g,b,c,d)};m.prototype.GetAttributeUInt16ForAllPoints=m.prototype.GetAttributeUInt16ForAllPoints=function(b,c,d){var g=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&
+(c=c.ptr);d&&"object"===typeof d&&(d=d.ptr);return!!Bc(g,b,c,d)};m.prototype.GetAttributeInt32ForAllPoints=m.prototype.GetAttributeInt32ForAllPoints=function(b,c,d){var g=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);d&&"object"===typeof d&&(d=d.ptr);return!!Cc(g,b,c,d)};m.prototype.GetAttributeUInt32ForAllPoints=m.prototype.GetAttributeUInt32ForAllPoints=function(b,c,d){var g=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);d&&"object"===
+typeof d&&(d=d.ptr);return!!Dc(g,b,c,d)};m.prototype.GetAttributeDataArrayForAllPoints=m.prototype.GetAttributeDataArrayForAllPoints=function(b,c,d,g,t){var aa=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);d&&"object"===typeof d&&(d=d.ptr);g&&"object"===typeof g&&(g=g.ptr);t&&"object"===typeof t&&(t=t.ptr);return!!Ec(aa,b,c,d,g,t)};m.prototype.SkipAttributeTransform=m.prototype.SkipAttributeTransform=function(b){var c=this.ptr;b&&"object"===typeof b&&(b=b.ptr);Fc(c,
+b)};m.prototype.GetEncodedGeometryType_Deprecated=m.prototype.GetEncodedGeometryType_Deprecated=function(b){var c=this.ptr;b&&"object"===typeof b&&(b=b.ptr);return Gc(c,b)};m.prototype.DecodeBufferToPointCloud=m.prototype.DecodeBufferToPointCloud=function(b,c){var d=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===typeof c&&(c=c.ptr);return B(Hc(d,b,c),C)};m.prototype.DecodeBufferToMesh=m.prototype.DecodeBufferToMesh=function(b,c){var d=this.ptr;b&&"object"===typeof b&&(b=b.ptr);c&&"object"===
+typeof c&&(c=c.ptr);return B(Ic(d,b,c),C)};m.prototype.__destroy__=m.prototype.__destroy__=function(){Jc(this.ptr)};(function(){function b(){a.ATTRIBUTE_INVALID_TRANSFORM=Kc();a.ATTRIBUTE_NO_TRANSFORM=Lc();a.ATTRIBUTE_QUANTIZATION_TRANSFORM=Mc();a.ATTRIBUTE_OCTAHEDRON_TRANSFORM=Nc();a.INVALID=Oc();a.POSITION=Pc();a.NORMAL=Qc();a.COLOR=Rc();a.TEX_COORD=Sc();a.GENERIC=Tc();a.INVALID_GEOMETRY_TYPE=Uc();a.POINT_CLOUD=Vc();a.TRIANGULAR_MESH=Wc();a.DT_INVALID=Xc();a.DT_INT8=Yc();a.DT_UINT8=Zc();a.DT_INT16=
+$c();a.DT_UINT16=ad();a.DT_INT32=bd();a.DT_UINT32=cd();a.DT_INT64=dd();a.DT_UINT64=ed();a.DT_FLOAT32=fd();a.DT_FLOAT64=gd();a.DT_BOOL=hd();a.DT_TYPES_COUNT=id();a.OK=jd();a.DRACO_ERROR=kd();a.IO_ERROR=ld();a.INVALID_PARAMETER=md();a.UNSUPPORTED_VERSION=nd();a.UNKNOWN_VERSION=od()}va?b():oa.unshift(b)})();if("function"===typeof a.onModuleParsed)a.onModuleParsed();a.Decoder.prototype.GetEncodedGeometryType=function(b){if(b.__class__&&b.__class__===a.DecoderBuffer)return a.Decoder.prototype.GetEncodedGeometryType_Deprecated(b);
+if(8>b.byteLength)return a.INVALID_GEOMETRY_TYPE;switch(b[7]){case 0:return a.POINT_CLOUD;case 1:return a.TRIANGULAR_MESH;default:return a.INVALID_GEOMETRY_TYPE}};return n.ready}}();"object"===typeof exports&&"object"===typeof module?module.exports=DracoDecoderModule:"function"===typeof define&&define.amd?define([],function(){return DracoDecoderModule}):"object"===typeof exports&&(exports.DracoDecoderModule=DracoDecoderModule);

src/actions/sendEmail.ts

@@ -0,0 +1,53 @@
+"use server";
+
+import nodemailer from "nodemailer";
+
+export async function sendContactEmail(data: {
+  fullName: string;
+  email: string;
+  subject: string;
+  message: string;
+}) {
+  const { fullName, email, subject, message } = data;
+
+  if (!fullName || !email || !subject || !message) {
+    return { success: false, error: "All fields are required." };
+  }
+
+  const transporter = nodemailer.createTransport({
+    host: process.env.SMTP_HOST,
+    port: Number(process.env.SMTP_PORT) || 465,
+    secure: true,
+    auth: {
+      user: process.env.SMTP_USER,
+      pass: process.env.SMTP_PASSWORD,
+    },
+  });
+
+  try {
+    await transporter.sendMail({
+      from: `"${fullName}" <${process.env.SMTP_USER}>`,
+      to: process.env.CONTACT_RECEIVER,
+      replyTo: email,
+      subject: `New Contact Form Submission: ${subject}`,
+      html: `
+        <div style="font-family: sans-serif; color: #333; max-width: 600px; margin: 0 auto; border: 1px solid #eee; padding: 20px; border-radius: 8px;">
+          <h2 style="color: #c01227; border-bottom: 2px solid #c01227; padding-bottom: 10px; margin-top: 0;">New Contact Form Submission</h2>
+          <p><strong>Name:</strong> ${fullName}</p>
+          <p><strong>Email:</strong> ${email}</p>
+          <p><strong>Subject:</strong> ${subject}</p>
+          <p><strong>Message:</strong></p>
+          <blockquote style="background: #f9f9f9; padding: 15px; border-left: 4px solid #c01227; margin: 0; font-style: italic;">
+            ${message.replace(/\n/g, "<br />")}
+          </blockquote>
+        </div>
+      `,
+    });
+
+    return { success: true };
+  } catch (error) {
+    console.error("Email send error:", error);
+    const errorMessage = error instanceof Error ? error.message : "Failed to send the email. Please try again later.";
+    return { success: false, error: errorMessage };
+  }
+}

src/app/about-us/page.tsx

@@ -15,7 +15,7 @@ export const metadata = {
 
 export default function AboutUsPage() {
   return (
-    <div className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
+    <div id="about" className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
       <div className="content">
         <div className="content-inner">
           <div data-elementor-type="wp-page" data-elementor-id="86" className="elementor elementor-86 elementor-59">

src/app/blog/[slug]/page.tsx

@@ -7,7 +7,7 @@ import { getPostBySlug, getAllSlugs, SITE_URL } from "@/data/blog";
 
 type Params = { slug: string };
 
-// Required for `output: "export"` — prerender every post at build time.
+// Required for `output: "export"`: prerender every post at build time.
 export function generateStaticParams(): Params[] {
   return getAllSlugs().map((slug) => ({ slug }));
 }

src/app/blog/page.tsx

@@ -4,12 +4,12 @@ import BlogGrid from "@/components/sections/BlogGrid";
 
 export const metadata = {
   title: "Blog – Doormile",
-  description: "Insights and logistics intelligence from the team behind Doormile. Learn how AI is transforming EV planning and last-mile operations.",
+  description: "Practical notes on delivery planning, EV fleet operations, route optimisation, charging, and last-mile performance from the Doormile team.",
 };
 
 export default function BlogPage() {
   return (
-    <div className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
+    <div id="blogs" className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
       <div className="content">
         <div className="content-inner">
           <div data-elementor-type="wp-page" data-elementor-id="104" className="elementor elementor-104">

src/app/globals.css

@@ -25,6 +25,7 @@ html {
   --space-section: clamp(40px, 5vw, 64px);
   --space-section-lg: clamp(52px, 6vw, 80px);
   --space-hero-gap: clamp(36px, 4.5vw, 64px);
+  --dm-mobile-gutter: 10px;
 }
 
 .dm-section {
@@ -460,7 +461,7 @@ body {
 @media (max-width: 720px) {
   .dm-contact-left {
     min-height: auto;
-    padding: 42px 22px 58px;
+    padding: 42px 20px 58px;
   }
 
   .dm-contact-title {
@@ -478,43 +479,43 @@ body {
   }
 
   .dm-contact-card {
-    margin: 0 16px 32px;
-    padding: 44px 22px 34px;
-    border-radius: 24px;
+    margin: 0 20px 28px;
+    padding: 28px 20px 24px;
+    border-radius: 28px;
   }
 
   .dm-contact-card h3 {
-    margin-bottom: 34px;
+    margin-bottom: 24px;
   }
 
   .dm-contact-form {
-    gap: 20px;
+    gap: 18px;
   }
 
   .dm-contact-form input {
-    height: 60px;
-    padding: 0 20px;
+    height: 56px;
+    padding: 0 18px;
   }
 
   .dm-contact-form textarea {
-    min-height: 190px;
-    padding: 20px;
+    min-height: 170px;
+    padding: 18px;
   }
 
   .dm-contact-submit {
     width: 100%;
-    height: 64px;
+    height: 60px;
   }
 
   .dm-contact-submit span:first-child {
     flex: 1 1 auto;
     min-width: 0;
-    padding: 0 22px;
+    padding: 0 20px;
   }
 
   .dm-contact-submit-icon {
-    width: 64px;
-    min-width: 64px;
+    width: 60px;
+    min-width: 60px;
   }
 }
 
@@ -537,7 +538,131 @@ body {
   .industry-solutions-grid {
     grid-template-columns: 1fr;
   }
-}.industry-card-link {
+  .elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc {
+    --padding-left: 10px !important;
+    --padding-right: 10px !important;
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+    box-sizing: border-box !important;
+  }
+  .elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc > .e-con-inner {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+
+@media (max-width: 767px) {
+  .elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc > .e-con-inner {
+    max-width: 100% !important;
+    width: 100% !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  .elementor.elementor-61 .elementor-element.elementor-element-d602f7f,
+  .elementor.elementor-61 .elementor-element.elementor-element-f64bd88,
+  .elementor.elementor-61 .elementor-element.elementor-element-5ed2dbb,
+  .elementor.elementor-61 .elementor-element.elementor-element-6829276 {
+    --padding-left: 0px !important;
+    --padding-right: 0px !important;
+    --margin-left: 0px !important;
+    --margin-right: 0px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    box-sizing: border-box;
+  }
+
+  .elementor.elementor-61 .elementor-element.elementor-element-6829276 {
+    --e-con-grid-template-columns: minmax(0, 1fr) !important;
+    --grid-justify-content: stretch !important;
+    --justify-items: stretch !important;
+    grid-template-columns: minmax(0, 1fr) !important;
+    justify-content: stretch !important;
+    justify-items: stretch !important;
+    min-width: 0 !important;
+  }
+
+  .elementor.elementor-61 .industry-solutions-grid,
+  .elementor.elementor-61 .industry-card-link {
+    max-width: 100%;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .elementor.elementor-61 .industry-solutions-grid {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
+
+@media (max-width: 767px) {
+  .elementor.elementor-61 .elementor-element.elementor-element-89a0ca1,
+  .elementor.elementor-61 .elementor-element.elementor-element-88745f4,
+  .elementor.elementor-86 .elementor-element.elementor-element-c2c601a,
+  .elementor.elementor-104 .elementor-element.elementor-element-c70681e {
+    --padding-left: var(--dm-mobile-gutter) !important;
+    --padding-right: var(--dm-mobile-gutter) !important;
+    padding-left: var(--dm-mobile-gutter) !important;
+    padding-right: var(--dm-mobile-gutter) !important;
+    box-sizing: border-box !important;
+  }
+
+  .elementor.elementor-61 .elementor-element.elementor-element-89a0ca1 > .e-con-inner,
+  .elementor.elementor-61 .elementor-element.elementor-element-88745f4 > .e-con-inner,
+  .elementor.elementor-86 .elementor-element.elementor-element-c2c601a > .e-con-inner,
+  .elementor.elementor-104 .elementor-element.elementor-element-c70681e > .e-con-inner {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    box-sizing: border-box !important;
+  }
+
+  .elementor.elementor-61 .elementor-element.elementor-element-89a0ca1 > .e-con-inner > .e-con,
+  .elementor.elementor-61 .elementor-element.elementor-element-88745f4 > .e-con-inner > .e-con,
+  .elementor.elementor-86 .elementor-element.elementor-element-c2c601a > .e-con-inner > .e-con,
+  .elementor.elementor-104 .elementor-element.elementor-element-c70681e > .e-con-inner > .e-con {
+    --padding-left: 0px !important;
+    --padding-right: 0px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    box-sizing: border-box !important;
+  }
+
+  .comparison-section .container {
+    width: calc(100% - (var(--dm-mobile-gutter) * 2)) !important;
+    max-width: calc(100% - (var(--dm-mobile-gutter) * 2)) !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    box-sizing: border-box !important;
+  }
+
+  .wcd-inner {
+    width: 100% !important;
+    max-width: 100% !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    box-sizing: border-box !important;
+  }
+}
+
+.industry-card-link {
   position: relative;
   height: 600px;
   border-radius: 30px;
@@ -899,12 +1024,14 @@ body {
    to 600px at <= 840px. Earlier this card shrank at <= 1536px, which is why the
    About hero looked smaller than Home on MacBook M1/Pro (their ~1440-1512px logical
    width falls below 1536px). Match the home breakpoint instead. */
-@media (max-width: 840px) {
+@media (max-width: 1024px) {
   .custom-standard-hero-container {
-    /* No top gap on mobile: the hero card sits flush to the top so the floating
+    /* No top gap on mobile/tablet: 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;
   }
+}
+@media (max-width: 840px) {
   .custom-standard-hero-card {
     height: 600px !important;
     min-height: 600px !important;
@@ -929,5 +1056,30 @@ body {
   .miletruth-hero-container {
     margin-top: 0 !important;
   }
-}
 
+  /* Audit & align section rhythm on mobile/tablet across all content pages */
+  .elementor-86 #women-entrepreneurship.elementor-element-bbc6760,
+  .elementor-86 .comparison-section,
+  .elementor-86 .elementor-element.elementor-element-bbc6760:not(#women-entrepreneurship),
+  .elementor-86 .elementor-element.elementor-element-c2c601a,
+  .elementor-59 .elementor-element.elementor-element-bbc6760,
+  .elementor-104 .elementor-element.elementor-element-c70681e {
+    margin-top: var(--space-section) !important;
+    margin-bottom: 0 !important;
+  }
+
+  /* Solutions page: First section under Solutions Hero gets the hero gap */
+  .elementor-59 .elementor-element.elementor-element-3b4a7cc {
+    margin-top: var(--space-hero-gap) !important;
+    margin-bottom: 0 !important;
+  }
+  
+  /* About page: First section under About Hero gets the hero gap */
+  .elementor-86 .elementor-element.elementor-element-88745f4:first-of-type {
+    margin-top: var(--space-hero-gap) !important;
+  }
+  /* About page: Subsequent sections get standard section spacing */
+  .elementor-86 .elementor-element.elementor-element-88745f4 ~ .elementor-element.elementor-element-88745f4 {
+    margin-top: var(--space-section) !important;
+  }
+}

src/app/how-it-works/page.tsx

@@ -9,7 +9,7 @@ export const metadata = {
 
 export default function HowItWorksPage() {
   return (
-    <div className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
+    <div id="how-it-works" className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
       <div className="content">
         <div className="content-inner">
           <div data-elementor-type="wp-page" data-elementor-id="59" className="elementor elementor-59">

src/app/layout.tsx

@@ -90,7 +90,7 @@ export default function RootLayout({
             │         └─ footer
         SSR ships body with shared WP/Elementor classes; BodyClasses (client) refines per route.
       */}
-      <body className={SHARED_BODY_CLASSES}>
+      <body className={SHARED_BODY_CLASSES} suppressHydrationWarning>
         <BodyClasses />
         <LoadingScreen />
         <AnimationProvider>

src/app/miletruth/page.tsx

@@ -11,7 +11,7 @@ export const metadata = {
 
 export default function MileTruthPage() {
   return (
-    <div className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
+    <div id="miletruth" className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
       <div className="content">
         <div className="content-inner">
           <div data-elementor-type="wp-page" data-elementor-id="59" className="elementor elementor-59">

src/app/page.tsx

@@ -17,7 +17,7 @@ export const metadata: Metadata = {
 
 export default function Home() {
   return (
-    <div className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
+    <div id="home" className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
       <div className="content">
         <div className="content-inner">
           <div data-elementor-type="wp-page" data-elementor-id="61" className="elementor elementor-61">

src/app/solutions/page.tsx

@@ -50,7 +50,7 @@ export default function SolutionsPage() {
         }
       `}} />
 
-      <div className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
+      <div id="solutions" className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
         <div className="content">
           <div className="content-inner">
             <div data-elementor-type="wp-page" data-elementor-id="59" className="elementor elementor-59">

src/components/blog/BlogSearch.tsx

@@ -6,7 +6,7 @@ import { blogPosts } from "@/data/blog";
 
 /**
  * Client-side blog search. The site is a static export, so there is no search
- * server — we filter the known posts in the browser and link straight to the
+ * server. We filter the known posts in the browser and link straight to the
  * matching /blog/[slug] routes.
  */
 export default function BlogSearch() {

src/components/blog/BlogSidebar.tsx

@@ -72,10 +72,10 @@ export default function BlogSidebar({ current }: { current?: BlogPost }) {
 
       {/* CTA Card */}
       <section className="dm-blog-widget dm-blog-cta-card">
-        <h2 className="dm-blog-cta-title">Ready to optimise your fleet?</h2>
+        <h2 className="dm-blog-cta-title">Planning delivery routes?</h2>
         <p className="dm-blog-cta-text">
-          See how MileTruth™ AI cuts distance, vehicles and emissions — without
-          missing an SLA.
+          Talk to us about reducing wasted distance, missed windows, and avoidable
+          vehicle time.
         </p>
         <Link href="/contact" className="dm-blog-cta-btn">
           Contact Us

src/components/layout/Footer.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import emailjs from "@emailjs/browser";
+import { sendContactEmail } from "@/actions/sendEmail";
 import { ScrollReveal } from "@/animations/Reveal";
 
 export default function Footer() {
@@ -53,40 +53,49 @@ export default function Footer() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    // EmailJS is fully client-side — only the public-safe credentials are used
-    // (Service ID, Template ID, Public Key). No private/secret key, no backend route.
-    const serviceId = process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID;
-    const templateId = process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID;
-    const publicKey = process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY;
-    if (!serviceId || !templateId || !publicKey) {
-      console.error("EmailJS env vars are missing — set NEXT_PUBLIC_EMAILJS_* in .env.local");
-      setFormStatus("error");
-      return;
-    }
-
     setFormStatus("submitting");
     try {
-      await emailjs.send(
-        serviceId,
-        templateId,
-        {
-          name: formData.fullName,
-          email: formData.email,
-          subject: formData.subject,
-          message: formData.message,
-        },
-        publicKey,
-      );
-      setFormStatus("success");
-      setFormData({ fullName: "", email: "", subject: "", message: "" });
+      const res = await sendContactEmail({
+        fullName: formData.fullName,
+        email: formData.email,
+        subject: formData.subject,
+        message: formData.message,
+      });
+
+      if (res.success) {
+        setFormStatus("success");
+        setFormData({ fullName: "", email: "", subject: "", message: "" });
+      } else {
+        console.error("Failed to send contact email:", res.error);
+        setFormStatus("error");
+      }
     } catch (err) {
-      console.error(err);
+      console.error("Error submitting contact form:", err);
       setFormStatus("error");
     }
   };
 
   return (
     <>
+      {/* Floating-label fix: the theme only lifts the label on :focus-within, so a
+          filled-but-blurred field drops its label back onto the typed value and the
+          two overlap. Keep the label lifted (and the notch in the top border open)
+          whenever the field carries a value, via the .dm-field-filled class below. */}
+      <style dangerouslySetInnerHTML={{ __html: `
+        .logico-form-field.dm-field-filled .logico-label-wrapper>label {
+          font-size: 14px;
+          top: -14px;
+          color: var(--logico-dark-text-color);
+        }
+        .logico-form-field.dm-field-filled .logico-label-placeholder .logico-label-placeholder-text:before {
+          right: 100%;
+          left: initial;
+        }
+        .logico-form-field.dm-field-filled .logico-label-placeholder .logico-label-placeholder-text:after {
+          left: 100%;
+          right: initial;
+        }
+      ` }} />
       <footer
         data-rocket-location-hash="1eeca93394c4fc14089e9d12a2a92e22"
         itemScope
@@ -197,14 +206,14 @@ export default function Footer() {
                                     <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>
+                                  <span>Social</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">
                               <div className="elementor-widget-container">
                                 <div className="elementor-social-icons-wrapper elementor-grid" role="list" style={socialIconSpacing}>
-                                  <span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
+                                  {/* <span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
                                     <a className="elementor-icon elementor-social-icon elementor-social-icon-facebook-f elementor-repeater-item-3fbe893" href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">
                                       <span className="elementor-screen-only">Facebook</span>
                                       <svg aria-hidden="true" className="e-font-icon-svg e-fab-facebook-f" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg">
@@ -219,7 +228,7 @@ export default function Footer() {
                                         <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
                                       </svg>
                                     </a>
-                                  </span>
+                                  </span> */}
                                   <span className="elementor-grid-item" role="listitem"style={{padding:"0 15px"}}>
                                     <a className="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in elementor-repeater-item-38e1bcc" href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer">
                                       <span className="elementor-screen-only">LinkedIn</span>
@@ -255,7 +264,7 @@ export default function Footer() {
                             <div className="wpforms-container wpforms-render-modern" id="wpforms-369">
                               <form id="wpforms-form-369" className="wpforms-validate wpforms-form" onSubmit={handleSubmit}>
                                 <div className="wpforms-field-container">
-                                  <div className="wpforms-field-wrapper logico-form-field">
+                                  <div className={`wpforms-field-wrapper logico-form-field${formData.fullName ? " dm-field-filled" : ""}`}>
                                     <div className="logico-label-wrapper" style={{marginBottom:"12px"}}>
                                       <div className="logico-label-placeholder">
                                         <div className="logico-label-placeholder-text">Full name</div>
@@ -272,7 +281,7 @@ export default function Footer() {
                                       required
                                     />
                                   </div>
-                                  <div className="wpforms-field-wrapper logico-form-field">
+                                  <div className={`wpforms-field-wrapper logico-form-field${formData.email ? " dm-field-filled" : ""}`}>
                                     <div className="logico-label-wrapper" style={{marginBottom:"12px"}}>
                                       <div className="logico-label-placeholder">
                                         <div className="logico-label-placeholder-text">Email</div>
@@ -289,7 +298,7 @@ export default function Footer() {
                                       required
                                     />
                                   </div>
-                                  <div className="wpforms-field-wrapper logico-form-field">
+                                  <div className={`wpforms-field-wrapper logico-form-field${formData.subject ? " dm-field-filled" : ""}`}>
                                     <div className="logico-label-wrapper" style={{marginBottom:"12px"}}>
                                       <div className="logico-label-placeholder">
                                         <div className="logico-label-placeholder-text">Subject</div>
@@ -306,7 +315,7 @@ export default function Footer() {
                                       required
                                     />
                                   </div>
-                                  <div className="wpforms-field-wrapper logico-form-field">
+                                  <div className={`wpforms-field-wrapper logico-form-field${formData.message ? " dm-field-filled" : ""}`}>
                                     <div className="logico-label-wrapper" style={{marginBottom:"12px"}}>
                                       <div className="logico-label-placeholder">
                                         <div className="logico-label-placeholder-text">Message</div>
@@ -384,7 +393,7 @@ export default function Footer() {
                       <div className="elementor-element elementor-element-e4e6486 elementor-shape-square elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="e4e6486" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default">
                         <div className="elementor-widget-container">
                           <div className="elementor-social-icons-wrapper elementor-grid" role="list" style={socialIconSpacing}>
-                            <span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
+                            {/* <span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
                               <a className="elementor-icon elementor-social-icon elementor-social-icon-facebook-f" href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">
                                 <span className="elementor-screen-only">Facebook</span>
                                 <svg aria-hidden="true" className="e-font-icon-svg e-fab-facebook-f" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg">
@@ -399,7 +408,7 @@ export default function Footer() {
                                   <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
                                 </svg>
                               </a>
-                            </span>
+                            </span> */}
                             <span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
                               <a className="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in" href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer">
                                 <span className="elementor-screen-only">LinkedIn</span>

src/components/layout/Header.tsx

@@ -7,7 +7,7 @@
  * Menu open/close + sidebar state is read from HeaderUIProvider so BodyOverlay (sibling at body level) can react.
  */
 
-import { useEffect, useState } from "react";
+import { MouseEvent, useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
@@ -44,6 +44,34 @@ export default function Header() {
   const dmHeaderActive = (key: string) =>
     (CURRENT_PAGE_ALIASES[key] ?? []).includes(currentPage) ? " active" : "";
 
+  const scrollToNavTarget = (targetId: string) => {
+    const target = document.getElementById(targetId);
+    if (target) {
+      target.scrollIntoView({ behavior: "smooth", block: "start" });
+      return;
+    }
+
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  const handleNavClick = (
+    event: MouseEvent<HTMLAnchorElement>,
+    targetPath: string,
+    targetId: string,
+    shouldCloseMenu = false,
+  ) => {
+    if (shouldCloseMenu) closeAll();
+
+    if (pathname !== targetPath) return;
+
+    event.preventDefault();
+    const targetUrl = `${targetPath}#${targetId}`;
+    if (`${window.location.pathname}${window.location.hash}` !== targetUrl) {
+      window.history.pushState(null, "", targetUrl);
+    }
+    requestAnimationFrame(() => scrollToNavTarget(targetId));
+  };
+
   // Mirror of header.php <script> block (lines 628-660):
   //   - on doc.ready: $('.header-hide-until-scroll').addClass('header-visible-scrolled')
   //   - on scroll:   toggleClass('dm-header-scrolled', scrollTop > 50)
@@ -406,22 +434,22 @@ export default function Header() {
                         <nav>
                           <ul id="menu-main-menu" className="main-menu">
                             <li id="menu-item-10508" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10508${dmHeaderActive("home")}`}>
-                              <Link href="/">Home</Link>
+                              <Link href="/#home" onClick={(event) => handleNavClick(event, "/", "home")}>Home</Link>
                             </li>
                             <li id="menu-item-10509" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10509${dmHeaderActive("how-it-works")}`}>
-                              <Link href="/how-it-works">How It Works</Link>
+                              <Link href="/how-it-works#how-it-works" onClick={(event) => handleNavClick(event, "/how-it-works", "how-it-works")}>How It Works</Link>
                             </li>
                             <li id="menu-item-10510" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10510${dmHeaderActive("miletruth")}`}>
-                              <Link href="/miletruth">MileTruth&trade; AI</Link>
+                              <Link href="/miletruth#miletruth" onClick={(event) => handleNavClick(event, "/miletruth", "miletruth")}>MileTruth&trade; AI</Link>
                             </li>
                             <li id="menu-item-10511" className={`menu-item menu-item-type-custom  menu-item-10511${dmHeaderActive("solutions")}`}>
-                              <Link href="/solutions">Solutions</Link>
+                              <Link href="/solutions#solutions" onClick={(event) => handleNavClick(event, "/solutions", "solutions")}>Solutions</Link>
                             </li>
                             <li id="menu-item-10512" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10512${dmHeaderActive("about")}`}>
-                              <Link href="/about-us">About</Link>
+                              <Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about")}>About</Link>
                             </li>
                             <li id="menu-item-10535" className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-10535${dmHeaderActive("blogs")}`}>
-                              <Link href="/blog">Blogs</Link>
+                              <Link href="/blog#blogs" onClick={(event) => handleNavClick(event, "/blog", "blogs")}>Blogs</Link>
                             </li>
                           </ul>
                         </nav>
@@ -454,22 +482,22 @@ export default function Header() {
                         <nav>
                           <ul id="menu-main-menu-1" className="main-menu">
                             <li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10508${dmHeaderActive("home")}`}>
-                              <Link href="/" onClick={closeAll}>Home</Link>
+                              <Link href="/#home" onClick={(event) => handleNavClick(event, "/", "home", true)}>Home</Link>
                             </li>
                             <li className={`menu-item menu-item-type-custom menu-item-object-custom  menu-item-10509${dmHeaderActive("how-it-works")}`}>
-                              <Link href="/how-it-works" onClick={closeAll}>How It Works</Link>
+                              <Link href="/how-it-works#how-it-works" onClick={(event) => handleNavClick(event, "/how-it-works", "how-it-works", true)}>How It Works</Link>
                             </li>
                             <li className={`menu-item menu-item-type-custom menu-item-object-custom  menu-item-10510${dmHeaderActive("miletruth")}`}>
-                              <Link href="/miletruth" onClick={closeAll}>MileTruth&trade; AI</Link>
+                              <Link href="/miletruth#miletruth" onClick={(event) => handleNavClick(event, "/miletruth", "miletruth", true)}>MileTruth&trade; AI</Link>
                             </li>
                             <li className={`menu-item menu-item-type-custom menu-item-10511${dmHeaderActive("solutions")}`}>
-                              <Link href="/solutions" onClick={closeAll}>Solutions</Link>
+                              <Link href="/solutions#solutions" onClick={(event) => handleNavClick(event, "/solutions", "solutions", true)}>Solutions</Link>
                             </li>
                             <li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10512${dmHeaderActive("about")}`}>
-                              <Link href="/about-us" onClick={closeAll}>About</Link>
+                              <Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about", true)}>About</Link>
                             </li>
                             <li className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-10535${dmHeaderActive("blogs")}`}>
-                              <Link href="/blog" onClick={closeAll}>Blogs</Link>
+                              <Link href="/blog#blogs" onClick={(event) => handleNavClick(event, "/blog", "blogs", true)}>Blogs</Link>
                             </li>
                           </ul>
                         </nav>
@@ -747,6 +775,9 @@ export default function Header() {
 
             /* Responsive logo adjustment on mobile/tablet */
             @media (max-width: 1024px) {
+                #masthead .elementor-element.elementor-element-466de1b {
+                    top: 18px !important;
+                }
                 #masthead .elementor-element.elementor-element-846e53d .hfe-site-logo .hfe-site-logo-container img {
                     width: 150px !important;
                     height: auto !important;
@@ -765,7 +796,7 @@ export default function Header() {
                    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;
+                    top: 18px !important;
                     left: 0 !important;
                     right: 0 !important;
                 }

src/components/layout/LoadingScreen.tsx

@@ -1,69 +1,170 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
-import { usePathname } from "next/navigation";
+import { useEffect, useRef, useState, type MutableRefObject } from "react";
 import Image from "next/image";
+import { usePathname } from "next/navigation";
 
 /**
  * LoadingScreen
  * ---------------------------------------------------------------------------
- * Native reimplementation of the legacy WordPress page-loader: a black
- * full-screen overlay with a centered, pulsing Doormile logo that fades out.
+ * Route-transition loader only: a black full-screen overlay with a centered,
+ * pulsing Doormile logo. It intentionally does not run on initial page render,
+ * image loading, lazy component loading, API requests, or scroll.
  *
- * Shows on initial load (until the window finishes loading, min ~450ms to avoid
- * a flash, capped at 2.5s so it never blocks) and again briefly on each route
- * navigation. CWV-safe: fixed/out-of-flow (no layout shift), logo is priority,
- * and it never delays hydration.
+ * The App Router does not expose the old `next/router` routeChangeStart /
+ * routeChangeComplete event API. This component provides the same behavior by
+ * detecting internal route-link starts and completing when `usePathname()`
+ * reports the committed route.
  */
-type Phase = "visible" | "hiding" | "gone";
+type Phase = "hidden" | "visible" | "hiding";
 
-const MIN_SHOW_MS = 450;
-const MAX_SHOW_MS = 2500;
-const NAV_SHOW_MS = 520;
+const MIN_VISIBLE_MS = 420;
+const MAX_VISIBLE_MS = 800;
+
+function getRoutePath(url: URL) {
+  return `${url.pathname}${url.search}`;
+}
 
 export default function LoadingScreen() {
   const pathname = usePathname();
-  const [phase, setPhase] = useState<Phase>("visible");
-  const isFirstRender = useRef(true);
+  const [phase, setPhase] = useState<Phase>("hidden");
+  const phaseRef = useRef<Phase>("hidden");
+  const visibleSince = useRef(0);
+  const pendingPath = useRef<string | null>(null);
+  const currentRoutePath = useRef<string | null>(null);
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const safetyTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const setLoaderPhase = (nextPhase: Phase) => {
+    phaseRef.current = nextPhase;
+    setPhase(nextPhase);
+  };
+
+  const clearTimer = (timer: MutableRefObject<ReturnType<typeof setTimeout> | null>) => {
+    if (!timer.current) return;
+    clearTimeout(timer.current);
+    timer.current = null;
+  };
+
+  const completeTransition = () => {
+    pendingPath.current = null;
+    clearTimer(safetyTimer);
+
+    if (phaseRef.current === "hidden" || phaseRef.current === "hiding") return;
+
+    const elapsed = performance.now() - visibleSince.current;
+    const wait = Math.max(0, MIN_VISIBLE_MS - elapsed);
+    clearTimer(hideTimer);
+    hideTimer.current = setTimeout(() => {
+      setLoaderPhase("hiding");
+      hideTimer.current = setTimeout(() => setLoaderPhase("hidden"), 360);
+    }, wait);
+  };
 
-  // Initial load: hide once the page is ready.
   useEffect(() => {
-    const start = performance.now();
-    let began = false;
-    let fadeTimer: ReturnType<typeof setTimeout>;
-
-    const begin = () => {
-      if (began) return;
-      began = true;
-      const wait = Math.max(0, MIN_SHOW_MS - (performance.now() - start));
-      fadeTimer = setTimeout(() => setPhase("hiding"), wait);
-    };
-
-    const cap = setTimeout(begin, MAX_SHOW_MS);
-    const onReady = () => begin();
-
-    if (document.readyState === "complete") begin();
-    else window.addEventListener("load", onReady, { once: true });
-
-    return () => {
-      clearTimeout(cap);
-      clearTimeout(fadeTimer);
-      window.removeEventListener("load", onReady);
-    };
-  }, []);
-
-  // Route navigations: flash the loader briefly for an app-like transition.
-  useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-    setPhase("visible");
-    const t = setTimeout(() => setPhase("hiding"), NAV_SHOW_MS);
-    return () => clearTimeout(t);
+    currentRoutePath.current = `${pathname}${window.location.search}`;
+    completeTransition();
+    // `phase` intentionally stays out of this dependency list. The route commit
+    // is the completion signal; phase changes should not repeatedly restart hide.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathname]);
 
-  if (phase === "gone") return null;
+  useEffect(() => {
+    const startTransition = (targetPath: string, force = false) => {
+      if (!force && targetPath === getRoutePath(new URL(window.location.href))) return;
+      if (pendingPath.current === targetPath && phaseRef.current === "visible") return;
+
+      pendingPath.current = targetPath;
+      clearTimer(hideTimer);
+      clearTimer(safetyTimer);
+
+      visibleSince.current = performance.now();
+      setLoaderPhase("visible");
+
+      safetyTimer.current = setTimeout(() => {
+        completeTransition();
+      }, MAX_VISIBLE_MS);
+    };
+
+    const getInternalRouteTarget = (anchor: HTMLAnchorElement) => {
+      const rawHref = anchor.getAttribute("href");
+      if (!rawHref || rawHref.startsWith("#")) return null;
+      if (anchor.target && anchor.target !== "_self") return null;
+      if (anchor.hasAttribute("download")) return null;
+      if (/^(mailto:|tel:|sms:|javascript:)/i.test(rawHref)) return null;
+
+      const url = new URL(rawHref, window.location.href);
+      if (url.origin !== window.location.origin) return null;
+
+      const current = new URL(window.location.href);
+      const sameRoute = url.pathname === current.pathname && url.search === current.search;
+      if (sameRoute) return null;
+
+      return getRoutePath(url);
+    };
+
+    const handleDocumentClick = (event: MouseEvent) => {
+      if (event.defaultPrevented) return;
+      if (event.button !== 0) return;
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+
+      const anchor = (event.target as Element | null)?.closest("a[href]");
+      if (!anchor || !(anchor instanceof HTMLAnchorElement)) return;
+
+      const targetPath = getInternalRouteTarget(anchor);
+      if (targetPath) startTransition(targetPath);
+    };
+
+    const originalPushState = window.history.pushState;
+    const originalReplaceState = window.history.replaceState;
+
+    const scheduleHistoryTransition = (targetPath: string) => {
+      const currentPath = getRoutePath(new URL(window.location.href));
+      if (targetPath === currentPath) return;
+
+      window.setTimeout(() => {
+        startTransition(targetPath, true);
+      }, 0);
+    };
+
+    window.history.pushState = function patchedPushState(...args) {
+      const urlArg = args[2];
+      if (typeof urlArg === "string" || urlArg instanceof URL) {
+        const url = new URL(urlArg, window.location.href);
+        if (url.origin === window.location.origin) scheduleHistoryTransition(getRoutePath(url));
+      }
+      return originalPushState.apply(this, args);
+    };
+
+    window.history.replaceState = function patchedReplaceState(...args) {
+      const urlArg = args[2];
+      if (typeof urlArg === "string" || urlArg instanceof URL) {
+        const url = new URL(urlArg, window.location.href);
+        if (url.origin === window.location.origin) scheduleHistoryTransition(getRoutePath(url));
+      }
+      return originalReplaceState.apply(this, args);
+    };
+
+    const handlePopState = () => {
+      const targetPath = getRoutePath(new URL(window.location.href));
+      if (targetPath !== currentRoutePath.current) startTransition(targetPath, true);
+    };
+
+    document.addEventListener("click", handleDocumentClick, true);
+    window.addEventListener("popstate", handlePopState);
+
+    return () => {
+      document.removeEventListener("click", handleDocumentClick, true);
+      window.removeEventListener("popstate", handlePopState);
+      window.history.pushState = originalPushState;
+      window.history.replaceState = originalReplaceState;
+      clearTimer(hideTimer);
+      clearTimer(safetyTimer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (phase === "hidden") return null;
 
   return (
     <div
@@ -72,7 +173,10 @@ export default function LoadingScreen() {
       aria-live="polite"
       aria-label="Loading"
       onTransitionEnd={(e) => {
-        if (e.propertyName === "opacity" && phase === "hiding") setPhase("gone");
+        if (e.propertyName === "opacity" && phase === "hiding") {
+          setPhase("hidden");
+          phaseRef.current = "hidden";
+        }
       }}
     >
       <div className="dm-loader__pulse">

src/components/map/ContactMapEmbed.tsx

@@ -4,9 +4,9 @@
  * ContactMapEmbed
  * ---------------------------------------------------------------------------
  * Client boundary that lazy-loads the Leaflet map. `ssr: false` keeps Leaflet
- * out of the server bundle and off the critical render path; the skeleton fills
- * the host container's fixed height so there is zero layout shift (CLS) while
- * the map chunk loads.
+ * out of the server bundle and off the critical render path. The host container
+ * already owns the fixed height, so the loading state stays invisible before
+ * the interactive map is ready.
  */
 
 import dynamic from "next/dynamic";
@@ -14,7 +14,7 @@ import styles from "./OfficeMap.module.css";
 
 const OfficeMap = dynamic(() => import("./OfficeMap"), {
   ssr: false,
-  loading: () => <div className={styles.skeleton} role="presentation" aria-hidden="true" />,
+  loading: () => <div className={styles.mapMountReserve} role="presentation" aria-hidden="true" />,
 });
 
 export default function ContactMapEmbed() {

src/components/map/OfficeMap.module.css

@@ -1,16 +1,11 @@
 /* ===========================================================================
    Office satellite map — scoped styles.
-   All Leaflet global classes are namespaced under `.root` via :global() so this
-   module cannot leak into the rest of the app and vice-versa.
-   Colours/radii reference the app's theme (dark surface, #C01227 brand red).
-   The map fills its container 100% — no hard-coded layout values live here.
    =========================================================================== */
 
 .root {
   position: relative;
   width: 100%;
   height: 100%;
-  /* inherit the host container's rounded corners so tiles/controls clip cleanly */
   border-radius: inherit;
   overflow: hidden;
   background: #0b0b0b;
@@ -34,10 +29,6 @@
 .controls {
   position: absolute;
   top: 14px;
-  /* Span the full width (with side insets) instead of left:50%+auto-width:
-     an absolutely-positioned auto-width box anchored at left:50% can only grow
-     to 50% of the map, which on a narrow phone forced the city buttons to stack
-     vertically. With left/right insets the row uses the full width and centres. */
   left: 12px;
   right: 12px;
   z-index: 600; /* above tiles + markers; popups open lower so they never collide */
@@ -47,6 +38,7 @@
   gap: 8px;
   pointer-events: none; /* let the row be transparent to drags; buttons re-enable */
 }
+
 .controlBtn {
   pointer-events: auto;
   appearance: none;
@@ -68,15 +60,18 @@
   transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
     transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
 }
+
 .controlBtn:hover {
   background: rgba(192, 18, 39, 0.9);
   border-color: #c01227;
   transform: translateY(-1px);
 }
+
 .controlBtn:focus-visible {
   outline: 2px solid #ffffff;
   outline-offset: 2px;
 }
+
 .controlBtnActive,
 .controlBtnActive:hover {
   background: #c01227;
@@ -90,6 +85,7 @@
   border-color: rgba(192, 18, 39, 0.55);
   box-shadow: 0 0 0 1px rgba(192, 18, 39, 0.25), 0 4px 14px rgba(192, 18, 39, 0.2);
 }
+
 .controlBtnHq.controlBtnActive {
   box-shadow: 0 6px 20px rgba(192, 18, 39, 0.55);
 }
@@ -98,8 +94,6 @@
   .controls {
     top: 12px;
     gap: 5px;
-    /* Keep all three city buttons on a single line — shrink them (below) so the
-       row fits instead of wrapping to two lines on narrow phones. */
     flex-wrap: nowrap;
   }
   .controlBtn {
@@ -110,12 +104,12 @@
 
 /* ---- Branded marker pin ---- */
 .markerIcon {
-  /* divIcon resets — keep only the pin's own drop shadow */
   background: transparent;
   border: 0;
   filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
   transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
 }
+
 .markerIcon:hover,
 .markerIcon:focus-visible {
   transform: translateY(-3px) scale(1.06);
@@ -125,15 +119,16 @@
 .markerIconHq {
   background: transparent;
   border: 0;
-  /* red glow + grounding shadow */
   filter: drop-shadow(0 0 9px rgba(192, 18, 39, 0.85))
     drop-shadow(0 5px 7px rgba(0, 0, 0, 0.55));
   transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
 }
+
 .markerIconHq svg {
   position: relative;
   z-index: 2;
 }
+
 .markerIconHq:hover,
 .markerIconHq:focus-visible {
   transform: translateY(-3px) scale(1.05);
@@ -153,6 +148,7 @@
   pointer-events: none;
   animation: hqPulse 2.2s ease-out infinite;
 }
+
 @keyframes hqPulse {
   0% {
     transform: scale(0.6);
@@ -168,26 +164,28 @@
   }
 }
 
-/* ---- Themed Leaflet internals (scoped to this map only) ---- */
+/* ---- Leaflet Branded Elements ---- */
 .root :global(.leaflet-container) {
   background: #0b0b0b;
 }
 
-/* Zoom + attribution controls — dark, on-theme */
 .root :global(.leaflet-bar) {
   border: 1px solid rgba(255, 255, 255, 0.12);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
 }
+
 .root :global(.leaflet-bar a) {
   background: rgba(15, 15, 17, 0.92);
   color: #f5f5f5;
   border-bottom-color: rgba(255, 255, 255, 0.12);
   transition: background-color 0.2s ease, color 0.2s ease;
 }
+
 .root :global(.leaflet-bar a:hover) {
   background: #c01227;
   color: #ffffff;
 }
+
 .root :global(.leaflet-bar a:focus-visible) {
   outline: 2px solid #c01227;
   outline-offset: 2px;
@@ -202,72 +200,129 @@
   border-radius: 6px 0 0 0;
   padding: 2px 8px;
 }
+
 .root :global(.leaflet-control-attribution a) {
   color: rgba(255, 255, 255, 0.85);
 }
 
-/* Popup — dark card matching the app surfaces */
-.root :global(.leaflet-popup-content-wrapper) {
-  background: #141416;
-  color: #ffffff;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
-}
-.root :global(.leaflet-popup-content-wrapper) {
-  border-radius: 10px;
-}
-.root :global(.leaflet-popup-content) {
-  margin: 0;
-  font-size: 13px;
-  line-height: 1.4;
-}
-.root :global(.leaflet-popup-tip) {
-  background: #141416;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+/* ---- Floating Popup overlays ---- */
+.root :global(.leaflet-popup) {
+  animation: popupFade 0.2s ease-out forwards;
 }
 
-/* ---- Compact, Google-Maps-style tooltip content ---- */
-.tip {
+.root :global(.leaflet-popup-content-wrapper) {
+  background: #0f0f11;
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px; /* Clean business card rounded corners */
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
+  overflow: hidden;
+  padding: 0;
+  animation: popupScale 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  transform-origin: bottom center;
+}
+
+.root :global(.leaflet-popup-content) {
+  margin: 0 !important;
+  width: auto !important;
+  height: auto !important;
+}
+
+.root :global(.leaflet-popup-tip) {
+  background: #0f0f11;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+@keyframes popupFade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes popupScale {
+  from { transform: scale(0.92); }
+  to { transform: scale(1); }
+}
+
+/* Compact Details Card inside Popup */
+.card {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  padding: 8px 12px;
-  min-width: 120px;
-  max-width: 200px;
-  text-align: left;
+  padding: 12px 16px;
+  min-width: 230px;
+  max-width: 280px;
+  box-sizing: border-box;
   font-family: var(--font-manrope), system-ui, -apple-system, sans-serif;
-}
-.tipTitle {
-  font-size: 13px;
-  font-weight: 800;
-  letter-spacing: -0.01em;
-  color: #ffffff;
-  white-space: nowrap;
+  border-top: 2px solid #c01227; /* Thinner brand accent line */
+  background: #0f0f11;
+  height: auto;
 }
 
-/* ---- Loading skeleton (prevents CLS — fills the fixed-height host) ---- */
-.skeleton {
+.cardHeader {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  padding-bottom: 6px;
+}
+
+.cardIcon {
+  font-size: 15px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.cardTitle {
+  font-size: 17px !important;
+  font-weight: 800 !important;
+  color: #ffffff !important; /* Force white header text */
+  margin: 0 !important;
+  letter-spacing: -0.01em !important;
+}
+
+.cardBody {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.addressLine {
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+  color: rgba(255, 255, 255, 0.75) !important;
+  margin: 0 0 6px 0 !important;
+  padding: 0 !important;
+  font-weight: 500 !important;
+}
+
+.addressLine:last-child {
+  margin-bottom: 0 !important;
+}
+
+@media (max-width: 480px) {
+  .card {
+    padding: 9px 12px;
+    min-width: 200px;
+    max-width: 230px;
+  }
+  .cardTitle {
+    font-size: 14px !important;
+  }
+  .addressLine {
+    font-size: 12px !important;
+    margin-bottom: 3px !important;
+    line-height: 1.4 !important;
+  }
+}
+
+/* ---- Invisible lazy mount reserve ---- */
+.mapMountReserve {
   width: 100%;
   height: 100%;
   border-radius: inherit;
-  background:
-    linear-gradient(
-      100deg,
-      rgba(255, 255, 255, 0) 30%,
-      rgba(255, 255, 255, 0.05) 50%,
-      rgba(255, 255, 255, 0) 70%
-    ),
-    #101012;
-  background-size: 200% 100%;
-  animation: shimmer 1.4s ease-in-out infinite;
-}
-@keyframes shimmer {
-  from { background-position: 200% 0; }
-  to { background-position: -200% 0; }
 }
+
 @media (prefers-reduced-motion: reduce) {
-  .skeleton { animation: none; }
   .markerIcon,
   .markerIconHq { transition: none; }
   .pinPulse { animation: none; opacity: 0.45; }
@@ -289,12 +344,14 @@
   color: rgba(255, 255, 255, 0.82);
   font-family: var(--font-manrope), system-ui, sans-serif;
 }
+
 .errorTitle {
   font-size: clamp(15px, 2.4vw, 18px);
   font-weight: 800;
   color: #ffffff;
   margin: 0;
 }
+
 .errorText {
   font-size: 13px;
   max-width: 38ch;
@@ -302,6 +359,7 @@
   line-height: 1.55;
   color: rgba(255, 255, 255, 0.6);
 }
+
 .errorList {
   list-style: none;
   margin: 4px 0 0;
@@ -311,6 +369,7 @@
   gap: 8px 12px;
   justify-content: center;
 }
+
 .errorList li {
   display: inline-flex;
   align-items: center;
@@ -319,6 +378,7 @@
   font-weight: 700;
   color: #f1f1f1;
 }
+
 .errorList li::before {
   content: "";
   width: 7px;
@@ -327,7 +387,7 @@
   background: #c01227;
 }
 
-/* ---- Screen-reader-only office list (semantic fallback) ---- */
+/* ---- Screen-reader-only office list ---- */
 .srOnly {
   position: absolute;
   width: 1px;

src/components/map/OfficeMap.tsx

@@ -7,14 +7,9 @@
  * Doormile office markers, plus a row of "jump to office" buttons that fly the
  * map to a selected office's coordinates and open its popup.
  *
- * The experience opens focused on the Hyderabad headquarters — the largest,
- * glowing, pulsing marker — with its popup open by default, so the command
- * centre of the network is immediately legible. Hovering any marker opens its
- * popup; leaving closes it. Clicking a marker or a nav button flies to it.
- *
- * Loaded via a `ssr:false` dynamic import so Leaflet (which touches `window`)
- * never runs on the server and cannot cause hydration mismatches. Layout/spacing
- * is owned by the host container (see ContactMap).
+ * The map centers with a North latitude offset to keep markers lower in the viewport,
+ * avoiding collisions with the navigation tabs. Popups are compact and styled like
+ * clean business cards.
  */
 
 import "leaflet/dist/leaflet.css";
@@ -25,6 +20,7 @@ import L from "leaflet";
 import { MapContainer, Marker, Popup, TileLayer, ZoomControl, useMap } from "react-leaflet";
 
 import {
+  LatLng,
   ESRI_WORLD_IMAGERY,
   HQ_OFFICE,
   MAP_FOCUS_ZOOM,
@@ -41,7 +37,6 @@ type FocusTarget = { id: string; nonce: number };
 /**
  * Build a branded SVG pin. The headquarters pin is larger, carries a red glow
  * and a soft pulse ring, and sits above every other marker.
- * (Module-scope-safe construction — this file is client-only.)
  */
 function createMarkerIcon(isHeadquarters: boolean): L.DivIcon {
   if (isHeadquarters) {
@@ -57,7 +52,7 @@ function createMarkerIcon(isHeadquarters: boolean): L.DivIcon {
       `,
       iconSize: [40, 52],
       iconAnchor: [20, 52],
-      popupAnchor: [0, -46],
+      popupAnchor: [0, -52], // Anchored to top tip of pin
     });
   }
 
@@ -72,15 +67,14 @@ function createMarkerIcon(isHeadquarters: boolean): L.DivIcon {
     `,
     iconSize: [30, 40],
     iconAnchor: [15, 40],
-    popupAnchor: [0, -36],
+    popupAnchor: [0, -40], // Anchored to top tip of pin
   });
 }
 
 /**
  * Imperative map effects that need the Leaflet instance:
  *  - keep the viewport sized correctly across resizes / lazy reveals
- *  - on first paint, snap to the HQ and open its popup (no jarring long fly)
- *  - fly to a single office when one is selected via the buttons
+ *  - snap to the offset HQ on first paint, fly thereafter and open popups.
  */
 function MapController({
   focus,
@@ -92,8 +86,7 @@ function MapController({
   const map = useMap();
   const didInit = useRef(false);
 
-  // Keep the map correctly sized on container resize / lazy reveal. We never
-  // re-frame the view here, so resizing keeps whatever office is in focus.
+  // Keep the map correctly sized on container resize / lazy reveal.
   useEffect(() => {
     const container = map.getContainer();
     let raf = 0;
@@ -116,16 +109,20 @@ function MapController({
 
     const openPopup = () => markerRefs.current[office.id]?.openPopup();
 
+    // Offset the center slightly North so the marker sits lower in the viewport,
+    // preventing the popup card from colliding with the top controls.
+    const offsetLatitude = 0.022;
+    const centeredPosition: LatLng = [office.position[0] + offsetLatitude, office.position[1]];
+
     if (!didInit.current) {
       didInit.current = true;
       map.invalidateSize();
-      map.setView(office.position, MAP_FOCUS_ZOOM, { animate: false });
-      // Open the HQ popup once the marker has mounted on this frame.
+      map.setView(centeredPosition, MAP_FOCUS_ZOOM, { animate: false });
       const raf = requestAnimationFrame(openPopup);
       return () => cancelAnimationFrame(raf);
     }
 
-    map.flyTo(office.position, MAP_FOCUS_ZOOM, { duration: 1.1 });
+    map.flyTo(centeredPosition, MAP_FOCUS_ZOOM, { duration: 1.1 });
     map.once("moveend", openPopup);
     return () => {
       map.off("moveend", openPopup);
@@ -140,12 +137,21 @@ export default function OfficeMap() {
   const hqIcon = useMemo(() => createMarkerIcon(true), []);
   const markerRefs = useRef<Record<string, L.Marker>>({});
 
-  // Default to the headquarters so its button reads active and its popup opens.
+  // Default to the headquarters.
   const [focus, setFocus] = useState<FocusTarget | null>({ id: HQ_OFFICE.id, nonce: 0 });
   const focusOffice = useCallback((id: string) => {
     setFocus((prev) => ({ id, nonce: (prev?.nonce ?? 0) + 1 }));
   }, []);
 
+  const [hoveredOfficeId, setHoveredOfficeId] = useState<string | null>(null);
+
+  // Restore the focused office popup when mouse leaves other markers.
+  useEffect(() => {
+    if (hoveredOfficeId === null && focus?.id) {
+      markerRefs.current[focus.id]?.openPopup();
+    }
+  }, [hoveredOfficeId, focus]);
+
   const [status, setStatus] = useState<MapStatus>("loading");
   const loadedRef = useRef(false);
   const errorCountRef = useRef(0);
@@ -155,8 +161,6 @@ export default function OfficeMap() {
     setStatus("ready");
   }, []);
 
-  // Only surface an error if tiles never render (network/CORS/down). Once any
-  // tile load succeeds the map is considered healthy and stays that way.
   const handleTileError = useCallback(() => {
     errorCountRef.current += 1;
     if (!loadedRef.current && errorCountRef.current >= 6) setStatus("error");
@@ -223,8 +227,9 @@ export default function OfficeMap() {
         />
 
         {OFFICE_LOCATIONS.map((office) => {
-          // Google-Maps-style tooltip: hovering shows just the location name;
-          // clicking focuses the office.
+          const isFocused = focus?.id === office.id;
+          const isHovered = hoveredOfficeId === office.id;
+
           return (
             <Marker
               key={office.id}
@@ -236,9 +241,16 @@ export default function OfficeMap() {
               alt={office.name}
               eventHandlers={{
                 click: () => focusOffice(office.id),
-                // Hover opens the compact popup without moving the map.
-                mouseover: (event) => event.target.openPopup(),
-                mouseout: (event) => event.target.closePopup(),
+                mouseover: (event) => {
+                  setHoveredOfficeId(office.id);
+                  event.target.openPopup();
+                },
+                mouseout: (event) => {
+                  setHoveredOfficeId(null);
+                  if (focus?.id !== office.id) {
+                    event.target.closePopup();
+                  }
+                },
               }}
               ref={(instance) => {
                 if (instance) markerRefs.current[office.id] = instance;
@@ -246,16 +258,25 @@ export default function OfficeMap() {
             >
               <Popup
                 className={styles.popup}
-                autoPan={false}
+                autoPan={isFocused}
+                autoPanPadding={[25, 25]}
                 closeButton={false}
-                minWidth={120}
-                maxWidth={200}
+                minWidth={240}
+                maxWidth={290}
               >
-                <span className={styles.tip}>
-                  <span className={styles.tipTitle}>
-                    <span aria-hidden="true">📍</span> {office.shortLabel}
-                  </span>
-                </span>
+                <div className={styles.card}>
+                  <div className={styles.cardHeader}>
+                    <span className={styles.cardIcon} aria-hidden="true">📍</span>
+                    <h4 className={styles.cardTitle}>{office.city} Office</h4>
+                  </div>
+                  <div className={styles.cardBody}>
+                    {office.address.map((line, idx) => (
+                      <p key={idx} className={styles.addressLine}>
+                        {line}
+                      </p>
+                    ))}
+                  </div>
+                </div>
               </Popup>
             </Marker>
           );

src/components/map/offices.ts

@@ -25,6 +25,8 @@ export interface OfficeLocation {
   readonly position: LatLng;
   /** Headquarters gets the largest, glowing, default-active marker. */
   readonly isHeadquarters?: boolean;
+  /** Full office address lines. */
+  readonly address: readonly string[];
 }
 
 /**
@@ -42,6 +44,12 @@ export const OFFICE_LOCATIONS: readonly OfficeLocation[] = [
     // Vision Ultima, Jayabheri Enclave, Gachibowli — verified on satellite.
     position: [17.4484, 78.3573],
     isHeadquarters: true,
+    address: [
+      "5th Floor, Vision Ultima,",
+      "Street No.3, Jayabheri Enclave,",
+      "Gachibowli, Hyderabad,",
+      "Telangana 500032"
+    ],
   },
   {
     id: "bengaluru",
@@ -50,6 +58,13 @@ export const OFFICE_LOCATIONS: readonly OfficeLocation[] = [
     shortLabel: "Bengaluru Hub",
     // Resolved from the supplied Google Maps share link — verified on satellite.
     position: [12.9929351, 77.6988599],
+    address: [
+      "C612, 6th Floor,",
+      "Trifecta Starlight, ITPL Road,",
+      "Garudacharapalya, Mahadevapura,",
+      "Bangalore 560048,",
+      "Karnataka, India"
+    ],
   },
   {
     id: "coimbatore",
@@ -58,6 +73,12 @@ export const OFFICE_LOCATIONS: readonly OfficeLocation[] = [
     shortLabel: "Coimbatore Hub",
     // Mayflower Valencia, Coimbatore — verified against satellite view.
     position: [11.0191, 76.9883],
+    address: [
+      "Mayflower Valencia,",
+      "Near Nava India Bus Stop,",
+      "Avinashi Road, Udayampalayam,",
+      "Tamil Nadu 641003"
+    ],
   },
 ];
 

src/components/sections/AboutCTA.tsx

@@ -3,7 +3,31 @@ import Link from "next/link";
 
 export default function AboutCTA() {
   return (
-    <div className="we-container">
+    <>
+      <style dangerouslySetInnerHTML={{ __html: `
+        @media (max-width: 768px) {
+          .we-container {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+            padding: 0 10px !important;
+          }
+          .we-cta {
+            padding: 48px 20px !important;
+            border-radius: 22px !important;
+          }
+          .we-cta-title {
+            font-size: clamp(28px, 6vw, 38px) !important;
+            line-height: 1.25 !important;
+            margin-bottom: 16px !important;
+          }
+          .we-cta-sub {
+            font-size: 15px !important;
+            line-height: 1.5 !important;
+            margin-bottom: 24px !important;
+          }
+        }
+      `}} />
+      <div className="we-container">
       <div className="we-cta reveal">
         <div className="we-cta-inner">
           <h2 className="we-cta-title">
@@ -26,5 +50,6 @@ export default function AboutCTA() {
         </div>
       </div>
     </div>
+    </>
   );
 }

src/components/sections/AboutHero.tsx

@@ -3,12 +3,13 @@ import React from "react";
 export default function AboutHero() {
   return (
     <>
+      <link rel="preload" as="image" href="/images/about-bg.webp" />
       <style dangerouslySetInnerHTML={{ __html: `
         .about-us-hero-content {
             width: 100% !important;
             text-align: center !important;
             color: #fff !important;
-            padding: 40px !important;
+            padding: 0 15px !important;
             z-index: 2;
             display: flex !important;
             flex-direction: column !important;
@@ -33,7 +34,7 @@ export default function AboutHero() {
       <div className="custom-standard-hero-container">
         <div 
           style={{ 
-            backgroundImage: "url('/images/about-bg.png')",
+            backgroundImage: "url('/images/about-bg.webp')",
             "--hero-overlay": "linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.92) 60%, rgba(0, 0, 0, 0.98) 100%)"
           } as React.CSSProperties} 
           className="custom-standard-hero-card"
@@ -48,4 +49,3 @@ export default function AboutHero() {
     </>
   );
 }
-

src/components/sections/BlogGrid.tsx

@@ -26,9 +26,40 @@ export default function BlogGrid() {
             }
         }
         @media (max-width: 768px) {
+            .elementor-104 .elementor-element.elementor-element-c70681e {
+                margin-top: var(--space-section) !important;
+                margin-bottom: 16px !important;
+            }
             .custom-blog-grid {
                 grid-template-columns: 1fr !important;
-                gap: 48px !important;
+                gap: 28px !important;
+                padding: 24px 20px !important;
+            }
+        }
+
+        @media (max-width: 767px) {
+            .elementor-104 .elementor-element.elementor-element-c70681e {
+                --padding-left: 10px !important;
+                --padding-right: 10px !important;
+                padding-left: 10px !important;
+                padding-right: 10px !important;
+            }
+            .elementor-104 .elementor-element.elementor-element-3dec5cf {
+                --padding-left: 0px !important;
+                --padding-right: 0px !important;
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+            }
+            .elementor-104 .elementor-element.elementor-element-aa12479,
+            .elementor-104 .elementor-element.elementor-element-aa12479 > .elementor-widget-container,
+            .elementor-104 .archive-listing,
+            .elementor-104 .custom-blog-grid {
+                width: 100% !important;
+                max-width: 100% !important;
+            }
+            .elementor-104 .custom-blog-grid {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
             }
         }
 
@@ -82,7 +113,7 @@ export default function BlogGrid() {
             font-family: var(--font-manrope), sans-serif !important;
         }
 
-        /* Bottom block pinned to the card base — keeps Read More + image at the
+        /* Bottom block pinned to the card base. Keeps Read More + image at the
            same vertical position across cards with different text lengths. */
         .custom-blog-bottom {
             display: flex !important;

src/components/sections/BlogPostFooter.tsx

@@ -147,6 +147,12 @@ const STYLES = `
     padding: clamp(24px, 3vw, 32px) clamp(20px, 4vw, 40px) clamp(8px, 1.5vw, 16px);
     display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px);
   }
+  @media (max-width: 767px) {
+    .dm-blog-footer-inner {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+  }
 
   /* Prev / Next */
   .dm-prevnext {

src/components/sections/BlogsHero.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import Link from "next/link";
 
 export default function BlogsHero() {
   return (
     <>
+      <link rel="preload" as="image" href="/images/home2-banner-1.webp" />
       <style dangerouslySetInnerHTML={{ __html: `
         .blogs-hero-title {
             color: #ffffff !important;
@@ -15,18 +15,31 @@ export default function BlogsHero() {
             letter-spacing: -1.5px !important;
             margin: 0 !important;
         }
+        .blogs-hero-content {
+            position: relative !important;
+            width: 100% !important;
+            height: 100% !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            flex-direction: column !important;
+            max-width: 1000px !important;
+            margin: 0 auto !important;
+            padding: 0 15px !important;
+            box-sizing: border-box !important;
+        }
       `}} />
       <div className="custom-standard-hero-container">
         <div 
           style={{ 
-            backgroundImage: "url(/images/home2-banner-1.jpg)", 
+            backgroundImage: "url(/images/home2-banner-1.webp)", 
             backgroundPosition: "center center", 
             backgroundRepeat: "no-repeat", 
             backgroundSize: "cover" 
           }} 
           className="custom-standard-hero-card"
         >
-          <div className="e-con-inner" style={{ position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column" }}>
+          <div className="blogs-hero-content">
             
             {/* Title / Heading for Blogs */}
             <div style={{ textAlign: "center", color: "#fff", zIndex: 5 }}>
@@ -43,4 +56,3 @@ export default function BlogsHero() {
     </>
   );
 }
-

src/components/sections/CompetitiveEdge.tsx

@@ -492,7 +492,11 @@ export default function CompetitiveEdge() {
 
         @media (max-width: 768px) {
           .comparison-section {
-            padding: 80px 0;
+            padding: 56px 0;
+          }
+
+          .comparison-section .container {
+            padding: 0 10px;
           }
 
           .moat-heading {

src/components/sections/ConnectedLogistics.tsx

@@ -33,6 +33,25 @@ export default function ConnectedLogistics() {
           max-width: min(526px, 100%) !important;
         }
 
+        /* Sizing and identical padding on all 4 sides for Connected Logistics Image container */
+        .elementor-element-99768ba .elementor-widget-container {
+          display: flex !important;
+          justify-content: center !important;
+          align-items: center !important;
+          padding: 40px !important; /* Identical gap on left, right, top, and bottom */
+          box-sizing: border-box !important;
+        }
+
+        .elementor-element-99768ba img.wp-image-4481 {
+          width: 100% !important;
+          max-width: 100% !important; /* Allow natural responsive scaling on desktop */
+          height: auto !important;
+          object-fit: cover !important;
+          border-radius: 25px !important; /* Preserve 25px border radius */
+          margin: 0 auto !important;
+          display: block !important;
+        }
+
         /* Desktop/Laptop (min-width: 1025px) column width and flex rules */
         @media (min-width: 1025px) {
           .elementor-element-9ffed33 {
@@ -67,9 +86,20 @@ export default function ConnectedLogistics() {
             padding-right: 0 !important;
           }
 
+          /* Force ScrollReveal wrapper div to span full width */
+          .elementor-element-96343ba > div {
+            width: 100% !important;
+            height: auto !important;
+          }
+
           /* Show image at the bottom or top depending on order */
           .elementor-element-96343ba {
-            margin-top: 30px !important;
+            margin-top: 0px !important;
+          }
+
+          /* Reduce padding bottom of the content section on tablet */
+          .elementor-element-71c3e1d {
+            padding-bottom: 24px !important;
           }
 
           /* Override desktop fixed widths on mobile/tablet */
@@ -78,6 +108,52 @@ export default function ConnectedLogistics() {
             width: 100% !important;
             max-width: 100% !important;
           }
+
+          /* Allow widget container to take 100% width on mobile/tablet */
+          .elementor-element-99768ba {
+            width: 100% !important;
+            max-width: 100% !important;
+          }
+
+          /* Tablet overrides */
+          .elementor-element-99768ba .elementor-widget-container {
+            padding: 10px !important;
+            display: block !important; /* Disable flex centering layout on mobile/tablet */
+            width: 100% !important;
+          }
+
+          .elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
+            width: 100% !important;
+            max-width: 600px !important; /* allow up to 600px on tablet */
+            border-radius: 25px !important; /* Explicitly keep 25px */
+          }
+        }
+
+        @media (max-width: 767px) {
+          /* Mobile overrides: let container take 100% width and image fill it */
+          .elementor-element-99768ba {
+            width: 100% !important;
+            max-width: 100% !important;
+          }
+
+          /* Eliminate extra gap under the content column on mobile */
+          .elementor-element-71c3e1d {
+            padding-bottom: 12px !important;
+          }
+
+          .elementor-element-99768ba .elementor-widget-container {
+            padding: 0px !important; /* Eliminate padding to maximize image width/height */
+            display: block !important; /* Disable flex centering layout on mobile/tablet */
+            width: 100% !important;
+          }
+
+          .elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
+            width: 100% !important;
+            max-width: 100% !important;
+            height: auto !important;
+            object-fit: cover !important;
+            border-radius: 25px !important; /* Explicitly keep 25px */
+          }
         }
       `}} />
       <div className="elementor-element elementor-element-9ffed33 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ffed33" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
@@ -92,7 +168,7 @@ export default function ConnectedLogistics() {
                   priority
                   width={578} 
                   height={790} 
-                  src="/images/home2-pic-3.png" 
+                  src="/images/home2-pic-3.webp" 
                   className="attachment-full size-full wp-image-4481" 
                   alt="Connected Logistics" 
                   style={{

src/components/sections/ContactMap.tsx

@@ -41,7 +41,7 @@ export default function ContactMap() {
              (bottom was square before, leaving a hard edge above the footer gap). */
           border-radius: 25px;
           overflow: hidden;
-          background: #0b0b0b;
+          background: transparent;
           line-height: 0;
         }
         @media (max-width: 840px) {

src/components/sections/ContactsHero.tsx

@@ -3,10 +3,11 @@ import React from "react";
 export default function ContactsHero() {
   return (
     <>
+      <link rel="preload" as="image" href="/images/home2-banner-3.webp" />
       <style dangerouslySetInnerHTML={{ __html: `
         .contacts-hero-custom {
           background-color: #0b0b0b !important;
-          background-image: url('/images/home2-banner-3.jpg') !important;
+          background-image: url('/images/home2-banner-3.webp') !important;
           background-size: cover !important;
           background-position: center !important;
         }
@@ -221,4 +222,3 @@ export default function ContactsHero() {
   );
 }
 
-

src/components/sections/EVLogisticSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import Image from "next/image";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
@@ -9,43 +9,61 @@ if (typeof window !== "undefined") {
   gsap.registerPlugin(ScrollTrigger);
 }
 
-const ACCORDION_DATA = [
+const CARDS_DATA = [
   {
     index: 1,
-    num: "01",
-    title: "Battery-First Planning",
-    desc: "Routes are optimized around battery levels and charging windows, not retrofitted as an afterthought."
+    title: "Operational Visibility",
+    desc: "Real-time tracking and centralized control provide complete visibility across every shipment, vehicle, and delivery milestone.",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="2" y="7" width="16" height="10" rx="2" ry="2" />
+        <line x1="22" y1="11" x2="22" y2="13" />
+        <line x1="6" y1="11" x2="10" y2="11" />
+        <line x1="6" y1="13" x2="12" y2="13" />
+      </svg>
+    )
   },
   {
     index: 2,
-    num: "02",
-    title: "Energy-Aware Routing",
-    desc: "Our algorithms factor in terrain, traffic, and payload weight to maximize range efficiency."
+    title: "Intelligent Routing",
+    desc: "AI-powered route optimization reduces travel time, improves delivery accuracy, and maximizes fleet utilization.",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+      </svg>
+    )
   },
   {
     index: 3,
-    num: "03",
-    title: "Smart Charging Integration",
-    desc: "Seamless coordination with charging infrastructure to eliminate range anxiety for drivers."
+    title: "EV-First Logistics",
+    desc: "Purpose-built workflows for electric fleets improve battery efficiency, charging management, and sustainable operations.",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12 2v10" />
+        <path d="M18 8V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v2a4 4 0 0 0 4 4h4a4 4 0 0 0 4-4Z" />
+        <path d="M10 22v-6" />
+        <path d="M14 22v-6" />
+      </svg>
+    )
   },
   {
     index: 4,
-    num: "04",
-    title: "Carbon Footprint Tracking",
-    desc: "Real-time emissions monitoring and sustainability reports for every delivery."
+    title: "Scalable Network",
+    desc: "Flexible logistics infrastructure supports growth across cities, regions, and high-volume delivery operations without disruption.",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 3.5 2 5.5a7 7 0 0 1-7 7h-3" />
+        <path d="M12 22V12" />
+      </svg>
+    )
   }
 ];
 
 export default function EVLogisticSection() {
-  const [openIndex, setOpenIndex] = useState<number | null>(4); // Default to item 4 open to match user's screenshot layout
   const containerRef = useRef<HTMLDivElement>(null);
   const imageWrapperRef = useRef<HTMLDivElement>(null);
   const imageRef = useRef<HTMLImageElement>(null);
 
-  const toggleAccordion = (index: number) => {
-    setOpenIndex((prev) => (prev === index ? null : index));
-  };
-
   useEffect(() => {
     const container = containerRef.current;
     const img = imageRef.current;
@@ -71,21 +89,19 @@ export default function EVLogisticSection() {
     });
 
     entryTl
-      .to(container.querySelector(".ev-logistic-kicker"), {
+      .to(container.querySelector(".ev-logistic-kicker-widget"), {
         opacity: 1,
         y: 0,
-        letterSpacing: "3px", // Kinetic letter-spacing track expand effect!
         duration: 0.8,
         ease: "power3.out",
       })
-      .to(container.querySelectorAll(".ev-char"), {
-        y: "0%",
+      .to(container.querySelector(".ev-logistic-title-widget"), {
+        y: 0,
         opacity: 1,
-        duration: 0.95,
-        stagger: 0.02, // Rapid letter-by-letter wave reveal!
+        duration: 0.85,
         ease: "power4.out",
       }, "-=0.45")
-      .to(container.querySelectorAll(".ev-logistic-accordion-item"), {
+      .to(container.querySelectorAll(".ev-feature-card"), {
         opacity: 1,
         y: 0,
         duration: 0.6,
@@ -107,20 +123,11 @@ export default function EVLogisticSection() {
     };
   }, []);
 
-  const headingText = "LOGISTICS BUILT FOR ELECTRIC VEHICLES";
-  const headingWords = headingText.split(" ");
-
   return (
     <>
       <style dangerouslySetInnerHTML={{ __html: `
-        /* Custom CSS Scoped to EV Logistics Section - New Premium Look */
+        /* Custom CSS Scoped to EV Logistics Section */
         .ev-logistic-section {
-          display: flex !important;
-          flex-direction: column !important;
-          width: 100% !important;
-          max-width: 1320px !important;
-          margin: 10px auto 120px auto !important; /* Centered horizontally with auto margins */
-          padding: 80px 60px !important; /* Restored original balanced left/right paddings */
           box-sizing: border-box !important;
           background: #ffffff !important;
           font-family: 'Manrope', sans-serif !important;
@@ -131,8 +138,6 @@ export default function EVLogisticSection() {
           width: 100% !important;
           max-width: 100% !important;
           align-self: stretch !important;
-          border-bottom: 2px solid rgba(17, 17, 17, 0.09) !important;
-          padding-bottom: 16px !important;
           margin-bottom: 48px !important;
           display: block !important;
           text-align: left !important;
@@ -144,13 +149,13 @@ export default function EVLogisticSection() {
           align-items: center !important;
           justify-content: space-between !important;
           width: 100% !important;
-          gap: 40px !important;
+          gap: 3% !important;
         }
 
-        /* Balanced Left Column - Image column takes up 58% */
+        /* Left Column - Image column takes up 45% */
         .ev-logistic-image-col {
-          flex: 1 1 58% !important;
-          max-width: 58% !important; 
+          flex: 0 0 45% !important;
+          max-width: 45% !important; 
           display: flex !important;
           align-items: center !important;
           justify-content: flex-start !important; 
@@ -182,235 +187,139 @@ export default function EVLogisticSection() {
           justify-content: flex-start !important;
           overflow: visible !important;
           position: relative !important;
-          transform: scale(1.15) !important; /* Scale up image to make it larger and more dominant */
+          transform: scale(1.15) !important;
           transform-origin: left center !important;
-          margin-left: -80px !important; /* Offset image to the left to anchor it to the container edge */
+          margin-left: -80px !important;
         }
 
         .ev-logistic-image-wrapper img {
           width: 100% !important;
           height: auto !important;
           object-fit: contain !important;
-          filter: none !important; /* Blends solid white JPEG edges seamlessly into pure white background */
+          filter: none !important;
           will-change: transform !important;
         }
 
-        /* Balanced right column - takes up 42% for crisp textual reading */
+        /* Right column - takes up 52% for grid cards */
         .ev-logistic-content-col {
-          flex: 1 1 42% !important;
-          max-width: 42% !important; 
+          flex: 0 0 52% !important;
+          max-width: 52% !important; 
           display: flex !important;
           flex-direction: column !important;
           justify-content: center !important;
           margin: 0 !important;
         }
 
-        .ev-logistic-kicker {
-          font-size: 14px !important;
-          font-weight: 400 !important;
-          line-height: 2.1429em !important;
-          letter-spacing: 0px !important; /* Expands to 3px on scroll */
-          text-transform: lowercase !important;
-          color: #111111 !important;
-          margin: 0 !important;
+        .ev-logistic-kicker-widget {
           opacity: 0;
           transform: translateY(-12px);
-          will-change: transform, opacity, letter-spacing;
-          text-align: left !important;
-          display: inline-block !important;
+          will-change: transform, opacity;
         }
 
         .ev-logistic-title-wrapper {
-          margin-bottom: 48px;
+          margin: 0 !important;
         }
 
-        /* Expanded clean headings look from the screenshot */
-        .ev-logistic-title {
-          font-size: clamp(45px, 6.2vw, 96px);
-          font-weight: 500;
-          line-height: 0.95;
-          text-transform: uppercase;
-          color: #111111;
-          margin: 0 10px 0 0; /* Clean margin-right to shift title away from borders */
-          letter-spacing: -1.8px;
-        }
-
-        /* CSS for robust letter-by-letter animation wrapping */
-        .ev-word-inline {
-          display: inline-block;
-          white-space: nowrap; /* Prevents awkward character line breaks */
-        }
-
-        .ev-char-wrapper {
-          display: inline-block;
-          overflow: hidden;
-          vertical-align: top;
-        }
-
-        .ev-char {
-          display: inline-block;
-          transform: translateY(110%);
+        .ev-logistic-title-widget {
           opacity: 0;
+          transform: translateY(24px);
           will-change: transform, opacity;
         }
 
-        .ev-char-space {
-          display: inline-block;
+        .ev-logistic-title-widget > .elementor-widget-container {
+          margin: 0 !important;
+          padding: 0 !important;
         }
 
-        .ev-logistic-accordion {
-          display: flex;
-          flex-direction: column;
-          width: 100%;
+        .ev-logistic-title-widget .logico-title {
+          margin: 0 !important;
+          text-align: left !important;
         }
 
-        /* Sleek horizontal grid borders */
-        .ev-logistic-accordion-item {
-          width: 100%;
-          border-top: 1px solid #e5e7eb;
+        /* Card Grid Layout */
+        .ev-feature-grid {
+          display: grid !important;
+          grid-template-columns: repeat(2, 1fr) !important;
+          gap: 24px !important;
+          width: 100% !important;
+        }
+
+        /* Premium Theme White Card */
+        .ev-feature-card {
+          display: flex !important;
+          flex-direction: column !important;
+          background: #ffffff !important;
+          border: 1px solid rgba(17, 17, 17, 0.09) !important;
+          border-radius: 20px !important;
+          padding: 30px !important;
+          color: #555555 !important;
+          height: 100% !important;
+          box-sizing: border-box !important;
           opacity: 0;
           transform: translateY(20px);
           will-change: transform, opacity;
-          transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
+          transition: border-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
+                      box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
+                      transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
+          box-shadow: 0 4px 24px rgba(17, 17, 17, 0.02) !important;
         }
 
-        .ev-logistic-accordion-item:last-child {
-          border-bottom: 1px solid #e5e7eb;
+        .ev-feature-card:hover {
+          border-color: #c01227 !important;
+          box-shadow: 0 20px 40px rgba(192, 18, 39, 0.08), 0 4px 12px rgba(17, 17, 17, 0.03) !important;
+          transform: translateY(-8px) !important;
         }
 
-        /* Soft highlight on row hover */
-        .ev-logistic-accordion-item:hover {
-          background: rgba(192, 18, 39, 0.015);
+        /* Red Icon Wrapper */
+        .ev-feature-icon-wrapper {
+          margin-bottom: 24px !important;
+          display: inline-flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+          width: 54px !important;
+          height: 54px !important;
+          background: rgba(192, 18, 39, 0.06) !important;
+          border: 1px solid rgba(192, 18, 39, 0.18) !important;
+          border-radius: 50% !important;
+          color: #c01227 !important;
+          transition: all 0.3s ease !important;
         }
 
-        /* Spacious row padding for luxurious design - INCREASED font size for headers */
-        .ev-logistic-accordion-header {
-          width: 100%;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 28px 16px;
-          cursor: pointer;
-          background: transparent;
-          border: none;
-          text-align: left;
-          outline: none;
-          font-family: 'Manrope', sans-serif;
-          font-size: clamp(24px, 2.2vw, 30px); /* Increased to clamp up to 30px! */
-          font-weight: 700;
-          color: #111111;
-          transition: color 0.3s ease;
+        .ev-feature-card:hover .ev-feature-icon-wrapper {
+          background: rgba(192, 18, 39, 0.12) !important;
+          border-color: #c01227 !important;
+          transform: scale(1.1) !important;
+          box-shadow: 0 0 12px rgba(192, 18, 39, 0.15) !important;
         }
 
-        .ev-logistic-accordion-header span:first-child {
-          transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
-          display: inline-block;
+        .ev-feature-icon-wrapper svg {
+          width: 24px !important;
+          height: 24px !important;
+          stroke: currentColor !important;
         }
 
-        /* Row text horizontal slide nudge */
-        .ev-logistic-accordion-header:hover {
-          color: #c01227;
+        /* Title & Description Inside Cards */
+        .ev-feature-card-title {
+          font-family: 'Manrope', sans-serif !important;
+          font-size: 20px !important;
+          font-weight: 700 !important;
+          line-height: 1.3em !important;
+          color: #c01227 !important;
+          margin: 0 0 12px 0 !important;
+          text-transform: none !important;
         }
 
-        .ev-logistic-accordion-header:hover span:first-child {
-          transform: translateX(10px);
-        }
-
-        .ev-logistic-accordion-item.active .ev-logistic-accordion-header {
-          color: #111111;
-        }
-
-        .ev-logistic-accordion-arrow-container {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          width: 32px;
-          height: 32px;
-          transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
-        }
-
-        .ev-logistic-accordion-arrow-container svg {
-          width: 20px;
-          height: 20px;
-          stroke-width: 2.5;
-        }
-
-        /* Inactive arrows: point down-right ↘ */
-        .ev-logistic-accordion-item:not(.active) .ev-logistic-accordion-arrow-container {
-          transform: rotate(90deg);
-          color: #111111;
-        }
-
-        /* Active arrows: point up-right ↗ in brand red */
-        .ev-logistic-accordion-item.active .ev-logistic-accordion-arrow-container {
-          transform: rotate(0deg);
-          color: #c01227;
-        }
-
-        /* Hover: rotate smooth to diagonal up-right */
-        .ev-logistic-accordion-header:hover .ev-logistic-accordion-arrow-container {
-          transform: rotate(0deg);
-          color: #c01227;
-        }
-
-        .ev-logistic-accordion-content {
-          overflow: hidden;
-          max-height: 0;
-          opacity: 0;
-          transition: max-height 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s ease;
-        }
-
-        .ev-logistic-accordion-item.active .ev-logistic-accordion-content {
-          max-height: 160px;
-          opacity: 1;
-        }
-
-        /* Balanced text spacing inside descriptions - INCREASED font size for descriptions */
-        .ev-logistic-accordion-content-inner {
-          padding: 0 16px 28px 16px;
-          font-size: clamp(18px, 1.5vw, 20px); /* Increased to clamp up to 20px! */
-          line-height: 1.6;
-          color: #555555;
-          font-weight: 500;
-        }
-
-        /* Underline track & sweeping active red bar */
-        .ev-logistic-accordion-progress-track {
-          position: relative;
-          width: 100%;
-          height: 1.5px;
-          background: transparent;
-          margin-top: -1.5px;
-          overflow: hidden;
-        }
-
-        .ev-logistic-accordion-progress-bar {
-          position: absolute;
-          left: 0;
-          top: 0;
-          height: 100%;
-          width: 100%;
-          background: #c01227;
-          transform: scaleX(0);
-          transform-origin: left center;
-          transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
-          will-change: transform;
-        }
-
-        .ev-logistic-accordion-item.active .ev-logistic-accordion-progress-bar {
-          transform: scaleX(1);
+        .ev-feature-card-desc {
+          font-family: 'Manrope', sans-serif !important;
+          font-size: 14px !important;
+          font-weight: 500 !important;
+          line-height: 1.6 !important;
+          color: #555555 !important;
+          margin: 0 !important;
         }
 
         /* Responsiveness constraints */
         @media (max-width: 1024px) {
-          .ev-logistic-section {
-            padding: 60px 24px;
-            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 !important;
             gap: 50px !important;
@@ -420,13 +329,13 @@ export default function EVLogisticSection() {
             flex: 1 1 100% !important;
             max-width: 100% !important;
             min-height: auto !important;
-            justify-content: center !important; /* Center layout on mobile */
+            justify-content: center !important;
           }
 
           .ev-logistic-image-wrapper {
             max-width: 580px !important;
-            transform: none !important; /* Reset scale transform on mobile/tablet */
-            margin-left: 0 !important; /* Reset left margin offset on mobile/tablet */
+            transform: none !important;
+            margin-left: 0 !important;
             justify-content: center !important;
           }
 
@@ -435,123 +344,133 @@ export default function EVLogisticSection() {
             max-width: 100% !important;
           }
 
-          .ev-logistic-title {
-            font-size: 38px;
-          }
         }
 
-        @media (max-width: 768px) {
+        @media (max-width: 767px) {
           .ev-logistic-section {
-            padding: 40px 16px;
+            --padding-left: 10px !important;
+            --padding-right: 10px !important;
+            padding-left: 10px !important;
+            padding-right: 10px !important;
+            box-sizing: border-box !important;
           }
 
-          .ev-logistic-title {
-            font-size: 32px;
+          .ev-logistic-section > .e-con-inner {
+            width: 100% !important;
+            max-width: 100% !important;
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+            margin-left: auto !important;
+            margin-right: auto !important;
+            box-sizing: border-box !important;
           }
 
-          .ev-logistic-accordion-header {
-            font-size: 19px;
-            padding: 22px 8px;
+          .ev-logistic-section .elementor-element-343b363 {
+            --padding-left: 0px !important;
+            --padding-right: 0px !important;
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            box-sizing: border-box !important;
           }
-          
-          .ev-logistic-accordion-content-inner {
-            padding: 0;
-            font-size: 15.5px;
+
+          .ev-logistic-body-grid {
+            width: 100% !important;
+            max-width: 100% !important;
+            align-items: stretch !important;
+          }
+
+          .ev-logistic-content-col {
+            width: 100% !important;
+            max-width: 100% !important;
+            align-self: center !important;
+          }
+
+          .ev-feature-grid {
+            grid-template-columns: 1fr !important;
+            gap: 20px !important;
+            width: 100% !important;
+            max-width: 100% !important;
+          }
+
+          .ev-feature-card {
+            width: 100% !important;
+            max-width: 100% !important;
           }
         }
       `}} />
 
-      <div 
-        ref={containerRef}
-        className="ev-logistic-section"
-      >
-        {/* Top Header Row with / features / kicker */}
-        <div className="ev-logistic-header">
-          <div className="ev-logistic-kicker">/ Build Electric Vehicles /</div>
-        </div>
-
-        <div className="ev-logistic-body-grid">
-          {/* Left Column: Enlarged Floating Wrapper & Ambient glow */}
-          <div className="ev-logistic-image-col">
-            <div className="ev-logistic-image-glow"></div>
-            
-            <div ref={imageWrapperRef} className="ev-logistic-image-wrapper">
-              <Image 
-                ref={imageRef}
-                src="/images/ev.jpeg"
-                alt="EV Logistics"
-                width={1050}
-                height={854}
-                priority
-              />
-            </div>
-          </div>
-
-          {/* Right Column: Refined Accordion list with letter-by-letter animation */}
-          <div className="ev-logistic-content-col">
-            {/* Character-by-character masked entrance wave reveal on scroll */}
-            <div className="ev-logistic-title-wrapper">
-              <h3 className="ev-logistic-title">
-                {headingWords.map((word, wordIndex) => (
-                  <span key={wordIndex} className="ev-word-inline">
-                    {word.split("").map((letter, letterIndex) => (
-                      <span key={letterIndex} className="ev-char-wrapper">
-                        <span className="ev-char">{letter}</span>
-                      </span>
-                    ))}
-                    <span className="ev-char-space">&nbsp;</span>
-                  </span>
-                ))}
-              </h3>
-            </div>
-
-            <div className="ev-logistic-accordion">
-              {ACCORDION_DATA.map((item) => (
-                <div 
-                  key={item.index} 
-                  className={`ev-logistic-accordion-item ${openIndex === item.index ? "active" : ""}`}
-                >
-                  <button
-                    className="ev-logistic-accordion-header"
-                    onClick={() => toggleAccordion(item.index)}
-                    aria-expanded={openIndex === item.index}
-                  >
-                    <span>{item.num}. {item.title}</span>
-                    <span className="ev-logistic-accordion-arrow-container">
-                      <svg 
-                        viewBox="0 0 24 24" 
-                        fill="none" 
-                        stroke="currentColor" 
-                        strokeLinecap="round" 
-                        strokeLinejoin="round"
-                      >
-                        <line x1="7" y1="17" x2="17" y2="7"></line>
-                        <polyline points="7 7 17 7 17 17"></polyline>
-                      </svg>
-                    </span>
-                  </button>
-                  
-                  <div className="ev-logistic-accordion-content">
-                    <div className="ev-logistic-accordion-content-inner">
-                      {/* Kinetic slide-up and fade subtitle reveal */}
-                      <p style={{
-                        transform: openIndex === item.index ? "translateY(0)" : "translateY(12px)",
-                        opacity: openIndex === item.index ? 1 : 0,
-                        transition: "transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease",
-                        transitionDelay: "0.08s",
-                        margin: 0
-                      }}>
-                        {item.desc}
-                      </p>
-                    </div>
-                  </div>
-
-                  {/* Underline track & sweep animated red bar */}
-                  <div className="ev-logistic-accordion-progress-track">
-                    <div className="ev-logistic-accordion-progress-bar"></div>
+      <div className="elementor-61">
+        <div
+          ref={containerRef}
+          className="elementor-element elementor-element-88745f4 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent ev-logistic-section"
+          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">
+              {/* Same header hierarchy and container structure as "The Doormile Way". */}
+              <div className="ev-logistic-header">
+                <div className="elementor-element elementor-element-7afb238 elementor-widget elementor-widget-logico_heading ev-logistic-kicker-widget" 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 ev-logistic-kicker">/ Built for Electric Vehicles /</div>
                   </div>
                 </div>
-              ))}
+                <div className="ev-logistic-title-wrapper">
+                  <div className="elementor-element elementor-element-1cc335a elementor-widget elementor-widget-logico_heading ev-logistic-title-widget" 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,
+                        }}
+                      >
+                        Logistics Built for EV Vehicles
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="ev-logistic-body-grid">
+                {/* Left Column: Enlarged Floating Wrapper & Ambient glow */}
+                <div className="ev-logistic-image-col">
+                  <div className="ev-logistic-image-glow"></div>
+                  
+                  <div ref={imageWrapperRef} className="ev-logistic-image-wrapper">
+                    <Image 
+                      ref={imageRef}
+                      src="/images/ev.webp"
+                      alt="EV Logistics"
+                      width={1050}
+                      height={854}
+                      priority
+                    />
+                  </div>
+                </div>
+
+                {/* Right Column: 2x2 Grid of Feature Cards */}
+                <div className="ev-logistic-content-col">
+                  <div className="ev-feature-grid">
+                    {CARDS_DATA.map((item) => (
+                      <div 
+                        key={item.index} 
+                        className="ev-feature-card"
+                      >
+                        <div className="ev-feature-icon-wrapper">
+                          {item.icon}
+                        </div>
+                        <h4 className="ev-feature-card-title">{item.title}</h4>
+                        <p className="ev-feature-card-desc">{item.desc}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>

src/components/sections/EVSection.tsx

@@ -325,7 +325,7 @@ function DashboardPanel({
 }
 
 export default function EVSection({
-  bannerImage = "/images/bg-header-5.png",
+  bannerImage = "/images/bg-header-5.webp",
   cardNumber = "",
   cardTitle = "EV Logistics",
   cardSubtitle = "Cleaner miles, lower costs",
@@ -333,7 +333,7 @@ export default function EVSection({
   titleLead = "BUILT FOR ELECTRIC. ",
   titleAccent = "NOT ADAPTED.",
   features = DEFAULT_FEATURES,
-  image = "/images/premium-ev-van.png",
+  image = "/images/premium-ev-van.webp",
   imageAlt = "DoorMile electric delivery van",
   badges = DEFAULT_BADGES,
   stats = DEFAULT_STATS,
@@ -390,6 +390,7 @@ export default function EVSection({
 
   const outerClass =
     "elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" +
+    (useDashboard ? " evnd-workflow-shell" : "") +
     (gapTop ? " evnd-gap-top" : "") +
     (gapBottom ? " evnd-gap-bottom" : "");
 
@@ -532,6 +533,37 @@ export default function EVSection({
             .evnd__grid--cards .wf-scene { height: 100%; }
             .evnd__grid--cards .wf-scene { aspect-ratio: auto; }
             .evnd__grid--cards .evnd__dash { min-height: 100%; }
+            /* Static-image media (Workflow 2): cap the image height with a fixed
+               max-height so it sits at roughly the dashboard's row height instead
+               of towering hundreds of px below it. width:auto keeps the aspect
+               ratio (no stretch, no crop) and the frame hugs the image
+               (fit-content), so it stays centred with no side bands. The cap is
+               kept below the dashboard height so the image never inflates the row.
+               Scoped to the non-scene wrapper; desktop only, mobile untouched. */
+            .evnd__grid--cards .evnd__imgwrap:not(.evnd__imgwrap--media):not(.evnd__imgwrap--video) {
+                width: fit-content;
+                max-width: 100%;
+                margin-inline: auto;
+            }
+            .evnd__grid--cards .evnd__imgwrap:not(.evnd__imgwrap--media):not(.evnd__imgwrap--video) .evnd__img {
+                width: auto;
+                height: auto;
+                max-height: clamp(520px, 46vw, 670px);
+                max-width: 100%;
+            }
+        }
+
+        @media (min-width: 1200px) {
+            .evnd__grid--cards .evnd__imgwrap--video {
+                width: 100%;
+                height: 100%;
+                min-height: 100%;
+            }
+            .evnd__grid--cards .evnd__imgwrap--video .evnd__video {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
         }
 
         .evnd__left {
@@ -609,6 +641,12 @@ export default function EVSection({
             object-fit: cover;
             transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
         }
+        .evnd__video {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
         .evnd__imgwrap:hover .evnd__img {
             transform: scale(1.03);
         }
@@ -869,6 +907,22 @@ export default function EVSection({
             /* Ultra-wide: give the scene even more room (dashboard stays 600px). */
             .evnd__inner--cards { max-width: 1720px; }
         }
+        /* ---- Static-image workflow (Workflow 2) layout, 1440px+ ----
+           The asset is PORTRAIT, so it can't fill the wide scene column without
+           cropping. To show the WHOLE image (no missing content) it's hugged to
+           its own width via the ≥992 rules (fit-content frame + height cap) and
+           centred next to the 600px dashboard (same width as Workflow 1) with the
+           pair centred in a tightened inner — full image, no crop, no dead space.
+           It therefore sits a little narrower than the dashboard; filling the
+           column edge-to-edge would need a landscape source image. */
+        @media (min-width: 1440px) {
+            .evnd__inner--cards.evnd__inner--img { max-width: 1200px; }
+            .evnd__grid--cards.evnd__grid--img {
+                grid-template-columns: auto 600px;
+                justify-content: center;
+                gap: clamp(40px, 3vw, 56px);
+            }
+        }
 
         /* ---- Compact feature cards ---- */
         .evnd__dash-feats {
@@ -1004,9 +1058,47 @@ export default function EVSection({
             .evnd__dash-kpis { grid-template-columns: repeat(4, 1fr); }
         }
         @media (max-width: 767px) {
+            .elementor.elementor-61 .elementor-element.elementor-element-bbc6760,
+            .elementor-element.elementor-element-bbc6760.evnd-workflow-shell {
+                width: calc(100% - 20px) !important;
+                margin-left: 10px !important;
+                margin-right: 10px !important;
+                padding-left: 0px !important;
+                padding-right: 0px !important;
+                box-sizing: border-box !important;
+            }
             .evnd-gap-top { margin-top: 24px !important; }
             .evnd-gap-bottom { margin-bottom: 24px !important; }
-            .evnd__bar { grid-template-columns: repeat(2, 1fr); gap: 24px 0; padding: 24px 0; margin-top: 24px; }
+            .evnd { padding-inline: 0; }
+            .evnd__heading {
+                padding-left: 26px;
+                padding-right: 26px;
+                box-sizing: border-box;
+                margin-bottom: 28px;
+                display: flow-root;
+            }
+            .evnd__inner {
+                padding-left: 4px;
+                padding-right: 4px;
+                box-sizing: border-box;
+            }
+            .evnd__dash {
+                padding-left: 12px !important;
+                padding-right: 12px !important;
+            }
+            .evnd__bar {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 24px 0;
+                width: calc(100% - 8px);
+                max-width: calc(100% - 8px);
+                margin: 32px auto 0;
+                padding: 24px 0;
+                box-sizing: border-box;
+            }
+            .evnd.evnd--cards {
+                padding-bottom: 20px;
+                margin-bottom: 0;
+            }
             .evnd__bar-item:nth-child(even)::after { display: none; }
             .evnd__bar-item:nth-child(2)::after { display: none; }
             .evnd__bar-item { padding: 12px 16px; }
@@ -1027,12 +1119,66 @@ export default function EVSection({
             .evnd__grid--cards .evnd__left,
             .evnd__grid--cards .evnd__right,
             .evnd__grid--cards .evnd__media,
-            .evnd__grid--cards .evnd__dash { min-width: 0; }
+            .evnd__grid--cards .evnd__dash {
+                min-width: 0;
+                width: 100% !important;
+                max-width: 100% !important;
+                box-sizing: border-box !important;
+            }
             /* Keep the KPI row a tidy 2x2 on phones. */
             .evnd__dash-kpis { grid-template-columns: repeat(2, 1fr); }
+            /* Workflow feature cards: distribute content like the Women stats
+               rows so the icon balances the right side instead of everything
+               clustering at the left edge. */
+            .evnd-workflow-shell .evnd__dash-feats { gap: 10px; }
+            .evnd-workflow-shell .evnd__dfeat {
+                grid-template-columns: minmax(0, 1fr) 36px;
+                gap: 12px;
+                padding: 12px 14px;
+            }
+            .evnd-workflow-shell .evnd__dfeat-ico {
+                grid-column: 2;
+                grid-row: 1;
+                justify-self: end;
+                width: 36px;
+                height: 36px;
+            }
+            .evnd-workflow-shell .evnd__dfeat-body {
+                grid-column: 1;
+                grid-row: 1;
+            }
+
+            /* ---- Mobile-only overrides for Hero Image & EV Logistics Card ---- */
+            .elementor-element.elementor-element-7da6646 {
+                width: calc(100% - 16px) !important;
+                margin-left: 8px !important;
+                margin-right: 8px !important;
+                border-radius: 18px !important;
+                margin-top: 15px !important;
+                margin-bottom: -50px !important;
+                box-sizing: border-box !important;
+            }
+            .elementor-element.elementor-element-8b5d6e6 {
+                padding-left: 8px !important;
+                padding-right: 8px !important;
+                margin-left: 0px !important;
+                margin-right: 0px !important;
+                width: 100% !important;
+                max-width: 100% !important;
+                box-sizing: border-box !important;
+            }
+            .elementor-element.elementor-element-1f766ea {
+                padding-left: 0px !important;
+                padding-right: 0px !important;
+                margin-left: auto !important;
+                margin-right: auto !important;
+                width: 100% !important;
+                max-width: 100% !important;
+            }
         }
         @media (max-width: 480px) {
             .evnd { padding: 40px 16px 48px; }
+            .evnd { padding-inline: 0; }
             .evnd__bar { grid-template-columns: repeat(2, 1fr); gap: 18px 0; padding: 22px 0; }
             .evnd__bar-item { padding: 10px 12px; gap: 8px; }
             .evnd__bar-val { font-size: clamp(26px, 9vw, 34px); }
@@ -1051,13 +1197,13 @@ export default function EVSection({
             .evnd-feature__arrow { position: absolute; top: 16px; right: 16px; margin: 0; }
 
             /* ---- Compact dashboard (phones) ---- */
-            .evnd__dash { padding: 18px; gap: 14px; }
+            .evnd__dash { padding-top: 18px !important; padding-bottom: 18px !important; gap: 14px; }
             .evnd__dash-sys { display: none; }
             .evnd__dash-kpis { gap: 10px; }
             .evnd__kpi { padding: 12px 14px; gap: 4px; }
             .evnd__kpi-val { font-size: clamp(24px, 8vw, 30px); }
             .evnd__kpi-label { font-size: 12px; }
-            .evnd__dfeat { padding: 12px 14px; gap: 12px; grid-template-columns: 34px minmax(0, 1fr); }
+            .evnd-workflow-shell .evnd__dfeat { padding: 11px 12px; gap: 10px; grid-template-columns: minmax(0, 1fr) 34px; }
             .evnd__dfeat-ico { width: 34px; height: 34px; border-radius: 9px; }
             .evnd__dfeat-ico svg { width: 17px; height: 17px; }
             .evnd__dfeat-title { font-size: 13.5px; }
@@ -1184,27 +1330,44 @@ export default function EVSection({
           )}
 
           <div
-            className={`evnd__inner${useDashboard ? " evnd__inner--cards" : ""}`}
+            className={`evnd__inner${useDashboard ? " evnd__inner--cards" : ""}${
+              useDashboard && !mediaSlot ? " evnd__inner--img" : ""
+            }`}
           >
-            <span className="evnd__eyebrow">{eyebrow}</span>
-            <h2 className="evnd__title">
-              {titleLead}
-              <span className="accent">{titleAccent}</span>
-            </h2>
+            <div className="evnd__heading">
+              <span className="evnd__eyebrow">{eyebrow}</span>
+              <h2 className="evnd__title">
+                {titleLead}
+                <span className="accent">{titleAccent}</span>
+              </h2>
+            </div>
 
             {/* MAIN GRID */}
             <div
-              className={`evnd__grid${useDashboard ? " evnd__grid--cards" : ""}`}
+              className={`evnd__grid${useDashboard ? " evnd__grid--cards" : ""}${
+                useDashboard && !mediaSlot ? " evnd__grid--img" : ""
+              }`}
             >
               {/* Left column */}
               <div className="evnd__left">
                 <div className="evnd__media">
                   <div className="evnd__glow" />
                   <div
-                    className={`evnd__imgwrap${mediaSlot ? " evnd__imgwrap--media" : ""}`}
+                    className={`evnd__imgwrap${mediaSlot ? " evnd__imgwrap--media" : ""}${image.endsWith(".mp4") ? " evnd__imgwrap--video" : ""}`}
                   >
                     {mediaSlot ? (
                       mediaSlot
+                    ) : image.endsWith(".mp4") ? (
+                      <video
+                        className="evnd__video"
+                        autoPlay
+                        muted
+                        loop
+                        playsInline
+                        aria-label={imageAlt}
+                      >
+                        <source src={image} type="video/mp4" />
+                      </video>
                     ) : (
                       /* eslint-disable-next-line @next/next/no-img-element */
                       <img

src/components/sections/HowItWorksHero.tsx

@@ -19,19 +19,20 @@ export default function HowItWorksHero() {
 
   return (
     <>
+      <link rel="preload" as="image" href="/images/home2-banner-1.webp" />
       <style
         dangerouslySetInnerHTML={{
           __html: `
         .howits-hero-custom-bg.elementor-repeater-item-3264830,
         .howits-hero-custom-bg.elementor-repeater-item-6867061 {
-            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home2-banner-1.jpg') !important;
+            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home2-banner-1.webp') !important;
             background-position: center !important;
             background-repeat: no-repeat !important;
             background-size: cover !important;
         }
 
         .howits-hero-custom-bg.elementor-repeater-item-6867061 {
-            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-2.png') !important;
+            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-2.webp') !important;
             background-position: center !important;
             background-repeat: no-repeat !important;
             background-size: cover !important;
@@ -46,7 +47,7 @@ export default function HowItWorksHero() {
             text-align: center !important;
             width: 100% !important;
             height: 100% !important;
-            padding: 0 40px !important;
+            padding: 0 !important;
             box-sizing: border-box !important;
         }
 
@@ -72,6 +73,8 @@ export default function HowItWorksHero() {
             width: 100% !important;
             margin-left: auto !important;
             margin-right: auto !important;
+            padding-left: 15px !important;
+            padding-right: 15px !important;
         }
 
         .elementor-element.elementor-element-6c7cbcb .content-slider-item-text {
@@ -85,6 +88,8 @@ export default function HowItWorksHero() {
             text-align: center !important;
             max-width: 820px !important;
             margin: 0 auto !important;
+            padding-left: 15px !important;
+            padding-right: 15px !important;
         }
 
         /* Larger, more readable hero subtitle on large/4K screens */
@@ -108,10 +113,13 @@ export default function HowItWorksHero() {
 
         @media (max-width: 1024px) {
             .elementor-element.elementor-element-741f56c {
-                width: calc(100% - 40px) !important;
-                max-width: none !important;
+                width: 100% !important;
+                max-width: 100% !important;
                 margin-left: auto !important;
                 margin-right: auto !important;
+                --padding-top: 0px !important;
+                --padding-block-start: 0px !important;
+                padding: 0 10px 10px 10px !important;
                 overflow: hidden !important;
                 border-radius: 25px !important;
             }
@@ -133,15 +141,19 @@ export default function HowItWorksHero() {
             .elementor-element.elementor-element-6c7cbcb .slide-content {
                 width: 100% !important;
                 min-height: 620px !important;
-                padding-left: 48px !important;
-                padding-right: 48px !important;
+                padding-left: 0 !important;
+                padding-right: 0 !important;
                 box-sizing: border-box !important;
             }
         }
 
         @media (max-width: 767px) {
             .elementor-element.elementor-element-741f56c {
-                width: calc(100% - 24px) !important;
+                width: 100% !important;
+                max-width: 100% !important;
+                --padding-top: 0px !important;
+                --padding-block-start: 0px !important;
+                padding: 0 10px 10px 10px !important;
                 border-radius: 22px !important;
             }
 
@@ -161,8 +173,8 @@ export default function HowItWorksHero() {
                asymmetric top margin). */
             .elementor .elementor-element.elementor-element-6c7cbcb .slide-content {
                 min-height: 560px !important;
-                padding-left: 22px !important;
-                padding-right: 22px !important;
+                padding-left: 0 !important;
+                padding-right: 0 !important;
                 align-items: center !important;
                 justify-content: center !important;
                 text-align: center !important;

src/components/sections/IndexHero.tsx

@@ -52,6 +52,7 @@ export default function IndexHero() {
 
   return (
     <div className="elementor-element elementor-element-741f56c e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="741f56c" data-element_type="container" data-e-type="container">
+      <link rel="preload" as="image" href="/images/home-bg-1.webp" />
       <style dangerouslySetInnerHTML={{ __html: `
         /* Fluid responsive font size override for hero headings */
         .logico-content-slider-widget .content-slider-item-heading {
@@ -177,7 +178,7 @@ export default function IndexHero() {
                         <div 
                           className="content-item slider-item elementor-repeater-item-3264830 slide-style-standard"
                           style={{
-                            backgroundImage: "url('/images/home-bg-1.png')",
+                            backgroundImage: "url('/images/home-bg-1.webp')",
                             backgroundPosition: "center center",
                             backgroundRepeat: "no-repeat",
                             backgroundSize: "cover"
@@ -218,7 +219,7 @@ export default function IndexHero() {
                         <div 
                           className="content-item slider-item elementor-repeater-item-6867061 slide-style-standard"
                           style={{
-                            backgroundImage: "url('/images/home-bg-1.png')",
+                            backgroundImage: "url('/images/home-bg-1.webp')",
                             backgroundPosition: "center center",
                             backgroundRepeat: "no-repeat",
                             backgroundSize: "cover"

src/components/sections/IndustrySolutions.tsx

@@ -5,6 +5,66 @@ import { ScrollReveal } from "@/animations/Reveal";
 
 export default function IndustrySolutions() {
   return (
+    <>
+    <style dangerouslySetInnerHTML={{ __html: `
+      @media (max-width: 768px) {
+        .elementor-element.elementor-element-3b4a7cc {
+          --padding-left: 10px !important;
+          --padding-right: 10px !important;
+          padding-left: 10px !important;
+          padding-right: 10px !important;
+          box-sizing: border-box !important;
+        }
+
+        .elementor-element.elementor-element-3b4a7cc > .e-con-inner {
+          width: 100% !important;
+          max-width: 100% !important;
+          margin-left: auto !important;
+          margin-right: auto !important;
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+        }
+
+        .elementor-element.elementor-element-d602f7f,
+        .elementor-element.elementor-element-f64bd88,
+        .elementor-element.elementor-element-5ed2dbb,
+        .elementor-element.elementor-element-6829276 {
+          --padding-left: 0px !important;
+          --padding-right: 0px !important;
+          --margin-left: 0px !important;
+          --margin-right: 0px !important;
+          width: 100% !important;
+          max-width: 100% !important;
+          margin-left: 0 !important;
+          margin-right: 0 !important;
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+          box-sizing: border-box !important;
+        }
+
+        .elementor-element.elementor-element-6829276 {
+          --e-con-grid-template-columns: minmax(0, 1fr) !important;
+          --grid-justify-content: stretch !important;
+          --justify-items: stretch !important;
+          grid-template-columns: minmax(0, 1fr) !important;
+          justify-content: stretch !important;
+          justify-items: stretch !important;
+          min-width: 0 !important;
+        }
+
+        .industry-solutions-grid,
+        .industry-card-link {
+          width: 100% !important;
+          max-width: 100% !important;
+          min-width: 0 !important;
+        }
+
+        .industry-solutions-grid {
+          margin-left: 0 !important;
+          margin-right: 0 !important;
+        }
+      }
+    `}} />
     <div className="elementor-element elementor-element-3b4a7cc e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="3b4a7cc" data-element_type="container" data-e-type="container">
         <div className="e-con-inner">
           <div className="elementor-element elementor-element-d602f7f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="d602f7f" data-element_type="container" data-e-type="container">
@@ -85,7 +145,7 @@ export default function IndustrySolutions() {
                 <Link href="/solutions" className="industry-card-link">
                   <div className="industry-card-bg">
                     <Image 
-                      src="/images/tab-pic-1.jpeg" 
+                      src="/images/tab-pic-1.webp" 
                       alt="FMCG Logistics" 
                       fill 
                       style={{ objectFit: "cover" }} 
@@ -149,7 +209,7 @@ export default function IndustrySolutions() {
                 <Link href="/solutions" className="industry-card-link">
                   <div className="industry-card-bg">
                     <Image 
-                      src="/images/tab-pic-2.jpeg" 
+                      src="/images/tab-pic-2.webp" 
                       alt="Pharma Logistics" 
                       fill 
                       style={{ objectFit: "cover" }} 
@@ -213,7 +273,7 @@ export default function IndustrySolutions() {
                 <Link href="/solutions" className="industry-card-link">
                   <div className="industry-card-bg">
                     <Image 
-                      src="/images/tab-pic-3.jpeg" 
+                      src="/images/tab-pic-3.webp" 
                       alt="Enterprise Logistics" 
                       fill 
                       style={{ objectFit: "cover" }} 
@@ -278,6 +338,7 @@ export default function IndustrySolutions() {
             </div>
           </div>
         </div>
-      </div>
+    </div>
+    </>
   );
 }

src/components/sections/IndustryStack.tsx

@@ -19,7 +19,7 @@ const SECTIONS: Section[] = [
   {
     id: 1,
     title: "FMCG",
-    image: "/images/tab-pic-1-solution.jpeg",
+    image: "/images/tab-pic-1-solution.webp",
     alt: "FMCG logistics",
     desc:
       "FMCG logistics demands speed, precision, and continuous fulfillment across high-volume delivery networks. Businesses must balance tight delivery timelines, inventory movement, and operational efficiency without compromising product availability.",
@@ -39,7 +39,7 @@ const SECTIONS: Section[] = [
   {
     id: 2,
     title: "Pharma",
-    image: "/images/tab-pic-2-solution.jpeg",
+    image: "/images/tab-pic-2-solution.webp",
     alt: "Pharma logistics",
     desc:
       "Pharma logistics requires precision, compliance, and real-time monitoring so every shipment arrives safely and on time — from temperature-sensitive medicines to urgent emergency deliveries.",
@@ -59,7 +59,7 @@ const SECTIONS: Section[] = [
   {
     id: 3,
     title: "Enterprise & B2B",
-    image: "/images/tab-pic-3-solution.jpeg",
+    image: "/images/tab-pic-3-solution.webp",
     alt: "Enterprise and B2B logistics",
     desc:
       "Enterprise and B2B logistics require coordination and reliability to manage high-value shipments at scale — with appointment scheduling, white-glove standards, and strict SLA commitments.",
@@ -306,7 +306,7 @@ const CSS = `
   #ind-stack .istk__content { max-width: none; }
 }
 @media (max-width: 600px) {
-  #ind-stack .istk { padding: 10px 14px; }
+  #ind-stack .istk { padding: 10px; }
   #ind-stack .istk__card { padding: 22px 20px; border-radius: 24px; }
   #ind-stack .istk__media { height: 240px; }
   #ind-stack .istk__title { margin-bottom: 16px !important; }

src/components/sections/IntelligenceGrid.tsx

@@ -15,7 +15,7 @@ const ROADMAP_DATA = [
     trackLeft: "12.5%",
     phase: "Pilot Phase",
     phaseClass: "yellow",
-    title: "Hyderabad Pilot",
+    title: "Pilot",
     desc: "Launch operations in Hyderabad with dedicated EV hubs and MileTruth AI v1.0.",
     icon: (
       <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
@@ -25,7 +25,7 @@ const ROADMAP_DATA = [
       </svg>
     ),
     stats: [
-      { text: "50-80 orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
+      { text: "100+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
       { text: "1 city", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg> },
       { text: "10+ women partners", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg> }
     ]
@@ -36,7 +36,7 @@ const ROADMAP_DATA = [
     trackLeft: "37.5%",
     phase: "Multi-City",
     phaseClass: "green",
-    title: "Multi-City Scale",
+    title: "Scale",
     desc: "Expand to Bengaluru and Chennai, securing key B2B enterprise traction.",
     icon: (
       <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
@@ -46,7 +46,7 @@ const ROADMAP_DATA = [
       </svg>
     ),
     stats: [
-      { text: "300-500 orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
+      { text: "500+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
       { text: "3 cities", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg> },
       { text: "50+ EVs", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> }
     ]
@@ -57,8 +57,8 @@ const ROADMAP_DATA = [
     trackLeft: "62.5%",
     phase: "Platform",
     phaseClass: "blue",
-    title: "Platform Expansion",
-    desc: "Scale to 5+ cities. Launch developer API marketplace and Series A readiness.",
+    title: "Expansion",
+    desc: "Scale to 5+ cities. Strengthen regional operations.",
     icon: (
       <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
         <circle cx="12" cy="12" r="3"></circle>
@@ -66,9 +66,9 @@ const ROADMAP_DATA = [
       </svg>
     ),
     stats: [
-      { text: "1,200+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
+      { text: "5000+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
       { text: "5+ cities", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg> },
-      { text: "API marketplace", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg> }
+      { text: "100+ women partners", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg> }
     ]
   },
   {
@@ -86,8 +86,8 @@ const ROADMAP_DATA = [
       </svg>
     ),
     stats: [
-      { text: "5,000+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
-      { text: "Rs 65 Cr+ revenue", icon: <span className="currency-symbol" style={{ marginRight: "4px", fontSize: "11px", fontWeight: 800 }}>Rs</span> },
+      { text: "50,000+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
+      { text: "50+ cities", icon: <span className="currency-symbol" style={{ marginRight: "4px", fontSize: "11px", fontWeight: 800 }}>Rs</span> },
       { text: "2,000+ women partners", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg> }
     ]
   }
@@ -234,7 +234,7 @@ export default function IntelligenceGrid() {
   return (
     <div 
       ref={containerRef}
-      className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" 
+      className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent intelligence-grid-section" 
       data-id="bbc6760" 
       data-element_type="container" 
       data-e-type="container"
@@ -710,11 +710,19 @@ export default function IntelligenceGrid() {
             }
           }
 
-          @media (max-width: 768px) {
+          @media (max-width: 767px) {
+            .intelligence-grid-section {
+              --padding-left: 0px !important;
+              --padding-right: 0px !important;
+              padding-left: 0 !important;
+              padding-right: 0 !important;
+            }
+
             .roadmap-hero-section {
-              width: calc(100% - 24px); /* tighter 12px gutter so the band reads edge-to-edge on phones */
+              width: calc(100% - 32px) !important;
+              max-width: calc(100% - 32px) !important;
               padding: 52px 16px 44px;
-              border-radius: 22px;
+              border-radius: 22px !important;
             }
             .vision-main-subtitle { margin-bottom: 40px !important; }
 

src/components/sections/MileTruthHero.tsx

@@ -44,6 +44,7 @@ export default function MileTruthHero() {
 
   return (
     <>
+      <link rel="preload" as="image" href="/images/miletruth-bg.webp" />
       <style dangerouslySetInnerHTML={{ __html: `
         /* ── Hero wrapper: column layout, zero gap between hero + stats ── */
         .miletruth-hero .elementor-element-86f3204 {
@@ -56,7 +57,7 @@ export default function MileTruthHero() {
 
         /* ── Hero slider card ── */
         .miletruth-hero-container {
-          background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.3) 100%), url('/images/miletruth-bg.png') !important;
+          background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.3) 100%), url('/images/miletruth-bg.webp') !important;
           background-size: cover !important;
           background-position: center !important;
           background-repeat: no-repeat !important;
@@ -68,7 +69,7 @@ export default function MileTruthHero() {
           justify-content: center;
           border-radius: 25px 25px 0 0;
           margin-top: 20px;
-          padding: 100px 40px;
+          padding: 100px 0;
         }
         .miletruth-hero-container::before {
           display: none !important;
@@ -77,7 +78,7 @@ export default function MileTruthHero() {
           position: relative;
           z-index: 2;
           width: 100%;
-          padding: 0 40px !important;
+          padding: 0 !important;
           box-sizing: border-box;
         }
         .miletruth-hero .content-slider-item-heading,
@@ -113,7 +114,7 @@ export default function MileTruthHero() {
           text-align: center !important;
           width: 100% !important;
           height: 100% !important;
-          padding: 0 40px !important;
+          padding: 0 15px !important;
           box-sizing: border-box !important;
         }
         .miletruth-hero .slide-content,
@@ -257,9 +258,12 @@ export default function MileTruthHero() {
           }
         }
         @media (max-width: 1024px) {
+          .miletruth-hero .elementor-element-86f3204 {
+            padding: 0 10px !important;
+          }
           .miletruth-hero-container {
             min-height: 600px;
-            padding: 120px 0;
+            padding: 80px 0 !important;
           }
           .miletruth-hero .elementor-element-8e5c81e {
             padding: 40px 0 !important;
@@ -287,19 +291,19 @@ export default function MileTruthHero() {
         @media (max-width: 580px) {
           .miletruth-hero-container {
             min-height: 500px;
-            padding: 100px 0;
+            padding: 60px 0 !important;
           }
           .miletruth-hero .elementor-element-86f3204 {
-            padding: 0 12px;
+            padding: 0 10px !important;
           }
           /* 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;
+            padding: 0 !important;
           }
           .miletruth-hero .slide-content {
-            padding: 0 !important;
+            padding: 0 15px !important;
           }
           .miletruth-hero .elementor-element-8e5c81e {
             padding: 30px 0 !important;

src/components/sections/OurTeam.tsx

@@ -6,28 +6,28 @@ export default function OurTeam() {
     {
       name: "Ratan Kumar",
       position: "COO & Operational Specialist",
-      image: "/images/Investor.png",
+      image: "/images/Investor.webp",
     },
    
     {
       name: "Parthiban",
       position: "CGO & Growth Specialist",
-      image: "/images/Parthi.png",
+      image: "/images/Parthi.webp",
     },
     {
       name: "Aravinth",
       position: "CFO & Finance Specialist",
-      image: "/images/Aravinth.png",
+      image: "/images/Aravinth.webp",
     },
      {
       name: "Fazul Ilahi",
       position: "CTO & Technology Specialist",
-      image: "/images/Fazul.png",
+      image: "/images/Fazul.webp",
     },
     {
       name: "Suriya Kumar",
       position: "Engineering Head & AI Specialist",
-      image: "/images/Suriya.png",
+      image: "/images/Suriya.webp",
     },
   ];
 
@@ -87,8 +87,35 @@ export default function OurTeam() {
       @media (max-width: 800px) {
         .team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 50%; }
       }
+      @media (max-width: 767px) {
+        .elementor-86 .elementor-element-c2c601a > .e-con-inner {
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+          padding-top: 32px !important;
+          padding-bottom: 32px !important;
+        }
+        .elementor-86 .elementor-element-c46350e > .elementor-widget-container {
+          margin-top: 24px !important;
+          margin-bottom: 24px !important;
+        }
+        .team-listing-wrapper.team-grid-listing {
+          margin: 0 0 -28px;
+        }
+        .team-listing-wrapper.team-grid-listing .team-item-wrapper {
+          width: 100%;
+          padding: 0;
+          margin-bottom: 28px;
+        }
+      }
       @media (max-width: 480px) {
-        .team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 100%; }
+        .team-listing-wrapper.team-grid-listing {
+          margin: 0 0 -28px;
+        }
+        .team-listing-wrapper.team-grid-listing .team-item-wrapper {
+          width: 100%;
+          padding: 0;
+          margin-bottom: 28px;
+        }
       }
  
       /* Card: photo on top, name/position at the bottom (down to image). */
@@ -122,6 +149,10 @@ export default function OurTeam() {
         width: 100%;
         margin: 0;
       }
+      .team-listing-wrapper.team-grid-listing .team-item .post-title .team-member-name {
+        color: inherit;
+        text-decoration: none;
+      }
     `}} />
     <div className="elementor-element elementor-element-c2c601a e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="c2c601a" data-element_type="container" data-e-type="container">
       <div className="e-con-inner">
@@ -149,19 +180,17 @@ export default function OurTeam() {
                         <div className="team-item">
                           <div className="team-item-media">
                             <div className="post-media">
-                              <a href="#">
-                                <Image 
-                                  src={member.image} 
-                                  alt={member.name} 
-                                  width={300}
-                                  height={360}
-                                  style={{ objectFit: "cover", width: "100%", height: "100%" }}
-                                />
-                              </a>
+                              <Image
+                                src={member.image}
+                                alt={member.name}
+                                width={300}
+                                height={360}
+                                style={{ objectFit: "cover", width: "100%", height: "100%" }}
+                              />
                             </div>
                           </div>
                           <div className="team-item-content">
-                            <div className="post-title"><a href="#">{member.name}</a></div>
+                            <div className="post-title"><span className="team-member-name">{member.name}</span></div>
                             <div className="team-item-position" dangerouslySetInnerHTML={{ __html: member.position }}></div>
                             <div className="team-item-socials">
                               <ul className="team-socials wrapper-socials">

src/components/sections/SingleBlog.tsx

@@ -38,7 +38,7 @@ function ContentRenderer({ block }: { block: ContentBlock }) {
       return (
         <blockquote className="dm-article-quote">
           <p>{block.text}</p>
-          {block.cite && <cite>— {block.cite}</cite>}
+          {block.cite && <cite>{block.cite}</cite>}
         </blockquote>
       );
     case "image":
@@ -74,6 +74,7 @@ export default function SingleBlog({ post }: { post: BlogPost }) {
 
   return (
     <article className="dm-single-blog">
+      <link rel="preload" as="image" href={post.image} />
       <style dangerouslySetInnerHTML={{ __html: STYLES }} />
 
       {/* ── Full-width page banner (image + badge + title only) ──────── */}
@@ -168,7 +169,7 @@ const STYLES = `
     font-family: var(--font-manrope), sans-serif;
   }
 
-  /* Heading normalization — beat the global theme's .elementor-kit-5 h1–h6
+  /* Heading normalization. Beat the global theme's .elementor-kit-5 h1-h6
      (120/80/60px UPPERCASE) rules with !important on our own classes. */
   .dm-single-blog :where(h1, h2, h3, h4, h5, h6) {
     font-family: var(--font-manrope), sans-serif !important;
@@ -180,7 +181,7 @@ const STYLES = `
      specificity 0-1-1) so blog links keep our colors and never get underlined. */
   .dm-single-blog a { text-decoration: none !important; }
 
-  /* ── Page banner — tall (homepage-scale); only badge + title inside ── */
+  /* Page banner: tall homepage-scale frame with only badge + title inside */
   /* Compound selector (specificity 20) + !important beats the global 800px
      single-class height rules so the blog banner can use viewport heights. */
   .custom-standard-hero-card.dm-banner-card {
@@ -216,7 +217,7 @@ const STYLES = `
   @media (max-width: 1024px) { .dm-banner-title { font-size: clamp(32px, 6vw, 48px) !important; max-width: 90%; } }
   @media (max-width: 600px)  { .dm-banner-title { font-size: clamp(28px, 8vw, 38px) !important; max-width: 90%; } }
 
-  /* ── Content wrap — begins immediately below the banner ── */
+  /* Content wrap begins immediately below the banner */
   /* Shared content container: the SAME max-width + horizontal padding is used
      by BlogPostFooter (.dm-blog-footer-inner) so the article body, headings,
      images, Prev/Next, Related Articles and the CTA banner all align to one
@@ -226,6 +227,12 @@ const STYLES = `
     /* 20px mobile padding floor → 40px on desktop; matches the footer container. */
     padding: clamp(14px, 2vw, 26px) clamp(20px, 4vw, 40px) 0;
   }
+  @media (max-width: 767px) {
+    .dm-blog-wrap {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+  }
 
   /* ── Article meta bar (directly under the hero) ── */
   .dm-meta-bar {
@@ -287,7 +294,7 @@ const STYLES = `
   }
   /* Each article block is wrapped in its OWN ScrollReveal <div>, so a bare
      :first-child rule matched every heading (each is the only child of its
-     wrapper) and zeroed its top margin — collapsing the gap above every
+     wrapper) and zeroed its top margin, collapsing the gap above every
      section heading. Scope the reset to only the article body's first block. */
   .dm-article-body > :first-child :where(.dm-article-h2, .dm-article-h3),
   .dm-article-body > .dm-article-h2:first-child,

src/components/sections/SolutionsHero.tsx

@@ -19,17 +19,18 @@ export default function SolutionsHero() {
 
   return (
     <>
+      <link rel="preload" as="image" href="/images/home1-slide-1.webp" />
       <style dangerouslySetInnerHTML={{ __html: `
         .howits-hero-custom-bg.elementor-repeater-item-3264830,
         .howits-hero-custom-bg.elementor-repeater-item-6867061 {
-            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-1.png') !important;
+            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-1.webp') !important;
             background-position: center !important;
             background-repeat: no-repeat !important;
             background-size: cover !important;
         }
 
         .howits-hero-custom-bg.elementor-repeater-item-6867061 {
-            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-2.png') !important;
+            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-2.webp') !important;
             background-position: center !important;
             background-repeat: no-repeat !important;
             background-size: cover !important;
@@ -44,7 +45,7 @@ export default function SolutionsHero() {
             text-align: center !important;
             width: 100% !important;
             height: 100% !important;
-            padding: 0 40px !important;
+            padding: 0 !important;
             box-sizing: border-box !important;
         }
 
@@ -70,6 +71,8 @@ export default function SolutionsHero() {
             width: 100% !important;
             margin-left: auto !important;
             margin-right: auto !important;
+            padding-left: 15px !important;
+            padding-right: 15px !important;
         }
 
         .elementor-element.elementor-element-6c7cbcb .content-slider-item-text {
@@ -83,6 +86,8 @@ export default function SolutionsHero() {
             text-align: center !important;
             max-width: 820px !important;
             margin: 0 auto !important;
+            padding-left: 15px !important;
+            padding-right: 15px !important;
         }
 
         /* Larger, more readable hero subtitle on large/4K screens */
@@ -106,10 +111,13 @@ export default function SolutionsHero() {
 
         @media (max-width: 1024px) {
             .elementor-element.elementor-element-741f56c {
-                width: calc(100% - 40px) !important;
-                max-width: none !important;
+                width: 100% !important;
+                max-width: 100% !important;
                 margin-left: auto !important;
                 margin-right: auto !important;
+                --padding-top: 0px !important;
+                --padding-block-start: 0px !important;
+                padding: 0 10px 10px 10px !important;
                 overflow: hidden !important;
                 border-radius: 25px !important;
             }
@@ -131,15 +139,19 @@ export default function SolutionsHero() {
             .elementor-element.elementor-element-6c7cbcb .slide-content {
                 width: 100% !important;
                 min-height: 620px !important;
-                padding-left: 48px !important;
-                padding-right: 48px !important;
+                padding-left: 0 !important;
+                padding-right: 0 !important;
                 box-sizing: border-box !important;
             }
         }
 
         @media (max-width: 767px) {
             .elementor-element.elementor-element-741f56c {
-                width: calc(100% - 24px) !important;
+                width: 100% !important;
+                max-width: 100% !important;
+                --padding-top: 0px !important;
+                --padding-block-start: 0px !important;
+                padding: 0 10px 10px 10px !important;
                 border-radius: 22px !important;
             }
 
@@ -155,8 +167,8 @@ export default function SolutionsHero() {
 
             .elementor-element.elementor-element-6c7cbcb .slide-content {
                 min-height: 560px !important;
-                padding-left: 22px !important;
-                padding-right: 22px !important;
+                padding-left: 0 !important;
+                padding-right: 0 !important;
             }
 
             .elementor-element.elementor-element-6c7cbcb .content-slider-item-heading {
@@ -164,6 +176,8 @@ export default function SolutionsHero() {
                 font-size: clamp(38px, 11vw, 48px) !important;
                 line-height: 1.05 !important;
                 overflow-wrap: break-word !important;
+                padding-left: 15px !important;
+                padding-right: 15px !important;
             }
 
             /* Pin the slide counter ("01/02") cleanly bottom-RIGHT — matching the

src/components/sections/WhyChooseDoormile.tsx

@@ -19,7 +19,7 @@ type Stage = {
 
 const STAGES: Stage[] = [
   {
-    img: "/images/first-mile-approach.jpg",
+    img: "/images/first-mile-approach.webp",
     label: "Stage 01",
     title: "First Mile Warehouse",
     subtitle: "Consolidation & Prep",
@@ -31,7 +31,7 @@ const STAGES: Stage[] = [
     ]
   },
   {
-    img: "/images/mid-mile-approach.jpg",
+    img: "/images/mid-mile-approach.webp",
     label: "Stage 02",
     title: "Mid Mile Transit",
     subtitle: "Hub-to-Hub Transport",
@@ -43,7 +43,7 @@ const STAGES: Stage[] = [
     ]
   },
   {
-    img: "/images/last-mile-approach.jpg",
+    img: "/images/last-mile-approach.webp",
     label: "Stage 03",
     title: "Last Mile Delivery",
     subtitle: "Hub to Doorstep",
@@ -315,15 +315,15 @@ export default function WhyChooseDoormile() {
         }
 
          @media (max-width: 1020px) {
-          .wcd-section { margin: 0 15px 15px 15px; padding: 40px 0 80px; }
-          .wcd-inner { padding: 0 30px; }
+          .wcd-section { margin: 0 10px 10px 10px; padding: 40px 0 80px; }
+          .wcd-inner { padding: 0; }
           .wcd-grid { grid-template-columns: 1fr; gap: 24px; }
           .wcd-card-body { padding: 32px; }
           .logico-front-end .wcd-section h3.wcd-card-title { font-size: 24px; }
         }
         @media (max-width: 480px) {
-          .wcd-section { margin: 0 12px 12px 12px; border-radius: 0 0 20px 20px; padding: 30px 0 64px; }
-          .wcd-inner { padding: 0 20px; }
+          .wcd-section { margin: 0 10px 10px 10px; border-radius: 0 0 20px 20px; padding: 30px 0 64px; }
+          .wcd-inner { padding: 0; }
           .wcd-card-body { padding: 24px; }
         }
       `}} />

src/components/sections/WomenSection.tsx

@@ -12,7 +12,7 @@ const WS_STATS = [
 const WS_CARDS = [
   {
     title: "Women Leadership",
-    desc: "Women driving decisions across operations, routing, and last-mile delivery every day.",
+    desc: "Women shaping strategy and driving excellence across logistics operations.",
     icon: (
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
         <circle cx="12" cy="9" r="5" />
@@ -22,7 +22,7 @@ const WS_CARDS = [
   },
   {
     title: "Entrepreneurship",
-    desc: "Enabling women to build, own, and scale their own delivery businesses.",
+    desc: "Women building sustainable businesses within the logistics ecosystem.",
     icon: (
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
         <rect x="3" y="7" width="18" height="13" rx="2" />
@@ -32,7 +32,7 @@ const WS_CARDS = [
   },
   {
     title: "Innovation",
-    desc: "Fresh thinking that reshapes how first and last-mile logistics actually work.",
+    desc: "Women advancing logistics through practical ideas and operational insight.",
     icon: (
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
         <path d="M9 18h6M10 21h4" />
@@ -42,7 +42,7 @@ const WS_CARDS = [
   },
   {
     title: "Community Growth",
-    desc: "Local hiring and training that lifts entire neighbourhoods, not just routes.",
+    desc: "Creating local opportunities through training, employment, and empowerment.",
     icon: (
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
         <circle cx="9" cy="8" r="3" />
@@ -117,14 +117,18 @@ export default function WomenSection() {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 14px;
+            align-items: stretch;
         }
         #ws-stories .ws__card {
             position: relative;
             overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            min-height: 168px;
             background: rgba(255,255,255,0.035);
             border: 1px solid rgba(255,255,255,0.08);
-            border-radius: 16px;
-            padding: 22px 20px;
+            border-radius: 14px;
+            padding: 20px;
             transition: transform 0.35s cubic-bezier(.25,1,.5,1), border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
         }
         #ws-stories .ws__card::after {
@@ -148,31 +152,66 @@ export default function WomenSection() {
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            width: 44px; height: 44px;
-            border-radius: 12px;
+            width: 40px; height: 40px;
+            border-radius: 11px;
             background: rgba(220,38,38,0.12);
             border: 1px solid rgba(220,38,38,0.25);
             color: #ef4444;
-            margin-bottom: 14px;
+            margin-bottom: 16px;
             transition: background-color 0.3s ease, color 0.3s ease;
         }
         #ws-stories .ws__card:hover .ws__card-icon { background: #dc2626; color: #fff; }
-        #ws-stories .ws__card-icon svg { width: 22px; height: 22px; }
+        #ws-stories .ws__card-icon svg { width: 21px; height: 21px; }
         #ws-stories .ws__card-title {
             color: #fff !important;
-            font-weight: 900;
-            font-size: 17px;
-            letter-spacing: -0.01em;
-            margin-bottom: 8px;
+            font-weight: 800;
+            font-size: 19px;
+            line-height: 1.2;
+            letter-spacing: 0;
+            margin-bottom: 9px;
         }
         #ws-stories .ws__card-desc {
-            color: rgba(255,255,255,0.6) !important;
-            font-size: 13.5px;
-            line-height: 1.6;
+            max-width: 28ch;
+            color: rgba(255,255,255,0.66) !important;
+            font-size: 15px;
+            line-height: 1.52;
             margin: 0;
-            font-weight: 900;
-            font-size: 16px;
-            
+            font-weight: 500;
+        }
+
+        /* ---- Floating card sizing: content-driven, not container-driven ----
+           Matches the EV Logistics card height proportions exactly by trimming
+           red content padding and white footer min-height. */
+        .elementor-element.elementor-element-3b61435 {
+            --padding-top: 46px;
+            --padding-bottom: 38px;
+        }
+        .elementor-element.elementor-element-5aea22e {
+            --min-height: 38px;
+            --padding-top: 14px;
+            --padding-bottom: 14px;
+        }
+        @media (max-width: 1020px) {
+            .elementor-element.elementor-element-3b61435 {
+                --padding-top: 34px;
+                --padding-bottom: 28px;
+            }
+            .elementor-element.elementor-element-5aea22e {
+                --min-height: 32px;
+                --padding-top: 12px;
+                --padding-bottom: 12px;
+            }
+        }
+        @media (max-width: 660px) {
+            .elementor-element.elementor-element-3b61435 {
+                --padding-top: 26px;
+                --padding-bottom: 22px;
+            }
+            .elementor-element.elementor-element-5aea22e {
+                --min-height: 24px;
+                --padding-top: 10px;
+                --padding-bottom: 10px;
+            }
         }
 
         .elementor-element-778840d .logico-title {
@@ -188,9 +227,9 @@ export default function WomenSection() {
                 background-position: 78% center !important;
             }
         }
-        @media (max-width: 600px) {
+        @media (max-width: 767px) {
             .elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
-                background-position: 82% center !important;
+                background-position: 82% 25% !important;
             }
         }
 
@@ -220,7 +259,108 @@ export default function WomenSection() {
                 margin-right: 0 !important;
             }
         }
-        @media (max-width: 600px) {
+
+        @media (max-width: 767px) {
+            #women-entrepreneurship {
+                width: calc(100% - 20px) !important;
+                margin-left: 10px !important;
+                margin-right: 10px !important;
+                border-radius: 22px !important;
+                padding-left: 0px !important;
+                padding-right: 0px !important;
+            }
+            #women-entrepreneurship .e-con-boxed > .e-con-inner {
+                padding-top: 32px !important;
+                padding-bottom: 32px !important;
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+            }
+            #women-entrepreneurship .elementor-element-8b5d6e6,
+            #women-entrepreneurship .elementor-element-b6e14bd,
+            #women-entrepreneurship .elementor-element-90cc867,
+            #women-entrepreneurship .elementor-element-36efec7,
+            #women-entrepreneurship .elementor-element-b2c956f {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+                margin-left: 0 !important;
+                margin-right: 0 !important;
+            }
+            #women-entrepreneurship .elementor-element-1f766ea {
+                width: 100% !important;
+                max-width: 100% !important;
+                margin-left: auto !important;
+                margin-right: auto !important;
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+            }
+            #women-entrepreneurship .elementor-element.elementor-element-2ed47f3 {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+                margin-left: 0 !important;
+                margin-right: 0 !important;
+                margin-top: 0 !important;
+                padding-top: 0 !important;
+                gap: 24px !important;
+            }
+            #women-entrepreneurship .elementor-element-36efec7 {
+                margin-top: 0px !important;
+                padding-top: 0px !important;
+                gap: 0px !important;
+            }
+            #women-entrepreneurship .elementor-element-24c0280 {
+                margin-bottom: 0px !important;
+                padding-left: 14px !important;
+                padding-right: 14px !important;
+                box-sizing: border-box !important;
+            }
+            #women-entrepreneurship .elementor-element-778840d {
+                margin-top: 14px !important;
+                margin-bottom: 14px !important;
+                padding-top: 0px !important;
+                padding-bottom: 0px !important;
+                padding-left: 14px !important;
+                padding-right: 14px !important;
+                box-sizing: border-box !important;
+            }
+            #women-entrepreneurship .elementor-element-778840d h3.logico-title,
+            #women-entrepreneurship .elementor-element-778840d > .elementor-widget-container {
+                margin: 0px !important;
+                padding: 0px !important;
+            }
+            #women-entrepreneurship .elementor-element-7da6646 {
+                width: calc(100% - 28px) !important;
+                margin-left: 14px !important;
+                margin-right: 14px !important;
+                border-radius: 18px !important;
+                min-height: 240px !important;
+                margin-top: 15px !important;
+                margin-bottom: -50px !important;
+                box-sizing: border-box !important;
+            }
+            #women-entrepreneurship .elementor-element-8b5d6e6 {
+                padding-left: 14px !important;
+                padding-right: 14px !important;
+                margin-left: 0px !important;
+                margin-right: 0px !important;
+                width: 100% !important;
+                max-width: 100% !important;
+                box-sizing: border-box !important;
+            }
+            #women-entrepreneurship .elementor-element-bbfb67f img {
+                width: 100% !important;
+            }
+            #women-entrepreneurship .elementor-element-bbfb67f {
+                margin-top: 0px !important;
+                margin-bottom: 16px !important;
+                padding-left: 14px !important;
+                padding-right: 14px !important;
+                box-sizing: border-box !important;
+            }
+            #ws-stories {
+                padding-left: 14px !important;
+                padding-right: 14px !important;
+                box-sizing: border-box !important;
+            }
             /* 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
@@ -231,7 +371,7 @@ export default function WomenSection() {
                 align-items: center;
                 justify-content: space-between;
                 gap: 16px;
-                padding: 20px 22px;
+                padding: 16px 20px;
                 min-width: 0;
             }
             #ws-stories .ws__stat-num { font-size: clamp(30px, 9vw, 40px); }
@@ -242,7 +382,7 @@ export default function WomenSection() {
                 text-align: right;
                 min-height: 0;
             }
-            #ws-stories .ws__cards { grid-template-columns: 1fr; }
+            #ws-stories .ws__cards { grid-template-columns: 1fr; gap: 12px; }
         }
       `}} />
 
@@ -262,7 +402,7 @@ export default function WomenSection() {
       </div>
 
       <div 
-        style={{ backgroundImage: "url(/images/bg-header-women.png)" }} 
+        style={{ backgroundImage: "url(/images/bg-header-women.webp)" }} 
         className="elementor-element elementor-element-7da6646 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" 
         data-id="7da6646" 
         data-element_type="container" 
@@ -284,7 +424,7 @@ export default function WomenSection() {
             </div>
             <div className="elementor-element elementor-element-0d307dd elementor-widget elementor-widget-text-editor" data-id="0d307dd" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
               <div className="elementor-widget-container">
-                <p>Doormile empowers women in last-mile delivery.</p>
+                <p>Doormile empowers women to lead the future of logistics.</p>
               </div>
             </div>
           </div>
@@ -331,7 +471,7 @@ export default function WomenSection() {
                 <div className="elementor-element elementor-element-bbfb67f elementor-widget elementor-widget-image" data-id="bbfb67f" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
                   <div className="elementor-widget-container">
                     <Image 
-                      src="/images/bg-map-women.png" 
+                      src="/images/bg-map-women.webp" 
                       alt="Women Map" 
                       width={626} 
                       height={692} 

src/components/sections/Workflow1.tsx

@@ -89,7 +89,7 @@ export default function Workflow1() {
       ariaLabel="Workflow 1 — Performance"
       gapTop
       gapBottom
-      bannerImage="/images/mile-1.png"
+      bannerImage="/images/mile-1.webp"
       cardTitle="OPTIMIZE EVERY MILE"
       cardSubtitle="Cut travel distance, reduce operating cost, and improve fleet productivity across every route."
       eyebrow="/ Performance /"

src/components/sections/Workflow2.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import EVSection, { EVStat, EVBadge, EVFeature, EVCardsTheme } from "./EVSection";
-import WorkflowScene from "./WorkflowScene";
 
 /* Red / Crimson — matches the Routing Engine (logistics brain) scene. */
 const THEME: EVCardsTheme = {
@@ -90,18 +89,14 @@ export default function Workflow2() {
     <EVSection
       ariaLabel="Workflow 2 — Innovation"
       gapBottom
-      bannerImage="/images/mid-mile-approach.jpg"
+      bannerImage="/images/mid-mile-approach.webp"
       cardTitle="CHOOSE THE BEST PLAN"
       cardSubtitle="Analyze thousands of route possibilities and automatically select the most efficient delivery strategy."
       eyebrow="/ Innovation /"
       titleLead="MANY STRATEGIES. "
       titleAccent="ONE BEST PLAN."
-      mediaSlot={
-        <WorkflowScene
-          variant="logistics"
-          ariaLabel="Live multi-route logistics brain"
-        />
-      }
+      image="/videos/workflow-2-routing.mp4"
+      imageAlt="AI route-planning engine selecting the best delivery plan"
       metrics={METRICS}
       features={FEATURES}
       cardsHeading="AI Decision Engine"

src/components/strategy/StrategyCanvas.tsx

@@ -2,7 +2,7 @@
 
 import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";
 import { Canvas, useFrame, useThree } from "@react-three/fiber";
-import { RoundedBox, Line, Sparkles, Html, useGLTF, ContactShadows, Environment, Lightformer, Preload } from "@react-three/drei";
+import { RoundedBox, Line, Sparkles, Html, useGLTF, useProgress, ContactShadows, Environment, Lightformer, Preload } from "@react-three/drei";
 import { EffectComposer, Bloom } from "@react-three/postprocessing";
 import { KernelSize } from "postprocessing";
 import * as THREE from "three";
@@ -14,6 +14,8 @@ type Props = {
   isMobile?: boolean;
   active?: boolean;
   stage?: number;
+  ready?: boolean;
+  onReady?: () => void;
 };
 
 const BG = "#eef1f6";
@@ -127,6 +129,7 @@ function useLabelFade(i: number, progress: React.RefObject<number>, awake: boole
     // at the stage boundary where `focused` flips and the labels unmount, so the
     // mount/unmount is never visible (labels are already at 0 opacity by then).
     const op = THREE.MathUtils.clamp(1 - (Math.abs(idx - i) - 0.2) / 0.3, 0, 1);
+    // eslint-disable-next-line react-hooks/immutability
     for (const el of labels.current) el.style.opacity = String(op);
   });
   return register;
@@ -785,7 +788,85 @@ function Floor() {
   );
 }
 
-function Scene({ progress, reduced, isMobile, stage, active, perf }: { progress: React.RefObject<number>; reduced: boolean; isMobile: boolean; stage: number; active: boolean; perf: boolean }) {
+function SceneReadySignal({ onReady }: { onReady?: () => void }) {
+  const { active, progress, errors = [] } = useProgress();
+  const gl = useThree((s) => s.gl);
+  const scene = useThree((s) => s.scene);
+  const camera = useThree((s) => s.camera);
+  const fired = useRef(false);
+  const compiling = useRef(false);
+  const compiled = useRef(false);
+  const meaningfulFrames = useRef(0);
+  const totalFramesAfterCompile = useRef(0);
+
+  // Track mount time to implement a fallback inside the hook
+  const mountTime = useRef(0);
+  const [bypassLoading, setBypassLoading] = useState(false);
+
+  useEffect(() => {
+    mountTime.current = performance.now();
+    const checkTimeout = setInterval(() => {
+      // If 3 seconds pass and we're still not fired, bypass loading and compile
+      if (performance.now() - mountTime.current > 3000) {
+        setBypassLoading(true);
+        clearInterval(checkTimeout);
+      }
+    }, 200);
+    return () => clearInterval(checkTimeout);
+  }, []);
+
+  const isLoaded = (!active && progress >= 100) || (errors && errors.length > 0);
+  const isReadyToCompile = isLoaded || bypassLoading;
+
+  useEffect(() => {
+    if (fired.current || compiling.current || compiled.current || !isReadyToCompile) return;
+
+    compiling.current = true;
+    const renderer = gl as THREE.WebGLRenderer & {
+      compileAsync?: (scene: THREE.Scene, camera: THREE.Camera) => Promise<void>;
+    };
+
+    try {
+      const hasParallelExtension =
+        typeof renderer.getContext === "function" &&
+        !!renderer.getContext()?.getExtension?.("KHR_parallel_shader_compile");
+
+      const compile = (typeof renderer.compileAsync === "function" && hasParallelExtension)
+        ? renderer.compileAsync(scene, camera)
+        : Promise.resolve().then(() => renderer.compile(scene, camera));
+
+      compile
+        .catch((err) => {
+          console.warn("StrategyCanvas compileAsync rejected:", err);
+        })
+        .finally(() => {
+          compiled.current = true;
+        });
+    } catch (e) {
+      console.warn("StrategyCanvas compile sync error:", e);
+      compiled.current = true;
+    }
+  }, [isReadyToCompile, camera, gl, scene]);
+
+  useFrame(() => {
+    if (fired.current || !compiled.current) return;
+
+    totalFramesAfterCompile.current++;
+
+    const renderInfo = gl.info.render;
+    const hasMeaningfulScene = renderInfo.calls >= 12 && renderInfo.triangles >= 500;
+    meaningfulFrames.current = hasMeaningfulScene ? meaningfulFrames.current + 1 : 0;
+
+    if (meaningfulFrames.current >= 4 || totalFramesAfterCompile.current >= 30 || bypassLoading) {
+      fired.current = true;
+      requestAnimationFrame(() => onReady?.());
+    }
+  });
+
+  return null;
+}
+
+function Scene({ progress, reduced, isMobile, stage, active, perf, onReady }: { progress: React.RefObject<number>; reduced: boolean; isMobile: boolean; stage: number; active: boolean; perf: boolean; onReady?: () => void }) {
   // Districts stay MOUNTED for the whole scroll (GLB cloned once, shaders compiled
   // once → no remount hitch, no blank frames). `near` only toggles per-district
   // visibility + per-frame work + <Html> mounting, so off-screen districts render
@@ -798,6 +879,7 @@ function Scene({ progress, reduced, isMobile, stage, active, perf }: { progress:
   // page load / while WF3 is still below the fold — without re-allocating them
   // (and hitching) every time the user scrolls past and back.
   const [everActive, setEverActive] = useState(false);
+  // eslint-disable-next-line react-hooks/set-state-in-effect
   useEffect(() => { if (active) setEverActive(true); }, [active]);
   const heavyFx = everActive && !reduced && !isMobile;
   return (
@@ -844,12 +926,13 @@ function Scene({ progress, reduced, isMobile, stage, active, perf }: { progress:
       {/* Compile every material/texture upfront (districts are all mounted) so the
          first time a district becomes visible there's no shader-compile stall. */}
       <Preload all />
+      <SceneReadySignal onReady={onReady} />
       {perf && <PerfHud />}
     </>
   );
 }
 
-export default function StrategyCanvas({ progress, reduced = false, isMobile = false, active = true, stage = 0 }: Props) {
+export default function StrategyCanvas({ progress, reduced = false, isMobile = false, active = true, stage = 0, ready = false, onReady }: Props) {
   // Opt-in dev metrics overlay: append ?perf to the URL.
   const perf = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("perf");
   return (
@@ -857,9 +940,9 @@ export default function StrategyCanvas({ progress, reduced = false, isMobile = f
       dpr={[1, isMobile ? 1 : 1.25]}
       camera={{ position: [0, 4, 8.2], fov: 50, near: 0.1, far: 120 }}
       gl={{ antialias: false, powerPreference: "high-performance", alpha: false }}
-      frameloop={active ? "always" : "never"}
+      frameloop={active || !ready ? "always" : "never"}
     >
-      <Scene progress={progress} reduced={reduced} isMobile={isMobile} stage={stage} active={active} perf={perf} />
+      <Scene progress={progress} reduced={reduced} isMobile={isMobile} stage={stage} active={active} perf={perf} onReady={onReady} />
     </Canvas>
   );
 }

src/components/strategy/StrategySection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import dynamic from "next/dynamic";
 import { motion, useMotionValue, useTransform, type MotionValue } from "framer-motion";
 import gsap from "gsap";
@@ -83,6 +83,8 @@ export default function StrategySection({ connected = false }: { connected?: boo
   const [pinState, setPinState] = useState<"before" | "pinned" | "after">("before");
   const [active, setActive] = useState(0);
   const [mountScene, setMountScene] = useState(false);
+  const [sceneReady, setSceneReady] = useState(false);
+  const [showLoader, setShowLoader] = useState(true);
   const [sceneActive, setSceneActive] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
   const [reduced, setReduced] = useState(false);
@@ -147,6 +149,31 @@ export default function StrategySection({ connected = false }: { connected?: boo
     return () => { clearTimeout(refresh); st.kill(); };
   }, [scroll]);
 
+  // Top-level safety fallback: if canvas does not report ready within 4 seconds of mounting, force it.
+  useEffect(() => {
+    if (!mountScene) return;
+    const timer = setTimeout(() => {
+      setSceneReady((ready) => {
+        if (!ready) {
+          console.warn("StrategySection: Scene readiness fallback triggered.");
+          return true;
+        }
+        return ready;
+      });
+    }, 4000);
+    return () => clearTimeout(timer);
+  }, [mountScene]);
+
+  // Reliable loader cleanup: force showLoader(false) 300ms after sceneReady becomes true
+  useEffect(() => {
+    if (sceneReady) {
+      const timer = setTimeout(() => {
+        setShowLoader(false);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [sceneReady]);
+
   // Intro hint fades out as the journey begins.
   const introOpacity = useTransform(scroll, [0, 0.03, 0.06], [1, 1, 0]);
   // Persistent header fades in after the intro.
@@ -161,8 +188,28 @@ export default function StrategySection({ connected = false }: { connected?: boo
       <div className="dm-st-sticky">
         <div className="dm-st-card">
           {mountScene && (
-            <div className="dm-st-canvas">
-              <StrategyCanvas progress={progressRef} reduced={reduced} isMobile={isMobile} active={sceneActive && pinState === "pinned"} stage={active} />
+            <div className={`dm-st-canvas${sceneReady ? " is-ready" : ""}`} aria-hidden={!sceneReady}>
+              <StrategyCanvas
+                progress={progressRef}
+                reduced={reduced}
+                isMobile={isMobile}
+                active={sceneActive && pinState === "pinned"}
+                stage={active}
+                ready={sceneReady}
+                onReady={() => setSceneReady(true)}
+              />
+            </div>
+          )}
+
+          {showLoader && (
+            <div
+              className={`dm-st-loader${sceneReady ? " is-hiding" : ""}`}
+              role="status"
+              aria-live="polite"
+              aria-label="Loading MileTruth Strategy Engine"
+            >
+              <span className="dm-st-loader__ring" />
+              <span className="dm-st-loader__text">Loading strategy engine...</span>
             </div>
           )}
 
@@ -170,7 +217,7 @@ export default function StrategySection({ connected = false }: { connected?: boo
               can never be seen during the approach ("before"), where the sticky sits
               at the top of the tall section near the previous workflow's seam. */}
           {pinState !== "before" && (
-          <div className="dm-st-ui">
+          <div className={`dm-st-ui${sceneReady ? " is-ready" : ""}`} aria-hidden={!sceneReady}>
             {/* Persistent header */}
             <motion.div className="dm-st-top" style={{ opacity: headerOpacity }}>
               <div className="dm-st-eyebrow"><span className="dm-st-dot" /> MileTruth Strategy Engine</div>
@@ -285,11 +332,32 @@ const styles = `
   }
 }
 
-.dm-st-canvas { position: absolute; inset: 0; z-index: 1; }
+.dm-st-canvas { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden;
+  transition: opacity 0.25s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.25s; }
+.dm-st-canvas.is-ready { opacity: 1; visibility: visible; transition-delay: 0s; }
 .dm-st-canvas canvas { display: block; }
 
 .dm-st-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none;
-  font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; color: #0f172a; }
+  font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; color: #0f172a;
+  opacity: 0; visibility: hidden;
+  transition: opacity 0.25s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.25s; }
+.dm-st-ui.is-ready { opacity: 1; visibility: visible; transition-delay: 0s; }
+
+.dm-st-loader { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 6;
+  display: flex; align-items: center; gap: 8px;
+  background: rgba(15,23,42,0.85); border: 1px solid rgba(255,255,255,0.08);
+  padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+  opacity: 1; pointer-events: none;
+  animation: dmStLoaderFadeIn 0.2s ease both;
+  transition: opacity 0.25s ease; }
+.dm-st-loader.is-hiding { opacity: 0; pointer-events: none; }
+.dm-st-loader__ring { width: 14px; height: 14px; border-radius: 50%;
+  border: 2px solid rgba(255,255,255,0.2); border-top-color: #00E5FF;
+  animation: dm-hiw-spin 0.8s linear infinite; box-sizing: border-box; }
+.dm-st-loader__text { font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
+  color: #ffffff; font-size: 13.5px; font-weight: 500; opacity: 0.75; white-space: nowrap; }
+@keyframes dmStLoaderFadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes dm-hiw-spin { to { transform: rotate(360deg); } }
 
 /* ---- Persistent header: title + 5-stage rail ---- */
 .dm-st-top { position: absolute; top: clamp(96px, 13vh, 128px); left: 0; right: 0; z-index: 5;

src/data/blog.ts

@@ -1,9 +1,9 @@
 /**
- * Central blog data module — single source of truth for the listing page,
+ * Central blog data module: single source of truth for the listing page,
  * the /blog/[slug] route, the sidebar, related posts and prev/next nav.
  *
  * The site is a static export (next.config.ts → output: "export"), so all of
- * this is plain data resolved at build time. No CMS / no runtime fetching.
+ * this is plain data resolved at build time. No CMS, no runtime fetching.
  */
 
 export const SITE_URL = "https://www.doormile.com";
@@ -43,44 +43,44 @@ function templateContent(post: {
   return [
     {
       type: "paragraph",
-      text: `In last-mile logistics, the difference between a good day and a missed SLA is rarely a single dramatic failure — it is the quiet accumulation of small inefficiencies. ${post.title} looks at how Doormile turns those margins into measurable advantage, and why a precision-first approach consistently outperforms guesswork on the road.`,
+      text: `In last-mile logistics, a missed SLA is rarely caused by one big failure. It usually comes from small delays adding up across a route. ${post.title} looks at how delivery teams can spot those delays early and plan around them before vehicles leave the hub.`,
     },
     {
       type: "heading",
       level: 2,
-      text: "Why this matters for modern fleets",
+      text: "Why this matters for fleet teams",
     },
     {
       type: "paragraph",
-      text: "Every additional kilometre carries cost: fuel or charge, rider hours, vehicle wear, and the risk of a late delivery. When routing decisions are made on intuition or static rules, those costs compound across hundreds of stops. Treating the route as a solvable optimisation problem — not a best guess — is what separates scalable operations from ones that simply add more vehicles.",
+      text: "Every extra kilometre costs money. It uses fuel or charge, adds rider time, wears down vehicles, and increases the chance of a late delivery. When routes are built from fixed zones or old habits, those costs repeat every day.",
     },
     {
       type: "list",
       items: [
-        "Fewer vehicles deployed for the same delivery volume",
-        "Lower cost-per-drop through tighter, smarter sequencing",
-        "Predictable ETAs that protect customer trust and SLA targets",
-        "A cleaner, lower-emission footprint per parcel delivered",
+        "Fewer vehicles needed for the same number of drops",
+        "Lower cost per drop through better stop sequencing",
+        "ETAs that match traffic, distance, and delivery windows",
+        "Less fuel or charge used per completed order",
       ],
     },
     {
       type: "heading",
       level: 3,
-      text: "From data to decision",
+      text: "From orders to dispatch",
     },
     {
       type: "paragraph",
-      text: `Doormile's MileTruth™ engine ingests orders, constraints and live conditions, then evaluates the routing problem across parallel strategy universes before committing to a plan. The result is a dispatch decision grounded in mathematics rather than heuristics — validated before a single rider leaves the hub.`,
+      text: `A good dispatch plan starts with the basics: order locations, promised delivery windows, rider capacity, vehicle range, and known traffic trouble spots. MileTruth™ checks those inputs before dispatch so the team is not fixing avoidable mistakes on the road.`,
     },
     {
       type: "image",
       src: post.image,
       alt: post.title,
-      caption: `${post.category} — operational intelligence applied at the point of dispatch.`,
+      caption: `${post.category}: route planning decisions made before dispatch.`,
     },
     {
       type: "quote",
-      text: "We don't guess the route. We calculate it — and we prove it works before the wheels start turning.",
+      text: "A route should be checked before the rider leaves, not explained after the customer calls.",
       cite: "Doormile Operations",
     },
     {
@@ -90,26 +90,27 @@ function templateContent(post: {
     },
     {
       type: "paragraph",
-      text: "The teams that benefit most treat routing intelligence as core infrastructure, not an afterthought. Start by measuring your current cost-per-drop and SLA adherence, then let a precision engine reveal where distance, time and capacity are being lost. The gains are rarely theoretical — they show up directly in the next dispatch cycle.",
+      text: "The best improvements usually start with simple measurements. Track distance per route, failed delivery windows, rider idle time, and orders moved between vehicles after dispatch. Those numbers show where the operation is leaking time.",
     },
     {
       type: "list",
       ordered: true,
       items: [
-        "Benchmark today's distance, fleet size and on-time rate.",
-        "Feed real constraints — capacity, windows, charge — into the engine.",
-        "Validate routes against real-world conditions before dispatch.",
-        "Measure the delta, then scale the approach across hubs.",
+        "Benchmark today's distance, fleet size, and on-time rate.",
+        "Include vehicle capacity, delivery windows, rider shifts, and battery charge.",
+        "Check routes against traffic and customer commitments before dispatch.",
+        "Compare the next dispatch cycle against the old plan.",
       ],
     },
     {
       type: "paragraph",
-      text: "Smarter routing is not about working harder on the road — it is about making the right decision before the journey begins. That is the foundation every Doormile deployment is built on.",
+      text: "Better routing is not about pushing riders harder. It is about giving them a plan that already accounts for the real day ahead.",
     },
   ];
 }
 
 interface SeedPost {
+  slug: string;
   title: string;
   excerpt: string;
   category: string;
@@ -122,98 +123,100 @@ interface SeedPost {
 const seeds: SeedPost[] = [
   // ── Flagship 1 ───────────────────────────────────────────────────────────
   {
-    title: "How AI Is Transforming Last-Mile EV Delivery",
+    slug: "how-ai-is-transforming-last-mile-ev-delivery",
+    title: "How Better Planning Improves Last-Mile EV Delivery",
     excerpt:
-      "Machine learning and real-time data are reshaping how fleets plan, dispatch, and adapt — making every kilometre smarter than the last.",
+      "A practical look at how EV fleets can plan routes, manage charging, and keep delivery promises without adding unnecessary vehicles.",
     category: "Technology",
-    image: "/images/blog-post-pic-17.png",
+    image: "/images/blog-post-pic-17.webp",
     date: "2025-10-02",
     intro:
-      "The last mile has always been logistics' most expensive and least predictable stretch. Add electric vehicles to the mix and the problem sharpens: now every route must respect not just time and capacity, but battery range. Artificial intelligence is what turns that constraint into an advantage.",
+      "The last mile is already difficult to plan. With electric vehicles, the team also has to think about battery range, charging time, rider load, traffic, and delivery windows. Good planning turns those moving parts into a workable dispatch plan.",
     content: [
       {
         type: "paragraph",
-        text: "For decades, last-mile delivery was planned the way it was a generation ago — dispatchers, spreadsheets, and hard-won intuition. That approach scales poorly, and it breaks entirely when you electrify the fleet. EVs introduce a moving constraint that no static plan can absorb: a vehicle's remaining range changes with load, terrain, traffic and temperature, all at once.",
+        text: "For a long time, last-mile planning depended on dispatchers, spreadsheets, and local experience. That experience still matters. The problem is that it gets stretched thin when order volume rises and the fleet includes EVs.",
       },
       {
         type: "heading",
         level: 2,
-        text: "The shift from rules to learning",
+        text: "The shift from fixed rules to daily planning",
       },
       {
         type: "paragraph",
-        text: "Traditional routing tools rely on fixed rules: nearest-stop-first, fixed zones, manual overrides. They are fast to set up and brittle in practice. Machine-learning-driven systems instead learn from outcomes — every completed delivery, every delay, every charge cycle becomes training signal that sharpens the next decision.",
+        text: "A fixed-zone plan may look clean in the morning, but the road rarely follows the plan. A rider may get delayed near Hitec City, a gated community may hold a vehicle for ten extra minutes, or a battery may drain faster because the load is heavier than usual.",
       },
       {
         type: "list",
         items: [
-          "Demand forecasting that anticipates volume spikes before they hit the hub",
-          "Travel-time models trained on the city's real traffic, not generic averages",
-          "Battery-draw prediction tuned to each vehicle class and load profile",
-          "Continuous feedback that improves accuracy with every dispatch",
+          "Order volumes by area, time slot, and customer type",
+          "Travel times based on the city's actual traffic patterns",
+          "Battery use by vehicle type, rider load, and route length",
+          "Feedback from completed deliveries, failed attempts, and late arrivals",
         ],
       },
+      { type: "heading", level: 3, text: "Adjusting during the day" },
       {
-        type: "heading",
-        level: 3,
-        text: "Real-time adaptation",
+        type: "paragraph",
+        text: "The first plan is only the starting point. By 11 a.m., traffic may change, a high-priority order may arrive, or one vehicle may return with less charge than expected. The dispatch team needs a way to adjust without rebuilding the whole day by hand.",
       },
       {
         type: "paragraph",
-        text: "The real unlock is not planning — it is replanning. When a road closes, an order is added, or a vehicle's charge drops faster than expected, an AI-driven system re-optimises in milliseconds and reroutes the affected vehicles without a human in the loop. The plan stays optimal even as reality refuses to hold still.",
+        text: "During peak traffic hours in Hyderabad, some vehicles were arriving 20 to 30 minutes later than planned. By adjusting routes based on live traffic and battery levels, the hub reduced missed delivery windows and improved on-time performance.",
       },
       {
         type: "image",
-        src: "/images/ev-paradox.png",
+        src: "/images/ev-paradox.webp",
         alt: "Electric delivery vehicle routing visualisation",
         caption:
-          "AI continuously re-evaluates range, load and traffic to keep every EV route feasible.",
+          "EV route plans need to account for range, load, traffic, and charging time before riders leave the hub.",
       },
       {
         type: "quote",
-        text: "An electric fleet is only as good as the intelligence that routes it. The battery sets the limit — the algorithm decides whether you ever reach it.",
-        cite: "Doormile Engineering",
+        text: "With EVs, a route is only useful if the vehicle can finish it and still return safely.",
+        cite: "Doormile Operations",
       },
       {
         type: "heading",
         level: 2,
-        text: "What it means for operators",
+        text: "What this means for operators",
       },
       {
         type: "paragraph",
-        text: "For fleet operators, the payoff is concrete: fewer vehicles covering the same ground, near-zero range-related failures, and ETAs accurate enough to commit to. AI does not replace the operator — it removes the guesswork, so the operator can run a larger, cleaner, more reliable fleet with the same team.",
+        text: "For a fleet manager, this is not about fancy software. It is about fewer emergency calls, fewer mid-route swaps, and fewer customers asking why their delivery missed the promised window.",
       },
       {
         type: "list",
         ordered: true,
         items: [
-          "Capture real operational data — deliveries, delays, charge cycles.",
-          "Let models learn your city's actual travel and demand patterns.",
-          "Validate every route against live battery capacity before dispatch.",
-          "Re-optimise continuously as conditions change through the day.",
+          "Record delivery times, failed attempts, traffic delays, and charging cycles.",
+          "Build travel-time estimates from the areas your riders actually serve.",
+          "Check every route against battery capacity before dispatch.",
+          "Replan when traffic, orders, or vehicle availability changes.",
         ],
       },
       {
         type: "paragraph",
-        text: "The fleets pulling ahead are not the ones with the most vehicles — they are the ones with the smartest kilometre. That is the promise AI brings to last-mile EV delivery, and it is already on the road.",
+        text: "The fleets that improve fastest are usually not the ones adding vehicles first. They are the ones removing wasted distance, planning charging properly, and giving riders routes they can complete on time.",
       },
     ],
   },
 
   // ── Flagship 2 ───────────────────────────────────────────────────────────
   {
+    slug: "42-less-distance-insights-from-our-hyderabad-hub",
     title: "42% Less Distance: Insights from Our Hyderabad Hub",
     excerpt:
-      "A detailed look at how Doormile's MileTruth routing engine delivered measurable efficiency gains — fewer vehicles, less fuel, and zero SLA misses.",
+      "A practical look at how one Hyderabad hub reduced distance, used fewer vehicles, and protected delivery windows with better route planning.",
     category: "Case Study",
-    image: "/images/blog-post-pic-15.png",
+    image: "/images/blog-post-pic-15.webp",
     date: "2025-09-18",
     intro:
-      "Numbers settle arguments. When we deployed MileTruth™ at our Hyderabad hub, the goal was simple: prove that precision routing changes the economics of last-mile delivery. The result — a 42% reduction in total distance travelled — did exactly that.",
+      "Numbers settle arguments. At our Hyderabad hub, the goal was simple: reduce avoidable distance without missing customer commitments. The result was a 42% reduction in total distance travelled.",
     content: [
       {
         type: "paragraph",
-        text: "Hyderabad is a demanding test bed: dense urban cores, sprawling new suburbs, unpredictable traffic and tight delivery windows. If a routing approach works here, it works almost anywhere. We ran it side by side against the hub's existing manual-plus-rules dispatch process over a sustained period, holding order volume constant.",
+        text: "Hyderabad is not an easy city for delivery planning. Dense commercial areas, fast-growing suburbs, flyover work, narrow service lanes, apartment security checks, and sudden traffic build-up can all change the day.",
       },
       {
         type: "heading",
@@ -222,15 +225,19 @@ const seeds: SeedPost[] = [
       },
       {
         type: "paragraph",
-        text: "Before MileTruth, the hub planned routes the conventional way — zones drawn by experience, sequences set by dispatchers, adjustments made on the fly. It worked, but it left distance on the table every single day, and that distance translated directly into fuel, hours and vehicles.",
+        text: "Before MileTruth, the hub planned routes in the usual way. Zones were drawn from experience, dispatchers sequenced stops manually, and riders adjusted on the road when something changed.",
+      },
+      {
+        type: "paragraph",
+        text: "That process worked, but it carried hidden costs. Two riders might cross the same area in the same hour. A vehicle might take a longer loop to avoid one late stop. A dispatcher might hold back an order because the best vehicle was not obvious in the moment.",
       },
       {
         type: "list",
         items: [
-          "Zone-based allocation that ignored cross-zone efficiencies",
-          "Manual sequencing that couldn't evaluate every alternative",
-          "No pre-validation of ETAs against real travel times",
-          "Reactive rather than predictive handling of disruptions",
+          "Zone-based allocation that missed nearby cross-zone drops",
+          "Manual stop sequencing during busy dispatch windows",
+          "ETAs checked after routing instead of before dispatch",
+          "Traffic and delay handling that depended on phone calls from riders",
         ],
       },
       {
@@ -240,14 +247,18 @@ const seeds: SeedPost[] = [
       },
       {
         type: "paragraph",
-        text: "MileTruth treated the day's deliveries as one large optimisation problem rather than a set of independent zones. It evaluated routing strategies in parallel, selected the optimal plan against real constraints, and validated every ETA before dispatch. The same orders, the same city — a fundamentally tighter plan.",
+        text: "The main change was treating the day's orders as one connected plan instead of separate zone lists. The route plan considered distance, rider capacity, delivery windows, traffic, and vehicle availability together.",
+      },
+      {
+        type: "paragraph",
+        text: "During peak traffic hours in Hyderabad, some vehicles were arriving 20 to 30 minutes later than planned. By adjusting routes based on live traffic and battery levels, we reduced missed delivery windows and improved on-time performance.",
       },
       {
         type: "image",
-        src: "/images/last-mile-approach.jpg",
+        src: "/images/last-mile-approach.webp",
         alt: "Hyderabad delivery hub routing analysis",
         caption:
-          "Consolidating the day's deliveries into a single optimisation removed redundant cross-town travel.",
+          "Planning the day's deliveries together removed repeated cross-town travel.",
       },
       {
         type: "heading",
@@ -259,45 +270,46 @@ const seeds: SeedPost[] = [
         items: [
           "42% reduction in total distance travelled across the hub",
           "37% fewer vehicles required for the same delivery volume",
-          "Zero SLA misses across the measured deployment window",
-          "Proportional drop in fuel cost and per-parcel emissions",
+          "No SLA misses during the measured deployment window",
+          "Lower fuel use and fewer unnecessary kilometres per parcel",
         ],
       },
       {
         type: "quote",
-        text: "Fewer vehicles, less fuel, zero missed SLAs — and not by working the team harder. By making a better decision before the wheels turned.",
+        text: "The improvement did not come from asking riders to work harder. It came from giving the team a better route plan before the vehicles left.",
         cite: "Hyderabad Hub Operations",
       },
       {
         type: "heading",
         level: 3,
-        text: "Why it generalises",
+        text: "Why this applies beyond one hub",
       },
       {
         type: "paragraph",
-        text: "The Hyderabad gains were not a quirk of one city. The inefficiencies MileTruth removed — redundant travel, conservative sequencing, unvalidated ETAs — exist in nearly every manual operation. The engine simply makes them visible, then eliminates them. That is why the same approach now anchors deployments well beyond this hub.",
+        text: "The Hyderabad result was not a one-city exception. Most hubs deal with the same issues: overlapping routes, conservative sequencing, traffic surprises, charging constraints, and last-minute order changes.",
       },
       {
         type: "paragraph",
-        text: "A 42% cut in distance is not a rounding error — it is a structural change in what the operation costs to run. And it came from intelligence, not additional resources.",
+        text: "A 42% cut in distance changes the cost of running the operation. It also gives dispatchers more breathing room when the day gets messy.",
       },
     ],
   },
 
   // ── Flagship 3 ───────────────────────────────────────────────────────────
   {
-    title: "MileTruth™ AI — 10 Stages to Smarter Dispatch",
+    slug: "miletruth-ai-10-stages-to-smarter-dispatch",
+    title: "MileTruth™: 10 Stages to Smarter Dispatch",
     excerpt:
-      "From order ingestion to final route output in under 45ms — a technical walkthrough of the ten-stage pipeline at the heart of our routing engine.",
+      "From order intake to final route output, here is how a dispatch plan is checked before riders leave the hub.",
     category: "MileTruth",
-    image: "/images/blog-post-pic-31.png",
+    image: "/images/blog-post-pic-31.webp",
     date: "2025-09-05",
     intro:
-      "Behind every Doormile dispatch is a pipeline that turns raw orders into a validated, optimal route in under 45 milliseconds. This is how MileTruth™ does it — ten stages, each one removing a source of error before the next begins.",
+      "Behind every Doormile dispatch is a step-by-step route planning process. Each stage removes a common source of error before the plan reaches the rider.",
     content: [
       {
         type: "paragraph",
-        text: "Speed and correctness are usually a trade-off. MileTruth is engineered to deliver both: a routing decision fast enough to feel instant, yet rigorous enough to commit a fleet to. The secret is a staged pipeline where each step has a single responsibility and hands clean, validated data to the next.",
+        text: "A dispatch plan has to be fast, but it also has to be usable. A quick route that ignores a bad address, low battery, or tight delivery window creates problems later in the day.",
       },
       {
         type: "heading",
@@ -308,16 +320,16 @@ const seeds: SeedPost[] = [
         type: "list",
         ordered: true,
         items: [
-          "Ingestion — orders, constraints and fleet state are normalised on arrival.",
-          "Validation — addresses, time windows and capacities are checked and geocoded.",
-          "Demand modelling — volume and service-time estimates are attached to each stop.",
-          "Travel-time estimation — real-world, time-of-day travel matrices are built.",
-          "Constraint assembly — capacity, range, windows and rules are encoded.",
-          "Strategy generation — multiple routing universes are explored in parallel.",
-          "Optimisation — the solver searches for the minimum-cost feasible plan.",
-          "Battery / range validation — EV routes are checked against real charge capacity.",
-          "ETA pre-validation — promised times are verified before any commitment.",
-          "Output — the final, validated route is emitted to dispatch.",
+          "Order intake: new orders, rider availability, and vehicle status are collected.",
+          "Address check: delivery points, time windows, and service notes are verified.",
+          "Stop planning: each stop gets an expected service time and delivery priority.",
+          "Travel-time check: routes are compared against time-of-day traffic.",
+          "Constraint check: capacity, shift time, customer windows, and range are applied.",
+          "Route options: several possible plans are built for the same order set.",
+          "Plan selection: the lowest-cost workable route plan is selected.",
+          "Battery check: EV routes are checked against real charge capacity.",
+          "ETA check: promised delivery times are verified before dispatch.",
+          "Dispatch output: the final route is sent to the operations team.",
         ],
       },
       {
@@ -327,119 +339,116 @@ const seeds: SeedPost[] = [
       },
       {
         type: "paragraph",
-        text: "Collapsing these steps into one monolithic calculation is how most tools accumulate hidden errors. By isolating each concern, MileTruth catches a bad address before it reaches the solver, and an infeasible battery plan before it reaches a rider. Each stage is independently testable, observable and fast.",
+        text: "When everything is checked in one step, small errors slip through. A wrong pin, a missing apartment note, or a low battery warning can reach the rider and become a customer issue.",
       },
       {
         type: "image",
-        src: "/images/blog-post-pic-31.png",
+        src: "/images/blog-post-pic-31.webp",
         alt: "MileTruth routing pipeline diagram",
         caption:
-          "Ten focused stages turn raw orders into a validated route in well under 45 milliseconds.",
+          "A staged dispatch process catches address, range, and ETA issues before riders leave.",
       },
       {
         type: "quote",
-        text: "Each stage exists to delete a category of mistake. By the time a route reaches dispatch, the questionable decisions have already been ruled out.",
+        text: "Each stage should remove one kind of mistake. By dispatch time, the route should already be practical.",
         cite: "MileTruth Engineering",
       },
       {
         type: "heading",
         level: 2,
-        text: "Parallel strategy universes",
+        text: "Comparing route options",
       },
       {
         type: "paragraph",
-        text: "Stage six is where MileTruth diverges from conventional routers. Rather than committing to one heuristic, it generates several distinct routing strategies simultaneously — each a complete candidate plan — and lets the optimiser select the best. Powered by a mathematical solver, it evaluates trade-offs no dispatcher could hold in their head.",
+        text: "The useful part is not only building one route. It is comparing a few workable route options before choosing the plan. One option may save distance, another may protect a tight delivery window, and another may keep an EV closer to a charger.",
       },
       {
         type: "list",
         items: [
-          "Multiple candidate plans evaluated, not a single best guess",
-          "Mathematical optimisation instead of fixed heuristics",
-          "Range and ETA validated inside the loop, not bolted on after",
-          "Sub-45ms output that keeps dispatch genuinely real-time",
+          "Several route plans checked before dispatch",
+          "Distance, time windows, capacity, and range considered together",
+          "Range and ETA checked before the route reaches the rider",
+          "Fast output that still leaves room for dispatcher review",
         ],
       },
       {
         type: "paragraph",
-        text: "Ten stages, one outcome: a route you can trust enough to commit a fleet to — calculated, validated, and delivered before a dispatcher could finish reading the order list.",
+        text: "The goal is simple: give the dispatch team a route plan they can trust before the first vehicle leaves the hub.",
       },
     ],
   },
 
   // ── Template-backed posts ────────────────────────────────────────────────
   {
+    slug: "the-ev-paradox-solving-range-anxiety-for-urban-fleets",
     title: "The EV Paradox: Solving Range Anxiety for Urban Fleets",
     excerpt:
-      "Electric vehicles promise sustainability, but battery constraints introduce a new routing challenge. Here's how MileTruth™ AI solves it before dispatch.",
+      "Electric vehicles lower running costs, but battery range changes how routes must be planned before dispatch.",
     category: "EV Fleet",
-    image: "/images/ev-paradox.png",
+    image: "/images/ev-paradox.webp",
     date: "2025-08-21",
     intro:
-      "Electric fleets promise cleaner cities and lower running costs — but they trade one problem for another. Range becomes a hard constraint on every route, and range anxiety becomes an operational risk. Solving it before dispatch is the whole game.",
+      "Electric fleets can lower running costs, but range becomes a daily planning constraint. The route has to match the battery, the load, the traffic, and the return plan.",
   },
   {
+    slug: "why-mathematical-precision-beats-heuristics-in-routing",
     title: "Why Mathematical Precision Beats Heuristics in Routing",
     excerpt:
-      "Most routing tools guess. We calculate. Powered by Google OR-Tools, MileTruth evaluates six parallel strategy universes to select the optimal route every time.",
+      "Fixed routing rules are easy to start with, but they often miss better stop sequences as order volume grows.",
     category: "Technology",
-    image: "/images/blog-post-pic-14.jpeg",
+    image: "/images/blog-post-pic-14.webp",
     date: "2025-08-07",
     intro:
-      "Heuristics are fast to build and easy to trust — until they quietly cost you a vehicle a day. Mathematical optimisation asks more of the engine and gives more back: provably better routes, every dispatch, at scale.",
+      "Simple routing rules are fast to set up, but they can quietly add distance every day. Better planning compares more route options before dispatch.",
   },
   {
+    slug: "fleet-reduction-without-compromising-delivery-volume",
     title: "Fleet Reduction Without Compromising Delivery Volume",
     excerpt:
-      "Deploying 37% fewer vehicles while handling the same order volumes isn't a trade-off — it's the result of smarter routing intelligence applied at every dispatch.",
+      "Handling the same order volume with fewer vehicles starts by removing avoidable kilometres and overlapping routes.",
     category: "Fleet Management",
-    image: "/images/blog-post-pic-8.jpeg",
+    image: "/images/blog-post-pic-8.webp",
     date: "2025-07-24",
     intro:
-      "Cutting your fleet usually means cutting capacity — unless the kilometres you remove were never necessary in the first place. Smarter routing reclaims that wasted distance and turns it into headroom.",
+      "Cutting vehicles usually means cutting capacity unless the removed kilometres were never needed. Better route planning turns wasted distance into operating headroom.",
   },
   {
+    slug: "building-a-greener-city-the-future-of-urban-logistics",
     title: "Building a Greener City: The Future of Urban Logistics",
     excerpt:
-      "Cities are demanding cleaner delivery. We explore how AI-powered EV fleets and optimised routing create a path to zero-emission last-mile logistics at city scale.",
+      "Cities are asking for cleaner delivery. The practical challenge is planning EV routes that can meet customer windows without wasting charge.",
     category: "Sustainability",
-    image: "/images/blog-post-pic-6.jpeg",
+    image: "/images/blog-post-pic-6.webp",
     date: "2025-07-10",
     intro:
-      "Zero-emission delivery is no longer a marketing line — it is becoming a regulatory expectation. The path there runs through two changes at once: electrifying the fleet, and routing it intelligently enough to make electrification viable.",
+      "Cleaner delivery is becoming an operating requirement, not just a brand message. It depends on EV adoption and route plans that make those vehicles practical every day.",
   },
   {
+    slug: "how-doormile-maintains-99-9-sla-compliance-at-scale",
     title: "How Doormile Maintains 99.9% SLA Compliance at Scale",
     excerpt:
-      "Hitting SLA targets 99.9% of the time isn't luck — it's the product of ETA pre-validation, real-time rebalancing, and a routing engine built with delivery reliability as its first constraint.",
+      "High SLA performance comes from checking ETAs before dispatch, reacting early to delays, and keeping customer commitments visible throughout the day.",
     category: "Operations",
-    image: "/images/last-mile-approach.jpg",
+    image: "/images/last-mile-approach.webp",
     date: "2025-06-26",
     intro:
-      "An SLA you hit 99.9% of the time is not an average you got lucky on — it is a system designed so that missing is the exception, not the risk. Reliability, it turns out, is an engineering decision made long before dispatch.",
+      "Strong SLA performance is not luck. It comes from planning the day so late deliveries are the exception, not the expected risk.",
   },
   {
+    slug: "battery-simulation-the-secret-to-ev-route-pre-validation",
     title: "Battery Simulation: The Secret to EV Route Pre-Validation",
     excerpt:
-      "Before a single rider leaves the hub, MileTruth™ simulates every route against real charge capacity — eliminating mid-route failures and protecting your fulfillment rate.",
+      "Before a rider leaves the hub, every EV route should be checked against real charge capacity and the expected return plan.",
     category: "EV Fleet",
-    image: "/images/blog-post-pic-3.jpeg",
+    image: "/images/blog-post-pic-3.webp",
     date: "2025-06-12",
     intro:
-      "A stranded EV is not just a late delivery — it is a vehicle out of service, a customer let down, and a recovery cost. Simulating the route against real charge capacity before dispatch is how you make sure it never happens.",
+      "A stranded EV is not just a late delivery. It means a vehicle is out of service, a customer is waiting, and the hub has to arrange recovery. Range checks need to happen before dispatch.",
   },
 ];
 
-function slugify(title: string): string {
-  return title
-    .toLowerCase()
-    .replace(/™/g, "")
-    .replace(/&/g, " and ")
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "");
-}
-
 export const blogPosts: BlogPost[] = seeds.map((s) => ({
-  slug: slugify(s.title),
+  slug: s.slug,
   title: s.title,
   excerpt: s.excerpt,
   category: s.category,

src/modules/how-it-works-3d/Experience3D.jsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useRef, useEffect, useState } from 'react'
+import React, { useRef, useEffect, useState, useCallback } from 'react'
 import Experience from './components/Experience'
 import ScrollRig from './components/ScrollRig'
 import Navbar from './components/ui/Navbar'
@@ -9,6 +9,7 @@ import MidMile from './components/sections/MidMile'
 import LastMile from './components/sections/LastMile'
 import Promise from './components/sections/Promise'
 import { useSceneStore } from './store/useSceneStore'
+import { useDeviceCaps } from './utils/deviceTier'
 import './styles/experience.css'
 
 import Lenis from 'lenis'
@@ -18,39 +19,144 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger'
 gsap.registerPlugin(ScrollTrigger)
 
 /**
- * Experience3D
- * ---------------------------------------------------------------------------
- * The full scroll-driven 3D logistics story, ported from the standalone Vite
- * app's App.jsx and embedded as the body of the How It Works page (below the
- * existing Elementor hero, above the global Footer).
+ * Experience3D — the scroll-driven 3D logistics story embedded in the How It
+ * Works page.
  *
- * Two integration changes vs. the standalone app:
- *  1. Self-managed fixed pin. The site has a fixed header and an ancestor with
- *     `overflow:hidden`, both of which break CSS `position: sticky`. So this is
- *     a tall `position:relative` section (`.dm-hiw-3d`, its height supplied by
- *     the 900vh ScrollRig spacer) with an absolutely-positioned `.dm-hiw-3d-stage`
- *     toggled absolute(top) → fixed → absolute(bottom) via the ScrollTrigger pin
- *     state — the same approach the site's other 3D sections use (StrategySection).
- *  2. The global Lenis is disabled on `/how-it-works` (SmoothScroll.tsx) so the
- *     experience runs its own tuned Lenis here without a second instance fighting
- *     it. The internal "Scroll to start" Hero overlay is dropped because the page
- *     keeps the Elementor HowItWorksHero above this section.
+ * PERF refactor (this pass):
+ *  1. Device tiering. `useDeviceCaps()` classifies desktop / tablet / mobile and
+ *     a `fallback` flag. The tier flows into the Canvas (dpr/shadows/AA),
+ *     Scene3D (LOD visibility), and ScrollRig (scroll length).
+ *  2. Static fallback. Reduced-motion / no-WebGL / very-low-memory devices get a
+ *     poster instead of a live WebGL scene.
+ *  3. No per-frame React renders at this level. This component no longer
+ *     subscribes to `scrollProgress`; the end-of-scroll canvas fade is applied
+ *     imperatively, and the story overlays live in <StorySections>, which only
+ *     re-renders when a section boolean flips.
+ *  4. Touch-aware smooth scroll. Lenis runs on desktop only (driven by a
+ *     dedicated rAF, not gsap.ticker; syncTouch off). Touch devices use native
+ *     momentum scrolling — emulated inertia on a heavy WebGL page is the main
+ *     cause of mobile/tablet scroll lag.
  */
+
+/**
+ * Story text panels. Isolated so its boolean subscriptions don't re-render the
+ * whole experience: each selector returns a boolean, so React only re-renders
+ * this small component when a section actually enters/leaves its range.
+ */
+function StorySections() {
+  // First Mile is active from the very top (progress 0) so its card is visible
+  // the instant the user enters the section — no scroll required.
+  const firstActive = useSceneStore((s) => s.scrollProgress < 0.14)
+  const midActive = useSceneStore((s) => s.scrollProgress >= 0.38 && s.scrollProgress < 0.50)
+  const lastActive = useSceneStore((s) => s.scrollProgress >= 0.78 && s.scrollProgress < 0.875)
+  const promiseActive = useSceneStore((s) => s.scrollProgress >= 0.90)
+
+  return (
+    <div className="sections-overlay-container">
+      <FirstMile active={firstActive} />
+      <MidMile active={midActive} />
+      <LastMile active={lastActive} />
+      <Promise active={promiseActive} />
+    </div>
+  )
+}
+
+/** Branded loading state shown over the stage while the GLB scene loads. Never
+ *  a blank canvas — fades out once the scene signals ready. */
+function BrandedLoader({ hidden }) {
+  return (
+    <div
+      className="dm-hiw-3d-loader"
+      aria-hidden={hidden}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        zIndex: 50,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '18px',
+        background: 'linear-gradient(180deg, #f5f5f7 0%, #e9edf2 100%)',
+        opacity: hidden ? 0 : 1,
+        pointerEvents: hidden ? 'none' : 'auto',
+        transition: 'opacity 0.6s ease',
+      }}
+    >
+      <span
+        style={{
+          width: 30,
+          height: 30,
+          borderRadius: '50%',
+          border: '3px solid rgba(192,18,39,0.18)',
+          borderTopColor: '#c01227',
+          animation: 'dm-hiw-spin 0.8s linear infinite',
+        }}
+      />
+      <span style={{ fontWeight: 600, letterSpacing: '0.01em', color: '#1f1f1f', fontSize: '0.95rem' }}>
+        Loading Doormile Experience…
+      </span>
+      <style>{`@keyframes dm-hiw-spin{to{transform:rotate(360deg)}}`}</style>
+    </div>
+  )
+}
+
+/** Lightweight poster shown when a live scene isn't appropriate/possible. */
+function StaticFallback() {
+  return (
+    <section
+      className="dm-hiw-3d-fallback"
+      style={{
+        position: 'relative',
+        minHeight: '70vh',
+        display: 'flex',
+        alignItems: 'flex-end',
+        background:
+          'linear-gradient(180deg, #eef1f5 0%, #dfe5ec 55%, #cfd7e0 100%)',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Optional poster image; if it 404s we keep the gradient + caption. */}
+      <img
+        src="/images/home2-banner-1.webp"
+        alt="Doormile delivery journey — first mile to last mile"
+        loading="lazy"
+        decoding="async"
+        onError={(e) => {
+          e.currentTarget.style.display = 'none'
+        }}
+        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
+      />
+      <div style={{ position: 'relative', padding: '2rem clamp(1rem, 5vw, 4rem)', maxWidth: 720 }}>
+        <p style={{ fontWeight: 700, fontSize: 'clamp(1.25rem, 3vw, 2rem)', lineHeight: 1.2, margin: 0 }}>
+          From first mile to last mile, every delivery tracked.
+        </p>
+      </div>
+    </section>
+  )
+}
+
 export default function Experience3D() {
-  const scrollProgress = useSceneStore((state) => state.scrollProgress)
   const setLenis = useSceneStore((state) => state.setLenis)
+  const caps = useDeviceCaps() // null until mounted on the client
 
   const containerRef = useRef(null)
+  const canvasWrapperRef = useRef(null)
   const [pinState, setPinState] = useState('before')
-  // Defer mounting the WebGL Canvas until the section nears the viewport. This
-  // mirrors the site's other 3D sections (StrategySection's `mountScene`): besides
-  // saving the heavy 32MB scene until needed, it keeps the Canvas out of React
-  // StrictMode's initial synchronous double-mount, which otherwise creates and
-  // immediately loses the WebGL context in dev ("THREE.WebGLRenderer: Context Lost"),
-  // leaving a blank canvas. Once mounted it stays mounted.
   const [mountScene, setMountScene] = useState(false)
+  const [sceneReady, setSceneReady] = useState(false)
 
+  // Stable callback handed to the in-Canvas readiness signal.
+  const handleSceneReady = useCallback(() => setSceneReady(true), [])
+
+  const tier = caps?.tier ?? 'desktop'
+  const useFallback = caps?.fallback ?? false
+  const isTouch = caps?.isTouch ?? false
+  const liveScene = caps != null && !useFallback
+
+  // Defer mounting the WebGL Canvas until the section nears the viewport.
   useEffect(() => {
+    if (!liveScene) return
     const el = containerRef.current
     if (!el) return
     const io = new IntersectionObserver(
@@ -64,104 +170,109 @@ export default function Experience3D() {
     )
     io.observe(el)
     return () => io.disconnect()
-  }, [])
+  }, [liveScene])
 
-  // Refresh ScrollTrigger when the scene actually mounts. WebGL canvas mounting
-  // can block the main thread and shift elements, so a refresh here is critical.
-  useEffect(() => {
-    if (mountScene) {
-      const timer = setTimeout(() => {
-        ScrollTrigger.refresh()
-      }, 150)
-      return () => clearTimeout(timer)
-    }
-  }, [mountScene])
+  // (ScrollTrigger refreshing is owned by ScrollRig now — it refreshes on the
+  // next frame, on every layout settle via ResizeObserver/fonts.ready, and again
+  // when `ready` flips true. No arbitrary timeouts.)
 
-  // Own Lenis instance (global Lenis is gated off for this route).
+  // Smooth scroll — DESKTOP ONLY. Touch devices keep native momentum (native is
+  // smoother than emulated inertia on a heavy WebGL page, and avoids the
+  // touch-scroll lag). Driven by a dedicated rAF rather than gsap.ticker.
   useEffect(() => {
+    if (!liveScene || isTouch) return
+
     const lenis = new Lenis({
       duration: 1.2,
       lerp: 0.08,
-      syncTouch: true,
+      syncTouch: false, // never emulate touch inertia
     })
-
     setLenis(lenis)
     lenis.on('scroll', ScrollTrigger.update)
 
-    // Drive Lenis using GSAP's ticker to ensure synchronization with ScrollTrigger
-    const tickerCb = (time) => lenis.raf(time * 1000)
-    gsap.ticker.add(tickerCb)
-    gsap.ticker.lagSmoothing(0)
+    let rafId
+    const raf = (time) => {
+      lenis.raf(time)
+      rafId = requestAnimationFrame(raf)
+    }
+    rafId = requestAnimationFrame(raf)
     ScrollTrigger.refresh()
 
     return () => {
-      gsap.ticker.remove(tickerCb)
+      cancelAnimationFrame(rafId)
       lenis.destroy()
       setLenis(null)
     }
-  }, [setLenis])
+  }, [liveScene, isTouch, setLenis])
+
+  // End-of-scroll canvas fade — applied imperatively so it never triggers a
+  // React render. Subscribes to the store but only touches the DOM on flip.
+  useEffect(() => {
+    if (!mountScene) return
+    const el = canvasWrapperRef.current
+    if (!el) return
+    let lastDim = null
+    const apply = (p) => {
+      const dim = p >= 0.92
+      if (dim !== lastDim) {
+        lastDim = dim
+        el.style.opacity = dim ? '0.85' : '1'
+      }
+    }
+    apply(useSceneStore.getState().scrollProgress)
+    const unsub = useSceneStore.subscribe((s) => apply(s.scrollProgress))
+    return unsub
+  }, [mountScene])
 
   // 3D references shared between R3F and the GSAP scroll system.
   const truckRef = useRef(null)
+  const wheelRefs = React.useMemo(
+    () => [{ current: null }, { current: null }, { current: null }, { current: null }],
+    [],
+  )
+  // Kept for API compatibility (Scene3D no longer wires these; dashboard refs
+  // were never attached in the generated model — the animation is a no-op).
+  const dashboardRefs = React.useMemo(
+    () => ({ bars: [], floorBars: [], pieQuarters: [] }),
+    [],
+  )
 
-  const wheelRefs = React.useMemo(() => [
-    { current: null }, // FR
-    { current: null }, // FL
-    { current: null }, // RL
-    { current: null }, // RR
-  ], [])
-
-  const dashboardRefs = React.useMemo(() => ({
-    bars: [
-      { current: null }, { current: null }, { current: null },
-      { current: null }, { current: null }, { current: null }
-    ],
-    floorBars: [
-      { current: null }, { current: null }, { current: null },
-      { current: null }, { current: null }
-    ],
-    pieQuarters: [
-      { current: null }, { current: null }, { current: null }, { current: null }
-    ]
-  }), [])
+  // Pre-mount (caps unknown) / fallback: render a reserved placeholder or poster.
+  if (caps == null) {
+    return <div ref={containerRef} className="dm-hiw-3d" style={{ minHeight: '100vh' }} aria-hidden />
+  }
+  if (useFallback) {
+    return <StaticFallback />
+  }
 
   return (
     <div ref={containerRef} className={`dm-hiw-3d is-${pinState}`}>
-      {/* Pinned stage: canvas + HTML overlays. Stays fixed across the scroll. */}
       <div className="dm-hiw-3d-stage">
         <div
+          ref={canvasWrapperRef}
           className="canvas-wrapper"
-          style={{
-            opacity: scrollProgress >= 0.92 ? 0.85 : 1.0,
-            transition: 'opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1)',
-          }}
+          style={{ transition: 'opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1)' }}
         >
           {mountScene && (
             <Experience
               truckRef={truckRef}
               wheelRefs={wheelRefs}
               dashboardRefs={dashboardRefs}
+              tier={tier}
+              onReady={handleSceneReady}
             />
           )}
         </div>
 
-        {/* In-experience section navigation */}
-        <Navbar />
+        {/* Branded loader while the GLB loads — no blank canvas. Mounts with the
+            Canvas, fades out the moment the scene is ready. */}
+        {mountScene && <BrandedLoader hidden={sceneReady} />}
 
-        {/* Story stage text panels (revealed at their scroll ranges) */}
-        <div className="sections-overlay-container">
-          <FirstMile active={scrollProgress >= 0.02 && scrollProgress < 0.14} />
-          <MidMile active={scrollProgress >= 0.38 && scrollProgress < 0.50} />
-          <LastMile active={scrollProgress >= 0.78 && scrollProgress < 0.875} />
-          {/* Final card: reveals as the journey closes (fills the slot the old
-              workflow timeline card used to occupy — no blank gap). */}
-          <Promise active={scrollProgress >= 0.90} />
-        </div>
+        <Navbar />
+        <StorySections />
       </div>
 
-      {/* GSAP scroll system: 900vh in-flow spacer that gives the section its
-          height, drives scroll progress, and reports pin state. */}
-      <ScrollRig dashboardRefs={dashboardRefs} onPinState={setPinState} />
+      <ScrollRig dashboardRefs={dashboardRefs} onPinState={setPinState} tier={tier} ready={sceneReady} />
     </div>
   )
 }

src/modules/how-it-works-3d/components/CameraRig.jsx

@@ -2,46 +2,52 @@ import React, { useRef } from 'react'
 import { useFrame } from '@react-three/fiber'
 import * as THREE from 'three'
 import { useSceneStore } from '../store/useSceneStore'
-import { useCameraAnimation } from '../hooks/useCameraAnimation'
+import { computeCameraState } from '../hooks/useCameraAnimation'
 import { easing } from 'maath'
 
+/**
+ * CameraRig
+ * ---------------------------------------------------------------------------
+ * PERF: This used to `useSceneStore(s => s.scrollProgress)`, which re-rendered
+ * the component (and re-ran the heavy useCameraAnimation useMemo, allocating
+ * ~15 Vector3s) on EVERY scroll frame. Now it subscribes to nothing — it reads
+ * scroll progress transiently via `getState()` inside the frame loop and solves
+ * the camera with an allocation-free pure function writing into reused vectors.
+ * Result: zero React renders while scrolling; all motion happens in the rAF loop.
+ */
 export default function CameraRig() {
-  const scrollProgress = useSceneStore((state) => state.scrollProgress)
-  const { position: targetPosition, target: lookAtTarget } = useCameraAnimation(scrollProgress)
-  
-  // Track the current focus point of the camera in a ref so we can interpolate it smoothly
   const currentLookAt = useRef(new THREE.Vector3(19.7, 4.4, -31.08))
+  const targetPosition = useRef(new THREE.Vector3()).current
+  const lookAtTarget = useRef(new THREE.Vector3()).current
 
   useFrame((state, delta) => {
     const { camera } = state
 
-    // maath's easing.damp3 divides by delta internally; a delta of 0 (coincident
-    // or first frames) yields NaN that poisons the damper and would push the
-    // camera to NaN — blanking the whole scene. Clamp delta to a safe range.
+    // Solve the target camera pose for the current scroll position (read without
+    // subscribing — no re-render).
+    const scrollProgress = useSceneStore.getState().scrollProgress
+    computeCameraState(scrollProgress, targetPosition, lookAtTarget)
+
+    // maath's easing.damp3 divides by delta; a delta of 0 (coincident/first
+    // frames) yields NaN that poisons the damper. Clamp to a safe range.
     const dt = Number.isFinite(delta) && delta > 0 ? Math.min(delta, 0.1) : 1 / 60
 
-    // Smoothly damp the camera position towards the target position
     easing.damp3(camera.position, targetPosition, 0.35, dt)
-
-    // Smoothly damp the camera focus target (lookAt)
     easing.damp3(currentLookAt.current, lookAtTarget, 0.25, dt)
 
-    // Defensive recovery: if anything upstream produced a non-finite value, snap
-    // back to the target so the camera never gets stuck at NaN (black screen).
+    // Defensive recovery: never let a non-finite value blank the scene.
     if (!Number.isFinite(camera.position.x)) camera.position.copy(targetPosition)
     if (!Number.isFinite(currentLookAt.current.x)) currentLookAt.current.copy(lookAtTarget)
 
-    // Apply lookAt orientation using the interpolated target vector
     camera.lookAt(currentLookAt.current)
 
-    // Responsive aspect ratio adjustments: increase FOV on portrait screens to zoom out and keep truck & buildings in frame
+    // Portrait screens: widen FOV so the truck & buildings stay in frame.
     const aspect = state.size.width / state.size.height
-    if (aspect < 1.0) {
-      camera.fov = Math.min(75, 45 / Math.sqrt(aspect))
-    } else {
-      camera.fov = 45
+    const fov = aspect < 1.0 ? Math.min(75, 45 / Math.sqrt(aspect)) : 45
+    if (camera.fov !== fov) {
+      camera.fov = fov
+      camera.updateProjectionMatrix()
     }
-    camera.updateProjectionMatrix()
   })
 
   return null

src/modules/how-it-works-3d/components/Experience.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, Suspense } from 'react'
 import { Canvas, useFrame } from '@react-three/fiber'
 import { Environment, SoftShadows } from '@react-three/drei'
 import * as THREE from 'three'
@@ -6,23 +6,33 @@ import { Model as SceneModel } from '../models/Scene3D'
 import CameraRig from './CameraRig'
 import TruckAnimation from './TruckAnimation'
 import StreetLights from './StreetLights'
-import { useSceneStore } from '../store/useSceneStore'
 
 const dayBgColor = new THREE.Color('#f5f5f7')
-const nightBgColor = new THREE.Color('#010103') // Pitch black sky with a tiny touch of midnight slate
-
-const dayAmbientColor = new THREE.Color('#ffffff')
-const nightAmbientColor = new THREE.Color('#000000') // Pitch black ambient
-
-const dayDirColor = new THREE.Color('#ffffff')
-const nightDirColor = new THREE.Color('#000000') // Pitch black sun/moon directional light
-
 const tempColor = new THREE.Color()
+const _truckPos = new THREE.Vector3()
 
-// Dynamic lighting rig that centers the shadow frustum on the moving truck
-const SceneLighting = React.memo(function SceneLighting({ truckRef }) {
+/**
+ * Per-tier Canvas / lighting / feature settings. One table so the desktop ↔
+ * tablet ↔ mobile trade-offs are visible and tuned in a single place.
+ *
+ *   shadows      — WebGL shadow map on at all? (mobile: off entirely)
+ *   softShadows  — drei PCSS soft shadows (desktop only; expensive)
+ *   environment  — drei "city" HDR (network + GPU; dropped on mobile)
+ *   streetLights — extra spotLights (currently visually off → desktop only)
+ *   dpr          — device-pixel-ratio clamp
+ *   antialias    — MSAA (desktop only; costly on mobile fill rate)
+ *   shadowMap    — directional-light shadow resolution
+ */
+const TIER = {
+  desktop: { shadows: true, softShadows: true, environment: true, streetLights: true, dpr: [1, 1.5], antialias: true, shadowMap: 2048 },
+  tablet: { shadows: true, softShadows: false, environment: true, streetLights: false, dpr: [1, 1.5], antialias: false, shadowMap: 1024 },
+  mobile: { shadows: false, softShadows: false, environment: false, streetLights: false, dpr: [1, 1], antialias: false, shadowMap: 512 },
+}
+
+// Directional "sun" that keeps its shadow frustum centred on the moving truck.
+// PERF: reads the truck position transiently in useFrame — no React state.
+const SceneLighting = React.memo(function SceneLighting({ truckRef, shadows, shadowMap }) {
   const dirLightRef = useRef()
-  const ambientLightRef = useRef()
   const targetRef = useRef()
 
   useEffect(() => {
@@ -32,48 +42,30 @@ const SceneLighting = React.memo(function SceneLighting({ truckRef }) {
   }, [])
 
   useFrame((state) => {
-    // 1. Center shadows on the truck
+    // Track the truck so the (small) shadow frustum always covers it.
     if (dirLightRef.current && targetRef.current && truckRef.current) {
-      const truckPos = new THREE.Vector3()
-      truckRef.current.getWorldPosition(truckPos)
-
-      targetRef.current.position.copy(truckPos)
+      truckRef.current.getWorldPosition(_truckPos)
+      targetRef.current.position.copy(_truckPos)
       targetRef.current.updateMatrixWorld()
-
-      dirLightRef.current.position.set(truckPos.x + 10, truckPos.y + 20, truckPos.z + 10)
+      dirLightRef.current.position.set(_truckPos.x + 10, _truckPos.y + 20, _truckPos.z + 10)
     }
-
-    // 2. Day-to-Night transition calculations (disabled: keeping day view throughout the scroll)
-    const nightFactor = 0
-
-    // 3. Mutate scene background color & environment intensity
+    // Keep the daytime background colour stable (day→night transition is disabled).
     if (state.scene) {
-      state.scene.background = tempColor.lerpColors(dayBgColor, nightBgColor, nightFactor)
-      state.scene.environmentIntensity = 1.0 - nightFactor * 1.0 // Fades completely to 0.0
-    }
-
-    // 4. Update lights properties
-    if (ambientLightRef.current) {
-      ambientLightRef.current.intensity = 0.45 - nightFactor * 0.45 // Fades completely to 0.0
-      ambientLightRef.current.color.lerpColors(dayAmbientColor, nightAmbientColor, nightFactor)
-    }
-
-    if (dirLightRef.current) {
-      dirLightRef.current.intensity = 1.5 - nightFactor * 1.5 // Fades completely to 0.0
-      dirLightRef.current.color.lerpColors(dayDirColor, nightDirColor, nightFactor)
+      state.scene.background = tempColor.copy(dayBgColor)
+      state.scene.environmentIntensity = 1.0
     }
   })
 
   return (
     <group>
-      <ambientLight ref={ambientLightRef} intensity={0.45} />
+      <ambientLight intensity={0.45} />
       <directionalLight
         ref={dirLightRef}
-        castShadow
+        castShadow={shadows}
         position={[10, 20, 10]}
         intensity={1.5}
-        shadow-mapSize-width={2048}
-        shadow-mapSize-height={2048}
+        shadow-mapSize-width={shadowMap}
+        shadow-mapSize-height={shadowMap}
         shadow-camera-far={100}
         shadow-camera-left={-35}
         shadow-camera-right={35}
@@ -86,58 +78,79 @@ const SceneLighting = React.memo(function SceneLighting({ truckRef }) {
   )
 })
 
-export default React.memo(function Experience({ dashboardRefs, wheelRefs, truckRef }) {
+/**
+ * Fires `onReady` once the GLB has resolved (this only mounts inside the Suspense
+ * boundary, after the model loaded and Scene3D's useLayoutEffect wired the refs)
+ * AND the first real frame has painted (double rAF = one composited frame). This
+ * is the deterministic "scene ready" signal — no timeouts.
+ */
+function SceneReadySignal({ onReady }) {
+  useEffect(() => {
+    let r1 = 0
+    let r2 = 0
+    r1 = requestAnimationFrame(() => {
+      r2 = requestAnimationFrame(() => onReady?.())
+    })
+    return () => {
+      cancelAnimationFrame(r1)
+      cancelAnimationFrame(r2)
+    }
+  }, [onReady])
+  return null
+}
+
+function Experience({ dashboardRefs, wheelRefs, truckRef, tier = 'desktop', onReady }) {
+  const cfg = TIER[tier] ?? TIER.desktop
+
   return (
     <div style={{ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0 }}>
       <Canvas
-        shadows
-        // Cap the device-pixel-ratio: uncapped, a retina display renders this
-        // heavy 32MB scene into a 2x (or 3x) framebuffer, multiplying GPU memory
-        // and risking WebGL context loss. [1, 1.5] keeps it crisp but bounded —
-        // matching the dpr caps the site's other R3F canvases use.
-        dpr={[1, 1.5]}
+        // Mobile turns the shadow map off entirely; desktop/tablet keep it but
+        // only the truck casts and only the ground receives (see Scene3D pruning).
+        shadows={cfg.shadows}
+        // Cap DPR so a retina phone doesn't render this heavy scene into a 2–3×
+        // framebuffer (GPU memory blowup → context loss).
+        dpr={cfg.dpr}
         camera={{ position: [32, 12, -18], fov: 45 }}
-        gl={{ antialias: true, powerPreference: 'high-performance' }}
+        gl={{ antialias: cfg.antialias, powerPreference: 'high-performance' }}
       >
         <color attach="background" args={['#f5f5f7']} />
 
-        {/* Soft shadows */}
-        <SoftShadows size={10} samples={12} focus={1.0} />
+        {/* Soft (PCSS) shadows on desktop only — they multiply shadow-map cost. */}
+        {cfg.softShadows && <SoftShadows size={10} samples={12} focus={1.0} />}
 
-        {/* Dynamic ambient and shadow-tracking directional lights */}
-        <SceneLighting truckRef={truckRef} />
+        <SceneLighting truckRef={truckRef} shadows={cfg.shadows} shadowMap={cfg.shadowMap} />
 
-        {/* Focused street lights along the road */}
-        <StreetLights />
+        {/* Decorative street spotlights (visually off in the day scene) — desktop only. */}
+        {cfg.streetLights && <StreetLights />}
 
-        {/* Environment preset */}
-        <Environment preset="city" />
+        {/* Image-based lighting in its OWN boundary. The "city" HDR is an
+            external fetch; keeping it separate means scene readiness is gated on
+            the (local, fast) GLB only — the HDR can pop in a beat later without
+            delaying the loader→ready handoff. Mobile skips it for a cheap fill. */}
+        {cfg.environment ? (
+          <Suspense fallback={null}>
+            <Environment preset="city" />
+          </Suspense>
+        ) : (
+          <hemisphereLight args={['#ffffff', '#9aa0a6', 0.9]} />
+        )}
 
-        {/* Main 3D logistics scene model */}
-        <SceneModel 
-          dashboardRefs={dashboardRefs} 
-          truckRef={truckRef}
-          wheelRefs={wheelRefs}
-        />
+        {/* Main scene + readiness signal. SceneReadySignal mounts only once the
+            GLB has resolved (same boundary) → deterministic "ready". */}
+        <Suspense fallback={null}>
+          <SceneModel dashboardRefs={dashboardRefs} truckRef={truckRef} wheelRefs={wheelRefs} tier={tier} />
+          <SceneReadySignal onReady={onReady} />
+        </Suspense>
 
-        {/* Delivery truck model animation controller */}
         <TruckAnimation truckRef={truckRef} wheelRefs={wheelRefs} />
-
-        {/* Dynamic camera rig with damping and target interpolation */}
         <CameraRig />
 
-        {/* Post-processing (EffectComposer/Bloom/Vignette) intentionally omitted.
-            @react-three/postprocessing's EffectComposer reads
-            `renderer.getContextAttributes().alpha` while initializing its buffers;
-            under Next dev's React StrictMode the canvas's WebGL context is torn
-            down and re-created, so that read hits a null context and throws
-            "Cannot read properties of null (reading 'alpha')", crashing the whole
-            scene. Dropping the composer renders the scene directly (lighting +
-            shadows + environment carry the look). To re-add Bloom later, set
-            `reactStrictMode: false` in next.config.ts and restore a Bloom-only
-            composer. */}
+        {/* Post-processing intentionally omitted (EffectComposer + StrictMode +
+            ssr:false interaction; see git history). Mobile would disable it anyway. */}
       </Canvas>
     </div>
   )
-})
+}
 
+export default React.memo(Experience)

src/modules/how-it-works-3d/components/ScrollRig.jsx

@@ -6,98 +6,140 @@ import { animateDashboard } from '../animations/dashboardAnimation'
 
 gsap.registerPlugin(ScrollTrigger)
 
-export default function ScrollRig({ dashboardRefs, onPinState }) {
+// Scroll length per device tier. The animation is driven by NORMALISED progress
+// (0→1), so compressing the spacer height only shortens how far the user has to
+// scroll — every camera/truck keyframe still lands at the same progress value,
+// preserving the visuals while cutting the 900vh marathon down to a tighter,
+// less laggy travel (and less time touch-scrolling a heavy WebGL page on mobile).
+const SCROLL_HEIGHT_VH = { desktop: 600, tablet: 550, mobile: 500 }
+
+/**
+ * ScrollRig
+ * ---------------------------------------------------------------------------
+ * Owns the single ScrollTrigger that drives the whole experience (progress, pin
+ * state, active section).
+ *
+ * FIRST-LOAD CORRECTNESS (the bug this fixes):
+ * The stage is pinned by a manual `position: fixed` toggle driven by this
+ * trigger. On a client-side route navigation (Home → /how-it-works) the trigger
+ * could be created against a not-yet-settled layout (the heavy Elementor hero +
+ * web fonts above it are still loading), so its start/end were wrong and it never
+ * fired — the section didn't pin and `scrollProgress` never advanced, so cards
+ * and section activation were dead until a manual refresh (which loads against a
+ * settled, cached layout).
+ *
+ * The fix is lifecycle-driven, NOT timeout-based:
+ *  - `onRefresh` re-syncs the store from the trigger's CURRENT progress every
+ *    time the layout settles, so state is correct without needing a scroll event.
+ *    ScrollTrigger fires onRefresh on creation too, so First Mile is correct on
+ *    mount.
+ *  - A debounced ResizeObserver on the document refreshes whenever the page
+ *    height changes (hero/fonts/images settling, scene mounting, orientation).
+ *  - `document.fonts.ready` triggers a refresh once web fonts are applied.
+ *  - The `ready` prop (scene loaded) triggers a final refresh.
+ */
+export default function ScrollRig({ dashboardRefs, onPinState, tier = 'desktop', ready = false }) {
   const setScrollProgress = useSceneStore((state) => state.setScrollProgress)
   const setActiveSection = useSceneStore((state) => state.setActiveSection)
-  const lenis = useSceneStore((state) => state.lenis)
   const containerRef = useRef(null)
   const activeSectionRef = useRef(0)
   const pinStateRef = useRef('before')
+  const triggerRef = useRef(null)
 
   useEffect(() => {
     const element = containerRef.current
     if (!element) return
 
-    // Create the ScrollTrigger to track the scrolling progress of the 900vh height container
+    // Single place that maps a progress value → all derived state. Called from
+    // BOTH onUpdate (scroll) and onRefresh (layout settle) so the store is always
+    // correct for the current scroll position, even with no scroll interaction.
+    const syncProgress = (progress) => {
+      setScrollProgress(progress)
+
+      const ns = progress <= 0.0002 ? 'before' : progress >= 0.9998 ? 'after' : 'pinned'
+      if (ns !== pinStateRef.current) {
+        pinStateRef.current = ns
+        onPinState?.(ns)
+      }
+
+      let section = 0
+      if (progress >= 0.92) section = 3
+      else if (progress >= 0.5) section = 2
+      else if (progress >= 0.12) section = 1
+      if (section !== activeSectionRef.current) {
+        activeSectionRef.current = section
+        setActiveSection(section)
+      }
+
+      if (dashboardRefs) {
+        const dp = progress >= 0.92 ? (progress - 0.92) / 0.08 : 0
+        animateDashboard(dashboardRefs.bars || [], dashboardRefs.pieQuarters || [], dp)
+      }
+    }
+
     const trigger = ScrollTrigger.create({
       trigger: element,
       start: 'top top',
       end: 'bottom bottom',
-      scrub: 2.5, // Even slower, weightier scroll follow for premium feel
+      scrub: 2.5,
       invalidateOnRefresh: true,
-      onUpdate: (self) => {
-        const progress = self.progress
-        setScrollProgress(progress)
-
-        // Report pin state so the parent toggles the stage between
-        // absolute(top) → fixed → absolute(bottom). Mirrors StrategySection.
-        const ns = progress <= 0.0002 ? 'before' : progress >= 0.9998 ? 'after' : 'pinned'
-        if (ns !== pinStateRef.current) {
-          pinStateRef.current = ns
-          onPinState?.(ns)
-        }
-
-        // Determine the active stage section
-        // Section 0 (First Mile): 0% to 12%
-        // Section 1 (Mid Mile): 12% to 50%
-        // Section 2 (Last Mile): 50% to 76%
-        // Section 3 (Analytics): 76% to 100%
-        let section = 0
-        if (progress >= 0.92) {
-          section = 3
-        } else if (progress >= 0.50) {
-          section = 2
-        } else if (progress >= 0.12) {
-          section = 1
-        }
-        
-        if (section !== activeSectionRef.current) {
-          activeSectionRef.current = section
-        }
-
-        setActiveSection(section)
-
-        // Trigger dashboard animations inside R3F when entering the analytics stage (progress >= 0.92)
-        if (dashboardRefs) {
-          if (progress >= 0.92) {
-            const dashboardProgress = (progress - 0.92) / 0.08
-            animateDashboard(
-              dashboardRefs.bars || [],
-              dashboardRefs.pieQuarters || [],
-              dashboardProgress
-            )
-          } else {
-            // Keep reset when out of analytics section
-            animateDashboard(
-              dashboardRefs.bars || [],
-              dashboardRefs.pieQuarters || [],
-              0
-            )
-          }
-        }
-      },
+      onUpdate: (self) => syncProgress(self.progress),
+      // Re-sync after every refresh (incl. the initial one) so state reflects the
+      // settled layout immediately — this is what makes first-load work without
+      // a manual page refresh.
+      onRefresh: (self) => syncProgress(self.progress),
     })
-    const refreshTimeout = setTimeout(() => {
-      ScrollTrigger.refresh()
-    }, 150)
+    triggerRef.current = trigger
+
+    // Refresh on the next frame (after the browser has laid the new DOM out) —
+    // a paint-synced wait, not an arbitrary millisecond delay.
+    const raf = requestAnimationFrame(() => ScrollTrigger.refresh())
+
+    // Catch late layout shifts: the Elementor hero + web fonts + images above
+    // settle asynchronously on a fresh navigation, changing the document height
+    // and therefore this trigger's start/end. Refresh (debounced to one per
+    // frame) whenever that happens.
+    let roRaf = 0
+    const ro = new ResizeObserver(() => {
+      cancelAnimationFrame(roRaf)
+      roRaf = requestAnimationFrame(() => ScrollTrigger.refresh())
+    })
+    ro.observe(document.documentElement)
+
+    // Web fonts change text metrics → the hero's height → our start position.
+    let fontsCancelled = false
+    if (document.fonts?.ready) {
+      document.fonts.ready.then(() => {
+        if (!fontsCancelled) ScrollTrigger.refresh()
+      })
+    }
 
     return () => {
+      cancelAnimationFrame(raf)
+      cancelAnimationFrame(roRaf)
+      ro.disconnect()
+      fontsCancelled = true
       trigger.kill()
-      clearTimeout(refreshTimeout)
+      triggerRef.current = null
     }
-  }, [setScrollProgress, setActiveSection, dashboardRefs, lenis, onPinState])
+  }, [setScrollProgress, setActiveSection, dashboardRefs, onPinState])
+
+  // When the 3D scene finishes loading it can shift layout / it confirms the
+  // experience is fully mounted — do a final authoritative refresh.
+  useEffect(() => {
+    if (ready) ScrollTrigger.refresh()
+  }, [ready])
 
   return (
     <div
       ref={containerRef}
       id="scroll-trigger-trigger"
       style={{
-        // In normal flow so it gives the `.dm-hiw-3d` section its 900vh height
-        // (the footer follows cleanly after it). The pinned stage is a separate
-        // absolutely/fixed-positioned sibling.
         position: 'relative',
         width: '100%',
-        height: '900vh', // Optimized scroll length for faster, smoother travel
+        // Tier-driven scroll length (was a fixed 900vh). Shorter travel = less
+        // scrub lag, especially while touch-scrolling a heavy WebGL page.
+        height: `${SCROLL_HEIGHT_VH[tier] ?? 600}vh`,
         pointerEvents: 'none', // Allow interacting with the R3F Canvas underneath
         zIndex: 0,
       }}