.hero { background: #1d3f35; }
.hero::before, .hero::after { border: 1px solid rgba(243, 185, 40, .35); border-radius: 50%; content: ""; position: absolute; z-index: -1; }
.hero::before { height: 620px; right: -160px; top: -180px; width: 620px; }
.hero::after { height: 360px; left: 44%; top: 150px; width: 360px; }
.hero-image { display: block; background: linear-gradient(90deg, rgba(12, 22, 18, .83) 0%, rgba(12, 22, 18, .58) 42%, rgba(12, 22, 18, .13) 75%), url("assets/hero-restaurant-table.jpg") center / cover no-repeat; }
.hero-content {
  position: relative;
  max-width: 1050px;
}
.hero h1 {
  font-size: clamp(48px, 5.5vw, 84px);
  white-space: nowrap;
}
.site-header { height: 112px; }
.hero { min-height: calc(100vh - 112px); }
.site-header .brand { font-size: 40px; gap: 10px; letter-spacing: -2px; }
.site-header .brand-mark { font-size: 33px; height: 56px; width: 56px; }
.site-header .brand em { font-size: 12px; letter-spacing: 2px; margin-bottom: 6px; }
@media (max-width: 760px) { .site-header { height: 88px; } .hero { min-height: calc(100vh - 88px); } .site-header .brand { font-size: 30px; } .site-header .brand-mark { height: 42px; width: 42px; font-size: 25px; } }
@media (max-width: 760px) { .hero h1 { white-space: normal; } }