/**
 * Supreme Technologies - SEO Main Frontend Styles
 * Palette: Deep spruce (#123c3a), Emerald (#1f8f62), Accent amber (#f59e0b), Light bg (#f8fafc)
 */
:root {
	--cpf-brand-dark: #123c3a;
	--cpf-brand-darker: #0c2b29;
	--cpf-brand-emerald: #1f8f62;
	--cpf-brand-emerald-hover: #17724d;
	--cpf-brand-emerald-light: #e8f5f0;
	--cpf-accent-amber: #f59e0b;
	--cpf-accent-amber-light: #fef3c7;
	--cpf-text-main: #0f172a;
	--cpf-text-muted: #475569;
	--cpf-text-subtle: #64748b;
	--cpf-bg-light: #f8fafc;
	--cpf-bg-alt: #f1f5f9;
	--cpf-border: #e2e8f0;
	--cpf-border-dark: rgba(255, 255, 255, 0.12);
	--cpf-white: #ffffff;
	--cpf-radius-sm: 6px;
	--cpf-radius-md: 10px;
	--cpf-radius-lg: 16px;
	--cpf-radius-xl: 24px;
	--cpf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--cpf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--cpf-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
	--cpf-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cpf-font-serif: 'DM Serif Display', Georgia, Cambria, "Times New Roman", Times, serif;

	/* Reference CSS Variables */
	--ink: #172d33;
	--deep: #10252a;
	--cream: #f7f5ef;
	--muted: #566665;
	--line: #d8e0dc;
	--accent: #ffc49a;
	--green: #36d77d;
	--sans: 'DM Sans', Arial, sans-serif;
	--serif: 'DM Serif Display', Georgia, serif;

	/* Buyer Experience / Jump Nav & Answer Variables */
	--sx-ink: #16363b;
	--sx-muted: #435e63;
	--sx-green: #206b4d;
	--sx-mint: #d9eee3;
	--sx-line: #bad0c5;
}

.cpf-seo-main-wrapper {
	font-family: var(--cpf-font-sans);
	color: var(--cpf-text-main);
	background-color: var(--cpf-white);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.cpf-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.cpf-section {
	padding: 80px 0;
	position: relative;
}

.cpf-text-center {
	text-align: center;
}

.cpf-text-right {
	text-align: right;
}

.cpf-kicker {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cpf-brand-emerald);
	margin-bottom: 12px;
}

.cpf-section-title {
	font-family: var(--cpf-font-serif);
	font-size: 38px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--cpf-brand-dark);
	margin: 0 0 16px;
}

.cpf-section-lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--cpf-text-muted);
	max-width: 720px;
	margin: 0 auto 48px;
}

/* Badges & Buttons */
.cpf-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.cpf-badge--emerald {
	background: rgba(31, 143, 98, 0.15);
	color: #6ee7b7;
	border: 1px solid rgba(110, 231, 183, 0.3);
}

.cpf-pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #10b981;
	box-shadow: 0 0 0 rgba(16, 185, 129, 0.7);
	animation: cpfPulse 2s infinite;
}

@keyframes cpfPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
	}

	70% {
		box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
	}
}

.cpf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--cpf-radius-sm);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	border: none;
}

.cpf-btn--primary {
	background: var(--cpf-brand-emerald);
	color: #fff !important;
}

.cpf-btn--primary:hover {
	background: var(--cpf-brand-emerald-hover);
	transform: translateY(-1px);
}

.cpf-btn--outline {
	background: transparent;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.cpf-btn--outline:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: #fff;
}

.cpf-btn--emerald {
	background: var(--cpf-brand-emerald);
	color: #fff !important;
}

.cpf-btn--emerald:hover {
	background: var(--cpf-brand-emerald-hover);
}

.cpf-btn--outline-emerald {
	background: transparent;
	color: var(--cpf-brand-emerald) !important;
	border: 1.5px solid var(--cpf-brand-emerald);
}

.cpf-btn--outline-emerald:hover {
	background: var(--cpf-brand-emerald-light);
}

.cpf-btn--full {
	width: 100%;
}

.cpf-btn--sm {
	padding: 8px 16px;
	font-size: 13px;
}

