/* ============================================================
   Services — Lottie centered, 8 cards in circle on desktop
   ============================================================ */
.services {
	text-align: center;
}

.services-framing {
	margin-bottom: 64px;
	text-align: center;
}

/* ---- Desktop: circular orbit ---- */
.services-orbit {
	position: relative;
	height: 1100px;
	--r: 460px; /* radius from center to card center */
}

.services-lottie {
	position: absolute;
	top: 52%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 690px;
	height: 690px;
	z-index: var(--z-base);
}

.services-lottie dotlottie-wc {
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	display: block;
}

.service-card {
	position: absolute;
	left: 50%;
	top: 57%;
	transform: translate(
		calc(-50% + var(--r) * cos(var(--a))),
		calc(-50% + var(--r) * sin(var(--a)))
	);
	width: 250px;
	background-color: var(--color-near-white);
	border-radius: 12px;
	padding: 20px 18px;
	box-shadow: 0 4px 24px rgba(26, 32, 40, 0.18);
	z-index: var(--z-content);
	text-align: left;
}

.service-card h3 {
	font-size: clamp(15px, 1.4vw, 18px);
	font-weight: 600;
	line-height: var(--lh-tight);
	margin-bottom: 8px;
}

.service-card p {
	font-size: 12px;
	line-height: 1.55;
	color: rgba(26, 32, 40, 0.8);
}

/* ---- Tablet: lottie above, 2-column card grid ---- */
@media (max-width: 1280px) {
	.services-framing { margin-bottom: 40px; }

	.services-orbit {
		position: static;
		height: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

	.services-lottie {
		position: static;
		transform: none;
		width: 260px;
		height: 260px;
		margin: 0 auto 32px;
		grid-column: 1 / -1;
	}

	.service-card {
		position: static;
		transform: none;
		width: auto;
	}
}

/* ---- Mobile: single column ---- */
@media (max-width: 430px) {
	.services-orbit {
		grid-template-columns: 1fr;
	}

	.services-lottie {
		width: 200px;
		height: 200px;
		margin-bottom: 24px;
	}
}