/*
Theme Name: Empire Homes Renovation
Theme URI: https://empirehomesrenovation.com/
Author: Visar
Description: Custom block theme for Empire Homes Renovation — residential remodeling, painting and wood restoration in Woodstock, GA. Built for Core Web Vitals, local SEO and lead generation. No page builder.
Version: 1.44.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: empire
Tags: block-theme, custom-colors, custom-menu, featured-images, full-site-editing
*/

/* -------------------------------------------------------------------------
   Almost everything lives in theme.json. This file holds only what
   theme.json cannot express. Keep it small on purpose.
   ------------------------------------------------------------------------- */

/* 1. Type refinements ---------------------------------------------------- */

h1, h2, h3,
.wp-block-post-title {
	letter-spacing: -0.02em;
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

/* Eyebrow label — Archivo, wide tracking, walnut. Used above section titles. */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--walnut);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* 2. Signature element: the finish swatch rule --------------------------
   A stain-sample card, abstracted. Three segments of the brand finishes.
   Used under section eyebrows and above the footer. Nowhere else.
   ---------------------------------------------------------------------- */

.empire-swatch-rule {
	display: flex;
	width: 84px;
	height: 5px;
	overflow: hidden;
}

.empire-swatch-rule::before,
.empire-swatch-rule::after,
.empire-swatch-rule > span {
	content: "";
	flex: 1;
}

.empire-swatch-rule::before { background: var(--wp--preset--color--pine); }
.empire-swatch-rule > span   { background: var(--wp--preset--color--walnut); }
.empire-swatch-rule::after  { background: var(--wp--preset--color--sand); }

/* 3. Buttons ------------------------------------------------------------- */

.wp-block-button__link {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--pine-dark);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* 4. Accessibility floor ------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--pine);
	outline-offset: 2px;
	border-radius: 2px;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 999999;
	padding: 12px 20px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 5. Images -------------------------------------------------------------- */

img {
	height: auto;
	max-width: 100%;
}

/* Project photography carries the brand. Never let it letterbox. */
.wp-block-post-featured-image img {
	object-fit: cover;
	width: 100%;
}

/* =========================================================================
   6. HEADER
   ====================================================================== */

.empire-topbar {
	display: none;
}

.empire-topbar a {
	color: var(--wp--preset--color--sand);
	text-decoration: none;
	font-weight: 600;
}

.empire-topbar a:hover {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
}

.empire-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: 0.875rem;
}

.empire-header__inner {
	gap: var(--wp--preset--spacing--40);
}

.empire-brand {
	gap: 0.75rem;
	align-items: center;
	flex-wrap: nowrap;
}

.empire-brand .wp-block-site-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	line-height: 1.05;
	display: block;
	max-width: 12ch;
}

.empire-header__actions {
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	flex-wrap: nowrap;
}

.empire-header__phone,
.empire-header__cta {
	display: none;
}

.empire-header__phone a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	white-space: nowrap;
}

.empire-header .wp-block-navigation__responsive-container-open,
.empire-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}

/* =========================================================================
   7. MOBILE STICKY ACTION BAR
   One tap to call, one tap to the estimate form. Mobile only.
   ====================================================================== */

.empire-mobile-cta {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 200;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-bottom: env(safe-area-inset-bottom);
}

.empire-mobile-cta a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1.05rem 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: var(--wp--preset--color--paper);
}

.empire-mobile-cta__call {
	background: var(--wp--preset--color--ink);
}

.empire-mobile-cta__estimate {
	background: var(--wp--preset--color--pine);
}

/* Keep the bar from covering the last line of the footer. */
body {
	padding-bottom: 3.75rem;
}

/* =========================================================================
   8. SECTIONS, CARDS, PROCESS, BEFORE/AFTER
   ====================================================================== */

.empire-section-head .empire-swatch-rule {
	margin-bottom: var(--wp--preset--spacing--30);
}

.empire-section-head h2 {
	max-width: 22ch;
}

.empire-page-head h1 {
	max-width: 24ch;
}

.empire-card {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	padding: 0 0 1.375rem;
	overflow: hidden;
	transition: box-shadow 160ms ease, transform 160ms ease;
}

.empire-card:hover {
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

.empire-card > *:not(.empire-card__media) {
	margin-inline: 1.375rem;
}

.empire-card h3 {
	margin-top: 1.25rem;
}

.empire-card__media {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--mist);
	background-image: linear-gradient(135deg, transparent 46%, var(--wp--preset--color--line) 46%, var(--wp--preset--color--line) 54%, transparent 54%);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.empire-card__media--tall {
	aspect-ratio: 3 / 4;
}

.empire-card__link a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.empire-card--placeholder p {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	margin: 1rem 1.375rem;
}

/* Process — numerals do the structural work here. */
.empire-process {
	list-style: none;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: rgba(255, 255, 255, 0.14);
	grid-template-columns: 1fr;
}

.empire-process li {
	background: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.empire-process__n {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--sand);
	margin-bottom: 0.875rem;
}

.empire-process h3 {
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.5rem;
}

.empire-process p {
	color: var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/* Before / after — two labelled panels. Slider replaces this next step. */
.empire-ba {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--60);
}

.empire-ba__panel {
	margin: 0;
}

.empire-ba__media {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--mist);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
}

.empire-ba__panel figcaption {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--walnut);
	margin-top: 0.75rem;
}

/* Trust bar */
.empire-trustbar__item {
	position: relative;
	margin: 0;
	padding-left: 1.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
}

.empire-trustbar__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--pine);
}

/* Service area list */
.empire-arealist {
	list-style: none;
	padding: 0;
	margin: 0;
	columns: 2;
	column-gap: var(--wp--preset--spacing--40);
}

.empire-arealist li {
	font-family: var(--wp--preset--font-family--display);
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* FAQ */
.empire-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 1.25rem 0;
}

