/*!
 * Kanomax USA — homepage components
 * [kx_hero] · [kx_featured_products] · [kx_partners]
 * Psynthesis Creative · 2026-09-27 · rev 2026-10-01 (contained panel,
 * cleanroom category, calibrations stripe)
 *
 * Enqueued by includes/kx-home.php only on pages that use these shortcodes.
 * Loads after the child style.css (declared dependency), so with the CSS
 * bundler on it lands in kx-tail and keeps the last word in the cascade.
 */
/* ============================================================
   KX HERO — "Measured Field"  [kx_hero]
   Replaces the LayerSlider hero, the mobile banner image and
   both sets of blue category buttons.
   ============================================================ */
.kx-hero {
	--kx-navy-0: #06111d;
	--kx-navy-1: #0b1c2b;
	--kx-navy-2: #142a3c;
	--kx-steel: #405666;
	--kx-blue: #0b64b7;
	--kx-blue-deep: #00509b;
	--kx-cyan: #22c4f2;
	--kx-cyan-rgb: 34, 196, 242;
	--kx-cream: #f5edc6;
	--kx-green: #3fa800;
	--kx-green-bright: #54dd00;
	--kx-ink: #e8eef3;
	--kx-ink-dim: rgba(222, 232, 240, .74);
	--kx-line: rgba(213, 225, 233, .16);
	--kx-line-strong: rgba(213, 225, 233, .28);
	--kx-radius: 12px;
	--kx-radius-sm: 6px;
	--kx-max: 1300px;
	--kx-gutter: max(16px, calc((100% - var(--kx-max)) / 2));

	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--kx-ink);
	font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
	background:
		radial-gradient(120% 90% at 72% 42%, #11314f 0%, rgba(17, 49, 79, 0) 60%),
		linear-gradient(135deg, #0b1c2b 0%, #0f2438 40%, #142a3c 62%, #0a1826 100%);
}
.kx-hero *, .kx-hero *::before, .kx-hero *::after { box-sizing: border-box; }

/* Stage: copy, field, card */
.kx-hero__stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-rows: minmax(0, 1fr);
	gap: 24px 32px;
	min-height: clamp(600px, 70vh, 700px);
	padding: 64px var(--kx-gutter) 28px;
}
.kx-hero__canvas,
.kx-hero__hud,
.kx-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.kx-hero__canvas { z-index: 0; width: 100%; height: 100%; display: block; }
.kx-hero__scrim {
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(6, 17, 29, .92) 0%, rgba(6, 17, 29, .72) 30%, rgba(6, 17, 29, 0) 58%),
		linear-gradient(0deg, rgba(6, 17, 29, .55) 0%, rgba(6, 17, 29, 0) 26%);
}
.kx-hero__hud { z-index: 2; }

/* Measurement frame: corner brackets + scale */
.kx-hero__frame {
	position: absolute;
	inset: 20px var(--kx-gutter) 20px auto;
	width: min(62%, 820px);
	pointer-events: none;
	z-index: 2;
}
.kx-hero__frame::before,
.kx-hero__frame::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	border: 1px solid var(--kx-line-strong);
}
.kx-hero__frame::before { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.kx-hero__frame::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.kx-hero__scene {
	position: absolute;
	top: 6px;
	right: 34px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kx-ink-dim);
	white-space: nowrap;
}
.kx-hero__scene b { color: var(--kx-cream); font-weight: 700; }
.kx-hero__scene i {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--kx-cyan);
	box-shadow: 0 0 10px rgba(var(--kx-cyan-rgb), .9);
}

