/* The story spine: heroes (home + inner), the convergence drawing, the thread (beats, nodes,
   lead-in, proof end), section heads, the statement and the closing CTA.
   Static styles only; every animation lives in motion.css. Rule order matters where noted. */

/* ---------- hero ---------- */
.hero { padding: var(--s-10) 0 var(--s-9); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr); gap: var(--s-7); align-items: center; }
.hero .lede { margin-top: var(--s-6); }
.hero-copy { position: relative; }
.lead-in { display: none; }
@media (min-width: 900px) {
  /* from under the CTAs to the first node: hero padding-bottom + beat padding-top + node offset */
  .lead-in { display: block; position: absolute; left: 5px; top: calc(100% + var(--s-5)); width: 2px;
             height: calc(var(--s-9) * 2 - var(--s-5) + 8px); background: var(--thread); transform-origin: top; }
}

/* the convergence: three inputs → one line → proof (home, consulting) or → product tiles (studio) */
.converge { width: 100%; height: auto; display: block; overflow: visible; }
.converge .cv-scatter circle { fill: var(--faint); }
.converge .cv-in { fill: none; stroke: var(--line-strong); stroke-width: 5; stroke-linecap: round; }
.converge .cv-out { fill: none; stroke: var(--text); stroke-width: 5; stroke-linecap: round; }
.converge .cv-proof { fill: var(--accent); }
.converge .cv-halo { fill: none; stroke: var(--accent); opacity: .18; }
.converge .cv-proof, .converge .cv-halo, .converge .tile { transform-box: fill-box; transform-origin: center; }
.converge .tile.live { fill: var(--accent); }
.converge .tile.next { fill: none; stroke: var(--thread); stroke-width: 2; stroke-dasharray: 5 5; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .converge-wrap { max-width: 440px; }
}
@media (max-width: 620px) {
  .hero { padding: var(--s-8) 0 var(--s-7); }
}

/* inner heroes (studio, consulting): declared after the mobile `.hero` padding, which they
   therefore override at every width (kept from the approved design) */
.hero-inner { padding: var(--s-10) 0 var(--s-9); }
.hero-inner .display { max-width: none; }
@media (min-width: 900px) {
  .hero-inner .hero-grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, .55fr); }
  /* the visual grows left into the space beside the lede/CTAs, never under the headline */
  .hero-inner .converge-wrap { align-self: end; width: 160%; margin-left: -60%; }
}
@media (max-width: 900px) { .hero-inner .converge-wrap { display: none; } }

/* ---------- the thread ---------- */
.beat { position: relative; padding: var(--s-9) 0; }
.beat .wrap { position: relative; }
.head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); }
.head h2 { max-width: 24ch; }
.node { display: none; }

@media (min-width: 900px) {
  .beat .wrap { padding-left: calc(var(--pad) + var(--rail)); }
  /* rail segment: full height of the beat, so consecutive beats join into one line */
  .beat .wrap::before {
    content: ""; position: absolute; left: calc(var(--pad) + 5px); top: calc(-1 * var(--s-9)); bottom: calc(-1 * var(--s-9));
    width: 2px; background: var(--thread); transform-origin: top;
  }
  .beat-first .wrap::before { top: 8px; }
  .beat-last .wrap::before { bottom: auto; top: calc(-1 * var(--s-9)); height: calc(var(--s-9) + 14px); background: linear-gradient(var(--thread), var(--accent)); }
  .node {
    display: block; position: absolute; left: var(--pad); top: 8px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--bg); box-shadow: inset 0 0 0 2px var(--thread);
    transition: box-shadow 200ms ease, background-color 200ms ease, transform 300ms var(--ease-out);
  }
  .beat.is-in .node { box-shadow: inset 0 0 0 2px var(--text); }
  .node-proof { top: 14px; }
  .beat.is-in .node-proof { background: var(--accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 18%, transparent); }
}

/* the closing beat; its padding-bottom must precede the mobile `.beat` rule below (which wins on phones) */
.beat-last { padding-bottom: var(--s-10); }
.beat-last .lede { margin-top: var(--s-3); }
.cta-title { font-size: var(--t-h1); letter-spacing: -0.025em; }

@media (max-width: 620px) {
  .beat { padding: var(--s-8) 0; }
}

/* the statement keeps its generous padding at every width, so it comes after the mobile rule */
.statement { padding: var(--s-10) 0; }
.words { font-size: var(--t-h1); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; max-width: 22ch; }