/* Homepage parity layer. Values mirror components/KiswaniExperience.tsx. */
.ks-home h1,
.ks-home h2,
.ks-home h3,
.ks-home p {
	margin: 0;
}

.ks-hero {
	min-height: calc(100svh - 158px);
}

.ks-hero__image {
	background-position: center;
}

.ks-hero__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.ks-hero__veil--horizontal {
	background: linear-gradient(90deg, rgba(7, 11, 14, 0.94) 0%, rgba(7, 11, 14, 0.72) 42%, rgba(7, 11, 14, 0.18) 72%, rgba(7, 11, 14, 0.42) 100%);
}

.ks-hero__veil--vertical {
	background: linear-gradient(0deg, rgba(7, 11, 14, 0.88) 0%, transparent 45%);
}

.ks-hero__frame {
	inset: 20px;
}

.ks-hero__geometry {
	border-block-start: 1px solid rgba(174, 107, 13, 0.78);
	border-inline-end: 1px solid rgba(174, 107, 13, 0.78);
	display: none;
	height: clamp(128px, 13vw, 192px);
	inset-block-start: 9%;
	inset-inline-end: 6%;
	pointer-events: none;
	position: absolute;
	width: clamp(128px, 13vw, 192px);
	z-index: 1;
}

.ks-hero__geometry::before {
	border: 1px solid rgba(174, 107, 13, 0.88);
	content: "";
	height: 27.2px;
	inset-block-start: 20px;
	inset-inline-end: 20px;
	position: absolute;
	transform: rotate(45deg);
	width: 27.2px;
}

.ks-hero__geometry::after {
	background: rgba(174, 107, 13, 0.82);
	content: "";
	height: 1px;
	inset-block-start: 76px;
	inset-inline-end: -36px;
	position: absolute;
	width: 88px;
}

.ks-hero__copy {
	align-items: flex-end;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	min-height: calc(100svh - 158px);
	padding: 112px 32px 55px;
}

.ks-hero__content {
	max-width: 810px;
	width: 100%;
}

.ks-kicker {
	display: flex;
	gap: 16px;
	margin: 0 0 28px;
}

.ks-kicker p {
	color: #ffda01;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.28em;
	line-height: 16px;
	text-transform: uppercase;
}

.ks-hero h1 {
	font-size: 48px;
	font-weight: 600;
	line-height: 0.92;
	text-transform: uppercase;
}

.ks-hero h1 > span,
.ks-hero h1 > mark {
	display: block;
}

.ks-hero h1 > mark {
	margin-top: 8px;
}

.ks-hero__copy > p:not(.ks-kicker),
.ks-hero__body {
	margin: 28px 0 0;
}

.ks-hero__body {
	font-size: 16px;
	line-height: 28px;
	max-width: 672px;
}

.ks-buttons {
	flex-direction: column;
	gap: 12px;
	margin-top: 36px;
}

.ks-buttons a {
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	line-height: 20px;
	min-height: 48px;
	padding: 0 24px;
}

.ks-buttons svg {
	fill: none;
	height: 16px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 16px;
}

.ks-hero__scene {
	display: grid;
	gap: 20px;
	margin-top: 48px;
	padding-top: 24px;
}

.ks-hero__scene strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.ks-hero__scene small {
	font-size: 12px;
	line-height: 20px;
	margin-top: 4px;
	max-width: 448px;
}

.ks-hero__scene b {
	font-size: 30px;
	font-weight: 300;
	line-height: 36px;
}

.ks-hero__rail {
	display: none;
}

.ks-metrics {
	background: #070b0e;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: block;
	max-width: none;
	padding: 12px 16px;
}

.ks-metrics__grid {
	background: rgba(255, 255, 255, 0.1);
	display: grid;
	gap: 1px;
	margin: 0 auto;
	max-width: 1440px;
}

.ks-metrics__grid > div {
	align-items: center;
	background: #070b0e;
	color: #fff;
	display: flex;
	gap: 24px;
	padding: 28px 24px;
}

