/* ==========================================================================
   Services — alternating text / photo rows (Tastyc "Fine Dining" services s0–s2).
   Measured at a 1532px viewport, 1320px container: text column 528px (40%),
   photo 660×680 (50%), 132px between them; rows stack with no gap, the first
   has 60px above it and the last 120px below. Text column: eyebrow → title
   60px/300 → 20px → paragraph (420px max) → 36px → 50px outline button.
   ========================================================================== */
.sv-section.sv-services { padding: 60px 0 120px; }

.sv-services__row {
	display: grid;
	grid-template-columns: 40% 50%;
	justify-content: space-between;
	align-items: center;
}
.sv-services__row--img-left { grid-template-columns: 50% 40%; }
.sv-services__row--img-left .sv-services__media { order: -1; }

/* Text column */
.sv-services .sv-heading { margin-bottom: 20px; }
.sv-services__text {
	max-width: 420px;
	margin: 0 0 36px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--sv-heading);
}
.sv-services__action { display: flex; }

/* Photo column: 660:680 box, image covers it */
.sv-services__media {
	position: relative;
	aspect-ratio: 33 / 34;
	overflow: hidden;
	background: var(--sv-surface);
}
img.sv-services__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--sv-ease);
}
.sv-services__row:hover img.sv-services__img { transform: scale(1.04); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	.sv-services__row,
	.sv-services__row--img-left { column-gap: 40px; }
	.sv-services__row { grid-template-columns: 42% 50%; }
	.sv-services__row--img-left { grid-template-columns: 50% 42%; }
}
@media (max-width: 991px) {
	.sv-section.sv-services { padding: 50px 0 90px; }
	.sv-services__row,
	.sv-services__row--img-left {
		grid-template-columns: 1fr;
		row-gap: 36px;
	}
	.sv-services__row + .sv-services__row { margin-top: 70px; }
	/* Photo first on tablets and phones */
	.sv-services__media,
	.sv-services__row--img-left .sv-services__media { order: -1; aspect-ratio: 4 / 3; max-height: 520px; }
	.sv-services__text { max-width: 560px; }
}
@media (max-width: 767px) {
	.sv-section.sv-services { padding: 40px 0 72px; }
	.sv-services__row + .sv-services__row { margin-top: 56px; }
	.sv-services__row,
	.sv-services__row--img-left { row-gap: 28px; }
	.sv-services__text { margin-bottom: 28px; }
}