/**
 * Six PHP pages — _8 hairline system.
 */

.eco-block {
	padding-block: 5rem;
	border-bottom: 1px solid var(--eco-border);
}

.eco-block--muted { background: rgba(243, 242, 236, 0.55); }
.eco-block--surface { background: var(--eco-surface); }
.eco-block--hero,
.eco-block--dark {
	background: var(--eco-primary);
	color: var(--eco-white);
	background-size: cover;
	background-position: center;
}

.eco-block--hero { padding-block: 4rem 5rem; overflow: hidden; position: relative; }

.eco-hero-slider {
	position: relative;
	min-height: min(86vh, 760px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--eco-white);
	background: var(--eco-primary-dark);
	overflow: hidden;
}
.eco-hero-slider__track,
.eco-hero-slider__slide,
.eco-hero-slider__shade {
	position: absolute;
	inset: 0;
}
.eco-hero-slider__slide {
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 1s ease, transform 6s ease;
}
.eco-hero-slider__slide.is-active {
	opacity: 1;
	transform: scale(1);
	z-index: 1;
}
.eco-hero-slider__slide.is-active img {
	animation: eco-kenburns 6.5s ease forwards;
}
@keyframes eco-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.08); }
}
.eco-hero-slider__slide img,
.eco-hero-slider__ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eco-hero-slider__shade {
	z-index: 2;
	background: linear-gradient(195deg, rgba(11, 38, 32, 0.28) 0%, rgba(11, 38, 32, 0.72) 48%, rgba(11, 38, 32, 0.94) 100%);
}
.eco-hero-slider__copy {
	position: relative;
	z-index: 3;
	padding-block: 5.5rem 4.5rem;
	max-width: 40rem;
}
.eco-hero-slider h1 {
	font-size: clamp(2.15rem, 5.4vw, 3.85rem);
	line-height: 1.18;
	margin: 0 0 1rem;
	font-weight: 700;
}
.eco-hero-slider h1 span {
	display: block;
	margin-top: 0.2em;
	color: var(--eco-secondary-light);
	font-weight: 500;
}
.eco-hero-slider .eco-lead { max-width: 36rem; }
.eco-hero-slider__controls {
	position: absolute;
	inset-inline-end: var(--eco-pad-x);
	inset-block-end: 1.5rem;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.eco-hero-slider__arrow,
.eco-hero-slider__dot {
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(11, 38, 32, 0.35);
	color: #fff;
	cursor: pointer;
}
.eco-hero-slider__arrow {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	font-size: 1.25rem;
	line-height: 1;
}
.eco-hero-slider__dots { display: flex; gap: 0.4rem; }
.eco-hero-slider__dot {
	width: 0.55rem;
	height: 0.55rem;
	padding: 0;
	border-radius: 999px;
}
.eco-hero-slider__dot.is-active {
	background: var(--eco-secondary-light);
	border-color: var(--eco-secondary-light);
}
.eco-kicker {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--eco-secondary);
	margin: 0 0 0.75rem;
}
.eco-kicker--light { color: var(--eco-secondary-light); }
.eco-block h1,
.eco-block h2 { color: inherit; }
#about h2,
#services h2 {
	font-size: clamp(2.15rem, 4.2vw, 3.15rem);
}
#about .eco-kicker,
#services .eco-kicker {
	font-size: 14px;
}
.eco-block--hero h1 span { color: var(--eco-secondary-light); font-weight: 500; }
.eco-block:not(.eco-block--hero):not(.eco-block--dark) h1,
.eco-block:not(.eco-block--hero):not(.eco-block--dark) h2,
.eco-block:not(.eco-block--hero):not(.eco-block--dark) h3 { color: var(--eco-primary); }
.eco-lead { font-size: 17px; line-height: 1.7; max-width: 40rem; }
.eco-lead--light,
.eco-block--hero p,
.eco-block--dark p { color: rgba(255, 255, 255, 0.8); }
.eco-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.eco-btn--sec { background: var(--eco-secondary); border-color: var(--eco-secondary); color: #fff; }
.eco-btn--ghost { border-color: var(--eco-border-light); color: #fff; background: transparent; }
.eco-metrics {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	max-width: 36rem;
	padding-top: 2rem;
	border-top: 1px solid var(--eco-border-light);
}
.eco-metrics strong { display: block; font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.eco-metrics .is-accent { color: var(--eco-secondary-light); }
.eco-metrics span { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.6); margin-top: 0.25rem; }
.eco-hero,
.eco-split,
.eco-page-hero__inner {
	display: grid;
	gap: 3rem;
	align-items: center;
}
.eco-hero-frame,
.eco-photo-frame { border: 1px solid var(--eco-border-light); padding: 0.5rem; background: rgba(255, 255, 255, 0.05); }
.eco-photo-frame { border-color: var(--eco-border); background: var(--eco-surface); }
.eco-hero-frame img,
.eco-photo-frame img,
.eco-ph { width: 100%; height: 360px; object-fit: cover; display: block; }
.eco-ph { background: var(--eco-primary-container); }
.eco-ph--tall { height: 420px; }
.eco-hero-frame__bar,
.eco-caption {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}
.eco-hero-badge {
	display: none;
	margin-top: -1.5rem;
	margin-inline-start: auto;
	max-width: 220px;
	background: var(--eco-background);
	color: var(--eco-charcoal);
	border: 1px solid var(--eco-border);
	padding: 1rem;
	position: relative;
	z-index: 2;
}
.eco-hero-badge span { font-size: 10px; color: var(--eco-secondary); font-weight: 600; }
.eco-ribbon { background: var(--eco-surface); border-bottom: 1px solid var(--eco-border); padding-block: 1.5rem; }
.eco-ribbon__grid { display: grid; gap: 1.5rem; }
.eco-ribbon strong { color: var(--eco-primary); }
.eco-ribbon p { margin: 0.25rem 0 0; font-size: 12px; color: var(--eco-charcoal-muted); }
.eco-quote {
	border-inline-start: 2px solid var(--eco-primary);
	background: rgba(243, 242, 236, 0.6);
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
}
.eco-quote cite { display: block; margin-top: 0.5rem; font-size: 11px; color: var(--eco-charcoal-light); }
.eco-mini-grid,
.eco-stages,
.eco-matrix,
.eco-tiles { display: grid; gap: 1rem; }
.eco-card {
	border: 1px solid var(--eco-border);
	background: var(--eco-surface);
	padding: 1.5rem;
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.eco-card:hover { border-color: var(--eco-secondary); transform: translateY(-2px); }
.eco-card__top { display: flex; justify-content: space-between; border-bottom: 1px solid var(--eco-border); padding-bottom: 0.75rem; margin-bottom: 0.75rem; }
.eco-stage-featured { border-color: var(--eco-secondary); }
.eco-about-visual { position: relative; }
.eco-about-inset {
	display: none;
	position: absolute;
	inset-block-end: -2rem;
	inset-inline-start: -1rem;
	width: 14rem;
	border: 1px solid var(--eco-border);
	background: var(--eco-surface);
	padding: 0.5rem;
	z-index: 2;
}
.eco-about-inset img { height: 7rem; }
.eco-about-inset span { display: block; text-align: center; font-size: 11px; padding-top: 0.35rem; color: var(--eco-charcoal-muted); }
.eco-section-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--eco-border); }
.eco-section-head--light { border-color: var(--eco-border-light); }
.eco-services { display: flex; flex-direction: column; gap: 1rem; }
.eco-service { border: 1px solid var(--eco-border); background: var(--eco-surface); padding: 1.5rem; transition: border-color 0.2s; }
.eco-service:hover { border-color: var(--eco-secondary); }
.eco-service__grid { display: grid; gap: 1rem; }
.eco-service__num { font-size: 1.5rem; font-weight: 700; color: var(--eco-charcoal-light); }
.eco-service__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eco-secondary); }
.eco-service__title { margin: 0.25rem 0 0; font-size: 1.2rem; }
.eco-service__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.eco-service__tags span { background: var(--eco-surface-muted); padding: 0.15rem 0.5rem; font-size: 11px; }
.eco-matrix__item,
.eco-tile {
	border: 1px solid var(--eco-border-light);
	background: rgba(11, 38, 32, 0.55);
	padding: 1.25rem;
	color: #fff;
}
.eco-tile { background: var(--eco-background); color: var(--eco-primary); border-color: var(--eco-border); min-height: 7rem; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 600; transition: background 0.2s; }
.eco-tile:hover { background: var(--eco-surface-muted); }
.eco-pillars { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.eco-pillars li { border: 1px solid var(--eco-border); background: var(--eco-surface); padding: 1rem; }
.eco-center { text-align: center; }
.eco-center .eco-kicker,
.eco-center .eco-lead { justify-content: center; margin-inline: auto; }
.eco-faq-block {
	background:
		radial-gradient(circle at 12% 20%, rgba(24, 118, 91, 0.14), transparent 28%),
		linear-gradient(180deg, var(--eco-sage) 0%, var(--eco-background) 100%);
}
.eco-faq-layout {
	display: grid;
	gap: 1.5rem;
}
.eco-faq-intro {
	background: var(--eco-primary-dark);
	color: var(--eco-white);
	padding: 2rem 1.75rem;
	border: 1px solid rgba(130, 215, 182, 0.22);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
}
.eco-faq-intro h2 { color: var(--eco-white); margin: 0; }
.eco-faq-intro p { color: rgba(255, 255, 255, 0.78); margin: 0 0 0.5rem; }
.eco-faq {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.eco-faq__item {
	background: var(--eco-surface);
	border: 1px solid var(--eco-border);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.eco-faq__item.is-open {
	border-color: var(--eco-secondary);
	box-shadow: 0 10px 28px rgba(18, 60, 50, 0.08);
}
.eco-faq__btn {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.85rem;
	padding: 1rem 1.1rem;
	text-align: start;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 700;
	color: var(--eco-primary);
	cursor: pointer;
}
.eco-faq__num {
	width: 2.1rem;
	height: 2.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--eco-sage);
	color: var(--eco-secondary);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}
.eco-faq__item.is-open .eco-faq__num {
	background: var(--eco-secondary);
	color: var(--eco-white);
}
.eco-faq__icon {
	width: 1.5rem;
	height: 1.5rem;
	position: relative;
	border-radius: 999px;
	background: var(--eco-surface-muted);
}
.eco-faq__icon::before,
.eco-faq__icon::after {
	content: "";
	position: absolute;
	inset: 50%;
	width: 0.65rem;
	height: 1.5px;
	background: var(--eco-primary);
	transform: translate(-50%, -50%);
}
.eco-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.eco-faq__item.is-open .eco-faq__icon { background: rgba(24, 118, 91, 0.14); }
.eco-faq__item.is-open .eco-faq__icon::after { opacity: 0; }
.eco-faq__panel {
	padding: 1rem 1.2rem 1.35rem;
	padding-inline-start: 4rem;
	font-size: 15px;
	line-height: 1.85;
	color: var(--eco-charcoal-muted);
	background: rgba(220, 231, 223, 0.45);
	border-top: 1px solid var(--eco-border);
}
.eco-contact-cards { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.eco-contact-cards li { border: 1px solid var(--eco-border); background: var(--eco-background); padding: 1rem; }
.eco-contact-cards span { display: block; font-size: 11px; color: var(--eco-charcoal-light); }
.eco-consult { border: 1px solid var(--eco-border); background: var(--eco-background); padding: 2rem; }
.eco-consult__title { margin: 0 0 0.35rem; }
.eco-consult__intro { font-size: 13px; color: var(--eco-charcoal-muted); }
.eco-consult__banner { padding: 0.75rem; border: 1px solid var(--eco-secondary); background: rgba(24, 118, 91, 0.12); }
.eco-consult__banner--err { border-color: #9b1c1c; background: #fff5f5; }
.eco-consult__form { display: flex; flex-direction: column; gap: 1rem; }
.eco-consult__row { display: grid; gap: 1rem; }
.eco-consult__submit { width: 100%; }
.eco-page-hero { background: var(--eco-background); border-bottom: 1px solid var(--eco-border); padding-block: 3.5rem; }
.eco-page-hero h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.eco-page-hero--photo {
	min-height: 22rem;
	display: flex;
	align-items: flex-end;
	padding-block: 5rem 3.25rem;
	color: var(--eco-white);
	background:
		linear-gradient(195deg, rgba(11, 38, 32, 0.45), rgba(11, 38, 32, 0.88)),
		var(--eco-hero-image) center / cover no-repeat;
	border-bottom: 0;
}
.eco-page-hero--photo h1,
.eco-page-hero--photo .eco-lead { color: inherit; }
.eco-page-hero__inner { max-width: 46rem; }

@media (min-width: 640px) {
	.eco-metrics { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
	.eco-ribbon__grid { grid-template-columns: repeat(2, 1fr); }
	.eco-mini-grid,
	.eco-stages,
	.eco-matrix { grid-template-columns: repeat(2, 1fr); }
	.eco-tiles { grid-template-columns: repeat(3, 1fr); }
	.eco-consult__row { grid-template-columns: 1fr 1fr; }
	.eco-hero-badge { display: block; }
}

@media (min-width: 1024px) {
	.eco-hero,
	.eco-split { grid-template-columns: 1.1fr 0.9fr; }
	.eco-ribbon__grid { grid-template-columns: repeat(4, 1fr); }
	.eco-stages { grid-template-columns: repeat(4, 1fr); }
	.eco-stages--catalog { grid-template-columns: repeat(3, 1fr); }
	.eco-matrix { grid-template-columns: repeat(3, 1fr); }
	.eco-tiles { grid-template-columns: repeat(6, 1fr); }
	.eco-service__grid { grid-template-columns: 1fr 4fr 5fr 2fr; align-items: center; }
	.eco-about-inset { display: block; }
	.eco-section-head { flex-direction: row; justify-content: space-between; align-items: flex-end; }
	.eco-faq-layout { grid-template-columns: 0.85fr 1.15fr; align-items: stretch; }
	.eco-faq-intro { padding: 2.75rem 2.25rem; }
}