/* A fixed message above a forward-sliding, extensible product gallery. */
.hero.hero-slideshow{position:relative;isolation:isolate;overflow:hidden;background:#fffaf4;height:clamp(650px,52vw,850px);color:var(--forest)}
.hero-slideshow::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#fffaf4 0%,#fffaf4f5 22%,#fffaf4d9 34%,#fffaf470 43%,#fffaf400 55%)}
.hero-viewport{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;z-index:0}
.hero-track{display:flex;width:100%;height:100%;transition:transform 850ms cubic-bezier(.65,0,.25,1);will-change:transform}
.hero-track.is-resetting{transition:none}
.hero-slide{position:relative;flex:0 0 100%;width:100%;height:100%;min-width:0;background:#fffaf4}
.hero-slide img{display:block;width:100%;height:100%;object-fit:contain;object-position:right center;user-select:none;-webkit-user-drag:none}
.hero-slideshow .hero-grid{position:relative;z-index:2;height:100%;min-height:0;display:flex;align-items:center;gap:0;padding-top:38px;padding-bottom:108px;pointer-events:none}
.hero-copy{width:43%;max-width:560px;pointer-events:auto}
.hero-slideshow h1.custom-headline{font-size:clamp(36px,3.6vw,57px);margin:22px 0 24px}
.hero-slideshow .hero-copy p{max-width:510px;font-size:clamp(16px,1.35vw,20px);line-height:1.75}
.hero-slideshow .hero-actions{gap:10px;flex-wrap:wrap;margin-top:26px}
.hero-slideshow .hero-actions .btn{padding:17px 20px}
.hero-slideshow .hero-note{margin-top:28px;font-size:12px}
.hero-slideshow .hero-footer{position:absolute;z-index:3;bottom:20px;left:50%;transform:translateX(-50%);display:flex;justify-content:flex-end;align-items:center;gap:16px;pointer-events:none}
.hero-controls{display:flex;align-items:center;gap:2px;max-width:100%;padding:4px 7px;border:1px solid #fff8;border-radius:32px;background:#fffdf8ed;box-shadow:0 5px 24px #123f3214;backdrop-filter:blur(12px);pointer-events:auto}
.hero-controls[hidden]{display:none}
.hero-controls button{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--forest);font:inherit;cursor:pointer;touch-action:manipulation}
.hero-controls button:hover{background:#123f320d}
.hero-controls button:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.hero-controls button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero-dots{display:flex;align-items:center;gap:0;max-width:min(30vw,240px);overflow-x:auto;scrollbar-width:thin}
.hero-dots button{position:relative;width:26px;min-width:26px;border-radius:12px}
.hero-dots button::after{content:"";display:block;width:7px;height:7px;border-radius:12px;background:#123f3240;transition:width .25s,background .25s}
.hero-dots button[aria-current="true"]::after{width:21px;background:var(--forest)}
.hero-count{font:700 11px/1 Arial,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 8px;color:#53685c}
@media(min-width:1600px){.hero-slideshow .hero-grid{max-width:1600px}.hero-copy{width:42%;max-width:590px}.hero-slideshow h1.custom-headline{font-size:60px}}
@media(max-width:1100px){
  .hero.hero-slideshow{display:flex;flex-direction:column;height:auto;min-height:0}
  .hero-slideshow::after{display:none}
  .hero-slideshow .hero-grid{order:1;height:auto;padding-top:44px;padding-bottom:28px}
  .hero-copy{width:100%;max-width:720px}
  .hero-slideshow h1.custom-headline{font-size:clamp(36px,5.2vw,55px)}
  .hero-slideshow .hero-copy p{max-width:690px;font-size:18px}
  .hero-slideshow .hero-note{margin-top:24px}
  .hero-viewport{position:relative;inset:auto;order:2;width:100%;aspect-ratio:1672/941}
  .hero-slide img{object-fit:cover}
  .hero-slideshow .hero-footer{position:relative;order:3;left:auto;bottom:auto;transform:none;justify-content:center;flex-wrap:wrap;gap:12px;padding-top:16px;padding-bottom:18px}
  .hero-dots{max-width:220px}
}
@media(max-width:600px){
  .hero-slideshow .hero-grid{padding-top:32px;padding-bottom:24px}
  .hero-slideshow h1.custom-headline{font-size:clamp(28px,8vw,45px);margin:18px 0 20px}
  .hero-slideshow .hero-copy p{font-size:16px;line-height:1.7}
  .hero-slideshow .hero-actions{gap:9px;margin-top:23px}
  .hero-slideshow .hero-actions .btn{font-size:12px;padding:15px 17px}
  .hero-slideshow .hero-note{font-size:10px;margin-top:20px}
  .hero-viewport{aspect-ratio:4/3}
  .hero-slideshow .hero-footer{gap:10px;padding-top:12px;padding-bottom:16px}
  .hero-controls{padding:3px 4px;gap:0}
  .hero-controls button{width:36px;height:42px}
  .hero-dots{max-width:156px}
  .hero-dots button{width:22px;min-width:22px}
  .hero-dots button[aria-current="true"]::after{width:17px}
  .hero-count{padding:0 5px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.hero-track,.hero-dots button::after{transition:none}}

.hero-controls button[hidden]{display:none}