/* ==========================================================================
   SWS Security Systems Ltd — design bridge stylesheet
   --------------------------------------------------------------------------
   Maps the approved design onto the markup that NATIVE WPBakery and Salient
   elements produce. No custom WPBakery elements, no markup in Text Blocks.

   Rebuilt after the first attempt was rejected. The page now uses the element
   that matches each kind of content, so this sheet targets the real markup of
   milestone, testimonial, nectar_icon, real <ul> lists and Text Blocks rather
   than a wall of headings.

   Scoping: .sws-site is global chrome, .sws-home the designed page. .sws-home
   is applied from a CONTENT MARKER as well as post meta, so a duplicated page
   keeps its styling.

   Contents
     0  Tokens                     9  Service bands
     1  Salient neutralisation    10  AI process (steps, band, stats)
     2  Layout primitives         11  Why choose us
     3  Header + top bar          12  About
     4  Buttons                   13  Reviews (testimonial)
     5  Shared: eyebrow/h2/lead   14  FAQs
     6  Icons + lists             15  Contact + form
     7  Hero                      16  Footer
     8  Who we work for           17  WhatsApp + cookie bar
                                  18  Responsive
   ========================================================================== */

/* ==========================================================================
   0. TOKENS
   ========================================================================== */
.sws-site {
	--blue:        #1e7bea;
	--blue-lt:     #3e93ff;
	--blue-pale:   #7fb4ff;
	--navy:        #050d1a;
	--ink:         #03080f;
	--ink-text:    #0a1524;

	--line-dark:   #12203a;
	--line-card:   #16253c;
	--line-card-2: #1b2a44;

	--light-bg:    #f4f7fb;
	--line-light:  #e3e9f0;
	--line-light-2:#d7e0ea;
	--line-light-3:#dce6f2;
	--line-light-4:#c6d9f2;

	--body-light:  #5a6a7d;
	--body-light-2:#4e5d70;
	--tag-text:    #3c4a5c;

	--body-dark:   #9fb0c4;
	--body-dark-2: #a9b9cc;
	--muted:       #93a3b8;
	--muted-2:     #8b9bb0;
	--muted-3:     #7a8ca3;
	--muted-4:     #6b7c92;
	--on-dark:     #c6d1df;
	--on-dark-2:   #d5dfeb;
	--on-dark-3:   #d5e3f5;

	--wa:          #25d366;

	--f-display: 'Archivo', sans-serif;
	--f-body:    'IBM Plex Sans', system-ui, sans-serif;
	--f-mono:    'IBM Plex Mono', ui-monospace, monospace;

	--wrap:  1340px;
	--gut:   clamp(14px, 3vw, 44px);
	--sec-y: clamp(58px, 7vw, 100px);

	--i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e7bea' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 12.4 3 3 6-6.4'/%3E%3C/svg%3E");
	--i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233e93ff'%3E%3Cpath d='m12 2 3.1 6.3 7 1-5 4.9 1.2 6.9-6.3-3.3-6.3 3.3L6.9 14.2l-5-4.9 7-1L12 2Z'/%3E%3C/svg%3E");
	--i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
	--i-mail:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
	--i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z'/%3E%3Cpath d='M12 7.5v5l3.5 2'/%3E%3C/svg%3E");
	--i-pin:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Cpath d='M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
	--i-wa:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm5.1 14.1c-.2.6-1.2 1.2-1.7 1.2-.5.1-1 .1-1.7-.1a11 11 0 0 1-4-2.4 9.4 9.4 0 0 1-2-2.9c-.3-.7-.3-1.3-.2-1.8.1-.4.6-1.2 1-1.4.3-.2.7-.2.9.1l.9 1.6c.1.2.1.4 0 .6l-.5.7c-.1.2-.2.4 0 .6.4.7 1 1.3 1.7 1.8.4.3.7.4 1 .1l.6-.6c.2-.2.4-.2.6-.1l1.6.9c.3.2.3.6.1.9l-.3.2Z'/%3E%3C/svg%3E");
	--i-ig:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E");
	--i-fb:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h-2.5A4.5 4.5 0 0 0 8 7.5V10H6v4h2v7h4v-7h3l1-4h-4V7.5a.5.5 0 0 1 .5-.5H15Z'/%3E%3C/svg%3E");
}

@keyframes sws-blip { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
@keyframes sws-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(62,147,255,.32); } 50% { box-shadow: 0 0 0 12px rgba(62,147,255,0); } }
@keyframes sws-pop  { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   1. SALIENT NEUTRALISATION
   ========================================================================== */

/* Salient caps page rows inside .container.main-content (your max_container_width PLUS 90px of
   side padding), which renders full-bleed bands 1160px wide and inset. Releasing that container
   is cleaner than a 100vw break-out: no negative margins, no scrollbar arithmetic. */
.sws-home .container-wrap > .container.main-content {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.sws-home .container-wrap { padding-top: 0 !important; padding-bottom: 0 !important; }
.sws-home .container-wrap,
.sws-home #content { background: var(--navy); }

/* Every Salient row carries a bottom margin, which shows as a stripe between bands. */
.sws-home .wpb_row,
.sws-home .vc_row,
.sws-home .vc_row-fluid { margin-bottom: 0 !important; }

.sws-home .page-header-no-bg,
.sws-home #page-header-bg,
.sws-home #page-header-wrap { display: none !important; }

.sws-home .wpb_content_element,
.sws-home .wpb_text_column { margin-bottom: 0 !important; }
.sws-home .vc_custom_heading { margin: 0 !important; }
.sws-home .wpb_text_column p { margin: 0; }
/* Salient adds a bottom padding to the last paragraph of a Text Block. Only the margin is reset
   globally: zeroing the PADDING here also flattened the deliberate padding on the pill-shaped
   eyebrows, which pushed their text off centre. Pills restore their own padding below. */
.sws-home .wpb_text_column p:last-child { margin-bottom: 0; }
.sws-home .sws-section .vc_column-inner { padding: 0; }
.sws-home .sws-section .wpb_row .row_col_wrap_12_inner { margin-left: 0 !important; margin-right: 0 !important; }

/* ==========================================================================
   2. LAYOUT PRIMITIVES
   Horizontal rhythm: the design is a 1340 column inside clamp(14px,3vw,44px)
   gutters. As one padding rule that is exactly equivalent:
       padding-inline: max(gut, (containerWidth - 1340) / 2)
   Vertical rhythm lives here because the design's padding is a clamp(), which
   a row padding field cannot hold.
   ========================================================================== */
.sws-home .sws-section {
	position: relative;
	/* Salient rows are content-box; without this the side padding is ADDED to a full-width box
	   and pushes content past the viewport. */
	box-sizing: border-box;
	padding-top: var(--sec-y) !important;
	padding-bottom: var(--sec-y) !important;
	padding-left:  max(var(--gut), calc((100% - var(--wrap)) / 2)) !important;
	padding-right: max(var(--gut), calc((100% - var(--wrap)) / 2)) !important;
	background: var(--navy);
	color: #fff;
	font-family: var(--f-body);
}

/* DEFECT FIX: Salient gives .video-color-overlay z-index 3 on any row with a video background.
   With the content wrapper at z-index 2 the overlay sat on top of everything, which is why the
   contact form could not be typed into and the hero buttons could not be clicked. The content
   goes above it, and the purely decorative layers stop swallowing pointer events. */
.sws-home .sws-section > .row_col_wrap_12 { position: relative; z-index: 5; }
.sws-home .sws-section > .video-color-overlay,
.sws-home .sws-section > .row-bg-wrap,
.sws-home .sws-section > .nectar-video-wrap,
.sws-home .sws-section > .mobile-video-image { pointer-events: none !important; }

.sws-home .sws-section .inner_row > .row-bg-wrap { display: none !important; }
/* Only the HORIZONTAL margins are reset here. This exists to cancel Salient's negative column
   gutter; zeroing all four sides also flattened every vertical gap set further down the sheet
   (this selector is 0,3,0 and those are 0,2,0), which collapsed the spacing between the hero
   buttons and chips, the AI head/steps/band/stats, the why head, the areas panel and the
   reviews grid. Vertical rhythm belongs to the section rules, not to this reset. */
.sws-home .sws-section .inner_row { margin-left: 0 !important; margin-right: 0 !important; }
.sws-home .row_col_wrap_12_inner::before,
.sws-home .row_col_wrap_12_inner::after { display: none !important; content: none !important; }
.sws-home .sws-section .wpb_column { padding-left: 0 !important; padding-right: 0 !important; }

/* Salient paints every heading with the Theme Options "Primary Text Color". The design uses a
   different heading colour per band, so each band states its own. */
.sws-home .sws-section .sws-h2,
.sws-home .sws-section h1, .sws-home .sws-section h2, .sws-home .sws-section h3 { color: var(--ink-text); }
.sws-home .sws-hero h1, .sws-home .sws-hero .sws-h2,
.sws-home .sws-why h2, .sws-home .sws-why .sws-h2, .sws-home .sws-why h3,
.sws-home .sws-reviews h2, .sws-home .sws-reviews .sws-h2,
.sws-home .sws-contact h2, .sws-home .sws-contact h3, .sws-home .sws-contact .sws-h2,
.sws-home .sws-svc--dark h2, .sws-home .sws-svc--dark .sws-h2,
.sws-home .sws-ai__band h3 { color: #fff; }

/* ==========================================================================
   3. HEADER + TOP BAR
   ========================================================================== */
.sws-site #header-outer {
	background: var(--navy) !important;
	border-bottom: 1px solid var(--line-dark);
	box-shadow: none !important;
	transition: box-shadow .3s ease;
}
.sws-site.sws-scrolled #header-outer { box-shadow: 0 12px 34px rgba(0,0,0,.45) !important; }
.sws-site #header-space { background: var(--navy) !important; }

/* DEFECT FIX: one container width for the whole header, on the same edges as the page sections.
   The main header's container is at #header-outer #top > .container, NOT a direct child of
   #header-outer, which is why the previous rule missed it and Salient's default 90px padding won
   (header content ran 133 to 1293 against sections at 43 to 1382). */
.sws-site #header-outer > .container,
.sws-site #header-outer #top > .container,
.sws-site #header-secondary-outer > .container,
.sws-site #footer-widgets > .container,
.sws-site #copyright > .container {
	max-width: none !important;
	width: 100% !important;
	padding-left:  max(var(--gut), calc((100% - var(--wrap)) / 2)) !important;
	padding-right: max(var(--gut), calc((100% - var(--wrap)) / 2)) !important;
}

/* ---- secondary (top utility) bar ---- */
.sws-site #header-secondary-outer {
	background: var(--ink) !important;
	border-bottom: 1px solid var(--line-dark);
	font-family: var(--f-body);
}
.sws-site #header-secondary-outer > .container > nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 22px;
	min-height: 42px;
	float: none !important;
}
.sws-site #header-secondary-outer ul.sf-menu {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	float: none !important;
	margin: 0;
	order: 1;
}
.sws-site #header-secondary-outer ul.sf-menu > li {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	list-style: none !important;
}
.sws-site #header-secondary-outer ul.sf-menu > li > a {
	display: flex !important;
	align-items: center;
	gap: 7px;
	padding: 0 !important;
	line-height: 1.5;
	font-size: 12.5px;
	color: var(--muted) !important;
}
/* DEFECT FIX: the design's top bar is sentence case. Salient uppercases the inner span, not the
   anchor, so the transform has to be reset on .menu-title-text. */
.sws-site #header-secondary-outer ul.sf-menu > li > a,
.sws-site #header-secondary-outer .menu-title-text {
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.sws-site #header-secondary-outer ul.sf-menu > li > a:hover { color: var(--blue-lt) !important; }
/* DEFECT FIX: these icons vanished because the nav-underline reset below matched the secondary
   bar too (it also lives inside #header-outer). That reset is now scoped to #top nav only. */
