/* The opaque intro is a separate screen; the hero starts only after it closes. */
.site-intro { display: none; position: fixed; inset: 0; z-index: 100; background: #f8f7f4; pointer-events: none; overflow: hidden; }
.intro-active .site-intro { display: block; animation: intro-safety 3.2s step-end forwards; }
.intro-word { position: absolute; left: 20%; bottom: 28px; display: inline-flex; align-items: center; color: #242733; font-family: "Manrope", "Helvetica Neue", Arial, sans-serif; font-size: clamp(60px, 19.4vw, 420px); font-weight: 800; line-height: 1.15; letter-spacing: -.065em; transform: skewX(-8deg); transition: opacity .28s ease, translate .28s ease; }
.intro-typed { display: block; white-space: nowrap; }
.intro-cursor { display: block; width: max(3px, .015em); height: .78em; margin-left: .08em; background: #2446e6; animation: intro-caret .55s step-end 4; }
.intro-active.intro-exiting .intro-word { opacity: 0; translate: 0 -12px; }
@keyframes intro-caret { 0%, 48%, 100% { opacity: 1; } 49%, 98% { opacity: 0; } }
@keyframes intro-safety { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .intro-active .site-intro { display: none; animation: none; }
}