/* V24: Oak-inspired ivory homepage hero, with Dreambooth's own content. */
main > .hero {
  background: #f1ebe2 !important;
  color: #111 !important;
}
main > .hero .hero-text h1 {
  font-family: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
  line-height: .91 !important;
  overflow-wrap: normal !important;
}
main > .hero .hero-text > p {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -.025em !important;
}
main > .hero .hero-text .btn {
  background: #000 !important;
  color: #fff !important;
  border-radius: 999px !important;
  text-align: center !important;
  padding: 23px 35px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  min-width: min(100%, 340px);
  transition: background .2s ease;
}
main > .hero .hero-text .btn:hover { background: #292929 !important; }
@media (min-width: 901px) {
  main > .hero {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr) !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 670px !important;
    padding: 42px clamp(25px, 4vw, 80px) 70px !important;
  }
  main > .hero .hero-text {
    padding: 55px clamp(20px, 3vw, 55px) 55px 0 !important;
  }
  main > .hero .hero-text h1 {
    font-size: clamp(59px, 5.25vw, 105px) !important;
    margin: 0 0 40px !important;
  }
  main > .hero .hero-text > p {
    font-size: clamp(13px, 1.15vw, 19px) !important;
    white-space: nowrap !important;
  }
  main > .hero .hero-text .btn { margin-top: 26px !important; }
  main > .hero #hero-photo {
    height: clamp(450px, 40vw, 670px) !important;
    min-height: 0 !important;
  }
}
@media (max-width: 900px) and (min-width: 801px) {
  main > .hero .hero-text h1 { font-size: clamp(48px, 6vw, 66px) !important; }
  main > .hero .hero-text > p { font-size: 12px !important; white-space: nowrap !important; }
}
@media (max-width: 800px) {
  main > .hero .hero-text { padding: 64px 6% 54px !important; }
  main > .hero .hero-text h1 {
    font-size: clamp(48px, 11.2vw, 78px) !important;
    line-height: .94 !important;
    margin: 0 auto 35px !important;
  }
  main > .hero .hero-text > p {
    font-size: clamp(10px, 2.6vw, 15px) !important;
    white-space: nowrap !important;
    margin: 0 auto 24px !important;
  }
  main > .hero .hero-text .btn {
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 30px auto 0 !important;
    padding: 22px 14px !important;
    font-size: clamp(12px, 3.4vw, 16px) !important;
  }
}