/* ══════════════════════════════════════════════════════════════════════
   Page components, loaded after styles.css.

   styles.css holds the shared system — colour, type, bands, the hero.
   This file holds the pieces specific to the two pages: the precedent
   beats, the five functions, the org and slate layers on the company
   page, and the scroll steps and worked examples on the product page.

   Placeholders are still drawn dashed where an image does not exist yet.
   ══════════════════════════════════════════════════════════════════════ */

/* A note under illustrative data, so invented examples read as examples. */
.symb__note {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  opacity: 0.75;
}

/* ══ section 3 — the thesis as scroll steps ══
   A sticky title on the left; the three moves of the argument pass it on
   the right, one lit at a time. The reader is walked through the claim
   rather than handed three paragraphs at once. */

.steps {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.steps__rail { position: sticky; top: 26vh; }

.steps__count {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 1.4rem;
}
.steps__count b { color: var(--amber); font-weight: 400; }

.step {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.22;
  transition: opacity 600ms var(--ease);
}
.step.is-live { opacity: 1; }

.step__n {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  color: var(--amber);
}
.step__sub {
  margin-top: 0.7rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  text-transform: uppercase;
  line-height: 1.05;
}
.step__body {
  margin-top: 0.9rem;
  max-width: 44ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--mute);
}
.step.is-live .step__body { color: var(--ink); }

/* ══ section 5 — context carried forward ══ */

/* The chain across the top: what turns into what. */
.chain {
  margin-top: clamp(2.4rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.chain__cell { background: var(--ground); padding: clamp(1rem, 2.4vw, 1.5rem); }
.chain__k {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hal);
}
.chain__v {
  margin-top: 0.6rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  line-height: 1.16;
}
.chain__eg {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--mute);
}

/* A worked example: foundation tab on the left, what comes out on the right. */
.worked {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  padding-top: clamp(2rem, 4vh, 3rem);
  border-top: 1px solid var(--line);
}

.worked__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.1rem;
  margin-bottom: clamp(1.4rem, 3vh, 2rem);
}
.worked__n {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  color: var(--mute);
}
.worked__t {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  text-transform: uppercase;
}
.worked__t i { font-style: normal; color: var(--hal); padding: 0 0.35em; }

.worked__split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}

/* Left — the foundation panel, drawn as the app's own furniture so the
   nine surfaces from the section above are recognisably the same object. */
.panel {
  background: var(--void);
  color: var(--ink-void);
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  min-height: 20rem;
}
.panel__tabs { border-right: 1px solid rgba(239, 236, 228, 0.13); padding: 0.7rem 0; }
.panel__tabs li {
  list-style: none;
  padding: 0.42rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6a6a76;
}
.panel__tabs li[aria-current] {
  color: var(--void);
  background: var(--amber);
  font-weight: 700;
}
.panel__body { padding: 1rem 1.1rem; }

