/*!
 * YouHealthGroup — front-end styles
 * Author: Selman Selman @ Engineered Leads (https://engineeredleads.ca)
 *
 * Mobile-first. Colour tokens are injected from theme settings as CSS custom
 * properties in inc/enqueue.php; the fallbacks below keep the file usable on its own.
 */

/* ============================================================ 1. Tokens */
:root {
	/* Brand palette sampled from the You Health Group logo. */
	--yhg-primary: #0048B0;      /* logo royal blue — 8.2:1 on white */
	--yhg-primary-d: #003A8F;
	--yhg-primary-l: #E9F0FB;
	--yhg-teal: #F5B324;         /* logo gold, used for icon accents */
	--yhg-accent: #F5B324;       /* logo gold — CTA fill */
	--yhg-accent-d: #E0A014;
	--yhg-accent-ink: #0A2E63;   /* navy on gold = 7.1:1, comfortably AA */
	--yhg-ink: #0F1B2E;
	--yhg-muted: #52617A;
	--yhg-bg: #FFFFFF;
	--yhg-bg-alt: #F4F7FC;
	--yhg-border: #DCE4F0;
	--yhg-success: #12805C;
	--yhg-danger: #B32D0F;
	--yhg-radius: 16px;
	--yhg-radius-sm: 10px;
	--yhg-radius-lg: 24px;
	--yhg-logo-h: 44px;
	--yhg-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--yhg-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--yhg-shadow-sm: 0 1px 2px rgba(15, 27, 36, .06), 0 1px 3px rgba(15, 27, 36, .05);
	--yhg-shadow: 0 4px 12px rgba(15, 27, 36, .07), 0 12px 28px rgba(15, 27, 36, .06);
	--yhg-shadow-lg: 0 12px 28px rgba(15, 27, 36, .10), 0 28px 64px rgba(15, 27, 36, .10);
	--yhg-wrap: 1180px;
	--yhg-narrow: 760px;
	--yhg-gap: clamp(1rem, 3vw, 2rem);
	--yhg-sec-y: clamp(3rem, 7vw, 5.5rem);
	--yhg-sticky-h: 74px;
}

/* ============================================================== 2. Base */
*,
*::before,
*::after { box-sizing: border-box; }

/**
 * The hidden attribute must always win.
 *
 * The UA stylesheet's [hidden] { display: none } sits at the bottom of the cascade,
 * so ANY author-level display declaration silently defeats it. The modal
 * (display: grid) and the form navigation buttons (display: inline-flex) are both
 * toggled via the hidden attribute from JavaScript, so without this reset they can
 * never be hidden — the quote modal would sit open over every page with a close
 * button that does nothing. Keep this rule.
 */
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--yhg-bg);
	color: var(--yhg-ink);
	font-family: var(--yhg-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

body.has-sticky-cta { padding-bottom: calc(var(--yhg-sticky-h) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 900px) {
	body.has-sticky-cta { padding-bottom: 0; }
}

h1, h2, h3, h4 {
	font-family: var(--yhg-font-heading);
	color: var(--yhg-ink);
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 5.2vw, 3.35rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--yhg-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
a:hover { color: var(--yhg-primary-d); }

img, svg, video { max-width: 100%; height: auto; display: block; }

:focus-visible {
	outline: 3px solid var(--yhg-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

hr { border: 0; border-top: 1px solid var(--yhg-border); margin: 2.5rem 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.yhg-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--yhg-ink);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 var(--yhg-radius-sm) 0;
}
.yhg-skip:focus { left: 0; color: #fff; }

/* =========================================================== 3. Layout */
.yhg-wrap {
	width: 100%;
	max-width: var(--yhg-wrap);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.yhg-wrap--narrow { max-width: var(--yhg-narrow); }

/*
 * Three visual acts, not ten stripes. Alternating the background on every band makes
 * a page read as a list of unrelated blocks; grouping it into a light act (hero →
 * carriers → coverage), a tinted act (how → quote → reviews) and a light act
 * (states → FAQ) lets it read as one argument with a beginning and an end.
 */
.yhg-section { padding-block: var(--yhg-sec-y); }
.yhg-section--tight { padding-block: clamp(1.75rem, 4vw, 3rem); }
.yhg-section--alt { background: var(--yhg-bg-alt); }

/* Consecutive bands in the same act share one continuous background. */
.yhg-section--alt + .yhg-section--alt { padding-top: 0; }

/* A strip is attached to what precedes it: no heading band, minimal air. */
.yhg-section--strip { padding-block: clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid var(--yhg-border); }
.yhg-strip__label {
	margin: 0 0 1rem;
	text-align: center;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--yhg-muted);
}

.yhg-hero__seals { margin-top: 1.5rem; }
.yhg-hero__seals .yhg-seals { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem; }
.yhg-hero__seals .yhg-seals__item { padding: .55rem .7rem; background: rgba(255, 255, 255, .7); }
.yhg-hero__seals .yhg-seals__text strong { font-size: .875rem; }
.yhg-hero__seals .yhg-seals__text span { font-size: .75rem; }

.yhg-sechead { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.yhg-sechead--center { text-align: center; max-width: 44rem; margin-inline: auto; }
.yhg-sechead__title { margin-bottom: .4em; }
.yhg-sechead__sub {
	color: var(--yhg-muted);
	font-size: 1.0625rem;
	max-width: 42rem;
	margin-inline: auto;
}
.yhg-sechead--left, .yhg-sechead--left .yhg-sechead__sub { text-align: left; margin-inline: 0; }

.yhg-minihead {
	font-size: 1.0625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--yhg-muted);
	margin-bottom: 1rem;
}

/* ========================================================== 4. Buttons */
.yhg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 56px;
	padding: .85rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--yhg-radius);
	font-family: var(--yhg-font-heading);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
	-webkit-tap-highlight-color: transparent;
}
.yhg-btn:hover { transform: translateY(-1px); }
.yhg-btn:active { transform: translateY(0); }
.yhg-btn__icon { flex: 0 0 auto; }
.yhg-btn--block { width: 100%; }

/*
 * Gold fill takes dark navy text, not white: white on this gold is about 1.8:1 and
 * fails badly. Navy on gold is 7.1:1 and matches how the logo itself is built.
 */
.yhg-btn--accent {
	background: var(--yhg-accent);
	color: var(--yhg-accent-ink);
	box-shadow: 0 6px 16px rgba(245, 179, 36, .35);
}
.yhg-btn--accent:hover { background: var(--yhg-accent-d); color: var(--yhg-accent-ink); box-shadow: 0 10px 22px rgba(245, 179, 36, .45); }

.yhg-btn--primary {
	background: var(--yhg-primary);
	color: #fff;
	box-shadow: 0 6px 16px rgba(14, 92, 138, .22);
}
.yhg-btn--primary:hover { background: var(--yhg-primary-d); color: #fff; }

.yhg-btn--outline {
	background: #fff;
	color: var(--yhg-primary);
	border-color: var(--yhg-primary);
}
.yhg-btn--outline:hover { background: var(--yhg-primary-l); color: var(--yhg-primary-d); border-color: var(--yhg-primary-d); }

.yhg-btn--ghost {
	background: transparent;
	color: var(--yhg-muted);
	border-color: var(--yhg-border);
	font-size: 1.0625rem;
	min-height: 52px;
}
.yhg-btn--ghost:hover { background: var(--yhg-bg-alt); color: var(--yhg-ink); }

.yhg-btn--plain {
	background: transparent;
	color: var(--yhg-primary);
	padding-inline: .25rem;
	min-height: auto;
}
.yhg-btn--plain:hover { color: var(--yhg-accent-d); background: transparent; }

/* Call button — label above, number below, number always visible. */
.yhg-call { text-align: left; }
.yhg-call__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.yhg-call__label {
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	opacity: .92;
}
.yhg-call__number { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.yhg-call__label { white-space: nowrap; }
.yhg-btn--plain .yhg-call__number { font-size: 1.0625rem; }
.yhg-call__sub {
	display: block;
	font-size: .875rem;
	color: var(--yhg-muted);
	margin-top: .5rem;
}

/*
 * When the line is answered, stated on the button itself.
 *
 * It inherits the button's colour at reduced opacity rather than taking the muted
 * grey: this sits INSIDE a filled accent button, where a fixed grey would fail
 * contrast against the accent. Kept off its own line height so the button does not
 * grow a third row's worth of space.
 */
.yhg-call__hours {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .01em;
	opacity: .82;
	white-space: nowrap;
	margin-top: .1rem;
}

.yhg-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.5rem;
}
.yhg-ctas--center { justify-content: center; }
.yhg-ctas--stack { flex-direction: column; }
.yhg-ctas .yhg-btn { flex: 1 1 15rem; }
.yhg-ctas__note {
	margin: .9rem 0 0;
	font-size: .9375rem;
	color: var(--yhg-muted);
}
.yhg-ctas--center + .yhg-ctas__note { text-align: center; }

@media (max-width: 520px) {
	.yhg-ctas .yhg-btn { flex: 1 1 100%; }
}

/* =========================================================== 5. Header */
.yhg-topbar {
	background: var(--yhg-primary-d);
	color: #fff;
	font-size: .875rem;
}
.yhg-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 38px;
	flex-wrap: wrap;
}
.yhg-topbar__msg,
.yhg-topbar__hours { margin: 0; display: flex; align-items: center; gap: .45rem; }
.yhg-topbar__hours { opacity: .82; }
.yhg-topbar__icon { flex: 0 0 auto; }

@media (max-width: 700px) {
	.yhg-topbar__hours { display: none; }
	.yhg-topbar__inner { justify-content: center; }
}

.yhg-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--yhg-border);
}
.yhg-header.is-stuck { box-shadow: var(--yhg-shadow-sm); }

.yhg-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 72px;
}

