.brand-intro{display:none}.intro-active body{overflow:hidden}.intro-active .brand-intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:radial-gradient(ellipse at 65% 45%,#e5eaff,#fff 65%);color:#192047;animation:none;isolation:isolate}.intro-active.intro-exiting .brand-intro{animation:intro-reveal-page .55s cubic-bezier(.45,0,.2,1) both}.intro-center{text-align:center;padding:28px;perspective:900px}.intro-logo{display:flex;align-items:baseline;justify-content:center;gap:.015em;font-family:Arial,sans-serif;font-size:clamp(4.5rem,14vw,10rem);font-weight:700;letter-spacing:-.045em;line-height:1.15;white-space:nowrap}.intro-logo>span{display:block;animation:intro-letter .75s cubic-bezier(.16,1,.3,1) both;transform-origin:50% 100%;text-shadow:0 1px 0 #b9c4e1,0 3px 0 #e2e7f6,0 10px 22px #19204712}.intro-logo>span:nth-child(2){animation-delay:.08s}.intro-logo>span:nth-child(3){animation-delay:.16s;margin-inline:.045em}.intro-logo>span:nth-child(4){animation-delay:.24s}.intro-logo>span:nth-child(5){animation-delay:.32s}.intro-caption{margin-top:22px;font-size:clamp(1rem,2vw,1.2rem);line-height:1.6;letter-spacing:.015em;color:#546078;animation:intro-caption .6s .6s both}.intro-skip{position:absolute;right:clamp(22px,5vw,70px);bottom:32px;border:1px solid #aeb9d7;border-radius:100px;background:transparent;color:#344467;padding:10px 18px;font:inherit;font-size:.875rem;cursor:pointer}.intro-skip:hover{background:#fff}.intro-skip:focus-visible{outline:3px solid #3d4bc4;outline-offset:4px}@keyframes intro-letter{from{opacity:0;transform:translateY(42px) rotateX(-60deg);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes intro-caption{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes intro-reveal-page{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden;pointer-events:none}}@media(prefers-reduced-motion:reduce){.intro-active .brand-intro{display:none}.intro-active body{overflow:auto}}

.intro-logo{color:#253569;animation:intro-brand-turn 2.3s ease-in-out both;transform-origin:center}
.intro-logo>span{text-shadow:0 1px 0 #cad5f0,0 2px 0 #a1b1d5,0 3px 0 #8194bf,0 4px 0 #6278a8,0 5px 0 #465c8f,0 6px 0 #304574,0 14px 20px #20376330}
@keyframes intro-brand-turn{0%{transform:rotateY(-12deg) rotateX(5deg)}65%{transform:rotateY(5deg) rotateX(-2deg) translateY(-5px)}100%{transform:rotateY(0) rotateX(0)}}
@media(prefers-reduced-motion:reduce){.intro-logo,.intro-logo>span{animation:none;transform:none}}

/* The hand introduces the same visual world as the opening page. */
.brand-intro{overflow:hidden}.intro-hand{position:absolute;inset:0;z-index:-2;pointer-events:none}.intro-hand img{width:100%;height:100%;object-fit:cover;object-position:64% center;animation:intro-hand-arrive 2.25s cubic-bezier(.22,1,.36,1) both}.brand-intro:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#ffffffed 0%,#ffffffbd 30%,#ffffff26 60%,transparent)}.intro-active .intro-center{position:relative;justify-self:start;margin-left:clamp(24px,9vw,170px)}.intro-skip{background:#ffffffd9}
@keyframes intro-hand-arrive{from{transform:scale(1.05) translateY(8px)}to{transform:scale(1.01) translateY(0)}}
@media(max-width:760px){.intro-hand img{object-position:center 58%}.intro-active .intro-center{justify-self:center;align-self:start;margin:clamp(70px,13vh,140px) 0 0;padding:20px}.brand-intro:after{background:linear-gradient(180deg,#ffffffb3 0%,#ffffff66 32%,transparent 55%)}.intro-caption{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.intro-hand img{animation:none;transform:none}}

/* The wordmark approaches from depth and stays visible until the page opens. */
.intro-logo{animation:intro-logo-depth 1.2s cubic-bezier(.22,1,.36,1) both;transform-style:preserve-3d}
.intro-logo>span{animation:none}
.intro-caption{animation:intro-caption-depth 1.2s cubic-bezier(.22,1,.36,1) both}
@keyframes intro-logo-depth{0%{opacity:0;transform:translateZ(-650px) scale(.35);filter:blur(7px)}65%,100%{opacity:1;transform:translateZ(0) scale(1);filter:blur(0)}}
@keyframes intro-caption-depth{0%,30%{opacity:0;transform:translateY(10px)}65%,100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.intro-logo,.intro-logo>span,.intro-caption{animation:none;transform:none;filter:none;opacity:1}}

/* Reserve the scrollbar space so unlocking the page does not shift the layout. */
html{scrollbar-gutter:stable}
/* The wordmark settles before the page dissolves for .55 seconds. */
.intro-active.intro-exiting main>section:first-child>.container{animation:intro-content-arrive .55s cubic-bezier(.16,1,.3,1) both}
@keyframes intro-content-arrive{from{opacity:.25;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.intro-active.intro-exiting main>section:first-child>.container{animation:none}}
