Components

Ledger

A row of large animated count-up statistics, styled as ledger entries — on paper by default, with a dark reprise for use on iron sections.

Markup

<section class="ledger paper" id="ledger" aria-label="The ledger">
  <span class="kicker">THE LEDGER</span>
  <div class="rows">
    <div class="stat rv"><span class="n" data-count="31406" data-commas>0</span><span class="l">WORK ORDERS SINCE 1987</span></div>
    <div class="stat rv"><span class="n" data-count="412">0</span><span class="l">PARTS ON EVERY TRUCK</span></div>
  </div>
</section>

Dark reprise

Add .ledger-dark alongside .ledger (dropping .paper) to use the same stat-row layout on a dark/iron section instead — used on the About page's own ledger.

<section class="ledger ledger-dark on-dark" id="ledger" aria-label="The ledger">…</section>

Town ledger variant

.town-ledger (Service Areas page) reuses the same stat-row skeleton but adds a supporting paragraph under each figure instead of just a short label — for entries that need a sentence of explanation, not just a number and a caption.

Javascript

Each .n element with a data-count attribute animates from 0 up to that value over 1.5 seconds, once, the first time it scrolls into view (via IntersectionObserver, eased with a cubic-out curve). Add the data-commas attribute to format the final value with thousands separators. Under prefers-reduced-motion or without JavaScript, the numeral renders at its final value immediately — the markup's initial 0 content is only a placeholder the script replaces, so a no-JS visitor would otherwise see “0”; a very old browser without IntersectionObserver support falls back to running every count-up immediately as well.