/*
 * Paid-social landing page (template-landing-leads.php) — 2026-10.
 *
 * Enqueued by inc/cm-landing.php on that template only. cosmick-2026.css and
 * cm-interior.css are hard-coded <link>s printed AFTER this file, so every rule
 * that overlaps theirs wins on SPECIFICITY (scoped under main.cm-lp or
 * body.cm-lp-page), never on order and never with !important.
 *
 * Mobile-first. Checked at 360 / 390 / 768 / 1024 / 1440.
 */

/* The legacy cosmick-modern.css paints `section::before` over every section and
   makes every section overflow:hidden (which would break the sticky hero copy). */
main.cm-lp section::before { content: none; }
main.cm-lp > section { overflow-x: clip; overflow-y: visible; }

/* style.css sets `html, body { overflow-x: hidden }`; on BODY that makes a
   scroll container and position:sticky measures against it. Clip instead. */
body.cm-lp-page,
body.page-template-template-landing-leads { overflow-x: clip; overflow-y: visible; }

main.cm-lp [id] { scroll-margin-top: calc(var(--cm26-header-h) + 16px); }

main.cm-lp .cm-lp-glyph { flex: 0 0 auto; }

main.cm-lp .cm-section-head { margin-bottom: clamp(28px, 4vw, 48px); }

/* ---------------------------------------------------------------------------
   1. Hero — copy left, form card right on the coral field (>= 1024px).
   --------------------------------------------------------------------------- */

main.cm-lp .cm-lp-hero { border-bottom: 1px solid var(--studio-rule, #d5c8bd); }

main.cm-lp .cm-lp-hero-grid {
	position: relative;
	display: grid;
	gap: 36px;
	padding-block: 36px 0;
}

@media (min-width: 768px) {
	main.cm-lp .cm-lp-hero-grid { padding-block: 56px 0; gap: 44px; }
}

@media (min-width: 1024px) {
	main.cm-lp .cm-hero-backdrop { inset: 0 0 0 52%; }

	main.cm-lp .cm-lp-hero-grid {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
		align-items: start;
		gap: clamp(40px, 5vw, 80px);
		padding-block: 64px 72px;
	}

	main.cm-lp .cm-lp-hero-copy { padding-top: 16px; }
}

/* The copy rides alongside the (long) form — only where the whole column fits
   in the viewport, so its last lines are never held off-screen. */
@media (min-width: 1280px) and (min-height: 880px) {
	main.cm-lp .cm-lp-hero-copy {
		position: sticky;
		top: 24px;
	}
}

main.cm-lp .cm-lp-hero-copy .cm-eyebrow { margin-bottom: 18px; }

main.cm-lp .cm-lp-title {
	margin: 0;
	padding: 0;
	max-width: 15ch;
	font-size: clamp(36px, 4.6vw, 60px);
	line-height: 1.04;
	letter-spacing: -.045em;
}

main.cm-lp .cm-lp-title { max-width: none; }
main.cm-lp .cm-lp-title .cm-lp-title-line { display: block; text-wrap: balance; }

/* A real review in the hero: proof before the form ask, at every width
   (beside the form on desktop, just above it on phones). */
main.cm-lp .cm-lp-hero-quote {
	display: block;
	position: relative;
	margin: 30px 0 0;
	padding: 26px 20px 16px 22px;
	background: var(--cm26-card);
	border: 1px solid var(--studio-rule, #d5c8bd);
	border-radius: 7px;
}

main.cm-lp .cm-lp-hero-quote::before {
	content: "\201C";
	position: absolute;
	top: -15px;
	left: 16px;
	height: 34px;
	padding-inline: 6px;
	background: var(--cm26-paper);
	font-family: var(--cm26-font-display);
	font-size: 46px;
	font-weight: 800;
	line-height: .95;
	color: var(--studio-coral, #ff675b);
}

@media (min-width: 1024px) {
	main.cm-lp .cm-lp-hero-quote { margin-top: 32px; padding: 30px 24px 20px 26px; }
	main.cm-lp .cm-lp-hero-quote::before { left: 20px; }
}

main.cm-lp .cm-lp-hero-quote-text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--cm26-prose);
}

main.cm-lp .cm-lp-hero-quote-by {
	margin-top: 12px;
	font-size: 13.5px;
	color: var(--cm26-stone);
}

main.cm-lp .cm-lp-hero-quote-by a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
main.cm-lp .cm-lp-hero-quote-by a:hover { color: var(--cm26-brand-ink); }

main.cm-lp .cm-lp-lede {
	margin-top: 22px;
	max-width: 54ch;
	font-size: clamp(17px, 1.45vw, 19.5px);
}

main.cm-lp .cm-lp-checks {
	display: grid;
	gap: 12px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

main.cm-lp .cm-lp-checks li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--cm26-ink);
}

main.cm-lp .cm-lp-tick {
	margin-top: 1px;
	padding: 4px;
	border-radius: 50%;
	background: var(--cm26-tint);
	color: var(--cm26-brand-ink);
	box-sizing: content-box;
	stroke-width: 2.5;
}

main.cm-lp .cm-lp-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

/* The form sits beside the copy on desktop, so the jump CTA is phone/tablet only. */
@media (min-width: 1024px) {
	main.cm-lp .cm-lp-hero-actions { display: none; }
}

main.cm-lp .cm-lp-trust {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--studio-rule, #d5c8bd);
}

main.cm-lp .cm-lp-trust-badge {
	flex: 0 0 auto;
	width: 58px;
	height: auto;
}

main.cm-lp .cm-lp-trust-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cm26-stone);
}

