/* ==========================================================================
   Muhammad Shoaib portfolio - design stylesheet
   ==========================================================================

   Bridges the approved design (the Elementor/GSAP reference in
   Desktop/shoaib-portfolio) onto native Salient + WPBakery markup. Values are
   taken from the design's own stylesheets and measured computed styles, not
   estimated. The design's breakpoints are kept exactly:
       desktop  > 1366px   content 1360px, gutter 32px
       laptop  <= 1366px   content 1000px, gutter 70px
       tablet  <= 1024px   content fluid,  gutter 50px
       phone   <=  767px   content fluid,  gutter 16px

   Chrome (header, menu, footer, cursor, preloader) is scoped to .ms-site,
   page sections to .ms-page, which functions.php sets from a content marker.

   CONTENTS
     1  Fonts
     2  Tokens
     3  Salient hand-over + resets
     4  Section frame (width, gutters, rhythm, split grids)
     5  Atoms: headings, eyebrow, arrow line, pills, button, text
     6  Header + full-screen menu
     7  Hero
     8  Marquees (text, logos, pills)
     9  About (scroll-lit paragraph)
     10 Selected work (project cards)
     11 Services
     12 Testimonials
     13 Contact + multi-step form
     14 Thank-you popup
     15 Footer (Salient Global Section)
     16 Preloader, cursor, scroll-to-top
     17 Motion (entrances)
     18 Other pages (404, legal pages)
   ========================================================================== */

/* ==========================================================================
   1. FONTS
   Self-hosted: Mango Grotesque is not on Google Fonts, and Inter is the 18pt
   optical cut the design ships ("Inter Custom" in the reference).
   ========================================================================== */

