/* ==========================================================================
   Copy Print Services — Main Stylesheet
   ========================================================================== */

:root {
	--cps-green:        #93B050;
	--cps-green-dark:   #7A9742;
	--cps-charcoal:     #1A1A1A;
	--cps-charcoal-soft:#2A2A2A;
	--cps-white:        #FFFFFF;
	--cps-off-white:    #F5F5F5;
	--cps-gray-100:     #EEEEEE;
	--cps-gray-200:     #D9D9D9;
	--cps-gray-500:     #666666;
	--cps-text:         #333333;
	--cps-container:    1200px;
	--cps-radius:       6px;
	/* Height of the green phone/email bar above the header. Hero pages offset
	   their absolutely-positioned header by this, so keep the two in step. */
	--cps-topbar-h:     48px;
	--cps-font-heading: var(--wp--preset--font-family--heading, "Lexend Deca", system-ui, sans-serif);
	--cps-font-body:    var(--wp--preset--font-family--body, "Lexend Deca", system-ui, sans-serif);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--cps-font-body);
	color: var(--cps-text);
	background: var(--cps-white);
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cps-green); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--cps-green-dark); }
h1,h2,h3,h4,h5,h6 { font-family: var(--cps-font-heading); color: var(--cps-charcoal); margin: 0 0 .75em; line-height: 1.15; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.cps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .95rem 1.75rem;
	font-family: var(--cps-font-heading);
	font-weight: 700;
	font-size: .9rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 4px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, transform .15s ease, border-color .2s ease;
	line-height: 1;
}
.cps-btn--green {
	background: var(--cps-green);
	color: var(--cps-white) !important;
	border-color: var(--cps-green);
}
.cps-btn--green:hover {
	background: var(--cps-green-dark);
	border-color: var(--cps-green-dark);
	color: var(--cps-white) !important;
	transform: translateY(-1px);
}
.cps-btn--white {
	background: var(--cps-white);
	color: var(--cps-charcoal) !important;
	border-color: var(--cps-white);
}
.cps-btn--white:hover {
	background: transparent;
	color: var(--cps-white) !important;
	border-color: var(--cps-white);
}
/* Dark/charcoal button — used for the "Leave a review" CTA in the reviews block */
.cps-btn--dark {
	background: var(--cps-charcoal);
	color: var(--cps-white) !important;
	border-color: var(--cps-charcoal);
}
.cps-btn--dark:hover {
	background: var(--cps-charcoal-soft, #2a2a2a);
	border-color: var(--cps-charcoal-soft, #2a2a2a);
	color: var(--cps-white) !important;
	transform: translateY(-1px);
}

/* Style native WP buttons used in header/footer to match */
.wp-block-button.cps-header__cta .wp-block-button__link,
.wp-block-button.cps-footer__cta .wp-block-button__link {
	background: var(--cps-green) !important;
	color: var(--cps-white) !important;
	border-radius: 4px !important;
	padding: .85rem 1.6rem !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .85rem;
	border: 0;
	transition: background .2s ease;
}
.wp-block-button.cps-header__cta .wp-block-button__link:hover,
.wp-block-button.cps-footer__cta .wp-block-button__link:hover {
	background: var(--cps-green-dark) !important;
}

/* ==========================================================================
   Top bar — green phone/email band above the header
   Content: wp-admin → Navigation → Top bar (blocks/topbar/render.php).
   ========================================================================== */
.cps-topbar {
	/* Charcoal per the revised design (was green). The header below is charcoal
	   too, so a hairline keeps the two bands readable as separate strips rather
	   than one tall dark block. */
	background: var(--cps-charcoal);
	color: var(--cps-white);
	font-family: var(--cps-font-heading);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.cps-topbar__inner {
	/* Same container + gutter as .cps-header__inner so the details line up with
	   the right-hand edge of the CONTACT button below. */
	max-width: var(--cps-container);
	margin-inline: auto;
	padding-inline: 1.5rem;
	min-height: var(--cps-topbar-h);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 2.5rem;
}
.cps-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	color: var(--cps-white);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}
.cps-topbar__item:hover,
.cps-topbar__item:focus-visible { color: var(--cps-white); text-decoration: underline; }
.cps-topbar__icon {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--cps-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* The svg fills the circle; glyph size is set by the viewBox in the topbar
   block's render.php (see the note there), not by a pixel size here. */
.cps-topbar__icon svg {
	width: 100%;
	height: 100%;
	fill: var(--cps-green);
	display: block;
}

/* Hero pages overlay the header on top of the hero photo. With the bar in
   normal flow above it, the header starts below the bar rather than at the very
   top of the page. Excluded when stuck, where the header is fixed at top: 0 and
   the bar has scrolled away. */
.cps-has-topbar.cps-has-hero .cps-header:not(.is-stuck) { top: var(--cps-topbar-h); }

@media (max-width: 640px) {
	:root { --cps-topbar-h: 42px; }
	.cps-topbar__inner {
		justify-content: center;
		gap: 1.1rem;
		padding-inline: 1rem;
	}
	.cps-topbar__item { font-size: .8rem; gap: .5rem; }
	.cps-topbar__icon { flex-basis: 21px; width: 21px; height: 21px; }
}

/* ==========================================================================
   Header
   ========================================================================== */

.cps-header {
	background: var(--cps-charcoal) !important;
	color: var(--cps-white);
	padding: 1rem 0;
}

/* Hero pages: overlay the header transparently on top of the hero image.
   Body gets the `cps-has-hero` class via inc/setup.php body_class filter. */
.cps-has-hero .cps-header {
	background: transparent !important;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
}
.cps-has-hero .wp-site-blocks { position: relative; }

/* Sticky header on desktop — slides in from the top once the user scrolls
   past the initial hero/header area. Toggled by JS adding `.is-stuck`. */
@media (min-width: 769px) {
	.cps-header.is-stuck {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: var(--cps-charcoal) !important;
		box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
		animation: cps-header-slide-down .35s ease-out;
		padding-top: .5rem;
		padding-bottom: .5rem;
	}
	.cps-has-hero .cps-header.is-stuck {
		/* Override the transparent overlay rule when stuck. */
		background: var(--cps-charcoal) !important;
	}
	@keyframes cps-header-slide-down {
		from { transform: translateY(-100%); }
		to   { transform: translateY(0); }
	}
}
.cps-has-hero .cps-hero {
	padding-top: 9rem; /* clear the absolute header */
}
.cps-has-hero .cps-hero::before {
	/* Subtle dark gradient at the top so nav/logo stay legible over any photo. */
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 180px;
	background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 1;
	pointer-events: none;
}
.cps-header a { color: var(--cps-white); }
.cps-header a:hover { color: var(--cps-green); }
.cps-header__inner {
	max-width: var(--cps-container);
	margin-inline: auto;
	padding-inline: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}
.cps-header__nav-wrap { display: flex; align-items: center; gap: 2rem; }
.cps-header .wp-block-navigation,
.cps-header .wp-block-navigation__container {
	gap: 1.75rem;
	font-family: var(--cps-font-heading);
	font-weight: 600;
	font-size: .95rem;
}
.cps-header .wp-block-navigation,
.cps-header .wp-block-navigation .wp-block-navigation-item,
.cps-header .wp-block-navigation .wp-block-navigation-item__content,
.cps-header .wp-block-navigation a { color: var(--cps-white) !important; opacity: 1; }
.cps-header .wp-block-navigation a:hover,
.cps-header .wp-block-navigation .wp-block-navigation-item:hover a { color: var(--cps-green) !important; }
.cps-header .wp-block-site-logo img { max-height: 64px; width: auto; }

/* ==========================================================================
   Mega Menu
   ========================================================================== */
.cps-megamenu { position: static; }
/* Nudge the whole nav slightly to the right (tunable). Needs the descendant
   selector (0,2,0) to beat WP's layout rule `.is-layout-flex > :is(*,div){margin:0}` (0,1,1). */
.cps-header__inner .cps-megamenu { margin-left: 3rem; }
.cps-megamenu__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 1.75rem;
	align-items: center;
	font-family: var(--cps-font-heading);
	font-weight: 600;
	font-size: 1rem;
}
.cps-megamenu__item { position: relative; }
.cps-megamenu__link {
	color: var(--cps-white);
	text-decoration: none;
	padding: 1.5rem .25rem;
	display: inline-block;
	transition: color .2s ease;
}
.cps-megamenu__item--has-panel > .cps-megamenu__link::after {
	content: "▾";
	margin-left: .35em;
	font-size: .75em;
	opacity: .7;
	transition: transform .2s ease;
	display: inline-block;
}
.cps-megamenu__item:hover > .cps-megamenu__link,
.cps-megamenu__item:focus-within > .cps-megamenu__link { color: var(--cps-green); }
.cps-megamenu__item:hover > .cps-megamenu__link::after,
.cps-megamenu__item:focus-within > .cps-megamenu__link::after { transform: rotate(180deg); }

.cps-megamenu__panel {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 8px);
	width: 940px;
	max-width: 90vw;
	background: var(--cps-white);
	color: var(--cps-charcoal);
	border-radius: 10px;
	box-shadow: 0 24px 50px rgba(0, 0, 0, .25);
	padding: 2rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	z-index: 1000;
}
.cps-megamenu__item:hover > .cps-megamenu__panel,
.cps-megamenu__item:focus-within > .cps-megamenu__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}
.cps-megamenu__panel-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 2rem;
}
.cps-megamenu__panel-col { color: var(--cps-charcoal); }
.cps-megamenu__panel-eyebrow {
	color: var(--cps-green);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .75rem;
	margin: 0 0 .5rem;
}
.cps-megamenu__panel-heading {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1.15;
	margin: 0 0 .75rem;
	color: var(--cps-charcoal);
}
.cps-megamenu__panel-desc {
	font-size: .95rem;
	line-height: 1.5;
	color: var(--cps-text);
	margin: 0 0 1rem;
}
/* Panel CTA renders as a button (blocks/nav/render.php adds .cps-btn
   .cps-btn--green), so appearance comes from those — only spacing belongs here.

   It used to be a plain green link and was INVISIBLE: `.cps-header a` above sets
   white at (0,1,1), which out-specifies a single class like
   `.cps-megamenu__panel-cta` (0,1,0), so the green never applied and the label
   rendered white on the white panel. The sibling `.cps-megamenu__panel-list a`
   escapes that only by being (0,1,1) AND later in the file.

   Two things stop it recurring: .cps-btn--green sets its colour with
   !important, and this selector is scoped under .cps-header (0,2,0) so panel
   rules out-specify the blanket header link colour. */
.cps-header .cps-megamenu__panel-cta {
	margin-top: .25rem;
	align-self: flex-start;
}

.cps-megamenu__panel-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.cps-megamenu__panel-list a {
	display: block;
	color: var(--cps-charcoal);
	text-decoration: none;
	padding: .5rem 0;
	border-bottom: 1px solid var(--cps-gray-100);
	transition: color .15s ease;
}
.cps-megamenu__panel-list a:last-child { border-bottom: 0; }
.cps-megamenu__panel-list a:hover { color: var(--cps-green); }
.cps-megamenu__panel-list strong {
	display: block;
	font-family: var(--cps-font-heading);
	font-size: .95rem;
	font-weight: 700;
	margin-bottom: .15rem;
	color: inherit;
}
.cps-megamenu__panel-list span {
	font-size: .825rem;
	color: var(--cps-gray-500);
	font-weight: 400;
}

