/* Components: header, dock, buttons, captions, bursts, blocks, footer.
   Visual language follows docs/audit/site-vs-bible.md: sky grounds with a dark dot screen,
   cream headline plates, yellow ribbons and tabs, the layered 20-point burst, yellow back-plates. */

/* ---------- Bible headline system (audit 1.1, 1.2) ----------
   Bangers, orange fill, ink outline (half hidden under the fill), connected ink extrusion,
   tilted up to the right, sitting on an irregular cream plate with its own ink drop. */
.hm-display {
	position: relative;
	isolation: isolate;
	display: inline-block;
	max-width: 100%;
	margin: 0 0 .5em;
	padding: .2em .5em .26em .45em;
	font-family: var(--hm-font-display);
	font-weight: 400;
	line-height: .92;
	letter-spacing: .012em;
	color: var(--hm-orange);
	-webkit-text-stroke: .08em var(--hm-ink);
	paint-order: stroke fill;
	text-shadow: var(--hm-extrude);
	transform: rotate(-2deg);
	transform-origin: left center;
	text-wrap: balance;
}
.hm-display::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hm-fx-plate) center / 100% 100% no-repeat;
	filter: drop-shadow(5px 6px 0 var(--hm-ink));
	pointer-events: none;
}
/* Variants: --ink (secondary lines, small sizes where orange would fail AA), --cream (open grounds). */
.hm-display--ink, h3.hm-display { color: var(--hm-ink); -webkit-text-stroke: 0; text-shadow: .04em .04em 0 var(--hm-yellow); }
.hm-display--bare::before { display: none; }
.hm-display--bare { padding: 0; }

/* ---------- Ribbon subhead (audit 1.3): yellow parallelogram, heavy italic sentence case ---------- */
.hm-ribbon { margin: -.35rem 0 1.4rem 8%; }
.hm-ribbon > span {
	position: relative;
	isolation: isolate;
	display: inline-block;
	padding: .38em 1.05em .42em;
	font-family: var(--hm-font-voice);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(1.1rem, .92rem + .9vw, 1.6rem);
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--hm-ink);
	transform: rotate(-2deg);
}
.hm-ribbon > span::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hm-halftone-yellow) 0 0 / 6px 6px, var(--hm-yellow);
	background-blend-mode: normal;
	border: var(--hm-line);
	box-shadow: 4px 4px 0 var(--hm-ink);
	transform: skewX(-10deg);
}

/* ---------- Caption tab (audit 1.8): yellow parallelogram on the top-left edge of a box ---------- */
.hm-tab, .hm-panel .hm-caption, .hm-steps__title, .hm-included__title {
	position: relative;
	isolation: isolate;
	display: inline-block;
	margin: 0 0 1rem;
	padding: .32em .8em .26em;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: var(--hm-font-display);
	font-weight: 400;
	font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem);
	line-height: 1;
	letter-spacing: .03em;
	color: var(--hm-ink);
	transform: rotate(-1.5deg);
}
.hm-tab::before, .hm-panel .hm-caption::before, .hm-steps__title::before, .hm-included__title::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hm-halftone-yellow) 0 0 / 6px 6px, var(--hm-yellow);
	border: var(--hm-line);
	transform: skewX(-12deg);
}
.hm-tab--orange::before, .hm-included__col--quote .hm-included__title::before { background: var(--hm-halftone-orange) 0 0 / 7px 7px, var(--hm-orange); }

/* Orange brush swash under the last word (speech cards, bursts). */
.hm-swash-word { position: relative; white-space: nowrap; }
.hm-swash-word::after {
	content: "";
	position: absolute;
	left: -.05em;
	right: -.1em;
	bottom: -.2em;
	height: .3em;
	background: var(--hm-fx-swash) center / 100% 100% no-repeat;
	transform: rotate(-2deg);
	pointer-events: none;
}

/* ---------- Buttons ---------- */
.hm-actions { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; margin-top: 1.5rem; }
.hm-btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: .55rem 1.35rem .45rem;
	border: var(--hm-line);
	border-radius: var(--hm-radius-sm);
	box-shadow: 4px 4px 0 var(--hm-ink);
	font-family: var(--hm-font-label);
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: .045em;
	text-decoration: none;
	color: var(--hm-ink);
	background: var(--hm-yellow);
	transition: transform var(--hm-dur-fast) var(--hm-ease-standard), box-shadow var(--hm-dur-fast) var(--hm-ease-standard);
	white-space: nowrap;
}
@media (hover: hover) {
	.hm-btn:hover { color: var(--hm-ink); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--hm-ink); }
}
.hm-btn:active { transform: translate(var(--hm-press), var(--hm-press)); box-shadow: 1px 1px 0 var(--hm-ink); transition-duration: var(--hm-dur-instant); }
.hm-btn--secondary { background: var(--hm-paper); }
/* On yellow grounds the primary flips to orange so it still reads as the main action. */
.hm-offer--yellow .hm-btn--primary, .hm-comic--yellow .hm-btn--primary, .hm-cta--yellow .hm-btn--primary, .hm-comic--navy .hm-btn--primary { background: var(--hm-orange); }
.hm-btn--dark { background: var(--hm-navy); color: var(--hm-cream); }
.hm-btn--dark:hover { color: var(--hm-cream); }
.hm-btn--ghost { background: var(--hm-paper); }
.hm-btn--sm { min-height: 44px; font-size: 1.2rem; padding-inline: 1rem; box-shadow: var(--hm-shadow-sm); }
.hm-btn--tel::before {
	content: "";
	width: .9em;
	height: .9em;
	margin-right: .45em;
	background: currentColor;
	-webkit-mask: var(--hm-phone-icon) center / contain no-repeat;
	mask: var(--hm-phone-icon) center / contain no-repeat;
}
@media (max-width: 420px) {
	.hm-btn { white-space: normal; text-align: center; }
	.hm-hero__actions .hm-btn, .hm-cta .hm-btn { flex: 1 1 100%; }
}
:root {
	--hm-phone-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
	--hm-globe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19M12 2.5c3 3 3 16 0 19M12 2.5c-3 3-3 16 0 19'/%3E%3C/svg%3E");
}

/* ---------- Caption boxes (hero eyebrows, narration) ---------- */
.hm-caption {
	display: inline-block;
	margin: 0 0 1rem;
	padding: .35rem .75rem .25rem;
	border: var(--hm-line);
	background: var(--hm-yellow);
	box-shadow: var(--hm-shadow-sm);
	font-family: var(--hm-font-label);
	font-size: 1.2rem;
	line-height: 1.15;
	letter-spacing: .05em;
	color: var(--hm-ink);
	transform: rotate(-1deg);
}
.hm-caption p { margin: 0; }
.hm-caption--white, .hm-caption--draft {
	display: block;
	font-family: var(--hm-font-body);
	font-size: 1rem;
	letter-spacing: 0;
	line-height: 1.55;
	background: var(--hm-paper);
	padding: .9rem 1.1rem;
	transform: none;
}
.hm-caption--orange { background: var(--hm-orange); }
.hm-caption--paper { background: var(--hm-paper); }
.hm-caption--draft {
	border-style: dashed;
	border-color: var(--hm-orange);
	border-width: var(--hm-stroke-lg);
	box-shadow: none;
	background: var(--hm-paper);
}
.hm-caption--draft p:first-child strong:first-child { font-family: var(--hm-font-label); font-size: 1.35rem; letter-spacing: .05em; font-weight: 400; display: block; color: var(--hm-ink); }
.hm-caption-block { max-width: var(--hm-wide); margin: 1.5rem auto; padding-inline: var(--hm-gutter); }
.hm-caption-block--center { text-align: center; }
.hm-caption-block .hm-caption--white { max-width: var(--hm-text); }
.hm-caption-block--center .hm-caption--white { margin-inline: auto; }
.hm-pending { background: color-mix(in srgb, var(--hm-yellow) 45%, transparent); outline: 2px dashed var(--hm-orange); color: inherit; }

.hm-tag {
	position: absolute;
	top: .75rem;
	left: .75rem;
	padding: .2rem .6rem .1rem;
	background: var(--hm-yellow);
	border: var(--hm-line);
	font-family: var(--hm-font-label);
	font-size: 1.25rem;
	letter-spacing: .06em;
	transform: rotate(-3deg);
}

