/*
* sinergy.css — Compiled stylesheet for Sinergy Marketing
* Single source of truth: all extracted inline styles + base + responsive + animations
* DO NOT add inline styles to PHP files — add classes here instead.
*/

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,700;12..96,800&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── RESET ── */
*,
*::before,
*::after {
	box-sizing: border-box;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

html,
body {
	background: #f4f1e8;
}

body {
	font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
	color: #0a140e;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* ── CSS VARIABLES ── */
:root {
	--sin-font: 'Bricolage Grotesque', system-ui, sans-serif;
	--sin-mono: 'JetBrains Mono', ui-monospace, monospace;
	--sin-serif: 'Fraunces', Georgia, serif;
	--sin-ink: #0a140e;
	--sin-muted: #5b6760;
	--sin-lime: #c6f24e;
	--sin-dark: #0f2a1d;
	--sin-bg: #f4f1e8;
	--sin-line: rgba(10, 20, 14, 0.082);
	--border-lght: rgba(255, 255, 255, 0.182);
	--sin-white: #ffffff;
}

/* ── BASE ── */
a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--sin-lime);
}

img {
	max-width: 100%;
}

button {
	font-family: inherit;
	cursor: pointer;
	outline: none;
}

::selection {
	background: var(--sin-lime);
	color: var(--sin-ink);
}

.sin {
	width: 100%;
	overflow-x: hidden;
}

.sin * {
	box-sizing: border-box;
}


/* ── EXTRACTED INLINE STYLE CLASSES (sx-1 to sx-423) ── */
/* Every element in all 3 content pages, header, and footer. */
/* Each class maps 1:1 to a unique inline style from the original export. */

.sx-1 {
	padding: 72px 56px 96px;
	position: relative;
}

.sx-2 {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px;
	align-items: center;
}

.sx-3 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(10, 20, 14, 0.145);
	background: transparent;
	color: rgb(10, 20, 14);
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 500;
}

.sx-4 {
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background: rgb(198, 242, 78);
	display: inline-block;
}

.sx-5 {
	font-size: 96px;
	line-height: 0.96;
	letter-spacing: -0.04em;
	font-weight: 700;
	margin: 24px 0px 28px;
}

.sx-6 {
	position: relative;
	display: inline-block;
}

.sx-7 {
	position: absolute;
	inset: -2px -6px;
	background: rgb(198, 242, 78);
	z-index: 0;
	transform: skewX(-6deg);
}

.sx-8 {
	position: relative;
	z-index: 1;
}

.sx-9 {
	font-size: 19px;
	line-height: 1.55;
	max-width: 520px;
	color: rgb(91, 103, 96);
	margin: 0px 0px 36px;
}

.sx-10 {
	display: flex;
	gap: 14px;
	align-items: center;
}

.sx-11 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: 999px;
	border: none;
	background: rgb(10, 20, 14);
	color: rgb(198, 242, 78);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
}

.sx-12 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: 999px;
	border: 1.5px solid rgb(10, 20, 14);
	background: transparent;
	color: rgb(10, 20, 14);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
}

.sx-13 {
	display: flex;
	gap: 36px;
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid rgba(10, 20, 14, 0.082);
}

