/* One continuous campaign canvas, with subtle colour changes between stories. */
.hero-carousel{--hero-dwell:8.5s;height:570px;max-width:1400px;border-radius:24px;background:#f6eee8;box-shadow:0 12px 40px #69505c08;isolation:isolate;overflow:hidden}
.hero-carousel .banner-slide{--hero-rgb:250 240 231;--hero-ink:#493e50;--hero-accent:#746279;display:block;grid-template-columns:none;grid-template-rows:none;background:rgb(var(--hero-rgb));color:var(--hero-ink);isolation:isolate;opacity:0;visibility:hidden;pointer-events:none;transform:none;transition:opacity 1.1s cubic-bezier(.4,0,.2,1),visibility 0s 1.1s}
.hero-carousel .campaign-rose{--hero-rgb:248 237 234;--hero-accent:#866576}
.hero-carousel .campaign-blue{--hero-rgb:238 239 247;--hero-accent:#68738f}
.hero-carousel .campaign-violet{--hero-rgb:243 237 244;--hero-accent:#7c688e}
.hero-carousel .campaign-sunshine{--hero-rgb:249 242 229;--hero-accent:#8a7460}
.hero-carousel .banner-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:2;transition-delay:0s}
.hero-carousel .banner-slide.is-leaving{visibility:visible;z-index:1;pointer-events:none}
.hero-carousel .banner-scene{position:absolute;inset:0;width:100%;height:100%;border-radius:0;background:transparent;overflow:hidden;z-index:0}
.hero-carousel .banner-scene:after{content:"";display:block;position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgb(var(--hero-rgb)) 0%,rgb(var(--hero-rgb) / .98) 22%,rgb(var(--hero-rgb) / .92) 32%,rgb(var(--hero-rgb) / .66) 43%,rgb(var(--hero-rgb) / .16) 60%,rgb(var(--hero-rgb) / .02) 76%),linear-gradient(0deg,rgb(var(--hero-rgb) / .68),transparent 25%)}
.hero-carousel .banner-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 38%;filter:saturate(.68) contrast(.93) brightness(1.025)!important;transform:scale(1.015);transform-origin:72% 48%;transition:transform var(--hero-dwell) cubic-bezier(.2,.45,.3,1);will-change:transform}
.hero-carousel .is-active .banner-background,.hero-carousel .is-leaving .banner-background{transform:scale(1.055)}
.hero-carousel .campaign-rose .banner-background,.hero-carousel .campaign-sunshine .banner-background{object-position:68% 42%}
.hero-carousel .campaign-violet .banner-background{object-position:68% 44%}
.hero-carousel .banner-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:53%;height:100%;max-width:680px;padding:38px 26px 92px 56px;background:transparent;color:var(--hero-ink)}
.hero-carousel .banner-copy>*{opacity:0;transform:translateY(10px);transition:opacity .8s ease,transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:0s}
.hero-carousel .is-active .banner-copy>*{opacity:1;transform:translateY(0);transition-delay:.12s}
.hero-carousel .is-active .banner-copy .eyebrow{transition-delay:.06s}
.hero-carousel .is-active .banner-copy .banner-description{transition-delay:.2s}
.hero-carousel .is-active .banner-copy .primary-button{transition-delay:.26s}
.hero-carousel .is-active .banner-copy .banner-caption{transition-delay:.3s}
.hero-carousel .banner-copy .eyebrow{color:var(--hero-accent);font-size:11px;line-height:1.6;letter-spacing:.14em;font-weight:600;margin:0;max-width:370px}
.hero-carousel .banner-copy h1,.hero-carousel .banner-copy h2{color:var(--hero-ink);font-size:clamp(46px,4.7vw,68px);line-height:1.045;letter-spacing:-2.4px;font-weight:400;margin:19px 0 21px;max-width:100%}
.hero-carousel .banner-copy h1 em,.hero-carousel .banner-copy h2 em{color:var(--hero-accent);font-weight:400}
.hero-carousel .banner-description{font-size:16px;line-height:1.7;color:#665a69;max-width:355px;margin:0 0 24px}
.hero-carousel .banner-copy .primary-button{min-height:48px;background:var(--hero-ink);border:1px solid var(--hero-ink);border-radius:99px;color:#fffdf9;padding:13px 21px;font-size:14px;gap:20px;box-shadow:0 6px 15px #4b3c4d10;filter:none;transition:opacity .8s ease,transform .3s ease,background .3s ease,box-shadow .3s ease}
.hero-carousel .banner-copy .primary-button:hover{background:var(--hero-accent);border-color:var(--hero-accent);transform:translateY(-2px);box-shadow:0 9px 19px #4b3c4d20;filter:none;transition-delay:0s}
.hero-carousel .banner-copy .primary-button span{display:inline-block;transition:transform .3s ease}
.hero-carousel .banner-copy .primary-button:hover span{transform:translate(2px,-2px)}
.hero-carousel .banner-copy .banner-caption{font-size:10px;line-height:1.6;letter-spacing:.1em;color:#7c6b7a;margin-top:21px;max-width:365px}
/* The product stage is feathered into the same canvas; its measured pack positions stay aligned. */
.hero-carousel .has-packs .banner-background{inset:0 0 0 auto;width:66%;height:100%;object-fit:fill;filter:saturate(.2) brightness(1.16) contrast(.8)!important;mask-image:linear-gradient(90deg,transparent,#000 30%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);transform:none!important;transition:none!important}
.hero-carousel .has-packs .banner-products{inset:0 0 0 auto;width:66%;height:100%;z-index:1}
.hero-carousel .has-packs .banner-scene:after{background:linear-gradient(90deg,rgb(var(--hero-rgb)) 0%,rgb(var(--hero-rgb)) 28%,rgb(var(--hero-rgb) / .92) 36%,rgb(var(--hero-rgb) / .4) 46%,transparent 60%),linear-gradient(0deg,rgb(var(--hero-rgb) / .55),transparent 23%)}
.hero-carousel .carousel-controls{inset:auto 34px 22px;z-index:5;display:flex;align-items:center;gap:22px;color:#65566b}
.hero-carousel .carousel-position{display:flex;align-items:center;gap:11px;background:transparent;padding:0;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.hero-carousel .carousel-rule{width:28px;opacity:.25}
.hero-carousel .slide-dots{background:#fffcf68c;backdrop-filter:blur(10px);gap:6px;padding:0 11px;min-height:42px;box-shadow:none;border:1px solid #ffffff60}
.hero-carousel .slide-dots button{width:27px;min-height:42px;padding:16px 0}
.hero-carousel .slide-dots span,.hero-carousel .slide-dots button[aria-pressed=true] span{height:2px;border-radius:2px;background:#86758c40}
.hero-carousel .slide-dots span:after{background:#796480}
.hero-carousel .slide-dots button[aria-pressed=true] span:after{animation-duration:var(--hero-dwell)}
.hero-carousel .carousel-buttons{gap:7px}
.hero-carousel .carousel-buttons button{width:42px;height:42px;border:1px solid #ffffffb3;background:#fffaf3c9;backdrop-filter:blur(10px);color:#67576e;box-shadow:none;font-size:19px;transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.hero-carousel .carousel-buttons button:hover{background:#fffdf9;transform:translateY(-2px);box-shadow:0 5px 14px #604a6510}
.hero-carousel #slide-pause{font-size:15px}
.hero-carousel a:focus-visible,.hero-carousel button:focus-visible{outline:3px solid #b393b7;outline-offset:4px}
@media(max-width:1100px){.hero-carousel{height:540px}.hero-carousel .banner-copy{padding-left:36px;width:56%}.hero-carousel .banner-copy h1,.hero-carousel .banner-copy h2{font-size:54px}.hero-carousel .banner-description{max-width:330px}.hero-carousel .banner-scene:after{background:linear-gradient(90deg,rgb(var(--hero-rgb)) 0%,rgb(var(--hero-rgb) / .97) 28%,rgb(var(--hero-rgb) / .75) 42%,rgb(var(--hero-rgb) / .05) 73%),linear-gradient(0deg,rgb(var(--hero-rgb) / .7),transparent 26%)}}
@media(max-width:760px){
 .hero-carousel{height:700px;border-radius:21px;margin-top:12px}
 .hero-carousel .banner-copy{width:100%;max-width:none;height:auto;padding:32px 28px 0;justify-content:flex-start}
 .hero-carousel .banner-copy .eyebrow{font-size:10px;line-height:1.6;letter-spacing:.12em;max-width:100%}
 .hero-carousel .banner-copy h1,.hero-carousel .banner-copy h2{font-size:46px;line-height:1.06;letter-spacing:-1.7px;margin:16px 0 17px}
 .hero-carousel .banner-description{font-size:16px;line-height:1.6;max-width:390px;margin-bottom:21px}
 .hero-carousel .banner-copy .primary-button{font-size:14px;min-height:46px;padding:12px 19px;gap:17px}
 .hero-carousel .banner-copy .banner-caption{display:none}
 .hero-carousel .banner-background,.hero-carousel .campaign-rose .banner-background,.hero-carousel .campaign-violet .banner-background,.hero-carousel .campaign-sunshine .banner-background{inset:auto 0 0;width:100%;height:57%;object-position:72% 43%;transform-origin:68% 58%}
 .hero-carousel .banner-scene:after{background:linear-gradient(180deg,rgb(var(--hero-rgb)) 0%,rgb(var(--hero-rgb)) 35%,rgb(var(--hero-rgb) / .9) 44%,rgb(var(--hero-rgb) / .4) 53%,transparent 68%),linear-gradient(0deg,rgb(var(--hero-rgb) / .75),transparent 18%)}
 .hero-carousel .has-packs .banner-background{inset:auto 0 0;width:100%;height:52%;mask-image:linear-gradient(180deg,transparent,#000 27%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 27%)}
 .hero-carousel .has-packs .banner-products{inset:auto 0 0;width:100%;height:52%}
 .hero-carousel .has-packs .banner-scene:after{background:linear-gradient(180deg,rgb(var(--hero-rgb)) 0%,rgb(var(--hero-rgb)) 38%,rgb(var(--hero-rgb) / .9) 44%,rgb(var(--hero-rgb) / .25) 50%,transparent 59%),linear-gradient(0deg,rgb(var(--hero-rgb) / .65),transparent 18%)}
 .hero-carousel .carousel-controls{inset:auto 18px 17px;gap:8px;justify-content:space-between}
 .hero-carousel .carousel-position{display:none}
 .hero-carousel .slide-dots{padding:0 10px;gap:5px;min-height:42px}
 .hero-carousel .slide-dots button{width:20px;min-height:42px}
 .hero-carousel .carousel-buttons{gap:5px}
 .hero-carousel .carousel-buttons button{width:40px;height:42px}
}
@media(max-width:370px){.hero-carousel{height:710px}.hero-carousel .banner-copy{padding:29px 22px 0}.hero-carousel .banner-copy h1,.hero-carousel .banner-copy h2{font-size:41px}.hero-carousel .banner-description{font-size:15px}.hero-carousel .carousel-controls{inset:auto 12px 16px}.hero-carousel .slide-dots{padding:0 8px;gap:4px}.hero-carousel .slide-dots button{width:17px}.hero-carousel .carousel-buttons button{width:37px}}
@media(prefers-reduced-motion:reduce){.hero-carousel .banner-slide,.hero-carousel .banner-copy>*,.hero-carousel .banner-background,.hero-carousel .carousel-buttons button,.hero-carousel .banner-copy .primary-button span{transition:none!important;animation:none!important}.hero-carousel .banner-background,.hero-carousel .is-active .banner-background,.hero-carousel .is-leaving .banner-background{transform:none}.hero-carousel .banner-copy .primary-button:hover,.hero-carousel .banner-copy .primary-button:hover span,.hero-carousel .carousel-buttons button:hover{transform:none}}

/* Automatic campaigns: the existing timer and touch gestures remain available. */
.hero-carousel .carousel-controls{display:none}
.hero-carousel .banner-copy{padding-bottom:42px}
@media(max-width:760px){
 .hero-carousel{height:auto;min-height:0}
 .hero-carousel .hero-slides{height:auto;display:grid;grid-template-columns:minmax(0,1fr)}
 .hero-carousel .banner-slide{position:relative;inset:auto;grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(320px,auto) clamp(240px,66vw,360px);height:auto;min-height:0;width:100%;align-self:stretch}
 .hero-carousel .banner-copy{grid-row:1;width:100%;height:auto;min-height:320px;align-self:stretch;padding:28px 24px 26px;justify-content:center;background:rgb(var(--hero-rgb));z-index:2}
 .hero-carousel .banner-copy h1,.hero-carousel .banner-copy h2{font-size:clamp(35px,10.6vw,46px);line-height:1.06;margin:15px 0;max-width:100%}
 .hero-carousel .banner-description{font-size:14px;line-height:1.65;margin:0 0 20px;max-width:100%}
 .hero-carousel .banner-copy .primary-button{position:relative;max-width:100%;min-height:44px;font-size:13px;padding:12px 18px;gap:14px;flex-shrink:0;white-space:normal;text-align:left}
 .hero-carousel .banner-copy .banner-caption{display:none}
 .hero-carousel .banner-scene{position:relative;grid-row:2;inset:auto;width:100%;height:100%;min-height:0;overflow:hidden;border-radius:0}
 .hero-carousel .banner-background,.hero-carousel .campaign-rose .banner-background,.hero-carousel .campaign-violet .banner-background,.hero-carousel .campaign-sunshine .banner-background,.hero-carousel .has-packs .banner-background{inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 43%;mask-image:none;-webkit-mask-image:none}
 .hero-carousel .banner-scene:after,.hero-carousel .has-packs .banner-scene:after{background:linear-gradient(180deg,rgb(var(--hero-rgb)),transparent 22%)}
 .hero-carousel .has-packs .banner-products{inset:0;width:100%;height:100%}
}