/* ==========================================================================
   BlinkShift — Section blocks
   --------------------------------------------------------------------------
   Each block owns a namespace (.bs-hero, .bs-pain, …) and its layout variants
   are expressed as modifier classes driven by the block's `layout` attribute.
   Nothing here hard-codes colour: section schemes remap the semantic tokens.
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */

.bs-hero {
	position: relative;
	padding-block: calc(var(--header-h) + clamp(2.25rem, 4.5vw, 4rem)) var(--section-y);
	overflow: hidden;
}

.bs-hero__inner { position: relative; z-index: 2; }

.bs-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.bs-hero--stacked .bs-hero__copy { align-items: center; }

.bs-hero__label { margin-bottom: var(--sp-5); }

.bs-hero__title {
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	margin: 0;
	max-width: 16ch;
	text-wrap: balance;
}

.bs-hero__sub {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--c-ink-soft);
	max-width: 54ch;
	margin-top: var(--sp-6);
}

.bs-hero__actions { margin-top: var(--sp-8); }

/* A grid, not flex-wrap: three stats in a half-width hero column were
   breaking 2 + 1 and reading as a mistake. */
.bs-hero__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: var(--sp-6) clamp(var(--sp-4), 2vw, var(--sp-8));
	width: 100%;
	margin-top: var(--sp-10);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-line);
}

.bs-hero__meta .bs-stat__label { max-width: 18ch; }

.bs-hero__metaitem {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.bs-hero__metaval {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-heading);
}

.bs-hero__metalabel {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-muted);
}

.bs-hero__visual {
	position: relative;
	border-radius: var(--r-xl);
	overflow: hidden;
	background: var(--c-surface-2);
}

.bs-hero__visual img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* The hero visual's ::after belongs to depth.css, which owns the hover sheen.
   An amber corner bracket used to live here; it survived the palette change
   only because depth.css happened to load later and neutralise every one of
   its properties, which is a fragile way for a rule to be "gone". */

/* --- variant: split ----------------------------------------------------- */

.bs-hero--split .bs-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	gap: clamp(var(--sp-8), 4.5vw, var(--sp-16));
	align-items: center;
}

/* The hero image is a card inside the container: it stops at the container's
   right edge, in line with the header and every section below it, and keeps
   the radius on all four corners. It still stretches to the full height of the
   row so the two columns square off against each other. */
.bs-hero--split .bs-hero__visual {
	align-self: stretch;
	min-block-size: min(34rem, 76vh);
}

/* No image supplied — collapse to a single column instead of leaving half the
   hero as dead space. */
.bs-hero--split .bs-hero__grid:not(:has(.bs-hero__visual)) {
	grid-template-columns: minmax(0, 1fr);
}

/* Stacked, the image goes back to a landscape crop sized by its own width. */
@media (max-width: 980px) {
	.bs-hero--split .bs-hero__grid { grid-template-columns: minmax(0, 1fr); }

	.bs-hero--split .bs-hero__visual {
		order: 2;
		align-self: auto;
		aspect-ratio: 16 / 10;
		min-block-size: 0;
	}
}

/* --- variant: stacked --------------------------------------------------- */

.bs-hero--stacked { text-align: center; }
.bs-hero--stacked .bs-hero__title { max-width: 22ch; margin-inline: auto; }
.bs-hero--stacked .bs-hero__sub { margin-inline: auto; }
.bs-hero--stacked .bs-hero__label { justify-content: center; }
.bs-hero--stacked .bs-actions { justify-content: center; }
.bs-hero--stacked .bs-hero__visual { margin-top: var(--sp-16); aspect-ratio: 16 / 7; }
.bs-hero--stacked .bs-hero__meta { justify-content: center; }

/* --- variant: statement ------------------------------------------------- */

.bs-hero--statement { padding-block-end: var(--section-y-sm); }

.bs-hero--statement .bs-hero__title {
	font-size: var(--fs-display);
	max-width: 15ch;
}

.bs-hero--statement .bs-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-10);
}

.bs-hero--statement .bs-hero__aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-10);
	align-items: end;
	padding-top: var(--sp-10);
	border-top: 1px solid var(--c-line);
}

@media (max-width: 900px) {
	.bs-hero--statement .bs-hero__aside { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* --- optional background media ------------------------------------------ */

.bs-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bs-hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.bs-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, var(--c-bg) 12%, color-mix(in srgb, var(--c-bg) 55%, transparent) 62%, transparent);
}

/* Soft amber glow behind dark heroes. */
.bs-hero--glow::before {
	content: '';
	position: absolute;
	top: -22%;
	right: -10%;
	inline-size: min(46rem, 70vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--ac-a16), transparent 68%);
	pointer-events: none;
	z-index: 0;
}

/* ==========================================================================
   HEADING -> CONTENT CONTRACT
   One token governs the gap between every section heading group and the
   content below it. Six blocks previously shipped six different values.
   ========================================================================== */

.bs-pain__head,
.bs-services__head,
.bs-proof__head,
.bs-why__head,
.bs-process__head,
.bs-faq__head,
.bs-audience__head,
.bs-stats__head,
.bs-contact__head,
.bs-testimonials__head,
.bs-proseblock__head {
	margin-bottom: var(--head-gap);
}

/* The split FAQ pins its heading in a sticky rail, so the gap belongs to the
   grid, not the heading. */
.bs-faq--split .bs-faq__head { margin-bottom: 0; }
/* ==========================================================================
   PAIN CARDS  ("Sound Familiar?")
   ========================================================================== */



.bs-pain__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.bs-pain__index {
	font-family: var(--font-mono);
	font-size: var(--fs-index);
	letter-spacing: var(--ls-label);
	color: var(--c-accent-quiet);
}

.bs-pain__title {
	font-size: var(--fs-h4);
	margin: 0;
}

.bs-pain__text {
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
}

.bs-pain__transition {
	margin-top: clamp(var(--sp-10), 4vw, var(--sp-16));
	padding-top: var(--sp-10);
	border-top: 1px solid var(--c-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-8);
}

