/* Full-width KV at its original 16:9 ratio, behind the fixed navigation. */
.visually-hidden { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.hero.hero-original-kv {
 position: relative;
 display: flex;
 justify-content: center;
 min-height: 0;
 padding: 0;
 background: #066caf;
 overflow: hidden;
}
/* No enlarged or blurred image behind the original KV. */
.hero-original-kv::before { display: none; }
.hero-original-kv::after { display: none; }
.hero-frame {
 --cta-footer: 0px;
 position: relative;
 flex: 0 0 auto;
 width: 100%;
 padding-bottom: var(--cta-footer);
 container-type: inline-size;
}
.hero-visual {
 position: relative;
 width: 100%;
 aspect-ratio: 16 / 9;
 isolation: isolate;
 overflow: hidden;
}
.original-kv { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 16 / 9; object-fit: contain; }
.site-header:not(.is-scrolled):not(.is-menu-open) { background: transparent; }
.hero-original-kv + .privilege-nav { margin-top: 24px; }
@media (max-width:700px) {
 .hero-original-kv + .privilege-nav { margin-top: 20px; }
}

/* Both hero CTAs are required by Excel E6/F6 and E7/F7. */
.hero-actions { position: absolute; z-index: 4; left: 7.2%; bottom: 3%; display: flex; align-items: center; gap: clamp(9px,1cqw,16px); }
.hero-actions .button { width: auto; min-height: clamp(44px,3.65cqw,58px); padding: 11px clamp(16px,1.65cqw,28px); font-size: clamp(11px,1.1cqw,16px); font-weight: 600; line-height: 1.45; letter-spacing: 0; gap: clamp(8px,.8cqw,12px); white-space: nowrap; border-radius: 999px; }
.hero-actions .button svg { width: 15px; height: 15px; }
.hero-actions .button-gold { color: #153654; background: linear-gradient(110deg,#fff1c8,#f0d796 48%,#e8c67d); border: 1px solid #fff0c5b3; box-shadow: inset 0 1px 0 #fff9,0 5px 18px #322a2426; }
.hero-actions .button-glass { color: #173650; background: #ffffffcf; border: 1px solid #ffffffe6; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 #fff9,0 5px 18px #322a241a; }
.hero-actions .button::before { animation: none; }
.hero-actions .button:focus-visible { outline: 3px solid #164975; outline-offset: 4px; }
@media (hover:hover) and (pointer:fine) {
 .hero-actions .button:hover { transform: translateY(-2px); box-shadow: 0 9px 24px #322a2433,inset 0 1px 0 #fff9; }
 .hero-actions .button-glass:hover { background: #fffffff0; }
}
@media (max-width:900px) {
 /* Extend only the empty sky under mobile navigation, leaving KV groups unobstructed. */
 .hero-frame { --cta-footer: 64px; --kv-sky: max(0px,calc(var(--nav-height) + 8px - 7.6vw)); padding-top: var(--kv-sky); }
 .hero-frame::before { content: ''; position: absolute; inset: 0 0 auto; height: var(--kv-sky); background: url('assets/hero-motion/background.webp') center top / 100% auto no-repeat; transform: scaleY(-1); pointer-events: none; }
 .hero-frame::after { content: ''; position: absolute; z-index: 3; inset: auto 0 0; height: 82px; background: linear-gradient(#ffffff0a,#e5ebee42),url('assets/hero-kv-original.webp') left bottom / 400% auto no-repeat; mask-image: linear-gradient(transparent,#000 20px); -webkit-mask-image: linear-gradient(transparent,#000 20px); pointer-events: none; }
 .hero-actions { left: 50%; bottom: 10px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); justify-content: center; gap: 9px; }
 .hero-actions .button { min-height: 44px; padding: 11px 16px; font-size: 11px; gap: 8px; }
 .hero-actions .button svg { width: 13px; height: 13px; }
}
@media (max-width:374px) { .hero-actions .button { padding-inline: 12px; font-size: 10.5px; gap: 6px; } }

/* Independent PSB groups share the original 2560 × 1440 coordinate system. */

.hero-visual .original-kv { position: relative; z-index: 2; }
.kv-motion { position: absolute; inset: 0; z-index: 1; visibility: hidden; pointer-events: none; }
.kv-backdrop,.kv-detail { position: absolute; inset: 0; width: 100%; height: 100%; }
.kv-detail { mask-image: url('assets/hero-motion/detail-mask.webp'); mask-size: 100% 100%; -webkit-mask-image: url('assets/hero-motion/detail-mask.webp'); -webkit-mask-size: 100% 100%; }
.kv-part { position: absolute; transform-origin: center; }
.kv-part img { display: block; width: 100%; height: 100%; }
.kv-pending .hero-visual .original-kv { opacity: 0; }
.kv-pending .kv-motion,.hero-visual.is-animating .kv-motion { visibility: visible; }
.kv-pending .kv-part,.kv-pending .kv-detail { opacity: 0; }
.hero-visual.is-animating .original-kv { animation: kv-native-settle .45s 1.8s both; }
.is-animating .kv-detail { animation: kv-detail-in 1s .45s both; }
.is-animating .kv-part { animation: kv-rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
.is-animating .kv-wheel { animation-name: kv-wheel-in; animation-duration: 1.45s; }
.is-animating .kv-family { animation-delay: .12s; animation-duration: 1.2s; }
.is-animating .kv-label { animation-delay: .12s; }
.is-animating .kv-tagline { animation-delay: .28s; }
.is-animating .kv-headline { animation-delay: .44s; }
.is-animating .kv-award { animation-name: kv-award-in; animation-delay: .62s; animation-duration: 1.05s; }
@keyframes kv-rise { from { opacity: 0; transform: translate3d(0,5%,0); } to { opacity: 1; transform: none; } }
@keyframes kv-wheel-in { from { opacity: 0; transform: translate3d(0,1.5%,0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes kv-award-in { from { opacity: 0; transform: translate3d(0,2%,0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes kv-detail-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kv-native-settle { from { opacity: 0; } to { opacity: 1; } }
@media(prefers-reduced-motion:reduce) {
 .hero-visual .original-kv { opacity: 1!important; }
 .kv-motion { display: none!important; }
}