/* =========================================================
 * Tech Resolve — Custom Website Development Fit
 * ======================================================= */

.tr-custom-fit {
	position: relative;
	overflow: hidden;

	padding:
		clamp(110px, 10vw, 175px)
		var(--tr-gutter);

	color:
		#101c15;

	background:
		#f4f6f3;
}


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

.tr-custom-fit::before {
	content: "";

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

	width: 760px;
	height: 760px;

	pointer-events: none;

	background:
		radial-gradient(
			circle,
			rgba(20, 215, 232, .06),
			transparent 68%
		);
}


.tr-custom-fit::after {
	content: "";

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

	width: 780px;
	height: 780px;

	pointer-events: none;

	background:
		radial-gradient(
			circle,
			rgba(25, 224, 120, .055),
			transparent 69%
		);
}


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

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

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

	margin:
		0 auto;
}


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

.tr-custom-fit__header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.08fr)
		minmax(330px, .75fr);

	align-items: end;

	gap:
		clamp(50px, 8vw, 120px);

	margin-bottom:
		clamp(65px, 8vw, 100px);
}


.tr-custom-fit__eyebrow {
	display: block;

	margin-bottom: 18px;

	color:
		var(--tr-green-deep);

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


.tr-custom-fit__header h2 {
	max-width: 920px;

	margin: 0;

	color:
		#0b1811;

	font-size:
		clamp(44px, 5.15vw, 74px);

	font-weight: 800;
	line-height: .99;
	letter-spacing: -.055em;
}


.tr-custom-fit__intro > p {
	max-width: 580px;

	margin: 0;

	color:
		#69766e;

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


/* =========================================================
 * Intro Meta
 * ======================================================= */

.tr-custom-fit__intro-meta {
	display: flex;
	align-items: center;
	gap: 9px;

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

	border-top:
		1px solid #d9e0dc;

	color:
		#9ba59f;

	font-size: 6px;
	font-weight: 800;
	letter-spacing: .08em;
}


.tr-custom-fit__intro-meta i {
	flex: 1;

	height: 1px;

	background:
		#d8dfdb;
}


.tr-custom-fit__intro-meta strong {
	color:
		var(--tr-green-deep);

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


/* =========================================================
 * Workspace
 * ======================================================= */

.tr-custom-fit__workspace {
	position: relative;
	overflow: hidden;

	background:
		#fff;

	border:
		1px solid #dce4df;

	border-radius:
		25px;

	box-shadow:
		0 38px 110px rgba(9, 31, 18, .07);
}


/* =========================================================
 * Workspace Top
 * ======================================================= */

.tr-custom-fit__workspace-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

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

	color:
		#929c96;

	border-bottom:
		1px solid #e2e8e4;

	font-size: 7px;
	font-weight: 800;
	letter-spacing: .12em;
}


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


.tr-custom-fit__status {
	width: 6px;
	height: 6px;

	background:
		var(--tr-green);

	border-radius:
		50%;

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


/* =========================================================
 * Decision
 * ======================================================= */

.tr-custom-fit__decision {
	display: grid;

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

	align-items: stretch;

	min-height: 340px;

	border-bottom:
		1px solid #e2e8e4;
}


/* =========================================================
 * Decision Side
 * ======================================================= */

.tr-custom-fit__decision-side {
	display: grid;

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

	gap: 22px;

	padding:
		clamp(38px, 5vw, 60px);
}


.tr-custom-fit__decision-side--standard {
	background:
		#fafcfb;
}


.tr-custom-fit__decision-side--custom {
	background:
		linear-gradient(
			145deg,
			#07140f,
			#0a1912
		);

	color:
		#fff;
}


.tr-custom-fit__decision-index {
	display: grid;
	place-items: center;

	align-self: start;

	width: 43px;
	height: 43px;

	color:
		#93a098;

	border:
		1px solid #dce4df;

	border-radius:
		50%;

	font-size: 7px;
	font-weight: 800;
}


.tr-custom-fit__decision-side--custom .tr-custom-fit__decision-index {
	color:
		var(--tr-green);

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

	background:
		rgba(25, 224, 120, .035);
}


.tr-custom-fit__decision-side > div:last-child > span {
	display: block;

	margin-bottom: 12px;

	color:
		#9aa59f;

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


.tr-custom-fit__decision-side--custom > div:last-child > span {
	color:
		var(--tr-green);
}


.tr-custom-fit__decision-side h3 {
	max-width: 460px;

	margin: 0;

	color:
		#15221a;

	font-size:
		clamp(27px, 3vw, 42px);

	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.04em;
}


.tr-custom-fit__decision-side--custom h3 {
	color:
		#fff;
}


.tr-custom-fit__decision-side p {
	max-width: 520px;

	margin:
		18px
		0
		0;

	color:
		#748078;

	font-size: 11px;
	line-height: 1.72;
}


.tr-custom-fit__decision-side--custom p {
	color:
		rgba(255, 255, 255, .44);
}


/* =========================================================
 * Boundary
 * ======================================================= */

.tr-custom-fit__boundary {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 13px;

	color:
		#9aa49e;

	background:
		#f1f4f2;

	border-left:
		1px solid #dfe6e1;

	border-right:
		1px solid #dfe6e1;

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


.tr-custom-fit__boundary > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
}


.tr-custom-fit__boundary i {
	width: 1px;
	height: 44px;

	background:
		linear-gradient(
			to bottom,
			#d7ded9,
			var(--tr-green-deep),
			#d7ded9
		);
}


.tr-custom-fit__boundary strong {
	display: grid;
	place-items: center;

	width: 42px;
	height: 42px;

	color:
		#07120e;

	background:
		var(--tr-green);

	border-radius:
		50%;

	font-size: 15px;
	font-weight: 900;

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


/* =========================================================
 * Signals
 * ======================================================= */

.tr-custom-fit__signals {
	background:
		#fff;
}


/* =========================================================
 * Signals Head
 * ======================================================= */

.tr-custom-fit__signals-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;

	min-height: 68px;
	padding:
		0 30px;

	border-bottom:
		1px solid #e2e8e4;
}


.tr-custom-fit__signals-head > span {
	color:
		var(--tr-green-deep);

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


.tr-custom-fit__signals-head > strong {
	color:
		#a0aaa4;

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


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

.tr-custom-fit__signal {
	display: grid;

	grid-template-columns:
		115px
		minmax(160px, .58fr)
		minmax(240px, 1fr)
		minmax(270px, 1.15fr)
		34px;

	align-items: center;

	gap: 24px;

	min-height: 136px;

	padding:
		23px 30px;

	border-bottom:
		1px solid #e5eae7;

	transition:
		background 180ms ease;
}


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


.tr-custom-fit__signal:hover {
	background:
		linear-gradient(
			90deg,
			rgba(25, 224, 120, .025),
			transparent 72%
		);
}


/* =========================================================
 * Signal ID
 * ======================================================= */

.tr-custom-fit__signal-id {
	display: grid;
	gap: 7px;
}


.tr-custom-fit__signal-id > span {
	color:
		#aeb8b2;

	font-size: 7px;
	font-weight: 800;
}


.tr-custom-fit__signal-id > strong {
	color:
		var(--tr-green-deep);

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


/* =========================================================
 * Signal Title
 * ======================================================= */

.tr-custom-fit__signal-title h3 {
	margin: 0;

	color:
		#17231c;

	font-size:
		clamp(17px, 1.55vw, 21px);

	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
}


/* =========================================================
 * Signal Question / Custom
 * ======================================================= */

.tr-custom-fit__signal-question,
.tr-custom-fit__signal-custom {
	padding-left: 21px;

	border-left:
		1px solid #e2e8e4;
}


.tr-custom-fit__signal-question > span,
.tr-custom-fit__signal-custom > span {
	display: block;

	margin-bottom: 7px;

	color:
		#a1aba5;

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


.tr-custom-fit__signal-custom > span {
	color:
		var(--tr-green-deep);
}


.tr-custom-fit__signal-question p,
.tr-custom-fit__signal-custom p {
	margin: 0;

	color:
		#718078;

	font-size: 9px;
	line-height: 1.66;
}


.tr-custom-fit__signal-custom p {
	color:
		#536158;
}


/* =========================================================
 * Signal Mark
 * ======================================================= */

.tr-custom-fit__signal-mark {
	display: flex;
	justify-content: flex-end;
}


.tr-custom-fit__signal-mark i {
	width: 8px;
	height: 8px;

	background:
		var(--tr-green);

	border-radius:
		50%;

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


/* =========================================================
 * Principle
 * ======================================================= */

.tr-custom-fit__principle {
	display: grid;

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

	align-items: center;

	gap:
		clamp(35px, 5vw, 70px);

	padding:
		clamp(42px, 5vw, 65px);

	color:
		#fff;

	background:
		#08150f;

	border-top:
		1px solid #dce4df;
}


/* =========================================================
 * Principle Mark
 * ======================================================= */

.tr-custom-fit__principle-mark {
	display: grid;
	justify-items: start;
	gap: 3px;
}


.tr-custom-fit__principle-mark > span {
	color:
		rgba(255, 255, 255, .25);

	font-size: 7px;
	font-weight: 800;
	letter-spacing: .12em;
}


.tr-custom-fit__principle-mark > strong {
	color:
		var(--tr-green);

	font-size:
		clamp(43px, 4vw, 58px);

	font-weight: 850;
	line-height: .9;
	letter-spacing: -.055em;
}


/* =========================================================
 * Principle Copy
 * ======================================================= */

.tr-custom-fit__principle-copy > span {
	display: block;

	margin-bottom: 12px;

	color:
		var(--tr-green);

	font-size: 7px;
	font-weight: 800;
	letter-spacing: .11em;
}


.tr-custom-fit__principle-copy h3 {
	max-width: 770px;

	margin: 0;

	color:
		#fff;

	font-size:
		clamp(27px, 3.2vw, 44px);

	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.043em;
}


.tr-custom-fit__principle-copy p {
	max-width: 710px;

	margin:
		18px
		0
		0;

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

	font-size: 10px;
	line-height: 1.72;
}


/* =========================================================
 * Principle Flow
 * ======================================================= */

.tr-custom-fit__principle-flow {
	display: flex;
	flex-direction: column;
	gap: 8px;

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

	font-size: 6px;
	font-weight: 800;
	letter-spacing: .09em;
}


.tr-custom-fit__principle-flow span,
.tr-custom-fit__principle-flow strong {
	padding:
		8px 0;

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


.tr-custom-fit__principle-flow strong {
	color:
		var(--tr-green);

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


.tr-custom-fit__principle-flow i {
	width: 1px;
	height: 9px;

	margin-left: 4px;

	background:
		rgba(25, 224, 120, .25);
}


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

@media (max-width: 1100px) {

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


	.tr-custom-fit__boundary {
		flex-direction: row;

		min-height: 78px;

		border:
			0;

		border-top:
			1px solid #dfe6e1;

		border-bottom:
			1px solid #dfe6e1;
	}


	.tr-custom-fit__boundary > div {
		flex-direction: row;
	}


	.tr-custom-fit__boundary i {
		width: 45px;
		height: 1px;

		background:
			linear-gradient(
				to right,
				#d7ded9,
				var(--tr-green-deep),
				#d7ded9
			);
	}


	.tr-custom-fit__signal {
		grid-template-columns:
			90px
			minmax(160px, .6fr)
			minmax(0, 1fr);

		gap: 20px;
	}


	.tr-custom-fit__signal-question {
		grid-column:
			3;
	}


	.tr-custom-fit__signal-custom {
		grid-column:
			2 / 4;

		padding:
			17px 0 0;

		border-top:
			1px solid #e2e8e4;

		border-left:
			0;
	}


	.tr-custom-fit__signal-mark {
		display: none;
	}


	.tr-custom-fit__principle {
		grid-template-columns:
			125px
			minmax(0, 1fr);
	}


	.tr-custom-fit__principle-flow {
		grid-column:
			2;
	}

}


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

@media (max-width: 720px) {

	.tr-custom-fit {
		padding:
			90px
			16px;
	}


	.tr-custom-fit__header {
		grid-template-columns: 1fr;
		gap: 30px;

		margin-bottom: 50px;
	}


	.tr-custom-fit__header h2 {
		font-size:
			clamp(40px, 11vw, 58px);
	}


	.tr-custom-fit__intro-meta {
		display: none;
	}


	.tr-custom-fit__decision-side {
		grid-template-columns: 1fr;

		gap: 18px;

		padding:
			32px 22px;
	}


	.tr-custom-fit__decision-index {
		width: 38px;
		height: 38px;
	}


	.tr-custom-fit__boundary {
		padding:
			0 18px;
	}


	.tr-custom-fit__signals-head {
		align-items: flex-start;
		flex-direction: column;
		justify-content: center;
		gap: 5px;

		padding:
			17px 20px;
	}


	.tr-custom-fit__signals-head > strong {
		display: none;
	}


	.tr-custom-fit__signal {
		grid-template-columns:
			60px
			minmax(0, 1fr);

		gap:
			14px 16px;

		padding:
			24px 20px;
	}


	.tr-custom-fit__signal-title {
		grid-column:
			2;
	}


	.tr-custom-fit__signal-question,
	.tr-custom-fit__signal-custom {
		grid-column:
			2;

		padding:
			14px 0 0;

		border-top:
			1px solid #e2e8e4;

		border-left:
			0;
	}


	.tr-custom-fit__principle {
		grid-template-columns: 1fr;

		gap: 28px;

		padding:
			36px 24px;
	}


	.tr-custom-fit__principle-flow {
		grid-column: auto;
	}

}