.pp-section-label {
	display: block;
	text-align: left;
	margin: 0 0 0.5rem;
	--pp-section-label-line-width: 2.75rem;
}

.pp-section-label,
.pp-section-label p,
.pp-section-label .pp-section-label__text {
	display: block;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #3457d8;
}

.pp-section-label p {
	margin: 0;
}

.pp-section-label__line {
	display: block;
	height: 2px;
	margin-top: 0.15rem;
	border-radius: 1px;
	background-color: #3457d8;
}

/* Underline via ::after when no line element is present (before JS runs) */
.pp-section-label:not(.pp-section-label--has-line):not(:has(.pp-section-label__line))::after {
	content: '';
	display: block;
	height: 2px;
	margin-top: 0.15rem;
	border-radius: 1px;
	background-color: #3457d8;
	width: var(--pp-section-label-line-width, 2.75rem);
}

/* Static underline — opt out of scroll scrub */
.pp-section-label--static:not(.pp-section-label--has-line):not(:has(.pp-section-label__line))::after,
.pp-section-label--static .pp-section-label__line {
	width: var(--pp-section-label-line-width, 2.75rem);
}

/* Scroll scrub: initial 10px until GSAP takes over */
.pp-section-label:not(.pp-section-label--static) .pp-section-label__line {
	width: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.pp-section-label:not(.pp-section-label--static):not(.pp-section-label--has-line):not(:has(.pp-section-label__line))::after,
	.pp-section-label:not(.pp-section-label--static) .pp-section-label__line {
		width: var(--pp-section-label-line-width, 2.75rem);
	}
}