/* Studio Jio. Page styles on top of scrollcraft.css (the engine's floor, left unedited). */

/* ---------------------------------------------------------------- tokens -- */
:root {
  --navy: #142337;
  --navy-2: #1B2E47;
  --bone: #EAE6DF;
  --char: #292B2D;
  --amber: #F2A541;

  --sc-canvas: var(--navy);
  --sc-surface: var(--navy-2);
  --sc-ink: var(--bone);
  --sc-ink-soft: #A9B1BC;
  --sc-accent: var(--amber);
  --sc-accent-ink: var(--navy);
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: "Archivo", system-ui, sans-serif;
  --sc-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sc-r-sm: 0px; --sc-r-md: 0px; --sc-r-lg: 0px; --sc-r-pill: 0px;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --lane: 0rem;               /* the margin the pipeline prints into */
  --bar-h: 3.5rem;
  --sec: clamp(5.5rem, 13vw, 12rem);

  --rule: color-mix(in srgb, var(--bone) 16%, transparent);
  --rule-strong: color-mix(in srgb, var(--bone) 40%, transparent);
  --line: color-mix(in srgb, var(--bone) 7%, transparent);

  --btn-ink: var(--bone);
  --btn-ground: var(--navy);
}
@media (min-width: 1100px) { :root { --lane: 11rem; } }

html { background: var(--bone); scroll-padding-top: calc(var(--bar-h) + 1.5rem); }
html.is-dark { background: var(--navy); }
body { font-weight: 420; }
h1, h2, h3, p, dl, dd, ol { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  padding: 0.75rem 1rem; background: var(--bone); color: var(--navy);
  font-weight: 600; text-decoration: none; transform: translateY(-300%);
}
.skip:focus { transform: none; }

/* ------------------------------------------------------------ structure -- */
.wrap {
  width: 100%; max-width: 104rem; margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: calc(var(--gutter) + var(--lane));
}
main { position: relative; z-index: 1; }
.sec { position: relative; padding-top: var(--sec); }

/* One set of layout lines for the whole page, on the quarter columns. */
.lines { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.lines__in, .hero__in {
  background:
    linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 25% 100% repeat-x content-box,
    linear-gradient(var(--line), var(--line)) 100% 0 / 1px 100% no-repeat content-box;
}
.lines__in {
  height: 100%; max-width: 104rem; margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: calc(var(--gutter) + var(--lane));
}

/* ----------------------------------------------------------------- type -- */
.h2 {
  font-family: var(--sc-font-display);
  font-weight: 800; font-stretch: 112%;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.25rem);
  line-height: 0.98; letter-spacing: -0.035em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--sc-font-display);
  font-weight: 700; font-stretch: 108%;
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
  line-height: 1.1; letter-spacing: -0.02em;
}
.body {
  max-width: 44ch; color: var(--sc-ink-soft);
  font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty;
}
.label, .data, .mlabel {
  font-family: var(--sc-font-mono); font-weight: 400;
  font-size: 0.72rem; line-height: 1.5; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.data, .mlabel { color: var(--sc-ink-soft); }
a.data { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a.data:hover { color: var(--bone); } }

/* On narrow screens the pipeline has no margin to print into, so each
   section's label is printed on a branch line instead. */
.mlabel { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2.25rem; }
.mlabel::before { content: ""; flex: 1; height: 1px; background: var(--rule); }
@media (min-width: 1100px) { .mlabel { display: none; } }

/* ---------------------------------------------------------------- marks -- */
.mark {
  display: block; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.mark--hero, .mark--primary {
  -webkit-mask-image: url(assets/brand/primary-navy.svg); mask-image: url(assets/brand/primary-navy.svg);
  aspect-ratio: 4928.03 / 1045;
}
.mark--hero { width: 100%; }
.mark--primary { width: 7.25rem; }
.mark--domain {
  -webkit-mask-image: url(assets/brand/domain-bone.svg); mask-image: url(assets/brand/domain-bone.svg);
  aspect-ratio: 4977.35 / 1045; width: 100%;
}
.mark--symbol {
  -webkit-mask-image: url(assets/brand/symbol-bone.svg); mask-image: url(assets/brand/symbol-bone.svg);
  aspect-ratio: 549 / 348;
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  min-height: 3rem; padding: 0 1.35rem;
  border: 1px solid var(--btn-ink); border-radius: 0;
  background: transparent; color: var(--btn-ink);
  font-family: var(--sc-font-text); font-weight: 600; font-stretch: 105%;
  font-size: 0.95rem; line-height: 1; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), transform 100ms var(--sc-ease-out);
}
.btn--sm { min-height: 2.75rem; padding: 0 1rem; font-size: 0.85rem; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--btn-ink); color: var(--btn-ground); }
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* ------------------------------------------------------------------ bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 61; height: var(--bar-h);
  background: var(--navy); border-bottom: 1px solid var(--rule);
  visibility: hidden; opacity: 0; transform: translateY(-100%);
  transition: opacity 320ms var(--sc-ease-out), transform 460ms var(--sc-ease-out), visibility 0s linear 460ms;
}
html.has-bar .bar { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.bar__in { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.bar__mark { display: block; padding-block: 0.85rem; color: var(--bone); }
.bar .btn--sm { min-height: 2.25rem; }
@media (max-width: 699px) { .bar .btn--sm { min-height: 2.5rem; } }

/* ------------------------------------------------------ the pipeline rail --
   One fixed 1px line. --rail-cut is where the inversion line crosses it. */
.rail {
  --rail-cut: 100000px;
  position: fixed; z-index: 60; width: 1px;
  top: 5.75rem; bottom: 4.75rem;
  right: calc(var(--gutter) * 0.5);
}
.rail__track {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--navy) 30%, transparent) 0,
    color-mix(in srgb, var(--navy) 30%, transparent) var(--rail-cut),
    color-mix(in srgb, var(--bone) 24%, transparent) var(--rail-cut),
    color-mix(in srgb, var(--bone) 24%, transparent) 100%);
}
.rail__current {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--bone) 72%, transparent);
  transform-origin: 50% 0; transform: scaleY(0); opacity: 0; will-change: transform;
}
.rail__head {
  position: absolute; left: -2px; top: -2.5px; width: 5px; height: 5px;
  background: var(--bone); opacity: 0; will-change: transform;
}
html.is-live .rail__current, html.is-live .rail__head { opacity: 1; }

.rail__read {
  position: absolute; right: -0.5px; bottom: 100%; margin-bottom: 0.6rem;
  font-family: var(--sc-font-mono); font-size: 0.66rem; line-height: 1; letter-spacing: 0.08em;
  white-space: nowrap; color: color-mix(in srgb, var(--navy) 78%, transparent);
}
.rail.is-read-dark .rail__read { color: color-mix(in srgb, var(--bone) 70%, transparent); }

