/*
Theme Name: Elite Cleaning Contractors
Theme URI: https://www.elitecleaningmidlands.co.uk
Author: Elite Cleaning Contractors
Author URI: https://www.elitecleaningmidlands.co.uk
Description: Premium, editorial block theme for Elite Cleaning Contractors — a West Midlands commercial cleaning company. Full-site editing, self-hosted fonts, no page-builder required. Every page is editable in place from the WordPress editor.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elite-cleaning
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, business, editor-style, threaded-comments
*/

/* ==========================================================================
   Elite Cleaning — design system (ported from the React reference build)
   Short aliases for the theme.json presets so the CSS reads cleanly.
   ========================================================================== */
:root {
	--ec-bg: var(--wp--preset--color--background);
	--ec-surface: var(--wp--preset--color--surface);
	--ec-surface-2: var(--wp--preset--color--surface-2);
	--ec-ink: var(--wp--preset--color--ink);
	--ec-ink-soft: var(--wp--preset--color--ink-soft);
	--ec-ink-muted: var(--wp--preset--color--ink-muted);
	--ec-line: var(--wp--preset--color--line);
	--ec-brand: var(--wp--preset--color--brand);
	--ec-brand-ink: var(--wp--preset--color--brand-ink);
	/* A lighter cobalt for use on the near-black "ink" background. The base brand
	   (#1d52de) only hits 3:1 on ink; this lifts links/accents/focus to ~6:1. */
	--ec-brand-on-dark: #6f9bff;
	--ec-sans: var(--wp--preset--font-family--sans);
	--ec-mono: var(--wp--preset--font-family--mono);
	--ec-shadow: 0 30px 80px -30px rgba(10, 16, 24, 0.35);
	--ec-shadow-soft: 0 30px 80px -40px rgba(10, 16, 24, 0.22);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { font-feature-settings: "ss01", "cv11"; letter-spacing: -0.005em; }
::selection { background: color-mix(in oklab, var(--ec-brand) 25%, transparent); }

/* Tighten core layout rhythm so sections control their own vertical space */
.wp-site-blocks { overflow-x: clip; }

/* Let flex columns honour their width regardless of image intrinsic size — without
   this, columns containing larger source images refuse to shrink to their basis,
   making image widths inconsistent from row to row. */
.wp-block-columns > .wp-block-column { min-width: 0; }
img { max-width: 100%; height: auto; }

/* ----- Eyebrow / mono labels -------------------------------------------- */
.ec-eyebrow,
.ec-label {
	font-family: var(--ec-mono);
	font-size: 0.625rem;
	line-height: 1.4;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 500;
	display: inline-block;
}
.ec-eyebrow { color: var(--ec-brand); }
.ec-label { color: var(--ec-ink-muted); }
.has-mono-font-family { font-family: var(--ec-mono) !important; }

/* ----- Decorative dot grid background ----------------------------------- */
.ec-gridbg { position: relative; }
.ec-gridbg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(10, 16, 24, 0.06) 1px, transparent 1px);
	background-size: 40px 40px;
	opacity: 0.6;
	pointer-events: none;
	z-index: 0;
}
.ec-gridbg > * { position: relative; z-index: 1; }

/* ----- Hairline divider -------------------------------------------------- */
.ec-hairline { height: 1px; background: var(--ec-line); border: 0; width: 100%; }
.ec-rule-top { border-top: 1px solid var(--ec-ink); padding-top: 2rem; }

/* ==========================================================================
   Headings — make the big editorial type sing
   ========================================================================== */
h1, h2, h3, h4,
.wp-block-heading,
.wp-block-post-title { font-family: var(--ec-sans); font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; color: var(--ec-ink); }
h1, .wp-block-post-title { letter-spacing: -0.04em; line-height: 0.9; }
.ec-tighter { letter-spacing: -0.04em !important; }
.ec-brand-text { color: var(--ec-brand); }
strong { font-weight: 700; }

/* Body copy helpers used in patterns */
.ec-lead { font-size: 1.125rem; line-height: 1.7; color: var(--ec-ink-muted); font-weight: 300; }
.ec-muted { color: var(--ec-ink-muted); }
.ec-soft { color: var(--ec-ink-soft); }
@media (min-width: 782px) { .ec-lead { font-size: 1.25rem; } }

/* ==========================================================================
   Buttons
   ========================================================================== */