.sws-site #header-secondary-outer ul.sf-menu > li > a::before {
	content: "" !important;
	display: block !important;
	width: 13px; height: 13px;
	flex: 0 0 auto;
	background-color: var(--blue-lt);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
}
.sws-site .sws-bar__item--phone > a::before { -webkit-mask-image: var(--i-phone); mask-image: var(--i-phone); }
.sws-site .sws-bar__item--mail  > a::before { -webkit-mask-image: var(--i-mail);  mask-image: var(--i-mail); }
.sws-site .sws-bar__item--hours > a::before { -webkit-mask-image: var(--i-clock); mask-image: var(--i-clock); }
.sws-site .sws-bar__item--static > a { pointer-events: none; cursor: default; }

/* DEFECT FIX: the RISCO line is flush right in the design. Salient prints it before the menu and
   pads it, so it ended at 1181 instead of the container edge. */
.sws-site #header-secondary-outer .nectar-center-text {
	/* Salient absolutely positions this to centre it, which takes it out of the flex flow so
	   order, margin-left:auto and justify-content all silently do nothing. Back into flow. */
	position: static !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	order: 2;
	margin-left: auto;
	flex: 0 0 auto;
	float: none !important;
	padding: 0 !important;
	text-align: right;
	width: auto !important;
}
.sws-site #header-secondary-outer .nectar-center-text a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--blue-pale) !important;
}
.sws-site #header-secondary-outer .nectar-center-text a::before {
	content: "";
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--blue-lt);
	flex: 0 0 auto;
}

/* ---- main header row ----
   Salient lays the header out on its percentage grid, which makes .span_9 three pixels wider
   than the row it sits in, so the CTA never quite lines up with the page edge. A real flex row
   with content-sized columns removes the rounding and lets the nav take exactly what is left. */
.sws-site #header-outer #top > .container > .row { display: flex; align-items: center; min-height: 74px; }
.sws-site #header-outer #top > .container > .row > .col {
	float: none !important;
	margin: 0 !important;
	width: auto !important;
}
.sws-site #header-outer #top .col.span_3 { flex: 0 0 auto; }
.sws-site #header-outer #top .col.span_9 { flex: 1 1 auto; min-width: 0; }
.sws-site #header-outer #logo img { height: 42px; width: auto; }

/* The nav must fill its column, otherwise margin-left:auto on the phone item has no free space
   to absorb and the CTA stops short of the page edge instead of aligning with it. */
.sws-site #header-outer #top nav { width: 100%; float: none !important; }
.sws-site #header-outer #top nav > ul.sf-menu {
	display: flex;
	align-items: center;
	width: 100%;
	gap: clamp(8px, 1.1vw, 18px);
}
.sws-site #header-outer #top nav > ul.sf-menu > li { margin: 0 !important; list-style: none !important; }
/* The design lays the header out as three groups with space-between: logo, links, phone+button.
   auto margins on the first link and on the phone split the leftover width into two equal gaps,
   which is what space-between does, without needing three separate menu containers. Measured in
   the design at 1440: 125px either side of the links. */
.sws-site #header-outer #top nav > ul.sf-menu > li:first-child { margin-left: auto !important; }
/* CLIENT CHANGE: the nav and every button now use the same face as the header phone number
   (Archivo 600) instead of IBM Plex Mono. The mono at 10px read as too light to be comfortable.
   The uppercase and letter-spacing are kept so the design language is unchanged. */
.sws-site #header-outer #top nav > ul.sf-menu > li > a {
	padding: 26px 0 !important;
	color: var(--on-dark) !important;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	line-height: 1;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 12px;
	/* The mono it replaced was tracked at .11em. Archivo 600 is a wider face, so keeping that
	   tracking pushed the nav past the container on every laptop width. .02em is the widest
	   value that still leaves the design's ~110px of breathing room either side of the links. */
	letter-spacing: .02em;
	text-transform: uppercase;
}
.sws-site #header-outer #top nav > ul.sf-menu > li > a:hover,
.sws-site #header-outer #top nav > ul.sf-menu > li.current-menu-item > a { color: #fff !important; border-bottom-color: var(--blue); }
/* Salient draws its own animated underline as a pseudo-element. Scoped to #top nav so it cannot
   reach the secondary bar's icons. */
.sws-site #header-outer #top nav > ul.sf-menu > li > a .menu-title-text::before,
.sws-site #header-outer #top nav > ul.sf-menu > li > a .menu-title-text::after,
.sws-site #header-outer #top nav > ul.sf-menu > li > a::before,
.sws-site #header-outer #top nav > ul.sf-menu > li > a::after { display: none !important; content: none !important; }

