/* ==========================================================================
   Services page: directions with their services, engagement formats (intro: components/intro.css).
   ========================================================================== */

/* Directions: name + description on the left (sticky), services on the right. */
.directions__list { display: grid; gap: clamp(3rem, 2rem + 3vw, 6rem); }
.direction { display: grid; gap: var(--s-3); }
.direction__head { display: grid; gap: var(--s-2); align-content: start; }
.direction__title {
	font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.75rem);
	font-weight: 500;
	line-height: 1.1;
}
.direction__text { max-width: 40ch; color: var(--c-slate); font-size: var(--fs-small); line-height: 1.65; }

@media (min-width: 1024px) {
	.direction { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); align-items: start; }
	.direction__head {
		position: sticky;
		inset-block-start: calc(var(--header-h-compact) + var(--s-4));
		padding-block-start: var(--s-3);
		padding-inline-end: var(--s-4);
	}
	/* Service rows inside a narrower column: title above the text. */
	.direction .service-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
	.direction .service-row__title,
	.direction .service-row__text { grid-column: 1; }
	.direction .service-row__icon { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1680px) {
	.direction .service-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; align-items: center; }
	.direction .service-row__title,
	.direction .service-row__text { grid-column: auto; }
	.direction .service-row__icon { grid-column: 3; }
}

/* Engagement formats: term-sheet rows. */
.engagement__list { border-block-end: 1px solid var(--line-light); }
.engagement__item {
	display: grid;
	gap: 0.5rem var(--gap);
	padding-block: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
	border-block-start: 1px solid var(--line-light);
}
.engagement__title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: 1.15;
}
.engagement__text { margin: 0; max-width: 56ch; color: var(--c-slate); line-height: 1.65; }
@media (min-width: 768px) {
	.engagement__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; }
}
@media (min-width: 1024px) {
	.engagement__item { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding-inline-start: var(--s-4); }
}