/* ---------- Burst (audit 1.7): orange halftone backing, yellow ring, cream star, pop ticks ---------- */
.hm-burst {
	position: relative;
	isolation: isolate;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: .15rem;
	width: 13rem;
	aspect-ratio: 1;
	margin: 0;
	padding: 2.9rem 2.6rem 3.3rem;
	text-align: center;
	color: var(--hm-ink);
}
.hm-burst::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hm-fx-burst) center / contain no-repeat; pointer-events: none; }
.hm-burst::before {
	content: "";
	position: absolute;
	inset: 22% -2% 20% -4%;
	z-index: -2;
	background: var(--hm-halftone-orange) 0 0 / 7px 7px, var(--hm-orange);
	border: var(--hm-line);
	transform: rotate(-4deg);
	pointer-events: none;
}
.hm-burst__label { font-family: var(--hm-font-display); font-size: 1.1rem; letter-spacing: .03em; line-height: 1; color: var(--hm-ink); }
.hm-burst__price {
	font-family: var(--hm-font-display);
	font-size: 3rem;
	line-height: .95;
	letter-spacing: .01em;
	color: var(--hm-orange);
	-webkit-text-stroke: .08em var(--hm-ink);
	paint-order: stroke fill;
	text-shadow: var(--hm-extrude);
}
.hm-burst__price a { color: inherit; text-decoration: none; }
.hm-burst__price .hm-price-fallback, .hm-burst__price .ssm-price__note { font-size: .55em; display: block; }
/* The ribbon line crosses the bottom of the burst and breaks out of it on both sides. */
.hm-burst__line {
	position: absolute;
	left: 50%;
	bottom: 17%;
	z-index: 1;
	isolation: isolate;
	padding: .32em .9em .36em;
	font-family: var(--hm-font-voice);
	font-style: italic;
	font-weight: 800;
	font-size: .98rem;
	line-height: 1.1;
	letter-spacing: -.01em;
	white-space: nowrap;
	color: var(--hm-ink);
	transform: translateX(-50%) rotate(-3deg);
}
.hm-burst__line::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hm-yellow); border: var(--hm-line); box-shadow: 3px 3px 0 var(--hm-ink); transform: skewX(-10deg); }
.hm-burst--lg { width: min(19rem, 82vw); padding: 3.6rem 3rem 4.2rem; }
.hm-burst--lg .hm-burst__line { font-size: 1.15rem; }

/* Comic sale price (owner review 2026-11): the number is the loudest thing in the burst. Sizes are
   in cqi (percent of the burst's content width) so every burst variant fills its cream star the same
   way. The price tilts on its own, independent of the burst's pop and hover rotate; $ and * are
   small superscripts so the digits carry the size. Nothing here animates. */
.hm-burst { container-type: inline-size; }
.hm-burst__label { position: relative; z-index: 1; font-size: max(.8rem, 7.5cqi); letter-spacing: .04em; transform: rotate(-3deg); }
.hm-burst__price {
	position: relative;
	z-index: 0;
	display: block;
	font-size: 43cqi;
	line-height: .82;
	letter-spacing: 0;
	white-space: nowrap;
	-webkit-text-stroke: .07em var(--hm-ink);
	transform: rotate(-7deg) skewX(-7deg);
	margin-block: .02em .08em;
}
.hm-burst__price .ssm-price--burst { font-family: inherit; font-size: 1em; line-height: inherit; }
.hm-burst__price .ssm-price__currency { display: inline-block; font-size: .5em; vertical-align: top; margin: .12em .02em 0 0; -webkit-text-stroke: .1em var(--hm-ink); }
.hm-burst__price .ssm-price__amount { display: inline-block; }
.hm-burst__price .hm-price-fallback { white-space: normal; }
/* The ribbon always sits on top of the star points and the price extrude. */
.hm-burst__line { z-index: 2; max-width: calc(100vw - 1.5rem); }

.hm-sfx {
	position: absolute;
	right: 4%;
	top: 6%;
	z-index: 3;
	font-family: var(--hm-font-display);
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	line-height: 1;
	color: var(--hm-yellow);
	-webkit-text-stroke: .08em var(--hm-ink);
	paint-order: stroke fill;
	text-shadow: var(--hm-extrude);
	transform: rotate(8deg);
	pointer-events: none;
}

/* ---------- Panels and sections (audit 1.8, punch 8: borders, not universal drop shadows) ---------- */
.hm-panel {
	position: relative;
	background: var(--hm-paper);
	border: var(--hm-line);
	border-radius: var(--hm-radius-box);
}
.hm-section {
	max-width: calc(var(--hm-wide) + 2 * var(--hm-gutter));
	margin-inline: auto;
	padding: var(--hm-section) var(--hm-gutter) 0;
}
.hm-page > :last-child.hm-section { padding-bottom: var(--hm-section); }
.hm-section__head { max-width: 52rem; margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }
.hm-section__title { font-size: var(--hm-fs-h2); }
.hm-section__intro { font-size: var(--hm-fs-lead); line-height: 1.5; color: var(--hm-ink-soft); max-width: 44rem; }

/* Dot-screen utility: an angled dark halftone layer behind the content (audit 1.4). */
.hm-screen { position: relative; isolation: isolate; overflow: hidden; }
.hm-screen::before {
	content: "";
	position: absolute;
	inset: -50%;
	z-index: -1;
	background: var(--hm-halftone-light) 0 0 / 9px 9px;
	transform: rotate(22deg);
	pointer-events: none;
}

/* ---------- Header ---------- */
.hm-header-part { position: sticky; top: 0; z-index: 50; }
.admin-bar .hm-header-part { top: 46px; }
@media (min-width: 783px) { .admin-bar .hm-header-part { top: 32px; } }
.hm-header { background: var(--hm-cream); border-bottom: var(--hm-line-lg); }
.hm-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: calc(var(--hm-wide) + 2 * var(--hm-gutter));
	min-height: var(--hm-header-h);
	margin-inline: auto;
	padding: .4rem var(--hm-gutter);
}
.hm-header__brand { display: inline-flex; text-decoration: none; margin-right: auto; }
.hm-logo--wordmark { height: 56px; width: auto; }
.hm-footer .hm-logo--wordmark { height: 84px; }
@media (min-width: 960px) { .hm-logo--wordmark { height: 60px; } }

/* Live-type wordmark stand-in (TODO-ASSET). */
.hm-logo--type { display: inline-grid; grid-template-columns: auto auto; align-items: end; column-gap: .3rem; line-height: .85; transform: rotate(-3deg); }
.hm-logo__the { font-family: var(--hm-font-display); font-size: .95rem; color: var(--hm-navy); align-self: start; }
.hm-logo__name { font-family: var(--hm-font-display); font-size: 2rem; letter-spacing: .02em; color: var(--hm-orange); -webkit-text-stroke: 2px var(--hm-ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--hm-ink); }
.hm-logo__tag { grid-column: 1 / -1; justify-self: end; margin-top: .15rem; padding: .15rem .5rem .05rem; background: var(--hm-yellow); border: 2px solid var(--hm-ink); font-family: var(--hm-font-display); font-size: .8rem; letter-spacing: .05em; color: var(--hm-ink); transform: skewX(-10deg); text-transform: uppercase; }

.hm-nav__list { list-style: none; margin: 0; padding: 0; }
.hm-nav__list a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--hm-font-label);
	font-size: 1.35rem;
	letter-spacing: .05em;
	color: var(--hm-ink);
	text-decoration: none;
}
/* Current page: orange brush swash (punch 24). */
.hm-nav__list .current-menu-item > a::after, .hm-nav__list a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: -.15em;
	right: -.15em;
	bottom: .3rem;
	height: .32em;
	background: var(--hm-fx-swash) center / 100% 100% no-repeat;
	transform: rotate(-2deg);
}
.hm-nav--desktop, .hm-header__actions { display: none; }

.hm-menu { position: static; }
.hm-menu__toggle {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	padding: .3rem .8rem .2rem;
	border: var(--hm-line);
	border-radius: var(--hm-radius-sm);
	background: var(--hm-yellow);
	box-shadow: var(--hm-shadow-sm);
	font-family: var(--hm-font-label);
	font-size: 1.25rem;
	letter-spacing: .05em;
	cursor: pointer;
	list-style: none;
}
.hm-menu__toggle::-webkit-details-marker { display: none; }
.hm-menu__bars, .hm-menu__bars::before, .hm-menu__bars::after { display: block; width: 18px; height: 3px; background: var(--hm-ink); border-radius: 2px; }
.hm-menu__bars { position: relative; }
.hm-menu__bars::before, .hm-menu__bars::after { content: ""; position: absolute; left: 0; }
.hm-menu__bars::before { top: -6px; }
.hm-menu__bars::after { top: 6px; }
.hm-menu[open] .hm-menu__bars { background: transparent; }
.hm-menu[open] .hm-menu__bars::before { top: 0; transform: rotate(45deg); }
.hm-menu[open] .hm-menu__bars::after { top: 0; transform: rotate(-45deg); }
.hm-nav--mobile {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	max-height: calc(100svh - var(--hm-header-h));
	overflow-y: auto;
	padding: .75rem var(--hm-gutter) 1.25rem;
	background: var(--hm-cream);
	border-bottom: var(--hm-line-lg);
	box-shadow: 0 8px 0 color-mix(in srgb, var(--hm-ink) 18%, transparent);
}
.hm-nav--mobile .hm-nav__list a { min-height: 52px; font-size: 1.7rem; border-bottom: 2px dashed color-mix(in srgb, var(--hm-ink) 18%, transparent); }
.hm-nav--mobile .hm-nav__list a::after { bottom: .55rem; right: auto; width: 6em; }