/* Shrinkable, not fixed: with flex: 0 0 auto the logo refused to give up width and
   pushed the call button and burger off the right edge of a 360px screen. min-width: 0
   is what actually lets a flex item go below its content size. */
.yhg-logo {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	text-decoration: none;
	color: var(--yhg-ink);
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
}
/* Scales down instead of being clipped by the overflow rule above — a cropped logo
   is worse than a small one. */
.yhg-logo img { max-height: var(--yhg-logo-h); width: auto; max-width: 100%; object-fit: contain; }
.yhg-logo__mark {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 12px;
	background: var(--yhg-primary);
	color: #fff;
}
.yhg-logo__text {
	font-family: var(--yhg-font-heading);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.025em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.yhg-logo__mark { flex: 0 0 auto; }

.yhg-nav { margin-left: auto; display: none; }
.yhg-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 1.4vw, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.yhg-nav__list a {
	color: var(--yhg-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: .9375rem;
	padding: .5rem 0;
	display: inline-block;
	white-space: nowrap;
}
.yhg-nav__list a:hover { color: var(--yhg-primary); }
.yhg-nav__list li { position: relative; }
.yhg-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 15rem;
	background: #fff;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius-sm);
	box-shadow: var(--yhg-shadow);
	padding: .5rem;
	list-style: none;
	margin: 0;
	display: none;
	z-index: 10;
}
.yhg-nav__list li:hover > .sub-menu,
.yhg-nav__list li:focus-within > .sub-menu { display: block; }
.yhg-nav__list .sub-menu a { padding: .55rem .75rem; border-radius: 8px; font-weight: 500; }
.yhg-nav__list .sub-menu a:hover { background: var(--yhg-primary-l); }

/* The header call button is visible at every width — a paid-traffic phone session
   must never be more than one thumb away from dialling. */
.yhg-header__actions { margin-left: auto; display: flex; gap: .6rem; align-items: center; }
.yhg-header__actions .yhg-btn { min-height: 50px; padding: .55rem 1rem; font-size: 1rem; white-space: nowrap; }
.yhg-header__actions .yhg-call__number { font-size: 1.0625rem; }
.yhg-header__actions .yhg-call__label { font-size: .6875rem; }
/* Hidden on phones, where the sticky bar carries Enroll instead. It reappears at
   900px — exactly where the sticky bar retires — so self-enrolment is reachable in
   one tap at every width without ever being in two places at once. */
.yhg-header__enroll { display: none; }

@media (min-width: 900px) {
	.yhg-header__enroll { display: inline-flex; }
}

@media (max-width: 1099px) {
	.yhg-header__call { min-height: 46px; padding: .45rem .8rem; }
	.yhg-header__call .yhg-call__label { display: none; }
	.yhg-header__call .yhg-call__number { font-size: 1rem; }
	/*
	 * The label already goes at this width because the header runs out of room; a third
	 * line would push it taller still and reintroduce the 360px overflow. Phones are not
	 * left guessing — the same hours note sits under every CTA group down the page.
	 */
	.yhg-header__call .yhg-call__hours { display: none; }
}

/* A 360px header cannot hold a brand mark, a full brand name, a phone number and a
   burger. The mark is the one that carries no information the name does not, so it is
   what goes — the name stays readable in full rather than truncating to "You H…". */
/* A 360px header cannot hold a brand mark, a full brand name, a phone number and a
   burger. The mark is the one that carries no information the name does not, so it is
   what goes — plus tighter gutters — and the name stays readable in full rather than
   truncating to "You H…". */
@media (max-width: 420px) {
	.yhg-logo__text { font-size: .875rem; }
	.yhg-logo__mark { display: none; }
	.yhg-logo img { max-height: 34px; }
	.yhg-header__inner { gap: .4rem; padding-inline: .625rem; }
	/* Matched on .yhg-header__actions too: the shared `.yhg-header__actions .yhg-btn`
	   rule outranks a lone .yhg-header__call, so a single-class override here is
	   silently ignored. */
	.yhg-header__actions .yhg-header__call { padding-inline: .5rem; }
	.yhg-header__call .yhg-call__number { font-size: .9375rem; }
	.yhg-header__inner .yhg-burger { width: 42px; height: 42px; }
}

.yhg-burger {
	margin-left: 0;
	display: inline-grid;
	place-items: center;
	width: 48px; height: 48px;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius-sm);
	background: #fff;
	color: var(--yhg-ink);
	cursor: pointer;
}

.yhg-mobilenav {
	border-top: 1px solid var(--yhg-border);
	background: #fff;
	padding: 1rem clamp(1rem, 4vw, 2rem) 1.5rem;
}
.yhg-mobilenav__list { list-style: none; margin: 0 0 1rem; padding: 0; }
.yhg-mobilenav__list a {
	display: block;
	padding: .85rem 0;
	border-bottom: 1px solid var(--yhg-border);
	color: var(--yhg-ink);
	font-weight: 600;
	text-decoration: none;
}
.yhg-mobilenav__list .sub-menu { list-style: none; margin: 0; padding-left: 1rem; }
.yhg-mobilenav__ctas { display: grid; gap: .6rem; }

/* The desktop nav needs room for the menu AND both header CTAs. At 1000px it did not
   have it: logo + nav + Enroll + Call ran 56px past the right edge and the whole page
   scrolled sideways. 1100px is where all four fit. Below it the menu collapses to the
   burger, which frees the width the two CTAs need. */
@media (min-width: 1100px) {
	.yhg-nav { display: block; }
	.yhg-header__actions { display: flex; }
	.yhg-burger { display: none; }
	.yhg-mobilenav { display: none !important; }
	.yhg-nav { margin-left: .75rem; }
	.yhg-header__actions { margin-left: auto; }
	/* There is room for the full brand name here, so the logo stops being the element
	   that gives way — otherwise the menu's margin alone truncated it at 1100px. */
	.yhg-logo { flex: 0 0 auto; }
}

@media (min-width: 1280px) {
	.yhg-nav { margin-left: 1.5rem; }
}

