/* NEUCLIPS — HOME.
 * Nine sections. Each has its own container, its own grid, its own type scale.
 * No section borrows another section's component. (R-COMPONENTREUSE)
 */

/* ══ H1 — HERO · Full-Bleed Subject (architecture C) ════════════
   The screen wall IS the hero. Type sits in the dark floor of the frame,
   bottom-left, in the same spatial plane as the image. */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 30%;
  z-index: -2;
  transform: scale(1.06);
  animation: hero-settle 2.4s var(--spring-smooth) 0.15s forwards;
}
@keyframes hero-settle { to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--base) 4%, rgba(10,10,10,0.86) 26%, rgba(10,10,10,0.18) 62%, rgba(10,10,10,0.45) 100%),
    radial-gradient(120% 90% at 18% 92%, rgba(10,10,10,0.92) 0%, transparent 62%),
    linear-gradient(100deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.5) 34%, transparent 62%);
}
@media (max-width: 900px) {
  .hero::after {
    background:
      linear-gradient(to top, var(--base) 3%, rgba(10,10,10,0.9) 34%, rgba(10,10,10,0.62) 100%),
      linear-gradient(100deg, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.76) 55%, rgba(10,10,10,0.5) 100%);
  }
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(var(--s16), 11vh, var(--s24)) clamp(var(--s5), 4vw, var(--s16)) clamp(var(--s12), 6vw, var(--s20));
}
.hero__eyebrow {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s6);
}
.hero__eyebrow .mark { --mk: 4px; color: var(--signal); }
.hero h1 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(38px, 5.6vw + 10px, 94px);
  line-height: 0.94; letter-spacing: -0.012em;
  max-width: 26ch;
  text-wrap: pretty;
}
.hero h1 em { font-style: normal; color: var(--signal); }
.hero__sub {
  margin-top: var(--s5);
  max-width: 44ch;
  font-size: var(--t-lg);
  color: var(--ink-70);
  line-height: 1.5;
}
.hero__act { margin-top: var(--s8); display: flex; flex-wrap: wrap; gap: var(--s4); }
.hero__scroll {
  position: absolute; right: clamp(var(--s5), 4vw, var(--s16));
  bottom: clamp(var(--s16), 7vw, var(--s24));
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-30);
  writing-mode: vertical-rl;
}
.hero__scroll b {
  display: block; width: 1px; height: 56px;
  background: linear-gradient(to bottom, var(--signal), transparent);
  animation: scroll-pulse 2.6s var(--spring-smooth) infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.35; transform: scaleY(0.7); transform-origin: top; }
  45%      { opacity: 1;    transform: scaleY(1);   transform-origin: top; }
}
@media (max-width: 720px) {
  .hero { min-height: 88svh; }
  .hero__scroll { display: none; }
  .hero h1 { max-width: 12ch; }
}

/* ══ H2 — LIVE · the measured counter · giant stat, centred ═════ */
.live {
  border-bottom: 1px solid var(--ink-06);
  padding: clamp(var(--s24), 10vw, var(--s56)) clamp(var(--s5), 4vw, var(--s16));
  text-align: center;
}
.live__inner { max-width: 1100px; margin: 0 auto; }
.live__n {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(64px, 15vw, 240px);
  line-height: 0.82; letter-spacing: -0.028em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  margin: var(--s6) 0 var(--s5);
}
.live__cap {
  font-size: var(--t-lg); color: var(--ink-70);
  max-width: 42ch; margin: 0 auto;
}
.live__meta {
  margin-top: var(--s8);
  font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-30);
}
.live__meta b { color: var(--ink-52); font-weight: 600; }
/* No figure unless it is evidenced. */
.live[data-state="unavailable"] .live__n,
.live[data-state="unavailable"] .live__meta { display: none; }
.live .live__fallback { display: none; }
.live[data-state="unavailable"] .live__fallback {
  display: block;
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-2xl); line-height: 0.95; color: var(--signal);
  margin: var(--s6) 0 var(--s5);
}

/* ══ H3 — WHAT · four capability bands, widening with reach ═════
   The layout carries the argument: the band's width IS its reach. */
