/**
 * pchs/hero
 *
 * Four variants share one grid. `home`, `service` and `city` sit on a photo
 * behind a navy scrim; `simple` is a light band with no photo at all.
 *
 * The primitives at the top of this file (.pchs-check, .pchs-sample-chip)
 * are duplicated across the section blocks on purpose: block styles load only
 * when the block is on the page. The eyebrow is the shared .pchs-eyebrow role
 * in theme/style.css; a copy here would load later and override it.
 */

.pchs-check {
	flex: none;
	margin-block-start: 0.2em;
	color: var(--wp--preset--color--green);
}

.pchs-sample-chip {
	display: inline-block;
	margin-inline-start: 0.4em;
	padding: 0.15em 0.4em;
	border: 1px solid var(--wp--custom--color--sample-border);
	border-radius: var(--wp--custom--radius--xxs);
	background: var(--wp--custom--color--sample-bg);
	color: var(--wp--custom--color--sample-ink);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: 1.2;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- shell -- */

.pchs-hero {
	--pchs-hero-pad-x: var(--wp--preset--spacing--50);
	--pchs-hero-pad-y: var(--wp--preset--spacing--80);

	position: relative;
	isolation: isolate;
	overflow: hidden;
}

@media (min-width: 48em) {
	.pchs-hero {
		--pchs-hero-pad-x: var(--wp--preset--spacing--70);
		--pchs-hero-pad-y: var(--wp--preset--spacing--90);
	}
}

.pchs-hero__media,
.pchs-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.pchs-hero__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/*
 * The mockup gradient is a left-to-right navy wash. On a narrow screen the copy
 * sits over the whole image, so the scrim turns vertical instead of leaving the
 * headline on bare photo.
 *
 * It used to open at 92% and only fall to 78%, which meant the photograph was
 * never visible on a phone at all: the hero read as a plain dark rectangle. It
 * now starts clear, so the top of the image is actually seen, and ramps to 92%
 * before any copy begins — that is what the padding rule underneath buys.
 * Against a worst-case white photo, 92% navy-deep still holds white at 13.2:1
 * and border-cool at 9.7:1.
 *
 * The ramp was 5.5rem/8rem against a 9rem pad. Measured on the home page at
 * 390x844: that spent 144px of an 844px fold before a word of copy, and the
 * headline did not start until 482px down — 57% of the first screen gone on a
 * lead-generation page. 3rem/5rem against a 5.5rem pad still clears the wash to
 * 92% before any copy and still shows 80px of photograph, so the hero is not a
 * flat rectangle; it just stops charging a fifth of the fold for a band of it.
 */
/*
 * The final stop reaches full opacity at 18rem, which is exactly where the
 * media is capped below. Without it the photo would still be showing at 8%
 * right up to the cap and then stop dead, leaving a faint horizontal seam
 * across the hero. Ramping the last 13rem to 100% means the photograph has
 * already faded to nothing by the time it runs out, so the join is invisible.
 */
.pchs-hero--overlay-strong .pchs-hero__scrim {
	background: linear-gradient(
		180deg,
		transparent 0,
		color-mix(in srgb, var(--wp--preset--color--navy-deep) 55%, transparent) 3rem,
		color-mix(in srgb, var(--wp--preset--color--navy-deep) 92%, transparent) 5rem,
		var(--wp--preset--color--navy-deep) 18rem
	);
}

/* Only when a photo actually rendered — otherwise this is dead space on navy. */
.pchs-hero__media ~ .pchs-hero__inner {
	padding-block-start: 5.5rem;
}

/*
 * Below 62em the scrim is the vertical ramp above, which reaches 92% navy-deep
 * at 5rem and holds it to the bottom. The photograph is therefore only actually
 * visible in roughly the top 150px of the hero; everything below that is flat
 * navy that happens to have a photograph behind it.
 *
 * Measured at 390x844 before this rule: the /roofing/ hero is 390x2115 and the
 * chosen source is 768x432, so `object-fit: cover` scaled the image 7.2x to
 * fill a box whose bottom 1900px render as solid colour. That is the whole
 * reason the visible band reads as a blur. `sizes` only ever describes width,
 * so it cannot ask for a file big enough to cover 2115px of height, and the
 * taller the hero got the worse the mismatch became.
 *
 * Capping the media to the band it is seen in makes the image box 390x288, and
 * covering that from a 768x432 source is a 0.67x DOWNSCALE — no upscaling at
 * all. The hero root is already navy-deep and the scrim below the cap is 92%
 * navy-deep over navy-deep, so nothing below the cap changes visually.
 *
 * Deliberately not applied at 62em and up: there the gradient turns horizontal,
 * the photograph is visible down the full height, and it has to cover it.
 */
@media (max-width: 61.99em) {
	.pchs-hero--overlay-strong .pchs-hero__media {
		bottom: auto;
		height: 18rem;
	}
}

.pchs-hero--overlay-medium .pchs-hero__scrim {
	background: color-mix(in srgb, var(--wp--preset--color--navy-deep) 70%, transparent);
}

.pchs-hero--overlay-none .pchs-hero__scrim {
	background: none;
}

@media (min-width: 62em) {
	.pchs-hero--overlay-strong .pchs-hero__scrim {
		background: linear-gradient(
			90deg,
			color-mix(in srgb, var(--wp--preset--color--navy-deep) 92%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--navy-deep) 62%, transparent) 50%,
			color-mix(in srgb, var(--wp--preset--color--navy-deep) 25%, transparent) 100%
		);
	}

	/*
	 * A slot puts content over the right-hand end of the wash. At 25% navy the
	 * photograph decides the contrast, and against a light photo white text
	 * falls to 1.7:1. 80% holds white at 8.7:1 and border-cool at 6.5:1 even
	 * over a worst-case white photo. The left two thirds are untouched, so the
	 * image is still read as an image.
	 */
	.pchs-hero.has-slot.pchs-hero--overlay-strong .pchs-hero__scrim {
		background: linear-gradient(
			90deg,
			color-mix(in srgb, var(--wp--preset--color--navy-deep) 92%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--navy-deep) 62%, transparent) 42%,
			color-mix(in srgb, var(--wp--preset--color--navy-deep) 80%, transparent) 100%
		);
	}

	/* The photo band is a phone treatment; on a wide hero the wash is horizontal
	   and the image is already visible on the right. */
	.pchs-hero__media ~ .pchs-hero__inner {
		padding-block-start: var(--pchs-hero-pad-y);
	}
}

