.lpc-section {
	position: relative;
	overflow: hidden;
	min-height: var(--lpc-min-height, 80vh);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--lpc-pad-top, 80px) 40px var(--lpc-pad-bottom, 120px);
	isolation: isolate;
	/* Break out of any constrained parent column to span the full viewport */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.lpc-warning {
	padding: 12px 16px;
	background: #fff3cd;
	border-left: 4px solid #ffc107;
	margin: 20px 0;
	color: #000;
}

/* Two stacked backgrounds — we cross-fade between them on hover */
.lpc-bg-stack { position: absolute; inset: 0; z-index: -2; }

.lpc-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.5s ease;
	will-change: opacity;
}

.lpc-bg.is-active { opacity: 1; }

.lpc-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--lpc-overlay-alpha, 0.35));
	z-index: -1;
	pointer-events: none;
}

.lpc-content {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	color: var(--lpc-heading-color, #fff);
	width: 100%;
}

.lpc-section .lpc-title,
.lpc-section h2.lpc-title {
	font-size: clamp(var(--lpc-heading-size-min, 48px), 7vw, var(--lpc-heading-size-max, 110px)) !important;
	line-height: var(--lpc-heading-line-height, 1.05) !important;
	margin: 0 0 24px !important;
	font-weight: var(--lpc-heading-weight, 400) !important;
	letter-spacing: var(--lpc-heading-letter-spacing, -0.01em) !important;
	color: var(--lpc-heading-color, #fff) !important;
	text-transform: none !important;
	transition: opacity 0.3s ease;
}

.lpc-description {
	font-size: var(--lpc-desc-size, 16px);
	line-height: var(--lpc-desc-line-height, 1.6);
	color: var(--lpc-desc-color, #fff);
	transition: opacity 0.3s ease;
	min-height: calc(var(--lpc-desc-size, 16px) * var(--lpc-desc-line-height, 1.6) * 6);
}

.lpc-description p { margin: 0 0 1em; }
.lpc-description p:last-child { margin-bottom: 0; }

.lpc-title.is-fading,
.lpc-description.is-fading { opacity: 0; }

.lpc-categories {
	list-style: none;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 24px;
	width: 100%;
	max-width: 1200px;
	position: absolute;
	left: 50%;
	bottom: var(--lpc-pad-bottom-half, 60px);
	transform: translateX(-50%);
	z-index: 1;
}

.lpc-category { margin: 0; padding: 0; }

.lpc-category-link {
	display: inline-block;
	color: var(--lpc-link-color, #fff);
	text-decoration: none !important;
	background-image: none !important;
	font-size: clamp(var(--lpc-link-size-min, 20px), 2vw, var(--lpc-link-size-max, 28px));
	font-weight: var(--lpc-link-weight, 400);
	letter-spacing: 0.02em;
	padding: 8px 4px;
	border-bottom: 2px solid transparent;
	transition: border-color 0.25s ease, color 0.25s ease;
	cursor: pointer;
}

.lpc-category-link:hover,
.lpc-category-link:focus-visible,
.lpc-category-link:active {
	color: var(--lpc-link-hover-color, #fff);
	border-bottom-color: var(--lpc-link-hover-color, #fff);
	text-decoration: none !important;
	background-image: none !important;
}

/* Current category, e.g. while viewing /project_category/residential/. */
.lpc-category-link.is-active {
	color: var(--lpc-link-hover-color, #fff);
	border-bottom-color: var(--lpc-link-hover-color, #fff);
}

@media (max-width: 700px) {
	.lpc-section { padding: 60px 20px 80px; min-height: 70vh; }
	.lpc-categories { gap: 16px; padding-top: 40px; justify-content: center; }
}