.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__phone { margin-left: auto !important; }
.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__phone > a {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 14.5px;
	letter-spacing: -.01em;
	text-transform: none;
	color: #fff !important;
	border-bottom: 0 !important;
}
.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__phone > a::before {
	content: "" !important;
	display: block !important;
	width: 14px; height: 14px;
	flex: 0 0 auto;
	background-color: var(--blue-lt);
	-webkit-mask-image: var(--i-phone); mask-image: var(--i-phone);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: contain; mask-size: contain;
}
.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__cta { margin-left: 12px !important; }
.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__cta > a {
	padding: 12px 20px !important;
	border-radius: 999px;
	background: var(--blue);
	color: #fff !important;
	font-family: var(--f-display);
	font-size: 12px;
	letter-spacing: .04em;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(30,123,234,.32);
	border-bottom: 0 !important;
	transition: background .25s ease;
}
.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__cta > a:hover { background: var(--blue-lt); color: #fff !important; }

/* Salient hides the desktop nav at a hardcoded 1000px and offers no option for it. The design
   switches at 1240, and the seven-item mono nav genuinely does not fit below that. */
@media (max-width: 1240px) {
	.sws-site #header-outer #top nav > .sf-menu { display: none !important; }
	.sws-site #header-outer .slide-out-widget-area-toggle { display: block !important; }
}
@media (max-width: 900px) {
	.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__phone { display: none !important; }
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
/* CLIENT CHANGE: buttons take the header phone number's face (Archivo 600) rather than IBM Plex
   Mono 500, which was too light to read comfortably at these sizes. Sizes are nudged and the
   tracking eased slightly so the heavier face keeps the same visual weight in the layout. */
.sws-home a.nectar-button.sws-btn,
.sws-home a.nectar-button.sws-cc__v {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 12px 0 0 !important;
	border-radius: 999px !important;
	font-family: var(--f-display);
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	box-shadow: none;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.sws-home a.nectar-button.sws-btn:last-child { margin-right: 0 !important; }
.sws-home a.nectar-button.sws-btn::before,
.sws-home a.nectar-button.sws-btn::after { display: none !important; content: none !important; }
.sws-home a.nectar-button.sws-btn > span,
.sws-home a.nectar-button.sws-cc__v > span { padding: 0 !important; color: inherit !important; }

.sws-home a.nectar-button.sws-btn--solid {
	padding: 17px 30px !important;
	background-color: var(--blue) !important;
	color: #fff !important;
	font-size: 12px;
	letter-spacing: .09em;
	box-shadow: 0 12px 32px rgba(30,123,234,.36);
}
.sws-home a.nectar-button.sws-btn--solid:hover { background-color: var(--blue-lt) !important; color: #fff !important; }

.sws-home a.nectar-button.sws-btn--ghost {
	padding: 17px 30px !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid rgba(255,255,255,.24);
	color: #fff !important;
	font-size: 12px;
	letter-spacing: .09em;
}
.sws-home a.nectar-button.sws-btn--ghost:hover { border-color: var(--blue-lt); color: var(--blue-lt) !important; background-color: transparent !important; }

.sws-home a.nectar-button.sws-btn--white {
	padding: 15px 26px !important;
	background-color: #fff !important;
	border: 1px solid var(--line-light-3);
	color: var(--ink-text) !important;
	font-size: 11.5px;
	letter-spacing: .09em;
	box-shadow: 0 8px 22px rgba(10,21,36,.06);
}
.sws-home a.nectar-button.sws-btn--white:hover { border-color: var(--blue); color: var(--blue) !important; background-color: #fff !important; }

.sws-home a.nectar-button.sws-btn--outline {
	padding: 15px 26px !important;
	background-color: transparent !important;
	border: 1px solid var(--line-light-2);
	color: var(--ink-text) !important;
	font-size: 11.5px;
	letter-spacing: .09em;
}
.sws-home a.nectar-button.sws-btn--outline:hover { border-color: var(--blue); color: var(--blue) !important; background-color: transparent !important; }

.sws-home a.nectar-button.sws-btn--arrow > span::after {
	content: "→"; font-size: 13px; margin-left: 11px; display: inline-block; transition: transform .25s ease;
}
.sws-home a.nectar-button.sws-btn--arrow:hover > span::after { transform: translateX(3px); }

.sws-home .sws-svc__copy a.nectar-button.sws-btn,
.sws-home .sws-faqs__intro a.nectar-button.sws-btn,
.sws-home .sws-about__copy a.nectar-button.sws-btn,
.sws-home .sws-why__headbtn a.nectar-button.sws-btn { padding: 15px 26px !important; font-size: 11.5px; }
.sws-home .sws-svc__copy a.nectar-button.sws-btn--solid { box-shadow: 0 10px 28px rgba(30,123,234,.28); }
.sws-home .sws-about__copy a.nectar-button.sws-btn--solid,
.sws-home .sws-faqs__intro a.nectar-button.sws-btn--solid { box-shadow: 0 10px 28px rgba(30,123,234,.26); }
.sws-home .sws-why__headbtn a.nectar-button.sws-btn--ghost { border-color: rgba(255,255,255,.22); }

/* ==========================================================================
   5. SHARED: eyebrow, heading, lead
   Eyebrows are Text Blocks now, so they are a .wpb_text_column wrapping a <p>.
   ========================================================================== */
.sws-home .sws-eyebrow > p {
	display: flex;
	width: -moz-fit-content;
	width: fit-content;
	align-items: center;
	gap: 9px;
	font-family: var(--f-mono);
	font-size: 9.5px;
	letter-spacing: .19em;
	text-transform: uppercase;
	color: var(--blue);
	line-height: 1.4;
}
.sws-home .sws-eyebrow { margin-bottom: 15px !important; }
.sws-home .sws-eyebrow > p::before { content: ""; width: 16px; height: 1px; background: currentColor; flex: 0 0 auto; }
.sws-home .sws-eyebrow--light > p { color: var(--blue-lt); }

/* the AI eyebrow is a pill with a pulsing dot instead of a rule.
   The padding is !important because the global last-paragraph reset would otherwise flatten the
   bottom, which pushed the pill text off centre. */
.sws-home .sws-eyebrow--pill { margin-bottom: 16px !important; }
.sws-home .sws-eyebrow--pill > p {
	padding: 7px 15px !important;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--line-light-3);
	box-shadow: 0 6px 18px rgba(10,21,36,.05);
	letter-spacing: .17em;
}
.sws-home .sws-eyebrow--pill > p::before {
	width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
	animation: sws-blip 2.2s ease-in-out infinite;
}

/* the hero badge is a bordered pill on dark */
.sws-home .sws-eyebrow--badge { margin-bottom: clamp(18px, 2.2vw, 26px) !important; }
.sws-home .sws-eyebrow--badge > p {
	padding: 8px 16px !important;
	border: 1px solid rgba(62,147,255,.34);
	border-radius: 999px;
	background: rgba(30,123,234,.1);
	font-size: 9.5px;
	letter-spacing: .16em;
	color: var(--blue-pale);
}
.sws-home .sws-eyebrow--badge > p::before {
	width: 5px; height: 5px; border-radius: 50%; background: var(--blue-lt);
	animation: sws-blip 2.2s ease-in-out infinite;
}

.sws-home .sws-h2 {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: clamp(26px, 3.2vw, 42px);
	line-height: 1.08;
	letter-spacing: -.03em;
	text-wrap: balance;
}
.sws-home .sws-lead > p {
	font-size: 16px;
	line-height: 1.72;
	color: var(--body-light);
	text-wrap: pretty;
}
.sws-home .sws-lead { margin-top: 13px !important; }
.sws-home .sws-lead--dark > p { color: var(--body-dark); line-height: 1.74; }
.sws-home .sws-why .sws-lead > p { font-size: 16.5px; }
/* The design caps these with a ch measure on a 16px wrapper. 1ch is 0.6em in IBM Plex Sans, so
   60ch at 16px is 576px; applying `60ch` to a 42px heading would be four times too wide. */
.sws-home .sws-sectors .sws-h2,
.sws-home .sws-sectors .sws-lead,
.sws-home .sws-reviews__h2 { max-width: 36rem; }

/* ==========================================================================
   6. ICONS + LISTS
   nectar_icon renders .nectar_icon_wrap > .nectar_icon > .im-icon-wrap > svg.
   The wrapper becomes the design's tinted tile; the svg path takes the colour.
   ========================================================================== */
.sws-home .nectar_icon_wrap { margin: 0 !important; }
.sws-home .nectar_icon_wrap .nectar_icon,
.sws-home .nectar_icon_wrap .im-icon-wrap { display: flex; align-items: center; justify-content: center; }
.sws-home .nectar_icon_wrap svg { display: block; }

/* The element's own colour param does not reach the inline SVG reliably, and an icon that lands
   accent-blue on an accent-blue tile is invisible (which is what happened to the AI step icons).
   The fill is stated per context instead, so it can never be wrong. */
.sws-home .nectar_icon_wrap svg path { fill: currentColor; }
.sws-home .sws-chip  .nectar_icon_wrap { color: var(--blue-lt); }
.sws-home .sws-sector .nectar_icon_wrap { color: var(--blue); }
.sws-home .sws-step   .nectar_icon_wrap { color: #fff; }
.sws-home .sws-stat   .nectar_icon_wrap { color: var(--blue); }
.sws-home .sws-wcard  .nectar_icon_wrap { color: var(--blue-lt); }
.sws-home .sws-cc     .nectar_icon_wrap { color: var(--blue-lt); }
.sws-home .sws-cc--wa .nectar_icon_wrap { color: var(--wa); }

.sws-home .sws-tile .nectar_icon_wrap,
.sws-home .sws-chip .nectar_icon_wrap,
.sws-home .sws-sector .nectar_icon_wrap,
.sws-home .sws-step .nectar_icon_wrap,
.sws-home .sws-stat .nectar_icon_wrap,
.sws-home .sws-wcard .nectar_icon_wrap,
.sws-home .sws-cc .nectar_icon_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

/* Lists: every list on the page is a real <ul> in a Text Block. */
.sws-home .wpb_text_column ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.sws-home .wpb_text_column ul li { list-style: none !important; margin: 0; padding: 0; }
.sws-home .wpb_text_column ul li::before,
.sws-home .wpb_text_column ul li::marker { content: none !important; }

/* pill lists — sector tags and coverage areas */
.sws-home .sws-tags ul,
.sws-home .sws-areas ul { display: flex; flex-wrap: wrap; gap: 8px; }
.sws-home .sws-areas ul { gap: 7px; }
.sws-home .sws-tags ul li {
	padding: 7px 13px;
	border-radius: 999px;
	background: #f0f4f9;
	font-family: var(--f-mono);
	font-size: 9.5px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--tag-text);
	line-height: 1.2;
}
.sws-home .sws-areas ul li {
	padding: 7px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--line-light);
	font-size: 12.5px;
	color: var(--tag-text);
	line-height: 1.2;
}

/* brand wordmarks */
.sws-home .sws-brands ul { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(20px, 3vw, 40px); }
.sws-home .sws-brands ul li {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(14px, 1.3vw, 17px);
	letter-spacing: .06em;
	color: var(--muted-3);
	text-transform: uppercase;
}

/* service proof points, with the design's circled tick */
.sws-home .sws-svc__points { margin-bottom: clamp(24px, 2.8vw, 32px) !important; }
.sws-home .sws-svc__points ul { display: flex; flex-direction: column; gap: 12px; }
.sws-home .sws-svc__points ul li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 15px;
	line-height: 1.62;
}
.sws-home .sws-svc__points ul li::before {
	content: "" !important;
	flex: 0 0 auto;
	width: 17px; height: 17px;
	margin-top: 3px;
	border-radius: 50%;
	background-color: rgba(30,123,234,.14);
	background-image: var(--i-tick);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
}
.sws-home .sws-svc--light .sws-svc__points ul li { color: var(--tag-text); }
.sws-home .sws-svc--dark  .sws-svc__points ul li { color: var(--on-dark-2); }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.sws-home .sws-hero {
	background: var(--ink);
	min-height: min(880px, 94vh);
	display: flex !important;
	align-items: center;
	overflow: hidden;
	padding-top: clamp(44px, 5vw, 76px) !important;
	padding-bottom: clamp(44px, 5vw, 76px) !important;
}
/* Two gradient washes and a faint grid over the video. A row pseudo-element never composites
   above Salient's .row-bg, so these sit on the video wrapper, which does. */
.sws-home .sws-hero .nectar-video-wrap::before,
.sws-home .sws-hero .nectar-video-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.sws-home .sws-hero .nectar-video-wrap::before {
	background: linear-gradient(100deg, rgba(3,8,15,.95) 0%, rgba(3,8,15,.86) 38%, rgba(4,12,26,.52) 68%, rgba(4,12,26,.72) 100%);
	z-index: 1;
}
.sws-home .sws-hero .nectar-video-wrap::after {
	background: linear-gradient(180deg, rgba(3,8,15,.7) 0%, transparent 30%, rgba(5,13,26,.9) 100%);
	z-index: 2;
}
.sws-home .sws-hero > .row_col_wrap_12::before {
	content: "";
	position: absolute;
	inset: calc(var(--sec-y) * -1) calc(var(--gut) * -1);
	background-image:
		linear-gradient(rgba(62,147,255,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(62,147,255,.045) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(120% 90% at 22% 30%, #000, transparent 74%);
	mask-image: radial-gradient(120% 90% at 22% 30%, #000, transparent 74%);
	pointer-events: none;
	z-index: 0;
}
.sws-home .sws-hero > .row_col_wrap_12 > * { position: relative; z-index: 1; }
.sws-home .sws-hero video.nectar-video-bg { filter: saturate(.85) contrast(1.04) brightness(.8); }

/* The headline is three heading elements sharing one 17ch measure: line one is a block, and the
   two on line two flow inline so the colour changes mid-line exactly as designed. A <span> in a
   heading's text attribute would be stripped by the editor on the client's first Update. */
.sws-home .sws-hero__titlerow { margin: 0 !important; }
.sws-home .sws-hero__title { width: 100% !important; }
.sws-home .sws-hero__title > .vc_column-inner > .wpb_wrapper {
	font-size: clamp(34px, 4.8vw, 68px);
	max-width: 17ch;
}
.sws-home .sws-hero__h1 {
	display: inline !important;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(34px, 4.8vw, 68px);
	line-height: 1.02;
	letter-spacing: -.032em;
	text-transform: uppercase;
	color: #fff;
}
.sws-home .sws-hero__h1--l1 { display: block !important; }
.sws-home .sws-hero__h1--l2 { padding-right: .25em; }
.sws-home .sws-hero__h1--accent { color: var(--blue-lt); }

.sws-home .sws-hero__lead { margin-top: clamp(18px, 2.2vw, 26px) !important; }
.sws-home .sws-hero__lead > p {
	max-width: 54ch;
	font-size: clamp(15.5px, 1.2vw, 17.5px);
	line-height: 1.74;
	color: var(--body-dark-2);
	text-wrap: pretty;
}
.sws-home .sws-hero__lead a { color: var(--blue-pale); border-bottom: 1px solid rgba(127,180,255,.4); }
.sws-home .sws-hero__lead ~ a.nectar-button { margin-top: clamp(24px, 2.8vw, 34px) !important; }

/* hero chips: icon tile beside a two-line label */
.sws-home .sws-hero__chips { margin-top: clamp(30px, 3.6vw, 46px) !important; }
.sws-home .sws-hero__chips .row_col_wrap_12_inner { display: flex !important; flex-wrap: wrap; gap: 14px; }
.sws-home .sws-chip { width: auto !important; flex: 0 0 auto !important; max-width: 100%; }
.sws-home .sws-chip > .vc_column-inner {
	height: 100%;
	padding: 13px 18px !important;
	border-radius: 12px;
	border: 1px solid var(--line-card);
	background: rgba(6,15,30,.66);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.sws-home .sws-chip > .vc_column-inner > .wpb_wrapper {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	column-gap: 11px;
	align-items: center;
	height: 100%;
}
.sws-home .sws-chip .nectar_icon_wrap {
	width: 34px; height: 34px;
	border-radius: 9px;
	background: rgba(30,123,234,.14);
}
/* one Text Block: bold title, line break, sub */
.sws-home .sws-chip__body > p { font-size: 11.5px; line-height: 1.35; color: var(--muted-3); }
.sws-home .sws-chip__body strong {
	display: block;
	margin-bottom: 2px;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: -.005em;
	color: #fff;
}

/* ==========================================================================
   8. RISCO TRUST STRIP
   ========================================================================== */
.sws-home .sws-trust {
	background: var(--ink);
	border-top: 1px solid var(--line-dark);
	border-bottom: 1px solid var(--line-dark);
	padding-top: clamp(26px, 3vw, 36px) !important;
	padding-bottom: clamp(26px, 3vw, 36px) !important;
}
.sws-home .sws-trust__row .row_col_wrap_12_inner {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px 40px;
}
.sws-home .sws-trust__risco { width: auto !important; flex: 0 1 auto !important; }
/* the plaque is two Text Blocks that must read as one bordered badge beside the copy */
.sws-home .sws-trust__risco > .vc_column-inner > .wpb_wrapper {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "mark copy" "sub copy";
	align-items: center;
	column-gap: 16px;
}
.sws-home .sws-trust__mark,
.sws-home .sws-trust__marksub {
	background: rgba(30,123,234,.08);
	border: 1px solid rgba(62,147,255,.3);
	align-self: stretch;
}
.sws-home .sws-trust__mark {
	grid-area: mark;
	padding: 12px 18px 0;
	border-radius: 11px 11px 0 0;
	border-bottom: 0;
}
.sws-home .sws-trust__mark > p {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: .06em;
	color: #fff;
	line-height: 1.15;
}
.sws-home .sws-trust__marksub {
	grid-area: sub;
	padding: 3px 18px 12px;
	border-radius: 0 0 11px 11px;
	border-top: 0;
}
.sws-home .sws-trust__marksub > p {
	font-family: var(--f-mono);
	font-size: 8px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blue-pale);
	line-height: 1.4;
}
.sws-home .sws-trust__copy { grid-area: copy; }
.sws-home .sws-trust__copy > p { max-width: 34ch; font-size: 13.5px; line-height: 1.62; color: var(--muted-2); }
.sws-home .sws-trust__copy a { color: var(--blue-pale); }
.sws-home .sws-trust__brands { width: auto !important; flex: 1 1 320px !important; min-width: 260px; }
.sws-home .sws-trust__label { margin-bottom: 14px !important; }
.sws-home .sws-trust__label > p {
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted-4);
}

/* ==========================================================================
   9. WHO WE WORK FOR
   ========================================================================== */
.sws-home .sws-sectors { background: var(--light-bg); color: var(--ink-text); }
.sws-home .sws-sectors .sws-h2 { margin-bottom: 13px !important; }
.sws-home .sws-sectors .sws-lead { margin-top: 0 !important; margin-bottom: clamp(30px, 3.6vw, 46px) !important; }
.sws-home .sws-sectors__grid .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(16px, 1.8vw, 24px);
	align-items: stretch;
}
.sws-home .sws-sector { width: auto !important; }
.sws-home .sws-sector > .vc_column-inner {
	height: 100%;
	padding: clamp(26px, 2.8vw, 38px) !important;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--line-light);
	transition: transform .28s ease, box-shadow .28s ease;
}
.sws-home .sws-sector > .vc_column-inner:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(10,21,36,.1); }
.sws-home .sws-sector > .vc_column-inner > .wpb_wrapper {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	grid-template-areas: "ic t" "body body" "tags tags";
	column-gap: 14px;
	align-items: center;
	height: 100%;
}
.sws-home .sws-sector .nectar_icon_wrap {
	grid-area: ic;
	width: 48px; height: 48px;
	border-radius: 12px;
	background: rgba(30,123,234,.1);
}
.sws-home .sws-sector__t {
	grid-area: t;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: -.022em;
}
.sws-home .sws-sector__b { grid-area: body; margin-top: 18px !important; }
.sws-home .sws-sector__b > p { font-size: 15.5px; line-height: 1.7; color: var(--body-light); text-wrap: pretty; }
.sws-home .sws-sector .sws-tags { grid-area: tags; margin-top: 20px !important; }

/* ==========================================================================
   10. SERVICE BANDS
   ========================================================================== */
.sws-home .sws-svc--light { background: #fff; color: var(--ink-text); border-top: 1px solid var(--line-light); }
.sws-home .sws-svc--dark  { background: var(--navy); color: #fff; border-top: 1px solid var(--line-dark); }

.sws-home .sws-svc__row .row_col_wrap_12_inner {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(30px, 4vw, 64px);
}
.sws-home .sws-svc__copy  { width: auto !important; flex: 1 1 400px !important; min-width: 290px; }
.sws-home .sws-svc__media { width: auto !important; flex: 1 1 420px !important; min-width: 290px; }
.sws-home .sws-svc--flip .sws-svc__row .row_col_wrap_12_inner { flex-direction: row-reverse; }

/* The "01 — Burglar alarms" line. The ordinal is a CSS counter, so adding or reordering a service
   band renumbers the page automatically instead of leaving the client to retype it. */
.sws-home { counter-reset: swsSvc; }
.sws-home .sws-svc { counter-increment: swsSvc; }
.sws-home .sws-svc__kicker > p {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--f-mono);
	font-size: 9.5px;
	letter-spacing: .19em;
	text-transform: uppercase;
}
/* number, then the design's 22px rule, then the kicker text. The rule is drawn in the ::before's
   own padding, because a text node cannot be reordered between two pseudo-elements. */
.sws-home .sws-svc__kicker > p::before {
	content: counter(swsSvc, decimal-leading-zero);
	padding-right: 36px;
	background-image: linear-gradient(var(--blue), var(--blue));
	background-size: 22px 1px;
	background-position: right center;
	background-repeat: no-repeat;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--blue);
}
.sws-home .sws-svc--light .sws-svc__kicker > p { color: var(--blue); }
.sws-home .sws-svc--dark  .sws-svc__kicker > p { color: var(--blue-lt); }
.sws-home .sws-svc__title {
	max-width: 22ch;
	margin-top: 16px !important;
	margin-bottom: 15px !important;
	font-size: clamp(25px, 3.1vw, 40px);
	line-height: 1.09;
}
.sws-home .sws-svc__body { margin-bottom: clamp(22px, 2.6vw, 30px) !important; }
.sws-home .sws-svc__body > p { max-width: 52ch; font-size: 16px; line-height: 1.74; text-wrap: pretty; }
.sws-home .sws-svc--light .sws-svc__body > p { color: var(--body-light); }
.sws-home .sws-svc--dark  .sws-svc__body > p { color: var(--body-dark); }
.sws-home .sws-svc--dark  a.nectar-button.sws-btn--ghost { border-color: rgba(255,255,255,.22); color: #fff !important; }
.sws-home .sws-svc--light a.nectar-button.sws-btn--ghost { border-color: var(--line-light-2); color: var(--ink-text) !important; }
.sws-home .sws-svc--light a.nectar-button.sws-btn--ghost:hover,
.sws-home .sws-svc--dark  a.nectar-button.sws-btn--ghost:hover { border-color: var(--blue-lt); color: var(--blue-lt) !important; }

.sws-home .sws-svc__media > .vc_column-inner {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: var(--ink);
	box-shadow: 0 34px 80px rgba(3,8,15,.32);
}
.sws-home .sws-svc--light .sws-svc__media > .vc_column-inner { border: 1px solid var(--line-light); }
.sws-home .sws-svc--dark  .sws-svc__media > .vc_column-inner { border: 1px solid var(--line-card-2); }

/* Salient sizes the player with a padding-top ratio box and absolutely positions the <video>
   inside it. The design wants a fixed fluid height with a cover crop, so the HEIGHT moves to the
   ratio box: zeroing its padding without a height collapses it to 0, the absolute video is
   clipped away by overflow:hidden, and it never plays. */
.sws-home .sws-svc__media .wpb_video_wrapper,
.sws-home .sws-ai__band .wpb_video_wrapper,
.sws-home .sws-about__video .wpb_video_wrapper {
	position: relative;
	padding-top: 0 !important;
	aspect-ratio: auto !important;
}
.sws-home .sws-svc__media .wpb_video_wrapper   { height: clamp(300px, 36vw, 440px) !important; }
.sws-home .sws-about__video .wpb_video_wrapper { height: clamp(260px, 30vw, 360px) !important; }
.sws-home .sws-svc__media video.nectar-video-self-hosted,
.sws-home .sws-ai__band video.nectar-video-self-hosted,
.sws-home .sws-about__video video.nectar-video-self-hosted {
	position: absolute !important;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
	background: var(--ink);
}
.sws-home .sws-svc__media > .vc_column-inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(3,8,15,.24) 0%, transparent 34%, rgba(3,8,15,.72) 100%);
	pointer-events: none;
	z-index: 1;
}
.sws-home .sws-svc__overlay {
	position: absolute;
	left: 16px; top: 16px;
	z-index: 2;
	padding: 7px 13px;
	border-radius: 999px;
	border: 1px solid rgba(62,147,255,.32);
	background: rgba(3,8,15,.76);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.sws-home .sws-svc__overlay > p {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--on-dark-3);
	line-height: 1.4;
}
.sws-home .sws-svc__overlay > p::before {
	content: "";
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--blue-lt);
	animation: sws-blip 1.8s ease-in-out infinite;
	flex: 0 0 auto;
}
.sws-home .sws-svc__foot { position: absolute; bottom: 14px; z-index: 2; pointer-events: none; }
.sws-home .sws-svc__foot > p {
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #8fa2b8;
}
.sws-home .sws-svc__foot--l { left: 18px; }
.sws-home .sws-svc__foot--r { right: 18px; }

