.ref-home-hero { isolation: isolate; }
.ref-hero-slides { position: relative; width: 100%; height: 100%; touch-action: pan-y; }
.ref-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 480ms cubic-bezier(.16,1,.3,1); pointer-events: none; }
.ref-hero-slide.is-active { opacity: 1; }
.ref-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.ref-hero-controls { position: absolute; top: 18px; left: 18px; z-index: 11; display: flex; align-items: center; padding: 2px; color: white; background: #0f100f; border-radius: 999px; }
.ref-hero-dots { display: flex; align-items: center; }
.ref-hero-dots button, .ref-hero-play { width: 44px; height: 44px; display: grid; place-items: center; color: inherit; background: transparent; border: 0; border-radius: 50%; padding: 0; }
.ref-hero-dots span { display: block; width: 8px; height: 8px; border: 1px solid white; border-radius: 50%; transition: background-color 150ms ease; }
.ref-hero-dots button[aria-pressed="true"] span { background: white; }
.ref-hero-controls button:hover { background: #30322f; }
.ref-hero-controls button:focus-visible { outline: 2px solid white; outline-offset: -5px; }
.ref-hero-cta p { max-width: 112px; }
.ref-hero-cta > div { gap: 8px; padding-inline: 20px; }
.ref-hero-cta:hover > div { background: #956800; }
@media (max-width: 767px) { .ref-hero-controls { top: 12px; left: 12px; } .ref-hero-cta > div { padding-inline: 14px; } .ref-hero-cta p { max-width: 88px; font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .ref-hero-slide, .ref-hero-dots span { transition: none; } }