main.cm-lp .cm-lp-trust-list li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

main.cm-lp .cm-lp-trust-list strong { font-weight: 700; color: var(--cm26-ink); }

/* Form column. Below 1024px the coral sits behind the card with a sloping top
   edge, the same device the homepage hero uses behind its imagery. */
main.cm-lp .cm-lp-hero-form {
	position: relative;
	isolation: isolate;
	min-width: 0;
	padding: 40px 0 44px;
}

main.cm-lp .cm-lp-hero-form::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 calc(-1 * var(--cm26-gutter));
	clip-path: polygon(0 56px, 100% 0, 100% 100%, 0 100%);
	background-color: var(--cm26-brand);
	background-image:
		radial-gradient(at 88% 12%, rgba(255, 205, 177, .28), transparent 58%),
		linear-gradient(155deg, transparent 40%, rgba(160, 44, 39, .12));
	pointer-events: none;
}

@media (min-width: 768px) {
	main.cm-lp .cm-lp-hero-form { padding: 72px 8% 64px; }
	main.cm-lp .cm-lp-hero-form::before { clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%); }
}

@media (min-width: 1024px) {
	main.cm-lp .cm-lp-hero-form { padding: 0; }
	main.cm-lp .cm-lp-hero-form::before { content: none; }
}

main.cm-lp .cm-lp-form-card {
	position: relative;
	padding: 26px 20px 22px;
	background: var(--cm26-card);
	border: 1px solid rgba(41, 39, 37, .10);
	border-radius: 8px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 24px 60px -24px rgba(80, 22, 16, .45), 0 6px 18px -8px rgba(41, 39, 37, .18);
}

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

main.cm-lp .cm-lp-form-card:focus { outline: none; }

@media (min-width: 640px) {
	main.cm-lp .cm-lp-form-card { padding: 34px 32px 28px; }
	main.cm-lp .cm-lp-form-card::before { left: 32px; }
}

main.cm-lp .cm-lp-form-kicker {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
	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-lp .cm-lp-form-title {
	margin: 0;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: clamp(22px, 2.1vw, 27px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.025em;
	text-transform: none;
	color: var(--cm26-ink);
}

main.cm-lp .cm-lp-form-sub {
	margin: 8px 0 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--cm26-body);
}

main.cm-lp .cm-lp-form-body {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--cm26-line);
}

/* gf-2026.css reads every radius from tokens; match the contact form's. */
main.cm-lp .cm-lp-form-body .gform_wrapper {
	--cm26-radius-input: 5px;
	--cm26-radius: 6px;
	margin: 0;
}

main.cm-lp .cm-lp-form-body .gform_wrapper .gform_footer .gform_button { width: 100%; justify-content: center; }
main.cm-lp .cm-lp-form-note {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: 18px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--cm26-stone);
}

main.cm-lp .cm-lp-form-note .cm-lp-glyph { margin-top: 2px; color: var(--cm26-stone); }

main.cm-lp .cm-lp-form-note a,
main.cm-lp .cm-lp-form-alt a {
	color: var(--cm26-brand-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

main.cm-lp .cm-lp-form-alt {
	margin: 10px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--cm26-line);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--cm26-body);
}

main.cm-lp .cm-lp-form-alt a {
	display: inline-block;
	padding-block: 10px;
	margin-block: -10px;
}

main.cm-lp .cm-lp-form-hours { color: var(--cm26-stone); }

