/* Opening moment, once per visit */
.imm-intro { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 45%, #1a2160 0%, #050514 70%); animation: immIntroOut .7s 2.4s forwards; }
.imm-seen .imm-intro { display: none; }
.imm-intro.out { opacity: 0; visibility: hidden; transition: opacity .7s, visibility .7s; }
.imm-intro-in { text-align: center; padding: 0 24px; }
.imm-intro img { width: clamp(150px, 18vw, 220px); height: auto; opacity: 0; animation: immFadeUp .9s .15s forwards; }
.imm-intro-line { display: block; width: 0; height: 2px; margin: 22px auto; background: var(--peri); animation: immLine 1.1s .5s forwards cubic-bezier(.6, 0, .2, 1); }
.imm-intro p { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--mist); opacity: 0; animation: immFadeUp .9s .9s forwards; }
.imm-skip { position: absolute; right: 24px; bottom: 24px; padding: 10px 16px; border: 1px solid rgba(215, 224, 235, .25); border-radius: 999px; background: transparent; color: var(--mist); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.imm-skip:hover { background: var(--peri); border-color: var(--peri); color: var(--ink); }
@keyframes immIntroOut { to { opacity: 0; visibility: hidden; } }
@keyframes immFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes immLine { to { width: 120px; } }

/* Headlines rise into view, word by word */
.imm-js .imm-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.imm-js .imm-split .w > span { display: inline-block; transform: translateY(105%); transition: transform .95s cubic-bezier(.2, .7, .1, 1); transition-delay: calc(var(--i, 0) * 45ms); }
.imm-js .imm-split.in .w > span { transform: none; }

/* Items arrive one after another */
.imm-js [data-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .8s cubic-bezier(.2, .7, .1, 1); transition-delay: calc(var(--si, 0) * 90ms); }
.imm-js [data-stagger].in > * { opacity: 1; transform: none; }

/* Depth: layers move at different speeds */
[data-depth] { translate: 0 var(--dy, 0px); will-change: translate; }
.imm-depth-photo { scale: 1.14; }

/* Home hero: giant word behind Mo, floating credentials */
.imm-bigword { position: absolute; z-index: 0; left: 50%; top: 18%; translate: -50% var(--dy, 0px); font-size: clamp(6rem, 22vw, 20rem); font-weight: 700; letter-spacing: -.06em; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px rgba(215, 224, 235, .22); white-space: nowrap; pointer-events: none; user-select: none; }
.hero .hero-figure { z-index: 1; }
.imm-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(11, 11, 23, .5); border: 1px solid rgba(215, 224, 235, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--white); font-size: .82rem; font-weight: 600; white-space: nowrap; animation: immBob 5s ease-in-out infinite; pointer-events: none; }
.imm-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--peri); }
.imm-chip.c1 { top: 24%; left: 58%; }
.imm-chip.c2 { top: 38%; left: 24%; animation-delay: -1.6s; }
.imm-chip.c3 { top: 52%; left: 60%; animation-delay: -3.2s; }
@keyframes immBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 760px) { .imm-chip { font-size: .7rem; padding: 7px 12px; } .imm-chip.c1 { top: 16%; left: auto; right: 16px; } .imm-chip.c2 { top: 27%; left: 16px; } .imm-chip.c3 { top: 38%; left: auto; right: 20px; } .imm-bigword { top: 12%; } }