/* ==========================================================================
   11. AI PROCESS
   ========================================================================== */
.sws-home .sws-ai {
	background: linear-gradient(180deg, #ffffff 0%, #f2f7fd 58%, #eaf1fa 100%);
	color: var(--ink-text);
	overflow: hidden;
	padding-top: clamp(58px, 7vw, 104px) !important;
	padding-bottom: clamp(58px, 7vw, 104px) !important;
}
.sws-home .sws-ai::before {
	content: "";
	position: absolute;
	top: -22%; left: 46%;
	width: 56%; height: 78%;
	background: radial-gradient(closest-side, rgba(30,123,234,.14), transparent 72%);
	pointer-events: none;
	z-index: 0;
}
.sws-home .sws-ai::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(30,123,234,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(30,123,234,.05) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(100% 70% at 70% 12%, #000, transparent 72%);
	mask-image: radial-gradient(100% 70% at 70% 12%, #000, transparent 72%);
	pointer-events: none;
	z-index: 0;
}
.sws-home .sws-ai__head { margin-bottom: clamp(34px, 4.2vw, 56px) !important; }
.sws-home .sws-ai__head .row_col_wrap_12_inner {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 26px;
}
.sws-home .sws-ai__headcopy { width: auto !important; flex: 1 1 460px !important; }
.sws-home .sws-ai__headbtn  { width: auto !important; flex: 0 0 auto !important; }
.sws-home .sws-ai__h2 { display: block; font-size: clamp(27px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.032em; }
.sws-home .sws-ai__h2--accent { color: var(--blue) !important; margin-bottom: 15px !important; }
.sws-home .sws-ai .sws-lead { margin-top: 0 !important; }
.sws-home .sws-ai .sws-lead > p { max-width: 54ch; font-size: 16.5px; line-height: 1.74; color: var(--body-light-2); }

/* steps */
.sws-home .sws-ai__steps { position: relative; margin-bottom: clamp(32px, 3.8vw, 48px) !important; }
.sws-home .sws-ai__steps::before {
	content: "";
	position: absolute;
	left: 6%; right: 6%;
	top: 37px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--line-light-4) 12%, var(--line-light-4) 88%, transparent);
	pointer-events: none;
	z-index: 0;
}
.sws-home .sws-ai__steps .row_col_wrap_12_inner {
	position: relative;
	z-index: 1;
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
	align-items: stretch;
}
.sws-home .sws-step { width: auto !important; }
.sws-home .sws-step > .vc_column-inner {
	height: 100%;
	padding: clamp(22px, 2.4vw, 30px) !important;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--line-light);
	box-shadow: 0 10px 30px rgba(10,21,36,.05);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sws-home .sws-step > .vc_column-inner:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(10,21,36,.1); border-color: #bfd6f5; }
.sws-home .sws-step > .vc_column-inner > .wpb_wrapper { display: block; height: 100%; }
.sws-home .sws-step .nectar_icon_wrap {
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--blue);
	margin: -8px 0 20px !important;
	box-shadow: 0 8px 22px rgba(30,123,234,.34);
	animation: sws-ring 3.6s ease-out infinite;
}
/* same pattern: the step ordinal is a counter, the rule is drawn in the ::before's padding */
.sws-home .sws-ai__steps { counter-reset: swsStep; }
.sws-home .sws-step { counter-increment: swsStep; }
.sws-home .sws-step__kicker > p {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--blue);
}
.sws-home .sws-step__kicker > p::before {
	content: counter(swsStep, decimal-leading-zero);
	padding-right: 23px;
	background-image: linear-gradient(var(--line-light-4), var(--line-light-4));
	background-size: 14px 1px;
	background-position: right center;
	background-repeat: no-repeat;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .03em;
	color: #9db4d2;
}
.sws-home .sws-step__t {
	margin-top: 12px !important;
	margin-bottom: 10px !important;
	min-height: 2.56em;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: -.018em;
	line-height: 1.28;
}
.sws-home .sws-step__b > p { font-size: 14.5px; line-height: 1.66; color: var(--body-light); text-wrap: pretty; }

/* the wide iRISCO band */
.sws-home .sws-ai__bandrow { margin-bottom: clamp(22px, 2.4vw, 30px) !important; }
.sws-home .sws-ai__band { width: 100% !important; }
.sws-home .sws-ai__band > .vc_column-inner {
	position: relative;
	min-height: clamp(290px, 33vw, 420px);
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid #d7e3f2;
	background: var(--ink);
	box-shadow: 0 30px 70px rgba(10,21,36,.16);
}
/* The column wrapper stays in normal flow and owns the height; the video player is lifted out of
   flow behind it. The player has a .wpb_wrapper of its own, so these are scoped to direct
   children — an unscoped `.sws-ai__band .wpb_wrapper` hits both. */
.sws-home .sws-ai__band > .vc_column-inner > .wpb_wrapper {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	min-height: clamp(290px, 33vw, 420px);
	padding: clamp(22px, 3vw, 46px);
}
/* The still image sits behind the text. image_with_animation puts el_class on the <img>, and
   Salient forces img{height:auto!important}, so the cover fill needs inset:0 plus !important. */