@font-face { font-family: 'Mango Grotesque'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/MangoGrotesque-Light.woff') format('woff'); }
@font-face { font-family: 'Mango Grotesque'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/MangoGrotesque-Regular.woff') format('woff'); }
@font-face { font-family: 'Mango Grotesque'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/MangoGrotesque-Medium.woff') format('woff'); }
@font-face { font-family: 'Mango Grotesque'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/MangoGrotesque-SemiBold.woff') format('woff'); }
@font-face { font-family: 'Mango Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/MangoGrotesque-Bold.woff') format('woff'); }
@font-face { font-family: 'Inter Custom'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Inter_18pt-Regular.woff') format('woff'); }
@font-face { font-family: 'Inter Custom'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Inter_18pt-Medium.woff') format('woff'); }
@font-face { font-family: 'Inter Custom'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Inter_18pt-SemiBold.woff') format('woff'); }

/* ==========================================================================
   2. TOKENS
   ========================================================================== */

:root {
	--ms-bg: #120800;
	--ms-orange: #ED7A36;
	--ms-orange-2: #DD4D06;
	--ms-arrow: #E8491A;
	--ms-maroon: #5B0000;
	--ms-grad: linear-gradient(150deg, #ED7A36 0%, #DD4D06 100%);
	--ms-grad-v: linear-gradient(180deg, #ED7A36 0%, #DD4D06 100%);
	--ms-white: #FFFFFF;
	--ms-text: #D8D8D8;
	--ms-grey: #54595F;
	--ms-line: #555555;

	--ms-display: 'Mango Grotesque', sans-serif;
	--ms-body: 'Inter Custom', 'Inter', sans-serif;

	--ms-wrap: 1360px;
	--ms-gut: 32px;
	--ms-pill-bg: rgba(255, 255, 255, .03);
	--ms-pill-line: rgba(255, 255, 255, .25);
	--ms-pill-glow: inset 0 0 8px 0 rgba(255, 255, 255, .25);
	--ms-ease-out: cubic-bezier(.23, 1, .32, 1);
	--ms-ease-menu: cubic-bezier(.4, 0, .01, 1);
	--ms-ease-line: cubic-bezier(.24, .43, .15, .97);
}
@media (max-width: 1366px) { :root { --ms-wrap: 1000px; --ms-gut: 70px; } }
@media (max-width: 1024px) { :root { --ms-gut: 50px; } }
@media (max-width: 767px)  { :root { --ms-gut: 16px; } }

/* ==========================================================================
   3. SALIENT HAND-OVER + RESETS
   ========================================================================== */

html body.ms-site,
body.ms-site {
	background: var(--ms-bg);
	font-family: var(--ms-body);
	font-size: 18px;
	color: var(--ms-text);
	-webkit-tap-highlight-color: transparent;
}
body.ms-site .container-wrap,
body.ms-site #ajax-content-wrap { background: var(--ms-bg); }

/* The design's header replaces Salient's (inc/ms-header.php). Salient's markup
   stays in the DOM for its scripts; it is only taken out of the layout. */
body.ms-site #header-outer,
body.ms-site #header-space,
body.ms-site #search-outer,
body.ms-site #slide-out-widget-area,
body.ms-site #slide-out-widget-area-bg { display: none !important; }
body.ms-page .page-header-no-bg,
body.ms-page #page-header-wrap,
body.ms-page #page-header-bg { display: none !important; }

/* Salient's own "back to top" is off in Theme Options; belt and braces. */
body.ms-site #to-top { display: none !important; }

/* Release Salient's page container: rows span the viewport and each section
   sets its own content width (section 4). */
body.ms-page .container-wrap,
body.ms-page .container-wrap .container.main-content,
body.ms-page #ajax-content-wrap .container-wrap {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.ms-page .container-wrap .main-content > .row { padding: 0 !important; margin: 0 !important; }
body.ms-page .container-wrap { overflow-x: hidden; overflow-x: clip; } /* hidden: Safari before 16 */

/* Salient puts a percentage gutter as padding on columns and a negative
   margin on the wrapper; both go, so every section lands on the same strip. */
body.ms-site .ms-section.wpb_row,
body.ms-site .ms-section .vc_row-o-equal-height { margin-bottom: 0 !important; }
body.ms-site .ms-section > .row_col_wrap_12,
body.ms-site .ms-section .row_col_wrap_12_inner {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: none !important;
}
body.ms-site .ms-section .wpb_column,
body.ms-site .ms-section .wpb_column > .vc_column-inner {
	padding: 0 !important;
	margin: 0 !important;
}
/* Salient 18 lays .row_col_wrap_12 out as flex, which would size a lone column
   to its content (a marquee then grows without limit). Columns fill their
   row, or their grid track where a section uses one. */
body.ms-site .ms-section .wpb_column { float: none !important; width: 100% !important; min-width: 0; flex: 1 1 100%; }
body.ms-site .ms-section .wpb_row.vc_inner { margin-bottom: 0 !important; }
body.ms-site .ms-section .wpb_text_column,
body.ms-site .ms-section .wpb_content_element { margin-bottom: 0 !important; }
body.ms-site .ms-section .wpb_text_column p:last-child { margin-bottom: 0; }

/* Salient spaces every element in a column with .wpb_wrapper > div
   {margin-bottom:24px}. Spacing here comes from each stack's gap instead.
   Kept at (0,2,1) so element rules later in this file (negative margins on
   the marquees, the review slider's bleed) still win on source order. */
.ms-site .wpb_wrapper > div { margin-bottom: 0; }

/* Salient: .row .col img {margin-bottom:15px}. */
body.ms-site .ms-section img { margin-bottom: 0; }

/* Clearfix pseudo-elements become grid/flex items once a wrapper is laid out
   with grid or flex, and eat a track or a gap. Every wrapper this sheet lays
   out loses them. */
body.ms-site .ms-section > .row_col_wrap_12::before,
body.ms-site .ms-section > .row_col_wrap_12::after,
body.ms-site .ms-section .row_col_wrap_12_inner::before,
body.ms-site .ms-section .row_col_wrap_12_inner::after,
body.ms-site .ms-section.wpb_row::before,
body.ms-site .ms-section.wpb_row::after { display: none !important; content: none !important; }

/* Salient paints headings and paragraphs with its own sizes, colours and
   margins, and adds bullets to content lists. */
body.ms-site .ms-section h1, body.ms-site .ms-section h2, body.ms-site .ms-section h3,
body.ms-site .ms-section h4, body.ms-site .ms-section h5, body.ms-site .ms-section h6,
body.ms-site .ms-header h1, body.ms-site .ms-header h2 {
	margin: 0;
	padding: 0;
	letter-spacing: 0;
	text-transform: none;
}
body.ms-site .ms-section p { padding: 0; }
body.ms-site .ms-section ul,
body.ms-site .ms-header ul { list-style: none !important; margin: 0; padding: 0; }
/* Salient sets the bullet on the items themselves (ul li {list-style:disc}),
   so resetting the list alone leaves a dot before every menu link. */
body.ms-site .ms-section ul li,
body.ms-site .ms-header ul li { list-style: none !important; }
body.ms-site .ms-section ul li::before,
body.ms-site .ms-section ul li::marker,
body.ms-site .ms-header ul li::marker { content: none !important; }
body.ms-site .ms-section img { max-width: 100%; }
body.ms-site .ms-section a { transition: color .3s ease; }

/* Utilities shared by several elements. */
@media (min-width: 768px) { body.ms-site .ms-only-m { display: none !important; } }
@media (max-width: 767px) { body.ms-site .ms-hide-m { display: none !important; } }
.ms-text-left { text-align: left; }
.ms-text-center { text-align: center; }
.ms-text-right { text-align: right; }
body.ms-site .ms-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Salient's global button style writes border-radius:4px !important on every
   bare button element; the design's round controls restate theirs. */
body.ms-site .ms-header__toggle,
body.ms-site .ms-menu__close,
body.ms-site .ms-reviews__arrow,
body.ms-site .ms-to-top,
body.ms-site .ms-thanks__close { border-radius: 0 !important; background: none; box-shadow: none; }

/* ==========================================================================
   4. SECTION FRAME
   Every section is a full-width row whose CONTENT is capped at --ms-wrap and
   centred inside --ms-gut gutters. Vertical rhythm is padding (not margin), set
   to reproduce the reference's collapsed margins exactly.
   ========================================================================== */

body.ms-site .ms-section {
	box-sizing: border-box;
	width: 100%;
	padding: 0 max(var(--ms-gut), calc((100% - var(--ms-wrap)) / 2)) !important;
	margin: 0 !important;
	position: relative;
}
body.ms-site .ms-section.ms-bleed { padding-left: 0 !important; padding-right: 0 !important; }
/* The platform strip runs on a 1400px box, edge to edge below that width. */
body.ms-site .ms-section.ms-wide { --ms-wrap: 1400px; --ms-gut: 0px; }

/* rhythm: design margin values 140 / 100 / 80 / 60 */
body.ms-site .ms-pad { padding-top: 140px !important; padding-bottom: 140px !important; }
body.ms-site .ms-pad-cta { padding-top: 120px !important; padding-bottom: 120px !important; }
body.ms-site .ms-pad-bottom { padding-bottom: 140px !important; }
@media (max-width: 1366px) {
	body.ms-site .ms-pad, body.ms-site .ms-pad-cta { padding-top: 100px !important; padding-bottom: 100px !important; }
	body.ms-site .ms-pad-bottom { padding-bottom: 100px !important; }
}
@media (max-width: 1024px) {
	body.ms-site .ms-pad, body.ms-site .ms-pad-cta { padding-top: 80px !important; padding-bottom: 80px !important; }
	body.ms-site .ms-pad-bottom { padding-bottom: 80px !important; }
}
@media (max-width: 767px) {
	body.ms-site .ms-pad, body.ms-site .ms-pad-cta { padding-top: 60px !important; padding-bottom: 60px !important; }
	body.ms-site .ms-pad-bottom { padding-bottom: 60px !important; }
}

/* Split sections: a 400px label column and a 900px content column, pushed
   apart. On laptops the reference switches both to percentages (30% / 65%). */
body.ms-site .ms-split > .row_col_wrap_12 {
	display: grid !important;
	grid-template-columns: 400px minmax(0, 900px);
	justify-content: space-between;
	align-items: start;
}
@media (max-width: 1366px) {
	body.ms-site .ms-split > .row_col_wrap_12 { grid-template-columns: 30% 65%; }
}
@media (max-width: 767px) {
	body.ms-site .ms-split > .row_col_wrap_12 { grid-template-columns: minmax(0, 1fr); }
}

/* Column stacks (a column's elements, top to bottom, with a fixed gap). */
body.ms-site .ms-stack > .vc_column-inner > .wpb_wrapper { display: flex; flex-direction: column; gap: 20px; }
body.ms-site .ms-stack > .vc_column-inner > .wpb_wrapper > * { margin: 0 !important; }

/* ==========================================================================
   5. ATOMS
   ========================================================================== */

/* ---- Headings ---- */
body.ms-site .ms-heading__text {
	font-family: var(--ms-display);
	font-weight: 400;
	color: var(--ms-white);
	line-height: 1;
	margin: 0;
}
body.ms-site .ms-heading--section .ms-heading__text { font-size: 70px; line-height: 1; }
body.ms-site .ms-heading--footer .ms-heading__text  { font-size: 58px; line-height: 1; }
body.ms-site .ms-heading--column .ms-heading__text  { font-size: 40px; line-height: 1.1; }
body.ms-site .ms-heading--card .ms-heading__text    { font-size: 48px; line-height: 1; }
body.ms-site .ms-heading--compact .ms-heading__text { font-size: 70px; line-height: 1; }
@media (max-width: 1366px) {
	body.ms-site .ms-heading--section .ms-heading__text { font-size: 52px; }
	body.ms-site .ms-heading--compact .ms-heading__text { font-size: 52px; }
	body.ms-site .ms-heading--footer .ms-heading__text  { font-size: 42px; }
	body.ms-site .ms-heading--column .ms-heading__text  { font-size: 36px; }
}
@media (max-width: 1024px) {
	body.ms-site .ms-heading--section .ms-heading__text { font-size: 38px; }
	body.ms-site .ms-heading--compact .ms-heading__text { font-size: 38px; }
	body.ms-site .ms-heading--column .ms-heading__text  { font-size: 34px; }
}
@media (max-width: 767px) {
	body.ms-site .ms-heading--section .ms-heading__text { font-size: 58px; }
	body.ms-site .ms-heading--footer .ms-heading__text  { font-size: 48px; }
	body.ms-site .ms-m-center,
	body.ms-site .ms-m-center .ms-heading__text { text-align: center; }
}

/* ---- Eyebrow label: sparkle + 16px text, optional arrow line ---- */
body.ms-site .ms-eyebrow {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
body.ms-site .ms-eyebrow__label {
	display: inline-flex;
	align-items: center;
	font-family: var(--ms-body);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--ms-white);
	white-space: nowrap;
}
body.ms-site .ms-eyebrow__icon {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	margin-right: 3.5px;
}
body.ms-site .ms-eyebrow__text { padding-left: 5px; }
@media (max-width: 1366px) { body.ms-site .ms-eyebrow__label { font-size: 15px; } }
@media (max-width: 767px) {
	body.ms-site .ms-eyebrow { justify-content: center; }
	body.ms-site .ms-eyebrow.has-line .ms-arrow-line { display: none; }
}

/* The long grey arrow (the reference's Arrow-7.svg, 244x8), drawn in CSS so
   it scales with its column like the reference's percentage widths. */
body.ms-site .ms-arrow-line {
	position: relative;
	display: block;
	width: 244px;
	max-width: 100%;
	height: 27px;
	flex: 0 1 244px;
}
body.ms-site .ms-arrow-line::before {
	content: "";
	position: absolute;
	left: 0;
	right: 1px;
	top: 14.2px;
	height: 1px;
	background: var(--ms-line);
}
body.ms-site .ms-arrow-line::after {
	content: "";
	position: absolute;
	right: 1px;
	top: 12.2px;
	width: 5px;
	height: 5px;
	border-top: 1px solid var(--ms-line);
	border-right: 1px solid var(--ms-line);
	transform: rotate(45deg);
}
@media (max-width: 1366px) { body.ms-site .ms-eyebrow .ms-arrow-line { flex-basis: 60%; width: 60%; } }
@media (max-width: 1024px) { body.ms-site .ms-eyebrow .ms-arrow-line { flex-basis: 40%; width: 40%; } }

/* ---- Pills (glass chips) ---- */
body.ms-site .ms-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}
body.ms-site .ms-pill {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	padding: 6px 14px;
	border: 1px solid var(--ms-pill-line);
	border-radius: 30px;
	background: var(--ms-pill-bg);
	box-shadow: var(--ms-pill-glow);
	font-family: var(--ms-body);
	font-size: 14px;
	line-height: 21px;
	font-weight: 500;
	color: var(--ms-white) !important;
	white-space: nowrap;
	text-decoration: none;
}
@media (max-width: 1366px) {
	body.ms-site .ms-pill { padding: 5px 12px; font-size: 12px; line-height: 18px; }
}
@media (max-width: 767px) {
	body.ms-site .ms-pill { font-size: 10px; line-height: 15px; }
}

/* ---- Pill button: gradient pill, white disc with the arrow, dark ripple ---- */
body.ms-site .ms-btn-wrap { display: flex; }
body.ms-site .ms-btn-wrap.ms-align-center { justify-content: center; }
body.ms-site .ms-btn-wrap.ms-align-right { justify-content: flex-end; }
@media (max-width: 767px) { body.ms-site .ms-btn-wrap.ms-align-left-mc { justify-content: center; } }

body.ms-site .ms-btn {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	padding: 8px 8px 8px 32px;
	border: 1px solid var(--ms-orange);
	border-radius: 999px;
	background: var(--ms-grad);
	overflow: hidden;
	font-family: var(--ms-body);
	font-size: 18px;
	font-weight: 500;
	line-height: 18px;
	color: var(--ms-white) !important;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	flex-shrink: 0;
}
body.ms-site .ms-btn::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: var(--sweep-y, 50%);
	left: var(--sweep-x, 50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: radial-gradient(circle at center, #2A2A2A, #120800);
	transform: translate(-50%, -50%) scale(0);
	transition: transform .55s var(--ms-ease-out);
}
body.ms-site .ms-btn.is-hovered::before { transform: translate(-50%, -50%) scale(25); }
body.ms-site .ms-btn__text {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}
body.ms-site .ms-btn__icon {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	min-width: 44px;
	border: 1px solid var(--ms-orange);
	border-radius: 50%;
	background: #fff;
	color: var(--ms-arrow);
	transition: border-radius .38s cubic-bezier(.4, 0, .2, 1), border-color .42s cubic-bezier(.4, 0, .2, 1);
}
body.ms-site .ms-btn__icon .ms-ico {
	width: 14.29px;
	height: 14.29px;
	transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}
body.ms-site .ms-btn.is-hovered .ms-btn__text { transform: translateX(-2px); }
body.ms-site .ms-btn.is-hovered .ms-btn__icon { border: 1.5px solid #fff; border-radius: 999px; }
body.ms-site .ms-btn.is-hovered .ms-btn__icon .ms-ico { transform: rotate(45deg); }
body.ms-site .ms-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- Body copy (WPBakery Text Blocks inside sections) ---- */
body.ms-site .ms-copy,
body.ms-site .ms-copy p {
	font-family: var(--ms-body);
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--ms-white);
	margin: 0;
}

/* ==========================================================================
   6. HEADER + FULL-SCREEN MENU
   ========================================================================== */

body.ms-site .ms-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9990;
	pointer-events: none;
}
body.ms-site.admin-bar .ms-header { top: 32px; }
@media (max-width: 782px) { body.ms-site.admin-bar .ms-header { top: 46px; } }

body.ms-site .ms-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 20px;
	pointer-events: auto;
}
body.ms-site .ms-header__brand {
	display: block;
	box-sizing: content-box;
	width: 235px;
	height: 17px;
	/* A 41px tap area around the 17px name, without moving it. */
	padding: 12px 0;
	margin: -12px 0;
	font-family: var(--ms-display);
	font-size: 26px;
	line-height: 1.1;
	font-weight: 400;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ms-white) !important;
	text-decoration: none !important;
}

/* "Menu" + burger, and "Close" + cross share one control shape. */
body.ms-site .ms-header__toggle,
body.ms-site .ms-menu__close {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 15px;
	width: 150px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
}
body.ms-site .ms-header__label {
	display: block;
	height: 40px;
	font-family: var(--ms-display);
	font-size: 42px;
	line-height: 1.1;
	font-weight: 400;
	color: var(--ms-white);
}
body.ms-site .ms-menu__close .ms-header__label { color: var(--ms-orange-2); }

body.ms-site .ms-burger,
body.ms-site .ms-cross {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	box-sizing: border-box;
	width: 50px;
	height: 46px;
	flex: 0 0 50px;
	padding: 12px;
	border: 1px solid #fff;
	border-radius: 40px;
	background: var(--ms-grad-v);
	overflow: hidden;
}
body.ms-site .ms-burger i {
	position: relative;
	display: block;
	width: 24px;
	height: 2px;
	flex: 0 0 2px;
	background: #fff;
	transition: transform .8s var(--ms-ease-line);
}
body.ms-site .ms-burger i:nth-child(2) { width: 13px; transition-delay: .15s; }
body.ms-site .ms-burger i:nth-child(3) { transition-delay: .3s; }
/* Hover: each line slides out right while its twin slides in from the left. */
body.ms-site .ms-burger i::before {
	content: "";
	position: absolute;
	top: 0;
	right: calc(100% + 20px);
	width: 100%;
	height: 2px;
	background: #fff;
}
body.ms-site .ms-header__toggle:hover .ms-burger i { transform: translateX(calc(100% + 20px)); }

body.ms-site .ms-cross { border-color: var(--ms-orange); }
body.ms-site .ms-cross i {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 36.8px;
	height: 2px;
	margin: -1px 0 0 -18.4px;
	overflow: hidden;
}
body.ms-site .ms-cross i:nth-child(1) { transform: rotate(45deg); }
body.ms-site .ms-cross i:nth-child(2) { transform: rotate(-45deg); }
body.ms-site .ms-cross i::before,
body.ms-site .ms-cross i::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	transition: transform .8s var(--ms-ease-line);
}
body.ms-site .ms-cross i::after { transform: translateX(calc(-100% - 20px)); }
body.ms-site .ms-cross i:nth-child(2)::before,
body.ms-site .ms-cross i:nth-child(2)::after { transition-delay: .15s; }
body.ms-site .ms-menu__close:hover .ms-cross i::before { transform: translateX(calc(100% + 20px)); }
body.ms-site .ms-menu__close:hover .ms-cross i::after { transform: translateX(0); }

@media (max-width: 1366px) {
	body.ms-site .ms-header__toggle, body.ms-site .ms-menu__close { gap: 12px; }
	body.ms-site .ms-header__label { font-size: 35px; height: 39px; }
	body.ms-site .ms-burger { width: 45px; height: 44px; flex-basis: 45px; padding: 10px; }
	body.ms-site .ms-burger i { width: 23px; }
	body.ms-site .ms-burger i:nth-child(2) { width: 12px; }
	body.ms-site .ms-cross { width: 45px; height: 44px; flex-basis: 45px; }
	body.ms-site .ms-cross i { width: 28.3px; margin-left: -14.15px; }
}
@media (max-width: 767px) {
	body.ms-site .ms-header__bar { padding: 20px; }
	body.ms-site .ms-header__brand { width: 214px; }
	body.ms-site .ms-header__toggle, body.ms-site .ms-menu__close { gap: 10px; width: 136px; }
	body.ms-site .ms-header__label { font-size: 30px; height: 33px; }
	body.ms-site .ms-burger { width: 40px; height: 38px; flex-basis: 40px; padding: 9px; gap: 6px; }
	body.ms-site .ms-burger i { width: 20px; }
	body.ms-site .ms-burger i:nth-child(2) { width: 11px; }
	body.ms-site .ms-cross { width: 40px; height: 40px; flex-basis: 40px; }
	body.ms-site .ms-cross i { width: 21.2px; margin-left: -10.6px; }
}

/* ---- The panel ---- */
body.ms-site .ms-menu {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	background: #fff;
	clip-path: circle(0% at 100% 0%);
	pointer-events: auto;
	will-change: clip-path;
}
body.ms-site .ms-menu[hidden] { display: none; }
body.ms-site.ms-menu-open .ms-menu {
	clip-path: circle(150% at 100% 0%);
	transition: clip-path 1s var(--ms-ease-menu);
}
body.ms-site.ms-menu-closing .ms-menu {
	clip-path: circle(0% at 100% 0%);
	transition: clip-path 1s var(--ms-ease-menu);
}
body.ms-site.admin-bar .ms-menu { top: 32px; }

body.ms-site .ms-menu__media {
	position: relative;
	width: 38%;
	flex: 0 0 38%;
	overflow: hidden;
}
body.ms-site .ms-menu__img {
	position: absolute;
	inset: 0;
	display: block;
	clip-path: inset(100% 0 0 0);
	transition: clip-path .6s;
}
body.ms-site .ms-menu__img img {
	display: block;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: center center;
	transform: scale(1.2);
	transition: transform 1.2s;
}
body.ms-site .ms-menu__img.is-showing { clip-path: inset(0 0 0 0); }
body.ms-site .ms-menu__img.is-showing img { transform: scale(1); }
/* "Whole" photos (menu item "Photo fit", see inc/ms-header.php): fitted to the
   panel's width and centred, top and bottom edges fading into a blurred,
   darkened copy of the image that fills the panel. */
body.ms-site .ms-menu__img--whole { display: flex; align-items: center; background: #0b0b0b; }
body.ms-site .ms-menu__img--whole::before {
	content: "";
	position: absolute;
	inset: -60px;
	background: var(--ms-menu-photo) center / cover no-repeat;
	filter: blur(30px) brightness(.45);
}
body.ms-site .ms-menu__img--whole img {
	position: relative;
	height: auto;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
}

body.ms-site .ms-menu__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 62%;
	height: 100vh;
	box-sizing: border-box;
	padding: 0 50px;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
body.ms-site .ms-menu__content::-webkit-scrollbar { display: none; }
body.ms-site .ms-menu__inner {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 15px;
	box-sizing: border-box;
}
body.ms-site .ms-menu__label {
	font-family: var(--ms-body);
	font-size: 18px;
	line-height: 1.1;
	font-weight: 500;
	color: var(--ms-grey);
}

/* Entrance: everything in the panel rises 40px, one step (0.1s) apart. */
body.ms-site .ms-menu__stagger {
	opacity: 0;
	transform: translateY(40px);
}
body.ms-site.ms-menu-open .ms-menu__stagger {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 1s ease calc(var(--d, 0) * .1s), transform 1s ease calc(var(--d, 0) * .1s);
}

body.ms-site .ms-menu__links {
	display: flex;
	flex-direction: column;
	margin: 0 0 35px !important;
}
body.ms-site .ms-menu__item { position: relative; }
body.ms-site .ms-menu__item + .ms-menu__item { margin-top: 5px; }
body.ms-site .ms-menu__item:not(:last-child) { padding-bottom: 5px; }
body.ms-site .ms-menu__item a {
	position: relative;
	display: flex;
	align-items: center;
	font-family: var(--ms-display);
	font-size: 90px;
	line-height: 1;
	font-weight: 500;
	color: var(--ms-bg) !important;
	text-decoration: none !important;
}
body.ms-site .ms-menu__icon {
	position: absolute;
	left: 0;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -20px;
	padding-right: 5px;
	color: var(--ms-orange);
	clip-path: inset(0 120% 120% 0);
	transition: clip-path .5s var(--ms-ease-line);
}
body.ms-site .ms-menu__icon .ms-ico {
	width: 30px;
	height: 30px;
	transform: translate(-120%, 120%);
	transition: transform .5s var(--ms-ease-line);
}
body.ms-site .ms-menu__text {
	position: relative;
	transition: transform .5s var(--ms-ease-line);
}
body.ms-site .ms-menu__item:not(.is-current):hover .ms-menu__text { transform: translateX(45px); }
body.ms-site .ms-menu__item:not(.is-current):hover .ms-menu__icon { clip-path: inset(0 0 0 0); }
body.ms-site .ms-menu__item:not(.is-current):hover .ms-menu__icon .ms-ico { transform: translate(0, 0); }
body.ms-site .ms-menu__item.is-current .ms-menu__text::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1px;
	background: currentColor;
}

body.ms-site .ms-menu__contact {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 35px;
}
body.ms-site .ms-menu__contact a {
	position: relative;
	font-family: var(--ms-display);
	color: var(--ms-bg) !important;
	text-decoration: none !important;
}
body.ms-site .ms-menu__contact-1 { font-size: 31px; line-height: 1.1; font-weight: 500; }
body.ms-site .ms-menu__contact-2 { font-size: 28px; line-height: 1.1; font-weight: 600; }
body.ms-site .ms-menu__contact-sep {
	display: block;
	width: 2px;
	height: 25px;
	background: var(--ms-grey);
}
body.ms-site .ms-underline::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .8s var(--ms-ease-line);
}
body.ms-site .ms-underline:hover::before { transform: scaleX(1); transform-origin: left; }

body.ms-site .ms-menu__foot {
	display: flex;
	gap: 20px;
	margin-bottom: 35px;
}
body.ms-site .ms-menu__avail {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px 8px;
	width: 55%;
}
body.ms-site .ms-menu__bell { display: block; width: 20px; height: 20px; }
body.ms-site .ms-menu__bell img { display: block; width: 40px; height: 40px; max-width: none; margin: -10px; }
body.ms-site .ms-menu__avail-text {
	font-family: var(--ms-body);
	font-size: 18px;
	line-height: 1.1;
	font-weight: 500;
	color: var(--ms-grey);
}
body.ms-site .ms-menu__cta { width: 100%; }
body.ms-site .ms-menu__social {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 20px;
	width: 45%;
}
body.ms-site .ms-menu__social ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -12.5px !important;
}
body.ms-site .ms-menu__social li { margin: 0 12.5px; }
body.ms-site .ms-menu__social a {
	display: flex;
	align-items: center;
	font-family: var(--ms-display);
	font-size: 32px;
	line-height: 1;
	font-weight: 500;
	color: var(--ms-bg) !important;
	text-decoration: none !important;
	transition: color .3s;
}
body.ms-site .ms-menu__social a:hover { color: var(--ms-orange) !important; }
body.ms-site .ms-menu__social .ms-ico {
	width: 16px;
	height: 16px;
	margin: -4px 4px 0 0;
	color: var(--ms-orange);
}
body.ms-site .ms-menu__social span { padding-left: 5px; }

body.ms-site .ms-menu__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
}

@media (min-width: 768px) and (max-width: 1400px) {
	body.ms-site .ms-menu__inner { width: 590px; max-width: 100%; }
	body.ms-site .ms-menu__item + .ms-menu__item { margin-top: 10px; }
	body.ms-site .ms-menu__item:not(:last-child) { padding-bottom: 10px; }
}
@media (max-width: 1366px) {
	body.ms-site .ms-menu__content { padding: 30px; }
	body.ms-site .ms-menu__inner { gap: 10px; padding: 10px; }
	body.ms-site .ms-menu__label:first-child { font-size: 15px; }
	body.ms-site .ms-menu__label { font-size: 16px; }
	body.ms-site .ms-menu__item a { font-size: 60px; }
	body.ms-site .ms-menu__icon { margin-top: -15px; }
	body.ms-site .ms-menu__icon .ms-ico { width: 22px; height: 22px; }
	body.ms-site .ms-menu__contact-1 { font-size: 27px; }
	body.ms-site .ms-menu__contact-2 { font-size: 25px; }
	body.ms-site .ms-menu__bell { width: 15px; height: 15px; }
	body.ms-site .ms-menu__bell img { width: 35px; height: 35px; }
	body.ms-site .ms-menu__avail-text { font-size: 16px; }
	body.ms-site .ms-menu__social ul { margin: 0 -5px !important; }
	body.ms-site .ms-menu__social li { margin: 0 5px; }
	body.ms-site .ms-menu__social a { font-size: 25px; }
	body.ms-site .ms-menu__social .ms-ico { width: 15px; height: 15px; }
	body.ms-site .ms-menu__close { top: 20px; right: 20px; }
}
@media (max-width: 1024px) {
	body.ms-site .ms-menu__media { width: 40%; flex-basis: 40%; }
	body.ms-site .ms-menu__label:first-child { font-size: 14px; }
	body.ms-site .ms-menu__links { margin-bottom: 20px !important; }
	body.ms-site .ms-menu__item a { font-size: 50px; }
	body.ms-site .ms-menu__icon { margin-top: -15px; }
	body.ms-site .ms-menu__icon .ms-ico { width: 20px; height: 20px; }
	body.ms-site .ms-menu__contact { margin-bottom: 20px; }
	body.ms-site .ms-menu__contact-1 { font-size: 26px; }
	body.ms-site .ms-menu__contact-2 { font-size: 24px; }
	body.ms-site .ms-menu__foot { flex-direction: column; gap: 30px; }
	body.ms-site .ms-menu__avail,
	body.ms-site .ms-menu__social { width: 100%; }
	body.ms-site .ms-menu__social { order: -1; }
	body.ms-site .ms-menu__social a { font-size: 26px; }
	body.ms-site .ms-menu__social .ms-ico { width: 16px; height: 16px; }
}
@media (max-width: 767px) {
	body.ms-site .ms-menu { flex-wrap: wrap; overflow-y: auto; }
	body.ms-site .ms-menu__media { display: none; }
	body.ms-site .ms-menu__content {
		flex: 1 1 100%;
		justify-content: flex-start;
		height: auto;
		min-height: 100%;
		margin-top: 20px;
		padding: 16px;
	}
	body.ms-site .ms-menu__inner { padding: 0; width: 100%; }
	body.ms-site .ms-menu__label:first-child { margin-bottom: 10px; }
	body.ms-site .ms-menu__item + .ms-menu__item { margin-top: 0; }
	body.ms-site .ms-menu__item:not(:last-child) { padding-bottom: 0; }
	body.ms-site .ms-menu__item:last-child { padding-bottom: 10px; }
	body.ms-site .ms-menu__item a {
		justify-content: space-between;
		font-size: 42px;
		line-height: 1.2;
	}
	body.ms-site .ms-menu__icon {
		position: static;
		order: 1;
		margin: 0;
		clip-path: none;
	}
	body.ms-site .ms-menu__icon .ms-ico { width: 15px; height: 15px; transform: none; }
	body.ms-site .ms-menu__item .ms-menu__text,
	body.ms-site .ms-menu__item:hover .ms-menu__text { transform: none !important; }
	body.ms-site .ms-menu__item.is-current .ms-menu__text::before { display: none; }
	/* Phone rows: a faint rule under each link, and a darker one that wipes in
	   on tap/hover. */
	body.ms-site .ms-menu__item::before,
	body.ms-site .ms-menu__item::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background: #2b3530;
		transform-origin: right;
		transition: transform .8s var(--ms-ease-line);
	}
	body.ms-site .ms-menu__item::before { opacity: .5; }
	body.ms-site .ms-menu__item::after { transform: scaleX(0); }
	body.ms-site .ms-menu__item:hover::after { transform: scaleX(1); transform-origin: left; }
	body.ms-site .ms-menu__links { margin-bottom: 20px !important; }
	body.ms-site .ms-menu__contact { flex-direction: column; align-items: flex-start; gap: 5px; }
	body.ms-site .ms-menu__contact-1 { font-size: 30px; }
	body.ms-site .ms-menu__contact-2 { font-size: 25px; }
	body.ms-site .ms-menu__contact-sep,
	body.ms-site .ms-menu__contact-2 { display: none; }
	body.ms-site .ms-menu__foot { margin-bottom: 0; }
	body.ms-site .ms-menu__social { gap: 10px; }
	body.ms-site .ms-menu__close { right: 20px; width: 136px; }
}