.rail__ticks { list-style: none; padding: 0; }
.rail__ticks li { position: absolute; right: 0; top: calc(var(--at, 0) * 100%); }
.rail__ticks li::before {
  content: ""; position: absolute; right: 0; top: 0; width: 7px; height: 1px;
  background: var(--bone); opacity: 0;
}
html.is-live .rail__ticks li::before { opacity: 0.4; }
html.is-live .rail__ticks li.is-on::before { opacity: 1; }
.rail__ticks a {
  position: absolute; right: 1rem; top: 0; translate: 0 -50%;
  padding: 0.5rem 0.25rem;
  font-family: var(--sc-font-mono); font-size: 0.66rem; line-height: 1; letter-spacing: 0.08em;
  color: var(--bone); text-decoration: none; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.rail__ticks a span { display: block; }
.rail__ticks li.is-on a { opacity: 0.62; pointer-events: auto; }
.rail__ticks li.is-now a { opacity: 1; }
.rail__ticks a:focus-visible { opacity: 1; background: var(--navy); }
@media (hover: hover) and (pointer: fine) { .rail__ticks li.is-on a:hover { opacity: 1; } }

.rail__node {
  position: absolute; top: 100%; left: 50%; width: 22px; aspect-ratio: 549 / 348;
  translate: -50% 0.7rem;
  -webkit-mask: url(assets/brand/symbol-bone.svg) center / contain no-repeat;
  mask: url(assets/brand/symbol-bone.svg) center / contain no-repeat;
  background: color-mix(in srgb, var(--navy) 38%, transparent);
  transition: background-color 160ms linear;
}
.rail.is-node-dark .rail__node { background: color-mix(in srgb, var(--bone) 42%, transparent); }
html.is-out .rail .rail__node { background: var(--amber); }
/* the glow sits on a sibling-free wrapper: a mask would clip a box-shadow */
html.is-out .rail::after {
  content: ""; position: absolute; top: 100%; left: 50%; width: 30px; height: 30px;
  translate: -50% calc(0.7rem - 8px); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(242 165 65 / 0.34), transparent);
}

@media (max-width: 1099px) {
  .rail__read { display: none; }
  .rail__ticks li.is-on a { opacity: 0; pointer-events: none; }
  .rail__ticks a:focus-visible { opacity: 1 !important; }
}
@media (max-width: 699px) {
  .rail { right: 0.55rem; top: calc(var(--bar-h) + 1rem); bottom: 2.75rem; }
  .rail__node { width: 14px; translate: -50% 0.5rem; }
  html.is-out .rail::after { width: 22px; height: 22px; translate: -50% calc(0.5rem - 6px); }
}

/* ----------------------------------------------------------------- hero -- */
/* Default (no JavaScript, or reduced motion): the bone plate is its own screen
   above the hall. With motion, studio.js moves it into the stage as the top
   layer and the scroll line cuts it away. */
.hero__plate--light { position: relative; height: 100vh; height: 100svh; min-height: 30rem; }
html.is-fused .hero__plate { position: absolute; inset: 0; height: auto; min-height: 0; }
html.is-fused .hero__plate--light { z-index: 5; will-change: clip-path; }
.hero__plate--light {
  background: var(--bone); color: var(--navy);
  --line: color-mix(in srgb, var(--navy) 9%, transparent);
  --btn-ink: var(--navy); --btn-ground: var(--bone);
}
.hero__plate--light :focus-visible { outline-color: var(--navy); }
.hero__plate--dark {
  z-index: 3; background: transparent; color: var(--bone);
  clip-path: inset(100% 0 0 0); will-change: clip-path, transform, opacity;
  transform-origin: 73% 61%;   /* the doorway: the wordmark recedes toward it */
}
@media (max-width: 699px) { .hero__plate--dark { transform-origin: 52% 68%; } }
.hero__in { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.hero__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: clamp(1.1rem, 2.2vw, 1.9rem);
}
.hero__top .label { max-width: 11rem; }
.hero__title { align-self: center; }
.hero__base {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: clamp(1.4rem, 2.6vw, 2.25rem);
}
.io { display: grid; gap: 0.4rem; grid-column: span 2; font-size: 1.0625rem; font-weight: 520; line-height: 1.3; }
.io + .io { grid-column: 3 / 5; }
.io__k {
  font-family: var(--sc-font-mono); font-weight: 400; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72;
}
@media (max-width: 699px) {
  .mark--hero {
    -webkit-mask-image: url(assets/brand/stacked-navy.svg); mask-image: url(assets/brand/stacked-navy.svg);
    aspect-ratio: 3497.36 / 2020.57;
  }
  .hero__title { padding-right: 0.25rem; }
  .hero__base { grid-template-columns: 1fr; gap: 1.1rem; }
  .io, .io + .io { grid-column: 1; }
}

/* ------------------------------------------------------------ statement --
   A pinned stage. The hall clip is scrubbed by the scroll; the sentence lights
   on top of it. Without JavaScript or motion it is a still plate with the text. */