/*
 * Phones (below 48em): the photograph is a real 3:2 picture above the copy, not
 * a strip fading into navy behind it, and the copy sits on plain navy-deep
 * underneath. mobileMedia "none" drops the photo on phones altogether, for the
 * pages whose hero carries their own form, so its first field is on the first
 * screen. From 48em the band-and-wash treatment above applies again.
 */
@media (max-width: 47.99em) {
	.pchs-hero--mobile-band .pchs-hero__media {
		position: relative;
		inset: auto;
		z-index: auto;
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.pchs-hero--mobile-band .pchs-hero__scrim,
	.pchs-hero--mobile-none .pchs-hero__media,
	.pchs-hero--mobile-none .pchs-hero__scrim {
		display: none;
	}

	.pchs-hero--mobile-band .pchs-hero__media ~ .pchs-hero__inner,
	.pchs-hero--mobile-none .pchs-hero__inner {
		padding-block-start: var(--pchs-hero-pad-y);
	}
}

/*
 * `start`, not `center`. Centring two columns only makes sense when they are
 * roughly the same height, and on a service page they are not: the copy is
 * ~548px and the booking widget in the slot is 1188px. Centring the short
 * column against the tall one inserted 320px of empty navy above the headline,
 * so measured on /roofing/ the h1 began at 600px — 75% of the way down a 800px
 * laptop viewport — and the subcopy never appeared above the fold at all.
 *
 * The call bar covers the last 84px, so the real budget is 816px at 1440x900
 * and 716px at 1280x800. Against those:
 *
 *              before                    after
 *   /roofing/  h1 600->798, sub ->897    h1 279->477, sub ->577
 *   /bathroom  h1 609->807, sub ->907    h1 279->477, sub ->577
 *   /siding/   h1 590->788, sub ->888    h1 279->477, sub ->577
 *
 * At 1280 the old h1 was clipped by 82px mid-sentence on all eight service
 * pages; now headline and subcopy both clear with 139px to spare.
 *
 * The home page is the case that proves the rule rather than an exception to
 * it: there the copy (714px) is taller than the quote form (579px), so it is
 * the form that was being pushed down. Its h1 does not move; the form rises
 * 68px into line with the headline, which is where a form beside a headline
 * belongs. Below 62em the grid is a single column and this is inert.
 */
.pchs-hero__inner {
	display: grid;
	gap: var(--wp--preset--spacing--70);
	align-items: start;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--pchs-hero-pad-y) var(--pchs-hero-pad-x);
	box-sizing: border-box;
}

