/* hero */
.hero { position: relative; background: var(--night); color: var(--cream); overflow: hidden; }
.hero-media { position: relative; }
.hero-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(23,16,16,0) 30%, rgba(23,16,16,.82) 62%, var(--night) 88%);
}
.hero-copy { position: relative; margin-top: -8.5rem; padding: 0 1.25rem 2.75rem; }
.hero h1 { font-size: clamp(2rem, 8.5vw, 3.4rem); line-height: 1.06; max-width: 15ch; }
.hero .hrs { margin: 1rem 0 1rem; font-size: 1.02rem; color: rgba(251, 234, 208, .88); }
.hero .hrs strong { color: var(--gold); font-weight: 600; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-copy > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy > *:nth-child(2) { animation-delay: .12s; }
.hero-copy > *:nth-child(3) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(100svh - 4rem, 820px); }
  .hero-media { order: 2; grid-template-rows: 100%; }
  .hero-media img { height: 100%; aspect-ratio: auto; object-position: 50% 30%; }
  .hero-media::after { background: linear-gradient(to right, var(--night) 0%, rgba(23,16,16,0) 26%); }
  .hero-copy { order: 1; align-self: center; justify-self: center; width: 100%; max-width: 34rem; margin: 0; padding: 3rem 2rem; }
  .hero h1 { font-size: clamp(2.6rem, 4vw, 3.8rem); max-width: 16ch; }
  .hero .hrs { font-size: 1.1rem; }
}