/* =========================================================
 * Tech Resolve — Website Redesign SEO Preservation
 * Search Equity Migration Scene
 * Version: 2.0.0
 * ======================================================= */


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

.tr-redesign-seo-preservation {
	position: relative;

	overflow: hidden;

	padding:
		clamp(100px, 9vw, 155px)
		var(--tr-gutter);

	color:
		#ffffff;

	background:
		linear-gradient(
			145deg,
			#050d0a,
			#07140f 55%,
			#06100d
		);
}


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

.tr-redesign-seo-preservation__background,
.tr-redesign-seo-preservation__grid,
.tr-redesign-seo-preservation__glow {
	position: absolute;

	pointer-events:
		none;
}


.tr-redesign-seo-preservation__background {
	inset:
		0;
}


.tr-redesign-seo-preservation__grid {
	inset:
		0;

	opacity:
		0.10;

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

	background-size:
		64px
		64px;
}


.tr-redesign-seo-preservation__glow {
	border-radius:
		50%;
}


.tr-redesign-seo-preservation__glow--blue {
	top:
		-300px;

	right:
		-260px;

	width:
		780px;

	height:
		780px;

	background:
		radial-gradient(
			circle,
			rgba(57, 120, 255, 0.085),
			transparent 68%
		);
}


.tr-redesign-seo-preservation__glow--green {
	bottom:
		-400px;

	left:
		-280px;

	width:
		800px;

	height:
		800px;

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


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

.tr-redesign-seo-preservation__shell {
	position: relative;
	z-index: 2;

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

	margin:
		0 auto;
}


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

.tr-redesign-seo-preservation__header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.1fr)
		minmax(340px, 0.82fr);

	align-items:
		end;

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

	margin-bottom:
		clamp(48px, 6vw, 72px);
}


.tr-redesign-seo-preservation__eyebrow {
	display: block;

	margin-bottom:
		17px;

	color:
		var(--tr-green);

	font-size:
		var(--tr-text-ui);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.15em;
}


.tr-redesign-seo-preservation__heading h2 {
	max-width:
		920px;

	margin:
		0;

	color:
		#ffffff;

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

	font-weight:
		800;

	line-height:
		0.99;

	letter-spacing:
		-0.055em;
}


.tr-redesign-seo-preservation__intro > p {
	max-width:
		610px;

	margin:
		0;

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

	font-size:
		var(--tr-text-body);

	font-weight:
		var(--tr-weight-body);

	line-height:
		var(--tr-line-body);
}


/* =========================================================
 * Intro Route
 * ======================================================= */

.tr-redesign-seo-preservation__intro-route {
	display: flex;
	align-items: center;

	gap:
		10px;

	margin-top:
		25px;

	padding-top:
		15px;

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

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

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.07em;
}


.tr-redesign-seo-preservation__intro-route i {
	flex:
		1;

	height:
		1px;

	background:
		rgba(255, 255, 255, 0.09);
}


.tr-redesign-seo-preservation__intro-route strong {
	color:
		var(--tr-green);

	font-size:
		inherit;

	font-weight:
		inherit;
}


/* =========================================================
 * Scene
 * ======================================================= */

.tr-redesign-seo-preservation__scene {
	overflow: hidden;

	color:
		#112019;

	background:
		#f4f6f3;

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

	border-radius:
		28px;

	box-shadow:
		0 40px 110px rgba(0, 0, 0, 0.25);
}


/* =========================================================
 * Scene Head
 * ======================================================= */

.tr-redesign-seo-preservation__scene-head {
	display: grid;

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

	align-items:
		end;

	gap:
		40px;

	padding:
		clamp(30px, 4vw, 48px);

	background:
		#ffffff;

	border-bottom:
		1px solid #dce4df;
}


.tr-redesign-seo-preservation__scene-head > div:first-child > span {
	display: block;

	margin-bottom:
		9px;

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

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.11em;
}


.tr-redesign-seo-preservation__scene-head h3 {
	max-width:
		760px;

	margin:
		0;

	color:
		#122018;

	font-size:
		clamp(28px, 3.1vw, 43px);

	font-weight:
		800;

	line-height:
		1.04;

	letter-spacing:
		-0.043em;
}


/* =========================================================
 * Scene Flow
 * ======================================================= */

.tr-redesign-seo-preservation__scene-flow {
	display: flex;
	align-items: center;

	gap:
		10px;

	padding-bottom:
		4px;

	color:
		#9da79f;

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.07em;
}


