.rainbow-company-business-areas,
.rainbow-company-business-areas * {
	box-sizing: border-box;
}

/*
 * The Company page's shared WPBakery row owns the responsive page gutters.
 * Let this full-width component reach that row, then apply those same tokens
 * inside its own content container so the heading and cards share one edge.
 */
body.rainbow-company-intro-page #ajax-content-wrap .vc_row.rainbow-company-common-section:has(.rainbow-company-business-areas),
body.rainbow-company-intro-page #ajax-content-wrap .vc_row.rainbow-company-common-section:has(.rainbow-company-business-areas) > .row_col_wrap_12,
body.rainbow-company-intro-page #ajax-content-wrap .vc_row.rainbow-company-common-section:has(.rainbow-company-business-areas) > .span_12,
body.rainbow-company-intro-page #ajax-content-wrap .vc_row.rainbow-company-common-section:has(.rainbow-company-business-areas) .vc_column-inner {
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	width: 100% !important;
}

.rainbow-company-business-areas {
	--rainbow-business-accent: #ed4033;
	--rainbow-business-heading: #4d4f55;
	--rainbow-business-body: #65676d;
	--rainbow-business-gap: clamp(44px, 6vw, 84px);
	--rainbow-business-section-title: var(--rainbow-business-heading);
	--rainbow-business-section-title-size: clamp(30px, 3vw, 42px);
	--rainbow-business-section-title-line-height: 1.25;
	--rainbow-business-section-description: var(--rainbow-business-body);
	--rainbow-business-section-description-size: clamp(14px, 1.1vw, 17px);
	--rainbow-business-section-description-line-height: 1.55;
	--rainbow-business-card-accent: var(--rainbow-business-accent);
	--rainbow-business-card-title: var(--rainbow-business-heading);
	--rainbow-business-card-body: var(--rainbow-business-body);
	--rainbow-business-card-surface: linear-gradient(135deg, #f4f5f6, #e7e9eb);
	--rainbow-business-card-radius: 16px;
	--rainbow-business-card-aspect: 1.77 / 1;
	--rainbow-business-card-copy-min-height: clamp(118px, 11.5vw, 158px);
	--rainbow-business-card-title-size: clamp(22px, 1.7vw, 28px);
	--rainbow-business-card-title-line-height: 1.28;
	--rainbow-business-card-body-size: clamp(14px, 1.05vw, 16px);
	--rainbow-business-card-body-line-height: 1.55;
	color: var(--rainbow-business-body);
	padding: var(--rainbow-page-common-section-y, clamp(72px, 8.8vw, 136px)) 0;
}

.rainbow-company-business-areas__inner {
	margin: 0 auto;
	max-width: calc(
		var(--rainbow-page-common-max-width, 1128px)
		+ var(--rainbow-page-common-gutter-left, clamp(24px, 5.5vw, 88px))
		+ var(--rainbow-page-common-gutter-right, clamp(24px, 5.5vw, 88px))
	);
	padding-left: var(--rainbow-page-common-gutter-left, clamp(24px, 5.5vw, 88px));
	padding-right: var(--rainbow-page-common-gutter-right, clamp(24px, 5.5vw, 88px));
}



.rainbow-company-business-areas__heading h2,
.rainbow-company-business-areas__card h3 {
	font-family: inherit;
	font-weight: 700;
	letter-spacing: -0.04em;
	margin: 0;
	word-break: keep-all;
}

.rainbow-company-business-areas__heading h2 {
	color: var(--rainbow-business-section-title);
	font-size: var(--rainbow-business-section-title-size);
	line-height: var(--rainbow-business-section-title-line-height);
}

.rainbow-company-business-areas__heading p,
.rainbow-company-business-areas__card p {
	margin: 18px 0 0;
	word-break: keep-all;
}

.rainbow-company-business-areas__heading p {
	color: var(--rainbow-business-section-description);
	font-size: var(--rainbow-business-section-description-size);
	line-height: var(--rainbow-business-section-description-line-height);
}

.rainbow-company-business-areas__grid {
	display: grid;
	gap: var(--rainbow-business-gap) clamp(34px, 6.2vw, 92px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: clamp(48px, 6vw, 90px);
}

.rainbow-company-business-areas__card {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1.2vw, 12px);
	min-width: 0;
}

.rainbow-company-business-areas__copy {
	min-height: var(--rainbow-business-card-copy-min-height);
}

.rainbow-company-business-areas__number {
	color: var(--rainbow-business-card-accent);
	display: inline-block;
	font-size: clamp(23px, 1.9vw, 29px);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	margin-right: 8px;
}

.rainbow-company-business-areas__card h3 {
	color: var(--rainbow-business-card-title);
	display: inline;
	/* Salient's heading rules can otherwise win over the component token.
	 * Keep the override scoped to this editable card-title slot. */
	font-size: var(--rainbow-business-card-title-size) !important;
	line-height: var(--rainbow-business-card-title-line-height) !important;
}

.rainbow-company-business-areas__card p {
	color: var(--rainbow-business-card-body);
	font-size: var(--rainbow-business-card-body-size);
	line-height: var(--rainbow-business-card-body-line-height);
	margin-top: clamp(8px,1.2vw,17px);
}

.rainbow-company-business-areas__media {
	aspect-ratio: var(--rainbow-business-card-aspect);
	background: var(--rainbow-business-card-surface);
	border-radius: var(--rainbow-business-card-radius);
	/* Cards in the same grid row stretch to a shared height. Using the
	 * remaining space above the media keeps their image and bottom edges
	 * aligned even when the editable copy has different lengths. */
	margin-top: auto;
	overflow: hidden;
	width: 100%;
}

.rainbow-company-business-areas__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 899px) {
	.rainbow-company-business-areas__grid {
		gap: 52px 28px;
	}

	.rainbow-company-business-areas {
		--rainbow-business-card-copy-min-height: 142px;
	}
}

@media (max-width: 639px) {
	.rainbow-company-business-areas {
		padding: 72px 0;
	}

	.rainbow-company-business-areas__grid {
		gap: 52px;
		grid-template-columns: minmax(0, 1fr);
		margin-top: 46px;
	}

	.rainbow-company-business-areas__copy {
		min-height: 0;
	}

	.rainbow-company-business-areas__card p {
		margin-bottom: 8px;
	}

	.rainbow-company-business-areas {
		--rainbow-business-card-radius: 13px;
	}
}