/* ==========================================================================
   7. HERO
   ========================================================================== */

body.ms-site .ms-hero-row .wpb_column,
body.ms-site .ms-hero-row .vc_column-inner,
body.ms-site .ms-hero-row .wpb_wrapper { position: static; }

body.ms-site .ms-hero {
	/* --nf drives the surname's size and position from the name's size, exactly
	   as the reference does, so the pair stays locked together. */
	--nf: 485px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	box-sizing: border-box;
	min-height: 950px;
	padding: 0;
	overflow: hidden;
	/* The background photo is the ROW's (Salient row > Background > Image, with
	   a separate phone image), so it stays editable like any row background. */
	background: transparent;
}
body.ms-site .ms-hero__title {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 1360px;
	max-width: 100%;
	margin: 200px 0 51px;
}
/* The greeting sits on an 18/27 text line (like the reference's heading
   widget), which is what spaces it from the name once its negative margin
   kicks in on phones. */
body.ms-site .ms-hero__hello-line { font-family: var(--ms-body); font-size: 18px; line-height: 27px; }
body.ms-site .ms-hero__hello {
	display: inline-block;
	vertical-align: baseline;
	margin: 0 !important;
	font-family: var(--ms-display);
	font-size: 50px;
	line-height: 1.1;
	font-weight: 400;
	color: var(--ms-white);
}
/* The h1 keeps a normal 18/27 text line around the name box, as the
   reference's heading widget does: the box sits on that line's baseline, and
   the strut is what sets the title block's height at laptop and tablet sizes. */
body.ms-site .ms-hero__h1 {
	display: block;
	margin: 0 !important;
	text-align: center;
	font-family: var(--ms-body);
	font-size: 18px;
	line-height: 27px;
}
body.ms-site .ms-hero__name-box {
	position: relative;
	display: inline-block;
	margin: -60px -30px -120px;
}
body.ms-site .ms-hero__name {
	display: inline-block;
	font-family: var(--ms-display);
	font-size: var(--nf);
	line-height: 1.1;
	font-weight: 400;
	color: var(--ms-white);
	white-space: nowrap;
}
/* The surname sits in the gap right under "…mad": its baseline 0.27 of the
   name's size below the name's baseline (Shoaib's placement, 2026-09-26; the
   reference had it 0.19 lower, over the glass card). */
body.ms-site .ms-hero__surname {
	position: absolute;
	right: 4%;
	top: calc(var(--nf) * .884);
	z-index: 5;
	font-family: var(--ms-display);
	font-size: calc(var(--nf) * .268);
	line-height: 1;
	font-weight: 400;
	color: var(--ms-white);
	white-space: nowrap;
	pointer-events: none; /* its line box dips a few px into the glass card */
}