.tr-redesign-seo-preservation__scene-flow i {
	flex:
		1;

	height:
		1px;

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


.tr-redesign-seo-preservation__scene-flow strong {
	color:
		var(--tr-green-deep);

	font-size:
		inherit;

	font-weight:
		inherit;
}


/* =========================================================
 * Routes
 * ======================================================= */

.tr-redesign-seo-preservation__routes {
	display: grid;

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

	background:
		#ffffff;

	border-bottom:
		1px solid #dfe6e2;
}


/* =========================================================
 * Route
 * ======================================================= */

.tr-redesign-seo-preservation__route {
	position: relative;

	min-width:
		0;

	min-height:
		285px;

	padding:
		28px;

	border-right:
		1px solid #dfe6e2;

	transition:
		background 180ms ease;
}


.tr-redesign-seo-preservation__route:last-child {
	border-right:
		0;
}


.tr-redesign-seo-preservation__route::before {
	content: "";

	position: absolute;

	top:
		0;

	right:
		0;

	left:
		0;

	height:
		3px;
}


.tr-redesign-seo-preservation__route--keep::before {
	background:
		var(--tr-spectrum-green);
}


.tr-redesign-seo-preservation__route--update::before {
	background:
		var(--tr-spectrum-blue);
}


.tr-redesign-seo-preservation__route--redirect::before {
	background:
		var(--tr-spectrum-orange);
}


.tr-redesign-seo-preservation__route:hover {
	background:
		linear-gradient(
			180deg,
			rgba(25, 224, 120, 0.035),
			transparent 72%
		);
}


/* =========================================================
 * Route Top
 * ======================================================= */

.tr-redesign-seo-preservation__route-top {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap:
		15px;
}


.tr-redesign-seo-preservation__route-top > span {
	color:
		#a3ada7;

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);
}


.tr-redesign-seo-preservation__route-top > strong {
	font-size:
		var(--tr-text-ui);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.09em;
}


.tr-redesign-seo-preservation__route--keep
.tr-redesign-seo-preservation__route-top > strong {
	color:
		#08a957;
}


.tr-redesign-seo-preservation__route--update
.tr-redesign-seo-preservation__route-top > strong {
	color:
		#3978ff;
}


.tr-redesign-seo-preservation__route--redirect
.tr-redesign-seo-preservation__route-top > strong {
	color:
		#d76e31;
}


/* =========================================================
 * Route Path
 * ======================================================= */

.tr-redesign-seo-preservation__route-path {
	display: grid;

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

	gap:
		13px;

	margin-top:
		36px;
}


.tr-redesign-seo-preservation__route-url,
.tr-redesign-seo-preservation__route-destination {
	display: flex;
	align-items: center;

	min-height:
		48px;

	padding:
		0
		14px;

	overflow:
		hidden;

	color:
		#56645b;

	background:
		#f5f7f5;

	border:
		1px solid #dce4df;

	border-radius:
		8px;

	font-size:
		var(--tr-text-ui);

	font-weight:
		var(--tr-weight-medium);

	line-height:
		var(--tr-line-ui);

	white-space:
		nowrap;

	text-overflow:
		ellipsis;
}


.tr-redesign-seo-preservation__route-destination {
	color:
		#17251c;

	background:
		#ffffff;
}


/* =========================================================
 * Route Arrow
 * ======================================================= */

.tr-redesign-seo-preservation__route-arrow {
	display: flex;
	align-items: center;

	gap:
		10px;

	height:
		22px;
}


.tr-redesign-seo-preservation__route-arrow i {
	flex:
		1;

	height:
		1px;

	background:
		#d6ded9;
}


.tr-redesign-seo-preservation__route-arrow span {
	color:
		var(--tr-green-deep);

	font-size:
		17px;
}


/* =========================================================
 * Route State
 * ======================================================= */

.tr-redesign-seo-preservation__route-state {
	display: flex;
	align-items: center;

	gap:
		7px;

	margin-top:
		20px;

	color:
		#8e9992;

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.06em;
}


.tr-redesign-seo-preservation__route-state i {
	width:
		6px;

	height:
		6px;

	flex:
		0
		0
		6px;

	border-radius:
		50%;
}


.tr-redesign-seo-preservation__route--keep
.tr-redesign-seo-preservation__route-state i {
	background:
		var(--tr-spectrum-green);
}


.tr-redesign-seo-preservation__route--update
.tr-redesign-seo-preservation__route-state i {
	background:
		var(--tr-spectrum-blue);
}


.tr-redesign-seo-preservation__route--redirect
.tr-redesign-seo-preservation__route-state i {
	background:
		var(--tr-spectrum-orange);
}


/* =========================================================
 * Preservation
 * ======================================================= */