/* ============================================================= 6. Hero */
.yhg-hero {
	background:
		radial-gradient(120% 90% at 100% 0%, var(--yhg-primary-l) 0%, transparent 60%),
		linear-gradient(180deg, #fff 0%, var(--yhg-bg-alt) 100%);
	padding-block: clamp(2.25rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 5rem);
}
.yhg-hero__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.yhg-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: #fff;
	border: 1px solid var(--yhg-border);
	color: var(--yhg-primary);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .01em;
	padding: .45rem .85rem;
	border-radius: 999px;
	margin: 0 0 1.1rem;
	box-shadow: var(--yhg-shadow-sm);
}
.yhg-hero__title { margin-bottom: .55em; }
.yhg-hero__sub {
	font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
	color: var(--yhg-muted);
	max-width: 36rem;
	margin-bottom: 1.5rem;
}
.yhg-hero__bullets { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .6rem; }
.yhg-hero__bullets li { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; }
.yhg-hero__tick { color: var(--yhg-success); flex: 0 0 auto; margin-top: .2rem; }

.yhg-hero__alt { margin-top: 1.35rem; }
.yhg-hero__or {
	display: block;
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--yhg-muted);
	margin-bottom: .7rem;
}
.yhg-hero__altbtns { display: flex; flex-wrap: wrap; gap: .7rem; }
.yhg-hero__altbtns .yhg-btn { flex: 1 1 14rem; }

.yhg-hero__note {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin-top: 1.25rem;
	font-size: .9375rem;
	color: var(--yhg-muted);
}

/*
 * With no hero image the hero centres as a single column. Left-aligning a half-width
 * column against an empty right half reads as a broken layout, not a design choice.
 */
.yhg-hero__grid { grid-template-columns: 1fr; }

.yhg-hero:not(.yhg-hero--bg) .yhg-hero__grid:not(:has(.yhg-hero__visual)) .yhg-hero__copy {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}
.yhg-hero:not(.yhg-hero--bg) .yhg-hero__grid:not(:has(.yhg-hero__visual)) .yhg-hero__sub { margin-inline: auto; }
.yhg-hero:not(.yhg-hero--bg) .yhg-hero__grid:not(:has(.yhg-hero__visual)) .yhg-hero__bullets {
	display: inline-grid;
	text-align: left;
	justify-items: start;
}
.yhg-hero:not(.yhg-hero--bg) .yhg-hero__grid:not(:has(.yhg-hero__visual)) .yhg-zipform { text-align: left; }
.yhg-hero:not(.yhg-hero--bg) .yhg-hero__grid:not(:has(.yhg-hero__visual)) .yhg-hero__altbtns { justify-content: center; }
.yhg-hero:not(.yhg-hero--bg) .yhg-hero__grid:not(:has(.yhg-hero__visual)) .yhg-hero__note { justify-content: center; }

@media (min-width: 960px) {
	.yhg-hero__grid:has(.yhg-hero__visual) { grid-template-columns: 1.05fr .95fr; }
}

.yhg-hero__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--yhg-radius-lg);
	box-shadow: var(--yhg-shadow-lg);
}

/* ========================================================= 7. ZIP form */
.yhg-zipform {
	background: #fff;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius-lg);
	box-shadow: var(--yhg-shadow);
	padding: clamp(1.1rem, 3vw, 1.5rem);
}
.yhg-zipform__label {
	display: block;
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: .6rem;
}
.yhg-zipform__row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* The icon anchors to the input, so it stays centred no matter how the row wraps. */
.yhg-zipform__field {
	position: relative;
	display: flex;
	flex: 1 1 10rem;
	min-width: 0;
}
.yhg-zipform__icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	color: var(--yhg-muted);
	pointer-events: none;
}
.yhg-zipform__input {
	width: 100%;
	min-height: 56px;
	padding: .8rem 1rem .8rem 2.9rem;
	border: 2px solid var(--yhg-border);
	border-radius: var(--yhg-radius);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: .06em;
	background: #fff;
	color: var(--yhg-ink);
}
.yhg-zipform__input:focus { border-color: var(--yhg-primary); outline: none; box-shadow: 0 0 0 4px rgba(14, 92, 138, .14); }
.yhg-zipform__input.has-error { border-color: var(--yhg-danger); }
.yhg-zipform__btn { flex: 1 1 12rem; }
.yhg-zipform__note { margin: .8rem 0 0; font-size: .8125rem; color: var(--yhg-muted); }

@media (max-width: 560px) {
	/*
	 * Stacked layout. flex-basis resolves against the MAIN axis, so the 10rem/12rem
	 * bases above would become heights here and inflate both controls to ~160-190px.
	 */
	.yhg-zipform__row { flex-direction: column; }
	.yhg-zipform__field,
	.yhg-zipform__btn { flex: 0 0 auto; }
}

/* ============================================================ 8. Seals */
.yhg-seals {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: .75rem;
}
.yhg-seals__item {
	display: flex;
	align-items: center;
	gap: .65rem;
	background: #fff;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius-sm);
	padding: .75rem .9rem;
}
.yhg-seals__icon {
	display: grid; place-items: center;
	width: 36px; height: 36px;
	border-radius: 10px;
	background: var(--yhg-primary-l);
	color: var(--yhg-primary);
	flex: 0 0 auto;
}
.yhg-seals__text strong { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.25; }
.yhg-seals__text span { display: block; font-size: .8125rem; color: var(--yhg-muted); }
.yhg-sealsband { background: var(--yhg-bg-alt); }
.yhg-sealsband .yhg-seals { margin-top: 0; }

/* ========================================================= 9. Carriers */
.yhg-carriers__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1rem;
	align-items: center;
}
.yhg-carriers__item { display: grid; place-items: center; }
/*
 * Full colour. The desaturated "logo wall" look is a design convention, but these are
 * the carriers the agency actually writes — recognisable brand colour is the whole
 * point of showing them, so it stays on.
 */
.yhg-carriers__item img {
	max-height: 44px;
	width: auto;
	transition: transform .18s ease;
}
.yhg-carriers__item:hover img { transform: scale(1.04); }
.yhg-carriers__chip {
	display: block;
	width: 100%;
	text-align: center;
	background: #fff;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius-sm);
	padding: .8rem .6rem;
	font-weight: 700;
	font-size: .9375rem;
	color: var(--yhg-muted);
	letter-spacing: -.01em;
}
.yhg-carriers__note {
	margin: 1.25rem 0 0;
	font-size: .8125rem;
	color: var(--yhg-muted);
	text-align: center;
	max-width: 46rem;
	margin-inline: auto;
}

/* ===================================================== 10. Coverage cards */
.yhg-covgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: clamp(.85rem, 2vw, 1.35rem);
}
.yhg-covcard {
	background: #fff;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius);
	box-shadow: var(--yhg-shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	overflow: hidden;
}
.yhg-covcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--yhg-shadow);
	border-color: var(--yhg-primary);
}
.yhg-covcard__link {
	display: block;
	padding: clamp(1.15rem, 2.4vw, 1.6rem);
	text-decoration: none;
	color: inherit;
	height: 100%;
}
.yhg-covcard__media { display: block; margin: -1.6rem -1.6rem 1.1rem; }
.yhg-covcard__media img { width: 100%; height: 170px; object-fit: cover; }
.yhg-covcard__icon {
	display: grid; place-items: center;
	width: 52px; height: 52px;
	border-radius: 14px;
	background: var(--yhg-primary-l);
	color: var(--yhg-primary);
	margin-bottom: 1rem;
}
.yhg-covcard__title { font-size: 1.1875rem; margin-bottom: .4rem; }
.yhg-covcard__text { color: var(--yhg-muted); font-size: .9375rem; margin-bottom: 1rem; }
.yhg-covcard__more {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: var(--yhg-primary);
	font-weight: 700;
	font-size: .9375rem;
}
.yhg-covcard:hover .yhg-covcard__more { color: var(--yhg-accent-d); }

/* ============================================================ 11. Steps */
.yhg-steps {
	list-style: none;
	counter-reset: yhg-step;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}
