/* =============================================================
   Silvernet Redesign — shared visual system
   Loaded only by the Silvernet Redesign theme, after every legacy
   stylesheet, so these rules take visual precedence without
   editing screen.css / 2023.css / mega-menu.css in place.
   Presentation only — no menu data, copy, or destinations change.
   ============================================================= */

:root {
	--sn-ink: #1f2933;
	--sn-body-bg: #f3f6f8;
	--sn-surface: #ffffff;
	--sn-border: #dfe6ec;
	--sn-border-strong: #cdd8df;
	--sn-shadow: 0 14px 32px rgba(31, 41, 51, 0.08);
	--sn-shadow-sm: 0 8px 18px rgba(31, 41, 51, 0.10);
	--sn-orange: #FF6600;
	--sn-orange-dark: #e65c00;
	--sn-radius: 8px;
	--sn-radius-sm: 4px;
	--sn-font: Lato, "Avenir Book", Arial, sans-serif;
	--sn-focus-ring: 0 0 0 3px rgba(255, 102, 0, 0.35);

	/* Dark navigation system — nav bar, all dropdowns, mega menu, footer.
	   Tone borrowed from industrial B2B references (dark navy, not stark white/black),
	   recoloured to Silvernet's orange rather than a borrowed accent hue. */
	--sn-nav-dark: #24343e;
	--sn-nav-dark-alt: #2d4048;
	--sn-nav-text: #e7edf1;
	--sn-nav-text-dim: #9fb1ba;
	--sn-nav-border: rgba(255, 255, 255, 0.12);
	--sn-footer-dark: #1c2733;

	/* Matches the product page's .bullet-block__inner card (product-update.css)
	   and its orange bullet-point glow, reused on the homepage for the same
	   premium-card feel. */
	--sn-card-dark: #16212b;
	--sn-bullet-glow: 0 0 0 4px rgba(255, 102, 0, 0.16);
}

/* ---------- Base ---------- */

body {
	background-image: none;
	background-color: var(--sn-body-bg);
	font-family: var(--sn-font);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.navbar-toggle:focus-visible {
	outline: 2px solid var(--sn-orange);
	outline-offset: 2px;
}

/* ---------- Header ---------- */

header {
	background: var(--sn-surface);
	background-image: none;
	border-bottom: none;
	padding: 4px 0;
}

.header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 26px 0;
	row-gap: 16px;
}

.header-logo {
	display: flex;
	align-items: center;
}

.navbar-brand {
	padding: 0;
	display: block;
}

.navbar-brand img {
	max-width: 230px;
	height: auto;
	display: block;
}

.header-logo .spacer0 {
	display: none;
}

.header-contact-icons {
	display: flex;
	align-items: center;
	height: 39px;
	gap: 10px;
	flex-shrink: 0;
}

.header-contact-line {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 102, 0, 0.1);
	border: 1px solid rgba(255, 102, 0, 0.25);
	color: var(--sn-orange);
	font-size: 14px;
	transition: background-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.header-contact-line:hover,
.header-contact-line:focus {
	background: var(--sn-orange);
	border-color: var(--sn-orange);
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--sn-shadow-sm);
}

.header-search-col {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}

.header_search {
	margin: 0 !important;
	padding-bottom: 0;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	height: 44px;
}

/* Every level here (col > header_search > search-form > label) is pinned to
   an explicit 44px and flex-centred, rather than left to size from its
   content — the label/input pairing was quietly inflating its own box by a
   few px, which kept nudging the search icon out of line with the header
   contact icons even after the parents were centred correctly. */
.header_search .search-form {
	position: relative;
	display: flex;
	align-items: center;
	height: 44px;
	max-width: 300px;
	/* Bootstrap's .navbar-form adds 15px side padding (and a -15px margin),
	   insetting the field from the form while the absolutely-positioned
	   submit button is placed against the form's edge — so the button hung
	   off the field's right end. */
	padding: 0;
	margin: 0 0 0 auto;
}

/* ...and Bootstrap's .navbar-right:last-child adds -15px on the right at
   768px+, pulling the field into the gap before the contact icons. */
.header_search .search-form.navbar-right {
	margin-right: 0;
}

.header_search .search-form label {
	display: flex;
	align-items: center;
	height: 44px;
	width: 100%;
	margin: 0;
}

/* Icon-in-field pill search: a decorative magnifier sits inside the field
   (left), the existing submit input is restyled into a round icon button
   that overlaps the field's right edge — no markup changes needed. */

.header_search .form-control.field_search {
	background-color: #f3f6f8;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8b96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 16px 16px;
	border: 1px solid var(--sn-border-strong);
	border-radius: 999px;
	height: 44px;
	width: 100%;
	padding: 8px 44px 8px 40px;
	color: var(--sn-ink);
	box-shadow: none;
	transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.header_search .form-control.field_search:focus {
	background-color: var(--sn-surface);
	border-color: var(--sn-orange);
	box-shadow: var(--sn-focus-ring);
	outline: none;
}

form.search-form input[type=submit].search-submit {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	position: absolute;
	top: 4px;
	right: 4px;
	height: 36px;
	width: 36px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: var(--sn-orange);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px 15px;
	color: transparent;
	text-indent: -9999px;
	transition: background-color 150ms ease, transform 150ms ease;
}

/* Below 768px: logo and the three contact icons share the top row, with the
   search on its own full-width row underneath. .header-search-col is
   flattened (display: contents) so its two children — search and icons —
   can be placed independently in .header-row's flex layout. The row's
   negative margins and the logo column's padding are zeroed so everything
   lines up on the container's own 15px gutter. */
@media (max-width: 767px) {
	.header-row {
		margin-left: 0;
		margin-right: 0;
		padding: 16px 0;
		column-gap: 12px;
		row-gap: 14px;
	}

	/* Bootstrap's .row clearfix pseudo-elements become empty flex items
	   (both ordered ahead of the logo), each picking up a column-gap and
	   indenting the logo 24px off the gutter. */
	.header-row::before,
	.header-row::after {
		display: none;
	}

	.header-logo {
		order: 1;
		flex: 1 1 0;
		min-width: 0;
		padding: 0;
	}

	/* screen.css forces the logo to 250x25 below 480px, squashing the
	   325x54 artwork; scale it proportionally instead. */
	.navbar-brand img {
		width: 100%;
		max-width: 200px;
		height: auto;
	}

	.header-search-col {
		display: contents;
	}

	.header-contact-icons {
		order: 2;
		height: auto;
		gap: 8px;
	}

	/* 40px — closer to a comfortable touch target than the desktop 36px */
	.header-contact-line {
		width: 40px;
		height: 40px;
		font-size: 15px;
	}

	.header_search {
		order: 3;
		flex: 1 1 100%;
		height: 48px;
	}

	.header_search .search-form,
	.header_search .search-form label {
		height: 48px;
	}

	/* Bootstrap's mobile .navbar-form also adds a border and inset shadow */
	.header_search .search-form {
		max-width: none;
		margin: 0;
		width: 100%;
		border: 0;
		box-shadow: none;
	}

	/* 16px stops iOS Safari zooming the page when the field is focused */
	.header_search .form-control.field_search {
		height: 48px;
		font-size: 16px;
		padding-right: 52px;
	}

	form.search-form input[type=submit].search-submit {
		height: 40px;
		width: 40px;
		background-size: 16px 16px;
	}
}

form.search-form input[type=submit].search-submit:hover,
form.search-form input[type=submit].search-submit:focus {
	background-color: var(--sn-orange-dark);
	transform: translateY(-1px);
}

/* ---------- Primary navigation (desktop) ---------- */

.navbar {
	margin-bottom: 0;
}

/* Bootstrap's .navbar-collapse carries its own 15px left/right padding on
   top of the .container it already sits inside, so the first nav item sat
   30px in from the edge instead of the 15px the header logo above it uses —
   never lining up with it. */
.navbar-inverse .navbar-collapse {
	padding-left: 0;
	padding-right: 0;
}

/* #main-navigation carries both "navbar-collapse" and "collapse" — and
   mega-menu.css's ".collapse ul { padding-left: 20px; }" (meant to nest the
   mega-menu's product links under their sub-headings) matches this ul too,
   since it's just "any ul inside any .collapse". Override narrowly so the
   mega-menu's own nested lists elsewhere are unaffected. */
#main-navigation > ul.navbar-nav {
	padding-left: 0;
}

