/* Minification failed. Returning unminified contents.
(14,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(26,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(55,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(140,24): run-time error CSS1039: Token not allowed after unary operator: '-list-padding-left'
(141,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(142,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-body'
(146,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(147,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(148,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(149,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(150,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(151,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(152,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(154,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(155,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(156,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(157,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(158,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(159,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(160,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(162,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(163,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(164,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(165,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(167,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(168,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(169,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(171,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(173,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(174,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(175,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(176,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(178,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(180,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(181,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(182,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(183,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(185,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(186,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(187,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(188,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(189,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(190,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(192,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(193,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(194,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(195,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(197,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(218,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(225,22): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(233,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(235,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-display'
(248,21): run-time error CSS1039: Token not allowed after unary operator: '-font-h1'
(252,21): run-time error CSS1039: Token not allowed after unary operator: '-font-h2'
(256,21): run-time error CSS1039: Token not allowed after unary operator: '-font-h3'
(257,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-heading'
(262,21): run-time error CSS1039: Token not allowed after unary operator: '-font-h4'
(263,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-heading'
(269,21): run-time error CSS1039: Token not allowed after unary operator: '-font-small'
(272,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-label'
(277,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(281,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(283,25): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(292,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(293,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-body'
(302,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(307,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(314,22): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(320,22): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
(338,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(342,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(350,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(360,29): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(370,18): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(379,33): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(428,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(428,38): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(469,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(475,21): run-time error CSS1039: Token not allowed after unary operator: '-font-button'
(476,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(482,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(519,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(559,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(590,16): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(594,16): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(598,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(621,22): run-time error CSS1039: Token not allowed after unary operator: '-button-min-height'
(623,19): run-time error CSS1039: Token not allowed after unary operator: '-button-padding'
(624,30): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(625,25): run-time error CSS1039: Token not allowed after unary operator: '-button-radius'
(626,47): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(626,70): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(634,21): run-time error CSS1039: Token not allowed after unary operator: '-button-icon-size'
(639,18): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(644,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(648,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(652,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(662,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(670,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(674,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(680,42): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(686,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(695,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(702,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
(709,23): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-xs'
(737,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(741,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(742,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(743,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(744,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(745,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(746,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(747,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(748,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(751,18): run-time error CSS1039: Token not allowed after unary operator: '-hero-height'
(752,26): run-time error CSS1039: Token not allowed after unary operator: '-hero-padding-bottom'
(756,32): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(766,25): run-time error CSS1039: Token not allowed after unary operator: '-hero-left-width'
(769,27): run-time error CSS1039: Token not allowed after unary operator: '-hero-left-row-gap'
(776,29): run-time error CSS1039: Token not allowed after unary operator: '-hero-left-p-width'
(781,25): run-time error CSS1039: Token not allowed after unary operator: '-hero-right-width'
(784,27): run-time error CSS1039: Token not allowed after unary operator: '-hero-right-row-gap'
(791,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(792,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(793,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(794,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(795,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(796,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(797,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(798,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(799,22): run-time error CSS1039: Token not allowed after unary operator: '-hero-height'
(800,30): run-time error CSS1039: Token not allowed after unary operator: '-hero-padding-bottom'
(804,30): run-time error CSS1039: Token not allowed after unary operator: '-subpage-hero-text-height'
(805,30): run-time error CSS1039: Token not allowed after unary operator: '-subpage-hero-container-bg'
(806,31): run-time error CSS1039: Token not allowed after unary operator: '-subpage-hero-container-padding-top'
(807,34): run-time error CSS1039: Token not allowed after unary operator: '-subpage-hero-container-padding-bottom'
(821,25): run-time error CSS1039: Token not allowed after unary operator: '-subpage-hero-left-p-width'
(826,27): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(930,18): run-time error CSS1039: Token not allowed after unary operator: '-subpage-hero-image-height'
(946,29): run-time error CSS1039: Token not allowed after unary operator: '-base-margin'
(949,18): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(949,37): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(954,50): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(959,51): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(994,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(999,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1009,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
(1024,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(1028,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1043,19): run-time error CSS1039: Token not allowed after unary operator: '-card-gap'
(1054,22): run-time error CSS1039: Token not allowed after unary operator: '-card-min-height'
(1055,19): run-time error CSS1039: Token not allowed after unary operator: '-card-padding'
(1057,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(1068,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-xs'
(1104,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1148,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1176,22): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
(1180,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1211,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(1214,2): run-time error CSS1030: Expected identifier, found '.'
(1214,2): run-time error CSS1019: Unexpected token, found '.'
(1215,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1248,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(1262,31): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1294,24): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1295,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1318,17): run-time error CSS1039: Token not allowed after unary operator: '-quaternary-color'
(1319,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1323,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1331,22): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1332,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1346,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1352,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1353,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1354,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1364,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1393,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1394,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1410,21): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(1415,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1419,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1444,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1445,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1487,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(1488,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(1530,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(1531,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(1578,25): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1578,47): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-y'
(1609,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1641,21): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1642,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1648,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1649,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1655,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1656,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1695,25): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(1720,26): run-time error CSS1039: Token not allowed after unary operator: '-button-min-height'
(1721,23): run-time error CSS1039: Token not allowed after unary operator: '-button-padding'
(1722,29): run-time error CSS1039: Token not allowed after unary operator: '-button-radius'
(1813,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(1837,29): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(1911,90): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(1913,23): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-y'
(1927,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1928,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1942,26): run-time error CSS1039: Token not allowed after unary operator: '-card-min-height'
(1943,23): run-time error CSS1039: Token not allowed after unary operator: '-card-padding'
(1989,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2021,25): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(2023,21): run-time error CSS1039: Token not allowed after unary operator: '-font-small'
(2026,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-label'
(2027,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(2046,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(2053,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2060,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(2070,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2082,59): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2090,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2090,38): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(2128,19): run-time error CSS1039: Token not allowed after unary operator: '-faq-question-padding-y'
(2128,49): run-time error CSS1039: Token not allowed after unary operator: '-faq-question-padding-right'
(2128,83): run-time error CSS1039: Token not allowed after unary operator: '-faq-question-padding-y'
(2134,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2135,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-body'
(2136,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(2143,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(2147,29): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(2155,15): run-time error CSS1039: Token not allowed after unary operator: '-faq-question-padding-y'
(2156,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(2158,21): run-time error CSS1039: Token not allowed after unary operator: '-faq-icon-size'
(2168,19): run-time error CSS1039: Token not allowed after unary operator: '-faq-answer-padding-top'
(2168,49): run-time error CSS1039: Token not allowed after unary operator: '-faq-question-padding-right'
(2168,83): run-time error CSS1039: Token not allowed after unary operator: '-faq-answer-padding-bottom'
(2177,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2181,27): run-time error CSS1039: Token not allowed after unary operator: '-lh-body'
(2193,23): run-time error CSS1039: Token not allowed after unary operator: '-faq-row-gap'
(2195,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2195,42): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(2209,19): run-time error CSS1039: Token not allowed after unary operator: '-faq-question-padding-y'
(2218,59): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2219,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(2219,38): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(2226,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2255,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(2264,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2285,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2286,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2287,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2289,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2290,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2291,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2293,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2294,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2295,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2296,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2298,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2300,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2301,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2302,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2337,26): run-time error CSS1039: Token not allowed after unary operator: '-comparison-mobile-table-margin-top'
(2342,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2343,25): run-time error CSS1039: Token not allowed after unary operator: '-comparison-mobile-criterion-font-size'
(2344,27): run-time error CSS1039: Token not allowed after unary operator: '-comparison-mobile-criterion-line-height'
(2345,29): run-time error CSS1039: Token not allowed after unary operator: '-comparison-mobile-criterion-margin-bottom'
(2351,29): run-time error CSS1039: Token not allowed after unary operator: '-comparison-mobile-label-margin-bottom'
(2353,25): run-time error CSS1039: Token not allowed after unary operator: '-comparison-mobile-label-font-size'
(2354,27): run-time error CSS1039: Token not allowed after unary operator: '-comparison-mobile-label-line-height'
(2357,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(2361,29): run-time error CSS1039: Token not allowed after unary operator: '-comparison-mobile-cell-margin-bottom'
(2362,25): run-time error CSS1039: Token not allowed after unary operator: '-comparison-mobile-cell-font-size'
(2363,27): run-time error CSS1039: Token not allowed after unary operator: '-comparison-mobile-cell-line-height'
(2367,26): run-time error CSS1039: Token not allowed after unary operator: '-comparison-mobile-second-column-bg'
(2368,23): run-time error CSS1039: Token not allowed after unary operator: '-comparison-mobile-second-column-padding-y'
(2368,72): run-time error CSS1039: Token not allowed after unary operator: '-comparison-mobile-second-column-padding-x'
(2369,29): run-time error CSS1039: Token not allowed after unary operator: '-comparison-mobile-second-column-radius'
(2378,23): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
(2393,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(2395,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(2396,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2400,26): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(2401,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(2416,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2417,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2418,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2419,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2420,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2421,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2422,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2424,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2425,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2426,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2427,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2429,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2431,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2432,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2433,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2434,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2436,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2437,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2439,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2440,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2442,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2443,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2444,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2445,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2447,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2448,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2449,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2450,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2479,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2480,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2481,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2482,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2483,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2484,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2497,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(2503,22): run-time error CSS1039: Token not allowed after unary operator: '-hero-v2-column-gap'
(2504,19): run-time error CSS1039: Token not allowed after unary operator: '-hero-v2-wrapper-row-gap'
(2529,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(2535,22): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(2544,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2545,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2559,27): run-time error CSS1039: Token not allowed after unary operator: '-hero-v2-text-left-padding-top'
(2564,27): run-time error CSS1039: Token not allowed after unary operator: '-hero-v2-text-right-padding-top'
(2573,30): run-time error CSS1039: Token not allowed after unary operator: '-hero-v2-item-gap'
(2577,30): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(2578,31): run-time error CSS1039: Token not allowed after unary operator: '-lh-heading'
(2583,31): run-time error CSS1039: Token not allowed after unary operator: '-lh-body'
(2587,34): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(2602,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2638,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(2661,18): run-time error CSS1039: Token not allowed after unary operator: '-hero-v2-image-height'
(2726,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2727,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2728,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2729,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2730,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2731,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2758,27): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2759,30): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2796,27): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2797,30): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2806,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2807,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2808,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2809,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2810,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2811,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2812,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2813,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2814,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2815,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2816,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2817,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2818,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2819,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2821,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2822,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2823,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2824,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2825,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2826,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2827,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2828,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2833,19): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2833,38): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(2847,22): run-time error CSS1039: Token not allowed after unary operator: '-cta-column-gap'
(2848,35): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2868,22): run-time error CSS1039: Token not allowed after unary operator: '-cta-image-min-height'
(2869,22): run-time error CSS1039: Token not allowed after unary operator: '-cta-image-max-height'
(2871,25): run-time error CSS1039: Token not allowed after unary operator: '-cta-image-radius'
(2888,19): run-time error CSS1039: Token not allowed after unary operator: '-cta-row-gap'
(2900,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(2914,27): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2915,30): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2923,30): run-time error CSS1039: Token not allowed after unary operator: '-cta-column-gap'
(2940,27): run-time error CSS1039: Token not allowed after unary operator: '-cta-desktop-content-gap'
(2954,22): run-time error CSS1039: Token not allowed after unary operator: '-cta-image-desktop-height'
(2959,25): run-time error CSS1039: Token not allowed after unary operator: '-cta-heading-desktop-size'
(2961,26): run-time error CSS1039: Token not allowed after unary operator: '-cta-heading-desktop-min-height'
(2967,25): run-time error CSS1039: Token not allowed after unary operator: '-cta-support-desktop-size'
(2969,26): run-time error CSS1039: Token not allowed after unary operator: '-cta-support-desktop-min-height'
(2977,26): run-time error CSS1039: Token not allowed after unary operator: '-cta-button-desktop-min-height'
(2978,27): run-time error CSS1039: Token not allowed after unary operator: '-cta-button-desktop-padding-y'
(2979,30): run-time error CSS1039: Token not allowed after unary operator: '-cta-button-desktop-padding-y'
(2991,30): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(2998,27): run-time error CSS1039: Token not allowed after unary operator: '-cta-tablet-row-gap'
(3010,26): run-time error CSS1039: Token not allowed after unary operator: '-cta-image-tablet-height'
(3011,30): run-time error CSS1039: Token not allowed after unary operator: '-cta-image-tablet-max-height'
(3012,33): run-time error CSS1039: Token not allowed after unary operator: '-cta-image-radius-tablet'
(3017,27): run-time error CSS1039: Token not allowed after unary operator: '-cta-mobile-row-gap'
(3031,27): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(3032,30): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(3046,22): run-time error CSS1039: Token not allowed after unary operator: '-cta-image-mobile-height'
(3052,23): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(3056,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-xs'
(3057,29): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(3061,25): run-time error CSS1039: Token not allowed after unary operator: '-font-h4'
(3062,27): run-time error CSS1039: Token not allowed after unary operator: '-cta-support-mobile-line-height'
(3063,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
(3064,29): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(3069,26): run-time error CSS1039: Token not allowed after unary operator: '-cta-button-mobile-min-height'
(3070,27): run-time error CSS1039: Token not allowed after unary operator: '-cta-button-mobile-padding-y'
(3071,30): run-time error CSS1039: Token not allowed after unary operator: '-cta-button-mobile-padding-y'
(3074,29): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
 */
