#hero {
  background-color: #11161c;
}

.hero-surface {
  background:
    linear-gradient(90deg, rgba(13, 17, 22, .92), rgba(13, 17, 22, .55) 45%, transparent 77%),
    url("./leslies-garage-hero-20261104.webp") center / cover no-repeat;
}

#hero p {
  color: #e1e5e9;
}

@media (max-width: 767px) {
  .hero-surface {
    background:
      linear-gradient(180deg, rgba(13, 17, 22, .24), rgba(13, 17, 22, .83) 50%, #11161c 83%),
      url("./leslies-garage-hero-mobile-20261104.webp") center top / cover no-repeat;
  }
}

#hero-phone-trigger {
  anchor-name: --hero-phone-trigger;
  background-color: rgba(17, 22, 28, .72);
}

#hero-phone-options {
  width: min(18rem, calc(100% - 2rem));
  padding: 0;
  background: #171c22;
  color: #fff;
  border: 1px solid #515760;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
}

@supports (position-area: top) {
  #hero-phone-options {
    position-anchor: --hero-phone-trigger;
    position-area: top;
    margin: 0 0 .5rem;
  }
}

#hero-phone-options a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: .5rem 1rem;
}

#hero-phone-options a + a {
  border-top: 1px solid #515760;
}

#hero-phone-trigger:hover,
#hero-phone-options a:hover {
  background: #282e37;
}

#hero-phone-trigger:focus-visible,
#hero-phone-options a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}