.statement { padding-top: 0; }
:where(.statement__stage) { position: relative; height: 100vh; height: 100svh; min-height: 30rem; overflow: clip; }
.statement__stage { background: #0b131f; }
.statement__stage :is(video, .sc-stage__poster) {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
}
/* density only where the type sits: the left of the frame on wide screens */
.statement__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right,
      color-mix(in srgb, #0b131f 92%, transparent) 0%,
      color-mix(in srgb, #0b131f 78%, transparent) 38%,
      color-mix(in srgb, #0b131f 30%, transparent) 62%,
      transparent 78%),
    linear-gradient(to top, color-mix(in srgb, var(--navy) 100%, transparent) 0, transparent 16%);
}
.statement__copy {
  position: absolute; inset: 0; z-index: 2; will-change: opacity, transform;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--bar-h);
  background:
    linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 25% 100% repeat-x content-box,
    linear-gradient(var(--line), var(--line)) 100% 0 / 1px 100% no-repeat content-box;
}
.statement__line {
  font-family: var(--sc-font-display);
  font-weight: 800; font-stretch: 112%;
  font-size: clamp(2.3rem, 1rem + 5.4vw, 6rem);
  line-height: 1; letter-spacing: -0.04em;
  max-width: 17ch;
}
/* Each word is a fixed-width cell. Until the scroll reaches it, it holds
   flickering bits; then it resolves to the word with a brief amber flash. */
.w {
  display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums;
  opacity: 0.3; transition: opacity 90ms linear, color 420ms linear;
}
.w.is-lit { opacity: 1; }
.w.is-fresh { color: var(--amber); transition: none; }
.statement__foot {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.statement__foot .body { grid-column: 1 / 3; color: color-mix(in srgb, var(--bone) 82%, transparent); }
@media (max-width: 859px) {
  .statement__foot .body { grid-column: 1 / -1; }
  /* On a phone the type takes the top of the frame and the hall keeps the
     bottom, so the density is a band that clears before the doorway. */
  .statement__copy { justify-content: flex-start; padding-top: calc(var(--bar-h) + 1.75rem); }
  .statement__scrim {
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, #0b131f 90%, transparent) 0%,
        color-mix(in srgb, #0b131f 82%, transparent) 40%,
        color-mix(in srgb, #0b131f 34%, transparent) 58%,
        transparent 70%),
      linear-gradient(to top, var(--navy) 0, transparent 12%);
  }
}

/* a short phone has no room between the type and the doorway, so the band runs lower */
@media (max-width: 859px) and (max-height: 720px) {
  .statement__scrim {
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, #0b131f 90%, transparent) 0%,
        color-mix(in srgb, #0b131f 84%, transparent) 60%,
        color-mix(in srgb, #0b131f 40%, transparent) 80%,
        transparent 92%),
      linear-gradient(to top, var(--navy) 0, transparent 10%);
  }
}

/* ----------------------------------------------------------------- work -- */
.work__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--rule-strong);
}
.grid { display: grid; grid-template-columns: repeat(12, 1fr); row-gap: clamp(4.5rem, 9vw, 8rem); }
.proj { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.proj__media { position: relative; }
.proj__side { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.proj--a .proj__media { grid-column: 1 / 10; }
.proj--a .proj__side { grid-column: 10 / 13; padding-left: 1.5rem; }
.proj--b .proj__media { grid-column: 4 / 13; grid-row: 1; }
.proj--b .proj__side { grid-column: 1 / 4; grid-row: 1; padding-right: 1.5rem; }

.frame {
  display: block; color: inherit; text-decoration: none;
  border: 1px solid var(--rule-strong); background: var(--navy);
  transition: border-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { a.frame:hover { border-color: var(--bone); } }
.frame__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 2.25rem; padding: 0 0.85rem; border-bottom: 1px solid var(--rule-strong);
  font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
}
.frame__state { display: inline-flex; align-items: center; gap: 0.55em; text-transform: uppercase; letter-spacing: 0.08em; }
.frame__state::before { content: ""; width: 6px; height: 6px; background: var(--bone); }
.frame__state--off::before { background: transparent; box-shadow: inset 0 0 0 1px var(--bone); }
.frame__view { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--navy-2); }
.frame__view img { width: 100%; height: auto; max-width: none; will-change: transform; }

.phone {
  position: absolute; bottom: -11%; width: 21%; aspect-ratio: 9 / 17; overflow: hidden;
  border: 1px solid var(--rule-strong); background: var(--navy);
  box-shadow: 0 6px 14px rgb(5 10 18 / 0.35), 0 22px 48px -10px rgb(5 10 18 / 0.6);
  will-change: transform;
}
.phone img { width: 100%; height: auto; }
.proj--a .phone { right: 5%; }
.proj--b .phone { left: 5%; }

.proj__meta { border-top: 1px solid var(--rule-strong); padding-top: 1rem; }
.spec { margin-top: 1.1rem; }
.spec > div { padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.spec dt {
  font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 0.25rem;
}
.spec dd { font-size: 0.98rem; line-height: 1.45; }

.block--bone {
  aspect-ratio: 1; padding: 1.1rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--bone); color: var(--navy); will-change: transform;
}
.block--bone .mark--symbol { width: 62%; }
.block--bone .data { color: var(--navy); }

.frame--open { grid-column: 1 / -1; }
@media (max-width: 859px) {
  .grid { row-gap: 4.5rem; }
  .proj { display: block; }
  .proj--a .proj__side, .proj--b .proj__side { padding: 0; margin-top: 4.25rem; }
  .phone { width: 30%; bottom: -3.25rem; }
  .proj--a .phone { right: 6%; }
  .proj--b .phone { left: auto; right: 6%; }
  .block--bone { aspect-ratio: auto; flex-direction: row; align-items: flex-end; gap: 1rem; padding: 1rem; }
  .block--bone .mark--symbol { width: 4.5rem; flex: none; }
  .block--bone .data { text-align: right; max-width: 14rem; }
}

/* ------------------------------------------------------------- terminal -- */
.term__grid { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; }
.term__lead { grid-column: 1 / 7; padding-right: 2rem; }
.term__lead .body { margin-top: 1.25rem; }
.tform { grid-column: 7 / 13; position: relative; border: 1px solid var(--bone); background: var(--navy); }
.tform__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 2.5rem; padding: 0 1rem; border-bottom: 1px solid var(--bone);
  font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.field { display: grid; padding: 0.85rem 1rem 0.9rem; border-bottom: 1px solid var(--rule-strong); }
.field label {
  display: flex; align-items: center; gap: 0.6em;
  font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 0.3rem;
}
.field label::before { content: ""; width: 6px; height: 6px; flex: none; box-shadow: inset 0 0 0 1px var(--rule-strong); }
.field[data-filled] label::before { background: var(--bone); box-shadow: none; }
.field__err { color: var(--bone); margin-left: auto; }
.field__opt { opacity: 0.6; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.3rem 0; border: 0; border-radius: 0; outline: 0;
  background: transparent; color: var(--bone);
  font-size: 1.0625rem; line-height: 1.45; min-height: 2.75rem;
  -webkit-appearance: none; appearance: none;
}
.field textarea { display: block; min-height: 7.5rem; resize: vertical; }
.field select {
  cursor: pointer; padding-right: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23EAE6DF' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.15rem center; background-size: 0.7rem;
}
.field option { background: var(--navy); color: var(--bone); }
.field:focus-within { outline: 2px solid var(--amber); outline-offset: -2px; background: var(--navy-2); }
.field:focus-within label { color: var(--bone); }
.field[data-invalid] { box-shadow: inset 0 0 0 1px var(--bone); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tform__send { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.25rem; padding: 1rem; }
.tform__status {
  flex: 1 1 14rem; font-family: var(--sc-font-mono); font-size: 0.74rem; line-height: 1.5;
  letter-spacing: 0.04em; color: var(--bone);
}
.btn--power { background: var(--bone); color: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  .btn--power:hover { background: transparent; color: var(--bone); }
}
.power {
  width: 0.62rem; height: 0.62rem; flex: none;
  box-shadow: inset 0 0 0 1px currentColor;
  transition: background-color 180ms linear, box-shadow 180ms linear;
}
html.is-out .power {
  background: var(--amber);
  box-shadow: 0 0 0 3px rgb(242 165 65 / 0.22), 0 0 12px 2px rgb(242 165 65 / 0.6);
}
@media (max-width: 859px) {
  .term__grid { display: block; }
  .term__lead { padding-right: 0; margin-bottom: 2.5rem; }
}

/* --------------------------------------------------------------- footer -- */
.term { padding-bottom: var(--sec); }
.foot { padding: 0 0 1.5rem; }
.foot .mark--domain { color: var(--bone); }
.foot__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.foot__row a { padding: 0.75rem 0; }

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .w { display: inline; opacity: 1; transition: none; }
  .frame__view img, .phone, .block--bone { transform: none !important; }
}

/* ============================================================ SECOND PASS ==
   More going on: the live frame, the animated process, the form's boot and
   charge meter, and a busier pipeline. Every pre-animation state is scoped to
   html.js so the page is complete without JavaScript. */

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------------------------------------------------------- feed lines --
   When a section arrives, a line runs out of the rail and across its top. */
.feed {
  position: absolute; top: 0; height: 1px; pointer-events: none;
  left: max(var(--gutter), calc((100% - 104rem) / 2 + var(--gutter)));
  right: calc(var(--gutter) * 0.5);
  background: var(--rule-strong);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 900ms var(--sc-ease-out);
}
.sec.is-fed .feed { transform: none; }
@media (max-width: 1099px) { .feed { display: none; } }
html.js .mlabel::before { transform: scaleX(0); transform-origin: 100% 50%; transition: transform 700ms var(--sc-ease-out); }
html.js .sec.is-fed .mlabel::before, html.js .hero.is-fed .mlabel::before { transform: none; }

/* -------------------------------------------------------- rail, busier -- */
.rail__pulse {
  position: absolute; left: -1px; top: 0; width: 3px; height: 14px;
  background: var(--bone); opacity: 0; pointer-events: none;
}
html.is-live .rail__pulse { animation: railpulse 2.8s cubic-bezier(0.5, 0, 0.2, 1) infinite; }
@keyframes railpulse {
  0% { transform: translateY(0); opacity: 0; }
  8%, 86% { opacity: 1; }
  100% { transform: translateY(var(--rail-head, 0px)); opacity: 0; }
}
.rail__head { transform-origin: 50% 50%; }
.rail__ticks li::before { transform-origin: 100% 50%; }
html.is-live .rail__ticks li.is-on::before { animation: tick 520ms steps(6, end); }
@keyframes tick { from { transform: scaleX(5); } to { transform: scaleX(1); } }

/* ----------------------------------------------------- the live frame -- */
.open { display: grid; grid-template-columns: 7fr 5fr; min-height: 21rem; }
.plan { position: relative; padding: 1.5rem 1.5rem 1.9rem; overflow: hidden; min-width: 0; }
.plan__page {
  position: relative; height: 100%; min-height: 15rem; overflow: hidden;
  border: 1px solid var(--rule-strong);
  display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto 1fr auto;
}
.plan__nav {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--rule-strong); min-width: 0;
}
.plan__logo {
  font-family: var(--sc-font-mono); font-size: 0.64rem; letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan__links { display: flex; gap: 0.4rem; flex: none; }
.plan__links i { width: 1.5rem; height: 3px; background: var(--rule-strong); }
.plan__hero { display: flex; flex-direction: column; justify-content: center; gap: 0.8rem; padding: 0.9rem 0.75rem; min-width: 0; }
.plan__title {
  font-family: var(--sc-font-display); font-weight: 800; font-stretch: 112%;
  font-size: 2.2rem; line-height: 0.96; letter-spacing: -0.035em; overflow-wrap: anywhere;
}
.is-empty .plan__title [data-plan-title] { opacity: 0.38; }
/* the caret is a text character joined to the last word, so it can never wrap alone */
.plan__caret { display: none; }
.plan__title [data-plan-title]::after {
  content: "†08C"; margin-left: 0.04em; font-family: var(--sc-font-mono); font-weight: 400;
  font-size: 0.86em; letter-spacing: 0; animation: blink 1.05s steps(1) infinite;
}
.plan__cta { width: 4.75rem; height: 1.3rem; border: 1px solid var(--rule-strong); }
.frame--open:not(.is-empty) .plan__cta { background: var(--bone); border-color: var(--bone); }
.plan__img { border-left: 1px solid var(--rule-strong); }
.plan__img svg { width: 100%; height: 100%; fill: none; stroke: var(--rule-strong); }
.plan__rows { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule-strong); }
.plan__rows i { height: 2.1rem; border-left: 1px solid var(--rule-strong); }
.plan__rows i:first-child { border-left: 0; }
.plan__scan { position: absolute; inset: 0; pointer-events: none; border-top: 1px solid color-mix(in srgb, var(--bone) 45%, transparent); animation: scan 4.6s linear infinite; }
@keyframes scan { from { transform: translateY(-2%); } to { transform: translateY(100%); } }
.plan__dim, .plan__pos {
  position: absolute; font-family: var(--sc-font-mono); font-size: 0.6rem; line-height: 1;
  letter-spacing: 0.08em; color: var(--sc-ink-soft); white-space: nowrap;
}
.plan__dim { left: 1.5rem; bottom: 0.65rem; }
.plan__x, .plan__y, .plan__pos { opacity: 0; pointer-events: none; will-change: transform; }
.plan__x { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--bone) 55%, transparent); }
.plan__y { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--bone) 55%, transparent); }
.plan__pos { left: 0; top: 0; padding: 0.3rem 0.4rem; background: var(--bone); color: var(--navy); }
.plan.is-aim { cursor: crosshair; }
.plan.is-aim .plan__x, .plan.is-aim .plan__y, .plan.is-aim .plan__pos { opacity: 1; }

