/* hero-home.css — task_0014 (v2 visual polish)
 * Mobile-first home hero. Consumes tokens.css (--c-*).
 * Hard constraints preserved: CF7 #10009 verbatim, 1-844-467-4552 tel-linked,
 * <main> landmark, mobile fold @375x800 with Send button visible.
 */

/* Bleed dark behind the fixed nav: the body's padding-top creates a sliver
 * of body bg between the nav and hero. Painting body dark on home blends
 * the sliver into the hero's dark overlay — no visible white line. */
body.home,
body.single-franchisees,
body.page-template-page-adwords,
body.page-template-page-contact2,
body.page-template-page-commercialquote {
	background-color: var(--c-dark);
}

.hero {
	position: relative;
	min-height: 100svh;
	overflow: hidden;
	color: var(--c-white);
	isolation: isolate;
}

.hero-bg,
.hero-bg__overlay {
	position: absolute;
	inset: 0;
}

.hero-bg {
	background-image: url("/wp-content/uploads/2022/12/hero-bg-1-1024x436.jpg");
	background-size: cover;
	background-position: center;
	background-color: var(--c-dark);
}

.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	pointer-events: none;
}

@media (max-width: 1023.98px) {
	.hero-video { display: none; }
}

@media (prefers-reduced-motion: reduce),
       (prefers-reduced-data: reduce) {
	.hero-video { display: none; }
}

.hero-bg__overlay {
	z-index: 1;
	background:
		linear-gradient(180deg,
			rgba(35, 31, 32, .55) 0%,
			rgba(35, 31, 32, .22) 100%),
		linear-gradient(135deg,
			rgba(255, 255, 255, .55) 0%,
			rgba(35, 31, 32, .35) 30%,
			rgba(120, 166, 54, .35) 100%);
	background-blend-mode: multiply, normal;
}

/* Subtle bottom edge — visual signal of "scroll for more" without arrow chrome */
.hero::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4px;
	background: linear-gradient(90deg,
		var(--c-orange-brand) 0%,
		var(--c-orange-brand) 50%,
		var(--c-green-brand) 100%);
	z-index: 2;
}

.hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 3.5rem 1rem 1.5rem;
	max-width: 100%;
}

/* ── Logo ─────────────────────────────────────────────────────────── */

.hero-logo {
	display: inline-block;
	line-height: 0;
	align-self: flex-start;
}

.hero-logo img {
	max-height: 52px;
	width: auto;
	height: auto;
}

/* ── H1: confident display type ──────────────────────────────────── */

.hero-h1 {
	margin: 0;
	line-height: 1;
	color: var(--c-white);
	text-shadow: 0 2px 4px rgba(0, 0, 0, .35);
	letter-spacing: -.01em;
	display: flex;
	flex-direction: column;
	gap: .1em;
}

.hero-h1__lead {
	font-size: clamp(1.25rem, 5vw, 2.5rem);
	font-weight: 600;
	opacity: .92;
}

.hero-h1__hero {
	font-size: clamp(1.875rem, 8vw, 4.5rem);
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--c-white);
}

.hero-h1__hero::after {
	content: ".";
	color: var(--c-orange-brand);
}

/* ── Trust strip: text-only, small-caps, AA-compliant white ──────── */

.hero-trust {
	margin: .35rem 0 0;
	font-size: .8125rem;
	letter-spacing: .02em;
	line-height: 1.45;
	color: rgba(255, 255, 255, .9);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem .55rem;
}

.hero-trust__stat {
	display: inline-flex;
	align-items: baseline;
	gap: .35em;
	font-weight: 500;
}

.hero-trust__stat strong {
	font-weight: 800;
	color: var(--c-orange-brand);
	letter-spacing: -.005em;
}

.hero-trust__sep {
	color: var(--c-orange-brand);
	opacity: .65;
	font-weight: 700;
}

/* Visual star rating in the hero-trust strip (task_0116).
 * Grey background ★★★★★ with orange overlay clipped to the rating
 * percentage. Cross-browser via Unicode glyphs. */
.hero-stars {
	position: relative;
	display: inline-block;
	color: rgba(255, 255, 255, .35);
	letter-spacing: .05em;
	line-height: 1;
	font-size: 1em;
	vertical-align: -.05em;
	white-space: nowrap;
	margin-right: .3em;
}

.hero-stars::before {
	content: "★★★★★";
}

.hero-stars__fill {
	position: absolute;
	inset: 0;
	color: var(--c-orange-brand);
	overflow: hidden;
	width: var(--hero-stars-pct, 0%);
	white-space: nowrap;
	pointer-events: none;
}

