/* =============================================================
   modules.css
   Styles that belong to the 16-module system. Only rules NOT
   already present in theme.css live here: design tokens and
   base components (hero, trust-strip, comparison-slider, etc.)
   remain in theme.css.
   ============================================================= */

/* ----------------------------------------------------------
   MOD-01 hero: pillar image-left/right variant
   ---------------------------------------------------------- */

.hero--pillar {
	min-height: 440px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
}

.hero--pillar .hero__media {
	position: relative;
	order: 2;
}

.hero--pillar .hero__media::before {
	background: linear-gradient(270deg, rgba(21, 43, 28, 0.18), rgba(21, 43, 28, 0.55));
}

.hero--pillar .hero__content {
	order: 1;
	width: auto;
	padding: var(--sp-16) var(--sp-10) var(--sp-12);
	background: var(--forest-deep);
}

.hero--default {
	min-height: 320px;
}

@media (max-width: 768px) {
	.hero--pillar {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.hero--pillar .hero__media {
		order: 1;
		height: 240px;
	}

	.hero--pillar .hero__content {
		order: 2;
	}
}

/* ----------------------------------------------------------
   MOD-05 gallery-3stage: mobile step navigator
   ---------------------------------------------------------- */

.stage-gallery[data-gallery-3stage] .stage-card {
	transition: box-shadow 0.18s;
}

.gallery-3stage__nav {
	display: none; /* hidden on desktop, JS shows on mobile */
	gap: var(--sp-2);
	justify-content: center;
	margin-top: var(--sp-5);
}

.gallery-3stage__step {
	padding: var(--sp-2) var(--sp-4);
	background: var(--white);
	border: 2px solid var(--gray-100);
	border-radius: var(--radius-full);
	color: var(--gray-600);
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.gallery-3stage__step.is-active,
.gallery-3stage__step:hover {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--white);
}

@media (max-width: 640px) {
	.stage-gallery[data-gallery-3stage] {
		grid-template-columns: 1fr;
	}

	.stage-gallery[data-gallery-3stage] .stage-card {
		display: none;
	}

	.stage-gallery[data-gallery-3stage] .stage-card.is-active {
		display: block;
	}

	.gallery-3stage__nav {
		display: flex;
	}
}

/* ----------------------------------------------------------
   MOD-07 faq-accordion
   ---------------------------------------------------------- */

.faq-accordion {
	width: min(calc(100% - 32px), var(--container));
	margin: 0 auto;
	padding: var(--sp-20) 0;
}

.faq-accordion__header {
	max-width: 720px;
	margin-bottom: var(--sp-10);
}

.faq-accordion__header h2 {
	color: var(--forest-deep);
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.faq-accordion__header p {
	margin: var(--sp-4) 0 0;
	color: var(--gray-600);
}

.faq-list {
	max-width: 820px;
	border-top: 1px solid var(--gray-100);
}

.faq-item {
	border-bottom: 1px solid var(--gray-100);
}

.faq-item__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--sp-5) 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	gap: var(--sp-4);
}

