Hero image: crop to face, match exact text-stack height

src/css/main.css

@@ -640,8 +640,9 @@ a {
 
 @media (min-width: 1024px) {
   .hero__content {
-    padding-block: var(--space-8);
-    justify-content: center;
+    /* No extra padding — section handles outer breathing room.
+       Image will be exactly the natural height of the text stack. */
+    justify-content: flex-start;
   }
 }
 
@@ -694,10 +695,10 @@ a {
   }
 
   .hero__image img {
-    /* Let the image fill the full height of the content column.
-       aspect-ratio is removed so the image stretches to whatever
-       height the left (text) column naturally takes. */
+    /* Fill the content column height exactly; crop from the top
+       so only Diana's face and shoulders are visible. */
     height: 100%;
+    object-position: center 8%;
     aspect-ratio: unset;
     border-radius: 0;
   }