/*
 * Home Services Marketing page (template-home-services.php) — 2026-10.
 *
 * Enqueued by inc/cm-home-services.php after cm-lp.css. The page's <main>
 * carries both `cm-lp` and `cm-hs`: the shared components (chips, steps, work
 * cards, dark "why" band, badge row, inline CTA, checks, trust row) come from
 * cm-lp.css unchanged, and this file adds only what is particular to this
 * page. cosmick-2026.css and cm-interior.css print after it, so overlapping
 * rules win on SPECIFICITY (main.cm-hs …), never with !important.
 *
 * Every new heading class declares its own line-height and margin/padding 0
 * (the legacy sheets leak margins and line-heights onto h2/h3/h4).
 *
 * Mobile-first. Checked at 390 / 768 / 1024 / 1440.
 */

/* Overlay neutraliser: cm-lp.css covers `main.cm-lp`; restated for the page
   head, which is a <header>, and for sections nested one level deeper. */
main.cm-hs section::before { content: none; }
main.cm-hs > section { overflow-x: clip; overflow-y: visible; }

body.cm-hs-page { overflow-x: clip; overflow-y: visible; }

main.cm-hs .cm-hs-h2 {
	margin: 0;
	padding: 0;
	line-height: 1.12;
	text-wrap: balance;
}

main.cm-hs .cm-hs-head-wide .cm-section-head-copy { max-width: 52rem; }
main.cm-hs .cm-section-head .cm-h-section { text-wrap: balance; }

/* Shared icon tile. */
main.cm-hs .cm-hs-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--cm26-tint);
	color: var(--cm26-brand-ink);
}

main.cm-hs .cm-hs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

main.cm-hs .cm-hs-tags .cm-tag {
	margin: 0;
	background: var(--cm26-paper);
	border: 1px solid var(--cm26-line);
	color: var(--cm26-body);
}

/* ---------------------------------------------------------------------------
   1. Page head — H1 + CTAs left, the "what you get" card right.
   --------------------------------------------------------------------------- */

main.cm-hs .cm-page-head h1 {
	max-width: 20ch;
	text-wrap: balance;
}

main.cm-hs .cm-page-head .cm-lede { max-width: 60ch; }

@media (min-width: 1024px) {
	main.cm-hs .cm-page-head .cm-page-head-split {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr);
		gap: clamp(40px, 5vw, 72px);
		align-items: center;
	}
}

main.cm-hs .cm-hs-glance {
	position: relative;
	padding: 26px 22px 22px;
	background: var(--cm26-card);
	border: 1px solid var(--studio-rule, #d5c8bd);
	border-radius: 8px;
	box-shadow: 0 18px 44px -26px rgba(80, 22, 16, .35);
}

main.cm-hs .cm-hs-glance::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 22px;
	width: 72px;
	height: 4px;
	background: var(--studio-coral, #ff675b);
}

@media (min-width: 640px) {
	main.cm-hs .cm-hs-glance { padding: 30px 30px 26px; }
	main.cm-hs .cm-hs-glance::before { left: 30px; }
}

main.cm-hs .cm-hs-glance-kicker {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cm26-brand-ink);
}

main.cm-hs .cm-hs-glance .cm-lp-checks { margin-top: 16px; }
main.cm-hs .cm-hs-glance .cm-lp-trust { margin-top: 22px; padding-top: 18px; }

@media (max-width: 639.98px) {
	main.cm-hs .cm-page-head-actions { flex-direction: column; }
	main.cm-hs .cm-page-head-actions .cm-btn { width: 100%; justify-content: center; }
}

/* Facts strip sits straight under the head. */
main.cm-hs .cm-hs-facts { border-top: 0; }

/* ---------------------------------------------------------------------------
   3. Two kinds of demand
   --------------------------------------------------------------------------- */

main.cm-hs .cm-hs-demand-grid {
	display: grid;
	gap: 36px;
}

@media (min-width: 1024px) {
	main.cm-hs .cm-hs-demand-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(48px, 6vw, 88px);
		align-items: start;
	}
}

main.cm-hs .cm-hs-demand-copy .cm-eyebrow { margin-bottom: 14px; }

