.content.home { max-width: none; padding: 0; border: 0; background: #333b35; display: flex; }
.hero { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: clamp(440px, 70svh, 850px); background: linear-gradient(135deg, #354239, #1c2520); color: #fff; }
.hero__slides, .hero__slide, .hero::after { position: absolute; inset: 0; }
.hero__slide { margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after {
    content: '';
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(0deg, rgb(0 0 0 / .72), rgb(0 0 0 / .12) 80%),
        linear-gradient(90deg, rgb(0 0 0 / .28), transparent);
}
.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: inherit; max-width: 1152px; margin: 0 auto; padding: clamp(32px, 6vw, 80px) clamp(24px, 5vw, 64px); }
.hero__eyebrow { margin: 0 0 var(--paragraph-gap); font-size: var(--text-small-size); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--label-letter-spacing); }
.hero h1 { max-width: 860px; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.hero h1 { text-shadow: 0 2px 4px rgb(0 0 0 / .65), 0 6px 24px rgb(0 0 0 / .45); }
.hero__controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 40px; }
.hero__dots { display: flex; gap: 4px; flex-wrap: wrap; }
.hero__dot { cursor: pointer; color: #fff; border: 0; font: inherit; }
.hero__dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; }
.hero__dot::after { content: ''; height: 3px; width: 24px; background: rgb(255 255 255 / .4); border-radius: 2px; }
.hero__dot[aria-pressed="true"]::after { background: #fff; }
.hero button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero [hidden] { display: none; }
@media (max-width: 600px) {
    .hero { min-height: 60svh; }
    .hero__inner { padding-top: 64px; padding-bottom: 32px; }
    .hero__controls { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__slide { transition: none; }
}