/* The two compositions keep every animal visible without cropping the artwork. */
.hero .hero-inner {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 3 / 1;
  background: #1f2d1d;
  isolation: isolate;
}
.hero-art {
  position: absolute;
  inset: 0;
  display: block;
}
.hero .hero-photo {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 1;
}
.hero .hero-shade {
  pointer-events: none;
  background: linear-gradient(90deg, #1f2d1d33, transparent 52%);
}
.hero .hero-copy {
  position: relative;
  z-index: 1;
  max-width: 44%;
  padding: clamp(24px, 3.4vw, 54px);
}
.hero .eyebrow {
  font-size: clamp(7px, .7vw, 10px);
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(32px, 3.3vw, 50px);
  line-height: 1.4;
  margin-bottom: 16px;
}
.hero .hero-description {
  font-size: clamp(10px, .92vw, 13px);
  margin-bottom: 20px;
}
@media (min-width: 801px) and (max-width: 1100px) {
  .hero .hero-copy { max-width: 45%; padding: clamp(24px, 2.7vw, 30px); }
  .hero .eyebrow { font-size: 7px; letter-spacing: 1.4px; margin-bottom: 12px; }
  .hero h1 { font-size: clamp(30px, 3.1vw, 34px); line-height: 1.3; letter-spacing: 1px; margin-bottom: 10px; }
  .hero .hero-description { font-size: 10px; line-height: 1.7; margin-bottom: 12px; }
  .hero .hero-cta { font-size: 10px; padding: 9px 12px; gap: 24px; }
}
@media (max-width: 800px) {
  .hero .hero-inner { height: 560px; aspect-ratio: auto; }
  .hero-art { left: auto; width: 60%; mask-image: linear-gradient(90deg, transparent, #000 8%); }
  .hero .hero-photo { object-fit: cover; object-position: right bottom; }
  .hero .hero-copy { max-width: 58%; padding: 34px 30px; }
  .hero .hero-shade { background: linear-gradient(180deg, #1f2d1d66, transparent 45%); }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1.5px; margin-bottom: 19px; }
  .hero h1 { font-size: 36px; letter-spacing: 1.5px; }
  .hero .hero-description { font-size: 11px; line-height: 1.8; }
}
@media (max-width: 560px) {
  .hero .hero-inner { height: auto; aspect-ratio: 4 / 7; min-height: 580px; max-height: 720px; }
  .hero-art { left: 0; width: 100%; mask-image: none; }
  .hero .hero-photo { object-fit: contain; object-position: center bottom; }
  .hero .hero-copy { max-width: 100%; padding: 30px 26px; }
  .hero .eyebrow { font-size: 7px; letter-spacing: 1.6px; }
  .hero h1 { font-size: 37px; }
  .hero .hero-description { margin-bottom: 19px; }
}
@media (max-width: 360px) {
  .hero .hero-copy { padding-inline: 24px; }
  .hero h1 { font-size: 32px; }
  .hero .hero-description { font-size: 10px; }
}