/* =========================================================
 * Tech Resolve — Build Sequence Command Center
 * Version: 1.0.0
 * ======================================================= */


/* =========================================================
 * Section
 * ======================================================= */

.tr-process {
	--tr-process-accent: #19e078;
	--tr-process-accent-rgb: 25, 224, 120;
	--tr-process-progress: 0%;

	position: relative;
	isolation: isolate;

	padding:
		82px
		0
		88px;

	overflow: hidden;

	background:
		#050b10;
}


.tr-process[data-tr-process-mode="webshop"] {
	--tr-process-accent: #14d7e8;
	--tr-process-accent-rgb: 20, 215, 232;
}


.tr-process[data-tr-process-mode="hosting"] {
	--tr-process-accent: #8757ff;
	--tr-process-accent-rgb: 135, 87, 255;
}


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

.tr-process__background {
	position: absolute;
	z-index: -2;

	inset: 0;

	overflow: hidden;

	pointer-events: none;
}


.tr-process__background-grid {
	position: absolute;

	top: 22%;
	right: -12%;

	width: 72%;
	height: 720px;

	background-image:
		linear-gradient(
			rgba(25, 224, 120, 0.035) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(25, 224, 120, 0.035) 1px,
			transparent 1px
		);

	background-size:
		54px
		54px;

	mask-image:
		radial-gradient(
			ellipse at center,
			#000,
			transparent 73%
		);

	transform:
		perspective(700px)
		rotateX(61deg)
		rotateZ(-5deg);

	transform-origin:
		center;
}


.tr-process__background-glow {
	position: absolute;

	border-radius: 50%;
}


.tr-process__background-glow--one {
	top: 20%;
	left: -280px;

	width: 620px;
	height: 620px;

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


.tr-process__background-glow--two {
	right: -270px;
	bottom: -250px;

	width: 720px;
	height: 720px;

	background:
		radial-gradient(
			circle,
			rgba(20, 215, 232, 0.045),
			rgba(135, 87, 255, 0.025) 42%,
			transparent 72%
		);
}


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

.tr-process__shell {
	width: min(
		calc(100% - (var(--tr-gutter) * 2)),
		var(--tr-container-wide)
	);

	margin-inline: auto;
}


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

.tr-process__header {
	max-width: 970px;

	margin-bottom:
		48px;
}


.tr-process__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 11px;

	margin-bottom: 18px;

	color:
		rgba(176, 255, 218, 0.75);

	font-size:
		clamp(10px, 0.72vw, 12px);

	font-weight: 820;

	letter-spacing:
		0.15em;

	line-height: 1.4;
}


.tr-process__eyebrow-dot {
	position: relative;

	width: 7px;
	height: 7px;

	border-radius: 50%;

	background:
		var(--tr-green);

	box-shadow:
		0 0 15px rgba(25, 224, 120, 0.6);
}


.tr-process__title {
	max-width: 930px;

	margin:
		0
		0
		20px;

	color:
		#f5faf8;

	font-size:
		clamp(43px, 4.6vw, 72px);

	font-weight: 790;

	line-height:
		1.01;

	letter-spacing:
		-0.052em;

	text-wrap:
		balance;
}


.tr-process__description {
	max-width: 720px;

	margin: 0;

	color:
		rgba(211, 225, 220, 0.66);

	font-size:
		clamp(15px, 1vw, 17px);

	line-height:
		1.7;
}


/* =========================================================
 * Command Center
 * ======================================================= */

.tr-process__console {
	position: relative;
	isolation: isolate;

	padding:
		27px
		0
		0;

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

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

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.015),
			rgba(255, 255, 255, 0.004) 60%,
			transparent
		);
}


.tr-process__console::before {
	content: "";

	position: absolute;

	top: -1px;
	left: 0;

	width: 30%;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			var(--tr-process-accent),
			transparent
		);

	box-shadow:
		0 0 18px rgba(var(--tr-process-accent-rgb), 0.22);

	transition:
		background 350ms ease;
}


/* =========================================================
 * Services
 * ======================================================= */

.tr-process__services {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 12px;

	margin-bottom: 14px;
}


