/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — site-wide hamburger nav + landing-page reflows
   Loaded after every other stylesheet so its breakpoints win.
   Breakpoints: 1536 / 1440 / 1280 / 1024 / 425 / 393 (per user spec).
   1920 default is never modified — every rule lives inside @media.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────  LANDING DESKTOP OVERRIDES  ─────────
   Scoped to body.home so frozen About / Service pages keep their 52 px size. */
body.home .why-head h2 { font-size: 42px; }

/* ─────────  SITE-WIDE BUTTON HOVER — turn green  ─────────
   Every navy-bg button (`.btn-navy`, `.nav-cta`, `.nav-drawer-cta`) and
   every white-bg button (`.btn-cta-light`, `.cd-hero-cta`) flips to the
   teal/green secondary colour on hover/focus. The map-direction button
   (.ct-office-map) and consult popup CTA already do this — kept for
   consistency. */
.btn-navy,
.nav-cta,
.nav-drawer-cta,
.btn-cta-light,
.cd-hero-cta {
	transition: background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.btn-navy:hover,
.btn-navy:focus,
.nav-cta:hover,
.nav-cta:focus,
.nav-drawer-cta:hover,
.nav-drawer-cta:focus,
.btn-cta-light:hover,
.btn-cta-light:focus,
.cd-hero-cta:hover,
.cd-hero-cta:focus {
	background-color: var(--secondary, #06D6A0) !important;
	color: var(--primary, #0C1559) !important;
	border-color: var(--secondary, #06D6A0) !important;
}

/* Site-wide: every button shows white text on hover / focus.
   Text colour only — each button keeps its own hover background. Covers the
   whole .btn family plus the standalone CTA buttons; section wrappers like
   .sv-cta (a .cta-band) are intentionally excluded. */
.btn:hover, .btn:focus,
.nav-cta:hover, .nav-cta:focus,
.nav-drawer-cta:hover, .nav-drawer-cta:focus,
.cd-aside-cta:hover, .cd-aside-cta:focus,
.apply-file-cta:hover, .apply-file-cta:focus,
.pg-hero-cta:hover, .pg-hero-cta:focus,
.sv-hero-cta:hover, .sv-hero-cta:focus {
	color: var(--white, #fff) !important;
}

/* ─────────  ABOUT — LEADERSHIP MOBILE MARQUEE  ─────────
   JS clones the 4 leader cards into a single .leader-track on mobile.
   Track is wider than viewport; the linear animation translates it by
   -50% and loops seamlessly (duplicated cards make the boundary
   invisible). Hover pauses the marquee for readability. */
@media (max-width: 768px) {
	.leader-grid.leader-grid--marquee {
		display: block !important;
		grid-template-columns: none !important;
		gap: 0 !important;
		overflow: hidden;
		padding: 0;
		margin: 0;
		mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
		-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	}
	.leader-track {
		display: flex;
		flex-direction: row;
		gap: 16px;
		width: max-content;
		animation: leader-scroll 40s linear infinite;
	}
	.leader-grid--marquee:hover .leader-track {
		animation-play-state: paused;
	}
	.leader-track .leader-card {
		flex: 0 0 auto;
		width: 280px;
		max-width: 280px;
		margin: 0;
		/* FIX: the cards are cloned into the marquee from the originals, which
		   carry GSAP scroll-reveal inline styles (opacity:0 + translateY). That
		   reveal never fires for the marquee, so the cards render invisible.
		   Force them visible and neutralize the per-card transform — the
		   marquee motion lives on .leader-track, not the cards. */
		opacity: 1 !important;
		transform: none !important;
	}
	@keyframes leader-scroll {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); }
	}
	@media (prefers-reduced-motion: reduce) {
		.leader-track { animation: none; }
	}
}

/* ─────────  ABOUT — LEADERSHIP: MANUAL SWIPE (NO AUTO-SCROLL) ON PHONES  ─────
   At ≤480 turn the auto-scrolling marquee into a manually swipeable carousel:
   stop the animation, make the track horizontally scrollable with touch, and
   hide the JS-added duplicate cards (marked aria-hidden for the seamless loop)
   so each of the 4 leaders appears exactly once. 481px+ keeps the auto-scroll
   marquee untouched. Card design/spacing unchanged; only the motion + the
   edge-fade mask (an auto-scroll affordance) are removed. */
@media (max-width: 480px) {
	.leader-grid.leader-grid--marquee {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		mask-image: none;
		-webkit-mask-image: none;
		scrollbar-width: none;
	}
	.leader-grid.leader-grid--marquee::-webkit-scrollbar { display: none; }
	.leader-track { animation: none !important; }
	.leader-track .leader-card[aria-hidden="true"] { display: none; }
}

/* ─────────  ABOUT — IMPACT CIRCLES MOBILE LAYOUT  ─────────
   On mobile show the 4 stat circles as a clean 2×2 grid with smaller
   circles and tight spacing. Wipes the desktop staggered margins and
   transform translateY offsets so cells sit flat. */
@media (max-width: 768px) {
	.impact-row {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 16px !important;
		margin-top: 32px !important;
		justify-items: center;
	}
	.impact-cell,
	.impact-cell.c1,
	.impact-cell.c2,
	.impact-cell.c3,
	.impact-cell.c4 {
		margin-top: 0 !important;
		min-height: 0;
	}
	.impact-cell .impact-circle,
	.impact-cell.c1 .impact-circle,
	.impact-cell.c2 .impact-circle,
	.impact-cell.c3 .impact-circle,
	.impact-cell.c4 .impact-circle,
	.impact-cell.c1 .impact-circle.in-view,
	.impact-cell.c2 .impact-circle.in-view,
	.impact-cell.c3 .impact-circle.in-view,
	.impact-cell.c4 .impact-circle.in-view {
		width: 150px !important;
		height: 150px !important;
		flex-basis: 150px !important;
		transform: none !important;
		animation: none !important;
	}
	.impact-num { font-size: 32px !important; }
	.impact-label { font-size: 11px !important; max-width: 110px; }
}
@media (max-width: 425px) {
	.impact-cell .impact-circle,
	.impact-cell.c1 .impact-circle,
	.impact-cell.c2 .impact-circle,
	.impact-cell.c3 .impact-circle,
	.impact-cell.c4 .impact-circle {
		width: 135px !important;
		height: 135px !important;
		flex-basis: 135px !important;
	}
	.impact-num { font-size: 28px !important; }
}

/* ─────────  ABOUT — IMPACT CIRCLES: KEEP THE 1280 SCALLOP DOWN TO 769  ─────────
   Per request, the "Numbers that speak for themselves" stats must look the
   SAME as the 1280 desktop reference (a 4-across staggered scallop) at the
   laptop/tablet widths too — not the broken/overflowing row, and not the 2×2
   that styles.css drops to at ≤1024.

   The whole composition is derived from one variable, --c (the circle
   diameter), reproducing the 1280 proportions exactly:
     columns  c / 0.714c / c / 0.714c   (circle overflows the narrow cols → overlap)
     stagger  c·0.143 / c·0.479 / 0 / c·0.264   (margin-top per cell)
     number   c·0.229                            (64px when c = 280)
   --c is clamped to the available width so the 4 circles always fit (visual
   width ≈ 3.57·c) and shrink smoothly instead of clipping. At 1280, --c
   resolves to 280px, so the frozen desktop reference is unchanged. ≤768 keeps
   the existing 2×2 mobile grid (block above). */
@media (min-width: 1025px) and (max-width: 1280px) {
	.impact-row {
		--c: clamp(245px, calc((100vw - 120px) / 4.1), 280px);
		grid-template-columns: var(--c) calc(var(--c) * 0.714) var(--c) calc(var(--c) * 0.714);
		justify-content: center;
		justify-items: stretch;
		gap: 0;
	}
	.impact-cell { margin-top: 0; }
	.impact-cell.c1 { margin-top: calc(var(--c) * 0.143); }
	.impact-cell.c2 { margin-top: calc(var(--c) * 0.479); }
	.impact-cell.c3 { margin-top: 0; }
	.impact-cell.c4 { margin-top: calc(var(--c) * 0.264); }
	.impact-circle { width: var(--c); height: var(--c); flex: 0 0 var(--c); }
	.impact-num { font-size: calc(var(--c) * 0.229); }
	.impact-label { font-size: clamp(11px, calc(var(--c) * 0.055), 16px); max-width: calc(var(--c) * 0.66); margin-top: calc(var(--c) * 0.05); }

	/* Mission / Vision — stack into one column in the 1025–1280 laptop band so
	   each block spans the full text-column width (~3–4 lines) instead of the
	   cramped ~¼-width 2-col split that wrapped to ~8 lines. Scoped to this
	   band only: ≤1024 (about already stacked, columns wide) and ≥1281 are
	   untouched. */
	.lp-mv-row { grid-template-columns: 1fr; gap: 24px; }
}

/* ─────────  HEADER — shorter bar in the 1280 laptop band  ─────────
   Reduce the fixed header height at the 1280px screen size only (1025–1280).
   Trims the nav's vertical padding from 22px to 12px (−20px overall). ≤1024
   (mobile nav) and ≥1281 keep the default. --header-h is re-measured by JS, so
   the content top-offset follows automatically. */
@media (min-width: 1025px) and (max-width: 1280px) {
	.nav { padding: 12px 0; }
}

@media (min-width: 769px) and (max-width: 1024px) {
	.impact-row {
		--c: clamp(170px, calc((100vw - 80px) / 3.8), 280px);
		grid-template-columns: var(--c) calc(var(--c) * 0.714) var(--c) calc(var(--c) * 0.714);
		justify-content: center;
		justify-items: stretch;
		gap: 0;
	}
	.impact-cell { margin-top: 0; }
	.impact-cell.c1 { margin-top: calc(var(--c) * 0.143); }
	.impact-cell.c2 { margin-top: calc(var(--c) * 0.479); }
	.impact-cell.c3 { margin-top: 0; }
	.impact-cell.c4 { margin-top: calc(var(--c) * 0.264); }
	/* Wipe the styles.css ≤1024 single-offset entrance so cells sit on the
	   scallop defined by the margin-tops above. */
	.impact-cell.c1 .impact-circle,
	.impact-cell.c2 .impact-circle,
	.impact-cell.c3 .impact-circle,
	.impact-cell.c4 .impact-circle {
		width: var(--c); height: var(--c); flex: 0 0 var(--c);
	}
	.impact-num { font-size: calc(var(--c) * 0.229); }
	.impact-label { font-size: clamp(11px, calc(var(--c) * 0.055), 15px); max-width: calc(var(--c) * 0.66); margin-top: calc(var(--c) * 0.05); }
}

/* ─────────  CONTACT — OFFICES HEADING  ─────────
   Left-align the "Visit us / Our offices" heading instead of inheriting
   the global .sec-head center alignment. Eyebrow's inline-block also
   reset so it doesn't sit centered on its own line. */
.ct-offices .sec-head {
	text-align: left;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.ct-offices .sec-head .eyebrow { display: inline-block; }

/* ─────────  CAREER DETAIL — BODY GRID  ─────────
   The Quick-details aside has been removed; make the body grid single-
   column so .cd-body-main fills the full content width on desktop. */
.cd-body-grid { grid-template-columns: 1fr !important; }

/* ─────────  CAREER DETAIL — APPLY BUTTON  ─────────
   .btn-secondary isn't defined in the theme, so the Apply CTA was
   rendering as plain text. White pill on the navy hero, flipping to
   teal on hover/focus. Fully responsive (padding scales on mobile). */
.cd-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	background: #fff;
	color: var(--primary, #0C1559);
	font-size: 15px;
	font-weight: 600;
	border-radius: 4px;
	transition: background .2s ease, color .2s ease, transform .2s ease;
	margin-top: 8px;
}
.cd-hero-cta:hover,
.cd-hero-cta:focus {
	background: var(--secondary, #06D6A0);
	color: var(--primary, #0C1559);
	transform: translateY(-1px);
	outline: none;
}
@media (max-width: 768px) {
	.cd-hero-cta {
		padding: 12px 22px;
		font-size: 14px;
		width: 100%;
		max-width: 280px;
		justify-content: center;
	}
}

/* ─────────  CAREERS PAGE — HERO IMAGE  ─────────
   Replaces the decorative orb visual with the careers-hero.png photo.
   Lets the image render at its natural 544×363 dimensions (no forced
   width/height, no stretch, no crop). The container height is freed
   from the default .pg-hero-visual 380px rule. */
.pg-hero-visual--photo {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: auto !important;
	min-height: 0;
	overflow: visible;
}
.pg-hero-visual--photo img {
	width: auto;
	height: auto;
	max-width: 100%;
	display: block;
}

/* ─────────  INDUSTRIES IT DETAIL — HERO IMAGE  ─────────
   The IT-hero PNG is 544×363 with circular alpha + teal crescent baked
   in. Default .sv-hero-photo is a 460×460 square mask with object-fit:
   cover that crops the crescent and elongates the photo. Scope an
   override so this page renders the image at its natural ratio.
   Industries are now a CPT (single-mp_industry), so match both the
   legacy page template and the CPT single body class. */
.page-template-page-industry-it .sv-hero-photo,
.single-mp_industry .sv-hero-photo {
	width: 100%;
	max-width: 544px;
	height: auto;
	aspect-ratio: 544 / 363;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}
.page-template-page-industry-it .sv-hero-photo img,
.single-mp_industry .sv-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ─────────  INDUSTRIES IT DETAIL — SHARP EDGES  ─────────
   Mirror the Permanent Placement page's sharp-edge rule: wipe every
   border-radius on this template, then restore the small set that
   needs to stay circular (the .lp-step-num "01" pill and the icon
   discs used in the spec / overview / other-industries sections). */
.page-template-page-industry-it,
.page-template-page-industry-it * {
	border-radius: 0 !important;
}
.page-template-page-industry-it .lp-step-num,
.page-template-page-industry-it .sv-check,
.page-template-page-industry-it .id-spec-icon,
.page-template-page-industry-it .id-overview-icon,
.page-template-page-industry-it .id-other-ind-icon {
	border-radius: 50% !important;
}

/* ─────────  DESKTOP DROPDOWN MENUS (Services / Industries)  ───────── */
.nav-links li.menu-item-has-children { position: relative; }
.nav-links .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: -14px;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	background: #fff;
	border: 1px solid var(--line, #E3E6F1);
	min-width: 240px;
	box-shadow: 0 12px 30px rgba(12, 21, 89, 0.10);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	z-index: 100;
}
.nav-links li.menu-item-has-children:hover > .sub-menu,
.nav-links li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
.nav-links .sub-menu li { display: block; }
.nav-links .sub-menu a {
	display: block;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--primary, #0C1559);
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.nav-links .sub-menu a:hover,
.nav-links .sub-menu a:focus {
	background: var(--soft, #F4F6FB);
	color: var(--secondary, #06D6A0);
}
/* Caret rotates when parent is hovered/focused */
.nav-links li.menu-item-has-children:hover > a.has-caret::after,
.nav-links li.menu-item-has-children:focus-within > a.has-caret::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

/* ─────────  HAMBURGER + DRAWER (always present, hidden at desktop)  ───────── */
.nav-toggle {
	display: none;
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
	color: var(--primary, #0C1559);
	width: 44px;
	height: 44px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	border-radius: 0;
	margin-left: auto;
}
.nav-toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear .25s;
}
.nav-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}
.nav-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 21, 89, 0.55);
	opacity: 0;
	transition: opacity .25s ease;
}
.nav-drawer.is-open .nav-drawer-backdrop { opacity: 1; }
.nav-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(360px, 88%);
	background: #fff;
	box-shadow: -16px 0 40px rgba(12, 21, 89, 0.18);
	padding: 64px 28px 28px;
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(.2,.9,.3,1);
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
}
.nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); }
.nav-drawer-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--body, #4A5275);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
}
.nav-drawer-close:hover { color: var(--primary, #0C1559); }
/* Slightly larger X icon (20 → 26); the 40×40 tap target is unchanged. */
.nav-drawer-close svg { width: 26px; height: 26px; }
.nav-drawer-links {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.nav-drawer-links li { display: block; }
.nav-drawer-links a {
	display: block;
	padding: 12px 4px;
	font-size: 16px;
	font-weight: 600;
	color: var(--primary, #0C1559);
	border-bottom: 1px solid var(--line, #E3E6F1);
}
.nav-drawer-links li.active > a,
.nav-drawer-links a:hover { color: var(--secondary, #06D6A0); }

/* ── Drawer accordion: parent has a + button to expand its sub-menu ── */
.nav-drawer-links li.menu-item-has-children {
	position: relative;
}
.nav-drawer-links li.menu-item-has-children > a {
	padding-right: 48px;
}
.nav-drawer-links .sub-toggle {
	position: absolute;
	top: 4px;
	right: -4px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary, #0C1559);
}
.nav-drawer-links .sub-toggle .caret {
	position: relative;
	width: 12px;
	height: 12px;
}
.nav-drawer-links .sub-toggle .caret::before,
.nav-drawer-links .sub-toggle .caret::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: transform .25s ease, opacity .25s ease;
}
.nav-drawer-links .sub-toggle .caret::before {
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	transform: translateY(-50%);
}
.nav-drawer-links .sub-toggle .caret::after {
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	transform: translateX(-50%);
}
.nav-drawer-links li.is-expanded > .sub-toggle .caret::after {
	transform: translateX(-50%) scaleY(0);
}
.nav-drawer-links .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
}
.nav-drawer-links li.is-expanded > .sub-menu {
	max-height: 480px;
	padding-bottom: 4px;
}
.nav-drawer-links .sub-menu a {
	font-size: 14px;
	font-weight: 500;
	padding: 10px 4px 10px 16px;
	color: var(--body, #4A5275);
	border-bottom: 1px solid var(--line, #E3E6F1);
}
.nav-drawer-links .sub-menu a:hover { color: var(--secondary, #06D6A0); }
.nav-drawer-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 22px;
	background: var(--primary, #0C1559);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	margin-top: auto;
}
body.nav-locked { overflow: hidden; }

/* ═════════════════════════════════════════════════════════════════════
   1536px — slight scale-down (laptop)
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 1536px) {
	:root { --gutter: 80px; }

	/* Landing hero — keep visual scale, tighten gap */
	/* Section height shrunk to match image height (≈572) + small breathing
	   room, so the centered text doesn't get orphaned with big top/bottom gaps. */
	.lp-hero { height: 620px; }
	.lp-hero-grid { gap: 60px; }
	.lp-hero-text h1 { font-size: 72px; }
	/* Constrain the hero image to the right grid column (50%) so it doesn't
	   bleed into the text column. Aspect-ratio drives height. */
	.lp-hero-visual {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 50%;
		height: auto;
		aspect-ratio: 1056 / 878;
	}

	.lp-services-head h2,
	.lp-industries-head h2,
	.lp-powered-text h2 { font-size: 40px; }
}

/* ═════════════════════════════════════════════════════════════════════
   1440px — MacBook-class laptops
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 1440px) {
	:root { --gutter: 64px; }

	.lp-hero { height: 580px; }
	.lp-hero-text h1 { font-size: 64px; margin-bottom: 36px; }

	.lp-career-bottom { gap: 20px; }
	.lp-career-bottom h2 { font-size: 48px; padding-right: 20px; }
	.lp-hero-visual {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 50%;
		height: auto;
		aspect-ratio: 1056 / 878;
	}

	.lp-about-grid { gap: 70px; }
	/* .lp-about-lead intentionally inherits 42px from landing.css here. */

	.lp-services-grid { gap: 24px; }
	.lp-industries-grid { gap: 20px; }

	.lp-powered-grid { gap: 60px; }
	.lp-powered-text h2 { font-size: 40px; }

	.lp-process-card { padding: 60px 60px; }
	.lp-steps { gap: 32px; }
}

/* ═════════════════════════════════════════════════════════════════════
   1280px — small desktop (existing breakpoint in styles.css covers global;
   add landing-specific tweaks here)
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
	.lp-hero { height: 520px; }
	.lp-hero-text h1 { font-size: 56px; }
	/* Height-driven (was width:50%) so the circular banner image fills the
	   FULL banner height across the whole 1025–1280 band — touching the top
	   and bottom edges with no navy gap, seamless like the 1440 reference.
	   The old width:50% sizing shrank the image height as the viewport
	   narrowed, leaving big top/bottom gaps near 1025–1100. height:100% ties
	   the image to the 520px banner height; width follows the aspect ratio and
	   bleeds right under .lp-hero overflow:hidden. */
	.lp-hero-visual {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		height: 100%;
		width: auto;
		aspect-ratio: 1056 / 878;
	}

	.lp-about-visual { height: 380px; }
	.lp-about-circle,
	.lp-about-visual img { width: 320px; height: 320px; }
	.lp-about-visual img { left: 130px; }

	.lp-services-head h2,
	.lp-industries-head h2,
	.lp-powered-text h2 { font-size: 36px; }

	.lp-industries-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.lp-industry { padding: 28px 24px; }

	.lp-powered-visual { height: auto; }
	.lp-powered-visual img { max-width: 320px; width: 100%; height: auto; }
	.lp-powered-visual img { left: 0; }

	/* .lp-career height removed — landing.css aspect-ratio drives it. */
	.lp-career-bottom { gap: 16px; }
	.lp-career-bottom h2 { font-size: 40px; padding-right: 16px; }

	.lp-process-card { padding: 50px 40px; }
}

/* ── Home hero (.lp-hero) — "1024 view" (the 2-col band, 1025–1280) override:
   480px banner height with a dedicated 572×480 image. Placed after the ≤1280
   block so it wins source order. Bounded 1025–1280 so the ≤1024 stacked hero
   and the ≥1281 desktop are untouched. The image is swapped via CSS
   content:url (no markup change); aspect-ratio 572/480 + the inherited
   height:100% fill make it span the 480px banner top-to-bottom with no gaps. ── */
@media (min-width: 1025px) and (max-width: 1280px) {
	.lp-hero { height: 480px !important; }
	/* Image is swapped to hero-banner-1024.png via the <picture> <source> in
	   front-page.php (matches this same 1025–1280 query). aspect-ratio matches
	   the 572×480 image so the inherited height:100% fill spans the 480px
	   banner with no gaps. */
	.lp-hero-visual { aspect-ratio: 572 / 480; }
}

/* ═════════════════════════════════════════════════════════════════════
   1024px — TABLET — major reflow: stack hero / about / powered, show hamburger
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	:root { --gutter: 40px; }

	/* Prevent horizontal page scroll — the mobile carousels use
	   margin-right: calc(var(--gutter) * -1) to extend their last card
	   into the right gutter, which otherwise makes the whole page
	   wider than the viewport (visible as a strip on the right).
	   Use `clip` (not `hidden`): hidden makes html/body a scroll
	   container which DISABLES the sticky header on mobile; clip
	   prevents the horizontal scroll without breaking position: sticky. */
	html, body { overflow-x: clip; }

	/* ── Header: hide desktop links + CTA, show hamburger ── */
	.nav-links { display: none; }
	.nav-cta { display: none; }
	.nav-toggle { display: inline-flex; }

	/* ── Hero stacks: heading → button → image, image flush to right gutter ── */
	.lp-hero { height: auto; padding: 70px 0; margin-bottom: 60px; }
	.lp-hero-grid {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-items: center;
		text-align: center;
		gap: 32px;
		height: auto;
		grid-template-columns: none;
	}
	/* Let h1 and the button escape .lp-hero-text so we can order them as
	   siblings of .lp-hero-visual on mobile (heading, button, image). */
	.lp-hero-text { display: contents; }
	.lp-hero-text h1 {
		order: 1;
		font-size: 48px;
		margin: 0;
		max-width: 100%;
	}
	.lp-hero-text > a,
	.lp-hero-text > .btn {
		order: 2;
		align-self: center;
	}
	.lp-hero-visual {
		order: 3;
		position: relative;
		right: auto;
		top: auto;
		transform: none;
		/* Stretch full container width then bleed into the right gutter so the
		   image is flush with the viewport's right edge; left margin is kept. */
		align-self: stretch;
		width: auto;
		max-width: none;
		height: auto;
		margin: 0 calc(var(--gutter) * -1) 0 0;
		/* Mobile hero swaps to hero-banner-mobile.png (1056x1015 ≈ square) via <picture>. */
		aspect-ratio: 1056 / 1015;
	}
	.lp-hero-visual img { width: 100%; height: 100%; }

	/* ── About stacks: heading → image → subheadings/content → button ──
	   display:contents promotes .lp-about-text's children into the flex
	   container so the image can be ordered between the lead paragraph and
	   the mission/vision blocks. */
	.lp-about-grid {
		grid-template-columns: 1fr;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	.lp-about-text { display: contents; }
	.lp-about-lead        { order: 1; margin-bottom: 0; }
	.lp-about-visual      { order: 2; }
	.lp-mv-row            { order: 3; }
	/* align-self keeps the CTA at its content width, left-aligned (the flex
	   container otherwise stretches it full width). */
	.lp-about-text > .btn { order: 4; align-self: flex-start; }
	/* Image flows inline on mobile (position:static) so its box hugs the
	   image instead of the 360px min-height that left big gaps above/below.
	   height:auto (higher specificity to beat the per-breakpoint square
	   sizing) drops the transparent letterbox bands from object-fit:contain. */
	.lp-about-visual {
		height: auto;
		min-height: 0;
		display: flex;
		justify-content: flex-start;
	}
	.lp-about-visual img {
		position: static;
		top: auto;
		left: auto;
		transform: none;
		margin: 0;
	}
	.lp-about .lp-about-visual img { height: auto; }

	/* ── Services 3 → 2 ── */
	.lp-services-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

	/* ── Industries 4 → 2 already at 1280 ── */

	/* ── Powered stacks ──
	   Image rendered inline (not absolute) on mobile so it sits below the
	   heading + CTA instead of overlapping them. */
	.lp-powered-grid { grid-template-columns: 1fr; gap: 24px; }
	.lp-powered-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
	/* Mobile order: heading → image → button (CTA moves below the image).
	   h2 keeps the default order: 0. */
	.lp-powered-visual { order: 1; }
	.lp-powered-text > .btn,
	.lp-powered-text > a { order: 2; }
	.lp-powered-visual {
		position: relative;
		height: auto;
		min-height: 0;
		display: flex;
		justify-content: flex-start;
		width: 100%;
	}
	.lp-powered-visual img {
		position: static;
		top: auto;
		left: auto;
		transform: none;
		margin: 0;
		display: block;
	}

	/* ── Process 4 → 2 with dashed line hidden (only spans desktop nicely) ── */
	.lp-steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
	.lp-steps::before { display: none; }

	/* ── Career banner — clear aspect-ratio so the 1920/900 ratio doesn't
	   conflict with min-height: 460 and force the section wider than the
	   viewport (the body's overflow-x: hidden would then clip the right
	   side, cropping the image and pushing the play button + text off-screen). */
	.lp-career {
		aspect-ratio: auto;
		height: auto;
	}
	.lp-career .container { padding-top: 90px; padding-bottom: 30px; }
	/* Nudge the play button up so it doesn't overlap the stacked text below. */
	.lp-career-play { top: 35%; }
	.lp-career-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	/* Vertical layout — drop the right-edge divider that only makes
	   sense when h2 and button sit side-by-side. */
	.lp-career-bottom h2 {
		font-size: 28px;
		padding-right: 0;
		border-right: none;
	}
}

/* ═════════════════════════════════════════════════════════════════════
   768px — phones / small tablets (existing styles.css covers global)
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	/* ═══════════════════════════════════════════════════════════════
	   UNIFIED MOBILE TYPOGRAPHY SCALE — applies site-wide so heading
	   sizes are consistent across every page. !important is needed to
	   override the dozens of per-section font-size rules in landing.css,
	   service.css, pages.css, and styles.css. If a specific element
	   needs an exception (e.g. the CTA-band hero heading), add a more-
	   specific !important rule below this block.
	   ═══════════════════════════════════════════════════════════════ */
	h1, .h1 { font-size: 32px !important; line-height: 1.15 !important; font-weight: 500 !important; }
	h2, .h2 { font-size: 28px !important; line-height: 1.2  !important; font-weight: 500 !important; }
	h3, .h3 { font-size: 24px !important; line-height: 1.25 !important; font-weight: 500 !important; }
	h4, .h4 { font-size: 20px !important; line-height: 1.3  !important; font-weight: 500 !important; }
	h5, .h5 { font-size: 18px !important; line-height: 1.35 !important; font-weight: 500 !important; }
	h6, .h6 { font-size: 16px !important; line-height: 1.4  !important; font-weight: 500 !important; }
	/* Sub-headings / lead paragraphs — sit between H6 (16) and body (14)
	   so there's clear hierarchy: H1 32 → H2 28 → … H6 16 → SUB 17 → P 14. */
	.lp-hero-sub, .lp-about-lead, .sv-hero-sub, .pg-hero-sub,
	.sec-head p, .lp-services-head p, .lp-industries-head p,
	.lp-powered-text p, .ct-hero-sub, .cr-roles-sub, .sv-roles-sub,
	.in-card-lead, .sv-overview-point-desc, .id-overview-item-desc,
	.lp-services-head p, .lp-process-head p, .sv-benefits-sub,
	.id-spec-head p, .id-tech-head p {
		font-size: 17px !important;
		line-height: 1.55 !important;
		font-weight: 400 !important;
	}
	/* True body copy — paragraphs inside cards, lists, footer, etc. */
	p, li,
	.lp-step p, .lp-service p, .lp-industry p, .lp-tech-card p,
	.cd-hero-meta, .ct-office-contacts,
	.cr-role-lead, .sv-role-copy p {
		font-size: 14px !important;
		line-height: 1.6 !important;
		font-weight: 400 !important;
	}
	/* Eyebrows / pills — uppercase mini-labels above section headings.
	   12px on mobile per spec, semibold for clarity. */
	.eyebrow, .pg-hero-eyebrow, .sv-hero-eyebrow,
	.sv-overview-pill,
	.cd-hero-eyebrow, .consult-eyebrow,
	/* p.eyebrow ties the .sec-head/.*-head `p { 17px }` sub-heading rule on
	   specificity but wins by source order, so eyebrows authored as <p>
	   (not <div>/<span>) don't get bumped to 17px. */
	p.eyebrow {
		font-size: 12px !important;
		font-weight: 600 !important;
	}
	/* Other interactive text keeps semibold 600 without size changes. */
	.btn, .nav-cta, .nav-drawer-cta, .consult-submit,
	.nav-links a, .nav-drawer-links a, .consult-field label,
	.lp-step-num {
		font-weight: 600 !important;
	}

	/* Hero text + image.
	   Uniform mobile section rhythm: every section uses 60px top/bottom
	   padding and no margins, so the gap between any two sections is a
	   consistent 120px. */
	.lp-hero { padding: 60px 0; margin-bottom: 0; }
	/* .lp-hero-visual max-width handled in the 1024 block (none, so the
	   stretched visual can bleed into the right gutter). */

	/* why-choose + cta-band have no other mobile override, so without this
	   they'd keep the desktop 75px and break the uniform rhythm. */
	.why-choose,
	.cta-band { padding: 60px 0; }

	/* Shorter buttons on mobile — trim the vertical padding (desktop is
	   14px on .btn, 16px on .btn-cta-light). */
	.btn { padding: 10px 24px; }
	.btn-cta-light { padding: 12px 26px; }

	/* About — circles smaller */
	.lp-about { padding: 60px 0; }
	/* About lead paragraph — 24px on mobile. More-specific selector + !important
	   to beat the site-wide sub-heading scale (.lp-about-lead 17px !important). */
	.lp-about .lp-about-lead { font-size: 24px !important; line-height: 1.35 !important; }
	.lp-mv-row { grid-template-columns: 1fr; gap: 32px; }
	.lp-about-circle,
	.lp-about-visual img { width: 260px; height: 260px; }
	/* Align image with the heading's left edge (was offset 90px). */
	.lp-about-visual img { left: 0; }

	/* CTA band heading — single 32px size on every mobile width. */
	.cta-band h2 { font-size: 32px; line-height: 1.15; margin-bottom: 32px; }

	/* Services → horizontal swipe-scroll carousel.
	   Cards slide left/right; one snaps into place, next peeks in from the right.
	   Grid extends out through the container padding so cards reach edge-to-edge,
	   but scroll-padding-left keeps the first card aligned to the gutter. */
	.lp-services { padding: 60px 0; overflow: hidden; }
	.lp-services-head h2,
	.lp-industries-head h2,
	.lp-powered-text h2 { font-size: 30px; }
	.lp-services-grid {
		display: flex;
		flex-direction: row;
		grid-template-columns: none;
		gap: 16px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		padding-bottom: 18px;
		padding-right: 24px;
		margin-right: calc(var(--gutter, 24px) * -1);
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.lp-services-grid::-webkit-scrollbar { display: none; }
	a.lp-service,
	.lp-service {
		flex: 0 0 82%;
		max-width: 320px;
		scroll-snap-align: start;
	}
	.lp-service-img { max-width: none; margin: 0 0 20px; }
	.lp-service h3 { font-size: 20px; margin: 0 0 8px; }
	.lp-service p  { font-size: 13px; line-height: 1.55; }

	/* Industries → horizontal swipe-scroll carousel (same pattern as services). */
	.lp-industries { padding: 60px 0; overflow: hidden; }
	.lp-industries-head { flex-direction: column; align-items: flex-start; gap: 24px; }
	.lp-industries-grid {
		display: flex;
		flex-direction: row;
		grid-template-columns: none;
		gap: 16px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		padding-bottom: 18px;
		padding-right: 24px;
		margin-right: calc(var(--gutter, 24px) * -1);
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.lp-industries-grid::-webkit-scrollbar { display: none; }
	.lp-industry {
		flex: 0 0 78%;
		max-width: 320px;
		scroll-snap-align: start;
	}

	/* Powered */
	.lp-powered { padding: 60px 0; }
	.lp-powered-visual { min-height: 0; }
	.lp-powered-visual img { max-width: 280px; width: 100%; height: auto; }
	.lp-powered-visual img { left: 0; }

	/* Career — h2 font-size is set in the 1024 column block (28px). */
	.lp-career { height: 320px; }

	/* Process */
	.lp-process { padding: 60px 0; }
	.lp-process-card { padding: 40px 24px; border-radius: 0; }
	.lp-process-head h2 { font-size: 28px; }

	/* Partners */
	.lp-partners { padding: 60px 0; }
	.lp-partners h2 { font-size: 22px; }
	.lp-partners-strip { gap: 28px; justify-content: center; }
	.lp-partner { font-size: 18px; }
	/* Service partners: match the home (lp) sizing on mobile too. */
	.sv-partners h2 { font-size: 22px; }
	.sv-partner { font-size: 18px; }
	.sv-partner svg { width: 16px; height: 16px; }
	.sv-partner--gumroad { font-size: 16px; }
}

/* ═════════════════════════════════════════════════════════════════════
   480px — mobile baseline
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
	/* ── Hero: left-aligned mobile layout (per the mobile reference) ──
	   ≤1024 centres the stacked hero column; the phone tier (≤480, which
	   covers 428/430px Pro Max + Plus devices) flushes the heading + CTA to
	   the left gutter while the circular banner keeps bleeding into the
	   right edge below them. Only the cross-axis alignment changes — the
	   image keeps its own align-self:stretch from the 1024 block, so it
	   still spans full width and bleeds right. Bounded at 480 so 481px and
	   every larger breakpoint (768 / 1024 / desktop) stay centred. */
	.lp-hero-grid { align-items: flex-start; text-align: left; gap: 16px; }
	.lp-hero-text h1 { text-align: left; }
	.lp-hero-text > a,
	.lp-hero-text > .btn { align-self: flex-start; }
	/* Column gap drops to 16px (heading → button). Add 16px back above the
	   image so the button → image spacing stays at the original 32px and the
	   banner keeps its breathing room. margin-top longhand preserves the
	   right negative margin (bleed) set in the 1024 block. */
	.lp-hero-visual { margin-top: 16px; }
	/* ≤480 swaps the <picture> to mindpool-mobile-banner.png (314×258,
	   transparent composite — main circle + second-circle accent) — override
	   the 1024 block's 1056/1015 (mobile-crop) ratio so it renders undistorted
	   at the banner's own aspect ratio. */
	.lp-hero-visual { aspect-ratio: 314 / 258; }
	/* Banner reaches the end of the navy background: drop the hero's 60px
	   bottom padding so the image sits flush with where the (white) About
	   section begins — no empty navy band below the circle. Top padding and
	   the next section are untouched. */
	.lp-hero { padding-bottom: 0; }

	.lp-hero-text h1 { font-size: 32px; line-height: 1.2; }
	/* Hero heading wraps to 2 lines on mobile (desktop keeps its 3-line
	   <br> layout): the title content is "Delivering Skilled<br>IT Contract
	   <br>Staffing" — hiding the 2nd <br> merges the last two into
	   "Delivering Skilled" / "IT Contract Staffing". Content/markup unchanged;
	   desktop's three lines are untouched. */
	.lp-hero-text h1 br:nth-of-type(2) { display: none; }
	.lp-services-head h2,
	.lp-industries-head h2,
	.lp-powered-text h2 { font-size: 26px; }
	/* .lp-about-lead is fixed at 24px in the 768 block (more-specific !important). */
	/* (.lp-industries-grid is horizontal-scroll from 768; no override needed here.) */
	.lp-steps { grid-template-columns: 1fr; gap: 28px; }
	.lp-process-card { padding: 32px 20px; }

	/* About Mission/Vision spacing (stacked single-column on mobile):
	   • gap 32 → 20px between the "Our Mission" and "Our Vision" blocks.
	   • drop the desktop 50px margin-bottom so the gap from "Our Vision" to
	     the "More About Us" button is just the about column's 24px flex gap.
	   Both values are exact (20px / 24px); nothing else in About changes. */
	.lp-mv-row { gap: 20px; margin-bottom: 0; }

	/* About: add breathing room between the lead heading ("A Trusted IT
	   Staffing Partner…") and the circular image below it. The about column
	   stacks with a 24px flex gap; +16px margin-top on the image makes the
	   heading→image spacing ~40px. Only this gap changes. */
	.lp-about-visual { margin-top: 16px; }

	/* "Why Choose MindPool Technologies": 4 cards as a 2×2 grid on phones.
	   styles.css collapses .why-grid to a single column at ≤768; override to
	   two equal columns at ≤480 so the 4 cards sit 2-per-row × 2 rows. Equal
	   widths via 1fr; a single 16px gap keeps row/column spacing consistent.
	   Card design/typography/icons unchanged. */
	.why-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	/* In the 2×2 grid the other three titles wrap to two lines, but the short
	   "Fast Deployment" (2nd card) stays on one line, so its body starts higher
	   than its row-neighbour. Cap that title's width so it wraps to two lines
	   ("Fast" / "Deployment"), aligning the row. Title text/size unchanged. */
	.why-grid .why-item:nth-child(2) h3 { max-width: 130px; }

	/* "Powered by…" section: the Consult Now button carries a 50px
	   margin-bottom for the desktop layout (where it sits above the image).
	   On mobile the button is reordered to the bottom of its block, so that
	   50px becomes dead navy space before the SAP cards. Drop it — the 24px
	   grid gap + 24px cards padding remain for balanced separation. */
	.lp-powered-text .btn { margin-bottom: 0; }

	/* SITE-WIDE FOOTER (phone tier) — Quick Links + Solutions sit side-by-side
	   as two columns, while the Brand (logo/social/copyright) and Contact
	   blocks span the full width above and below them. styles.css stacks
	   .foot-grid to one column at ≤768; this overrides it for every page (the
	   footer markup is shared). Approved first on Home, now rolled out site-
	   wide. Content/links/markup unchanged — layout only. */
	.foot-grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 24px;
		row-gap: 32px;
		align-items: start;
	}
	.foot-brand,
	.foot-contact { grid-column: 1 / -1; }
}

/* ═════════════════════════════════════════════════════════════════════
   425px — fine-tune medium phones
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 425px) {
	:root { --gutter: 20px; }
	/* Section padding stays at the uniform 60px from the 768 block — no
	   per-section reductions here, so the rhythm remains consistent. */
	/* Hero left-aligned layout is set in the 480px block so it covers the
	   whole phone tier (incl. 428/430px Pro Max devices), not just ≤425. */
	.lp-hero-text h1 { font-size: 30px; margin-bottom: 20px; }
	.lp-about-circle,
	.lp-about-visual img { width: 220px; height: 220px; }
	.lp-about-visual img { left: 0; }
	.lp-service h3 { font-size: 20px; }
	.lp-industry h3 { font-size: 20px; }
	.lp-tech-card { padding: 22px 22px; }
	.lp-career { height: 280px; }
	.lp-career .container { padding-top: 70px; padding-bottom: 24px; }
}

/* ═════════════════════════════════════════════════════════════════════
   393px — iPhone 14/15 Pro and similar
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 393px) {
	:root { --gutter: 16px; }
	.lp-hero-text h1 { font-size: 28px; }
	.lp-hero-text .btn { font-size: 14px; padding: 10px 20px; }
	.lp-services-head h2,
	.lp-industries-head h2,
	.lp-powered-text h2 { font-size: 24px; }
	.lp-about-circle,
	.lp-about-visual img { width: 200px; height: 200px; }
	.lp-about-visual img { left: 0; }
	.lp-powered-visual img { max-width: 240px; width: 100%; height: auto; }
	.lp-powered-visual img { left: 0; }
	.lp-tech-card { padding: 20px 18px; }
	.lp-tech-card h3 { font-size: 20px; }
	.lp-process-head h2 { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2 + 3 — OTHER PAGES (Industries listing / Careers / Career
   detail / Contact / Service detail / Industries IT detail).
   Same approach as landing: stack 2-col grids at 1024, mobile reflows
   at 768/425/393. Frozen pages (About, Service Detail, Industries IT)
   stay visually unchanged at 1920 — every rule below lives inside an
   @media block.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1280px — tighten dense grids on Industries IT / Service detail ── */
@media (max-width: 1280px) {
	/* Service detail value grid 4 → 3 */
	.sv-value-grid { grid-template-columns: repeat(3, 1fr); }

	/* Industries IT: id-spec is 5×2 default — keep 5 down to 1280, drop later */
	.id-spec .id-services-grid { grid-template-columns: repeat(5, 1fr); }

	/* Industries listing 2-col stays */
	.in-approach-grid { gap: 28px; }
}

/* ── 1024px — TABLET — major stack across all secondary pages ── */
@media (max-width: 1024px) {

	/* ────  Page hero (Industries / Careers / Contact / Career detail)  ──── */
	.pg-hero { padding: 48px 0; }
	.pg-hero-grid {
		grid-template-columns: 1fr;
		gap: 16px;
		text-align: center;
	}
	/* Hide decorative orb visuals on mobile (Industries / Contact pages) —
	   but keep page-hero photos (like Careers) visible and centered. */
	.pg-hero-visual:not(.pg-hero-visual--photo) { display: none; }
	.pg-hero-visual--photo {
		justify-content: center;
		margin: 0 auto;
	}
	.pg-hero-visual--photo img {
		max-width: 320px;
		margin: 0 auto;
	}
	.pg-hero h1 { font-size: 44px; line-height: 1.15; margin-bottom: 12px; }
	.pg-hero-sub { font-size: 16px; margin: 0 auto 12px; }
	.pg-hero-cta { align-self: center; }

	/* ──── Industries listing ──── */
	.in-grid { gap: 24px; }
	.in-approach-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }

	/* ──── Careers list ──── */
	.cr-values-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	.cr-process-steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
	.cr-role { padding: 24px; }
	.cr-role-meta { flex-wrap: wrap; gap: 10px; }

	/* ──── Career detail ──── */
	.cd-hero { text-align: center; height: auto; padding: 48px 0; }
	.cd-hero-title { font-size: 38px; }
	.cd-hero-meta { grid-template-columns: 1fr 1fr; gap: 18px; justify-items: center; }
	.cd-body-grid { grid-template-columns: 1fr; gap: 40px; }
	.cd-body-aside { position: static; }

	/* ──── Contact ──── */
	.ct-grid { grid-template-columns: 1fr; gap: 32px; }
	.ct-offices-grid { grid-template-columns: 1fr; gap: 20px; }
	.ct-hero-title { font-size: 40px; }

	/* ──── Service detail — major stack ──── */
	.sv-hero { padding: 48px 0; height: auto; }
	.sv-hero-grid {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: center;
	}
	.sv-hero-visual {
		margin: 0 auto;
		max-width: 460px;
	}
	.sv-overview-grid { grid-template-columns: 1fr; gap: 32px; }
	.sv-overview--no-image .sv-overview-points,
	.sv-overview--cards .sv-overview-points { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.sv-value-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	.sv-benefits-grid { grid-template-columns: 1fr; gap: 32px; }

	/* ──── Industries IT detail ──── */
	/* Overview — stack title/text/icon-items as one column so order is
	   title → text → Pre-Screened Talent → Faster Hiring → Lasting Value. */
	.id-overview .id-overview-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.id-overview-aside {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-top: 0;
	}
	.id-spec .id-services-grid { grid-template-columns: repeat(3, 1fr); }
	.id-tech .lp-services-grid { grid-template-columns: repeat(2, 1fr); }
	.id-models .id-services-grid { grid-template-columns: repeat(2, 1fr); }
	.id-process .lp-steps { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.id-process .lp-steps::before { display: none; }
	.id-other-ind .lp-industries-grid { grid-template-columns: repeat(2, 1fr); }
	.id-tech .lp-services-grid { display: grid; }  /* re-grid in case parent .lp-services-grid is flex from landing */
}

/* ── 768px — mobile — single-column reflows + horizontal scroll where it pays ── */
@media (max-width: 768px) {

	.pg-hero h1 { font-size: 36px; }
	.pg-hero-eyebrow { font-size: 13px; }

	/* Industries listing — single col stack */
	.in-grid-section { padding: 60px 0; }
	.in-grid { grid-template-columns: 1fr; gap: 20px; }
	.in-card { padding: 28px 22px; }
	.in-card-icon { margin-bottom: 16px; }
	.in-card-icon svg { width: 36px; height: 36px; }
	.in-card-title { font-size: 22px; }
	.in-approach { padding: 60px 0; }
	.in-approach-grid { grid-template-columns: 1fr; gap: 28px; }

	/* Careers */
	.cr-values { padding: 60px 0; }
	.cr-values-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
	.cr-value { padding: 22px 20px; }
	.cr-roles { padding: 60px 0; }
	.cr-role { padding: 22px; }
	.cr-role-title { font-size: 20px; }
	.cr-process { padding: 60px 0; }
	.cr-process-steps { grid-template-columns: 1fr; gap: 28px; }

	/* Career detail */
	.cd-hero { height: auto; padding: 40px 0; }
	.cd-hero-title { font-size: 30px; }
	.cd-hero-meta { grid-template-columns: 1fr 1fr; gap: 14px; }
	.cd-body { padding: 50px 0; }
	.cd-section { margin-bottom: 40px; }
	.cd-benefits-grid { grid-template-columns: 1fr; gap: 12px; }
	.cd-aside-card { padding: 24px; }
	.cd-aside-list { grid-template-columns: 70px 1fr; gap: 8px 14px; }

	/* Contact */
	/* .ct-hero padding/height comes from .pg-hero (matches Career) — no override. */
	.ct-main { padding: 50px 0; }
	.ct-form-card { padding: 24px; }
	.ct-row-2 { grid-template-columns: 1fr; }
	.ct-offices { padding: 50px 0; }
	.ct-office { padding: 22px; }
	.ct-office-contacts { grid-template-columns: 1fr; gap: 10px; }
	.ct-office-city { font-size: 22px; }
	.ct-office-map-embed iframe { height: 200px; }

	/* Service detail — Permanent Placement (and IT detail) */
	.sv-hero { height: auto; padding: 44px 0; }
	.sv-hero h1 { font-size: 32px; line-height: 1.15; margin-bottom: 18px; }
	.sv-hero-eyebrow { font-size: 12px; margin-bottom: 14px; }
	.sv-hero-sub { font-size: 15px; margin-bottom: 24px; }
	.sv-hero-cta { font-size: 14px; padding: 14px 22px; }
	/* Square crescent visual is 1:1, so its height == its width. Cap it at 220px
	   on mobile so the banner height matches the Contact hero (whose 544×363 photo
	   renders ~213px tall at 320px wide) instead of towering at a 320px square. */
	.sv-hero-visual { max-width: 220px; width: 100%; height: auto; aspect-ratio: 1 / 1; }
	.sv-hero-photo { width: 100%; height: 100%; }
	.sv-hero-orb { width: 60%; height: 60%; }
	.sv-hero-orb-2 { width: 40%; height: 40%; }

	.sv-overview, .sv-value, .sv-benefits, .sv-roles, .sv-process, .sv-partners,
	.sv-industries, .sv-usp { padding: 50px 0; }
	.sv-overview h2, .sv-value-head h2, .sv-benefits-head h2,
	.sv-roles-head h2, .sv-industries-head h2, .sv-usp-head h2 { font-size: 26px; line-height: 1.2; }

	/* Overview — points become a horizontal swipe carousel on mobile */
	.sv-overview-pill { font-size: 12px; padding: 6px 14px; }
	.sv-overview-image { aspect-ratio: 1 / 1; max-width: 360px; margin: 0 auto; }
	/* Overview points — vertical stack on mobile, no horizontal scroll. */
	.sv-overview--no-image .sv-overview-points,
	.sv-overview--cards .sv-overview-points {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		gap: 24px;
		overflow: visible;
		padding: 0;
		margin: 0;
	}
	.sv-overview-point {
		width: 100%;
		max-width: 100%;
		flex: 0 0 auto;
	}

	/* Benefits — image stacks above text, sized down */
	.sv-benefits-image { max-width: 480px; margin: 0 auto; }
	.sv-benefits-image img { width: 100%; height: auto; }
	.sv-benefits-list { grid-template-columns: 1fr; gap: 12px; }
	.sv-value-grid { grid-template-columns: 1fr; gap: 16px; }
	.sv-value-item { padding: 24px; }

	/* Roles section — horizontal carousel with autoplay.
	   Card is 85% wide so the next card peeks ~12% in from the right,
	   making the swipe affordance obvious. JS autoplay (data-autoplay)
	   advances one card at a time with a slow ease for smoothness. */
	.sv-roles-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.sv-roles-nav { display: none; }
	.sv-roles-slider { overflow: hidden; }
	.sv-roles-track {
		display: flex;
		flex-direction: row;
		gap: 16px;
		/* Slower, smoother slide than the desktop 0.5s default. */
		transition: transform 0.8s cubic-bezier(.4, 0, .2, 1) !important;
	}
	.sv-role {
		flex: 0 0 85%;
		width: 85%;
		max-width: 85%;
		min-height: 0;
		padding: 24px 22px;
		/* Restructure: icon on top-right next to heading, description
		   spans the full card width below. */
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		column-gap: 14px;
		row-gap: 10px;
		align-items: start;
	}
	.sv-role-copy {
		display: contents;
	}
	.sv-role-copy h3 {
		grid-row: 1;
		grid-column: 1;
		font-size: 22px;
		min-height: 0;
		margin: 0;
		align-self: center;
	}
	.sv-role-copy p {
		grid-row: 2;
		grid-column: 1 / -1;
	}
	.sv-role-art {
		grid-row: 1;
		grid-column: 2;
		position: static;
		width: 56px;
		height: 56px;
		right: auto;
		bottom: auto;
		opacity: 1;
	}

	/* Tech-cards strip (SAP / Oracle / Cloud) on service-permanent and
	   industry-IT pages → horizontal carousel. Scoped away from .home so
	   the landing's mobile vertical-stack stays as the user signed off. */
	body:not(.home) .lp-powered-cards {
		display: flex;
		flex-direction: row;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		padding-bottom: 18px;
		padding-right: 24px;
		margin-right: calc(var(--gutter, 24px) * -1);
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	body:not(.home) .lp-powered-cards::-webkit-scrollbar { display: none; }
	body:not(.home) .lp-tech-card {
		flex: 0 0 82%;
		max-width: 320px;
		scroll-snap-align: start;
		padding: 24px 22px;
	}

	/* Process steps — horizontal scroll on mobile (4 cards), scoped to
	   non-landing pages so the landing's existing mobile process layout
	   (already 2-col @1024 → 1-col @480 per earlier rules) is untouched. */
	body:not(.home) .lp-process-card { padding: 32px 20px; }
	body:not(.home) .lp-steps {
		display: flex;
		flex-direction: row;
		grid-template-columns: none;
		gap: 16px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		padding-bottom: 18px;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	body:not(.home) .lp-steps::before { display: none; }
	body:not(.home) .lp-steps::-webkit-scrollbar { display: none; }
	body:not(.home) .lp-step {
		flex: 0 0 78%;
		max-width: 280px;
		scroll-snap-align: start;
	}
	body:not(.home) .lp-process-head h2 { font-size: 26px; }

	/* Overview icon items — tighten icon size and gap on phones. */
	.id-overview-item { gap: 12px; }
	.id-overview-item-icon,
	.id-overview-item-icon svg { width: 48px; height: 48px; flex-basis: 48px; }
	.id-overview-item-title { font-size: 17px; }
	.id-overview-item-desc { font-size: 14px; }

	/* Industries cards — smaller icon on mobile. */
	.lp-industry-icon { margin-bottom: 16px; }
	.lp-industry-icon svg { width: 36px; height: 36px; }

	/* Industries IT — mirror the landing / Permanent Placement pattern:
	   card-heavy sections become horizontal swipe carousels on mobile so
	   the visual rhythm matches the rest of the site. */

	/* Specializations (.id-spec): on mobile, JS splits the 10 items into 2
	   rows. Top row scrolls right continuously; bottom row scrolls left.
	   Each row's items are duplicated so the linear animation tiles
	   seamlessly without a reverse-direction frame. The .id-spec-box
	   clips overflow so the moving rows stay inside the gray box. */
	.id-spec { padding: 50px 0; }
	.id-spec-box {
		padding: 28px 18px;
		overflow: hidden;
	}
	.id-spec-head {
		text-align: center;
		margin: 0 auto 28px;
	}
	.id-spec-head h2 { font-size: 26px; }
	.id-spec-grid.id-spec-grid--marquee {
		display: block !important;
		width: 100%;
		padding: 0;
		margin: 0;
		list-style: none;
		grid-template-columns: none;
		animation: none;
		transform: none;
	}
	.id-spec-row {
		display: flex;
		flex-direction: row;
		gap: 14px;
		width: max-content;
		margin: 0 0 14px;
		padding: 0;
		list-style: none;
	}
	.id-spec-row:last-child { margin-bottom: 0; }
	.id-spec-row .id-spec-item {
		flex: 0 0 160px;
		width: 160px;
		margin: 0;
	}
	.id-spec-label { font-size: 14px !important; }
	/* 870 px = 5 items × (160 + 14 gap) — exact half of the duplicated
	   row's width, so when the animation loops at the end it jumps to a
	   visually-identical position thanks to the duplicated cards. */
	.id-spec-row--right {
		animation: id-spec-scroll-right 28s linear infinite;
	}
	.id-spec-row--left {
		animation: id-spec-scroll-left 28s linear infinite;
	}
	@keyframes id-spec-scroll-right {
		from { transform: translateX(-870px); }
		to   { transform: translateX(0); }
	}
	@keyframes id-spec-scroll-left {
		from { transform: translateX(0); }
		to   { transform: translateX(-870px); }
	}
	@media (prefers-reduced-motion: reduce) {
		.id-spec-row--right,
		.id-spec-row--left { animation: none; transform: none; }
	}

	/* Technologies & Platforms (.id-tech-grid): 8 cards → carousel */
	.id-tech-grid {
		display: flex !important;
		flex-direction: row;
		grid-template-columns: none;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		padding-bottom: 18px;
		padding-right: var(--gutter, 24px);
		margin-right: calc(var(--gutter, 24px) * -1);
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.id-tech-grid::-webkit-scrollbar { display: none; }
	.id-tech-card {
		flex: 0 0 78%;
		max-width: 300px;
		scroll-snap-align: start;
	}

	/* Process steps (.lp-steps inside id-process) already covered by the
	   body:not(.home) .lp-steps carousel rule above. */
}

/* ── 480px — phones — tighten further ── */
@media (max-width: 480px) {
	.pg-hero h1 { font-size: 30px; }
	.cr-values-grid { grid-template-columns: 1fr; gap: 14px; }
	.cd-hero-meta { grid-template-columns: 1fr; gap: 12px; }
	/* .id-spec stays as horizontal carousel — established at 768. */

	/* Inner-page banner images stay VISIBLE on phones (previously hidden here).
	   They use the left-aligned ≤768 photo layout above (.pg-hero-visual--photo /
	   .sv-hero-visual / About .hero-visual), matching the documented intent that
	   "the ≤480 phone pass keeps its left-aligned photo". Home's hero uses
	   .lp-hero-visual and is unaffected either way. */
	/* .pg-hero auto-height so the banner fits its heading/sub/CTA + photo instead
	   of the fixed 520px. .sv-hero and About's .hero are already auto-height at
	   ≤1024. Padding stays at the 48px from the 1024 block. */
	.pg-hero { height: auto; min-height: 0; }

	/* About "who" section — the 4 certification cards (ISO 9001 / ISO 27001 /
	   SAP Partner / Microsoft Partner) stack single-column from ≤768; arrange
	   them 2×2 on phones. Equal widths via 1fr and grid's default stretch keeps
	   each row's card heights equal; the existing 18px gap stays consistent.
	   Card design/content/icons/typography unchanged. About page only. */
	.page-template-page-about .overview-certs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	/* Tighten the cert cards' interior so the title/subtitle get more room in
	   the narrow 2-col cards — trims side padding (18→10px) and the icon→text
	   gap (14→10px). Icon stays on the left at its full size; typography and
	   structure unchanged. Longer subtitles still wrap, but less cramped. */
	.page-template-page-about .overview-certs .oc-item { padding: 14px 10px; gap: 10px; }

	/* Global Presence stats — show all 3 stats in a single row (3 columns),
	   each keeping its number-above-label, instead of stacking them vertically.
	   This mirrors the ≤1024 layout. Labels may wrap to two lines in the narrow
	   columns. About page only. */
	.page-template-page-about .global-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* ── 425 / 393px — smallest phones ── */
@media (max-width: 425px) {
	.pg-hero h1 { font-size: 28px; }
	.in-card-title { font-size: 20px; }
	.cd-hero-title { font-size: 26px; }
	.sv-hero h1 { font-size: 28px; }
	.ct-hero-title { font-size: 28px; }
}
@media (max-width: 393px) {
	.pg-hero h1 { font-size: 26px; }
	.sv-hero h1 { font-size: 26px; }
	.cd-hero-title { font-size: 24px; }
	.ct-hero-title { font-size: 26px; }
}

/* ════════════════════════════════════════════════════════════════════
   UNIFIED SECTION SPACING — scales section padding down at narrower
   breakpoints so the site keeps a consistent vertical rhythm everywhere.

       Scale:  desktop 120 → 1280 96 → 1024 72 → 768 60 → 560 40

   The desktop default lives in styles.css (`section { padding: 120px 0 }`)
   and many per-section rules also declare 120/120 explicitly. At each
   narrower breakpoint we override both with the high-specificity selector
   plus !important.

   THREE section "shapes":
     1. Content sections — symmetric padding (top + bottom) that scales
        with the breakpoint ladder. They produce the section-to-section
        gap (sum of bottom + top = 240/192/144/120/80).

     2. Height-based heroes (.hero, .lp-hero, .pg-hero, .sv-hero) — fixed
        banner heights, `padding: 0`, `margin-bottom: 0`. The next
        section's padding-top alone creates the hero→content gap.
        (.ct-hero on Contact is a .pg-hero, so it lives here — fixed 520px
        banner with flex-centered content, matching the Career hero.)

     3. Padding-based heroes (.cd-hero) — same scaling padding-TOP as
        content sections, but padding-bottom ALWAYS 0 so they behave like
        height-based heroes regarding the gap (the next section's
        padding-top alone creates the hero→content gap).

   `.lp-career` (autoplay video banner, aspect-ratio driven) is exempt
   throughout — its height is its image height, not padding.

   Result: hero→content gap is half the content↔content gap at every
   breakpoint — intentional, because the dark→light hero transition
   already provides a visual break.
   ════════════════════════════════════════════════════════════════════ */

/* .cd-hero is a fixed-height banner (520px, matches .pg-hero / .sv-hero /
   About .hero) — defined in pages.css. It switches to auto height + padding
   at ≤1024 / ≤768 alongside the other inner-page heroes. */

@media (max-width: 1280px) {
	section:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career) {
		padding-top: 96px !important;
		padding-bottom: 96px !important;
	}
}

/* About Mission/Vision (.mv): the blanket 96px section padding above is too tall
   for this inset card at the 1280 laptop band — trim it to 56px. Scoped to .mv
   and to 1025–1280 only (≤1024 keeps its 72px, ≥1281 the base). The selector
   mirrors the blanket rule + .mv so it out-specifies that !important. */
@media (min-width: 1025px) and (max-width: 1280px) {
	section.mv:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career) {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
}

/* Same trim for the 1536 laptop band (1281–1536): the base 120px section padding
   is over-tall for this inset card — reduce to 56px. Scoped to .mv; >1536 keeps
   the base 120px, ≤1280 keeps its own rule above. No !important needed (the 96px
   blanket only applies ≤1280), and .mv out-specifies the base `section` rule. */
@media (min-width: 1281px) and (max-width: 1536px) {
	.mv { padding-top: 56px; padding-bottom: 56px; }

	/* Inner-page banners: the base 520px is over-tall on the 1536 laptop band,
	   so trim to 400px (matching the ≤1280 band). Home (.lp-hero) is excluded —
	   it keeps its own height ladder. >1536 keeps the base 520px. */
	.hero, .sv-hero, .pg-hero, .cd-hero { height: 400px !important; }

	/* Inner-page banner image: trim the cap from the base 544px to 500px so it
	   sits comfortably inside the now-shorter 400px banner at this band. Only the
	   inner-page image (.hero-banner-img, About); the home banner is a different
	   element and is left alone. >1536 keeps the base 544px. */
	.hero-banner-img { max-width: 500px; }

	/* Banner → first-section gap: the gap is the first content section's
	   padding-top (base 120px). Trim it to 80px on the 1536 band for inner pages
	   only — each selector targets the section directly after an inner banner
	   (.hero About, .pg-hero Industries/Careers/Contact, .sv-hero Service/
	   Industry-IT, .cd-hero Career detail). Home (.lp-hero) is not included, so
	   its banner→content gap is untouched. Only padding-top changes. */
	.hero + section,
	.pg-hero + section,
	.sv-hero + section,
	.cd-hero + section { padding-top: 80px; }
}

/* Industries page: tighten the gap between the cards section (.in-grid-section)
   and the Approach section (.in-approach) — trim only the padding between those
   two (cards-bottom + approach-top) to 48px. Their other edges and every other
   section are untouched. The base handles ≥1281; the ≤1280 block out-specifies
   the blanket section-padding !important above. */
.in-grid-section { padding-bottom: 48px; }
.in-approach { padding-top: 48px; }
@media (max-width: 1280px) {
	section.in-grid-section:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career) { padding-bottom: 48px !important; }
	section.in-approach:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career) { padding-top: 48px !important; }
}

/* Contact page: remove the form section's (.ct-main) bottom padding so it sits
   closer to the "Our offices" section below. ONLY .ct-main's bottom padding is
   touched — the offices' top padding and every other section stay as-is. Base
   (>1280) is set in pages.css; this block adds the `.ct-main` class to the
   blanket section-padding selector so it out-specifies the 96/72/60/40
   !important ladder, keeping the padding removed at every band down to mobile. */
@media (max-width: 1280px) {
	section.ct-main:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career) { padding-bottom: 0 !important; }
}

@media (max-width: 1024px) {
	section:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career) {
		padding-top: 72px !important;
		padding-bottom: 72px !important;
	}
}

@media (max-width: 768px) {
	section:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career) {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}
}

@media (max-width: 560px) {
	section:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career) {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
}

/* Impact (stats circles) — no bottom padding at any breakpoint. This selector
   adds `.impact` to the ladder chain above, giving it specificity (0,8,1) >
   the ladder's (0,8,0)/(0,7,1) so it wins everywhere without re-touching the
   ladder. Top padding still scales with the ladder (120/96/72/60/40). */
section.impact:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career) {
	padding-bottom: 0 !important;
}

/* Why-choose — no bottom padding at any breakpoint, EXCEPT on the About page
   (page-template-page-about), where it keeps the normal ladder bottom padding
   (120/96/72/60/40). The body:not() prefix only changes which pages match;
   specificity (0,9,2) still beats the section-padding ladder. */
body:not(.page-template-page-about) section.why-choose:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career) {
	padding-bottom: 0 !important;
}

/* Trusted Partners — no TOP padding at any breakpoint (0,8,1 beats the ladder;
   bottom padding still scales). */
section.lp-partners:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career) {
	padding-top: 0 !important;
}

/* Service-detail Partners — no TOP padding at any breakpoint (same 0,8,1
   approach; bottom padding still scales). */
section.sv-partners:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career) {
	padding-top: 0 !important;
}

/* ── Uniform inner-page hero heading size (per request) ──
   Every inner-page hero title renders at the SAME size at each breakpoint,
   regardless of its per-page rule (.hero / .pg-hero / .sv-hero / .ct-hero /
   .cd-hero). !important beats the scattered per-hero sizes (About/pg 64,
   Contact 60, Career-detail 56, Service/IT 88) and their responsive overrides.
   Home hero (.lp-hero) is intentionally excluded. */
.hero h1,
.pg-hero h1,
.ct-hero-title,
.cd-hero-title,
.sv-hero h1 {
	font-size: 64px !important;
}
@media (max-width: 1024px) {
	.hero h1, .pg-hero h1, .ct-hero-title, .cd-hero-title, .sv-hero h1 { font-size: 44px !important; }
}
@media (max-width: 768px) {
	.hero h1, .pg-hero h1, .ct-hero-title, .cd-hero-title, .sv-hero h1 { font-size: 36px !important; }
}
@media (max-width: 480px) {
	.hero h1, .pg-hero h1, .ct-hero-title, .cd-hero-title, .sv-hero h1 { font-size: 30px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   UNIFIED PARAGRAPH SCALE (desktop / tablet ≥769px) — every body /
   content paragraph renders at 20px site-wide. Scoped to min-width:769px
   so it never collides with the mobile typography scale above (≤768px),
   which keeps its own 14/17px body sizing for small screens. !important
   mirrors that mobile block so these beat the per-section and
   per-template (.page-template-* …) font-size rules scattered across
   styles.css / landing.css / service.css / pages.css.

   Deliberately EXCLUDED so the footer and compact cards keep their
   layout balance: footer addresses, eyebrows / pills, card tags, stat
   numbers + labels, leader bios/roles, metadata (dt/dd, meta labels),
   form field captions, and the consult-popup copy.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
	/* Base — any paragraph without a more-specific size becomes 20px.
	   Left non-important so genuinely small UI text (e.g. .office p,
	   .foot-col li, .addr) keeps its own smaller, higher-specificity size. */
	p { font-size: 20px; line-height: 1.6; }

	/* Content paragraphs — forced to 20px regardless of source order. */
	.hero p, .hero-sub,
	.sec-head p,
	.who-content p,
	.mv-body p,
	.global-text p,
	.why-head p, .why-item p,
	.lp-hero-sub, .lp-services-head p, .lp-industries-head p,
	.lp-powered-text p, .lp-process-head p, .lp-mv p,
	.lp-service p, .lp-industry p, .lp-step p, .lp-tech-card p,
	.sv-hero-sub, .sv-overview-text p, .sv-overview-point-desc,
	.sv-value-item p, .sv-benefits-sub, .sv-roles-sub, .sv-role p,
	.sv-role-copy p, .sv-industries-head p, .sv-usp-item p, .sv-cta p,
	.pg-hero-sub, .in-card-lead, .in-approach-item p,
	.cr-value p, .cr-roles-sub, .cr-role-lead, .cr-process-steps p,
	.cd-section p, .cd-benefit p, .ct-hero-sub,
	.id-overview-item-desc, .id-spec-head p, .id-tech-head p, .id-tech-card p {
		font-size: 20px !important;
		line-height: 1.6 !important;
	}

	/* Eyebrows authored as <p class="eyebrow"> live inside the *-head
	   containers above, so the head-paragraph rules would otherwise bump
	   them to 20px. Re-assert their natural 13px (matches the author's
	   mobile eyebrow handling) — equal specificity, later source order. */
	p.eyebrow {
		font-size: 13px !important;
		line-height: 1.4 !important;
	}
}

/* ════════════════════════════════════════════════════════════════════
   SQUARE CORNERS — remove border-radius from all cards, buttons, boxes,
   inputs, tags and icon badges site-wide (every breakpoint). !important
   beats the per-section / per-template radius rules across styles.css,
   landing.css, service.css and pages.css.

   KEPT ROUNDED (intentionally NOT listed below):
   • Eyebrow label boxes — .hero-eyebrow, .sv-overview-pill
   • Every circular shape (border-radius:50%) — icons, avatars, photo
     masks, dots, orbs, social icons, step numbers
   • All images, including rounded-corner images — .lp-service-img,
     .sv-overview-image img + .sv-overview-image-accent
   Image styles, proportions and layouts are left completely untouched.
   ════════════════════════════════════════════════════════════════════ */
/* Buttons & CTAs */
.btn, .nav-cta, .btn-cta-light, .sv-hero-cta, .cd-hero-cta,
/* Nav dropdown */
.nav-links .sub-menu,
/* Home cards, boxes & icon badges */
.oc-item, .oc-badge, .mv, .leader-card, .office, .office .pin,
/* Landing cards */
.lp-industry, .lp-tech-card, .lp-process-card,
/* Industries / careers / career-detail cards, tags & icon badges */
.in-card, .in-card-tags li, .in-approach-item,
.cr-value, .cr-value-icon, .cr-role, .cr-process-steps li,
.cd-benefit, .cd-aside-card,
/* Service & industry-detail cards, tags & icon badges */
.sv-value-item, .sv-value-icon, .sv-industry, .sv-usp-item,
.id-service, .id-service-soon, .id-tech-card, .id-ind-item, .id-stat {
	border-radius: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   UNIFIED SUB-HEADINGS — card / feature / sub-section titles (the H3 & H4
   level that sits UNDER a section's H2 heading). 24px semibold site-wide
   for a consistent secondary-title style, scaling to 20px on small phones
   so long titles in narrow cards don't break the layout.

   !important + the selector specificity (0,1,1) intentionally beats both
   the scattered per-card font-size rules across landing/pages/service.css
   AND the generic mobile `h3/h4 { … !important }` block higher up
   (specificity 0,1,0), so these titles render at 24/20px on every page
   and breakpoint without per-file edits.

   Section headings (H2) and hero titles (H1) are NOT included — they keep
   their display sizes. Proper-noun data (leader names .leader-card h4,
   office/city names) is also excluded — those aren't sub-section titles.
   Non-heading <p> "titles" (.sv-overview-point-title, .id-overview-item-title)
   are excluded too, as they're paragraphs, not headings.
   ════════════════════════════════════════════════════════════════════ */
.mv-body h3, .why-item h3,
.lp-mv h4, .lp-service h3, .lp-industry h3, .lp-tech-card h3, .lp-step h4,
.in-card-title, .in-approach-item h3, .cr-value h3, .cr-role-title,
.cr-process-steps h3, .cd-benefit h3, .cd-aside-card h3, .ct-side-card h3,
.sv-value-item h3, .sv-role h3, .sv-industry h4, .sv-usp-item h3,
.id-service h3, .id-tech-card h3 {
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

@media (max-width: 560px) {
	.mv-body h3, .why-item h3,
	.lp-mv h4, .lp-service h3, .lp-industry h3, .lp-tech-card h3, .lp-step h4,
	.in-card-title, .in-approach-item h3, .cr-value h3, .cr-role-title,
	.cr-process-steps h3, .cd-benefit h3, .cd-aside-card h3, .ct-side-card h3,
	.sv-value-item h3, .sv-role h3, .sv-industry h4, .sv-usp-item h3,
	.id-service h3, .id-tech-card h3 {
		font-size: 20px !important;
	}
}

/* ════════════════════════════════════════════════════════════════════
   CAREER DETAIL — typography spec (per request)
   • Body copy (paragraphs + bullet list) ............ 20px
   • Section sub-headings (the H2s under the role H1) . 24px, semibold (600)
   Enforced at every breakpoint. The !important + (0,1,1) specificity beats
   both the generic mobile heading block (h2/h3 { … !important }) and the
   per-component sizes, so desktop / tablet / mobile stay consistent.
   ════════════════════════════════════════════════════════════════════ */
.cd-section p,
.cd-benefit p,
.cd-list li {
	font-size: 20px !important;
	line-height: 1.7 !important;
}
.cd-section h2 {
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

/* ════════════════════════════════════════════════════════════════════
   TYPOGRAPHY SCALING FIXES — keep headings scaling DOWN past 768px and
   stop the big inner-page section headings from sitting at full desktop
   size on tablets. Every rule here lives inside a media query that never
   touches the 1920px desktop layout (frozen).

   Why this block exists: the unified mobile scale above sets
   `h1/h2 { … !important }` at ≤768. Because !important beats the
   non-important per-breakpoint reductions in styles.css / landing.css
   (e.g. styles.css `h2 { 24px }` @480, `.lp-hero-text h1 { 28px }` @393),
   heading sizes used to FREEZE at the 768 values all the way down to
   393px — flattening the hierarchy on small phones (h1 32 vs h2 28).
   These rules re-assert the intended smaller steps with !important so the
   scale actually continues, and add the tablet step the class-selector
   section heads were missing.

   Resulting heading ladder:
     Generic H1 (incl. home hero):  …768 32 → 480 30 → 393 28
     Generic H2 (section heads):    …768 28 → 480 24 → 393 22
     Inner-page hero H1:        1024 44 → 768 36 → 480 30 → 425 28 → 393 26
     Big inner section heads:   desktop 48–54 → 769–1024 40 → ≤768 follows H2
     Trusted-Partners H2 (label):   ≤768 22 (was stuck at 28)
   ════════════════════════════════════════════════════════════════════ */

/* ── Tablet (769–1024): scale the oversized inner-page section headings.
   These are class selectors (desktop 48–54px) that escape the generic
   h2 ladder in styles.css, so without this they stayed at full desktop
   size until 768 then cliffed to 28. Bounded to min-width:769px so they
   never collide with the ≤768 mobile h2 scale below. ── */
@media (min-width: 769px) and (max-width: 1024px) {
	.sv-overview-text h2,
	.sv-value-head h2, .sv-benefits-head h2, .sv-roles-head h2,
	.sv-industries-head h2, .sv-usp-head h2,
	.id-services-head h2, .id-spec-head h2, .id-tech-head h2,
	.id-ind-head h2, .id-stats-head h2 {
		font-size: 40px !important;
		line-height: 1.2 !important;
	}
	/* "A Trusted IT Staffing Partner…" lead — 28px at the 1024 band only
	   (was 42px inherited from base). font-weight 500 matches the
	   "Flexible IT Staffing Solutions" heading (.lp-services-head h2, 500),
	   up from the base 400. margin-bottom 32px sets the gap to the Mission/
	   Vision block (the ≤1024 stack reset it to 0). ≥1025 stays 42px/400, ≤768
	   stays 24px. */
	.lp-about .lp-about-lead { font-size: 28px !important; font-weight: 500 !important; margin-bottom: 32px !important; }

	/* Why-Choose feature body — lift the 280px max-width cap at the 1024 band
	   so each subline fills its ~452px column (2-col why-grid here) and wraps
	   to ~3–4 lines instead of ~6. ≥1025 (4-col) and ≤768 (1-col, already
	   max-width:100%) are untouched. */
	.why-item p { max-width: none !important; }
}

/* ── Mobile continuation of the unified H1/H2 scale (font-size only;
   line-height + weight are inherited from the ≤768 unified block). ── */
@media (max-width: 480px) {
	h1, .h1 { font-size: 30px !important; }
	h2, .h2 { font-size: 24px !important; }
}
@media (max-width: 393px) {
	h1, .h1 { font-size: 28px !important; }
	h2, .h2 { font-size: 22px !important; }
}

/* ── Inner-page hero titles — continue scaling below 480 (the unified
   hero block above stops at 30px @480). Higher specificity than the
   generic h1 rules so heroes stay distinct. ── */
@media (max-width: 425px) {
	.hero h1, .pg-hero h1, .ct-hero-title, .cd-hero-title, .sv-hero h1 {
		font-size: 28px !important;
	}
}
@media (max-width: 393px) {
	.hero h1, .pg-hero h1, .ct-hero-title, .cd-hero-title, .sv-hero h1 {
		font-size: 26px !important;
	}
}

/* ── Trusted-Partners heading is a small label-style heading, not a
   section display H2 — keep it below the section-H2 size on mobile
   (its intended 22px was being overridden to 28 by the unified scale). ── */
@media (max-width: 768px) {
	.lp-partners h2, .sv-partners h2 { font-size: 22px !important; }
}

/* ── Closing CTA-band heading is the page's biggest display heading on
   desktop (72–80px). The unified ≤768 h2 scale was flattening it to the
   same size as a regular section H2 (28→24→22), killing its prominence.
   Re-assert a display-level scale so it stays the strongest heading on
   mobile, a step above the hero. ── */
@media (max-width: 768px) {
	.cta-band h2, .sv-cta h2 { font-size: 34px !important; line-height: 1.15 !important; }
}
@media (max-width: 480px) {
	.cta-band h2, .sv-cta h2 { font-size: 30px !important; }
}
@media (max-width: 393px) {
	.cta-band h2, .sv-cta h2 { font-size: 28px !important; }
}

/* ── Service "Roles We Place" cards — ≤1280px ONLY ──
   At ≤1280 the 3-up role cards shrink to ~360px, and .sv-role-copy's
   desktop `max-width: 60%` squeezed the (20px) body text into a ~159px
   column that wrapped to ~12 lines. Let the copy use the full card width
   in this band so the text reads in ~5–6 lines with the decorative art
   sitting below it. Bounded to ≤1280 so the frozen 1920 desktop (which
   keeps 60%) and the ≤768 carousel layout are untouched. ── */
@media (max-width: 1280px) {
	.sv-role-copy { max-width: 100%; }
	/* Shrink the decorative corner art (200px on desktop) so it doesn't
	   crowd the now-full-width text on the smaller ≤1280 cards. */
	.sv-role-art { width: 140px; height: 140px; }
}

/* Roles cards at the 1280 laptop band: the full-width text was touching the
   corner art. Reserve bottom space on the card and shrink the art further so
   the text and icon stay clear. Scoped to 1025–1280 (the 3-up card width). */
@media (min-width: 1025px) and (max-width: 1280px) {
	.sv-role { padding-bottom: 116px; }
	/* Smaller corner art. Keep the icon fully inside the card — the card clips
	   overflow, so positioning it further out (e.g. -26px) cut the icon off. */
	.sv-role-art { width: 100px; height: 100px; right: 8px; bottom: 8px; }
}

/* ── Roles section — remove its bottom padding at the 1280 band ONLY
   (1025–1280px), per request. The unified spacing ladder applies
   `padding-bottom: 96px !important` to every section at ≤1280; adding
   `.sv-roles` to that selector chain (specificity 0,8,1 > the ladder's
   0,7,1) lets this zero out just the Roles bottom padding here. Bounded
   to min-width:1025px so ≤1024 / ≤768 and the frozen 1920 desktop keep
   their normal spacing. ── */
@media (min-width: 1025px) and (max-width: 1280px) {
	section.sv-roles:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career) {
		padding-bottom: 0 !important;
	}
}

/* ════════════════════════════════════════════════════════════════════
   1280 BAND ONLY (1025–1280px) — paragraph text → 16px, sub-headings → 20px
   (per request). These re-list the exact selectors used by the unified
   ≥769 paragraph block (20px) and the unified sub-heading block (24px)
   so they win by equal specificity + later source order, but ONLY inside
   this band. Weight / line-height are left as the unified rules set them.
   All other widths (incl. the frozen 1920 desktop, ≤1024, ≤768) keep their
   existing sizes. ════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1280px) {
	/* Paragraphs → 16px */
	p { font-size: 16px; }
	.hero p, .hero-sub,
	.sec-head p,
	.who-content p,
	.mv-body p,
	.global-text p,
	.why-head p, .why-item p,
	.lp-hero-sub, .lp-services-head p, .lp-industries-head p,
	.lp-powered-text p, .lp-process-head p, .lp-mv p,
	.lp-service p, .lp-industry p, .lp-step p, .lp-tech-card p,
	.sv-hero-sub, .sv-overview-text p, .sv-overview-point-desc,
	.sv-value-item p, .sv-benefits-sub, .sv-roles-sub, .sv-role p,
	.sv-role-copy p, .sv-industries-head p, .sv-usp-item p, .sv-cta p,
	.pg-hero-sub, .in-card-lead, .in-approach-item p,
	.cr-value p, .cr-roles-sub, .cr-role-lead, .cr-process-steps p,
	.cd-section p, .cd-benefit p, .cd-list li, .ct-hero-sub,
	.id-overview-item-desc, .id-spec-head p, .id-tech-head p, .id-tech-card p {
		font-size: 16px !important;
	}

	/* Sub-headings (card / feature / sub-section titles) → 20px */
	.mv-body h3, .why-item h3,
	.lp-mv h4, .lp-service h3, .lp-industry h3, .lp-tech-card h3, .lp-step h4,
	.in-card-title, .in-approach-item h3, .cr-value h3, .cr-role-title,
	.cr-process-steps h3, .cd-benefit h3, .cd-aside-card h3, .ct-side-card h3,
	.sv-value-item h3, .sv-role h3, .sv-industry h4, .sv-usp-item h3,
	.id-service h3, .id-tech-card h3 {
		font-size: 20px !important;
	}
	/* Career-detail benefit boxes: heading 20 → 18 at this band — only
	   .cd-benefit; the other grouped h3s above stay 20px. */
	.cd-benefit h3 { font-size: 18px !important; }
}

/* ── "Powered by Leading Technologies" (Service pages) — 1280 band ONLY ──
   At ≤1280 the .lp-powered-visual collapses to 0 height with an absolutely
   positioned image, so the photo sits right under the heading. Increase the
   heading's bottom margin in this band to open up space between the heading
   and the image. Scoped to body:not(.home) so Home's frozen powered section
   is untouched, and bounded to 1025–1280 so no other screen size changes. ── */
@media (min-width: 1025px) and (max-width: 1280px) {
	body:not(.home) .lp-powered-text h2 { margin-bottom: 45px; }
	/* Home "Powered by…" — the image (absolutely positioned in the 0-height
	   .lp-powered-visual) is pulled up and overlaps the Explore button. Push
	   it down by growing the button's bottom margin so there's clear space
	   between the button and the image. 1280 band + home only. */
	body.home .lp-powered-text .btn { margin-bottom: 150px; }
	/* Same on the inner (service) pages: the absolutely-positioned image was
	   sitting on top of the Consult Now button (hiding it). Grow the button's
	   bottom margin so the image is pushed clear and the spacing around the
	   button is balanced against the 45px heading gap above. */
	body:not(.home) .lp-powered-text .btn { margin-bottom: 178px; }
}

/* ── Inner-page headings too big at 1280 — reduce in the 1280 band ONLY ──
   At 1025–1280 the landing section heads already drop to 36px, but the
   inner-page section heads (.sv-* / .id-*) and hero titles were still at
   full desktop size (54/52/48 and 64). Bring them down so they match the
   rest of the page at this width. Monotonic with the existing ≤1024 sizes
   (section heads 40, hero 44). Bounded to 1025–1280, so the frozen 1920
   desktop, ≤1024 and ≤768 are untouched; home uses .lp-* heads (not listed)
   so it's unaffected. ── */
@media (min-width: 1025px) and (max-width: 1280px) {
	/* Inner-page hero titles: 64 → 56 (matches the Home hero at this width) */
	.hero h1, .pg-hero h1, .ct-hero-title, .cd-hero-title, .sv-hero h1 {
		font-size: 56px !important;
	}
	/* Inner-page section headings: 48–54 → 40 */
	.sv-overview-text h2, .sv-value-head h2, .sv-benefits-head h2,
	.sv-roles-head h2, .sv-industries-head h2, .sv-usp-head h2,
	.id-services-head h2, .id-spec-head h2, .id-tech-head h2,
	.id-ind-head h2, .id-stats-head h2 {
		font-size: 40px !important;
	}
	/* Inner-page closing CTA heading: 72–80 → 56 (matches the hero size at
	   this width). Scoped to non-home so Home's CTA is untouched. */
	body:not(.home) .cta-band h2, .sv-cta h2 {
		font-size: 56px !important;
	}
}

/* ── Inner-page banners (heroes) — shorter + smaller image, uniform, 1280 ONLY ──
   Every inner-page banner is a 520px tall block at 1280. Reduce them all to
   a single shorter height and scale the banner visual down to match, so all
   banners stay the same size but smaller. Scaling the whole .sv-hero-visual /
   .pg-hero-visual / .hero-visual (rather than just the photo) keeps the
   composite photo aligned. Bounded to 1025–1280; the frozen 1920 desktop,
   ≤1024 (auto-height heroes) and ≤768 are untouched. About's .hero is now
   included so the reference banner matches the others at this width too. ── */
@media (min-width: 1025px) and (max-width: 1280px) {
	.hero, .sv-hero, .pg-hero, .cd-hero { height: 330px !important; }
	.hero-visual { transform: scale(0.85); transform-origin: right center; }
	.sv-hero-visual { transform: scale(0.85); transform-origin: right center; }
	.pg-hero-visual { transform: scale(0.85); transform-origin: right center; }

	/* Banner → first-section gap: trim the first content section's top padding to
	   50px on inner pages. The :not() chain mirrors the blanket section-padding
	   selector and the leading hero class pushes specificity to (0,8,1), so this
	   out-specifies the 96px !important blanket above at ≤1280. Each selector
	   targets the section directly after an inner banner; home (.lp-hero) is not a
	   sibling key, so its banner→content gap is untouched. Only padding-top. */
	.hero + section:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career),
	.pg-hero + section:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career),
	.sv-hero + section:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career),
	.cd-hero + section:not(.hero):not(.lp-hero):not(.pg-hero):not(.sv-hero):not(.cd-hero):not(.ct-hero):not(.lp-career) {
		padding-top: 50px !important;
	}
}

/* ════════════════════════════════════════════════════════════════════
   1024px TABLET TYPE SCALE (per request)
       H1 42 · H2 36 · H3 32 · H4 24 · H5 20 · P 16
   Scoped to (min-width:769px and max-width:1024px) so it affects ONLY the
   1024 tablet band — the approved/frozen 1280/1440/1536/1920 widths and the
   ≤768 mobile band are untouched. The re-listed class selectors exist to
   beat the higher-specificity !important rules elsewhere (unified hero /
   section-head / sub-heading / paragraph blocks) at this width only.
   Chrome kept as-is (their own rules win): footer text, eyebrows, pills,
   stat numbers, and the <p> feature-card "titles" (.sv-overview-point-title,
   .id-overview-item-title). h5/p generics are non-important so footer
   headings/addresses keep their compact sizes.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
	/* ── Element baseline ── */
	h1 { font-size: 42px !important; line-height: 1.15 !important; }
	h2 { font-size: 36px !important; line-height: 1.2  !important; }
	h3 { font-size: 32px !important; line-height: 1.25 !important; }
	h4 { font-size: 24px !important; line-height: 1.3  !important; }
	h5 { font-size: 20px; line-height: 1.35; }
	p  { font-size: 16px; line-height: 1.6; }

	/* ── H1 (42) — hero titles: beat the unified hero rule (44/48) ── */
	.hero h1, .pg-hero h1, .sv-hero h1, .ct-hero-title, .cd-hero-title, .lp-hero-text h1 {
		font-size: 42px !important; line-height: 1.15 !important;
	}

	/* ── H2 (36) — inner-page section heads (beat the 40 tablet rule) + cd article heads ── */
	.sv-overview-text h2, .sv-value-head h2, .sv-benefits-head h2, .sv-roles-head h2,
	.sv-industries-head h2, .sv-usp-head h2,
	.id-services-head h2, .id-spec-head h2, .id-tech-head h2, .id-ind-head h2, .id-stats-head h2,
	.cd-section h2 {
		font-size: 36px !important; line-height: 1.2 !important;
	}

	/* ── Sub-headings (card / feature / sub-section titles, h3 & h4) → 20px
	   (per request) — matches the 1280 sub-heading size. Overrides the
	   generic h3/h4 scale for these card titles only. ── */
	.mv-body h3, .why-item h3, .lp-service h3, .lp-industry h3, .lp-tech-card h3,
	.in-card-title, .in-approach-item h3, .cr-value h3, .cr-role-title,
	.cr-process-steps h3, .cd-benefit h3, .cd-aside-card h3, .ct-side-card h3,
	.sv-value-item h3, .sv-role h3, .sv-usp-item h3, .id-service h3, .id-tech-card h3,
	.lp-mv h4, .lp-step h4, .sv-industry h4 {
		font-size: 20px !important; line-height: 1.35 !important;
	}

	/* ── P (16) — content paragraphs: beat the ≥769 unified 20 rule ── */
	.hero p, .hero-sub, .sec-head p, .who-content p, .mv-body p, .global-text p,
	.why-head p, .why-item p, .lp-hero-sub, .lp-services-head p, .lp-industries-head p,
	.lp-powered-text p, .lp-process-head p, .lp-mv p, .lp-service p, .lp-industry p,
	.lp-step p, .lp-tech-card p, .sv-hero-sub, .sv-overview-text p, .sv-overview-point-desc,
	.sv-value-item p, .sv-benefits-sub, .sv-roles-sub, .sv-role p, .sv-role-copy p,
	.sv-industries-head p, .sv-usp-item p, .sv-cta p, .pg-hero-sub, .in-card-lead,
	.in-approach-item p, .cr-value p, .cr-roles-sub, .cr-role-lead, .cr-process-steps p,
	.cd-section p, .cd-benefit p, .cd-list li, .ct-hero-sub,
	.id-overview-item-desc, .id-spec-head p, .id-tech-head p, .id-tech-card p,
	.lp-about-lead {
		font-size: 16px !important; line-height: 1.6 !important;
	}

	/* Eyebrows (<p class="eyebrow">) sit inside *-head containers, so the
	   paragraph rules above would bump them to 16. Re-assert their 13px label
	   size (later source order beats the equal-specificity head-paragraph
	   rules) — matches the site's existing eyebrow handling. */
	p.eyebrow {
		font-size: 13px !important; line-height: 1.4 !important;
	}
}