.cap { padding: clamp(var(--s20), 8vw, var(--s40)) 0; }
.cap__head {
  max-width: 1360px; margin: 0 auto var(--s16);
  padding: 0 clamp(var(--s5), 4vw, var(--s16));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--s10); align-items: end;
}
.cap__head h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-3xl); line-height: 0.94; letter-spacing: -0.01em;
}
.cap__head p { color: var(--ink-70); max-width: 40ch; }
.cap__bands { max-width: 1360px; margin: 0 auto; padding: 0 clamp(var(--s5), 4vw, var(--s16)); }
.cap__band {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) minmax(180px, 0.42fr);
  gap: var(--s6) var(--s10);
  align-items: center;
  padding: var(--s10) 0;
  border-top: 1px solid var(--ink-12);
  transition: background var(--d-base) var(--ease-snap);
}
.cap__band:last-child { border-bottom: 1px solid var(--ink-12); }
.cap__band::before {
  content: ""; position: absolute; inset: 0 calc(-1 * clamp(var(--s5), 4vw, var(--s16)));
  background: var(--ink-06); opacity: 0; z-index: -1;
  transition: opacity var(--d-base) var(--ease-snap);
}
.cap__band:hover::before { opacity: 1; }
.cap__idx {
  font-family: var(--display); font-size: var(--t-lg);
  color: var(--signal); line-height: 1;
}
.cap__band h3 {
  font-family: var(--display); text-transform: uppercase;
  line-height: 0.92; letter-spacing: -0.008em;
  transition: color var(--d-base) var(--ease-snap);
}
.cap__band p { color: var(--ink-52); font-size: var(--t-sm); max-width: 62ch; margin-top: var(--s3); }
/* reach → scale. The widest surface gets the biggest type. */
.cap__band--1 h3 { font-size: clamp(30px, 5.4vw, 76px); }
.cap__band--2 h3 { font-size: clamp(26px, 4.2vw, 58px); }
.cap__band--3 h3 { font-size: clamp(23px, 3.4vw, 46px); }
.cap__band--4 h3 { font-size: clamp(21px, 2.8vw, 38px); }
.cap__band:hover h3 { color: var(--signal); }
.cap__reach {
  grid-column: 3; align-self: center;
  display: block; position: relative; padding-top: var(--s4);
  border-top: 1px solid var(--ink-12);
}
.cap__reach::after {
  content: attr(data-reach);
  display: block; margin-top: var(--s3);
  font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-30);
}
.cap__reach b {
  display: block; height: 8px; width: 100%; background: var(--signal);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--spring-smooth);
}
.is-in .cap__reach b, .cap__band.is-in .cap__reach b { transform: scaleX(var(--reach, 1)); }
@media (max-width: 720px) {
  .cap__head { grid-template-columns: 1fr; }
  .cap__band { grid-template-columns: 2.2rem minmax(0, 1fr); gap: var(--s4); align-items: start; }
  .cap__reach { grid-column: 2; margin-top: var(--s5); }
}

/* ══ H4 — PLATFORMS · full-bleed marquee over halftone ══════════ */
.mq {
  position: relative;
  max-width: 100vw;
  padding: clamp(var(--s16), 6vw, var(--s24)) 0;
  overflow: hidden;
  border-top: 1px solid var(--ink-12);
  border-bottom: 1px solid var(--ink-12);
  isolation: isolate;
}
.mq__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; opacity: 0.62;
}
.mq::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--base) 0%, transparent 14%, transparent 86%, var(--base) 100%);
}
.mq__label {
  max-width: 1360px; margin: 0 auto var(--s8);
  padding: 0 clamp(var(--s5), 4vw, var(--s16));
}
.mq__row { display: flex; width: max-content; will-change: transform; }
.mq__row--a { animation: mq-l 42s linear infinite; }
.mq__row--b { animation: mq-r 42s linear infinite; margin-top: var(--s6); opacity: 0.4; }
.mq:hover .mq__row { animation-play-state: paused; }
@keyframes mq-l { to { transform: translateX(-50%); } }
@keyframes mq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.mq__row span {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 6vw, 92px); line-height: 1;
  padding: 0 clamp(var(--s5), 2vw, var(--s10));
  white-space: nowrap;
  color: var(--ink);
}
.mq__row span::after { content: "·"; color: var(--signal); margin-left: clamp(var(--s5), 2vw, var(--s10)); }
.mq__row--b span { color: transparent; -webkit-text-stroke: 1px var(--ink-30); font-size: clamp(24px, 4.4vw, 66px); }
.mq__row--b span::after { -webkit-text-stroke: 0; color: var(--ink-12); }

