@charset "UTF-8";

/**
 * Industry application pages (Wind Energy first).
 *
 * Loaded only on an industry page, after the shared modules, so every rule here can
 * assume the design tokens exist. The page reuses the site header, so the first block
 * below the header is offset by the sticky header height rather than by zero.
 *
 * Band rhythm keeps the page from becoming one long white column:
 * navy hero -> white overview -> light map -> alternating application blocks ->
 * navy challenges -> white matrix -> light failures -> white workflow -> light types ->
 * white products -> light bearing brands -> white request -> light documents -> white FAQ ->
 * light related -> navy quote.
 *
 * Breakpoints are literals because custom properties cannot drive a media query:
 * 1180px, 1000px, 767px, 560px, 390px.
 *
 * @package HCT_Child
 */

/* ---------------------------------------------------------------------------
 * 1. Page frame
 * ------------------------------------------------------------------------ */

/* The template prints .hct-foundation on <main>, which would clamp the whole page to
 * the container width and pad it. Bands need the full viewport, so the container duty
 * moves to .hct-ind-shell and the main element becomes a plain full-width wrapper.
 * Astra's `.ast-container` is a flex row, so a bare block child would shrink to its
 * content instead of filling the row: the explicit width keeps the wrapper edge to edge. */
.hct-ind-main {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding: 0;
	overflow-x: clip;
}

/*
 * Astra caps the whole page inside a boxed `.ast-container`. Every band on an industry
 * page is meant to run edge to edge, and each one already brings its own
 * `.hct-ind-shell` for the reading column, so the vendor container is neutralised for
 * this document only. Scoped with the body class the template adds, so no other page
 * or archive is affected.
 */
body.hct-industry-page .site-content > .ast-container {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.hct-ind-shell {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--hct-container-width);
	margin-inline: auto;
	padding-inline: var(--hct-gutter);
}

.hct-ind-section {
	padding-block: 88px;
}

/* Anchors stop below the sticky site header (74px + 48px) and the sticky section nav. */
.hct-ind-section[id],
.hct-ind-app[id] {
	scroll-margin-top: 186px;
}

/* In-page jumps glide; the script does the same, this covers the plain anchor case.
   Motion is opt-in, so a visitor who has asked for less motion keeps instant jumps. */
@media (prefers-reduced-motion: no-preference) {
	html:has(.hct-ind-main) {
		scroll-behavior: smooth;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Bands
 * ------------------------------------------------------------------------ */

.hct-ind-band--muted {
	background: var(--hct-surface);
	border-block: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-ind-band--navy {
	background: var(--hct-navy);
	color: var(--hct-on-dark);
}

.hct-ind-band--cta {
	background:
		linear-gradient(180deg, rgb(11 30 49 / 0%) 0%, rgb(8 23 38 / 55%) 100%),
		var(--hct-navy);
	color: var(--hct-on-dark);
}

.hct-ind-map {
	background: var(--hct-surface);
	border-block: var(--hct-border-width) solid var(--hct-border-hairline);
}

/* ---------------------------------------------------------------------------
 * 3. Shared type helpers
 * ------------------------------------------------------------------------ */

.hct-ind-eyebrow {
	margin: 0 0 var(--hct-space-xs);
	color: var(--hct-primary);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-eyebrow);
	line-height: var(--hct-lh-snug);
	text-transform: uppercase;
}

.hct-ind-eyebrow--on-dark {
	color: var(--hct-sky);
}

.hct-ind-h2 {
	margin: 0;
	color: var(--hct-primary);
	font-size: var(--hct-fs-2xl);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-tight);
	line-height: var(--hct-lh-heading);
}

.hct-ind-h2--spaced {
	margin-top: var(--hct-space-xl);
}

.hct-ind-h2--on-dark {
	color: var(--hct-on-dark);
}

.hct-ind-h3 {
	margin: 0;
	color: var(--hct-primary);
	font-size: var(--hct-fs-lg);
	font-weight: var(--hct-fw-bold);
	line-height: var(--hct-lh-heading);
}

.hct-ind-lede {
	max-width: 76ch;
	margin: var(--hct-space-md) 0 0;
	color: var(--hct-muted);
	font-size: var(--hct-fs-lead);
	line-height: var(--hct-lh-snug);
}

.hct-ind-lede--on-dark {
	color: var(--hct-on-dark-lead);
}

.hct-ind-body {
	margin: 0 0 var(--hct-space-sm);
	color: var(--hct-text);
	font-size: var(--hct-fs-body);
	line-height: var(--hct-lh-body);
}

.hct-ind-body:last-child {
	margin-bottom: 0;
}

.hct-ind-note {
	margin: var(--hct-space-md) 0 0;
	padding-left: var(--hct-space-sm);
	border-left: 2px solid var(--hct-border);
	color: var(--hct-muted);
	font-size: var(--hct-fs-sm);
	line-height: var(--hct-lh-snug);
}

.hct-ind-note--small {
	font-size: var(--hct-fs-2xs);
}

.hct-ind-disclaimer {
	margin: var(--hct-space-md) 0 0;
	padding: var(--hct-space-sm) var(--hct-space-md);
	border: var(--hct-border-width) solid var(--hct-border);
	border-left: 3px solid var(--hct-accent);
	border-radius: var(--hct-radius-sm);
	background: var(--hct-background);
	color: var(--hct-muted);
	font-size: var(--hct-fs-sm);
	line-height: var(--hct-lh-snug);
}

/* ---------------------------------------------------------------------------
 * 4. Links, chips, buttons
 * ------------------------------------------------------------------------ */

.hct-ind-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--hct-primary);
	font-size: var(--hct-fs-sm);
	font-weight: var(--hct-fw-semibold);
	text-decoration: none;
	border-bottom: var(--hct-border-width) solid currentColor;
	padding-bottom: 2px;
	transition: color .15s ease;
}

.hct-ind-link:hover,
.hct-ind-link:focus-visible {
	color: var(--hct-accent);
}

.hct-ind-link--on-dark {
	color: var(--hct-sky);
}

.hct-ind-link--on-dark:hover,
.hct-ind-link--on-dark:focus-visible {
	color: var(--hct-on-dark);
}

.hct-ind-link--action {
	margin-top: var(--hct-space-md);
	font-size: var(--hct-fs-sm);
}

.hct-ind-link__icon {
	font-size: .9em;
	line-height: 1;
}

/* The global stylesheet fills every bare button navy, so the controls used inside the
 * page are reset once here and dressed individually further down. */
.hct-ind-main button {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: inherit;
	white-space: normal;
	cursor: pointer;
}

.hct-button--on-dark {
	border-color: rgb(255 255 255 / 55%);
	background: rgb(255 255 255 / 6%);
	color: var(--hct-on-dark);
}

.hct-button--on-dark:hover,
.hct-button--on-dark:focus-visible {
	border-color: var(--hct-on-dark);
	background: var(--hct-on-dark);
	color: var(--hct-navy);
}

/* components.css ships .hct-visually-hidden, but the industry partials print
 * .screen-reader-text. Define it here so the table captions stay accessible. */
.hct-ind-main .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.hct-ind-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

span.hct-ind-chips {
	display: inline-flex;
}