.empire-faq summary {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.empire-faq summary::-webkit-details-marker {
	display: none;
}

.empire-faq summary::after {
	content: "+";
	float: right;
	color: var(--wp--preset--color--walnut);
	font-weight: 400;
}

.empire-faq details[open] summary::after {
	content: "–";
}

/* Footer */
.empire-footer__title {
	margin-bottom: var(--wp--preset--spacing--30);
}

.empire-footer a {
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.empire-footer a:hover {
	text-decoration: underline;
}

.empire-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.empire-footer__list li {
	padding: 0.3rem 0;
}

.empire-footer__contact a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
}

.empire-footer__legal {
	margin-top: var(--wp--preset--spacing--40);
}

/* =========================================================================
   9. BREAKPOINTS
   Mobile is the default above. Everything here is an upgrade, not a fix.
   ====================================================================== */

@media (min-width: 600px) {
	.empire-ba {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 782px) {
	.empire-process {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.empire-topbar {
		display: block;
		padding-block: 0.5rem;
	}

	.empire-header__phone,
	.empire-header__cta {
		display: block;
	}

	.empire-brand .wp-block-site-title a {
		max-width: none;
	}

	.empire-mobile-cta {
		display: none;
	}

	body {
		padding-bottom: 0;
	}
}

@media (min-width: 1100px) {
	.empire-process {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* =========================================================================
   10. SERVICE PAGES & PATTERNS
   ====================================================================== */

/* Yoast breadcrumbs */
.empire-service-head .wp-block-shortcode,
main > .wp-block-shortcode {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

main > .wp-block-shortcode a,
.empire-service-head .wp-block-shortcode a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

main > .wp-block-shortcode a:hover,
.empire-service-head .wp-block-shortcode a:hover {
	color: var(--wp--preset--color--pine);
	text-decoration: underline;
}

.empire-service-head h1 {
	max-width: 18ch;
	margin-top: var(--wp--preset--spacing--30);
}

/* Long-form body copy. Measure is deliberate — serif at 66ch reads best. */
.empire-prose p,
.empire-prose ul,
.empire-prose ol {
	max-width: 66ch;
}

.empire-prose h2 {
	margin-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--x-large);
}

.empire-prose h3 {
	margin-top: var(--wp--preset--spacing--50);
}

/* Checklist — a rule mark, not a decorative icon set */
.empire-checklist p {
	position: relative;
	margin: 0;
	padding-left: 1.75rem;
	line-height: 1.5;
}

.empire-checklist p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 10px;
	height: 10px;
	border-left: 2px solid var(--wp--preset--color--pine);
	border-bottom: 2px solid var(--wp--preset--color--pine);
	transform: rotate(-45deg);
}

/* Steps — light variant of the homepage process list */
.empire-steps {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

.empire-steps li {
	border-top: 2px solid var(--wp--preset--color--walnut);
	padding-top: var(--wp--preset--spacing--30);
}

.empire-steps__n {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--walnut);
	margin-bottom: 0.625rem;
}

.empire-steps h3 {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.4rem;
}

.empire-steps p {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* Problems */
.empire-problem {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--40);
}

.empire-problem h3 {
	margin-top: 0;
}

/* Before/after images inside patterns */
.empire-ba__img figcaption {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--walnut);
}

/* Related services */
.empire-related__item {
	margin: 0;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.empire-related__item a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-decoration: none;
}

.empire-related__item a:hover {
	text-decoration: underline;
}

/* =========================================================================
   11. BLOG
   ====================================================================== */

.empire-post-head h1 {
	max-width: 22ch;
	margin-top: var(--wp--preset--spacing--30);
}

.empire-postmeta {
	gap: 0.75rem;
	align-items: center;
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--muted);
}

.empire-postmeta a {
	color: var(--wp--preset--color--walnut);
	text-decoration: none;
}

/* Blog cards reuse .empire-card but carry a real featured image. */
.empire-card .wp-block-post-featured-image {
	margin: 0 0 0.25rem;
}

.empire-card .wp-block-post-featured-image img {
	border-radius: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.empire-card .wp-block-post-date {
	margin-top: 1.25rem;
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.empire-card .wp-block-post-title {
	margin: 0.35rem 0 0;
}

.empire-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.empire-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--pine);
}

.wp-block-query-pagination {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	gap: 0.75rem;
}

@media (min-width: 782px) {
	.empire-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.empire-steps {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Footer address — kept quiet, it is NAP data, not a headline. */
.empire-footer__address {
	margin-bottom: var(--wp--preset--spacing--20);
	line-height: 1.5;
}

/* =========================================================================
   12. MEASURE GUARD
   The layout container is wide. Running text is not — a 1080px line of
   serif body copy is roughly 150 characters and nobody finishes it.
   ====================================================================== */

.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > blockquote,
.wp-block-post-content > .wp-block-quote {
	max-width: 68ch;
}

.wp-block-post-content > h2,
.wp-block-post-content > h3,
.wp-block-post-content > h4 {
	max-width: 30ch;
}

/* Intro copy under section headings */
.empire-section-head p {
	max-width: 60ch;
}

/* =========================================================================
   13. STRUCTURE PASS
   The motif is a contractor's written estimate: a label rail on the left,
   line items with rules between them, numbers where the content is a real
   list. Everything below serves that, or it is not here.
   ====================================================================== */

/* --- 13.1 Section header rail ------------------------------------------
   Upgrades every existing .empire-section-head with no markup change:
   swatch + eyebrow move into a left rail, heading and intro sit beside it.
   ---------------------------------------------------------------------- */

.empire-section-head {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

.empire-section-head > * {
	margin: 0;
}

.empire-section-head h2 {
	max-width: 20ch;
	letter-spacing: -0.03em;
}

@media (min-width: 900px) {
	.empire-section-head {
		grid-template-columns: 190px minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50);
		row-gap: var(--wp--preset--spacing--30);
		align-items: start;
	}

	.empire-section-head .empire-swatch-rule { grid-column: 1; grid-row: 1; }
	.empire-section-head h6                  { grid-column: 1; grid-row: 2; }
	.empire-section-head h2                  { grid-column: 2; grid-row: 1 / span 2; }
	.empire-section-head p                   { grid-column: 2; grid-row: 3; }
}

/* --- 13.2 Hero ---------------------------------------------------------- */

.empire-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
	width: 100%;
}

.empire-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
}

.empire-hero__body > * { margin: 0; }

.empire-hero__body h1 {
	letter-spacing: -0.035em;
	max-width: 16ch;
}

.empire-hero__body p {
	max-width: 46ch;
	margin-top: var(--wp--preset--spacing--40);
}

.empire-hero__label > * { margin: 0; }
.empire-hero__label h6 { margin-top: 0.875rem; }

/* Spec strip — the header block of an estimate, rendered as a definition list */
.empire-spec {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	background: rgba(255, 255, 255, 0.16);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.empire-spec > div {
	background: transparent;
	padding: 1.125rem 0 1.125rem 1.25rem;
	backdrop-filter: none;
}

.empire-spec dt {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
	opacity: 0.75;
	margin-bottom: 0.35rem;
}

.empire-spec dd {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--paper);
	margin: 0;
}

/* --- 13.3 Cards as numbered line items ---------------------------------
   Numbers come from a CSS counter, so the markup stays editable blocks.
   A scope of work is a numbered list; this one is too.
   ---------------------------------------------------------------------- */

.empire-cards {
	counter-reset: empire-card;
}

.empire-card {
	position: relative;                 /* anchors the stretched link */
	counter-increment: empire-card;
	border: 0;
	border-top: 2px solid var(--wp--preset--color--ink);
	border-radius: 0;
	background: transparent;
	padding: 0 0 1.75rem;
	gap: 0;
	transition: border-color 160ms ease;
}

.empire-card:hover {
	box-shadow: none;
	transform: none;
	border-top-color: var(--wp--preset--color--pine);
}

.empire-card > *:not(.empire-card__media) {
	margin-inline: 0;
}

.empire-card__media {
	order: -1;
	margin-bottom: 1.25rem;
	border: 0;
	border-radius: 2px;
	aspect-ratio: 3 / 2;
}

.empire-card h3 {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-top: 1rem;
	letter-spacing: -0.015em;
}

.empire-card h3::before {
	content: counter(empire-card, decimal-leading-zero);
	flex: none;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--walnut);
	transform: translateY(-0.15em);
}

.empire-card p {
	margin-top: 0.5rem;
	max-width: 34ch;
}

/* Whole card is the click target. The visible link stays for screen readers
   and keyboard users; the pseudo-element does the hit area. */
.empire-card__link {
	margin-top: 1rem !important;
}

.empire-card__link a {
	border-bottom: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.empire-card__link a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.empire-card__link a::after {
	content: "→";
	transition: transform 160ms ease;
}

.empire-card:hover .empire-card__link a::after {
	transform: translateX(4px);
}

.empire-card--placeholder {
	border-top-color: var(--wp--preset--color--line);
}

/* --- 13.4 Rhythm -------------------------------------------------------
   Uniform padding on every section is what makes a page read as a stack of
   boxes. Dark sections get more air; light ones sit tighter.
   ---------------------------------------------------------------------- */

main > .wp-block-group.alignfull.has-ink-background-color,
main > .wp-block-group.alignfull.has-pine-background-color {
	padding-top: clamp(4.5rem, 9vw, 8rem);
	padding-bottom: clamp(4.5rem, 9vw, 8rem);
}

/* The topbar is a strip, not a section. Say so explicitly so no future
   background rule can inflate it again. */
.empire-topbar {
	padding-block: 0.55rem !important;
}

/* --- 13.5 Header ------------------------------------------------------- */

.empire-header__inner {
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.empire-brand {
	gap: 0.75rem;
	align-items: center;
}

.empire-brand__text > * { margin: 0; }

.empire-brand__tag {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.625rem !important;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-top: 0.15rem !important;
}

.empire-nav {
	flex: 1;
}

.empire-nav .wp-block-navigation__container {
	gap: clamp(1rem, 2.2vw, 2rem);
}

.empire-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
	letter-spacing: 0.01em;
}

.empire-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--pine);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 160ms ease;
}

.empire-nav .wp-block-navigation-item__content:hover::after,
.empire-nav .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.empire-header__phone > * { margin: 0; }

.empire-header__phone-label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.625rem !important;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.1rem !important;
}

.empire-topbar {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- 13.6 Breakpoints for the structure pass ---------------------------- */

@media (min-width: 600px) {
	.empire-spec {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.empire-hero__grid {
		grid-template-columns: 190px minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50);
		align-items: start;
	}

	.empire-hero .wp-block-cover__inner-container {
		gap: var(--wp--preset--spacing--80);
	}
}

/* =========================================================================
   14. ICONS
   Font Awesome Free 6 artwork, inlined as a sprite. They inherit currentColor,
   so an icon is never a colour decision — it follows the text it sits with.
   ====================================================================== */

.empire-icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex: none;
	vertical-align: -0.125em;
	margin-right: 0.5em;
}

.empire-spec dd {
	display: flex;
	align-items: center;
}

.empire-spec .empire-icon {
	color: var(--wp--preset--color--sand);
	opacity: 0.8;
	font-size: 0.85em;
}

.empire-footer__contact a,
.empire-footer__social a,
.empire-footer__address {
	display: inline-flex;
	align-items: flex-start;
}

.empire-footer__address .empire-icon,
.empire-footer__contact .empire-icon,
.empire-footer__social .empire-icon {
	color: var(--wp--preset--color--sand);
	margin-top: 0.25em;
}