@media (min-width: 768px) {
	.navbar-inverse {
		background: var(--sn-nav-dark);
		border: 0;
		box-shadow: 0 2px 10px rgba(15, 20, 24, 0.18);
		height: auto;
	}

	.navbar-nav > li > a {
		border: 0;
		color: var(--sn-nav-text);
		font-size: 14px;
		font-weight: 600;
		margin: 0;
		padding: 16px 16px;
	}

	.navbar-nav > li > a.silvercloud {
		color: var(--sn-orange) !important;
	}

	.navbar-inverse .navbar-nav > li > a {
		color: var(--sn-nav-text);
		margin-bottom: 0;
	}

	.navbar-inverse .navbar-nav > li > a:hover,
	.navbar-inverse .navbar-nav > li > a:focus {
		background-color: var(--sn-nav-dark-alt);
		border-bottom: 3px solid var(--sn-orange);
		color: #ffffff;
		margin-bottom: 0;
	}

	.navbar-inverse .navbar-nav > .active > a,
	.navbar-inverse .navbar-nav > .active > a:hover,
	.navbar-inverse .navbar-nav > .active > a:focus {
		background-color: var(--sn-nav-dark-alt);
		color: var(--sn-orange);
	}
}

/* Recolour the legacy "current section" indicator from yellow to the brand orange */
body.home ul li.home a span,
body.parent-pageid-89 ul li.solutions a.dropdown-toggle,
body.parent-pageid-73 ul li.products a.dropdown-toggle,
body.page-id-73 ul li.products a.dropdown-toggle,
body.page-id-188 ul li.wifi-solutions a,
body.parent-pageid-274 ul li.support a.dropdown-toggle,
body.parent-pageid-157 ul li.training a.dropdown-toggle,
body.page-id-441 ul li.news a,
body.single ul li.news a,
body.parent-pageid-194 ul li.about a.dropdown-toggle,
body.page-id-194 ul li.about a.dropdown-toggle,
body.page-id-293 ul li.contact a {
	color: var(--sn-orange) !important;
}

/* ---------- Primary navigation (mobile) ---------- */

@media (max-width: 767px) {
	.navbar-inverse {
		background: var(--sn-nav-dark);
		border: 0;
		height: auto;
	}

	.navbar-toggle {
		border: 1px solid var(--sn-nav-border);
		border-radius: var(--sn-radius-sm);
		margin-top: 14px;
	}

	.navbar-toggle .icon-bar {
		background-color: var(--sn-nav-text);
	}

	/* Bootstrap pulls .navbar-collapse 15px past the container on each side,
	   then .navbar-nav another 15px past that, relying on the collapse's own
	   15px padding (zeroed above for desktop alignment) to cancel one out —
	   without it the open menu ran 30px wider than the screen. Keep both
	   inside the container so the menu lines up with the logo/search above. */
	.container > .navbar-collapse {
		margin-left: 0;
		margin-right: 0;
	}

	#main-navigation > ul.navbar-nav {
		margin: 0 0 12px;
	}

	.navbar-nav > li > a {
		background-color: var(--sn-nav-dark);
		border-bottom: 1px solid var(--sn-nav-border);
	}

	.navbar-inverse .navbar-nav > li > a {
		color: var(--sn-nav-text);
	}

	.navbar-inverse .navbar-nav > li > a:hover,
	.navbar-inverse .navbar-nav > li > a:focus {
		background-color: var(--sn-nav-dark-alt);
		color: var(--sn-orange);
	}

	.navbar-inverse .navbar-nav > .active > a,
	.navbar-inverse .navbar-nav > .active > a:hover,
	.navbar-inverse .navbar-nav > .active > a:focus {
		background-color: var(--sn-nav-dark-alt);
		color: var(--sn-orange);
	}

	.dropdown-menu > li {
		background-color: var(--sn-nav-dark-alt);
		border-bottom: 1px solid var(--sn-nav-border);
	}

	.dropdown-menu > li > a:hover,
	.dropdown-menu > li > a:focus {
		background-color: var(--sn-nav-dark) !important;
		color: var(--sn-orange) !important;
	}
}

/* ---------- Dropdown disclosure indicator (Solutions / Products / Services / About) ---------- */
/* These nav items open a menu on click/hover but previously gave no visual
   cue that they were expandable — add a chevron that flips on open, scoped
   to the top-level nav toggles only (not the mega-menu's own h3 chevrons). */

.navbar-nav > li.dropdown > a.dropdown-toggle::after {
	content: "\f078";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 11px;
	transition: transform 150ms ease;
}

.navbar-nav > li.dropdown.open > a.dropdown-toggle::after {
	transform: rotate(180deg);
}

@media (min-width: 768px) {
	.navbar-nav > li.dropdown > a.dropdown-toggle::after {
		margin-left: 6px;
		vertical-align: middle;
	}
}

@media (max-width: 767px) {
	.navbar-nav > li.dropdown > a.dropdown-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}

/* ---------- Simple dropdowns (Solutions / Industries / Services / About) ---------- */
/* Dark-navy panels rather than a stark white box, matching the mega menu below */