@media (max-width: 900px) {
	.cps-megamenu__list { gap: 1rem; }
	.cps-megamenu__panel { width: 95vw; padding: 1.25rem; }
	.cps-megamenu__panel-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ==========================================================================
   Mobile menu — hamburger toggle + slide-in drawer (≤900px)
   ========================================================================== */

.cps-mobile-toggle { display: none; }

@media (max-width: 900px) {
	/* Hide the desktop megamenu and contact button; show hamburger instead. */
	.cps-megamenu,
	.cps-header__cta { display: none !important; }

	.cps-mobile-toggle {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 10px;
		background: transparent;
		border: 0;
		cursor: pointer;
		color: var(--cps-white);
		margin-left: auto; /* push to the right edge of the header inner */
	}
	.cps-mobile-toggle__bar {
		display: block;
		width: 100%;
		height: 2.5px;
		background: currentColor;
		border-radius: 2px;
		transition: transform .25s ease, opacity .25s ease;
		transform-origin: center;
	}
	.cps-mobile-toggle[aria-expanded="true"] .cps-mobile-toggle__bar:nth-child(1) {
		transform: translateY(7.5px) rotate(45deg);
	}
	.cps-mobile-toggle[aria-expanded="true"] .cps-mobile-toggle__bar:nth-child(2) { opacity: 0; }
	.cps-mobile-toggle[aria-expanded="true"] .cps-mobile-toggle__bar:nth-child(3) {
		transform: translateY(-7.5px) rotate(-45deg);
	}

}

/* Drawer — full-viewport overlay. Sits ABOVE the sticky header so the
   page logo and nav can't peek through at the top. */
.cps-mobile-drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	background: var(--cps-charcoal);
	color: var(--cps-white);
	z-index: 9999;
	padding: 1.25rem 1.5rem 2rem;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .3s ease;
	display: flex;
	flex-direction: column;
}
.cps-mobile-drawer[hidden] { display: none; }
.cps-mobile-drawer.is-open { transform: translateX(0); }

/* Close (X) button — top-right corner inside the drawer */
.cps-mobile-drawer__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--cps-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cps-mobile-drawer__close-bar {
	position: absolute;
	width: 24px;
	height: 2.5px;
	background: currentColor;
	border-radius: 2px;
}
.cps-mobile-drawer__close-bar:nth-child(1) { transform: rotate(45deg); }
.cps-mobile-drawer__close-bar:nth-child(2) { transform: rotate(-45deg); }

.cps-mobile-drawer__nav {
	max-width: 480px;
	margin: 3.5rem auto 0;
	width: 100%;
	flex: 1;
}
.cps-mobile-drawer__list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: flex;
	flex-direction: column;
}
.cps-mobile-drawer__list > li > a,
.cps-mobile-drawer__group > summary {
	display: block;
	padding: .9rem 0;
	color: var(--cps-white);
	text-decoration: none;
	font-family: var(--cps-font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	border-bottom: 1px solid rgba(255,255,255,.1);
	cursor: pointer;
}
.cps-mobile-drawer__list a:hover,
.cps-mobile-drawer__group > summary:hover { color: var(--cps-green); }

/* Accordion summary chevron */
.cps-mobile-drawer__group > summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cps-mobile-drawer__group > summary::-webkit-details-marker { display: none; }
.cps-mobile-drawer__group > summary::after {
	content: "";
	width: 10px; height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
	margin-right: 4px;
}
.cps-mobile-drawer__group[open] > summary::after { transform: rotate(-135deg); margin-top: 6px; }

.cps-mobile-drawer__sublist {
	list-style: none;
	padding: .25rem 0 .5rem 1rem;
	margin: 0;
}
.cps-mobile-drawer__sublist li a {
	display: block;
	padding: .55rem 0;
	color: rgba(255,255,255,.85);
	font-family: var(--cps-font-body);
	font-weight: 500;
	font-size: .95rem;
	text-decoration: none;
	border: 0;
}
.cps-mobile-drawer__sublist li a:hover { color: var(--cps-green); }

.cps-mobile-drawer__cta {
	display: block;
	text-align: center;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
}

/* Lock body scroll when drawer is open */
body.cps-drawer-open { overflow: hidden; }
.cps-header .wp-block-site-logo a,
.cps-header .wp-block-site-logo { display: inline-block; }
/* Zero padding/margin around main to remove white gap above hero */
main.wp-block-group,
.wp-site-blocks > main { padding: 0 !important; margin: 0 !important; }

/* ==========================================================================
   Hero
   ========================================================================== */

.cps-hero {
	position: relative;
	/* Deeper hero per designer's PDF amend (pages 19/23 — "let's not be shy") */
	min-height: 680px;
	display: flex;
	align-items: center;
	padding: 7rem 1.5rem;
	background: var(--cps-charcoal);
	background-size: cover;
	background-position: center;
	color: var(--cps-white);
	overflow: hidden;
}
/* Hero spacing: ~100px of clear space above AND below the content. The header
   (~106px) overlays the top of the hero, so top padding = header + 100 (≈206px)
   to leave a true 100px gap below the menu; bottom = 100px. (0,3,0) + !important
   beats the global 80px block-padding rule and the .cps-has-hero 9rem rule. */
:is(.wp-site-blocks, .editor-styles-wrapper) .cps-hero.cps-hero {
	padding-top: 206px !important;
	padding-bottom: 100px !important;
}
.cps-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.75) 60%, rgba(0,0,0,.55) 100%);
	z-index: 1;
}
.cps-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--cps-container);
	margin-inline: auto;
}
.cps-hero__eyebrow {
	display: inline-block;
	color: var(--cps-green);
	font-family: var(--cps-font-heading);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .85rem;
	margin: 0 0 1rem;
}
.cps-hero__heading {
	color: var(--cps-white);
	font-family: var(--cps-font-heading);
	font-weight: 650;
	/* Bigger per designer's PDF amend B1 + page 19 — title takes 2/3 width */
	font-size: clamp(2.75rem, 6vw, 5rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	margin: 0 0 1.5rem;
	max-width: 18ch;
}
.cps-hero__description {
	/* Bigger + 2/3 width per designer's PDF amend B1 */
	font-size: clamp(1.2rem, 1.6vw, 1.4rem);
	line-height: 1.55;
	max-width: 66%;
	color: rgba(255,255,255,.95);
	margin: 0 0 1.75rem;
}
@media (max-width: 720px) {
	.cps-hero__description { max-width: 100%; }
}
.cps-hero__description p { margin: 0 0 .75em; }
.cps-hero__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.25rem;
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
}
.cps-hero__check {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-weight: 700;
	/* Match the description paragraph size above (designer amend) */
	font-size: clamp(1.2rem, 1.6vw, 1.4rem);
	color: var(--cps-white);
}
.cps-hero__check-icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	display: block;
	object-fit: contain;
}
.cps-hero__cta-wrap { margin: 0; }

/* ==========================================================================
   Content + Photo (two-column)
   ========================================================================== */

.cps-content-photo {
	padding: 5rem 1.5rem;
	background: var(--cps-white);
}
.cps-content-photo--alt { background: var(--cps-off-white); }
.cps-content-photo {
	padding-bottom: 0; /* let cutout photo sit flush at bottom edge */
}
.cps-content-photo__inner {
	max-width: var(--cps-container);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: end;
	padding-top: 5rem;
}
.cps-content-photo__content { padding-bottom: 5rem; }
.cps-content-photo__media {
	align-self: end;
	margin-bottom: 0;
}
.cps-content-photo__media img {
	display: block;
	margin-bottom: -1px; /* kiss the next section, no seam */
}
.cps-content-photo--reverse .cps-content-photo__inner > .cps-content-photo__media,
.cps-content-photo--photo-left .cps-content-photo__inner > .cps-content-photo__media { order: -1; }
.cps-content-photo__eyebrow {
	color: var(--cps-green);
	font-family: var(--cps-font-heading);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .85rem;
	margin: 0 0 .75rem;
}
.cps-content-photo__heading {
	font-family: var(--cps-font-heading);
	color: var(--cps-charcoal);
	font-weight: 800;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 1rem;
}
.cps-content-photo__subheading {
	font-family: var(--cps-font-heading);
	font-weight: 700;
	/* Match the body paragraph size (1.2rem) per designer amend. */
	font-size: 1.2rem;
	color: var(--cps-charcoal);
	margin: 0 0 1rem;
}
.cps-content-photo__body { font-size: 1.2rem; line-height: 1.7; color: var(--cps-text); }
.cps-content-photo__body p { margin: 0 0 1rem; }
.cps-content-photo__bullets {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0;
	display: grid;
	gap: .5rem;
}
.cps-content-photo__bullets li {
	position: relative;
	padding-left: 1.75rem;
	line-height: 1.5;
}
/* Circle outline + tick both use currentColor so the marker follows the
   block's text colour (stays visible on any background, incl. green). The tick
   is a mask (not a fixed-colour background-image) on a separate ::after so the
   mask doesn't clip the circle border. */
.cps-content-photo__bullets li::before {
	content: "";
	position: absolute;
	left: 0; top: .35em;
	width: 1.1rem; height: 1.1rem;
	border-radius: 999px;
	border: 2px solid currentColor;
}
.cps-content-photo__bullets li::after {
	content: "";
	position: absolute;
	left: 0; top: .35em;
	width: 1.1rem; height: 1.1rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 70% no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.cps-content-photo__cta-wrap { margin-top: 1.75rem; }
.cps-content-photo__media img { width: 100%; height: auto; border-radius: 8px; }

/* Remote support (LogMeIn Rescue) PIN card — see [cps_remote_support] in inc/setup.php. */
.cps-remote-support {
	background: var(--cps-off-white);
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 12px;
	padding: 2.25rem;
}
.cps-remote-support__heading {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.2;
	color: var(--cps-charcoal);
	margin: 0 0 .75rem;
}
.cps-remote-support__label {
	display: block;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--cps-text);
	margin: 0 0 1.25rem;
}
.cps-remote-support__row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}
.cps-remote-support__input {
	flex: 1 1 12ch;
	min-width: 0;
	font-family: inherit;
	font-size: 1.05rem;
	line-height: 1.2;
	padding: .85rem 1rem;
	color: var(--cps-charcoal);
	background: var(--cps-white);
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 6px;
}
.cps-remote-support__input:focus-visible {
	outline: 2px solid var(--cps-green);
	outline-offset: 1px;
	border-color: var(--cps-green);
}
.cps-remote-support__submit {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}
@media (max-width: 480px) {
	.cps-remote-support { padding: 1.5rem; }
	.cps-remote-support__submit { width: 100%; }
}

@media (max-width: 860px) {
	.cps-content-photo__inner { grid-template-columns: 1fr; gap: 2.5rem; }
	/* Both left-image variants pull the photo above the text on desktop via
	   order:-1. Stacked on mobile that put the photo before the heading, so the
	   section opened on an image with no context. Reset to DOM order — text, then
	   photo — matching --photo-right and .cps-image-split, which already did this. */
	.cps-content-photo--reverse .cps-content-photo__inner > .cps-content-photo__media,
	.cps-content-photo--photo-left .cps-content-photo__inner > .cps-content-photo__media { order: 0; }
}

/* ==========================================================================
   Green CTA Band (intro to service cards)
   ========================================================================== */

.cps-green-band {
	background: var(--cps-green);
	color: var(--cps-white);
	padding: 4rem 1.5rem 3rem;
	text-align: center;
	margin-top: 4rem; /* breathing room from preceding section */
}
.cps-green-band + .cps-service-cards { margin-top: 0; }
.cps-green-band__inner {
	max-width: var(--cps-container);
	margin-inline: auto;
}
.cps-green-band__heading {
	color: var(--cps-white);
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: clamp(1.75rem, 3.4vw, 2.4rem);
	margin: 0 0 1rem;
}
.cps-green-band__description {
	font-size: 1.2rem;
	line-height: 1.6;
	max-width: 720px;
	margin: 0 auto 2rem;
	/* Body copy on the green band is charcoal (not white) per the designer's
	   contrast feedback (PDF amend D2). Heading stays white. */
	color: var(--cps-charcoal);
}
.cps-green-band__cta-wrap { margin-top: 1rem; }

/* ==========================================================================
   Service Cards
   ========================================================================== */

