diff --git a/client/src/App.jsx b/client/src/App.jsx
index d91590d..40987d0 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -9,7 +9,6 @@ import Contact from './pages/Contact'
 import RemoteSensing from './pages/RemoteSensing'
 import Communications from './pages/Communications'
 import Trainings from './pages/Trainings'
-import ProjectManagement from './pages/ProjectManagement'
 
 const THEME_COOKIE = 'graphyma-theme'
 
@@ -93,7 +92,6 @@ function AnimatedRoutes() {
         <Route path="/services/remote-sensing" element={<RemoteSensing />} />
         <Route path="/services/communications" element={<Communications />} />
         <Route path="/services/trainings" element={<Trainings />} />
-        <Route path="/services/project-management" element={<ProjectManagement />} />
       </Routes>
     </AnimatePresence>
   )
diff --git a/client/src/assets/services/communications-dark.png b/client/src/assets/services/communications-dark.png
index f2540c7..1d79b46 100644
Binary files a/client/src/assets/services/communications-dark.png and b/client/src/assets/services/communications-dark.png differ
diff --git a/client/src/assets/services/communications-light.png b/client/src/assets/services/communications-light.png
index af2e3a3..4c43bd3 100644
Binary files a/client/src/assets/services/communications-light.png and b/client/src/assets/services/communications-light.png differ
diff --git a/client/src/assets/services/index.js b/client/src/assets/services/index.js
index b29f722..f129d42 100644
--- a/client/src/assets/services/index.js
+++ b/client/src/assets/services/index.js
@@ -4,8 +4,6 @@ import communicationsImgLight from './communications-light.png'
 import communicationsImgDark from './communications-dark.png'
 import trainingsImgLight from './trainings-light.png'
 import trainingsImgDark from './trainings-dark.png'