.empire-mobile-cta .empire-icon {
	margin-right: 0;
	font-size: 0.95em;
}

/* Placeholder glyph inside a service card's media box. Sits at 12% opacity —
   present enough to signal the service, quiet enough to disappear the moment
   a real project photo replaces it. */
.empire-card__media {
	display: grid;
	place-items: center;
}

.empire-card__glyph {
	width: 3.25rem;
	height: 3.25rem;
	fill: var(--wp--preset--color--ink);
	opacity: 0.12;
}

.empire-card:hover .empire-card__glyph {
	opacity: 0.18;
}

/* Hero headline: three short lines read better than two very long ones on a
   wide screen, but 16ch was forcing four. */
.empire-hero__body h1 {
	max-width: 19ch;
}

/* Brand lockup was crowding the nav on 1440px+. */
.empire-brand .wp-block-site-title {
	font-size: clamp(1.0625rem, 1.4vw, 1.3125rem) !important;
	letter-spacing: -0.025em;
}

/* =========================================================================
   15. SERVICE HUB CARDS — photo grid
   Each card has a real photo slot. Until a photo exists the slot holds the
   service glyph at low opacity, at the same aspect ratio, so dropping the
   image in later changes nothing about the layout. CLS stays at zero either
   way, which is the whole point of reserving the box now.
   ====================================================================== */

.empire-svc-group { margin-top: var(--wp--preset--spacing--60); }

.empire-svc-group__head {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding-bottom: 0.875rem;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	margin-bottom: var(--wp--preset--spacing--40);
}

.empire-svc-group__head h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0;
	letter-spacing: -0.02em;
}

.empire-svc-group__count {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--walnut);
	margin-left: auto;
}

.empire-svc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

/* --- the card ---------------------------------------------------------- */

.empire-svc {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.empire-svc:hover,
.empire-svc:focus-visible {
	border-color: var(--wp--preset--color--pine);
	box-shadow: var(--wp--preset--shadow--card);
	text-decoration: none;
}

/* Photo slot. Fixed ratio so the grid never reflows when images arrive. */
.empire-svc__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--mist);
	border-bottom: 1px solid var(--wp--preset--color--line);
	/* No overflow clipping here. The chip is positioned to overhang this box
	   on purpose, and hiding overflow cut it in half. The photo gets its own
	   clipping wrapper instead. */
}

/* Clips the photo — and only the photo — so the hover zoom stays inside the
   frame while the chip can still straddle the edge. */
.empire-svc__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 6px 6px 0 0;
}

.empire-svc__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.empire-svc:hover .empire-svc__media img {
	transform: scale(1.03);
}

/* Placeholder glyph — disappears on its own the moment an <img> is added. */
.empire-svc__glyph {
	width: 3.5rem;
	height: 3.5rem;
	fill: var(--wp--preset--color--ink);
	opacity: 0.11;
}

/* Icon chip, straddling the photo edge. Keeps the icon system meaningful
   once photography takes over the visual weight. */
.empire-svc__chip {
	position: absolute;
	left: 1.25rem;
	bottom: -1.4375rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.875rem;
	height: 2.875rem;
	border-radius: 5px;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	transition: background-color 160ms ease, border-color 160ms ease;
}

.empire-svc__chip svg {
	width: 1.1875rem;
	height: 1.1875rem;
	fill: var(--wp--preset--color--pine);
	transition: fill 160ms ease;
}

.empire-svc:hover .empire-svc__chip {
	background: var(--wp--preset--color--pine);
	border-color: var(--wp--preset--color--pine);
}

.empire-svc:hover .empire-svc__chip svg {
	fill: var(--wp--preset--color--paper);
}

.empire-svc__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 2.125rem 1.5rem 1.5rem;
	flex: 1;
}

.empire-svc__cat {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--walnut);
}

.empire-svc__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
}

.empire-svc__desc {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.55;
	margin: 0;
	flex: 1;
}

.empire-svc__go {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--pine);
}

.empire-svc__go svg {
	width: 0.8em;
	height: 0.8em;
	fill: currentColor;
	transition: transform 160ms ease;
}

.empire-svc:hover .empire-svc__go svg {
	transform: translateX(4px);
}

/* --- feature card: the flagship service, laid out sideways ------------- */

.empire-svc--feature .empire-svc__media {
	aspect-ratio: 16 / 10;
}

.empire-svc--feature .empire-svc__title {
	font-size: var(--wp--preset--font-size--x-large);
}

.empire-svc--feature .empire-svc__desc {
	font-size: var(--wp--preset--font-size--medium);
	max-width: 48ch;
}

/* --- help panel -------------------------------------------------------- */

.empire-svc-help {
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--mist);
	border-left: 3px solid var(--wp--preset--color--walnut);
	border-radius: 0 6px 6px 0;
}

.empire-svc-help h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 0.75rem;
}

.empire-svc-help p {
	max-width: 58ch;
	margin: 0;
}

@media (min-width: 640px) {
	.empire-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.empire-svc--feature {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.empire-svc--feature .empire-svc__media {
		aspect-ratio: auto;
		height: 100%;
		border-bottom: 0;
		border-right: 1px solid var(--wp--preset--color--line);
	}

	.empire-svc--feature .empire-svc__chip {
		bottom: 1.25rem;
	}

	.empire-svc--feature .empire-svc__body {
		padding: var(--wp--preset--spacing--50);
		justify-content: center;
	}
}

@media (min-width: 1040px) {
	.empire-svc-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================================
   15b. SERVICE HUB — layout corrections
   ====================================================================== */

/* One card in a multi-column grid rendered at half width with dead space
   beside it. The feature always takes the whole row. */
.empire-svc-grid > .empire-svc--feature {
	grid-column: 1 / -1;
}

.empire-svc-group:first-of-type {
	margin-top: var(--wp--preset--spacing--50);
}

/* =========================================================================
   16. SERVICE PAGE HEADER
   Dark band by default. A featured image, when one exists, sits behind the
   type as a background layer rather than beside it in a column.
   ====================================================================== */

.empire-service-head {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-bottom: 0;
}

/* The background layer. If the page has no featured image WordPress renders
   nothing here, so the band is simply solid ink — no half-opaque overlay
   sitting on white, which is what turned the homepage hero grey. */
.empire-service-head__bg {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	pointer-events: none;
}

.empire-service-head__bg .wp-block-post-featured-image,
.empire-service-head__bg figure {
	margin: 0;
	height: 100%;
}

.empire-service-head__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
	opacity: 0.34;
}

/* Keeps the type legible over any photograph, including a bright one. */
.empire-service-head__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 40%, rgba(16, 20, 24, 0.55) 0%, rgba(16, 20, 24, 0.88) 70%),
		linear-gradient(180deg, rgba(16, 20, 24, 0.7) 0%, rgba(16, 20, 24, 0.92) 100%);
}

.empire-service-head__inner {
	position: relative;
	z-index: 1;
}

.empire-service-head h1 {
	color: var(--wp--preset--color--paper);
	max-width: 17ch;
	margin-top: var(--wp--preset--spacing--30);
	letter-spacing: -0.03em;
}

.empire-service-head .wp-block-post-excerpt {
	max-width: 56ch;
	margin-top: var(--wp--preset--spacing--40);
}

.empire-service-head .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Breadcrumbs sit on the dark band now. */
.empire-service-head .wp-block-shortcode {
	color: var(--wp--preset--color--sand);
	opacity: 0.75;
}

.empire-service-head .wp-block-shortcode a {
	color: var(--wp--preset--color--sand);
}

.empire-service-head .wp-block-shortcode a:hover {
	color: var(--wp--preset--color--paper);
}

.empire-service-head .empire-swatch-rule {
	margin-bottom: 0;
}

/* =========================================================================
   16b. SERVICE HEADING — one line on desktop
   The longest title on the site is 47 characters. Sized in cqi against the
   header container rather than the viewport, so it tracks the box it has to
   fit inside. Forced to a single line only above 1100px — at phone widths a
   47-character line would land around 13px, which is not a headline.
   ====================================================================== */

.empire-service-head__inner {
	container-type: inline-size;
}

.empire-service-head h1 {
	max-width: none;
}

@media (min-width: 1100px) {
	.empire-service-head h1 {
		white-space: nowrap;
		font-size: clamp(2rem, 3.7cqi, 3.5rem);
		line-height: 1.1;
	}
}

/* =========================================================================
   16c. SERVICE HEADER — centred
   Applied to the template, not to one page. A single page styled differently
   inside a shared template is how a design system starts coming apart.
   ====================================================================== */

.empire-service-head__inner {
	text-align: center;
}

