/* A single is-active state controls the entire brand accordion. Load after brand-theme.css. */
.hero .hero-track.hero-panels-ready {
  -webkit-user-select: none;
  user-select: none;
}
.hero .hero-track.hero-panels-ready img {
  -webkit-user-drag: none;
}
@media (min-width: 761px) {
  .hero .hero-track.hero-panels-ready > .brand-panel {
    flex: 1 1 0%;
    transition: flex-grow .7s var(--ease);
  }
  .hero .hero-track.hero-panels-ready > .brand-panel.is-active {
    flex-grow: 2.35;
  }
  .hero .hero-track.hero-panels-ready > .brand-panel > img {
    z-index: 0;
    filter: none;
    transform: scale(1);
    transition: transform 1s var(--ease);
  }
  .hero .hero-track.hero-panels-ready > .brand-panel.is-active > img {
    transform: scale(1.025);
  }
  .hero .hero-track.hero-panels-ready > .brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
    opacity: .58;
    pointer-events: none;
    transition: opacity .7s var(--ease);
  }
  .hero .hero-track.hero-panels-ready > .brand-panel.is-active::before {
    opacity: 0;
  }
  .hero .hero-track.hero-panels-ready > .brand-panel::after {
    z-index: 2;
    background: linear-gradient(180deg, transparent 25%, #00000012 52%, #000000e8 100%);
    opacity: 1;
  }
  .hero .hero-track.hero-panels-ready > .brand-panel .panel-caption {
    z-index: 3;
  }
  .hero .hero-track.hero-panels-ready > .brand-panel .panel-caption h2 {
    font-size: clamp(18px, 1.7vw, 25px);
    text-align: center;
    color: #fff;
  }
  .hero .hero-track.hero-panels-ready > .brand-panel.is-active .panel-caption h2 {
    font-size: clamp(22px, 2.3vw, 34px);
    text-align: left;
    color: var(--brand);
  }
  .hero .hero-track.hero-panels-ready > .brand-panel .panel-caption p {
    opacity: 0;
    max-height: 0;
  }
  .hero .hero-track.hero-panels-ready > .brand-panel.is-active .panel-caption p {
    opacity: 1;
    max-height: 120px;
  }
  .hero .hero-track.hero-panels-ready > .brand-panel .panel-arrow {
    color: #fff;
  }
  .hero .hero-track.hero-panels-ready > .brand-panel.is-active .panel-arrow {
    color: var(--brand);
  }
  .hero .hero-track.hero-panels-ready > .brand-panel:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
  }
}

/* Mobile widths and swipe behavior continue to come from the native scroll rail. */
@media (max-width: 760px) {
  .hero {
    height: calc(100svh - 144px - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .hero .hero-controls {
    bottom: -52px;
    height: 44px;
  }
  .hero .hero-track.hero-panels-ready > .brand-panel::after {
    background: linear-gradient(180deg, transparent 25%, #00000012 52%, #000000e8 100%);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-track.hero-panels-ready > .brand-panel,
  .hero .hero-track.hero-panels-ready > .brand-panel > img,
  .hero .hero-track.hero-panels-ready > .brand-panel::before,
  .hero .hero-track.hero-panels-ready > .brand-panel::after {
    transition: none;
  }
}