.catalog-banner { background: var(--forest); color: var(--paper); }
.banner-stage { position: relative; isolation: isolate; height: clamp(490px, 43vw, 660px); overflow: hidden; }
.banner-slide { position: absolute; inset: 0; overflow: hidden; background: var(--forest); transform: translateX(0); }
.banner-artwork { position: absolute; inset: 0; background: var(--forest); transform: translateX(0); }
.banner-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 25%; }
.banner-artwork::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 27, 17, .94) 0%, rgba(9, 27, 17, .79) 32%, rgba(9, 27, 17, .15) 72%, rgba(9, 27, 17, .06) 100%); pointer-events: none; }
.banner-masthead { position: absolute; z-index: 2; top: 30px; left: 0; right: 0; pointer-events: none; }
.banner-masthead .breadcrumb { color: #d6e0cf; pointer-events: auto; }
.banner-masthead h1 { margin-top: 20px; font-size: clamp(30px, 3.4vw, 48px); }
.banner-slide-copy { position: absolute; z-index: 1; inset: auto 0 100px; }
.banner-slide-copy h2 { font-size: clamp(48px, 6.5vw, 95px); }
.banner-slide-copy p { max-width: 35ch; margin: 14px 0 22px; color: #e1ead9; }
.banner-link { display: inline-flex; align-items: center; gap: 22px; min-height: 48px; padding: 11px 17px; border: 1px solid var(--lime); background: var(--lime); color: var(--ink); font-size: 14px; font-weight: 800; }
.banner-link:hover { background: #ebf5c9; border-color: #ebf5c9; }
.catalog-banner :focus-visible { outline-color: var(--lime); }
.banner-controls { position: absolute; z-index: 3; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; align-items: center; }
.banner-controls button { color: var(--paper); cursor: pointer; }
.banner-dots { display: flex; gap: 4px; }
.banner-dot { display: grid; place-items: center; width: 30px; height: 42px; padding: 0; border: 0; background: transparent; }
.banner-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--paper); }
.banner-dot[aria-current="true"]::after { background: var(--lime); border-color: var(--lime); }
.banner-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.banner-slide.is-enter { transform: translateX(-22%); }
.banner-slide.is-front { z-index: 1; }
.banner-slide.is-moving, .banner-slide.is-moving .banner-artwork { transition: transform 840ms cubic-bezier(.65, 0, .35, 1); }
.banner-slide.is-exit { transform: translateX(100%); }
.banner-slide.is-exit .banner-artwork { transform: translateX(-76%); }
@media (max-width: 680px) {
  .banner-stage { height: 630px; }
  .banner-slide img { top: 102px; bottom: auto; height: clamp(205px, 58vw, 250px); object-position: 80% 45%; }
  .banner-artwork::after { top: 102px; bottom: auto; height: clamp(205px, 58vw, 250px); background: linear-gradient(to bottom, rgba(27, 55, 42, .2), transparent 12%, transparent 88%, rgba(27, 55, 42, .25)); }
  .banner-masthead { top: 22px; }
  .banner-masthead h1 { font-size: 32px; margin-top: 15px; }
  .banner-slide-copy { bottom: 100px; }
  .banner-slide-copy h2 { font-size: clamp(43px, 10vw, 65px); overflow-wrap: anywhere; }
  .banner-slide-copy p { max-width: 28ch; font-size: 14px; }
  .banner-controls { bottom: 17px; }
}
@media (prefers-reduced-motion: reduce) { .banner-slide.is-moving, .banner-slide.is-moving .banner-artwork { transition: none; } }