/* MAX Sections: Scroll-Synced Frames + Proof Collage
   Design tokens from the "Why Clients Choose Max" handoff. */

.max-sf,
.max-pc {
	--max-ink: #16150f;
	--max-body: #4d4b43;
	--max-muted: #8a867a;
	--max-accent: #e8b931;
	--max-offwhite: #f5f4f0;
	--max-border: #dcd9d0;
	--max-panel-muted: #b5b1a4;
	--max-panel-text: #f5f3ec;
}

/* ============ shared: text column ============ */
.max-sf__text,
.max-pc__text {
	padding: 96px 72px 120px;
}

/* Runway: on desktop the frames column needs enough scroll left after the
   last point crosses the 45% activation line that the sticky panel is still
   pinned when frame 07 fades in. Without this, a section near the bottom of
   the page un-sticks early and the photo scrolls off mid-crossfade. */
@media (min-width: 961px) {
	.max-sf__text {
		padding-bottom: min(72vh, 800px);
	}
}

.max-sf__heading,
.max-pc__heading {
	font-weight: 700;
	font-size: 40px;
	line-height: 1.1;
	color: var(--max-ink) !important;
	margin: 0 0 56px;
}

.max-sf__point,
.max-pc__point {
	margin: 0 0 56px;
}

.max-sf__point-title,
.max-pc__point-title {
	font-weight: 600;
	font-size: 20.5px;
	line-height: 1.3;
	color: var(--max-ink) !important;
	margin: 0 0 12px;
}

.max-sf__point-body,
.max-pc__point-body {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--max-body) !important;
	margin: 0;
}

