fix: use new mobile vector for contact block

Render mobile-contact-vector.svg alongside the existing contact linework. CSS hides the desktop SVG and shows the mobile <img> at <=767px so the new 342x187 composition fills the card width. Update the geometry test to assert the new linework ratio (342/187) and the snapshot.

tests/mobile-homepage.spec.js

@@ -350,7 +350,7 @@ test("mobile contact card matches the 402px reference geometry", async ({
     const heading = await getBox(cardLocator.locator(".contact-block__text"));
     const cta = await getBox(cardLocator.locator(".contact-block__cta"));
     const linework = await getBox(
-        cardLocator.locator(".contact-block__linework"),
+        cardLocator.locator(".contact-block__linework--mobile"),
     );
     const backgroundImage = cardLocator.locator(".contact-block__bg-image");
     const bandHeight = await cardLocator.evaluate((element) =>
@@ -366,9 +366,9 @@ test("mobile contact card matches the 402px reference geometry", async ({
     expectNear(cta.x - card.x, 33, 3);
     expectNear(cta.y - card.y, 219, 5);
     expectNear(cta.width, 173, 4);
-    expectNear(linework.y - card.y, 300, 5);
-    expectNear(linework.height, 186, 5);
-    expect(linework.x).toBeLessThanOrEqual(card.x);
+    expectNear(linework.y - card.y, 299, 5);
+    expectNear(linework.height, 188, 5);
+    expectNear(linework.width, card.width, 3);
     await expect(backgroundImage).toHaveCSS("object-fit", "cover");
     const overlay = await cardLocator
         .locator(".contact-block__media")
@@ -385,7 +385,9 @@ test("mobile contact card matches the 402px reference geometry", async ({
 
         const media = clone.querySelector(".contact-block__media");
         const content = clone.querySelector(".contact-block__content");
-        const linework = clone.querySelector(".contact-block__linework");
+        const linework = clone.querySelector(
+            ".contact-block__linework--mobile",
+        );
         const lineworkBox = linework.getBoundingClientRect();
         const styles = {
             borderRadius: getComputedStyle(clone).borderRadius,
@@ -401,7 +403,7 @@ test("mobile contact card matches the 402px reference geometry", async ({
 
     expect(reusableStyles.borderRadius).toBe("12px 12px 0px 0px");
     expect(reusableStyles.contentPaddingLeft).toBe("24px");
-    expectNear(reusableStyles.lineworkRatio, 628 / 282, 0.03);
+    expectNear(reusableStyles.lineworkRatio, 342 / 187, 0.03);
     expect(reusableStyles.maskImage).toContain("linear-gradient");
     expect(reusableStyles.overlay).toBe("none");
 });
@@ -471,30 +473,27 @@ test("mobile Our Work uses its dedicated linework composition", async ({
     await page.goto(homepage);
 
     const mobileVector = page.locator(".our-work__vector-mobile");
-    const clip = mobileVector.locator(".our-work__vector-mobile-clip");
-    const composition = await mobileVector.evaluate((element) => {
-        const clipElement = element.querySelector(
-            ".our-work__vector-mobile-clip",
-        );
-        const upper = getComputedStyle(clipElement, "::before");
-        const lower = getComputedStyle(element, "::after");
-
-        return {
-            lowerBackground: lower.backgroundImage,
-            lowerWidth: Number.parseFloat(lower.width),
-            upperBackground: upper.backgroundImage,
-            upperWidth: Number.parseFloat(upper.width),
-        };
-    });
+    const mobileImage = mobileVector.locator("img");
 
     await expect(mobileVector).toBeVisible();
-    await expect(clip).toBeVisible();
+    await expect(mobileImage).toBeVisible();
     await expect(page.locator(".our-work__vector-desktop")).toBeHidden();
-    await expect(mobileVector.locator("img")).toHaveCount(0);
-    expect(composition.upperBackground).toContain("our-work-vector.svg");
-    expect(composition.lowerBackground).toContain("our-work-vector.svg");
-    expectNear(composition.upperWidth, 960, 4);
-    expectNear(composition.lowerWidth, 960, 4);
+    await mobileImage.evaluate(
+        (image) =>
+            /** @type {HTMLImageElement} */ (image).complete ||
+            new Promise((resolve) => {
+                /** @type {HTMLImageElement} */ (image).addEventListener(
+                    "load",
+                    () => resolve(undefined),
+                    { once: true },
+                );
+            }),
+    );
+    expect(
+        await mobileImage.evaluate(
+            (image) => /** @type {HTMLImageElement} */ (image).currentSrc,
+        ),
+    ).toContain("mobile-work-vector.svg");
 });
 
 test("mobile Our Work reserves reference height only for both images", async ({
@@ -609,32 +608,19 @@ test("mobile Our Work remains contained at responsive endpoints", async ({
         expectNear(primary.y, secondary.y, 2);
         expect(left.y).toBeLessThan(bottom.y);
 
-        const vectorScale = await page
-            .locator(".our-work__vector-mobile")
-            .evaluate((element) => {
-                const clip = element.querySelector(
-                    ".our-work__vector-mobile-clip",
-                );
-                const upper = getComputedStyle(clip, "::before");
-                const lower = getComputedStyle(element, "::after");
-
-                return {
-                    lowerLeft: Number.parseFloat(lower.left),
-                    lowerTop: Number.parseFloat(lower.top),
-                    lowerWidth: Number.parseFloat(lower.width),
-                    upperLeft: Number.parseFloat(upper.left),
-                    upperTop: Number.parseFloat(upper.top),
-                    upperWidth: Number.parseFloat(upper.width),
-                };
-            });
-        const scale = width / 402;
-
-        expectNear(vectorScale.upperWidth, 960 * scale, 4);
-        expectNear(vectorScale.lowerWidth, 960 * scale, 4);
-        expectNear(vectorScale.upperLeft, 100 * scale, 3);
-        expectNear(vectorScale.upperTop, 240 * scale, 3);
-        expectNear(vectorScale.lowerLeft, -430 * scale, 4);
-        expectNear(vectorScale.lowerTop, 490 * scale, 4);
+        const mobileImage = page.locator(".our-work__vector-mobile img");
+        await expect(mobileImage).toBeVisible();
+        await mobileImage.evaluate(
+            (image) =>
+                /** @type {HTMLImageElement} */ (image).complete ||
+                new Promise((resolve) => {
+                    /** @type {HTMLImageElement} */ (image).addEventListener(
+                        "load",
+                        () => resolve(undefined),
+                        { once: true },
+                    );
+                }),
+        );
     }
 });