/* ══ H5 — HOW · three moves, the middle one does the work ═══════ */
.how {
  padding: clamp(var(--s20), 8vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16));
  background: var(--surface);
}
.how__inner { max-width: 1360px; margin: 0 auto; }
.how h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-3xl); line-height: 0.9; margin-bottom: var(--s16);
  max-width: 18ch;
}
.how__steps {
  display: grid;
  grid-template-columns: 1fr 1.85fr 1fr;   /* step 2 is physically wider — the network does the work */
  gap: 1px;
  background: var(--ink-12);
  border: 1px solid var(--ink-12);
}
.how__step {
  background: var(--surface);
  padding: clamp(var(--s8), 3vw, var(--s16));
  display: flex; flex-direction: column; gap: var(--s5);
  transition: background var(--d-base) var(--ease-snap);
}
.how__step:hover { background: var(--surface-2); }
.how__step > b {
  font-family: var(--display); font-size: var(--t-xl);
  color: var(--ink-30); line-height: 1;
  transition: color var(--d-base) var(--ease-snap);
}
.how__step:hover > b { color: var(--signal); }
.how__step h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 34px); line-height: 0.95;
}
.how__step--wide h3 { font-size: clamp(28px, 3.6vw, 54px); color: var(--signal); }
.how__step p { color: var(--ink-52); font-size: var(--t-sm); }
.how__step--wide p { color: var(--ink-70); font-size: var(--t-body); max-width: 44ch; }
@media (max-width: 860px) {
  .how__steps { grid-template-columns: 1fr; }
}

/* ══ H6 — MOMENTUM · a rising line with no endpoint marked ══════ */
.mom {
  padding: clamp(var(--s20), 8vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16));
}
.mom__inner {
  max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(var(--s10), 5vw, var(--s24)); align-items: center;
}
.mom__plot {
  position: relative;
  aspect-ratio: 16 / 10;
  border-left: 1px solid var(--ink-12);
  border-bottom: 1px solid var(--ink-12);
}
.mom__plot svg { width: 100%; height: 100%; overflow: visible; display: block; }
.mom__line {
  fill: none; stroke: var(--signal); stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
}
.mom__plot.is-in .mom__line { animation: draw 2.1s var(--spring-smooth) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.mom__fade {
  position: absolute; top: 0; right: 0; bottom: 0; width: 26%;
  background: linear-gradient(90deg, transparent, var(--base) 82%);
  pointer-events: none;
}
.mom__note {
  position: absolute; right: 0; bottom: 12%;
  font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-30);
}
.mom h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-2xl); line-height: 0.92; margin-bottom: var(--s6);
}
.mom h2 em { font-style: normal; color: var(--signal); }
.mom p { color: var(--ink-70); max-width: 44ch; }
.mom p + p { margin-top: var(--s5); }
.mom__list { margin-top: var(--s8); }
.mom__list li {
  display: grid; grid-template-columns: 12px 1fr; gap: var(--s4);
  padding: var(--s4) 0; border-top: 1px solid var(--ink-12);
  color: var(--ink-70); font-size: var(--t-sm);
}
.mom__list li::before { content: ""; display: block; height: 2px; width: 12px; background: var(--signal); margin-top: 0.62em; }
@media (max-width: 860px) { .mom__inner { grid-template-columns: 1fr; } }

/* ══ H7 — AUDIENCES · the page forks, so the design forks ═══════ */
.fork { display: grid; grid-template-columns: 1fr 1fr; }
.fork__half {
  position: relative; isolation: isolate;
  min-height: clamp(420px, 62vh, 720px);
  display: flex; align-items: flex-end;
  padding: clamp(var(--s8), 4vw, var(--s16));
  text-decoration: none; color: inherit;
  overflow: hidden;
}
.fork__half img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--spring-smooth), filter var(--d-smooth) var(--ease-snap);
  filter: grayscale(0.35);
}
.fork__half::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(10,10,10,0.97) 12%, rgba(10,10,10,0.62) 48%, rgba(10,10,10,0.42) 100%);
  transition: opacity var(--d-smooth) var(--ease-snap);
}
.fork__half:hover img { transform: scale(1.05); filter: grayscale(0); }
.fork__half:hover::after { opacity: 0.82; }
.fork__body { position: relative; }
.fork__half h3 {
  font-family: var(--display); text-transform: uppercase; line-height: 0.88;
  margin: var(--s4) 0 var(--s4);
}
/* deliberately different type scales — two different rooms */
.fork__half--a h3 { font-size: clamp(38px, 6.2vw, 96px); }
.fork__half--b h3 { font-size: clamp(28px, 3.8vw, 58px); letter-spacing: 0.005em; }
.fork__half--b::after { background: linear-gradient(to top, rgba(10,10,10,0.98) 18%, rgba(10,10,10,0.78) 52%, rgba(10,10,10,0.5) 100%); }
.fork__half--b img { filter: grayscale(0.55) brightness(0.82); }
.fork__half p { color: var(--ink-70); max-width: 34ch; font-size: var(--t-sm); }
.fork__go {
  display: inline-flex; align-items: center; gap: var(--s3);
  margin-top: var(--s6);
  font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 700; color: var(--signal);
}
.fork__go b { display: block; transition: transform var(--d-base) var(--spring-snappy); }
.fork__half:hover .fork__go b { transform: translateX(6px); }
@media (max-width: 780px) { .fork { grid-template-columns: 1fr; } }

