Home: key visual (figure 59, three zones) replaces the text title in the hero

The hero's "Swarm Lab" h1 now shows the key visual with its name (alt="Swarm Lab").
The image's background box is removed and its viewBox cropped to the drawing, so
it sits on the page colour and aligns with the copy column (max 26rem). The boids
swarm on the right is unchanged.

Author: oguzhan-baser

_sass/_home.scss

@@ -23,6 +23,11 @@
     line-height: 0.98;
     letter-spacing: var(--tracking-display);
   }
+  /* Key visual (figure 59) in place of the text title; its "Swarm Lab" name is part of the image */
+  .hero__title--figure {
+    line-height: 0;
+    img { display: block; width: 100%; max-width: 26rem; height: auto; }
+  }
   .hero__lede {
     max-width: 30rem;
     margin: 0 0 var(--space-m);

images/key-visual/swarm-lab-key-visual.svg

@@ -34,7 +34,7 @@
       </a>
       {%- endif %}
       <p class="eyebrow">UT Austin · Robotics &amp; ML</p>
-      <h1 class="hero__title" id="hero-title">Swarm Lab</h1>
+      <h1 class="hero__title hero__title--figure" id="hero-title"><img src="/images/key-visual/swarm-lab-key-visual.svg" width="917" height="807" alt="Swarm Lab" fetchpriority="high"></h1>
       <p class="hero__lede">We build learning, reasoning, and verification for fleets of robots and AI&nbsp;agents.</p>
       <div class="hero__cta">
         <a class="btn btn--primary" href="/research/">Research <svg class="icon" aria-hidden="true"><use href="#i-arrow-right"/></svg></a>