/* The intro is hidden unless its small bootstrap has successfully run. */
#brandIntro{display:none;position:fixed;inset:0;z-index:100000;background:#050505;color:#fff;align-items:center;justify-content:center;flex-direction:column}
html.intro-active #brandIntro{display:flex}html.intro-active{overflow:hidden}
.intro-lockup{width:min(78vw,650px);animation:intro-logo-in .45s ease-out both}
.intro-signature{display:flex;align-items:center;position:relative;gap:8px}
.intro-wordmark{position:relative;display:block;width:84%;height:clamp(48px,12vw,110px);overflow:hidden}
.intro-wordmark img{position:absolute;width:100%;height:auto;max-width:none;top:50%;left:0;transform:translateY(-50%);filter:brightness(0) invert(1)}
.intro-signature sup{position:absolute;left:80%;top:7%;font:clamp(7px,1.3vw,11px) Arial,sans-serif}
.intro-bands{display:flex;gap:clamp(4px,.8vw,7px);height:clamp(26px,6vw,52px);margin-left:1%}
.intro-bands i{display:block;width:clamp(7px,1.6vw,14px);height:100%;transform:skewX(-20deg);opacity:0;animation:intro-band-in .25s ease-out forwards;background:#f28b72;animation-delay:1.4s}
.intro-bands i:nth-child(2){background:#79b7a4;animation-delay:2.4s}.intro-bands i:nth-child(3){background:#d3bb91;animation-delay:3.4s}
.intro-lockup p{text-align:center;font:400 clamp(10px,1.7vw,14px) Arial,sans-serif;letter-spacing:.3em;margin:13px 0 0;text-transform:uppercase}
.intro-skip{position:absolute;bottom:max(26px,env(safe-area-inset-bottom));right:28px;background:transparent;border:1px solid #555;border-radius:50%;color:#ccc;width:36px;height:36px;cursor:pointer}.intro-skip:focus-visible{outline:2px solid white;outline-offset:4px}
#brandIntro.intro-leaving{opacity:0;transition:opacity .35s ease;pointer-events:none}
@keyframes intro-logo-in{from{opacity:0}to{opacity:1}}@keyframes intro-band-in{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.intro-lockup,.intro-bands i{animation:none;opacity:1}#brandIntro.intro-leaving{transition:none}}