/* Display-only crop of the user's untouched 3024 × 4032 garden photograph.
   Crop measured on its 1368 × 1824 display: x=290, y=1050, size=420.
   Percentage sizing keeps the same head-and-shoulders framing at every size. */
.hero-photo { position: relative; }
.hero-photo img {
  position: absolute;
  width: 325.714286%;
  max-width: none;
  height: auto;
  left: -69.047619%;
  top: -250%;
  object-fit: initial;
}

/* Rests on the wide garden shot and pushes in to the crop above on hover
   (or on tap, via .is-zoomed, where there is no hover). The origin is the face
   centre (1101, 2690 in the source); scale(.5) is the widest framing that still
   covers the circle. */
.hero-photo img {
  transform: scale(.5);
  transform-origin: 36.4% 66.7%;
  transition: transform .8s cubic-bezier(.65, 0, .25, 1);
}
.hero-photo { cursor: zoom-in; }
.hero-photo.is-zoomed { cursor: zoom-out; }
.hero-photo.is-zoomed img { transform: scale(1); }
@media (hover: hover) {
  .hero-photo:hover img { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo img { transition: none; }
}