.dropdown-menu {
	background-color: var(--sn-nav-dark);
	border: 1px solid var(--sn-nav-border);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
	padding: 8px;
}

.dropdown-menu > li > a {
	border-radius: var(--sn-radius-sm);
	color: var(--sn-nav-text);
	padding: 10px 14px;
	transition: background-color 150ms ease, color 150ms ease;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background-color: var(--sn-nav-dark-alt);
	color: var(--sn-orange);
}

/* ---------- Products mega menu ---------- */

.dropdown.yamm-fw .dropdown-menu {
	background-color: var(--sn-nav-dark);
	border: 1px solid var(--sn-nav-border);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
	padding: 0;
}

.yamm .yamm-content {
	padding: 24px 28px;
}

.view-all-products,
.yamm-content .view-all-products,
.yamm-content a.view-all-products {
	background: var(--sn-orange);
	border: none;
	border-radius: var(--sn-radius-sm);
	color: #ffffff;
	display: flex;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	padding: 12px 16px;
	transition: background-color 150ms ease, box-shadow 150ms ease;
}

.yamm-content a.view-all-products:hover,
.yamm-content a.view-all-products:focus {
	background: var(--sn-orange-dark);
	color: #ffffff;
	box-shadow: var(--sn-shadow-sm);
}

.yamm-content a.view-all-products i,
.view-all-products i {
	color: #ffffff;
}

.row.top-level a {
	border: 1px solid var(--sn-nav-border);
	border-radius: 999px;
	color: var(--sn-nav-text);
	margin: 4px;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.row.top-level a.active,
.row.top-level a:hover {
	background: var(--sn-orange);
	border-color: var(--sn-orange);
	color: #ffffff;
}

.dropdown.yamm-fw.products .group h3 {
	background: var(--sn-nav-dark-alt);
	border: 1px solid var(--sn-nav-border);
	border-radius: var(--sn-radius-sm);
	color: var(--sn-nav-text);
	font-weight: 700;
}

/* The legacy chevrons used a fixed `top` offset that ignored each row's
   actual height, leaving them a few pixels off true vertical centre.
   Flexbox centres them exactly regardless of title length/wrapping. */
.dropdown.yamm-fw.products .group h3.dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.dropdown.yamm-fw.products .group h3.dropdown-toggle .dropdown-icon {
	position: static;
	flex-shrink: 0;
}

.row.cats .sub-group .toggle-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.row.cats .sub-group .toggle-title .dropdown-icon {
	flex-shrink: 0;
	padding-left: 0;
}

.sub-group .toggle-title,
.cats h3.dropdown-toggle {
	color: var(--sn-nav-text);
}

.collapse h5,
.yamm-content h3,
.yamm-content h5 {
	color: var(--sn-nav-text-dim);
}

.yamm-content ul li a {
	color: var(--sn-nav-text);
	transition: color 150ms ease;
}

.yamm-content ul li a:hover {
	color: var(--sn-orange);
}

.yamm-content ul li::before {
	color: var(--sn-orange);
}

.dropdown.yamm-fw.products #image-container {
	background: var(--sn-nav-dark-alt);
	border-radius: var(--sn-radius-sm);
}

/* ---------- Products mega menu — mobile ---------- */
/* On mobile this becomes an inline accordion inside the collapsed nav
   (Bootstrap's .navbar-nav .open .dropdown-menu), so the floating-card
   treatment no longer applies, and every row below was sized for a mouse
   pointer rather than a finger — touch targets need real breathing room. */
@media (max-width: 767px) {
	.dropdown.yamm-fw .dropdown-menu {
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.yamm .yamm-content {
		padding: 16px;
	}

	.row.top-level a {
		padding: 10px 14px;
		font-size: 14px;
	}

	.row.cats {
		grid-template-columns: 1fr;
	}

	.dropdown.yamm-fw.products #image-container {
		display: none;
	}

	.dropdown.yamm-fw.products .group h3.dropdown-toggle {
		padding: 12px 14px;
		font-size: 14px;
	}

	.row.cats .sub-group .toggle-title {
		padding: 12px 14px;
		font-size: 14px;
	}

	.yamm-content ul li {
		position: static;
		display: flex;
		align-items: center;
		padding: 10px 0 10px 10px;
	}

	.yamm-content ul li::before {
		position: static;
		margin-right: 8px;
	}

	.yamm-content ul li a {
		font-size: 14px;
		line-height: 1.4;
	}
}

/* ---------- Breadcrumb ---------- */

/* screen.css's -20px top margin was tuned for the old, shorter header/nav;
   the redesigned nav bar is taller, so that negative margin now pulls the
   breadcrumb up underneath it. Push it back down clear of the nav. */
.breadcrumb {
	margin-top: 20px;
}

/* ---------- Utility bar: language selector + back to top ---------- */

.utility-bar {
	align-items: center;
	background: var(--sn-surface);
	border-top: 1px solid var(--sn-border);
	border-bottom: 1px solid var(--sn-border);
	padding: 14px 0;
}

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

.translate-label {
	color: var(--sn-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

#google_translate_element {
	line-height: 1;
}

#google_translate_element .goog-te-gadget {
	color: var(--sn-ink);
	font-family: var(--sn-font);
	font-size: 12px;
}

#google_translate_element .goog-te-gadget .goog-te-combo {
	background: var(--sn-surface);
	border: 1px solid var(--sn-border-strong);
	border-radius: var(--sn-radius-sm);
	color: var(--sn-ink);
	font-family: var(--sn-font);
	font-size: 14px;
	height: 36px;
	margin: 0 0 0 6px;
	padding: 6px 10px;
}

#google_translate_element .goog-te-gadget .goog-te-combo:focus {
	border-color: var(--sn-orange);
	box-shadow: var(--sn-focus-ring);
	outline: none;
}

.back-to-top a {
	color: var(--sn-ink);
	font-weight: 600;
	transition: color 150ms ease;
}

.back-to-top a:hover,
.back-to-top a:focus {
	color: var(--sn-orange-dark);
	text-decoration: none;
}

.back-to-top .glyphicon {
	color: var(--sn-orange);
}

@media screen and (min-width: 320px) and (max-width: 800px) {
	.utility-bar {
		padding: 10px 0;
	}
}

/* ---------- Footer ---------- */

footer {
	background: var(--sn-footer-dark);
	border-top: 3px solid var(--sn-orange);
	padding: 60px 0 28px;
}

footer h3 {
	border-bottom: 1px solid var(--sn-nav-border);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 22px;
	padding-bottom: 16px;
}

footer p {
	color: var(--sn-nav-text-dim);
	line-height: 1.7em;
}

footer .row > [class*="col-"] {
	padding-top: 8px;
	padding-bottom: 8px;
}

@media (min-width: 768px) {
	footer .row > [class*="col-"] + [class*="col-"] {
		border-left: 1px solid var(--sn-nav-border);
	}
}

