/* ==========================================================================
   Service cards (0.6.6.5)

   The cards were flat white with a hairline top rule, an identical pale icon
   chip on each, and a repeated "Choose date & time" caption. Nine services
   therefore read as one repeated block. This gives each card depth, a warmer
   icon treatment, an accent that actually reads, and a footer that only
   speaks when it has something to say.
   ========================================================================== */

.wt-service-grid {
	align-items: stretch;
}

.wt-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	padding: 1.4rem 1.25rem 1.2rem;
	border: 1px solid #e4e9ef;
	border-radius: 18px;
	background:
		radial-gradient(120% 80% at 50% -10%, #ffffff 0%, #fbfcfd 45%, #f5f7fa 100%);
	box-shadow: 0 1px 2px rgba(18, 35, 51, .05);
	transition: transform .22s cubic-bezier(.22,.61,.36,1),
	            box-shadow .22s ease,
	            border-color .22s ease;
}

/* A real accent bar, not a hairline. */
.wt-service-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, #d6532e 0%, #f0803f 55%, #d6532e 100%);
	opacity: .9;
}

@media (prefers-reduced-motion: no-preference) {
	.wt-service-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 14px 32px rgba(18, 35, 51, .13);
		border-color: #d9e1e9;
	}

	.wt-service-card:hover .wt-service-card__icon {
		transform: scale(1.06) rotate(-3deg);
	}
}

.wt-service-card:active {
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------ icon */

.wt-service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: .9rem;
	border-radius: 15px;
	
	background: linear-gradient(145deg, #23384f 0%, #142331 100%);
	color: #fff;
	box-shadow: 0 6px 16px rgba(20, 35, 49, .26);
	transition: transform .24s cubic-bezier(.22,.61,.36,1);
}

.wt-service-card__icon svg {
	width: 26px;
	height: 26px;
}

/* ------------------------------------------------------------------ text */

.wt-service-card__body {
	flex: 1;
}

.wt-service-card__body h3 {
	margin: 0 0 .45rem;
	color: #142433;
	font-size: 1.02rem;
	line-height: 1.28;
	letter-spacing: -.005em;
	text-wrap: balance;
}

.wt-service-card__body p {
	margin: 0;
	color: #5d6b78;
	font-size: .85rem;
	line-height: 1.55;
}

/* ---------------------------------------------------------------- footer */

.wt-service-card__footer {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px solid #eaeef3;
}

.wt-service-card__footer span {
	color: #7b8894;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wt-service-card__footer .wt-experience-btn {
	justify-content: center;
	width: 100%;
	min-height: 44px;
	border-radius: 11px;
	font-size: .82rem;
}

/* --------------------------------------------------------- rescue accent */

.wt-service-card--rescue {
	border-color: #f3c9bb;
	background: radial-gradient(120% 80% at 50% -10%, #fffaf8 0%, #fdf0eb 100%);
}

.wt-service-card--rescue::before {
	background: linear-gradient(90deg, #b3341a 0%, #d6532e 55%, #b3341a 100%);
	opacity: 1;
}

.wt-service-card--rescue .wt-service-card__icon {
	background: linear-gradient(145deg, #d6532e 0%, #a82f16 100%);
	box-shadow: 0 6px 18px rgba(214, 83, 46, .34);
}

/* ------------------------------------------------------------------ phone */

@media (max-width: 767px) {
	.wt-service-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: .8rem;
	}

	.wt-service-card {
		padding: 1.15rem 1.05rem 1.05rem;
		border-radius: 16px;
	}

	.wt-service-card__icon {
		width: 46px;
		height: 46px;
		margin-bottom: .7rem;
		border-radius: 13px;
	}

	.wt-service-card__icon svg {
		width: 23px;
		height: 23px;
	}

	.wt-service-card__body h3 {
		font-size: .98rem;
	}

	.wt-service-card__body p {
		font-size: .84rem;
	}

	/* Clear the fixed bottom bar on the last row. */
	.wt-services-page {
		padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.wt-service-card,
	.wt-service-card__icon {
		transition: none;
	}
}