/* Copy */
.kx-hero__copy {
	position: relative;
	z-index: 3;
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	max-width: 540px;
}
.kx-hero__eyebrow {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--kx-cyan);
}
.kx-hero__title {
	margin: 0;
	font-size: clamp(40px, 5.4vw, 72px);
	line-height: .98;
	font-weight: 900;
	letter-spacing: -.01em;
	color: #fff;
	text-wrap: balance;
}
.kx-hero__title span {
	display: block;
	background: linear-gradient(100deg, #f5edc6 0%, #e6d39a 45%, #fff6d6 60%, #d9c27f 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.kx-hero__lede {
	margin: 22px 0 0;
	max-width: 46ch;
	font-size: 17px;
	line-height: 1.6;
	color: var(--kx-ink-dim);
}
.kx-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}
.kx-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px 12px;
	border: 0;
	border-bottom: 4px solid var(--kx-cyan);
	border-radius: var(--kx-radius-sm);
	background: linear-gradient(135deg, var(--kx-blue) 0%, var(--kx-blue-deep) 100%);
	box-shadow: 0 10px 24px -10px rgba(11, 100, 183, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kx-hero__btn:hover { transform: translateY(-2px); border-bottom-color: #fff; }
.kx-hero__btn--green {
	border-bottom-color: var(--kx-green-bright);
	background: linear-gradient(135deg, #46b800 0%, var(--kx-green) 100%);
	box-shadow: 0 10px 24px -10px rgba(63, 168, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.kx-hero__btn:focus-visible,
.kx-rail__item:focus-visible,
.kx-cal a:focus-visible,
.kx-card a:focus-visible,
.kx-hero__trust a:focus-visible,
.kx-hero__motion:focus-visible {
	outline: 3px solid rgba(var(--kx-cyan-rgb), .8);
	outline-offset: 3px;
}
.kx-hero__trust {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 26px 0 0;
	font-size: 13px;
	color: var(--kx-ink-dim);
}
.kx-hero__trust svg { flex: none; }
.kx-hero__trust a { color: var(--kx-cream); text-decoration: none; border-bottom: 1px solid rgba(245, 237, 198, .35); }
.kx-hero__trust a:hover { border-bottom-color: var(--kx-cream); }

/* Field spacer (mobile gives the particles their own band) */
.kx-hero__field { grid-column: 2; grid-row: 1; min-height: 0; }

/* Featured card */
.kx-card {
	position: relative;
	z-index: 3;
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	justify-self: end;
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr);
	/* Baseline for the no-JS case. With JS the card holds hidden copies of
	   every category instead (.has-ghosts), so it sizes itself. */
	min-height: 236px;
	gap: 18px;
	align-items: center;
	width: min(100%, 470px);
	padding: 16px 20px 16px 16px;
	border: 1px solid var(--kx-line);
	border-radius: var(--kx-radius);
	background: linear-gradient(135deg, rgba(20, 42, 60, .82) 0%, rgba(11, 28, 43, .78) 100%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7);
}
.kx-card::before {
	content: "";
	position: absolute;
	left: 16px; right: 16px; top: -1px;
	height: 1px;
	background: linear-gradient(90deg, rgba(var(--kx-cyan-rgb), 0), rgba(var(--kx-cyan-rgb), .9), rgba(var(--kx-cyan-rgb), 0));
}
.kx-card__media {
	position: relative;
	display: grid;
	place-items: center;
	width: 128px;
	height: 128px;
	border-radius: 10px;
	background: radial-gradient(closest-side, rgba(88, 170, 230, .28), rgba(88, 170, 230, 0));
}
.kx-card__media img {
	max-width: 118px;
	max-height: 118px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45));
}
.kx-card__body { min-width: 0; }
/* kx-hero.js stacks the live text and an invisible copy of every category
   in one grid cell, so the card is always as tall as the tallest category. */
.kx-card.has-ghosts { min-height: 0 !important; }
.kx-card.has-ghosts .kx-card__body { display: grid; }
.kx-card__live, .kx-card__ghost { grid-area: 1 / 1; min-width: 0; align-self: start; }
.kx-card__ghost { visibility: hidden; pointer-events: none; }
.kx-card__kicker {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kx-cyan);
}
.kx-card__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 900;
	color: #fff;
}
.kx-card__desc {
	margin: 6px 0 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--kx-ink-dim);
}
.kx-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 13px;
	font-weight: 700;
}
.kx-card__links a { color: var(--kx-cream); text-decoration: none; }
.kx-card__links a:hover { text-decoration: underline; }
.kx-card__links a.kx-card__all::after { content: "\00a0\00a0\2192"; white-space: nowrap; }
.kx-card__links a.kx-card__feat { color: var(--kx-ink-dim); font-weight: 400; }
.kx-card__links a.kx-card__feat b { color: var(--kx-ink); font-weight: 700; }
.kx-card.is-swapping .kx-card__media,
.kx-card.is-swapping .kx-card__body { opacity: 0; transform: translateY(6px); }
.kx-card__media, .kx-card__body { transition: opacity .22s ease, transform .22s ease; }