.cps-service-cards {
	background: var(--cps-green);
	padding: 5rem 1.5rem 6rem;
	margin-top: 0;
}
/* bg variants */
.cps-service-cards--bg-light    { background: var(--cps-green); } /* legacy alias */
.cps-service-cards--bg-green    { background: var(--cps-green); }
.cps-service-cards--bg-charcoal { background: var(--cps-charcoal); }
.cps-service-cards--bg-white    { background: var(--cps-white); }
.cps-service-cards--bg-white .cps-service-cards__heading,
.cps-service-cards--bg-white .cps-service-cards__eyebrow,
.cps-service-cards--bg-white .cps-service-cards__description { color: var(--cps-charcoal); }
.cps-service-cards__inner {
	max-width: var(--cps-container);
	margin-inline: auto;
}
/* Inter-block spacing is handled globally by the 80px top-padding rule; no
   per-pair overrides here. */
.cps-service-cards__header { padding-top: 1rem; }
.cps-service-cards__header { text-align: center; margin-bottom: 2.5rem; color: var(--cps-white); }
.cps-service-cards__eyebrow {
	color: var(--cps-white);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .85rem;
	margin: 0 0 .75rem;
}
.cps-service-cards__heading {
	color: var(--cps-white);
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: clamp(1.75rem, 3.4vw, 2.25rem);
	margin: 0 0 1rem;
}
.cps-service-cards__description {
	font-size: 1.2rem;
	line-height: 1.55;
	max-width: 720px;
	margin: 0 auto;
	/* Default to charcoal so green/light backgrounds get readable contrast
	   per the designer's note (PDF amend D2). Override is below for
	   genuinely-dark backgrounds (charcoal variant). */
	color: var(--cps-charcoal);
}
.cps-service-cards--bg-charcoal .cps-service-cards__description {
	color: rgba(255,255,255,.95);
}
.cps-service-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	/* Reset <ul> defaults — without these, browser padding-left pushes cards
	   ~40px to the right (very visible on mobile single-column). */
	list-style: none;
	padding: 0;
	margin: 0;
}
.cps-service-cards__card {
	background: var(--cps-white);
	border-radius: 10px;
	padding: 2.25rem 1.75rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: .85rem;
	color: var(--cps-charcoal);
	transition: transform .2s ease, box-shadow .2s ease;
	box-shadow: 0 6px 16px rgba(0,0,0,.08);
	min-height: 280px;
}
.cps-service-cards__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(0,0,0,.15);
}
.cps-service-cards__icon {
	width: 72px;
	height: 72px;
	background: transparent;
	color: var(--cps-green);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 .5rem;
	flex-shrink: 0;
}
.cps-service-cards__icon img,
.cps-service-cards__icon svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}
/* Re-tint any monochrome black/dark icon to brand green (#93B050).
   Filter chain generated for #93B050 — apply by adding the modifier class
   `cps-service-cards__icon--tint` or by file-name match below. */
.cps-service-cards__icon--tint img,
.cps-service-cards__icon img[src*="cps-maintenance"] {
	filter: brightness(0) saturate(100%) invert(70%) sepia(38%) saturate(454%) hue-rotate(38deg) brightness(95%) contrast(86%);
}

/* Brand-logo variant (Icon style = "Brand logo" on the block).
   The 72px SQUARE above suits the square glyphs used everywhere else (they run
   0.81–1.19 aspect). Brand wordmarks are ~2.25:1, so object-fit:contain fits
   them to the 72px WIDTH and paints them ~72x32 — tiny, with dead space above
   and below. Widening the box while keeping the height identical lets them
   scale to a common 72px height with no change to the card's layout rhythm.
   Left-aligned to the card text via object-position, since the box is now
   wider than the logo. */
.cps-service-cards--icons-logo .cps-service-cards__icon {
	width: 100%;
	max-width: 180px;
	height: 72px;
	justify-content: flex-start;
}
.cps-service-cards--icons-logo .cps-service-cards__icon img {
	object-position: left center;
}

/* Photo-banner variant — sector cards use a full-width photo at the top
   instead of the small icon glyph. Activate via background = "photo". */
