/* Hero overrides: readable before web fonts finish swapping, at every viewport. */
.hero {
  min-height: min(790px, calc(100svh - var(--header-height)));
  background-color: #321316;
}

.hero-image {
  transform: scale(1.04);
  will-change: auto;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(25, 9, 12, .96) 0%, rgba(35, 12, 16, .91) 43%, rgba(38, 14, 18, .5) 72%, rgba(30, 13, 15, .3) 100%),
    linear-gradient(0deg, rgba(28, 12, 14, .68), transparent 58%);
}

.hero-content {
  padding-block: clamp(56px, 6.2vw, 82px);
}

.hero-eyebrow {
  color: #ffd0c5;
}

.hero-title {
  max-width: 960px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(50px, 6.5vw, 84px);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.hero-title em {
  color: #ffd0c5;
}

.hero-lead {
  color: rgba(255, 250, 243, .94);
}

.hero-content > .button,
.hero-actions > .button {
  min-height: 56px;
}

@media (max-width: 767px) {
  .hero {
    min-height: calc(100svh - var(--header-height));
  }

  .hero-image {
    object-position: 61% center;
    transform: scale(1.02);
  }

  .hero-shade {
    background:
      linear-gradient(90deg, rgba(25, 9, 12, .86), rgba(35, 12, 16, .8) 68%, rgba(35, 12, 16, .68)),
      linear-gradient(0deg, rgba(28, 12, 14, .75), rgba(28, 12, 14, .2) 62%);
  }

  .hero-content {
    padding-block: 64px 100px;
  }

  .hero-title {
    max-width: 840px;
    font-size: clamp(36px, 10vw, 50px);
    line-height: 1.08;
    letter-spacing: -.025em;
    text-wrap: pretty;
  }

  .hero-lead {
    margin-top: 18px;
    font-size: 15px;
  }

  .hero-proof {
    margin-top: 24px;
  }
}

@media (max-width: 380px) {
  .hero-title {
    font-size: clamp(34px, 10.5vw, 40px);
  }
}