/* ============ shared: placeholder photo ============ */
.max-ph {
	background: repeating-linear-gradient(45deg, #eceae4 0 14px, #f5f4f0 14px 28px);
	border: 1px solid var(--max-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.max-ph__label {
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: var(--max-muted) !important;
	letter-spacing: 0.04em;
}

.max-ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* =====================================================
   Variant 1a — Scroll-Synced Frames (.max-sf)
   ===================================================== */
.max-sf {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #fff;
}

.max-sf__visual {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	background: var(--max-ink);
	overflow: hidden;
}

.max-sf__layer {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.max-sf__layer.is-active {
	opacity: 1;
}

.max-sf__layer-photo {
	margin: 56px 56px 0;
	flex: 1 1 auto;
	min-height: 0;
}

.max-sf__layer-photo.max-ph {
	background: repeating-linear-gradient(45deg, #24221a 0 14px, #1c1a13 14px 28px);
	border-color: #2e2c24 !important;
}

.max-sf__layer-photo .max-ph__label {
	color: var(--max-panel-muted) !important;
}

.max-sf__caption {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 28px 56px 48px;
	flex: 0 0 auto;
}

.max-sf__num {
	font-weight: 700;
	font-size: 64px;
	line-height: 1;
	color: var(--max-accent) !important;
}

.max-sf__caption-title {
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--max-panel-text) !important;
}

.max-sf__progress {
	position: absolute;
	top: 0;
	left: 56px;
	height: 4px;
	width: 0;
	background: var(--max-accent);
	transition: width 0.4s ease;
	z-index: 2;
}

.max-sf__point-title {
	color: var(--max-muted) !important;
	transition: color 0.3s ease;
}

.max-sf__point.is-active .max-sf__point-title {
	color: var(--max-ink) !important;
}

/* per-point inline image, mobile only */
.max-sf__point-photo {
	display: none;
}

/* =====================================================
   Variant 1c — Proof Collage (.max-pc)
   ===================================================== */
.max-pc {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #fff;
}

.max-pc__visual {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	background: var(--max-offwhite);
	overflow: hidden;
	padding: 72px 48px;
	display: flex;
	align-items: center;
}

.max-pc__collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	width: 100%;
}

.max-pc__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	will-change: transform;
}

.max-pc__tile {
	flex: 0 0 auto;
}

/* fallback so an empty placeholder tile never collapses */
.max-pc__tile.max-ph {
	min-height: 180px;
}

.max-pc__stat {
	padding: 28px;
}

.max-pc__stat-value {
	font-weight: 700;
	font-size: 44px;
	line-height: 1.05;
	margin: 0 0 8px;
}

.max-pc__stat-text {
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

.max-pc__stat--dark {
	background: var(--max-ink);
}

.max-pc__stat--dark .max-pc__stat-value {
	color: var(--max-accent) !important;
}

.max-pc__stat--dark .max-pc__stat-text {
	color: var(--max-panel-muted) !important;
}

.max-pc__stat--accent {
	background: var(--max-accent);
}

.max-pc__stat--accent .max-pc__stat-value,
.max-pc__stat--accent .max-pc__stat-text {
	color: var(--max-ink) !important;
}

.max-pc__stat--accent .max-pc__stat-text {
	font-weight: 500;
}

.max-pc__stat--outline {
	background: #fff;
	border: 1px solid var(--max-border);
}

.max-pc__stat--outline .max-pc__stat-value {
	color: var(--max-ink) !important;
}

.max-pc__stat--outline .max-pc__stat-text {
	color: var(--max-body) !important;
}

/* =====================================================
   Variant 2a — Editorial Intro with photo overlap (.max-gi)
   ===================================================== */
.max-gi {
	--max-ink: #16150f;
	--max-body: #4d4b43;
	--max-muted: #8a867a;
	--max-accent: #e8b931;
	--max-border: #dcd9d0;
	--max-gi-height: 760px;

	position: relative;
	background: #fff;
	height: var(--max-gi-height);
}

.max-gi__photo {
	position: absolute;
	top: 80px;
	right: 0;
	bottom: 80px;
	left: 44%;
	overflow: hidden;
}

.max-gi__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.max-gi__photo--placeholder {
	background: repeating-linear-gradient(-45deg, #e6e3db 0 14px, #eceae3 14px 28px);
	border: 1px solid var(--max-border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.max-gi__chip {
	position: absolute;
	left: calc(44% + 48px);
	bottom: 44px;
	z-index: 2;
	background: var(--max-ink);
	color: #f5f3ec !important;
	padding: 18px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.max-gi__chip-bar {
	width: 4px;
	height: 36px;
	background: var(--max-accent);
	flex: 0 0 auto;
}

.max-gi__chip-title {
	display: block;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
}

.max-gi__chip-meta {
	display: block;
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #9a968a !important;
	margin-top: 3px;
}

.max-gi__text {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 96px;
	box-sizing: border-box;
	background: linear-gradient(90deg, #ffffff 82%, rgba(255, 255, 255, 0));
}

.max-gi__eyebrow {
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b8860b !important;
	margin: 0 0 20px;
}

.max-gi__heading {
	font-weight: 700;
	font-size: 44px;
	line-height: 1.12;
	color: var(--max-ink) !important;
	margin: 0 0 24px;
}

.max-gi__body {
	font-size: 16px;
	line-height: 1.8;
	color: var(--max-body) !important;
}

.max-gi__body p {
	margin: 0 0 1em;
}

.max-gi__body p:last-child {
	margin-bottom: 0;
}

.max-gi__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin-top: 36px;
}

.max-gi__stat-value {
	font-weight: 700;
	font-size: 30px;
	line-height: 1.2;
	color: var(--max-ink) !important;
}

.max-gi__stat-label {
	font-size: 13px;
	color: var(--max-muted) !important;
	margin-top: 2px;
}

@media (max-width: 960px) {
	.max-gi {
		height: auto;
	}

	.max-gi__text {
		position: static;
		width: 100%;
		padding: 48px 24px;
		background: none;
	}

	.max-gi__heading {
		font-size: 32px;
	}

	.max-gi__photo {
		position: relative;
		inset: auto;
		left: 0;
		aspect-ratio: 16 / 10;
	}

	.max-gi__photo--placeholder {
		aspect-ratio: 16 / 10;
	}

	.max-gi__chip {
		left: 24px;
		bottom: 24px;
	}
}

/* =====================================================
   Variant 3a — Company Overview / Record Marquee (.max-co)
   ===================================================== */
.max-co {
	--max-ink: #16150f;
	--max-body: #4d4b43;
	--max-muted: #8a867a;
	--max-band-muted: #9a968a;
	--max-accent: #e8b931;
	--max-accent-hover: #f5c94a;
	--max-offwhite: #f5f4f0;
	--max-border: #dcd9d0;
	--max-co-top: 560px;

	/* Photo duo geometry, all proportional so the pair keeps its composition
	   at any container width (the handoff's fixed px assumed a 1280 frame). */
	--max-co-pad: 8%;
	--max-co-shift-x: 25%;
	--max-co-shift-y: 22%;
	--max-co-container: 1320px;
	--max-co-gutter: 24px;
	--max-badge-size: 104px;

	background: #fff;
	/* Type and spacing below size against this box, not the viewport, so the
	   section reads correctly in a narrow column as well as full-bleed. */
	container-type: inline-size;
}

.max-co__top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: var(--max-co-top);
}

/* Boxed: content lines up with the site's global container while the band
   background still bleeds the full width of the section. */
.max-co--boxed .max-co__top,
.max-co--boxed .max-co__band-inner {
	max-width: var(--max-co-container);
	margin-inline: auto;
	padding-inline: var(--max-co-gutter);
	box-sizing: border-box;
	width: 100%;
}

/* Bleed: the photo panel runs edge to edge, and the text column is pulled in
   by whatever sits outside the container so its copy still lands on the
   container's right edge. */
.max-co--bleed .max-co__top {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.max-co--bleed .max-co__text {
	margin-right: calc(max(0px, (100vw - var(--max-co-container)) / 2) + var(--max-co-gutter));
	margin-right: calc(max(0px, (100cqw - var(--max-co-container)) / 2) + var(--max-co-gutter));
}

/* ---- overlapping photo duo ---- */
.max-co__photos {
	position: relative;
	background: var(--max-offwhite);
	overflow: hidden;
}

.max-co__photo {
	position: absolute;
	overflow: hidden;
}

.max-co__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.max-co__photo--back {
	top: var(--max-co-pad);
	left: var(--max-co-pad);
	right: calc(var(--max-co-pad) + var(--max-co-shift-x));
	bottom: calc(var(--max-co-pad) + var(--max-co-shift-y));
}

.max-co__photo--front {
	top: calc(var(--max-co-pad) + var(--max-co-shift-y));
	left: calc(var(--max-co-pad) + var(--max-co-shift-x));
	right: var(--max-co-pad);
	bottom: var(--max-co-pad);
	border: 4px solid #fff;
	box-shadow: 0 8px 24px rgba(22, 21, 15, 0.14);
}

.max-co__photo--placeholder {
	background: repeating-linear-gradient(-45deg, #e6e3db 0 14px, #eceae3 14px 28px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.max-co__photo--back.max-co__photo--placeholder {
	border: 1px solid var(--max-border);
}

.max-co__photo--front.max-co__photo--placeholder {
	background: repeating-linear-gradient(-45deg, #dedbd2 0 14px, #e6e3da 14px 28px);
}

/* ---- overview text ---- */
/* Each rule states the design's fixed value first, then the container-relative
   version. Browsers without container queries drop the cq line and keep the
   fixed one, so nothing breaks. */
.max-co__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 88px 0 72px;
	padding: 0 clamp(24px, 6.9cqw, 88px) 0 clamp(24px, 5.6cqw, 72px);
}

/* No font-family here: the eyebrow inherits the theme's heading font so it
   matches the rest of the site out of the box. The mono label treatment from
   the design is opt-in via the modifier below. */
.max-co__eyebrow {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b8860b !important;
	margin: 0 0 20px;
}

/* Design's monospace label treatment (opt-in). */
.max-co__eyebrow--mono {
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 12px;
}

.max-co__body {
	font-size: 16px;
	font-size: clamp(14.5px, 1.25cqw, 17.5px);
	line-height: 1.8;
	color: var(--max-body) !important;
}

.max-co__body p {
	margin: 0 0 18px;
}

.max-co__body p:last-child {
	margin-bottom: 0;
}

.max-co__body strong {
	color: var(--max-ink) !important;
}

/* ---- certification strip ---- */
/* Visual twin of .max-wc__badge in Why Choose. Kept as its own namespace so the
   two widgets' Elementor style controls stay independent. */
.max-co__cert-row {
	/* Gutter here as well as in the boxed rule, so the full-width variant does
	   not sit flush against the viewport edge. */
	padding: 32px var(--max-co-gutter) 0;
}

.max-co--boxed .max-co__cert-row {
	max-width: var(--max-co-container);
	margin-inline: auto;
	padding-inline: var(--max-co-gutter);
	box-sizing: border-box;
	width: 100%;
}

.max-co__cert {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	background: #eef2f9;
	border: 1px solid #d3deee;
	border-radius: 8px;
	padding: 18px 22px;
	box-sizing: border-box;
}

/* Below the copy: same box as .max-co__body, so it tracks the copy width at
   every breakpoint. width/max-width are explicit rather than relying on flex
   stretch, so nothing upstream can narrow it. */
.max-co__text .max-co__cert {
	margin-top: 28px;
	width: 100%;
	max-width: 100%;
	align-self: stretch;
}

/* Fixed top-row height would clip the strip, so relax it to a minimum. */
.max-co--cert-text .max-co__top {
	height: auto;
	min-height: var(--max-co-top);
}

.max-co__cert-img {
	width: var(--max-co-cert, 64px);
	height: var(--max-co-cert, 64px);
	flex: none;
}

/* Scoped through .max-co__cert to outrank Elementor's `.elementor img { height:
   auto; max-width: 100% }`, which matches at the same specificity. */
.max-co__cert .max-co__cert-img img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	display: block;
}

.max-co__cert-img--placeholder {
	background: repeating-linear-gradient(-45deg, #dfe6f2 0 8px, #e9eef7 8px 16px);
	border: 1px solid #d3deee;
	box-sizing: border-box;
}

.max-co__cert-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.max-co__cert-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #2c303b !important;
}

.max-co__cert-sub {
	font-size: 13.5px;
	line-height: 1.35;
	color: #5c6675 !important;
}

/* ---- dark record band ---- */
/* Band = full-width background only; the inner wrapper carries the layout so
   the content can align to the site container. */
.max-co__band {
	background: var(--max-ink);
	padding: 56px 0;
}

.max-co__band-inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 40px;
}

.max-co__badge {
	width: var(--max-badge-size);
	height: var(--max-badge-size);
	border: 2px solid var(--max-badge-color, var(--max-accent));
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--max-badge-color, var(--max-accent)) !important;
	flex: 0 0 auto;
}

.max-co__badge-top {
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
}

.max-co__badge-bottom {
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-top: 4px;
}

.max-co__band-label {
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 12px;
	font-size: clamp(11px, 0.94cqw, 13px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--max-band-muted) !important;
	margin: 0 0 12px;
}

.max-co__band-text {
	font-weight: 700;
	font-size: 28px;
	font-size: clamp(19px, 2.19cqw, 30px);
	line-height: 1.3;
	color: var(--max-band-text, #f5f3ec) !important;
	margin: 0;
}

/* <mark> is the editor-friendly way to accent part of the statement */
.max-co__band-text mark {
	background: none;
	color: var(--max-band-highlight, var(--max-accent)) !important;
}

.max-co__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--max-accent);
	color: var(--max-btn-text, var(--max-ink)) !important;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	font-size: clamp(12.5px, 1.1cqw, 15px);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 16px 28px;
	padding: clamp(13px, 1.25cqw, 18px) clamp(20px, 2.19cqw, 30px);
	transition: background 0.2s ease;
	white-space: nowrap;
}

.max-co__btn:hover,
.max-co__btn:focus {
	background: var(--max-accent-hover);
	color: var(--max-btn-text, var(--max-ink)) !important;
}

.max-co__btn-arrow {
	font-size: 16px;
}

/* Stacking is driven by the section's own width (container query) so the
   layout is right even when the widget sits in a narrow column. The identical
   @media block below is the fallback for browsers without container queries. */
@container (max-width: 960px) {
	.max-co__top {
		display: block;
		height: auto;
	}

	.max-co__text {
		padding: 48px 24px;
		margin-right: 0;
	}

	/* drop the overlap: two stacked full-width photos */
	.max-co__photos {
		background: none;
		padding: 0 24px 48px;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.max-co__photo {
		position: relative;
		inset: auto;
		aspect-ratio: 16 / 10;
	}

	.max-co__band-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 24px;
	}

	.max-co__cert-row {
		padding: 0 24px 48px;
	}

	.max-co__text .max-co__cert {
		margin-top: 24px;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 960px) {
		.max-co__top {
			display: block;
			height: auto;
		}

		.max-co__text {
			padding: 48px 24px;
			margin-right: 0;
		}

		.max-co__photos {
			background: none;
			padding: 0 24px 48px;
			display: flex;
			flex-direction: column;
			gap: 20px;
		}

		.max-co__photo {
			position: relative;
			inset: auto;
			aspect-ratio: 16 / 10;
		}

		.max-co__band-inner {
			grid-template-columns: 1fr;
			justify-items: center;
			text-align: center;
			gap: 24px;
		}

		.max-co__cert-row {
			padding: 0 24px 48px;
		}

		.max-co__text .max-co__cert {
			margin-top: 24px;
		}

		.max-co__band {
			padding: 40px 0;
		}

		.max-co__band-text {
			font-size: 22px;
		}
	}
}

/* ============ responsive: below 960px un-stick & stack ============ */
@media (max-width: 960px) {
	.max-sf,
	.max-pc {
		grid-template-columns: 1fr;
	}

	/* 1a: drop the sticky panel entirely, show each point's image inline */
	.max-sf__visual {
		display: none;
	}

	.max-sf__point-photo {
		display: block;
		aspect-ratio: 16 / 10;
		margin: 0 0 20px;
	}

	/* 1c: collage becomes a static 2-col grid above the text */
	.max-pc__visual {
		position: static;
		height: auto;
		padding: 48px 24px;
	}

	.max-pc__col {
		transform: none !important;
	}

	.max-sf__text,
	.max-pc__text {
		padding: 64px 24px 80px;
	}

	.max-sf__heading,
	.max-pc__heading {
		font-size: 32px;
	}
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
	.max-sf__layer,
	.max-sf__progress,
	.max-sf__point-title {
		transition: none;
	}

	.max-pc__col {
		transform: none !important;
	}
}

/* =====================================================
   Variant 4a — Safety & Credentials (.max-sc)
   ===================================================== */
.max-sc {
	--max-ink: #16150f;
	--max-body: #4d4b43;
	--max-muted: #8a867a;
	--max-accent: #e8b931;
	--max-border: #dcd9d0;
	--max-sc-height: 720px;
	--max-sc-container: 1320px;
	--max-sc-gutter: 24px;

	background: #fff;
	container-type: inline-size;
}

.max-sc__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: var(--max-sc-height);
}

/* Photo on the left: swap the visual order without changing the DOM, so the
   text still comes first for screen readers. */
.max-sc--media-left .max-sc__text {
	order: 2;
}

.max-sc--media-left .max-sc__photo {
	order: 1;
}

/* Boxed: text aligns to the site container. */
.max-sc--boxed .max-sc__grid {
	max-width: var(--max-sc-container);
	margin-inline: auto;
	padding-inline: var(--max-sc-gutter);
	box-sizing: border-box;
}

/* Bleed: the photo runs to the screen edge while the text keeps its
   container alignment. */
.max-sc--bleed .max-sc__grid {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.max-sc--bleed .max-sc__text {
	margin-left: calc(max(0px, (100vw - var(--max-sc-container)) / 2) + var(--max-sc-gutter));
	margin-left: calc(max(0px, (100cqw - var(--max-sc-container)) / 2) + var(--max-sc-gutter));
}

.max-sc--bleed.max-sc--media-left .max-sc__text {
	margin-left: 0;
	margin-right: calc(max(0px, (100vw - var(--max-sc-container)) / 2) + var(--max-sc-gutter));
	margin-right: calc(max(0px, (100cqw - var(--max-sc-container)) / 2) + var(--max-sc-gutter));
}

/* ---- text column ---- */
.max-sc__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 88px 72px 72px 0;
	box-sizing: border-box;
}

/* Inherits the theme font by default; the mockup's mono label is opt-in. */
.max-sc__eyebrow {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b8860b !important;
	margin: 0 0 20px;
}

.max-sc__eyebrow--mono {
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 12px;
}

.max-sc__heading {
	font-weight: 700;
	font-size: 44px;
	font-size: clamp(28px, 3.44cqw, 46px);
	line-height: 1.12;
	color: var(--max-ink) !important;
	margin: 0 0 24px;
}

.max-sc__body {
	font-size: 16px;
	font-size: clamp(14.5px, 1.25cqw, 17.5px);
	line-height: 1.8;
	color: var(--max-body) !important;
}

.max-sc__body p {
	margin: 0 0 18px;
}

.max-sc__body p:last-child {
	margin-bottom: 0;
}

.max-sc__body strong {
	color: var(--max-ink) !important;
}

/* ---- certification cards ---- */
.max-sc__certs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 36px;
}

.max-sc__cert {
	flex: 1 1 120px;
	border: 1px solid var(--max-border);
	padding: 14px 20px;
	box-sizing: border-box;
}

.max-sc__cert-name {
	display: block;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.25;
	color: var(--max-ink) !important;
}

.max-sc__cert-label {
	display: block;
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--max-muted) !important;
	margin-top: 4px;
}

/* ---- photo + caption chip ---- */
.max-sc__photo {
	position: relative;
	overflow: hidden;
	min-height: 320px;
}

.max-sc__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.max-sc__photo--placeholder {
	background: repeating-linear-gradient(-45deg, #e6e3db 0 14px, #eceae3 14px 28px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.max-sc__chip {
	position: absolute;
	left: 0;
	bottom: 56px;
	z-index: 2;
	background: var(--max-ink);
	padding: 18px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: calc(100% - 24px);
}

.max-sc--media-left .max-sc__chip {
	left: auto;
	right: 0;
}

.max-sc__chip-bar {
	width: 4px;
	height: 36px;
	background: var(--max-accent);
	flex: 0 0 auto;
}

.max-sc__chip-title {
	display: block;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: #f5f3ec !important;
}

.max-sc__chip-meta {
	display: block;
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #9a968a !important;
	margin-top: 3px;
}

/* ---- stack below 960px (container-based, media query as fallback) ---- */
@container (max-width: 960px) {
	.max-sc__grid {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.max-sc--bleed .max-sc__text {
		margin-left: 0;
		margin-right: 0;
	}

	.max-sc__photo {
		aspect-ratio: 16 / 10;
		order: 2;
	}

	.max-sc--media-left .max-sc__text {
		order: 1;
	}

	.max-sc__chip {
		left: 0;
		right: auto;
		bottom: 24px;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 960px) {
		.max-sc__grid {
			grid-template-columns: 1fr;
			min-height: 0;
		}

		.max-sc--bleed .max-sc__text {
			margin-left: 0;
			margin-right: 0;
		}

		.max-sc__text {
			padding: 48px 24px;
		}

		.max-sc__photo {
			aspect-ratio: 16 / 10;
			order: 2;
		}

		.max-sc--media-left .max-sc__text {
			order: 1;
		}

		.max-sc__chip {
			left: 0;
			right: auto;
			bottom: 24px;
		}
	}
}

/* =====================================================
   Variant 5a — Scroll-Synced Type Stage (.max-ts)
   ===================================================== */
.max-ts {
	--max-ink: #16150f;
	--max-body: #4d4b43;
	--max-muted: #8a867a;
	--max-accent: #e8b931;
	--max-ts-active: #16150f;
	--max-ts-num: #3a382e;
	--max-ts-stroke: 2px;
	--max-ts-runway: 72vh;

	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #fff;
}

.max-ts--stage-right .max-ts__stage {
	order: 2;
}

.max-ts--stage-right .max-ts__text {
	order: 1;
}

/* ---- sticky type stage ---- */
.max-ts__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	background: var(--max-ink);
	overflow: hidden;
}

.max-ts__layer {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 72px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.max-ts__layer.is-active {
	opacity: 1;
}

.max-ts__num {
	font-weight: 700;
	font-size: 200px;
	font-size: clamp(96px, 12vw, 200px);
	line-height: 1;
	color: transparent !important;
	-webkit-text-stroke: var(--max-ts-stroke) var(--max-ts-num);
	text-stroke: var(--max-ts-stroke) var(--max-ts-num);
}

/* Solid variant: no outline, the number colour fills it instead. */
.max-ts--num-solid .max-ts__num {
	color: var(--max-ts-num) !important;
	-webkit-text-stroke: 0;
	text-stroke: 0;
}

.max-ts__rule {
	display: block;
	width: 56px;
	height: 4px;
	background: var(--max-accent);
	margin: 32px 0 24px;
	flex: 0 0 auto;
}

.max-ts__layer-title {
	font-weight: 700;
	font-size: 40px;
	font-size: clamp(24px, 2.6vw, 42px);
	line-height: 1.15;
	color: #f5f3ec !important;
	max-width: 420px;
}

.max-ts__counter {
	position: absolute;
	left: 72px;
	bottom: 56px;
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9a968a !important;
}

/* ---- scrolling text column ---- */
.max-ts__text {
	padding: 96px 72px 0 72px;
}

/* Runway: the last point needs scroll left after it crosses the switch line so
   it lands on the stage while the panel is still pinned. Carried on a spacer
   rather than padding-bottom, which the padding control would overwrite. */
.max-ts__text::after {
	content: '';
	display: block;
	height: var(--max-ts-runway);
}

.max-ts__heading {
	font-weight: 700;
	font-size: 40px;
	font-size: clamp(28px, 2.6vw, 42px);
	line-height: 1.1;
	color: var(--max-ts-active) !important;
	margin: 0 0 56px;
}

.max-ts__point {
	margin: 0 0 56px;
}

.max-ts__point:last-child {
	margin-bottom: 0;
}

.max-ts__point-num {
	display: none;
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--max-accent) !important;
	margin-bottom: 8px;
}

.max-ts--inline-nums .max-ts__point-num {
	display: block;
}

.max-ts__point-title {
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	color: var(--max-muted) !important;
	transition: color 0.3s ease;
	margin: 0 0 12px;
}

.max-ts__point.is-active .max-ts__point-title {
	color: var(--max-ts-active) !important;
}

.max-ts__point-body {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--max-body) !important;
	margin: 0;
}

/* ---- below 960px: drop the stage, numbers go inline ---- */
@media (max-width: 960px) {
	.max-ts {
		grid-template-columns: 1fr;
	}

	.max-ts__stage {
		display: none;
	}

	.max-ts__text {
		padding: 56px 24px;
	}

	.max-ts__text::after {
		height: 0;
	}

	.max-ts__point-num {
		display: block;
		font-size: 14px;
	}

	/* every point reads as active once there is no stage to highlight from */
	.max-ts__point-title {
		color: var(--max-ts-active) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.max-ts__layer,
	.max-ts__point-title {
		transition: none;
	}
}

/* =====================================================
   Variant 12c — Drafting Sheet Specs (.max-df)
   ===================================================== */
.max-df {
	--max-df-ink: #1b3a5c;
	--max-df-paper: #f7f6f1;
	--max-df-grid: rgba(27, 58, 92, 0.07);
	--max-df-grid-size: 32px;
	--max-df-rule: rgba(27, 58, 92, 0.35);
	--max-df-frame: 2px;
	--max-df-margin: 56px;
	--max-df-block: 340px;
	--max-df-badge: 44px;
	--max-df-max: 1280px;

	position: relative;
	background-color: var(--max-df-paper);
	background-image:
		linear-gradient(var(--max-df-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--max-df-grid) 1px, transparent 1px);
	background-size: var(--max-df-grid-size) var(--max-df-grid-size);
	/* The paper border shows on all four sides as padding. Using margin on the
	   sheet instead would collapse the top and bottom out of the section, so
	   the frame would butt against the paper's edges. */
	padding: var(--max-df-margin);
	box-sizing: border-box;
}

.max-df--no-grid {
	background-image: none;
}

.max-df__sheet {
	position: relative;
	max-width: var(--max-df-max);
	margin-inline: auto;
	width: 100%;
	box-sizing: border-box;
	border: var(--max-df-frame) solid var(--max-df-ink);
	background-color: rgba(255, 255, 255, 0.65);
	display: grid;
	grid-template-columns: 1fr var(--max-df-block);
}

.max-df--no-block .max-df__sheet {
	grid-template-columns: 1fr;
}

/* ---- left column: spec points ---- */
.max-df__specs {
	padding: 56px 56px 48px;
	border-right: var(--max-df-frame) solid var(--max-df-ink);
	min-width: 0;
}

.max-df--no-block .max-df__specs {
	border-right: 0;
}

.max-df__heading {
	font-weight: 700;
	font-size: 40px;
	font-size: clamp(26px, 3vw, 42px);
	line-height: 1.1;
	color: #16150f !important;
	margin: 0 0 44px;
}

.max-df__point {
	display: grid;
	grid-template-columns: var(--max-df-badge) 1fr;
	gap: 22px;
	align-items: start;
	padding: 22px 0;
	border-top: 1px dashed var(--max-df-rule);
}

.max-df__point:last-child {
	padding-bottom: 0;
}

.max-df__badge {
	width: var(--max-df-badge);
	height: var(--max-df-badge);
	border: 1.5px solid var(--max-df-ink);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	color: var(--max-df-ink) !important;
	flex: 0 0 auto;
}

.max-df__point-text {
	min-width: 0;
}

.max-df__point-title {
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: #16150f !important;
	margin: 0 0 8px;
}

.max-df__point-body {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--max-body, #4d4b43) !important;
	margin: 0;
}

/* ---- right column: drawing title block ---- */
.max-df__block {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.max-df__cell {
	padding: 28px 32px;
	border-bottom: 1px solid var(--max-df-ink);
	min-width: 0;
}

.max-df__cell-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--max-df-ink);
}

.max-df__cell-row .max-df__cell {
	border-bottom: 0;
	padding-block: 22px;
}

.max-df__cell-row .max-df__cell:first-child {
	border-right: 1px solid var(--max-df-ink);
}

.max-df__cell--notes {
	flex: 1 1 auto;
}

.max-df__cell--sign {
	border-bottom: 0;
}

.max-df__label {
	display: block;
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #5a6e82 !important;
	margin-bottom: 6px;
}

.max-df__value {
	display: block;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	color: #16150f !important;
}

.max-df__value--rev {
	color: #b8860b !important;
}

.max-df__cell--notes .max-df__label {
	margin-bottom: 10px;
}

.max-df__notes {
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--max-body, #4d4b43) !important;
	margin: 0;
}

.max-df__cell--sign .max-df__label {
	margin-bottom: 8px;
}

.max-df__sign {
	display: block;
	font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.2;
	color: var(--max-df-ink) !important;
}

/* ---- stack below 1024px: title block becomes a full-width strip ---- */
@media (max-width: 1024px) {
	.max-df__sheet {
		grid-template-columns: 1fr;
	}

	.max-df__specs {
		border-right: 0;
		border-bottom: var(--max-df-frame) solid var(--max-df-ink);
	}

	.max-df__block {
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* Cells pair up two per row in the strip and keep ruled dividers on both
	   axes; the sheet frame absorbs the final row's bottom rule. */
	.max-df__block > .max-df__cell,
	.max-df__block > .max-df__cell-row {
		flex: 1 1 45%;
		border-bottom: 1px solid var(--max-df-ink);
		border-right: 1px solid var(--max-df-ink);
	}

	.max-df__block > :nth-child(2n),
	.max-df__block > :last-child {
		border-right: 0;
	}

	.max-df--block-first .max-df__specs {
		border-bottom: 0;
		border-top: var(--max-df-frame) solid var(--max-df-ink);
		order: 2;
	}

	.max-df--block-first .max-df__block {
		order: 1;
	}
}

@media (max-width: 600px) {
	.max-df__block {
		flex-direction: column;
	}

	.max-df__block > .max-df__cell,
	.max-df__block > .max-df__cell-row {
		flex: 1 1 auto;
		border-right: 0;
		border-bottom: 1px solid var(--max-df-ink);
	}

	.max-df__block > :last-child {
		border-bottom: 0;
	}
}

/* =====================================================
   Variant 5c — One-Photo Stage (.max-ps)
   ===================================================== */
.max-ps {
	--max-ink: #16150f;
	--max-body: #4d4b43;
	--max-muted: #8a867a;
	--max-accent: #e8b931;
	--max-ps-active: #16150f;
	--max-ps-scrim: rgba(22, 21, 15, 0.92);
	--max-ps-scrim-start: 40%;
	--max-ps-scrim-end: 82%;
	--max-ps-inset: 56px;
	--max-ps-runway: 72vh;
	--max-ps-ratio: 16 / 10;

	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #fff;
}

.max-ps--stage-right .max-ps__stage {
	order: 2;
}

.max-ps--stage-right .max-ps__text {
	order: 1;
}

/* ---- sticky photo stage ---- */
.max-ps__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	background: var(--max-ink);
	overflow: hidden;
}

.max-ps__photo {
	position: absolute;
	inset: 0;
}

.max-ps__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.max-ps__photo--placeholder {
	background: repeating-linear-gradient(-45deg, #26241c 0 14px, #2d2b22 14px 28px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.max-ps__photo--placeholder .max-ph__label {
	color: #9a968a !important;
}

/* gradient scrim so the caption stays legible over any photo */
.max-ps--scrim .max-ps__photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		transparent var(--max-ps-scrim-start),
		var(--max-ps-scrim) var(--max-ps-scrim-end)
	);
	pointer-events: none;
}

