/* ==========================================================================
   Crew — gradient edition

   Same sections, same six brand tints, same PolymathText, same words as the
   paper version. What changes: the ground stays light but is never flat — a
   drifting colour wash sits behind everything and each section adds its own —
   and the sections stop being the same shape as each other.

   Structure comes from width and rhythm rather than from lines. Almost nothing
   here is separated by a border: sections differ because one is 820px wide and
   the next is 1460px, because one is twice as tall as its neighbour, and
   because grids are deliberately off-axis.
   ========================================================================== */

@font-face {
  font-family: "PolymathText";
  src: url("/assets/fonts/PolymathText-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PolymathText";
  src: url("/assets/fonts/PolymathText-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --c1: #ffc875;
  --c2: #bbcaf0;
  --c3: #f1c1f3;
  --c4: #f2b457;
  --c5: #b6d9c0;
  --c6: #c0e5cb;

  --ink:   #14131a;
  --ink-2: #43414f;
  --ink-3: #6f6c80;
  --paper: #fffdf8;

  --font: "PolymathText", Arial, Helvetica, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --xxl: clamp(3.1rem, 1rem + 8.4vw, 7.5rem);
  --xl:  clamp(2.2rem, 1.2rem + 4.2vw, 4.8rem);
  --l:   clamp(1.8rem, 1.4rem + 2vw, 3rem);
  --m:   clamp(1.35rem, 1.1rem + 1.2vw, 2.1rem);
  --s:   clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem);

  --r-lg: 40px;
  --r-md: 22px;
  --r-sm: 14px;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- the ground: a slow colour wash, never a flat fill ---- */
.aurora {
  position: fixed; inset: -20% -15% auto -15%; height: 125vh; z-index: 0;
  pointer-events: none; filter: blur(80px); opacity: 0.9;
  background:
    radial-gradient(30% 34% at 18% 18%, rgba(187,202,240,0.9), transparent 68%),
    radial-gradient(26% 30% at 84% 12%, rgba(241,193,243,0.8), transparent 70%),
    radial-gradient(30% 34% at 62% 58%, rgba(192,229,203,0.75), transparent 72%),
    radial-gradient(22% 26% at 28% 74%, rgba(255,200,117,0.65), transparent 72%);
  animation: drift 30s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 4%, 0) scale(1.12); }
}
.grid-bg { display: none; }
@media (prefers-reduced-motion: reduce) { .aurora { animation: none } }

section, header, footer, .nav { position: relative; z-index: 1; }

/* Widths vary by section. This is the main structural device on the page:
   nothing is the same width as the thing above it. */
.wrap { width: min(100% - var(--pad) * 2, 1280px); margin-inline: auto; }
#floor .wrap     { width: min(100% - var(--pad) * 2, 1460px); }
#thread .wrap    { width: min(100% - var(--pad) * 2, 1180px); }
#crew .wrap      { width: min(100% - var(--pad) * 2, 1360px); }
#scorecard .wrap { width: min(100% - var(--pad) * 2, 1180px); }
#build .wrap     { width: min(100% - var(--pad) * 2, 1240px); }
#watch .wrap     { width: min(100% - var(--pad) * 2, 1000px); }
#faq .wrap       { width: min(100% - var(--pad) * 2, 820px); }
.logos .wrap     { width: min(100% - var(--pad) * 2, 1120px); }
#trust .wrap, #talk .wrap { width: min(100% - 1.5rem, 1580px); }

/* ---- type ---- */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.038em; line-height: 1.03; }
h1 { font-size: var(--xxl); }
h2 { font-size: var(--xl); }
p { margin: 0; }

h1 {
  background: linear-gradient(104deg, #14131a 20%, #4b4a8f 50%, #14131a 80%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-3);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c2), var(--c3));
}
.lede { font-size: var(--s); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-3); }

/* Deliberately uneven rhythm: a tall section, then a tight one. */
.band { padding: clamp(5rem, 10vw, 9rem) 0; }
#crew      { padding: clamp(6rem, 13vw, 12rem) 0 clamp(4rem, 8vw, 7rem); }
#scorecard { padding: clamp(3rem, 6vw, 5rem) 0 clamp(6rem, 12vw, 11rem); }
#thread    { padding: clamp(4rem, 8vw, 7rem) 0; }
#build     { padding: clamp(5rem, 9vw, 8rem) 0; }
#watch     { padding: clamp(3rem, 6vw, 5rem) 0 clamp(6rem, 11vw, 10rem); }
#faq       { padding: clamp(4rem, 7vw, 6rem) 0 clamp(6rem, 10vw, 9rem); }
#trust     { padding: clamp(2rem, 4vw, 3rem) 0; }
#talk      { padding: clamp(2rem, 4vw, 3rem) 0 clamp(4rem, 7vw, 6rem); }
.logos     { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem); }