footer ul.menu li {
	margin-bottom: 10px;
}

footer ul.menu li::before {
	color: var(--sn-orange);
}

footer ul.menu li a {
	color: var(--sn-nav-text);
}

footer p.icons {
	color: var(--sn-nav-text);
}

footer a {
	transition: color 150ms ease;
}

footer a:hover,
footer a:focus {
	color: var(--sn-orange);
	text-decoration: none;
}

footer hr {
	border-top-color: var(--sn-nav-border);
	margin-top: 44px;
	margin-bottom: 26px;
}

.signoff p {
	color: var(--sn-nav-text-dim);
	font-size: 13px;
}

.social {
	display: flex;
	gap: 10px;
}

@media (min-width: 768px) {
	.social {
		justify-content: flex-end;
	}
}

.social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--sn-nav-dark-alt);
	border: 1px solid var(--sn-nav-border);
	transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

/* These icons are pre-designed badges (some circular, some a wider pill),
   not plain glyphs — centre the whole badge, don't clip it to a circle */
.social img {
	width: auto;
	height: 20px;
	max-width: 26px;
	object-fit: contain;
	border-radius: 0;
}

.social a:hover,
.social a:focus {
	background-color: var(--sn-orange);
	border-color: var(--sn-orange);
	opacity: 1;
	transform: translateY(-2px);
}

/* Contact Form 7 (site-wide baseline) — this used to be scoped to the one
   footer newsletter instance only; promoted so every CF7 form (the Contact
   page form, and any other instance) gets the same bordered/rounded fields
   and orange submit button. Footer keeps its own label colour below since
   it's the one dark-background context. */

.wpcf7-form label {
	color: var(--sn-ink);
	float: none;
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.wpcf7-form input:not([type=submit]),
.wpcf7-form textarea,
.wpcf7-form select {
	background: var(--sn-surface);
	border: 1px solid var(--sn-border-strong);
	border-radius: var(--sn-radius-sm);
	box-shadow: none;
	color: var(--sn-ink);
	float: none;
	width: 100%;
	height: auto;
	padding: 10px 12px;
	font-family: var(--sn-font);
}

.wpcf7-form textarea {
	min-height: 120px;
}

.wpcf7-form input:not([type=submit]):focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	border-color: var(--sn-orange);
	box-shadow: var(--sn-focus-ring);
	outline: none;
}

.wpcf7-form input[type=submit] {
	background-color: var(--sn-orange);
	border: none;
	border-radius: var(--sn-radius-sm);
	color: #ffffff;
	font-weight: 700;
	margin-top: 16px;
	padding: 12px 28px;
	transition: background-color 150ms ease;
	width: auto;
}

.wpcf7-form input[type=submit]:hover,
.wpcf7-form input[type=submit]:focus {
	background-color: var(--sn-orange-dark);
}

/* The CF7 content wraps each field in a Bootstrap .form-group (15px default
   bottom margin) plus its own explicit .spacer10 gap div — collapse both
   down to one consistent, tighter gap for this footer instance */
footer .wpcf7-form .form-group {
	margin-bottom: 0;
}

footer .wpcf7-form .spacer10 {
	height: 10px;
}

footer .wpcf7-form label {
	color: #ffffff;
}

/* ---------- Homepage ---------- */

.home-intro.intro1 {
	background: linear-gradient(135deg, #ffffff 0%, #eef4f7 100%);
	margin-top: 0;
	padding: 64px 0;
}

.home-intro.intro1 h1 {
	color: var(--sn-ink);
	font-weight: 700;
}

.focus-products {
	padding: 48px 0;
}

.focus-products .flex-focus .focus-box {
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow-sm);
	transition: box-shadow 150ms ease, transform 150ms ease;
}

.focus-products .flex-focus .focus-box:hover {
	box-shadow: var(--sn-shadow);
	transform: translateY(-3px);
}

.home-intro {
	background: var(--sn-body-bg);
}

.home-intro p.subhead {
	color: var(--sn-orange-dark);
}

.home-intro h2 {
	color: var(--sn-ink);
	font-weight: 700;
}

.home-intro p {
	color: var(--sn-ink);
}

/* Was a 50/50 split with the points stacked in a narrow right-hand column
   (20% left padding left over from that layout) — now the intro copy runs
   full width, and the points sit below it as a proper 2-up card grid
   instead of a plain floated icon+text row. */
.home-intro aside {
	float: none;
	width: 100%;
	padding-left: 0;
	margin-top: 32px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.home-intro aside .bullet-point {
	float: none;
	width: auto;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background: var(--sn-surface);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow-sm);
	margin-bottom: 0;
	padding: 22px 24px;
	transition: box-shadow 150ms ease, transform 150ms ease;
}

.home-intro aside .bullet-point:hover {
	box-shadow: var(--sn-shadow);
	transform: translateY(-3px);
}

.home-intro aside .bullet-point .icon-holder {
	float: none;
	width: 56px;
	height: 56px;
	margin-right: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 102, 0, 0.1);
	box-shadow: var(--sn-bullet-glow);
}

.home-intro aside .bullet-point .icon-holder img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	/* Recolours whatever icon PNG is uploaded to a flat #16212b: brightness(0)
	   crushes it to solid black (alpha preserved), the rest is a solved
	   filter chain that maps black to that exact navy. */
	filter: brightness(0) saturate(100%) invert(28%) sepia(11%) saturate(703%) hue-rotate(167deg) brightness(71%) contrast(126%);
}

.home-intro aside .bullet-point .text-holder {
	float: none;
	width: auto;
}

.home-intro aside .bullet-point .text-holder h3 {
	border-left: none;
	margin-left: 0;
	padding: 0 0 6px;
	color: var(--sn-ink);
}

.home-intro aside .bullet-point .text-holder p {
	padding-bottom: 0;
}

@media (max-width: 767px) {
	.home-intro aside {
		grid-template-columns: 1fr;
		margin-top: 24px;
	}
}

/* Darken the section's own background photo (bg-industries.jpg) so the
   white heading/icon text stays legible against it, same navy tint used
   elsewhere in the redesign rather than a plain black overlay. */
.industries {
	background: linear-gradient(rgba(22, 33, 43, 0.65), rgba(22, 33, 43, 0.65)), url("../images/bg-industries.jpg") no-repeat center center;
	background-size: cover;
}

/* Same orange glow ring as the bullet-point highlight on the product page
   (.bullet-block #bullet-points-list li::before), applied to the icon border. */
