/**
 * sws-pages.css — styling for the inner pages: About, the four services, Contact.
 *
 * A separate file on purpose. The homepage carries hand edits made in the editor and its styling
 * must not move, so sws-native.css is left completely untouched and this sheet is enqueued after
 * it. Every class here is namespaced .sws-p*, so nothing can reach the homepage's own sections.
 *
 * Inner pages carry the _sws_design meta, so the body already has .sws-home and inherits the
 * shared .sws-section rhythm, .sws-btn, .sws-eyebrow and the design tokens from sws-native.css.
 */

/* ==========================================================================
   1. BAND COLOURS
   ========================================================================== */
.sws-home .sws-phero,
.sws-home .sws-psteps,
.sws-home .sws-pwhy,
.sws-home .sws-pmedia   { background: var(--navy); }
.sws-home .sws-pcta     { background: var(--ink); }
.sws-home .sws-pform    { background: var(--navy); }
.sws-home .sws-pbadges,
.sws-home .sws-pbenes,
.sws-home .sws-pareas   { background: var(--light-bg); }
.sws-home .sws-poffer,
.sws-home .sws-pfaqs,
.sws-home .sws-pservices,
.sws-home .sws-pwho,
.sws-home .sws-pintro,
.sws-home .sws-pccards  { background: #fff; }

/* ==========================================================================
   2. PAGE HERO
   ========================================================================== */
.sws-home .sws-phero { position: relative; overflow: hidden; }

/* A soft brand glow plus a faint grid, matching the homepage hero's language.
   pointer-events:none on both layers: a decorative layer that swallows clicks is exactly what
   made the homepage contact form untypeable in round one. */
.sws-home .sws-phero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(760px 380px at 12% -10%, rgba(30,123,234,.20), transparent 62%),
		linear-gradient(180deg, rgba(3,8,15,0) 55%, rgba(3,8,15,.55) 100%);
	pointer-events: none;
	z-index: 1;
}
.sws-home .sws-phero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(720px 360px at 20% 0%, #000 25%, transparent 78%);
	mask-image: radial-gradient(720px 360px at 20% 0%, #000 25%, transparent 78%);
	pointer-events: none;
	z-index: 1;
}
.sws-home .sws-phero > .row_col_wrap_12 { position: relative; z-index: 5; }

.sws-home .sws-phero .sws-eyebrow--badge { margin-bottom: 22px !important; }
.sws-home .sws-phero__h1 {
	display: inline !important;
	font-family: var(--f-display);
	font-weight: 700;
	line-height: 1.06 !important;
	letter-spacing: -.028em;
	text-transform: uppercase;
	margin: 0 !important;
}
/* The two fragments are separate elements with no whitespace between them in the markup, so the
   seam needs a preserved space: visible AND a legal soft-wrap point. A plain space collapses and
   a non-breaking space is not a wrap opportunity. */
.sws-home .sws-phero__h1:not(.sws-phero__h1--accent)::after { content: " "; white-space: pre-wrap; }
.sws-home .sws-phero__lead {
	max-width: 62ch;
	margin: 24px 0 30px !important;
	font-size: clamp(15px, 1.1vw, 16.5px);
	line-height: 1.75;
	color: var(--on-dark);
	text-wrap: pretty;
}
.sws-home .sws-phero .sws-btn { margin-right: 12px; }

/* ==========================================================================
   3. TRUST BADGES
   ========================================================================== */
.sws-home .sws-pbadges__grid .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.sws-home .sws-pbadge { width: auto !important; margin: 0 !important; }
.sws-home .sws-pbadge > .vc_column-inner {
	height: 100%;
	padding: clamp(20px, 2vw, 26px) clamp(18px, 1.8vw, 26px) !important;
	background: #fff;
	border: 1px solid var(--line-light);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(10,21,36,.04);
}
.sws-home .sws-pbadge .nectar_icon_wrap { margin-bottom: 12px; }
.sws-home .sws-pbadge__b { margin: 6px 0 0 !important; font-size: 14px; line-height: 1.6; color: var(--body-light); }

/* ==========================================================================
   4. SECTION LEADS
   ========================================================================== */
.sws-home .sws-poffer__lead,
.sws-home .sws-pservices__lead,
.sws-home .sws-pareas__lead {
	max-width: 74ch;
	margin: 14px 0 0 !important;
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--body-light);
	text-wrap: pretty;
}
.sws-home .sws-psteps__lead {
	max-width: 74ch;
	margin: 14px 0 0 !important;
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--body-dark);
	text-wrap: pretty;
}

/* ==========================================================================
   5. OFFER GRID
   ========================================================================== */