/* Probe readout (HUD) */
.kx-probe {
	position: absolute;
	top: 0; left: 0;
	z-index: 2;
	width: 206px;
	padding: 10px 12px 10px;
	border: 1px solid var(--kx-line-strong);
	border-radius: 8px;
	background: rgba(6, 17, 29, .72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	pointer-events: none;
	will-change: transform;
	opacity: 0;
	transition: opacity .4s ease;
}
.kx-hero.is-live .kx-probe { opacity: 1; }
.kx-probe__label {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kx-ink-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kx-probe__value {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 2px 0 6px;
	font-variant-numeric: tabular-nums;
	font-size: 26px;
	font-weight: 900;
	color: #fff;
	line-height: 1.1;
}
.kx-probe__value small { font-size: 13px; font-weight: 700; color: var(--kx-cyan); }
.kx-probe canvas { display: block; width: 100%; height: 30px; }
.kx-probe__note {
	margin: 4px 0 0;
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--kx-ink-dim);
	font-variant-numeric: tabular-nums;
}
/* Equation callouts (kx-hero.js builds them from a category's `eqs`) */
.kx-eq {
	position: absolute;
	top: 0; left: 0;
	z-index: 2;
	padding: 5px 10px 6px;
	border: 1px solid var(--kx-line-strong);
	border-radius: 6px;
	background: rgba(6, 17, 29, .62);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	pointer-events: none;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	will-change: transform, opacity;
}
.kx-eq__label {
	display: block;
	margin-bottom: 1px;
	font: 700 9px/1.4 "Lato", "Helvetica Neue", Arial, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kx-cyan);
}
.kx-eq__math {
	display: block;
	font-family: "Cambria Math", "STIX Two Math", "Cambria", "Times New Roman", serif;
	font-size: 15px;
	font-style: italic;
	line-height: 1.3;
	letter-spacing: .01em;
	color: var(--kx-cream);
}
.kx-eq__math sub, .kx-eq__math sup { font-size: .68em; line-height: 0; }
.kx-eq-line { stroke: rgba(245, 237, 198, .5); stroke-width: 1; stroke-dasharray: 2 3; }
.kx-eq-dot { fill: var(--kx-cream); }
@media (max-width: 900px) { .kx-hero .kx-eq { display: none !important; } }
.kx-hud-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity .4s ease; }
.kx-hero.is-live .kx-hud-svg { opacity: 1; }

/* Pause control (WCAG 2.2.2) */
.kx-hero__motion {
	position: absolute;
	z-index: 4;
	left: var(--kx-gutter);
	bottom: 16px;
	display: none;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border: 1px solid var(--kx-line);
	border-radius: 999px;
	background: rgba(6, 17, 29, .6);
	color: var(--kx-ink-dim);
	font: 700 11px/1 "Lato", sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}