.empire-service-head__inner .empire-swatch-rule {
	margin-inline: auto;
}

.empire-service-head h1 {
	margin-inline: auto;
}

.empire-service-head .wp-block-post-excerpt {
	margin-inline: auto;
}

.empire-service-head .wp-block-buttons {
	justify-content: center;
}

/* Breadcrumb trails read oddly centred under a centred title — it stays put
   at the top left where the eye expects a trail to start. */
.empire-service-head .wp-block-shortcode {
	text-align: left;
}

/* =========================================================================
   17. PHOTO PLACEHOLDER
   Cards still waiting on a real photograph. Diagonal hairlines at deck-board
   spacing — quiet, on-subject, and it reads as a designed tile rather than a
   missing image sitting next to cards that have one.
   ====================================================================== */

.empire-svc__media:not(:has(.empire-svc__frame)) {
	background-color: var(--wp--preset--color--mist);
	background-image:
		repeating-linear-gradient(115deg, transparent 0 15px, rgba(16, 20, 24, 0.05) 15px 16px),
		linear-gradient(160deg, rgba(122, 74, 34, 0.05) 0%, transparent 60%);
}

.empire-svc__media:not(:has(.empire-svc__frame)) .empire-svc__glyph {
	opacity: 0.16;
	fill: var(--wp--preset--color--walnut);
}

.empire-svc:hover .empire-svc__media:not(:has(.empire-svc__frame)) .empire-svc__glyph {
	opacity: 0.24;
}

/* The background layer is a positioned wrapper, not page content — it has to
   ignore the constrained container width and the global padding it inherits,
   or the photo stops short of the band edges. */
.empire-service-head__bg,
.empire-service-head__bg > .wp-block-post-featured-image,
.empire-service-head__bg figure {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.empire-service-head__bg {
	height: 100%;
}

/* =========================================================================
   18. PROSE SCALE — corrections
   WordPress's fluid typography engine rewrote the font-size presets rather
   than using the min/max pairs in theme.json: "large" came out at 36px and
   "x-large" at 42px. The result was a lead paragraph the same size as an H3,
   and an H3 within 6px of its own H2. Running-copy sizes are pinned here so
   the hierarchy holds regardless of what the engine decides.
   ====================================================================== */

.empire-prose p.has-large-font-size {
	font-size: clamp(1.1875rem, 0.95rem + 0.9vw, 1.4375rem) !important;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	max-width: 46ch;
}

.empire-prose h3 {
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.625rem) !important;
}

.empire-prose p,
.empire-prose li {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

/* The measure guard is for running text. It was also capping the process list,
   which is a grid — a four-column layout squeezed into a 66-character column.
   Grids opt out. */
.empire-prose .empire-steps,
.empire-prose .empire-checklist,
.empire-prose .empire-arealist,
.empire-prose .empire-related {
	max-width: none !important;
}

/* 1fr resolves to minmax(auto, 1fr), so the longest word in one step widened
   its own track and threw the columns out of true (210 / 192 / 192 / 192). */
.empire-steps { grid-template-columns: 1fr; }
@media (min-width: 782px)  { .empire-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .empire-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.empire-process { grid-template-columns: 1fr; }
@media (min-width: 782px)  { .empire-process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .empire-process { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* =========================================================================
   19. SERVICE PAGE — facts strip and inline figure
   The strip answers the three things a homeowner scans for before reading
   anything. The figure gives the photograph a job inside the content rather
   than leaving it as 34%-opacity texture behind the header.
   ====================================================================== */

.empire-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--wp--preset--color--line);
	border-block: 1px solid var(--wp--preset--color--line);
	margin: 0 0 var(--wp--preset--spacing--60);
	max-width: none !important;
}

.empire-facts > div {
	background: var(--wp--preset--color--paper);
	padding: 1.125rem 1.25rem;
}

.empire-facts dt {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--walnut);
	margin-bottom: 0.3rem;
}

.empire-facts dd {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.empire-figure {
	margin: var(--wp--preset--spacing--60) 0;
	max-width: none !important;
}

.empire-figure__frame {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--mist);
}

.empire-figure__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.empire-figure figcaption {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
	margin-top: 0.75rem;
	padding-left: 0.875rem;
	border-left: 2px solid var(--wp--preset--color--walnut);
}

@media (min-width: 700px) {
	.empire-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================================
   21. CROSS-LINKING — service ↔ city
   Ten service pages and six city pages, each linking to the whole of the
   other set. 120 paths through 16 pages, instead of 60 near-identical ones.
   ====================================================================== */

.empire-arealinks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.625rem;
	margin-top: var(--wp--preset--spacing--40);
}

.empire-arealink {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--paper);
	text-decoration: none;
	transition: border-color 140ms ease, background-color 140ms ease;
}

.empire-arealink:hover {
	border-color: var(--wp--preset--color--pine);
	background: var(--wp--preset--color--mist);
	text-decoration: none;
}

.empire-arealink__city {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.empire-arealink__meta {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--walnut);
	white-space: nowrap;
}

.empire-svclinks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--40);
	max-width: none !important;
}

.empire-svclink {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 140ms ease, background-color 140ms ease;
}

.empire-svclink:hover {
	border-color: var(--wp--preset--color--pine);
	background: var(--wp--preset--color--mist);
	text-decoration: none;
}

.empire-svclink .empire-icon {
	color: var(--wp--preset--color--pine);
	flex: none;
}

/* The card description used to be a <p> nested inside a <span>. A span may only
   contain phrasing content, so the HTML parser force-closed the span and the
   anchor around it, then reopened an empty anchor — ten real cards and ten
   ghosts. It is a <span> now and takes its block behaviour from here. */
.empire-svc__desc {
	display: block;
}

/* The two links back up the hierarchy — to the full service page and to the
   city hub — are navigation, not siblings. The sand border separates them from
   the nine sideways links above. */
.empire-svclinks--up {
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	margin-top: 0.75rem;
}

.empire-svclinks--up .empire-svclink {
	border-color: var(--wp--preset--color--sand);
	background: var(--wp--preset--color--mist);
	font-weight: 600;
}

.empire-svclinks--up .empire-svclink:hover {
	border-color: var(--wp--preset--color--walnut);
}

.empire-svclinks--up .empire-icon {
	color: var(--wp--preset--color--walnut);
}

/* =========================================================================
   22. ESTIMATE FORM
   Every call to action on this site ends here. It gets the same care as the
   pages that lead to it.
   ====================================================================== */

.empire-form {
	margin: var(--wp--preset--spacing--50) 0 0;
	max-width: none !important;
}

.empire-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
}

.empire-form__field {
	display: block;
	margin-bottom: var(--wp--preset--spacing--30);
	border: 0;
	padding: 0;
}

.empire-form__label {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink);
	margin-bottom: 0.4rem;
}

.empire-form__label em {
	font-style: normal;
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--walnut);
	margin-left: 0.4rem;
}

.empire-form input[type="text"],
.empire-form input[type="tel"],
.empire-form input[type="email"],
.empire-form select,
.empire-form textarea {
	width: 100%;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	padding: 0.75rem 0.875rem;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.empire-form input:focus,
.empire-form select:focus,
.empire-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--pine);
	box-shadow: 0 0 0 3px rgba(31, 95, 74, 0.12);
}

.empire-form textarea {
	resize: vertical;
	min-height: 8rem;
}

.empire-form input[type="file"] {
	width: 100%;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	padding: 0.75rem;
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: 3px;
	background: var(--wp--preset--color--mist);
}

.empire-form__hint {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
	margin-top: 0.4rem;
}

.empire-form__error {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	font-weight: 600;
	color: #9A2B1E;
	margin-top: 0.35rem;
}

.empire-form__alert {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	background: #FBEEEC;
	border-left: 3px solid #9A2B1E;
	padding: 0.875rem 1rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

.empire-form__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.empire-form__radios label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
}

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and one that skips this one still looks like a bot to us. */
.empire-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.empire-form__submit {
	display: inline-block;
	background: var(--wp--preset--color--pine);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	border: 0;
	border-radius: 2px;
	padding: 1rem 2rem;
	cursor: pointer;
	transition: background-color 140ms ease;
	margin-top: var(--wp--preset--spacing--30);
}

.empire-form__submit:hover {
	background: var(--wp--preset--color--pine-dark);
}

.empire-form__note {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
	margin-top: 0.875rem;
}

@media (min-width: 700px) {
	.empire-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.empire-form__field--wide { grid-column: 1 / -1; }
}

/* =========================================================================
   23. HERO ALIGNMENT
   The cover block carries 20px of its own inline padding and renders its inner
   container as a flow layout, so wide rows inside the hero came out at 1376px
   while every other wide row on the page sat at 1416. Give the cover the same
   side padding the rest of the page uses and the two line up.
   ====================================================================== */

