/**
 * Custom theme CSS overrides and semantic component styles.
 *
 * This file is intentionally plain CSS (no Tailwind/PostCSS build required).
 */

:root {
	--site-content-max: 72rem;
	--site-content-wide: 90rem;
	/* --color-brand is not defined anywhere, so these silently fell back to the
	   pre-accessibility copper (#8e5725 = 3.59:1 on white). Point them at the
	   real token; every link using --link-color inherits the fix. */
	--link-color: var(--color-primary, #8e5725);
	--link-color-hover: #6f4320;
	--link-on-strong: #ffffff;
	--link-on-strong-hover: #f4ece8;
	/* Off-white surface used for section backgrounds and breadcrumb bar */
	--color-surface: #f8f9fb;
}

/* Front-page runtime fallback for missing utility classes in production CSS. */
body.home .bg-\[\#111111\] { background-color: #111111; }
body.home .bg-primary\/15 { background-color: rgba(142, 87, 37, 0.15); }
body.home .bg-primary\/8 { background-color: rgba(142, 87, 37, 0.08); }
body.home .bg-primary\/80 { background-color: rgba(142, 87, 37, 0.8); }
body.home .blur-2xl { filter: blur(40px); }
body.home .border-primary\/20 { border-color: rgba(142, 87, 37, 0.2); }
body.home .border-primary\/40 { border-color: rgba(142, 87, 37, 0.4); }
body.home .border-white\/40 { border-color: rgba(255, 255, 255, 0.4); }
body.home .border-white\/8 { border-color: rgba(255, 255, 255, 0.08); }
body.home .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-top: 1px solid #f3f4f6; }
/* :not(h1) — the hero title is an h1 and must follow the heading scale (800).
   font-black on it produced the site's only 900-weight heading. */
body.home .font-black:not(h1):not(h2) { font-weight: 900; }
/* Section titles use the SITEWIDE h2 scale. They previously ran their own
   larger clamp, so homepage section headings rendered at 40px while every
   other page rendered 34px — the same element at two sizes depending on
   which page you were on. */
body.home .fp-section-title { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.018em; }
body.home .from-black\/75 { --tw-gradient-from: rgba(0, 0, 0, 0.75); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); }
body.home .via-black\/10 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0, 0, 0, 0.1), var(--tw-gradient-to, rgba(0, 0, 0, 0)); }
body.home .gap-0\.5 { gap: 0.125rem; }
body.home .gap-1\.5 { gap: 0.375rem; }
body.home .gap-2\.5 { gap: 0.625rem; }
body.home .gap-5 { gap: 1.25rem; }
body.home .gap-x-8 { column-gap: 2rem; }
body.home .h-1\.5 { height: 0.375rem; }
body.home .h-80 { height: 20rem; }
body.home .h-\[3px\] { height: 3px; }
body.home .h-\[520px\] { height: 520px; }
body.home .h-\[600px\] { height: 600px; }
body.home .leading-none { line-height: 1; }
body.home .leading-snug { line-height: 1.375; }
body.home .mb-0\.5 { margin-bottom: 0.125rem; }
body.home .mb-14 { margin-bottom: 3.5rem; }
body.home .mt-5 { margin-top: 1.25rem; }
body.home .opacity-0 { opacity: 0; }
body.home .pb-0 { padding-bottom: 0; }
body.home .pt-20 { padding-top: 5rem; }
body.home .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
body.home .px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
body.home .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
body.home .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
body.home .right-2 { right: 0.5rem; }
body.home .left-2 { left: 0.5rem; }
body.home .top-6 { top: 1.5rem; }
body.home .left-6 { left: 1.5rem; }
body.home .shadow-black\/30 { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
body.home .shadow-black\/40 { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4); }
body.home .shadow-primary\/20 { box-shadow: 0 10px 30px rgba(142, 87, 37, 0.2); }
body.home .shadow-primary\/30 { box-shadow: 0 10px 30px rgba(142, 87, 37, 0.3); }
body.home .text-gray-100 { color: #f3f4f6; }
body.home .text-gray-200 { color: #e5e7eb; }
body.home .text-gray-800 { color: #1f2937; }
body.home .text-white\/70 { color: rgba(255, 255, 255, 0.7); }
body.home .text-yellow-500 { color: #eab308; }
body.home .tracking-widest { letter-spacing: 0.1em; }
body.home .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
body.home .w-1\.5 { width: 0.375rem; }
body.home .w-44 { width: 11rem; }
body.home .w-\[600px\] { width: 600px; }

body.home .hover\:bg-brand-700:hover { background-color: #74461e; }
body.home .hover\:bg-primary\/10:hover { background-color: rgba(142, 87, 37, 0.1); }
body.home .hover\:bg-primary\/5:hover { background-color: rgba(142, 87, 37, 0.05); }
body.home .hover\:bg-white\/8:hover { background-color: rgba(255, 255, 255, 0.08); }
body.home .hover\:border-primary\/30:hover { border-color: rgba(142, 87, 37, 0.3); }
body.home .hover\:text-brand-700:hover { color: #74461e; }
body.home .hover\:text-primary:hover { color: #8e5725; }

body.home .focus\:ring-primary:focus { box-shadow: 0 0 0 2px #8e5725; }
body.home .focus\:ring-white\/30:focus { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); }
body.home .focus\:ring-offset-gray-950:focus { outline-offset: 2px; }

body.home .group:hover .group-hover\:opacity-100 { opacity: 1; }
body.home .group:hover .group-hover\:text-primary { color: #8e5725; }
body.home .group:hover .group-hover\:bg-primary\/20 { background-color: rgba(142, 87, 37, 0.2); }

body.home .first\:pt-0:first-child { padding-top: 0; }
body.home .last\:pb-0:last-child { padding-bottom: 0; }

@media (min-width: 640px) {
	body.home .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body.home .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	body.home .sm\:justify-between { justify-content: space-between; }
	body.home .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
	body.home .sm\:text-6xl { font-size: 3.75rem; line-height: 1; }
	body.home .sm\:w-auto { width: auto; }
}

@media (min-width: 768px) {
	body.home .md\:h-96 { height: 24rem; }
	body.home .md\:justify-end { justify-content: flex-end; }
	body.home .md\:p-10 { padding: 2.5rem; }
}

@media (min-width: 1024px) {
	body.home .lg\:gap-16 { gap: 4rem; }
	body.home .lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
}

body.home .eyebrow-badge,
body.home .eyebrow-badge-dark {
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius-full, 9999px);
	padding: 0.35rem 0.75rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.home .eyebrow-badge {
	background-color: rgba(142, 87, 37, 0.12);
	/* Was #7d4c20 — only 3.36:1 on the resolved cream background. #633c1a gives 4.94:1. */
	color: #633c1a;
}

body.home .eyebrow-badge-dark {
	background-color: rgba(255, 255, 255, 0.08);
	color: #f1f5f9;
}

/* Front-page guardrail: prevent accidental production-only page scaling. */
html,
body {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body.home,
body.home #page,
body.home main,
body.home .site-main,
body.blog,
body.blog #page,
body.blog main,
body.blog .site-main {
	zoom: 1 !important;
	transform: none !important;
	transform-origin: top center !important;
}

/* Front-page edge trim: remove tiny top/bottom visual gaps. */
body.home .header-wrapper,
body.blog .header-wrapper,
body.home #content,
body.blog #content,
body.home .site-main,
body.blog .site-main,
body.home footer,
body.blog footer {
	margin-top: 0 !important;
	padding-top: 0 !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

body.home .site-main > *:first-child,
body.blog .site-main > *:first-child {
	margin-top: 0;
}

body.home .site-main > *:last-child,
body.blog .site-main > *:last-child {
	margin-bottom: 0;
}

/* Shared semantic layout hooks */
.site-header,
.site-footer,
.site-main,
.tpl-front-page,
.tpl-home,
.tpl-category,
.tpl-services,
.tpl-about,
.tpl-faq,
.tpl-testimonials,
.tpl-maintenance-guide,
.tpl-plumbing-glossary,
.tpl-useful-downloads,
.tpl-video-tutorials,
.tpl-shorts,
.tpl-financing,
.tpl-service-areas,
.tpl-privacy-policy,
.tpl-roi-septic-reminders,
.tpl-roi-status-tracker,
.tpl-roi-live-availability,
.tpl-landing-contact-priority,
.tpl-landing-engineered-septic,
.tpl-landing-failed-septic,
.tpl-landing-water-main-sewer,
.tpl-landing-core-plumbing,
.tpl-landing-emergency,
.tpl-landing,
.tpl-landing-hero,
.tpl-landing-content {
	/* Semantic anchors for future utility-class removals. */
}

/* Landing / marketing: media and embeds never wider than the viewport */
.tpl-landing img,
.tpl-landing video,
.wades-unified-landing-article img,
.wades-unified-landing-article video {
	max-width: 100%;
	height: auto;
}

.tpl-landing .entry-content iframe,
.wades-unified-landing-article .entry-content iframe {
	max-width: 100%;
}

/* Keep content links legible on light backgrounds. */
.site-main a:not(.button):not(.wp-block-button__link):not([class*="btn"]):not([class*="text-"]):not([class*="hover:text-"]),
.entry-content a:not(.button):not(.wp-block-button__link):not([class*="btn"]):not([class*="text-"]):not([class*="hover:text-"]) {
	color: var(--link-color);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.site-main a:not(.button):not(.wp-block-button__link):not([class*="btn"]):not([class*="text-"]):not([class*="hover:text-"]):hover,
.site-main a:not(.button):not(.wp-block-button__link):not([class*="btn"]):not([class*="text-"]):not([class*="hover:text-"]):focus,
.entry-content a:not(.button):not(.wp-block-button__link):not([class*="btn"]):not([class*="text-"]):not([class*="hover:text-"]):hover,
.entry-content a:not(.button):not(.wp-block-button__link):not([class*="btn"]):not([class*="text-"]):not([class*="hover:text-"]):focus {
	color: var(--link-color-hover);
}

/* Ensure links remain readable inside strong-color surfaces. */
.site-main :is(.bg-primary, .bg-nav, .bg-black, .text-white) a:not(.button):not(.wp-block-button__link):not([class*="btn"]):not([class*="text-"]),
.entry-content :is(.bg-primary, .bg-nav, .bg-black, .text-white) a:not(.button):not(.wp-block-button__link):not([class*="btn"]):not([class*="text-"]) {
	color: var(--link-on-strong);
}

.site-main :is(.bg-primary, .bg-nav, .bg-black, .text-white) a:not(.button):not(.wp-block-button__link):not([class*="btn"]):not([class*="text-"]):hover,
.site-main :is(.bg-primary, .bg-nav, .bg-black, .text-white) a:not(.button):not(.wp-block-button__link):not([class*="btn"]):not([class*="text-"]):focus,
.entry-content :is(.bg-primary, .bg-nav, .bg-black, .text-white) a:not(.button):not(.wp-block-button__link):not([class*="btn"]):not([class*="text-"]):hover,
.entry-content :is(.bg-primary, .bg-nav, .bg-black, .text-white) a:not(.button):not(.wp-block-button__link):not([class*="btn"]):not([class*="text-"]):focus {
	color: var(--link-on-strong-hover);
}

/* Prevent white-on-white hover regressions in light sections. */
.site-main :is(.bg-white, .bg-accent, .bg-gray-50) a[class*="hover:text-white"]:hover,
.site-main :is(.bg-white, .bg-accent, .bg-gray-50) a[class*="hover:text-white"]:focus,
.entry-content :is(.bg-white, .bg-accent, .bg-gray-50) a[class*="hover:text-white"]:hover,
.entry-content :is(.bg-white, .bg-accent, .bg-gray-50) a[class*="hover:text-white"]:focus {
	color: var(--link-color-hover);
}

.wade-container {
	max-width: 82rem;
}

.wade-honeypot {
	position: absolute;
	left: -9999px;
	opacity: 0;
	visibility: hidden;
}

.wade-dot-bg-brand-28 {
	background-image: radial-gradient(circle, #8e5725 1px, transparent 1px);
	background-size: 28px 28px;
}

.wade-dot-bg-brand-26 {
	background-image: radial-gradient(circle, #8e5725 1px, transparent 1px);
	background-size: 26px 26px;
}

.wade-dot-bg-black-24 {
	background-image: radial-gradient(circle, #000 1px, transparent 1px);
	background-size: 24px 24px;
}

.wade-dot-bg-white-24 {
	background-image: radial-gradient(circle, #fff 1px, transparent 1px);
	background-size: 24px 24px;
}

.wade-dot-bg-brand-var-28 {
	background-image: radial-gradient(circle, var(--brand) 1px, transparent 1px);
	background-size: 28px 28px;
}

.mega-menu--locations {
	width: 260px;
}

.mega-menu--about {
	width: 240px;
}

.mega-menu-panel {
	border: 1px solid rgba(0, 0, 0, 0.08);
}

/* =============================================================
   Field Shorts — Instagram-style dark feed
   ============================================================= */

/* 1. Chrome reset for this template */
body.page-template-template-shorts,
body.page-template-template-shorts #page,
body.page-template-template-shorts .site-main {
	background: #000000 !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.page-template-template-shorts footer,
body.page-template-template-shorts .site-footer,
body.page-template-template-shorts .site-header,
body.page-template-template-shorts .header-wrapper,
body.page-template-template-shorts #wpadminbar ~ #page > header {
	display: none !important;
}

body.wps-modal-open {
	overflow: hidden;
}

/* 2. Page shell: sidebar rail + scrollable feed */
.wps-shorts-page {
	display: flex;
	min-height: 100dvh;
	background: #000000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 3. Left icon rail — matches Instagram desktop sidebar */
.wps-rail {
	position: fixed;
	top: 0;
	left: 0;
	height: 100dvh;
	width: 72px;
	border-right: 1px solid #262626;
	background: #000000;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 0 16px;
	gap: 4px;
	z-index: 100;
	overflow: hidden;
}

.wps-rail__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	color: #ffffff;
	text-decoration: none;
	border-radius: 50%;
	overflow: hidden;
	background: #111111;
	flex-shrink: 0;
}

.wps-rail__logo-img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.wps-rail__logo svg {
	width: 28px;
	height: 28px;
	fill: #ffffff;
}

.wps-rail__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px 0;
	gap: 4px;
	color: #a8a8a8;
	text-decoration: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color 0.15s ease;
}

.wps-rail__item svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.wps-rail__item span {
	font-size: 0.58rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-align: center;
}

.wps-rail__item.is-active {
	color: #ffffff;
}

.wps-rail__item:hover,
.wps-rail__item:focus {
	color: #ffffff;
}

.wps-rail__item--bottom {
	margin-top: auto;
}

/* 4. Feed area — offset for the fixed rail */
.wps-feed-area {
	flex: 1;
	min-width: 0;
	margin-left: 72px; /* matches fixed rail width */
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 32px;
	padding-bottom: 64px;
}

/* Mobile top bar — hidden on desktop, shown via media query */
.wps-mobile-bar {
	display: none;
	height: 56px;
	width: 100%;
	max-width: 540px;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	background: rgba(0, 0, 0, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid #262626;
}

.wps-mobile-bar__back,
.wps-mobile-bar__call {
	color: #ffffff;
	text-decoration: none;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wps-mobile-bar__back svg,
.wps-mobile-bar__call svg {
	width: 22px;
	height: 22px;
}

.wps-mobile-bar__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.wps-mobile-bar__logo-img {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.wps-mobile-bar__title {
	font-size: 1rem;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: -0.01em;
}

/* Search bar */
.wps-search-bar {
	width: 100%;
	max-width: 540px;
	padding: 10px 16px;
	background: #000000;
	border-bottom: 1px solid #262626;
}

.wps-search-bar__input {
	width: 100%;
	padding: 9px 14px;
	background: #1a1a1a;
	border: 1px solid #363636;
	border-radius: var(--radius);
	color: #f5f5f5;
	font-size: 0.9rem;
	outline: none;
}

.wps-search-bar__input::placeholder {
	color: #737373;
}

.wps-search-bar__input:focus {
	border-color: #555555;
}

/* 5. Feed */
.wps-feed {
	width: 100%;
	max-width: 480px;
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* 6. Post */
.wps-post {
	width: 100%;
	margin-bottom: 40px;
}

.wps-post:last-child {
	margin-bottom: 0;
}

/* Post header */
.wps-post__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 4px 10px;
}

.wps-post__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.7rem;
	color: #ffffff;
	border: 2px solid #333333;
}

.wps-post__meta {
	display: flex;
	align-items: center;
	gap: 5px;
	flex: 1;
	min-width: 0;
}

.wps-post__username {
	font-size: 0.82rem;
	font-weight: 600;
	color: #f5f5f5;
	white-space: nowrap;
}

.wps-post__dot {
	color: #737373;
	font-size: 0.75rem;
}

.wps-post__time {
	font-size: 0.78rem;
	color: #737373;
	white-space: nowrap;
}

.wps-post__follow {
	font-size: 0.82rem;
	font-weight: 600;
	color: #0095f6;
	text-decoration: none;
	white-space: nowrap;
	padding: 0 4px;
}

.wps-post__follow:hover {
	color: #1877f2;
}

.wps-post__more {
	background: transparent;
	border: 0;
	color: #f5f5f5;
	padding: 0 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.wps-post__more svg {
	width: 20px;
	height: 20px;
}

/* Location tag */
.wps-post__location-tag {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 4px 8px;
	font-size: 0.72rem;
	color: #a8a8a8;
	margin: 0;
}

.wps-post__location-tag svg {
	width: 11px;
	height: 11px;
	fill: #a8a8a8;
	flex-shrink: 0;
}

/* Media */
.wps-post__media-wrap {
	width: 100%;
	display: block;
	position: relative;
	background: #111111;
	cursor: pointer;
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.wps-post__media-wrap:focus-visible {
	outline: 2px solid #0095f6;
	outline-offset: 2px;
}

.wps-post__media {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	border-radius: var(--radius-lg);
}

.wps-post__play-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.25);
	transition: opacity 0.2s;
}

.wps-post__play-icon svg {
	width: 56px;
	height: 56px;
	fill: rgba(255, 255, 255, 0.9);
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.wps-post__media-wrap:hover .wps-post__play-icon,
.wps-post__media-wrap:focus .wps-post__play-icon {
	opacity: 0.7;
}

/* Post footer */
.wps-post__footer {
	padding: 12px 4px 0;
}

.wps-post__caption {
	font-size: 0.85rem;
	line-height: 1.55;
	color: #f5f5f5;
	margin: 0 0 4px;
}

.wps-post__caption-user {
	font-weight: 700;
	margin-right: 6px;
}

.wps-post__caption-text {
	color: #dbdbdb;
}

.wps-post__tags {
	font-size: 0.82rem;
	color: #0095f6;
	margin: 4px 0 10px;
}

.wps-post__ctas {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.wps-post__cta-primary {
	display: inline-flex;
	align-items: center;
	font-size: 0.78rem;
	font-weight: 600;
	color: #f5f5f5;
	text-decoration: none;
	background: #1a1a1a;
	border: 1px solid #363636;
	padding: 6px 12px;
	border-radius: var(--radius);
	transition: background 0.15s;
}

.wps-post__cta-primary:hover {
	background: #262626;
	color: #ffffff;
}

.wps-post__cta-link {
	display: inline-flex;
	align-items: center;
	font-size: 0.78rem;
	color: #0095f6;
	text-decoration: none;
}

.wps-post__cta-link:hover {
	text-decoration: underline;
}

.wps-post__timestamp {
	font-size: 0.68rem;
	color: #737373;
	letter-spacing: 0.04em;
	margin: 0;
}

/* 7. Load more */
.wps-load-sentinel {
	height: 4px;
	width: 100%;
}

.wps-load-status {
	font-size: 0.78rem;
	color: #737373;
	text-align: center;
	padding: 16px;
	width: 100%;
	max-width: 540px;
}

/* 8. Modal */
.wps-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
}

.wps-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.wps-modal__panel {
	position: relative;
	z-index: 1;
	width: min(96vw, 480px);
	max-height: 92dvh;
	overflow-y: auto;
	background: #1a1a1a;
	border: 1px solid #363636;
	border-radius: var(--radius);
}

.wps-modal__close {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 2;
	background: rgba(0, 0, 0, 0.55);
	border: 0;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	cursor: pointer;
}

.wps-modal__close svg {
	width: 16px;
	height: 16px;
}

.wps-modal__media {
	background: #000000;
}

.wps-modal__media img,
.wps-modal__media video {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	border-radius: var(--radius) var(--radius) 0 0;
}

.wps-modal__body {
	padding: 14px 16px 16px;
}

.wps-modal__city {
	font-size: 0.74rem;
	color: #a8a8a8;
	margin: 0;
}

.wps-modal__title {
	font-size: 1rem;
	font-weight: 700;
	color: #f5f5f5;
	margin: 6px 0 6px;
}

.wps-modal__caption {
	font-size: 0.85rem;
	color: #dbdbdb;
	line-height: 1.55;
	margin: 0;
}

/* 9. Responsive */
@media (max-width: 768px) {
	/* Hide fixed desktop rail on mobile */
	.wps-rail {
		display: none;
	}

	/* Show mobile top bar */
	.wps-mobile-bar {
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		max-width: 100%;
	}

	/* Reset feed area margin (no sidebar) and add padding for top bar + bottom safe area */
	.wps-feed-area {
		margin-left: 0;
		padding-top: 56px;  /* matches .wps-mobile-bar height */
		padding-bottom: calc(24px + env(safe-area-inset-bottom));
	}

	/* Allow feed to fill the full width on mobile */
	.wps-feed {
		max-width: 100%;
		padding: 0 12px;
	}
}

/* Prevent link override bleeding into wps- elements */
.wps-shorts-page a {
	text-decoration: none;
}

.wps-shorts-page a:hover,
.wps-shorts-page a:focus {
	text-decoration: none;
}

/* legacy shorts styles removed */
/* .shorts-hero {
	background: linear-gradient(135deg, #111827 0%, #1f2937 45%, #8e5725 100%);
	color: #ffffff;
	padding: 4.5rem 0;
}

.shorts-hero__inner {
	max-width: var(--site-content-max);
}

.shorts-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.4rem 0.7rem;
	border-radius: var(--radius-full, 9999px);
	background: rgba(255, 255, 255, 0.14);
}

.shorts-hero__title {
	margin: 1rem 0 0;
	font-size: clamp(1.875rem, 4.6vw, 3.25rem);
	line-height: 1.1;
	max-width: 16ch;
}

.shorts-hero__copy {
	margin: 1rem 0 0;
	color: rgba(255, 255, 255, 0.9);
	max-width: 60ch;
}

.shorts-hero__actions {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.shorts-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	padding: 0.78rem 1.1rem;
	border-radius: var(--radius);
	text-decoration: none;
	transition: all 0.2s ease;
}

.shorts-button--solid {
	background: #ffffff;
	color: #111827;
}

.shorts-button--solid:hover,
.shorts-button--solid:focus {
	background: #f3f4f6;
	color: #111827;
}

.shorts-button--ghost {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.35);
}

.shorts-button--ghost:hover,
.shorts-button--ghost:focus {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

.shorts-page {
	background: #f8fafc;
}

.shorts-toolbar {
	display: grid;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.shorts-filter-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.shorts-filter {
	border: 1px solid #dbe1ea;
	background: #ffffff;
	color: #111827;
	padding: 0.56rem 0.9rem;
	font-size: 0.9rem;
	font-weight: 600;
	border-radius: var(--radius-full, 9999px);
	cursor: pointer;
	transition: all 0.2s ease;
}

.shorts-filter:hover,
.shorts-filter:focus {
	border-color: #8e5725;
	color: #8f4f1a;
}

.shorts-filter.is-active {
	border-color: #8e5725;
	background: #8e5725;
	color: #ffffff;
}

.shorts-search input {
	width: 100%;
	padding: 0.85rem 1rem;
	border-radius: var(--radius);
	border: 1px solid #dbe1ea;
	background: #ffffff;
}

.shorts-search input:focus {
	outline: 2px solid rgba(142, 87, 37, 0.25);
	border-color: #8e5725;
}

.shorts-feed {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
}

.shorts-card {
	background: #ffffff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid #e9edf3;
	box-shadow: 0 12px 26px -24px rgba(15, 23, 42, 0.7);
}

.shorts-card__media-wrap {
	display: block;
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	background: #0f172a;
	cursor: pointer;
}

.shorts-card__media {
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	display: block;
}

.shorts-card__content {
	padding: 0.85rem;
}

.shorts-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.45rem;
}

.shorts-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.24rem 0.55rem;
	border-radius: var(--radius-full, 9999px);
	font-size: 0.72rem;
	font-weight: 700;
	background: #f5ebe2;
	color: #8f4f1a;
}

.shorts-city {
	font-size: 0.76rem;
	font-weight: 600;
	color: #64748b;
}

.shorts-card__title {
	margin: 0;
	font-size: 1rem;
	color: #0f172a;
	line-height: 1.3;
}

.shorts-card__caption {
	margin: 0.5rem 0 0;
	font-size: 0.88rem;
	color: #475569;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.shorts-card__actions {
	margin-top: 0.7rem;
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.shorts-card__actions a {
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}

.shorts-empty-state {
	margin-top: 1.2rem;
	padding: 1rem;
	border-radius: var(--radius);
	background: #ffffff;
	border: 1px dashed #d3dce9;
	color: #475569;
}

.shorts-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
}

.shorts-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 6, 23, 0.8);
}

.shorts-modal__panel {
	position: relative;
	z-index: 1;
	width: min(96vw, 560px);
	max-height: 92vh;
	overflow: auto;
	background: #0f172a;
	color: #ffffff;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.shorts-modal__close {
	position: absolute;
	right: 0.5rem;
	top: 0.4rem;
	border: 0;
	background: transparent;
	color: #ffffff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.shorts-modal__media {
	background: #000000;
}

.shorts-modal__media img,
.shorts-modal__media video {
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	display: block;
}

.shorts-modal__details {
	padding: 1rem;
}

.shorts-modal__city {
	margin: 0;
	font-size: 0.78rem;
	color: #d1d5db;
}

.shorts-modal__title {
	margin: 0.35rem 0 0;
	font-size: 1.15rem;
	color: #ffffff;
}

.shorts-modal__caption {
	margin: 0.55rem 0 0;
	color: #e5e7eb;
}

body.shorts-modal-open {
	overflow: hidden;
}

/* Instagram-style Field Shorts redesign */
.shorts-page--instagram {
	background: radial-gradient(circle at top left, #14171f 0%, #0b0d12 58%, #090b10 100%);
	padding: 0;
	min-height: 100dvh;
	overflow-x: hidden;
}

.shorts-app-shell {
	width: min(100%, 1120px);
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	min-height: 100dvh;
}

.ig-topbar {
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 0.9rem;
	border-bottom: 1px solid #efefef;
	background: #ffffff;
}

.ig-main {
	display: block;
	padding-left: clamp(1.2rem, 4vw, 2.4rem);
}

.ig-sidebar {
	background: transparent;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	padding: 0.85rem 0.8rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.68rem;
	position: sticky;
	top: 0;
	height: 100dvh;
}

.ig-sidebar__logo {
	width: 2.2rem;
	height: 2.2rem;
	border-radius: var(--radius-full, 9999px);
	background: linear-gradient(135deg, #fd1d1d, #e1306c 42%, #f77737 100%);
	color: #ffffff;
	font-size: 0.66rem;
	font-weight: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.65rem;
	border: 2px solid rgba(255, 255, 255, 0.2);
}

.ig-sidebar__item {
	width: 2.35rem;
	height: 2.35rem;
	border-radius: var(--radius-lg);
	color: #e5e7eb;
	background: transparent;
	border: 1px solid transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
}

.ig-sidebar__item svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

.ig-sidebar__item.is-active,
.ig-sidebar__item:hover,
.ig-sidebar__item:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

.ig-sidebar__item--back {
	margin-bottom: 0.45rem;
}

.ig-feed-label {
	margin: 0 auto;
	padding: 0.78rem 0.2rem;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: var(--ui-ink-muted, #6e655b);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: transparent;
	width: min(100%, 520px);
}

.ig-topbar__brand {
	font-size: 1.08rem;
	font-weight: 700;
	color: #f9fafb;
	letter-spacing: 0.01em;
}

.ig-topbar__actions {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.ig-topbar__back {
	width: 2rem;
	height: 2rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-full, 9999px);
	color: #f9fafb;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.ig-topbar__back svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.ig-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-full, 9999px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #f9fafb;
	background: transparent;
}

.ig-icon-button svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.ig-feed {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
	padding: 0.9rem 0 0;
	width: min(100%, 520px);
	margin: 0 auto;
	scroll-behavior: smooth;
}

.ig-feed::before,
.ig-feed::after {
	content: "";
	display: block;
	height: 4vh;
}

.ig-feed > * {
	grid-column: 1;
}

.ig-post {
	border-radius: 0;
	box-shadow: none;
	border: 0;
	background: transparent;
	transition: background-color 0.22s ease;
	overflow: hidden;
	min-height: 74vh;
	display: flex;
	flex-direction: column;
	scroll-margin-top: 6vh;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ig-post.is-centered {
	border-color: rgba(255, 255, 255, 0.18);
}

.ig-post__header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.62rem 0.75rem;
}

.ig-avatar {
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-full, 9999px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.78rem;
	background: linear-gradient(140deg, #fd1d1d, #fcb045);
	color: #ffffff;
}

.ig-post__identity {
	flex: 1;
	min-width: 0;
}

.ig-post__author {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	color: #f9fafb;
}

.ig-post__location {
	margin: 0;
	font-size: 0.72rem;
	color: var(--ui-ink-muted, #6e655b);
}

.ig-post__open {
	border: 0;
	background: rgba(255, 255, 255, 0.15);
	color: #f3f4f6;
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.32rem 0.58rem;
	border-radius: var(--radius-full, 9999px);
}

.ig-post__open:hover,
.ig-post__open:focus {
	background: rgba(255, 255, 255, 0.26);
}

.ig-post__media-wrap {
	background: #000000;
	position: relative;
	overflow: hidden;
}

.ig-post__media-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.22s ease;
}

.ig-post__media-wrap:hover::after,
.ig-post__media-wrap:focus-visible::after {
	opacity: 1;
}

.ig-post__media {
	width: 100%;
	aspect-ratio: 9 / 14;
	object-fit: cover;
	transition: transform 0.3s ease;
	background: #0b0b0b;
}

.ig-post__content {
	padding: 0.62rem 0.75rem 0.9rem;
	background: transparent;
}

.ig-post__caption {
	margin-top: 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: #f3f4f6;
	display: block;
	overflow: visible;
}

.ig-post__caption strong {
	margin-right: 0.35rem;
}

.ig-post__category {
	margin: 0.35rem 0 0;
	font-size: 0.75rem;
	color: #93c5fd;
}

.ig-post__cta-row {
	margin-top: 0.5rem;
	display: flex;
	gap: 0.45rem;
}

.ig-post__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.34rem 0.65rem;
	border-radius: var(--radius);
	font-size: 0.73rem;
	font-weight: 700;
	text-decoration: none;
	background: rgba(17, 24, 39, 0.75);
	color: #ffffff;
}

.ig-post__cta:hover,
.ig-post__cta:focus {
	background: rgba(31, 41, 55, 0.92);
	color: #ffffff;
}

.ig-post__cta--muted {
	background: rgba(255, 255, 255, 0.15);
	color: #f3f4f6;
}

.ig-post__cta--muted:hover,
.ig-post__cta--muted:focus {
	background: rgba(255, 255, 255, 0.24);
	color: #ffffff;
}

.shorts-load-sentinel {
	height: 3px;
	width: 100%;
}

.shorts-load-status {
	margin: 0.75rem auto 0;
	text-align: center;
	font-size: 0.78rem;
	color: var(--ui-ink-muted, #6e655b);
	width: min(100%, 520px);
}

@media (min-width: 680px) {
	html,
	body {
		scroll-behavior: smooth;
	}
}

@media (max-width: 540px) {
	.shorts-page--instagram {
		padding: 0;
	}

	.shorts-app-shell {
		width: 100%;
		max-width: 100%;
		grid-template-columns: 1fr;
		max-height: 100dvh;
	}

	.ig-sidebar {
		display: none;
	}

	.ig-topbar {
		display: flex;
		background: rgba(9, 11, 16, 0.95);
		backdrop-filter: blur(10px);
	}

	.ig-main {
		padding-left: 0;
	}

	.ig-post {
		min-height: 72dvh;
	}

	.ig-feed::before,
	.ig-feed::after {
		height: 6dvh;
	}
}

@media (min-width: 900px) {
	.ig-feed {
		width: min(100%, 540px);
	}

	.ig-feed-label,
	.shorts-load-status {
		width: min(100%, 540px);
	}
}

*/
/* end legacy shorts styles */

/* =============================================================
   Single post redesign (Medium-style readability + conversions)
   ============================================================= */

.wps-post-page {
	background: #ffffff;
	color: #1f2937;
}

.wps-post-hero {
	position: relative;
	overflow: hidden;
	background: var(--ui-dark);
	padding: clamp(2.6rem, 6vw, 5.25rem) 1rem;
}

.wps-post-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.wps-post-hero__bg-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.24;
}

.wps-post-hero__bg-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(130deg, rgba(5, 7, 10, 0.94) 0%, rgba(15, 20, 30, 0.9) 55%, rgba(142, 87, 37, 0.3) 100%);
}

.wps-post-hero__inner {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	max-width: 50rem;
}

.wps-post-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	font-size: 0.82rem;
	color: rgba(229, 231, 235, 0.78);
	margin-bottom: 1rem;
}

.wps-post-breadcrumb a {
	color: rgba(229, 231, 235, 0.82);
	text-decoration: none;
}

.wps-post-breadcrumb a:hover,
.wps-post-breadcrumb a:focus {
	color: #f3caa8;
}

.wps-post-breadcrumb span:last-child {
	color: #ffffff;
}

.wps-post-hero__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: 1rem;
}

.wps-post-chip {
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius-full, 9999px);
	border: 1px solid rgba(243, 202, 168, 0.36);
	background: rgba(142, 87, 37, 0.2);
	padding: 0.26rem 0.7rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	color: #f6ddc7;
}

.wps-post-chip:hover,
.wps-post-chip:focus {
	border-color: rgba(243, 202, 168, 0.7);
	background: rgba(142, 87, 37, 0.34);
	color: #ffffff;
}

.wps-post-hero__title {
	margin: 0;
	font-size: clamp(2.05rem, 4.9vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: #ffffff;
}

.wps-post-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-top: 1.25rem;
	font-size: 0.9rem;
	color: rgba(209, 213, 219, 0.9);
}

.wps-post-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.62rem;
	margin-top: 1.35rem;
}

.wps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full, 9999px);
	padding: 0.66rem 1.05rem;
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border: 1px solid transparent;
	transition: all 0.2s ease;
}

.wps-btn--primary {
	background: #8e5725;
	color: #ffffff;
	border-color: #8e5725;
}

.wps-btn--primary:hover,
.wps-btn--primary:focus {
	background: #74461e;
	border-color: #74461e;
	color: #ffffff;
}

.wps-btn--secondary {
	background: #ffffff;
	color: #111827;
	border-color: #ffffff;
}

.wps-btn--secondary:hover,
.wps-btn--secondary:focus {
	background: #f3f4f6;
	border-color: #f3f4f6;
	color: #111827;
}

.wps-post-hero--dramatic .wps-btn--ghost {
	background: transparent;
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.52);
}

.wps-post-hero--dramatic .wps-btn--ghost:hover,
.wps-post-hero--dramatic .wps-btn--ghost:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.72);
	color: #ffffff;
}

.wps-btn--ghost {
	background: #ffffff;
	color: #374151;
	border-color: #d1d5db;
}

.wps-btn--ghost:hover,
.wps-btn--ghost:focus {
	background: #f9fafb;
	border-color: var(--ui-ink-muted, #6e655b);
	color: #1f2937;
}

.wps-post-body {
	padding: clamp(2rem, 4.2vw, 4rem) 1rem clamp(2.5rem, 5vw, 5rem);
}

.wps-post-shell {
	margin: 0 auto;
	max-width: 50rem;
}

.wps-post-article {
	min-width: 0;
}

.wps-post-article__media {
	margin: 0 0 2rem;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 14px 35px -24px rgba(17, 24, 39, 0.7);
}

.wps-post-content {
	font-size: 1.08rem;
	line-height: 1.8;
	color: #1f2937;
}

.wps-post-content :where(p, ul, ol, blockquote) {
	margin-top: 1.3em;
	margin-bottom: 1.3em;
}

.wps-post-content :where(h2, h3, h4) {
	scroll-margin-top: 7rem;
}

.wps-post-content h2 {
	margin-top: 2.15em;
	margin-bottom: 0.65em;
	font-size: clamp(1.45rem, 3.2vw, 2rem);
	line-height: 1.22;
	letter-spacing: -0.01em;
}

.wps-post-content h3 {
	margin-top: 1.8em;
	margin-bottom: 0.58em;
	font-size: clamp(1.18rem, 2.3vw, 1.52rem);
	line-height: 1.3;
}

.wps-post-content blockquote {
	border-left: 0;
	padding: 0.35rem 0 0.35rem 1rem;
	color: #374151;
	font-style: italic;
}

.wps-post-content ul li::marker {
	color: #8e5725;
}

/* ─── Single post: help form, share, comments, tags (after article body) ─── */

.wps-post-after-content {
	margin-top: clamp(2.25rem, 5vw, 3.25rem);
	padding-top: clamp(1.75rem, 3.5vw, 2.25rem);
	border-top: 1px solid #e5e7eb;
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3.5vw, 2rem);
}

.wps-post-help-panel {
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: clamp(1.35rem, 3vw, 1.85rem);
}

.wps-post-help-panel__header {
	margin: 0;
	padding: 0 0 0 1rem;
	border-left: 0;
	max-width: 42rem;
}

.wps-post-help-panel__kicker {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8f4f1a;
}

.wps-post-help-panel__title {
	margin: 0.4rem 0 0;
	font-size: clamp(1.375rem, 2.5vw, 1.625rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.025em;
	color: #111827;
	font-family: inherit;
}

.wps-post-help-panel__lede {
	margin: 0.65rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #4b5563;
}

.wps-post-help-panel__actions {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 1rem;
}

.wps-post-help-panel__action-tel {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.5rem;
	text-decoration: none;
	color: #111827;
	border-bottom: 2px solid rgba(142, 87, 37, 0.35);
	padding-bottom: 0.1rem;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.wps-post-help-panel__action-tel:hover,
.wps-post-help-panel__action-tel:focus {
	border-bottom-color: #8e5725;
	color: #8f4f1a;
}

.wps-post-help-panel__action-tel-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ui-ink-muted, #6e655b);
}

.wps-post-help-panel__action-tel-num {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: inherit;
}

.wps-post-help-panel__action-divider {
	width: 1px;
	height: 1.25rem;
	background: #d1d5db;
	flex-shrink: 0;
}

.wps-post-help-panel__action-link {
	font-size: 0.875rem;
	font-weight: 600;
	color: #8f4f1a;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.wps-post-help-panel__action-link:hover,
.wps-post-help-panel__action-link:focus {
	color: #8e5725;
	border-bottom-color: rgba(142, 87, 37, 0.45);
}

.wps-post-help-panel__form-wrap {
	margin: 0;
	padding: clamp(1.25rem, 3vw, 1.65rem);
	border-radius: var(--radius);
	background: #f9fafb;
	border: 1px solid #e5e7eb;
}

.wps-post-help-panel__form-title {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #374151;
}

.wps-post-help-panel__form-note {
	margin: 0.4rem 0 1rem;
	max-width: 40rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ui-ink-muted, #6e655b);
}

.wps-post-help-panel__form-card {
	min-width: 0;
}

.wps-post-help-panel__form-card .wade-form-wrap-inline,
.wps-post-help-panel__form-wrap .wade-form-wrap-inline {
	width: 100%;
}

@media (max-width: 480px) {
	.wps-post-help-panel__action-divider {
		display: none;
	}
}

.wps-post-share-bar {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 0.85rem 0;
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
}

@media (min-width: 720px) {
	.wps-post-share-bar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1rem 1.5rem;
	}
}

.wps-post-share-bar__main {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	min-width: 0;
}

@media (min-width: 520px) {
	.wps-post-share-bar__main {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.65rem 1rem;
	}
}

.wps-post-share-bar__label {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #374151;
	white-space: nowrap;
}

.wps-post-share-bar__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
}

.wps-post-share-bar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem 0.75rem;
	border-radius: var(--radius-sm);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	color: #374151;
	background: #ffffff;
	border: 1px solid #d1d5db;
	cursor: pointer;
	font-family: inherit;
	transition:
		background 0.15s ease,
		border-color 0.15s ease;
}

.wps-post-share-bar__btn:hover,
.wps-post-share-bar__btn:focus {
	background: #f3f4f6;
	border-color: var(--ui-ink-muted, #6e655b);
}

.wps-post-share-bar__sep {
	display: inline-block;
	width: 1px;
	height: 0.875rem;
	background: #d1d5db;
	margin: 0 0.15rem;
	flex-shrink: 0;
}

.wps-post-share-bar__link {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ui-ink-muted, #6e655b);
	text-decoration: none;
	padding: 0.35rem 0.4rem;
	border-radius: var(--radius-sm);
	transition: color 0.15s ease, background 0.15s ease;
}

.wps-post-share-bar__link:hover,
.wps-post-share-bar__link:focus {
	color: #8f4f1a;
	background: rgba(142, 87, 37, 0.06);
}

.wps-post-share-bar__aside {
	margin: 0;
}

.wps-post-share-bar__aside-link {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #8f4f1a;
	text-decoration: none;
}

.wps-post-share-bar__aside-link:hover,
.wps-post-share-bar__aside-link:focus {
	text-decoration: underline;
}

.wps-post-comments-panel {
	border-radius: var(--radius);
	border: 1px solid #e5e7eb;
	background: #ffffff;
	padding: clamp(1.25rem, 2.8vw, 1.65rem);
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.wps-post-comments-panel__head {
	padding-bottom: 1rem;
	border-bottom: 1px solid #f3f4f6;
	margin-bottom: 0;
}

.wps-post-comments-panel__title {
	margin: 0;
	font-size: clamp(1.15rem, 2.2vw, 1.45rem);
	line-height: 1.2;
	color: #111827;
	letter-spacing: -0.02em;
}

.wps-post-comments-panel__subtitle {
	margin: 0.45rem 0 0;
	color: var(--ui-ink-muted, #6e655b);
	font-size: 0.92rem;
	line-height: 1.45;
	max-width: 40rem;
}

.wps-post-comments-panel__body {
	margin-top: 1rem;
}

.wps-post-comments-panel__closed-note {
	margin: 1rem 0 0;
	color: var(--ui-ink-muted, #6e655b);
	font-size: 0.92rem;
	line-height: 1.5;
}

.wps-post-comments-panel__closed-note a {
	color: #8f4f1a;
	font-weight: 700;
	text-decoration: none;
}

.wps-post-comments-panel__closed-note a:hover,
.wps-post-comments-panel__closed-note a:focus {
	color: #8e5725;
	text-decoration: underline;
}

.wps-post-comments-panel #comments {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.wps-post-comments-panel #comments > h2 {
	font-size: 0.98rem;
	line-height: 1.3;
	font-weight: 700;
	margin: 0 0 0.85rem;
	color: #374151;
}

.wps-post-comments-panel #comments-list,
.wps-post-comments-panel .comments-list {
	display: grid;
	gap: 0.85rem;
}

.wps-post-comments-panel .comment,
.wps-post-comments-panel .pingback,
.wps-post-comments-panel .trackback {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: var(--radius);
	padding: 0.85rem 0.95rem;
}

.wps-post-comments-panel .comment .children {
	margin-top: 0.8rem;
	padding-left: 0.85rem;
	border-left: 1px solid var(--ui-border-soft);
	display: grid;
	gap: 0.65rem;
}

.wps-post-comments-panel .comment p:last-child {
	margin-bottom: 0;
}

.wps-post-comments-panel .comment-author,
.wps-post-comments-panel .fn {
	font-weight: 700;
	color: #111827;
}

.wps-post-comments-panel .comment-metadata,
.wps-post-comments-panel .comment-meta,
.wps-post-comments-panel .comment-awaiting-moderation {
	font-size: 0.83rem;
	color: var(--ui-ink-muted, #6e655b);
}

.wps-post-comments-panel .comment-reply-link {
	display: inline-flex;
	align-items: center;
	margin-top: 0.5rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: #8f4f1a;
	text-decoration: none;
}

.wps-post-comments-panel .comment-reply-link:hover,
.wps-post-comments-panel .comment-reply-link:focus {
	color: #8e5725;
	text-decoration: underline;
}

.wps-post-comments-panel #respond-wrapper,
.wps-post-comments-panel .respond-wrapper {
	margin-top: 1.2rem;
}

.wps-post-comments-panel #respond-container,
.wps-post-comments-panel .respond-container {
	margin-bottom: 0;
}

.wps-post-comments-panel .comment-form {
	display: grid;
	gap: 0.8rem;
}

.wps-post-comments-panel .comment-form input[type="text"],
.wps-post-comments-panel .comment-form input[type="email"],
.wps-post-comments-panel .comment-form input[type="url"],
.wps-post-comments-panel .comment-form textarea {
	border: 1px solid #d8dde5;
	border-radius: var(--radius);
	background: #ffffff;
	padding: 0.62rem 0.75rem;
	font-size: 0.96rem;
	color: #111827;
	box-shadow: none;
}

.wps-post-comments-panel .comment-form input:focus,
.wps-post-comments-panel .comment-form textarea:focus {
	outline: none;
	border-color: #8e5725;
	box-shadow: 0 0 0 3px rgba(142, 87, 37, 0.14);
}

.wps-post-comments-panel .comment-form button[type="submit"],
.wps-post-comments-panel .comment-form input[type="submit"] {
	background: #8e5725;
	border: 1px solid #8e5725;
	color: #ffffff;
	border-radius: var(--radius-full, 9999px);
	padding: 0.62rem 1rem;
	font-weight: 700;
}

.wps-post-comments-panel .comment-form button[type="submit"]:hover,
.wps-post-comments-panel .comment-form button[type="submit"]:focus,
.wps-post-comments-panel .comment-form input[type="submit"]:hover,
.wps-post-comments-panel .comment-form input[type="submit"]:focus {
	background: #74461e;
	border-color: #74461e;
}

.wps-post-tags {
	margin-top: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 0.55rem;
	align-items: center;
	padding: 0.75rem 0;
	border-radius: 0;
	background: transparent;
	border: none;
	border-top: 1px solid #e5e7eb;
}

.wps-post-tags__label {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ui-ink-muted, #6e655b);
	margin-right: 0.15rem;
}

.wps-post-tags a {
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius-full, 9999px);
	border: 1px solid #e5e7eb;
	padding: 0.32rem 0.72rem;
	font-size: 0.78rem;
	font-weight: 600;
	text-decoration: none;
	color: #4b5563;
	background: #f9fafb;
	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		color 0.15s ease;
}

.wps-post-tags a:hover,
.wps-post-tags a:focus {
	border-color: #8e5725;
	background: #fffdfb;
	color: #8f4f1a;
}

@media (max-width: 720px) {
	.wps-post-content {
		font-size: 1rem;
		line-height: 1.72;
	}

	.wps-post-hero__meta {
		font-size: 0.82rem;
	}
}

/* =============================================================
   Default Page Layout  (page.php)
   Reuses .wps-post-* styles from the blog single template.
   ============================================================= */

/* Featured image — make sure wp-post-image fills the media figure */
.wps-post-article__media .wp-post-image {
	width: 100%;
	height: auto;
	display: block;
}

/* Service Areas — curated city / community lists */
.wades-service-area-cities-wrap h2 {
	font-size: clamp(1.5rem, 2.5vw, 1.875rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
	color: #111827;
}

.wades-service-area-cities-wrap h3 {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 1.75rem 0 0.5rem;
	color: #1f2937;
}

.wades-service-area-cities-wrap .wades-service-area-cities-intro,
.wades-service-area-cities-wrap .wades-service-area-cities-note {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #4b5563;
	margin: 0 0 0.5rem;
}

ul.wades-service-area-cities {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 0.35rem 1.25rem;
	font-size: 0.9375rem;
}

ul.wades-service-area-cities li {
	margin: 0;
	padding: 0.2rem 0;
	border-bottom: 1px solid #f3f4f6;
	color: #374151;
}

ul.wades-service-area-cities a.wades-service-area-city-link {
	/* Was a hardcoded #8e5725 from before the brand was darkened for AA — 3.59:1 on
	   white. The token resolves to #8e5725 (5.93:1). */
	color: var(--link-color, var(--color-primary));
	text-decoration: none;
	font-weight: 600;
	transition: color 0.15s ease;
}

ul.wades-service-area-cities a.wades-service-area-city-link:hover {
	color: var(--link-color-hover, #6f4320);
	text-decoration: underline;
}

/* =============================================================
   Service area single — Expert Tips hero + map “app” panel
   ============================================================= */

.wps-post-hero__inner--wide {
	max-width: min(82rem, calc(100% - 2rem));
	margin-left: auto;
	margin-right: auto;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.wps-service-area-hero__subactions {
	margin: 0.85rem 0 0;
	font-size: 0.82rem;
	color: rgba(229, 231, 235, 0.78);
}

.wps-service-area-hero__subaction {
	color: rgba(243, 202, 168, 0.95);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.wps-service-area-hero__subaction:hover,
.wps-service-area-hero__subaction:focus {
	color: #ffffff;
}

.wps-service-area-hero__subsep {
	margin: 0 0.35rem;
	color: rgba(255, 255, 255, 0.35);
}

.wps-sa-body {
	padding: clamp(2rem, 4.2vw, 3.5rem) 1rem clamp(2.5rem, 5vw, 4rem);
	background: #ffffff;
}

.wps-sa-body__inner {
	margin: 0 auto;
	max-width: min(82rem, 100%);
}

.wps-sa-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 3vw, 2.5rem);
	align-items: start;
}

@media (min-width: 1024px) {
	.wps-sa-layout {
		grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
		gap: 2.25rem 2.75rem;
	}
}

.wps-sa-layout__article {
	min-width: 0;
	max-width: 50rem;
}

.wps-sa-layout__thumb {
	margin: 0 0 1.5rem;
}

.wps-sa-help {
	margin-top: 2rem;
}

.wps-sa-comments {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid #e5e7eb;
}

/* Map app card */
.wps-sa-map-app {
	position: relative;
	min-width: 0;
}

@media (min-width: 1024px) {
	.wps-sa-map-app {
		position: sticky;
		top: 1.25rem;
	}
}

.wps-sa-map-app__shell {
	border-radius: var(--radius-lg);
	border: 1px solid #e5e7eb;
	background: #ffffff;
	box-shadow:
		0 1px 0 rgba(17, 24, 39, 0.04),
		0 12px 32px rgba(17, 24, 39, 0.08);
	overflow: hidden;
}

.wps-sa-map-app__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem;
	padding: 0.75rem 1rem;
	background: linear-gradient(180deg, var(--ui-dark) 0%, #241f1b 100%);
	color: #e5e7eb;
}

.wps-sa-map-app__toolbar-text {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	font-size: 0.88rem;
	font-weight: 700;
}

.wps-sa-map-app__pin {
	display: flex;
	color: #f6ddc7;
	flex-shrink: 0;
}

.wps-sa-map-app__place {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wps-sa-map-app__open {
	flex-shrink: 0;
	font-size: 0.78rem;
	font-weight: 700;
	color: #f6ddc7;
	text-decoration: none;
	border: 1px solid rgba(243, 202, 168, 0.45);
	border-radius: var(--radius-full, 9999px);
	padding: 0.35rem 0.65rem;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.wps-sa-map-app__open:hover,
.wps-sa-map-app__open:focus {
	background: rgba(142, 87, 37, 0.25);
	border-color: rgba(243, 202, 168, 0.75);
	color: #ffffff;
}

.wps-sa-map-app__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	min-height: 220px;
	background: #e5e7eb;
}

.wps-sa-map-app__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.wps-sa-map-app__empty {
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	font-size: 0.9rem;
	color: var(--ui-ink-muted, #6e655b);
	text-align: center;
	background: #f9fafb;
}

.wps-sa-map-app__footnote {
	margin: 0;
	padding: 0.65rem 1rem;
	font-size: 0.72rem;
	line-height: 1.45;
	color: var(--ui-ink-muted, #6e655b);
	background: #fafafa;
	border-top: 1px solid #f3f4f6;
}

.wps-sa-map-app__links {
	margin-top: 1.25rem;
	padding: 1.1rem 1.15rem;
	border-radius: var(--radius-lg);
	border: 1px solid #e5e7eb;
	background: #fafafa;
}

.wps-sa-map-app__links-title {
	margin: 0 0 0.65rem;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ui-ink-muted, #6e655b);
}

.wps-sa-map-app__links-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
}

.wps-sa-map-app__links-list li + li {
	margin-top: 0.45rem;
}

.wps-sa-map-app__links-list a {
	font-weight: 600;
	color: #8e5725;
	text-decoration: none;
}

.wps-sa-map-app__links-list a:hover,
.wps-sa-map-app__links-list a:focus {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Translucent white text utilities.

   The templates use text-white/40 … text-white/95 in ~104 places, but Tailwind
   only emits opacity modifiers it sees at build time and these were never
   generated. Without a definition the class is inert and the text falls back to
   the inherited colour — which on the copper CTA bands rendered as dark grey on
   orange (2.07:1). Defining them here restores the intended translucent white.

   The worst-case surface these sit on is the copper band (#8e5725), where white
   at 80% is 4.44:1 — just under AA. 85% gives 4.80:1, so that is used as the
   floor. On the near-black sections the difference is imperceptible.
   --------------------------------------------------------------------------- */
.text-white\/40,
.text-white\/50,
.text-white\/60,
.text-white\/65,
.text-white\/70,
.text-white\/75,
.text-white\/80,
.text-white\/85 { color: rgba(255, 255, 255, 0.85); }
.text-white\/90 { color: rgba(255, 255, 255, 0.90); }
.text-white\/95 { color: rgba(255, 255, 255, 0.95); }

/* ---------------------------------------------------------------------------
   Dark-surface and copper-surface colour overrides.

   .text-primary / .text-gray-500 / .text-gray-600 are tuned for light surfaces.
   On the dark sections and footer (#111111-#1b1b1b) the same values fall to
   2.79-3.47:1, well under WCAG AA. The attribute selectors catch Tailwind
   arbitrary backgrounds such as bg-[#111111] and bg-[#1b1b1b].
   --------------------------------------------------------------------------- */
.site-footer .text-primary,
.bg-nav .text-primary,
.bg-black .text-primary,
[class*="bg-[#0"] .text-primary,
[class*="bg-[#1"] .text-primary,
[class*="bg-[#2"] .text-primary {
	color: #c98c59; /* 6.12:1 on #1a1a1a */
}

.bg-black .text-gray-400,
.bg-black .text-gray-500,
.bg-black .text-gray-600,
.site-footer .text-gray-400,
.site-footer .text-gray-500,
.site-footer .text-gray-600,
.bg-nav .text-gray-400,
.bg-nav .text-gray-500,
.bg-nav .text-gray-600,
[class*="bg-[#0"] .text-gray-400,
[class*="bg-[#1"] .text-gray-400,
[class*="bg-[#2"] .text-gray-400,
[class*="bg-[#0"] .text-gray-500,
[class*="bg-[#1"] .text-gray-500,
[class*="bg-[#2"] .text-gray-500,
[class*="bg-[#0"] .text-gray-600,
[class*="bg-[#1"] .text-gray-600,
[class*="bg-[#2"] .text-gray-600 {
	color: var(--ui-ink-muted, #6e655b); /* 6.86:1 on #1a1a1a */
}

/* On the copper/primary bands, translucent white drops below AA
   (white/60 = 3.24:1). Render it solid there. */
.bg-primary .text-white\/40,
.bg-primary .text-white\/50,
.bg-primary .text-white\/60,
.bg-primary .text-white\/65,
.bg-primary .text-white\/70,
.bg-primary .text-white\/75,
.bg-primary .text-white\/80,
.bg-primary .text-white\/85,
.bg-primary .text-white\/90,
.bg-primary .text-white\/95 {
	/* !important because LiteSpeed inlines a critical-CSS copy of the Tailwind
	   .text-white\/NN rules in <style>, which otherwise wins the cascade. */
	color: #ffffff !important; /* 5.93:1 on #8e5725 */
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN REFINEMENT LAYER — 2026-07
   ───────────────────────────────────────────────────────────────────────────
   Diagnosis: the home page is well-built but plays the same beat six times —
   6 identical centred section headers, 5 filled eyebrow pills, 4 copper CTA
   bands and bg-gray-50 four sections running. Nothing is broken; it is
   monotonous, which is what makes the page feel endless.

   This layer fixes rhythm and materiality without touching markup:
     1. Asymmetric section headers (left on desktop, centred on mobile)
     2. Eyebrow pills demoted to typographic labels
     3. Alternating surface rhythm so sections stop blurring together
     4. Flatter card chrome — hairline borders, single tinted shadow
     5. Readable measure and calmer type scale

   Brand copper is unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Section headers: asymmetry instead of six centred blocks ─────────── */
@media (min-width: 1024px) {
	body.home section > div > .text-center:has(.fp-section-title) {
		text-align: left;
		max-width: 46rem;
	}
	/* The centre rule under the title becomes a left-aligned accent. */
	body.home section > div > .text-center:has(.fp-section-title) .justify-center {
		justify-content: flex-start;
	}
	body.home section > div > .text-center:has(.fp-section-title) .mx-auto {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ── 2. Eyebrow: a label, not a badge ────────────────────────────────────── */
body.home .eyebrow-badge {
	background-color: transparent;
	padding-left: 0;
	padding-right: 0;
	border-radius: 0;
	letter-spacing: 0.14em;
	font-size: 0.6875rem;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
}
body.home .eyebrow-badge::before {
	content: "";
	width: 1.5rem;
	height: 2px;
	background-color: currentColor;
	opacity: 0.55;
	flex: none;
}

/* ── 3. Surface rhythm: stop four grey sections running together ─────────── */
body.home section.bg-gray-50 {
	background-color: #ffffff;
}
body.home section.bg-gray-50:nth-of-type(even) {
	background-color: #faf8f6; /* warm paper, tuned to the copper rather than a cool grey */
}
body.home section.bg-gray-50 + section.bg-gray-50 {
	border-top: 1px solid #efe9e4;
}

/* ── 4. Card chrome: hairline + one tinted shadow, never stacked ─────────── */
body.home .rounded-2xl.shadow-md,
body.home .rounded-2xl.shadow-sm,
body.home .rounded-xl.shadow-sm {
	box-shadow: 0 1px 2px rgba(78, 48, 20, 0.04), 0 8px 24px -12px rgba(78, 48, 20, 0.10);
	border: 1px solid #efe9e4;
}
body.home .border-gray-100 {
	border-color: #efe9e4;
}

/* ── 5. Type: calmer scale, readable measure ─────────────────────────────── */
body.home .fp-section-title {
	font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
	letter-spacing: -0.018em;
}
/* Section intro paragraphs: cap the line length for readability. */
body.home section > div > .text-center:has(.fp-section-title) > p:not(.mb-3) {
	max-width: 60ch;
}

/* ── 6. Sitewide materiality ─────────────────────────────────────────────────
   The rules above are scoped to body.home. These carry the same card language
   to every other template so interior pages match the home page: one hairline
   border, one shadow tinted toward the copper rather than a neutral grey, and
   no stacked elevation. Layout is left alone — only surface treatment. */
.rounded-2xl.shadow-md,
.rounded-2xl.shadow-sm,
.rounded-xl.shadow-sm,
.rounded-lg.shadow-sm {
	box-shadow: 0 1px 2px rgba(78, 48, 20, 0.04), 0 8px 24px -12px rgba(78, 48, 20, 0.10);
}

/* Warm the neutral hairlines so borders relate to the copper instead of
   reading as cool grey against it. */
.border-gray-100 { border-color: #efe9e4; }
.border-gray-200 { border-color: #e5ddd6; }

/* Interior-page eyebrows get the same demotion as the home page. */
.eyebrow-badge {
	letter-spacing: 0.14em;
	font-size: 0.6875rem;
}

/* Readable measure for long-form body copy on articles and service pages. */
.entry-content > p,
.prose > p {
	max-width: 68ch;
}

/* ── 7. Services index: list rows instead of 48 cards ────────────────────────
   /services/ lists ~48 services. As a 3-up card grid that is a wall: 48 boxes,
   48 shadows, 48 "Get Quote" buttons. As hairline-separated rows in two
   columns it occupies roughly half the height, scans down a single left edge,
   and drops ~48 competing buttons.

   Defined here rather than with utilities because the theme ships a
   pre-compiled Tailwind build — lg:grid-cols-2 and gap-x-10 are not in it.

   .svc-card keeps its display defined here so the filter script's
   `style.display = ''` restores the correct value. */
.svc-list {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 3rem;
	border-top: 1px solid #efe9e4;
}

@media (min-width: 1024px) {
	.svc-list {
		grid-template-columns: 1fr 1fr;
	}
}

.svc-card {
	display: block;
	border-bottom: 1px solid #efe9e4;
}

.svc-row {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	padding: 0.95rem 0.5rem 0.95rem 0;
	text-decoration: none;
	transition: background-color 0.18s ease, padding-left 0.18s ease;
}

.svc-row:hover,
.svc-row:focus-visible {
	background-color: #faf6f2;
	padding-left: 0.6rem;
}

.svc-row__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	flex: 1 1 auto;
}

.svc-row__title {
	font-size: 0.9875rem;
	font-weight: 650;
	line-height: 1.35;
	color: #1a1a1a;
	transition: color 0.18s ease;
}

.svc-row:hover .svc-row__title {
	color: var(--color-primary);
}

.svc-row__desc {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #5b616b; /* 5.0:1 on the section surfaces — clears WCAG AA */
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.svc-row__arrow {
	flex: none;
	color: #b9a996;
	transform: translateX(-2px);
	opacity: 0;
	transition: transform 0.18s ease, opacity 0.18s ease, color 0.18s ease;
}

.svc-row:hover .svc-row__arrow,
.svc-row:focus-visible .svc-row__arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--color-primary);
}

/* Keyboard users get the same affordance as the mouse. */
.svc-row:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}

/* ── 8. Page hero media treatment ────────────────────────────────────────────
   The interior heroes ran a dark photo at 15–20% opacity underneath a near-black
   diagonal wash. The result was brown mush: you could not read the photograph,
   and it added nothing behind the type.

   Treat it deliberately instead. The image is held at a legible opacity but
   desaturated and slightly contrast-lifted so it reads as texture rather than a
   competing picture, and the scrim runs left-to-right — dense where the
   left-aligned headline sits, opening up on the right so the photograph is
   actually visible. A small amount of copper keeps it in the brand family
   instead of going flat grey. */
.page-hero__media {
	opacity: 0.38;
	filter: saturate(0.55) contrast(1.08) brightness(0.82);
}

.page-hero__scrim {
	background:
		linear-gradient(
			100deg,
			rgba(10, 8, 7, 0.95) 0%,
			rgba(10, 8, 7, 0.88) 38%,
			rgba(10, 8, 7, 0.62) 68%,
			rgba(10, 8, 7, 0.48) 100%
		),
		linear-gradient(
			180deg,
			rgba(142, 87, 37, 0.10) 0%,
			rgba(142, 87, 37, 0.00) 55%
		);
}

/* On narrow screens the text sits over the whole width, so the scrim needs to
   be even across it rather than directional. */
@media (max-width: 767px) {
	.page-hero__scrim {
		background:
			linear-gradient(
				180deg,
				rgba(10, 8, 7, 0.90) 0%,
				rgba(10, 8, 7, 0.94) 100%
			);
	}
	.page-hero__media {
		opacity: 0.30;
	}
}

/* Services filter chips: the inactive state was #5e5e5e on #cccccc (4.03:1),
   just under WCAG AA. Darken the label; the chip surface is unchanged. */
.svc-chip:not(.bg-gray-900) {
	color: #44464b; /* 5.1:1 on the chip background */
}

/* ── 9. CTA hierarchy: one loud band, the rest supporting ────────────────────
   The home page carried four solid-copper CTA blocks. Individually each is
   fine; stacked down one page they compete, and when everything shouts nothing
   is heard. No conversion path is removed here — the full-width copper band
   (line ~409, the site-assessment offer) stays the single loud moment, and the
   inset copper cards step down to a tinted, bordered treatment. They still
   read as CTAs and still convert; they just stop fighting the primary one. */
body.home .rounded-2xl.bg-primary {
	background-color: #fbf5ef;
	color: #2a1c10;
	border: 1px solid #e6d5c3;
	box-shadow: none;
}

/* Re-tone the text inside the stepped-down cards for the light surface. */
body.home .rounded-2xl.bg-primary .text-white,
body.home .rounded-2xl.bg-primary h3 {
	color: #2a1c10;
}
body.home .rounded-2xl.bg-primary p,
body.home .rounded-2xl.bg-primary [class*="text-white\/"] {
	color: #5a4636 !important; /* 6.4:1 on #fbf5ef */
}
body.home .rounded-2xl.bg-primary .text-white\/70 {
	color: #5a4636 !important;
}

/* Inside a stepped-down card the buttons invert: the solid one becomes copper
   so there is still one clear action, the outline one gains a warm border. */
body.home .rounded-2xl.bg-primary .bg-white {
	background-color: var(--color-primary);
	color: #ffffff;
}
body.home .rounded-2xl.bg-primary .bg-white * {
	color: #ffffff;
}
body.home .rounded-2xl.bg-primary .border-white\/40,
body.home .rounded-2xl.bg-primary .border-white\/30 {
	border-color: #cbb49c;
	color: #2a1c10;
}

/* ── 10. Hero ────────────────────────────────────────────────────────────────
   Rebuilt around a single dominant call action and a two-path router. See the
   long note in front-page.php for the reasoning; this layer carries the layout.

   Contrast note: every text colour here was computed against the *worst case*
   veil, i.e. assuming the photograph underneath is pure white. Minimum veil
   alpha is 0.66, which composites to #5D5D5D at worst — white text on that is
   6.5:1, so body copy clears AA everywhere over the image, not just where the
   photo happens to be dark. */
body.home .fp-hero {
	isolation: isolate;
}

body.home .fp-hero__title {
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

body.home .fp-hero__sub {
	max-width: 34rem;
	text-wrap: pretty;
}

/* Photograph. Phones: covers the section behind everything. lg+: a full-height
   panel bleeding off the right edge, masked so it dissolves into the dark field
   rather than stopping at a hard vertical seam. */
body.home .fp-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	z-index: 0;
}

body.home .fp-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(10, 8, 7, 0.86);
}

body.home .fp-hero__inner {
	position: relative;
	z-index: 2;
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

@media (min-width: 1024px) {
	body.home .fp-hero__photo {
		left: auto;
		right: 0;
		width: 38%;
		object-position: 46% 50%;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 100%);
		        mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 100%);
	}

	/* Left-weighted, so the copy column sits on a near-solid field while the
	   photograph stays legible on the right. */
	body.home .fp-hero__veil {
		background: linear-gradient(
			100deg,
			rgba(10, 8, 7, 0.95) 0%,
			rgba(10, 8, 7, 0.92) 44%,
			rgba(10, 8, 7, 0.78) 68%,
			rgba(10, 8, 7, 0.66) 100%
		);
	}

	body.home .fp-hero__inner {
		padding-top: 4.5rem;
		padding-bottom: 4rem;
	}

	body.home .fp-hero__lede {
		max-width: 60%;
	}
}

/* The call block. Deliberately the largest interactive element on the page:
   the number is set as display type rather than a caption inside a button,
   because on a phone the number is the button. */
body.home .fp-hero__call {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem 1.75rem;
	border-radius: var(--radius, 10px);
	background: var(--color-primary, #8e5725);
	color: #ffffff;
	box-shadow: 0 18px 38px -16px rgba(142, 87, 37, 0.85);
	transition-property: transform, background-color, box-shadow;
	transition-duration: 180ms;
	transition-timing-function: var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1));
}

/* On phones the call block spans the full column. This is the primary action on
   a device held one-handed, often by someone standing in water — a content-width
   button wastes the easiest target on the screen. */
@media (max-width: 639px) {
	body.home .fp-hero__call {
		display: flex;
		width: 100%;
		justify-content: center;
	}
}

body.home .fp-hero__call-icon {
	display: flex;
	flex: 0 0 auto;
}

body.home .fp-hero__call-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

body.home .fp-hero__call-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #f4e4d6;
}

body.home .fp-hero__call-number {
	margin-top: 0.22rem;
	font-size: 1.65rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

@media (hover: hover) and (pointer: fine) {
	body.home .fp-hero__call:hover {
		background: var(--color-brand-700, #74461e);
		box-shadow: 0 22px 44px -16px rgba(142, 87, 37, 0.95);
	}
}

body.home .fp-hero__call:active {
	transform: scale(0.985);
}

body.home .fp-hero__call:focus-visible {
	outline: 3px solid #d8a877;
	outline-offset: 3px;
}

body.home .fp-hero__hours {
	margin-top: 0.9rem;
	font-size: 0.875rem;
	color: #e2e2e2;
}

body.home .fp-hero__hours-sep {
	margin: 0 0.4rem;
	color: rgba(255, 255, 255, 0.35);
}

/* Trust row — one line of short facts rather than a grid plus a proof bar. */
body.home .fp-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	margin: 1.75rem 0 0;
	padding: 1.35rem 0 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.875rem;
	color: #e8e8e8;
}

body.home .fp-hero__trust li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

body.home .fp-hero__tick {
	display: flex;
	flex: 0 0 auto;
	color: #d8a877; /* 7.4:1 on the veil — the brand copper itself only reaches 3.2:1 here */
}

body.home .fp-hero__stars {
	color: #facc15;
	letter-spacing: 0.03em;
}

/* Two-path router. Previously this content lived inside the desktop-only image
   overlay, so phones never saw it at all. */
body.home .fp-hero__paths {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 3rem;
}

@media (min-width: 640px) {
	body.home .fp-hero__paths {
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
	}
}

body.home .fp-hero__path {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-lg, 14px);
	/* A DARK wash, not the usual white one. A 5% white surface lightened the
	   worst-case background to #656463 and dropped the body copy to 4.31:1 and
	   the eyebrow to 2.75:1. Darkening instead puts every value above 7:1. */
	background: rgba(10, 8, 7, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition-property: transform, background-color, border-color;
	transition-duration: 200ms;
	transition-timing-function: var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1));
}

@media (hover: hover) and (pointer: fine) {
	body.home .fp-hero__path:hover {
		background: rgba(10, 8, 7, 0.42);
		border-color: rgba(216, 168, 119, 0.5);
		transform: translateY(-2px);
	}
}

body.home .fp-hero__path:active {
	transform: scale(0.99);
}

body.home .fp-hero__path:focus-visible {
	outline: 3px solid #d8a877;
	outline-offset: 3px;
}

body.home .fp-hero__path-eyebrow {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #e2b98d; /* 7.5:1 on the dark card at worst case */
}

body.home .fp-hero__path-title {
	margin-top: 0.6rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: #ffffff;
	text-wrap: pretty;
}

body.home .fp-hero__path-body {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: #e6e6e6;
	text-wrap: pretty;
}

body.home .fp-hero__path-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #f0d6b8;
}

@media (prefers-reduced-motion: reduce) {
	body.home .fp-hero__call,
	body.home .fp-hero__path {
		transition-property: background-color, border-color;
	}
	body.home .fp-hero__call:active,
	body.home .fp-hero__path:active,
	body.home .fp-hero__path:hover {
		transform: none;
	}
}

/* ── 11. Project proof grid ──────────────────────────────────────────────────
   Captions are always visible here. Previously they appeared on hover only,
   which meant they never appeared on touch devices — and three of the four
   photos had no caption at all, leaving decorative images doing no work. */
body.home .fp-proof {
	height: 11rem;
}

body.home .fp-proof__scrim {
	background: linear-gradient(
		to top,
		rgba(8, 6, 5, 0.88) 0%,
		rgba(8, 6, 5, 0.55) 40%,
		rgba(8, 6, 5, 0.05) 78%
	);
}

@media (min-width: 768px) {
	body.home .fp-proof {
		height: 12.5rem;
	}
}

/* ── 12. Testimonials: de-carded, asymmetric ─────────────────────────────────
   Was three equal boxed cards. The lead quote now carries weight via a copper
   rule and larger type; the two supporting quotes are hairline-separated rather
   than boxed. No card chrome, clear entry point. */
body.home .fp-quote--lead {
	border-left: 0;
	padding-left: 1.5rem;
}

body.home .fp-quote-list .fp-quote + .fp-quote {
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid #efe9e4;
}

@media (min-width: 1024px) {
	body.home .fp-quote-list {
		column-count: 2;
		column-gap: 2.5rem;
	}
	/* Keep each quote intact across the column break. */
	body.home .fp-quote-list .fp-quote {
		break-inside: avoid;
	}
	body.home .fp-quote-list .fp-quote + .fp-quote {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTION CRAFT LAYER
   ───────────────────────────────────────────────────────────────────────────
   Audit findings across header, footer and CTAs:
     · 6 × `transition: all` — animates every property including layout ones
     · essentially no :active state anywhere — nothing feels pressed
     · hover was colour-only, so links had no affordance until the cursor landed
     · built-in CSS easings, which are too weak to read as intentional
     · hover states not gated, so they stick on touch devices after a tap

   Everything below is transform/opacity/colour only — no layout properties are
   animated — and all of it is disabled under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	/* Built-in ease-out is too soft to feel deliberate. */
	--ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ── Press feedback ──────────────────────────────────────────────────────────
   Nothing on the site responded to being pressed. A small scale confirms the
   interface heard the tap — this matters most on mobile, where there is no
   hover to give feedback first. */
.site-header a[href^="tel:"],
.site-footer a[href^="tel:"],
a[data-track-cta],
.wades-btn,
button[type="submit"],
.svc-chip {
	transition: transform 160ms var(--ease-out-strong),
	            background-color 160ms ease,
	            color 160ms ease,
	            border-color 160ms ease;
}

.site-header a[href^="tel:"]:active,
.site-footer a[href^="tel:"]:active,
a[data-track-cta]:active,
.wades-btn:active,
button[type="submit"]:active,
.svc-chip:active {
	transform: scale(0.97);
}

/* ── Replace `transition-all` ────────────────────────────────────────────────
   `all` animates layout properties too, which can cause jank. Narrow it to the
   properties these elements actually change. */
.site-header .transition-all,
.site-footer .transition-all {
	transition-property: transform, opacity, color, background-color, border-color;
}

/* ── Navigation affordance ───────────────────────────────────────────────────
   Desktop nav links changed colour only. A rule that grows from the left gives
   the link a shape before the eye has parsed the colour change. */
@media (hover: hover) and (pointer: fine) {
	.site-header nav a:not(.wades-btn) {
		position: relative;
	}

	.site-header nav a:not(.wades-btn)::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -0.35rem;
		height: 2px;
		width: 100%;
		background-color: var(--color-primary);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 200ms var(--ease-out-strong);
	}

	.site-header nav a:not(.wades-btn):hover::after {
		transform: scaleX(1);
	}
}

/* ── Footer links ────────────────────────────────────────────────────────────
   A small shift toward the reader plus a colour lift. Gated to real pointers so
   it does not stick after a tap on mobile. */
.site-footer a {
	transition: color 160ms ease, transform 160ms var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
	.site-footer ul a:hover,
	.site-footer nav a:hover {
		transform: translateX(2px);
	}
}

/* ── Keyboard users get the same clarity as mouse users ──────────────────── */
.site-header a:focus-visible,
.site-footer a:focus-visible,
.svc-chip:focus-visible,
a[data-track-cta]:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* ── Respect the OS setting ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.site-header a,
	.site-footer a,
	a[data-track-cta],
	.svc-chip,
	button[type="submit"] {
		transition-duration: 0.01ms !important;
	}
	.site-header nav a:not(.wades-btn)::after {
		transition: none;
	}
	.site-footer ul a:hover,
	.site-footer nav a:hover {
		transform: none;
	}
}

/* ── Footer top band: let the stats breathe ──────────────────────────────────
   Brand, the four stats and the social icons were all children of one flex row,
   so at common widths the stats were squeezed into whatever space was left and
   the row read as one undifferentiated strip. Giving the band `space-between`
   with a wrap and a real row-gap separates the three groups, and the stats get
   consistent internal spacing instead of inheriting the leftovers. */
.site-footer .flex.items-center.gap-6.lg\:gap-8 {
	gap: 1.75rem;
}

@media (min-width: 1024px) {
	.site-footer .flex.items-center.gap-6.lg\:gap-8 {
		gap: 2.5rem;
	}
}

/* The stat number and its label were only 1px apart with the label at 10px —
   too tight to read as a pair. */
.site-footer .flex.items-center.gap-6.lg\:gap-8 .text-\[10px\] {
	margin-top: 0.3rem;
	letter-spacing: 0.08em;
}

/* Footer section headings sat very close to their first link. */
.site-footer h3 + ul > li:first-child a {
	padding-top: 0.1rem;
}

/* Two link groups share the third footer column. With the Maintenance Guide,
   Glossary and Video Tutorials links correctly hidden (their pages do not exist
   yet), "Resources" is down to a single item and the "We Serve" heading below it
   looked like a mistake rather than a new group. A hairline and more space make
   the split deliberate. The column repopulates on its own once those pages are
   created. */
.site-footer h3 + ul + h3 {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── 13. Hero photography, sitewide ──────────────────────────────────────────
   About, FAQ, Careers, blog and service archives all repeat the same pattern the
   contact page had: a photograph at opacity-10/15/20 buried under an inline
   `linear-gradient(135deg, rgba(0,0,0,0.92)…)` wash. The result is brown mush —
   the image is unreadable and contributes nothing behind the type.

   Rather than edit six templates, the treatment is applied here: lift the image
   to a legible opacity but desaturate and contrast-lift it so it reads as
   texture, and replace the harsh diagonal with a directional scrim that is dense
   where the (now left-aligned) headline sits and opens toward the right.

   !important is required on both: the opacity comes from a utility class and the
   gradient from an inline style attribute. */
section.relative img.object-cover.opacity-10,
section.relative img.object-cover.opacity-15,
section.relative img.object-cover.opacity-20 {
	opacity: 0.34 !important;
	filter: saturate(0.55) contrast(1.08) brightness(0.82);
}

section.relative [aria-hidden="true"] > div[style*="linear-gradient(135deg"] {
	background: linear-gradient(
		100deg,
		rgba(10, 8, 7, 0.95) 0%,
		rgba(10, 8, 7, 0.88) 38%,
		rgba(10, 8, 7, 0.62) 68%,
		rgba(10, 8, 7, 0.48) 100%
	) !important;
}

/* On phones the headline spans the full width, so the scrim must be even
   rather than directional. */
@media (max-width: 767px) {
	section.relative img.object-cover.opacity-10,
	section.relative img.object-cover.opacity-15,
	section.relative img.object-cover.opacity-20 {
		opacity: 0.26 !important;
	}
	section.relative [aria-hidden="true"] > div[style*="linear-gradient(135deg"] {
		background: linear-gradient(
			180deg,
			rgba(10, 8, 7, 0.90) 0%,
			rgba(10, 8, 7, 0.94) 100%
		) !important;
	}
}

/* ── 14. Service Areas page fixes ────────────────────────────────────────────
   Found while auditing this page after the Google Maps embeds were unblocked. */

/* The coverage badge used bg-brand-300 (#c98c59) with white text — about 2.2:1.
   Dark text on the same background gives 6.12:1 and keeps the copper. */
.bg-brand-300 {
	color: #1a1a1a;
}


/* ── 15. Map facade ──────────────────────────────────────────────────────────
   Stands in for the Google Maps iframe until the visitor asks for it, so no
   third-party cookie is set on arrival. Fills the same 520px slot, so nothing
   shifts when the real map replaces it. */
.wades-map-facade {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	cursor: pointer;
	background:
		radial-gradient(circle at 30% 25%, rgba(142, 87, 37, 0.20) 0%, transparent 55%),
		linear-gradient(160deg, #1d1a17 0%, #14120f 100%);
	transition: background-color 200ms ease;
}

.wades-map-facade__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	height: 100%;
	color: #c98c59;
	text-align: center;
	padding: 1.5rem;
}

.wades-map-facade__title {
	font-size: 1rem;
	font-weight: 700;
	color: #ffffff;
	max-width: 32ch;
}

.wades-map-facade__hint {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #c9c2ba; /* 8.1:1 on the facade background */
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

@media (hover: hover) and (pointer: fine) {
	.wades-map-facade:hover .wades-map-facade__hint {
		color: #ffffff;
	}
}

.wades-map-facade:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -3px;
}

.wades-map-facade:active {
	transform: scale(0.995);
}


/* ── 16. Dark-surface override: don't leak onto light children ───────────────
   The dark-surface rules lighten .text-primary to #c98c59 so it reads on a dark
   band. But a white button sitting *inside* a dark section is a light surface,
   and there the lightened copper drops to 2.65:1. Restore the real token
   wherever the element (or its wrapper) carries its own light background. */
[class*="bg-[#0"] .bg-white .text-primary,
[class*="bg-[#1"] .bg-white .text-primary,
[class*="bg-[#2"] .bg-white .text-primary,
[class*="bg-[#0"] a.bg-white,
[class*="bg-[#1"] a.bg-white,
[class*="bg-[#2"] a.bg-white,
.site-footer .bg-white .text-primary,
.bg-nav .bg-white .text-primary,
.bg-black .bg-white .text-primary,
.site-footer a.bg-white,
.bg-nav a.bg-white,
.bg-black a.bg-white {
	color: var(--color-primary);
}

/* Same for any button that sets a light background on itself inside a dark band. */
[class*="bg-[#1"] .text-brand-300.bg-white,
[class*="bg-[#1"] .bg-white.text-brand-300 {
	color: var(--color-primary);
}


/* Touch target: only the icon-only mobile menu toggle is genuinely undersized.
   Earlier attempts applied min-height to every header link, which stretched them
   until they overlapped each other — Lighthouse reported the logo link as
   "partially obscured, 271px by 10px". Scope it to the one control. */
.site-header .mobile-menu-toggle {
	min-width: 44px;
	min-height: 44px;
}