/* Kevin 2026-09-24b: English "Plastic Injection Moulding" page (post 104). */

/* Small teal accent tick above every eyebrow on this page, matching the
   concept — but not inside the hero or the CTA, which don't have it there. */
html:not(#vm-kx) .vm-k24b-im .vm-k24-band .vm-k24-eye,
html:not(#vm-kx) .vm-k24b-im .vm-k24b-im-mtm .vm-k24-eye {
	position: relative;
	padding-top: 14px;
}

html:not(#vm-kx) .vm-k24b-im .vm-k24-band .vm-k24-eye::before,
html:not(#vm-kx) .vm-k24b-im .vm-k24b-im-mtm .vm-k24-eye::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 2px;
	background: #3ecdbf;
}

/* Restrained interaction states, scoped to this page only. */
html:not(#vm-kx) .vm-k24b-im .vm-k24-more:hover {
	color: #ff6a00;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im .vm-k24-btn--orange:hover {
	filter: brightness(1.08);
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im .vm-k24-btn--line:hover {
	background: rgba(62, 205, 191, 0.12) !important;
}

/* site.css also sets body.vm-cvi .entry-content ul/ol{margin:0 0 1.75rem
   1.15rem} at (0,2,2), which steals the left margin/padding and bottom
   margin of any <ul>/<ol> that doesn't match or beat that specificity —
   this pre-existing bug already affects the shared .vm-k24-facts /
   .vm-k24-route on the approved sibling pages too (not introduced here);
   corrected below only for this page's reuse of .vm-k24-facts. Every own
   <ul>/<ol> further down in this file gets its own body.vm-cvi + type
   prefix at its own rule instead of a blanket reset here. */
html:not(#vm-kx) body.vm-cvi .vm-k24b-im ul.vm-k24-facts {
	margin: 0;
	padding: 0;
}

/* ---- Generic bordered icon card (4 capability cards + 2 project cards) */
html:not(#vm-kx) .vm-k24b-im-intro .vm-k24-lead {
	margin: 14px 0 28px;
	max-width: 56rem;
}

html:not(#vm-kx) .vm-k24b-im-cap-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 36px;
	text-align: left;
}

html:not(#vm-kx) .vm-k24b-im-project-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 32px;
	text-align: left;
}

html:not(#vm-kx) .vm-k24b-im-icon-card {
	background: #fff;
	border: 1px solid #dfe6e4;
	border-radius: 8px;
	padding: 28px 24px;
	transition: border-color 0.15s ease;
	text-align: center;
}

html:not(#vm-kx) .vm-k24b-im-icon-card:hover {
	border-color: #3ecdbf;
}

/* Concept icons read roughly 90px against a 1440px canvas — measured
   proportionally from the concept image, not eyeballed. Round 2: the paths
   only fill part of their 24x24 viewBox, so the coordinator measured the
   actual DRAWN (stroke bounding box) extent at ~29-44px against a 58px svg
   and asked for the svg itself to grow to ~1.35x the ~85px drawn target. */
html:not(#vm-kx) .vm-k24b-im-icon {
	width: 116px;
	height: 116px;
	display: grid;
	place-items: center;
	color: #3ecdbf;
	margin: 0 auto 18px;
}

html:not(#vm-kx) .vm-k24b-im-icon svg {
	width: 116px;
	height: 116px;
}

/* "Start with the right information" cards: concept shows a large icon
   LEFT of the text, not centred above it like the capability cards. */
html:not(#vm-kx) .vm-k24b-im-icon-card--row {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	text-align: left;
}

html:not(#vm-kx) .vm-k24b-im-icon-card--row .vm-k24b-im-icon {
	margin: 0;
	flex: 0 0 auto;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im-icon-card h3 {
	font-size: 17px;
	color: #0b4d4a;
	margin-bottom: 8px;
}

/* site.css sets body.vm-cvi .entry-content p/li/dd{color:#303638} at
   specificity (0,2,2); every rule below that colors a <p> or <li> must match
   or beat that with the same body.vm-cvi prefix, or it is silently ignored
   (this bit us on the dark/teal sections — text rendered near-invisible). */
html:not(#vm-kx) body.vm-cvi .vm-k24b-im-icon-card p {
	margin: 0;
	color: #4a4f55;
	font-size: 15px;
	line-height: 1.45;
}

/* ---- Design for moulding: six technical checkpoints ------------------- */
html:not(#vm-kx) body.vm-cvi ul.vm-k24b-im-dfm-grid {
	position: relative;
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 36px;
}

/* Thin vertical divider between the two checkpoint columns, as in the concept. */
html:not(#vm-kx) .vm-k24b-im-dfm-grid::before {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 50%;
	width: 1px;
	background: #d9e2e0;
}

html:not(#vm-kx) .vm-k24b-im-dfm-grid li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

html:not(#vm-kx) .vm-k24b-im-dfm-ico {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	color: #3ecdbf;
}

html:not(#vm-kx) .vm-k24b-im-dfm-ico svg {
	width: 48px;
	height: 48px;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im-dfm-grid h3 {
	font-size: 15px;
	color: #0b4d4a;
	margin-bottom: 3px;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im-dfm-grid p {
	margin: 0;
	color: #4a4f55;
	font-size: 14.5px;
	line-height: 1.4;
}

/* ---- Controlled project route: 6 steps -------------------------------- */
html:not(#vm-kx) body.vm-cvi ol.vm-k24b-im-route {
	display: flex;
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	gap: 0;
}

html:not(#vm-kx) .vm-k24b-im-route__step {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 8px;
}

/* Concept circles read ~86px against the 1440px canvas (vs the shared
   default 68px .vm-k24-route__node), scoped to this page's own route only. */
html:not(#vm-kx) .vm-k24b-im-route .vm-k24-route__node {
	width: 86px;
	height: 86px;
}

html:not(#vm-kx) .vm-k24b-im-route .vm-k24-route__node svg {
	width: 68px;
	height: 68px;
}

html:not(#vm-kx) .vm-k24b-im-route__arrow {
	position: absolute;
	top: 33px;
	left: 100%;
	width: 0;
	display: flex;
	justify-content: center;
	color: #3ecdbf;
	pointer-events: none;
}

html:not(#vm-kx) .vm-k24b-im-route__arrow svg {
	width: 20px;
	height: 20px;
	overflow: visible;
	transform: translateX(-10px);
}

html:not(#vm-kx) .vm-k24b-im-route__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 14px;
}

html:not(#vm-kx) .vm-k24b-im-route__num {
	color: #ff6a00;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 0.04em;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im-route__label {
	color: #fff;
	font-size: 14px;
	margin: 5px 0 5px;
}

html:not(#vm-kx) body.vm-cvi p.vm-k24b-im-route__sub {
	color: #c7cfce;
	font-size: 14px;
	line-height: 1.35;
	max-width: 11rem;
	margin: 0;
}

/* ---- Material selection: chips ----------------------------------------- */
html:not(#vm-kx) body.vm-cvi ul.vm-k24b-im-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im-chips li {
	border: 1.5px solid #3ecdbf;
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 700;
	color: #0b4d4a;
	background: #fff;
	letter-spacing: 0.02em;
}

html:not(#vm-kx) body.vm-cvi p.vm-k24b-im-note {
	margin: 16px 0 0;
	color: #4a4f55;
	font-size: 14.5px;
}

/* ---- More than moulding: full-width deep-teal band --------------------- */
html:not(#vm-kx) .vm-k24b-im-mtm {
	background: #0b4d4a;
	color: #fff;
	padding-block: 72px;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im-mtm h2 {
	color: #fff;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im-mtm p {
	color: #f1f4f3;
}

html:not(#vm-kx) body.vm-cvi ul.vm-k24b-im-mtm-rows {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}

html:not(#vm-kx) .vm-k24b-im-mtm-rows li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding-top: 18px;
	margin-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

html:not(#vm-kx) .vm-k24b-im-mtm-rows li:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

html:not(#vm-kx) .vm-k24b-im-mtm-ico {
	width: 54px;
	height: 54px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	color: #8fe7db;
}

html:not(#vm-kx) .vm-k24b-im-mtm-ico svg {
	width: 54px;
	height: 54px;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im-mtm-rows h3 {
	color: #fff;
	font-size: 15px;
	margin-bottom: 4px;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im-mtm-rows p {
	margin: 0;
	color: #cfe8e4;
	font-size: 14.5px;
}

html:not(#vm-kx) body.vm-cvi p.vm-k24b-im-mtm-note {
	margin-top: 22px;
	color: #cfe8e4;
	font-size: 14px;
}

/* ---- Inserts & overmoulding: dark combo cards --------------------------- */
html:not(#vm-kx) .vm-k24b-im-combo-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 32px;
}

html:not(#vm-kx) .vm-k24b-im-combo-card {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 18px;
	align-items: center;
	background: #071614;
	border-radius: 8px;
	padding: 28px 26px;
	transition: transform 0.15s ease;
}

html:not(#vm-kx) .vm-k24b-im-combo-card:hover {
	transform: translateY(-2px);
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im-combo-card h3 {
	color: #fff;
	font-size: 18px;
	margin-bottom: 10px;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im-combo-card p {
	color: #f1f4f3;
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 16px;
}

html:not(#vm-kx) .vm-k24b-im-combo-card .vm-k24-more {
	color: #3ecdbf;
}

html:not(#vm-kx) .vm-k24b-im-combo-art {
	display: flex;
	align-items: center;
	justify-content: center;
}

html:not(#vm-kx) .vm-k24b-im-combo-art svg {
	width: 100%;
	height: auto;
	max-width: 320px;
}

/* Icon paths only fill part of their 24x24 (or diagram) viewBox, so scaling
   the svg box up to hit the coordinator's measured DRAWN-extent targets would
   also scale the stroke width past the prompt's ~2px line weight. Pin the
   stroke to a constant screen-pixel width instead, independent of svg size. */
html:not(#vm-kx) .vm-k24b-im-icon svg *,
html:not(#vm-kx) .vm-k24b-im-dfm-ico svg *,
html:not(#vm-kx) .vm-k24b-im-route .vm-k24-route__node svg *,
html:not(#vm-kx) .vm-k24b-im-mtm-ico svg *,
html:not(#vm-kx) .vm-k24b-im-combo-art svg * {
	vector-effect: non-scaling-stroke;
}

/* ---- New project or tool transfer: cert bar + shot-weight note --------- */
html:not(#vm-kx) body.vm-cvi ul.vm-k24b-im-certbar {
	display: flex;
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	background: #0b4d4a;
	border-radius: 4px;
	overflow: hidden;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im-certbar li {
	flex: 1;
	padding: 16px 18px;
	text-align: center;
	color: #fff;
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im-certbar li:first-child {
	border-left: 0;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-im-certbar li:last-child {
	flex: 1.8;
}

/* #ff6a00 fails WCAG AA on this light background; darkened while keeping
   the same hue so the note still reads as the brand's orange accent. */
html:not(#vm-kx) body.vm-cvi p.vm-k24b-im-shotnote {
	text-align: center;
	color: #a34700;
	font-weight: 700;
	font-size: 16px;
	margin: 22px auto 0;
	max-width: 54rem;
}

/* ---- Final CTA small label ---------------------------------------------- */
html:not(#vm-kx) body.vm-cvi p.vm-k24b-im-cta-label {
	color: #c7cfce;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

@media (max-width: 1199px) {
	html:not(#vm-kx) .vm-k24b-im-cap-grid {
		grid-template-columns: 1fr 1fr;
	}

	html:not(#vm-kx) body.vm-cvi ul.vm-k24b-im-dfm-grid {
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) .vm-k24b-im-dfm-grid::before {
		display: none;
	}

	html:not(#vm-kx) body.vm-cvi ol.vm-k24b-im-route {
		flex-wrap: wrap;
		row-gap: 32px;
	}

	html:not(#vm-kx) .vm-k24b-im-route__step {
		flex: 0 0 33.333%;
	}

	html:not(#vm-kx) .vm-k24b-im-route__arrow {
		display: none;
	}
}

@media (max-width: 767px) {
	html:not(#vm-kx) .vm-k24b-im-cap-grid {
		grid-template-columns: 1fr;
	}

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

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

	html:not(#vm-kx) .vm-k24b-im-combo-card {
		grid-template-columns: 1fr;
		text-align: left;
	}

	html:not(#vm-kx) .vm-k24b-im-combo-art {
		margin-top: 18px;
	}

	html:not(#vm-kx) .vm-k24b-im-combo-art svg {
		max-width: 260px;
	}

	html:not(#vm-kx) .vm-k24b-im-icon-card--row {
		gap: 16px;
	}

	html:not(#vm-kx) .vm-k24b-im-icon-card--row .vm-k24b-im-icon {
		width: 64px;
		height: 64px;
	}

	html:not(#vm-kx) .vm-k24b-im-icon-card--row .vm-k24b-im-icon svg {
		width: 44px;
		height: 44px;
	}

	html:not(#vm-kx) body.vm-cvi ol.vm-k24b-im-route {
		flex-direction: column;
		gap: 22px;
	}

	html:not(#vm-kx) .vm-k24b-im-route__step {
		flex: 1 1 auto;
		width: 100%;
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 16px;
		padding: 0;
	}

	html:not(#vm-kx) .vm-k24b-im-route__text {
		align-items: flex-start;
		margin-top: 0;
	}

	html:not(#vm-kx) body.vm-cvi ul.vm-k24b-im-certbar {
		flex-direction: column;
	}

	html:not(#vm-kx) body.vm-cvi .vm-k24b-im-certbar li {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.22);
		text-align: left;
	}

	html:not(#vm-kx) body.vm-cvi .vm-k24b-im-certbar li:first-child {
		border-top: 0;
	}

	html:not(#vm-kx) .vm-k24b-im-mtm {
		padding-block: 52px;
	}
}