/**
 * Pattern-level fixes that aren't tied to a specific block variation.
 *
 * Mostly resolves nested-flex shrink-to-intrinsic-width bugs that
 * surface in pattern compositions where the WP block editor doesn't
 * expose the relevant flex properties.
 */

/* ---------- How It Works heading group ----------
 * The outer vertical-flex group with alignItems:center makes the h2
 * shrink to its longest-word width, causing one-word-per-line wrapping.
 * Force the heading to span its constrained max-width.
 *
 * Additionally, the parent theme applies `container-type: inline-size` to
 * every .wp-block-group, which makes nested flex rows collapse to 0 width
 * (their inline-size becomes governed by the containing block instead of
 * their content). For the eyebrow row we override container-type to normal
 * so it can size to its inline content (hr + heading).
 */
.how-it-works > .wp-block-group {
	width: 100%;
}

.how-it-works > .wp-block-group > .wp-block-group:first-child {
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
}

.how-it-works > .wp-block-group > .wp-block-group:first-child > .wp-block-heading {
	width: 100%;
}

.how-it-works > .wp-block-group > .wp-block-group:first-child > .wp-block-group {
	container-type: normal;
	width: max-content;
	max-width: 100%;
}

/* ---------- Testimonial card avatar + name block ----------
 * Inner vertical-flex group inside an outer horizontal-flex row
 * shrinks to one character wide. Restore sane flex behaviour with
 * min-width:0 + flex:1 on the inner column.
 */
.testimonial-card > .wp-block-group .wp-block-group {
	min-width: 0;
	flex: 1 1 auto;
}

.testimonial-card > .wp-block-group .wp-block-group > .wp-block-paragraph,
.testimonial-card > .wp-block-group .wp-block-group > p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.testimonial-card .testimonial-quote {
	font-size: 16px;
	line-height: 26px;
}

.testimonial-card .testimonial-reviewer {
	font-size: 14px;
	line-height: 21.7px;
}

.testimonial-card .testimonial-city {
	font-size: 12px;
	line-height: 18.6px;
}

/* The avatar itself is a paragraph styled as a circle; keep its size
 * fixed so it doesn't shrink and don't apply nowrap there. */
.testimonial-card .avatar {
	flex: 0 0 40px;
	white-space: nowrap;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	overflow: visible !important;
	text-overflow: clip !important;
	line-height: 1;
}

/* ---------- Differentiators icon container ----------
 * Empty <img> placeholders collapse to zero width and break the
 * alignment grid. Reserve their slot.
 */
.differentiators-bar .differentiator-icon img {
	min-width: 22px;
	min-height: 22px;
}

.differentiators-bar .differentiator-icon {
	flex: 0 0 22px;
}

.differentiators-bar .differentiator-item {
	flex: 0 1 0;
    display: inline-flex;
	min-width: 180px;
	align-items: center;
    gap: 12px;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.differentiators-bar .differentiator-item > .wp-block-group {
    container-type: normal;
    width: max-content;
	flex: 1 2 max-content;
	min-width: 0;
}

.differentiators-bar .differentiator-item h3 {
    font-size: var(--wp--preset--font-size--medium);
    font-family: var(--wp--preset--font-family--dm-sans);
    font-weight: var(--wp--custom--font-weight--semi-bold);
    line-height: 1;
	margin: 0;
}

.differentiators-bar .differentiator-item p {
    font-size: var(--wp--preset--font-size--small);
    font-family: var(--wp--preset--font-family--inter), sans-serif;
    text-wrap: nowrap;
	margin: 0;
}

.differentiators-bar .differentiator-divider {
	flex: 0 0 1px;
	width: 1px;
	height: 36px;
	margin: 0;
	border: 0;
	background-color: var(--wp--preset--color--border-subtle);
}

/* What We Treat service-card + icon-pill styles live in the
 * "What We Treat — Service Cards" section near the end of this file. */

/* ---------- How It Works step grid ----------
 * Native core/columns stays 4-up on desktop. WordPress collapses columns to
 * a single stacked column at <=781px; override that so the grid matches the
 * Figma mobile design (2x2) and degrades gracefully.
 */
.how-it-works-grid.wp-block-columns {
	gap: 24px;
}

@media (max-width: 781px) {
	.how-it-works-grid.wp-block-columns {
		flex-wrap: wrap;
	}

	.how-it-works-grid.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 12px) !important;
		flex-grow: 0;
	}
}

/* ---------- How It Works step icons ----------
 * Icon is a native core/image of an inline-coloured SVG (red fill baked in).
 * Lock its rendered size: 40px desktop, 32px mobile (per Figma).
 */
.how-it-works-grid .step-icon {
	margin: 0 0 1rem 0;
	height: auto;
}

.how-it-works-grid .step-icon img {
	width: 40px;
	height: auto;
}

@media (max-width: 781px) {
	.how-it-works-grid .step-icon img {
		width: 32px;
	}
}

/* ---------- How It Works step heading (PPC-6, PPC-8) ----------
 * PPC-6: remove the heading's top spacing so the icon sits 8px above the
 *        text (the 8px comes solely from .step-icon's margin-bottom).
 * PPC-8: Figma calls for 14.5px here; the inline fluid clamp maxes at 18px,
 *        so override it (inline styles require !important).
 */
.how-it-works-grid .wp-block-heading {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--font-18-px) !important;
    margin-bottom: 8px !important;
}

.how-it-works-grid .wp-block-heading + .wp-block-paragraph {
    font-size: var(--wp--preset--font-size--font-14-px) !important;
    line-height: 1.55 !important;
}

/* ---------- Display heading line break ----------
 * Keep the Figma desktop 2-line break (forced via <br>); on mobile drop it
 * so the heading wraps naturally.
 */
@media (max-width: 781px) {
	.how-it-works h2 br {
		display: none;
	}
}

/* ---------- Eyebrow + rule alignment (PPC-5, PPC-9) ----------
 * Shared modifier class used by both the How It Works and What We Treat
 * eyebrows. PPC-9: the core separator draws a border line that showed up
 * alongside the intended coloured bar (red + black); force the bar to be the
 * only visual so it inherits the section's eyebrow colour. PPC-5: vertical
 * centring is handled by the eyebrow row's flex `verticalAlignment:center`;
 * keep zero vertical margin so the bar lands on the text equator.
 */
.eyebrow-rule {
	width: 18px !important;
	height: 1.5px !important;
	border-radius: 2px;
	border: 0 !important;
	flex: 0 0 18px;
	margin: 0;
	align-self: center;
	background-color: var(--wp--preset--color--border-light);
}

/* PPC-5: the eyebrow label immediately following the rule must carry no
 * vertical margin, otherwise its margin box de-centres in the flex row and the
 * rule drifts off the text equator (seen in How It Works, which lacked the
 * reset that What We Treat had). Keyed off the shared .eyebrow-rule modifier so
 * one rule corrects every use of the element. */
.eyebrow-rule + .is-style-eyebrow,
.eyebrow-rule + .is-style-eyebrow-on-dark {
	margin: 0;
}

/* ---------- Locations CTA county list (replaces core/list) ---------- */
.locations-cta .county-list {
	list-style: none;
	margin: 16px 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 16px;
}

.locations-cta .county-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 22px;
	color: var(--wp--preset--color--text-body-tinted);
	margin-left: 0;
}

.locations-cta .county-list .county-check {
	flex: 0 0 14px;
	display: inline-flex;
	align-items: center;
}