@media (min-width: 960px) {
	.hm-menu { display: none; }
	.hm-nav--desktop { display: block; }
	.hm-nav--desktop .hm-nav__list { display: flex; gap: clamp(.9rem, 1.8vw, 1.75rem); }
	.hm-header__actions { display: flex; align-items: center; gap: 1rem; }
	.hm-header__phone { font-weight: 700; text-decoration: none; color: var(--hm-ink); white-space: nowrap; }
	.hm-header__phone-label { font-family: var(--hm-font-label); font-weight: 400; font-size: 1.15rem; letter-spacing: .05em; color: var(--hm-ink-soft); }
	.hm-logo__name { font-size: 2.35rem; }
}
@media (min-width: 960px) and (max-width: 1180px) {
	.hm-header__phone { display: none; }
	.hm-nav--desktop .hm-nav__list a { font-size: 1.25rem; }
}

/* ---------- Mobile dock (Book + tap to call). Hides on scroll down, returns on scroll up (motion.js). ---------- */
.hm-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	gap: .6rem;
	padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px));
	background: var(--hm-navy);
	border-top: var(--hm-line-lg);
	transition: transform var(--hm-dur-base) var(--hm-ease-standard);
}
.hm-dock.is-tucked { transform: translateY(calc(100% + 4px)); }
.hm-dock:focus-within { transform: none; }
.hm-dock__btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border: var(--hm-line);
	border-radius: var(--hm-radius-sm);
	font-family: var(--hm-font-label);
	font-size: 1.35rem;
	letter-spacing: .05em;
	text-decoration: none;
	color: var(--hm-ink);
}
.hm-dock__btn--book { background: var(--hm-yellow); flex: .8; }
.hm-dock__btn--call { background: var(--hm-paper); flex: 1.2; }
.hm-dock__btn--call::before { content: ""; width: 1em; height: 1em; margin-right: .4em; background: currentColor; -webkit-mask: var(--hm-phone-icon) center / contain no-repeat; mask: var(--hm-phone-icon) center / contain no-repeat; }
@media (min-width: 960px) { .hm-dock { display: none; } }

