/* Counter — animated count-up.
   Behaviour: assets/js/components/counter.js
   Notes: docs/component-counter-notes.md */
.counter{
  background:#faf9f6;
  padding:5rem 2rem;
  text-align:center;
  min-height:320px;
  display:flex;align-items:center;justify-content:center;
}
.counter-inner{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.counter-pre{
  font-family:var(--display);
  font-size:.8rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;
  color:#6b6b6b;margin-bottom:1rem;
}
.counter-number{
  font-family:var(--display);
  font-size:clamp(3.5rem,12vw,7rem);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--gold-dark);
  line-height:1;
  margin-bottom:.5rem;
  font-variant-numeric:tabular-nums;
}
.counter-unit{
  font-family:var(--display);
  font-size:clamp(.95rem,2vw,1.3rem);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6b6b6b;
}
/* ── The counter's own two rules ── */
.counter-link{
  white-space:nowrap;
}

.counter-link.brush-link:hover{color:#2A2A2A}

@media(max-width:768px){
  .counter{padding:4rem 1.5rem;min-height:250px}
}