.sws-home .sws-ai__band .img-with-aniamtion-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	overflow: hidden;
}
.sws-home .sws-ai__band .img-with-aniamtion-wrap .hover-wrap,
.sws-home .sws-ai__band .img-with-aniamtion-wrap .hover-wrap-inner,
.sws-home .sws-ai__band .img-with-aniamtion-wrap .inner { display: block; width: 100%; height: 100%; }
.sws-home .sws-ai__band img.sws-ai__bandimg {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center 35%;
	/* the client asked for a properly dark band, so the picture is knocked well back */
	filter: brightness(.26) saturate(.6);
}
.sws-home .sws-ai__band > .vc_column-inner {
	background: var(--ink);
}
.sws-home .sws-ai__band > .vc_column-inner::after {
	content: "";
	position: absolute;
	inset: 0;
	/* an even wash rather than a side-to-side fade, so the whole band reads dark */
	background: linear-gradient(90deg, rgba(3,8,15,.92) 0%, rgba(3,8,15,.86) 55%, rgba(3,8,15,.8) 100%);
	pointer-events: none;
	z-index: 1;
}
.sws-home .sws-ai__bandeyebrow,
.sws-home .sws-ai__bandtitle,
.sws-home .sws-ai__bandbody { position: relative; z-index: 2; max-width: min(460px, 64%); }
.sws-home .sws-ai__bandeyebrow > p {
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--blue-pale);
}
.sws-home .sws-ai__bandtitle {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: clamp(19px, 2.3vw, 30px);
	letter-spacing: -.026em;
	line-height: 1.14;
}
.sws-home .sws-ai__bandbody > p { font-size: 14.5px; line-height: 1.7; color: var(--body-dark-2); text-wrap: pretty; }
.sws-home .sws-ai__bandcredit {
	position: absolute;
	right: 16px; top: 16px;
	z-index: 3;
	max-width: none;
	padding: 7px 13px;
	border-radius: 999px;
	border: 1px solid rgba(62,147,255,.32);
	background: rgba(3,8,15,.76);
}
.sws-home .sws-ai__bandcredit > p {
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--on-dark-3);
}

/* stat bar — native milestone elements */
.sws-home .sws-ai__stats .row_col_wrap_12_inner {
	display: flex !important;
	flex-wrap: wrap;
	border-radius: 16px;
	border: 1px solid var(--line-light);
	background: #fff;
	box-shadow: 0 12px 34px rgba(10,21,36,.06);
	overflow: hidden;
}
.sws-home .sws-stat { width: auto !important; flex: 1 1 190px !important; }
.sws-home .sws-stat > .vc_column-inner {
	height: 100%;
	padding: clamp(20px, 2.2vw, 28px) clamp(16px, 2vw, 28px) !important;
	border-left: 1px solid #edf1f6;
}
.sws-home .sws-stat > .vc_column-inner > .wpb_wrapper {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 14px;
	align-items: center;
	height: 100%;
}
.sws-home .sws-stat .nectar_icon_wrap {
	width: 44px; height: 44px;
	border-radius: 11px;
	background: rgba(30,123,234,.1);
}
.sws-home .sws-stat .nectar-milestone { margin: 0 !important; }
.sws-home .sws-stat .nectar-milestone .number {
	display: flex;
	align-items: baseline;
	font-family: var(--f-display) !important;
	font-weight: 700 !important;
	font-size: clamp(21px, 2.2vw, 28px) !important;
	letter-spacing: -.03em;
	line-height: 1 !important;
	color: var(--ink-text) !important;
}
.sws-home .sws-stat .nectar-milestone .number span { font-size: inherit !important; line-height: 1 !important; }
.sws-home .sws-stat .nectar-milestone .symbol-wrap { font-size: inherit !important; line-height: 1 !important; }
.sws-home .sws-stat .nectar-milestone .symbol { font-size: inherit !important; color: inherit !important; }
.sws-home .sws-stat .nectar-milestone .subject {
	margin-top: 6px !important;
	font-family: var(--f-mono) !important;
	font-size: 9px !important;
	font-weight: 400 !important;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--muted-3) !important;
}

/* ==========================================================================
   12. WHY CHOOSE US
   CLIENT CHANGE 2: fixed at three per row so both rows are equal (3 + 3).
   ========================================================================== */
.sws-home .sws-why {
	background: var(--navy);
	color: #fff;
	overflow: hidden;
	padding-top: clamp(58px, 7vw, 104px) !important;
	padding-bottom: clamp(58px, 7vw, 104px) !important;
}
.sws-home .sws-why::before {
	content: "";
	position: absolute;
	top: -14%; left: -10%;
	width: 46%; height: 66%;
	background: radial-gradient(closest-side, rgba(30,123,234,.16), transparent 72%);
	filter: blur(30px);
	pointer-events: none;
	z-index: 0;
}
.sws-home .sws-why__head { margin-bottom: clamp(32px, 3.8vw, 50px) !important; }
.sws-home .sws-why__head .row_col_wrap_12_inner {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 26px;
}
.sws-home .sws-why__headcopy { width: auto !important; flex: 1 1 480px !important; max-width: 62ch; }
.sws-home .sws-why__headbtn  { width: auto !important; flex: 0 0 auto !important; }
.sws-home .sws-why__h2 { display: block; font-size: clamp(27px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.032em; }
.sws-home .sws-why .sws-lead { margin-top: 14px !important; }

.sws-home .sws-why__grid .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.5vw, 20px);
	align-items: stretch;
}
.sws-home .sws-wcard { width: auto !important; }
.sws-home .sws-wcard > .vc_column-inner {
	position: relative;
	height: 100%;
	padding: clamp(24px, 2.5vw, 32px) !important;
	border-radius: 16px;
	border: 1px solid var(--line-card);
	background: linear-gradient(165deg, rgba(11,24,44,.9), rgba(6,15,30,.72));
	overflow: hidden;
	transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sws-home .sws-wcard > .vc_column-inner:hover { transform: translateY(-6px); border-color: #2a4a78; box-shadow: 0 26px 56px rgba(0,0,0,.42); }
.sws-home .sws-wcard > .vc_column-inner > .wpb_wrapper { display: block; height: 100%; }
/* the watermark ordinal is a counter, so the grid renumbers itself if a card is added */
.sws-home .sws-why__grid { counter-reset: swsWhy; }
.sws-home .sws-wcard { counter-increment: swsWhy; }
.sws-home .sws-wcard > .vc_column-inner::before {
	content: counter(swsWhy, decimal-leading-zero);
	position: absolute;
	right: 22px; top: 20px;
	z-index: 1;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 34px;
	letter-spacing: -.03em;
	line-height: 1;
	color: rgba(62,147,255,.14);
	pointer-events: none;
}
.sws-home .sws-wcard .nectar_icon_wrap {
	width: 48px; height: 48px;
	border-radius: 13px;
	background: rgba(30,123,234,.14);
	border: 1px solid rgba(62,147,255,.24);
	margin-bottom: 22px !important;
}
.sws-home .sws-wcard__t {
	margin-bottom: 11px !important;
	min-height: 2.56em;
	padding-right: 30px;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 17.5px;
	letter-spacing: -.02em;
	line-height: 1.28;
}
.sws-home .sws-wcard__b > p { font-size: 14.5px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }

/* ==========================================================================
   13. ABOUT
   About and Contact use REAL top-level columns, because each nests an inner row
   of its own and WPBakery cannot hold an inner row inside an inner column.
   ========================================================================== */
.sws-home .sws-about { background: #fff; color: var(--ink-text); }
.sws-home .sws-about > .row_col_wrap_12 {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(30px, 4vw, 64px);
}
.sws-home .sws-about__copy  { width: auto !important; flex: 1 1 420px !important; min-width: 290px; }
.sws-home .sws-about__media { width: auto !important; flex: 1 1 400px !important; min-width: 290px; }
.sws-home .sws-about .sws-h2 { margin-bottom: 15px !important; }
.sws-home .sws-about__p { margin-bottom: 20px !important; }
.sws-home .sws-about__p > p { max-width: 52ch; font-size: 16px; line-height: 1.74; color: var(--body-light); text-wrap: pretty; }
.sws-home .sws-about__p + .sws-about__p { margin-bottom: clamp(24px, 3vw, 34px) !important; }

.sws-home .sws-about__video > .vc_column-inner {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--line-light);
	background: var(--ink);
}
.sws-home .sws-about__video > .vc_column-inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(3,8,15,.8) 100%);
	pointer-events: none;
	z-index: 1;
}
.sws-home .sws-about__foot { position: absolute; bottom: 16px; z-index: 2; }
.sws-home .sws-about__foot > p {
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--on-dark-3);
}
.sws-home .sws-about__foot--l { left: 18px; }
.sws-home .sws-about__foot--r { right: 18px; }
.sws-home .sws-about__foot--r > p { color: var(--blue-pale); }

.sws-home .sws-about__areas { margin-top: 16px !important; }
.sws-home .sws-about__areasin > .vc_column-inner {
	padding: 20px 22px !important;
	border-radius: 14px;
	border: 1px solid var(--line-light);
	background: var(--light-bg);
}
.sws-home .sws-about__areaslabel { margin-bottom: 13px !important; }
.sws-home .sws-about__areaslabel > p {
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--blue);
}

/* ==========================================================================
   14. REVIEWS — native testimonial elements
   Salient renders a <blockquote> with a big quote glyph, a speech-bubble tail
   and the stars inline after the quote. The design has none of that chrome and
   puts the stars on top, so they are repositioned rather than re-marked-up.
   ========================================================================== */
.sws-home .sws-reviews { background: var(--navy); color: #fff; }
.sws-home .sws-reviews > .row_col_wrap_12 > .sws-section__col > .vc_column-inner > .wpb_wrapper { text-align: center; }
.sws-home .sws-reviews .sws-eyebrow > p { margin-left: auto; margin-right: auto; }
.sws-home .sws-reviews__h2 { margin: 0 auto 18px !important; }

/* the rating pill is one Text Block: five stars, a bold score, then the muted count */
.sws-home .sws-rating > p {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--line-card-2);
	background: rgba(8,18,34,.7);
	font-size: 13px;
	color: var(--muted-2);
}
.sws-home .sws-rating > p::before {
	content: "";
	flex: 0 0 auto;
	width: 80px; height: 14px;
	background-image: var(--i-star);
	background-repeat: repeat-x;
	background-size: 16px 14px;
}
.sws-home .sws-rating strong {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 14.5px;
	color: #fff;
	margin-right: -6px;
}

.sws-home .sws-reviews__grid { margin-top: clamp(30px, 3.6vw, 46px) !important; }
.sws-home .sws-reviews__grid .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: clamp(14px, 1.6vw, 20px);
	align-items: stretch;
	text-align: left;
}
.sws-home .sws-rv { width: auto !important; }
.sws-home .sws-rv > .vc_column-inner { height: 100%; }
.sws-home .sws-rv blockquote {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0 !important;
	padding: clamp(22px, 2.4vw, 28px) !important;
	border: 1px solid var(--line-card) !important;
	border-radius: 14px;
	background: rgba(8,18,34,.7) !important;
	color: inherit;
}
.sws-home .sws-rv blockquote::before,
.sws-home .sws-rv blockquote::after { content: none !important; }
/* Salient's decorative quote mark and speech-bubble tail are not in the design. */
.sws-home .sws-rv blockquote .image-icon,
.sws-home .sws-rv blockquote .bottom-arrow { display: none !important; }
.sws-home .sws-rv blockquote > p {
	order: 2;
	flex: 1 1 auto;
	/* a flex column so the stars, which Salient prints INSIDE this paragraph after the quote,
	   can be ordered above the text; the quote itself becomes an anonymous flex item at order 0 */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 0 16px !important;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line-card);
	font-family: var(--f-body);
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--on-dark);
	font-style: normal;
	text-wrap: pretty;
}
.sws-home .sws-rv blockquote .star-rating-wrap { order: -1; display: block; margin-bottom: 15px; }
.sws-home .sws-rv blockquote .star-rating {
	display: block;
	width: 75px; height: 13px;
	background-image: var(--i-star);
	background-repeat: repeat-x;
	background-size: 15px 13px;
}
.sws-home .sws-rv blockquote .star-rating .filled { display: none !important; }
.sws-home .sws-rv blockquote .testimonial-name {
	order: 3;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 13.5px;
	color: #fff;
	font-style: normal;
}
.sws-home .sws-rv blockquote .title {
	order: 4;
	margin-top: 2px;
	font-size: 12px;
	color: var(--muted-3);
	font-style: normal;
}