.hero-stars__fill::before {
	content: "★★★★★";
	letter-spacing: .05em;
}

/* ── Form card: confident, prominent, conversion-first ──────────── */

.hero-form {
	background: var(--c-white);
	color: var(--c-dark);
	padding: 1rem .9rem;
	border-radius: 10px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .06) inset,
		0 8px 24px rgba(0, 0, 0, .35),
		0 2px 6px rgba(0, 0, 0, .25);
	margin-top: .25rem;
}

.hero-form__heading {
	margin: 0 0 .375rem;
	color: var(--c-dark);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.hero-form__book-online-link {
	-webkit-appearance: none;
	        appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: var(--c-dark);
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	transition: text-decoration-thickness .2s ease;
}

.hero-form__book-online-link:hover,
.hero-form__book-online-link:focus-visible {
	text-decoration-thickness: 3px;
	outline: none;
}

.hero-form__book-online-link:focus-visible {
	outline: 2px solid var(--c-dark);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.hero-form__book-online-link {
		transition: none;
	}
}

.hero-form__tagline {
	margin: 0 0 .75rem;
	color: var(--c-dark);
	font-size: .9375rem;
	line-height: 1.45;
	opacity: .9;
}

.hero-form .wpcf7-form .row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	margin: 0;
}

/* Neutralize Bootstrap col-* sizing: grid owns layout. Without this,
 * .col-sm-6's max-width:50% caps each cell child to 25% of the form. */
.hero-form .wpcf7-form .row > [class*="col-"] {
	min-width: 0;
	max-width: none;
	flex: none;
	padding-left: 0;
	padding-right: 0;
	width: auto;
}

.hero-form .wpcf7-form .row > .col-sm-12,
.hero-form .wpcf7-form .row > .col-md-12,
.hero-form .wpcf7-form .row > .col-lg-12 {
	grid-column: 1 / -1;
}

.hero-form .wpcf7-form-control-wrap {
	display: block;
}