.hct-ind-chip {
	display: inline-block;
	padding: 4px 10px;
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: 999px;
	background: var(--hct-background);
	color: var(--hct-navy);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: .02em;
	line-height: 1.5;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

a.hct-ind-chip:hover,
a.hct-ind-chip:focus-visible {
	border-color: var(--hct-primary);
	background: var(--hct-primary);
	color: var(--hct-white);
}

.hct-ind-band--navy .hct-ind-chip,
.hct-ind-band--cta .hct-ind-chip {
	border-color: rgb(255 255 255 / 34%);
	background: rgb(255 255 255 / 8%);
	color: var(--hct-on-dark-lead);
}

/* ---------------------------------------------------------------------------
 * 5. Figures, placeholders and fact lists
 * ------------------------------------------------------------------------ */

.hct-ind-figure {
	position: relative;
	margin: 0;
	aspect-ratio: var(--hct-ind-ratio, 16 / 9);
}

.hct-ind-figure--drawn,
.hct-ind-figure--hotspots {
	aspect-ratio: auto;
}

.hct-ind-figure__art {
	display: block;
	width: 100%;
	aspect-ratio: var(--hct-ind-ratio, 16 / 9);
}

.hct-ind-figure__art > svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hct-ind-figure__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	padding-top: 12px;
	color: var(--hct-muted);
	font-size: var(--hct-fs-2xs);
	line-height: var(--hct-lh-snug);
}

.hct-ind-figure--hotspots .hct-ind-figure__meta {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
}

.hct-ind-figure--hotspots {
	margin-bottom: 52px;
}

.hct-ind-figure__tag {
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-index);
	text-transform: uppercase;
	color: var(--hct-primary);
}

.hct-ind-figure__caption {
	flex: 1 1 auto;
}

.hct-ind-figure__ratio {
	font-variant-numeric: tabular-nums;
	color: var(--hct-subtle);
}

.hct-ind-figure--hero .hct-ind-figure__tag {
	color: var(--hct-sky);
}

.hct-ind-figure--hero .hct-ind-figure__caption,
.hct-ind-figure--hero .hct-ind-figure__ratio {
	color: var(--hct-on-dark-muted);
}

/* A slot is a labelled technical placeholder, never a blank grey box. */
.hct-ind-figure__slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position: relative;
	width: 100%;
	height: 100%;
	padding: var(--hct-space-md);
	box-sizing: border-box;
	text-align: center;
	background-color: var(--hct-background);
	background-image:
		linear-gradient(rgb(23 59 94 / 7%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(23 59 94 / 7%) 1px, transparent 1px);
	background-size: 32px 32px;
	border: var(--hct-border-width) dashed var(--hct-border-soft);
	border-radius: var(--hct-radius);
}

.hct-ind-figure__slot::before,
.hct-ind-figure__slot::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border: 2px solid var(--hct-accent);
	opacity: .55;
}

.hct-ind-figure__slot::before {
	top: 10px;
	left: 10px;
	border-right: 0;
	border-bottom: 0;
}

.hct-ind-figure__slot::after {
	right: 10px;
	bottom: 10px;
	border-top: 0;
	border-left: 0;
}

.hct-ind-figure__slot .hct-ind-figure__tag {
	padding: 4px 10px;
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius-sm);
	background: var(--hct-background);
	color: var(--hct-navy);
}

.hct-ind-figure__slot .hct-ind-figure__caption {
	max-width: 46ch;
	color: var(--hct-muted);
	font-size: var(--hct-fs-xs);
}

.hct-ind-figure--hero .hct-ind-figure__slot {
	background-color: rgb(255 255 255 / 3%);
	background-image:
		linear-gradient(rgb(255 255 255 / 8%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 8%) 1px, transparent 1px);
	border-color: rgb(255 255 255 / 26%);
}

.hct-ind-figure--hero .hct-ind-figure__slot .hct-ind-figure__tag {
	border-color: rgb(255 255 255 / 26%);
	background: rgb(255 255 255 / 6%);
	color: var(--hct-on-dark);
}

.hct-ind-figure--hero .hct-ind-figure__slot .hct-ind-figure__caption {
	color: var(--hct-on-dark-muted);
}

.hct-ind-facts {
	margin-top: var(--hct-space-md);
}

.hct-ind-facts__title {
	margin: 0 0 8px;
	color: var(--hct-primary);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-index);
	text-transform: uppercase;
}

.hct-ind-facts__list {
	margin: 0;
	padding: 0;
}

.hct-ind-facts__row {
	display: grid;
	grid-template-columns: minmax(150px, 34%) 1fr;
	gap: var(--hct-space-sm);
	padding: 9px 0;
	border-top: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-ind-facts__row:first-child {
	border-top: 0;
}

.hct-ind-facts__row dt {
	color: var(--hct-muted);
	font-size: var(--hct-fs-xs);
	font-weight: var(--hct-fw-semibold);
	line-height: var(--hct-lh-snug);
}

.hct-ind-facts__row dd {
	margin: 0;
	color: var(--hct-text);
	font-size: var(--hct-fs-sm);
	line-height: var(--hct-lh-snug);
}

.hct-ind-facts__row--plain {
	grid-template-columns: 1fr;
}

/* ---------------------------------------------------------------------------
 * 6. Technical diagrams
 *
 * The authored SVGs carry classes and no presentation attributes, so every stroke and
 * fill is decided here. Each figure publishes the palette as custom properties, which
 * lets the same drawing render light on a white band and light-on-navy inside the hero.
 * ------------------------------------------------------------------------ */

.hct-diag {
	--hct-diag-shell-fill: #e4e8ec;
	--hct-diag-shell-stroke: #b3bdc7;
	--hct-diag-plate-fill: #d3d9df;
	--hct-diag-plate-stroke: #a8b3be;
	--hct-diag-shaft-fill: #c6ced6;
	--hct-diag-shaft-stroke: #98a4b0;
	--hct-diag-bearing-fill: #ffffff;
	--hct-diag-bearing-stroke: #173b5e;
	--hct-diag-core-fill: #f2f4f6;
	--hct-diag-core-stroke: #9aa5b0;
	--hct-diag-accent-fill: #d93832;
	--hct-diag-roll-fill: #5f6872;
	--hct-diag-bolt-fill: #8a949c;
	--hct-diag-axis-stroke: #d93832;
	--hct-diag-arrow-stroke: #173b5e;
	--hct-diag-leader-stroke: #aeb8c2;
	--hct-diag-ground-stroke: #6b7580;
	--hct-diag-badge-fill: #173b5e;
	--hct-diag-badge-text: #ffffff;
	--hct-diag-label-fill: #5f6872;
	--hct-diag-label-strong: #173b5e;
	--hct-diag-label-stroke: #ffffff;
}

.hct-ind-figure--hero .hct-diag {
	--hct-diag-shell-fill: rgb(255 255 255 / 11%);
	--hct-diag-shell-stroke: rgb(255 255 255 / 34%);
	--hct-diag-plate-fill: rgb(255 255 255 / 18%);
	--hct-diag-plate-stroke: rgb(255 255 255 / 38%);
	--hct-diag-shaft-fill: rgb(255 255 255 / 26%);
	--hct-diag-shaft-stroke: rgb(255 255 255 / 52%);
	--hct-diag-bearing-fill: rgb(10 27 45 / 88%);
	--hct-diag-bearing-stroke: #89c8ec;
	--hct-diag-core-fill: rgb(255 255 255 / 15%);
	--hct-diag-core-stroke: rgb(255 255 255 / 44%);
	--hct-diag-accent-fill: #d93832;
	--hct-diag-roll-fill: #c5d3dd;
	--hct-diag-bolt-fill: #89c8ec;
	--hct-diag-axis-stroke: #89c8ec;
	--hct-diag-arrow-stroke: #89c8ec;
	--hct-diag-leader-stroke: rgb(255 255 255 / 40%);
	--hct-diag-ground-stroke: rgb(255 255 255 / 48%);
	--hct-diag-badge-fill: #d93832;
	--hct-diag-badge-text: #ffffff;
	--hct-diag-label-fill: #c5d3dd;
	--hct-diag-label-strong: #ffffff;
	--hct-diag-label-stroke: #173b5e;
}

.hct-diag-shell {
	fill: var(--hct-diag-shell-fill);
	stroke: var(--hct-diag-shell-stroke);
	stroke-width: 2;
}

.hct-diag-plate {
	fill: var(--hct-diag-plate-fill);
	stroke: var(--hct-diag-plate-stroke);
	stroke-width: 1.5;
}

.hct-diag-shaft {
	fill: var(--hct-diag-shaft-fill);
	stroke: var(--hct-diag-shaft-stroke);
	stroke-width: 1.5;
}

.hct-diag-bearing {
	fill: var(--hct-diag-bearing-fill);
	stroke: var(--hct-diag-bearing-stroke);
	stroke-width: 2.5;
}

.hct-diag-core {
	fill: var(--hct-diag-core-fill);
	stroke: var(--hct-diag-core-stroke);
	stroke-width: 1.5;
}

.hct-diag-accent-fill {
	fill: var(--hct-diag-accent-fill);
}

.hct-diag-roll {
	fill: var(--hct-diag-roll-fill);
}

.hct-diag-bolt {
	fill: var(--hct-diag-bolt-fill);
}

.hct-diag-axis {
	fill: none;
	stroke: var(--hct-diag-axis-stroke);
	stroke-width: 1.5;
	stroke-dasharray: 14 8 3 8;
}

.hct-diag-arrow {
	fill: none;
	stroke: var(--hct-diag-arrow-stroke);
	stroke-width: 2;
}

.hct-diag-leader {
	fill: none;
	stroke: var(--hct-diag-leader-stroke);
	stroke-width: 1.25;
	stroke-dasharray: 5 5;
}

.hct-diag-ground {
	fill: none;
	stroke: var(--hct-diag-ground-stroke);
	stroke-width: 2;
}

.hct-diag-badge {
	fill: var(--hct-diag-badge-fill);
}

.hct-diag-badge-text {
	fill: var(--hct-diag-badge-text);
	font-family: var(--hct-font-family);
	font-size: 13px;
	font-weight: 700;
	text-anchor: middle;
	letter-spacing: .04em;
}

.hct-diag-label {
	fill: var(--hct-diag-label-fill);
	font-family: var(--hct-font-family);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	paint-order: stroke;
	stroke: var(--hct-diag-label-stroke);
	stroke-width: 3;
	stroke-linejoin: round;
}

.hct-diag-label--strong {
	fill: var(--hct-diag-label-strong);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 7. Hero
 * ------------------------------------------------------------------------ */

.hct-ind-hero {
	position: relative;
	padding-block: 72px 88px;
	background:
		radial-gradient(120% 120% at 82% 18%, rgb(21 95 143 / 42%) 0%, rgb(21 95 143 / 0%) 58%),
		var(--hct-navy);
	color: var(--hct-on-dark);
}

.hct-ind-hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--hct-accent) 0%, var(--hct-accent) 22%, rgb(217 56 50 / 0%) 22%);
}

