#topo>.hero.hero-carousel{display:block;position:relative;touch-action:pan-y}
.hero-slides{display:grid;grid-template-columns:minmax(0,1fr);min-height:inherit}
.hero-slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:inherit;visibility:hidden;pointer-events:none}
.hero-slide.is-active{visibility:visible;pointer-events:auto}
/* Swap opaque slides immediately; animate only the new photo to avoid ghosting. */
.hero-slide.is-active .hero-photo img{animation:hero-photo-enter .65s cubic-bezier(.22,.61,.36,1) both}
.hero-slide.is-active .hero-banner-copy{animation:hero-copy-enter .35s ease-out both}
@keyframes hero-photo-enter{from{transform:scale(1.025)}to{transform:scale(1)}}
@keyframes hero-copy-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.hero-slide .hero-copy{order:0;min-width:0}
.hero-slide .hero-photo{order:1;min-width:0}
.hero-slide[data-image-side="left"] .hero-photo{order:0}
.hero-slide[data-image-side="left"] .hero-copy{order:1}
.hero-slide .hero-title{font:500 clamp(43px,5vw,66px)/1.04 var(--serif);letter-spacing:-.035em;margin:10px 0 16px;max-width:450px}
.hero-slide .hero-title em{color:var(--rose-dark);font-weight:400}
.hero-slide a[hidden]{display:none}
.hero-controls{position:absolute;z-index:3;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:1px;padding:1px 5px;border:1px solid #ffffff26;border-radius:30px;background:#18121540;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-dot,.hero-autoplay{display:grid;place-items:center;width:32px;height:28px;border:0;background:transparent;padding:0;color:#ffffffb3;cursor:pointer;border-radius:20px}
.hero-dot span{width:6px;height:6px;border:1px solid currentColor;border-radius:50%;transition:background .2s,transform .2s}
.hero-dot[aria-current="true"] span{color:#ffffffe6;background:currentColor;transform:scale(1.2)}
.hero-autoplay svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero-play-mark{display:none}
.hero-autoplay[aria-pressed="true"] .hero-play-mark{display:block}
.hero-autoplay[aria-pressed="true"] .hero-pause-mark{display:none}
.hero-dot:focus-visible,.hero-autoplay:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero-dot:hover,.hero-autoplay:hover{color:#fff}
@media(max-width:600px){
 #topo .hero-slide{display:flex;flex-direction:column}
 #topo .hero-slide .hero-copy{order:0;min-height:var(--hero-carousel-copy-height,0px)}
 #topo .hero-slide .hero-photo{order:1}
 #topo .hero-slide .hero-title{font-size:clamp(32px,8.8vw,43px);line-height:1.12;max-width:none;margin:10px 0 16px}
 .hero-controls{left:50%;bottom:7px}
 #topo .hero-carousel .hero-banner-copy{bottom:49px}
 .hero-dot,.hero-autoplay{height:30px;width:34px}
}
@media(prefers-reduced-motion:reduce){.hero-dot span{transition:none;transform:none}.hero-slide.is-active .hero-photo img,.hero-slide.is-active .hero-banner-copy{animation:none}}


/* Mobile keeps compact copy and a fully filled campaign image. */
@media(max-width:600px){
 #topo .hero-carousel .hero-copy{padding:16px 18px}
 #topo .hero-carousel .hero-copy>.eyebrow{font-size:9px;line-height:1.3;letter-spacing:.18em;margin:0 0 5px}
 #topo .hero-carousel .hero-slide .hero-title{font-size:clamp(26px,7.2vw,32px);line-height:1.1;margin:4px 0 9px}
 #topo .hero-carousel .hero-text{font-size:11px;line-height:1.55;margin:0 0 12px}
 #topo .hero-carousel .hero-copy>.button{min-height:44px;font-size:9px;padding-inline:17px}
 #topo .hero-carousel .hero-slide .hero-photo{height:min(calc((100vw - 24px) / 1.3),var(--storefront-mobile-photo-height,300px));min-height:180px;aspect-ratio:auto;flex:none}
 #topo .hero-carousel .hero-slide .hero-photo img{object-fit:cover;object-position:50% 25%;animation:hero-photo-mobile-enter .4s ease-out both}
 #topo .hero-carousel .hero-banner-copy{left:16px;right:16px;bottom:43px;gap:5px}
 #topo .hero-carousel .hero-banner-copy>.eyebrow{font-size:9px}
 #topo .hero-carousel .hero-banner-copy h2{font-size:clamp(19px,5.2vw,25px);line-height:1.14}
 #topo .hero-carousel .hero-banner-copy>a{font-size:9px;line-height:1.4}
}
@keyframes hero-photo-mobile-enter{from{opacity:.75}to{opacity:1}}
@media(max-width:600px) and (prefers-reduced-motion:reduce){#topo .hero-carousel .hero-slide .hero-photo img{animation:none}}