/* Kevin 2026-09-24b: English Nearshoring page (post 144). Scoped under .vm-k24--nearshoring.
   Second pass: bigger icons (Kevin's stated ranges), compact spacing to match the concept's
   rhythm/height, capability cards icon-left-of-text, quality cert band under the photo only,
   two-child CTA row (handled by the shared component once the PHP emits exactly two children). */

/* Icon strokes are drawn in a 24x24 viewBox; once the svg box is enlarged well past
   24px (needed because the paths only fill ~65-75% of the viewBox) a scaling stroke
   would look too thick. Keep every icon's stroke a constant ~1.75px on screen. */
html:not(#vm-kx) .vm-k24--nearshoring .vm-k24-ico svg * {
	vector-effect: non-scaling-stroke;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-benefits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 16px;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-benefit {
	background: #fff;
	border: 1px solid #d9dee3;
	border-radius: 10px;
	padding: 14px;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-benefit .vm-k24-ico {
	width: 76px;
	height: 76px;
	margin-bottom: 4px;
}

/* Paths only fill ~55-75% of the 24x24 viewBox (the shared "people" icon runs
   closer to 55%), so the SVG box has to be well above the prompt's stated
   drawn-icon size (42-50px here) to actually draw at that size. */
html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-benefit .vm-k24-ico svg {
	width: 70px;
	height: 70px;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-benefit h3 {
	margin-bottom: 6px;
}

/* Proof strip: drawn icon at the top of the prompt's 38-46px range (concept
   shows them large); svg box ~1.35x that since the paths don't fill the viewBox. */
html:not(#vm-kx) .vm-k24--nearshoring .vm-k24-proof .vm-k24-ico {
	width: 62px;
	height: 62px;
}

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

/* Integrated capabilities: icon LEFT of heading+text (concept), not stacked above. */
html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-capgrid {
	display: grid;
	gap: 20px;
	align-items: start;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-cap-cards {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-cap-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid #d9dee3;
	border-top: 3px solid #3ecdbf;
	border-radius: 10px;
	padding: 12px;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-cap-card .vm-k24-ico {
	width: 68px;
	height: 68px;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-cap-card .vm-k24-ico svg {
	width: 64px;
	height: 64px;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-cap-card h3 {
	margin-bottom: 4px;
}

/* Compact numbered checklist row: small turquoise-outlined circle + single-line label. */
html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-checklist {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-checklist li {
	display: flex;
	align-items: center;
	gap: 12px;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-checklist .vm-k24-num {
	width: 32px;
	height: 32px;
	font-size: 12px;
	flex: 0 0 32px;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-checklist__label {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: #0b4d4a;
}

/* Quality & Documentation: photo fills the right half edge-to-edge; the three
   certification labels sit in a teal band along the bottom of the photo only
   (not a full-width band below both columns). */
html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-quality-photowrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 360px;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-quality-photowrap .vm-k24-photo {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-quality-photowrap .vm-k24-photo img {
	min-height: 0;
	height: 100%;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-quality-certs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
	background: #0b4d4a;
	flex: 0 0 auto;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-quality-certs li {
	padding: 12px 14px;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-quality-certs li:first-child {
	border-left: 0;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-quality-certs strong {
	display: block;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-quality-certs span {
	display: block;
	color: #cfe9e6;
	font-size: 11px;
	margin-top: 2px;
}

/* The Right Starting Point: square outlined icon tiles (the shared .vm-k24-points
   fix already sizes the icon to 56/44px; this adds the tile border/background). */
html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-starting .vm-k24-ico {
	border: 1.5px solid #3ecdbf;
	border-radius: 8px;
}

/* .vm-k24-band's 72px top+bottom padding is meant for the paper/black sections;
   a bleed split's photo is supposed to fill the section edge-to-edge (concept),
   so cancel it just for these three split sections (the split's own .vm-k24-pad
   keeps its internal padding regardless). */
html:not(#vm-kx) .vm-k24b-ns-transfer,
html:not(#vm-kx) .vm-k24b-ns-quality,
html:not(#vm-kx) .vm-k24b-ns-starting {
	padding-block: 0;
}

/* Card text: the shared 18px/1.45 paragraph size is tuned for prose columns;
   these compact cards read better, and closer to the concept's density, smaller. */
html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-benefit p,
html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-cap-card p {
	font-size: 14px;
	line-height: 1.4;
}

@media (min-width: 1200px) {
	html:not(#vm-kx) .vm-k24--nearshoring .vm-k24-hero {
		height: 500px;
	}

	html:not(#vm-kx) .vm-k24b-ns-split-2 {
		grid-template-columns: 57fr 43fr;
	}

	html:not(#vm-kx) .vm-k24b-ns-split-5 {
		grid-template-columns: 47fr 53fr;
	}

	html:not(#vm-kx) .vm-k24b-ns-split-6 {
		grid-template-columns: 53fr 47fr;
	}

	/* Copy stays first in source order (mobile: copy above photo); on desktop the
	   photo is pulled back to the left column visually with `order`. */
	html:not(#vm-kx) .vm-k24b-ns-transfer .vm-k24-photo,
	html:not(#vm-kx) .vm-k24b-ns-starting .vm-k24-photo {
		order: -1;
	}

	html:not(#vm-kx) .vm-k24b-ns-capgrid {
		grid-template-columns: 36fr 64fr;
	}
}

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

	html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-capgrid {
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-cap-cards {
		grid-template-columns: 1fr 1fr;
	}
}

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

	html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-cap-cards {
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-quality-certs {
		grid-template-columns: 1fr 1fr 1fr;
	}

	html:not(#vm-kx) .vm-k24--nearshoring .vm-k24b-ns-quality-certs li {
		padding: 10px 8px;
	}
}

/* "MANUFACTURING" (hard-set as its own H1 line, see .vm-k24-line) is wider than
   the shared 40px mobile H1 size allows below ~380px and would otherwise break
   mid-word ("MANUFACTURI/NG"); step the size down just for those narrow phones. */
@media (max-width: 380px) {
	html:not(#vm-kx) body.vm-cvi .vm-k24--nearshoring .vm-k24-hero h1 {
		font-size: 34px;
	}
}