/**
 * WP Expertz — Homepage Section Styles
 *
 * Distinct from layout.css (global site chrome: header/nav/footer) and
 * components.css (reusable content widgets used across many templates) —
 * this file holds homepage-section-specific layout, starting with the
 * Hero in Phase 3D. Later Phase 3E sections (problem recognition, WPML
 * specialization, services grid, etc.) will extend this same file rather
 * than each getting their own tiny stylesheet.
 *
 * Every value references an existing token. No raw colors, no new
 * arbitrary spacing values.
 */

/* =================================================================
 * HERO
 * ================================================================= */
.wpx-hero {
	padding-top: var(--space-section-y-mobile);
	padding-bottom: var(--space-section-y-mobile);
}

@media (min-width: 768px) {
	.wpx-hero {
		padding-top: var(--space-section-y-tablet);
		padding-bottom: var(--space-section-y-tablet);
	}
}

@media (min-width: 1200px) {
	.wpx-hero {
		padding-top: var(--space-section-y-desktop);
		padding-bottom: var(--space-section-y-desktop);
	}
}

.wpx-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-48);
	align-items: center;
}

@media (min-width: 1200px) {
	.wpx-hero__inner {
		/* Desktop two-column: content ~55%, visual ~45% (Phase 2 §7/§9). */
		grid-template-columns: 1.2fr 1fr;
		gap: var(--space-64);
	}
}

.wpx-hero__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-mono-label-size);
	line-height: var(--text-mono-label-line);
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 var(--space-16) 0;
}

.wpx-hero__heading {
	/* Uses the existing H1 token scale from base.css — no new font-size
	   introduced here, and deliberately not larger, per Section 23's
	   instruction to avoid the oversized-headline trend. */
	margin-bottom: var(--space-16);
	max-width: 20ch;
}

.wpx-hero__supporting {
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-line);
	color: var(--color-text-secondary);
	max-width: 48ch;
	margin: 0 0 var(--space-24) 0;
}

.wpx-hero__cta-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-16);
	margin-bottom: var(--space-24);
}

.wpx-hero__cta-group .wpx-button {
	/* Full-width on the narrowest phones only, so long translated CTA
	   labels never overflow — wraps to inline once there's room. */
	flex: 1 1 auto;
	justify-content: center;
	white-space: normal;
}

@media (min-width: 480px) {
	.wpx-hero__cta-group .wpx-button {
		flex: 0 1 auto;
	}
}

.wpx-hero__trust {
	display: inline-flex;
}

/* =================================================================
 * DIAGNOSTIC VISUAL
 * ================================================================= */
.wpx-hero__visual {
	display: flex;
	justify-content: center;
	/* Reserves space via aspect-ratio (matches the SVG's viewBox, now
	   360x320 after Phase 3D correction 3's localization width increase)
	   so nothing shifts as the responsive width recalculates — supports
	   the CLS < 0.1 target even though inline SVG has no network-load
	   delay of its own. */
	width: 100%;
	max-width: 360px;
	aspect-ratio: 9 / 8;
	margin: 0 auto;
}

@media (min-width: 1200px) {
	.wpx-hero__visual {
		max-width: 100%;
	}
}

.wpx-diagnostic {
	width: 100%;
	height: 100%;
}

.wpx-diagnostic__connector {
	stroke: var(--color-border);
	stroke-width: 2;
	stroke-dasharray: 4 4;
}

/* Non-essential decorative connector — hidden on mobile per Section 20,
   the three labeled nodes remain fully legible on their own. */
@media (max-width: 767px) {
	.wpx-diagnostic__connector {
		display: none;
	}
}

.wpx-diagnostic__dot--broken {
	fill: var(--color-error);
}
.wpx-diagnostic__dot--diagnosing {
	fill: var(--color-accent-warning);
}
.wpx-diagnostic__dot--fixed {
	fill: var(--color-accent);
}

.wpx-diagnostic__label {
	font-family: var(--font-mono);
	font-size: var(--text-mono-label-size);
	fill: var(--color-text-primary);
}

.wpx-diagnostic__status {
	font-family: var(--font-body);
	font-size: var(--text-caption-size);
	fill: var(--color-text-secondary);
}

/* Status word color always matches its dot — color is reinforced by the
   adjacent plain-language word itself, never color alone. */
.wpx-diagnostic__status--broken {
	fill: var(--color-error);
}
.wpx-diagnostic__status--diagnosing {
	fill: var(--color-accent-warning);
}
.wpx-diagnostic__status--fixed {
	fill: var(--color-accent);
}