.cps-service-cards--bg-photo { background: var(--cps-off-white); }
.cps-service-cards--bg-photo .cps-service-cards__heading,
.cps-service-cards--bg-photo .cps-service-cards__eyebrow,
.cps-service-cards--bg-photo .cps-service-cards__description {
	color: var(--cps-charcoal);
}
.cps-service-cards--bg-photo .cps-service-cards__card {
	padding: 0;
	overflow: hidden;
}
.cps-service-cards--bg-photo .cps-service-cards__icon {
	width: 100%;
	height: 200px;
	margin: 0 0 1rem;
	border-radius: 0;
}
.cps-service-cards--bg-photo .cps-service-cards__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.cps-service-cards--bg-photo .cps-service-cards__title,
.cps-service-cards--bg-photo .cps-service-cards__text {
	padding-inline: 1.75rem;
}
.cps-service-cards--bg-photo .cps-service-cards__link {
	padding: 0 1.75rem 1.75rem;
}
.cps-process-steps__icon {
	width: 80px; height: 80px;
	background: transparent;
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cps-process-steps__icon img,
.cps-process-steps__icon svg { width: 100%; height: 100%; object-fit: contain; }
.cps-service-cards__title {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: 1.125rem;
	color: var(--cps-charcoal);
	margin: 0;
}
.cps-service-cards__text {
	font-size: .95rem;
	line-height: 1.55;
	color: var(--cps-text);
	margin: 0;
}
.cps-service-cards__link {
	margin-top: auto;
	color: var(--cps-green);
	font-weight: 700;
	font-size: .9rem;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.cps-service-cards__link:hover { color: var(--cps-green-dark); }

@media (max-width: 900px) { .cps-service-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cps-service-cards__grid { grid-template-columns: 1fr; } }

/* Column-count modifiers (sc_columns field). Default grid is 3 columns. */
.cps-service-cards--cols-2 .cps-service-cards__grid { grid-template-columns: repeat(2, 1fr); }
.cps-service-cards--cols-4 .cps-service-cards__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.cps-service-cards--cols-4 .cps-service-cards__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.cps-service-cards--cols-2 .cps-service-cards__grid,
	.cps-service-cards--cols-4 .cps-service-cards__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Process Steps
   ========================================================================== */

.cps-process-steps {
	padding: 5rem 1.5rem;
	background: var(--cps-white);
}
.cps-process-steps__inner { max-width: var(--cps-container); margin-inline: auto; }
.cps-process-steps__header { text-align: center; margin-bottom: 3rem; }
.cps-process-steps__eyebrow {
	color: var(--cps-green);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .85rem;
	margin: 0 0 .75rem;
}
.cps-process-steps__heading {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: clamp(1.75rem, 3.4vw, 2.4rem);
	color: var(--cps-charcoal);
	margin: 0 0 1rem;
}
.cps-process-steps__description {
	font-size: 1.2rem;
	line-height: 1.6;
	max-width: 720px;
	margin: 0 auto;
	color: var(--cps-text);
}
.cps-process-steps__list {
	display: grid;
	/* auto-fit so a 4-step list lays out as 4 cols and a 5-step list (Managed
	   Print's "How we implement…") lays out as 5 cols on desktop. */
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 2rem;
	/* Reset <ol> defaults */
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: cps-step;
}
.cps-process-steps__step {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
}
/* Number badge (text "01"..) — the green pill treatment. Only applies when
   ps_show_numbers is on AND no PNG icon is supplied. */
.cps-process-steps__num {
	width: 64px; height: 64px;
	border-radius: 999px;
	background: var(--cps-green);
	color: var(--cps-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: 1.5rem;
}
/* PNG icons (including the new 1.png..5.png number badges) sit transparent
   so the design from the asset itself shows through. */
.cps-process-steps__icon svg { width: 28px; height: 28px; }
.cps-process-steps__title {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: 1.125rem;
	color: var(--cps-charcoal);
	margin: .5rem 0 .25rem;
}
.cps-process-steps__text {
	font-size: .95rem;
	line-height: 1.55;
	color: var(--cps-text);
	margin: 0;
}

/* On small screens, drop straight to a single column so 5-step lists never
   leave an orphaned final item in an uneven 2+2+1 grid. */
@media (max-width: 720px) { .cps-process-steps__list { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ==========================================================================
   Reviews
   ========================================================================== */

.cps-reviews {
	padding: 5rem 1.5rem;
	background: var(--cps-off-white);
	position: relative;
	overflow: visible;
	z-index: 5; /* lifts the section (and its overhanging quote-mark) above the section above */
}
/* Background variants — controlled by the rv_background ACF field (default
   off-white). Manufacturing sector uses green per designer's PDF amend D7. */
.cps-reviews--bg-green {
	background: var(--cps-green) !important;
	color: var(--cps-white);
}
.cps-reviews--bg-green .cps-reviews__heading,
.cps-reviews--bg-green .cps-reviews__description { color: var(--cps-white); }
.cps-reviews--bg-green .cps-reviews__quote { filter: brightness(0) invert(1); opacity: .18; }
.cps-reviews--bg-off-white {
	background: var(--cps-off-white);
	color: var(--cps-text);
}
.cps-reviews__inner { max-width: var(--cps-container); margin-inline: auto; position: relative; }
/* Header is LEFT-aligned and sits to the left, with the giant quote-mark on the right.
   Use a 2-column grid so the heading + description occupy the left half. */
.cps-reviews__header {
	text-align: left;
	margin-bottom: 2.5rem;
	position: relative;
	max-width: 60%;
	z-index: 2;
}
/* Giant decorative quote-mark — Canva PNG asset (Testimonial.png), placed
   top-right of the reviews block, sized fluidly. */
.cps-reviews__quote {
	position: absolute;
	top: -2rem;
	right: 4%;
	width: clamp(240px, 32vw, 440px);
	height: auto;
	pointer-events: none;
	z-index: 1;
	user-select: none;
}
.cps-reviews__widget,
.cps-reviews__cta-wrap { position: relative; z-index: 2; }
@media (max-width: 900px) {
	.cps-reviews__header { max-width: 100%; text-align: center; }
	.cps-reviews__quote { width: clamp(140px, 36vw, 220px); top: -1rem; right: 2%; }
}
.cps-reviews__eyebrow {
	color: var(--cps-green);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .85rem;
	margin: 0 0 .75rem;
}
.cps-reviews__heading {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: clamp(1.75rem, 3.4vw, 2.4rem);
	color: var(--cps-green);
	margin: 0 0 1rem;
	max-width: 18ch; /* forces "Don't just take our / word for it..." to wrap onto two lines */
	line-height: 1.1;
}
.cps-reviews__description {
	font-size: 1.2rem;
	line-height: 1.6;
	max-width: 480px;
	margin: 0;
	color: var(--cps-text);
}
.cps-reviews__widget { margin: 2rem 0; }
/* CTA wrapper with arrow pointing at button */
.cps-reviews__cta-wrap {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.5rem;
}
.cps-reviews__cta-arrow {
	width: 90px;
	height: auto;
	transform: translateY(.5rem); /* tip lands near button top-left */
	flex-shrink: 0;
}
@media (max-width: 600px) {
	.cps-reviews__cta-arrow { width: 60px; }
}

/* ==========================================================================
   Dark CTA Band (quote)
   ========================================================================== */

.cps-dark-cta {
	position: relative;
	padding: 5rem 1.5rem;
	min-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cps-charcoal);
	background-size: cover;
	background-position: center;
	color: var(--cps-white);
	text-align: center;
	overflow: hidden;
	z-index: 3; /* sit above the reviews section's overhanging quote mark */
}
.cps-dark-cta__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.85));
	z-index: 1;
}
.cps-dark-cta__inner {
	position: relative;
	z-index: 2;
	max-width: 880px;
	margin-inline: auto;
}
.cps-dark-cta__quote {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	line-height: 1.7;
	color: var(--cps-white);
	margin: 0 0 1.5rem;
}
.cps-dark-cta__hl {
	background: var(--cps-green);
	color: var(--cps-white);
	padding: 0 .35em;
	border-radius: 4px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.cps-dark-cta__attribution {
	color: rgba(255,255,255,.85);
	font-size: clamp(1.125rem, 1.8vw, 1.375rem); /* ~18-22px (22pt target) */
	line-height: 1.5;
	margin: 0 0 1.5rem;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.cps-dark-cta__cta-wrap {
	margin-top: 1.5rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 1rem;
}
.cps-dark-cta__cta-arrow {
	width: 90px;
	height: auto;
	transform: translateY(.5rem);
	flex-shrink: 0;
}
@media (max-width: 600px) {
	.cps-dark-cta__cta-arrow { width: 60px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.cps-footer {
	background: var(--cps-charcoal) !important;
	color: var(--cps-white);
	padding: 4rem 1.5rem 2rem;
}
.cps-footer a { color: var(--cps-white); }
.cps-footer a:hover { color: var(--cps-green); }
.cps-footer__top {
	max-width: var(--cps-container);
	margin-inline: auto;
	display: grid;
	/* Four near-equal columns, brand column a touch wider for the logo. */
	grid-template-columns: 1.25fr 1fr 1fr 1fr;
	gap: 3rem;
	align-items: start;
	padding-inline: 1.5rem;
}
.cps-footer__col { color: var(--cps-white); }
.cps-footer__col--brand { display: flex; flex-direction: column; gap: 1.5rem; }
.cps-footer__logo img { max-width: 210px; height: auto; display: block; }
.cps-footer__address {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(255,255,255,.85);
}
.cps-footer__address a {
	color: var(--cps-white);
	font-weight: 700;
	display: inline-block;
	margin-top: .25rem;
}
/* Phone with a green circular icon — the prominent contact point in the design. */
.cps-footer__phone {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	margin-top: .5rem;
	color: var(--cps-white);
	text-decoration: none;
}
.cps-footer__phone:hover .cps-footer__phone-number { color: var(--cps-green); }
.cps-footer__phone-icon {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cps-green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Fills the circle; glyph size comes from the viewBox, same as the top bar. */
.cps-footer__phone-icon svg {
	width: 100%;
	height: 100%;
	fill: var(--cps-white);
	display: block;
}
.cps-footer__phone-number {
	font-family: var(--cps-font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	transition: color .15s ease;
}
.cps-footer__col-heading {
	color: var(--cps-white) !important;
	font-family: var(--cps-font-heading);
	font-weight: 700;
	font-size: .9rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 1.75rem;
}
.cps-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: .45rem;
}
.cps-footer__list a {
	color: rgba(255,255,255,.85);
	text-decoration: none;
	font-size: 1rem;
	line-height: 1.5;
	transition: color .15s ease;
}
.cps-footer__list a:hover { color: var(--cps-green); }
/* Social icons — sit below the Quicklinks list. */
.cps-footer__social {
	list-style: none;
	padding: 0;
	margin: 1.75rem 0 0;
	display: flex;
	gap: .75rem;
}
.cps-footer__social-link {
	width: 34px;
	height: 34px;
	border-radius: 4px;
	background: var(--cps-green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.cps-footer__social-link:hover { background: var(--cps-green-dark); }
.cps-footer__social-link svg {
	width: 22px;
	height: 22px;
	fill: var(--cps-white);
	display: block;
}

@media (max-width: 980px) {
	.cps-footer__top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 600px) {
	.cps-footer__top { grid-template-columns: 1fr; }
}
.cps-footer__brand { display: flex; flex-direction: column; gap: 1rem; }
.cps-footer__brand .wp-block-site-logo img { max-width: 200px; height: auto; }
.cps-footer__nav,
.cps-footer__contact { display: flex; flex-direction: column; gap: .75rem; }
.cps-footer h4,
.cps-footer .wp-block-heading {
	color: var(--cps-white);
	font-family: var(--cps-font-heading);
	font-weight: 700;
	font-size: 1.125rem;
	margin: 0 0 .75rem;
}
.cps-footer .wp-block-navigation { flex-direction: column; gap: .5rem; }
.cps-footer .wp-block-navigation__container { flex-direction: column; gap: .5rem; align-items: flex-start; }
.cps-footer .wp-block-navigation,
.cps-footer .wp-block-navigation a,
.cps-footer .wp-block-navigation .wp-block-navigation-item__content {
	color: rgba(255,255,255,.85) !important;
	font-size: .95rem;
	opacity: 1;
}
.cps-footer .wp-block-navigation a:hover { color: var(--cps-green) !important; }
.cps-footer .wp-block-heading,
.cps-footer h4 { color: var(--cps-white) !important; opacity: 1; }
/* No divider rule above the bottom line — the design runs the copyright on its
   own, right-aligned, with the legal links kept on the left. */
.cps-footer__bottom {
	max-width: var(--cps-container);
	margin: 3.5rem auto 0;
	padding-inline: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: .9rem;
	color: rgba(255,255,255,.75);
}
.cps-footer__bottom p { margin: 0; }
.cps-footer__copyright { margin-left: auto; text-align: right; }

@media (max-width: 860px) {
	.cps-footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ==========================================================================
   Resets for full-bleed sections
   ========================================================================== */

.alignfull { width: 100%; max-width: 100%; }
.cps-hero,
.cps-content-photo,
.cps-green-band,
.cps-service-cards,
.cps-process-steps,
.cps-reviews,
.cps-dark-cta {
	width: 100%;
	max-width: 100% !important;
}

main.wp-block-group { padding: 0 !important; }

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */
/* FAQ — Canva-aligned: left-aligned green heading, green hairline rules
   between items, plus chevron toggle, "Can't find what you need?" prompt
   with button on the right. */
.cps-faq {
	background: var(--cps-white);
	padding: 4rem 1.5rem;
}
.cps-faq__inner {
	max-width: var(--cps-container);
	margin-inline: auto;
}
.cps-faq__header { text-align: left; margin-bottom: 1.5rem; }
.cps-faq__eyebrow {
	color: var(--cps-green);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .85rem;
	margin: 0 0 .5rem;
}
.cps-faq__heading {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: clamp(1.75rem, 3.4vw, 2.4rem);
	color: var(--cps-green);
	margin: 0 0 .5rem;
	letter-spacing: -.01em;
}
.cps-faq__description {
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--cps-text);
	max-width: 720px;
	margin: 0;
}
.cps-faq__list { display: flex; flex-direction: column; gap: 0; }
.cps-faq__item {
	border-bottom: 1px solid var(--cps-green);
	padding: 1.1rem 0;
}
.cps-faq__item:first-child { border-top: 1px solid var(--cps-green); }
/* Last item keeps the same top/bottom padding as every other item — it just
   drops the trailing border line (no green line at the very bottom). */
.cps-faq__item:last-child { border-bottom: none; }
.cps-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--cps-font-heading);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--cps-charcoal);
	padding: .25rem 0;
}
.cps-faq__question::-webkit-details-marker { display: none; }
.cps-faq__item[open] .cps-faq__q-text { color: var(--cps-green); }
.cps-faq__q-text { flex: 1; transition: color .2s ease; }
.cps-faq__q-icon {
	width: 22px; height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--cps-green);
	position: relative;
}
.cps-faq__q-icon::before,
.cps-faq__q-icon::after {
	content: "";
	position: absolute;
	background: currentColor;
	border-radius: 2px;
}
.cps-faq__q-icon::before { width: 14px; height: 2.5px; }
.cps-faq__q-icon::after  { width: 2.5px; height: 14px; transition: transform .2s ease, opacity .2s ease; }
.cps-faq__item[open] .cps-faq__q-icon::after { transform: rotate(90deg); opacity: 0; }
.cps-faq__answer {
	padding: .85rem 0 .25rem;
	font-size: 1.2rem;
	line-height: 1.65;
	color: var(--cps-text);
	max-width: 56rem;
}
.cps-faq__answer p { margin: 0 0 .75em; }
.cps-faq__cta-wrap {
	/* 1.1rem so the gap below the last question (item padding 1.1rem + this)
	   matches the ~36px spacing between questions, not double it. */
	margin-top: 1.1rem;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	justify-content: space-between;
	flex-wrap: wrap;
	/* No top border/padding — the client flagged a stray green divider line
	   sitting below the last FAQ item. The margin-top above is all the
	   separation the CTA row needs. */
}
.cps-faq__cta-prompt {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	color: var(--cps-green);
	font-size: clamp(1.125rem, 1.6vw, 1.35rem);
	margin: 0;
}

/* ==========================================================================
   Stats Band
   ========================================================================== */
.cps-stats-band {
	padding: 4rem 1.5rem;
	color: var(--cps-white);
}
.cps-stats-band--green    { background: var(--cps-green); }
.cps-stats-band--charcoal { background: var(--cps-charcoal); }
.cps-stats-band--white    { background: var(--cps-white); color: var(--cps-charcoal); }
.cps-stats-band__inner {
	max-width: var(--cps-container);
	margin-inline: auto;
}
.cps-stats-band__header { text-align: center; margin-bottom: 2.5rem; }
.cps-stats-band__eyebrow {
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .85rem;
	margin: 0 0 .5rem;
	opacity: .9;
}
.cps-stats-band__heading {
	color: inherit;
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: clamp(1.75rem, 3.4vw, 2.4rem);
	margin: 0 0 .75rem;
}
.cps-stats-band__description {
	font-size: 1.2rem;
	line-height: 1.55;
	max-width: 720px;
	margin: 0 auto;
	opacity: .95;
}
.cps-stats-band__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1.5rem 2rem;
	text-align: center;
}
.cps-stats-band__list--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cps-stats-band__list--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cps-stats-band__list--cols-4 { grid-template-columns: repeat(4, 1fr); }
.cps-stats-band__list--cols-5,
.cps-stats-band__list--cols-6 { grid-template-columns: repeat(3, 1fr); }
.cps-stats-band__stat { display: flex; flex-direction: column; gap: .25rem; }
.cps-stats-band__num {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1;
}
.cps-stats-band__label {
	font-weight: 600;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .9;
}
@media (max-width: 720px) {
	.cps-stats-band__list--cols-3,
	.cps-stats-band__list--cols-4,
	.cps-stats-band__list--cols-5,
	.cps-stats-band__list--cols-6 { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------ */
/* Sector Carousel                                                     */
/* ------------------------------------------------------------------ */
.cps-sector-carousel {
	padding: 4rem 1.5rem;
	background: var(--cps-green);
	color: var(--cps-white);
}
.cps-sector-carousel--bg-white {
	background: var(--cps-white);
	color: var(--cps-charcoal);
}
.cps-sector-carousel__inner {
	max-width: 1200px;
	margin: 0 auto;
}
.cps-sector-carousel__header {
	margin-bottom: 1.75rem;
}
.cps-sector-carousel__heading {
	color: inherit;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin: 0 0 .5rem;
}
.cps-sector-carousel--bg-white .cps-sector-carousel__heading { color: var(--cps-charcoal); }
.cps-sector-carousel__description { color: inherit; opacity: .95; }

.cps-sector-carousel__viewport {
	position: relative;
}
.cps-sector-carousel__track {
	list-style: none;
	margin: 0;
	padding: 0 0 .5rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 1.5rem) / 3);
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.cps-sector-carousel__track::-webkit-scrollbar { display: none; }
.cps-sector-carousel--per-2 .cps-sector-carousel__track { grid-auto-columns: calc((100% - 1.5rem) / 2); }
.cps-sector-carousel--per-4 .cps-sector-carousel__track { grid-auto-columns: calc((100% - 3 * 1.5rem) / 4); }

.cps-sector-carousel__slide {
	scroll-snap-align: start;
}
.cps-sector-carousel__card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cps-charcoal);
	color: var(--cps-white);
	text-decoration: none;
}
.cps-sector-carousel__card:hover .cps-sector-carousel__image { transform: scale(1.04); }
.cps-sector-carousel__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.cps-sector-carousel__label {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	background: var(--cps-green);
	color: var(--cps-white);
	font-family: var(--cps-font-heading);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .9rem;
	text-align: center;
	padding: .65rem .75rem;
	border-radius: 4px;
}
.cps-sector-carousel--bg-green .cps-sector-carousel__label {
	background: var(--cps-white);
	color: var(--cps-charcoal);
}

.cps-sector-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 999px;
	background: rgba(255,255,255,.85);
	color: var(--cps-charcoal);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background .15s ease, opacity .15s ease;
}
.cps-sector-carousel__nav:hover { background: var(--cps-white); }
.cps-sector-carousel__nav[disabled] { opacity: .35; cursor: default; }
.cps-sector-carousel__nav--prev { left: -22px; }
.cps-sector-carousel__nav--next { right: -22px; }

.cps-sector-carousel__all {
	margin: 1.25rem 0 0;
	text-align: right;
}
.cps-sector-carousel__all-link {
	color: var(--cps-charcoal);
	font-weight: 600;
	font-family: var(--cps-font-heading);
	text-decoration: none;
}
.cps-sector-carousel--bg-green .cps-sector-carousel__all-link { color: var(--cps-charcoal); }
.cps-sector-carousel__all-link:hover { color: var(--cps-green-dark); }

@media (max-width: 900px) {
	.cps-sector-carousel__track { grid-auto-columns: calc((100% - 1.5rem) / 2); }
	.cps-sector-carousel__nav--prev { left: 4px; }
	.cps-sector-carousel__nav--next { right: 4px; }
}
@media (max-width: 560px) {
	.cps-sector-carousel__track { grid-auto-columns: 80%; }
}

/* ------------------------------------------------------------------ */
/* Post Grid (From the blog)                                           */
/* ------------------------------------------------------------------ */
.cps-post-grid {
	padding: 4rem 1.5rem 5rem;
	background: var(--cps-off-white);
}
.cps-post-grid__inner {
	max-width: 1200px;
	margin: 0 auto;
}
.cps-post-grid__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.75rem;
}
.cps-post-grid__heading {
	color: var(--cps-green);
	margin: 0;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.cps-post-grid__more {
	color: var(--cps-charcoal);
	font-weight: 600;
	font-family: var(--cps-font-heading);
	text-decoration: none;
	white-space: nowrap;
}
.cps-post-grid__more:hover { color: var(--cps-green-dark); }

.cps-post-grid__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}
.cps-post-grid__card {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.cps-post-grid__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cps-gray-200);
}
.cps-post-grid__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.cps-post-grid__media:hover img { transform: scale(1.04); }
.cps-post-grid__title-pill {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	background: var(--cps-green);
	color: var(--cps-white);
	font-family: var(--cps-font-heading);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .95rem;
	text-align: center;
	padding: .65rem .75rem;
	border-radius: 4px;
}
.cps-post-grid__excerpt {
	color: var(--cps-charcoal);
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
}
@media (max-width: 900px) {
	.cps-post-grid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.cps-post-grid__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Block spacing — tighten vertical rhythm, no gaps between blocks
   ========================================================================== */

/* Remove ALL block-level margin so adjacent blocks sit flush against each
   other (Gutenberg/FSE adds a default 24px margin-block between alignfull
   children that was creating gaps between our sections). */
.wp-site-blocks > main > *,
.wp-site-blocks > main .wp-block-group > *,
.entry-content > *,
.alignfull,
.wp-block-acf-cps-hero,
.wp-block-acf-cps-content-photo,
.wp-block-acf-cps-service-cards,
.wp-block-acf-cps-process-steps,
.wp-block-acf-cps-reviews,
.wp-block-acf-cps-dark-cta,
.wp-block-acf-cps-green-cta-band,
.wp-block-acf-cps-faq,
.wp-block-acf-cps-stats-band,
.wp-block-acf-cps-sector-carousel,
.wp-block-acf-cps-post-grid {
	margin-block: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Footer template part also gets the default 24px block gap above it, which
   showed as a thin white separator band between the last section and the dark
   footer on every page. Remove it so the footer sits flush. */
.wp-site-blocks > footer,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* Tighten the vertical padding inside each block — 5rem top + 5rem bottom
   meant ~10rem of dead space between every adjacent section. Halve it. */
.cps-content-photo  { padding: 2.5rem 1.5rem; padding-bottom: 0; }
.cps-content-photo__inner   { padding-top: 2.5rem; }
.cps-content-photo__content { padding-bottom: 2.5rem; }

.cps-service-cards   { padding: 4.5rem 1.5rem 5rem; }
.cps-process-steps   { padding: 2.5rem 1.5rem; }
.cps-reviews         { padding: 4.5rem 1.5rem; }
.cps-dark-cta        { padding: 3rem 1.5rem; }

/* Content+photo modifiers added for the client design amends.
   --layout-balanced: photo sits at the bottom of the section (like cutout)
                       but the text column is vertically centred so it has
                       even space above and below.
   --bg-grey:         off-white background (Michael section). */
.cps-content-photo--layout-balanced {
	padding: 5rem 1.5rem 0 !important; /* breathing room above; photo kisses next section */
}
.cps-content-photo--layout-balanced .cps-content-photo__inner {
	align-items: end; /* photo bottom-anchored */
	padding-top: 0;
}
.cps-content-photo--layout-balanced .cps-content-photo__content {
	align-self: center; /* text vertically centred within the row */
	padding-bottom: 0;
}
.cps-content-photo--layout-balanced .cps-content-photo__media img {
	margin-bottom: -1px; /* seamless seam against next section */
}
.cps-content-photo--bg-grey { background: var(--cps-off-white) !important; }

/* Standard content-photo: image + text vertically centred inside the block's
   80px padding (set globally). */
.cps-content-photo .cps-content-photo__inner { align-items: center; padding-top: 0; }
.cps-content-photo .cps-content-photo__content { align-self: center; padding-bottom: 0; }
.cps-content-photo .cps-content-photo__media { align-self: center; }
.cps-content-photo .cps-content-photo__media img { margin-bottom: 0; }

/* Balanced (cut-out) variant — padding lives INSIDE the columns:
   • the photo column keeps the image stuck to the bottom, bleeding off the
     section edge (no block bottom padding);
   • the text column is vertically centred with its own 80px top/bottom padding
     so the copy + CTA always have even breathing room.
   The block itself carries no vertical padding so the photo can reach the edge.
   (0,3,0) on the block beats the global (0,2,0) !important padding. */
:is(.wp-site-blocks, .editor-styles-wrapper) .cps-content-photo.cps-content-photo--layout-balanced {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.cps-content-photo--layout-balanced .cps-content-photo__inner { align-items: end; padding-top: 0; }
.cps-content-photo--layout-balanced .cps-content-photo__media { align-self: end; }
.cps-content-photo--layout-balanced .cps-content-photo__media img { margin-bottom: -1px; }
.cps-content-photo--layout-balanced .cps-content-photo__content {
	align-self: center;
	padding-top: 80px;
	padding-bottom: 80px;
}
/* Centred layout (client amend): a regular (non-cutout) photo sitting
   vertically centred within the section — inset from BOTH the top and bottom
   (80px each) so the image sits higher up rather than hugging the bottom edge
   like the balanced/cutout treatments. Left/right position still applies. */
:is(.wp-site-blocks, .editor-styles-wrapper) .cps-content-photo.cps-content-photo--layout-centred {
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}
.cps-content-photo--layout-centred .cps-content-photo__inner { align-items: center; padding-top: 0; }
.cps-content-photo--layout-centred .cps-content-photo__content { align-self: center; padding-top: 0; padding-bottom: 0; }
.cps-content-photo--layout-centred .cps-content-photo__media { align-self: center; }

/* Right column holding an embed instead of a photo (Support page). The layout
   modifiers above bottom-anchor .__media at (0,2,0) so a cutout photo kisses the
   next section, and strip the section's bottom padding to match. A card wants
   neither: it sits centred against the text and puts that padding back. Same
   (0,2,0) specificity, later in the file, so it wins for every layout. */
.cps-content-photo .cps-content-photo__media--embed {
	align-self: center;
	/* Symmetric, so align-self:center still centres the CARD and not the card+
	   padding box. Also guarantees breathing room if the embed is ever the
	   tallest thing in the row, since --layout-balanced strips the section's own
	   bottom padding. */
	padding-block: 5rem;
}
@media (max-width: 860px) {
	/* Single column: the embed stacks under the text, so top padding would just
	   double up on the grid gap. */
	.cps-content-photo .cps-content-photo__media--embed { padding-top: 0; padding-bottom: 2.5rem; }
}
.cps-content-photo--layout-centred .cps-content-photo__media img { margin-bottom: 0; border-radius: 8px; }
.cps-faq             { padding: 2.5rem 1.5rem; }
.cps-stats-band      { padding: 2rem 1.5rem; }
.cps-sector-carousel { padding: 2.5rem 1.5rem; }
.cps-post-grid       { padding: 2.5rem 1.5rem 3rem; }
.cps-green-band      { padding: 2rem 1.5rem 1.5rem; }

/* ==========================================================================
   Drivers & Downloads page — three-column links grid
   ========================================================================== */
.cps-drivers__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}
.cps-drivers__section h2 {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--cps-green);
	margin: 0 0 1rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.cps-drivers__section ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.cps-drivers__section li {
	border-bottom: 1px solid var(--cps-gray-100);
}
.cps-drivers__section a {
	display: block;
	padding: .85rem 0;
	color: var(--cps-charcoal);
	text-decoration: none;
	font-family: var(--cps-font-heading);
	font-weight: 700;
	font-size: 1rem;
	transition: color .15s ease;
}
.cps-drivers__section a:hover { color: var(--cps-green); }
@media (max-width: 900px) { .cps-drivers__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ==========================================================================
   About page — Origin / Mission / Vision 3-column section
   ========================================================================== */
.cps-about-mvv {
	background: var(--cps-white);
	padding: 4rem 1.5rem;
}
.cps-about-mvv__grid {
	max-width: var(--cps-container);
	margin-inline: auto;
	display: grid;
	/* Intro on the left; Mission + Vision stacked on the right. */
	grid-template-columns: 1.1fr 1fr;
	gap: 2rem;
	align-items: start;
}
.cps-about-mvv__card {
	background: var(--cps-off-white);
	border-radius: 16px;
	padding: 2.25rem;
}
.cps-about-mvv__card--origin {
	background: transparent;
	padding-inline: 0;
	grid-column: 1;
	grid-row: 1 / span 2;
}
.cps-about-mvv__card:not(.cps-about-mvv__card--origin) { grid-column: 2; }
.cps-about-mvv__card h3 {
	font-family: var(--cps-font-heading);
	color: var(--cps-charcoal);
	font-weight: 800;
	font-size: 1.5rem;
	margin: 0 0 .75rem;
	line-height: 1.2;
}
.cps-about-mvv__card--origin h3 {
	color: var(--cps-charcoal);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.cps-about-mvv__card p {
	margin: 0 0 1rem;
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--cps-text);
}
.cps-about-mvv__card p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
	.cps-about-mvv__grid { grid-template-columns: 1fr; gap: 1.5rem; }
	/* Drop the explicit row/column placement so all three cards stack cleanly.
	   The :not() selector below matches the specificity (0,2,0) of the
	   `.cps-about-mvv__card:not(--origin) { grid-column: 2 }` rule above —
	   without it that rule wins here and forces an implicit 2nd column on
	   mobile (the intro + Mission/Vision stayed side by side). */
	.cps-about-mvv__card,
	.cps-about-mvv__card--origin,
	.cps-about-mvv__card:not(.cps-about-mvv__card--origin) {
		grid-column: auto;
		grid-row: auto;
	}
}

/* --- About page "Our values" — icons sit directly on the green band, no cards --- */
.page-template-page-about .cps-service-cards__card {
	background: transparent;
	box-shadow: none;
	border: 0;
	padding: 0;
	min-height: 0;
	text-align: center;
	align-items: center;
}
.page-template-page-about .cps-service-cards__card:hover {
	transform: none;
	box-shadow: none;
}
.page-template-page-about .cps-service-cards__icon {
	width: 96px;
	height: 96px;
	margin: 0 auto 1.25rem;
}
.page-template-page-about .cps-service-cards__title,
.page-template-page-about .cps-service-cards__text {
	color: var(--cps-charcoal);
}
.page-template-page-about .cps-service-cards__grid { gap: 2rem; }

/* ==========================================================================
   About page — Meet Our People circular headshot grid
   ========================================================================== */
.cps-about-team {
	background: var(--cps-white);
	padding: 4rem 1.5rem;
}
.cps-about-team__heading {
	text-align: center;
	font-family: var(--cps-font-heading);
	color: var(--cps-charcoal);
	font-weight: 800;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	margin: 0 0 2.5rem;
}
.cps-about-team__grid {
	max-width: var(--cps-container);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem 1.5rem;
	list-style: none;
	padding: 0;
}
.cps-about-team__person { text-align: center; }
.cps-about-team__photo {
	width: 160px;
	height: 160px;
	border-radius: 999px;
	object-fit: cover;
	margin: 0 auto .85rem;
	display: block;
	background: var(--cps-off-white);
}
.cps-about-team__name {
	font-family: var(--cps-font-heading);
	color: var(--cps-green);
	font-weight: 700;
	font-size: 1rem;
	margin: 0;
}
@media (max-width: 900px) { .cps-about-team__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .cps-about-team__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } .cps-about-team__photo { width: 130px; height: 130px; } }

/* ==========================================================================
   Single blog post — hero, body, nav
   ========================================================================== */

/* Post hero — featured image as full-bleed background with the post title as H1
   over the top. Same treatment as the blog listing hero (.cps-archive-hero):
   the photo is knocked back over the charcoal rather than buried under a flat
   dark sheet.

   Unlike the listing hero this one KEEPS a scrim, because it has to work over
   52 different featured images (mostly bright stock photos) with the title
   bottom-aligned. The scrim is transparent at the top and ramps to .55 at the
   bottom, so the photo reads at full strength up top and only the text band is
   protected. Measured across every published post at 1280px: 0% of the title
   area falls below the 3:1 WCAG AA floor for large text (worst 5th-percentile
   3.41:1). Dropping the scrim entirely — as the listing hero can afford to —
   would put 37 of 52 posts below that floor, one of them at 96%. */
.cps-post-hero {
	position: relative;
	min-height: 380px;
	padding: 7rem 1.5rem 4rem;
	display: flex;
	align-items: flex-end;
	background: var(--cps-charcoal);
	color: var(--cps-white);
	overflow: hidden;
}
.cps-post-hero .wp-block-post-featured-image,
.cps-post-hero__bg {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
	opacity: var(--cps-post-hero-image-opacity, .74);
}
.cps-post-hero .wp-block-post-featured-image img,
.cps-post-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.cps-post-hero__overlay {
	position: absolute;
	inset: 0;
	/* Was a flat .6 -> .85 sheet over the whole hero. Now transparent at the top,
	   ramping to .55 behind the bottom-aligned title. See the note above before
	   lightening this further. */
	background: var(--cps-post-hero-scrim, linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%));
	z-index: 1;
	pointer-events: none;
}
.cps-post-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	/* Match the body content's centered 880px column so the title's left edge
	   sits directly above the first paragraph's left edge. */
	max-width: 880px;
	margin-inline: auto;
	text-align: left;
}
.cps-post-hero__title {
	font-family: var(--cps-font-heading);
	/* 650 to match .cps-hero__heading and .cps-archive-hero__title — every other
	   hero title on the site. This was the only one at 800. */
	font-weight: 650;
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--cps-white);
	max-width: 24ch;
	text-align: left;
	/* WP's constrained-layout CSS injects "margin-left: auto !important;
	   margin-right: auto !important" on every direct child of the layout
	   group, which centres the title block within the 880px column. Override
	   to anchor the title hard-left so it lines up with the body paragraphs. */
	margin: 0 auto 0 0 !important;
}