/* each section adds its own wash, from a different corner */
#thread    { background: radial-gradient(60% 70% at 88% 8%,  rgba(241,193,243,0.34), transparent 62%); }
#crew      { background: radial-gradient(52% 60% at 4% 20%,  rgba(187,202,240,0.38), transparent 64%); }
#scorecard { background: radial-gradient(58% 66% at 94% 70%, rgba(192,229,203,0.42), transparent 66%); }
#build     { background: radial-gradient(46% 62% at 10% 86%, rgba(255,200,117,0.36), transparent 64%); }
#faq       { background: radial-gradient(50% 60% at 96% 16%, rgba(187,202,240,0.32), transparent 62%); }
#proof     { background: radial-gradient(46% 56% at 50% 0%,  rgba(241,193,243,0.28), transparent 62%); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.7rem; border-radius: 999px;
  font-size: 0.98rem; font-weight: 700; text-decoration: none;
  color: var(--paper); background: var(--ink); border: 1px solid var(--ink);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
  box-shadow: 0 12px 30px -16px rgba(20,19,26,0.9);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -18px rgba(75,74,143,0.9); }
.btn--ghost {
  background: rgba(255,255,255,0.7); color: var(--ink);
  border-color: rgba(20,19,26,0.16); backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--c2); }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,253,248,0.7); backdrop-filter: blur(16px); }
.nav__in {
  width: min(100% - var(--pad) * 2, 1460px); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.85rem 0;
}
.nav__logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.nav__logo img { height: 34px; width: auto; display: block; }
.nav__by { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.nav__links { display: flex; align-items: center; gap: 1.7rem; }
.nav__links a { font-size: 0.92rem; text-decoration: none; color: var(--ink-2); }
.nav__links a:not(.btn):hover { color: var(--ink); }
.nav .btn { padding: 0.58rem 1.15rem; font-size: 0.87rem; }
@media (max-width: 760px) { .nav__links a:not(.btn) { display: none } .nav__by { display: none } }
@media (max-width: 620px) { .nav .btn { font-size: 0.78rem; padding: 0.5rem 0.85rem; white-space: nowrap } .nav__logo img { height: 26px } }

/* ---- hero: the tallest thing on the page ---- */
.hero { padding: clamp(4rem, 10vw, 8.5rem) 0 clamp(2rem, 4vw, 3rem); text-align: center; }
.hero__mid { max-width: 1100px; margin-inline: auto; }
.hero .eyebrow { justify-content: center; }
.hero__sub { margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; max-width: 56ch; font-size: var(--s); color: var(--ink-2); }
.hero__cta { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: clamp(2rem, 4vw, 3rem); }
.hero__peek { margin-top: 2.2rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }

/* ---- surfaces: white glass on a coloured ground ---- */
.tint, .card, .build, .node, .faq details, .table-view, .report,
.disagree, .proof-grid > div, .player__hit {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: var(--r-md);
  box-shadow: 0 30px 60px -45px rgba(30,28,60,0.55);
}

/* ---- the floor: widest thing on the page, in a gradient tray ---- */
.floor-band { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(4rem, 8vw, 7rem); }
.floor-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.floor-head h2 { max-width: 24ch; font-size: var(--l); }
.floor-stage {
  position: relative; overflow: hidden; padding: 10px;
  border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,0.9);
  background: linear-gradient(145deg, rgba(187,202,240,0.75), rgba(241,193,243,0.5) 45%, rgba(192,229,203,0.7));
  box-shadow: 0 50px 90px -50px rgba(50,45,110,0.6);
}
.floor-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: calc(var(--r-lg) - 10px); }
.floor-inner { position: relative; width: 100%; }
.floor-inner canvas { display: block; width: 100%; height: auto; border-radius: calc(var(--r-lg) - 10px); }
#floor-canvas { image-rendering: pixelated; }
.floor-labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.floor-zoom { position: absolute; right: 20px; top: 20px; z-index: 6; display: flex; gap: 5px; }
.floor-zoom button {
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 1.05rem; line-height: 1; color: var(--ink);
  background: rgba(255,255,255,0.9); border: 0; border-radius: 10px;
  box-shadow: 0 6px 18px -8px rgba(30,28,60,0.6);
}
.floor-zoom button:hover { background: #fff; }

.toggle { display: inline-flex; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.9); backdrop-filter: blur(10px); }
.toggle button { padding: 0.5rem 1.15rem; font-family: var(--font); font-size: 0.86rem; cursor: pointer; background: transparent; color: var(--ink-2); border: 0; }
.toggle button[aria-pressed="true"] { background: linear-gradient(120deg, var(--c2), var(--c3)); color: var(--ink); font-weight: 700; }

.floor-hint { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; margin-top: 1.2rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.floor-hint .swatch { display: inline-block; width: 10px; height: 10px; margin-right: 0.4rem; vertical-align: -1px; }
.swatch--dot { border-radius: 50%; }

.greet {
  position: absolute; left: 27%; bottom: 22px; z-index: 3; max-width: min(320px, calc(100% - 40px));
  background: rgba(255,255,255,0.93); backdrop-filter: blur(12px);
  border-radius: var(--r-sm); padding: 0.9rem 1rem; font-size: 0.86rem;
  box-shadow: 0 20px 40px -22px rgba(30,28,60,0.8);
}
.greet strong { display: block; margin-bottom: 0.3rem; font-size: 0.78rem; }
.greet__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c5); margin-right: 0.4rem; }
.greet__x, .panel__x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--ink-3); font-size: 1.1rem; cursor: pointer; line-height: 1; }
@media (max-width: 760px) { .greet { left: 16px; right: 16px; max-width: none } }