/* the page assembles itself when the frame arrives */
html.js .frame--open:not(.is-in) .plan__page > :not(.plan__scan) { clip-path: inset(0 100% 0 0); }
html.js .frame--open.is-in .plan__page > :not(.plan__scan) { clip-path: inset(0 0 0 0); transition: clip-path 520ms steps(9, end); }
html.js .frame--open.is-in .plan__hero { transition-delay: 140ms; }
html.js .frame--open.is-in .plan__img { transition-delay: 280ms; }
html.js .frame--open.is-in .plan__rows { transition-delay: 420ms; }

.open__copy { border-left: 1px solid var(--rule-strong); padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0.9rem; }
.open__copy .btn { align-self: flex-start; margin-top: 0.4rem; }
.open__field { display: grid; gap: 0.35rem; margin-top: 0.4rem; border: 1px solid var(--rule-strong); padding: 0.7rem 0.85rem 0.6rem; }
.open__field:focus-within { outline: 2px solid var(--amber); outline-offset: -2px; background: var(--navy-2); }
.open__field label {
  font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sc-ink-soft);
}
.open__field input {
  width: 100%; min-height: 2.5rem; padding: 0; border: 0; border-radius: 0; outline: 0;
  background: transparent; color: var(--bone); font-size: 1.0625rem;
}
@media (max-width: 859px) {
  .open { grid-template-columns: 1fr; }
  .plan { padding: 1rem 1rem 1.7rem; }
  .plan__dim { left: 1rem; bottom: 0.55rem; }
  .open__copy { border-left: 0; border-top: 1px solid var(--rule-strong); }
}