.bs-pain__transitiontext {
	font-size: var(--fs-lead);
	line-height: 1.5;
	max-width: 54ch;
	color: var(--c-ink);
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	letter-spacing: -0.02em;
}

/* --- variant: grid (bordered cards) ------------------------------------- */

.bs-pain--grid .bs-pain__item {
	padding: clamp(var(--sp-7), 2.6vw, var(--sp-10));
	gap: var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

/* The index becomes a large ghost numeral in the corner. It gives the card a
   second focal point and fills the space a short card would otherwise leave
   blank at the bottom — the "unfinished" look these cards had before. */
.bs-pain--grid .bs-pain__index {
	position: absolute;
	top: clamp(var(--sp-5), 2vw, var(--sp-7));
	right: clamp(var(--sp-6), 2.2vw, var(--sp-8));
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-display);
	line-height: 1;
	color: var(--ghost-ink);
	transition: color var(--dur) var(--ease-out);
	pointer-events: none;
}

/* The light/paper override that used to sit here matched nothing — the section
   carries `.bs-pain--grid` and `data-scheme` on the same element, so the
   numeral stayed white-on-white and vanished. --ghost-ink inherits instead. */

.bs-pain--grid .bs-pain__item:hover .bs-pain__index { color: var(--glow-a24); }

/* Clear the numeral so a long headline never runs under it. The size stays at
   the shared card-title step (--fs-h4) so pain, proof and why-us headlines all
   read as the same rank whichever variants a page happens to combine. */
.bs-pain--grid .bs-pain__title {
	padding-inline-end: 3.5rem;
}

.bs-pain--grid .bs-pain__text { flex: 1 1 auto; }

.bs-pain--grid .bs-pain__item:hover {
	border-color: var(--c-accent);
	transform: translateY(-4px);
}

/* --- variant: stagger (offset columns, no boxes) ------------------------ */

.bs-pain--stagger .bs-pain__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(var(--sp-6), 3vw, var(--sp-12));
	align-items: start;
}

.bs-pain--stagger .bs-pain__item {
	padding-top: var(--sp-6);
	border-top: 2px solid var(--c-line);
	transition: border-color var(--dur) var(--ease-out);
}

.bs-pain--stagger .bs-pain__item:hover { border-top-color: var(--c-accent); }
.bs-pain--stagger .bs-pain__item:nth-child(2) { margin-top: clamp(0px, 4vw, 3.5rem); }
.bs-pain--stagger .bs-pain__item:nth-child(3) { margin-top: clamp(0px, 8vw, 7rem); }

@media (max-width: 900px) {
	.bs-pain--stagger .bs-pain__items { grid-template-columns: minmax(0, 1fr); }
	.bs-pain--stagger .bs-pain__item:nth-child(n) { margin-top: 0; }
}

/* --- variant: rows (numbered full-width rows) --------------------------- */

.bs-pain--rows .bs-pain__items {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--c-line);
}

.bs-pain--rows .bs-pain__item {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(var(--sp-5), 3vw, var(--sp-12));
	align-items: start;
	padding-block: clamp(var(--sp-7), 3vw, var(--sp-10));
	border-bottom: 1px solid var(--c-line);
	transition: background-color var(--dur) var(--ease-out), padding-inline var(--dur) var(--ease-out);
}

.bs-pain--rows .bs-pain__item:hover {
	background: var(--c-surface-2);
	padding-inline: var(--sp-5);
}

@media (max-width: 860px) {
	.bs-pain--rows .bs-pain__item {
		grid-template-columns: 2.5rem minmax(0, 1fr);
	}
	.bs-pain--rows .bs-pain__text { grid-column: 2; }
}

/* The chip is a card device. The row and stagger variants lay their children
   out in a fixed grid that an extra child would shift out of alignment, so it
   is suppressed there and the numeral stays the marker. */
.bs-pain--rows .bs-card__chip,
.bs-pain--stagger .bs-card__chip { display: none; }

/* ==========================================================================
   SERVICES  ("Platforms That Fit How You Actually Operate")
   --------------------------------------------------------------------------
   Every variant renders the same three direct children — optional media,
   a single __main wrapper, and an optional arrow — so a layout can define its
   own grid without the card's internals leaking into it.
   ========================================================================== */



.bs-service {
	position: relative;
	min-width: 0;
}

.bs-service__main {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	min-width: 0;
}

.bs-service__head {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	min-width: 0;
}

.bs-service__copy {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	min-width: 0;
}

.bs-service__index {
	font-family: var(--font-mono);
	font-size: var(--fs-index);
	letter-spacing: var(--ls-label);
	color: var(--c-muted);
	line-height: 1;
}

.bs-service__title {
	font-size: var(--fs-h4);
	margin: 0;
	text-wrap: balance;
}

.bs-service__title a { text-decoration: none; }

.bs-service__text {
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
	max-width: 56ch;
}

.bs-service__link { margin-top: var(--sp-1); }

.bs-service__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.bs-service__tag {
	font-family: var(--font-display);
	font-size: 0.6875rem;
	letter-spacing: var(--ls-eyebrow);
	padding: 0.4em 0.7em;
	border: 1px solid var(--c-line);
	border-radius: var(--r-xs);
	color: var(--c-muted);
}

.bs-service__media {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--c-surface-2);
	aspect-ratio: 4 / 3;
}

.bs-service__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.bs-service__arrow {
	display: none;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	flex: none;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	color: var(--c-ink);
	transition: background-color var(--dur) var(--ease-out),
	            color var(--dur) var(--ease-out),
	            border-color var(--dur) var(--ease-out),
	            transform var(--dur) var(--ease-out);
}

/* --- variant: grid ------------------------------------------------------ */

.bs-services--grid .bs-services__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: var(--sp-6);
}

.bs-services--grid .bs-service {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	padding: clamp(var(--sp-6), 2.4vw, var(--sp-9));
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease-out),
	            transform var(--dur) var(--ease-out),
	            box-shadow var(--dur) var(--ease-out);
}