.yhg-steps__item {
	position: relative;
	background: #fff;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius);
	padding: clamp(1.35rem, 3vw, 1.85rem);
	box-shadow: var(--yhg-shadow-sm);
}
.yhg-steps__num {
	position: absolute;
	top: -14px;
	left: clamp(1.35rem, 3vw, 1.85rem);
	display: grid; place-items: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--yhg-accent);
	color: #fff;
	font-weight: 800;
	font-size: .9375rem;
}
.yhg-steps__icon {
	display: grid; place-items: center;
	width: 52px; height: 52px;
	border-radius: 14px;
	background: var(--yhg-primary-l);
	color: var(--yhg-primary);
	margin: .5rem 0 1rem;
}
.yhg-steps__title { font-size: 1.1875rem; margin-bottom: .4rem; }
.yhg-steps__text { color: var(--yhg-muted); font-size: .9375rem; margin: 0; }

/* ======================================================= 12. Quote band */
.yhg-quoteband { background: linear-gradient(180deg, var(--yhg-bg-alt) 0%, #fff 100%); }
.yhg-quoteband__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.yhg-quoteband__title { margin-bottom: .4em; }
.yhg-quoteband__sub { color: var(--yhg-muted); font-size: 1.0625rem; }
.yhg-quoteband__alt { margin-top: 2rem; }
.yhg-quoteband__alt p { font-weight: 600; margin-bottom: .8rem; }
.yhg-quoteband__btns { display: flex; flex-wrap: wrap; gap: .7rem; }
.yhg-quoteband__btns .yhg-btn { flex: 1 1 14rem; }
/* Form ahead of the supporting copy on mobile — see the pagehero note below. */
.yhg-quoteband__support > :first-child { margin-top: 0; }

@media (min-width: 940px) {
	.yhg-quoteband__grid { grid-template-columns: 1fr 1fr; row-gap: 1.75rem; }
	.yhg-quoteband__copy { grid-column: 1; grid-row: 1; }
	.yhg-quoteband__support { grid-column: 1; grid-row: 2; }
	.yhg-quoteband__form { grid-column: 2; grid-row: 1 / span 2; }
}

/* =========================================================== 13. States */
.yhg-states {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: .6rem;
}
.yhg-states a {
	display: flex;
	align-items: center;
	gap: .45rem;
	background: #fff;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius-sm);
	padding: .8rem .9rem;
	color: var(--yhg-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: .9375rem;
	transition: border-color .16s ease, background .16s ease;
}
.yhg-states a:hover { border-color: var(--yhg-primary); background: var(--yhg-primary-l); color: var(--yhg-primary-d); }
.yhg-states__pin { color: var(--yhg-teal); flex: 0 0 auto; }
.yhg-states em { margin-left: auto; font-style: normal; font-size: .75rem; color: var(--yhg-muted); font-weight: 700; }
.yhg-states--compact { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.yhg-states--grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.yhg-states__all { margin: 1.5rem 0 0; text-align: center; }
.yhg-states__all a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }

/* ========================================================== 14. Reviews */
.yhg-reviews__agg {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	margin: -1rem 0 2rem;
	font-size: .9375rem;
	color: var(--yhg-muted);
	flex-wrap: wrap;
}
.yhg-reviews__agg strong { color: var(--yhg-ink); font-size: 1.0625rem; }
.yhg-stars { display: inline-flex; gap: .1rem; color: var(--yhg-border); }
.yhg-stars__s.is-on { color: #F5A524; }
.yhg-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: clamp(.85rem, 2vw, 1.35rem);
}
.yhg-review {
	margin: 0;
	background: #fff;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	box-shadow: var(--yhg-shadow-sm);
	display: flex;
	flex-direction: column;
	gap: .85rem;
}
.yhg-review__text { margin: 0; font-size: 1rem; line-height: 1.6; }
.yhg-review__by { margin-top: auto; font-size: .875rem; color: var(--yhg-muted); }
.yhg-review__by strong { display: block; color: var(--yhg-ink); font-size: .9375rem; }

/* ============================================================== 15. FAQ */
.yhg-faq { border-top: 1px solid var(--yhg-border); }
.yhg-faq__item { border-bottom: 1px solid var(--yhg-border); }
.yhg-faq__q { margin: 0; font-size: 1rem; }
.yhg-faq__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	background: none;
	border: 0;
	padding: 1.15rem 0;
	text-align: left;
	font-family: var(--yhg-font-heading);
	font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
	font-weight: 700;
	color: var(--yhg-ink);
	cursor: pointer;
	letter-spacing: -.01em;
}
.yhg-faq__btn:hover { color: var(--yhg-primary); }
.yhg-faq__chev { flex: 0 0 auto; color: var(--yhg-primary); transition: transform .2s ease; }
.yhg-faq__btn[aria-expanded="true"] .yhg-faq__chev { transform: rotate(180deg); }
.yhg-faq__a { padding-bottom: 1.25rem; }
.yhg-faq__inner { color: var(--yhg-muted); max-width: 62ch; }
.yhg-faq__after { margin-top: 2.5rem; text-align: center; }
.yhg-faq__after p { font-weight: 600; }

/* ======================================================= 16. Final CTA */
.yhg-finalcta {
	background: linear-gradient(135deg, var(--yhg-primary-d) 0%, var(--yhg-primary) 70%, #0A5FD8 140%);
	color: #fff;
	padding-block: var(--yhg-sec-y);
}
.yhg-finalcta__inner { text-align: center; max-width: 46rem; }
.yhg-finalcta__title { color: #fff; }
.yhg-finalcta__sub { color: rgba(255, 255, 255, .88); font-size: 1.0625rem; margin-bottom: 1.75rem; }
.yhg-finalcta__zip { max-width: 34rem; margin: 0 auto 1.5rem; }
.yhg-finalcta .yhg-ctas__note { color: rgba(255, 255, 255, .82); }
.yhg-finalcta .yhg-btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.yhg-finalcta .yhg-btn--outline:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
.yhg-finalcta .yhg-btn--primary { background: #fff; color: var(--yhg-primary-d); }
.yhg-finalcta .yhg-btn--primary:hover { background: var(--yhg-primary-l); color: var(--yhg-primary-d); }

/* ======================================================== 17. Prefooter */
.yhg-prefooter {
	background: var(--yhg-bg-alt);
	border-top: 1px solid var(--yhg-border);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.yhg-prefooter__inner { text-align: center; max-width: 46rem; }
.yhg-prefooter__title { margin-bottom: .35em; }
.yhg-prefooter__sub { color: var(--yhg-muted); }

/* =========================================================== 18. Footer */
.yhg-footer {
	background: var(--yhg-ink);
	color: rgba(255, 255, 255, .78);
	padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
	font-size: .9375rem;
}
.yhg-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.yhg-footer a:hover { color: #fff; text-decoration: underline; }
.yhg-footer .yhg-logo { color: #fff; }
.yhg-footer .yhg-logo__mark { background: rgba(255, 255, 255, .12); }

.yhg-footer__top {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.yhg-footer__about { margin: 1rem 0 1.25rem; max-width: 34rem; }
.yhg-footer__call { margin-bottom: 1.1rem; max-width: 20rem; }
.yhg-footer__numbers { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.yhg-footer__numbers span { color: rgba(255, 255, 255, .58); margin-right: .4rem; }
.yhg-footer__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }

.yhg-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.75rem;
}
.yhg-footer__coltitle {
	color: #fff;
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	margin-bottom: .85rem;
}
.yhg-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

@media (min-width: 900px) {
	.yhg-footer__top { grid-template-columns: 1.15fr 1.6fr; }
}

.yhg-legal {
	margin: 2rem 0 0;
	color: rgba(255, 255, 255, .55);
	font-size: .75rem;
	line-height: 1.6;
	display: grid;
	gap: .85rem;
}
.yhg-legal__p { margin: 0; max-width: 70rem; }
.yhg-legal a { color: rgba(255, 255, 255, .7); text-decoration: underline; }

.yhg-footer__license { font-size: .75rem; color: rgba(255, 255, 255, .55); margin-top: 1rem; }

.yhg-footer__bottom {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	font-size: .8125rem;
}
.yhg-footer__copy, .yhg-footer__dev { margin: 0; }
.yhg-legallinks { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.yhg-legallinks a { display: inline-flex; align-items: center; gap: .35rem; }
.yhg-privacyicon { display: inline-flex; color: rgba(255, 255, 255, .5); }
.yhg-credit { color: rgba(255, 255, 255, .55); }

/* ====================================================== 19. Sticky bar */
.yhg-stickybar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 70;
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: .5rem;
	padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--yhg-border);
	box-shadow: 0 -6px 20px rgba(15, 27, 36, .10);
}
.yhg-stickybar .yhg-btn {
	min-height: 54px;
	padding: .5rem .75rem;
	font-size: 1.0625rem;
	border-radius: var(--yhg-radius-sm);
}
.yhg-stickybar .yhg-call__number { font-size: 1.0625rem; }
.yhg-stickybar .yhg-call__label { font-size: .6875rem; }

/* Three actions at every phone width: call, quote, and self-enrolment. Enrolling
   online is a primary path, not an overflow item, so it never hides behind the
   burger menu. The icon is dropped and the type tightened to buy the third column
   its width — the 54px tap target is preserved. */
.yhg-stickybar { grid-template-columns: 1.3fr 1fr 1fr; }

/*
 * Without the call button the bar carries the quote and enrolment actions only, and
 * flex lets it sit correctly whether that is one button or two — a fixed column count
 * would leave a dead gap on a site with no enrolment link. The quote button is given
 * the greater share because it is the action the ads are bought for.
 */
.yhg-stickybar--nocall { display: flex; }
.yhg-stickybar--nocall .yhg-btn { flex: 1 1 0; min-width: 0; }
.yhg-stickybar--nocall .yhg-quote-open { flex: 1.7 1 0; }

@media (max-width: 559px) {
	.yhg-stickybar { gap: .4rem; padding-inline: .45rem; }
	.yhg-stickybar .yhg-btn { font-size: .9375rem; padding: .5rem .35rem; gap: .3rem; }
	.yhg-stickybar .yhg-call__number { font-size: .9375rem; }
	.yhg-stickybar .yhg-call__label { font-size: .625rem; }
	.yhg-stickybar .yhg-btn__icon { display: none; }
}

@media (min-width: 900px) {
	.yhg-stickybar { display: none; }
}

/*
 * Phones lead with the form, not the dialer.
 *
 * A call button repeated down the page — and pinned in the modal footer, where a thumb
 * rests — collects taps that were never an intention to call. A click-based call
 * conversion counts those exactly like real ones, so Smart Bidding learns to buy more
 * of whatever produced them. Desktop keeps every call CTA; the number stays in the
 * footer and on the Contact page on every screen size. Toggle: Settings -> Contact.
 */
body.yhg-no-call-cta .yhg-ctas .yhg-call,
body.yhg-no-call-cta .yhg-header__call,
body.yhg-no-call-cta .yhg-hero__altbtns .yhg-call,
body.yhg-no-call-cta .yhg-quoteband__btns .yhg-call,
body.yhg-no-call-cta .yhg-quotepage__altbtns .yhg-call,
body.yhg-no-call-cta .yhg-modal__foot { display: none; }

/* "or" only reads as a choice while there are two things to choose between. */
body.yhg-no-call-cta .yhg-hero__alt .yhg-hero__or { display: none; }

/*
 * On a phone, everything above the form is what stops the visitor reaching it.
 *
 * The heading earns its place — it confirms the ad's promise. Breadcrumbs and the
 * standfirst do not: the form ran past the bottom of the screen with them in, so a
 * visitor who arrived to fill it in had to scroll before they could start. Both stay
 * in the document for crawlers and for desktop, where there is room for them.
 */
@media (max-width: 899px) {
	.yhg-pagehero__copy .yhg-crumbs,
	.yhg-quotepage__copy .yhg-crumbs,
	.yhg-pagehero__copy .yhg-pagehero__sub,
	.yhg-quotepage__copy .yhg-quotepage__intro { display: none; }

	/* With the standfirst gone the heading no longer needs to hold space below it. */
	.yhg-pagehero__copy .yhg-pagehero__title,
	.yhg-quotepage__copy .yhg-quotepage__title { margin-bottom: 0; }
}

/* ========================================================== 20. Modal */
.yhg-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 1rem;
}
.yhg-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 27, 36, .55);
	backdrop-filter: blur(3px);
}
.yhg-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 36rem;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	background: #fff;
	border-radius: var(--yhg-radius-lg);
	box-shadow: var(--yhg-shadow-lg);
	padding: clamp(1.25rem, 3vw, 2rem);
	-webkit-overflow-scrolling: touch;
}
.yhg-modal__close {
	position: absolute;
	top: .75rem; right: .75rem;
	width: 42px; height: 42px;
	display: grid; place-items: center;
	background: var(--yhg-bg-alt);
	border: 1px solid var(--yhg-border);
	border-radius: 50%;
	color: var(--yhg-muted);
	cursor: pointer;
	z-index: 2;
}
.yhg-modal__close:hover { color: var(--yhg-ink); background: #fff; }
.yhg-modal__foot {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--yhg-border);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	font-size: .9375rem;
	color: var(--yhg-muted);
}
body.yhg-modal-open { overflow: hidden; }

/* ==================================================== 21. Quote form */
.yhg-formwrap {
	background: #fff;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius-lg);
	box-shadow: var(--yhg-shadow);
	padding: clamp(1.25rem, 3vw, 1.9rem);
}
.yhg-modal .yhg-formwrap { border: 0; box-shadow: none; padding: 0; }

.yhg-form__head { margin-bottom: 1.15rem; }
.yhg-form__title { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-bottom: .25em; }
.yhg-form__sub { color: var(--yhg-muted); font-size: .9375rem; margin: 0; }

.yhg-progress { margin-bottom: 1.5rem; }
.yhg-progress__track {
	height: 8px;
	background: var(--yhg-bg-alt);
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid var(--yhg-border);
}
.yhg-progress__fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--yhg-primary) 0%, var(--yhg-accent) 130%);
	border-radius: 999px;
	transition: width .3s cubic-bezier(.4, 0, .2, 1);
}
.yhg-progress__label {
	margin: .5rem 0 0;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--yhg-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.yhg-step { animation: yhg-fade .24s ease; }
.yhg-step__title { font-size: clamp(1.15rem, 2vw, 1.375rem); margin-bottom: .3em; }
.yhg-step__hint { color: var(--yhg-muted); font-size: .9375rem; margin-bottom: 1.15rem; }

@keyframes yhg-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

.yhg-field { margin-bottom: 1.1rem; }
.yhg-label {
	display: block;
	font-weight: 700;
	font-size: .9375rem;
	margin-bottom: .45rem;
}
.yhg-input {
	width: 100%;
	min-height: 54px;
	padding: .75rem .9rem;
	border: 2px solid var(--yhg-border);
	border-radius: var(--yhg-radius-sm);
	background: #fff;
	color: var(--yhg-ink);
	font-family: inherit;
	font-size: 1.0625rem;
}
.yhg-input:focus { border-color: var(--yhg-primary); outline: none; box-shadow: 0 0 0 4px rgba(14, 92, 138, .13); }
.yhg-input.has-error { border-color: var(--yhg-danger); background: #FEF6F4; }
select.yhg-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--yhg-muted) 50%), linear-gradient(135deg, var(--yhg-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 24px, calc(100% - 14px) 24px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.yhg-input--zip { font-size: 1.25rem; letter-spacing: .08em; font-weight: 600; }
.yhg-input--otp { font-size: 1.5rem; letter-spacing: .35em; text-align: center; font-weight: 700; }
.yhg-hint { display: block; margin-top: .4rem; font-size: .8125rem; color: var(--yhg-muted); }

.yhg-grid2 { display: grid; gap: 0 .8rem; }
@media (min-width: 480px) { .yhg-grid2 { grid-template-columns: 1fr 1fr; } }

.yhg-error {
	display: none;
	margin-top: .4rem;
	color: var(--yhg-danger);
	font-size: .875rem;
	font-weight: 600;
}
.yhg-error.is-visible { display: block; }

.yhg-form__error {
	display: none;
	margin: 0 0 1rem;
	padding: .85rem 1rem;
	background: #FEF6F4;
	border: 1px solid #F3C4B6;
	border-radius: var(--yhg-radius-sm);
	color: var(--yhg-danger);
	font-weight: 600;
	font-size: .9375rem;
}
.yhg-form__error.is-visible { display: block; }

/* Card and pill selectors — tap targets, never keyboard entry. */
.yhg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; }
.yhg-cardopt { position: relative; cursor: pointer; }
.yhg-cardopt input { position: absolute; opacity: 0; width: 0; height: 0; }
.yhg-cardopt__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .3rem;
	height: 100%;
	padding: .95rem;
	border: 2px solid var(--yhg-border);
	border-radius: var(--yhg-radius-sm);
	background: #fff;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.yhg-cardopt:hover .yhg-cardopt__inner { border-color: var(--yhg-primary); }
.yhg-cardopt input:checked + .yhg-cardopt__inner {
	border-color: var(--yhg-primary);
	background: var(--yhg-primary-l);
	box-shadow: 0 0 0 3px rgba(14, 92, 138, .12);
}
.yhg-cardopt input:focus-visible + .yhg-cardopt__inner { outline: 3px solid var(--yhg-accent); outline-offset: 2px; }
.yhg-cardopt__icon { color: var(--yhg-primary); }
.yhg-cardopt__label { font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.yhg-cardopt__desc { font-size: .8125rem; color: var(--yhg-muted); line-height: 1.4; }

.yhg-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.yhg-pill { position: relative; cursor: pointer; flex: 1 1 4rem; }
.yhg-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.yhg-pill span {
	display: grid;
	place-items: center;
	min-height: 54px;
	padding: .5rem .9rem;
	border: 2px solid var(--yhg-border);
	border-radius: var(--yhg-radius-sm);
	background: #fff;
	font-weight: 700;
	font-size: 1.0625rem;
	transition: border-color .15s ease, background .15s ease;
}
.yhg-pill:hover span { border-color: var(--yhg-primary); }
.yhg-pill input:checked + span { border-color: var(--yhg-primary); background: var(--yhg-primary-l); color: var(--yhg-primary-d); }
.yhg-pill input:focus-visible + span { outline: 3px solid var(--yhg-accent); outline-offset: 2px; }
.yhg-pills--yn .yhg-pill { flex: 1 1 8rem; max-width: 12rem; }

.yhg-list { display: grid; gap: .5rem; }
.yhg-listopt { position: relative; cursor: pointer; }
.yhg-listopt input { position: absolute; opacity: 0; width: 0; height: 0; }
.yhg-listopt span {
	display: block;
	padding: .9rem 1rem;
	border: 2px solid var(--yhg-border);
	border-radius: var(--yhg-radius-sm);
	background: #fff;
	font-weight: 600;
	font-size: .9375rem;
	transition: border-color .15s ease, background .15s ease;
}
.yhg-listopt:hover span { border-color: var(--yhg-primary); }
.yhg-listopt input:checked + span { border-color: var(--yhg-primary); background: var(--yhg-primary-l); }
.yhg-listopt input:focus-visible + span { outline: 3px solid var(--yhg-accent); outline-offset: 2px; }

.yhg-applicants { margin-top: 1rem; display: grid; gap: .75rem; }
.yhg-applicant {
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius-sm);
	padding: .9rem;
	background: var(--yhg-bg-alt);
}
.yhg-applicant__title { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--yhg-muted); margin-bottom: .6rem; }
.yhg-applicant__row { display: grid; gap: .6rem; }
@media (min-width: 460px) { .yhg-applicant__row { grid-template-columns: 1.3fr 1fr; } }
.yhg-applicant__row--single { grid-template-columns: 1fr !important; max-width: 16rem; }