main.cm-hs .cm-hs-demand-copy p:not(.cm-eyebrow):not(.cm-hs-pull),
main.cm-hs .cm-hs-leads-copy p:not(.cm-eyebrow) {
	margin: 18px 0 0;
	max-width: 62ch;
	font-size: 17px;
	line-height: 1.7;
	color: var(--cm26-prose);
}

main.cm-hs .cm-hs-pull {
	margin: 28px 0 0;
	padding-left: 18px;
	border-left: 3px solid var(--studio-coral, #ff675b);
	font-family: var(--cm26-font-display);
	font-size: clamp(19px, 1.8vw, 23px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--cm26-ink);
}

main.cm-hs .cm-hs-moods {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) and (max-width: 1023.98px) {
	main.cm-hs .cm-hs-moods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

main.cm-hs .cm-hs-mood {
	margin: 0;
	padding: 24px 22px;
	background: var(--cm26-card);
	border: 1px solid var(--cm26-line);
	border-radius: 8px;
}

@media (min-width: 768px) {
	main.cm-hs .cm-hs-mood { padding: 28px 28px 26px; }
}

main.cm-hs .cm-hs-mood-head {
	display: flex;
	align-items: center;
	gap: 14px;
}

main.cm-hs .cm-hs-mood-kind {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cm26-brand-ink);
}

main.cm-hs .cm-hs-mood-title {
	margin: 16px 0 0;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: clamp(20px, 1.8vw, 23px);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--cm26-ink);
}

main.cm-hs .cm-hs-mood-copy {
	margin: 10px 0 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--cm26-body);
}

/* ---------------------------------------------------------------------------
   4. Trades grid — the substance of the page.
   --------------------------------------------------------------------------- */

main.cm-hs .cm-hs-trades {
	background: var(--cm26-sand);
	border-block: 1px solid var(--studio-rule, #d5c8bd);
}

main.cm-hs .cm-hs-trade-grid {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Phones: the nine cards swipe (the site's .cm-rail primitive + cm-rail.js);
   stacked they ran ~4,300px. The rail's own (0,1,0) box rules lose to the
   grid rule above, so restate them here. */
@media (max-width: 767.98px) {
	main.cm-hs .cm-hs-trade-grid.cm-rail {
		--cm-rail-w: 86%;
		display: flex;
		gap: 12px;
		margin: 0 calc(-1 * var(--cm26-gutter));
		padding: 4px var(--cm26-gutter) 10px;
	}
}

@media (min-width: 768px) {
	main.cm-hs .cm-hs-trade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

/* Two columns leave the ninth card alone; let it span the row. */
@media (min-width: 768px) and (max-width: 1099.98px) {
	main.cm-hs .cm-hs-trade:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
	main.cm-hs .cm-hs-trade-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

main.cm-hs .cm-hs-trade {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 22px 20px 20px;
	background: var(--cm26-card);
	border: 1px solid var(--studio-rule, #d5c8bd);
	border-radius: 8px;
	transition: border-color .2s var(--cm26-ease), box-shadow .2s var(--cm26-ease);
}

@media (min-width: 768px) {
	main.cm-hs .cm-hs-trade { padding: 26px 26px 24px; }
}

@media (hover: hover) and (pointer: fine) {
	main.cm-hs .cm-hs-trade:hover {
		border-color: #c4ab97;
		box-shadow: 0 16px 36px -24px rgba(80, 22, 16, .35);
	}
}

main.cm-hs .cm-hs-trade-head {
	display: flex;
	align-items: center;
	gap: 14px;
}

main.cm-hs .cm-hs-trade-title {
	margin: 0;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: 18.5px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.015em;
	text-transform: none;
	color: var(--cm26-ink);
}

main.cm-hs .cm-hs-trade-when {
	margin: 3px 0 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cm26-brand-ink);
}

main.cm-hs .cm-hs-trade-copy {
	flex: 1 1 auto;
	margin: 16px 0 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--cm26-body);
}

main.cm-hs .cm-hs-trade .cm-hs-tags {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--cm26-line);
}

/* LSA eligibility note. */
main.cm-hs .cm-hs-lsa {
	display: grid;
	gap: 6px;
	margin-top: clamp(28px, 4vw, 40px);
	padding: 20px 22px;
	background: var(--cm26-paper);
	border: 1px dashed #b39d88;
	border-radius: 6px;
}

@media (min-width: 900px) {
	main.cm-hs .cm-hs-lsa {
		grid-template-columns: 190px minmax(0, 1fr);
		gap: 28px;
		align-items: baseline;
		padding: 22px 28px;
	}
}

main.cm-hs .cm-hs-lsa-label {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cm26-brand-ink);
}

main.cm-hs .cm-hs-lsa-copy {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--cm26-prose);
}

main.cm-hs .cm-hs-trades .cm-lp-inline-cta { margin-top: 18px; }

/* ---------------------------------------------------------------------------
   5. System — four stage rows, each with its points.
   --------------------------------------------------------------------------- */

main.cm-hs .cm-hs-stages {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--studio-rule, #d5c8bd);
}

main.cm-hs .cm-hs-stage {
	display: grid;
	gap: 22px;
	margin: 0;
	padding-block: 32px;
	border-bottom: 1px solid var(--studio-rule, #d5c8bd);
}

@media (min-width: 1024px) {
	main.cm-hs .cm-hs-stage {
		grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr);
		gap: clamp(40px, 5vw, 72px);
		padding-block: 44px;
	}
}

main.cm-hs .cm-hs-stage-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	align-items: center;
	align-content: start;
}