/* 1. SEO HERO SECTION */
.seo-hero {
	background: radial-gradient(circle at 78% 4%, #30605b 0%, transparent 33%),
		linear-gradient(135deg, #112d32, #173d3e 75%, #174b42);
	color: #f6fbf4;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

.seo-hero *,
.seo-hero *::before,
.seo-hero *::after {
	box-sizing: border-box;
}

.seo-hero .wrap {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(350px, .88fr);
	gap: clamp(28px, 5vw, 72px);
	padding: 70px 0px 75px;
	align-items: start;
}

/* Eyebrow label */
.seo-hero .eyebrow,
.eyebrow,
.kicker {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
}

.seo-hero .eyebrow,
.eyebrow {
	color: var(--accent, #ffc49a);
}

.seo-hero .eyebrow:before,
.eyebrow:before {
	content: '';
	display: inline-block;
	width: 25px;
	height: 2px;
	background: currentColor;
	vertical-align: middle;
	margin-right: 10px;
}

/* Heading */
.seo-hero h1 {
	font: 400 clamp(3.1rem, 5.3vw, 5.6rem)/1.04 var(--serif, 'DM Serif Display', Georgia, serif);
	letter-spacing: -.05em;
	margin: 22px 0;
	overflow-wrap: break-word;
	color: #fff;
}

.seo-hero h1 .script {
	color: #ffd098;
	font-size: 1.04em;
}

/* Script (cursive) style used in h1 span */
.script {
	font-family: Caveat, 'Segoe Script', cursive;
	color: var(--accent, #ffc49a);
	font-size: 1.02em;
	line-height: .96;
	letter-spacing: 0;
	white-space: normal;
}

/* Body copy */
.seo-hero p {
	font-size: 18px;
	line-height: 1.64;
	color: #d9e9df;
	max-width: 690px;
	margin: 0 0 14px;
}

.seo-hero p strong {
	color: #fff;
}

/* Capabilities strip */
.seo-capabilities {
	margin: 18px 0 0;
	border-top: 1px solid #8ca99c;
	border-bottom: 1px solid #8ca99c;
	padding: 12px 0;
	font-size: 15px;
	line-height: 1.6;
	color: #e6f2e7;
}

.seo-capabilities b {
	display: block;
	font-size: 12px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #ffcf9e;
	margin-bottom: 3px;
}

/* CTA Actions row */
.actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 26px;
}

.seo-hero .actions {
	margin-top: 25px;
}

/* Base button */
.seo-button {
	min-height: 52px;
	padding: 13px 19px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 7px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease;
}

/* WhatsApp / primary green button */
.seo-button-wa {
	background: var(--green, #36d77d);
	color: #10271a !important;
}

.seo-button-wa:hover {
	background: #75edaa;
}

/* Outline button */
.seo-button-outline {
	border-color: #b1c9ba;
	color: #fff !important;
	background: transparent;
}

.seo-button-outline:hover {
	background: #2c484b;
	border-color: #fff;
}

/* Dark button (used in search panel) */
.seo-button-dark {
	background: var(--ink, #172d33);
	color: #fff !important;
}

.seo-button-dark:hover {
	background: #304b52;
}

/* Micro text below buttons */
.micro,
.seo-hero .micro {
	font-size: 13px;
	line-height: 1.5;
	color: #c5d9cc;
	margin: 12px 0 0;
}

/* SEARCH PANEL (aside) */
.search-panel {
	background: #f9fbf7;
	color: #183a34;
	border: 1px solid #abc6b5;
	padding: 23px;
	box-shadow: 12px 13px 0 #092528;
	min-width: 0;
}

/* Panel header bar */
.search-panel .top {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	border-bottom: 1px solid #ceded2;
	padding-bottom: 14px;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: .12em;
	color: #526d62;
}

.search-panel .top b {
	color: #8b5d3f;
}

/* Panel heading */
.search-panel h2 {
	font: 400 31px/1.16 var(--serif, 'DM Serif Display', Georgia, serif);
	letter-spacing: -.035em;
	margin: 18px 0;
	color: #183a34;
}

/* Issue toggle buttons */
.search-options {
	display: grid;
	gap: 7px;
}

.search-options button {
	width: 100%;
	text-align: left;
	padding: 11px 13px;
	border: 1px solid #c8d8ca;
	background: #fff;
	color: #1b4237;
	font-size: 14px;
	font-weight: 700;
	border-radius: 3px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.search-options button[aria-pressed="true"] {
	border-color: #296f55;
	background: #e2f0e4;
	box-shadow: inset 4px 0 0 #296f55;
}

.search-options button:hover {
	border-color: #296f55;
}

/* Result area */
.search-panel .result {
	background: #e7f2e8;
	border-left: 4px solid #286e52;
	padding: 17px;
	margin: 15px 0 0;
	min-height: 195px;
}

.search-panel .result strong {
	display: block;
	font: 400 24px/1.22 var(--serif, 'DM Serif Display', Georgia, serif);
	margin-bottom: 8px;
	color: #183a34;
}

.search-panel .result p {
	color: #3b5549;
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 8px;
}

.search-panel .result small {
	font-size: 13px;
	color: #265443;
	font-weight: 700;
	line-height: 1.52;
	display: block;
}

/* CTA button inside panel */
.search-panel .seo-button {
	width: 100%;
	margin-top: 13px;
}

/* Responsive adjustments for SEO Hero */
@media (max-width: 1050px) {
	.seo-hero .wrap {
		grid-template-columns: 1fr;
	}

	.search-panel {
		max-width: 760px;
	}
}

@media (max-width: 600px) {
	.seo-hero .wrap {
		padding: 47px 0px 56px;
		gap: 27px;
	}

	.seo-hero h1 {
		font-size: clamp(2.7rem, 10.4vw, 3.75rem);
	}

	.seo-hero p {
		font-size: 16px;
	}

	.seo-capabilities {
		font-size: 14px;
	}

	.seo-hero .actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 9px;
	}

	.seo-hero .actions .seo-button {
		width: 100%;
	}

	.search-panel {
		padding: 18px;
		box-shadow: 7px 8px 0 #092528;
	}

	.search-panel h2 {
		font-size: 28px;
	}

	.search-panel .result {
		min-height: 0;
	}
}

/* ============================================================
   ON THIS PAGE (JUMP NAV) & ANSWER SECTION CSS
   ============================================================ */

/* Container Width */
.sx-wrap {
	width: min(100% - 44px, 1160px);
	margin-inline: auto;
}

/* Shared Typography */
.sx-answer,
.sx-jump {
	font-family: 'DM Sans', Arial, sans-serif;
	color: var(--sx-ink, #16363b);
	font-size: 16px;
	line-height: 1.65;
	box-sizing: border-box;
}

/* 1. JUMP NAVIGATION (.sx-jump) */
.sx-jump {
	background: #fff;
	border-bottom: 1px solid var(--sx-line, #bad0c5);
	padding: 10px 0;
	position: sticky;
	top: 0;
}

.sx-jump .sx-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 16px;
}

.sx-jump span {
	color: var(--sx-muted, #435e63);
	font-size: 13px;
}

.sx-jump a {
	color: var(--sx-green, #206b4d);
	font-size: 14px;
	font-weight: 700;
	min-height: 38px;
	display: inline-flex;
	align-items: center;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.15s ease;
}

.sx-jump a:hover {
	color: #164e37;
}

.sx-jump .sx-contact-link {
	margin-inline-start: auto;
}

.sx-jump a:focus-visible {
	outline: 3px solid #b45416;
	outline-offset: 4px;
}

/* 2. ANSWER SECTION (.sx-answer) */
.sx-answer {
	background: #f3f7f4;
	border-bottom: 1px solid var(--sx-line, #bad0c5);
	padding: 30px 0;
}

.sx-answer .sx-wrap {
	max-width: 1160px;
}

/* Kicker label */
.sx-kicker {
	color: var(--sx-green, #206b4d);
	font-weight: 750;
	font-size: 13px;
	letter-spacing: .035em;
	margin: 0 0 12px;
}

/* Section heading */
.sx-answer h2 {
	font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.3 Georgia, serif;
	margin: 8px 0 12px;
	max-width: 42ch;
	color: var(--sx-ink, #16363b);
}

/* Body text */
.sx-answer p:not(.sx-kicker) {
	max-width: 78ch;
	margin: 0;
	color: var(--sx-ink, #16363b);
}

/* 3. RESPONSIVE (≤ 700px) */
@media (max-width: 700px) {
	.sx-wrap {
		width: calc(100% - 36px);
	}

	.sx-jump .sx-wrap {
		gap: 2px 14px;
	}

	.sx-jump a {
		font-size: 13px;
		min-height: 42px;
	}

	.sx-jump .sx-contact-link {
		margin-inline-start: 0;
	}

	.sx-answer {
		padding: 24px 0;
	}

	.sx-answer h2 {
		font-size: 1.65rem;
	}
}

/* ============================================================
   SEO LEAD MAGNET SECTION (.seo-magnet)
   ============================================================ */

/* Section Container & Layout */
.seo-magnet {
	background: #122e39;
	color: #f8fbf7;
	padding: 48px 0;
	font: 16px/1.6 'DM Sans', Arial, sans-serif;
	box-sizing: border-box;
}

.seo-magnet * {
	box-sizing: border-box;
}

.seo-magnet .sm-wrap {
	width: min(100% - 44px, 1160px);
	margin: auto;
}

.sm-grid {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	gap: 38px;
	align-items: start;
}

/* Left Column Typography & Content */
.sm-kicker {
	font-size: 13px;
	font-weight: 800;
	color: #b9ebca;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.seo-magnet h2 {
	font: 400 clamp(2.1rem, 3.8vw, 3.5rem)/1.1 Georgia, serif;
	margin: 12px 0 18px;
	color: #fff;
}

.seo-magnet p {
	color: #d1e6de;
	margin: 0 0 17px;
}

.seo-magnet .sm-benefits {
	padding-left: 20px;
	color: #e1efe8;
	margin: 20px 0;
}

.sm-benefits li {
	margin: 8px 0;
}

/* Primary Magnet Button */
.sm-button {
	min-height: 48px;
	padding: 12px 18px;
	border: 1px solid #b9ebca;
	background: #b9ebca;
	color: #10342a;
	font: 800 15px/1.4 'DM Sans', Arial, sans-serif;
	cursor: pointer;
	transition: background 0.15s ease;
	display: inline-block;
	text-align: center;
	text-decoration: none;
}

.sm-button:hover {
	background: #ddf6e4;
}

.sm-button:disabled {
	opacity: .65;
	cursor: wait;
}

.sm-small {
	display: block;
	font-size: 13px !important;
	color: #b8d4c7 !important;
	margin-top: 12px !important;
}

/* Personalised WhatsApp Box */
.sm-personal {
	border-top: 1px solid #78998b;
	padding-top: 18px;
	margin-top: 22px;
}

.sm-personal b {
	color: #fff;
}

.sm-personal p {
	font-size: 14px;
	margin: 8px 0 12px;
}

.sm-whatsapp {
	display: inline-block;
	color: #b9ebca;
	font-weight: 800;
	text-underline-offset: 4px;
	text-decoration: underline;
}

/* Right Column: Paper Card Preview (.sm-paper) */
.sm-paper {
	background: #fbfdf9;
	color: #173b32;
	border: 1px solid #a9c5b7;
	padding: 25px;
	box-shadow: 8px 8px 0 #071d25;
	min-width: 0;
}

.sm-paper .sm-label {
	color: #2a6a56;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	display: block;
}

.sm-select {
	display: block;
	width: 100%;
	min-height: 44px;
	border: 1px solid #90b3a2;
	padding: 8px;
	background: white;
	font: 16px Arial, sans-serif;
	color: #174b3c;
	margin-top: 6px;
	margin-bottom: 15px;
	cursor: pointer;
}

.sm-paper h3 {
	font: 400 clamp(1.6rem, 2.3vw, 2.2rem)/1.15 Georgia, serif;
	margin: 11px 0 18px;
	color: #173b32;
}

/* Tab Bar */
.sm-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	border-bottom: 1px solid #b3ccbe;
	padding-bottom: 14px;
	margin-bottom: 17px;
}

.sm-tabs button {
	padding: 9px 11px;
	background: transparent;
	color: #315b4c;
	border: 1px solid #aac8b8;
	font: 700 14px/1.4 Arial, sans-serif;
	cursor: pointer;
	transition: all 0.15s ease;
}

.sm-tabs button[aria-pressed="true"] {
	background: #174b3c;
	color: #fff;
	border-color: #174b3c;
}

/* Tab Content Panels */
.sm-panel[hidden] {
	display: none;
}

.sm-panel p {
	font-size: 15px;
	color: #365b4a;
	margin: 0 0 12px;
}

.sm-panel b {
	color: #164c3b;
}

.sm-panel .sm-query {
	font-size: 19px;
	color: #154b3a;
	border-left: 3px solid #ca7833;
	padding-left: 12px;
	margin: 13px 0;
	font-style: italic;
}

.sm-proofline {
	font-size: 13px !important;
	color: #577767 !important;
	border-top: 1px solid #c5d9ce;
	padding-top: 12px;
	margin-bottom: 0 !important;
}

/* Accessible Focus States */
.sm-button:focus-visible,
.sm-tabs button:focus-visible,
.sm-select:focus-visible,
.sm-whatsapp:focus-visible {
	outline: 3px solid #ed9b4f;
	outline-offset: 3px;
}

/* Companion Modal Dialog (.sm-dialog) */
.sm-dialog {
	width: min(100% - 32px, 520px);
	max-height: calc(100dvh - 32px);
	overflow: auto;
	border: 1px solid #8cbda0;
	padding: 27px;
	background: #f7fbf6;
	color: #173b32;
	box-shadow: 0 20px 80px rgba(0, 29, 39, 0.4);
	font: 16px/1.55 Arial, sans-serif;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10000;
}

.sm-dialog::backdrop {
	background: rgba(9, 37, 45, 0.75);
}

.sm-dialog h2 {
	font: 400 30px/1.15 Georgia, serif;
	margin: 6px 30px 12px 0;
	color: #173b32;
}

.sm-dialog p {
	margin: 0 0 15px;
	color: #365b4a;
}

.sm-close {
	position: absolute;
	right: 12px;
	top: 12px;
	min-width: 40px;
	min-height: 40px;
	background: transparent;
	border: 1px solid #aac8b8;
	color: #173b32;
	font: 700 23px Arial;
	cursor: pointer;
}

.sm-dialog label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	margin: 12px 0 5px;
	color: #173b32;
}

.sm-dialog input[type=email],
.sm-dialog input[type=url] {
	width: 100%;
	min-height: 46px;
	background: #fff;
	border: 1px solid #87ad96;
	padding: 11px;
	font: 16px Arial;
	color: #14372b;
}

.sm-dialog .sm-check {
	display: flex;
	align-items: start;
	gap: 9px;
	font-size: 13px;
	font-weight: 400;
	margin: 15px 0;
}

.sm-check input {
	width: 19px;
	height: 19px;
	flex: none;
	accent-color: #1e6248;
}

.sm-dialog .sm-button {
	width: 100%;
	margin: 8px 0;
}

.sm-dialog small {
	font-size: 12px;
	color: #4c6d5d;
}

.sm-dialog a {
	color: #135b40;
	font-weight: 700;
}

.sm-dialog [data-sm-status] {
	padding: 12px;
	background: #e4f2e7;
	border-left: 3px solid #4c926b;
	margin: 14px 0;
	font-size: 14px;
}

.sm-dialog [data-sm-status]:empty {
	display: none;
}

.sm-dialog [data-sm-status][data-error=true] {
	border-color: #b95939;
	background: #faeee7;
}

.sm-dialog .sm-download {
	display: block;
	background: #174b3c;
	color: #fff;
	padding: 12px;
	text-align: center;
	text-decoration: none;
	margin: 14px 0;
}

.sm-dialog .sm-download[hidden] {
	display: none;
}

/* Responsive Queries for SEO Magnet */
@media (max-width: 800px) {
	.sm-grid {
		grid-template-columns: 1fr;
		gap: 23px;
	}

	.sm-paper {
		box-shadow: none;
	}
}

@media (max-width: 480px) {
	.seo-magnet .sm-wrap {
		width: min(100% - 32px, 1160px);
	}

	.seo-magnet {
		padding: 35px 0;
	}

	.sm-paper {
		padding: 19px;
	}

	.sm-dialog {
		padding: 23px 20px;
	}

	.sm-tabs button {
		flex: 1;
	}

	.sm-button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sm-dialog {
		scroll-behavior: auto;
	}
}

/* 7. Real Search Situations (Try a search) */
.cpf-situation {
	background: var(--cpf-bg-light);
}

.cpf-situation-component {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 36px;
	background: #fff;
	border: 1px solid var(--cpf-border);
	border-radius: var(--cpf-radius-lg);
	padding: 32px;
	box-shadow: var(--cpf-shadow-sm);
	margin-bottom: 40px;
}

.cpf-situation-tabs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-right: 1px solid var(--cpf-border);
	padding-right: 24px;
}

.cpf-situation-tab {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--cpf-radius-sm);
	background: transparent;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	color: var(--cpf-text-muted);
}

.cpf-situation-tab.is-active {
	background: var(--cpf-brand-emerald-light);
	color: var(--cpf-brand-dark);
	border-color: rgba(31, 143, 98, 0.2);
}

.cpf-situation-panel {
	display: none;
}

.cpf-situation-panel.is-active {
	display: block;
}

.cpf-simulated-search {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
	background: var(--cpf-bg-light);
	border: 1px solid var(--cpf-border);
	border-radius: 9999px;
	margin-bottom: 24px;
}

.cpf-search-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: monospace;
	font-size: 15px;
	font-weight: 600;
	color: var(--cpf-brand-dark);
}

.cpf-search-tag {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	background: #e0f2fe;
	color: #0369a1;
	padding: 3px 8px;
	border-radius: 9999px;
}

.cpf-situation-compare-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 24px;
}

.cpf-compare-card {
	padding: 20px;
	border-radius: var(--cpf-radius-md);
	font-size: 14px;
}

.cpf-compare-card--before {
	background: #fef2f2;
	border: 1px solid #fee2e2;
}

.cpf-compare-card--after {
	background: #f0fdf4;
	border: 1px solid #dcfce7;
}

.cpf-compare-tag {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.cpf-compare-card--before .cpf-compare-tag {
	color: #dc2626;
}

.cpf-compare-card--after .cpf-compare-tag {
	color: var(--cpf-brand-emerald);
}

.cpf-situation-outcome {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	background: var(--cpf-accent-amber-light);
	border: 1px solid #fde68a;
	border-radius: var(--cpf-radius-md);
}

.cpf-outcome-icon {
	font-size: 24px;
}

.cpf-outcome-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: #92400e;
}

.cpf-outcome-text {
	margin: 0;
	font-weight: 600;
	font-size: 14px;
	color: #78350f;
}

/* 9. See The Difference */
.cpf-diff-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 50px;
	align-items: center;
}

.cpf-diff-tab-nav {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.cpf-diff-tab-btn {
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 9999px;
	border: 1px solid var(--cpf-border);
	background: var(--cpf-bg-light);
	cursor: pointer;
}

.cpf-diff-tab-btn.is-active {
	background: var(--cpf-brand-dark);
	color: #fff;
	border-color: var(--cpf-brand-dark);
}

.cpf-diff-panel {
	display: none;
}

.cpf-diff-panel.is-active {
	display: block;
}

.cpf-diff-contrast {
	padding: 20px;
	border-radius: var(--cpf-radius-md);
	margin-bottom: 16px;
}

.cpf-diff-contrast--wasted {
	background: #fef2f2;
	border-left: 4px solid #ef4444;
}

.cpf-diff-contrast--gain {
	background: #f0fdf4;
	border-left: 4px solid var(--cpf-brand-emerald);
}

.cpf-contrast-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.cpf-contrast-badge--wasted {
	color: #dc2626;
}

.cpf-contrast-badge--gain {
	color: var(--cpf-brand-emerald);
}

.cpf-roi-card {
	background: linear-gradient(135deg, var(--cpf-brand-dark) 0%, var(--cpf-brand-darker) 100%);
	color: #fff;
	border-radius: var(--cpf-radius-lg);
	padding: 36px;
	box-shadow: var(--cpf-shadow-lg);
}

.cpf-roi-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.1);
	padding: 4px 10px;
	border-radius: 9999px;
	color: #6ee7b7;
	margin-bottom: 12px;
}

.cpf-roi-title {
	font-family: var(--cpf-font-serif);
	font-size: 22px;
	color: #fff;
	margin: 0 0 12px;
}

.cpf-roi-desc {
	font-size: 14px;
	color: #cbd5e1;
	margin-bottom: 24px;
}

.cpf-roi-metrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: var(--cpf-radius-md);
	margin-bottom: 20px;
}

.cpf-metric-label {
	display: block;
	font-size: 11px;
	color: #94a3b8;
	text-transform: uppercase;
}

.cpf-metric-value {
	font-size: 24px;
	font-weight: 700;
	color: #6ee7b7;
}

.cpf-roi-callout {
	background: rgba(245, 158, 11, 0.15);
	border: 1px solid rgba(245, 158, 11, 0.3);
	padding: 16px;
	border-radius: var(--cpf-radius-md);
	margin-bottom: 24px;
}

.cpf-callout-headline {
	font-weight: 700;
	font-size: 16px;
	color: #fbbf24;
	margin-bottom: 4px;
}

.cpf-callout-text {
	font-size: 13px;
	color: #cbd5e1;
	margin: 0;
}

/* 14. Locations Directory & Table Filter */
.cpf-locations-filter-wrap {
	max-width: 560px;
	margin: 0 auto 32px;
}

.cpf-filter-box {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 2px solid var(--cpf-border);
	border-radius: 9999px;
	padding: 10px 20px;
	box-shadow: var(--cpf-shadow-sm);
}

.cpf-filter-input {
	border: none;
	outline: none;
	width: 100%;
	font-size: 15px;
}

.cpf-locations-table-wrap {
	background: #fff;
	border: 1px solid var(--cpf-border);
	border-radius: var(--cpf-radius-lg);
	overflow: hidden;
	box-shadow: var(--cpf-shadow-sm);
}

.cpf-locations-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.cpf-locations-table th {
	background: var(--cpf-bg-light);
	padding: 14px 20px;
	text-align: left;
	font-weight: 700;
	color: var(--cpf-brand-dark);
	border-bottom: 1px solid var(--cpf-border);
}

.cpf-locations-table td {
	padding: 16px 20px;
	border-bottom: 1px solid var(--cpf-border);
}

.cpf-loc-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cpf-brand-emerald);
	font-weight: 600;
	text-decoration: none;
}

.cpf-loc-link:hover {
	text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 1024px) {

	.cpf-hero-grid,
	.cpf-plan-grid,
	.cpf-diff-grid,
	.cpf-situation-component {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cpf-situation-tabs {
		border-right: none;
		border-bottom: 1px solid var(--cpf-border);
		padding-right: 0;
		padding-bottom: 20px;
		flex-direction: row;
		overflow-x: auto;
	}
}

@media (max-width: 768px) {
	.cpf-section-title {
		font-size: 30px;
	}

	.cpf-hero-title {
		font-size: 34px;
	}

	.cpf-situation-compare-grid {
		grid-template-columns: 1fr;
	}

	.cpf-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cpf-plan-direct-box {
		flex-direction: column;
		text-align: center;
	}
}

/* ============================================================
   SEO LEAD MAGNET SECTION (.seo-magnet) & MODAL DIALOG (.sm-dialog)
   Source: /assets/seo-lead-magnet.css
   ============================================================ */

/* ------------------------------------------------------------
   1. SECTION CONTAINER & GRID LAYOUT
   ------------------------------------------------------------ */
.seo-magnet {
	background: #122e39;
	color: #f8fbf7;
	padding: 48px 0;
	font: 16px/1.6 'DM Sans', Arial, sans-serif;
	box-sizing: border-box;
}

.seo-magnet * {
	box-sizing: border-box;
}

.seo-magnet .sm-wrap {
	width: min(100% - 44px, 1160px);
	margin: auto;
}

.sm-grid {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	gap: 38px;
	align-items: start;
}

/* ------------------------------------------------------------
   2. LEFT COLUMN (TEXT, LIST, BUTTONS & WHATSAPP BOX)
   ------------------------------------------------------------ */
.sm-kicker {
	font-size: 13px;
	font-weight: 800;
	color: #b9ebca;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.seo-magnet h2 {
	font: 400 clamp(2.1rem, 3.8vw, 3.5rem)/1.1 Georgia, serif;
	margin: 12px 0 18px;
	color: #fff;
}

.seo-magnet p {
	color: #d1e6de;
	margin: 0 0 17px;
}

.seo-magnet .sm-benefits {
	padding-left: 20px;
	color: #e1efe8;
	margin: 20px 0;
}

.sm-benefits li {
	margin: 8px 0;
}

/* Primary Button */
.sm-button {
	min-height: 48px;
	padding: 12px 18px;
	border: 1px solid #b9ebca;
	background: #b9ebca;
	color: #10342a;
	font: 800 15px/1.4 'DM Sans', Arial, sans-serif;
	cursor: pointer;
	transition: background 0.15s ease;
}

.sm-button:hover {
	background: #ddf6e4;
}

.sm-button:disabled {
	opacity: .65;
	cursor: wait;
}

.sm-small {
	display: block;
	font-size: 13px !important;
	color: #b8d4c7 !important;
	margin-top: 12px !important;
}

/* Personalised WhatsApp Box */
.sm-personal {
	border-top: 1px solid #78998b;
	padding-top: 18px;
	margin-top: 22px;
}

.sm-personal b {
	color: #fff;
	display: block;
}

.sm-personal p {
	font-size: 14px;
	margin: 8px 0 12px;
	color: #d1e6de;
}

.sm-whatsapp {
	display: inline-block;
	color: #b9ebca;
	font-weight: 800;
	text-underline-offset: 4px;
	text-decoration: underline;
}

/* ------------------------------------------------------------
   3. RIGHT COLUMN: INTERACTIVE PREVIEW CARD (.sm-paper)
   ------------------------------------------------------------ */
.sm-paper {
	background: #fbfdf9;
	color: #173b32;
	border: 1px solid #a9c5b7;
	padding: 25px;
	box-shadow: 8px 8px 0 #071d25;
	min-width: 0;
}

.sm-paper .sm-label {
	color: #2a6a56;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	display: block;
}

.sm-select {
	display: block;
	width: 100%;
	min-height: 44px;
	border: 1px solid #90b3a2;
	padding: 8px;
	background: white;
	font: 16px Arial, sans-serif;
	color: #174b3c;
	margin-top: 6px;
	margin-bottom: 15px;
	cursor: pointer;
}

.sm-paper h3 {
	font: 400 clamp(1.6rem, 2.3vw, 2.2rem)/1.15 Georgia, serif;
	margin: 11px 0 18px;
	color: #173b32;
}

/* Interactive Tabs */
.sm-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	border-bottom: 1px solid #b3ccbe;
	padding-bottom: 14px;
	margin-bottom: 17px;
}

.sm-tabs button {
	padding: 9px 11px;
	background: transparent;
	color: #315b4c;
	border: 1px solid #aac8b8;
	font: 700 14px/1.4 Arial, sans-serif;
	cursor: pointer;
	transition: all 0.15s ease;
}

.sm-tabs button[aria-pressed="true"] {
	background: #174b3c;
	color: #fff;
	border-color: #174b3c;
}

/* Tab Panels */
.sm-panel[hidden] {
	display: none;
}

.sm-panel p {
	font-size: 15px;
	color: #365b4a;
	margin: 0 0 12px;
}

.sm-panel b {
	color: #164c3b;
}

.sm-panel .sm-query {
	font-size: 19px;
	color: #154b3a;
	border-left: 3px solid #ca7833;
	padding-left: 12px;
	margin: 13px 0;
	font-style: italic;
}

.sm-proofline {
	font-size: 13px !important;
	color: #577767 !important;
	border-top: 1px solid #c5d9ce;
	padding-top: 12px;
	margin-bottom: 0 !important;
}

/* ------------------------------------------------------------
   4. MODAL DIALOG POPUP (.sm-dialog)
   ------------------------------------------------------------ */
.sm-dialog {
	width: min(100% - 32px, 520px);
	max-height: calc(100dvh - 32px);
	overflow: auto;
	border: 1px solid #8cbda0;
	padding: 27px;
	background: #f7fbf6;
	color: #173b32;
	box-shadow: 0 20px 80px rgba(0, 29, 39, 0.4);
	font: 16px/1.55 Arial, sans-serif;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1000;
}

.sm-dialog::backdrop {
	background: rgba(9, 37, 45, 0.75);
}

.sm-close {
	position: absolute;
	right: 12px;
	top: 12px;
	min-width: 40px;
	min-height: 40px;
	background: transparent;
	border: 1px solid #aac8b8;
	color: #173b32;
	font: 700 23px Arial;
	cursor: pointer;
}

.sm-dialog h2 {
	font: 400 30px/1.15 Georgia, serif;
	margin: 6px 30px 12px 0;
	color: #173b32;
}

.sm-dialog p {
	margin: 0 0 15px;
	color: #365b4a;
}

.sm-dialog label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	margin: 12px 0 5px;
	color: #173b32;
}

.sm-dialog input[type=email],
.sm-dialog input[type=url] {
	width: 100%;
	min-height: 46px;
	background: #fff;
	border: 1px solid #87ad96;
	padding: 11px;
	font: 16px Arial, sans-serif;
	color: #14372b;
}

/* Honeypot trap hidden */
.sm-trap {
	position: absolute;
	left: -10000px;
}

/* Checkbox */
.sm-dialog .sm-check {
	display: flex;
	align-items: start;
	gap: 9px;
	font-size: 13px;
	font-weight: 400;
	margin: 15px 0;
}

.sm-check input {
	width: 19px;
	height: 19px;
	flex: none;
	accent-color: #1e6248;
}

.sm-dialog .sm-button {
	width: 100%;
	margin: 8px 0;
}

.sm-dialog small {
	font-size: 12px;
	color: #4c6d5d;
	display: block;
}

.sm-dialog a {
	color: #135b40;
	font-weight: 700;
}

/* Form status feedback */
.sm-dialog [data-sm-status] {
	padding: 12px;
	background: #e4f2e7;
	border-left: 3px solid #4c926b;
	margin: 14px 0;
	font-size: 14px;
}

.sm-dialog [data-sm-status]:empty {
	display: none;
}

.sm-dialog [data-sm-status][data-error="true"] {
	border-color: #b95939;
	background: #faeee7;
}

.sm-dialog .sm-download {
	display: block;
	background: #174b3c;
	color: #fff;
	padding: 12px;
	text-align: center;
	text-decoration: none;
	margin: 14px 0;
}

.sm-dialog .sm-download[hidden] {
	display: none;
}

/* ------------------------------------------------------------
   5. ACCESSIBLE FOCUS STATES
   ------------------------------------------------------------ */
.sm-button:focus-visible,
.sm-tabs button:focus-visible,
.sm-dialog button:focus-visible,
.sm-dialog input:focus-visible,
.sm-dialog a:focus-visible,
.sm-select:focus-visible,
.sm-whatsapp:focus-visible {
	outline: 3px solid #ed9b4f;
	outline-offset: 3px;
}

/* ------------------------------------------------------------
   6. RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------ */
@media (max-width: 800px) {
	.sm-grid {
		grid-template-columns: 1fr;
		gap: 23px;
	}

	.sm-paper {
		box-shadow: none;
	}
}

@media (max-width: 480px) {
	.seo-magnet .sm-wrap {
		width: min(100% - 32px, 1160px);
	}

	.seo-magnet {
		padding: 35px 0;
	}

	.sm-paper {
		padding: 19px;
	}

	.sm-dialog {
		padding: 23px 20px;
	}

	.sm-tabs button {
		flex: 1;
	}

	.sm-button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sm-dialog {
		scroll-behavior: auto;
	}
}

/* ============================================================
   SUPREME CONVERSION / AUDIT OFFER SECTION (.sup-conversion)
   Source: shared-styles (supreme-conversion)
   ============================================================ */

/* ------------------------------------------------------------
   1. SECTION CONTAINER & LAYOUT
   ------------------------------------------------------------ */
.sup-conversion {
	background: #e9f1eb;
	color: #153c31;
	border-top: 1px solid #bed3c5;
	border-bottom: 1px solid #bed3c5;
	font: 16px/1.58 'DM Sans', Arial, sans-serif;
	box-sizing: border-box;
}

.sup-conversion * {
	box-sizing: border-box;
}

.sup-conversion .sup-wrap {
	width: min(100% - 44px, 1160px);
	margin: auto;
	padding: 56px 0 47px;
}

.sup-conversion .sup-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(315px, .95fr);
	gap: clamp(23px, 4vw, 55px);
	align-items: start;
}