/* PPC-12 — Map pins instead of checkmarks (Figma 92:1403).
 * The county list markup (pattern file + static copies saved in page
 * post_content) renders an inline check SVG inside .county-check. Swap it
 * for a masked location-pin glyph here so every saved copy is fixed without
 * re-syncing page content. */
.locations-cta .county-list .county-check svg {
	display: none;
}

.locations-cta .county-list .county-check::before {
	content: "";
	width: 14px;
	height: 14px;
	background-color: var(--wp--preset--color--primary-red);
	-webkit-mask: url(../../icons/location-dot-sm.svg) center / contain no-repeat;
	mask: url(../../icons/location-dot-sm.svg) center / contain no-repeat;
}

@media (max-width: 600px) {
	.locations-cta .county-list {
		grid-template-columns: 1fr;
	}
}

/* ---------- Locations CTA map placeholder ---------- */
.locations-cta .map-card {
	overflow: hidden;
	aspect-ratio: 16 / 11;
	display: flex;
}

.locations-cta .map-placeholder {
	flex: 1 1 auto;
	background: linear-gradient(135deg, var(--wp--preset--color--surface-light) 0%, #d8e0db 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
}

.locations-cta .map-placeholder-label {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	text-transform: uppercase;
	letter-spacing: 1.68px;
	font-weight: 600;
}

/* ---------- Header phone styling now lives in block-styles/header.css ---------- */

/* ---------- Differentiator icon container override ----------
 * The icon is small and should align with text. Use baseline align to
 * keep it visually centered with the stat number on the first line.
 */
.differentiators-bar .differentiator-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--primary-charcoal);
}


/* ---------- Real map image fills the map-card ---------- */
.locations-cta .map-card .wp-block-image {
	height: 100%;
	margin: 0;
}

.locations-cta .map-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.locations-cta .map-card {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	display: block;
	border: 0;
}

/* ---------- Locations county rows (PPC-27) ----------
 * The saved page content uses four equal grid tracks and includes city lists
 * that are absent from the approved desktop and mobile compositions.
 */
.wp-block-group.alignwide:has(> .svg-county-map) {
	display: grid;
	grid-template-columns: 162px minmax(0, 630px) !important;
	align-items: start;
	gap: 95px !important;
	width: min(887px, 100%);
}

.wp-block-group.alignwide:has(> .svg-county-map):nth-child(2) {
	margin-block-start: 116px;
}

.wp-block-group.alignwide:has(> .svg-county-map):nth-child(3) {
	margin-block-start: 105px;
}

.wp-block-group.alignwide:has(> .svg-county-map):nth-child(4) {
	margin-block-start: 130px;
}

.wp-block-group.alignwide:has(> .svg-county-map):nth-child(5) {
	margin-block-start: 104px;
}

.wp-block-group.alignwide:has(> .svg-county-map) > .svg-county-map {
	grid-column: 1 !important;
	width: 162px;
	height: 313px;
	align-self: start;
}

.wp-block-group.alignwide:has(> .svg-county-map) > .svg-county-map img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wp-block-group.alignwide:has(> .svg-county-map) > .wp-block-group {
	grid-column: 2 !important;
	width: 100%;
	min-width: 0;
}

.wp-block-group.alignwide:has(> .svg-county-map) > .wp-block-group > .wp-block-heading {
	font-size: 40px !important;
	line-height: 48px;
	font-weight: 500;
	letter-spacing: 0;
	color: #14201a;
	margin: 0 0 24px !important;
}

.wp-block-group.alignwide:has(> .svg-county-map) > .wp-block-group > p {
	font-size: 16px !important;
	line-height: 26px;
	color: #2a3a33;
	margin: 0;
}

.wp-block-group.alignwide:has(> .svg-county-map):not(:first-child)
	> .wp-block-group
	> p {
	max-width: 620px;
}

.wp-block-group.alignwide:has(> .svg-county-map) > .wp-block-group > .wp-block-list {
	display: none;
}

@media (max-width: 781px) {
	.wp-block-group.alignfull.has-global-padding:has(.svg-county-map) {
		padding-inline: 23px !important;
	}

	.wp-block-group.alignwide:has(> .svg-county-map) {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 24px !important;
		width: 100%;
	}

	.wp-block-group.alignwide:has(> .svg-county-map)
		+ .wp-block-group.alignwide:has(> .svg-county-map) {
		margin-block-start: 40px !important;
	}

	.wp-block-group.alignwide:has(> .svg-county-map) > .svg-county-map {
		grid-column: 1 !important;
		width: 65px;
		height: 126px;
		justify-self: start;
	}

	.wp-block-group.alignwide:has(> .svg-county-map) > .wp-block-group {
		grid-column: 1 !important;
		width: 100%;
		min-width: 0;
	}

	.wp-block-group.alignwide:has(> .svg-county-map) > .wp-block-group > .wp-block-heading {
		font-size: 32px !important;
		line-height: 40px;
		font-weight: 500;
	}
}

/* ---------- Gravity Forms — brand the submit button on dark CTAs ---------- */
.final-cta-form-column .gform_wrapper {
	--gf-color-primary: var(--wp--preset--color--primary-red);
	--gf-color-primary-rgb: 212, 63, 57;
	--gf-color-primary-contrast: var(--wp--preset--color--white);
	--gf-color-primary-darker: #b83430;
	--gf-color-primary-lighter: #e85a55;
	--gf-radius: var(--wp--custom--borders--radius--pill);
	--gf-ctrl-btn-padding-x: 25px;
}

.final-cta-form-column .gform_wrapper .gform_footer {
	margin-top: 16px;
	display: flex;
	justify-content: center;
}

.final-cta-form-column .gform_wrapper .gform_button.button,
.final-cta-form-column .gform_wrapper button[type="submit"] {
	background-color: var(--wp--preset--color--primary-red);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--borders--radius--pill);
	padding: 14px 28px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.final-cta-form-column .gform_wrapper .gform_button.button:hover,
.final-cta-form-column .gform_wrapper button[type="submit"]:hover {
	background-color: #b83430;
}

/* Force white labels on dark background (14px per Figma 94:2146) */
.final-cta-form-column .gform_wrapper .gfield_label,
.final-cta-form-column .gform_wrapper legend {
	color: var(--wp--preset--color--white);
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	gap: 0; /* Orbital's 6px flex gap put a space before the required marker */
}

/* Form inputs — white bg, blue border, 4px radius (PPC-24, Figma 94:2146) */
.final-cta-form-column .gform_wrapper input[type="text"],
.final-cta-form-column .gform_wrapper input[type="email"],
.final-cta-form-column .gform_wrapper input[type="tel"],
.final-cta-form-column .gform_wrapper input[type="url"],
.final-cta-form-column .gform_wrapper select,
.final-cta-form-column .gform_wrapper textarea {
	background-color: var(--wp--preset--color--white);
	border: 1px solid #063688;
	border-radius: var(--wp--custom--borders--radius--sm);
	color: var(--wp--preset--color--text-form);
	height: 40px;
	padding: 0 12px;
	font-size: 14px;
	box-sizing: border-box;
}

/* Same treatment when the pattern is used on the dedicated /contact/ page
 * where the form sits inside a light column (not dark CTA). */