-import projectManagementImgLight from './project-management-light.png'
-import projectManagementImgDark from './project-management-dark.png'
 
 export {
     remoteSensingImgLight,
@@ -14,6 +12,4 @@ export {
     communicationsImgDark,
     trainingsImgLight,
     trainingsImgDark,
-    projectManagementImgLight,
-    projectManagementImgDark,
 }
\ No newline at end of file
diff --git a/client/src/assets/services/project-management-dark.png b/client/src/assets/services/project-management-dark.png
deleted file mode 100644
index 1d79b46..0000000
Binary files a/client/src/assets/services/project-management-dark.png and /dev/null differ
diff --git a/client/src/assets/services/project-management-light.png b/client/src/assets/services/project-management-light.png
deleted file mode 100644
index 4c43bd3..0000000
Binary files a/client/src/assets/services/project-management-light.png and /dev/null differ
diff --git a/client/src/pages/Communications.jsx b/client/src/pages/Communications.jsx
index 65f5a4e..f766756 100644
--- a/client/src/pages/Communications.jsx
+++ b/client/src/pages/Communications.jsx
@@ -10,10 +10,30 @@ const page = {
 }
 
 const CHANNELS = [
-  { title: 'Stakeholder Mapping', detail: 'Prioritize audiences, incentives, and adoption blockers.' },
-  { title: 'Narrative Design', detail: 'Translate EO complexity into human-ready stories.' },
-  { title: 'Campaign Orchestration', detail: 'Multi-channel delivery and feedback loops.' },
-  { title: 'Impact Measurement', detail: 'Usage analytics and adoption KPIs.' },
+  {
+    step: 'Mapping',
+    title: 'Stakeholder Mapping',
+    detail: 'Prioritize audiences, incentives, and adoption blockers to focus effort where it matters most.',
+    duration: 2.8,
+  },
+  {
+    step: 'Narrative',
+    title: 'Narrative Design',
+    detail: 'Translate EO complexity into human-ready stories that resonate with decision-makers.',
+    duration: 3.05,
+  },
+  {
+    step: 'Campaign',
+    title: 'Campaign Orchestration',
+    detail: 'Multi-channel delivery with continuous feedback loops to maximise reach and relevance.',
+    duration: 3.3,
+  },
+  {
+    step: 'Impact',
+    title: 'Impact Measurement',
+    detail: 'Usage analytics and adoption KPIs that prove the value of every communication effort.',
+    duration: 3.55,
+  },
 ]
 
 export default function Communications() {
@@ -74,7 +94,7 @@ export default function Communications() {
                 transition={{ duration: 0.65, delay: 0.12 }}
                 className="comms-hero-copy"
               >
-                We turn Earth Observation insights into business actions, making the value obvious at every level. 
+                We turn Earth Observation insights into business actions, making the value obvious at every level.
               </motion.p>
               <motion.div
                 initial={{ opacity: 0, y: 18 }}
@@ -125,7 +145,7 @@ export default function Communications() {
                     />
                     {/* Rotating belt around the central node */}
                     <motion.g
-            
+
                       transition={{ duration: 16, repeat: Infinity, ease: 'linear' }}
                       style={{ transformOrigin: '160px 130px' }}
                     >
@@ -198,7 +218,7 @@ export default function Communications() {
 
       <section className="section">
         <div className="container">
-          <div className="heritage-grid comms-section-grid">
+          <div className="comms-pipeline-header">
             <div>
               <motion.span
                 className="section-label"
@@ -219,60 +239,50 @@ export default function Communications() {
                 From awareness
                 <span className="gradient-text comms-section-title-break">to adoption</span>
               </motion.h2>
-              <motion.p
-                initial={{ opacity: 0, y: 22 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.65, delay: 0.12 }}
-                className="comms-section-copy"
-              >
-                We design the communication flow as a system: every touchpoint drives momentum, every insight gets turned into accessible value for your users.
-              </motion.p>
+            </div>
+            {/* <motion.p
+              initial={{ opacity: 0, y: 22 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.6 }}
+              transition={{ duration: 0.65, delay: 0.12 }}
+              className="comms-pipeline-copy"
+            >
+              We build communication systems that flow — every interaction drives results, and every insight creates real value for our users.
+            </motion.p> */}
+          </div>
+
+          <div className="comms-pipeline-list">
+            {CHANNELS.map((item, i) => (
               <motion.div
-                initial={{ opacity: 0, y: 18 }}
+                key={item.title}
+                initial={{ opacity: 0, y: 24 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.6, delay: 0.2 }}
-                className="comms-channel-list"
+                viewport={{ once: true, margin: '-40px' }}
+                transition={{ delay: i * 0.09, duration: 0.65 }}
+                whileHover={{ y: -3 }}
+                className="comms-pipeline-card"
               >
-                {CHANNELS.map((item) => (
-                  <motion.div
-                    key={item.title}
-                    whileHover={{ y: -4 }}
-                    transition={{ duration: 0.3 }}
-                    className="comms-channel-card"
-                  >
-                    <div className="comms-channel-title">{item.title}</div>
-                    <div className="comms-channel-detail">{item.detail}</div>
-                  </motion.div>
-                ))}
-              </motion.div>
-            </div>
+                <div className="comms-pipeline-left">
+                  <div className="comms-pipeline-number">{String(i + 1).padStart(2, '0')}</div>
+                  <div className="comms-pipeline-connector" />
+                </div>
 
-            <motion.div
-              initial={{ opacity: 0, x: 30 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.8 }}
-              className="comms-network-wrap"
-            >
-              <div className="comms-stage-card">
-                <div className="comms-stage-list">
-                  {['Awareness', 'Trial', 'Adoption', 'Advocacy'].map((stage, i) => (
-                    <div key={stage} className="comms-stage-row">
-                      <div className="comms-stage-pill">{stage}</div>
-                      <div className="comms-stage-bar">
-                        <motion.div
-                          animate={{ x: ['-110%', '230%'] }}
-                          transition={{ duration: 3 + i * 0.2, repeat: Infinity, ease: 'linear' }}
-                          className="comms-stage-sweep"
-                        />
-                      </div>
+                <div className="comms-pipeline-body">
+                  <div className="comms-pipeline-top">
+                    <div className="comms-pipeline-step">{item.step}</div>
+                    <div className="comms-pipeline-bar">
+                      <motion.div
+                        animate={{ x: ['-110%', '230%'] }}
+                        transition={{ duration: item.duration, repeat: Infinity, ease: 'linear' }}
+                        className="comms-pipeline-sweep"
+                      />
                     </div>
-                  ))}
+                  </div>
+                  <div className="comms-pipeline-title">{item.title}</div>
+                  <div className="comms-pipeline-detail">{item.detail}</div>
                 </div>
-              </div>
-            </motion.div>
+              </motion.div>
+            ))}
           </div>
         </div>
       </section>
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
index 3a05006..eb38774 100644
--- a/client/src/pages/Home.jsx
+++ b/client/src/pages/Home.jsx
@@ -14,8 +14,6 @@ import {
   communicationsImgDark,
   trainingsImgLight,
   trainingsImgDark,
-  projectManagementImgLight,
-  projectManagementImgDark,
 } from '../assets/services/index.js'
 
 /* ── Page variants ─────────────────────────────── */
@@ -50,13 +48,6 @@ const SERVICES = [
     link: '/services/trainings',
     delay: 0.2,
   },
-  {
-    number: '04', icon: 'pm',
-    title: 'Project Management',
-    description: 'Strategic oversight and coordination of Earth Observation projects across public, private, and international stakeholder environments.',
-    link: '/services/project-management',
-    delay: 0.3,
-  },
 ]
 
 const STATS = [
@@ -72,28 +63,6 @@ const FLOAT_LABELS = [
   { label: 'Change Detection',  top: '38%', left: '-12%',  delay: 1.7 },
 ]
 
-const MARKET_FACTS = [
-  {
-    value: '$46.8B',
-    label: 'Projected global satellite market by 2031',
-    sub: 'Driven by EO, geospatial intelligence & remote sensing',
-  },
-  {
-    value: '25%',
-    label: 'Of the global satellite industry',
-    sub: 'Earth Observation is one of the largest segments',
-  },
-  {
-    value: '50%+',
-    label: 'Of EO applications',
-    sub: 'Supporting agriculture, forestry, environmental monitoring & natural resource management',
-  },
-  {
-    value: '60%',
-    label: 'Of Essential Climate Variables',
-    sub: 'Can be addressed by satellite data',
-  },
-]
 
 const ORBIT_NODES = [
   { label: 'ESA',      cx: 80,  cy: 230 },
@@ -119,11 +88,6 @@ const SERVICE_VISUALS = [
     imgDark: trainingsImgDark,
     imgLight: trainingsImgLight,
   },
-  {
-    title: 'Project Management',
-    imgDark: projectManagementImgDark,
-    imgLight: projectManagementImgLight,
-  },
 ]
 
 
@@ -307,52 +271,6 @@ export default function Home() {
         </div>
       </section>
 
-
-      {/* ══════════════════════════════════════
-          MARKET FACTS
-      ══════════════════════════════════════ */}
-      {/* <section className="home-facts-section">
-        <div className="container">
-          <motion.span
-            className="section-label"
-            initial={{ opacity: 0, y: 16 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.6 }}
-          >
-            Industry at a Glance
-          </motion.span>
-
-          <motion.h2
-            className="home-facts-title"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ delay: 0.1, duration: 0.7 }}
-          >
-            The scale of <span className="gradient-text">Earth Observation</span>
-          </motion.h2>
-
-          <div className="home-facts-grid">
-            {MARKET_FACTS.map(({ value, label, sub }, i) => (
-              <motion.div
-                key={value}
-                className="home-fact-card"
-                initial={{ opacity: 0, y: 28 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, margin: '-40px' }}
-                transition={{ delay: i * 0.1, duration: 0.65 }}
-              >
-                <div className="home-fact-accent-line" />
-                <div className="home-fact-value">{value}</div>
-                <div className="home-fact-label">{label}</div>
-                <div className="home-fact-sub">{sub}</div>
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </section> */}
-
       {/* ══════════════════════════════════════
           SERVICES
       ══════════════════════════════════════ */}
diff --git a/client/src/pages/ProjectManagement.jsx b/client/src/pages/ProjectManagement.jsx
deleted file mode 100644
index 9dbc3f3..0000000
--- a/client/src/pages/ProjectManagement.jsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import { useRef, useState } from 'react'
-import { motion } from 'framer-motion'
-import { Link } from 'react-router-dom'
-import './styles/ProjectManagement.css'
-
-const page = {
-  initial: { opacity: 0, y: 40 },
-  animate: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] } },
-  exit: { opacity: 0, y: -30, transition: { duration: 0.35, ease: [0.4, 0, 1, 1] } },
-}
-
-const GOVERNANCE = [
-  { title: 'Scope Control', detail: 'Clear milestones, structured risk tracking.' },
-  { title: 'Stakeholder Alignment', detail: 'Multi-actor coordination and consensus.' },
-  { title: 'Delivery Assurance', detail: 'Quality gates, documentation, handover.' },
-  { title: 'Impact Reporting', detail: 'Performance metrics and ROI tracking.' },
-]
-
-export default function ProjectManagement() {
-  const ganttRef = useRef(null)
-  const [ganttOffset, setGanttOffset] = useState({ x: 0, y: 0 })
-
-  function handleGanttMove(e) {
-    const rect = ganttRef.current?.getBoundingClientRect()
-    if (!rect) return
-    const x = ((e.clientX - rect.left) / rect.width - 0.5) * 30
-    const y = ((e.clientY - rect.top) / rect.height - 0.5) * 30
-    setGanttOffset({ x, y })
-  }
-
-  function handleGanttLeave() {
-    setGanttOffset({ x: 0, y: 0 })
-  }
-
-  return (
-    <motion.main variants={page} initial="initial" animate="animate" exit="exit">
-      <section className="section pm-hero">
-        <div className="glow-br" />
-        <div className="container pm-hero-container">
-          <motion.span
-            className="section-label"
-            initial={{ opacity: 0, y: 16 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, amount: 0.6 }}
-            transition={{ duration: 0.6 }}
-          >
-            Project Management
-          </motion.span>
-          <div className="heritage-grid pm-hero-grid">
-            <div>
-              <motion.h1
-                initial={{ opacity: 0, y: 26 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.7, delay: 0.05 }}
-                className="pm-hero-title"
-              >
-                Programmes delivered
-                <span className="gradient-text pm-title-break">with precision</span>
-              </motion.h1>
-              <motion.p
-                initial={{ opacity: 0, y: 22 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.65, delay: 0.12 }}
-                className="pm-hero-copy"
-              >
-                We guide EO initiatives from concept to completion across public and private stakeholders. Our management approach ensures clarity, governance, and on-time delivery.
-              </motion.p>
-              <motion.div
-                initial={{ opacity: 0, y: 18 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.6, delay: 0.2 }}
-                className="pm-hero-actions"
-              >
-                <Link to="/contact" className="btn-primary">Plan a Programme</Link>
-                <Link to="/about" className="btn-outline">Delivery Framework</Link>
-              </motion.div>
-            </div>
-
-            <motion.div
-              initial={{ opacity: 0, scale: 0.92 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ duration: 0.9, ease: [0.16, 1, 0.3, 1] }}
-              className="pm-card-wrap"
-            >
-              <div
-                ref={ganttRef}
-                onMouseMove={handleGanttMove}
-                onMouseLeave={handleGanttLeave}
-                className="pm-card"
-              >
-                <div className="grid-bg pm-card-grid" />
-                <motion.div
-                  className="pm-card-shift"
-                  style={{ transform: `translate3d(${ganttOffset.x}px, ${ganttOffset.y}px, 0)` }}
-                >
-                  <svg viewBox="0 0 320 260" xmlns="http://www.w3.org/2000/svg" className="pm-card-svg">
-                    <motion.g
-                      animate={{ y: [0, -4, 0] }}
-                      transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}
-                    >
-                      <circle cx="160" cy="86" r="18" fill="rgba(var(--accent-rgb),0.12)" stroke="rgba(var(--accent-rgb),0.5)" strokeWidth="1" />
-                      <circle cx="160" cy="86" r="6" fill="var(--accent)" />
-                      <rect x="130" y="110" width="60" height="70" rx="14" fill="rgba(var(--accent-rgb),0.08)" stroke="rgba(var(--accent-rgb),0.3)" />
-                      <rect x="116" y="140" width="88" height="12" rx="6" fill="rgba(var(--accent-rgb),0.18)" />
-                    </motion.g>
-
-                    {[
-                      { x: 40, y: 50, w: 90, h: 48, delay: 0 },
-                      { x: 210, y: 44, w: 84, h: 46, delay: 0.2 },
-                      { x: 32, y: 150, w: 100, h: 50, delay: 0.4 },
-                      { x: 208, y: 150, w: 92, h: 50, delay: 0.6 },
-                    ].map((card, i) => (
-                      <motion.g
-                        key={i}
-                        animate={{ y: [0, -6, 0], x: [0, 4, 0] }}
-                        transition={{ duration: 2.8 + i * 0.3, repeat: Infinity, ease: 'easeInOut', delay: card.delay }}
-                      >
-                        <rect x={card.x} y={card.y} width={card.w} height={card.h} rx="12" fill="rgba(var(--accent-rgb),0.07)" stroke="rgba(var(--accent-rgb),0.25)" />
-                        <motion.rect x={card.x + 10} y={card.y + 14} width={card.w - 20} height="6" rx="3" fill="rgba(var(--accent-rgb),0.22)" animate={{ width: [card.w - 28, card.w - 16, card.w - 24] }} transition={{ duration: 2.4 + i * 0.2, repeat: Infinity, ease: 'easeInOut' }} />
-                        <motion.rect x={card.x + 10} y={card.y + 28} width={card.w - 34} height="6" rx="3" fill="rgba(var(--accent-rgb),0.14)" animate={{ opacity: [0.5, 0.9, 0.5] }} transition={{ duration: 2.6 + i * 0.2, repeat: Infinity, ease: 'easeInOut' }} />
-                        <motion.circle cx={card.x + card.w - 14} cy={card.y + card.h - 12} r="4" fill="var(--accent)" animate={{ scale: [1, 1.5, 1], opacity: [0.5, 1, 0.5] }} transition={{ duration: 1.8 + i * 0.15, repeat: Infinity, ease: 'easeInOut' }} />
-                      </motion.g>
-                    ))}
-
-                    {[
-                      { x1: 120, y1: 118, x2: 88, y2: 92 },
-                      { x1: 200, y1: 118, x2: 232, y2: 92 },
-                      { x1: 120, y1: 164, x2: 86, y2: 170 },
-                      { x1: 200, y1: 164, x2: 232, y2: 172 },
-                    ].map((line, i) => (
-                      <motion.line
-                        key={i}
-                        x1={line.x1}
-                        y1={line.y1}
-                        x2={line.x2}
-                        y2={line.y2}
-                        stroke="rgba(var(--accent-rgb),0.2)"
-                        strokeWidth="1"
-                        strokeDasharray="4 6"
-                        animate={{ strokeDashoffset: [0, -26] }}
-                        transition={{ duration: 2.4 + i * 0.25, repeat: Infinity, ease: 'linear' }}
-                      />
-                    ))}
-                  </svg>
-                </motion.div>
-
-                <motion.div
-                  animate={{ x: ['-200%', '300%'] }}
-                  transition={{ duration: 3.5, repeat: Infinity, ease: 'linear' }}
-                  className="pm-scan-line"
-                />
-              </div>
-            </motion.div>
-          </div>
-        </div>
-      </section>
-
-      <section className="section">
-        <div className="container">
-          <div className="heritage-grid pm-section-grid">
-            <div>
-              <motion.span
-                className="section-label"
-                initial={{ opacity: 0, y: 16 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.6 }}
-              >
-                Delivery System
-              </motion.span>
-              <motion.h2
-                initial={{ opacity: 0, y: 24 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.7, delay: 0.05 }}
-                className="pm-section-title"
-              >
-                Structured governance
-                <span className="gradient-text pm-section-title-break">with momentum</span>
-              </motion.h2>
-              <motion.p
-                initial={{ opacity: 0, y: 22 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.65, delay: 0.12 }}
-                className="pm-section-copy"
-              >
-                Our project management model blends agile execution with public-sector compliance, giving you full visibility while keeping delivery velocity high.
-              </motion.p>
-              <motion.div
-                initial={{ opacity: 0, y: 18 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.6, delay: 0.2 }}
-                className="pm-governance-list"
-              >
-                {GOVERNANCE.map((item) => (
-                  <motion.div
-                    key={item.title}
-                    whileHover={{ y: -4 }}
-                    transition={{ duration: 0.3 }}
-                    className="pm-governance-card"
-                  >
-                    <div className="pm-governance-title">{item.title}</div>
-                    <div className="pm-governance-detail">{item.detail}</div>
-                  </motion.div>
-                ))}
-              </motion.div>
-            </div>
-
-            <motion.div
-              initial={{ opacity: 0, x: 30 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.8 }}
-              className="pm-card-wrap"
-            >
-              <div className="pm-path-card">
-                <div className="pm-path-list">
-                  {['Discovery', 'Planning', 'Execution', 'Validation', 'Handover'].map((stage, i) => (
-                    <div key={stage} className="pm-path-row">
-                      <div className="pm-path-pill">{String(i + 1).padStart(2, '0')}</div>
-                      <div className="pm-path-bar">
-                        <motion.div
-                          animate={{ x: ['-110%', '230%'] }}
-                          transition={{ duration: 3.1 + i * 0.2, repeat: Infinity, ease: 'linear' }}
-                          className="pm-path-sweep"
-                        />
-                      </div>
-                      <div className="pm-path-label">{stage}</div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </motion.div>
-          </div>
-        </div>
-      </section>
-    </motion.main>
-  )
-}
-
diff --git a/client/src/pages/RemoteSensing.jsx b/client/src/pages/RemoteSensing.jsx
index 041e69c..0615ad8 100644
--- a/client/src/pages/RemoteSensing.jsx
+++ b/client/src/pages/RemoteSensing.jsx
@@ -11,26 +11,36 @@ const page = {
 
 const CAPABILITIES = [
   {
-    title: 'Understand Your Needs',
-    detail: 'Aligning Earth Observation solutions with your objectives.',
+    step: 'Acquisition',
+    title: 'Acquisition Strategy',
+    detail: 'Choose the right sensors, providers and datasets for your specific use case and budget.',
+    duration: 2.8,
   },
   {
+    step: 'Identify',
     title: 'Identify the Right EO Data',
-    detail: 'Selecting the most suitable satellite data and platforms.',
+    detail: 'Prepare and organise Earth Observation data from the most relevant platforms and archives.',
+    duration: 3.05,
   },
   {
+    step: 'Analyse',
     title: 'Analyse & Interpret',
-    detail: 'Transforming satellite data into meaningful insights.',
+    detail: 'Extract meaningful insights using advanced processing techniques and domain expertise.',
+    duration: 3.3,
   },
   {
+    step: 'Deliver',
     title: 'Deliver Actionable Insights',
-    detail: 'Clear reports, dashboards, and decision-ready outputs.',
+    detail: 'Verify results, ensure quality and produce decision-ready outputs for your team.',
+    duration: 3.55,
   },
   {
+    step: 'Support',
     title: 'Support & Capacity Building',
-    detail: 'Training teams for confident Earth Observation adoption.',
+    detail: 'Train and upskill your team for confident, long-term Earth Observation adoption.',
+    duration: 3.8,
   },
-];
+]
 
 function SatelliteGraphic() {
   return (
@@ -234,7 +244,7 @@ export default function RemoteSensing() {
 
       <section className="section rs-section">
         <div className="container">
-          <div className="heritage-grid rs-section-grid">
+          <div className="rs-pipeline-header">
             <div>
               <motion.span
                 className="section-label"
@@ -255,61 +265,50 @@ export default function RemoteSensing() {
                 An intelligence pipeline
                 <span className="gradient-text rs-section-title-break">built for clarity</span>
               </motion.h2>
-              <motion.p
-                initial={{ opacity: 0, y: 22 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.65, delay: 0.12 }}
-                className="rs-section-copy"
-              >
-                We deliver fast, high-quality insights using a proven process. Most importantly, we adapt our workflow to fit your business decisions, not the other way around.
-              </motion.p>
+            </div>
+            {/* <motion.p
+              initial={{ opacity: 0, y: 22 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.6 }}
+              transition={{ duration: 0.65, delay: 0.12 }}
+              className="rs-pipeline-copy"
+            >
+              We deliver fast, high-quality insights using a proven process — adapted to fit your decisions, not the other way around.
+            </motion.p> */}
+          </div>
+
+          <div className="rs-pipeline-list">
+            {CAPABILITIES.map((item, i) => (
               <motion.div
-                initial={{ opacity: 0, y: 18 }}
+                key={item.title}
+                initial={{ opacity: 0, y: 24 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.6, delay: 0.2 }}
-                className="rs-capability-list"
+                viewport={{ once: true, margin: '-40px' }}
+                transition={{ delay: i * 0.09, duration: 0.65 }}
+                whileHover={{ y: -3 }}
+                className="rs-pipeline-card"
               >
-                {CAPABILITIES.map((item) => (
-                  <motion.div
-                    key={item.title}
-                    whileHover={{ y: -4 }}
-                    transition={{ duration: 0.3 }}
-                    className="rs-capability-card"
-                  >
-                    <div className="rs-capability-title">{item.title}</div>
-                    <div className="rs-capability-detail">{item.detail}</div>
-                  </motion.div>
-                ))}
-              </motion.div>
-            </div>
+                <div className="rs-pipeline-left">
+                  <div className="rs-pipeline-number">{String(i + 1).padStart(2, '0')}</div>
+                  <div className="rs-pipeline-connector" />
+                </div>
 
-            <motion.div
-              initial={{ opacity: 0, x: 30 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.8 }}
-              className="rs-orbit-wrap rs-stage-align"
-            >
-              <div className="rs-stage-card">
-                <div className="rs-stage-list">
-                  {['Understand', 'Identify', 'Analyse', 'Deliver', 'Support'].map((step, i) => (
-                    <div key={step} className="rs-stage-row">
-                      <div className="rs-stage-number">{String(i + 1).padStart(2, '0')}</div>
-                      <div className="rs-stage-bar">
-                        <motion.div
-                          animate={{ x: ['-110%', '230%'] }}
-                          transition={{ duration: 2.8 + i * 0.25, repeat: Infinity, ease: 'linear' }}
-                          className="rs-stage-sweep"
-                        />
-                      </div>
-                      <div className="rs-stage-label">{step}</div>
+                <div className="rs-pipeline-body">
+                  <div className="rs-pipeline-top">
+                    <div className="rs-pipeline-step">{item.step}</div>
+                    <div className="rs-pipeline-bar">
+                      <motion.div
+                        animate={{ x: ['-110%', '230%'] }}
+                        transition={{ duration: item.duration, repeat: Infinity, ease: 'linear' }}
+                        className="rs-pipeline-sweep"
+                      />
                     </div>
-                  ))}
+                  </div>
+                  <div className="rs-pipeline-title">{item.title}</div>
+                  <div className="rs-pipeline-detail">{item.detail}</div>
                 </div>
-              </div>
-            </motion.div>
+              </motion.div>
+            ))}
           </div>
         </div>
       </section>
diff --git a/client/src/pages/Trainings.jsx b/client/src/pages/Trainings.jsx
index e2c6bd2..aeea073 100644
--- a/client/src/pages/Trainings.jsx
+++ b/client/src/pages/Trainings.jsx
@@ -10,10 +10,30 @@ const page = {
 }
 
 const MODULES = [
-  { title: 'EO Fundamentals', detail: 'Satellite systems, sensors, and data types.' },
-  { title: 'GIS Platforms', detail: 'QGIS, ArcGIS, and web-based mapping stacks.' },
-  { title: 'Analytics', detail: 'Indices, ML pipelines, and evaluation.' },
-  { title: 'Operational Delivery', detail: 'Dashboards, APIs, and deployment workflows.' },
+  {
+    step: 'Fundamentals',
+    title: 'EO Fundamentals',
+    detail: 'Satellite systems, sensors, and data types — the foundation every practitioner needs.',
+    duration: 2.8,
+  },
+  {
+    step: 'GIS',
+    title: 'GIS Platforms',
+    detail: 'QGIS, ArcGIS, and web-based mapping stacks with hands-on lab exercises.',
+    duration: 3.05,
+  },
+  {
+    step: 'Analytics',
+    title: 'Analytics & ML',
+    detail: 'Indices, machine learning pipelines, and rigorous evaluation frameworks.',
+    duration: 3.3,
+  },
+  {
+    step: 'Delivery',
+    title: 'Operational Delivery',
+    detail: 'Dashboards, APIs, and deployment workflows your team can use from day one.',
+    duration: 3.55,
+  },
 ]
 
 export default function Trainings() {
@@ -176,7 +196,7 @@ export default function Trainings() {
 
       <section className="section">
         <div className="container">
-          <div className="heritage-grid train-section-grid">
+          <div className="train-pipeline-header">
             <div>
               <motion.span
                 className="section-label"
@@ -197,61 +217,50 @@ export default function Trainings() {
                 Modular paths
                 <span className="gradient-text train-section-title-break">that scale</span>
               </motion.h2>
-              <motion.p
-                initial={{ opacity: 0, y: 22 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.65, delay: 0.12 }}
-                className="train-section-copy"
-              >
-                Choose standalone modules or build a multi-week programme. Every module includes exercises, datasets, and applied deliverables that your team can use immediately.
-              </motion.p>
+            </div>
+           {/*  <motion.p
+              initial={{ opacity: 0, y: 22 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.6 }}
+              transition={{ duration: 0.65, delay: 0.12 }}
+              className="train-pipeline-copy"
+            >
+              Choose standalone modules or build a multi-week programme. Every module includes exercises, datasets, and applied deliverables your team can use immediately.
+            </motion.p> */}
+          </div>
+
+          <div className="train-pipeline-list">
+            {MODULES.map((item, i) => (
               <motion.div
-                initial={{ opacity: 0, y: 18 }}
+                key={item.title}
+                initial={{ opacity: 0, y: 24 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.6, delay: 0.2 }}
-                className="train-module-list"
+                viewport={{ once: true, margin: '-40px' }}
+                transition={{ delay: i * 0.09, duration: 0.65 }}
+                whileHover={{ y: -3 }}
+                className="train-pipeline-card"
               >
-                {MODULES.map((item) => (
-                  <motion.div
-                    key={item.title}
-                    whileHover={{ y: -4 }}
-                    transition={{ duration: 0.3 }}
-                    className="train-module-card"
-                  >
-                    <div className="train-module-title">{item.title}</div>
-                    <div className="train-module-detail">{item.detail}</div>
-                  </motion.div>
-                ))}
-              </motion.div>
-            </div>
+                <div className="train-pipeline-left">
+                  <div className="train-pipeline-number">{String(i + 1).padStart(2, '0')}</div>
+                  <div className="train-pipeline-connector" />
+                </div>
 
-            <motion.div
-              initial={{ opacity: 0, x: 30 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.8 }}
-              className="train-card-wrap"
-            >
-              <div className="train-path-card">
-                <div className="train-path-list">
-                  {['Bootcamp', 'Applied Labs', 'Certification'].map((stage, i) => (
-                    <div key={stage} className="train-path-row">
-                      <div className="train-path-pill">{String(i + 1).padStart(2, '0')}</div>
-                      <div className="train-path-bar">
-                        <motion.div
-                          animate={{ x: ['-110%', '230%'] }}
-                          transition={{ duration: 2.9 + i * 0.2, repeat: Infinity, ease: 'linear' }}
-                          className="train-path-sweep"
-                        />
-                      </div>
-                      <div className="train-path-label">{stage}</div>
+                <div className="train-pipeline-body">
+                  <div className="train-pipeline-top">
+                    <div className="train-pipeline-step">{item.step}</div>
+                    <div className="train-pipeline-bar">
+                      <motion.div
+                        animate={{ x: ['-110%', '230%'] }}
+                        transition={{ duration: item.duration, repeat: Infinity, ease: 'linear' }}
+                        className="train-pipeline-sweep"
+                      />
                     </div>
-                  ))}
+                  </div>
+                  <div className="train-pipeline-title">{item.title}</div>
+                  <div className="train-pipeline-detail">{item.detail}</div>
                 </div>
-              </div>
-            </motion.div>
+              </motion.div>
+            ))}
           </div>
         </div>
       </section>
diff --git a/client/src/pages/styles/Communications.css b/client/src/pages/styles/Communications.css
index fe99896..d6d732e 100644
--- a/client/src/pages/styles/Communications.css
+++ b/client/src/pages/styles/Communications.css
@@ -100,12 +100,6 @@
   border: 1px solid rgba(var(--accent-rgb),0.5);
 }
 
-.comms-section-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 3rem;
-  align-items: center;
-}
 
 .comms-section-title {
   font-size: clamp(2rem, 3.4vw, 2.8rem);
@@ -116,82 +110,141 @@
   display: block;
 }
 
-.comms-section-copy {
-  color:var(--text-2);
-  line-height: 1.85;
-  margin-bottom: 2rem;
-}
-
-.comms-channel-list {
+.comms-pipeline-header {
   display: grid;
-  gap: 1rem;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: end;
+  margin-bottom: 3rem;
 }
 
-.comms-channel-card {
-  padding: 1rem 1.25rem;
-  border-radius: 16px;
-  border: 1px solid rgba(var(--accent-rgb),0.12);
-  background: rgba(var(--accent-rgb),0.02);
+.comms-pipeline-copy {
+  color: var(--text-2);
+  line-height: 1.85;
+  font-size: 0.95rem;
+  padding-bottom: 0.25rem;
 }
 
-.comms-channel-title {
-  font-family: var(--font-display);
-  font-weight: 700;
-  color: var(--text-1);
-  margin-bottom: 0.4rem;
+.comms-pipeline-list {
+  display: grid;
+  gap: 0;
 }
 
-.comms-channel-detail {
-  color: var(--text-2);
-  font-size: 0.88rem;
-  line-height: 1.6;
+.comms-pipeline-card {
+  display: flex;
+  gap: 1.75rem;
+  padding: 1.75rem 1rem;
+  border-bottom: 1px solid rgba(var(--accent-rgb), 0.07);
+  border-radius: 12px;
+  cursor: default;
+  transition: background 0.3s;
 }
 
-.comms-stage-card {
-  border-radius: 22px;
-  border: 1px solid rgba(var(--accent-rgb),0.14);
-  background: rgba(var(--accent-rgb),0.025);
-  padding: 2rem;
+.comms-pipeline-card:first-child {
+  border-top: 1px solid rgba(var(--accent-rgb), 0.07);
 }
 
-.comms-stage-list {
-  display: grid;
-  gap: 1.25rem;
+.comms-pipeline-card:hover {
+  background: rgba(var(--accent-rgb), 0.025);
 }
 
-.comms-stage-row {
+.comms-pipeline-left {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 1rem;
+  flex-shrink: 0;
 }
 
-.comms-stage-pill {
-  width: 56px;
-  height: 56px;
-  border-radius: 14px;
-  border: 1px solid rgba(var(--accent-rgb),0.25);
+.comms-pipeline-number {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid rgba(var(--accent-rgb), 0.3);
+  background: rgba(var(--accent-rgb), 0.05);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent);
   font-family: var(--font-mono);
-  font-size: 0.7rem;
-  letter-spacing: 0.1em;
+  font-size: 0.68rem;
+  letter-spacing: 0.06em;
+  flex-shrink: 0;
+  transition: background 0.3s, border-color 0.3s;
+}
+
+.comms-pipeline-card:hover .comms-pipeline-number {
+  background: rgba(var(--accent-rgb), 0.12);
+  border-color: rgba(var(--accent-rgb), 0.55);
+}
+
+.comms-pipeline-connector {
+  width: 1px;
+  flex: 1;
+  background: rgba(var(--accent-rgb), 0.1);
+  margin: 6px 0;
+}
+
+.comms-pipeline-card:last-child .comms-pipeline-connector {
+  display: none;
+}
+
+.comms-pipeline-body {
+  flex: 1;
+  padding-top: 0.5rem;
+  padding-bottom: 0.25rem;
+}
+
+.comms-pipeline-top {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.65rem;
+}
+
+.comms-pipeline-step {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--accent);
+  white-space: nowrap;
+  opacity: 0.75;
 }
 
-.comms-stage-bar {
+.comms-pipeline-bar {
   flex: 1;
-  height: 8px;
+  height: 3px;
   border-radius: 999px;
-  background: rgba(var(--accent-rgb),0.08);
+  background: rgba(var(--accent-rgb), 0.07);
   position: relative;
   overflow: hidden;
 }
 
-.comms-stage-sweep {
+.comms-pipeline-sweep {
   position: absolute;
   inset: 0;
-  width: 45%;
-  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.1), rgba(var(--accent-rgb),0.6), rgba(var(--accent-rgb),0.1));
+  width: 40%;
+  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55), transparent);
+}
+
+.comms-pipeline-title {
+  font-family: var(--font-display);
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 0.4rem;
+}
+
+.comms-pipeline-detail {
+  color: var(--text-2);
+  font-size: 0.87rem;
+  line-height: 1.65;
+}
+
+@media (max-width: 900px) {
+  .comms-pipeline-header {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
 }
 
diff --git a/client/src/pages/styles/Home.css b/client/src/pages/styles/Home.css
index 835a456..a73891e 100644
--- a/client/src/pages/styles/Home.css
+++ b/client/src/pages/styles/Home.css
@@ -309,7 +309,7 @@
 
 .home-service-visual-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: 1.25rem;
   margin-bottom: 1.5rem;
 }
diff --git a/client/src/pages/styles/ProjectManagement.css b/client/src/pages/styles/ProjectManagement.css
deleted file mode 100644
index 2421c74..0000000
--- a/client/src/pages/styles/ProjectManagement.css
+++ /dev/null
@@ -1,176 +0,0 @@
-.pm-hero {
-  padding-top: 120px;
-  position: relative;
-}
-
-.pm-hero-container {
-  position: relative;
-  z-index: 2;
-}
-
-.pm-hero-grid {
-  display: grid;
-  grid-template-columns: 1.05fr 0.95fr;
-  gap: 3.5rem;
-  align-items: center;
-}
-
-.pm-hero-title {
-  font-size: clamp(2.6rem, 4.6vw, 4rem);
-  line-height: 1.05;
-  margin-bottom: 1.5rem;
-}
-
-.pm-title-break {
-  display: block;
-}
-
-.pm-hero-copy {
-  color: var(--text-2);
-  line-height: 1.9;
-  max-width: 560px;
-  margin-bottom: 2rem;
-}
-
-.pm-hero-actions {
-  display: flex;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.pm-card-wrap {
-  position: relative;
-}
-
-.pm-card {
-  padding: 2.5rem;
-  border-radius: 22px;
-  border: 1px solid rgba(var(--accent-rgb),0.12);
-  background: rgba(var(--accent-rgb),0.02);
-  position: relative;
-  overflow: hidden;
-}
-
-.pm-card-grid {
-  opacity: 0.35;
-}
-
-.pm-card-shift {
-  transition: transform 0.15s ease;
-}
-
-.pm-card-svg {
-  width: 100%;
-  height: 100%;
-}
-
-.pm-scan-line {
-  position: absolute;
-  bottom: 58px;
-  left: 0;
-  height: 8px;
-  width: 220px;
-  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.5), transparent);
-}
-
-.pm-section-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 3rem;
-  align-items: center;
-}
-
-.pm-section-title {
-  font-size: clamp(2rem, 3.4vw, 2.8rem);
-  margin-bottom: 1.25rem;
-}
-
-.pm-section-title-break {
-  display: block;
-}
-
-.pm-section-copy {
-  color: var(--text-2);
-  line-height: 1.85;
-  margin-bottom: 2rem;
-}
-
-.pm-governance-list {
-  display: grid;
-  gap: 1rem;
-}
-
-.pm-governance-card {
-  padding: 1rem 1.25rem;
-  border-radius: 16px;
-  border: 1px solid rgba(var(--accent-rgb),0.12);
-  background: rgba(var(--accent-rgb),0.02);
-}
-
-.pm-governance-title {
-  font-family: var(--font-display);
-  font-weight: 700;
-  color: var(--text);
-  margin-bottom: 0.4rem;
-}
-
-.pm-governance-detail {
-  color: var(--text-2);
-  font-size: 0.88rem;
-  line-height: 1.6;
-}
-
-.pm-path-card {
-  border-radius: 22px;
-  border: 1px solid rgba(var(--accent-rgb),0.14);
-  background: rgba(var(--accent-rgb),0.025);
-  padding: 2rem;
-}
-
-.pm-path-list {
-  display: grid;
-  gap: 1.1rem;
-}
-
-.pm-path-row {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.pm-path-pill {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  border: 1px solid rgba(var(--accent-rgb),0.4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--accent);
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-}
-
-.pm-path-bar {
-  flex: 1;
-  height: 6px;
-  border-radius: 999px;
-  background: rgba(var(--accent-rgb),0.08);
-  position: relative;
-  overflow: hidden;
-}
-
-.pm-path-sweep {
-  position: absolute;
-  inset: 0;
-  width: 45%;
-  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.5), transparent);
-}
-
-.pm-path-label {
-  min-width: 92px;
-  color: var(--text-2);
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-  letter-spacing: 0.12em;
-}
diff --git a/client/src/pages/styles/RemoteSensing.css b/client/src/pages/styles/RemoteSensing.css
index b22a7cc..d5be463 100644
--- a/client/src/pages/styles/RemoteSensing.css
+++ b/client/src/pages/styles/RemoteSensing.css
@@ -207,12 +207,6 @@
   position: relative;
 }
 
-.rs-section-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 3rem;
-  align-items: center;
-}
 
 .rs-section-title {
   font-size: clamp(2rem, 3.4vw, 2.8rem);
@@ -223,93 +217,143 @@
   display: block;
 }
 
-.rs-section-copy {
-  color:var(--text-2);
-  line-height: 1.85;
-  margin-bottom: 2rem;
-}
-
-.rs-capability-list {
+.rs-pipeline-header {
   display: grid;
-  gap: 1rem;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: end;
+  margin-bottom: 3rem;
 }
 
-.rs-capability-card {
-  padding: 1rem 1.25rem;
-  border-radius: 16px;
-  border: 1px solid rgba(var(--accent-rgb),0.12);
-  background: rgba(var(--accent-rgb),0.02);
+.rs-pipeline-copy {
+  color: var(--text-2);
+  line-height: 1.85;
+  font-size: 0.95rem;
+  padding-bottom: 0.25rem;
 }
 
-.rs-capability-title {
-  font-family: var(--font-display);
-  font-weight: 700;
-  color: var(--text-1);
-  margin-bottom: 0.4rem;
+.rs-pipeline-list {
+  display: grid;
+  gap: 0;
 }
 
-.rs-capability-detail {
-  color:var(--text-2);
-  font-size: 0.88rem;
-  line-height: 1.6;
+.rs-pipeline-card {
+  display: flex;
+  gap: 1.75rem;
+  padding: 1.75rem 0;
+  border-bottom: 1px solid rgba(var(--accent-rgb), 0.07);
+  cursor: default;
+  transition: background 0.3s;
+  border-radius: 12px;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
-.rs-stage-card {
-  border-radius: 22px;
-  border: 1px solid rgba(var(--accent-rgb),0.14);
-  background: rgba(var(--accent-rgb),0.025);
-  padding: 2rem;
+.rs-pipeline-card:first-child {
+  border-top: 1px solid rgba(var(--accent-rgb), 0.07);
 }
 
-.rs-stage-list {
-  display: grid;
-  gap: 3rem;
+.rs-pipeline-card:hover {
+  background: rgba(var(--accent-rgb), 0.025);
 }
 
-.rs-stage-row {
+.rs-pipeline-left {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 1rem;
+  gap: 0;
+  flex-shrink: 0;
 }
 
-.rs-stage-number {
-  width: 36px;
-  height: 36px;
+.rs-pipeline-number {
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
-  border: 1px solid rgba(var(--accent-rgb),0.4);
+  border: 1px solid rgba(var(--accent-rgb), 0.3);
+  background: rgba(var(--accent-rgb), 0.05);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent);
   font-family: var(--font-mono);
-  font-size: 0.7rem;
+  font-size: 0.68rem;
+  letter-spacing: 0.06em;
+  flex-shrink: 0;
+  transition: background 0.3s, border-color 0.3s;
 }
 
-.rs-stage-bar {
+.rs-pipeline-card:hover .rs-pipeline-number {
+  background: rgba(var(--accent-rgb), 0.12);
+  border-color: rgba(var(--accent-rgb), 0.55);
+}
+
+.rs-pipeline-connector {
+  width: 1px;
+  flex: 1;
+  background: rgba(var(--accent-rgb), 0.1);
+  margin: 6px 0;
+}
+
+.rs-pipeline-card:last-child .rs-pipeline-connector {
+  display: none;
+}
+
+.rs-pipeline-body {
   flex: 1;
-  height: 6px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.25rem;
+}
+
+.rs-pipeline-top {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.65rem;
+}
+
+.rs-pipeline-step {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--accent);
+  white-space: nowrap;
+  opacity: 0.75;
+}
+
+.rs-pipeline-bar {
+  flex: 1;
+  height: 3px;
   border-radius: 999px;
-  background: rgba(var(--accent-rgb),0.08);
+  background: rgba(var(--accent-rgb), 0.07);
   position: relative;
   overflow: hidden;
 }
 
-.rs-stage-sweep {
+.rs-pipeline-sweep {
   position: absolute;
   inset: 0;
-  width: 45%;
-  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.5), transparent);
+  width: 40%;
+  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55), transparent);
 }
 
-.rs-stage-label {
-  min-width: 90px;
-  color:var(--text-2);
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-  letter-spacing: 0.12em;
+.rs-pipeline-title {
+  font-family: var(--font-display);
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 0.4rem;
 }
 
-.rs-stage-align {
-  align-self: end;
-  padding-bottom: 2.2rem;
+.rs-pipeline-detail {
+  color: var(--text-2);
+  font-size: 0.87rem;
+  line-height: 1.65;
 }
+
+@media (max-width: 900px) {
+  .rs-pipeline-header {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
\ No newline at end of file
diff --git a/client/src/pages/styles/Trainings.css b/client/src/pages/styles/Trainings.css
index e5dded2..f9bc586 100644
--- a/client/src/pages/styles/Trainings.css
+++ b/client/src/pages/styles/Trainings.css
@@ -73,12 +73,7 @@
   background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.7), transparent);
 }
 
-.train-section-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 3rem;
-  align-items: center;
-}
+
 
 .train-section-title {
   font-size: clamp(2rem, 3.4vw, 2.8rem);
@@ -89,89 +84,141 @@
   display: block;
 }
 
-.train-section-copy {
-  color: var(--text-2);
-  line-height: 1.85;
-  margin-bottom: 2rem;
-}
 
-.train-module-list {
+.train-pipeline-header {
   display: grid;
-  gap: 1rem;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: end;
+  margin-bottom: 3rem;
 }
 
-.train-module-card {
-  padding: 1rem 1.25rem;
-  border-radius: 16px;
-  border: 1px solid rgba(var(--accent-rgb),0.12);
-  background: rgba(var(--accent-rgb),0.02);
+.train-pipeline-copy {
+  color: var(--text-2);
+  line-height: 1.85;
+  font-size: 0.95rem;
+  padding-bottom: 0.25rem;
 }
 
-.train-module-title {
-  font-family: var(--font-display);
-  font-weight: 700;
-  color: var(--text);
-  margin-bottom: 0.4rem;
+.train-pipeline-list {
+  display: grid;
+  gap: 0;
 }
 
-.train-module-detail {
-  color: var(--text-2);
-  font-size: 0.88rem;
-  line-height: 1.6;
+.train-pipeline-card {
+  display: flex;
+  gap: 1.75rem;
+  padding: 1.75rem 1rem;
+  border-bottom: 1px solid rgba(var(--accent-rgb), 0.07);
+  border-radius: 12px;
+  cursor: default;
+  transition: background 0.3s;
 }
 
-.train-path-card {
-  border-radius: 22px;
-  border: 1px solid rgba(var(--accent-rgb),0.14);
-  background: rgba(var(--accent-rgb),0.025);
-  padding: 2rem;
+.train-pipeline-card:first-child {
+  border-top: 1px solid rgba(var(--accent-rgb), 0.07);
 }
 
-.train-path-list {
-  display: grid;
-  gap: 1.25rem;
+.train-pipeline-card:hover {
+  background: rgba(var(--accent-rgb), 0.025);
 }
 
-.train-path-row {
+.train-pipeline-left {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 1rem;
+  flex-shrink: 0;
 }
 
-.train-path-pill {
-  width: 46px;
-  height: 46px;
-  border-radius: 12px;
-  border: 1px solid rgba(var(--accent-rgb),0.25);
+.train-pipeline-number {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid rgba(var(--accent-rgb), 0.3);
+  background: rgba(var(--accent-rgb), 0.05);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent);
   font-family: var(--font-mono);
-  font-size: 0.7rem;
-  letter-spacing: 0.1em;
+  font-size: 0.68rem;
+  letter-spacing: 0.06em;
+  flex-shrink: 0;
+  transition: background 0.3s, border-color 0.3s;
+}
+
+.train-pipeline-card:hover .train-pipeline-number {
+  background: rgba(var(--accent-rgb), 0.12);
+  border-color: rgba(var(--accent-rgb), 0.55);
+}
+
+.train-pipeline-connector {
+  width: 1px;
+  flex: 1;
+  background: rgba(var(--accent-rgb), 0.1);
+  margin: 6px 0;
+}
+
+.train-pipeline-card:last-child .train-pipeline-connector {
+  display: none;
+}
+
+.train-pipeline-body {
+  flex: 1;
+  padding-top: 0.5rem;
+  padding-bottom: 0.25rem;
+}
+
+.train-pipeline-top {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.65rem;
+}
+
+.train-pipeline-step {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--accent);
+  white-space: nowrap;
+  opacity: 0.75;
 }
 
-.train-path-bar {
+.train-pipeline-bar {
   flex: 1;
-  height: 8px;
+  height: 3px;
   border-radius: 999px;
-  background: rgba(var(--accent-rgb),0.08);
+  background: rgba(var(--accent-rgb), 0.07);
   position: relative;
   overflow: hidden;
 }
 
-.train-path-sweep {
+.train-pipeline-sweep {
   position: absolute;
   inset: 0;
-  width: 45%;
-  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.5), transparent);
+  width: 40%;
+  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55), transparent);
+}
+
+.train-pipeline-title {
+  font-family: var(--font-display);
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 0.4rem;
 }
 
-.train-path-label {
-  min-width: 90px;
+.train-pipeline-detail {
   color: var(--text-2);
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-  letter-spacing: 0.12em;
+  font-size: 0.87rem;
+  line-height: 1.65;
 }
+
+@media (max-width: 900px) {
+  .train-pipeline-header {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
\ No newline at end of file