/* =========================================================
 * Tech Resolve — Contact Process
 * ======================================================= */

.tr-contact-process {
	position: relative;
	overflow: hidden;

	padding:
		clamp(90px, 10vw, 160px)
		var(--tr-gutter);

	color: #fff;

	background:
		linear-gradient(
			145deg,
			#06100c,
			#091712 56%,
			#06100d
		);
}


.tr-contact-process__background,
.tr-contact-process__grid,
.tr-contact-process__glow {
	position: absolute;
	pointer-events: none;
}


.tr-contact-process__background {
	inset: 0;
}


.tr-contact-process__grid {
	inset: 0;

	opacity: 0.18;

	background-image:
		linear-gradient(
			rgba(255, 255, 255, 0.045) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.045) 1px,
			transparent 1px
		);

	background-size: 52px 52px;
}


.tr-contact-process__glow {
	top: 5%;
	right: 12%;

	width: 560px;
	height: 560px;

	background:
		radial-gradient(
			circle,
			rgba(25, 224, 120, 0.1),
			transparent 68%
		);
}


.tr-contact-process__shell {
	position: relative;
	z-index: 2;

	width: min(100%, var(--tr-container));
	margin: 0 auto;
}


/* =========================================================
 * Header
 * ======================================================= */

.tr-contact-process__header {
	display: grid;
	grid-template-columns:
		minmax(0, 1.2fr)
		minmax(300px, 0.8fr);
	align-items: end;
	gap: clamp(40px, 8vw, 120px);
}


.tr-contact-process__eyebrow {
	display: block;

	margin-bottom: 18px;

	color: #19e078;

	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.15em;
}


.tr-contact-process__header h2 {
	max-width: 850px;
	margin: 0;

	color: #fff;

	font-size: clamp(42px, 5.4vw, 76px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
}


.tr-contact-process__header > p {
	margin: 0;

	color: rgba(255, 255, 255, 0.52);

	font-size: 15px;
	line-height: 1.75;
}


/* =========================================================
 * Sequence
 * ======================================================= */

.tr-contact-process__sequence {
	position: relative;

	display: grid;
	grid-template-columns:
		repeat(
			var(--tr-contact-process-count),
			minmax(0, 1fr)
		);
	gap: 13px;

	margin-top: clamp(65px, 7vw, 100px);
}


.tr-contact-process__rail {
	position: absolute;
	top: 20px;
	right: 0;
	left: 0;

	height: 1px;

	background:
		linear-gradient(
			to right,
			rgba(25, 224, 120, 0.15),
			rgba(25, 224, 120, 0.6),
			rgba(20, 215, 232, 0.15)
		);
}


.tr-contact-process__step {
	position: relative;
}


.tr-contact-process__step-top {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: space-between;

	min-height: 42px;
}


.tr-contact-process__node {
	display: grid;
	place-items: center;

	width: 17px;
	height: 17px;

	background: #08150f;

	border: 1px solid rgba(25, 224, 120, 0.45);
	border-radius: 50%;
}


.tr-contact-process__node i {
	width: 5px;
	height: 5px;

	background: #19e078;

	border-radius: 50%;

	box-shadow:
		0 0 12px rgba(25, 224, 120, 0.8);
}


.tr-contact-process__step-top strong {
	color: rgba(255, 255, 255, 0.22);

	font-size: 10px;
	letter-spacing: 0.12em;
}


.tr-contact-process__step-card {
	min-height: 240px;
	padding: 25px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.045),
			rgba(255, 255, 255, 0.018)
		);

	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 17px;

	transition:
		transform 180ms var(--tr-ease),
		border-color 180ms ease,
		background 180ms ease;
}


.tr-contact-process__step:hover .tr-contact-process__step-card {
	background:
		rgba(25, 224, 120, 0.045);

	border-color:
		rgba(25, 224, 120, 0.24);

	transform:
		translateY(-5px);
}


.tr-contact-process__step-card > span {
	color: #19e078;

	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.13em;
}


.tr-contact-process__step-card h3 {
	margin: 27px 0 0;

	color: #fff;

	font-size: 20px;
	font-weight: 750;
	line-height: 1.15;
	letter-spacing: -0.025em;
}


.tr-contact-process__step-card p {
	margin: 18px 0 0;

	color: rgba(255, 255, 255, 0.48);

	font-size: 12px;
	line-height: 1.7;
}


/* =========================================================
 * Reassurance
 * ======================================================= */

.tr-contact-process__reassurance {
	display: grid;
	grid-template-columns:
		70px
		minmax(250px, 0.8fr)
		minmax(300px, 1.2fr);
	align-items: center;
	gap: 35px;

	margin-top: 22px;
	padding: 28px;

	background:
		linear-gradient(
			90deg,
			rgba(25, 224, 120, 0.08),
			rgba(20, 215, 232, 0.035)
		);

	border: 1px solid rgba(25, 224, 120, 0.14);
	border-radius: 18px;
}


.tr-contact-process__reassurance-index {
	display: grid;
	place-items: center;

	width: 56px;
	height: 56px;

	color: #19e078;

	background:
		rgba(25, 224, 120, 0.07);

	border: 1px solid rgba(25, 224, 120, 0.18);
	border-radius: 50%;

	font-size: 24px;
	font-weight: 300;
}


.tr-contact-process__reassurance span {
	color: #19e078;

	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.13em;
}


.tr-contact-process__reassurance h3 {
	margin: 8px 0 0;

	color: #fff;

	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.1;
}


.tr-contact-process__reassurance p {
	margin: 0;

	color: rgba(255, 255, 255, 0.53);

	font-size: 12px;
	line-height: 1.7;
}


@media (max-width: 980px) {

	.tr-contact-process__header {
		grid-template-columns: 1fr;
	}


	.tr-contact-process__sequence {
		grid-template-columns: 1fr;
	}


	.tr-contact-process__rail {
		display: none;
	}


	.tr-contact-process__reassurance {
		grid-template-columns: 1fr;
	}

}