/* Post body — central column with prose, native WP block styling */
.cps-post-body {
	background: var(--cps-white);
	padding: 4rem 1.5rem 2rem;
}
.cps-post-body .wp-block-post-content {
	max-width: 880px;
	margin-inline: auto;
}
/* Block-level spacing in post body — uses !important to win over the
   global "no gaps between blocks" rule defined earlier in this file (which
   was scoped too broadly and was killing the natural prose rhythm). */
.cps-post-body .wp-block-post-content > * + * { margin-top: 1.75rem !important; }
.cps-post-body .wp-block-heading,
.cps-post-body h2,
.cps-post-body h3,
.cps-post-body h4 {
	font-family: var(--cps-font-heading);
	color: var(--cps-charcoal);
	font-weight: 800;
	line-height: 1.25;
	margin: 3rem 0 1.25rem !important;
}
.cps-post-body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cps-post-body h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-top: 2.5rem !important; }
.cps-post-body h4 { font-size: 1.15rem; margin-top: 2rem !important; }
.cps-post-body p {
	font-size: 1.2rem;
	line-height: 1.7;
	color: var(--cps-text);
	margin: 0 0 1.5rem !important;
}
/* Tighter spacing for the very first heading in the body so it doesn't push
   the article too far down the page. */
.cps-post-body .wp-block-post-content > .wp-block-heading:first-child,
.cps-post-body .wp-block-post-content > h2:first-child,
.cps-post-body .wp-block-post-content > h3:first-child { margin-top: 0 !important; }
.cps-post-body ul,
.cps-post-body ol {
	font-size: 1.2rem;
	line-height: 1.7;
	color: var(--cps-text);
	padding-left: 1.5rem;
	margin: 0 0 1.75rem !important;
}
.cps-post-body li { margin: 0 0 .65rem !important; }
.cps-post-body li { margin: 0 0 .5rem; }
.cps-post-body a { color: var(--cps-green); text-decoration: underline; }
.cps-post-body a:hover { color: var(--cps-green-dark); }
.cps-post-body strong { color: var(--cps-charcoal); }
/* The UA default for <strong> is `bolder`, which is RELATIVE: inside an h2/h3
   (800) it computes to 900, so a heading an author happened to bold in the
   editor renders heavier than its siblings. Pin it to the heading's own weight. */