.hero-form input[type="text"],
.hero-form input[type="email"],
.hero-form input[type="tel"],
.hero-form select {
	display: block;
	width: 100%;
	min-height: 36px;
	padding: .4rem .75rem;
	border: 1px solid #cfcfcf;
	border-radius: 7px;
	font-size: 16px;
	font-family: inherit;
	line-height: 1.2;
	background: var(--c-white);
	color: var(--c-dark);
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.hero-form input::placeholder,
.hero-form select:invalid {
	color: #6a6a6a;
}

.hero-form input:hover,
.hero-form select:hover {
	border-color: var(--c-dark);
}

.hero-form input:focus,
.hero-form select:focus {
	outline: none;
	border-color: var(--c-orange-brand);
	box-shadow: 0 0 0 3px rgba(244, 111, 12, .25);
}

.hero-form .sms_consent {
	display: block;
	font-size: 11px;
	line-height: 1.35;
	color: #4a4a4a !important;
	margin: .35rem 0 .65rem;
}

.hero-form .sms_consent a {
	color: var(--c-orange-deep) !important;
	font-weight: 600;
}

.hero-form .sms_consent .wpcf7-list-item-label {
	color: var(--c-dark);
	font-weight: 600;
}

.hero-form .wpcf7-list-item {
	margin-left: 0;
}

.hero-form .wpcf7-submit {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 1rem 1.25rem;
	border: 0;
	border-radius: 8px;
	background: var(--c-orange-brand);
	color: var(--c-dark);
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(244, 111, 12, .4);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.hero-form .wpcf7-submit:hover,
.hero-form .wpcf7-submit:focus {
	background: var(--c-dark);
	color: var(--c-white);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	outline: 2px solid var(--c-orange-brand);
	outline-offset: 2px;
	transform: translateY(-1px);
}

.hero-form .wpcf7-submit:active {
	transform: translateY(0);
}

.hero-form .wpcf7-response-output {
	color: var(--c-dark);
	font-size: 14px;
	margin-top: .5rem;
}

/* ── Secondary tel CTA ─────────────────────────────────────────── */

.hero-tel {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .35rem;
	min-height: 44px;
	padding: .5rem 0;
	color: var(--c-white);
	text-decoration: none;
	align-self: flex-start;
	margin-top: .25rem;
}

.hero-tel:hover .hero-tel__number,
.hero-tel:focus .hero-tel__number {
	color: var(--c-orange-brand);
}

.hero-tel__label {
	font-weight: 500;
	font-size: .9375rem;
	opacity: .9;
}

.hero-tel__number {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: .02em;
	border-bottom: 2px solid rgba(255, 255, 255, .35);
	transition: color .15s ease, border-color .15s ease;
}

.hero-tel:hover .hero-tel__number {
	border-color: var(--c-orange-brand);
}

/* ── Tablet (≥768): bigger type, more breathing room ───────────── */

@media (min-width: 768px) {
	.hero-content {
		padding: 5rem 2rem 3rem;
		gap: 1rem;
		max-width: 720px;
		margin: 0 auto;
	}

	.hero-logo img {
		max-height: 96px;
	}

	.hero-trust {
		font-size: .9375rem;
	}

	.hero-form {
		padding: 1.75rem;
	}

	/* Tablet: heading cascades from mobile (1.6rem); 2-col grid stays, wider gap */
	.hero-form .wpcf7-form .row {
		gap: .75rem;
	}

	.hero-form input[type="text"],
	.hero-form input[type="email"],
	.hero-form input[type="tel"],
	.hero-form select {
		min-height: 40px;
		padding: .5rem .85rem;
		font-size: 1rem;
	}

	.hero-form .wpcf7-submit {
		min-height: 64px;
		font-size: 1.1875rem;
	}
}

/* ── Desktop (≥1200): two-column page layout with prominent form sidebar ── */

@media (min-width: 1200px) {
	.hero-content {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
		gap: 0;
		max-width: 1320px;
		padding: 5.5rem 2rem 4rem;
	}

	.hero-logo img {
		max-height: 260px;
		height: auto;
		width: auto;
	}

	.hero-trust {
		max-width: 36rem;
	}

	.hero-form {
		padding: 1.5rem 1.75rem;
		margin-top: 0;
		align-self: stretch;
	}

	/* Desktop: heading cascades from mobile (1.5rem). 2-col grid stays, wider gap */
	.hero-form .wpcf7-form .row {
		gap: .85rem;
	}

	.hero-form input[type="text"],
	.hero-form input[type="email"],
	.hero-form input[type="tel"],
	.hero-form select {
		min-height: 44px;
		padding: .6rem .95rem;
		font-size: 1rem;
	}

	.hero-form .wpcf7-submit {
		min-height: 64px;
		font-size: 1.1875rem;
	}
}

/* ── Wide desktop (≥1280): logo even larger ────────────────────── */

@media (min-width: 1280px) {
	.hero-logo img {
		max-height: 260px;
	}
}

/* ── Subtle entrance: gated to no-preference ──────────────────── */

@media (prefers-reduced-motion: no-preference) {
	.hero-h1,
	.hero-trust,
	.hero-form,
	.hero-tel {
		animation: hero-rise 600ms cubic-bezier(.2, .8, .2, 1) backwards;
	}
	.hero-h1     { animation-delay: 80ms; }
	.hero-trust  { animation-delay: 200ms; }
	.hero-form   { animation-delay: 280ms; }
	.hero-tel    { animation-delay: 380ms; }

	@keyframes hero-rise {
		from { opacity: 0; transform: translateY(12px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ── Service-parent hero variants (task_0060) ─────────────────────
 * Overrides for the .hero block when rendered on parent service pages
 * (page-parent.php). Adds a 2-col desktop layout (content + form
 * side-by-side), a single-line h1 variant, and dark-hero styling for
 * the bullets + phone CTA + breadcrumbs. Mobile falls back to the home
 * hero's single-column flex stack. */

/* Single-line h1 — for service pages where the title is one phrase
 * (e.g., "Gutter Cleaning") and doesn't split into a lead/hero pair. */
.hero-h1--single {
	font-size: clamp(2rem, 5.5vw, 3.5rem);
	line-height: 1.1;
	margin: 0 0 .5rem;
	color: var(--c-white);
	font-weight: 800;
	letter-spacing: -.01em;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}

/* Brand flourish: orange first letter on franchisee CPT hero h1.
   Replaces the legacy FontAwesome arrow dropped from main_1.css.
   `.hero-h1` is `display: flex` for the home-page lead/hero split;
   `::first-letter` only applies to block containers, so override here. */
body.single-franchisees .hero-h1 {
	display: block;
}
body.single-franchisees .hero-h1::first-letter {
	color: var(--c-orange-brand);
}

/* Service-parent inner content wrapper — flex column. */
.hero[data-page="service-parent"] .hero-content__main {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
}

/* SEO/AEO intro sentence above the bullets — service-specific copy
   from display_service_intro() in functions.php. */
.hero-service-intro {
	margin: 0 0 1rem;
	color: rgba(255, 255, 255, .92);
	font-size: 1.0625rem;
	line-height: 1.55;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	max-width: 36rem;
}

/* Reuse the built-in .service_bullets::after dotted divider from main_1.css,
   but push it ~20px below the last bullet (was -5px) and tint it for the
   dark hero bg. Adds breathing room before the trust strip. */
.hero[data-page="service-parent"] .service_bullets::after {
	bottom: -20px;
	border-top-color: rgba(255, 255, 255, .35);
}

/* Compensate for the absolutely-positioned ::after pushing 20px below the UL
   by giving the trust strip a top margin so it doesn't collide with the line. */
.hero[data-page="service-parent"] .hero-trust {
	margin-top: 2.5rem;
	font-size: 1rem;
}

/* Keep each stat on a single line; flex-wrap on .hero-trust still allows
   line-breaks between stats at narrow widths, just not mid-stat. */
.hero[data-page="service-parent"] .hero-trust__stat {
	white-space: nowrap;
}

/* Bullets ride the same hero dark bg — light text + brand-orange marker.
   display_service_bullets() emits <ul class="service_bullets">. */
.hero[data-page="service-parent"] .service_bullets {
	list-style: none;
	margin: 1rem 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .65rem;
	color: var(--c-white);
}
.hero[data-page="service-parent"] .service_bullets li {
	position: relative;
	padding-left: 1.75rem;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--c-white);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.hero[data-page="service-parent"] .service_bullets li::before {
	content: "";
	position: absolute;
	left: 20px;
	top: .55em;
	width: .7rem;
	height: .7rem;
	background: var(--c-orange-brand);
	border-radius: 2px;
	transform: rotate(45deg);
}

/* Breadcrumbs above the h1.
   custom_breadcrumbs() emits <ul id="breadcrumbs" class="breadcrumbs"> directly. */
.hero[data-page="service-parent"] .hero-content__main > .breadcrumbs,
.hero[data-page="service-parent"] .hero-content__main > #breadcrumbs {
	list-style: none;
	margin: 0 0 .25rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .5rem;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .85);
}
.hero[data-page="service-parent"] .hero-content__main > .breadcrumbs li {
	margin: 0;
	color: rgba(255, 255, 255, .85);
}
.hero[data-page="service-parent"] .hero-content__main > .breadcrumbs a {
	color: var(--c-white);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 255, 255, .55);
}
.hero[data-page="service-parent"] .hero-content__main > .breadcrumbs a:hover,
.hero[data-page="service-parent"] .hero-content__main > .breadcrumbs a:focus-visible {
	text-decoration-color: var(--c-orange-brand);
}
/* custom_breadcrumbs() emits .item-current with inline color:#f56f0c — fine on dark, just normalize weight. */
.hero[data-page="service-parent"] .hero-content__main > .breadcrumbs .item-current {
	color: var(--c-orange-brand) !important;
	font-weight: 600;
}

/* Desktop ≥1024px: 2-col grid — content on left, form on right.
   Overrides the home hero's flex-column at this breakpoint (home flips
   at ≥1200px; service-parent uses 1024 since service hero is more text-heavy). */
@media (min-width: 1024px) {
	.hero[data-page="service-parent"] .hero-content {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0;
		align-items: start;
		padding: 5rem 2rem 3rem;
		max-width: 1320px;
		margin: 0 auto;
	}
	.hero[data-page="service-parent"] .hero-form {
		align-self: start;
		max-width: 100%;
		margin-top: 0;
	}
}

@media (max-width: 1023.98px) {
	.hero[data-page="service-parent"] .hero-content {
		padding: 3rem 1rem 2rem;
	}
}

/* ── Customer feedback (2026-05-14): readability over video bg ────────
 * Left text column wrapped in a white card so it reads against the
 * looping video, and the form box flipped to brand orange with white
 * text + green submit button. */

/* White card wrapping the left-side text (logo, h1, trust, optionally tel).
   Slightly translucent so the looping hero video shows faintly through. */
.hero-content__main {
	background: rgba(255, 255, 255, .82);
	color: var(--c-dark);
	padding: 1.25rem 1rem;
	border-radius: 10px 10px 0 0;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .06) inset,
		0 8px 24px rgba(0, 0, 0, .35),
		0 2px 6px rgba(0, 0, 0, .25);
	display: flex;
	flex-direction: column;
	gap: .75rem;
	min-width: 0;
}

@media (min-width: 768px) {
	.hero-content__main {
		padding: 1.75rem;
	}
}

@media (min-width: 1200px) {
	.hero-content__main {
		padding: 2rem 2.25rem;
	}
}

/* Recolor everything inside the white card to dark for legibility. */
.hero-content__main .hero-h1,
.hero-content__main .hero-h1__hero,
.hero-content__main .hero-h1__lead,
.hero-content__main .hero-h1--single {
	color: var(--c-dark);
	text-shadow: none;
}
.hero-content__main .hero-h1__hero::after {
	color: var(--c-orange-brand);
}
.hero-content__main .hero-trust {
	color: var(--c-dark);
}
.hero-content__main .hero-trust__sep {
	color: var(--c-orange-deep);
}
.hero-content__main .hero-trust__stat strong {
	color: var(--c-orange-deep);
}
.hero-content__main .hero-tel {
	color: var(--c-dark);
}
.hero-content__main .hero-tel__label {
	color: var(--c-dark);
}
.hero-content__main .hero-tel__number {
	color: var(--c-dark);
	border-bottom-color: rgba(0, 0, 0, .25);
}
.hero-content__main .hero-tel:hover .hero-tel__number,
.hero-content__main .hero-tel:focus .hero-tel__number {
	color: var(--c-orange-deep);
	border-bottom-color: var(--c-orange-brand);
}

/* Service-parent variants inside the white card. */
.hero-content__main .hero-service-intro {
	color: var(--c-dark);
	text-shadow: none;
}
.hero[data-page="service-parent"] .hero-content__main .service_bullets li,
.hero[data-page="service-parent"] .hero-content__main .service_bullets {
	color: var(--c-dark);
}
.hero[data-page="service-parent"] .hero-content__main .service_bullets li {
	text-shadow: none;
}
.hero[data-page="service-parent"] .hero-content__main .service_bullets::after {
	border-top-color: rgba(0, 0, 0, .2);
}
.hero[data-page="service-parent"] .hero-content__main > .breadcrumbs,
.hero[data-page="service-parent"] .hero-content__main > #breadcrumbs {
	color: rgba(0, 0, 0, .65);
}
.hero[data-page="service-parent"] .hero-content__main > .breadcrumbs li {
	color: rgba(0, 0, 0, .65);
}
.hero[data-page="service-parent"] .hero-content__main > .breadcrumbs a {
	color: var(--c-dark);
	text-decoration-color: rgba(0, 0, 0, .4);
}
.hero[data-page="service-parent"] .hero-content__main > .breadcrumbs a:hover,
.hero[data-page="service-parent"] .hero-content__main > .breadcrumbs a:focus-visible {
	text-decoration-color: var(--c-orange-brand);
}

/* Form box → brand orange (slightly translucent so the video shows
   faintly through), text white. Inputs themselves keep a white
   background so user-typed text stays legible. */
.hero-form {
	background: rgba(244, 111, 12, .82);
	color: var(--c-white);
	border-radius: 0 0 10px 10px;
}
.hero-form__heading,
.hero-form__tagline,
.hero-form .wpcf7-response-output {
	color: var(--c-white);
}
.hero-form__tagline {
	opacity: 1;
}
.hero-form .sms_consent {
	color: var(--c-white) !important;
}
.hero-form .sms_consent a {
	color: var(--c-white) !important;
	text-decoration: underline;
}
.hero-form .sms_consent .wpcf7-list-item-label {
	color: var(--c-white);
}

/* Submit button → brown/charcoal (matches the main-nav background hue),
   white text. */
.hero-form .wpcf7-submit {
	background: var(--c-dark);
	color: var(--c-white);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
.hero-form .wpcf7-submit:hover,
.hero-form .wpcf7-submit:focus {
	background: #000;
	color: var(--c-white);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
	outline-color: var(--c-white);
}

/* Service-parent ≥1024px grid: stretch heights so the white card and the
   form box visually align. */
@media (min-width: 1024px) {
	.hero[data-page="service-parent"] .hero-content {
		align-items: stretch;
	}
	.hero[data-page="service-parent"] .hero-form,
	.hero[data-page="service-parent"] .hero-content__main {
		align-self: stretch;
	}
}

/* Side-by-side desktop (home ≥1200, service-parent ≥1024): swap the
   border-radius so the white card rounds only on its left edge and the
   orange form rounds only on its right edge — the two halves read as a
   single joined unit with no gap between them. */
@media (min-width: 1024px) {
	.hero[data-page="service-parent"] .hero-content__main {
		border-radius: 10px 0 0 10px;
	}
	.hero[data-page="service-parent"] .hero-form {
		border-radius: 0 10px 10px 0;
	}
}
@media (min-width: 1200px) {
	.hero[data-page="home"] .hero-content__main,
	.hero[data-page="franchisee-cpt"] .hero-content__main {
		border-radius: 10px 0 0 10px;
	}
	.hero[data-page="home"] .hero-form,
	.hero[data-page="franchisee-cpt"] .hero-form {
		border-radius: 0 10px 10px 0;
	}
}

/* ── Franchisee hero (task_0077 follow-up) + Contact (task_0109) + Commercial Quote (task_0112):
 *    explicit 50/50 split — equal-width white card + orange form at desktop. */
@media (min-width: 1024px) {
	.hero[data-page="franchisee-service"] .hero-content,
	.hero[data-page="contact"] .hero-content,
	.hero[data-page="commercial-quote"] .hero-content {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0;
		align-items: stretch;
		padding: 5rem 2rem 3rem;
		max-width: 1320px;
		margin: 0 auto;
	}
	.hero[data-page="franchisee-service"] .hero-content__main,
	.hero[data-page="contact"] .hero-content__main,
	.hero[data-page="commercial-quote"] .hero-content__main {
		border-radius: 10px 0 0 10px;
	}
	.hero[data-page="franchisee-service"] .hero-form,
	.hero[data-page="contact"] .hero-form,
	.hero[data-page="commercial-quote"] .hero-form {
		border-radius: 0 10px 10px 0;
		align-self: stretch;
	}
}

/* ── PPC landing hero (page-adwords.php) — task_0093 ─────────── */

@media (min-width: 1024px) {
	.hero[data-page="ppc-landing"] .hero-content {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0;
		align-items: stretch;
		padding: 5rem 2rem 3rem;
		max-width: 1320px;
		margin: 0 auto;
	}
	.hero[data-page="ppc-landing"] .hero-content__main {
		border-radius: 10px 0 0 10px;
	}
	.hero[data-page="ppc-landing"] .hero-form {
		border-radius: 0 10px 10px 0;
		align-self: stretch;
	}
}

/* Intro paragraph(s) inside the white card — replaces the legacy
   `.ppc_info` <p> block; keeps prose readable inside the pill. */
.hero-ppc-intro {
	margin: 0;
	color: inherit;
	line-height: 1.5;
	font-size: .9375rem;
}
.hero-ppc-intro > * + * {
	margin-top: .5rem;
}
.hero-ppc-intro p {
	margin: 0 0 .5rem;
}
.hero-ppc-intro p:last-child {
	margin-bottom: 0;
}

/* ── PPC landing — form polish + body contrast — task_0094 ─────── */

/* Hide form 5751's built-in `.ppc_form_title` since we render our own
   `.hero-form__heading` above the shortcode call. */
.hero[data-page="ppc-landing"] .hero-form .ppc_form_title {
	display: none;
}

/* Form 5751 inputs in 2 columns at desktop, 1 at narrow mobile.
   The form template wraps each input in `.ppc_input`; full-width
   fields (service select, message textarea, submit, sms consent)
   are wrapped in `.ppc_input_full`. */
.hero[data-page="ppc-landing"] .hero-form .form_ppc {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .65rem .75rem;
	align-items: start;
}
.hero[data-page="ppc-landing"] .hero-form .ppc_input {
	margin: 0;
	min-width: 0;
}
.hero[data-page="ppc-landing"] .hero-form .ppc_input_full {
	grid-column: 1 / -1;
	margin: 0;
	min-width: 0;
}




.hero-service-phone a{
	display: inline-block;
	background-color: #f46f0c;
	color: #fff;
	padding: 5px 15px;
	border-radius: 8px;
}

.hero-service-phone a:hover{
	color: #fff;
}


@media (max-width: 580px) {

	.page-template-page-adwords{
		
		.ppc_header_book{
			display: block !important;
			padding: .5rem 1rem !important;
			position: fixed;
			top: 10px;
			right: 15px;
		}

		.site-nav__hamburger{
			display: none !important;
		}
		

	}
	
	.hero-content {
			padding: 0;
		}

		.hero-content h1{
			padding-bottom: 0;
			margin-bottom: 0;
			font-size: 28px;
		}

		

}


@media (max-width: 480px) {
	.hero[data-page="ppc-landing"] .hero-form .form_ppc {
		grid-template-columns: 1fr;
	}
}

/* Input / textarea / select: white card-style appearance matching
   the other hero forms. Overrides ppc.css's legacy dark styling. */
.hero[data-page="ppc-landing"] .hero-form input[type="text"],
.hero[data-page="ppc-landing"] .hero-form input[type="email"],
.hero[data-page="ppc-landing"] .hero-form input[type="tel"],
.hero[data-page="ppc-landing"] .hero-form input[type="number"],
.hero[data-page="ppc-landing"] .hero-form select,
.hero[data-page="ppc-landing"] .hero-form textarea {
	background: var(--c-white);
	color: var(--c-dark);
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 7px;
	padding: .55rem .8rem;
	width: 100%;
	font-size: .9375rem;
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.hero[data-page="ppc-landing"] .hero-form textarea {
	height: 4.5rem;
	min-height: 4.5rem;
	max-height: 10rem;
	resize: vertical;
}

/* sms_consent + form_clear + response-output are direct `.form_ppc` grid
   children — force them to span both columns so the consent label and any
   CF7 feedback message aren't stuck at 50% width. */
.hero[data-page="ppc-landing"] .hero-form .sms_consent,
.hero[data-page="ppc-landing"] .hero-form .form_clear,
.hero[data-page="ppc-landing"] .hero-form .wpcf7-response-output {
	grid-column: 1 / -1;
}
.hero[data-page="ppc-landing"] .hero-form input::placeholder,
.hero[data-page="ppc-landing"] .hero-form textarea::placeholder,
.hero[data-page="ppc-landing"] .hero-form select:invalid {
	color: rgba(0, 0, 0, .55);
}
.hero[data-page="ppc-landing"] .hero-form input:focus,
.hero[data-page="ppc-landing"] .hero-form select:focus,
.hero[data-page="ppc-landing"] .hero-form textarea:focus {
	outline: none;
	border-color: var(--c-orange-brand);
	box-shadow: 0 0 0 3px rgba(244, 111, 12, .25);
}

/* Submit button — dark CTA matching the other hero forms. */
.hero[data-page="ppc-landing"] .hero-form .wpcf7-submit {
	background: var(--c-dark) !important;
	color: var(--c-white) !important;
	border: 0 !important;
	border-radius: 8px;
	padding: .85rem 1rem;
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	cursor: pointer;
	width: 100%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hero[data-page="ppc-landing"] .hero-form .wpcf7-submit:hover,
.hero[data-page="ppc-landing"] .hero-form .wpcf7-submit:focus {
	background: #000 !important;
	color: var(--c-white) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
	outline: none;
}

/* sms_consent: legible on the orange card. */
.hero[data-page="ppc-landing"] .hero-form .sms_consent,
.hero[data-page="ppc-landing"] .hero-form .sms_consent .wpcf7-list-item-label {
	color: var(--c-white);
}

/* ── PPC body sections — legacy contrast fix ─────────────────────
 * `.customLanding > .testimonials` and review-item blocks render legacy
 * markup that becomes black-on-black after body.page-template-page-adwords
 * is painted dark in 0093. Bring them onto a white panel so they're
 * readable until the full body rebuild lands. */

.customLanding .testimonials {
	background: var(--c-white);
	color: var(--c-dark);
	padding: 3rem 1rem;
}
.customLanding .testimonials h2 {
	color: var(--c-dark);
	text-align: center;
	margin: 0 0 1.5rem;
}
.customLanding .testimonials h2 span {
	color: var(--c-orange-brand) !important;
}
.customLanding .review-item {
	background: rgba(0, 0, 0, .03);
	color: var(--c-dark);
	padding: 1rem 1.25rem;
	border-radius: 8px;
	margin-bottom: 1rem;
}
.customLanding .review-item .review-author,
.customLanding .review-item .review-text,
.customLanding .review-item p {
	color: var(--c-dark);
}
.customLanding .review-item .review-author {
	font-weight: 700;
}
.customLanding .review-stars .star,
.customLanding .review-item .star {
	color: var(--c-orange-brand);
}

/* Custom content section also legacy — same readability fix. */
.customLanding .custom_content {
	background: var(--c-white);
	color: var(--c-dark);
	padding: 3rem 1rem;
}
.customLanding .custom_content h2,
.customLanding .custom_content h3,
.customLanding .custom_content h4,
.customLanding .custom_content h5,
.customLanding .custom_content p,
.customLanding .custom_content li {
	color: var(--c-dark);
}
.customLanding .custom_content h5 .orange {
	color: var(--c-orange-brand);
}

/* `.bottom_sec` — the "OUR TECHNICIANS ARE UNIFORMED..." block (task_0096).
   Same legacy-section contrast pattern as `.testimonials` and `.custom_content`
   above. Scoped under `.customLanding` so it only affects PPC (other templates
   that also ship `.bottom_sec` — single-work, page-city, etc. — remain unaffected). */
.customLanding .bottom_sec {
	background: var(--c-white);
	color: var(--c-dark);
	padding: 2rem 1rem;
}
.customLanding .bottom_sec h5 {
	color: var(--c-dark);
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
	margin: 0 0 1rem;
}
.customLanding .bottom_sec .orange {
	color: var(--c-orange-brand);
}
.customLanding .bottom_sec p {
	color: var(--c-dark);
	line-height: 1.55;
	margin: 0 0 1rem;
}
.customLanding .bottom_sec .video-container {
	margin-top: 1.5rem;
}

/* `.customLanding > .container` — catches the dynamic per-service content
   emitted by add_ppc_content_section() in functions.php. The function
   outputs a raw <div class="container"> with no scope class; everything
   else inside .customLanding is wrapped in a named <section>, so this
   selector reaches only the dynamic block. Task_0097 / inverted in 0098
   per owner direction — dark panel between the white testimonials/bottom_sec
   sections for visual rhythm. */
.customLanding > .container {
	background: var(--c-dark);
	color: var(--c-white);
	padding: 3rem 1.25rem;
	max-width: 1320px;
	margin: 0 auto;
}
.customLanding > .container h2,
.customLanding > .container h3,
.customLanding > .container h4,
.customLanding > .container h5 {
	color: var(--c-white);
}
.customLanding > .container p,
.customLanding > .container li,
.customLanding > .container td {
	color: var(--c-white);
}
.customLanding > .container .table,
.customLanding > .container .table-bordered {
	border-color: rgba(255, 255, 255, .18);
	color: var(--c-white);
}
.customLanding > .container .table-bordered td,
.customLanding > .container .table-bordered th {
	border-color: rgba(255, 255, 255, .18);
}
.customLanding > .container .table-light,
.customLanding > .container .table-light th {
	background: rgba(255, 255, 255, .06);
	color: var(--c-white);
}
.customLanding > .container .list-group-item,
.customLanding > .container .list-group-flush .list-group-item {
	background: transparent;
	border-color: rgba(255, 255, 255, .14);
	color: var(--c-white);
}
.customLanding > .container a {
	color: var(--c-orange-brand);
}
.customLanding > .container a:hover,
.customLanding > .container a:focus-visible {
	color: var(--c-orange-shade);
}

/* Heading sizing + tight rhythm for the dark dynamic block — task_0099.
   The function emits `<h2 class="mb-4">`, `<h2 class="mt-5 mb-3">`, etc.
   Bootstrap utility margins push prose far from headings; reset both
   sides and use sibling combinators for natural spacing after content. */
.customLanding > .container h2 {
	font-size: 1.625rem;
	line-height: 1.2;
	font-weight: 800;
	margin: 0 0 .5rem;
	color: var(--c-orange-brand);
}
.customLanding > .container h3 {
	font-size: 1.25rem;
	line-height: 1.25;
	font-weight: 700;
	margin: 1.25rem 0 .5rem;
	color: var(--c-orange-brand);
}
.customLanding > .container h4 {
	font-size: 1.0625rem;
	line-height: 1.3;
	font-weight: 700;
	margin: 1rem 0 .4rem;
}
.customLanding > .container p {
	margin: 0 0 .85rem;
	line-height: 1.55;
}
.customLanding > .container p + h2,
.customLanding > .container p + h3,
.customLanding > .container ul + h2,
.customLanding > .container ul + h3,
.customLanding > .container table + h2,
.customLanding > .container table + h3,
.customLanding > .container .table-responsive + h2,
.customLanding > .container .table-responsive + h3 {
	margin-top: 1.75rem;
}
@media (min-width: 768px) {
	.customLanding > .container h2 { font-size: 1.875rem; }
	.customLanding > .container h3 { font-size: 1.375rem; }
}

/* ── Commercial Quote hero — task_0112 ─────────────────────────────
 * White-card intro paragraph + bulleted "why us" points alongside
 * the orange form on the right. */

.hero-commercial-quote__intro {
	margin: 0 0 1rem;
	color: var(--c-dark);
	font-size: 1rem;
	line-height: 1.55;
}

.hero-commercial-quote__intro p {
	margin: 0 0 .75rem;
}

.hero-commercial-quote__intro p:last-child {
	margin-bottom: 0;
}

.hero-commercial-quote__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.hero-commercial-quote__points li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--c-dark);
	font-size: .9375rem;
	line-height: 1.45;
}

.hero-commercial-quote__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-orange-brand);
}

@media (min-width: 768px) {
	.hero-commercial-quote__intro {
		font-size: 1.0625rem;
	}
	.hero-commercial-quote__points li {
		font-size: 1rem;
	}
}

.hero-commercial-quote__visual {
	margin: 1.5rem auto 0;
	max-width: 220px;
	text-align: center;
}

.hero-commercial-quote__visual img {
	width: 100%;
	height: auto;
	display: block;
}

@media (min-width: 1024px) {
	.hero-commercial-quote__visual {
		margin-top: 2rem;
		max-width: 260px;
	}
}