figure, ul {
    margin: 0
}

body, ul {
    font-family: Montserrat-Medium
}

body, main {
    width: 100%
}

h3, h4, p, ul {
    color: var(--tertiary-color)
}

header, main {
    display: flex
}

.bali {
    display: none;
}

#header-wrapper, .separator {
    padding: 0 var(--base-padding-x)
}

body, h1, h2, h3, h4, h5, nav a, nav p, p {
    padding: 0
}

#hero .gradient {
    height: 50vh;
}

#hero:not(.subpage) .hero-container,
#hero:not(.subpage) #hero-image {
    height: 50vh;
}

#hero .gradient, #logos, main {
    position: relative
}

#hero .gradient, #logos, #process, .clip-div, .services-card {
    overflow: hidden
}

#hero-image img, .clip-img, .nav-toggle-right img, .process-card-icon img {
    object-fit: cover
}

#cta, #process {
    margin-bottom: var(--margin-80px)
}

#blog, #cta {
    row-gap: 3vh
}

#avantages, #blog, #hero {
    height: 100vh
}

.avantages {
    height: 100vh
}

@font-face {
    font-family: Montserrat-Bold;
    src: url('/Content/fonts/Montserrat-Bold.eot');
    src: url('/Content/fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),url('/Content/fonts/Montserrat-Bold.woff2') format('woff2'),url('/Content/fonts/Montserrat-Bold.woff') format('woff'),url('/Content/fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Montserrat-Medium;
    src: url('/Content/fonts/Montserrat-Medium.eot');
    src: url('/Content/fonts/Montserrat-Medium.eot?#iefix') format('embedded-opentype'),url('/Content/fonts/Montserrat-Medium.woff2') format('woff2'),url('/Content/fonts/Montserrat-Medium.woff') format('woff'),url('/Content/fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Montserrat-SemiBold;
    src: url('/Content/fonts/Montserrat-SemiBold.eot');
    src: url('/Content/fonts/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'),url('/Content/fonts/Montserrat-SemiBold.woff2') format('woff2'),url('/Content/fonts/Montserrat-SemiBold.woff') format('woff'),url('/Content/fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Montserrat-Italic;
    src: url('/Content/fonts/Montserrat-Italic.eot');
    src: url('/Content/fonts/Montserrat-Italic.eot?#iefix') format('embedded-opentype'),url('/Content/fonts/Montserrat-Italic.woff2') format('woff2'),url('/Content/fonts/Montserrat-Italic.woff') format('woff'),url('/Content/fonts/Montserrat-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Montserrat-Regular;
    src: url('/Content/fonts/Montserrat-Regular.eot');
    src: url('/Content/fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),url('/Content/fonts/Montserrat-Regular.woff2') format('woff2'),url('/Content/fonts/Montserrat-Regular.woff') format('woff'),url('/Content/fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box
}

[data-scroll-container] {
    visibility: visible;
    opacity: 1;
    transition: none;
    position: relative;
    overflow: hidden;
    -webkit-overflow-scrolling: touch
}

.header-active, header {
    transition: .2s ease-out
}

.c-scrollbar {
    opacity: 1 !important;
    right: 4px !important;
    z-index: 999
}

ul {
    list-style-type: square;
    padding-left: var(--list-padding-left);
    font-size: var(--font-body);
    line-height: var(--lh-body);
}

:root {
    --primary-color: #013C52;
    --secondary-color: #FF663D;
    --secondary-color-text: #B84522;
    --tertiary-color: #052029;
    --quaternary-color: #015172;
    --white-color: #F2F2F2;
    --font-size-base: 1rem;
    /* Responsive typography */
    --font-h1: clamp(2.0275rem, calc(0.35rem + 3.4vw), 7.5025rem);
    --font-h2: clamp(1.677rem, calc(0.35rem + 2.85vw), 5.065rem);
    --font-h3: clamp(1.315rem, calc(0.45rem + 1.55vw), 3rem);
    --font-h4: clamp(1.1275rem, calc(0.4rem + 1.45vw), 3rem);
    --font-body: clamp(0.875rem, calc(0.65rem + 0.45vw), 1.25rem);
    --font-small: 0.8125rem;
    --font-button: clamp(1rem, calc(0.75rem + 0.35vw), 1.25rem);
    /* Responsive spacing */
    --margin-40px: clamp(12px, 3.8vh, 80px);
    --margin-80px: clamp(40px, 8vh, 160px);
    --base-padding-x: clamp(16px, 5vw, 96px);
    --base-padding-y: clamp(16px, 2vw, 50px);
    /* Component spacing */
    --card-padding: clamp(16px, 2vw, 32px);
    --card-gap: clamp(16px, 3vw, 32px);
    --card-min-height: max(49.5vh, 330px);
    /* Component radius */
    --radius-card: clamp(16px, 1.5vw, 24px);
    /* Text rhythm spacing */
    --text-gap-xs: clamp(6px, 1.6vw, 10px);
    --text-gap-sm: clamp(8px, 2vw, 14px);
    --text-gap-md: clamp(12px, 3vw, 22px);
    --text-gap-lg: clamp(20px, 5vw, 36px);
    /*ul*/
    --list-padding-left: 20px;
    /* Line heights */
    --lh-display: 1.14;
    --lh-heading: 1.14;
    --lh-body: 1.30;
    --lh-label: 1.25;
    /* FAQ spacing */
    --faq-row-gap: var(--text-gap-lg);
    --faq-question-padding-y: clamp(16px, 1.4vw, 24px);
    --faq-question-padding-right: 32px;
    --faq-answer-padding-top: var(--text-gap-xs);
    --faq-answer-padding-bottom: var(--text-gap-md);
    --faq-icon-size: clamp(22px, 1.5vw, 30px);
    /* Button */
    --button-padding: var(--card-padding);
    --button-min-height: clamp(86px, 9vh, 104px);
    --button-radius: var(--radius-card);
    --button-icon-size: clamp(16px, 1.4vw, 22px);
    /* VH */
    --vh: 100vh;
}
/* Versiune precedenta care baga o linie mica alba la top pe mobil.
html {
    scroll-behavior: smooth
}

body {
    font-size: 1rem;
    margin: 0;
    background: var(--white-color);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    height: 100%
}
*/

html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    background: var(--primary-color);
}

body {
    font-size: 1rem;
    margin: 0;
    padding: 0;
    background: var(--white-color);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    height: 100%;
}

h1, h2 {
    font-family: Montserrat-Bold;
    color: var(--primary-color);
    margin: 0;
    line-height: var(--lh-display);
}

main {
    flex-direction: column;
    overflow: hidden !important
}

.buttonSecondary:hover, h3, h4 {
    font-family: Montserrat-SemiBold
}

h1 {
    font-size: var(--font-h1);
}

h2 {
    font-size: var(--font-h2);
}

h3 {
    font-size: var(--font-h3);
    line-height: var(--lh-heading);
    margin: 0;
}

h4 {
    font-size: var(--font-h4);
    line-height: var(--lh-heading);
    margin: 0;
}

h5, small {
    font-family: Montserrat-Bold;
    font-size: var(--font-small);
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    line-height: var(--lh-label);
    margin: 0;
}

h5 {
    color: var(--secondary-color);
}

small {
    color: var(--secondary-color-text);
    display: block;
    margin-bottom: var(--text-gap-sm);
}

.small-on-dark {
    color: #FF9A78;
}

p {
    font-family: Montserrat-Medium;
    font-size: var(--font-body);
    line-height: var(--lh-body);
    margin: 0;
}

    /*--------------------------------
    GLOBAL TEXT RHYTHM
--------------------------------*/

    p + p {
        margin-top: var(--text-gap-sm);
    }

    p + ul,
    ul + p {
        margin-top: var(--text-gap-sm);
    }

h1 + p,
h2 + p,
h3 + p,
h4 + p {
    margin-top: var(--text-gap-sm);
}

h1 + h2,
h2 + h3,
h3 + h4 {
    margin-top: var(--text-gap-md);
}

.italic {
    font-family: Montserrat-Italic;
    font-size: clamp(16px, 1.2vw, 3.75rem);
    margin-bottom: 0 !important
}

.nav-toggle-info, .nav-toggle-info a {
    font-size: clamp(14px, 1vw, 20px)
}

.margin-0 {
    margin: 0 !important
}

.margin-top-80 {
    margin-top: var(--margin-80px) !important
}

.margin-bottom-80 {
    margin-bottom: var(--margin-80px) !important
}

/*.staticbg {
    background: url('/Content/img/StaticNoise.webp') center center fixed
}*/

#process, .separator {
    background-color: var(--tertiary-color)
}

.width-100 {
    width: 100% !important
}

.separator {
    height: 2px;
    display: block;
    width: calc(100% - var(--base-padding-x) * 2);
    margin: 0 auto
}

.header-active, .nav-toggle ul li {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

#process-container, #services, .services-container {
    margin: var(--margin-80px) 0
}

.error {
    display: inline-flex;
    align-items: center;
    padding: .75rem 1rem;
    margin-top: .75rem;
    background: rgba(5, 32, 41, .9);
    border-left: 5px solid var(--secondary-color);
    border-radius: .75rem;
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    width: fit-content;
    max-width: 100%;
}

    .error:empty {
        display: none;
    }

header {
    flex-direction: column;
    padding-top: 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 10;
    align-items: center
}

#header-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center
}

#menu-mobile, .nav-toggle, .nav-toggle-mobile {
    display: none
}
/* V1
.header-active {
    background-color: rgba(5,32,41,.6);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: 0 4px 4px rgba(0,0,0,.25)
}
*/
/* V2 pentru contrast la case study (pe fond alb)*/
.header-active {
    background-color: rgba(5,32,41,.88);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: 0 4px 4px rgba(0,0,0,.25);
}

.nav-toggle, footer {
    padding: var(--margin-80px) var(--base-padding-x)
}

.nav-toggle {
    height: 0;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 3vw;
    justify-content: center;
    opacity: 0;
    transition: .3s
}

.nav-portfolio, .nav-services, nav-toggle-left ul {
    opacity: 0;
    transition: opacity .3s;
    display: none
}

    .nav-portfolio.visible, .nav-services.visible {
        opacity: 1;
        display: block
    }

.nav-toggle.visible {
    display: flex;
    height: 75vh;
    opacity: 1
}

.nav-toggle-info-left {
    width: 50%;
    display: flex;
    column-gap: 1.5rem;
    height: 3vh
}

.nav-toggle-info {
    display: flex;
    column-gap: .5rem;
    color: var(--white-color);
    align-self: flex-end
}

.button, nav a, nav p {
    font-family: Montserrat-Medium;
    font-size: var(--font-button);
    color: var(--white-color);
    text-transform: uppercase;
    text-decoration: none;
}

.nav-toggle-info a, .nav-toggle-info p {
    color: var(--white-color);
    text-decoration: none
}

.nav-toggle-info img {
    width: 20px;
    height: 20px;
    align-self: center
}

.nav-toggle-wrapper {
    display: flex;
    column-gap: 9vw;
    justify-content: space-between
}

.nav-toggle > .nav-toggle-wrapper:last-of-type {
    height: 6vh;
    align-items: flex-end
}

.nav-toggle-left {
    width: 50%;
    align-self: center
}

.nav-toggle-right {
    display: flex;
    width: 33.33%
}

.nav-toggle-wrapper:first-child .nav-toggle-right {
    align-items: center;
    justify-content: center;
}

#about p, #about p a, #process h3, #process p, #process p a, #sous h2, #sous p, .active h3, .active h4, .active p, .nav-toggle-right p, .subpage.header-active > #header-wrapper > nav a, .subpage.header-active > #header-wrapper > nav p {
    color: var(--white-color)
}

