/* Results: a pinned stage of four scenes painted on a canvas, each with its label on top (proof-stage.js).
   Without .is-live the numbers simply stack, which is also what the markup says to screen readers.
   References: two slow rows of recommendation cards (proof.js). */
.proof { position: relative; z-index: 3; overflow: clip; background: var(--ink); padding: 0; }
.stats { position: relative; display: grid; gap: clamp(40px, 6vw, 90px); padding: var(--gutter); }
.stats-canvas { display: none; }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat-num { font-size: clamp(56px, 8.1vw, 170px); line-height: 0.9; white-space: nowrap; }
.stat-label { font-family: 'Monument', var(--body); font-weight: 400; font-size: clamp(16px, 1.8vw, 30px); line-height: 1.1; text-transform: uppercase; }

.stats.is-live { display: block; height: 420vh; padding: 0; }
.stats.is-live .stats-canvas { display: block; position: sticky; top: 0; width: 100%; height: 100vh; }
/* Each label sits at the foot of the pinned screen. Its parent is the full stage, so sticky holds it there. */
.stats.is-live .stat { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: flex-end; height: 100vh; margin-top: -100vh; padding: 0 var(--gutter) clamp(36px, 8vh, 84px); text-align: center; opacity: var(--o, 0); pointer-events: none; }
.stats.is-live .stat.is-on { pointer-events: auto; }
.stats.is-live .stat-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.stats.is-live .stat-label { font-size: clamp(18px, 2.2vw, 38px); text-shadow: 0 2px 24px #000; }
/* These labels hang just under the words painted on the canvas. --label-top comes from proof-stage.js, which measures them. */
.stats.is-live .stat-revenue, .stats.is-live .stat-top100 { justify-content: flex-start; padding-top: var(--label-top, 60vh); padding-bottom: 0; }
/* Achievements scene: the list is the content, so it fills the screen, with the blueprint painted behind it. --n is a line's
   place in the list and --p, from proof-stage.js, how far the list has arrived: each line slides in as its turn comes. */
.achv-title { font-family: 'Monument', var(--body); font-weight: 400; font-size: clamp(22px, 3vw, 46px); line-height: 1; text-transform: uppercase; }
.achv-list { display: grid; gap: clamp(10px, 1.7vh, 18px); margin: clamp(14px, 3vh, 30px) 0 0; padding: 0; list-style: none; }
.achv-list li { --in: clamp(0, calc(var(--p, 1) * 10 - var(--n)), 1); display: grid; grid-template-columns: 3.1em minmax(0, 1fr); gap: 10px; align-items: baseline; opacity: var(--in); transform: translateX(calc((1 - var(--in)) * 36px)); }
.achv-year { color: var(--ui); font-size: clamp(14px, 1.2vw, 18px); font-weight: 600; }
.achv-text { display: grid; gap: 1px; }
.achv-text b { font-size: clamp(16px, 2.3vh, 24px); font-weight: 700; line-height: 1.16; }
.achv-text a { color: inherit; transition: color 0.2s, text-shadow 0.2s; }
.achv-text a:hover, .achv-text a:focus-visible { color: var(--ui); text-shadow: var(--glow-ui); }
.achv-text small { color: var(--muted); font-size: clamp(13px, 1.7vh, 16px); line-height: 1.2; }
.stats.is-live .stat-achv { align-items: flex-start; justify-content: center; padding: clamp(64px, 9vh, 90px) var(--gutter) clamp(16px, 3vh, 30px); text-align: left; }
.stats.is-live .stat-achv .achv-list { max-width: min(100%, 720px); }

a.stat:hover .stat-label, a.stat:focus-visible .stat-label { text-shadow: var(--glow-ui); }

.refs { position: relative; padding: clamp(70px, 9vw, 140px) 0 clamp(50px, 7vw, 100px); }
/* While the stage is live the buttons take no room in the references: they rise over the end of the stage, under the Top 100
   label, by --buttons-lift from proof-stage.js. They sit above that scene's link, which covers the whole screen. */
.stats.is-live + .refs .contact-actions { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--buttons-lift, 0px) * -1); margin-bottom: 0; }
.refs-rows { display: grid; gap: 18px; }
/* The row only carries the movement. Each card is its own layer, so a moving row never has to repaint or load
   a huge texture, which is what makes a slow ticker hitch. Every avatar is loaded up front for the same reason. */
.refs-row { display: flex; align-items: stretch; gap: 18px; width: max-content; will-change: transform; animation: wall-left 300s linear infinite; }
.refs-row-r { animation-name: wall-right; }
.refs-row:hover, .refs-row:focus-within { animation-play-state: paused; }
.ref { display: flex; flex-direction: column; flex: none; gap: 16px; width: clamp(290px, 27vw, 430px); padding: clamp(20px, 2vw, 28px); border-radius: 20px; background: var(--ink-3); color: var(--text); text-decoration: none; will-change: transform; transition: transform 0.35s var(--ease), background 0.25s, color 0.25s; }
.ref:hover, .ref:focus-visible { background: #fff; color: #000; transform: translateY(-6px) rotate(-1deg); }
.ref-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ref-who > span:last-child { display: grid; gap: 2px; min-width: 0; }
.ref-who b { font-size: 24px; font-weight: 700; line-height: 1.15; }
.ref-who small { font-size: 14px; line-height: 1.2; color: var(--muted); transition: color 0.25s; }
.ref:hover small, .ref:focus-visible small { color: #55555f; }
.ref-photo { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #33333b; }
.ref-initials { display: grid; place-items: center; font-size: 30px; font-weight: 700; color: #fff; }
.ref-quote { flex: 1; font-size: clamp(15px, calc(1.3vw - 2px), 18px); line-height: 1.32; }
.ref-link { font-size: 14px; font-weight: 600; color: var(--ui); }
.ref:hover .ref-link, .ref:focus-visible .ref-link { color: #000; }
@media (prefers-reduced-motion: reduce) {
  .refs-rows { overflow-x: auto; }
  .refs-row { animation: none; }
}