.contact-body .gform_wrapper {
	--gf-color-primary: var(--wp--preset--color--primary-red);
	--gf-radius: var(--wp--custom--borders--radius--sm);
	/* PPC-14 — Orbital theme drives text off these custom props; pin them so
	 * the label + input text respect the design regardless of the GF theme. */
	--gf-ctrl-label-color-primary: var(--wp--preset--color--text-muted);
	--gf-ctrl-label-color-secondary: var(--wp--preset--color--text-muted);
	--gf-ctrl-color: var(--wp--preset--color--text-form);
	--gf-local-color: var(--wp--preset--color--text-form);
}

/* PPC-14 — force field label + control text color (Orbital "inherit from
 * default" was not honoring the set color). Scoped selector out-specifies the
 * theme's custom-property driven defaults. */
.contact-body .gform_wrapper .gfield_label,
.contact-body .gform_wrapper legend.gfield_label,
.contact-body .gform_wrapper .gform_required_legend,
.contact-body .gform_wrapper .gfield_description {
	color: var(--wp--preset--color--text-body);
}

.contact-body .gform_wrapper input[type="text"],
.contact-body .gform_wrapper input[type="email"],
.contact-body .gform_wrapper input[type="tel"],
.contact-body .gform_wrapper input[type="url"],
.contact-body .gform_wrapper input[type="number"],
.contact-body .gform_wrapper select,
.contact-body .gform_wrapper textarea {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--borders--radius--sm);
	color: var(--wp--preset--color--text-form);
}

.contact-body .gform_wrapper input::placeholder,
.contact-body .gform_wrapper textarea::placeholder,
.contact-body .gform_wrapper select:invalid {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

.contact-body .gform_wrapper .gform_button.button,
.contact-body .gform_wrapper button[type="submit"] {
	background-color: var(--wp--preset--color--primary-red);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--borders--radius--pill);
	padding: 14px 28px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 600;
}

.contact-body .gform_wrapper .gform_button.button:hover,
.contact-body .gform_wrapper button[type="submit"]:hover {
	background-color: #b83430;
}

/* ---------- Gravity Forms submit button — override default ID-selector specificity ---------- */
.gform_wrapper #gform_submit_button_2,
.gform_wrapper input[type="submit"].gform_button,
.gform_wrapper button[type="submit"].gform_button,
.gform_wrapper button.gform_button {
	background-color: var(--wp--preset--color--primary-red) !important;
	color: var(--wp--preset--color--white) !important;
	border: 0 !important;
	border-radius: var(--wp--custom--borders--radius--pill) !important;
	padding: 14px 48px 14px 28px !important;
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: var(--wp--preset--font-size--button) !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
	line-height: 1.4 !important;
	min-height: 0 !important;
	height: auto !important;
}

.gform_wrapper #gform_submit_button_2:hover,
.gform_wrapper input[type="submit"].gform_button:hover,
.gform_wrapper button[type="submit"].gform_button:hover,
.gform_wrapper button.gform_button:hover {
	background-color: #b83430 !important;
}

/* ---------- Page hero image (Stage 6 wiring) ---------- */
.page-hero-image {
	margin-top: var(--wp--preset--spacing--large);
	margin-bottom: var(--wp--preset--spacing--2xl);
}
.page-hero-image img {
	width: 100%;
	height: auto;
	max-height: 460px;
	object-fit: cover;
	border-radius: var(--wp--custom--borders--radius--large, 16px);
}
.page-404 .page-404-image {
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
}
.page-404 .page-404-image img {
	width: 100%;
	height: auto;
}

/* ---------- Site footer — light design (PPC-17, Figma node 92:379) ----------
 * NOTE: the parent theme (wp-amsive-lpt) ships high-specificity footer CSS
 * (_footer.css / _social-icons.css) that colors links #5A5656, forces white
 * social circles, and adds a top border + margin to EVERY nested .wp-block-group
 * inside `footer`. These child rules deliberately out-specify / !important those
 * so the footer matches the PPC design. */
.site-footer.wp-block-group {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text-body);
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--large) var(--wp--preset--spacing--x-large);
}

/* Neutralize the parent's `footer .wp-block-group .wp-block-group` border/margin
 * that was drawing stray rules across our accordion + services + bottom groups.
 * (The footer template-part adds an outer <footer>, so a descendant selector
 * can't reliably reach these — target the classes directly.) */
.site-footer .footer-accordion,
.site-footer .footer-services-lists,
.site-footer .footer-bottom-bar {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
}

.site-footer .footer-brand .wp-block-site-logo img {
	max-width: 72px;
	height: auto;
}

.site-footer .footer-tagline {
	color: var(--wp--preset--color--text-body-tinted) !important;
	font-size: 14px !important;
	line-height: 22px !important;
	margin-top: var(--wp--preset--spacing--small);
	max-width: 320px;
}

/* Social — red filled circles with white glyphs (beats parent white-circle rule) */
.site-footer .wp-block-social-links {
	margin-top: var(--wp--preset--spacing--medium);
	gap: 12px;
}
.site-footer .wp-block-social-links:not(.is-style-logos-only) .wp-social-link {
	background-color: var(--wp--preset--color--primary-red) !important;
	border-color: var(--wp--preset--color--primary-red) !important;
	color: var(--wp--preset--color--white) !important;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
/* The parent theme colors the social ANCHOR #5A5656; the glyph inherits from it,
 * so force the anchor + svg white. */
.site-footer .wp-block-social-link a,
.site-footer .wp-block-social-link .wp-block-social-link-anchor {
	color: var(--wp--preset--color--white) !important;
}
.site-footer .wp-block-social-link svg {
	fill: var(--wp--preset--color--white) !important;
	transition: opacity 0.15s ease;
}
.site-footer .wp-block-social-link:hover {
	opacity: 0.85;
	transform: none;
}

/* Column link lists — dark charcoal (override parent #5A5656) */
.site-footer .footer-list a {
	color: var(--wp--preset--color--text-form) !important;
	text-decoration: none;
}
.site-footer .footer-list a:hover {
	color: var(--wp--preset--color--primary-red) !important;
}

/* Accent (red) links — "View all", "Contact Us" */
.site-footer .footer-list a.footer-link-accent,
.site-footer a.footer-link-accent {
	color: var(--wp--preset--color--primary-red) !important;
	font-weight: 600;
}

/* Contact column lines */
.site-footer .footer-contact-line {
	color: var(--wp--preset--color--text-form) !important;
	font-size: 14px !important;
	line-height: 21.7px !important;
	margin: 0 0 12px !important;
}
.site-footer .footer-contact-line a:not(.footer-link-accent) {
	color: var(--wp--preset--color--text-form) !important;
	text-decoration: none;
}

/* Divider + bottom bar */
.site-footer hr.footer-divider {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border-subtle);
	background: transparent;
	width: 100% !important;
	max-width: none !important;
	margin: var(--wp--preset--spacing--large) 0 var(--wp--preset--spacing--medium);
}
.site-footer .footer-bottom-bar {
	gap: var(--wp--preset--spacing--small);
}
.site-footer .footer-copyright,
.site-footer .footer-copyright a {
	color: var(--wp--preset--color--text-form) !important;
	font-size: 13px !important;
	margin: 0;
}
.site-footer .footer-legal-nav {
	gap: 24px;
}
.site-footer .footer-legal-nav a {
	color: var(--wp--preset--color--text-form) !important;
	font-size: 13px !important;
	text-decoration: none;
}
.site-footer .footer-legal-nav a:hover {
	color: var(--wp--preset--color--primary-red) !important;
}