.max-ps__progress {
	position: absolute;
	top: 0;
	left: var(--max-ps-inset);
	height: 4px;
	width: 0;
	background: var(--max-accent);
	transition: width 0.4s ease;
	z-index: 3;
}

/* stacked captions, one per point, crossfading */
.max-ps__caption {
	position: absolute;
	left: var(--max-ps-inset);
	right: var(--max-ps-inset);
	bottom: var(--max-ps-inset);
	z-index: 2;
	display: flex;
	align-items: baseline;
	gap: 20px;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.max-ps__caption.is-active {
	opacity: 1;
}

.max-ps__num {
	font-weight: 700;
	font-size: 64px;
	font-size: clamp(38px, 5vw, 68px);
	line-height: 1;
	color: var(--max-accent) !important;
	flex: 0 0 auto;
}

.max-ps__caption-title {
	font-weight: 600;
	font-size: 20px;
	font-size: clamp(16px, 1.6vw, 22px);
	line-height: 1.3;
	color: #f5f3ec !important;
}

/* ---- scrolling text column ---- */
.max-ps__text {
	padding: 96px 72px 0 72px;
}

/* Runway carried on a spacer, so the padding control cannot overwrite it. */
.max-ps__text::after {
	content: '';
	display: block;
	height: var(--max-ps-runway);
}

.max-ps__heading {
	font-weight: 700;
	font-size: 40px;
	font-size: clamp(28px, 2.6vw, 42px);
	line-height: 1.1;
	color: var(--max-ps-active) !important;
	margin: 0 0 56px;
}

.max-ps__point {
	margin: 0 0 56px;
}

.max-ps__point:last-child {
	margin-bottom: 0;
}

.max-ps__point-num {
	display: none;
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--max-accent) !important;
	margin-bottom: 8px;
}