/* ------------------------------------------------------------
   2. LEFT COLUMN (COPY, AUDIT LIST, STEPS)
   ------------------------------------------------------------ */
.sup-conversion .sup-kicker {
	display: block;
	color: #29734e;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 12px;
	font-weight: 800;
}

.sup-conversion h2 {
	font: 400 clamp(2.35rem, 4.2vw, 4.2rem)/1.12 'DM Serif Display', Georgia, serif;
	letter-spacing: -.035em;
	margin: 9px 0 14px;
	color: #173d33;
}

.sup-conversion h3 {
	font: 400 26px/1.17 'DM Serif Display', Georgia, serif;
	letter-spacing: -.02em;
	margin: 0 0 10px;
	color: #173d33;
}

.sup-conversion p {
	margin: 0 0 13px;
}

.sup-conversion .sup-lead {
	font-size: 17px;
	max-width: 680px;
}

.sup-conversion .sup-specific {
	border-left: 3px solid #74a585;
	padding: 4px 0 4px 16px;
	color: #335c4c;
	margin: 18px 0;
}

/* Audit Coverage List */
.sup-conversion .sup-audit-list {
	padding: 0;
	margin: 18px 0 20px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	list-style: none;
}

.sup-conversion .sup-audit-list li {
	background: #fff;
	border: 1px solid #c6d9ca;
	padding: 9px 12px;
	font-size: 14px;
	font-weight: 700;
}