.wp-block-button__link {
	border-radius: 2px;
	font-size: 0.75rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	padding: 1.25rem 2.5rem;
	line-height: 1;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Outline variation */
.wp-block-button.is-style-ec-outline .wp-block-button__link {
	background: transparent;
	color: var(--ec-ink);
	border: 1px solid var(--ec-ink);
	font-weight: 700;
}
.wp-block-button.is-style-ec-outline .wp-block-button__link:hover { background: var(--ec-ink); color: var(--ec-bg); }
/* Outline on dark backgrounds */
.has-ink-background-color .wp-block-button.is-style-ec-outline .wp-block-button__link,
.ec-on-dark .wp-block-button.is-style-ec-outline .wp-block-button__link { color: var(--ec-bg); border-color: rgba(255,255,255,.4); }
.has-ink-background-color .wp-block-button.is-style-ec-outline .wp-block-button__link:hover,
.ec-on-dark .wp-block-button.is-style-ec-outline .wp-block-button__link:hover { background: var(--ec-bg); color: var(--ec-ink); }

/* Quiet text-link with arrow */
.ec-arrow-link a, a.ec-arrow-link {
	font-family: var(--ec-mono);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ec-brand);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	transition: gap .3s ease;
}
.ec-arrow-link a:hover, a.ec-arrow-link:hover { gap: 1.25rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.ec-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--ec-bg) 85%, transparent);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--ec-line);
}
.ec-site-header .wp-block-site-logo img { height: 42px; width: auto; }
.ec-nav .wp-block-navigation__container { gap: 2.25rem; }
.ec-nav a {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--ec-ink-soft);
	text-decoration: none;
}
.ec-nav a:hover, .ec-nav .current-menu-item a { color: var(--ec-brand); }

/* Services mega-menu dropdown — desktop only.
   Force an absolute overlay anchored to the Services item so it never pushes
   the header down and always drops directly beneath the trigger.
   On mobile the block falls back to the native inline overlay menu. */
@media (min-width: 782px) {
	.ec-site-header .ec-nav li.wp-block-navigation-item.has-child { position: relative; }
	.ec-site-header .ec-nav .wp-block-navigation__submenu-container {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: auto !important;
		z-index: 60;
		margin: 0 !important;
		min-width: 30rem !important;
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 0.25rem 1rem;
		padding: 1.5rem !important;
		background: var(--ec-bg) !important;
		border: 1px solid var(--ec-line);
		box-shadow: 0 36px 80px -34px rgba(10,16,24,.4);
		border-radius: 2px;
	}
	/* Reveal on hover/focus regardless of the block's JS state */
	.ec-site-header .ec-nav li.has-child:hover > .wp-block-navigation__submenu-container,
	.ec-site-header .ec-nav li.has-child:focus-within > .wp-block-navigation__submenu-container {
		opacity: 1 !important;
		visibility: visible !important;
	}
}
.ec-site-header .ec-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ec-ink-soft);
	padding: 0.6rem 0.75rem;
	border-radius: 2px;
	border-left: 2px solid transparent;
	transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.ec-site-header .ec-nav .wp-block-navigation__submenu-container li > .wp-block-navigation-item__content:hover {
	color: var(--ec-brand);
	background: var(--ec-surface);
	border-left-color: var(--ec-brand);
}
.ec-site-header .ec-nav .ec-mega-all { grid-column: 1 / -1 !important; margin-top: 0.5rem; border-top: 1px solid var(--ec-line); padding-top: 0.5rem; }
.ec-site-header .ec-nav .ec-mega-all .wp-block-navigation-item__content {
	font-family: var(--ec-mono);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ec-brand);
}