/* ---------- Hero: sky ground (audit 1.10, punch 4) ---------- */
.hm-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--hm-sky-ground);
	background-color: var(--hm-sky);
	border-bottom: var(--hm-line-lg);
	color: var(--hm-ink);
}
/* Dark dot screen at 22 degrees, plus heavier dots toward the corners (print vignette). */
.hm-hero::before, .hm-hero::after { content: ""; position: absolute; pointer-events: none; z-index: -3; }
.hm-hero::before { inset: -50%; background: var(--hm-halftone-light) 0 0 / 9px 9px; transform: rotate(22deg); }
.hm-hero::after {
	inset: 0;
	background: radial-gradient(circle at center, var(--hm-dot-light) 2.3px, transparent 2.8px) 0 0 / 9px 9px;
	-webkit-mask: radial-gradient(farthest-corner at 55% 42%, transparent 52%, #000 100%);
	mask: radial-gradient(farthest-corner at 55% 42%, transparent 52%, #000 100%);
}
.hm-hero__sky, .hm-hero__clouds, .hm-hero__speed { position: absolute; pointer-events: none; }
/* Cover rays rise from behind the headline (bible P1, P3, P6, P7). */
.hm-hero__sky {
	inset: -20%;
	z-index: -2;
	background: var(--hm-fx-rays) 26% 22% / min(64rem, 150%) auto no-repeat;
	transform-origin: 30% 40%;
}
.hm-hero__clouds {
	inset: 0;
	z-index: -1;
	background: var(--hm-fx-clouds);
	background-repeat: no-repeat;
	background-position: -3% 6%, 96% 4%, 58% 92%, 104% 70%;
	background-size: clamp(8rem, 15vw, 15rem) auto, clamp(6rem, 11vw, 10rem) auto, clamp(9rem, 17vw, 17rem) auto, clamp(7rem, 13vw, 12rem) auto;
}
.hm-hero__speed { inset: 0; z-index: -2; display: none; }

.hm-hero__inner {
	position: relative;
	display: grid;
	gap: 0;
	max-width: calc(var(--hm-wide) + 2 * var(--hm-gutter));
	margin-inline: auto;
	padding: clamp(1.25rem, 4vw, 3.5rem) var(--hm-gutter) clamp(2rem, 5vw, 3.5rem);
}
.hm-hero__copy { position: relative; z-index: 2; min-width: 0; }
.hm-hero__caption { transform: rotate(-2deg); margin-bottom: .9rem; }
.hm-hero__title { font-size: clamp(2.7rem, 1.3rem + 6.4vw, 6.2rem); margin: 0 0 .1em; max-width: 13ch; }
.hm-hero--page .hm-hero__title, .hm-hero--campaign .hm-hero__title { font-size: clamp(2.5rem, 1.4rem + 5vw, 5.2rem); max-width: 15ch; }
.hm-hero__body {
	max-width: 34rem;
	padding: 1rem 1.15rem;
	background: var(--hm-paper);
	border: var(--hm-line);
	border-radius: var(--hm-radius-box);
	box-shadow: var(--hm-backplate-sm);
	color: var(--hm-ink);
	font-size: 1.05rem;
}
.hm-hero__actions { margin-top: 1.4rem; }
/* Disclaimer: an opaque cream caption box with an ink border, above the clouds (QA P1-2). */
.hm-hero .hm-hero__fine { position: relative; z-index: 3; max-width: 34rem; margin-top: 1rem; padding: .6rem .8rem; border: 2px solid var(--hm-ink); border-radius: 4px; background: var(--hm-cream); color: var(--hm-ink); font-size: .8125rem; line-height: 1.45; }
.hm-hero__fine a { color: var(--hm-navy); }
.hm-hero__art { position: relative; z-index: 1; display: grid; place-items: center; }
.hm-hero__img { display: block; width: 100%; max-width: 34rem; }
.hm-hero.no-art .hm-hero__inner { grid-template-columns: minmax(0, 1fr); }
.hm-hero--campaign { background: var(--hm-navy); }
.hm-hero--campaign .hm-hero__sky { display: none; }

/* Props in page heroes stand on a yellow burst. */
.hm-hero.has-prop .hm-hero__art { margin-top: 1.5rem; }
.hm-hero.has-prop .hm-hero__art::before { content: ""; position: absolute; width: min(100%, 22rem); aspect-ratio: 1; background: var(--hm-fx-burst) center / contain no-repeat; z-index: 0; }
.hm-hero.has-prop .hm-hero__img { position: relative; z-index: 1; width: min(62%, 15rem); }
.hm-hero.has-prop .hm-hero__burst, .hm-hero.no-art .hm-hero__burst { position: relative; }

/* Figure heroes (raster Mike). Mobile and portrait tablets: stacked, Mike bleeds left and sits
   right under the plate so he is inside the first viewport; the body card overlaps his belt line. */
.hm-hero.has-figure .hm-hero__copy { display: contents; }
.hm-hero.has-figure .hm-hero__caption { order: 1; justify-self: start; }
.hm-hero.has-figure .hm-hero__title { order: 2; justify-self: start; }
.hm-hero.has-figure .hm-hero__punch { order: 3; position: relative; z-index: 3; }
.hm-hero.has-figure .hm-hero__art { order: 4; }
.hm-hero.has-figure .hm-hero__body { order: 5; position: relative; z-index: 2; margin-top: -2.75rem; }
.hm-hero.has-figure .hm-hero__actions { order: 6; position: relative; z-index: 2; }
.hm-hero.has-figure .hm-hero__fine { order: 7; position: relative; z-index: 2; }
.hm-hero.has-figure .hm-hero__title, .hm-hero.has-figure .hm-hero__punch, .hm-hero.has-figure .hm-hero__caption { z-index: 3; position: relative; }
.hm-hero.has-figure .hm-hero__art {
	display: block;
	place-items: initial;
	margin: -1.6rem calc(-1 * var(--hm-gutter)) 0;
	justify-self: start;
	width: min(calc(100% + 2 * var(--hm-gutter)), 40rem);
}
.hm-hero.has-figure .hm-hero__img {
	width: 100%;
	max-width: none;
	height: auto;
	max-height: clamp(13rem, calc(100svh - 21.5rem - var(--hm-dock-h)), 34rem);
	object-fit: cover;
	object-position: 30% 0;
}
.hm-hero--splash .hm-hero__sky {
	inset: -20%;
	background: repeating-conic-gradient(from 0deg at 36% 52%, color-mix(in srgb, var(--hm-cream) 55%, transparent) 0deg 5deg, transparent 5deg 15deg);
	-webkit-mask: radial-gradient(circle at 36% 52%, #000 0, #000 12%, transparent 34%);
	mask: radial-gradient(circle at 36% 52%, #000 0, #000 12%, transparent 34%);
	transform-origin: 36% 52%;
}
.hm-hero.has-figure .hm-hero__burst {
	position: absolute;
	right: max(var(--hm-gutter), 2%);
	bottom: 3.25rem;
	width: clamp(9.5rem, 30vw, 12rem);
	padding: 2.2rem 1.8rem 2.6rem;
	z-index: 2;
}
.hm-hero__burst .hm-burst__price { font-size: 44cqi; }
.hm-hero__burst .hm-burst__line { font-size: .82rem; }
.hm-hero__burst .hm-price-fallback { font-size: 1.3rem; }

/* Phones (STYLEGUIDE 11, QA P0-3 and P1-3): the price burst leaves the art layer and sits in the
   copy column under the ribbon with its disclaimer beside it, so price and fine print share the
   first viewport and the burst never covers Mike. The art wrapper dissolves so the burst, the fine
   print and Mike can be ordered as grid items. */
@media (max-width: 599px) {
	.hm-hero.has-figure.has-offer .hm-hero__inner { grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; }
	.hm-hero.has-figure.has-offer :is(.hm-hero__caption, .hm-hero__title, .hm-hero__punch, .hm-hero__body, .hm-hero__actions, .hm-hero__img) { grid-column: 1 / -1; }
	.hm-hero.has-figure.has-offer .hm-hero__art { display: contents; }
	.hm-hero.has-figure.has-offer .hm-hero__burst { order: 4; grid-column: 1; position: relative; right: auto; bottom: auto; align-self: center; justify-self: start; width: clamp(10rem, 46vw, 12.5rem); padding: 1.6rem 1.2rem 2.1rem; margin: .5rem 0 0 .35rem; z-index: 3; }
	.hm-hero.has-figure.has-offer .hm-hero__burst .hm-burst__price { font-size: 42cqi; }
	.hm-hero.has-figure.has-offer .hm-hero__burst .hm-burst__line { font-size: .8rem; bottom: 13%; padding-inline: .7em; }
	.hm-hero.has-figure.has-offer .hm-hero__fine { font-size: .8125rem; }
	.hm-hero.has-figure.has-offer .hm-hero__fine { order: 5; grid-column: 2; align-self: center; margin: .5rem 0 0; }
	.hm-hero.has-figure.has-offer .hm-hero__img { order: 6; position: relative; z-index: 1; justify-self: start; width: calc(100% + 2 * var(--hm-gutter)); max-width: 40rem; margin: .25rem calc(-1 * var(--hm-gutter)) 0; }
	.hm-hero.has-figure.has-offer .hm-hero__body { order: 7; }
	.hm-hero.has-figure.has-offer .hm-hero__actions { order: 8; }
}

@media (min-width: 600px) and (max-width: 959px), (min-width: 960px) and (orientation: portrait) {
	.hm-hero.has-figure .hm-hero__art { width: min(78%, 42rem); margin-left: calc(-1 * var(--hm-gutter)); }
	.hm-hero.has-figure .hm-hero__body { margin-top: -3.5rem; }
	.hm-hero.has-figure .hm-hero__burst { right: calc(-13rem - 1rem); bottom: 30%; width: 13rem; padding: 2.4rem 1.9rem 2.8rem; }
	.hm-hero--splash .hm-hero__sky { background-position: 0 0; }
}

@media (min-width: 960px) {
	.hm-hero.has-art:not(.has-figure) .hm-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 2.5rem; }
	.hm-hero.has-prop .hm-hero__art { margin-top: 0; min-height: 20rem; }
}

/* Desktop landscape: Mike is the largest object, cut by the bottom edge, cape off the left edge,
   overlapping the copy column (copy sits above him). */
@media (min-width: 960px) and (orientation: landscape) {
	.hm-hero.has-figure .hm-hero__inner {
		position: static;
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		min-height: clamp(34rem, calc(100svh - var(--hm-header-h) - 3.5rem), 54rem);
		padding-block: clamp(2rem, 4vh, 3.5rem) clamp(2rem, 5vh, 3.5rem);
		align-content: center;
	}
	.hm-hero.has-figure .hm-hero__copy { display: block; grid-column: 2; }
	.hm-hero.has-figure .hm-hero__body { margin-top: 0; }
	.hm-hero.has-figure .hm-hero__art { position: static; z-index: auto; width: auto; margin: 0; }
	.hm-hero.has-figure .hm-hero__img {
		position: absolute;
		left: 0;
		top: clamp(1.5rem, 5vh, 3rem);
		bottom: 0;
		width: auto;
		height: calc(100% - clamp(1.5rem, 5vh, 3rem));
		max-height: none;
		max-width: min(54vw, 64rem);
		object-fit: cover;
		object-position: 100% 0;
	}
	/* Price burst rides the plate's top-right corner (bible P1/P6 corner burst). */
	.hm-hero.has-figure .hm-hero__burst { top: clamp(1rem, 6vh, 3.5rem); bottom: auto; right: max(1rem, calc((100% - var(--hm-wide)) / 2 - 2.5rem)); width: clamp(13rem, 16vw, 15.5rem); padding: 2.8rem 2.2rem 3.3rem; z-index: 4; }
	.hm-hero--splash .hm-hero__sky { --sx: 22%; }
	.hm-hero--splash .hm-hero__sky { background: repeating-conic-gradient(from 0deg at 26% 40%, color-mix(in srgb, var(--hm-cream) 55%, transparent) 0deg 5deg, transparent 5deg 15deg); -webkit-mask: radial-gradient(circle at 26% 40%, #000 0, #000 10%, transparent 30%); mask: radial-gradient(circle at 26% 40%, #000 0, #000 10%, transparent 30%); transform-origin: 26% 40%; }
	.hm-hero--page.has-figure .hm-hero__img { object-position: 0 100%; }
	.hm-hero--page.has-figure .hm-hero__img { top: auto; height: min(88%, 34rem); max-width: min(56vw, 58rem); }
	.hm-hero.has-figure .hm-hero__clouds { background-position: 2% 4%, 52% 3%, 97% 90%, 101% 40%; }
}
@media (min-width: 960px) and (max-width: 1180px) and (orientation: landscape) {
	.hm-hero.has-figure .hm-hero__art { width: 50vw; }
	.hm-hero.has-figure .hm-hero__inner { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}

/* Speech cards (bible P6), on the sky under the home hero. */
.hm-speech {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1rem;
	max-width: calc(var(--hm-wide) + 2 * var(--hm-gutter));
	margin: 0 auto;
	padding: 1.25rem var(--hm-gutter) 2.25rem;
	list-style: none;
}
.hm-speech__card {
	display: grid;
	place-items: center;
	min-height: 6.5rem;
	padding: .9rem .9rem 1.1rem;
	background: var(--hm-paper);
	border: var(--hm-line);
	border-radius: var(--hm-radius-box);
	box-shadow: var(--hm-backplate);
	font-family: var(--hm-font-voice);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(1.05rem, .85rem + 1vw, 1.55rem);
	line-height: 1.12;
	letter-spacing: -.015em;
	text-align: center;
	color: var(--hm-ink);
	transform: rotate(-3deg);
}
.hm-speech__card:nth-child(2) { transform: rotate(2deg); }
.hm-speech__card:nth-child(3) { transform: rotate(-1.5deg); }
.hm-speech__card:nth-child(4) { transform: rotate(2.5deg); }
@media (min-width: 960px) {
	.hm-speech { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding-block: .5rem 2.75rem; }
}
.hm-speechband { position: relative; isolation: isolate; overflow: hidden; background: var(--hm-sky-deep); border-bottom: var(--hm-line-lg); }
.hm-speechband::before { content: ""; position: absolute; inset: -50%; z-index: -1; background: var(--hm-halftone-light) 0 0 / 9px 9px; transform: rotate(22deg); pointer-events: none; }
.hm-speechband .hm-speech { padding-block: 1.75rem 2.25rem; }

/* ---------- Trust strip: yellow ribbon band with ink text (punch 12) ---------- */
.hm-trust { position: relative; background: var(--hm-halftone-yellow) 0 0 / 6px 6px, var(--hm-yellow); color: var(--hm-ink); border-bottom: var(--hm-line-lg); }
.hm-trust__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 0;
	max-width: calc(var(--hm-wide) + 2 * var(--hm-gutter));
	margin: 0 auto;
	padding: .9rem var(--hm-gutter);
	list-style: none;
}
.hm-trust__item { display: flex; align-items: baseline; gap: .45rem; padding-inline: 1.1rem; }
.hm-trust__item + .hm-trust__item::before { content: ""; width: .6rem; height: .6rem; margin-right: .9rem; margin-left: -1.6rem; background: var(--hm-orange); border: 2px solid var(--hm-ink); transform: rotate(45deg); align-self: center; }
.hm-trust__title { font-family: var(--hm-font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: .03em; color: var(--hm-ink); }
.hm-trust__text { font-size: .95rem; font-weight: 600; }
@media (max-width: 640px) {
	.hm-trust__list { display: grid; gap: .55rem; justify-content: stretch; padding-block: 1.1rem; }
	.hm-trust__item { display: block; padding: 0 0 0 1.25rem; position: relative; line-height: 1.35; }
	.hm-trust__item::before, .hm-trust__item + .hm-trust__item::before { content: ""; position: absolute; left: 0; top: .4rem; width: .55rem; height: .55rem; margin: 0; background: var(--hm-orange); border: 2px solid var(--hm-ink); transform: rotate(45deg); }
	.hm-trust__title { margin-right: .4rem; font-size: 1.25rem; }
}

/* ---------- Offer (bible P6) ---------- */
.hm-offer__panel {
	display: grid;
	gap: 1.75rem;
	padding: clamp(1.5rem, 5vw, 3rem);
	overflow: hidden;
	isolation: isolate;
	border-width: var(--hm-stroke-lg);
}
.hm-offer--yellow .hm-offer__panel { background: var(--hm-halftone-yellow) 0 0 / 6px 6px, var(--hm-yellow); }
.hm-offer--yellow .hm-offer__panel::after { content: ""; position: absolute; inset: -30%; z-index: -1; background: repeating-conic-gradient(from 0deg at 78% 50%, color-mix(in srgb, white 30%, transparent) 0deg 5deg, transparent 5deg 15deg); pointer-events: none; }
.hm-offer--orange .hm-offer__panel { background: var(--hm-halftone-orange) 0 0 / 7px 7px, var(--hm-orange); }
.hm-offer--cream .hm-offer__panel { background-color: var(--hm-paper); }
.hm-offer__title { font-size: var(--hm-fs-h2); }
.hm-offer__body { max-width: 36rem; font-size: 1.08rem; padding: 1rem 1.15rem; background: var(--hm-paper); border: var(--hm-line); border-radius: var(--hm-radius-box); }
.hm-offer__burst { justify-self: center; }
.hm-offer__fine { grid-column: 1 / -1; background: var(--hm-paper); padding: .75rem 1rem; border: var(--hm-line); border-radius: var(--hm-radius-box); }
@media (min-width: 860px) {
	.hm-offer__panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 3rem; }
}

.hm-fine { font-size: .875rem; line-height: 1.5; color: var(--hm-ink); padding-top: 1rem; border-top: 2px dashed var(--hm-ink); }
.hm-offer__fine.hm-fine { border-top: var(--hm-line); padding-top: .75rem; }

/* ---------- Steps: a flush comic strip with caption tabs and art on sky (bible P2 pillars) ---------- */
.hm-steps__list { display: grid; gap: 1.6rem 12px; margin: 0; padding: 1.1rem 0 0; list-style: none; counter-reset: hm-step; }
.hm-steps__item { counter-increment: hm-step; display: flex; flex-direction: column; padding: 0 0 1.2rem; overflow: visible; }
.hm-steps__item::before {
	content: counter(hm-step);
	position: absolute;
	top: -1.1rem;
	right: .9rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2.8rem;
	height: 2.8rem;
	background: var(--hm-orange);
	border: var(--hm-line);
	border-radius: 50%;
	box-shadow: var(--hm-shadow-sm);
	font-family: var(--hm-font-display);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--hm-ink);
}
.hm-steps__art {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	place-items: center;
	height: 9rem;
	margin: 0 0 1rem;
	background: var(--hm-sky-ground);
	border-bottom: var(--hm-line);
	border-radius: calc(var(--hm-radius-box) - 3px) calc(var(--hm-radius-box) - 3px) 0 0;
}
.hm-steps__art::before { content: ""; position: absolute; inset: -50%; z-index: -1; background: var(--hm-halftone-light) 0 0 / 9px 9px; transform: rotate(22deg); }
.hm-steps__art::after { content: ""; position: absolute; inset: -40%; z-index: -1; background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--hm-yellow) 50%, transparent) 0deg 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 42%); mask: radial-gradient(circle, #000 0 18%, transparent 42%); }
.hm-steps__prop, .hm-steps__art .hm-art--prop { height: 7rem; width: auto; }
.hm-steps__title { align-self: flex-start; margin: -2.1rem 0 .7rem .8rem; z-index: 2; }
.hm-steps__text { color: var(--hm-ink-soft); padding-inline: 1.1rem; }
.hm-steps__item:not(:has(.hm-steps__art)) { padding-top: 2.2rem; }
.hm-steps__item:not(:has(.hm-steps__art)) .hm-steps__title { margin-top: -1.2rem; }
@media (min-width: 700px) { .hm-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hm-steps__list:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hm-steps__list:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Included ---------- */
.hm-included__grid { display: grid; gap: 1.75rem 1.5rem; padding-top: .9rem; }
@media (min-width: 800px) { .hm-included__grid { grid-template-columns: 1.15fr .85fr; } }
.hm-included__col { padding: 0 1.4rem 1.5rem; box-shadow: var(--hm-backplate); }
.hm-included__title { margin: -1.05rem 0 1.2rem -.4rem; }
.hm-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.hm-checklist li { position: relative; padding-left: 2.25rem; line-height: 1.45; }
.hm-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .05em;
	width: 1.45rem;
	height: 1.45rem;
	border: var(--hm-line);
	border-radius: 4px;
	background: var(--hm-paper);
}
.hm-checklist--yes li::after {
	content: "";
	position: absolute;
	left: .5rem;
	top: -.1em;
	width: .6rem;
	height: 1.15rem;
	border: solid var(--hm-orange);
	border-width: 0 5px 5px 0;
	transform: rotate(40deg);
	filter: drop-shadow(1px 1px 0 var(--hm-ink));
}
.hm-checklist--quote li::before { background: var(--hm-paper); }
.hm-checklist--quote li::after {
	content: "+";
	position: absolute;
	left: 0;
	top: .05em;
	width: 1.45rem;
	line-height: 1.45rem;
	text-align: center;
	font-weight: 800;
	font-size: 1.1rem;
}
.hm-included__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 1.75rem; }
.hm-included__note { max-width: 44rem; color: var(--hm-ink-soft); }

/* ---------- Service areas: one post, three signs, house and trees (bible P1) ---------- */
.hm-areas__wrap { display: grid; gap: 2rem 1.5rem; }
.hm-areas__scene {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 25rem;
	margin: 0;
	background: var(--hm-sky-ground);
	border: var(--hm-line);
	border-radius: var(--hm-radius-box);
}
.hm-areas__scene::before { content: ""; position: absolute; inset: -50%; z-index: -2; background: var(--hm-halftone-light) 0 0 / 9px 9px; transform: rotate(22deg); }
.hm-areas__scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../brand/fx/cloud-2.svg") 8% 8% / 8rem auto no-repeat, url("../brand/fx/cloud-3.svg") 110% 22% / 11rem auto no-repeat; }
.hm-areas__house { position: absolute; right: -6%; bottom: -4%; width: 62%; max-width: 20rem; z-index: 0; }
.hm-areas__post { position: absolute; left: 30%; bottom: 0; top: 2.5rem; width: 14px; background: color-mix(in srgb, var(--hm-sign, #056847) 35%, var(--hm-ink)); border: 3px solid var(--hm-ink); border-bottom: 0; z-index: 1; }
.hm-areas__post::before { content: ""; position: absolute; left: 50%; top: -1.35rem; width: 1.5rem; height: 1.5rem; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--hm-cream) 0 18%, var(--hm-yellow) 22% 55%, var(--hm-orange) 90%); border: 3px solid var(--hm-ink); }
.hm-areas__signs { position: absolute; left: 6%; top: 4.5rem; z-index: 2; display: grid; gap: .55rem; width: min(80%, 19rem); margin: 0; padding: 0; list-style: none; }
.hm-areas__signs img { width: 100%; height: auto; filter: drop-shadow(4px 4px 0 var(--hm-ink)); }
.hm-areas__signs li:nth-child(1) { transform: rotate(-4deg); }
.hm-areas__signs li:nth-child(2) { transform: rotate(3deg); }
.hm-areas__signs li:nth-child(3) { transform: rotate(-2deg); }
.hm-areas__list { display: grid; gap: 1.6rem 12px; margin: 0; padding: .9rem 0 0; list-style: none; }
@media (min-width: 600px) { .hm-areas__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
	.hm-areas__wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
	.hm-areas__scene { position: sticky; top: calc(var(--hm-header-h) + 1.5rem); min-height: 30rem; }
}
.hm-sign { position: relative; display: grid; align-content: start; gap: .3rem; height: 100%; padding: 1.35rem 1.1rem 1rem; text-decoration: none; color: var(--hm-ink); background: var(--hm-paper); border: var(--hm-line); border-radius: var(--hm-radius-box); }
.hm-sign__tab { position: absolute; top: -1.05rem; left: .8rem; margin: 0; font-size: 1.25rem; }
.hm-sign__name { font-weight: 800; text-decoration: underline; text-decoration-color: var(--hm-orange); text-decoration-thickness: 3px; text-underline-offset: .2em; }
.hm-sign__line { font-size: .95rem; color: var(--hm-ink-soft); }
.hm-sign:hover .hm-sign__tab { transform: rotate(0); }
.hm-sign:hover { box-shadow: var(--hm-backplate-sm); }
.hm-areas__item.is-current .hm-sign { box-shadow: var(--hm-backplate); }
.hm-areas__item.is-current .hm-sign__tab::before { background: var(--hm-halftone-orange) 0 0 / 7px 7px, var(--hm-orange); }
/* Legacy sign plate (CSS fallback when sign SVGs are missing). */
.hm-sign__plate { display: grid; place-items: center; padding: .5rem 1rem .35rem; background: #056847; border: var(--hm-line); border-radius: 8px; }
.hm-sign__text { font-family: var(--hm-font-label); font-size: 1.8rem; line-height: 1; letter-spacing: .05em; color: var(--hm-cream); }

/* ---------- FAQ: list beside a sky panel (no dead space) ---------- */
.hm-faq__list { display: grid; gap: .9rem; max-width: 52rem; }
.hm-faq__item { background: var(--hm-paper); border: var(--hm-line); border-radius: var(--hm-radius-box); }
.hm-faq__item[open] { box-shadow: var(--hm-backplate-sm); }
.hm-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 56px;
	padding: .8rem 1.1rem;
	font-weight: 700;
	font-size: 1.08rem;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}
.hm-faq__q::-webkit-details-marker { display: none; }
/* Plus/minus on a mini yellow burst (punch 25). */
.hm-faq__icon { position: relative; flex: none; width: 2.2rem; height: 2.2rem; background: var(--hm-fx-burst) center / 140% no-repeat; }
.hm-faq__icon::before, .hm-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: .7rem; height: 3px; background: var(--hm-ink); transform: translate(-50%, -50%); transition: transform var(--hm-dur-fast) var(--hm-ease-standard); }
.hm-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.hm-faq__item[open] .hm-faq__icon::after { transform: translate(-50%, -50%) rotate(0); }
.hm-faq__item[open] .hm-faq__q { border-bottom: 2px dashed color-mix(in srgb, var(--hm-ink) 25%, transparent); }
.hm-faq__a { padding: 1rem 1.1rem 1.2rem; color: var(--hm-ink-soft); }
@media (min-width: 1000px) {
	.hm-faq { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 2rem; }
	.hm-faq > .hm-section__head, .hm-faq > .hm-faq__list { grid-column: 1; }
	.hm-faq::after {
		content: "";
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: stretch;
		min-height: 22rem;
		max-height: 34rem;
		border: var(--hm-line);
		border-radius: var(--hm-radius-box);
		background:
			url("../brand/props-inked/tv.svg") 50% 58% / 58% auto no-repeat,
			var(--hm-fx-burst) 50% 56% / 92% auto no-repeat,
			url("../brand/fx/cloud-1.svg") -10% 8% / 46% auto no-repeat,
			url("../brand/fx/cloud-4.svg") 112% 92% / 40% auto no-repeat,
			var(--hm-halftone-light) 0 0 / 9px 9px,
			var(--hm-sky-ground);
	}
}

/* ---------- CTA band ---------- */
.hm-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin-top: var(--hm-section);
	border-block: var(--hm-line-lg);
	background: var(--hm-halftone-orange) 0 0 / 7px 7px, var(--hm-orange);
	text-align: center;
}
.hm-cta::before {
	content: "";
	position: absolute;
	inset: -25%;
	z-index: -1;
	background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--hm-yellow) 38%, transparent) 0deg 4deg, transparent 4deg 12deg);
	pointer-events: none;
}
.hm-page > .hm-cta:last-child { margin-bottom: 0; }
.hm-cta--navy { background: var(--hm-sky-ground); color: var(--hm-ink); }
.hm-cta--navy::before { background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--hm-cream) 22%, transparent) 0deg 4deg, transparent 4deg 12deg); }
.hm-cta--yellow { background: var(--hm-halftone-yellow) 0 0 / 6px 6px, var(--hm-yellow); }
.hm-cta__inner { max-width: 52rem; margin-inline: auto; padding: clamp(2.75rem, 7vw, 4.5rem) var(--hm-gutter); }
.hm-cta__title { font-size: clamp(2.5rem, 1.5rem + 5vw, 4.6rem); transform-origin: center; }
.hm-cta__body { font-size: var(--hm-fs-lead); max-width: 38rem; margin-inline: auto; font-weight: 600; }
.hm-cta__body p { display: inline; padding: .3em .6em; background: var(--hm-paper); border: var(--hm-line); line-height: 2.1; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hm-cta .hm-actions { justify-content: center; }

/* ---------- Comic panel ---------- */
.hm-comic__panel { display: grid; overflow: hidden; border-width: var(--hm-stroke-lg); }
.hm-comic__copy { padding: clamp(1.5rem, 5vw, 3rem); }
.hm-comic__title { font-size: var(--hm-fs-h2); }
h3.hm-comic__title { font-size: var(--hm-fs-h3); }
.hm-comic__body { max-width: 38rem; font-size: 1.06rem; }
.hm-panel .hm-comic__copy > .hm-caption { margin-top: calc(-1 * clamp(1.5rem, 5vw, 3rem) + .9rem); }
.hm-comic__art {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	place-items: center;
	min-height: 16rem;
	padding: 1.5rem;
	background: var(--hm-sky-ground);
	border-top: var(--hm-line-lg);
}
.hm-comic__art::before { content: ""; position: absolute; inset: -50%; z-index: -2; background: var(--hm-halftone-light) 0 0 / 9px 9px; transform: rotate(22deg); }
.hm-comic__art::after { content: ""; position: absolute; inset: -30%; z-index: -1; background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--hm-cream) 26%, transparent) 0deg 3deg, transparent 3deg 14deg); -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 30%, transparent 62%); mask: radial-gradient(circle, transparent 0 18%, #000 30%, transparent 62%); }
.hm-panel__img { max-height: 24rem; width: auto; }
.hm-comic--sky .hm-comic__panel { background: var(--hm-sky-ground); }
.hm-comic--sky .hm-comic__body { background: var(--hm-paper); border: var(--hm-line); border-radius: var(--hm-radius-box); padding: 1rem; }
.hm-comic--sky .hm-comic__art { background: var(--hm-halftone-yellow) 0 0 / 6px 6px, var(--hm-yellow); }
/* "Navy" panels are rebalanced to a yellow Board-2 sunburst (punch 12). Navy stays for thin bars only. */
.hm-comic--navy .hm-comic__panel, .hm-comic--yellow .hm-comic__panel { background: var(--hm-halftone-yellow) 0 0 / 6px 6px, var(--hm-yellow); isolation: isolate; }
.hm-comic--navy .hm-comic__panel::before, .hm-comic--yellow .hm-comic__panel::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: repeating-conic-gradient(from 0deg at 78% 55%, color-mix(in srgb, white 32%, transparent) 0deg 5deg, transparent 5deg 15deg); pointer-events: none; }
.hm-comic--navy .hm-comic__body, .hm-comic--yellow .hm-comic__body { background: var(--hm-paper); border: var(--hm-line); border-radius: var(--hm-radius-box); padding: 1rem; }
.hm-comic--navy .hm-panel .hm-caption::before { background: var(--hm-paper); }
.hm-comic--text-only .hm-comic__copy { position: relative; z-index: 1; }
@media (min-width: 860px) {
	.hm-comic.has-art .hm-comic__panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
	.hm-comic__art { border-top: 0; border-left: var(--hm-line-lg); }
	.hm-comic--art-left.has-art .hm-comic__copy { order: 2; }
	.hm-comic--art-left .hm-comic__art { border-left: 0; border-right: var(--hm-line-lg); }
	.hm-comic__copy { align-self: center; }
	/* Text-only panels: fill the empty half with inked props on the sunburst (no dead space). */
	.hm-comic--text-only .hm-comic__panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
	.hm-comic--text-only .hm-comic__panel::after {
		content: "";
		min-height: 15rem;
		margin: 1.5rem 1.5rem 1.5rem 0;
		background:
			url("../brand/props-inked/tape-measure.svg") 18% 72% / 40% auto no-repeat,
			url("../brand/props-inked/tv.svg") 78% 30% / 56% auto no-repeat,
			var(--hm-fx-burst) 50% 50% / contain no-repeat;
	}
}

