/* Hero controls follow the rounded edge treatment of the reference. */
.hero-nav{display:grid;place-items:center;width:60px;height:60px;padding:5px;background:var(--page);color:var(--navy);border-radius:0;overflow:visible}
.hero-nav::before,.hero-nav::after{content:"";position:absolute;width:30px;height:30px;pointer-events:none}
.hero-nav::before{top:-30px}.hero-nav::after{bottom:-30px}
.hero-nav.prev{left:0;border-radius:0 30px 30px 0}
.hero-nav.next{right:0;border-radius:30px 0 0 30px}
.hero-nav.prev::before{left:0;background:radial-gradient(circle at 100% 0,transparent 29.7px,var(--page) 30px)}
.hero-nav.prev::after{left:0;background:radial-gradient(circle at 100% 100%,transparent 29.7px,var(--page) 30px)}
.hero-nav.next::before{right:0;background:radial-gradient(circle at 0 0,transparent 29.7px,var(--page) 30px)}
.hero-nav.next::after{right:0;background:radial-gradient(circle at 0 100%,transparent 29.7px,var(--page) 30px)}
.hero-nav-face{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#fff;transition:background .25s,color .25s}
.hero-nav .hero-arrow{display:block;width:27px;height:27px}
.hero-nav.prev .hero-arrow{transform:rotate(180deg)}
.hero-nav:hover{background:var(--page);color:var(--navy)}
.hero-nav:hover .hero-nav-face{background:var(--blue);color:#fff}
.hero-nav:focus-visible{outline:none}.hero-nav:focus-visible .hero-nav-face{outline:3px solid var(--blue);outline-offset:2px}
.round-cta{width:150px;height:150px}
.round-cta .round-cta-text{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:#fff;animation:spin 20s linear infinite}
.round-cta .round-cta-text text{font:500 16px/26px Sora,Arial,sans-serif;letter-spacing:3px}
.round-cta span{width:60px;height:60px;background:rgba(255,255,255,.2);transform:none}
.round-cta .round-cta-arrow{position:static;display:block;width:40px;height:40px;fill:none;animation:none;transition:transform .25s}
.round-cta:hover span{transform:none}
.round-cta:hover .round-cta-arrow{transform:translateX(3px)}
@media(max-width:600px){
  .round-cta{width:110px;height:110px}
  .round-cta span{width:54px;height:54px}.round-cta .round-cta-arrow{width:35px;height:35px}
  .hero-nav{width:44px;height:44px;padding:0;background:transparent;border-radius:50%;top:auto;bottom:18px;transform:none}
  .hero-nav.prev{left:auto;right:72px;border-radius:50%}.hero-nav.next{right:12px;border-radius:50%}
  .hero-nav::before,.hero-nav::after{display:none}
  .hero-nav-face{width:44px;height:44px}.hero-nav .hero-arrow{width:25px;height:25px}
  .hero-nav:hover{background:transparent}
}
@media(prefers-reduced-motion:reduce){.round-cta .round-cta-text{animation:none}}