/* ---------- first screen: the matrix ---------- */
.hero { position: relative; height: 100svh; min-height: 660px; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.copy { position: absolute; z-index: 2; left: var(--m); bottom: 44px; width: min(640px, calc(100% - 2 * var(--m))); }
.copy h1 { font-size: var(--s-display); line-height: 0.95; letter-spacing: -0.04em; font-weight: 500; }
.copy p { margin-top: 26px; font-size: var(--s-lead); line-height: 1.45; max-width: 40ch; }
.acts { margin-top: 30px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.hud { position: absolute; z-index: 2; right: var(--m); bottom: 44px; text-align: right; font-size: var(--s-small); line-height: 1.7; color: var(--muted); pointer-events: none; }
.phases { display: flex; justify-content: flex-end; gap: 14px; }
.phases span { transition: color 300ms; }
.phases span.on { color: var(--ink); font-weight: 600; }

/* The blue window opens around the belief, then rests before the film chapter. */
.about { padding-block: 144px 120px; }
.about-scene.is-opening { height: 190svh; }
.is-opening .about-stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.is-opening .field { width: calc(100% - var(--m)); }
.is-opening .field-ground { clip-path: inset(var(--window-y, 12%) 0 var(--window-y, 12%) var(--window-x, 60%) round 40px 0 0 40px); }
.is-opening #about-h { translate: var(--title-x, -48px) var(--title-y, -24px); }
.is-opening .belief { translate: var(--belief-x, 20px) var(--belief-y, 20px); }
.is-opening .story { translate: 0 var(--story-y, 48px); }
.field { position: relative; isolation: isolate; margin-left: var(--m); color: var(--field-ink); }
.field-ground { position: absolute; z-index: -1; inset: 0; border-radius: 32px 0 0 32px; background: var(--field); pointer-events: none; }
.field-in { position: relative; padding: 88px var(--m) 88px 0; row-gap: 48px; align-items: start; }
@media (min-width: 1101px) and (min-height: 660px) and (max-height: 779px) {
  .field-in { padding-block: 48px; row-gap: 32px; }
}
.about h2 { grid-column: 2 / 7; font-size: var(--s-display); line-height: .95; letter-spacing: -.045em; font-weight: 500; }
.about .belief { grid-column: 7 / 13; font-size: var(--s-state); line-height: 1.18; letter-spacing: -.02em; font-weight: 500; color: var(--field-ink); }
.story { grid-column: 2 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.story p { max-width: 42ch; }
.approach { grid-column: 2 / 13; justify-self: start; color: inherit; text-underline-offset: .25em; padding-block: 10px; }
.build-scene { margin-top: 120px; scroll-margin-top: 24px; }
.build-hold { padding-inline: var(--m); }
.build-head { display: grid; grid-template-columns: 7fr 5fr; gap: var(--g); align-items: end; margin-bottom: 48px; }
.about h3 { font-size: var(--s-display); line-height: 1; letter-spacing: -.035em; font-weight: 500; }
.build-say { font-size: var(--s-lead); line-height: 1.3; max-width: 34ch; }
.build-count { margin-top: 12px; }
.build-stage, .deck-nav { display: none; }
.film { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0 24px 24px 0; background: var(--surface); }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.film video.on { opacity: 1; }
.film-sim { position: absolute; z-index: 5; top: 16px; left: 16px; padding: 8px 12px; border-radius: 999px; color: var(--ground); background: var(--ink); font-size: var(--s-small); visibility: hidden; }
.film.is-simulation .film-sim { visibility: visible; }
.film-cap { margin: 16px var(--m) 0; max-width: 65ch; min-height: 4.4em; }
.dims { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.dims li { min-width: 0; padding: 28px; border-radius: 28px; background: var(--surface); color: var(--ink); }
.dims h4 { font-size: var(--s-point); line-height: 1.12; letter-spacing: -.025em; font-weight: 500; margin: 0 0 20px; }
.dims .panel p { font-size: var(--s-body); line-height: 1.55; max-width: 42ch; }
.m-film { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; border-radius: 16px; margin-bottom: 24px; }
.inline-cap { margin-top: 20px; color: var(--muted); font-size: var(--s-small); line-height: 1.45; }
.inline-sim { display: block; margin-bottom: 12px; font-weight: 600; }
/* Opaque sheets exchange within a clipped lane; dwell states show one complete card. */
.build-scene.is-live { height: 340svh; }
.is-live .build-hold { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 58fr 38fr; grid-template-rows: auto 1fr; gap: 24px 4%; padding-block: 40px 24px; }
.is-live .build-head { grid-column: 1 / -1; margin: 0; }
.is-live .build-stage { display: flex; align-items: center; grid-column: 1; grid-row: 2; min-height: 0; }
.is-live .build-media { width: calc(100% + var(--m)); margin-left: calc(-1 * var(--m)); }
.is-live .card-lane { position: relative; grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.is-live .dims { position: relative; display: block; height: 330px; overflow: clip; border-radius: 28px; background: var(--chip); }
.is-live .dims li { position: absolute; inset: 0; padding: 36px; visibility: hidden; pointer-events: none; }
.is-live .dims li.is-shown { visibility: visible; }
.is-live .dims li.on { pointer-events: auto; }
.is-live .film { transform-origin: 0 50%; }
.is-live .film-cap { height: 4.4em; }
.is-live .card-lane { padding-right: 14px; }
.is-live .dims .m-film, .is-live .dims .inline-cap, .is-live .dims .inline-sim { display: none; }
.is-live .deck-nav { display: flex; justify-content: space-between; gap: 24px; margin-top: 24px; align-items: start; }
.deck-nav button { min-height: 44px; padding: 8px 0; text-align: left; color: var(--ink); font-size: var(--s-small); line-height: 1.4; }
.deck-nav button:last-child { text-align: right; }
.deck-nav button:disabled { color: var(--muted); cursor: default; }
.deck-nav button:hover:not(:disabled) { text-decoration: underline; text-underline-offset: .25em; }
@media (min-width: 761px) and (max-width: 1100px) {
  .about h2 { grid-column: 2 / 13; }
  .about .belief { grid-column: 2 / 13; max-width: 38ch; }
  .story { grid-template-columns: 1fr; gap: 20px; }
  .story p { max-width: 65ch; }
  .build-head { grid-template-columns: 1fr; gap: 24px; }
  .dims { grid-template-columns: 1fr; }
  .dims li { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .dims .m-film { margin: 0; }
  .inline-cap { grid-column: 1 / -1; margin: 0; }
  .inline-sim { grid-column: 1 / -1; }
}
/* ---------- research: the door to the list ---------- */
.research { background: var(--surface); transition: background-color 300ms ease; }
.gate { align-items: end; padding-block: 140px; text-decoration: none; color: var(--ink); }
.gate h2 { grid-column: 1 / 8; font-size: var(--s-mega); line-height: 0.88; letter-spacing: -0.05em; font-weight: 500; }
.gate .say { grid-column: 8 / 13; padding-bottom: 0.4em; }
.gate .say p { font-size: var(--s-lead); line-height: 1.3; max-width: 26ch; }
.gate .say .latest { margin-top: 16px; font-size: var(--s-body); color: var(--muted); max-width: 40ch; }
.gate .say .latest b { color: var(--ink); font-weight: 500; }
.gate .btn { margin-top: 28px; }

/* ---------- join us ---------- */
.join { padding-block: 180px 0; align-items: start; }
.join .head { grid-column: 1 / 6; grid-row: 1; }
.join h2 { font-size: var(--s-head); line-height: 1; letter-spacing: -0.035em; font-weight: 500; margin-bottom: 20px; }
.join .cta { grid-column: 1 / 6; grid-row: 2; margin-top: 28px; }
.join .areas { grid-column: 7 / 13; grid-row: 1 / span 2; list-style: none; margin: 0; padding: 0; }
.join .areas a { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-block: 6px 18px; color: var(--ink); text-decoration: none; }
.join .areas b { font-size: var(--s-sub); line-height: 1; letter-spacing: -0.045em; font-weight: 500; transition: color var(--t-hover); }
.join .areas span { color: var(--muted); white-space: nowrap; font-size: var(--s-small); }
.join .areas a:hover b { color: #3d9be9; }

@media (max-width: 760px) {
  .copy { bottom: 28px; }
  .copy h1 { font-size: 12vw; }
  .copy p { margin-top: 16px; font-size: 16px; }
  .acts { margin-top: 20px; }
  /* The matrix's lower edge is 56% of its canvas height; caption belongs to that visual. */
  .hud { left: auto; right: var(--m); bottom: auto; top: calc(56% + 16px); text-align: right; }
  .phases { display: flex; justify-content: end; gap: 6px; }
  .phases span:not(:first-child)::before { content: '·'; margin-right: 6px; font-weight: 400; color: var(--muted); }
  @media (max-height: 700px) {
    .hud { top: calc(56% + 12px); font-size: 12px; line-height: 1.5; }
  }
  .about { padding-block: 88px 80px; }
  .field-ground { border-radius: 24px 0 0 24px; }
  .field-in { padding: 48px var(--m) 48px 20px; row-gap: 28px; }
  .about h2, .about .belief, .story, .approach { grid-column: 1 / -1; }
  .about h2 { font-size: 12vw; }
  .about .belief { font-size: 22px; }
  .story { grid-template-columns: 1fr; gap: 20px; }
  .build-scene { margin-top: 80px; }
  .build-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 28px; }
  .about h3 { font-size: var(--s-display); }
  .dims { grid-template-columns: 1fr; gap: 24px; }
  .dims li { padding: 24px; border-radius: 24px; }
  .dims h4 { font-size: 28px; }
  .gate { padding-block: 96px; }
  .gate h2, .gate .say { grid-column: 1 / -1; }
  .gate h2 { font-size: 19vw; }
  .gate .say { padding-top: 24px; }
  .join { padding-top: 112px; }
  .join .head, .join .areas, .join .cta { grid-column: 1 / -1; grid-row: auto; }
  .join .areas { margin-top: 32px; }
  .join .areas b { font-size: 10vw; }
}