/* ==========================================================
   KOKO Enterprise — Section Header
   ========================================================== */

.section-header {
	max-width: 780px;
	margin: 0 auto clamp(3.5rem, 6vw, 5.5rem);
	text-align: center;
}

.section-header.text-left {
	margin-left: 0;
	text-align: left;
}

.section-header.text-right {
	margin-right: 0;
	text-align: right;
}

.section-kicker {
	display: block;
	margin: 0 0 1.25rem;
	color: var(--color-accent);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .28em;
	text-transform: uppercase;
}

.section-title {
	max-width: 760px;
	margin: 0 auto;
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: clamp(2.65rem, 5vw, 4.6rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -.045em;
	text-wrap: balance;
}

.text-left .section-title,
.text-left .section-description {
	margin-left: 0;
}

.text-right .section-title,
.text-right .section-description {
	margin-right: 0;
}

.section-description {
	max-width: 650px;
	margin: 1.6rem auto 0;
	color: var(--color-text-light);
	font-size: clamp(1rem, 1.4vw, 1.12rem);
	line-height: 1.8;
	text-wrap: balance;
}

@media (max-width: 768px) {
	.section-header {
		margin-bottom: 3.5rem;
	}

	.section-title {
		font-size: clamp(2.25rem, 9vw, 3.5rem);
		line-height: 1.06;
	}

	.section-description {
		margin-top: 1.25rem;
		line-height: 1.75;
	}
}