/* Each topic has its own complete banner. No simultaneous next-banner preview. */
.header{transform:translateY(0);transition:transform .24s ease,background .25s,box-shadow .25s}
.header.is-collapsed{transform:translateY(calc(-100% - 1px));pointer-events:none}
.hero-banner-stage,.hero-banner-stage>.slides{position:absolute;inset:0;width:100%;height:100%;min-height:0}
.hero .banner-slide{position:absolute;inset:0;width:100%;height:100%;margin:0;isolation:isolate}
.banner-copy{position:absolute;top:25.38%;left:8.07%;width:42%;z-index:3}
.banner-copy .hero-description{max-width:31vw;line-height:1.45}
.banner-copy .hero-actions{margin-top:1.56vw}
.banner-slide>.hero-portrait{left:55%;top:13.22034%;width:32.291667%;height:86.77966%}
.banner-art{position:absolute;left:54%;top:21%;width:34%;height:68%;display:grid;place-items:center;color:#76d2de;z-index:1;pointer-events:none}
.banner-orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #76d2de55;border-radius:50%;width:79%;aspect-ratio:1}
.banner-orbit.orbit-inner{width:58%;border-color:#76d2de25}
.banner-orbit.orbit-outer:after{content:'';position:absolute;inset:-15%;border:1px dashed #76d2de22;border-radius:50%}
.banner-symbol{width:35%;height:45%;fill:none;stroke:currentColor;stroke-width:.8;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.banner-art-dot{position:absolute;left:15%;top:27%;width:9px;height:9px;background:#6ad0dc;border-radius:50%;box-shadow:0 0 20px #6ad0dc55}
.banner-art-mei .banner-art-dot{left:auto;right:17%;top:70%}
@media(max-width:1179px) and (min-width:761px){
 .banner-copy{left:6.5%;top:140px;width:44%}
 .banner-copy .hero-description{max-width:100%;font-size:15px}
 .banner-copy .hero-actions{margin-top:24px}
 .banner-slide>.hero-portrait{left:52%;top:90px;width:48%;height:510px}
 .banner-art{left:52%;top:25%;width:44%;height:65%}
}
@media(min-width:761px) and (max-width:900px){
 .hero{height:620px}
 .banner-copy{top:140px;width:46%}
 .banner-copy .hero-description{font-size:14px}
 .banner-slide>.hero-portrait{top:110px;height:510px}
 .banner-art{top:26%;height:64%}
}
@media(max-width:760px){
 .hero-layout.container{display:block;padding:116px 24px 12px;height:auto}
 .hero-banner-stage,.hero-banner-stage>.slides{position:relative;inset:auto;width:100%;height:auto;min-height:0}
 .hero .banner-slide{position:relative;inset:auto;display:grid;grid-template-columns:1fr;width:100%;height:auto;margin:0}
 .banner-copy{position:relative;inset:auto;width:100%;min-height:330px;padding:0;z-index:3}
 .banner-copy .hero-description{max-width:480px;line-height:1.6;font-size:14px}
 .banner-copy .hero-actions{margin-top:24px}
 .banner-slide>.hero-portrait{position:relative;left:auto;top:auto;width:min(100%,496px);height:auto;aspect-ratio:496/514;margin:0 auto}
 .banner-art{position:relative;left:auto;top:auto;width:min(100%,496px);height:auto;aspect-ratio:496/514;margin:0 auto}
 .banner-symbol{width:32%;height:40%}
 .banner-art-dot{width:7px;height:7px}
}
@media(max-width:370px){
 .hero-layout.container{padding:110px 18px 12px}
 .banner-copy{min-height:330px}
 .banner-copy .hero-description{font-size:13px}
}

/* Extend the photographic atmosphere, blending it into the navy banner. */
.banner-segment-label{position:absolute;right:8%;bottom:16%;z-index:2;display:flex;align-items:center;gap:14px;padding:16px 20px;border:1px solid #65cbd844;border-radius:16px;background:#0b2443ed;box-shadow:0 12px 32px #03122630;pointer-events:none}
.banner-segment-label>svg{width:42px;height:42px;flex-shrink:0;fill:none;stroke:#6bd4df;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.banner-segment-label strong{display:block;font-size:23px;line-height:1.1;font-weight:650;letter-spacing:.02em;color:#6bd4df}
.banner-segment-label small{display:block;max-width:145px;font-size:10px;line-height:1.5;margin-top:5px;color:#e2f1f5}
@media(min-width:761px) and (max-width:1179px){.banner-segment-label{right:4%;bottom:12%;padding:14px 16px;gap:10px}.banner-segment-label>svg{width:36px;height:36px}.banner-segment-label strong{font-size:21px}.banner-segment-label small{font-size:9px;max-width:130px}}
@media(max-width:760px){.banner-segment-label{right:4px;bottom:23px;gap:10px;padding:12px 15px;border-radius:13px}.banner-segment-label>svg{width:32px;height:32px}.banner-segment-label strong{font-size:20px}.banner-segment-label small{font-size:9px;max-width:130px;margin-top:3px}.banner-mei .hero-topic{font-size:9px;letter-spacing:.07em;gap:10px}.banner-mei .hero-topic:after{width:24px}}
.banner-photo-background{position:absolute;inset:0 0 0 34%;overflow:hidden;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 56% 48%,#27596c99 0%,#173c5666 40%,transparent 78%);mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 84%,transparent 100%)}
.banner-photo-background-frame{position:absolute;left:26.515%;bottom:0;width:55.303%;aspect-ratio:496/514;overflow:hidden;transform:scale(1.65,1.1);transform-origin:center;filter:blur(28px);opacity:.38}
.banner-photo-background-frame>img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center 36%}
.banner-slide>.hero-portrait>img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center 25%}
.banner-photo-background:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#081a36 0%,#081a36b3 18%,transparent 53%,#081a364d 82%,#081a36 100%),linear-gradient(0deg,#081a36 0%,transparent 35%,transparent 76%,#081a36a6 100%)}
.banner-slide>.hero-portrait{mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 5%,#000 87%,transparent 100%);mask-composite:intersect}
@media(min-width:1180px){
 .hero{height:42.317708vw}
 .banner-slide>.hero-portrait{left:51.5%;top:auto;bottom:0;width:36.5%;height:auto;aspect-ratio:496/514}
}
@media(max-width:1179px) and (min-width:761px){
 .banner-slide>.hero-portrait{top:auto;bottom:0;height:auto;aspect-ratio:496/514}
 .banner-photo-background-frame{left:27%;width:73%;bottom:0}
}
@media(min-width:761px) and (max-width:900px){
 .banner-slide>.hero-portrait{left:47%;width:52%}
}
@media(max-width:760px){
 .banner-photo-background{inset:275px -24px -12px;mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%)}
 .banner-photo-background-frame{left:10%;bottom:0;width:80%;filter:blur(20px);opacity:.35}
 .banner-photo-background:after{background:linear-gradient(90deg,#081a36b3,transparent 42%,transparent 58%,#081a36b3),linear-gradient(180deg,#081a36 0%,transparent 35%,#081a36 100%)}
 .banner-slide>.hero-portrait{top:auto;bottom:auto}
}