/* Mobile overlay menu — readable items + inline services submenu on dark overlay */
@media (max-width: 781px) {
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		min-height: 100vh !important;
		padding: 4.25rem 1.75rem 2.5rem !important;
		overflow-y: auto;
		z-index: 90;
		background: var(--ec-ink) !important;
	}
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--ec-bg) !important; top: 1.25rem !important; right: 1.25rem !important; width: 44px; height: 44px; }
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: flex-start !important;
		justify-content: flex-start !important;
		width: 100%;
		margin-top: 1.5rem !important;
	}
	/* Stack the "Services" toggle and its submenu vertically — otherwise the submenu
	   <ul> renders as a flex sibling to the right of the label and is pushed to mid-screen. */
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu,
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open li.has-child {
		display: block !important;
		width: 100% !important;
	}
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: flex-start !important;
		justify-content: flex-start !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		width: 100%;
		gap: 0.15rem;
		text-align: left !important;
	}
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open,
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open * { box-sizing: border-box; }
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { max-width: 100% !important; }
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		text-align: left !important;
		width: 100% !important;
		align-self: flex-start !important;
		margin-left: 0 !important;
		margin-right: auto !important;
		justify-content: flex-start !important;
	}
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a,
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content {
		margin-right: auto !important;
		margin-left: 0 !important;
		text-align: left !important;
	}
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open a,
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		color: var(--ec-bg) !important;
		font-size: 1.125rem;
		text-transform: none;
		letter-spacing: 0.03em;
		padding: 0.4rem 0;
		border: 0;
	}
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		display: block !important;
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		min-width: 0 !important;
		padding: 0 0 0.5rem 1rem !important;
	}
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
		font-size: 0.95rem !important;
		color: rgba(255,255,255,.72) !important;
		letter-spacing: 0 !important;
	}
	.ec-nav .wp-block-navigation__responsive-container.is-menu-open .ec-mega-all .wp-block-navigation-item__content {
		color: var(--ec-brand) !important;
		font-size: 0.7rem;
		text-transform: uppercase;
		letter-spacing: 0.2em;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.ec-site-footer { background: var(--ec-ink); color: var(--ec-bg); }
.ec-site-footer :where(h1,h2,h3,h4,p,li,a,span) { color: inherit; }
.ec-site-footer a { color: rgba(255,255,255,.8); text-decoration: none; }
.ec-site-footer a:hover { color: var(--ec-brand); }
.ec-site-footer .ec-footer-head { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,.56); }
.ec-badge { display: inline-block; padding: 0.375rem 0.75rem; border: 1px solid rgba(255,255,255,.28); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; }
.ec-site-footer .ec-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,.56); }

/* ==========================================================================
   Dark sections (quality feature, compliance, accreditation)
   ========================================================================== */
.ec-on-dark, .has-ink-background-color { background: var(--ec-ink); }
.ec-on-dark :where(h1,h2,h3,h4) { color: var(--ec-bg); }
.ec-on-dark p, .ec-on-dark li, .ec-on-dark span { color: rgba(255,255,255,.62); }
/* Brand accents on dark must beat the generic `.ec-on-dark p/span` rule above
   (which has higher specificity than a single class) — qualify them so the
   cobalt actually paints instead of resolving to muted white. */
.ec-on-dark .ec-eyebrow,
.ec-on-dark .ec-brand-text,
.ec-on-dark .ec-qs-50,
.ec-on-dark .ec-qs-idx { color: var(--ec-brand-on-dark); }
/* Links + the quiet arrow-link inside dark sections need the lighter cobalt for AA contrast. */
.ec-on-dark a:not(.wp-block-button__link),
.ec-on-dark .ec-arrow-link a { color: var(--ec-brand-on-dark); }
.ec-on-dark a:focus-visible,
.has-ink-background-color *:focus-visible { outline-color: var(--ec-brand-on-dark); }

/* ==========================================================================
   Hairline grids (the bordered card grids)
   Children get a background so the 1px gap reveals the hairline colour.
   ========================================================================== */
.ec-hairgrid { gap: 1px; background: var(--ec-line); border: 1px solid var(--ec-line); }
.ec-hairgrid > .wp-block-column,
.ec-hairgrid > .wp-block-group,
.ec-hairgrid > * { background: var(--ec-bg); }
.ec-on-dark .ec-hairgrid { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.1); }
.ec-on-dark .ec-hairgrid > * { background: var(--ec-ink); }

