/* U.G.S. Home 19B — connected technology families */

#ugs-family-wet,
#ugs-family-carbon,
#ugs-family-robotics {
	scroll-margin-top: 104px;
}

@media (min-width: 992px) {
	.ugs-tech-cinematic-families > a {
		position: relative;
		display: block;
		min-width: 0;
		min-height: 126px;
		padding: 25px 55px 6px 27px;
		border-radius: 18px 18px 0 0;
		color: inherit;
		text-decoration: none !important;
		-webkit-tap-highlight-color: transparent;
		transition:
			background-color .24s ease,
			transform .24s cubic-bezier(.2,.8,.2,1),
			box-shadow .24s ease;
	}

	.ugs-tech-cinematic-families > a:first-child {
		padding-left: 0;
	}

	.ugs-tech-cinematic-families > a:last-child {
		padding-right: 28px;
	}

	.ugs-tech-cinematic-families > a:not(:first-child)::before {
		content: "";
		position: absolute;
		left: 0;
		top: 24px;
		bottom: 10px;
		width: 1px;
		background: rgba(255,255,255,.19);
		transition: background-color .24s ease;
	}

	.ugs-tech-cinematic-families > a::after {
		content: "↓";
		position: absolute;
		top: 28px;
		right: 25px;
		font-size: 16px;
		line-height: 1;
		font-weight: 500;
		color: #00b46b;
		opacity: .58;
		transform: translateY(-2px);
		transition:
			opacity .2s ease,
			transform .24s cubic-bezier(.2,.8,.2,1);
	}

	.ugs-tech-cinematic-families > a:first-child::after {
		right: 27px;
	}

	.ugs-tech-cinematic-families > a b,
	.ugs-tech-cinematic-families > a strong,
	.ugs-tech-cinematic-families > a em {
		position: relative;
		z-index: 1;
		transition: transform .24s cubic-bezier(.2,.8,.2,1);
	}

	.ugs-tech-cinematic-families > a:focus-visible {
		outline: 2px solid #00b46b;
		outline-offset: -3px;
		background: rgba(255,255,255,.055);
	}
}

@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
	.ugs-tech-cinematic-families > a:hover {
		background: linear-gradient(180deg, rgba(0,180,107,.085), rgba(255,255,255,.025));
		box-shadow: inset 0 1px 0 rgba(0,180,107,.36);
		transform: none;
	}

	.ugs-tech-cinematic-families > a:hover b,
	.ugs-tech-cinematic-families > a:hover strong,
	.ugs-tech-cinematic-families > a:hover em {
		transform: translateY(-2px);
	}

	.ugs-tech-cinematic-families > a:hover::after {
		opacity: 1;
		transform: translateY(3px);
	}

	.ugs-tech-cinematic-families > a:hover strong {
		color: #fff;
	}
}

@media (pointer: coarse) and (min-width: 992px) {
	.ugs-tech-cinematic-families > a:active {
		background: rgba(0,180,107,.08);
		transform: scale(.987);
	}
}

@media (max-width: 991px) {
	#ugs-family-wet,
	#ugs-family-carbon,
	#ugs-family-robotics {
		scroll-margin-top: 78px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ugs-tech-cinematic-families > a,
	.ugs-tech-cinematic-families > a::before,
	.ugs-tech-cinematic-families > a::after,
	.ugs-tech-cinematic-families > a b,
	.ugs-tech-cinematic-families > a strong,
	.ugs-tech-cinematic-families > a em {
		transition: none !important;
	}
}