main.cm-lp .cm-lp-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

/* GF confirmation inside the card. */
main.cm-lp .cm-lp-form-body .gform_confirmation_message {
	padding: 18px 20px;
	border-radius: 6px;
	background: var(--cm26-tint);
	color: var(--cm26-ink);
	font-size: 16px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   2. Trades strip
   --------------------------------------------------------------------------- */

main.cm-lp .cm-lp-trades {
	background: var(--studio-panel, #f0e7de);
	border-bottom: 1px solid var(--studio-rule, #d5c8bd);
}

main.cm-lp .cm-lp-trades-row {
	display: grid;
	gap: 20px;
	padding-block: 32px;
}

@media (min-width: 1024px) {
	main.cm-lp .cm-lp-trades-row {
		grid-template-columns: minmax(0, .72fr) minmax(0, 1.6fr);
		align-items: center;
		gap: 56px;
		padding-block: 40px;
	}
}

main.cm-lp .cm-lp-trades-title {
	margin: 0;
	padding: 0;
	max-width: 24ch;
	font-family: var(--cm26-font-display);
	font-size: clamp(19px, 1.7vw, 22px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--cm26-ink);
	text-wrap: balance;
}

main.cm-lp .cm-lp-trades-copy {
	margin: 8px 0 0;
	max-width: 44ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--cm26-body);
}

main.cm-lp .cm-lp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

main.cm-lp .cm-lp-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	margin: 0;
	padding: 6px 14px 6px 12px;
	background: var(--cm26-paper);
	border: 1px solid var(--studio-rule, #d5c8bd);
	border-radius: 999px;
	font-family: var(--cm26-font-display);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--cm26-ink);
}

main.cm-lp .cm-lp-chip::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--studio-coral, #ff675b);
}

main.cm-lp .cm-lp-chip--more {
	background: transparent;
	border-style: dashed;
	border-color: #b39d88;
	color: var(--cm26-brand-ink);
}

main.cm-lp .cm-lp-chip--more::before { content: none; }

/* ---------------------------------------------------------------------------
   3. Problem
   --------------------------------------------------------------------------- */

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

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

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

main.cm-lp .cm-lp-pain {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 16px;
	align-content: start;
	margin: 0;
	padding: 22px 20px;
	background: var(--cm26-card);
	border: 1px solid var(--cm26-line);
	border-radius: 8px;
}

@media (min-width: 640px) {
	main.cm-lp .cm-lp-pain {
		grid-template-columns: minmax(0, 1fr);
		padding: 26px 24px 28px;
	}
}

main.cm-lp .cm-lp-pain-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	grid-row: span 2;
	border-radius: 10px;
	background: var(--cm26-tint);
	color: var(--cm26-brand-ink);
}

@media (min-width: 640px) {
	main.cm-lp .cm-lp-pain-icon { grid-row: auto; margin-bottom: 18px; }
}

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

main.cm-lp .cm-lp-pain-copy {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cm26-body);
}

main.cm-lp .cm-lp-turn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 .35em;
	margin: clamp(36px, 5vw, 56px) 0 0;
	font-family: var(--cm26-font-display);
	font-size: clamp(21px, 2.4vw, 30px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.025em;
	text-align: center;
	color: var(--cm26-ink);
	text-wrap: balance;
}