.bs-services--grid .bs-service__main { flex: 1 1 auto; }
.bs-services--grid .bs-service__copy { flex: 1 1 auto; }
/* The link becomes the card's footer: pinned to the bottom behind a hairline,
   so a row of cards with different amounts of copy still lines its calls to
   action up along one edge. */
.bs-services--grid .bs-service__link {
	margin-top: auto;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
}
.bs-services--grid .bs-service__media { aspect-ratio: 16 / 10; margin: calc(clamp(1.5rem, 2.4vw, 2.25rem) * -1) calc(clamp(1.5rem, 2.4vw, 2.25rem) * -1) 0; border-radius: 0; }

/* A rule that draws itself across the card foot on hover. */
.bs-services--grid .bs-service::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	block-size: 2px;
	background: var(--c-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-slow) var(--ease-out);
}

.bs-services--grid .bs-service:hover::after { transform: scaleX(1); }

.bs-services--grid .bs-service:hover {
	border-color: var(--c-line-strong);
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

/* --- variant: alternating ----------------------------------------------- */

.bs-services--alternating .bs-services__items {
	display: grid;
	gap: clamp(var(--sp-12), 6vw, var(--sp-24));
}

.bs-services--alternating .bs-service {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(var(--sp-8), 5vw, var(--sp-16));
	align-items: center;
}

.bs-services--alternating .bs-service:nth-child(even) .bs-service__media { order: 2; }
.bs-services--alternating .bs-service__title { font-size: var(--fs-h3); }
.bs-services--alternating .bs-service__media { aspect-ratio: 5 / 4; }

/* No media on this card — let the copy use the full row rather than leaving
   an empty column. */
.bs-services--alternating .bs-service:not(:has(.bs-service__media)) {
	grid-template-columns: minmax(0, 1fr);
	max-width: 60rem;
}

@media (max-width: 900px) {
	.bs-services--alternating .bs-service {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-6);
	}
	.bs-services--alternating .bs-service:nth-child(even) .bs-service__media { order: 0; }
}

/* --- variant: list ------------------------------------------------------ */

.bs-services--list .bs-services__items {
	border-top: 1px solid var(--c-line);
}

.bs-services--list .bs-service {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--sp-6);
	align-items: center;
	padding-block: clamp(var(--sp-6), 2.6vw, var(--sp-10));
	padding-inline: 0;
	border-bottom: 1px solid var(--c-line);
	transition: padding-inline var(--dur) var(--ease-out),
	            background-color var(--dur) var(--ease-out);
}

.bs-services--list .bs-service:hover {
	background: var(--c-surface-2);
	padding-inline: var(--sp-6);
}

.bs-services--list .bs-service__media { display: none; }

/* index | title | copy — a three-track editorial row. */
.bs-services--list .bs-service__main {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1.05fr) minmax(0, 1.35fr);
	gap: clamp(var(--sp-4), 2.4vw, var(--sp-10));
	align-items: center;
}

.bs-services--list .bs-service__index { align-self: center; }
.bs-services--list .bs-service__title { font-size: var(--fs-h3); }
.bs-services--list .bs-service__arrow { display: grid; }

.bs-services--list .bs-service:hover .bs-service__arrow {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-accent-ink);
	transform: rotate(-45deg);
}

@media (max-width: 1024px) {
	.bs-services--list .bs-service__main {
		grid-template-columns: 2.75rem minmax(0, 1fr);
		gap: var(--sp-3) var(--sp-5);
		align-items: start;
	}
	.bs-services--list .bs-service__copy { grid-column: 2; }
	.bs-services--list .bs-service__title { font-size: var(--fs-h4); }
}

@media (max-width: 620px) {
	.bs-services--list .bs-service {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-4);
	}
	.bs-services--list .bs-service__arrow { display: none; }
	.bs-services--list .bs-service:hover { padding-inline: 0; }
	.bs-services--list .bs-service__main {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-3);
	}
	.bs-services--list .bs-service__copy { grid-column: 1; }
}

/* ==========================================================================
   PROOF  ("Built in Production")
   ========================================================================== */



.bs-proof__item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	text-decoration: none;
	color: inherit;
}

.bs-proof__title { font-size: var(--fs-h4); margin: 0; }

.bs-proof__text {
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
}

.bs-proof__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-accent-quiet);
}

/* Pulsing "live" dot — these are production systems, and the copy leans on it. */
.bs-proof__dot {
	inline-size: 0.45rem;
	block-size: 0.45rem;
	border-radius: 50%;
	background: var(--c-accent);
	box-shadow: 0 0 0 0 var(--ac-a32);
	animation: bs-pulse 2.4s var(--ease-out) infinite;
}

