/* =========================================================
 * Tech Resolve — Custom Website Development Final CTA
 * ======================================================= */

.tr-custom-final-cta {
	position: relative;
	overflow: hidden;

	padding:
		clamp(105px, 10vw, 165px)
		var(--tr-gutter);

	color:
		#06100d;

	background:
		var(--tr-green);
}


/* =========================================================
 * Background
 * ======================================================= */

.tr-custom-final-cta::before {
	content: "";

	position: absolute;
	top: -380px;
	right: -260px;

	width: 880px;
	height: 880px;

	pointer-events: none;

	background:
		radial-gradient(
			circle,
			rgba(255, 255, 255, .22),
			transparent 66%
		);
}


.tr-custom-final-cta::after {
	content: "";

	position: absolute;
	bottom: -420px;
	left: -280px;

	width: 820px;
	height: 820px;

	pointer-events: none;

	background:
		radial-gradient(
			circle,
			rgba(6, 16, 13, .1),
			transparent 68%
		);
}


/* =========================================================
 * Shell
 * ======================================================= */

.tr-custom-final-cta__shell {
	position: relative;
	z-index: 2;

	width:
		min(100%, var(--tr-container));

	margin:
		0 auto;
}


/* =========================================================
 * Panel
 * ======================================================= */

.tr-custom-final-cta__panel {
	display: grid;

	grid-template-columns:
		minmax(0, 1.12fr)
		minmax(340px, .7fr);

	overflow: hidden;

	border:
		1px solid rgba(6, 16, 13, .18);

	border-radius:
		28px;

	background:
		rgba(255, 255, 255, .16);

	box-shadow:
		0 42px 110px rgba(6, 16, 13, .13);
}


/* =========================================================
 * Content
 * ======================================================= */

.tr-custom-final-cta__content {
	padding:
		clamp(48px, 7vw, 88px);
}


.tr-custom-final-cta__eyebrow {
	display: block;

	margin-bottom: 20px;

	color:
		rgba(6, 16, 13, .55);

	font-size: 9px;
	font-weight: 900;
	letter-spacing: .15em;
}


.tr-custom-final-cta__content h2 {
	max-width: 820px;

	margin: 0;

	color:
		#06100d;

	font-size:
		clamp(52px, 6vw, 88px);

	font-weight: 850;
	line-height: .94;
	letter-spacing: -.06em;
}


.tr-custom-final-cta__content > p {
	max-width: 720px;

	margin:
		28px
		0
		0;

	color:
		rgba(6, 16, 13, .68);

	font-size: 14px;
	line-height: 1.82;
}


/* =========================================================
 * Action
 * ======================================================= */

.tr-custom-final-cta__action {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap:
		18px 24px;

	margin-top:
		clamp(34px, 5vw, 52px);
}


.tr-custom-final-cta .tr-custom-final-cta__button,
.tr-custom-final-cta .tr-custom-final-cta__button:hover,
.tr-custom-final-cta .tr-custom-final-cta__button:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 18px;

	min-height: 58px;
	padding:
		0 24px;

	color:
		#fff !important;

	background:
		#06100d !important;

	border:
		1px solid #06100d !important;

	border-radius:
		999px !important;

	box-shadow:
		none !important;

	font-size: 12px;
	font-weight: 800;
	line-height: 1;

	text-decoration: none !important;

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


.tr-custom-final-cta .tr-custom-final-cta__button:hover {
	transform:
		translateY(-2px);

	color:
		#06100d !important;

	background:
		#fff !important;

	border-color:
		#fff !important;
}


.tr-custom-final-cta .tr-custom-final-cta__button:focus-visible {
	outline:
		2px solid #06100d;

	outline-offset:
		4px;
}


.tr-custom-final-cta__button i {
	display: grid;
	place-items: center;

	width: 28px;
	height: 28px;

	color:
		#06100d;

	background:
		var(--tr-green);

	border-radius:
		50%;

	font-size: 14px;
	font-style: normal;

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


.tr-custom-final-cta__button:hover i {
	transform:
		translateX(3px);

	background:
		#06100d;

	color:
		#fff;
}


.tr-custom-final-cta__action small {
	max-width: 340px;

	color:
		rgba(6, 16, 13, .55);

	font-size: 8px;
	font-weight: 700;
	line-height: 1.6;
}


/* =========================================================
 * Project Input
 * ======================================================= */

.tr-custom-final-cta__input {
	display: flex;
	flex-direction: column;

	min-width: 0;

	color:
		#fff;

	background:
		#07120e;

	border-left:
		1px solid rgba(6, 16, 13, .16);
}


/* =========================================================
 * Input Top
 * ======================================================= */

.tr-custom-final-cta__input-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;

	min-height: 56px;
	padding:
		0 20px;

	color:
		rgba(255, 255, 255, .28);

	border-bottom:
		1px solid rgba(255, 255, 255, .075);

	font-size: 6px;
	font-weight: 850;
	letter-spacing: .11em;
}