/* ----- Bullet lists with the brand square marker ------------------------ */
.ec-check-list ul, ul.ec-check-list { list-style: none; margin: 0; padding: 0; }
.ec-check-list li {
	position: relative;
	padding: 0.75rem 0 0.75rem 1.75rem;
	border-bottom: 1px solid var(--ec-line);
	font-size: 0.875rem;
	color: var(--ec-ink-soft);
	line-height: 1.5;
}
.ec-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.35rem;
	width: 6px; height: 6px;
	background: var(--ec-brand);
}
.ec-on-dark .ec-check-list li { border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
@media (min-width: 640px) { .ec-check-2col ul { columns: 2; column-gap: 2.5rem; } .ec-check-2col li { break-inside: avoid; } }

/* ==========================================================================
   Trusted-by logo strip
   ========================================================================== */
.ec-logos { gap: 1px; background: var(--ec-line); border: 1px solid var(--ec-line); }
.ec-logos > .wp-block-image,
.ec-logos figure.wp-block-image {
	background: var(--ec-bg);
	margin: 0;
	height: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
/* Normalise the client logos to a single ink-grey family at rest so the strip reads
   as one curated wall rather than clashing colours/weights; restore colour on hover. */
.ec-logos img { max-height: 3.5rem; max-width: 150px; width: auto; object-fit: contain; filter: grayscale(1) opacity(.55); transition: filter .35s ease; }
.ec-logos figure.wp-block-image:hover img { filter: grayscale(0) opacity(1); }
@media (prefers-reduced-motion: reduce) { .ec-logos img { transition: none; } }
/* 10 logos divide evenly: 5 cols on desktop, 2 on mobile — never an empty cell */
@media (max-width: 900px) { .ec-logos { grid-template-columns: repeat(2, 1fr) !important; } }

/* ==========================================================================
   Service cards (home + related) — cover block with gradient + hover
   ========================================================================== */
/* Every card is the same portrait size — the grid item owns the aspect ratio so
   one- vs two-line titles never change a card's height. */
.ec-services-grid .ec-cards { align-items: start; }
.ec-services-grid .ec-cards > li { aspect-ratio: 4 / 5; display: flex; }
.ec-service-card.wp-block-cover {
	position: relative;
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
	min-height: 0;
	border: 1px solid var(--ec-line);
	overflow: hidden;
	transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s ease;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.ec-service-card.wp-block-cover:hover {
	transform: translateY(-5px);
	border-color: color-mix(in srgb, var(--ec-brand) 45%, transparent);
	box-shadow: 0 28px 60px -28px rgba(10,16,24,.55);
}
/* The whole card is a stretched link — surface keyboard focus on the card itself. */
.ec-service-card.wp-block-cover:focus-within {
	border-color: var(--ec-brand);
	box-shadow: 0 28px 60px -28px rgba(10,16,24,.55);
}
.ec-service-card .ec-card-title a:focus-visible { outline: none; }
.ec-service-card .ec-card-title a:focus-visible::after { outline: 2px solid #fff; outline-offset: -3px; }
.ec-service-card .wp-block-cover__image-background { transition: transform 1.3s cubic-bezier(.16,1,.3,1); }
.ec-service-card:hover .wp-block-cover__image-background { transform: scale(1.06); }
.ec-service-card .wp-block-cover__background {
	background: linear-gradient(to top, rgba(8,13,20,.92) 0%, rgba(8,13,20,.7) 22%, rgba(8,13,20,.24) 52%, rgba(8,13,20,0) 80%) !important;
	opacity: 1 !important;
	transition: opacity .4s ease;
}
/* a faint full-card tint that deepens on hover, keeps photos visible at rest */
.ec-service-card::before {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background: rgba(8,13,20,.05);
	transition: background .4s ease;
	pointer-events: none;
}
.ec-service-card:hover::before { background: rgba(29,82,222,.14); }
.ec-service-card .wp-block-cover__inner-container { width: 100%; position: relative; z-index: 2; }
.ec-card-bottom { display: flex; flex-direction: column; }
.ec-card-num { font-family: var(--ec-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.3em; color: var(--ec-brand); margin: 0; }
.ec-service-card .ec-card-title { color: #fff; margin-top: .5rem; }
.ec-service-card .ec-card-title a { color: #fff; text-decoration: none; }
/* stretched link — the whole card is clickable */
.ec-service-card .ec-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 5; }
.ec-service-card .ec-card-short { color: rgba(255,255,255,.82); }
.ec-card-explore {
	display: inline-flex; align-items: center; gap: .55rem;
	font-family: var(--ec-mono); font-size: 0.625rem; font-weight: 700;
	letter-spacing: 0.28em; text-transform: uppercase; color: #fff; margin: 1.25rem 0 0;
}
.ec-card-explore .ec-arrow { color: var(--ec-brand); transition: transform .3s ease; }
.ec-service-card:hover .ec-card-explore .ec-arrow { transform: translateX(5px); }

/* Service list rows (services archive) */
.ec-service-row {
	border-bottom: 1px solid var(--ec-line);
	transition: background-color .25s ease;
}
.ec-service-row:hover { background: var(--ec-surface); }
.ec-service-row .ec-num { font-family: var(--ec-mono); font-size: 0.75rem; color: rgba(10,16,24,.55); }
.ec-service-row:hover .ec-num, .ec-service-row:hover h2 { color: var(--ec-brand); }

/* Plain bordered cards (pillars, values, reasons, metrics).
   Background is supplied by the .ec-hairgrid context so cards invert on dark. */
.ec-card { padding: 2.5rem; }
.ec-card .ec-tick { width: 8px; height: 8px; background: var(--ec-brand); display: block; margin-bottom: 2rem; }
.ec-metric .ec-metric-num { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ec-ink); transition: color .25s ease; }
.ec-metric:hover .ec-metric-num { color: var(--ec-brand); }
.ec-metric .ec-metric-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ec-ink-muted); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.ec-quote .ec-quote-mark { width: 2.5rem; color: var(--ec-brand); margin-bottom: 2rem; }
.ec-quote blockquote, .ec-quote .ec-quote-body { font-size: 0.9375rem; line-height: 1.7; color: var(--ec-ink-soft); border: 0; margin: 0; padding: 0; }
.ec-quote .ec-quote-cite { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ec-line); }
.ec-quote .ec-quote-name { font-weight: 700; color: var(--ec-ink); letter-spacing: -0.01em; }
.ec-quote .ec-quote-role { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ec-ink-muted); margin-top: 0.5rem; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.ec-cta { position: relative; }
.ec-cta .ec-cta-inner { position: relative; background: var(--ec-bg); border: 1px solid var(--ec-line); box-shadow: var(--ec-shadow-soft); }
.ec-cta .ec-cta-glow { position: absolute; inset: -0.75rem; background: color-mix(in srgb, var(--ec-brand) 10%, transparent); filter: blur(48px); pointer-events: none; z-index: 0; }

/* ==========================================================================
   Framed image (hero / service hero / quality)
   ========================================================================== */
.ec-framed { position: relative; border: 1px solid var(--ec-line); box-shadow: var(--ec-shadow); overflow: hidden; }
.ec-framed.wp-block-image img, .ec-framed img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.ec-glow { position: relative; }
.ec-glow::after { content: ""; position: absolute; inset: -1.5rem; background: color-mix(in srgb, var(--ec-brand) 10%, transparent); filter: blur(48px); z-index: -1; pointer-events: none; }

/* ==========================================================================
   Service-area pills
   ========================================================================== */
.ec-areas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ec-areas li, .ec-area-pill {
	list-style: none;
	border: 1px solid var(--ec-line);
	padding: 0.625rem 1.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ec-ink-soft);
	transition: border-color .2s ease, color .2s ease;
}
.ec-areas li:hover, .ec-area-pill:hover { border-color: var(--ec-brand); color: var(--ec-brand); }

/* ==========================================================================
   Contact + forms (native + WPForms)
   ========================================================================== */
.ec-contact-aside .ec-label { display: block; margin-bottom: 0.75rem; }
.ec-contact-aside .ec-big-link { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ec-ink); text-decoration: none; }
.ec-contact-aside .ec-big-link:hover { color: var(--ec-brand); }

.ec-form-wrap .wpforms-field-label,
.ec-form-wrap label {
	font-family: var(--ec-mono);
	font-size: 0.6875rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ec-ink-muted) !important;
	margin-bottom: 0.75rem !important;
}
.ec-form-wrap input[type="text"],
.ec-form-wrap input[type="email"],
.ec-form-wrap input[type="tel"],
.ec-form-wrap input[type="url"],
.ec-form-wrap select,
.ec-form-wrap textarea,
.ec-form-wrap .wpforms-field input,
.ec-form-wrap .wpforms-field textarea,
.ec-form-wrap .wpforms-field select {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(10,16,24,.42);
	border-radius: 0;
	padding: 0.75rem 0;
	color: var(--ec-ink);
	font-family: var(--ec-sans);
	font-size: 1rem;
	box-shadow: none;
	transition: border-color .2s ease;
}
.ec-form-wrap input:focus,
.ec-form-wrap select:focus,
.ec-form-wrap textarea:focus { outline: none; border-bottom-color: var(--ec-brand); }
.ec-form-wrap textarea { resize: vertical; min-height: 8rem; }
.ec-form-wrap .wpforms-submit,
.ec-form-wrap button[type="submit"],
.ec-form-wrap input[type="submit"] {
	background: var(--ec-ink) !important;
	color: var(--ec-bg) !important;
	border: 0 !important;
	border-radius: 2px !important;
	font-size: 0.75rem !important;
	font-weight: 900 !important;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	padding: 1.25rem 2.5rem !important;
	cursor: pointer;
	transition: background-color .2s ease;
}
.ec-form-wrap .wpforms-submit:hover,
.ec-form-wrap button[type="submit"]:hover,
.ec-form-wrap input[type="submit"]:hover { background: var(--ec-brand) !important; }
.ec-form-wrap .wpforms-field { padding: 0 0 1rem; }