@media (min-width: 1024px) {
	main.cm-hs .cm-hs-stage-head {
		position: sticky;
		top: calc(var(--cm26-header-h) + 24px);
	}
}

main.cm-hs .cm-hs-stage-num {
	grid-column: 1 / -1;
	margin-bottom: 14px;
	font-family: var(--cm26-font-display);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .12em;
	color: var(--cm26-brand-ink);
}

main.cm-hs .cm-hs-stage-title {
	margin: 0;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.03em;
	text-transform: none;
	color: var(--cm26-ink);
}

main.cm-hs .cm-hs-stage-line {
	grid-column: 1 / -1;
	margin: 12px 0 0;
	max-width: 30ch;
	font-size: 16px;
	line-height: 1.55;
	color: var(--cm26-body);
}

main.cm-hs .cm-hs-points {
	display: grid;
	gap: 22px;
}

@media (min-width: 768px) {
	main.cm-hs .cm-hs-points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 36px;
	}

	/* An odd last point spans the row rather than leaving a hole. */
	main.cm-hs .cm-hs-point:last-child:nth-child(odd) { grid-column: 1 / -1; }
	main.cm-hs .cm-hs-point:last-child:nth-child(odd) .cm-hs-point-copy { max-width: 72ch; }
}

main.cm-hs .cm-hs-point {
	padding-top: 16px;
	border-top: 2px solid var(--cm26-line);
}

main.cm-hs .cm-hs-point-title {
	margin: 0;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--cm26-ink);
}

main.cm-hs .cm-hs-point-copy {
	margin: 8px 0 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--cm26-body);
}

main.cm-hs .cm-hs-point-link { margin: 12px 0 0; font-size: 15px; }

main.cm-hs .cm-hs-point-link .cm-tlink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-block: -10px;
}

/* ---------------------------------------------------------------------------
   6. Shared vs. owned leads
   --------------------------------------------------------------------------- */

main.cm-hs .cm-hs-leads { background: var(--studio-panel, #f0e7de); }

main.cm-hs .cm-hs-leads-grid {
	display: grid;
	gap: 32px;
}

@media (min-width: 1024px) {
	main.cm-hs .cm-hs-leads-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(48px, 6vw, 88px);
		align-items: center;
	}
}

main.cm-hs .cm-hs-leads-copy .cm-eyebrow { margin-bottom: 14px; }

main.cm-hs .cm-hs-compare {
	display: grid;
	gap: 14px;
}

@media (min-width: 640px) and (max-width: 1023.98px) {
	main.cm-hs .cm-hs-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

main.cm-hs .cm-hs-compare-col {
	padding: 22px 22px 20px;
	border-radius: 8px;
	border: 1px solid var(--studio-rule, #d5c8bd);
}

main.cm-hs .cm-hs-compare-col--shared { background: transparent; }

main.cm-hs .cm-hs-compare-col--owned {
	background: var(--cm26-card);
	border-color: #c4ab97;
	box-shadow: 0 18px 40px -28px rgba(80, 22, 16, .4);
}

main.cm-hs .cm-hs-compare-title {
	margin: 0;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--cm26-ink);
}

main.cm-hs .cm-hs-compare-list {
	display: grid;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

main.cm-hs .cm-hs-compare-list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--cm26-prose);
}

main.cm-hs .cm-hs-mark--x {
	margin-top: 1px;
	padding: 4px;
	border-radius: 50%;
	background: rgba(41, 39, 37, .07);
	color: var(--cm26-stone);
	box-sizing: content-box;
	stroke-width: 2.5;
}

/* ---------------------------------------------------------------------------
   7. Work + 8. Reviews — cm-lp.css components; spacing only.
   --------------------------------------------------------------------------- */

main.cm-hs .cm-hs-reviews { background: var(--cm26-paper); }

/* ---------------------------------------------------------------------------
   9. Why — the badge row label is a link here.
   --------------------------------------------------------------------------- */

main.cm-hs .cm-lp-badges-label a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .3);
	text-underline-offset: 4px;
}