.industries .flex-industries aside .icon-holder {
	border-color: var(--sn-orange);
	box-shadow: var(--sn-bullet-glow);
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.industries .flex-industries aside:hover .icon-holder {
	box-shadow: 0 0 0 6px rgba(255, 102, 0, 0.22);
	transform: translateY(-3px);
}

.industries .flex-industries aside h3 a:hover {
	color: var(--sn-orange);
}

.why-choose {
	background: var(--sn-body-bg);
	padding: 64px 0;
}

.why-choose .row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 28px 32px;
}

/* .row already stretches both .col2 columns to match the taller one, but
   that only made the invisible column tall — the visible card inside
   (article/aside) still sized to its own content, leaving one card shorter
   than the other. Making .col2 a column flex container and letting its
   card child grow (flex: 1 1 auto below) makes the cards themselves match. */
.why-choose .col2 {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	flex: 1 1 320px;
}

.why-choose article {
	background: var(--sn-surface);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow-sm);
	box-sizing: border-box;
	flex: 1 1 auto;
	width: 100%;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.why-choose article h2 {
	color: var(--sn-ink);
	font-weight: 700;
}

.why-choose article a.home-btn {
	align-self: flex-start;
	background: var(--sn-orange);
	border-radius: var(--sn-radius-sm);
	box-shadow: var(--sn-shadow-sm);
	transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.why-choose article a.home-btn:hover {
	background: var(--sn-orange-dark);
	box-shadow: var(--sn-shadow);
	transform: translateY(-1px);
}

.why-choose aside {
	background: var(--sn-card-dark);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
	box-sizing: border-box;
	flex: 1 1 auto;
	width: 100%;
}

.why-choose aside .list {
	padding-left: 24px;
	position: relative;
}

.why-choose aside .list h3 {
	color: #ffffff;
}

/* Orange dot + soft glow ring — the same bullet-point highlight used by
   .bullet-block #bullet-points-list li::before on the product page. */
.why-choose aside .list h3::before {
	background: var(--sn-orange);
	border-radius: 50%;
	box-shadow: var(--sn-bullet-glow);
	content: "";
	height: 8px;
	width: 8px;
	left: 4px;
	position: absolute;
	top: 0.55em;
}

.why-choose aside .list p {
	color: var(--sn-nav-text-dim);
}

.why-choose aside .list .splitter {
	background: var(--sn-nav-border);
}

/* Restore the original photographic background, with a navy tint so the
   white type/card system stays consistent and legible over any photo. */
.insights {
	background: linear-gradient(rgba(15, 21, 28, 0.72), rgba(15, 21, 28, 0.72)), url("../images/bg-case-studies.jpg") no-repeat bottom center;
	background-size: cover;
}

.insights h2 {
	color: #ffffff;
	/* margin-bottom: 0; */
	/* padding-bottom: 0; */
}

.insights .bx-wrapper {
	padding: 10px 0;
}

.insights .bx-wrapper,.insights .bx-viewport{
	padding-top: 0;
}

/* The wrapper has no horizontal padding to create an outer gutter for these,
   and relying on one wouldn't be responsive anyway (there's no spare page
   space for it on narrow viewports). Inset the buttons over the track
   instead, the way most modern carousels do, so they never depend on
   room outside the card edges. */
.insights .bx-wrapper .bx-controls-direction a {
	align-items: center;
	background: var(--sn-surface) !important;
	border: 1px solid var(--sn-border-strong);
	border-radius: 50%;
	box-shadow: var(--sn-shadow);
	color: var(--sn-ink);
	display: flex;
	height: 40px;
	width: 40px;
	justify-content: center;
	overflow: hidden;
	text-indent: 0;
	margin-top: -20px;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.insights .bx-wrapper .bx-prev {
	left: 10px;
	background-image: none !important;
}

.insights .bx-wrapper .bx-next {
	right: 10px;
	background-image: none !important;
}

.insights .bx-wrapper .bx-prev:hover {
	left: 10px;
	transform: translateX(-2px);
}

.insights .bx-wrapper .bx-next:hover {
	right: 10px;
	transform: translateX(2px);
}

@media (max-width: 767px) {
	.insights .bx-wrapper .bx-controls-direction a {
		height: 34px;
		width: 34px;
		margin-top: -17px;
	}

	.insights .bx-wrapper .bx-prev {
		left: 6px;
	}

	.insights .bx-wrapper .bx-next {
		right: 6px;
	}
}

.insights .bx-wrapper .bx-prev:before,
.insights .bx-wrapper .bx-next:before {
	font-family: "Font Awesome 5 Free";
	font-size: 15px;
	font-weight: 900;
	line-height: 1;
}

.insights .bx-wrapper .bx-prev:before {
	content: "\f053";
}

.insights .bx-wrapper .bx-next:before {
	content: "\f054";
}

.insights .bx-wrapper .bx-controls-direction a:hover,
.insights .bx-wrapper .bx-controls-direction a:focus {
	background: var(--sn-orange) !important;
	border-color: var(--sn-orange);
	color: #ffffff;
}

/* News / case-study cards: an editorial hover-reveal tile — the photo
   fills the whole card, a permanent gradient scrim keeps the title
   readable at rest, and hovering (or keyboard-focusing, via :focus-within)
   zooms the image slightly and reveals the excerpt/date/tags plus a
   "read more" cue, echoing the original reveal interaction with a more
   premium finish. */

/* 2023.css put a 2px blue border on these cards — never overridden here,
   so it was still winning. This card is photo-forward with its own shadow,
   it doesn't need a border at all. */
.insights .news-summary,
.insights .cs-summary {
	background: var(--sn-nav-dark);
	border: none;
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow-sm);
	display: block;
	height: 340px;
	overflow: hidden;
	position: relative;
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.insights .news-summary:hover,
.insights .cs-summary:hover,
.insights .news-summary:focus-within,
.insights .cs-summary:focus-within {
	box-shadow: var(--sn-shadow);
	transform: translateY(-4px);
}

/* screen.css/2023.css set the legacy .news-img to z-index: 6 — left alone
   that still wins over the .news-content below, since it was never
   overridden here, which hid the title behind the image and blocked clicks
   on it entirely. Force it under the content explicitly. */
.insights .news-summary .news-img,
.insights .cs-summary .news-img {
	position: absolute;
	inset: 0;
	height: 100%;
	border-radius: 0;
	z-index: 1;
}

.insights .news-summary .news-img img,
.insights .cs-summary .news-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.insights .news-summary:hover .news-img img,
.insights .cs-summary:hover .news-img img,
.insights .news-summary:focus-within .news-img img,
.insights .cs-summary:focus-within .news-img img {
	transform: scale(1.08);
}

/* A permanent light dim over the whole photo keeps the title readable
   against any image brightness at rest, deepening further on hover/focus
   for stronger contrast while the excerpt is revealed. */
.insights .news-summary .news-img::after,
.insights .cs-summary .news-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(8, 13, 18, 0);
	transition: background-color 250ms ease;
}

.insights .news-summary:hover .news-img::after,
.insights .cs-summary:hover .news-img::after,
.insights .news-summary:focus-within .news-img::after,
.insights .cs-summary:focus-within .news-img::after {
	background: rgba(8, 13, 18, 0.52);
}

.insights .news-summary .news-content,
.insights .cs-summary .news-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to top, rgba(10, 16, 22, 0.95) 0%, rgba(10, 16, 22, 0.8) 50%, rgba(10, 16, 22, 0) 100%);
	padding: 40px 20px 18px;
	z-index: 2;
}