.max-ps--inline-nums .max-ps__point-num {
	display: block;
}

.max-ps__point-title {
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	color: var(--max-muted) !important;
	transition: color 0.3s ease;
	margin: 0 0 12px;
}

.max-ps__point.is-active .max-ps__point-title {
	color: var(--max-ps-active) !important;
}

.max-ps__point-body {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--max-body) !important;
	margin: 0;
}

/* ---- below 960px: photo becomes a banner, numbers go inline ---- */
@media (max-width: 960px) {
	.max-ps {
		grid-template-columns: 1fr;
	}

	.max-ps__stage {
		position: relative;
		height: auto;
		aspect-ratio: var(--max-ps-ratio);
		order: 1;
	}

	.max-ps--stage-right .max-ps__stage,
	.max-ps--stage-right .max-ps__text {
		order: unset;
	}

	/* the caption tracks a sticky panel that no longer exists here */
	.max-ps__caption,
	.max-ps__progress {
		display: none;
	}

	.max-ps__text {
		padding: 56px 24px;
	}

	.max-ps__text::after {
		height: 0;
	}

	.max-ps__point-num {
		display: block;
		font-size: 14px;
	}

	.max-ps__point-title {
		color: var(--max-ps-active) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.max-ps__caption,
	.max-ps__progress,
	.max-ps__point-title {
		transition: none;
	}
}

/* =====================================================
   Why Choose (copy + photo mosaic) (.max-wc)
   ===================================================== */
.max-wc {
	--max-wc-accent: #2e6fbf;
	--max-wc-ink: #2c303b;
	--max-wc-body: #525763;
	--max-wc-muted: #71757f;
	--max-wc-hairline: #e5e4e0;
	--max-wc-max: 1440px;
	--max-wc-split: 480px;
	--max-wc-row1: 280px;
	--max-wc-row2: 240px;
	--max-wc-mgap: 16px;
	--max-wc-radius: 10px;
	--max-wc-bias: 1.2fr;
	--max-wc-badge: 64px;

	max-width: var(--max-wc-max);
	margin-inline: auto;
	padding: 96px 64px;
	box-sizing: border-box;
}

/**
 * auto-fit + minmax is what splits the section: two columns while each can
 * hold --max-wc-split, one column below that. No breakpoint needed, so it is
 * correct whatever container the widget is dropped into.
 */
.max-wc__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--max-wc-split)), 1fr));
	column-gap: 64px;
	row-gap: 72px;
	align-items: start;
}

