/* ═════════════════════════════════════════════════════════════════
   SECTION 5 — NUMBERS YOUR BOARD NEEDS TO SEE
   2-column grid of metric blocks with a decorative object in the background.
   ═════════════════════════════════════════════════════════════════ */

.numbers { background: var(--cream); position: relative; overflow: hidden; }
.numbers::after {
	content: '';
	position: absolute;
	right: -10vw; top: 40%;
	transform: translateY(-50%);
	width: clamp(380px, 50vw, 780px);
	height: clamp(380px, 50vw, 780px);
	/* background: url(../../../img/object.png) center/contain no-repeat; */
	opacity: .11;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, black 25%, transparent 68%);
	mask-image:         radial-gradient(ellipse 70% 70% at 60% 50%, black 25%, transparent 68%);
}

/* S5: hl-lines inline so heading wraps naturally */
.numbers .display .hl-line { display: inline; }
.numbers .display .it-tail { display: inline; }

.numbers-head { max-width: 1100px; margin-bottom: clamp(48px, 6vw, 96px); position: relative; z-index: 1; }
.numbers-head .display { text-transform: uppercase; }

.numbers-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(24px, 3vw, 20px);
	position: relative; z-index: 1;
}
.num-block {
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 20px;
	padding: clamp(24px, 2.5vw, 40px);
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.num-block:hover {
	border-color: var(--green);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
}
@media (prefers-reduced-motion: reduce) {
	.num-block { transition: border-color 0.25s ease; }
	.num-block:hover { transform: none; box-shadow: none; }
}
.num-val   { font-size: var(--fs-card-title); font-weight: 600; color: var(--green); line-height: 1; margin-bottom: 24px; letter-spacing: -.02em; }
.num-title { font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-bottom: .875rem; line-height: 1.25; }
.num-body  { font-size: var(--fs-card-body); color: var(--ink-soft); line-height: 1.55; }

/* ── Responsive ── */
@media (max-width: 767px) { .numbers-grid { grid-template-columns: 1fr; } }