.sx-14 {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

.sx-15 {
	font-size: 12px;
	color: rgb(91, 103, 96);
	margin-top: 4px;
	font-family: var(--sin-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sx-16 {
	position: relative;
	height: 600px;
}

.sx-17 {
	position: absolute;
	right: 0px;
	top: 24px;
	width: 520px;
	height: 520px;
	background: rgb(198, 242, 78);
	border-radius: 28px;
}

.sx-18 {
	position: absolute;
	right: 480px;
	top: 80px;
}

.sx-19 {
	opacity: 0.3;
}

.sx-20 {
	position: absolute;
	left: 12px;
	top: 60px;
	width: 380px;
	padding: 22px;
	background: rgb(251, 250, 243);
	border-radius: 20px;
	box-shadow: rgba(15, 30, 20, 0.25) 0px 30px 60px -25px;
	border: 1px solid rgba(10, 20, 14, 0.063);
}

.sx-21 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.sx-22 {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.4px;
	color: rgb(91, 103, 96);
}

.sx-23 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid rgba(10, 20, 14, 0.145);
	background: rgb(198, 242, 78);
	color: rgb(10, 20, 14);
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 500;
}

.sx-24 {
	font-size: 14px;
	color: rgb(91, 103, 96);
	margin-bottom: 4px;
}

.sx-25 {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

.sx-26 {
	font-size: 16px;
	color: rgb(91, 103, 96);
	font-weight: 500;
}

.sx-27 {
	margin-top: 14px;
}

.sx-28 {
	position: absolute;
	right: 40px;
	top: 80px;
	width: 260px;
	height: 380px;
	background: rgb(251, 250, 243);
	border-radius: 28px;
	padding: 16px;
	box-shadow: rgba(15, 30, 20, 0.3) 0px 30px 60px -20px;
	border: 1px solid rgba(10, 20, 14, 0.063);
}

.sx-29 {
	position: relative;
	height: 200px;
	border-radius: 18px;
	overflow: hidden;
}

.sx-30 {
	display: block;
	width: 100%;
	height: 200px;
	border-radius: 18px;
	object-fit: cover;
	object-position: 50% 50%;
}

.sx-31 {
	position: absolute;
	left: 14px;
	bottom: 12px;
	color: rgb(71, 92, 80);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.1;
	text-shadow: rgba(0, 0, 0, 0.4) 0px 2px 8px;
}

.sx-32 {
	padding: 12px 4px;
}

.sx-33 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.sx-34 {
	border-radius: 14px;
	overflow: hidden;
}

.sx-35 {
	font-weight: 600;
	font-size: 13px;
}

.sx-36 {
	font-size: 12px;
	color: rgb(91, 103, 96);
	line-height: 1.5;
}

.sx-37 {
	display: flex;
	gap: 14px;
	margin-top: 10px;
	font-size: 11px;
	color: rgb(91, 103, 96);
	font-family: var(--sin-mono);
}

.sx-38 {
	position: absolute;
	right: 12px;
	bottom: 0px;
	width: 320px;
	padding: 18px;
	background: rgb(251, 250, 243);
	border-radius: 18px;
	box-shadow: rgba(15, 30, 20, 0.25) 0px 20px 40px -15px;
	border: 1px solid rgba(10, 20, 14, 0.063);
}

.sx-39 {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: rgb(91, 103, 96);
	font-family: var(--sin-mono);
}

.sx-40 {
	display: inline-block;
	width: 4px;
	height: 4px;
	background: rgb(198, 242, 78);
	border-radius: 4px;
}

.sx-41 {
	font-size: 16px;
	color: rgb(26, 13, 171);
	margin-top: 8px;
	font-weight: 500;
}

.sx-42 {
	font-size: 12px;
	color: rgb(13, 110, 47);
	margin-top: 2px;
}

.sx-43 {
	font-size: 12px;
	color: rgb(91, 103, 96);
	margin-top: 6px;
	line-height: 1.5;
}

.sx-44 {
	position: absolute;
	left: 380px;
	top: 0px;
}

.sx-45 {
	padding: 40px 56px;
	background: rgb(251, 250, 243);
	border-top: 1px solid rgba(10, 20, 14, 0.063);
	border-bottom: 1px solid rgba(10, 20, 14, 0.063);
}

.sx-46 {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 2px;
	color: rgb(91, 103, 96);
	margin-bottom: 24px;
}

.sx-47 {
	display: flex;
	gap: 56px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.sx-48 {
	color: rgb(10, 20, 14);
	opacity: 0.45;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}

.sx-49 {
	font-family: var(--sin-font);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: 0.04em;
}

.sx-50 {
	font-family: var(--sin-mono);
	font-size: 9.5px;
	letter-spacing: 0.18em;
	margin-top: 4px;
	opacity: 0.75;
}

.sx-51 {
	padding: 120px 56px 100px;
	position: relative;
}

.sx-52 {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 56px;
}

.sx-53 {
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background: rgb(31, 107, 58);
	display: inline-block;
}

.sx-54 {
	font-size: 64px;
	line-height: 1;
	letter-spacing: -0.03em;
	font-weight: 700;
	margin: 20px 0px 0px;
	max-width: 760px;
}

.sx-55 {
	font-style: italic;
	font-family: var(--sin-serif);
	font-weight: 500;
}

.sx-56 {
	font-size: 14px;
	color: rgb(91, 103, 96);
	max-width: 280px;
	line-height: 1.5;
}

.sx-57 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.sx-58 {
	padding: 36px;
	border-radius: 24px;
	background: rgb(15, 42, 29);
	color: rgb(244, 241, 232);
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 320px;
	position: relative;
	overflow: hidden;
}

.sx-59 {
	position: absolute;
	top: -40px;
	right: -40px;
}

.sx-60 {
	opacity: 0.4;
}

.sx-61 {
	position: relative;
}

.sx-62 {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;
}

.sx-63 {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgb(198, 242, 78);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sx-64 {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	opacity: 0.6;
	color: #fff;
}

.sx-65 {
	font-size: 32px;
	letter-spacing: -0.02em;
	margin: 0px 0px 12px;
	font-weight: 700;
	color: #fff;
}

.sx-66 {
	font-size: 15px;
	line-height: 1.55;
	opacity: 0.85;
	margin: 0px 0px 24px;
	max-width: 480px;
}

.sx-67 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 24px;
}

.sx-68 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}

.sx-69 {
	padding: 36px;
	border-radius: 24px;
	background: rgb(251, 250, 243);
	color: rgb(10, 20, 14);
	border: 1px solid rgba(10, 20, 14, 0.082);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 320px;
	position: relative;
	overflow: hidden;
}

.sx-70 {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgb(244, 241, 232);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sx-71 {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	opacity: 0.6;
}

.sx-72 {
	font-size: 32px;
	letter-spacing: -0.02em;
	margin: 0px 0px 12px;
	font-weight: 700;
}

.sx-73 {
	font-size: 15px;
	line-height: 1.55;
	opacity: 0.7;
	margin: 0px 0px 24px;
	max-width: 480px;
}

.sx-74 {
	padding: 100px 56px;
	background: rgb(15, 42, 29);
	color: rgb(244, 241, 232);
	position: relative;
	overflow: hidden;
}

.sx-75 {
	position: absolute;
	top: 40px;
	right: -100px;
}

.sx-76 {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 56px;
}

.sx-77 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.19);
	background: transparent;
	color: rgb(244, 241, 232);
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 500;
}

.sx-78 {
	font-size: 64px;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 20px 0px 24px;
	font-weight: 700;
	color: #fff;
}

.sx-79 {
	font-size: 17px;
	line-height: 1.6;
	opacity: 0.8;
	max-width: 420px;
}

.sx-80 {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: #fff;
}

.sx-81 {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 32px;
	padding: 32px 0px;
	border-top: 1px solid rgba(244, 241, 232, 0.125);
}

.sx-82 {
	font-family: var(--sin-mono);
	font-size: 12px;
	letter-spacing: 2px;
	opacity: 0.6;
}

.sx-83 {
	font-size: 36px;
	letter-spacing: -0.02em;
	margin: 0px 0px 12px;
	font-weight: 600;
	color: #fff;
}

.sx-84 {
	font-size: 16px;
	line-height: 1.55;
	opacity: 0.75;
	margin: 0px;
	max-width: 540px;
}

.sx-85 {
	padding: 120px 56px;
	background: rgb(244, 241, 232);
	position: relative;
}

.sx-86 {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 64px;
	align-items: flex-start;
	margin-bottom: 56px;
}

.sx-87 {
	font-size: 64px;
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin: 20px 0px 24px;
	font-weight: 700;
}

.sx-88 {
	font-size: 18px;
	line-height: 1.6;
	color: rgb(91, 103, 96);
	margin: 0px;
	max-width: 560px;
	padding-top: 32px;
}

.sx-89 {
	display: grid;
	grid-template-columns: 1fr 80px 1fr;
	gap: 0px;
	align-items: stretch;
}

.sx-90 {
	background: rgb(15, 42, 29);
	color: rgb(244, 241, 232);
	border-radius: 28px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sx-91 {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.sx-92 {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	color: rgb(198, 242, 78);
}

.sx-93 {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-top: 8px;
	line-height: 1.05;
}

.sx-94 {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	padding: 6px 12px;
	background: rgb(198, 242, 78);
	color: rgb(10, 20, 14);
	border-radius: 999px;
	font-weight: 700;
}

.sx-95 {
	display: block;
	width: 100%;
	height: 420px;
	border-radius: 20px;
	object-fit: cover;
	object-position: 50% 50%;
}

.sx-96 {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.6;
	margin: 0px;
}

.sx-97 {
	display: flex;
	gap: 32px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.125);
}

.sx-98 {
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	color: rgb(198, 242, 78);
	opacity: 0.7;
}

.sx-99 {
	font-size: 16px;
	font-weight: 600;
	margin-top: 4px;
}

.sx-100 {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 40px 0px;
}

.sx-101 {
	flex: 1 1 0%;
	width: 2px;
	background: repeating-linear-gradient(rgba(10, 20, 14, 0.19) 0px, rgba(10, 20, 14, 0.19) 6px, transparent 6px, transparent 12px);
}

.sx-102 {
	background: rgb(198, 242, 78);
	color: rgb(10, 20, 14);
	padding: 16px 12px;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	border: 2px solid rgb(10, 20, 14);
}

.sx-103 {
	font-family: var(--sin-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1px;
	text-align: center;
	line-height: 1.3;
}

.sx-104 {
	background: rgb(198, 242, 78);
	color: rgb(10, 20, 14);
	border-radius: 28px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sx-105 {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	color: rgb(15, 42, 29);
}

.sx-106 {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	padding: 6px 12px;
	background: rgb(10, 20, 14);
	color: rgb(198, 242, 78);
	border-radius: 999px;
	font-weight: 700;
}

.sx-107 {
	font-size: 15px;
	color: rgb(10, 20, 14);
	opacity: 0.8;
	line-height: 1.6;
	margin: 0px;
}

.sx-108 {
	display: flex;
	gap: 32px;
	padding-top: 16px;
	border-top: 1px solid rgba(10, 20, 14, 0.145);
}

.sx-109 {
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	color: rgb(15, 42, 29);
}

.sx-110 {
	margin-top: 32px;
	padding: 28px 32px;
	background: rgb(251, 250, 243);
	border-radius: 20px;
	border: 1px solid rgba(10, 20, 14, 0.082);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.sx-111 {
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	color: rgb(91, 103, 96);
	margin-bottom: 6px;
}

.sx-112 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.sx-113 {
	padding: 120px 56px;
	position: relative;
}

.sx-114 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

.sx-115 {
	background: rgb(251, 250, 243);
	border-radius: 28px;
	padding: 32px;
	border: 1px solid rgba(10, 20, 14, 0.082);
	max-width: 600px;
	margin: 0 auto;
}

.sx-116 {
	display: flex;
	gap: 24px;
	margin-top: 24px;
	justify-content: space-between;
	padding-top: 24px;
	border-top: 1px solid rgba(10, 20, 14, 0.063);
}

.sx-117 {
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	color: rgb(91, 103, 96);
}

.sx-118 {
	font-weight: 600;
	font-size: 14px;
	margin-top: 4px;
}

.sx-119 {
	font-size: 56px;
	line-height: 1.02;
	letter-spacing: -0.03em;
	margin: 20px 0px 24px;
	font-weight: 700;
}

.sx-120 {
	font-size: 17px;
	line-height: 1.6;
	color: rgb(91, 103, 96);
	max-width: 540px;
	margin: 0px 0px 32px;
}

.sx-121 {
	list-style: none;
	padding: 0px;
	margin: 0px 0px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sx-122 {
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 16px;
}

.sx-123 {
	width: 24px;
	height: 24px;
	border-radius: 24px;
	background: rgb(198, 242, 78);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sx-124 {
	padding: 120px 56px;
	background: rgb(251, 250, 243);
	border-top: 1px solid rgba(10, 20, 14, 0.063);
	border-bottom: 1px solid rgba(10, 20, 14, 0.063);
}

.sx-125 {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 64px;
}

.sx-126 {
	font-size: 64px;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 20px 0px 0px;
	font-weight: 700;
}

.sx-127 {
	font-family: var(--sin-mono);
	font-size: 12px;
	color: rgb(91, 103, 96);
	letter-spacing: 1.5px;
}

.sx-128 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0px;
	position: relative;
}

.sx-129 {
	position: absolute;
	top: 28px;
	left: 56px;
	right: 12.5%;
	max-width: 70vw;
	height: 2px;
	background: repeating-linear-gradient(to right, rgba(10, 20, 14, 0.19) 0px, rgba(10, 20, 14, 0.19) 6px, transparent 6px, transparent 12px);
}

.sx-130 {
	padding: 0px 20px 0px 0px;
	position: relative;
}

.sx-131 {
	width: 56px;
	height: 56px;
	border-radius: 56px;
	background: rgb(10, 20, 14);
	color: rgb(198, 242, 78);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sin-font);
	font-size: 23.52px;
	font-weight: 700;
	letter-spacing: -0.02em;
	position: relative;
}

.sx-132 {
	position: absolute;
	inset: -4px;
	border-radius: 60px;
	border: 1.5px dashed rgba(10, 20, 14, 0.19);
}

.sx-133 {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 24px 0px 12px;
}

.sx-134 {
	font-size: 14px;
	line-height: 1.55;
	color: rgb(91, 103, 96);
	margin: 0px;
}

.sx-135 {
	padding: 120px 56px;
}

.sx-136 {
	font-size: 64px;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 20px 0px 0px;
	font-weight: 700;
	max-width: 700px;
}

.sx-137 {
	font-size: 14px;
	font-family: var(--sin-mono);
	letter-spacing: 1.5px;
	color: rgb(10, 20, 14);
	text-decoration: underline;
}

.sx-138 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.sx-139 {
	background: rgb(251, 250, 243);
	color: rgb(10, 20, 14);
	border: 1px solid rgba(10, 20, 14, 0.082);
	border-radius: 24px;
	padding: 0px;
	display: flex;
	flex-direction: column;
	min-height: 460px;
	overflow: hidden;
}

.sx-140 {
	display: block;
	width: 100%;
	height: 200px;
	border-radius: 0px;
	object-fit: cover;
	object-position: 50% 50%;
}

.sx-141 {
	position: absolute;
	top: 16px;
	left: 16px;
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	font-weight: 700;
	padding: 5px 10px;
	background: rgb(244, 241, 232);
	color: rgb(10, 20, 14);
	border-radius: 999px;
}

.sx-142 {
	position: absolute;
	top: 16px;
	right: 16px;
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1px;
	font-weight: 700;
	padding: 5px 10px;
	background: rgba(255, 255, 255, 0.8);
	color: rgb(10, 20, 14);
	border-radius: 999px;
	backdrop-filter: blur(4px);
}

.sx-143 {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1 1 0%;
}

.sx-144 {
	margin-top: auto;
}

.sx-145 {
	font-size: 56px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	margin-top: 12px;
}

.sx-146 {
	font-size: 14px;
	color: rgb(91, 103, 96);
	margin-top: 4px;
}

.sx-147 {
	border-top: 1px solid rgba(10, 20, 14, 0.082);
	padding-top: 16px;
	margin-top: 8px;
}

.sx-148 {
	font-weight: 700;
	font-size: 18px;
}

.sx-149 {
	font-size: 12px;
	color: rgb(91, 103, 96);
	margin-top: 2px;
	font-family: var(--sin-mono);
	letter-spacing: 1px;
}

.sx-150 {
	background: rgb(198, 242, 78);
	color: rgb(10, 20, 14);
	border: none;
	border-radius: 24px;
	padding: 0px;
	display: flex;
	flex-direction: column;
	min-height: 460px;
	overflow: hidden;
}

.sx-151 {
	position: absolute;
	top: 16px;
	left: 16px;
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	font-weight: 700;
	padding: 5px 10px;
	background: rgb(15, 42, 29);
	color: rgb(198, 242, 78);
	border-radius: 999px;
}

.sx-152 {
	padding: 120px 56px;
	background: rgb(251, 250, 243);
	border-top: 1px solid rgba(10, 20, 14, 0.063);
}

.sx-153 {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 80px;
	align-items: flex-start;
}

.sx-154 {
	font-size: 56px;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 20px 0px 24px;
	font-weight: 700;
}

.sx-155 {
	font-size: 16px;
	color: rgb(91, 103, 96);
	line-height: 1.6;
	margin: 0px;
}

.sx-156 {
	color: rgb(10, 20, 14);
	font-weight: 600;
}

.sx-157 {
	border-top: 1px solid rgba(10, 20, 14, 0.082);
}

.sx-158 {
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	padding: 24px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	font-family: inherit;
}

.sx-159 {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.sx-160 {
	width: 32px;
	height: 32px;
	border-radius: 32px;
	background: rgb(244, 241, 232);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sx-161 {
	padding-bottom: 24px;
	font-size: 16px;
	line-height: 1.6;
	color: rgb(91, 103, 96);
	max-width: 640px;
}

.sx-162 {
	padding: 100px 56px;
	background: rgb(198, 242, 78);
	position: relative;
	overflow: hidden;
}

.sx-163 {
	position: absolute;
	top: -60px;
	right: -60px;
}

.sx-164 {
	position: relative;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 64px;
	align-items: center;
}

.sx-165 {
	font-size: 96px;
	line-height: 0.9;
	letter-spacing: -0.04em;
	margin: 0px;
	font-weight: 700;
	color: rgb(10, 20, 14);
}

.sx-166 {
	font-size: 18px;
	color: rgb(10, 20, 14);
	line-height: 1.5;
	margin: 0px 0px 28px;
	opacity: 0.8;
}

.sx-167 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 18px 28px;
	border-radius: 999px;
	border: none;
	background: rgb(10, 20, 14);
	color: rgb(198, 242, 78);
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
}

.sx-168 {
	padding: 64px 56px 80px;
	position: relative;
}

.sx-169 {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 64px;
	align-items: center;
}

.sx-170 {
	font-size: 112px;
	line-height: 0.94;
	letter-spacing: -0.04em;
	font-weight: 700;
	margin: 24px 0px 28px;
}

.sx-171 {
	font-size: 19px;
	line-height: 1.55;
	color: rgb(91, 103, 96);
	max-width: 520px;
	margin: 0px 0px 36px;
}

.sx-172 {
	position: relative;
	height: 540px;
}

.sx-173 {
	position: absolute;
	right: -40px;
	top: 0px;
}

.sx-174 {
	position: absolute;
	left: 0px;
	top: 20px;
	width: 260px;
	height: 220px;
	background: rgb(251, 250, 243);
	color: rgb(10, 20, 14);
	border-radius: 24px;
	padding: 24px;
	box-shadow: rgba(15, 30, 20, 0.25) 0px 20px 40px -20px;
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.sx-175 {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgb(244, 241, 232);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sx-176 {
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	opacity: 0.7;
}

.sx-177 {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-top: 6px;
	line-height: 1;
}

.sx-178 {
	position: absolute;
	left: 280px;
	top: 60px;
	width: 220px;
	height: 220px;
	background: rgb(15, 42, 29);
	color: rgb(244, 241, 232);
	border-radius: 24px;
	padding: 24px;
	box-shadow: rgba(15, 30, 20, 0.25) 0px 20px 40px -20px;
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.sx-179 {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgb(198, 242, 78);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sx-180 {
	position: absolute;
	left: 60px;
	top: 260px;
	width: 220px;
	height: 240px;
	background: rgb(198, 242, 78);
	color: rgb(10, 20, 14);
	border-radius: 24px;
	padding: 24px;
	box-shadow: rgba(15, 30, 20, 0.25) 0px 20px 40px -20px;
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.sx-181 {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgb(15, 42, 29);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sx-182 {
	position: absolute;
	left: 300px;
	top: 300px;
	width: 260px;
	height: 200px;
	background: rgb(251, 250, 243);
	color: rgb(10, 20, 14);
	border-radius: 24px;
	padding: 24px;
	box-shadow: rgba(15, 30, 20, 0.25) 0px 20px 40px -20px;
	border: 1px solid rgba(10, 20, 14, 0.082);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.sx-183 {
	position: absolute;
	right: 80px;
	top: 0px;
}

.sx-184 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0px;
}

.sx-185 {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 24px 32px 24px 0px;
	border-right: 1px solid rgba(10, 20, 14, 0.082);
}

.sx-186 {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	color: rgb(91, 103, 96);
	padding-top: 4px;
}

.sx-187 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.sx-188 {
	font-size: 13px;
	color: rgb(91, 103, 96);
	margin-top: 4px;
}

.sx-189 {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 24px 32px;
	border-right: 1px solid rgba(10, 20, 14, 0.082);
}

.sx-190 {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 24px 32px;
	border-right: none;
}

.sx-191 {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 80px;
	align-items: center;
}

.sx-192 {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
}

.sx-193 {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: rgb(10, 20, 14);
	color: rgb(198, 242, 78);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sin-mono);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
}

.sx-194 {
	font-family: var(--sin-mono);
	font-size: 12px;
	letter-spacing: 1.8px;
	color: rgb(91, 103, 96);
}

.sx-195 {
	font-size: 80px;
	line-height: 0.95;
	letter-spacing: -0.04em;
	margin: 0px 0px 24px;
	font-weight: 700;
}

.sx-196 {
	list-style: none;
	padding: 0px;
	margin: 0px 0px 36px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sx-197 {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(10, 20, 14, 0.082);
}

.sx-198 {
	width: 24px;
	height: 24px;
	border-radius: 24px;
	background: rgb(198, 242, 78);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}

.sx-199 {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.sx-200 {
	display: flex;
	align-items: center;
	gap: 24px;
}

.sx-201 {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	color: rgb(91, 103, 96);
}

.sx-202 {
	font-size: 18px;
	font-weight: 700;
	margin-top: 2px;
}

.sx-203 {
	position: absolute;
	right: 0px;
	top: 40px;
	width: 460px;
	height: 460px;
	background: rgb(198, 242, 78);
	border-radius: 28px;
}

.sx-204 {
	position: absolute;
	left: 0px;
	bottom: 30px;
}

.sx-205 {
	position: absolute;
	left: 60px;
	top: 60px;
	width: 240px;
	height: 380px;
	background: rgb(251, 250, 243);
	border-radius: 28px;
	padding: 14px;
	box-shadow: rgba(15, 30, 20, 0.3) 0px 30px 60px -20px;
	border: 1px solid rgba(10, 20, 14, 0.063);
}

.sx-206 {
	position: relative;
	height: 220px;
	border-radius: 18px;
	overflow: hidden;
}

.sx-207 {
	display: block;
	width: 100%;
	height: 220px;
	border-radius: 18px;
	object-fit: cover;
	object-position: 50% 50%;
}

.sx-208 {
	position: absolute;
	left: 14px;
	bottom: 14px;
	color: rgb(244, 241, 232);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.1;
	text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 8px;
}

.sx-209 {
	padding: 10px 4px;
}

.sx-210 {
	border-radius: 13px;
	overflow: hidden;
}

.sx-211 {
	position: absolute;
	right: 20px;
	top: 80px;
	width: 280px;
	padding: 20px;
	background: rgb(251, 250, 243);
	border-radius: 20px;
	box-shadow: rgba(15, 30, 20, 0.25) 0px 30px 60px -25px;
	border: 1px solid rgba(10, 20, 14, 0.063);
}

.sx-212 {
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.4px;
	color: rgb(91, 103, 96);
}

.sx-213 {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.sx-214 {
	aspect-ratio: 1 / 1;
	background: rgb(244, 241, 232);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	color: rgb(91, 103, 96);
	font-family: var(--sin-mono);
}

.sx-215 {
	aspect-ratio: 1 / 1;
	background: rgb(15, 42, 29);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	color: rgb(198, 242, 78);
	font-family: var(--sin-mono);
}

.sx-216 {
	position: absolute;
	right: 60px;
	bottom: 20px;
	width: 260px;
	padding: 18px;
	background: rgb(15, 42, 29);
	color: rgb(244, 241, 232);
	border-radius: 18px;
	box-shadow: rgba(15, 30, 20, 0.4) 0px 20px 40px -15px;
}

.sx-217 {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 14px;
}

.sx-218 {
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.4px;
	color: rgb(198, 242, 78);
}

.sx-219 {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	margin-top: 6px;
}

.sx-220 {
	padding: 120px 56px;
	background: rgb(251, 250, 243);
	position: relative;
}

.sx-221 {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 80px;
	align-items: center;
}

.sx-222 {
	position: absolute;
	left: 0px;
	top: 30px;
	width: 460px;
	height: 480px;
	background: rgb(15, 42, 29);
	border-radius: 28px;
}

.sx-223 {
	position: absolute;
	right: 20px;
	top: 0px;
}

.sx-224 {
	position: absolute;
	left: 30px;
	top: 60px;
	width: 380px;
	padding: 22px;
	background: rgb(251, 250, 243);
	border-radius: 18px;
	box-shadow: rgba(15, 30, 20, 0.3) 0px 30px 60px -20px;
	border: 1px solid rgba(10, 20, 14, 0.063);
}

.sx-225 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.4px;
	color: rgb(91, 103, 96);
}

.sx-226 {
	width: 6px;
	height: 6px;
	background: rgb(198, 242, 78);
	border-radius: 6px;
}

.sx-227 {
	font-size: 18px;
	color: rgb(26, 13, 171);
	margin-top: 12px;
	font-weight: 500;
}

.sx-228 {
	font-size: 13px;
	color: rgb(13, 110, 47);
	margin-top: 4px;
}

.sx-229 {
	font-size: 13px;
	color: rgb(91, 103, 96);
	margin-top: 8px;
	line-height: 1.55;
}

.sx-230 {
	display: flex;
	gap: 4px;
	margin-top: 12px;
}

.sx-231 {
	font-size: 11px;
	color: rgb(26, 13, 171);
	text-decoration: underline;
	padding-right: 8px;
}

.sx-232 {
	position: absolute;
	right: 20px;
	top: 30px;
	width: 300px;
	padding: 18px;
	background: rgb(244, 241, 232);
	border-radius: 20px;
	box-shadow: rgba(15, 30, 20, 0.25) 0px 30px 60px -25px;
	border: 1px solid rgba(10, 20, 14, 0.063);
}

.sx-233 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.sx-234 {
	display: block;
	width: 100%;
	height: 120px;
	border-radius: 10px;
	object-fit: cover;
	object-position: 50% 50%;
}

.sx-235 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-top: 12px;
}

.sx-236 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
}

.sx-237 {
	color: rgb(224, 163, 0);
	font-size: 14px;
}

.sx-238 {
	font-size: 12px;
	color: rgb(91, 103, 96);
}

.sx-239 {
	position: absolute;
	left: 60px;
	bottom: 0px;
	width: 360px;
	padding: 20px;
	background: rgb(198, 242, 78);
	color: rgb(10, 20, 14);
	border-radius: 20px;
	box-shadow: rgba(15, 30, 20, 0.3) 0px 20px 40px -15px;
}

.sx-240 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 14px;
}

.sx-241 {
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.4px;
	color: rgb(10, 20, 14);
	opacity: 0.7;
}

.sx-242 {
	display: grid;
	grid-template-columns: 1fr 60px 60px;
	padding: 10px 0px;
	border-top: none;
	align-items: center;
}

.sx-243 {
	font-size: 13px;
	font-weight: 600;
}

.sx-244 {
	font-family: var(--sin-mono);
	font-size: 11px;
	color: rgb(15, 42, 29);
	text-align: right;
	font-weight: 700;
}

.sx-245 {
	font-family: var(--sin-mono);
	font-size: 11px;
	color: rgb(10, 20, 14);
	opacity: 0.45;
	text-align: right;
}

.sx-246 {
	display: grid;
	grid-template-columns: 1fr 60px 60px;
	padding: 10px 0px;
	border-top: 1px solid rgba(10, 20, 14, 0.125);
	align-items: center;
}

.sx-247 {
	position: absolute;
	right: 0px;
	top: 20px;
	width: 480px;
	height: 500px;
	background: rgb(198, 242, 78);
	border-radius: 28px;
}

.sx-248 {
	position: absolute;
	left: 30px;
	top: 60px;
	width: 360px;
	padding: 22px;
	background: rgb(251, 250, 243);
	border-radius: 18px;
	box-shadow: rgba(15, 30, 20, 0.3) 0px 30px 60px -20px;
	border: 1px solid rgba(10, 20, 14, 0.063);
}

.sx-249 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.sx-250 {
	font-family: var(--sin-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.5px;
	padding: 3px 6px;
	background: rgb(10, 20, 14);
	color: rgb(244, 241, 232);
	border-radius: 3px;
}

.sx-251 {
	font-size: 11px;
	color: rgb(91, 103, 96);
	font-family: var(--sin-mono);
}

.sx-252 {
	font-size: 16px;
	color: rgb(26, 13, 171);
	font-weight: 500;
}

.sx-253 {
	font-size: 13px;
	color: rgb(91, 103, 96);
	margin-top: 6px;
	line-height: 1.55;
}

.sx-254 {
	margin-top: 14px;
	display: flex;
	gap: 6px;
}

.sx-255 {
	background: rgb(15, 42, 29);
	color: rgb(244, 241, 232);
	font-size: 11px;
	padding: 5px 10px;
	border-radius: 6px;
	font-weight: 600;
}

.sx-256 {
	background: rgb(244, 241, 232);
	color: rgb(10, 20, 14);
	font-size: 11px;
	padding: 5px 10px;
	border-radius: 6px;
	font-weight: 600;
	border: 1px solid rgba(10, 20, 14, 0.145);
}

.sx-257 {
	position: absolute;
	right: 30px;
	top: 30px;
	width: 280px;
	padding: 22px;
	background: rgb(10, 20, 14);
	color: rgb(244, 241, 232);
	border-radius: 20px;
	box-shadow: rgba(15, 30, 20, 0.4) 0px 30px 60px -20px;
}

.sx-258 {
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	color: rgb(198, 242, 78);
	margin-bottom: 14px;
}

.sx-259 {
	margin-top: 0px;
}

.sx-260 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
}

.sx-261 {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.667);
}

.sx-262 {
	height: 6px;
	background: rgba(255, 255, 255, 0.082);
	border-radius: 3px;
}

.sx-263 {
	height: 6px;
	width: 100%;
	background: rgb(198, 242, 78);
	border-radius: 3px;
}

.sx-264 {
	height: 6px;
	width: 64%;
	background: rgb(198, 242, 78);
	border-radius: 3px;
}

.sx-265 {
	height: 6px;
	width: 32%;
	background: rgb(198, 242, 78);
	border-radius: 3px;
}

.sx-266 {
	height: 6px;
	width: 18%;
	background: rgb(198, 242, 78);
	border-radius: 3px;
}

.sx-267 {
	position: absolute;
	left: 100px;
	bottom: 20px;
	width: 320px;
	padding: 0px;
	background: rgb(251, 250, 243);
	border-radius: 24px;
	box-shadow: rgba(15, 30, 20, 0.3) 0px 20px 40px -15px;
	border: 1px solid rgba(10, 20, 14, 0.082);
	overflow: hidden;
}

.sx-268 {
	display: block;
	width: 100%;
	height: 120px;
	border-radius: 0px;
	object-fit: cover;
	object-position: 50% 50%;
}

.sx-269 {
	padding: 24px;
}

.sx-270 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sx-271 {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-top: 10px;
}

.sx-272 {
	font-size: 48px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
}

.sx-273 {
	font-size: 16px;
	color: rgb(91, 103, 96);
	text-decoration: line-through;
}

.sx-274 {
	position: relative;
	height: 560px;
}

.sx-275 {
	position: absolute;
	left: 0px;
	top: 20px;
	width: 500px;
	height: 500px;
	background: rgb(15, 42, 29);
	border-radius: 28px;
}

.sx-276 {
	position: absolute;
	right: 0px;
	bottom: 0px;
}

.sx-277 {
	position: absolute;
	left: 30px;
	top: 60px;
	width: 400px;
	height: 280px;
	background: rgb(251, 250, 243);
	border-radius: 14px;
	box-shadow: rgba(15, 30, 20, 0.4) 0px 30px 60px -20px;
	border: 1px solid rgba(10, 20, 14, 0.082);
	overflow: hidden;
}

.sx-278 {
	padding: 10px 12px;
	background: rgb(244, 241, 232);
	border-bottom: 1px solid rgba(10, 20, 14, 0.063);
	display: flex;
	align-items: center;
	gap: 6px;
}

.sx-279 {
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background: rgb(255, 95, 86);
}

.sx-280 {
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background: rgb(255, 189, 46);
}

.sx-281 {
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background: rgb(39, 201, 63);
}

.sx-282 {
	margin-left: 12px;
	font-family: var(--sin-mono);
	font-size: 10px;
	color: rgb(91, 103, 96);
}

.sx-283 {
	position: relative;
	height: 244px;
	overflow: hidden;
}

.sx-284 {
	display: block;
	width: 100%;
	height: 244px;
	border-radius: 0px;
	object-fit: cover;
	object-position: 50% 50%;
}

.sx-285 {
	position: absolute;
	right: 80px;
	top: 100px;
	width: 180px;
	height: 380px;
	background: rgb(10, 20, 14);
	border-radius: 32px;
	padding: 8px;
	box-shadow: rgba(15, 30, 20, 0.5) 0px 30px 60px -20px;
}

.sx-286 {
	background: rgb(244, 241, 232);
	border-radius: 24px;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.sx-287 {
	height: 24px;
	background: rgb(10, 20, 14);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px 14px;
	color: rgb(244, 241, 232);
}

.sx-288 {
	font-family: var(--sin-mono);
	font-size: 9px;
	font-weight: 700;
}

.sx-289 {
	width: 56px;
	height: 12px;
	background: rgb(10, 20, 14);
	border-radius: 8px;
}

.sx-290 {
	font-family: var(--sin-mono);
	font-size: 8px;
	opacity: 0.9;
}

.sx-291 {
	position: relative;
	height: 340px;
	overflow: hidden;
}

.sx-292 {
	display: block;
	width: 100%;
	height: 340px;
	border-radius: 0px;
	object-fit: cover;
	object-position: 50% 50%;
}

.sx-293 {
	position: absolute;
	left: 80px;
	bottom: 0px;
	width: 280px;
	padding: 22px;
	background: rgb(198, 242, 78);
	color: rgb(10, 20, 14);
	border-radius: 20px;
	box-shadow: rgba(15, 30, 20, 0.3) 0px 20px 40px -15px;
}

.sx-294 {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.sx-295 {
	font-size: 56px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	margin-top: 6px;
}

.sx-296 {
	font-size: 18px;
	font-weight: 500;
}

.sx-297 {
	font-size: 12px;
	color: rgb(10, 20, 14);
	opacity: 0.7;
	margin-top: 4px;
}

.sx-298 {
	padding: 120px 56px;
	background: rgb(244, 241, 232);
}

.sx-299 {
	font-size: 80px;
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin: 20px 0px 0px;
	font-weight: 700;
}

.sx-300 {
	font-size: 16px;
	color: rgb(91, 103, 96);
	line-height: 1.55;
	max-width: 360px;
	margin: 0px;
}

.sx-301 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.sx-302 {
	background: rgb(251, 250, 243);
	color: rgb(10, 20, 14);
	border: 1px solid rgba(10, 20, 14, 0.082);
	border-radius: 24px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
	min-height: 420px;
}

.sx-303 {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-top: 8px;
}

.sx-304 {
	font-size: 14px;
	color: rgb(91, 103, 96);
	margin-top: 6px;
	line-height: 1.5;
}

.sx-305 {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding-top: 14px;
	border-top: 1px solid rgba(10, 20, 14, 0.082);
}

.sx-306 {
	font-family: var(--sin-mono);
	font-size: 13px;
	opacity: 0.6;
}

.sx-307 {
	font-size: 13px;
	opacity: 0.7;
}

.sx-308 {
	list-style: none;
	padding: 0px;
	margin: auto 0px 0px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sx-309 {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
}

.sx-310 {
	flex-shrink: 0;
	margin-top: 2px;
}

.sx-311 {
	text-align: center;
	padding: 12px 16px;
	border-radius: 999px;
	margin-top: 4px;
	background: transparent;
	color: rgb(10, 20, 14);
	border: 1.5px solid rgb(10, 20, 14);
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

.sx-311:hover {
	color: rgb(10, 20, 14);
}

.sx-312 {
	background: rgb(15, 42, 29);
	color: rgb(244, 241, 232);
	border: none;
	border-radius: 24px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
	min-height: 420px;
}

.sx-313 {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 4px 10px;
	background: rgb(198, 242, 78);
	color: rgb(10, 20, 14);
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	font-weight: 700;
	border-radius: 999px;
}

.sx-314 {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.667);
	margin-top: 6px;
	line-height: 1.5;
}

.sx-315 {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.125);
}

.sx-316 {
	text-align: center;
	padding: 12px 16px;
	border-radius: 999px;
	margin-top: 4px;
	background: rgb(198, 242, 78);
	color: rgb(10, 20, 14);
	border: none;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

.sx-316:hover {
	color: #0F2A1D;
}

.sx-317 {
	padding: 120px 56px;
	background: rgb(15, 42, 29);
	color: rgb(244, 241, 232);
	position: relative;
	overflow: hidden;
}

.sx-318 {
	position: absolute;
	top: 60px;
	left: -120px;
}

.sx-319 {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 64px;
	align-items: center;
}

.sx-320 {
	font-size: 72px;
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin: 20px 0px 24px;
	font-weight: 700;
	color: #fff;
}

.sx-321 {
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	max-width: 480px;
	margin: 0px;
}

.sx-322 {
	background: rgba(255, 255, 255, 0.063);
	border: 1px solid rgba(255, 255, 255, 0.125);
	border-radius: 24px;
	padding: 28px;
	position: relative;
}

.sx-323 {
	display: grid;
	grid-template-columns: 1fr 130px 240px 80px;
	padding: 16px 0px;
	border-top: none;
	align-items: center;
	gap: 12px;
}

.sx-324 {
	font-size: 17px;
	font-weight: 600;
}

.sx-325 {
	font-family: var(--sin-mono);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	text-align: right;
}

.sx-326 {
	font-family: var(--sin-mono);
	font-size: 12px;
	color: rgb(198, 242, 78);
	text-align: right;
	font-weight: 600;
}

.sx-327 {
	font-family: var(--sin-mono);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.376);
	text-align: right;
}

.sx-328 {
	display: grid;
	grid-template-columns: 1fr 130px 240px 80px;
	padding: 16px 0px;
	border-top: 1px solid rgba(255, 255, 255, 0.082);
	align-items: center;
	gap: 12px;
}

.sx-329 {
	font-family: var(--sin-mono);
	font-size: 12px;
	color: rgb(198, 242, 78);
	text-align: right;
}

.sx-330 {
	position: absolute;
	top: 28px;
	left: 56px;
	right: 12.5%;
	max-width: 70vw;
	height: 2px;
	background: repeating-linear-gradient(to right, rgba(10, 20, 14, 0.19) 0px, rgba(10, 20, 14, 0.19) 6px, transparent 6px, transparent 12px);
}

.sx-331 {
	padding: 40px 56px 48px;
	position: relative;
}

.sx-332 {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 56px;
	align-items: flex-end;
}

.sx-333 {
	font-size: 144px;
	line-height: 0.92;
	letter-spacing: -0.04em;
	font-weight: 700;
	margin: 24px 0px;
}

.sx-334 {
	position: absolute;
	inset: -6px -14px;
	background: rgb(198, 242, 78);
	z-index: 0;
	transform: skewX(-6deg);
}

.sx-335 {
	font-size: 22px;
	line-height: 1.45;
	color: rgb(91, 103, 96);
	max-width: 600px;
	margin: 0px;
}

.sx-336 {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sx-337 {
	padding: 20px 24px;
	background: rgb(251, 250, 243);
	border-radius: 16px;
	border: 1px solid rgba(10, 20, 14, 0.082);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	position: relative;
}

.sx-338 {
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.8px;
	color: rgb(91, 103, 96);
}

.sx-339 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-top: 4px;
}

.sx-340 {
	font-size: 13px;
	color: rgb(91, 103, 96);
	margin-top: 2px;
}

.sx-341 {
	width: 36px;
	height: 36px;
	border-radius: 36px;
	background: rgb(198, 242, 78);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sx-342 {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.sx-343 {
	padding: 20px 24px;
	background: rgb(251, 250, 243);
	border-radius: 16px;
	border: 1px solid rgba(10, 20, 14, 0.082);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
}

.sx-344 {
	padding: 80px 56px 120px;
	position: relative;
}

.sx-345 {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 56px;
	align-items: flex-start;
	background: rgb(251, 250, 243);
	border-radius: 32px;
	padding: 48px;
	border: 1px solid rgba(10, 20, 14, 0.082);
	position: relative;
	overflow: hidden;
}

.sx-346 {
	position: absolute;
	top: -40px;
	right: -40px;
	width: 200px;
	height: 200px;
	background: rgb(198, 242, 78);
	border-radius: 200px;
	opacity: 0.5;
}

.sx-347 {
	position: absolute;
	top: 20px;
	right: 20px;
}

.sx-348 {
	font-size: 48px;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 20px 0px 32px;
	font-weight: 700;
}

.sx-349 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 18px;
}

.sx-350 {
	grid-column: auto;
	margin-bottom: 0px;
}

.sx-351 {
	display: block;
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	color: rgb(91, 103, 96);
	margin-bottom: 8px;
}

.sx-352 {
	width: 100%;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1.5px solid rgba(10, 20, 14, 0.125);
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	color: rgb(10, 20, 14);
	outline: none;
}

.sx-353 {
	position: relative !important;
	height: 0px !important;
	width: 0px !important;
	display: initial !important;
	float: left !important;
}

.sx-354 {
	grid-column: 1 / -1;
	margin-bottom: 18px;
}

.sx-355 {
	margin-top: 24px;
}

.sx-356 {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	color: rgb(91, 103, 96);
	margin-bottom: 12px;
}

.sx-357 {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.sx-358 {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 999px;
	font-family: inherit;
	background: transparent;
	color: rgb(10, 20, 14);
	border: 1.5px solid rgba(10, 20, 14, 0.19);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.sx-359 {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 999px;
	font-family: inherit;
	background: rgb(15, 42, 29);
	color: rgb(244, 241, 232);
	border: none;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.sx-360 {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	color: rgb(91, 103, 96);
	margin-bottom: 10px;
}

.sx-361 {
	width: 100%;
	min-height: 140px;
	padding: 16px;
	border-radius: 14px;
	border: 1.5px solid rgba(10, 20, 14, 0.125);
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: rgb(10, 20, 14);
	resize: vertical;
	outline: none;
}

.sx-362 {
	margin-top: 28px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.sx-363 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 18px 28px;
	border-radius: 999px;
	border: none;
	background: rgb(10, 20, 14);
	color: rgb(198, 242, 78);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
}

.sx-364 {
	font-size: 13px;
	color: rgb(91, 103, 96);
	line-height: 1.4;
}

.sx-365 {
	color: rgb(10, 20, 14);
	font-weight: 600;
	text-decoration: underline;
}

.sx-366 {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sx-367 {
	background: rgb(10, 20, 14);
	color: rgb(244, 241, 232);
	padding: 0px;
	border-radius: 20px;
	position: relative;
	overflow: hidden;
}

.sx-368 {
	display: block;
	width: 100%;
	height: 220px;
	border-radius: 0px;
	object-fit: cover;
	object-position: 50% 50%;
}

.sx-369 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0px 0px 12px;
	line-height: 1.2;
	color: #fff;
}

.sx-370 {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.667);
	margin-top: 12px;
	line-height: 1.5;
}

.sx-371 {
	background: rgb(198, 242, 78);
	color: rgb(10, 20, 14);
	padding: 24px;
	border-radius: 20px;
}

.sx-372 {
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
}

.sx-373 {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-top: 6px;
}

.sx-374 {
	font-size: 16px;
	font-weight: 500;
}

.sx-375 {
	background: rgb(244, 241, 232);
	padding: 24px;
	border-radius: 20px;
	border: 1px solid rgba(10, 20, 14, 0.082);
}

.sx-376 {
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	color: rgb(91, 103, 96);
	margin-bottom: 12px;
}

.sx-377 {
	display: flex;
	justify-content: space-between;
	padding: 10px 0px;
	border-top: none;
	font-size: 14px;
}

.sx-378 {
	font-weight: 600;
}

.sx-379 {
	color: rgb(91, 103, 96);
	font-family: var(--sin-mono);
}

.sx-380 {
	display: flex;
	justify-content: space-between;
	padding: 10px 0px;
	border-top: 1px solid rgba(10, 20, 14, 0.063);
	font-size: 14px;
}

.sx-381 {
	padding: 0px 56px 120px;
}

.sx-382 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.sx-383 {
	background: rgb(198, 242, 78);
	color: rgb(10, 20, 14);
	padding: 32px;
	border-radius: 24px;
	border: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 280px;
	position: relative;
	overflow: hidden;
}

.sx-384 {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0px;
	line-height: 1.1;
}

.sx-385 {
	font-size: 15px;
	line-height: 1.55;
	opacity: 0.7;
	margin: 0px;
}

.sx-386 {
	margin-top: auto;
	font-size: 15px;
	font-weight: 700;
	color: rgb(10, 20, 14);
	text-decoration: none;
}

.sx-387 {
	background: rgb(251, 250, 243);
	color: rgb(10, 20, 14);
	padding: 32px;
	border-radius: 24px;
	border: 1px solid rgba(10, 20, 14, 0.082);
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 280px;
	position: relative;
	overflow: hidden;
}

.sx-388 {
	background: rgb(15, 42, 29);
	color: rgb(244, 241, 232);
	padding: 32px;
	border-radius: 24px;
	border: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 280px;
	position: relative;
	overflow: hidden;
}

.sx-389 {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0px;
	line-height: 1.1;
	color: #fff;
}

.sx-390 {
	font-size: 15px;
	line-height: 1.55;
	opacity: 0.85;
	margin: 0px;
}

.sx-391 {
	margin-top: auto;
	font-size: 15px;
	font-weight: 700;
	color: rgb(198, 242, 78);
	text-decoration: none;
}

.sx-392 {
	font-size: 72px;
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin: 20px 0px 0px;
	font-weight: 700;
}

.sx-393 {
	font-family: var(--sin-mono);
	font-size: 12px;
	color: rgb(91, 103, 96);
	letter-spacing: 1.5px;
	text-align: right;
	max-width: 280px;
	line-height: 1.6;
}

.sx-394 {
	position: absolute;
	top: 42px;
	left: 56px;
	right: 12.5%;
	max-width: 70vw;
	height: 2px;
	background: repeating-linear-gradient(to right, rgba(10, 20, 14, 0.19) 0px, rgba(10, 20, 14, 0.19) 6px, transparent 6px, transparent 12px);
}

.sx-395 {
	padding: 0px 24px 0px 0px;
	position: relative;
}

.sx-396 {
	margin-top: 28px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sx-397 {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	color: rgb(10, 20, 14);
	background: rgb(198, 242, 78);
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 600;
}

.sx-398 {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 14px 0px 12px;
	line-height: 1.1;
}

.sx-399 {
	font-size: 64px;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 20px 0px 24px;
	font-weight: 700;
}

.sx-400 {
	font-size: 17px;
	line-height: 1.6;
	color: rgb(91, 103, 96);
	max-width: 480px;
	margin: 0px 0px 32px;
}

.sx-401 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 32px;
}

.sx-402 {
	padding-top: 16px;
	border-top: 1px solid rgba(10, 20, 14, 0.082);
}

.sx-403 {
	display: flex;
	gap: 12px;
}

.sx-404 {
	background: rgb(251, 250, 243);
	border-radius: 28px;
	padding: 0px;
	border: 1px solid rgba(10, 20, 14, 0.082);
	overflow: hidden;
	max-width: 800px;
	margin: 0 auto;
}

.sx-405 {
	display: block;
	width: 100%;
	height: 260px;
	border-radius: 0px;
	object-fit: cover;
	object-position: 50% 50%;
}

.sx-406 {
	padding: 32px;
}

.sx-407 {
	display: flex;
	justify-content: space-between;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(10, 20, 14, 0.063);
}

.sx-408 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 56px;
	position: relative;
	z-index: 2;
	background-color: #fff;
}

.sx-409 {
	display: inline-flex;
}

.sx-410 {
	height: 60px;
	width: auto;
	display: block;
}

.sx-411 {
	display: flex;
	gap: 32px;
	align-items: center;
}

.sx-412 {
	font-size: 14px;
	color: rgb(91, 103, 96);
	text-decoration: none;
	font-weight: 500;
}

.sx-413 {
	display: flex;
	gap: 12px;
	align-items: center;
}

.sx-414 {
	text-decoration: none;
}

.sx-415 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	border: none;
	background: rgb(10, 20, 14);
	color: rgb(198, 242, 78);
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
}

.sx-416 {
	padding: 64px 56px 36px;
	background: rgb(10, 20, 14);
	color: rgb(244, 241, 232);
}

.sx-417 {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.082);
}

.sx-418 {
	height: 124px;
	width: auto;
	display: block;
}

.sx-419 {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.667);
	line-height: 1.6;
	margin: 20px 0px 0px;
	max-width: 320px;
}

.sx-420 {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 2px;
	color: rgb(198, 242, 78);
	margin-bottom: 16px;
}

.sx-421 {
	list-style: none;
	padding: 0px;
	margin: 0px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sx-422 {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
}

.sx-423 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 24px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
	font-family: var(--sin-mono);
	letter-spacing: 1px;
}

/* ── MANUAL IMAGE / LOGO CLASSES ── */
/* Images with PHP src attributes that needed direct string replacement. */

.sx-img-cover-200-r18 {
	display: block;
	width: 100%;
	height: 200px;
	border-radius: 18px;
	object-fit: cover;
	object-position: center;
}

.sx-img-cover-420-r20 {
	display: block;
	width: 100%;
	height: 420px;
	border-radius: 20px;
	object-fit: cover;
	object-position: center;
}

.sx-img-cover-200 {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	object-position: center;
}

.sx-img-cover-220-r18 {
	display: block;
	width: 100%;
	height: 220px;
	border-radius: 18px;
	object-fit: cover;
	object-position: center;
}

.sx-img-cover-120-r10 {
	display: block;
	width: 100%;
	height: 120px;
	border-radius: 10px;
	object-fit: cover;
	object-position: center;
}

.sx-img-cover-120 {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: cover;
	object-position: center;
}

.sx-img-cover-244 {
	display: block;
	width: 100%;
	height: 244px;
	object-fit: cover;
	object-position: center;
}

.sx-img-cover-340 {
	display: block;
	width: 100%;
	height: 340px;
	object-fit: cover;
	object-position: center;
}

.sx-img-cover-220 {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	object-position: center;
}

.sx-img-cover-260 {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
	object-position: center;
}

.sx-inlineflex {
	display: inline-flex;
}

.sx-logo-dark {
	height: 60px;
	width: auto;
	display: block;
}

.sx-logo-white {
	height: 80px;
	width: auto;
	display: block;
}

.sx-navlink {
	font-size: 14px;
	color: rgb(91, 103, 96);
	text-decoration: none;
	font-weight: 500;
}

.sx-nodecor {
	text-decoration: none;
}

/* ══════════════════════════════════════════════════════════
NAV + MOBILE NAV
══════════════════════════════════════════════════════════ */
nav {
	position: sticky;
	top: 0;
	z-index: 100;
}

.sin-hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
}

.sin-hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: #5b6760;
	border-radius: 2px;
	transition: all 0.3s ease;
}

.sin-hamburger.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.sin-hamburger.active span:nth-child(2) {
	opacity: 0;
}

.sin-hamburger.active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

.sin-mobile-nav {
	display: none;
	background: #0f2a1d;
	padding: 0 24px;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.35s ease;
}

.sin-mobile-nav.open {
	display: block;
	max-height: 400px;
}

.sin-mobile-nav a {
	display: block;
	color: rgba(255, 255, 255, 0.7);
	font-size: 15px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	font-family: var(--sin-font);
	text-decoration: none;
	transition: color 0.2s ease;
}

.sin-mobile-nav a:last-child {
	border-bottom: none;
	color: var(--sin-lime);
}

.sin-mobile-nav a:hover {
	color: var(--sin-lime);
}

/* ══════════════════════════════════════════════════════════
OCEANWP OVERRIDES — suppress OceanWP chrome on Sinergy pages
══════════════════════════════════════════════════════════ */
.page-template-page-sinergy-home-php .site-header,
.page-template-page-sinergy-services-php .site-header,
.page-template-page-sinergy-contact-php .site-header {
	display: none !important;
}

.page-template-page-sinergy-home-php .site-footer,
.page-template-page-sinergy-services-php .site-footer,
.page-template-page-sinergy-contact-php .site-footer {
	display: none !important;
}

.page-template-page-sinergy-home-php #wrap,
.page-template-page-sinergy-services-php #wrap,
.page-template-page-sinergy-contact-php #wrap {
	padding: 0 !important;
	margin: 0 !important;
}

.page-template-page-sinergy-home-php .content-area,
.page-template-page-sinergy-services-php .content-area,
.page-template-page-sinergy-contact-php .content-area {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.page-template-page-sinergy-home-php .entry-content,
.page-template-page-sinergy-services-php .entry-content,
.page-template-page-sinergy-contact-php .entry-content {
	margin: 0 !important;
	padding: 0 !important;
}

.sin p {
	margin-top: 0;
}

/* ══════════════════════════════════════════════════════════
HOVER EFFECTS
══════════════════════════════════════════════════════════ */
/* Buttons */
button,
.sy-btn {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

button:hover,
.sy-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(198, 242, 78, 0.18);
}

/* Nav links */
.sx-navlink,
.sx-412 {
	transition: color 0.2s ease;
}

.sx-navlink:hover,
.sx-412:hover {
	color: var(--sin-ink) !important;
}

/* Footer links */
footer a {
	transition: color 0.2s ease;
}

footer a:hover {
	color: var(--sin-lime) !important;
}

/* Images */
.sin img {
	transition: transform 0.4s ease;
}

.sin img:hover {
	transform: scale(1.02);
}

/* Cards — any padded bordered box */
[class^="sx-"]:has(h3),
[class^="sx-"]:has(h2) {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ══════════════════════════════════════════════════════════
SCROLL ANIMATIONS
══════════════════════════════════════════════════════════ */
.sin-animate {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.sin-animate.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger children */
.sin-animate:nth-child(2) {
	transition-delay: 0.1s;
}

.sin-animate:nth-child(3) {
	transition-delay: 0.2s;
}

.sin-animate:nth-child(4) {
	transition-delay: 0.3s;
}

/* FAQ */
.sin-faq-answer {
	display: none;
	padding: 0 0 24px;
	color: #5b6760;
	line-height: 1.7;
}

[data-faq-toggle] {
	cursor: pointer;
}

[data-faq-toggle] .sx-160,
[data-faq-toggle] .sx-160 svg {
	transition: all 0.3s ease;
}

.sx-158.is-open[data-faq-toggle] .sx-160 {
	background: var(--sin-dark);
}

.sx-158.is-open[data-faq-toggle] .sx-160 svg {
	transform: rotatez(45deg);
}

.sx-158.is-open[data-faq-toggle] .sx-160 svg path {
	stroke: #fff;
}

/* ══════════════════════════════════════════════════════════
RESPONSIVE — TABLET (max-width: 1024px)
Targets actual class names now, no more style= selectors.
══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
RESPONSIVE — clean single-pass, no duplicates
Tablet: ≤1024px | Mobile: ≤768px | Small: ≤480px
All selectors use sx-N classes mapped from the audit.
══════════════════════════════════════════════════════════ */


/* ── NAV ── */


/* ══════════════════════════════════════════════════════════
SINERGY DESIGN SYSTEM — Semantic Classes
Shared, reusable classes replacing repeated sx-N patterns.
Covers: eyebrows, headings, body text, buttons, links,
nav, footer, FAQ, stats, highlights, dots.
══════════════════════════════════════════════════════════ */


/* ── EYEBROW LABELS ── */
.sin-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(10, 20, 14, 0.145);
	background: transparent;
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgb(91, 103, 96);
}
.sin-eyebrow--sm { padding: 3px 8px; }
.sin-eyebrow--tag {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 6px 12px;
	background: rgb(244, 241, 232);
	border: none;
	border-radius: 999px;
	color: rgb(91, 103, 96);
}
/* Absolute-positioned card tags */
.sin-tag {
	position: absolute;
	top: 16px;
	left: 16px;
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgb(10, 20, 14);
	color: rgb(198, 242, 78);
}
.sin-tag--tr { left: auto; right: 16px; }
.sin-tag--lime { background: rgb(198, 242, 78); color: rgb(10, 20, 14); }


/* ── HEADINGS ── */
.sin-h1 {
	font-size: 96px;
	line-height: 0.96;
	letter-spacing: -0.04em;
	font-weight: 700;
	margin: 24px 0 28px;
	max-width: 640px;
}
.sin-h1--cta {
	font-size: 96px;
	line-height: 0.9;
	letter-spacing: -0.04em;
	margin: 0;
	font-weight: 700;
	color: rgb(10, 20, 14);
}
/* Standard section h2 — 64px */
.sin-h2 {
	font-size: 64px;
	line-height: 1;
	letter-spacing: -0.03em;
	font-weight: 700;
	margin: 20px 0 24px;
}
/* Smaller h2 variant — 48–56px */
.sin-h2--sm {
	font-size: 56px;
	line-height: 1;
	letter-spacing: -0.03em;
	font-weight: 700;
	margin: 20px 0 24px;
}
/* Larger h2 variant — 72px (services, contact) */
.sin-h2--lg {
	font-size: 72px;
	line-height: 0.95;
	letter-spacing: -0.03em;
	font-weight: 700;
	margin: 20px 0 0;
}


/* ── BODY TEXT ── */
.sin-lead {
	font-size: 19px;
	line-height: 1.55;
	max-width: 520px;
	color: rgb(91, 103, 96);
}
/* 14px base body */
.sin-body {
	font-size: 14px;
	line-height: 1.55;
	color: rgb(91, 103, 96);
	margin: 0;
}
.sin-body--sm  { font-size: 14px; margin-top: 4px; }
.sin-body--md  { font-size: 16px; line-height: 1.6; }
.sin-body--strong { font-size: 16px; font-weight: 500; }
.sin-body--strike { font-size: 16px; text-decoration: line-through; }


/* ── BUTTONS ── */
.sin-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: 999px;
	border: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.sin-btn:hover { transform: translateY(-2px); }
/* Primary — dark bg, lime text */
.sin-btn--dark {
	background: rgb(10, 20, 14);
	color: rgb(198, 242, 78);
}
.sin-btn--dark:hover { background: rgb(22, 43, 30); box-shadow: 0 8px 24px rgba(10,20,14,0.25);color: rgb(198, 242, 78); }
/* Outline — transparent with border */
.sin-btn--outline {
	background: transparent;
	border: 1.5px solid rgb(10, 20, 14);
	color: rgb(10, 20, 14);
}
.sin-btn--outline:hover { background: rgba(10,20,14,0.05);color: rgb(10, 20, 14); }
/* Lime fill */
.sin-btn--lime {
	background: rgb(198, 242, 78);
	color: rgb(10, 20, 14);
}
.sin-btn--lime:hover { background: rgb(180, 228, 60);color: rgb(10, 20, 14); }
/* Ghost — transparent, no border */
.sin-btn--ghost {
	background: transparent;
	color: rgb(10, 20, 14);
	padding: 12px 16px;
	border: 1px solid rgba(10,20,14,0.15);
}
.sin-btn--ghost:hover { border-color: rgb(10,20,14); }
/* Icon circle */
.sin-btn--icon {
	width: 56px;
	height: 56px;
	padding: 0;
	justify-content: center;
	border-radius: 999px;
	background: rgb(10, 20, 14);
	color: rgb(198, 242, 78);
}
/* Contact form choice toggles */
.sin-btn--choice {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 999px;
	font-size: 14px;
	background: transparent;
	border: 1.5px solid rgba(10,20,14,0.15);
	color: rgb(10, 20, 14);
	cursor: pointer;
	transition: all 0.2s ease;
}
.sin-btn--choice:hover { border-color: rgb(10,20,14); }
.sin-btn--choice-active {
	background: rgb(10, 20, 14);
	color: rgb(198, 242, 78);
	border-color: rgb(10, 20, 14);
}
/* Larger hero button variant */
.sin-btn--lg { padding: 18px 28px; font-size: 16px; }


/* ── TEXT LINKS ── */
.sin-link {
	text-decoration: none;
	transition: opacity 0.2s ease, color 0.2s ease;
}
.sin-link--arrow {
	font-size: 14px;
	font-family: var(--sin-mono);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgb(10, 20, 14);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.sin-link--arrow:hover { opacity: 0.6; }
.sin-link--cta {
	margin-top: auto;
	font-size: 15px;
	font-weight: 700;
	color: rgb(10, 20, 14);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.sin-link--cta-light { color: rgb(198, 242, 78); }
.sin-link--cta:hover { opacity: 0.7; }
.sin-link--ul {
	color: rgb(10, 20, 14);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sin-link--ul:hover { opacity: 0.7; }


/* ── NAV ── */
.sin-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 56px;
	position: relative;
	z-index: 100;
}
.sin-logo-link { display: inline-flex; }
.sin-logo { height: 60px; width: auto; display: block; }
.sin-nav__links {
	display: flex;
	gap: 32px;
	align-items: center;
}
.sin-nav__link {
	font-size: 14px;
	color: rgb(91, 103, 96);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}
.sin-nav__link:hover { color: rgb(10, 20, 14); }
.sin-nav__right {
	display: flex;
	gap: 12px;
	align-items: center;
}
.sin-nav__tel {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	color: rgb(91, 103, 96);
	text-decoration: none;
}


/* ── FOOTER ── */
.sin-footer {
	padding: 64px 56px 36px;
	background: rgb(10, 20, 14);
	color: rgb(244, 241, 232);
}
.sin-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.082);
}
.sin-footer__desc {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.667);
	line-height: 1.6;
	margin: 20px 0 0;
	max-width: 320px;
}
.sin-footer__col-head {
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 2px;
	color: rgb(198, 242, 78);
	margin-bottom: 16px;
	text-transform: uppercase;
}
.sin-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sin-footer__list-item {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
}
.sin-footer__list-item a {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color 0.2s ease;
}
.sin-footer__list-item a:hover { color: rgb(198, 242, 78); }
.sin-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 24px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
	font-family: var(--sin-mono);
	letter-spacing: 1px;
}
.sin-logo--white { height: 80px; }


/* ── FAQ / ACCORDION ── */
.sin-faq__item {
	border-bottom: 1px solid rgba(10, 20, 14, 0.082);
}
.sin-faq__btn {
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	padding: 24px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	color: rgb(10, 20, 14);
	transition: color 0.2s ease;
}
.sin-faq__btn:hover { color: rgb(91, 103, 96); }
.sin-faq__icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1.5px solid rgba(10, 20, 14, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.sin-faq__btn:hover .sin-faq__icon { border-color: rgb(10,20,14); }
.sin-faq__answer {
	font-size: 15px;
	line-height: 1.65;
	color: rgb(91, 103, 96);
	padding-bottom: 24px;
}

.sin-faq__btn:not(.is-open) .sin-faq__icon {
	transform: rotate(0);
	transition: transform 0.2s ease;
}

.sin-faq__btn.is-open .sin-faq__icon svg {
	transform: rotate(45deg);
}


/* ── STATS ── */
.sin-stat__val {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: rgb(10, 20, 14);
}
.sin-stat__lbl {
	font-size: 12px;
	color: rgb(91, 103, 96);
	margin-top: 4px;
	font-family: var(--sin-mono);
	letter-spacing: 1.5px;
	text-transform: uppercase;
}


/* ── HIGHLIGHT (lime brush stroke behind text) ── */
.sin-hl { position: relative; display: inline-block; }
.sin-hl__bg {
	position: absolute;
	inset: -2px -6px;
	background: rgb(198, 242, 78);
	z-index: 0;
}
.sin-hl__text { position: relative; z-index: 1; }


/* ── DOT (lime eyebrow dot) ── */
.sin-dot {
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background: rgb(198, 242, 78);
	display: inline-block;
	flex-shrink: 0;
}


/* ── UTILITY ── */
.sin-nodecor { text-decoration: none; }


/* ══════════════════════════════════════════════════════════
RESPONSIVE: semantic classes
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.sin-nav { padding: 20px 32px; }
	.sin-footer { padding-left: 32px; padding-right: 32px; }
	.sin-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.sin-h1 { font-size: clamp(60px, 8vw, 80px); }
	.sin-h1--cta { font-size: clamp(60px, 8vw, 80px); }
	.sin-h2 { font-size: clamp(44px, 6vw, 60px); }
	.sin-h2--sm { font-size: clamp(40px, 5.5vw, 52px); }
	.sin-h2--lg { font-size: clamp(52px, 7vw, 68px); }
}

@media (max-width: 768px) {
	.sin-nav { padding: 16px 20px; }
	.sin-nav__links { display: none; }
	.sin-nav__tel { display: none; }
	.sin-nav__right > .sin-btn { display: none; }
	.sin-hamburger { display: flex !important; }
	.sin-footer { padding: 48px 20px 28px; }
	.sin-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
	.sin-h1 { font-size: clamp(44px, 11vw, 64px); margin: 16px 0 20px; }
	.sin-h1--cta { font-size: clamp(44px, 11vw, 60px); }
	.sin-h2 { font-size: clamp(36px, 9vw, 52px); }
	.sin-h2--sm { font-size: clamp(32px, 8vw, 44px); }
	.sin-h2--lg { font-size: clamp(40px, 10vw, 56px); }
	.sin-lead { font-size: 16px; }
	.sin-btn--lg { padding: 14px 22px; font-size: 14px; }
}

@media (max-width: 480px) {
	.sin-h1 { font-size: 38px; }
	.sin-h1--cta { font-size: 36px; }
	.sin-h2 { font-size: 32px; }
	.sin-h2--sm { font-size: 30px; }
	.sin-h2--lg { font-size: 36px; }
	.sin-footer__grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 1024px) {
	.sx-408 {
		padding: 20px 32px !important;
	}
}

@media (max-width: 768px) {
	.sx-408 {
		padding: 16px 20px !important;
	}

	.sx-411 {
		display: none !important;
	}

	.sx-201 {
		display: none !important;
	}

	.sx-413>.sx-nodecor {
		display: none !important;
	}

	.sin-hamburger {
		display: flex !important;
	}
}


/* ── MOBILE FULLSCREEN MENU ── */
.sin-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	flex-shrink: 0;
}

.sin-hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: #0a140e;
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
	transform-origin: center;
}

.sin-hamburger.is-active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.sin-hamburger.is-active span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.sin-hamburger.is-active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

.sin-mobile-menu {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(10, 20, 14, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.sin-mobile-menu.is-open {
	display: flex;
	align-items: stretch;
	opacity: 1;
}

.sin-mobile-menu__inner {
	position: absolute;
	top: 0;
	right: 0;
	width: min(360px, 100vw);
	height: 100%;
	background: #0f2a1d;
	display: flex;
	flex-direction: column;
	padding: 32px 32px 40px;
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	overflow-y: auto;
}

.sin-mobile-menu.is-open .sin-mobile-menu__inner {
	transform: translateX(0);
}

.sin-mobile-menu__close {
	align-self: flex-end;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	padding: 4px;
	margin-bottom: 40px;
	transition: color 0.2s ease;
}

.sin-mobile-menu__close:hover {
	color: #c6f24e;
}

.sin-mobile-menu__nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	background: #0f2a1d;
}

.sin-mobile-menu__nav a {
	font-family: var(--sin-font);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 1);
	text-decoration: none;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	transition: color 0.2s ease, padding-left 0.2s ease;
	display: block;
}

.sin-mobile-menu__nav a:last-child {
	border-bottom: none;
}

.sin-mobile-menu__nav a:hover {
	color: #c6f24e;
	padding-left: 8px;
}

.sin-mobile-menu__footer {
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sin-mobile-menu__tel {
	font-family: var(--sin-mono);
	font-size: 13px;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, 1);
	text-decoration: none;
	transition: color 0.2s ease;
}

.sin-mobile-menu__tel:hover {
	color: rgba(255, 255, 255, 0.7);
}

.sin-mobile-menu__cta {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #c6f24e;
	color: #0a140e;
	font-family: var(--sin-font);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	padding: 13px 22px;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.2s ease;
}

.sin-mobile-menu__cta:hover {
	background: #d4f76a;
}

body.sin-menu-open {
	overflow: hidden;
}


/* ── SCROLL ANIMATIONS ── */
.sin-animate {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.65s ease, transform 0.65s ease;
}

.sin-animate.is-visible {
	opacity: 1;
	transform: translateY(0);
}


/* ── FAQ ── */
.sin-faq-answer {
	display: none;
	padding: 0 0 24px;
	color: #5b6760;
	line-height: 1.7;
}

[data-faq-toggle] {
	cursor: pointer;
}


/* ── HOVER EFFECTS ── */
button,
.sy-btn {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sx-navlink,
.sx-412 {
	transition: color 0.2s ease;
}

.sx-navlink:hover,
.sx-412:hover {
	color: var(--sin-ink) !important;
}

footer a {
	transition: color 0.2s ease;
}

footer a:hover {
	color: #c6f24e !important;
}


/* ══════════════════════
WORKS PAGE — cards
══════════════════════ */
.work-filter {
	display: flex;
	gap: 0;
	border-bottom: 1px solid rgba(10, 20, 14, 0.082);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0 56px;
}

.work-filter::-webkit-scrollbar {
	display: none;
}

.work-filter__btn {
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #5b6760;
	padding: 16px 24px;
	white-space: nowrap;
	cursor: pointer;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
	position: relative;
	bottom: -1px;
}

.work-filter__btn:hover {
	color: #0a140e;
}

.work-filter__btn.is-active {
	color: #0a140e;
	border-bottom-color: #0a140e;
	font-weight: 500;
}

.work-filter__count {
	display: inline-block;
	margin-left: 5px;
	background: rgba(10, 20, 14, 0.08);
	color: #5b6760;
	font-size: 9px;
	padding: 2px 6px;
	border-radius: 100px;
	vertical-align: middle;
}

.work-filter__btn.is-active .work-filter__count {
	background: #0a140e;
	color: #f4f1e8;
}

.work-grid {
	background-color: #f4f1e8;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 16px;
	padding: 56px 8%;
}

.work-card {
	background: #fff;
	border: 1px solid rgba(10, 20, 14, 0.082);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
}

.work-card:hover {
	border-color: rgba(10, 20, 14, 0.25);
	box-shadow: 0 8px 32px rgba(10, 20, 14, 0.07);
}

.work-card--span-7 {
	grid-column: span 7;
}

.work-card--span-5 {
	grid-column: span 5;
}

.work-card--span-12 {
	grid-column: span 12;
}

.work-card--span-6 {
	grid-column: span 6;
}

.work-card--span-4 {
	grid-column: span 4;
}

.work-card--span-8 {
	grid-column: span 8;
}

.work-card--dark {
	background: #0f2a1d;
	border-color: transparent;
}

.work-card--lime {
	background: #c6f24e;
	border-color: transparent;
}

.work-card--lime:hover {
	border-color: rgba(10, 20, 14, 0.3);
}

.work-card__visual {
	position: relative;
	overflow: hidden;
	background: #162b1e;
}

.work-card--span-7 .work-card__visual,
.work-card--span-8 .work-card__visual {
	aspect-ratio: 16 / 9;
}

.work-card--span-5 .work-card__visual,
.work-card--span-4 .work-card__visual {
	aspect-ratio: 4 / 3;
}

.work-card--span-6 .work-card__visual {
	aspect-ratio: 4 / 3;
}

.work-card--span-12 .work-card__visual {
	height: 280px;
}

.work-card--lime .work-card__visual {
	background: rgba(10, 20, 14, 0.07);
}

.work-card__visual svg {
	display: block;
	width: 100%;
	height: 100%;
}

.work-card__pill {
	position: absolute;
	top: 14px;
	left: 14px;
	font-family: var(--sin-mono);
	font-size: 9px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 4px 10px;
	background: rgba(244, 241, 232, 0.92);
	color: #5b6760;
	border-radius: 100px;
	z-index: 1;
}

.work-card--dark .work-card__pill {
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.6);
}

.work-card--lime .work-card__pill {
	background: rgba(10, 20, 14, 0.1);
	color: rgba(10, 20, 14, 0.55);
}

.work-card__summary {
	padding: 22px 24px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
}

.work-card__meta {
	font-family: var(--sin-mono);
	font-size: 9px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #5b6760;
	margin-bottom: 6px;
}

.work-card--dark .work-card__meta {
	color: #c6f24e;
}

.work-card--lime .work-card__meta {
	color: rgba(10, 20, 14, 0.45);
}

.work-card__name {
	font-family: var(--sin-font);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #0a140e;
	margin-bottom: 4px;
	line-height: 1.2;
}

.work-card--dark .work-card__name {
	color: #fff;
}

.work-card__website {
	font-family: var(--sin-mono);
	font-size: 12px;
	letter-spacing: 1px;
	color: #5b6760;
	text-decoration: none;
	display: flex;
	align-items: center;
}

.work-card__website svg {
	transform: rotate(-45deg);
}

.work-card__website svg path {
	stroke: var(--sin-muted)
}

.work-card--dark .work-card__website {
	color: rgba(255, 255, 255, 0.35);
}

.work-card__stat {
	text-align: right;
	flex-shrink: 0;
}

.work-card__stat-val {
	font-family: var(--sin-font);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: #0a140e;
}

.work-card--dark .work-card__stat-val {
	color: #c6f24e;
}

.work-card__stat-lbl {
	font-family: var(--sin-mono);
	font-size: 8px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #5b6760;
	margin-top: 2px;
}

.work-card--dark .work-card__stat-lbl {
	color: rgba(255, 255, 255, 0.35);
}

.work-card__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sin-mono);
	font-size: 9px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #5b6760;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px 0;
	margin: 0 24px 0;
	border-top: 1px solid rgba(10, 20, 14, 0.07);
	width: calc(100% - 48px);
	transform: none !important;
	box-shadow: none !important;
	transition: color 0.2s ease;
}

.work-card--dark .work-card__toggle {
	color: rgba(255, 255, 255, 0.35);
	border-top-color: rgba(255, 255, 255, 0.07);
}

.work-card--lime .work-card__toggle {
	color: rgba(10, 20, 14, 0.45);
	border-top-color: rgba(10, 20, 14, 0.1);
}

.work-card__toggle:hover {
	color: #0a140e;
}

.work-card--dark .work-card__toggle:hover {
	color: #c6f24e;
}

.work-card__toggle-icon {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid currentColor;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.3s ease, background 0.2s ease;
}

.work-card__toggle-icon svg {
	width: 8px;
	height: 8px;
}

.work-card.is-expanded .work-card__toggle-icon {
	background: #0a140e;
	color: #f4f1e8;
	transform: rotate(45deg);
}

.work-card--dark.is-expanded .work-card__toggle-icon {
	background: #c6f24e;
	color: #0a140e;
}

.work-card__detail {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
	padding: 0 24px;
}

.work-card__detail-inner {
	padding-bottom: 28px;
	border-top: 1px solid rgba(10, 20, 14, 0.07);
	padding-top: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.work-card--dark .work-card__detail-inner {
	border-top-color: rgba(255, 255, 255, 0.07);
}

.work-card--lime .work-card__detail-inner {
	border-top-color: rgba(10, 20, 14, 0.1);
}

.work-card__detail-block h4 {
	font-family: var(--sin-mono);
	font-size: 9px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #5b6760;
	margin-bottom: 8px;
}

.work-card--dark .work-card__detail-block h4 {
	color: rgba(255, 255, 255, 0.35);
}

.work-card__detail-block p {
	font-size: 13px;
	color: #5b6760;
	line-height: 1.65;
}

.work-card--dark .work-card__detail-block p {
	color: rgba(255, 255, 255, 0.5);
}

.work-card__results {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.work-card__result {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 13px;
	color: #5b6760;
}

.work-card--dark .work-card__result {
	color: rgba(255, 255, 255, 0.5);
}

.work-card__result-val {
	font-family: var(--sin-font);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: #0a140e;
	white-space: nowrap;
}

.work-card--dark .work-card__result-val {
	color: #c6f24e;
}

.work-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #0a140e;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	text-decoration: none;
	transition: opacity 0.2s ease;
	margin-top: 12px;
}

.work-card__link:hover {
	opacity: 0.6;
}

.work-card--dark .work-card__link {
	color: #c6f24e;
}

.work-logo-wall {
	padding: 48px 56px;
	border-top: 1px solid rgba(10, 20, 14, 0.082);
}

.work-logo-wall__label {
	font-family: var(--sin-mono);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #5b6760;
	margin-bottom: 28px;
	text-align: center;
}

.work-logo-wall__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	justify-content: center;
}

.work-logo-wall__item {
	font-family: var(--sin-font);
	font-size: 13px;
	font-weight: 500;
	color: rgba(10, 20, 14, 0.35);
	text-decoration: none;
	padding: 7px 14px;
	border: 1px solid rgba(10, 20, 14, 0.08);
	border-radius: 100px;
	transition: color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}

.work-logo-wall__item:hover {
	color: #0a140e;
	border-color: rgba(10, 20, 14, 0.2);
}


/* ══════════════════════
OCEANWP OVERRIDES
══════════════════════ */
.page-template-page-sinergy-home-php .site-header,
.page-template-page-sinergy-services-php .site-header,
.page-template-page-sinergy-contact-php .site-header,
.page-template-page-sinergy-our-work-php .site-header {
	display: none !important;
}

.page-template-page-sinergy-home-php .site-footer,
.page-template-page-sinergy-services-php .site-footer,
.page-template-page-sinergy-contact-php .site-footer,
.page-template-page-sinergy-our-work-php .site-footer {
	display: none !important;
}

.page-template-page-sinergy-home-php #wrap,
.page-template-page-sinergy-services-php #wrap,
.page-template-page-sinergy-contact-php #wrap,
.page-template-page-sinergy-our-work-php #wrap {
	padding: 0 !important;
	margin: 0 !important;
}

.page-template-page-sinergy-home-php .content-area,
.page-template-page-sinergy-services-php .content-area,
.page-template-page-sinergy-contact-php .content-area,
.page-template-page-sinergy-our-work-php .content-area {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.page-template-page-sinergy-home-php .entry-content,
.page-template-page-sinergy-services-php .entry-content,
.page-template-page-sinergy-contact-php .entry-content,
.page-template-page-sinergy-our-work-php .entry-content {
	margin: 0 !important;
	padding: 0 !important;
}

.sin p {
	margin-top: 0;
}

.sin,
body {
	max-width: 100vw;
	overflow-x: hidden;
}

.color-white {
	color: var(--sin-white);
}

.color-ink {
	color: var(--sin-ink);
}

.color-muted {
	color: var(--sin-muted);
}

.color-muted {
	color: var(--sin-muted);
}

.color-lime {
	color: var(--sin-lime);
}

.color-dark {
	color: var(--sin-dark);
}

.max-w-500 {
	max-width: 500px;
}
.max-w-600 {
	max-width: 600px;
}
.max-w-700 {
	max-width: 700px;
}
.max-w-800 {
	max-width: 800px;
}
.max-w-900 {
	max-width: 900px;
}

.border-light {
	border-color: var(--border-lght);
}
/* ══════════════════════════════════════════════════════════
TABLET  ≤ 1024px
One clean block. No duplicates.
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

	/* Section padding scale */
	.sx-1 {
		padding: 56px 32px 64px !important;
	}

	.sx-45 {
		padding: 24px 32px !important;
	}

	.sx-51 {
		padding: 72px 32px !important;
	}

	.sx-74 {
		padding: 72px 32px !important;
	}

	.sx-85 {
		padding: 72px 32px !important;
	}

	.sx-113,
	.sx-135,
	.sx-152 {
		padding: 72px 32px !important;
	}

	.sx-124 {
		padding: 72px 32px !important;
	}

	.sx-162 {
		padding: 64px 32px !important;
	}

	.sx-168 {
		padding: 56px 32px !important;
	}

	.sx-220,
	.sx-298,
	.sx-317 {
		padding: 72px 32px !important;
	}

	.sx-331 {
		padding: 40px 32px !important;
	}

	.sx-344 {
		padding: 56px 32px 72px !important;
	}

	.sx-381 {
		padding: 0 32px 72px !important;
	}

	.work-grid {
		padding: 40px 32px !important;
	}

	.work-filter {
		padding: 0 32px !important;
	}

	.work-logo-wall {
		padding: 40px 32px !important;
	}

	/* Hero heading scale */
	.sx-5 {
		font-size: clamp(60px, 8vw, 80px) !important;
	}

	.sx-54 {
		font-size: 48px !important;
	}

	.sx-78 {
		font-size: 52px !important;
	}

	.sx-87 {
		font-size: 48px !important;
	}

	.sx-126,
	.sx-136 {
		font-size: 52px !important;
	}

	.sx-165 {
		font-size: clamp(44px, 6vw, 64px) !important;
	}

	.sx-170 {
		font-size: clamp(72px, 10vw, 100px) !important;
	}

	.sx-195 {
		font-size: clamp(60px, 8vw, 72px) !important;
	}

	.sx-299 {
		font-size: clamp(60px, 8vw, 72px) !important;
	}

	.sx-320 {
		font-size: clamp(52px, 7vw, 64px) !important;
	}

	.sx-333 {
		font-size: clamp(88px, 13vw, 120px) !important;
	}

	.sx-348 {
		font-size: clamp(36px, 5vw, 48px) !important;
	}

	.sx-392 {
		font-size: clamp(52px, 7vw, 64px) !important;
	}

	.sx-399 {
		font-size: clamp(44px, 6vw, 56px) !important;
	}

	/* Grid gap reduction */
	.sx-2 {
		gap: 40px !important;
	}

	.sx-76 {
		gap: 40px !important;
	}

	.sx-86 {
		gap: 40px !important;
	}

	.sx-114 {
		gap: 48px !important;
	}

	.sx-153 {
		gap: 48px !important;
	}

	.sx-164 {
		gap: 40px !important;
	}

	.sx-169 {
		gap: 40px !important;
	}

	.sx-191 {
		gap: 48px !important;
	}

	.sx-221 {
		gap: 48px !important;
	}

	.sx-319 {
		gap: 40px !important;
	}

	.sx-332 {
		gap: 40px !important;
	}

	.sx-345 {
		gap: 40px !important;
	}

	/* Scale down fixed-height hero visual */
	.sx-16 {
		height: 480px !important;
	}

	.sx-17 {
		width: 400px !important;
		height: 400px !important;
		right: -20px !important;
	}

	.sx-172 {
		height: 440px !important;
	}

	/* Process 4-col → 2×2 */
	.sx-128 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.sx-184 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Hide dashed connector lines */
	.sx-129,
	.sx-330,
	.sx-394 {
		display: none !important;
	}

	/* Remove right border from service tab items */
	.sx-185,
	.sx-189,
	.sx-190 {
		border-right: none !important;
		border-bottom: 1px solid rgba(10, 20, 14, 0.082) !important;
		padding: 20px 24px !important;
	}

	/* Case study cards 3-col → 2-col */
	.sx-138 {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px !important;
	}

	/* Contact: method cards 3-col → 2-col */
	.sx-382 {
		grid-template-columns: 1fr 1fr !important;
		gap: 12px !important;
	}

	/* Services compound pricing table: scroll on tablet */
	.sx-322 {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	/* Footer 4-col → 2×2 */
	.sx-417 {
		grid-template-columns: 1fr 1fr !important;
		gap: 32px !important;
	}

	/* Work cards */
	.work-card--span-7 {
		grid-column: span 8 !important;
	}

	.work-card--span-5 {
		grid-column: span 4 !important;
	}

	.work-card--span-8 {
		grid-column: span 8 !important;
	}

	.work-card--span-4 {
		grid-column: span 4 !important;
	}
}


/* ══════════════════════
MOBILE  ≤ 768px
══════════════════════ */
@media (max-width: 768px) {

	/* Section padding */
	.sx-1 {
		padding: 48px 20px !important;
	}

	.sx-45 {
		padding: 20px !important;
	}

	.sx-51,
	.sx-74,
	.sx-85,
	.sx-113,
	.sx-135,
	.sx-152 {
		padding: 56px 20px !important;
	}

	.sx-124 {
		padding: 56px 20px !important;
	}

	.sx-162 {
		padding: 56px 20px !important;
	}

	.sx-168 {
		padding: 48px 20px !important;
	}

	.sx-220,
	.sx-298,
	.sx-317 {
		padding: 56px 20px !important;
	}

	.sx-331 {
		padding: 36px 20px !important;
	}

	.sx-344 {
		padding: 48px 20px 56px !important;
	}

	.sx-381 {
		padding: 0 20px 56px !important;
	}

	.work-grid {
		padding: 28px 20px !important;
	}

	.work-filter {
		padding: 0 20px !important;
	}

	.work-logo-wall {
		padding: 36px 20px !important;
	}

	/* Hero headings */
	.sx-5 {
		font-size: clamp(44px, 11vw, 64px) !important;
		margin: 16px 0 20px !important;
	}

	.sx-54 {
		font-size: 36px !important;
	}

	.sx-78 {
		font-size: 38px !important;
	}

	.sx-87 {
		font-size: 38px !important;
	}

	.sx-126,
	.sx-136 {
		font-size: 38px !important;
		margin: 12px 0 0 !important;
	}

	.sx-165 {
		font-size: clamp(40px, 10vw, 56px) !important;
	}

	.sx-170 {
		font-size: clamp(52px, 13vw, 72px) !important;
	}

	.sx-195 {
		font-size: clamp(44px, 11vw, 60px) !important;
	}

	.sx-299 {
		font-size: clamp(44px, 11vw, 60px) !important;
	}

	.sx-320 {
		font-size: clamp(40px, 10vw, 52px) !important;
	}

	.sx-333 {
		font-size: clamp(60px, 15vw, 88px) !important;
	}

	.sx-348 {
		font-size: clamp(28px, 7vw, 40px) !important;
	}

	.sx-392 {
		font-size: clamp(40px, 10vw, 56px) !important;
	}

	.sx-399 {
		font-size: clamp(36px, 9vw, 48px) !important;
	}

	/* Stack 2-col grids to 1 col */
	.sx-2 {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.sx-76 {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.sx-86 {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
	}

	.sx-114 {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.sx-153 {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.sx-164 {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.sx-169 {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.sx-191 {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.sx-221 {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.sx-319 {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.sx-332 {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.sx-345 {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
		padding: 32px 20px;
	}

	.sx-81 {
		grid-template-columns: auto 1fr;
	}

	.sx-88 {
		padding-top: 0;
	}

	/* Hero: hide large absolute positioned visuals */
	.sx-16 {
		display: none !important;
	}

	.sx-172 {
		display: none !important;
	}

	.sx-274 {
		display: none !important;
	}

	/* Stats row wrap */
	.sx-13 {
		flex-wrap: wrap !important;
		gap: 20px !important;
		margin-top: 32px !important;
	}

	.sx-14 {
		font-size: 28px !important;
	}

	/* Logo strip: horizontal scroll */
	.sx-45 {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.sx-47 {
		flex-wrap: nowrap !important;
		gap: 16px !important;
	}

	.sx-48 {
		min-width: max-content !important;
	}

	/* Services flex header → column */
	.sx-52 {
		flex-direction: column !important;
		gap: 16px !important;
		align-items: flex-start !important;
		margin-bottom: 32px !important;
	}

	.sx-125 {
		flex-direction: column !important;
		gap: 16px !important;
		align-items: flex-start !important;
		margin-bottom: 32px !important;
	}

	/* Service cards → 1 col */
	.sx-57 {
		grid-template-columns: 1fr !important;
	}

	/* Team cards: hide divider, stack cards */
	.sx-89 {
		grid-template-columns: 1fr !important;
		gap: 24px;
	}

	.sx-110 {
		grid-template-columns: 1fr !important;
	}

	.sx-100 {
		display: none !important;
	}

	.sx-94, .sx-106 {
		font-size: 10px;
		letter-spacing: 0;
		padding: 6px 10px;
		min-width: fit-content;
	}

	.sx-img-cover-420-r20 {
		height: 220px;
	}

	.sx-115 {
		width: 100%;
		max-width: 100%;
		padding: 32px 16px;
	}

	.sx-115 svg {
		width: 100%;
		height: auto;
	}

	.sx-116 {
		flex-direction: column;
	}

	/* Process 4-col → 1 col, remove connector */
	.sx-128 {
		grid-template-columns: 1fr !important;
	}

	.sx-184 {
		grid-template-columns: 1fr !important;
	}

	.sx-129,
	.sx-330,
	.sx-394 {
		display: none !important;
	}

	.sx-130 {
		padding: 20px 0 !important;
		border-right: none !important;
		border-top: 1px solid rgba(10, 20, 14, 0.082) !important;
	}

	.sx-395 {
		padding: 20px 0 !important;
		border-right: none !important;
		border-top: 1px solid rgba(10, 20, 14, 0.082) !important;
	}

	.sx-133 {
		font-size: 20px !important;
	}

	/* Case studies → 1 col */
	.sx-138 {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	/* Services section: hide floating absolute decorative panels */
	.sx-203,
	.sx-204,
	.sx-205,
	.sx-211,
	.sx-216,
	.sx-222,
	.sx-223,
	.sx-232,
	.sx-239,
	.sx-247,
	.sx-267 {
		display: none !important;
	}

	/* Services compound table → scroll */
	.sx-322 {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.sx-323,
	.sx-328 {
		grid-template-columns: 1fr 80px 80px !important;
		min-width: 420px !important;
		font-size: 12px !important;
	}

	/* Contact form: 2-col fields → 1 col */
	.sx-349 {
		grid-template-columns: 1fr !important;
	}

	/* Contact sidebar contact cards: reorder above form */
	.sx-366 {
		order: -1 !important;
	}

	/* Contact method cards → 1 col */
	.sx-382 {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}

	/* FAQ: process section header → column */
	.sx-393 {
		text-align: left;
		padding-left: 24px;
		border-left: 3px solid rgb(91, 103, 96);
		display: block !important;
	}

	/* Footer → 2 col */
	.sx-417 {
		grid-template-columns: 1fr 1fr !important;
		gap: 24px !important;
	}

	/* Work cards: all span full width */
	.work-card--span-7,
	.work-card--span-5,
	.work-card--span-8,
	.work-card--span-4,
	.work-card--span-6,
	.work-card--span-12 {
		grid-column: span 1 !important;
	}

	.work-grid {
		grid-template-columns: 1fr !important;
	}

	.work-card__detail-inner {
		grid-template-columns: 1fr !important;
	}

	.sin p {
		font-size: 14px;
	}

	.sx-416 {
		padding: 42px 20px 32px;
	}
	.sx-423 {
		flex-direction: column;
	}
}


/* ══════════════════════
SMALL MOBILE  ≤ 480px
══════════════════════ */
@media (max-width: 480px) {

	/* Floor all headings */
	.sx-5 {
		font-size: 38px !important;
	}

	.sx-54,
	.sx-78,
	.sx-87 {
		font-size: 30px !important;
	}

	.sx-126,
	.sx-136,
	.sx-165 {
		font-size: 32px !important;
	}

	.sx-170 {
		font-size: 44px !important;
	}

	.sx-195,
	.sx-299,
	.sx-320,
	.sx-392 {
		font-size: 36px !important;
	}

	.sx-333 {
		font-size: 52px !important;
	}

	.sx-348 {
		font-size: 26px !important;
	}

	/* Stats */
	.sx-13 {
		gap: 14px !important;
	}

	.sx-14 {
		font-size: 24px !important;
	}

	/* Footer → 1 col */
	.sx-417 {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	/* Work filter tighter */
	.work-filter__btn {
		padding: 14px 16px !important;
	}
}

/* ══════════════════════════════════════════════════════════
OUR WORK PAGE — hero + CTA classes
(replaces the incorrectly applied sx-11 on the section)
══════════════════════════════════════════════════════════ */

.ow-hero {
	padding: 80px 56px 64px;
	border-bottom: 1px solid rgba(10, 20, 14, 0.082);
	background: #fff;
	position: relative;
}

.ow-hero__inner {
	max-width: 780px;
}

.ow-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sin-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #5b6760;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(10, 20, 14, 0.145);
	margin-bottom: 24px;
}

.ow-hero__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #c6f24e;
	display: inline-block;
	flex-shrink: 0;
}

.ow-hero__h1 {
	font-size: clamp(44px, 7vw, 88px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	font-weight: 700;
	margin: 20px 0 24px;
	color: #333333;
}

.ow-hero__em {
	font-family: var(--sin-serif);
	font-style: italic;
	font-weight: 300;
}

.ow-hero__sub {
	font-size: 17px;
	color: #5b6760;
	line-height: 1.65;
	max-width: 480px;
	margin-bottom: 48px;
}

.ow-hero__stats {
	display: flex;
	gap: 40px;
	padding-top: 36px;
	border-top: 1px solid rgba(10, 20, 14, 0.082);
	flex-wrap: wrap;
}

.ow-hero__stat-val {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: #0F2A1D;
}

.ow-hero__stat-lbl {
	font-family: var(--sin-mono);
	font-size: 9px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #333;
	margin-top: 4px;
}

/* CTA section */
.ow-cta {
	background: #c6f24e;
	padding: 88px 56px;
}

.ow-cta__h2 {
	font-size: clamp(44px, 7vw, 88px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 0.93;
	color: #0a140e;
	margin-bottom: 32px;
}

.ow-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #0a140e;
	color: #c6f24e;
	font-family: var(--sin-font);
	font-size: 15px;
	font-weight: 600;
	padding: 14px 26px;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

.ow-cta__btn:hover {
	background: #1e3d28;
	transform: translateY(-1px);
}

/* ── Responsive: Our Work hero + CTA ── */
@media (max-width: 1024px) {
	.ow-hero {
		padding: 64px 32px 48px;
	}

	.ow-cta {
		padding: 72px 32px;
	}
}

@media (max-width: 768px) {
	.ow-hero {
		padding: 48px 20px 40px;
	}

	.ow-hero__h1 {
		font-size: clamp(38px, 10vw, 60px) !important;
	}

	.ow-hero__stats {
		gap: 24px;
	}

	.ow-hero__stat-val {
		font-size: 28px;
	}

	.ow-cta {
		padding: 56px 20px;
	}

	.ow-cta__h2 {
		font-size: clamp(38px, 10vw, 60px);
	}
}

@media (max-width: 480px) {
	.ow-hero__h1 {
		font-size: 36px !important;
	}

	.ow-hero__stats {
		gap: 16px;
	}

	.ow-hero__stat-val {
		font-size: 24px;
	}

	.ow-cta__h2 {
		font-size: 34px;
	}
}

/* ============================
SINERGY DESIGN SYSTEM V2
============================ */
:root {
	--sin-transition: .3s cubic-bezier(.22, .61, .36, 1);
	--sin-shadow-hover: 0 14px 30px rgba(15, 42, 29, .18);
}

.sin-btn,
.sx-11,
.sx-12,
.sx-415,
.work-filter__btn,
.work-card__toggle {
	transition: transform var(--sin-transition), box-shadow var(--sin-transition), background-color var(--sin-transition), color var(--sin-transition), border-color var(--sin-transition);
}

.sin-btn:hover,
.sx-11:hover,
.sx-12:hover,
.sx-415:hover,
.work-filter__btn:hover {
	transform: translateY(-2px);
}

.sx-11:hover,
.sx-415:hover {
	box-shadow: var(--sin-shadow-hover);
}

.sx-11 svg,
.sx-12 svg,
.sx-415 svg,
.sx-341,
.work-card__toggle-icon {
	transition: transform var(--sin-transition);
}

.sx-11:hover svg,
.sx-12:hover svg,
.sx-415:hover svg,
.sx-337:hover .sx-341,
.sx-343:hover .sx-341 {
	transform: translateX(4px);
}

.sx-12:hover {
	background: #0a140e;
	color: #c6f24e;
}

.sx-12:hover path {
	stroke: #c6f24e;
}

.sin-btn--primary:hover {
	color: rgb(198, 242, 78);
}

.sin-card,
.sx-58,
.sx-76,
.sx-95,
.sx-113,
.sx-337,
.sx-343,
.work-card {
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.sx-58:hover,
.sx-76:hover,
.sx-95:hover,
.sx-113:hover,
.sx-337:hover,
.sx-343:hover,
.work-card:hover {
	transform: translateY(-8px);
}

.sx-navlink,
.sx-412 {
	position: relative;
}

.sx-navlink:after,
.sx-412:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 2px;
	background: var(--sin-lime);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}

.sx-navlink:hover:after,
.sx-412:hover:after {
	transform: scaleX(1);
}

.work-card__toggle[aria-expanded="true"] .work-card__toggle-icon {
	transform: rotate(45deg);
}

.sx-422 a {
	transition: color .25s ease, padding-left .25s ease;
}

.sx-422 a:hover {
	color: var(--sin-lime);
	padding-left: 4px;
}

.sx-408 {
	backdrop-filter: blur(12px);
}

@media(max-width:1024px) {
	.sx-2 {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.sx-13 {
		flex-wrap: wrap;
	}
}

@media(max-width:767px) {

	.sx-5,
	.sx-170,
	.sx-333 {
		font-size: clamp(42px, 12vw, 72px) !important;
		line-height: 1;
	}

	.sx-10 {
		flex-direction: column;
		align-items: stretch;
	}

	.sx-10 a {
		width: 100%;
		justify-content: center;
	}

	.sx-417 {
		grid-template-columns: 1fr !important;
	}

	.sx-336 {
		grid-template-columns: 1fr !important;
	}

	.sx-408 {
		padding: 16px 20px !important;
	}
}