/*
 * Base type rules use :where() so they sit at (0,1,1) and never out-rank
 * component rules like .faq-intro p — the page layer is a floor, not a cap.
 *
 * Shared page layer for ALL page families (loaded site-wide with the
 * template CSS): base type on main.bhc-main, section shells, buttons —
 * plus the front-page sections (front-page.php + parts/sections/*).
 * Mobile-first, everything from tokens.css. Section rhythm: generous
 * block padding, alternating paper/surface backgrounds per the capture.
 */

main.bhc-main {
	font-family: var(--bhc-font-body);
	color: var(--bhc-color-ink);
	font-size: var(--bhc-size-body);
	line-height: 1.7;
}

main.bhc-main :where(h2) {
	margin: 0 0 var(--bhc-space-1);
	color: var(--bhc-color-heading);
	font-size: var(--bhc-size-h2);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

main.bhc-main :where(h3) {
	margin: 0 0 var(--bhc-space-1);
	color: var(--bhc-color-heading);
	font-size: var(--bhc-size-h3);
	font-weight: 600;
	line-height: 1.3;
}

main.bhc-main :where(p) {
	margin: 0 0 var(--bhc-space-2);
	color: var(--bhc-color-muted);
}

main.bhc-main :where(p:last-child) {
	margin-bottom: 0;
}

/* ---- Shared section shell ---- */

.home-section {
	padding: var(--bhc-space-5) var(--bhc-space-2);
	background: var(--bhc-color-paper);
}

.home-section--tint {
	background: var(--bhc-color-surface);
}

/* ---- Section head (parts/section-head.php) ---- */

/*
 * Kicker + title + optional subheading + sub. Centered by default; the
 * --left modifier is the only alignment switch. Titles span the section,
 * subs sit in the prose measure. The sub carries the gap to the section
 * content; a title-only head leaves the content's own top margin in charge.
 * Element rules are scoped to .section-head (0,2,0) so a later section rule
 * of equal weight wins.
 */
.section-head {
	text-align: center;
}

.section-head--left {
	text-align: left;
}

.section-head .section-head__kicker {
	margin: 0 0 var(--bhc-space-1);
	color: var(--bhc-color-brand-dark);
	font-size: var(--bhc-size-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.section-head .section-head__title {
	margin: 0 0 var(--bhc-space-1);
	color: var(--bhc-color-heading);
	font-size: var(--bhc-size-h2);
	font-weight: 700;
	line-height: 1.25;
	text-align: inherit;
}

.section-head h1.section-head__title {
	font-size: var(--bhc-size-h1);
	line-height: 1.15;
}

.section-head .section-head__subheading {
	margin: 0 0 var(--bhc-space-1);
	color: var(--bhc-color-ink);
	font-size: var(--bhc-size-lead);
	font-weight: 600;
	line-height: 1.3;
	text-align: inherit;
}

.section-head .section-head__sub {
	max-width: var(--bhc-maxw-prose);
	margin: 0 auto var(--bhc-space-4);
	font-size: var(--bhc-size-lead);
}

.section-head--left .section-head__sub {
	margin-inline: 0;
}

main.bhc-main .home-section__cta {
	margin: var(--bhc-space-4) 0 0;
	text-align: center;
}

/* Buttons: .btn / .btn--lg / .btn--ghost live in buttons.css (site-wide). */

main.bhc-main a:focus-visible {
	outline: 2px solid var(--bhc-color-brand);
	outline-offset: 2px;
}

/* ---- 1. Hero ---- */

.hero {
	position: relative;
	overflow: hidden;
	padding: var(--bhc-space-5) var(--bhc-space-2);
	background: var(--bhc-color-surface);
}

.hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.16;
}

.hero__inner {
	position: relative;
	max-width: var(--bhc-maxw-wide);
	margin-inline: auto;
}

.hero__title {
	margin: 0 0 var(--bhc-space-1);
	color: var(--bhc-color-heading);
	font-size: var(--bhc-size-h1);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
}

.hero .hero__subtitle {
	margin: 0 0 var(--bhc-space-3);
	color: var(--bhc-color-muted);
	font-size: var(--bhc-size-lead);
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
}

.hero__card {
	max-width: var(--bhc-maxw-mid);
	margin-inline: auto;
	padding: var(--bhc-space-3);
	background: var(--bhc-color-paper);
	border: 1px solid var(--bhc-color-line);
	border-radius: var(--bhc-radius);
	box-shadow: var(--bhc-shadow-card);
}

.hero__fallback {
	text-align: center;
}

.hero__fallback p {
	margin-bottom: var(--bhc-space-2);
	color: var(--bhc-color-ink);
	font-size: var(--bhc-size-lead);
}

.hero .hero__tagline {
	margin: var(--bhc-space-3) 0 0;
	color: var(--bhc-color-muted);
	font-size: var(--bhc-size-small);
	text-align: center;
}

.hero .hero__disclaimer {
	max-width: 80%;
	margin: var(--bhc-space-2) auto 0;
	color: var(--bhc-color-label);
	font-size: var(--bhc-size-fine);
	text-align: center;
}

.hero__disclaimer a {
	color: inherit;
	text-decoration: underline;
}

.hero__quotes {
	display: grid;
	gap: var(--bhc-space-3);
	max-width: var(--bhc-maxw-mid);
	margin: var(--bhc-space-4) auto 0;
}

.hero__quote {
	margin: 0;
}

.hero__stars {
	display: block;
	margin-bottom: var(--bhc-space-1);
	color: var(--bhc-color-accent);
	font-size: var(--bhc-size-lead);
	letter-spacing: 0.15em;
}

.hero__quote blockquote {
	margin: 0 0 var(--bhc-space-1);
	color: var(--bhc-color-ink);
	font-size: var(--bhc-size-small);
	line-height: 1.65;
}

.hero__quote figcaption {
	color: var(--bhc-color-label);
	font-size: var(--bhc-size-small);
	font-weight: 600;
}

/* ---- 2. Trust badges ---- */

.trust {
	padding: var(--bhc-space-3) var(--bhc-space-2);
	background: var(--bhc-color-paper);
	border-bottom: 1px solid var(--bhc-color-line);
}

.trust__list {
	display: flex;
	flex-direction: column;
	gap: var(--bhc-space-2);
	align-items: center;
	justify-content: center;
	max-width: var(--bhc-maxw-wide);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.trust__item {
	display: inline-flex;
	gap: 0.625rem;
	align-items: center;
	color: var(--bhc-color-heading);
	font-size: var(--bhc-size-lead);
	font-weight: 700;
}

.trust__check {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--bhc-color-brand);
	color: var(--bhc-color-on-accent);
}

/* ---- 3. Intro + review badge ---- */

.intro__inner {
	display: grid;
	gap: var(--bhc-space-4);
	max-width: var(--bhc-maxw-wide);
	margin-inline: auto;
}

.intro__badge {
	align-self: start;
	padding: var(--bhc-space-3);
	background: var(--bhc-color-surface);
	border-radius: var(--bhc-radius);
	text-align: center;
}

.intro__badge h3 {
	margin-bottom: var(--bhc-space-2);
	font-size: var(--bhc-size-h4);
}

.intro__badge img {
	max-width: 100%;
	height: auto;
}

/* ---- 4. How it works ---- */

.how__steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bhc-space-4) var(--bhc-space-3);
	justify-content: center;
	max-width: var(--bhc-maxw-wide);
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: center;
}