body.ms-site .ms-hero__bottom {
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 1360px;
	max-width: 100%;
}
body.ms-site .ms-hero__intro {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	width: 400px;
}
body.ms-site .ms-hero__badge {
	display: flex;
	align-items: center;
	margin: 0 !important;
	font-family: var(--ms-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--ms-white);
}
body.ms-site .ms-hero__badge .ms-ico { width: 14px; height: 14px; margin-right: 3.5px; }
body.ms-site .ms-hero__badge span { padding-left: 5px; }
body.ms-site .ms-hero__headline {
	width: 75%;
	margin: 0 !important;
	font-family: var(--ms-display);
	font-size: 70px;
	line-height: 1;
	font-weight: 400;
	color: var(--ms-white);
}
body.ms-site .ms-hero__card {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px 12px;
	box-sizing: border-box;
	width: 333px;
	padding: 25px;
	border-radius: 20px;
	background: rgba(15, 15, 15, .44) url('../img/glass-texture.avif') bottom center / cover no-repeat;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: inset -2px 2px 0 0 rgba(255, 255, 255, .10), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
body.ms-site .ms-hero__strip { width: 100%; line-height: 0; }
body.ms-site .ms-hero .ms-hero__strip img { display: inline-block; width: 235px; height: auto; }
body.ms-site .ms-hero__card-text {
	width: 100%;
	margin: 0 !important;
	font-family: var(--ms-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ms-white);
}
body.ms-site .ms-hero__card .ms-pill { border-color: rgba(255, 255, 255, .24); }

/* Bottom fade that sinks the photo into the page. */
body.ms-site .ms-hero__fade {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	width: 100%;
	aspect-ratio: 1920 / 385;
	background: url('../img/hero-fade.avif') center bottom / 100% 100% no-repeat;
	pointer-events: none;
}
body.ms-site .ms-hero__photo {
	position: absolute;
	top: 20px;
	left: 0;
	z-index: 1;
	width: 100%;
	text-align: center;
	pointer-events: none;
}
body.ms-site .ms-hero__photo-in { line-height: 0; }
body.ms-site .ms-hero img.ms-hero__photo-img {
	display: inline-block;
	width: 756px;
	max-width: 100%;
	height: auto;
	margin-top: min(95px, 12vw);
}

@media (max-width: 1366px) {
	body.ms-site .ms-hero { --nf: 355px; min-height: 800px; padding: 0 70px; }
	/* The reference drops the title's 51px bottom margin here, which lifts the
	   glass card into the name: with the surname moved up under "…mad" it would
	   still sit on the card. The desktop margin keeps the gap for it. */
	body.ms-site .ms-hero__title { width: 1000px; margin: 0 0 51px; }
	body.ms-site .ms-hero__bottom { width: 1000px; }
	body.ms-site .ms-hero__intro { width: 300px; }
	body.ms-site .ms-hero__headline { font-size: 52px; }
	body.ms-site .ms-hero__card { padding: 20px; }
	body.ms-site .ms-hero .ms-hero__strip img { width: 80%; }
	body.ms-site .ms-hero__card-text { font-size: 14px; }
	body.ms-site .ms-hero__photo { top: 65px; }
	body.ms-site .ms-hero img.ms-hero__photo-img { width: 50%; }
}
@media (max-width: 1024px) {
	body.ms-site .ms-hero { --nf: 233px; min-height: 667px; padding: 240px 50px 0; }
	body.ms-site .ms-hero__hello { font-size: 36px; }
	/* The reference keeps the title block 1000px wide here, wider than the
	   padded hero, so "Hi, I am" sits ~5px from the screen edge. Same result,
	   but capped so it never runs off a narrower tablet. */
	body.ms-site .ms-hero__title { width: min(1000px, calc(100% + 90px)); max-width: none; margin-bottom: 0; }
	body.ms-site .ms-hero__bottom { width: 650px; margin-top: 40px; }
	body.ms-site .ms-hero__intro { width: 230px; }
	body.ms-site .ms-hero__headline { width: 100%; }
	body.ms-site .ms-hero__card { width: 290px; }
	body.ms-site .ms-hero__photo { top: 80px; }
	body.ms-site .ms-hero img.ms-hero__photo-img { width: 65%; }
}
@media (max-width: 767px) {
	body.ms-site .ms-hero {
		--nf: 28vw;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 20px;
		padding: 250px 16px 0;
	}
	body.ms-site .ms-hero__title { gap: 10px; width: 343px; }
	body.ms-site .ms-hero__hello { font-size: 34px; margin-bottom: -15px !important; }
	body.ms-site .ms-hero__name-box { margin: -12px 0 -30px; }
	body.ms-site .ms-hero__bottom { flex-direction: column; width: 100%; margin-top: 50px; }
	body.ms-site .ms-hero__intro { justify-content: center; width: 100%; }
	body.ms-site .ms-hero__intro .ms-hero__strip { text-align: center; }
	body.ms-site .ms-hero .ms-hero__intro .ms-hero__strip img { width: 190px; }
	body.ms-site .ms-hero__badge { width: 100%; justify-content: center; }
	body.ms-site .ms-hero__headline { width: 100%; font-size: 58px; text-align: center; }
	body.ms-site .ms-hero__fade {
		bottom: 90px;
		aspect-ratio: 375 / 159;
		background-image: url('../img/hero-fade-mobile.webp');
	}
	body.ms-site .ms-hero__photo { top: 100px; }
	body.ms-site .ms-hero__photo-in { margin: -60px -30px -40px; }
	body.ms-site .ms-hero img.ms-hero__photo-img { width: 100%; max-width: none; }
}

/* ==========================================================================
   8. MARQUEES
   Track = two identical groups; moving the track by one group width loops it
   seamlessly. ms-site.js sets the duration from the design's pixel speed.
   ========================================================================== */

body.ms-site .ms-marquee,
body.ms-site .ms-logos,
body.ms-site .ms-pmq__strip {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	overflow: hidden; /* Safari before 16 has no "clip" */
	overflow: clip;
	user-select: none;
}
body.ms-site .ms-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--ms-gap, 30px);
	width: max-content;
	animation: ms-marquee var(--ms-marquee-dur, 30s) linear infinite;
	will-change: transform;
}
body.ms-site .is-reverse .ms-marquee__track { animation-direction: reverse; }
body.ms-site .ms-marquee__group {
	display: flex;
	align-items: center;
	gap: var(--ms-gap, 30px);
	flex: 0 0 auto;
}
@keyframes ms-marquee {
	to { transform: translateX(calc(-50% - var(--ms-gap, 30px) / 2)); }
}
body.ms-site .ms-marquee__item {
	display: flex;
	align-items: center;
	gap: 30px;
	flex: 0 0 auto;
}
body.ms-site .ms-marquee__text {
	margin: 0 !important;
	font-family: var(--ms-display);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ms-white);
}
body.ms-site .ms-marquee__icon { flex-shrink: 0; align-self: center; }

/* Stats strip */
body.ms-site .ms-marquee--stats { --ms-gap: 30px; margin: -15px 0 -30px; }
body.ms-site .ms-marquee--stats .ms-marquee__text { font-size: 100px; line-height: 1.2; font-weight: 300; }
body.ms-site .ms-marquee--stats .ms-marquee__icon { width: 40px; height: 40px; transform: translateY(-7px); }
@media (max-width: 1366px) {
	body.ms-site .ms-marquee--stats .ms-marquee__text { font-size: 80px; }
}
@media (max-width: 1024px) {
	body.ms-site .ms-marquee--stats { margin: 0 0 -10px; }
	body.ms-site .ms-marquee--stats .ms-marquee__text { font-size: 50px; }
	body.ms-site .ms-marquee--stats .ms-marquee__item { gap: 15px; }
	body.ms-site .ms-marquee--stats .ms-marquee__icon { width: 30px; height: 30px; transform: translate(-5px, -3px); }
}
@media (max-width: 767px) {
	body.ms-site .ms-marquee--stats { margin: -4px 0 -10px; }
	body.ms-site .ms-marquee--stats .ms-marquee__text { font-size: 35px; }
	body.ms-site .ms-marquee--stats .ms-marquee__item { gap: 0; }
	body.ms-site .ms-marquee--stats .ms-marquee__icon { width: 25px; height: 25px; transform: translate(-15px, -2px); }
	body.ms-site .ms-marquee--stats .ms-marquee__track,
	body.ms-site .ms-marquee--stats .ms-marquee__group { --ms-gap: 30px; }
}

/* "Let's work together" */
body.ms-site .ms-marquee--cta { --ms-gap: 30px; margin: -25px 0 -70px; }
body.ms-site .ms-marquee--cta .ms-marquee__text { font-size: 300px; line-height: 1.2; font-weight: 600; }
body.ms-site .ms-marquee--cta .ms-marquee__icon { width: 160px; height: 160px; transform: translateY(-20px); }
@media (max-width: 1366px) {
	body.ms-site .ms-marquee--cta { margin: -28px 0 -70px; }
	body.ms-site .ms-marquee--cta .ms-marquee__text { font-size: 250px; }
}
@media (max-width: 1024px) {
	body.ms-site .ms-marquee--cta { margin: -15px 0 -40px; }
	body.ms-site .ms-marquee--cta .ms-marquee__text { font-size: 170px; }
	body.ms-site .ms-marquee--cta .ms-marquee__icon { width: 80px; height: 80px; transform: translateY(-15px); }
}
@media (max-width: 767px) {
	body.ms-site .ms-marquee--cta { margin: -10px 0 -30px; }
	body.ms-site .ms-marquee--cta .ms-marquee__text { font-size: 120px; }
	body.ms-site .ms-marquee--cta .ms-marquee__icon { width: 60px; height: 60px; transform: translateY(-10px); }
}

/* Logos: fitted into 330x58 boxes, faded at both edges into the page colour. */
body.ms-site .ms-logos { --ms-gap: 32px; margin: -15px 0; padding: 16px 0; }
body.ms-site .ms-logos::before,
body.ms-site .ms-logos::after {
	content: "";
	position: absolute;
	top: 0;
	z-index: 1;
	width: 0;
	height: 100%;
	box-shadow: 0 0 30px 50px var(--ms-bg);
	pointer-events: none;
}
body.ms-site .ms-logos::before { left: 0; }
body.ms-site .ms-logos::after { right: 0; }
body.ms-site .ms-logos__item {
	display: flex;
	width: 330px;
	height: 58px;
	margin: 0;
	flex: 0 0 auto;
}
body.ms-site .ms-logos__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: scale-down;
	object-position: center top;
}
@media (max-width: 1024px) { body.ms-site .ms-logos__item { width: 260px; height: 46px; } }
@media (max-width: 767px)  { body.ms-site .ms-logos__item { width: 165px; height: 46px; } }

/* Pill marquee (platforms / services): glass pills, each with its mark on a
   white disc (the footer's contact-icon language), a small spaced label on
   top, soft faded edges, and a pause while hovered. */
body.ms-site .ms-pmq {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	width: 100%;
}
body.ms-site .ms-pmq__label {
	margin: 0 !important;
	font-family: var(--ms-body);
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	text-align: center;
	color: rgba(255, 255, 255, .55);
}
body.ms-site .ms-pmq__strip {
	--ms-gap: 14px;
	padding: 2px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
@media (hover: hover) {
	body.ms-site .ms-pmq__strip:hover .ms-marquee__track { animation-play-state: paused; }
}
body.ms-site .ms-pmq__pill {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 6px 22px 6px 6px;
	border: 1px solid var(--ms-pill-line);
	border-radius: 100px;
	background: var(--ms-pill-bg);
	box-shadow: var(--ms-pill-glow);
	font-family: var(--ms-body);
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: var(--ms-white);
	white-space: nowrap;
	transition: border-color .4s ease, background-color .4s ease;
}
body.ms-site .ms-pmq__pill:hover { border-color: var(--ms-orange); background-color: rgba(237, 122, 54, .08); }
body.ms-site .ms-pmq__pill--text { padding-top: 9px; padding-bottom: 9px; padding-left: 22px; }
body.ms-site .ms-pmq__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 50%;
	background: #fff;
	overflow: hidden;
}
body.ms-site .ms-pmq__icon .ms-ico { width: 18px; height: 18px; }
body.ms-site .ms-pmq__icon--letter {
	font-family: var(--ms-body);
	font-size: 14px;
	line-height: 1;
	font-weight: 700;
	color: var(--ms-orange-2);
}
body.ms-site .ms-pmq__icon--img img { display: block; width: 18px !important; height: 18px !important; object-fit: contain; }
@media (max-width: 1366px) {
	body.ms-site .ms-pmq__pill { gap: 10px; padding-right: 20px; font-size: 15px; }
	body.ms-site .ms-pmq__pill--text { padding-top: 8px; padding-bottom: 8px; padding-left: 20px; }
	body.ms-site .ms-pmq__icon { width: 28px; height: 28px; flex-basis: 28px; }
	body.ms-site .ms-pmq__icon .ms-ico { width: 16px; height: 16px; }
}
@media (max-width: 767px) {
	body.ms-site .ms-pmq { gap: 16px; }
	body.ms-site .ms-pmq__label { font-size: 12px; letter-spacing: .2em; }
	body.ms-site .ms-pmq__strip { --ms-gap: 10px; }
	body.ms-site .ms-pmq__pill { gap: 8px; padding: 5px 16px 5px 5px; font-size: 14px; line-height: 20px; }
	body.ms-site .ms-pmq__pill--text { padding: 8px 16px; }
	body.ms-site .ms-pmq__icon { width: 26px; height: 26px; flex-basis: 26px; }
	body.ms-site .ms-pmq__icon .ms-ico { width: 15px; height: 15px; }
	body.ms-site .ms-pmq__icon--letter { font-size: 13px; }
}

/* ==========================================================================
   9. ABOUT
   ========================================================================== */

body.ms-site .ms-about > .row_col_wrap_12 > .wpb_column:first-child > .vc_column-inner > .wpb_wrapper {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
body.ms-site .ms-scroll-text__p {
	margin: 0 !important;
	font-family: var(--ms-display);
	font-size: 58px;
	line-height: 1;
	font-weight: 400;
	color: rgba(255, 255, 255, .145);
}
body.ms-site .ms-scroll-text__indent { display: inline-block; width: 120px; }
body.ms-site .ms-scroll-text .ms-w { display: inline-block; }
body.ms-site .ms-scroll-text .ms-c { display: inline-block; }
body.ms-site .ms-scroll-text .ms-c.is-lit { color: #fff; }
@media (max-width: 1366px) {
	body.ms-site .ms-scroll-text__p { font-size: 46px; line-height: 52px; }
}
@media (max-width: 1024px) {
	body.ms-site .ms-scroll-text__p { font-size: 35px; line-height: 1.1; }
}
/* On phones the reference swaps to a plain white paragraph (no scroll effect). */
@media (max-width: 767px) {
	body.ms-site .ms-scroll-text__p { font-size: 40px; line-height: 1; text-align: center; color: #fff; }
	body.ms-site .ms-scroll-text .ms-c { color: #fff; }
	body.ms-site .ms-scroll-text__indent { display: none; }
	body.ms-site .ms-about > .row_col_wrap_12 { gap: 20px; }
}

/* ==========================================================================
   10. SELECTED WORK
   Two 656px columns 48px apart; each column stacks its cards 63px apart.
   The right column starts with the section title and ends flush right.
   ========================================================================== */

body.ms-site .ms-works > .row_col_wrap_12 {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 656px));
	justify-content: space-between;
	column-gap: 48px;
	align-items: start;
}
body.ms-site .ms-works .ms-works__col > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	gap: 63px;
	align-items: flex-start;
}
body.ms-site .ms-works .ms-works__col--right > .vc_column-inner > .wpb_wrapper { align-items: flex-end; }
/* The title block and the closing block are Inner Rows (so the client can edit
   each part), laid out as simple stacks. */
body.ms-site .ms-works__head,
body.ms-site .ms-works__outro { width: 567px; max-width: 100%; margin: 0 0 20px !important; }
body.ms-site .ms-works__outro { width: 400px; margin: 0 !important; }
body.ms-site .ms-works__head .wpb_wrapper,
body.ms-site .ms-works__outro .wpb_wrapper { display: flex; flex-direction: column; gap: 20px; }
body.ms-site .ms-works__head .wpb_column,
body.ms-site .ms-works__outro .wpb_column { width: 100% !important; }

body.ms-site .ms-project {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	margin: 0;
}
body.ms-site .ms-project__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 32 / 25;
	border-radius: 16px;
	overflow: hidden;
	transform-style: preserve-3d;
	will-change: transform, opacity;
	transition: box-shadow .4s ease;
	opacity: 0;
	transform: translateY(60px) scale(.96);
}
body.ms-site .ms-project__media.is-revealed {
	opacity: 1;
	transform: translateY(0) scale(1);
	transition: opacity .8s var(--ms-ease-out), transform .8s var(--ms-ease-out), box-shadow .4s ease;
}
body.ms-site .ms-project__media:hover { box-shadow: 0 30px 60px rgba(0, 0, 0, .4), 0 10px 20px rgba(0, 0, 0, .2); }
body.ms-site .ms-project__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center center;
	transform: scale(1.05);
	transform-origin: center center;
	will-change: transform;
}
body.ms-site .ms-project__glare {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: 16px;
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .12) 0%, transparent 65%);
}
body.ms-site .ms-project__media:hover .ms-project__glare { opacity: 1; }
body.ms-site .ms-project__label {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 4;
	display: inline-block;
	padding: 6px 14px;
	border-radius: 20px;
	background: var(--ms-grad);
	font-family: var(--ms-body);
	font-size: 11px;
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0;
	transition: opacity .4s ease, transform .4s ease;
	pointer-events: none;
}
body.ms-site .ms-project__media:hover .ms-project__label { opacity: 1; }
body.ms-site.ms-has-cursor .ms-project__media,
body.ms-site.ms-has-cursor .ms-project__media * { cursor: none !important; }