.sws-home .sws-poffer__grid .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.sws-home .sws-pcard { width: auto !important; margin: 0 !important; }
.sws-home .sws-pcard > .vc_column-inner {
	height: 100%;
	padding: clamp(22px, 2.1vw, 28px) !important;
	background: #fff;
	border: 1px solid var(--line-light);
	border-radius: 16px;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sws-home .sws-pcard > .vc_column-inner:hover {
	border-color: var(--line-light-4);
	box-shadow: 0 14px 34px rgba(10,21,36,.08);
	transform: translateY(-2px);
}
.sws-home .sws-pcard .nectar_icon_wrap { margin-bottom: 14px; }
.sws-home .sws-pcard__b { margin: 8px 0 0 !important; font-size: 14.5px; line-height: 1.72; color: var(--body-light); }

/* A lone trailing card reads as a mistake. Burglar alarms has seven items, so one would sit alone
   on the third row; let it run the full width instead so it looks deliberate. */
.sws-home .sws-poffer__grid .row_col_wrap_12_inner > .sws-pcard:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }

/* ==========================================================================
   6. MEDIA BAND
   ========================================================================== */
.sws-home .sws-pmedia__row .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(24px, 3.4vw, 52px);
	align-items: center;
}
.sws-home .sws-pmedia__copy,
.sws-home .sws-pmedia__media { width: auto !important; margin: 0 !important; }
.sws-home .sws-pmedia__body {
	margin: 14px 0 0 !important;
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--body-dark);
	text-wrap: pretty;
}
.sws-home .sws-pmedia__media > .vc_column-inner {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--line-card);
}

/* ==========================================================================
   7. STEPS
   ========================================================================== */
.sws-home .sws-psteps__grid .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	counter-reset: swsp-step;
}
.sws-home .sws-pstep { width: auto !important; margin: 0 !important; }
.sws-home .sws-pstep > .vc_column-inner {
	position: relative;
	height: 100%;
	padding: clamp(46px, 4vw, 58px) clamp(24px, 2.2vw, 30px) clamp(24px, 2.2vw, 30px) !important;
	background: rgba(255,255,255,.028);
	border: 1px solid var(--line-card);
	border-radius: 16px;
}
/* Ordinals are a CSS counter, not typed content, so inserting or reordering a step renumbers the
   whole section by itself. */
.sws-home .sws-pstep > .vc_column-inner::before {
	counter-increment: swsp-step;
	content: "0" counter(swsp-step);
	position: absolute;
	top: clamp(20px, 1.8vw, 26px);
	left: clamp(24px, 2.2vw, 30px);
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .18em;
	color: var(--blue-lt);
}
.sws-home .sws-pstep__b { margin: 8px 0 0 !important; font-size: 14.5px; line-height: 1.72; color: var(--body-dark); }

/* ==========================================================================
   8. BENEFITS
   ========================================================================== */
.sws-home .sws-pbenes__grid .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.sws-home .sws-pbene { width: auto !important; margin: 0 !important; }
.sws-home .sws-pbene > .vc_column-inner {
	height: 100%;
	padding: clamp(22px, 2.1vw, 28px) !important;
	background: #fff;
	border: 1px solid var(--line-light);
	border-radius: 16px;
}
.sws-home .sws-pbene .nectar_icon_wrap { margin-bottom: 12px; }
.sws-home .sws-pbene__b { margin: 8px 0 0 !important; font-size: 14.5px; line-height: 1.72; color: var(--body-light); }

/* ==========================================================================
   9. FAQS
   ========================================================================== */
.sws-home .sws-pfaqs__row .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(24px, 3.4vw, 56px);
	align-items: start;
}
.sws-home .sws-pfaqs__intro,
.sws-home .sws-pfaqs__list { width: auto !important; margin: 0 !important; }
.sws-home .sws-pfaqs__lead {
	max-width: 46ch;
	margin: 14px 0 24px !important;
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--body-light);
}

/* ==========================================================================
   10. WHY WORK WITH US
   ========================================================================== */
.sws-home .sws-pwhy__grid .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.sws-home .sws-pwhy__card { width: auto !important; margin: 0 !important; }
.sws-home .sws-pwhy__card > .vc_column-inner {
	height: 100%;
	padding: clamp(24px, 2.2vw, 30px) !important;
	background: rgba(255,255,255,.028);
	border: 1px solid var(--line-card);
	border-radius: 16px;
}
.sws-home .sws-pwhy__card .nectar_icon_wrap { margin-bottom: 14px; }
.sws-home .sws-pwhy__b { margin: 8px 0 0 !important; font-size: 14.5px; line-height: 1.72; color: var(--body-dark); }