.panel__crumb {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a6a76;
}
.panel__title {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.panel dl { margin-top: 0.9rem; display: grid; gap: 0.5rem; }
.panel dt {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a6a76;
}
.panel dd { font-size: 0.82rem; line-height: 1.45; color: #cfccc4; }

.chips { margin-top: 0.95rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chips span {
  padding: 0.16rem 0.42rem;
  border: 1px solid rgba(239, 236, 228, 0.22);
  font-family: var(--mono);
  font-size: 0.53rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8a5a0;
}
.chips span.hot { border-color: var(--amber); color: var(--amber); }

/* Right — what the system pulls back. */
.out__k {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 0.6rem;
}
.out__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.5rem;
}
.frame { position: relative; aspect-ratio: 1.6 / 1; overflow: hidden; background: var(--void-raised); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.3rem 0.4rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #efece4;
}

/* Dashed placeholder — anywhere an image would go that does not exist yet. */
.ph {
  aspect-ratio: 1.6 / 1;
  display: grid;
  place-items: center;
  padding: 0.6rem;
  text-align: center;
  border: 1px dashed var(--line);
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 7px,
    rgba(20, 20, 26, 0.045) 7px, rgba(20, 20, 26, 0.045) 14px);
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.ph--tall { aspect-ratio: 3 / 4; }

/* The downstream strip that closes the section. */
.downstream {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.downstream__cell { background: var(--ground); padding: clamp(0.9rem, 2.2vw, 1.4rem); }
.downstream__cell[data-dim] { opacity: 0.5; }
.downstream__n {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: var(--mute);
}
.downstream__t {
  margin-top: 0.45rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  text-transform: uppercase;
}
.downstream__v { margin-top: 0.4rem; font-size: 0.82rem; line-height: 1.45; color: var(--mute); }

@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .steps__rail { position: static; }
  .step { min-height: 0; padding-block: 1.4rem; opacity: 1; }
  .worked__split { grid-template-columns: minmax(0, 1fr); }
  .chain, .downstream { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { grid-template-columns: 7rem minmax(0, 1fr); min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .step { opacity: 1; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   COMPANY PAGE components (sketch.html).
   The pre-production page above keeps its own; these are new.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the precedent ledger ──
   Three industries that already got their system of record, and the row
   that is still empty. The empty row is the argument. */
.ledger {
  margin-top: clamp(2.4rem, 5vh, 3.5rem);
  border-top: 1px solid var(--line);
}
.ledger__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(0.7rem, 2.2vw, 1.8rem);
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.ledger__yr { font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.14em; color: var(--mute); }
.ledger__who {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.ledger__what { font-size: 0.93rem; line-height: 1.45; color: var(--mute); }
.ledger__then { font-size: 0.93rem; line-height: 1.45; color: var(--mute); }

.ledger__row[data-open] { background: rgba(233, 161, 59, 0.09); }
.ledger__row[data-open] .ledger__yr,
.ledger__row[data-open] .ledger__who { color: var(--hal); }
.ledger__row[data-open] .ledger__what,
.ledger__row[data-open] .ledger__then { color: var(--ink); }

/* ── the five functions ── */
.flow {
  margin-top: clamp(2.6rem, 6vh, 4rem);
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.fn {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 9rem);
  gap: clamp(0.7rem, 2.2vw, 1.6rem);
  align-items: baseline;
  padding: clamp(1.05rem, 2.4vh, 1.5rem) clamp(0.4rem, 1.6vw, 1rem);
  background: var(--ground);
  transition: background 300ms var(--ease);
}
.fn:hover { background: var(--bone-warm); }
.fn__n { font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.14em; color: var(--mute); }
.fn__name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.3rem); text-transform: uppercase; line-height: 1.08;
}
.fn__holds { font-size: 0.92rem; line-height: 1.5; color: var(--mute); }
.fn__passes {
  justify-self: end; text-align: right;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--hal);
}
.fn__passes::before { content: "passes "; color: var(--mute); }
.fn[data-ours] { background: rgba(233, 161, 59, 0.11); }
.fn[data-ours] .fn__name { color: var(--hal); }

/* ── layer blocks ── */
.layer { margin-top: clamp(3rem, 7vh, 4.5rem); padding-top: clamp(2rem, 4vh, 3rem); border-top: 1px solid var(--line); }
.layer__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.1rem; }
.layer__n { font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.2em; color: var(--mute); }
.layer__t {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem); text-transform: uppercase;
}
.layer__lede { max-width: 62ch; margin-top: 0.9rem; font-size: 1rem; line-height: 1.6; color: var(--mute); }
.layer__stage { margin-top: clamp(1.6rem, 3.5vh, 2.4rem); }

/* ── layer 01 · the organisation ── */
.org { display: grid; gap: 0.55rem; }
.org__tier { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
.org__node {
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line);
  background: var(--ground);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
}
.org__node b { display: block; font-weight: 700; color: var(--ink); }
.org__node span { color: var(--mute); }
.org__node[data-lead] { border-color: var(--hal); }
.org__node[data-lead] b { color: var(--hal); }
.org__node[data-contract] { border-style: dashed; }
.org__rule { height: 1px; background: var(--line); margin: 0.15rem 0; }
.org__note {
  margin-top: 1rem; text-align: center;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mute);
}

/* ── layer 02 · slate ↔ demand ──
   Motion personality is Premium, matching the rest of the site: long
   durations, no overshoot, nothing springy. Three layers are running —
   the cluster breathes (ambient), a signal crosses the gap (primary), and
   the matched project lifts and surfaces its line (secondary). Only one
   signal is ever in flight, which keeps it under the one-third rule. */
.symb {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
}
.symb__k {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 0.8rem;
}

.cluster { position: relative; min-height: 22rem; }
.chip {
  position: absolute;
  left: var(--cx); top: var(--cy);
  width: max-content;
  max-width: 12rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  background: var(--ground);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.45;
  opacity: 0.62;
  transition: opacity 420ms var(--ease), border-color 420ms var(--ease),
              transform 420ms var(--ease), box-shadow 420ms var(--ease);
  animation: drift var(--dur, 12s) ease-in-out var(--delay, 0s) infinite;
}
.chip b { display: block; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; }
.chip span { color: var(--mute); }
.chip em {
  display: block; font-style: normal; margin-top: 0.3rem;
  color: var(--hal); opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 420ms var(--ease) 180ms, max-height 420ms var(--ease) 180ms;
}
.chip[data-match] {
  opacity: 1;
  border-color: var(--hal);
  transform: scale(1.035);
  box-shadow: 0 0.6rem 2rem rgba(214, 47, 22, 0.16);
  animation-play-state: paused;
}
.chip[data-match] em { opacity: 1; max-height: 2rem; }

/* Ambient: the slate is never quite still. Long, sine-like, out of phase. */
@keyframes drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: var(--dx, 5px) var(--dy, -7px); }
}