/* -------------------------------------------------------------- process -- */
.process .h2 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.steps { list-style: none; padding: 0; position: relative; border-top: 1px solid var(--rule-strong); }
.steps::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--bone); transform-origin: 50% 0; transform: scaleY(var(--draw, 1));
}
html.js .steps::after { transform: scaleY(var(--draw, 0)); }
.step {
  position: relative; display: grid; grid-template-columns: repeat(12, 1fr); align-items: start;
  padding: clamp(1.9rem, 3.6vw, 3.1rem) 0; border-bottom: 1px solid var(--rule);
}
/* station on the drawn line */
.step::before {
  content: ""; position: absolute; left: -4px; top: clamp(1.9rem, 3.6vw, 3.1rem); width: 9px; height: 9px;
  background: var(--bone); z-index: 1;
}
html.js .step:not(.is-on)::before { background: var(--navy); box-shadow: inset 0 0 0 1px var(--rule-strong); }
/* the row's rule is drawn when the current reaches it */
.step::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: color-mix(in srgb, var(--bone) 62%, transparent);
  transform-origin: 0 50%; transition: transform 850ms var(--sc-ease-out);
}
html.js .step:not(.is-on)::after { transform: scaleX(0); }
.step__id { grid-column: 1 / 4; padding-left: 1.5rem; }
.step__num {
  display: block;
  font-family: var(--sc-font-display); font-weight: 900; font-stretch: 125%;
  font-size: clamp(4.25rem, 1.6rem + 8.4vw, 9.25rem); line-height: 0.8; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums; transition: opacity 110ms linear;
}
.step__bits { display: flex; gap: 3px; margin-top: 1.1rem; }
.step__bits i { width: 7px; height: 7px; box-shadow: inset 0 0 0 1px currentColor; opacity: 0.45; }
.step__bits i.on { background: currentColor; opacity: 1; }
.step__head { grid-column: 4 / 7; padding-right: 1.5rem; }
.step__lede { margin-top: 0.55rem; font-size: 1.15rem; font-weight: 520; line-height: 1.3; }
.step .body { grid-column: 7 / 11; padding-right: 1.5rem; }
.step__glyph { grid-column: 11 / 13; justify-self: end; width: clamp(4.5rem, 7.2vw, 6.75rem); padding-right: 1.1rem; box-sizing: content-box; }
.step__head, .step .body, .step__glyph { transition: opacity 160ms linear; }
html.js .step:not(.is-on) .step__num { opacity: 0.14; }
html.js .step:not(.is-on) .step__head, html.js .step:not(.is-on) .body { opacity: 0.42; }
html.js .step:not(.is-on) .step__bits { opacity: 0.4; }

.glyph { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 11; }
.glyph rect { fill: currentColor; stroke: none; }
.glyph__draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--sc-ease-out); }
.glyph__draw--2 { transition-delay: 260ms; }
html.js .step:not(.is-on) .glyph__draw { stroke-dashoffset: 1; }
.glyph__pk, .glyph__orbit { opacity: 0; }
.step.is-on .glyph__pk { animation: packet 1.5s steps(9, end) infinite; }
.step.is-on .glyph__pk--2 { animation-delay: -0.75s; }
@keyframes packet {
  0% { transform: translateX(0); opacity: 0; }
  12%, 78% { opacity: 1; }
  100% { transform: translateX(48px); opacity: 0; }
}
.glyph__orbit { transform-box: view-box; transform-origin: 60px 60px; }
.step.is-on .glyph__orbit { opacity: 1; animation: orbit 2.6s steps(12, end) infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }

/* a row inverts under the pointer: the page's switch, in miniature */
@media (hover: hover) and (pointer: fine) {
  .step.is-on:hover { background: var(--bone); color: var(--navy); }
  .step.is-on:hover .body { color: var(--navy); }
  .step.is-on:hover::before { background: var(--navy); }
}
@media (max-width: 859px) {
  .step { display: block; padding-left: 1.5rem; }
  .step__id { padding-left: 0; margin-bottom: 1.5rem; }
  .step__head { padding-right: 0; margin-bottom: 0.9rem; }
  .step .body { padding-right: 0; }
  .step__glyph { position: absolute; right: 0; top: clamp(1.9rem, 3.6vw, 3.1rem); width: 3.6rem; padding-right: 0.25rem; }
}