/* ==========================================================================
   11. CLOSING CTA
   ========================================================================== */
.sws-home .sws-pcta { text-align: center; }
.sws-home .sws-pcta .sws-eyebrow { display: inline-block; }
.sws-home .sws-pcta__body {
	max-width: 70ch;
	margin: 16px auto 28px !important;
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--body-dark);
	text-wrap: pretty;
}
.sws-home .sws-pcta .sws-btn { margin: 0 6px 12px; }
.sws-home .sws-pcta__areas ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 22px 0 0 !important;
	padding: 0;
	list-style: none;
}
.sws-home .sws-pcta__areas li {
	margin: 0;
	padding: 7px 14px;
	border: 1px solid var(--line-card-2);
	border-radius: 999px;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--on-dark);
	list-style: none;
}

/* ==========================================================================
   12. ABOUT: intro, who we are, services
   ========================================================================== */
.sws-home .sws-pintro__p {
	max-width: 84ch;
	margin: 0 !important;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.75;
	color: var(--body-light-2);
	text-wrap: pretty;
}
.sws-home .sws-pwho__row .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(24px, 3.4vw, 56px);
	align-items: start;
}
.sws-home .sws-pwho__copy,
.sws-home .sws-pwho__stats { width: auto !important; margin: 0 !important; }
.sws-home .sws-pwho__p {
	margin: 0 0 16px !important;
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--body-light);
	text-wrap: pretty;
}
.sws-home .sws-pwho__copy .sws-btn { margin-top: 10px; }
.sws-home .sws-pwho__stats > .vc_column-inner {
	padding: clamp(24px, 2.4vw, 34px) !important;
	background: var(--light-bg);
	border: 1px solid var(--line-light);
	border-radius: 18px;
}
.sws-home .sws-pwho__stats .nectar-milestone { margin: 0 0 22px !important; }
.sws-home .sws-pwho__stats .nectar-milestone:last-child { margin-bottom: 0 !important; }
.sws-home .sws-pwho__stats .nectar-milestone .number {
	font-family: var(--f-display) !important;
	font-weight: 700 !important;
	font-size: clamp(30px, 3vw, 42px) !important;
	line-height: 1 !important;
	color: var(--ink-text) !important;
}
.sws-home .sws-pwho__stats .nectar-milestone .number span,
.sws-home .sws-pwho__stats .nectar-milestone .symbol-wrap,
.sws-home .sws-pwho__stats .nectar-milestone .symbol {
	font-size: inherit !important;
	line-height: 1 !important;
	color: inherit !important;
}
.sws-home .sws-pwho__stats .nectar-milestone .subject {
	display: block;
	margin-top: 6px;
	font-family: var(--f-mono) !important;
	font-size: 11px !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted-4) !important;
}

.sws-home .sws-pservices__grid .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 30px;
}
.sws-home .sws-pscard { width: auto !important; margin: 0 !important; }
.sws-home .sws-pscard > .vc_column-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(24px, 2.2vw, 30px) !important;
	background: #fff;
	border: 1px solid var(--line-light);
	border-radius: 16px;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.sws-home .sws-pscard > .vc_column-inner:hover {
	border-color: var(--line-light-4);
	box-shadow: 0 14px 34px rgba(10,21,36,.08);
}
.sws-home .sws-pscard > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.sws-home .sws-pscard .nectar_icon_wrap { margin-bottom: 14px; }
.sws-home .sws-pscard__b { margin: 8px 0 18px !important; font-size: 14.5px; line-height: 1.72; color: var(--body-light); }
/* Push the link to the bottom so cards with different copy lengths still line up. */
.sws-home .sws-pscard .sws-btn { margin-top: auto; align-self: flex-start; }
.sws-home .sws-pservices__foot {
	margin: 26px 0 0 !important;
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--body-light);
}

/* ==========================================================================
   13. CONTACT
   ========================================================================== */
.sws-home .sws-pccards__grid .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.sws-home .sws-pcc { width: auto !important; margin: 0 !important; }
.sws-home .sws-pcc > .vc_column-inner {
	height: 100%;
	padding: clamp(24px, 2.2vw, 30px) !important;
	background: #fff;
	border: 1px solid var(--line-light);
	border-radius: 16px;
}
.sws-home .sws-pcc .nectar_icon_wrap { margin-bottom: 14px; }
.sws-home .sws-pcc__b { margin: 12px 0 0 !important; font-size: 13.5px; line-height: 1.66; color: var(--muted-4); }
.sws-home a.nectar-button.sws-pcc__v { margin-top: 6px; }