.tr-process__service {
	position: relative;
	isolation: isolate;

	display: grid;

	grid-template-columns:
		46px
		1fr
		30px;

	align-items: center;

	gap: 14px;

	min-height: 72px;

	padding:
		12px
		16px;

	overflow: hidden;

	border: 0;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.045),
			rgba(255, 255, 255, 0.012)
		);

	color:
		rgba(233, 244, 240, 0.68);

	cursor: pointer;

	clip-path:
		polygon(
			0 0,
			calc(100% - 16px) 0,
			100% 16px,
			100% 100%,
			16px 100%,
			0 calc(100% - 16px)
		);

	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.055);

	transition:
		color 300ms ease,
		background 350ms ease,
		transform 400ms var(--tr-ease),
		box-shadow 300ms ease;
}


.tr-process__service::before {
	content: "";

	position: absolute;
	z-index: -1;

	inset: 0;

	background:
		radial-gradient(
			300px circle at 10% 50%,
			rgba(var(--tr-process-accent-rgb), 0.14),
			transparent 65%
		);

	opacity: 0;

	transition:
		opacity 320ms ease;
}


.tr-process__service::after {
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 0;
	height: 2px;

	background:
		var(--tr-process-accent);

	box-shadow:
		0 0 14px rgba(var(--tr-process-accent-rgb), 0.45);

	transition:
		width 450ms var(--tr-ease);
}


.tr-process__service:hover,
.tr-process__service.is-active {
	color:
		#ffffff;

	background:
		linear-gradient(
			135deg,
			rgba(var(--tr-process-accent-rgb), 0.09),
			rgba(255, 255, 255, 0.018)
		);

	transform:
		translateY(-3px);

	box-shadow:
		inset 0 0 0 1px rgba(var(--tr-process-accent-rgb), 0.16),
		0 16px 40px rgba(0, 0, 0, 0.14);
}


.tr-process__service:hover::before,
.tr-process__service.is-active::before {
	opacity: 1;
}


.tr-process__service.is-active::after {
	width: 100%;
}


/* =========================================================
 * Service Icon
 * ======================================================= */