.panel {
  position: absolute; top: 10px; right: 10px; bottom: 10px; z-index: 6;
  width: min(370px, 84%); overflow-y: auto; border-radius: var(--r-md);
  background: rgba(255,255,255,0.96); backdrop-filter: blur(18px);
  padding: 1.4rem 1.4rem 2rem;
  transform: translateX(112%); transition: transform 0.34s cubic-bezier(0.22,0.61,0.36,1);
  box-shadow: -30px 0 60px -40px rgba(30,28,60,0.8);
}
.panel[data-open="true"] { transform: none; }
.panel__role { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.panel__name { font-size: 1.7rem; margin: 0.2rem 0 0.5rem; }
.panel__tag { color: var(--ink-2); font-size: 0.92rem; }
.panel__live { margin: 0.9rem 0; padding: 0.6rem 0.75rem; border-radius: 10px; background: linear-gradient(120deg, rgba(182,217,192,0.55), rgba(192,229,203,0.3)); font-family: var(--mono); font-size: 0.68rem; }
.panel dl { margin: 1rem 0 0 }
.panel dt { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 1rem; }
.panel dd { margin: 0.25rem 0 0; font-size: 0.88rem; color: var(--ink-2); }
.panel__quote { border-left: 2px solid var(--c3); padding-left: 0.7rem; }

/* ---- table ---- */
.table-view { margin-top: 1.2rem; padding: clamp(1.1rem, 3vw, 1.8rem); overflow-x: auto; }
.stage-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.stage-table th { text-align: left; font-family: var(--mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 0.7rem; border-bottom: 1px solid rgba(20,19,26,0.1); }
.stage-table td { padding: 0.75rem 0.9rem 0.75rem 0; border-bottom: 1px solid rgba(20,19,26,0.07); }
.stage-table tr[data-hot="true"] { background: linear-gradient(90deg, rgba(242,180,87,0.24), transparent 70%); }
.stage-table .count { text-align: right; font-variant-numeric: tabular-nums; }
.bar { height: 7px; border-radius: 999px; background: rgba(20,19,26,0.09); overflow: hidden; min-width: 90px; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--c2), var(--c3)); }
.bar[data-hot="true"] span { background: linear-gradient(90deg, var(--c1), var(--c4)); }
.whocell { display: flex; align-items: center; gap: 0.5rem; }
.whocell canvas.av-head { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; image-rendering: pixelated; display: block; background: rgba(255,255,255,0.85); }

/* ---- logos: the tightest band on the page ---- */
.logos__lead { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.6rem; }
.logos__row { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap; }
.logos__row img { height: clamp(21px, 2.8vw, 30px); width: auto; filter: brightness(0); opacity: 0.4; transition: opacity 0.25s ease; }
.logos__row img:hover { opacity: 0.9; }