.sws-home .sws-pform__row .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(24px, 3.4vw, 56px);
	align-items: start;
}
.sws-home .sws-pform__intro,
.sws-home .sws-pform__panel { width: auto !important; margin: 0 !important; }
.sws-home .sws-pform__lead {
	max-width: 46ch;
	margin: 14px 0 22px !important;
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--body-dark);
}
.sws-home .sws-pform__points ul { margin: 0 !important; padding: 0; list-style: none; }
.sws-home .sws-pform__points li {
	position: relative;
	margin: 0 0 11px;
	padding-left: 30px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--on-dark);
	list-style: none;
}
.sws-home .wpb_text_column.sws-pform__points ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .18em;
	width: 18px;
	height: 18px;
	background-color: var(--blue-lt);
	-webkit-mask-image: var(--i-tick); mask-image: var(--i-tick);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: contain; mask-size: contain;
}
.sws-home .sws-pform__panel > .vc_column-inner {
	padding: clamp(24px, 2.4vw, 34px) !important;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.sws-home .sws-pareas__list ul {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 24px 0 0 !important;
	padding: 0;
	list-style: none;
}
.sws-home .sws-pareas__list li {
	margin: 0;
	padding: 9px 18px;
	background: #fff;
	border: 1px solid var(--line-light-2);
	border-radius: 999px;
	font-size: 14px;
	color: var(--tag-text);
	list-style: none;
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media (max-width: 999px) {
	.sws-home .sws-pmedia__row .row_col_wrap_12_inner,
	.sws-home .sws-pfaqs__row .row_col_wrap_12_inner,
	.sws-home .sws-pwho__row .row_col_wrap_12_inner,
	.sws-home .sws-pform__row .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); }

	.sws-home .sws-poffer__grid .row_col_wrap_12_inner,
	.sws-home .sws-psteps__grid .row_col_wrap_12_inner,
	.sws-home .sws-pwhy__grid .row_col_wrap_12_inner,
	.sws-home .sws-pbadges__grid .row_col_wrap_12_inner,
	.sws-home .sws-pccards__grid .row_col_wrap_12_inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.sws-home .sws-poffer__grid .row_col_wrap_12_inner > .sws-pcard:last-child:nth-child(3n + 1) { grid-column: auto; }
}

@media (max-width: 767px) {
	.sws-home .sws-poffer__grid .row_col_wrap_12_inner,
	.sws-home .sws-psteps__grid .row_col_wrap_12_inner,
	.sws-home .sws-pwhy__grid .row_col_wrap_12_inner,
	.sws-home .sws-pbadges__grid .row_col_wrap_12_inner,
	.sws-home .sws-pccards__grid .row_col_wrap_12_inner,
	.sws-home .sws-pbenes__grid .row_col_wrap_12_inner,
	.sws-home .sws-pservices__grid .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
	/* Button pairs run out of room at different widths per page, so below 480 they are
	   block-level and always stack with a real gap, rather than guessing one breakpoint.
	   width:fit-content keeps the pill hugging its label instead of stretching. */
	.sws-home .sws-phero a.nectar-button.sws-btn,
	.sws-home .sws-pcta a.nectar-button.sws-btn {
		display: flex !important;
		width: fit-content;
		margin-right: 0;
	}
	.sws-home .sws-phero a.nectar-button.sws-btn + a.nectar-button.sws-btn { margin-top: 12px !important; }
	.sws-home .sws-pcta a.nectar-button.sws-btn { margin-left: auto; margin-right: auto; }
	.sws-home .sws-pcta a.nectar-button.sws-btn + a.nectar-button.sws-btn { margin-top: 12px !important; }
}

/* ==========================================================================
   15. AUTHORITATIVE HEADING SIZES — MUST STAY LAST IN THIS FILE
   Salient's salient-dynamic-styles.css sizes every heading below 999px with
       .wpb_wrapper hN.vc_custom_heading { font-size: N !important }
   which is specificity (0,2,2). A plain .sws-pcard__t rule is (0,2,0) and LOSES even with
   !important, so card titles silently collapse on a phone. These selectors are (0,3,0) and win,
   because specificity compares class count before element count.
   Do not move this block, and do not drop the .wpb_wrapper from the selectors.
   ========================================================================== */
