fix workflow left image

src/components/sections/EVLogisticSection.tsx

@@ -271,7 +271,10 @@ export default function EVLogisticSection() {
           opacity: 0;
           transform: translateY(20px);
           will-change: transform, opacity;
-          transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
+          transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1),
+                      border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1),
+                      border-radius 0.45s cubic-bezier(0.25, 1, 0.5, 1),
+                      box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
         }
 
         .ev-logistic-accordion-item:last-child {
@@ -283,6 +286,41 @@ export default function EVLogisticSection() {
           background: rgba(192, 18, 39, 0.015);
         }
 
+        /* ---- Active (expanded) item: subtle premium highlight ----
+           A soft ~5% red tint, a 16–20px rounded container, a 3px red
+           accent on the left (drawn as an inset shadow so the row never
+           shifts) and an extremely soft shadow for quiet depth. The grid
+           dividers directly above and below the active row are hidden so
+           the tinted block reads as one clean, rounded surface — refined
+           and integrated, never a floating "card". overflow:hidden clips
+           the progress bar to the rounded corners (it does not clip the
+           element's own outer shadow). */
+        .ev-logistic-accordion-item.active {
+          background: rgba(192, 18, 39, 0.045);
+          border-top-color: transparent;
+          border-radius: 16px;
+          overflow: hidden;
+          box-shadow:
+            inset 3px 0 0 0 #c01227,
+            0 4px 14px -12px rgba(17, 17, 17, 0.12);
+        }
+        .ev-logistic-accordion-item.active + .ev-logistic-accordion-item {
+          border-top-color: transparent;
+        }
+        .ev-logistic-accordion-item.active:last-child {
+          border-bottom-color: transparent;
+        }
+        /* Comfortable internal padding on the active row so the content
+           feels more structured and clears the left accent. */
+        .ev-logistic-accordion-item.active .ev-logistic-accordion-header {
+          padding-left: 28px;
+          padding-right: 28px;
+        }
+        .ev-logistic-accordion-item.active .ev-logistic-accordion-content-inner {
+          padding-left: 28px;
+          padding-right: 28px;
+        }
+
         /* Spacious row padding for luxurious design - INCREASED font size for headers */
         .ev-logistic-accordion-header {
           width: 100%;
@@ -299,7 +337,8 @@ export default function EVLogisticSection() {
           font-size: clamp(24px, 2.2vw, 30px); /* Increased to clamp up to 30px! */
           font-weight: 700;
           color: #111111;
-          transition: color 0.3s ease;
+          transition: color 0.3s ease,
+                      padding 0.45s cubic-bezier(0.25, 1, 0.5, 1);
         }
 
         .ev-logistic-accordion-header span:first-child {
@@ -372,6 +411,7 @@ export default function EVLogisticSection() {
           line-height: 1.6;
           color: #555555;
           font-weight: 500;
+          transition: padding 0.45s cubic-bezier(0.25, 1, 0.5, 1);
         }
 
         /* Underline track & sweeping active red bar */
@@ -401,6 +441,13 @@ export default function EVLogisticSection() {
           transform: scaleX(1);
         }
 
+        /* The active row now carries its own highlight (tint + left accent),
+           so the bottom sweeping red bar is redundant and clashes with the
+           rounded corners — hide it while the row is expanded. */
+        .ev-logistic-accordion-item.active .ev-logistic-accordion-progress-track {
+          display: none;
+        }
+
         /* Responsiveness constraints */
         @media (max-width: 1024px) {
           .ev-logistic-section {
@@ -453,11 +500,25 @@ export default function EVLogisticSection() {
             font-size: 19px;
             padding: 22px 8px;
           }
-          
+
           .ev-logistic-accordion-content-inner {
             padding: 0;
             font-size: 15.5px;
           }
+
+          /* Keep the active row's comfortable padding proportional on phones
+             (smaller bump than desktop so it never crowds the narrow column). */
+          .ev-logistic-accordion-item.active {
+            border-radius: 16px;
+          }
+          .ev-logistic-accordion-item.active .ev-logistic-accordion-header {
+            padding-left: 16px;
+            padding-right: 16px;
+          }
+          .ev-logistic-accordion-item.active .ev-logistic-accordion-content-inner {
+            padding-left: 16px;
+            padding-right: 16px;
+          }
         }
       `}} />
 

src/components/sections/EVSection.tsx

@@ -532,6 +532,24 @@ 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) {
+                width: fit-content;
+                max-width: 100%;
+                margin-inline: auto;
+            }
+            .evnd__grid--cards .evnd__imgwrap:not(.evnd__imgwrap--media) .evnd__img {
+                width: auto;
+                height: auto;
+                max-height: clamp(520px, 46vw, 670px);
+                max-width: 100%;
+            }
         }
 
         .evnd__left {
@@ -869,6 +887,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 {
@@ -1184,7 +1218,9 @@ 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">
@@ -1194,7 +1230,9 @@ export default function EVSection({
 
             {/* 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">

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 = {
@@ -96,12 +95,8 @@ export default function Workflow2() {
       eyebrow="/ Innovation /"
       titleLead="MANY STRATEGIES. "
       titleAccent="ONE BEST PLAN."
-      mediaSlot={
-        <WorkflowScene
-          variant="logistics"
-          ariaLabel="Live multi-route logistics brain"
-        />
-      }
+      image="/images/b5b560fe-aab0-4fe6-9f8c-4b187c2f0e99.png"
+      imageAlt="AI route-planning engine selecting the best delivery plan"
       metrics={METRICS}
       features={FEATURES}
       cardsHeading="AI Decision Engine"