/*
 * Section heading block (eyebrow · title · lead), shared by the home sections
 * from Stage 2 on and by future pages.
 *
 * Colours follow the surface: on dark scenes the section sets
 * --gb-section-text / --gb-section-muted to the scene tokens.
 */

.gb-section-head {
	display: grid;
	gap: var(--gb-space-2xs);
	max-inline-size: 42rem;
	margin-block-end: var(--gb-space-xl);
}

/* Centred variant (CTA, short sections). */
.gb-section-head--center {
	justify-items: center;
	margin-inline: auto;
	text-align: center;
}

/* Eyebrow: small label with the orange start point in front of it. */
.gb-section-head__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
	color: var(--gb-section-eyebrow, var(--gb-text-muted));
}

.gb-section-head__eyebrow::before {
	content: "";
	inline-size: 0.5em;
	block-size: 0.5em;
	border-radius: 50%;
	/* A light orange touch (owner, 2026-10-06; it was the logo's seed colour). */
	background-color: var(--gb-dot);
}

.gb-section-head__title {
	font-size: var(--gb-step-5);
	color: var(--gb-section-text, var(--gb-text));
}

.gb-section-head__lead {
	font-size: var(--gb-step-1);
	color: var(--gb-section-muted, var(--gb-text-muted));
}