/* Lane pg-vc-a shared styles (all selectors, variables and keyframes prefixed with vc-a-) */
.vc-a-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}
.vc-a-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #6bb68f55;
  background: #072d2bcc;
  color: var(--gft-paper);
  font: 11px var(--gft-font-mono);
  text-decoration: none;
}
.vc-a-pill strong {
  color: var(--gft-sage);
}
.vc-a-pill--ochre {
  border-color: #c98a2b77;
}
.vc-a-pill--ochre strong {
  color: var(--gft-ochre);
}
.vc-a-split {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 32px;
}
.vc-a-panel {
  border: 1px solid #b8c8bd;
  padding: 28px;
  background: var(--gft-paper);
  color: var(--gft-ink);
}
.vc-a-panel--dark {
  border-color: #ffffff2b;
  background: #0a3d3a;
  color: var(--gft-paper);
}
.vc-a-panel--indigo {
  border-color: #8391b644;
  background: #111a3a;
  color: var(--gft-paper);
}
.vc-a-panel h3 {
  margin: 12px 0 14px;
}
.vc-a-stat-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 12px;
}
.vc-a-stat-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #c6d1c9;
  font-size: 14px;
}
.vc-a-panel--dark .vc-a-stat-list li,
.vc-a-panel--indigo .vc-a-stat-list li {
  border-bottom-color: #ffffff24;
}
.vc-a-compare-card {
  padding: 28px;
  min-height: 250px;
  display: grid;
  align-content: start;
  gap: 14px;
}
.vc-a-compare-card--a {
  background: #ece8df;
  color: var(--gft-night);
}
.vc-a-compare-card--b {
  background: #0e4d4a;
  color: var(--gft-paper);
}
.vc-a-steps-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: start;
  margin-top: 32px;
}
.vc-a-steps-visual {
  position: sticky;
  top: 96px;
  border: 1px solid #b8c8bd;
  padding: 28px;
  background: var(--gft-paper);
}
.vc-a-section-dark .vc-a-steps-visual {
  border-color: #ffffff29;
  background: #0a3d3a;
  color: var(--gft-paper);
}
.vc-a-step-card {
  padding: 28px;
  border-top: 2px solid #b8c8bd;
  background: var(--gft-paper);
  margin-bottom: 24px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.vc-a-step-card[data-active] {
  border-top-color: var(--gft-forest);
  background: #e9eeed;
}
.vc-a-handover-strip {
  margin-top: 36px;
  padding: 20px 24px;
  border: 1px solid #6bb68f55;
  background: #072d2b;
  color: var(--gft-paper);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.vc-a-handover-strip__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 11px var(--gft-font-mono);
  color: var(--gft-sage);
}
.vc-a-handover-strip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gft-ochre);
  display: inline-block;
}
.vc-a-close-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 40px;
}
.vc-a-crosslinks {
  margin-top: 36px;
  display: grid;
  gap: 32px;
}
.vc-a-stage-ribbon {
  border: 1px solid #b8c8bd;
  padding: 24px;
  background: var(--gft-paper);
  color: var(--gft-ink);
}
.vc-a-stage-ribbon__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.vc-a-stage-ribbon__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.vc-a-stage-ribbon__item {
  border: 1px solid #c6d1c9;
  padding: 12px;
  background: #f6f4ef;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vc-a-stage-ribbon__item--current {
  border-color: var(--gft-forest);
  background: #e2ebe6;
}
.vc-a-stage-ribbon__code {
  font: 700 10px var(--gft-font-mono);
  color: var(--gft-forest);
}
.vc-a-stage-ribbon__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  text-decoration: none;
}
.vc-a-stage-ribbon__link strong {
  font-size: 13px;
  line-height: 1.25;
}
.vc-a-stage-ribbon__link small {
  font: 10px/1.4 var(--gft-font-mono);
  color: #5b6d62;
}
.vc-a-stage-ribbon__link--pending {
  opacity: 0.78;
}
.vc-a-crosslinks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.vc-a-crosslinks__card {
  padding: 26px;
  border: 1px solid #b8c8bd;
  background: var(--gft-paper);
  color: var(--gft-ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.vc-a-crosslinks__card h3 {
  margin: 12px 0 10px;
}
.vc-a-crosslinks__desc {
  font-size: 14px;
  line-height: 1.65;
}
.vc-a-crosslinks__foot {
  padding-top: 12px;
  border-top: 1px solid #c6d1c9;
}
.vc-a-crosslinks__pending {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 12px;
  color: #5b6d62;
}
@media (max-width: 1000px) {
  .vc-a-stage-ribbon__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vc-a-split,
  .vc-a-steps-grid,
  .vc-a-close-grid,
  .vc-a-crosslinks__grid {
    grid-template-columns: 1fr;
  }
  .vc-a-steps-visual {
    position: relative;
    top: auto;
  }
}
@media (max-width: 640px) {
  .vc-a-stage-ribbon__list {
    grid-template-columns: 1fr;
  }
  .vc-a-panel,
  .vc-a-compare-card,
  .vc-a-step-card,
  .vc-a-crosslinks__card {
    padding: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vc-a-steps-visual {
    position: relative;
    top: auto;
  }
}
:root[data-motion='calm'] .vc-a-steps-visual {
  position: relative;
  top: auto;
}
/* /value-chain/spinning/ only (lane vc-a, page sp). Every class, variable and keyframe is prefixed vc-a-sp-.
   Motif: the strand. One fibre bundle is drafted in the splash, tapers through the draft bench, drops as yarn into
   the converter, pays out as the capital line, opens the dark interlude as the clearer's nominal line, gains a
   barcode passport, winds onto the closing cone and runs off into the footer's thread.
   Stability: HTML is the composed end state; pre-states only under :root[data-m-go]; motion is transform, opacity,
   clip-path and filter; sticky stages have fixed heights; nothing here is scroll-driven. */

:root {
  --vc-a-sp-gut: max(48px, calc((100vw - 1440px) / 2));
  --vc-a-sp-lo: #cedbd2;
  --vc-a-sp-mist: #abc5b6;
  --vc-a-sp-pale: #9fd0b6;
  --vc-a-sp-och: #f0b866;
  --vc-a-sp-och-ink: #7a4e0e;
  --vc-a-sp-leaf-ink: #2a6e50;
  --vc-a-sp-muted: #43514c;
  --vc-a-sp-sand: #ece8df;
}
@media (max-width: 1000px) { :root { --vc-a-sp-gut: 28px; } }
@media (max-width: 640px) { :root { --vc-a-sp-gut: 20px; } }

/* ------------------------------------------------------------------ grounds: three acts, varied inside each act */
.vc-a-sp-sec { position: relative; overflow: clip; }
.vc-a-sp-s2 { --vc-a-sp-reach: 20px; background: var(--gft-night); color: var(--gft-paper); padding-block: var(--vc-a-sp-reach) 36px; }
.vc-a-sp-s3 { background: var(--gft-paper); color: var(--gft-ink); padding-block: 64px 36px; }
.vc-a-sp-s4 { background: var(--vc-a-sp-sand); color: var(--gft-ink); padding-block: 40px 88px; }
.vc-a-sp-s5 { background: var(--gft-night); color: var(--gft-paper); padding-block: 0 64px; }
.vc-a-sp-s6 { background-color: #081f30; background-image: radial-gradient(ellipse at 74% 22%, #22306a 0%, #13234a 34%, #081f30 70%); color: var(--gft-paper); padding-block: 44px 36px; }
.vc-a-sp-s7 { background: var(--gft-deep); color: var(--gft-paper); padding-block: 44px 36px; }
.vc-a-sp-s2::before, .vc-a-sp-s5::before, .vc-a-sp-s7::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(#b4d4c50b 1px, transparent 1px), linear-gradient(90deg, #b4d4c50b 1px, transparent 1px);
  background-size: 56px 56px;
}
.vc-a-sp-sec > .gft-container { position: relative; z-index: 2; }
.vc-a-sp-sec h2 { text-wrap: balance; }
.vc-a-sp-sec .gft-eyebrow { font-size: 12px; }
:is(.vc-a-sp-s2, .vc-a-sp-s5, .vc-a-sp-s6, .vc-a-sp-s7) .gft-eyebrow { color: var(--vc-a-sp-pale); }
:is(.vc-a-sp-s3, .vc-a-sp-s4) .gft-eyebrow { color: var(--vc-a-sp-leaf-ink); }
.vc-a-sp-sec .gft-cite { min-width: 44px; justify-content: center; }

/* shared atoms */
.vc-a-sp-sw { display: grid; }
.vc-a-sp-sw > * { grid-area: 1 / 1; min-width: 0; transition: opacity 280ms ease 200ms, visibility 0s linear 0s; }
.vc-a-sp-cap[data-route='a'] .vc-a-sp-sw > .b, .vc-a-sp-cap[data-route='b'] .vc-a-sp-sw > .a,
.vc-a-sp-mf[data-sys='ring'] .vc-a-sp-sw > .b, .vc-a-sp-mf[data-sys='rotor'] .vc-a-sp-sw > .a {
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.vc-a-sp-mf__step > span { opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 0s linear 240ms; }
.vc-a-sp-mf[data-step='0'] .vc-a-sp-mf__step > [data-s='0'], .vc-a-sp-mf[data-step='1'] .vc-a-sp-mf__step > [data-s='1'],
.vc-a-sp-mf[data-step='2'] .vc-a-sp-mf__step > [data-s='2'], .vc-a-sp-mf[data-step='3'] .vc-a-sp-mf__step > [data-s='3'] { opacity: 1; visibility: visible; transition-delay: 0s; }

.vc-a-sp-play {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px;
  border: 1px solid var(--gft-ochre); background: transparent; color: var(--gft-paper); font: 650 15px var(--gft-font-display);
}
.vc-a-sp-play:hover { background: rgb(201 138 43 / 0.2); }
.vc-a-sp-play__i { width: 0; height: 0; border-left: 12px solid var(--gft-ochre); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.vc-a-sp-play[aria-pressed='true'] .vc-a-sp-play__i { width: 12px; height: 14px; border: 0; border-left: 4px solid var(--gft-ochre); border-right: 4px solid var(--gft-ochre); }
.vc-a-sp-play[hidden] { display: none; }

/* lives: rotation, sway, flows. Each loop sits on its own element and stops off screen ([data-m-on]). */
.vc-a-sp-rot { transform-origin: 0 0; }
:root[data-m-go] [data-m-live~='vc-a-sp-spin'][data-m-on] .vc-a-sp-rot {
  animation-name: vc-a-sp-rot; animation-duration: 7s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal;
}
:root[data-m-go] [data-m-live~='vc-a-sp-spin'][data-m-on] .vc-a-sp-rot--rev { animation-direction: reverse; }
:root[data-m-go] [data-m-live~='vc-a-sp-spin'][data-m-on] .vc-a-sp-rot--fast { animation-duration: 2.6s; }
:root[data-m-go] [data-m-live~='vc-a-sp-spin'][data-m-on] .vc-a-sp-rot--slow { animation-duration: 16s; }
@keyframes vc-a-sp-rot { to { rotate: 360deg; } }
[data-m-live~='vc-a-sp-spin'], [data-m-live~='vc-a-sp-flow'], [data-m-live~='vc-a-sp-beam'], [data-m-live~='vc-a-sp-bead'], [data-m-live~='vc-a-sp-toolloop'] { overflow-anchor: none; }

/* ------------------------------------------------------------------ the feed lane: seven strands from the splash to station 01 */
.vc-a-sp-lane { position: absolute; pointer-events: none; overflow-anchor: none; }
.vc-a-sp-lane__v { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: var(--vc-a-sp-bundle); overflow: hidden; }
.vc-a-sp-lane__flow { position: absolute; left: 4.2px; width: 1.4px; top: -40px; bottom: 0; background: repeating-linear-gradient(180deg, #fff 0 5px, transparent 5px 40px); opacity: 0.9; }
:root[data-m-go] .vc-a-sp-lane__flow[data-m-on] {
  animation-name: vc-a-sp-flowdown; animation-duration: 1.6s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal;
}
@keyframes vc-a-sp-flowdown { to { transform: translateY(40px); } }
.vc-a-sp-lane--splash { z-index: 1; left: calc(var(--vc-a-sp-gut) / 2 - 7px); bottom: 0; height: min(46%, 420px); width: 14px; }
.vc-a-sp-lane__fan { position: absolute; left: -60px; top: 0; width: 80px; height: 150px; overflow: visible; }
.vc-a-sp-lane--splash .vc-a-sp-lane__v { top: 150px; }
.vc-a-sp-lane--in {
  --vc-a-sp-off: calc(var(--vc-a-sp-bp) + 8px + var(--vc-a-sp-gut) / 2);
  left: calc(-1 * var(--vc-a-sp-off)); width: var(--vc-a-sp-off); top: -220vh; height: calc(220vh + 6.25cqw - 9px);
}
.vc-a-sp-lane__turn { position: absolute; left: 0; top: 100%; width: 100%; height: 18px; overflow: hidden; }
.vc-a-sp-lane--phone { display: none; }

/* ------------------------------------------------------------------ block 1: splash */
@media (min-width: 1001px) {
  [data-splash='vc-a-spinning'] .gft-splash__structure { inset: 0; }
  [data-splash='vc-a-spinning'] .gft-splash__structure::after { background: linear-gradient(90deg, #072d2bf0 0%, #072d2bb4 24%, #072d2b40 44%, #072d2b00 60%); }
  [data-splash='vc-a-spinning'] .gft-structure { min-height: 0; }
}
@media (max-width: 1000px) { .vc-a-sp-lbl { display: none; } }
@media (max-width: 640px) {
  [data-splash='vc-a-spinning'] .gft-splash__structure { inset: auto 0 0 0; height: 420px; }
  [data-splash='vc-a-spinning'] .vc-a-sp-splash-svg { width: 190%; max-width: none; margin-left: -88%; }
}
[data-splash='vc-a-spinning'] :is(.gft-eyebrow, .gft-splash__cue, .gft-splash__caption, .gft-splash__signal, .gft-splash__position, .gft-splash__data span) { font-size: 12px !important; }
[data-splash='vc-a-spinning'] .vc-a-pill { font-size: 12px; }
[data-splash='vc-a-spinning'] .gft-splash__caption { color: #cfe3d8; }
@media (max-width: 640px) { [data-splash='vc-a-spinning'] .vc-a-pills { display: grid; grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------ block 2: the draft bench, on night */
.vc-a-sp-bench {
  --vc-a-sp-bp: 26px;
  position: relative; background: #0a3d3a; border: 1px solid #6bb68f40; color: var(--gft-paper);
  padding: 14px var(--vc-a-sp-bp) 12px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); grid-template-areas: 'head tag' 'band band' 'lower lower' 'foot foot'; column-gap: 32px;
}
.vc-a-sp-bench__head { grid-area: head; }
.vc-a-sp-bench__head h2 { margin-top: 2px; font-size: clamp(1.6rem, 2.1vw, 2.05rem); line-height: 1.05; max-width: 34ch; }
.vc-a-sp-bench__lede { margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--vc-a-sp-lo); max-width: 66ch; }
.vc-a-sp-bench__tag { grid-area: tag; justify-self: end; text-align: right; margin: 0; font: 12px/1.5 var(--gft-font-mono); color: var(--vc-a-sp-mist); max-width: 34ch; }
.vc-a-sp-bench__band { grid-area: band; margin-top: 6px; }
.vc-a-sp-bench__strand { position: relative; margin: 0; container-type: inline-size; }
.vc-a-sp-bench__row { display: block; width: 100%; height: auto; max-height: 124px; overflow: visible; }
.vc-a-sp-bench__feed path { fill: none; }
.vc-a-sp-bench__env { fill: #6bb68f; fill-opacity: 0.38; stroke: #f6f4ef; stroke-width: 1.4; }
.vc-a-sp-bench__yarn { stroke: #f6f4ef; stroke-width: 3; stroke-linecap: round; }
.vc-a-sp-bench__out { fill: var(--vc-a-sp-pale); font: 600 14px var(--gft-font-mono); }
/* the veil holds the strand back past the active station: transform only, one transition per change */
.vc-a-sp-bench__veil rect { fill: #0a3d3a; }
.vc-a-sp-bench__veil { transform: translateX(calc(195px + var(--i, 4) * 170px)); transition: transform 820ms cubic-bezier(0.65, 0, 0.35, 1); }
.vc-a-sp-bench[data-step='5'] .vc-a-sp-bench__veil { transform: translateX(1300px); }
.vc-a-sp-st { cursor: pointer; }
.vc-a-sp-st__ring { fill: #0a3d3a; stroke: #6bb68f99; stroke-width: 1.8; transition: stroke 320ms, fill 320ms; }
.vc-a-sp-st__glyph * { fill: none; stroke: #cedbd2; stroke-width: 1.7; stroke-linecap: round; }
.vc-a-sp-st[data-on] .vc-a-sp-st__ring { stroke: var(--gft-ochre); stroke-width: 3; fill: #0e4d4a; }
.vc-a-sp-st[data-on] .vc-a-sp-st__glyph * { stroke: #fff; }
.vc-a-sp-st__n { fill: var(--vc-a-sp-pale); font: 700 14px var(--gft-font-mono); }
.vc-a-sp-st__name { fill: var(--vc-a-sp-lo); font: 600 15px var(--gft-font-display); }
.vc-a-sp-st[data-on] .vc-a-sp-st__name { fill: #fff; font-weight: 800; }
/* fibre motes drift through the active station */
.vc-a-sp-motes { transform: translate(calc(150px + var(--i, 4) * 170px), 75px); transition: transform 820ms cubic-bezier(0.65, 0, 0.35, 1); }
.vc-a-sp-mote { fill: #e4a850; opacity: 0; }
:root[data-m-go] [data-m-live~='vc-a-sp-spin'][data-m-on] .vc-a-sp-mote {
  animation-name: vc-a-sp-mote; animation-duration: 2.4s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; animation-delay: calc(var(--md) * -1);
}
@keyframes vc-a-sp-mote { 0% { opacity: 0; transform: translateX(-70px); } 20% { opacity: 0.9; } 80% { opacity: 0.9; } 100% { opacity: 0; transform: translateX(70px); } }
.vc-a-sp-bench[data-step='0'] .vc-a-sp-mote { fill: #f6f4ef; }

/* the yarn leaves the bench's right edge at 19.7 tex and turns down the right gutter into block 3 */
.vc-a-sp-out {
  --vc-a-sp-off: calc(var(--vc-a-sp-bp) + 1px + var(--vc-a-sp-gut) / 2);
  position: absolute; right: calc(-1 * var(--vc-a-sp-off)); top: calc(6.25cqw - 1.5px); width: var(--vc-a-sp-off); height: 220vh; pointer-events: none;
}
.vc-a-sp-out i { position: absolute; inset: 0 -1.5px 0 0; border-top: 3px solid #f6f4ef; border-right: 3px solid #f6f4ef; border-top-right-radius: 18px; }

.vc-a-sp-bench__lower { grid-area: lower; display: grid; grid-template-columns: minmax(0, 1.52fr) minmax(0, 1fr); gap: 28px; margin-top: 10px; align-items: start; }
.vc-a-sp-bench__views { margin: 0; }
.vc-a-sp-bench__views svg { width: 100%; height: auto; display: block; max-height: 170px; }
.vc-a-sp-bench__cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 4px; font: 12px var(--gft-font-mono); color: var(--vc-a-sp-mist); letter-spacing: 0.04em; }
.vc-a-sp-xs, .vc-a-sp-sv { opacity: 0; transition: opacity 420ms ease; }
.vc-a-sp-xs[data-on], .vc-a-sp-sv[data-on] { opacity: 1; }
.vc-a-sp-xs circle { fill: #6bb68f; fill-opacity: 0.9; }
.vc-a-sp-xs__frame { fill: none !important; stroke: #6bb68f66; stroke-dasharray: 3 6; }
.vc-a-sp-xs .vc-a-sp-xs__fibre { fill: none; stroke: var(--gft-ochre); stroke-width: 1.6; }
.vc-a-sp-sv__f { fill: none; stroke: #f6f4ef; stroke-opacity: 0.85; stroke-width: 1.4; }
.vc-a-sp-sv__f--b { stroke: #6bb68f; stroke-opacity: 1; stroke-width: 2.4; }
.vc-a-sp-sv__f--c { stroke: var(--gft-ochre); }
.vc-a-sp-bench__ctl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 10px; }
.vc-a-sp-bench__scrub { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 8px; padding: 6px 12px; background: #072d2b; border: 1px solid #6bb68f40; }
.vc-a-sp-bench__scrub label { font: 700 12px var(--gft-font-mono); color: var(--vc-a-sp-pale); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.vc-a-sp-bench__scrub input { width: 100%; margin: 0; min-height: 36px; accent-color: var(--gft-ochre); cursor: pointer; }
.vc-a-sp-seg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.vc-a-sp-seg label { position: relative; min-width: 0; }
.vc-a-sp-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; min-height: 0; }
.vc-a-sp-seg span { display: grid; justify-items: center; gap: 0; min-height: 44px; padding: 4px 4px; border: 1px solid #6bb68f77; font: 650 13.5px/1.15 var(--gft-font-display); color: #e3ece6; text-align: center; transition: background-color 260ms, color 260ms, border-color 260ms; }
.vc-a-sp-seg b { font: 700 12px var(--gft-font-mono); color: var(--vc-a-sp-pale); }
.vc-a-sp-seg label:hover span { border-color: #6bb68f; }
.vc-a-sp-seg input:checked + span { background: var(--gft-paper); color: var(--gft-night); border-color: var(--gft-paper); }
.vc-a-sp-seg input:checked + span b { color: var(--vc-a-sp-leaf-ink); }
.vc-a-sp-seg input:focus-visible + span { outline: 3px solid var(--gft-ochre); outline-offset: 2px; }

.vc-a-sp-bench__card { background: var(--gft-night); border: 1px solid #6bb68f55; padding: 14px 18px 12px; min-width: 0; box-shadow: 0 12px 28px rgb(0 0 0 / 0.24); }
.vc-a-sp-bench__count { font: 12px var(--gft-font-mono); color: var(--vc-a-sp-mist); margin: 0 0 4px; }
.vc-a-sp-bench__count b { color: #fff; }
.vc-a-sp-bench__stack { display: grid; }
.vc-a-sp-bench__p { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transition: none; }
.vc-a-sp-bench__p[data-on] { visibility: visible; opacity: 1; transition: opacity 380ms ease, visibility 0s; }
.vc-a-sp-bench__k { font: 12px/1.4 var(--gft-font-mono); color: var(--vc-a-sp-pale); letter-spacing: 0.06em; text-transform: uppercase; }
.vc-a-sp-bench__p h3 { font-size: clamp(1.1rem, 1.45vw, 1.35rem); margin: 4px 0 4px; color: #fff; }
.vc-a-sp-bench__txt { font-size: 13.5px; line-height: 1.48; color: #d8e4dd; }
.vc-a-sp-bench__ro { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 0; padding: 8px 10px; background: #0a3d3a; border-left: 3px solid var(--gft-ochre); }
.vc-a-sp-bench__ro dt { font: 12px/1.3 var(--gft-font-mono); color: var(--vc-a-sp-mist); letter-spacing: 0.04em; text-transform: uppercase; }
.vc-a-sp-bench__ro dd { margin: 2px 0 0; display: flex; align-items: baseline; gap: 6px; }
.vc-a-sp-big { display: inline-block; font: 850 clamp(1.85rem, 2.6vw, 2.5rem) / 1 var(--gft-font-display); letter-spacing: -0.045em; color: #fff; font-variant-numeric: tabular-nums; }
.vc-a-sp-bench__ro small { font: 650 13px var(--gft-font-mono); color: var(--vc-a-sp-pale); }
.vc-a-sp-mass { display: block; position: relative; height: 8px; background: #ffffff1f; margin: 10px 0 4px; }
.vc-a-sp-mass i { position: absolute; inset: 0; background: linear-gradient(90deg, #6bb68f, #c98a2b); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
:root[data-m-go] .vc-a-sp-bench__p[data-on] .vc-a-sp-mass i { animation-name: vc-a-sp-grow; animation-duration: 820ms; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; }
@keyframes vc-a-sp-grow { from { transform: scaleX(0); } }
.vc-a-sp-mass__note { font: 12px/1.4 var(--gft-font-mono); color: var(--vc-a-sp-lo); margin: 0; }
.vc-a-sp-mass__scale { display: flex; justify-content: space-between; gap: 8px; margin: 3px 0 0; font: 12px var(--gft-font-mono); color: var(--vc-a-sp-mist); max-width: none; }
.vc-a-sp-bench__dl { margin: 6px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vc-a-sp-bench__dl > div { border-top: 1px solid #ffffff22; padding-top: 5px; }
.vc-a-sp-bench__dl dt { font: 12px var(--gft-font-mono); color: var(--vc-a-sp-mist); text-transform: uppercase; letter-spacing: 0.06em; }
.vc-a-sp-bench__dl dd { margin: 2px 0 0; font: 650 14px/1.25 var(--gft-font-display); color: #fff; }
.vc-a-sp-bench__foot { grid-area: foot; font: 12px/1.5 var(--gft-font-mono); color: var(--vc-a-sp-mist); margin: 8px 0 0; max-width: none; }

/* entrance: the envelope unspools from station 01 and the stations light one by one (90 ms), settled in 900 ms */
:root[data-m-go] .vc-a-sp-bench__strand:not([data-m-in]) .vc-a-sp-bench__env,
:root[data-m-go] .vc-a-sp-bench__strand:not([data-m-in]) .vc-a-sp-bench__yarn { clip-path: inset(0 100% 0 0); }
:root[data-m-go] .vc-a-sp-bench__strand:not([data-m-in]) .vc-a-sp-st { opacity: 0.15; }
:root[data-m-go] .vc-a-sp-bench__strand[data-m-in] :is(.vc-a-sp-bench__env, .vc-a-sp-bench__yarn) {
  animation-name: vc-a-sp-unspool; animation-duration: 760ms; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards;
}
:root[data-m-go] .vc-a-sp-bench__strand[data-m-in] .vc-a-sp-st {
  animation-name: vc-a-sp-light; animation-duration: 380ms; animation-timing-function: var(--gft-ease-out); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; animation-delay: calc(var(--k) * 90ms);
}
@keyframes vc-a-sp-unspool { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vc-a-sp-light { from { opacity: 0.15; } }

/* ------------------------------------------------------------------ block 3: ring against rotor, the machine film (paper) */
.vc-a-sp-s3__head { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-areas: 'e e' 't l'; gap: 14px 56px; align-items: end; margin-bottom: 36px; }
.vc-a-sp-s3__head .gft-eyebrow { grid-area: e; }
.vc-a-sp-s3__head h2 { grid-area: t; font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.04; max-width: 22ch; }
.vc-a-sp-s3__lede { grid-area: l; font-size: 17px; line-height: 1.6; color: var(--vc-a-sp-muted); max-width: 46ch; }

.vc-a-sp-mf { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 36px; align-items: start; --d: 0.556; --bal: 0.87; --yw: 3.18; }
.vc-a-sp-mf__visual { position: sticky; top: 20px; height: min(calc(100svh - 40px), 840px); margin-left: calc(-1 * var(--vc-a-sp-gut)); z-index: 1; }
.vc-a-sp-mf__stage { height: 100%; margin: 0; background: var(--gft-forest); color: var(--gft-paper); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 18px 26px 16px calc(var(--vc-a-sp-gut) + 12px); border-right: 3px solid var(--gft-ochre); }
.vc-a-sp-mf__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid #ffffff26; }
.vc-a-sp-mf__tag b { font: 850 clamp(1.4rem, 2.2vw, 2rem) / 1 var(--gft-font-display); letter-spacing: -0.04em; color: #fff; }
.vc-a-sp-mf__step span { font: 600 13px var(--gft-font-mono); color: var(--vc-a-sp-och); text-align: right; }
.vc-a-sp-mf__svg { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.vc-a-sp-mach { opacity: 0; visibility: hidden; transition: opacity 260ms ease, visibility 0s linear 260ms; }
.vc-a-sp-mf[data-sys='ring'] [data-mach='ring'], .vc-a-sp-mf[data-sys='rotor'] [data-mach='rotor'] { opacity: 1; visibility: visible; transition: opacity 360ms ease 160ms, visibility 0s; }
.vc-a-sp-mach__part { fill: #0a3d3a; stroke: #6bb68f; stroke-width: 2.2; }
.vc-a-sp-mach__part--b { stroke: var(--gft-ochre); }
.vc-a-sp-mach__cop { fill: #0e4d4a; }
.vc-a-sp-mach__thin { fill: none; stroke: var(--vc-a-sp-lo); stroke-width: 1.4; stroke-linecap: round; }
.vc-a-sp-mach__yarn { fill: none; stroke: #f6f4ef; stroke-width: 2.4; stroke-linecap: round; }
.vc-a-sp-mach__yarn--live { stroke-width: var(--yw); }
.vc-a-sp-mach__yarn--b { stroke: #6bb68f; stroke-dasharray: 2 6; }
.vc-a-sp-mach__spindle { stroke: #9db5a8; stroke-width: 6; stroke-linecap: round; }
.vc-a-sp-mach__ring { fill: none; stroke: var(--gft-ochre); stroke-width: 3; }
.vc-a-sp-mach__trav { fill: #e4a850; }
.vc-a-sp-mach__groove { fill: none; stroke: #6bb68f; stroke-width: 7; stroke-dasharray: 2 7; }
.vc-a-sp-mach__lbl text { fill: var(--vc-a-sp-lo); font: 600 14px var(--gft-font-mono); letter-spacing: 0.04em; transition: opacity 220ms ease; }
.vc-a-sp-mf[data-step='1'] .vc-a-sp-lbl-top { opacity: 0; }
/* Leaving the zoomed count step the camera eases back over 900 ms: hold the top labels until the rollers have cleared them. */
.vc-a-sp-mf:not([data-step='1']) .vc-a-sp-lbl-top { transition: opacity 250ms ease 650ms; }
.vc-a-sp-balloon { transform-origin: 0 0; transform: scaleY(var(--bal)); transition: transform 300ms var(--gft-ease-out); }
.vc-a-sp-sway { transform-box: fill-box; transform-origin: center; }
:root[data-m-go] [data-m-live~='vc-a-sp-spin'][data-m-on] .vc-a-sp-sway { animation-name: vc-a-sp-sway; animation-duration: 2.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vc-a-sp-sway { from { transform: scaleX(0.35); } to { transform: scaleX(1); } }
/* zones light with the step being read */
.vc-a-sp-z { transition: opacity 420ms ease; }
.vc-a-sp-mf[data-step='1'] .vc-a-sp-z:not([data-z~='count']), .vc-a-sp-mf[data-step='2'] .vc-a-sp-z:not([data-z~='align']), .vc-a-sp-mf[data-step='3'] .vc-a-sp-z:not([data-z~='noil']) { opacity: 0.3; }
/* step 2: the camera moves to the cop (ring) or the withdrawal (rotor) */
.vc-a-sp-mach__cam { transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1); }
.vc-a-sp-mach__cam--ring { transform-origin: 322px 380px; }
.vc-a-sp-mach__cam--rotor { transform-origin: 400px 150px; }
.vc-a-sp-mf[data-step='1'] .vc-a-sp-mach__cam { transform: scale(1.24); }
/* step 1: a bead travels the process path */
.vc-a-sp-bead { fill: #e4a850; stroke: #072d2b; stroke-width: 2; opacity: 0; transition: opacity 300ms ease; }
.vc-a-sp-mf[data-step='0'] .vc-a-sp-bead { opacity: 1; }
.vc-a-sp-bead--ring { transform: translate(322px, 410px); }
.vc-a-sp-bead--rotor { transform: translate(520px, 76px); }
:root[data-m-go] .vc-a-sp-mf[data-step='0'] [data-m-live~='vc-a-sp-spin'][data-m-on] .vc-a-sp-bead--ring { animation-name: vc-a-sp-bead-ring; animation-duration: 4.8s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
:root[data-m-go] .vc-a-sp-mf[data-step='0'] [data-m-live~='vc-a-sp-spin'][data-m-on] .vc-a-sp-bead--rotor { animation-name: vc-a-sp-bead-rotor; animation-duration: 4.8s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes vc-a-sp-bead-ring { 0% { transform: translate(30px, 104px); } 16% { transform: translate(120px, 104px); } 32% { transform: translate(246px, 104px); } 44% { transform: translate(322px, 168px); } 58% { transform: translate(258px, 260px); } 72% { transform: translate(242px, 404px); } 84% { transform: translate(322px, 412px); } 100% { transform: translate(322px, 360px); } }
@keyframes vc-a-sp-bead-rotor { 0% { transform: translate(70px, 100px); } 14% { transform: translate(148px, 100px); } 24% { transform: translate(176px, 104px); } 38% { transform: translate(230px, 175px); } 50% { transform: translate(270px, 262px); } 60% { transform: translate(330px, 266px); } 74% { transform: translate(330px, 200px); } 86% { transform: translate(330px, 76px); } 100% { transform: translate(520px, 76px); } }
/* step 3: the inset helix */
.vc-a-sp-inset { opacity: 0; transition: opacity 420ms ease; }
.vc-a-sp-mf[data-step='2'] .vc-a-sp-inset { opacity: 1; }
.vc-a-sp-inset__box { fill: #072d2bee; stroke: #e4a850; stroke-width: 1.5; }
.vc-a-sp-inset__a { stroke: #e4a850; stroke-width: 2.6; fill: none; }
.vc-a-sp-inset__b { stroke: #6bb68f; stroke-width: 2.2; fill: none; }
.vc-a-sp-inset__t { fill: #fff; font: 700 14px var(--gft-font-mono); }
.vc-a-sp-sw2 { transition: opacity 260ms ease; }
.vc-a-sp-mf[data-sys='ring'] .vc-a-sp-sw2[data-for='rotor'], .vc-a-sp-mf[data-sys='rotor'] .vc-a-sp-sw2[data-for='ring'] { opacity: 0; }
/* step 4: the noil drops out, then the yarn pays out across the frame */
.vc-a-sp-noil { opacity: 0; transition: opacity 420ms ease; }
.vc-a-sp-mf[data-step='3'] .vc-a-sp-noil { opacity: 1; }
.vc-a-sp-noil__bar { fill: #6bb68f; fill-opacity: 0.55; stroke: #f6f4ef; stroke-width: 1.2; }
.vc-a-sp-noil__cut rect { fill: #e4a850; }
.vc-a-sp-noil__cut { transition: transform 900ms var(--gft-ease-out) 300ms, opacity 900ms ease 300ms; }
.vc-a-sp-mf[data-step='3'] .vc-a-sp-noil__cut { transform: translateY(18px); opacity: 0.85; }
.vc-a-sp-mf[data-step='3'][data-sys='rotor'] .vc-a-sp-noil__cut { transform: translateY(-4px); }
.vc-a-sp-noil__t { fill: #fff; font: 700 14px var(--gft-font-mono); }
.vc-a-sp-payout path { fill: none; stroke: #f6f4ef; stroke-width: 3; stroke-linecap: round; }
.vc-a-sp-payout { clip-path: inset(0 100% 0 0); transition: clip-path 1100ms cubic-bezier(0.65, 0, 0.35, 1); }
.vc-a-sp-mf[data-step='3'] .vc-a-sp-payout { clip-path: inset(0 0 0 0); }
.vc-a-sp-mf[data-step='3'][data-sys='rotor'] .vc-a-sp-payout { clip-path: inset(0 0 0 0); }

.vc-a-sp-mf__ro { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid #ffffff26; }
.vc-a-sp-mf__dl dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.vc-a-sp-mf__dl dt { font: 12px var(--gft-font-mono); color: var(--vc-a-sp-pale); text-transform: uppercase; letter-spacing: 0.06em; }
.vc-a-sp-mf__dl dd { margin: 2px 0 0; font: 750 17px/1.25 var(--gft-font-display); color: #fff; }
.vc-a-sp-cband { position: relative; height: 30px; background: #ffffff14; }
.vc-a-sp-cband__b { position: absolute; top: 0; bottom: 0; left: calc(var(--bl) * 100%); width: calc(var(--bw) * 100%); border: 1px solid; transform-origin: 0 50%; }
.vc-a-sp-cband__b span { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font: 700 12px var(--gft-font-mono); white-space: nowrap; color: #fff; }
.vc-a-sp-cband__b--ring { --bl: var(--ring-l); --bw: var(--ring-w); background: #6bb68f40; border-color: #6bb68f; }
.vc-a-sp-cband__b--rotor { --bl: var(--rotor-l); --bw: var(--rotor-w); background: #c98a2b40; border-color: var(--gft-ochre); }
.vc-a-sp-cband__ne { position: absolute; top: -4px; bottom: -4px; left: 0; width: 3px; background: #fff; transform: translateX(calc(var(--ne) * (100cqw - 3px))); transition: transform 200ms var(--gft-ease-out); }
.vc-a-sp-mf__ro { container-type: inline-size; }
.vc-a-sp-mf[data-step='1'][data-sys='ring'] .vc-a-sp-mf__ro .vc-a-sp-cband__b--ring, .vc-a-sp-mf[data-step='1'][data-sys='rotor'] .vc-a-sp-mf__ro .vc-a-sp-cband__b--rotor { background: #6bb68fb0; }
.vc-a-sp-mf__note { font: 13px/1.5 var(--gft-font-mono); color: var(--vc-a-sp-lo); margin: 0; min-height: 3em; max-width: none; }

.vc-a-sp-mf__side { min-width: 0; position: relative; z-index: 2; }
.vc-a-sp-tog { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--gft-forest); margin: 0; padding: 0; min-width: 0; }
.vc-a-sp-tog--3 { grid-template-columns: repeat(3, 1fr); }
.vc-a-sp-tog__k { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.vc-a-sp-tog label { position: relative; }
.vc-a-sp-tog input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; min-height: 0; }
.vc-a-sp-tog span { display: grid; gap: 2px; align-content: center; min-height: 60px; padding: 8px 14px; font: 850 clamp(1.05rem, 1.5vw, 1.4rem) / 1.1 var(--gft-font-display); letter-spacing: -0.03em; color: var(--gft-forest); transition: background-color 260ms, color 260ms; }
.vc-a-sp-tog--3 span { min-height: 46px; font-size: 15px; justify-items: center; }
.vc-a-sp-tog small { font: 700 12px var(--gft-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--vc-a-sp-leaf-ink); }
.vc-a-sp-tog input:checked + span { background: var(--gft-forest); color: #fff; }
.vc-a-sp-tog input:checked + span small { color: var(--vc-a-sp-pale); }
.vc-a-sp-tog input:focus-visible + span { outline: 3px solid var(--gft-ochre); outline-offset: -3px; }
.vc-a-sp-mf__sys { margin-top: 14px; }
.vc-a-sp-mf__sys h3 { font-size: clamp(1.15rem, 1.5vw, 1.45rem); margin-bottom: 8px; color: var(--gft-forest); }
.vc-a-sp-mf__sys p { font-size: 15px; line-height: 1.6; color: var(--gft-ink); }

.vc-a-sp-conv { position: relative; margin-top: 22px; margin-left: -44px; padding: 20px 24px 22px; background: var(--gft-forest); color: #fff; border-left: 4px solid var(--gft-ochre); box-shadow: -12px 14px 32px rgb(7 45 43 / 0.16); }
.vc-a-sp-conv__k { font: 12px var(--gft-font-mono); color: var(--vc-a-sp-pale); letter-spacing: 0.06em; text-transform: uppercase; }
.vc-a-sp-conv__out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 8px 0 0; font: 850 38px / 1 var(--gft-font-display); letter-spacing: -0.04em; max-width: none; }
.vc-a-sp-conv__out i { font-style: normal; color: var(--vc-a-sp-och); }
.vc-a-sp-conv__out b { font-weight: 850; display: inline-block; min-width: 2.2ch; }
.vc-a-sp-conv__sys { margin: 8px 0 0; font: 600 14.5px/1.45 var(--gft-font-display); color: #dbe7e0; min-height: 2.8em; }
.vc-a-sp-conv__lbl { display: block; margin-top: 8px; font: 12px var(--gft-font-mono); color: var(--vc-a-sp-lo); }
.vc-a-sp-conv__track { position: relative; height: 52px; margin-top: 4px; }
.vc-a-sp-conv__band { position: absolute; top: 4px; height: 14px; left: calc(8px + (100% - 16px) * var(--bl)); width: calc((100% - 16px) * var(--bw)); border: 1px solid; }
.vc-a-sp-conv__band--ring { --bl: var(--ring-l); --bw: var(--ring-w); background: #6bb68f55; border-color: #6bb68f; }
.vc-a-sp-conv__band--rotor { --bl: var(--rotor-l); --bw: var(--rotor-w); background: #c98a2b55; border-color: var(--gft-ochre); }
.vc-a-sp-conv__track input { position: absolute; inset: auto 0 0; width: 100%; margin: 0; min-height: 44px; accent-color: var(--gft-ochre); cursor: pointer; }
.vc-a-sp-conv__ticks { display: flex; justify-content: space-between; gap: 10px; font: 12px var(--gft-font-mono); color: var(--vc-a-sp-mist); margin: 4px 0 0; max-width: none; }
.vc-a-sp-conv__strand { position: relative; height: 22px; margin: 12px -24px 0 0; }
.vc-a-sp-conv__strand i { position: absolute; left: 0; right: 0; top: 50%; height: 16px; margin-top: -8px; background: repeating-linear-gradient(115deg, #f6f4ef 0 3px, #6bb68f 3px 7px); transform-origin: 50% 50%; transform: scaleY(var(--d, 0.556)); transition: transform 220ms var(--gft-ease-out); }
/* the yarn from block 2 comes down the right gutter and turns into the converter's strand */
.vc-a-sp-in3 { position: absolute; right: calc(-1 * var(--vc-a-sp-gut) / 2 - 1.5px); bottom: 34.5px; width: calc(var(--vc-a-sp-gut) / 2 + 1.5px); height: 220vh; pointer-events: none; }
.vc-a-sp-in3 i { position: absolute; inset: 0; border-right: 3px solid var(--gft-forest); border-bottom: 3px solid var(--gft-forest); border-bottom-right-radius: 18px; }

.vc-a-sp-mf__cols { margin-top: 26px; display: grid; gap: 10px; }
.vc-a-sp-mf__colk { font-size: 14px; line-height: 1.5; color: var(--vc-a-sp-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.vc-a-sp-mf__colk .gft-cite { color: var(--gft-forest); }
.vc-a-sp-mf__track { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 22px; }
.vc-a-sp-mf__track > li.vc-a-sp-mf__li { position: relative; min-height: 46svh; padding-block: 1.5svh; padding-inline-start: 1.2rem; align-content: center; }
.vc-a-sp-mf__track > li.vc-a-sp-mf__li:last-child { min-height: 48svh; align-content: center; padding-bottom: 2svh; }
.vc-a-sp-mf__track > li::before { background: #b8c8bd; }
.vc-a-sp-mf__track > li::after { background: var(--gft-ochre); box-shadow: none; }
.vc-a-sp-ghost { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin: 0 0 8px -44px; padding: 8px 16px; background: #e3ece7; border-left: 4px solid var(--gft-forest); }
.vc-a-sp-ghost b { font: 850 clamp(1.8rem, 2.6vw, 2.5rem) / 1 var(--gft-font-display); letter-spacing: -0.04em; color: var(--gft-forest); }
.vc-a-sp-ghost strong { font: 850 clamp(1.25rem, 1.8vw, 1.65rem) / 1 var(--gft-font-display); letter-spacing: -0.03em; color: var(--vc-a-sp-leaf-ink); }
.vc-a-sp-ghost span { font: 700 12px var(--gft-font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--vc-a-sp-muted); margin-left: auto; }
.vc-a-sp-row { position: relative; margin-left: -44px; background: #fff; border: 1px solid #b8c8be; border-left: 4px solid var(--gft-forest); padding: 18px 22px; box-shadow: -10px 12px 28px rgb(7 45 43 / 0.1); }
.vc-a-sp-row__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vc-a-sp-row__k { font: 700 12px var(--gft-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vc-a-sp-leaf-ink); margin: 0; }
.vc-a-sp-row__k b { font: 850 26px/1 var(--gft-font-display); letter-spacing: -0.04em; color: var(--gft-forest); margin-right: 6px; }
.vc-a-sp-row__badge { font: 700 12px var(--gft-font-mono); padding: 4px 10px; background: var(--gft-forest); color: #fff; letter-spacing: 0.05em; }
.vc-a-sp-row h3 { margin: 6px 0 10px; font-size: clamp(1.25rem, 1.8vw, 1.65rem); color: var(--gft-forest); }
.vc-a-sp-row__dl { display: grid; gap: 0; margin: 0; }
.vc-a-sp-row__dl > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 8px 10px; border-top: 1px solid #d5ddd8; transition: background-color 300ms; }
.vc-a-sp-row__dl dt { font: 700 12px/1.6 var(--gft-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vc-a-sp-muted); }
.vc-a-sp-row__dl dd { margin: 0; font-size: 15px; line-height: 1.48; color: var(--gft-ink); }
.vc-a-sp-mf[data-cols='ring'] .c-ring, .vc-a-sp-mf[data-cols='rotor'] .c-rotor, .vc-a-sp-mf[data-cols='both'] :is(.c-ring, .c-rotor) { background: #e1ece6; box-shadow: inset 3px 0 0 var(--gft-forest); }
.vc-a-sp-mf[data-cols='ring'] .c-ring dd, .vc-a-sp-mf[data-cols='rotor'] .c-rotor dd, .vc-a-sp-mf[data-cols='both'] :is(.c-ring, .c-rotor) dd { font-weight: 700; font-size: 15.5px; }
.vc-a-sp-row__viz { margin: 12px 0 0; padding: 10px 12px; background: #f2f5f2; border: 1px solid #cfdbd3; }
.vc-a-sp-row__viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.vc-a-sp-row__viz text { fill: var(--gft-forest); font: 700 10.5px var(--gft-font-mono); letter-spacing: 0.04em; }
.vc-a-sp-viz-line { stroke: var(--gft-forest); stroke-width: 2.5; }
.vc-a-sp-viz-bypass { stroke: var(--vc-a-sp-och-ink); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
.vc-a-sp-viz-node { fill: var(--gft-forest); stroke: #fff; stroke-width: 2; }
.vc-a-sp-viz-node.is-ring-only { fill: #fff; stroke: var(--gft-forest); stroke-dasharray: 2 2; }
.vc-a-sp-viz-cap { fill: var(--vc-a-sp-muted) !important; }
.vc-a-sp-dial-arc { stroke: var(--gft-forest); stroke-width: 2.5; fill: #e1ece6; }
.vc-a-sp-dial-needle { stroke: var(--vc-a-sp-och-ink); stroke-width: 2.5; stroke-linecap: round; }
.vc-a-sp-align-bar--ring { fill: var(--gft-forest); }
.vc-a-sp-align-bar--rotor { fill: #b87314; }
.vc-a-sp-row__band { position: relative; height: 28px; background: #e1e8e3; }
.vc-a-sp-row__bandk { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; font: 12px var(--gft-font-mono); color: var(--vc-a-sp-muted); max-width: none; }
.vc-a-sp-row__bandk span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.vc-a-sp-row__bandk .k-rotor::before { background: #c98a2b88; border: 1px solid var(--vc-a-sp-och-ink); }
.vc-a-sp-row__bandk .k-ring::before { background: #6bb68f88; border: 1px solid var(--vc-a-sp-leaf-ink); }
.vc-a-sp-row__bandk span:last-child::before { display: none; }
.vc-a-sp-row__band .vc-a-sp-cband__b--ring { background: #6bb68f66; border-color: var(--vc-a-sp-leaf-ink); }
.vc-a-sp-row__band .vc-a-sp-cband__b--rotor { background: #c98a2b55; border-color: var(--vc-a-sp-och-ink); }
.vc-a-sp-mf__li[data-active] .vc-a-sp-row { border-color: var(--gft-forest); border-left-color: var(--gft-ochre); box-shadow: -14px 16px 36px #0e4d4a26; }

/* entrance: ring enters from the left, rotor from the right, both spin up and settle (850 ms) */
:root[data-m-go] .vc-a-sp-mf__stage:not([data-m-in]) .vc-a-sp-mach__cam--ring { transform: translateX(-60px) rotate(-4deg); opacity: 0.2; }
:root[data-m-go] .vc-a-sp-mf__stage:not([data-m-in]) .vc-a-sp-mach__cam--rotor { transform: translateX(60px) rotate(4deg); opacity: 0.2; }
:root[data-m-go] .vc-a-sp-mf__stage[data-m-in] .vc-a-sp-mach__cam--ring { animation-name: vc-a-sp-in-l; animation-duration: 850ms; animation-timing-function: var(--gft-ease-out); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; }
:root[data-m-go] .vc-a-sp-mf__stage[data-m-in] .vc-a-sp-mach__cam--rotor { animation-name: vc-a-sp-in-r; animation-duration: 850ms; animation-timing-function: var(--gft-ease-out); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; }
@keyframes vc-a-sp-in-l { from { transform: translateX(-60px) rotate(-4deg); opacity: 0.2; } }
@keyframes vc-a-sp-in-r { from { transform: translateX(60px) rotate(4deg); opacity: 0.2; } }
:root[data-m-go] [data-m='vc-a-sp-ctl-wipe']:not([data-m-in]) { clip-path: inset(0 100% 0 0); opacity: 0.2; }
:root[data-m-go] [data-m='vc-a-sp-ctl-wipe'][data-m-in] { animation: vc-a-sp-unspool 820ms cubic-bezier(0.65, 0, 0.35, 1) 1 backwards; }
:root[data-m-go] [data-m='vc-a-sp-reed']:not([data-m-in]) { opacity: 0.25; transform: scaleX(0.92) translateX(24px); }
:root[data-m-go] [data-m='vc-a-sp-reed'][data-m-in] { animation-name: vc-a-sp-reed; animation-duration: 840ms; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; }
@keyframes vc-a-sp-reed { from { opacity: 0.25; transform: scaleX(0.92) translateX(24px); } }
:root[data-m-go] [data-m='vc-a-sp-c1']:not([data-m-in]) { transform: translateX(-36px); }
:root[data-m-go] [data-m='vc-a-sp-c2']:not([data-m-in]) { clip-path: inset(0 0 82% 0); }
:root[data-m-go] [data-m='vc-a-sp-c3']:not([data-m-in]) { opacity: 0.15; transform: perspective(800px) rotateX(16deg) translateY(30px); }
:root[data-m-go] [data-m='vc-a-sp-c4']:not([data-m-in]) { clip-path: inset(82% 0 0 0); transform: translateY(32px); }
:root[data-m-go] [data-m='vc-a-sp-c1'][data-m-in] { animation: vc-a-sp-c1 860ms cubic-bezier(0.65, 0, 0.35, 1) 1 backwards; }
:root[data-m-go] [data-m='vc-a-sp-c2'][data-m-in] { animation: vc-a-sp-c2 860ms cubic-bezier(0.65, 0, 0.35, 1) 1 backwards; }
:root[data-m-go] [data-m='vc-a-sp-c3'][data-m-in] { animation: vc-a-sp-c3 880ms cubic-bezier(0.65, 0, 0.35, 1) 1 backwards; }
:root[data-m-go] [data-m='vc-a-sp-c4'][data-m-in] { animation: vc-a-sp-c4 880ms cubic-bezier(0.65, 0, 0.35, 1) 1 backwards; }
/* The process-path wipe belongs to its graphic; the comparison text stays exposed. */
@keyframes vc-a-sp-c1 { from { transform: translateX(-36px); } to { transform: translateX(0); } }
/* The count card reveals inside its reserved box, below the metric ribbon at every frame. */
@keyframes vc-a-sp-c2 { from { clip-path: inset(0 0 82% 0); } to { clip-path: inset(0 0 0% 0); } }
@keyframes vc-a-sp-c3 { from { opacity: 0.15; transform: perspective(800px) rotateX(16deg) translateY(30px); } to { opacity: 1; transform: perspective(800px) rotateX(0deg) translateY(0); } }
@keyframes vc-a-sp-c4 { from { clip-path: inset(82% 0 0 0); transform: translateY(32px); } to { clip-path: inset(0% 0 0 0); transform: translateY(0); } }

/* ------------------------------------------------------------------ block 4: the capital ledger (sand) */
.vc-a-sp-cap__bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 0.7fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.vc-a-sp-end { display: grid; gap: 2px; text-align: left; min-height: 92px; padding: 14px 20px; border: 1px solid var(--gft-forest); background: transparent; color: var(--gft-forest); transition: background-color 260ms, color 260ms; }
.vc-a-sp-end--b { text-align: right; }
.vc-a-sp-end small { font: 700 12px var(--gft-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--vc-a-sp-leaf-ink); }
.vc-a-sp-end strong { font: 850 clamp(1.3rem, 2vw, 1.8rem) / 1.05 var(--gft-font-display); letter-spacing: -0.035em; }
.vc-a-sp-end span { font-size: 14px; color: var(--vc-a-sp-muted); }
.vc-a-sp-end[aria-pressed='true'] { background: var(--gft-forest); color: #fff; }
.vc-a-sp-end[aria-pressed='true'] :is(small, span) { color: #d5e6dc; }
.vc-a-sp-end:hover { border-width: 2px; padding: 13px 19px; }
.vc-a-sp-cap__slider { position: relative; }
.vc-a-sp-cap__slider input { width: 100%; margin: 0; min-height: 44px; accent-color: var(--gft-ochre); cursor: pointer; }
.vc-a-sp-cap__ticks { display: flex; justify-content: space-between; padding-inline: 8px; }
.vc-a-sp-cap__ticks i { width: 1px; height: 8px; background: var(--gft-forest); }

.vc-a-sp-strip { position: relative; margin-top: 18px; }
.vc-a-sp-strip:focus-visible { outline: 3px solid var(--gft-ochre); outline-offset: 4px; }
.vc-a-sp-strip__line { position: absolute; left: 0; right: 0; top: 50%; height: 40px; margin-top: -20px; width: 100%; z-index: 2; pointer-events: none; }
.vc-a-sp-strip__on, .vc-a-sp-strip__off { vector-effect: non-scaling-stroke; transition: opacity 320ms ease; }
.vc-a-sp-strip__on { stroke: var(--gft-ochre); stroke-width: 4; }
.vc-a-sp-strip__off { stroke: var(--vc-a-sp-leaf-ink); stroke-width: 3; stroke-dasharray: 9 7; opacity: 0; }
.vc-a-sp-cap[data-route='b'] .vc-a-sp-strip__seg[data-gft='n'] .vc-a-sp-strip__on { opacity: 0; }
.vc-a-sp-cap[data-route='b'] .vc-a-sp-strip__seg[data-gft='n'] .vc-a-sp-strip__off { opacity: 1; }
.vc-a-sp-strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.vc-a-sp-tile { position: relative; display: grid; grid-template-rows: auto 1fr auto auto; height: 150px; padding: 12px 14px; background: var(--gft-forest); color: #fff; border: 1px solid var(--gft-forest); transition: background-color 320ms, color 320ms, border-color 320ms, box-shadow 260ms, transform 260ms; }
.vc-a-sp-tile__n { font: 850 34px/1 var(--gft-font-display); letter-spacing: -0.05em; }
.vc-a-sp-tile strong { grid-row: 3; font-size: 16px; line-height: 1.2; }
.vc-a-sp-tile__s { grid-row: 4; margin-top: 2px; }
.vc-a-sp-tile__s em { overflow-wrap: anywhere; font: 600 12px/1.25 var(--gft-font-mono); font-style: normal; color: var(--vc-a-sp-och); letter-spacing: 0.04em; }
.vc-a-sp-cap[data-route='b'] .vc-a-sp-tile[data-gft='n'] { background: var(--gft-paper); color: var(--gft-ink); border: 1px dashed var(--vc-a-sp-leaf-ink); }
.vc-a-sp-cap[data-route='b'] .vc-a-sp-tile[data-gft='n'] .vc-a-sp-tile__s em { color: var(--vc-a-sp-leaf-ink); }
.vc-a-sp-cap[data-route='b'] .vc-a-sp-tile[data-gft='y'] { box-shadow: 0 0 0 3px var(--gft-ochre); }
.vc-a-sp-cap[data-lens='capex'] .vc-a-sp-tile[data-lens-for~='capex'] { box-shadow: inset 0 5px 0 var(--gft-forest), 0 6px 16px rgb(7 45 43 / 0.12); }
.vc-a-sp-cap[data-lens='payback'] .vc-a-sp-tile[data-lens-for~='payback'] { box-shadow: 0 0 0 4px var(--gft-ochre), 0 10px 24px rgb(7 45 43 / 0.22); transform: translateY(-3px); }
.vc-a-sp-cap[data-lens='util'] .vc-a-sp-tile[data-lens-for~='util'] { box-shadow: inset 0 5px 0 var(--gft-ochre), 0 6px 16px rgb(7 45 43 / 0.12); }

.vc-a-sp-cap__body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 44px; margin-top: 32px; align-items: start; }
.vc-a-sp-cap__head h2 { margin-top: 10px; font-size: clamp(1.95rem, 3.1vw, 3.1rem); line-height: 1.04; max-width: 22ch; }
.vc-a-sp-cap__lede { margin-top: 12px; font-size: 16.5px; line-height: 1.58; color: var(--vc-a-sp-muted); max-width: 52ch; }
.vc-a-sp-cap__lede .gft-cite, .vc-a-sp-cap__desc .gft-cite, .vc-a-sp-cap__metrics .gft-cite { color: var(--gft-forest); }
.vc-a-sp-cap__arch { margin: 18px 0 0; padding: 12px 16px 14px; background: var(--gft-forest); color: #fff; border-left: 4px solid var(--gft-ochre); box-shadow: 0 12px 28px rgb(7 45 43 / 0.14); }
.vc-a-sp-cap__arch-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #ffffff24; font: 700 12px var(--gft-font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--vc-a-sp-pale); }
.vc-a-sp-cap__arch-top [data-lens-tag] { color: var(--vc-a-sp-och); }
.vc-a-sp-cap__arch svg { display: block; width: 100%; height: auto; }

.vc-a-sp-cap__hint { margin: 0 0 8px; font: 700 12px var(--gft-font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--vc-a-sp-leaf-ink); }
.vc-a-sp-cap__metrics { margin: 0; display: grid; gap: 8px; }
.vc-a-sp-metric { display: grid; gap: 6px; width: 100%; text-align: left; padding: 12px 16px; background: var(--gft-paper); border: 1px solid #b8c4bc; border-left: 4px solid var(--gft-forest); color: var(--gft-ink); transition: border-color 220ms, box-shadow 220ms, background-color 220ms; }
.vc-a-sp-metric:hover, .vc-a-sp-metric:has([aria-pressed='true']) { background: #fff; border-color: var(--gft-forest); border-left-color: var(--gft-ochre); box-shadow: 0 8px 22px rgb(7 45 43 / 0.1); }
.vc-a-sp-metric__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.vc-a-sp-metric__k { font: 700 12px var(--gft-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vc-a-sp-leaf-ink); }
.vc-a-sp-metric__pill { font: 700 12px var(--gft-font-mono); padding: 2px 8px; background: var(--gft-forest); color: #fff; }
.vc-a-sp-metric__body > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.vc-a-sp-metric__v { font: 850 clamp(1.5rem, 2.2vw, 2rem) / 1.05 var(--gft-font-display); letter-spacing: -0.04em; color: var(--gft-forest); }
.vc-a-sp-metric__explain { margin: 0; font-size: 14px; line-height: 1.4; color: var(--vc-a-sp-muted); }
.vc-a-sp-metric__bar { display: block; position: relative; height: 6px; background: #dce4df; overflow: hidden; }
.vc-a-sp-metric__bar i { position: absolute; inset: 0; background: var(--gft-forest); transform-origin: 0 50%; transform: scaleX(var(--w, 0.5)); }
.vc-a-sp-metric__bar--ochre i { background: var(--gft-ochre); }
.vc-a-sp-cap__desc { margin-top: 12px; padding: 12px 16px; background: #e3dfd4; border-left: 3px solid var(--gft-forest); font-size: 14.5px; line-height: 1.58; color: var(--gft-ink); }
.vc-a-sp-cap__desc b { color: var(--gft-forest); }

/* entrance: tiles lift into the strand one by one (70 ms); end-stops slide in from opposite edges */
:root[data-m-go] .vc-a-sp-strip__list[data-m]:not([data-m-in]) { opacity: 1; transform: none; }
:root[data-m-go] .vc-a-sp-strip__list[data-m][data-m-in] { animation-name: none; }
:root[data-m-go] .vc-a-sp-strip__list:not([data-m-in]) .vc-a-sp-tile { opacity: 0.2; transform: translateY(-24px); }
:root[data-m-go] .vc-a-sp-strip__list[data-m-in] .vc-a-sp-tile { animation-name: vc-a-sp-lift; animation-duration: 400ms; animation-timing-function: var(--gft-ease-out); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; animation-delay: calc(var(--k) * 70ms); }
@keyframes vc-a-sp-lift { from { opacity: 0.2; transform: translateY(-24px); } }
:root[data-m-go] .vc-a-sp-cap:not(:has(.vc-a-sp-strip__list[data-m-in])) .vc-a-sp-cap__bar .vc-a-sp-end--a { opacity: 0.2; transform: translateX(-48px); }
:root[data-m-go] .vc-a-sp-cap:not(:has(.vc-a-sp-strip__list[data-m-in])) .vc-a-sp-cap__bar .vc-a-sp-end--b { opacity: 0.2; transform: translateX(48px); }
:root[data-m-go] .vc-a-sp-cap:has(.vc-a-sp-strip__list[data-m-in]) .vc-a-sp-cap__bar .vc-a-sp-end--a { animation-name: vc-a-sp-from-l; animation-duration: 620ms; animation-timing-function: var(--gft-ease-out); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; }
:root[data-m-go] .vc-a-sp-cap:has(.vc-a-sp-strip__list[data-m-in]) .vc-a-sp-cap__bar .vc-a-sp-end--b { animation-name: vc-a-sp-from-r; animation-duration: 620ms; animation-timing-function: var(--gft-ease-out); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; }

/* the ledger film: steps on the left, a sticky forest stage on the right */
.vc-a-sp-cf { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 36px; margin-top: 44px; align-items: start; }
.vc-a-sp-cf__track { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; position: relative; z-index: 3; }
.vc-a-sp-cf__track > li.vc-a-sp-cf__li { min-height: 52svh; padding-block: 2svh; padding-inline-start: 1.2rem; align-content: center; scroll-margin-top: 0; }
.vc-a-sp-cf__track > li.vc-a-sp-cf__li:last-child { min-height: 54svh; align-content: center; padding-top: 2svh; }
.vc-a-sp-cf__track > li::before { background: #c4c2b6; }
.vc-a-sp-cf__track > li::after { background: var(--gft-ochre); box-shadow: none; }
.vc-a-sp-ev { position: relative; margin-right: -36px; background: var(--gft-paper); border: 1px solid #bfbcb0; border-left: 4px solid var(--gft-forest); padding: 20px 22px; box-shadow: 12px 14px 32px rgb(7 45 43 / 0.12); min-width: 0; }
.vc-a-sp-ev--dark { background: var(--gft-night); color: var(--gft-paper); border-color: #6bb68f55; border-left: 4px solid var(--gft-ochre); box-shadow: 14px 16px 36px rgb(0 0 0 / 0.28); }
.vc-a-sp-ev__k { font: 700 12px var(--gft-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vc-a-sp-leaf-ink); margin: 0; }
.vc-a-sp-ev__k b { font: 850 28px/1 var(--gft-font-display); color: var(--gft-forest); margin-right: 8px; letter-spacing: -0.04em; }
.vc-a-sp-ev h3 { margin: 8px 0 8px; font-size: clamp(1.3rem, 1.9vw, 1.75rem); color: var(--gft-forest); }
.vc-a-sp-ev__src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 12px var(--gft-font-mono); color: var(--vc-a-sp-muted); }
.vc-a-sp-ev .gft-cite { color: var(--gft-forest); }
.vc-a-sp-ev__quote { margin: 10px 0 0; padding: 8px 12px; background: #ece8df; border-left: 3px solid var(--gft-ochre); font-size: 15px; line-height: 1.42; color: var(--gft-forest); }
.vc-a-sp-ev__chart { margin: 10px 0 0; padding: 10px 12px; background: #fff; border: 1px solid #d5d2c6; }
.vc-a-sp-ev__chart svg { display: block; width: 100%; height: auto; }
.vc-a-sp-ev__chart text { fill: var(--gft-forest); font: 700 10.5px var(--gft-font-mono); letter-spacing: 0.04em; }
/* Wrapping exhibit labels keep complete plant and salary values inside their frame. */
.vc-a-sp-ev__labels { margin: 6px 0 0; font: 700 12px/1.5 var(--gft-font-mono); color: var(--gft-forest); }
.vc-a-sp-ev__labels p { margin: 0; font: inherit; }
.vc-a-sp-ev__plants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.vc-a-sp-ev__plants span { display: block; }
.vc-a-sp-ev__labelbar { display: block; height: 7px; margin-top: 3px; background: var(--gft-forest); }
.vc-a-sp-ev__labelbar--ochre { background: #c98a2b; }
.vc-a-sp-ev__labelbar--sage { background: #6bb68f; }
.vc-a-sp-ev__labelbar--pale { background: #9fd0b6; }
.vc-a-sp-ev__salaries { display: grid; gap: 8px; }
.vc-a-sp-ev--dark .vc-a-sp-ev__labels { color: #e7efe9; }
.vc-a-sp-ev__t { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--gft-ink); }
.vc-a-sp-ev__more { margin-top: 10px; border-top: 1px solid #c9cdc2; }
.vc-a-sp-ev__more summary { min-height: 44px; display: flex; align-items: center; font: 650 14.5px var(--gft-font-display); color: var(--gft-forest); cursor: pointer; }
.vc-a-sp-ev__more div { font-size: 14.5px; line-height: 1.58; color: var(--gft-ink); padding-bottom: 8px; }

.vc-a-sp-ev--dark .vc-a-sp-ev__k { color: var(--vc-a-sp-pale); }
.vc-a-sp-ev--dark .vc-a-sp-ev__k b { color: var(--vc-a-sp-och); }
.vc-a-sp-ev--dark h3 { color: #fff; }
.vc-a-sp-ev--dark .vc-a-sp-ev__src { color: var(--vc-a-sp-mist); }
.vc-a-sp-ev--dark .gft-cite { color: var(--vc-a-sp-pale); }
.vc-a-sp-ev--dark .vc-a-sp-ev__quote { background: #0e4d4a; color: #f6f4ef; border-left-color: var(--vc-a-sp-och); }
.vc-a-sp-ev--dark .vc-a-sp-ev__chart--dark { background: #0a3d3a; border-color: #6bb68f44; }
.vc-a-sp-ev--dark .vc-a-sp-ev__chart--dark text { fill: #e7efe9; }
.vc-a-sp-ev--dark .vc-a-sp-ev__t { color: #e2ede7; }
.vc-a-sp-ev--dark .vc-a-sp-ev__more { border-top-color: #ffffff26; }
.vc-a-sp-ev--dark .vc-a-sp-ev__more summary { color: var(--vc-a-sp-och); }
.vc-a-sp-ev--dark .vc-a-sp-ev__more div { color: #d8e4dd; }

.vc-a-sp-cf__visual { position: sticky; top: 20px; height: min(calc(100svh - 40px), 820px); margin-right: calc(-1 * var(--vc-a-sp-gut)); z-index: 1; }
.vc-a-sp-cf__stage { position: relative; height: 100%; margin: 0; background: var(--gft-forest); color: #fff; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 16px calc(var(--vc-a-sp-gut) + 40px) 18px 44px; border-left: 3px solid var(--gft-ochre); }
.vc-a-sp-cf__top { display: grid; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #ffffff26; }
.vc-a-sp-cf__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vc-a-sp-cf__tabs a { display: grid; align-content: center; min-height: 48px; padding: 6px 10px; border: 1px solid #ffffff3a; font: 600 13px/1.25 var(--gft-font-display); color: #e7efe9; text-decoration: none; transition: background-color 260ms, color 260ms; }
.vc-a-sp-cf__tabs a b { font: 700 12px var(--gft-font-mono); color: var(--vc-a-sp-pale); }
.vc-a-sp-cf__tabs a[aria-current] { background: var(--gft-paper); color: var(--gft-night); border-color: var(--gft-paper); }
.vc-a-sp-cf__tabs a[aria-current] b { color: var(--vc-a-sp-leaf-ink); }
.vc-a-sp-cf__route { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.vc-a-sp-mini { width: 100%; height: 34px; }
.vc-a-sp-mini .vc-a-sp-strip__on { stroke-width: 3; }
.vc-a-sp-mini .vc-a-sp-strip__off { stroke: #9fd0b6; stroke-width: 2.4; }
.vc-a-sp-mini__t { fill: #0a3d3a; stroke: #e4a850; stroke-width: 1.6; transition: fill 300ms, stroke 300ms; }
.vc-a-sp-cap[data-route='b'] .vc-a-sp-mini__t[data-gft='n'] { fill: #0e4d4a; stroke: #9fd0b6; stroke-dasharray: 3 3; }
.vc-a-sp-cap[data-route='b'] .vc-a-sp-mini__t[data-gft='y'] { fill: #e4a850; }
.vc-a-sp-cap[data-route='b'] .vc-a-sp-mini .vc-a-sp-strip__seg[data-gft='n'] .vc-a-sp-strip__on { opacity: 0; }
.vc-a-sp-cap[data-route='b'] .vc-a-sp-mini .vc-a-sp-strip__seg[data-gft='n'] .vc-a-sp-strip__off { opacity: 1; }
.vc-a-sp-cf__rt { display: flex; gap: 0; border: 1px solid #ffffff4d; }
.vc-a-sp-cf__rt button { min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: #e7efe9; font: 650 14px var(--gft-font-display); }
.vc-a-sp-cf__rt button[aria-pressed='true'] { background: var(--gft-ochre); color: var(--gft-night); }
.vc-a-sp-cf__panels { position: relative; min-height: 0; }
.vc-a-sp-cfp { position: absolute; inset: 0; padding-top: 16px; display: grid; align-content: space-between; gap: 12px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px); transition: none; }
.vc-a-sp-cf[data-step='0'] [data-mw-show='0'], .vc-a-sp-cf[data-step='1'] [data-mw-show='1'], .vc-a-sp-cf[data-step='2'] [data-mw-show='2'] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 420ms ease, transform 520ms var(--gft-ease-out); }
.vc-a-sp-cfp__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; max-width: none; }
.vc-a-sp-cfp__big > span { font: 850 clamp(2.8rem, 4.4vw, 4.4rem) / 1 var(--gft-font-display); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.vc-a-sp-cfp__big small { font-size: 15px; line-height: 1.4; color: #dbe7e0; max-width: 32ch; }
.vc-a-sp-cfp .gft-cite { color: #e7efe9; }
.vc-a-sp-cfp__sw { display: flex; gap: 6px; }
.vc-a-sp-cfp__sw button { min-height: 44px; padding: 0 14px; border: 1px solid #ffffff4d; background: transparent; color: #e7efe9; font: 650 14px var(--gft-font-display); }
.vc-a-sp-cfp__sw button[aria-pressed='true'] { background: var(--gft-paper); color: var(--gft-night); }
.vc-a-sp-cfp__charts { display: grid; height: 190px; }
.vc-a-sp-bars { grid-area: 1 / 1; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; transition: opacity 300ms ease, visibility 0s linear 300ms; }
.vc-a-sp-cfp[data-mode='t'] .vc-a-sp-bars[data-set='c'], .vc-a-sp-cfp[data-mode='c'] .vc-a-sp-bars[data-set='t'] { opacity: 0; visibility: hidden; pointer-events: none; }
.vc-a-sp-bars li { height: 100%; }
.vc-a-sp-b { position: relative; display: grid; grid-template-rows: 1fr auto; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: #dbe7e0; cursor: pointer; }
.vc-a-sp-b > i { position: relative; display: block; background: #ffffff14; }
.vc-a-sp-b > i::after { content: ''; position: absolute; inset: 0; background: #6bb68f99; transform-origin: 50% 100%; transform: scaleY(var(--v)); transition: background-color 220ms; }
.vc-a-sp-b[data-upto] > i::after { background: #6bb68f; }
.vc-a-sp-b[data-sel] > i::after { background: var(--gft-ochre); }
.vc-a-sp-b span { font: 12px var(--gft-font-mono); padding-top: 4px; }
.vc-a-sp-b:focus-visible { outline: 3px solid var(--gft-ochre); outline-offset: 2px; }
:root[data-m-go] [data-m-live~='vc-a-sp-pulse'][data-m-on] .vc-a-sp-b[data-sel] > i::after { animation-name: vc-a-sp-pulse; animation-duration: 1.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vc-a-sp-pulse { from { opacity: 1; } to { opacity: 0.72; } }
.vc-a-sp-cfp__ro { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0; min-height: 4.6em; font-size: 15px; line-height: 1.5; color: #e7efe9; max-width: none; }
.vc-a-sp-cfp__ro b { font: 850 24px var(--gft-font-display); color: var(--vc-a-sp-och); letter-spacing: -0.03em; }
.vc-a-sp-hb { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vc-a-sp-hb li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; font-size: 14px; color: #e7efe9; }
.vc-a-sp-hb li i { grid-column: 1 / -1; grid-row: 2; height: 12px; background: #ffffff1a; position: relative; }
.vc-a-sp-hb li i::after { content: ''; position: absolute; inset: 0; background: #6bb68f; transform-origin: 0 50%; transform: scaleX(var(--v)); }
.vc-a-sp-hb li b { font: 750 15px var(--gft-font-display); color: #fff; }
.vc-a-sp-hb__sum { border-top: 1px solid #ffffff33; padding-top: 6px; }
.vc-a-sp-hb__sum b { color: var(--vc-a-sp-och) !important; }
.vc-a-sp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vc-a-sp-b--row { grid-template-columns: 6em minmax(0, 1fr) 4.6em; grid-template-rows: 32px; align-items: center; gap: 12px; }
.vc-a-sp-b--row > i { height: 100%; }
.vc-a-sp-b--row > i::after { transform-origin: 0 50%; transform: scaleX(var(--v)); }
.vc-a-sp-b__k { text-align: left; font: 650 15px var(--gft-font-display) !important; color: #fff; padding: 0 !important; }
.vc-a-sp-b__v { text-align: right; font: 750 15px var(--gft-font-display) !important; color: #fff; padding: 0 !important; }
.vc-a-sp-cfp__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vc-a-sp-range__k { font-size: 14px; color: #e7efe9; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vc-a-sp-range__ax { position: relative; height: 18px; margin-top: 8px; background: #ffffff1a; }
.vc-a-sp-range__band { position: absolute; top: 0; bottom: 0; left: 38.4%; width: 21.9%; background: var(--gft-ochre); }
.vc-a-sp-range__tick { position: absolute; top: -6px; bottom: -6px; left: 87.75%; width: 3px; background: #fff; }
.vc-a-sp-range__l { display: flex; justify-content: space-between; margin: 6px 0 0; font: 12px var(--gft-font-mono); color: #e7efe9; max-width: none; }
.vc-a-sp-peg { width: 100%; height: auto; max-height: 300px; }
.vc-a-sp-peg__grid path { stroke: #ffffff1a; stroke-width: 1; }
.vc-a-sp-peg__eur { stroke: var(--gft-ochre); stroke-width: 4; }
.vc-a-sp-peg__usd { stroke: #9fd0b6; stroke-width: 2.4; stroke-dasharray: 6 6; }
.vc-a-sp-peg__t { fill: #fff; font: 700 14px var(--gft-font-mono); }
.vc-a-sp-peg__t--b { fill: #9fd0b6; }
/* step 3 hand-over: the strand leaves the CMT tile and drops down the stage's right edge */
.vc-a-sp-cf__drop { position: absolute; right: 26px; top: 96px; bottom: 0; width: 3px; pointer-events: none; }
.vc-a-sp-cf__drop i { position: absolute; inset: 0; background: var(--gft-ochre); transform-origin: 50% 0; transform: scaleY(0); transition: transform 1000ms cubic-bezier(0.65, 0, 0.35, 1); }
.vc-a-sp-cf[data-step='2'] .vc-a-sp-cf__drop i { transform: scaleY(1); }
.vc-a-sp-cap__out { position: relative; display: block; height: 120px; margin-bottom: -120px; pointer-events: none; }
.vc-a-sp-cap__out i { position: absolute; right: 26px; top: 0; bottom: 0; width: 3px; background: var(--gft-ochre); }
:root[data-m-go] [data-m='vc-a-sp-ledger']:not([data-m-in]) { clip-path: inset(0 0 100% 0); }
:root[data-m-go] [data-m='vc-a-sp-ledger'][data-m-in] { animation-name: vc-a-sp-ledger; animation-duration: 800ms; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; }
@keyframes vc-a-sp-ledger { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ------------------------------------------------------------------ block 5: the clearer interlude (night, full bleed) */
.vc-a-sp-s5 { --vc-a-sp-bt: 64px; --vc-a-sp-bh: clamp(360px, 52svh, 480px); --vc-a-sp-L: calc(var(--vc-a-sp-bt) + var(--vc-a-sp-bh) / 2); }
.vc-a-sp-tr { position: relative; }
.vc-a-sp-tr__band { position: relative; margin-top: var(--vc-a-sp-bt); height: var(--vc-a-sp-bh); z-index: 2; }
.vc-a-sp-tr__band::before { content: ''; position: absolute; inset: -40px 0; pointer-events: none; background: radial-gradient(ellipse at 68% 50%, #6bb68f2e 0%, #2c3e7a22 38%, #072d2b00 70%); }
.vc-a-sp-tr__nom { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--gft-ochre); opacity: 0.7; z-index: 5; }
.vc-a-sp-tr__plot { position: absolute; inset: 0; overflow: clip; }
.vc-a-sp-tr__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vc-a-sp-tr__grid line { stroke: #6bb68f; stroke-opacity: 0.12; vector-effect: non-scaling-stroke; }
.vc-a-sp-tr__line { fill: none; stroke: #f6f4ef; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.vc-a-sp-tr__lim { vector-effect: non-scaling-stroke; stroke-width: 1.6; }
.vc-a-sp-tr__lim--cut { stroke: var(--gft-ochre); stroke-dasharray: 8 7; }
.vc-a-sp-tr__lim--nominal { stroke: #6bb68f; stroke-opacity: 0.5; }
.vc-a-sp-tr__bandfill { fill: #6bb68f; fill-opacity: 0.18; }
.vc-a-sp-tr__g, .vc-a-sp-tr__lims, .vc-a-sp-mk, .vc-a-sp-tr__f, .vc-a-sp-chip, .vc-a-sp-tr__ax > [data-for] { transition: opacity 300ms ease, visibility 0s linear 0s; }
.vc-a-sp-tr[data-mode='even'] [data-for]:not([data-for='even']), .vc-a-sp-tr[data-mode='power'] [data-for]:not([data-for='power']), .vc-a-sp-tr[data-mode='moist'] [data-for]:not([data-for='moist']) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.vc-a-sp-chip[data-for]:not([data-for='even']) { position: absolute; }
.vc-a-sp-tr[data-mode='power'] .vc-a-sp-chip[data-for='even'], .vc-a-sp-tr[data-mode='moist'] .vc-a-sp-chip[data-for='even'] { position: absolute; }
.vc-a-sp-tr[data-mode='power'] .vc-a-sp-chip[data-for='power'], .vc-a-sp-tr[data-mode='moist'] .vc-a-sp-chip[data-for='moist'] { position: static; }
.vc-a-sp-tr__lims { position: absolute; inset: 0; pointer-events: none; }
.vc-a-sp-tr__limlbl { position: absolute; right: var(--vc-a-sp-gut); transform: translateY(-120%); font: 600 12px var(--gft-font-mono); letter-spacing: 0.04em; padding: 2px 6px; background: #072d2bd9; }
.vc-a-sp-tr__limlbl--cut { color: #e4a850; }
/* A separate upper annotation lane clears the foreign-fibre callout. Opaque surfaces mask both moving rails. */
.vc-a-sp-tr__lims { z-index: 3; }
.vc-a-sp-tr__limlbl { background: #072d2b; }
.vc-a-sp-tr__lims[data-for='even'] .vc-a-sp-tr__limlbl--cut:first-child { transform: translateY(calc(-100% - 32px)); }
.vc-a-sp-tr__limlbl--nominal, .vc-a-sp-tr__limlbl--band { color: var(--vc-a-sp-pale); }
/* The opaque heading plate also clears the zoom entrance's blur and the scan head. */
.vc-a-sp-tr__head { position: absolute; left: var(--vc-a-sp-gut); top: 0; width: min(46%, 660px); z-index: 6; padding: 0 28px 28px 0; background: #072d2b; box-shadow: 0 0 0 12px #072d2b; }
/* Keep the eyebrow clear of the woven section seam, including its shed entrance. */
.vc-a-sp-tr__head .gft-eyebrow { margin-top: 24px; }
.vc-a-sp-tr__head h2 { margin-top: 12px; font-size: clamp(2rem, 3.3vw, 3.4rem); line-height: 1.04; }
.vc-a-sp-mk { position: absolute; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; }
.vc-a-sp-mk i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--gft-ochre); box-shadow: 0 0 0 5px #c98a2b40; }
.vc-a-sp-mk[data-sel] i { background: #fff; box-shadow: 0 0 0 6px #e4a85066, 0 0 18px #e4a850; }
.vc-a-sp-mk span { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 700 13px var(--gft-font-mono); padding: 3px 8px; background: #072d2b; border: 1px solid #c98a2b88; }
.vc-a-sp-mk[data-sel] span { background: var(--gft-ochre); color: var(--gft-night); border-color: var(--gft-ochre); }
:root[data-m-go] [data-m-live~='vc-a-sp-mk'][data-m-on] .vc-a-sp-mk:not([data-sel]) i { animation-name: vc-a-sp-pulse; animation-duration: 1.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.vc-a-sp-tr__rail { position: absolute; inset: 0; pointer-events: none; overflow-anchor: none; will-change: transform; z-index: 2; }
.vc-a-sp-tr__head-l { position: absolute; left: -1px; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #e4a85000 0%, #e4a850 18%, #e4a850 82%, #e4a85000 100%); box-shadow: 0 0 16px #e4a850aa; }
.vc-a-sp-tr__ax { position: absolute; left: var(--vc-a-sp-gut); bottom: -30px; margin: 0; display: flex; gap: 20px; font: 12px var(--gft-font-mono); color: var(--vc-a-sp-mist); max-width: none; }
.vc-a-sp-tr__ax > [data-for] { display: none; }
.vc-a-sp-tr__lower { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; margin-top: 64px; position: relative; z-index: 2; }
.vc-a-sp-tr__lede { font-size: 16px; line-height: 1.6; color: var(--vc-a-sp-lo); max-width: 64ch; }
.vc-a-sp-gates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 18px; border: 1px solid #6bb68f66; }
.vc-a-sp-gate { display: grid; gap: 4px; align-content: start; text-align: left; min-height: 104px; padding: 12px 14px; border: 0; border-right: 1px solid #6bb68f40; background: transparent; color: var(--gft-paper); transition: background-color 260ms; }
.vc-a-sp-gate:last-child { border-right: 0; }
.vc-a-sp-gate__k { font: 12px var(--gft-font-mono); color: var(--vc-a-sp-pale); text-transform: uppercase; letter-spacing: 0.06em; }
.vc-a-sp-gate strong { font: 800 18px/1.15 var(--gft-font-display); }
.vc-a-sp-gate em { font-style: normal; font-size: 14px; line-height: 1.4; color: var(--vc-a-sp-lo); }
.vc-a-sp-gate[aria-pressed='true'] { background: #0e4d4a; box-shadow: inset 0 -4px 0 var(--gft-ochre); }
.vc-a-sp-gate:hover { background: #0a3d3a; }
.vc-a-sp-chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.vc-a-sp-chips__k { font: 12px var(--gft-font-mono); color: var(--vc-a-sp-mist); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; }
.vc-a-sp-chip { min-height: 44px; padding: 0 14px; border: 1px solid #6bb68f77; background: transparent; color: var(--gft-paper); font: 650 14px var(--gft-font-display); }
.vc-a-sp-chip[aria-pressed='true'] { background: var(--gft-paper); color: var(--gft-night); }
.vc-a-sp-play--dark { margin-left: auto; }
.vc-a-sp-tr__read { background: #0a3d3a; border: 1px solid #6bb68f40; padding: 16px 20px; min-width: 0; }
.vc-a-sp-tr__status { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 10px; font: 12px var(--gft-font-mono); color: var(--vc-a-sp-mist); text-transform: uppercase; max-width: none; }
.vc-a-sp-tr__status b { flex: 0 0 auto; width: 25ch; min-height: 46px; display: grid; place-items: center; text-align: center; font: 750 14px/1.25 var(--gft-font-display); text-transform: none; padding: 4px 10px; border: 1px solid #6bb68f; color: #fff; }
.vc-a-sp-tr__status b[data-state='hit'] { background: var(--gft-ochre); color: var(--gft-night); border-color: var(--gft-ochre); }
.vc-a-sp-tr__stack { display: grid; }
.vc-a-sp-tr__f { grid-area: 1 / 1; min-width: 0; }
.vc-a-sp-tr__f:not([data-on]) { opacity: 0; visibility: hidden; }
.vc-a-sp-tr__f h3 { font-size: 1.5rem; margin-bottom: 8px; }
.vc-a-sp-tr__f dl { margin: 0; display: grid; gap: 8px; }
.vc-a-sp-tr__f dt { font: 12px var(--gft-font-mono); color: var(--vc-a-sp-pale); text-transform: uppercase; letter-spacing: 0.06em; }
.vc-a-sp-tr__f dd { margin: 2px 0 0; font-size: 16px; line-height: 1.5; color: #e8f0eb; }
/* hand-over to block 6: the head's line stays, the settled length gains barcode bars */
.vc-a-sp-tr__hand { position: relative; z-index: 2; margin-top: 44px; }
.vc-a-sp-tr__handk { font: 12px var(--gft-font-mono); color: var(--vc-a-sp-mist); text-transform: uppercase; letter-spacing: 0.06em; }
.vc-a-sp-tr__settled { position: relative; margin-top: 8px; height: 46px; border-top: 3px solid #f6f4ef; }
.vc-a-sp-tr__settled svg { position: absolute; left: 34%; right: 0; top: 6px; height: 34px; width: 66%; }
.vc-a-sp-tr__bars rect { fill: #f6f4ef; }
.vc-a-sp-tr__beam { position: absolute; left: 34%; top: -30px; bottom: -12px; width: 3px; background: var(--gft-ochre); box-shadow: 0 0 14px #e4a850; }
/* the shed: two paper leaves part up and down from the strand line (transform only) */
.vc-a-sp-shed { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow-anchor: none; }
.vc-a-sp-shed i { position: absolute; left: 0; right: 0; box-shadow: inset 0 0 0 100vmax var(--vc-a-sp-sand); opacity: 0; }
.vc-a-sp-shed__u { top: 0; height: var(--vc-a-sp-L); transform-origin: 50% 0; }
.vc-a-sp-shed__d { top: var(--vc-a-sp-L); bottom: 0; transform-origin: 50% 100%; }
:root[data-m-go] .vc-a-sp-shed:not([data-m-in]) i { opacity: 1; }
:root[data-m-go] .vc-a-sp-shed[data-m-in] i { animation-name: vc-a-sp-shed; animation-duration: 900ms; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; }
@keyframes vc-a-sp-shed { from { opacity: 1; transform: scaleY(1); } to { opacity: 1; transform: scaleY(0); } }
:root[data-m-go] .vc-a-sp-tr:has(> .vc-a-sp-shed:not([data-m-in])) .vc-a-sp-tr__g { clip-path: inset(0 100% 0 0); }
:root[data-m-go] .vc-a-sp-tr:has(> .vc-a-sp-shed[data-m-in]) .vc-a-sp-tr__g[data-for='even'] { animation-name: vc-a-sp-unspool; animation-duration: 700ms; animation-delay: 200ms; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; }
/* the capital line arrives from block 4 down the right gutter and straightens at the strand line */
.vc-a-sp-tr__drop { position: absolute; z-index: 1; right: calc(var(--vc-a-sp-gut) + 26px); top: 0; height: var(--vc-a-sp-L); width: 3px; pointer-events: none; }
.vc-a-sp-tr__drop i { position: absolute; inset: 0; background: var(--gft-ochre); }

/* ------------------------------------------------------------------ block 6: lot genealogy (night, indigo data layer) */
.vc-a-sp-lot__head { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr); grid-template-areas: 'e e' 't l'; gap: 10px 48px; align-items: end; margin-bottom: 24px; }
.vc-a-sp-lot__head .gft-eyebrow { grid-area: e; }
.vc-a-sp-lot__head h2 { grid-area: t; margin-top: 0; font-size: clamp(1.85rem, 2.8vw, 2.75rem); line-height: 1.04; max-width: 24ch; }
.vc-a-sp-lot__lede { grid-area: l; margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--vc-a-sp-lo); max-width: 48ch; }
.vc-a-sp-lot { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: 40px; align-items: start; --s: 3; }
.vc-a-sp-lot[data-step='0'] { --s: 0; }
.vc-a-sp-lot[data-step='1'] { --s: 1; }
.vc-a-sp-lot[data-step='2'] { --s: 2; }
.vc-a-sp-lot__pin { position: sticky; top: 32px; z-index: 1; }
.vc-a-sp-lot__stage { margin: 0; min-height: 0; background: #0b1a33f0; border: 1px solid #8391b666; border-right: 3px solid var(--gft-ochre); padding: 16px 22px 28px; display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); gap: 12px; position: relative; box-shadow: 0 16px 38px rgb(0 0 0 / 0.3); }
.vc-a-sp-lot__bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; font: 12px var(--gft-font-mono); color: #c7cfe6; text-transform: uppercase; letter-spacing: 0.06em; }
.vc-a-sp-lot__rail { position: relative; padding-top: 30px; }
.vc-a-sp-lot__wire { position: absolute; left: 12.5%; right: 12.5%; top: 43px; height: 3px; background: #8391b655; }
.vc-a-sp-lot__wire b { position: absolute; inset: 0; background: var(--gft-ochre); transform-origin: 0 50%; transform: scaleX(calc(var(--s) / 3)); transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1); }
.vc-a-sp-lot__nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.vc-a-sp-lot__nodes a { display: grid; justify-items: center; gap: 2px; min-height: 44px; text-decoration: none; color: #e6eaf5; }
.vc-a-sp-lot__nodes a i { width: 28px; height: 28px; border-radius: 50%; background: #0b1a33; border: 3px solid #8391b6; transition: background-color 300ms, border-color 300ms; }
.vc-a-sp-lot__nodes b { font: 800 15px var(--gft-font-mono); }
.vc-a-sp-lot__nodes span { font-size: 12.5px; color: #c7cfe6; }
.vc-a-sp-lot__nodes li:nth-child(1) a i { background: var(--gft-ochre); border-color: var(--gft-ochre); }
.vc-a-sp-lot:is([data-step='1'], [data-step='2'], [data-step='3']) .vc-a-sp-lot__nodes li:nth-child(2) a i,
.vc-a-sp-lot:is([data-step='2'], [data-step='3']) .vc-a-sp-lot__nodes li:nth-child(3) a i,
.vc-a-sp-lot[data-step='3'] .vc-a-sp-lot__nodes li:nth-child(4) a i { background: var(--gft-ochre); border-color: var(--gft-ochre); }
.vc-a-sp-lot__nodes a[aria-current] i { box-shadow: 0 0 0 6px #e4a85044; }
.vc-a-sp-lot__tokrail { position: absolute; left: 0; right: 0; top: 0; height: 26px; pointer-events: none; }
.vc-a-sp-lot__token { position: absolute; left: 0; top: 0; width: 25%; display: grid; justify-items: center; transform: translateX(calc(var(--s) * 100%)); transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1); }
.vc-a-sp-lot__tok { grid-area: 1 / 1; font: 700 12px var(--gft-font-mono); font-style: normal; padding: 3px 8px; background: var(--gft-ochre); color: var(--gft-night); white-space: nowrap; transition: opacity 300ms ease; }
.vc-a-sp-lot__tok--b { opacity: 0; }
.vc-a-sp-lot[data-step='3'] .vc-a-sp-lot__token { justify-items: end; }
.vc-a-sp-lot[data-step='3'] .vc-a-sp-lot__tok--a { opacity: 0; }
.vc-a-sp-lot[data-step='3'] .vc-a-sp-lot__tok--b { opacity: 1; }
.vc-a-sp-lot__scan { position: relative; height: 48px; background: #f6f4ef; padding: 5px 10px; overflow: hidden; }
.vc-a-sp-lot__code { position: absolute; left: 10px; right: 10px; top: 6px; height: 36px; width: calc(100% - 20px); }
.vc-a-sp-lot__code rect { fill: #0b1a33; }
.vc-a-sp-lot__code--lit rect { fill: #a86a12; }
.vc-a-sp-lot__code--lit { clip-path: inset(0 calc(100% - (var(--s) + 1) * 25%) 0 0); transition: clip-path 800ms cubic-bezier(0.65, 0, 0.35, 1); }
.vc-a-sp-lot__q { position: absolute; left: 10px; top: 0; bottom: 0; width: calc((100% - 20px) / 4); transform: translateX(calc(var(--s) * 100%)); transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1); overflow: hidden; }
.vc-a-sp-lot__sweep { position: absolute; inset: 0; transform: translateX(100%); }
.vc-a-sp-lot__beam { position: absolute; left: -3px; top: 0; bottom: 0; width: 3px; background: #e04f2a; box-shadow: 0 0 10px #e04f2a; }
:root[data-m-go] .vc-a-sp-lot__q[data-m-on] .vc-a-sp-lot__sweep { animation-name: vc-a-sp-sweep; animation-duration: 1.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vc-a-sp-sweep { from { transform: translateX(0); } to { transform: translateX(100%); } }
.vc-a-sp-lot__strand svg { width: 100%; height: 42px; display: block; }
.vc-a-sp-lot__fz { stroke: #f6f4ef; stroke-width: 2; fill: none; opacity: 0; transition: opacity 400ms ease; vector-effect: non-scaling-stroke; }
.vc-a-sp-lot__fz--3 path:last-child { fill: #0e4d4a; stroke: #6bb68f; }
.vc-a-sp-lot[data-step='0'] .vc-a-sp-lot__fz--0, .vc-a-sp-lot[data-step='1'] .vc-a-sp-lot__fz--1, .vc-a-sp-lot[data-step='2'] .vc-a-sp-lot__fz--2, .vc-a-sp-lot[data-step='3'] .vc-a-sp-lot__fz--3 { opacity: 1; }
.vc-a-sp-lot__strandlbl { display: grid; margin: 2px 0 0; font: 12.5px var(--gft-font-mono); color: #e6eaf5; max-width: none; }
.vc-a-sp-lot__strandlbl b { grid-area: 1 / 1; font-weight: 600; opacity: 0; visibility: hidden; transition: none; }
.vc-a-sp-lot[data-step='0'] .s0, .vc-a-sp-lot[data-step='1'] .s1, .vc-a-sp-lot[data-step='2'] .s2, .vc-a-sp-lot[data-step='3'] .s3 { opacity: 1; }
/* Withdraw the outgoing caption immediately; only the incoming caption fades into the reserved row. */
.vc-a-sp-lot[data-step='0'] .vc-a-sp-lot__strandlbl .s0, .vc-a-sp-lot[data-step='1'] .vc-a-sp-lot__strandlbl .s1,
.vc-a-sp-lot[data-step='2'] .vc-a-sp-lot__strandlbl .s2, .vc-a-sp-lot[data-step='3'] .vc-a-sp-lot__strandlbl .s3 { visibility: visible; transition: opacity 300ms ease; }
.vc-a-sp-pass { position: relative; min-height: 0; background: #f6f4ef; color: var(--gft-ink); padding: 10px 14px 50px; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.vc-a-sp-pass__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 4px; font: 700 12px var(--gft-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: #2c3e7a; max-width: none; }
.vc-a-sp-pass__n b { font-size: 15px; }
.vc-a-sp-pass__list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 3px; min-height: 0; }
.vc-a-sp-pass__list li { display: grid; border-top: 1px solid #d3d8e6; padding-top: 3px; min-height: 0; overflow: hidden; }
.vc-a-sp-pass__list li > span { grid-area: 1 / 1; transition: opacity 360ms ease, visibility 0s linear 0s; }
.vc-a-sp-pass__wait { font: 12.5px var(--gft-font-mono); color: #4a5470; border: 1px dashed #9aa3bf; padding: 2px 8px; align-self: start; justify-self: start; }
.vc-a-sp-pass__rec { display: grid; gap: 1px; font-size: 13px; line-height: 1.32; }
.vc-a-sp-pass__rec b { font: 700 12.5px var(--gft-font-mono); color: #2c3e7a; }
.vc-a-sp-pass__wait { opacity: 0; visibility: hidden; }
.vc-a-sp-lot[data-step='0'] .vc-a-sp-pass__list li:is([data-r='1'], [data-r='2'], [data-r='3']) .vc-a-sp-pass__rec,
.vc-a-sp-lot[data-step='1'] .vc-a-sp-pass__list li:is([data-r='2'], [data-r='3']) .vc-a-sp-pass__rec,
.vc-a-sp-lot[data-step='2'] .vc-a-sp-pass__list li[data-r='3'] .vc-a-sp-pass__rec { opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.vc-a-sp-lot[data-step='0'] .vc-a-sp-pass__list li:is([data-r='1'], [data-r='2'], [data-r='3']) .vc-a-sp-pass__wait,
.vc-a-sp-lot[data-step='1'] .vc-a-sp-pass__list li:is([data-r='2'], [data-r='3']) .vc-a-sp-pass__wait,
.vc-a-sp-lot[data-step='2'] .vc-a-sp-pass__list li[data-r='3'] .vc-a-sp-pass__wait { opacity: 1; visibility: visible; }
/* step 4: dispatch stays inside the reserved strip below every passport record. */
.vc-a-sp-pass__label { position: absolute; right: 12px; bottom: 10px; padding: 4px 10px; background: var(--gft-ochre); color: var(--gft-night); font: 800 13px var(--gft-font-mono); transform: translate(-40px, 0) rotate(-2deg); opacity: 0; transition: transform 1000ms cubic-bezier(0.65, 0, 0.35, 1), opacity 400ms ease; }
.vc-a-sp-lot[data-step='3'] .vc-a-sp-pass__label { opacity: 1; transform: translate(0, 0) rotate(2deg); }
.vc-a-sp-lot__track { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; position: relative; z-index: 2; }
.vc-a-sp-lot__track > li.vc-a-sp-lot__li { min-height: 36svh; padding-block: 1svh; padding-inline-start: 1.2rem; align-content: center; scroll-margin-top: 0; }
.vc-a-sp-lot__track > li.vc-a-sp-lot__li:last-child { min-height: 38svh; align-content: center; padding-bottom: 1svh; }
.vc-a-sp-lot__track > li::before { background: #8391b655; }
.vc-a-sp-lot__track > li::after { background: var(--gft-ochre); box-shadow: none; }
.vc-a-sp-lot__c { position: relative; margin-left: -32px; background: #0b1a33; border: 1px solid #8391b666; border-left: 4px solid #6bb68f; padding: 16px 20px; box-shadow: -10px 12px 28px rgb(0 0 0 / 0.28); }
.vc-a-sp-lot__ck { display: flex; align-items: baseline; gap: 12px; font: 12px var(--gft-font-mono); color: #c7cfe6; text-transform: uppercase; letter-spacing: 0.05em; max-width: none; margin: 0; }
.vc-a-sp-lot__n { font: 850 30px/1 var(--gft-font-display); color: var(--vc-a-sp-och); letter-spacing: -0.04em; flex: none; }
.vc-a-sp-lot__c h3 { margin: 6px 0 6px; font-size: clamp(1.2rem, 1.65vw, 1.5rem); }
.vc-a-sp-lot__t { font-size: 15px; line-height: 1.55; color: #e6eaf5; }
.vc-a-sp-lot__viz { margin: 10px 0 0; padding: 8px 10px; background: #081529; border: 1px solid #8391b644; }
.vc-a-sp-lot__viz svg { display: block; width: 100%; height: auto; }
.vc-a-sp-lot__li[data-active] .vc-a-sp-lot__c { border-color: var(--gft-ochre); border-left-color: var(--gft-ochre); }
.vc-a-sp-lot__bridge { margin-top: 20px; padding: 10px 18px; background: #0b1a33cc; border: 1px solid #8391b644; border-top: 2px solid var(--gft-ochre); }
.vc-a-sp-lot__bridge svg { display: block; width: 100%; height: 68px; }
/* entrance: barcode bars comb in left to right, then the rail draws (settled in 900 ms) */
:root[data-m-go] .vc-a-sp-lot__stage:not([data-m-in]) .vc-a-sp-lot__bars rect { opacity: 0; }
:root[data-m-go] .vc-a-sp-lot__stage:not([data-m-in]) .vc-a-sp-lot__wire { clip-path: inset(0 100% 0 0); }
:root[data-m-go] .vc-a-sp-lot__stage[data-m-in] .vc-a-sp-lot__bars rect { animation-name: vc-a-sp-bar; animation-duration: 200ms; animation-timing-function: ease-out; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; animation-delay: calc(var(--b) * 11ms); }
:root[data-m-go] .vc-a-sp-lot__stage[data-m-in] .vc-a-sp-lot__wire { animation-name: vc-a-sp-unspool; animation-duration: 420ms; animation-delay: 420ms; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; }
@keyframes vc-a-sp-bar { from { opacity: 0; transform: translateY(-6px); } }
:root[data-m-go] [data-m='vc-a-sp-comb'], :root[data-m-go] [data-m='vc-a-sp-unspool'], :root[data-m-go] [data-m='vc-a-sp-wind'] { animation-name: none; }

/* ------------------------------------------------------------------ block 7: the cone dispatcher (deep teal) */
.vc-a-sp-cl__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: end; margin-bottom: 18px; }
.vc-a-sp-cl__head h2 { margin-top: 8px; font-size: clamp(1.85rem, 2.7vw, 2.65rem); line-height: 1.04; max-width: 26ch; }
.vc-a-sp-cl__pull { display: grid; gap: 8px; padding-left: 18px; border-left: 3px solid var(--gft-ochre); }
.vc-a-sp-cl__ex { margin: 0; font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.32; color: #e8d2a8; }
.vc-a-sp-cl__lede { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--vc-a-sp-lo); }

.vc-a-sp-cl__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: stretch; container-type: inline-size; }
.vc-a-sp-cl__fig { position: relative; margin: 0; background: #072d2b; border: 1px solid #6bb68f44; padding: 12px 18px 10px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; min-height: 360px; }
.vc-a-sp-cl__figbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid #ffffff1f; font: 700 12px var(--gft-font-mono); color: var(--vc-a-sp-pale); letter-spacing: 0.05em; }
.vc-a-sp-cl__svg { width: 100%; height: 100%; max-height: 290px; display: block; overflow: visible; }
.vc-a-sp-cl__telemetry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 8px; border-top: 1px solid #ffffff1f; }
.vc-a-sp-cl__telemetry > div { display: grid; gap: 2px; }
.vc-a-sp-cl__telemetry span { font: 12px var(--gft-font-mono); color: var(--vc-a-sp-mist); text-transform: uppercase; letter-spacing: 0.05em; }
.vc-a-sp-cl__telemetry b { font: 750 14.5px/1.2 var(--gft-font-display); color: #fff; }
.vc-a-sp-cl__roll { fill: #072d2b; stroke: #6bb68f; stroke-width: 2.4; }
.vc-a-sp-cl__roll--b { stroke: var(--gft-ochre); }
.vc-a-sp-cl__yarn { stroke: #f6f4ef; stroke-width: 3; fill: none; }
.vc-a-sp-cl__dv { opacity: 0; transition: opacity 360ms ease; }
.vc-a-sp-cl[data-dest='jersey'] .vc-a-sp-cl__dv[data-for='jersey'], .vc-a-sp-cl[data-dest='shirting'] .vc-a-sp-cl__dv[data-for='shirting'], .vc-a-sp-cl[data-dest='drill'] .vc-a-sp-cl__dv[data-for='drill'] { opacity: 1; }
.vc-a-sp-cl__pay path { fill: none; stroke: #f6f4ef; stroke-linecap: round; }
.vc-a-sp-cl__payline { stroke-width: calc(var(--cl-yw, 2.2) * 1px); }
.vc-a-sp-cl__payflow { stroke: var(--gft-ochre) !important; stroke-width: 2; }
.vc-a-sp-cl__tag rect { fill: var(--gft-ochre); }
.vc-a-sp-cl__tag text { fill: var(--gft-night); font: 800 15px var(--gft-font-mono); }
.vc-a-sp-cl__glyph { opacity: 0; transition: opacity 420ms ease; }
.vc-a-sp-cl__glyph :is(ellipse, rect, polygon, circle) { fill: #0e4d4a; stroke: #6bb68f; stroke-width: 2; }
.vc-a-sp-cl__w { stroke: #f6f4ef; stroke-opacity: 0.7; stroke-width: 1.3; fill: none; }
.vc-a-sp-cl__glyph text, .vc-a-sp-cl__lbl { fill: var(--vc-a-sp-pale); font: 700 14px var(--gft-font-mono); letter-spacing: 0.04em; }
.vc-a-sp-cl:is([data-dest='shirting'], [data-dest='drill']) .vc-a-sp-cl__glyph[data-g='beam'], .vc-a-sp-cl[data-dest='jersey'] .vc-a-sp-cl__glyph[data-g='creel'] { opacity: 1; }
.vc-a-sp-cl__panel { grid-column: 2; align-self: stretch; display: grid; align-content: space-between; gap: 10px; padding: 14px 16px; background: #072d2b; border: 1px solid #6bb68f44; }
.vc-a-sp-dest { border: 0; margin: 0; padding: 0; display: grid; gap: 5px; min-width: 0; }
.vc-a-sp-dest legend { font: 700 12px var(--gft-font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--vc-a-sp-pale); margin-bottom: 4px; }
.vc-a-sp-dest label { position: relative; }
.vc-a-sp-dest input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; min-height: 0; }
.vc-a-sp-dest span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1px solid #6bb68f66; font: 700 15px/1.2 var(--gft-font-display); color: #fff; transition: background-color 260ms, color 260ms, border-color 260ms; }
.vc-a-sp-dest small { font: 12px var(--gft-font-mono); color: var(--vc-a-sp-lo); }
.vc-a-sp-dest input:checked + span { background: var(--gft-ochre); color: var(--gft-night); border-color: var(--gft-ochre); }
.vc-a-sp-dest input:checked + span small { color: #2b2210; }
.vc-a-sp-dest input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }

.vc-a-sp-cl__scrub { padding: 8px 12px; background: #0a3d3a; border: 1px solid #6bb68f40; display: grid; gap: 4px; }
.vc-a-sp-cl__scrub-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 700 12px var(--gft-font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--vc-a-sp-pale); }
.vc-a-sp-cl__scrub-lbl b { font: 800 14px var(--gft-font-mono); color: var(--vc-a-sp-och); text-transform: none; }
.vc-a-sp-cl__scrub input { width: 100%; margin: 0; min-height: 36px; accent-color: var(--gft-ochre); cursor: pointer; }
.vc-a-sp-cl__scrub-ticks { display: flex; justify-content: space-between; gap: 8px; margin: 0; font: 12px var(--gft-font-mono); color: var(--vc-a-sp-mist); max-width: none; }

.vc-a-sp-cl__read { display: grid; }
.vc-a-sp-cl__read dl { grid-area: 1 / 1; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.vc-a-sp-cl__read dl:not([data-on]) { opacity: 0; visibility: hidden; }
.vc-a-sp-cl__read dt { font: 12px var(--gft-font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--vc-a-sp-pale); }
.vc-a-sp-cl__read dd { margin: 2px 0 0; font: 700 14.5px/1.28 var(--gft-font-display); color: #fff; }

/* full-width next-stage hand-over bar */
.vc-a-sp-handbar { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.38fr); gap: 24px; align-items: center; padding: 14px 18px; background: #072d2b; border: 1px solid #6bb68f55; border-left: 5px solid var(--gft-ochre); }
.vc-a-sp-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 68px; padding: 12px 18px; background: var(--gft-paper); color: var(--gft-night); text-decoration: none; transition: background-color 220ms, transform 220ms; }
.vc-a-sp-cta:hover { background: #fff; transform: translateX(3px); }
.vc-a-sp-cta__copy { display: grid; gap: 2px; }
.vc-a-sp-cta__k { font: 700 12px var(--gft-font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--vc-a-sp-leaf-ink) !important; }
.vc-a-sp-cta span { display: block; font: 850 20px/1.1 var(--gft-font-display); letter-spacing: -0.025em; color: var(--gft-night); }
.vc-a-sp-cta small { font: 12px/1.35 var(--gft-font-mono); letter-spacing: 0; color: var(--vc-a-sp-muted); font-weight: 400; }
.vc-a-sp-cta i { font-style: normal; font-size: 26px; color: var(--gft-forest); }
/* the paid-out strand runs on: along the stage foot to the right gutter, then down into the footer's thread */
.vc-a-sp-cl__run { position: absolute; left: calc(100% - 1.5px); top: 100%; width: calc(20px + (100cqw - 20px) / 2.65 + var(--vc-a-sp-gut) / 2 + 1.5px); height: 220vh; pointer-events: none; }
.vc-a-sp-cl__run::before { content: ''; position: absolute; left: 0; top: -1px; width: calc(100% - 20px); height: 26px; border-left: 3px solid #f6f4ef; border-bottom: 3px solid #f6f4ef; border-bottom-left-radius: 18px; }
.vc-a-sp-cl__run::after { content: ''; position: absolute; right: 0; top: 23px; bottom: 0; width: 22px; border-top: 3px solid #f6f4ef; border-right: 3px solid #f6f4ef; border-top-right-radius: 18px; }

.vc-a-sp-rail { margin: 0; min-width: 0; }
.vc-a-sp-rail__k { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font: 12px var(--gft-font-mono); color: var(--vc-a-sp-pale); text-transform: uppercase; letter-spacing: 0.06em; max-width: none; margin: 0; }
.vc-a-sp-rail__body { position: relative; margin-top: 6px; }
.vc-a-sp-rail__line { position: absolute; left: 5%; right: 5%; top: 18px; height: 2px; background: #6bb68f55; --vc-a-sp-seg: calc(100% / 9); }
.vc-a-sp-rail__lit { position: absolute; top: -1px; height: 4px; left: calc(var(--vc-a-sp-seg) * 3); width: var(--vc-a-sp-seg); background: var(--gft-ochre); }
.vc-a-sp-rail__bead { position: absolute; top: -5px; left: calc(var(--vc-a-sp-seg) * 3); width: var(--vc-a-sp-seg); height: 12px; overflow-anchor: none; }
.vc-a-sp-rail__bead::before { content: ''; position: absolute; left: -6px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #e4a850; }
:root[data-m-go] .vc-a-sp-rail__bead[data-m-on] { animation-name: vc-a-sp-bead; animation-duration: 2.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes vc-a-sp-bead { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
.vc-a-sp-rail__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); position: relative; }
.vc-a-sp-rail__a { display: grid; justify-items: center; text-align: center; gap: 2px; min-height: 44px; padding: 6px 2px 4px; text-decoration: none; color: #e7efe9; }
.vc-a-sp-rail__node { width: 18px; height: 18px; border-radius: 50%; background: #0a3d3a; border: 2px solid #6bb68f; transition: transform 260ms var(--gft-ease-out); }
.vc-a-sp-rail__a b { font: 700 12px var(--gft-font-mono); color: var(--vc-a-sp-pale); }
.vc-a-sp-rail__a strong { font-size: 12.5px; line-height: 1.15; }
.vc-a-sp-rail__a em { font-style: normal; font-size: 12px; line-height: 1.2; color: var(--vc-a-sp-lo); display: none; }
a.vc-a-sp-rail__a:hover .vc-a-sp-rail__node { transform: scale(1.25); background: #6bb68f; }
.vc-a-sp-rail__li.is-current .vc-a-sp-rail__node { background: var(--gft-ochre); border-color: var(--gft-ochre); box-shadow: 0 0 0 5px #c98a2b44; }
.vc-a-sp-rail__li.is-next .vc-a-sp-rail__node { border-color: var(--gft-ochre); }
.vc-a-sp-rail__li.is-next strong { color: var(--vc-a-sp-och); }

.vc-a-sp-footbar { margin-top: 14px; display: grid; gap: 10px; }
.vc-a-sp-drawer { background: #072d2b; border: 1px solid #6bb68f38; padding: 0 16px; }
.vc-a-sp-drawer > summary { min-height: 46px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; cursor: pointer; font: 700 14px var(--gft-font-display); color: #e7efe9; }
.vc-a-sp-drawer > summary small { font: 12px var(--gft-font-mono); color: var(--vc-a-sp-pale); }
.vc-a-sp-tools { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vc-a-sp-tool { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 14px 16px; background: #0a3d3a; border: 1px solid #6bb68f40; }
.vc-a-sp-tool svg { width: 100%; height: auto; align-self: start; margin-top: 4px; }
.vc-a-sp-tool__k { font: 12px var(--gft-font-mono); color: var(--vc-a-sp-pale); text-transform: uppercase; letter-spacing: 0.06em; }
.vc-a-sp-tool h3 { font-size: 17px; line-height: 1.2; letter-spacing: -0.02em; margin: 4px 0 8px; }
.vc-a-sp-tool__ctl { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-a-sp-tool__pick { min-height: 44px; padding: 0 12px; border: 1px solid #6bb68f77; background: transparent; color: #fff; font: 650 14px var(--gft-font-display); }
.vc-a-sp-tool__pick[aria-pressed='true'] { background: var(--gft-paper); color: var(--gft-night); }
.vc-a-sp-tool__ro { display: grid; margin-top: 8px; }
.vc-a-sp-tool__row { grid-area: 1 / 1; margin: 0; font-size: 15px; line-height: 1.45; color: #dbe7e0; }
.vc-a-sp-tool__row:not([data-on]) { opacity: 0; visibility: hidden; }
.vc-a-sp-tool__row b { color: var(--vc-a-sp-och); font-size: 17px; }
.vc-a-sp-tool__a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; font: 650 15px var(--gft-font-display); color: #fff; }
.vc-a-sp-tool__a.is-pending { color: var(--vc-a-sp-lo); }
.vc-a-sp-tool__ax { stroke: #6bb68f88; stroke-width: 1.5; fill: none; }
.vc-a-sp-tool__bar--a { fill: var(--gft-ochre); }
.vc-a-sp-tool__bar--b { fill: #6bb68f; }
.vc-a-sp-tool__peg { stroke: var(--gft-ochre); stroke-width: 2.5; }
.vc-a-sp-tool__wave { stroke: #9fd0b6; stroke-width: 2; fill: none; }
.vc-a-sp-tool__node { fill: #0a3d3a; stroke: #6bb68f; stroke-width: 2; }
.vc-a-sp-tool[data-pick='b'] .vc-a-sp-tool__bar--a, .vc-a-sp-tool[data-pick='peg'] .vc-a-sp-tool__wave, .vc-a-sp-tool[data-pick='usd'] .vc-a-sp-tool__peg { opacity: 0.35; }
.vc-a-sp-tool[data-pick='garoua'] .vc-a-sp-tl-n:nth-of-type(1), .vc-a-sp-tool[data-pick='dibamba'] .vc-a-sp-tl-n:nth-of-type(2) { fill: var(--gft-ochre); }
:root[data-m-go] [data-m-live~='vc-a-sp-toolloop'][data-m-on] :is(.vc-a-sp-tl-a, .vc-a-sp-tl-b) { transform-box: fill-box; transform-origin: 50% 100%; animation-name: vc-a-sp-toolbar; animation-duration: 3.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
:root[data-m-go] [data-m-live~='vc-a-sp-toolloop'][data-m-on] .vc-a-sp-tl-w { animation-name: vc-a-sp-toolwave; animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
:root[data-m-go] [data-m-live~='vc-a-sp-toolloop'][data-m-on] .vc-a-sp-tl-n { transform-box: fill-box; transform-origin: center; animation-name: vc-a-sp-toolnode; animation-duration: 2.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vc-a-sp-toolbar { from { transform: scaleY(0.82); } to { transform: scaleY(1); } }
@keyframes vc-a-sp-toolwave { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@keyframes vc-a-sp-toolnode { from { transform: scale(0.85); } to { transform: scale(1.15); } }

.vc-a-sp-note { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; border-top: 1px solid #ffffff26; padding-top: 6px; }
.vc-a-sp-note__d { flex: 1 1 460px; }
.vc-a-sp-note__d summary { min-height: 44px; display: flex; align-items: center; font-size: 13px; line-height: 1.4; color: #e7efe9; cursor: pointer; }
.vc-a-sp-note__d p { font-size: 13.5px; line-height: 1.6; color: var(--vc-a-sp-lo); max-width: 110ch; padding-bottom: 8px; }
.vc-a-sp-note__src { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font: 12px var(--gft-font-mono); color: var(--vc-a-sp-mist); }

/* entrance: the strand winds onto the cone, then pays out to the destination (900 ms) */
:root[data-m-go] .vc-a-sp-cl__fig:not([data-m-in]) .vc-a-sp-cl__pay { clip-path: inset(0 100% 0 0); }
:root[data-m-go] .vc-a-sp-cl__fig:not([data-m-in]) .vc-a-sp-cl__cone { opacity: 0.2; transform: translate(420px, 190px) scale(0.86); }
:root[data-m-go] .vc-a-sp-cl__fig[data-m-in] .vc-a-sp-cl__pay { animation-name: vc-a-sp-unspool; animation-duration: 560ms; animation-delay: 340ms; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; }
:root[data-m-go] .vc-a-sp-cl__fig[data-m-in] .vc-a-sp-cl__cone { animation-name: vc-a-sp-cone; animation-duration: 520ms; animation-timing-function: var(--gft-ease-out); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; }
@keyframes vc-a-sp-cone { from { opacity: 0.2; transform: translate(420px, 190px) scale(0.86); } to { opacity: 1; transform: translate(420px, 190px) scale(1); } }
.vc-a-sp-cl__cone { transform: translate(420px, 190px); }

/* ------------------------------------------------------------------ phones and tablets */
@media (max-width: 1100px) {
  .vc-a-sp-st__name { font-size: 18px; }
  .vc-a-sp-st__n, .vc-a-sp-bench__out { font-size: 17px; }
  .vc-a-sp-mach__lbl text, .vc-a-sp-inset__t, .vc-a-sp-noil__t { font-size: 18px; }
  .vc-a-sp-cl__glyph text, .vc-a-sp-cl__lbl, .vc-a-sp-cl__tag text { font-size: 18px; }
}
@media (max-width: 900px) {
  .vc-a-sp-s2 { --vc-a-sp-reach: 40px; padding-bottom: 56px; }
  .vc-a-sp-bench { --vc-a-sp-bp: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'tag' 'band' 'lower' 'foot'; padding: 20px 16px; }
  .vc-a-sp-bench__tag { justify-self: start; text-align: left; margin-top: 10px; }
  .vc-a-sp-lane--in, .vc-a-sp-out { display: none; }
  .vc-a-sp-lane--phone { display: block; left: calc(var(--vc-a-sp-gut) / -2 - 8px); top: calc(-1 * var(--vc-a-sp-reach)); width: 14px; height: calc(var(--vc-a-sp-reach) + 96px); -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .vc-a-sp-bench::after { content: ''; position: absolute; right: calc(var(--vc-a-sp-gut) / -2 - 2px); top: 40%; height: 200vh; width: 3px; background: #f6f4ef; pointer-events: none; }
  .vc-a-sp-bench__band { position: sticky; top: 0; z-index: 3; margin: 14px -17px 0; padding: 8px 0 4px; background: #0a3d3a; border-bottom: 1px solid #6bb68f40; overflow: hidden; container-type: inline-size; }
  .vc-a-sp-bench__strand { width: 860px; container-type: normal; transform: translateX(calc(50cqw - 107.5px - var(--i, 4) * 121.8px)); transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1); }
  .vc-a-sp-bench__lower { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vc-a-sp-bench__ctl, .vc-a-sp-bench__scrub { grid-template-columns: minmax(0, 1fr); }
  .vc-a-sp-play { justify-content: center; }
  .vc-a-sp-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vc-a-sp-big { font-size: 42px; }
  .vc-a-sp-bench__ro { grid-template-columns: minmax(0, 1fr); }
  .vc-a-sp-bench__cap { flex-direction: column; gap: 2px; }

  .vc-a-sp-s3 { padding-top: 56px; }
  .vc-a-sp-s3__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'e' 't' 'l'; }
  .vc-a-sp-mf { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .vc-a-sp-mf__visual { top: 0; z-index: 3; height: 38svh; margin-left: 0; }
  .vc-a-sp-mf__stage { padding: 8px 12px; grid-template-rows: auto minmax(0, 1fr) auto; border-right: 0; }
  .vc-a-sp-conv, .vc-a-sp-ghost, .vc-a-sp-row { margin-left: 0; }
  .vc-a-sp-row__viz { display: none; }
  .vc-a-sp-mf__tag b { font-size: 1.15rem; }
  .vc-a-sp-mach__lbl, .vc-a-sp-inset__t, .vc-a-sp-noil__t { display: none; }
  .vc-a-sp-mf__ro { padding-top: 4px; gap: 4px; }
  .vc-a-sp-mf__dl, .vc-a-sp-cband { display: none; }
  .vc-a-sp-mf__note { min-height: 5.4em; font-size: 12px; }
  .vc-a-sp-tog span { min-height: 56px; }
  .vc-a-sp-row__dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vc-a-sp-mf__track > li.vc-a-sp-mf__li { min-height: 0; padding-block: 16px; }
  .vc-a-sp-mf__track > li.vc-a-sp-mf__li:last-child { min-height: 56svh; padding-bottom: 8vh; }

  .vc-a-sp-cap__bar { grid-template-columns: 1fr 1fr; }
  .vc-a-sp-cap__slider { grid-column: 1 / -1; grid-row: 2; }
  .vc-a-sp-end { min-height: 84px; padding: 10px 12px; }
  .vc-a-sp-end span { display: none; }
  .vc-a-sp-strip { overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 4px 20px; }
  .vc-a-sp-strip__list { grid-template-columns: repeat(8, 96px); }
  .vc-a-sp-strip__line { left: 20px; width: calc(8 * 96px + 7 * 10px); right: auto; }
  .vc-a-sp-tile { height: 132px; scroll-snap-align: start; padding: 10px; }
  .vc-a-sp-tile__n { font-size: 28px; }
  .vc-a-sp-tile strong { font-size: 15px; }
  .vc-a-sp-cap__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .vc-a-sp-cap__arch { display: none; }
  .vc-a-sp-cf { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 40px; }
  .vc-a-sp-cf__visual { order: -1; top: 0; z-index: 4; height: 38svh; margin-right: 0; }
  .vc-a-sp-cf__stage { padding: 8px 12px; border-left: 0; }
  .vc-a-sp-ev { margin-right: 0; }
  .vc-a-sp-ev__chart { display: none; }
  .vc-a-sp-cf__tabs, .vc-a-sp-hb:not(.vc-a-sp-hb--pay), .vc-a-sp-cfp__pair, .vc-a-sp-peg, .vc-a-sp-cfp__sw, .vc-a-sp-cfp__ro, .vc-a-sp-mini, .vc-a-sp-cf__drop { display: none; }
  .vc-a-sp-cf__route { grid-template-columns: minmax(0, 1fr); }
  .vc-a-sp-cfp { padding-top: 6px; gap: 6px; }
  .vc-a-sp-cfp__big > span { font-size: 2.2rem; }
  .vc-a-sp-cfp__big small { font-size: 13px; }
  .vc-a-sp-cfp__charts { height: 110px; }
  .vc-a-sp-b--row { grid-template-rows: 26px; }
  .vc-a-sp-cf__track > li.vc-a-sp-cf__li { min-height: 0; padding-block: 20px; }
  .vc-a-sp-cf__track > li.vc-a-sp-cf__li:last-child { min-height: 60svh; }
  .vc-a-sp-cap__out i { right: 6px; }

  .vc-a-sp-s5 { --vc-a-sp-bt: 40px; --vc-a-sp-bh: auto; --vc-a-sp-L: 40px; }
  .vc-a-sp-tr__band { height: auto; display: grid; }
  .vc-a-sp-tr__head { position: static; width: auto; padding: 0 var(--vc-a-sp-gut) 16px; background: none; box-shadow: none; }
  .vc-a-sp-tr__plot { position: relative; height: 32svh; }
  .vc-a-sp-tr__nom { top: 0; display: none; }
  .vc-a-sp-tr__limlbl { right: 8px; }
  .vc-a-sp-mk span { display: none; }
  .vc-a-sp-tr__ax { position: static; padding: 8px var(--vc-a-sp-gut) 0; }
  .vc-a-sp-tr__lower { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 20px; }
  .vc-a-sp-gate { min-height: 0; padding: 10px; }
  .vc-a-sp-gate em { display: none; }
  .vc-a-sp-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .vc-a-sp-chip { flex: none; }
  .vc-a-sp-tr__drop { right: calc(var(--vc-a-sp-gut) / 2); }
  .vc-a-sp-tr__status { display: grid; gap: 6px; }
  .vc-a-sp-tr__status b { width: auto; min-height: 3.6em; }

  .vc-a-sp-lot__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'e' 't' 'l'; margin-bottom: 20px; }
  .vc-a-sp-lot { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vc-a-sp-lot__pin { display: contents; }
  .vc-a-sp-lot__stage { position: sticky; top: 0; z-index: 3; height: 40svh; overflow: hidden; background: #0b1a33; padding: 8px 12px; gap: 8px; grid-template-rows: auto auto auto minmax(0, 1fr); margin-inline: -4px; }
  .vc-a-sp-lot__bar, .vc-a-sp-lot__strandlbl, .vc-a-sp-lot__viz, .vc-a-sp-lot__bridge { display: none; }
  .vc-a-sp-lot__nodes span { display: none; }
  .vc-a-sp-lot__rail { padding-top: 30px; }
  .vc-a-sp-lot__scan { height: 40px; }
  .vc-a-sp-lot__code { height: 28px; }
  .vc-a-sp-lot__strand svg { height: 30px; }
  .vc-a-sp-pass { padding: 6px 10px; }
  .vc-a-sp-pass__h, .vc-a-sp-pass__label { display: none; }
  .vc-a-sp-pass__list li { display: none; border: 0; }
  .vc-a-sp-lot[data-step='0'] .vc-a-sp-pass__list li[data-r='0'], .vc-a-sp-lot[data-step='1'] .vc-a-sp-pass__list li[data-r='1'], .vc-a-sp-lot[data-step='2'] .vc-a-sp-pass__list li[data-r='2'], .vc-a-sp-lot[data-step='3'] .vc-a-sp-pass__list li[data-r='3'] { display: grid; }
  .vc-a-sp-lot__c { margin-left: 0; }
  .vc-a-sp-lot__track > li.vc-a-sp-lot__li { min-height: 48svh; padding-block: 20px; }
  .vc-a-sp-lot__track > li.vc-a-sp-lot__li:last-child { min-height: 68svh; padding-bottom: 8vh; }

  .vc-a-sp-cl__top, .vc-a-sp-cl__stage, .vc-a-sp-handbar { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .vc-a-sp-cl__fig { min-height: 0; }
  .vc-a-sp-cl__panel { grid-column: 1; }
  .vc-a-sp-cl__figbar, .vc-a-sp-cl__telemetry, .vc-a-sp-cl__lbl, .vc-a-sp-cl__glyph text, .vc-a-sp-cl__tag { display: none; }
  .vc-a-sp-cl__run { width: calc(var(--vc-a-sp-gut) / 2 + 1.5px); }
  .vc-a-sp-cl__read dl { grid-template-columns: 1fr 1fr; }
  .vc-a-sp-rail__body { overflow-x: auto; scroll-snap-type: x mandatory; }
  .vc-a-sp-rail__list, .vc-a-sp-rail__line { width: 1100px; }
  .vc-a-sp-rail__line { left: 55px; right: auto; width: 990px; }
  .vc-a-sp-rail__li { scroll-snap-align: center; }
  .vc-a-sp-tools { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .vc-a-sp-bench__head h2 { font-size: 1.85rem; }
  .vc-a-sp-tool { grid-template-columns: 88px minmax(0, 1fr); }
  .vc-a-sp-gates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vc-a-sp-gate strong { font-size: 15px; }
}

/* Calm and reduced motion: the composed states above are already the still states; transitions collapse */
@media (prefers-reduced-motion: reduce) {
  .vc-a-sp-sec *, .vc-a-sp-sec *::before, .vc-a-sp-sec *::after { transition-duration: 0.01ms !important; animation-name: none !important; }
}
:root[data-motion='calm'] .vc-a-sp-sec *, :root[data-motion='calm'] .vc-a-sp-sec *::before, :root[data-motion='calm'] .vc-a-sp-sec *::after { transition-duration: 0.01ms !important; animation-name: none !important; }