@media (min-width: 900px) {
	main.cm-lp .cm-lp-turn::before,
	main.cm-lp .cm-lp-turn::after {
		content: "";
		flex: 1 1 40px;
		max-width: 120px;
		height: 2px;
		margin-inline: 20px;
		background: var(--studio-coral, #ff675b);
		opacity: .7;
	}
}

/* ---------------------------------------------------------------------------
   4. System — the homepage capability panels, numbered.
   --------------------------------------------------------------------------- */

main.cm-lp .cm-lp-system { background: var(--cm26-sand); }

main.cm-lp .cm-lp-stages {
	margin: 0;
	padding: 0;
	list-style: none;
}

main.cm-lp .cm-lp-stage { margin: 0; }

main.cm-lp .cm-lp-stage-title {
	margin: 0;
	padding: 0;
	font-size: clamp(20px, 1.8vw, 24px);
	line-height: 1.2;
	letter-spacing: -.02em;
}

main.cm-lp .cm-lp-stage .cm-cap-glyph svg { width: 25px; height: 25px; stroke-width: 1.4px; }

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

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

@media (max-width: 767px) {
	main.cm-lp .cm-lp-stage .cm-cap-copy,
	main.cm-lp .cm-lp-stage-tags { padding-left: 0; }
}

/* ---------------------------------------------------------------------------
   5. How it works
   --------------------------------------------------------------------------- */

main.cm-lp .cm-lp-steps {
	display: grid;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

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

@media (min-width: 1024px) {
	main.cm-lp .cm-lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
}

main.cm-lp .cm-lp-step {
	position: relative;
	display: grid;
	/* Stretched to the row height; without this the spare height is shared
	   among the auto rows and shorter steps' titles sit low. */
	align-content: start;
	grid-template-columns: 38px minmax(0, 1fr);
	column-gap: 16px;
	margin: 0;
}

@media (min-width: 1024px) {
	main.cm-lp .cm-lp-step { grid-template-columns: minmax(0, 1fr); }

	/* A hairline joining the stamps. */
	main.cm-lp .cm-lp-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 19px;
		left: 54px;
		right: -16px;
		height: 1px;
		background: var(--studio-rule, #d5c8bd);
	}
}

main.cm-lp .cm-lp-step-num { grid-row: span 2; }

@media (min-width: 1024px) {
	main.cm-lp .cm-lp-step-num { grid-row: auto; margin-bottom: 20px; }
}

main.cm-lp .cm-lp-step-title {
	margin: 6px 0 0;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: 18.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.015em;
	text-transform: none;
	color: var(--cm26-ink);
}

@media (min-width: 1024px) {
	main.cm-lp .cm-lp-step-title { margin-top: 0; }
}

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

/* Inline CTA strip (after the steps and after the work grid). */
main.cm-lp .cm-lp-inline-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: clamp(36px, 5vw, 52px);
	padding: 22px 22px 22px 26px;
	background: var(--studio-panel, #f0e7de);
	border: 1px solid var(--studio-rule, #d5c8bd);
	border-radius: 5px;
}

main.cm-lp .cm-lp-inline-cta::before {
	content: "";
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: -1px;
	width: 5px;
	border-radius: 5px 0 0 5px;
	background: var(--studio-coral, #ff675b);
}

@media (min-width: 768px) {
	main.cm-lp .cm-lp-inline-cta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
		padding: 22px 24px 22px 32px;
	}
}

main.cm-lp .cm-lp-inline-cta-copy {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--cm26-body);
}

main.cm-lp .cm-lp-inline-cta-copy strong { color: var(--cm26-ink); font-weight: 700; }

main.cm-lp .cm-lp-inline-cta-actions { flex: 0 0 auto; }

main.cm-lp .cm-lp-inline-cta--quiet { background: var(--cm26-card); }

/* ---------------------------------------------------------------------------
   6. Proof — facts, reviews, website builds.
   --------------------------------------------------------------------------- */

main.cm-lp .cm-lp-facts { border-top: 1px solid var(--studio-rule, #d5c8bd); }

main.cm-lp .cm-lp-facts .cm-fact-value { letter-spacing: -.03em; }

main.cm-lp .cm-lp-rev .cm-rev-quote { font-size: 16px; }

main.cm-lp .cm-lp-work { background: var(--cm26-sand); }

main.cm-lp .cm-lp-work-grid {
	margin-block: 0;
	list-style: none;
}

@media (min-width: 768px) {
	main.cm-lp .cm-lp-work-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		margin: 0;
		padding: 0;
	}
}

@media (min-width: 1024px) {
	main.cm-lp .cm-lp-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

main.cm-lp .cm-lp-work-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	background: var(--cm26-card);
	border: 1px solid var(--studio-rule, #d5c8bd);
	border-radius: 7px;
}

main.cm-lp .cm-lp-work-frame {
	padding: 16px 16px 0;
	background: linear-gradient(180deg, #efe4d9, #f6eee6);
	border-bottom: 1px solid var(--studio-rule, #d5c8bd);
}

main.cm-lp .cm-lp-work-frame .cm-browser-bar {
	border: 1px solid rgba(41, 39, 37, .08);
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
}

main.cm-lp .cm-lp-work-shot {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--cm26-paper);
	border-inline: 1px solid rgba(41, 39, 37, .08);
}

main.cm-lp .cm-lp-work-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform .5s var(--cm26-ease);
}

@media (hover: hover) and (pointer: fine) {
	main.cm-lp .cm-lp-work-card:hover .cm-lp-work-img { transform: scale(1.03); }
}

main.cm-lp .cm-lp-work-body { padding: 18px 20px 16px; }

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

main.cm-lp .cm-lp-work-name {
	margin: 6px 0 0;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.015em;
	text-transform: none;
	color: var(--cm26-ink);
}

main.cm-lp .cm-lp-work-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cm26-stone);
	text-decoration: underline;
	text-decoration-color: var(--studio-rule, #d5c8bd);
	text-underline-offset: 4px;
}

main.cm-lp .cm-lp-work-link:hover,
main.cm-lp .cm-lp-work-link:focus-visible { color: var(--cm26-brand-ink); text-decoration-color: currentColor; }

/* ---------------------------------------------------------------------------
   7. Why Cosmick — dark band.
   --------------------------------------------------------------------------- */

main.cm-lp .cm-lp-why { background: var(--studio-charcoal, #292725); }

main.cm-lp .cm-lp-why-grid {
	display: grid;
	gap: 40px;
}

@media (min-width: 1024px) {
	main.cm-lp .cm-lp-why-grid {
		grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
		gap: 72px;
		align-items: start;
	}
}

main.cm-lp .cm-lp-why-intro .cm-eyebrow { margin-bottom: 14px; }

main.cm-lp .cm-lp-why-title {
	margin: 0;
	padding: 0;
	max-width: 16ch;
	line-height: 1.12;
	color: var(--cm26-paper);
}

main.cm-lp .cm-lp-why-lede {
	margin: 18px 0 0;
	max-width: 46ch;
	font-size: 17px;
	line-height: 1.65;
	color: var(--cm26-dark-secondary);
}

main.cm-lp .cm-lp-why-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

main.cm-lp .cm-lp-why-list {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 8px;
	overflow: hidden;
}

@media (min-width: 640px) {
	main.cm-lp .cm-lp-why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

main.cm-lp .cm-lp-why-item {
	margin: 0;
	padding: 24px 22px 26px;
	background: var(--studio-charcoal, #292725);
}

@media (min-width: 768px) {
	main.cm-lp .cm-lp-why-item { padding: 30px 28px 32px; }
}

main.cm-lp .cm-lp-why-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border: 1px solid rgba(255, 154, 144, .35);
	border-radius: 10px;
	background: rgba(255, 103, 91, .08);
	color: var(--cm26-dark-link);
}

main.cm-lp .cm-lp-why-item-title {
	margin: 0;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--cm26-paper);
}

main.cm-lp .cm-lp-why-item-copy {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cm26-dark-secondary);
}

main.cm-lp .cm-lp-badges {
	display: grid;
	gap: 16px;
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

@media (min-width: 1024px) {
	main.cm-lp .cm-lp-badges {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 40px;
	}
}

main.cm-lp .cm-lp-badges-label {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cm26-dark-muted);
}

main.cm-lp .cm-lp-badges-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	main.cm-lp .cm-lp-badges-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}

/* Partner artwork always sits on white, never filtered or recoloured. */
main.cm-lp .cm-lp-badge {
	display: grid;
	place-items: center;
	height: 76px;
	margin: 0;
	padding: 12px 18px;
	background: #fff;
	border-radius: 6px;
}

main.cm-lp .cm-lp-badge-img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 46px;
}

/* ---------------------------------------------------------------------------
   8. FAQ — the homepage's warm surface, re-scoped.
   --------------------------------------------------------------------------- */

main.cm-lp .cm-lp-faq .cm-faq-list { border-top-color: var(--studio-rule, #d5c8bd); }
main.cm-lp .cm-lp-faq .cm-faq-item { border-bottom-color: var(--studio-rule, #d5c8bd); }
main.cm-lp .cm-lp-faq .cm-faq-more a {
	color: var(--cm26-brand-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   9. Closing CTA
   --------------------------------------------------------------------------- */

main.cm-lp .cm-lp-final { padding-bottom: clamp(48px, 6vw, 80px); }

main.cm-lp .cm-lp-final .cm-h-section { max-width: 20ch; }

/* ---------------------------------------------------------------------------
   Sticky quick-action bar (below 1024px). Shown by cm-lp.js; [hidden] = gone,
   so it is out of the accessibility tree whenever it is not visible.
   --------------------------------------------------------------------------- */

.cm-lp-bar[hidden] { display: none; }

body.cm-lp-page .cm-lp-bar,
body.page-template-template-landing-leads .cm-lp-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 900;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(251, 248, 245, .97);
	border-top: 1px solid var(--studio-rule, #d5c8bd);
	box-shadow: 0 -10px 30px -12px rgba(41, 39, 37, .28);
	-webkit-backdrop-filter: saturate(1.2) blur(8px);
	backdrop-filter: saturate(1.2) blur(8px);
}

body.cm-lp-page .cm-lp-bar.is-in,
body.page-template-template-landing-leads .cm-lp-bar.is-in { animation: cm-lp-bar-in .28s var(--cm26-ease) both; }

@keyframes cm-lp-bar-in { from { transform: translateY(100%); } to { transform: none; } }

.cm-lp-bar-inner {
	display: flex;
	gap: 10px;
	max-width: 640px;
	margin-inline: auto;
}

body .cm-lp-bar .cm-lp-bar-cta { flex: 1 1 auto; min-height: 48px; }

body .cm-lp-bar .cm-lp-bar-call {
	flex: 0 0 auto;
	gap: 8px;
	min-height: 48px;
	padding-inline: 18px;
	background: var(--cm26-card);
}

body.cm-lp-bar-on { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

/* WCAG 2.4.11: anything scrolled into view (Tab, find, jump) stops above the
   bar instead of underneath it. cm-lp.js also sets this inline for browsers
   without :has(). */
html:has(body.cm-lp-bar-on) { scroll-padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 1024px) {
	body.cm-lp-page .cm-lp-bar,
	body.page-template-template-landing-leads .cm-lp-bar { display: none; }
	body.cm-lp-bar-on { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	body.cm-lp-page .cm-lp-bar.is-in,
	body.page-template-template-landing-leads .cm-lp-bar.is-in { animation: none; }
	main.cm-lp .cm-lp-work-img { transition: none; }
}

/* ---------------------------------------------------------------------------
   Phone polish — paired CTAs go full width so they read as one decision.
   --------------------------------------------------------------------------- */

main.cm-lp .cm-lp-badge:first-child .cm-lp-badge-img { max-height: 60px; }

@media (max-width: 639.98px) {
	main.cm-lp .cm-lp-hero-actions,
	main.cm-lp .cm-lp-why-actions,
	main.cm-lp .cm-lp-final .cm-cta-actions { flex-direction: column; }

	main.cm-lp .cm-lp-hero-actions .cm-btn,
	main.cm-lp .cm-lp-why-actions .cm-btn,
	main.cm-lp .cm-lp-final .cm-cta-actions .cm-btn,
	main.cm-lp .cm-lp-inline-cta-actions .cm-btn { width: 100%; justify-content: center; }

	main.cm-lp .cm-lp-inline-cta-actions { width: 100%; }
}

/* Small phones: keep "More booked jobs." on one line. */
@media (max-width: 379.98px) {
	main.cm-lp .cm-lp-title { font-size: 32px; }
}

/* ---------------------------------------------------------------------------
   Review pass (2026-10-23)
   --------------------------------------------------------------------------- */

main.cm-lp .cm-lp-nowrap { white-space: nowrap; }

/* System stages: step numerals are text that carries order, so AA ink, not
   the decorative coral (2.8:1). Matches the .cm-lp-step-num stamps. */
main.cm-lp .cm-lp-stage .cm-cap-num { color: var(--cm26-brand-ink); }

/* Reviews 768-1023: three ~190px columns made 600px-tall cards. One column,
   held to a readable measure, until there is room for three. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	main.cm-lp .cm-lp-reviews .cm-rev-grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 680px;
	}
}

/* Header phone: the normal header hides it below 1280px to make room for the
   nav. The landing header has no nav, so show it from 1024px (below that the
   mobile icon button covers it). */
@media (min-width: 1024px) {
	body.cm-lp-page .cm-site-header .cm-header-phone { display: inline-flex; }
}

/* Tap targets (>= 44px tall) for the small text links. */
main.cm-lp .cm-rev-by a,
main.cm-lp .cm-lp-hero-quote-by a,
main.cm-lp .cm-lp-form-alt a,
body.cm-lp-page .cm-footer .cm-ft-legal-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: 0;
	margin-block: -12px;
	vertical-align: middle;
}

main.cm-lp .cm-rail-btn { width: 44px; height: 44px; }

/* Form 1 controls: a visible boundary (3:1) and a clear focus ring. */
main.cm-lp #gform_wrapper_1 .gfield input[type="checkbox"]:not(:checked) { border-color: #8a7a70; }

main.cm-lp #gform_wrapper_1 .gfield input:focus-visible,
main.cm-lp #gform_wrapper_1 .gfield select:focus-visible,
main.cm-lp #gform_wrapper_1 .gfield textarea:focus-visible {
	outline: 2px solid var(--cm26-brand-ink);
	outline-offset: 2px;
}