/* ---- bottleneck ---- */
.band--orange h2 { max-width: 20ch; }
.flowwrap { position: relative; margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.6rem; }
.flowtrack { position: absolute; left: 0; right: 0; bottom: 92px; height: 2px; background: linear-gradient(90deg, transparent, rgba(20,19,26,0.14), transparent); }
.flowtrack i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--c2), var(--c3)); animation: travel 9.6s linear infinite; animation-delay: var(--d); }
@keyframes travel { 0% { left: -1%; opacity: 0 } 6% { opacity: 1 } 62% { left: 66%; opacity: 1 } 78% { left: 70%; opacity: 1 } 94% { opacity: 1 } 100% { left: 101%; opacity: 0 } }
.strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.5rem, 1.5vw, 1rem); align-items: end; }
@media (max-width: 720px) { .strip { grid-template-columns: repeat(3, 1fr); row-gap: 1.8rem } .flowtrack { display: none } }
.stagecol { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; padding: 0.8rem; border-radius: var(--r-sm); transition: background 0.4s ease, box-shadow 0.4s ease; }
.stagecol__dots { display: grid; grid-template-columns: repeat(4, 9px); gap: 3px; align-content: end; justify-content: start; min-height: 78px; }
.stagecol__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(20,19,26,0.22); display: block; animation: pop 0.4s cubic-bezier(0.22,1.2,0.4,1) both; }
@keyframes pop { from { transform: scale(0); opacity: 0 } to { transform: none; opacity: 1 } }
.stagecol__bar { height: 2px; background: rgba(20,19,26,0.14); border-radius: 999px; }
.stagecol__foot { display: flex; align-items: center; gap: 0.5rem; }
.stagecol__face canvas { width: 24px; height: 24px; border-radius: 50%; image-rendering: pixelated; display: block; background: rgba(255,255,255,0.85); }
.stagecol__name { font-size: 0.9rem; }
.stagecol__who { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-3); }
.stagecol[data-hot="true"] {
  background: linear-gradient(180deg, rgba(255,200,117,0.6), rgba(242,180,87,0.25));
  box-shadow: 0 20px 44px -26px rgba(200,120,20,0.9);
}
.stagecol[data-hot="true"] .stagecol__dots i { background: #cf7208; }
.stagecol[data-hot="true"] .stagecol__bar { background: #cf7208; height: 3px; }
.strip__read { font-size: var(--m); padding-top: 1.4rem; max-width: 30ch; }
.threeup { display: grid; gap: clamp(1.4rem, 3vw, 2.5rem); grid-template-columns: 1.2fr 1fr 1.3fr; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 760px) { .threeup { grid-template-columns: 1fr } }
.threeup h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.threeup p { font-size: 0.94rem; color: var(--ink-2); }

/* ---- handoff circuit ---- */
.flow { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6.5rem 5rem; position: relative; }
.flow > li:nth-of-type(1) { grid-column: 1; grid-row: 1 } .flow > li:nth-of-type(2) { grid-column: 2; grid-row: 1 }
.flow > li:nth-of-type(3) { grid-column: 3; grid-row: 1 } .flow > li:nth-of-type(4) { grid-column: 3; grid-row: 2 }
.flow > li:nth-of-type(5) { grid-column: 2; grid-row: 2 } .flow > li:nth-of-type(6) { grid-column: 1; grid-row: 2 }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; gap: 3rem } .flow > li { grid-column: 1 !important; grid-row: auto !important } }
.flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.wire { fill: none; stroke: url(#wire); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 5 9; animation: wire 0.9s linear infinite; }
@keyframes wire { to { stroke-dashoffset: -14 } }
.wire-tip { fill: #d982dd; }
.node { position: relative; z-index: 1; padding: 1.2rem 1.25rem 1.3rem; }
.node.g1 { background: linear-gradient(150deg, rgba(255,200,117,0.42), rgba(255,255,255,0.78)) }
.node.g2 { background: linear-gradient(150deg, rgba(187,202,240,0.45), rgba(255,255,255,0.78)) }
.node.g3 { background: linear-gradient(150deg, rgba(241,193,243,0.45), rgba(255,255,255,0.78)) }
.node.g4 { background: linear-gradient(150deg, rgba(242,180,87,0.45), rgba(255,255,255,0.78)) }
.node.g5 { background: linear-gradient(150deg, rgba(182,217,192,0.5), rgba(255,255,255,0.78)) }
.node.g6 { background: linear-gradient(150deg, rgba(192,229,203,0.5), rgba(255,255,255,0.78)) }
.node__av { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; margin-bottom: 0.6rem; background: rgba(255,255,255,0.9); }
.node__av canvas { width: 34px; height: 34px; image-rendering: pixelated; display: block; }
.node__av--human { background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.7rem; }
.node__who { font-size: 1.05rem; font-weight: 700; }
.node__do { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.6rem; }
.node__t { color: var(--ink); font-weight: 700; }
.node__out { font-size: 0.85rem; color: var(--ink-2); }
.node__tag, .tag { display: inline-block; margin-top: 0.7rem; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.22rem 0.55rem; border-radius: 999px; background: rgba(255,255,255,0.85); }
.t-pass { color: #2f7a4d } .t-score { color: #3a63b8 } .t-flag, .t-warn { color: #a96a10 } .t-human { color: var(--ink) }
.flow__foot { margin-top: 3rem; max-width: 56ch; color: var(--ink-2); font-size: 0.95rem; }

/* ---- crew: an offset grid, so the rows never line up ---- */
.crew-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 1.3rem; margin-top: 3.5rem; align-items: start; }
.crew-grid .card:nth-child(2n) { transform: translateY(30px); }
.crew-grid .card:nth-child(3n) { transform: translateY(-14px); }
@media (max-width: 700px) { .crew-grid .card { transform: none !important } }
.card { padding: 1.25rem 1.3rem 1.35rem; display: flex; flex-direction: column; transition: box-shadow 0.25s ease; }
.card:hover { box-shadow: 0 40px 70px -45px rgba(60,50,140,0.85); }
.card__top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.7rem; }
.card__av { width: 34px; height: 68px; flex: 0 0 34px; border-radius: 10px; background: rgba(255,255,255,0.85); image-rendering: pixelated; display: block; }
.card__role { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.card__name { font-size: 1.2rem; }
.card__tag { font-size: 0.9rem; color: var(--ink-2); margin-bottom: 0.6rem; }
.card__voice { font-size: 0.85rem; padding-left: 0.75rem; margin-bottom: 0.7rem; border-left: 2px solid var(--c3); }
.card__row { font-size: 0.82rem; color: var(--ink-2); margin-top: 0.5rem; }
.card__row b { display: block; font-family: var(--mono); font-weight: 500; font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.15rem; }
.card__more { margin-top: auto; padding-top: 0.8rem; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.card--build { background: linear-gradient(150deg, rgba(255,200,117,0.6), rgba(241,193,243,0.42)); }
.card__plus { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 1px dashed rgba(20,19,26,0.35); border-radius: 50%; font-size: 1.4rem; color: var(--ink-2); }
.card__cta { margin-top: auto; align-self: flex-start; }

.disagree { margin-top: 3.5rem; padding: clamp(1.5rem, 3.5vw, 2.6rem); }
.disagree__scores { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 1.6rem; }
@media (max-width: 640px) { .disagree__scores { grid-template-columns: 1fr } }
.score { background: none; border: 0; box-shadow: none; padding-left: 1rem; border-left: 2px solid var(--c2); }
.score__who { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.score__n { font-size: 3.4rem; font-weight: 700; letter-spacing: -0.05em; background: linear-gradient(150deg, #4b4a8f, #b06fb8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---- scorecard: asymmetric split, the card hangs lower than the copy ---- */
.score-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .score-grid { grid-template-columns: 1fr } }
.reportstack { display: flex; flex-direction: column; }
@media (min-width: 901px) { .reportstack { margin-top: 3.5rem } }
.report { padding: clamp(1.2rem, 3vw, 1.9rem); border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: none; border-bottom: 0; }
.report__head { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgba(255,255,255,0.85); color: var(--ink-2); }
.chip--live { background: rgba(255,214,214,0.8); color: #a33; }
.chip--live i { width: 6px; height: 6px; border-radius: 50%; background: #d94040; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0.25 } }
.person { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(20,19,26,0.1); }
.person__pic { width: 78px; height: 78px; flex: 0 0 78px; border-radius: var(--r-sm); overflow: hidden; background: linear-gradient(150deg, var(--c2), var(--c3)); display: grid; place-items: end center; }
.person__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person__sprite { image-rendering: pixelated; display: block; width: 100%; height: auto; }
.person__id { flex: 1 1 8rem }
.person__name { font-size: 1.15rem; font-weight: 700 }
.person__role { font-size: 0.85rem; color: var(--ink-3) }
.person__facts { display: grid; gap: 0.25rem; margin: 0; flex: 1 1 12rem }
.person__facts > div { display: flex; justify-content: space-between; gap: 0.8rem }
.person__facts dt { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3) }
.person__facts dd { margin: 0; font-size: 0.8rem; color: var(--ink-2) }
.report__band { font-size: var(--s); padding: 1rem 0; border-bottom: 1px solid rgba(20,19,26,0.1) }
.report__rows { display: grid; gap: 0.7rem; padding: 1.1rem 0 }
.srow { display: grid; grid-template-columns: 8.5rem 1fr 2.2rem; gap: 0.8rem; align-items: center; font-size: 0.9rem; color: var(--ink-2) }
.srow b { text-align: right; color: var(--ink) }
.sbar { display: block; height: 7px; background: rgba(20,19,26,0.09); border-radius: 999px; overflow: hidden }
.sbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--c5), var(--c2)); transition: width 1.1s cubic-bezier(0.22,0.61,0.36,1) }
.report__checks { border-top: 1px solid rgba(20,19,26,0.1); padding-top: 1rem }
.check { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.86rem; padding: 0.3rem 0; flex-wrap: wrap }
.check span { color: var(--ink-3); margin-left: auto }
.check::before { content: "✓"; color: #2f7a4d; font-weight: 700 }
.report__note { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 1rem }

.tape {
  border-radius: 0 0 var(--r-md) var(--r-md);
  padding: 1rem clamp(1.2rem, 3vw, 1.9rem) 1.3rem;
  background: linear-gradient(150deg, rgba(182,217,192,0.55), rgba(187,202,240,0.4));
  border: 1px solid rgba(255,255,255,0.9); border-top: 0;
  box-shadow: 0 30px 60px -45px rgba(30,28,60,0.55);
}
.tape__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem }
.tape__who, .tape__clock { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3) }
.tape__clock b { color: var(--ink) }
.tape__wave { position: relative; height: 58px; display: flex; align-items: center; gap: 2px }
.tape__wave i { flex: 1; min-width: 0; display: block; border-radius: 1px; background: rgba(20,19,26,0.16); transition: background 0.3s ease }
.tape__wave i.played { background: #34785a }
.tape__mark { position: absolute; top: -5px; width: 7px; height: 7px; border-radius: 50%; background: #cf7208; transform: translateX(-50%); transition: transform 0.2s ease }
.tape__mark.at { background: var(--ink); transform: translateX(-50%) scale(1.4) }
.tape__head-line { position: absolute; top: -9px; bottom: -9px; width: 2px; background: var(--ink); transition: left 0.28s cubic-bezier(0.3,1.4,0.5,1) }
.tape__head-line::after { content: ""; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink) }
.tape__note { margin-top: 1rem; font-size: 0.88rem; min-height: 2.6em; color: var(--ink-2) }
.tape__note.in { animation: notein 0.45s ease both }
@keyframes notein { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
.tape__at { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--ink); margin-right: 0.5rem }
.tape__kind { display: inline-block; margin-right: 0.45rem; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.16rem 0.5rem; border-radius: 999px; background: rgba(255,255,255,0.85); color: #3a63b8 }
.tape__kind[data-kind="flag"] { color: #a96a10 }
.tape__kind[data-kind="highlight"], .tape__kind[data-kind="check"] { color: #2f7a4d }

/* ---- build: four gradients, staggered ---- */
.build-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.3rem; margin-top: 3rem; align-items: start }
.build-grid .build:nth-child(2n) { transform: translateY(26px) }
@media (max-width: 700px) { .build-grid .build { transform: none !important } }
.build { padding: 1.6rem 1.5rem; border: 1px solid rgba(255,255,255,0.9) }
.build.g1 { background: linear-gradient(155deg, rgba(255,200,117,0.62), rgba(182,217,192,0.42)) }
.build.g2 { background: linear-gradient(155deg, rgba(187,202,240,0.62), rgba(241,193,243,0.44)) }
.build.g3 { background: linear-gradient(155deg, rgba(241,193,243,0.62), rgba(255,200,117,0.42)) }
.build.g4 { background: linear-gradient(155deg, rgba(192,229,203,0.68), rgba(187,202,240,0.44)) }
.build__n { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--ink-3); margin-bottom: 0.7rem }
.build h3 { font-size: 1.1rem; margin-bottom: 0.4rem }
.build p { font-size: 0.86rem; color: var(--ink-2) }

/* ---- proof: uneven columns, gradient numerals ---- */
.proof-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.15fr; gap: 1rem; margin-top: 3.5rem }
@media (max-width: 800px) { .proof-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 460px) { .proof-grid { grid-template-columns: 1fr } }
.proof-grid > div { padding: 1.7rem 1.5rem }
.proof-grid .num, .stat__n {
  font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1;
  background: linear-gradient(140deg, #14131a, #4b4a8f 60%, #b06fb8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.proof-grid p:last-child { font-size: 0.84rem; color: var(--ink-3); margin-top: 0.6rem }

/* ---- walkthrough: narrow and centred ---- */
#watch .wrap { text-align: center }
#watch h2, #watch .lede { margin-inline: auto }
.player { margin: 3rem auto 0 }
.player__hit { position: relative; display: block; width: 100%; padding: 10px; cursor: pointer; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(145deg, rgba(187,202,240,0.7), rgba(241,193,243,0.5)) }
.player__poster { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: calc(var(--r-md) - 8px) }
.player__disc { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.96); color: var(--ink); box-shadow: 0 20px 50px -18px rgba(30,28,60,0.9); transition: transform 0.18s ease }
.player__hit:hover .player__disc { transform: translate(-50%,-50%) scale(1.08) }
.player__who, .player__len { position: absolute; bottom: 7%; font-family: var(--mono); font-size: 0.62rem; color: var(--ink); background: rgba(255,255,255,0.88); padding: 0.3rem 0.6rem; border-radius: 999px }
.player__who { left: 5%; display: inline-flex; align-items: center; gap: 0.45rem }
.player__who i { width: 6px; height: 6px; border-radius: 50%; background: #d94040 }
.player__len { right: 5% }
.player__cap { display: none }

.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(20,19,26,0.9); display: grid; place-items: center; padding: clamp(1rem,4vw,3rem) }
.lightbox__in { position: relative; width: min(1000px, 100%) }
.lightbox video { width: 100%; height: auto; display: block; border-radius: var(--r-md); background: #000 }
.lightbox__x { position: absolute; top: -2.4rem; right: 0; background: none; border: 0; color: #fff; font-size: 1.8rem; cursor: pointer }
.lightbox__fallback { background: var(--paper); border-radius: var(--r-md); padding: clamp(1.5rem,4vw,3rem); text-align: center; display: grid; gap: 1.2rem; justify-items: center }
.lightbox__fallback p { font-size: var(--m); max-width: 22ch }

/* ---- trust and contact: near-full-bleed gradient slabs ---- */
.slab { padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5rem); border-radius: var(--r-lg); border: 0 }
.slab--mint { background: linear-gradient(135deg, rgba(192,229,203,0.95), rgba(187,202,240,0.7) 58%, rgba(241,193,243,0.62)) }
.slab--blue { background: linear-gradient(135deg, rgba(187,202,240,0.95), rgba(241,193,243,0.65) 55%, rgba(255,200,117,0.6)) }
.badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.6rem }
.badge { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; padding: 0.6rem 0.95rem; border-radius: 999px; background: rgba(255,255,255,0.75); color: var(--ink-2); backdrop-filter: blur(6px) }

/* ---- faq: the narrowest column on the page ---- */
.faq__list { margin-top: 2.8rem; display: grid; gap: 0.7rem }
.faq details { padding: 1.1rem 1.35rem }
.faq summary { cursor: pointer; list-style: none; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 1.3rem; color: var(--ink-3) }
.faq details[open] summary::after { content: "–" }
.faq details p { margin-top: 0.9rem; color: var(--ink-2); font-size: 0.94rem }

/* ---- contact ---- */
.talk-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start }
@media (max-width: 900px) { .talk-grid { grid-template-columns: 1fr } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem }
.field { display: flex; flex-direction: column; gap: 0.4rem }
.field--wide { grid-column: 1 / -1 }
.field label { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3) }
.field input, .field select, .field textarea { font-family: var(--font); font-size: 0.95rem; color: var(--ink); background: rgba(255,255,255,0.88); border: 1px solid rgba(20,19,26,0.14); border-radius: 12px; padding: 0.78rem 0.9rem }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255,255,255,0.7) }
.field textarea { min-height: 96px; resize: vertical }
@media (max-width: 620px) { .form { grid-template-columns: 1fr } }

/* ---- footer ---- */
.foot { padding: 3rem 0; font-size: 0.85rem; color: var(--ink-3) }
.foot__in { width: min(100% - var(--pad) * 2, 1280px); margin-inline: auto; display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center }
.foot img { height: 24px; opacity: 0.65 }

[hidden] { display: none !important }

@media (prefers-reduced-motion: reduce) {
  .flowtrack i, .stagecol__dots i, .wire, .chip--live i { animation: none }
  .card, .btn { transition: none }
}

/* ==========================================================================
   Fitting pass — the sections that should be readable in one screen

   Five sections are now sized against the viewport rather than against their
   own content, so each can be taken in without scrolling. The floor is the
   awkward one: the canvas has a fixed 960x544 aspect, so height can only be
   controlled by capping width. It is capped by the space actually left over
   after the nav, heading and legend — and the cap is lifted on a phone, where
   the floor stays scrollable and zoomable exactly as it is on v1.
   ========================================================================== */

/* ---- hero: everything including the buttons above the fold ---- */
:root { --xxl: clamp(2.6rem, 0.9rem + 6.4vw, 5.6rem); }
.hero { padding: clamp(2rem, 5vw, 3.6rem) 0 clamp(1rem, 2vw, 1.6rem); }
.hero__sub { margin-top: clamp(1rem, 2vw, 1.5rem); font-size: 1.02rem; }
.hero__cta { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); }
.hero__peek { margin-top: 1.2rem; }