@media (min-width: 62em) {
	/*
	 * No form in the slot means the headline runs the full width, into the
	 * light end of the wash. On /service-area/ that put "Greater St. Louis"
	 * on top of the white truck logo. Keep the copy in the dark half.
	 */
	.pchs-hero--overlay-strong:not(.has-slot) .pchs-hero__copy {
		max-width: 34rem;
	}

	.pchs-hero.has-slot .pchs-hero__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 26rem);
	}

	/*
	 * The exception, now that the service booking card is compact: its copy
	 * and card are near the same height, and top-aligning left a band of dead
	 * navy under the copy. Centred, the copy sits against the card's middle.
	 */
	.pchs-hero--service .pchs-hero__inner {
		align-items: center;
	}

	/*
	 * Service hubs with no slot (/exteriors/, /bathrooms/, /about/) stack a
	 * long headline, checks, CTA and phone under 72px pads. Measured at
	 * 1440x900 before this rule: /exteriors/ CTA top 856 (below the fold),
	 * /bathrooms/ CTA top 952. Tighten the band, drop the display size one
	 * step (5-xl → 4-xl), and sit the phone beside the CTA when there is no
	 * stat row between them, so the quote button clears the fold. /about/
	 * keeps the phone under the stats.
	 */
	.pchs-hero--service:not(.has-slot) {
		--pchs-hero-pad-y: var(--wp--preset--spacing--60);
	}

	.pchs-hero--service:not(.has-slot) .pchs-hero__copy {
		gap: var(--wp--preset--spacing--30);
	}

	.pchs-hero--service:not(.has-slot) .pchs-hero__headline {
		font-size: var(--wp--preset--font-size--4-xl);
	}

	.pchs-hero--service:not(.has-slot) .pchs-hero__checks {
		gap: var(--wp--preset--spacing--10);
	}

	.pchs-hero--service:not(.has-slot):not(:has( .pchs-hero__stats )) .pchs-hero__copy {
		display: grid;
		grid-template-columns: auto minmax( 0, 1fr );
		column-gap: var(--wp--preset--spacing--50);
		align-items: center;
	}

	.pchs-hero--service:not(.has-slot):not(:has( .pchs-hero__stats )) .pchs-hero__kicker,
	.pchs-hero--service:not(.has-slot):not(:has( .pchs-hero__stats )) .pchs-hero__headline,
	.pchs-hero--service:not(.has-slot):not(:has( .pchs-hero__stats )) .pchs-hero__subcopy,
	.pchs-hero--service:not(.has-slot):not(:has( .pchs-hero__stats )) .pchs-hero__checks,
	.pchs-hero--service:not(.has-slot):not(:has( .pchs-hero__stats )) .pchs-hero__badges {
		grid-column: 1 / -1;
	}

	.pchs-hero--service:not(.has-slot):not(:has( .pchs-hero__stats )) .pchs-hero__cta {
		grid-column: 1;
	}

	.pchs-hero--service:not(.has-slot):not(:has( .pchs-hero__stats )) .pchs-hero__phone {
		grid-column: 2;
		align-self: center;
	}
}