/* =================================================================
 * SHARED SECTION UTILITIES (Phase 3E)
 * ================================================================= */
.wpx-section {
	padding-top: var(--space-section-y-mobile);
	padding-bottom: var(--space-section-y-mobile);
}

@media (min-width: 768px) {
	.wpx-section {
		padding-top: var(--space-section-y-tablet);
		padding-bottom: var(--space-section-y-tablet);
	}
}

@media (min-width: 1200px) {
	.wpx-section {
		padding-top: var(--space-section-y-desktop);
		padding-bottom: var(--space-section-y-desktop);
	}
}

/* Alternate band used for controlled visual rhythm between sections
   (Phase 2 §27) — reused across several sections rather than each
   defining its own background rule. */
.wpx-section--surface {
	background-color: var(--color-surface);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.wpx-section__intro {
	text-align: center;
	margin: 0 auto var(--space-48) auto;
}

.wpx-section__intro h2 {
	margin-bottom: var(--space-16);
}

.wpx-section__intro p {
	color: var(--color-text-secondary);
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-line);
}

/* =================================================================
 * TRUST PROOF
 * ================================================================= */
.wpx-trust-proof {
	text-align: center;
	/* This section is intentionally compact (Section 6) — smaller vertical
	   rhythm than the standard .wpx-section__intro pattern used elsewhere. */
	padding-top: var(--space-32);
	padding-bottom: var(--space-32);
}

.wpx-trust-proof__heading {
	font-size: var(--text-h4-size);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-16);
}

.wpx-trust-proof__strip {
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-24);
}

.wpx-trust-proof__principles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-24);
}

.wpx-trust-proof__principles li {
	font-size: var(--text-body-sm-size);
	color: var(--color-text-secondary);
	font-weight: 500;
}

/* =================================================================
 * PROBLEM RECOGNITION
 * ================================================================= */
.wpx-problem-recognition__eyebrow {
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-16);
}

.wpx-problem-recognition__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--container-reading);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-16);
}

@media (min-width: 768px) {
	.wpx-problem-recognition__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wpx-problem-recognition__list li {
	padding: var(--space-16);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-body-sm-size);
	color: var(--color-text-primary);
}

/* =================================================================
 * WPML SPECIALIZATION
 * ================================================================= */
.wpx-wpml-specialization__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
}

@media (min-width: 1024px) {
	.wpx-wpml-specialization__inner {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--space-64);
		align-items: start;
	}
}

.wpx-wpml-specialization__text p {
	color: var(--color-text-secondary);
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-line);
	margin-bottom: var(--space-24);
}

.wpx-wpml-specialization__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 480px) {
	.wpx-wpml-specialization__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wpx-wpml-specialization__list li {
	font-family: var(--font-mono);
	font-size: var(--text-mono-label-size);
	color: var(--color-text-secondary);
	padding: var(--space-8) var(--space-12);
	background-color: var(--color-background);
	border-radius: var(--radius-sm);
}

/* =================================================================
 * SERVICES GRID
 *
 * auto-fit/minmax rather than a fixed 3-column grid, so the 7th card's
 * leftover row wraps naturally instead of requiring hand-built
 * last-row-symmetry rules (Section 14).
 * ================================================================= */
.wpx-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-grid-gap-mobile);
}

@media (min-width: 768px) {
	.wpx-services-grid {
		gap: var(--space-grid-gap-tablet);
	}
}

@media (min-width: 1200px) {
	.wpx-services-grid {
		gap: var(--space-grid-gap-desktop);
	}
}

/* =================================================================
 * WHY WP EXPERTZ
 * ================================================================= */
.wpx-why-wp-expertz__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
}

@media (min-width: 768px) {
	.wpx-why-wp-expertz__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.wpx-why-wp-expertz__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.wpx-why-wp-expertz__item h3 {
	font-size: var(--text-h4-size);
	margin-bottom: var(--space-8);
}

.wpx-why-wp-expertz__item p {
	color: var(--color-text-secondary);
	font-size: var(--text-body-sm-size);
	margin: 0;
}

/* =================================================================
 * PROCESS
 * ================================================================= */
.wpx-process-section {
	/* Process Steps component (components.css) provides its own internal
	   layout — this section only supplies vertical rhythm/heading. */
}

/* =================================================================
 * CASE STUDIES PREVIEW
 * ================================================================= */
.wpx-case-studies-preview__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-grid-gap-mobile);
}