/* ---- floor: cap the stage by what is left of the screen ---- */
.floor-band { padding: clamp(1rem, 2vw, 1.6rem) 0 clamp(2.5rem, 5vw, 4rem); }
.floor-head { margin-bottom: 0.9rem; }
.floor-head h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); }
/* 960 / 544 = 1.765, so height follows width; 330px is nav + heading + legend */
.floor-inner { max-width: calc((100vh - 330px) * 1.765); }
.floor-hint { margin-top: 0.8rem; font-size: 0.62rem; }
@media (max-width: 760px) {
  /* on a phone it stays exactly as v1: wider than the screen, and roamable */
  .floor-inner { max-width: none; }
}

/* ---- scorecard ---- */
#scorecard { padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(2.5rem, 5vw, 4rem); }
#scorecard h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); }
@media (min-width: 901px) { .reportstack { margin-top: 0; } }
#scorecard .lede { font-size: 0.98rem; }
.report { padding: 1.1rem 1.3rem; }
.report__head { margin-bottom: 0.9rem; }
.person { padding-bottom: 0.9rem; }
.person__pic { width: 66px; height: 66px; flex: 0 0 66px; }
.report__band { padding: 0.8rem 0; }
.report__rows { gap: 0.55rem; padding: 0.9rem 0; }
.report__checks { padding-top: 0.8rem; }
.report__note { margin-top: 0.7rem; }
.tape { padding: 0.85rem 1.3rem 1rem; }
.tape__wave { height: 46px; }
.tape__note { margin-top: 0.8rem; min-height: 2.4em; }