.yhg-summary { margin-bottom: 1.1rem; display: grid; gap: .35rem; }
.yhg-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .55rem .75rem;
	background: var(--yhg-bg-alt);
	border-radius: 8px;
	font-size: .875rem;
}
.yhg-summary__row span { color: var(--yhg-muted); }
.yhg-summary__row strong { text-align: right; }

.yhg-consent {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	padding: .95rem;
	border: 2px solid var(--yhg-border);
	border-radius: var(--yhg-radius-sm);
	background: var(--yhg-bg-alt);
	cursor: pointer;
}
.yhg-consent:has(input:checked) { border-color: var(--yhg-primary); background: var(--yhg-primary-l); }
.yhg-consent input { width: 24px; height: 24px; flex: 0 0 auto; margin-top: .1rem; accent-color: var(--yhg-primary); cursor: pointer; }
.yhg-consent__text { font-size: .75rem; line-height: 1.55; color: var(--yhg-muted); }
.yhg-consent__text a { color: var(--yhg-primary); }

.yhg-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.yhg-form__nav { display: grid; gap: .6rem; margin-top: 1.5rem; }
.yhg-form__nav .yhg-form__back { order: 2; }
.yhg-form__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	margin: 1rem 0 0;
	font-size: .8125rem;
	color: var(--yhg-muted);
}
.yhg-form__lock { color: var(--yhg-success); }

