/*
 * Hadof unified layout V18.
 *
 * Converges the accumulated page systems into one editorial rhythm. Content
 * remains server rendered; the layer removes motion-dependent readability and
 * gives slow-loading first-party imagery an intentional technical surface.
 */

:root {
	--hx-shell: min(1240px, calc(100vw - 48px));
	--hu18-ink: #111c28;
	--hu18-ink-soft: #1a2937;
	--hu18-copy: #46586c;
	--hu18-muted: #66768a;
	--hu18-line: #d5dee5;
	--hu18-mist: #f1f4f6;
	--hu18-paper: #fff;
	--hu18-orange: #f59b1a;
	--hu18-blue: #245ac4;
	--hu18-section-space: clamp(4rem, 5.5vw, 5.25rem);
}

body.hadof-v2-content :is(.hadof-x3, .hx-detail, .hadof-v2-page) {
	color: var(--hu18-ink);
	font-family: Inter, "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

/* Readability must not depend on a scroll observer or animation finishing. */
html.hx-motion-ready body.hadof-v2-content [data-hx-reveal],
body.hadof-v2-content [data-hx-reveal] {
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

body.hadof-v2-content :is(.hx-eyebrow, .hadof-kicker, .hadof-v2-kicker) {
	font-size: .79rem;
	font-weight: 750;
	letter-spacing: .045em;
	line-height: 1.3;
	text-transform: uppercase;
}

body.hadof-v2-content :is(.hadof-x3, .hx-detail, .hadof-v2-page) p {
	font-size: 1rem;
	line-height: 1.68;
}

body.hadof-v2-content :is(.hadof-x3, .hx-detail, .hadof-v2-page) :is(h1, h2, h3) {
	letter-spacing: -.025em;
}

body.hadof-v2-content :is(.hadof-x3, .hx-detail) > :is(.hx-section, .hadof-section, .hadof-v2-section),
body.hadof-v2-content .hadof-v2-page > :is(.hx-section, .hadof-section, .hadof-v2-section) {
	padding-block: var(--hu18-section-space);
}

body.hadof-v2-content :is(.hx-section-head, .hadof-section__head, .hadof-v2-section__head) {
	gap: clamp(1.5rem, 4vw, 4rem);
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

body.hadof-v2-content :is(.hx-section-head, .hadof-section__head, .hadof-v2-section__head) h2 {
	font-size: clamp(2.15rem, 3.1vw, 2.9rem);
	line-height: 1.08;
	max-width: 20ch;
}

body.hadof-v2-content :is(.hx-section-head--split, .hadof-v2-section__head) > p {
	max-width: 48ch;
}

body.hadof-v2-content :is(.hx-button, .hadof-button, .hadof-v2-button) {
	align-items: center;
	border-radius: 2px;
	box-shadow: none;
	display: inline-flex;
	font-size: .9rem;
	font-weight: 750;
	justify-content: center;
	line-height: 1.25;
	min-height: 48px;
	padding: .7rem 1.35rem;
}

/* First-level pages share one compact, legible editorial hero. */
body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-hero__grid {
	grid-template-columns: minmax(0, .48fr) minmax(0, .52fr);
	max-width: 1440px;
	min-height: clamp(500px, 40vw, 555px);
}

body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-hero__copy {
	padding: clamp(3.25rem, 5vw, 4.5rem) clamp(2.25rem, 4.5vw, 4.5rem) clamp(3.25rem, 5vw, 4.5rem) max(32px, calc((100vw - 1240px) / 2));
}

body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-hero__copy > * {
	max-width: 570px;
}

body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-hero__copy h1 {
	font-size: clamp(3rem, 3.8vw, 3.65rem);
	letter-spacing: -.04em;
	line-height: 1.02;
	max-width: 14ch;
}

body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-hero__copy > p:not(.hx-eyebrow) {
	font-size: 1.05rem;
	line-height: 1.65;
	max-width: 50ch;
}

body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-actions {
	gap: .75rem;
	margin-top: 1.35rem;
}

body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-basis {
	margin-top: 1.4rem;
}

body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-basis > span {
	font-size: .82rem;
	line-height: 1.5;
	padding: .1rem .8rem;
}

/* Technical grid is visible immediately while the documentary image loads. */
body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-hero__media {
	background-color: #1b2a37;
	background-image:
		linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(135deg, #223544, #14222e);
	background-size: 48px 48px, 48px 48px, auto;
	isolation: isolate;
	overflow: hidden;
}

body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-hero__media img {
	background: transparent;
	position: absolute;
	z-index: 1;
}

body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-hero__media figcaption {
	z-index: 2;
}

/* The local page nav is useful, but should not behave like a second header. */
body.hadof-v2-content :is(.hadof-x3, .hx-detail) :is(.hx-subnav, .hadof-v2-anchor, .hadof-anchor-nav) {
	box-shadow: 0 6px 18px rgba(17, 28, 40, .045);
}

body.hadof-v2-content .hadof-x3 .hx-subnav a,
body.hadof-v2-content .hx-detail :is(.hadof-v2-anchor, .hadof-anchor-nav) a {
	font-size: .8rem;
	line-height: 1.3;
	min-height: 48px;
	padding: .7rem 1.1rem;
}

/* Card collections become broader editorial routes instead of a dense shop grid. */
body.hadof-v2-content .hadof-x3 .hx-route-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.hadof-v2-content .hadof-x3 .hx-route-grid > a {
	background: #f5f7f8;
	border: 0;
	box-shadow: none;
}

body.hadof-v2-content .hadof-x3 .hx-route-grid > a > div {
	padding: 1.2rem 1.1rem 1.35rem;
}

body.hadof-v2-content .hadof-x3 .hx-route-grid > a h3 {
	font-size: 1.35rem;
	line-height: 1.2;
}

body.hadof-v2-content :is(.hx-route-grid, .hadof-equipment-grid, .hadof-case-grid, .hadof-v2-card-grid) figure {
	background-color: #e6ecef;
	background-image:
		linear-gradient(rgba(38, 70, 96, .065) 1px, transparent 1px),
		linear-gradient(90deg, rgba(38, 70, 96, .065) 1px, transparent 1px);
	background-size: 32px 32px;
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

body.hadof-v2-content :is(.hx-route-grid, .hadof-equipment-grid, .hadof-case-grid, .hadof-v2-card-grid) figure img {
	position: relative;
	z-index: 1;
}

body.hadof-v2-content .hadof-equipment-card dl > div {
	gap: .75rem;
	grid-template-columns: minmax(104px, max-content) minmax(0, 1fr);
}

/* Detail pages keep photography, but avoid full-screen and light-gradient gaps. */
body.hadof-v2-content .hx-detail :is(.hadof-v2-hero, .hadof-product-hero, .hadof-pro-hero) {
	background-color: var(--hu18-ink);
	min-height: clamp(480px, 42vw, 540px);
}

body.hadof-v2-content .hx-detail :is(.hadof-v2-hero, .hadof-product-hero, .hadof-pro-hero)::after {
	background: linear-gradient(90deg, rgba(8, 16, 24, .94), rgba(8, 16, 24, .74) 43%, rgba(8, 16, 24, .32) 100%);
}

body.hadof-v2-content .hx-detail :is(.hadof-v2-hero h1, .hadof-product-hero h1, .hadof-pro-hero h1) {
	font-size: clamp(3rem, 4vw, 3.8rem);
	line-height: 1.01;
	max-width: 13ch;
}

body.hadof-v2-content .hx-detail .hadof-pro-intent span,
body.hadof-v2-content .hx-detail .hadof-v2-proofbar span {
	font-size: .83rem;
	line-height: 1.5;
}

body.hadof-v2-content .hadof-delivery-hero {
	column-gap: clamp(3rem, 6vw, 6rem);
	padding-block: clamp(3.25rem, 5vw, 4.5rem);
}

body.hadof-v2-content .hadof-delivery-hero h1 {
	font-size: clamp(3rem, 4.2vw, 3.85rem);
	line-height: 1.02;
}

/* Definition lists and FAQs use open separators instead of repeated boxes. */
body.hadof-v2-content :is(.hadof-faq, .hx-faq, .hadof-v2-faq) details {
	border: 0;
	border-top: 1px solid var(--hu18-line);
	border-radius: 0;
	box-shadow: none;
}

body.hadof-v2-content :is(.hadof-faq, .hx-faq, .hadof-v2-faq) details:last-child {
	border-bottom: 1px solid var(--hu18-line);
}

body.hadof-v2-content :is(.hadof-faq, .hx-faq, .hadof-v2-faq) summary {
	font-size: 1rem;
	line-height: 1.45;
	padding-block: 1rem;
}

@media (max-width: 900px) {
	:root {
		--hx-shell: min(1240px, calc(100vw - 32px));
		--hu18-section-space: 3.75rem;
	}

	body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-hero__grid {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-hero__copy {
		padding: 3rem max(20px, 5vw) 2.6rem;
	}

	body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-hero__media {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	body.hadof-v2-content .hadof-x3 .hx-route-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	:root {
		--hx-shell: min(100% - 32px, 1240px);
		--hu18-section-space: 3.25rem;
	}

	body.hadof-v2-content :is(.hadof-x3, .hx-detail, .hadof-v2-page) p {
		font-size: .96rem;
		line-height: 1.68;
	}

	body.hadof-v2-content :is(.hx-section-head, .hadof-section__head, .hadof-v2-section__head) h2 {
		font-size: clamp(2rem, 9vw, 2.45rem);
		max-width: 16ch;
	}

	body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-hero__copy {
		padding: 2.5rem 16px 2.15rem;
	}

	body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-hero__copy h1 {
		font-size: clamp(2.3rem, 10vw, 2.65rem);
		line-height: 1.03;
		max-width: 14ch;
	}

	body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-actions {
		grid-template-columns: 1fr;
	}

	body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-actions a {
		min-height: 48px;
	}

	body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-basis {
		margin-top: 1.2rem;
	}

	body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-basis > span {
		padding: .62rem 0;
	}

	body.hadof-v2-content .hadof-x3:not(.hadof-x3-home) > .hx-hub-hero .hx-hub-hero__media {
		aspect-ratio: 16 / 9;
		min-height: 215px;
	}

	body.hadof-v2-content .hadof-x3 .hx-subnav .hx-shell,
	body.hadof-v2-content .hx-detail :is(.hadof-v2-anchor, .hadof-anchor-nav) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.hadof-v2-content .hadof-x3 .hx-subnav a,
	body.hadof-v2-content .hx-detail :is(.hadof-v2-anchor, .hadof-anchor-nav) a {
		font-size: .73rem;
		justify-content: flex-start;
		min-height: 44px;
		padding: .55rem .45rem;
	}

	body.hadof-v2-content .hadof-x3 .hx-route-grid {
		grid-template-columns: 1fr;
	}

	body.hadof-v2-content .hx-detail :is(.hadof-v2-hero, .hadof-product-hero, .hadof-pro-hero) {
		min-height: 470px;
	}

	body.hadof-v2-content .hx-detail :is(.hadof-v2-hero, .hadof-product-hero, .hadof-pro-hero)::after {
		background: linear-gradient(0deg, rgba(8, 16, 24, .96), rgba(8, 16, 24, .66) 68%, rgba(8, 16, 24, .3));
	}

	body.hadof-v2-content .hx-detail :is(.hadof-v2-hero h1, .hadof-product-hero h1, .hadof-pro-hero h1) {
		font-size: clamp(2.45rem, 11vw, 2.85rem);
	}

	body.hadof-v2-content .hadof-delivery-hero {
		padding-block: 3rem;
	}

	body.hadof-v2-content .hadof-delivery-hero h1 {
		font-size: clamp(2.55rem, 11.5vw, 3rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.hadof-v2-content * {
		scroll-behavior: auto !important;
	}
}