/* The two Banner scenes use only quiet, clickable position dots. */
.hero .hero-bottom{
  position:absolute;
  z-index:4;
  left:50%;
  right:auto;
  bottom:64px;
  width:auto;
  max-width:none;
  height:44px;
  padding:0;
  margin:0;
  transform:translateX(-50%);
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.hero .hero-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  height:44px;
}
.hero .hero-pagination button,
.hero .hero-pagination button.is-active{
  position:relative;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:transparent;
  opacity:1;
  cursor:pointer;
}
.hero .hero-pagination button::after{
  content:"";
  width:9px;
  height:9px;
  border:1px solid rgba(44,35,27,.62);
  border-radius:50%;
  background:rgba(255,252,245,.58);
  box-shadow:0 1px 7px rgba(24,19,15,.42);
  transition:width .25s ease,height .25s ease,background .25s ease,transform .25s ease;
}
.hero .hero-pagination button.is-active::after{
  width:11px;
  height:11px;
  background:#fffaf1;
}
.hero .hero-pagination button:hover::after{transform:scale(1.25)}
.hero .hero-pagination button:focus-visible{outline:2px solid #fffaf1;outline-offset:-5px}
@media(max-width:760px){
  .hero .hero-bottom{bottom:42px}
  .hero-slide--access .hero-copy{width:64%;max-width:64%}
}
@media(max-width:460px){
  .hero-slide--access h2{font-size:clamp(24px,6.8vw,28px)}
}
@media(prefers-reduced-motion:reduce){
  .hero .hero-pagination button::after{transition:none}
}