/* ============================================================================
   Grand Tour #54 - KPI/stat tiles become milestones
   ----------------------------------------------------------------------------
   Re-skins the site's numeric stat/KPI tiles into calm rail-travel JOURNEY
   MILESTONES (distance-posts on a rail line). CSS-ONLY, no markup change.

   Targets (real classes found live on costandprofitability.com):
     - .stats-band .stat-item  (big-number band; .stat-num.serif + .stat-label)
     - .praxis .case-metrics-band .case-metric  (.cm-val + .cm-label)

   Deliberately DOES NOT touch:
     - .cnp-inst-stat / .cnp-inst-stat__fig / .cnp-inst-stat__cap  (hero ticket
       -- prior hero regression noted; left fully alone)
     - .section-num  (section eyebrow, not a KPI tile)

   Palette: Instrument only --
     cream #F5EEE1 | card #FBF6EB | ink #2A211B | soft-ink #6E6253
     hairline #DED3BF | burnt-orange #C75B22
   No new colours, no motion (calm/engineered; reduced-motion inherently safe).
   All accents are INSET / in-flow -- no width or negative-margin change, so
   the grid tiles cannot overflow.
   ============================================================================ */

/* --- Tabular figures on the big serif number: milestone-marker legibility,
       and steadier data-countup (no glyph-width jitter while counting). ----- */
.stats-band .stat-num,
.praxis .case-metrics-band .case-metric .cm-val {
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ============================================================================
   1) STATS BAND (dark ink band) -- centre-aligned distance posts
   ----------------------------------------------------------------------------
   Each tile gets ONE small burnt-orange "distance post" tick centred above the
   number, like a milestone marker standing on the rail line (the existing
   vertical hairline dividers between items read as the rail). In normal flow,
   auto-centred, fixed size -> adds only vertical height inside a band with 44px
   padding; no horizontal growth.
   ============================================================================ */
.stats-band .stat-item {
	position: relative;
}

.stats-band .stat-item::before {
	content: "";
	display: block;
	width: 2px;
	height: 14px;
	margin: 0 auto 12px;
	background: #C75B22;               /* burnt-orange -- the milestone post */
	border-radius: 1px;
}

/* Mono label reads as the station / distance label under the marker. */
.stats-band .stat-label {
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: 0.06em;
}

/* ============================================================================
   2) CASE-METRICS BAND (light praxis surface) -- left-edge distance posts
   ----------------------------------------------------------------------------
   These tiles are left-aligned, so the post sits at the start of each metric.
   Same single burnt-orange tick; a faint hairline is not added (the band
   already has a hairline top border) to keep it to ONE accent per tile.
   ============================================================================ */
.praxis .case-metrics-band .case-metric {
	position: relative;
}

.praxis .case-metrics-band .case-metric .cm-val {
	position: relative;
	padding-top: 14px;                 /* room for the inset post above */
}

.praxis .case-metrics-band .case-metric .cm-val::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 2px;
	background: #C75B22;               /* burnt-orange -- horizontal distance tick */
	border-radius: 1px;
}

/* Mono label as station/distance label, consistent with the band above. */
.praxis .case-metrics-band .case-metric .cm-label {
	letter-spacing: 0.06em;
}

/* ============================================================================
   Reduced-motion: this treatment is fully static (no transitions/animation),
   so there is nothing to disable. Declared for auditability only.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
	.stats-band .stat-item::before,
	.praxis .case-metrics-band .case-metric .cm-val::before {
		transition: none;
		animation: none;
	}
}