/* Level toy (MOTION 3.2): the TV in comic art can be levelled by the visitor. */
.hm-level { position: relative; display: grid; justify-items: center; gap: 1rem; min-height: 19rem; width: 100%; align-content: center; }
.hm-level__tv { rotate: var(--tilt, 0deg); transition: rotate var(--hm-dur-fast) var(--hm-ease-standard); }
.hm-level__tv img { width: min(17rem, 70vw); height: auto; }
.hm-level[data-level] .hm-level__tv { transition-timing-function: var(--hm-ease-thunk); transition-duration: var(--hm-dur-slam); }
.hm-level__ctl { display: grid; place-items: center; gap: .65rem; width: 100%; }
.hm-level__hint { text-transform: uppercase; text-align: center; rotate: -1deg; box-shadow: var(--hm-shadow-sm, 2px 2px 0 var(--hm-ink)); }
.hm-level[data-level] .hm-level__hint { background: var(--hm-yellow); }
.hm-level__ctl[hidden] { display: grid; visibility: hidden; }
.hm-level__vial {
	-webkit-appearance: none;
	appearance: none;
	width: min(16rem, 80%);
	height: 2.4rem;
	min-height: 0;
	margin: 0;
	padding: 0 .2rem;
	border: var(--hm-line);
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--hm-yellow) 35%, var(--hm-paper));
	background-image: linear-gradient(90deg, transparent calc(50% - 1.1rem), var(--hm-ink) 0 calc(50% - 1.1rem + 2px), transparent 0 calc(50% + 1.1rem - 2px), var(--hm-ink) 0 calc(50% + 1.1rem), transparent 0);
	box-shadow: var(--hm-shadow-sm);
	cursor: grab;
	touch-action: pan-y;
}
.hm-level__vial::-webkit-slider-thumb { -webkit-appearance: none; width: 1.9rem; height: 1.4rem; border-radius: 50%; background: var(--hm-paper); border: var(--hm-line); box-shadow: inset -3px -3px 0 color-mix(in srgb, var(--hm-sky) 35%, transparent); }
.hm-level__vial::-moz-range-thumb { width: 1.9rem; height: 1.4rem; border-radius: 50%; background: var(--hm-paper); border: var(--hm-line); }
.hm-level[data-level] .hm-level__vial { background-color: var(--hm-yellow); }
.hm-level__vial:focus-visible { outline: 3px solid var(--hm-ink); outline-offset: 2px; box-shadow: 0 0 0 8px var(--hm-yellow); }
.hm-level__hint { margin: 0; font-family: var(--hm-font-label); font-size: 1.1rem; letter-spacing: .05em; color: var(--hm-ink); background: var(--hm-paper); padding: .1rem .5rem; border: 2px solid var(--hm-ink); }