.yhg-linkbtn {
	background: none;
	border: 0;
	color: var(--yhg-primary);
	font-weight: 600;
	font-size: .875rem;
	padding: .4rem 0;
	cursor: pointer;
	text-decoration: underline;
}

.yhg-btn.is-loading { opacity: .72; pointer-events: none; }

/* ==================================================== 22. Success state */
.yhg-success { text-align: center; padding: .5rem 0; }
.yhg-success--page {
	background: #fff;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius-lg);
	box-shadow: var(--yhg-shadow);
	padding: clamp(1.75rem, 4vw, 3rem);
}
.yhg-success__check {
	display: grid;
	place-items: center;
	width: 68px; height: 68px;
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	background: rgba(18, 128, 92, .12);
	color: var(--yhg-success);
}
.yhg-success__title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .35em; }
.yhg-success__text { color: var(--yhg-muted); max-width: 32rem; margin-inline: auto; }
.yhg-success__cta {
	margin: 1.75rem auto 0;
	max-width: 26rem;
	padding: 1.25rem;
	background: var(--yhg-bg-alt);
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius);
}
.yhg-success__note { font-weight: 700; font-size: .9375rem; margin-bottom: .85rem; }
.yhg-success__cta .yhg-call__text { align-items: center; width: 100%; }
.yhg-success__cta .yhg-call__number { font-size: 1.375rem; }
.yhg-success__secondary { margin-top: 1.5rem; }
.yhg-success__secondary p { font-size: .9375rem; color: var(--yhg-muted); margin-bottom: .6rem; }

/* ================================================ 23. Page headers etc. */
.yhg-archhead {
	background: var(--yhg-bg-alt);
	border-bottom: 1px solid var(--yhg-border);
	padding-block: clamp(1.75rem, 4vw, 3rem);
}
.yhg-archhead__title { margin-bottom: .35em; }
.yhg-archhead__sub { color: var(--yhg-muted); font-size: 1.0625rem; }
.yhg-archhead__meta { color: var(--yhg-muted); font-size: .9375rem; }
.yhg-archhead__search { margin-top: 1.25rem; max-width: 30rem; }

.yhg-pagehero {
	background:
		radial-gradient(110% 80% at 100% 0%, var(--yhg-primary-l) 0%, transparent 62%),
		linear-gradient(180deg, #fff 0%, var(--yhg-bg-alt) 100%);
	padding-block: clamp(1.75rem, 5vw, 3.5rem) clamp(2.25rem, 5vw, 4rem);
	border-bottom: 1px solid var(--yhg-border);
}
.yhg-pagehero__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.yhg-pagehero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 700;
	color: var(--yhg-teal);
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: .8125rem;
	margin-bottom: .6rem;
}
.yhg-pagehero__title { margin-bottom: .4em; }
.yhg-pagehero__sub { color: var(--yhg-muted); font-size: clamp(1rem, 1.6vw, 1.125rem); max-width: 38rem; }
.yhg-pagehero .yhg-seals { margin-top: 1.75rem; }

