fix: use new mobile vector for hero

Add hero-vector-mobile.php that renders mobile-hero-vector.svg alongside the existing desktop hero partial. The homepage-hero.css hides the desktop SVG and shows the mobile <img> below 768px while preserving every other mobile rule.

views/blocks/homepage-hero/homepage-hero.css

@@ -33,6 +33,10 @@
 
         svg {
         }
+
+        .hero-vector--mobile {
+            display: none;
+        }
     }
 
     .intro {
@@ -122,6 +126,16 @@
         width: var(--hero-vector-width);
     }
 
+    .homepage-hero .heroVector .vector > svg {
+        display: none;
+    }
+
+    .homepage-hero .heroVector .hero-vector--mobile {
+        display: block;
+        height: auto;
+        width: 100%;
+    }
+
     .homepage-hero .heroMedia img,
     .homepage-hero .heroMedia video {
         object-position: 58% center;

views/blocks/homepage-hero/homepage-hero.php

@@ -80,6 +80,7 @@ $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>
     </div>
 

views/partials/hero-vector-mobile.php

@@ -0,0 +1 @@
+<img class="hero-vector--mobile" src="<?php echo esc_url( get_theme_file_uri( '/static/img/mobile-hero-vector.svg' ) ); ?>" alt="" loading="lazy" role="presentation" />