.tr-process__service-icon {
	display: grid;
	place-items: center;

	width: 46px;
	height: 46px;

	border:
		1px solid rgba(255, 255, 255, 0.06);

	background:
		rgba(255, 255, 255, 0.035);

	color:
		rgba(222, 237, 232, 0.65);

	clip-path:
		polygon(
			0 0,
			calc(100% - 10px) 0,
			100% 10px,
			100% 100%,
			10px 100%,
			0 calc(100% - 10px)
		);

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


.tr-process__service:hover
.tr-process__service-icon,
.tr-process__service.is-active
.tr-process__service-icon {
	color:
		var(--tr-process-accent);

	background:
		rgba(var(--tr-process-accent-rgb), 0.10);

	transform:
		rotate(-4deg)
		scale(1.04);
}


.tr-process__service-icon svg {
	width: 22px;
	height: 22px;
}


.tr-process__service-title {
	font-size: 15px;
	font-weight: 720;

	text-align: left;
}


.tr-process__service-arrow {
	display: grid;
	place-items: center;

	width: 30px;
	height: 30px;

	color:
		rgba(234, 244, 241, 0.35);

	transition:
		color 300ms ease,
		transform 350ms var(--tr-ease);
}


.tr-process__service-arrow svg {
	width: 17px;
	height: 17px;
}


.tr-process__service:hover
.tr-process__service-arrow,
.tr-process__service.is-active
.tr-process__service-arrow {
	color:
		var(--tr-process-accent);

	transform:
		translateX(4px);
}


/* =========================================================
 * Service Context
 * ======================================================= */

.tr-process__service-context {
	position: relative;
	isolation: isolate;

	display: grid;

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

	align-items: center;

	gap: 25px;

	min-height: 135px;

	padding:
		20px
		28px;

	overflow: hidden;

	border:
		1px solid rgba(255, 255, 255, 0.055);

	background:
		linear-gradient(
			100deg,
			rgba(var(--tr-process-accent-rgb), 0.07),
			rgba(255, 255, 255, 0.018) 42%,
			rgba(255, 255, 255, 0.01)
		);

	clip-path:
		polygon(
			0 0,
			calc(100% - 24px) 0,
			100% 24px,
			100% 100%,
			24px 100%,
			0 calc(100% - 24px)
		);

	transition:
		background 350ms ease;
}


.tr-process__service-index {
	color:
		transparent;

	font-size: 78px;
	font-weight: 850;

	line-height: 0.8;

	letter-spacing:
		-0.08em;

	-webkit-text-stroke:
		1px
		rgba(var(--tr-process-accent-rgb), 0.28);

	transition:
		-webkit-text-stroke 300ms ease;
}


.tr-process__service-copy {
	max-width: 680px;
}


.tr-process__service-copy h3 {
	margin:
		0
		0
		8px;

	color:
		#f4faf7;

	font-size: 20px;
	font-weight: 740;

	letter-spacing:
		-0.025em;
}


.tr-process__service-copy p {
	margin: 0;

	color:
		rgba(210, 225, 219, 0.61);

	font-size: 13px;

	line-height:
		1.62;
}


/* =========================================================
 * Service Orbit
 * ======================================================= */

.tr-process__service-orbit {
	position: relative;

	width: 112px;
	height: 112px;

	margin-left: auto;

	border:
		1px solid rgba(var(--tr-process-accent-rgb), 0.13);

	border-radius: 50%;
}


.tr-process__service-orbit::before {
	content: "";

	position: absolute;

	inset: 17px;

	border:
		1px dashed rgba(var(--tr-process-accent-rgb), 0.12);

	border-radius: 50%;

	animation:
		tr-process-orbit
		15s
		linear
		infinite;
}


.tr-process__service-orbit span {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 27px;
	height: 27px;

	border:
		1px solid rgba(var(--tr-process-accent-rgb), 0.22);

	background:
		rgba(var(--tr-process-accent-rgb), 0.12);

	transform:
		translate(-50%, -50%)
		rotate(45deg);

	box-shadow:
		0 0 25px rgba(var(--tr-process-accent-rgb), 0.08);
}


@keyframes tr-process-orbit {

	to {
		transform:
			rotate(360deg);
	}

}


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

.tr-process__sequence {
	position: relative;
	isolation: isolate;

	margin-top: 14px;

	padding:
		78px
		44px
		38px;

	overflow: hidden;

	border:
		1px solid rgba(255, 255, 255, 0.05);

	background:
		linear-gradient(
			180deg,
			rgba(8, 19, 25, 0.82),
			rgba(5, 13, 18, 0.94)
		);

	clip-path:
		polygon(
			22px 0,
			100% 0,
			100% calc(100% - 22px),
			calc(100% - 22px) 100%,
			0 100%,
			0 22px
		);
}


.tr-process__sequence::before {
	content: "";

	position: absolute;
	z-index: -1;

	top: -220px;
	left: 50%;

	width: 720px;
	height: 460px;

	border-radius: 50%;

	background:
		radial-gradient(
			ellipse,
			rgba(var(--tr-process-accent-rgb), 0.08),
			transparent 70%
		);

	transform:
		translateX(-50%);

	transition:
		background 350ms ease;
}


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

.tr-process__sequence-grid {
	position: absolute;
	z-index: -2;

	inset: 0;

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

	background-size:
		42px
		42px;

	mask-image:
		linear-gradient(
			to bottom,
			transparent,
			#000 20%,
			#000 75%,
			transparent
		);
}


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

.tr-process__rail {
	position: relative;

	height: 155px;

	margin:
		0
		60px
		55px;
}


.tr-process__rail-line,
.tr-process__rail-progress {
	position: absolute;

	top: 50%;
	left: 0;

	height: 2px;

	transform:
		translateY(-50%);

	pointer-events: none;
}


.tr-process__rail-line {
	width: 100%;

	background:
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.08),
			rgba(255, 255, 255, 0.13),
			rgba(255, 255, 255, 0.08)
		);
}


.tr-process__rail-progress {
	width:
		var(--tr-process-progress);

	background:
		linear-gradient(
			90deg,
			var(--tr-process-accent),
			rgba(var(--tr-process-accent-rgb), 0.48)
		);

	box-shadow:
		0 0 15px rgba(var(--tr-process-accent-rgb), 0.34);

	transition:
		width 650ms var(--tr-ease),
		background 350ms ease;
}


/* =========================================================
 * Steps
 * ======================================================= */

.tr-process__step {
	position: absolute;

	top: 50%;
	left:
		var(--tr-process-step-position);

	display: flex;
	flex-direction: column;
	align-items: center;

	width: 150px;

	padding: 0;

	border: 0;

	background: none;

	color:
		rgba(213, 226, 221, 0.44);

	cursor: pointer;

	transform:
		translate(-50%, -50%);

	transition:
		color 300ms ease;
}


