/* Steps (First Visit) */
.sh-steps .sh-steps__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(36px, 6vw, 96px);
	align-items: center;
}
.sh-steps .sh-steps__body { min-width: 0; }
.sh-steps .sh-steps__intro { margin: 12px 0 0; max-width: 54ch; }
.sh-steps .sh-steps__list { list-style: none; counter-reset: sh-step; display: grid; margin: 30px 0 34px; padding: 0; }
.sh-steps .sh-steps__list li {
	counter-increment: sh-step;
	display: grid;
	grid-template-columns: 56px 1fr;
	column-gap: 8px;
	margin: 0;
	padding: 20px 0;
	border-top: 1px solid rgba(153, 137, 126, 0.3);
}
.sh-steps .sh-steps__list li:last-child { border-bottom: 1px solid rgba(153, 137, 126, 0.3); }
/* The number sits in a small arch: the steps really are a sequence. */
.sh-steps .sh-steps__list li::before {
	content: counter(sh-step);
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 48px;
	border-radius: 99px 99px 8px 8px;
	background: var(--sh-cream);
	color: var(--sh-taupe-dark);
	font: 600 17px/1 var(--sh-font-head);
}
.sh-steps.sh-tone--sand .sh-steps__list li::before { background: var(--sh-light); }
.sh-steps .sh-steps__title { margin: 0; font: 600 17px/1.35 var(--sh-font-head); color: var(--sh-ink); }
.sh-steps .sh-steps__list p { margin: 4px 0 0; font-size: 15.5px; }
.sh-steps .sh-steps__arch { max-width: 440px; margin-left: auto; aspect-ratio: 4 / 5; }
.sh-steps .sh-steps__arch img { object-position: var(--sh-focus, 50% 50%); }

@media (max-width: 960px) {
	.sh-steps .sh-steps__grid { grid-template-columns: minmax(0, 1fr); }
	.sh-steps .sh-steps__media { order: -1; }
	.sh-steps .sh-steps__arch { max-width: none; margin: 0; aspect-ratio: 4 / 3; border-radius: 240px 240px var(--sh-r-md) var(--sh-r-md); }
}
@media (max-width: 600px) {
	.sh-steps .sh-steps__body > .sh-btn { width: 100%; justify-content: space-between; }
}