/* Homepage featured project comparison parity. */
.ks-featured-project {
	background: #050709;
	color: #fff;
	isolation: isolate;
	overflow: hidden;
	padding: 64px 16px;
	position: relative;
}

.ks-featured-project__line {
	background: #ffda01;
	height: 4px;
	inset-inline: 0;
	position: absolute;
	top: 0;
}

.ks-featured-project__glow {
	background: radial-gradient(circle at 78% 28%, rgba(255, 218, 1, .08), transparent 32%);
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.ks-featured-project__inner {
	margin: 0 auto;
	max-width: 1440px;
	position: relative;
	z-index: 10;
}

.ks-featured-project__head {
	display: grid;
	gap: 28px;
	margin-bottom: 40px;
}

.ks-featured-project__kicker {
	align-items: center;
	display: flex;
	gap: 16px;
}

.ks-featured-project__kicker span {
	background: #ffda01;
	height: 3px;
	width: 56px;
}

.ks-featured-project__kicker p,
.ks-featured-project__head > p,
.ks-featured-project__head h2 {
	margin: 0;
}

.ks-featured-project__kicker p {
	color: #ffda01;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	line-height: 16.5px;
	text-transform: uppercase;
}

.ks-featured-project__head h2 {
	color: #fff;
	font-size: 48px;
	font-weight: 600;
	letter-spacing: -.055em;
	line-height: .95;
	margin-top: 24px;
	text-wrap: balance;
}

.ks-featured-project__head > p {
	color: #a3a7aa;
	font-size: 16px;
	line-height: 32px;
	max-width: 672px;
}

.ks-project-compare {
	background: #0f1822;
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 45px 140px rgba(0, 0, 0, .44);
	overflow: hidden;
	position: relative;
}

.ks-project-compare__visual {
	min-height: 460px;
	position: relative;
}

.ks-project-compare__image {
	inset: 0;
	overflow: hidden;
	position: absolute;
	transform: scale(1.085);
}

.ks-project-compare__image img {
	inset: 0;
	position: absolute;
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.ks-project-compare__before img {
	filter: brightness(.42) saturate(.58);
}

.ks-project-compare__after {
	clip-path: inset(0 36% 0 0);
}

.ks-project-compare__after img {
	filter: sepia(.18) saturate(1.18);
	transition: filter 700ms;
}

.ks-project-compare__after > div {
	background-color: rgba(255, 174, 58, .18);
	inset: 0;
	mix-blend-mode: soft-light;
	position: absolute;
	transition: background-color 700ms;
}

.ks-project-compare__handle {
	background: #fff;
	bottom: 0;
	box-shadow: 0 0 28px rgba(255, 218, 1, .95);
	left: 64%;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 1px;
	z-index: 20;
}

.ks-project-compare__handle > span {
	align-items: center;
	background: #050709;
	border: 1px solid #ffda01;
	border-radius: 999px;
	box-shadow: 0 0 42px rgba(255, 218, 1, .3);
	color: #ffda01;
	display: flex;
	height: 56px;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
}

.ks-project-compare__handle svg {
	fill: none;
	height: 19px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 19px;
}

.ks-project-compare__visual:focus-within .ks-project-compare__handle > span {
	box-shadow: 0 0 0 4px #fff, 0 0 0 8px #050709, 0 0 42px rgba(255, 218, 1, .3);
}

.ks-project-compare__range {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: ew-resize;
	height: 100%;
	inset: 0;
	margin: 0;
	opacity: 0;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 30;
}

.ks-project-compare__labels {
	display: flex;
	inset-inline: 0;
	justify-content: space-between;
	padding: 24px;
	pointer-events: none;
	position: absolute;
	top: 0;
	z-index: 20;
}

.ks-project-compare__labels span {
	background: rgba(5, 7, 9, .72);
	border: 1px solid rgba(255, 255, 255, .15);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .2em;
	line-height: 15px;
	padding: 12px 16px;
	text-transform: uppercase;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.ks-project-compare__labels span:last-child {
	background: #ffda01;
	border-color: #ffda01;
	color: #0f1822;
}

.ks-project-compare__shade {
	background: linear-gradient(to top, rgba(5, 7, 9, .8), transparent, rgba(5, 7, 9, .12));
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 10;
}

.ks-project-compare__facts {
	bottom: 20px;
	display: grid;
	gap: 12px;
	inset-inline: 20px;
	pointer-events: none;
	position: absolute;
	z-index: 20;
}

.ks-project-compare__facts > div {
	background: rgba(5, 7, 9, .72);
	border: 1px solid rgba(255, 255, 255, .1);
	padding: 20px;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.ks-project-compare__facts svg {
	display: block;
	fill: none;
	height: 18px;
	stroke: #ffda01;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 18px;
}

.ks-project-compare__facts p,
.ks-project-compare__facts strong {
	display: block;
	margin: 0;
}

.ks-project-compare__facts p {
	color: #73787c;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .18em;
	line-height: 13.5px;
	margin-top: 16px;
	text-transform: uppercase;
}

.ks-project-compare__facts strong {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	margin-top: 4px;
}

.ks-featured-project__controls {
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	border-inline: 1px solid rgba(255, 255, 255, .1);
	display: grid;
}

.ks-featured-project__temperature,
.ks-featured-project__products {
	padding: 28px;
}

.ks-featured-project__temperature {
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.ks-featured-project__temperature > p,
.ks-featured-project__products-row > div > p {
	color: #73787c;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .2em;
	line-height: 15px;
	margin: 0;
	text-transform: uppercase;
}

.ks-temperature-options {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 20px;
}

.ks-temperature-options button {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 0;
	box-shadow: none;
	color: #a3a7aa;
	font-family: inherit;
	margin: 0;
	min-height: 64px;
	padding: 0 12px;
	text-align: start;
	transition: border-color 200ms, color 200ms, background-color 200ms;
}

.ks-temperature-options button:hover {
	border-color: rgba(255, 255, 255, .35);
	color: #fff;
}

.ks-temperature-options button.is-active {
	background: #ffda01;
	border-color: #ffda01;
	color: #0f1822;
}

.ks-temperature-options b,
.ks-temperature-options span {
	display: block;
}

.ks-temperature-options b {
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
}

.ks-temperature-options span {
	font-size: 10px;
	line-height: 15px;
	margin-top: 4px;
	opacity: .6;
}

.ks-featured-project__products-row {
	display: flex;
	flex-direction: column;
	gap: 32px;
	justify-content: space-between;
}

.ks-featured-project__product-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.ks-featured-project__product-links a {
	border: 1px solid rgba(255, 255, 255, .1);
	color: #cccfce;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	padding: 12px 16px;
	text-decoration: none;
	transition: border-color 200ms, color 200ms;
}

.ks-featured-project__product-links a:hover {
	border-color: #ffda01;
	color: #fff;
}

.ks-featured-project__cta {
	align-items: center;
	background: #ffda01;
	color: #0f1822;
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	gap: 12px;
	justify-content: center;
	min-height: 56px;
	padding: 0 24px;
	text-decoration: none;
}

.ks-featured-project__cta:hover { background: #ffd100; }
.ks-featured-project__cta svg {
	fill: none;
	height: 17px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 17px;
}

/* Keep this dense before/after experience for tablet and desktop only. */
@media (max-width: 767px) {
	.ks-featured-project { display: none; }
}

@media (min-width: 640px) {
	.ks-featured-project { padding: 96px 32px; }
	.ks-featured-project__head h2 { font-size: 60px; }
	.ks-project-compare__visual { min-height: 560px; }
	.ks-project-compare__labels { padding: 36px; }
	.ks-project-compare__facts { bottom: 36px; inset-inline: 36px; }
	.ks-featured-project__temperature,
	.ks-featured-project__products { padding: 40px; }
	.ks-featured-project__products-row { align-items: flex-end; flex-direction: row; }
	.ks-featured-project__cta { flex-shrink: 0; }
}

@media (min-width: 768px) {
	.ks-project-compare__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.ks-featured-project { padding-block: 112px; }
	.ks-featured-project__head { align-items: end; grid-template-columns: .72fr 1.28fr; }
	.ks-featured-project__head h2 { font-size: 72px; }
	.ks-featured-project__head > p { justify-self: end; }
	.ks-project-compare__visual { min-height: 660px; }
	.ks-featured-project__controls { grid-template-columns: .9fr 1.1fr; }
	.ks-featured-project__temperature { border-bottom: 0; border-inline-end: 1px solid rgba(255, 255, 255, .1); }
}

@media (prefers-reduced-motion: reduce) {
	.ks-project-compare__after img,
	.ks-project-compare__after > div,
	.ks-temperature-options button { transition: none; }
}