/* Services page (services.php). Every rule is scoped to .services-page. */

/* Bands */
.services-page .svc-band {
	padding: 88px 0;
	padding: 5.5rem 0;
	scroll-margin-top: 100px;
}

.services-page .svc-band-alt {
	background: #f7f7FF;
}

@media (max-width: 991px) {
	.services-page .svc-band {
		padding: 4rem 0;
	}
}

/* Headline highlight: keep the highlighted word the same colour as the rest */
.services-page .svc-band h2 mark {
	color: inherit;
}

/* Product intro */
.services-page .svc-lead {
	font-size: 1.125rem;
	line-height: 1.7;
	color: #5c5c66;
}

.services-page .svc-credit {
	font-size: 0.875rem;
	font-style: italic;
	color: #6c6c76;
}

/* Detail panel next to the intro */
.services-page .svc-panel {
	background: #f7f7FF;
	border: 1px solid #e7e7e7;
	border-radius: 10px;
	padding: 2.25rem;
}

.services-page .svc-band-alt .svc-panel {
	background: #FFF;
}

.services-page .svc-panel-title {
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--dark);
	margin: 0 0 0.5rem;
}

.services-page .svc-panel-intro {
	color: #5c5c66;
	margin-bottom: 1.5rem;
}

.services-page .svc-points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 2rem;
}

.services-page .svc-points li {
	border-top: 2px solid var(--tertiary);
	padding-top: 0.875rem;
}

.services-page .svc-points strong {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--dark);
	line-height: 1.35;
	margin-bottom: 0.25rem;
}

.services-page .svc-points span {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #5c5c66;
}

@media (max-width: 575px) {
	.services-page .svc-panel {
		padding: 1.5rem;
	}
	.services-page .svc-points {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* Step cards */
.services-page .svc-steps {
	margin-top: 3.5rem;
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 1.5rem;
}

.services-page .svc-steps > li {
	display: flex;
}

.services-page .svc-step {
	width: 100%;
	background: #f7f7FF;
	border: 1px solid #e7e7e7;
	border-radius: 10px;
	padding: 2rem;
}

.services-page .svc-band-alt .svc-step {
	background: #FFF;
}

.services-page .svc-step-num {
	display: block;
	font-size: 4rem;
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin-bottom: 1rem;
	color: var(--secondary);
	background-image: linear-gradient(180deg, var(--secondary) 0%, var(--dark) 80%);
	-webkit-background-clip: text;
					background-clip: text;
	-webkit-text-fill-color: transparent;
}

.services-page .svc-step-title {
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--dark);
	margin: 0 0 0.625rem;
}

.services-page .svc-step p {
	color: #5c5c66;
}

/* Below desktop width the cards stack, with the number beside the text */
@media (max-width: 991px) {
	.services-page .svc-steps {
		margin-top: 2.5rem;
		--bs-gutter-y: 1rem;
	}
	.services-page .svc-step {
		display: grid;
		grid-template-columns: 3rem 1fr;
		column-gap: 1rem;
		align-items: start;
		padding: 1.5rem;
	}
	.services-page .svc-step-num {
		grid-row: 1 / span 2;
		font-size: 3rem;
		margin-bottom: 0;
	}
	.services-page .svc-step-title {
		margin-top: 0.25rem;
	}
	.services-page .svc-step p {
		grid-column: 2;
	}
}

/* Research and marketing services */
.services-page .svc-services {
	margin-top: 2.5rem;
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 1.5rem;
}

.services-page .svc-services > div {
	display: flex;
}

.services-page .svc-service {
	width: 100%;
	border: 1px solid #e7e7e7;
	border-radius: 10px;
	padding: 2.25rem;
}

.services-page .svc-service-title {
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--dark);
	margin: 0 0 1.5rem;
}

.services-page .svc-checks li {
	position: relative;
	padding: 0.625rem 0 0.625rem 2rem;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--dark);
	border-top: 1px solid #ededf3;
}

.services-page .svc-checks li:first-child {
	border-top: 0;
	padding-top: 0;
}

.services-page .svc-checks li:last-child {
	padding-bottom: 0;
}

.services-page .svc-checks i {
	position: absolute;
	left: 0;
	top: 0.95rem;
	font-size: 0.875rem;
	color: var(--secondary);
}

.services-page .svc-checks li:first-child i {
	top: 0.325rem;
}

@media (max-width: 575px) {
	.services-page .svc-service {
		padding: 1.5rem;
	}
	.services-page .svc-service-title {
		font-size: 1.3125rem;
	}
}