.hct-ind-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
	align-items: center;
	gap: 56px;
}

.hct-ind-hero__title {
	margin: 0;
	color: var(--hct-on-dark);
	font-size: var(--hct-fs-display);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-tight);
	line-height: var(--hct-lh-tight);
}

.hct-ind-hero__subtitle {
	max-width: 44ch;
	margin: var(--hct-space-md) 0 0;
	color: var(--hct-on-dark-lead);
	font-size: var(--hct-fs-lead);
	font-weight: var(--hct-fw-medium);
	line-height: var(--hct-lh-snug);
}

.hct-ind-hero__intro {
	max-width: 56ch;
	margin: var(--hct-space-md) 0 0;
	color: var(--hct-on-dark-muted);
	font-size: var(--hct-fs-body);
	line-height: var(--hct-lh-body);
}

.hct-ind-hero__visual .hct-ind-figure {
	margin: 0;
	padding: 18px;
	border: var(--hct-border-width) solid rgb(255 255 255 / 16%);
	border-radius: var(--hct-radius);
	background: rgb(255 255 255 / 4%);
}

.hct-ind-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hct-space-sm);
	margin-top: var(--hct-space-lg);
}

.hct-ind-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: var(--hct-space-lg) 0 0;
	padding: 0;
	list-style: none;
}

.hct-ind-tags__item {
	padding: 6px 12px;
	border: var(--hct-border-width) solid rgb(255 255 255 / 24%);
	border-radius: 999px;
	color: var(--hct-on-dark-lead);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-index);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 8. Sticky section navigation
 *
 * The site header is sticky at z-index 100 and 122px tall on desktop, so this bar
 * parks underneath it rather than at the top of the viewport, and stays below it in
 * the stacking order.
 * ------------------------------------------------------------------------ */

.hct-ind-nav {
	position: sticky;
	top: 122px;
	z-index: 60;
	margin: 0;
	background: var(--hct-background);
	border-bottom: var(--hct-border-width) solid var(--hct-border);
	box-shadow: 0 6px 14px rgb(20 36 49 / 5%);
}

body.admin-bar .hct-ind-nav {
	top: 154px;
}

.hct-ind-nav__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--hct-container-width);
	margin-inline: auto;
	padding-inline: var(--hct-gutter);
}

.hct-ind-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px var(--hct-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hct-ind-nav__item {
	display: flex;
}

.hct-ind-nav__link {
	display: inline-block;
	padding: 14px 0;
	border-bottom: 2px solid transparent;
	color: var(--hct-muted);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-eyebrow);
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease;
}

.hct-ind-nav__link:hover,
.hct-ind-nav__link:focus-visible {
	color: var(--hct-primary);
}

.hct-ind-nav__link.is-active {
	color: var(--hct-primary);
	border-bottom-color: var(--hct-accent);
}

/* ---------------------------------------------------------------------------
 * 9. Overview
 * ------------------------------------------------------------------------ */

.hct-ind-overview__grid {
	display: grid;
	grid-template-columns: minmax(0, 40%) minmax(0, 60%);
	gap: 56px;
	margin-top: var(--hct-space-lg);
	align-items: start;
}

.hct-ind-overview__copy {
	padding-top: var(--hct-space-2xs);
}

.hct-ind-overview__visual {
	min-width: 0;
}

.hct-ind-overview__visual .hct-ind-figure {
	padding: 16px;
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
}

.hct-ind-legend {
	display: grid;
	gap: 0;
	margin: var(--hct-space-md) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.hct-ind-legend__item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: var(--hct-space-sm);
	align-items: baseline;
	padding: 10px 0;
	border-top: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-ind-legend__index {
	color: var(--hct-accent);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-index);
	font-variant-numeric: tabular-nums;
}

.hct-ind-legend__body {
	display: block;
}

.hct-ind-legend__label {
	display: block;
	color: var(--hct-primary);
	font-size: var(--hct-fs-sm);
	font-weight: var(--hct-fw-bold);
	line-height: var(--hct-lh-snug);
}

.hct-ind-legend__note {
	display: block;
	margin-top: 2px;
	color: var(--hct-muted);
	font-size: var(--hct-fs-xs);
	line-height: var(--hct-lh-snug);
}

/* ---------------------------------------------------------------------------
 * 10. Interactive bearing application map
 *
 * Hotspots are server-rendered buttons placed as percentages of the drawing viewBox,
 * so they scale with the figure. Without JavaScript every detail panel is visible in
 * sequence; the script adds .is-enhanced to switch to one position at a time.
 * ------------------------------------------------------------------------ */