.tr-redesign-seo-preservation__preservation {
	display: grid;

	grid-template-columns:
		minmax(0, 1.36fr)
		minmax(360px, 0.64fr);

	align-items:
		stretch;
}


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

.tr-redesign-seo-preservation__signals {
	min-width:
		0;

	background:
		#f4f6f3;
}


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

.tr-redesign-seo-preservation__signals-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	gap:
		28px;

	padding:
		32px
		34px;

	border-bottom:
		1px solid #dfe6e2;
}


.tr-redesign-seo-preservation__signals-head > div > span {
	display: block;

	margin-bottom:
		8px;

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

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.10em;
}


.tr-redesign-seo-preservation__signals-head h3 {
	max-width:
		620px;

	margin:
		0;

	color:
		#142119;

	font-size:
		clamp(24px, 2.5vw, 34px);

	font-weight:
		800;

	line-height:
		1.06;

	letter-spacing:
		-0.035em;
}


.tr-redesign-seo-preservation__signals-head > strong {
	color:
		#cad3cd;

	font-size:
		42px;

	font-weight:
		800;

	line-height:
		0.9;
}


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

.tr-redesign-seo-preservation__signal-list {
	display: grid;

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


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

.tr-redesign-seo-preservation__signal-item {
	display: grid;

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

	align-items:
		start;

	gap:
		16px;

	min-height:
		160px;

	padding:
		23px
		25px;

	border-right:
		1px solid #dfe6e2;

	border-bottom:
		1px solid #dfe6e2;

	transition:
		background 180ms ease;
}


.tr-redesign-seo-preservation__signal-item:nth-child(2n) {
	border-right:
		0;
}


.tr-redesign-seo-preservation__signal-item:nth-last-child(-n + 2) {
	border-bottom:
		0;
}


.tr-redesign-seo-preservation__signal-item:hover {
	background:
		rgba(255, 255, 255, 0.55);
}


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

.tr-redesign-seo-preservation__signal-id {
	display: grid;

	gap:
		6px;
}


.tr-redesign-seo-preservation__signal-id > span {
	color:
		#a6b0aa;

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);
}


.tr-redesign-seo-preservation__signal-id > strong {
	color:
		var(--tr-green-deep);

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.06em;
}


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

.tr-redesign-seo-preservation__signal-copy h4 {
	margin:
		0;

	color:
		#17241c;

	font-size:
		18px;

	font-weight:
		var(--tr-weight-bold);

	line-height:
		1.15;

	letter-spacing:
		-0.018em;
}


.tr-redesign-seo-preservation__signal-copy p {
	max-width:
		480px;

	margin:
		9px
		0
		0;

	color:
		#707d75;

	font-size:
		var(--tr-text-card);

	font-weight:
		var(--tr-weight-body);

	line-height:
		var(--tr-line-card);
}


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

.tr-redesign-seo-preservation__principle {
	position: relative;

	display: flex;
	flex-direction: column;

	min-width:
		0;

	padding:
		clamp(36px, 4vw, 52px);

	overflow:
		hidden;

	color:
		#ffffff;

	background:
		linear-gradient(
			145deg,
			#07140f,
			#0a1a12
		);
}


.tr-redesign-seo-preservation__principle::before {
	content: "";

	position: absolute;

	right:
		-180px;

	bottom:
		-180px;

	width:
		420px;

	height:
		420px;

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

	pointer-events:
		none;
}


.tr-redesign-seo-preservation__principle > * {
	position: relative;

	z-index:
		2;
}


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

.tr-redesign-seo-preservation__principle-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap:
		20px;
}


.tr-redesign-seo-preservation__principle-top > span {
	max-width:
		230px;

	color:
		var(--tr-green);

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.10em;
}


.tr-redesign-seo-preservation__principle-top > strong {
	color:
		rgba(255, 255, 255, 0.10);

	font-size:
		52px;

	font-weight:
		800;

	line-height:
		0.85;
}


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

.tr-redesign-seo-preservation__principle h3 {
	max-width:
		470px;

	margin:
		clamp(50px, 6vw, 82px)
		0
		0;

	color:
		#ffffff;

	font-size:
		clamp(30px, 3vw, 43px);

	font-weight:
		800;

	line-height:
		1.03;

	letter-spacing:
		-0.042em;
}


.tr-redesign-seo-preservation__principle > p {
	max-width:
		440px;

	margin:
		20px
		0
		0;

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

	font-size:
		var(--tr-text-card);

	font-weight:
		var(--tr-weight-body);

	line-height:
		var(--tr-line-card);
}


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