/* ════════════════════════════════════════════════════════════════════
   1024 TABLET — Home hero: use the 1280 two-column banner layout (per
   request). The ≤1024 reflow stacks the hero (heading → button → big square
   mobile image), leaving the photo oversized and cropped. Re-apply the
   desktop/1280 banner in the 1024 band only: fixed-height navy banner, text
   left, photo absolute in the right half at the 1056/878 ratio. Paired with
   the <picture> source change (mobile image now swaps at ≤768) so 1024 loads
   the desktop hero image like 1280. Bounded to 769–1024: ≤768 keeps the
   stacked mobile hero, and ≥1025 (frozen 1280/1440/1536/1920) is untouched.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
	.lp-hero {
		height: 520px;
		padding: 0;
		margin-bottom: 0;
		overflow: hidden;
	}
	.lp-hero-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 60px;
		align-items: center;
		justify-items: stretch;
		text-align: left;
		height: 100%;
	}
	.lp-hero-text { display: block; }
	.lp-hero-text h1 { margin: 0 0 32px; }
	.lp-hero-text > a,
	.lp-hero-text > .btn { align-self: auto; }
	.lp-hero-visual {
		order: 0;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 50%;
		max-width: none;
		height: auto;
		aspect-ratio: 1056 / 878;
		margin: 0;
		align-self: auto;
	}
	.lp-hero-visual img { width: 100%; height: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   1024 TABLET — Home sections: match the 1280 layout (per request).
   The ≤1024 reflow stacked/collapsed several sections; restore the 1280
   multi-column structure in the 769–1024 band only. Type scale unchanged.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
	/* Services 2 → 3 col; Process 2 → 4 col + restore the connector line */
	.lp-services-grid { grid-template-columns: repeat(3, 1fr); }
	.lp-steps { grid-template-columns: repeat(4, 1fr); gap: 16px; }
	.lp-steps::before { display: block; }
	/* Wider step cards so long process titles (e.g. "Candidate Sourcing &
	   Screening") wrap to 2 lines instead of 3, and balance the line breaks. */
	.lp-process-card { padding-left: 20px; padding-right: 20px; }
	.lp-step h4 { text-wrap: balance; }
	/* Permanent Placement + Contract Staffing (posts 6, 21) — keep the process
	   step titles ("We Understand", "We Source"…) on a SINGLE line instead of
	   the balanced 2-line wrap. The 2-word titles fit the 4-col cards at 1024. */
	:is(.postid-6, .postid-21) .lp-step h4 { white-space: nowrap; text-wrap: nowrap; }

	/* About — restore 2-col (text | circular visual) */
	.lp-about-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: center;
	}
	.lp-about-text { display: block; }
	.lp-about-text > .btn { align-self: auto; }
	.lp-about-visual { height: 340px; min-height: 0; display: block; }
	.lp-about-circle,
	.lp-about-visual img { width: 290px; height: 290px; }
	.lp-about-visual img {
		position: absolute; left: 50%; top: 50%;
		transform: translate(-50%, -50%); margin: 0;
	}
	/* Mission / Vision — 20px gap between the icon and the title at the 1024
	   band (base is 18px). Applies to both .lp-mv items consistently. ≤768 and
	   ≥1025 keep the base 18px. */
	.lp-mv-icon { margin-bottom: 20px; }

	/* Powered — restore 2-col (heading + image | cards) */
	.lp-powered-grid { grid-template-columns: 1fr 1fr; }
	.lp-powered-text { display: block; }
	.lp-powered-visual { display: block; height: auto; min-height: 0; }
	.lp-powered-visual img {
		position: absolute; top: 50%; left: 0;
		transform: translateY(-50%); margin: 0;
		max-width: 300px; width: 100%; height: auto;
	}
	body.home .lp-powered-text .btn { margin-bottom: 150px; }
	/* Permanent Placement page ONLY (CPT single, post 6) — add breathing space
	   between the "Powered by Leading Technologies" heading and the image. The
	   generic 1024 rule makes the image position:absolute + vertically centered
	   in a height:auto box that collapses to 0, so the image extends UP into the
	   title and top-margin alone can't separate them. Put the image back in
	   normal flow (position:static) so the box hugs it and the top margin
	   actually creates the gap. Scoped to .postid-6; 769–1024 only. */
	:is(.postid-6, .postid-21) .lp-powered-visual { height: auto; margin-top: 48px; }
	:is(.postid-6, .postid-21) .lp-powered-visual img {
		position: static;
		transform: none;
		top: auto;
		left: auto;
		margin: 0;
	}

	/* Career video banner — the ≤1024 reflow set height:auto, collapsing the
	   banner so the centered play button and the heading overlapped. Restore
	   a fixed banner height: the container's flex justify-content:flex-end
	   (from base) drops the heading + CTA to the bottom, and the play button
	   re-centers — giving clear space between the content and the control. */
	.lp-career { height: 500px; aspect-ratio: auto; }
	.lp-career .container { padding-top: 40px; padding-bottom: 40px; }
	.lp-career-play { top: 50%; }

	/* Industries header — stack as Heading → Sub-content → Button, all
	   left-aligned (button drops below instead of sitting on the right). */
	.lp-industries-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.lp-industries-titles h2 { margin-bottom: 10px; }   /* tighter heading ↔ sub-content */
	.lp-industries-head .btn { white-space: nowrap; }    /* keep the button on one line */
	/* Slightly smaller card icons for better balance (72 → 56). */
	.lp-industry-icon svg { width: 56px; height: 56px; }
	/* Industry card — tighten the gap between the card title and description. */
	.lp-industry h3 { margin-bottom: 4px; }
}

