.hero { position: relative; min-height: 720px; height: 100vh; max-height: 960px; overflow: hidden; background: var(--ink); color: #fff; }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { background: center / cover no-repeat; opacity: 0; transform: scale(1.015); transition: opacity 1.2s ease, transform 7s linear; }
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-overlay { position: absolute; inset: 0; background: transparent; }
.hero-content { position: absolute; z-index: 1; top: 50%; left: 10vw; transform: translateY(-42%); }
.hero-copy-stack { display: grid; }
.hero-copy { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .8s ease, transform .8s ease, visibility 0s linear .8s; }
.hero-copy.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hero-eyebrow { display: inline-block; margin: 0; padding: 5px 9px; background: rgba(26, 43, 60, .82); color: var(--accent); font: 600 17px Outfit, sans-serif; letter-spacing: .16em; box-shadow: 0 2px 10px rgba(6, 18, 29, .28); }
.hero h1 { margin: 18px 0; font-size: clamp(42px, 5.4vw, 78px); line-height: 1.22; letter-spacing: .045em; text-shadow: 0 2px 10px rgba(6, 18, 29, .82), 0 0 2px rgba(6, 18, 29, .9); -webkit-text-stroke: 1px rgba(6, 18, 29, .46); paint-order: stroke fill; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-text { margin: 0; font-size: 18px; line-height: 1.9; letter-spacing: .045em; text-shadow: 0 2px 8px rgba(6, 18, 29, .95), 0 0 2px rgba(6, 18, 29, .95); -webkit-text-stroke: .4px rgba(6, 18, 29, .55); paint-order: stroke fill; }
.button-hero { margin-top: 48px; color: #fff; text-shadow: 0 2px 8px rgba(6, 18, 29, .95), 0 0 2px rgba(6, 18, 29, .95); }
.button-hero:hover, .button-hero:focus-visible { color: var(--accent); text-shadow: 0 2px 8px rgba(6, 18, 29, .95), 0 0 2px rgba(6, 18, 29, .95); }
.hero-scroll { position: absolute; left: 5vw; bottom: 30px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font: 600 10px Outfit, sans-serif; letter-spacing: .13em; transition: color .2s, transform .2s; }
.hero-scroll i { color: var(--accent); font-size: 18px; font-style: normal; }
.hero-scroll:hover { color: var(--accent); transform: translateY(5px); }
.hero-scroll:hover i { transform: translateY(3px); }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; transform: none; }
  .hero-slide:not(:first-child) { display: none; }
  .hero-copy { display: none; }
  .hero-copy:first-child { display: block; }
}