/* ══ H8 — CTA · the only inverted section on the site ═══════════ */
.push {
  background: var(--signal); color: var(--base);
  padding: clamp(var(--s20), 9vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16));
}
.push__inner {
  max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr auto;
  gap: var(--s12); align-items: end;
}
.push h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-3xl); line-height: 0.94; letter-spacing: -0.012em;
  max-width: 16ch;
}
.push p { margin-top: var(--s5); max-width: 40ch; font-size: var(--t-lg); opacity: 0.78; }
.push .btn {
  background: var(--base); color: var(--signal);
  padding: var(--s5) var(--s10); font-size: var(--t-body);
}
.push .btn:hover { background: #000; box-shadow: 0 14px 34px rgba(10,10,10,0.28); }
@media (max-width: 780px) { .push__inner { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   PASS 2 — HOME
   ═══════════════════════════════════════════════════════════════════ */

/* H1 — the hero image now carries parallax, so it must over-scan or the
   translate would expose the section edge. */
.hero__img { height: calc(100% + 160px); top: -80px; }

/* H2 — the counter is running, so it gets a pulse that proves it is live */
.live__n { position: relative; display: inline-flex; align-items: flex-start; gap: 0.28em; }
.live__pulse {
  display: block; width: clamp(8px, 0.9vw, 14px); aspect-ratio: 1;
  border-radius: 50%; background: var(--signal);
  margin-top: 0.42em; flex: none;
  animation: live-pulse 2.4s var(--spring-smooth) infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 0.28; transform: scale(0.8); }
  40%      { opacity: 1;    transform: scale(1); }
}
.live__cap b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.live[data-state="unavailable"] .live__pulse,
.live[data-state="unavailable"] .live__cap b { display: none; }
.live[data-state="unavailable"] .live__cap { color: var(--ink-52); }
/* tabular figures so the running count does not jitter the layout */
.live__n [data-views-num] { font-variant-numeric: tabular-nums; }

/* H3 — ambient drift on the index numerals */
.cap__idx { animation: float-a 6.5s var(--spring-smooth) infinite; }
.cap__band--2 .cap__idx { animation: float-b 7.4s var(--spring-smooth) infinite; }
.cap__band--3 .cap__idx { animation: float-a 8.1s var(--spring-smooth) infinite; }
.cap__band--4 .cap__idx { animation: float-b 6.9s var(--spring-smooth) infinite; }

/* H4 — a third row, slower and smaller, gives the marquee real depth */
.mq__row--c {
  animation: mq-l 78s linear infinite;
  margin-top: var(--s6); opacity: 0.3;
}
.mq__row--c span { font-size: clamp(15px, 2.4vw, 34px); color: var(--ink); }
.mq__row--c span::after { color: var(--ink-30); }

/* H5 — DAY. The invitation section, on warm paper. */
.how { background: var(--day); }
.how__steps { background: var(--day-12); border-color: var(--day-12); }
.how__step { background: var(--day); }
.how__step:hover { background: var(--day-2); }
.how__step > b { color: var(--day-30); }
.how__step:hover > b { color: var(--day-ink); }
/* on paper the accent cannot be type — the wide step earns emphasis with a
   yellow rule and a raised field instead of yellow text */
.how__step--wide { background: var(--day-2); position: relative; }
.how__step--wide h3 { color: var(--day-ink); }
.how__step--wide::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  display: block; height: 6px; background: var(--signal);
}
.how__step p { color: var(--day-52); }
.how__step--wide p { color: var(--day-70); }

/* H6 — a dot rides the line, so the trajectory is ongoing, not finished */
.mom__dot { fill: var(--signal); filter: drop-shadow(0 0 10px rgba(255,212,0,0.8)); }
.mom__plot:not(.is-in) .mom__dot { opacity: 0; }
.mom__plot.is-in .mom__dot { opacity: 1; transition: opacity 0.4s 1.4s; }
/* a plotted ground under the line */
.mom__plot {
  background-image:
    linear-gradient(to right, var(--ink-12) 1px, transparent 1px),
    linear-gradient(to top,   var(--ink-12) 1px, transparent 1px);
  background-size: 12.5% 20%;
}

/* H7 — layered crop frames: the hovered half takes more of the row */
@media (min-width: 781px) and (hover: hover) {
  .fork { transition: grid-template-columns 0.8s var(--spring-smooth); }
  .fork:has(.fork__half--a:hover) { grid-template-columns: 1.28fr 0.72fr; }
  .fork:has(.fork__half--b:hover) { grid-template-columns: 0.72fr 1.28fr; }
}
.fork__half img { height: calc(100% + 80px); top: -40px; }

/* H8 — an ambient signal wash that drifts across the field */
.push { position: relative; overflow: hidden; isolation: isolate; }
.push::before {
  content: ""; position: absolute; inset: -30%; z-index: -1;
  background: radial-gradient(45% 55% at 30% 40%, rgba(255,255,255,0.32), transparent 62%);
  animation: wash 14s var(--spring-smooth) infinite;
}
@keyframes wash {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(22%, 12%); }
}