body.ms-site .ms-project__title {
	width: 100%;
	margin: 10px 0 0 !important;
	font-family: var(--ms-display);
	font-size: 48px;
	line-height: 1;
	font-weight: 400;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.ms-site .ms-project__text {
	width: 100%;
	margin: 0 !important;
	font-family: var(--ms-body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--ms-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 1366px) {
	body.ms-site .ms-works > .row_col_wrap_12 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
	body.ms-site .ms-works .ms-works__col > .vc_column-inner > .wpb_wrapper { gap: 45px; }
	body.ms-site .ms-works__head { width: 420px; margin-bottom: 0 !important; }
	body.ms-site .ms-works__head .wpb_wrapper { gap: 16px; }
	body.ms-site .ms-works__outro { width: 300px; }
	body.ms-site .ms-project__title { margin-top: 5px !important; font-size: 38px; }
	body.ms-site .ms-project__text { font-size: 16px; }
}
@media (max-width: 1024px) {
	body.ms-site .ms-works .ms-works__col > .vc_column-inner > .wpb_wrapper { gap: 40px; }
	body.ms-site .ms-works__head,
	body.ms-site .ms-works__outro { width: 310px; }
	body.ms-site .ms-project__title { font-size: 32px; }
	body.ms-site .ms-project__text { font-size: 15px; }
}
@media (max-width: 767px) {
	/* Phones: one flow in reading order. The title block, then the cards
	   two-across as they read on desktop (left 1, right 1, left 2, right 2 ...),
	   then the outro. The two columns step aside (display: contents) so all
	   their items share one wrapping row. Spacing is the reference's: 21px under
	   the title, 30px between pairs and before the outro, and the first pair
	   inset 4px from the gutters (its column used space-around). */
	body.ms-site .ms-works > .row_col_wrap_12 {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		gap: 21px 5px;
	}
	body.ms-site .ms-works .ms-works__col,
	body.ms-site .ms-works .ms-works__col > .vc_column-inner,
	body.ms-site .ms-works .ms-works__col > .vc_column-inner > .wpb_wrapper { display: contents !important; }
	/* A contents box keeps its pseudo-elements: Salient's column clearfix
	   (.col::after) would join the row as an empty item. */
	body.ms-site .ms-works .ms-works__col::before,
	body.ms-site .ms-works .ms-works__col::after { display: none !important; content: none !important; }
	body.ms-site .ms-works__col--left .ms-project:nth-of-type(1)  { order: 1; }
	body.ms-site .ms-works__col--right .ms-project:nth-of-type(1) { order: 2; }
	body.ms-site .ms-works__col--left .ms-project:nth-of-type(2)  { order: 3; }
	body.ms-site .ms-works__col--right .ms-project:nth-of-type(2) { order: 4; }
	body.ms-site .ms-works__col--left .ms-project:nth-of-type(3)  { order: 5; }
	body.ms-site .ms-works__col--right .ms-project:nth-of-type(3) { order: 6; }
	body.ms-site .ms-works__col--left .ms-project:nth-of-type(4)  { order: 7; }
	body.ms-site .ms-works__col--right .ms-project:nth-of-type(4) { order: 8; }
	body.ms-site .ms-works .ms-project { width: 47%; justify-content: center; align-items: center; margin-top: 9px; }
	body.ms-site .ms-works .ms-project:nth-of-type(1) { position: relative; margin-top: 0; }
	body.ms-site .ms-works__col--left .ms-project:nth-of-type(1)  { left: calc((6% - 5px) / 4); }
	body.ms-site .ms-works__col--right .ms-project:nth-of-type(1) { left: calc((5px - 6%) / 4); }
	body.ms-site .ms-works__head { width: 100%; margin-bottom: 0 !important; }
	body.ms-site .ms-works__head .wpb_wrapper { align-items: center; gap: 10px; }
	body.ms-site .ms-works__outro { order: 20; width: 100%; margin-top: 9px !important; }
	body.ms-site .ms-works__outro .wpb_wrapper { align-items: center; }
	body.ms-site .ms-works__head .ms-heading__text,
	body.ms-site .ms-works__outro .ms-heading__text { text-align: center; }
	body.ms-site .ms-project__title { font-size: 28px; text-align: center; }
	/* Cards are ~170px wide here: the full sentence instead of the design's 2-line cut. */
	body.ms-site .ms-project__text { font-size: 14px; text-align: center; -webkit-line-clamp: 5; }
	body.ms-site .ms-project .ms-tags { justify-content: center; }
}

/* ==========================================================================
   11. SERVICES
   ========================================================================== */

body.ms-site .ms-services > .row_col_wrap_12 {
	display: grid !important;
	grid-template-columns: 400px minmax(0, 900px);
	justify-content: space-between;
	row-gap: 40px;
}
body.ms-site .ms-services .ms-services__list { grid-column: 1 / -1; }
body.ms-site .ms-services__intro > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 20px;
}
body.ms-site .ms-services__intro .ms-copy { text-align: right; width: 100%; }
/* This one text block keeps its paragraph margin in the reference (the others
   cancel it), which is what sets the button 14px lower. */
body.ms-site .ms-services__intro .ms-copy p { margin-bottom: 14.4px !important; }

body.ms-site .ms-service {
	display: flex;
	justify-content: space-between;
	min-height: 305px;
	box-sizing: border-box;
	padding-top: 50px;
	background: var(--ms-bg);
	position: relative;
}
body.ms-site .ms-service + .ms-service { margin-top: 2px; }
body.ms-site.ms-has-cursor .ms-service,
body.ms-site.ms-has-cursor .ms-service * { cursor: none !important; }
body.ms-site .ms-service__aside {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: stretch;
	gap: 20px;
	width: 400px;
}
body.ms-site .ms-service__meta { display: flex; align-items: flex-start; gap: 20px; width: 100%; }
body.ms-site .ms-service__num {
	font-family: var(--ms-body);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: #fff;
}
body.ms-site .ms-service__img {
	width: 100%;
	max-width: 400px;
	line-height: 0;
	opacity: 0;
	transition: opacity .4s ease;
	will-change: transform, opacity;
	pointer-events: none;
}
body.ms-site .ms-service .ms-service__img img { display: block; width: 100%; height: auto; }
body.ms-site .ms-service:hover .ms-service__img { opacity: 1; }

body.ms-site .ms-service__body {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	/* No align-content: a row shorter than its 305px minimum spreads the spare
	   height across its lines, exactly as the reference does. */
	gap: 15px;
	width: 900px;
}
/* Title on an 18/27 text line, like the reference's heading widget: on
   phones that line, not the title, sets the row height. */
body.ms-site .ms-service__title-line { font-family: var(--ms-body); font-size: 18px; line-height: 27px; }
/* One line per title, one size for all titles: the size is the largest at
   which the LONGEST title still fits beside the round arrow (body width - 15px
   gap - arrow), capped at the reference's size for each breakpoint.
   --ms-svc-ratio is that title's width per 1px of font size; ms-site.js
   measures it from the real titles, so edited titles keep fitting. The
   fallback is the measured value for the titles as built. Tablets and phones
   size from the list's width (container units, cqi). */
body.ms-site .ms-services__list > .vc_column-inner { container-type: inline-size; }
body.ms-site .ms-service__title {
	display: inline-block;
	vertical-align: baseline;
	margin: 0 0 -12px !important;
	font-family: var(--ms-display);
	font-size: min(160px, calc(814px / var(--ms-svc-ratio, 6.5)));
	line-height: 1;
	font-weight: 400;
	color: #fff;
	white-space: nowrap;
}
body.ms-site .ms-service__follow {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 71px;
	height: 71px;
	margin-bottom: -9px;
	border-radius: 50%;
	background: var(--ms-grad);
	color: #fff !important;
	will-change: transform;
	transition: opacity .3s ease;
}
body.ms-site .ms-service__follow .ms-ico { width: 21px; height: 21px; }
body.ms-site.ms-any-service-hovered .ms-service__follow { opacity: 0; pointer-events: none; }
body.ms-site.ms-any-service-hovered .ms-service.is-hovered .ms-service__follow { opacity: 1; pointer-events: auto; }
body.ms-site .ms-service__text {
	width: 100%;
	margin: 0 !important;
	font-family: var(--ms-body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--ms-text);
}
body.ms-site .ms-service__tags { width: 100%; margin-top: 15px !important; }
/* The reference keeps a service's pills on one line and lets a long pill wrap
   its own text instead. */
body.ms-site .ms-service__tags { flex-wrap: nowrap; }
body.ms-site .ms-service__tags .ms-pill { white-space: normal; flex: 0 1 auto; min-width: 0; }
body.ms-site .ms-service__body::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	margin-top: 35px;
	background: var(--ms-line);
}
body.ms-site .ms-services__list .wpb_wrapper > .ms-service:last-child .ms-service__body::after { display: none; }