.sws-home .wpb_wrapper .sws-pbadge__t,
.sws-home .wpb_wrapper .sws-pcard__t,
.sws-home .wpb_wrapper .sws-pstep__t,
.sws-home .wpb_wrapper .sws-pbene__t,
.sws-home .wpb_wrapper .sws-pwhy__t,
.sws-home .wpb_wrapper .sws-pscard__t,
.sws-home .wpb_wrapper .sws-pcc__t {
	margin: 0 !important;
	font-family: var(--f-display) !important;
	font-weight: 600 !important;
	font-size: 17.5px !important;
	line-height: 1.32 !important;
	letter-spacing: -.005em !important;
	color: var(--ink-text) !important;
}
.sws-home .wpb_wrapper .sws-pstep__t,
.sws-home .wpb_wrapper .sws-pwhy__t { color: #fff !important; }

.sws-home .wpb_wrapper .sws-poffer__h2,
.sws-home .wpb_wrapper .sws-psteps__h2,
.sws-home .wpb_wrapper .sws-pbenes__h2,
.sws-home .wpb_wrapper .sws-pfaqs__h2,
.sws-home .wpb_wrapper .sws-pwhy__h2,
.sws-home .wpb_wrapper .sws-pcta__h2,
.sws-home .wpb_wrapper .sws-pwho__h2,
.sws-home .wpb_wrapper .sws-pservices__h2,
.sws-home .wpb_wrapper .sws-pmedia__h2,
.sws-home .wpb_wrapper .sws-pform__h2,
.sws-home .wpb_wrapper .sws-pareas__h2 {
	margin: 10px 0 0 !important;
	font-family: var(--f-display) !important;
	font-weight: 600 !important;
	font-size: clamp(26px, 2.7vw, 40px) !important;
	line-height: 1.1 !important;
	letter-spacing: -.022em !important;
	color: var(--ink-text) !important;
	text-wrap: balance;
}
.sws-home .wpb_wrapper .sws-psteps__h2,
.sws-home .wpb_wrapper .sws-pwhy__h2,
.sws-home .wpb_wrapper .sws-pcta__h2,
.sws-home .wpb_wrapper .sws-pmedia__h2,
.sws-home .wpb_wrapper .sws-pform__h2 { color: #fff !important; }

.sws-home .wpb_wrapper .sws-phero__h1 {
	font-size: clamp(30px, 3.9vw, 55px) !important;
	color: #fff !important;
}
.sws-home .wpb_wrapper .sws-phero__h1--accent { color: var(--blue-lt) !important; }

/* ==========================================================================
   16. VISUAL PASS
   The first cut of these pages was structurally right and visually flat: grey
   24px icons floating with no tile, an entirely unstyled FAQ, a secondary hero
   button rendering dark-on-dark, and a hero with 799px of empty space beside
   the copy. Everything below fixes that, in the language the homepage already
   uses, without touching sws-native.css.
   ========================================================================== */

/* ---- 16.1 icon tiles -----------------------------------------------------
   nectar_icon renders .nectar_icon_wrap > .nectar_icon > .im-icon-wrap > svg, and the element's
   own colour param does NOT reach the inline SVG. The homepage states the fill per context for
   exactly this reason; these pages did not, so every icon inherited body grey.
   The tile is what carries the visual weight, so it is stated here too. */
.sws-home .sws-pcard  .nectar_icon_wrap,
.sws-home .sws-pbadge .nectar_icon_wrap,
.sws-home .sws-pbene  .nectar_icon_wrap,
.sws-home .sws-pscard .nectar_icon_wrap,
.sws-home .sws-pcc    .nectar_icon_wrap,
.sws-home .sws-pwhy__card .nectar_icon_wrap {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 14px;
	flex: 0 0 auto;
}
/* Light bands: tinted blue tile, blue glyph. */
.sws-home .sws-pcard  .nectar_icon_wrap,
.sws-home .sws-pbadge .nectar_icon_wrap,
.sws-home .sws-pbene  .nectar_icon_wrap,
.sws-home .sws-pscard .nectar_icon_wrap,
.sws-home .sws-pcc    .nectar_icon_wrap {
	background: linear-gradient(180deg, #eaf2fe 0%, #dfeafd 100%);
	border: 1px solid #d3e3fb;
	color: var(--blue);
}
/* Dark bands: translucent tile, light-blue glyph. */
.sws-home .sws-pwhy__card .nectar_icon_wrap {
	background: rgba(62,147,255,.12);
	border: 1px solid rgba(62,147,255,.24);
	color: var(--blue-lt);
}
.sws-home .sws-pcc--wa .nectar_icon_wrap { color: var(--wa); }

/* The svg has to actually take the tile's colour. */
.sws-home .sws-pcard .nectar_icon_wrap svg path,
.sws-home .sws-pbadge .nectar_icon_wrap svg path,
.sws-home .sws-pbene .nectar_icon_wrap svg path,
.sws-home .sws-pscard .nectar_icon_wrap svg path,
.sws-home .sws-pcc .nectar_icon_wrap svg path,
.sws-home .sws-pwhy__card .nectar_icon_wrap svg path { fill: currentColor !important; }

.sws-home .sws-pcard .nectar_icon_wrap svg,
.sws-home .sws-pbadge .nectar_icon_wrap svg,
.sws-home .sws-pbene .nectar_icon_wrap svg,
.sws-home .sws-pscard .nectar_icon_wrap svg,
.sws-home .sws-pcc .nectar_icon_wrap svg,
.sws-home .sws-pwhy__card .nectar_icon_wrap svg { width: 24px !important; height: 24px !important; }

/* ---- 16.2 hero: two columns with real imagery ---------------------------- */
.sws-home .sws-phero__row .row_col_wrap_12_inner {
	display: grid !important;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}
.sws-home .sws-phero__copy,
.sws-home .sws-phero__media { width: auto !important; margin: 0 !important; }

.sws-home .sws-phero__media > .vc_column-inner {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--line-card-2);
	box-shadow: 0 28px 70px rgba(0,0,0,.45);
}
.sws-home img.sws-phero__img {
	display: block;
	width: 100%;
	height: clamp(260px, 34vw, 420px);
	object-fit: cover;
	object-position: center;
}
/* A brand wash over the photo so it sits in the palette instead of fighting it. */
.sws-home .sws-phero__media > .vc_column-inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(30,123,234,.20) 0%, rgba(3,8,15,.42) 70%);
	pointer-events: none;
}

