.hero {
  min-height: 500px;
  height: min(650px, calc(100svh - 215px));
  border-bottom: 1px solid #8f704b;
}
.hero-media { z-index: 0; height: 100%; mask-image: none; object-position: center; filter: none; }
.hero-overlay {
  z-index: 1;
  background: linear-gradient(90deg, #100e0ccc 0%, #100e0cb3 30%, #100e0c70 45%, transparent 68%),
    linear-gradient(0deg, #10111130, transparent 25%);
}
.hero-content { position: relative; z-index: 2; padding-block: 55px; }
.hero-content :is(h1, p) { text-shadow: 0 2px 12px #0009; }
.hero h1 { max-width: 650px; font-size: 72px; line-height: 1.13; }
.hero-name-prefix {
  display: block;
  margin-bottom: 2px;
  color: #f5ead5;
  font: inherit;
}
.hero h1 em { display: block; color: #f3cf95; }
.hero-subtitle {
  max-width: 565px;
  margin-top: 26px;
  color: #fff7ec;
  font: 500 25px/1.5 var(--serif);
}
.hero .positioning { max-width: 535px; margin-top: 21px; color: #eee6da; line-height: 1.9; }
.hero-actions { align-items: center; gap: 23px; margin-top: 32px; }
.hero-actions .button { min-height: 50px; padding: 13px 20px; }
.hero-actions .button:not(.button-outline) {
  background: #e4b875;
  border-color: #f1d8b1;
  box-shadow: 0 4px 20px #0003;
}
.hero-actions .button:not(.button-outline):hover { background: #f0d7b0; }
.hero-actions .button-outline {
  min-width: 185px;
  border-color: #c6a16a;
  border-radius: 3px;
  background: #1011113d;
  color: #efe1c9;
}
.hero-actions .button-outline:hover { background: #10111185; border-color: #e4c493; color: #f7ddb4; }
.hero-actions .icon { width: 19px; height: 19px; }
@media (max-width: 1100px) and (min-width: 601px) {
  .hero h1 { font-size: 60px; max-width: 550px; }
  .hero-subtitle { max-width: 430px; font-size: 22px; }
  .hero-overlay { background: linear-gradient(90deg, #101111f5, #101111c7 34%, #10111142 70%, transparent); }
}
@media (max-width: 600px) {
  .hero { height: auto; min-height: min(570px, calc(100svh - 190px)); align-items: flex-end; }
  .hero-media { object-position: center; }
  .hero-overlay { background: linear-gradient(0deg, #101111 1%, #101111f2 27%, #101111a8 53%, #1011110d 90%); }
  .hero-content { padding-top: 150px; padding-bottom: 34px; }
  .hero h1 { font-size: 44px; line-height: 1.18; max-width: none; }
  .hero-name-prefix { font-size: 40px; margin-bottom: 3px; }
  .hero-subtitle { font-size: 20px; line-height: 1.5; margin-top: 19px; max-width: 350px; }
  .hero .positioning { font-size: 14px; line-height: 1.8; margin-top: 13px; max-width: 350px; }
  .hero-actions { flex-wrap: wrap; gap: 10px; margin-top: 25px; }
  .hero-actions .button { font-size: 12px; min-height: 46px; padding: 11px 14px; gap: 8px; }
  .hero-actions .button-outline { min-width: 0; padding-inline: 12px; }
  .hero-actions .icon { width: 17px; height: 17px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 38px; }
  .hero-name-prefix { font-size: 35px; }
  .hero-actions { column-gap: 12px; }
  .hero-actions .button { padding-inline: 11px; font-size: 11px; }
  .hero-actions .button-outline { padding-inline: 11px; }
}