.hero-carousel {
  min-width: 0;
  border: 1px solid #c7d3f3;
  border-radius: 12px;
  background: white;
  box-shadow: 12px 15px 0 #dce4ff;
  padding: 8px;
  animation: rise .85s .12s var(--ease) both;
}
.hero-slide-frame { overflow: hidden; border-radius: 7px; background: #111d36; }
.hero-slide { position: relative; }
.hero-slide-art {
  position: relative;
  container-type: size;
  overflow: hidden;
  aspect-ratio: 1.65;
  background: #1c2740;
}
.hero-slide-art .hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: 77% 50%; }
.hero-slide-art .crop {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: max(100cqw, calc(100cqh * (var(--ratio))));
}
.hero-slide[data-enter] .hero-slide-art { animation: showcase-in .5s var(--ease) both; }
@keyframes showcase-in { from { opacity: .3; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
.hero-slide-caption {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #121e42;
  padding: clamp(12px, 2vw, 22px);
  color: white;
}
.hero-slide-caption h2 { font-size: clamp(1.3rem, 2.5vw, 2.2rem); letter-spacing: -.035em; text-wrap: initial; }
.hero-slide-caption p { color: #dbe5ff; margin-top: 5px; font-size: clamp(.78rem, 1.05vw, .98rem); }
.hero-slide-link {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #fff;
  color: #1431aa;
  font-size: 1.25rem;
  transition: background .18s;
}
.hero-slide-link:hover { background: #dce6ff; }
.hero-slider-controls,.hero-slider-position,.hero-dots,.hero-slider-buttons { display: flex; align-items: center; }
.hero-slider-controls { justify-content: space-between; gap: 7px; padding: 7px 1px 0; }
.hero-slider-position { gap: 7px; padding-left: 6px; }
#hero-slide-count { color: #243662; font: 700 .68rem Consolas, monospace; white-space: nowrap; }
.hero-slider-controls button { display: grid; place-items: center; border-radius: 5px; color: #172e93; }
.hero-dots button { width: 28px; min-height: 44px; background: transparent; border: 0; }
.hero-dots button::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #8a9bbd; }
.hero-dots button[aria-pressed="true"]::before { background: #2449d7; width: 16px; border-radius: 4px; }
.hero-slider-buttons { gap: 4px; }
.hero-slider-buttons button { width: 44px; height: 44px; background: #edf1ff; border: 1px solid #c7d3f3; font-size: 1.1rem; }
.hero-slider-buttons button:hover { background: #dce6ff; }
.hero-slider-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 560px) {
  .hero-carousel { padding: 6px; box-shadow: 6px 8px 0 #dce4ff; }
  .hero-dots button { width: 22px; }
  .hero-slider-position { gap: 3px; padding-left: 2px; }
  .hero-slide-caption { min-height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-carousel,.hero-slide[data-enter] .hero-slide-art { animation: none; }
}