/* Systical — Media Split (copy one side, looping video the other) */

.sys-ms {
	--ms-accent: #9afd0d;
	--ms-max: 1400px;
	--ms-gap: 70px;
	--ms-ratio: 4 / 3;
	--ms-radius: 20px;
	padding: 190px 40px 100px;
	background-color: #070707;
}

.sys-ms__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--ms-gap);
	max-width: var(--ms-max);
	margin: 0 auto;
}

/* Order rather than direction, so the copy stays first in the document and a
   screen reader still meets it before the decorative video. */
.sys-ms--flip .sys-ms__copy {
	order: 2;
}

.sys-ms__copy {
	min-width: 0;
}

.sys-ms__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 22px;
	padding: 9px 18px;
	border-radius: 999px;
	background-color: #141414;
	color: #fff;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}

.sys-ms__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--ms-accent);
}

.sys-ms__title {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: clamp(34px, 4.2vw, 62px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.028em;
	color: #fff;
}

.sys-ms__text {
	max-width: 54ch;
	margin: 22px 0 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: #929292;
}

.sys-ms__btn {
	display: inline-flex;
	align-items: center;
	margin-top: 34px;
	padding: 18px 34px;
	border-radius: 999px;
	background-color: var(--ms-accent);
	color: #070707;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color 220ms ease;
}

.sys-ms__btn:hover,
.sys-ms__btn:focus-visible {
	background-color: #fff;
}

/* ---------- media ---------- */

.sys-ms__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--ms-ratio);
	border-radius: var(--ms-radius);
	background-color: #111;
}

/* Two classes deep: Elementor ships `.elementor img { height: auto }` at
   (0,1,1), which would beat a single-class rule and collapse the fill. */
.sys-ms .sys-ms__video,
.sys-ms .sys-ms__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sys-ms__empty {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #191919 0%, #0d0d0d 100%);
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.sys-ms {
		--ms-gap: 40px;
	}
}

@media (max-width: 767px) {
	.sys-ms {
		padding: 120px 18px 56px;
	}

	.sys-ms__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked, the copy leads regardless of the desktop order. */
	.sys-ms--flip .sys-ms__copy {
		order: 0;
	}

	.sys-ms__title {
		font-size: clamp(30px, 8.5vw, 42px);
	}

	.sys-ms__text {
		margin-top: 16px;
		font-size: 15px;
	}

	.sys-ms__btn {
		margin-top: 26px;
		padding: 15px 26px;
		font-size: 15px;
	}
}