/* ==========================================================================
   home.css — styles used only on index.html: the stat strip beneath the
   hero, the testimonial cards, and the partner logo strip. Everything
   else on the home page draws from the shared component library in
   style.css so it stays visually consistent with the rest of the site.
   ========================================================================== */

/* ---------- Hero secondary CTA (needs a light border over the dark hero) ---------- */
.btn-hero-secondary {
  border-color: rgba(250, 246, 236, 0.5);
  color: var(--color-cream);
}

/* ---------- Stat strip ---------- */
.stat-strip { background: var(--color-forest-dark); }
.stat-strip .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 40px 24px; }
.stat-item { text-align: center; color: var(--color-cream); }
.stat-item .num { font-family: var(--font-mono); font-size: var(--step-3); font-weight: 700; color: var(--color-wheat); }
.stat-item .lbl { font-size: var(--step--1); color: rgba(250,246,236,0.75); }

/* ---------- Testimonials ---------- */
.testimonial-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.testimonial-card { background: var(--color-white); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.testimonial-card .quote { font-family: var(--font-display); font-size: var(--step-1); color: var(--color-forest-dark); }
.testimonial-person { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testimonial-person img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testimonial-person .name { font-weight: 700; font-size: var(--step--1); }
.testimonial-person .role { font-size: 0.8rem; color: var(--color-ink-soft); }

/* ---------- Partners ---------- */
.partner-strip { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 32px; opacity: 0.85; }
.partner-strip .partner-logo { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--color-soil); }