.cps-post-body :is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: inherit; }

/* Inline images */
.cps-post-body .wp-block-image,
.cps-post-body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 2rem 0;
}
.cps-post-body .wp-block-image figcaption {
	font-size: .9rem;
	color: var(--cps-gray-500);
	text-align: center;
	margin-top: .5rem;
}

/* Default core/quote — plain blockquote treatment (no green band).
   For the green pull-quote design, authors insert the dedicated
   `acf/cps-quote-callout` block (see .cps-quote-callout further down). */
.cps-post-body .wp-block-quote {
	margin: 2.5rem 0;
	padding: 1rem 0 1rem 1.5rem;
	border-left: 4px solid var(--cps-green);
	font-style: italic;
	color: var(--cps-text);
	background: transparent;
}
.cps-post-body .wp-block-quote p {
	font-size: 1.2rem;
	line-height: 1.7;
	margin: 0 0 .75rem;
	color: var(--cps-text);
}
.cps-post-body .wp-block-quote cite,
.cps-post-body .wp-block-quote footer {
	display: block;
	margin-top: .5rem;
	font-style: normal;
	font-size: .95rem;
	color: var(--cps-gray-500);
}

/* The old core/quote "Quote Callout" style variation was retired in favour of
   the dedicated `acf/cps-quote-callout` block — see .cps-quote-callout below. */

/* Next Article link */
.cps-post-nav {
	max-width: 880px;
	margin: 3rem auto 0;
	padding-top: 2rem;
	border-top: 1px solid var(--cps-gray-100);
}
.cps-post-nav__next a,
.wp-block-post-navigation-link.cps-post-nav__next a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: .95rem;
	color: var(--cps-green);
	text-transform: uppercase;
	letter-spacing: .08em;
	text-decoration: none;
}
.cps-post-nav__next a:hover { color: var(--cps-green-dark); }
.cps-post-nav__next .wp-block-post-navigation-link__arrow-next { margin-left: .35em; }

/* ==========================================================================
   Related Posts ("More like this..." 3-up under single posts)
   ========================================================================== */

