.home-hero { position: relative; isolation: isolate; min-height: 820px; min-height: max(820px, 100svh); }
.carousel-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { isolation: isolate; }
.slide-destination { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; -webkit-user-drag: none; }
.slide-destination:focus-visible { outline-offset: -6px; }
.slide-destination img { -webkit-user-drag: none; }
.carousel-slides { touch-action: pan-y; }
.is-carousel .hero-slide:not([hidden]) { animation: slide-in 450ms ease-out; }
@keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
.slide-art { position: absolute; inset: 0; z-index: -1; overflow: clip; }
.slide-art img {
  position: absolute; right: 0; top: 0; width: 70%; max-width: none; height: 100%; object-fit: cover; object-position: center 40%;
  filter: brightness(.66); mask-image: linear-gradient(90deg, transparent, #000 28%);
}
.slide-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #141719 0%, transparent 36%), linear-gradient(90deg, #141719 4%, transparent 75%); }
.slide-art figcaption { position: absolute; bottom: 38px; right: 40px; z-index: 1; max-width: 255px; color: #c4c9ca; font-size: 11px; line-height: 1.5; }
.scene-slide .slide-art img { width: 100%; object-position: 64% center; mask-image: none; filter: brightness(.72); }
.scene-slide .slide-art::after { background: linear-gradient(0deg, #141719, transparent 50%), linear-gradient(90deg, rgb(20 23 25 / 72%), transparent 80%); }

/* Each topic keeps one semantic heading despite the staggered visual layout. */
.home-hero .hero-title { font: 400 min(14vw, 24svh)/.96 Anton, 'Arial Narrow', sans-serif; letter-spacing: -.035em; }
.home-hero .hero-title span { position: absolute; display: block; white-space: nowrap; }
.word-surf { top: 16%; left: 3.4%; }
.word-wetsuits { top: 39%; left: 13%; }
.word-sunshirts { top: 62%; left: 29%; }
#slide-products .word-sunshirts { font-size: .86em; }
.slide-copy { position: absolute; left: 40px; bottom: 38px; max-width: 285px; }
.slide-copy p { color: #d2d7d8; font-size: 14px; line-height: 1.5; }
.product-link { display: inline-flex; gap: 32px; align-items: center; min-height: 44px; margin-top: 12px; font-size: 14px; text-decoration: underline; text-underline-offset: 6px; }
.is-carousel .slide-copy, .is-carousel .slide-art figcaption { bottom: 112px; }
.carousel-controls { position: absolute; left: 40px; right: 40px; bottom: 22px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.carousel-tabs { order: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: min(580px, 65%); }
.carousel-actions { order: 2; display: flex; align-items: center; gap: 8px; }
.carousel-controls button { min-height: 44px; border: 0; background: transparent; color: #bec5c7; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.carousel-tabs button { padding: 8px 0; text-align: left; border-bottom: 2px solid #4b5356; }
.carousel-tabs button[aria-selected="true"] { color: #fff; border-bottom-color: #fff; }
.carousel-controls button:hover { color: #fff; }
.carousel-actions button { min-width: 44px; border: 1px solid #687174; border-radius: 50%; }
.carousel-actions .rotation-control { min-width: 76px; border-radius: 999px; }

@media (max-width: 1199px) {
  .slide-copy { left: 28px; }
}

@media (max-width: 1000px) {
  .home-hero .hero-title { font-size: 15vw; }
  .word-surf { top: 22%; }
  .word-wetsuits { top: 40%; left: 9%; }
  .word-sunshirts { top: 59%; left: 19%; }
  .slide-art img { width: 90%; }
}

@media (max-width: 600px) {
  .home-hero { min-height: max(760px, 100svh); }
  .home-hero.is-carousel { min-height: max(860px, 100svh); }
  .home-hero .hero-title { font-size: 22vw; }
  .word-surf { top: 25%; left: 6%; }
  .word-wetsuits { top: 39%; left: 6%; }
  .word-sunshirts { top: 53%; left: 9%; }
  .slide-art img { top: 16%; right: -14%; width: 120%; height: 73%; object-position: center; filter: brightness(.46); mask-image: linear-gradient(0deg, transparent, #000 24%, #000 76%, transparent); }
  .slide-art::after { background: linear-gradient(90deg, rgb(20 23 25 / 52%), transparent 75%); }
  .scene-slide .slide-art img { top: 16%; right: 0; width: 100%; height: 69%; object-position: 70% center; filter: brightness(.6); mask-image: linear-gradient(0deg, transparent, #000 24%, #000 76%, transparent); }
  .scene-slide .slide-art::after { background: linear-gradient(90deg, rgb(20 23 25 / 62%), transparent); }
  .slide-copy { left: 24px; bottom: 89px; max-width: 275px; }
  .slide-copy p { font-size: 13px; }
  .slide-art figcaption { left: 24px; right: 24px; bottom: 24px; max-width: 300px; font-size: 10px; }
  .is-carousel .slide-copy { bottom: 208px; }
  .is-carousel .slide-art figcaption { bottom: 139px; }
  .is-carousel .word-wetsuits { top: 38%; }
  .is-carousel .word-sunshirts { top: 51%; }
  .carousel-controls { left: 24px; right: 24px; bottom: 20px; flex-direction: column; align-items: stretch; gap: 10px; }
  .carousel-tabs { width: 100%; gap: 12px; }
  .carousel-tabs button { font-size: 11px; }
  .carousel-actions { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) { a { transition: none !important; } .is-carousel .hero-slide:not([hidden]) { animation: none; } }

.home-hero { background: var(--page); }
.home-hero h2, .home-hero p, .home-hero figure { margin: 0; }
.home-hero .slide-copy p { font-size: 16px; }
.home-hero .slide-art figcaption { font-size: 12px; }
.home-hero .carousel-controls button { font-size: 14px; }
@media (max-width: 600px) { .home-hero.is-carousel { min-height: max(940px, 100svh); } .home-hero .word-surf { top: 24%; } .home-hero .word-wetsuits { top: 37%; } .home-hero .word-sunshirts { top: 49%; } }