/**
 * uxneuron — services.css
 *
 * Hero sizing plus the six alternating "icon+number / title+desc / 2x2
 * capability grid" rows that make up the Services page (and double as the
 * detail content for each Service CPT item when reused elsewhere).
 *
 * @package uxneuron
 */

.service-rows {
	max-width: var( --container-max );
	margin: 0 auto;
	padding: 30px var( --section-x ) 60px;
}

.service-row {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 56px;
	align-items: center;
	padding: 56px 0;
	border-top: 1px solid var( --color-border );
}

.service-row:last-child {
	border-bottom: 1px solid var( --color-border );
}

.service-row__heading {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

.service-row__number {
	font-family: var( --font-heading );
	font-weight: 800;
	font-size: 15px;
	color: var( --color-primary );
}

.service-row__title {
	font-weight: 800;
	font-size: 38px;
	letter-spacing: -.02em;
	margin: 0 0 14px;
}

.service-row__desc {
	font-size: 17px;
	line-height: 1.6;
	color: var( --color-text-soft );
	margin: 0;
	max-width: 380px;
}

.service-row__subitems {
	background: #fff;
	border: 1px solid var( --color-border );
	border-radius: var( --radius-xl );
	padding: 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	box-shadow: var( --shadow-card );
}

.subitem {
	transition: background .3s ease, transform .3s ease;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 14px;
	border-radius: 11px;
	font-size: 15px;
	font-weight: 500;
	color: #3a3a3a;
}

.subitem:hover {
	background: rgba(222,108,9,.08);
	transform: translateX(3px);
}

.subitem svg {
	flex-shrink: 0;
}