.rv-hero { position: relative; display: grid; min-height: clamp(520px, 88vh, 780px); color: #fff; background: var(--rv-navy); overflow: hidden; }
.rv-hero__slides { position: relative; grid-area: 1 / 1; }
.rv-hero__slide { position: absolute; inset: 0; display: flex; align-items: flex-end; background: linear-gradient(135deg, var(--rv-navy), var(--rv-blue)); opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.rv-hero__slide.is-active { opacity: 1; visibility: visible; }
.rv-hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 31, 59, .6) 0%, rgba(11, 31, 59, .25) 35%, rgba(11, 31, 59, .8) 100%); }
.rv-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-hero__content { position: relative; z-index: 1; padding-bottom: clamp(4.5rem, 10vw, 6.5rem); }
.rv-hero__title { max-width: 18ch; color: #fff; font-size: var(--rv-fs-h1); margin-bottom: .5em; }
.rv-hero__text { max-width: 52ch; margin-bottom: 1.5rem; font-size: var(--rv-fs-lg); color: #EAF2FC; }
.rv-btn--light { background: #fff; color: var(--rv-navy); border-color: #fff; }
.rv-btn--light:hover { background: var(--rv-blue-light); border-color: var(--rv-blue-light); color: var(--rv-navy); }

.rv-hero__controls { position: absolute; z-index: 2; right: var(--rv-gutter); bottom: 1.5rem; display: flex; align-items: center; gap: .5rem; }
.rv-hero__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; background: rgba(11, 31, 59, .55); border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; cursor: pointer; }
.rv-hero__btn:hover { background: var(--rv-blue); }
.rv-hero__pause .rv-icon-play { display: none; }
.rv-hero__pause[aria-pressed="true"] .rv-icon-play { display: block; }
.rv-hero__pause[aria-pressed="true"] .rv-icon-pause { display: none; }
.rv-hero__dots { display: flex; margin-left: .5rem; }
.rv-hero__dot { position: relative; width: 24px; height: 44px; padding: 0; background: transparent; border: 0; cursor: pointer; }
.rv-hero__dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid #fff; border-radius: 50%; }
.rv-hero__dot[aria-current="true"]::before { background: #fff; }

@media (max-width: 600px) {
	.rv-hero__controls { left: var(--rv-gutter); right: auto; }
	.rv-hero__content { padding-bottom: 6.5rem; }
}