.tr-process__step-node {
	position: relative;

	display: grid;
	place-items: center;

	width: 44px;
	height: 44px;

	margin-bottom: 13px;

	border:
		1px solid rgba(255, 255, 255, 0.12);

	border-radius: 50%;

	background:
		#08151b;

	box-shadow:
		0 0 0 7px rgba(255, 255, 255, 0.018);

	transition:
		transform 450ms var(--tr-ease),
		border-color 300ms ease,
		background 300ms ease,
		box-shadow 350ms ease;
}


.tr-process__step-node::before {
	content: "";

	position: absolute;

	inset: -9px;

	border:
		1px solid rgba(var(--tr-process-accent-rgb), 0);

	border-radius: 50%;

	transition:
		border-color 300ms ease,
		transform 450ms var(--tr-ease);
}


.tr-process__step-node-core {
	display: block;

	width: 10px;
	height: 10px;

	border-radius: 50%;

	background:
		rgba(255, 255, 255, 0.18);

	transition:
		background 300ms ease,
		transform 400ms var(--tr-ease),
		box-shadow 300ms ease;
}


.tr-process__step:hover,
.tr-process__step.is-active {
	color:
		#ffffff;
}


.tr-process__step:hover
.tr-process__step-node,
.tr-process__step.is-active
.tr-process__step-node {
	border-color:
		rgba(var(--tr-process-accent-rgb), 0.55);

	background:
		rgba(var(--tr-process-accent-rgb), 0.10);

	box-shadow:
		0 0 0 7px rgba(var(--tr-process-accent-rgb), 0.04),
		0 0 28px rgba(var(--tr-process-accent-rgb), 0.12);

	transform:
		scale(1.12);
}


.tr-process__step.is-active
.tr-process__step-node::before {
	border-color:
		rgba(var(--tr-process-accent-rgb), 0.16);

	transform:
		scale(1.18);
}


.tr-process__step:hover
.tr-process__step-node-core,
.tr-process__step.is-active
.tr-process__step-node-core {
	background:
		var(--tr-process-accent);

	box-shadow:
		0 0 14px rgba(var(--tr-process-accent-rgb), 0.72);

	transform:
		scale(1.18);
}


.tr-process__step-number {
	margin-bottom: 4px;

	color:
		var(--tr-process-accent);

	font-size: 9px;
	font-weight: 820;

	letter-spacing:
		0.12em;

	opacity: 0.7;
}


.tr-process__step-title {
	font-size: 12px;
	font-weight: 690;

	white-space: nowrap;
}


/* =========================================================
 * Inspector
 * ======================================================= */

.tr-process__inspector {
	position: relative;

	display: grid;

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

	align-items: center;

	gap: 28px;

	min-height: 150px;

	padding:
		24px
		30px;

	border:
		1px solid rgba(255, 255, 255, 0.07);

	background:
		linear-gradient(
			110deg,
			rgba(var(--tr-process-accent-rgb), 0.085),
			rgba(255, 255, 255, 0.025) 42%,
			rgba(255, 255, 255, 0.012)
		);

	clip-path:
		polygon(
			0 0,
			calc(100% - 22px) 0,
			100% 22px,
			100% 100%,
			22px 100%,
			0 calc(100% - 22px)
		);

	transition:
		background 350ms ease,
		opacity 180ms ease,
		transform 180ms ease;
}


.tr-process__inspector.is-switching {
	opacity: 0.3;

	transform:
		translateY(5px);
}


.tr-process__inspector-number {
	color:
		transparent;

	font-size: 94px;
	font-weight: 860;

	line-height: 0.76;

	letter-spacing:
		-0.08em;

	-webkit-text-stroke:
		1px
		rgba(var(--tr-process-accent-rgb), 0.32);

	transition:
		-webkit-text-stroke 350ms ease;
}


.tr-process__inspector-copy {
	max-width: 650px;
}


.tr-process__inspector-copy h3 {
	margin:
		0
		0
		9px;

	color:
		#f4faf7;

	font-size:
		clamp(19px, 1.55vw, 24px);

	font-weight: 750;

	letter-spacing:
		-0.03em;
}


.tr-process__inspector-copy p {
	margin: 0;

	color:
		rgba(211, 225, 220, 0.61);

	font-size: 13px;

	line-height:
		1.65;
}


/* =========================================================
 * Inspector Visual
 * ======================================================= */

.tr-process__inspector-visual {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 9px;

	height: 80px;
}


.tr-process__inspector-visual span {
	display: block;

	width: 18px;

	border-radius:
		4px
		4px
		1px
		1px;

	background:
		linear-gradient(
			to top,
			rgba(var(--tr-process-accent-rgb), 0.15),
			var(--tr-process-accent)
		);

	box-shadow:
		0 0 15px rgba(var(--tr-process-accent-rgb), 0.06);

	transition:
		height 650ms var(--tr-ease),
		background 350ms ease;
}


