/* The transparent product image places the emission origin at the nozzle. */
.hero-product{position:absolute;left:52%;bottom:-45px;width:460px;aspect-ratio:2/3;transform:translateX(-50%);z-index:3;padding:0;border:0;background:none;pointer-events:none;direction:ltr}
.hero-product>img{position:relative;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.product-shadow{position:absolute;left:17%;bottom:17.7%;width:65%;height:18px;border-radius:50%;background:#000;filter:blur(10px);opacity:.65}
.spray-origin{position:absolute;left:44%;top:20.1%;width:1px;height:1px;pointer-events:none}
.hero-mist{z-index:4;mask-image:none;overflow:hidden}.hero-mist canvas{display:block;width:100%;height:100%;pointer-events:none}
.hero-shade{background:linear-gradient(90deg,transparent 32%,rgba(0,0,0,.07) 50%,rgba(0,0,0,.6) 76%,rgba(0,0,0,.65)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 18%)}
.hero-copy{z-index:5;margin-left:70%;width:24%;padding-top:clamp(130px,18vh,185px)}
.hero h1{font-size:clamp(46px,4.4vw,70px)}.hero-description{font-size:13px;max-width:100%}.hero-bottom{z-index:5}
@media(min-width:681px){[dir=rtl] .hero-copy{margin-left:70%;width:24%}[dir=rtl] .hero h1{font-size:clamp(40px,3.8vw,58px)}}
@media(min-width:1700px){.hero-product{width:530px;bottom:-38px}.hero-copy{padding-top:190px}}
@media(min-width:681px) and (max-width:960px){.hero-image img{object-position:25% center}.hero-product{width:390px;left:52%;bottom:-8px}.hero-copy{margin-left:70%;width:26%;padding-top:140px}.hero h1{font-size:45px}.hero-description{font-size:12px}.hero .eyebrow{font-size:8px;letter-spacing:1px}[dir=rtl] .hero-copy{width:26%}[dir=rtl] .hero h1{font-size:37px}.hero .button-gold{min-width:0;padding-inline:20px}}
@media(max-width:680px){
 .hero-product{left:56%;width:255px;top:96px;bottom:auto;z-index:3}
 .hero-image img{object-position:center top}.hero-mist{height:475px;bottom:auto;mask-image:none}
 .product-shadow{height:12px;filter:blur(7px)}
 .hero-shade{height:475px;background:linear-gradient(0deg,#0b0b0c,rgba(11,11,12,.12) 23%,transparent 50%)}
 .hero{padding-top:425px}.hero-copy{margin:0;width:100%;padding:0;text-align:center}.hero h1{font-size:56px}.hero-description{max-width:300px;font-size:12px}[dir=rtl] .hero-copy{margin:0;width:100%}[dir=rtl] .hero h1{font-size:45px}
}