.nav-toggle-right img {
    width: 100%;
    border-radius: 1rem;
    height: 30vh;
    animation: 30s ease-in-out infinite ltr
}

@keyframes ltr {
    0%,100% {
        object-position: 0% 0%
    }

    12.5%,87.5% {
        object-position: 25% 0%
    }

    25%,75% {
        object-position: 50% 0%
    }

    37.5%,62.5% {
        object-position: 75% 0%
    }

    50% {
        object-position: 100% 100%
    }
}

.nav-toggle ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

    .nav-toggle ul li a {
        font-size: clamp(21.04px, 1.5vw, 32px);
        color: var(--white-color);
        text-decoration: none
    }

        .nav-toggle ul li a span {
            display: none;
            width: 20px;
            height: 20px;
            margin-right: 1.5rem;
            background: url('/Content/img/btnIcon.svg') center center no-repeat;
            transition: .2s ease-out
        }

.nav-toggle-left ul li a:hover span {
    display: inline-flex
}

.nav-toggle ul li {
    border-top: 1px solid rgba(242,242,242,.5);
    border-bottom: 1px solid rgba(242,242,242,.5)
}

    .nav-toggle ul li:first-child {
        border-top: 0
    }

    .nav-toggle ul li:last-child {
        border-bottom: 0
    }

.subpage.header-active figure svg .logotext {
    fill: var(--white-color)
}

.subpage figure svg .logotext {
    fill: var(--tertiary-color)
}

#hero .hero-container .hero-left p a, .subpage > #header-wrapper > nav > a, .subpage > #header-wrapper > nav > p {
    color: var(--tertiary-color);
}

nav {
    display: flex;
    column-gap: 3vw;
    align-items: center
}

    nav a, nav p {
        margin: 0;
        cursor: pointer
    }

        nav a:hover, nav p:hover {
            text-decoration: underline
        }

.button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: fit-content;
    min-height: var(--button-min-height);
    height: auto;
    padding: var(--button-padding);
    border: 1.5px solid var(--secondary-color);
    border-radius: var(--button-radius);
    background: linear-gradient(to right,var(--white-color) 50%,var(--secondary-color) 50%);
    background-size: 201% 100%;
    background-position: right bottom;
    transition: .5s ease-out;
}

    .button svg,
    .button img {
        width: var(--button-icon-size);
        height: auto;
    }

#btnIcon path {
    stroke: var(--white-color)
}

.button:hover {
    background-position: left bottom;
    color: var(--secondary-color)
}

    .button:hover #btnIcon path {
        stroke: var(--secondary-color)
    }

    .button:hover .submit-text {
        color: var(--secondary-color);
    }

.button svg {
    align-self: flex-end
}

.buttonSecondary {
    font-size: clamp(18px, 1.2vw,1.75rem);
    text-decoration: none;
    color: var(--white-color);
    display: flex;
    align-items: center;
    column-gap: 1.5vw;
    cursor: pointer
}

.about-container, .sous-container {
    padding: var(--margin-80px);
    column-gap: 3vw;
    min-height: 60vh;
    display: flex;
    border-radius: var(--radius-card);
    box-shadow: 2px 2px 16px 0 rgba(5,32,41,.4)
}

.sous-container-dev {
    width: 100%;
    padding: clamp(24px, 4vh, 60px) var(--base-padding-x);
    column-gap: 3vw;
    min-height: 60vh;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    border-radius: var(--radius-card);
    box-shadow: 2px 2px 16px 0 rgba(5,32,41,.4);
    background: url('/Content/img/Home/index/home-bg-servers.webp') 0 0 / cover no-repeat #052029;
}

.sous-intro {
    width: 50%;
    display: flex;
    flex-direction: column;
    row-gap: var(--text-gap-sm);
}

.sous-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    row-gap: var(--text-gap-md);
    justify-content: flex-start;
}

    .sous-text .step {
        display: flex;
        flex-direction: column;
        row-gap: var(--text-gap-xs);
    }

        .sous-text .step h3 {
            margin-bottom: 0;
        }

        .sous-text .step p {
            margin-bottom: 0;
        }