/* Framework words as a slow-moving band */
.imm-marquee { overflow: hidden; margin-top: var(--gap); padding: clamp(18px, 3vw, 34px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.imm-track { display: flex; align-items: center; gap: .5em; width: max-content; font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; animation: immMarq 70s linear infinite; }
.imm-track span { color: transparent; -webkit-text-stroke: 1.5px rgba(215, 224, 235, .38); }
.imm-track i { font-style: normal; color: var(--peri); font-size: .28em; }
.imm-marquee.sg .imm-track span { -webkit-text-stroke-color: rgba(202, 214, 70, .6); }
.imm-marquee.sg .imm-track i { color: var(--sg-lime); }
@keyframes immMarq { to { transform: translateX(-50%); } }

/* Home: Mo's story as a pinned scene */
.imm-story { position: relative; height: 440vh; margin-top: var(--gap); }
.story-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; border-radius: var(--r); background: radial-gradient(80% 90% at 75% 40%, #2e3ea6 0%, var(--midnight) 45%, #050514 100%); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); align-items: center; padding: 0 clamp(20px, 4vw, 56px); }
.story-head { position: absolute; top: clamp(24px, 5vh, 48px); left: clamp(20px, 4vw, 56px); z-index: 3; }
.story-head .kicker { color: var(--mist); margin: 0; }
.story-chs { position: relative; z-index: 2; min-height: 26rem; }
.story-ch { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .7s cubic-bezier(.2, .7, .1, 1); pointer-events: none; }
.story-ch.on { opacity: 1; transform: none; pointer-events: auto; }
.story-yr { display: block; font-size: clamp(5rem, 12vw, 10.5rem); font-weight: 700; letter-spacing: -.055em; line-height: .85; color: transparent; -webkit-text-stroke: 1.5px rgba(215, 224, 235, .6); margin-bottom: 1.4rem; }
.story-ch .meta { display: block; font-size: .85rem; font-weight: 600; color: var(--peri); margin-bottom: .6rem; }
.story-ch h3 { font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 .9rem; }
.story-ch p { margin: 0; color: rgba(255, 255, 255, .8); max-width: 30em; }
.story-ch .link { display: inline-block; margin-top: 1.2rem; }
.story-photos { position: relative; height: 76%; }
.story-ph { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .9s, transform 1.4s cubic-bezier(.2, .7, .1, 1); }
.story-ph.on { opacity: 1; transform: none; }
.story-ph img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: grayscale(1) contrast(1.05); }
.story-ph.cover img { object-fit: cover; object-position: center; border-radius: var(--r-sm); }
.story-rail { position: absolute; z-index: 3; left: clamp(20px, 4vw, 56px); right: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vh, 40px); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(215, 224, 235, .2); }
.story-fill { position: absolute; left: 0; top: -1px; height: 2px; width: calc(var(--sp, 0) * 100%); background: var(--peri); }
.story-stop { padding-top: 12px; font-size: .78rem; font-weight: 600; color: rgba(215, 224, 235, .45); transition: color .4s; }
.story-stop.on { color: var(--white); }
.story-count { position: absolute; z-index: 3; top: clamp(24px, 5vh, 48px); right: clamp(20px, 4vw, 56px); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--body); }
.story-count b { color: var(--white); }
@media (max-width: 760px) {
  .story-sticky { grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-items: start; padding-top: 88px; }
  .story-chs { min-height: 21rem; }
  .story-ch { top: 0; translate: none; }
  .story-yr { font-size: 4.6rem; margin-bottom: 1rem; }
  .story-ch h3 { font-size: 1.7rem; }
  .story-ch p { font-size: .92rem; }
  .story-photos { position: absolute; left: 0; right: 0; bottom: 70px; height: 34%; opacity: .55; }
  .story-stop { font-size: .66rem; }
}
.imm-story.still { height: auto; }
.imm-story.still .story-sticky { position: relative; height: auto; display: block; padding: 96px clamp(20px, 4vw, 56px) 48px; }
.imm-story.still .story-chs { min-height: 0; }
.imm-story.still .story-ch { position: static; translate: none; opacity: 1; transform: none; margin-bottom: 48px; }
.imm-story.still .story-photos, .imm-story.still .story-rail, .imm-story.still .story-count { display: none; }

