.hero-banner{position:relative;width:100%;overflow:hidden;background:var(--ink);color:var(--on-dark)}.hero-banner__inner{position:relative;width:100%;min-height:min(778px,100svh)}@media screen and (min-width:1700px){.hero-banner__inner{aspect-ratio:2}}.hero-banner__media{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}.hero-banner__media picture{display:block;width:100%;height:100%}.hero-banner__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.hero-banner__container{position:relative;z-index:2}.hero-banner__content{width:100%;max-width:560px;padding:140px 0 120px;box-sizing:border-box}.hero-banner__text{display:flex;flex-direction:column;align-items:flex-start}.hero-banner__rating{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-2)}.hero-banner__stars{display:inline-flex;align-items:center;gap:2px}.hero-banner__stars svg{display:block;width:14px;height:14px}.hero-banner__stars svg path{fill:var(--hero-star, var(--accent-soft))}.hero-banner__reviews{font-family:var(--font-text);font-weight:400;font-size:var(--fs-caption);line-height:1.5;letter-spacing:0;color:#fffc}.hero-banner__heading{margin:0 0 var(--s-2);font-family:var(--font-display);font-weight:400;font-size:var(--fs-d1);line-height:1.02;letter-spacing:var(--track-display);color:var(--on-dark);text-transform:lowercase;text-wrap:balance}.hero-banner__heading strong,.hero-banner__heading em{display:block;font-style:italic;font-weight:400;color:var(--accent-soft)}.hero-banner__description{margin:0 0 var(--s-4);max-width:34em;font-family:var(--font-text);font-weight:400;font-size:var(--fs-lead);line-height:var(--lh-text);letter-spacing:normal;color:#fffc}.hero-banner__description p{margin:0}.hero-banner__ctas{display:flex;flex-wrap:wrap;gap:12px}.hero-banner__cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 28px;border-radius:var(--r-btn);border:1px solid var(--accent);background-color:var(--accent);color:var(--on-dark);font-family:var(--font-text);font-weight:500;font-size:var(--fs-body);line-height:1.2;letter-spacing:0;text-transform:lowercase;text-decoration:none;cursor:pointer;box-shadow:var(--shadow-sm);transition:background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}.hero-banner__cta svg{flex:none}.hero-banner__cta:hover{background-color:var(--accent-deep);border-color:var(--accent-deep);color:var(--on-dark);text-decoration:none}.hero-banner__cta:active{transform:translateY(1px);box-shadow:none}.hero-banner__cta--secondary{background-color:transparent;border-color:#ffffff8c;color:var(--on-dark);box-shadow:none}.hero-banner__cta--secondary:hover{background-color:#ffffff1f;border-color:var(--on-dark);color:var(--on-dark)}.hero-banner__features{display:flex;flex-wrap:wrap;gap:var(--s-1);width:100%;margin:var(--s-2) 0 0;padding:0;list-style:none}.hero-banner__feature{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:10px 16px;border-radius:var(--r-pill);background-color:var(--surface-dark-2);border:1px solid var(--line-dark-strong);color:var(--on-dark)}.hero-banner__feature-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px}.hero-banner__feature-icon img{display:block;width:100%;height:100%;object-fit:contain}.hero-banner__feature-dot{display:block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent-soft)}.hero-banner__feature-text{font-family:var(--font-text);font-weight:400;font-size:var(--fs-caption);line-height:1.3;letter-spacing:0;text-transform:lowercase;color:inherit}.hero-banner__marquee{position:absolute;left:0;right:0;bottom:0;z-index:2;width:100%;padding:0 0 var(--s-4);overflow:hidden}.hero-banner__marquee-label{display:inline-flex;align-items:center;gap:10px;margin:0 0 12px;font-family:var(--font-text);font-size:var(--fs-label);font-weight:500;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mute)}.hero-banner__marquee-track{display:flex;align-items:flex-end;width:max-content;margin:0;padding:0;list-style:none;animation:hero-banner-marquee var(--marquee-duration, 40s) linear infinite;will-change:transform}.hero-banner__marquee:hover .hero-banner__marquee-track,.hero-banner__marquee:focus-within .hero-banner__marquee-track{animation-play-state:paused}.hero-banner__logo{display:inline-flex;align-items:flex-end;flex:0 0 auto;padding-right:80px}.hero-banner__logo-link{display:inline-flex;align-items:flex-end;min-height:44px;color:inherit;text-decoration:none}.hero-banner__logo-image{display:block;height:var(--logo-h, 26px);transform:translateY(var(--logo-y, 0px));width:auto;max-width:none;object-fit:contain;filter:brightness(0) invert(1);opacity:.5}@keyframes hero-banner-marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@media(prefers-reduced-motion:reduce){.hero-banner__marquee-track{animation:none}}@media screen and (min-width:750px)and (max-width:1023px){.hero-banner__content{max-width:440px;padding:112px 0 96px}.hero-banner__media:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(23,8,16,.85) 0 40%,transparent 72%)}}@media screen and (max-width:749px){.hero-banner__inner{--hero-photo-height: clamp(300px, 54vh, 520px);--hero-overlap: var(--s-10);display:flex;flex-direction:column;min-height:0;aspect-ratio:auto}@supports (height: 1svh){.hero-banner__inner{--hero-photo-height: clamp(300px, 54svh, 520px)}}.hero-banner__media{position:relative;inset:auto;width:100%;max-width:100%;height:var(--hero-photo-height);aspect-ratio:auto}.hero-banner__media:after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,var(--ink) 0%,var(--ink) 20%,transparent 100%)}.hero-banner__image{object-position:var(--hero-mobile-position, center 20%)}.hero-banner__content{max-width:none;margin-top:calc(-1 * var(--hero-overlap));padding:0 0 var(--s-6)}.hero-banner__rating{margin-bottom:12px}.hero-banner__heading{max-width:none}.hero-banner__description{margin-bottom:var(--s-3);color:var(--on-dark-mute)}.hero-banner__marquee{position:relative;bottom:auto;padding:0 0 var(--s-5)}.hero-banner__logo{padding-right:32px}.hero-banner__logo-image{height:18px}}@media screen and (max-width:479px){.hero-banner__ctas{flex-direction:column}.hero-banner__cta{width:100%}}
/*# sourceMappingURL=/cdn/shop/t/21/assets/section-hero-banner.css.map */