/* Kevin 2026-09-24b: English Metal-to-Plastic Conversion (post 1551). */

html:not(#vm-kx) .vm-k24-hero--mtp {
	height: 500px;
}

/* Round 2: the shared fix (.vm-k24-wrap.vm-k24-hero__copy{max-width:none}) puts
   hero copy on the left page grid; a container-level max-width here would
   re-create the old "centred at x=340" bug, so this page relies on the
   shared per-child 760px cap instead of its own override. */

/* Round 2 (2nd fix): a bigger svg BOX still measured small once drawn — our
   hand-drawn paths only fill ~55-75% of the 24x24 viewBox, and a plain
   stroke-width scales up with the box (turning chunky at these sizes). Every
   .vm-k24-ico svg on this page gets non-scaling-stroke so the ~1.75px line
   stays crisp, and box/svg sizes below target the coordinator's measured
   "drawn" size at roughly svg = 1.35 x desired-drawn-px. */
html:not(#vm-kx) .vm-k24b-mtp .vm-k24-ico svg * {
	vector-effect: non-scaling-stroke;
}

/* Proof strip: concept drawn size ~46px. */
html:not(#vm-kx) .vm-k24b-mtp .vm-k24-proof .vm-k24-ico {
	width: 64px;
	height: 64px;
}

html:not(#vm-kx) .vm-k24b-mtp .vm-k24-proof .vm-k24-ico svg {
	width: 62px;
	height: 62px;
}

/* Shared 2-col "heading left / intro right" row used by Engineering Decision
   and Material Selection. */
html:not(#vm-kx) .vm-k24b-mtp-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: end;
	margin-bottom: 32px;
}

html:not(#vm-kx) .vm-k24b-mtp-head p {
	margin: 0;
}