.max-wc__text,
.max-wc__media {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.max-wc__text {
	gap: 32px;
}

.max-wc__media {
	gap: 16px;
}

/* Mosaic first without reordering the markup, so the copy still reads first. */
.max-wc--media-left .max-wc__text {
	order: 2;
}

.max-wc--media-left .max-wc__media {
	order: 1;
}

/* ---- head ---- */
.max-wc__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.max-wc__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.max-wc__eyebrow-rule {
	width: 32px;
	height: 3px;
	background: var(--max-wc-accent);
	flex: none;
}

.max-wc__eyebrow-text {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--max-wc-accent) !important;
}

.max-wc__heading {
	margin: 0;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: var(--max-wc-ink) !important;
}

/* ---- paragraphs ---- */
.max-wc__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 56ch;
}

.max-wc__intro,
.max-wc__intro p,
.max-wc__closing {
	font-size: 18px;
	line-height: 1.65;
	color: var(--max-wc-body) !important;
	margin: 0;
}

.max-wc__closing {
	max-width: 56ch;
	border-top: 1px solid var(--max-wc-hairline);
	padding-top: 28px;
}

/* ---- photo mosaic ---- */
.max-wc__mosaic {
	display: grid;
	grid-template-columns: minmax(0, var(--max-wc-bias, 1.2fr)) minmax(0, 1fr);
	grid-template-rows: minmax(0, var(--max-wc-row1)) minmax(0, var(--max-wc-row2));
	gap: var(--max-wc-mgap);
}

