/* ── Digital ROI — Blog single post (prefix: bsp-) ─────────────────────── */

:root {
	--bsp-dark:   #0d0d0d;
	--bsp-white:  #ffffff;
	--bsp-ink:    #111111;
	--bsp-accent: #ed3d0e;
	--bsp-dark-muted:  rgba(255,255,255,.55); /* on the dark hero / CTA band */
	--bsp-body-muted:  #555555;               /* on the white article body */
	--bsp-border: rgba(0,0,0,.1);
}

.bsp-page { background: var(--bsp-white); }
.bsp-container { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px,4vw,60px); }
.bsp-container--narrow { max-width: 760px; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.bsp-hero {
	background: var(--bsp-dark);
	padding: clamp(100px,12vw,160px) 0 clamp(48px,6vw,72px);
	text-align: center;
}
.bsp-hero__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bsp-accent);
	margin-bottom: 20px;
}
.bsp-hero__h1 {
	font-size: clamp(32px,5vw,56px) !important;
	font-weight: 900 !important;
	line-height: 1.15 !important;
	letter-spacing: -.02em !important;
	color: var(--bsp-white) !important;
	margin: 0 0 20px !important;
	text-transform: none !important;
}
.bsp-hero__meta {
	font-size: 13px;
	color: var(--bsp-dark-muted);
	font-weight: 500;
}
.bsp-hero__sep { margin: 0 8px; opacity: .5; }
.bsp-hero__author { font-weight: 700; color: rgba(255,255,255,.8); }

/* ── Article body ────────────────────────────────────────────────────── */
.bsp-body {
	background: var(--bsp-white);
	padding: clamp(48px,7vw,88px) 0;
}
.bsp-content { color: #2a2a2a; font-size: 16px; line-height: 1.8; }
.bsp-content p { margin: 0 0 24px; }
.bsp-content h2 {
	font-size: clamp(22px,3vw,30px) !important;
	font-weight: 800 !important;
	color: var(--bsp-ink) !important;
	letter-spacing: -.01em !important;
	margin: 48px 0 18px !important;
	line-height: 1.3 !important;
	text-transform: none !important;
}
.bsp-content h2:first-child { margin-top: 0 !important; }
.bsp-content h3 {
	font-size: 19px !important;
	font-weight: 700 !important;
	color: var(--bsp-ink) !important;
	margin: 32px 0 14px !important;
	text-transform: none !important;
}
.bsp-content a { color: var(--bsp-accent); text-decoration: underline; text-underline-offset: 2px; }
.bsp-content a:hover { color: #ff5a2e; }
.bsp-content strong { color: var(--bsp-ink); font-weight: 700; }
.bsp-content ul, .bsp-content ol { margin: 0 0 24px; padding-left: 22px; }
.bsp-content li { margin-bottom: 10px; }
.bsp-content blockquote {
	margin: 32px 0;
	padding: 20px 24px;
	border-left: 2px solid var(--bsp-accent);
	background: rgba(237,61,14,.06);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: #1a1a1a;
}
.bsp-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0 24px; }

/* ── CTA + back link ─────────────────────────────────────────────────── */
.bsp-cta { background: var(--bsp-dark); padding: clamp(56px,8vw,88px) 0 clamp(40px,5vw,56px); }
.bsp-cta__inner { text-align: center; margin-bottom: 40px; }
.bsp-cta__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bsp-accent);
	margin-bottom: 14px;
}
.bsp-cta__h2 {
	font-size: clamp(24px,3.5vw,36px) !important;
	font-weight: 800 !important;
	color: var(--bsp-white) !important;
	margin: 0 0 28px !important;
	text-transform: none !important;
}
.bsp-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--bsp-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 14px 28px;
	border-radius: 8px;
	text-decoration: none;
	transition: background .2s ease;
}
.bsp-cta__btn:hover { background: #c93209; }
.bsp-back {
	display: block;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--bsp-dark-muted);
	text-decoration: none;
}
.bsp-back:hover { color: var(--bsp-accent); }

@media (max-width: 600px) {
	.bsp-hero { padding: 88px 0 40px; }
}