/* Home Team Construction — stats

   COMPONENT 04 — STAT COUNTERS
   SHIPPING SOURCE OF TRUTH.
   THE NUMBERS ARE REAL. The audit reported both counters "rendering 0". They
   are not misconfigured — the live Elementor counter widgets carry
   data-to-value="3282" and data-to-value="25", and the 0 in the markup is
   only the pre-animation start value. It is what a visitor sees until
   Elementor's counter JS runs, which WP Rocket's delay-JS defers until first
   interaction. Rendering the finished number as static text removes the
   dependency entirely: no JS, no 0, no layout shift.
   If the client wants the count-up back, it should be layered on top of this
   markup as progressive enhancement, never as the source of the number.

   Ported from deliverables/review.html <template id="cmp-stats">.
   Tokens come from tokens.css; only local overrides are declared here.
*/

/* Home Team Construction — 04 Stat counters / trust row (pattern 2) */
/* This grey band is deliberate and is now the only one on the homepage. The
   reviews section above it was moved to white on 2026-09-02 so this band reads
   as a separator between the reviews and the trust block instead of merging
   with them. Do not repaint it without repainting its neighbours. */
.htc-stats{
  box-sizing:border-box;
  width:100%;
  background:var(--htc-bg-light);
  padding:var(--htc-s6) var(--htc-s4);
  font-family:var(--htc-font-body);
}

.htc-stats *,
.htc-stats *::before,
.htc-stats *::after{ box-sizing:border-box; }

.htc-stats__inner{
  max-width:var(--htc-container);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:var(--htc-s7);
}

.htc-stat{
  display:flex;
  flex-direction:column;
  gap:var(--htc-s1);
}

.htc-stat + .htc-stat{
  padding-left:var(--htc-s7);
  border-left:1px solid var(--htc-divider);
}

.htc-stat__value{
  margin:0;
  font-size:var(--htc-h2);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--htc-black);
  font-variant-numeric:tabular-nums;
}

.htc-stat__label{
  margin:0;
  font-size:var(--htc-small);
  font-weight:600;
  line-height:1.4;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--htc-text);
}

@media (max-width:1150px){
  .htc-stats{ padding:var(--htc-s6) var(--htc-s3); }
  .htc-stats__inner{ gap:var(--htc-s5); }
  .htc-stat + .htc-stat{ padding-left:var(--htc-s5); }
}

@media (max-width:767px){
  .htc-stats{ padding:var(--htc-s5) var(--htc-s3); }
  .htc-stats__inner{
    flex-direction:column;
    gap:var(--htc-s3);
  }
  .htc-stat + .htc-stat{
    padding-left:0;
    border-left:0;
    padding-top:var(--htc-s3);
    border-top:1px solid var(--htc-divider);
    width:100%;
  }
}