/* ════════════════════════════════════════════════════════════════════
   1024 TABLET — Inner pages (Service / IT / Careers / Industries / Contact
   / Career-detail): match the 1280 layout. Restore the 2-col hero banners
   and the multi-column section grids that the ≤1024 reflow collapsed.
   769–1024 only; type scale unchanged; ≤768 + frozen widths untouched.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
	/* ── About hero (.hero) — restore the 2-col banner like every other
	   inner page (was stacking + centering at ≤1024). Keeps the reference
	   banner consistent with Service / Page heroes across the tablet band. ── */
	.hero { height: 440px; padding: 0; }
	.hero .container { height: 100%; display: flex; align-items: center; }
	.hero-grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		text-align: left;
		align-items: center;
		height: 100%;
		width: 100%;
	}
	.hero-visual { justify-content: flex-end; }
	.hero-banner-img { max-width: 100%; max-height: 340px; width: auto; height: auto; }

	/* ── Service / IT hero — 2-col banner ── */
	.sv-hero { height: 440px; padding: 0; }
	.sv-hero .container { height: 100%; }
	.sv-hero-grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		text-align: left;
		align-items: center;
		height: 100%;
	}
	/* Photo fills the FULL 440px banner height and bleeds flush to the banner's
	   right edge (into the gutter, clipped by .sv-hero overflow:hidden) to match
	   the reference — the circle touches top & bottom with no navy gaps and sits
	   edge-to-edge on the right. height:100% drives the fill; the visual's
	   negative right margin produces the bleed; margin-left:auto + flex-end keep
	   it right-anchored so the copy column stays clear. Square box +
	   object-fit:cover keeps the photo undistorted. ≥1025 / ≤768 untouched;
	   Industries-IT keeps its own higher-specificity contain override. */
	.sv-hero-visual { margin: 0 calc(var(--gutter, 40px) * -1) 0 auto; width: auto; max-width: none; height: 100%; transform: none; justify-content: flex-end; align-items: center; }
	.sv-hero-photo { height: 100%; width: auto; max-width: none; aspect-ratio: 1 / 1; margin-left: auto; }
	.sv-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
	/* Permanent Placement page ONLY (post 6) — CENTER the hero image in its
	   column and FIT it so it's never cropped. The global rule sizes the photo
	   to 440px (full banner height), which is wider than the column at the
	   lower end of the band and gets cropped on the sides; here we cap the photo
	   to the smaller of the column width and the banner height (width:min(100%,
	   440px) + max-height:100%), keep it square, and centre both axes via the
	   flex container. Banner height (440px) is unchanged. */
	/* Match the Careers / Contact (.pg-hero) image treatment: show the photo at
	   its NATURAL aspect (no circular crop, no object-fit cover), capped at
	   340px tall, centred in its column — the clean, balanced look used on those
	   pages. Back in the 2-col grid (not absolutely positioned), so no heading
	   overlap. */
	:is(.postid-6, .postid-21, .postid-22) .sv-hero-visual {
		position: static !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
		transform: none !important;
		justify-content: center !important;
		align-items: center !important;
	}
	:is(.postid-6, .postid-21, .postid-22) .sv-hero-photo {
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: 340px !important;
		aspect-ratio: auto !important;
		margin: 0 auto !important;
		border-radius: 0 !important;
		overflow: visible !important;
		box-shadow: none !important;
	}
	:is(.postid-6, .postid-21, .postid-22) .sv-hero-photo img {
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: 340px !important;
		object-fit: initial !important;
	}
	/* Permanent Placement page ONLY (post 6) — "The Roles We Place" cards:
	   STACK the card so the title + full-width description sit at the top and
	   the icon flows BELOW them (no corner overlap). Column flex; copy full
	   width; icon taken out of absolute corner positioning, pushed to the
	   bottom-right of the card with clear spacing above it. Icon fully visible
	   (no clip). 769–1024 + .postid-6 only. */
	:is(.postid-6, .postid-21) .sv-role { flex-direction: column; align-items: stretch; padding: 14px 9px 8px 12px; }
	:is(.postid-6, .postid-21) .sv-role-copy { max-width: 100%; }
	:is(.postid-6, .postid-21) .sv-role-art {
		position: static;
		width: 200px;
		height: 200px;
		right: auto;
		bottom: auto;
		left: auto;
		top: auto;
		margin-top: 28px;
		align-self: flex-end;
	}

	/* ── Service section grids → 1280 ── */
	.sv-overview--no-image .sv-overview-points,
	.sv-overview--cards .sv-overview-points { grid-template-columns: repeat(3, 1fr); }
	.sv-benefits-grid { grid-template-columns: 1fr 1fr; }

	/* ── Page hero (Careers / Industries / Contact) — 2-col banner like 1280 ── */
	.pg-hero { height: 440px; padding: 0; }
	.pg-hero .container { height: 100%; }
	.pg-hero-grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		text-align: left;
		align-items: center;
		height: 100%;
	}
	.pg-hero-cta { align-self: flex-start; }
	.pg-hero-visual { width: 100%; max-width: none; }
	.pg-hero-visual--photo { justify-content: flex-end; margin: 0; }
	.pg-hero-visual--photo img {
		max-width: 100%; max-height: 340px; width: auto; height: auto; margin: 0;
	}

	/* ── Career-detail hero — left-aligned banner like 1280 ── */
	.cd-hero { height: 440px; padding: 0; text-align: left; }
	.cd-hero-title { text-align: left; }
	.cd-hero-meta { grid-template-columns: repeat(4, max-content); justify-content: start; justify-items: start; column-gap: 28px; }
}