/*----------------------------------*/

.buttonSecondary > img {
    transform: translateX(0);
    animation: 5s ease-in-out infinite calltoactionAnim
}

@keyframes calltoactionAnim {
    0%,100%,50% {
        transform: translateX(0)
    }

    25%,75% {
        transform: translateX(50%)
    }
}

#about, #blog, #cta, #hero .hero-container, #process-wrapper, #services, #sous {
    padding: 0 var(--base-padding-x)
}

#hero {
    --hero-height: 100vh;
    --hero-padding-bottom: 2.625rem;
    --hero-left-width: 70%;
    --hero-right-width: 50%;
    --hero-column-gap: 9vw;
    --hero-left-row-gap: var(--text-gap-md);
    --hero-right-row-gap: var(--text-gap-md);
    --hero-left-p-width: 33.33vw;
    display: flex;
    flex-direction: column;
    height: var(--hero-height);
    padding-bottom: var(--hero-padding-bottom);
}

    #hero .gradient {
        background-color: var(--primary-color);
    }

    #hero .hero-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        #hero .hero-container .hero-left {
            width: var(--hero-left-width);
            display: flex;
            flex-direction: column;
            row-gap: var(--hero-left-row-gap);
            align-self: flex-end;
            align-items: stretch;
            justify-content: center;
        }

            #hero .hero-container .hero-left p {
                width: var(--hero-left-p-width);
                max-width: 100%;
            }

        #hero .hero-container .hero-right {
            width: var(--hero-right-width);
            display: flex;
            flex-direction: column;
            row-gap: var(--hero-right-row-gap);
            align-items: flex-start;
            justify-content: flex-end;
            align-self: flex-end;
        }

    #hero.subpage {
        --hero-height: auto;
        --hero-padding-bottom: 0;
        --subpage-hero-text-height: 50vh;
        --subpage-hero-image-height: 50vh;
        --subpage-hero-container-padding-top: 0;
        --subpage-hero-container-padding-bottom: 0;
        --subpage-hero-container-bg: var(--white-color);
        --subpage-hero-left-p-width: auto;
        height: var(--hero-height);
        padding-bottom: var(--hero-padding-bottom);
    }

        #hero.subpage .hero-container {
            min-height: var(--subpage-hero-text-height);
            background: var(--subpage-hero-container-bg);
            padding-top: var(--subpage-hero-container-padding-top);
            padding-bottom: var(--subpage-hero-container-padding-bottom);
            align-items: stretch;
        }

        #hero.subpage .hero-left {
            align-self: stretch;
            justify-content: center;
        }

        #hero.subpage .hero-wrapper {
            align-items: stretch;
        }

        #hero.subpage .hero-container .hero-left p {
            width: var(--subpage-hero-left-p-width);
            max-width: 100%;
        }

        #hero.subpage .hero-right {
            row-gap: var(--text-gap-sm);
        }

            #hero.subpage .hero-right p + p {
                margin-top: 0;
            }

            #hero.subpage .hero-right .hero-h2-compact {
                font-size: clamp(22px, 1.6vw, 34px);
                line-height: 1.2;
                margin: 0 0 14px 0;
                letter-spacing: -0.01em;
                max-width: 44ch;
                font-weight: 700;
            }

    #hero .gradient .greenBulb1 {
        filter: blur(100px)
    }

    #hero .gradient .orangeBulb1 {
        filter: blur(140px);
        left: -25%;
        z-index: 3;
        mix-blend-mode: normal;
        top: 25%;
        width: 42%;
        opacity: 1
    }

/* V1
#hero .hero-container .hero-right {
    display: flex;
    align-self: flex-end;
    width: 50%;
    justify-content: flex-end
}
*/

.subpage .hero-right {
    width: 50%
}

#hero .gradient::after {
    content: "";
    position: absolute;
    z-index: 5;
    opacity: .2;
    display: block;
    width: 100%;
    height: 100%;
    mix-blend-mode: normal
}

#hero .gradient .orangeBulb1, #hero .gradient .whiteBulb1, #hero .gradient .whiteBulb2 {
    position: absolute;
    animation: 100s ease-in infinite moveGradientsLeft
}

#hero .gradient .blueBulb1, #hero .gradient .blueBulb2, #hero .gradient .greenBulb1 {
    position: absolute;
    animation: 100s ease-in infinite moveGradients
}

#hero .gradient .whiteBulb1 {
    filter: blur(130px);
    right: -30%;
    z-index: 2;
    mix-blend-mode: normal;
    width: 64%;
    top: 40%
}

#hero .gradient .blueBulb1 {
    filter: blur(112px);
    left: 0;
    z-index: 0;
    mix-blend-mode: normal;
    width: 100%;
    top: 20%
}

#hero .hero-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    column-gap: 9vw
}

#logos::after, #logos::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    height: 100px;
    width: 2.625rem;
    z-index: 2
}

#hero-image {
    display: flex;
}

#hero.subpage #hero-image {
    height: var(--subpage-hero-image-height);
}

#hero-image picture,
#hero-image img {
    display: block;
    width: 100%;
    height: 100%;
}

#hero-image img {
    object-fit: cover;
}

/*--aici erau media query-urile */
#logos {
    width: calc(100% - var(--base-margin));
    white-space: nowrap;
    height: 100px;
    margin: var(--margin-80px) var(--base-padding-x)
}

    #logos::after {
        right: 0;
        background: linear-gradient(to left,var(--white-color),transparent)
    }

    #logos::before {
        left: 0;
        background: linear-gradient(to right,var(--white-color),transparent)
    }

#logos-container {
    display: inline-block;
    white-space: nowrap
}

#logos img {
    display: inline-block;
    width: 150px;
    height: 100%;
    text-align: center;
    line-height: 100px;
    margin-right: 12vw;
    opacity: .5
}

#about {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

#sous {
    display: flex;
    flex-direction: column;
}

.about-container, .sous-container {
    width: 100%;
    background: url('/Content/img/Home/Marble.webp') 0 0/100% 100% no-repeat #052029
}

#about h2 {
    color: var(--white-color);
    width: 50%
}

#sous h3 {
    color: var(--white-color);
    width: 100%
}

.about-container .about-text,
.sous-container .sous-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    row-gap: var(--text-gap-md);
}

#footer-head, .about-div, .sous-div {
    display: flex;
    justify-content: space-between
}

    #footer-links div, .about-div div, .sous-div div {
        display: flex;
        flex-direction: column
    }

    .about-div span, .sous-div span {
        font-size: clamp(.75rem, 6.2vw, 5rem);
        color: var(--secondary-color)
    }

#process h2 {
    color: var(--white-color)
}

#services {
    display: flex;
    flex-direction: column
}

    #services h2 {
        width: 100%
    }

.services-container {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--card-gap);
}

.services-card, .services-card-wrapper {
    display: flex;
    flex-direction: column;
    position: relative
}

.services-card {
    width: 33.33%;
    min-height: var(--card-min-height);
    padding: var(--card-padding);
    justify-content: flex-start;
    border-radius: var(--radius-card);
    cursor: pointer;
    text-decoration: none;
}

    .services-card .buttonSecondary {
        visibility: hidden
    }

.services-card-wrapper {
    height: auto;
    row-gap: var(--text-gap-xs);
    z-index: 2
}

    .services-card-wrapper span {
        margin-top: 0;
    }

/*
.services-card.active .clip-div::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient( 180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.30) 45%, rgba(0, 0, 0, 0.75) 100% );
}

.services-card:not(.active) .clip-div::after {
    display: none;
}

.services-card-wrapper {
    position: relative;
    z-index: 2;
}
*/

.services-card.active .buttonSecondary {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 22px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: var(--white-color);
    text-shadow: none;
}

    .services-card.active .buttonSecondary img {
        width: 44px;
        height: auto;
        filter: none;
    }

.clip-div, .clip-img {
    z-index: 1;
    width: 100%;
    left: 0;
    top: 0
}

.clip-img {
    position: absolute;
    height: 100%;
    clip-path: polygon(0 0,100% 0,100% 0,0 0);
    transition: clip-path .2s ease-out
}

.active .clip-img {
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    box-shadow: 2px 2px 16px 0 rgba(5,32,41,.4)
}

.active .buttonSecondary {
    visibility: visible
}

#process {
    position: relative
}

#process {
    flex-direction: column;
    display: flex
}

#process {
    min-height: 100vh;
    padding-top: var(--margin-40px)
}

    #process::after {
        content: "";
        position: absolute;
        z-index: 1;
        opacity: .1;
        pointer-events: none;
        display: block;
        width: 100%;
        height: 100%;
        background: url('/Content/img/RandomStatic.128x128.webp');
        mix-blend-mode: normal
    }

#process-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 3vh
}

#process h2 {
    width: 100%
}

#process p, .avantages-container p {
    margin-top: var(--text-gap-md);
}

#blog, #process h5 {
    margin-top: var(--margin-80px)
}

#process-container {
    display: flex;
    column-gap: 6vw;
    cursor: grab;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: hidden;
    width: 100%;
    align-items: stretch;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.process-container::-webkit-scrollbar {
    display: none
}

.process-content {
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .process-content span {
        font-size: clamp(21.04px, 4vw,3.75rem);
        color: var(--secondary-color)
    }

..case-author p, .feedback-author .name, aside a {
    color: var(--tertiary-color)
}

.process-card {
    flex: 0 0 25%;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch
}

.process-card-icon {
    height: 32vh
}

#cta {
    flex-direction: column;
    display: flex
}