@media (max-width: 1366px) {
	body.ms-site .ms-services > .row_col_wrap_12 { grid-template-columns: 30% 30%; }
	body.ms-site .ms-service__aside { width: 30%; }
	body.ms-site .ms-service__aside .ms-arrow-line { width: 70%; flex-basis: 70%; }
	body.ms-site .ms-service__img { max-width: 300px; }
	body.ms-site .ms-service__body { width: 65%; }
	body.ms-site .ms-service__title { font-size: 75px; }
	@supports (width: 1cqi) {
		body.ms-site .ms-service__title { font-size: min(110px, calc((65cqi - 86px) / var(--ms-svc-ratio, 6.5))); }
	}
	body.ms-site .ms-service__text { font-size: 16px; }
	body.ms-site .ms-service__tags { gap: 8px; margin-top: 10px !important; }
	body.ms-site .ms-service__body::after { margin-top: 10px; }
}
@media (max-width: 1024px) {
	body.ms-site .ms-services > .row_col_wrap_12 { grid-template-columns: 30% 40%; }
	body.ms-site .ms-services__head > .vc_column-inner > .wpb_wrapper { gap: 16px; }
	body.ms-site .ms-service__title { font-size: 56px; }
	@supports (width: 1cqi) {
		body.ms-site .ms-service__title { font-size: min(72px, calc((65cqi - 70px) / var(--ms-svc-ratio, 6.5))); }
	}
	body.ms-site .ms-service__follow { width: 55px; height: 55px; }
	body.ms-site .ms-service__follow .ms-ico { width: 16px; height: 16px; }
	body.ms-site .ms-service__text { font-size: 15px; }
	body.ms-site .ms-service__tags { gap: 7px; }
}
@media (max-width: 767px) {
	body.ms-site .ms-services > .row_col_wrap_12 { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
	body.ms-site .ms-services__head > .vc_column-inner > .wpb_wrapper { align-items: stretch; gap: 10px; }
	body.ms-site .ms-services__intro > .vc_column-inner > .wpb_wrapper { align-items: center; gap: 16px; }
	body.ms-site .ms-services__intro .ms-copy { text-align: center; }
	body.ms-site .ms-services__list .wpb_wrapper { display: flex; flex-direction: column; gap: 30px; }
	body.ms-site .ms-service { min-height: 0; padding-top: 0; }
	body.ms-site .ms-service + .ms-service { margin-top: 0; }
	body.ms-site .ms-service__aside { display: none; }
	body.ms-site .ms-service__body { width: 100%; }
	body.ms-site .ms-service__body { align-content: flex-start; }
	body.ms-site .ms-service__title { font-size: 44px; }
	@supports (width: 1cqi) {
		body.ms-site .ms-service__title { font-size: min(48px, calc((100cqi - 60px) / var(--ms-svc-ratio, 6.5))); }
	}
	body.ms-site .ms-service__follow { width: 45px; height: 45px; }
	body.ms-site .ms-service__follow .ms-ico { width: 13px; height: 13px; }
	body.ms-site .ms-service__text { font-size: 14px; }
	body.ms-site .ms-service__tags { gap: 6px; flex-wrap: wrap; margin-top: 0 !important; }
	body.ms-site .ms-service__tags .ms-pill { white-space: nowrap; }
	body.ms-site .ms-service__body::after { margin-top: 0; }
}

/* ==========================================================================
   12. TESTIMONIALS
   The slider bleeds past the right edge of the page (460px), exactly like the
   reference; the arrows sit under the title in the left column.
   ========================================================================== */

body.ms-site .ms-testimonials { overflow: hidden; }
body.ms-site .ms-testimonials > .row_col_wrap_12 { column-gap: 60px; }
body.ms-site .ms-testimonials .ms-reviews-col { position: relative; }
body.ms-site .ms-reviews { position: relative; margin: -10px -460px -10px -10px; }
body.ms-site .ms-reviews__viewport { overflow: hidden; }
body.ms-site .ms-reviews__track {
	display: flex;
	align-items: stretch;
	will-change: transform;
}
body.ms-site .ms-reviews__slide {
	display: flex;
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 10px;
}
body.ms-site .ms-review {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	box-sizing: border-box;
	width: 440px;
	min-height: 400px;
	margin: 0;
	padding: 35px;
	border: 1px solid var(--ms-line);
	border-radius: 20px;
	/* The reference's orange glow (Group-2-1.avif, 440x233): pinned to the
	   card's bottom-left, full card width, under the text. */
	background: var(--ms-bg) url('../img/card-glow.avif') left bottom / 100% auto no-repeat;
	overflow: hidden;
}
body.ms-site .ms-review__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
body.ms-site .ms-review__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.ms-site .ms-review__name {
	margin: 0 0 -7px !important;
	font-family: var(--ms-display);
	font-size: 36px;
	line-height: 1.1;
	font-weight: 400;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body.ms-site .ms-flag { display: block; width: 32px; height: 32px; flex: 0 0 32px; clip-path: circle(50% at 50% 50%); }
body.ms-site .ms-review__avatar {
	display: block;
	width: 50px !important;
	height: 50px !important;
	flex: 0 0 50px;
	border-radius: 50%;
	object-fit: cover;
}
body.ms-site .ms-review__avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ms-grad);
	font-family: var(--ms-body);
	font-size: 18px;
	font-weight: 600;
	color: #fff;
}
body.ms-site .ms-review__score { display: flex; align-items: flex-end; gap: 10px; }
body.ms-site .ms-review__num {
	display: block;
	margin: -10px 0 -9px -5px;
	font-family: var(--ms-body);
	font-size: 80px;
	line-height: 1.1;
	font-weight: 600;
	color: #fff;
}
body.ms-site .ms-review__stars { display: flex; gap: 2px; padding-bottom: 2px; }
body.ms-site .ms-review__star { position: relative; display: block; width: 19px; height: 18px; }
body.ms-site .ms-review__star .ms-ico { position: absolute; inset: 0; width: 100%; height: 100%; }
body.ms-site .ms-review__star .ms-ico:first-child path { fill: rgba(255, 255, 255, .15); }
body.ms-site .ms-review__star .ms-ico:last-child { clip-path: inset(0 calc(100% - var(--fill, 100%)) 0 0); }
body.ms-site .ms-review__quote { margin: 0; padding: 0; border: 0; }
/* Salient's Material skin draws a 4px accent bar before every blockquote. */
body.ms-site .ms-review__quote::before,
body.ms-site .ms-review__quote::after { content: none !important; display: none !important; }
body.ms-site .ms-review__quote p {
	margin: 0 !important;
	font-family: var(--ms-body);
	font-size: 24px;
	line-height: 26.4px;
	font-weight: 400;
	color: #fff;
}

body.ms-site .ms-reviews__nav { position: absolute; left: -450px; bottom: 60px; display: flex; gap: 10px; z-index: 5; }
body.ms-site .ms-reviews__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 100px !important;
	background: var(--ms-grad) !important;
	color: #fff;
	cursor: pointer;
	transition: background .3s;
}
body.ms-site .ms-reviews__arrow:hover { background: var(--ms-orange) !important; }
body.ms-site .ms-reviews__arrow .ms-ico { width: 9px; height: 15px; }

@media (max-width: 1366px) {
	/* Reference: 30% + 65% + a 60px gap overflow the 1000px row and flex shrinks
	   both columns in proportion; fr tracks reproduce that exactly. */
	body.ms-site .ms-testimonials > .row_col_wrap_12 { grid-template-columns: 30fr 65fr; column-gap: 60px; }
	body.ms-site .ms-review { width: 315px; min-height: 400px; padding: 28px; border-radius: 18px; }
	body.ms-site .ms-review__name { font-size: 34px; }
	body.ms-site .ms-flag { width: 25px; height: 25px; flex-basis: 25px; }
	body.ms-site .ms-review__num { font-size: 60px; }
	body.ms-site .ms-review__star { width: 17px; height: 16px; }
	body.ms-site .ms-review__quote p { font-size: 18px; }
	body.ms-site .ms-reviews__nav { left: -345px; bottom: 70px; gap: 5px; }
}
@media (max-width: 1024px) {
	/* The reference's 100px top margin outlasts the services' 80px bottom here. */
	body.ms-site .ms-testimonials { padding-top: 20px !important; }
	body.ms-site .ms-testimonials > .row_col_wrap_12 { grid-template-columns: 30% 65%; column-gap: 0; }
	body.ms-site .ms-review { width: 250px; padding: 25px; }
	body.ms-site .ms-review__name { font-size: 32px; }
	body.ms-site .ms-review__avatar { width: 45px !important; height: 45px !important; flex-basis: 45px; }
	body.ms-site .ms-review__num { font-size: 50px; }
	body.ms-site .ms-review__star { width: 15px; height: 14px; }
	body.ms-site .ms-reviews__nav { left: -215px; bottom: 150px; }
}
@media (max-width: 767px) {
	body.ms-site .ms-testimonials { padding-top: 40px !important; }
	body.ms-site .ms-testimonials > .row_col_wrap_12 { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 0 !important; }
	body.ms-site .ms-testimonials .ms-stack > .vc_column-inner > .wpb_wrapper { gap: 10px; }
	body.ms-site .ms-reviews { margin: 0; min-height: 374px; }
	body.ms-site .ms-review { width: 343px; min-height: 400px; border-radius: 16px; }
	body.ms-site .ms-review__num { font-size: 50px; }
	body.ms-site .ms-reviews__nav { left: 50%; bottom: -60px; transform: translateX(-50%); gap: 38px; }
}

/* ==========================================================================
   13. CONTACT + MULTI-STEP FORM (Contact Form 7)
   The form template wraps its groups in .ms-step divs; ms-site.js turns them
   into steps with a progress bar and Next / Previous buttons.
   ========================================================================== */

body.ms-site .ms-contact .ms-copy { width: 60%; }
@media (max-width: 767px) {
	body.ms-site .ms-contact > .row_col_wrap_12 { row-gap: 40px; }
	body.ms-site .ms-contact .ms-copy { width: 100%; }
}

body.ms-site .ms-form .wpcf7 { margin: 0; }
body.ms-site .ms-form form { position: relative; }
body.ms-site .ms-form .ms-progress {
	position: relative;
	height: 17px;
	margin-bottom: 45px;
	border-radius: 15px;
	background: var(--ms-text);
	overflow: hidden;
}
body.ms-site .ms-form .ms-progress__bar {
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding-right: 15px;
	border-radius: 15px;
	background: var(--ms-orange);
	font-family: var(--ms-body);
	font-size: 13px;
	line-height: 17px;
	font-weight: 500;
	text-align: right;
	color: var(--ms-text);
	transition: width .5s var(--ms-ease-out);
}
body.ms-site .ms-form .ms-step { display: none; }
body.ms-site .ms-form .ms-step.is-active { display: block; }
body.ms-site .ms-form:not(.is-stepped) .ms-step { display: block; }
body.ms-site .ms-form .ms-fields {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}
body.ms-site .ms-form .ms-field {
	box-sizing: border-box;
	width: 100%;
	padding: 0 10px;
	margin-bottom: 40px;
}
body.ms-site .ms-form .ms-field--half { width: 50%; }
body.ms-site .ms-form .ms-field > label,
body.ms-site .ms-form .ms-field__label {
	display: block;
	padding-bottom: 10px;
	font-family: var(--ms-body);
	font-size: 18px;
	line-height: 1;
	font-weight: 500;
	color: var(--ms-text);
}
body.ms-site .ms-form .wpcf7-form-control-wrap { display: block; position: relative; }
body.ms-site .ms-form input.wpcf7-text,
body.ms-site .ms-form input.wpcf7-email,
body.ms-site .ms-form input.wpcf7-tel,
body.ms-site .ms-form input.wpcf7-url,
body.ms-site .ms-form textarea.wpcf7-textarea,
body.ms-site .ms-form select.wpcf7-select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	padding: 8px 16px;
	margin: 0;
	border: 0 !important;
	border-bottom: 2px solid #fff !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--ms-body);
	font-size: 16px;
	line-height: 1.4;
	font-weight: 400;
	color: #F7F7F7;
	outline: none;
	transition: border-color .3s ease;
}
body.ms-site .ms-form textarea.wpcf7-textarea { height: auto; min-height: 120px; resize: vertical; }
body.ms-site .ms-form input.wpcf7-form-control:focus,
body.ms-site .ms-form textarea.wpcf7-form-control:focus,
body.ms-site .ms-form select.wpcf7-select:focus { border-bottom-color: var(--ms-orange) !important; }
/* The reference's select: no side padding, a 24px line centred in the 40px
   field. (12px top/bottom padding left 14px for a 22px line and cut the
   chosen option off at the bottom.) */
body.ms-site .ms-form select.wpcf7-select {
	padding: 7px 28px 7px 0;
	line-height: 24px;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
body.ms-site .ms-form select.wpcf7-select option { background: #1a1a1a; color: #fff; font-size: 16px; }
body.ms-site .ms-form select.wpcf7-select option:checked { background: var(--ms-orange-2); color: #fff; }
body.ms-site .ms-form .ms-field--select .wpcf7-form-control-wrap::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -2px;
	border-left: 5.5px solid transparent;
	border-right: 5.5px solid transparent;
	border-top: 6px solid #fff;
	pointer-events: none;
}

/* Radio groups as big selectable cards. */
body.ms-site .ms-form .wpcf7-radio {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 16px;
	padding: 16px 0;
}
body.ms-site .ms-form .wpcf7-radio .wpcf7-list-item {
	display: flex;
	flex: 1 1 0%;
	min-width: 0;
	margin: 0;
}
body.ms-site .ms-form .wpcf7-radio .wpcf7-list-item > label {
	position: relative;
	display: flex;
	width: 100%;
	margin: 0;
	cursor: pointer;
}
body.ms-site .ms-form .wpcf7-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
body.ms-site .ms-form .wpcf7-radio .wpcf7-list-item-label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100px;
	box-sizing: border-box;
	padding: 8px 12px;
	border: 2px solid rgba(255, 255, 255, .8);
	border-radius: 20px;
	background: transparent;
	font-family: var(--ms-body);
	font-size: 18px;
	line-height: 1.3;
	font-weight: 500;
	text-align: center;
	color: #fff;
	user-select: none;
	transition: background .5s var(--ms-ease-out), border-color .5s var(--ms-ease-out), transform .4s var(--ms-ease-out), box-shadow .5s var(--ms-ease-out);
}
body.ms-site .ms-form .wpcf7-radio label:hover .wpcf7-list-item-label,
body.ms-site .ms-form .wpcf7-radio input:checked + .wpcf7-list-item-label {
	border-color: transparent;
	background: var(--ms-grad);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(221, 77, 6, .3);
}
body.ms-site .ms-form .wpcf7-radio input:checked + .wpcf7-list-item-label { font-weight: 600; }
body.ms-site .ms-form .wpcf7-radio input:focus-visible + .wpcf7-list-item-label { outline: 2px solid #fff; outline-offset: 2px; }

body.ms-site .ms-form .ms-form__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}
body.ms-site .ms-form .ms-step-btn {
	display: inline-flex;
	align-items: center;
	height: 40px;
	box-sizing: border-box;
	padding: 8px 25px !important;
	margin: 0;
	border-radius: 999px !important;
	font-family: var(--ms-body);
	font-size: 18px;
	line-height: 18px;
	font-weight: 500;
	cursor: pointer;
	transition: opacity .3s ease, transform .3s ease, border-color .3s ease, color .3s ease;
}
body.ms-site .ms-form .ms-step-btn--next {
	border: 0 !important;
	background: var(--ms-grad) !important;
	color: #fff !important;
}
body.ms-site .ms-form .ms-step-btn--next:hover { opacity: .9; transform: translateY(-1px); }
body.ms-site .ms-form .ms-step-btn--prev {
	border: 2px solid rgba(255, 255, 255, .4) !important;
	background: transparent !important;
	color: #fff !important;
}
body.ms-site .ms-form .ms-step-btn--prev:hover { border-color: var(--ms-orange) !important; color: var(--ms-orange) !important; }

/* The submit is the pill button, built by the form template as a <button>. */
body.ms-site .ms-form .ms-btn { border: 0; padding: 8px 8px 8px 25px; }
body.ms-site .ms-form .ms-btn .ms-btn__icon { margin-left: -2px; }
body.ms-site .ms-form .wpcf7-spinner { position: absolute; margin: 0; right: 0; bottom: 50px; }

body.ms-site .ms-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-family: var(--ms-body);
	font-size: 14px;
	color: var(--ms-orange);
}
body.ms-site .ms-form .wpcf7 form .wpcf7-response-output {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	font-family: var(--ms-display);
	font-size: 42px;
	line-height: 1.1;
	color: #fff;
}
body.ms-site .ms-form .wpcf7 form.invalid .wpcf7-response-output,
body.ms-site .ms-form .wpcf7 form.failed .wpcf7-response-output { color: var(--ms-orange-2); }
body.ms-site .ms-form .wpcf7 form.sent .wpcf7-response-output { color: #1EFF09; }

@media (max-width: 1366px) {
	body.ms-site .ms-form .ms-field > label, body.ms-site .ms-form .ms-field__label { font-size: 16px; }
	body.ms-site .ms-form .wpcf7 form .wpcf7-response-output { font-size: 32px; }
}
@media (max-width: 1280px) {
	body.ms-site .ms-form .wpcf7-radio { gap: 12px; padding: 14px 0; }
	body.ms-site .ms-form .wpcf7-radio .wpcf7-list-item-label { height: 80px; font-size: 15px; border-radius: 18px; padding: 6px 10px; }
}
@media (max-width: 1024px) {
	body.ms-site .ms-form .wpcf7-radio { gap: 10px; padding: 12px 0; }
	body.ms-site .ms-form .wpcf7-radio .wpcf7-list-item-label { height: 80px; font-size: 13px; border-radius: 16px; padding: 6px 8px; }
	body.ms-site .ms-form .wpcf7 form .wpcf7-response-output { font-size: 28px; }
}
@media (max-width: 767px) {
	body.ms-site .ms-form .ms-field--half { width: 100%; }
	body.ms-site .ms-form .wpcf7-radio { flex-wrap: wrap; gap: 10px; padding: 10px 0; }
	body.ms-site .ms-form .wpcf7-radio .wpcf7-list-item { flex: 1 1 calc(50% - 5px); max-width: calc(50% - 5px); }
	body.ms-site .ms-form .wpcf7-radio .wpcf7-list-item-label { height: 60px; font-size: 14px; border-radius: 16px; padding: 6px 10px; }
	body.ms-site .ms-form .wpcf7 form .wpcf7-response-output { font-size: 32px; }
}
@media (max-width: 480px) {
	body.ms-site .ms-form .wpcf7-radio { gap: 8px; padding: 8px 0; }
	body.ms-site .ms-form .wpcf7-radio .wpcf7-list-item { flex-basis: calc(50% - 4px); max-width: calc(50% - 4px); }
	body.ms-site .ms-form .wpcf7-radio .wpcf7-list-item-label { font-size: 12px; padding: 6px 8px; }
}

/* ==========================================================================
   14. THANK-YOU POPUP
   The reference's Elementor popup: white card, 640px (340px on phones), dark
   80% backdrop, success animation, giant "Thank You!", plain orange close.
   ========================================================================== */

body.ms-site .ms-thanks {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
body.ms-site .ms-thanks[hidden] { display: none; }
body.ms-site .ms-thanks__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .8);
	opacity: 0;
	transition: opacity .4s ease;
}
body.ms-site .ms-thanks__box {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
	box-sizing: border-box;
	width: 640px;
	max-width: 100%;
	padding: 25px 65px 65px;
	border-radius: 25px;
	background: #fff;
	box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
	text-align: center;
	opacity: 0;
	transform: translateY(30px) scale(.97);
	transition: opacity .5s var(--ms-ease-out), transform .5s var(--ms-ease-out);
}
body.ms-site .ms-thanks.is-open .ms-thanks__backdrop { opacity: 1; }
body.ms-site .ms-thanks.is-open .ms-thanks__box { opacity: 1; transform: none; }
body.ms-site .ms-thanks__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 25px;
	height: 25px;
	padding: 0;
	border: 0;
	background: none !important;
	cursor: pointer;
}
body.ms-site .ms-thanks__close .ms-cross {
	width: 25px;
	height: 25px;
	flex-basis: 25px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}