/* ════════════════════════════════════════════════════════════════════
   INNER-PAGE BANNERS — force LEFT alignment when stacked (per request)
   Headings, sub-content and buttons stay left-aligned on tablet/mobile
   instead of the previous centered stack, so every inner banner matches
   the reference (.hero) at all widths. Desktop and the 769–1024 two-col
   bands are already left, so these !important rules are harmless there
   and only flip the genuinely-stacked states. Placed last to win source
   order. ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	/* Copy + buttons — left on every inner hero. */
	.hero-grid, .pg-hero-grid, .sv-hero-grid { text-align: left !important; }
	.cd-hero, .cd-hero-title { text-align: left !important; }
	.hero-text, .hero p, .hero-sub,
	.pg-hero-copy, .pg-hero-sub,
	.sv-hero-copy, .sv-hero-sub,
	.ct-hero-title, .ct-hero-sub { text-align: left !important; }
	/* Lead / sub text — drop the auto-centering margins. */
	.hero p, .hero-sub, .pg-hero-sub, .sv-hero-sub {
		margin-left: 0 !important; margin-right: 0 !important;
	}
	/* Buttons / actions — left. */
	.hero-actions { justify-content: flex-start !important; }
	.pg-hero-cta, .sv-hero-cta { align-self: flex-start !important; }

	/* About (.hero) stacks across the whole ≤1024 range — left-align its
	   composite image here (pg-/sv- stay 2-col until ≤768, handled below). */
	.hero-visual { justify-content: flex-start !important; }
	.hero-banner-img { margin-left: 0 !important; margin-right: auto !important; }
}

