/* Illustrated realm systems carousel. */
.hero-carousel{position:relative;width:min(1020px,calc(100% - 40px));margin:24px auto;color:#f6ead7;pointer-events:auto;text-align:left}
.hero-carousel-stage{position:relative;height:235px;isolation:isolate;overflow:hidden;background:#10161c;border:1px solid #c7a06455;box-shadow:0 15px 44px #0006}
.hero-carousel-stage::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid #eac58c12;z-index:3}
.hero-banner{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .85s ease,visibility .85s;pointer-events:none}
.hero-banner.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
.hero-banner-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;display:block}
.hero-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080e16f5 0%,#080e16d4 27%,#080e1675 49%,#080e1605 78%),linear-gradient(0deg,#070d1655,transparent 60%);pointer-events:none}
.hero-banner-copy{position:relative;z-index:2;padding:25px 30px;width:55%;height:100%;display:flex;flex-direction:column;align-items:flex-start}
.hero-banner-kicker{color:#e4b876;font-size:8px;font-weight:650;letter-spacing:.2em;line-height:1.5}
.hero-banner-copy h2{font:30px/1.12 var(--serif);font-weight:400;letter-spacing:-.02em;margin:10px 0;color:#fbefdb;text-shadow:0 2px 12px #0008}
.hero-banner-copy p{font-size:11px;line-height:1.65;color:#d2cabc;max-width:350px;margin:0 0 12px}
.hero-banner-copy a{display:inline-flex;align-items:center;gap:14px;margin-top:auto;font-size:8px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:#e9be7c;padding:4px 0;border-bottom:1px solid #d3a86555}
.hero-banner-copy a:hover{color:#fff0d2;border-color:#f4d59e}
.hero-carousel button:focus-visible,.hero-banner-copy a:focus-visible{outline:2px solid #edc88e;outline-offset:3px}
@media(min-width:901px){
  .hero{height:calc(100svh - 27px);min-height:min(740px,calc(100svh - 27px))}
  .hero-content{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;height:100%;padding:112px 0 134px;align-items:stretch}
  .hero-intro{position:static;transform:none;width:100%;align-self:start}
  .hero-intro .hero-crest-lit{width:clamp(370px,30vw,460px);margin:-15px 0 -26px}
  .hero-intro .hero-claim{font-size:clamp(26px,2vw,31px)}
  .hero-intro .hero-description{margin-top:7px;font-size:11px}
  .hero-controls{position:static;transform:none;width:min(820px,calc(100% - 64px));margin:auto;align-self:end}
  .hero-carousel{align-self:center;justify-self:center;width:min(1020px,calc(100% - 80px));margin:0}
  .hero-carousel-stage{height:clamp(175px,calc(100svh - 640px),260px)}
}
@media(min-width:901px) and (max-height:850px){
  .hero-content{gap:7px;padding-top:112px}
  .hero-intro .hero-crest-lit{width:350px;margin-top:-16px;margin-bottom:-28px}
  .hero-intro .hero-claim{font-size:25px}
  .hero-banner-copy{padding:17px 25px;width:57%}
  .hero-banner-copy h2{font-size:27px;margin:8px 0}
  .hero-banner-copy p{font-size:10px;line-height:1.5;margin-bottom:8px}
  .hero-banner-kicker{font-size:7px}
}
@media(min-width:901px) and (max-height:760px){
  .hero-intro .hero-crest-lit{width:250px}
}
@media(max-width:900px){
  .hero{height:auto;max-height:none}
  .hero-content{padding-top:125px;padding-bottom:260px}
  .hero-intro .hero-crest-lit{width:min(490px,85vw)}
  .hero-intro .hero-claim{font-size:29px}
  .hero-intro .hero-description{margin-bottom:0}
  .hero-controls .hero-details{margin-top:20px}
  .hero-carousel{width:min(700px,100%);margin:25px 0}
  .hero-carousel-stage{height:235px}
  .hero-banner-copy{width:62%;padding:23px}
  .hero-banner-copy h2{font-size:28px}
}
@media(max-width:600px){
  .hero-content{padding-bottom:270px}
  .hero-intro .hero-claim{font-size:25px}
  .hero-carousel-stage{height:290px}
  .hero-banner-art{object-fit:cover;object-position:65% center}
  .hero-banner::after{background:linear-gradient(90deg,#080e16ed,#080e1699 65%,#080e1633),linear-gradient(0deg,#080e16c9,transparent)}
  .hero-banner-copy{width:90%;padding:26px 22px}
  .hero-banner-copy h2{font-size:31px;margin-top:15px}
  .hero-banner-copy p{font-size:12px;line-height:1.7}
  .hero-banner-copy a{font-size:9px}
  }

/* Fade gently even when the site's global reduced-motion rule is enabled. */
.hero-carousel .hero-banner{transition:opacity .9s ease,visibility .9s!important;transition-duration:.9s!important}
.hero-carousel .hero-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:grid;place-items:center;width:28px;height:48px;padding:0;border:0;background:transparent;color:#f0cc91;font:40px/1 Georgia,serif;text-shadow:0 2px 7px #000;cursor:pointer;transition:background .25s ease,color .25s ease}
.hero-carousel [data-carousel-prev]{left:7px}
.hero-carousel [data-carousel-next]{right:7px}
.hero-carousel .hero-carousel-arrow:hover{background:transparent;color:#fff0d1}
.hero-banner-copy{padding-left:48px}
@media(max-width:850px){.hero-banner-copy{padding-left:44px}.hero-carousel .hero-carousel-arrow{width:24px;height:42px}.hero-carousel [data-carousel-prev]{left:4px}.hero-carousel [data-carousel-next]{right:4px}}
@media(prefers-reduced-motion:reduce){.hero-carousel .hero-banner{transition-duration:.6s!important}}

/* Reveal the illustration first, then its copy. */
.hero-carousel .hero-banner-copy{
  opacity:0;
  transform:translateY(7px);
  transition:opacity .35s ease,transform .35s ease!important;
  transition-delay:0s!important;
  transition-duration:.35s!important;
}
.hero-carousel .hero-banner.is-active .hero-banner-copy{
  opacity:1;
  transform:translateY(0);
  transition-duration:.7s!important;
  transition-delay:.6s!important;
}
@media(prefers-reduced-motion:reduce){
  .hero-carousel .hero-banner-copy{transform:none}
  .hero-carousel .hero-banner.is-active .hero-banner-copy{transition-duration:.5s!important;transition-delay:.45s!important}
}
/* Discreet direct slide selection inside the illustration. */
.hero-banner-selectors{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:3px}
.hero-banner-selectors button{display:grid;place-items:center;width:23px;height:22px;padding:0;border:0;background:transparent;cursor:pointer}
.hero-banner-selectors button::before{content:"";width:16px;height:2px;border-radius:2px;background:#f0d5a35c;box-shadow:0 1px 4px #000b;transition:background .3s ease,box-shadow .3s ease}
.hero-banner-selectors button[aria-pressed=true]::before{background:#f1c683;box-shadow:0 0 7px #dba65777}
.hero-banner-selectors button:hover::before{background:#fff0cc}
.hero-banner-selectors button:focus-visible{outline:1px solid #ebc88e;outline-offset:-2px}
@media(max-width:600px){.hero-banner-selectors{bottom:4px;gap:1px}.hero-banner-selectors button{width:22px}}

/* PvP composition faces the illustration on the left and copy on the right. */
.hero-banner--right .hero-banner-art{transform:scaleX(-1)}
.hero-banner--right::after{background:linear-gradient(270deg,#080e16f5 0%,#080e16d4 27%,#080e1675 49%,#080e1605 78%),linear-gradient(0deg,#070d1655,transparent 60%)}
.hero-banner--right .hero-banner-copy{margin-left:auto;align-items:flex-end;text-align:right;padding-left:24px;padding-right:48px}
.hero-carousel .hero-banner--right .hero-banner-copy{transform:translateX(15px)}
.hero-carousel .hero-banner--right.is-active .hero-banner-copy{transform:translateX(0)}
@media(max-width:850px){.hero-banner--right .hero-banner-copy{padding-right:44px}}
@media(max-width:600px){
  .hero-banner--right::after{background:linear-gradient(270deg,#080e16ed,#080e1699 65%,#080e1633),linear-gradient(0deg,#080e16c9,transparent)}
}
@media(prefers-reduced-motion:reduce){.hero-carousel .hero-banner--right .hero-banner-copy{transform:none}}