.cta-container, .feedback-author {
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .feedback-author img {
        border-radius: 1rem;
        width: max(72px,1vw);
        height: max(72px,1vw);
        object-fit: cover
    }

.blog-card-image img, .image-cta img {
    border-radius: var(--radius-card);
    object-fit: cover
}

.feedback-author .name {
    font-size: clamp(16px, 1.7vw,3.75rem);
    text-align: right
}

.blog-container .blog-right, .cta-container .cta-right, .feedback-author p {
    text-align: right
}

#cta {
    height: calc(100vh - var(--margin-80px) * 2);
    justify-content: space-between
}

.image-cta {
    height: 70vh;
    display: flex
}

    .image-cta img {
        width: 100%;
        object-position: center 29%;
        box-shadow: 2px 2px 16px 0 rgba(5,32,41,.4)
    }

#blog {
    display: flex;
    flex-direction: column
}

.blog-container {
    display: flex;
    justify-content: space-between;
    column-gap: 3vw
}

.blog-card, .blog-title {
    display: flex;
    flex-direction: column
}

.blog-title {
    padding-left: var(--base-padding-x);
    margin-bottom: var(--margin-40px);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.blog-card {
    width: 33.33%;
    row-gap: 3vh
}

.blog-card-content {
    flex-direction: column;
    display: flex;
    row-gap: 3vh
}

.blog-card-image img {
    width: 100%;
    box-shadow: 2px 2px 16px 0 rgba(5,32,41,.2)
}

.blog-card-content .buttonSecondary {
    color: var(--quaternary-color);
    margin-top: var(--margin-40px)
}

#footer-links a, #footer-links p {
    color: var(--white-color);
    margin-bottom: 1rem;
    font-size: 14px
}

footer {
    display: flex;
    flex-direction: column;
    background: var(--tertiary-color) repeat;
    color: var(--white-color)
}

#footer-links {
    display: flex;
    width: 80%;
    column-gap: 9vw;
    justify-content: flex-end
}

#footer-social {
    border-top: 1.5px solid rgba(255,255,255,.1);
    display: flex;
    justify-content: space-between;
    padding-top: var(--margin-40px);
    align-items: center
}

#aboutus {
    flex-direction: column;
    padding: 0 var(--base-padding-x);
    margin-top: var(--margin-80px);
    margin-bottom: var(--margin-80px);
    display: flex
}

#footer-links p {
    text-transform: uppercase;
    min-width: 7rem
}

#footer-social a {
    color: var(--white-color);
    text-decoration: none;
    opacity: .8;
    min-width: 3rem
}

#footer-links a {
    text-decoration: none;
    opacity: .8
}

    #footer-links a:hover, #footer-social a:hover {
        opacity: 1
    }

/*#aboutus {
    row-gap: 3vh
}*/

.about-wrapper {
    display: flex;
    flex-direction: row;
    row-gap: 3vh;
    column-gap: 3vw
}

.about-div.border {
    border-top: 1.5px solid #013c52;
    border-bottom: 1.5px solid #013c52;
    padding-top: var(--margin-40px);
    padding-bottom: var(--margin-40px)
}

.about-left {
    display: flex;
    justify-content: center;
    justify-content: flex-start;
    row-gap: 3vh;
    width: 33.33%
}

.about-right {
    width: 66.67%
}

    .about-right p {
        color: var(--tertiary-color);
        margin-bottom: 0;
    }

#avantages {
    padding: 0 var(--base-padding-x)
}

.avantages {
    padding: 0 var(--base-padding-x)
}

.avantages-container {
    justify-content: center;
    display: flex
}

#avantages {
    display: flex;
    position: relative;
    flex-direction: column
}

.avantages-wrapper {
    display: flex;
    position: relative;
    overflow: hidden;
    column-gap: 9vw;
    height: 75vh
}

#avantages > h2 {
    width: 90%;
    z-index: 2;
    margin-top: var(--margin-80px);
    margin-bottom: var(--margin-40px)
}

.avantages-scroll {
    width: 50%;
    overflow: visible;
    position: relative;
    z-index: 1
}

.avantages-container {
    height: 100%;
    align-items: flex-start;
    flex-direction: column
}

.avantages-fixed {
    width: 50%;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

/*----------------------- NO MEDIA QUERY ----------------------------*/
/*ATE inainte erau la linia , le-am mutata aici ca sa nu ma incurc in ele */

@media only screen and (min-width: 768px) {
    #sous .sous-container-dev {
        flex-direction: row;
        flex-wrap: nowrap;
        column-gap: 6vw;
    }

    #sous .sous-intro,
    #sous .sous-text {
        flex: 1;
        min-width: 0;
    }
}

@keyframes moveGradients {
    0%,100% {
        transform: translate(0,0)
    }

    10% {
        transform: translate(10vw,-20vh)
    }

    20% {
        transform: translate(1vw,10vh)
    }

    30% {
        transform: translate(5vw,5vh)
    }

    40% {
        transform: translate(-5vw,-10vh)
    }

    50% {
        transform: translate(10vw,20vh)
    }

    60% {
        transform: translate(-10vw,-15vh)
    }

    70% {
        transform: translate(20vw,5vh)
    }

    80% {
        transform: translate(-5vw,10vh)
    }

    90% {
        transform: translate(10vw,-5vh)
    }
}
/*--------END MEDIA QUESRY @keyframes moveGradients ---------------------------------------------*/

@keyframes moveGradientsLeft {
    0%,100% {
        transform: translate(0,0)
    }

    10% {
        transform: translate(5vw,-5vh)
    }

    20% {
        transform: translate(3vw,5vh)
    }

    30%,50%,70% {
        transform: translate(5vw,5vh)
    }

    40%,60% {
        transform: translate(-5vw,-5vh)
    }

    80% {
        transform: translate(-5vw,1vh)
    }

    90% {
        transform: translate(10vw,-5vh)
    }
}

/*--------END MEDIA QUESRY @keyframes moveGradientsLeft ---------------------------------------------*/
/* pina aici sunt cele ce au fost mutate */

@media only screen and (max-width:767px) {
    .nav-toggle-mobile {
        display: none;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        height: auto;
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .nav-toggle-mobile > ul {
        list-style-type: none;
        margin: 24px 0 0;
        padding: 0 var(--base-padding-x) var(--base-padding-y);
    }

    .nav-toggle-mobile ul li {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        border-top: 1px solid rgba(242,242,242,.5);
        border-bottom: 1px solid rgba(242,242,242,.5)
    }

    .nav-toggle-mobile ul li:last-child {
        border-bottom: none
    }

    .nav-toggle-mobile ul li:first-child {
        border-top: none
    }

    .nav-toggle-mobile ul li p {
        display: flex;
        justify-content: space-between
    }

    .nav-toggle-mobile ul li p span {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .nav-toggle-mobile ul li a, .nav-toggle-mobile ul li p {
        text-decoration: none;
        color: var(--white-color);
        font-size: clamp(20px, 3.5vw, 24px);
    }

    .nav-toggle-mobile ul li ul {
        display: none;
        margin: 1.5rem 0 0;
        padding-left: 1.4rem;
        border-top: 1px solid rgba(242,242,242,.5);
        list-style-type: square;
    }

    .nav-toggle-mobile ul li ul li {
        border: none !important;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .nav-toggle-mobile ul li ul li::marker {
        color: rgba(242,242,242,.75);
        font-size: 0.75em;
    }

    .nav-toggle-mobile ul li ul li a {
        display: block;
        font-size: clamp(17px, 1vw, 20px);
        color: rgba(242,242,242,.82);
        font-weight: 400;
    }

    #menu-mobile {
        display: flex;
        width: var(--margin-40px);
        height: var(--margin-40px);
        justify-content: flex-end;
        align-items: center;
    }

    #header {
        height: var(--margin-40px);
        min-height: var(--margin-40px);
        padding-top: 0;
        padding-bottom: 0;
    }

    #header-wrapper {
        height: var(--margin-40px);
        min-height: var(--margin-40px);
        flex-shrink: 0;
        margin: 0;
    }

    #hero .gradient .orangeBulb1 {
        filter: blur(70px);
        -webkit-filter: blur(70px);
        width: 60%
    }

    #hero .gradient .blueBulb1 {
        filter: blur(20px);
        -webkit-filter: blur(20px)
    }

    #hero .gradient .greenBulb1 {
        filter: blur(30px);
        -webkit-filter: blur(30px)
    }

    #hero {
        height: 100vh;
        padding: 0
    }

    #hero-image.gradient img {
        width: 100% !important
    }

    #hero .gradient {
        height: 50vh
    }

    #hero .hero-container .hero-left {
        justify-content: flex-end
    }

    #hero .hero-container {
        padding: 0 var(--base-padding-x); /* padding: 0 1rem; */
        height: 100%
    }

    .orangeBulb2, nav {
        display: none
    }

    #hero .hero-wrapper {
        flex-wrap: wrap;
        row-gap: 9vh;
        padding: 1rem 0
    }

    #about h2, #hero .hero-container .hero-left, #hero .hero-container .hero-left p, #hero .hero-container .hero-right, #services h2, .about-left, .about-right, .blog-card, .blog-title, .cta-left, .services-card, .sous-container .sous-text, .sous-container-dev .sous-text {
        width: 100%
    }

    #footer-logo img, #header svg {
        width: 120px
    }

    .button {
        width: 100%;
        height: auto;
        min-height: var(--button-min-height);
        padding: var(--button-padding);
        border-radius: var(--button-radius);
    }

    .about-container {
        padding: 32px 24px;
        flex-direction: column;
        row-gap: 1.5rem;
        background-size: cover;
        background-position: 16%
    }

    .sous-container-dev {
        padding: 32px 24px;
        flex-direction: column;
        flex-wrap: wrap;
        row-gap: 1.5rem;
        background-size: cover;
        background-position: 16%
    }

    .sous-container-dev .sous-intro {
        width: 100%;
    }

    .sous-container-dev .sous-intro p {
        width: 100%;
        max-width: none; /* important */
    }

    .sous-container-dev .sous-intro h2,
    .sous-container-dev .sous-intro p {
        width: 100%;
        max-width: 100%;
    }

    .sous-container-dev > .sous-intro,
    .sous-container-dev > .sous-text {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    #logos img {
        width: 100px
    }

    .about-container .about-text, .sous-container-dev .about-text {
        width: 100%;
        row-gap: 2.5rem
    }

    .about-div div {
        width: 33.33%
    }

    .about-div {
        column-gap: .4rem
    }

    .active .clip-img {
        clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
        object-fit: cover
    }

    .services-container {
        flex-wrap: wrap
    }

    .blog-card-image img {
        max-height: 200px
    }

    #process h2 {
        width: 100%;
        row-gap: 2vh
    }

    .process-card {
        flex: 0 0 90%
    }

    .process-card-icon img {
        height: 100%;
        object-fit: contain
    }

    .process-card-icon {
        height: 40%
    }

    #avantages > h2, .feedback-author {
        margin-top: var(--margin-40px)
    }

    .avantages-fixed img, .image-cta {
        height: 100%
    }

    .image-cta img {
        height: 100%;
        object-fit: cover;
        object-position: 42% center
    }

    .cta-container {
        flex-direction: column-reverse;
        row-gap: 4vh;
        align-items: flex-start
    }

    .cta-container .cta-right {
        text-align: left
    }

    #blog {
        margin-bottom: var(--margin-80px)
    }

    .blog-container {
        flex-direction: column;
        row-gap: 4vh
    }

    #footer-links {
        flex-wrap: wrap;
        width: 100%;
        column-gap: 1rem;
        justify-content: space-between;
        margin-top: 1.5rem;
        row-gap: 1rem
    }

    #footer-logo {
        width: 50%
    }

    #footer-head {
        row-gap: 2vh;
        flex-direction: column
    }

    #footer-links a, #footer-social {
        font-size: 12px
    }

    #footer-links div {
        display: flex;
        flex-direction: column;
        width: 47%
    }

    .about-div .last {
        padding-left: 1rem
    }

    #hero.subpage {
        padding-bottom: 0
    }

    #hero.subpage .hero-container {
        align-items: flex-end;
        padding-bottom: 3vh
    }

    #hero.subpage .hero-wrapper {
        flex-direction: column;
        flex-wrap: nowrap
    }

    #blog, #hero.subpage .hero-container .hero-left {
        height: auto
    }

    .about-wrapper {
        flex-direction: column
    }

    #process-wrapper {
        row-gap: 3vh
    }

    .avantages-scroll {
        width: 100%;
        height: 50%
    }

    .avantages-fixed {
        width: 100%;
        height: 40%;
        background: url('/Content/img/StaticNoise.webp') repeat center center fixed var(--white-color);
        z-index: 3;
        padding: var(--base-padding-y) 0;
        top: auto
    }

    .avantages-wrapper {
        flex-wrap: wrap-reverse;
        align-items: start;
        height: 100%
    }
}
/*--------END MEDIA QUERY @media only screen and ---------------------------*/