.empire-hero {
	padding-left: clamp(1.25rem, 4vw, 3rem) !important;
	padding-right: clamp(1.25rem, 4vw, 3rem) !important;
}

.empire-hero .wp-block-cover__inner-container {
	padding-inline: 0 !important;
}

.empire-hero .wp-block-cover__inner-container > .alignwide {
	max-width: var(--wp--style--global--wide-size) !important;
	margin-inline: auto !important;
	width: 100%;
}

/* The cover's dim layer is a single span, and content filters keep removing it —
   a save through the classic editor stripped it once and left white type sitting
   on a white page. The hero must not depend on that span surviving, so ink is set
   on the block itself. The span still does its job once a photo is added; it is
   just no longer load-bearing. */
.empire-hero {
	background-color: var(--wp--preset--color--ink);
}

.empire-hero .wp-block-cover__background {
	z-index: 0;
}

.empire-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/* =========================================================================
   24. HEADING RHYTHM
   A heading belongs to the text underneath it, not floating between two
   paragraphs. Space above separates it from what came before; space below
   should be small enough that the eye reads heading and paragraph as one unit.

   Measured before this change: an H2 at 42px had 36px above and 16px below —
   near enough symmetrical, which is exactly what made them look detached.

   Space above is set in em so it scales with the heading. Space below is set on
   the element that follows, because that is where WordPress puts the block gap.
   ====================================================================== */

.empire-prose h2,
.entry-content > h2 { margin-top: 1.6em !important; }

.empire-prose h3,
.entry-content > h3 { margin-top: 1.9em !important; }

.empire-prose h4,
.entry-content > h4 { margin-top: 1.7em !important; }

.empire-prose h2 + *,
.empire-prose h3 + *,
.empire-prose h4 + *,
.entry-content > h2 + *,
.entry-content > h3 + *,
.entry-content > h4 + * { margin-top: 0.5rem !important; }

/* Cards and step lists set their own rhythm — leave them alone. */
.empire-steps h3,
.empire-process h3,
.empire-svc h3 { margin-top: 0 !important; }

.empire-steps h3 + p,
.empire-process h3 + p { margin-top: 0.35rem !important; }

/* Service page header: the intro binds to the title the same way. */
.empire-service-head h1 + *,
.empire-service-head .wp-block-post-excerpt { margin-top: 0.75rem !important; }

/* =========================================================================
   25. SECTION HEADS — rebuilt
   The side rail cost more than it earned. Measured before this change: the
   eyebrow sat in a 190px column with a 116px gap beside it, so headings began
   306px inside the content edge — and because the eyebrow was placed on the
   second grid row, a three-line heading pushed it 150px down, level with the
   middle of the title rather than the top of it. Stacked and left-aligned, the
   whole thing reads in one pass and the heading gets the full column.
   ====================================================================== */

.empire-section-head {
	display: block !important;
	text-align: left;
	/* No max-width here. The head is a normal constrained child so it lands on
	   the same left edge as the grid below it; the measure is capped on the
	   heading and the intro instead. */
}

.empire-section-head > * {
	grid-column: auto !important;
	grid-row: auto !important;
}

.empire-section-head .empire-swatch-rule { margin: 0 0 0.875rem; }

.empire-section-head h6 {
	margin: 0 0 0.625rem !important;
	text-align: left;
}

/* 52px across three lines was the single biggest space cost on the page. */
.empire-section-head h2 {
	font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.5rem) !important;
	line-height: 1.12;
	max-width: 30ch !important;
	margin: 0 !important;
	text-align: left;
}

.empire-section-head p {
	margin-top: 0.75rem !important;
	max-width: 54ch;
	text-align: left;
}

/* Sections were running 112px of padding top and bottom. */
.wp-block-group.alignfull {
	padding-top: clamp(3rem, 5.5vw, 4.5rem) !important;
	padding-bottom: clamp(3rem, 5.5vw, 4.5rem) !important;
}

.empire-hero {
	padding-top: clamp(3.5rem, 6vw, 5rem) !important;
	padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}

.empire-svc-grid,
.empire-arealinks,
.empire-faq,
.empire-process {
	margin-top: var(--wp--preset--spacing--50) !important;
}

/* =========================================================================
   26. ESTIMATE PAGE
   The page asked for the estimate five times over: header button, sidebar
   card, bottom CTA band, the form itself, and the sticky mobile bar. On the
   one page where someone is already filling the form in, four of those are
   noise — and the form did not start until 30% of the way down. The template's
   generic furniture is switched off here and replaced with the only thing a
   person actually wants at this point: what happens after they press send.
   ====================================================================== */

.page-id-18 .empire-service-head .wp-block-buttons,
.page-id-18 .empire-aside,
.page-id-18 .has-pine-background-color,
.page-id-18 .empire-arealinks {
	display: none !important;
}

.page-id-18 .empire-service-body { grid-template-columns: 1fr !important; }
.page-id-18 .empire-prose { max-width: none; }

.empire-estimate {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	max-width: none !important;
}

.empire-estimate__main { min-width: 0; }

.empire-estimate__hint {
	background: var(--wp--preset--color--mist);
	border-left: 3px solid var(--wp--preset--color--pine);
	padding: 0.875rem 1.125rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem !important;
	line-height: 1.5;
	margin: 0 0 var(--wp--preset--spacing--40);
	max-width: none;
}

.empire-estimate__rail {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.empire-estimate__panel {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--paper);
}

.empire-estimate__panel--quiet { background: var(--wp--preset--color--mist); }

.empire-estimate__eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--walnut);
	margin-bottom: 1rem;
}

.empire-estimate__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.empire-estimate__steps li { display: flex; gap: 0.875rem; align-items: flex-start; }

.empire-estimate__steps li > span {
	flex: none;
	width: 1.625rem;
	height: 1.625rem;
	border-radius: 50%;
	background: var(--wp--preset--color--pine);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.empire-estimate__steps strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	line-height: 1.3;
}

.empire-estimate__steps p {
	margin: 0.2rem 0 0;
	font-size: 0.8125rem !important;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}

.empire-estimate__phone {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.empire-estimate__phone:hover { color: var(--wp--preset--color--pine); }

.empire-estimate__panel--quiet p {
	font-size: 0.8125rem !important;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin: 0.625rem 0 0;
}

.empire-estimate__trust {
	list-style: none;
	margin: 1rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--wp--preset--color--line);
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.empire-estimate__trust li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

.empire-estimate__trust .empire-icon { color: var(--wp--preset--color--pine); margin-top: 0.15em; }

@media (min-width: 1000px) {
	.empire-estimate { grid-template-columns: minmax(0, 1fr) 320px; }
	.empire-estimate__rail { position: sticky; top: 6.5rem; }
}

/* =========================================================================
   27. LOGO
   The lockup is 7.18:1. Anything that constrains it by height alone will make
   it disappear; it is sized on width and the aspect ratio does the rest.
   ====================================================================== */

.empire-header .wp-block-site-logo img {
	max-width: 240px;
	height: auto;
	display: block;
}

.empire-footer__logo { display: inline-block; }

.empire-footer__logo img {
	width: 210px;
	height: auto;
	display: block;
	margin-bottom: var(--wp--preset--spacing--30);
}

@media (max-width: 900px) {
	.empire-header .wp-block-site-logo img { max-width: 180px; }
}

/* =========================================================================
   27. LOGO
   The block requests a 480px file so the browser has something to work with on
   a retina display; CSS caps what is actually shown. The lockup carries the
   company name, so the text title beside it would just say it twice.
   ====================================================================== */

.empire-brand .wp-block-site-logo,
.empire-brand .wp-block-site-logo img {
	max-width: none;
}

.empire-brand .wp-block-site-logo img {
	width: clamp(180px, 17vw, 232px);
	height: auto;
	display: block;
}

/* Footer takes the light version — pine-dark on ink is 1.8:1 and effectively
   invisible. */
.empire-footer .empire-footer__logo img {
	width: clamp(180px, 16vw, 210px);
	height: auto;
	display: block;
	margin-bottom: var(--wp--preset--spacing--30);
}

@media (max-width: 899px) {
	.empire-brand .wp-block-site-logo img { width: 168px; }
}

/* =========================================================================
   28. MOBILE ACTION BAR — removed
   Client decision. The markup is also gone from the templates in the source, so
   this rule is only here to switch it off on installs that still have it. The
   body padding that reserved space for it goes with it, otherwise every page
   keeps 60px of dead space at the bottom on phones.
   ====================================================================== */

.empire-mobile-cta { display: none !important; }

body { padding-bottom: 0 !important; }

/* =========================================================================
   29. STICKY HEADER
   .empire-header already had position:sticky and it did nothing — sticky only
   travels inside its parent, and its parent is the template-part wrapper,
   which is exactly as tall as the header itself. The wrapper is the element
   that has to stick.

   On desktop it sticks at -40px so the topbar scrolls up out of view and the
   nav bar lands flush at the top. On phones the topbar is already hidden, so
   top is 0.
   ====================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.empire-header {
	position: static;
	box-shadow: 0 1px 0 var(--wp--preset--color--line);
}

@media (min-width: 900px) {
	.wp-site-blocks > header.wp-block-template-part { top: -40px; }
}

/* The mobile menu overlay has to clear the sticky header. */
.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 200;
}

