/* Purpose: Proof · Track Record. Full-bleed parallax image + emerald scrim + count-up
   stats. Ported from the WV reference. Background image injected per-instance. */

.proof-parallax {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--emerald);
}
.proof-parallax__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;  /* not fixed — fixed forces a full repaint on every
                                     scroll frame, which stutters the count-up beside it */
  transform: translateZ(0);       /* own GPU layer so it composites smoothly */
}
.proof-parallax::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(55, 96, 84, 0.82) 0%,
    rgba(55, 96, 84, 0.70) 50%,
    rgba(55, 96, 84, 0.85) 100%);
}
.proof-parallax .section-i { position: relative; z-index: 2; }
@supports (-webkit-touch-callout: none) {
  .proof-parallax__bg { background-attachment: scroll; }
}

.proof-parallax__head { text-align: center; margin-bottom: 64px; }
.proof-parallax__title {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--sec-h2);
  line-height: 1.05; letter-spacing: -0.022em;
  color: #FFFFFF; padding-bottom: 0.08em;
}
.proof-parallax__title em { color: var(--cream); font-style: italic; }
.proof-parallax__rule { width: 56px; height: 2px; background: var(--cream); margin: 28px auto 0; }
.proof-parallax .eyebrow { color: var(--cream); opacity: 0.9; justify-content: center; display: inline-flex; }
.proof-parallax .eyebrow--no-rule::before { display: none; }

/* ── Stats ── */
.tr-stats {
  display: grid; grid-template-columns: 1fr;
  max-width: 1200px; margin: 0 auto; row-gap: 40px;
}
.tr-stat { padding: 8px 20px; text-align: center; }
.tr-stat__lbl {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cream); opacity: 0.95; margin-bottom: 22px;
}
.tr-stat__n {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1; color: #FFFFFF;
  padding-bottom: 0.04em; margin-bottom: 24px;
  /* Small, cheap shadow — a big 24px-blur shadow repainted every count frame was
     dropping frames and making the count stutter. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
  font-variant-numeric: tabular-nums;  /* fixed-width digits → no jiggle while counting */
  transform: translateZ(0);            /* promote to its own layer for cheap repaints */
}
.tr-stat__desc {
  font-size: 14px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 26ch; margin: 0 auto;
}
@media (min-width: 561px) {
  .tr-stats { grid-template-columns: repeat(2, 1fr); }
  .tr-stat { border-left: 1px solid rgba(245, 239, 224, 0.28); padding: 8px 20px; }
  .tr-stat:nth-child(odd) { border-left: 0; }
}
@media (min-width: 961px) {
  .tr-stats { grid-template-columns: repeat(4, 1fr); }
  .tr-stat { padding: 8px 32px; border-left: 1px solid rgba(245, 239, 224, 0.28); }
  .tr-stat:first-child { border-left: 0; }
  .tr-stat:nth-child(odd) { border-left: 1px solid rgba(245, 239, 224, 0.28); }
  .tr-stat:first-child { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .proof-parallax__bg { background-attachment: scroll; }
}