/* =============================================================
   Section: Proof Band (pillars marquee + stats)
   Maps to: template-parts/sections/section-proof.php
   ============================================================= */

/* Proof section is now an overlay that sits on top of the hero's
   bottom edge. The marquee has moved into the site footer (see
   footer.css → .footer-marquee), so this section only carries the
   four-up stats row. We make it transparent and pull it upward via
   margin-top so the stat cards visually become the bottom of the
   hero -- works for both data-hero-mode="video" and "rotator". The
   z-index keeps the cards above the hero's gradient/grain overlays
   without being clipped by the hero's overflow:hidden. */
.proof {
  background: transparent;
  color: var(--bone);
  position: relative;
  overflow: visible;
  /* IMPORTANT: use transform (not margin-top) to pull the stats up
     into the hero. Negative margin-top would shift the next section
     UP in document flow too -- causing services/etc. to bleed up
     under the hero edge on first paint and break the "hero fills
     viewport on refresh" goal. transform only moves the painted box,
     so flow stays intact and the next section sits at the hero's
     true bottom edge. */
  margin-top: 0;
  transform: translateY(calc(-1 * var(--s-6) - 50px));
  z-index: 2;
}

/* Tablet+: pull the stat row up so the four-up grid visually overlays
   the bottom of the hero. Same transform-only approach (see comment
   on the base .proof rule above) -- never reintroduce margin-top
   here or the hero will lose its full-viewport footprint. */
@media (min-width: 720px) {
  .proof {
    transform: translateY(calc(clamp(-10rem, -10vw, -6rem) - 50px));
  }
}

.proof::before {
  display: none;
}

/* Marquee was relocated to the footer; hide any stragglers that may
   still be present in legacy proof markup. */
.proof .marquee {
  display: none;
}

/* ---- Marquee ----
   Lives inside .proof__stats, absolutely positioned so it scrolls
   horizontally behind the stat cards like a road stripe.
*/
.marquee {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  padding-block: var(--s-5);
  user-select: none;
  z-index: 0;
  align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  white-space: nowrap;
  flex-shrink: 0;
  animation: marquee-roll 38s linear infinite;
}

/* no hover pause — continuous scroll like a road */

.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  gap: var(--s-7);
}

.marquee__dash {
  color: var(--safety);
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  line-height: 1;
  letter-spacing: -0.15em;
  opacity: 0.85;
}

.marquee__road-icon {
  color: var(--safety);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  opacity: 0.8;
}

/* "Get Active" accent — the brand motto pops in the values band. */
.marquee__item--accent {
  color: var(--safety);
  -webkit-text-stroke: 1px var(--safety);
}

@keyframes marquee-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Stats row ----
   Now rendered as an overlay on the bottom of the hero (see negative
   margin-top on .proof above). We drop the section padding so the
   strip hugs the hero's lower edge, and we keep the four-column grid
   on tablet+ so the cards land in the dark band reserved by the
   hero's increased bottom padding. */
.proof__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-block: 0;
  position: relative;
}

@media (min-width: 720px) {
  .proof__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Fine-tune nudge of the stats wrap relative to the hero's bottom-left
   corner: 35px higher and 75px to the left. transform composes with
   the parent .proof's translateY pull-up without affecting flow.
   Skipped below 720px so single-column stacked cards don't punch off
   the left edge of small screens. */
@media (min-width: 720px) {
  .wrap.proof__stats {
    transform: translate(-75px, -35px);
  }
}

/* Mode-aware horizontal placement (tablet+):
   - rotator mode: keep stats to the left so they don't collide with
     the .hero__meta rail (Featured Project label, name, detail, CTAs)
     that anchors to bottom-right of the hero on >=980px.
   - video mode:   no meta rail (CSS hides it), but the stat strip
     stays compact (not full-width) and centered so the four cards
     sit close together rather than spread edge-to-edge. */
@media (min-width: 980px) {
  .proof[data-hero-mode="rotator"] .proof__stats {
    max-width: 58%;
    margin-right: auto;
    margin-left: 0;
  }
  .proof[data-hero-mode="video"] .proof__stats {
    max-width: 65%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Tighter padding pulls the four cards closer together so the strip
   reads as a unified band of figures rather than four widely-spaced
   columns. Vertical padding stays minimal to keep the overlay slim. */
.stat {
  padding: var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--rule-dark);
  position: relative;
  z-index: 1;
}

@media (min-width: 720px) {
  .stat {
    border-bottom: 0;
    border-right: 1px solid var(--rule-dark);
  }
  .stat:last-child { border-right: 0; }
}

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--bone);
  display: block;
  margin-bottom: var(--s-3);
}

.stat__num--stroke {
  -webkit-text-stroke: 1.5px var(--safety);
  color: transparent;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dark);
  line-height: 1.5;
  max-width: 22ch;
}

.stat__sub {
  display: block;
  margin-top: var(--s-3);
  color: var(--safety);
  font-size: 0.66rem;
  white-space: nowrap;
}