/* Anchor jumps must not land under the sticky bar. */
:target { scroll-margin-top: 6rem; }

/* =========================================================================
   30. FIXED HEADER
   Sticky worked, but it let the topbar scroll up 40px before pinning — a small
   jump on every scroll. Fixed removes the movement entirely.

   A fixed element leaves the document flow, so the space it used to occupy has
   to be given back or the hero starts underneath it. That is what the padding
   on .wp-site-blocks is doing, and why it changes at 900px: the topbar is
   hidden on phones, so the header is 77px there and 117px above.
   ====================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: fixed !important;
	top: 0 !important;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
}

.wp-site-blocks { padding-top: 77px; }

@media (min-width: 900px) {
	.wp-site-blocks { padding-top: 117px; }
}

/* Anchor targets must clear the fixed bar. */
:target { scroll-margin-top: 8rem; }

/* =========================================================================
   31. MOBILE MENU
   The overlay shipped as four links floating on a plain panel. It now carries
   the logo, hairline dividers between rows, and the two actions that were
   taken out of the header — the phone and the estimate button. Those two are
   nav items with a class, so they exist in the markup and are simply hidden
   above 900px.
   ====================================================================== */

.empire-nav .wp-block-navigation-item.empire-nav__mobile { display: none !important; }

@media (max-width: 899px) {

	.wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--ink) !important;
		color: var(--wp--preset--color--paper) !important;
		padding: 0 !important;
		z-index: 200;
	}

	/* Logo at the top of the panel, on the same left edge as the rows below. */
	.wp-block-navigation__responsive-container.is-menu-open::before {
		content: "";
		display: block;
		height: 30px;
		margin: 1.75rem 1.5rem 1.5rem;
		background: url('/wp-content/uploads/2026/07/logo-white.png') left center / contain no-repeat;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		max-width: none;
		padding: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: 1.5rem;
		right: 1.25rem;
		color: var(--wp--preset--color--sand);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: block;
		gap: 0;
		padding: 0;
		border-top: 1px solid rgba(255,255,255,.14);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		display: block;
		border-bottom: 1px solid rgba(255,255,255,.14);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		padding: 1.05rem 1.5rem;
		font-family: var(--wp--preset--font-family--display);
		font-size: 1.25rem;
		font-weight: 600;
		letter-spacing: -.01em;
		color: var(--wp--preset--color--paper);
		text-decoration: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }

	.empire-nav .wp-block-navigation-item.empire-nav__mobile { display: block !important; }

	/* Phone reads as a number, not a page. */
	.empire-nav__phone .wp-block-navigation-item__content {
		color: var(--wp--preset--color--sand) !important;
		font-size: 1.375rem !important;
		font-weight: 700 !important;
	}

	/* The estimate row is the one action on the panel, so it looks like one. */
	.empire-nav__cta {
		border-bottom: 0 !important;
		margin: 1.25rem 1.5rem;
	}

	.empire-nav__cta .wp-block-navigation-item__content {
		background: var(--wp--preset--color--pine);
		text-align: center;
		border-radius: 2px;
		padding: 1rem !important;
		font-size: 1rem !important;
	}
}

/* =========================================================================
   32. HEADER TO HERO — gap removed
   WordPress puts its block gap between every child of .wp-site-blocks, so
   <main> was carrying 16px of margin under a header that is fixed and no
   longer in the flow. There is nothing above it to be spaced away from.

   The second rule is for logged-in users only: the admin bar sits at the very
   top, and a header fixed at 0 covers it. Nobody visiting the site sees this,
   but the client editing it would.
   ====================================================================== */

.wp-site-blocks > main {
	margin-top: 0 !important;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px !important;
}

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px !important; }
}

/* =========================================================================
   33. HEADER CTA — desktop only
   The rule hiding it below 900px was being beaten by core's .wp-block-buttons
   { display: flex }, which has the same specificity and loads later, so the
   button was still showing on phones. The estimate action lives inside the
   mobile menu now, so the header keeps just the logo and the menu button.
   ====================================================================== */

@media (max-width: 899px) {
	.empire-header .empire-header__cta,
	.empire-header .empire-header__actions .wp-block-buttons {
		display: none !important;
	}

	.empire-header__inner {
		gap: var(--wp--preset--spacing--30);
	}

	/* With the button gone the menu button should sit hard right. */
	.empire-nav { flex: 1; }
	.empire-nav .wp-block-navigation__responsive-container-open { margin-left: auto; }
}

/* =========================================================================
   34. HEADER HEIGHT — pinned to a number
   The gap under the mobile header came from me: removing the estimate button
   made the bar shorter, but .wp-site-blocks was still reserving 77px for it.

   Guessing the height once and hard-coding the padding will break again the
   next time anything inside the bar changes. Both values now come from one
   custom property, and the bar is given that exact height rather than being
   left to size itself from its contents.
   ====================================================================== */

:root {
	--empire-header-h: 64px;
	--empire-topbar-h: 0px;
}

@media (min-width: 900px) {
	:root {
		--empire-header-h: 77px;
		--empire-topbar-h: 40px;
	}
}

.empire-header {
	height: var(--empire-header-h);
	padding-block: 0 !important;
	display: flex;
	align-items: center;
}

.empire-header > .empire-header__inner { width: 100%; }

.wp-site-blocks {
	padding-top: calc(var(--empire-header-h) + var(--empire-topbar-h)) !important;
}

/* =========================================================================
   35. ESTIMATE FORM — responsive corrections
   Three real faults, measured:

   1. Some controls rendered at 13.3px. Safari on iOS zooms the whole page in
      when a field under 16px is focused, and it does not zoom back out. Every
      control is now at least 16px.
   2. The file input measured 1098px inside a 1072px column — it was not
      inheriting border-box, so its padding was added on top of width:100%.
   3. On a phone the rail sat below the form, so someone answered sixteen
      questions before finding out what happens next. It goes first.
   ====================================================================== */

.empire-form input,
.empire-form select,
.empire-form textarea,
.empire-form button {
	box-sizing: border-box;
	max-width: 100%;
	font-size: 1rem;
}

.empire-form input[type="file"] {
	font-size: .9375rem;
	line-height: 1.4;
}