/* ═══════════════════════════════════════════════════════════════════
   PASS 3 — HOME on the PATCH BAY spine
   Outside-domain seed: the object that takes one input and routes it to
   many outputs at once. Not another website. (pack-atelier law 2)
   ═══════════════════════════════════════════════════════════════════ */

/* H1 — three patch runs leave the mark and exit the frame */
.hero__eyebrow { position: relative; }
.hero__eyebrow::after {
  content: ""; position: absolute; left: 0; top: 50%; z-index: -1;
  display: block; height: 1px; width: 42vw;
  background: linear-gradient(90deg, var(--signal), rgba(255,212,0,0.22) 30%, transparent 92%);
  transform: scaleX(0); transform-origin: left center;
  animation: run 1.6s var(--spring-smooth) 0.9s forwards;
}
@keyframes run { to { transform: scaleX(1); } }

/* H2 — the second-order figure */
.live__since {
  margin-top: var(--s8);
  display: inline-flex; align-items: baseline; gap: var(--s3);
  padding: var(--s3) var(--s6);
  border: 1px solid var(--ink-12); border-radius: var(--r-full);
}
.live__since b {
  font-family: var(--display); font-size: var(--t-lg);
  color: var(--signal); font-variant-numeric: tabular-nums;
}
.live__since span { font-size: var(--t-sm); color: var(--ink-52); }
.live[data-state="unavailable"] .live__since { display: none; }

/* H3 — THE PATCH FIELD. The jack on the left, its destinations laid out right.
   The section's argument is routing, so the section is a routing field. */
