:root{
  --buildns-primary:#1A487E;
  --buildns-secondary:#006CB3;
  --buildns-neutral:#3C3E3F;
}

/* ===== Number-only stat ===== */
.buildns-stat{
  font-family: "Greycliff", Arial, sans-serif;
  line-height: 1.2;
  margin: 0 0 1.5rem 0;
}
.buildns-stat.align-center{ text-align:center; }
.buildns-stat.align-right{ text-align:right; }

.buildns-stat__number{
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  letter-spacing: -0.01em;
}
.buildns-stat--primary   .buildns-stat__number{ color: var(--buildns-primary); }
.buildns-stat--secondary .buildns-stat__number{ color: var(--buildns-secondary); }
.buildns-stat--neutral   .buildns-stat__number{ color: var(--buildns-neutral); }

.buildns-stat__sep{ opacity: 0.6; }

.buildns-stat__label{
  margin-top: .35rem;
  font-weight: 600;
  font-size: clamp(.95rem, 1.5vw, 1.25rem);
  color: var(--buildns-neutral);
}

.buildns-stat__note{
  margin-top: .25rem;
  font-size: .9rem;
  color: #666;
}

/* ===== Gauge (SVG) ===== */
.buildns-gauge{
  position: relative;
  width: min(var(--gauge-size,320px), 100%);
  margin: 0;
  font-family: "Greycliff", Arial, sans-serif;
  --gauge-dur: 900ms;
  --gauge-pct: 0;
  --gauge-number-offset: 0.3rem; /* move number away (+down) or toward (-up) the arc */
}
.buildns-gauge svg{
  display:block;
  width:100%;
  height:auto;
}

/* Number spacing: adjust with --gauge-number-offset */
.buildns-gauge__number{
  position:absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, calc(-50% + var(--gauge-number-offset)));
  font-weight: 700;
  font-size: clamp(1.25rem, 3.5vw, 2.5rem);
  letter-spacing: -0.01em;
  pointer-events:none;
}
.buildns-gauge__label{
  text-align:center;
  margin-top: .5rem;
  font-weight: 600;
  color:#3C3E3F;
  font-size: clamp(.95rem, 1.5vw, 1.25rem);
}

.buildns-gauge.align-left   { text-align:left; }
.buildns-gauge.align-center { margin-left:auto; margin-right:auto; text-align:center; }
.buildns-gauge.align-right  { margin-left:auto; text-align:right; }

/* Animation: draw the stroke from 0 -> var(--gauge-pct) when .in-view is added */
.buildns-gauge .g-progress{
  stroke-dasharray: 0 100; /* initial */
}
.buildns-gauge.in-view .g-progress{
  animation: buildns-gauge-fill var(--gauge-dur) ease-out forwards;
}
@keyframes buildns-gauge-fill{
  from { stroke-dasharray: 0 100; }
  to   { stroke-dasharray: var(--gauge-pct) 100; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .buildns-gauge .g-progress{
    stroke-dasharray: var(--gauge-pct) 100 !important;
    animation: none !important;
  }
}