/* Kevin 2026-09-24b: English "Quality Commitment" page (post 1802) only.
   Every selector is scoped under body.vm-cvi.vm-page-quality-commitment so
   nothing here can affect any other page, including the other six
   translations of this same page group. Depends on kevin-20260924.css
   (handle vm-k24) for .vm-k24-wrap/.vm-k24-hero/.vm-k24-btn/.vm-k24-facts/
   .vm-k24-route/.vm-k24-photo/.vm-k24-split/.vm-k24-band/.vm-k24-num/
   .vm-k24-cta and base type — this file only adds page-specific pieces. */

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-eye {
	color: #3ecdbf;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	margin: 0 0 12px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-eye__bar {
	display: block;
	width: 30px;
	height: 3px;
	border-radius: 2px;
	background: #3ecdbf;
	margin: 0 0 10px;
}

/* Hero: prompt's own H1 range (64-72px) and the concept's shorter hero. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-k24-hero {
	height: 410px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-k24-hero__copy {
	padding-block: 40px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-k24-hero h1 {
	font-size: clamp(46px, 5vw, 68px);
	margin-bottom: 12px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-k24-hero__copy > p {
	margin-bottom: 18px;
}

/* Major section headings in the prompt's 42-52px range (shared default tops
   out lower); card/body copy keeps the shared sizes. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-k24-band h2 {
	font-size: clamp(34px, 3.4vw, 48px);
}

/* Quality introduction: left-aligned heading block (concept is not centred),
   four bordered cards with big icons. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-intro {
	text-align: left;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-intro .vm-k24-lead {
	margin-inline: 0;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cards {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: left;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cards li {
	background: #fff;
	border: 1px solid #dde4e6;
	border-radius: 8px;
	padding: 28px 24px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cards__ico {
	display: grid;
	place-items: center;
	width: 128px;
	height: 128px;
	color: #3ecdbf;
	margin-bottom: 14px;
}

/* SVG element scaled well past the shared 24-viewBox icons' own drawn extent
   (paths only cover ~70% of the box) so the DRAWN stroke art hits the
   concept's measured size; vector-effect keeps the stroke itself ~2px
   instead of scaling up with the box. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cards__ico svg {
	width: 120px;
	height: 120px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cards h3 {
	color: #173044;
	font-size: 17px;
	margin: 0 0 8px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cards p {
	color: #4a4f55;
	font-size: 15px;
	line-height: 1.45;
	margin: 0;
}

/* Quality from the start: six checkpoints, two columns. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-check {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 28px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-check li {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 12px;
	align-items: start;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-check__ico {
	display: grid;
	place-items: center;
	color: #3ecdbf;
	width: 46px;
	height: 46px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-check__ico svg {
	width: 42px;
	height: 42px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-check h3 {
	color: #173044;
	font-size: 16px;
	font-weight: 800;
	margin: 2px 0 3px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-check p {
	color: #4a4f55;
	font-size: 14px;
	line-height: 1.35;
	margin: 0;
}

/* Controlled quality route: heading + supporting line, six-step route.
   Concept circles are ~110-115px with the icon inside; the orange number,
   uppercase label and sub-line sit BELOW the circle but left-aligned to the
   circle's left edge (not centred), with an arrow in the gap to the right
   of each circle (reusing the shared .vm-k24-route__join arrow). */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-k24-band--black {
	padding-block: 48px 60px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route-head {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 24px;
	align-items: center;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route-head p {
	margin: 0;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route {
	margin-top: 44px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route li {
	align-items: flex-start;
	text-align: left;
	gap: 10px;
	padding-right: 14px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route .vm-k24-route__node {
	width: 112px;
	height: 112px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route .vm-k24-route__node svg {
	width: 48px;
	height: 48px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route .vm-k24-route__join {
	top: 56px;
	left: 112px;
	width: calc(100% - 112px);
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route .vm-k24-route__label,
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route .vm-k24-route__sub {
	max-width: none;
	text-align: left;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route .vm-k24-route__label {
	font-size: 15px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route__num {
	color: #ff6a00;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.03em;
}

/* Quality across the route: photo + four divided rows, note below. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
	margin-top: 28px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-rows li {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 14px;
	align-items: start;
	padding: 16px 0;
	border-top: 1px solid #d9dee3;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-rows li:first-child {
	border-top: 0;
	padding-top: 0;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-rows__ico {
	display: grid;
	place-items: center;
	color: #3ecdbf;
	width: 60px;
	height: 60px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-rows__ico svg {
	width: 56px;
	height: 56px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-rows h3 {
	color: #173044;
	font-size: 15px;
	margin: 0 0 4px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-rows p {
	color: #4a4f55;
	font-size: 15px;
	line-height: 1.4;
	margin: 0;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-note {
	text-align: center;
	color: #4a4f55;
	font-size: 15px;
	max-width: 62ch;
	margin: 26px auto 0;
}

/* Traceability & continuous improvement: deep-teal band. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-trace {
	background: #0b4d4a;
	color: #fff;
	padding-block: 56px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-trace h2,
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cert h2 {
	color: #fff;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-trace p {
	color: #d7e9e6;
	margin: 0;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-trace-split {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 40px;
	align-items: center;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-trace-items {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

/* Label sits to the RIGHT of the numbered circle ("01 RECORD"), not below it. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-trace-items li {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-trace-items .vm-k24-num {
	flex: none;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-trace-items h3 {
	color: #fff;
	font-size: 15px;
	margin: 0;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-trace-items p {
	color: #d7e9e6;
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
}

/* Quality tools & documentation: intro column + 3x2 dark-teal cards. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-tools-wrap {
	display: grid;
	grid-template-columns: minmax(220px, 1.1fr) minmax(0, 1.8fr);
	gap: 36px;
	align-items: start;
}

/* "Applied when the / project requires it." was wrapping to 4 physical
   lines (each of the 2 semantic lines wrapping in turn) in the narrower
   412px column; the wider column above plus a lower max here gets it back
   to 2 lines like the concept. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-tools-wrap h2 {
	font-size: clamp(30px, 2.6vw, 42px);
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-tools {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-tools li {
	background: #0b4d4a;
	border-radius: 8px;
	min-height: 104px;
	padding: 18px 18px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-tools h3 {
	color: #fff;
	font-size: 15px;
	margin: 0;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-tools p {
	color: #cfe6e3;
	font-size: 13px;
	line-height: 1.35;
	margin: 0;
}

/* Certified management systems: black-to-teal band. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cert {
	background: linear-gradient(160deg, #000000 0%, #04211f 55%, #0b4d4a 130%);
	color: #fff;
	padding-block: 60px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cert > .vm-k24-wrap > div:first-child p {
	color: #d7e9e6;
	margin: 0 0 22px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cert-wrap {
	display: grid;
	grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.7fr);
	gap: 40px;
	align-items: start;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cert-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cert-cards li {
	border: 1.5px solid #3ecdbf;
	border-radius: 10px;
	padding: 28px 22px;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cert__ico {
	display: grid;
	place-items: center;
	color: #3ecdbf;
	width: 84px;
	height: 84px;
	border: 1.5px solid #3ecdbf;
	border-radius: 12px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cert__ico svg {
	width: 76px;
	height: 76px;
}

/* These four icon groups were scaled up well past their drawn-art fill ratio
   (~70-73% of the 24 viewBox) to hit the concept's measured drawn size;
   non-scaling-stroke keeps the actual stroke ~2px instead of growing with
   the box (route icons were already right, so left untouched). */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cards__ico svg *,
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-check__ico svg *,
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-rows__ico svg *,
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cert__ico svg * {
	vector-effect: non-scaling-stroke;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cert-cards h3 {
	color: #fff;
	font-size: 19px;
	margin: 0;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cert-cards p {
	color: #d7e6e4;
	font-size: 14.5px;
	line-height: 1.4;
	margin: 0;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-perf {
	margin-top: 18px;
	background: #fff;
	border-radius: 8px;
	padding: 20px 26px;
	display: flex;
	align-items: center;
	gap: 22px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-perf__num {
	flex: none;
	font-size: clamp(30px, 3vw, 40px);
	font-weight: 800;
	color: #ff6a00;
	line-height: 1;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-perf h3 {
	color: #0b4d4a;
	font-size: 15px;
	text-transform: uppercase;
	margin: 0 0 4px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-perf p {
	color: #4a4f55;
	font-size: 14px;
	margin: 0;
}

/* FAQ: heading column + animated accordion. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq {
	display: grid;
	grid-template-columns: 0.6fr 1.4fr;
	gap: 32px;
	align-items: start;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq h2 {
	color: #0b4d4a;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq__item button {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	text-align: left;
	background: #fff;
	color: #0b4d4a;
	border: 1px solid #dde4e6;
	border-radius: 8px;
	min-height: 58px;
	padding: 14px 18px;
	font: 700 16px/1.3 Inter, Arial, sans-serif;
	cursor: pointer;
	transition: color 0.15s ease;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq__item.is-open > button {
	border-radius: 8px 8px 0 0;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq__ico {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	color: #0b4d4a;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq__ico::before {
	content: "+";
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq__item button[aria-expanded="true"] .vm-qc-faq__ico::before {
	content: "\2212";
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	background: #fff;
	border: 1px solid #dde4e6;
	border-top: 0;
	border-radius: 0 0 8px 8px;
	transition: grid-template-rows 0.25s ease;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq__panel > div {
	overflow: hidden;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq__panel p {
	margin: 0;
	padding: 2px 18px 16px;
	color: #4a4f55;
	font-size: 15.5px;
	line-height: 1.5;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq__panel a {
	color: #0b4d4a;
	text-decoration: underline;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq__item.is-open .vm-qc-faq__panel {
	grid-template-rows: 1fr;
}

/* Two-child CTA row (shared CSS keys off exactly 2 children): keep the text
   column readable instead of letting the auto-sized track go full-width. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cta-body {
	max-width: 30rem;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cta-body p {
	margin-bottom: 18px;
}

/* DFM photo: concept crops it closer to the checkpoint list's own height. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-k24-split .vm-k24-photo {
	min-height: 320px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-k24-split .vm-k24-photo img {
	min-height: 320px;
}

/* Anchor targets for the hero buttons + focus visibility, this page only. */
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment #vm-qc-approach,
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment #vm-qc-certified {
	scroll-margin-top: 96px;
}

html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-k24-btn:focus-visible,
html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq__item button:focus-visible {
	outline: 2px solid #ff6a00;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	html:not(#vm-kx):has(body.vm-cvi.vm-page-quality-commitment) {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq__panel {
		transition: none;
	}
}

@media (max-width: 1199px) {
	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cards {
		grid-template-columns: 1fr 1fr;
	}

	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-tools-wrap {
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-tools {
		margin-top: 22px;
	}

	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cert-wrap {
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cert-cards {
		margin-top: 24px;
	}

	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-faq {
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route .vm-k24-route__node {
		width: 76px;
		height: 76px;
	}

	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route .vm-k24-route__node svg {
		width: 34px;
		height: 34px;
	}

	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route .vm-k24-route__join {
		top: 38px;
		left: 76px;
		width: calc(100% - 76px);
	}
}

@media (max-width: 900px) {
	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route-head {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-trace-split {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cards,
	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-check,
	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route-split,
	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-tools,
	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-cert-cards,
	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-trace-items {
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route li {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		gap: 14px;
	}

	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-route__num,
	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-k24-route__label,
	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-k24-route__sub {
		max-width: none;
	}

	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-perf {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
}

/* 2026-09-28 responsive QA: on phones the fixed 410 px hero cut off the H1 top line and
   the second button; let it grow and use the site's mobile H1 size. */
@media (max-width: 767px) {
	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-k24-hero {
		height: auto;
		min-height: 410px;
	}

	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-k24-hero h1 {
		font-size: min(40px, 9.8vw);
	}
}

/* 2026-09-28 responsive QA: the three trace steps grew past their column at 1024 px in
   longer languages ("HANDELN & ABWENDEN" was cut off). */
@media (min-width: 768px) {
	html:not(#vm-kx) body.vm-cvi.vm-page-quality-commitment .vm-qc-trace-items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}