/* pg-hero / sv-hero only stack at ≤768 — left-align their photo there,
   leaving the 769–1024 two-col banners with the photo on the right. */
@media (max-width: 768px) {
	.pg-hero-visual--photo, .sv-hero-visual {
		justify-content: flex-start !important;
		margin-left: 0 !important; margin-right: auto !important;
	}
	.pg-hero-visual--photo img,
	.sv-hero-photo { margin-left: 0 !important; margin-right: auto !important; }
}

/* ════════════════════════════════════════════════════════════════════
   TABLET-PORTRAIT (481–768) SERVICE HERO — match the stacked reference:
   heading + CTA stay left at the top, then a LARGER circular photo below,
   pushed to the right so it bleeds off the banner's right edge (clipped by
   .sv-hero overflow:hidden). This intentionally overrides the ≤768
   force-left !important rules ABOVE, but only for 481–768 — the ≤480 phone
   pass keeps its left-aligned photo, and the ≥769 two-column band is
   untouched. Placed last so it wins source order. Industries-IT keeps its
   own higher-specificity contain override.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {
	.sv-hero-grid { gap: 28px; }
	.sv-hero-visual {
		width: 100%;
		max-width: 380px;
		margin-left: auto !important;
		margin-right: calc(var(--gutter, 24px) * -1) !important;
		justify-content: flex-end !important;
	}
	.sv-hero-photo {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		margin-left: auto !important;
		margin-right: 0 !important;
	}
	.sv-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
}

/* ════════════════════════════════════════════════════════════════════
   HOME HERO (.lp-hero) — 2-COLUMN BANNER AT 769–1024 (matches the Service
   hero / the reference). Overrides the ≤1024 "stack" layout for this band
   only: copy (heading + CTA) on the left, the circular 572×480 banner image
   filling the 480px banner top-to-bottom on the right. The image is swapped
   to hero-banner-1024.png via the <picture> <source> (769–1280) in
   front-page.php. Bounded 769–1024 → ≤768 stays stacked (mobile) and ≥1025
   is unchanged. Placed last so it wins source order over the stack block.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
	.lp-hero { height: 480px !important; padding: 0 !important; margin-bottom: 0 !important; }
	.lp-hero .container { height: 100%; position: relative; }
	.lp-hero-grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		flex-direction: row;
		align-items: center !important;
		justify-items: stretch;
		text-align: left !important;
		gap: 40px;
		height: 100% !important;
	}
	.lp-hero-text { display: block !important; }
	.lp-hero-text h1 { order: 0; font-size: 40px; margin: 0 0 24px; max-width: 100%; }
	.lp-hero-text > a,
	.lp-hero-text > .btn { order: 0; align-self: auto; }
	/* Image: absolute over the right half, full banner height, bled flush to
	   the right edge (clipped by .lp-hero overflow:hidden) — same treatment as
	   the Service hero. aspect-ratio 572/480 matches the swapped image. */
	.lp-hero-visual {
		order: 0;
		position: absolute !important;
		left: auto;
		right: calc(var(--gutter, 40px) * -1);
		top: 50%;
		transform: translateY(-50%) !important;
		align-self: auto;
		width: auto !important;
		max-width: none;
		height: 100% !important;
		margin: 0 !important;
		aspect-ratio: 572 / 480;
	}
	.lp-hero-visual img { width: 100%; height: 100%; position: absolute; left: -39px; }
}

