From 1bc0224f76f1ac3a0e09759f2a1876a91aa6c001 Mon Sep 17 00:00:00 2001
From: Jeffrey Hales <committable@bluechip.icu>
Date: Tue, 9 Jun 2026 14:47:36 -0700
Subject: [PATCH] feat(process): equal-height cards with hover scale effect

Equalizes all six process cards to the tallest card's height via a
resize-aware script. Adds scale(1.05) hover transition matching the
live site. Adjusts card padding and icon sizing; shortens two step
labels for better card balance.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 www/src/components/home/HomeProcess.astro | 11 +++++++++++
 www/src/content/pages/en/index.md         |  4 ++--
 www/src/styles/components.css             |  5 +++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/www/src/components/home/HomeProcess.astro b/www/src/components/home/HomeProcess.astro
index 54f5821..0d1fca8 100644
--- a/www/src/components/home/HomeProcess.astro
+++ b/www/src/components/home/HomeProcess.astro
@@ -16,3 +16,14 @@ const { section } = Astro.props;
     </div>
   </div>
 </section>
+
+<script>
+  function equalizeProcessCards() {
+    const cards = [...document.querySelectorAll('.process-grid > div')] as HTMLElement[];
+    cards.forEach(c => (c.style.height = ''));
+    const max = Math.max(...cards.map(c => c.offsetHeight));
+    if (max > 0) cards.forEach(c => (c.style.height = `${max}px`));
+  }
+  equalizeProcessCards();
+  window.addEventListener('resize', equalizeProcessCards);
+</script>
diff --git a/www/src/content/pages/en/index.md b/www/src/content/pages/en/index.md
index 6c0e191..22e727a 100644
--- a/www/src/content/pages/en/index.md
+++ b/www/src/content/pages/en/index.md
@@ -115,9 +115,9 @@ sections:
       - icon: learner-journey-step-2.svg
         label: Speak with a Client Advocate
       - icon: learner-journey-step-3.svg
-        label: Fill and Sign a Client Intake Packet
+        label: Fill and Sign an Intake Packet
       - icon: learner-journey-step-4.svg
-        label: Verify Billing and Insurance Information and Benefits
+        label: Verify Billing and Insurance
       - icon: learner-journey-step-5.svg
         label: Schedule an Assessment
       - icon: learner-journey-step-6.svg
diff --git a/www/src/styles/components.css b/www/src/styles/components.css
index b41737e..46c4950 100644
--- a/www/src/styles/components.css
+++ b/www/src/styles/components.css
@@ -128,8 +128,9 @@
 .esa-grid img { max-height: 170px; justify-self: center; }
 .process-section h2, .testimonial-section h2 { text-align: center; }
 .process-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
-.process-grid div { background: white; min-height: 190px; padding: 2rem 1rem; text-align: center; }
-.process-grid img { margin: 0 auto 1rem; width: 72px; }
+.process-grid div { background: white; min-height: 190px; padding: 3.2rem 1rem; position: relative; text-align: center; transition: transform .3s ease-in-out; }
+.process-grid div:hover { transform: scale(1.05); z-index: 1; }
+.process-grid img { margin: 0 auto 1rem; width: 42%; }
 .director-card { align-items: center; display: flex; gap: 1.5rem; }
 .director-card img { max-height: 260px; width: auto; }
 .signature { max-width: 270px; }