/* Shared visual grammar for the approval lab and public marketing pages. */
.direction-page {
  --motion-instant: 120ms; --motion-fast: 180ms; --motion-ui: 240ms; --motion-copy: 480ms;
  --motion-reveal: 620ms; --motion-scene: 900ms; --motion-route: 760ms;
  --ease-out: cubic-bezier(.16,1,.3,1); --ease-standard: cubic-bezier(.65,0,.35,1);
  --ease-enter: cubic-bezier(.22,1,.36,1); --ease-heavy: cubic-bezier(.2,.75,.25,1);
  --distance-ui: 8px; --distance-copy: 24px; --distance-scene: 8vw;
  --paper: #f5f5f1; --ink: #171b1e; --muted: #626c75; --blue: #d7e5f4;
  --gutter: clamp(24px,4.2vw,80px); --scene-header: 96px;
  margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 Arial, Helvetica, sans-serif; overflow-x: clip;
}
html:has(.direction-page) { scroll-behavior: auto; scroll-padding-top: 96px; }
.direction-page *, .direction-page *::before, .direction-page *::after { box-sizing: border-box; }
.direction-page h1, .direction-page h2, .direction-page h3 { font-weight: 400; line-height: 1.02; letter-spacing: -.055em; margin: 0; overflow-wrap: anywhere; }
.direction-page h2 { font-size: clamp(38px,4.4vw,68px); text-wrap: balance; }
.direction-page p { margin: 0; }
.direction-page a { color: inherit; text-decoration: none; }
.direction-page button { color: inherit; font: inherit; cursor: pointer; background: transparent; border: 1px solid currentColor; }
.direction-page :is(button,a):focus-visible, .direction-page [tabindex]:focus-visible, .direction-page input:focus-visible, .direction-page select:focus-visible { outline: 3px solid #557db1; outline-offset: 5px; }
.direction-page [hidden] { display: none !important; }
.direction-page .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.direction-page img { max-inline-size: 100%; }
.direction-page :is(button,.direction-pill) { transition: color var(--motion-fast), background-color var(--motion-fast), transform var(--motion-fast); }
.direction-page :is(button,.direction-pill):active { transform: scale(.98); }
.direction-page :is(button,a) > span[aria-hidden] { display: inline-block; transition: transform var(--motion-fast) var(--ease-out); }
.direction-page :is(button,a):hover > span[aria-hidden] { transform: translate(4px,-3px); }
.direction-pill { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; padding: 14px 20px; border: 1px solid #737b8450; border-radius: 4px; }
.direction-pill:hover { background: var(--ink); color: var(--paper); }
.direction-header { --header-ink: #171b1e; position: fixed; inset: 0 0 auto; z-index: 100; min-block-size: 88px; padding: max(16px,env(safe-area-inset-top)) var(--gutter) 16px; display: flex; align-items: center; justify-content: space-between; gap: 28px; color: var(--header-ink); background: #f5f5f1f2; border-bottom: 1px solid #78889825; }
.direction-brand { inline-size: 142px; flex: 0 0 auto; line-height: 0; }
.direction-brand img { inline-size: 100%; block-size: auto; }
.direction-header-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; margin-inline-end: auto; }
.direction-header nav { display: flex; align-items: center; gap: 24px; font-size: .875rem; }
.direction-header .direction-pill { padding: 10px 18px; }
.direction-header[data-motion-theme="dark"] { --header-ink: #f5f5f1; background: #171b1ef2; }
.direction-header[data-motion-theme="dark"] .direction-brand img { filter: invert(1); }
.direction-header[data-motion-theme="dark"] .direction-pill:hover { background: #d7e5f4; color: #171b1e; }
.direction-header.is-scrolled .direction-header-label { opacity: .55; }
.direction-header.is-returning .direction-header-label { opacity: 1; }
.direction-progress { position: absolute; inset: auto 0 0; block-size: 2px; background: #96afce; transform-origin: left; transform: scaleX(var(--page-progress,0)); }
.direction-scene { position: relative; min-block-size: 100svh; --enter-progress: 1; --visual-progress: 1; --copy-progress: 1; --hold-progress: 1; --exit-progress: 0; --frame-scale: .82; --frame-x: 0; --frame-radius: .2; --frame-detail: 1; --frame-phone: 0; --frame-panel: 0; --frame-resolved: 1; --field-dim: 1; --attach-photo: 1; --attach-voice: 1; --attach-meta: 1; --attach-owner: 1; --record-ready: 1; --phone-shift: 1; --dashboard-enter: 1; --handoff-progress: 1; --responsibility: 1; --action-ready: 1; --next-progress: 1; --next-arrival: 1; }
.direction-frame { min-block-size: 100svh; display: grid; align-items: center; position: relative; }
.direction-content { inline-size: 100%; min-inline-size: 0; padding: 64px var(--gutter); position: relative; }
.direction-scene > .direction-content { padding-block: max(128px,calc(var(--scene-header) + 32px)) 96px; }
.direction-kicker { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; }
.direction-heading { display: grid; grid-template-columns: minmax(0,.45fr) minmax(0,1fr); align-items: start; gap: 36px; margin-bottom: 28px; }
.direction-heading .direction-kicker { padding-top: 8px; }
.direction-heading h2 { max-inline-size: 22ch; }
.direction-lead { font-size: 1.125rem; max-inline-size: 44ch; line-height: 1.65; margin-top: 32px !important; }
.direction-note { font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.direction-scene-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid #7f90a43d; margin-top: 20px; font-size: .8125rem; }
.direction-scene-foot i { font-style: normal; margin-inline: 16px; }
.direction-intro { background: #f5f5f1; }
.direction-title-composition { position: relative; padding-block: 44px 48px; isolation: isolate; }
.direction-title { font-size: clamp(58px,7.6vw,124px); max-inline-size: 15ch; position: relative; z-index: 2; }
.line-mask { display: block; overflow: clip; padding-bottom: .06em; }
.line-mask > span { display: block; }
.direction-title .line-mask:nth-child(2) { color: #778d9f; }
.direction-raven { position: absolute; inline-size: 29%; max-block-size: 470px; object-fit: contain; right: -1%; bottom: -10%; z-index: 0; opacity: .9; }
.direction-intro-foot { display: flex; justify-content: space-between; align-items: end; gap: 40px; border-top: 1px solid #87909a55; padding-top: 24px; }
.direction-intro-foot p { max-inline-size: 40ch; color: #626c75; }
.direction-intro-foot a { font-size: .875rem; display: flex; align-items: center; gap: 40px; flex-shrink: 0; }
.direction-compare { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.direction-compare button { font-size: .8125rem; border-color: #98a3ad55; padding: 8px 12px; border-radius: 2px; }
.direction-compare button[aria-pressed="true"] { background: #171b1e; color: #f5f5f1; }
.direction-field { background: #171b1e; color: #f5f5f1; }
.field-content { min-block-size: 100svh; display: flex; flex-direction: column; align-items: start; justify-content: center; overflow: clip; }
.field-image-mask { position: absolute; inset: 0; }
.direction-field-image { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.55); }
.field-content::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#111c,#1111); }
.field-content :is(h2,.direction-kicker,.field-caption,.field-target) { position: relative; z-index: 1; }
.field-content h2 { font-size: clamp(56px,6.8vw,108px); max-inline-size: 11ch; margin-top: 24px; }
.field-target { position: absolute !important; inset: 34% 18% 30% 56%; border: 1px solid #eff5ff; }
.field-target::before, .field-target::after { content: ''; position: absolute; width: 16px; height: 16px; border-color: #f5f5f1; border-style: solid; }
.field-target::before { inset: -2px auto auto -2px; border-width: 3px 0 0 3px; }
.field-target::after { inset: auto -2px -2px auto; border-width: 0 3px 3px 0; }
.field-target span { position: absolute; top: calc(100% + 12px); white-space: nowrap; font-size: .875rem; }
.field-caption { margin-top: 48px !important; max-inline-size: 38ch; font-size: .8125rem; color: #d5dde3; }
.direction-morph { background: #e1e7ea; }
.morph-stage { position: relative; min-block-size: 360px; display: grid; place-items: center; isolation: isolate; }
.morph-field { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .12; filter: saturate(.55); z-index: -1; }
.signature-frame { position: relative; inline-size: min(60%,630px); background: #f8f9fa; border: 2px solid #eaf2fb; box-shadow: 0 8px 40px #1d27391a; overflow: clip; }
.signature-frame > img { inline-size: 100%; block-size: 170px; object-fit: cover; display: block; }
.signature-detail { padding: 18px; }
.signature-detail > span { font-size: .8125rem; color: #576779; }
.signature-detail h3 { margin-block: 12px; font-size: 1.4rem; }
.signature-detail p { font-size: .875rem; }
.signature-resolved { display: flex; justify-content: space-between; padding: 14px 18px; font-size: .875rem; background: #d7e5f4; font-weight: 400; }
.morph-phone, .morph-panel { display: none; }
.frame-states { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); list-style: none; padding: 0; margin: 24px 0 12px; border-top: 1px solid #76869750; counter-reset: frame; }
.frame-states li { padding-top: 10px; font-size: .8125rem; min-inline-size: 0; overflow-wrap: anywhere; }
.frame-states li::before { counter-increment: frame; content: '0' counter(frame); display: block; font-size: .6875rem; margin-bottom: 6px; color: #657387; }
.direction-assembly { background: #d7e5f4; }
.direction-assembly-stage { position: relative; min-block-size: 400px; display: grid; place-items: center; padding-block: 16px; }
.direction-record { inline-size: min(100%,560px); padding: 16px; background: #fbfcfc; color: #202a32; border: 1px solid #a7b7c9; border-radius: 6px; }
.direction-record > header { display: flex; justify-content: space-between; gap: 12px; font-size: .75rem; color: #657183; }
.direction-record > h3 { font-size: 1.375rem; line-height: 1.2; margin: 12px 0 16px; letter-spacing: -.035em; }
.direction-record-pieces { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; }
.direction-piece { padding: 10px; min-inline-size: 0; background: #eff4f9; border: 1px solid #d9e2eb; border-radius: 3px; }
.direction-piece > span { display: block; font-size: .75rem; color: #657183; line-height: 1.4; }
.direction-piece strong { font-size: .875rem; font-weight: 500; line-height: 1.35; display: block; margin-top: 4px; overflow-wrap: anywhere; }
.piece-photo { grid-column: span 3; padding: 0; margin: 0; overflow: clip; }
.piece-photo img { display: block; inline-size: 100%; block-size: 96px; object-fit: cover; }
.piece-photo figcaption { font-size: .75rem; padding: 6px 10px; }
.piece-voice { grid-column: span 3; }
.piece-voice p { font-size: .875rem; line-height: 1.4; }
.direction-wave { block-size: 27px; display: flex; gap: 5px; align-items: center; margin-block: 5px; }
.direction-wave i { display: block; inline-size: 2px; block-size: 35%; background: #697f9b; }
.direction-wave i:nth-child(3n) { block-size: 85%; }
.direction-wave i:nth-child(3n + 1) { block-size: 55%; }
.piece-time, .piece-location, .piece-category { grid-column: span 2; }
.piece-priority, .piece-owner { grid-column: span 3; }
.direction-handoff { background: #171b1e; color: #f5f5f1; }
.direction-device-stage { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.7fr); gap: 24px; align-items: start; position: relative; min-block-size: 400px; }
.direction-phone { display: none; }
.direction-travelling-record { min-inline-size: 0; position: relative; z-index: 3; }
.direction-dashboard { background: #252c32; border: 1px solid #5e6c7a; border-radius: 7px; padding: 18px; min-inline-size: 0; }
.direction-dashboard > header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .8125rem; padding-bottom: 14px; border-bottom: 1px solid #667b8c55; }
.direction-responsibility dl { margin: 0; }
.direction-responsibility dl > div { border-bottom: 1px solid #667b8c55; padding-block: 16px; }
.direction-responsibility dt { font-size: .8125rem; color: #aebdcc; }
.direction-responsibility dd { margin: 5px 0 0; font-size: .9375rem; line-height: 1.45; }
.direction-action { font-size: .8125rem; display: flex; gap: 12px; justify-content: space-between; color: #c1d5f0; margin-top: 16px !important; }
.direction-people { background: #eeefeb; }
.people-carousel { position: relative; }
.person-slide { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 6vw; align-items: center; margin-bottom: 48px; min-inline-size: 0; }
.person-portrait { min-inline-size: 0; position: relative; aspect-ratio: 4/3; min-block-size: 320px; background: #d5dfe5; overflow: clip; }
.portrait-index { position: absolute; inset: 14px auto auto 24px; font-size: clamp(90px,12vw,190px); letter-spacing: -.08em; line-height: 1; color: #8c9aa746; }
.portrait-aperture { position: absolute; inset: 18% 18% 14%; border: 1px solid #7d8a9755; overflow: clip; display: grid; place-items: center; }
.portrait-aperture img { inline-size: 55%; block-size: auto; opacity: .38; mix-blend-mode: multiply; }
.person-portrait > p { position: absolute; inset: auto 24px 18px; font-size: .8125rem; line-height: 1.4; }
.person-slide:nth-child(2) .person-portrait { background: #252c32; color: #dce5ed; }
.person-slide:nth-child(2) .portrait-aperture { inset: 14% 24% 20%; }
.person-slide:nth-child(2) .portrait-aperture img { filter: invert(1); mix-blend-mode: screen; }
.person-slide:nth-child(3) .person-portrait { background: #ccd9ea; }
.person-slide:nth-child(3) .portrait-aperture { inset: 25% 12% 10%; }
.person-index-mask { overflow: clip; font-size: .875rem; margin-bottom: 28px; }
.person-copy { min-inline-size: 0; }
.person-copy h3 { font-size: clamp(36px,4.1vw,64px); margin: 20px 0; }
.person-role { font-size: 1.0625rem; line-height: 1.5; }
.person-statement { font-size: 1.125rem; line-height: 1.65; max-inline-size: 34ch; margin-top: 28px !important; }
.person-copy .direction-note { margin-top: 24px; max-inline-size: 42ch; }
.people-deck { min-inline-size: 0; }
.people-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; border-top: 1px solid #8596a450; padding-top: 20px; }
.people-controls > span { font-size: .8125rem; color: #626c75; }
.people-buttons, [data-person-numbers] { display: flex; gap: 8px; }
.people-buttons button { min-inline-size: 44px; min-block-size: 44px; font-size: .8125rem; border-color: #87919b66; border-radius: 50%; }
.people-buttons button[aria-pressed="true"], .people-buttons button:hover { background: #171b1e; color: #fff; }
.carousel-ready .people-deck { display: grid; overflow: clip; }
.carousel-ready .person-slide { grid-area: 1/1; margin: 0 0 28px; transform: translateX(calc((var(--slide-offset) + var(--drag-progress,0)) * 108%)); transition: transform var(--motion-reveal) var(--ease-heavy); }
.carousel-ready .person-portrait { touch-action: pan-y; user-select: none; transform: rotate(calc(var(--drag-progress,0) * 2deg)); transition: transform var(--motion-reveal) var(--ease-heavy); }
.carousel-ready .person-copy { opacity: calc(.6 + var(--slide-emphasis) * .4); }
.carousel-ready.is-dragging :is(.person-slide,.person-portrait) { transition: none; }
.carousel-ready .person-slide.is-repositioning { transition: none; }
.carousel-ready .person-copy h3 { overflow: clip; }
.carousel-ready :is(.person-index-mask,.person-copy h3) > span { display: block; transform: translateY(calc(var(--drag-amount,0) * 35%)); transition: transform var(--motion-copy) var(--ease-heavy); }
.carousel-ready.is-dragging :is(.person-index-mask,.person-copy h3) > span { transition: none; }
.direction-person-chapter { background: #242a30; color: #f5f5f1; }
.person-chapter-content { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px 7vw; align-items: center; }
.person-chapter-portrait { background: #394652; aspect-ratio: 4/3; position: relative; display: grid; place-items: center; overflow: clip; }
.person-chapter-portrait img { inline-size: 42%; filter: invert(1); opacity: .5; }
.person-chapter-portrait > p { position: absolute; inset: auto 20px 20px; font-size: .8125rem; }
.person-chapter-copy h2 { margin-block: 28px 20px; }
.person-chapter-copy > p:not(.direction-kicker) { margin-top: 24px; max-inline-size: 38ch; }
.person-chapter-copy .direction-note { color: #adbdcc; }
.person-chapter-foot { display: flex; flex-wrap: wrap; gap: 24px; grid-column: 1/-1; font-size: .875rem; padding-top: 20px; border-top: 1px solid #aebdcc44; }
.direction-cut { background: #171b1e; color: #f5f5f1; }
.direction-cut .direction-frame { overflow: clip; }
.direction-cut-wash { position: absolute; inset: 0; background: #394f66; }
.direction-cut h2 { font-size: clamp(64px,8vw,130px); max-inline-size: 14ch; margin-top: 24px; }
.cut-record-id { display: block; font-size: .875rem; margin-top: 48px; color: #bad0e6; }
.direction-route { background: #e2e8ed; }
.direction-route-stage { position: relative; background: #eff2f4; overflow: clip; min-block-size: 440px; margin-top: 36px; padding: 48px; display: grid; align-items: center; }
.direction-route-stage h2 { font-size: clamp(72px,11vw,164px); }
.direction-route-stage h2 > span { display: block; }
.direction-route-stage h2 > span:nth-child(2) { color: #71899c; }
.route-alternate { background: #cbdcec; }
.direction-route-mask { position: absolute; inset: 0; background: #171b1e; clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); pointer-events: none; }
.direction-route-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-block: 24px; }
.direction-route-actions :is(button,a) { display: inline-flex; align-items: center; gap: 32px; padding: 14px 20px; border: 1px solid #8a9cab; font-size: .875rem; }
.direction-route-actions :is(button,a):hover { background: #171b1e; color: #f5f5f1; }
.fallback-composition { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6vw; align-items: center; margin-top: 40px; }
.direction-next { background: #171b1e; color: #f5f5f1; }
.next-label { display: block; text-transform: uppercase; margin-block: 36px 12px; font-size: .875rem; }
.direction-next .next-title { font-size: clamp(78px,13vw,208px); line-height: 1; text-transform: uppercase; white-space: normal; }
.next-arrival { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; border-top: 1px solid #97acbf77; padding-top: 24px; margin-top: 48px; }
.next-arrival > span { font-size: .875rem; color: #b9ccdf; }
.next-arrival p { max-inline-size: 37ch; }
.direction-next .direction-pill:hover { background: #d7e5f4; color: #171b1e; }
.direction-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 40px var(--gutter) 100px; font-size: .8125rem; }
.direction-debug { position: fixed; z-index: 110; bottom: 16px; right: 16px; max-inline-size: calc(100vw - 32px); font-size: .8125rem; background: #f5f8fcf7; color: #171b1e; border: 1px solid #8e9faf; border-radius: 6px; }
.direction-debug summary { cursor: pointer; padding: 12px 18px; }
.direction-debug-content { display: grid; gap: 16px; padding: 16px; max-inline-size: 320px; }
.direction-debug-content label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.direction-debug-content select { inline-size: 100%; min-inline-size: 0; padding: 8px; font: inherit; }
.direction-debug-content button { padding: 8px; font: inherit; }
.direction-debug-content input[type="range"] { inline-size: 100%; accent-color: #516c8c; }
.context-cursor { position: fixed; z-index: 120; top: 18px; left: 18px; inline-size: 76px; block-size: 76px; border-radius: 50%; background: #d5e4f3ed; color: #171b1e; border: 1px solid #9db1c9; font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; display: grid; place-items: center; pointer-events: none; transform: translate(calc(var(--cursor-x) * 100vw),calc(var(--cursor-y) * 100vh)); box-shadow: 0 4px 20px #1112; }
@media (min-width:1100px) and (min-height:760px) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .direction-scene.is-pinned { min-block-size: 240svh; }
  .direction-morph.is-pinned { min-block-size: 340svh; }
  .direction-intro.is-pinned { min-block-size: 180svh; }
  .direction-scene.is-pinned > .direction-frame { position: sticky; top: var(--scene-header); min-block-size: calc(100svh - var(--scene-header)); }
  .direction-scene.is-pinned .direction-content { padding-block: 24px; }
  .direction-scene.is-pinned .field-content { min-block-size: calc(100svh - var(--scene-header)); }
  .scene-active.is-nearby :is(.signature-frame,.direction-travelling-record,.direction-raven) { will-change: transform; }
  .scene-active:not(.title-timed) .line-mask > span { transform: translateY(calc((1 - var(--enter-progress)) * 105%)); }
  .scene-active:not(.title-timed) .line-mask:nth-child(2) > span { transform: translateY(calc((1 - var(--visual-progress)) * 105%)); }
  .scene-active .direction-raven { transform: translateY(calc(var(--scene-progress) * -3vw)); }
  .scene-active .field-image-mask { clip-path: inset(calc((1 - var(--visual-progress)) * 14%) calc((1 - var(--visual-progress)) * 5%) 0); }
  .scene-active .direction-field-image { transform: scale(calc(1.04 - var(--visual-progress) * .04)); }
  .scene-active .field-target { opacity: var(--copy-progress); }
  .scene-active .morph-field { opacity: calc(1 - var(--field-dim) * .92); }
  .scene-active .signature-frame { transform: translateX(calc(var(--frame-x) * 100vw)) scale(var(--frame-scale)); border-radius: calc(var(--frame-radius) * 28px); background: rgb(248 249 250 / var(--frame-detail)); box-shadow: none; }
  .scene-active .signature-frame > img { opacity: var(--frame-crop,1); transform: scaleY(calc(2 - var(--frame-detail))); transform-origin: top; }
  .scene-active .signature-detail { opacity: var(--frame-detail); }
  .scene-active .signature-resolved { opacity: var(--frame-resolved); }
  .scene-active .morph-phone { display: block; position: absolute; inset: 0 auto 0 3%; inline-size: 30%; border: 2px solid #728397; border-radius: 28px; opacity: var(--frame-phone); padding: 20px; font-size: .875rem; }
  .scene-active .morph-panel { display: block; position: absolute; inset: 0 0 0 auto; inline-size: 73%; border: 1px solid #728397; border-radius: 6px; opacity: var(--frame-panel); padding: 20px; font-size: .875rem; }
  .scene-active .direction-assembly-stage .direction-record { background: rgb(251 252 252 / var(--record-ready)); border-color: rgb(167 183 201 / var(--record-ready)); }
  .scene-active .direction-assembly-stage .direction-record > :is(header,h3) { opacity: var(--record-ready); }
  .scene-active .direction-assembly-stage .direction-piece { transform: translate(calc(var(--fragment-x,0px) * (1 - var(--attach))),calc(var(--fragment-y,0px) * (1 - var(--attach)))); }
  .direction-assembly-stage .piece-photo { --attach: var(--attach-photo); --fragment-x: -200px; --fragment-y: -12px; }
  .direction-assembly-stage .piece-voice { --attach: var(--attach-voice); --fragment-x: 170px; --fragment-y: -28px; }
  .direction-assembly-stage .piece-time { --attach: var(--attach-meta); --fragment-x: -230px; --fragment-y: 10px; }
  .direction-assembly-stage .piece-location { --attach: var(--attach-meta); --fragment-x: 12px; --fragment-y: 34px; }
  .direction-assembly-stage .piece-category { --attach: var(--attach-meta); --fragment-x: 230px; --fragment-y: 15px; }
  .direction-assembly-stage .piece-priority { --attach: var(--attach-owner); --fragment-x: -120px; --fragment-y: 36px; }
  .direction-assembly-stage .piece-owner { --attach: var(--attach-owner); --fragment-x: 170px; --fragment-y: 30px; }
  /* Keep the record in flow so translated content determines the pin's fit. */
  .scene-active .direction-device-stage { display: block; min-block-size: 410px; padding-block: 48px 16px; }
  .scene-active .direction-phone { display: block; position: absolute; inset: 0 auto 0 0; inline-size: 26%; padding: 16px; border: 2px solid #627488; border-radius: 26px; font-size: .8125rem; transform: translateX(calc((1 - var(--phone-shift)) * 14vw)); }
  .scene-active .direction-phone i { position: absolute; inset: auto 40% 10px; block-size: 3px; background: #aebdcc; border-radius: 6px; }
  .scene-active .direction-travelling-record { position: relative; left: 1%; inline-size: 36%; transform-origin: top left; transform: translateX(calc((1 - var(--phone-shift)) * 14vw + var(--handoff-progress) * 110%)) scale(calc(.66 + var(--handoff-progress) * .34)); }
  .scene-active .direction-dashboard { position: absolute; inset: 0 0 0 auto; inline-size: 62%; opacity: var(--dashboard-enter); transform: translateX(calc((1 - var(--dashboard-enter)) * 3vw)); }
  .scene-active .direction-responsibility { margin-left: 66%; opacity: var(--responsibility); transform: translateY(calc((1 - var(--responsibility)) * 16px)); }
  .scene-active .direction-action { opacity: var(--action-ready); }
  .scene-active .person-chapter-portrait { clip-path: inset(calc((1 - var(--visual-progress)) * 20%) 0 0); transform: translateY(calc((1 - var(--visual-progress)) * 24px)); }
  .scene-active .person-chapter-copy h2 { clip-path: inset(0 0 calc((1 - var(--enter-progress)) * 100%) 0); }
  .scene-active .person-chapter-copy > p:not(.direction-kicker) { opacity: var(--copy-progress); }
  .scene-active .direction-cut-wash { clip-path: polygon(0 0,calc(var(--visual-progress) * 100%) 0,calc(var(--visual-progress) * 130%) 100%,0 100%); }
  .scene-active .direction-next { transform: none; }
  .scene-active .next-title { transform: translateY(calc((1 - var(--next-progress)) * 40px)) scale(calc(.72 + var(--next-progress) * .28)); transform-origin: left center; }
  .scene-active .next-label { opacity: calc(1 - var(--next-progress) * .6); }
  .scene-active .next-arrival { opacity: var(--next-arrival); transform: translateY(calc((1 - var(--next-arrival)) * 24px)); }
}
.title-timed .line-mask > span { transform: none; }
.timed-playing .line-mask > span { animation: direction-title var(--motion-reveal) var(--ease-heavy) both; }
.timed-playing .line-mask:nth-child(2) > span { animation-delay: 90ms; }
@keyframes direction-title { from { transform: translateY(105%); } to { transform: translateY(0); } }
.direction-scene:focus-within :is(.line-mask > span,.person-chapter-copy h2,.next-arrival) { opacity: 1; clip-path: none; }
@view-transition { navigation: auto; }
::view-transition { background: #171b1e; }
::view-transition-old(root) { animation: direction-route-out 340ms cubic-bezier(.65,0,.35,1) both; }
::view-transition-new(root) { animation: direction-route-in 760ms cubic-bezier(.65,0,.35,1) both; }
@keyframes direction-route-out { to { opacity: 0; transform: scale(.98); } }
@keyframes direction-route-in { 0%,35% { clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); } 100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } }
@media (max-width:1099px), (max-height:759px), (pointer:coarse) {
  .direction-content { padding-block: 100px 64px; }
  .direction-heading { grid-template-columns: 1fr; gap: 20px; }
  .direction-title { font-size: clamp(58px,9.2vw,106px); }
  .direction-raven { inline-size: 30%; opacity: .26; }
  .direction-device-stage { grid-template-columns: 1fr; }
  .direction-travelling-record .direction-record { inline-size: 100%; }
  .signature-frame { inline-size: min(100%,630px); }
  .person-slide { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .person-portrait { min-block-size: 0; aspect-ratio: 4/3; }
  .person-copy { padding-inline: 2px; }
  .person-copy h3 { font-size: clamp(36px,6vw,58px); }
  .person-index-mask { margin-bottom: 12px; }
  .person-chapter-content, .fallback-composition { grid-template-columns: 1fr; }
  .person-chapter-portrait { max-inline-size: 650px; inline-size: 100%; }
  .next-arrival { grid-template-columns: 1fr; }
  .next-arrival .direction-pill { justify-self: start; }
}
@media (max-width:600px) {
  .direction-header { min-block-size: 80px; padding-inline: 20px; gap: 12px; }
  .direction-brand { inline-size: 104px; }
  .direction-header-label, .direction-header nav > a:not(.direction-pill) { display: none; }
  .direction-header nav { gap: 4px; }
  .direction-header .direction-pill { font-size: .75rem; padding: 8px 10px; gap: 10px; }
  .direction-header .language-switcher nav { display: block; position: absolute; inset-inline-end: 0; inline-size: 144px; }
  .direction-title { font-size: clamp(48px,12vw,72px); }
  .direction-raven { right: 0; bottom: -12px; inline-size: 36%; opacity: .16; }
  .direction-intro-foot { align-items: start; flex-direction: column; gap: 24px; }
  .field-content h2 { max-inline-size: 9ch; }
  .field-target { inset: 58% 12% 23% 57%; }
  .field-caption { margin-top: 100px !important; }
  .frame-states { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  .direction-record { padding: 14px; }
  .direction-record-pieces { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .piece-photo, .piece-voice { grid-column: 1/-1; }
  .piece-photo img { block-size: 170px; }
  .piece-time, .piece-location, .piece-priority, .piece-category { grid-column: span 1; }
  .piece-owner { grid-column: 1/-1; }
  .direction-piece > span, .piece-photo figcaption { font-size: .8125rem; }
  .direction-piece strong, .piece-voice p { font-size: .9375rem; }
  .direction-route-stage { padding: 28px 20px; min-block-size: 360px; }
  .direction-route-stage h2 { font-size: clamp(58px,14vw,90px); }
  .direction-next .next-title { font-size: clamp(52px,12.5vw,78px); }
  .person-chapter-foot { gap: 12px; }
  .direction-debug { right: 10px; bottom: 10px; }
  .direction-footer { padding-bottom: 110px; }
  ::view-transition-new(root) { animation-duration: 380ms; }
  ::view-transition-old(root) { animation-duration: 170ms; }
}
.motion-reduced .context-cursor { display: none !important; }
.motion-reduced *, .motion-reduced *::before, .motion-reduced *::after { animation: none !important; transition: none !important; }
html:has(.direction-page.motion-reduced) { view-transition-name: none; }
@media (prefers-reduced-motion:reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .direction-page *, .direction-page *::before, .direction-page *::after { animation: none !important; transition: none !important; }
  .context-cursor { display: none !important; }
}

/* KORPPI SIGNAL NAV: scoped to the approval lab. */
html:has(.signal-nav) { scrollbar-gutter: stable; }
.direction-page { --nav-open:0; --nav-route:0; --nav-labels:1; --nav-preview:1; --destination-reveal:1; --destination-copy:1; --motion-menu:780ms; --motion-portal:760ms; }
.direction-header.signal-nav { display:grid; grid-template-columns:132px minmax(0,1fr) auto; gap:22px; padding-block:16px; min-block-size:88px; background:#f5f5f1; border-bottom-color:#77889822; }
.signal-nav .direction-brand { inline-size:132px; }
.signal-nav[data-nav-state="expanded"][data-nav-theme="light"] { background:#f5f5f1e8; }
.signal-nav[data-nav-theme="dark"], .signal-nav[data-nav-theme="photo"] { background:#171b1ef2; color:#f5f5f1; }
.signal-nav[data-nav-theme="dark"] .direction-brand img, .signal-nav[data-nav-theme="photo"] .direction-brand img { filter:invert(1); }
.signal-nav[data-nav-theme="light"] { color:#171b1e; }
.signal-nav[data-nav-theme="light"] .direction-brand img { filter:none; }
.signal-nav-center { min-inline-size:0; position:relative; overflow:clip; min-block-size:44px; display:grid; align-items:center; }
.signal-nav .signal-direct { display:flex; justify-content:center; align-items:center; gap:clamp(14px,1.55vw,24px); font-size:.8125rem; white-space:nowrap; transition:transform 400ms var(--ease-heavy),clip-path 400ms var(--ease-heavy); clip-path:inset(0); }
.signal-nav .signal-direct a { padding-block:10px; }
.signal-chapter { position:absolute; inset:0; pointer-events:none; overflow:clip; clip-path:inset(100% 0 0); transition:clip-path 400ms var(--ease-heavy); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.signal-chapter > span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:transform 340ms var(--ease-heavy); transform:translateY(120%); }
.signal-chapter[data-chapter-slot="0"] [data-chapter-word="0"], .signal-chapter[data-chapter-slot="1"] [data-chapter-word="1"] { transform:translateY(0); }
.signal-nav:is([data-nav-state="chapter"],[data-nav-state="immersive"]) .signal-direct { transform:translateY(-100%); clip-path:inset(100% 0 0); pointer-events:none; }
.signal-nav:is([data-nav-state="chapter"],[data-nav-state="immersive"]) .signal-chapter { clip-path:inset(0); }
.signal-nav .signal-nav-actions { display:flex; align-items:center; gap:18px; font-size:.8125rem; }
.signal-menu-control { display:inline-flex; align-items:center; justify-content:space-between; gap:22px; padding:10px 14px; border:1px solid #7c899577 !important; min-block-size:44px; text-transform:uppercase; font-size:.75rem !important; letter-spacing:.05em; border-radius:0; white-space:nowrap; }
.signal-menu-control > span:last-child { font-size:1.2rem; line-height:1; }
.signal-demo { display:inline-flex; align-items:center; gap:24px; border:1px solid #7c89955c; padding:12px 16px; font-size:.8125rem; white-space:nowrap; }
.signal-demo:hover,.signal-menu-control:hover { background:#d7e5f4; color:#171b1e; }
.signal-login { transition:clip-path 340ms,opacity 340ms; }
.signal-nav[data-nav-state="immersive"] .signal-login { clip-path:inset(0 100% 0 0); opacity:0; pointer-events:none; }
.signal-nav-ready .signal-nav-fallback { display:none; }
.signal-nav-fallback { padding:80px var(--gutter); background:#e4eaf0; }
.signal-menu-open { overflow:hidden; }
.signal-menu-open main { opacity:calc(1 - var(--nav-open) * .48); }
.signal-menu-open.signal-route-travelling main { opacity:1; }
.signal-map { --nav-open:0; --nav-cover:0; --nav-labels:0; --nav-preview:0; --nav-route:0; position:fixed; inset:0; margin:0; padding:18px var(--gutter) 12px; inline-size:100%; block-size:100svh; max-inline-size:none; max-block-size:none; border:0; background:transparent; color:#171b1e; overflow:hidden; }
.signal-map::backdrop { background:transparent; }
.signal-map[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:18px; }
.signal-map-surface { position:absolute; inset:0; background:#e6ebef; clip-path:inset(0 0 0 calc((1 - var(--nav-cover)) * 100%)); }
.signal-map-top { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; z-index:3; min-block-size:52px; }
.signal-map-top .direction-brand { inline-size:132px; }
.signal-map-top h2 { margin-inline-end:auto; font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; opacity:var(--nav-labels); }
.signal-map-body { position:relative; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:4vw; min-block-size:0; overflow:auto; padding-block:14px; }
.signal-map-routes { display:flex; flex-direction:column; justify-content:space-between; min-inline-size:0; }
.signal-map-link { display:grid; grid-template-columns:26px minmax(0,1fr) auto 20px; align-items:center; gap:12px; padding:10px 0; border-top:1px solid #8796a844; }
.signal-map-link:last-child { border-bottom:1px solid #8796a844; }
.signal-map-index { font-size:.6875rem; color:#6b7a88; align-self:start; margin-top:8px; }
.signal-map-label { overflow:clip; min-inline-size:0; }
.signal-map-label > span { display:block; font-size:clamp(28px,3.05vw,48px); line-height:1; letter-spacing:-.04em; text-transform:uppercase; overflow-wrap:anywhere; }
.signal-map-label > small { display:block; font-size:.75rem; line-height:1.4; margin-top:6px; color:#566674; }
.signal-map-label > :is(span,small) { transform:translateY(calc((1 - var(--nav-labels,1)) * 135%)); }
.signal-map-link .signal-map-label { transition:transform 180ms var(--ease-out); }
.signal-map-link[data-preview-active="true"] .signal-map-label { transform:translateX(8px); }
.signal-map-link[data-preview-active="true"] .signal-map-index { color:var(--accent-ink); background:var(--accent); }
.signal-map-link[data-preview-active="false"] .signal-map-label > span { color:#53616c; }
.signal-current { display:none; font-size:.5625rem; letter-spacing:.05em; text-transform:uppercase; padding:3px 5px; border:1px solid #899aaa; }
.signal-map-link[aria-current] .signal-current { display:block; }
.signal-link-arrow { font-size:1.2rem; }
.signal-portal-home { min-inline-size:0; min-block-size:360px; opacity:var(--nav-preview); }
.signal-portal { --preview-progress:1; position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; inline-size:100%; block-size:100%; min-block-size:340px; border:1px solid #a2b0bb; background:#d6e0e8; color:#171b1e; overflow:clip; isolation:isolate; }
.signal-portal-top,.signal-portal-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px; font-size:.75rem; line-height:1.5; position:relative; z-index:2; }
.signal-portal-top { text-transform:uppercase; letter-spacing:.06em; }
.signal-portal-bottom { border-top:1px solid #95a7b75e; min-block-size:72px; }
.signal-portal-open { flex-shrink:0; }
.signal-portal-art { position:relative; min-block-size:0; display:grid; align-items:center; justify-items:center; padding:24px; transform:translate(calc(var(--portal-pointer-x,0) * 5px),calc(var(--portal-pointer-y,0) * 5px)); }
.portal-raven { inline-size:65%; max-block-size:360px; object-fit:contain; }
.portal-signal-point { position:absolute; right:25%; top:34%; width:7px; height:7px; border-radius:50%; background:#edf6ff; }
.portal-record { inline-size:100%; max-inline-size:380px; padding:16px; border:1px solid #adbac6; background:#f8fafb; border-radius:4px; }
.portal-record > span { display:flex; justify-content:space-between; font-size:.65rem; color:#647485; }
.portal-record i { font-style:normal; }
.portal-record h3 { margin:16px 0; font-size:clamp(18px,1.5vw,26px); }
.portal-record-pieces { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.portal-record-pieces > * { min-inline-size:0; transform:translateY(calc((1 - var(--preview-progress)) * 32px)); opacity:calc(.2 + var(--preview-progress) * .8); }
.portal-record-pieces img { inline-size:100%; block-size:100px; object-fit:cover; }
.portal-record-pieces > span { padding:10px; font-size:.6875rem; background:#e3ebf2; }
.portal-wave { display:flex; align-items:center; justify-content:center; gap:7px; background:#e3ebf2; }
.portal-wave i { width:2px; height:25%; background:#7f94a7; }
.portal-wave i:nth-child(2n) { height:50%; }
.portal-record > p { margin-top:16px; font-size:.75rem; }
.portal-next-action { border:1px solid #8fa4b8; inline-size:100%; padding:24px; background:#f1f5f7; transform:translateY(calc((1 - var(--preview-progress)) * 26px)); }
.portal-next-action > span { display:block; font-size:.6875rem; color:#647585; margin-top:12px; }
.portal-next-action > strong { display:block; font-size:1.6rem; font-weight:400; margin-top:5px; }
.portal-next-action > p { margin-top:8px; font-size:.9375rem; }
.portal-small-signal { position:absolute; top:6%; left:10%; font-size:.75rem; }
.signal-portal[data-preview="industries"] { background:#171b1e; color:#f5f5f1; }
.signal-portal-art[data-portal-art="industries"] { padding:0; }
.portal-environment { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; filter:saturate(.65); }
.portal-target { position:absolute; inset:25% 16% 25% 38%; border:1px solid white; transform:scale(calc(.7 + var(--preview-progress) * .3)); }
.portal-environment-label { position:absolute; bottom:24px; left:24px; padding:4px 7px; background:#171b1ecc; font-size:.75rem; }
.signal-portal[data-preview="team"] { background:#242d34; color:#e8edf1; }
.portal-person-index { position:absolute; top:8px; left:24px; font-size:.8125rem; letter-spacing:.06em; }
.portal-portrait-trio { display:grid; grid-template-columns:.5fr 1fr .5fr; grid-template-rows:minmax(0,1fr); gap:8px; width:100%; height:76%; min-block-size:0; }
.portal-portrait-trio i { min-block-size:0; overflow:clip; background:#566775; display:grid; place-items:center; transform:translateY(calc((1 - var(--preview-progress)) * 25px)); }
.portal-portrait-trio i:nth-child(2) { background:#a1b1be; transform:none; }
.portal-portrait-trio img { width:90%; height:auto; max-block-size:100%; object-fit:contain; opacity:.8; }
.portal-portrait-note { position:absolute; bottom:8px; left:24px; right:24px; font-size:.6875rem; }
.portal-archive { list-style:none; width:100%; padding:0; }
.portal-archive li { display:flex; gap:24px; padding:24px 0; border-block-end:1px solid #92a6b8; font-size:1.125rem; transform:translateY(calc((1 - var(--preview-progress)) * 12px)); }
.portal-archive span { font-size:.6875rem; }
.portal-pricing { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; min-block-size:240px; border-top:1px solid #829aaf; }
.portal-pricing article { min-inline-size:0; padding:18px 10px; border-right:1px solid #a0b1bf; }
.portal-pricing article:last-child { border:0; }
.portal-pricing article > span { font-size:.65rem; }
.portal-pricing h3 { font-size:clamp(16px,1.5vw,24px); margin-top:28px; overflow-wrap:anywhere; }
.portal-pricing p { margin-top:12px; font-size:.6875rem; line-height:1.5; }
.portal-pricing i { display:block; height:1px; background:#9cafbf; margin-top:18px; transform:scaleX(var(--preview-progress)); transform-origin:left; }
.signal-map-utilities { position:relative; display:flex; gap:24px; justify-content:space-between; align-items:center; opacity:var(--nav-labels); border-top:1px solid #93a5b74d; padding-top:16px; font-size:.75rem; }
.signal-map-utilities > div:first-child { display:flex; gap:24px; align-items:center; }
.signal-map-utilities .language-switcher nav { inset-block-start:auto; inset-block-end:100%; }
.signal-unconfirmed { display:flex; flex-wrap:wrap; gap:5px 18px; align-items:center; font-size:.625rem; color:#536574; max-inline-size:40%; }
.signal-unconfirmed a { display:block; overflow-wrap:anywhere; }
.signal-unconfirmed a > span { display:block; font-size:.5625rem; }
.signal-map-note { position:relative; font-size:.625rem; color:#697b8b; opacity:var(--nav-labels); }
.signal-destination > .direction-content { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px 6vw; align-items:center; min-block-size:100svh; }
.signal-destination-heading h2 { font-size:clamp(58px,7vw,112px); margin-block:24px; }
.signal-destination-heading > p:not(.direction-kicker) { max-inline-size:33ch; font-size:1.2rem; line-height:1.6; }
.signal-destination-heading .direction-pill { margin-top:32px; font-size:.8125rem; }
.signal-back-lab { display:block; font-size:.8125rem; margin-top:24px; }
.signal-destination-visual { block-size:560px; min-inline-size:0; }
.signal-destination-note { grid-column:1/-1; }
.signal-route-travelling .signal-destination-heading > :is(h2,.direction-kicker) { clip-path:inset(0 0 calc((1 - var(--destination-reveal)) * 100%) 0); transform:translateY(calc((1 - var(--destination-reveal)) * 18px)); }
.signal-route-travelling .signal-destination-heading > :is(p:not(.direction-kicker),a),.signal-route-travelling .signal-destination-note { opacity:var(--destination-copy); transform:translateY(calc((1 - var(--destination-copy)) * 8px)); }
.signal-flight-resume { position:fixed; z-index:10; bottom:30px; right:30px; background:#f5f5f1 !important; padding:16px 24px; box-shadow:0 3px 20px #0002; }
.home-portal-landing { position:absolute; right:-1%; bottom:-10%; width:29%; height:470px; pointer-events:none; }
.home-portal-landing .signal-portal { border:0; background:transparent; display:block; min-block-size:0; }
.home-portal-landing .signal-portal-art { height:100%; padding:0; }
.home-portal-landing .portal-raven { width:100%; height:100%; max-block-size:none; }
.home-portal-landing :is(.signal-portal-top,.signal-portal-bottom,.portal-signal-point) { display:none; }
.home-has-portal .direction-raven { visibility:hidden; }
.signal-lab-controls { display:grid; gap:12px; padding-top:16px; border-top:1px solid #92a4b8; }
.signal-lab-controls > p:first-child { font-weight:600; }
.signal-entry-replays { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.signal-entry-replays button { font-size:.6875rem !important; }
.direction-debug-content { max-block-size:calc(85svh - 70px); overflow:auto; }
@media (max-width:1099px) {
  .signal-nav .signal-direct { font-size:.75rem; gap:12px; }
  .signal-nav .signal-nav-actions { gap:10px; }
  .direction-header.signal-nav { grid-template-columns:115px minmax(0,1fr) auto; gap:16px; padding-inline:24px; }
  .signal-nav .direction-brand { inline-size:115px; }
  .signal-login { display:none; }
  .signal-map-body { gap:24px; }
  .signal-map-label > span { font-size:30px; }
  .signal-map-utilities { flex-wrap:wrap; gap:12px; }
  .signal-unconfirmed { max-inline-size:55%; }
  .signal-destination > .direction-content { grid-template-columns:1fr; }
  .signal-destination-visual { block-size:500px; }
}
@media (max-width:760px) {
  .direction-header.signal-nav { grid-template-columns:96px minmax(0,1fr); gap:10px; padding:14px 16px; min-block-size:80px; }
  .signal-nav .direction-brand { inline-size:96px; }
  .signal-nav-center { display:none; }
  .signal-nav .signal-nav-actions { justify-content:flex-end; gap:8px; }
  .signal-nav .signal-nav-actions > :is(.signal-menu-control,.signal-demo) { display:inline-flex; }
  .signal-menu-control { font-size:.625rem !important; gap:8px; padding:10px 8px; }
  .signal-nav .signal-demo { font-size:.625rem; padding:11px 8px; gap:6px; }
  .signal-nav .signal-demo > span { display:none; }
  .signal-map { padding:14px 20px 10px; }
  .signal-map[open] { gap:10px; }
  .signal-map-top { gap:12px; }
  .signal-map-top .direction-brand { inline-size:104px; }
  .signal-map-top h2 { font-size:.5625rem; letter-spacing:.05em; }
  .signal-map-body { display:block; padding-block:6px; }
  .signal-map-link { padding:9px 0; gap:9px; grid-template-columns:20px minmax(0,1fr) auto 24px; }
  .signal-map-link:hover > .signal-link-arrow { transform:none; }
  .signal-map-label > span { font-size:28px; }
  .signal-map-label > small { font-size:.6875rem; }
  .signal-map-index { margin-top:5px; }
  .signal-current { font-size:.5rem; padding:2px 3px; }
  .signal-portal-home { block-size:260px; min-block-size:0; margin-top:20px; }
  .signal-portal-home .signal-portal { min-block-size:0; }
  .signal-portal-top,.signal-portal-bottom { padding:12px; font-size:.6875rem; }
  .signal-portal-bottom { min-block-size:50px; }
  .signal-portal-art { padding:12px; }
  .signal-portal-home .portal-record { padding:10px; }
  .signal-portal-home .portal-record > p,.signal-portal-home .portal-record-pieces > span { display:none; }
  .signal-portal-home .portal-record h3 { margin:8px 0; font-size:17px; }
  .signal-portal-home .portal-record-pieces img { block-size:70px; }
  .signal-portal-home .portal-raven { block-size:130px; }
  .signal-map-utilities { align-items:start; gap:8px; padding-top:8px; }
  .signal-map-utilities > div:first-child { gap:16px; }
  .signal-unconfirmed { order:3; max-inline-size:100%; inline-size:100%; font-size:.5625rem; gap:4px 12px; }
  .signal-unconfirmed a > span { display:none; }
  .signal-map-utilities .signal-demo { font-size:.6875rem; padding:8px 10px; gap:8px; }
  .signal-map-note { font-size:.5625rem; }
  .signal-destination-visual { block-size:460px; }
  .home-portal-landing { width:36%; height:200px; bottom:-12px; right:0; opacity:.16; }
  .signal-flight-resume { right:20px; bottom:20px; padding:12px 16px; }
}
@media (max-width:380px) {
  .direction-header.signal-nav { grid-template-columns:82px minmax(0,1fr); gap:8px; }
  .signal-nav .direction-brand { inline-size:82px; }
  .signal-nav .signal-nav-actions { gap:6px; }
  .signal-map-label > span { font-size:24px; }
  .signal-map-top h2 { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); }
}
@media (prefers-reduced-motion:reduce) { .signal-menu-open main { transform:none; opacity:1; } .signal-portal-art { transform:none; } }
.motion-reduced.signal-menu-open main { transform:none; opacity:1; }
.motion-reduced .signal-portal-art { transform:none; }
@media (prefers-reduced-motion:reduce) { .signal-map-link .signal-map-label { transform:none; transition:none; } }
.motion-reduced .signal-map-link .signal-map-label { transform:none; transition:none; }

.direction-page { --entry-form:1; --entry-title-a:1; --entry-title-b:1; --entry-copy:1; --entry-cta:1; --first-scroll:0; }
.first-signal-layer { position:fixed; inset:0; z-index:90; pointer-events:none; overflow:clip; }
.first-signal-paper { position:absolute; inset:0; background:#f5f5f1; opacity:var(--entry-paper,1); }
.first-signal-point { position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:50%; background:#b8d3ee; opacity:var(--entry-signal,1); }
.first-signal-running .first-signal-layer > .first-signal-point { animation:signal-once 220ms ease-out 1; }
@keyframes signal-once { 0% { transform:scale(.7); } 55% { transform:scale(1.8); } 100% { transform:scale(1); } }
.first-signal-id { position:absolute; top:calc(50% + 28px); left:50%; transform:translateX(-50%); font-size:.6875rem; letter-spacing:.16em; opacity:var(--entry-signal); }
.first-signal-frame { position:absolute; left:50%; top:48%; width:min(48vw,620px); height:min(58vh,520px); transform:translate(-50%,-50%) scale(calc(.16 + var(--entry-frame) * .84)); opacity:calc(var(--entry-frame) * (1 - var(--entry-form))); }
.first-signal-frame > i { position:absolute; width:30px; height:30px; border-color:#6d8499; border-style:solid; opacity:var(--entry-frame); }
.first-signal-frame > i:nth-child(1) { top:0; left:0; border-width:1px 0 0 1px; }
.first-signal-frame > i:nth-child(2) { top:0; right:0; border-width:1px 1px 0 0; opacity:clamp(0,calc(var(--entry-frame) * 1.3 - .12),1); }
.first-signal-frame > i:nth-child(3) { bottom:0; right:0; border-width:0 1px 1px 0; opacity:clamp(0,calc(var(--entry-frame) * 1.3 - .2),1); }
.first-signal-frame > i:nth-child(4) { bottom:0; left:0; border-width:0 0 1px 1px; opacity:clamp(0,calc(var(--entry-frame) * 1.3 - .3),1); }
.first-signal-scan { position:absolute; inset:0 0 auto; height:1px; background:#9db6cc; transform:translateY(calc(var(--entry-scan) * min(58vh,520px))); opacity:clamp(0,calc((1 - var(--entry-scan)) * 5),1); }
.first-signal-words { position:absolute; bottom:-32px; left:0; right:0; text-align:center; font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; opacity:var(--entry-words); }
.first-signal-raven { position:absolute; left:50%; top:48%; width:min(42vw,490px); height:min(54vh,500px); transform:translate(-50%,-50%) scale(calc(1 - var(--entry-form) * .06)); opacity:calc(1 - var(--entry-form)); }
.first-signal-raven img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.first-signal-raven img:nth-child(1) { clip-path:polygon(0 0,100% 0,100% 38%,0 38%); opacity:var(--entry-raven-a); transform:translateY(calc((1 - var(--entry-raven-a)) * 12px)); }
.first-signal-raven img:nth-child(2) { clip-path:polygon(0 37%,100% 37%,100% 69%,0 69%); opacity:var(--entry-raven-b); transform:translateY(calc((1 - var(--entry-raven-b)) * 16px)); }
.first-signal-raven img:nth-child(3) { clip-path:polygon(0 68%,100% 68%,100% 100%,0 100%); opacity:var(--entry-raven-c); transform:translateY(calc((1 - var(--entry-raven-c)) * 20px)); }
.first-signal-nav-rule { position:absolute; top:88px; left:0; width:100%; height:1px; background:#6e869b; transform:translateY(calc((1 - var(--entry-form)) * (50vh - 88px))) scaleX(calc(.24 + var(--entry-form) * .76)); opacity:calc(var(--entry-raven-c) * (1 - var(--entry-title-a))); }
.first-signal-menu-edge,.first-signal-demo-edge { position:absolute; border:1px solid #7891a6; opacity:calc(var(--entry-raven-c) * (1 - var(--entry-form))); }
.first-signal-menu-edge { left:calc(var(--entry-menu-x) * 100vw); top:calc(var(--entry-menu-y) * 100vh); width:calc(var(--entry-menu-w) * 100vw); height:calc(var(--entry-menu-h) * 100vh); transform:translate(calc((.5 - var(--entry-menu-x)) * 100vw * (1 - var(--entry-form))),calc((.5 - var(--entry-menu-y)) * 100vh * (1 - var(--entry-form)))) scale(calc(1 + (1 - var(--entry-form)) * 3)); }
.first-signal-demo-edge { left:calc(var(--entry-demo-x) * 100vw); top:calc(var(--entry-demo-y) * 100vh); width:calc(var(--entry-demo-w) * 100vw); height:calc(var(--entry-demo-h) * 100vh); transform:translateY(calc((1 - var(--entry-form)) * 40vh)); }
.first-signal-running .signal-nav { background:transparent; border-color:transparent; }
.first-signal-running .signal-nav .direction-brand { clip-path:inset(0 calc((1 - var(--entry-form)) * 100%) 0 0); transform:translateY(calc((1 - var(--entry-form)) * 10px)); }
.first-signal-running .signal-nav-center { clip-path:inset(0 calc((1 - var(--entry-form)) * 100%) 0 0); }
.first-signal-running .signal-nav-actions > * { clip-path:inset(calc((1 - var(--entry-form)) * 100%) 0 0); transform:translateY(calc((1 - var(--entry-form)) * 20px)); }
.first-signal-running .signal-nav .direction-progress { transform:scaleX(var(--entry-form)); }
.first-signal-ready #direction-title:not(.title-timed) .line-mask > span { transform:none; }
.first-signal-ready .direction-raven { transform:translate(calc(var(--hero-pointer-x,0) * 8px),calc(var(--hero-pointer-y,0) * 8px)); }
.first-signal-ready .direction-title { transform:translate(calc(var(--hero-pointer-x,0) * 2px),calc(var(--hero-pointer-y,0) * 2px)); }
.first-signal-running #direction-title .line-mask:first-child > span { transform:translateY(calc((1 - var(--entry-title-a)) * 105%)); }
.first-signal-running #direction-title .line-mask:nth-child(2) > span { transform:translateY(calc((1 - var(--entry-title-b)) * 105%)); }
.first-signal-running .first-hero-label { opacity:clamp(0,calc(var(--entry-form) * 5 - 4),1); }
.first-signal-running .direction-raven { opacity:var(--entry-form); }
.first-signal-running .direction-intro-foot > p { clip-path:inset(0 0 calc((1 - var(--entry-copy)) * 100%) 0); }
.first-signal-running :is(.first-hero-cta,.first-hero-scroll,.direction-compare) { opacity:var(--entry-cta); }
.first-scroll-field,.first-scroll-wing { display:none; position:absolute; inset:0; pointer-events:none; overflow:clip; }
.first-scroll-field { z-index:3; }
.first-scroll-field > img { width:100%; height:100%; object-fit:cover; filter:saturate(.7) brightness(.72); }
.first-scroll-field > p { position:absolute; bottom:8%; left:var(--gutter); right:var(--gutter); color:#f5f5f1; font-size:clamp(24px,3vw,44px); max-inline-size:24ch; }
.first-scroll-target { position:absolute; left:62%; top:42%; width:17%; height:26%; border:1px solid #e5f0fa; opacity:var(--first-lock); }
.first-scroll-target > .first-signal-point { opacity:1; top:50%; left:50%; }
.first-scroll-wing { z-index:2; }
.first-scroll-wing > img { position:absolute; width:29%; height:auto; right:4%; top:15%; transform:scale(calc(1 + var(--first-wing) * 14)); transform-origin:center; }
.first-scroll-wing::after { content:''; position:absolute; inset:0; background:#101719; opacity:clamp(0,calc(var(--first-wing) * 5 - 3.5),1); }
.first-signal-ready #direction-title.scene-active .first-scroll-wing { display:block; opacity:clamp(0,calc(var(--first-wing) * 3),1); }
.first-signal-ready #direction-title.scene-active .first-scroll-field { display:block; opacity:var(--first-field); clip-path:polygon(0 0,calc(var(--first-field) * 100%) 0,calc(var(--first-field) * 130%) 100%,0 100%); }
.first-signal-ready #direction-title.scene-active .direction-content { z-index:4; opacity:calc(1 - var(--first-wing)); }
.first-signal-running #direction-title.scene-active .direction-content { opacity:1; }
.first-signal-running[data-entry-mode="reduced"] .first-signal-layer > :not(.first-signal-paper) { display:none; }
.first-signal-running[data-entry-mode="reduced"] :is(.signal-nav .direction-brand,.signal-nav-actions > *,.direction-title,.direction-raven) { transform:none; }
@media (max-width:760px) {
  .first-signal-frame { width:72vw; height:44vh; }
  .first-signal-raven { width:65vw; height:42vh; }
  .first-signal-words { font-size:.5625rem; }
  .first-hero-cta { margin-top:4px; }
  .direction-intro-foot { gap:20px; }
}
.motion-reduced .first-scroll-wing,.motion-reduced .first-scroll-field { display:none !important; }
.motion-reduced.first-signal-ready .direction-content { opacity:1; }
.motion-reduced :is(.direction-raven,.direction-title) { transform:none !important; }
@media (prefers-reduced-motion:reduce) { .first-scroll-wing,.first-scroll-field { display:none !important; } .first-signal-ready :is(.direction-raven,.direction-title) { transform:none; } }

/* The content canvas grows with the viewport, including on large desktop displays. */
.direction-page { --gutter:clamp(20px,3vw,96px); --canvas-space:calc(100svh - var(--scene-header)); }
.direction-frame { min-block-size:var(--canvas-space); align-items:stretch; }
.direction-heading { grid-template-columns:minmax(0,.28fr) minmax(0,1fr); }
.direction-heading h2 { max-inline-size:none; font-size:clamp(42px,5.2vw,180px); }
.direction-assembly-stage .direction-record { inline-size:74%; }
.signature-frame { inline-size:60%; }
.direction-travelling-record .direction-record { inline-size:100%; }
.person-chapter-portrait { max-inline-size:none; }
.person-chapter-portrait img { inline-size:65%; block-size:auto; max-block-size:80%; object-fit:contain; }
.direction-route-stage { margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); }
.signal-destination-visual .signal-portal { border:0; background:transparent; display:grid; grid-template-rows:minmax(0,1fr); }
.signal-destination-visual .signal-portal > :is(.signal-portal-top,.signal-portal-bottom) { display:none; }

@media (min-width:1100px) {
  .signal-map-body { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); overflow:auto; margin-inline-end:calc(-1 * var(--gutter)); padding-inline-end:var(--gutter); }
  .signal-portal-home { margin-inline-end:calc(-1 * var(--gutter)); }
  .signal-portal-home .signal-portal { border:0; background:var(--paper); display:block; }
  .signal-portal-home .signal-portal-art { position:absolute; inset:0; padding:24px; }
  .signal-portal-home .signal-portal-top { position:absolute; inset:0 0 auto; }
  .signal-portal-home .signal-portal-bottom { position:absolute; inset:auto 0 0; border:0; }
  .signal-portal-home .signal-portal-art { clip-path:inset(0 0 0 calc((1 - var(--preview-progress)) * 100%)); }
  .signal-map-label > span { font-size:clamp(28px,3.4vw,58px); }
  .direction-frame { align-items:stretch; }
  .direction-content { padding-block:32px; }
  .direction-scene.is-pinned .direction-content { padding-block:24px; }
  .direction-frame > .direction-content { min-block-size:var(--canvas-space); }
  .direction-intro:not(.is-pinned) > .direction-frame > .direction-content { min-block-size:100svh; padding-block-start:calc(var(--scene-header) + 24px); }
  :is(.direction-intro,.direction-morph,.direction-assembly,.direction-handoff,.direction-cut,.direction-next) .direction-content { display:flex; flex-direction:column; justify-content:space-between; gap:clamp(16px,2svh,32px); }
  .direction-heading { margin-bottom:0; }
  :is(.morph-stage,.direction-assembly-stage,.direction-device-stage) { flex:1; }
  .direction-scene-foot { margin-top:0; }
  .direction-title-composition { flex:1; display:flex; align-items:center; padding-block:32px; }
  .direction-title { font-size:clamp(88px,8vw,280px); max-inline-size:none; inline-size:77%; }
  .direction-raven,.home-portal-landing { inline-size:37%; block-size:100%; max-block-size:none; inset:auto -1% 0 auto; object-fit:contain; }
  .direction-compare { margin-top:0; }
  .direction-intro-foot > p { font-size:clamp(16px,1.2vw,30px); }
  .morph-stage { min-block-size:clamp(360px,55svh,880px); }
  .signature-frame > img { block-size:clamp(170px,26svh,420px); }
  .signature-detail { padding:clamp(18px,1.5vw,40px); }
  .signature-detail h3 { font-size:clamp(24px,2.2vw,64px); }
  .signature-detail :is(span,p),.signature-resolved { font-size:clamp(14px,1.1vw,28px); }
  .direction-assembly-stage { min-block-size:clamp(410px,60svh,960px); }
  .direction-assembly-stage .piece-photo { --fragment-x:-10vw; }
  .direction-assembly-stage .piece-voice,.direction-assembly-stage .piece-owner { --fragment-x:9vw; }
  .direction-assembly-stage .piece-time { --fragment-x:-11vw; }
  .direction-assembly-stage .piece-category { --fragment-x:11vw; }
  .direction-assembly-stage .piece-priority { --fragment-x:-6vw; }
  .direction-record { padding:clamp(16px,1.2vw,32px); }
  .direction-record > header,.direction-piece > span,.piece-photo figcaption { font-size:clamp(12px,.95vw,24px); }
  .direction-record > h3 { font-size:clamp(22px,1.8vw,48px); }
  .direction-piece { padding:clamp(10px,.8vw,22px); }
  .piece-photo { padding:0; }
  .piece-photo img { block-size:clamp(130px,17svh,280px); }
  .piece-voice p,.direction-piece strong { font-size:clamp(14px,1.1vw,28px); }
  .direction-wave { block-size:clamp(27px,4svh,64px); }
  .scene-active .direction-device-stage,.direction-device-stage { min-block-size:clamp(420px,60svh,960px); }
  .direction-dashboard { padding:clamp(18px,1.4vw,40px); }
  .direction-dashboard > header,.direction-responsibility dt,.direction-action { font-size:clamp(13px,1.05vw,26px); }
  .direction-responsibility dd { font-size:clamp(15px,1.2vw,30px); }
  .direction-responsibility dl > div { padding-block:clamp(16px,2svh,32px); }
  .direction-people > .direction-content { padding-block:32px; }
  .people-carousel { margin-top:32px; }
  .person-portrait { aspect-ratio:auto; min-block-size:65svh; }
  .person-copy h3 { font-size:clamp(48px,5.4vw,168px); }
  .person-role,.person-statement { font-size:clamp(18px,1.45vw,36px); }
  .person-chapter-content { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:24px 4vw; }
  .person-chapter-portrait { align-self:stretch; aspect-ratio:auto; min-block-size:65svh; }
  .person-chapter-copy h2 { font-size:clamp(56px,5.8vw,180px); }
  .person-chapter-copy > p:not(.direction-note,.direction-kicker),.direction-lead { font-size:clamp(18px,1.45vw,36px); }
  .person-chapter-foot { align-self:end; }
  .direction-cut h2 { font-size:clamp(80px,10vw,320px); max-inline-size:15ch; }
  .field-content h2 { font-size:clamp(64px,8vw,240px); }
  .field-caption { font-size:clamp(13px,1.1vw,28px); }
  .direction-cut .direction-lead { margin-top:0 !important; }
  .direction-route-stage { min-block-size:68svh; }
  .direction-route-stage h2 { font-size:clamp(100px,14vw,420px); }
  .direction-fallback > .direction-content { min-block-size:100svh; display:flex; flex-direction:column; justify-content:space-between; gap:32px; }
  .fallback-composition { flex:1; margin-top:0; }
  .fallback-composition h2 { font-size:clamp(64px,6.5vw,190px); }
  .fallback-composition .direction-record { inline-size:100%; }
  .direction-next .next-title { font-size:clamp(120px,17vw,520px); }
  .next-arrival { margin-top:0; }
  .signal-destination > .direction-content { min-block-size:var(--canvas-space); padding-block:24px; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:24px 4vw; }
  .signal-destination-visual { block-size:calc(100svh - var(--scene-header) - 100px); min-block-size:480px; }
  .signal-destination-heading h2 { font-size:clamp(72px,8vw,240px); }
  .signal-destination-heading > p:not(.direction-kicker) { font-size:clamp(20px,1.6vw,40px); }
  :is(.signal-portal-home,.signal-destination-visual) .portal-record { max-inline-size:100%; inline-size:38vw; padding:2vw; }
  :is(.signal-portal-home,.signal-destination-visual) .portal-record h3 { font-size:clamp(24px,2.1vw,58px); }
  :is(.signal-portal-home,.signal-destination-visual) .portal-record-pieces img { block-size:20svh; }
  :is(.signal-portal-home,.signal-destination-visual) .portal-record :is(p,span) { font-size:clamp(13px,1.05vw,26px); }
}

@media (min-width:601px) and (max-width:1099px) {
  .direction-heading { grid-template-columns:1fr; }
  .direction-content,.direction-scene > .direction-content { padding-block:40px; }
  .direction-intro .direction-content { padding-block-start:calc(var(--scene-header) + 24px); }
  :is(.direction-morph,.direction-assembly,.direction-handoff) .direction-content { display:flex; flex-direction:column; justify-content:space-between; gap:20px; }
  :is(.direction-morph,.direction-assembly,.direction-handoff) .direction-heading { margin-bottom:0; }
  .direction-assembly-stage .direction-record,.signature-frame { inline-size:92%; }
  .direction-record { max-inline-size:none; }
  .piece-photo img { block-size:24svh; }
  .direction-title { font-size:10vw; }
  .direction-title-composition { min-block-size:46svh; display:flex; align-items:center; }
  .direction-raven { inline-size:46%; block-size:100%; max-block-size:none; }
  .person-portrait,.person-chapter-portrait { aspect-ratio:4/3; max-inline-size:none; }
  .signal-destination-visual { block-size:65svh; }
}
@media (max-width:600px) {
  .direction-heading { grid-template-columns:1fr; }
  .direction-content,.direction-scene > .direction-content { padding-block:32px 40px; }
  .direction-intro .direction-content { padding-block-start:calc(var(--scene-header) + 20px); }
  .direction-assembly-stage .direction-record,.signature-frame { inline-size:100%; }
  .direction-assembly-stage { padding-block:0; }
  .direction-heading h2 { font-size:clamp(38px,10vw,60px); }
  .direction-title-composition { padding-block:32px; }
  .direction-raven { inline-size:48%; block-size:100%; max-block-size:none; }
  .person-portrait,.person-chapter-portrait { margin-inline:calc(-1 * var(--gutter)); inline-size:calc(100% + 2 * var(--gutter)); max-inline-size:none; }
}

/* Approved black/white art direction, applied only to the Motion Lab review. */
.direction-page {
  --paper:var(--korppi-mist); --ink:var(--korppi-charcoal); --blue:var(--korppi-gray-100);
  --accent:var(--korppi-ice); --accent-hover:var(--korppi-ice-deep); --accent-ink:var(--korppi-raven);
  --motion-menu:500ms; --motion-portal:700ms;
}
.direction-intro,.direction-assembly,.direction-route,.direction-fallback { background:var(--korppi-mist); }
.direction-header.signal-nav[data-nav-theme="light"] { background:var(--korppi-mist); }
.direction-header.signal-nav:is([data-nav-theme="dark"],[data-nav-theme="photo"]) { background:var(--korppi-graphite); }
.direction-morph,.direction-route-stage { background:var(--korppi-gray-100); }
.direction-handoff,.direction-cut,.direction-person-chapter { background:var(--korppi-graphite); color:var(--korppi-mist); }
.direction-people,.direction-next { background:var(--korppi-raven); color:var(--korppi-mist); }
.direction-people :is(.people-controls>span,.direction-note),.direction-people .person-role { color:var(--korppi-gray-300); }
.direction-people .person-portrait,.person-chapter-portrait { background:var(--korppi-charcoal); }
.direction-people .person-slide:nth-child(3) .person-portrait { background:var(--korppi-gray-200); }
.direction-cut-wash { background:var(--korppi-charcoal); }
.direction-dashboard { background:var(--korppi-charcoal); border-color:var(--korppi-border-dark); border-radius:var(--korppi-radius-panel); }
.direction-record,.portal-record,.signature-frame { background:var(--korppi-snow); border-color:var(--korppi-border-light); border-radius:var(--korppi-radius-card); box-shadow:var(--korppi-shadow); }
.direction-piece,.portal-record-pieces>span,.portal-wave { background:var(--korppi-gray-100); border-color:var(--korppi-gray-200); }
.direction-piece { border-radius:var(--korppi-radius-control); }
.direction-wave i,.portal-wave i { background:#66717b; }
.signature-resolved { background:var(--korppi-gray-100); border-inline-start:3px solid var(--accent); }
.direction-action,.next-arrival>span { color:var(--accent); }
.route-alternate { background:var(--korppi-gray-200); }
.direction-pill { border-radius:var(--korppi-radius-control); }
.direction-intro .signal-demo { background:var(--korppi-raven); color:var(--korppi-snow); border-radius:var(--korppi-radius-control); }
.direction-page :is(a,button,input,select):focus-visible { outline-color:var(--accent); }

/* The menu is a stationary black directory. Only its visible plane opens/closes. */
.signal-menu-open main { opacity:1; transform:none; }
.signal-map { color:var(--korppi-snow); clip-path:inset(0 0 calc((1 - var(--nav-cover)) * 100%) 0); }
.signal-map-surface { background:var(--korppi-raven); clip-path:none; }
.signal-map-top .direction-brand img { filter:invert(1); }
.signal-map .signal-menu-control:hover,.signal-map .signal-demo:hover { background:var(--korppi-snow); color:var(--korppi-raven); }
.signal-map-label>small,.signal-map-index,.signal-unconfirmed,.signal-map-note { color:var(--korppi-gray-300); }
.signal-map-link,.signal-map-link:last-child,.signal-map-utilities { border-color:var(--korppi-border-dark); }
.signal-map-link .signal-map-label { transform:none; transition:none; }
.signal-map-link[data-preview-active="false"] .signal-map-label>span { color:var(--korppi-gray-300); }
.signal-map-link[data-preview-active="true"] .signal-map-label>span { color:var(--korppi-snow); }
.signal-map-link[data-preview-active="true"] .signal-map-index { background:transparent; color:var(--accent); box-shadow:inset 2px 0 var(--accent); padding-inline-start:5px; }
.signal-portal-art { transform:none; }
.signal-portal-home .signal-portal { border:0; background:var(--korppi-graphite); color:var(--korppi-snow); }
.signal-portal-home .portal-raven { filter:invert(1); }
.portal-record,.portal-next-action { color:var(--korppi-charcoal); }
.portal-next-action { background:var(--korppi-snow); border-color:var(--korppi-gray-200); }
.signal-portal-home :is(.portal-record-pieces>*,.portal-next-action,.portal-portrait-trio i,.portal-archive li,.portal-target,.portal-pricing i) { transform:none; opacity:1; }
.signal-portal-home .signal-portal-art { clip-path:inset(0 0 calc((1 - var(--preview-progress)) * 100%) 0); }
.portal-portrait-trio i { background:var(--korppi-charcoal); }
.portal-portrait-trio i:nth-child(2) { background:var(--korppi-gray-300); }
.signal-map .signal-portal-bottom { border-color:var(--korppi-border-dark); }
.signal-map .language-switcher nav { color:var(--korppi-charcoal); }

/* Click: retain selection, lift the black plane, reveal the settled page below. */
.signal-map[data-travelling] { clip-path:inset(0 0 calc(var(--takeover-exit) * 100%) 0); }
.signal-map[data-travelling] .signal-map-link,
.signal-map[data-travelling] :is(.signal-map-utilities,.signal-map-note) { opacity:calc(1 - var(--takeover-lock)); }
.signal-map[data-travelling] .signal-map-link[aria-current] { opacity:calc(1 - var(--takeover-title)); }
.signal-map[data-travelling] .signal-portal-home { opacity:calc(1 - var(--takeover-title)); }
.signal-map[data-travelling] .signal-map-top h2 { opacity:calc(1 - var(--takeover-lock)); }
.signal-flight-resume { top:90px; bottom:auto; color:var(--korppi-raven); }
.signal-route-travelling .signal-destination-heading>:is(h2,.direction-kicker) { transform:none; }
.signal-route-travelling .signal-destination-heading>:is(p:not(.direction-kicker),a),.signal-route-travelling .signal-destination-note { transform:none; }
.direction-page[data-signal-route="team"] .signal-destination { background:var(--korppi-graphite); color:var(--korppi-mist); }
.direction-page[data-signal-route="team"] .signal-destination .direction-note { color:var(--korppi-gray-300); }
.signal-destination-visual .signal-portal-art { transform:none; }
@media (max-width:760px) { .signal-portal-home { display:none; } }
@media (prefers-reduced-motion:reduce) { .signal-map { clip-path:none; } }
.motion-reduced .signal-map { clip-path:none; }

/* Backgrounds support a scene; content never depends on their playback. */
.direction-page { --asset-reveal:1; --asset-confirm:1; --asset-focus:1; --ambient-x:0; --ambient-y:0; }
[data-atmosphere]>.direction-frame { isolation:isolate; }
[data-atmosphere] .direction-content { z-index:1; }
.atmosphere-layer,.atmosphere-landscape { position:absolute; inset:0; overflow:clip; pointer-events:none; z-index:0; }
.atmosphere-structure { position:absolute; width:100%; height:100%; inset:0; stroke:currentColor; stroke-width:.7; opacity:.13; transform:translate(calc(var(--ambient-x) * 3px),calc(var(--ambient-y) * 3px)); }
.atmosphere-points { fill:currentColor; stroke:none; }
.atmosphere-trace { stroke:var(--accent); stroke-width:1.5; clip-path:inset(0 calc((1 - var(--asset-reveal)) * 100%) 0 0); }
.atmosphere-light { position:absolute; inset:-10%; background:radial-gradient(ellipse at 72% 48%,#a8d7f209,transparent 58%); opacity:.4; }
.raven-framework { position:absolute; right:-2%; bottom:0; width:44%; height:100%; stroke:var(--ink); stroke-width:.65; opacity:.24; pointer-events:none; }
.raven-signal-path { stroke:var(--accent); stroke-width:2; opacity:.6; }
.raven-signal-point { stroke:none; fill:var(--accent); }
.direction-intro .atmosphere-layer { opacity:.45; }
.first-signal-running .raven-framework,.first-signal-running .direction-intro .atmosphere-layer { visibility:hidden; }
.field-image-drift { position:absolute; inset:-1%; }
.field-target { border-color:#ffffff88; }
.field-target::before { border-color:var(--accent); }
.field-target::after { border-color:var(--accent); }
.field-target span::before { content:''; display:inline-block; width:5px; height:5px; margin-inline-end:8px; border-radius:50%; background:var(--accent); }
.direction-assembly .direction-record { position:relative; }
.direction-assembly .direction-record::after { content:''; position:absolute; inset:-1px; border:1px solid var(--accent); border-radius:inherit; opacity:calc(var(--asset-confirm) * .7); pointer-events:none; }
.direction-assembly .piece-photo { overflow:clip; }
.direction-assembly .piece-photo img { transform:scale(calc(1.035 - var(--asset-focus) * .035)); }
.handoff-trace { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.handoff-trace-base { stroke:#ffffff24; stroke-width:1; }
.handoff-trace-signal { stroke:var(--accent); stroke-width:1.5; clip-path:inset(0 calc((1 - var(--handoff-progress,1)) * 100%) 0 0); }
.handoff-trace-confirm { fill:var(--accent); opacity:var(--asset-confirm); }
.direction-device-stage>.direction-dashboard,.direction-device-stage>.direction-phone { z-index:1; }
.direction-device-stage>.direction-travelling-record { z-index:2; }
.direction-dashboard { box-shadow:0 0 0 1px rgb(168 215 242 / calc(var(--asset-confirm) * .22)); }
.atmosphere-landscape img { width:100%; height:100%; object-fit:cover; object-position:64% 60%; opacity:.82; }
.atmosphere-landscape::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#0506088c,#05060818),linear-gradient(0deg,#050608aa,transparent 70%); }
.atmosphere-mist { position:absolute; inset:0; background:linear-gradient(176deg,transparent 53%,#e8eaed08 58%,transparent 65%); }
.direction-next .atmosphere-layer { opacity:.18; }
.direction-next .next-title { font-size:clamp(56px,7.6vw,190px); max-inline-size:13ch; text-wrap:balance; }
.direction-next .next-arrival { grid-template-columns:auto minmax(0,1fr) auto; }
.direction-next .next-arrival>p { max-inline-size:35ch; }
.direction-next .direction-content { padding-block-end:88px; }
.direction-scene-foot,.direction-compare { padding-inline-start:32px; }
.atmosphere-control { position:fixed; bottom:16px; left:16px; z-index:109; padding:10px 14px; min-block-size:44px; font-size:12px !important; background:#050608ed !important; color:#fafaf8 !important; border:1px solid #ffffff35 !important; border-radius:10px; }
.signal-menu-open .atmosphere-control { visibility:hidden; }
.atmosphere-control[aria-pressed="true"] { border-color:var(--accent) !important; }
.atmosphere-control { inline-size:44px; }
.atmosphere-control-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* Eight-second seamless loops. CSS pauses all of them unless the shared controller permits playback. */
.atmosphere-ready .atmosphere-light { animation:ambient-light 8s ease-in-out infinite paused; }
.atmosphere-ready .raven-signal-point { animation:raven-trace 8s ease-in-out infinite paused; }
.atmosphere-ready .field-image-drift { animation:field-breathe 8s ease-in-out infinite paused; }
.atmosphere-ready .direction-assembly .direction-wave i { animation:voice-breathe 8s ease-in-out infinite paused; transform-origin:center; }
.atmosphere-ready .direction-wave i:nth-child(2n) { animation-delay:-1s; }
.atmosphere-ready .atmosphere-mist { animation:ambient-mist 8s ease-in-out infinite paused; }
.atmosphere-ready .is-asset-live :is(.atmosphere-light,.raven-signal-point,.field-image-drift,.direction-wave i,.atmosphere-mist) { animation-play-state:running; }
@keyframes ambient-light { 0%,100% { opacity:.25; transform:translateX(-2%); } 50% { opacity:.65; transform:translateX(2%); } }
@keyframes raven-trace { 0%,12% { opacity:0; transform:translate(-230px,230px); } 22% { opacity:.8; } 68% { opacity:.8; } 82%,100% { opacity:0; transform:translate(230px,-230px); } }
@keyframes field-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.025); } }
@keyframes voice-breathe { 0%,38%,100% { transform:scaleY(1); } 45%,57% { transform:scaleY(.65); } 51% { transform:scaleY(1.12); } 64% { transform:scaleY(.85); } }
@keyframes ambient-mist { 0%,100% { opacity:.2; transform:translateX(-1.5%); } 50% { opacity:.65; transform:translateX(1.5%); } }
@media (max-width:1099px) { .raven-framework { right:0; width:54%; } .handoff-trace { display:none; } .atmosphere-structure { opacity:.08; } }
@media (max-width:600px) { .atmosphere-control { bottom:12px; left:12px; padding:9px; inline-size:44px; font-size:12px !important; } .atmosphere-control-label { display:none; } .direction-next .next-arrival { grid-template-columns:1fr; gap:20px; } .atmosphere-landscape img { object-position:72% 50%; } }
@media (prefers-reduced-motion:reduce) { .atmosphere-ready :is(.atmosphere-light,.raven-signal-point,.field-image-drift,.direction-wave i,.atmosphere-mist) { animation:none !important; transform:none; } .atmosphere-structure { transform:none; } }
.motion-reduced :is(.atmosphere-light,.raven-signal-point,.field-image-drift,.direction-wave i,.atmosphere-mist) { animation:none !important; transform:none; }
.motion-reduced .atmosphere-structure { transform:none; }

/* Reviewed narrative assets, shared by the homepage and the review lab. */
[data-home-assets] { --wing-cut-depth:.018; overflow-anchor:none; }
[data-home-assets] .signal-map[data-travelling] { clip-path:polygon(0 0,100% 0,100% calc((1 - var(--takeover-exit))*100%),78% calc((1 - var(--takeover-exit))*100% - var(--wing-cut-depth)*var(--takeover-exit)*100%),50% calc((1 - var(--takeover-exit))*100% - var(--wing-cut-depth)*var(--takeover-exit)*200%),22% calc((1 - var(--takeover-exit))*100% - var(--wing-cut-depth)*var(--takeover-exit)*100%),0 calc((1 - var(--takeover-exit))*100%)); }
.ambient-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; opacity:0; }
.ambient-media.media-playing { opacity:1; }
.field-media { z-index:1; object-position:73% 50%; }
[data-home-assets] .atmosphere-mist,[data-home-assets] .raven-trace-point { display:none; }
.signal-destination[hidden] { display:none!important; }
[data-home-assets] .portal-home-surface { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; }
[data-home-assets] .portal-raven { position:relative; }
.motion-reduced .ambient-media { opacity:0!important; }
.hero-surface,.handoff-stage-image { position:absolute; inset:0; inline-size:100%; block-size:100%; pointer-events:none; }
.hero-surface img { inline-size:100%; block-size:100%; object-fit:cover; }
.hero-surface { opacity:1; }
.hero-light-response { position:absolute; inset:0 0 0 48%; pointer-events:none; background:radial-gradient(ellipse at calc(65% + var(--ambient-x)*10%) calc(45% + var(--ambient-y)*10%),#ffffff35,transparent 55%); transition:opacity 500ms; }
[data-home-assets] .raven-framework { display:none; }
[data-home-assets] .direction-compare { display:none; }
[data-home-assets] .direction-intro .atmosphere-layer { display:none; }
[data-home-assets] .direction-raven,[data-home-assets] .direction-title { transform:none !important; }
[data-home-assets] .direction-title .line-mask:nth-child(2) { color:#55595b; }
[data-home-assets] .direction-title { inline-size:53%; font-size:clamp(58px,6.7vw,180px); }
[data-home-assets] .direction-raven { right:0; bottom:8%; inline-size:43%; block-size:92%; opacity:1; }
[data-home-assets] .direction-intro-foot { padding-block:20px 52px; padding-inline:var(--gutter); margin-inline:calc(-1 * var(--gutter)); background:var(--paper); }
[data-home-assets] .first-scroll-wing,[data-home-assets] .first-scroll-field { display:none !important; }
[data-home-assets].first-signal-ready #direction-title.scene-active .direction-content { opacity:1; }
[data-home-assets] .first-signal-layer>:not(.first-signal-point) { display:none; }
[data-home-assets] .first-signal-layer>.first-signal-point { left:72%; top:47%; }
[data-home-assets].first-signal-running .signal-nav { background:var(--paper); }
[data-home-assets].first-signal-running .signal-nav :is(.direction-brand,.signal-nav-center,.signal-nav-actions>*) { clip-path:none; transform:none; }
[data-home-assets].first-signal-running .direction-raven { opacity:1; clip-path:inset(calc((1 - var(--entry-form))*100%) 0 0); }
[data-home-assets].first-signal-running .first-hero-cta { opacity:1; }
[data-home-assets] .field-image-drift { inset:0; animation:none; }
[data-home-assets] .direction-field-image { object-position:73% 50%; filter:grayscale(1); transform:none; }
[data-home-assets] .field-content::after { background:linear-gradient(90deg,#050608bc,transparent 70%); }
[data-home-assets] .field-target { left:calc(var(--target-x,.49)*100%); top:calc(var(--target-y,.29)*100%); width:calc(var(--target-w,.46)*100%); height:calc(var(--target-h,.511)*100%); right:auto; bottom:auto; border:0; box-shadow:0 0 0 999px #0506080a; }
[data-home-assets] .field-target::before,[data-home-assets] .field-target::after { width:24px; height:24px; border-width:1px 0 0 1px; }
[data-home-assets] .field-target::after { border-width:0 1px 1px 0; }
[data-home-assets] .field-target span { top:100%; padding-top:12px; }
[data-home-assets] .field-content h2 { max-inline-size:9ch; }
[data-home-assets] .field-caption { max-inline-size:28ch; }
[data-home-assets] .direction-assembly-stage .direction-record { width:78%; }
[data-home-assets] .direction-wave i { animation:none !important; transform:none !important; }
[data-home-assets] .direction-assembly .atmosphere-layer { opacity:calc(var(--assembly-lines,0)*.4); }
[data-home-assets] .direction-assembly .atmosphere-light { display:none; }
[data-home-assets] .direction-assembly .piece-photo img { transform:none; aspect-ratio:1.6; height:auto; }
[data-home-assets] .direction-assembly-stage { min-block-size:0; }
[data-home-assets] .direction-record { border-radius:16px; }
[data-home-assets] .direction-record-pieces { gap:12px; }
[data-home-assets] .piece-voice { display:flex; flex-direction:column; justify-content:space-between; }
[data-home-assets] .piece-voice p { font-size:clamp(16px,1.45vw,36px); line-height:1.45; }
[data-home-assets] .direction-assembly .direction-record>h3 { font-size:clamp(24px,2vw,52px); }
.handoff-stage-image { object-fit:cover; opacity:.7; }
[data-home-assets] .direction-handoff .atmosphere-layer { display:none; }
[data-home-assets] .direction-device-stage { display:grid; grid-template-columns:minmax(0,.25fr) minmax(0,.75fr); gap:4%; align-items:center; padding:0; min-block-size:0; }
[data-home-assets] .direction-phone { position:relative; display:block; width:auto; inset:auto; transform:none; border:1px solid #777; border-radius:32px; padding:12px 10px 22px; background:linear-gradient(125deg,#35383b,#08090a 25%,#151719); box-shadow:inset 1px 0 #ffffff30,0 20px 40px #0005; min-width:0; }
.phone-app-label { display:block; font-size:12px; padding:6px 8px 12px; }
.phone-home { position:absolute; bottom:8px; left:40%; width:20%; height:3px; background:#fff6; border-radius:4px; }
.mobile-record { background:var(--korppi-snow); color:var(--ink); border-radius:20px; padding:16px; }
.mobile-record>header { display:flex; justify-content:space-between; font-size:12px; }
.mobile-record h3 { font-size:clamp(20px,1.4vw,36px); margin:16px 0; line-height:1.15; }
.mobile-quote { font-size:clamp(13px,.95vw,24px); margin-block:16px !important; line-height:1.45; }
.record-photo-slot { position:relative; aspect-ratio:1.6; overflow:clip; background:#e8eaed; border-radius:7px; }
.record-photo-slot img { display:block; width:100%; height:100%; object-fit:cover; }
.mobile-record dl,.management-record dl { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; font-size:clamp(12px,.9vw,22px); }
.mobile-record dl>div:last-child,.management-record dl>div:last-child { grid-column:1/-1; }
.mobile-record dt,.management-record dt { color:#66717b; }
.mobile-record dd,.management-record dd { margin:4px 0 0; line-height:1.4; }
[data-home-assets] .management-observation { position:relative; inset:auto; width:100%; padding:clamp(16px,1.5vw,36px); color:var(--ink); background:var(--korppi-snow); border:1px solid #666; border-radius:16px; transform:none; opacity:1; }
.management-grid { display:grid; grid-template-columns:minmax(0,.15fr) minmax(0,.46fr) minmax(0,.39fr); padding-block-start:20px; gap:clamp(16px,1.7vw,40px); }
.management-list { display:flex; flex-direction:column; gap:16px; padding-inline-end:12px; border-right:1px solid #d6dadf; font-size:clamp(11px,.8vw,20px); overflow-wrap:anywhere; }
.management-list strong { padding-block:8px; border-bottom:2px solid var(--accent); font-weight:500; }
.management-record { min-width:0; }
.record-eyebrow { font-size:clamp(11px,.85vw,20px); color:#66717b; margin-bottom:16px !important; }
.management-record h3 { font-size:clamp(21px,1.7vw,46px); line-height:1.1; margin-bottom:20px; }
.management-record>p:not(.record-eyebrow) { font-size:clamp(14px,1vw,27px); line-height:1.45; margin-block:20px; }
[data-home-assets] .direction-responsibility { margin:0; min-width:0; padding-inline-start:clamp(16px,1.5vw,36px); border-left:1px solid #d6dadf; transform:none; opacity:1; }
[data-home-assets] .direction-responsibility dt { color:#66717b; }
[data-home-assets] .direction-responsibility dd { font-size:clamp(16px,1.22vw,32px); }
[data-home-assets] .direction-responsibility dl>div { padding-block:16px; border-color:#d6dadf; }
[data-home-assets] .direction-action { color:#29485a; line-height:1.4; }
.record-receive { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:20px; border:1px dashed #89949a; opacity:0; }
.handoff-photo-flight,.field-photo-bridge { position:fixed; top:0; left:0; z-index:9; width:calc(var(--flight-w,0)*100vw); height:calc(var(--flight-h,0)*100vh); transform-origin:top left; transform:translate(calc((var(--flight-x,0) + var(--flight-dx,0)*var(--flight-p,1))*100vw),calc((var(--flight-y,0) + var(--flight-dy,0)*var(--flight-p,1) - var(--flight-arc,0))*100vh)) scale(calc(1 + (var(--flight-scale,1) - 1)*var(--flight-p,1))); opacity:var(--flight-visible,0); pointer-events:none; overflow:clip; border-radius:7px; }
.handoff-photo-flight img,.field-photo-bridge img { width:100%; height:100%; object-fit:cover; }
.handoff-photo-flight span { position:absolute; bottom:12px; left:12px; background:#fafaf8; color:#171b21; padding:6px 8px; font-size:12px; transform:scale(calc(1 / (1 + (var(--flight-scale,1) - 1)*var(--flight-p,1)))); transform-origin:bottom left; }
.handoff-connection { display:none; }
.photo-bridging .direction-assembly .piece-photo { opacity:0; }
.photo-bridging .direction-field .field-image-mask { opacity:calc(1 - var(--bridge-out)); }
.home-capabilities { background:var(--paper); }
.capabilities-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-block-start:clamp(40px,6vh,100px); }
.capability { min-width:0; outline-offset:6px; }
.capability-visual { position:relative; aspect-ratio:4/3; overflow:clip; perspective:1000px; }
.capability-sheet { position:absolute; width:64%; left:14%; top:24%; border-radius:8px; padding:12px; background:#fafaf8; color:#222; box-shadow:0 16px 24px #0003; transform:translate(0,0) rotate(-5deg); transition:transform 600ms var(--ease-out); font-size:clamp(11px,.9vw,22px); }
.sheet-photo { padding:0; }
.sheet-photo img { width:100%; height:auto; display:block; aspect-ratio:1.6; object-fit:cover; border-radius:8px 8px 0 0; }
.sheet-photo>span { display:block; padding:10px; }
.sheet-back { transform:translate(12%,-28%) rotate(6deg); min-height:44%; background:#c5c8ca; }
.sheet-middle { transform:translate(5%,-12%) rotate(1deg); min-height:44%; }
.sheet-middle svg { width:80%; margin-top:16px; }
[data-capability="capture"] :is(.sheet-back,.sheet-middle,.capability-owner) { display:none; }
.capability-corners { position:absolute; inset:19% 18%; border:1px solid var(--accent); clip-path:polygon(0 0,15% 0,15% 2%,2% 2%,2% 15%,0 15%,0 0,100% 0,100% 15%,98% 15%,98% 2%,85% 2%,85% 0,100% 0,100% 100%,85% 100%,85% 98%,98% 98%,98% 85%,100% 85%,100% 100%,0 100%,0 85%,2% 85%,2% 98%,15% 98%,15% 100%,0 100%); }
[data-capability="context"] :is(.capability-owner,.capability-corners) { display:none; }
.capability-owner { position:absolute; right:8%; bottom:9%; width:58%; background:#fafaf8; padding:14px; color:var(--ink); display:grid; gap:8px; border-left:2px solid var(--accent); font-size:clamp(12px,1vw,24px); box-shadow:0 12px 24px #0004; }
[data-capability="owner"] :is(.sheet-back,.sheet-middle,.capability-corners) { display:none; }
[data-capability="owner"] .sheet-photo { width:53%; left:8%; top:12%; }
.capability:focus .capability-sheet,.capability:hover .capability-sheet { transform:translate(0,-3%) rotate(0); }
.capabilities-entered .sheet-photo { animation:capability-align 3s var(--ease-out) both; }
@keyframes capability-align { 0%,12% { transform:translate(-5%,6%) rotate(-5deg); } 48%,100% { transform:translate(0,0) rotate(0); } }
.capability-copy { display:grid; grid-template-columns:auto 1fr; gap:16px; padding-top:24px; }
.capability-copy>span { font-size:12px; padding-top:7px; }
.capability-copy h3 { font-size:clamp(28px,2.5vw,64px); }
.capability-copy p { grid-column:2; max-width:30ch; line-height:1.6; font-size:clamp(16px,1.15vw,28px); }
.home-application { background:#090909; color:#fafaf8; }
.application-image { position:absolute; inset:0; }
.application-image img { width:100%; height:100%; object-fit:cover; }
.home-application .direction-frame::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#050608a0,transparent 55%,#050608cc); }
.home-application .direction-content { z-index:1; min-height:var(--canvas-space); display:flex; flex-direction:column; justify-content:flex-start; padding-top:48px; padding-bottom:72px; gap:28px; }
.home-application h2 { font-size:clamp(42px,5.2vw,140px); max-width:25ch; margin:0; }
.application-foot { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-top:auto; padding-top:clamp(240px,30svh,440px); }
.application-foot p { max-width:38ch; font-size:clamp(20px,1.6vw,36px); line-height:1.5; }
.application-foot span { font-size:12px; }
.home-team { background:var(--korppi-raven); color:var(--korppi-snow); }
.home-team-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:48px; }
.home-person { min-width:0; }
.home-person-slot { aspect-ratio:4/3; padding:24px; background:#171b21; display:flex; flex-direction:column; justify-content:space-between; border:1px solid #ffffff22; }
.home-person:nth-child(2) .home-person-slot { background:#24272b; }
.home-person:nth-child(3) .home-person-slot { background:#33373b; }
.home-person-slot>span { font-size:clamp(64px,9vw,220px); color:#ffffff25; line-height:1; letter-spacing:-.07em; }
.home-person-slot p { font-size:12px; color:#c8cdd1; }
.home-person>.direction-kicker { margin-top:28px; color:var(--accent); }
.home-person h3 { font-size:clamp(28px,2.5vw,72px); margin:16px 0; }
.home-person>.direction-note { margin-top:16px; color:#b8c0c7; }
.home-team-connection { display:flex; gap:24px; flex-wrap:wrap; border-top:1px solid #ffffff33; padding-top:24px; margin-top:48px !important; font-size:clamp(18px,2vw,46px); }
.home-team-connection i { color:var(--accent); font-style:normal; }
.home-evidence { background:var(--paper); }
.evidence-case,.pricing-preview { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:8vw; }
.evidence-case { min-height:50svh; padding-bottom:64px; }
.evidence-case h2,.pricing-preview h2 { font-size:clamp(40px,4.8vw,120px); max-width:15ch; margin-top:24px; }
.evidence-slots { align-self:end; color:#626970; line-height:1.6; }
.evidence-slots dl>div { display:flex; justify-content:space-between; border-bottom:1px solid #ccd0d3; padding-block:12px; }
.pricing-preview { min-height:50svh; border-top:1px solid #aab0b5; padding-block:64px 24px; align-items:center; }
.pricing-preview p { line-height:1.8; margin-bottom:32px; }
.pricing-preview .direction-pill { background:var(--ink); color:var(--paper); }
.resolve-record { display:flex; align-items:center; gap:24px; position:relative; }
.resolve-record>span { font-size:13px; }
.resolve-record ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:16px; color:#c5cbd0; font-size:13px; }
.resolve-wing { width:120px; color:var(--accent); flex:none; }
.resolve-wing circle { fill:currentColor; }
.motion-enhanced:not(.motion-reduced) .resolve-wing path { stroke-dasharray:260; stroke-dashoffset:260; }
.motion-enhanced:not(.motion-reduced) .resolve-settled .resolve-wing path { animation:resolve-trace 900ms var(--ease-out) both; }
@keyframes resolve-trace { 0% { stroke-dashoffset:260; opacity:0; } 60% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
[data-home-assets] .direction-next .direction-pill { background:#fafaf8; color:#171b21; border-color:#fafaf8; }
[data-home-assets] .direction-next .direction-pill:hover { box-shadow:inset 0 0 0 1px var(--accent); }
[data-home-assets] .next-title { transform:none !important; font-size:clamp(56px,7.6vw,190px); }
.home-lab-experiments { background:#f5f5f3; }
.home-lab-experiments>summary { padding:32px var(--gutter); cursor:pointer; }
[data-home-assets] .direction-footer { background:var(--korppi-raven); color:var(--korppi-snow); }
[data-home-assets] .direction-footer { padding-block-end:80px; }
[data-home-assets] .signal-flight-resume { color:var(--ink)!important; }
.media-failed { opacity:0; }
@media(min-width:1100px) and (min-height:760px) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  [data-home-assets] .scene-active .management-observation { clip-path:inset(0 calc((1 - var(--dashboard-enter))*100%) 0 0); }
  [data-home-assets] .scene-active .direction-responsibility { opacity:var(--responsibility); }
  [data-home-assets] .scene-active .record-receive { opacity:calc(1 - var(--target-photo,1)); }
  [data-home-assets] .scene-active [data-transfer-source] img { opacity:var(--source-photo,1); }
  [data-home-assets] .scene-active [data-transfer-target] img { opacity:var(--target-photo,1); }
}
@media(max-width:1099px) {
  [data-home-assets] .direction-title { width:100%; font-size:clamp(48px,7.7vw,84px); }
  [data-home-assets] .direction-raven { position:relative; bottom:auto; width:55%; height:auto; margin-left:auto; max-height:50svh; display:block; }
  .direction-title-composition { display:block; }
  [data-home-assets] .raven-framework { display:none; }
  [data-home-assets] .direction-assembly-stage .direction-record { width:100%; }
  [data-home-assets] .direction-device-stage { grid-template-columns:1fr; gap:32px; }
  [data-home-assets] .direction-phone { max-width:480px; width:100%; justify-self:center; }
  .handoff-connection { display:block; text-align:center; }
  .capabilities-grid,.home-team-grid { gap:16px; }
  .management-grid { grid-template-columns:minmax(0,.6fr) minmax(0,.4fr); }
  .management-list { display:none; }
  .resolve-record ul { gap:8px 16px; }
}
@media(max-width:600px) {
  .hero-surface { opacity:1; }
  [data-home-assets] .direction-title { font-size:clamp(44px,11.5vw,68px); }
  [data-home-assets] .direction-raven { width:76%; max-height:40svh; margin-block:24px; }
  .direction-intro-foot { flex-wrap:wrap; align-items:start; }
  [data-home-assets] .first-hero-scroll { margin-inline-start:56px; }
  [data-home-assets] .direction-intro-foot>p { width:100%; }
  [data-home-assets] .field-content { justify-content:start; padding-top:128px; }
  [data-home-assets] .field-content h2 { font-size:52px; max-width:10ch; }
  [data-home-assets] .field-caption { margin-top:auto !important; padding-top:240px; }
  [data-home-assets] .direction-field-image { object-fit:cover; }
  [data-home-assets] .direction-record-pieces { grid-template-columns:1fr 1fr; }
  [data-home-assets] .direction-record-pieces>* { grid-column:auto; }
  [data-home-assets] .direction-record-pieces>:is(.piece-photo,.piece-voice,.piece-category) { grid-column:1/-1; }
  [data-home-assets] .direction-phone { padding:0; border:0; background:none; box-shadow:none; }
  .phone-app-label { padding:0 0 20px; }
  .phone-home { display:none; }
  .mobile-record { padding:20px; }
  .mobile-quote,.mobile-record dl { font-size:15px; }
  .mobile-record h3 { font-size:28px; }
  .management-grid { grid-template-columns:1fr; }
  [data-home-assets] .direction-responsibility { border:0; padding:24px 0 0; }
  .management-record>p:not(.record-eyebrow),.management-record dl { font-size:15px; }
  .capabilities-grid,.home-team-grid { grid-template-columns:1fr; gap:48px; }
  .application-foot { display:block; }
  .application-foot span { display:block; margin-top:24px; }
  .evidence-case,.pricing-preview { grid-template-columns:1fr; gap:32px; }
  .resolve-record { flex-wrap:wrap; gap:12px; }
  .resolve-record ul { width:100%; display:grid; padding-left:8px; border-left:1px solid #ffffff44; }
  .resolve-wing { width:72px; }
  .atmosphere-landscape img { object-position:center; }
}
@media(prefers-reduced-motion:reduce) { .resolve-wing path { animation:none !important; opacity:1; stroke-dashoffset:0; } .capability-sheet { transition:none; } }
.motion-reduced .resolve-wing path { animation:none !important; opacity:1; stroke-dashoffset:0; }
.motion-reduced .capability-sheet { transition:none; }
.motion-reduced .capabilities-entered .sheet-photo { animation:none; }
@media(prefers-reduced-motion:reduce) { .ambient-media { opacity:0!important; } .capabilities-entered .sheet-photo { animation:none; } }

/* Public pages share the reviewed scenes; reading pages keep a quiet layout. */
.marketing-page { --paper:#f5f5f3; }
.marketing-page .anchor-alias { position:absolute; inset-block-start:0; scroll-margin-block-start:0; }
.marketing-page .skip-link { position:fixed; top:12px; left:24px; z-index:500; padding:12px 20px; background:white; color:#111; transform:translateY(-180%); }
.marketing-page .skip-link:focus { transform:none; }
.marketing-page h1 { font-size:clamp(52px,7.2vw,120px); }
.marketing-page main :is(h1,h2)[tabindex="-1"]:focus { outline:none; }
.marketing-lead { font-size:clamp(18px,1.55vw,24px); line-height:1.55; max-inline-size:48ch; margin-block-start:28px!important; }
.marketing-page-intro > .direction-content { padding-block-start:max(160px,calc(var(--scene-header) + 64px)); }
.marketing-page .direction-kicker + :is(h1,h2) { margin-block-start:28px; }
.marketing-footer { padding:64px var(--gutter) 32px; display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:48px; color:#171b1e; background:#f5f5f3; border-top:1px solid #171b1e26; }
.marketing-footer .direction-brand { inline-size:clamp(140px,15vw,240px); }
.marketing-footer nav, .marketing-footer-contact { display:flex; flex-wrap:wrap; gap:12px 24px; align-content:start; }
.marketing-footer-contact { flex-direction:column; overflow-wrap:anywhere; }
.marketing-footer a:hover { text-decoration:underline; text-underline-offset:5px; }
.marketing-footer > p { grid-column:2/-1; font-size:13px; color:#626c75; }
.marketing-company, .marketing-team-intro, .marketing-principle[data-scene-theme="dark"], .platform-step[data-scene-theme="dark"] { background:#111417; color:#f5f5f3; }
.marketing-company > .direction-content { min-block-size:100svh; display:flex; flex-direction:column; justify-content:space-between; gap:36px; }
.marketing-company h2 { font-size:clamp(48px,6.4vw,108px); max-inline-size:21ch; }
.company-belief { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8vw; }
.company-belief img { width:70%; max-block-size:270px; object-fit:contain; filter:invert(1); opacity:.75; }
.company-belief p { font-size:clamp(20px,2vw,30px); line-height:1.45; max-inline-size:36ch; margin-bottom:28px; }
.company-directions { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; padding-block:28px; border-block:1px solid #8b929740; font-size:clamp(18px,2.6vw,42px); letter-spacing:-.04em; }
.company-directions i { font-size:24px; font-style:normal; color:#afc5d5; }
.marketing-team-intro > .direction-content { min-block-size:100svh; display:flex; flex-direction:column; justify-content:space-between; gap:32px; isolation:isolate; }
.marketing-team-intro h1 { max-inline-size:15ch; }
.marketing-team-intro img { position:absolute; right:var(--gutter); bottom:8%; width:43%; height:74%; object-fit:contain; z-index:-1; opacity:.26; }
.marketing-principle .direction-content { min-block-size:100svh; display:flex; flex-direction:column; justify-content:center; overflow:clip; isolation:isolate; }
.marketing-principle h2 { font-size:clamp(48px,7vw,112px); max-inline-size:18ch; }
.marketing-principle:nth-of-type(3) { background:#d8e0e3; }
.principle-number { position:absolute; right:3%; bottom:-.22em; z-index:-1; font-size:clamp(240px,44vw,750px); line-height:1; letter-spacing:-.1em; opacity:.055; }
.marketing-pricing h1,.marketing-pricing h2 { max-inline-size:18ch; }
.marketing-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-block:48px 28px; border:1px solid #171b1e35; }
.marketing-plans article { display:flex; flex-direction:column; gap:28px; padding:clamp(24px,3vw,48px); min-inline-size:0; border-right:1px solid #171b1e35; }
.marketing-plans article:last-child { border-right:0; }
.marketing-plans article:nth-child(2) { background:#e6e9e8; }
.marketing-plans h3 { font-size:clamp(32px,3vw,48px); margin-block:16px; }
.plan-label { text-transform:uppercase; letter-spacing:.12em; font-size:12px; }
.plan-price { font-size:20px; }
.marketing-plans ul { padding-inline-start:20px; line-height:1.75; margin:0 0 16px; }
.marketing-plans .plan-link { margin-top:auto; display:block; padding-block:14px; border-top:1px solid #171b1e50; }
.plan-link:hover { text-decoration:underline; }
.pricing-method { font-size:15px; max-inline-size:64ch; }
.contact-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:8vw; align-items:start; }
.marketing-contact h1 { font-size:clamp(52px,6.5vw,102px); max-inline-size:13ch; }
.contact-emails { margin-top:40px; display:grid; gap:12px; overflow-wrap:anywhere; }
.demo-form { display:grid; gap:24px; width:100%; max-inline-size:600px; }
.demo-form > label { display:grid; gap:9px; font-size:14px; }
.demo-form :is(input:not([type=radio],[type=checkbox]),select) { width:100%; min-inline-size:0; min-block-size:52px; padding:12px 14px; border:1px solid #71787a; border-radius:0; background:transparent; font:inherit; color:#171b1e; }
.form-switch { display:flex; gap:20px; border:0; padding:0 0 20px; margin:0; border-bottom:1px solid #171b1e35; }
.form-switch label { display:flex; gap:9px; align-items:center; }
.demo-form input:is([type=radio],[type=checkbox]) { accent-color:#171b1e; width:18px; height:18px; flex-shrink:0; }
.demo-form .form-consent { display:flex; align-items:start; gap:12px; }
.form-consent a,.form-status a { text-decoration:underline; }
.demo-form .form-honeypot { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
.demo-form .button { padding:16px 24px; background:#171b1e; color:#fff; border:1px solid #171b1e; border-radius:0; font:inherit; cursor:pointer; }
.demo-form .button:disabled { opacity:.5; cursor:wait; }
.form-status { font-size:14px; min-block-size:42px; }
.form-status.is-error { color:#a52323; }
.platform-step-nav { padding:132px var(--gutter) 24px; display:flex; flex-wrap:wrap; gap:14px 32px; border-bottom:1px solid #171b1e30; }
.platform-step-nav a { font-size:14px; padding-block:8px; }
.platform-step-nav a:hover { text-decoration:underline; }
.platform-step-nav { position:absolute; inset:0 0 auto; z-index:2; }
.platform-step:first-of-type > .direction-content { padding-block-start:220px; }
.platform-step > .direction-content { min-block-size:100svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5vw; align-items:center; }
.platform-step h1,.platform-step h2 { font-size:clamp(48px,5.4vw,88px); max-inline-size:16ch; }
.platform-step-heading .marketing-lead { max-inline-size:40ch; }
.platform-step-visual { min-inline-size:0; display:flex; align-items:center; justify-content:center; --phone-shift:1; --dashboard-enter:1; --handoff-progress:1; --responsibility:1; --action-ready:1; }
.platform-step-visual > * { max-inline-size:100%; }
.platform-step-visual .direction-phone { position:relative; inset:auto; transform:none; width:min(100%,320px); opacity:1; }
.platform-step-visual .direction-record { inline-size:100%; max-inline-size:600px; }
.platform-step-visual .direction-dashboard { position:relative; inset:auto; transform:none; inline-size:100%; opacity:1; }
.platform-step-visual .direction-responsibility { opacity:1; transform:none; }
.platform-step-visual .direction-responsibility dt { color:#606a72; }
.platform-step-visual .direction-responsibility dd { color:#171b1e; }
.platform-step-visual .mobile-record { width:min(100%,520px); border:1px solid #171b1e35; border-radius:12px; }
.platform-step-visual .record-photo-slot { max-block-size:260px; overflow:clip; }
.platform-step-visual .record-photo-slot img { width:100%; height:100%; max-height:260px; object-fit:cover; }
.platform-step-visual .management-observation { padding:24px; color:#171b1e; background:#fafaf7; border-radius:12px; }
.platform-step-visual .management-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
.platform-step-visual .management-list { display:none; }
.platform-step-visual .management-record h3 { margin-bottom:16px; }
.platform-step-visual .direction-responsibility dl { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.platform-step-visual .direction-responsibility dl>div:last-child { grid-column:1/-1; }
.platform-end { padding:48px var(--gutter); background:#111417; color:#f5f5f3; }
.platform-example { grid-column:1/-1; border-top:1px solid #8b929745; padding-top:16px; font-size:12px; }
.platform-message,.platform-trace { width:100%; padding:clamp(24px,4vw,56px); background:#f0f1ed; color:#171b1e; border:1px solid #8b929740; }
.platform-message > * + * { margin-top:24px; }
.platform-message h3 { font-size:clamp(28px,3vw,48px); }
.platform-message blockquote { margin:28px 0; font-size:24px; }
.platform-message p { line-height:1.6; }
.platform-trace img { display:block; width:100%; max-height:300px; object-fit:cover; margin-bottom:24px; }
.platform-trace ol { padding-left:20px; line-height:1.8; }
.portal-company { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#161a1c; color:white; overflow:clip; }
.portal-company img { width:80%; height:90%; object-fit:contain; opacity:.55; }
.portal-company p { position:absolute; bottom:8%; left:8%; right:8%; font-size:clamp(22px,3vw,46px); line-height:1.1; }
.marketing-page .portal-home-surface { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.marketing-page .portal-company img { filter:invert(1); }
html[data-route-arrival]::before { content:''; position:fixed; inset:0; z-index:300; background:#111416; pointer-events:none; clip-path:inset(0 0 calc(var(--takeover-exit,0)*100%) 0); }
html[data-route-arrival] .marketing-page main h1 { clip-path:inset(0 0 calc((1 - var(--destination-reveal,0))*100%) 0); }
@media(min-width:1001px) { .marketing-page .marketing-pricing h1 { font-size:clamp(60px,6.2vw,104px); } }
@media(min-width:1100px) and (min-height:760px) {
  .marketing-page[data-home-assets] .management-observation { padding:24px; }
  .marketing-page .direction-handoff .management-grid { padding-top:16px; }
  .marketing-page .direction-handoff .management-record h3 { margin-bottom:12px; }
  .marketing-page .direction-handoff .management-record>p:not(.record-eyebrow) { margin-block:12px; }
  .marketing-page .direction-handoff .management-record dl { gap:8px; }
}
@media(max-width:1000px) {
  .platform-step-nav { position:relative; }
  .marketing-page .platform-step:first-of-type > .direction-content { padding-block-start:64px; }
  .contact-grid { grid-template-columns:1fr; gap:56px; }
  .marketing-contact h1 { max-inline-size:18ch; }
  .marketing-plans { grid-template-columns:1fr; }
  .marketing-plans article { border-right:0; border-bottom:1px solid #171b1e35; }
  .marketing-plans article:last-child { border-bottom:0; }
  .platform-step > .direction-content { grid-template-columns:1fr; gap:40px; }
  .platform-step-visual { max-inline-size:700px; width:100%; }
  .platform-step h1,.platform-step h2 { max-inline-size:20ch; }
  .marketing-footer { grid-template-columns:1fr 1fr; }
  .marketing-footer > p { grid-column:1/-1; }
}
@media(max-width:600px) {
  .marketing-page h1 { font-size:clamp(44px,12vw,70px); }
  .marketing-page .direction-scene > .direction-content { padding-block:120px 64px; }
  .company-belief { grid-template-columns:1fr; gap:28px; }
  .company-belief img { width:52%; max-height:160px; }
  .company-directions { font-size:24px; justify-content:start; }
  .company-directions i { font-size:18px; }
  .marketing-footer { grid-template-columns:1fr; gap:32px; }
  .marketing-footer > p { grid-column:auto; }
  .marketing-team-intro img { position:relative; inset:auto; width:80%; height:300px; align-self:end; margin-block:-30px; opacity:.65; }
  .marketing-principle h2 { font-size:48px; }
  .platform-step-nav { gap:8px 24px; padding-block-start:112px; }
  .platform-step h1,.platform-step h2 { font-size:48px; }
  .form-switch { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-route-arrival]::before { display:none; }
  html[data-route-arrival] .marketing-page main h1 { clip-path:none; }
}

/* Shared entrance tokens. Every variant resolves to these same visible defaults. */
.logo-entrance-page { --entrance-duration:1750ms; --entrance-repeat:320ms; --entrance-piece-distance:80px; --paper:var(--korppi-mist); --ink:var(--korppi-raven); background:var(--paper); }
.logo-hero { --logo-progress:1; --raven-scale:1; --raven-shift:0; --vector:1; --reveal:1; --ghost:0; --wing-first:0; --trace:1; --trace-visible:0; --signal:0; --signal-handoff:1; --relief:0; --light:1; --curtain:0; --curtain-travel:1; --fragments:0; --head-align:1; --wing-align:1; --tail-align:1; --piece-black:1; --structure:0; --structure-expand:1; --title-one:1; --title-two:1; --copy:1; --navigation:1; --cue:1; position:relative; min-block-size:100svh; overflow:clip; isolation:isolate; display:flex; flex-direction:column; padding:0 var(--gutter); }
.logo-hero[data-variant="b"] { --entrance-duration:1800ms; --light-strength:0; --recognition:0; }
.entrance-paper { position:absolute; inset:0; z-index:-4; pointer-events:none; }
.entrance-paper img { display:block; width:100%; height:100%; object-fit:cover; opacity:.35; }
.entrance-paper::after { content:""; position:absolute; inset:-10%; background:linear-gradient(115deg,transparent 30%,#fff6 52%,transparent 75%); opacity:0; animation:entrance-surface-light 12s ease-in-out infinite alternate paused; }
.logo-hero[data-playback="settled"][data-in-view="true"][data-reduced="false"] .entrance-paper::after { opacity:.12; animation-play-state:running; }
@keyframes entrance-surface-light { from { transform:translateX(-6%); } to { transform:translateX(6%); } }
.entrance-definitions { position:absolute; pointer-events:none; }
.entrance-dark { position:absolute; inset:0; z-index:-2; background:#080a0c; pointer-events:none; clip-path:url(#entrance-curtain-clip); transform-origin:65% 40%; transform:translate(calc(var(--curtain-travel)*80%),calc(var(--curtain-travel)*95%)) scale(calc(1.2 + (1 - var(--curtain-travel)) * (1 - var(--curtain-travel)) * (1 - var(--curtain-travel))*8.8)); opacity:var(--curtain); }
.entrance-hero-header { display:flex; justify-content:space-between; align-items:center; gap:28px; padding-block:max(24px,env(safe-area-inset-top)) 20px; min-block-size:100px; border-bottom:1px solid #16191b15; position:relative; z-index:4; }
.entrance-hero-header .direction-brand { width:150px; opacity:var(--navigation); clip-path:inset(0 calc((1 - var(--navigation))*100%) 0 0); }
.entrance-hero-header nav { display:flex; align-items:center; gap:28px; font-size:14px; }
.entrance-hero-header nav a { opacity:var(--navigation); }
.entrance-hero-header nav .entrance-lab-back { opacity:1; color:color-mix(in srgb,#f5f5f3 calc(var(--curtain)*100%),#171b1e); }
.entrance-composition { flex:1; position:relative; display:flex; align-items:center; min-block-size:calc(100svh - 350px); }
.entrance-copy { position:relative; z-index:3; width:53%; padding-block:60px; }
.entrance-copy .direction-kicker { margin-bottom:32px; opacity:var(--title-one); }
.logo-hero h1 { font-size:clamp(58px,6.5vw,148px); line-height:.99; max-inline-size:13ch; letter-spacing:-.065em; }
.entrance-title-line { display:block; clip-path:inset(0 0 calc((1 - var(--title-one))*100%) 0); transform:translateY(calc((1 - var(--title-one))*20px)); }
.entrance-title-line + .entrance-title-line { margin-top:.12em; color:#565b5e; clip-path:inset(0 0 calc((1 - var(--title-two))*100%) 0); transform:translateY(calc((1 - var(--title-two))*20px)); }
.logo-hero[data-variant="b"] .entrance-title-line { opacity:var(--title-one); clip-path:inset(0 0 calc((1 - var(--title-one))*14px) 0); }
.logo-hero[data-variant="b"] .entrance-title-line + .entrance-title-line { opacity:var(--title-two); clip-path:inset(0 0 calc((1 - var(--title-two))*14px) 0); }
.logo-hero[data-variant="b"] .entrance-hero-header .direction-brand { clip-path:none; transform:translateY(calc((1 - var(--navigation))*-6px)); }
.entrance-raven-anchor { position:absolute; right:1vw; top:50%; width:calc((100svh - 100px)*.67 * 1.0126); height:calc((100svh - 100px)*.67); max-width:48%; transform:translateY(-50%); pointer-events:none; }
.entrance-raven-position { width:100%; height:100%; transform:translateX(calc(var(--raven-shift)*-8vw)) scale(var(--raven-scale)); transform-origin:58% 45%; }
.entrance-raven-svg { width:100%; height:100%; overflow:visible; }
.entrance-ghost { opacity:var(--ghost); }
.entrance-vector { fill:#050608; opacity:var(--vector); clip-path:circle(calc(2% + var(--reveal)*138%) at 68% 46%); }
.entrance-wing-first { fill:#050608; opacity:var(--wing-first); clip-path:inset(calc((1 - var(--trace))*100%) 0 0); }
.entrance-relief { opacity:var(--relief); }
.entrance-recognition-light { opacity:calc(var(--recognition,0)*.2); }
.entrance-relief-edge { opacity:calc(var(--relief)*.3); fill:none; stroke:#859097; stroke-width:1.6; }
.entrance-light-sweep { opacity:var(--light-strength,0); transform:translateX(calc(var(--light)*2900px)) rotate(-18deg); transform-origin:50% 50%; }
.entrance-trace { stroke:#adc4d0; stroke-width:3; stroke-linecap:round; stroke-dasharray:.16 .84; stroke-dashoffset:calc(.16 - var(--trace)); opacity:var(--trace-visible); }
.entrance-construction-arc { stroke:#56636b; stroke-width:2; opacity:var(--structure); transform:scale(calc(1 + var(--structure-expand)*.3)); transform-origin:68% 46%; }
.logo-hero[data-variant="a"] .structural-tangent,.logo-hero[data-variant="a"] .structural-cross { display:none; }
.entrance-trace-point { fill:var(--korppi-ice); opacity:var(--signal); transform:translate(calc((var(--point-x,0)*(1 - var(--signal-handoff)) + var(--point-dest-x,0)*var(--signal-handoff))*1716px),calc((var(--point-y,0)*(1 - var(--signal-handoff)) + var(--point-dest-y,1)*var(--signal-handoff))*1694.667px)); }
.entrance-fragments { opacity:var(--fragments); fill:color-mix(in srgb,#53585b calc((1 - var(--piece-black))*100%),#050608); }
.entrance-head { transform:translate(calc((1 - var(--head-align))*-72px),calc((1 - var(--head-align))*40px)); }
.entrance-wing-part { transform:translate(calc((1 - var(--wing-align))*64px),calc((1 - var(--wing-align))*-52px)); }
.entrance-tail { transform:translate(calc((1 - var(--tail-align))*-48px),calc((1 - var(--tail-align))*80px)); }
.entrance-structure { position:absolute; inset:0; pointer-events:none; opacity:var(--structure); color:#56636b; }
.entrance-structure .structural-baseline { position:absolute; left:calc(68% - var(--structure-expand)*61%); right:4%; bottom:16%; border-top:1px solid currentColor; transform:translateY(calc((1 - var(--tail-align))*20px)); }
.entrance-structure .structural-tangent { position:absolute; left:calc(67% - var(--structure-expand)*60%); right:4%; top:18%; border-top:1px solid currentColor; transform:translateY(calc((1 - var(--head-align))*-16px)); }
.entrance-structure .structural-vertical { position:absolute; top:10%; bottom:8%; right:24%; border-left:1px solid currentColor; transform:translateX(calc((1 - var(--wing-align))*24px)); }
.entrance-structure .structural-cross { position:absolute; top:35%; right:24%; width:9px; height:9px; border:1px solid currentColor; transform:translate(50%,calc((1 - var(--head-align))*22px)); }
.entrance-hero-foot { position:relative; z-index:4; padding:24px 0 96px; min-block-size:250px; display:grid; grid-template-columns:55% minmax(0,1fr); align-items:start; gap:16px 40px; border-top:1px solid #171b1e25; }
.entrance-hero-foot p { grid-column:1; grid-row:1; }
.entrance-demo { grid-column:1; grid-row:2; justify-self:start; }
.entrance-scroll { grid-column:2; grid-row:2; }
.entrance-hero-foot p { max-width:40ch; line-height:1.55; color:#626a70; opacity:var(--copy); transform:translateY(calc((1 - var(--copy))*12px)); }
.entrance-demo { background:#050608; color:white!important; padding:14px 20px; border:1px solid #050608; display:flex; align-items:center; gap:36px; font-size:14px; opacity:var(--copy); }
.entrance-scroll { justify-self:end; display:flex; align-items:center; gap:18px; font-size:13px; padding-block:14px; opacity:var(--cue); }
.entrance-scroll-point { width:5px; height:5px; border-radius:50%; background:#95c1d9; flex-shrink:0; }
.logo-hero :is(a,button):focus-visible { opacity:1!important; clip-path:none!important; }
@media(max-width:1000px) {
 .entrance-composition { min-height:0; display:flex; flex-direction:column; align-items:stretch; padding:36px 0 22px; }
 .entrance-raven-anchor { position:relative; right:0; top:auto; transform:none; align-self:end; width:62%; max-width:none; height:auto; aspect-ratio:1716/1694.667; }
 .entrance-copy { width:100%; padding:0 0 24px; }
 .logo-hero h1 { max-width:18ch; }
 .logo-hero h1 { font-size:clamp(46px,6.7vw,74px); }
 .entrance-hero-header nav { gap:18px; }
 .entrance-hero-foot { gap:20px; grid-template-columns:1fr auto; }
 .entrance-hero-foot p,.entrance-demo,.entrance-scroll { grid-column:1/-1; grid-row:auto; }
 .entrance-scroll { justify-self:start; }
}
@media(max-width:600px) {
 .entrance-hero-header { min-height:86px; gap:16px; padding-block:18px; }
 .entrance-hero-header .direction-brand { width:112px; }
 .entrance-hero-header nav { gap:12px; font-size:12px; }
 .entrance-hero-header nav a:not(.entrance-lab-back) { display:none; }
 .entrance-composition { min-height:0; display:flex; flex-direction:column; align-items:stretch; padding:36px 0 22px; }
 .entrance-copy { width:100%; padding:0 0 22px; }
 .entrance-copy .direction-kicker { font-size:11px; margin-bottom:18px; }
 .logo-hero h1 { font-size:clamp(42px,10.7vw,64px); max-width:16ch; }
 .entrance-raven-anchor { position:relative; top:auto; transform:none; align-self:end; width:min(83%,340px); max-width:none; height:auto; aspect-ratio:1716/1694.667; }
 .entrance-hero-foot { grid-template-columns:1fr; padding-bottom:128px; gap:20px; }
 .entrance-hero-foot p { font-size:15px; }
 .entrance-demo { justify-self:start; }
 .entrance-scroll { justify-self:start; padding-top:0; }
 .entrance-structure .structural-tangent { top:48%; }
 .entrance-structure .structural-baseline { bottom:20%; }
}
@media(prefers-reduced-motion:reduce) {
 .entrance-paper::after { animation:none; }
 .logo-hero { --title-one:1!important; --title-two:1!important; --copy:1!important; --navigation:1!important; --cue:1!important; }
 .entrance-raven-position { transform:none!important; }
 .entrance-vector { opacity:1!important; clip-path:none!important; }
 .entrance-dark,.entrance-relief,.entrance-relief-edge,.entrance-fragments,.entrance-structure,.entrance-construction-arc,.entrance-trace,.entrance-trace-point { display:none!important; }
}

.logo-hero .direction-kicker + h1 { margin-block-start:0; }

/* B joins the existing public header, native document flow and ambient controls. */
.home-raven-hero { padding-block-start:max(100px,var(--scene-header,100px)); }
.home-raven-hero .entrance-hero-foot { padding-block-end:72px; }
.home-raven-hero .entrance-paper::after { animation-play-state:paused!important; }
.home-raven-hero.is-asset-live[data-playback="settled"][data-reduced="false"] .entrance-paper::after { animation-play-state:running!important; }
.raven-entry-running .signal-nav { background:transparent!important; border-color:transparent; box-shadow:none; }
.raven-entry-running .signal-nav :is(.direction-brand,.signal-nav-center,.signal-nav-actions) { opacity:var(--home-entry-navigation,1); }
.raven-entry-running .signal-nav .direction-progress { opacity:0; }
html[data-home-entry-pending] .home-raven-hero { --raven-scale:6.8; --raven-shift:.6; --vector:0; --relief:1; --curtain:1; --curtain-travel:0; --title-one:0; --title-two:0; --copy:0; --navigation:0; --cue:0; }
html[data-home-entry-pending] .signal-nav { background:transparent!important; border-color:transparent; }
html[data-home-entry-pending] .signal-nav > * { opacity:0; }
@media(max-width:1000px) { .home-raven-hero .entrance-scroll { justify-self:end; } }
@media(max-width:600px) { .home-raven-hero .entrance-hero-foot { padding-block-end:100px; } }
@media(prefers-reduced-motion:reduce) {
 html[data-home-entry-pending] .signal-nav > *, .raven-entry-running .signal-nav :is(.direction-brand,.signal-nav-center,.signal-nav-actions) { opacity:1; }
 .home-raven-hero .entrance-paper::after { animation:none!important; }
}