/* Initiatives — strands rise and build, the first step, a spool of four programmes, thirteen focus areas */

/* ---------- Hero: 3D only, strands rising bottom to top ---------- */
.initiatives-hero .hero__glow {
  background:
    radial-gradient(38% 60% at 72% 100%, rgba(212, 250, 131, .17), transparent 70%),
    radial-gradient(50% 50% at 15% 0%, rgba(31, 107, 95, .4), transparent 72%),
    var(--deep);
}
.initiatives-hero h1 { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.initiatives-hero__lead { max-width: 36ch; }

/* ---------- First step: copy, and a panel that bleeds off the right edge ---------- */
.first__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: center; }
.first__copy { grid-column: 1 / span 6; }
.first__copy h2 { font-size: clamp(1.875rem, 3.8vw, 3.5rem); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.first__lead { max-width: 30ch; }
.first__body { margin-top: 1.25rem; max-width: 40ch; }
.first__panel { grid-column: 8 / -1; margin-right: calc(-1 * var(--margin)); box-shadow: var(--shadow-float); }
.first__panel .panel__media { aspect-ratio: 1200 / 912; }
@media (max-width: 899px) {
  .first__grid { grid-template-columns: minmax(0, 1fr); }
  .first__copy, .first__panel { grid-column: 1; }
}

/* ---------- Offer: four stations hang from one strand, climbing as they go ---------- */
.offer h2 { max-width: 14ch; }
.spool { position: relative; margin-top: clamp(3rem, 6vw, 5rem); }
.spool__strand {
  position: absolute; z-index: 0; top: 14px; left: calc(-1 * var(--rail) / 2); right: 0; height: 1.5px;
  background: var(--green-600);
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
  transform-origin: left center;
}
html.motion .spool__strand[data-draw] { transition-duration: 1.2s; }
.spool__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); }
.station { --drop: 1.5rem; --n: 0; position: relative; padding-top: calc(28px + var(--drop)); }
.station:nth-child(1) { --drop: 9rem; }
.station:nth-child(2) { --drop: 6.5rem; --n: 1; }
.station:nth-child(3) { --drop: 4rem; --n: 2; }
.station:nth-child(4) { --drop: 1.5rem; --n: 3; }
.station__knot { position: absolute; left: 0; top: 0; }
.station__knot::before { background: radial-gradient(circle, var(--knot) 0 3px, var(--mist-2) 3.5px); }
.station__drop {
  position: absolute; left: 13.25px; top: 28px; width: 1.5px; height: calc(var(--drop) - .6rem);
  background: var(--green-600); transform-origin: top;
}
.station__label {
  font-family: var(--f-display); font-weight: 700; font-stretch: 78%;
  font-size: var(--fs-label); letter-spacing: .08em; color: var(--green-600);
}
.station__n { color: var(--forest); font-weight: 800; font-variant-numeric: tabular-nums; }
.station h3 { margin-top: .8rem; font-size: clamp(1.5rem, 2.1vw, 2.125rem); letter-spacing: -.022em; color: var(--forest); }
.station__text { margin-top: .8rem; color: var(--ink-2); max-width: 30ch; }

/* hang: the thread drops, then the words are let down on it */
html.motion .station .station__drop { transition: transform .8s var(--ease-strand); transition-delay: calc(var(--n) * 110ms + .2s); }
html.motion .station:not(.is-in) .station__drop { transform: scaleY(0); }
html.motion .station > p, html.motion .station > h3 { transition: transform .8s var(--ease-strand), opacity .5s; transition-delay: calc(var(--n) * 110ms + .5s); }
html.motion .station > h3 { transition-delay: calc(var(--n) * 110ms + .56s); }
html.motion .station > .station__text { transition-delay: calc(var(--n) * 110ms + .62s); }
html.motion .station:not(.is-in) > p, html.motion .station:not(.is-in) > h3 { transform: translateY(-14px); opacity: 0; }
html.motion .station[data-knot] .knot::before { transition-delay: calc(var(--n) * 110ms); }