/*
 * Short laptop viewports (1280x800) with the 144px logo: /bathrooms/ is the
 * longest hub hero and needs the tightest pad to keep its CTA clear of the
 * fold. Taller screens keep the roomier band.
 */
@media ( min-width: 62em ) and ( max-height: 820px ) {
	.pchs-hero--service:not(.has-slot) {
		--pchs-hero-pad-y: var(--wp--preset--spacing--40);
	}

	.pchs-hero--service:not(.has-slot) .pchs-hero__copy {
		row-gap: var(--wp--preset--spacing--20);
	}
}

/*
 * This was `.pchs-hero__copy > * + * { margin-block-start: … }` and it had
 * never once applied. `*` contributes nothing to specificity, so that selector
 * scored (0,1,0) — exactly the same as the plain `.pchs-hero__headline`,
 * `.pchs-hero__subcopy` and `.pchs-hero__stats` rules further down this file,
 * each of which sets `margin: 0`. Equal specificity, later rule wins, so every
 * gap in the hero copy column measured 0px at 1440: headline flush to subcopy,
 * subcopy flush to checks, checks flush to stats.
 *
 * The visible symptom was the stat row's 2px green top borders landing exactly
 * on the bottom edge of the checks list, where they read as an underline under
 * "Financing on every project" rather than as the top edge of the stats.
 *
 * `gap` on a flex column cannot be overridden by a child's own margin, so the
 * spacing now holds whatever any component declares about itself. The eyebrow's
 * own bottom margin is zeroed because flex gaps add to margins rather than
 * collapsing with them.
 */
/* align-items stays at the default `stretch`: these children are block-level
   today and the stats are a grid that needs the full column width. */
.pchs-hero__copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/*
 * The kicker row: the offer tag, then the eyebrow, on one line where there is
 * room. The headline under it is the loudest thing in the hero; this row is a
 * label for it, so it is small.
 */
.pchs-hero__kicker {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

.pchs-hero__kicker > * {
	margin: 0;
}

/* A tag, not a button: no link, no hover, no pointer, and not solid green. */
.pchs-hero__offer {
	display: inline-flex;
	gap: var(--wp--preset--spacing--10);
	align-items: center;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--green-light) 50%, transparent );
	border-radius: var(--wp--custom--radius--pill);
	background-color: color-mix( in srgb, var(--wp--preset--color--green) 35%, transparent );
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--leading--title);
}

.pchs-hero__offer .pchs-check {
	margin: 0;
	color: var(--wp--preset--color--green-light);
}

/*
 * Phones: the tag on its own line and the services on one line under it. Side
 * by side, the eyebrow wrapped to two lines beside the tag (a 48px row at 390).
 */
@media (max-width: 47.99em) {
	.pchs-hero__kicker {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--20);
	}
}

/* Only on the narrowest phones, where the four services cannot share a line,
   they go two to a line, so no line starts or ends on a dot. */
@media (max-width: 23.99em) {
	.pchs-hero__sep {
		display: none;
	}

	.pchs-hero__pair {
		display: block;
	}
}

/* --------------------------------------------------------------- colour -- */

.pchs-hero--home,
.pchs-hero--service,
.pchs-hero--city {
	background-color: var(--wp--preset--color--navy-deep);
	color: var(--wp--preset--color--base);
}

.pchs-hero--home .pchs-hero__headline,
.pchs-hero--service .pchs-hero__headline,
.pchs-hero--city .pchs-hero__headline {
	color: var(--wp--preset--color--base);
}


/*
 * The city hero sits on the same wide-grid edge as the home and service heroes
 * (x=160 at 1440), because the city-service body, the breadcrumb and every
 * section below now start there too. It used to narrow to the old 600px prose
 * column, which put its copy on a third left edge at x=420.
 *
 * The 46ch cap is tuned for a hero that sits beside a quote form; with no form
 * the subcopy takes the lead measure.
 */
