.classic-hero.reference-hero {
  background: #101b29;
}
.classic-hero.reference-hero .classic-hero-image {
  object-position: center 58%;
}
.classic-hero.reference-hero::after {
  background: linear-gradient(180deg, #07142238 0%, #07142270 28%, #07142264 51%, #07142224 78%, #0714221a 100%);
}
.classic-hero.reference-hero .classic-hero-content {
  min-height: clamp(535px, 42vw, 630px);
  padding-top: 110px;
  padding-bottom: 125px;
}
.classic-hero.reference-hero h1 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.5vw, 24px);
  font: 500 clamp(14px, 4.25vw, 62px)/1.2 "Manrope", Arial, sans-serif;
  letter-spacing: -.045em;
  max-width: 100%;
  margin: 0 0 23px;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 2px 20px #0006;
}
.classic-hero.reference-hero h1 span {
  display: block;
  flex: 0 0 auto;
}
.reference-hero .hero-divider {
  display: block;
  flex: 0 0 auto;
  font-style: normal;
  font-weight: 400;
  font-size: .7em;
  color: #dfc18a;
}
.reference-hero .hero-description {
  font: 400 clamp(14px, 1.2vw, 18px)/1.7 "Manrope", Arial, sans-serif;
  color: #fff;
  max-width: 650px;
  margin: 0;
  text-shadow: 0 1px 10px #0008;
}
.reference-hero .classic-hero-actions {
  margin-top: 30px;
}
.classic-hero.reference-hero .button.gold {
  font: 600 14px/1.4 "Manrope", Arial, sans-serif;
  color: #142638;
  background: #d0ad6b;
  border-color: #d0ad6b;
  padding: 17px 31px;
  min-height: 55px;
  gap: 27px;
  box-shadow: 0 4px 16px #0002;
}
.classic-hero.reference-hero .button.gold:hover {
  background: #e1c28b;
  border-color: #e1c28b;
}
.reference-hero .button:focus-visible {
  outline-color: #fff;
}

@media (max-width: 1050px) {
  .classic-hero.reference-hero .classic-hero-content { min-height: 480px; padding-top: 96px; padding-bottom: 110px; }
}
@media (max-width: 820px) {
  .classic-hero.reference-hero .classic-hero-content { min-height: 425px; padding-top: 81px; padding-bottom: 94px; }
}
@media (max-width: 560px) {
  .classic-hero.reference-hero .classic-hero-content { min-height: 360px; padding-top: 72px; padding-bottom: 82px; }
  .classic-hero.reference-hero .classic-hero-image { object-position: 58% center; }
  .classic-hero.reference-hero::after { background: linear-gradient(180deg, #07142266, #0714228c 50%, #07142247); }
  .classic-hero.reference-hero h1 { gap: 8px; letter-spacing: -.04em; margin-bottom: 21px; }
  .reference-hero .hero-description { font-size: 13px; line-height: 1.7; max-width: 320px; }
  .reference-hero .classic-hero-actions { margin-top: 26px; }
  .classic-hero.reference-hero .button.gold { min-height: 51px; font-size: 13px; padding: 15px 27px; }
}