/* Section 1 — Engineering decision. */
html:not(#vm-kx) .vm-k24b-mtp-benefits {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

/* Benefit cards are <li> for list semantics; site.css's generic
   `.entry-content li` reset (0,2,2 specificity) would otherwise win over the
   plain `.vm-k24b-mtp-benefit` padding/margin below, so restate them here at
   (0,3,1). */
html:not(#vm-kx) body.vm-cvi.vm-k24b-mtp-page .vm-k24b-mtp-benefits .vm-k24b-mtp-benefit {
	margin-bottom: 0;
	padding: 24px 20px;
}

html:not(#vm-kx) .vm-k24b-mtp-benefit {
	background: #fff;
	border: 1px solid var(--vm-grey);
	border-radius: 10px;
	padding: 24px 20px;
}

/* Engineering-decision cards: concept drawn size ~50px. */
html:not(#vm-kx) .vm-k24b-mtp-benefit .vm-k24-ico {
	width: 72px;
	height: 72px;
	margin-bottom: 10px;
}

html:not(#vm-kx) .vm-k24b-mtp-benefit .vm-k24-ico svg {
	width: 68px;
	height: 68px;
}

html:not(#vm-kx) .vm-k24b-mtp-benefit h3 {
	color: var(--vm-dark-teal);
	font-size: 16px;
	margin-bottom: 8px;
}

html:not(#vm-kx) .vm-k24b-mtp-benefit p {
	margin: 0;
	color: var(--vm-graphite);
	font-size: 15px;
	line-height: 1.45;
}

html:not(#vm-kx) .vm-k24b-mtp-note {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	background: #eaf6f4;
	border-radius: 8px;
	padding: 16px 20px;
	color: var(--vm-dark-teal);
	font-size: 15px;
}

html:not(#vm-kx) .vm-k24b-mtp-note .vm-k24-ico {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}

html:not(#vm-kx) .vm-k24b-mtp-note .vm-k24-ico svg {
	width: 22px;
	height: 22px;
}

/* Section 2 — Total product economics. Round 2: the 520px min-height made
   this section ~740px tall vs the concept's much tighter proportion; the
   shared .vm-k24-photo 360px default plus the copy column's natural height
   already clears the prompt's ~500-550px minimum once the grid stretches.
   The .vm-k24-pad content itself (not the photo) drives the row height in
   all three split sections, so it's trimmed here too. */
html:not(#vm-kx) .vm-k24b-mtp-econ .vm-k24-pad,
html:not(#vm-kx) .vm-k24b-mtp-dfm .vm-k24-pad,
html:not(#vm-kx) .vm-k24b-mtp-hybrid .vm-k24-pad {
	padding-block: 32px;
}

/* These bleed sections also carry the shared .vm-k24-band class (for the
   base typography reset), which adds its own 72px outer padding on top of
   the .vm-k24-pad padding above — About/Why carry the same combination, but
   this concept's split sections read much tighter, so it's trimmed here. */
html:not(#vm-kx) .vm-k24b-mtp-econ,
html:not(#vm-kx) .vm-k24b-mtp-dfm,
html:not(#vm-kx) .vm-k24b-mtp-hybrid {
	padding-block: 40px;
}

html:not(#vm-kx) .vm-k24b-mtp-table {
	width: 100%;
	border-collapse: collapse;
	margin: 18px 0 10px;
	font-size: 14.5px;
}

html:not(#vm-kx) .vm-k24b-mtp-table th {
	background: var(--vm-dark-teal);
	color: #fff;
	text-align: left;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 10px 14px;
}

html:not(#vm-kx) .vm-k24b-mtp-table td {
	padding: 9px 14px;
	border-bottom: 1px solid var(--vm-grey);
	color: var(--vm-graphite);
}

html:not(#vm-kx) .vm-k24b-mtp-table tbody tr:nth-child(even) td {
	background: var(--vm-paper);
}

html:not(#vm-kx) .vm-k24b-mtp-table-note {
	margin: 0;
	color: var(--vm-graphite);
	font-size: 14px;
}

/* Section 4 — Design for moulding. Round 2: the concept's checkpoint grid is
   3 columns × 2 rows (the written prompt's own "2×3" only binds the tablet
   breakpoint explicitly further down). */
html:not(#vm-kx) .vm-k24b-mtp-tech {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 16px;
}

html:not(#vm-kx) .vm-k24b-mtp-tech li {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 10px 12px;
	align-items: start;
	background: #fff;
	border: 1px solid var(--vm-grey);
	border-radius: 10px;
	padding: 14px 16px;
}

html:not(#vm-kx) .vm-k24b-mtp-tech .vm-k24-ico {
	width: 36px;
	height: 36px;
	color: var(--vm-turquoise);
}

html:not(#vm-kx) .vm-k24b-mtp-tech .vm-k24-ico svg {
	width: 30px;
	height: 30px;
}

html:not(#vm-kx) .vm-k24b-mtp-tech h3 {
	font-size: 13px;
	color: var(--vm-dark-teal);
	margin-bottom: 4px;
}

html:not(#vm-kx) .vm-k24b-mtp-tech p {
	margin: 0;
	color: var(--vm-graphite);
	font-size: 13.5px;
	line-height: 1.4;
}

/* Section 5 — Material selection (deep-teal band). Round 2: trimmed from the
   shared 72px band padding — the concept's teal band reads much more compact. */
html:not(#vm-kx) .vm-k24b-mtp-material {
	background: var(--vm-dark-teal);
	color: #fff;
	padding-block: 48px;
}

html:not(#vm-kx) .vm-k24b-mtp-material .vm-k24b-mtp-head h2,
html:not(#vm-kx) .vm-k24b-mtp-material .vm-k24b-mtp-head p {
	color: #fff;
}

html:not(#vm-kx) .vm-k24b-mtp-factors {
	list-style: none;
	margin: 0;
	padding: 24px 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

html:not(#vm-kx) .vm-k24b-mtp-factors li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 0 14px;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}

html:not(#vm-kx) .vm-k24b-mtp-factors li:first-child {
	border-left: 0;
}

/* Material-selection columns: concept drawn size ~48px. */
html:not(#vm-kx) .vm-k24b-mtp-factors .vm-k24-ico {
	width: 70px;
	height: 70px;
	color: var(--vm-turquoise);
}

html:not(#vm-kx) .vm-k24b-mtp-factors .vm-k24-ico svg {
	width: 65px;
	height: 65px;
}

html:not(#vm-kx) .vm-k24b-mtp-factors span:last-child {
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: 13px;
	line-height: 1.3;
}

html:not(#vm-kx) .vm-k24b-mtp-material-note {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	text-align: center;
	color: #d9efec;
	font-size: 14px;
}

/* Section 6 — Hybrid solutions: small circles read dark-teal, not orange,
   per the written spec (orange stays reserved for CTAs and the route). */
html:not(#vm-kx) .vm-k24b-mtp-hybrid .vm-k24-num,
html:not(#vm-kx) .vm-k24b-mtp-assess-items .vm-k24-num {
	color: var(--vm-dark-teal);
}

/* Section 7 — What we need to assess. */
html:not(#vm-kx) .vm-k24b-mtp-assess__grid {
	display: grid;
	grid-template-columns: 1fr 1.75fr;
	gap: 32px;
	align-items: start;
	margin-bottom: 40px;
}

html:not(#vm-kx) .vm-k24b-mtp-assess__grid p {
	margin: 12px 0 0;
}

html:not(#vm-kx) .vm-k24b-mtp-assess-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 18px;
}

html:not(#vm-kx) .vm-k24b-mtp-assess-items li {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--vm-grey);
	border-radius: 10px;
	padding: 14px 16px;
	min-height: 44px;
}

html:not(#vm-kx) .vm-k24b-mtp-assess-items .vm-k24-num {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	font-size: 13px;
}

html:not(#vm-kx) .vm-k24b-mtp-assess-items span:last-child {
	color: var(--vm-dark-teal);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 1.3;
}

html:not(#vm-kx) .vm-k24b-mtp-assess .vm-k24-qstrip {
	margin-top: 8px;
}

/* Feasibility-bar gear: concept drawn size ~40px (this page only — the Why
   page's qstrip keeps the shared 44/34 default). */
html:not(#vm-kx) .vm-k24b-mtp-assess .vm-k24-qstrip .vm-k24-ico {
	width: 58px;
	height: 58px;
}

html:not(#vm-kx) .vm-k24b-mtp-assess .vm-k24-qstrip .vm-k24-ico svg {
	width: 54px;
	height: 54px;
}

/* site.css sets `body.vm-cvi .entry-content p, li, dd { color: #303638; }` at
   specificity (0,2,2), which beats plain class selectors like
   `.vm-k24b-mtp-note` or `.vm-k24b-mtp-material .vm-k24b-mtp-head p`
   (0,1,0)/(0,2,1). Re-declare the page's own text colors at (0,3,2)+ so they
   are not silently pulled back to dark grey — most visibly, white copy on
   the deep-teal Material Selection band was rendering almost illegible
   before this fix. */
html:not(#vm-kx) body.vm-cvi.vm-k24b-mtp-page .vm-k24b-mtp-material .vm-k24b-mtp-head h2,
html:not(#vm-kx) body.vm-cvi.vm-k24b-mtp-page .vm-k24b-mtp-material .vm-k24b-mtp-head p {
	color: #fff;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-mtp-page .vm-k24b-mtp-material-note {
	color: #d9efec;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-mtp-page .vm-k24b-mtp-note {
	color: var(--vm-dark-teal);
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-mtp-page .vm-k24b-mtp-benefit p,
html:not(#vm-kx) body.vm-cvi.vm-k24b-mtp-page .vm-k24b-mtp-tech p,
html:not(#vm-kx) body.vm-cvi.vm-k24b-mtp-page .vm-k24b-mtp-table-note {
	color: var(--vm-graphite);
}

/* Tablet: 768–1199px. */
@media (max-width: 1199px) {
	/* Written prompt: "six technical cards remain a readable 2×3 grid" on
	   tablet, even though the desktop grid is 3 columns to match the concept. */
	html:not(#vm-kx) .vm-k24b-mtp-tech {
		grid-template-columns: repeat(2, 1fr);
	}

	html:not(#vm-kx) .vm-k24b-mtp-benefits {
		grid-template-columns: repeat(2, 1fr);
	}

	html:not(#vm-kx) .vm-k24b-mtp-factors {
		grid-template-columns: repeat(3, 1fr);
	}

	html:not(#vm-kx) .vm-k24b-mtp-factors li:nth-child(4) {
		border-left: 0;
	}

	html:not(#vm-kx) .vm-k24b-mtp-assess-items {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1199px) and (min-width: 768px) {
	html:not(#vm-kx) .vm-k24b-mtp-route-list {
		flex-wrap: wrap;
		row-gap: 32px;
	}

	html:not(#vm-kx) .vm-k24b-mtp-route-list li {
		flex: 0 0 33.333%;
	}

	html:not(#vm-kx) .vm-k24b-mtp-route-list .vm-k24-route__join {
		display: none;
	}
}

/* Mobile: below 768px. */
@media (max-width: 767px) {
	html:not(#vm-kx) .vm-k24-hero--mtp {
		height: auto;
		min-height: 440px;
	}

	html:not(#vm-kx) .vm-k24b-mtp-head {
		grid-template-columns: 1fr;
		gap: 16px;
		align-items: start;
	}

	html:not(#vm-kx) .vm-k24b-mtp-benefits {
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) .vm-k24b-mtp-econ .vm-k24-photo,
	html:not(#vm-kx) .vm-k24b-mtp-econ .vm-k24-photo img,
	html:not(#vm-kx) .vm-k24b-mtp-hybrid .vm-k24-photo,
	html:not(#vm-kx) .vm-k24b-mtp-hybrid .vm-k24-photo img,
	html:not(#vm-kx) .vm-k24b-mtp-dfm .vm-k24-photo,
	html:not(#vm-kx) .vm-k24b-mtp-dfm .vm-k24-photo img {
		min-height: 220px;
	}

	/* CSS Grid items default to min-width:auto, so a single wide min-content
	   child (the two-column technical grid) was inflating the whole
	   .vm-k24-split row past the viewport at 320–390px — real clipped
	   content, not just a theoretical scrollbar, since .vm-k24{overflow-x:
	   clip} hides the overflow instead of scrolling it. min-width:0 lets the
	   split columns actually shrink to the viewport. */
	html:not(#vm-kx) .vm-k24b-mtp-econ .vm-k24-pad,
	html:not(#vm-kx) .vm-k24b-mtp-econ .vm-k24-photo,
	html:not(#vm-kx) .vm-k24b-mtp-dfm .vm-k24-pad,
	html:not(#vm-kx) .vm-k24b-mtp-dfm .vm-k24-photo,
	html:not(#vm-kx) .vm-k24b-mtp-hybrid .vm-k24-pad,
	html:not(#vm-kx) .vm-k24b-mtp-hybrid .vm-k24-photo {
		min-width: 0;
	}

	/* Preferred mobile reading order: copy/table before the photograph. */
	html:not(#vm-kx) .vm-k24b-mtp-econ .vm-k24-pad {
		order: 1;
	}

	html:not(#vm-kx) .vm-k24b-mtp-econ .vm-k24-photo {
		order: 2;
	}

	html:not(#vm-kx) .vm-k24b-mtp-hybrid .vm-k24-pad {
		order: 1;
	}

	html:not(#vm-kx) .vm-k24b-mtp-hybrid .vm-k24-photo {
		order: 2;
	}

	html:not(#vm-kx) .vm-k24b-mtp-tech {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	html:not(#vm-kx) .vm-k24b-mtp-factors {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 20px;
	}

	html:not(#vm-kx) .vm-k24b-mtp-assess__grid {
		grid-template-columns: 1fr;
		margin-bottom: 24px;
	}

	html:not(#vm-kx) .vm-k24b-mtp-factors li {
		border-left: 0;
	}

	html:not(#vm-kx) .vm-k24b-mtp-assess-items {
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) .vm-k24b-mtp-table {
		font-size: 13.5px;
	}

	html:not(#vm-kx) .vm-k24b-mtp-table th,
	html:not(#vm-kx) .vm-k24b-mtp-table td {
		padding: 10px 10px;
	}
}