/* ---- 16.3 FAQ accordion --------------------------------------------------
   The homepage accordion CSS is scoped to .sws-faqs, so .sws-pfaqs inherited nothing at all and
   the questions rendered as bare 12px text. This is the same treatment, scoped to these pages. */
.sws-home .sws-pfaqs .toggles { margin: 0; }
.sws-home .sws-pfaqs .toggle {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line-light) !important;
}
.sws-home .sws-pfaqs .toggle:first-child { border-top: 1px solid var(--line-light) !important; }
.sws-home .sws-pfaqs .toggle h3 { margin: 0 !important; padding: 0 !important; }
.sws-home .sws-pfaqs .toggle > h3 > a {
	position: relative;
	display: block;
	padding: 21px 46px 21px 0 !important;
	background: none !important;
	border: 0 !important;
	font-family: var(--f-display) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	line-height: 1.42 !important;
	color: var(--ink-text) !important;
	transition: color .2s ease;
}
.sws-home .sws-pfaqs .toggle > h3 > a:hover { color: var(--blue) !important; }
.sws-home .sws-pfaqs .toggle > h3 > a i { display: none !important; }
/* A drawn +/- rather than the theme's FontAwesome glyph, so it matches the rest of the page. */
.sws-home .sws-pfaqs .toggle > h3 > a::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--line-light-2);
	border-radius: 50%;
	font-family: var(--f-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1;
	color: var(--blue);
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.sws-home .sws-pfaqs .toggle > h3 > a:hover::after { border-color: var(--blue); background: #eaf2fe; }
.sws-home .sws-pfaqs .toggle.open > h3 > a::after {
	content: "\2212";
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}
.sws-home .sws-pfaqs .toggle > div {
	padding: 0 46px 22px 0 !important;
	background: none !important;
	border: 0 !important;
}
.sws-home .sws-pfaqs .toggle > div p {
	margin: 0 !important;
	font-size: 15px;
	line-height: 1.75;
	color: var(--body-light);
	text-wrap: pretty;
}

/* ---- 16.4 card polish ----------------------------------------------------
   Thin 1px borders on white read as empty boxes at page scale. A soft tinted ground and a
   slightly stronger edge give the cards weight without adding noise. */
.sws-home .sws-pcard > .vc_column-inner,
.sws-home .sws-pbene > .vc_column-inner,
.sws-home .sws-pscard > .vc_column-inner,
.sws-home .sws-pcc > .vc_column-inner,
.sws-home .sws-pbadge > .vc_column-inner {
	background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
	border-color: var(--line-light-2);
	box-shadow: 0 1px 2px rgba(10,21,36,.04), 0 10px 26px rgba(10,21,36,.045);
}
.sws-home .sws-pcard .nectar_icon_wrap,
.sws-home .sws-pbene .nectar_icon_wrap,
.sws-home .sws-pscard .nectar_icon_wrap,
.sws-home .sws-pcc .nectar_icon_wrap,
.sws-home .sws-pbadge .nectar_icon_wrap,
.sws-home .sws-pwhy__card .nectar_icon_wrap { margin-bottom: 18px !important; }

/* Steps: give the dark cards a lift and make the ordinal a real feature. */
.sws-home .sws-pstep > .vc_column-inner {
	background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
	border-color: var(--line-card-2);
}
.sws-home .sws-pstep > .vc_column-inner::before {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(62,147,255,.32);
	border-radius: 10px;
	background: rgba(62,147,255,.12);
	font-size: 11.5px;
	letter-spacing: .06em;
}
.sws-home .sws-pwhy__card > .vc_column-inner {
	background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
	border-color: var(--line-card-2);
}

/* ---- 16.5 section header breathing room ---------------------------------- */
.sws-home .sws-poffer__grid,
.sws-home .sws-pbenes__grid,
.sws-home .sws-psteps__grid,
.sws-home .sws-pwhy__grid,
.sws-home .sws-pccards__grid { margin-top: clamp(28px, 3vw, 42px) !important; }

/* The About intro paragraph was a lone block of text in a tall white band. Give it a rule and a
   tighter measure so it reads as a lead-in rather than an orphan. */
.sws-home .sws-pintro__p {
	padding-left: clamp(16px, 1.6vw, 24px);
	border-left: 3px solid var(--blue);
}

/* ---- 16.6 responsive for the new hero ------------------------------------ */
@media (max-width: 999px) {
	.sws-home .sws-phero__row .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); }
	.sws-home img.sws-phero__img { height: clamp(200px, 40vw, 300px); }
}
@media (max-width: 767px) {
	.sws-home .sws-pcard .nectar_icon_wrap,
	.sws-home .sws-pbadge .nectar_icon_wrap,
	.sws-home .sws-pbene .nectar_icon_wrap,
	.sws-home .sws-pscard .nectar_icon_wrap,
	.sws-home .sws-pcc .nectar_icon_wrap,
	.sws-home .sws-pwhy__card .nectar_icon_wrap { width: 44px; height: 44px; border-radius: 12px; }
	.sws-home .sws-pfaqs .toggle > h3 > a { font-size: 15px !important; padding: 18px 42px 18px 0 !important; }
}


