/* ServicesV12 — escape hatch only: card aspect, gradient scrim, link chip. */
.srv.v12 {
	--opacity: 1;

	/* Hover: the card answers the way the homepage panel's cards do (ServicesV8) —
	   the photo settles deeper into its frame while the link chip's window mark
	   travels through its own window. Siblings keep the .hvr_op-lst fade the card
	   already carried.

	   The .hvr_zm utility cannot carry the zoom here. Its hover rule sets a bare
	   `transform: scale()`, and the photo in this card is a full-bleed .bg picture
	   whose img is centred with translate(-50%, -50%) — the utility would drop that
	   centring and throw the image down and right by half its own size. So the
	   transform is written out to compose with the centring, while the amount and
	   the easing stay on the utility's own tokens; that is what keeps this identical
	   to the homepage rather than merely similar. */
	--hvr-zm-amt: 1.08;

	.crd {

		.bg img {
			transition: var(--hvr-trns);
		}

		.bg-bx {
			--srv-v12-chp-s: 2rem;

			width: var(--srv-v12-chp-s);
			height: var(--srv-v12-chp-s);
			border-radius: var(--btn-v1-bdr-rds);

			svg {
				width: 75%;
				height: 75%;
			}
		}
	}

	.psu-aft::after {
		z-index: 0;
		background: linear-gradient(to bottom, hsl(from var(--buttons) h s l / 0) 58.5%, var(--buttons) 91%);
	}

	.psu-aft > .rlt {
		z-index: 1;
	}

	@media (hover: hover) and (pointer: fine) {

		[data-role="item"] > a.crd:is(:hover, :focus-visible) {

			.bg img {
				transform: translate(-50%, -50%) scale(var(--hvr-zm-amt));
			}

			/* The theme parks arrow-travel on marks inside a .btn and names this
			   module as one it deliberately leaves alone — the chip here is card
			   furniture, not a button. ServicesV8 opts its own cards in exactly
			   this way; same token, same easing as the theme's rule. */
			.btn-arw-trk {
				transform: translateX(var(--btn-arw-trv));
			}

		}

	}

	@media screen and (min-width:1280px) {
		.grd {
			--itm-val: 33.333;
		}

		.half {
			width: 39% !important;

			.pd_v.pd_h {
				padding: 1.78rem;
			}
		}
	}

	@media screen and (max-width:1279px) {
		& {
			.crd:not(.half) {
				aspect-ratio: 1 / 1;
			}
		}
	}
}