.faq-item__trigger:focus-visible {
	outline: 3px solid var(--stone-mid);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.faq-item__question {
	color: var(--forest-deep);
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.faq-item__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	background: var(--gray-50);
	border: 1px solid var(--gray-100);
	border-radius: 50%;
	transition: background 0.15s, transform 0.25s;
}

.faq-item__icon::after {
	content: "+";
	color: var(--stone);
	font-size: 18px;
	font-weight: 300;
	line-height: 1;
	transition: transform 0.25s;
}

.faq-item.is-open .faq-item__icon {
	background: var(--stone-pale);
}

.faq-item.is-open .faq-item__icon::after {
	transform: rotate(45deg);
}

.faq-item__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.is-open .faq-item__body {
	grid-template-rows: 1fr;
}

.faq-item__body-inner {
	overflow: hidden;
}

.faq-item__answer {
	padding-bottom: var(--sp-5);
	color: var(--gray-600);
	line-height: 1.75;
}

/* ----------------------------------------------------------
   MOD-08 testimonial-slider: carousel navigation
   ---------------------------------------------------------- */

.testimonial-slider {
	width: min(calc(100% - 32px), var(--container));
	margin: 0 auto;
	padding: var(--sp-20) 0;
}

.testimonial-slider__header {
	max-width: 720px;
	margin-bottom: var(--sp-10);
}

.testimonial-slider__header h2 {
	color: var(--forest-deep);
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.testimonial-slider__track {
	position: relative;
	min-height: 200px;
}

.testimonial-slide {
	display: none;
}

.testimonial-slide.is-active {
	display: block;
	animation: fadeIn 0.35s ease;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.testimonial-slider__dots {
	display: flex;
	gap: var(--sp-2);
	margin-top: var(--sp-6);
}

.testimonial-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: var(--gray-200);
	cursor: pointer;
	padding: 0;
	transition: background 0.15s, transform 0.15s;
}

.testimonial-slider__dot.is-active,
.testimonial-slider__dot:hover {
	background: var(--stone);
	transform: scale(1.25);
}

/* Single-card (non-slider) testimonial shown on pillar / sub_service */
.testimonial-single {
	width: min(calc(100% - 32px), var(--container));
	margin: 0 auto;
	padding: var(--sp-12) 0;
}

/* ----------------------------------------------------------
   MOD-09 pricing-table
   ---------------------------------------------------------- */

.pricing-table {
	width: min(calc(100% - 32px), var(--container));
	margin: 0 auto;
	padding: var(--sp-20) 0;
}

.pricing-table__header {
	max-width: 720px;
	margin-bottom: var(--sp-10);
}

.pricing-table__header h2 {
	color: var(--forest-deep);
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.pricing-table__header p {
	margin: var(--sp-4) 0 0;
	color: var(--gray-600);
}

.pricing-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-5);
	align-items: start;
}

.pricing-card {
	padding: var(--sp-6);
	background: var(--white);
	border: 2px solid var(--gray-100);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.2s, transform 0.2s;
}

.pricing-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.pricing-card--featured {
	border-color: var(--stone);
	box-shadow: var(--shadow-md);
}

.pricing-card__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--stone-pale);
	color: var(--stone);
	border-radius: var(--radius-sm);
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 800;
	margin-bottom: var(--sp-4);
}

.pricing-card--featured .pricing-card__num {
	background: var(--stone);
	color: var(--white);
}