.tr-redesign-seo-preservation__principle-route {
	display: grid;

	grid-template-columns:
		auto
		1fr
		auto
		1fr
		auto;

	align-items:
		center;

	gap:
		10px;

	margin-top:
		auto;

	padding-top:
		70px;
}


.tr-redesign-seo-preservation__principle-route > div {
	display: grid;

	gap:
		4px;
}


.tr-redesign-seo-preservation__principle-route span {
	color:
		rgba(255, 255, 255, 0.26);

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);
}


.tr-redesign-seo-preservation__principle-route strong {
	color:
		rgba(255, 255, 255, 0.68);

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.06em;
}


.tr-redesign-seo-preservation__principle-route > i {
	height:
		1px;

	background:
		rgba(255, 255, 255, 0.10);
}


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

.tr-redesign-seo-preservation__principle-spectrum {
	display: grid;

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

	height:
		4px;

	margin-top:
		26px;

	overflow:
		hidden;

	border-radius:
		999px;
}


.tr-redesign-seo-preservation__principle-spectrum span:nth-child(1) {
	background:
		var(--tr-spectrum-green);
}


.tr-redesign-seo-preservation__principle-spectrum span:nth-child(2) {
	background:
		var(--tr-spectrum-blue);
}


.tr-redesign-seo-preservation__principle-spectrum span:nth-child(3) {
	background:
		var(--tr-spectrum-orange);
}


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

@media (max-width: 1080px) {

	.tr-redesign-seo-preservation__routes {
		grid-template-columns:
			1fr;
	}


	.tr-redesign-seo-preservation__route {
		min-height:
			0;

		border-right:
			0;

		border-bottom:
			1px solid #dfe6e2;
	}


	.tr-redesign-seo-preservation__route:last-child {
		border-bottom:
			0;
	}


	.tr-redesign-seo-preservation__route-path {
		grid-template-columns:
			minmax(0, 1fr)
			70px
			minmax(0, 1fr);

		align-items:
			center;
	}


	.tr-redesign-seo-preservation__route-arrow {
		height:
			auto;
	}


	.tr-redesign-seo-preservation__preservation {
		grid-template-columns:
			1fr;
	}


	.tr-redesign-seo-preservation__principle {
		min-height:
			470px;
	}

}


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

@media (max-width: 700px) {

	.tr-redesign-seo-preservation {
		padding:
			82px
			var(--tr-gutter);
	}


	.tr-redesign-seo-preservation__header {
		grid-template-columns:
			1fr;

		gap:
			28px;

		margin-bottom:
			42px;
	}


	.tr-redesign-seo-preservation__heading h2 {
		font-size:
			clamp(40px, 11vw, 58px);
	}


	.tr-redesign-seo-preservation__intro-route {
		display:
			none;
	}


	.tr-redesign-seo-preservation__scene {
		border-radius:
			18px;
	}


	.tr-redesign-seo-preservation__scene-head {
		grid-template-columns:
			1fr;

		gap:
			20px;

		padding:
			28px
			22px;
	}


	.tr-redesign-seo-preservation__scene-flow {
		display:
			none;
	}


	.tr-redesign-seo-preservation__route {
		padding:
			25px
			20px;
	}


	.tr-redesign-seo-preservation__route-path {
		grid-template-columns:
			1fr;

		margin-top:
			26px;
	}


	.tr-redesign-seo-preservation__route-arrow {
		height:
			24px;
	}


	.tr-redesign-seo-preservation__signals-head {
		padding:
			27px
			20px;
	}


	.tr-redesign-seo-preservation__signals-head > strong {
		display:
			none;
	}


	.tr-redesign-seo-preservation__signal-list {
		grid-template-columns:
			1fr;
	}


	.tr-redesign-seo-preservation__signal-item,
	.tr-redesign-seo-preservation__signal-item:nth-child(2n),
	.tr-redesign-seo-preservation__signal-item:nth-last-child(-n + 2) {
		min-height:
			0;

		padding:
			22px
			20px;

		border-right:
			0;

		border-bottom:
			1px solid #dfe6e2;
	}


	.tr-redesign-seo-preservation__signal-item:last-child {
		border-bottom:
			0;
	}


	.tr-redesign-seo-preservation__principle {
		min-height:
			0;

		padding:
			34px
			22px;
	}


	.tr-redesign-seo-preservation__principle h3 {
		margin-top:
			46px;
	}


	.tr-redesign-seo-preservation__principle-route {
		grid-template-columns:
			1fr;

		gap:
			10px;

		padding-top:
			48px;
	}


	.tr-redesign-seo-preservation__principle-route > i {
		width:
			1px;

		height:
			16px;

		margin-left:
			4px;

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

}