/* ==================================================================
 * v13 — Homepage Figma alignment
 * ================================================================== */

/* ---------- Hero: full-bleed split layout (text | curved photo) ----------
 * Left column carries the dark-section padding and aligns its text to the
 * site content gutter. The right side bleeds full-height to the viewport edge
 * with the truck photo (cover), clipped to a curve so the dark section curves
 * with the red eyelash crescent that sits on the seam — all pure CSS.
 */
.home-hero {
	position: relative;
	overflow: hidden;
	/* Curve geometry (box = right region of the hero, from --curve-left to the
	 * right edge). The clip ellipse is centered off the right edge so only its
	 * LEFT arc cuts through the box, bulging left at --curve-cy. Tuned vs Figma. */
	--curve-left: 36%;
	--curve-rx: 82%;
	--curve-ry: 140%;
	--curve-cx: 105%;
	--curve-cy: 100%;
	--eyelash: 48px; /* red crescent thickness at the widest point */
}

.home-hero > .wp-block-columns {
	align-items: stretch;
}

/* Left text column — vertically center content, align to the content gutter */
.home-hero .home-hero-text {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--wp--preset--spacing--x-large);
	padding-inline-end: var(--wp--preset--spacing--x-small);
	padding-inline-start: max(
		var(--wp--preset--spacing--large),
		calc((100vw - 1312px) / 2)
	);
}

/* Hero H1 line-height (kept in CSS so it can flex responsively) */
.home-hero .home-hero-text h1 {
	line-height: 1.14;
}

/* Right media column — just reserves the layout space; the photo + eyelash are
 * positioned absolutely against .home-hero so the curve can span the seam. */
.home-hero .home-hero-media {
	padding: 0;
	min-height: 480px;
}

/* Red eyelash crescent: solid red clipped to the OUTER curve, sitting behind
 * the photo. The photo (clipped to the INNER curve, shifted right) covers all
 * but the crescent sliver, so the red reads as the eyelash on the seam.
 * ::before = solid red fill, ::after = triangular-grid texture confined to the
 * lower wedge (matching Figma). */
.home-hero .home-hero-media::before,
.home-hero .home-hero-media::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: var(--curve-left);
	z-index: 1;
	clip-path: ellipse(
		var(--curve-rx) var(--curve-ry) at
		calc(var(--curve-cx) - var(--eyelash)) var(--curve-cy)
	);
}

.home-hero .home-hero-media::before {
	background-color: var(--wp--preset--color--primary-red);
}

/* Subtle triangular grid, faded in toward the bottom so the thin upper eyelash
 * stays clean red — matches Figma's lower red wedge texture. */