.sup-conversion .sup-audit-result {
	font-size: 15px;
	color: #315543;
}

/* 3-Step Process List */
.sup-conversion .sup-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 28px;
}

.sup-conversion .sup-steps div {
	border-top: 1px solid #8caf98;
	padding-top: 12px;
	font-size: 14px;
}

.sup-conversion .sup-steps strong {
	display: block;
	font-weight: 800;
	color: #1a5038;
	margin-bottom: 4px;
}

/* ------------------------------------------------------------
   3. RIGHT COLUMN PANEL (PRICING & AUDIT FORM)
   ------------------------------------------------------------ */
.sup-conversion .sup-panel {
	background: #fff;
	border: 1px solid #a8c5b3;
	box-shadow: 8px 8px 0 #c9dfcf;
	padding: 25px;
	min-width: 0;
}

/* Pricing Grid */
.sup-conversion .sup-prices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	margin: 15px 0;
}

.sup-conversion .sup-price {
	border: 1px solid #c5d9c9;
	padding: 15px;
	background: #f7fbf7;
	min-width: 0;
}

.sup-conversion .sup-price b {
	display: block;
	color: #226045;
	font-size: 13px;
}

.sup-conversion .sup-price strong {
	display: block;
	font: 400 29px/1.2 'DM Serif Display', Georgia, serif;
	margin: 6px 0;
	color: #173d33;
}

.sup-conversion .sup-price p {
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
}

.sup-conversion .sup-price-note {
	font-size: 12px;
	color: #526d5c;
}

/* Form Styles */
.sup-conversion form {
	margin-top: 18px;
	border-top: 1px solid #d6e2d8;
	padding-top: 18px;
}

.sup-conversion label {
	display: block;
	font-size: 14px;
	font-weight: 800;
	margin: 12px 0 5px;
}

.sup-conversion input,
.sup-conversion textarea {
	display: block;
	width: 100%;
	padding: 10px 11px;
	min-height: 46px;
	background: #fff;
	border: 1px solid #91b39c;
	color: #173a2c;
	font: 16px/1.45 'DM Sans', Arial, sans-serif;
	border-radius: 2px;
}

.sup-conversion textarea {
	min-height: 74px;
	resize: vertical;
}

.sup-conversion button {
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: 2px;
	background: #173e31;
	color: #fff;
	padding: 10px 15px;
	margin-top: 14px;
	font: 800 14px/1.35 'DM Sans', Arial, sans-serif;
	cursor: pointer;
	transition: background 0.15s ease;
}

.sup-conversion button:hover {
	background: #236648;
}

.sup-conversion .sup-form-note,
.sup-conversion .sup-form-status {
	font-size: 12px;
	color: #4b6654;
	margin-top: 7px;
}

.sup-conversion .sup-form-status:empty {
	display: none;
}

/* Alternatives Contact Links */
.sup-conversion .sup-alternatives {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 15px;
}