/* ---------- Before / after ---------- */
.hm-ba__figure { margin: 0; overflow: hidden; }
.hm-ba__grid { display: grid; }
.hm-ba__pane { position: relative; aspect-ratio: 4 / 3; background: var(--hm-cream); }
.hm-ba__pane + .hm-ba__pane { border-top: var(--hm-line-lg); }
.hm-ba__img { width: 100%; height: 100%; object-fit: cover; }
.hm-ba__empty { width: 100%; height: 100%; background-image: var(--hm-halftone); background-size: 6px 6px; }
.hm-ba__pane--after .hm-tag { background: var(--hm-orange); }
.hm-ba__caption { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: 1rem 1.2rem; border-top: var(--hm-line-lg); font-size: .98rem; }
.hm-ba__kind { padding: .2rem .55rem; background: var(--hm-ink); color: var(--hm-cream); font-weight: 700; font-size: .85rem; border-radius: 4px; }
.hm-ba__kind--photo { background: var(--hm-navy); }
@media (min-width: 760px) {
	.hm-ba__grid { grid-template-columns: 1fr 1fr; }
	.hm-ba__pane + .hm-ba__pane { border-top: 0; margin-left: -2.5rem; clip-path: polygon(2.5rem 0, 100% 0, 100% 100%, 0 100%); }
	.hm-ba__pane + .hm-ba__pane::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2.5rem; background: linear-gradient(to top right, transparent calc(50% - 3px), var(--hm-ink) calc(50% - 3px), var(--hm-ink) calc(50% + 3px), transparent calc(50% + 3px)); z-index: 1; }
	.hm-ba__pane--after .hm-tag { left: 3.25rem; }
}

