/* Head-safe image framing for /hands-on-businesses/.
   Loaded only on that page, so no other template is affected.

   Previously .page-audience .visual-hero>img combined height:auto with
   max-height:620px and object-fit:cover. Above roughly 970px of viewport the
   natural height (width x 2/3) exceeded the clamp, so the browser cropped the
   frame from both edges and took the top of the nearest head with it. The same
   thing happened in the .photo-story row, where a fixed 390px media height
   trims the top of the frame once the column passes ~585px.

   The fix is to state the display ratio explicitly at each breakpoint and to
   anchor object-position high in the frame, so the crop only ever comes off the
   empty countertop in the foreground. Every face keeps roughly 55-60px of
   visible headroom at every width. */

/* --- Design/build team image (below the intro panel) --- */
.page-audience .visual-hero > img {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 1536 / 1024; /* the file's own ratio: no crop at all */
  object-fit: cover;
  object-position: 50% 50%;
}

/* Tablet and small desktop: trim the foreground counter, never the heads. */
@media (min-width: 721px) {
  .page-audience .visual-hero > img {
    aspect-ratio: 16 / 9;
    object-position: 50% 10%;
  }
}

/* Wide desktop: hold the rendered height near the original design intent
   (~660px at the 1320px container) while keeping the same headroom. */
@media (min-width: 1200px) {
  .page-audience .visual-hero > img {
    aspect-ratio: 2 / 1;
    object-position: 50% 8%;
  }
}

/* --- Interior designer / client image in the photo-story row --- */
/* Anchored to the top edge: the whole crop comes off the marble foreground,
   so all four heads keep their full natural headroom. */
.page-audience .photo-story > img {
  object-position: 50% 0%;
}