@keyframes bs-pulse {
	0%   { box-shadow: 0 0 0 0 var(--ac-a32); }
	70%  { box-shadow: 0 0 0 0.6rem transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- variant: columns --------------------------------------------------- */

.bs-proof--columns .bs-proof__item {
	padding: clamp(var(--sp-6), 2.4vw, var(--sp-10));
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: var(--c-surface);
	transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.bs-proof--columns .bs-proof__item:hover {
	border-color: var(--c-accent);
	transform: translateY(-4px);
}

/* --- variant: feature (first item large) -------------------------------- */

.bs-proof--feature .bs-proof__items {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(var(--sp-6), 3vw, var(--sp-10));
}

.bs-proof--feature .bs-proof__item {
	padding: clamp(var(--sp-6), 2.4vw, var(--sp-10));
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: var(--c-surface);
}

.bs-proof--feature .bs-proof__item:first-child {
	grid-row: span 2;
	justify-content: center;
	background: var(--c-surface-2);
}

.bs-proof--feature .bs-proof__item:first-child .bs-proof__title { font-size: var(--fs-h3); }

@media (max-width: 900px) {
	.bs-proof--feature .bs-proof__items { grid-template-columns: minmax(0, 1fr); }
	.bs-proof--feature .bs-proof__item:first-child { grid-row: auto; }
}

/* --- variant: ticker (horizontal scroll / swiper) ----------------------- */

.bs-proof--ticker .bs-proof__items {
	display: flex;
	gap: var(--sp-6);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--sp-4);
	scrollbar-width: thin;
}

.bs-proof--ticker .bs-proof__item {
	flex: 0 0 min(24rem, 82vw);
	scroll-snap-align: start;
	padding: clamp(var(--sp-6), 2.4vw, var(--sp-10));
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: var(--c-surface);
}

/* ==========================================================================
   WHY US
   ========================================================================== */

.bs-why__point {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.bs-why__index {
	font-family: var(--font-mono);
	font-size: var(--fs-index);
	letter-spacing: var(--ls-label);
	color: var(--c-accent-quiet);
}

.bs-why__title { font-size: var(--fs-h4); margin: 0; }

.bs-why__text {
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
}

/* One marker per point. Where the chip appears it replaces the numeral; the
   numbered variant is built around its numerals, so there the chip gives way
   instead. Two markers side by side just read as clutter. */
.bs-why--sticky .bs-why__point:has(.bs-card__chip) .bs-why__index,
.bs-why--grid .bs-why__point:has(.bs-card__chip) .bs-why__index { display: none; }

.bs-why--numbered .bs-card__chip { display: none; }

/* --- variant: numbered (two columns of numbered points) ----------------- */

.bs-why--numbered .bs-why__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(var(--sp-8), 4vw, var(--sp-14));
}

.bs-why--numbered .bs-why__point {
	padding-top: var(--sp-6);
	border-top: 2px solid var(--c-line);
	transition: border-color var(--dur) var(--ease-out);
}

.bs-why--numbered .bs-why__point:hover { border-top-color: var(--c-accent); }

@media (max-width: 820px) {
	.bs-why--numbered .bs-why__points { grid-template-columns: minmax(0, 1fr); }
}

/* --- variant: sticky (heading pinned left, points scroll right) --------- */

.bs-why--sticky .bs-why__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(var(--sp-10), 6vw, var(--sp-24));
	align-items: start;
}

.bs-why--sticky .bs-why__points {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--c-line);
}

.bs-why--sticky .bs-why__point {
	padding-block: clamp(var(--sp-7), 3vw, var(--sp-10));
	border-bottom: 1px solid var(--c-line);
	flex-direction: row;
	gap: var(--sp-6);
	align-items: start;
}

.bs-why--sticky .bs-why__index { flex: none; padding-top: 0.35rem; }

@media (max-width: 900px) {
	.bs-why--sticky .bs-why__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- variant: grid (icon cards) ----------------------------------------- */

.bs-why--grid .bs-why__point {
	padding: clamp(var(--sp-6), 2.4vw, var(--sp-9));
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.bs-why--grid .bs-why__point:hover {
	border-color: var(--c-accent);
	transform: translateY(-4px);
}

/* ==========================================================================
   STATS
   ========================================================================== */

/* --- variant: bar (single row, hairline separators) --------------------- */

.bs-stats--bar .bs-stats__items {
	display: grid;
	grid-template-columns: repeat(var(--stat-count, 4), minmax(0, 1fr));
	gap: clamp(var(--sp-6), 3vw, var(--sp-12));
}

.bs-stats--bar .bs-stat {
	padding-left: clamp(var(--sp-5), 2vw, var(--sp-8));
	border-left: 1px solid var(--c-line);
}

.bs-stats--bar .bs-stat:first-child { padding-left: 0; border-left: 0; }

@media (max-width: 900px) {
	.bs-stats--bar .bs-stats__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bs-stats--bar .bs-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 520px) {
	.bs-stats--bar .bs-stats__items { grid-template-columns: minmax(0, 1fr); }
	.bs-stats--bar .bs-stat { padding-left: 0; border-left: 0; padding-block: var(--sp-5); border-bottom: 1px solid var(--c-line); }
}

/* --- variant: cards ----------------------------------------------------- */

.bs-stats--cards .bs-stats__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: var(--sp-5);
}

.bs-stats--cards .bs-stat {
	padding: clamp(var(--sp-6), 2.4vw, var(--sp-9));
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}

/* --- variant: inline (label beside value) ------------------------------- */

.bs-stats--inline .bs-stats__items {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(var(--sp-8), 5vw, var(--sp-20));
	align-items: baseline;
}

.bs-stats--inline .bs-stat {
	flex-direction: row;
	align-items: baseline;
	gap: var(--sp-4);
}

.bs-stats--inline .bs-stat__value { font-size: var(--fs-h2); }
.bs-stats--inline .bs-stat__label { max-width: 14ch; }

/* ==========================================================================
   PROCESS  ("How Engagement Works")
   ========================================================================== */

.bs-process__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.bs-process__num {
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: var(--r-pill);
	border: 1px solid var(--c-line-strong);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-ink);
	background: var(--c-bg);
	flex: none;
	transition: background-color var(--dur) var(--ease-out),
	            border-color var(--dur) var(--ease-out),
	            color var(--dur) var(--ease-out);
}

.bs-process__step:hover .bs-process__num {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-accent-ink);
}

.bs-process__title { font-size: var(--fs-h5); margin: 0; }

.bs-process__meta {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-accent-quiet);
}

.bs-process__text {
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
}

/* --- variant: timeline (horizontal, connected) -------------------------- */

.bs-process--timeline .bs-process__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--step-count, 4), minmax(0, 1fr));
	gap: clamp(var(--sp-5), 2.5vw, var(--sp-10));
}

/* Connector line behind the numbered discs. */
.bs-process--timeline .bs-process__steps::before {
	content: '';
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	right: 1.5rem;
	block-size: 1px;
	background: var(--c-line);
	z-index: 0;
}

.bs-process--timeline .bs-process__step { z-index: 1; }

@media (max-width: 980px) {
	.bs-process--timeline .bs-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bs-process--timeline .bs-process__steps::before { display: none; }
}

@media (max-width: 560px) {
	.bs-process--timeline .bs-process__steps { grid-template-columns: minmax(0, 1fr); }
}

/* --- variant: stepper (vertical, rail on the left) ---------------------- */