/* ==========================================================================
   15. FAQS
   vc_tta_accordion is not registered on this Salient build and leaks raw
   shortcode text, so the accordion is Salient's own toggles/toggle, which is a
   proper parent/child builder element with correct ARIA already.
   ========================================================================== */
.sws-home .sws-faqs { background: #fff; color: var(--ink-text); }
.sws-home .sws-faqs__row .row_col_wrap_12_inner {
	display: flex !important;
	flex-wrap: wrap;
	gap: clamp(30px, 4vw, 64px);
	align-items: flex-start;
}
.sws-home .sws-faqs__intro { width: auto !important; flex: 1 1 300px !important; min-width: 270px; max-width: 420px; }
.sws-home .sws-faqs__list  { width: auto !important; flex: 1 1 480px !important; min-width: 290px; }
.sws-home .sws-faqs .sws-h2 { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 14px !important; }
.sws-home .sws-faqs .sws-lead { margin-bottom: 24px !important; }

.sws-home .sws-faqs .toggles { margin: 0; }
.sws-home .sws-faqs .toggle {
	border: 0 !important;
	border-bottom: 1px solid var(--line-light) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border-radius: 0 !important;
}
.sws-home .sws-faqs .toggle h3 { margin: 0 !important; padding: 0 !important; }
.sws-home .sws-faqs .toggle > h3 > a {
	display: flex !important;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 0 !important;
	background: none !important;
	border: 0 !important;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 16.5px;
	letter-spacing: -.016em;
	line-height: 1.36;
	color: var(--ink-text) !important;
	text-align: left;
}
.sws-home .sws-faqs .toggle > h3 > a i { display: none !important; }
.sws-home .sws-faqs .toggle > h3 > a::after {
	content: "+";
	flex: 0 0 auto;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: rgba(30,123,234,.1);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
}
.sws-home .sws-faqs .toggle.open > h3 > a::after { content: "\2212"; }
.sws-home .sws-faqs .toggle > div { padding: 0 !important; background: none !important; border: 0 !important; }
.sws-home .sws-faqs .toggle > div p {
	margin: 0 0 22px !important;
	padding: 0 !important;
	max-width: 64ch;
	font-size: 15px;
	line-height: 1.74;
	color: var(--body-light);
	text-wrap: pretty;
}

/* ==========================================================================
   16. CONTACT + FORM
   ========================================================================== */
.sws-home .sws-contact { background: var(--ink); color: #fff; overflow: hidden; }
.sws-home .sws-contact .nectar-video-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(3,8,15,.96) 0%, rgba(3,8,15,.9) 44%, rgba(6,20,42,.82) 100%);
	pointer-events: none;
	z-index: 1;
}
.sws-home .sws-contact video.nectar-video-bg { filter: saturate(.7) brightness(.5); }
.sws-home .sws-contact > .row_col_wrap_12 {
	display: flex !important;
	flex-wrap: wrap;
	gap: clamp(30px, 4vw, 68px);
	align-items: flex-start;
}
.sws-home .sws-contact__info { width: auto !important; flex: 1 1 380px !important; min-width: 290px; }
.sws-home .sws-contact__form { width: auto !important; flex: 1 1 400px !important; min-width: 290px; }
.sws-home .sws-contact__h2 { margin-bottom: 15px !important; font-size: clamp(26px, 3.3vw, 44px); line-height: 1.06; letter-spacing: -.032em; }
.sws-home .sws-contact .sws-lead { margin-bottom: clamp(26px, 3vw, 36px) !important; }
.sws-home .sws-contact .sws-lead > p { max-width: 46ch; }

/* contact cards: icon tile, small label, big value */
.sws-home .sws-contact__cards .row_col_wrap_12_inner { display: flex !important; flex-direction: column; gap: 12px; max-width: 400px; }
.sws-home .sws-cc { width: 100% !important; }
.sws-home .sws-cc > .vc_column-inner {
	position: relative;
	padding: 15px 19px !important;
	border-radius: 12px;
	border: 1px solid var(--line-card-2);
	background: rgba(8,18,34,.66);
	transition: border-color .25s ease;
}
.sws-home .sws-cc > .vc_column-inner > .wpb_wrapper {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	grid-template-areas: "ic l" "ic v";
	column-gap: 14px;
	align-items: center;
}
.sws-home .sws-cc .nectar_icon_wrap {
	grid-area: ic;
	width: 38px; height: 38px;
	border-radius: 10px;
	background: rgba(30,123,234,.14);
}
.sws-home .sws-cc--wa .nectar_icon_wrap { background: rgba(37,211,102,.14); }
.sws-home .sws-cc__l { grid-area: l; align-self: end; }
.sws-home .sws-cc__l > p {
	margin-bottom: 3px !important;
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted-2);
}
.sws-home a.nectar-button.sws-cc__v {
	grid-area: v;
	align-self: start;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	font-family: var(--f-display) !important;
	font-weight: 600;
	font-size: 16.5px;
	letter-spacing: -.014em;
	text-transform: none;
	color: #fff !important;
	justify-content: flex-start !important;
}
.sws-home .sws-cc--mail a.nectar-button.sws-cc__v { font-size: 15.5px; }
.sws-home a.nectar-button.sws-cc__v::before { display: none !important; content: none !important; }
/* the whole card is clickable, as designed, with no hand-written markup */
.sws-home a.nectar-button.sws-cc__v::after {
	display: block !important;
	content: "" !important;
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: 12px;
	background: none !important;
}
.sws-home .sws-cc:hover    > .vc_column-inner { border-color: var(--blue-lt); }
.sws-home .sws-cc--wa:hover > .vc_column-inner { border-color: var(--wa); }

/* ---- the form card ---- */
.sws-home .sws-contact__form > .vc_column-inner {
	padding: clamp(24px, 2.8vw, 36px) !important;
	border-radius: 16px;
	border: 1px solid var(--line-card-2);
	background: rgba(8,18,34,.86);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.sws-home .sws-form__title {
	margin-bottom: 20px !important;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 18.5px;
	letter-spacing: -.02em;
}
.sws-home .sws-form__note { margin-top: 13px !important; }
.sws-home .sws-form__note > p { text-align: center; font-size: 12px; color: var(--muted-3); }

/* PART Z4: the layout is a grid keyed to FIELD NAME, and CF7's auto-generated <p> and <br> are
   dissolved. Adding, renaming, reordering or deleting a field cannot break it — an unrecognised
   field simply spans the full width. */
.sws-home .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 14px; }
.sws-home .wpcf7-form p { display: contents; }
.sws-home .wpcf7-form br { display: none; }
.sws-home .wpcf7-form > *,
.sws-home .wpcf7-form .sws-f__lb--wide,
.sws-home .wpcf7-form .wpcf7-form-control-wrap,
.sws-home .wpcf7-form input.wpcf7-submit,
.sws-home .wpcf7-form .wpcf7-response-output { grid-column: 1 / -1; }
.sws-home .wpcf7-form label.sws-f__lb:not(.sws-f__lb--wide) { grid-column: span 1; }

.sws-home .wpcf7-form .sws-f__lb {
	display: block;
	font-family: var(--f-mono);
	font-size: 8.5px;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--muted-2);
	line-height: 1.4;
}
.sws-home .wpcf7-form .sws-f__lb .wpcf7-form-control-wrap { display: block; margin-top: 8px; }

.sws-home .wpcf7-form input[type="text"],
.sws-home .wpcf7-form input[type="tel"],
.sws-home .wpcf7-form input[type="email"],
.sws-home .wpcf7-form textarea {
	width: 100%;
	padding: 13px 14px !important;
	border-radius: 10px !important;
	background: rgba(3,8,15,.6) !important;
	border: 1px solid var(--line-card-2) !important;
	color: #fff !important;
	font-family: var(--f-body) !important;
	font-size: 14.5px !important;
	/* the design leaves this at normal; an explicit 1.5 made every field 3px taller than spec */
	line-height: normal;
	outline: none;
	box-shadow: none !important;
	text-transform: none;
	letter-spacing: 0;
	transition: border-color .2s ease;
}
.sws-home .wpcf7-form textarea { resize: vertical; min-height: 92px; }
.sws-home .wpcf7-form input:focus,
.sws-home .wpcf7-form textarea:focus { border-color: var(--blue-lt) !important; }
.sws-home .wpcf7-form ::placeholder { color: var(--muted-3); opacity: 1; }