.hct-ind-map__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	margin-top: var(--hct-space-xl);
}

.hct-ind-map__stage {
	position: relative;
	min-width: 0;
	margin: 0;
}

.hct-ind-figure--hotspots .hct-ind-figure__art {
	position: relative;
	display: block;
	aspect-ratio: var(--hct-ind-ratio, 16 / 9);
	overflow: hidden;
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
}

.hct-ind-figure--hotspots .hct-diag {
	display: block;
	width: 100%;
	height: 100%;
}

.hct-ind-hotspot {
	position: absolute;
	top: var(--hct-hot-y, 50%);
	left: var(--hct-hot-x, 50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	transform: translate(-50%, -50%);
	text-align: center;
}

.hct-ind-hotspot__dot {
	position: relative;
	display: block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--hct-background);
	border-radius: 50%;
	background: var(--hct-navy);
	box-shadow: 0 0 0 1px rgb(23 59 94 / 45%);
	transition: background-color .15s ease, box-shadow .15s ease;
}

.hct-ind-hotspot__dot::after {
	position: absolute;
	inset: -8px;
	border: 1px solid rgb(217 56 50 / 45%);
	border-radius: 50%;
	content: "";
	opacity: 0;
	transform: scale(.6);
	transition: opacity .15s ease, transform .15s ease;
}

.hct-ind-hotspot__index {
	color: var(--hct-accent);
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-index);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.hct-ind-hotspot__label {
	padding: 2px 6px;
	border-radius: 2px;
	background: rgb(255 255 255 / 88%);
	color: var(--hct-navy);
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: .04em;
	line-height: 1.25;
	text-transform: uppercase;
	white-space: nowrap;
}

.hct-ind-hotspot:hover .hct-ind-hotspot__dot,
.hct-ind-hotspot:focus-visible .hct-ind-hotspot__dot,
.hct-ind-hotspot.is-active .hct-ind-hotspot__dot {
	background: var(--hct-accent);
	box-shadow: 0 0 0 1px rgb(217 56 50 / 55%);
}

.hct-ind-hotspot.is-active .hct-ind-hotspot__dot::after {
	opacity: 1;
	transform: scale(1);
}

.hct-ind-hotspot.is-active .hct-ind-hotspot__label {
	background: var(--hct-navy);
	color: var(--hct-on-dark);
}

.hct-ind-map__panels {
	display: grid;
	gap: var(--hct-space-md);
	min-width: 0;
}

.hct-ind-position {
	padding: var(--hct-space-md);
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
}

.hct-ind-map__layout.is-enhanced .hct-ind-position {
	display: none;
}

.hct-ind-map__layout.is-enhanced .hct-ind-position.is-active {
	display: block;
	border-color: var(--hct-primary);
	box-shadow: var(--hct-shadow-panel);
}

.hct-ind-position__index {
	margin: 0;
	color: var(--hct-accent);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-index);
	font-variant-numeric: tabular-nums;
}

.hct-ind-position__title {
	margin: 2px 0 var(--hct-space-sm);
	color: var(--hct-primary);
	font-size: var(--hct-fs-lg);
	font-weight: var(--hct-fw-heavy);
	line-height: var(--hct-lh-heading);
}

.hct-ind-position__facts {
	margin: 0;
}

.hct-ind-position__fact {
	display: grid;
	grid-template-columns: minmax(110px, 36%) minmax(0, 1fr);
	gap: var(--hct-space-sm);
	padding: 10px 0;
	border-top: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-ind-position__fact dt {
	color: var(--hct-muted);
	font-size: var(--hct-fs-xs);
	font-weight: var(--hct-fw-semibold);
	line-height: var(--hct-lh-snug);
}

.hct-ind-position__fact dd {
	margin: 0;
	color: var(--hct-text);
	font-size: var(--hct-fs-sm);
	line-height: var(--hct-lh-snug);
}

.hct-ind-position .hct-ind-link {
	margin-top: var(--hct-space-sm);
}

/* ---------------------------------------------------------------------------
 * 11. Applications
 *
 * One markup shape, three layouts. The drawing sits on the left, on the right, or above
 * the copy, and the whole block can sit on the muted band. Tables are shared with the
 * selection matrix and are styled in section 13.
 * ------------------------------------------------------------------------ */

.hct-ind-app {
	padding-block: 72px;
}

.hct-ind-app--muted {
	background: var(--hct-surface);
	border-block: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-ind-app__head {
	margin-bottom: var(--hct-space-lg);
}

.hct-ind-app__index {
	margin: 0 0 6px;
	color: var(--hct-accent);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-index);
	font-variant-numeric: tabular-nums;
}

.hct-ind-app__title {
	margin: 0;
	color: var(--hct-primary);
	font-size: var(--hct-fs-xl);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-tight);
	line-height: var(--hct-lh-heading);
}

.hct-ind-app__grid {
	display: grid;
	gap: 48px;
	align-items: start;
}

.hct-ind-app--image-left .hct-ind-app__grid {
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.hct-ind-app--image-right .hct-ind-app__grid {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.hct-ind-app--stacked .hct-ind-app__grid {
	grid-template-columns: minmax(0, 1fr);
}

.hct-ind-app--stacked .hct-ind-app__visual {
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
}

.hct-ind-app__visual {
	min-width: 0;
}

.hct-ind-app__visual .hct-ind-figure {
	margin: 0;
	padding: 16px;
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
}

.hct-ind-app__copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hct-ind-app__summary {
	margin: 0;
	color: var(--hct-text);
	font-size: var(--hct-fs-lead);
	line-height: var(--hct-lh-body);
}

.hct-ind-app__copy .hct-ind-facts,
.hct-ind-app__copy .hct-ind-callout,
.hct-ind-app__copy .hct-ind-questions,
.hct-ind-app__copy .hct-ind-link--action {
	margin-top: var(--hct-space-md);
}

.hct-ind-callout {
	padding: var(--hct-space-md);
	border: var(--hct-border-width) solid var(--hct-border);
	border-left: 3px solid var(--hct-primary);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
}

.hct-ind-callout--accent {
	border-left-color: var(--hct-accent);
	background: rgb(217 56 50 / 4%);
}

.hct-ind-callout__title {
	margin: 0 0 6px;
	color: var(--hct-primary);
	font-size: var(--hct-fs-md);
	font-weight: var(--hct-fw-bold);
	line-height: var(--hct-lh-snug);
}

.hct-ind-callout__body {
	margin: 0;
	color: var(--hct-muted);
	font-size: var(--hct-fs-sm);
	line-height: var(--hct-lh-body);
}

.hct-ind-questions {
	padding: var(--hct-space-md);
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-surface);
}

.hct-ind-app--muted .hct-ind-questions {
	background: var(--hct-background);
}

.hct-ind-questions__title {
	margin: 0 0 var(--hct-space-2xs);
	color: var(--hct-primary);
	font-size: var(--hct-fs-md);
	font-weight: var(--hct-fw-bold);
	line-height: var(--hct-lh-snug);
}

.hct-ind-questions__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hct-ind-questions__item {
	position: relative;
	margin-top: 10px;
	padding-left: 20px;
	color: var(--hct-text);
	font-size: var(--hct-fs-sm);
	line-height: var(--hct-lh-snug);
}

.hct-ind-questions__item::before {
	position: absolute;
	top: .55em;
	left: 0;
	width: 10px;
	height: 1px;
	background: var(--hct-accent);
	content: "";
}

.hct-ind-app > .hct-ind-shell > .hct-ind-table-wrap,
.hct-ind-app > .hct-ind-shell > .hct-ind-note {
	margin-top: var(--hct-space-lg);
}

/* ---------------------------------------------------------------------------
 * 12. Engineering challenges (navy band)
 * ------------------------------------------------------------------------ */

.hct-ind-challenges .hct-ind-lede {
	max-width: 64ch;
}

.hct-ind-challenges__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: var(--hct-space-xl) 0 0;
	padding: 0;
	list-style: none;
}

