.hero {
  height:1024px;
  position:relative;
  overflow:clip
}
.hero__art {
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100%;
  max-width:1800px;
  transform:translateX(-50%);
  pointer-events:none
}
.hero__bottle {
  position:absolute;
  top:146px;
  width:293px;
  height:750px;
  object-fit:contain;
  will-change:transform
}
.hero__bottle--left {
  left:-147px
}
.hero__bottle--right {
  right:-146px
}
.hero__mobile-art {
  display:none
}
.hero__content {
  position:relative;
  padding-top:256px;
  text-align:center
}
.hero h1 {
  font-size:48px;
  line-height:1.28;
  font-weight:700;
  letter-spacing:-.5px
}
.hero h1>span {
  color:var(--red)
}
.hero__tagline {
  font-size:20px;
  font-weight:600;
  color:var(--muted);
  margin-top:6px
}
.hero__actions {
  display:grid;
  grid-template-columns:256px 1px 256px;
  gap:42px;
  align-items:start;
  justify-content:center;
  margin-top:58px
}
.hero__audience {
  padding-top:26px
}
.hero__audience p {
  font-size:20px;
  line-height:1.3
}
.hero__audience strong {
  font-weight:700
}
.hero__audience .button {
  width:100%;
  margin-top:24px
}
.hero__divider {
  height:200px;
  width:1px
}
.hero__discover {
  position:relative;
  display:block;
  width:max-content;
  margin:46px auto 0;
  text-decoration:none;
  font-size:20px;
  line-height:1.3
}
.hero__discover span {
  color:var(--red);
  font-weight:500
}
.hero__discover img {
  margin:4px auto 0;
  animation:cue-bob 2.5s ease-in-out infinite
}
.hero.is-animated .hero__bottle--left {
  animation:bottle-in-left 1.6s var(--ease) both
}
.hero.is-animated .hero__bottle--right {
  animation:bottle-in-right 1.6s .12s var(--ease) both
}
.hero.is-animated h1,.hero.is-animated .hero__tagline,.hero.is-animated .hero__actions {
  animation:hero-in 1s .2s var(--ease) both
}
@keyframes bottle-in-left {
  from {
    transform:translateX(-130px) rotate(-3deg);
    opacity:0
  }
  to {
    transform:none;
    opacity:1
  }
}
@keyframes bottle-in-right {
  from {
    transform:translateX(130px) rotate(3deg);
    opacity:0
  }
  to {
    transform:none;
    opacity:1
  }
}
@keyframes hero-in {
  from {
    opacity:0;
    transform:translateY(18px)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes cue-bob {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(5px)
  }
}
@media(min-width:1600px) {
  .hero__bottle--left {
    left:-100px
  }
  .hero__bottle--right {
    right:-100px
  }
}
@media(max-width:1023px) and (min-width:768px) {
  .hero {
    height:900px
  }
  .hero__bottle--left {
    left:-210px
  }
  .hero__bottle--right {
    right:-210px
  }
  .hero__content {
    padding-top:240px
  }
  .hero h1 {
    font-size:42px
  }
  .hero__actions {
    grid-template-columns:225px 1px 225px;
    gap:26px
  }
  .hero__audience p {
    font-size:18px
  }
}
@media(max-width:767px) {
  .hero {
    height:696px
  }
  .hero__bottle {
    display:none
  }
  .hero__mobile-art {
    display:block;
    position:absolute;
    top:156px;
    left:50%;
    width:310px;
    height:482px;
    transform:translateX(-50%);
    opacity:.2
  }
  .hero__mobile-art img {
    width:310px;
    height:482px;
    object-fit:cover
  }
  .hero__mobile-art::after {
    content:"";
    position:absolute;
    inset:0;
    background:#ffffff99
  }
  .hero__content {
    padding:156px 20px 36px
  }
  .hero h1 {
    font-size:33px;
    line-height:1.1;
    letter-spacing:0;
    white-space:nowrap
  }
  .hero__tagline {
    font-size:16px;
    margin-top:12px
  }
  .hero__actions {
    display:flex;
    flex-direction:column;
    gap:24px;
    margin:34px auto 0;
    padding:16px 0;
    width:230px
  }
  .hero__audience {
    width:100%;
    padding:0
  }
  .hero__audience p {
    font-size:17px;
    line-height:1.4
  }
  .hero__audience .button {
    margin-top:16px
  }
  .hero__divider {
    width:230px;
    height:1px;
    object-fit:cover;
    background:#d8d0c5
  }
  .hero__discover {
    font-size:15px;
    margin-top:26px;
    padding-top:8px
  }
  .hero__discover img {
    margin-top:8px
  }
  .hero.is-animated .hero__mobile-art {
    animation:mobile-bottle-in 1.5s var(--ease) both
  }
}
@media(max-width:374px) {
  .hero h1 {
    font-size:clamp(26px,8.4vw,32px)
  }
}
@keyframes mobile-bottle-in {
  from {
    transform:translate(-50%,28px);
    opacity:0
  }
  to {
    transform:translate(-50%,0);
    opacity:.2
  }
}