.cps-related-posts {
	background: var(--cps-white);
	padding: 3rem 1.5rem 4rem;
}
.cps-related-posts__inner {
	max-width: var(--cps-container);
	margin-inline: auto;
}
.cps-related-posts__heading {
	font-family: var(--cps-font-heading);
	color: var(--cps-charcoal);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin: 0 0 2rem;
}
.cps-related-posts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.cps-related-posts__card {
	display: flex;
	flex-direction: column;
	background: var(--cps-off-white);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,.06);
	transition: transform .2s ease, box-shadow .2s ease;
}
.cps-related-posts__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(0,0,0,.12);
}
.cps-related-posts__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--cps-gray-100);
}
.cps-related-posts__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cps-related-posts__body {
	padding: 1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .85rem;
	flex: 1;
}
.cps-related-posts__title {
	font-family: var(--cps-font-heading);
	color: var(--cps-charcoal);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.35;
	margin: 0;
}
.cps-related-posts__title a {
	color: inherit;
	text-decoration: none;
}
.cps-related-posts__title a:hover { color: var(--cps-green); }
.cps-related-posts__more {
	margin-top: auto;
	font-family: var(--cps-font-heading);
	font-weight: 700;
	font-size: .85rem;
	color: var(--cps-charcoal);
	text-transform: uppercase;
	letter-spacing: .08em;
	text-decoration: none;
	align-self: flex-start;
	border-bottom: 2px solid var(--cps-green);
	padding-bottom: .15rem;
}
.cps-related-posts__more:hover { color: var(--cps-green); }
@media (max-width: 900px) { .cps-related-posts__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cps-related-posts__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Newsletter signup band
   ========================================================================== */

.cps-newsletter {
	background: var(--cps-green);
	color: var(--cps-white);
	padding: 3rem 1.5rem;
}
.cps-newsletter__inner {
	max-width: var(--cps-container);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 2.5rem;
	align-items: center;
}
.cps-newsletter__heading {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.2;
	color: var(--cps-white);
	margin: 0;
}
.cps-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	position: relative;
}
.cps-newsletter__label {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); border: 0;
}
.cps-newsletter__input {
	width: 100%;
	padding: 1rem 1.25rem;
	font-family: var(--cps-font-heading);
	font-weight: 700;
	font-size: .9rem;
	letter-spacing: .08em;
	color: var(--cps-white);
	background: transparent;
	border: 2px solid var(--cps-white);
	border-radius: 4px;
	outline: 0;
	text-transform: uppercase;
}
.cps-newsletter__input::placeholder { color: rgba(255,255,255,.85); }
.cps-newsletter__input:focus { background: rgba(255,255,255,.08); }
.cps-newsletter__submit {
	background: var(--cps-white) !important;
	color: var(--cps-green) !important;
	border-color: var(--cps-white) !important;
	width: 100%;
	justify-content: center;
}
.cps-newsletter__submit:hover {
	background: rgba(255,255,255,.92) !important;
	color: var(--cps-green-dark) !important;
}
.cps-newsletter__hp {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	opacity: 0;
}
.cps-newsletter__status {
	font-size: .95rem;
	min-height: 1.25em;
	margin: .25rem 0 0;
	color: rgba(255,255,255,.95);
}
.cps-newsletter__status.is-success { color: var(--cps-white); font-weight: 700; }
.cps-newsletter__status.is-error { color: #fff3cd; }
@media (max-width: 720px) {
	.cps-newsletter__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ==========================================================================
   CPS Quote Callout block — green pull-quote for inline use in blog body
   ========================================================================== */
.cps-quote-callout {
	background: var(--cps-green);
	color: var(--cps-white);
	padding: 2rem 2.25rem;
	border-radius: 8px;
	border: 0;
	margin: 2.5rem 0;
	max-width: 100%;
}
.cps-quote-callout__eyebrow {
	display: block;
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: 1.125rem;
	color: var(--cps-white);
	margin: 0 0 .5rem;
	letter-spacing: .02em;
}
.cps-quote-callout__text {
	color: var(--cps-white);
	font-size: 1.25rem;
	line-height: 1.55;
	margin: 0;
	font-family: var(--cps-font-heading);
	font-weight: 700;
}
.cps-quote-callout__attribution {
	display: block;
	margin-top: 1rem;
	font-style: normal;
	font-size: .95rem;
	color: rgba(255,255,255,.85);
}
/* Wide-aligned callout sits 200px outside the 880px post body container */
.cps-quote-callout.alignwide {
	margin-left: calc(50% - 50vw + 1rem);
	margin-right: calc(50% - 50vw + 1rem);
	max-width: calc(100vw - 2rem);
}

/* ==========================================================================
   CPS Info Box block — green / grey / dark callout for inline use
   ========================================================================== */
.cps-info-box {
	margin: 2rem 0;
	padding: 1.5rem 1.75rem;
	border-radius: 6px;
	border-left: 6px solid var(--cps-green);
}
.cps-info-box--green {
	background: rgba(147, 176, 80, .12);
	border-left-color: var(--cps-green);
	color: var(--cps-text);
}
.cps-info-box--grey {
	background: var(--cps-off-white);
	border-left-color: var(--cps-gray-500);
	color: var(--cps-text);
}
.cps-info-box--dark {
	background: var(--cps-charcoal);
	border-left-color: var(--cps-green);
	color: var(--cps-white);
}
.cps-info-box__heading {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: 1.1rem;
	color: inherit;
	margin: 0 0 .5rem;
	line-height: 1.3;
}
.cps-info-box--dark .cps-info-box__heading { color: var(--cps-green); }
.cps-info-box__body { font-size: 1.05rem; line-height: 1.6; }
.cps-info-box__body p { margin: 0 0 .75em; }
.cps-info-box__body p:last-child { margin-bottom: 0; }
.cps-info-box--dark .cps-info-box__body a { color: var(--cps-white); text-decoration: underline; }

/* CPS rounded image style — picked from the Styles sidebar on core/image */
.cps-post-body .wp-block-image.is-style-cps-rounded img {
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.cps-post-body .wp-block-image.is-style-cps-rounded figcaption {
	font-size: .9rem;
	color: var(--cps-gray-500);
	text-align: center;
	margin-top: .5rem;
	font-style: italic;
}

/* ==========================================================================
   Blog Archive (/blog/) — hero, post grid, pagination
   ========================================================================== */

/* Archive hero — matches the site hero treatment (cps-hero). The background
   image is now editable (wp-admin → Blog) and rendered inline by the
   acf/cps-blog-hero block; the header overlays it transparently (cps-has-hero
   is added for the blog listing in inc/setup.php). */
.cps-archive-hero {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: center;
	background-color: var(--cps-charcoal);
	color: var(--cps-white);
	overflow: hidden;
	padding: 7rem 1.5rem;
}
/* The hero photo as its own layer, so the featured image can be swapped without
   touching the section background. Renders at full strength — the darkening is
   the overlay below, exactly as on .cps-hero. */
.cps-archive-hero__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}
/* Clear the absolute (transparent) header — mirrors .cps-hero's spacing so the
   title isn't tucked under the menu. (0,3,0)+!important beats the global 80px
   block-padding rule. */
:is(.wp-site-blocks, .editor-styles-wrapper) .cps-archive-hero.cps-archive-hero {
	padding-top: 206px !important;
	padding-bottom: 100px !important;
}
/* Identical gradient to .cps-hero__overlay, and the block sets its opacity
   inline from the Blog options page the same way the hero block does — so the
   blog hero reads exactly like every other hero on the site. Keep the two
   gradients in step if either is ever changed. */
.cps-archive-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.75) 60%, rgba(0,0,0,.55) 100%);
	z-index: 1;
	pointer-events: none;
}
/* Top darkening strip for nav/logo legibility — same as .cps-hero::before. */
.cps-archive-hero::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 180px;
	background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 1;
	pointer-events: none;
}
.cps-archive-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--cps-container);
	margin-inline: auto;
}
.cps-archive-hero__title {
	font-family: var(--cps-font-heading);
	font-weight: 650;
	font-size: clamp(2.75rem, 6vw, 5rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--cps-white);
	margin: 0 0 1.5rem;
	max-width: 18ch;
}
.cps-archive-hero__intro {
	font-size: clamp(1.2rem, 1.6vw, 1.4rem);
	line-height: 1.55;
	max-width: 66%; /* ~2/3 of container per the design */
	color: rgba(255,255,255,.95);
	margin: 0;
}
@media (max-width: 720px) {
	.cps-archive-hero__title,
	.cps-archive-hero__intro { max-width: 100%; }
}

/* Archive grid — 4 rows × 3 cols, with pagination underneath */
.cps-blog-archive {
	background: var(--cps-white);
	padding: 4rem 1.5rem;
}
.cps-blog-archive__inner {
	max-width: var(--cps-container);
	margin-inline: auto;
}
.cps-blog-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem 1.75rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.cps-blog-archive__card {
	display: flex;
	flex-direction: column;
	background: var(--cps-off-white);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,.06);
	transition: transform .2s ease, box-shadow .2s ease;
}
.cps-blog-archive__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(0,0,0,.12);
}
.cps-blog-archive__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--cps-gray-100);
}
.cps-blog-archive__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cps-blog-archive__body {
	padding: 1.1rem 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 1;
}
.cps-blog-archive__title {
	font-family: var(--cps-font-heading);
	color: var(--cps-charcoal);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.35;
	margin: 0;
}
.cps-blog-archive__title a {
	color: inherit;
	text-decoration: none;
}
.cps-blog-archive__title a:hover { color: var(--cps-green); }
.cps-blog-archive__more {
	margin-top: auto;
	font-family: var(--cps-font-heading);
	font-weight: 700;
	font-size: .8rem;
	color: var(--cps-charcoal);
	text-transform: uppercase;
	letter-spacing: .08em;
	text-decoration: none;
	align-self: flex-start;
	border-bottom: 2px solid var(--cps-charcoal);
	padding-bottom: .15rem;
	transition: color .15s ease, border-color .15s ease;
}
.cps-blog-archive__more:hover {
	color: var(--cps-green);
	border-bottom-color: var(--cps-green);
}

/* Pagination — OLDER / NEWER ARTICLES links */
.cps-blog-archive__pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.cps-blog-archive__pagination-link {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: .95rem;
	color: var(--cps-green);
	text-transform: uppercase;
	letter-spacing: .08em;
	text-decoration: none;
	transition: color .15s ease;
}
.cps-blog-archive__pagination-link:hover { color: var(--cps-green-dark); }
.cps-blog-archive__pagination-link--next:only-child { margin-left: auto; }
.cps-blog-archive__pagination-link--prev:only-child { margin-right: auto; }
.cps-blog-archive__empty {
	text-align: center;
	color: var(--cps-gray-500);
	font-size: 1.1rem;
	padding: 3rem 0;
}

@media (max-width: 900px) { .cps-blog-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cps-blog-archive__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   CPS Service Team — dark grey panel with intro + 2-col bullets + team photo
   ========================================================================== */
.cps-service-team {
	background: var(--cps-charcoal);
	color: var(--cps-white);
	padding: 4rem 0 0;
}
.cps-service-team__inner {
	/* +3rem so that after the 1.5rem inner gutter, the content's left edge lines
	   up with the standard container edge used by the hero / content-photo
	   sections (those centre a 1200px inner inside an already-padded section;
	   this block can't pad the section because the photo is full-bleed). Without
	   this the heading sat 24px further right than every other section. */
	max-width: calc(var(--cps-container) + 3rem);
	margin-inline: auto;
	/* Bottom padding is this block's ONLY bottom breathing room: the section
	   itself can't have any, because the photo is full-bleed to the bottom edge
	   (see the padding-bottom:0 exception further down). 5rem = the 80px the
	   global block rule puts above the heading, so the dark panel reads evenly
	   top and bottom. Keep the two in step if that 80px ever changes. */
	padding: 0 1.5rem 5rem;
}
.cps-service-team__heading {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	color: var(--cps-white);
	margin: 0 0 1rem;
}
.cps-service-team__intro {
	font-size: 1.2rem;
	line-height: 1.6;
	margin: 0 0 2rem;
	max-width: 56rem;
	color: rgba(255,255,255,.95);
}
.cps-service-team__intro p { margin: 0 0 .75em; }
.cps-service-team__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 3rem;
}
.cps-service-team__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	color: rgba(255,255,255,.95);
	font-size: 1.075rem;
	line-height: 1.5;
}
.cps-service-team__list li {
	position: relative;
	padding-left: 1.25rem;
}
.cps-service-team__list li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: currentColor;
	font-weight: 700;
}
.cps-service-team__photo {
	position: relative;
	margin: 0;
	/* Give the wrapper a definite height so object-fit:cover can genuinely
	   fill it. Previously the img was height:auto + max-height, so any photo
	   that wasn't tall enough left the charcoal section background showing as
	   a black bar underneath, regardless of the image used. */
	height: clamp(240px, 32vw, 420px);
	overflow: hidden;
}
.cps-service-team__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cps-service-team__cta {
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
/* The shared heading-colour control already recolours the heading; extend it to
   the intro + bullets so this banner isn't locked to white text (client amend —
   "only available with white text"). No control chosen → stays white. */
.cps-service-team.cps-hd--black .cps-service-team__intro,
.cps-service-team.cps-hd--black .cps-service-team__list { color: var(--cps-charcoal); }
.cps-service-team.cps-hd--green .cps-service-team__intro,
.cps-service-team.cps-hd--green .cps-service-team__list { color: var(--cps-green); }
@media (max-width: 720px) {
	.cps-service-team__cols { grid-template-columns: 1fr; gap: .5rem; }
}

/* ==========================================================================
   CPS Case Study Callout — green band, 2-col, outcome + case study card
   ========================================================================== */
.cps-case-study-callout {
	background: var(--cps-green);
	color: var(--cps-white);
	padding: 5rem 1.5rem;
}
.cps-case-study-callout__inner {
	max-width: var(--cps-container);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 3rem;
	align-items: center;
}
.cps-case-study-callout__heading {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	line-height: 1.2;
	color: var(--cps-white);
	margin: 0 0 1.25rem;
}
.cps-case-study-callout__bullets {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	color: var(--cps-white);
	font-size: 1.2rem;
	line-height: 1.5;
}
.cps-case-study-callout__bullets li {
	position: relative;
	padding-left: 1.5rem;
}
.cps-case-study-callout__bullets li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: currentColor;
	font-weight: 800;
}
.cps-case-study-callout__prompt {
	color: var(--cps-white);
	font-size: 1.2rem;
	line-height: 1.5;
	margin: 0 0 1rem;
	font-weight: 600;
}
.cps-case-study-callout__card {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	text-decoration: none;
	box-shadow: 0 12px 24px rgba(0,0,0,.15);
}
.cps-case-study-callout__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cps-case-study-callout__label {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: var(--cps-charcoal);
	color: var(--cps-white);
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: .12em;
	padding: 1rem 2rem;
	border-radius: 4px;
}
@media (max-width: 860px) {
	.cps-case-study-callout__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ==========================================================================
   CPS Case Studies Grid — 3-up cards on white
   ========================================================================== */
.cps-case-studies-grid {
	background: var(--cps-white);
	padding: 4rem 1.5rem;
}
.cps-case-studies-grid__inner {
	max-width: var(--cps-container);
	margin-inline: auto;
}
.cps-case-studies-grid__header { margin-bottom: 2rem; }
.cps-case-studies-grid__eyebrow {
	color: var(--cps-green);
	font-family: var(--cps-font-heading);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .85rem;
	margin: 0 0 .5rem;
}
.cps-case-studies-grid__heading {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	color: var(--cps-charcoal);
	margin: 0;
}
.cps-case-studies-grid__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.cps-case-studies-grid__card { margin: 0; }
.cps-case-studies-grid__link {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	text-decoration: none;
	aspect-ratio: 4 / 3;
	background: var(--cps-gray-100);
}
.cps-case-studies-grid__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .25s ease;
}
.cps-case-studies-grid__link:hover img { transform: scale(1.03); }
.cps-case-studies-grid__label {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 1.25rem;
	background: var(--cps-green);
	color: var(--cps-white);
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: .85rem;
	letter-spacing: .12em;
	padding: .65rem 1rem;
	text-align: center;
	border-radius: 4px;
}
.cps-case-studies-grid__more {
	text-align: right;
	margin: 1rem 0 0;
	font-family: var(--cps-font-heading);
	font-weight: 700;
}
.cps-case-studies-grid__more a {
	color: var(--cps-charcoal);
	text-decoration: none;
	border-bottom: 2px solid var(--cps-charcoal);
	padding-bottom: .15rem;
}
.cps-case-studies-grid__more a:hover { color: var(--cps-green); border-color: var(--cps-green); }
@media (max-width: 900px) { .cps-case-studies-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cps-case-studies-grid__list { grid-template-columns: 1fr; } }