.hct-ind-challenge {
	display: flex;
	flex-direction: column;
	padding: var(--hct-space-md);
	border: var(--hct-border-width) solid rgb(255 255 255 / 14%);
	border-radius: var(--hct-radius);
	background: rgb(255 255 255 / 4%);
}

.hct-ind-challenge__icon {
	display: block;
	width: 30px;
	height: 30px;
	margin-bottom: var(--hct-space-sm);
	color: var(--hct-sky);
}

.hct-ind-challenge__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hct-ind-challenge__title {
	margin: 0 0 var(--hct-space-sm);
	color: var(--hct-on-dark);
	font-size: var(--hct-fs-md);
	font-weight: var(--hct-fw-bold);
	line-height: var(--hct-lh-snug);
}

.hct-ind-challenge__facts {
	margin: 0;
}

.hct-ind-challenge__fact {
	padding: 8px 0;
	border-top: var(--hct-border-width) solid rgb(255 255 255 / 12%);
}

.hct-ind-challenge__fact dt {
	color: var(--hct-sky);
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-index);
	text-transform: uppercase;
}

.hct-ind-challenge__fact dd {
	margin: 2px 0 0;
	color: var(--hct-on-dark-muted);
	font-size: var(--hct-fs-xs);
	line-height: var(--hct-lh-snug);
}

/* ---------------------------------------------------------------------------
 * 13. Technical tables
 *
 * Shared by the application position tables and the bearing selection matrix. On
 * desktop they stay tables; section 24 turns each row into a labelled card on small
 * screens using the data-label attributes the partials already print.
 * ------------------------------------------------------------------------ */

.hct-ind-table-wrap {
	overflow-x: auto;
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
	-webkit-overflow-scrolling: touch;
}

.hct-ind-table {
	width: 100%;
	min-width: 780px;
	border-collapse: collapse;
	font-size: var(--hct-fs-sm);
	line-height: var(--hct-lh-snug);
}

.hct-ind-table th,
.hct-ind-table td {
	padding: 14px 16px;
	border-bottom: var(--hct-border-width) solid var(--hct-border-hairline);
	text-align: left;
	vertical-align: top;
}

.hct-ind-table thead th {
	background: var(--hct-navy);
	border-bottom: 0;
	color: var(--hct-on-dark);
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-index);
	text-transform: uppercase;
	white-space: nowrap;
}

.hct-ind-table tbody th {
	color: var(--hct-primary);
	font-weight: var(--hct-fw-bold);
}

.hct-ind-table tbody tr:nth-child(even) {
	background: rgb(23 59 94 / 3%);
}

.hct-ind-table tbody tr:last-child th,
.hct-ind-table tbody tr:last-child td {
	border-bottom: 0;
}

.hct-ind-table .hct-ind-chips {
	display: flex;
	gap: 6px;
}

.hct-ind-table--matrix {
	min-width: 940px;
}

.hct-ind-table--matrix tbody th {
	white-space: nowrap;
}

.hct-ind-table-wrap + .hct-ind-disclaimer {
	margin-top: var(--hct-space-md);
}

/* ---------------------------------------------------------------------------
 * 14. Failure modes
 * ------------------------------------------------------------------------ */

.hct-ind-failures .hct-ind-lede {
	max-width: 68ch;
}

.hct-ind-failures__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: var(--hct-space-xl) 0 0;
	padding: 0;
	list-style: none;
}

.hct-ind-failure {
	padding: var(--hct-space-md);
	border: var(--hct-border-width) solid var(--hct-border);
	border-left: 3px solid var(--hct-accent);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
}

.hct-ind-failure__title {
	margin: 0 0 var(--hct-space-sm);
	color: var(--hct-primary);
	font-size: var(--hct-fs-md);
	font-weight: var(--hct-fw-heavy);
	line-height: var(--hct-lh-snug);
}

.hct-ind-failure__facts {
	margin: 0;
}

.hct-ind-failure__fact {
	display: grid;
	grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
	gap: var(--hct-space-sm);
	padding: 8px 0;
	border-top: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-ind-failure__fact dt {
	color: var(--hct-muted);
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.hct-ind-failure__fact dd {
	margin: 0;
	color: var(--hct-text);
	font-size: var(--hct-fs-xs);
	line-height: var(--hct-lh-snug);
}

.hct-ind-failures .hct-ind-note {
	margin-top: var(--hct-space-lg);
}

/* ---------------------------------------------------------------------------
 * 15. Bearing selection workflow
 * ------------------------------------------------------------------------ */

.hct-ind-workflow .hct-ind-lede {
	max-width: 66ch;
}

.hct-ind-workflow__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: var(--hct-space-xl) 0 0;
	padding: 0;
	list-style: none;
}

.hct-ind-step {
	padding: var(--hct-space-md);
	border-top: 2px solid var(--hct-primary);
	border-radius: 0 0 var(--hct-radius) var(--hct-radius);
	background: var(--hct-surface);
}

.hct-ind-step__index {
	display: block;
	margin-bottom: 6px;
	color: var(--hct-accent);
	font-size: var(--hct-fs-md);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-index);
	font-variant-numeric: tabular-nums;
}

.hct-ind-step__title {
	margin: 0 0 6px;
	color: var(--hct-primary);
	font-size: var(--hct-fs-md);
	font-weight: var(--hct-fw-bold);
	line-height: var(--hct-lh-snug);
}

.hct-ind-step__body {
	margin: 0;
	color: var(--hct-muted);
	font-size: var(--hct-fs-xs);
	line-height: var(--hct-lh-body);
}

.hct-ind-workflow__note {
	margin-top: var(--hct-space-lg);
	padding: var(--hct-space-md);
	border: var(--hct-border-width) solid var(--hct-border);
	border-left: 3px solid var(--hct-primary);
	border-radius: var(--hct-radius);
	background: var(--hct-surface);
}

.hct-ind-workflow__note .hct-ind-body {
	margin: 0;
}

.hct-ind-workflow__note .hct-ind-body + .hct-ind-body {
	margin-top: var(--hct-space-sm);
}

/* ---------------------------------------------------------------------------
 * 16. Bearing families
 *
 * Every entry is a real product category or a plain statement of the family; the grid
 * reads the same either way, so a missing term does not leave a hole in the layout.
 * ------------------------------------------------------------------------ */

.hct-ind-families__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: var(--hct-space-xl) 0 0;
	padding: 0;
	list-style: none;
}

.hct-ind-family {
	display: flex;
	flex-direction: column;
	padding: var(--hct-space-md);
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
}

.hct-ind-family__title {
	margin: 0 0 8px;
	color: var(--hct-primary);
	font-size: var(--hct-fs-md);
	font-weight: var(--hct-fw-heavy);
	line-height: var(--hct-lh-snug);
}

.hct-ind-family__desc {
	margin: 0;
	color: var(--hct-muted);
	font-size: var(--hct-fs-xs);
	line-height: var(--hct-lh-body);
}