.how__step {
	flex: 1 1 100%;
	max-width: 360px;
}

.how__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--bhc-space-2);
	border-radius: 50%;
	background: var(--bhc-color-brand);
	color: var(--bhc-color-on-accent);
	font-size: 1.375rem;
	font-weight: 700;
}

.how__step h3 {
	font-size: var(--bhc-size-h4);
}

.how__step p {
	font-size: var(--bhc-size-small);
	line-height: 1.7;
}

/* ---- 5. Services grid ---- */

.services__grid {
	display: grid;
	gap: var(--bhc-space-3);
	max-width: var(--bhc-maxw-wide);
	margin-inline: auto;
}

.services__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bhc-color-paper);
	border: 1px solid var(--bhc-color-line);
	border-radius: var(--bhc-radius);
}

.services__media {
	display: block;
}

.services__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 400 / 284;
	object-fit: cover;
}

.services__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--bhc-space-3);
}

.services__body h3 {
	font-size: var(--bhc-size-h4);
}

.services__body h3 a {
	color: inherit;
	text-decoration: none;
}

.services__body h3 a:hover {
	color: var(--bhc-color-brand-dark);
}

.services__body p {
	flex: 1;
	margin-bottom: var(--bhc-space-3);
	font-size: var(--bhc-size-small);
	line-height: 1.7;
}

/* ---- 6. Benefits ---- */

.benefits__grid {
	display: grid;
	gap: var(--bhc-space-4) var(--bhc-space-5);
	max-width: var(--bhc-maxw-mid);
	margin-inline: auto;
	text-align: center;
}

.benefits__item h3 {
	font-size: var(--bhc-size-h4);
}

/* ---- 7. Reviews ---- */

.reviews__embed {
	max-width: var(--bhc-maxw-mid);
	margin-inline: auto;
}

.reviews__more {
	color: var(--bhc-color-brand-dark);
	font-weight: 700;
	text-decoration: underline;
}

/* ---- 8. Join the club ---- */

.club {
	text-align: center;
}

.club__form {
	max-width: 480px;
	margin: 0 auto var(--bhc-space-2);
}

.club .section-head__sub {
	margin-bottom: 0;
}

.club .home-section__cta {
	margin-top: var(--bhc-space-3);
}

/* ---- 9. Guarantee ---- */

.guarantee__inner {
	display: flex;
	flex-direction: column;
	gap: var(--bhc-space-3);
	align-items: center;
	max-width: var(--bhc-maxw-prose);
	margin-inline: auto;
	text-align: center;
}