@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    :root {
        --base-padding-x: max(3vw, 16px);
        --card-min-height: max(45vh, 330px);
    }

    .about-div span {
        font-size: clamp(.75rem, 5.5vw, 5rem);
    }

    .about-container {
        padding: 3vw;
        min-height: 48vh;
    }

    .services-card {
        width: 100%;
        min-height: var(--card-min-height);
        padding: var(--card-padding);
    }

        .services-card img {
            object-fit: cover;
        }

    #footer-links,
    .services-container {
        flex-wrap: wrap;
    }

    .process-card {
        flex: 0 0 45%;
    }

    #process {
        min-height: 50vh !important;
    }

    #blog {
        height: 60vh;
    }

    #footer-links div {
        width: 40%;
    }

    .nav-toggle-info,
    .nav-toggle-info a,
    .nav-toggle-info p {
        font-size: 14px;
    }

    .nav-toggle-info-left,
    .nav-toggle-left {
        width: 60%;
    }
}
/*--------END MEDIA QUERY @media only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) ---------------------------*/

.wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--white-color);
    text-decoration: none;
    padding: 0;
    border: 0;
    border-radius: 0;
}

    .wa-btn:hover {
        text-decoration: underline;
    }

.wa-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.nav-toggle-left ul.nav-portfolio li {
    padding: 0; /* remove padding from li */
}

    .nav-toggle-left ul.nav-portfolio li a {
        display: flex; /* better than block */
        align-items: center; /* vertical centering */
        width: 100%;
        height: 100%; /* KEY FIX */
        padding: 1.5rem 0; /* restore spacing */
    }

.section-label {
    display: block;
    width: 100%;
    margin-bottom: var(--text-gap-sm);
    font-family: Montserrat-Bold;
    font-size: var(--font-small);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: var(--lh-label);
    color: var(--secondary-color-text);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*--------------------------------
    INTERNAL LINK
-----------------------------------------*/
.internal-link {
    color: var(--secondary-color-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color .2s ease;
}

    .internal-link:hover {
        color: var(--primary-color);
    }

.case-link {
    font-family: Montserrat-Medium;
    font-size: clamp(18px, 1.2vw, 1.75rem);
    text-decoration: none;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    column-gap: 1.5vw;
    cursor: pointer;
    transition: color .2s ease;
}

    .case-link:hover {
        font-family: Montserrat-SemiBold;
        color: var(--primary-color);
    }

.blog-article-hero .section-label {
    margin-top: 8px;
}

/*--------------------------------
    FAQ SECTION
--------------------------------*/

.faq-section {
    background: url('/Content/img/StaticNoise.webp') var(--white-color) repeat;
}

.faq-container {
    display: flex;
    column-gap: 9vw;
    align-items: center;
    min-height: 50vh;
    padding: var(--margin-80px) var(--base-padding-x);
}

.faq-left,
.faq-right {
    width: 50%;
}

.faq-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .faq-left p {
        max-width: 38rem;
    }

.faq-section-reverse .faq-container {
    flex-direction: row-reverse;
}

.faq-right {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-bottom: 1.5px solid rgba(5, 32, 41, .25);
}

    .faq-item:first-child {
        border-top: 0;
    }

.faq-question {
    display: block;
    width: 100%;
    padding: var(--faq-question-padding-y) var(--faq-question-padding-right) var(--faq-question-padding-y) 0;
    border: 0;
    margin: 0;
    background: transparent;
    font-family: Montserrat-SemiBold;
    font-weight: normal;
    font-size: var(--font-body);
    line-height: var(--lh-body);
    color: var(--tertiary-color);
    text-align: left;
    cursor: pointer;
    position: relative;
}

.faq-section .faq-question {
    color: var(--tertiary-color);
}

.faq-question:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 4px;
}

.faq-question::after {
    content: "+";
    position: absolute;
    right: 0;
    top: var(--faq-question-padding-y);
    color: var(--secondary-color);
    font-family: Montserrat-SemiBold;
    font-size: var(--faq-icon-size);
    line-height: 1;
}

.faq-item.active .faq-question::after {
    content: "−";
}

.faq-answer {
    display: none;
    padding: var(--faq-answer-padding-top) var(--faq-question-padding-right) var(--faq-answer-padding-bottom) 0;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-answer,
.faq-answer p {
    color: var(--primary-color);
}

    .faq-answer p {
        line-height: var(--lh-body);
        margin: 0;
    }

/* FAQ Mobile */

@media only screen and (max-width: 767px) {

    .faq-container,
    .faq-section-reverse .faq-container {
        flex-direction: column;
        align-items: flex-start;
        row-gap: var(--faq-row-gap);
        min-height: auto;
        padding: var(--margin-80px) var(--base-padding-x);
    }

    .faq-left {
        order: 1;
        width: 100%;
    }

    .faq-right {
        order: 2;
        width: 100%;
    }

    .faq-question::after {
        top: var(--faq-question-padding-y);
    }
}

/*----------------------------------
    COMPARISON V2
-----------------------------------*/

.comparison-v2 {
    background: url('/Content/img/StaticNoise.webp') var(--white-color) repeat;
    padding: var(--margin-80px) var(--base-padding-x);
}

.comparison-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: var(--margin-40px);
}

    .comparison-container h2 {
        max-width: 90%;
    }

    .comparison-container > p {
        max-width: 1100px;
    }

.comparison-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.comparison-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
}

.comparison-table th,
.comparison-table td {
    padding: 18px 22px;
    vertical-align: top;
    text-align: left;
    color: var(--tertiary-color);
    font-family: Montserrat-Medium;
    font-size: clamp(14px, 1vw, 20px);
    line-height: 1.45;
    border-bottom: 1.5px solid rgba(5, 32, 41, .18);
}

.comparison-table th {
    font-family: Montserrat-SemiBold;
    color: var(--primary-color);
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    width: 18%;
    font-family: Montserrat-SemiBold;
}

.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2),
.comparison-table th:nth-child(3),
.comparison-table td:nth-child(3) {
    width: 41%;
}