.hct-ind-family__facts {
	margin: var(--hct-space-sm) 0 0;
	padding-top: var(--hct-space-2xs);
	border-top: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-ind-family__fact dt {
	color: var(--hct-subtle);
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.hct-ind-family__fact dd {
	margin: 2px 0 0;
	color: var(--hct-text);
	font-size: var(--hct-fs-xs);
	line-height: var(--hct-lh-snug);
}

.hct-ind-family .hct-ind-link {
	margin-top: auto;
	padding-top: var(--hct-space-sm);
	font-size: var(--hct-fs-xs);
}

/* ---------------------------------------------------------------------------
 * 17. Products
 *
 * The catalogue card markup is WooCommerce's, but product.css is not enqueued on an
 * industry page, so the card, the position filters and the four/two/one ladder are
 * declared here instead of relying on the shop stylesheet.
 * ------------------------------------------------------------------------ */

.hct-ind-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: var(--hct-space-lg) 0 0;
}

.hct-ind-filter {
	padding: var(--hct-space-3xs) var(--hct-space-xs);
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius-sm);
	background: var(--hct-background);
	color: var(--hct-muted);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-index);
	text-transform: uppercase;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.hct-ind-filter:hover,
.hct-ind-filter:focus-visible {
	border-color: var(--hct-subtle);
	color: var(--hct-text);
}

.hct-ind-filter.is-active {
	border-color: var(--hct-primary);
	background: var(--hct-primary);
	color: var(--hct-white);
}

.hct-ind-products .hct-cards {
	margin-top: var(--hct-space-lg);
}

.hct-ind-products__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hct-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: var(--hct-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hct-cards__item {
	display: flex;
}

.hct-cards__item[hidden],
.hct-cards__item.is-hidden {
	display: none;
}

.hct-cards__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
	color: var(--hct-text);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.hct-cards__link:hover,
.hct-cards__link:focus-visible {
	border-color: var(--hct-primary);
	box-shadow: var(--hct-shadow);
}

.hct-cards__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: var(--hct-space-sm);
	background: var(--hct-surface);
}

.hct-cards__image {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.hct-cards__body {
	display: flex;
	flex-direction: column;
	gap: var(--hct-space-3xs);
	padding: var(--hct-space-sm);
}

.hct-cards__title {
	color: var(--hct-primary);
	font-size: var(--hct-fs-sm);
	font-weight: var(--hct-fw-heavy);
	line-height: var(--hct-lh-snug);
}

.hct-cards__type,
.hct-cards__dims {
	font-size: var(--hct-fs-2xs);
	line-height: var(--hct-lh-snug);
}

.hct-cards__type {
	color: var(--hct-muted);
}

.hct-cards__dims {
	color: var(--hct-text);
	font-variant-numeric: tabular-nums;
}

.hct-ind-products__empty[hidden] {
	display: none;
}

.hct-ind-products .hct-ind-note {
	margin-top: var(--hct-space-lg);
}

/* ---------------------------------------------------------------------------
 * 18. Bearing brands
 *
 * Three states share one tile: a brand that exists as a term and carries the pilot
 * flag is a real link, a brand that exists only as a term is catalogue reference,
 * and a brand HCT sources but has not catalogued reads as a plain name. The tile is
 * the same size in every state so the grid never looks broken, and only the linked
 * state takes the navy hover.
 * ------------------------------------------------------------------------ */

.hct-ind-brands__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: var(--hct-space-lg) 0 0;
	padding: 0;
	list-style: none;
}

.hct-ind-brand {
	display: flex;
	min-width: 0;
}

.hct-ind-brand__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 14px var(--hct-space-sm);
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
	color: var(--hct-text);
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.hct-ind-brand__name {
	overflow: hidden;
	font-size: var(--hct-fs-sm);
	font-weight: var(--hct-fw-heavy);
	line-height: var(--hct-lh-snug);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hct-ind-brand__icon {
	flex: none;
	color: var(--hct-accent);
	font-size: var(--hct-fs-sm);
	line-height: 1;
}

/* Catalogue reference without a brand page yet: same tile, quieter type. */
.hct-ind-brand[data-hct-ind-brand="catalogue"] .hct-ind-brand__name {
	color: var(--hct-muted);
}

.hct-ind-brand[data-hct-ind-brand="catalogue"] .hct-ind-brand__icon {
	color: var(--hct-subtle);
}

/* Brand list but nothing in the catalogue: name only, no promise of a page. */
.hct-ind-brand[data-hct-ind-brand="reference"] .hct-ind-brand__link {
	border-style: dashed;
	color: var(--hct-muted);
}

.hct-ind-brand[data-hct-ind-brand="reference"] .hct-ind-brand__name {
	color: var(--hct-muted);
	font-weight: var(--hct-fw-medium);
}

.hct-ind-brand[data-hct-ind-brand="reference"] .hct-ind-brand__icon {
	display: none;
}

.hct-ind-brand[data-hct-ind-brand="brand-page"] .hct-ind-brand__link:hover,
.hct-ind-brand[data-hct-ind-brand="brand-page"] .hct-ind-brand__link:focus-visible {
	border-color: var(--hct-primary);
	box-shadow: var(--hct-shadow);
	color: var(--hct-primary);
}

.hct-ind-brands__action {
	margin: var(--hct-space-lg) 0 0;
}

/* ---------------------------------------------------------------------------
 * 19. What we need from you
 *
 * The checklist is the buyer's own paperwork, so it reads as a document list rather
 * than a form: two columns on desktop, numbers-free, with a tick square that is drawn
 * in CSS because the mark span is intentionally empty. The sample enquiry sits beside
 * it as a bordered spec sheet so the shape of a useful message is obvious.
 * ------------------------------------------------------------------------ */

.hct-ind-request__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	margin-top: var(--hct-space-xl);
}

.hct-ind-request__main .hct-ind-h3,
.hct-ind-request__sample .hct-ind-h3 {
	margin-bottom: var(--hct-space-md);
}

.hct-ind-checklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px var(--hct-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hct-ind-checklist__item {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	padding: 11px 0;
	border-bottom: 1px solid var(--hct-border-hairline);
}

.hct-ind-checklist__mark {
	position: relative;
	display: block;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: 2px;
	background: var(--hct-surface);
}

.hct-ind-checklist__mark::after {
	position: absolute;
	top: 2px;
	left: 5px;
	width: 4px;
	height: 8px;
	border: solid var(--hct-accent);
	border-width: 0 2px 2px 0;
	content: "";
	transform: rotate(45deg);
}

.hct-ind-checklist__label {
	color: var(--hct-text);
	font-size: var(--hct-fs-sm);
	line-height: var(--hct-lh-snug);
}

.hct-ind-request__sample {
	padding: var(--hct-space-md);
	border: var(--hct-border-width) solid var(--hct-border);
	border-top: 3px solid var(--hct-navy);
	border-radius: var(--hct-radius);
	background: var(--hct-surface);
}

.hct-ind-sample {
	margin: 0;
}

.hct-ind-sample__row {
	display: grid;
	grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
	gap: var(--hct-space-sm);
	padding: 9px 0;
	border-bottom: 1px solid var(--hct-border-hairline);
}

.hct-ind-sample__row:last-child {
	border-bottom: 0;
}

.hct-ind-sample__label {
	color: var(--hct-subtle);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.hct-ind-sample__value {
	margin: 0;
	color: var(--hct-text);
	font-size: var(--hct-fs-xs);
	line-height: var(--hct-lh-snug);
	overflow-wrap: anywhere;
}

.hct-ind-request__upload {
	margin: var(--hct-space-lg) 0 0;
	padding-top: var(--hct-space-md);
	border-top: 1px solid var(--hct-border-hairline);
}

/* ---------------------------------------------------------------------------
 * 20. Technical resources
 *
 * Seven documents are configured and none of them has a file yet, so the pending
 * state is the normal state rather than an edge case: a dashed leaf with the status
 * line in place of a download. The moment HCT attaches a PDF the same card grows a
 * link, which is why the two states keep identical padding and height behaviour.
 * ------------------------------------------------------------------------ */

.hct-ind-resources__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: var(--hct-space-lg) 0 0;
	padding: 0;
	list-style: none;
}

.hct-ind-resource {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--hct-space-md);
	border: var(--hct-border-width) solid var(--hct-border);
	border-top: 3px solid var(--hct-navy);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
}