.bs-process--stepper .bs-process__steps {
	position: relative;
	display: grid;
	gap: clamp(var(--sp-8), 3vw, var(--sp-12));
	padding-left: 4.5rem;
}

.bs-process--stepper .bs-process__steps::before {
	content: '';
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 1.5rem;
	inline-size: 1px;
	background: var(--c-line);
}

.bs-process--stepper .bs-process__num {
	position: absolute;
	left: -4.5rem;
	top: 0;
}

.bs-process--stepper .bs-process__step { position: relative; }

@media (max-width: 560px) {
	.bs-process--stepper .bs-process__steps { padding-left: 3.5rem; }
	.bs-process--stepper .bs-process__num { left: -3.5rem; inline-size: 2.5rem; block-size: 2.5rem; }
	.bs-process--stepper .bs-process__steps::before { left: 1.25rem; }
}

/* --- variant: cards ----------------------------------------------------- */

.bs-process--cards .bs-process__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: var(--sp-5);
}

.bs-process--cards .bs-process__step {
	padding: clamp(var(--sp-6), 2.4vw, var(--sp-9));
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.bs-process--cards .bs-process__step:hover {
	border-color: var(--c-accent);
	transform: translateY(-4px);
}

/* ==========================================================================
   FAQ
   ========================================================================== */



.bs-faq--split .bs-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(var(--sp-10), 6vw, var(--sp-24));
	align-items: start;
}

.bs-faq--split .bs-faq__head { margin-bottom: 0; }

@media (max-width: 900px) {
	.bs-faq--split .bs-faq__grid { grid-template-columns: minmax(0, 1fr); }
}

.bs-faq--two-col .bs-accordion {
	columns: 2;
	column-gap: clamp(var(--sp-8), 4vw, var(--sp-16));
	border-top: 0;
}

.bs-faq--two-col .bs-accordion__item {
	break-inside: avoid;
	border-top: 1px solid var(--c-line);
}

@media (max-width: 900px) {
	.bs-faq--two-col .bs-accordion { columns: 1; }
}

.bs-faq__narrow { max-width: 56rem; margin-inline: auto; }

/* ==========================================================================
   AUDIENCE  ("Who This Is For")
   ========================================================================== */

.bs-audience--split .bs-audience__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(var(--sp-10), 6vw, var(--sp-20));
	align-items: start;
}

@media (max-width: 900px) {
	.bs-audience--split .bs-audience__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- variant: tags ------------------------------------------------------ */

.bs-audience--tags .bs-audience__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.bs-audience--tags .bs-audience__item {
	padding: 0.85em 1.25em;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
	transition: border-color var(--dur) var(--ease-out),
	            background-color var(--dur) var(--ease-out),
	            color var(--dur) var(--ease-out);
}

.bs-audience--tags .bs-audience__item:hover {
	border-color: var(--c-accent);
	background: var(--ac-a10);
	color: var(--c-ink);
}

/* --- variant: cards ----------------------------------------------------- */

.bs-audience--cards .bs-audience__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: var(--sp-4);
}

.bs-audience--cards .bs-audience__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	padding: var(--sp-6);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
	line-height: 1.55;
}

/* ==========================================================================
   CASE STUDY
   ========================================================================== */

.bs-case {
	position: relative;
}

.bs-case__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6) var(--sp-10);
	padding-block: var(--sp-6);
	border-block: 1px solid var(--c-line);
	margin-bottom: clamp(var(--sp-8), 3vw, var(--sp-12));
}

.bs-case__metaitem { display: flex; flex-direction: column; gap: var(--sp-1); }

.bs-case__metalabel {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-muted);
}

.bs-case__metaval { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

.bs-case__title { font-size: var(--fs-h2); margin: 0 0 var(--sp-6); }

.bs-case__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(var(--sp-8), 4vw, var(--sp-16));
	align-items: start;
}

@media (max-width: 900px) {
	.bs-case__body { grid-template-columns: minmax(0, 1fr); }
}

.bs-case__section { display: flex; flex-direction: column; gap: var(--sp-4); }

.bs-case__sectiontitle {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-accent-quiet);
	margin: 0;
}

.bs-case__text { color: var(--c-ink-soft); line-height: var(--lh-loose); font-size: var(--fs-sm); }

.bs-case__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--sp-3);
}

.bs-case__list li {
	display: flex;
	gap: var(--sp-3);
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--c-ink-soft);
}

.bs-case__list li::before {
	content: '';
	flex: none;
	inline-size: 0.4rem;
	block-size: 0.4rem;
	margin-top: 0.6em;
	border-radius: 1px;
	background: var(--c-accent);
	transform: rotate(45deg);
}

.bs-case__stack {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.bs-case__stackitem {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	padding: 0.45em 0.8em;
	border: 1px solid var(--c-line);
	border-radius: var(--r-xs);
	color: var(--c-ink-soft);
	background: var(--c-surface);
}

.bs-case__outcome {
	padding: clamp(var(--sp-6), 2.4vw, var(--sp-9));
	border-radius: var(--r-lg);
	background: var(--ac-a10);
	border: 1px solid var(--ac-a32);
}

.bs-case__foot {
	margin-top: clamp(var(--sp-8), 3vw, var(--sp-12));
	padding-top: var(--sp-8);
	border-top: 1px solid var(--c-line);
}

/* Big index number watermark on the split variant. */
.bs-case--split .bs-case__index {
	font-family: var(--font-display);
	font-size: clamp(4rem, 12vw, 9rem);
	font-weight: var(--fw-black);
	line-height: 0.8;
	letter-spacing: var(--ls-display);
	color: transparent;
	-webkit-text-stroke: 1.5px var(--c-line-strong);
	margin-bottom: var(--sp-6);
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */



.bs-testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	height: auto;
}

.bs-testimonial__quote {
	font-family: var(--font-display);
	font-size: var(--fs-h5);
	font-weight: var(--fw-medium);
	line-height: 1.45;
	letter-spacing: -0.018em;
	color: var(--c-ink);
}

.bs-testimonial__person {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin-top: auto;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
}

.bs-testimonial__avatar {
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: var(--r-pill);
	object-fit: cover;
	flex: none;
	background: var(--c-surface-2);
}

.bs-testimonial__name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

.bs-testimonial__role {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	color: var(--c-muted);
	letter-spacing: 0.03em;
}

.bs-testimonials--grid .bs-testimonials__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: var(--sp-5);
}