/* Native quote form layout */
.ec-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.ec-field { margin: 0; }
.ec-field label { display: block; }
.ec-field-full { grid-column: 1 / -1; margin: 1.5rem 0 0; }
.ec-form-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; }
.ec-form-success { border: 1px solid var(--ec-line); background: var(--ec-surface); padding: 3rem; }
@media (max-width: 600px) { .ec-form-grid { grid-template-columns: 1fr; } }

/* Contact aside helpers */
.ec-big-link-wrap { margin: 0; }
.ec-contact-aside .ec-big-link { display: inline-block; }

/* About values tick marker (wrapped in a paragraph) */
.ec-tick-wrap { margin: 0 0 1.5rem; }
.ec-tick-wrap .ec-tick { margin-bottom: 0; }

/* ==========================================================================
   Reveal animation (respects reduced-motion)
   ========================================================================== */
@keyframes ec-reveal-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.ec-reveal { animation: ec-reveal-up .8s cubic-bezier(.16,1,.3,1) both; }
.ec-reveal-2 { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
	.ec-reveal, .ec-reveal-2 { animation: none; }
	html { scroll-behavior: auto; }
	.ec-service-card .wp-block-cover__image-background { transition: none; }
	/* No motion-triggered movement: kill the hover lifts and image zooms. */
	.ec-service-card:hover,
	.ec-related-card:hover { transform: none !important; }
	.ec-service-card:hover .wp-block-cover__image-background,
	.ec-feature-media:hover .ec-framed img,
	.ec-feature-media:hover img { transform: none !important; }
}