.cap__band { grid-template-columns: 3.2rem minmax(0, 1fr) minmax(210px, 0.52fr); }
.cap__dest {
  grid-column: 3; grid-row: 1; align-self: end;
  display: flex; flex-wrap: wrap; gap: 5px;
  align-content: center;
}
.cap__dest span {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-52);
  padding: 3px 8px;
  border: 1px solid var(--ink-12);
  white-space: nowrap;
  transition: color var(--d-base) var(--ease-snap),
              border-color var(--d-base) var(--ease-snap);
}
.cap__band:hover .cap__dest span { color: var(--ink); border-color: var(--ink-30); }
/* the jack: a filled square on the shared left rail */
.cap__idx { position: relative; }
.cap__idx::before {
  content: ""; position: absolute; left: -14px; top: 50%; margin-top: -3px;
  display: block; width: 6px; height: 6px; background: var(--ink-30);
  transition: background var(--d-base) var(--ease-snap), transform var(--d-base) var(--spring-snappy);
}
.cap__band:hover .cap__idx::before { background: var(--signal); transform: scale(1.7); }
.cap__reach { grid-column: 3; grid-row: 2; margin-top: var(--s4); }
.cap__band > div:not(.cap__dest) { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 900px) {
  .cap__band { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .cap__band > div:not(.cap__dest) { grid-column: 2; grid-row: auto; }
  .cap__dest { grid-column: 2; grid-row: auto; margin-top: var(--s5); }
  .cap__reach { grid-column: 2; grid-row: auto; }
}

/* H4 — kinetic rotator */
.rot {
  display: inline-block; min-width: 9ch;
  color: var(--signal); font-weight: 700;
  transition: opacity 0.28s var(--ease-snap), transform 0.28s var(--spring-snappy);
}
.rot.is-out { opacity: 0; transform: translateY(-6px); }

/* H5 — patch runs between the three steps */
.how__steps { position: relative; }
.how__steps::before, .how__steps::after {
  content: ""; position: absolute; top: 50%; z-index: 3;
  display: block; height: 2px; width: 26px; background: var(--signal);
  transform: translateY(-50%) scaleX(0); transform-origin: left center;
}
.how__steps::before { left: calc(33.33% - 13px); }
.how__steps::after  { left: calc(66.66% - 13px); }
.how__steps.is-in::before { animation: run 0.7s var(--spring-smooth) 0.35s forwards; }
.how__steps.is-in::after  { animation: run 0.7s var(--spring-smooth) 0.55s forwards; }
@media (max-width: 860px) { .how__steps::before, .how__steps::after { display: none; } }

/* H6 — the live figure plotted as the line's last point */
.mom__plot { position: relative; }
.mom__now {
  position: absolute; right: 2%; top: 2%;
  text-align: right; pointer-events: none;
}
.mom__now b {
  display: block;
  font-family: var(--display); font-size: clamp(17px, 1.7vw, 27px);
  color: var(--signal); font-variant-numeric: tabular-nums; line-height: 1;
}
.mom__now i {
  display: block; font-style: normal; margin-top: 3px;
  font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-30);
}
.mom__now[data-state="unavailable"] { display: none; }

/* H9 — the footer now leads with this page's own line */
.ft__lead {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(19px, 1.9vw, 28px); line-height: 1;
  margin-bottom: var(--s4);
}

/* ═══ PASS 4 — HOME ═══════════════════════════════════════════════ */

/* FIX A — the hero has to fit a SHORT viewport, not just a wide one.
   The display size was derived from vw alone, so a 1440x760 screen still got
   94px type and pushed the CTA 117px below the fold. Size it on BOTH axes. */
.hero { min-height: calc(100svh - var(--navh, 76px)); }
.hero__inner {
  padding-top: clamp(var(--s10), 7vh, var(--s20));
  padding-bottom: clamp(var(--s10), 5vh, var(--s16));
}
.hero h1 {
  /* min() takes whichever axis is the binding constraint */
  font-size: min(clamp(44px, 9.5vw, 94px), 11.5vh);
}
.hero__sub { font-size: min(var(--t-lg), 2.9vh); margin-top: clamp(var(--s3), 2vh, var(--s5)); }
.hero__act { margin-top: clamp(var(--s4), 2.6vh, var(--s8)); }
.hero__eyebrow { margin-bottom: clamp(var(--s3), 2vh, var(--s6)); }
/* progressively tighten the vertical budget as the viewport gets shorter,
   so the CTA is above the fold on every screen we can test */
@media (max-height: 880px) {
  .hero h1 { font-size: min(clamp(44px, 9.5vw, 94px), 10.5vh); }
  .hero__sub { max-width: 56ch; }
}
@media (max-height: 780px) {
  .hero h1 { font-size: min(clamp(42px, 9.5vw, 94px), 9.6vh); }
  .hero__inner { padding-top: clamp(var(--s8), 4.5vh, var(--s12)); }
  .hero__scroll { display: none; }
}
@media (max-height: 680px) {
  .hero h1 { font-size: min(clamp(38px, 9vw, 94px), 8.8vh); }
  .hero__sub { font-size: min(var(--t-body), 2.5vh); max-width: 62ch; }
}

/* FIX B — the counter is the number. Nothing else. */
.live__meta { margin-top: var(--s6); }

/* ═══ H5b — UNDER MANAGEMENT ══════════════════════════════════════
   awwwards-sections Feature Architecture C: Single Spotlight. The visual IS
   the section; the text sits above it and the register beneath. Deliberately
   NOT the how-steps grid and NOT the capability rows — this section owes its
   structure to neither. */