.hct-ind-resource--pending {
	border-top-color: var(--hct-subtle);
	border-top-style: dashed;
}

.hct-ind-resource__title {
	margin: 0;
	color: var(--hct-text);
	font-size: var(--hct-fs-lg);
	font-weight: var(--hct-fw-bold);
	line-height: var(--hct-lh-heading);
}

.hct-ind-resource__body {
	margin: 0;
	color: var(--hct-muted);
	font-size: var(--hct-fs-xs);
	line-height: var(--hct-lh-body);
}

.hct-ind-resource .hct-ind-link {
	margin-top: auto;
	padding-top: var(--hct-space-sm);
	font-size: var(--hct-fs-xs);
}

.hct-ind-resource__status {
	margin: auto 0 0;
	padding-top: var(--hct-space-sm);
	color: var(--hct-subtle);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-index);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 21. Engineering FAQ
 *
 * Native details/summary, so the answers are readable with the script absent. The
 * marker is removed in both engines and replaced with a drawn plus that becomes a
 * minus on the open item; the question text is the only thing that changes colour,
 * which keeps ten rows calm.
 * ------------------------------------------------------------------------ */

.hct-ind-faq__list {
	margin-top: var(--hct-space-lg);
	border-top: 1px solid var(--hct-border);
}

.hct-ind-faq__item {
	border-bottom: 1px solid var(--hct-border);
}

.hct-ind-faq__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--hct-space-md);
	padding: 20px 0;
	color: var(--hct-text);
	font-size: var(--hct-fs-md);
	font-weight: var(--hct-fw-bold);
	line-height: var(--hct-lh-snug);
	cursor: pointer;
	list-style: none;
	transition: color .15s ease;
}

.hct-ind-faq__question::-webkit-details-marker {
	display: none;
}

.hct-ind-faq__text {
	flex: 1 1 auto;
	min-width: 0;
}

.hct-ind-faq__question:hover,
.hct-ind-faq__question:focus-visible {
	color: var(--hct-primary);
}

.hct-ind-faq__toggle {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 4px;
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: 50%;
	transition: border-color .15s ease, background-color .15s ease;
}

.hct-ind-faq__toggle::before,
.hct-ind-faq__toggle::after {
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--hct-navy);
	content: "";
	transform: translate(-50%, -50%);
	transition: opacity .15s ease, background-color .15s ease;
}

.hct-ind-faq__toggle::before {
	width: 8px;
	height: 2px;
}

.hct-ind-faq__toggle::after {
	width: 2px;
	height: 8px;
}

.hct-ind-faq__item[open] .hct-ind-faq__question {
	color: var(--hct-primary);
}

.hct-ind-faq__item[open] .hct-ind-faq__toggle {
	border-color: var(--hct-primary);
	background: var(--hct-primary);
}

.hct-ind-faq__item[open] .hct-ind-faq__toggle::before,
.hct-ind-faq__item[open] .hct-ind-faq__toggle::after {
	background: var(--hct-on-dark);
}

.hct-ind-faq__item[open] .hct-ind-faq__toggle::after {
	opacity: 0;
}

.hct-ind-faq__answer {
	padding: 0 var(--hct-space-xl) var(--hct-space-md) 0;
}

.hct-ind-faq__answer .hct-ind-body {
	max-width: 88ch;
	color: var(--hct-muted);
}

/* ---------------------------------------------------------------------------
 * 22. Related families and industries
 *
 * Two blocks share one section: the family row is chips because those are live
 * product_cat links, and the industry row is cards because three of the five
 * destinations do not exist yet. A missing page keeps the card, loses the arrow and
 * drops to grey, so the grid reads as a road map rather than as broken links.
 * ------------------------------------------------------------------------ */

.hct-ind-related .hct-ind-chips {
	margin-top: var(--hct-space-md);
}

.hct-ind-chips__item {
	display: flex;
}

.hct-ind-industries {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: var(--hct-space-lg) 0 0;
	padding: 0;
	list-style: none;
}

.hct-ind-industry {
	display: flex;
	min-width: 0;
}

.hct-ind-industry__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	gap: 4px var(--hct-space-sm);
	align-items: center;
	width: 100%;
	padding: var(--hct-space-md);
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
	color: var(--hct-text);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.hct-ind-industry__title {
	grid-column: 1;
	color: var(--hct-navy);
	font-size: var(--hct-fs-md);
	font-weight: var(--hct-fw-bold);
	line-height: var(--hct-lh-heading);
}

.hct-ind-industry__desc {
	grid-column: 1;
	color: var(--hct-muted);
	font-size: var(--hct-fs-xs);
	line-height: var(--hct-lh-snug);
}

.hct-ind-industry__icon {
	grid-column: 2;
	grid-row: 1 / span 2;
	color: var(--hct-accent);
	font-size: var(--hct-fs-md);
	line-height: 1;
}

a.hct-ind-industry__link:hover,
a.hct-ind-industry__link:focus-visible {
	border-color: var(--hct-primary);
	box-shadow: var(--hct-shadow);
}

/* Slug not published yet: same footprint, no arrow, no pointer. */
.hct-ind-industry--pending .hct-ind-industry__link {
	border-style: dashed;
	background: transparent;
	cursor: default;
}

.hct-ind-industry--pending .hct-ind-industry__title,
.hct-ind-industry--pending .hct-ind-industry__desc {
	color: var(--hct-subtle);
}

/* ---------------------------------------------------------------------------
 * 23. Closing enquiry call to action
 *
 * Navy band, so the buttons and every link inside it switch to the on-dark palette.
 * The right panel holds the real intake shortcode when the plugin is active and the
 * details list when it is not; both sit on a light surface because a form on a navy
 * field is unreadable, and the panel never changes height between the two states.
 * ------------------------------------------------------------------------ */

.hct-ind-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 56px;
	align-items: center;
}

.hct-ind-cta__intro .hct-ind-lede {
	max-width: 46ch;
}

.hct-ind-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hct-space-sm);
	margin: var(--hct-space-lg) 0 0;
}

.hct-ind-cta .hct-button--ghost {
	border-color: rgb(255 255 255 / 38%);
	background: transparent;
	color: var(--hct-on-dark);
}

.hct-ind-cta .hct-button--ghost:hover,
.hct-ind-cta .hct-button--ghost:focus-visible {
	border-color: var(--hct-on-dark);
	background: rgb(255 255 255 / 10%);
	color: var(--hct-on-dark);
}

.hct-ind-cta__panel {
	min-width: 0;
}

.hct-ind-cta__form {
	padding: var(--hct-space-lg);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
}

.hct-ind-cta__form .hct-ind-h3 {
	margin-top: 0;
}

.hct-ind-cta__fields {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hct-ind-cta__field {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	padding: 9px 0;
	border-bottom: 1px solid var(--hct-border-hairline);
	color: var(--hct-text);
	font-size: var(--hct-fs-sm);
	line-height: var(--hct-lh-snug);
}

.hct-ind-cta__field::before {
	margin-top: 6px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--hct-accent);
	content: "";
}

.hct-ind-cta__note {
	margin: var(--hct-space-md) 0 0;
	color: var(--hct-muted);
	font-size: var(--hct-fs-xs);
	line-height: var(--hct-lh-body);
}