/* ---- the walkthrough ---- */
#watch { padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(3rem, 6vw, 5rem); }
#watch h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); }
#watch .lede { font-size: 0.98rem; margin-top: 1rem; }
.player { margin-top: 1.6rem; max-width: min(100%, calc((100vh - 330px) * 1.777)); }

/* ---- contact: one screen, a narrower centred form ---- */
#talk { padding: clamp(1.5rem, 3vw, 2.4rem) 0 clamp(2.5rem, 5vw, 4rem); }
#talk .slab { padding: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 4vw, 3rem); }
#talk h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); }
#talk .lede { font-size: 0.96rem; }
.form-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.6rem;
  max-width: 620px; margin-inline: auto; text-align: center;
}
.form-grid > div:first-child h2, .form-grid > div:first-child .lede { margin-inline: auto; }
.form-grid > div:first-child .eyebrow { justify-content: center; }
.form-grid > div:first-child .lede:last-of-type { display: none; }
#lead-form { text-align: left; display: grid; gap: 0.75rem; }
#lead-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 560px) { #lead-form .two { grid-template-columns: 1fr } }
#lead-form .field input, #lead-form .field select, #lead-form .field textarea { padding: 0.66rem 0.8rem; }
#lead-form textarea { min-height: 74px; }
/* the submit was a small pill floating left of the fields it belongs to */
#f-submit {
  width: 100%; margin-top: 0.5rem;
  padding: 1rem 1.5rem; font-size: 1.02rem; border-radius: 14px;
}
.form-msg { text-align: center; font-size: 0.86rem; }