.empire-form input[type="file"]::file-selector-button {
	font-family: var(--wp--preset--font-family--display);
	font-size: .875rem;
	font-weight: 600;
	padding: .5rem .875rem;
	margin-right: .75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

@media (max-width: 999px) {
	.empire-estimate { display: flex; flex-direction: column; }
	.empire-estimate__rail { order: -1; }
	.empire-estimate__main { order: 0; }
}

@media (max-width: 700px) {
	.empire-form__grid { grid-template-columns: 1fr; gap: 0; }

	.empire-form input,
	.empire-form select,
	.empire-form textarea { padding: .875rem .9375rem; }

	.empire-form__submit {
		width: 100%;
		padding: 1.125rem 1rem;
		font-size: 1.0625rem;
	}

	.empire-form__radios { gap: .875rem 1.25rem; }
	.empire-form__radios label { min-height: 44px; align-items: center; }

	.empire-estimate__panel { padding: var(--wp--preset--spacing--30); }
}

/* =========================================================================
   36. SERVICE BODY — two columns restored
   .empire-service-body was declared display:grid with one class. WordPress
   puts .wp-block-group.is-layout-flow { display: flow-root } on the same
   element — two classes, so it won. The body has been rendering as a single
   block on all seventeen pages that use this template: the article ran the
   full width with its measure capped at 751px, leaving 665px of empty page to
   its right, and the estimate rail dropped underneath instead of sitting
   beside it.
   ====================================================================== */

.wp-block-group.empire-service-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

@media (min-width: 1000px) {
	.wp-block-group.empire-service-body {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: var(--wp--preset--spacing--60);
	}
}

/* The estimate page runs one column on purpose. */
.page-id-18 .wp-block-group.empire-service-body {
	grid-template-columns: 1fr !important;
}

/* With the rail back in place the article no longer needs a separate cap —
   the column itself is the measure. */
@media (min-width: 1000px) {
	.empire-prose > .wp-block-post-content > p,
	.empire-prose > .wp-block-post-content > ul,
	.empire-prose > .wp-block-post-content > ol {
		max-width: 72ch;
	}
}

/* =========================================================================
   37. SERVICE BODY — column sized to the measure
   With the grid restored the article column was 1040px while the text inside
   it capped at 699px, so 341px of the column sat empty and the block read as
   left-weighted. The column is now sized to the measure itself, and the pair
   is centred in the page — nothing is stretched, nothing is stranded.
   ====================================================================== */

@media (min-width: 1000px) {
	.wp-block-group.empire-service-body {
		grid-template-columns: minmax(0, 720px) 340px;
		justify-content: center;
	}

	.empire-aside {
		position: sticky;
		top: calc(var(--empire-header-h) + var(--empire-topbar-h) + 1.5rem);
	}
}

/* Full-width components inside the article are not running text and should
   use the whole column. */
.empire-prose .empire-facts,
.empire-prose .empire-figure,
.empire-prose .empire-steps,
.empire-prose .empire-checklist,
.empire-prose .empire-faq,
.empire-prose .empire-svclinks,
.empire-prose .empire-related {
	max-width: none !important;
}

/* =========================================================================
   38. ONE CONTENT AXIS
   Measured across the site, text was starting at three different left edges:
   216px on the homepage, 208px on article pages, 235px on the hub pages. Near
   misses like that read as sloppiness rather than as a decision.

   Everything now sits on the 1080px content column. On article pages the
   article and the rail together total exactly 1080 (668 + 72 + 340), so the
   first character of body text lands on the same vertical line as the section
   headings on the homepage and the card grids on the hubs.

   668px is also a better measure than 720 — about 62 characters at 18px.
   ====================================================================== */

@media (min-width: 1000px) {
	.wp-block-group.empire-service-body {
		grid-template-columns: minmax(0, 668px) 340px;
		column-gap: 72px;
		justify-content: center;
	}
}

/* Hub pages are indexes, not articles. The card grid needs the full content
   column and there is no rail to put beside it — the grid squeezed to 720px
   was rendering cards at 229px instead of 336. */
.page-id-11 .wp-block-group.empire-service-body,
.page-id-14 .wp-block-group.empire-service-body,
.wp-block-group.empire-service-body:has(.empire-svc-grid) {
	grid-template-columns: minmax(0, 1fr) !important;
}

.page-id-11 .empire-aside,
.page-id-14 .empire-aside,
.empire-service-body:has(.empire-svc-grid) .empire-aside { display: none; }

.page-id-11 .empire-prose,
.page-id-14 .empire-prose,
.empire-service-body:has(.empire-svc-grid) .empire-prose {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	width: 100%;
}

/* =========================================================================
   39. GRID OVERFLOW AT NARROW WIDTHS
   Every auto-fill grid on the site used minmax(<length>, 1fr). That length is
   a hard floor: below it the track refuses to shrink, so at 390px the
   checklist computed three 339px columns, stretched its container to 1040px,
   and dragged the whole article column out with it — 670px of horizontal
   overflow on all twenty service pages.

   minmax(min(<length>, 100%), 1fr) keeps the intended column width while
   letting the track collapse to the container when there is less room.
   ====================================================================== */

.empire-checklist,
.wp-block-group.empire-checklist {
	grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)) !important;
}

.empire-svc-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.empire-arealinks {
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}

