/* Approach — one line draws itself, eight steps hang from a centre strand, then the line fans into outcomes */

/* ---------- Hero: 3D only, the line drawing itself over a lime glow ---------- */
.approach-hero .hero__glow {
  background:
    radial-gradient(42% 52% at 66% 44%, rgba(212, 250, 131, .16), transparent 70%),
    radial-gradient(60% 55% at 10% 105%, rgba(31, 107, 95, .5), transparent 72%),
    var(--deep);
}
.approach-hero h1 { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.approach-hero__lead { max-width: 34ch; }

/* ---------- Lifecycle: a centre strand, eight knots, a lime fill scrubbed by the page ---------- */
.lifecycle { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(4rem, 7vw, 6rem); }
.lifecycle__head { margin-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.lifecycle__aside { font-size: var(--fs-lead); line-height: 1.45; max-width: 30ch; }

.cycle { --k: 44px; --ov: 2.5rem; --mid: 6rem; position: relative; }
.cycle__strand {
  position: absolute; left: 50%; top: calc(var(--k) / 2); bottom: 0;
  width: 2px; translate: -50% 0;
}
/* the resting strand, fading out past the last step */
.cycle__strand::before {
  content: ""; position: absolute; left: .5px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(var(--rule) 88%, transparent);
}
.cycle__fill {
  position: absolute; left: 0; top: 0; width: 2px; height: 100%;
  background: var(--lime); box-shadow: 0 0 12px rgba(212, 250, 131, .55);
  transform: scaleY(var(--fill, 0)); transform-origin: top;
}
.cycle__bead {
  position: absolute; left: 50%; top: 0; width: 10px; height: 10px; border-radius: 50%;
  translate: -50% -50%;
  background: var(--lime-100);
  box-shadow: 0 0 0 5px rgba(212, 250, 131, .16), 0 0 18px rgba(212, 250, 131, .85);
  transform: translateY(var(--fill-px, 0px));
  opacity: var(--bead, 0); transition: opacity .3s;
}

.stage {
  --dir: -1;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--mid) minmax(0, 1fr);
  min-height: 9.5rem; padding-bottom: 1.5rem;
}
.stage:nth-child(even) { --dir: 1; }
.stage + .stage { margin-top: calc(-1 * var(--ov)); }

.cycle .stage__knot { --size: var(--k); position: absolute; left: 50%; top: 0; translate: -50% 0; z-index: 2; }
.cycle .stage__knot::before { background: var(--deep); transition: transform .5s var(--ease-snap), background-color .45s, box-shadow .45s; }
.cycle .stage__knot .knot__n { font-size: .875rem; font-stretch: 82%; color: var(--mist); transition: color .45s; }
.cycle .stage.is-lit .stage__knot::before { background: var(--lime); box-shadow: 0 0 0 6px rgba(212, 250, 131, .12), 0 0 22px rgba(212, 250, 131, .5); }
.cycle .stage.is-lit .stage__knot .knot__n { color: var(--deep); }

.stage__body { position: relative; grid-row: 1; max-width: 27rem; padding-top: .2rem; transition: transform .8s var(--ease-strand); }
.stage:nth-child(odd) .stage__body { grid-column: 1; justify-self: end; text-align: right; }
.stage:nth-child(even) .stage__body { grid-column: 3; justify-self: start; }
/* the short thread from each knot to its words */
.stage__body::after {
  content: ""; position: absolute; top: calc(var(--k) / 2); width: .75rem; height: 1px;
  background: var(--rule); transition: background-color .45s;
}
.stage:nth-child(odd) .stage__body::after { right: -1.25rem; }
.stage:nth-child(even) .stage__body::after { left: -1.25rem; }
.stage.is-lit .stage__body::after { background: var(--lime); }
.stage h3 { font-size: clamp(1.5rem, 2.3vw, 2.25rem); letter-spacing: -.02em; color: var(--mist-70); transition: color .5s; }
.stage.is-lit h3 { color: var(--mist); }
.stage p { margin-top: .5rem; color: var(--mist-70); max-width: 30ch; }
.stage:nth-child(odd) p { margin-left: auto; }
html.motion .stage:not(.is-lit) .stage__body { transform: translateX(calc(var(--dir) * 14px)); }

/* the "+" between knots: one step adds to the next */
.stage__plus {
  position: absolute; z-index: 1; left: 50%;
  top: calc(var(--k) / 2 + (100% - var(--ov)) / 2);
  translate: -50% -50%;
  width: 1.5rem; padding-block: .2rem; text-align: center;
  font: 300 1.25rem/1 var(--f-display);
  color: var(--mist-70); background: var(--deep);
  transition: color .45s, transform .6s var(--ease-snap);
}
.stage.is-through .stage__plus { color: var(--lime); transform: rotate(90deg); }

@media (max-width: 899px) {
  /* on small screens the page spine itself becomes the timeline */
  .cycle { --k: 36px; --ov: -2.25rem; }
  .cycle__strand { left: calc(-1 * var(--rail) / 2); }
  .stage { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: 0; padding-left: calc(var(--k) / 2 - var(--rail) / 2 + 1rem); }
  .cycle .stage__knot { left: calc(-1 * var(--rail) / 2); }
  .stage:nth-child(n) .stage__body { grid-column: 1; justify-self: start; text-align: left; }
  .stage:nth-child(n) .stage__body::after { display: none; }
  .stage:nth-child(odd) p { margin-left: 0; }
  .stage { --dir: 1; }
  .stage h3 { font-size: clamp(1.375rem, 5.6vw, 1.75rem); }
  .stage__body { padding-top: calc((var(--k) - 1.6rem) / 2); }
  .stage__plus { left: calc(-1 * var(--rail) / 2); font-size: 1.05rem; width: 1.1rem; }
}

/* ---------- Outcomes: one strand splits into four ---------- */
.outcomes__head h2 { max-width: 14ch; }
.outcomes__fan { margin-top: clamp(2.5rem, 5vw, 4rem); }
.fan { width: 100%; height: auto; overflow: visible; }
.fan path { fill: none; stroke: var(--green-600); stroke-width: 1.5; stroke-linecap: round; }
.fan--narrow { display: none; }
.outcomes__fan::before { /* the knot where the strand splits */
  content: ""; display: block; width: 11px; height: 11px; margin: 0 0 -6px -5px; border-radius: 50%;
  background: var(--forest); box-shadow: 0 0 0 4px var(--mist-2), 0 0 0 5px var(--green-600);
  position: relative; z-index: 1;
}

.outcomes__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.outcome {
  position: relative;
  padding: 1.5rem clamp(1rem, 2vw, 2rem) 0 clamp(1rem, 1.6vw, 1.5rem);
  border-left: 1.5px solid var(--green-600);
}
.outcome::before { /* where each branch lands */
  content: ""; position: absolute; left: -4.75px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--forest);
}
.outcome h3 { font-size: clamp(1.5rem, 2.6vw, 2.5rem); letter-spacing: -.025em; color: var(--forest); }
.outcome p { margin-top: .75rem; color: var(--ink-2); max-width: 22ch; }
.outcomes__more { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* columns arrive as their branch lands */
html.motion .outcome h3, html.motion .outcome p, html.motion .outcome::before { transition: transform .8s var(--ease-strand), opacity .6s; transition-delay: calc(var(--n, 0) * 120ms + .55s); }
html.motion .outcomes__fan:not(.is-in) ~ .outcomes__list .outcome h3,
html.motion .outcomes__fan:not(.is-in) ~ .outcomes__list .outcome p { transform: translateY(-10px); opacity: 0; }
html.motion .outcomes__fan:not(.is-in) ~ .outcomes__list .outcome::before { transform: scale(0); }
html.motion .outcomes__fan .fan path { transition-delay: calc(var(--i, 0) * 110ms); }
html.motion .outcomes__fan::before { transition: transform .5s var(--ease-snap); }
html.motion .outcomes__fan:not(.is-in)::before { transform: scale(0); }
.outcome:nth-child(2) { --n: 1; }
.outcome:nth-child(3) { --n: 2; }
.outcome:nth-child(4) { --n: 3; }

@media (max-width: 899px) {
  .fan--wide { display: none; }
  .fan--narrow { display: block; }
  .outcomes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outcome { padding: 1.25rem .5rem 2.25rem 1rem; }
  .outcome p { font-size: var(--fs-small); }
  .outcome:nth-child(n + 3)::before { display: none; }
  .outcome:nth-child(3) { --n: 0; }
  .outcome:nth-child(4) { --n: 1; }
  .outcome h3 { font-size: clamp(1.375rem, 6vw, 1.75rem); }
}

/* the spine runs the full height of the hero */
.approach-hero .hero__inner.spined::before { top: -100svh; }
/* the hero hands over to the lifecycle on the same ground: no seam */
.approach-hero .hero__glow::after { content: ""; position: absolute; inset: auto 0 0 0; height: 28%; background: linear-gradient(rgba(10, 38, 33, 0), var(--deep)); }

/* the planning close-up needs more presence than the generic soft layer gives */
.approach-hero .hero__media--under { opacity: .82; }