@media (min-width: 768px) {
	.wpx-case-studies-preview__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-grid-gap-desktop);
	}
}

/* =================================================================
 * AGENCY TEASER
 * ================================================================= */
.wpx-agency-teaser__inner {
	text-align: center;
}

.wpx-agency-teaser__inner p {
	color: var(--color-text-secondary);
	margin-bottom: var(--space-24);
}

/* =================================================================
 * FAQ
 * ================================================================= */
.wpx-faq-section {
	/* FAQ Accordion component (components.css) is already self-contained
	   and reading-width constrained — no additional rules needed here. */
}

/* =================================================================
 * FINAL CTA
 * ================================================================= */
.wpx-final-cta-section {
	/* CTA Block component (components.css) provides its own padding and
	   dark-variant styling — this wrapper only supplies section spacing
	   via the shared .wpx-section rule already applied in markup. */
}

/* =================================================================
 * SERVICE PAGE SECTIONS (Phase 3F)
 * ================================================================= */

/* --- Breadcrumbs --- */
.wpx-breadcrumbs {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
	border-bottom: 1px solid var(--color-border);
}

.wpx-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--space-8);
	font-size: var(--text-caption-size);
	color: var(--color-text-secondary);
}

.wpx-breadcrumbs__list li:not(:last-child)::after {
	content: "/";
	margin-left: var(--space-8);
	color: var(--color-border);
}

.wpx-breadcrumbs__list a {
	color: var(--color-text-secondary);
	text-decoration: none;
}

.wpx-breadcrumbs__list a:hover {
	color: var(--color-accent);
}

.wpx-breadcrumbs__list li[aria-current="page"] {
	color: var(--color-text-primary);
	font-weight: 500;
}

/* --- Service Hero (content-led, no illustration) --- */
.wpx-service-hero__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-mono-label-size);
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 var(--space-16) 0;
}

.wpx-service-hero__heading {
	max-width: 24ch;
	margin-bottom: var(--space-16);
}

.wpx-service-hero__summary {
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-line);
	color: var(--color-text-secondary);
	max-width: 60ch;
	margin: 0 0 var(--space-24) 0;
}

/* --- Admin-editable page content block --- */
.wpx-service-content {
	margin: 0 auto var(--space-16) auto;
	color: var(--color-text-secondary);
}

.wpx-service-content p:last-child {
	margin-bottom: 0;
}

/* --- Service Problems / Who This Is For --- */
.wpx-service-problems__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--container-reading);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-16);
}

@media (min-width: 768px) {
	.wpx-service-problems__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wpx-service-problems__list li {
	padding: var(--space-16);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-body-sm-size);
	color: var(--color-text-primary);
}

/* --- Service Capabilities --- */
.wpx-service-capabilities__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--container-reading);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-12);
}

@media (min-width: 768px) {
	.wpx-service-capabilities__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wpx-service-capabilities__list li {
	position: relative;
	padding-left: var(--space-24);
	font-size: var(--text-body-sm-size);
	color: var(--color-text-primary);
}

.wpx-service-capabilities__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background-color: var(--color-accent);
}

/* --- Service Approach --- */
.wpx-service-approach__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--container-reading);
	counter-reset: approach-step;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.wpx-service-approach__list li {
	position: relative;
	padding-left: var(--space-32);
	font-size: var(--text-body-sm-size);
	color: var(--color-text-primary);
	counter-increment: approach-step;
}

.wpx-service-approach__list li::before {
	content: counter(approach-step);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: var(--radius-full);
	background-color: var(--color-primary);
	color: var(--color-text-on-dark);
	font-size: var(--text-caption-size);
	font-weight: 600;
}

/* --- Service Technologies --- */
.wpx-service-technologies__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--container-reading);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-8);
}

.wpx-service-technologies__list li {
	font-family: var(--font-mono);
	font-size: var(--text-mono-label-size);
	color: var(--color-text-secondary);
	padding: var(--space-8) var(--space-12);
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

/* --- Service Trust --- */
.wpx-service-trust {
	text-align: center;
}

.wpx-service-trust__heading {
	font-size: var(--text-h4-size);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-16);
}

.wpx-service-trust__strip {
	display: flex;
	justify-content: center;
}

.wpx-service-trust__note {
	color: var(--color-text-secondary);
	font-size: var(--text-body-sm-size);
	max-width: var(--container-reading);
	margin: 0 auto;
}