main.cm-hs .cm-lp-badges-label a:hover,
main.cm-hs .cm-lp-badges-label a:focus-visible { color: var(--cm26-dark-link); text-decoration-color: currentColor; }

main.cm-hs .cm-lp-why-title { max-width: 18ch; }

/* ---------------------------------------------------------------------------
   10. Pricing
   --------------------------------------------------------------------------- */

main.cm-hs .cm-hs-pricing {
	margin-top: clamp(48px, 6vw, 80px);
	padding-top: clamp(32px, 4vw, 48px);
	border-top: 1px solid var(--studio-rule, #d5c8bd);
}

main.cm-hs .cm-hs-pricing-head {
	display: grid;
	gap: 8px;
	margin-bottom: 24px;
}

@media (min-width: 1024px) {
	main.cm-hs .cm-hs-pricing-head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		gap: 48px;
		align-items: end;
	}
}

main.cm-hs .cm-hs-pricing-title {
	margin: 0;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.025em;
	text-transform: none;
	color: var(--cm26-ink);
}

main.cm-hs .cm-hs-pricing-copy {
	margin: 0;
	max-width: 58ch;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--cm26-body);
}

main.cm-hs .cm-hs-price-grid {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	main.cm-hs .cm-hs-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 1100px) {
	main.cm-hs .cm-hs-price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

main.cm-hs .cm-hs-price {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 20px 20px 10px;
	background: var(--cm26-card);
	border: 1px solid var(--studio-rule, #d5c8bd);
	border-radius: 8px;
}

main.cm-hs .cm-hs-price-name {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cm26-brand-ink);
}

main.cm-hs .cm-hs-price-value {
	margin: 8px 0 0;
	font-family: var(--cm26-font-display);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.02em;
	color: var(--cm26-ink);
}

main.cm-hs .cm-hs-price-value span {
	font-family: var(--cm26-font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--cm26-stone);
}

main.cm-hs .cm-hs-price-copy {
	flex: 1 1 auto;
	margin: 8px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--cm26-body);
}

main.cm-hs .cm-hs-price-link { margin: 6px 0 0; }

main.cm-hs .cm-hs-price-link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cm26-brand-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

main.cm-hs .cm-hs-bundle { margin-top: 18px; }

main.cm-hs .cm-lp-inline-cta-copy a {
	color: var(--cm26-brand-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   11. FAQ — link colours inside answers.
   --------------------------------------------------------------------------- */

main.cm-hs .cm-faq-answer a {
	color: var(--cm26-brand-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

main.cm-hs .cm-hs-faq + .cm-section-tight { padding-bottom: clamp(48px, 6vw, 80px); }

@media (prefers-reduced-motion: reduce) {
	main.cm-hs .cm-hs-trade { transition: none; }
}

/* Review pass: the unit always sits on its own line so the four cards align. */
main.cm-hs .cm-hs-price-value span { display: block; margin-top: 2px; }

/* Steps + pricing run straight into the FAQ on the same paper; halve the seam. */
main.cm-hs .cm-hs-how { padding-bottom: calc(var(--cm26-section-y) * .5); }
main.cm-hs .cm-hs-faq { border-top: 1px solid var(--studio-rule, #d5c8bd); }

/* Review attribution: the name on its own line, "Google review · View"
   under it, in every card, so no line ever starts or ends on a stray dot
   and the three card bottoms match. */
main.cm-hs .cm-rev-by .cm-rev-author { display: block; }