.insights .news-summary .news-content h3,
.insights .cs-summary .news-content h3 {
	padding-bottom: 0;
	font-size: 1.15em;
}

.insights .news-summary .news-content h3 a,
.insights .cs-summary .news-content h3 a {
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.insights .news-summary .news-content h3 a:hover,
.insights .cs-summary .news-content h3 a:hover {
	color: var(--sn-orange);
}

.insights .news-summary .news-content h3 a::after,
.insights .cs-summary .news-content h3 a::after {
	content: "\f061";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 0.7em;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 200ms ease, transform 200ms ease;
}

.insights .news-summary:hover .news-content h3 a::after,
.insights .cs-summary:hover .news-content h3 a::after,
.insights .news-summary:focus-within .news-content h3 a::after,
.insights .cs-summary:focus-within .news-content h3 a::after {
	opacity: 1;
	transform: translateX(0);
}

.insights .news-summary .news-content .news-detail,
.insights .cs-summary .news-content .news-detail {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 280ms ease, opacity 200ms ease, margin-top 280ms ease;
}

.insights .news-summary:hover .news-content .news-detail,
.insights .cs-summary:hover .news-content .news-detail,
.insights .news-summary:focus-within .news-content .news-detail,
.insights .cs-summary:focus-within .news-content .news-detail {
	max-height: 160px;
	opacity: 1;
	margin-top: 10px;
}

.insights .news-summary .news-content .news-detail p,
.insights .cs-summary .news-content .news-detail p,
.insights .news-summary .news-content .news-detail p:first-child,
.insights .cs-summary .news-content .news-detail p:first-child {
	color: rgba(255, 255, 255, 0.82);
}

.insights .news-summary .news-content .news-detail .date p.meta-date,
.insights .cs-summary .news-content .news-detail .date p.meta-date,
.insights .news-summary .news-content .news-detail .tags p.meta-tags,
.insights .cs-summary .news-content .news-detail .tags p.meta-tags {
	color: rgba(255, 255, 255, 0.7);
}

.section_style_1 h1, .section_style_2 h1, .section_style_1 h2, .section_style_2 h2 {
    color: var(--sn-ink);
    font-weight: 700;
    text-transform: none;
}

.insights .news-summary .news-content .news-detail .date p.meta-date::before,
.insights .cs-summary .news-content .news-detail .date p.meta-date::before,
.insights .news-summary .news-content .news-detail .tags p.meta-tags::before,
.insights .cs-summary .news-content .news-detail .tags p.meta-tags::before {
	color: var(--sn-orange);
}

.insights .news-summary .news-content .news-detail .tags p.meta-tags a,
.insights .cs-summary .news-content .news-detail .tags p.meta-tags a {
	color: var(--sn-orange);
	font-style: normal;
}

.insights p.link a {
	color: #ffffff;
	font-weight: 600;
}

.insights p.link a:hover {
	color: var(--sn-orange);
}

/* CTA banners */

.cta-banners .flex-banners article {
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
	overflow: hidden;
	position: relative;
}

.cta-banners .flex-banners article::before {
	background: linear-gradient(180deg, rgba(15, 23, 30, 0.25) 0%, rgba(15, 23, 30, 0.65) 100%);
	border-radius: var(--sn-radius);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 0;
}

.cta-banners .flex-banners article > * {
	position: relative;
	z-index: 1;
}

.cta-banners .flex-banners article a.cta-btn {
	border-radius: var(--sn-radius-sm);
	transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.cta-banners .flex-banners article a.cta-btn:hover {
	background: var(--sn-orange);
	color: #ffffff;
	transform: translateY(-1px);
}

/* ---------- Content pages (About / Training / Solutions / Contact / Search) ---------- */
/* These all share the same generic screen.css scaffolding — .breadcrumb,
   .section_style_1, hr.ss_1, and a bullet-tick <ul> — so one baseline here
   covers most of five pages at once, matching the homepage's typography
   and card language instead of the dated uppercase/grey/blue-link look. */

.breadcrumb {
	font-family: var(--sn-font);
	font-size: 13px;
	padding-left: 0;
}

.breadcrumb > .active,
.breadcrumb li.active a {
	color: var(--sn-orange-dark);
}

.section_style_1 h1,
.section_style_2 h1,
.section_style_1 h2,
.section_style_2 h2 {
	color: var(--sn-ink);
	font-weight: 700;
	text-transform: none;
}

hr.ss_1,
hr.ss_2,
hr.ss_3 {
	border: none;
	border-bottom: 3px solid var(--sn-orange);
	border-radius: 2px;
	width: 60px;
}

.section_style_1 ul,
.section_style_2 ul {
	list-style: none;
	list-style-image: none;
	margin-bottom: 20px;
	padding-left: 0;
}

.section_style_1 ul li,
.section_style_2 ul li {
	padding-left: 24px;
	position: relative;
}

.section_style_1 ul li::before,
.section_style_2 ul li::before {
	background: var(--sn-orange);
	border-radius: 50%;
	box-shadow: var(--sn-bullet-glow);
	content: "";
	height: 8px;
	left: 4px;
	position: absolute;
	top: 0.55em;
	width: 8px;
}

/* ---------- Contact page ---------- */

img.contact-banner {
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow-sm);
}

.row.border-bottom {
	border-bottom: 1px solid var(--sn-border) !important;
	padding: 28px 0;
}

.row.border-bottom h2 {
	color: var(--sn-ink);
	font-weight: 700;
}

.contact-section {
	background: var(--sn-surface);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow-sm);
	padding: 22px 26px;
}

.contact-section p {
	align-items: center;
	color: var(--sn-ink);
	display: flex;
	gap: 12px;
}

.contact-section p i {
	align-items: center;
	background: rgba(255, 102, 0, 0.1);
	border-radius: 50%;
	color: var(--sn-orange);
	display: inline-flex;
	flex-shrink: 0;
	font-size: 14px;
	height: 34px;
	justify-content: center;
	width: 34px;
	padding: 0;
}

.contact-section a {
	color: var(--sn-ink);
	transition: color 150ms ease;
}

.contact-section a:hover {
	color: var(--sn-orange-dark);
}

/* ---------- Search results page ---------- */
/* WordPress adds the "search" body class automatically on is_search() */