.care {
  padding: clamp(var(--s20), 8vw, var(--s40)) 0;
  overflow: hidden;
}
.care__inner {
  max-width: 1100px; margin: 0 auto;
  padding: 0 clamp(var(--s5), 4vw, var(--s16));
  text-align: center;
}
.care .label { margin-bottom: var(--s5); }
.care h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 3.6vw + 8px, 68px);
  line-height: 0.98; letter-spacing: -0.01em;
  max-width: 20ch; margin: 0 auto; text-wrap: balance;
}
.care__sub {
  margin: var(--s6) auto 0; max-width: 48ch;
  color: var(--day-70); font-size: var(--t-lg);
}
/* the visual is the section: wider than the text, bleeding past the measure */
.care__shot {
  margin: clamp(var(--s10), 5vw, var(--s16)) auto 0;
  max-width: 1360px;
  padding: 0 clamp(var(--s5), 4vw, var(--s16));
  overflow: hidden;
}
.care__shot img {
  width: 100%; height: clamp(260px, 46vw, 560px);
  object-fit: cover; object-position: 50% 42%;
}
/* the register is a three-column measure, not cards: no borders, no boxes */
.care__reg {
  margin-top: clamp(var(--s10), 4vw, var(--s16));
  max-width: 1360px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s6), 3vw, var(--s12));
  text-align: left;
}
.care__reg li { border-top: 2px solid var(--day-ink); padding-top: var(--s5); }
.care__reg b {
  display: block;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(17px, 1.6vw, 24px); line-height: 1;
  margin-bottom: var(--s3);
}
.care__reg span { display: block; color: var(--day-70); font-size: var(--t-sm); }
/* the middle item carries the accent, so the row is not three identical things */
.care__reg li:nth-child(2) { border-top-color: var(--signal); border-top-width: 6px; }
@media (max-width: 820px) {
  .care__reg { grid-template-columns: 1fr; gap: var(--s6); }
  .care__inner { text-align: left; }
  .care h2, .care__sub { margin-left: 0; }
}

/* ═══ PASS 6 ══════════════════════════════════════════════════════ */

/* D — the figure needs a world. Accumulation from the lower edge, dark centre. */
.live { position: relative; isolation: isolate; overflow: hidden; }
.live__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: calc(100% + 110px); top: -55px;
  object-fit: cover; object-position: 50% 82%;
}
.live::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(46% 40% at 50% 44%, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.5) 70%, transparent 100%),
    linear-gradient(to bottom, var(--base) 0%, transparent 22%, transparent 74%, var(--base) 100%);
}
.live__share {
  margin: var(--s8) auto 0; max-width: 46ch;
  color: var(--ink-70); font-size: var(--t-lg); line-height: 1.5;
}
.live[data-state="unavailable"] .live__share { display: none; }

/* E — `live` and `what` were two flat near-black sections in sequence. `live`
   now carries a field; `what` steps up to the raised surface so the pair reads
   as two different rooms rather than one long dark corridor. */
.cap { background: var(--surface); }
.cap__band::before { background: rgba(244,241,236,0.045); }

/* ═══ H2b — WHERE WE ALREADY REACH ════════════════════════════════
   awwwards-sections horizontal flow, the last unused break architecture. A
   scroll-snap row: you move sideways through the worlds rather than down a
   list, which is what breadth of reach should feel like. DAY, so it also
   breaks the dark run between the figure and the capability rows. */
.worlds {
  padding: clamp(var(--s20), 8vw, var(--s32)) 0 clamp(var(--s12), 5vw, var(--s20));
  overflow: hidden;
}
.worlds__head {
  max-width: 1360px; margin: 0 auto;
  padding: 0 clamp(var(--s5), 4vw, var(--s16));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--s6) clamp(var(--s8), 5vw, var(--s16)); align-items: end;
}
.worlds .label { grid-column: 1 / -1; }
.worlds h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 3.8vw + 8px, 68px);
  line-height: 0.98; letter-spacing: -0.01em;
}
.worlds__sub { color: var(--day-70); max-width: 42ch; }

