/* NLH v14: the headphone portrait fills the entire hero. */
#top > .hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 28px;
  width: 100%;
  max-width: none;
  min-height: clamp(640px, 50vw, 820px);
  margin: 0;
  padding: 36px clamp(24px, 6.2vw, 106px) 48px;
  overflow: hidden;
  background: #151810;
  color: #f4ebdb;
}

/* Reset both the old grid placement and the 430px/300px size limits. */
#top > .hero > .hero-art {
  display: block;
  position: absolute;
  inset: 0;
  grid-area: auto;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  z-index: 0;
}
#top > .hero > .hero-art img {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 20%;
}
#top > .hero::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(13, 17, 11, .85), rgba(13, 17, 11, .74) 40%, rgba(13, 17, 11, .15) 64%, transparent 80%),
    linear-gradient(0deg, rgba(13, 17, 11, .52), transparent 48%);
}
#top > .hero::after { display: none; }
#top > .hero > .hero-topline,
#top > .hero > .hero-main,
#top > .hero > .hero-bottom {
  position: relative;
  z-index: 2;
  grid-area: auto;
  order: 0;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 620px;
  margin: 0;
  padding: 0;
}
#top > .hero > .hero-topline {
  justify-content: space-between;
  gap: 12px 24px;
  color: #e6ddce;
  font-size: 12px;
  line-height: 1.6;
}
#top > .hero > .hero-main { margin-block: auto; }
#top > .hero .eyebrow { color: #e5c38f; font-size: 14px; line-height: 1.5; }
#top > .hero h1 {
  width: auto;
  max-width: 100%;
  margin: 18px 0 0;
  font-size: clamp(52px, 6vw, 94px);
  line-height: 1.03;
  color: #f4ebdb;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .15);
}
#top > .hero .star-o i { color: #e5c38f; }
#top > .hero > .hero-bottom { border: 0; }
#top > .hero .tagline { color: #eddfc9; }
#top > .hero .hero-description { color: #e2dacb; font-size: 16px; line-height: 1.65; max-width: 34em; }
#top > .hero .hero-cta-stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 22px;
}
#top > .hero .button.primary { background: #ddc198; border-color: #ddc198; color: #20251b; }
#top > .hero .button.primary:hover { background: #ecd8b8; border-color: #ecd8b8; }
#top > .hero .quiet-link { color: #f4ebdb; }
#top > .hero .quiet-link b { color: #e5c38f; }
#top > .hero .scroll-mark { z-index: 2; color: #cfc4b1; }

@media (max-width: 1100px) and (min-width: 761px) {
  #top > .hero > .hero-topline,
  #top > .hero > .hero-main,
  #top > .hero > .hero-bottom { max-width: 54%; }
  #top > .hero h1 { font-size: clamp(48px, 6vw, 66px); }
}

@media (max-width: 760px) {
  #top > .hero { min-height: 780px; padding: 24px 24px 36px; gap: 22px; }
  #top > .hero > .hero-art img { object-position: 64% top; }
  #top > .hero::before {
    background: linear-gradient(180deg, rgba(13, 17, 11, .48), rgba(13, 17, 11, .04) 18%, rgba(13, 17, 11, .18) 28%, rgba(13, 17, 11, .74) 38%, rgba(13, 17, 11, .92) 58%, rgba(13, 17, 11, .97));
  }
  #top > .hero > .hero-topline,
  #top > .hero > .hero-main,
  #top > .hero > .hero-bottom { max-width: none; }
  #top > .hero > .hero-main { margin-top: 210px; margin-bottom: 0; }
  #top > .hero h1 { font-size: clamp(42px, 10.6vw, 72px); line-height: 1.06; }
  #top > .hero .tagline { font-size: 28px; }
  #top > .hero .hero-cta-stack { align-items: flex-start; flex-direction: column; gap: 18px; }
  #top > .hero .button.primary { max-width: 100%; white-space: normal; text-align: center; }
}