/* Homepage hero layout and artwork. */
.hero {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  padding-top: 30px;
  overflow: hidden;
}
.hero-main { position: relative; z-index: 3; max-width: 690px; }
.dbhh-lockup {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; text-transform: uppercase;
}
.crown { color: var(--accent); font-family: Georgia, serif; font-size: 22px; line-height: 1; }
.dbhh-name { font: 800 27px var(--heading); letter-spacing: -.04em; color: var(--text); }
.dbhh-tag {
  padding-left: 10px; border-left: 1px solid var(--line);
  font: 500 7px var(--mono); letter-spacing: .14em; color: var(--muted);
}
.eyebrow,
.product-type {
  font: 500 9px var(--mono); letter-spacing: .18em;
  color: var(--accent); text-transform: uppercase;
}
.hero h1 {
  font-family: var(--heading) !important;
  font-size: clamp(48px, 7vw, 92px);
  line-height: .86; letter-spacing: -.055em;
  margin: 9px 0 14px; max-width: 800px;
}
.hero h1 em { font-style: normal; color: var(--body); }
.hero-copy { font-size: 15px; color: var(--body); max-width: 520px; margin: 0 0 16px; }

.hero-road-art {
  position: absolute;
  right: -28px;
  top: 0;
  width: min(54vw, 650px);
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background-image: url('images/rts-front-page-graphic-computer.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  opacity: .96;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 13%, #000 30%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 13%, #000 30%, #000 100%);
}
.hero-road-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9,10,11,.32) 0%, transparent 18%, transparent 78%, rgba(9,10,11,.72) 100%),
    linear-gradient(90deg, rgba(9,10,11,.82) 0%, rgba(9,10,11,.18) 28%, transparent 58%);
  pointer-events: none;
}
.route-line {
  display: flex; align-items: center; gap: 8px;
  position: absolute; right: 1px; bottom: 50px; z-index: 3;
}
.route-line span { width: 40px; height: 1px; background: var(--line); }
.route-line i { width: 5px; height: 5px; border: 1px solid var(--accent); border-radius: 50%; }
.route-line b { margin-left: 5px; color: var(--muted); font: 500 7px var(--mono); letter-spacing: .13em; }

@media(max-width:900px) {
  .hero-main { max-width: 620px; }
  .dbhh-lockup { max-width: 500px; }
  .dbhh-tag { display: none; }
}
@media(max-width:800px) {
  .hero-road-art {
    right: -90px; width: 68vw; opacity: .72;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 22%, #000 45%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 22%, #000 45%, #000 100%);
  }
}
@media(max-width:760px) {
  .hero { min-height: 400px; padding-top: 24px; }
  .hero h1 { font-size: 50px; }
  .hero-copy { font-size: 14px; }
  .dbhh-lockup { margin-bottom: 16px; }
  .dbhh-name { font-size: 24px; }
  .route-line { display: none; }
}