body.ms-site .ms-thanks__close .ms-cross i { width: 25px; margin-left: -12.5px; }
body.ms-site .ms-thanks__close .ms-cross i::before,
body.ms-site .ms-thanks__close .ms-cross i::after { background: var(--ms-orange-2); }
body.ms-site .ms-thanks__anim { width: 150px; margin: 8px 0 -18px; }
body.ms-site .ms-thanks__anim:empty { height: 150px; }
body.ms-site .ms-thanks__anim svg { display: block; width: 100% !important; height: auto !important; }
body.ms-site .ms-thanks__title {
	margin: 0 0 -35px !important;
	font-family: var(--ms-display);
	font-size: 150px;
	line-height: 1.1;
	font-weight: 400;
	color: var(--ms-bg);
}
body.ms-site .ms-thanks__text {
	margin: 0 !important;
	font-family: var(--ms-body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--ms-bg);
}
@media (max-width: 1366px) {
	body.ms-site .ms-thanks__box { padding: 20px 50px 50px; }
	body.ms-site .ms-thanks__anim { width: 140px; }
	body.ms-site .ms-thanks__title { font-size: 135px; }
}
@media (max-width: 1024px) {
	body.ms-site .ms-thanks__box { padding: 35px; }
	body.ms-site .ms-thanks__anim { width: 130px; }
	body.ms-site .ms-thanks__title { font-size: 130px; margin-bottom: -30px !important; }
	body.ms-site .ms-thanks__text { font-size: 16px; }
}
@media (max-width: 767px) {
	body.ms-site .ms-thanks__box { width: 340px; padding: 10px 25px 25px; }
	body.ms-site .ms-thanks__anim { width: 120px; }
	body.ms-site .ms-thanks__title { font-size: 90px; margin-bottom: -22px !important; }
}

/* ==========================================================================
   15. FOOTER (Salient Global Section, location "Footer")
   The footer is a normal WPBakery row inside a Global Section, so the client
   edits it like a page. Its background photo (and the phone version) is the
   row's own Background setting; the orange glow is theme decoration.
   ========================================================================== */

/* Salient wraps a Global Section in its own padded .container; the footer row
   sets its own width, so that wrapper is released. */
body.ms-site .nectar-global-section.nectar_hook_global_section_footer > .container {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.ms-site .nectar-global-section.nectar_hook_global_section_footer > .container::before,
body.ms-site .nectar-global-section.nectar_hook_global_section_footer > .container::after { display: none; }
body.ms-site #footer-outer { display: none !important; }

body.ms-site .ms-footer {
	--ms-wrap: 1360px;
	position: relative;
	overflow: hidden;
	padding-top: 45px !important;
	padding-bottom: 45px !important;
	background-color: var(--ms-bg);
}
body.ms-site .ms-footer::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	aspect-ratio: 1728 / 815;
	background: url('../img/footer-glow.webp') center bottom / 100% 100% no-repeat;
	pointer-events: none;
}
body.ms-site .ms-footer > .row_col_wrap_12 { position: relative; z-index: 2; }
body.ms-site .ms-footer > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	gap: 60px;
}
body.ms-site .ms-footer .wpb_row.vc_inner { margin: 0 !important; }

/* Top: lead column (title, availability, button) and link columns. */
body.ms-site .ms-footer__top > .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: 400px minmax(0, 900px);
	justify-content: space-between;
}
body.ms-site .ms-footer__lead .wpb_wrapper { display: flex; flex-direction: column; gap: 20px; }
body.ms-site .ms-footer__lead .ms-btn-wrap { margin-top: -8px !important; }
body.ms-site .ms-footer__cols .wpb_wrapper {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 107px;
}
body.ms-site .ms-linkcol { display: flex; flex-direction: column; gap: 7px; }
body.ms-site .ms-footer .ms-linkcol--plain { width: 100px; }
body.ms-site .ms-footer .ms-linkcol--icons { width: 270px; }
body.ms-site .ms-linkcol__title {
	margin: 0 !important;
	font-family: var(--ms-display);
	font-size: 40px;
	line-height: 1.1;
	font-weight: 400;
	color: #fff;
	white-space: nowrap;
}

body.ms-site .ms-notice { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 8px; }
body.ms-site .ms-notice__icon { display: block; width: 20px; height: 20px; flex: 0 0 20px; }
body.ms-site .ms-notice__icon img { display: block; width: 40px !important; height: 40px !important; max-width: none; margin: -10px; }
body.ms-site .ms-notice__text {
	font-family: var(--ms-body);
	font-size: 18px;
	line-height: 1.1;
	font-weight: 500;
	color: #fff;
}

body.ms-site .ms-links { display: flex; flex-direction: column; margin: 0 !important; }
body.ms-site .ms-links li { transition: all .3s ease; }
body.ms-site .ms-links li:hover { margin-left: 10px; letter-spacing: 1px; }
body.ms-site .ms-links--plain li + li { margin-top: 5px; }
body.ms-site .ms-links--plain li:not(:last-child) { padding-bottom: 5px; }
body.ms-site .ms-links--icons li + li { margin-top: 3.5px; }
body.ms-site .ms-links--icons li:not(:last-child) { padding-bottom: 3.5px; }
body.ms-site .ms-links a {
	display: flex;
	align-items: center;
	font-family: var(--ms-body);
	font-size: 16px;
	line-height: 1.5;
	font-weight: 500;
	color: #fff !important;
	text-decoration: none !important;
}
body.ms-site .ms-links__icon { width: 25px; height: 25px; flex: 0 0 25px; margin-right: 6.25px; }
body.ms-site .ms-links--icons a span { padding-left: 5px; }

/* Wordmark: Salient's Image element. Its "Extra class" lands on the <img>, so
   the wrapper is reached through :has(). */
body.ms-site .ms-footer .img-with-aniamtion-wrap:has(img.ms-footer__wordmark) { margin: 0 0 -30px !important; line-height: 0; }
body.ms-site .ms-footer img.ms-footer__wordmark { display: inline-block; width: auto; max-width: 100%; height: auto; margin: 0; }
body.ms-site .ms-footer .img-with-aniamtion-wrap:has(img.ms-footer__wordmark) .hover-wrap { margin-bottom: 0; }
body.ms-site .ms-footer .img-with-aniamtion-wrap:has(img.ms-footer__wordmark) .hover-wrap-inner { display: flex; justify-content: center; }

/* Bottom bar: social discs left, copyright right. */
body.ms-site .ms-footer__bar .wpb_wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
body.ms-site .ms-socials { display: flex; align-items: center; gap: 5px; margin: 0 !important; }
body.ms-site .ms-socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 29px;
	height: 29px;
	box-sizing: border-box;
	padding: 7px;
	border-radius: 50%;
	background: #fff;
	color: var(--ms-orange) !important;
	transition: transform .3s, background .3s, color .3s;
}
body.ms-site .ms-socials a:hover { transform: scale(1.1); background: var(--ms-bg); color: #fff !important; }
body.ms-site .ms-socials .ms-ico { width: 15px; height: 15px; }
body.ms-site .ms-copyright,
body.ms-site .ms-copyright p {
	margin: 0 !important;
	font-family: var(--ms-body);
	font-size: 14px;
	line-height: 1.6;
	font-weight: 500;
	text-align: right;
	color: #fff;
}
/* [ms_privacy_link] in the copyright line (shown once the policy is published). */
body.ms-site .ms-copyright a { color: inherit !important; text-decoration: underline; text-underline-offset: 3px; }
body.ms-site .ms-copyright a:hover { color: var(--ms-orange) !important; }

@media (max-width: 1366px) {
	body.ms-site .ms-footer { --ms-wrap: 1100px; padding-top: 40px !important; padding-bottom: 40px !important; }
	body.ms-site .ms-footer > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper { gap: 50px; }
	body.ms-site .ms-footer__top > .row_col_wrap_12_inner { grid-template-columns: 350px 720px; }
	body.ms-site .ms-footer__cols .wpb_wrapper { gap: 70px; }
	body.ms-site .ms-footer .ms-linkcol--icons { width: 250px; }
	body.ms-site .ms-linkcol__title { font-size: 36px; }
	body.ms-site .ms-notice__icon { width: 15px; height: 15px; flex-basis: 15px; }
	body.ms-site .ms-notice__icon img { width: 35px !important; height: 35px !important; }
	body.ms-site .ms-notice__text { font-size: 16px; }
	body.ms-site .ms-links--plain li + li { margin-top: 4px; }
	body.ms-site .ms-links--plain li:not(:last-child) { padding-bottom: 4px; }
	body.ms-site .ms-links a { font-size: 15px; }
}
@media (max-width: 1024px) {
	body.ms-site .ms-footer { padding-bottom: 15px !important; }
	body.ms-site .ms-footer__top > .row_col_wrap_12_inner { grid-template-columns: 220px 60%; }
	body.ms-site .ms-footer__cols .wpb_wrapper { justify-content: space-between; gap: 0; }
	body.ms-site .ms-footer .ms-linkcol--plain { width: 200px; }
	body.ms-site .ms-footer .ms-linkcol--icons { width: 500px; }
	body.ms-site .ms-linkcol__title { font-size: 34px; }
	body.ms-site .ms-notice__icon { width: 14px; height: 14px; flex-basis: 14px; }
	body.ms-site .ms-notice__icon img { width: 32px !important; height: 32px !important; margin: -9px; }
	body.ms-site .ms-notice__text { font-size: 14px; }
	body.ms-site .ms-links--icons a { font-size: 14px; }
}
@media (max-width: 767px) {
	body.ms-site .ms-footer { padding-top: 16px !important; padding-bottom: 16px !important; }
	body.ms-site .ms-footer > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper { gap: 50px; }
	body.ms-site .ms-footer__top > .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); row-gap: 50px; }
	body.ms-site .ms-footer__cols .wpb_wrapper { flex-direction: column; justify-content: flex-start; gap: 35px; }
	body.ms-site .ms-footer .ms-linkcol--plain,
	body.ms-site .ms-footer .ms-linkcol--icons { width: 100%; }
	body.ms-site .ms-footer .ms-socials a { width: 32px; height: 32px; padding: 5px; }
	body.ms-site .ms-footer .ms-socials .ms-ico { width: 22px; height: 22px; }
	body.ms-site .ms-notice__text { font-size: 16px; }
	body.ms-site .ms-links a { font-size: 16px; }
	body.ms-site .ms-links__icon { width: 30px; height: 30px; flex-basis: 30px; margin-right: 7.5px; }
	body.ms-site .ms-footer .img-with-aniamtion-wrap:has(img.ms-footer__wordmark) { margin-bottom: -40px !important; }
	body.ms-site .ms-footer__bar .wpb_wrapper { justify-content: flex-start; }
	body.ms-site .ms-copyright, body.ms-site .ms-copyright p { text-align: left; }
}