/* ---- Concentrix figures, larger ---- */
.proof-grid > div { padding: 2rem 1.6rem; }
.proof-grid .num, .stat__n { font-size: clamp(3.2rem, 6vw, 5.4rem); }
.proof-grid p:last-child { font-size: 1rem; color: var(--ink-2); line-height: 1.4; margin-top: 0.8rem; }

/* The figures use .proof__n / .proof__l, not .num — my first pass styled a
   class this markup does not have, so the numbers stayed at body size. */
.proof__n {
  font-size: clamp(3.2rem, 6vw, 5.4rem); font-weight: 700;
  letter-spacing: -0.05em; line-height: 1;
  background: linear-gradient(140deg, #14131a, #4b4a8f 60%, #b06fb8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.proof__l { font-size: 1.02rem; color: var(--ink-2); line-height: 1.4; margin-top: 0.9rem; }

/* ==========================================================================
   Round two on the gradient edition
   ========================================================================== */

/* A section gradient is clipped flat at the section's own box, which drew a
   hard horizontal rule between Build and the case study. The washes move to a
   pseudo-element that is masked away before it reaches either edge, so they
   dissolve instead of stopping. */
#thread, #crew, #scorecard, #build, #faq, #proof { background: none; }
#thread::before, #crew::before, #scorecard::before,
#build::before, #faq::before, #proof::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
#thread > .wrap, #crew > .wrap, #scorecard > .wrap,
#build > .wrap, #faq > .wrap, #proof > .wrap { position: relative; z-index: 1; }
#thread::before    { background: radial-gradient(60% 70% at 88% 8%,  rgba(241,193,243,0.36), transparent 62%); }
#crew::before      { background: radial-gradient(52% 60% at 4% 20%,  rgba(187,202,240,0.4),  transparent 64%); }
#scorecard::before { background: radial-gradient(58% 66% at 94% 70%, rgba(192,229,203,0.44), transparent 66%); }
#build::before     { background: radial-gradient(46% 62% at 10% 80%, rgba(255,200,117,0.4),  transparent 62%); }
#faq::before       { background: radial-gradient(50% 60% at 96% 16%, rgba(187,202,240,0.34), transparent 62%); }
#proof::before     { background: radial-gradient(46% 56% at 50% 6%,  rgba(241,193,243,0.3),  transparent 62%); }

/* ---- the customer line carries a claim, so give it some size ---- */
.logos__lead {
  font-family: var(--font); text-transform: none; letter-spacing: -0.02em;
  font-size: clamp(1.15rem, 0.9rem + 1.1vw, 1.9rem);
  color: var(--ink); max-width: 30ch; margin-bottom: 1.9rem;
}

/* ---- the crew: three in full, the fourth dissolving, then build your own ---- */
.crew-grid .card:nth-of-type(n+5):not(.card--build) { display: none; }
.crew-grid .card:nth-of-type(4) {
  position: relative; max-height: 268px; overflow: hidden;
}
.crew-grid .card:nth-of-type(4)::after {
  content: "+ five more agents on the floor";
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3.5rem 1rem 1.1rem; text-align: center;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.86) 55%, rgba(255,255,255,0.96) 100%);
  backdrop-filter: blur(2px);
}
@media (max-width: 700px) { .crew-grid .card:nth-of-type(4) { max-height: 240px } }