.sup-conversion .sup-alternatives a {
	color: #135736;
	font-size: 14px;
	font-weight: 800;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   4. BOTTOM PROOF ROW (WORK / TESTIMONIAL / TEAM)
   ------------------------------------------------------------ */
.sup-conversion .sup-proof {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 15px;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #b5cbb9;
}

.sup-conversion .sup-proof p,
.sup-conversion .sup-proof a {
	font-size: 14px;
}

.sup-conversion .sup-proof a {
	color: #135736;
	font-weight: 800;
	text-underline-offset: 3px;
}

.sup-conversion .sup-proof strong {
	display: block;
	font-size: 14px;
	color: #1b4d35;
	margin-bottom: 6px;
}

.sup-conversion-proof {
	border-top: none;
}

.sup-conversion-proof .sup-wrap {
	padding-top: 0;
	padding-bottom: 52px;
}

.sup-conversion-proof .sup-proof {
	margin-top: 0;
}

/* ------------------------------------------------------------
   5. ACCESSIBLE FOCUS STATES
   ------------------------------------------------------------ */
.sup-conversion a:focus-visible,
.sup-conversion button:focus-visible,
.sup-conversion input:focus-visible,
.sup-conversion textarea:focus-visible {
	outline: 3px solid #d47a2f;
	outline-offset: 3px;
}

/* ------------------------------------------------------------
   6. RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------ */
@media (max-width: 850px) {
	.sup-conversion .sup-grid {
		grid-template-columns: 1fr;
	}

	.sup-conversion .sup-panel {
		max-width: 650px;
	}

	.sup-conversion .sup-proof {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.sup-conversion .sup-wrap {
		width: min(100% - 32px, 1160px);
		padding: 44px 0;
	}

	.sup-conversion .sup-steps,
	.sup-conversion .sup-proof {
		grid-template-columns: 1fr;
	}

	.sup-conversion .sup-panel {
		padding: 18px;
		box-shadow: 5px 5px 0 #c9dfcf;
	}

	.sup-conversion .sup-prices {
		grid-template-columns: 1fr;
	}

	.sup-conversion .sup-audit-list {
		grid-template-columns: 1fr 1fr;
	}

	.sup-conversion h2 {
		font-size: clamp(2.2rem, 9vw, 3.2rem);
	}
}

/* ============================================================
   EUROPEAN MARKETS DIRECTORY (.europe-directory)
   ============================================================ */
.europe-directory {
	background: #e7efe8;
	color: #173a2c;
	padding: 55px 0;
	box-sizing: border-box;
	text-align: left;
}

.europe-directory * {
	box-sizing: border-box;
}

.europe-directory .wrap {
	width: min(100% - 44px, 1160px);
	margin: auto;
	text-align: left;
}

.europe-kicker {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #245741;
	margin: 0 0 8px;
	text-align: left;
}

.europe-title {
	font: 400 clamp(2.15rem, 4vw, 3.9rem)/1.13 'DM Serif Display', Georgia, serif;
	letter-spacing: -.03em;
	margin: 8px 0 13px;
	color: #173a2c;
	text-align: left;
}

.europe-lead {
	font-size: 17px;
	line-height: 1.6;
	max-width: 800px;
	margin: 0 0 23px;
	color: #2d4f40;
	text-align: left;
}

.europe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: 9px;
	margin: 23px 0;
}

.europe-country {
	display: block;
	background: #fff;
	border: 1px solid #b5d0bc;
	padding: 11px 14px;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none !important;
	color: #173a2c !important;
	border-radius: 2px;
	transition: none;
}

.europe-country:hover,
.europe-country:focus,
.europe-country:active,
.europe-grid a.europe-country:hover,
.europe-grid a.europe-country:focus,
.europe-grid a.europe-country:active {
	color: #173a2c !important;
	background: #fff !important;
	border-color: #b5d0bc !important;
	transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.europe-cta {
	display: inline-block;
	background: #173d2e;
	color: #fff !important;
	padding: 12px 18px;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 800;
	border-radius: 2px;
	transition: none;
}

.europe-cta:hover,
.europe-cta:focus,
.europe-cta:active,
.europe-directory a.europe-cta:hover,
.europe-directory a.europe-cta:focus,
.europe-directory a.europe-cta:active {
	color: #fff !important;
	background: #173d2e !important;
	transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.europe-country:focus-visible,
.europe-cta:focus-visible {
	outline: 3px solid #d47a2f;
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.europe-directory {
		padding: 42px 0;
	}

	.europe-directory .wrap {
		width: min(100% - 32px, 1160px);
	}

	.europe-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.europe-cta {
		display: block;
		text-align: center;
		width: 100%;
	}
}

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

/* ============================================================
   FEATURED INDUSTRIES DIRECTORY (.industries-directory)
   ============================================================ */
.industries-directory {
	background: #e9f2e9;
	color: #193931;
	padding: 55px 0;
	box-sizing: border-box;
	text-align: left;
}

.industries-directory * {
	box-sizing: border-box;
}

.industries-directory .wrap {
	width: min(100% - 44px, 1160px);
	margin: auto;
	text-align: left;
}

.industries-kicker {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #235c44;
	margin: 0 0 7px;
	text-align: left;
}

.industries-title {
	font: 400 clamp(2rem, 3.8vw, 3.7rem)/1.12 'DM Serif Display', Georgia, serif;
	letter-spacing: -.03em;
	margin: 7px 0 12px;
	color: #193931;
	text-align: left;
}

.industries-lead {
	font-size: 17px;
	line-height: 1.6;
	max-width: 770px;
	margin: 0 0 22px;
	color: #2d5246;
	text-align: left;
}

.industries-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
	gap: 9px;
	margin-bottom: 22px;
}

.industry-card {
	display: block;
	background: #fff;
	border: 1px solid #bfd9cb;
	padding: 12px 16px;
	text-decoration: none !important;
	font-size: 15px;
	font-weight: 800;
	color: #193931 !important;
	border-radius: 2px;
	transition: none;
}

.industry-card:hover,
.industry-card:focus,
.industry-card:active,
.industries-grid a.industry-card:hover,
.industries-grid a.industry-card:focus,
.industries-grid a.industry-card:active {
	color: #193931 !important;
	background: #fff !important;
	border-color: #bfd9cb !important;
	transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.industries-cta {
	display: inline-block;
	background: #143b31;
	color: #fff !important;
	padding: 12px 19px;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 800;
	border-radius: 2px;
	transition: none;
}

.industries-cta:hover,
.industries-cta:focus,
.industries-cta:active,
.industries-directory a.industries-cta:hover,
.industries-directory a.industries-cta:focus,
.industries-directory a.industries-cta:active {
	color: #fff !important;
	background: #143b31 !important;
	transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

/* Accessible Focus States */
.industry-card:focus-visible,
.industries-cta:focus-visible {
	outline: 3px solid #d47a2f;
	outline-offset: 3px;
}

/* Responsive Media Queries */
@media (max-width: 600px) {
	.industries-directory {
		padding: 42px 0;
	}

	.industries-directory .wrap {
		width: min(100% - 32px, 1160px);
	}

	.industries-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.industries-cta {
		display: block;
		text-align: center;
		width: 100%;
	}
}

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

/* ============================================================
   SEO 4-STEP STRIP (.seo-strip)
   Source: /assets/shared-styles/8981e13af90cdd0b.css
   ============================================================ */

/* Container bar */
.seo-strip {
	background: #d7eadb;
	border-bottom: 1px solid #b3d4bf;
	box-sizing: border-box;
}

.seo-strip * {
	box-sizing: border-box;
}

/* 4-column layout */
.seo-strip .wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: min(100% - 44px, 1160px);
	margin: auto;
}

/* Individual step column */
.seo-strip article {
	padding: 18px;
	border-left: 1px solid #aad0b9;
}

.seo-strip article:first-child {
	border-left: 0;
}

/* Step number / Label (e.g., 01 / FIND) */
.seo-strip b {
	display: block;
	color: #375e47;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 800;
}

/* Step statement headline */
.seo-strip strong {
	display: block;
	font: 400 21px/1.23 'DM Serif Display', Georgia, serif;
	margin-top: 5px;
	color: #183d35;
	font-weight: 400;
}

/* ============================================================
   RESPONSIVE (Tablet & Mobile)
   ============================================================ */
@media (max-width: 750px) {
	.seo-strip .wrap {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Reset borders for a 2x2 grid */
	.seo-strip article:nth-child(3) {
		border-left: 0;
		border-top: 1px solid #aad0b9;
	}

	.seo-strip article:nth-child(4) {
		border-top: 1px solid #aad0b9;
	}
}

@media (max-width: 480px) {
	.seo-strip .wrap {
		grid-template-columns: 1fr;
		width: min(100% - 32px, 1160px);
	}

	.seo-strip article {
		border-left: 0;
		border-top: 1px solid #aad0b9;
		padding: 14px 16px;
	}

	.seo-strip article:first-child {
		border-top: 0;
	}

	.seo-strip strong {
		font-size: 19px;
	}
}

/* ============================================================
   SEO SECTION & HEAD (.seo-section, .seo-head)
   ============================================================ */
.seo-section {
	padding: 82px 0;
	box-sizing: border-box;
}

.seo-section.white {
	background: #fff;
}

.seo-section * {
	box-sizing: border-box;
}

.seo-section .wrap {
	width: min(100% - 44px, 1160px);
	margin: auto;
}

/* Header container */
.seo-head {
	max-width: 790px;
	margin-bottom: 32px;
}

/* .kickerr {
	font-size: 18px;
	margin: 0 auto 21px;
	max-width: 620px;
	color: #97603a;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
} */

/* Kicker / Category label */
.seo-head .kicker,
.kicker {
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: #97603a;
	display: block;
	margin: 0 auto 21px;
}

/* Section heading */
.seo-head h2 {
	font: 400 clamp(2.65rem, 4.7vw, 4.85rem)/1.09 var(--serif, 'DM Serif Display', Georgia, serif);
	letter-spacing: -.047em;
	margin: 0 0 16px;
	color: #172d33;
	overflow-wrap: break-word;
}

/* Section intro text */
.seo-head p {
	color: #4b6358;
	font-size: 17px;
	line-height: 1.64;
	margin: 0;
}

.seo-head p strong {
	color: #164536;
}

/* ------------------------------------------------------------
   2. TWO-COLUMN COMPARISON CARDS (.seo-compare-grid)
   ------------------------------------------------------------ */
.seo-compare-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.compare-card {
	background: #fbfdfb;
	border-radius: 2px;
	background: #f6f8f4;
	border: 1px solid #ceddd0;
	padding: 27px;
}

.compare-card .card-kicker {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: #93613e;
	margin: 0 0 14px;
	display: block;
}

.compare-card h3 {
	letter-spacing: -.025em;
	color: #172d33;
	font: 400 30px / 1.2 var(--serif);
	margin: 0 0 12px;
}

.compare-card p:not(.card-kicker) {
	font-size: 16px;
	margin: 0;
	color: #4a6256;
	line-height: 1.62;
}

/* ------------------------------------------------------------
   3. 4-COLUMN PROCESS GRID (.owner-cols)
   ------------------------------------------------------------ */
.owner-cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

/* Individual Card */
.owner-cols article {
	background: #fff;
	border: 1px solid #c7d8ca;
	padding: 23px;
	border-radius: 2px;
}

/* Step Label (e.g., 01 / CHECK) */
.owner-cols b {
	display: block;
	color: #975d3d;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 800;
	font-family: 'DM Sans', Arial, sans-serif;
}

/* Step Title */
.owner-cols h3 {
	font: 400 27px/1.15 var(--serif, 'DM Serif Display', Georgia, serif);
	letter-spacing: -.03em;
	margin: 15px 0 10px;
	color: #172d33;
}

/* Step Description */
.owner-cols p {
	margin: 0;
	color: #4a6254;
	line-height: 1.6;
	font-size: 15px;
}

/* ------------------------------------------------------------
   4. BOTTOM CALLOUT NOTE (.owner-note)
   ------------------------------------------------------------ */
.owner-note {
	padding: 19px 23px;
	border-left: 4px solid #4b8b66;
	background: #d9eadc;
	margin-top: 19px;
	color: #355746;
	line-height: 1.6;
	font-size: 16px;
	border-radius: 2px;
}

.owner-note strong,
.owner-note b {
	color: #163c2c !important;
	font-weight: 800;
}

/* ------------------------------------------------------------
   5. ACTIONS & CTA BUTTON
   ------------------------------------------------------------ */
.actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 26px;
}

.action-button {
	min-height: 52px;
	padding: 13px 19px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 7px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease;
}

.action-button-dark {
	background: var(--ink, #172d33);
	color: #fff;
}

.action-button-dark:hover {
	background: #304b52;
	color: #fff;
}

.action-button-dark:focus-visible {
	outline: 3px solid #d47a2f;
	outline-offset: 3px;
}

/* ------------------------------------------------------------
   6. RESPONSIVE MEDIA QUERIES
   ------------------------------------------------------------ */
@media (max-width: 1050px) {
	.owner-cols {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

@media (max-width: 600px) {
	.seo-section {
		padding: 65px 0;
	}

	.seo-section .wrap {
		width: min(100% - 32px, 1160px);
	}

	.seo-head h2 {
		font-size: clamp(2.45rem, 9vw, 3.5rem);
	}

	.seo-head p {
		font-size: 16px;
	}

	.owner-cols {
		grid-template-columns: 1fr;
	}

	.owner-note {
		padding: 16px 18px;
	}

	.actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.actions .action-button {
		width: 100%;
	}
}



/* ==========================================================================
   Problem Switcher Section (.cpf-seo-problem)
   ========================================================================== */
.cpf-seo-problem {
	background: var(--cpf-bg-light, #f8fafc);
	padding: 70px 0 80px;
	border-bottom: 1px solid var(--cpf-border, #e2e8f0);
}

.cpf-problem-header {
	max-width: 820px;
	margin-bottom: 35px;
}

.cpf-problem-kicker {
	display: inline-block;
	font-family: var(--cpf-font-sans, 'DM Sans', sans-serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cpf-brand-emerald, #1f8f62);
	margin-bottom: 12px;
}

.cpf-problem-heading {
	font-family: var(--cpf-font-serif, 'DM Serif Display', Georgia, serif);
	font-size: 40px;
	line-height: 1.15;
	color: var(--cpf-brand-dark, #123c3a);
	margin: 0 0 16px;
}

.cpf-problem-intro {
	font-family: var(--cpf-font-sans, 'DM Sans', sans-serif);
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--cpf-text-muted, #475569);
	margin: 0;
}

.cpf-problem-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--cpf-border, #e2e8f0);
}

.cpf-problem-tab-btn {
	background: #ffffff;
	border: 1px solid #ccd7d3;
	border-radius: 4px;
	padding: 12px 22px;
	font-family: var(--cpf-font-sans, 'DM Sans', sans-serif);
	font-size: 15px;
	font-weight: 500;
	color: var(--cpf-brand-dark, #123c3a);
	cursor: pointer;
	transition: all 0.2s ease;
}

.cpf-problem-tab-btn:hover {
	border-color: var(--cpf-brand-emerald, #1f8f62);
	color: var(--cpf-brand-emerald, #1f8f62);
}

.cpf-problem-tab-btn.is-active {
	background: var(--cpf-brand-dark, #123c3a);
	border-color: var(--cpf-brand-dark, #123c3a);
	color: #ffffff;
	font-weight: 600;
}

.cpf-problem-panel {
	padding-top: 28px;
}

.cpf-problem-panel-title {
	font-family: var(--cpf-font-sans, 'DM Sans', sans-serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--cpf-brand-dark, #123c3a);
	margin: 0 0 10px;
}

.cpf-problem-panel-lead {
	font-family: var(--cpf-font-sans, 'DM Sans', sans-serif);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--cpf-text-muted, #475569);
	max-width: 820px;
	margin: 0 0 32px;
}

.cpf-problem-pillars-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-bottom: 36px;
}

@media (max-width: 768px) {
	.cpf-problem-pillars-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.cpf-problem-heading {
		font-size: 30px;
	}
}

.cpf-problem-pillar {
	position: relative;
}

.cpf-pillar-title {
	font-family: var(--cpf-font-sans, 'DM Sans', sans-serif);
	font-size: 16px;
	font-weight: 700;
	color: var(--cpf-brand-dark, #123c3a);
	text-decoration: underline;
	text-decoration-color: rgba(31, 143, 98, 0.4);
	text-underline-offset: 4px;
	margin: 0 0 8px;
}

.cpf-pillar-desc {
	font-family: var(--cpf-font-sans, 'DM Sans', sans-serif);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--cpf-text-muted, #475569);
	margin: 0;
}

.cpf-problem-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 14px;
}

.cpf-problem-btn-primary {
	display: inline-block;
	background: #bbf7d0;
	color: #064e3b;
	font-family: var(--cpf-font-sans, 'DM Sans', sans-serif);
	font-size: 15px;
	font-weight: 600;
	padding: 12px 24px;
	border-radius: 6px;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.15s ease;
}

.cpf-problem-btn-primary:hover {
	background: #86efac;
	color: #064e3b;
	text-decoration: none;
	transform: translateY(-1px);
}

.cpf-problem-link-sec {
	font-family: var(--cpf-font-sans, 'DM Sans', sans-serif);
	font-size: 15px;
	font-weight: 600;
	color: #064e3b;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.cpf-problem-link-sec:hover {
	color: var(--cpf-brand-emerald, #1f8f62);
}

.cpf-problem-footnote {
	font-family: var(--cpf-font-sans, 'DM Sans', sans-serif);
	font-size: 13.5px;
	color: var(--cpf-text-subtle, #64748b);
	margin: 0;
	line-height: 1.5;
}

/* ============================================================
   INTERACTIVE BRIEF PLANNER (.sx-planner)
   Source: /assets/buyer-experience.css
   ============================================================ */

/* ------------------------------------------------------------
   1. SECTION CONTAINER & GRID LAYOUT
   ------------------------------------------------------------ */
.sx-planner {
	padding: 48px 0;
	background: #ebf3ee;
	border-block: 1px solid var(--sx-line, #bad0c5);
	font-family: 'DM Sans', Arial, sans-serif;
	color: var(--sx-ink, #16363b);
	font-size: 16px;
	line-height: 1.65;
	scroll-margin-top: 24px;
	box-sizing: border-box;
}

.sx-planner * {
	box-sizing: border-box;
}

.sx-planner .sx-wrap {
	width: min(100% - 44px, 1160px);
	margin-inline: auto;
}

.sx-grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(24px, 4vw, 54px);
	align-items: start;
}

/* ------------------------------------------------------------
   2. LEFT COLUMN (CONTROLS & PROMPTS)
   ------------------------------------------------------------ */
.sx-kicker {
	color: var(--sx-green, #206b4d);
	font-weight: 750;
	font-size: 13px;
	letter-spacing: .035em;
	margin: 0 0 12px;
	display: flex;
	align-items: center;
}

/* SVG icons inside kicker & summary */
.sx-icon {
	width: 22px;
	height: 22px;
	display: inline-block;
	vertical-align: middle;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	margin-right: 7px;
	flex: none;
}

.sx-planner h2 {
	font: 400 clamp(2rem, 3.3vw, 2.8rem)/1.2 Georgia, serif;
	max-width: 20ch;
	margin: 0 0 18px;
	color: var(--sx-ink, #16363b);
}

.sx-planner p {
	max-width: 68ch;
	margin: 0 0 14px;
}

.sx-planner label {
	display: block;
	font-weight: 750;
	margin-top: 22px;
}

.sx-planner select {
	font: inherit;
	font-size: 16px;
	min-height: 48px;
	background: white;
	color: var(--sx-ink, #16363b);
	border: 1px solid #779888;
	width: 100%;
	padding: 12px;
	margin: 8px 0 6px;
	border-radius: 2px;
}

.sx-context {
	font-size: 14px;
	color: var(--sx-muted, #435e63);
}

/* ------------------------------------------------------------
   3. RIGHT COLUMN: INTERACTIVE RESULT CARD (.sx-result)
   ------------------------------------------------------------ */
.sx-result {
	background: white;
	border-top: 3px solid #3c805e;
	padding: clamp(20px, 3vw, 30px);
	min-width: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sx-result h3 {
	font: 400 24px/1.3 Georgia, serif;
	margin: 0 0 14px;
	color: var(--sx-ink, #16363b);
}

.sx-result p {
	margin: 0 0 16px;
	color: var(--sx-muted, #435e63);
}

.sx-result strong {
	color: var(--sx-ink, #16363b);
}

/* ------------------------------------------------------------
   4. ACTIONS ROW & BUTTONS (.sx-actions)
   ------------------------------------------------------------ */
.sx-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 18px;
	padding-top: 5px;
}

.sx-actions button {
	font: 700 16px/1.4 'DM Sans', Arial, sans-serif;
	min-height: 48px;
	padding: 12px 18px;
	border: 1px solid #145337;
	background: #206b4d;
	color: white;
	cursor: pointer;
	border-radius: 2px;
	transition: background 0.15s ease;
}

.sx-actions button:hover {
	background: #154e38;
}

.sx-actions a {
	color: #185739;
	text-decoration: underline;
	text-underline-offset: 4px;
	font-weight: 700;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.sx-actions a:hover {
	color: #103825;
}

.sx-result .sx-note {
	font-size: 13px;
	margin: 16px 0;
	color: var(--sx-muted, #435e63);
}

/* ------------------------------------------------------------
   5. ACCORDION / PROOF ACCORDION (.sx-proof)
   ------------------------------------------------------------ */
.sx-proof {
	border-top: 1px solid var(--sx-line, #bad0c5);
	padding-top: 14px;
	margin-top: 16px;
}

.sx-proof summary {
	cursor: pointer;
	font-size: 15px;
	font-weight: 750;
	line-height: 1.6;
	min-height: 44px;
	color: var(--sx-ink, #16363b);
	display: flex;
	align-items: center;
}

.sx-proof p {
	margin-top: 14px;
	font-size: 15px;
	color: var(--sx-muted, #435e63);
}

.sx-proof a {
	color: #185739;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Accessible Focus States */
.sx-planner :is(button, a, select, summary):focus-visible {
	outline: 3px solid #b45416;
	outline-offset: 4px;
}

/* ------------------------------------------------------------
   6. RESPONSIVE BREAKPOINTS (≤ 700px)
   ------------------------------------------------------------ */
@media (max-width: 700px) {
	.sx-planner {
		padding: 32px 0;
	}

	.sx-wrap {
		width: calc(100% - 36px);
	}

	.sx-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.sx-result {
		padding: 22px;
	}

	.sx-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.sx-actions button {
		width: 100%;
		text-align: center;
	}

	.sx-actions a {
		font-size: 14px;
		justify-content: center;
	}
}

/* ============================================================
   7. MARKET DIRECTORY / SITE EXPLORE SHELF (.site-explore)
   Source: 1:1 match with Supreme Technologies market explore banner
   ============================================================ */
.site-explore {
	box-sizing: border-box;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	position: relative;
	isolation: isolate;
	color: #edf6ee;
	background: #143834 !important;
	border-top: 4px solid #aee2b4;
	padding: clamp(48px, 6vw, 75px) 0 36px;
}

.site-explore *,
.site-explore *::before,
.site-explore *::after {
	box-sizing: border-box;
}

.site-explore a {
	color: inherit;
	text-decoration: none;
}

.site-explore .shelf-inner {
	width: min(100% - 44px, 1180px);
	margin: 0 auto;
	position: relative;
}

.site-explore .shelf-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-bottom: 30px;
}

.site-explore .shelf-kicker {
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #aee2b4;
	font-weight: 700;
	margin: 0 0 14px;
	font-family: 'DM Sans', sans-serif;
}

.site-explore #shelf-heading {
	color: #ffffff;
	margin: 0 0 16px;
	letter-spacing: -0.02em;
	max-width: 620px;
	font: 400 clamp(2.3rem, 4vw, 4.2rem) / 1.04 'DM Serif Display', Georgia, serif;
}

.site-explore .shelf-lead {
	font-size: 15px;
	line-height: 1.55;
	color: #d2e4d7;
	max-width: 540px;
	margin: 0;
}

.site-explore .shelf-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-shrink: 0;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.site-explore .shelf-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #aee2b4;
	color: #0d3824 !important;
	font-weight: 700;
	font-size: 14.5px;
	padding: 13px 22px;
	border-radius: 3px;
	text-decoration: none !important;
	border: 1px solid #aee2b4;
	transition: background 0.2s ease;
}

.site-explore .shelf-primary:hover {
	background: #c3ebd0;
	color: #07271c !important;
}

.site-explore .shelf-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #ffffff !important;
	font-weight: 700;
	font-size: 14.5px;
	padding: 13px 22px;
	border-radius: 3px;
	text-decoration: none !important;
	border: 1px solid #5b8475;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.site-explore .shelf-secondary:hover {
	border-color: #aee2b4;
	background: rgba(174, 226, 180, 0.08);
	color: #ffffff !important;
}

.site-explore .directory-intro {
	border-top: 1px solid #476c5f;
	margin: 28px 0 16px;
	padding-top: 22px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.site-explore .directory-intro h3 {
	font-size: 17px;
	line-height: 1.25;
	color: #ffffff;
	margin: 0;
	font-weight: 700;
}

.site-explore .directory-intro p {
	font-size: 13.5px;
	color: #c6dec9;
	margin: 0;
}

@media (max-width: 900px) {
	.site-explore .shelf-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.site-explore .shelf-actions {
		width: 100%;
	}
}

/* ============================================================
   8. FINAL CALL TO ACTION BANNER (.final.seo-final)
   Source: 1:1 match with Supreme Technologies SEO CTA banner
   ============================================================ */
.final.seo-final {
	background: #e8c796;
	padding: 70px 0;
	text-align: center;
	color: #172d33;
	box-sizing: border-box;
}

.final.seo-final *,
.final.seo-final *::before,
.final.seo-final *::after {
	box-sizing: border-box;
}

.final.seo-final .wrap {
	width: min(100% - 52px, 1180px);
	max-width: 770px;
	margin: 0 auto;
}

/* Kicker / Eyebrow */
.final.seo-final .kicker {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #97603a;
}

/* Heading */
.final.seo-final h2 {
	font: 400 clamp(2.8rem, 4.8vw, 4.9rem)/1.07 'DM Serif Display', Georgia, serif;
	letter-spacing: -0.045em;
	color: #172d33;
	margin: 0 0 17px;
}

/* Lead text */
.final.seo-final p {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	line-height: 1.65;
	color: #172d33;
	margin: 0 auto 21px;
	max-width: 620px;
}

/* Action buttons container */
.final.seo-final .actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top: 26px;
}

/* Shared button styles */
.final.seo-final .button {
	min-height: 52px;
	padding: 13px 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 7px;
	border-radius: 4px;
	text-decoration: none !important;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	border: 1px solid transparent;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

/* Primary Dark Button (WhatsApp) */
.final.seo-final .button-dark {
	background: #172d33;
	color: #ffffff !important;
	border-color: #172d33;
}

.final.seo-final .button-dark:hover,
.final.seo-final .button-dark:focus {
	background: #304b52;
	border-color: #304b52;
	color: #ffffff !important;
}

/* Secondary Outline Button (Request Call) */
.final.seo-final .button-outline {
	background: transparent;
	border-color: #5b4c38;
	color: #213d31 !important;
}

.final.seo-final .button-outline:hover,
.final.seo-final .button-outline:focus {
	background: rgba(255, 255, 255, 0.4);
	color: #213d31 !important;
}

/* Focus States */
.final.seo-final .button:focus-visible {
	outline: 3px solid #172d33;
	outline-offset: 3px;
}

/* ============================================================
   Responsive (Mobile)
   ============================================================ */
@media (max-width: 600px) {
	.final.seo-final {
		padding: 55px 0;
	}

	.final.seo-final .actions {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		gap: 10px;
	}

	.final.seo-final .actions .button {
		width: 100%;
	}
}

/* ============================================================
   9. SEO CITIES DIRECTORY SECTION (.seo-cities)
   Source: 1:1 match with Supreme Technologies SEO city search
   ============================================================ */
.seo-section.seo-cities {
	background: #f7faf6;
	padding: 82px 0;
	box-sizing: border-box;
}

.seo-cities *,
.seo-cities *::before,
.seo-cities *::after {
	box-sizing: border-box;
}

.seo-cities .wrap {
	width: min(100% - 52px, 1180px);
	margin: 0 auto;
}

/* --- Section Head (Two-column layout) --- */
.seo-cities .section-head {
	display: grid;
	grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
	gap: 8vw;
	align-items: end;
	margin-bottom: 29px;
}

.seo-cities .kicker {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #97603a;
	margin: 0 0 12px;
}

.seo-cities .section-head h2 {
	letter-spacing: -0.044em;
	color: #172d30;
	overflow-wrap: break-word;
	font-size: 24px;
	margin: 20px 0px;
	font-family: 'DM Sans', Arial, sans-serif;
}

.seo-cities .section-head .lead {
	font-family: 'DM Sans', sans-serif;
	font-size: 17px;
	line-height: 1.68;
	color: #4b605d;
	margin: 0;
}

/* --- Search Input Bar --- */
.seo-city-search {
	max-width: 500px;
	background: #ffffff;
	border: 1px solid #bfcec1;
	padding: 11px 15px;
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 18px;
	transition: outline 0.15s ease;
}

.seo-city-search:focus-within {
	outline: 2px solid #2a7658;
}

.seo-city-search label {
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 800;
	color: #172d33;
	white-space: nowrap;
}

.seo-city-search input {
	border: 0;
	outline: 0;
	min-width: 0;
	flex: 1;
	padding: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	color: #1c4736;
	background: transparent;
}

.seo-city-search input::placeholder {
	color: #8da194;
}

/* --- Cities Hub Grid --- */
.seo-cities .hub-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.seo-cities .hub-list a {
	display: block;
	border: 1px solid #cad7ce;
	background: #ffffff;
	padding: 16px 18px;
	text-decoration: none !important;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: #172d33 !important;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.seo-cities .hub-list a:hover {
	background: #eaf3eb;
	border-color: #2b6760;
	color: #172d33 !important;
}

.seo-cities .hub-list a[hidden] {
	display: none !important;
}

/* --- City Count & Empty State --- */
.seo-city-count {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 750;
	color: #5a6c5f;
	margin-top: 14px;
}

.seo-city-empty {
	display: none;
	background: #ffffff;
	padding: 20px;
	border: 1px solid #c3d3c5;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	color: #39534a;
	margin: 15px 0 0;
}

.seo-city-empty.visible {
	display: block;
}

/* ============================================================
   Responsive Breakpoints
   ============================================================ */

/* Tablet (1050px) */
@media (max-width: 1050px) {
	.seo-cities .hub-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Small Tablet (750px) */
@media (max-width: 750px) {
	.seo-cities .section-head {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.seo-cities .hub-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile (600px) */
@media (max-width: 600px) {
	.seo-section.seo-cities {
		padding: 65px 0;
	}

	.seo-city-search {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.seo-cities .hub-list {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   10. SEO CONTACT & WHATSAPP MESSAGE BUILDER (.seo-contact)
   Source: 1:1 match with Supreme Technologies contact section
   ============================================================ */
.seo-section.seo-contact {
	background: #e3eee5;
	padding: 82px 0;
	box-sizing: border-box;
	color: #172d33;
}

.seo-contact *,
.seo-contact *::before,
.seo-contact *::after {
	box-sizing: border-box;
}

.seo-contact .wrap {
	width: min(100% - 52px, 1180px);
	margin: 0 auto;
}

/* Two-column Grid */
.seo-contact .contact-grid {
	display: grid;
	grid-template-columns: 1fr 0.94fr;
	gap: 6vw;
	align-items: start;
}

/* --- Left Column: Info & Steps --- */
.seo-contact .kicker {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #97603a;
	margin: 0 0 12px;
}

.seo-contact h2 {
	margin: 20px 0px;
	color: #172d33;
	overflow-wrap: break-word;
	font-size: 24px;
	font-family: 'DM Sans', Arial, sans-serif;
}

.seo-contact .intro {
	font-family: 'DM Sans', sans-serif;
	font-size: 17px;
	line-height: 1.68;
	color: #4b605d;
	margin: 20px 0 23px;
}

/* 3-Step Process List */
.seo-contact .contact-steps {
	list-style: none;
	padding: 0;
	margin: 0 0 23px;
}

.seo-contact .contact-steps li {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 10px;
	margin: 15px 0;
	color: #3d5650;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	line-height: 1.55;
}

.seo-contact .contact-steps b {
	color: #9b5d3e;
	font-size: 12px;
	font-weight: 800;
	padding-top: 3px;
}

.seo-contact .contact-steps strong {
	color: #17472e;
}

/* Request Call Primary Button */
.seo-contact .contact-btn-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 13px 22px;
	background: #172d33;
	color: #ffffff !important;
	border-radius: 4px;
	text-decoration: none !important;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	border: 1px solid #172d33;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.seo-contact .contact-btn-dark:hover {
	background: #304b52;
	border-color: #304b52;
}

/* --- Right Column: Interactive WhatsApp Message Builder Card --- */
.seo-contact .builder {
	background: #ffffff;
	border: 1px solid #c4d5ca;
	padding: 27px;
	box-shadow: 11px 12px 0 #c1d6c4;
	min-width: 0;
	border-radius: 2px;
}

.seo-contact .builder h3 {
	font: 400 29px/1.15 'DM Serif Display', Georgia, serif;
	color: #172d33;
	margin: 0 0 19px;
}

.seo-contact .builder label {
	display: block;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 800;
	color: #172d33;
	margin: 14px 0 6px;
}

.seo-contact .builder input,
.seo-contact .builder select,
.seo-contact .builder textarea {
	width: 100%;
	min-height: 45px;
	background: #fcfdfb;
	border: 1px solid #b8cac0;
	border-radius: 3px;
	padding: 9px 11px;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	color: #1c3430;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.seo-contact .builder input:focus,
.seo-contact .builder select:focus {
	border-color: #2a7658;
	outline: 2px solid #2a7658;
}

.seo-contact .builder input::placeholder {
	color: #8fa196;
}

/* Live WhatsApp Preview Message Bubble */
.seo-contact .builder .bubble {
	background: #edf3ee;
	border: 1px solid #d2dfd4;
	border-radius: 7px;
	padding: 15px;
	margin: 19px 0 9px;
	line-height: 1.5;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	color: #172d33;
	overflow-wrap: anywhere;
	min-height: 110px;
}

.seo-contact .builder small {
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	color: #64766e;
	display: block;
	margin-bottom: 2px;
}

/* WhatsApp Green Action Button */
.seo-contact .builder .btn-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 13px 19px;
	margin-top: 17px;
	background: #36d77d;
	color: #10271a !important;
	border-radius: 4px;
	text-decoration: none !important;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 800;
	border: 1px solid transparent;
	transition: background 0.2s ease, transform 0.15s ease;
}

.seo-contact .builder .btn-wa:hover {
	background: #75edaa;
}

/* ============================================================
   Responsive Breakpoints
   ============================================================ */

/* Tablet (750px) */
@media (max-width: 750px) {
	.seo-contact .contact-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* Mobile (600px) */
@media (max-width: 600px) {
	.seo-section.seo-contact {
		padding: 65px 0;
	}

	.seo-contact .builder {
		padding: 20px;
		box-shadow: 7px 8px 0 #c1d6c4;
	}
}

/* ============================================================
   11. SEO MEASUREMENT & METRICS SECTION (.seo-section.soft)
   Source: 1:1 match with Supreme Technologies measurement section
   ============================================================ */
.seo-section.soft {
	background: #e9f1e9;
	padding: 82px 0;
	box-sizing: border-box;
}

.seo-section.soft *,
.seo-section.soft *::before,
.seo-section.soft *::after {
	box-sizing: border-box;
}

.seo-section.soft .wrap {
	width: min(100% - 52px, 1180px);
	margin: 0 auto;
}

/* --- Section Header --- */
.seo-section.soft .seo-head {
	max-width: 790px;
	margin-bottom: 32px;
}

.seo-section.soft .seo-head .kicker {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 17px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #93613e;
	margin: 0 0 10px;
	display: block;
}

.seo-section.soft .seo-head h2 {
	font: 400 clamp(2.65rem, 4.7vw, 4.85rem)/1.09 'DM Serif Display', Georgia, serif;
	letter-spacing: -0.047em;
	margin: 0 0 16px;
	color: #172d33;
	overflow-wrap: break-word;
}

.seo-section.soft .seo-head p {
	font-family: 'DM Sans', sans-serif;
	color: #4b6358;
	font-size: 17px;
	line-height: 1.64;
	margin: 0;
}

/* --- 3-Column Metrics Grid --- */
.seo-section.soft .metric-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 11px;
}

.seo-section.soft .metric-row article {
	padding: 24px;
	border: 1px solid #d1dfd2;
	background: #ffffff;
}

.seo-section.soft .metric-row h3 {
	font: 400 26px/1.19 'DM Serif Display', Georgia, serif;
	color: #172d33;
	margin: 0 0 11px;
}

.seo-section.soft .metric-row p {
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	color: #4b6457;
	margin: 0;
	line-height: 1.61;
}

.seo-section.soft .metric-row small {
	display: block;
	margin-top: 13px;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	color: #326648;
	font-weight: 750;
}

/* --- Callout Box (Honest Expectations Notice) --- */
.seo-section.soft .seo-truth {
	margin-top: 19px;
	padding: 20px 24px;
	background: #f1e4d4;
	border-left: 4px solid #ba8856;
	color: #644c36;
	line-height: 1.57;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
}

.seo-section.soft .seo-truth strong {
	color: #45311f;
	font-weight: 700;
}

.seo-section.soft .seo-truth a {
	color: inherit;
	font-weight: 700;
	text-underline-offset: 3px;
	transition: color 0.15s ease;
}

.seo-section.soft .seo-truth a:hover {
	color: #172d33;
}

/* ============================================================
   Responsive Breakpoints
   ============================================================ */

/* Tablet (750px) */
@media (max-width: 750px) {
	.seo-section.soft .metric-row {
		grid-template-columns: 1fr;
	}
}

/* Mobile (600px) */
@media (max-width: 600px) {
	.seo-section.soft {
		padding: 65px 0;
	}

	.seo-section.soft .seo-head h2 {
		font-size: clamp(2.45rem, 9vw, 3.5rem);
	}

	.seo-section.soft .seo-head p {
		font-size: 16px;
	}

	.seo-section.soft .metric-row article {
		padding: 20px;
	}

	.seo-section.soft .seo-truth {
		padding: 16px 18px;
	}
}

/* ============================================================
   SEO Catalog & Work Accordion Section (.seo-catalog)
   ============================================================ */

.seo-section.seo-catalog {
	background: #152f33;
	color: #eef6ed;
	padding: 82px 0;
	box-sizing: border-box;
}

.seo-catalog *,
.seo-catalog *::before,
.seo-catalog *::after {
	box-sizing: border-box;
}

.seo-catalog .wrap {
	width: min(100% - 52px, 1180px);
	margin: 0 auto;
}

/* --- Section Header --- */
.seo-catalog .seo-head {
	max-width: 790px;
	margin-bottom: 32px;
}

.seo-catalog .kicker {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #ffcca2;
	margin: 0 0 10px;
	display: block;
}

.seo-catalog .seo-head h2 {
	font: 400 clamp(2.65rem, 4.7vw, 4.85rem)/1.09 'DM Serif Display', Georgia, serif;
	letter-spacing: -0.047em;
	margin: 0 0 16px;
	color: #ffffff;
	overflow-wrap: break-word;
}

.seo-catalog .seo-head p {
	font-family: 'DM Sans', sans-serif;
	color: #cddfd1;
	font-size: 17px;
	line-height: 1.64;
	margin: 0;
}

/* --- 3-Pillar Intro Cards --- */
.seo-catalog .catalog-intro {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 27px;
}

.seo-catalog .catalog-intro article {
	border: 1px solid #5e8475;
	padding: 21px;
	background: #1d3b3d;
}

.seo-catalog .catalog-intro strong {
	font: 400 25px/1.18 'DM Serif Display', Georgia, serif;
	color: #ffffff;
	display: block;
	margin-bottom: 8px;
}

.seo-catalog .catalog-intro p {
	margin: 0;
	color: #cedfd3;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	line-height: 1.55;
}

/* --- Interactive Accordion List --- */
.seo-catalog .catalog {
	display: grid;
	gap: 9px;
}

.seo-catalog .catalog details {
	border: 1px solid #648678;
	background: #1c393a;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.seo-catalog .catalog details[open] {
	border-color: #79a18f;
	background: #1d3e3f;
}

.seo-catalog .catalog summary {
	cursor: pointer;
	padding: 19px 22px;
	display: flex;
	gap: 14px;
	justify-content: space-between;
	align-items: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 20px;
	font-weight: 760;
	line-height: 1.3;
	color: #ffffff;
	user-select: none;
	list-style: none;
}

.seo-catalog .catalog summary::-webkit-details-marker {
	display: none;
}

.seo-catalog .catalog summary .more {
	font-size: 25px;
	color: #bedec1;
	line-height: 1;
	display: inline-block;
	transition: transform 0.2s ease;
}

.seo-catalog .catalog details[open] summary .more {
	transform: rotate(45deg);
}

/* Accordion Opened Drawer Contents */
.seo-catalog .catalog .contents {
	border-top: 1px solid #668977;
	padding: 17px 22px 21px;
	display: grid;
	grid-template-columns: 0.4fr 0.6fr;
	gap: 30px;
}

.seo-catalog .catalog .contents p {
	margin: 0;
	color: #d7e6d8;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	line-height: 1.6;
}

.seo-catalog .catalog .contents ul {
	margin: 0;
	padding-left: 21px;
	columns: 2;
	column-gap: 26px;
}

.seo-catalog .catalog .contents li {
	break-inside: avoid;
	margin-bottom: 10px;
	line-height: 1.5;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	color: #f2f7ee;
}

/* --- Catalog Bottom Footer --- */
.seo-catalog .catalog-foot {
	margin: 24px 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.seo-catalog .catalog-foot p {
	margin: 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: #d8e8d9;
	max-width: 730px;
}

.seo-catalog .catalog-foot p strong {
	color: #ffffff;
}

.seo-catalog .catalog-foot a:not(.btn) {
	color: #ffffff;
	text-underline-offset: 4px;
	font-weight: 700;
}

.seo-catalog .catalog-foot .btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 13px 22px;
	background: #36d77d;
	color: #10271a !important;
	border-radius: 4px;
	text-decoration: none !important;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 800;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background 0.2s ease, transform 0.15s ease;
}

.seo-catalog .catalog-foot .btn:hover {
	background: #75edaa;
}

/* ============================================================
   Responsive Breakpoints
   ============================================================ */

/* Tablet (750px) */
@media (max-width: 750px) {
	.seo-catalog .catalog-intro {
		grid-template-columns: 1fr;
	}

	.seo-catalog .catalog .contents {
		grid-template-columns: 1fr;
		gap: 13px;
	}
}

/* Mobile (600px) */
@media (max-width: 600px) {
	.seo-section.seo-catalog {
		padding: 65px 0;
	}

	.seo-catalog .catalog summary {
		font-size: 17px;
		padding: 16px;
	}

	.seo-catalog .catalog .contents {
		padding: 16px;
	}

	.seo-catalog .catalog .contents ul {
		columns: 1;
	}

	.seo-catalog .catalog-foot {
		align-items: flex-start;
		flex-direction: column;
	}

	.seo-catalog .catalog-foot .btn {
		width: 100%;
	}
}

/* ============================================================
   Team Reviews / Client Feedback (.team-reviews)
   ============================================================ */

.team-reviews {
	background: #f7f6ef;
	padding: 82px 0;
	box-sizing: border-box;
}

.team-reviews *,
.team-reviews *::before,
.team-reviews *::after {
	box-sizing: border-box;
}

.team-reviews .team-review-wrap {
	width: min(100% - 52px, 1180px);
	margin: 0 auto;
}

/* --- Kicker (Orange Badge) --- */
.team-reviews .team-review-kicker {
	display: inline-block;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	padding: 3px 8px;
	line-height: 1.3;
	font-size: 12px;
	letter-spacing: .11em;
	text-transform: uppercase;
	font-weight: 700;
	color: #46635b;
	margin: 0 0 12px;
}

/* --- Heading & Lead --- */
.team-reviews h2 {
	color: #173d33;
	overflow-wrap: break-word;
	font: 400 clamp(1.8rem, 3vw, 2.65rem) / 1.18 Georgia, serif;
	letter-spacing: -.025em;
	margin: 0 0 18px;
	max-width: 800px;
}

.team-reviews .team-review-lead {
	font-family: 'DM Sans', sans-serif;
	color: #4b6358;
	font-size: 17px;
	line-height: 1.64;
	margin: 0 0 36px;
	max-width: 780px;
}

/* --- Reviews Grid --- */
.team-reviews .team-review-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

/* --- Review Card Figure --- */
.team-reviews .team-review-card {
	background: #ffffff;
	border: 1px solid #c7dcd0;
	border-top: 4px solid #336e52;
	padding: 28px 24px 22px;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.team-reviews .team-review-card blockquote {
	margin: 0 0 24px;
	padding: 0;
}

.team-reviews .team-review-card blockquote p {
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: #203e33;
	margin: 0;
}

/* --- Author & Citation (Figcaption) --- */
.team-reviews .team-review-card figcaption {
	border-top: 1px solid #e2ebe4;
	padding-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.team-reviews .team-review-card cite {
	font-style: normal;
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #172d33;
	display: block;
}

.team-reviews .team-review-card span {
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	color: #5f776c;
	display: block;
	line-height: 1.4;
}

/* --- Expandable Details ("Read more client reviews") --- */
.team-reviews .team-review-more {
	margin-top: 24px;
}

.team-reviews .team-review-more summary {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #172d33;
	cursor: pointer;
	user-select: none;
	margin-bottom: 20px;
	display: list-item;
	list-style-type: disclosure-closed;
}

.team-reviews .team-review-more[open] summary {
	list-style-type: disclosure-open;
}

.team-reviews .team-review-more .team-review-grid {
	margin-top: 16px;
}

/* --- Agency Profile Source Link --- */
.team-reviews .team-review-source {
	display: inline-block;
	margin-top: 28px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #1f7050;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.15s ease;
}

.team-reviews .team-review-source:hover {
	color: #172d33;
}

/* ============================================================
   Responsive Breakpoints
   ============================================================ */

/* Tablet (900px) */
@media (max-width: 900px) {
	.team-reviews .team-review-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile (650px) */
@media (max-width: 650px) {
	.team-reviews {
		padding: 65px 0;
	}

	.team-reviews h2 {
		font-size: clamp(2.45rem, 9vw, 3.5rem);
	}

	.team-reviews .team-review-grid {
		grid-template-columns: 1fr;
	}

	.team-reviews .team-review-card {
		padding: 22px 18px;
	}
}

/* ============================================================
   SEO Business Search Examples & Interactive Preview (.seo-selector)
   ============================================================ */

/* --- Layout Grid (Tabs + Preview Card) --- */
.seo-selector {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 12px;
}

/* --- Left Column: Vertical Business Category Tabs --- */
.seo-tabs {
	display: grid;
	align-content: start;
	gap: 8px;
}

.seo-tabs button {
	text-align: left;
	border: 1px solid #c2d5c8;
	background: #ffffff;
	color: #214238;
	padding: 14px 16px;
	border-radius: 3px;
	cursor: pointer;
	font-family: 'DM Sans', sans-serif;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.seo-tabs button strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: #172d33;
}

.seo-tabs button small {
	display: block;
	font-size: 12px;
	color: #587265;
	margin-top: 4px;
	line-height: 1.5;
}

.seo-tabs button:hover {
	border-color: #2d7153;
}

.seo-tabs button[aria-pressed="true"] {
	background: #dceee1;
	border-color: #2d7153;
	box-shadow: inset 4px 0 0 #2d7153;
}

/* --- Right Column: Interactive Search & Strategy Preview Box --- */
.seo-preview {
	background: #ffffff;
	border: 1px solid #c4d6c9;
	padding: 29px;
	min-width: 0;
}

.seo-preview .label {
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #91613e;
	font-weight: 800;
	display: block;
}

.seo-preview h3 {
	font: 400 clamp(2rem, 3vw, 2.9rem)/1.13 'DM Serif Display', Georgia, serif;
	letter-spacing: -0.035em;
	margin: 11px 0 17px;
	color: #172d33;
}

/* Search Term Badge (Query Chip) */
.query-chip {
	border: 1px solid #bacfc2;
	border-radius: 30px;
	background: #f5f8f5;
	padding: 10px 16px;
	display: flex;
	gap: 11px;
	align-items: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	color: #245041;
	overflow-wrap: anywhere;
}

.query-chip::before {
	content: '⌕';
	font-size: 26px;
	line-height: 1;
	color: #387b5b;
}

/* --- Before vs After 2-Column Comparison Cards --- */
.seo-pageplan {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 17px 0;
}

.seo-pageplan article {
	border: 1px solid #d7e1d7;
	padding: 18px;
	min-width: 0;
}

/* Left Card: Where buyer gets stuck */
.seo-pageplan article:first-child {
	background: #f9f6f0;
}

.seo-pageplan article:first-child b {
	font-family: 'DM Sans', sans-serif;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #9c6742;
	display: block;
}

.seo-pageplan article:first-child p {
	margin: 10px 0 0;
	line-height: 1.54;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	color: #4e6255;
}

/* Right Card: What we would build or fix (Dark Green) */
.seo-pageplan article:last-child {
	background: #1c403c;
	color: #f6fbf3;
	border-color: #1c403c;
}

.seo-pageplan article:last-child b {
	font-family: 'DM Sans', sans-serif;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #bce1c2;
	display: block;
}

.seo-pageplan article:last-child p {
	margin: 10px 0 0;
	line-height: 1.54;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	color: #e0eee3;
}

/* --- Outcome Note --- */
.seo-preview .outcome {
	border-top: 1px solid #d2e0d4;
	margin: 17px 0 0;
	padding-top: 14px;
	line-height: 1.6;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	color: #355248;
}

.seo-preview .outcome strong {
	color: #184736;
}

/* --- Action Button --- */
.seo-preview .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 13px 22px;
	margin-top: 16px;
	background: #172d33;
	color: #ffffff !important;
	border-radius: 4px;
	text-decoration: none !important;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 800;
	border: 1px solid #172d33;
	transition: background 0.2s ease;
}

.seo-preview .btn:hover {
	background: #304b52;
	border-color: #304b52;
}

/* --- Footnote Disclaimer --- */
.seo-preview .note {
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	color: #5c7165;
	margin: 12px 0 0;
	line-height: 1.5;
}

/* ============================================================
   Responsive Breakpoints for .seo-selector
   ============================================================ */

/* Tablet (750px) */
@media (max-width: 750px) {
	.seo-selector {
		grid-template-columns: 1fr;
	}

	.seo-tabs {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile (600px) */
@media (max-width: 600px) {
	.seo-tabs {
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}

	.seo-tabs button {
		padding: 11px;
	}

	.seo-tabs button strong {
		font-size: 14px;
	}

	.seo-preview {
		padding: 20px;
	}

	.seo-pageplan {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   SEO Main - FAQ Accordion Section (.seo-faq / .seo-faq-grid)
   ========================================================================== */
.seo-section.seo-faq,
.seo-faq {
	background: #fff;
	padding: 82px 0;
	position: relative;
	box-sizing: border-box;
}

.seo-faq .wrap.seo-faq-grid,
.seo-faq-grid {
	width: min(100% - 52px, 1180px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: .4fr .6fr;
	gap: 6vw;
	align-items: start;
	box-sizing: border-box;
}

/* Left Column: Kicker & Section Heading */
.seo-faq .kicker {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #97603a;
	margin: 0 0 12px;
	font-family: 'DM Sans', Arial, sans-serif;
	display: inline-block;
}

.seo-faq h2,
.seo-section.seo-faq h2 {
	font: 400 clamp(2.55rem, 4.4vw, 4.5rem)/1.1 'DM Serif Display', Georgia, serif;
	letter-spacing: -.044em;
	margin: 0;
	color: #172d33;
	overflow-wrap: break-word;
}

/* Accordion / Details & Summary */
.seo-faq-list details,
.seo-faq .seo-faq-list details {
	border-top: 1px solid #c4d6c9;
	padding: 15px 0;
}

.seo-faq-list details:last-child,
.seo-faq .seo-faq-list details:last-child {
	border-bottom: 1px solid #c4d6c9;
}

.seo-faq-list summary,
.seo-faq .seo-faq-list summary {
	font-size: 17px;
	font-weight: 750;
	cursor: pointer;
	color: #172d33;
	font-family: 'DM Sans', Arial, sans-serif;
	line-height: 1.4;
	list-style: disclosure-closed inside;
}

.seo-faq-list details[open] > summary,
.seo-faq .seo-faq-list details[open] > summary {
	list-style: disclosure-open inside;
}

.seo-faq-list summary::marker,
.seo-faq .seo-faq-list summary::marker {
	color: #172d33;
	font-size: 11px;
}

.seo-faq-list details p,
.seo-faq .seo-faq-list details p {
	color: #52635d;
	line-height: 1.65;
	margin: 9px 0 7px;
	font-size: 15px;
	font-family: 'DM Sans', Arial, sans-serif;
}

.seo-faq-list summary:focus-visible,
.seo-faq .seo-faq-list summary:focus-visible {
	outline: 3px solid #a85817;
	outline-offset: 3px;
}

/* Responsive Breakpoints */
@media (max-width: 750px) {
	.seo-faq .wrap.seo-faq-grid,
	.seo-faq-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 600px) {
	.seo-section.seo-faq,
	.seo-faq {
		padding: 63px 0;
	}

	.seo-faq .wrap.seo-faq-grid,
	.seo-faq-grid {
		width: min(100% - 34px, 1180px);
	}
}