/* ════════════════════════════════════════════════════════════════════
   ABOUT US PAGE — make the 1024 view mirror the 1920 desktop layout.
   The global ≤1024 rules (styles.css) stack several About sections to a
   single column; restore the desktop multi-column structure here. Scoped to
   .page-template-page-about and bounded 769–1024 → no other page and no
   other breakpoint is affected. (.hero and .impact already have their own
   769–1024 desktop-style rules; .why-choose keeps the 2-col 1024 layout you
   tuned earlier.)
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
	/* Story (.who) — 2-column like desktop (was stacked to 1fr). */
	.page-template-page-about .who-grid { grid-template-columns: 1fr 1fr; gap: 60px; }
	/* Mission / Vision — Mission | divider | Vision like desktop
	   (was stacked to 1fr with the divider hidden). */
	.page-template-page-about .mv-grid { grid-template-columns: 1fr auto 1fr; gap: 48px; }
	.page-template-page-about .mv-divider { display: block; }
	/* Global Presence — 2-column (text | map+stats) like desktop
	   (was stacked to 1fr). */
	.page-template-page-about .global-grid { grid-template-columns: 1.15fr 0.85fr; gap: 60px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICE DETAIL PAGES (CPT single-mp_service) — 425/428 MOBILE REFINEMENTS
   Approved first on Permanent Placement, then rolled out to ALL service
   pages (Permanent Placement, Contract Staffing, Project-Based Staffing) for
   a uniform UX. Scoped to body.single-mp_service (the CPT slug — stable
   across environments) so the Industry detail pages (single-mp_industry,
   which also use .sv-* classes) and every non-service page stay untouched.
   Phone tier ≤480 only. ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
	/* "Your Trusted IT Staffing Partner" overview sub-headings (Pre-Vetted
	   Talent / Proven Expertise / Lasting Value): set to 20px while keeping the
	   1920 desktop weight (600 semibold, per service.css). They were flattened
	   to 14px/400 by the unified mobile body scale, which killed the hierarchy
	   above the 14px description. Family / colour / alignment unchanged. */
	body.single-mp_service .sv-overview-point-title { font-size: 20px !important; font-weight: 600 !important; }

	/* "The Roles We Place" — turn the auto-advancing transform-paged slider
	   into a manual touch-swipe carousel (matches the Services/Powered swipe
	   pattern). The track becomes the horizontal scroll container; its JS
	   transform is pinned to none so paging can't offset the scroll position,
	   and the JS autoplay is disabled on PP phones (about.js) so the timer
	   doesn't run. Cards snap into place. */
	body.single-mp_service .sv-roles-track {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		transform: none !important;
	}
	body.single-mp_service .sv-roles-track::-webkit-scrollbar { display: none; }
	body.single-mp_service .sv-roles-track > .sv-role { scroll-snap-align: start; }

	/* "Powered by Leading Technologies" cards (SAP / Oracle / Cloud) — match the
	   About-page static-card approach: stack them single-column full-width
	   instead of the horizontal swipe carousel. Drop the carousel's right-edge
	   bleed (negative margin) and scroll padding. */
	body.single-mp_service .lp-powered-cards {
		flex-direction: column;
		overflow-x: visible;
		margin-right: 0;
		padding-right: 0;
		gap: 16px;
	}
	body.single-mp_service .lp-powered-cards > .lp-tech-card {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		scroll-snap-align: none;
	}

	/* "Our Hiring Process" — match the Home "Our Proven Delivery Process"
	   mobile layout: a single-column stack of the 4 steps. Non-home pages get a
	   horizontal swipe carousel (body:not(.home) .lp-steps); override it back to
	   Home's 1-column grid (gap 28px) on PP only. Same source order beats the
	   equal-specificity carousel rule. Step content/markup unchanged. */
	body.single-mp_service .lp-steps {
		display: grid;
		grid-template-columns: 1fr;
		gap: 28px;
		overflow-x: visible;
		overflow-y: visible;
		padding-bottom: 0;
		scroll-snap-type: none;
	}
	body.single-mp_service .lp-step {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		scroll-snap-align: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER — copyright to the bottom + centred, and brand row (logo left / icons
   right). ALL pages, phone tier ≤480 (covers 425 AND 428). The copyright sits
   nested in .foot-brand, so it can't be reordered to the footer bottom with CSS
   alone. footer.php also outputs a duplicate .foot-copyright--bottom after
   .foot-grid; it's hidden at every width by the base rule below and only
   revealed (with the in-brand original hidden) at ≤480. 481px and larger keep
   the original placement untouched.
   ═══════════════════════════════════════════════════════════════════ */
.foot-copyright--bottom { display: none; }

/* Scoped to ≤768 (phones/phablets): bottom-CENTRED copyright + brand row. The
   769–1280 band is owned by the other session's footer block below (bottom
   LEFT-aligned copyright), per the user's conflict resolution — so this stops
   at 768 to avoid fighting it. */
@media (max-width: 768px) {
	.foot-brand .foot-copyright { display: none; }
	.foot-copyright--bottom {
		display: block;
		text-align: center;
		margin: 24px 0 0;
	}

	/* Brand row — logo on the left, social block on the right, vertically
	   centred on a single row (was a vertical stack). The "Social Network"
	   label is kept (content unchanged), sitting right-aligned above the icons.
	   Spacing between the two sides via justify-content:space-between + gap. */
	.foot-brand {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}
	.foot-brand-bottom {
		width: auto;
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 6px;
		padding-top: 0;       /* drop the base 4px so the block hugs the icons */
		margin-top: 0;        /* was margin-top:auto (footer stack) */
	}
	/* Hide the "Social Network" label at 425 so the icons sit perfectly
	   vertically centred with the logo on the single row (user choice). */
	.foot-brand-bottom .foot-social-label { display: none; }
	.foot-brand .foot-social { margin: 0; justify-content: flex-end; }
}

/* PP "Our Hiring Process" matches Home's "Our Proven Delivery Process" — the
   earlier inline "01 We Understand" override was reverted (per the user), so the
   single-column stacked rules from the body.single-mp_service block above (≤480)
   render it identically to Home: number chip on top, 2-line title, description.
   (The step titles keep the harmless "We <br/>X" markup space — invisible since
   the <br> now shows and the trailing space is trimmed at the line break.) */

/* ════════════════════════════════════════════════════════════════════
   CAREERS PAGE — "Open Roles / We are Hiring" cards in a 2-column ROW
   layout at 1024 (they're a full-width vertical stack by default). Scoped
   to .page-template-page-careers and bounded 769–1024 → no other page or
   breakpoint affected. Card size/typography/styling unchanged.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
	.page-template-page-careers .cr-roles-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		align-items: start;
	}
}

/* ════════════════════════════════════════════════════════════════════
   CAREERS PAGE — remove the big gap between the "We are Hiring" heading
   and the first open-role card at the 1280 laptop band (user request,
   1280 only). Base = 56px sec-head margin-bottom + 56px list margin-top
   = 112px; collapse to a tight 24px. Scoped to .page-template-page-careers
   and 1025–1280: ≤1024 and ≥1281 keep the default spacing.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1280px) {
	.page-template-page-careers .cr-roles .sec-head { margin-bottom: 24px; }
	.page-template-page-careers .cr-roles-list { margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   CAREER DETAIL hero (page-career-detail) — left-align the meta rows on phones
   The LOCATION / TYPE / LEVEL / POSTED grid is centred via justify-items:center
   (≤1024 rule), which on mobile leaves it floating in the middle while the
   eyebrow, heading and Apply button sit at the left gutter. Override to start so
   the whole hero reads left-aligned. ≤480, career-detail pages only.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
	.page-template-page-career-detail .cd-hero-meta { justify-items: start; }
}

/* ════════════════════════════════════════════════════════════════════
   CONTACT PAGE — "Our offices" maps side-by-side (2-col) at 1024 instead of
   the stacked 1-col (the ≤1024 rule collapses them). Direct contacts + Hours
   stay full-width above. Scoped to .page-template-page-contact, 769–1024 only.
   Map embed is width:100% height:240px → no distortion in the narrower cols.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
	.page-template-page-contact .ct-offices-grid {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
}

/* ════════════════════════════════════════════════════════════════════
   HOME PAGE — hide the "A Trusted IT Staffing Partner…" (.lp-about) circular
   image at the 425 phone tier (user request). .lp-about-visual is home-only,
   so no other page is affected; bounded ≤425.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 425px) {
	body.home .lp-about-visual { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER — keep the 4-column desktop layout across the 1025–1280 laptop band
   (brand · Quick Links · Solutions · Contact, all in one row) to match the
   reference image. Tighter gap + a capped brand logo so the four columns fit
   at this width without overflow. Footer markup/links unchanged; layout only.
   Scoped to 1025–1280: ≤1024 keeps its stacked mobile footer, ≥1281 the base.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1280px) {
	.foot-grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
		gap: 40px;
	}
	.foot-brand .logo { width: 100%; max-width: 320px; }
}

/* Footer copyright-to-bottom is MOBILE-ONLY (≤768, the block above). The tablet
   range (769–1280) was reverted per the user — the copyright stays in its
   original in-brand position there. (NOTE: a concurrent session added the
   769–1280 bottom/left-aligned block here; if it reappears, it was re-added by
   that session and should be removed again to keep this change mobile-only.) */

/* ═══════════════════════════════════════════════════════════════════
   HOME — hide the "A Trusted IT Staffing Partner For The GCC and Beyond"
   about-section circular image across all mobile responsive widths (≤1024,
   where the section stacks and the hamburger nav is active). Home only
   (body.home); desktop keeps the image. The about column is a flex stack, so
   display:none collapses it with no leftover gap (lead → mission/vision → CTA).
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	body.home .lp-about-visual { display: none; }
}