/* ---- Concentrix: large, but not shouting ---- */
.proof__n { font-size: clamp(2.3rem, 1.6rem + 1.9vw, 3.4rem); }
.proof__l { font-size: 0.94rem; margin-top: 0.7rem; }
.proof-grid > div { padding: 1.6rem 1.4rem; }

/* ---- the floor: as wide as the room allows, and centred when it is not ---- */
.floor-inner { max-width: calc((100vh - 285px) * 1.765); margin-inline: auto; }
@media (max-width: 760px) { .floor-inner { max-width: none; margin-inline: 0 } }

/* ---- the nav button's label was inheriting the nav link colour ---- */
.nav__links a.btn { color: var(--paper); }
.nav__links a.btn:hover { color: var(--paper); }

/* Four cards across, then build-your-own as a banner under them — with only
   five items left, letting it wrap onto a row of its own left a hole. */
@media (min-width: 1024px) {
  .crew-grid { grid-template-columns: repeat(4, 1fr); }
  .crew-grid .card--build {
    grid-column: 1 / -1; transform: none; margin-top: 0.6rem;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: 1.4rem 2rem; padding: 1.5rem 1.8rem;
  }
  .crew-grid .card--build .card__top { margin-bottom: 0; flex: 0 0 auto; }
  .crew-grid .card--build .card__tag { margin-bottom: 0; flex: 1 1 18ch; }
  .crew-grid .card--build .card__voice { margin-bottom: 0; flex: 1 1 26ch; }
  .crew-grid .card--build .card__row { margin-top: 0; flex: 1 1 20ch; }
  .crew-grid .card--build .card__cta { margin-top: 0; margin-left: auto; }
}
.crew-grid .card:nth-of-type(2n) { transform: translateY(22px); }
.crew-grid .card:nth-of-type(3n) { transform: translateY(-10px); }

/* The fourth agent shows in full now; the "there is more" line moves out of
   the card and sits above the banner as its own grid row. */
.crew-grid .card:nth-of-type(4) { max-height: none; overflow: visible; }
.crew-grid .card:nth-of-type(4)::after { content: none; }
.crew-grid::after {
  content: "+ five more agents on the floor";
  grid-column: 1 / -1; order: 1;
  padding-top: 2.4rem; text-align: center;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
@media (min-width: 1024px) {
  /* clear the staggered cards above rather than butting against them */
  .crew-grid .card--build { order: 2; margin-top: 2.2rem; }
}

/* These three read as one sentence each and sit side by side, so uneven
   columns made their left edges land at uneven intervals. */
.threeup { grid-template-columns: repeat(3, 1fr); align-items: start; }
.threeup h3 { margin-bottom: 0.3rem; }