/* ---------- About Mike: tight face crop with a cream burst behind the head (bible P5) ---------- */
.hm-about__panel { display: grid; overflow: hidden; border-width: var(--hm-stroke-lg); }
.hm-about__art {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	align-items: end;
	min-height: 22rem;
	background: var(--hm-sky-ground);
	border-bottom: var(--hm-line-lg);
}
.hm-about__art::before { content: ""; position: absolute; inset: -50%; z-index: -2; background: var(--hm-halftone-light) 0 0 / 9px 9px; transform: rotate(22deg); }
.hm-about__art::after { content: ""; position: absolute; inset: -30%; z-index: -1; background: repeating-conic-gradient(from 0deg at 50% 45%, color-mix(in srgb, var(--hm-cream) 70%, transparent) 0deg 4deg, transparent 4deg 13deg); -webkit-mask: radial-gradient(circle at 50% 45%, #000 0 20%, transparent 44%); mask: radial-gradient(circle at 50% 45%, #000 0 20%, transparent 44%); }
.hm-about__img { width: 100%; height: 100%; max-height: 34rem; object-fit: cover; object-position: 50% 0; }
.hm-about__copy { padding: clamp(1.5rem, 5vw, 3rem); }
.hm-about__copy > .hm-caption { margin-top: calc(-1 * clamp(1.5rem, 5vw, 3rem) + .9rem); }
.hm-about__title { font-size: var(--hm-fs-h2); }
.hm-about__intro { font-size: var(--hm-fs-lead); line-height: 1.5; }
.hm-about__facts { display: grid; gap: .75rem; margin: 1.5rem 0; }
.hm-about__fact { display: grid; gap: .15rem; padding: .7rem .9rem; border: var(--hm-line); border-radius: var(--hm-radius-box); background: var(--hm-cream); }
.hm-about__fact dt { font-family: var(--hm-font-display); font-size: 1.2rem; letter-spacing: .03em; color: var(--hm-ink); }
.hm-about__fact dd { margin: 0; }
.hm-about__fact.is-pending { border-style: dashed; border-color: var(--hm-orange); background: var(--hm-paper); }
.hm-about__fact.is-pending dd { font-style: italic; color: var(--hm-ink-soft); }
.hm-about__signoff { font-family: var(--hm-font-display); font-size: 2.2rem; color: var(--hm-orange); -webkit-text-stroke: .08em var(--hm-ink); paint-order: stroke fill; text-shadow: var(--hm-extrude); transform: rotate(-3deg); margin: 1.25rem 0; }
@media (min-width: 900px) {
	.hm-about.has-art .hm-about__panel { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
	.hm-about__art { border-bottom: 0; border-right: var(--hm-line-lg); }
	.hm-about__img { position: absolute; inset: 0; max-height: none; }
}

/* ---------- Plugin slot fallback: cream card with a yellow tab ---------- */
.hm-slot {
	position: relative;
	max-width: calc(var(--hm-wide) + 2 * var(--hm-gutter));
	margin: 2.5rem auto 0;
	padding: 2rem 1.5rem 1.5rem;
	border: var(--hm-line);
	border-radius: var(--hm-radius-box);
	background: var(--hm-paper);
	box-shadow: var(--hm-backplate);
	text-align: center;
}
.hm-page > .hm-slot { margin-inline: max(var(--hm-gutter), calc((100% - var(--hm-wide)) / 2)); }
.hm-slot__text { font-size: 1.08rem; font-weight: 600; }

/* ---------- Page title (page.html) ---------- */
.hm-page-head { padding: clamp(2rem, 6vw, 4rem) var(--hm-gutter) 1.5rem; max-width: calc(var(--hm-text) + 2 * var(--hm-gutter)); margin-inline: auto; }
.hm-page-head .wp-block-post-title { position: relative; isolation: isolate; display: inline-block; font-size: var(--hm-fs-h1); padding: .2em .5em .26em .45em; line-height: .92; color: var(--hm-orange); -webkit-text-stroke: .08em var(--hm-ink); paint-order: stroke fill; text-shadow: var(--hm-extrude); transform: rotate(-2deg); transform-origin: left; }
.hm-page-head .wp-block-post-title::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hm-fx-plate) center / 100% 100% no-repeat; filter: drop-shadow(5px 6px 0 var(--hm-ink)); }

/* ---------- Footer: orange contact bar with cream pill (bible P1, P6), navy columns below ---------- */
.hm-footer {
	margin-top: var(--hm-section);
	background: var(--hm-navy);
	color: var(--hm-cream);
	border-top: var(--hm-line-lg);
}
body:has(.hm-page > .hm-cta:last-child) .hm-footer { margin-top: 0; }
.hm-footer a { color: var(--hm-cream); }
.hm-footer a:hover { color: var(--hm-yellow); }
.hm-footer__bar { background: var(--hm-halftone-orange) 0 0 / 7px 7px, var(--hm-orange); border-bottom: var(--hm-line-lg); padding: 1rem var(--hm-gutter); }
.hm-footer__pill {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35rem 1.25rem;
	max-width: 52rem;
	margin: 0 auto;
	padding: .55rem 1.25rem;
	background: var(--hm-paper);
	border: var(--hm-line);
	border-radius: 12px;
	box-shadow: var(--hm-shadow-sm, 4px 4px 0 var(--hm-ink));
	font-family: var(--hm-font-label);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1;
	transform: rotate(-1deg);
}
@media (max-width: 520px) {
	.hm-footer__pill { flex-wrap: nowrap; gap: .9rem; padding-inline: .9rem; font-size: clamp(1.05rem, 4.6vw, 1.25rem); letter-spacing: .03em; }
}
.hm-footer .hm-footer__pill a { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; color: var(--hm-ink); text-decoration: none; }
.hm-footer .hm-footer__pill a:hover { color: var(--hm-ink); text-decoration: underline; text-decoration-color: var(--hm-orange); }
.hm-footer__pill a::before { content: ""; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--hm-globe-icon) center / contain no-repeat; mask: var(--hm-globe-icon) center / contain no-repeat; }
.hm-footer__pill a[href^="tel"]::before { -webkit-mask-image: var(--hm-phone-icon); mask-image: var(--hm-phone-icon); }
.hm-footer__rule { width: 3px; align-self: stretch; background: var(--hm-ink); }
@media (max-width: 340px) { .hm-footer__pill { flex-wrap: wrap; } .hm-footer__rule { display: none; } }
.hm-footer__inner {
	display: grid;
	gap: 2rem;
	max-width: calc(var(--hm-wide) + 2 * var(--hm-gutter));
	margin-inline: auto;
	padding: 2.5rem var(--hm-gutter) 2rem;
}
@media (min-width: 760px) { .hm-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.hm-footer__logo { display: inline-block; text-decoration: none; }
.hm-footer .hm-logo__the { color: var(--hm-cream); }
.hm-logo--badge { width: 9rem; }
.hm-footer__tagline { font-family: var(--hm-font-display); font-size: 1.5rem; letter-spacing: .04em; margin: 1rem 0 .25rem; }
.hm-footer__phone { font-family: var(--hm-font-display); font-size: 2rem; letter-spacing: .03em; text-decoration: none; color: var(--hm-yellow) !important; }
.hm-footer__head { font-family: var(--hm-font-label); font-size: 1.35rem; letter-spacing: .06em; color: var(--hm-yellow); margin-bottom: .75rem; }
.hm-footer__col ul { list-style: none; margin: 0; padding: 0; }
.hm-footer__col li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 500; }
.hm-footer__col li a:hover { text-decoration: underline; }
.hm-footer__note { font-size: .9rem; opacity: .9; }
.hm-footer__base {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	align-items: center;
	max-width: calc(var(--hm-wide) + 2 * var(--hm-gutter));
	margin-inline: auto;
	padding: 1.25rem var(--hm-gutter) 1.5rem;
	border-top: 2px solid color-mix(in srgb, var(--hm-cream) 25%, transparent);
	font-size: .875rem;
}
.hm-footer__legal-list { display: flex; flex-wrap: wrap; gap: 0 1.1rem; list-style: none; margin: 0; padding: 0; }
.hm-footer__legal-list a { display: inline-flex; min-height: 44px; align-items: center; }
.hm-footer__copy { margin: 0; }
/* Agency credit: discreet but AA (cream mixed 72% on navy stays above 7:1). */
.hm-footer__credit { margin: 0 0 0 auto; font-size: .8rem; }
.hm-footer__credit a { display: inline-flex; align-items: center; min-height: 44px; color: color-mix(in srgb, var(--hm-cream) 72%, var(--hm-navy)); text-decoration: none; }
.hm-footer__credit a:hover { color: var(--hm-cream); text-decoration: underline; }
.hm-footer a.hm-btn, .hm-footer a.hm-btn:hover { color: var(--hm-ink); }