.pchs-hero--city .pchs-hero__subcopy {
	max-width: var(--wp--custom--measure--lead);
}

.pchs-hero__cta {
	margin: 0;
}

.pchs-hero--simple {
	/*
	 * Simple heroes (blog index, thank-you) carry no photo and little copy.
	 * The photo-hero pad left a tall empty surface band above the first section.
	 */
	--pchs-hero-pad-y: var(--wp--preset--spacing--70);

	background-color: var(--wp--preset--color--surface);
	border-block-end: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
}

@media (min-width: 48em) {
	.pchs-hero--simple {
		--pchs-hero-pad-y: var(--wp--preset--spacing--80);
	}
}

.pchs-hero--simple .pchs-hero__subcopy {
	color: var(--wp--preset--color--muted);
	text-wrap: pretty;
}

.pchs-hero--simple .pchs-hero__headline {
	text-wrap: balance;
}

/* ----------------------------------------------------------- components -- */

.pchs-hero__crumbs {
	font-size: var(--wp--preset--font-size--sm);
}

.pchs-hero__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pchs-hero__crumbs li + li::before {
	content: "/";
	margin-inline-end: 0.5em;
	opacity: 0.6;
}

.pchs-hero--home .pchs-hero__crumbs,
.pchs-hero--service .pchs-hero__crumbs,
.pchs-hero--city .pchs-hero__crumbs {
	color: var(--wp--preset--color--border-cool);
}

.pchs-hero--home .pchs-hero__crumbs a,
.pchs-hero--service .pchs-hero__crumbs a,
.pchs-hero--city .pchs-hero__crumbs a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.pchs-hero__crumbs [aria-current="page"] {
	font-weight: 600;
}

.pchs-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * One outline pill per credential: who awards it in green-light bold, what it
 * says in white regular. The filled chip inside a pill, tracked out in mixed
 * case, read as dashboard chrome rather than a credential (TYP-15).
 */
.pchs-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--green-light) 45%, transparent);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--regular);
	line-height: var(--wp--custom--leading--title);
}

.pchs-hero__badge-chip {
	color: var(--wp--preset--color--green-light);
	font-weight: var(--wp--custom--weight--bold);
	white-space: nowrap;
}

/*
 * The one element on the site allowed to be this big, and the only heading
 * still set at 800. Everywhere else size now carries the hierarchy, so
 * theme.json dropped headings to 700; at 60px, 800 everywhere saturates.
 */
.pchs-hero__headline {
	margin: 0;
	font-size: var(--wp--preset--font-size--5-xl);
	font-weight: var(--wp--custom--weight--heavy);
	line-height: var(--wp--custom--leading--tight);
	letter-spacing: var(--wp--custom--tracking--display);
	text-wrap: balance;
}

/* Type and colour from .pchs-lead (and .pchs-on-dark on the photo heroes). */
.pchs-hero__subcopy {
	max-width: 46ch;
	margin: 0;
}

.pchs-hero__checks {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
}

.pchs-hero__checks li {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: flex-start;
}

.pchs-hero--home .pchs-check,
.pchs-hero--service .pchs-check,
.pchs-hero--city .pchs-check {
	color: var(--wp--preset--color--green-light);
}

/*
 * Row-wrap only beside a slot, and only when there are four or more checks.
 * Three items (the home hero) wrapped as 2 + 1 and left a hole under the
 * second column — stacked is the finished list. Four service-page checks used
 * to wrap as 1 + 1 + 2 without a slot; with a slot they share lines cleanly.
 */
@media (min-width: 62em) {
	.pchs-hero.has-slot .pchs-hero__checks:has( > :nth-child( 4 ) ) {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	}
}

/*
 * One row at every width, divided by hairlines rather than topped with green
 * rules: the rules read as underlines under the list above them.
 */