.search .news-item {
	background: var(--sn-surface);
	border: 1px solid var(--sn-border);
	border-left: 4px solid var(--sn-orange);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow-sm);
	display: block;
	margin-bottom: 20px;
	padding: 20px 24px;
	transition: box-shadow 150ms ease, transform 150ms ease;
}

.search .news-item:hover {
	box-shadow: var(--sn-shadow);
	transform: translateY(-2px);
}

.search .news-item h2 a.boldlink {
	color: var(--sn-ink);
	font-weight: 700;
}

.search .news-item h2 a.boldlink:hover {
	color: var(--sn-orange-dark);
}

/* The per-result <hr> is redundant now the result is its own card */
.search .news-item + hr {
	display: none;
}

/* ---------- Solutions page — layout ---------- */
/* Real solution pages are long-form articles (multiple headings, inline
   images) next to a short "Our Solutions" list — a plain 2-column float
   grid left the short sidebar stranded with a lot of empty space once the
   article ran on. The featured image (previously squeezed into that same
   narrow sidebar column) is promoted to a full-width hero above the copy,
   and the row is flexed (stretching both columns to the article's height)
   so the sidebar can stick and travel alongside it as you scroll instead. */

.solution-hero {
	position: relative;
	margin-bottom: 28px;
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
	overflow: hidden;
}

.solution-hero img {
	display: block;
	width: 100%;
	height: 280px;
	object-fit: cover;
}

/* The title/divider sit over the image instead of above it — a gradient
   scrim keeps them readable regardless of the uploaded photo. */
.solution-hero__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 32px;
	background: linear-gradient(to top, rgba(10, 16, 22, 0.88) 0%, rgba(10, 16, 22, 0.55) 60%, rgba(10, 16, 22, 0) 100%);
}

.solution-hero__overlay h1 {
	color: #ffffff;
	margin: 0 0 10px;
}

.solution-hero__overlay hr.ss_1 {
	margin: 0;
}

@media (max-width: 767px) {
	.solution-hero img {
		height: 200px;
	}

	.solution-hero__overlay {
		padding: 18px 20px;
	}
}

.solution-layout {
	display: flex;
	flex-wrap: wrap;
}

.solution-sidebar {
	position: sticky;
	top: 24px;
}

.solution-sidebar h2 {
	color: var(--sn-ink);
	font-weight: 700;
}

@media (max-width: 991px) {
	.solution-sidebar {
		position: static;
	}
}

/* ---------- Solutions page — sidebar page menu ---------- */

/* This list sits inside .section_style_1, so the shared bullet-dot marker
   added above was also landing on these items — doubling up with the
   chevron <span> already in the markup. This list has its own indicator,
   it doesn't need the generic one too. */
.solutions-menu ul li {
	padding-left: 0;
	margin-bottom: 0;
}

.solutions-menu ul li::before {
	content: none;
}

.solutions-menu ul {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr;
}

.solutions-menu ul li a {
	align-items: center;
	background: var(--sn-surface);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-sm);
	color: var(--sn-ink);
	display: flex;
	font-size: 14px;
	font-weight: 600;
	height: 100%;
	justify-content: space-between;
	padding: 12px 14px;
	box-sizing: border-box;
	transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.solutions-menu ul li a:hover {
	border-color: var(--sn-orange);
	box-shadow: var(--sn-shadow-sm);
	color: var(--sn-orange-dark);
}

.solutions-menu ul li a span {
	color: var(--sn-orange);
	flex-shrink: 0;
	margin-left: 8px;
}

/* ---------- About page ---------- */
/* This page's the_content() was previously preceded by an empty video-embed
   row (the ACF field is unset) rendering two blank grid columns before the
   article even started, and the article itself was a plain, undifferentiated
   wall of h2/p/ul/img with no rhythm or visual separation between sections. */

.about-content {
	max-width: 900px;
}

.about-content h2 {
	border-bottom: 1px solid var(--sn-border);
	color: var(--sn-ink);
	font-weight: 700;
	margin-top: 40px;
	padding-bottom: 10px;
}

.about-content h2:first-child {
	margin-top: 0;
}

.about-content p {
	line-height: 1.7;
}

.about-content ul {
	background: var(--sn-surface);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow-sm);
	margin: 20px 0;
	padding: 20px 24px 20px 44px;
}

/* Certification logos (ETSI/FCC etc — WordPress marks these width="130")
   were stacking one per row down the page; let consecutive ones sit inline
   side by side instead. */
.about-content p:has(img[width="130"]) {
	display: inline-block;
	margin: 0 24px 20px 0;
	vertical-align: middle;
}

.about-content img[width="500"] {
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
	max-width: 320px;
}

/* ---------- Downloads / Support Centre page ---------- */
/* This template (content-all-documents.php) is its own bespoke component
   family from the 2023 refresh — a flat-orange banner, a blue tabbed
   search panel, a plain image grid, and flat-coloured list rows — none of
   it shares the homepage's dark-navy/orange-accent/card system yet. */

.intro-section {
	background: var(--sn-nav-dark);
}

.intro-section aside .box {
	box-shadow: var(--sn-shadow);
}

.focus-downloads .flex-focus .focus-box {
	background: var(--sn-surface);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow-sm);
	transition: box-shadow 150ms ease, transform 150ms ease;
}

.focus-downloads .flex-focus .focus-box:hover {
	box-shadow: var(--sn-shadow);
	transform: translateY(-3px);
}

.focus-downloads .flex-focus .focus-box img {
	border-radius: var(--sn-radius);
}

.search-box article {
	background: var(--sn-nav-dark);
}

.search-box article ul.tabs li {
	background: var(--sn-nav-dark-alt);
	color: var(--sn-nav-text);
}

.search-box article ul.tabs li.active,
.search-box article ul.tabs li.active:hover {
	background: #ffffff;
	color: var(--sn-ink);
}

.search-box article ul.tabs li.active a {
	border-bottom-color: var(--sn-orange);
	color: var(--sn-ink);
}

.search-box article ul.tabs li:hover {
	background: var(--sn-orange);
	color: #ffffff;
}

.search-box article .tabcontent form input[type=text],
.search-box article .tabcontent form input[list=doctypes],
.search-box article .tabcontent form input[list=doctitles] {
	background: var(--sn-surface);
	border: 1px solid var(--sn-border-strong);
	border-radius: var(--sn-radius-sm);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.search-box article .tabcontent form input[type=text]:focus,
.search-box article .tabcontent form input[list=doctypes]:focus,
.search-box article .tabcontent form input[list=doctitles]:focus {
	border-color: var(--sn-orange);
	box-shadow: var(--sn-focus-ring);
	outline: none;
}

.search-box article .tabcontent form input[type=submit] {
	background: var(--sn-orange);
	border-color: var(--sn-orange);
	border-radius: var(--sn-radius-sm);
	transition: background-color 150ms ease, border-color 150ms ease;
}

.search-box article .tabcontent form input[type=submit]:hover {
	background: var(--sn-orange-dark);
	border-color: var(--sn-orange-dark);
}

.search-box article ul#portfolio-filter a.current {
	background-color: var(--sn-orange);
}