.kx-hero.is-live .kx-hero__motion { display: inline-flex; }
.kx-hero__motion:hover { color: #fff; border-color: var(--kx-line-strong); }

/* Instrument rail (replaces the blue category buttons) */
.kx-rail {
	position: relative;
	z-index: 3;
	border-top: 1px solid var(--kx-line);
	background: linear-gradient(180deg, rgba(0, 46, 96, .92) 0%, rgba(0, 38, 80, .96) 100%);
}
.kx-rail__list {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	max-width: calc(var(--kx-max) + 2px);
	margin: 0 auto;
	padding: 0;
	list-style: none;
	border-left: 1px solid rgba(59, 117, 181, .55);
}
.kx-rail__list li { margin: 0; padding: 0; }
.kx-rail__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	min-height: 104px;
	padding: 18px 16px 16px;
	border-right: 1px solid rgba(59, 117, 181, .55);
	color: var(--kx-cream);
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease;
}
.kx-rail__item::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	background: var(--kx-cyan);
	transform-origin: 0 50%;
	transform: scaleX(var(--p, 0));
	box-shadow: 0 0 12px rgba(var(--kx-cyan-rgb), .8);
}
.kx-rail__item:hover,
.kx-rail__item[aria-current="true"] { background-color: #1354a8; color: #fff; }
.kx-rail__item[aria-current="true"] { --p: 1; }
.kx-rail__unit {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	color: rgba(var(--kx-cyan-rgb), .95);
	font-variant-numeric: tabular-nums;
}
.kx-rail__item[aria-current="true"] .kx-rail__unit { color: #bfeeff; }
.kx-rail__name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
}
.kx-rail__count {
	margin-top: auto;
	font-size: 12px;
	color: rgba(245, 237, 198, .6);
}
.kx-rail__item[aria-current="true"] .kx-rail__count { color: rgba(255, 255, 255, .72); }

/* Static fallback when WebGL is unavailable */
.kx-hero--static .kx-hero__stage {
	background:
		radial-gradient(40% 50% at 70% 45%, rgba(var(--kx-cyan-rgb), .18), rgba(var(--kx-cyan-rgb), 0)),
		repeating-linear-gradient(172deg, rgba(34, 196, 242, .07) 0 1px, transparent 1px 14px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
	.kx-rail__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.kx-rail__item { border-bottom: 1px solid rgba(59, 117, 181, .55); min-height: 92px; }
}
@media (max-width: 900px) {
	.kx-hero__stage {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 210px auto;
		gap: 16px;
		padding-top: 40px;
		min-height: 0;
	}
	.kx-hero__copy { grid-row: 1; max-width: none; }
	.kx-hero__field { grid-column: 1; grid-row: 2; }
	.kx-card { grid-column: 1; grid-row: 3; align-self: auto; justify-self: stretch; width: 100%; min-height: 176px; }
	.kx-hero__scrim {
		background: linear-gradient(180deg, rgba(6, 17, 29, .92) 0%, rgba(6, 17, 29, .55) 38%, rgba(6, 17, 29, 0) 55%, rgba(6, 17, 29, .5) 100%);
	}
	.kx-hero__frame { display: none; }
	.kx-hero__lede { font-size: 16px; }
	.kx-hero__stage { padding-top: 58px; }
	.kx-hero__motion { left: auto; right: 16px; bottom: auto; top: 14px; }
	.kx-probe { width: 170px; padding: 8px 10px; }
	.kx-probe__value { font-size: 21px; }
	.kx-probe__note { display: none; }
}
@media (max-width: 640px) {
	.kx-rail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kx-rail__item { min-height: 76px; padding: 14px 14px 12px; }
	.kx-rail__name { font-size: 15px; }
	.kx-rail__count { display: none; }
	.kx-card { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px 14px 12px 12px; min-height: 142px; }
	.kx-card__media { width: 84px; height: 84px; }
	.kx-card__media img { max-width: 78px; max-height: 78px; }
	.kx-card__title { font-size: 17px; }
	.kx-card__desc { display: none; }
	.kx-hero__actions .kx-hero__btn { flex: 1 1 auto; justify-content: center; }
	.kx-hero__motion { left: auto; right: 16px; bottom: auto; top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.kx-hero__btn, .kx-rail__item, .kx-card__media, .kx-card__body { transition: none; }
}

/* Pause / play icon swap */
.kx-hero__motion .kx-ico-play { display: none; }
.kx-hero.is-paused .kx-hero__motion .kx-ico-play { display: block; }
.kx-hero.is-paused .kx-hero__motion .kx-ico-pause { display: none; }

/* ------------------------------------------------------------
   Theme hardening.
   Stockholm + the child style.css set p / h1 / h2 / a / ul with
   !important (e.g. p { margin: 20px 0 !important; font-size: 16px
   !important }). These rules keep the component's own values.
   ------------------------------------------------------------ */
.kx-hero-row,
.kx-hero-row .full_section_inner,
.kx-hero-row .vc_column_container,
.kx-hero-row .vc_column-inner,
.kx-hero-row .wpb_wrapper {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.kx-hero-row .vc_column-inner,
.kx-hero-row .wpb_wrapper { padding-top: 0 !important; padding-bottom: 0 !important; }
.kx-hero-row .full_section_inner { width: 100% !important; max-width: none !important; }
.kx-hero-row .wpb_content_element { margin: 0 !important; }

.kx-hero p,
.kx-fp p,
.kx-partners p { font-family: "Lato", "Helvetica Neue", Arial, sans-serif; }

.kx-hero .kx-hero__eyebrow { margin: 0 0 18px !important; font-size: 12px !important; line-height: 1.4 !important; }
.kx-hero .kx-hero__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
	font-size: clamp(40px, 5.4vw, 72px) !important;
	line-height: .98 !important;
	font-weight: 900 !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
	color: #fff !important;
}
.kx-hero .kx-hero__title span { font-size: inherit !important; line-height: inherit !important; }
.kx-hero .kx-hero__lede { margin: 22px 0 0 !important; font-size: 17px !important; line-height: 1.6 !important; }
.kx-hero .kx-hero__trust { margin: 26px 0 0 !important; font-size: 13px !important; line-height: 1.45 !important; }
.kx-hero .kx-card__kicker { margin: 0 0 4px !important; font-size: 11px !important; line-height: 1.4 !important; }
.kx-hero .kx-card__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 20px !important;
	line-height: 1.2 !important;
	font-weight: 900 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #fff !important;
}
.kx-hero .kx-card__desc { margin: 6px 0 10px !important; font-size: 14px !important; line-height: 1.5 !important; }
.kx-hero .kx-probe__label { margin: 0 !important; font-size: 10px !important; line-height: 1.4 !important; }
.kx-hero .kx-probe__value { margin: 2px 0 6px !important; font-size: 26px !important; line-height: 1.1 !important; }
.kx-hero .kx-probe__value small { font-size: 13px !important; }
.kx-hero .kx-probe__note { margin: 4px 0 0 !important; font-size: 10px !important; line-height: 1.4 !important; }
.kx-hero a.kx-hero__btn,
.kx-hero a.kx-hero__btn:hover,
.kx-hero a.kx-hero__btn:focus { color: #fff !important; text-decoration: none !important; }
.kx-hero .kx-hero__trust a { color: var(--kx-cream) !important; text-decoration: none !important; }
.kx-hero .kx-card__links a { color: var(--kx-cream) !important; text-decoration: none !important; }
.kx-hero .kx-card__links a:hover { text-decoration: underline !important; }
.kx-hero .kx-card__links a.kx-card__feat { color: var(--kx-ink-dim) !important; }
.kx-hero ul.kx-rail__list,
.kx-hero ul.kx-rail__list li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
}
.kx-hero ul.kx-rail__list { margin: 0 auto !important; }
.kx-hero ul.kx-rail__list li::before { content: none !important; }
.kx-hero a.kx-rail__item { color: var(--kx-cream) !important; text-decoration: none !important; }
.kx-hero a.kx-rail__item:hover,
.kx-hero a.kx-rail__item[aria-current="true"] { color: #fff !important; }
.kx-hero .kx-hero__motion { font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important; }
.kx-hero img { max-width: 100%; }
@media (max-width: 900px) {
	.kx-hero .kx-hero__lede { font-size: 16px !important; }
	.kx-hero .kx-probe__value { font-size: 21px !important; }
	.kx-hero .kx-probe__note { display: none !important; }
}
@media (max-width: 640px) {
	.kx-hero .kx-card__title { font-size: 17px !important; }
	.kx-hero .kx-card__desc { display: none !important; }
}



/* ------------------------------------------------------------
   Content aligned to the theme container (2026-10-01).
   The hero background stays full width. On laptops and desktops
   the copy, card, particle field, category tiles and calibrations
   stripe line up with Stockholm's .contentcontainer (the row under
   "Kanomax Industry Measuring Solutions"). The gutter is the
   theme's own margin, as a percentage of the full-width hero:
     1001–1334px → 90% wide → 5%   1335–1920px → 72% → 14%
     ≥1921px → 68% → 16%
   kx-hero.js reads the stage padding and fits the particle scene
   to the same width. Below 1001px nothing changes.
   ------------------------------------------------------------ */
@media (min-width: 640px) and (max-width: 1000px) {
	.kx-hero { --kx-gutter: 3%; } /* tablets: the theme container is 94% */
}
@media (min-width: 1001px) {
	.kx-hero { --kx-gutter: 5%; }
	.kx-hero__stage {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		min-height: clamp(540px, 64vh, 660px);
		padding-top: 56px;
	}
	.kx-hero__copy { max-width: 520px; }
	.kx-hero .kx-hero__title { font-size: clamp(40px, 4.5vw, 66px) !important; }
	.kx-hero__scrim {
		background:
			linear-gradient(90deg,
				rgba(6, 17, 29, .92) 0%,
				rgba(6, 17, 29, .74) calc(var(--kx-gutter) + (100% - 2 * var(--kx-gutter)) * .3),
				rgba(6, 17, 29, 0) calc(var(--kx-gutter) + (100% - 2 * var(--kx-gutter)) * .58),
				rgba(6, 17, 29, 0) calc(100% - var(--kx-gutter) - 40px),
				rgba(6, 17, 29, .55) 100%),
			linear-gradient(0deg, rgba(6, 17, 29, .55) 0%, rgba(6, 17, 29, 0) 26%);
	}
	.kx-hero__frame { width: calc((100% - 2 * var(--kx-gutter)) * .6); }
	.kx-rail { padding: 0 var(--kx-gutter); }
	.kx-rail__list { max-width: none; }
}
@media (min-width: 1335px) {
	.kx-hero { --kx-gutter: 14%; }
	.kx-hero .kx-hero__title { font-size: clamp(40px, 3.6vw, 66px) !important; }
	.kx-rail .kx-rail__item { padding: 18px 14px 16px; }
	.kx-hero .kx-rail__name { font-size: 15px; }
}
@media (min-width: 1921px) {
	.kx-hero { --kx-gutter: 16%; }
	.kx-hero .kx-hero__title { font-size: clamp(40px, 3.4vw, 66px) !important; }
}

/* ------------------------------------------------------------
   Calibrations stripe (2026-10-01)
   Sits under the category rail and promotes both calibration
   tiers. Content: kx_hero_settings → 'calibrations'.
   ------------------------------------------------------------ */
.kx-cal {
	position: relative;
	z-index: 3;
	display: grid;
	/* Intro + buttons over the two tiers; three columns on wide screens. */
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px 32px;
	padding: 24px var(--kx-gutter) 26px;
	background:
		linear-gradient(100deg, rgba(var(--kx-cyan-rgb), .07) 0%, rgba(var(--kx-cyan-rgb), 0) 38%),
		linear-gradient(180deg, #0c1f31 0%, #081624 100%);
	border-top: 1px solid var(--kx-line);
}
.kx-cal::before {
	content: "";
	position: absolute;
	left: var(--kx-gutter); right: var(--kx-gutter); top: -1px;
	height: 1px;
	background: linear-gradient(90deg, rgba(var(--kx-cyan-rgb), 0), rgba(var(--kx-cyan-rgb), .85) 30%, rgba(245, 237, 198, .6) 70%, rgba(245, 237, 198, 0));
}
.kx-cal__intro { display: flex; align-items: center; gap: 16px; min-width: 0; }
.kx-cal__icon { flex: none; }
.kx-cal__tiers {
	grid-column: 1 / -1;
	grid-row: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}
.kx-cal__tier {
	position: relative;
	padding: 12px 16px 12px 18px;
	border: 1px solid var(--kx-line);
	border-radius: 10px;
	background: rgba(20, 42, 60, .55);
}
.kx-cal__tier::before {
	content: "";
	position: absolute;
	left: -1px; top: 12px; bottom: 12px;
	width: 3px;
	border-radius: 2px;
	background: var(--kx-cyan);
	box-shadow: 0 0 10px rgba(var(--kx-cyan-rgb), .7);
}
.kx-cal__tier + .kx-cal__tier::before { background: var(--kx-cream); box-shadow: 0 0 10px rgba(245, 237, 198, .45); }
.kx-cal__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.kx-cal__badge {
	display: inline-block;
	padding: 2px 7px 1px;
	border: 1px solid rgba(var(--kx-cyan-rgb), .5);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #bfeeff;
	line-height: 1.5;
	white-space: nowrap;
}
.kx-cal__tier + .kx-cal__tier .kx-cal__badge { border-color: rgba(245, 237, 198, .5); color: var(--kx-cream); }
.kx-cal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.kx-cal__actions .kx-hero__btn { justify-content: center; white-space: nowrap; }

@media (min-width: 1722px) {
	.kx-cal { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) auto; }
	.kx-cal__tiers { grid-column: auto; grid-row: auto; }
	.kx-cal__actions { flex-direction: column; flex-wrap: nowrap; }
}
@media (max-width: 700px) {
	.kx-cal { grid-template-columns: minmax(0, 1fr); padding-top: 22px; }
	.kx-cal__tiers { grid-template-columns: minmax(0, 1fr); grid-row: auto; }
	.kx-cal__actions { justify-content: stretch; }
	.kx-cal__actions .kx-hero__btn { flex: 1 1 auto; }
	.kx-cal__icon { width: 36px; height: 36px; }
}

/* Theme hardening for the stripe (h2 / p / ul carry !important rules). */
.kx-hero .kx-cal p { font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important; }
.kx-hero .kx-cal__kicker {
	margin: 0 0 4px !important;
	font-size: 11px !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--kx-cyan) !important;
}
.kx-hero .kx-cal__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 22px !important;
	line-height: 1.2 !important;
	font-weight: 900 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #fff !important;
	text-wrap: balance;
}
.kx-hero .kx-cal__note { margin: 6px 0 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: var(--kx-ink-dim) !important; }
.kx-hero ul.kx-cal__tiers,
.kx-hero ul.kx-cal__tiers li.kx-cal__tier { margin: 0 !important; list-style: none !important; background-image: none !important; }
.kx-hero ul.kx-cal__tiers { padding: 0 !important; }
.kx-hero ul.kx-cal__tiers li.kx-cal__tier { padding: 12px 16px 12px 18px !important; }
.kx-hero ul.kx-cal__tiers li::marker { content: none; }
.kx-hero ul.kx-cal__tiers li.kx-cal__tier::before { content: "" !important; position: absolute !important; }
.kx-hero .kx-cal__name { display: flex !important; margin: 0 0 3px !important; font-size: 15px !important; line-height: 1.35 !important; font-weight: 700 !important; color: #fff !important; }
.kx-hero .kx-cal__text { margin: 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: var(--kx-ink-dim) !important; }
@media (prefers-reduced-motion: reduce) { .kx-cal .kx-hero__btn { transition: none; } }

/* ============================================================
   KX FEATURED PRODUCTS — [kx_featured_products]
   Native scroll-snap rail. Replaces Slider Revolution
   "homepage-features-1". No library; ~1 KB of JS for the
   arrows and progress bar, and it still scrolls without JS.
   ============================================================ */
.kx-fp {
	--kx-fp-blue: #0b64b7;
	--kx-fp-blue-deep: #00509b;
	--kx-fp-cyan: #22c4f2;
	--kx-fp-ink: #1f2f3d;
	--kx-fp-ink-soft: #5a6b79;
	--kx-fp-line: #dfe6ec;
	--kx-fp-gap: 20px;
	--kx-fp-per: 4;

	position: relative;
	margin: 0 auto;
	font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
	color: var(--kx-fp-ink);
}
.kx-fp *, .kx-fp *::before, .kx-fp *::after { box-sizing: border-box; }
.kx-fp__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 2px;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding: 6px 2px 22px;
	outline: none;
}
.kx-fp__viewport::-webkit-scrollbar { display: none; }
.kx-fp__viewport:focus-visible { box-shadow: 0 0 0 3px rgba(34, 196, 242, .6); border-radius: 12px; }
.kx-fp ul.kx-fp__track {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--kx-fp-per) - 1) * var(--kx-fp-gap)) / var(--kx-fp-per));
	gap: var(--kx-fp-gap);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.kx-fp ul.kx-fp__track > li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
	scroll-snap-align: start;
	min-width: 0;
}
.kx-fp ul.kx-fp__track > li::before { content: none !important; }
.kx-fp__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--kx-fp-line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kx-fp__card:hover {
	transform: translateY(-4px);
	border-color: #c4e1fd;
	box-shadow: 0 18px 36px -20px rgba(11, 52, 96, .45);
}
.kx-fp__card:focus-within { border-color: var(--kx-fp-cyan); box-shadow: 0 0 0 3px rgba(34, 196, 242, .35); }
.kx-fp__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: #fff;
	overflow: hidden;
}
.kx-fp__media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain;
	transition: transform .4s ease;
}
.kx-fp__card:hover .kx-fp__media img { transform: scale(1.04); }
.kx-fp__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	padding: 16px 18px 18px;
	border-top: 1px solid var(--kx-fp-line);
	background: linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
}
.kx-fp .kx-fp__tag {
	margin: 0 !important;
	font-size: 11px !important;
	line-height: 1.3 !important;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kx-fp-blue);
}
.kx-fp .kx-fp__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 18px !important;
	line-height: 1.25 !important;
	font-weight: 900 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-wrap: balance;
}
.kx-fp .kx-fp__title a {
	color: var(--kx-fp-ink) !important;
	text-decoration: none !important;
}
/* The whole card is the link target. */
.kx-fp .kx-fp__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kx-fp .kx-fp__title a:focus { outline: none; }
.kx-fp__more {
	margin-top: auto;
	padding-top: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--kx-fp-blue);
}
.kx-fp__more::after { content: "\00a0\00a0\2192"; white-space: nowrap; transition: margin .2s ease; }
.kx-fp__card:hover .kx-fp__more::after { margin-left: 4px; }