.tr-custom-final-cta__input-top > div {
	display: flex;
	align-items: center;
	gap: 9px;
}


.tr-custom-final-cta__status {
	width: 6px;
	height: 6px;

	background:
		var(--tr-green);

	border-radius:
		50%;

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


/* =========================================================
 * Signal List
 * ======================================================= */

.tr-custom-final-cta__signal-list {
	flex: 1;

	display: grid;
	align-content: center;

	padding:
		24px 28px;
}


.tr-custom-final-cta__signal {
	display: grid;

	grid-template-columns:
		34px
		minmax(0, 1fr)
		34px;

	align-items: center;

	gap: 14px;

	min-height: 78px;

	border-bottom:
		1px solid rgba(255, 255, 255, .065);
}


.tr-custom-final-cta__signal:last-child {
	border-bottom: 0;
}


.tr-custom-final-cta__signal > span {
	color:
		var(--tr-green);

	font-size: 6px;
	font-weight: 850;
}


.tr-custom-final-cta__signal > strong {
	color:
		rgba(255, 255, 255, .68);

	font-size: 10px;
	font-weight: 750;
	line-height: 1.45;
}


.tr-custom-final-cta__signal > i {
	justify-self: end;

	width: 8px;
	height: 8px;

	border:
		2px solid rgba(25, 224, 120, .7);

	border-radius:
		50%;

	box-shadow:
		0 0 0 5px rgba(25, 224, 120, .035);
}


/* =========================================================
 * Input Footer
 * ======================================================= */

.tr-custom-final-cta__input-footer {
	display: flex;
	align-items: center;
	gap: 8px;

	min-height: 58px;
	padding:
		0 20px;

	color:
		rgba(255, 255, 255, .18);

	border-top:
		1px solid rgba(255, 255, 255, .075);

	font-size: 5px;
	font-weight: 850;
	letter-spacing: .08em;
}


.tr-custom-final-cta__input-footer i {
	flex: 1;

	height: 1px;

	background:
		rgba(255, 255, 255, .075);
}


.tr-custom-final-cta__input-footer strong {
	color:
		var(--tr-green);

	font-size: inherit;
	font-weight: inherit;
}


/* =========================================================
 * Footer Rail
 * ======================================================= */

.tr-custom-final-cta__rail {
	display: flex;
	align-items: center;
	gap: 11px;

	margin-top: 28px;
	padding:
		0 5px;

	color:
		rgba(6, 16, 13, .42);

	font-size: 6px;
	font-weight: 900;
	letter-spacing: .1em;
}


.tr-custom-final-cta__rail i {
	flex: 1;

	height: 1px;

	background:
		rgba(6, 16, 13, .17);
}


.tr-custom-final-cta__rail strong {
	color:
		#06100d;

	font-size: inherit;
	font-weight: 900;
}


/* =========================================================
 * Tablet
 * ======================================================= */

@media (max-width: 1000px) {

	.tr-custom-final-cta__panel {
		grid-template-columns: 1fr;
	}


	.tr-custom-final-cta__input {
		border-top:
			1px solid rgba(6, 16, 13, .18);

		border-left:
			0;
	}


	.tr-custom-final-cta__signal-list {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap:
			0 26px;
	}


	.tr-custom-final-cta__signal:last-child {
		grid-column:
			1 / -1;
	}

}


/* =========================================================
 * Mobile
 * ======================================================= */

@media (max-width: 720px) {

	.tr-custom-final-cta {
		padding:
			88px
			16px;
	}


	.tr-custom-final-cta__content {
		padding:
			42px 24px;
	}


	.tr-custom-final-cta__content h2 {
		font-size:
			clamp(46px, 13vw, 66px);
	}


	.tr-custom-final-cta__action {
		align-items: flex-start;
		flex-direction: column;
	}


	.tr-custom-final-cta .tr-custom-final-cta__button,
	.tr-custom-final-cta .tr-custom-final-cta__button:hover,
	.tr-custom-final-cta .tr-custom-final-cta__button:focus {
		width: 100%;
	}


	.tr-custom-final-cta__signal-list {
		grid-template-columns: 1fr;

		padding:
			20px 22px;
	}


	.tr-custom-final-cta__signal:last-child {
		grid-column: auto;
	}


	.tr-custom-final-cta__rail {
		flex-wrap: wrap;
		gap: 8px;

		line-height: 1.7;
	}


	.tr-custom-final-cta__rail i {
		min-width: 20px;
	}

}