/* the row itself */
.worlds__row {
  margin-top: clamp(var(--s10), 4vw, var(--s16));
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 25vw);
  gap: clamp(var(--s4), 1.6vw, var(--s6));
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0 clamp(var(--s5), 4vw, var(--s16)) var(--s5);
  scrollbar-width: none;
}
.worlds__row::-webkit-scrollbar { display: none; }
.worlds__w {
  scroll-snap-align: start;
  background: var(--day-2);
  padding: clamp(var(--s5), 2vw, var(--s8));
  display: flex; flex-direction: column; gap: var(--s3);
  min-height: clamp(230px, 26vw, 320px);
  transition: background var(--d-base) var(--ease-snap),
              transform var(--d-snappy) var(--spring-snappy);
}
.worlds__w:hover { background: var(--day-ink); transform: translateY(-5px); }
.worlds__w:hover h3, .worlds__w:hover b { color: var(--day); }
.worlds__w:hover span { color: rgba(244,241,236,0.72); }
.worlds__w b {
  font-family: var(--body); font-size: var(--t-label); font-weight: 600;
  letter-spacing: 0.18em; color: var(--day-30);
  transition: color var(--d-base) var(--ease-snap);
}
.worlds__w h3 {
  margin-top: auto;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(22px, 2.3vw, 34px); line-height: 0.94;
  transition: color var(--d-base) var(--ease-snap);
}
.worlds__w span {
  display: block; color: var(--day-70); font-size: var(--t-sm);
  transition: color var(--d-base) var(--ease-snap);
}
/* the first world carries the accent so the row is not six identical cards */
.worlds__w:first-child { background: var(--signal); }
.worlds__w:first-child b { color: rgba(20,18,15,0.5); }
.worlds__w:first-child span { color: rgba(20,18,15,0.78); }
.worlds__w:first-child:hover { background: var(--day-ink); }
.worlds__w:first-child:hover b { color: var(--day-30); }

.worlds__cue {
  max-width: 1360px; margin: var(--s5) auto 0;
  padding: 0 clamp(var(--s5), 4vw, var(--s16));
  font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--day-30);
}
@media (max-width: 760px) {
  .worlds__head { grid-template-columns: 1fr; }
  .worlds__row { grid-auto-columns: minmax(200px, 74vw); }
}
@media (hover: none) { .worlds__cue::after { content: " to see them all"; } }

/* ═══ H2 — the figure as proof of build speed and autonomy ════════
   The duration is measured from the same cumulative series as the headline
   number. If it cannot be derived, `data-since="unknown"` hides the claim
   rather than asserting it. */
.live__share b { color: var(--signal); font-weight: 400; font-family: var(--display); font-size: 1.14em; }
.live[data-since="unknown"] .live__share { display: none; }

/* The fact strip is REMOVED by operator ruling. Everything it stated is
   already in the sentence above it: the days, the zero paid promotion, and the
   figure itself. It was the section repeating itself in a second format. */

/* ITEM 1 — the wordmark carries the accent in the DAY register, where yellow
   type is 1.27:1 and therefore banned. A fill behind near-black type, drawn in
   after the words have risen, is the only way the accent is allowed here. */
.how .hl { font-style: normal; position: relative; }
.how .hl .w > i, .how .hl > i {
  background-image: linear-gradient(var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-size: 100% 0.92em;
  background-position: 0 0.62em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.js .how .hl .w > i { background-size: 0% 0.92em; }
.js .how .wr.is-in .hl .w > i {
  background-size: 100% 0.92em;
  transition: background-size 0.6s var(--spring-smooth) 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .js .how .hl .w > i { background-size: 100% 0.92em; }
}

/* ═══ H5c — WHY IT OUTPERFORMS · deep dive ════════════════════════
   One claim dominates and two support it, because the refusal is worth more
   than the other two combined and a three-equal-columns layout would flatten
   it. Not the numbered steps, not the care register, not the patch rows. */
.why {
  padding: clamp(var(--s20), 8vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16));
  background: var(--surface);
  border-top: 1px solid var(--ink-12);
}
.why__inner {
  max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(var(--s8), 4vw, var(--s20));
  align-items: start;
}
.why .label { grid-column: 1 / -1; margin-bottom: var(--s4); }
.why__lead h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 4vw + 8px, 76px);
  line-height: 0.96; letter-spacing: -0.012em; max-width: 16ch;
}
.why__lead p {
  margin-top: var(--s6); color: var(--ink-70);
  font-size: var(--t-lg); line-height: 1.5; max-width: 52ch;
}
/* the supporting pair is deliberately quieter: smaller, ruled, set back */
.why__side { display: grid; gap: clamp(var(--s6), 2.4vw, var(--s10)); padding-top: var(--s5); }
.why__side article { border-top: 1px solid var(--ink-30); padding-top: var(--s5); }
.why__side h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(17px, 1.6vw, 24px); line-height: 1; margin-bottom: var(--s3);
}
.why__side p { color: var(--ink-52); font-size: var(--t-sm); }
@media (max-width: 900px) {
  .why__inner { grid-template-columns: 1fr; }
  .why__side { padding-top: 0; }
}