/* ------------------------------------------------------- form, livelier -- */
.cursor {
  display: inline-block; width: 0.4em; height: 0.7em; margin-left: 0.14em;
  background: currentColor; animation: blink 1.1s steps(1) infinite;
}
.meter { display: grid; gap: 0.9rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
/* The power core: the ring mark as a solid object, built from stacked layers
   of the real mark. It fills from the bottom as the form is completed. */
@property --lvl { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.core {
  --lvl: 0%;
  position: relative; width: min(100%, 21rem); aspect-ratio: 549 / 348;
  perspective: 900px; margin: 1.25rem 0 1.5rem 1.5rem;
  transition: --lvl 520ms steps(8, end);
}
.core__body { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-26deg); will-change: transform; }
.core__layer {
  --lit: #8f9296; --dim: #22344c;
  position: absolute; inset: 0;
  -webkit-mask: url(assets/brand/symbol-bone.svg) center / contain no-repeat;
  mask: url(assets/brand/symbol-bone.svg) center / contain no-repeat;
  background: linear-gradient(to top, var(--lit) 0, var(--lit) var(--lvl), var(--dim) var(--lvl), var(--dim) 100%);
}
.core__layer--front { --lit: var(--bone); --dim: #33465f; }
.meter.is-sent .core__layer { --lit: #a8702a; }
.meter.is-sent .core__layer--front { --lit: var(--amber); }
.core__glow {
  position: absolute; inset: -30%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgb(242 165 65 / 0.34), transparent);
  transition: opacity 320ms linear;
}
.meter.is-armed .core__glow { opacity: 0.6; }
.meter.is-sent .core__glow { opacity: 1; }

/* the form powers up field by field when it arrives */
html.js .tform:not(.is-booted) .field, html.js .tform:not(.is-booted) .tform__send { clip-path: inset(0 100% 0 0); }
html.js .tform.is-booted .field, html.js .tform.is-booted .tform__send {
  clip-path: inset(0 0 0 0); transition: clip-path 440ms steps(10, end); transition-delay: calc(var(--i, 0) * 80ms);
}
.tform .field:nth-of-type(3) { --i: 1; }
.tform .field:nth-of-type(4) { --i: 2; }
.tform .field:nth-of-type(5) { --i: 3; }
.tform .field:nth-of-type(6) { --i: 4; }
.tform__send { --i: 5; }

.btn--power.is-armed .power { animation: armed 1s steps(1) infinite; }
@keyframes armed { 0%, 59% { opacity: 1; } 60%, 100% { opacity: 0.25; } }
html:not(.is-out) .btn--power.is-armed .power { background: var(--amber); box-shadow: none; }

/* sending throws the switch once more */
.tform::after { content: ""; position: absolute; inset: 0; background: var(--bone); opacity: 0; pointer-events: none; }
.tform.is-flash::after { animation: flash 480ms steps(1) 1; }
@keyframes flash { 0% { opacity: 1; } 34% { opacity: 0; } 50% { opacity: 1; } 72%, 100% { opacity: 0; } }

@media (max-width: 859px) {
  .meter { margin-top: 1.5rem; }
  .core { width: min(72%, 16rem); margin: 1rem 0 1.25rem 1rem; }
}

/* A far plane of bits behind the navy page. It drifts slower than the scroll,
   wakes under the pointer, and flickers when the page moves fast. */
.bitfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .cursor, .plan__title [data-plan-title]::after, .plan__scan, .rail__pulse, .glyph__pk, .glyph__orbit,
  .btn--power.is-armed .power, .tform.is-flash::after, html.is-live .rail__ticks li.is-on::before { animation: none !important; }
  .plan__scan { display: none; }
  .bitfield { display: none; }
  .bar { transition: none; }
  .feed, .mlabel::before, .step::after, .glyph__draw, .core,
  html.js .tform.is-booted .field, html.js .tform.is-booted .tform__send,
  html.js .frame--open.is-in .plan__page > * { transition: none !important; }
}

/* ============================================================== THIRD PASS ==
   Sound, project films, a pointer light in the work section, and the arrival. */

/* ---------------------------------------------------------- sound toggle -- */
.bar__tools { display: flex; align-items: center; gap: 0.75rem; }
.sound {
  display: inline-flex; align-items: center; gap: 0.65em;
  min-height: 2.25rem; padding: 0 0.75rem;
  border: 1px solid var(--rule-strong); border-radius: 0; background: transparent; color: var(--bone);
  font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.sound[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .sound:hover { background: var(--bone); color: var(--navy); } }
.sound__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound__bars i { width: 2px; height: 12px; background: currentColor; transform: scaleY(0.25); transform-origin: 50% 100%; }
.sound[aria-pressed="true"] .sound__bars i { animation: bars 760ms steps(5, end) infinite alternate; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-delay: -310ms; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-delay: -520ms; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(4) { animation-delay: -150ms; }
@keyframes bars { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
@media (max-width: 699px) {
  .bar__tools { gap: 0.5rem; }
  .sound { min-height: 2.5rem; padding: 0 0.8rem; }
  .sound__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* --------------------------------------------------------- project films -- */
.frame__film {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity 420ms linear;
}
.frame__view.is-playing .frame__film { opacity: 1; }

/* ---------------------------------------------------------- pointer light -- */
.work__light {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 420ms linear;
  background: radial-gradient(36rem circle at var(--mx, 50%) var(--my, 0px), color-mix(in srgb, var(--bone) 9%, transparent), transparent 70%);
}
.work.is-lit .work__light { opacity: 1; }
.work .wrap { position: relative; }
.frame { position: relative; }
/* the edge of whatever the light is near catches it */
.frame::after, .phone::after {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  border: 1px solid transparent;
  background: radial-gradient(17rem circle at var(--lx, -999px) var(--ly, -999px), var(--bone), transparent 72%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ---------------------------------------------------------------- arrival -- */
:where(.arrive__stage) { position: relative; height: 100vh; height: 100svh; min-height: 30rem; overflow: clip; }
.arrive__stage { background: #0b131f; }
.arrive__stage :is(video, .sc-stage__poster) {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.arrive__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--navy) 0, transparent 16%),
    linear-gradient(to top,
      color-mix(in srgb, #0b131f 97%, transparent) 0%,
      color-mix(in srgb, #0b131f 86%, transparent) 24%,
      color-mix(in srgb, #0b131f 48%, transparent) 38%,
      transparent 52%);
}
/* the wordmark stands on the floor, under the doorway rather than across it */
.arrive .foot .mark--domain { width: min(100%, 62rem); }
@media (min-width: 860px) { .arrive .foot .mark--domain { width: min(74%, 62rem); } }
.arrive .foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .sound[aria-pressed="true"] .sound__bars i { animation: none; transform: scaleY(0.8); }
  .work__light, .frame::after, .phone::after { display: none; }
}

/* ============================================================= FOURTH PASS ==
   Live layout lines, corner marks, and the mark kept in view in the form. */

/* The five layout lines are drawn on the canvas once it is running, where they
   carry pulses and wake under the pointer. The CSS lines remain the fallback. */
html.is-circuit .lines__in { background: none; }

/* a pulse runs back along each feed line, toward the rail it came from */
.feed {
  background:
    linear-gradient(90deg, transparent, var(--bone), transparent) no-repeat -20% 0 / 9rem 100%,
    var(--rule-strong);
}
.sec.is-fed .feed { animation: feedrun 6.5s cubic-bezier(0.6, 0, 0.2, 1) 1.2s infinite; }
@keyframes feedrun { 0% { background-position: -20% 0, 0 0; } 38%, 100% { background-position: 120% 0, 0 0; } }
html.js .mlabel::before {
  background:
    linear-gradient(90deg, transparent, var(--bone), transparent) no-repeat -40% 0 / 5rem 100%,
    var(--rule);
}
html.js .sec.is-fed .mlabel::before, html.js .hero.is-fed .mlabel::before { animation: feedrun-s 5.5s cubic-bezier(0.6, 0, 0.2, 1) 1s infinite; }
@keyframes feedrun-s { 0% { background-position: -40% 0, 0 0; } 42%, 100% { background-position: 140% 0, 0 0; } }

/* registration marks: the corners of every frame are drawn at full strength */
.frame::before, .tform::before {
  --tk: 13px;
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(var(--bone), var(--bone)) 0 0 / var(--tk) 1px,
    linear-gradient(var(--bone), var(--bone)) 0 0 / 1px var(--tk),
    linear-gradient(var(--bone), var(--bone)) 100% 0 / var(--tk) 1px,
    linear-gradient(var(--bone), var(--bone)) 100% 0 / 1px var(--tk),
    linear-gradient(var(--bone), var(--bone)) 0 100% / var(--tk) 1px,
    linear-gradient(var(--bone), var(--bone)) 0 100% / 1px var(--tk),
    linear-gradient(var(--bone), var(--bone)) 100% 100% / var(--tk) 1px,
    linear-gradient(var(--bone), var(--bone)) 100% 100% / 1px var(--tk);
  background-repeat: no-repeat;
}
.tform { border-color: var(--rule-strong); }
.tform__bar { border-bottom-color: var(--rule-strong); }
.tform::before { --tk: 18px; }

/* ----------------------------------------------- the mark, kept in view --
   On a phone the large core scrolls away as the fields come up, so the form's
   own bar sticks under the header and carries a small one that fills the same way. */
.tform__name { margin-right: auto; }
.core--mini { display: none; }
@media (max-width: 859px) {
  .tform__bar {
    position: sticky; top: var(--bar-h); z-index: 3;
    height: 3.25rem; gap: 0.75rem; background: var(--navy);
    box-shadow: 0 1px 0 var(--rule-strong);
  }
  .core--mini {
    display: block; flex: none; width: 3rem; margin: 0; perspective: 320px;
    transition: --lvl 520ms steps(8, end);
  }
  .core--mini .core__body { display: block; animation: sway 7s ease-in-out infinite alternate; }
  .core--mini .core__glow { display: block; inset: -45%; }
  .tform[data-state="armed"] .core--mini .core__glow { opacity: 0.75; }
  .tform[data-state="sent"] .core--mini .core__glow { opacity: 1; }
  .tform[data-state="sent"] .core--mini .core__layer { --lit: #a8702a; }
  .tform[data-state="sent"] .core--mini .core__layer--front { --lit: var(--amber); }
}
@keyframes sway { from { transform: rotateX(10deg) rotateY(-34deg); } to { transform: rotateX(6deg) rotateY(26deg); } }

@media (prefers-reduced-motion: reduce) {
  .feed, html.js .mlabel::before { animation: none !important; }
  .core--mini .core__body { animation: none; transform: rotateX(8deg) rotateY(-26deg); }
}

/* ============================================================== FIFTH PASS ==
   A livelier opening: pulses through the hero, a wordmark that catches them,
   and the switch as a row of lit shutters. */

/* one canvas over the opening stage: the shutter edges and the pulses */
.hero__edge { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }

/* The wordmark is a mask, so anything painted inside it shows only in the
   letters. These spots follow the pulses as they cross it. */
.mark--hero { position: relative; }
.mark__glow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero__edge, .mark__glow { display: none; } }

/* ============================================================== SIXTH PASS ==
   On a phone the sentence is set larger and takes the top of the frame; the
   line under it sits at the foot, with the doorway between the two. */
@media (max-width: 699px) {
  .statement__line { font-size: clamp(2.4rem, 11.4vw, 3.5rem); max-width: none; }
  .statement__copy { padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px)); }
  .statement__foot { margin-top: auto; padding-top: 1.5rem; }
  .statement__scrim {
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, #0b131f 90%, transparent) 0%,
        color-mix(in srgb, #0b131f 80%, transparent) 46%,
        color-mix(in srgb, #0b131f 22%, transparent) 62%,
        transparent 70%),
      linear-gradient(to top, color-mix(in srgb, #0b131f 94%, transparent) 0, color-mix(in srgb, #0b131f 80%, transparent) 14%, transparent 30%);
  }
}

/* The sentence sits in front of the falling bits, which pass behind it. It is
   hidden until the paper has gone, so it never covers the hero. */
.is-fused .statement__copy { z-index: 7; }

/* ============================================================ SEVENTH PASS ==
   The hall melts into the page, the projects stand off the ground, and the
   process is one drawing that the scroll assembles. */

/* ---- seam: the hall has no bottom edge. Its film, scrim and falling bits fade
   out over a band that the script widens as the stage leaves, so the next
   section rises through it and the page field shows where the hall was. */
.statement__stage { --melt: 0%; }
html.is-fused .statement__stage { background: transparent; }
html.is-fused .statement__stage :is(video, .sc-stage__poster),
html.is-fused .statement__scrim,
html.is-fused .hero__edge {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--melt)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--melt)), transparent 100%);
}

/* ---- projects ---- */
.work { overflow-x: clip; }
.proj { position: relative; --k: 1; }
.proj--a { --tint: #e5261c; --ry: -9deg; --dx: 12px; }
.proj--b { --tint: #f28a2e; --ry: 9deg; --dx: -12px; }
.proj__media { perspective: 1500px; }
/* the colour of each client, as light on the ground behind its frame */
.proj__media::before {
  content: ""; position: absolute; inset: -16% -5%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 42%, transparent), color-mix(in srgb, var(--tint) 12%, transparent) 55%, transparent);
  opacity: calc(var(--k) * 0.9);
}
/* the frame comes up off the floor as it arrives and settles flat, on a slab of that colour */
.proj .frame {
  transform-origin: 50% 100%;
  transform: translate3d(0, calc((1 - var(--k)) * 70px), 0) rotateX(calc((1 - var(--k)) * 18deg)) rotateY(calc((1 - var(--k)) * var(--ry))) scale(calc(0.9 + 0.1 * var(--k)));
  box-shadow: calc(var(--k) * var(--dx)) calc(var(--k) * 12px) 0 0 var(--tint), 0 30px 60px -20px rgb(4 8 15 / 0.7);
  will-change: transform;
}
.proj .frame__bar { background: var(--bone); color: var(--navy); border-bottom-color: var(--bone); font-weight: 500; }
.proj .frame__state::before { background: var(--tint); animation: livedot 1.6s steps(2, end) infinite; }
@keyframes livedot { 50% { opacity: 0.25; } }
.proj .phone { scale: calc(0.82 + 0.18 * var(--k)); opacity: clamp(0, calc(var(--k) * 2.2 - 1.2), 1); border-color: var(--bone); }
/* a large outlined index behind each project */
.proj__no {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  font-family: var(--sc-font-display); font-weight: 900; font-stretch: 125%;
  font-size: clamp(8rem, 16vw, 16rem); line-height: 0.8; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--bone) 34%, transparent);
  translate: 0 calc((1 - var(--k)) * 60px);
}
.proj--a .proj__no { right: -0.04em; bottom: -0.12em; }
.proj--b .proj__no { left: -0.04em; top: -0.74em; }
/* the index takes the client colour while its project holds the screen (--f, set by the scroll) */
.proj { --f: 0; }
.proj__no { -webkit-text-stroke-color: color-mix(in srgb, var(--tint) calc(var(--f) * 100%), color-mix(in srgb, var(--bone) 34%, transparent)); }
@media (max-width: 859px) {
  .proj__no { font-size: 7.5rem; top: auto; }
  .proj--a .proj__no, .proj--b .proj__no { right: 0; top: -0.6em; bottom: auto; }
  .proj--a, .proj--b { --dx: 8px; }
  .proj .frame { box-shadow: calc(var(--k) * var(--dx)) calc(var(--k) * 8px) 0 0 var(--tint); }
}
@media (prefers-reduced-motion: reduce) { .proj .frame__state::before { animation: none; } }

/* ---- process ---- */
.pipe { position: relative; }
.machine { position: relative; border: 1px solid var(--rule-strong); background: color-mix(in srgb, var(--navy-2) 82%, transparent); overflow: hidden; }
.machine canvas { display: block; width: 100%; height: 100%; }
.machine__cap {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between;
  padding: 0.5rem 0.75rem; border-top: 1px solid var(--rule);
  font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
}
/* the step the scroll is on inverts: the page switch again, one row at a time */
.step {
  background: linear-gradient(var(--bone), var(--bone)) no-repeat 0 0 / 0% 100%;
  transition: background-size 460ms var(--sc-ease-out), color 160ms linear 140ms;
}
.step.is-now { background-size: 100% 100%; color: var(--navy); }
.step.is-now .body { color: var(--navy); }
.step.is-now::before { background: var(--amber); box-shadow: 0 0 0 3px var(--navy); }
@media (min-width: 860px) {
  .pipe { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; }
  .pipe .steps { grid-column: 1 / 8; grid-row: 1; }
  .machine {
    grid-column: 8 / 13; grid-row: 1; margin-left: 1.5rem;
    position: sticky; top: calc(var(--bar-h) + 1.5rem);
    height: min(calc(100vh - var(--bar-h) - 3rem), 34rem);
  }
  .step { min-height: 44vh; align-content: start; }
  .step__id { grid-column: 1 / 6; }
  .step__head { grid-column: 6 / 13; }
  .step .body { grid-column: 6 / 13; margin-top: 1rem; }
  .step__glyph { display: none; }
}
@media (max-width: 859px) {
  /* on a phone the drawing rides under the bar while the steps pass beneath it */
  .machine { position: sticky; top: var(--bar-h); z-index: 3; height: 31svh; min-height: 12.5rem; margin-bottom: 1.5rem; background: var(--navy-2); }
  .step { padding-right: 1rem; }
  .step.is-now .step__glyph { color: var(--navy); }
}

/* the work section has no line across its top: the hall runs straight into it */
#work > .feed { display: none; }

/* ============================================================= EIGHTH PASS ==
   The arrival: amber bits in the hall, the domain wordmark brought to the
   middle of the floor and lit, and Back to top as the last control on the page. */
.arrive__bits { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.arrive .foot .mark--domain {
  position: relative; transform-origin: 50% 50%; will-change: transform;
  /* the door lights the top of the letters as it nears (--ap, set by the scroll) */
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--amber) calc(var(--ap, 0) * 42%), var(--bone)) 0%, var(--bone) 60%);
}
.arrive .foot__row { flex-direction: column; justify-content: center; gap: 0.9rem; margin-top: clamp(1.25rem, 2.4vw, 2rem); }
.foot__row .totop {
  display: inline-flex; align-items: center; gap: 0.8rem;
  min-height: 3.25rem; padding: 0.9rem 1.6rem;
  border: 1px solid color-mix(in srgb, var(--amber) 75%, transparent);
  background: color-mix(in srgb, #0b131f 62%, transparent); color: var(--bone);
  font-family: var(--sc-font-mono); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 0 calc(10px + var(--ap, 0) * 32px) color-mix(in srgb, var(--amber) calc(12% + var(--ap, 0) * 48%), transparent);
  transition: background-color 160ms linear, color 160ms linear;
}
.totop__arrow {
  width: 0.6rem; height: 0.6rem; margin-top: 0.3rem;
  border-left: 2px solid var(--amber); border-top: 2px solid var(--amber);
  transform: rotate(45deg); animation: nudge 1.4s steps(4, end) infinite;
}
@keyframes nudge { 50% { translate: 0 -4px; } }
.foot__row .totop.is-hit { background: var(--amber); color: var(--navy); transition: none; }
.foot__row .totop.is-hit .totop__arrow { border-color: var(--navy); }
.foot__row .totop:focus-visible { background: var(--amber); color: var(--navy); }
.foot__row .totop:focus-visible .totop__arrow { border-color: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  .foot__row .totop:hover { background: var(--amber); color: var(--navy); }
  .foot__row .totop:hover .totop__arrow { border-color: var(--navy); animation-duration: 0.5s; }
}
@media (prefers-reduced-motion: reduce) { .totop__arrow { animation: none; } }
/* centre the last row on the screen, not on the column beside the rail */
.arrive .foot__row { margin-right: calc(-1 * var(--lane)); }

/* ============================================================== NINTH PASS ==
   The closing hall is one piece with the page: no top edge, and no gap under
   it when a phone browser hides its own bars. */
.arrive__stage { --rise: 14%; }
html.is-arr .arrive__stage { background: transparent; }
html.is-arr .arrive__stage :is(video, .sc-stage__poster),
html.is-arr .arrive__scrim,
html.is-arr .arrive__bits {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--rise));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--rise));
}
/* The stage is as tall as the screen ever gets (bars hidden). While the bars
   are showing, its foot is lifted by the difference so it stays in view. */