.max-wc__cell {
	position: relative;
	overflow: hidden;
	border-radius: var(--max-wc-radius);
	min-width: 0;
}

.max-wc__cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.max-wc__cell--placeholder {
	background: repeating-linear-gradient(-45deg, #e6e3db 0 14px, #eceae3 14px 28px);
	border: 1px solid var(--max-wc-hairline);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 8px;
	box-sizing: border-box;
}

/* Rows shrink with the section so the mosaic never dwarfs a small screen. */
@media (max-width: 700px) {
	.max-wc__mosaic {
		grid-template-rows:
			minmax(0, min(var(--max-wc-row1), 34vw))
			minmax(0, min(var(--max-wc-row2), 30vw));
	}
}

/* ---- certification strip ---- */
.max-wc__badge {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #eef2f9;
	border: 1px solid #d3deee;
	border-radius: var(--max-wc-radius);
	padding: 18px 22px;
	box-sizing: border-box;
}

.max-wc__badge-img {
	width: var(--max-wc-badge);
	height: var(--max-wc-badge);
	flex: none;
}

.max-wc__badge-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.max-wc__badge-img--placeholder {
	background: repeating-linear-gradient(-45deg, #dfe6f2 0 8px, #e9eef7 8px 16px);
	border: 1px solid #d3deee;
	box-sizing: border-box;
}

.max-wc__badge-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.max-wc__badge-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--max-wc-ink) !important;
}

