/* Layout: service-cards */
.sw-service-cards { overflow: hidden; }

.sw-service-cards__pattern {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 45%;
	overflow: hidden;
}

/* Inline SVG plusses at their natural 40px grid, anchored bottom-left like the old CSS pattern */
.sw-service-cards__plusses {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	max-inline-size: none;
}

.sw-service-cards__plusses .sw-plus-pattern__plus {
	transition: stroke 500ms ease;
	transition-delay: 0ms;
}

/* Lit by ServiceCardsPattern on card hover; --plus-delay staggers them from the chevron tip */
.sw-service-cards__plusses .sw-plus-pattern__plus--lit {
	stroke: var(--color-heading);
	transition: stroke 300ms ease;
	transition-delay: var(--plus-delay, 0ms);
}

.sw-service-cards__inner { position: relative; display: grid; gap: var(--gap-xl); }
.sw-service-cards__grid { display: grid; gap: var(--space-16); } /* 1rem while the cards are stacked */

.sw-service-card {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: var(--gap-m);
	padding: var(--space-40) var(--space-24);
	background: var(--color-bg);
}
.sw-service-card--navy { background: var(--color-secondary); }

.sw-service-card__body { display: grid; gap: var(--space-16); }

@media (min-width: 48em) {
	.sw-service-card { padding: var(--space-40); }
}

@media (min-width: 62em) {
	.sw-service-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32); }
}