/* The supplied portrait leaves natural negative space for the desktop headline. */
.hero {
  height: clamp(490px, 48vw, 660px);
  background: #080909;
  text-align: left;
  justify-items: start;
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #0005, transparent 70%), linear-gradient(0deg, #080909, transparent 18%);
  pointer-events: none;
}
.hero-content {
  z-index: 2;
  width: 65%;
  padding: 30px 0 40px clamp(28px, 5vw, 72px);
}
.hero h1 { font-size: clamp(44px, 5.5vw, 78px); }
.hero-subheading {
  margin: 12px 0 22px;
  color: #e8e3da;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .08em;
}
.hero .eyebrow { max-width: 680px; font-size: clamp(11px, 1vw, 14px); letter-spacing: 1.6px; line-height: 1.7; text-wrap: balance; }
.hero-actions { justify-content: flex-start; }
.hero-actions .button { padding-inline: 18px; }
.hero .scroll-cue { z-index: 2; left: 50%; transform: translateX(-50%); }
@media (max-width: 1000px) and (min-width: 761px) {
  .hero-content { width: 67%; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { padding-inline: 12px; font-size: 11px; }
  .hero-description { font-size: 18px; }
  .hero .eyebrow { letter-spacing: 1.6px; }
}
@media (max-width: 760px) {
  .hero { height: 710px; align-items: end; text-align: center; }
  .hero-photo { height: 370px; object-position: 74% center; }
  .hero::before { background: linear-gradient(0deg, #080909 0%, #080909 43%, transparent 62%); }
  .hero-content { width: 100%; padding: 0 20px 61px; }
  .hero h1 { font-size: clamp(36px, 9vw, 58px); }
  .hero-subheading { font-size: 22px; margin: 10px 0 19px; letter-spacing: .06em; }
  .hero .eyebrow { max-width: 360px; margin-inline: auto; font-size: 10px; letter-spacing: 1.1px; line-height: 1.8; }
  .hero-description { font-size: 16px; margin: 19px 0 21px; }
  .hero-actions { justify-content: center; }
  .hero .desktop-break { display: none; }
}