.max-wc__badge-sub {
	font-size: 13.5px;
	line-height: 1.35;
	color: #5c6675 !important;
}

/* =====================================================
   Services Card Grid (.max-sg)
   ===================================================== */
.max-sg {
	--max-sg-accent: #3b6ea5;
	--max-sg-bg: #f4f4f2;
	--max-sg-card-bg: #ffffff;
	--max-sg-card-border: #e4e4e1;
	--max-sg-rule: 3px;
	--max-sg-radius: 0px;
	--max-sg-max: 1380px;
	--max-sg-cols: 3;
	--max-sg-card-min: 320px;
	--max-sg-gap: 24px;

	background: var(--max-sg-bg);
	padding: 88px 56px;
	box-sizing: border-box;
}

/* The section paints edge to edge; only the content is capped. */
.max-sg__header,
.max-sg__grid {
	max-width: var(--max-sg-max);
	margin-inline: auto;
}

.max-sg__card {
	align-items: var(--max-sg-card-align, start);
	text-align: var(--max-sg-card-align, start);
}

.max-sg__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 56px;
	/* start/center/end drive the text and the block position together */
	align-items: var(--max-sg-head-align, start);
	text-align: var(--max-sg-head-align, start);
}

/* The 640px measure applies to the content, so the block can still be
   positioned left, centre or right inside the grid width. */
.max-sg__header > * {
	max-width: var(--max-sg-header-w, 640px);
}

.max-sg__eyebrow {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--max-sg-accent) !important;
}

/* No font-size, weight, transform or line-height here: the heading is a real
   h2, so it inherits the site's heading styles and matches the rest of the
   page. The typography control overrides it when a section needs to differ. */
.max-sg__heading {
	margin: 0;
	color: #1c1e21 !important;
}

/**
 * The Columns setting is a ceiling: cards keep that count while each stays at
 * or above --max-sg-card-min, then the grid drops a column. That reproduces
 * the handoff's 3 / 2 / 1 steps without hard-coding viewport breakpoints, so
 * it is also correct inside a narrower container.
 */
.max-sg__grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			min(
				100%,
				max(
					var(--max-sg-card-min),
					calc((100% - (var(--max-sg-cols) - 1) * var(--max-sg-gap)) / var(--max-sg-cols))
				)
			),
			1fr
		)
	);
	gap: var(--max-sg-gap);
}

.max-sg__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--max-sg-card-bg);
	border: 1px solid var(--max-sg-card-border);
	border-top: var(--max-sg-rule) solid var(--max-sg-accent);
	border-radius: var(--max-sg-radius);
	padding: 32px 28px;
	margin: 0;
	box-sizing: border-box;
	min-width: 0;
}

.max-sg--hover .max-sg__card {
	transition: box-shadow 0.15s ease;
}

.max-sg--hover .max-sg__card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.max-sg__num {
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.1em;
	color: #9a9c9f !important;
}