.pricing-card h3 {
	margin: 0 0 var(--sp-3);
	color: var(--forest-deep);
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.pricing-card p {
	margin: 0 0 var(--sp-4);
	color: var(--gray-600);
	font-size: 14px;
	line-height: 1.65;
}

.pricing-card strong {
	display: block;
	color: var(--forest);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 14px;
}

@media (max-width: 768px) {
	.pricing-cards {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------
   MOD-11 area-map
   ---------------------------------------------------------- */

.area-map {
	width: min(calc(100% - 32px), var(--container));
	margin: 0 auto;
	padding: var(--sp-20) 0;
}

.area-map__header {
	max-width: 720px;
	margin-bottom: var(--sp-10);
}

.area-map__header h2 {
	color: var(--forest-deep);
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.area-map__header p {
	margin: var(--sp-4) 0 0;
	color: var(--gray-600);
}

.area-map__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
	gap: var(--sp-8);
	align-items: start;
}

.area-map__svg-wrap {
	background: var(--forest-ghost);
	border: 1px solid var(--gray-100);
	border-radius: var(--radius-lg);
	overflow: hidden;
	padding: var(--sp-6);
}

.area-map__svg {
	width: 100%;
	height: auto;
	display: block;
}

.area-map__town {
	fill: var(--forest-light);
	stroke: var(--white);
	stroke-width: 1.5;
	cursor: default;
	transition: fill 0.15s;
}

.area-map__town--active {
	fill: var(--stone);
}

.area-map__town-label {
	fill: var(--white);
	font-family: var(--font-heading);
	font-size: 10px;
	font-weight: 700;
	pointer-events: none;
	text-anchor: middle;
	dominant-baseline: middle;
}

.area-map__town-list {
	display: grid;
	gap: var(--sp-3);
	padding: 0;
	margin: 0;
	list-style: none;
}

.area-map__town-item a {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	background: var(--white);
	border: 1px solid var(--gray-100);
	border-radius: var(--radius-md);
	color: var(--forest);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: background 0.15s, border-color 0.15s;
}

.area-map__town-item a::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	background: var(--forest-light);
	border-radius: 50%;
	flex-shrink: 0;
}

.area-map__town-item a:hover {
	background: var(--forest-ghost);
	border-color: var(--forest-light);
}

@media (max-width: 768px) {
	.area-map__grid {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------
   MOD-12 reviews-aggregator
   ---------------------------------------------------------- */

.reviews-aggregator {
	width: min(calc(100% - 32px), var(--container));
	margin: 0 auto;
	padding: var(--sp-20) 0;
}

.reviews-aggregator__header {
	max-width: 720px;
	margin-bottom: var(--sp-10);
}

.reviews-aggregator__header h2 {
	color: var(--forest-deep);
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.reviews-aggregate {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-4);
	padding: var(--sp-2) var(--sp-4);
	background: var(--forest-ghost);
	border: 1px solid var(--forest-pale);
	border-radius: var(--radius-full);
}

.reviews-aggregate__stars {
	color: var(--stone);
	font-size: 16px;
	letter-spacing: 2px;
}

.reviews-aggregate__score {
	color: var(--forest-deep);
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 800;
}

.reviews-aggregate__count {
	color: var(--gray-600);
	font-size: 13px;
}

.reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-5);
}

.review-card {
	padding: var(--sp-5);
	background: var(--white);
	border: 1px solid var(--gray-100);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.review-card__stars {
	color: var(--stone);
	font-size: 14px;
	letter-spacing: 1px;
	margin-bottom: var(--sp-3);
}

.review-card__quote {
	margin: 0 0 var(--sp-4);
	color: var(--gray-800);
	font-size: 14px;
	line-height: 1.7;
}

.review-card__source {
	color: var(--gray-600);
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 700;
}

@media (max-width: 900px) {
	.reviews-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.reviews-grid {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------
   MOD-14 form-block
   ---------------------------------------------------------- */

.form-block {
	width: min(calc(100% - 32px), var(--container));
	margin: 0 auto;
	padding: var(--sp-20) 0;
}

.form-block__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--sp-12);
	align-items: start;
}

.form-block__lead h2 {
	margin: 0;
	color: var(--forest-deep);
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
}

.form-block__lead p {
	margin: var(--sp-4) 0 0;
	color: var(--gray-600);
}

.form-block__trust {
	display: grid;
	gap: var(--sp-3);
	padding: 0;
	margin: var(--sp-8) 0 0;
	list-style: none;
}

.form-block__trust li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	color: var(--gray-600);
	font-size: 14px;
}

.form-block__trust li::before {
	content: "✓";
	color: var(--forest-light);
	font-weight: 800;
	flex-shrink: 0;
}

.form-block__form {
	padding: var(--sp-8);
	background: var(--white);
	border: 1px solid var(--gray-100);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.form-block__form h3 {
	margin: 0 0 var(--sp-6);
	color: var(--forest-deep);
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
}

/* native form styles (no FluentForms) */
.ff-form-wrap .ff_form_field_container,
.infinity-form .form-group {
	margin-bottom: var(--sp-5);
}

.infinity-form label {
	display: block;
	margin-bottom: var(--sp-2);
	color: var(--forest-deep);
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 700;
}

.infinity-form input,
.infinity-form textarea,
.infinity-form select {
	width: 100%;
	padding: var(--sp-3) var(--sp-4);
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-sm);
	color: var(--charcoal);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.infinity-form input:focus,
.infinity-form textarea:focus,
.infinity-form select:focus {
	outline: none;
	border-color: var(--forest-light);
	box-shadow: 0 0 0 3px rgba(64, 145, 108, 0.15);
}

.infinity-form textarea {
	min-height: 120px;
	resize: vertical;
}

.infinity-form .form-submit {
	margin-top: var(--sp-2);
}

.infinity-form .form-submit .button {
	width: 100%;
}

@media (max-width: 768px) {
	.form-block__inner {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------
   MOD-15 article-body
   ---------------------------------------------------------- */

.article-body {
	width: min(calc(100% - 32px), var(--content));
	margin: var(--sp-10) auto var(--sp-20);
}

.article-body h2 {
	margin: var(--sp-10) 0 var(--sp-4);
	color: var(--forest-deep);
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 700;
}

.article-body h3 {
	margin: var(--sp-8) 0 var(--sp-3);
	color: var(--forest-deep);
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
}

.article-body p {
	margin: 0 0 var(--sp-5);
	color: var(--gray-800);
	line-height: 1.8;
}

.article-body ul,
.article-body ol {
	margin: 0 0 var(--sp-5);
	padding-left: var(--sp-6);
}

.article-body li {
	margin-bottom: var(--sp-2);
	color: var(--gray-800);
	line-height: 1.75;
}

.article-body a {
	color: var(--forest);
	font-weight: 700;
}

.article-body table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--sp-6) 0;
	font-size: 14px;
}

.article-body th,
.article-body td {
	padding: var(--sp-3) var(--sp-4);
	text-align: left;
	border-bottom: 1px solid var(--gray-100);
}

.article-body th {
	background: var(--gray-50);
	color: var(--forest-deep);
	font-family: var(--font-heading);
	font-weight: 700;
}