.signals { display: grid; gap: 0.55rem; align-content: start; }
.signal {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  background: var(--ground);
  opacity: 0.5;
  transition: opacity 420ms var(--ease), border-color 420ms var(--ease);
}
.signal[data-active] { opacity: 1; border-color: var(--hal); }
.signal__who {
  font-family: var(--display); font-weight: 600; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.signal[data-active] .signal__who { color: var(--hal); }
.signal__brief {
  margin-top: 0.3rem;
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1.5; color: var(--mute);
}

/* Primary: the signal itself, crossing the gap on an arc. */
.pulse {
  position: absolute;
  left: 0; top: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--hal);
  box-shadow: 0 0 0 4px rgba(214, 47, 22, 0.18);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.pulse.is-travelling { animation: travel 850ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes travel {
  0%   { transform: translate(var(--x1), var(--y1)); opacity: 0; }
  14%  { opacity: 1; }
  50%  { transform: translate(calc((var(--x1) + var(--x2)) / 2),
                             calc((var(--y1) + var(--y2)) / 2 - 34px)); opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate(var(--x2), var(--y2)); opacity: 0; }
}

.symb__read {
  grid-column: 1 / -1;
  margin-top: 1rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--mute);
}
.symb__read b { color: var(--hal); font-weight: 400; }

/* ── layer 03 · handoff to the product page ── */
.handoff {
  display: block;
  margin-top: clamp(1.6rem, 3.5vh, 2.4rem);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--line);
  background: var(--ground);
  transition: border-color 300ms var(--ease), background 300ms var(--ease);
}
.handoff:hover, .handoff:focus-visible { border-color: var(--hal); background: var(--bone-warm); }
.handoff__k { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hal); }
.handoff__t {
  margin-top: 0.5rem;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.05rem, 2.1vw, 1.35rem); text-transform: uppercase;
}
.handoff__v { margin-top: 0.5rem; max-width: 58ch; font-size: 0.93rem; line-height: 1.5; color: var(--mute); }

@media (max-width: 900px) {
  .ledger__row { grid-template-columns: 4.5rem 1fr; row-gap: 0.3rem; }
  .ledger__what, .ledger__then { grid-column: 2; }
  .fn { grid-template-columns: 2.4rem 1fr; row-gap: 0.3rem; }
  .fn__holds, .fn__passes { grid-column: 2; justify-self: start; text-align: left; }
  .symb { grid-template-columns: minmax(0, 1fr); }
  .cluster { min-height: 19rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chip { animation: none; }
  .pulse, .pulse.is-travelling { animation: none; opacity: 0; }
}

/* The product hero's title is two words joined by an ampersand, so it needs a
   slightly wider measure than the company hero or it breaks as "& PRE-". */
.hero--product h1 { max-width: 14ch; }

/* ══ the precedent section — one beat per screen ══
   The section drops the band's own vertical padding: each beat is a full
   viewport and centres its own content, so the reader gets one idea at a
   time rather than a wall. */
.precedent { padding-block: 0; }

.beat {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-block: clamp(5rem, 12vh, 8rem);
}
.beat .prose--flush { margin-top: 0; }
.beat .pull--solo { margin-block: 0; max-width: 20ch; }

/* ══ the ambient stills field ══
   The hero's back layer. Every frame is replaced by another that shares one
   of its tags, so the retrieval the product runs on is quietly running behind
   the company's own headline.

   This is the ambient layer and nothing more: no interaction, no movement but
   opacity, and a long crossfade. The corridor and the type sit above it, so it
   is held well down — present enough to read as film, never enough to compete.
   Only a few cells are ever mid-swap, which keeps it under the one-third rule
   and stops the wall turning over all at once. */
.hero .ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  gap: 2px;
  background: var(--void);
}

.ambient__cell { position: relative; overflow: hidden; background: var(--void-raised); }
.ambient__cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Sine-like at both ends, so a swap has no perceptible start or finish. */
  transition: opacity 1100ms cubic-bezier(0.37, 0, 0.63, 1);
}
.ambient__cell img.is-shown { opacity: 1; }

/* Sits over the stills, under the type.

   The falloff is deliberately uneven: it stays heavy through the middle,
   where the headline lands, and lifts toward the edges and corners, where
   nothing has to be read. That way the frames are legible as film without
   the type ever having to fight them. */
.hero .ambient__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 66% 56% at 50% 44%,
      rgba(8, 8, 11, 0.88) 0%, rgba(8, 8, 11, 0.78) 44%, rgba(8, 8, 11, 0.52) 74%, rgba(8, 8, 11, 0.4) 100%),
    linear-gradient(to bottom,
      rgba(8, 8, 11, 0.86) 0%, rgba(8, 8, 11, 0.36) 18%,
      rgba(8, 8, 11, 0.44) 78%, rgba(8, 8, 11, 0.93) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .ambient__cell img { transition: none; }
}