/* <picture> wraps each photo so phones get the smaller WebP; it must behave like the image. */
.hero picture, .about-strip picture { display: block; }
/* Kevin's photo beside the hero on topic pages (2026-10-21). Shared by every page that has one. */
/* Phones: the buttons stay on the first screen; the photo comes right after them. */
.hero.has-photo .wrap { display: flex; flex-direction: column; }
.hero.has-photo .hero__photo { order: 2; margin: 32px 0 0; max-width: 520px; }
.hero.has-photo .hero__photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 18%;
  border-radius: 18px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 48px rgba(0,0,0,.35);
}
@media (min-width: 1000px) {
  .hero.has-photo .wrap {
    max-width: 1120px; display: grid; flex-direction: initial; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: center;
  }
  .hero.has-photo .hero__text { grid-column: 1; grid-row: 1; }
  .hero.has-photo .hero__photo { grid-column: 2; grid-row: 1; margin: 0; max-width: none; }
  .hero.has-photo .hero__photo img { aspect-ratio: 4 / 5; object-position: center; border-radius: 22px; }
}
/* Business page: its hero is a flex row. */
.hero .hero__photo--biz { position: relative; z-index: 1; margin: 0; flex: 0 0 360px; margin-left: auto; }
.hero .hero__photo--biz img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 22px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
@media (max-width: 1099px) {
  .hero.has-photo-biz { flex-direction: column; align-items: flex-start; }
  .hero .hero__photo--biz { flex: none; width: 100%; max-width: 520px; margin: 32px 0 0; }
  .hero .hero__photo--biz img { aspect-ratio: 16 / 10; object-position: center 18%; border-radius: 18px; }
}