@media only screen and (max-width: 767px) {


    .comparison-v2 {
        /*LABEL*/
        --comparison-mobile-label-margin-bottom: 4px;
        --comparison-mobile-label-font-size: 13px;
        --comparison-mobile-label-line-height: var(--lh-label);
        /*CELL*/
        --comparison-mobile-cell-margin-bottom: 12px;
        --comparison-mobile-cell-font-size: clamp(14px, 3.8vw, 16px);
        --comparison-mobile-cell-line-height: var(--lh-body);
        /*SECOND COLUMN */
        --comparison-mobile-second-column-bg: rgba(5, 32, 41, .055);
        --comparison-mobile-second-column-padding-y: 10px;
        --comparison-mobile-second-column-padding-x: 10px;
        --comparison-mobile-second-column-radius: 0;
        /*table div container*/
        --comparison-mobile-table-margin-top: 0;
        /*CRITERIA*/
        --comparison-mobile-criterion-font-size: clamp(15px, 4vw, 17px);
        --comparison-mobile-criterion-margin-bottom: 8px;
        --comparison-mobile-criterion-line-height: 1.15;
    }

    .comparison-table-scroll {
        overflow-x: visible;
    }

    .comparison-table {
        min-width: 0;
        width: 100%;
        display: block;
    }

    .comparison-table thead {
        display: none;
    }

    .comparison-table tbody {
        display: block;
    }

    .comparison-table tr {
        display: block;
        padding: 18px 0;
        border-bottom: 1.5px solid rgba(5, 32, 41, .18);
    }

    .comparison-table td {
        display: block;
        width: 100% !important;
        padding: 0;
        border-bottom: 0;
    }

    .comparison-v2 .comparison-table-scroll {
        margin-top: var(--comparison-mobile-table-margin-top);
    }

    .comparison-table td:first-child {
        font-family: Montserrat-SemiBold;
        color: var(--primary-color);
        font-size: var(--comparison-mobile-criterion-font-size);
        line-height: var(--comparison-mobile-criterion-line-height);
        margin-bottom: var(--comparison-mobile-criterion-margin-bottom);
    }

    .comparison-table td:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: var(--comparison-mobile-label-margin-bottom);
        font-family: Montserrat-SemiBold;
        font-size: var(--comparison-mobile-label-font-size);
        line-height: var(--comparison-mobile-label-line-height);
        text-transform: uppercase;
        letter-spacing: 0.06rem;
        color: var(--secondary-color-text);
    }

    .comparison-table td:not(:first-child) {
        margin-bottom: var(--comparison-mobile-cell-margin-bottom);
        font-size: var(--comparison-mobile-cell-font-size);
        line-height: var(--comparison-mobile-cell-line-height);
    }

    .comparison-table td:nth-child(2):not(:empty) {
        background: var(--comparison-mobile-second-column-bg);
        padding: var(--comparison-mobile-second-column-padding-y) var(--comparison-mobile-second-column-padding-x);
        border-radius: var(--comparison-mobile-second-column-radius);
    }


    .comparison-table td:last-child {
        margin-bottom: 0;
    }

    .comparison-v2 .comparison-container {
        row-gap: var(--text-gap-md);
    }

    .comparison-v2 .comparison-container > h2 {
        margin: 0;
    }

    .comparison-v2 .comparison-container > h2 + p {
        margin-top: 0;
    }
}


/*----------------------------------------------*/
.button-orange {
    background: var(--secondary-color) !important;
    background-image: none !important;
    border-color: var(--secondary-color) !important;
    color: var(--white-color) !important;
}

    .button-orange:hover {
        background: var(--secondary-color);
        color: var(--white-color);
    }

.submit-text {
    color: #F2F2F2;
    line-height: 1;
}

.button .btn-icon {
    flex-shrink: 0;
}

@media only screen and (max-width: 767px) {

    :root {
        --font-h1: clamp(27px, 8.2vw, 32px);
        --font-h2: clamp(23px, 7.2vw, 28px);
        --font-h3: clamp(19px, 5.8vw, 24px);
        --font-h4: clamp(18px, calc(0.24rem + 3.6vw), 25px);
        --font-body: clamp(15px, calc(0.22rem + 2.75vw), 20px);
        --font-small: clamp(12px, calc(0.25rem + 2.6vw), 16px);
        --font-button: clamp(15px, calc(0.35rem + 3vw), 24px);
        /* Line height */
        --lh-display: 1.05;
        --lh-heading: 1.02;
        --lh-body: 1.22;
        --lh-label: 1.20;
        /* Line padding*/
        --list-padding-left: 18px;
        /* TEXT GAP */
        --text-gap-xs: clamp(4px, 1.1vw, 7px);
        --text-gap-sm: clamp(7px, 1.8vw, 11px);
        --text-gap-md: clamp(9px, 2.4vw, 16px);
        --text-gap-lg: clamp(16px, 3.8vw, 28px);
        /*Service cards*/
        --card-min-height: clamp(420px, 75vh, 540px);
        --card-gap: clamp(24px, 6vw, 32px);
        /*Margins*/
        --margin-40px: clamp(38px, 5.8vh, 40px);
        --margin-80px: clamp(32px, 6vh, 72px);
        /*FAQ*/
        --faq-row-gap: var(--text-gap-sm);
        --faq-question-padding-y: clamp(14px, 3vw, 18px);
        --faq-question-padding-right: 28px;
        --faq-icon-size: clamp(22px, 6vw, 30px);
        /* Button */
        --button-padding: clamp(16px, 4.5vw, 22px);
        --button-min-height: clamp(82px, 13vh, 96px);
        --button-radius: var(--radius-card);
        --button-icon-size: clamp(16px, 5vw, 22px);
    }

    main p,
    main li {
        font-family: Montserrat-Regular, Montserrat-Medium, sans-serif;
    }

        main p b,
        main li b {
            font-family: Montserrat-SemiBold, Montserrat-Bold, sans-serif;
            font-weight: 600;
        }

    h5, small, .section-label {
        letter-spacing: 0.08em;
    }

    h1, h2, h3, h4, h5, small, p, li {
        overflow-wrap: break-word;
        word-break: normal;
    }
}

/* =========================================================
   HERO V2 – BASE
   ========================================================= */

.hero-v2 {
    --hero-v2-column-gap: 9vw;
    --hero-v2-wrapper-row-gap: 0;
    --hero-v2-text-left-padding-top: var(--margin-40px);
    --hero-v2-text-right-padding-top: calc(var(--margin-40px) + 8px);
    --hero-v2-item-gap: var(--text-gap-md);
    --hero-v2-image-height: 50vh;
    width: 100%;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
}

/* Shared container */
.hero-v2 .hero-container {
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    padding: 0 var(--base-padding-x);
}

.hero-v2 .hero-wrapper {
    display: flex;
    justify-content: space-between;
    column-gap: var(--hero-v2-column-gap);
    row-gap: var(--hero-v2-wrapper-row-gap);
    width: 100%;
    height: auto;
    align-items: center;
}

/* Columns */
.hero-v2 .hero-left,
.hero-v2 .hero-right {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    max-width: none;
    row-gap: 0;
}

.hero-v2 .hero-right h2 {
    width: 100%;
    margin: 0;
    line-height: 1.05;
}

/* Text links */
.hero-v2 .hero-left p a {
    color: var(--tertiary-color);
}

/* Hero paragraph rhythm */
.hero-v2 .hero-left p + p,
.hero-v2 .hero-right p + p {
    margin-top: var(--text-gap-sm);
}


/* =========================================================
   HERO V2 – TEXT HERO
   ========================================================= */

.hero-v2-text {
    padding-top: var(--margin-40px);
    padding-bottom: var(--margin-40px);
    min-height: 50vh;
}

    .hero-v2-text .hero-container {
        align-items: center;
    }

    .hero-v2-text .hero-wrapper {
        align-items: center;
    }

    .hero-v2-text .hero-left {
        justify-content: center;
        padding-top: var(--hero-v2-text-left-padding-top);
    }

    .hero-v2-text .hero-right {
        justify-content: center;
        padding-top: var(--hero-v2-text-right-padding-top);
    }

    /* Grouped text item: h3 + p / p */
    .hero-v2-text .hero-v2-item {
        display: block;
    }

        .hero-v2-text .hero-v2-item + .hero-v2-item {
            margin-top: var(--hero-v2-item-gap);
        }

        .hero-v2-text .hero-v2-item h3 {
            margin: 0 0 var(--text-gap-sm) 0;
            line-height: var(--lh-heading);
        }

        .hero-v2-text .hero-v2-item p {
            margin: 0;
            line-height: var(--lh-body);
        }

            .hero-v2-text .hero-v2-item p + p {
                margin-top: var(--text-gap-sm);
            }


/* =========================================================
   HERO V2 – VISUAL HERO
   ========================================================= */

.hero-v2--visual {
    min-height: 100vh;
}

/* Gradient / visual block */
.hero-v2--visual .gradient {
    height: 50vh;
    background-color: var(--primary-color);
    position: relative;
    overflow: hidden;
}

/* Visual overlay */
.hero-v2--visual .gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0.2;
}

.hero-v2--visual .gradient > .hero-v2-bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Visual + text split */
.hero-v2--visual .hero-container {
    height: 50vh;
    display: flex;
    align-items: center;
}

.hero-v2--visual .hero-left {
    justify-content: center;
}

.hero-v2--visual .hero-right {
    justify-content: flex-end;
    align-items: flex-start;
    row-gap: var(--text-gap-sm);
}

.hero-v2--visual .hero-right p + p {
    margin-top: 0;
}

/* Compact H2 variant */
.hero-v2--visual .hero-h2-compact {
    font-size: clamp(22px, 1.6vw, 34px);
    line-height: 1.2;
    margin: 0 0 14px 0;
    letter-spacing: -0.01em;
    max-width: 44ch;
    font-weight: 700;
}


/* =========================================================
   HERO V2 – IMAGE
   ========================================================= */

.hero-v2-image {
    height: var(--hero-v2-image-height);
    display: flex;
}

    .hero-v2-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


/* =========================================================
   HERO V2 – GRADIENT BULBS
   ========================================================= */

