From a761c168022a0aa5ce80c41be9e92466cc52a2a1 Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Sun, 28 Jun 2026 13:35:35 -0500
Subject: [PATCH] fix: anchor mobile hero vector to the viewport

Move the mobile hero <img> out of the .vector container (which is intentionally wider than the viewport to bleed the desktop SVG) so the mobile img anchors to .heroVector's full-width edges. Set width: 100vw, left: 0, bottom: 6.25rem so the 402-wide mobile SVG distributes the linework across the full hero at the 402 reference composition.
---
 views/blocks/homepage-hero/homepage-hero.css | 5 ++++-
 views/blocks/homepage-hero/homepage-hero.php | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/views/blocks/homepage-hero/homepage-hero.css b/views/blocks/homepage-hero/homepage-hero.css
index cb6d5df..3075b02 100644
--- a/views/blocks/homepage-hero/homepage-hero.css
+++ b/views/blocks/homepage-hero/homepage-hero.css
@@ -131,9 +131,12 @@
     }
 
     .homepage-hero .heroVector .hero-vector--mobile {
+        bottom: 6.25rem;
         display: block;
         height: auto;
-        width: 100%;
+        left: 0;
+        position: absolute;
+        width: 100vw;
     }
 
     .homepage-hero .heroMedia img,
diff --git a/views/blocks/homepage-hero/homepage-hero.php b/views/blocks/homepage-hero/homepage-hero.php
index 0b47241..d8ecd14 100644
--- a/views/blocks/homepage-hero/homepage-hero.php
+++ b/views/blocks/homepage-hero/homepage-hero.php
@@ -80,8 +80,8 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
     <div class="heroVector absolute inset-0 z-10">
         <div class="vector absolute bottom-8 w-full">
             <?php get_template_part( 'views/partials/hero-vector' ); ?>
-            <?php get_template_part( 'views/partials/hero-vector-mobile' ); ?>
         </div>
+        <?php get_template_part( 'views/partials/hero-vector-mobile' ); ?>
     </div>
 
     <div class="homepage-hero__location" aria-hidden="true">