@media (prefers-reduced-motion: reduce) {
  .imm-track { animation: none; }
  .imm-chip { animation: none; }
  [data-depth] { translate: none; }
}
/* Meet Mo hero: Mo's photo in front of his name */
.mo-hero { position: relative; display: block; min-height: min(94vh, 880px); overflow: hidden; }
.mo-hero::after { background: linear-gradient(0deg, rgba(5, 5, 20, .7) 0%, rgba(5, 5, 20, .15) 34%, rgba(5, 5, 20, 0) 55%); }
.mo-top { position: absolute; z-index: 3; top: clamp(86px, 11vh, 112px); left: clamp(20px, 4vw, 48px); }
.mo-top .kicker { margin: 0; }
.mo-name { position: absolute; z-index: 1; left: clamp(12px, 2vw, 28px); right: clamp(12px, 2vw, 28px); top: clamp(128px, 16vh, 160px); margin: 0; display: flex; flex-direction: column; align-items: center; max-width: none; line-height: .8; }
.hero h1.mo-name { max-width: none; width: auto; font-size: clamp(1rem, 1.6vw, 1.4rem); letter-spacing: 0; }
.mo-hi { align-self: flex-start; margin: 0 0 .25em .15em; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.8rem); letter-spacing: 0; line-height: 1; color: var(--peri); }
.mo-name .fit-line { display: block; font-size: 15vw; font-weight: 700; letter-spacing: -.05em; line-height: .8; text-transform: uppercase; color: var(--white); white-space: nowrap; animation: moUp 1.1s cubic-bezier(.2, .7, .1, 1) both; }
.mo-name .fit-line + .fit-line { animation-delay: .12s; }
@keyframes moUp { from { opacity: 0; transform: translateY(35%); } to { opacity: 1; transform: none; } }
.mo-figure { position: absolute; z-index: 2; left: 50%; bottom: 0; width: min(62vw, 900px); height: auto; transform: translateX(-50%); }
.mo-bottom { position: absolute; z-index: 3; left: clamp(20px, 4vw, 48px); right: clamp(20px, 4vw, 48px); bottom: clamp(24px, 4vh, 44px); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; pointer-events: none; }
.mo-bottom > * { pointer-events: auto; }
.mo-intro { max-width: 21rem; }
.mo-intro .lead { margin: 0 0 .4rem; }
.mo-intro .small { margin: 0; color: rgba(255, 255, 255, .78); }
.mo-hero .creds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 22rem; }
.mo-hero .creds li { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(215, 224, 235, .25); background: rgba(11, 11, 23, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .8rem; font-weight: 600; color: var(--white); }
@media (max-width: 760px) {
  .mo-hero { display: flex; flex-direction: column; min-height: 0; padding: 90px 14px 24px; }
  .mo-top, .mo-name, .mo-figure, .mo-bottom { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .mo-top { margin-bottom: 18px; }
  .mo-figure { width: 160%; max-width: none; transform: none; translate: none !important; margin: -34vw 0 0 -30%; }
  .mo-bottom { flex-direction: column; align-items: flex-start; margin-top: 18px; }
  .mo-hero .creds { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .mo-name .fit-line { animation: none; } }

/* Closing call to action: centered, glowing base, light that follows the cursor */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r); margin-top: var(--gap); padding: clamp(72px, 10vw, 150px) clamp(20px, 4vw, 56px); text-align: center; background: radial-gradient(70% 90% at 50% 100%, #2e3ea6 0%, var(--midnight) 50%, #050514 100%); }
.cta-band > *:not(.imm-glow) { position: relative; z-index: 1; }
.cta-band .kicker { margin: 0; }
.cta-band h2 { font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1; letter-spacing: -.04em; margin: .5rem auto 1rem; max-width: 12em; }
.cta-band p { color: var(--body); max-width: 32rem; margin: 0 auto 1.8rem; font-size: 1.05rem; }
.cta-band-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.imm-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 40%), rgba(134, 167, 209, .4), rgba(59, 85, 176, .16) 40%, transparent 70%); mix-blend-mode: screen; }