.guarantee__badge {
	flex: none;
	width: 150px;
	height: auto;
}

/* ---- 10. Service area ---- */

.area {
	background: var(--bhc-color-paper);
	border-top: 1px solid var(--bhc-color-line);
}

.area__map {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
}

.area__copy {
	max-width: var(--bhc-maxw-prose);
	margin-inline: auto;
	padding: var(--bhc-space-4) var(--bhc-space-2);
	text-align: center;
}

.area__copy .section-head__title {
	font-size: var(--bhc-size-h3);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.area__copy p {
	font-size: var(--bhc-size-small);
	line-height: 1.9;
}

/* ---- 11. FAQs ---- */

.faqs__inner {
	max-width: var(--bhc-maxw-prose);
	margin-inline: auto;
}

/* Title margin (space-1) and this collapse to space-3 below the heading. */
.faqs__list {
	margin-top: var(--bhc-space-3);
}

.faqs__item {
	border-bottom: 1px solid var(--bhc-color-line);
}

.faqs__question {
	position: relative;
	padding: var(--bhc-space-2) var(--bhc-space-4) var(--bhc-space-2) 0;
	color: var(--bhc-color-heading);
	font-size: var(--bhc-size-h4);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.faqs__question::-webkit-details-marker {
	display: none;
}

.faqs__question::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0.25rem;
	color: var(--bhc-color-label);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-50%);
}

.faqs__item[open] > .faqs__question::after {
	content: "\2212";
}

.faqs__question:hover,
.faqs__question:focus-visible {
	color: var(--bhc-color-brand-dark);
}

.faqs__question:focus-visible {
	outline: 2px solid var(--bhc-color-brand);
	outline-offset: 2px;
}

.faqs__answer {
	padding: 0 0 var(--bhc-space-3);
}

.faqs__answer a {
	color: var(--bhc-color-brand-dark);
}

/* ---- 12. Final CTA ---- */

.final-cta .section-head__sub {
	margin-bottom: 0;
}

.final-cta .home-section__cta {
	margin-top: var(--bhc-space-3);
}

/* ---- Tablet and up ---- */

@media (min-width: 640px) {
	.trust__list {
		flex-direction: row;
		gap: var(--bhc-space-2) var(--bhc-space-5);
	}

	.hero__quotes {
		grid-template-columns: 1fr 1fr;
		gap: var(--bhc-space-4);
	}

	.services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.benefits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.guarantee__inner {
		flex-direction: row;
		text-align: left;
	}

	.guarantee__copy .section-head {
		text-align: left;
	}

	.how__step {
		flex-basis: 320px;
	}
}

/* ---- Desktop ---- */

@media (min-width: 981px) {
	.home-section {
		padding-block: var(--bhc-space-6);
	}

	.hero {
		padding-block: var(--bhc-space-6);
	}

	.intro__inner {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: var(--bhc-space-5);
	}

	.intro--no-badge .intro__inner {
		grid-template-columns: minmax(0, var(--bhc-maxw-prose));
		justify-content: center;
	}

	.services__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.area {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}

	.area__map {
		height: 100%;
		min-height: 360px;
	}

	.area__copy {
		padding: var(--bhc-space-5) var(--bhc-space-4);
	}
}

/* ---- Page head (shared by marketing + convert families) ---- */

main.bhc-main .page-head {
	padding-bottom: var(--bhc-space-3);
}

/* Page heads use the section-head part with tag => 'h1'. What follows a
   page head (form card, contents list) brings its own top margin. */
.page-head .section-head__sub {
	margin-bottom: 0;
}

/* Left-aligned page heads sit in the wide container. */
.page-head__inner {
	max-width: var(--bhc-maxw-wide);
	margin-inline: auto;
}

/* ---- Newsletter signup band (shared pre-footer) ---- */

/*
 * Brand-green band, per prod's Connect With Us: breaks the run of light
 * sections before the footer. Form input stays paper-white; the orange
 * submit reads cleanly on the green.
 */
.newsletter {
	background: var(--bhc-color-brand-dark);
}

.newsletter__inner {
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
}

.newsletter .newsletter__heading {
	margin: 0 0 var(--bhc-space-1);
	font-size: var(--bhc-size-h2);
	color: var(--bhc-color-on-accent);
}

.newsletter .newsletter__sub {
	margin: 0 0 var(--bhc-space-3);
	color: rgba(255, 255, 255, 0.85);
}

/*
 * Secondary submit on the brand band: orange stays reserved for primary
 * CTAs, so the GF button takes the .btn--inverse spec (paper on brand)
 * through the documented --gf-ctrl-btn-* API.
 */
.newsletter .gform-theme.gform-theme--framework {
	--gf-ctrl-btn-bg-color-primary: var(--bhc-color-paper);
	--gf-ctrl-btn-bg-color-hover-primary: var(--bhc-color-surface);
	--gf-ctrl-btn-color-primary: var(--bhc-color-brand-dark);
	--gf-ctrl-btn-color-hover-primary: var(--bhc-color-brand-dark);
}