.bs-testimonials--grid .bs-testimonial,
.bs-testimonials--slider .bs-testimonial {
	padding: clamp(var(--sp-6), 2.4vw, var(--sp-9));
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}

.bs-testimonials .swiper { overflow: visible; }
.bs-testimonials .swiper-slide { height: auto; }

.bs-slider__nav {
	display: flex;
	gap: var(--sp-3);
	margin-top: var(--sp-8);
}

.bs-slider__btn {
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	color: var(--c-ink);
	transition: background-color var(--dur) var(--ease-out),
	            color var(--dur) var(--ease-out),
	            border-color var(--dur) var(--ease-out);
}

.bs-slider__btn:hover:not(:disabled) {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-accent-ink);
}

.bs-slider__btn:disabled { opacity: 0.35; cursor: default; }

/* Video testimonial cards. */
.bs-testimonials--video .bs-testimonials__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--sp-5);
}

.bs-vidcard {
	position: relative;
	display: block;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--c-surface-2);
	aspect-ratio: 3 / 4;
	text-decoration: none;
}

.bs-vidcard img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.bs-vidcard__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--sp-5);
	background: linear-gradient(to top, rgb(10 10 10 / 0.85), transparent);
	color: #fff;
}

.bs-vidcard__name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.bs-vidcard__role { font-family: var(--font-display); font-size: var(--fs-xs); opacity: 0.75; }

/* ==========================================================================
   TESTIMONIALS — SPOTLIGHT VARIANT
   --------------------------------------------------------------------------
   Panel of quotes on the left, video bleeding off the right edge. Two Swiper
   instances kept in step by the controller module, so the quote and the video
   always belong to the same person.
   ========================================================================== */

.bs-testimonials--spotlight {
	padding-block: 0;
	overflow: hidden;
}

.bs-spot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(var(--sp-7), 4vw, var(--sp-12));
	min-block-size: clamp(28rem, 42vw, 40rem);
}

/* A real .bs-container now wraps the grid, so the panel needs no inline padding
   of its own — it previously carried a calc() that reproduced the container's
   left edge by hand, because the grid spanned the full viewport. The column gap
   handles the space between the two halves. */
.bs-spot__left {
	padding-block: clamp(3rem, 6vw, 5.5rem);
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	min-width: 0;
}

.bs-spot__head .bs-heading__title { font-size: var(--fs-h2); }

.bs-spot__mark {
	font-family: var(--font-display);
	font-size: clamp(3rem, 5vw, 4.5rem);
	font-weight: var(--fw-black);
	line-height: 0.5;
	color: var(--c-accent);
	opacity: 0.9;
}

/* The slider variant sets .bs-testimonials .swiper { overflow: visible } so
   its cards can peek past the container. Spotlight must clip instead, or the
   next quote bleeds across the video. */
.bs-testimonials--spotlight .swiper { overflow: hidden; }

.bs-spot__quotes { width: 100%; }

.bs-spot__quoteslide {
	display: flex !important;
	flex-direction: column;
	gap: var(--sp-6);
	height: auto;
}

.bs-spot__quote {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 0.95rem + 0.85vw, 1.625rem);
	font-weight: var(--fw-medium);
	line-height: 1.42;
	letter-spacing: -0.022em;
	color: var(--c-ink);
	border: 0;
	padding: 0;
	margin: 0;
	max-width: 34ch;
}

.bs-spot__person {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.bs-spot__name {
	font-family: var(--font-display);
	font-size: var(--fs-h5);
	font-weight: var(--fw-bold);
	letter-spacing: -0.02em;
	color: var(--c-ink);
}

.bs-spot__role {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	letter-spacing: 0.04em;
	color: var(--c-muted);
}

.bs-spot__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	margin-top: var(--sp-4);
	flex-wrap: wrap;
}

.bs-spot__controls .bs-slider__nav { margin-top: 0; }

.bs-spot__dots {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.bs-spot__dots .swiper-pagination-bullet {
	inline-size: 0.55rem;
	block-size: 0.55rem;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--c-line-strong);
	opacity: 1;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease-out),
	            border-color var(--dur) var(--ease-out),
	            transform var(--dur) var(--ease-out);
}

.bs-spot__dots .swiper-pagination-bullet-active {
	background: var(--c-accent);
	border-color: var(--c-accent);
	transform: scale(1.15);
}

/* --- right: video, contained ---------------------------------------------- */

.bs-spot__right {
	position: relative;
	align-self: stretch;
	min-width: 0;
}

.bs-spot__medias,
.bs-spot__mediaslide {
	block-size: 100%;
}

.bs-spot__right .swiper { height: 100%; }

/* Inset from the section's top and bottom edges so the video reads as a panel
   sitting in the section rather than a band cutting through it. */
