/* ==========================================================================
   Introduction: title | gold line | lead + text (Services, About).
   Columns 7/5 so the line aligns with section heads and the hero.
   ========================================================================== */
.intro__inner { display: grid; gap: var(--s-4); }
.intro__title { max-width: 14em; }
.intro__body {
	display: grid;
	gap: var(--s-3);
	align-content: start;
	padding-inline-start: var(--s-3);
	border-inline-start: 1px solid var(--c-gold);
}
.intro__lead { max-width: 52ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-ink); }
.intro__text { max-width: 60ch; color: var(--c-slate); }
@media (min-width: 1024px) {
	.intro__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; } /* lines align with section heads */
	.intro__title { padding-inline-end: clamp(2rem, 4vw, 5rem); }
	.intro__body { padding-inline-start: clamp(2rem, 3vw, 3.5rem); padding-block: 0.75rem 0.25rem; }
}