.empire-svclinks {
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

.empire-svclinks--up {
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

/* Media inside the article must never define the column width. */
.empire-prose img,
.empire-prose figure,
.empire-prose table { max-width: 100%; height: auto; }

/* Long unbroken strings — an email address, a URL — wrap instead of pushing. */
.empire-prose, .empire-estimate, .empire-footer { overflow-wrap: break-word; }

/* 39b. The root of it: the single-column rules were written as 1fr, which is
   shorthand for minmax(auto, 1fr). That auto floor is the item's min-content,
   so the track could not shrink below the widest thing inside it — 1040px in a
   350px container. minmax(0, 1fr) lets the track follow the container and the
   content wrap inside it. */

.wp-block-group.empire-service-body { grid-template-columns: minmax(0, 1fr); }

.empire-facts { grid-template-columns: minmax(0, 1fr); }

.empire-estimate { grid-template-columns: minmax(0, 1fr); }

.empire-form__grid { grid-template-columns: minmax(0, 1fr); }

.page-id-11 .wp-block-group.empire-service-body,
.page-id-14 .wp-block-group.empire-service-body,
.wp-block-group.empire-service-body:has(.empire-svc-grid) {
	grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 700px) {
	.empire-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.empire-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.wp-block-group.empire-service-body {
		grid-template-columns: minmax(0, 668px) 340px;
	}
	.empire-estimate { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* =========================================================================
   20. ESTIMATE RAIL — restored and retuned
   This section went missing during an earlier edit: the card lost its border,
   padding and background, and every line inside fell back to body type — a
   52px heading and 20px body inside a 340px column.

   Rebuilt smaller and quieter. A rail is support, not a second hero: it should
   read after the article, not compete with it.
   ====================================================================== */

.empire-aside__card {
	border: 1px solid var(--wp--preset--color--line);
	border-top: 3px solid var(--wp--preset--color--pine);
	border-radius: 8px;
	background: var(--wp--preset--color--paper);
	padding: 1.375rem 1.25rem 1.5rem;
	box-shadow: 0 1px 2px rgba(16,20,24,.04), 0 8px 24px -12px rgba(16,20,24,.12);
}

.empire-aside__eyebrow { display:block; font-family: var(--wp--preset--font-family--display); font-size:.625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: var(--wp--preset--color--walnut); line-height:1.2; margin:0 0 .5rem; }

.empire-aside__title { font-family: var(--wp--preset--font-family--display); font-size:1.0625rem !important; font-weight:700; line-height:1.25; letter-spacing:-.015em; color: var(--wp--preset--color--ink); margin:0 0 .5rem !important; }

.empire-aside__text { font-family: var(--wp--preset--font-family--display); font-size:.8125rem !important; line-height:1.5; color: var(--wp--preset--color--muted); margin:0 0 1.125rem !important; }

.empire-aside__btn { display:block; text-align:center; background: var(--wp--preset--color--pine); color: var(--wp--preset--color--paper); font-family: var(--wp--preset--font-family--display); font-size:.875rem; font-weight:600; line-height:1.2; padding:.8125rem 1rem; border-radius:3px; text-decoration:none; transition: background-color 140ms ease; }
.empire-aside__btn:hover { background: var(--wp--preset--color--pine-dark); color: var(--wp--preset--color--paper); text-decoration:none; }

.empire-aside__phone { display:flex; align-items:center; justify-content:center; gap:.4rem; margin-top:.75rem; font-family: var(--wp--preset--font-family--display); font-size:1rem; font-weight:700; line-height:1.2; color: var(--wp--preset--color--ink); text-decoration:none; }
.empire-aside__phone:hover { color: var(--wp--preset--color--pine); text-decoration:none; }

.empire-aside__list { list-style:none; margin:1.125rem 0 0; padding:1.125rem 0 0; border-top:1px solid var(--wp--preset--color--line); display:flex; flex-direction:column; gap:.5rem; }
.empire-aside__list li { display:flex; align-items:flex-start; gap:.5rem; font-family: var(--wp--preset--font-family--display); font-size:.75rem; line-height:1.4; color: var(--wp--preset--color--muted); margin:0; }
.empire-aside__list .empire-icon { color: var(--wp--preset--color--pine); margin-top:.1em; flex:none; }

/* Article components that went missing with it. */
.empire-prose .empire-checklist p { background: var(--wp--preset--color--paper); border:1px solid var(--wp--preset--color--line); border-radius:6px; padding:.875rem 1rem .875rem 2.625rem; margin:0; }
.empire-prose .empire-checklist p::before { left:1rem; top:1.35em; }

.empire-steps li { background: var(--wp--preset--color--paper); border:1px solid var(--wp--preset--color--line); border-top:2px solid var(--wp--preset--color--walnut); border-radius:0 0 6px 6px; padding:1.125rem 1rem 1.25rem; }

.empire-prose .empire-faq { border:1px solid var(--wp--preset--color--line); border-radius:6px; padding:0 1.25rem; background: var(--wp--preset--color--paper); }
.empire-prose .empire-faq .wp-block-details:last-child { border-bottom:0; }

/* =========================================================================
   40. PHONE NUMBERS AND ICON LISTS — guards
   A phone number split across two lines stops being a phone number. It only
   fitted by luck at the widths tested; nowrap makes it a rule.

   The bullet suppression is stated on every icon list rather than relying on
   list-style alone — markers came back once already when a style block went
   missing, and a stray bullet beside an icon is the kind of thing nobody
   notices until a client does.
   ====================================================================== */

.empire-aside__phone,
.empire-estimate__phone,
.empire-topbar__phone,
.empire-nav__phone .wp-block-navigation-item__content,
a[href^="tel:"] {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.empire-aside__list,
.empire-estimate__trust,
.empire-checklist,
.empire-steps,
.empire-process {
	list-style: none !important;
	padding-left: 0;
}

.empire-aside__list > li,
.empire-estimate__trust > li,
.empire-steps > li,
.empire-process > li { list-style: none !important; }

.empire-aside__list > li::marker,
.empire-estimate__trust > li::marker,
.empire-steps > li::marker,
.empire-process > li::marker { content: none; }

/* Icons in those lists must not shrink when the label wraps. */
.empire-aside__list .empire-icon,
.empire-estimate__trust .empire-icon { flex: none; }

/* =========================================================================
   41. FOOTER TAP TARGETS
   Measured at 390px: 19 of 21 footer links were 18–21px tall. WCAG 2.2 sets
   24px as the minimum for a pointer target and 44px is the practical figure on
   a phone — at 18px the service list is three links inside one thumb.

   The links become blocks with vertical padding rather than the rows being
   spaced apart, so the whole row is tappable, not just the words.
   ====================================================================== */

.empire-footer__list a,
.empire-footer a[href^="tel:"],
.empire-footer a[href^="mailto:"],
.empire-footer__meta a {
	display: inline-block;
	padding-block: .4375rem;
	min-height: 24px;
}

@media (max-width: 899px) {
	.empire-footer__list a,
	.empire-footer a[href^="tel:"],
	.empire-footer a[href^="mailto:"],
	.empire-footer__meta a {
		display: block;
		padding-block: .625rem;
		min-height: 44px;
		line-height: 1.5;
	}

	/* Rows are far enough apart that the padding does not merge them. */
	.empire-footer__list li + li { border-top: 1px solid rgba(255,255,255,.08); }
}

/* A visible focus ring — the footer is dark and the default outline is too. */
.empire-footer a:focus-visible {
	outline: 2px solid var(--wp--preset--color--sand);
	outline-offset: 2px;
	border-radius: 2px;
}

/* 41b. Three links sat outside the selectors above — the Facebook link and the
   two legal links in the closing line. Covering every anchor in the footer is
   simpler than listing them, and there is nothing in there that should be a
   small target. */

.empire-footer a:not(.wp-block-button__link):not(.empire-footer__logo) {
	display: inline-block;
	padding-block: .4375rem;
	min-height: 24px;
}



@media (max-width: 899px) {
	.empire-footer a:not(.wp-block-button__link):not(.empire-footer__logo) { padding-block: .625rem; min-height: 44px; }
	.empire-footer__meta a { display: inline-block; }
}

/* =========================================================================
   42. HERO PHOTO
   Every candidate was cropped to the hero shape and the luminance under the
   headline measured, rather than judged by eye. This crop reads 129 in the
   text zone and clears 3:1 for white type at 45%. The file it replaced was a
   478px source blown up 3x — sharp-looking in a thumbnail, soft across 1512px.

   A flat dim would waste the picture, so the darkening is directional: heavy on
   the left where the headline sits, light on the right where the work shows.
   ====================================================================== */

.empire-hero .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center center;
}

.empire-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/*
	 * Two crossed gradients, not one flat dim.
	 *
	 * Measured where the text actually reaches: the headline ends at 65% across,
	 * the standfirst at 76%, but the spec strip runs to 97%. A horizontal fade
	 * alone cannot work — the bottom band needs cover right across.
	 *
	 * Horizontal holds dark to 55% so the last word of the headline stays
	 * covered, then falls away from 78% to open the final third for the houses.
	 * Vertical is clear through the middle of the frame and closes down over the
	 * spec strip at the foot.
	 *
	 * Sampled through both: headline 6.2:1 and 3.9:1, standfirst 10.8:1, spec
	 * strip 10:1, and the houses on the right sit at 51-72 luminance — visible
	 * rather than mud.
	 */
	background:
		linear-gradient(90deg, rgba(16, 20, 24, 0.90) 0%, rgba(16, 20, 24, 0.84) 55%, rgba(16, 20, 24, 0.42) 78%, rgba(16, 20, 24, 0.18) 100%),
		linear-gradient(180deg, rgba(16, 20, 24, 0.34) 0%, rgba(16, 20, 24, 0.00) 38%, rgba(16, 20, 24, 0.10) 62%, rgba(16, 20, 24, 0.68) 100%);
}

.empire-hero .wp-block-cover__inner-container {
	z-index: 2;
}

@media (max-width: 899px) {
	/* On a phone the text spans the full width, so the gradient goes vertical. */
	.empire-hero::after {
		background: linear-gradient(180deg, rgba(16, 20, 24, 0.78) 0%, rgba(16, 20, 24, 0.84) 60%, rgba(16, 20, 24, 0.90) 100%);
	}

}

/* 42c. The overlay was painting over the headline. Section 30 had already put
   the inner container on z-index 1, and the gradient was on 1 as well — equal
   values, and a pseudo-element paints after its host's content, so the fade
   landed on top of the type. It measured white and rendered grey.

   The container is lifted clear rather than the overlay lowered, because the
   overlay still has to sit above the photograph. */
.empire-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
}

/* =========================================================================
   43. LINKS ON DARK BANDS
   Measured 1.00:1 — the link colour was identical to the background it sat on,
   so the Facebook link in the closing call to action was invisible. Anything
   inside a pine or ink band takes paper, and keeps an underline so it still
   reads as a link without relying on colour alone.

   The !important is not laziness: theme.json emits its link colour through
   :root :where(a), which outranks a plain class selector here whatever the
   source order.
   ====================================================================== */

.has-pine-background-color a,
.has-ink-background-color a,
.empire-hero a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--paper) !important;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.has-pine-background-color a:hover,
.has-ink-background-color a:hover,
.empire-hero a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--sand);
}

.has-pine-background-color .wp-block-button__link,
.has-ink-background-color .wp-block-button__link {
	text-decoration: none;
}

/* =========================================================================
   44. HERO — gradient moved off the pseudo-element
   The overlay kept landing on top of the headline. Both the gradient and the
   text container sat on z-index 1, and at equal values a pseudo-element paints
   after its host's content. Raising the container to 3 worked until the theme
   was reinstalled, at which point the same fight resumed.

   Rather than keep bidding up z-index, the gradient and the photograph are now
   background layers on the cover itself. Backgrounds always paint beneath
   content, so there is nothing left to lose. The <img> is hidden but kept in
   the markup so the alt text stays available to assistive tech.
   ====================================================================== */

.empire-hero {
	background-image:
		linear-gradient(90deg, rgba(16,20,24,.90) 0%, rgba(16,20,24,.84) 55%, rgba(16,20,24,.42) 78%, rgba(16,20,24,.18) 100%),
		linear-gradient(180deg, rgba(16,20,24,.34) 0%, rgba(16,20,24,0) 38%, rgba(16,20,24,.10) 62%, rgba(16,20,24,.68) 100%),
		url('/wp-content/uploads/2026/07/hero-painted-ladies-2880-scaled.jpg');
	background-size: cover, cover, cover;
	background-position: center, center, center;
	background-repeat: no-repeat;
}

.empire-hero::after { content: none !important; }

.empire-hero .wp-block-cover__image-background {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 899px) {
	.empire-hero {
		background-image:
			linear-gradient(180deg, rgba(16,20,24,.78) 0%, rgba(16,20,24,.84) 60%, rgba(16,20,24,.90) 100%),
			url('/wp-content/uploads/2026/07/hero-painted-ladies-2880-scaled.jpg');
		background-size: cover, cover;
		background-position: center, center;
	}
}

/* =========================================================================
   45. CONTACT FORM AND TURNSTILE
   The contact form reuses the estimate form's styling, so it needs almost
   nothing of its own — only a narrower measure, because four fields in a
   1000px column look stranded.
   ====================================================================== */

.empire-form--contact {
	max-width: 44rem;
}

.empire-turnstile {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	min-height: 65px;
}

/* The widget renders in an iframe that reports its own size; this stops the
   surrounding layout jumping while it loads. */
.empire-turnstile .cf-turnstile {
	display: block;
	max-width: 100%;
}

@media (max-width: 700px) {
	.empire-form--contact { max-width: none; }
}