.hero{touch-action:pan-y;isolation:isolate;background:#34312d}
.hero>img{position:absolute;inset:0;z-index:-2}
.hero .hero-shade{pointer-events:none;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent 80%)}
.hero .hero-copy{bottom:17%;pointer-events:none}
.hero-copy a{pointer-events:auto}
.hero-controls{position:absolute;left:6vw;bottom:4%;display:flex;align-items:center;gap:8px;max-width:88%;padding:4px 8px;background:rgba(20,20,20,.45);border-radius:32px}
.hero-controls button{color:#fff;border:0;background:none;min-width:36px;height:40px;cursor:pointer;font-size:20px}
.hero-controls button:focus-visible,.hero-copy a:focus-visible{outline:2px solid white;outline-offset:3px}
.hero-dots{display:flex;flex-wrap:wrap;justify-content:center;max-width:420px}
.hero-dots button{min-width:24px;width:24px;font-size:0}
.hero-dots button::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:#fff;opacity:.4;margin:auto}
.hero-dots button[aria-pressed=true]::after{opacity:1;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.hero-counter{font-size:12px;white-space:nowrap;margin:0 6px}
.hero .hero-note{max-width:40%;text-align:right}
@media(max-width:700px){.hero-controls{left:22px;bottom:24px;max-width:calc(100% - 44px)}.hero .hero-copy{bottom:120px}.hero h1{font-size:clamp(2rem,8vw,3rem)}.hero-dots{max-width:192px}}
@media(prefers-reduced-motion:reduce){.hero *{animation:none!important;transition:none!important}}