.home-hero .home-hero-media::after {
	background-image:
		repeating-linear-gradient(
			60deg,
			transparent 0 27px,
			rgba(230, 231, 232, 0.16) 27px 28px
		),
		repeating-linear-gradient(
			-60deg,
			transparent 0 27px,
			rgba(230, 231, 232, 0.16) 27px 28px
		),
		repeating-linear-gradient(
			0deg,
			transparent 0 22px,
			rgba(230, 231, 232, 0.16) 22px 23px
		);
	-webkit-mask-image: linear-gradient(to bottom, transparent 42%, #000 72%);
	mask-image: linear-gradient(to bottom, transparent 42%, #000 72%);
}

/* Photo cover shares the same box and is clipped to the INNER curve, so its
 * left edge becomes the red->photo seam and the dark section curves with the
 * eyelash. */
.home-hero .home-hero-cover {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: var(--curve-left);
	z-index: 2;
	width: auto;
	height: auto;
	min-height: 0;
	clip-path: ellipse(
		var(--curve-rx) var(--curve-ry) at var(--curve-cx) var(--curve-cy)
	);
}

.home-hero .home-hero-cover .wp-block-cover__inner-container {
	display: none;
}

/* Stack on small screens: photo becomes a clean full-width banner below the
 * text; the side curve + red eyelash are desktop-only. */
@media (max-width: 781px) {
	.home-hero .home-hero-text {
		padding-inline-start: var(--wp--preset--spacing--large);
		padding-block: var(--wp--preset--spacing--large);
	}

	.home-hero .home-hero-media {
		min-height: 0;
	}

	.home-hero .home-hero-media::before,
	.home-hero .home-hero-media::after {
		display: none;
	}

	.home-hero .home-hero-cover {
		position: relative;
		inset: auto;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		height: auto;
		min-height: 320px;
		clip-path: none;
	}
}

/* Phone-size hero (matches Figma 390 mobile): tighter 23px gutter, 36/44 H1,
 * and a single full-width "Contact Us" button (the phone CTA lives in the
 * mobile header). */
@media (max-width: 600px) {
	.home-hero .home-hero-text {
		padding-inline: 23px;
		padding-block: var(--wp--preset--spacing--large);
	}

	.home-hero .home-hero-text h1 {
		font-size: 36px;
		line-height: 44px;
	}

	.home-hero .home-hero-cover {
		min-height: 297px;
	}

	/* Single full-width primary CTA; phone button is header-only on mobile */
	.home-hero .home-hero-text .phone-link {
		display: none;
	}

	.home-hero .home-hero-text .wp-block-buttons {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.home-hero .home-hero-text .wp-block-buttons .wp-block-button {
		width: 100%;
	}

	.home-hero .home-hero-text .wp-block-buttons .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		text-align: center;
	}
}

/* ---------- Differentiators bar overlaps the hero ----------
 * The hero has a dark background and ends with a row of trust badges
 * that overlap by ~50% so the white rounded card "lifts" into the hero.
 * Uses absolute px so it's independent of the theme.json spacing scale.
 */
.differentiators-bar {
	margin-top: -50px;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 16px;
	padding: 25px 33px;
	box-shadow: 0 1px 1.5px rgba(20, 32, 26, 0.06), 0 1px 1px rgba(20, 32, 26, 0.04);
	position: relative;
	z-index: 2;
}

/* Push the Why-NJ section down so it doesn't crowd the lifted bar */
.home-intro {
	padding-top: 60px !important;
}

.home-intro h2.wp-block-heading {
	font-size: 40px;
	font-weight: 600;
	line-height: 48px;
}

.home-intro > .wp-block-columns > .wp-block-column:last-child > p {
	font-size: 16px;
	line-height: 26px;
}

/* ---------- Why NJ portrait — fixed aspect ratio, rounded ---------- */
.home-intro-image {
	margin: 0;
}

.home-intro-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 526 / 571;
	object-fit: cover;
	border-radius: 16px;
}

/* ======================================================================
 * What We Treat — Service Cards
 * Matches Figma desktop (99:4027) + mobile (99:4204): section header with
 * a red eyebrow dash + Shippori display heading, a 5-up service-card grid
 * (3-up tablet, 2-up mobile), and compact icon-only cards on mobile.
 * ====================================================================== */

/* ---------- Eyebrow row (red dash + label) ---------- */
.what-we-treat .eyebrow-row {
	margin-bottom: 16px;
}

.what-we-treat .eyebrow-rule {
	background-color: var(--wp--preset--color--primary-red);
}

/* The eyebrow label keeps no extra bottom margin inside the flex row so it
 * stays vertically centered with the dash. */
.what-we-treat .eyebrow-row .is-style-eyebrow {
	margin: 0;
}

/* ---------- Display heading ---------- */
.what-we-treat .what-we-treat-title {
	max-width: 624px;
}

/* ---------- 5-up grid (3-up tablet, 2-up mobile) ---------- */
.what-we-treat-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

.what-we-treat-grid .service-card {
	height: 100%;
	min-height: 308px;
}

/* ---------- Service card ---------- */
.service-card.is-style-card-flat {
	padding: 25px;
	border-radius: 16px;
	border: 1px solid var(--wp--preset--color--border-subtle);
	background-color: var(--wp--preset--color--white);
	box-shadow: none;
	transition: box-shadow 0.15s ease;
}

/* WordPress' vertical-flex layout class sets align-items: flex-start and
 * flex-wrap: wrap, which shrink-wraps the title/description to content width
 * and overflows the card. Stretch the card's children to the card width and
 * disable wrapping so text fills the card and wraps correctly. The icon pill
 * keeps its explicit 56px width and stays left-aligned. */
.what-we-treat .service-card {
	flex-wrap: nowrap;
	align-items: stretch;
}

/* Saved copies of the pattern predate the explicit Inter heading attributes. */
.what-we-treat .service-card > .wp-block-heading {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
}

/* PPC-45: linked headings remain the semantic, no-JavaScript navigation.
 * The script adds .is-clickable only when a card has a usable destination. */
.what-we-treat-grid .service-card > .wp-block-heading a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.what-we-treat-grid .service-card.is-clickable > .wp-block-heading a {
	text-decoration: none;
}

.what-we-treat-grid .service-card > .wp-block-heading a:focus-visible {
	outline: 2px solid var(--wp--preset--color--form-border);
	outline-offset: 3px;
}

.what-we-treat-grid .service-card.is-clickable {
	cursor: pointer;
}

.what-we-treat .service-card > p {
	font-size: 13px !important;
	line-height: 1.5;
	letter-spacing: 0;
}

.service-card.is-style-card-flat:hover,
.service-card.is-style-card-flat:focus-within {
	box-shadow: 0 4px 8px rgba(37, 36, 36, 0.12);
}

/* ---------- Icon pill ---------- */
.service-card .icon-pill {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 100px;
	background-color: var(--wp--preset--color--surface-light);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
}

/* Saved copies of the pattern render the icon figure without .icon-pill. */
.what-we-treat .service-card > .wp-block-image:first-child {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	margin: 0;
	border-radius: 100px;
	background-color: var(--wp--preset--color--surface-light);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
}

.what-we-treat .service-card > .wp-block-image:first-child img {
	display: block;
	width: 28px;
	height: 28px;
}

.service-card .icon-pill .service-icon {
	margin: 0;
}

.service-card .icon-pill .service-icon img {
	width: 28px;
	height: 28px;
	transition: filter 0.15s ease;
}

/* Hover: pill turns red, icon turns white (icons are red-filled SVGs). */
.service-card:hover .icon-pill,
.service-card:focus-within .icon-pill {
	background-color: var(--wp--preset--color--primary-red);
}

.service-card:hover .icon-pill .service-icon img,
.service-card:focus-within .icon-pill .service-icon img {
	filter: brightness(0) invert(1);
}

/* ---------- "Learn more" link (PPC-10) ----------
 * All link text is 13px and the link is pinned 24px from the bottom of the
 * card. Cards in a row are equal-height (grid stretch + height:100%), so
 * margin-top:auto aligns every link to a common baseline; padding-bottom sets
 * the 24px gap to the card edge.
 */
.what-we-treat .service-card.is-style-card-flat {
	padding-bottom: 24px;
}

.what-we-treat .service-card-link {
	margin-top: auto;
}

.what-we-treat .service-card-link,
.what-we-treat .service-card-link .wp-block-button__link,
.what-we-treat .service-card > .wp-block-buttons,
.what-we-treat .service-card > .wp-block-buttons .wp-block-button__link {
	font-size: 13px;
}

.what-we-treat .service-card > .wp-block-buttons {
	margin-top: auto;
}

/* PPC-23/PPC-26: the global button min-width (250px) forces each card's
 * "Learn more" button wider than the card. Some saved page copies predate the
 * service-card-link class, so also target the semantic text-link variation. */
.what-we-treat .service-card-link .wp-block-button__link,
.what-we-treat .service-card .is-style-text-link .wp-block-button__link {
	min-width: 0;
}

@media (max-width: 1200px) {
	.what-we-treat-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.what-we-treat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.what-we-treat {
		padding-right: 25px !important;
		padding-left: 25px !important;
	}

	.what-we-treat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	/* Mobile cards show icon + title only (per Figma 99:4204). Description
	 * and the "Learn more" link stay in content (editable) but hidden. Include
	 * direct-child fallbacks for saved copies that predate those classes. */
	.service-card .service-card-desc,
	.service-card .service-card-link,
	.what-we-treat .service-card > p,
	.what-we-treat .service-card > .wp-block-buttons {
		display: none;
	}

	.what-we-treat-grid .service-card {
		height: 156px;
		min-height: 156px;
	}

	.what-we-treat .service-card > .wp-block-heading {
		width: 122px;
		max-width: none;
		line-height: 23.25px;
	}

	.service-card .icon-pill {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
	}

	.what-we-treat .service-card > .wp-block-image:first-child {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
	}

	/* The mobile Figma frame places Commercial before General. */
	.what-we-treat-grid > .service-card:nth-child(5) {
		grid-column: 2;
		grid-row: 3;
	}

	.what-we-treat-grid > .service-card:nth-child(6) {
		grid-column: 1;
		grid-row: 3;
	}
}

@media (max-width: 359px) {
	.what-we-treat-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.what-we-treat-grid > .service-card:nth-child(5),
	.what-we-treat-grid > .service-card:nth-child(6) {
		grid-column: auto;
		grid-row: auto;
	}
}

/* ======================================================================
 * Differentiators Bar — mobile SplideJS carousel
 * ----------------------------------------------------------------------
 * The pattern markup is wrapped in Splide structure
 * (.differentiators-bar.splide > .splide__track > .splide__list >
 * .splide__slide). Splide is initialized below 860px
 * (assets/js/differentiators-carousel.js), so below we style the
 * bar. Matches Figma node 97:3344.
 * ====================================================================== */

/* Keep the carousel visible before/after Splide hydration. */
.differentiators-bar.splide {
	visibility: visible;
}

/* ---------- Mobile: single-card carousel ---------- */
@media (max-width: 859px) {
	/* The outer container drops its card chrome and hero overlap; each
	 * slide becomes its own card instead (per Figma). The is-style-card-flat
	 * variation is 0,2,0 specificity, so this reset must match it. */
	.differentiators-bar.splide {
		margin-top: 16px;
		padding: 0;
		background-color: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.differentiators-bar .splide__track {
		overflow: hidden;
		padding: 0 28px;
		/* Splide prepends .splide__arrows, which makes the track a
		 * `* + *` sibling and picks up the constrained-layout block-gap
		 * margin. Remove it so the card sits at the top. */
		margin-block-start: 0;
	}

	.differentiators-bar .splide__list {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
	}

	/* Each slide is a white rounded card. */
	.differentiators-bar .splide__slide.differentiator-item {
		box-sizing: border-box;
		flex: 0 0 100%;
		min-width: 0;
		min-height: 63px;
		padding: 1.5rem 10%;
		background-color: var(--wp--preset--color--white);
		border: 1px solid var(--wp--preset--color--border-subtle);
		border-radius: 8px;
		box-shadow: 0 1px 8px rgba(37, 36, 36, 0.04);
		justify-content: center;
	}

	.differentiators-bar .splide__slide.differentiator-item > .wp-block-group:first-child {
		width: min-content;
		flex: 0 1 min-content;
	}

	/* Dividers belong to the desktop bar only. */
	.differentiators-bar .differentiator-divider {
		display: none;
	}

	/* Title matches Figma mobile (DM Sans SemiBold 18px charcoal). */
	.differentiators-bar .splide__slide.differentiator-item h3 {
		font-size: 18px;
		line-height: 21.7px;
		letter-spacing: -0.08px;
		color: var(--wp--preset--color--primary-charcoal);
	}

	/* Splide arrows → gray chevrons in the side gutters, centered on the
	 * card (independent of the pagination row beneath it). */
	.differentiators-bar .splide__arrow {
		top: 35%;
        transform: translateY(-35%);
		width: 24px;
		height: 24px;
		background: transparent;
		border-radius: 0;
		opacity: 1;
	}

	.differentiators-bar .splide__arrow:disabled {
		opacity: 0.35;
	}

	.differentiators-bar .splide__arrow svg {
		width: 1rem;
		height: 1rem;
		fill: #a7a9ac;
	}

	.differentiators-bar .splide__arrow--prev {
		left: 0;
	}

	.differentiators-bar .splide__arrow--next {
		right: 0;
	}

	/* Pagination dots below the card: 6px round, red active. */
	.differentiators-bar .splide__pagination {
		position: static;
		display: flex;
		justify-content: center;
		gap: 8px;
		padding: 0;
		margin-top: 16px;
	}

	.differentiators-bar .splide__pagination__page {
		width: 6px;
		height: 6px;
		margin: 0;
		background: var(--wp--preset--color--border-subtle, #e5eae7);
		border-radius: 999px;
		opacity: 1;
		transform: none;
		transition: background 0.2s ease;
	}

	.differentiators-bar .splide__pagination__page.is-active {
		width: 6px;
		height: 6px;
		background: var(--wp--preset--color--primary-red, #d43f39);
		transform: none;
	}

	.home-intro {
		padding-top: 40px !important;
	}
}

/* ---------- Desktop: revert to the 4-up flex bar ----------
 * Splide is destroyed at this breakpoint. Its destroyed-state CSS sets
 * the list to `display: block`; we have to win against that, so the
 * structural revert uses `!important` (same approach as
 * testimonials-carousel.css). Arrows + pagination are mobile-only UI.
 */
@media (min-width: 860px) {
	.differentiators-bar .splide__track {
		overflow: visible;
		padding: 0;
	}

	.differentiators-bar .splide__list {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
		width: 100%;
	}

	.differentiators-bar .splide__arrows,
	.differentiators-bar .splide__pagination {
		display: none;
	}
}

/* ============================================================
 * Service Area Cards — County Grid
 * Pattern: patterns/service-area-cards.php
 * Responsive grid of county cards: 3-up desktop, 2-up tablet,
 * 1-up (stacked) on mobile. Built from core blocks; this file
 * supplies the card chrome, city pills, and CTA styling.
 * ============================================================ */
.service-area-cards .service-area-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 24px;
	margin-top: 0;
}

/* Neutralize WP flow-layout block-gap margins so the grid gap alone controls spacing */
.service-area-cards .service-area-grid > * {
	margin-block: 0;
}

/* ---------- Card shell (flat: border + radius, no shadow) ---------- */
.service-area-cards .county-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 16px;
	padding: 30px 26px;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 24px;
}

/* ---------- Header: pin icon + county name ---------- */
.service-area-cards .county-card__head {
	flex-wrap: nowrap;
}

.service-area-cards .county-card__pin {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.service-area-cards .county-card__title {
	margin: 0;
}

/* ---------- City pills ---------- */
.service-area-cards .county-card__pills {
	row-gap: 16px;
}

.service-area-cards .county-pill {
	margin: 0;
	display: inline-flex;
	align-items: center;
	background-color: var(--wp--preset--color--surface-light);
	border-radius: var(--wp--custom--borders--radius--pill);
	padding: 5px 18px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	line-height: 22px;
	font-weight: 500;
	color: var(--wp--preset--color--black);
	white-space: nowrap;
}

.service-area-cards .county-more {
	margin: 0;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	line-height: 22px;
	font-weight: 500;
	color: var(--wp--preset--color--black);
	white-space: nowrap;
}

/* ---------- Divider ---------- */
.service-area-cards .county-card__rule {
	margin: 4px 0;
	width: 100%;
	border: 0;
	height: 1px;
}

/* ---------- CTA: text link + red arrow ---------- */
.service-area-cards .county-cta {
	flex-wrap: nowrap;
}

.service-area-cards .county-cta__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	line-height: 1.55;
	font-weight: 600;
	letter-spacing: -0.08px;
}

.service-area-cards .county-cta__text a {
	color: var(--wp--preset--color--primary-charcoal);
	text-decoration: none;
}

.service-area-cards .county-cta__text a:hover,
.service-area-cards .county-cta__text a:focus {
	text-decoration: underline;
}

.service-area-cards .county-cta__arrow {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

/* ---------- Tablet: 2-up ---------- */
@media (max-width: 1024px) {
	.service-area-cards .service-area-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Mobile: stack ---------- */
@media (max-width: 600px) {
	.service-area-cards .service-area-grid {
		grid-template-columns: 1fr;
	}
}

/* ======================================================================
 * Single Post Hero
 * Template-owned post hero matching Figma desktop 29:14195 and
 * mobile 67:22118.
 * ====================================================================== */
.single-post-hero {
	--single-post-hero-band-height: 476px;
	--single-post-hero-copy-width: 844px;
	position: relative;
	overflow: visible;
	margin-block-start: 0 !important;
}

.single-post-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-inline: 0;
	top: 0;
	height: var(--single-post-hero-band-height);
	background-color: var(--wp--preset--color--primary-charcoal, #1f1e22);
}

.single-post-hero .single-post-hero__inner,
.single-post-hero .single-post-hero__copy {
	container-type: normal;
	position: relative;
	z-index: 1;
}

.single-post-hero .single-post-hero__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1440px !important;
	margin-inline: auto;
	padding-top: 19px;
}

.single-post-hero__breadcrumb {
	box-sizing: border-box;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding-inline: 72px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: -0.08px;
	color: var(--wp--preset--color--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.single-post-hero__breadcrumb a,
.single-post-hero__breadcrumb span {
	color: inherit;
	text-decoration: none;
}

.single-post-hero__breadcrumb a:hover,
.single-post-hero__breadcrumb a:focus {
	text-decoration: underline;
}

/* Yoast breadcrumb block: neutralize its own block spacing/typography so the
 * wrapper (.single-post-hero__breadcrumb) drives the look. */
.single-post-hero__breadcrumb .yoast-breadcrumbs,
.single-post-hero__breadcrumb nav,
.single-post-hero__breadcrumb p {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}

/* Keep the breadcrumb on a single line, truncating with an ellipsis when the
 * current-page title is too long (e.g. on mobile). The clip context must be the
 * element that directly contains the inline crumbs. */
.single-post-hero__breadcrumb .yoast-breadcrumbs {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Hide the subheading paragraph when the binding resolves to empty. */
.single-post-hero__subheading:empty {
	display: none;
}

.single-post-hero .single-post-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(var(--single-post-hero-copy-width), calc(100% - 48px));
	max-width: var(--single-post-hero-copy-width) !important;
	margin: 17px auto 0;
	text-align: center;
	color: var(--wp--preset--color--white);
}

.single-post-hero__category.wp-block-post-terms {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 24px;
	width: auto;
	margin: 0 auto;
	padding: 1px 19px;
	border-radius: var(--wp--custom--borders--radius--pill);
	background-color: rgba(230, 231, 232, 0.2);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	color: var(--wp--preset--color--white);
	white-space: nowrap;
}

.single-post-hero__category.wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.single-post-hero__category.wp-block-post-terms a:not(:first-child) {
	display: none;
}

.single-post-hero__title.wp-block-post-title {
	width: 100%;
	max-width: var(--single-post-hero-copy-width);
	margin: 16px auto 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--shippori-mincho);
	font-size: 48px;
	font-weight: 500;
	line-height: 56px;
	letter-spacing: -0.08px;
	text-align: center;
	text-wrap: balance;
}

.single-post-hero__subheading {
	width: 100%;
	max-width: var(--single-post-hero-copy-width);
	margin: 24px auto 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--shippori-mincho);
	font-size: 20px;
	font-weight: 400;
	line-height: 26.35px;
	letter-spacing: -0.08px;
	text-align: center;
	text-wrap: balance;
}

.single-post-hero__meta {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 26px auto 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: -0.08px;
}

.single-post-hero__meta-text {
	display: inline-flex;
	align-items: center;
	margin: 0;
	white-space: nowrap;
}

/* Meta icons rendered as recolorable masks so they inherit the white text color. */
.single-post-hero__meta-text::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-right: 6px;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

.single-post-hero__meta-text--updated::before {
	-webkit-mask-image: url(../../icons/calendar-plus.svg);
	mask-image: url(../../icons/calendar-plus.svg);
}

.single-post-hero__meta-text--reading::before {
	-webkit-mask-image: url(../../icons/clock.svg);
	mask-image: url(../../icons/clock.svg);
}

.single-post-hero__image.wp-block-post-featured-image {
	width: min(840px, calc(100% - 48px));
	max-width: 840px;
	margin: 44px auto 0 !important;
	aspect-ratio: 840 / 436;
	border-radius: var(--wp--custom--borders--radius--xl);
	overflow: hidden;
}

.single-post-hero__image.wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.single-post-hero + .post-content {
	padding-top: 40px !important;
}

@media (max-width: 600px) {
	.single-post-hero {
		--single-post-hero-band-height: 438px;
		--single-post-hero-copy-width: 344px;
	}

	.single-post-hero .single-post-hero__inner {
		padding-top: 23px;
	}

	.single-post-hero__breadcrumb {
		padding-inline: 23px;
	}

	.single-post-hero .single-post-hero__copy {
		width: var(--single-post-hero-copy-width);
		max-width: calc(100% - 46px) !important;
		margin-top: 46px;
	}

	.single-post-hero__title.wp-block-post-title {
		margin-top: 16px;
		font-size: 32px;
		font-weight: 400;
		line-height: 40px;
		letter-spacing: 0;
	}

	.single-post-hero__subheading {
		margin-top: 15px;
		font-size: 18px;
		line-height: 26.35px;
	}

	.single-post-hero__meta {
		gap: 16px;
		margin-top: 23px;
	}

	.single-post-hero__image.wp-block-post-featured-image {
		width: 100%;
		max-width: none;
		margin-top: 58px !important;
		aspect-ratio: 391 / 203;
		border-radius: 0;
	}

	.single-post-hero + .post-content {
		padding-top: 32px !important;
	}
}

/* ==================================================================
 * Wave 2 — Lead-capture & footer (PPC-13/14/15/17/22)
 * ================================================================== */

/* ---------- PPC-15 — Contact checklist checkmarkers ----------
 * The contact-us checklist uses `is-style-checkmarkers`, which had no styling
 * (rendered as default disc bullets). Replace bullets with a masked check
 * glyph in the tinted brand green, matching Figma node 37:15881. */
.wp-block-list.is-style-checkmarkers,
ul.is-style-checkmarkers {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.is-style-checkmarkers li {
	position: relative;
	padding-left: 1.9em;
}

.is-style-checkmarkers li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 0.95em;
	height: 0.95em;
	background-color: var(--wp--preset--color--text-body-tinted);
	-webkit-mask: url(../../icons/check.svg) center / contain no-repeat;
	mask: url(../../icons/check.svg) center / contain no-repeat;
}

/* ---------- PPC-22 — FAQ accordion question padding ----------
 * Core Accordion questions sat flush against the border on the left and the
 * toggle icon crowded the right edge. Add symmetric horizontal padding to the
 * question button and align the answer panel to match (Figma node 29:12314). */
.wp-block-accordion-heading__toggle {
    padding-left: 24px;
    padding-right: 24px;
    gap: 24px;
}

.wp-block-accordion .wp-block-accordion-item h3.wp-block-accordion-heading {
    margin-top: 0.825rem !important;
    margin-bottom: 0.825rem !important;
}

.wp-block-accordion-panel {
    padding: 0 1.5rem 1.5rem;
}

/* ---------- PPC-13 — Final CTA as a contained, rounded dark card ----------
 * Was a full-bleed dark band (align:full). Design shows a 1176-wide dark card
 * with margins around it and rounded corners, sitting on the light page
 * (Figma node 92:2018). The constrained layout only bounds the inner content,
 * so we bound the card element itself here. */
.final-cta.wp-block-group {
	width: min(100% - 2 * var(--wp--preset--spacing--medium, 24px), 1176px);
	margin-inline: auto;
	margin-block: var(--wp--preset--spacing--x-large);
	border-radius: var(--wp--custom--borders--radius--large);
	padding: clamp(32px, 4vw, 56px);
}

@media (max-width: 781px) {
	.final-cta.wp-block-group {
		padding: 28px 22px;
		border-radius: var(--wp--custom--borders--radius--xl);
	}
}

/* ---------- PPC-21 — Related Posts: no list bullets ----------
 * The related posts grid is a core Query Loop (post-template renders a UL of
 * LI tiles). Parent-theme list styling gave each tile a disc marker that
 * rendered between the cards. Strip all list chrome (Figma 29:14195 shows a
 * plain card grid on a light band; the band color comes from the template's
 * surface-light background). */
.post-related .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.post-related .wp-block-post-template > li {
	list-style: none;
}

.post-related .wp-block-post-template > li::marker {
	content: none;
}

/* ---------- PPC-16 — 404 "Back on Track" link tiles ----------
 * Card grid under the 404 hero (Figma 41:8644 desktop / 57:20657 mobile).
 * White cards with a hairline border, icon + Shippori title row, light
 * divider, muted description. Replaces the old centered 404 layout. */
.page-404-tiles.wp-block-columns {
	gap: 24px;
}

.page-404-tiles .link-tile {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 8px;
	padding: 28px 24px;
}

.page-404-tiles .link-tile__head {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
}

.page-404-tiles .link-tile__icon {
	flex: 0 0 24px;
	width: 24px;
	margin: 0;
}

.page-404-tiles .link-tile__icon img {
	display: block;
	width: 24px;
	height: 24px;
}

.page-404-tiles .link-tile__title {
	margin: 0;
}

.page-404-tiles .link-tile__title a {
	color: var(--wp--preset--color--text-body);
	text-decoration: none;
}

.page-404-tiles .link-tile__title a:hover,
.page-404-tiles .link-tile__title a:focus {
	color: var(--wp--preset--color--primary-red);
}

.page-404-tiles .link-tile__rule.wp-block-separator {
	border: none;
	border-top: 1px solid var(--wp--preset--color--border-light);
	background: none;
	width: 100%;
	margin: 16px 0;
}

.page-404-tiles .link-tile__desc {
	margin: 0;
	line-height: 1.5;
}

@media (max-width: 999px) and (min-width: 600px) {
	.page-404-tiles.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.page-404-tiles .link-tile {
		flex-basis: calc(50% - 12px) !important;
	}
}

/* ---------- PPC-24 — Final CTA 1:1 with Figma (94:2146 desktop / 95:2417 mobile) ----------
 * Pure CSS: the pattern is baked statically into published pages, so all
 * corrections are scoped to .final-cta / .final-cta-form-column classes that
 * already exist in the saved markup. */

/* Typography — heading 48px desktop (h1-display preset is 56px), lead 20px,
 * body copy 16px. The preset class uses !important, so re-point its var. */
.final-cta h2.wp-block-heading {
	--wp--preset--font-size--h-1-display: clamp(32px, 2.2vw + 20px, 48px);
	font-size: clamp(32px, 2.2vw + 20px, 48px);
	line-height: 1.1;
	letter-spacing: -0.96px;
}

/* Content stack rhythm — 24px between blocks, 40px above the phone pill. */
.final-cta .wp-block-column:first-child > * + * {
	margin-block-start: 24px;
}

.final-cta .wp-block-column:first-child > .wp-block-buttons {
	margin-block-start: 40px;
}

.final-cta p.has-lead-font-size {
	font-size: 20px;
	line-height: 1.32;
}

.final-cta .wp-block-column:first-child > p:not(.has-lead-font-size) {
	font-size: 16px;
	line-height: 24px;
	max-width: 480px;
}

.final-cta-form-column .gform_wrapper .gfield_required {
	margin: 0 0 0 0.25rem !important;
	padding: 0 !important;
}

.final-cta-form-column.on-white-background .gform_wrapper .gfield_required {
    color: var(--wp--preset--color--body-text);
}

/* Field grid — 12px row rhythm per the design. */
.final-cta-form-column .gform_wrapper .gform_fields {
	row-gap: 12px;
	column-gap: 13px;
}

/* Address composite — no visible "Address" legend (kept for screen readers),
 * sub-labels above their inputs, City/State/Zip on one 3-column row. */
/*.final-cta-form-column .gform_wrapper .gfield--type-address legend.gfield_label {*/
/*	position: absolute;*/
/*	width: 1px;*/
/*	height: 1px;*/
/*	overflow: hidden;*/
/*	clip: rect(0 0 0 0);*/
/*	clip-path: inset(50%);*/
/*	white-space: nowrap;*/
/*}*/

.final-cta-form-column .gform_wrapper .ginput_container_address {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px 10px;
}

.final-cta-form-column .gform_wrapper .ginput_container_address .ginput_full {
	grid-column: 1 / -1;
}

.final-cta-form-column .gform_wrapper .ginput_container_address > span {
	display: flex;
	flex-direction: column-reverse; /* markup is input-then-label; show label on top */
	gap: 4px;
	padding: 0;
	margin: 0;
	width: 100%;
	max-width: none;
}

.final-cta-form-column .gform_wrapper .ginput_container_address > span input,
.final-cta-form-column .gform_wrapper .ginput_container_address > span select {
	width: 100%;
}

.final-cta-form-column .gform_wrapper .ginput_container_address .gf_clear {
	display: none;
}

.final-cta-form-column .gform_wrapper .gform-field-label--type-sub {
	color: var(--wp--preset--color--white);
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	margin: 0;
	padding: 0;
}

.final-cta-form-column.on-white-background .gform_wrapper .gform-field-label--type-sub {
    color: var(--wp--preset--color--text-body);
}

/* Sub-labels inherit the required asterisk from the design. */
/*.final-cta-form-column .gform_wrapper .gfield--type-address .gform-field-label--type-sub::after {*/
/*	content: "*";*/
/*}*/

/* Selects — flat control with the design's chevron; "Select one" text tone. */
.final-cta-form-column .gform_wrapper select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 5l4.5 4.5L11.5 5' stroke='%232a2e3a' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
	font-size: 12px;
	color: #2a2e3a;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Submit — arrow drawn on the <input>, which cannot hold child markup. */
.final-cta-form-column .gform_wrapper .gform_footer input[type="submit"].gform_button,
.final-cta-form-column .gform_wrapper .gform_footer button[type="submit"].gform_button {
	background-image: url("../../icons/arrow-right-white.svg") !important;
	background-repeat: no-repeat !important;
	background-position: right 22px center !important;
	background-size: 15px 15px !important;
	padding: 14px 45px 14px 22px !important;
	font-size: 15px !important;
	letter-spacing: -0.075px;
}

.final-cta-form-column .gform_wrapper .gform_footer {
	margin-top: 18px;
}

/* Mobile — full-bleed dark band per Figma 95:2417. */
@media (max-width: 781px) {
	.final-cta.wp-block-group {
		width: 100%;
		border-radius: 0;
		padding: 43px 22px;
	}

	.final-cta h2.wp-block-heading {
		font-size: 32px;
		line-height: 40px;
	}
}

/* GF collapses half-width fields at 640px; the design keeps the 2-col pairs
 * (First/Last, Email/Phone) all the way down to 390px. */
@media (max-width: 640px) {
	.final-cta-form-column .gform_wrapper .gform_fields .gfield--width-half {
		grid-column: span 6 !important;
	}

	.final-cta-form-column .gform_wrapper .gform_fields {
		column-gap: 13px !important;
	}
}

/* ======================================================================
 * Wave 9 — Services page typography and spacing
 * ====================================================================== */

/* PPC-34 — Shared side-image pattern heading typography. */
.side-image-left-right__wrapper h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--font-40-px) !important;
	line-height: 1.2 !important;
}

body.page-services .locations-cta + .side-image-left-right__block .side-image-left-right__content > p {
	font-size: var(--wp--preset--font-size--font-16-px) !important;
	line-height: 1.625 !important;
}

/* PPC-35 — Service Area heading and county-name typography. */
body.page-services .locations-cta > .wp-block-columns > .wp-block-column:first-child > .wp-block-heading {
	font-size: var(--wp--preset--font-size--font-40-px) !important;
	line-height: 1.2 !important;
}

body.page-services .locations-cta .county-name {
	font-size: var(--wp--preset--font-size--font-16-px);
	line-height: 1.625;
}

/* PPC-36 — Commercial Pest Control Solutions typography. */
body.page-services .what-we-treat + .side-image-left-right__block + .side-image-left-right__block .side-image-left-right__content > p {
	font-size: var(--wp--preset--font-size--font-16-px) !important;
	line-height: 1.625 !important;
}

/* PPC-37 — Residential Pest Control Solutions typography. */
body.page-services .what-we-treat + .side-image-left-right__block .side-image-left-right__content > p {
	font-size: var(--wp--preset--font-size--font-16-px) !important;
	line-height: 1.625 !important;
}

/* PPC-33 — Match the pre-footer rhythm used by the other primary pages. */
body.page-services .entry-content > .final-cta {
	margin-bottom: var(--wp--preset--spacing--small) !important;
}