/* What we do — eight disciplines run in parallel: sticky head + strand rows, a night band, the collaborate close */

/* ---------- Verticals: sticky head, eight rows each hung from its own strand ---------- */
.verticals__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: start; }
.verticals__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 2.5rem); }

/* eight parallel threads: each lights as its discipline is read */
.verticals__threads { display: grid; gap: 7px; width: min(13rem, 100%); margin-top: 2.75rem; }
.verticals__threads span { position: relative; display: block; height: 1px; background: var(--rule); }
.verticals__threads span::after {
  content: ""; position: absolute; left: 0; right: 0; top: -.5px; height: 2px;
  background: var(--green-600); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-strand);
}
.verticals__threads span.is-lit::after { transform: scaleX(1); }
.verticals__threads span:nth-child(2) { width: 82%; }
.verticals__threads span:nth-child(3) { width: 94%; }
.verticals__threads span:nth-child(4) { width: 70%; }
.verticals__threads span:nth-child(5) { width: 88%; }
.verticals__threads span:nth-child(6) { width: 76%; }
.verticals__threads span:nth-child(7) { width: 96%; }
.verticals__threads span:nth-child(8) { width: 62%; }

.verticals__list { grid-column: 7 / span 6; border-bottom: 1px solid var(--rule); }
.vrow {
  position: relative;
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: clamp(1rem, 2vw, 2rem); row-gap: .7rem;
  padding-block: clamp(1.6rem, 2.8vw, 2.4rem);
}
.vrow__strand { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: left center; }
.vrow__strand::after {
  content: ""; position: absolute; left: 0; right: 0; top: -.5px; height: 2px;
  background: var(--green-600); transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease-strand);
}
.vrow.is-lit .vrow__strand::after { transform: scaleX(1); }
html.motion .vrow__strand { transition: transform .9s var(--ease-strand); }

.vrow__label { grid-column: 1; grid-row: 1 / span 2; margin-top: .15rem; }
.vrow__label .knot { gap: .6rem; }
.vrow__label .knot__lead {
  transform: none;
  display: inline-flex; align-items: center; gap: .3em;
  font-family: var(--f-display); font-weight: 600; font-stretch: 80%; font-size: var(--fs-label); letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--green-600);
}
.vrow__label .knot__lead .slash { display: inline-block; font-weight: 300; transform: scaleY(1.5) skewX(-8deg); color: var(--forest); }
.vrow h3 { grid-column: 2; font-size: clamp(1.375rem, 2vw, 2rem); letter-spacing: -.018em; max-width: 22ch; }
.vrow__desc { grid-column: 2; color: var(--ink-2); max-width: 46ch; }
.vrow:hover .knot::before { background: var(--forest); }
.vrow:hover .knot__n { color: var(--lime); }
.vrow .knot__n { position: relative; z-index: 1; transition: color .3s, opacity .4s .25s; }

/* the strand draws, the knot snaps, the words are tugged in from the spine */
html.motion .vrow h3, html.motion .vrow .vrow__desc { transition: transform .8s var(--ease-strand), opacity .6s ease; }
html.motion .vrow h3 { transition-delay: .18s; }
html.motion .vrow .vrow__desc { transition-delay: .3s; }
html.motion .vrow:not(.is-in) h3, html.motion .vrow:not(.is-in) .vrow__desc { opacity: 0; transform: translateX(-14px); }

@media (max-width: 899px) {
  .verticals__grid { grid-template-columns: minmax(0, 1fr); }
  .verticals__head, .verticals__list { grid-column: 1; }
  .verticals__head { position: static; }
  .verticals__threads { display: none; }
  .vrow { grid-template-columns: minmax(0, 1fr); }
  .vrow__label, .vrow h3, .vrow__desc { grid-column: 1; grid-row: auto; }
  .vrow__label { margin: 0 0 .4rem; }
}

/* ---------- Band: full-bleed night, the field drifting slower than the page ---------- */
.band {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(34rem, 92svh, 58rem);
  display: flex; align-items: flex-end;
  padding-block: var(--space-section);
}
.band__media { position: absolute; inset: -9% 0; z-index: -1; transform: translate3d(0, var(--py, 0%), 0); will-change: transform; }
.band__media picture, .band__media img { display: block; width: 100%; height: 100%; }
.band__media img { object-fit: cover; filter: saturate(.55) brightness(.85); }
.band__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 38, 33, .92) 0%, rgba(10, 38, 33, .66) 42%, rgba(10, 38, 33, .18) 100%),
              linear-gradient(180deg, rgba(10, 38, 33, .45) 0%, rgba(10, 38, 33, 0) 30%, rgba(10, 38, 33, .75) 100%);
}
.band__strand {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 2px;
  background: var(--lime); box-shadow: 0 0 12px rgba(212, 250, 131, .45);
  transform-origin: left center;
}
html.motion .band__strand { transition: transform 1.4s var(--ease-strand); }
.band .spined::before { top: -100vh; }
.band__inner h2 { max-width: 22ch; }
.band__inner h2 em { display: block; }
.band__inner .lead { margin-top: 2rem; max-width: 40ch; color: var(--mist); }

@media (max-width: 899px) {
  .band { min-height: 36rem; }
  .band__media::after { background: linear-gradient(180deg, rgba(10, 38, 33, .5) 0%, rgba(10, 38, 33, .7) 45%, rgba(10, 38, 33, .94) 100%); }
}

/* ---------- Collaborate: lime close, a strand drawn under the second line ---------- */
.collab__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: end; }
.collab__text { grid-column: 1 / span 9; }
.collab__text h2 { max-width: 28ch; text-wrap: pretty; }
.collab__text h2 em { position: relative; display: block; width: fit-content; padding-bottom: .14em; }
.collab__text h2 em::after {
  content: ""; position: absolute; left: 0; right: -1.25em; bottom: 0; height: 2px;
  background: var(--forest); transform-origin: left center;
}
html.motion .collab__text h2 em::after { transition: transform 1.1s var(--ease-strand) .6s; }
html.motion .collab__text h2:not(.is-in) em::after { transform: scaleX(0); }
.collab__more { grid-column: 10 / span 3; justify-self: end; padding-bottom: .4rem; }
.collab__more .link-arrow { font-size: var(--fs-lead); }

@media (max-width: 899px) {
  .collab__grid { grid-template-columns: minmax(0, 1fr); }
  .collab__text, .collab__more { grid-column: 1; justify-self: start; }
  .collab__text h2 em::after { right: 0; }
}