/* ============================================================
 * Section: Exclusive services (page-pricing R10)
 * Figma: 5192:18557
 * Theme switch trigger — toggles body.ses-dark page-wide.
 * ============================================================ */

.ses {
	--ses-bg: #ffffff;
	--ses-fg: #050505;
	--ses-fg-secondary: rgba(5, 5, 5, 0.8);
	--ses-card-bg: #f6f5f4;
	--ses-btn-solid-bg: #050505;
	--ses-btn-solid-fg: #ffffff;
	--ses-btn-ghost-bg: #ffffff;
	--ses-btn-ghost-fg: #050505;
	--ses-btn-ghost-border: #d3d3d3;

	background-color: var(--ses-bg);
	padding: var(--var-140) var(--section-horizontal-padding);
	color: var(--ses-fg);
	contain: layout paint;
	transition: background-color 600ms linear, color 600ms linear;
}

body.ses-dark .ses {
	--ses-bg: #050505;
	--ses-fg: #ffffff;
	--ses-fg-secondary: rgba(255, 255, 255, 0.8);
	--ses-card-bg: #1a1a1a;
	--ses-btn-solid-bg: #ffffff;
	--ses-btn-solid-fg: #050505;
	--ses-btn-ghost-bg: transparent;
	--ses-btn-ghost-fg: #ffffff;
	--ses-btn-ghost-border: rgba(255, 255, 255, 0.3);
}

.ses__inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--section-gap);
}

.ses__title {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-h2);
	line-height: 1.15;
	color: var(--ses-fg);
	margin: 0;
	transition: color 600ms linear;
}

.ses__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--section-gap);
	align-items: stretch;
}

.ses__card {
	background-color: var(--ses-card-bg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: background-color 600ms linear;
}

.ses__hero {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	aspect-ratio: 520 / 400;
	overflow: hidden;
}

.ses__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ses__body {
	display: flex;
	flex-direction: column;
	gap: var(--var-28);
	padding: var(--var-40);
}

.ses__text-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--var-12);
}

.ses__heading-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--var-16);
}

.ses__badges {
	display: flex;
	gap: var(--var-6);
	align-items: center;
}

.ses__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--var-4);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-label-md);
	line-height: 1;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0;
}

.ses__badge--blue {
	background-image: linear-gradient(90deg, #1f2c85 0%, #364eeb 100%);
}

.ses__badge--purple {
	background-image: linear-gradient(90deg, #783f93 0%, #cc6af9 100%);
}

.ses__heading {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-h4);
	line-height: 1.15;
	color: var(--ses-fg);
	margin: 0;
	max-width: 800px;
	transition: color 600ms linear;
}

.ses__desc {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-label-lg);
	line-height: 1.4;
	color: var(--ses-fg-secondary);
	margin: 0;
	max-width: 600px;
	transition: color 600ms linear;
}

.ses__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--var-12);
	width: 100%;
	max-width: 600px;
}

.ses__list-item {
	display: flex;
	align-items: center;
	gap: var(--var-6);
}

.ses__list-dot {
	flex-shrink: 0;
	width: 4px;
	height: 4px;
	background-image: linear-gradient(90deg, #ff4e41 0%, #cc6af9 100%);
}

.ses__list-text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-label-lg);
	line-height: 1.4;
	color: var(--ses-fg-secondary);
	transition: color 600ms linear;
}

.ses__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--var-12);
	align-items: center;
}

.ses__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--var-6);
	padding: var(--var-14) var(--var-28);
	border-radius: 100px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-label-md);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease, background-color 600ms linear, color 600ms linear;
}

.ses__btn:hover {
	opacity: 0.9;
}

.ses__btn:active {
	transform: translateY(1px);
}

.ses__btn--solid {
	background-color: var(--ses-btn-solid-bg);
	color: var(--ses-btn-solid-fg);
	border: none;
}

.ses__btn--ghost {
	background-color: var(--ses-btn-ghost-bg);
	color: var(--ses-btn-ghost-fg);
	border: 1px solid var(--ses-btn-ghost-border);
}

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

	.ses,
	.ses *,
	.ses *::before,
	.ses *::after {
		transition: none !important;
	}
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.ses {
		padding: 100px var(--var-24);
	}

	.ses__inner {
		gap: var(--var-56);
	}

	.ses__grid {
		gap: var(--var-32);
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
	.ses {
		padding: 80px var(--var-16);
	}

	.ses__inner {
		gap: var(--var-40);
	}

	.ses__title {
		font-size: var(--fs-h4);
	}

	.ses__grid {
		grid-template-columns: 1fr;
		gap: var(--var-24);
	}

	.ses__body {
		padding: var(--var-28) var(--var-20);
		gap: var(--var-24);
	}

	.ses__heading {
		font-size: 24px;
	}

	.ses__desc {
		font-size: var(--fs-label-md);
	}

	.ses__list-text {
		font-size: var(--fs-label-md);
	}

	.ses__btn {
		padding: var(--var-12) 22px;
		font-size: 13px;
	}
}