/*
 * Home preview B, round 3, "A with a dark hero" (page-templates/home-b.php,
 * parts/home-b/*). Enqueued by that template only, and every rule is scoped
 * to body.hdc-home-b, which carries palette A (ADR 0018, graphite and safety
 * yellow) and the Archivo font, so the form and no other page change. A copy
 * of home-a.css; only the hero section differs (owner, 2026-10-07).
 *
 * One accent, and it means Call: the Call buttons, the call band and the
 * call bar are yellow; Get a written quote is always the outline or ink
 * button. Yellow is otherwise a fill (map pins with an ink edge, the play
 * button) or a hover mark on ink: never yellow text or rules on white (1.8:1).
 * Square corners, hairlines and type for structure, no shadows, no pills.
 * Breakpoints 40rem, 48rem, 64rem, 80rem. Layout rules are not nested.
 */

/* Archivo (OFL, assets/fonts/archivo/OFL.txt), Latin subset, wdth 75 to 100, wght 400 to 800. */
@font-face {
	font-family: "Archivo";
	src: url("../../fonts/archivo/archivo-wdth-wght-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-stretch: 75% 100%;
	font-style: normal;
	font-display: swap;
}

/* Arial matched to Archivo's metrics, so the swap does not move the page. */
@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial"), local("ArialMT");
	size-adjust: 98.67%;
	ascent-override: 88.98%;
	descent-override: 21.28%;
	line-gap-override: 0%;
}

@layer tokens {
	body.hdc-home-b {
		/* Palette A. On white: ink 17.6, graphite 12.6, steel 4.98 (4.52 on panel). On ink: mist 9.4, fog 12.3, yellow 10.0. */
		--ink: #16191d;
		--body: #2e343b;
		--graphite: #2e343b;
		--steel: #66717c;
		--mute: #66717c;
		--line: #dce0e4;
		--line-dark: #3a414a;
		--control: #8a929c;
		--panel: #f3f4f6;
		--white: #fff;
		--mist: #aeb6bf;
		--fog: #d5dae0;
		--accent: #f5b700;
		--accent-strong: #e0a800;
		--error: #b42318;
		--success: #1b7a3a;
		--focus: #16191d;
		--focus-ring: 3px solid var(--focus);
		--focus-offset: 2px;
		--radius: 0;

		--link: #16191d;
		--link-hover: #16191d;
		--link-line: underline;
		--link-hover-line: underline;

		--font-sans: "Archivo", "Archivo Fallback", arial, sans-serif;
		--wp--preset--font-family--sans: "Archivo", "Archivo Fallback", arial, sans-serif;
		--wp--preset--color--ink: #16191d;
		--wp--preset--color--body: #2e343b;
		--wp--preset--color--accent: #f5b700;

		/* Layout. */
		--gutter: 1rem;
		--wrap: 110rem;
		--header: 3.5rem;
		--sticky: 0px;
		--hint: 5.5rem;
		--bar: 3.5rem;
		--space-section: 3.5rem;
	}

	@media (min-width: 40rem) {
		body.hdc-home-b {
			--gutter: 1.5rem;
		}
	}

	@media (min-width: 64rem) {
		body.hdc-home-b {
			--gutter: 3rem;
			--header: 4.5rem;
			--sticky: 4.5rem;
			--hint: 10rem;
			--space-section: 5.5rem;
		}
	}
}

@layer base {
	body.hdc-home-b {
		background: var(--white);
		color: var(--body);
		font-size: 1rem;
		font-stretch: 100%;
	}

	.hdc-home-b h1,
	.hdc-home-b h2,
	.hdc-home-b h3 {
		font-stretch: 75%;
		letter-spacing: 0;
	}

	.hdc-home-b [id] {
		scroll-margin-top: var(--sticky);
	}

	.hdc-home-b .hdc-icon {
		stroke-width: 2;
	}

	/* One stroke on the page: every icon draws a 2px line at any size. */
	.hdc-home-b .hdc-icon * {
		vector-effect: non-scaling-stroke;
	}

	@media (max-width: 63.99rem) {
		html:has(body.hdc-home-b) {
			scroll-padding-bottom: calc(var(--bar) + 1rem);
		}
	}
}