/* Keep scrolled-to / skip-link targets clear of the sticky header. */
#main { scroll-margin-top: 6rem; }

/* ==========================================================================
   Accessibility & focus
   ========================================================================== */
a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--ec-brand);
	outline-offset: 3px;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--ec-ink); color: #fff; padding: .75rem 1.25rem; }

/* ==========================================================================
   Responsive helpers used by patterns
   ========================================================================== */
.ec-sticky { position: sticky; top: 8rem; align-self: start; }
@media (max-width: 781px) {
	.ec-sticky { position: static; }
}

/* ==========================================================================
   Pattern-specific hooks (added alongside the home/inner patterns)
   ========================================================================== */
.ec-header-row { min-height: 5rem; width: 100%; }
.ec-hero-title { font-size: clamp(2.25rem, 8vw, 7.5rem); line-height: 0.88; overflow-wrap: break-word; }
.ec-service-hero .wp-block-post-title { overflow-wrap: break-word; }
.ec-on-dark .ec-label { color: var(--ec-brand); }

/* Header CTA hides on small screens (the mobile nav covers navigation) */
@media (max-width: 880px) { .ec-header-cta, .ec-header-cta.wp-block-buttons { display: none !important; } }

/* Service cards — link colours inside the cover */
.ec-service-card h3 a, .ec-service-card .wp-block-post-title a { color: #fff; text-decoration: none; }
.ec-service-card h3 a:hover { color: var(--ec-brand); }
.ec-service-card .wp-block-cover__inner-container { width: 100%; }
.ec-services-grid .ec-cards { gap: 1.5rem; }

/* Trusted-by separator line */
.ec-trusted .ec-hairline-sep { flex: 1; height: 1px; border: 0; background: var(--ec-line); }

/* Service-area pills reset */
.ec-areas { list-style: none; padding-left: 0; margin: 0; }

/* Footer link lists */
.ec-footer-links { list-style: none; padding-left: 0; margin: 0; }
.ec-footer-links li { padding: 0.35rem 0; }
.ec-footer-services .wp-block-post-title { margin: 0; }

/* CTA glow */
.ec-cta-inner { position: relative; }
.ec-cta-inner::before { content: ""; position: absolute; inset: -1rem; background: color-mix(in srgb, var(--ec-brand) 20%, transparent); filter: blur(56px); z-index: -1; pointer-events: none; }

/* Case study */
.ec-cs-card { background: var(--ec-bg); box-shadow: var(--ec-shadow-soft); overflow: hidden; }
.ec-cs-top { margin: 0; }
.ec-cs-media { min-height: 22rem; }
.ec-cs-media .ec-cs-img { margin: 0; height: 100%; }
.ec-cs-media .ec-cs-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-cs-stats { display: flex; gap: 0; }
.ec-cs-stat { padding: 0 1.5rem; }
.ec-cs-stat:first-child { padding-left: 0; }
.ec-cs-stat + .ec-cs-stat { border-left: 1px solid var(--ec-line); }
.ec-cs-stat-num { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ec-ink); margin: 0; }
.ec-cs-stat-label { font-family: var(--ec-mono); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ec-ink-muted); margin: 0.4rem 0 0; }
.ec-cs-narrative.ec-hairgrid { border: 0; border-top: 1px solid var(--ec-line); }
.ec-cs-narrative .ec-card { padding: 2rem clamp(1.5rem,3vw,2.5rem); }
@media (max-width: 781px) {
	.ec-cs-media { min-height: 16rem; }
	.ec-cs-media .ec-cs-img img { aspect-ratio: 16/10; }
}