/* ==========================================================================
   16. PRELOADER, CURSOR, SCROLL-TO-TOP
   ========================================================================== */

/* Until the preloader lifts, the page underneath is invisible, exactly as in
   the reference. The CSS animation is a safety net: if the script never runs
   the page still appears after 2.5s. */
html.ms-loading body.ms-site #ajax-content-wrap,
html.ms-loading body.ms-site .ms-header { opacity: 0; animation: ms-failsafe 0s linear 2.5s forwards; }
@keyframes ms-failsafe { to { opacity: 1; } }

.ms-loader {
	position: fixed;
	inset: 0;
	z-index: 9999999;
	pointer-events: none;
	--digit-h: 310px;
}
.ms-loader__panel { position: absolute; inset: 0; background: #120800; }
.ms-loader__label {
	position: absolute;
	top: 50px;
	left: 60px;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	font-family: 'Mango Grotesque', sans-serif;
	font-size: 54px;
	line-height: 1;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
	transition: opacity .25s ease-in;
}
.ms-loader__dots { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; }
.ms-loader__dots i {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ms-grad);
	opacity: 0;
	animation: ms-dot 1.02s infinite;
}
.ms-loader__dots i:nth-child(2) { animation-delay: .18s; }
.ms-loader__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes ms-dot {
	0% { opacity: 0; transform: scale(1); }
	19.6% { opacity: 1; transform: scale(1.2); }
	27.5% { opacity: 1; transform: scale(1.2); }
	47.1% { opacity: 0; transform: scale(1); }
	100% { opacity: 0; }
}
.ms-loader__counter {
	position: absolute;
	left: 60px;
	bottom: 80px;
	display: flex;
	align-items: flex-start;
	font-family: 'Mango Grotesque', sans-serif;
	font-size: 300px;
	line-height: 1;
	font-weight: 700;
	color: #fff;
}
.ms-loader__digit { height: var(--digit-h); overflow: hidden; }
.ms-loader__reel { display: flex; flex-direction: column; will-change: transform; }
.ms-loader__reel span { display: flex; align-items: center; height: var(--digit-h); }
.ms-loader__pct span {
	background: var(--ms-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.ms-loader__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; background: rgba(255, 255, 255, .12); }
.ms-loader__fill { width: 0; height: 100%; background: var(--ms-grad); }
.ms-loader__wipe {
	position: absolute;
	inset: 0;
	background: linear-gradient(150deg, #ED7A36, #DD4D06);
	clip-path: circle(0% at 0% 100%);
	will-change: clip-path;
}
@media (max-width: 1280px) { .ms-loader { --digit-h: 260px; } .ms-loader__counter { font-size: 250px; } }
@media (max-width: 1024px) { .ms-loader { --digit-h: 210px; } .ms-loader__counter { font-size: 200px; left: 40px; bottom: 60px; } }
@media (max-width: 767px) {
	.ms-loader { --digit-h: 148px; }
	.ms-loader__counter { font-size: 140px; left: 24px; bottom: 50px; }
	.ms-loader__label { left: 24px; top: 36px; font-size: 42px; }
}
@media (max-width: 480px) {
	.ms-loader { --digit-h: 138px; }
	.ms-loader__counter { font-size: 130px; left: 16px; bottom: 40px; }
	.ms-loader__label { font-size: 36px; }
}

/* Custom cursor (mouse devices only). */
.ms-cursor-ring,
.ms-cursor-dot,
.ms-card-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
	body.ms-has-cursor.ms-cursor-on,
	body.ms-has-cursor.ms-cursor-on *,
	body.ms-has-cursor.ms-cursor-on *::before,
	body.ms-has-cursor.ms-cursor-on *::after { cursor: none !important; }
	body.ms-has-cursor.ms-cursor-on .ms-cursor-ring,
	body.ms-has-cursor.ms-cursor-on .ms-cursor-dot,
	body.ms-has-cursor.ms-cursor-on .ms-card-cursor { display: block; }
}
.ms-cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	width: 50px;
	height: 50px;
	border: 1.5px solid rgba(237, 122, 54, .8);
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	will-change: transform, width, height;
	background: radial-gradient(circle, rgba(237, 122, 54, .06) 0%, transparent 70%);
	box-shadow: 0 0 20px rgba(237, 122, 54, .15), inset 0 0 20px rgba(237, 122, 54, .05);
	transition: width .5s var(--ms-ease-out), height .5s var(--ms-ease-out), border-color .4s ease, background .4s ease, opacity .3s ease;
}
.ms-cursor-ring::before {
	content: "";
	position: absolute;
	inset: -2px;
	border: 1px solid rgba(237, 122, 54, .2);
	border-radius: 50%;
	animation: ms-ring-pulse 2s ease-in-out infinite;
}
@keyframes ms-ring-pulse {
	0%, 100% { transform: scale(1); opacity: .5; }
	50% { transform: scale(1.15); opacity: 0; }
}
.ms-cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999999;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #ED7A36;
	box-shadow: 0 0 8px rgba(237, 122, 54, .8);
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition: opacity .3s ease, transform .2s ease;
}
.ms-cursor-ring.is-hovering {
	width: 90px;
	height: 90px;
	border-color: rgba(255, 255, 255, .9);
	background: radial-gradient(circle, rgba(237, 122, 54, .15) 0%, transparent 70%);
	box-shadow: 0 0 40px rgba(237, 122, 54, .3), inset 0 0 30px rgba(237, 122, 54, .1);
}
.ms-cursor-ring.is-hovering::before { animation: none; opacity: 0; }
.ms-cursor-dot.is-hovering { transform: translate(-50%, -50%) scale(0); opacity: 0; }
.ms-cursor-ring.is-clicking { width: 40px; height: 40px; border-color: #ED7A36; background: rgba(237, 122, 54, .2); }
.ms-cursor-ring.is-hidden, .ms-cursor-dot.is-hidden { opacity: 0; }
body.ms-site .ms-cursor-ring.is-suppressed,
body.ms-site .ms-cursor-dot.is-suppressed { opacity: 0 !important; }

/* The orange arrow that follows the cursor over project images. */
.ms-card-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	background: var(--ms-grad);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.5);
	transition: opacity .3s ease, transform .3s ease;
}
.ms-card-cursor svg {
	display: block;
	width: 30px;
	height: 30px;
	margin: 17.5px auto 0;
	stroke: #fff;
	stroke-width: 1.8;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ms-card-cursor.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Circular progress + arrow scroll-to-top: a round button, so the progress
   ring runs along its edge. */
body.ms-site .ms-to-top {
	position: fixed;
	right: 15px;
	bottom: 16px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 50% !important;
	background: var(--ms-orange-2) !important;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .3s ease, bottom .3s ease;
}
body.ms-site .ms-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
/* Clear of the cookie bar (GDPR Cookie Compliance) while it shows; ms-site.js
   keeps --ms-cookiebar-h at the bar's height. */
body.ms-site.gdpr-infobar-visible .ms-to-top { bottom: calc(16px + var(--ms-cookiebar-h, 60px)); }
body.ms-site .ms-to-top:hover { background: var(--ms-orange) !important; }
body.ms-site .ms-to-top__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}
body.ms-site .ms-to-top__ring path { fill: none; stroke: #fff; stroke-width: 2; }
body.ms-site .ms-to-top__arrow { position: relative; width: 16px; height: 16px; fill: #fff; }

/* ==========================================================================
   17. MOTION
   ========================================================================== */

/* Letter drop (the reference's "ball" preset): every letter and its word
   rise from --ms-y below, staggered 0.05s per letter. */
[data-ms-anim="chars"] .ms-w,
[data-ms-anim="chars"] .ms-c {
	display: inline-block;
	opacity: 0;
	transform: translateY(var(--ms-y, 50px));
	will-change: transform, opacity;
}
[data-ms-anim="chars"] .ms-c { animation-delay: calc(.05s * var(--i, 0)); }
[data-ms-anim="chars"].is-animated .ms-w,
[data-ms-anim="chars"].is-animated .ms-c {
	animation-name: ms-char;
	animation-duration: var(--ms-dur, .8s);
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
@keyframes ms-char { to { opacity: 1; transform: translate(0, 0); } }

/* Hero photo: slides up 100px and bounces in from below (2s), together. */
body.ms-site .ms-hero__photo { visibility: hidden; }
body.ms-site .ms-hero__photo.is-animated {
	visibility: visible;
	animation: ms-bounce-in-up 2s both;
}
body.ms-site .ms-hero__photo-in { opacity: 0; transform: translateY(100px); }
body.ms-site .ms-hero__photo.is-animated .ms-hero__photo-in { animation: ms-slide-up .4s ease .001s forwards; }
@keyframes ms-slide-up { to { opacity: 1; transform: translateY(0); } }
@keyframes ms-bounce-in-up {
	from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	from { opacity: 0; transform: translate3d(0, 3000px, 0); }
	60% { opacity: 1; transform: translate3d(0, -20px, 0); }
	75% { transform: translate3d(0, 10px, 0); }
	90% { transform: translate3d(0, -5px, 0); }
	to { transform: translate3d(0, 0, 0); }
}

/* No script, the editor, or reduced motion: show everything in its final place. */
html:not(.ms-js) [data-ms-anim="chars"] .ms-w,
html:not(.ms-js) [data-ms-anim="chars"] .ms-c,
html:not(.ms-js) body.ms-site .ms-project__media,
html:not(.ms-js) body.ms-site .ms-hero__photo,
html:not(.ms-js) body.ms-site .ms-hero__photo-in { opacity: 1; transform: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
	[data-ms-anim="chars"] .ms-w,
	[data-ms-anim="chars"] .ms-c,
	body.ms-site .ms-project__media,
	body.ms-site .ms-hero__photo,
	body.ms-site .ms-hero__photo-in { opacity: 1 !important; transform: none !important; visibility: visible !important; animation: none !important; }
	body.ms-site .ms-marquee__track { animation-duration: 120s !important; }
}

/* The form's submit is a plain <button> in the CF7 template (no SVG, so the
   template survives CF7's HTML filter): its arrow is drawn here. */
body.ms-site .ms-form .ms-btn__icon:empty::before {
	content: "";
	display: block;
	width: 14.29px;
	height: 14.29px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23E8491A' d='M0.234 10.341a.8.8 0 0 0 1.131 1.132L.8 10.907l-.566-.566zM11.707.8a.8.8 0 0 0-.8-.8h-7.2a.8.8 0 0 0 0 1.6h6.4V8a.8.8 0 0 0 1.6 0V.8zM.8 10.907l.566.566L11.473 1.366 10.907.8 10.341.234.234 10.341.8 10.907z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}
body.ms-site .ms-form .ms-btn.is-hovered .ms-btn__icon:empty::before { transform: rotate(45deg); }
body.ms-site .ms-form button.ms-btn { font-family: var(--ms-body); line-height: 18px; }
body.ms-site .ms-form button.ms-btn:disabled { opacity: .6; cursor: default; }

/* ==========================================================================
   18. OTHER PAGES (404, legal pages, anything not built from the sections)
   Same palette and type as the design, on Salient's default templates. The
   header is absolute, so content starts below it.
   ========================================================================== */

body.ms-site:not(.ms-page) .container-wrap { padding-top: 130px !important; }
body.ms-site:not(.ms-page) .container-wrap h1,
body.ms-site:not(.ms-page) .container-wrap h2,
body.ms-site:not(.ms-page) .container-wrap h3,
body.ms-site:not(.ms-page) .container-wrap h4,
body.ms-site:not(.ms-page) .page-header-no-bg h1,
body.ms-site:not(.ms-page) #page-header-bg h1 {
	font-family: var(--ms-display) !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	color: #fff !important;
}
body.ms-site:not(.ms-page) .page-header-no-bg,
body.ms-site:not(.ms-page) #page-header-bg { background: transparent !important; }
body.ms-site:not(.ms-page) .page-header-no-bg h1 { font-size: 70px !important; line-height: 1 !important; }
body.ms-site:not(.ms-page) .container-wrap p,
body.ms-site:not(.ms-page) .container-wrap li { color: var(--ms-text); font-family: var(--ms-body); }
body.ms-site:not(.ms-page) .container-wrap a:not(.nectar-button) { color: var(--ms-orange); }
body.ms-site #error-404 h1 { font-size: 250px !important; line-height: 1 !important; }
body.ms-site #error-404 h2 { font-size: 54px !important; line-height: 1.1 !important; }
body.ms-site #error-404 .nectar-button {
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--ms-grad) !important;
	color: #fff !important;
	font-family: var(--ms-body);
	font-weight: 500;
}
@media (max-width: 767px) {
	body.ms-site:not(.ms-page) .container-wrap { padding-top: 110px !important; }
	body.ms-site:not(.ms-page) .page-header-no-bg h1 { font-size: 52px !important; }
	body.ms-site #error-404 h1 { font-size: 150px !important; }
	body.ms-site #error-404 h2 { font-size: 38px !important; }
}