/* ==========================================================================
   Service row: a full-width line, title + one line of text. On hover/focus the
   brand line appears at the start of the row — the only hover effect here.
   ========================================================================== */
.service-list { border-block-end: 1px solid var(--line-light); }
.service-list > li { border-block-start: 1px solid var(--line-light); }

.service-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.5rem var(--gap);
	align-items: start;
	padding-block: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
	color: var(--c-ink);
	text-decoration: none;
}
.service-row::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: clamp(1.25rem, 1rem + 0.8vw, 2rem);
	width: 1px;
	background: var(--c-gold-deep);
	transform: scaleY(0);
	transition: transform var(--dur) var(--ease-out);
}
.service-row__title {
	grid-column: 1;
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: 1.15;
	transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.service-row__text {
	grid-column: 1;
	max-width: 56ch;
	color: var(--c-slate);
	font-size: var(--fs-small);
	line-height: 1.6;
}
.service-row__icon {
	grid-column: 2;
	grid-row: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--c-slate);
	transition: color var(--dur) var(--ease-out);
}
.service-row__icon .icon { width: 1.25rem; height: 1.25rem; }

.service-row:hover::before,
.service-row:focus-visible::before { transform: scaleY(1); }
.service-row:hover .service-row__title,
.service-row:focus-visible .service-row__title { color: var(--c-gold-deep); }
.service-row:hover .service-row__icon,
.service-row:focus-visible .service-row__icon { color: var(--c-gold-deep); }
.service-row:focus-visible { outline-offset: 0; }

@media (min-width: 1024px) {
	.service-row {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
		align-items: center;
		padding-inline-start: var(--s-4);
	}
	.service-row__title,
	.service-row__text { grid-column: auto; }
	.service-row__icon { grid-column: 3; }
}