/* ==========================================================================
   CPS Customer Logo Banner — horizontal scroller
   ========================================================================== */
.cps-logo-banner {
	background: var(--cps-white);
	padding: 2.5rem 0;
}
.cps-logo-banner__viewport {
	overflow: hidden;
	max-width: 100%;
}
.cps-logo-banner__track {
	display: flex;
	align-items: center;
	gap: 4rem;
	list-style: none;
	padding: 0 1.5rem;
	margin: 0;
}
.cps-logo-banner--scroll .cps-logo-banner__track {
	animation: cps-logo-scroll 30s linear infinite;
	width: max-content;
}
.cps-logo-banner__item {
	flex: 0 0 auto;
}
.cps-logo-banner__item img {
	max-height: 64px;
	width: auto;
	display: block;
	filter: grayscale(100%) brightness(0) opacity(.4);
	transition: filter .2s ease;
}
.cps-logo-banner__item img:hover { filter: grayscale(0%) opacity(1); }
@keyframes cps-logo-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.cps-logo-banner--scroll .cps-logo-banner__track { animation: none; }
}

/* ==========================================================================
   Uniform top spacing for CPS blocks
   --------------------------------------------------------------------------
   Every CPS block renders with an auto-generated `wp-block-acf-cps-*`
   wrapper class. This gives each one a consistent 80px top padding so
   sections have even breathing room.

   `:not(:first-child)` skips whichever block is first in the page content
   (the hero on most pages) — that block sits directly under the header and
   shouldn't be pushed down.

   Every CPS block gets 80px top + bottom PADDING (inside the block) for even
   vertical breathing room. Blocks still abut (margins stay 0 from the reset
   above), so adjacent coloured sections meet at a clean colour boundary — no
   neutral gap. Horizontal padding is left to each block.

   `!important` so it's truly consistent on every block — including the
   content-photo block, which previously zeroed its bottom padding for a
   cut-out photo (that left no space under its CTA).
   ========================================================================== */
:is(.wp-site-blocks, .editor-styles-wrapper) [class*="wp-block-acf-cps-"] {
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}

/* Exception: the service-team photo is full-bleed to the bottom edge of the dark
   panel by design, so the 80px bottom padding showed as a charcoal bar between
   the photo and whatever section follows. The block's own bottom breathing room
   comes from `.cps-service-team__inner`'s 5rem padding above the photo.
   Doubled class (0,3,0) to out-specify the rule above, which lands on the same
   element (the wrapper class and .cps-service-team share the <section>). */
:is(.wp-site-blocks, .editor-styles-wrapper) .cps-service-team.cps-service-team {
	padding-bottom: 0 !important;
}

/* ==========================================================================
   Block appearance overrides (backend controls)
   --------------------------------------------------------------------------
   Driven by the shared "Block Appearance" ACF field group + the render_block
   filter in inc/block-appearance.php, which adds these classes to a block's
   first element when an editor picks a colour. Blocks left on "Default" get
   no class and are unaffected. `!important` is needed to override each block's
   built-in background / heading colours.
   ========================================================================== */
.cps-bg--green { background-color: var(--cps-green) !important; background-image: none !important; }
.cps-bg--grey  { background-color: var(--cps-off-white) !important; background-image: none !important; }
.cps-bg--white { background-color: var(--cps-white) !important; background-image: none !important; }

.cps-hd--black :is(h1, h2, h3, h4, h5, h6, [class*="__heading"], [class*="__title"]) {
	color: var(--cps-charcoal) !important;
}
.cps-hd--white :is(h1, h2, h3, h4, h5, h6, [class*="__heading"], [class*="__title"]) {
	color: var(--cps-white) !important;
}
.cps-hd--green :is(h1, h2, h3, h4, h5, h6, [class*="__heading"], [class*="__title"]) {
	color: var(--cps-green) !important;
}

/* ==========================================================================
   Contact page — details list + call-to-action card
   ========================================================================== */
/* Horizontal gutter so the details / card never touch the screen edge
   (matches the 1.5rem gutter used by every CPS block). */
.cps-contact {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
/* Short intro line between the "Get in touch" heading and the form.
   Narrow measure so it wraps to two lines as per the design. */
.cps-contact__intro {
	max-width: 30rem;
	margin: 1rem 0 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--cps-charcoal);
}
.cps-contact__details {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}
.cps-contact__detail {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.cps-contact__label {
	font-family: var(--cps-font-heading);
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cps-green);
}
.cps-contact__value {
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--cps-charcoal);
	text-decoration: none;
}
a.cps-contact__value:hover { color: var(--cps-green-dark); text-decoration: underline; }

.cps-contact__card {
	background: var(--cps-off-white);
	border-radius: 10px;
	padding: 2.5rem;
	height: 100%;
}
.cps-contact__card-heading {
	font-family: var(--cps-font-heading);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	color: var(--cps-charcoal);
	margin: 0 0 1rem;
}
.cps-contact__card-text {
	color: var(--cps-charcoal);
	line-height: 1.6;
	margin: 0 0 1.75rem;
}
.cps-contact__card-cta { margin: 0 0 1rem; }
.cps-contact__card-or {
	margin: 0;
	/* Match the card paragraph text size (inherits base), not a smaller size. */
	color: var(--cps-gray-500);
}
.cps-contact__card-or a { color: var(--cps-green-dark); font-weight: 600; }

/* Details-only variant (phone / email / address): hugs its content instead of
   stretching to the height of the form column, so it sits at the top of the
   row as per the design. */
.cps-contact__card--details {
	height: auto;
	padding: 2.25rem;
}
.cps-contact__card--details .cps-contact__details { margin-top: 0; }

/* Google Business Profile map below the details card — square, matching the
   card's corner radius. */
.cps-contact__map {
	margin-top: 1.5rem;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	background: var(--cps-off-white);
}
.cps-contact__map-frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.cps-contact__map-link {
	margin: .85rem 0 0;
	font-size: .95rem;
}
.cps-contact__map-link a {
	color: var(--cps-green-dark);
	font-weight: 600;
}
.cps-contact__map-link a:hover { text-decoration: underline; }

@media (max-width: 860px) {
	.cps-contact .wp-block-columns { flex-wrap: wrap; gap: 2.5rem; }
	.cps-contact .wp-block-column { flex-basis: 100% !important; }
}

/* ==========================================================================
   Image Split — text column beside a contained rounded photo (page-2 design)
   Background / heading colour come from the shared Block Appearance control;
   on a green background the heading + body flip to white for contrast.
   ========================================================================== */
.cps-image-split {
	background: var(--cps-white);
	padding: 4.5rem 1.5rem;
}
.cps-image-split__inner {
	max-width: var(--cps-container);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 3.5rem;
	align-items: center;
}
/* Image on the left → media column first (text stays first in the DOM). */
.cps-image-split--img-left .cps-image-split__media { order: -1; }

.cps-image-split__eyebrow {
	display: inline-block;
	color: var(--cps-green);
	font-family: var(--cps-font-heading);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .85rem;
	margin: 0 0 .75rem;
}
.cps-image-split__heading {
	font-family: var(--cps-font-heading);
	color: var(--cps-green);
	font-weight: 800;
	font-size: clamp(1.75rem, 3vw, 2.4rem);
	line-height: 1.15;
	margin: 0 0 1rem;
}
.cps-image-split__subheading {
	font-family: var(--cps-font-heading);
	color: var(--cps-charcoal);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.4;
	margin: 0 0 1.25rem;
}
.cps-image-split__body {
	color: var(--cps-text);
	font-size: 1.05rem;
	line-height: 1.7;
}
.cps-image-split__body p { margin: 0 0 1em; }
.cps-image-split__body p:last-child { margin-bottom: 0; }
.cps-image-split__media img {
	display: block;
	width: 100%;
	/* Deep panel, crop-to-fill — image sits ~text height regardless of the
	   source photo's proportions (matches the design). */
	aspect-ratio: 5 / 4;
	height: auto;
	object-fit: cover;
	border-radius: 18px;
}
.cps-image-split__cta-wrap { margin: 1.75rem 0 0; }

/* Green background variant — heading + body + eyebrow flip to white; the
   subheading stays dark, matching the design. The Block Appearance heading
   colour control still overrides the heading if explicitly set. */
.cps-image-split.cps-bg--green .cps-image-split__heading,
.cps-image-split.cps-bg--green .cps-image-split__eyebrow { color: var(--cps-white); }
.cps-image-split.cps-bg--green .cps-image-split__body { color: rgba(255, 255, 255, .95); }

@media (max-width: 860px) {
	.cps-image-split__inner { grid-template-columns: 1fr; gap: 2rem; }
	/* Image always below the text on mobile, regardless of desktop side. */
	.cps-image-split--img-left .cps-image-split__media { order: 0; }
	.cps-image-split__media img { max-width: 520px; margin-inline: auto; }
}

/* ==========================================================================
   Contact form (Gravity Forms) — themed to match the site
   ========================================================================== */
.cps-contact-form .gform_wrapper { margin: 1.75rem 0 0; }
.cps-contact-form .gform_fields { display: grid; gap: 1.25rem; }
.cps-contact-form .gfield_label {
	font-family: var(--cps-font-heading);
	font-weight: 600;
	font-size: .95rem;
	color: var(--cps-charcoal);
	margin-bottom: .4rem;
}
.cps-contact-form .gfield_required { color: var(--cps-green-dark); }
.cps-contact-form input[type="text"],
.cps-contact-form input[type="email"],
.cps-contact-form input[type="tel"],
.cps-contact-form textarea {
	width: 100%;
	padding: .85rem 1rem;
	border: 1px solid var(--cps-gray-200);
	border-radius: 6px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--cps-charcoal);
	background: var(--cps-white);
	box-sizing: border-box;
}
.cps-contact-form textarea { min-height: 140px; resize: vertical; }
.cps-contact-form input:focus,
.cps-contact-form textarea:focus {
	outline: none;
	border-color: var(--cps-green);
	box-shadow: 0 0 0 3px rgba(147, 176, 80, .25);
}
.cps-contact-form .gform_footer { margin-top: 1.75rem; text-align: center; }
/* `!important` overrides Gravity Forms' Orbital theme button styling (blue). */
.cps-contact-form .gform_wrapper .gform_footer .gform_button,
.cps-contact-form .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	padding: .95rem 2rem !important;
	background: var(--cps-green) !important;
	color: var(--cps-white) !important;
	border: 2px solid var(--cps-green) !important;
	border-radius: 4px !important;
	font-family: var(--cps-font-heading);
	font-weight: 700;
	font-size: .9rem;
	line-height: 1 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.cps-contact-form .gform_wrapper .gform_footer .gform_button:hover,
.cps-contact-form .gform_button:hover {
	background: var(--cps-green-dark) !important;
	border-color: var(--cps-green-dark) !important;
	transform: translateY(-1px);
}
.cps-contact-form .gform_confirmation_message {
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--cps-charcoal);
	padding: 2.5rem 2rem;
	background: var(--cps-off-white);
	border-radius: 10px;
}
.cps-contact-form .validation_message,
.cps-contact-form .gfield_validation_message {
	color: #b00020;
	font-size: .9rem;
	margin-top: .35rem;
}