:root {
  color-scheme: light;
  --ink: #3C4549;
  --ink-soft: #667278;
  --cream: #F7F2E8;
  --oat: #E4DBC4;
  --peach: #EBC9B5;
  --blue: #CAD6DF;
  --sage: #CBD3C3;
  --line: rgba(60,69,73,.16);
  --stage: #CAD6DF;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
html { background: var(--stage); }
body { font-family: 'DM Sans', sans-serif; overflow: hidden; color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid #EBC9B5; outline-offset: 4px; }
button:disabled { cursor: wait; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.app { position: relative; width: 100%; min-height: 100dvh; height: 100dvh; overflow: hidden; isolation: isolate; background: #CAD6DF; }
.sky { position: absolute; inset: -10%; z-index: 0; overflow: hidden; background: linear-gradient(180deg, #CAD6DF 0%, #DDE3E6 44%, #EBC9B5 85%, #F7F2E8 100%); }
.sky__light { position: absolute; inset: -15%; background: radial-gradient(circle at 72% 25%, rgba(255,248,214,.95) 0 3%, rgba(255,245,200,.43) 13%, transparent 40%); }
.sky__glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 33% 85%, rgba(255,255,252,.85), transparent 50%); }
.sky__haze { position: absolute; left: -20%; right: -20%; bottom: 4%; height: 24%; opacity: .45; background: radial-gradient(ellipse at 15% 90%, white 0 21%, transparent 50%), radial-gradient(ellipse at 68% 95%, white 0 18%, transparent 50%); filter: blur(42px); }
.world { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.world__image-frame { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: 0; transform: translate3d(0,0,0) scale(1.43); transform-origin: center center; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 55px 100px rgba(60,69,73,.14); will-change: transform, border-radius; }
.world__image { display: block; position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; object-position: center center; transform: translateZ(0); transition: opacity 1000ms cubic-bezier(.2,.7,.2,1), transform 9s linear; user-select: none; pointer-events: none; }
.world__image--city { opacity: 1; }
.world__image--arrival { opacity: 0; }
.world__image--studio { opacity: 0; }
.app[data-scene="studio"] .world__image--city { opacity: 0; }
.app[data-scene="studio"] .world__image--studio { opacity: 1; }
.world__sunlight { position: absolute; inset: 0; background: radial-gradient(ellipse 65% 40% at 75% 0%, rgba(255,242,194,.14), transparent 90%); mix-blend-mode: screen; pointer-events: none; }
.world__grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); opacity: .055; mix-blend-mode: multiply; pointer-events: none; }
.world__veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(247,242,232,.95) 0%,rgba(247,242,232,.85) 24%,rgba(247,242,232,.46) 42%,transparent 69%), linear-gradient(0deg, rgba(247,242,232,.35), transparent 35%); transition: opacity 1.15s ease; }
.app[data-phase="ready"] .world__veil, .app[data-phase="exploring"] .world__veil { opacity: 1; }
.app[data-phase="exploring"] .world__veil { opacity: .2; }
.flight-copy { position: absolute; z-index: 4; top: 44%; left: 50%; transform: translate(-50%, -45%) scale(.93); display: flex; flex-direction: column; align-items: center; gap: 19px; text-align: center; color: #3C4549; opacity: 0; pointer-events: none; width: min(95vw, 900px); text-shadow: 0 2px 34px rgba(255,255,255,.95); will-change: opacity, transform; }
.flight-copy__eyebrow { font-size: 11px; letter-spacing: .28em; font-weight: 700; }
.flight-copy strong { font-family: 'Space Grotesk', sans-serif; font-size: clamp(42px,7vw,112px); letter-spacing: -.08em; line-height: .9; font-weight: 600; }
.flight-copy strong em { color: #F7F2E8; font-style: normal; text-shadow: 0 3px 30px rgba(60,69,73,.15); }
.flight-copy__dash { width: 40px; height: 2px; background: #3C4549; }
.cloud-field { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; opacity: 0; }
.cloud { position: absolute; width: var(--w, 600px); height: var(--h, 280px); left: var(--x); top: var(--y); opacity: 0; transform: translate3d(0,0,0); will-change: transform, opacity; filter: blur(var(--blur, 7px)) drop-shadow(0 8px 24px rgba(248,254,249,.16)); background:
  radial-gradient(ellipse 23% 36% at 22% 57%, rgba(255,255,255,.94) 54%, transparent 73%),
  radial-gradient(ellipse 19% 45% at 37% 40%, rgba(255,255,255,.98) 55%, transparent 75%),
  radial-gradient(ellipse 26% 42% at 54% 47%, rgba(255,255,255,.98) 55%, transparent 76%),
  radial-gradient(ellipse 23% 34% at 73% 57%, rgba(255,255,255,.98) 50%, transparent 74%),
  radial-gradient(ellipse 33% 26% at 47% 72%, rgba(255,255,255,.96) 55%, transparent 75%);
}
.cloud--a { --x:-24%; --y:13%; --w:74vw; --h:37vw; --blur:8px; }
.cloud--b { --x:42%; --y:-17%; --w:76vw; --h:34vw; --blur:15px; }
.cloud--c { --x:60%; --y:35%; --w:74vw; --h:39vw; --blur:11px; }
.cloud--d { --x:-19%; --y:58%; --w:82vw; --h:38vw; --blur:12px; }
.cloud--e { --x:14%; --y:29%; --w:72vw; --h:30vw; --blur:22px; }
.cloud--f { --x:10%; --y:-25%; --w:57vw; --h:28vw; --blur:7px; }
.cloud--g { --x:37%; --y:70%; --w:69vw; --h:30vw; --blur:18px; }
.letterbox { position: absolute; z-index: 4; height: 0; left: 0; width: 100%; background: #3C4549; pointer-events: none; }
.letterbox--top { top: 0; }
.letterbox--bottom { bottom: 0; }
.intro-controls { position: absolute; z-index: 11; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px,4vw,64px) max(27px,env(safe-area-inset-bottom)); color: #3C4549; opacity: 1; transition: opacity 450ms ease, visibility 450ms ease; }
.intro-controls__left { display: flex; align-items: center; gap: 12px; letter-spacing: .15em; font-size: 10px; font-weight: 700; text-shadow: 0 1px 8px #F7F2E8; }
.intro-controls__asterisk { color: #EBC9B5; font-size: 20px; }
.intro-controls__divider { height: 16px; width: 1px; background: currentColor; opacity: .45; }
.intro-controls__skip { border: 1px solid rgba(60,69,73,.24); border-radius: 30px; background: rgba(247,242,232,.8); backdrop-filter: blur(18px); padding: 12px 18px; font-weight: 700; font-size: 12px; display: flex; gap: 25px; align-items: center; transition: background .2s, transform .2s; }
.intro-controls__skip:hover { background: #fff; transform: translateY(-2px); }
.intro-controls__progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: rgba(60,69,73,.12); }
.intro-controls__progress > div { height: 100%; width: 0; background: #3C4549; transform-origin: left; }
.app[data-phase="ready"] .intro-controls, .app[data-phase="exploring"] .intro-controls { opacity: 0; visibility: hidden; pointer-events: none; }
.header, .hero, .scene-controls, .scene-caption { opacity: 0; visibility: hidden; transition: opacity 800ms ease, transform 1000ms var(--ease-out), visibility 800ms ease; }
.app[data-phase="ready"] .header, .app[data-phase="ready"] .hero, .app[data-phase="ready"] .scene-controls, .app[data-phase="ready"] .scene-caption,
.app[data-phase="exploring"] .header, .app[data-phase="exploring"] .scene-controls, .app[data-phase="exploring"] .scene-caption { opacity: 1; visibility: visible; }
.header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding: clamp(18px,3vw,38px) clamp(20px,4vw,64px); display: flex; justify-content: space-between; align-items: center; gap: 24px; transform: translateY(-15px); }
.app[data-phase="ready"] .header, .app[data-phase="exploring"] .header { transform: translateY(0); }
.brand { display: inline-flex; align-items: center; border: none; background: none; padding: 4px 0; gap: 10px; text-align: left; flex-shrink: 0; }
.brand__mark { display: block; position: relative; width: 33px; height: 36px; border: 6px solid #3C4549; border-radius: 8px 15px 15px 8px; box-shadow: inset 3px -3px 0 rgba(255,255,255,.25); transform: scale(.89); }
.brand__mark:before { content: ''; position: absolute; left: -6px; top: 20px; width: 9px; height: 18px; border-radius: 0 0 4px 4px; background: #3C4549; }
.brand__mark span { position: absolute; inset: 6px 6px 5px 5px; border-radius: 2px 6px 6px 2px; background: #EBC9B5; }
.brand__mark i { position: absolute; width: 7px; height: 7px; background: #F7F2E8; left: 13px; top: 6px; border-radius: 2px; transform: rotate(45deg); }
.brand__word { font: 700 27px/1 'Space Grotesk', sans-serif; letter-spacing: -.075em; }
.brand__period { color: #EBC9B5; }
.brand__pill { margin-left: 9px; font: 700 9px/1 'DM Sans', sans-serif; letter-spacing: .11em; color: #68757A; border: 1px solid rgba(60,69,73,.2); border-radius: 5px; padding: 7px 8px; background: rgba(255,255,255,.37); }
.navigation { display: flex; align-items: center; gap: 4px; padding: 6px; border: 1px solid rgba(60,69,73,.12); border-radius: 999px; background: rgba(247,242,232,.72); backdrop-filter: blur(20px); box-shadow: 0 6px 26px rgba(60,69,73,.05); }
.navigation button { border: 0; background: transparent; border-radius: 100px; padding: 11px 16px; white-space: nowrap; font-size: 12px; font-weight: 700; transition: background .2s; }
.navigation button:hover { background: rgba(60,69,73,.1); }
.header__actions { display: flex; align-items: center; gap: 11px; }
.icon-button { border: 1px solid rgba(60,69,73,.15); display: grid; place-items: center; background: rgba(247,242,232,.78); backdrop-filter: blur(14px); border-radius: 50%; width: 43px; height: 43px; transition: transform .2s, background .2s; }
.icon-button:hover { transform: rotate(-30deg); background: #fff; }
.header__cta { border: 1px solid #3C4549; border-radius: 999px; padding: 14px 21px; background: #3C4549; color: #F7F2E8; display: flex; align-items: center; gap: 22px; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 22px rgba(60,69,73,.16); transition: transform .2s, background .2s; }
.header__cta:hover { transform: translateY(-2px); background: #30393D; }
.hero { position: absolute; bottom: clamp(102px,13.5vh,148px); left: clamp(20px,4vw,64px); z-index: 4; max-width: 635px; transform: translateY(22px); }
.app[data-phase="ready"] .hero { transform: translateY(0); }
.app[data-phase="exploring"] .hero { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(28px); }
.hero__overline { font-weight: 700; font-size: 10px; letter-spacing: .155em; display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.signal { display: inline-block; width: 7px; height: 7px; flex-shrink: 0; background: #CAD6DF; border-radius: 50%; box-shadow: 0 0 0 4px rgba(60,69,73,.12); }
.hero__edition { font-size: 10px; opacity: .55; }
.hero h1 { margin: 0; font: 600 clamp(46px,5.6vw,88px)/.99 'Space Grotesk', sans-serif; letter-spacing: -.086em; color: #3C4549; }
.hero h1 span { color: #3C4549; }
.hero p { max-width: 445px; margin: 22px 0 25px; color: #667278; font-size: clamp(13px,1.1vw,16px); line-height: 1.6; font-weight: 500; }
.hero__buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.primary-button { border: 1px solid #3C4549; background: #3C4549; color: white; border-radius: 999px; padding: 18px 23px; font-size: 13px; font-weight: 700; display: inline-flex; gap: 33px; box-shadow: 0 10px 25px rgba(60,69,73,.19); align-items: center; transition: transform .2s, background .2s, box-shadow .2s; }
.primary-button:hover { transform: translateY(-3px); background: #30393D; box-shadow: 0 16px 30px rgba(60,69,73,.2); }
.text-button { border: none; border-bottom: 1px solid rgba(60,69,73,.45); background: transparent; padding: 11px 0; font-size: 13px; font-weight: 700; display: inline-flex; gap: 14px; align-items: center; transition: gap .2s; }
.text-button:hover { gap: 20px; }
.scene-controls { position: absolute; z-index: 5; right: clamp(20px,4vw,64px); bottom: clamp(39px,6vh,75px); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; transform: translateY(15px); }
.app[data-phase="ready"] .scene-controls, .app[data-phase="exploring"] .scene-controls { transform: translateY(0); }
.scene-controls__label { font-size: 9px; font-weight: 700; letter-spacing: .14em; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 9px #fff; }
.scene-controls__label > span:not(.scene-controls__pulse) { opacity: .5; }
.scene-controls__pulse { width: 6px; height: 6px; background: #CAD6DF; border-radius: 50%; box-shadow: 0 0 0 3px rgba(60,69,73,.22); }
.scene-controls__switch { display: flex; gap: 4px; padding: 5px; border: 1px solid rgba(60,69,73,.15); border-radius: 999px; background: rgba(247,242,232,.86); backdrop-filter: blur(18px); box-shadow: 0 6px 30px rgba(60,69,73,.08); }
.scene-controls__option { border: none; background: transparent; color: #667278; border-radius: 50px; padding: 11px 15px; font-size: 11px; font-weight: 700; transition: background .2s, color .2s; }
.scene-controls__option span { padding-left: 7px; }
.scene-controls__option:hover { color: #3C4549; }
.scene-controls__option.is-selected { background: #3C4549; color: white; box-shadow: 0 3px 8px rgba(60,69,73,.15); }
.scene-caption { position: absolute; bottom: clamp(30px,5.5vh,61px); left: clamp(20px,4vw,64px); display: flex; gap: 13px; align-items: center; font-size: 9px; font-weight: 700; letter-spacing: .13em; z-index: 4; text-shadow: 0 1px 9px #fff; }
.scene-caption__spark { font-size: 16px; color: #EBC9B5; }
.scene-caption__line { width: 37px; height: 1px; background: #879096; opacity: .55; }
.hotspots { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hotspot { pointer-events: auto; position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.95); border-radius: 999px; color: #fff; background: rgba(60,69,73,.92); box-shadow: 0 4px 0 rgba(60,69,73,.13), 0 10px 28px rgba(60,69,73,.28), 0 0 0 5px rgba(255,255,255,.35); padding: 7px 13px 7px 7px; font-size: 11px; white-space: nowrap; backdrop-filter: blur(10px); animation: hotspotIn 650ms var(--ease-out) both; transition: background .2s, box-shadow .2s; }
.hotspot:nth-child(2) { animation-delay: 80ms; }.hotspot:nth-child(3) { animation-delay: 160ms; }.hotspot:nth-child(4) { animation-delay: 240ms; }.hotspot:nth-child(5) { animation-delay: 320ms; }
.hotspot span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #3C4549; background: #E4DBC4; font: 700 10px 'Space Grotesk',sans-serif; }
.hotspot b { font-size: 11px; font-weight: 700; }
.hotspot:hover { background: #EBC9B5; box-shadow: 0 10px 30px rgba(60,69,73,.2),0 0 0 8px rgba(255,255,255,.4); }
@keyframes hotspotIn { from {opacity:0; transform:translate(-50%,-20%) scale(.7)} to {opacity:1; transform:translate(-50%,-50%) scale(1)} }
.explore-hint { position: absolute; z-index: 6; top: clamp(95px,10vh,130px); left: 50%; transform: translateX(-50%); border-radius: 100px; background: rgba(247,242,232,.92); padding: 10px 10px 10px 16px; border: 1px solid rgba(60,69,73,.15); backdrop-filter: blur(17px); display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 10px; font-weight: 800; letter-spacing: .1em; box-shadow: 0 10px 32px rgba(60,69,73,.08); }
.explore-hint__dot { width: 7px; height: 7px; border-radius: 50%; background: #CAD6DF; }
.explore-hint button { font-weight: 700; padding: 10px 14px; border: 1px solid rgba(60,69,73,.13); border-radius: 99px; background: #F7F2E8; letter-spacing: 0; }
.explore-hint button span { font-size: 16px; margin-left: 5px; }
.overlay { position: absolute; inset: 0; z-index: 20; }
.overlay__scrim { position: absolute; inset: 0; background: rgba(60,69,73,.38); backdrop-filter: blur(5px); animation: scrimIn .35s ease both; }
.panel { position: absolute; right: 0; top: 0; height: 100%; width: min(510px,100%); background: #F7F2E8; display: flex; flex-direction: column; padding: 30px 36px; box-shadow: -24px 0 90px rgba(60,69,73,.19); animation: panelIn .6s var(--ease-out) both; outline: none; }
@keyframes scrimIn { from {opacity:0} to {opacity:1} }
@keyframes panelIn { from {opacity:0;transform:translateX(60px)} to {opacity:1;transform:translateX(0)} }
.panel__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #E4DBC4; }
.panel__tag { font-size: 10px; font-weight: 800; letter-spacing: .13em; display: flex; align-items: center; gap: 12px; }
.panel__close { width: 42px; height: 42px; border-radius: 50%; border: 1px solid #E4DBC4; font: 300 25px 'DM Sans',sans-serif; background: #F7F2E8; line-height: 1; }
.panel__close:hover { background: #E4DBC4; }
.panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 48px 0 25px; scrollbar-width: thin; }
.panel__kicker { color: #3C4549; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.panel__title { margin: 19px 0 17px; color: #3C4549; font: 600 clamp(42px,4.5vw,62px)/1.02 'Space Grotesk',sans-serif; letter-spacing: -.07em; }
.panel__intro { color: #667278; font-size: 15px; line-height: 1.7; margin-bottom: 30px; }
.panel__visual { border-radius: 18px; border: 1px solid #E4DBC4; background: linear-gradient(128deg,#E4DBC4,#F7F2E8); min-height: 158px; padding: 26px; display: grid; place-items: center; margin: 27px 0; }
.panel__art { display: flex; align-items: center; gap: 14px; }
.panel__avatar { display: grid; place-items: center; width: 64px; height: 65px; border: 2px solid #3C4549; border-radius: 17px; box-shadow: 5px 5px 0 rgba(60,69,73,.12); background: #CBD3C3; font: 700 22px 'Space Grotesk',sans-serif; }
.panel__avatar:nth-child(2) { background: #EBC9B5; transform: translateY(-15px); }
.panel__avatar:nth-child(3) { background: #CAD6DF; transform: translateY(6px); }
.panel__row { display: flex; gap: 20px; padding: 21px 0; border-bottom: 1px solid #E4DBC4; }
.panel__number { font: 700 11px 'Space Grotesk',sans-serif; color: #3C4549; padding-top: 4px; min-width: 26px; }
.panel__row h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.panel__row p { margin: 0; font-size: 13px; color: #667278; line-height: 1.6; }
.panel__footer { padding: 20px 0 3px; border-top: 1px solid #E4DBC4; display: flex; justify-content: space-between; color: #879096; font-weight: 800; font-size: 9px; letter-spacing: .095em; }
.panel__agent-list { display: grid; gap: 10px; }
.panel__agent { text-align: left; display: flex; align-items: center; gap: 13px; padding: 13px; border: 1px solid #E4DBC4; border-radius: 13px; background: #F7F2E8; transition: transform .2s,border-color .2s; }
.panel__agent:hover { transform: translateX(4px); border-color: #CAD6DF; }
.panel__agent-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 11px; background: #CBD3C3; font-size: 18px; }
.panel__agent strong { display: block; font-size: 14px; margin-bottom: 3px; }
.panel__agent small { color: #667278; font-size: 12px; }
.panel__agent > span:last-child { margin-left: auto; }
.panel__back { background: none; border: 0; padding: 0; color: #667278; font-weight: 700; font-size: 12px; }
.panel__points { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; }
.panel__chip { border-radius: 999px; border: 1px solid #E4DBC4; background: #F7F2E8; padding: 10px 13px; font-size: 11px; font-weight: 700; color: #667278; }
.panel__action { border: 0; width: 100%; padding: 16px 20px; background: #3C4549; color: white; border-radius: 999px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin-top: 25px; }
.panel__action:hover { background: #30393D; }
@media (min-width:1600px) { .hero h1 { font-size: 90px; } }
@media (max-width: 1050px) { .navigation { display: none; } .brand__pill { display: none; } .hero { bottom: 135px; } .hero h1 { font-size: clamp(43px, 6vw, 71px); } }
@media (max-width: 700px) {
  .header { padding: max(20px,env(safe-area-inset-top)) 18px; }
  .brand__word { font-size: 25px; } .brand__mark { transform: scale(.8); margin-right: -3px; }
  .header__cta { font-size: 0; width: 43px; height: 43px; padding: 0; justify-content: center; }
  .header__cta span { font-size: 18px; }
  .replay-button { width: 43px; height: 43px; }
  .hero { left: 22px; right: 22px; bottom: 164px; }
  .hero__overline { font-size: 9px; letter-spacing: .1em; margin-bottom: 14px; }
  .hero h1 { font-size: clamp(42px, 10.8vw, 60px); }
  .hero p { max-width: 330px; font-size: 13px; margin: 14px 0 20px; }
  .hero__buttons { gap: 17px; }
  .primary-button { padding: 14px 18px; font-size: 12px; gap: 13px; }
  .text-button { font-size: 12px; }
  .world__veil { background: linear-gradient(0deg, rgba(247,242,232,.96) 0%,rgba(247,242,232,.83) 27%,rgba(247,242,232,.08) 59%,transparent 80%); }
  .scene-controls { right: 18px; bottom: max(30px, env(safe-area-inset-bottom)); gap: 7px; }
  .scene-controls__label { font-size: 8px; }
  .scene-controls__option { font-size: 10px; padding: 9px 11px; }
  .scene-caption { left: 22px; bottom: max(32px, env(safe-area-inset-bottom)); font-size: 8px; width: 150px; line-height: 1.5; }
  .scene-caption__line { display: none; }
  .intro-controls { padding: 0 18px max(25px,env(safe-area-inset-bottom)); }
  .intro-controls__left { font-size: 8px; gap: 8px; }
  .intro-controls__divider { display: none; }
  .intro-controls__skip { padding: 10px 13px; gap: 8px; font-size: 11px; }
  .hotspot b { display: none; } .hotspot { padding: 6px; }
  .hotspot span { width: 24px; height: 24px; }
  .explore-hint { top: 94px; max-width: calc(100% - 30px); padding: 8px 8px 8px 12px; font-size: 8px; letter-spacing: .05em; }
  .explore-hint button { font-size: 10px; padding: 8px 10px; }
  .panel { padding: 24px; }
  .panel__body { padding-top: 34px; }
}
@media (max-width: 420px) { .hero h1 { font-size: 41px; } .hero { bottom: 158px; } .hero p { font-size: 12px; } .hero__buttons { gap: 13px; } .primary-button { gap: 7px; } .scene-controls__label { max-width: 175px; text-align: right; line-height: 1.6; } }
@media (max-height: 600px) and (min-width: 701px) { .hero { bottom: 85px; } .hero h1 { font-size: clamp(38px,5vh,56px); } .hero__overline { margin-bottom: 9px; }.hero p { margin: 13px 0; } .primary-button { padding: 12px 18px; } .scene-controls { bottom: 23px; } .scene-caption { bottom: 25px; } .header { padding-top: 15px; } }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .world__image-frame { will-change: auto; }
  .cloud { will-change: auto; }
}

/* Compact mobile scene selector: preserve a calm, uncluttered viewport. */
@media (max-width:700px) {
  .scene-caption, .scene-controls__label { display: none; }
  .scene-controls { bottom: max(27px,env(safe-area-inset-bottom)); }
}

/* Revision: welcome starts in cloud cover, then parts directly into a camera zoom-in. */
.world__image-frame { opacity: 0; box-shadow: none; }
.cloud-field { opacity: 1; --cloud-veil: 1; }
.cloud-field::before {
  content: ''; position: absolute; inset: -20%; z-index: 1;
  opacity: calc(var(--cloud-veil, 1) * .37);
  background:
    radial-gradient(ellipse 38% 29% at 14% 24%, #F7F2E8 5%,rgba(255,255,255,.97) 35%, transparent 76%),
    radial-gradient(ellipse 34% 34% at 82% 21%, #F7F2E8 7%,rgba(255,255,255,.92) 42%, transparent 78%),
    radial-gradient(ellipse 42% 30% at 42% 78%,#F7F2E8 5%, rgba(255,255,255,.89) 38%, transparent 78%),
    radial-gradient(ellipse 28% 28% at 68% 71%,rgba(255,255,255,.93), transparent 79%);
  filter: blur(23px);
  pointer-events: none;
}
.flight-copy { opacity: 1; top: 46%; color: #3C4549; }
.flight-copy strong em { color: #3C4549; text-shadow: 0 4px 30px rgba(255,255,255,.5); }
.flight-copy__eyebrow { letter-spacing: .32em; }
.intro-controls { color: #3C4549; }
.scene-controls { display: none !important; }
.hero { bottom: clamp(106px, 15vh, 168px); }
.hero h1 { font-size: clamp(47px,5.55vw,90px); }
.hero p { font-size: clamp(15px, 1.25vw, 18px); font-weight: 600; }
.hero__overline { letter-spacing: .18em; }

/* Scene-attached illustrated characters. 1455x1024 is the original artwork's
   coordinate space, so the stage uses precisely the image's cover dimensions. */
.agent-world {
  position: absolute;
  left: 50%; top: 50%;
  width: max(100%, 142.08984375vh);
  height: max(100%, 70.37735849vw);
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  container-type: inline-size;
  opacity: 0;
  transition: opacity 1100ms ease;
}
.app[data-phase="ready"] .agent-world,
.app[data-phase="exploring"] .agent-world { opacity: 1; }
.agent {
  position: absolute;
  width: 2.65cqw;
  height: 3.76cqw;
  min-width: 20px;
  min-height: 30px;
  transform: translate(-50%,-91%);
  pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(60,69,73,.16));
}
.agent__figure { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 85%; transform: scaleX(var(--facing,1)); }
.agent__body, .agent__leg { transform-box: fill-box; transform-origin: center 15%; }
.agent[data-status="walking"] .agent__figure { animation: characterBob .42s ease-in-out infinite alternate; }
.agent[data-status="walking"] .agent__leg--l { animation: legForward .42s ease-in-out infinite alternate; }
.agent[data-status="walking"] .agent__leg--r { animation: legBackward .42s ease-in-out infinite alternate; }
.agent[data-status="walking"] .agent__body { animation: characterSway .42s ease-in-out infinite alternate; }
.agent[data-status="sitting"] .agent__figure { transform: scaleX(var(--facing,1)) translateY(4%) scaleY(.82); }
.agent[data-status="sitting"] .agent__legs { transform: translateY(-5px); }
.agent[data-status="sitting"] .agent__leg--l { transform: rotate(-60deg) translateX(-5px); }
.agent[data-status="sitting"] .agent__leg--r { transform: rotate(40deg); }
.agent[data-status="thinking"] .agent__body { animation: pondering 2.6s ease-in-out infinite; }
.agent__eyes { animation: gentleBlink 5.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.agent__thought {
  position: absolute;
  z-index: 2;
  left: 50%; bottom: 112%;
  transform: translate(-50%,10px) scale(.75);
  display: inline-flex; align-items: center; justify-content: center; gap: .4cqw;
  padding: .6cqw .85cqw;
  background: rgba(247,242,232,.95);
  border: 1px solid rgba(60,69,73,.19);
  border-radius: 100px;
  box-shadow: 0 .45cqw 1.5cqw rgba(60,69,73,.10);
  color: #3C4549;
  white-space: nowrap;
  font-family: 'DM Sans',sans-serif;
  font-size: .78cqw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.025em;
  opacity: 0;
  transition: opacity .42s ease, transform .42s cubic-bezier(.2,.7,.2,1);
}
.agent__thought::after {
  content: ''; position: absolute; bottom: -.5cqw; left: 42%; width: .42cqw; height: .42cqw; border-radius: 50%; background: #F7F2E8; border: 1px solid rgba(60,69,73,.12);
}
.agent__spark { color: #B58269; font-size: 1.1cqw; }
.agent[data-status="thinking"] .agent__thought { opacity: 1; transform: translate(-50%,0) scale(1); }
.desk-thought {
  position: absolute;
  display: grid; place-items: center;
  width: 2.1cqw; height: 1.65cqw;
  font-size: .93cqw;
  font-weight: 800;
  color: #B58269;
  background: rgba(247,242,232,.97);
  border: 1px solid rgba(60,69,73,.18);
  box-shadow: 0 4px 10px rgba(60,69,73,.1);
  border-radius: 60% 56% 59% 54%;
  transform: translate(-50%,-50%) scale(.8);
  animation: deskThinking 10s ease-in-out infinite;
}
.desk-thought::after { content: ''; position:absolute; width: .42cqw; height:.42cqw; background:#F7F2E8; border-radius:50%; left:20%; bottom:-.49cqw; }
@keyframes characterBob { 0% { transform: translateY(0) scaleX(var(--facing,1)); } 100% { transform: translateY(-4%) scaleX(var(--facing,1)); } }
@keyframes legForward { from { transform: rotate(-21deg); } to { transform: rotate(23deg); } }
@keyframes legBackward { from { transform: rotate(23deg); } to { transform: rotate(-21deg); } }
@keyframes characterSway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes pondering { 0%,100% { transform: rotate(-1.5deg); } 50% { transform: rotate(2deg); } }
@keyframes gentleBlink { 0%, 91%, 94%, 100% { transform: scaleY(1); } 92%, 93% { transform:scaleY(.1); } }
@keyframes deskThinking { 0%,14%,31%,100% { opacity: 0; transform: translate(-50%,-20%) scale(.65); } 17%,28% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .agent__figure, .agent__leg, .agent__body, .agent__eyes, .desk-thought { animation: none !important; }
  .desk-thought { display:none; }
  .agent__thought { display:none; }
}

/* Final reveal: controls join the scene instead of appearing all at once.
   Opacity / blur only, so each button keeps its normal hover transform. */
@keyframes porticoFadeIn {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}

/* Intro actions join the welcome cloud screen gently as well. */
.intro-controls__left,
.intro-controls__skip { opacity: 0; }
.app[data-phase="intro"] .intro-controls__left,
.app[data-phase="intro"] .intro-controls__skip {
  animation: porticoFadeIn 760ms ease-out both;
}
.app[data-phase="intro"] .intro-controls__left { animation-delay: 260ms; }
.app[data-phase="intro"] .intro-controls__skip { animation-delay: 530ms; }

/* The reveal is tied to the ready state, so replaying the intro resets it. */
.header .brand,
.header .navigation,
.header .navigation button,
.header__actions > button,
.hero__overline,
.hero h1,
.hero p,
.hero__buttons > button,
.scene-caption { opacity: 0; }

.app[data-phase="ready"] .header .brand,
.app[data-phase="exploring"] .header .brand,
.app[data-phase="ready"] .header .navigation,
.app[data-phase="exploring"] .header .navigation,
.app[data-phase="ready"] .header .navigation button,
.app[data-phase="exploring"] .header .navigation button,
.app[data-phase="ready"] .header__actions > button,
.app[data-phase="exploring"] .header__actions > button,
.app[data-phase="ready"] .hero__overline,
.app[data-phase="ready"] .hero h1,
.app[data-phase="ready"] .hero p,
.app[data-phase="ready"] .hero__buttons > button,
.app[data-phase="ready"] .scene-caption,
.app[data-phase="exploring"] .scene-caption {
  animation: porticoFadeIn 850ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--reveal-delay, 0ms);
}

.header .brand { --reveal-delay: 90ms; }
.header .navigation { --reveal-delay: 190ms; }
.header .navigation button:nth-child(1) { --reveal-delay: 240ms; }
.header .navigation button:nth-child(2) { --reveal-delay: 390ms; }
.header .navigation button:nth-child(3) { --reveal-delay: 540ms; }
.header__actions > .replay-button { --reveal-delay: 420ms; }
.header__actions > .header__cta { --reveal-delay: 660ms; }
.hero__overline { --reveal-delay: 130ms; }
.hero h1 { --reveal-delay: 290ms; }
.hero p { --reveal-delay: 470ms; }
.hero__buttons > button:first-child { --reveal-delay: 710ms; }
.hero__buttons > button:nth-child(2) { --reveal-delay: 960ms; }
.scene-caption { --reveal-delay: 1100ms; }

@media (prefers-reduced-motion: reduce) {
  .app[data-phase="ready"] .header .brand,
  .app[data-phase="exploring"] .header .brand,
  .app[data-phase="ready"] .header .navigation,
  .app[data-phase="exploring"] .header .navigation,
  .app[data-phase="ready"] .header .navigation button,
  .app[data-phase="exploring"] .header .navigation button,
  .app[data-phase="ready"] .header__actions > button,
  .app[data-phase="exploring"] .header__actions > button,
  .app[data-phase="ready"] .hero__overline,
  .app[data-phase="ready"] .hero h1,
  .app[data-phase="ready"] .hero p,
  .app[data-phase="ready"] .hero__buttons > button,
  .app[data-phase="ready"] .scene-caption,
  .app[data-phase="exploring"] .scene-caption {
    animation: none; opacity: 1; filter: none;
  }
}

/* Portico design brief: editorial cream, charcoal ink, peach and mist blue.
   Large readable text stays ink; peach is for small details and highlights. */
.app { background: var(--blue); }
.sky { background: linear-gradient(180deg, var(--blue) 0%, #DDE3E6 39%, var(--peach) 82%, var(--cream) 100%); }
.sky__light { background: radial-gradient(circle at 72% 25%, rgba(247,242,232,.94) 0 3%, rgba(235,201,181,.40) 13%, transparent 43%); }
.sky__glow { background: radial-gradient(ellipse at 33% 85%, rgba(247,242,232,.95), transparent 52%); }
.world__veil {
  background: linear-gradient(90deg, rgba(247,242,232,.98) 0%, rgba(247,242,232,.88) 23%, rgba(247,242,232,.50) 43%, transparent 70%),
              linear-gradient(0deg, rgba(228,219,196,.24), transparent 33%);
}
.flight-copy { color: var(--ink); }
.flight-copy strong em { color: var(--ink); text-shadow: 0 3px 30px rgba(235,201,181,.95); }
.flight-copy__dash { background: var(--peach); }
.letterbox { background: var(--ink); }
.intro-controls__asterisk { color: #C08F77; }
.intro-controls__skip { background: rgba(247,242,232,.82); border-color: rgba(60,69,73,.22); color: var(--ink); }
.intro-controls__skip:hover { background: var(--cream); }
.intro-controls__progress > div { background: var(--ink); }
.brand__mark { border-color: var(--ink); }
.brand__mark:before { background: var(--ink); }
.brand__mark span { background: var(--peach); }
.brand__mark i { background: var(--cream); }
.brand__period { color: #B4826A; }
.brand__pill { background: rgba(247,242,232,.75); color: var(--ink); border-color: rgba(60,69,73,.18); }
.navigation { background: rgba(247,242,232,.9); border-color: rgba(60,69,73,.12); }
.navigation button:hover { background: var(--oat); }
.icon-button { background: rgba(247,242,232,.88); border-color: rgba(60,69,73,.20); }
.icon-button:hover { background: var(--blue); }
.header__cta, .primary-button, .panel__action { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.header__cta:hover, .primary-button:hover, .panel__action:hover { background: #30393D; }
.hero h1, .hero h1 span { color: var(--ink); }
.hero h1 span { text-decoration-line: underline; text-decoration-thickness: .095em; text-underline-offset: .12em; text-decoration-color: var(--peach); }
.hero p, .hero__overline, .scene-caption { color: var(--ink); }
.signal { background: #B58269; box-shadow: 0 0 0 4px rgba(235,201,181,.42); }
.text-button { border-bottom-color: rgba(60,69,73,.40); }
.hotspot { color: var(--ink); background: rgba(247,242,232,.96); border: 1px solid rgba(60,69,73,.16); box-shadow: 0 4px 0 rgba(60,69,73,.07),0 10px 28px rgba(60,69,73,.16),0 0 0 5px rgba(247,242,232,.35); }
.hotspot span { background: var(--blue); color: var(--ink); }
.hotspot:hover { background: var(--peach); }
.explore-hint { background: rgba(247,242,232,.96); border-color: rgba(60,69,73,.15); }
.explore-hint__dot { background: #B58269; }
.explore-hint button { background: var(--oat); }
.overlay__scrim { background: rgba(60,69,73,.34); }
.panel { background: var(--cream); box-shadow: -24px 0 90px rgba(60,69,73,.2); }
.panel__top,.panel__row,.panel__footer { border-color: var(--oat); }
.panel__close { background: var(--oat); border-color: var(--oat); }
.panel__close:hover { background: var(--peach); }
.panel__kicker, .panel__number { color: #9B6C55; }
.panel__title, .panel__intro, .panel__row p, .panel__agent small, .panel__back { color: var(--ink); }
.panel__visual { background: linear-gradient(128deg, var(--blue),var(--oat)); border-color: var(--oat); }
.panel__avatar { border-color: var(--ink); background: var(--sage); }
.panel__avatar:nth-child(2) { background: var(--peach); }
.panel__avatar:nth-child(3) { background: var(--blue); }
.panel__agent { background: rgba(228,219,196,.25); border-color: var(--oat); }
.panel__agent:hover { border-color: var(--blue); }
.panel__agent-icon { background: var(--blue); }
.panel__chip { background: var(--oat); border-color: var(--oat); color: var(--ink); }
.agent__thought { background: rgba(247,242,232,.98); border-color: rgba(60,69,73,.19); color: var(--ink); }
.agent__thought::after, .desk-thought::after { background: var(--cream); border-color: var(--oat); }
.desk-thought { background: rgba(247,242,232,.97); border-color: var(--oat); color: #9B6C55; }
@media (max-width:700px) { .world__veil { background: linear-gradient(0deg, rgba(247,242,232,.98) 0%, rgba(247,242,232,.82) 27%, rgba(247,242,232,.08) 60%, transparent 80%); } }

/* PORTICO CHAPTER EXPERIENCE — editorial brush, paper, air and movement. */
html, body { height:auto; min-height:100%; }
html { scroll-behavior:auto; }
body { overflow-x:hidden; overflow-y:auto; background:var(--cream); }
.office-journey { height:210vh; min-height:1400px; position:relative; }
.office-journey > .app { position:sticky; top:0; left:0; height:100vh; height:100dvh; min-height:600px; }
.header { justify-content:space-between; }
.navigation { margin-left:auto; }
.header__actions { display:none !important; }
.hero { z-index:5; }

/* Brush textures are imperfect painted silhouettes, not generic rotated outlines. */
.primary-button, .text-button, .story-ending__button {
  position:relative; isolation:isolate; border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important; color:var(--ink) !important;
  min-height:62px; padding:17px 27px !important; font-weight:800;
  transition:transform 280ms cubic-bezier(.2,.8,.2,1), color 200ms ease !important;
  text-decoration:none;
}
.primary-button:before, .text-button:before {
  content:""; position:absolute; inset:-3px -12px -5px -12px; z-index:-1; pointer-events:none;
  background-image:url('./assets/brush-peach.svg'); background-size:100% 100%;
  background-repeat:no-repeat; transform:rotate(-1.4deg) scale(1);
  transition:transform 400ms cubic-bezier(.16,1,.3,1), filter 400ms ease;
}
.primary-button:after {content:"✳"; position:absolute; top:-8px; right:4px; color:#B47E65; font-size:14px; opacity:.9; pointer-events:none;}
.text-button:before { background-image:url('./assets/brush-blue.svg'); transform:rotate(1.3deg) scale(1); }
.primary-button:hover, .text-button:hover { transform:translateY(-3px) rotate(-.3deg); }
.primary-button:hover:before, .text-button:hover:before { transform:rotate(.3deg) scale(1.06); filter:saturate(1.12); }
.primary-button .btn-arrow, .text-button .btn-arrow {display:inline-grid; place-items:center; font-size:18px; font-weight:600; transition:transform .3s ease;}
.primary-button:hover .btn-arrow { transform:translate(2px,-2px); }
.text-button:hover .btn-arrow { transform:translateY(3px); }
.hero__buttons { gap:20px; }
.hero__buttons > .text-button {padding-inline:19px !important;}
.navigation button { position:relative; isolation:isolate; }
.navigation button:hover {background:transparent;}
.navigation button:before {content:""; z-index:-1; position:absolute; inset:0 -3px; background:url('./assets/brush-oat.svg') center / 100% 100%; opacity:0; transition:opacity .25s ease;}
.navigation button:hover:before, .navigation button:focus-visible:before {opacity:1;}

.scroll-clouds {position:absolute;inset:0;z-index:13;visibility:hidden;pointer-events:none;isolation:isolate;overflow:hidden;opacity:0;will-change:opacity;}
.scroll-clouds__wash {position:absolute;inset:0;opacity:var(--wash,0);background:linear-gradient(175deg,#D6E1E8 0%,#E6E6E2 42%,#F7F2E8 100%);}
.scroll-cloud {position:absolute;will-change:transform,opacity;filter:blur(13px) drop-shadow(0 0 26px rgba(255,255,255,.2));width:87vw;height:48vw;min-height:430px;opacity:0;background:
 radial-gradient(ellipse 25% 36% at 18% 51%,rgba(255,255,255,.96) 47%,transparent 76%),
 radial-gradient(ellipse 24% 41% at 39% 45%,rgba(255,255,255,.98) 46%,transparent 77%),
 radial-gradient(ellipse 28% 42% at 59% 45%,rgba(255,255,255,.98) 48%,transparent 77%),
 radial-gradient(ellipse 28% 40% at 80% 60%,rgba(255,255,255,.97) 48%,transparent 77%),
 radial-gradient(ellipse 38% 30% at 51% 75%,rgba(255,255,255,.96) 48%,transparent 78%);
}
.scroll-cloud--one{top:-23%;left:-40%}.scroll-cloud--two{top:-22%;right:-38%}.scroll-cloud--three{top:25%;left:-46%}.scroll-cloud--four{top:19%;right:-41%}.scroll-cloud--five{bottom:-34%;left:4%;width:100vw}
.scroll-clouds__copy {position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:90vw;text-align:center;opacity:var(--cloud-copy,0);display:grid;gap:24px;color:var(--ink);text-shadow:0 2px 22px rgba(255,255,255,.6);}
.scroll-clouds__copy > span {font-size:11px;font-weight:800;letter-spacing:.25em;}
.scroll-clouds__copy strong {font:600 clamp(54px,7vw,112px)/.98 'Space Grotesk',sans-serif;letter-spacing:-.082em;}
.app[data-phase='exploring'] .scroll-clouds {pointer-events:none;}

.narrative {position:relative;z-index:2;background:var(--cream);overflow:clip;}
.narrative h2,.narrative h3 {color:var(--ink);}
.narrative em{font-style:normal;position:relative;white-space:nowrap;}
.narrative em:after{content:"";position:absolute;z-index:-1;left:-2%;right:-2%;bottom:2%;height:24%;background:url('./assets/brush-peach.svg') center / 100% 100%;opacity:.9;transform:rotate(-1deg);}
.section-label{font:800 11px/1.5 'DM Sans',sans-serif;letter-spacing:.23em;color:#82796F;}
.narrative-intro {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100vh;min-height:100dvh;padding:130px 6vw 115px;background:linear-gradient(180deg,#CAD6DF 0%,#E7E8E5 30%,#F7F2E8 72%,#F7F2E8 100%);}
.narrative-intro:before,.narrative-intro:after {content:"";position:absolute;width:58vw;height:22vw;pointer-events:none;background:radial-gradient(ellipse at 25% 55%,rgba(255,255,255,.65),transparent 55%),radial-gradient(ellipse at 70% 45%,rgba(255,255,255,.64),transparent 55%);filter:blur(36px);}
.narrative-intro:before{top:1%;left:-24%;}.narrative-intro:after{right:-23%;bottom:5%;}
.narrative-intro__stars {position:relative;font-size:31px;letter-spacing:54px;transform:translateX(25px);color:#C18F75;opacity:.6;margin-bottom:20px;}
.narrative-intro__stars span{font-size:14px;color:#7D929E;}
.narrative-intro__title {position:relative;z-index:1;font:600 clamp(66px,8.2vw,150px)/.95 'Space Grotesk',sans-serif;letter-spacing:-.095em;margin:25px 0 28px;}
.narrative-intro__body {position:relative;z-index:1;max-width:600px;font-size:clamp(17px,1.5vw,21px);line-height:1.75;color:#657075;margin:10px auto 50px;}
.narrative-intro__scroll {display:flex;align-items:center;gap:26px;position:relative;z-index:1;font-size:11px;font-weight:800;letter-spacing:.17em;border-top:1px solid rgba(60,69,73,.22);padding-top:20px;}
.narrative-intro__scroll span:last-child{font-size:26px;font-weight:400;animation:porticoArrow 2s ease-in-out infinite;}
@keyframes porticoArrow{50%{transform:translateY(7px)}}
.story-section{min-height:880px;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,7vw,160px);align-items:center;padding:125px clamp(50px,8vw,160px);position:relative;isolation:isolate;}
.story-section--familiar{background:var(--cream);}
.story-section--manager{background:linear-gradient(135deg,#E4DBC4 0%,#F3EDE1 65%,#F7F2E8 100%);}
.story-section__copy{max-width:520px;position:relative;z-index:1;}
.story-section__copy h2,.specialists__head h2,.story-ending h2{font:600 clamp(58px,6vw,104px)/1.02 'Space Grotesk',sans-serif;letter-spacing:-.09em;margin:24px 0 28px;}
.story-section__copy p{font:400 clamp(17px,1.33vw,21px)/1.8 'DM Sans',sans-serif;color:#647077;margin:0 0 36px;max-width:485px;}
.story-section__aside {font-weight:800;font-size:10px;letter-spacing:.18em;color:#A18270;display:block;}
.story-art{aspect-ratio:1.1;max-width:620px;width:100%;position:relative;isolation:isolate;}
.story-art--familiar {background:radial-gradient(circle at 50% 52%,rgba(202,214,223,.48),rgba(247,242,232,0) 63%);}
.story-art__halo{position:absolute;inset:15%;border-radius:50%;border:1px dashed rgba(60,69,73,.18);transform:rotate(-18deg);}
.story-art__halo:after{content:"✦";position:absolute;left:1%;top:23%;color:#CB9C7F;font-size:32px;}
.familiar-character{position:absolute;left:32%;top:17%;width:39%;height:67%;filter:drop-shadow(15px 22px 17px rgba(60,69,73,.12));animation:porticoFloat 5s ease-in-out infinite;}
.familiar-character__hair{position:absolute;top:7%;left:16%;width:68%;height:50%;border-radius:49% 48% 43% 45%;background:#6D666B;transform:rotate(-6deg);}
.familiar-character__face{position:absolute;top:16%;left:22%;width:57%;height:37%;border-radius:43% 43% 46% 46%;background:#EAC0A1;display:flex;justify-content:center;align-items:center;gap:20%;z-index:2;box-shadow:inset -12px -8px 0 rgba(161,92,68,.09);}
.familiar-character__face i{display:block;width:7%;height:5%;border-radius:50%;background:#4C4142;}
.familiar-character__face span{position:absolute;width:19%;height:7%;border-bottom:3px solid #9A6C62;border-radius:0 0 50% 50%;top:66%;}
.familiar-character__body{position:absolute;left:3%;width:95%;bottom:5%;height:49%;border-radius:50% 50% 26% 26%;background:#CBD3C3;box-shadow:inset -24px -8px 0 rgba(60,69,73,.07);}
.story-art__paper{position:absolute;z-index:3;background:rgba(255,252,246,.92);padding:20px 22px;box-shadow:0 18px 32px rgba(60,69,73,.1);border:1px solid rgba(228,219,196,.85);display:flex;flex-direction:column;gap:8px;width:clamp(155px,16vw,248px);}
.story-art__paper span{font:800 9px 'DM Sans';letter-spacing:.15em;color:#958878;}
.story-art__paper b{font:600 clamp(16px,1.35vw,21px) 'Space Grotesk';color:var(--ink);}
.story-art__paper i{position:absolute;right:15px;top:13px;color:#C99781;font-style:normal;}
.paper--one{left:-3%;top:15%;transform:rotate(-8deg);}
.paper--two{right:-2%;bottom:14%;transform:rotate(7deg);background:#F1E7D8;}
.story-art__spark{position:absolute;right:15%;top:10%;color:#BA8B78;font-size:45px;animation:porticoFloat 4s ease-in-out infinite reverse;}
@keyframes porticoFloat{50%{transform:translateY(-12px)}}
.story-art--manager{display:grid;place-items:center;}
.manager-map{width:100%;padding:34px;background:#F7F2E8;border:1px solid rgba(60,69,73,.1);box-shadow:24px 25px 0 #CAD6DF,0 25px 55px rgba(60,69,73,.1);transform:rotate(-2.4deg);}
.manager-map__title{display:flex;justify-content:space-between;font:800 10px 'DM Sans';letter-spacing:.18em;border-bottom:1px solid var(--oat);padding-bottom:24px;}
.manager-map__title span{font-size:24px;color:#B98F7D;}
.manager-map__node--head{display:grid;justify-items:center;gap:8px;margin:37px auto 8px;background:#EBC9B5;width:fit-content;min-width:220px;padding:20px 30px;position:relative;}
.manager-map__node--head>span{font-size:27px;}.manager-map__node--head b{font-size:11px;letter-spacing:.08em;}.manager-map__node--head small{font:500 12px 'DM Sans';}
.manager-map__connections{position:relative;width:77%;height:55px;margin:auto;border-left:1.5px dashed #A7A29A;border-right:1.5px dashed #A7A29A;border-top:1.5px dashed #A7A29A;transform:rotate(180deg);}
.manager-map__connections i{position:absolute;left:50%;height:22px;top:-22px;border-left:1.5px dashed #A7A29A;}
.manager-map__agents{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;text-align:center;}
.manager-map__agents>div{padding:17px 5px;background:#CAD6DF;font:800 11px 'DM Sans';display:grid;gap:10px;justify-items:center;}
.manager-map__agents>div:nth-child(2){background:#E4DBC4;}.manager-map__agents>div:nth-child(3){background:#CBD3C3;}
.manager-map__agents span{font-size:31px;}
.manager-map__foot{font:800 9px 'DM Sans';letter-spacing:.16em;color:#968979;margin-top:29px;}
.specialists{background:#F7F2E8;padding:140px clamp(38px,7.5vw,140px) 150px;}
.specialists__head{text-align:center;max-width:900px;margin:0 auto 80px;}
.specialists__head h2 {margin-bottom:22px;}
.specialists__head p{max-width:590px;margin:auto;font:400 clamp(17px,1.3vw,20px)/1.7 'DM Sans';color:#647077;}
.specialists__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.specialist{border:1px solid rgba(60,69,73,.10);padding:16px 16px 32px;background:#FFFCF6;transition:transform .3s ease,box-shadow .3s ease;}
.specialist:hover{transform:translateY(-9px);box-shadow:0 30px 45px rgba(60,69,73,.09);}
.specialist__scene{height:clamp(230px,27vw,390px);position:relative;overflow:hidden;display:grid;place-items:center;background:#CAD6DF;isolation:isolate;}
.specialist--design .specialist__scene{background:#EBC9B5;}.specialist--build .specialist__scene{background:#E4DBC4;}
.specialist__icon{font:600 clamp(95px,11vw,175px) 'Space Grotesk';z-index:2;color:#3C4549;text-shadow:11px 12px 0 rgba(247,242,232,.38);animation:porticoFloat 7s ease-in-out infinite;}
.specialist__note{position:absolute;bottom:20px;left:20px;font:800 10px 'DM Sans';letter-spacing:.13em;background:#F7F2E8;padding:10px 13px;z-index:4;transform:rotate(-2deg);}
.specialist__orbit{position:absolute;aspect-ratio:1;border:1px dashed rgba(60,69,73,.24);border-radius:50%;}
.orbit--one{width:75%;transform:rotate(15deg)}.orbit--two{width:55%;transform:rotate(-25deg);}
.specialist__shape{position:absolute;border-radius:48% 50% 38% 53%;width:44%;height:46%;background:rgba(247,242,232,.46);transform:rotate(33deg);top:8%;right:-9%;}
.shape--two{background:rgba(197,216,221,.65);bottom:10%;left:-12%;top:auto;right:auto;transform:rotate(-20deg);}
.specialist__block{position:absolute;width:90px;height:90px;background:rgba(247,242,232,.7);transform:rotate(-19deg);top:13%;left:9%;}
.block--two{left:auto;top:auto;right:4%;bottom:14%;width:120px;height:120px;background:rgba(202,214,223,.7);transform:rotate(14deg);}
.specialist__no{display:block;margin:26px 12px 10px;font:800 10px 'DM Sans';letter-spacing:.17em;color:#958879;}
.specialist h3{margin:0 12px 13px;font:600 clamp(26px,2.1vw,36px)/1.12 'Space Grotesk';letter-spacing:-.05em;}
.specialist p{margin:0 12px;max-width:340px;color:#647077;font-size:15px;line-height:1.75;}
.story-ending{min-height:90vh;background:linear-gradient(180deg,#E4DBC4,#F7F2E8);text-align:center;padding:14vh 30px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.story-ending h2{font-size:clamp(66px,8vw,132px);margin:28px 0 42px;}
.story-ending__button{font-size:16px !important;gap:25px;min-width:230px;justify-content:center;}
.story-ending__footer{display:flex;justify-content:space-between;align-items:center;align-self:stretch;border-top:1px solid rgba(60,69,73,.18);padding:24px 4vw; margin-top:auto;font:800 11px 'DM Sans';letter-spacing:.13em;}
.story-ending__footer span{font-size:10px;color:#877C74;}
.reveal{opacity:0;filter:blur(8px);transform:translate3d(0,38px,0);transition:opacity 950ms cubic-bezier(.22,1,.36,1), transform 950ms cubic-bezier(.22,1,.36,1),filter 950ms ease;}
.reveal.is-visible{opacity:1;filter:blur(0);transform:translate3d(0,0,0);}
.specialist:nth-child(2){transition-delay:120ms}.specialist:nth-child(3){transition-delay:240ms}
@media (max-width:1050px){.story-section{padding:100px 5vw;gap:35px;min-height:740px;}.story-section__copy h2{font-size:clamp(48px,6vw,72px)}.manager-map{padding:22px}.manager-map__node--head{min-width:180px}.specialists{padding-inline:35px}.specialists__grid{gap:12px}}
@media (max-width:700px){.office-journey{height:195vh;min-height:1000px}.office-journey>.app{min-height:0}.hero__buttons{gap:7px}.primary-button,.text-button{padding:13px 17px !important;min-height:52px}.navigation{display:none}.story-section{grid-template-columns:1fr;padding:75px 24px;min-height:0;gap:40px}.story-section__copy h2{font-size:clamp(46px,9vw,72px)}.story-section--manager .story-art{order:2}.narrative-intro__title{font-size:clamp(56px,10vw,85px)}.narrative-intro{min-height:730px;padding:110px 24px}.narrative-intro__body{font-size:16px}.story-art{width:min(100%,480px);margin:auto}.specialists{padding:90px 24px}.specialists__head h2,.story-ending h2{font-size:clamp(50px,9vw,80px)}.specialists__grid{grid-template-columns:1fr;gap:18px}.specialist__scene{height:300px}.story-ending{min-height:700px}.story-ending__footer span{display:none}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none;transition:none}.familiar-character,.story-art__spark,.specialist__icon,.narrative-intro__scroll span:last-child{animation:none}.scroll-clouds{display:none}}

body.panel-open { overflow:hidden; }