.kx-fp__controls {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 4px;
}
.kx-fp__controls[hidden] { display: none !important; }
.kx-fp__progress {
	position: relative;
	flex: 1;
	height: 3px;
	border-radius: 3px;
	background: var(--kx-fp-line);
	overflow: hidden;
}
.kx-fp__progress span {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: var(--kx-fp-thumb, 40%);
	border-radius: 3px;
	background: linear-gradient(90deg, var(--kx-fp-blue), var(--kx-fp-cyan));
	transform: translateX(var(--kx-fp-x, 0%));
}
.kx-fp button.kx-fp__btn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--kx-fp-line);
	border-radius: 50%;
	background: #fff;
	color: var(--kx-fp-blue-deep);
	cursor: pointer;
	box-shadow: 0 6px 16px -10px rgba(11, 52, 96, .5);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.kx-fp button.kx-fp__btn:hover:not(:disabled) { background: var(--kx-fp-blue); border-color: var(--kx-fp-blue); color: #fff; }
.kx-fp button.kx-fp__btn:focus-visible { outline: 3px solid rgba(34, 196, 242, .7); outline-offset: 2px; }
.kx-fp button.kx-fp__btn:disabled { opacity: .35; cursor: default; }
.kx-fp button.kx-fp__btn svg { display: block; }

@media (max-width: 1100px) { .kx-fp { --kx-fp-per: 3; } }
@media (max-width: 820px)  { .kx-fp { --kx-fp-per: 2.2; --kx-fp-gap: 16px; } }
@media (max-width: 520px)  { .kx-fp { --kx-fp-per: 1.3; --kx-fp-gap: 14px; } .kx-fp .kx-fp__title { font-size: 17px !important; } }


/* ============================================================
   KX PARTNERS — [kx_partners]
   CSS-only logo marquee. Replaces Slider Revolution
   "top-customers-carousel". Two identical halves scroll by -50%;
   the second is aria-hidden and unfocusable.
   ============================================================ */
.kx-partners {
	--kx-pt-logo-w: 190px;
	--kx-pt-logo-h: 95px;
	--kx-pt-gap: 56px;
	position: relative;
	max-width: 1300px;
	margin: 0 auto 10px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.kx-partners *, .kx-partners *::before, .kx-partners *::after { box-sizing: border-box; }
.kx-partners__lane {
	display: flex;
	width: max-content;
	animation: kx-partners-scroll var(--kx-pt-dur, 40s) linear infinite;
}
.kx-partners:hover .kx-partners__lane,
.kx-partners:focus-within .kx-partners__lane { animation-play-state: paused; }
.kx-partners ul.kx-partners__set {
	display: flex !important;
	align-items: center;
	gap: var(--kx-pt-gap);
	margin: 0 !important;
	padding: 12px calc(var(--kx-pt-gap) / 2) !important;
	list-style: none !important;
}
.kx-partners ul.kx-partners__set > li {
	flex: none;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
}
.kx-partners ul.kx-partners__set > li::before { content: none !important; }
.kx-partners__logo {
	display: grid;
	place-items: center;
	width: var(--kx-pt-logo-w);
	height: var(--kx-pt-logo-h);
	border-radius: 10px;
	transition: transform .25s ease, background-color .25s ease;
}
a.kx-partners__logo:hover { transform: translateY(-2px); background: #f2f7fd; }
a.kx-partners__logo:focus-visible { outline: 3px solid rgba(34, 196, 242, .7); outline-offset: 2px; }
.kx-partners__logo img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain;
}
@keyframes kx-partners-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
	.kx-partners { --kx-pt-logo-w: 140px; --kx-pt-logo-h: 70px; --kx-pt-gap: 36px; }
}
@media (prefers-reduced-motion: reduce) {
	.kx-partners { -webkit-mask-image: none; mask-image: none; }
	.kx-partners__lane { animation: none; width: auto; justify-content: center; }
	.kx-partners ul.kx-partners__set { flex-wrap: wrap; justify-content: center; }
	.kx-partners ul.kx-partners__set[aria-hidden="true"],
	.kx-partners .kx-partners__set--repeat { display: none !important; }
	.kx-fp__card, .kx-fp__media img { transition: none; }
}