/* Facts — a quiet counter row (no cards). Four columns split by hairlines, a large
   light number in the display face, small label underneath. On reveal a gold hairline
   draws across the top of each column and the numbers count up slowly (2.4s, soft
   ease-out, staggered) — calm, not flashy. Tabular figures keep widths steady. */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 clamp(20px, 2.6vw, 44px);
  margin-top: clamp(48px, 6vw, 96px);
}
.fact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 0 8px;
  color: var(--navy);
}

/* top hairline: faint base + gold stroke that draws in */
.fact::before,
.fact::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line, rgba(11, 41, 93, .12));
}
.fact::after {
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1) calc(.3s + var(--i, 0) * .15s);
}
.is-revealed .fact::after { transform: scaleX(.28); }

.fact__index {
  font-size: var(--fs-eyebrow, 12px);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--ink-faint, rgba(11, 41, 93, .5));
}
.fact__num {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-family: var(--font-display, var(--font));
  font-size: clamp(48px, 4.8vw, 80px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.fact__num sup {
  top: 0;
  font-size: .42em;
  line-height: 1;
  margin-top: .12em;
  color: var(--gold);
}
/* a credential instead of a count: same face, smaller so it fits the column */
.fact__num--word { font-size: clamp(30px, 2.6vw, 44px); line-height: 1.1; min-height: .95em; align-items: flex-end; }
.fact__label {
  margin: 0;
  max-width: 22ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft, rgba(11, 41, 93, .72));
}

@media (max-width: 1023.98px) {
  .facts { grid-template-columns: 1fr 1fr; gap: 8px 24px; }
}
@media (max-width: 480px) {
  .facts { margin-top: 40px; gap: 4px 20px; }
  .fact { gap: 6px; padding: 16px 0 6px; }
  .fact__index { display: none; }
  .fact__num { font-size: 44px; }
  .fact__num--word { font-size: 28px; }
  .fact__label { font-size: 13px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .fact::after { transform: scaleX(.28); transition: none; }
}