.ks-metrics__grid b {
	color: #ffda01;
	font-size: 30px;
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 36px;
	min-width: 56px;
}

.ks-metrics__grid span {
	color: #a3a7aa;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 16px;
	text-transform: uppercase;
}

.ks-statement {
	display: block;
	padding: 64px 16px;
}

.ks-statement__inner {
	display: grid;
	gap: 32px;
	margin: 0 auto;
	max-width: 1440px;
}

.ks-statement__index span {
	color: #a3a7aa;
	font-size: 60px;
	font-weight: 300;
	letter-spacing: -0.06em;
	line-height: 60px;
}

.ks-statement__index i {
	display: block;
	height: 1px;
	margin-top: 16px;
	width: 80px;
}

.ks-statement h2 {
	font-size: 36px;
	font-weight: 600;
	line-height: 1.01;
	text-wrap: balance;
	text-transform: uppercase;
}

.ks-statement p {
	align-self: start;
	border: 0;
	font-size: 18px;
	line-height: 32px;
	max-width: 576px;
	padding: 0;
}

.ks-home .ks-hero__body {
	color: rgba(255, 255, 255, 0.7);
	margin-top: 28px;
}

.ks-metrics > .ks-metrics__grid {
	padding: 0;
}

.ks-metrics__grid span {
	margin: 0;
}

@media (min-width: 640px) {
	.ks-hero__frame {
		inset: 32px;
	}

	.ks-hero__copy {
		padding-left: 64px;
		padding-right: 64px;
		padding-bottom: 80px;
	}

	.ks-hero h1 {
		font-size: 72px;
	}

	.ks-hero__body {
		font-size: 18px;
		line-height: 32px;
	}

	.ks-buttons {
		flex-direction: row;
	}

	.ks-hero__scene {
		align-items: end;
		grid-template-columns: 1fr auto;
	}

	.ks-metrics {
		padding-left: 32px;
		padding-right: 32px;
	}

	.ks-metrics__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ks-metrics__grid > div {
		padding-left: 32px;
		padding-right: 32px;
	}

	.ks-statement {
		padding: 96px 32px;
	}

	.ks-statement h2 {
		font-size: 60px;
	}
}

@media (max-width: 639px) {
	.ks-hero__scene strong {
		line-height: normal;
	}
}

@media (min-width: 1024px) {
	.ks-hero__image {
		background-position: center 48%;
	}

	.ks-hero__image img {
		object-position: center 48%;
	}

	.ks-hero__geometry {
		display: block;
	}

	.ks-hero__copy {
		align-items: center;
		padding: 80px;
	}

	.ks-hero h1 {
		font-size: 92px;
	}

	.ks-statement__inner {
		align-items: start;
		grid-template-columns: 0.24fr 1.2fr 0.72fr;
	}

	.ks-statement h2 {
		font-size: 72px;
	}

	.ks-statement p {
		border-inline-start: 1px solid #a3a7aa;
		padding-inline-start: 32px;
	}
}

@media (min-width: 1280px) {
	.ks-hero__rail {
		align-items: flex-end;
		display: flex;
		flex-direction: column;
		gap: 20px;
		inset-inline-end: 56px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.ks-hero__rail button {
		align-items: center;
		background: transparent;
		border: 0;
		color: rgba(255, 255, 255, 0.45);
		display: flex;
		font: 600 11px/16px inherit;
		gap: 12px;
		letter-spacing: 0.15em;
		padding: 0;
		text-transform: uppercase;
	}

	.ks-hero__rail i {
		background: rgba(255, 255, 255, 0.35);
		display: block;
		height: 1px;
		width: 20px;
	}

	.ks-hero__rail button.is-active {
		color: #ffda01;
	}

	.ks-hero__rail button.is-active i {
		background: #ffda01;
		width: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ks-hero__image {
		transition: none;
	}
}