/* Our Services Template Styles */

.our-services-template {
	background: rgba(101, 150, 153, 0.2);
}

.our-services-template .services-hero {
	padding: var(--breadcrumb-offset-top) 0 var(--space-2xl);
	background: transparent;
}

.our-services-template .services-title {
	font-family: 'Aboreto', serif;
	font-weight: 400;
	font-style: normal;
	font-size: 50px;
	line-height: 60px;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: rgba(32, 33, 38, 1);
	margin: 0;
}

.our-services-template .services-grid-section {
	background: transparent;
	padding: var(--space-2xl) 0 var(--space-3xl);
}

.our-services-template .services-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--grid-gutter-row-desktop);
	row-gap: var(--grid-gutter-row-desktop);
}

@media (max-width: 1023px) {
	.our-services-template .services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	/* Mobile: single-column grid */
	.our-services-template .services-grid {
		grid-template-columns: 1fr;
	}

	/* Mobile: section title 32px and aligned with card width */
	.our-services-template .services-title {
		font-size: 32px;
		line-height: 1.2;
	}

	/* Mobile: ensure 24px padding from screen edge on this page */
	.our-services-template .container {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* Mobile: make cards use full available width so they appear centered */
	.our-services-template .solution-card {
		width: 100%;
		max-width: 100%;
	}
}