.hct-ind-cta__note .hct-ind-link {
	margin-left: 4px;
}

/* The intake shortcode brings its own markup; make sure it never overflows the panel. */
.hct-ind-cta__form input,
.hct-ind-cta__form select,
.hct-ind-cta__form textarea,
.hct-ind-cta__form button {
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * 24. Responsive
 *
 * The breakpoints are the theme's documented set because a custom property cannot be
 * used in a media condition. Two things drive the numbers here: the site header
 * collapses to a single 68px row at 1180 and a 64px row at 767, so the sticky section
 * navigator has to follow it or it will float over the masthead; and the technical
 * tables become stacked cards rather than being squeezed, since a five column
 * comparison is unreadable below tablet width.
 * ------------------------------------------------------------------------ */

@media (max-width: 1180px) {
	/* Header is one 68px row from here down. */
	.hct-ind-nav {
		top: 68px;
	}

	body.admin-bar .hct-ind-nav {
		top: 100px;
	}

	.hct-ind-hero__grid {
		gap: 36px;
	}

	.hct-ind-overview__grid,
	.hct-ind-request__grid,
	.hct-ind-cta__grid {
		gap: 32px;
	}

	.hct-ind-map__layout {
		gap: 32px;
	}

	.hct-ind-families__grid,
	.hct-ind-resources__grid,
	.hct-ind-industries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hct-ind-brands__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.hct-ind-products__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hct-cards {
		grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
	}

	.hct-ind-checklist {
		gap: 2px var(--hct-space-sm);
	}
}

@media (max-width: 1000px) {
	.hct-ind-hero__grid,
	.hct-ind-overview__grid,
	.hct-ind-map__layout,
	.hct-ind-cta__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hct-ind-hero__grid {
		gap: 40px;
	}

	.hct-ind-map__layout {
		gap: 28px;
	}

	/* Every application block stacks, and the mirror layouts lead with the drawing
	   so the mobile page still opens each block on an image rather than on prose. */
	.hct-ind-app--image-left .hct-ind-app__grid,
	.hct-ind-app--image-right .hct-ind-app__grid,
	.hct-ind-app--stacked .hct-ind-app__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hct-ind-app--image-right .hct-ind-app__visual {
		order: -1;
	}

	.hct-ind-challenges__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hct-ind-workflow__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hct-ind-failures__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hct-ind-brands__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hct-ind-request__grid {
		gap: 28px;
	}

	.hct-ind-resources__grid {
		gap: 16px;
	}
}

@media (max-width: 767px) {
	/* Header is one 64px row from here down, and the navigator becomes a swipe strip. */
	.hct-ind-nav {
		top: 64px;
	}

	body.admin-bar .hct-ind-nav {
		top: 110px;
	}

	.hct-ind-nav__inner {
		padding-inline: var(--hct-space-md);
	}

	.hct-ind-nav__list {
		flex-wrap: nowrap;
		gap: 0 var(--hct-space-md);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.hct-ind-nav__list::-webkit-scrollbar {
		display: none;
	}

	.hct-ind-section {
		padding-block: var(--hct-section-space-mobile);
	}

	.hct-ind-section,
	.hct-ind-app {
		scroll-margin-top: 122px;
	}

	.hct-ind-app {
		padding-block: 56px;
	}

	.hct-ind-app > .hct-ind-shell > .hct-ind-table-wrap,
	.hct-ind-app > .hct-ind-shell > .hct-ind-note {
		margin-top: var(--hct-space-md);
	}

	.hct-ind-challenges__grid,
	.hct-ind-workflow__grid,
	.hct-ind-resources__grid,
	.hct-ind-industries,
	.hct-ind-checklist,
	.hct-ind-request__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hct-ind-brands__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hct-ind-request__grid,
	.hct-ind-cta__grid {
		gap: 24px;
	}

	.hct-ind-cta__grid {
		align-items: start;
	}

	.hct-ind-cta__form {
		padding: var(--hct-space-md);
	}

	.hct-ind-faq__question {
		padding: 16px 0;
		font-size: var(--hct-fs-body);
	}

	.hct-ind-faq__answer {
		padding: 0 0 var(--hct-space-md);
	}

	/* The tables stop being tables: each row becomes its own technical card and every
	   cell prints the column heading it belonged to, so nothing has to be squeezed. */
	.hct-ind-table-wrap {
		overflow: visible;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.hct-ind-table,
	.hct-ind-table--matrix {
		min-width: 0;
		border-collapse: separate;
	}

	.hct-ind-table thead {
		display: none;
	}

	.hct-ind-table tbody,
	.hct-ind-table tbody tr,
	.hct-ind-table tbody th,
	.hct-ind-table tbody td {
		display: block;
		width: auto;
	}

	.hct-ind-table tbody tr {
		margin-bottom: 12px;
		overflow: hidden;
		border: var(--hct-border-width) solid var(--hct-border);
		border-radius: var(--hct-radius);
		background: var(--hct-background);
	}

	.hct-ind-table tbody tr:nth-child(even) {
		background: var(--hct-background);
	}

	.hct-ind-table tbody tr:last-child {
		margin-bottom: 0;
	}

	.hct-ind-table tbody th,
	.hct-ind-table tbody td {
		display: grid;
		grid-template-columns: minmax(94px, 38%) minmax(0, 1fr);
		gap: 10px;
		align-items: baseline;
		border-bottom: var(--hct-border-width) solid var(--hct-border-hairline);
		padding: 10px 14px;
		text-align: left;
		white-space: normal;
	}

	.hct-ind-table tbody th::before,
	.hct-ind-table tbody td::before {
		color: var(--hct-subtle);
		font-size: var(--hct-fs-3xs);
		font-weight: var(--hct-fw-heavy);
		letter-spacing: var(--hct-ls-index);
		line-height: var(--hct-lh-snug);
		text-transform: uppercase;
		content: attr(data-label);
	}

	/* The row header is the card title, so it does not repeat its own label. */
	.hct-ind-table tbody th[scope="row"] {
		display: block;
		padding: 12px 14px;
		border-bottom: var(--hct-border-width) solid var(--hct-border-hairline);
		background: var(--hct-surface);
		color: var(--hct-navy);
		font-size: var(--hct-fs-body);
	}

	.hct-ind-table tbody th[scope="row"]::before {
		display: none;
	}

	.hct-ind-table tbody tr:last-child th,
	.hct-ind-table tbody tr:last-child td {
		border-bottom: 0;
	}

	.hct-ind-table--matrix tbody th {
		white-space: normal;
	}
}

@media (max-width: 560px) {
	.hct-ind-families__grid,
	.hct-ind-products__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hct-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hct-ind-hero__visual .hct-ind-figure {
		padding: 10px;
	}

	.hct-ind-actions .hct-button,
	.hct-ind-cta__actions .hct-button {
		width: 100%;
	}

	/* Label and value stop competing for one line on the narrowest phones. */
	.hct-ind-failure__fact,
	.hct-ind-sample__row,
	.hct-ind-position__fact {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.hct-ind-table tbody th,
	.hct-ind-table tbody td {
		grid-template-columns: minmax(84px, 36%) minmax(0, 1fr);
		gap: 8px;
		padding: 9px 12px;
	}

	.hct-ind-resource,
	.hct-ind-request__sample {
		padding: var(--hct-space-sm);
	}
}

@media (max-width: 390px) {
	.hct-cards,
	.hct-ind-products__grid,
	.hct-ind-brands__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hct-ind-nav__link {
		font-size: var(--hct-fs-3xs);
	}

	.hct-ind-brands__action .hct-button {
		width: 100%;
	}
}