/* Legal skeleton pages */
.hm-page--legal .hm-caption-block { max-width: calc(var(--hm-text) + 2 * var(--hm-gutter)); }
.hm-page--legal { padding-bottom: var(--hm-section); }

/* Small "s" in all-caps display faces (TVs). Inherits by default; only display contexts opt in (punch 19). */
.hm-lc { font-size: inherit; letter-spacing: inherit; }
:is(.hm-display, .hm-tab, .hm-btn, .hm-burst, .hm-logo__tag, .hm-footer__tagline, .hm-sign__text, .hm-steps__title, .hm-included__title, .hm-trust__title, .hm-caption:not(.hm-caption--white):not(.hm-caption--draft), .hm-dock, .hm-nav, .hm-sfx, .hm-footer__head, .wp-block-post-title, .hm-prose h2, .hm-faq__icon) .hm-lc:not(:is(.hm-burst__line, .hm-ribbon) .hm-lc) { font-size: .74em; letter-spacing: .01em; }
.hm-page > .hm-section + .hm-trust { margin-top: var(--hm-section); }

/* Prop SVGs scale up to fill their slot (intrinsic size is 128px). */
.hm-art--prop { height: auto; }
.hm-comic__art .hm-art--prop { width: min(70%, 17rem); max-height: none; }
.hm-hero__art > * { position: relative; z-index: 1; }
:root { --hm-burst-shape: var(--hm-burst-20); }
.hm-steps__art .hm-art--prop { height: 7rem; width: auto; }

/* ---------- Refinements after visual review ---------- */
.hm-panel .hm-caption { display: block; width: fit-content; }
.hm-level__tv .hm-art--prop, .hm-comic__art .hm-level__tv .hm-art--prop { width: min(17rem, 62vw); max-height: none; }
.hm-steps__art { height: 10.5rem; }
.hm-steps__art .hm-art--prop, .hm-steps__prop { height: 8.25rem; }
.hm-speech__card, .hm-speech__text { text-wrap: balance; }
.hm-speech__text { display: block; }
/* motion.js measures headline lines unrotated, then sizes each plate to its widest line. */
.hm-fit-measure .hm-display { transform: none !important; }
.hm-ribbon > span { text-wrap: balance; }
.hm-cta__body p { display: inline-block; line-height: 1.45; padding: .55em .9em; border-radius: var(--hm-radius-box); }
.hm-display { display: block; width: fit-content; }
.hm-hero__caption { display: block; width: fit-content; }
/* Cover rays: a fan of cream strokes rising from behind the headline plate. */
.hm-hero__sky { background-size: clamp(22rem, 46vw, 46rem) auto; background-position: 22% 26%; }
@media (max-width: 959px) { .hm-hero__sky { background-size: 34rem auto; background-position: 24% 21%; } }
/* Page heroes without art: the live price burst (pricing) or an inked prop scene fills the right side. */
.hm-hero.no-art .hm-hero__inner:has(.hm-hero__art) { grid-template-columns: minmax(0, 1fr); }
.hm-hero.no-art .hm-hero__art .hm-hero__burst { width: min(20rem, 78vw); padding: 3.8rem 3.2rem 4.4rem; margin: 1.5rem auto 0; }
.hm-hero.no-art .hm-hero__art .hm-burst__price { font-size: 43cqi; }
.hm-hero.no-art .hm-hero__art .hm-burst__line { font-size: 1.1rem; }
@media (min-width: 960px) {
	.hm-hero.no-art .hm-hero__inner:has(.hm-hero__art) { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 2.5rem; }
	.hm-hero.no-art .hm-hero__inner:not(:has(.hm-hero__art)) { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 2.5rem; }
	.hm-hero.no-art .hm-hero__inner:not(:has(.hm-hero__art))::after {
		content: "";
		align-self: stretch;
		min-height: 20rem;
		background: url("../brand/props-inked/house.svg") 62% 64% / 46% auto no-repeat, url("../brand/props-inked/level.svg") 16% 86% / 34% auto no-repeat, var(--hm-fx-burst) 55% 55% / contain no-repeat;
	}
	.hm-page--book .hm-hero.no-art .hm-hero__inner::after { background: url("../brand/props-inked/calendar.svg") 58% 52% / 44% auto no-repeat, url("../brand/props-inked/phone.svg") 18% 84% / 26% auto no-repeat, var(--hm-fx-burst) 55% 55% / contain no-repeat; }
	.hm-page--contact .hm-hero.no-art .hm-hero__inner::after { background: url("../brand/props-inked/phone.svg") 58% 52% / 42% auto no-repeat, var(--hm-fx-burst) 55% 55% / contain no-repeat; }
}

/* ---------- Motion bases that must apply without motion.css (it loads only for no-preference) ---------- */
.hm-shimmer { position: relative; overflow: hidden; isolation: isolate; }
.hm-inklink, .hm-footer__col li a, .hm-footer__legal-list a { position: relative; text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: reduce) {
	.hm-level__tv { transition: none; }
	.hm-btn, .hm-btn:hover, .hm-btn:active { transform: none; transition: none; }
	.hm-btn:active { box-shadow: var(--hm-shadow-sm); filter: brightness(.95); }
	.hm-dock { transition: none; }
}

/* Price asterisk (the plugin emits .ssm-price__mark inside [ssm_price]). In bursts it is a small
   superscript with no outline or extrusion; in running text a plain superscript. */
.hm-burst__price .ssm-price__mark, .hm-burst .ssm-price__mark { font-family: var(--hm-font-body); font-weight: 900; font-size: .48em; vertical-align: top; line-height: 1; color: var(--hm-ink); -webkit-text-stroke: 0; text-shadow: none; margin-left: .02em; }
/* In a burst the small * gets a cream halo so it still reads where it crosses the star's ink edge. */
.hm-burst__price .ssm-price__mark { -webkit-text-stroke: .14em var(--hm-cream); paint-order: stroke fill; }
.ssm-price__mark { font-size: .75em; vertical-align: super; line-height: 0; }
.hm-display .ssm-price__mark { -webkit-text-stroke: 0; text-shadow: none; font-size: .7em; font-family: var(--hm-font-body); font-weight: 900; color: var(--hm-ink); }

/* Hero punch line: the subheading plus the approved speech lines share one grid cell, so the
   ribbon is always as tall as its longest line (no layout shift). No autoplay or loop
   (STYLEGUIDE 9); a tap flips to the next line with the 320ms comic pop. */
.hm-rotator > span { display: inline-grid; }
.hm-rotator__item { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 150ms linear, visibility 0s linear 150ms; }
.hm-rotator__item.is-on { visibility: visible; opacity: 1; transition: opacity 150ms linear, visibility 0s; }
.hm-rotator > span[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hm-rotator > span[role="button"]:focus-visible { outline: 3px solid var(--hm-ink); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
	.hm-rotator.is-flip > span { animation: hm-rotator-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1); }
}
@keyframes hm-rotator-pop { from { scale: .9; } }