@media (max-width: 899px) {
  /* vertical: the page spine carries the four stations */
  .spool__strand { top: 0; bottom: 0; left: calc(-1 * var(--rail) / 2 - .75px); right: auto; width: 1.5px; height: auto; transform-origin: center top; -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent); }
  html.motion .spool__strand[data-draw]:not(.is-in) { transform: scaleY(0); }
  .spool__list { grid-template-columns: minmax(0, 1fr); row-gap: 2.75rem; }
  .station:nth-child(n) { --drop: 0rem; padding: 0 0 0 calc(14px - var(--rail) / 2 + 1.25rem); }
  .station__knot { left: calc(-1 * var(--rail) / 2 - 14px); top: -5px; }
  .station__drop { left: calc(14px - var(--rail) / 2); top: 9px; width: .85rem; height: 1.5px; transform-origin: left center; }
  html.motion .station:not(.is-in) .station__drop { transform: scaleX(0); }
}

/* ---------- Focus areas: thirteen words, each standing on a lime tick ---------- */
.focus__aside { font-size: var(--fs-lead); line-height: 1.45; max-width: 30ch; }
.focus__list {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: clamp(1.4rem, 2.8vw, 2.5rem) clamp(1.75rem, 3.6vw, 3.25rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  max-width: 76rem;
}
.focus__list li {
  --o: 0;
  position: relative; padding-bottom: .75rem;
  font-family: var(--f-display); font-size: clamp(1.75rem, 4.2vw, 3.875rem); line-height: 1.05;
  font-weight: 400; font-stretch: 88%; letter-spacing: -.03em;
  color: var(--mist);
}
.focus__list li::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 1.75rem; height: 2px;
  background: var(--lime); box-shadow: 0 0 10px rgba(212, 250, 131, .5);
  transform-origin: left center;
}
.focus__list li.is-key { color: var(--lime); font-weight: 560; }
.focus__list li.is-key::after { width: 3rem; }
.focus__w { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.focus__w > span { display: block; transform-origin: 0 100%; }

/* a fixed, non-linear order: the field fills in scattered, the three lime words land last */
.focus__list li:nth-child(1) { --o: 4; }
.focus__list li:nth-child(2) { --o: 0; }
.focus__list li:nth-child(3) { --o: 7; }
.focus__list li:nth-child(4) { --o: 2; }
.focus__list li:nth-child(5) { --o: 9; }
.focus__list li:nth-child(6) { --o: 5; }
.focus__list li:nth-child(7) { --o: 1; }
.focus__list li:nth-child(8) { --o: 8; }
.focus__list li:nth-child(9) { --o: 3; }
.focus__list li:nth-child(10) { --o: 6; }
.focus__list li:nth-child(11) { --o: 11; }
.focus__list li:nth-child(12) { --o: 10; }
.focus__list li:nth-child(13) { --o: 12; }
html.motion .focus__list li::after { transition: transform .55s var(--ease-strand); transition-delay: calc(var(--o) * 85ms); }
html.motion .focus__list .focus__w > span { transition: transform 1s var(--ease-strand); transition-delay: calc(var(--o) * 85ms + 140ms); }
html.motion .focus__list:not(.is-in) li::after { transform: scaleX(0); }
html.motion .focus__list:not(.is-in) .focus__w > span { transform: translateY(115%) skewY(4deg); }
.focus__more { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* the spine runs the full height of the hero */
.initiatives-hero .hero__inner.spined::before { top: -100svh; }

/* Focus areas: flowing technology lines, tinted lime and screened faintly behind the words */
.focus { isolation: isolate; }
.focus > .wrap { position: relative; z-index: 1; }
.focus-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .32; mix-blend-mode: screen;
  background: #000; /* black screens to nothing, so without video (reduced motion) the layer is invisible */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.focus-lines video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.focus-lines::after { content: ""; position: absolute; inset: 0; background: var(--lime); mix-blend-mode: multiply; }
.focus__toggle { position: absolute; right: var(--margin); top: 1.25rem; z-index: 2; }