.results-area article h2 span {
	color: var(--sn-orange);
}

.results-area a aside.list,
.results-area ul#portfolio-list li a aside.list {
	border-radius: var(--sn-radius-sm);
	box-shadow: var(--sn-shadow-sm);
	overflow: hidden;
	transition: box-shadow 150ms ease;
}

.results-area a aside.list .icon,
.results-area ul#portfolio-list li a aside.list .icon {
	background-color: var(--sn-orange) !important;
}

.results-area a:hover aside.list,
.results-area ul#portfolio-list li a:hover aside.list {
	box-shadow: var(--sn-shadow);
}

.results-area a:hover aside.list .icon,
.results-area ul#portfolio-list li a:hover aside.list .icon {
	background-color: var(--sn-orange-dark) !important;
}

/* ---------- Listing search (All Products / Downloads) ----------
   A live keyword search sitting above the existing category tabs on the
   two full-catalogue listing pages. Deliberately reuses the same input
   look already established for `.search-box .tabcontent form input` on
   the Search/About/Solutions/Contact template rollout (border, radius,
   orange focus ring all come from that existing, higher-specificity
   rule) rather than introducing a second search-field style — this block
   only adds the icon and layout the existing rule doesn't cover.
   Layered on top of filterable.js rather than replacing it — see
   listing-search.js. */

.listing-search-form {
	position: relative;
	width: 100%;
	margin: 4px 0 18px;
}

.listing-search-form::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	width: 15px;
	height: 15px;
	transform: translateY(-50%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16' fill='none' stroke='%237a8894' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cline x1='11' y1='11' x2='15' y2='15'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	pointer-events: none;
}

.listing-search-form input[type="text"] {
	padding: 11px 40px 11px 40px;
	font-family: var(--sn-font);
	font-size: 15px;
	box-sizing: border-box;
}

/* The legacy .search-box selector this also matches (2023.css) hard-codes
   width: calc(100% - 234px) — sized for the old layout's inline "Go"
   button. This form has no visible submit button, so it needs the full
   width back; matching the same selector chain plus our own class keeps
   the specificity high enough to win regardless of stylesheet order. */
.search-box article .tabcontent form.listing-search-form input[type="text"] {
	width: 100%;
	padding-left: 40px;
}

.listing-search-clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: var(--sn-border);
	color: var(--sn-ink);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 150ms ease, color 150ms ease;
}

.listing-search-clear:hover,
.listing-search-clear:focus-visible {
	background: var(--sn-orange);
	color: #ffffff;
}

.listing-search-status {
	min-height: 1.4em;
	margin: -8px 0 14px;
	font-size: 13px;
	color: var(--sn-ink);
	opacity: 0.7;
}

#portfolio-list[aria-busy="true"] {
	opacity: 0.5;
	transition: opacity 150ms ease;
}

li.listing-search-empty {
	list-style: none;
	float: none;
	width: 100%;
	padding: 28px 4px;
	color: var(--sn-ink);
	opacity: 0.7;
	font-style: italic;
}

/* ---------- Careers, Awards, Standards & Compliance ----------
   These three About Us sub-pages were still on the pre-redesign markup
   (inline-styled floated lists, a raw HTML table) that the earlier
   "content pages" baseline never reached, so — unlike About/Training/
   Solutions/Contact/Search — their <h1> still carried its own
   text-transform: uppercase inline, which no stylesheet rule can beat.
   That inline style has been removed from the three templates so they
   now pick up .section_style_1 h1 { text-transform: none; } above for
   free, matching the rest of the site's heading case. */

.careers-apply-card {
	background: var(--sn-surface);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow-sm);
	padding: 28px 32px;
	margin: 8px 0 28px;
	/* The CF7 form inside uses Bootstrap's floated .col-md-6 halves with no
	   trailing clear, so this card — a plain block otherwise — never grew to
	   contain them: the submit button rendered past the card's own bottom
	   edge. overflow: hidden establishes a new block formatting context,
	   the same technique already used elsewhere in this stylesheet to
	   contain floated content. */
	overflow: hidden;
}

.careers-apply-card h2 {
	margin-top: 0;
}

.careers-terms {
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-sm);
	padding: 0 20px;
	margin-bottom: 28px;
	background: var(--sn-surface);
}

.careers-terms summary {
	cursor: pointer;
	padding: 16px 0;
	font-weight: 700;
	color: var(--sn-ink);
	list-style: none;
}

.careers-terms summary::-webkit-details-marker {
	display: none;
}

.careers-terms summary::before {
	content: "+";
	display: inline-block;
	width: 1.2em;
	color: var(--sn-orange);
	font-weight: 700;
}

.careers-terms[open] summary::before {
	content: "\2212";
}

.careers-terms__body {
	padding: 0 0 20px;
	color: var(--sn-ink);
	opacity: 0.85;
	font-size: 14.5px;
	line-height: 1.65;
}

.careers-terms__body h2:first-child {
	display: none; /* redundant with the <summary> label above */
}

.awards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 20px;
	margin: 8px 0 20px;
	padding: 0;
}

.awards-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 22px 16px;
	background: var(--sn-surface);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow-sm);
	text-align: center;
	text-decoration: none;
	transition: box-shadow 150ms ease, transform 150ms ease;
}

.awards-card:hover,
.awards-card:focus-visible {
	box-shadow: var(--sn-shadow);
	transform: translateY(-3px);
	text-decoration: none;
}

.awards-card__image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 120px;
}

.awards-card__image img {
	max-width: 100%;
	max-height: 120px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.awards-card__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--sn-ink);
	line-height: 1.4;
}

.standards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	margin: 8px 0 20px;
}

.standards-card {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 24px;
	background: var(--sn-surface);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow-sm);
	transition: box-shadow 150ms ease;
}

.standards-card:hover {
	box-shadow: var(--sn-shadow);
}

.standards-card__image {
	flex-shrink: 0;
	width: 88px;
	height: auto;
	border-radius: var(--sn-radius-sm);
}

.standards-card__body h3 {
	margin: 0 0 8px;
	font-size: 16px;
	color: var(--sn-ink);
}

.standards-card__body p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sn-ink);
	opacity: 0.85;
}

@media (max-width: 560px) {
	.standards-card {
		flex-direction: column;
		align-items: flex-start;
	}
}

.page-template-page-content-holder .industries.content-holder .section_style_1 h1 {
    color: #fff!important;
}