.sws-home .wpcf7-form .wpcf7-radio,
.sws-home .wpcf7-form .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sws-home .wpcf7-form .wpcf7-list-item { margin: 0 !important; }
.sws-home .wpcf7-form .wpcf7-list-item > label { cursor: pointer; display: block; }
.sws-home .wpcf7-form .wpcf7-list-item input[type="radio"],
.sws-home .wpcf7-form .wpcf7-list-item input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.sws-home .wpcf7-form .wpcf7-list-item-label {
	display: inline-block;
	padding: 11px 19px;
	border-radius: 999px;
	background: transparent;
	border: 1px solid var(--line-card-2);
	color: var(--body-dark);
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.sws-home .wpcf7-form .wpcf7-checkbox .wpcf7-list-item-label { padding: 11px 17px; }
.sws-home .wpcf7-form .wpcf7-list-item > label:hover .wpcf7-list-item-label { border-color: var(--blue-lt); color: #fff; }
.sws-home .wpcf7-form .wpcf7-list-item input:checked + .wpcf7-list-item-label { background: var(--blue); border-color: var(--blue); color: #fff; }
.sws-home .wpcf7-form .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--blue-lt); outline-offset: 2px; }

.sws-home .wpcf7-form input.wpcf7-submit {
	width: 100%;
	margin-top: 6px;
	padding: 16px !important;
	border-radius: 999px !important;
	background: var(--blue) !important;
	border: 0 !important;
	color: #fff !important;
	font-family: var(--f-display) !important;
	font-size: 11.5px !important;
	letter-spacing: .09em;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 12px 32px rgba(30,123,234,.32);
	transition: background .25s ease;
}
.sws-home .wpcf7-form input.wpcf7-submit:hover { background: var(--blue-lt) !important; }
/* If a required acceptance field is ever added, CF7 disables the button with no visual change
   and the client reports it as broken. Styled up front. */
.sws-home .wpcf7-form input.wpcf7-submit:disabled,
.sws-home .wpcf7-form input.wpcf7-submit:disabled:hover {
	opacity: .45 !important;
	filter: grayscale(.4);
	cursor: not-allowed !important;
	box-shadow: none !important;
}
.sws-home .wpcf7-spinner { margin: 8px auto 0; display: block; }
.sws-home .wpcf7-response-output {
	margin: 14px 0 0 !important;
	padding: 12px 14px !important;
	border-radius: 10px !important;
	border-width: 1px !important;
	font-size: 13.5px;
	color: #fff;
}
.sws-home .wpcf7 form.sent .wpcf7-response-output { border-color: var(--wa) !important; background: rgba(37,211,102,.1); }
.sws-home .wpcf7 form.invalid .wpcf7-response-output,
.sws-home .wpcf7 form.failed .wpcf7-response-output { border-color: #e2564b !important; background: rgba(226,86,75,.12); }
.sws-home .wpcf7-not-valid-tip { color: #ff9a92 !important; font-size: 12px; margin-top: 6px; }

/* Anti-spam plugins deliberately reuse the real field classes so bots cannot tell them apart,
   which means the field styling above would otherwise hit the decoy. Excluded from the start. */
.sws-home .wpcf7-form [data-cf7apps-honeypot],
.sws-home .wpcf7-form [class*="honeypot"],
.sws-home .wpcf7-form .wpcf7-honeypot {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.sws-site #footer-outer { background: var(--ink) !important; color: #fff; border-top: 1px solid var(--line-dark); }
.sws-site #footer-widgets { padding: clamp(40px, 4.6vw, 66px) 0 0 !important; border: 0 !important; }
.sws-site #footer-widgets .container > .row { display: flex; flex-wrap: wrap; gap: clamp(28px, 3.6vw, 58px); }
/* Salient's clearfix ::before/::after on .row become flex items once the row is a flex container,
   and the row's gap then applies on BOTH sides of them. That is why the first footer column began
   51px inside the container and the last one ended 51px short of it, so the footer never lined up
   with the sections above. Measured at 1440: 94/1331 before, 43/1382 after. */
.sws-site #footer-widgets .container > .row::before,
.sws-site #footer-widgets .container > .row::after { display: none !important; }
.sws-site #footer-widgets .container > .row > .col {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
.sws-site #footer-widgets .col:nth-child(1) { flex: 1 1 260px; min-width: 230px; }
.sws-site #footer-widgets .col:nth-child(2),
.sws-site #footer-widgets .col:nth-child(3) { flex: 0 1 190px; min-width: 150px; }
.sws-site #footer-widgets .col:nth-child(4) { flex: 1 1 220px; min-width: 200px; }
.sws-site #footer-widgets .widget { margin-bottom: 0 !important; padding: 0 !important; }
.sws-site #footer-widgets h4,
.sws-site #footer-widgets .widgettitle {
	margin-bottom: 16px !important;
	padding: 0 !important;
	/* CLIENT CHANGE: the column headings use the same face as the desktop header menu (Archivo 600)
	   instead of IBM Plex Mono 9px, which was too light to read against the near-black footer. */
	font-family: var(--f-display) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff !important;
}

.sws-site .sws-foot__logo { display: inline-block; line-height: 0; margin-bottom: 16px; }
.sws-site .sws-foot__logo img { height: 42px; width: auto; display: block; }
.sws-site .sws-foot__blurb { margin: 0 0 18px !important; max-width: 34ch; font-size: 14px; line-height: 1.72; color: var(--muted-2); text-wrap: pretty; }
.sws-site .sws-foot__social { display: flex; gap: 9px; }
.sws-site .sws-foot__soc {
	width: 32px; height: 32px;
	border: 1px solid var(--line-card-2);
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted-2);
	transition: border-color .25s ease, color .25s ease;
}
.sws-site .sws-foot__soc span {
	width: 13px; height: 13px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
}
.sws-site .sws-foot__soc--ig span { -webkit-mask-image: var(--i-ig); mask-image: var(--i-ig); }
.sws-site .sws-foot__soc--fb span { -webkit-mask-image: var(--i-fb); mask-image: var(--i-fb); }
.sws-site .sws-foot__soc--wa span { -webkit-mask-image: var(--i-wa); mask-image: var(--i-wa); }
.sws-site #footer-outer .sws-foot__soc:hover { border-color: var(--blue-lt) !important; color: var(--blue-lt) !important; }
.sws-site #footer-outer .sws-foot__soc--wa:hover { border-color: var(--wa) !important; color: var(--wa) !important; }

.sws-site #footer-widgets .widget_nav_menu ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* Salient sets padding:4px 0 !important on these with an extra .widget class, turning the
   design's 10px gap into a 45px pitch. Matched on specificity; source order then wins. */
.sws-site #footer-outer #footer-widgets .widget.widget_nav_menu li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	line-height: normal;
}
.sws-site #footer-widgets .widget_nav_menu li::before,
.sws-site #footer-widgets .widget_nav_menu li::marker { content: none !important; }
.sws-site #footer-outer #footer-widgets .widget_nav_menu a { font-size: 14px; line-height: normal; color: var(--muted-2) !important; }
.sws-site #footer-outer #footer-widgets .widget_nav_menu a:hover { color: var(--blue-lt) !important; }

.sws-site .sws-foot__contact { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sws-site .sws-foot__contact li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted-2);
}
.sws-site .sws-foot__contact li::before {
	content: "";
	flex: 0 0 auto;
	width: 13px; height: 13px;
	margin-top: 3px;
	background-color: var(--blue-lt);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
}
.sws-site .sws-foot__contact li::marker { content: none !important; }
.sws-site .sws-fc--phone::before { -webkit-mask-image: var(--i-phone); mask-image: var(--i-phone); }
.sws-site .sws-fc--wa::before    { -webkit-mask-image: var(--i-wa);    mask-image: var(--i-wa); background-color: var(--wa); }
.sws-site .sws-fc--mail::before  { -webkit-mask-image: var(--i-mail);  mask-image: var(--i-mail); }
.sws-site .sws-fc--pin::before   { -webkit-mask-image: var(--i-pin);   mask-image: var(--i-pin); }
.sws-site .sws-fc--clock::before { -webkit-mask-image: var(--i-clock); mask-image: var(--i-clock); }
.sws-site #footer-outer .sws-foot__contact a { color: var(--muted-2) !important; }
.sws-site #footer-outer .sws-fc--phone a:hover,
.sws-site #footer-outer .sws-fc--mail a:hover { color: var(--blue-lt) !important; }
.sws-site #footer-outer .sws-fc--wa a:hover { color: var(--wa) !important; }

/* copyright bar. Salient splits it into a 5/12 text column and a 7/12 social column; with the
   socials off the 7/12 is empty and the 5/12 forces the two spans onto separate lines. */
.sws-site #copyright {
	background: var(--ink) !important;
	border-top: 1px solid var(--line-dark) !important;
	padding: 20px 0 !important;
	margin-top: clamp(32px, 3.6vw, 50px);
}
.sws-site #copyright .container { display: flex; }
.sws-site #copyright .container > .col {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
.sws-site #copyright .container > .col.span_7 { display: none !important; }
.sws-site #copyright p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--muted-4);
}
.sws-site .sws-copy__right { display: flex; flex-wrap: wrap; gap: 18px; }
.sws-site #copyright a { color: var(--muted-4) !important; }
.sws-site #footer-outer #copyright a:hover { color: var(--blue-lt) !important; }

/* ==========================================================================
   18. COOKIE BAR
   The WhatsApp widget moved out of the theme into the sws-whatsapp plugin, so its styles
   live there now and nothing here targets .sws-wa.
   ========================================================================== */

/* The GDPR bar is not part of the design but is kept for compliance, so it is skinned to the
   palette. The plugin prints its own stylesheet after the theme's, so these need !important. */
.sws-site #moove_gdpr_cookie_info_bar {
	background: var(--navy) !important;
	border-top: 1px solid var(--line-dark) !important;
	font-family: var(--f-body) !important;
	box-shadow: 0 -12px 34px rgba(0,0,0,.35);
}
.sws-site #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p,
.sws-site #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content span {
	color: var(--body-dark) !important;
	font-size: 13.5px !important;
	line-height: 1.62 !important;
}
.sws-site #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a:not(.mgbutton) { color: var(--blue-pale) !important; }
.sws-site #moove_gdpr_cookie_info_bar .mgbutton,
.sws-site #moove_gdpr_cookie_info_bar a.mgbutton,
.sws-site #moove_gdpr_cookie_info_bar button.mgbutton {
	background-color: var(--blue) !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 999px !important;
	color: #fff !important;
	font-family: var(--f-mono) !important;
	font-size: 10px !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	padding: 11px 20px !important;
	opacity: 1 !important;
}
.sws-site #moove_gdpr_cookie_info_bar a.mgbutton:hover,
.sws-site #moove_gdpr_cookie_info_bar button.mgbutton:hover { background-color: var(--blue-lt) !important; color: #fff !important; }
.sws-site #moove_gdpr_cookie_info_bar a.mgbutton.moove-gdpr-infobar-settings-btn,
.sws-site #moove_gdpr_cookie_info_bar button.mgbutton.moove-gdpr-infobar-settings-btn {
	background-color: transparent !important;
	box-shadow: inset 0 0 0 1px var(--line-card-2) !important;
	color: var(--on-dark) !important;
}
.sws-site #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container { max-width: var(--wrap) !important; }

/* ==========================================================================
   19. RESPONSIVE
   The design is fluid by construction, so these are the few explicit rules.
   ========================================================================== */
/* Three per row is held to 1000px, where the cards are still 302px wide, inside the design's own
   290px minimum for this grid, so the client's 3 + 3 survives laptop widths. */
@media (max-width: 1000px) {
	.sws-home .sws-why__grid .row_col_wrap_12_inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 999px) {
	.sws-home .sws-svc__row .row_col_wrap_12_inner,
	.sws-home .sws-svc--flip .sws-svc__row .row_col_wrap_12_inner { flex-direction: column; }
	.sws-home .sws-svc__copy,
	.sws-home .sws-svc__media,
	.sws-home .sws-about__copy,
	.sws-home .sws-about__media,
	.sws-home .sws-contact__info,
	.sws-home .sws-contact__form,
	.sws-home .sws-faqs__intro,
	.sws-home .sws-faqs__list { flex: 1 1 100% !important; width: 100% !important; max-width: none; }
	.sws-home .sws-ai__bandeyebrow,
	.sws-home .sws-ai__bandtitle,
	.sws-home .sws-ai__bandbody { max-width: 78%; }
	.sws-site #footer-widgets .col:nth-child(2),
	.sws-site #footer-widgets .col:nth-child(3) { flex: 1 1 190px; }
}

@media (max-width: 767px) {
	.sws-home .sws-why__grid .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); }
	.sws-home .sws-hero { min-height: 0; }
	.sws-home .sws-hero__chips .row_col_wrap_12_inner { flex-direction: column; }
	.sws-home .sws-chip { width: 100% !important; }
	.sws-home .wpcf7-form { grid-template-columns: 1fr; }
	.sws-home .wpcf7-form label.sws-f__lb:not(.sws-f__lb--wide) { grid-column: 1 / -1; }
	.sws-home .sws-ai__bandeyebrow,
	.sws-home .sws-ai__bandtitle,
	.sws-home .sws-ai__bandbody { max-width: 100%; }
	.sws-site #copyright p { justify-content: center; text-align: center; }
	.sws-site .sws-copy__right { justify-content: center; }
}