/*
 * On a phone the supporting copy would otherwise push the form the better part of a
 * screen down, so an ad click lands on everything except the thing it was bought for.
 * The support block is therefore a grid item of its own, placed AFTER the form in the
 * markup: mobile order is plain source order — heading, form, then the rest — so no
 * `order` property is needed and reading order still matches visual order.
 */
.yhg-pagehero__support > :first-child { margin-top: 0; }

@media (min-width: 980px) {
	/* Desktop restores the original layout: copy above support, both left of the form. */
	.yhg-pagehero__grid { grid-template-columns: 1.05fr .95fr; row-gap: 1.75rem; }
	.yhg-pagehero__copy { grid-column: 1; grid-row: 1; }
	.yhg-pagehero__support { grid-column: 1; grid-row: 2; }
	.yhg-pagehero__form { grid-column: 2; grid-row: 1 / span 2; }
}

.yhg-crumbs { margin-bottom: 1rem; font-size: .8125rem; }
.yhg-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.yhg-crumbs li + li::before { content: "/"; color: var(--yhg-border); margin-right: .4rem; }
.yhg-crumbs a { color: var(--yhg-muted); text-decoration: none; }
.yhg-crumbs a:hover { color: var(--yhg-primary); text-decoration: underline; }
.yhg-crumbs [aria-current] { color: var(--yhg-ink); font-weight: 600; }

.yhg-article { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 980px) { .yhg-article { grid-template-columns: minmax(0, 1fr) 20rem; } }

.yhg-article__body { max-width: 68ch; font-size: 1.0625rem; }
.yhg-article__body h2 { margin-top: 2em; }
.yhg-article__body h3 { margin-top: 1.6em; }
.yhg-article__body ul, .yhg-article__body ol { padding-left: 1.35rem; }
.yhg-article__body li { margin-bottom: .5rem; }
.yhg-article__body blockquote {
	margin: 1.75rem 0;
	padding: 1rem 1.35rem;
	border-left: 4px solid var(--yhg-primary);
	background: var(--yhg-bg-alt);
	border-radius: 0 var(--yhg-radius-sm) var(--yhg-radius-sm) 0;
	color: var(--yhg-muted);
}
.yhg-article__body img { border-radius: var(--yhg-radius-sm); }
.yhg-article__body table { width: 100%; border-collapse: collapse; }
.yhg-article__body th, .yhg-article__body td { border: 1px solid var(--yhg-border); padding: .65rem .8rem; text-align: left; }

.yhg-benefits {
	background: #fff;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius);
	box-shadow: var(--yhg-shadow-sm);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	position: sticky;
	top: 96px;
	align-self: start;
}
.yhg-benefits__title { font-size: 1.125rem; margin-bottom: 1rem; }
.yhg-benefits__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .7rem; }
.yhg-benefits__list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .9375rem; }
.yhg-benefits__tick { color: var(--yhg-success); flex: 0 0 auto; margin-top: .2rem; }
.yhg-benefits__cta { display: grid; gap: .55rem; }

.yhg-callout {
	display: flex;
	gap: .8rem;
	align-items: flex-start;
	margin: 2rem 0;
	padding: 1.1rem 1.25rem;
	background: var(--yhg-primary-l);
	border: 1px solid rgba(14, 92, 138, .18);
	border-radius: var(--yhg-radius-sm);
}
.yhg-callout__icon { color: var(--yhg-primary); flex: 0 0 auto; margin-top: .15rem; }
.yhg-callout p { margin: 0; font-size: .9375rem; }

.yhg-contactcard {
	margin-top: 2rem;
	background: #fff;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius);
	box-shadow: var(--yhg-shadow-sm);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}
.yhg-contactcard__title { font-size: 1.125rem; margin-bottom: 1rem; }
.yhg-contactcard__rows { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: .8rem; }
.yhg-contactcard__rows li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; color: var(--yhg-muted); }
.yhg-contactcard__rows svg { color: var(--yhg-primary); flex: 0 0 auto; margin-top: .2rem; }