/* Same for card titles — they inherit the theme's heading treatment. */
.max-sg__card-title {
	margin: 0;
	color: #1c1e21 !important;
	overflow-wrap: break-word;
}

.max-sg__card-body {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #4a4d51 !important;
	text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
	.max-sg--hover .max-sg__card {
		transition: none;
	}
}

/* =====================================================
   Company History — Then / Now (.max-hs)
   ===================================================== */
.max-hs {
	--max-hs-accent: #e03a3c;
	--max-hs-accent-hover: #c62f31;
	--max-hs-ink: #1d2129;
	--max-hs-body: #4a4f57;
	--max-hs-muted: #6b7078;
	--max-hs-line: #e4e6ea;
	--max-hs-max: 1360px;
	--max-hs-bias: 1.05fr;
	--max-hs-split: 460px;
	--max-hs-photo-h: 220px;

	background: #fff;
	max-width: var(--max-hs-max);
	margin-inline: auto;
	padding: 96px 64px;
	box-sizing: border-box;
}

/**
 * Two columns while each can hold --max-hs-split, one column below that. The
 * bias only applies once there is room for both, so the photo column keeps its
 * slightly larger share on desktop without breaking the stacked layout.
 */
.max-hs__grid {
	display: grid;
	grid-template-columns: minmax(0, var(--max-hs-bias)) minmax(0, 1fr);
	gap: 80px;
	align-items: center;
}

.max-hs__media,
.max-hs__text {
	min-width: 0;
}

/* Photos on the right without reordering the markup. */
.max-hs--media-right .max-hs__media {
	order: 2;
}

.max-hs--media-right .max-hs__text {
	order: 1;
}

/* ---- then / now ---- */
.max-hs__compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.max-hs__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.max-hs__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	line-height: 1.2;
	color: #9aa0a8 !important;
}

.max-hs__label--now {
	color: var(--max-hs-accent) !important;
}

.max-hs__photo {
	position: relative;
	height: var(--max-hs-photo-h);
	overflow: hidden;
}

.max-hs__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.max-hs__photo--placeholder {
	background: repeating-linear-gradient(-45deg, #e9e9e6 0 14px, #f2f2ef 14px 28px);
	border: 1px solid var(--max-hs-line);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 8px;
}

/* ---- stat strip ---- */
.max-hs__stats {
	display: grid;
	grid-template-columns: repeat(var(--max-hs-stat-cols, 3), minmax(0, 1fr));
	gap: 24px;
	border-top: 1px solid var(--max-hs-line);
	margin-top: 8px;
	padding-top: 28px;
}

.max-hs__stat {
	text-align: center;
	min-width: 0;
}

/* Dividers between stats, per the design's middle-cell borders. */
.max-hs__stat + .max-hs__stat {
	border-left: 1px solid var(--max-hs-line);
}

.max-hs__stat-value {
	display: block;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.5px;
	color: var(--max-hs-ink) !important;
}

.max-hs__stat-label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--max-hs-muted) !important;
	margin-top: 6px;
}

/* ---- heading + intro ---- */
.max-hs__heading {
	margin: 0 0 24px;
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.5px;
	color: var(--max-hs-ink) !important;
	text-wrap: balance;
}

.max-hs__intro {
	margin: 0 0 40px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--max-hs-body) !important;
}

/* ---- vertical timeline ---- */
.max-hs__ms {
	display: grid;
	grid-template-columns: 72px 28px minmax(0, 1fr);
	column-gap: 16px;
}

.max-hs__year {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--max-hs-accent) !important;
}

/**
 * Marker column: the connector is drawn for the full height of the row and the
 * dot sits on top of it. Running the line dot-to-row-bottom instead would
 * leave an 8px break at every row boundary, reading as a dashed line.
 */
.max-hs__marker {
	position: relative;
	display: block;
	align-self: stretch;
	width: 12px;
	justify-self: start;
}

/* connector */
.max-hs__marker::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	transform: translateX(-50%);
	width: 2px;
	background: var(--max-hs-line);
}

/* nothing to connect to above the first dot, or below the last one */
.max-hs__ms:first-child .max-hs__marker::before {
	top: 14px;
}

.max-hs__ms--last .max-hs__marker::before {
	bottom: calc(100% - 14px);
}

/* dot */
.max-hs__marker::after {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--max-hs-accent);
}

.max-hs__ms {
	position: relative;
}

.max-hs__ms-text {
	padding-bottom: 32px;
	min-width: 0;
}

.max-hs__ms--last .max-hs__ms-text {
	padding-bottom: 0;
}

.max-hs__ms-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--max-hs-ink) !important;
	margin-bottom: 6px;
}

.max-hs__ms-body {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--max-hs-body) !important;
}

/* ---- milestone cards variant ---- */
.max-hs--cards .max-hs__timeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 28px;
}

.max-hs--cards .max-hs__ms {
	display: block;
	border-top: 3px solid var(--max-hs-accent);
	padding-top: 14px;
	overflow: visible;
}

.max-hs--cards .max-hs__marker {
	display: none;
}

.max-hs--cards .max-hs__marker::before,
.max-hs--cards .max-hs__marker::after {
	content: none;
}

.max-hs--cards .max-hs__year {
	display: block;
	margin-bottom: 6px;
}

.max-hs--cards .max-hs__ms-text {
	padding-bottom: 0;
}

/* ---- button ---- */
.max-hs__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 44px;
	background: var(--max-hs-accent);
	color: #fff !important;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 20px 36px;
	transition: background 0.2s ease;
}

.max-hs__btn:hover,
.max-hs__btn:focus {
	background: var(--max-hs-accent-hover);
}

.max-hs__btn-arrow {
	font-size: 18px;
	line-height: 1;
}

/* ---- stacked ---- */
@media (max-width: 1100px) {
	.max-hs__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.max-hs--media-right .max-hs__media,
	.max-hs--media-right .max-hs__text {
		order: unset;
	}
}

@media (max-width: 640px) {
	.max-hs__compare {
		grid-template-columns: minmax(0, 1fr);
	}

	.max-hs__stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.max-hs__stat + .max-hs__stat {
		border-left: 0;
		border-top: 1px solid var(--max-hs-line);
		padding-top: 20px;
	}

	.max-hs__ms {
		grid-template-columns: 60px 22px minmax(0, 1fr);
		column-gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.max-hs__btn {
		transition: none;
	}
}