/*
  Statistics — two treatments, deliberately different from each other so
  the page never shows the same numbers twice in the same shape.

  .m-ledger  a light, full-width hairline row directly under the hero:
             the organisation's credentials as quiet reference data.
  .m-stats   a dark full-bleed panel further down the page: the same kind
             of content given weight, with oversized tabular numerals.

  Both keep the parent's .ti-num class on the number itself, which is what
  motion.js's count-up animation binds to — reusing that rather than
  writing a second count-up implementation.
*/

/* ---------- Ledger row ---------- */
.m-ledger{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.m-ledger-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
}
.m-ledger-item{
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-7) var(--s-6);
  border-left:1px solid var(--line);
}
.m-ledger-item:first-child{border-left:0;padding-left:0;}
.m-ledger-item:last-child{padding-right:0;}

.m-ledger-item .ti-idx{
  display:block;font-family:var(--font-mono);font-size:var(--t-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2-deep);
}
.m-ledger-item .ti-num{
  display:flex;align-items:baseline;gap:var(--s-3);
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem, 1.3rem + 2.4vw, 3rem);line-height:1;
  color:var(--accent);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.m-ledger-item .ti-num small{
  display:block;font-family:var(--font-body);font-weight:600;
  font-size:var(--t-sm);letter-spacing:0;text-transform:none;
  color:var(--ink);line-height:1.3;max-width:20ch;
}
.m-ledger-item .ti-body{
  margin:0;font-size:var(--t-sm);color:var(--ink-soft);line-height:1.55;
  max-width:34ch;
}

@media (max-width:860px){
  .m-ledger-grid{grid-template-columns:1fr;}
  .m-ledger-item{
    border-left:0;border-top:1px solid var(--line);
    padding:var(--s-6) 0;
  }
  .m-ledger-item:first-child{border-top:0;}
  .m-ledger-item:last-child{padding-right:0;}
}

/* ---------- Dark stats panel ---------- */
.m-stats{
  background:var(--accent-dark);color:var(--panel-dark-text);
  padding-block:var(--section-y);
  position:relative;overflow:hidden;
}
/* A single wide gold hairline arc bleeding off the right edge — derived
   from --accent-2, purely decorative, sitting behind the content. */
.m-stats::after{
  content:"";position:absolute;right:-18%;top:-40%;
  width:min(720px,70vw);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--gold-wash);
  pointer-events:none;
}

.m-stats .m-head{margin-bottom:var(--s-9);}
.m-stats h2{color:var(--panel-dark-text);}
.m-stats .m-lead{color:var(--panel-dark-text-soft);}
.m-stats .m-label{color:var(--accent-2);}

/* Asymmetric column widths: the lead statistic gets twice the field of the
   two supporting ones, so the row reads as a hierarchy rather than three
   interchangeable cells. */
.m-stats-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;
  gap:var(--s-6);position:relative;z-index:1;
}
.m-stat{
  display:flex;flex-direction:column;gap:var(--s-3);
  padding-top:var(--s-6);border-top:1px solid rgba(236,239,230,.18);
}
.m-stat .ti-num{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:var(--t-stat);line-height:.94;letter-spacing:-.035em;
  color:var(--accent-2);font-variant-numeric:tabular-nums;
}
.m-stat .ti-num small{
  display:block;font-family:var(--font-mono);font-size:var(--t-mono);
  letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  color:var(--panel-dark-text-soft);margin-top:var(--s-3);
}
.m-stat p{
  margin:0;font-size:var(--t-sm);line-height:1.6;
  color:var(--panel-dark-text-soft);max-width:34ch;
}
.m-stat-lead .ti-num{font-size:clamp(3rem, 1.8rem + 5vw, 6rem);}

.m-stats-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5);
  margin-top:var(--s-9);padding-top:var(--s-6);
  border-top:1px solid rgba(236,239,230,.18);
  position:relative;z-index:1;
}
.m-stats-foot p{
  margin:0;color:var(--panel-dark-text-soft);font-size:var(--t-sm);
  max-width:52ch;flex:1 1 320px;
}

@media (max-width:900px){
  .m-stats-grid{grid-template-columns:1fr 1fr;}
  .m-stat-lead{grid-column:1 / -1;}
}
@media (max-width:560px){
  .m-stats-grid{grid-template-columns:1fr;gap:var(--s-5);}
  .m-stat-lead{grid-column:auto;}
}