/* ============================================= 24. Blog, search, 404 */
.yhg-postgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.35rem; }
.yhg-postcard {
	background: #fff;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius);
	overflow: hidden;
	box-shadow: var(--yhg-shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease;
}
.yhg-postcard:hover { transform: translateY(-3px); box-shadow: var(--yhg-shadow); }
.yhg-postcard__link { display: block; padding: 1.35rem; color: inherit; text-decoration: none; }
.yhg-postcard__media { display: block; margin: -1.35rem -1.35rem 1.1rem; }
.yhg-postcard__media img { width: 100%; height: 180px; object-fit: cover; }
.yhg-postcard__title { font-size: 1.1875rem; margin-bottom: .4rem; }
.yhg-postcard__excerpt { color: var(--yhg-muted); font-size: .9375rem; }
.yhg-postcard__more { display: inline-flex; align-items: center; gap: .3rem; color: var(--yhg-primary); font-weight: 700; font-size: .9375rem; }

.yhg-single__thumb { margin-block: 2rem 0; }
.yhg-single__thumb img { border-radius: var(--yhg-radius); }

.yhg-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.yhg-results__item { padding-bottom: 1.5rem; border-bottom: 1px solid var(--yhg-border); }
.yhg-results__item h2 { font-size: 1.25rem; margin-bottom: .3rem; }
.yhg-results__item p { color: var(--yhg-muted); font-size: .9375rem; margin: 0; }

.yhg-search { display: flex; gap: .5rem; flex-wrap: wrap; }
.yhg-search__input {
	flex: 1 1 12rem;
	min-height: 54px;
	padding: .7rem 1rem;
	border: 2px solid var(--yhg-border);
	border-radius: var(--yhg-radius-sm);
	font-size: 1rem;
	font-family: inherit;
}
.yhg-search__input:focus { border-color: var(--yhg-primary); outline: none; }
.yhg-search__btn { flex: 0 0 auto; }

.yhg-404 { text-align: center; }
.yhg-404__code {
	font-family: var(--yhg-font-heading);
	font-size: clamp(4rem, 16vw, 8rem);
	font-weight: 800;
	line-height: 1;
	color: var(--yhg-primary-l);
	margin: 0;
	letter-spacing: -.04em;
}
.yhg-404__title { margin-top: -.35em; }
.yhg-404__sub { color: var(--yhg-muted); }
.yhg-404__search { max-width: 30rem; margin: 2rem auto; }

.pagination, .yhg-pagelinks { margin-top: 2.5rem; }
.pagination .nav-links, .yhg-pagelinks { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.pagination .page-numbers, .yhg-pagelinks a, .yhg-pagelinks > span {
	display: grid;
	place-items: center;
	min-width: 46px; min-height: 46px;
	padding: 0 .75rem;
	border: 1px solid var(--yhg-border);
	border-radius: var(--yhg-radius-sm);
	background: #fff;
	color: var(--yhg-ink);
	text-decoration: none;
	font-weight: 600;
}
.pagination .page-numbers.current { background: var(--yhg-primary); border-color: var(--yhg-primary); color: #fff; }
.pagination .page-numbers:hover { border-color: var(--yhg-primary); color: var(--yhg-primary); }

.yhg-legalbody { font-size: 1rem; }
.yhg-legalbody h2 { font-size: 1.375rem; }
.yhg-thanks__body { margin-top: 2.5rem; }

/* Ad landing pages hide navigation chrome. */
body.yhg-lp .yhg-nav,
body.yhg-lp .yhg-burger,
body.yhg-lp .yhg-footer__cols,
body.yhg-lp .yhg-prefooter { display: none; }

/* ==================================================== 25. Debug badge */
.yhg-debugbar {
	position: fixed;
	left: 12px;
	bottom: 12px;
	z-index: 120;
	max-width: min(24rem, calc(100vw - 24px));
	background: #0F1B24;
	color: #E7F6FF;
	border-radius: 12px;
	box-shadow: var(--yhg-shadow-lg);
	font: 600 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
	overflow: hidden;
}
body.has-sticky-cta .yhg-debugbar { bottom: calc(var(--yhg-sticky-h) + 12px); }
@media (min-width: 900px) { body.has-sticky-cta .yhg-debugbar { bottom: 12px; } }
.yhg-debugbar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .55rem .75rem;
	background: #14A6A0;
	color: #04252B;
	cursor: pointer;
}
.yhg-debugbar__body { max-height: 40vh; overflow: auto; padding: .6rem .75rem; }
.yhg-debugbar__row { padding: .3rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.yhg-debugbar__row:last-child { border-bottom: 0; }
.yhg-debugbar__row b { color: #7FE7DF; }

/* ============================================ 26. Standalone quote page */
.yhg-quotepage {
	background:
		radial-gradient(110% 80% at 100% 0%, var(--yhg-primary-l) 0%, transparent 62%),
		linear-gradient(180deg, #fff 0%, var(--yhg-bg-alt) 100%);
	padding-block: clamp(1.75rem, 5vw, 3.5rem) clamp(2.25rem, 5vw, 4rem);
	border-bottom: 1px solid var(--yhg-border);
}
.yhg-quotepage__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.yhg-quotepage__title { margin-bottom: .4em; }
.yhg-quotepage__intro { color: var(--yhg-muted); font-size: clamp(1rem, 1.6vw, 1.125rem); max-width: 38rem; }
.yhg-quotepage__intro p:last-child { margin-bottom: 0; }
.yhg-quotepage .yhg-hero__bullets { margin-top: 1.5rem; }
.yhg-quotepage__alt { margin-top: 1.75rem; }
.yhg-quotepage__altlabel { font-weight: 700; font-size: .9375rem; margin-bottom: .7rem; }
.yhg-quotepage__altbtns { display: flex; flex-wrap: wrap; gap: .7rem; }
.yhg-quotepage__altbtns .yhg-btn { flex: 1 1 14rem; }
.yhg-quotepage .yhg-seals { margin-top: 1.75rem; }
/* Form ahead of the supporting copy on mobile — see the pagehero note above. */
.yhg-quotepage__support > :first-child { margin-top: 0; }

@media (min-width: 980px) {
	.yhg-quotepage__grid { grid-template-columns: 1fr 1fr; row-gap: 1.75rem; }
	.yhg-quotepage__copy { grid-column: 1; grid-row: 1; }
	.yhg-quotepage__support { grid-column: 1; grid-row: 2; }
	.yhg-quotepage__form { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 96px; }
}

/* ===================================== 27. Hero as a full-width background */
.yhg-hero--bg .yhg-hero__copy { max-width: 40rem; }

@media (min-width: 960px) {
	.yhg-hero--bg .yhg-hero__grid { grid-template-columns: minmax(0, 40rem) 1fr; }
}

/*
 * A solid dark base underneath the photograph. If the image 404s, is still loading, or
 * is blocked, the scrim would otherwise sit over the light default gradient and the
 * white text would be invisible. This guarantees the hero is readable no matter what
 * happens to the image.
 */
.yhg-hero--bg {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #0B1F3F;
}

.yhg-hero__bgimg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--yhg-hero-focus, right) center;
	z-index: -2;
}

/*
 * The scrim is what makes a headline over a photograph legible. Two layers: a flat
 * darkening pass for overall contrast, and a stronger gradient on the side the copy
 * sits on, so the text has genuinely calm pixels beneath it rather than whatever the
 * photograph happens to contain.
 */
.yhg-hero--bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg,
			rgba(4, 22, 52, calc(var(--yhg-hero-scrim, .58) + .22)) 0%,
			rgba(4, 22, 52, var(--yhg-hero-scrim, .58)) 46%,
			rgba(4, 22, 52, calc(var(--yhg-hero-scrim, .58) * .68)) 100%);
}

.yhg-hero--bg .yhg-hero__title,
.yhg-hero--bg .yhg-hero__sub,
.yhg-hero--bg .yhg-hero__bullets li,
.yhg-hero--bg .yhg-hero__note,
.yhg-hero--bg .yhg-hero__or { color: #fff; }

.yhg-hero--bg .yhg-hero__sub { color: rgba(255, 255, 255, .92); }
.yhg-hero--bg .yhg-hero__note { color: rgba(255, 255, 255, .82); }
.yhg-hero--bg .yhg-hero__tick { color: #6EE7B7; }

.yhg-hero--bg .yhg-hero__eyebrow {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
	backdrop-filter: blur(6px);
	box-shadow: none;
}

/* The entry form stays on a solid card — never make someone type onto a photograph. */
.yhg-hero--bg .yhg-zipform { background: #fff; box-shadow: var(--yhg-shadow-lg); }

.yhg-hero--bg .yhg-btn--outline {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border-color: rgba(255, 255, 255, .65);
	backdrop-filter: blur(6px);
}
.yhg-hero--bg .yhg-btn--outline:hover { background: rgba(255, 255, 255, .2); color: #fff; border-color: #fff; }

.yhg-hero--bg .yhg-seals__item {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .24);
	backdrop-filter: blur(6px);
}
.yhg-hero--bg .yhg-seals__text strong { color: #fff; }
.yhg-hero--bg .yhg-seals__text span { color: rgba(255, 255, 255, .8); }
.yhg-hero--bg .yhg-seals__icon { background: rgba(255, 255, 255, .18); color: #fff; }

/* Narrow screens lose most of a wide photo, so lean harder on the scrim. */
@media (max-width: 760px) {
	.yhg-hero--bg::before {
		background: linear-gradient(180deg,
			rgba(4, 22, 52, calc(var(--yhg-hero-scrim, .58) + .18)) 0%,
			rgba(4, 22, 52, calc(var(--yhg-hero-scrim, .58) + .28)) 100%);
	}
}


/* ================================================ 30. Outside opening hours
   After close, a phone number is the worst button on the page: they ring, nobody
   answers, and they leave. So the call CTA steps back and the two routes that work
   unattended — the quote form and self-enrolment — take the lead. The class is set
   by JavaScript on every page view, never rendered into cacheable HTML. */
.yhg-hours-notice {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	margin: .85rem 0 0;
	padding: .7rem .9rem;
	border: 1px solid var(--yhg-border);
	border-left: 3px solid var(--yhg-accent);
	border-radius: var(--yhg-radius-sm);
	background: var(--yhg-bg-alt);
	color: var(--yhg-ink);
	font-size: .9375rem;
	line-height: 1.5;
	text-align: left;
}

/* Promote the online routes, demote the phone. Order works because the CTA row and
   the sticky bar are both flex/grid containers. */
body.yhg-closed .yhg-ctas .yhg-call { order: 3; }
body.yhg-closed .yhg-ctas .yhg-quote-open { order: 1; }
body.yhg-closed .yhg-ctas .yhg-enroll { order: 2; }

body.yhg-closed .yhg-ctas .yhg-call.yhg-btn--accent {
	background: transparent;
	color: var(--yhg-primary);
	border: 1px solid var(--yhg-border);
	box-shadow: none;
}
body.yhg-closed .yhg-ctas .yhg-quote-open.yhg-btn--primary {
	background: var(--yhg-accent);
	color: var(--yhg-accent-ink);
	border-color: var(--yhg-accent);
}

body.yhg-closed .yhg-stickybar .yhg-call.yhg-btn--accent {
	background: #fff;
	color: var(--yhg-primary);
	border: 1px solid var(--yhg-border);
}
body.yhg-closed .yhg-stickybar .yhg-quote-open.yhg-btn--primary {
	background: var(--yhg-accent);
	color: var(--yhg-accent-ink);
	border-color: var(--yhg-accent);
}

/* The header phone stays exactly where it is at every hour — someone who has decided
   to call should never have to hunt for the number. It just stops shouting. */
body.yhg-closed .yhg-header__call.yhg-btn--accent {
	background: transparent;
	color: var(--yhg-primary);
	border: 1px solid var(--yhg-border);
	box-shadow: none;
}

/* A legal notice whose page has not been created yet: the words stay, the link goes. */
.yhg-legallinks__text { display: inline-flex; align-items: center; gap: .4rem; opacity: .75; }