.hero-v2--visual .gradient .orangeBulb1,
.hero-v2--visual .gradient .whiteBulb1,
.hero-v2--visual .gradient .whiteBulb2 {
    position: absolute;
    animation: 100s ease-in infinite moveGradientsLeft;
}

.hero-v2--visual .gradient .blueBulb1,
.hero-v2--visual .gradient .blueBulb2,
.hero-v2--visual .gradient .greenBulb1 {
    position: absolute;
    animation: 100s ease-in infinite moveGradients;
}

.hero-v2--visual .gradient .orangeBulb1 {
    filter: blur(140px);
    left: -25%;
    top: 25%;
    width: 42%;
    z-index: 3;
}

.hero-v2--visual .gradient .whiteBulb1 {
    filter: blur(130px);
    right: -30%;
    top: 40%;
    width: 64%;
    z-index: 2;
}

.hero-v2--visual .gradient .greenBulb1 {
    filter: blur(100px);
}

.hero-v2--visual .gradient .blueBulb1 {
    filter: blur(112px);
    left: 0;
    top: 20%;
    width: 100%;
    z-index: 0;
}


/* =========================================================
   HERO V2 – MOBILE
   ========================================================= */

@media only screen and (max-width: 767px) {

    .hero-v2 {
        --hero-v2-column-gap: 0;
        --hero-v2-wrapper-row-gap: var(--text-gap-lg);
        --hero-v2-text-left-padding-top: var(--margin-40px);
        --hero-v2-text-right-padding-top: 0;
        --hero-v2-item-gap: var(--text-gap-md);
        --hero-v2-image-height: 40vh;
        min-height: auto;
    }

        .hero-v2 .hero-container {
            height: auto;
        }

        .hero-v2 .hero-wrapper {
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
        }

        .hero-v2 .hero-left,
        .hero-v2 .hero-right {
            width: 100%;
            max-width: 100%;
            flex: 0 0 auto;
            align-self: stretch;
        }

        .hero-v2 .hero-right {
            justify-content: flex-start;
        }

    .hero-v2-text {
        padding-top: var(--margin-40px);
        padding-bottom: var(--margin-40px);
    }

    .hero-v2-image {
        max-height: 320px;
    }

        .hero-v2-image img {
            object-fit: cover;
        }

    /* Reset text-column top padding on mobile */
    .hero-v2-text .hero-left,
    .hero-v2-text .hero-right {
        padding-top: 0;
    }

    /* Default mobile order */
    .hero-v2-text .hero-left {
        order: 1;
    }

    .hero-v2-text .hero-right {
        order: 2;
    }

    /* Reverse mobile order */
    .hero-v2-reverse .hero-left {
        order: 2;
    }

    .hero-v2-reverse .hero-right {
        order: 1;
    }    


    .hero-v2--visual .hero-container {
        padding-top: var(--margin-40px);
        padding-bottom: var(--margin-40px);
    }
}

/* =========================================================
   CTA V2
   ========================================================= */

.cta-v2 {
    --cta-column-gap: 6vw;
    --cta-row-gap: var(--text-gap-md);
    --cta-tablet-row-gap: var(--margin-40px);
    --cta-mobile-row-gap: var(--text-gap-sm);
    --cta-image-radius: clamp(24px, 2vw, 32px);
    --cta-image-radius-tablet: clamp(20px, 3vw, 24px);
    --cta-image-min-height: 34vh;
    --cta-image-max-height: 420px;
    --cta-image-tablet-height: 32vh;
    --cta-image-tablet-max-height: 260px;
    --cta-image-mobile-height: clamp(150px, 24vh, 180px);
    --cta-support-mobile-line-height: 1.10;
    --cta-button-mobile-min-height: clamp(72px, 12vh, 92px);
    --cta-button-mobile-padding-y: clamp(16px, 4vw, 22px);
    /* Desktop */
    --cta-image-desktop-height: clamp(300px, 32vh, 390px);
    --cta-heading-desktop-size: clamp(34px, 3vw, 48px);
    --cta-support-desktop-size: clamp(20px, 1.55vw, 26px);
    --cta-heading-desktop-min-height: calc(var(--cta-heading-desktop-size) * 2.15);
    --cta-support-desktop-min-height: calc(var(--cta-support-desktop-size) * 3.45);
    --cta-desktop-content-gap: clamp(8px, 1vw, 14px);
    --cta-button-desktop-min-height: clamp(60px, 7vh, 78px);
    --cta-button-desktop-padding-y: clamp(14px, 1.4vw, 18px);
    width: 100%;
    min-height: 50vh;
    height: auto;
    display: block;
    padding: var(--margin-40px) var(--base-padding-x);
}

/* Reverse layout */
.cta-v2--reverse .cta-container {
    flex-direction: row-reverse;
}

/* Container */
.cta-v2 .cta-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: var(--cta-column-gap);
    min-height: calc(50vh - (var(--margin-40px) * 2));
}

/* Columns */
.cta-v2 .cta-left,
.cta-v2 .cta-right {
    flex: 1 1 0;
    min-width: 0;
}

/* Left image wrapper */
.cta-v2 .cta-left {
    display: flex;
    align-items: center;
}

/* Image */
.cta-v2 .image-cta {
    width: 100%;
    height: 100%;
    min-height: var(--cta-image-min-height);
    max-height: var(--cta-image-max-height);
    overflow: hidden;
    border-radius: var(--cta-image-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

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

/* Right text */
.cta-v2 .cta-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    row-gap: var(--cta-row-gap);
    text-align: left;
}

    /* Text elements */
    .cta-v2 .cta-kicker,
    .cta-v2 .cta-right h2,
    .cta-v2 .cta-right h3 {
        margin: 0;
    }

.cta-v2 .cta-kicker {
    color: var(--secondary-color-text);
}


/* =========================================================
   CTA V2 – DESKTOP
   ========================================================= */

@media only screen and (min-width: 1025px) {

    .cta-v2 {
        height: 50vh;
        min-height: 50vh;
        display: flex;
        padding-top: var(--margin-40px);
        padding-bottom: var(--margin-40px);
    }

        .cta-v2 .cta-container {
            flex: 1;
            min-height: 0;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            column-gap: var(--cta-column-gap);
            align-items: center;
        }

        .cta-v2 .cta-left,
        .cta-v2 .cta-right {
            width: 100%;
            min-width: 0;
        }

        .cta-v2 .cta-left {
            grid-column: 1;
            justify-content: flex-start;
        }

        .cta-v2 .cta-right {
            grid-column: 2;
            row-gap: var(--cta-desktop-content-gap);
        }

    .cta-v2--reverse .cta-left {
        grid-column: 2;
    }

    .cta-v2--reverse .cta-right {
        grid-column: 1;
    }

    .cta-v2 .image-cta {
        width: 100%;
        min-height: 0;
        height: var(--cta-image-desktop-height);
        max-height: none;
    }

    .cta-v2 .cta-right h2 {
        font-size: var(--cta-heading-desktop-size);
        line-height: 1.05;
        min-height: var(--cta-heading-desktop-min-height);
        display: flex;
        align-items: flex-start;
    }

    .cta-v2 .cta-right h3 {
        font-size: var(--cta-support-desktop-size);
        line-height: 1.12;
        min-height: var(--cta-support-desktop-min-height);
        display: flex;
        align-items: flex-start;
    }

    .cta-v2 .button {
        width: fit-content;
        max-width: 100%;
        min-height: var(--cta-button-desktop-min-height);
        padding-top: var(--cta-button-desktop-padding-y);
        padding-bottom: var(--cta-button-desktop-padding-y);
    }
}


/* =========================================================
   CTA V2 – TABLET
   ========================================================= */

@media only screen and (max-width: 1024px) {

    .cta-v2 {
        padding-bottom: var(--margin-40px);
    }

        .cta-v2 .cta-container {
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            row-gap: var(--cta-tablet-row-gap);
            min-height: auto;
        }

        .cta-v2 .cta-left,
        .cta-v2 .cta-right {
            width: 100%;
            flex: 0 0 auto;
        }

        .cta-v2 .image-cta {
            min-height: 0;
            height: var(--cta-image-tablet-height);
            max-height: var(--cta-image-tablet-max-height);
            border-radius: var(--cta-image-radius-tablet);
        }

        .cta-v2 .cta-right {
            justify-content: flex-start;
            row-gap: var(--cta-mobile-row-gap);
        }
}


/* =========================================================
   CTA V2 – MOBILE
   ========================================================= */

@media only screen and (max-width: 767px) {

    .cta-v2 {
        min-height: 100svh;
        display: flex;
        padding-top: var(--margin-40px);
        padding-bottom: var(--margin-40px);
    }

    .cta-v2 .cta-container {
        flex: 1;
        justify-content: flex-start;
        row-gap: clamp(18px, 3vh, 28px);
    }

    .cta-v2 .cta-left {
        padding-top: 0;
    }

    .cta-v2 .image-cta {
        height: var(--cta-image-mobile-height);
        max-height: none;
    }

    .cta-v2 .cta-right {
        flex: 1;
        row-gap: var(--text-gap-sm);
    }

    .cta-v2 .cta-right h2 {
        margin-top: var(--text-gap-xs);
        margin-bottom: var(--text-gap-sm);
    }

    .cta-v2 .cta-right h3 {
        font-size: var(--font-h4);
        line-height: var(--cta-support-mobile-line-height);
        margin-top: var(--text-gap-md);
        margin-bottom: var(--text-gap-sm);
    }

    .cta-v2 .button {
        width: 100%;
        min-height: var(--cta-button-mobile-min-height);
        padding-top: var(--cta-button-mobile-padding-y);
        padding-bottom: var(--cta-button-mobile-padding-y);
        justify-content: flex-start;
        margin-top: clamp(28px, 6vh, 48px);
        margin-bottom: var(--text-gap-md);
    }
}