@layer layout {
	.hdc-home-b .hdc-b-wrap {
		width: 100%;
		max-width: calc(var(--wrap) + 2 * var(--gutter));
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	.hdc-home-b .hdc-b-title {
		color: var(--ink);
		font-size: clamp(2.5rem, 1.75rem + 3vw, 4.75rem);
		font-weight: 750;
		line-height: 0.95;
		text-wrap: balance;
	}
}

@layer components {
	/* Skip link. */
	.hdc-home-b .hdc-b-skip {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 60;
		padding: 0.75rem 1rem;
		background: var(--accent);
		color: var(--ink);
		font-weight: 700;
		transform: translateY(-120%);
	}

	.hdc-home-b .hdc-b-skip:focus {
		transform: none;
	}

	/* Buttons. */
	.hdc-home-b .hdc-b-btn {
		display: inline-flex;
		position: relative;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-height: 3.25rem;
		padding: 0.5rem 1.5rem;
		border: 2px solid transparent;
		border-radius: 0;
		font-size: 1.0625rem;
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		transition: background-color 0.15s, border-color 0.15s, color 0.15s;
	}

	.hdc-home-b .hdc-b-btn--accent {
		border-color: var(--accent);
		background: var(--accent);
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: none;
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-btn--accent:hover {
		border-color: var(--accent-strong);
		background: var(--accent-strong);
	}

	.hdc-home-b .hdc-b-btn--line {
		border-color: var(--white);
		background: transparent;
		--link: var(--white);
		--link-hover: var(--white);
		--link-line: none;
		--link-hover-line: none;
		color: var(--white);
	}

	.hdc-home-b .hdc-b-btn--line:hover {
		background: rgb(255 255 255 / 0.1);
	}

	.hdc-home-b .hdc-b-btn--ink {
		border-color: var(--ink);
		background: var(--ink);
		--link: var(--white);
		--link-hover: var(--white);
		--link-line: none;
		--link-hover-line: none;
		color: var(--white);
	}

	.hdc-home-b .hdc-b-btn--ink:hover {
		border-color: var(--graphite);
		background: var(--graphite);
	}

	.hdc-home-b .hdc-b-btn .hdc-icon {
		width: 1.25rem;
		height: 1.25rem;
	}

	/* A call box: the tel: link is stretched over the whole box. */
	.hdc-home-b .hdc-b-call {
		display: inline-flex;
		position: relative;
		align-items: center;
		gap: 0.5rem;
		white-space: nowrap;
	}

	.hdc-home-b .hdc-b-call__link {
		color: inherit;
		text-decoration: none;
	}

	.hdc-home-b .hdc-b-call__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.hdc-home-b .hdc-b-call:has(.hdc-b-call__link:focus-visible) {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}

	.hdc-home-b .hdc-b-call__link:focus-visible {
		outline: none;
	}

	.hdc-home-b .hdc-b-call__label {
		font-weight: 700;
	}

	/* Square icon button (rail controls). */
	.hdc-home-b .hdc-b-square {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		border: 1px solid var(--control);
		background: var(--white);
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-square:hover:not(:disabled) {
		border-color: var(--ink);
	}

	.hdc-home-b .hdc-b-square:disabled {
		border-color: var(--line);
		color: var(--control);
		cursor: default;
	}

	/* Header. */
	.hdc-home-b .hdc-b-header {
		position: relative;
		z-index: 40;
		background: var(--ink);
		color: var(--white);
		--focus: var(--accent);
	}

	.hdc-home-b .hdc-b-header__bar {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		width: 100%;
		max-width: calc(var(--wrap) + 2 * var(--gutter));
		min-height: var(--header);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	.hdc-home-b .hdc-b-header__brand {
		min-width: 0;
		margin-inline-end: auto;
		color: var(--white);
		font-size: 1.1875rem;
		font-stretch: 75%;
		font-weight: 750;
		line-height: 1.05;
		letter-spacing: 0.01em;
		text-decoration: none;
	}

	@media (max-width: 23.99rem) {
		.hdc-home-b .hdc-b-header__brand {
			font-size: 1.0625rem;
		}

		.hdc-home-b .hdc-b-header__toggle span {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip-path: inset(50%);
		}
	}

	.hdc-home-b .hdc-b-header__nav,
	.hdc-home-b .hdc-b-header__actions {
		display: none;
	}

	.hdc-home-b .hdc-b-header__call,
	.hdc-home-b .hdc-b-header__toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		min-height: 2.75rem;
		padding: 0 0.75rem;
		border: 1px solid var(--line-dark);
		color: var(--white);
		font-size: 0.9375rem;
		font-weight: 700;
	}

	.hdc-home-b .hdc-b-header__call {
		border-color: var(--accent);
		background: var(--accent);
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-header__call .hdc-icon,
	.hdc-home-b .hdc-b-header__toggle .hdc-icon {
		width: 1.125rem;
		height: 1.125rem;
	}

	@media (min-width: 64rem) {
		.hdc-home-b .hdc-b-header {
			position: sticky;
			top: 0;
		}
	}

	/* The full header from 72rem; below it the wordmark, Call and Menu. */
	@media (min-width: 72rem) {
		.hdc-home-b .hdc-b-header__bar {
			gap: 2rem;
		}

		.hdc-home-b .hdc-b-header__brand {
			margin-inline-end: 0;
			font-size: 1.375rem;
		}

		.hdc-home-b .hdc-b-header__nav {
			display: block;
			margin-inline-end: auto;
		}

		.hdc-home-b .hdc-b-header__menu {
			display: flex;
			gap: 0.25rem;
		}

		.hdc-home-b .hdc-b-header__menu a {
			display: inline-flex;
			align-items: center;
			min-height: 2.75rem;
			padding: 0 0.75rem;
			color: var(--fog);
			font-weight: 600;
			text-decoration: none;
		}

		.hdc-home-b .hdc-b-header__menu a:hover {
			color: var(--white);
			text-decoration: underline;
			text-decoration-color: var(--accent);
			text-decoration-thickness: 2px;
			text-underline-offset: 0.4em;
		}

		.hdc-home-b .hdc-b-header__actions {
			display: flex;
			align-items: center;
			gap: 1.5rem;
		}

		.hdc-home-b .hdc-b-header__phone {
			color: var(--white);
			font-size: 1.0625rem;
			font-weight: 700;
			font-variant-numeric: tabular-nums;
		}

		.hdc-home-b .hdc-b-header__phone .hdc-icon {
			width: 1.125rem;
			height: 1.125rem;
			color: var(--accent);
		}

		.hdc-home-b .hdc-b-header__quote {
			min-height: 2.75rem;
			padding-inline: 1.125rem;
			font-size: 1rem;
		}

		.hdc-home-b .hdc-b-header__call,
		.hdc-home-b .hdc-b-header__toggle {
			display: none;
		}
	}

	/*
	 * The logo (owner, 2026-10-08): inline SVG from assets/brand, the outlined
	 * version on ink (black disc, white outline, yellow stripes, white
	 * lettering). 28px tall on phones, 32px from 48rem, 40px from 72rem.
	 */
	.hdc-home-b .hdc-b-logo {
		display: inline-flex;
		flex: none;
		align-items: center;
		min-height: 2.75rem;
	}

	.hdc-home-b .hdc-b-logo__svg {
		display: block;
		width: auto;
		height: 1.75rem;
	}

	@media (min-width: 48rem) {
		.hdc-home-b .hdc-b-logo__svg {
			height: 2rem;
		}
	}

	@media (min-width: 72rem) {
		.hdc-home-b .hdc-b-header .hdc-b-logo__svg {
			height: 2.5rem;
		}
	}

	/*
	 * The family line: "A Heavy Duty Mobility brand" and the real HDM logo
	 * (owner, 2026-10-07). Footer only. The logo large and in color (owners,
	 * 2026-10-20): the reverse logo, white lettering and the green disc.
	 */
	.hdc-home-b .hdc-b-family {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.25rem 0.875rem;
		margin: 0;
		color: var(--fog);
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.2;
	}

	.hdc-home-b .hdc-b-family__logo {
		display: block;
		flex: none;
		width: auto;
		height: 2.25rem;
	}

	/* Drawer. */
	.hdc-home-b .hdc-b-drawer {
		width: min(24rem, 100vw);
		max-width: 100vw;
		height: 100%;
		max-height: 100%;
		margin: 0 0 0 auto;
		padding: 0;
		border: 0;
		background: var(--white);
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-drawer::backdrop {
		background: rgb(22 25 29 / 0.6);
	}

	.hdc-home-b .hdc-b-drawer__inner {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
		min-height: 100%;
		padding: 0 var(--gutter) 1.5rem;
	}

	.hdc-home-b .hdc-b-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: var(--header);
		border-bottom: 1px solid var(--line);
	}

	.hdc-home-b .hdc-b-drawer__title {
		font-size: 1.25rem;
		font-stretch: 75%;
		font-weight: 750;
	}

	.hdc-home-b .hdc-b-drawer__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-drawer__group {
		color: var(--steel);
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.hdc-home-b .hdc-b-drawer__menu a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 3rem;
		border-bottom: 1px solid var(--line);
		color: var(--ink);
		font-size: 1.125rem;
		font-weight: 600;
		text-decoration: none;
	}

	.hdc-home-b .hdc-b-drawer__menu a .hdc-icon {
		width: 1.125rem;
		height: 1.125rem;
		color: var(--steel);
	}

	.hdc-home-b .hdc-b-drawer__menu--pages {
		margin-top: 1rem;
	}

	.hdc-home-b .hdc-b-drawer__actions {
		display: grid;
		gap: 0.625rem;
		margin-top: auto;
	}

	/*
	 * 1. Hero: the N1 photo full bleed under a graphite overlay that fades out
	 * (owner, 2026-10-07, after Keith's industrial hero), the words over it in
	 * white. Below 64rem the photo comes first and the overlay rises from its
	 * foot, where the words start; from 64rem the photo fills the hero and the
	 * overlay runs from the left, clear over the operator and the train. Text
	 * only ever sits where the overlay is at least 0.82 ink (8:1 or more for
	 * white on the brightest floor), so the photo never sets its contrast.
	 */
	.hdc-home-b .hdc-b-hero {
		display: grid;
		position: relative;
		overflow: hidden;
		background: var(--ink);
		color: var(--white);
		--focus: var(--accent);
		--shade: 22 25 29; /* --ink as channels, for the overlay. */
		--overlap: 7rem;
	}

	.hdc-home-b .hdc-b-hero__media {
		position: relative;
		aspect-ratio: 4 / 5;
		max-height: 58svh;
		overflow: hidden;
		background: var(--graphite);
	}

	.hdc-home-b .hdc-b-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgb(var(--shade)) 0, rgb(var(--shade) / 0.92) calc(var(--overlap) * 0.6), rgb(var(--shade) / 0.84) var(--overlap), rgb(var(--shade) / 0.4) calc(var(--overlap) + 5rem), rgb(var(--shade) / 0) calc(var(--overlap) + 10rem));
		pointer-events: none;
	}

	.hdc-home-b .hdc-b-hero__picture,
	.hdc-home-b .hdc-b-hero__img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.hdc-home-b .hdc-b-hero__img {
		object-fit: cover;
		object-position: 50% 40%;
	}

	.hdc-home-b .hdc-b-hero__body {
		position: relative;
		width: 100%;
	}

	.hdc-home-b .hdc-b-hero__media + .hdc-b-hero__body {
		margin-top: calc(-1 * var(--overlap));
	}

	.hdc-home-b .hdc-b-hero__panel {
		display: grid;
		gap: 1rem;
		padding: 1rem var(--gutter) 1.75rem;
	}

	.hdc-home-b .hdc-b-hero__title {
		color: var(--white);
		font-size: clamp(1.875rem, 8.6vw, 2.75rem);
		font-weight: 780;
		line-height: 1;
		text-wrap: balance;
	}

	.hdc-home-b .hdc-b-hero__text {
		max-width: 36rem;
		color: var(--fog);
		font-size: 1rem;
		line-height: 1.5;
	}

	.hdc-home-b .hdc-b-hero__cta {
		display: grid;
		gap: 1rem;
	}

	.hdc-home-b .hdc-b-hero__actions {
		display: grid;
		gap: 0.625rem;
		margin-top: 0.25rem;
	}

	.hdc-home-b .hdc-b-hero__actions .hdc-b-btn {
		width: 100%;
	}

	.hdc-home-b .hdc-b-hero__person {
		color: var(--fog);
		font-size: 0.9375rem;
	}

	/* Three square fact boxes under the words: an icon, a short title, one line. Square corners, a hairline, no shadow. */
	.hdc-home-b .hdc-b-hero__strip {
		position: relative;
		margin-top: -0.5rem;
		padding: 0 var(--gutter) 1.75rem;
	}

	.hdc-home-b .hdc-b-hero__facts {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.hdc-home-b .hdc-b-fact {
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
		min-width: 0;
		padding: 0.75rem 0.75rem 0.875rem;
		border: 1px solid rgb(255 255 255 / 0.3);
		background: rgb(var(--shade) / 0.72);
	}

	.hdc-home-b .hdc-b-fact__icon {
		width: 1.375rem;
		height: 1.375rem;
		margin-bottom: 0.125rem;
		color: var(--white);
	}

	.hdc-home-b .hdc-b-fact__title {
		color: var(--white);
		font-size: 1rem;
		font-stretch: 75%;
		font-weight: 750;
		line-height: 1.1;
		overflow-wrap: break-word;
	}

	.hdc-home-b .hdc-b-fact__text {
		color: var(--fog);
		font-size: 0.8125rem;
		line-height: 1.35;
		overflow-wrap: break-word;
	}

	@media (min-width: 40rem) {
		.hdc-home-b .hdc-b-hero {
			--overlap: 8rem;
		}

		.hdc-home-b .hdc-b-hero__media {
			aspect-ratio: 16 / 9;
			max-height: 60svh;
		}

		.hdc-home-b .hdc-b-hero__img {
			object-position: 50% 60%;
		}

		.hdc-home-b .hdc-b-hero__title {
			font-size: clamp(2.75rem, 5.4vw, 3.75rem);
		}

		.hdc-home-b .hdc-b-hero__panel {
			padding-block: 1rem 2.25rem;
		}

		.hdc-home-b .hdc-b-hero__actions {
			grid-template-columns: repeat(2, max-content);
		}

		.hdc-home-b .hdc-b-hero__actions .hdc-b-btn {
			width: auto;
		}

		.hdc-home-b .hdc-b-hero__strip {
			margin-top: -1rem;
			padding-bottom: 2.25rem;
		}

		.hdc-home-b .hdc-b-hero__facts {
			max-width: 36rem;
		}

		.hdc-home-b .hdc-b-fact {
			padding: 0.875rem 1rem 1rem;
		}

		.hdc-home-b .hdc-b-fact__title {
			font-size: 1.125rem;
		}

		.hdc-home-b .hdc-b-fact__text {
			font-size: 0.875rem;
		}
	}

	/*
	 * From 64rem the hero uses the width: the photo fills it, the overlay runs
	 * from the left, the words keep to a column inside its dark part with the
	 * person line beside the buttons, and the facts run as one strip along
	 * the foot, three cells split by hairlines on a graphite band.
	 */
	@media (min-width: 64rem) {
		.hdc-home-b .hdc-b-hero {
			--column: 30rem;
			--row-end: 40rem; /* Call, Get a written quote and the person line, at their widest. */
			--left: max(var(--gutter), (100% - var(--wrap)) / 2);
			grid-template-rows: minmax(0, 1fr) auto;
			min-height: clamp(32rem, calc(100svh - var(--header) - 14rem), 48rem);
		}

		.hdc-home-b .hdc-b-hero__media {
			position: absolute;
			inset: 0;
			max-height: none;
			aspect-ratio: auto;
		}

		.hdc-home-b .hdc-b-hero__media::after {
			background: linear-gradient(90deg, rgb(var(--shade) / 0.92) 0, rgb(var(--shade) / 0.86) calc(var(--left) + var(--column)), rgb(var(--shade) / 0.8) calc(var(--left) + var(--row-end)), rgb(var(--shade) / 0.3) calc(var(--left) + var(--row-end) + 8rem), rgb(var(--shade) / 0) calc(var(--left) + var(--row-end) + 16rem));
		}

		.hdc-home-b .hdc-b-hero__img {
			object-position: 0% 55%;
		}

		.hdc-home-b .hdc-b-hero__media + .hdc-b-hero__body {
			margin-top: 0;
		}

		.hdc-home-b .hdc-b-hero__body {
			align-self: center;
			max-width: calc(var(--wrap) + 2 * var(--gutter));
			margin-inline: auto;
			padding: 2.5rem var(--gutter) 3rem;
		}

		.hdc-home-b .hdc-b-hero__panel {
			gap: 1.25rem;
			padding: 0;
		}

		.hdc-home-b .hdc-b-hero__title {
			max-width: var(--column);
			font-size: clamp(3.25rem, 4.6vw, 4.75rem);
			line-height: 0.94;
		}

		.hdc-home-b .hdc-b-hero__title span {
			display: block;
		}

		.hdc-home-b .hdc-b-hero__text {
			max-width: var(--column);
			font-size: 1.0625rem;
		}

		.hdc-home-b .hdc-b-hero__cta {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 1rem 1.5rem;
			margin-top: 0.5rem;
		}

		.hdc-home-b .hdc-b-hero__actions {
			margin-top: 0;
		}

		.hdc-home-b .hdc-b-hero__person {
			color: var(--white);
			font-size: 1rem;
		}

		.hdc-home-b .hdc-b-hero__strip {
			margin-top: 0;
			padding: 0;
			border-top: 1px solid rgb(255 255 255 / 0.18);
			background: rgb(46 52 59 / 0.85); /* --graphite at 85%. */
		}

		.hdc-home-b .hdc-b-hero__facts {
			gap: 0;
			max-width: calc(var(--wrap) + 2 * var(--gutter));
			margin-inline: auto;
			padding-inline: var(--gutter);
		}

		.hdc-home-b .hdc-b-fact {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
			align-content: start;
			gap: 0.25rem 0.875rem;
			padding: 1.125rem 1.5rem 1.25rem;
			border: 0;
			border-left: 1px solid rgb(255 255 255 / 0.22);
			background: none;
		}

		.hdc-home-b .hdc-b-fact:first-child {
			padding-left: 0;
			border-left: 0;
		}

		.hdc-home-b .hdc-b-fact__icon {
			grid-row: 1 / span 2;
			width: 1.5rem;
			height: 1.5rem;
			margin: 0;
		}

		.hdc-home-b .hdc-b-fact__title {
			font-size: 1.25rem;
			line-height: 1.15;
		}

		.hdc-home-b .hdc-b-fact__text {
			font-size: 0.9375rem;
		}
	}

	@media (min-width: 80rem) {
		.hdc-home-b .hdc-b-hero {
			--column: 32rem;
		}

		.hdc-home-b .hdc-b-hero__text {
			font-size: 1.125rem;
		}
	}

	/* 2. Equipment. */
	.hdc-home-b .hdc-b-equipment {
		padding-block: 2.25rem 2.5rem;
		background: var(--white);
	}

	.hdc-home-b .hdc-b-equipment__head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 1rem;
		margin-bottom: 1.25rem;
	}

	.hdc-home-b .hdc-b-rail-controls:not([hidden]) {
		display: flex;
		flex: none;
		gap: 0.5rem;
	}

	/* Phones: a rail of 4:3 photo cards that shows the next card's edge. */
	.hdc-home-b .hdc-b-wall {
		display: grid;
		grid-auto-columns: calc(100% - 1.5rem);
		grid-auto-flow: column;
		gap: 0.5rem;
		padding-inline: var(--gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: var(--gutter);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.hdc-home-b .hdc-b-wall::-webkit-scrollbar {
		display: none;
	}

	.hdc-home-b .hdc-b-panel {
		display: flex;
		position: relative;
		flex-direction: column;
		background: var(--ink);
		color: var(--white);
		scroll-snap-align: start;
		--focus: var(--accent);
	}

	.hdc-home-b .hdc-b-panel__photo {
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: var(--graphite);
	}

	.hdc-home-b .hdc-b-panel__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: var(--pos, 50% 50%);
	}

	.hdc-home-b .hdc-b-panel__label {
		display: grid;
		flex: 1;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name arrow"
			"job arrow";
		align-content: start;
		align-items: center;
		column-gap: 1rem;
		padding: 0.875rem 1rem 1rem;
	}

	.hdc-home-b .hdc-b-panel__name {
		grid-area: name;
		color: var(--white);
		font-size: 1.375rem;
		font-weight: 750;
		line-height: 1.1;
	}

	.hdc-home-b .hdc-b-panel__job {
		grid-area: job;
		margin-top: 0.25rem;
		color: var(--fog);
		font-size: 0.9375rem;
		line-height: 1.35;
	}

	.hdc-home-b .hdc-b-panel__arrow {
		grid-area: arrow;
		width: 1.5rem;
		height: 1.5rem;
		color: var(--white);
		transition: transform 0.15s, color 0.15s;
	}

	/* The whole panel is the link's target; the link's own words stay its name. */
	.hdc-home-b .hdc-b-panel__go {
		color: inherit;
		text-decoration: none;
	}

	.hdc-home-b .hdc-b-panel__go::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.hdc-home-b .hdc-b-panel__go:focus-visible {
		outline: none;
	}

	.hdc-home-b .hdc-b-panel:has(.hdc-b-panel__go:focus-visible) {
		outline: var(--focus-ring);
		outline-offset: -3px;
	}

	.hdc-home-b .hdc-b-panel:hover .hdc-b-panel__arrow {
		color: var(--accent);
		transform: translateX(0.25rem);
	}

	/* Six small photos under the rail: every line at once, the one in view framed in ink. */
	.hdc-home-b .hdc-b-thumbs:not([hidden]) {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 0.375rem;
		margin-top: 0.625rem;
	}

	.hdc-home-b .hdc-b-thumbs__item {
		position: relative;
		aspect-ratio: 1;
		padding: 0;
		border: 0;
		border-radius: 0;
		overflow: hidden;
		background: var(--panel);
		cursor: pointer;
	}

	.hdc-home-b .hdc-b-thumbs__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: var(--pos, 50% 50%);
		opacity: 0.55;
		transition: opacity 0.15s;
	}

	.hdc-home-b .hdc-b-thumbs__item::after {
		content: "";
		position: absolute;
		inset: 0;
		border: 3px solid transparent;
	}

	.hdc-home-b .hdc-b-thumbs__item[aria-current="true"] .hdc-b-thumbs__img {
		opacity: 1;
	}

	.hdc-home-b .hdc-b-thumbs__item[aria-current="true"]::after {
		border-color: var(--ink);
	}

	@media (min-width: 48rem) {
		.hdc-home-b .hdc-b-wall {
			grid-auto-columns: auto;
			grid-auto-flow: row;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 2px;
			padding-inline: 0;
			overflow: visible;
			scroll-snap-type: none;
		}

		.hdc-home-b .hdc-b-panel__photo {
			aspect-ratio: 3 / 2;
		}
	}

	/* From 64rem: three columns and two rows, edge to edge, so the six lines fit one screen. */
	@media (min-width: 64rem) {
		.hdc-home-b .hdc-b-equipment {
			padding-block: 3rem 0;
		}

		.hdc-home-b .hdc-b-equipment__head {
			margin-bottom: 1.75rem;
		}

		.hdc-home-b .hdc-b-wall {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.hdc-home-b .hdc-b-panel__photo {
			aspect-ratio: 16 / 10;
		}

		.hdc-home-b .hdc-b-panel__label {
			padding: 1rem 1.5rem 1.125rem;
		}

		.hdc-home-b .hdc-b-panel__name {
			font-size: 1.625rem;
		}

		.hdc-home-b .hdc-b-panel__arrow {
			width: 1.75rem;
			height: 1.75rem;
		}
	}

	.hdc-home-b .hdc-b-where {
		margin-top: 1.5rem;
	}

	.hdc-home-b .hdc-b-where__list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
	}

	.hdc-home-b .hdc-b-where__list a {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.75rem;
		color: var(--ink);
		font-weight: 600;
	}

	/* A text link with an arrow, under a section's words (Fast, The right machine). */
	.hdc-home-b .hdc-b-more {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.75rem;
		margin-top: 1.25rem;
		--link: var(--ink);
		--link-hover: var(--ink);
		color: var(--ink);
		font-size: 1.0625rem;
		font-weight: 700;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.35em;
	}

	.hdc-home-b .hdc-b-more__arrow {
		flex: none;
		width: 1.25rem;
		height: 1.25rem;
	}

	/* 3. Fast: a dark band, four things we do for speed, the icons in safety yellow on ink. */
	.hdc-home-b .hdc-b-fast {
		padding-block: var(--space-section);
		background: var(--ink);
		color: var(--white);
		--focus: var(--accent);
	}

	.hdc-home-b .hdc-b-fast .hdc-b-title {
		color: var(--white);
	}

	.hdc-home-b .hdc-b-fast__grid {
		display: grid;
		gap: 1.75rem;
	}

	.hdc-home-b .hdc-b-fast__lead {
		max-width: 30ch;
		margin-top: 1rem;
		font-size: 1.25rem;
		line-height: 1.35;
	}

	.hdc-home-b .hdc-b-fast__note {
		margin-top: 0.75rem;
		color: var(--fog);
	}

	.hdc-home-b .hdc-b-fast .hdc-b-more {
		--link: var(--white);
		--link-hover: var(--white);
		color: var(--white);
		text-decoration-color: var(--accent);
	}

	.hdc-home-b .hdc-b-fast__items {
		display: grid;
	}

	.hdc-home-b .hdc-b-fast__item {
		display: grid;
		grid-template-columns: 2.5rem minmax(0, 1fr);
		grid-template-areas:
			"icon title"
			"icon text";
		align-content: start;
		column-gap: 1rem;
		padding-block: 1.125rem;
		border-top: 1px solid var(--line-dark);
	}

	.hdc-home-b .hdc-b-fast__item:last-child {
		border-bottom: 1px solid var(--line-dark);
	}

	.hdc-home-b .hdc-b-fast__icon {
		grid-area: icon;
		width: 2.25rem;
		height: 2.25rem;
		color: var(--accent);
	}

	.hdc-home-b .hdc-b-fast__title {
		grid-area: title;
		color: var(--white);
		font-size: 1.375rem;
		font-weight: 750;
		line-height: 1.1;
	}

	.hdc-home-b .hdc-b-fast__text {
		grid-area: text;
		margin-top: 0.25rem;
		color: var(--fog);
	}

	@media (min-width: 40rem) {
		.hdc-home-b .hdc-b-fast__items {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			column-gap: 2rem;
		}

		.hdc-home-b .hdc-b-fast__item {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas:
				"icon"
				"title"
				"text";
			row-gap: 0.75rem;
			padding-block: 1.5rem;
		}

		.hdc-home-b .hdc-b-fast__item:nth-last-child(2) {
			border-bottom: 1px solid var(--line-dark);
		}

		.hdc-home-b .hdc-b-fast__icon {
			width: 2.75rem;
			height: 2.75rem;
		}
	}

	@media (min-width: 64rem) {
		.hdc-home-b .hdc-b-fast__grid {
			grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
			align-items: start;
			gap: 4rem;
		}

		.hdc-home-b .hdc-b-fast__lead {
			margin-top: 1.5rem;
			font-size: 1.5rem;
		}

		.hdc-home-b .hdc-b-fast__note {
			font-size: 1.0625rem;
		}

		.hdc-home-b .hdc-b-fast__items {
			column-gap: 3rem;
		}

		.hdc-home-b .hdc-b-fast__item {
			padding-block: 1.75rem;
		}

		.hdc-home-b .hdc-b-fast__icon {
			width: 3rem;
			height: 3rem;
		}

		.hdc-home-b .hdc-b-fast__title {
			font-size: 1.75rem;
		}

		.hdc-home-b .hdc-b-fast__text {
			font-size: 1.0625rem;
		}
	}

	/* 4. The right machine: the sample drawing and three points, on white. */
	.hdc-home-b .hdc-b-fit {
		padding-block: var(--space-section);
		background: var(--white);
	}

	.hdc-home-b .hdc-b-fit__grid {
		display: grid;
		gap: 1.5rem;
	}

	.hdc-home-b .hdc-b-fit__lead {
		max-width: 34ch;
		margin-top: 1rem;
		color: var(--body);
		font-size: 1.25rem;
		line-height: 1.35;
	}

	.hdc-home-b .hdc-b-fit__drawing {
		margin: 0;
		border: 1px solid var(--line);
	}

	.hdc-home-b .hdc-b-fit__items {
		display: grid;
	}

	.hdc-home-b .hdc-b-fit__item {
		display: grid;
		grid-template-columns: 2.5rem minmax(0, 1fr);
		grid-template-areas:
			"icon title"
			"icon text";
		align-content: start;
		column-gap: 1rem;
		padding-block: 1.125rem;
		border-top: 1px solid var(--line);
	}

	.hdc-home-b .hdc-b-fit__item:last-child {
		border-bottom: 1px solid var(--line);
	}

	.hdc-home-b .hdc-b-fit__icon {
		grid-area: icon;
		width: 2.25rem;
		height: 2.25rem;
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-fit__title {
		grid-area: title;
		color: var(--ink);
		font-size: 1.375rem;
		font-weight: 750;
		line-height: 1.1;
	}

	.hdc-home-b .hdc-b-fit__text {
		grid-area: text;
		margin-top: 0.25rem;
		color: var(--body);
	}

	@media (min-width: 64rem) {
		.hdc-home-b .hdc-b-fit__grid {
			grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
			grid-template-rows: auto 1fr;
			grid-template-areas:
				"drawing head"
				"drawing body";
			column-gap: 4rem;
			row-gap: 1.5rem;
		}

		.hdc-home-b .hdc-b-fit__head {
			grid-area: head;
		}

		.hdc-home-b .hdc-b-fit__drawing {
			grid-area: drawing;
			align-self: center;
		}

		.hdc-home-b .hdc-b-fit__body {
			grid-area: body;
		}

		.hdc-home-b .hdc-b-fit__lead {
			font-size: 1.375rem;
		}

		.hdc-home-b .hdc-b-fit__item {
			grid-template-columns: 3rem minmax(0, 1fr);
			column-gap: 1.25rem;
			padding-block: 1.375rem;
		}

		.hdc-home-b .hdc-b-fit__icon {
			width: 2.75rem;
			height: 2.75rem;
		}

		.hdc-home-b .hdc-b-fit__title {
			font-size: 1.5rem;
		}

		.hdc-home-b .hdc-b-fit__text {
			font-size: 1.0625rem;
		}
	}

	/* The sample route check drawing (parts/home-b/drawing.php). Phones get larger labels. */
	.hdc-home-b .hdc-drawing {
		display: block;
		width: 100%;
		height: auto;
		font-family: inherit;
	}

	.hdc-home-b .hdc-drawing__gridline {
		fill: none;
		stroke: var(--line);
		stroke-width: 0.75;
	}

	.hdc-home-b .hdc-drawing__floor {
		fill: var(--white);
	}

	.hdc-home-b .hdc-drawing__hatchline {
		stroke: var(--mist);
		stroke-width: 1.25;
	}

	.hdc-home-b .hdc-drawing__route {
		fill: none;
		stroke: var(--steel);
		stroke-width: 2;
		stroke-dasharray: 7 5;
	}

	.hdc-home-b .hdc-drawing__head {
		fill: var(--steel);
	}

	.hdc-home-b .hdc-drawing__wall,
	.hdc-home-b .hdc-drawing__jamb {
		fill: none;
		stroke: var(--ink);
		stroke-width: 6;
		stroke-linejoin: miter;
	}

	.hdc-home-b .hdc-drawing__thin,
	.hdc-home-b .hdc-drawing__dim {
		fill: none;
		stroke: var(--ink);
		stroke-width: 1.5;
	}

	.hdc-home-b .hdc-drawing__cart {
		fill: var(--white);
		stroke: var(--ink);
		stroke-width: 2;
	}

	.hdc-home-b .hdc-drawing__tugger {
		fill: var(--accent);
		stroke: var(--ink);
		stroke-width: 2;
	}

	.hdc-home-b .hdc-drawing__frame {
		fill: var(--white);
		stroke: var(--ink);
		stroke-width: 1.5;
	}

	.hdc-home-b .hdc-drawing__label {
		fill: var(--ink);
		font-size: 16px;
		font-weight: 650;
		paint-order: stroke;
		stroke: var(--white);
		stroke-width: 5px;
		stroke-linejoin: round;
	}

	.hdc-home-b .hdc-drawing__label--small {
		fill: var(--steel);
		font-size: 15px;
		font-weight: 500;
	}

	.hdc-home-b .hdc-drawing__name {
		fill: var(--ink);
		font-size: 32px;
		font-stretch: 75%;
		font-weight: 780;
	}

	@media (max-width: 39.99rem) {
		.hdc-home-b .hdc-drawing__label {
			font-size: 28px;
			stroke-width: 8px;
		}

		.hdc-home-b .hdc-drawing__label--small {
			font-size: 26px;
		}

		.hdc-home-b .hdc-drawing__name {
			font-size: 42px;
		}
	}

	/* 5. Reviews, printed only once data/reviews.php has entries. A plain placeholder look. */
	.hdc-home-b .hdc-b-reviews {
		padding-block: var(--space-section);
		background: var(--white);
	}

	.hdc-home-b .hdc-b-reviews__list {
		display: grid;
		gap: 0 2rem;
		margin-top: 1.5rem;
	}

	.hdc-home-b .hdc-b-review {
		padding-block: 1.25rem;
		border-top: 1px solid var(--line);
	}

	.hdc-home-b .hdc-b-review figure {
		margin: 0;
	}

	.hdc-home-b .hdc-b-review__rating {
		color: var(--steel);
		font-size: 0.875rem;
		font-weight: 700;
	}

	.hdc-home-b .hdc-b-review__quote {
		margin: 0.5rem 0 0;
		color: var(--ink);
		font-size: 1.25rem;
		line-height: 1.4;
	}

	.hdc-home-b .hdc-b-review__by {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 1rem;
		margin-top: 0.75rem;
		color: var(--steel);
	}

	.hdc-home-b .hdc-b-review__name {
		color: var(--ink);
		font-weight: 700;
	}

	@media (min-width: 64rem) {
		.hdc-home-b .hdc-b-reviews__list {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	/* Makers map (parts/home-b/map.php), off the page since 2026-10-12, kept for its return. Phones: a 4:3 crop with the larger labels; from 40rem the 16:10 frame. */
	.hdc-home-b .hdc-makers-map {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		font-family: inherit;
		font-stretch: 100%;
	}

	.hdc-home-b .hdc-makers-map__states {
		fill: none;
		stroke: var(--line);
		stroke-width: 1;
		stroke-linejoin: round;
	}

	.hdc-home-b .hdc-makers-map__coast {
		fill: none;
		stroke: var(--steel);
		stroke-width: 1.25;
		stroke-linejoin: round;
		stroke-linecap: round;
	}

	.hdc-home-b .hdc-makers-map__pin {
		fill: var(--hdc-makers-map-pin, var(--accent));
		stroke: var(--hdc-makers-map-pin-edge, var(--ink));
		stroke-width: 1.5;
		stroke-linejoin: round;
	}

	.hdc-home-b .hdc-makers-map__eye {
		fill: var(--hdc-makers-map-pin-edge, var(--ink));
	}

	.hdc-home-b .hdc-makers-map__label {
		fill: var(--ink);
		paint-order: stroke;
		stroke: var(--hdc-makers-map-ground, var(--white));
		stroke-linejoin: round;
		font-size: 46px;
		stroke-width: 13px;
	}

	.hdc-home-b .hdc-makers-map__maker {
		font-size: 52px;
		font-weight: 750;
		font-stretch: 75%;
	}

	.hdc-home-b .hdc-makers-map__what {
		fill: var(--steel);
	}

	.hdc-home-b .hdc-makers-map__set--wide {
		display: none;
	}

	.hdc-home-b .hdc-makers-map__set--wide .hdc-makers-map__label {
		font-size: calc(26px * var(--hdc-makers-map-label, 1));
		stroke-width: calc(10px * var(--hdc-makers-map-label, 1));
	}

	.hdc-home-b .hdc-makers-map__set--wide .hdc-makers-map__maker {
		font-size: calc(32px * var(--hdc-makers-map-label, 1));
	}

	@media (min-width: 40rem) {
		.hdc-home-b .hdc-makers-map {
			aspect-ratio: 16 / 10;
		}

		.hdc-home-b .hdc-makers-map__set--wide {
			display: inline;
		}

		.hdc-home-b .hdc-makers-map__set--narrow {
			display: none;
		}
	}

	/* 6. See it work, a wide dark band. */
	.hdc-home-b .hdc-b-film {
		padding-block: 2.75rem 3rem;
		background: var(--ink);
		color: var(--white);
		--focus: var(--accent);
	}

	.hdc-home-b .hdc-b-film .hdc-b-title {
		color: var(--white);
	}

	.hdc-home-b .hdc-b-film__head {
		margin-bottom: 1.5rem;
	}

	.hdc-home-b .hdc-b-film__grid {
		display: grid;
		gap: 1.5rem;
	}

	.hdc-home-b .hdc-b-player__frame {
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: #000;
	}

	.hdc-home-b .hdc-b-player__poster {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.hdc-home-b .hdc-b-player__frame iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	/* The play link covers the poster, so a tap anywhere on it plays; its button sits at the lower left. */
	.hdc-home-b .hdc-b-player__play {
		display: flex;
		position: absolute;
		inset: 0;
		align-items: flex-end;
		padding: var(--gutter);
		color: var(--white);
		text-decoration: none;
	}

	.hdc-home-b .hdc-b-player__play:focus-visible {
		outline-offset: -6px;
	}

	.hdc-home-b .hdc-b-player__button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3.5rem;
		height: 3.5rem;
		background: var(--accent);
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-player__button .hdc-icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.hdc-home-b .hdc-b-player__length {
		display: inline-flex;
		align-items: center;
		padding-inline: 1rem;
		background: var(--ink);
		font-size: 0.9375rem;
		font-weight: 700;
		white-space: nowrap;
	}

	.hdc-home-b .hdc-b-player__play:hover .hdc-b-player__button {
		background: var(--accent-strong);
	}

	.hdc-home-b .hdc-b-player__end:not([hidden]) {
		display: grid;
		position: absolute;
		inset: 0;
		align-content: center;
		justify-items: center;
		gap: 0.75rem;
		padding: var(--gutter);
		background: rgb(22 25 29 / 0.94);
	}

	.hdc-home-b .hdc-b-player__end .hdc-b-btn {
		width: min(100%, 20rem);
	}

	.hdc-home-b .hdc-b-player__again {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.75rem;
		color: var(--fog);
		font-weight: 600;
	}

	.hdc-home-b .hdc-b-chapters {
		display: grid;
		padding-inline: var(--gutter);
	}

	.hdc-home-b .hdc-b-chapter {
		padding-block: 0.625rem;
		border-top: 1px solid var(--line-dark);
	}

	.hdc-home-b .hdc-b-chapter:last-child {
		border-bottom: 1px solid var(--line-dark);
	}

	.hdc-home-b .hdc-b-chapter__link {
		display: grid;
		grid-template-columns: 2rem minmax(0, 1fr) auto;
		grid-template-areas: "num title icon" ". meta icon";
		align-items: center;
		column-gap: 0.75rem;
		min-height: 3rem;
		color: var(--white);
		text-decoration: none;
	}

	.hdc-home-b .hdc-b-chapter__num {
		grid-area: num;
		color: var(--mist);
		font-size: 0.9375rem;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.hdc-home-b .hdc-b-chapter__title {
		grid-area: title;
		font-size: 1.25rem;
		font-stretch: 75%;
		font-weight: 750;
		line-height: 1.15;
	}

	.hdc-home-b .hdc-b-chapter__meta {
		display: flex;
		flex-wrap: wrap;
		grid-area: meta;
		gap: 0 1rem;
		margin-top: 0.25rem;
		color: var(--mist);
		font-size: 0.875rem;
	}

	.hdc-home-b .hdc-b-chapter__icon {
		grid-area: icon;
		width: 1.25rem;
		height: 1.25rem;
		color: var(--mist);
	}

	.hdc-home-b .hdc-b-chapter__link[aria-current="true"] .hdc-b-chapter__num,
	.hdc-home-b .hdc-b-chapter__link[aria-current="true"] .hdc-b-chapter__icon {
		color: var(--accent);
	}

	.hdc-home-b .hdc-b-chapter__link:hover .hdc-b-chapter__title {
		text-decoration: underline;
		text-decoration-color: var(--accent);
		text-decoration-thickness: 2px;
		text-underline-offset: 0.2em;
	}

	@media (min-width: 64rem) {
		.hdc-home-b .hdc-b-film {
			padding-block: var(--space-section);
		}

		.hdc-home-b .hdc-b-film__head {
			margin-bottom: 2.25rem;
		}

		/* The player runs to the left edge of the screen; the clips sit in a column on the right. */
		.hdc-home-b .hdc-b-film__grid {
			grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
			align-items: center;
			gap: 3rem;
			padding-inline-end: max(var(--gutter), calc((100% - var(--wrap)) / 2));
		}

		.hdc-home-b .hdc-b-chapters {
			padding-inline: 0;
		}

		.hdc-home-b .hdc-b-chapter {
			padding-block: 1.25rem 1.375rem;
		}

		.hdc-home-b .hdc-b-chapter__title {
			font-size: 1.625rem;
		}

		.hdc-home-b .hdc-b-player__button {
			width: 4.5rem;
			height: 4.5rem;
		}

		.hdc-home-b .hdc-b-player__play {
			padding: 2rem 2rem 2rem max(var(--gutter), calc((100vw - var(--wrap)) / 2));
		}
	}

	/* 7. How we work: three steps with a line each and the sample written quote, on the cool panel. */
	.hdc-home-b .hdc-b-how {
		padding-block: var(--space-section);
		background: var(--panel);
	}

	.hdc-home-b .hdc-b-how__grid {
		display: grid;
		gap: 2rem;
	}

	/* The steps: a numbered list on one hairline, the icon box left of the number, title and line. */
	.hdc-home-b .hdc-b-steps {
		display: grid;
		gap: 1.5rem;
		margin-top: 1.5rem;
	}

	.hdc-home-b .hdc-b-step {
		position: relative;
		display: grid;
		grid-template-columns: 3.5rem minmax(0, 1fr);
		grid-template-areas:
			"mark num"
			"mark title"
			"mark text";
		align-content: start;
		column-gap: 1rem;
	}

	.hdc-home-b .hdc-b-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 3.5rem;
		bottom: -1.5rem;
		left: 1.75rem;
		border-left: 1px solid var(--ink);
	}

	.hdc-home-b .hdc-b-step__mark {
		display: inline-flex;
		grid-area: mark;
		align-self: start;
		align-items: center;
		justify-content: center;
		width: 3.5rem;
		height: 3.5rem;
		border: 1px solid var(--ink);
		background: var(--white);
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-step__icon {
		width: 1.75rem;
		height: 1.75rem;
	}

	.hdc-home-b .hdc-b-step__num {
		grid-area: num;
		color: var(--steel);
		font-size: 0.875rem;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		line-height: 1.4;
	}

	.hdc-home-b .hdc-b-step__title {
		grid-area: title;
		color: var(--ink);
		font-size: 1.375rem;
		font-weight: 750;
		line-height: 1.1;
	}

	.hdc-home-b .hdc-b-step__text {
		grid-area: text;
		margin-top: 0.375rem;
		color: var(--body);
		line-height: 1.45;
	}

	/* The sample quote: a white sheet with a hairline edge, rows of picture, item and a masked amount. */
	.hdc-home-b .hdc-b-sheet {
		margin: 0;
		padding: 1.25rem 1rem 1.25rem;
		border: 1px solid var(--line);
		background: var(--white);
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-sheet__head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"brand tag"
			"doc doc";
		align-items: baseline;
		padding-bottom: 0.875rem;
		border-bottom: 2px solid var(--ink);
	}

	.hdc-home-b .hdc-b-sheet__brand {
		grid-area: brand;
		font-size: 1rem;
		font-stretch: 75%;
		font-weight: 750;
	}

	.hdc-home-b .hdc-b-sheet__tag {
		grid-area: tag;
		color: var(--steel);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.hdc-home-b .hdc-b-sheet__doc {
		grid-area: doc;
		margin-top: 0.25rem;
		font-size: 2rem;
		font-stretch: 75%;
		font-weight: 780;
		line-height: 1;
	}

	.hdc-home-b .hdc-b-sheet__row {
		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 0.875rem;
		padding-block: 0.75rem;
		border-bottom: 1px solid var(--line);
	}

	.hdc-home-b .hdc-b-sheet__pic {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3rem;
		height: 3rem;
		overflow: hidden;
		background: var(--panel);
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-sheet__pic .hdc-icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.hdc-home-b .hdc-b-sheet__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.hdc-home-b .hdc-b-sheet__item {
		display: grid;
		min-width: 0;
	}

	.hdc-home-b .hdc-b-sheet__title {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.25;
	}

	.hdc-home-b .hdc-b-sheet__sub {
		color: var(--steel);
		font-size: 0.875rem;
		line-height: 1.35;
	}

	.hdc-home-b .hdc-b-sheet__row--text .hdc-b-sheet__sub {
		color: var(--body);
	}

	/* A masked amount: a cool gray bar where the buyer's own number goes. */
	.hdc-home-b .hdc-b-sheet__mask {
		display: block;
		width: var(--w, 4rem);
		height: 0.75rem;
		background: var(--line);
	}

	.hdc-home-b .hdc-b-sheet__row:nth-child(2) .hdc-b-sheet__mask {
		--w: 3rem;
	}

	.hdc-home-b .hdc-b-sheet__row:nth-child(3) .hdc-b-sheet__mask {
		--w: 3.5rem;
	}

	.hdc-home-b .hdc-b-sheet__row:nth-child(4) .hdc-b-sheet__mask,
	.hdc-home-b .hdc-b-sheet__row:nth-child(6) .hdc-b-sheet__mask {
		--w: 4.5rem;
	}

	.hdc-home-b .hdc-b-sheet__total {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 0.875rem;
		font-size: 1.125rem;
		font-weight: 750;
	}

	.hdc-home-b .hdc-b-sheet__total .hdc-b-sheet__mask {
		--w: 5.5rem;
		height: 1rem;
		background: var(--fog);
	}

	@media (min-width: 40rem) {
		.hdc-home-b .hdc-b-sheet {
			padding: 1.75rem 2rem 2rem;
		}

		.hdc-home-b .hdc-b-sheet__row {
			grid-template-columns: 3.5rem minmax(0, 1fr) auto;
			column-gap: 1.25rem;
		}

		.hdc-home-b .hdc-b-sheet__pic {
			width: 3.5rem;
			height: 3.5rem;
		}

		.hdc-home-b .hdc-b-sheet__title {
			font-size: 1.0625rem;
		}

		.hdc-home-b .hdc-b-sheet__sub {
			font-size: 0.9375rem;
		}
	}

	/* From 64rem: the title left, the steps across beside it on one hairline (no sample quote, 2026-10-13). */
	@media (min-width: 64rem) {
		.hdc-home-b .hdc-b-how__main {
			display: grid;
			grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
			align-items: start;
			gap: 4rem;
		}

		.hdc-home-b .hdc-b-how .hdc-b-steps {
			grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
			margin-top: 0.5rem;
		}

		.hdc-home-b .hdc-b-how .hdc-b-step {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas:
				"mark"
				"num"
				"title"
				"text";
			row-gap: 0.25rem;
		}

		.hdc-home-b .hdc-b-how .hdc-b-step__mark {
			margin-bottom: 0.75rem;
		}

		.hdc-home-b .hdc-b-how .hdc-b-step:not(:last-child)::after {
			top: 2rem;
			right: -2rem;
			bottom: auto;
			left: 4rem;
			border-top: 1px solid var(--ink);
			border-left: 0;
		}

		.hdc-home-b .hdc-b-steps {
			gap: 2rem;
			margin-top: 2.25rem;
		}

		.hdc-home-b .hdc-b-step {
			grid-template-columns: 4rem minmax(0, 1fr);
			column-gap: 1.5rem;
		}

		.hdc-home-b .hdc-b-step:not(:last-child)::after {
			top: 4rem;
			bottom: -2rem;
			left: 2rem;
		}

		.hdc-home-b .hdc-b-step__mark {
			width: 4rem;
			height: 4rem;
		}

		.hdc-home-b .hdc-b-step__icon {
			width: 2rem;
			height: 2rem;
		}

		.hdc-home-b .hdc-b-step__title {
			font-size: 1.75rem;
		}

		.hdc-home-b .hdc-b-step__text {
			font-size: 1.0625rem;
		}
	}

	/* 8. Questions. */
	.hdc-home-b .hdc-b-questions {
		padding-block: var(--space-section);
		background: var(--white);
	}

	.hdc-home-b .hdc-b-questions__grid {
		display: grid;
		gap: 1.5rem;
	}

	.hdc-home-b .hdc-b-faq__item {
		border-top: 1px solid var(--line);
	}

	.hdc-home-b .hdc-b-faq__item:last-child {
		border-bottom: 1px solid var(--line);
	}

	.hdc-home-b .hdc-b-faq__q {
		display: grid;
		grid-template-columns: 1.75rem minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.875rem;
		min-height: 3.5rem;
		padding-block: 0.875rem;
		cursor: pointer;
		list-style: none;
	}

	.hdc-home-b .hdc-b-faq__q::-webkit-details-marker {
		display: none;
	}

	.hdc-home-b .hdc-b-faq__mark {
		width: 1.75rem;
		height: 1.75rem;
		color: var(--steel);
	}

	.hdc-home-b .hdc-b-faq__title {
		color: var(--ink);
		font-size: 1.25rem;
		font-weight: 700;
		line-height: 1.2;
	}

	.hdc-home-b .hdc-b-faq__icon {
		width: 1.5rem;
		height: 1.5rem;
		color: var(--ink);
		transition: transform 0.15s;
	}

	.hdc-home-b .hdc-b-faq__item[open] .hdc-b-faq__icon {
		transform: rotate(45deg);
	}

	.hdc-home-b .hdc-b-faq__item[open] .hdc-b-faq__mark {
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-faq__q:hover .hdc-b-faq__title {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.hdc-home-b .hdc-b-faq__a {
		max-width: 44rem;
		padding: 0 0 1.25rem 2.625rem;
		color: var(--body);
		font-size: 1.0625rem;
	}

	.hdc-home-b .hdc-b-faq__a .hdc-phone {
		font-weight: 700;
		white-space: nowrap;
	}

	@media (min-width: 64rem) {
		.hdc-home-b .hdc-b-questions__grid {
			grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
			gap: 4rem;
		}

		.hdc-home-b .hdc-b-faq__q {
			grid-template-columns: 2rem minmax(0, 1fr) auto;
			gap: 1.25rem;
			min-height: 4.5rem;
		}

		.hdc-home-b .hdc-b-faq__mark {
			width: 2rem;
			height: 2rem;
		}

		.hdc-home-b .hdc-b-faq__title {
			font-size: 1.75rem;
		}

		.hdc-home-b .hdc-b-faq__a {
			padding-left: 3.25rem;
		}
	}

	/*
	 * 9. Talk to us (owners, 2026-10-20: the yellow band and the thin form
	 * read "a bit harsh"). One white sheet on the light grey ground the
	 * product page uses, square cut, no shadow: the call zone (the title, the
	 * person to ask for, the number behind a yellow Call square), a hairline,
	 * then the form with its heading. Yellow is only the Call square.
	 */
	.hdc-home-b .hdc-b-talk {
		--talk-ground: #eef1f5;
		--talk-line: #dfe3e8;
		padding-block: 2.5rem;
		background: var(--talk-ground);
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-talk__sheet {
		border: 1px solid var(--talk-line);
		background: var(--white);
	}

	.hdc-home-b .hdc-b-talk__band {
		padding: 1.5rem 1.25rem 1.75rem;
		--focus: var(--ink);
	}

	.hdc-home-b .hdc-b-talk__grid {
		display: grid;
		gap: 1.25rem;
	}

	.hdc-home-b .hdc-b-talk__title {
		font-size: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
	}

	/* The call: the phone in a yellow Call square, then the number large in ink; the whole box dials. */
	.hdc-home-b .hdc-b-talk__number {
		display: inline-flex;
		justify-self: start;
		gap: 0.3em;
		min-height: 3rem;
		color: var(--ink);
		font-size: clamp(1.875rem, 8.4vw, 3rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}

	.hdc-home-b .hdc-b-talk__number .hdc-icon {
		flex: none;
		box-sizing: content-box;
		width: 0.5em;
		height: 0.5em;
		padding: 0.3em;
		background: var(--accent);
		transition: background-color 0.15s;
	}

	.hdc-home-b .hdc-b-talk__number:hover .hdc-icon {
		background: var(--accent-strong);
	}

	.hdc-home-b .hdc-b-talk__number .hdc-b-call__link {
		text-underline-offset: 0.12em;
	}

	.hdc-home-b .hdc-b-talk__person {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		column-gap: 1rem;
		align-content: start;
		align-items: center;
	}

	.hdc-home-b .hdc-b-talk__face {
		grid-row: span 2;
		width: 4.5rem;
		height: auto;
		aspect-ratio: 4 / 5;
		object-fit: cover;
	}

	.hdc-home-b .hdc-b-talk__grid--face .hdc-b-talk__person {
		grid-template-columns: 4.5rem minmax(0, 1fr);
	}

	.hdc-home-b .hdc-b-talk__ask {
		color: var(--steel);
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.hdc-home-b .hdc-b-talk__name {
		color: var(--ink);
		font-size: 1.5rem;
		font-stretch: 75%;
		font-weight: 750;
		line-height: 1.15;
	}

	.hdc-home-b .hdc-b-talk__form {
		display: block;
		padding: 1.5rem 1.25rem 1.75rem;
		border-top: 1px solid var(--talk-line);
	}

	/* The form is open at every width; its summary row is not shown (owner, 2026-10-15). */
	.hdc-home-b .hdc-b-talk__toggle {
		display: none;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		min-height: 3.25rem;
		padding-inline: 1.25rem;
		border: 2px solid var(--ink);
		color: var(--ink);
		font-size: 1.0625rem;
		font-weight: 700;
		cursor: pointer;
		list-style: none;
	}

	.hdc-home-b .hdc-b-talk__toggle::-webkit-details-marker {
		display: none;
	}

	.hdc-home-b .hdc-b-talk__toggle .hdc-icon {
		width: 1.25rem;
		height: 1.25rem;
		transition: transform 0.15s;
	}

	.hdc-home-b .hdc-b-talk__form[open] .hdc-b-talk__toggle .hdc-icon {
		transform: rotate(180deg);
	}

	.hdc-home-b .hdc-b-talk__fields {
		display: grid;
		gap: 1.25rem;
	}

	/* The form's heading, at every width. */
	.hdc-home-b .hdc-b-talk__head {
		display: block;
		margin-bottom: 0.5rem;
		color: var(--ink);
		font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1;
	}

	/* A #quote link lands with the sticky bar, and on phones the open toggle, clear above the form. */
	.hdc-home-b #quote {
		scroll-margin-top: calc(var(--sticky) + 5rem);
	}

	/* The quote pop-up (parts/home-b/quote.php): a white sheet, centered from 48rem, full
	 * screen on phones; a red close button; the page holds still behind it. */
	.hdc-home-b .hdc-b-quote {
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--ink);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.hdc-home-b .hdc-b-quote::backdrop {
		background: rgb(22 25 29 / 0.72);
	}

	.hdc-home-b .hdc-b-quote__sheet {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		background: var(--white);
	}

	.hdc-home-b .hdc-b-quote__head {
		display: grid;
		position: sticky;
		top: 0;
		z-index: 2;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: start;
		gap: 1rem;
		padding: 1.25rem var(--gutter) 1.25rem;
		border-bottom: 1px solid var(--line);
		background: var(--white);
	}

	.hdc-home-b .hdc-b-quote__thumb {
		display: block;
		width: 4rem;
		height: 4rem;
		border: 1px solid var(--line);
		background: var(--panel);
	}

	.hdc-home-b .hdc-b-quote__thumb img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		mix-blend-mode: multiply;
	}

	.hdc-home-b .hdc-b-quote__words {
		grid-column: 2;
		min-width: 0;
	}

	.hdc-home-b .hdc-b-quote__head:not(:has(.hdc-b-quote__thumb)) .hdc-b-quote__words {
		grid-column: 1 / 3;
	}

	.hdc-home-b .hdc-b-quote__for {
		margin: 0 0 0.25rem;
		color: var(--steel);
		font-size: 0.875rem;
		font-weight: 700;
	}

	.hdc-home-b .hdc-b-quote__title {
		margin: 0;
		font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1;
	}

	.hdc-home-b .hdc-b-quote__next {
		margin: 0.5rem 0 0;
		color: var(--body);
		font-size: 1rem;
		line-height: 1.4;
	}

	.hdc-home-b .hdc-b-quote__shut {
		grid-column: 3;
		margin: 0;
	}

	.hdc-home-b .hdc-b-quote__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3rem;
		height: 3rem;
		border: 0;
		border-radius: 0;
		background: var(--error);
		color: var(--white);
		cursor: pointer;
		transition: background-color 0.15s;
	}

	.hdc-home-b .hdc-b-quote__close:hover {
		background: var(--ink);
	}

	.hdc-home-b .hdc-b-quote__close .hdc-icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.hdc-home-b .hdc-b-quote__body {
		flex: 1;
		padding: 1.5rem var(--gutter) 1.75rem;
	}

	.hdc-home-b .hdc-b-quote__foot {
		padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
		border-top: 1px solid var(--line);
		background: var(--panel);
	}

	.hdc-home-b .hdc-b-quote__call {
		display: inline-flex;
		position: relative;
		align-items: center;
		gap: 0.5rem;
		font-size: 1.0625rem;
		font-weight: 700;
	}

	.hdc-home-b .hdc-b-quote__call .hdc-icon {
		width: 1.25rem;
		height: 1.25rem;
	}

	@media (min-width: 48rem) {
		.hdc-home-b .hdc-b-quote {
			width: min(100vw - 3rem, 60rem);
			height: fit-content;
			max-height: calc(100dvh - 3rem);
			margin: auto;
			border: 0; /* The dimmed page frames the sheet; the 2px ink frame read harsh (owners, 2026-10-20). */
			background: var(--white);
		}

		.hdc-home-b .hdc-b-quote__sheet {
			min-height: 0;
		}

		.hdc-home-b .hdc-b-quote__head,
		.hdc-home-b .hdc-b-quote__body,
		.hdc-home-b .hdc-b-quote__foot {
			padding-inline: 2rem;
		}

		.hdc-home-b .hdc-b-quote__head {
			padding-block: 1.75rem 1.5rem;
		}
	}

	.hdc-home-b details[data-hdc-b-form] {
		scroll-margin-top: calc(var(--sticky) + 0.75rem);
	}

	/* Phones: the sheet runs edge to edge, so the form keeps its paired fields (two across from 22rem). */
	@media (max-width: 39.99rem) {
		.hdc-home-b .hdc-b-talk__sheet {
			margin-inline: calc(-1 * var(--gutter));
			border-inline: 0;
		}

		.hdc-home-b .hdc-b-talk__band,
		.hdc-home-b .hdc-b-talk__form {
			padding-inline: var(--gutter);
		}
	}

	.hdc-home-b .hdc-b-talk__next {
		max-width: 24rem;
		color: var(--body);
		font-size: 1rem;
		line-height: 1.45;
	}

	@media (min-width: 48rem) {
		.hdc-home-b .hdc-b-talk__band {
			padding: 2rem 2.5rem;
		}

		.hdc-home-b .hdc-b-talk__form {
			padding: 2rem 2.5rem 2.5rem;
		}
	}

	@media (min-width: 64rem) {
		.hdc-home-b .hdc-b-talk {
			padding-block: var(--space-section);
		}

		.hdc-home-b .hdc-b-talk__band {
			padding: 2.5rem 3rem;
		}

		.hdc-home-b .hdc-b-talk__grid {
			grid-template-columns: minmax(0, 1fr) auto;
			grid-template-areas:
				"title number"
				"person number";
			align-items: center;
			column-gap: 3rem;
			row-gap: 0.75rem;
		}

		.hdc-home-b .hdc-b-talk__title {
			grid-area: title;
		}

		.hdc-home-b .hdc-b-talk__number {
			grid-area: number;
			justify-self: end;
			font-size: clamp(3rem, 4.2vw, 4.25rem);
		}

		.hdc-home-b .hdc-b-talk__person {
			grid-area: person;
		}

		.hdc-home-b .hdc-b-talk__form {
			padding: 2.5rem 3rem 3rem;
		}

		.hdc-home-b #quote {
			scroll-margin-top: calc(var(--sticky) + 2rem);
		}

		.hdc-home-b .hdc-b-talk__fields {
			grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
			gap: 3rem;
		}
	}

	/* The leads module's form: forms.css draws the fields square; here only the submit's palette. */
	/* Ink, not yellow: yellow is always Call. */
	.hdc-home-b .hdc-lead-form__submit {
		border-color: var(--ink);
		border-radius: 0;
		background: var(--ink);
		color: var(--white);
		font-weight: 700;
	}

	.hdc-home-b .hdc-lead-form__submit:hover {
		border-color: var(--graphite);
		background: var(--graphite);
		color: var(--white);
	}

	/* Footer. */
	.hdc-home-b .hdc-b-footer {
		padding-block: 3rem calc(3rem + var(--bar));
		background: var(--ink);
		color: var(--fog);
		--focus: var(--accent);
		--link: var(--fog);
		--link-hover: var(--white);
		--link-line: none;
		--link-hover-line: underline;
	}

	/*
	 * Footer (Tanzeel, 2026-10-09): graphite, the logo mark huge and cropped by
	 * the bottom right corner (ink disc, yellow stripes), everything else kept
	 * left of it. Ends with the family line.
	 */
	.hdc-home-b .hdc-b-ft {
		position: relative;
		overflow: hidden;
		padding-block: 3.5rem calc(15rem + var(--bar)); /* Phones: the disc sits in the space under the legal lines. */
		background: var(--graphite);
		--line-dark: #48505a;
	}

	.hdc-home-b .hdc-b-ft__top {
		display: grid;
		gap: 2.5rem;
	}

	.hdc-home-b .hdc-b-ft__logo .hdc-b-logo__svg {
		height: 2.5rem;
	}

	.hdc-home-b .hdc-b-ft__line {
		margin-top: 1rem;
		max-width: 22rem;
		color: var(--fog);
		font-size: 1.0625rem;
	}

	.hdc-home-b .hdc-b-ft__head {
		margin-bottom: 0.75rem;
		color: var(--mist);
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.hdc-home-b .hdc-b-ft__num {
		color: var(--white);
		font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
		font-stretch: 75%;
		font-weight: 750;
		line-height: 1.1;
		font-variant-numeric: tabular-nums;
	}

	.hdc-home-b .hdc-b-ft__num .hdc-icon {
		width: 0.75em;
		height: 0.75em;
		color: var(--accent);
	}

	.hdc-home-b .hdc-b-ft__person {
		margin-block: 0.5rem 1.25rem;
		color: var(--fog);
	}

	.hdc-home-b .hdc-b-ft__nav {
		display: grid;
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: 1.5rem;
	}

	.hdc-home-b .hdc-b-ft__menu a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding-block: 0.5rem;
		font-weight: 600;
		line-height: 1.25;
	}

	.hdc-home-b .hdc-b-ft__email {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.75rem;
		margin-top: 0.5rem;
		color: var(--white);
		font-weight: 600;
	}

	.hdc-home-b .hdc-b-ft__email .hdc-icon {
		width: 1.125rem;
		height: 1.125rem;
		color: var(--accent);
	}

	.hdc-home-b .hdc-b-family__link {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}

	.hdc-home-b .hdc-b-ft__base {
		display: grid;
		gap: 1.25rem;
		margin-top: 2.5rem;
		padding-top: 1.5rem;
		border-top: 1px solid var(--line-dark);
	}

	.hdc-home-b .hdc-b-ft__legal {
		display: grid;
		gap: 0.25rem;
		color: var(--mist);
		font-size: 0.875rem;
	}

	.hdc-home-b .hdc-b-ft__disc {
		position: absolute;
		right: -5rem;
		bottom: -9rem;
		width: 22rem;
		height: auto;
		pointer-events: none;
	}

	.hdc-home-b .hdc-b-ft__inner {
		position: relative;
	}

	.hdc-home-b .hdc-b-ft__num {
		display: inline-flex;
		margin-top: 1.5rem;
	}

	.hdc-home-b .hdc-b-ft__person {
		margin-bottom: 0;
	}

	@media (min-width: 48rem) {
		.hdc-home-b .hdc-b-ft__nav {
			grid-template-columns: repeat(2, minmax(0, 14rem));
			gap: 3rem;
		}

		.hdc-home-b .hdc-b-ft__base {
			grid-template-columns: auto 1fr;
			align-items: center;
			gap: 2rem;
		}

		.hdc-home-b .hdc-b-ft__legal {
			justify-items: end;
			text-align: right;
		}

	}

	@media (min-width: 64rem) {
		.hdc-home-b .hdc-b-ft {
			padding-block: 4.5rem 2.5rem;
		}


		.hdc-home-b .hdc-b-ft {
			padding-bottom: 2.5rem;
		}

		.hdc-home-b .hdc-b-ft__top {
			grid-template-columns: minmax(0, 24rem) auto;
			gap: 5rem;
		}

		/* Everything stays left of the disc, which starts about 31rem from the right edge. */
		.hdc-home-b .hdc-b-ft__inner > * {
			max-width: min(52rem, 100vw - 34rem);
		}

		.hdc-home-b .hdc-b-ft__base {
			grid-template-columns: 1fr;
			gap: 1rem;
		}

		.hdc-home-b .hdc-b-ft__legal {
			justify-items: start;
			text-align: left;
		}

		.hdc-home-b .hdc-b-ft__disc {
			right: -9rem;
			bottom: -17rem;
			width: 40rem;
		}
	}

	/* Phone call bar. */
	.hdc-home-b .hdc-b-bar {
		display: grid;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 30;
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--ink);
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 0.2s, visibility 0.2s;
		--focus: var(--accent);
	}

	.hdc-home-b .hdc-b-bar.is-shown {
		transform: none;
		visibility: visible;
	}

	.hdc-home-b .hdc-b-bar__call,
	.hdc-home-b .hdc-b-bar__quote {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-height: var(--bar);
		font-weight: 700;
		text-decoration: none;
	}

	.hdc-home-b .hdc-b-bar__call {
		background: var(--accent);
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-bar__quote {
		color: var(--white);
	}

	@media (min-width: 64rem) {
		.hdc-home-b .hdc-b-bar {
			display: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hdc-home-b .hdc-b-panel__arrow,
		.hdc-home-b .hdc-b-thumbs__img,
		.hdc-home-b .hdc-b-faq__icon,
		.hdc-home-b .hdc-b-talk__toggle .hdc-icon,
		.hdc-home-b .hdc-b-bar {
			transition: none;
		}

		.hdc-home-b .hdc-b-panel:hover .hdc-b-panel__arrow {
			transform: none;
		}
	}

	/*
	 * Link colors. theme.json prints unlayered link rules that read --link,
	 * --link-hover, --link-line and --link-hover-line, and unlayered CSS beats
	 * every layer, so links here are colored through those properties.
	 */
	.hdc-home-b .hdc-b-skip,
	.hdc-home-b .hdc-b-drawer__menu a,
	.hdc-home-b .hdc-b-where__list a {
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-home-b .hdc-b-call {
		--link: currentColor;
		--link-hover: currentColor;
		--link-line: none;
		--link-hover-line: none;
	}

	.hdc-home-b .hdc-b-header__brand,
	.hdc-home-b .hdc-b-player__play,
	.hdc-home-b .hdc-b-chapter__link {
		--link: var(--white);
		--link-hover: var(--white);
		--link-line: none;
		--link-hover-line: none;
	}

	.hdc-home-b .hdc-b-header__menu a {
		--link: var(--fog);
		--link-hover: var(--white);
		--link-line: none;
		--link-hover-line: underline 2px var(--accent);
	}


	.hdc-home-b .hdc-b-panel__go {
		--link: var(--white);
		--link-hover: var(--white);
		--link-line: none;
		--link-hover-line: underline 2px var(--accent);
	}

	.hdc-home-b .hdc-b-panel:hover .hdc-b-panel__go {
		--link-line: underline 2px var(--accent);
	}

	.hdc-home-b .hdc-b-bar__quote {
		--link: var(--white);
		--link-hover: var(--white);
		--link-line: none;
		--link-hover-line: none;
	}

	.hdc-home-b .hdc-b-talk__number:hover {
		--link-hover-line: underline 0.06em;
	}
}