.hero {
  position: relative;
  height: 500px;
  overflow: hidden;
}

.hero--compact {
  height: 320px;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(14, 20, 80, .93) 0%, rgba(28, 43, 140, .74) 50%, rgba(28, 43, 140, .2) 100%);
}

.hero__accent-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(246, 242, 234, .2);
}

.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--page-padding) 52px;
  z-index: 2;
  max-width: 880px;
}

.hero__breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hero__breadcrumb .sep {
  color: rgba(246, 242, 234, .2);
}

.hero__breadcrumb .home {
  color: rgba(246, 242, 234, .4);
}

.hero__breadcrumb .current {
  color: var(--color-blue-accent);
  font-weight: 700;
}

.hero__title {
  font-weight: 800;
  font-size: 68px;
  color: var(--color-cream);
  letter-spacing: -.04em;
  line-height: .92;
  margin-bottom: 16px;
}

.hero__title .muted {
  color: rgba(246, 242, 234, .25);
}

.hero__subcopy {
  font-size: 17px;
  color: rgba(246, 242, 234, .6);
  line-height: 1.75;
  max-width: 580px;
}

@media (max-width: 700px) {
  .hero { height: 420px; }
  .hero__title { font-size: 42px; }
}

/* Homepage hero product shot — sized as an absolute overlay instead of an
   in-flow image so it can fill the panel without feeding back into the grid
   row's auto height (that feedback loop is what previously inflated the
   whole hero, and capping it with a fixed max-height made the bottle look
   shrunk and stranded above the panel's bottom edge). The row now sizes off
   the left column's content only, and the image fills whatever height that
   produces. */
.home-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}