.hero-visual {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 34%, rgba(214,173,82,.24), transparent 28%),
    linear-gradient(145deg, #1b5a46 0%, #0c382b 72%);
}

.hero-visual::before {
  content: "";
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  right: -13%;
  top: 4%;
  border: 1px solid rgba(214,173,82,.28);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(214,173,82,.035), 0 0 0 84px rgba(214,173,82,.025);
}

.hero-visual img {
  position: absolute;
  z-index: 1;
  width: 112%;
  max-width: none;
  height: auto;
  right: -9%;
  bottom: 0;
  object-fit: contain;
  object-position: initial;
  mix-blend-mode: normal;
  filter: drop-shadow(0 26px 38px rgba(0,0,0,.28));
}

.hero-visual::after {
  z-index: 1;
  background: linear-gradient(90deg, #0c382b 0%, transparent 24%), linear-gradient(0deg, rgba(7,29,23,.72) 0%, transparent 27%);
  pointer-events: none;
}

@media (max-width: 850px) {
  .hero-visual img { width: 105%; right: -3%; }
}

@media (max-width: 520px) {
  .hero-visual { min-height: 430px; }
  .hero-visual img { width: 130%; right: -15%; }
  .image-note { left: 1rem; right: 1rem; text-align: center; }
}