/* Photographic campaigns: one continuous image, with accessible live copy. */
.hero-carousel {
  --slide-size: min(82vw, 1280px);
  --slide-gap: 22px;
  --banner-height: clamp(340px, 34.17vw, 534px);
  --banner-top: 24px;
  position: relative;
  padding-top: var(--banner-top);
}
.hero-slide {
  position: relative;
  display: block;
  height: var(--banner-height);
  border: 0;
  border-radius: 22px;
  background: #eee;
  isolation: isolate;
}
.hero-carousel.is-ready .hero-slide:not(.is-active) { opacity: .55; }
.hero-slide .slide-photo { position: absolute; inset: 0; z-index: -1; }
.hero-slide .slide-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-slide .slide-copy {
  width: 51%;
  height: 100%;
  padding: 36px 0 58px 8%;
  justify-content: center;
  color: #242424;
}
.hero-slide .slide-overline {
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.hero-slide .slide-copy h2 { font-size: clamp(34px, 3.35vw, 48px); line-height: 1.32; font-weight: 650; }
.hero-slide .slide-copy > p { color: #535353; font-size: 15px; line-height: 1.75; margin-top: 18px; }
.hero-slide .slide-copy .button {
  display: inline-flex;
  gap: 24px;
  align-items: center;
  min-height: 44px;
  padding: 11px 21px;
  margin-top: 25px;
  font-size: 13px;
  font-weight: 550;
  border: 1px solid #242424;
  background: #242424;
  color: #fff;
}
.hero-slide .slide-copy .button::after { content: '↗'; font-size: 16px; line-height: 1; }
.hero-slide .slide-copy .button:hover { background: #444; border-color: #444; transform: translateY(-2px); }
.slide-jujube { background: #242424; }
.slide-jujube .slide-copy { color: #fff; }
.slide-jujube .slide-overline { color: #e2e2e2; }
.slide-jujube .slide-copy > p { color: #e0e0e0; }
.slide-jujube .slide-copy .button { color: #242424; background: #fff; border-color: #fff; }
.slide-jujube .slide-copy .button:hover { background: #e9e9e9; border-color: #e9e9e9; }
.hero-carousel .carousel-controls {
  position: absolute;
  z-index: 3;
  width: var(--slide-size);
  height: var(--banner-height);
  top: var(--banner-top);
  left: 50%;
  transform: translateX(-50%);
  display: block;
  pointer-events: none;
}
.hero-carousel .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  opacity: .86;
  pointer-events: auto;
  transition: opacity .2s, background .2s;
}
.hero-carousel .carousel-arrow:hover { opacity: 1; background: #f2f2f2; }
.hero-carousel #slide-prev { left: 16px; }
.hero-carousel #slide-next { right: 16px; }
.carousel-pagination {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  width: max-content;
  align-items: center;
  padding: 0 7px 0 10px;
  border-radius: 99px;
  background: rgba(24,24,24,.72);
  color: #fff;
  pointer-events: auto;
}
.carousel-pagination .slide-dots { gap: 0; }
.carousel-pagination .slide-dots button { width: 28px; height: 40px; }
.carousel-pagination .slide-dots button::after { top: 17px; left: 11px; width: 6px; height: 6px; background: #ffffff70; }
.carousel-pagination .slide-dots button[aria-pressed=true]::after { background: #fff; transform: scaleX(2.5); }
.carousel-pagination .slide-count { border-color: #ffffff45; font-size: 11px; padding-left: 12px; margin-left: 5px; color: #ffffffb3; white-space: nowrap; }
.carousel-pagination .slide-count b { color: #fff; font-weight: 600; }
.carousel-pagination .carousel-pause { width: 36px; height: 40px; opacity: .9; margin-left: 2px; }
.carousel-pagination .carousel-pause img { filter: brightness(0) invert(1); }
.carousel-pagination .carousel-pause:disabled { opacity: .4; }

@media (max-width: 1100px) and (min-width: 768px) {
  .hero-carousel { --slide-size: 88vw; --slide-gap: 16px; --banner-height: 36.67vw; }
  .hero-slide .slide-copy { padding: 16px 0 52px 8%; width: 52%; }
  .hero-slide .slide-copy h2 { font-size: clamp(27px, 3.1vw, 34px); }
  .hero-slide .slide-copy > p { font-size: 12px; line-height: 1.6; margin-top: 12px; }
  .hero-slide .slide-overline { font-size: 11px; margin-bottom: 12px; }
  .hero-slide .slide-copy .button { min-height: 36px; font-size: 11px; padding: 8px 16px; margin-top: 18px; }
  .hero-carousel .carousel-arrow { width: 32px; height: 32px; }
  .hero-carousel #slide-prev { left: 10px; }
  .hero-carousel #slide-next { right: 10px; }
}

@media (max-width: 767px) {
  .hero-carousel { --slide-size: calc(100vw - 32px); --slide-gap: 12px; --banner-height: clamp(550px, calc(150vw - 48px), 1050px); --banner-top: 12px; }
  .hero-slide { border-radius: 18px; }
  .hero-slide .slide-copy { width: 100%; height: auto; padding: 28px 28px 0; justify-content: flex-start; }
  .hero-slide .slide-overline { font-size: 12px; margin-bottom: 12px; }
  .hero-slide .slide-copy h2 { font-size: 32px; line-height: 1.32; }
  .hero-slide .slide-copy > p { font-size: 13px; line-height: 1.65; margin-top: 12px; }
  .hero-slide .slide-copy .button { min-height: 38px; font-size: 12px; padding: 8px 16px; margin-top: 14px; gap: 21px; }
  .hero-slide .slide-photo { inset: 0; width: 100%; height: 100%; }
  .hero-slide .slide-photo img { object-fit: cover; object-position: center; }
  .hero-carousel .carousel-arrow { display: none; }
  .carousel-pagination { bottom: 13px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .hero-slide .slide-copy { height: 50%; justify-content: center; padding: 30px 7% 0; }
  .hero-slide .slide-copy h2 { font-size: 40px; }
  .hero-slide .slide-copy > p { font-size: 15px; }
  .hero-slide .slide-copy .button { font-size: 13px; margin-top: 20px; }
}
@media (max-width: 360px) {
  .hero-carousel { --slide-size: calc(100vw - 24px); --banner-height: calc(150vw - 10px); --slide-gap: 10px; }
  .hero-slide .slide-copy { padding: 24px 22px 0; }
  .hero-slide .slide-copy h2 { font-size: 28px; }
  .hero-slide .slide-overline { font-size: 10px; margin-bottom: 10px; }
  .hero-slide .slide-copy > p { font-size: 12px; margin-top: 10px; }
  .hero-slide .slide-copy .button { min-height: 36px; margin-top: 12px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide .slide-copy .button { transition: none; }
}