@media (max-width: 560px) {
	.sws-home .sws-trust__row .row_col_wrap_12_inner { flex-direction: column; align-items: flex-start; }
	/* Same flex-basis-becomes-height trap as the stats strip below. */
	.sws-home .sws-trust__brands { flex: 0 0 auto !important; }
	.sws-home .sws-ai__stats .row_col_wrap_12_inner { flex-direction: column; }
	/* flex-basis follows the main axis. Once the strip stacks, the 190px basis that sets the card
	   WIDTH on desktop starts setting its HEIGHT instead, leaving ~90px of dead space per card. */
	.sws-home .sws-stat { flex: 0 0 auto !important; }
	.sws-home .sws-stat > .vc_column-inner { border-left: 0; border-top: 1px solid #edf1f6; }
	.sws-home .sws-stat:first-child > .vc_column-inner { border-top: 0; }
	.sws-home .sws-ai__bandbody { display: none; }
	.sws-home .wpcf7-form input[type="text"],
	.sws-home .wpcf7-form input[type="tel"],
	.sws-home .wpcf7-form textarea { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.sws-site *,
	.sws-home * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   20. VERTICAL RHYTHM CORRECTIONS (client feedback round)
   The section rules above set these margins, but the inner-row reset in part 2
   was flattening them. That reset is now horizontal-only; these values are
   restated here as the single place to adjust the gaps the client asked about,
   and they are !important so no later Salient rule can collapse them again.
   ========================================================================== */

/* hero: buttons -> chip row */
.sws-home .sws-hero__chips { margin-top: clamp(30px, 3.6vw, 46px) !important; }

/* AI: head -> steps -> band -> stats, all previously touching */
.sws-home .sws-ai__head    { margin-bottom: clamp(34px, 4.2vw, 56px) !important; }
.sws-home .sws-ai__steps   { margin-bottom: clamp(38px, 4.4vw, 60px) !important; }
.sws-home .sws-ai__bandrow { margin-top: clamp(38px, 4.4vw, 60px) !important; margin-bottom: clamp(38px, 4.4vw, 58px) !important; }
.sws-home .sws-ai .sws-lead { margin-bottom: 0 !important; }
/* the lead sat hard against the step cards */
.sws-home .sws-ai__headcopy .sws-lead { margin-top: 15px !important; }

/* why: head (description + button) -> card grid */
.sws-home .sws-why__head { margin-bottom: clamp(34px, 4vw, 52px) !important; }
.sws-home .sws-why__headcopy .sws-lead { margin-top: 14px !important; }
.sws-home .sws-why__headbtn { padding-bottom: 4px; }

/* about: video -> "Areas we cover" panel */
/* The design sets 16px here. The client asked for visible separation between the video and the
   coverage box, so this is a deliberate 28px instead — the one place the vertical rhythm is
   intentionally looser than the design. */
.sws-home .sws-about__areas { margin-top: 28px !important; }

/* reviews: rating pill -> testimonial grid */
.sws-home .sws-rating { margin-top: 18px !important; }
.sws-home .sws-reviews__grid { margin-top: clamp(30px, 3.6vw, 46px) !important; }

/* contact: lead -> the three contact cards */
.sws-home .sws-contact__cards { margin-top: clamp(24px, 2.6vw, 34px) !important; }

/* sectors: intro -> card grid */
.sws-home .sws-sectors__grid { margin-top: clamp(30px, 3.6vw, 46px) !important; }

/* services: the proof-point list -> the two buttons */
.sws-home .sws-svc__points { margin-bottom: clamp(26px, 3vw, 34px) !important; }

/* Tighter but still clearly separated on small screens. */
@media (max-width: 767px) {
	.sws-home .sws-ai__head    { margin-bottom: 30px !important; }
	.sws-home .sws-ai__steps   { margin-bottom: 30px !important; }
	.sws-home .sws-ai__bandrow { margin-top: 30px !important; margin-bottom: 26px !important; }
	.sws-home .sws-why__head   { margin-bottom: 28px !important; }
	.sws-home .sws-hero__chips { margin-top: 26px !important; }
	.sws-home .sws-reviews__grid { margin-top: 26px !important; }
	.sws-home .sws-sectors__grid { margin-top: 26px !important; }
	/* the why-section button sat flush against the copy once they stacked */
	.sws-home .sws-why__headbtn { margin-top: 22px !important; }
	.sws-home .sws-ai__headbtn  { margin-top: 22px !important; }
}

/* ==========================================================================
   21. HEADER FIT BETWEEN 1241 AND 1440
   The nav uses Archivo 600 at the client's request, which is wider than the
   mono it replaced. Salient's burger does not appear until 1240, so the full
   nav has to fit every width above that. Measured: without this the CTA ran
   47px past the container at 1366 and 151px at 1241. The nav tightens instead
   of the breakpoint moving, so laptops keep a real menu rather than a burger.
   ========================================================================== */
@media (max-width: 1400px) {
	.sws-site #header-outer #top nav > ul.sf-menu { gap: 10px; }
	.sws-site #header-outer #top nav > ul.sf-menu > li > a { font-size: 11px; letter-spacing: .015em; }
	.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__phone > a { font-size: 13.5px; gap: 6px; }
	.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__cta { margin-left: 10px !important; }
	.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__cta > a {
		padding: 11px 17px !important;
		font-size: 11px;
		letter-spacing: .03em;
	}
}
@media (max-width: 1300px) {
	.sws-site #header-outer #top nav > ul.sf-menu { gap: 8px; }
	.sws-site #header-outer #top nav > ul.sf-menu > li > a { font-size: 10.5px; letter-spacing: .01em; }
	.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__phone > a { font-size: 13px; }
	.sws-site #header-outer #top nav > ul.sf-menu > li.sws-nav__cta > a { padding: 10px 15px !important; font-size: 10.5px; }
}

/* ==========================================================================
   22. MOBILE OFF-CANVAS MENU
   Salient's phone menu is not the site's menu: it renders both the primary and
   the secondary (top bar) menus into one list at 32px, so the phone number
   appeared twice and info@swssecurity.co.uk ran past the right edge of a
   390px screen. Colour and base font come from Theme Options (01-options.php);
   this block handles layout, the duplicate, and the CTA.
   ========================================================================== */
/* Salient paints the panel on a separate #slide-out-widget-area-bg layer. On this build that layer
   gets its opacity from Theme Options but no colour, so the menu was transparent and the hero
   showed through every link. */
.sws-site #slide-out-widget-area-bg {
	background-color: var(--navy) !important;
	opacity: 1 !important;
}
/* Salient makes the panel 20px wider than the viewport to hide a scrollbar. The overflow is
   clipped so it never scrolls, but the centred menu ends up 10px right of the real centre —
   which is what "not properly centred" was. Measured at 390: items centred on 205, not 195. */
.sws-site #slide-out-widget-area {
	width: 100% !important;
	padding-right: 0 !important;
	/* Salient hides the panel's own scrollbar with a 20px right padding and a matching negative
	   margin on .inner-wrap. Removing that is what re-centres the menu; the scrollbar it was
	   hiding is suppressed here instead, so a long menu still scrolls without showing one. */
	scrollbar-width: none;
}
.sws-site #slide-out-widget-area::-webkit-scrollbar { width: 0; height: 0; }
.sws-site #slide-out-widget-area .inner-wrap { width: 100% !important; margin-right: 0 !important; }
.sws-site #slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container {
	padding: 0 clamp(22px, 7vw, 40px);
	text-align: center;
}
.sws-site #slide-out-widget-area .off-canvas-menu-container ul.menu { margin: 0; padding: 0; }
.sws-site #slide-out-widget-area .off-canvas-menu-container ul.menu > li { margin: 0 !important; padding: 0 !important; }
.sws-site #slide-out-widget-area .off-canvas-menu-container ul.menu > li > a {
	display: block;
	padding: 11px 0 !important;
	font-family: var(--f-display) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: .01em !important;
	text-transform: none;
	color: #fff !important;
	/* Salient sizes off-canvas text with a transform on some styles; keep it flat so the
	   measured size is the real size. */
	transform: none !important;
}
.sws-site #slide-out-widget-area .off-canvas-menu-container ul.menu > li > a:hover { color: var(--blue-lt) !important; }

/* The RISCO line above the menu is the secondary bar's text. It reads as an eyebrow, not a button. */
.sws-site #slide-out-widget-area .secondary-header-text {
	margin: 0 0 22px;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}
.sws-site #slide-out-widget-area .secondary-header-text a {
	display: inline-block;
	font-family: var(--f-mono) !important;
	font-size: 9.5px !important;
	font-weight: 400 !important;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--blue-lt) !important;
	background: none !important;
	padding: 0 !important;
}

/* The phone number is in BOTH menus. Keep the one in the primary list, where it sits next to the
   quote button, and drop the duplicate from the secondary list. */
.sws-site #slide-out-widget-area .off-canvas-menu-container ul.secondary-header-items > li.sws-bar__item--phone { display: none !important; }

/* Phone and quote are actions, not links: separate them from the pages above. */
.sws-site #slide-out-widget-area .off-canvas-menu-container ul.menu > li.sws-nav__phone { margin-top: 18px !important; }
.sws-site #slide-out-widget-area .off-canvas-menu-container ul.menu > li.sws-nav__phone > a {
	font-size: 20px !important;
	color: #fff !important;
}
.sws-site #slide-out-widget-area .off-canvas-menu-container ul.menu > li.sws-nav__cta { margin-top: 14px !important; }
.sws-site #slide-out-widget-area .off-canvas-menu-container ul.menu > li.sws-nav__cta > a {
	display: inline-block !important;
	padding: 13px 30px !important;
	border-radius: 999px;
	background: var(--blue);
	font-size: 12px !important;
	letter-spacing: .05em !important;
	text-transform: uppercase;
	box-shadow: 0 8px 24px rgba(30,123,234,.32);
}
.sws-site #slide-out-widget-area .off-canvas-menu-container ul.menu > li.sws-nav__cta > a:hover { background: var(--blue-lt); color: #fff !important; }

/* Email and opening hours are information, not navigation. Smaller, muted, and allowed to wrap
   instead of running off the side of the screen. */
.sws-site #slide-out-widget-area .off-canvas-menu-container ul.secondary-header-items {
	margin-top: 26px !important;
	padding-top: 20px !important;
	border-top: 1px solid var(--line-dark);
}
.sws-site #slide-out-widget-area .off-canvas-menu-container ul.secondary-header-items > li > a {
	font-family: var(--f-body) !important;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	line-height: 1.5 !important;
	color: var(--muted-2) !important;
	padding: 7px 0 !important;
	overflow-wrap: anywhere;
}
.sws-site #slide-out-widget-area .off-canvas-menu-container ul.secondary-header-items .sws-bar__item--static > a { cursor: default; }
/* The bar's icon masks are sized for a 12px row; they are not wanted in the sheet-style menu. */
.sws-site #slide-out-widget-area .off-canvas-menu-container ul.secondary-header-items > li > a::before { display: none !important; }

/* Salient's close button is its own brand red by default; Theme Options handles the colour, this
   keeps it clear of the logo. */
.sws-site #slide-out-widget-area .slide_out_area_close { top: 26px !important; right: 20px !important; }

/* ==========================================================================
   23. MOBILE FIXES FROM THE CLIENT REVIEW
   ========================================================================== */
/* The hero eyebrow is 51 characters. At the design's own 9.5px/.16em it needs 362px of text
   width, which is exactly the full content width at 390px — so with any pill padding at all it
   wrapped to two lines. Slightly tighter type below 480px puts it back on one line. */
@media (max-width: 480px) {
	/* The pill is the <p>, not the Text Block wrapper — padding put on the wrapper only makes the
	   pill narrower. Measured at 390: the line needs 322px, the pill offers 362 - 2x12 = 338. */
	.sws-home .sws-eyebrow--badge > p {
		font-size: 8.6px !important;
		letter-spacing: .12em !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		/* If it ever does have to wrap on a very narrow phone, wrap it evenly rather than leaving
		   one word stranded on the second line. */
		text-wrap: balance;
	}
}
@media (max-width: 400px) {
	.sws-home .sws-eyebrow--badge > p {
		font-size: 8.2px !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

/* Button pairs run out of room at different widths per band, because the labels differ in length.
   Rather than pick a breakpoint that is right for one band and wrong for the others, the pairs
   become block-level below 480 so they always stack, with a real gap. width:fit-content keeps the
   pill hugging its label instead of stretching across the screen. */
@media (max-width: 480px) {
	.sws-home .sws-svc__copy a.nectar-button.sws-btn,
	.sws-home .sws-about__copy a.nectar-button.sws-btn,
	.sws-home .sws-faqs__intro a.nectar-button.sws-btn {
		display: flex !important;
		width: fit-content;
	}
	.sws-home .sws-svc__copy a.nectar-button.sws-btn + a.nectar-button.sws-btn,
	.sws-home .sws-about__copy a.nectar-button.sws-btn + a.nectar-button.sws-btn,
	.sws-home .sws-faqs__intro a.nectar-button.sws-btn + a.nectar-button.sws-btn {
		margin-top: 12px !important;
	}
}