.bs-spot__mediaslide {
	display: flex;
	align-items: stretch;
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

@media (max-width: 900px) {
	.bs-spot {
		grid-template-columns: minmax(0, 1fr);
		min-block-size: 0;
	}

	/* The container supplies the gutter now. */
	.bs-spot__left {
		padding-block: clamp(2.5rem, 8vw, 3.5rem);
		order: 2;
	}

	.bs-spot__right { order: 1; }
	.bs-spot__mediaslide { padding-block: clamp(2rem, 7vw, 3rem) 0; }
	.bs-videoframe { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   VIDEO FRAME  (poster + play button, embed loaded on click)
   ========================================================================== */

/* Rounded on all four corners: the frame used to meet the right-hand edge of
   the screen, where a radius would have looked like a mistake. Now that it sits
   inside the container it matches the hero visual and the cards. */
.bs-videoframe {
	position: relative;
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 16rem;
	overflow: hidden;
	border-radius: var(--r-2xl);
	background: var(--c-surface-2);
}

.bs-videoframe img,
.bs-videoframe iframe,
.bs-videoframe video {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border: 0;
}

/*
 * The player is laid over the poster, not after it.
 *
 * Both the poster and the embed are inline-level and both fill the frame, so
 * appending the embed in normal flow pushed it onto a second line — below the
 * poster, past the frame's own `overflow: hidden`, invisible. Audio played;
 * nothing appeared. Taking it out of flow also means play costs no reflow, so
 * the section no longer shifts under the click.
 */
.bs-videoframe__embed {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: #000;
}

/* Letterbox rather than crop: a talking head cropped to a 16/10 frame loses
   the speaker. The poster still uses cover. */
iframe.bs-videoframe__embed,
video.bs-videoframe__embed {
	object-fit: contain;
}

.bs-videoframe__empty {
	inline-size: 100%;
	block-size: 100%;
	background:
		linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-surface-3) 100%);
}

.bs-videoframe .bs-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgb(0 0 0 / 0.22);
	border: 0;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease-out);
}

.bs-videoframe .bs-play:hover { background: rgb(0 0 0 / 0.34); }

.bs-videoframe[data-playing='true'] .bs-play { display: none; }

/* No video URL set yet — keep the affordance but make it inert-looking. */
.bs-videoframe:not([data-video]) .bs-play { cursor: default; }

/* ==========================================================================
   CTA
   ========================================================================== */

.bs-cta__title {
	font-size: var(--fs-h2);
	margin: 0;
	max-width: 20ch;
}

.bs-cta__text {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--c-ink-soft);
	max-width: 58ch;
	margin-top: var(--sp-6);
}

.bs-cta__actions { margin-top: var(--sp-10); }

/* --- variant: full (full-bleed band) ------------------------------------ */

.bs-cta--full { text-align: center; }
.bs-cta--full .bs-cta__title { margin-inline: auto; }
.bs-cta--full .bs-cta__text { margin-inline: auto; }
.bs-cta--full .bs-actions { justify-content: center; }

/* --- variant: boxed ----------------------------------------------------- */

.bs-cta--boxed { padding-block: var(--section-y-sm); }

.bs-cta--boxed .bs-cta__box {
	position: relative;
	overflow: hidden;
	padding: clamp(var(--sp-10), 5vw, var(--sp-20));
	border-radius: var(--r-xl);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	text-align: center;
}

.bs-cta--boxed .bs-cta__title,
.bs-cta--boxed .bs-cta__text { margin-inline: auto; }
.bs-cta--boxed .bs-actions { justify-content: center; }

/* Radial amber glow bleeding in from the corner. */
.bs-cta--boxed .bs-cta__box::before {
	content: '';
	position: absolute;
	top: -40%;
	left: 50%;
	translate: -50% 0;
	inline-size: min(40rem, 90%);
	aspect-ratio: 1;
	background: radial-gradient(circle, var(--ac-a16), transparent 65%);
	pointer-events: none;
}

.bs-cta--boxed .bs-cta__box > * { position: relative; }

/* --- variant: split ----------------------------------------------------- */

.bs-cta--split .bs-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(var(--sp-8), 5vw, var(--sp-20));
	align-items: center;
}

.bs-cta--split .bs-cta__aside {
	display: grid;
	gap: var(--sp-5);
	justify-items: start;
}

@media (max-width: 900px) {
	.bs-cta--split .bs-cta__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.bs-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(var(--sp-10), 5vw, var(--sp-20));
	align-items: start;
}

@media (max-width: 980px) {
	.bs-contact__grid { grid-template-columns: minmax(0, 1fr); }
}

.bs-contact__panel {
	padding: clamp(var(--sp-6), 3vw, var(--sp-10));
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}

.bs-contact__embed {
	min-block-size: 34rem;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--c-surface-2);
}

.bs-contact__embed iframe { inline-size: 100%; min-block-size: 34rem; border: 0; }

.bs-contact__placeholder {
	display: grid;
	place-items: center;
	gap: var(--sp-4);
	min-block-size: 20rem;
	padding: var(--sp-8);
	text-align: center;
	border: 1px dashed var(--c-line-strong);
	border-radius: var(--r-md);
	color: var(--c-muted);
	font-size: var(--fs-sm);
}

.bs-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-5);
}

.bs-contact__listitem {
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
	margin: 0;
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--c-line);
}

.bs-contact__icon {
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	flex: none;
	border-radius: var(--r-sm);
	background: var(--ac-a16);
	color: var(--c-accent-quiet);
}

.bs-contact__icon svg { inline-size: 1.1rem; block-size: 1.1rem; }

.bs-contact__steps {
	list-style: none;
	counter-reset: bs-step;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-5);
}

.bs-contact__steps li {
	counter-increment: bs-step;
	display: flex;
	gap: var(--sp-4);
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--c-ink-soft);
}

.bs-contact__steps li::before {
	content: counter(bs-step, decimal-leading-zero);
	flex: none;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--c-accent-quiet);
	padding-top: 0.2em;
	letter-spacing: var(--ls-label);
}

/* ==========================================================================
   MARQUEE BLOCK
   ========================================================================== */

.bs-marqueeblock {
	padding-block: clamp(var(--sp-8), 3vw, var(--sp-12));
	border-block: 1px solid var(--c-line);
	overflow: hidden;
}

.bs-marqueeblock--flush { border-block: 0; }

/* ==========================================================================
   PROSE  (long-form editorial section)
   ========================================================================== */

.bs-prose {
	font-size: var(--fs-body);
	line-height: var(--lh-loose);
	color: var(--c-ink-soft);
}

.bs-prose > * + * { margin-top: var(--sp-6); }

.bs-prose h2,
.bs-prose h3,
.bs-prose h4 { color: var(--c-ink); margin-top: var(--sp-12); }

.bs-prose h2 + *,
.bs-prose h3 + *,
.bs-prose h4 + * { margin-top: var(--sp-4); }

.bs-prose strong { color: var(--c-ink); }

.bs-prose--lead { font-size: var(--fs-lead); line-height: 1.6; }

