/* Image art direction: each supplied visual keeps its native composition. */
.hero-image img { object-position: 83% center; }

/* HP2 R1: portrait world map; retain the full Taiwan-to-global network. */
.about .image-frame { aspect-ratio: 11 / 12; min-height: 0; }
.about .image-frame img { object-position: center; }

/* HP3: the value-chain canvas needs more vertical room for its five stages. */
.waste { min-height: 820px; }
.waste > img { object-position: center 57%; }

/* HP4: feedstock portfolio is the one deliberately square composition. */
.feedstock-image { aspect-ratio: 1 / 1; min-height: 0; }
.feedstock-image img { object-position: center; }

/* HP5 and HP6 are horizontal process/platform systems, never square crops. */
.technology .image-frame,
.vision .image-frame { aspect-ratio: 16 / 9; min-height: 0; align-self: start; }
.technology .image-frame img,
.vision .image-frame img { object-position: center; }

@media (max-width: 900px) {
  .about .image-frame { aspect-ratio: 11 / 12; }
  .technology .image-frame,
  .vision .image-frame { aspect-ratio: 16 / 9; }
  .feedstock-image { min-height: 0; }
}

@media (max-width: 580px) {
  .hero-image img { object-position: 86% center; }
  .image-frame { min-height: 0; }
  .about .image-frame { aspect-ratio: 11 / 12; }
  .waste { min-height: 760px; }
  .waste > img { object-position: 58% 58%; }
  .feedstock-image { min-height: 0; }
  .technology .image-frame,
  .vision .image-frame { aspect-ratio: 16 / 9; }
}