.service-hero {
	background-size: cover;
	background-position: center;
	padding: 150px 5vw 100px;
	text-align: center;
	color: white;
}
.service-hero h1 {
	color: white;
	font-size: 56px;
	margin-bottom: 20px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.service-hero p {
	font-size: 24px;
	max-width: 800px;
	margin: 0 auto;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
/* The hero is centred here, unlike the homepage where the CTA row is left-hung. */
.service-hero .hero-cta-row {
	justify-content: center;
	margin-top: 36px;
}
/* One heading scale below the hero. The page used to climb from 26px to 48px as
   it went down, so the least important heading was the loudest. */
.overview-section h2,
.capabilities-section h2 {
	font-size: 36px;
	text-align: left;
	margin-bottom: 24px;
}
.overview-section {
	padding: 80px 5vw;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/* Left-aligned: centred copy this long makes the reader hunt for the start of
   every line. The column shares the 5vw gutter with the capability list below,
   so everything under the hero hangs off one left edge. */
.overview-section p {
	font-size: 18px;
	line-height: 1.8;
	max-width: 900px;
	color: var(--text-secondary);
	text-align: left;
	margin: 0;
}
.overview-section p + p {
	margin-top: 20px;
}
.capabilities-section {
	padding: 0px;
	padding-left: 5vw;
}
.capabilities-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: stretch;
	margin-top: 0;
}
.capabilities-content > div {
	display: flex;
}
.capabilities-content > div:first-child {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 50px 40px 50px 0;
}
/* The image is taken out of flow so the row height comes from the capability
   list, not from the photo. A portrait shot used to stretch the whole section
   to its own height and leave the list stranded in white space. */
.capabilities-content > div:last-child {
	align-items: stretch;
	position: relative;
	min-height: 440px;
}
.capabilities-content > div:last-child img {
	position: absolute;
	inset: 0;
}
.capabilities-image {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	object-fit: cover;
}
/* Not every brand has a capability list to show. ARC AI runs prose in this
   column instead, so it gets the same measure and rhythm as the overview. */
.capabilities-content p {
	font-size: 18px;
	line-height: 1.8;
	color: var(--text-secondary);
	max-width: 620px;
	margin: 0 0 20px;
}

.capabilities-list {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}
/* Same marker as .rr-list, so a page does not carry two kinds of bullet. The
   dot is positioned rather than inline, which gives a wrapped line a hanging
   indent instead of tucking it under the marker. */
.capabilities-list li {
	font-size: 18px;
	color: var(--text-primary);
	padding: 9px 0 9px 26px;
	line-height: 1.5;
	position: relative;
}
.capabilities-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 17px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent-color);
}
@media (max-width: 850px) {
	.capabilities-section {
		padding-left: 0;
	}
	.capabilities-content {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.capabilities-content > div:first-child {
		padding-left: 5vw;
	}
	.capabilities-content > div:last-child {
		padding: 0;
		min-height: 300px;
	}
	.capabilities-image {
		border-radius: 0;
		width: 100%;
	}
}