html{overflow-y:scroll}
body.intro-open{position:fixed;inset:0;overflow:hidden}
body.intro-open .hero-brand,body.intro-open .compact-brand img{opacity:0}
/* Keep the site logo opaque before fading the overlaid logo; two simultaneous fades dim it. */
body.intro-open.intro-handoff .hero-brand,body.intro-open.intro-handoff .compact-brand img{opacity:1}
#brand-intro{position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;padding:0;border:0;overflow:hidden;background:transparent;color:#fff}
#brand-intro[open]{display:grid;place-items:center}
#brand-intro::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#123047 0%,#051c2d 56%,#041724 100%);opacity:1;transition:opacity .48s ease}
#brand-intro::backdrop{background:transparent;backdrop-filter:none}
#brand-intro.is-leaving{pointer-events:none}
#brand-intro.is-leaving::before{opacity:0}
.intro-composition{position:relative;z-index:1;width:min(700px,calc(100vw - 56px));transform-origin:top left}
#brand-intro.is-leaving .intro-composition{transform:translate(var(--fly-x),var(--fly-y)) scale(var(--fly-scale));transition:transform 1.05s cubic-bezier(.45,0,.2,1)}
.intro-logo-stage{position:relative;width:100%;aspect-ratio:1385/330}
.intro-white{position:absolute;inset:0;opacity:1;transition:opacity 0s linear}
.intro-final-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 0s linear}
#brand-intro.is-leaving .intro-white{opacity:0}
#brand-intro.is-leaving .intro-final-logo{opacity:1}
#brand-intro.is-leaving.is-handoff .intro-final-logo{opacity:0;transition:opacity .18s ease .03s}
.intro-mark{position:absolute;inset:0 auto 0 0;width:24%;height:100%;overflow:visible}
.intro-mark path{opacity:0;transform-box:fill-box;transform-origin:center}
#brand-intro.is-running .intro-mark path{animation:intro-piece .65s cubic-bezier(.18,.85,.24,1) var(--delay) both}
.intro-mark path:nth-child(1){--dx:-11px;--dy:-8px;--delay:.08s}
.intro-mark path:nth-child(2){--dx:10px;--dy:-9px;--delay:.16s}
.intro-mark path:nth-child(3){--dx:-10px;--dy:9px;--delay:.24s}
.intro-mark path:nth-child(4){--dx:11px;--dy:8px;--delay:.32s}
.intro-wordmark{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;clip-path:inset(0 72% 0 28%);opacity:0}
#brand-intro.is-running .intro-wordmark{animation:intro-word .72s cubic-bezier(.2,.8,.2,1) .59s both}
.intro-rule{display:block;margin:18px 0 0 28%;height:1px;width:72%;background:linear-gradient(90deg,#ffffff88,#ffffff1c);transform:scaleX(0);transform-origin:left;opacity:0}
#brand-intro.is-running .intro-rule{animation:intro-rule .72s ease .72s both}
#brand-intro.is-leaving .intro-rule{visibility:hidden}
#intro-skip{position:absolute;z-index:2;right:5vw;bottom:35px;display:flex;align-items:center;gap:22px;border:1px solid #ffffff44;border-radius:30px;padding:12px 20px;font-size:12px;color:#fff;background:#071c2b99;transition:opacity .2s,background .2s}
#brand-intro.is-leaving #intro-skip{opacity:0}
#intro-skip:hover{background:#ffffff20}
#intro-skip:focus-visible{outline:2px solid white;outline-offset:4px}
@keyframes intro-piece{from{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.97)}to{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes intro-word{from{opacity:.8;clip-path:inset(0 72% 0 28%);transform:translateX(-9px)}to{opacity:1;clip-path:inset(0 0 0 28%);transform:translateX(0)}}
@keyframes intro-rule{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@media(max-width:600px){.intro-composition{width:calc(100vw - 40px)}.intro-rule{margin-top:13px}#intro-skip{right:20px;bottom:22px}}
@media(prefers-reduced-motion:reduce){#brand-intro{transition:none}}