.tr-process__inspector-visual span:nth-child(1) {
	height: 24%;
}


.tr-process__inspector-visual span:nth-child(2) {
	height: 41%;
}


.tr-process__inspector-visual span:nth-child(3) {
	height: 58%;
}


.tr-process__inspector-visual span:nth-child(4) {
	height: 75%;
}


.tr-process__inspector-visual span:nth-child(5) {
	height: 100%;
}


/* =========================================================
 * CTA
 * ======================================================= */

.tr-process__cta {
	position: relative;
	isolation: isolate;

	display: grid;

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

	align-items: center;

	gap: 50px;

	min-height: 190px;

	margin-top: 14px;

	padding:
		32px
		36px;

	overflow: hidden;

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

	background:
		linear-gradient(
			105deg,
			rgba(10, 30, 27, 0.70),
			rgba(7, 18, 26, 0.68) 50%,
			rgba(12, 15, 30, 0.64)
		);
}


.tr-process__cta-energy {
	position: absolute;
	z-index: -1;

	right: -4%;
	bottom: -110px;
	left: 26%;

	height: 190px;

	background:
		linear-gradient(
			100deg,
			transparent,
			rgba(25, 224, 120, 0.16),
			rgba(20, 215, 232, 0.12),
			rgba(135, 87, 255, 0.12),
			transparent
		);

	filter:
		blur(35px);

	transform:
		skewY(-8deg);

	opacity: 0.72;

	pointer-events: none;
}


.tr-process__cta-copy {
	max-width: 700px;
}


.tr-process__cta-eyebrow {
	display: block;

	margin-bottom: 9px;

	color:
		var(--tr-green);

	font-size: 10px;
	font-weight: 820;

	letter-spacing:
		0.14em;
}


.tr-process__cta-copy h3 {
	max-width: 650px;

	margin:
		0
		0
		10px;

	color:
		#ffffff;

	font-size:
		clamp(26px, 2.5vw, 38px);

	font-weight: 770;

	line-height:
		1.08;

	letter-spacing:
		-0.04em;
}


.tr-process__cta-copy p {
	max-width: 620px;

	margin: 0;

	color:
		rgba(215, 228, 224, 0.62);

	font-size: 13px;

	line-height:
		1.65;
}


/* =========================================================
 * CTA Button
 * ======================================================= */

.tr-process__cta-button {
	display: inline-flex;
	align-items: center;
	gap: 14px;

	min-height: 58px;

	padding:
		0
		10px
		0
		23px;

	border:
		1px solid rgba(61, 247, 152, 0.40);

	border-radius: 17px;

	background:
		linear-gradient(
			135deg,
			#21e981,
			#0bc96a
		);

	color:
		#03170d;

	font-size: 13px;
	font-weight: 780;

	text-decoration: none;

	box-shadow:
		0 16px 38px rgba(15, 211, 106, 0.16);

	transition:
		transform 380ms var(--tr-ease),
		box-shadow 300ms ease,
		filter 300ms ease;
}


.tr-process__cta-button:hover {
	color:
		#021209;

	transform:
		translateY(-4px);

	filter:
		brightness(1.04)
		saturate(1.06);

	box-shadow:
		0 23px 50px rgba(15, 211, 106, 0.25),
		0 0 32px rgba(25, 224, 120, 0.10);
}


.tr-process__cta-button-icon {
	display: grid;
	place-items: center;

	width: 39px;
	height: 39px;

	border-radius: 12px;

	background:
		rgba(1, 33, 16, 0.13);

	transition:
		transform 350ms var(--tr-ease);
}


.tr-process__cta-button:hover
.tr-process__cta-button-icon {
	transform:
		translateX(4px)
		rotate(-4deg);
}


.tr-process__cta-button-icon svg {
	width: 18px;
	height: 18px;
}


/* =========================================================
 * Entrance
 * ======================================================= */

.tr-has-process-js
.tr-process__header,
.tr-has-process-js
.tr-process__console {
	opacity: 0;

	transform:
		translateY(26px);
}


.tr-has-process-js
.tr-process.is-inview
.tr-process__header,
.tr-has-process-js
.tr-process.is-inview
.tr-process__console {
	opacity: 1;

	transform:
		translateY(0);

	transition:
		opacity 850ms ease,
		transform 950ms var(--tr-ease);
}