/* ==========================================================================
   17. HIERARCHY CORRECTIONS
   ========================================================================== */

/* The hero's two fragments were the same size, so on a page like Burglar Alarms the blue tagline
   ran to two lines and visually outranked the page's own title. The title is the h1; the tagline
   is a subhead and is sized like one, on its own line. */
.sws-home .wpb_wrapper .sws-phero__h1--accent {
	display: block !important;
	margin-top: 10px !important;
	font-size: clamp(19px, 2.05vw, 29px) !important;
	line-height: 1.22 !important;
	letter-spacing: -.012em;
	text-transform: none;
	font-weight: 600;
}
/* The generated space belongs between two inline fragments. Once the accent is its own block the
   space would add a stray line, so it is removed. */
.sws-home .sws-phero__h1:not(.sws-phero__h1--accent)::after { content: none; }

/* A lone card on the last row spans the full width, which left two thirds of it empty. Laying it
   out horizontally uses that width instead of advertising it. */
.sws-home .sws-poffer__grid .row_col_wrap_12_inner > .sws-pcard:last-child:nth-child(3n + 1) > .vc_column-inner > .wpb_wrapper {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 20px;
	align-items: center;
}
.sws-home .sws-poffer__grid .row_col_wrap_12_inner > .sws-pcard:last-child:nth-child(3n + 1) .nectar_icon_wrap {
	grid-row: 1 / 3;
	margin-bottom: 0 !important;
}
.sws-home .sws-poffer__grid .row_col_wrap_12_inner > .sws-pcard:last-child:nth-child(3n + 1) .sws-pcard__b {
	margin-top: 4px !important;
	max-width: 92ch;
}

@media (max-width: 767px) {
	.sws-home .sws-poffer__grid .row_col_wrap_12_inner > .sws-pcard:last-child:nth-child(3n + 1) > .vc_column-inner > .wpb_wrapper {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
	}
	.sws-home .sws-poffer__grid .row_col_wrap_12_inner > .sws-pcard:last-child:nth-child(3n + 1) .nectar_icon_wrap {
		grid-row: auto;
		margin-bottom: 18px !important;
	}
}

/* The About intro is a single lead-in paragraph, not a section. With the full section rhythm above
   and below it, it sat alone in a tall empty band. It is tightened here and the "Who are we?"
   section that follows drops its top padding, so the two read as one block. */