.bs-prose ul li::marker { color: var(--c-accent); }

/* Belief/principle blocks used on the About page. */
.bs-beliefs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: var(--sp-6);
	margin-top: var(--sp-10);
}

.bs-belief {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding-top: var(--sp-5);
	border-top: 2px solid var(--c-line);
	transition: border-color var(--dur) var(--ease-out);
}

.bs-belief:hover { border-top-color: var(--c-accent); }
.bs-belief__title { font-size: var(--fs-h5); margin: 0; color: var(--c-ink); }
.bs-belief__text { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--c-ink-soft); }

/* ==========================================================================
   PAGE HEADER  (for non-section-built pages, archives, single posts)
   ========================================================================== */

.bs-pagehead {
	padding-block: calc(var(--header-h) + clamp(3rem, 6vw, 5.5rem)) clamp(2.5rem, 5vw, 4.5rem);
	border-bottom: 1px solid var(--c-line);
}

.bs-pagehead__title { font-size: var(--fs-h1); margin: var(--sp-5) 0 0; max-width: 20ch; }
.bs-pagehead__intro { margin-top: var(--sp-6); font-size: var(--fs-lead); color: var(--c-ink-soft); max-width: 60ch; }

.bs-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-muted);
}

.bs-breadcrumb a { text-decoration: none; }
.bs-breadcrumb a:hover { color: var(--c-accent-quiet); }
.bs-breadcrumb__sep { color: var(--c-line-strong); }

/* ==========================================================================
   BLOG
   ========================================================================== */

.bs-postcard {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	text-decoration: none;
	color: inherit;
}

.bs-postcard__thumb {
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--c-surface-2);
	aspect-ratio: 16 / 10;
}

.bs-postcard__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.bs-postcard__meta {
	display: flex;
	gap: var(--sp-3);
	align-items: center;
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-muted);
}

.bs-postcard__title { font-size: var(--fs-h5); margin: 0; }
.bs-postcard:hover .bs-postcard__title { color: var(--c-accent-quiet); }
.bs-postcard__excerpt { font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: var(--lh-loose); }

.bs-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-14);
	justify-content: center;
}

.bs-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-inline-size: 2.75rem;
	block-size: 2.75rem;
	padding-inline: var(--sp-3);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: background-color var(--dur) var(--ease-out),
	            border-color var(--dur) var(--ease-out),
	            color var(--dur) var(--ease-out);
}

.bs-pagination .page-numbers:hover,
.bs-pagination .page-numbers.current {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-accent-ink);
}

/* Single post body inherits the prose rules. */
.bs-entry { max-width: 44rem; margin-inline: auto; }
.bs-entry > * + * { margin-top: var(--sp-6); }
.bs-entry h2 { margin-top: var(--sp-12); }
.bs-entry h3 { margin-top: var(--sp-10); }
.bs-entry img { border-radius: var(--r-md); }

.widget { margin-bottom: var(--sp-10); }
.widget__title { font-size: var(--fs-h5); margin-bottom: var(--sp-4); }
.widget ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.widget a { text-decoration: none; font-size: var(--fs-sm); }

/* ==========================================================================
   AUTOMATIC NUMBERING
   --------------------------------------------------------------------------
   Index numbers come from CSS counters rather than PHP, so editors can drag
   cards into any order and the numbering just follows.
   ========================================================================== */

.bs-pain__items { counter-reset: bs-pain; }
.bs-pain__item { counter-increment: bs-pain; }
.bs-pain__index::before { content: counter(bs-pain, decimal-leading-zero); }

.bs-services__items { counter-reset: bs-service; }
.bs-service { counter-increment: bs-service; }
.bs-service__index::before { content: counter(bs-service, decimal-leading-zero); }

.bs-why__points { counter-reset: bs-why; }
.bs-why__point { counter-increment: bs-why; }
.bs-why__index::before { content: counter(bs-why, decimal-leading-zero); }

.bs-process__steps { counter-reset: bs-process; }
.bs-process__step { counter-increment: bs-process; }
.bs-process__num::before { content: counter(bs-process); }

/* The grid variant leads with the icon plate, so the index would be noise. */
.bs-services--grid .bs-service__index { display: none; }
.bs-services--grid .bs-service:not(:has(.bs-card__chip)) .bs-service__index { display: block; }
.bs-services--alternating .bs-service__index { display: none; }

.bs-why__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	min-width: 0;
}

/* ==========================================================================
   LIST RESETS FOR AUDIENCE VARIANTS
   ========================================================================== */

.bs-audience__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-audience--tags .bs-audience__item,
.bs-audience--cards .bs-audience__item {
	margin: 0;
}

.bs-audience--tags .bs-ticklist__tick { display: none; }

.bs-audience--cards .bs-ticklist__tick {
	flex: none;
	inline-size: 1.35rem;
	block-size: 1.35rem;
	display: grid;
	place-items: center;
	border-radius: var(--r-xs);
	background: var(--ac-a16);
	color: var(--c-accent-quiet);
}

/* ==========================================================================
   HERO STAT STRIP
   The stat block is reused inside the hero at a smaller size.
   ========================================================================== */

.bs-hero__meta .bs-stat { gap: var(--sp-1); }
.bs-hero__meta .bs-stat__value { font-size: var(--fs-h4); line-height: 1.1; }
.bs-hero__meta .bs-stats__items { display: contents; }

/* ==========================================================================
   SECTION HEADING + PROSE BLOCK SHELLS
   ========================================================================== */

.bs-sectionhead--center { text-align: center; }
.bs-sectionhead--center .bs-heading { align-items: center; }
.bs-sectionhead--center .bs-heading__intro { margin-inline: auto; }



/* ==========================================================================
   EDITOR-ONLY AFFORDANCES
   ========================================================================== */

.bs-editor-empty {
	display: grid;
	place-items: center;
	gap: var(--sp-2);
	padding: var(--sp-10);
	border: 1px dashed var(--c-line-strong);
	border-radius: var(--r-md);
	color: var(--c-muted);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	text-align: center;
}