/* Service detail page-specific */
.ec-service-hero .wp-block-post-title { font-size: clamp(2.75rem, 6.5vw, 6rem); line-height: 0.9; letter-spacing: -0.04em; }
.ec-breadcrumb a { color: var(--ec-ink-muted); text-decoration: none; }
.ec-breadcrumb a:hover { color: var(--ec-brand); }

/* When a service has only compliance OR only eco, let the single card's list flow
   into two columns so it fills the width instead of leaving an empty half. */
@media (min-width: 640px) {
	.ec-on-dark .ec-hairgrid > .wp-block-column:only-child .ec-check-list { columns: 2; column-gap: 3rem; }
	.ec-on-dark .ec-hairgrid > .wp-block-column:only-child .ec-check-list li { break-inside: avoid; }
}

/* "Other services" related cards (Query Loop) — hover lift + brand title */
.ec-related-card { transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.ec-related-card:hover { border-color: color-mix(in srgb, var(--ec-brand) 40%, transparent) !important; transform: translateY(-3px); box-shadow: 0 22px 50px -28px rgba(10,16,24,.4); }
.ec-related-card .wp-block-post-title { margin: 0; }
.ec-related-card .wp-block-post-title a { color: var(--ec-ink); text-decoration: none; transition: color .2s ease; }
.ec-related-card:hover .wp-block-post-title a { color: var(--ec-brand); }

/* About / Quality hero headings inherit display sizing where set inline */
.ec-page-hero .wp-block-heading { line-height: 0.9; }

/* 50-point quality feature (home) */
.ec-qs-big { display: flex; align-items: flex-end; gap: 0.9rem; }
.ec-qs-50 { font-family: var(--ec-sans); font-size: clamp(4.5rem, 9vw, 7.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.78; color: var(--ec-brand); margin: 0; }
.ec-qs-50-label { font-family: var(--ec-mono); font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 0.4rem; line-height: 1.5; }
.ec-qs-grid { gap: 1px !important; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); }
.ec-qs-cell { display: flex; align-items: baseline; gap: 1rem; background: var(--ec-ink); padding: 1.15rem 1.4rem; transition: background .25s ease; }
.ec-qs-cell:hover { background: #0f1722; }
.ec-qs-idx { font-family: var(--ec-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; color: var(--ec-brand); margin: 0; min-width: 1.4rem; }
.ec-qs-txt { font-size: 0.875rem; line-height: 1.4; color: rgba(255,255,255,.82); margin: 0; }
@media (max-width: 600px) { .ec-qs-grid { grid-template-columns: 1fr !important; } }

/* Services archive — editorial alternating feature rows.
   Force every row to the content width + centred, so rows never escape to full
   viewport width (some query-loop rows otherwise do, making images inconsistent). */
.ec-features .wp-block-post-template { list-style: none; padding: 0; margin: 0; max-width: 80rem; margin-inline: auto; }
.ec-features .wp-block-post-template > li { max-width: 80rem; margin-inline: auto; }
.ec-feature-row { margin: 0 !important; max-width: 80rem; margin-left: auto !important; margin-right: auto !important; }
.ec-feature-num { font-family: var(--ec-mono); font-size: 0.75rem; letter-spacing: 0.3em; color: var(--ec-brand); margin: 0; }
.ec-feature-title { margin: 0.75rem 0 1rem; }
.ec-feature-title a { color: var(--ec-ink); text-decoration: none; transition: color .2s ease; }
.ec-feature-title a:hover { color: var(--ec-brand); }
.ec-feature-media .ec-framed { overflow: hidden; }
.ec-feature-media .ec-framed img { aspect-ratio: 16 / 10; width: 100%; transition: transform 1s cubic-bezier(.16,1,.3,1); }
.ec-feature-media:hover .ec-framed img { transform: scale(1.04); }
.ec-feature-link.wp-block-read-more,
a.ec-feature-link {
	font-family: var(--ec-mono); font-size: 0.625rem; font-weight: 700;
	letter-spacing: 0.28em; text-transform: uppercase; color: var(--ec-brand);
	text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem;
	border: 0; padding: 0; transition: gap .3s ease;
}
.ec-feature-link.wp-block-read-more:hover, a.ec-feature-link:hover { gap: 1.1rem; }
/* Feature rows keep a consistent image-left rhythm (reliable across browsers). */

/* ==========================================================================
   v1.1 — review polish: form states, accent deployment, small-screen tuning
   ========================================================================== */

/* Quote form: required hint + error banner (the error state pairs with the
   server-side validation in inc/contact-form.php). */
.ec-form-note { font-size: 0.8125rem; color: var(--ec-ink-muted); margin: 0 0 1.5rem; }
.ec-form-error {
	border: 1px solid color-mix(in srgb, #c0362c 55%, var(--ec-line));
	border-left: 3px solid #c0362c;
	background: #fcf3f2;
	color: #7a241d;
	padding: 1rem 1.25rem;
	margin: 0 0 2rem;
	font-size: 0.9375rem;
}
.ec-form-error a { color: #7a241d; text-decoration: underline; }
.ec-form-success a { color: var(--ec-brand); }

/* Mono label on dark sections needs the lighter cobalt for AA contrast. */
.ec-on-dark .ec-label { color: var(--ec-brand-on-dark); }

/* Cobalt accent on the metrics band — give the lead stat a branded number and a
   thin cobalt tick so the section is unmistakably "owned" rather than monochrome. */
.ec-metrics .ec-metric { position: relative; }
.ec-metrics .ec-metric::before {
	content: ""; position: absolute; top: 0; left: 0; width: 2rem; height: 3px;
	background: var(--ec-brand); opacity: 0; transition: opacity .25s ease;
}
.ec-metrics .ec-metric:first-child .ec-metric-num { color: var(--ec-brand); }
.ec-metrics .ec-metric:first-child::before,
.ec-metrics .ec-metric:hover::before { opacity: 1; }

/* Hero trust strip under the primary CTAs. */
.ec-trust-strip {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
	font-family: var(--ec-mono); font-size: 0.625rem; font-weight: 500;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--ec-ink-muted);
	margin-top: 2rem;
}
.ec-trust-strip span { display: inline-flex; align-items: center; gap: 0.5rem; }
.ec-trust-strip span::before { content: ""; width: 5px; height: 5px; background: var(--ec-brand); display: inline-block; }

/* How-it-works steps. */
.ec-steps .ec-step { position: relative; padding-top: 2rem; }
.ec-step-num { font-family: var(--ec-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; color: var(--ec-brand); margin: 0 0 1rem; }
.ec-step-rule { border-top: 1px solid var(--ec-ink); }

/* FAQ accordion (native <details>). */
.ec-faq { border-top: 1px solid var(--ec-line); }
.ec-faq details { border-bottom: 1px solid var(--ec-line); }
.ec-faq summary {
	list-style: none; cursor: pointer; padding: 1.5rem 2.5rem 1.5rem 0; position: relative;
	font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ec-ink);
}
.ec-faq summary::-webkit-details-marker { display: none; }
.ec-faq summary::after {
	content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	font-size: 1.5rem; font-weight: 400; color: var(--ec-brand); transition: transform .25s ease;
}
.ec-faq details[open] summary::after { content: "−"; }
.ec-faq summary:hover { color: var(--ec-brand); }
.ec-faq .ec-faq-body { padding: 0 0 1.75rem; color: var(--ec-ink-soft); font-size: 0.9375rem; line-height: 1.7; max-width: 52rem; }

/* Small-screen tuning */
@media (max-width: 600px) {
	/* Case-study stats: let the three wrap/stack instead of squashing on one row. */
	.ec-cs-stats { gap: 1.25rem 0; }
	.ec-cs-stat { flex: 1 1 7.5rem; padding: 0 1rem; }
	.ec-cs-stat:first-child { padding-left: 0; }
	/* Lift form field tap height to ≥44px. */
	.ec-form-wrap input[type="text"],
	.ec-form-wrap input[type="email"],
	.ec-form-wrap input[type="tel"],
	.ec-form-wrap select,
	.ec-form-wrap textarea { padding: 0.9rem 0; }
	/* How-it-works steps stack with their own top rule. */
	.ec-steps .ec-step + .ec-step { border-top: 1px solid var(--ec-line); }
}