.pchs-hero__stats {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pchs-hero__stat {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.pchs-hero__stat + .pchs-hero__stat {
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 1px solid color-mix( in srgb, var(--wp--preset--color--base) 15%, transparent );
}

.pchs-hero--simple .pchs-hero__stat + .pchs-hero__stat {
	border-inline-start-color: var(--wp--preset--color--border);
}

.pchs-hero__stat-value {
	font-size: var(--wp--preset--font-size--2-xl);
	font-weight: var(--wp--custom--weight--heavy);
	letter-spacing: var(--wp--custom--tracking--tight);
	line-height: var(--wp--custom--leading--none);
}

.pchs-hero__stat-label {
	color: var(--wp--custom--color--border-cool-2);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--regular);
	line-height: var(--wp--custom--leading--title);
	text-wrap: balance;
	/* "2 Showrooms…" wraps; the neighbours stay one line. Hold two lines so
	   the three labels share a bottom edge (home at 1440 was 18px apart). */
	min-height: 2lh;
}

/*
 * Without a slot the copy is wider (34rem), so each stat column is narrower and
 * "Showrooms in Creve Coeur…" needs three lines (/about/ at 1440: labels ended
 * 18px apart). Home keeps 2lh beside the form.
 */
.pchs-hero:not(.has-slot) .pchs-hero__stat-label {
	min-height: 3lh;
}

/*
 * Phones: every page repeats its proof further down (owner, 2026-09-30), and
 * three stats squeezed into 342px wrap to "1 to 2 / days". Every hero drops
 * its stats, and the home hero its badges too, so the form or the first
 * section reaches the first screen sooner. Service heroes keep their chips,
 * two by two.
 */
@media (max-width: 37.5em) {
	.pchs-hero__stats,
	.pchs-hero--home .pchs-hero__badges {
		display: none;
	}

	.pchs-hero--service .pchs-hero__badges {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Beside the quote form on a laptop the copy column is about 490px, and the
   three home badges (about 650px) left one alone on a second row. They are
   repeated in the seals section below, so the hero drops them there; from
   80em the column is wide enough for one row again. */
@media (min-width: 62em) and (max-width: 79.99em) {
	.pchs-hero--home.has-slot .pchs-hero__badges {
		display: none;
	}
}

/* From 80em the badges come back and push the stats down: at 1440x900 they
   started at y=873 and "30,000+" was cut by the fold. A tighter top pad and
   copy gap lift them 52px; the form rises with the copy. */
@media (min-width: 80em) {
	.pchs-hero--home.has-slot .pchs-hero__inner {
		padding-block-start: var(--wp--preset--spacing--70);
	}

	.pchs-hero--home.has-slot .pchs-hero__copy {
		gap: var(--wp--preset--spacing--30);
	}
}

.pchs-hero--simple .pchs-hero__stat-label {
	color: var(--wp--preset--color--muted);
}

.pchs-hero__phone {
	margin: 0;
	color: var(--wp--custom--color--border-cool-2);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
}

.pchs-hero__phone a {
	color: var(--wp--preset--color--base);
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * The tel link sits in a sentence ("Prefer to talk?"), so app.css's line-owning
 * tap rule never reaches it. Measured 121×17 at 390 on /exteriors/ — under the
 * 44px floor. Grow the hit box on phones and any coarse pointer (tablets at
 * 768 still reported 17px); a fine pointer on a laptop does not need the
 * extra height and it would open the copy gap under the CTA.
 */
@media ( max-width: 47.99em ), ( pointer: coarse ) {
	.pchs-hero__phone a {
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		min-height: var(--pchs-tap);
	}
}

.pchs-hero--simple .pchs-hero__phone {
	color: var(--wp--preset--color--muted);
}

.pchs-hero--simple .pchs-hero__phone a {
	color: var(--wp--preset--color--green-dark);
}

.pchs-hero__slot > :where(*) {
	margin-block: 0;
}

@media (min-width: 62em) {
	.pchs-hero__slot {
		justify-self: end;
		width: 100%;
	}
}