.tr-has-process-js
.tr-process.is-inview
.tr-process__console {
	transition-delay:
		150ms;
}


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

@media (max-width: 1050px) {

	.tr-process__service-context {
		grid-template-columns:
			90px
			minmax(0, 1fr)
			100px;
	}


	.tr-process__service-orbit {
		width: 90px;
		height: 90px;
	}


	.tr-process__rail {
		margin-inline:
			45px;
	}


	.tr-process__inspector {
		grid-template-columns:
			100px
			minmax(0, 1fr)
			160px;
	}


	.tr-process__inspector-number {
		font-size: 76px;
	}

}


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

@media (max-width: 720px) {

	.tr-process {
		padding:
			55px
			0
			60px;
	}


	.tr-process__shell {
		width:
			calc(100% - 24px);
	}


	.tr-process__header {
		margin-bottom: 34px;
	}


	.tr-process__title {
		font-size:
			clamp(38px, 10vw, 50px);
	}


	.tr-process__description {
		font-size: 15px;
	}


	/* Services */

	.tr-process__services {
		display: flex;

		gap: 9px;

		overflow-x: auto;

		padding-bottom: 4px;

		scrollbar-width: none;
	}


	.tr-process__services::-webkit-scrollbar {
		display: none;
	}


	.tr-process__service {
		flex:
			0
			0
			220px;

		grid-template-columns:
			40px
			1fr
			26px;

		min-height: 64px;

		padding:
			10px
			13px;
	}


	.tr-process__service-icon {
		width: 40px;
		height: 40px;
	}


	/* Context */

	.tr-process__service-context {
		grid-template-columns:
			65px
			1fr;

		min-height: 125px;

		padding:
			18px;
	}


	.tr-process__service-index {
		font-size: 56px;
	}


	.tr-process__service-orbit {
		display: none;
	}


	/* Sequence */

	.tr-process__sequence {
		padding:
			35px
			18px
			22px;
	}


	.tr-process__rail {
		display: grid;

		gap: 12px;

		height: auto;

		margin:
			0
			0
			25px;

		padding-left: 36px;
	}


	.tr-process__rail-line,
	.tr-process__rail-progress {
		top: 0;
		left: 14px;

		width: 2px;

		transform: none;
	}


	.tr-process__rail-line {
		height: 100%;
	}


	.tr-process__rail-progress {
		width: 2px;

		height:
			var(--tr-process-progress);

		transition:
			height 650ms var(--tr-ease);
	}


	.tr-process__step {
		position: relative;

		top: auto;
		left: auto;

		display: grid;

		grid-template-columns:
			44px
			42px
			1fr;

		align-items: center;

		width: 100%;

		min-height: 54px;

		text-align: left;

		transform: none;
	}


	.tr-process__step-node {
		position: absolute;

		top: 50%;
		left: -42px;

		width: 32px;
		height: 32px;

		margin: 0;

		transform:
			translateY(-50%);
	}


	.tr-process__step:hover
	.tr-process__step-node,
	.tr-process__step.is-active
	.tr-process__step-node {
		transform:
			translateY(-50%)
			scale(1.08);
	}


	.tr-process__step-number {
		margin: 0;

		font-size: 9px;
	}


	.tr-process__step-title {
		font-size: 13px;
	}


	/* Inspector */

	.tr-process__inspector {
		grid-template-columns:
			68px
			1fr;

		gap: 16px;

		min-height: 135px;

		padding:
			20px;
	}


	.tr-process__inspector-number {
		font-size: 56px;
	}


	.tr-process__inspector-visual {
		display: none;
	}


	.tr-process__inspector-copy h3 {
		font-size: 19px;
	}


	.tr-process__inspector-copy p {
		font-size: 12px;
	}


	/* CTA */

	.tr-process__cta {
		grid-template-columns: 1fr;

		gap: 22px;

		min-height: 0;

		padding:
			28px
			20px;
	}


	.tr-process__cta-button {
		width: 100%;

		justify-content:
			space-between;
	}

}


/* =========================================================
 * Reduced Motion
 * ======================================================= */

@media (prefers-reduced-motion: reduce) {

	.tr-process__service-orbit::before {
		animation: none;
	}


	.tr-has-process-js
	.tr-process__header,
	.tr-has-process-js
	.tr-process__console {
		opacity: 1;

		transform: none;

		transition: none;
	}

}