/* --- Service Case Studies / Related Services (shared grid pattern) --- */
.wpx-service-case-studies__grid,
.wpx-related-services__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-grid-gap-mobile);
}

@media (min-width: 768px) {
	.wpx-service-case-studies__grid,
	.wpx-related-services__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-grid-gap-desktop);
	}
}

/* When there are only 1-2 related services, avoid an oversized single
   card stretching the full grid width on desktop. */
@media (min-width: 768px) {
	.wpx-related-services__grid {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

/* =================================================================
 * CASE STUDY SECTIONS (Phase 3H)
 * ================================================================= */

/* --- Hero --- */
.wpx-case-study-hero__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-mono-label-size);
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 var(--space-16) 0;
}

.wpx-case-study-hero__heading {
	max-width: 28ch;
	margin-bottom: var(--space-16);
}

.wpx-case-study-hero__summary {
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-line);
	color: var(--color-text-secondary);
	max-width: 60ch;
	margin: 0 0 var(--space-8) 0;
}

.wpx-case-study-hero__client {
	font-size: var(--text-body-sm-size);
	color: var(--color-text-secondary);
	font-weight: 500;
	margin: 0;
}

/* --- Story (Problem / Investigation / Solution / Result) --- */
.wpx-case-study-story__part {
	margin-bottom: var(--space-32);
}

.wpx-case-study-story__part:last-child {
	margin-bottom: 0;
}

.wpx-case-study-story__text p {
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-16) 0;
}

.wpx-case-study-story__text p:last-child {
	margin-bottom: 0;
}

/* --- Metrics --- */
.wpx-case-study-metrics__list {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-16);
}

@media (min-width: 480px) {
	.wpx-case-study-metrics__list {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}

.wpx-case-study-metrics__item {
	padding: var(--space-16);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.wpx-case-study-metrics__item dt {
	font-size: var(--text-caption-size);
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 var(--space-4) 0;
}

.wpx-case-study-metrics__item dd {
	font-family: var(--font-display);
	font-size: var(--text-h4-size);
	font-weight: 600;
	color: var(--color-primary);
	margin: 0;
}

/* --- Featured Image (single Case Study, Phase 3H correction 2) --- */
.wpx-case-study-featured-image {
	margin: 0 auto var(--space-16) auto;
}

.wpx-case-study-featured-image__img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

/* --- Gallery / supporting content (standard editor content) --- */
.wpx-case-study-gallery {
	margin: 0 auto var(--space-16) auto;
}

.wpx-case-study-gallery img {
	border-radius: var(--radius-md);
}

/* --- Related Service CTA --- */
.wpx-case-study-related-cta {
	text-align: center;
}

.wpx-case-study-related-cta__label {
	font-size: var(--text-caption-size);
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 var(--space-16) 0;
}

.wpx-case-study-related-cta__project {
	margin: var(--space-16) 0 0 0;
}

/* --- Related Case Studies (single page) + Archive grid (shared pattern) --- */
.wpx-related-case-studies__grid,
.wpx-case-study-archive__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-grid-gap-mobile);
}

@media (min-width: 768px) {
	.wpx-related-case-studies__grid,
	.wpx-case-study-archive__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-grid-gap-desktop);
	}
}

/* --- Archive empty state --- */
.wpx-case-study-archive__empty {
	text-align: center;
	color: var(--color-text-secondary);
	max-width: var(--container-reading);
	margin: 0 auto;
}

/* --- Native pagination (the_posts_pagination()) --- */
.pagination,
.navigation.pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-8);
	margin-top: var(--space-48);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-12);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-primary);
	text-decoration: none;
	font-size: var(--text-body-sm-size);
}

.pagination .page-numbers:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.pagination .page-numbers.current {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text-on-dark);
}

.pagination .page-numbers.dots {
	border: none;
}

/* =================================================================
 * CONTACT / AGENCY SOLUTIONS (Phase 3I)
 * ================================================================= */

/* --- Simple Page Hero (Contact, Agency Solutions) --- */
.wpx-simple-page-hero {
	text-align: center;
}

.wpx-simple-page-hero__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-mono-label-size);
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 var(--space-16) 0;
}

.wpx-simple-page-hero__heading {
	margin-bottom: var(--space-16);
}

.wpx-simple-page-hero__summary {
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-line);
	color: var(--color-text-secondary);
	margin: 0;
}