@supports (height: 100lvh) {
  .arrive .arrive__stage { height: 100lvh; }
  .arrive .foot { bottom: calc(100lvh - 100dvh); }
}
html.is-end { background: #0b131f; }

/* =============================================================== TENTH PASS ==
   The opening stage, like the closing one, is as tall as the screen ever gets
   (browser bars hidden), so the page never shows under it on a phone. While
   the bars are showing, the content inside is held up by the difference. */
@supports (height: 100lvh) {
  html.is-fused .hero__stage { height: 100lvh; }
  html.is-fused .hero__plate { padding-bottom: calc(100lvh - 100dvh); }
  html.is-fused .statement__copy { padding-bottom: calc(100lvh - 100dvh); }
  @media (max-width: 699px) {
    html.is-fused .statement__copy { padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px) + 100lvh - 100dvh); }
  }
}

/* ============================================================ ELEVENTH PASS ==
   Sizes the earlier passes did not cover. */

/* Tablets in portrait: the same arrangement as phones, with the sentence at
   the top of the hall and its supporting line at the foot. */
@media (min-width: 700px) and (max-width: 859px) and (min-height: 521px) {
  .statement__copy { padding-bottom: 2.5rem; }
  .statement__foot { margin-top: auto; padding-top: 1.5rem; }
  .statement__scrim {
    background:
      linear-gradient(to bottom, color-mix(in srgb, #0b131f 90%, transparent) 0%, color-mix(in srgb, #0b131f 78%, transparent) 36%, color-mix(in srgb, #0b131f 20%, transparent) 54%, transparent 64%),
      linear-gradient(to top, color-mix(in srgb, #0b131f 94%, transparent) 0, color-mix(in srgb, #0b131f 78%, transparent) 10%, transparent 24%);
  }
}
@supports (height: 100lvh) {
  @media (min-width: 700px) and (max-width: 859px) and (min-height: 521px) {
    html.is-fused .statement__copy { padding-bottom: calc(2.5rem + 100lvh - 100dvh); }
  }
}

/* A phone held sideways: very little height. The stages drop their minimum
   height so nothing is pinned below the fold, the sentence is set by the
   height of the screen, and the process drawing scrolls with the page. */
@media (max-height: 520px) and (orientation: landscape) {
  html.is-fused .hero__stage, html.is-arr .arrive__stage { min-height: 0; }
  .statement__line { font-size: clamp(1.5rem, 9.4vh, 3.2rem); max-width: 28ch; }
  .statement__copy { padding-top: calc(var(--bar-h) + 1rem); }
  .statement__foot { margin-top: 0.9rem; }
  .machine { position: relative; top: auto; height: 13rem; min-height: 0; }
  .step { min-height: 0; }
}