.sws-home .sws-pintro {
	padding-top: clamp(38px, 4.4vw, 62px) !important;
	padding-bottom: 0 !important;
}
.sws-home .sws-pintro__p { max-width: 92ch; }
.sws-home .sws-pwho { padding-top: clamp(32px, 3.6vw, 52px) !important; }


/* ==========================================================================
   18. FAQ AND CONTACT FORM CORRECTIONS
   ========================================================================== */

/* Salient draws its own 2px underline on the toggle heading as a ::before/::after pair. Sitting
   under my row rule that reads as a doubled line, and because the h3 is inline-block it is only
   as wide as the question text, so the two lines are different lengths. Both are removed. */
.sws-home .sws-pfaqs .toggle > h3::before,
.sws-home .sws-pfaqs .toggle > h3::after {
	display: none !important;
	content: none !important;
}

/* The heading was inline-block at the width of its text, which left the + floating mid-row
   instead of at the right edge of the column. */
.sws-home .sws-pfaqs .toggle > h3 {
	display: block !important;
	width: 100% !important;
}
.sws-home .sws-pfaqs .toggle > h3 > a {
	display: block !important;
	width: 100% !important;
}

/* One rule per row: a top border on the first toggle and a bottom border on every toggle. Stated
   again here so a theme update reintroducing its own borders cannot double them up. */
.sws-home .sws-pfaqs .toggle { border-top: 0 !important; }
.sws-home .sws-pfaqs .toggle:first-child { border-top: 1px solid var(--line-light) !important; }

/* ---- contact form panel --------------------------------------------------
   The CF7 fields are styled for a dark band (near-black fill, white text, muted labels), which is
   correct on the homepage's dark contact section. Putting that form on a white card produced grey
   boxes that read as disabled inputs. The panel is dark, so the fields land in the context they
   were designed for. */
.sws-home .sws-pform__panel > .vc_column-inner {
	background: rgba(255,255,255,.04) !important;
	border: 1px solid var(--line-card-2);
	box-shadow: 0 24px 60px rgba(0,0,0,.34);
}


/* ==========================================================================
   19. LIST RESET OVERRIDES — SPECIFICITY
   sws-native.css resets every list in a Text Block with
       .sws-home .wpb_text_column ul li      { margin: 0; padding: 0; }
       .sws-home .wpb_text_column ul li::before { content: none !important; }
   which is (0,2,2). The pill and tick rules above are (0,2,1) and therefore LOSE, which is why the
   coverage pills rendered as thin outlines with the text touching the edges and the survey ticks
   did not appear at all. Same trap as the headings: class count is compared before element count.
   ========================================================================== */
.sws-home .sws-pcta__areas li { padding: 7px 14px !important; }
.sws-home .sws-pareas__list li { padding: 9px 18px !important; }

.sws-home .sws-pform__points li { padding-left: 30px !important; margin-bottom: 11px !important; }
.sws-home .wpb_text_column.sws-pform__points ul li::before {
	content: "" !important;
	position: absolute;
	left: 0;
	top: .18em;
	width: 18px;
	height: 18px;
	background-color: var(--blue-lt);
	-webkit-mask-image: var(--i-tick); mask-image: var(--i-tick);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: contain; mask-size: contain;
}


/* ==========================================================================
   20. CONTACT CARDS AND STEP ORDINALS
   ========================================================================== */

/* The contact value was a --ghost button: white text on a white-alpha border. That variant is for
   dark bands, so on the white contact card the phone number, WhatsApp number and email address
   were invisible and the cards read as empty. Same mistake as the hero's outline button.
   The value is the most important thing in the card, so it is styled as the primary element. */
.sws-home a.nectar-button.sws-pcc__v {
	display: inline-flex !important;
	align-items: center;
	margin: 0 0 12px !important;
	padding: 11px 18px !important;
	background: #eaf2fe !important;
	border: 1px solid #cfe0fb !important;
	border-radius: 999px;
	font-family: var(--f-display) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--blue) !important;
	transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.sws-home a.nectar-button.sws-pcc__v:hover {
	background: var(--blue) !important;
	border-color: var(--blue) !important;
	color: #fff !important;
}

/* The step ordinal was absolutely positioned, so its bottom edge (60px) sat below where the title
   began (58px at 1440, and -7px at 1024). Measured overlap, not a judgement call. Putting it back
   in the flow means the gap is a margin and cannot collide at any width. */
.sws-home .sws-pstep > .vc_column-inner {
	padding: clamp(24px, 2.2vw, 30px) !important;
}
.sws-home .sws-pstep > .vc_column-inner::before {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 18px;
	top: auto;
	left: auto;
}