From bdf78d58ac71acf81569cd5826e568121992c32b Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Sat, 27 Jun 2026 17:46:58 -0500
Subject: [PATCH] fix: align mobile hero vector crop

---
 tests/mobile-homepage.spec.js                | 9 +++++----
 views/blocks/homepage-hero/homepage-hero.css | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/tests/mobile-homepage.spec.js b/tests/mobile-homepage.spec.js
index 91924aa..8b308f8 100644
--- a/tests/mobile-homepage.spec.js
+++ b/tests/mobile-homepage.spec.js
@@ -40,6 +40,9 @@ test("mobile hero matches the 402px reference composition", async ({
 
     const hero = await getBox(page.locator(".homepage-hero"));
     const heading = await getBox(page.locator(".homepage-hero .intro h1"));
+    const vector = await getBox(
+        page.locator(".homepage-hero .heroVector .vector"),
+    );
     const buttons = page.locator(".homepage-hero .reset .button");
     const firstButton = await getBox(buttons.nth(0));
     const secondButton = await getBox(buttons.nth(1));
@@ -47,14 +50,12 @@ test("mobile hero matches the 402px reference composition", async ({
     expectNear(hero.height, 752, 8);
     expectNear(heading.x, 32, 3);
     expect(heading.width).toBeGreaterThanOrEqual(330);
+    expectNear(vector.x, -414, 8);
     expectNear(firstButton.y, secondButton.y, 2);
     expectNear(firstButton.width, 148, 4);
     expectNear(secondButton.width, 156, 4);
 
-    const location = page.locator(".homepage-hero__location");
-    if ((await location.count()) > 0) {
-        await expect(location).toBeVisible();
-    }
+    await expect(page.locator(".homepage-hero__location")).toBeVisible();
 });
 
 test("mobile hero CTAs remain fully visible at 320px", async ({ page }) => {
diff --git a/views/blocks/homepage-hero/homepage-hero.css b/views/blocks/homepage-hero/homepage-hero.css
index ba59167..72a570a 100644
--- a/views/blocks/homepage-hero/homepage-hero.css
+++ b/views/blocks/homepage-hero/homepage-hero.css
@@ -112,7 +112,7 @@
 
     .homepage-hero .heroVector .vector {
         bottom: 6.25rem;
-        left: 50%;
+        left: -8%;
         transform: translateX(-50%);
         width: clamp(43rem, 190vw, 48rem);
     }