/* --- Admin-editable page content (Contact / Agency Solutions) --- */
.wpx-page-content {
	margin: 0 auto var(--space-16) auto;
	color: var(--color-text-secondary);
}

.wpx-page-content p:last-child {
	margin-bottom: 0;
}

/* --- Form Block --- */
.wpx-form-block__description {
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-16) 0;
}

.wpx-form-block__context {
	display: inline-block;
	font-size: var(--text-body-sm-size);
	font-weight: 500;
	color: var(--color-accent);
	background-color: var(--color-background);
	border-radius: var(--radius-sm);
	padding: var(--space-8) var(--space-12);
	margin: 0 0 var(--space-16) 0;
}

/* Warning styled as a restrained notice — amber tint derived from the
   existing status-warning token, not a new arbitrary color. */
.wpx-form-block__warning {
	font-size: var(--text-body-sm-size);
	color: var(--color-text-primary);
	background-color: color-mix(in srgb, var(--color-accent-warning) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
	border-radius: var(--radius-sm);
	padding: var(--space-12) var(--space-16);
	margin: 0 0 var(--space-24) 0;
}

.wpx-form-block__form-area {
	margin-bottom: var(--space-24);
}

.wpx-form-block__fallback,
.wpx-form-block__fallback-empty {
	text-align: center;
	color: var(--color-text-secondary);
	padding: var(--space-32);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
}

.wpx-form-block__privacy {
	font-size: var(--text-caption-size);
	color: var(--color-text-secondary);
	margin: 0;
}

/* --- Contact Methods --- */
.wpx-contact-methods {
	text-align: center;
	margin-top: var(--space-24);
}

.wpx-contact-methods__heading {
	font-size: var(--text-h4-size);
	margin-bottom: var(--space-16);
}

.wpx-contact-methods__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-16);
}

.wpx-contact-methods__list a {
	display: inline-flex;
	align-items: center;
	padding: var(--space-8) var(--space-16);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-primary);
	text-decoration: none;
	font-size: var(--text-body-sm-size);
	font-weight: 500;
}

.wpx-contact-methods__list a:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* =================================================================
 * FLUENT FORMS — SCOPED STYLING (Phase 3I)
 *
 * Scoped entirely under .wpx-form so nothing here can affect any other
 * form Fluent Forms might render elsewhere. Targets Fluent Forms'
 * documented, stable public class names as of general current practice
 * — this could not be visually verified against a live installation in
 * this environment; treat as a starting point to confirm once the
 * plugin is actually active and styled forms can be viewed (Phase 3J).
 * ================================================================= */

.wpx-form .ff-el-input--label label,
.wpx-form label {
	display: block;
	font-size: var(--text-body-sm-size);
	font-weight: 500;
	color: var(--color-text-primary);
	margin-bottom: var(--space-8);
}

.wpx-form .ff-el-is-required {
	color: var(--color-error);
}

.wpx-form input[type="text"],
.wpx-form input[type="email"],
.wpx-form input[type="url"],
.wpx-form input[type="tel"],
.wpx-form input[type="number"],
.wpx-form textarea,
.wpx-form select,
.wpx-form .ff-el-form-control {
	width: 100%;
	min-height: 44px;
	padding: var(--space-12) var(--space-16);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: var(--text-body-size);
	transition: border-color var(--transition-base);
}

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

.wpx-form input:focus-visible,
.wpx-form textarea:focus-visible,
.wpx-form select:focus-visible,
.wpx-form .ff-el-form-control:focus-visible {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--focus-ring-accent);
}

.wpx-form .error,
.wpx-form .ff-el-is-error .ff-el-form-control {
	border-color: var(--color-error);
}

.wpx-form .error-message,
.wpx-form .text-danger {
	font-size: var(--text-caption-size);
	color: var(--color-error);
	margin-top: var(--space-4);
}

.wpx-form button[type="submit"],
.wpx-form .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 14px 28px;
	background-color: var(--color-accent);
	color: var(--color-text-on-dark);
	border: none;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-button-size);
	font-weight: 500;
	cursor: pointer;
	transition: filter var(--transition-fast);
}

.wpx-form button[type="submit"]:hover,
.wpx-form .ff-btn-submit:hover {
	filter: brightness(0.92);
}

.wpx-form .ff-message-success,
.wpx-form .ff_success_message {
	padding: var(--space-16);
	background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
	border-radius: var(--radius-md);
	color: var(--color-text-primary);
}