/*
 * Home B header, the merged one (parts/home-b/header-main.php, the page's
 * header with no ?hdr parameter), after the owners' meeting of 2026-10-20:
 * one dark unit, no white help strip. Reading order: the brand (both logos
 * large and in color, the HDC logo clearly the larger), the specialist and
 * the desk (yellow Call, the quote, the parent store reviews) in a taller top
 * bar, then the equipment nav with the search at its end. Yellow is only Call.
 * Type: Archivo (nav caps at 75% width, panel names in wide caps at 125%,
 * body, small tracked labels).
 *
 * Phones: one ink row (the HDC logo, Call, Menu) that sticks, and under it
 * "By [HDM logo]" on its own ink row, which scrolls away. From 48rem the
 * family sits beside the logo, from 64rem the Call desk shows the number,
 * from 72rem the search joins the row, and from 80rem the bar grows to hold
 * the specialist, the quote and the reviews, with the nav bar and its panels
 * under it.
 */

@layer tokens {
	/* --header is the measured header height (the hero is the screen less it); --sticky what stays on top. */
	body.hdc-home-b:has(.hdc-hm) {
		--header: 6.5rem;
		--sticky: 3.5rem;
		--hm-wrap: 85rem;
		--hm-hair: rgb(255 255 255 / 0.16);
		--hm-label: rgb(255 255 255 / 0.56);
		--hm-text: rgb(255 255 255 / 0.72);
		--hm-groove: rgb(0 0 0 / 0.5);
		--hm-lip: rgb(255 255 255 / 0.07);
		/* Dark anodized plate (the panels): a slow sheen across, a faint horizontal grain. */
		--hm-metal:
			repeating-linear-gradient(0deg, rgb(255 255 255 / 0.022) 0 1px, transparent 1px 3px),
			linear-gradient(100deg, #262b31 0%, #313840 34%, #282e34 58%, #2e353c 82%, #292f35 100%);
	}

	@media (min-width: 48rem) {
		body.hdc-home-b:has(.hdc-hm) {
			--header: 4.75rem;
			--sticky: 4.75rem;
		}
	}

	@media (min-width: 80rem) {
		body.hdc-home-b:has(.hdc-hm) {
			--header: 11.3125rem;
			--sticky: 3.25rem;
		}
	}
}

@layer components {
	/* Small tracked caps. */
	.hdc-home-b .hdc-hm-drawer__label {
		color: var(--hm-label);
		font-size: 0.625rem;
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}

	/* A countersunk Phillips screw. */
	.hdc-home-b .hdc-hm-screw {
		position: absolute;
		width: 0.75rem;
		height: 0.75rem;
		border-radius: 50%;
		background: radial-gradient(circle at 34% 30%, #d5dbe1 0, #949ca5 42%, #4d545c 100%);
		box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6), 0 0 0 2px rgb(255 255 255 / 0.08);
	}

	.hdc-home-b .hdc-hm-screw::before,
	.hdc-home-b .hdc-hm-screw::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0.4375rem;
		height: 1.5px;
		background: #22272d;
		transform: translate(-50%, -50%) rotate(14deg);
	}

	.hdc-home-b .hdc-hm-screw::after {
		transform: translate(-50%, -50%) rotate(104deg);
	}

	/* Stars filled to the score: a faint row, the solid row clipped over it. */
	.hdc-home-b .hdc-hm .hdc-h3-stars,
	.hdc-home-b .hdc-hm-drawer .hdc-h3-stars {
		display: inline-flex;
		position: relative;
		line-height: 0;
	}

	.hdc-home-b .hdc-hm .hdc-h3-stars__empty,
	.hdc-home-b .hdc-hm .hdc-h3-stars__fill,
	.hdc-home-b .hdc-hm-drawer .hdc-h3-stars__empty,
	.hdc-home-b .hdc-hm-drawer .hdc-h3-stars__fill {
		display: inline-flex;
		gap: 1px;
	}

	.hdc-home-b .hdc-hm .hdc-h3-stars__empty,
	.hdc-home-b .hdc-hm-drawer .hdc-h3-stars__empty {
		opacity: 0.25;
	}

	.hdc-home-b .hdc-hm .hdc-h3-stars__fill,
	.hdc-home-b .hdc-hm-drawer .hdc-h3-stars__fill {
		position: absolute;
		inset: 0 auto 0 0;
		width: var(--fill, 100%);
		overflow: hidden;
	}

	.hdc-home-b .hdc-hm .hdc-h3-stars .hdc-icon,
	.hdc-home-b .hdc-hm-drawer .hdc-h3-stars .hdc-icon {
		flex: none;
	}

	/* 1. The top bar. */
	.hdc-home-b .hdc-hm {
		--link: var(--white);
		--link-hover: var(--white);
		--link-line: none;
		--link-hover-line: none;
		--focus: var(--accent);
		position: sticky;
		top: 0;
		z-index: 45;
		background: var(--ink);
		color: var(--white);
	}

	.hdc-home-b .hdc-hm__bar {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		max-width: var(--hm-wrap);
		min-height: 3.5rem;
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	.hdc-home-b .hdc-hm__brand {
		margin-inline-end: auto;
	}

	/* Phones: the HDC logo alone in the bar, as large as the row allows; the family has its own row. */
	.hdc-home-b .hdc-hm .hdc-hb {
		--logo: min(2.25rem, 8.6vw);
	}

	.hdc-home-b .hdc-hm .hdc-hb__family {
		display: none;
	}

	.hdc-home-b .hdc-hm > .hdc-hm__bar > .hdc-hm-ask,
	.hdc-home-b .hdc-hm__act {
		display: none;
	}

	/*
	 * Phones: "By [HDM logo]" on its own ink row under the sticky bar (owners,
	 * 2026-10-20), the color logo large enough to read, still well under the
	 * HDC logo's size. It scrolls away with the page.
	 */
	.hdc-home-b .hdc-hm-by {
		--link: var(--mist);
		--link-hover: var(--white);
		--link-line: none;
		--link-hover-line: none;
		--focus: var(--accent);
		display: flex;
		align-items: center;
		min-height: 3rem;
		padding-inline: var(--gutter);
		border-top: 1px solid rgb(255 255 255 / 0.1);
		background: var(--ink);
	}

	.hdc-home-b .hdc-hm-by .hdc-hb__family {
		--link: var(--mist);
		--link-hover: var(--white);
		gap: 0.625rem;
		min-height: 2.75rem;
		color: var(--mist);
		font-size: min(0.9375rem, 3.7vw);
	}

	/*
	 * The HDM logo shrinks with the HDC logo on narrow phones (both scale with the
	 * width under about 26rem), so the HDC logo stays about a third taller at every
	 * width; at 320 px they were nearly the same size.
	 */
	.hdc-home-b .hdc-hm-by .hdc-hb__hdm {
		height: min(1.625rem, 6.4vw);
	}

	/*
	 * Phones: both logos scale with the header's real width (container units, so a
	 * classic scrollbar or a 280 px folding phone cannot push Menu off the edge). The
	 * HDC logo takes what Call, Menu and the gutters leave (its width is about 5.6
	 * times its height); the HDM logo in the By row stays about a third shorter. The
	 * vw sizes above are the fallback.
	 */
	@supports (width: 1cqw) {
		@media (max-width: 47.99rem) {
			.hdc-home-b .hdc-hm,
			.hdc-home-b .hdc-hm-by {
				container-type: inline-size;
			}

			.hdc-home-b .hdc-hm .hdc-hb {
				--logo: clamp(1.125rem, (100cqw - 11rem) / 5.6, 2.25rem);
			}

			/* The By row's container is its content box, the gutters already off. */
			.hdc-home-b .hdc-hm-by .hdc-hb__family {
				font-size: clamp(0.6875rem, 4.1cqw, 0.9375rem);
			}

			.hdc-home-b .hdc-hm-by .hdc-hb__hdm {
				height: clamp(0.875rem, (100cqw - 9rem) / 7.5, 1.625rem);
			}
		}
	}

	/* Phones: Call (yellow, labeled) and Menu at the right end. */
	.hdc-home-b .hdc-hm__dial {
		--link: var(--ink);
		--link-hover: var(--ink);
		flex: none;
		justify-content: center;
		gap: 0.375rem;
		height: 2.75rem;
		padding-inline: 0.75rem 0.875rem;
		background: var(--accent);
		color: var(--ink);
		font-weight: 700;
	}

	.hdc-home-b .hdc-hm__dial .hdc-icon {
		width: 1.125rem;
		height: 1.125rem;
	}

	.hdc-home-b .hdc-hm__toggle {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		border: 1px solid var(--hm-hair);
		color: var(--white);
	}

	.hdc-home-b .hdc-hm__toggle-word {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* The search field: square, graphite, 44px (also the drawer's). */
	.hdc-home-b .hdc-hm-ask {
		display: flex;
		height: 2.75rem;
		border: 1px solid transparent;
		background: var(--graphite);
	}

	.hdc-home-b .hdc-hm-ask:focus-within {
		border-color: rgb(255 255 255 / 0.5);
	}

	.hdc-home-b .hdc-hm-ask__field {
		flex: 1;
		min-width: 0;
		padding-inline: 1rem;
		border: 0;
		background: transparent;
		color: var(--white);
		font: inherit;
		font-size: 0.9375rem;
		outline: none;
	}

	.hdc-home-b .hdc-hm-ask__field::placeholder {
		color: var(--hm-text);
		opacity: 1;
	}

	.hdc-home-b .hdc-hm-ask__field::-webkit-search-cancel-button {
		filter: invert(1);
	}

	.hdc-home-b .hdc-hm-ask__go {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		color: var(--white);
	}

	.hdc-home-b .hdc-hm-ask__go .hdc-icon {
		width: 1.125rem;
		height: 1.125rem;
	}

	/* 2. The nav bar: desktop only. */
	.hdc-home-b .hdc-hm-nav {
		display: none;
	}

	/* The ratings rows (the top bar from 80rem, and the drawer). */
	.hdc-home-b .hdc-hm-rate__link,
	.hdc-home-b .hdc-hm-drate__link {
		display: flex;
		align-items: center;
		gap: 0.4375rem;
		min-height: 1.75rem;
		font-size: 0.8125rem;
		line-height: 1.2;
		text-decoration: none;
		white-space: nowrap;
	}

	.hdc-home-b .hdc-hm-drate__name {
		min-width: 4.5rem;
	}

	.hdc-home-b .hdc-hm-rate__score,
	.hdc-home-b .hdc-hm-drate__score {
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.hdc-home-b .hdc-hm-rate__count,
	.hdc-home-b .hdc-hm-drate__count {
		font-variant-numeric: tabular-nums;
	}

	.hdc-home-b .hdc-hm-rate__star,
	.hdc-home-b .hdc-hm-drate__star {
		width: 0.75rem;
		height: 0.75rem;
	}

	.hdc-home-b .hdc-hm-rate__link:hover .hdc-hm-rate__name,
	.hdc-home-b .hdc-hm-drate__link:hover .hdc-hm-drate__name {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	/*
	 * The drawer (below 80rem). Owner 2026-10-12: it ran off the bottom of the
	 * phone and a swipe moved the page behind. It is exactly the visible screen
	 * tall (100dvh, so iOS Safari's toolbars never cover Call; 100vh where dvh
	 * is unknown) and scrolls inside itself; overscroll-behavior stops a swipe
	 * at either end from passing to the page, which home-b-header-v3.js also
	 * pins in place while the drawer is open. The head with the close button
	 * stays at the top while the list scrolls.
	 */
	.hdc-home-b .hdc-hm-drawer {
		--focus: var(--accent);
		--link: var(--white);
		--link-hover: var(--white);
		--link-line: none;
		--link-hover-line: none;
		inset-block: 0;
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		background: var(--ink);
		color: var(--white);
	}

	.hdc-home-b .hdc-hm-drawer__inner {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		min-height: 100%;
		padding: 0 var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
	}

	.hdc-home-b .hdc-hm-drawer__head {
		display: flex;
		position: sticky;
		top: 0;
		z-index: 1;
		align-items: center;
		justify-content: space-between;
		min-height: 3.5rem;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		border-bottom: 1px solid var(--hm-hair);
		background: var(--ink);
	}

	.hdc-home-b .hdc-hm-drawer__title {
		font-size: 1.125rem;
		font-stretch: 75%;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	/* Close: a solid red square with a white X (owner, 2026-10-12), 48 px. */
	.hdc-home-b .hdc-hm-drawer__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3rem;
		height: 3rem;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: #c8102e;
		color: var(--white);
		cursor: pointer;
	}

	.hdc-home-b .hdc-hm-drawer__close:hover {
		background: #a50d26;
	}

	.hdc-home-b .hdc-hm-drawer__close:focus-visible {
		outline: 3px solid var(--accent);
		outline-offset: 3px;
	}

	.hdc-home-b .hdc-hm-drawer__close .hdc-icon {
		width: 1.5rem;
		height: 1.5rem;
		stroke-width: 2.5;
	}

	.hdc-home-b .hdc-hm-drawer__label {
		margin-bottom: 0.25rem;
	}

	.hdc-home-b .hdc-hm-list li {
		border-bottom: 1px solid var(--hm-hair);
	}

	.hdc-home-b .hdc-hm-list__link {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		min-height: 3.25rem;
		color: var(--white);
		text-decoration: none;
	}

	.hdc-home-b .hdc-hm-list__picto,
	.hdc-home-b .hdc-hm-nav__picto,
	.hdc-home-b .hdc-hm-panel__picto {
		flex: none;
		width: 1.75rem;
		height: 1.75rem;
		stroke-width: 1.5;
		color: var(--mist);
	}

	.hdc-home-b .hdc-hm-list__words {
		display: grid;
		flex: 1;
		gap: 0.125rem;
		padding-block: 0.375rem;
	}

	.hdc-home-b .hdc-hm-list__name {
		font-size: 1rem;
		font-stretch: 75%;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.hdc-home-b .hdc-hm-list__job {
		color: var(--hm-label);
		font-size: 0.75rem;
	}

	.hdc-home-b .hdc-hm-list__link > .hdc-icon:last-child {
		flex: none;
		width: 1rem;
		height: 1rem;
		color: var(--mist);
	}

	.hdc-home-b .hdc-hm-drawer__pages {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1.5rem;
		margin-top: 0.25rem;
	}

	.hdc-home-b .hdc-hm-drawer__pages a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		color: var(--hm-text);
		font-size: 0.9375rem;
		font-weight: 600;
		text-decoration: none;
	}

	.hdc-home-b .hdc-hm-drawer__rev .hdc-hm-drawer__label {
		margin-bottom: 0.375rem;
		letter-spacing: 0.12em;
	}

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

	.hdc-home-b .hdc-hm-drate__count {
		color: var(--hm-label);
	}

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

	.hdc-home-b .hdc-hm-drawer__person {
		margin-top: -0.25rem;
		color: var(--mist);
		font-size: 0.8125rem;
		font-weight: 600;
		text-align: center;
	}

	.hdc-home-b .hdc-hm-drawer__email {
		display: inline-flex;
		align-items: center;
		justify-self: center;
		gap: 0.375rem;
		color: var(--mist);
		font-size: 0.875rem;
		text-decoration: none;
	}

	.hdc-home-b .hdc-hm-drawer__email .hdc-icon {
		width: 0.875rem;
		height: 0.875rem;
	}

	/* Tablets: the family joins the logo behind a hairline; the bar grows for the larger logos. */
	@media (min-width: 48rem) {
		.hdc-home-b .hdc-hm__bar {
			gap: 1.5rem;
			min-height: 4.75rem;
		}

		.hdc-home-b .hdc-hm .hdc-hb {
			--logo: 2.5rem;
			gap: 1rem;
		}

		.hdc-home-b .hdc-hm .hdc-hb__family {
			display: inline-flex;
			gap: 0.5rem;
			padding-inline-start: 1rem;
			font-size: 0.875rem;
		}

		.hdc-home-b .hdc-hm .hdc-hb__hdm {
			height: 1.625rem;
		}

		.hdc-home-b .hdc-hm-by {
			display: none;
		}

		.hdc-home-b .hdc-hm__dial {
			padding-inline: 1rem 1.125rem;
		}

		.hdc-home-b .hdc-hm__toggle {
			margin-inline-start: -1rem;
		}
	}

	/* Small desktops: the Call desk with the number. */
	@media (min-width: 64rem) {
		.hdc-home-b .hdc-hm__dial {
			display: none;
		}

		.hdc-home-b .hdc-hm__act {
			display: flex;
			flex: none;
			align-items: center;
			gap: 0.75rem;
		}

		.hdc-home-b .hdc-hm-person,
		.hdc-home-b .hdc-hm-rev {
			display: none;
		}

		.hdc-home-b .hdc-hm__toggle {
			margin-inline-start: -0.75rem;
		}

		/*
		 * The Call desk: one yellow block, the number over "Ask for Raphael
		 * Perlmann", and the whole block is the call link (the number's link
		 * stretches over it).
		 */
		.hdc-home-b .hdc-hm-desk {
			--link: var(--ink);
			--link-hover: var(--ink);
			display: grid;
			position: relative;
			grid-template-columns: auto auto;
			align-content: center;
			column-gap: 0.625rem;
			row-gap: 0.1875rem;
			height: 3.25rem;
			padding-inline: 0.875rem 1.125rem;
			background: var(--accent);
			color: var(--ink);
		}

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

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

		.hdc-home-b .hdc-hm-desk__call {
			display: contents;
		}

		.hdc-home-b .hdc-hm-desk__call > .hdc-icon {
			grid-row: 1 / 3;
			align-self: center;
			width: 1.25rem;
			height: 1.25rem;
		}

		.hdc-home-b .hdc-hm-desk .hdc-b-call__link {
			font-size: 1.25rem;
			font-weight: 750;
			line-height: 1;
			font-variant-numeric: tabular-nums;
			letter-spacing: 0.01em;
		}

		.hdc-home-b .hdc-hm-desk__person {
			grid-column: 2;
			font-size: 0.75rem;
			font-weight: 600;
			line-height: 1.1;
			white-space: nowrap;
		}

		.hdc-home-b .hdc-hm__quote {
			display: none;
			align-items: center;
			height: 3.25rem;
			padding-inline: 1.125rem;
			border: 1px solid rgb(255 255 255 / 0.36);
			color: var(--fog);
			font-size: 0.9375rem;
			font-weight: 650;
			text-decoration: none;
			white-space: nowrap;
		}

		.hdc-home-b .hdc-hm__quote:hover {
			border-color: var(--white);
			color: var(--white);
		}
	}

	/* The search joins the row once it has room beside the larger logos. */
	@media (min-width: 72rem) {
		.hdc-home-b .hdc-hm > .hdc-hm__bar > .hdc-hm-ask {
			display: flex;
			flex: 1;
			max-width: 30rem;
			margin-inline: auto;
		}
	}

	/*
	 * Desktop: the top bar and the nav as one dark unit. The bar is taller
	 * (owners, 2026-10-20) so the specialist stands on its floor beside the
	 * desk: Call and the quote on top, the parent store reviews under them.
	 */
	@media (min-width: 80rem) {
		.hdc-home-b .hdc-hm {
			position: relative;
		}

		.hdc-home-b .hdc-hm__bar {
			gap: 2.5rem;
			min-height: 8rem;
			padding-inline: 2.5rem;
		}

		.hdc-home-b .hdc-hm__brand {
			margin-inline-end: auto;
		}

		/* The HDC logo at 52 px, the HDM logo at 32 px: both easy to read, never the same size. */
		.hdc-home-b .hdc-hm .hdc-hb {
			--logo: 3.25rem;
			gap: 1.25rem;
		}

		.hdc-home-b .hdc-hm .hdc-hb__family {
			gap: 0.625rem;
			min-height: 2.75rem;
			padding-inline-start: 1.25rem;
			font-size: 0.9375rem;
		}

		.hdc-home-b .hdc-hm .hdc-hb__hdm {
			height: 2rem;
		}

		/* The search moves to the nav bar's end. */
		.hdc-home-b .hdc-hm > .hdc-hm__bar > .hdc-hm-ask {
			display: none;
		}

		.hdc-home-b .hdc-hm__toggle {
			display: none;
		}

		.hdc-home-b .hdc-hm__act {
			align-self: stretch;
			gap: 1.25rem;
		}

		/* The hard hat specialist, standing on the bar's floor. */
		.hdc-home-b .hdc-hm-person {
			display: block;
			position: relative;
			flex: none;
			align-self: stretch;
			width: 8.5rem;
		}

		.hdc-home-b .hdc-hm-person__img {
			position: absolute;
			bottom: 0;
			left: 50%;
			width: auto;
			max-width: none;
			height: 7.25rem;
			transform: translateX(-50%);
		}

		.hdc-home-b .hdc-hm__desk {
			display: grid;
			grid-template-columns: auto auto;
			align-content: center;
			gap: 0.75rem;
		}

		.hdc-home-b .hdc-hm__quote {
			display: inline-flex;
		}

		/* The reviews: the label, then both sites on one line. */
		.hdc-home-b .hdc-hm-rev {
			display: grid;
			grid-column: 1 / -1;
			gap: 0.1875rem;
		}

		.hdc-home-b .hdc-hm-rev__label {
			color: var(--hm-text);
			font-size: 0.75rem;
			font-weight: 600;
			line-height: 1.2;
		}

		.hdc-home-b .hdc-hm-rate {
			display: flex;
			gap: 1.25rem;
		}

		.hdc-home-b .hdc-hm-rate__link {
			gap: 0.375rem;
			min-height: 1.5rem;
			color: var(--white);
		}

		.hdc-home-b .hdc-hm-rate__name,
		.hdc-home-b .hdc-hm-rate__count {
			color: var(--hm-text);
		}

		.hdc-home-b .hdc-hm-rate__star {
			width: 0.8125rem;
			height: 0.8125rem;
		}

		/* 2. The nav bar: the second read. Sticks; once stuck, the mark and Call show at its ends. */
		.hdc-home-b .hdc-hm-nav {
			--focus: var(--accent);
			--link: var(--white);
			--link-hover: var(--white);
			--link-line: none;
			--link-hover-line: none;
			display: block;
			position: sticky;
			top: 0;
			z-index: 44;
			border-top: 1px solid rgb(255 255 255 / 0.1);
			background: var(--ink);
			color: var(--white);
		}

		.hdc-home-b .hdc-hm-nav__wrap {
			display: flex;
			position: relative;
			align-items: stretch;
			max-width: var(--hm-wrap);
			height: 3.25rem;
			margin-inline: auto;
			padding-inline: 2.5rem;
		}

		.hdc-home-b .hdc-hm-nav__mark,
		.hdc-home-b .hdc-hm-nav__call {
			display: none;
		}

		.hdc-home-b .hdc-hm-nav.is-stuck .hdc-hm-nav__mark {
			display: inline-flex;
			flex: none;
			align-items: center;
			margin-inline-end: 1rem;
		}

		.hdc-home-b .hdc-hm-nav__mark-svg {
			width: 1.75rem;
			height: 1.75rem;
			border-radius: 50%;
			box-shadow: 0 0 0 1.5px var(--white);
		}

		.hdc-home-b .hdc-hm-nav.is-stuck .hdc-hm-nav__ask {
			display: none;
		}

		.hdc-home-b .hdc-hm-nav.is-stuck .hdc-hm-nav__call {
			--link: var(--ink);
			--link-hover: var(--ink);
			display: inline-flex;
			align-self: center;
			gap: 0.375rem;
			height: 2.25rem;
			margin-inline-start: auto;
			padding-inline: 0.875rem;
			background: var(--accent);
			color: var(--ink);
			font-size: 0.875rem;
			font-weight: 700;
		}

		.hdc-home-b .hdc-hm-nav.is-stuck .hdc-hm-nav__call .hdc-icon {
			width: 1rem;
			height: 1rem;
		}

		.hdc-home-b .hdc-hm-nav__lines {
			display: flex;
			margin-inline: -0.625rem auto;
		}

		.hdc-home-b .hdc-hm-nav__item {
			display: flex;
		}

		.hdc-home-b .hdc-hm-nav__link {
			display: inline-flex;
			position: relative;
			align-items: center;
			gap: 0.5rem;
			padding-inline: 0.625rem;
			color: var(--white);
			font-size: 0.9375rem;
			font-stretch: 75%;
			font-weight: 650;
			letter-spacing: 0.045em;
			text-transform: uppercase;
			text-decoration: none;
			white-space: nowrap;
		}

		.hdc-home-b .hdc-hm-nav__picto {
			width: 1.375rem;
			height: 1.375rem;
		}

		/* A 2px white rule marks the open item. */
		.hdc-home-b .hdc-hm-nav__link::after {
			content: "";
			position: absolute;
			right: 0.625rem;
			bottom: 0;
			left: 0.625rem;
			height: 2px;
			background: var(--white);
			transform: scaleX(0);
			transition: transform 0.16s;
		}

		.hdc-home-b .hdc-hm-nav__item:hover .hdc-hm-nav__link::after,
		.hdc-home-b .hdc-hm-nav__item:focus-within .hdc-hm-nav__link::after {
			transform: none;
		}

		.hdc-home-b .hdc-hm-nav__item:hover .hdc-hm-nav__picto,
		.hdc-home-b .hdc-hm-nav__item:focus-within .hdc-hm-nav__picto {
			color: var(--white);
		}

		/* The search, where the other pages were: graphite, square, 40 px. */
		.hdc-home-b .hdc-hm-nav__ask {
			display: flex;
			flex: 0 1 20rem;
			align-items: center;
			min-width: 12rem;
			padding-inline-start: 1.5rem;
		}

		.hdc-home-b .hdc-hm-nav__ask .hdc-hm-ask {
			flex: 1;
			height: 2.5rem;
		}

		.hdc-home-b .hdc-hm-nav__ask .hdc-hm-ask__field {
			padding-inline: 0.875rem;
			font-size: 0.875rem;
		}

		.hdc-home-b .hdc-hm-nav__ask .hdc-hm-ask__go {
			width: 2.5rem;
		}

		/* A line's panel: a full width dark plate bolted under the nav. */
		.hdc-home-b .hdc-hm-panel {
			position: absolute;
			top: 100%;
			right: 0;
			left: 0;
			padding: 0 2.5rem 0.75rem;
			opacity: 0;
			visibility: hidden;
			transform: translateY(-0.5rem);
			transition: opacity 0.16s, transform 0.16s, visibility 0s 0.16s;
		}

		.hdc-home-b .hdc-hm-nav__item:hover .hdc-hm-panel,
		.hdc-home-b .hdc-hm-nav__item:focus-within .hdc-hm-panel {
			opacity: 1;
			visibility: visible;
			transform: none;
			transition: opacity 0.16s 0.06s, transform 0.16s 0.06s, visibility 0s 0.06s;
		}

		.hdc-home-b .hdc-hm-nav__item.is-closed .hdc-hm-panel {
			opacity: 0;
			visibility: hidden;
		}

		.hdc-home-b .hdc-hm-panel__plate {
			display: grid;
			position: relative;
			grid-template-columns: 22rem minmax(0, 1fr) 16rem;
			gap: 2.5rem;
			padding: 1.5rem 2.5rem 1.5rem 1.5rem;
			border: 1px solid rgb(255 255 255 / 0.2);
			background: var(--hm-metal);
		}

		/* The engraved border: a groove and its lip inside the edge. */
		.hdc-home-b .hdc-hm-panel__plate::before,
		.hdc-home-b .hdc-hm-panel__plate::after {
			content: "";
			position: absolute;
			inset: 3px;
			border: 1px solid var(--hm-groove);
			pointer-events: none;
		}

		.hdc-home-b .hdc-hm-panel__plate::after {
			inset: 4px;
			border-color: var(--hm-lip);
		}

		.hdc-home-b .hdc-hm-panel__plate > .hdc-hm-screw:nth-child(1) { top: 0.625rem; left: 0.625rem; }
		.hdc-home-b .hdc-hm-panel__plate > .hdc-hm-screw:nth-child(2) { top: 0.625rem; right: 0.625rem; }
		.hdc-home-b .hdc-hm-panel__plate > .hdc-hm-screw:nth-child(3) { bottom: 0.625rem; left: 0.625rem; }
		.hdc-home-b .hdc-hm-panel__plate > .hdc-hm-screw:nth-child(4) { right: 0.625rem; bottom: 0.625rem; }

		.hdc-home-b .hdc-hm-panel__photo {
			position: relative;
			margin-inline-start: 0.75rem;
			aspect-ratio: 16 / 10;
			outline: 1px solid var(--hm-groove);
			background: var(--ink);
			overflow: hidden;
		}

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

		.hdc-home-b .hdc-hm-panel__body {
			display: grid;
			align-content: center;
			gap: 1.125rem;
		}

		.hdc-home-b .hdc-hm-panel__name {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			font-size: 1.25rem;
			font-stretch: 125%;
			font-weight: 700;
			line-height: 1.15;
			letter-spacing: 0.03em;
			text-transform: uppercase;
		}

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

		/* The facts: label, dotted leader, value. */
		.hdc-home-b .hdc-hm-spec {
			display: grid;
			gap: 0.625rem;
			max-width: 34rem;
			font-size: 0.9375rem;
		}

		.hdc-home-b .hdc-hm-spec__row {
			display: flex;
			align-items: baseline;
			gap: 0.5rem;
		}

		.hdc-home-b .hdc-hm-spec dt {
			display: flex;
			flex: 1;
			align-items: baseline;
			gap: 0.5rem;
			color: var(--hm-label);
			font-size: 0.625rem;
			font-weight: 600;
			letter-spacing: 0.16em;
			text-transform: uppercase;
			white-space: nowrap;
		}

		.hdc-home-b .hdc-hm-spec dt::after {
			content: "";
			flex: 1;
			min-width: 1rem;
			border-bottom: 1px dotted rgb(255 255 255 / 0.32);
		}

		.hdc-home-b .hdc-hm-spec dd {
			margin: 0;
			color: var(--white);
			font-weight: 600;
			text-align: right;
		}

		.hdc-home-b .hdc-hm-panel__actions {
			display: grid;
			align-content: center;
			gap: 1rem;
			padding-inline-start: 2.5rem;
			border-inline-start: 1px solid var(--hm-groove);
			box-shadow: inset 1px 0 0 var(--hm-lip);
		}

		.hdc-home-b .hdc-hm-panel__go {
			--link: var(--ink);
			--link-hover: var(--ink);
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			gap: 0.5rem;
			min-height: 3rem;
			padding-inline: 1rem;
			background: var(--white);
			color: var(--ink);
			font-size: 0.9375rem;
			font-weight: 700;
			text-decoration: none;
			white-space: nowrap;
		}

		.hdc-home-b .hdc-hm-panel__go:hover {
			background: var(--fog);
		}

		.hdc-home-b .hdc-hm-panel__go .hdc-icon {
			width: 1rem;
			height: 1rem;
		}

		.hdc-home-b .hdc-hm-panel__call {
			--link: var(--white);
			--link-hover: var(--white);
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0.25rem 0.5rem;
			color: var(--white);
			font-size: 0.9375rem;
			font-weight: 700;
			font-variant-numeric: tabular-nums;
		}

		.hdc-home-b .hdc-hm-panel__call .hdc-b-call__label {
			color: var(--hm-label);
			font-weight: 500;
		}

		.hdc-home-b .hdc-hm-panel__call .hdc-icon {
			width: 0.875rem;
			height: 0.875rem;
			color: var(--mist);
		}
	}

	@media (min-width: 90rem) {
		.hdc-home-b .hdc-hm-nav__link {
			padding-inline: 0.875rem;
		}

		.hdc-home-b .hdc-hm-nav__link::after {
			right: 0.875rem;
			left: 0.875rem;
		}

		.hdc-home-b .hdc-hm-nav__lines {
			margin-inline-start: -0.875rem;
		}

		.hdc-home-b .hdc-hm-nav__ask {
			flex-basis: 22rem;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hdc-home-b .hdc-hm-panel,
		.hdc-home-b .hdc-hm-nav__link::after {
			transition: none;
		}

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