.hero-image {
  width: min(470px, 100%);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 30px;
  box-shadow: 0 28px 65px rgba(10,43,114,.22);
  border: 7px solid rgba(255,255,255,.88);
  animation: heroPhotoIn .9s .15s both;
}

.hero-visual::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -24px;
  top: -25px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(7,138,136,.2), rgba(155,10,120,.12));
  z-index: -1;
}

@keyframes heroPhotoIn {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@media(max-width:640px){
  .hero-image { width:100%; max-height:520px; border-radius:22px; }
}