.hero-product-films{--hero-background: #071c24;--hero-text: #fff8e8;--hero-accent: #f4b94a;background:var(--hero-background);color:var(--hero-text);display:block;isolation:isolate;overflow:hidden;position:relative}.hero-product-films__inner{align-items:center;display:grid;gap:clamp(3.2rem,5vw,8rem);grid-template-columns:minmax(30rem,.82fr) minmax(52rem,1.18fr);min-height:min(76rem,calc(100svh - 10rem));padding-bottom:clamp(4rem,6vw,8rem);padding-top:clamp(4rem,6vw,8rem);position:relative;z-index:1}.hero-product-films__copy{max-width:54rem}.hero-product-films__eyebrow{color:var(--hero-accent);font-size:1.2rem;font-weight:700;letter-spacing:.18em;margin:0 0 2rem}.hero-product-films__heading{color:inherit;font-family:var(--font-heading-family);font-size:clamp(4.4rem,5.2vw,7.4rem);font-style:var(--font-heading-style);font-weight:var(--font-heading-weight);letter-spacing:-.035em;line-height:.98;margin:0;text-wrap:balance}.hero-product-films__heading em{color:var(--hero-accent);font-weight:inherit}.hero-product-films__description{color:color-mix(in srgb,var(--hero-text) 78%,transparent);font-size:clamp(1.7rem,1.6vw,2rem);line-height:1.55;margin-top:2.4rem;max-width:48rem}.hero-product-films__description p{margin:0}.hero-product-films__actions{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:3.2rem}.hero-product-films__button{min-height:5rem;padding-left:2.4rem;padding-right:2.4rem}.hero-product-films__button:after,.hero-product-films__button:before{box-shadow:none}.hero-product-films__button--primary{background:var(--hero-accent);color:#132027}.hero-product-films__button--primary:hover{background:#ffd477}.hero-product-films__button--secondary{background:transparent;border:1px solid color-mix(in srgb,var(--hero-text) 42%,transparent);color:var(--hero-text)}.hero-product-films__button--secondary:hover{background:color-mix(in srgb,var(--hero-text) 10%,transparent)}.hero-product-films__note{align-items:center;color:color-mix(in srgb,var(--hero-text) 66%,transparent);display:flex;font-size:1.3rem;gap:.8rem;margin:2.4rem 0 0}.hero-product-films__note span{color:var(--hero-accent)}.hero-product-films__media{display:grid;gap:clamp(1rem,1.4vw,2rem);grid-template-columns:repeat(2,minmax(0,1fr));position:relative}.hero-product-films__card{aspect-ratio:9 / 16;background:#0f2a34;border:1px solid color-mix(in srgb,var(--hero-text) 14%,transparent);border-radius:clamp(1.4rem,1.8vw,2.4rem);box-shadow:0 2.4rem 6rem #00000052;color:var(--hero-text);display:block;overflow:hidden;position:relative;transform:translateZ(0)}.hero-product-films__card--cat{margin-bottom:clamp(2rem,4vw,5rem)}.hero-product-films__card--ocean{margin-top:clamp(2rem,4vw,5rem)}.hero-product-films__video{height:100%;top:0;right:0;bottom:0;left:0;object-fit:cover;position:absolute;transition:transform .7s cubic-bezier(.2,.75,.25,1);width:100%}.hero-product-films__card:hover .hero-product-films__video{transform:scale(1.025)}.hero-product-films__card-shade{background:linear-gradient(180deg,transparent 62%,rgba(3,11,15,.76) 100%);top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute}.hero-product-films__card-label{bottom:clamp(1.4rem,2vw,2.2rem);font-size:clamp(1.2rem,1.2vw,1.5rem);font-weight:700;left:clamp(1.4rem,2vw,2.2rem);letter-spacing:.02em;line-height:1.25;position:absolute;right:clamp(1.4rem,2vw,2.2rem);text-shadow:0 1px 1.2rem rgba(0,0,0,.8)}.hero-product-films__playback{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#030e1394;border:1px solid rgba(255,255,255,.26);border-radius:50%;color:#fff;cursor:pointer;display:flex;height:4.4rem;justify-content:center;position:absolute;right:1.4rem;top:1.4rem;transition:background .18s ease,transform .18s ease;width:4.4rem;z-index:2}.hero-product-films__playback:hover{background:#030e13d1;transform:scale(1.05)}.hero-product-films__playback:focus-visible{outline:.2rem solid white;outline-offset:.3rem}.hero-product-films__pause-icon{display:flex;gap:.4rem}.hero-product-films__pause-icon i{background:currentColor;border-radius:.1rem;display:block;height:1.5rem;width:.35rem}.hero-product-films__play-icon{border-bottom:.8rem solid transparent;border-left:1.25rem solid currentColor;border-top:.8rem solid transparent;display:none;margin-left:.2rem}.hero-product-films__playback[data-playing=false] .hero-product-films__pause-icon{display:none}.hero-product-films__playback[data-playing=false] .hero-product-films__play-icon{display:block}.hero-product-films__glow{border-radius:50%;filter:blur(.4rem);opacity:.22;pointer-events:none;position:absolute}.hero-product-films__glow--one{background:radial-gradient(circle,#f4b94a 0%,transparent 68%);height:56rem;left:-24rem;top:-26rem;width:56rem}.hero-product-films__glow--two{background:radial-gradient(circle,#2c8caa 0%,transparent 68%);bottom:-30rem;height:70rem;right:-22rem;width:70rem}@media screen and (max-width:989px){.hero-product-films__inner{gap:3.6rem;grid-template-columns:1fr;min-height:0;padding-bottom:4.8rem;padding-top:4.8rem}.hero-product-films__copy{max-width:66rem}.hero-product-films__heading{max-width:60rem}.hero-product-films__media{margin:0 auto;max-width:66rem;width:100%}}@media screen and (max-width:749px){.hero-product-films__inner{gap:3.2rem;padding-bottom:3.6rem;padding-top:3.6rem}.hero-product-films__eyebrow{font-size:1.05rem;margin-bottom:1.4rem}.hero-product-films__heading{font-size:clamp(4rem,12vw,5.2rem)}.hero-product-films__description{font-size:1.6rem;margin-top:1.8rem}.hero-product-films__actions{margin-top:2.4rem}.hero-product-films__button{flex:1 1 15rem;min-width:0;padding-left:1.4rem;padding-right:1.4rem}.hero-product-films__note{align-items:flex-start;margin-top:1.8rem}.hero-product-films__media{gap:.8rem}.hero-product-films__card{border-radius:1.4rem}.hero-product-films__card--cat{margin-bottom:1.8rem}.hero-product-films__card--ocean{margin-top:1.8rem}.hero-product-films__card-label{bottom:1.2rem;font-size:1.05rem;left:1rem;right:1rem}.hero-product-films__playback{height:4rem;right:.8rem;top:.8rem;width:4rem}}@media(prefers-reduced-motion:reduce){.hero-product-films__video{transition:none}}@media(prefers-contrast:more){.hero-product-films__description,.hero-product-films__note{color:var(--hero-text)}}
/*# sourceMappingURL=/cdn/shop/t/8/assets/hero-product-films.css.map */