/*
Theme Name: Adventurer
Theme URI: https://wordpress.com/theme/adventurer/
Author: Automattic
Author URI: https://automattic.com/
Description: A theme for travelers, writers and photographers.
Requires at least: 6.1
Tested up to: 6.1.1
Requires PHP: 5.7
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: 
Text Domain: adventurer
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks, blog, photography
*/

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */
.wp-block-button.is-style-outline
	> .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--secondary);
}



/* SmartNetXperts brand enhancements */

/* Button: electric-blue hover */
.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--secondary) !important;
	color: #ffffff !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Focus ring using brand accent */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 3px;
}

/* Subtle blue accent on nav link hover */
.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--secondary) !important;
	text-decoration: none !important;
}

/* Tertiary sections now use the soft blue tint */
.has-tertiary-background-color {
	background-color: var(--wp--preset--color--tertiary) !important;
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}
}

/* ============================================================
   FLOATING GLASS HEADER
   State 1 (top):    full-width bar, solid navy, flush top
   State 2 (scroll): centred pill 80% wide, frosted glass
   ============================================================ */

/* Fixed wrapper */
header.wp-block-template-part {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100% !important;
	z-index: 9999;
	background: transparent !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
}

.snx-header-wrap {
	pointer-events: none;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

/* ── STATE 1 (default — top of page): 90% centred bar ── */
.snx-header-pill {
	pointer-events: all;
	margin: 18px auto 0 !important;
	width: 90% !important;
	max-width: 1200px !important;
	height: 68px;
	padding: 0 2rem !important;
	border-radius: 14px !important;

	/* Frosted glass — transparent so hero content shows through, same
	   family as the scrolled-state pill just a touch less frosted since
	   it's the wider bar */
	background: rgba(26, 11, 61, 0.38) !important;
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);

	border: 1px solid rgba(255,255,255,0.14) !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.10),
		0 4px 24px 0 rgba(0,0,20,0.35) !important;

	transition:
		margin     0.45s cubic-bezier(0.4, 0, 0.2, 1),
		width      0.45s cubic-bezier(0.4, 0, 0.2, 1),
		max-width  0.45s cubic-bezier(0.4, 0, 0.2, 1),
		border-radius 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		background 0.45s ease,
		box-shadow 0.45s ease !important;
}

/* ── STATE 2 (scrolled): 45% centred frosted-glass pill ── */
.snx-header-pill.is-scrolled {
	margin: 16px auto 0 !important;
	width: 45% !important;
	max-width: 600px !important;
	height: 54px;
	padding: 0 1.5rem !important;
	border-radius: 999px !important;

	/* Deep frosted glass */
	background: rgba(26, 11, 61, 0.45) !important;
	backdrop-filter: blur(24px) saturate(170%);
	-webkit-backdrop-filter: blur(24px) saturate(170%);

	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.16),
		0 8px 36px rgba(0,0,20,0.42) !important;
}

/* ── Logo ── */
.snx-header-logo.wp-block-site-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	flex-shrink: 0;
}

.snx-header-logo.wp-block-site-title a {
	color: #ffffff !important;
	text-decoration: none !important;
	transition: opacity 0.2s ease;
}

.snx-header-logo.wp-block-site-title a:hover { opacity: 0.7; }

/* ── Nav links (hidden when burger is active — see JS) ── */
.snx-header-nav {
	margin: 0 !important;
}

.snx-header-nav .wp-block-navigation-item__content {
	color: rgba(255,255,255,0.82) !important;
	font-size: 0.78rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.snx-header-nav .wp-block-navigation-item__content:hover {
	color: #ffffff !important;
	text-decoration: none !important;
}

/* ── Right group ── */
.snx-header-right {
	gap: 1.5rem !important;
	flex-shrink: 0;
	align-items: center;
}

/* ── CTA button ── */
.snx-header-cta .snx-nav-cta .wp-element-button {
	background-color: var(--wp--preset--color--secondary) !important;
	color: #ffffff !important;
	border: none;
	padding: 0.5rem 1.2rem;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 6px;
	white-space: nowrap;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.snx-header-cta .snx-nav-cta .wp-element-button:hover {
	background-color: #2d32a8 !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* ── Burger button ── */
.snx-burger {
	display: none; /* shown via specific rules below */
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.28);
	border-radius: 8px;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.snx-burger:hover {
	background: rgba(255,255,255,0.10);
	border-color: rgba(255,255,255,0.50);
}

.snx-burger svg {
	width: 18px;
	height: 18px;
	stroke: #ffffff;
	stroke-width: 1.75;
	stroke-linecap: round;
	fill: none;
}

/* Desktop: show burger only when scrolled (pill state) */
.snx-header-pill.is-scrolled .snx-burger {
	display: flex;
}

/* Desktop scrolled: hide WP nav + CTA, burger takes over */
.snx-header-pill.is-scrolled .snx-header-nav,
.snx-header-pill.is-scrolled .snx-header-cta {
	display: none !important;
}

/* Always hide the WP native hamburger — we use our own */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: none !important;
}

/* Mobile/tablet: always show our burger, hide nav text + CTA + WP overlay */
@media (max-width: 900px) {
	.snx-burger {
		display: flex !important;
	}

	.snx-header-nav,
	.snx-header-cta {
		display: none !important;
	}

	/* Also kill the WP full-screen overlay if it somehow opens */
	.wp-block-navigation__responsive-container.is-menu-open {
		display: none !important;
	}
}

/* ── Frosted dropdown menu panel ── */
.snx-menu-panel {
	/* Always in the DOM — use visibility so transitions work immediately */
	visibility: hidden;
	pointer-events: none;
	position: fixed;
	top: 88px;
	left: 50%;
	transform: translateX(-50%) translateY(-10px);
	width: 80%;
	max-width: 500px;
	border-radius: 14px;
	z-index: 10000;
	overflow: hidden;

	background: rgba(26, 11, 61, 0.78);
	backdrop-filter: blur(28px) saturate(180%);
	-webkit-backdrop-filter: blur(28px) saturate(180%);
	border: 1px solid rgba(255,255,255,0.22);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.12),
		0 20px 60px rgba(0,0,20,0.50);

	opacity: 0;
	/* Single, clean transition — no animation conflicts */
	transition:
		opacity   0.18s ease,
		transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear 0.18s;
}

.snx-menu-panel.is-open {
	visibility: visible;
	pointer-events: all;
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	transition:
		opacity   0.18s ease,
		transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear 0s; /* visible immediately on open */
}

/* Panel header row */
.snx-menu-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.5rem 0.75rem;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}

.snx-menu-panel__brand {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
}

.snx-menu-panel__close {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.28);
	border-radius: 6px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.snx-menu-panel__close:hover { background: rgba(255,255,255,0.15); }

.snx-menu-panel__close svg {
	width: 14px;
	height: 14px;
	stroke: #ffffff;
	stroke-width: 2;
	stroke-linecap: round;
	fill: none;
}

/* Menu label */
.snx-menu-panel__label {
	padding: 1rem 1.5rem 0.4rem;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
}

/* Nav links list */
.snx-menu-panel__links {
	list-style: none;
	margin: 0;
	padding: 0.25rem 1.5rem 1rem;
}

.snx-menu-panel__links li { margin: 0; }

.snx-menu-panel__links a {
	display: block;
	font-family: var(--wp--preset--font-family--rubik);
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 900;
	color: #ffffff !important;
	text-decoration: none !important;
	line-height: 1.25;
	padding: 0.15rem 0;
	transition: opacity 0.2s ease;
	text-transform: uppercase;
}

.snx-menu-panel__links a:hover { opacity: 0.6; }

/* Footer info row */
.snx-menu-panel__footer {
	display: flex;
	gap: 2rem;
	padding: 1rem 1.5rem 1.25rem;
	border-top: 1px solid rgba(255,255,255,0.12);
	margin-top: 0.5rem;
}

.snx-menu-panel__footer-col {}

.snx-menu-panel__footer-label {
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
	margin-bottom: 0.35rem;
}

.snx-menu-panel__footer-val {
	font-size: 0.82rem;
	color: rgba(255,255,255,0.85);
	line-height: 1.6;
}

.snx-menu-panel__footer-val a {
	color: rgba(255,255,255,0.85) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.snx-menu-panel__footer-val a:hover { color: #ffffff !important; }

/* Non-home pages: push content below fixed header */
.wp-site-blocks { padding-top: 68px; }
body.home .wp-site-blocks { padding-top: 0; }

/* Anchor-link targets: offset scroll landing so the fixed/floating
   header never overlaps the top of the section being jumped to.
   This only matters for the initial page load (URL opened directly
   with a #hash) — in-page nav clicks are scrolled precisely by JS
   using the header's live measured height instead. */
#who-we-are,
#overview-top {
	scroll-margin-top: 78px;
}

/* Smooth in-page scrolling for the "Who We Are" nav anchor jump */
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
/* Colour header offset area to match each page's first section */
.page-id-22 .wp-site-blocks,
.page-id-33 .wp-site-blocks {
	background-color: #1A0B3D;
}
/* Insights is the Posts page (is_home()), so its <body> gets class
   "blog" instead of "page-id-10" — target that instead. Leadership
   (37), Insights (blog), and Privacy Policy (3) all share the same
   off-white background tone. */
.page-id-37 .wp-site-blocks,
body.blog .wp-site-blocks,
.page-id-3 .wp-site-blocks {
	background-color: #F5F4F0;
}
body.home main.wp-block-group { margin-top: 0 !important; padding-top: 0 !important; }

/* Mobile */
@media (max-width: 768px) {
	.snx-header-pill {
		width: 92% !important;
		height: 58px;
		padding: 0 1.25rem !important;
		border-radius: 12px !important;
	}
	.snx-header-pill.is-scrolled {
		margin: 12px auto 0 !important;
		width: 88% !important;
		border-radius: 999px !important;
	}
	.snx-menu-panel {
		width: 90%;
		top: 80px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.snx-header-pill {
		transition: none !important;
	}
	.snx-menu-panel,
	.snx-menu-panel.is-open {
		transition: visibility 0s linear 0s !important;
		animation: none !important;
	}
}

/* === Nav CTA button — Red for urgency/action === */
.snx-nav-cta .wp-element-button {
	background-color: var(--wp--preset--color--red) !important;
	color: #ffffff !important;
	border: none;
	padding: 0.55rem 1.25rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	border-radius: 4px;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.snx-nav-cta .wp-element-button:hover {
	background-color: #c4121f !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* === Hero === */
.snx-hero {
	position: relative;
	color: #ffffff;
	background-color: #05010f !important;
	background-image: url('/wp-content/uploads/2026/07/hero-landing-page-1.jpg') !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	overflow: hidden;
}

/* Video background container — must be absolute to fill hero */
.snx-hero-video {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.snx-hero-video video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.snx-hero-video video.snx-vid-active {
	opacity: 1;
}

/* Deep purple overlay — keeps brand depth and text legible */
.snx-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		rgba(26,11,61,0.60) 0%,
		rgba(26,11,61,0.30) 50%,
		rgba(15,8,40,0.10) 100%
	);
	z-index: 0;
	pointer-events: none;
}

/* All direct children sit above overlay */
.snx-hero > * {
	position: relative;
	z-index: 1;
}

/* All direct children sit above the overlay */
.snx-hero > * {
	position: relative;
	z-index: 1;
}

/* Yellow underline accent on hero headline — highlights the power word */
.snx-hero .snx-hero__headline em {
	font-style: normal;
	color: var(--wp--preset--color--yellow);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--yellow);
	text-underline-offset: 6px;
	text-decoration-thickness: 3px;
}

.snx-hero .snx-hero__headline {
	font-size: clamp(2.4rem, 5vw, 4rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: 1.25rem;
	color: #ffffff;
	max-width: 700px;
	/* Clean single-shadow enhancement — readable, sharp, no bloom */
	text-shadow: 0 2px 8px rgba(60,100,220,0.55);
}

/* Smart (yellow em) — matching clean treatment */
.snx-hero .snx-hero__headline em {
	text-shadow: 0 2px 8px rgba(180,130,0,0.50);
}

.snx-hero .snx-hero__sub {
	max-width: 580px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.15rem;
	line-height: 1.7;
}

.snx-hero .snx-hero__actions {
	gap: 1rem;
}

/* Hero primary CTA — Red, highest-priority action on the page */
.snx-hero .snx-btn-primary .wp-element-button {
	background-color: var(--wp--preset--color--red) !important;
	color: #ffffff;
	border: none;
	padding: 0.85rem 2rem;
	font-size: 0.9rem;
	letter-spacing: 0.5px;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.snx-hero .snx-btn-primary .wp-element-button:hover {
	background-color: #c4121f !important;
	transform: translateY(-2px);
}

.snx-hero .snx-btn-outline .wp-element-button {
	border: 2px solid rgba(255, 255, 255, 0.6);
	color: #ffffff;
	background: transparent;
	padding: 0.85rem 2rem;
	font-size: 0.9rem;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.snx-hero .snx-btn-outline .wp-element-button:hover {
	border-color: #ffffff;
	background-color: rgba(255, 255, 255, 0.1);
}

/* Remove all gaps between front-page sections and the header/footer */
.snx-hero,
.snx-services,
.snx-cta {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Kill the block-gap above post-content and inside main on front-page */
body.home main.wp-block-group {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body.home .entry-content.wp-block-post-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.home footer.wp-block-template-part {
	margin-top: 0 !important;
}

/* === Services === */
.snx-services .snx-services__title {
	color: var(--wp--preset--color--secondary) !important;
	margin-top: 1.5rem;
	margin-bottom: 1.25rem;
}

.snx-services .snx-services__intro {
	color: var(--wp--preset--color--foreground);
	opacity: 0.75;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5rem;
}

.snx-service-card {
	background: #ffffff;
	border-radius: 8px;
	padding: 2rem 1.75rem;
	border-top: 3px solid var(--wp--preset--color--secondary);
	box-shadow: 0 2px 16px rgba(26, 11, 61, 0.07);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.snx-service-card:hover {
	box-shadow: 0 6px 28px rgba(26, 11, 61, 0.13);
	transform: translateY(-3px);
}

.snx-service-card h3.wp-block-heading {
	margin-bottom: 0.75rem;
	font-size: 1.35rem;
}

/* === Service icons — SVG as CSS background-image (no wp:html needed) === */
.snx-service-icon {
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 1.25rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	transition: filter 0.25s ease;
}
.snx-service-icon--network {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B40CF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cline x1='6' y1='6' x2='6.01' y2='6'/%3E%3Cline x1='6' y1='18' x2='6.01' y2='18'/%3E%3C/svg%3E");
}
.snx-service-icon--social {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B40CF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E");
}
.snx-service-icon--digital {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B40CF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");
}
/* Hover: swap to yellow version */
.snx-service-card:hover .snx-service-icon--network {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cline x1='6' y1='6' x2='6.01' y2='6'/%3E%3Cline x1='6' y1='18' x2='6.01' y2='18'/%3E%3C/svg%3E");
}
.snx-service-card:hover .snx-service-icon--social {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E");
}
.snx-service-card:hover .snx-service-icon--digital {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");
}

/* === CTA Strip === */
.snx-cta {
	margin-top: 0 !important;
}

/* Smoked glass — overrides block's solid indigo background */
.snx-cta.wp-block-group {
	background: linear-gradient(
		160deg,
		rgba(15,12,28,0.94) 0%,
		rgba(10,8,22,0.97) 100%
	) !important;
	backdrop-filter: blur(24px) saturate(1.3) brightness(0.75) !important;
	-webkit-backdrop-filter: blur(24px) saturate(1.3) brightness(0.75) !important;
	border-top: 1px solid rgba(255,255,255,0.22) !important;
	border-bottom: 1px solid rgba(255,255,255,0.06) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 32px rgba(0,0,0,0.45) !important;
	position: relative !important;
	overflow: hidden !important;
}

/* Sheen sweep across the glass */
.snx-cta.wp-block-group::before {
	content: "";
	position: absolute;
	top: 0;
	left: -75%;
	width: 55%;
	height: 100%;
	background: linear-gradient(
		120deg,
		transparent 0%,
		rgba(255,255,255,0.04) 30%,
		rgba(255,255,255,0.13) 50%,
		rgba(255,255,255,0.04) 70%,
		transparent 100%
	);
	animation: snx-cta-sheen 6s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

/* Keep content above the sheen layer */
.snx-cta.wp-block-group > * {
	position: relative;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.snx-cta.wp-block-group::before {
		animation: none !important;
		display: none;
	}
}

/* Yellow left-border accent on the CTA headline for visual punch */
.snx-cta h2.wp-block-heading {
	margin-bottom: 0.75rem;
	color: #ffffff;
	padding-left: 1rem;
	border-left: 4px solid var(--wp--preset--color--yellow);
}

.snx-cta .snx-cta__btn .wp-element-button {
	background-color: #ffffff;
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
	padding: 0.9rem 2.25rem;
	border: none;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.snx-cta .snx-cta__btn .wp-element-button:hover {
	background-color: rgba(255, 255, 255, 0.88) !important;
	color: var(--wp--preset--color--secondary) !important;
	transform: translateY(-2px);
}

/* === Contact Page (v3: image-left / form-right) === */

/* LEGACY hero — hidden, replaced by two-col layout */
.snx-contact-hero__title {
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	max-width: 700px;
	margin-bottom: 0.75rem;
}

.snx-contact-hero__title em {
	font-style: normal;
	color: var(--wp--preset--color--yellow);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--yellow);
	text-underline-offset: 6px;
	text-decoration-thickness: 3px;
}

.snx-contact-hero__sub {
	max-width: 600px;
	color: rgba(255,255,255,0.80);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

/* Compact section spacing */
.snx-contact-hero.wp-block-group {
	padding-top: 2.25rem !important;
	padding-bottom: 2rem !important;
}

.snx-contact-split.wp-block-group {
	padding-top: 2.5rem !important;
	padding-bottom: 2.5rem !important;
	margin-top: 0 !important;
}

/* CTA: smoked glass — same treatment as the form card.
   Opacity raised near-solid (0.94→0.97) so backdrop-filter has almost
   nothing left behind it to bleed through — keeps this CTA reading
   as the same near-black glass regardless of what section sits above
   it on different pages (previously a lighter section behind it, e.g.
   the Overview timeline, showed through and made it look lighter than
   the same CTA on the Solutions page). */
.snx-contact-cta.wp-block-group {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
	background: linear-gradient(
		160deg,
		rgba(15,12,28,0.94) 0%,
		rgba(10,8,22,0.97) 100%
	) !important;
	background-size: 200% 100% !important;
	backdrop-filter: blur(24px) saturate(1.3) brightness(0.75) !important;
	-webkit-backdrop-filter: blur(24px) saturate(1.3) brightness(0.75) !important;
	border-top: 1px solid rgba(255,255,255,0.22) !important;
	border-bottom: 1px solid rgba(255,255,255,0.06) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 32px rgba(0,0,0,0.45) !important;
	position: relative;
	overflow: hidden;
}

/* Sheen overlay — diagonal light streak sweeping across the glass */
.snx-contact-cta.wp-block-group::before {
	content: "";
	position: absolute;
	top: 0;
	left: -75%;
	width: 55%;
	height: 100%;
	background: linear-gradient(
		120deg,
		transparent 0%,
		rgba(255,255,255,0.04) 30%,
		rgba(255,255,255,0.13) 50%,
		rgba(255,255,255,0.04) 70%,
		transparent 100%
	);
	animation: snx-cta-sheen 6s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

@keyframes snx-cta-shine {
	0%   { background-position: 100% 0; }
	50%  { background-position: 0% 0; }
	100% { background-position: 100% 0; }
}

@keyframes snx-cta-sheen {
	0%   { left: -75%; opacity: 0; }
	20%  { opacity: 1; }
	60%  { left: 125%; opacity: 1; }
	61%  { opacity: 0; }
	100% { left: 125%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.snx-contact-cta.wp-block-group {
		animation: none !important;
		background-position: 50% 0 !important;
	}
	.snx-contact-cta.wp-block-group::before {
		animation: none !important;
		display: none;
	}
}

/* CTA: horizontal bar — text left, button right, properly inset from page edges */
.snx-contact-cta.wp-block-group {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-left: clamp(2rem, 6vw, 5rem) !important;
	padding-right: clamp(2rem, 6vw, 5rem) !important;
}

.snx-contact-cta .snx-contact-cta__title {
	flex: 0 0 auto;
	white-space: nowrap;
	color: #ffffff !important;
}

.snx-contact-cta .snx-contact-cta__sub {
	flex: 1 1 auto;
	color: rgba(255,255,255,0.75) !important;
}

.snx-contact-cta .wp-block-buttons {
	flex: 0 0 auto;
	margin: 0 !important;
}

.snx-contact-cta__title {
	text-align: left !important;
	font-size: 1.15rem !important;
	margin: 0 !important;
}

.snx-contact-cta__sub {
	text-align: left !important;
	font-size: 0.875rem !important;
	margin: 0 !important;
	opacity: 0.8;
	flex: 1;
}

.snx-contact-cta .wp-block-spacer {
	display: none !important;
}

.snx-contact-cta .wp-block-buttons {
	flex-shrink: 0;
	margin: 0 !important;
}

/* === Split section: form top, info strip below === */

/* Stack the two columns vertically */
.snx-contact-cols.wp-block-columns {
	flex-direction: column !important;
	gap: 2rem !important;
	align-items: stretch !important;
	width: 100%;
}

/* Form column: full width, centred, shown FIRST */
.snx-contact-form-col.wp-block-column {
	flex-basis: 100% !important;
	max-width: 820px;
	margin-inline: auto;
	width: 100%;
	order: 0;
}

/* Info column: 4-col strip shown SECOND (below form) */
.snx-contact-info.wp-block-column {
	flex-basis: 100% !important;
	width: 100%;
	order: 1;
}

/* Hide the h2 title, intro text, and spacer — not needed in strip mode */
.snx-contact-info__title,
.snx-contact-info__intro,
.snx-contact-info > .wp-block-spacer {
	display: none !important;
}

/* Turn the 4 detail rows into a 4-column horizontal grid */
.snx-contact-info.wp-block-column > .wp-block-group.snx-contact-detail:not(.hidden) {
	display: flex;
}

.snx-contact-info.wp-block-column {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 0 !important;
	background: var(--wp--preset--color--tertiary);
	border-radius: 12px;
	overflow: hidden;
}

/* Each detail cell */
.snx-contact-detail.wp-block-group {
	gap: 0.6rem !important;
	margin-bottom: 0 !important;
	align-items: flex-start !important;
	padding: 1.25rem 1.5rem;
	border-right: 1px solid rgba(59,64,207,0.12);
	background: transparent;
}

.snx-contact-detail.wp-block-group:last-child {
	border-right: none;
}

.snx-contact-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--wp--preset--color--secondary);
	stroke: var(--wp--preset--color--secondary);
	padding: 6px;
	background: rgba(59,64,207,0.1);
	border-radius: 50%;
	box-sizing: content-box;
}

.snx-contact-detail__label.wp-block-heading {
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(26,11,61,0.45);
	margin-bottom: 0.2rem;
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 600;
}

.snx-contact-detail__val {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: 0.95rem;
	line-height: 1.5;
}

.snx-contact-detail__val a {
	color: var(--wp--preset--color--secondary) !important;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.snx-contact-detail__val a:hover {
	opacity: 0.7;
}

/* Form wrapper card */
.snx-contact-form-wrap {
	background: #ffffff;
	border-radius: 12px;
	padding: 1.5rem 1.75rem;
	border: 1px solid rgba(26,11,61,0.08);
	box-shadow: 0 4px 32px rgba(26,11,61,0.08);
}

.snx-contact-form-wrap__title {
	margin-bottom: 0.75rem;
	font-size: 1.15rem;
}

/* Jetpack form fields — 2-col grid: pair Name+Email, Phone+Service */
.snx-contact-form-wrap .wp-block-jetpack-contact-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem 1rem;
}

/* Message and submit span full width */
.snx-contact-form-wrap .wp-block-jetpack-field-textarea,
.snx-contact-form-wrap .wp-block-button.snx-contact-submit,
.snx-contact-form-wrap .contact-form__error {
	grid-column: 1 / -1;
}

.snx-contact-form-wrap .wp-block-jetpack-contact-form > div {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.snx-contact-form-wrap .grunion-field-label,
.snx-contact-form-wrap label {
	font-size: 0.546rem; /* 0.78rem × 0.7 = 30% smaller */
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(26,11,61,0.55);
}

.snx-contact-form-wrap input[type="text"],
.snx-contact-form-wrap input[type="email"],
.snx-contact-form-wrap input[type="tel"],
.snx-contact-form-wrap select,
.snx-contact-form-wrap textarea {
	width: 100%;
	padding: 0.5rem 0.85rem;
	border: 1.5px solid rgba(26,11,61,0.15);
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 0.95rem;
	color: var(--wp--preset--color--primary);
	background: #fafafa;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	outline: none;
}

.snx-contact-form-wrap input:focus,
.snx-contact-form-wrap select:focus,
.snx-contact-form-wrap textarea:focus {
	border-color: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 3px rgba(59,64,207,0.12);
	background: #ffffff;
}

.snx-contact-form-wrap textarea,
.snx-contact-form-wrap .wp-block-jetpack-input[type="textarea"],
.snx-contact-form-wrap .grunion-field.textarea {
	min-height: 90px !important;
	height: 90px !important;
	max-height: 200px;
	resize: vertical;
	overflow-y: auto;
}

/* ── Error messages: overlaid inside the input, zero layout growth ──
   The error text floats inside the bottom of its field wrap
   via position:absolute. The input gets extra bottom padding
   so the text never covers typed content. Font is 16px × 0.7
   = 11.2px. The form card NEVER grows when errors appear.
   ───────────────────────────────────────────────────────── */

/* Field wrap: anchor for the absolute error */
.snx-contact-form-wrap .grunion-field-wrap,
.snx-contact-form-wrap .wp-block-jetpack-input-wrap {
	position: relative !important;
}

/* Input/select: extra bottom padding creates visual room for error text */
.snx-ct2-form-col .snx-contact-form-wrap input[type="text"],
.snx-ct2-form-col .snx-contact-form-wrap input[type="email"],
.snx-ct2-form-col .snx-contact-form-wrap input[type="tel"],
.snx-ct2-form-col .snx-contact-form-wrap select {
	padding-bottom: 14px !important;
}

/* Error container: sits absolutely inside the input area, never in flow */
.snx-contact-form-wrap .contact-form__input-error {
	position: absolute !important;
	bottom: 3px !important;
	left: 9px !important;
	right: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
	z-index: 2;
}

/* Error span: 70% of 16px = 11.2px, bright red, no line wrapping */
.snx-contact-form-wrap [id$="-error-message"],
.snx-contact-form-wrap .contact-form__input-error span {
	font-size: 11.2px !important;
	line-height: 1 !important;
	color: rgba(255, 80, 80, 0.9) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Form-level banner: always hidden, zero space */
.snx-contact-form-wrap .contact-form__error {
	overflow: hidden !important;
	max-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	gap: 0 !important;
	border: none !important;
	background: transparent !important;
	transition: none !important;
}

/* Submit button — raised / 3-D (matches CTA strip button) */
.snx-contact-submit .wp-element-button {
	background-color: var(--wp--preset--color--red) !important;
	background-image: linear-gradient(
		180deg,
		rgba(255,255,255,0.14) 0%,
		rgba(255,255,255,0.00) 55%
	) !important;
	color: #ffffff !important;
	padding: 0.85rem 2.25rem;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 8px;
	border: none;
	width: 100%;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.28),
		inset 0 -2px 0 rgba(0,0,0,0.28),
		0 4px 6px rgba(0,0,0,0.32),
		0 8px 20px rgba(196,18,31,0.45),
		0 1px 2px rgba(0,0,0,0.40) !important;
	transition:
		background-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.15s ease;
}

.snx-contact-submit .wp-element-button:hover {
	background-color: #d4151f !important;
	transform: translateY(-3px);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.30),
		inset 0 -2px 0 rgba(0,0,0,0.22),
		0 7px 14px rgba(0,0,0,0.34),
		0 16px 32px rgba(196,18,31,0.50),
		0 2px 4px rgba(0,0,0,0.35) !important;
}

.snx-contact-submit .wp-element-button:active {
	background-color: #b0101a !important;
	transform: translateY(1px);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.12),
		inset 0 2px 5px rgba(0,0,0,0.32),
		0 1px 3px rgba(0,0,0,0.25),
		0 2px 8px rgba(196,18,31,0.30) !important;
}

@media (prefers-reduced-motion: reduce) {
	.snx-contact-submit .wp-element-button {
		transition: none !important;
	}
}

/* CTA strip */
.snx-contact-cta {
	margin-top: 0 !important;
}

.snx-contact-cta .wp-block-spacer {
	height: 12px !important;
}

/* Schedule a Free Call button — raised / 3-D */
.snx-contact-cta .snx-contact-cta__btn .wp-element-button {
	background-color: var(--wp--preset--color--red) !important;
	background-image: linear-gradient(
		180deg,
		rgba(255,255,255,0.14) 0%,
		rgba(255,255,255,0.00) 55%
	) !important;
	color: #ffffff !important;
	font-weight: 700;
	padding: 0.9rem 2.25rem;
	border: none;
	border-radius: 8px;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.28),
		inset 0 -2px 0 rgba(0,0,0,0.28),
		0 4px 6px rgba(0,0,0,0.32),
		0 8px 20px rgba(196,18,31,0.45),
		0 1px 2px rgba(0,0,0,0.40) !important;
	transition:
		background-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.15s ease;
}

.snx-contact-cta .snx-contact-cta__btn .wp-element-button:hover {
	background-color: #d4151f !important;
	transform: translateY(-3px);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.30),
		inset 0 -2px 0 rgba(0,0,0,0.22),
		0 7px 14px rgba(0,0,0,0.34),
		0 16px 32px rgba(196,18,31,0.50),
		0 2px 4px rgba(0,0,0,0.35) !important;
}

.snx-contact-cta .snx-contact-cta__btn .wp-element-button:active {
	background-color: #b0101a !important;
	transform: translateY(1px);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.12),
		inset 0 2px 5px rgba(0,0,0,0.32),
		0 1px 3px rgba(0,0,0,0.25),
		0 2px 8px rgba(196,18,31,0.30) !important;
}

@media (prefers-reduced-motion: reduce) {
	.snx-contact-cta .snx-contact-cta__btn .wp-element-button {
		transition: none !important;
	}
}

/* Mobile */
@media (max-width: 768px) {
	/* CTA: revert to stacked on mobile */
	.snx-contact-cta.wp-block-group {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}

	.snx-contact-cta__title {
		white-space: normal !important;
		font-size: 1.1rem !important;
	}

	.snx-contact-cta .wp-block-buttons {
		justify-content: center;
	}

	.snx-contact-cols.wp-block-columns {
		gap: 1.25rem !important;
	}

	.snx-contact-form-col.wp-block-column {
		max-width: 100%;
	}

	/* 2x2 grid on mobile */
	.snx-contact-info.wp-block-column {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.snx-contact-detail.wp-block-group:nth-child(1),
	.snx-contact-detail.wp-block-group:nth-child(2) {
		border-bottom: 1px solid rgba(59,64,207,0.12);
	}

	.snx-contact-detail.wp-block-group:nth-child(odd) {
		border-right: 1px solid rgba(59,64,207,0.12);
	}

	.snx-contact-form-wrap {
		padding: 1.25rem;
	}
}

/* === Contact Page v3: Two-column (image left / form right) === */

/* ==========================================================
   TYPEWRITER — Get In Touch page
   ========================================================== */

/* ==========================================================
   TYPEWRITER — lives inside the h1 heading on Get In Touch
   ========================================================== */

/* h1 — FIXED grid container: never grows, never shifts neighbours.
   Height = line 1 (LET'S BUILD ~40px) + line 2 phrase at 70% size (~29px) + divider + gap.
   overflow:hidden clips any overshoot. */
.snx-ct2-heading {
	cursor: pointer;
	display: block !important;
	height: 110px !important;   /* fixed — never changes regardless of phrase */
	min-height: unset !important;
	overflow: hidden !important;
	margin-bottom: 0 !important;
}

/* Thin divider below the heading box */
.snx-ct2-heading::after {
	content: "";
	display: block;
	width: 52px;
	height: 2px;
	background: rgba(255,255,255,0.25);
	margin-top: 0.9rem;
}

/* Phrase span: 70% of h1 font size (36.4px × 0.7 = ~25.5px) */
#snx-typewriter,
.snx-type-cursor {
	font-size: 0.7em !important;  /* 70% of parent h1 */
	line-height: 1.2 !important;
}

/* Subtext snug below */
.snx-ct2-sub {
	margin-top: 0.6rem !important;
}

/* Inline wrapper for typed text + cursor */
.snx-type-cursor-wrap {
	display: inline;  /* flows naturally inside the h1 */
}

/* The typed phrase — highlight pill, inherits h1 font */
#snx-typewriter {
	display: inline;
	font: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	white-space: normal;
	/* bg + color set directly by JS via .style */
	background-color: #F5C400;
	color: #1A0B3D;
	transition: background-color 0.4s ease, color 0.3s ease;
	padding: 0.04em 0.22em 0.06em;
	border-radius: 5px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Blinking cursor — colour set directly by JS */
.snx-type-cursor {
	display: inline;
	font: inherit;
	font-weight: 900;
	color: #F5C400;
	transition: color 0.4s ease;
	margin-left: 1px;
	animation: snx-blink 0.72s step-start infinite;
	user-select: none;
}

@keyframes snx-blink {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.snx-type-cursor { animation: none; }
	#snx-typewriter  { transition: none; }
}

/* ==========================================================
   GET IN TOUCH — Contact form page
   ========================================================== */

/* Outer wrapper: zero padding so image bleeds edge-to-edge */
.snx-ct2-wrap.wp-block-group {
	padding: 0 !important;
	margin-bottom: 0 !important;
}

/* Columns: stretch to equal height, no gap */
.snx-ct2-cols.wp-block-columns {
	gap: 0 !important;
	align-items: stretch !important;
	margin: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* Left image column — overflow visible so glow bleeds freely */
.snx-ct2-image-col.wp-block-column {
	padding: 0 !important;
	position: relative;
	overflow: visible;
	align-self: stretch;
	background-color: #1A0B3D;
}

.snx-ct2-image-col .wp-block-image.snx-ct2-image {
	margin: 0;
	width: 100%;
	height: 100%;
	position: relative;
}

/* True sine-wave float — 10-stop approximation, zero pause */
@keyframes snx-ct2-float {
	0%   { transform: translateY(0px);     }
	10%  { transform: translateY(-3.7px);  }
	20%  { transform: translateY(-7.0px);  }
	30%  { transform: translateY(-10.2px); }
	40%  { transform: translateY(-11.8px); }
	50%  { transform: translateY(-12px);   }
	60%  { transform: translateY(-11.8px); }
	70%  { transform: translateY(-10.2px); }
	80%  { transform: translateY(-7.0px);  }
	90%  { transform: translateY(-3.7px);  }
	100% { transform: translateY(0px);     }
}

/* Shadow in perfect sine sync */
@keyframes snx-ct2-shadow {
	0%   { transform: scaleX(1.00); opacity: 0.45; }
	10%  { transform: scaleX(0.97); opacity: 0.41; }
	20%  { transform: scaleX(0.93); opacity: 0.35; }
	30%  { transform: scaleX(0.86); opacity: 0.26; }
	40%  { transform: scaleX(0.80); opacity: 0.16; }
	50%  { transform: scaleX(0.78); opacity: 0.12; }
	60%  { transform: scaleX(0.80); opacity: 0.16; }
	70%  { transform: scaleX(0.86); opacity: 0.26; }
	80%  { transform: scaleX(0.93); opacity: 0.35; }
	90%  { transform: scaleX(0.97); opacity: 0.41; }
	100% { transform: scaleX(1.00); opacity: 0.45; }
}

/* No ::before pseudo needed — glow is on the img via filter */

/* Figure carries the glow filter — bleeds outside column bounds seamlessly */
.snx-ct2-image-col .wp-block-image {
	position: relative;
	z-index: 2;
	filter:
		drop-shadow(0 0 2px  rgba(200,210,255,0.95))
		drop-shadow(0 0 10px rgba(160,180,255,0.80))
		drop-shadow(0 0 28px rgba(120,140,255,0.55))
		drop-shadow(0 0 55px rgba(99,102,241,0.35))
		drop-shadow(0 0 90px rgba(26,11,61,0.0)); /* last stop = page bg = seamless fade */
}

/* Perspective floor shadow — wide, skewed, cinematic */
.snx-ct2-image-col .wp-block-image::after {
	content: '';
	position: absolute;
	bottom: 28px;
	left: 50%;
	translate: -50% 0;
	width: 88%;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(
		ellipse at center,
		rgba(2,0,10,1.0)   0%,
		rgba(4,1,18,0.88)  30%,
		rgba(8,2,28,0.55)  58%,
		rgba(12,4,35,0.18) 78%,
		transparent        95%
	);
	transform: scaleY(1) perspective(60px) rotateX(20deg);
	transform-origin: center top;
	filter: blur(8px);
	animation: snx-ct2-shadow 4.5s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
	z-index: 3;
}

/* Target any img inside the image column — fills slot, zero gaps */
.snx-ct2-image-col img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	object-fit: cover;
	object-position: center 58%;
	transform: scale(1.0);
	padding: 24px 16px;
	display: block;
	animation: snx-ct2-float 4.5s linear infinite;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.snx-ct2-image-col img,
	.snx-ct2-image-col .wp-block-image::after {
		animation: none !important;
	}
}

/* keep existing img object rules */
.snx-ct2-image-col .wp-block-image.snx-ct2-image img {
	object-position: center;
	display: block;
	border-radius: 0 !important;
}

/* Right form column: dark bg, padded — top padding reduced 20% */
.snx-ct2-form-col.wp-block-column {
	padding: 2.75rem 3rem 3rem !important;
	background: var(--wp--preset--color--primary);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Eyebrow label — glowing, popped out + double red underline */
.snx-ct2-eyebrow {
	font-size: 0.864rem; /* 0.72rem × 1.2 = +20% */
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 0.9rem !important;
	padding-bottom: 0.55rem;
	text-shadow:
		0 0 8px rgba(245,196,0,0.9),
		0 0 20px rgba(245,196,0,0.5),
		0 0 40px rgba(245,196,0,0.25);
	position: relative;
	display: inline-block;
}

/* Double red underline: first bar solid red, second bar offset below */
.snx-ct2-eyebrow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60px; /* fixed width so lines show even with no text */
	height: 2px;
	background: #E5192A;
	box-shadow:
		0 0 5px rgba(229,25,42,0.6),  /* glow on first bar */
		0 5px 0 #E5192A;              /* second bar — same red, 5px below */
}

/* Page heading */
.snx-ct2-heading.wp-block-heading {
	font-size: clamp(2rem, 3.5vw, 2.8rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: 0.6rem !important;
}

/* Subtext */
.snx-ct2-sub {
	font-size: 0.95rem;
	line-height: 1.65;
	color: #ffffff !important;
	font-weight: 700 !important;
	margin-bottom: 1.75rem !important;
}

/* Form card: smoked glass — dark but translucent */
.snx-ct2-form-col .snx-contact-form-wrap {
	background: linear-gradient(
		160deg,
		rgba(15,12,28,0.72) 0%,
		rgba(10,8,22,0.82)  100%
	) !important;
	backdrop-filter: blur(24px) saturate(1.3) brightness(0.75);
	-webkit-backdrop-filter: blur(24px) saturate(1.3) brightness(0.75);
	border: 1px solid rgba(255,255,255,0.10) !important;
	border-top-color: rgba(255,255,255,0.22) !important;
	border-left-color: rgba(255,255,255,0.12) !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.14),
		0 8px 32px rgba(0,0,0,0.55),
		0 2px 8px  rgba(0,0,0,0.35),
		0 0 24px 2px rgba(60,50,120,0.14) !important;
	padding: 1.5rem !important;
	border-radius: 12px;
	position: relative;
}

/* Form title: white */
.snx-ct2-form-col .snx-contact-form-wrap__title {
	color: #ffffff !important;
	font-size: 0.75rem !important;
	margin-bottom: 0.85rem !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Field labels: white */
.snx-ct2-form-col .snx-contact-form-wrap .grunion-field-label,
.snx-ct2-form-col .snx-contact-form-wrap label {
	color: rgba(255,255,255,0.55);
}

/* (required) badge: same line, same size, slightly dimmer */
.snx-contact-form-wrap .grunion-label-required {
	font-size: inherit !important;
	white-space: nowrap;
	display: inline !important;
	margin-left: 0.25em;
	color: rgba(255,255,255,0.38);
}

/* Input fields: brightened glass */
.snx-ct2-form-col .snx-contact-form-wrap input[type="text"],
.snx-ct2-form-col .snx-contact-form-wrap input[type="email"],
.snx-ct2-form-col .snx-contact-form-wrap input[type="tel"],
.snx-ct2-form-col .snx-contact-form-wrap select,
.snx-ct2-form-col .snx-contact-form-wrap textarea {
	background: rgba(255,255,255,0.07) !important;
	border-color: rgba(255,255,255,0.28) !important;
	color: #ffffff !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.snx-ct2-form-col .snx-contact-form-wrap input::placeholder,
.snx-ct2-form-col .snx-contact-form-wrap textarea::placeholder {
	color: rgba(255,255,255,0.3);
}

.snx-ct2-form-col .snx-contact-form-wrap input:focus,
.snx-ct2-form-col .snx-contact-form-wrap select:focus,
.snx-ct2-form-col .snx-contact-form-wrap textarea:focus {
	border-color: var(--wp--preset--color--secondary) !important;
	box-shadow: 0 0 0 3px rgba(59,64,207,0.25) !important;
	background: rgba(255,255,255,0.12) !important;
}

.snx-ct2-form-col .snx-contact-form-wrap select option {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
}

/* Info strip below two-col section */
.snx-ct2-info-strip.wp-block-group {
	padding: 0 !important;
	border-top: 1px solid rgba(255,255,255,0.08);
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Cancel constrained-layout horizontal padding on info strip */
.snx-ct2-info-strip .snx-ct2-info-cols.wp-block-columns {
	gap: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	padding-inline: 0 !important;
}

.snx-ct2-info-cell.wp-block-column {
	padding: 1.25rem 1.25rem !important;
	border-right: 1px solid rgba(255,255,255,0.08);
	display: grid !important;
	grid-template-columns: 32px 1fr;
	grid-template-rows: auto auto;
	column-gap: 0.6rem;
	row-gap: 0.05rem;
	align-items: center;
}

.snx-ct2-info-cell.wp-block-column:last-child {
	border-right: none;
}

.snx-ct2-info-cell .snx-contact-icon {
	width: 18px;
	height: 18px;
	margin-bottom: 0.4rem;
	background: rgba(59,64,207,0.25);
	stroke: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--yellow);
	padding: 5px;
	border-radius: 50%;
	box-sizing: content-box;
}

.snx-ct2-info-cell .snx-contact-icon {
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: center;
	margin: 0 !important;
}

.snx-ct2-info-label.wp-block-heading {
	grid-column: 2;
	grid-row: 1;
	margin: 0 !important;
	font-size: 0.65rem !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.4) !important;
	margin: 0 !important;
	font-weight: 600;
}

.snx-ct2-info-val {
	grid-column: 2;
	grid-row: 2;
	font-size: 0.88rem !important;
	color: rgba(255,255,255,0.85) !important;
	margin: 0 !important;
	line-height: 1.4;
}

.snx-ct2-info-val a {
	color: rgba(255,255,255,0.85) !important;
	text-decoration: none;
}

.snx-ct2-info-val a:hover {
	color: var(--wp--preset--color--yellow) !important;
}

/* Mobile */
@media (max-width: 900px) {
	.snx-ct2-cols.wp-block-columns {
		flex-direction: column !important;
	}

	.snx-ct2-image-col.wp-block-column {
		min-height: unset;
		flex-basis: 100% !important;
	}
	/* mobile image: show both phones fully, no crop */
	.snx-ct2-image-col .wp-block-image.snx-ct2-image {
		position: relative !important;
		height: 480px !important;
		overflow: hidden !important;
	}
	.snx-ct2-image-col img {
		position: absolute !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center 20% !important;
		transform: none !important;
		animation: none !important;
		display: block !important;
	}

	.snx-ct2-form-col.wp-block-column {
		flex-basis: 100% !important;
		padding: 2rem 1.25rem 2.5rem !important;
	}

	/* Info strip: 2-column grid on mobile */
	.snx-ct2-info-cols.wp-block-columns {
		flex-wrap: wrap !important;
		flex-direction: row !important;
	}

	.snx-ct2-info-strip .snx-ct2-info-cols .snx-ct2-info-cell.wp-block-column,
	.snx-ct2-info-cell.wp-block-column {
		flex: 0 0 50% !important;
		width: 50% !important;
		max-width: 50% !important;
		box-sizing: border-box !important;
		min-width: 0 !important;
		padding: 0.9rem 1rem !important;
		display: grid !important;
		grid-template-columns: 28px 1fr;
		grid-template-rows: auto auto;
		column-gap: 0.6rem;
		row-gap: 0.05rem;
		align-items: center;
		border-right: none !important;
		border-bottom: 1px solid rgba(255,255,255,0.08);
	}

	/* 3rd and 4th cells — no bottom border on last row */
	.snx-ct2-info-cell.wp-block-column:nth-child(3),
	.snx-ct2-info-cell.wp-block-column:nth-child(4) {
		border-bottom: none;
	}

	/* right cell in each row — add left divider */
	.snx-ct2-info-cell.wp-block-column:nth-child(even) {
		border-left: 1px solid rgba(255,255,255,0.08);
	}

	.snx-ct2-info-cell .snx-contact-icon {
		width: 24px !important;
		height: 24px !important;
		padding: 5px !important;
		grid-column: 1;
		grid-row: 1 / 3;
		align-self: center;
		margin: 0 !important;
	}

	.snx-ct2-info-label.wp-block-heading {
		font-size: 0.55rem !important;
		letter-spacing: 0.06em !important;
		grid-column: 2;
		grid-row: 1;
		margin: 0 !important;
	}

	.snx-ct2-info-val {
		font-size: 0.72rem !important;
		line-height: 1.3 !important;
		word-break: break-word;
		grid-column: 2;
		grid-row: 2;
	}

	.snx-ct2-info-val a {
		word-break: break-all;
	}
}

/* === Services Page === */

/* Expand content width for Services page */
.page-id-27 .entry-content > .wp-block-group {
	max-width: 100% !important;
}

.page-id-27 .snx-svc-grid-wrap .wp-block-columns {
	max-width: 1100px !important;
	width: 100% !important;
	margin-inline: auto !important;
}

/* Hero */
.snx-svc-hero.wp-block-group {
	padding: 3.5rem 1.5rem 3rem !important;
}

.snx-svc-hero__eyebrow {
	font-size: 0.864rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 0.5rem !important;
	text-shadow:
		0 0 8px  rgba(245,196,0,0.9),
		0 0 20px rgba(245,196,0,0.5),
		0 0 40px rgba(245,196,0,0.25);
}

.snx-svc-hero__title.wp-block-heading {
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: 0.75rem !important;
}

.snx-svc-hero__sub {
	max-width: 620px;
	color: rgba(255,255,255,0.7) !important;
	font-size: 1.05rem;
	line-height: 1.65;
	margin: 0 !important;
}

/* ── Solutions page: two-column header ─────────────────────── */
.snx-svc-hero2.wp-block-group {
	padding: 0 !important;
	overflow: hidden;
}

.snx-svc-hero2__cols.wp-block-columns {
	gap: 0 !important;
	align-items: stretch !important;
	margin: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	min-height: 300px;
}

/* Text column — dark frosted glass panel */
.snx-svc-hero2__text-col.wp-block-column {
	padding: 2rem 2rem 2rem 3rem !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	background:
		linear-gradient(
			135deg,
			rgba(5, 1, 18, 0.82) 0%,
			rgba(10, 4, 32, 0.72) 60%,
			rgba(20, 8, 55, 0.58) 100%
		) !important;
	backdrop-filter: blur(18px) saturate(1.4) !important;
	-webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
	box-shadow:
		inset 1px 0 0 rgba(255,255,255,0.06),
		inset 0 1px 0 rgba(255,255,255,0.05),
		4px 0 24px rgba(0,0,0,0.45) !important;
}

.snx-svc-hero2__eyebrow {
	font-size: 0.864rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 0.9rem !important;
	padding-bottom: 0.55rem;
	text-shadow:
		0 0 8px rgba(245,196,0,0.9),
		0 0 20px rgba(245,196,0,0.5),
		0 0 40px rgba(245,196,0,0.25);
	position: relative;
	display: inline-block;
}

.snx-svc-hero2__eyebrow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #E5192A;
	box-shadow:
		0 0 5px rgba(229,25,42,0.6),
		0 5px 0 #E5192A;
}

.snx-svc-hero2__title.wp-block-heading {
	font-size: clamp(1.5rem, 2.8vw, 2.2rem);
	line-height: 1.1;
	margin-bottom: 0.6rem !important;
	letter-spacing: -0.02em;
}

.snx-svc-hero2__sub {
	color: rgba(255,255,255,0.7) !important;
	font-size: 0.85rem;
	line-height: 1.6;
	max-width: 520px;
	margin: 0 !important;
}

/* Slide column */
.snx-svc-hero2__slide-col.wp-block-column {
	padding: 0 !important;
	position: relative;
	background: rgba(255,255,255,0.04);
	border-left: 1px solid rgba(255,255,255,0.10);
	overflow: hidden;
}

/* Slideshow container */
.snx-svc-slideshow.wp-block-group {
	position: relative;
	height: 100%;
	min-height: 300px;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden;
}

/* Hide slides immediately via CSS — JS canvas takes over on frontend */
.snx-svc-slideshow:not(.editor-styles-wrapper *) .snx-svc-slide.wp-block-group {
	display: none !important;
}

/* Each slide: stacked absolutely inside slideshow, fade in/out */
.snx-svc-slide.wp-block-group {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	opacity: 0;
	transition: opacity 0.7s ease;
	pointer-events: none;
	overflow: hidden;
}

.snx-svc-slide.snx-svc-slide--active {
	opacity: 1 !important;
	pointer-events: auto;
}

/* Uploaded image: fills entire slide as cover */
.snx-svc-slide .wp-block-image.snx-svc-slide__img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	z-index: 0;
}

.snx-svc-slide .wp-block-image.snx-svc-slide__img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block;
}

/* Placeholder hint — shown when slide still has the 1px transparent PNG */
.snx-svc-slide .wp-block-image.snx-svc-slide__img img[src*="snx-slide-placeholder"] {
	object-fit: contain !important;
	opacity: 0;
}

.snx-svc-slide .wp-block-image.snx-svc-slide__img:has(img[src*="snx-slide-placeholder"])::after {
	content: '\2191  Click to upload image';
	position: absolute;
	bottom: 3.5rem;
	left: 50%;
	translate: -50% 0;
	color: rgba(255,255,255,0.45);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	z-index: 5;
}

/* SVG watermark — unique per slide via data-URI ::before */
.snx-svc-slide.wp-block-group::before {
	content: '';
	position: absolute !important;
	top: 0; left: 0; right: 0; bottom: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 120px 120px;
	opacity: 0.18;
	z-index: 2;
	pointer-events: none;
}

.snx-svc-slide--1::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.4'%3E%3Crect x='2' y='2' width='20' height='8' rx='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cline x1='6' y1='6' x2='6.01' y2='6'/%3E%3Cline x1='6' y1='18' x2='6.01' y2='18'/%3E%3C/svg%3E");
}

.snx-svc-slide--2::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.4'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}

.snx-svc-slide--3::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.4'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");
}

.snx-svc-slide--4::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.4'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E");
}

.snx-svc-slide--5::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.4'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

.snx-svc-slide--6::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.4'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}

/* Label paragraph inside slide groups: hidden on frontend (JS label div takes over) */
.snx-svc-slide .snx-svc-slide__label.wp-block-paragraph {
	display: none !important;
}
/* Show it again in editor */
.editor-styles-wrapper .snx-svc-slide .snx-svc-slide__label.wp-block-paragraph {
	display: block !important;
}

/* Label bar: pinned to TOP of slide, floats over the image */
.snx-svc-slide__label {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: auto !important;
	margin: 0 !important;
	padding: 1rem 1.25rem 2.5rem !important; /* tall bottom padding = gradient fade down */
	background: linear-gradient(
		to bottom,
		rgba(10,5,30,0.88) 0%,
		rgba(10,5,30,0.55) 55%,
		rgba(10,5,30,0.00) 100%
	) !important;
	color: #ffffff !important;
	font-size: 1.05rem !important;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.03em;
	z-index: 4;
	box-sizing: border-box;
	width: 100% !important;
}

/* Progress dots */
.snx-svc-slide__dots {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	translate: -50% 0;
	display: flex;
	gap: 8px;
	z-index: 5;
}

.snx-svc-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,0.3);
	cursor: pointer;
	transition: background 0.3s, transform 0.3s;
}

.snx-svc-dot.snx-svc-dot--active {
	background: var(--wp--preset--color--yellow);
	transform: scale(1.3);
}

@media (max-width: 900px) {
	.snx-svc-hero2__text-col.wp-block-column {
		padding: 2.5rem 1.5rem 1.5rem !important;
	}
	.snx-svc-hero2__slide-col.wp-block-column {
		border-left: none;
		border-top: 1px solid rgba(255,255,255,0.10);
	}
	.snx-svc-slideshow.wp-block-group,
	.snx-svc-slide.wp-block-group {
		min-height: 320px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.snx-svc-slide.wp-block-group {
		transition: none !important;
	}
}

/* ── Image sequence reveal ─────────────────────────────────────── */

/* Canvas fills the slide column — anchored to the column (position:relative) */
.snx-seq {
	position: absolute;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	overflow: hidden;
	z-index: 10;
}

/* Both panels fill the canvas — A sits idle, B slides in from right */
.snx-seq__pan {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #0a0520;
	will-change: transform;
}

/* Panel B starts off-screen right */
.snx-seq__pan--b {
	transform: translateX(100%);
}

.snx-seq__pan--ready {
	transform: translateX(100%);
	transition: none;
}

/* Slide in: B moves from right to centre */
.snx-seq__pan--slide-in {
	transform: translateX(0%);
	transition: transform 580ms cubic-bezier(0.77, 0, 0.18, 1);
}

/* Slide out: A moves from centre to left */
.snx-seq__pan--slide-out {
	transform: translateX(-100%);
	transition: transform 580ms cubic-bezier(0.77, 0, 0.18, 1);
}

.snx-seq__pan--hidden {
	transform: translateX(100%);
	transition: none;
}

/* Label: top gradient bar */
.snx-seq__label {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 1rem 1.25rem 3rem;
	background: linear-gradient(
		to bottom,
		rgba(10,5,30,0.88) 0%,
		rgba(10,5,30,0.00) 100%
	);
	color: #ffffff;
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.03em;
	z-index: 5;
	pointer-events: none;
}

/* Dots */
.snx-seq .snx-svc-slide__dots {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	translate: -50% 0;
	z-index: 6;
}

@media (prefers-reduced-motion: reduce) {
	.snx-seq__pan--slide-in,
	.snx-seq__pan--slide-out {
		transition: none !important;
	}
}

/* ── EDITOR ONLY: hide canvas, show slides stacked vertically ──────── */
.editor-styles-wrapper .snx-seq { display: none !important; }

.editor-styles-wrapper .snx-svc-slideshow.wp-block-group {
	position: relative !important;
	height: auto !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	padding: 8px !important;
	background: rgba(255,255,255,0.04) !important;
}

.editor-styles-wrapper .snx-svc-slide.wp-block-group {
	display: block !important;
	position: relative !important;
	top: auto !important; left: auto !important;
	right: auto !important; bottom: auto !important;
	width: 100% !important;
	height: 280px !important;
	opacity: 1 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	outline: 1px dashed rgba(255,255,255,0.2);
}

.editor-styles-wrapper .snx-svc-slide .wp-block-image.snx-svc-slide__img {
	height: 280px !important;
}

.editor-styles-wrapper .snx-svc-slide__label {
	padding: 0.6rem 1rem !important;
	font-size: 0.9rem !important;
}

/* Slide number badge */
.editor-styles-wrapper .snx-svc-slide--1::after { content: 'Slide 1'; }
.editor-styles-wrapper .snx-svc-slide--2::after { content: 'Slide 2'; }
.editor-styles-wrapper .snx-svc-slide--3::after { content: 'Slide 3'; }
.editor-styles-wrapper .snx-svc-slide--4::after { content: 'Slide 4'; }
.editor-styles-wrapper .snx-svc-slide--5::after { content: 'Slide 5'; }
.editor-styles-wrapper .snx-svc-slide--6::after { content: 'Slide 6'; }
.editor-styles-wrapper .snx-svc-slide.wp-block-group::after {
	position: absolute !important;
	top: 6px !important; right: 8px !important;
	bottom: auto !important; left: auto !important;
	background: rgba(10,5,30,0.75) !important;
	background-image: none !important;
	background-size: auto !important;
	opacity: 1 !important;
	color: rgba(255,255,255,0.55);
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 4px;
	z-index: 10;
}

/* Grid section */
.snx-svc-grid-wrap.wp-block-group {
	padding: 0 1.5rem 4rem !important;
	max-width: 100% !important;
	position: relative;
}

/* Page background must stay dark so the gap between alignfull blocks is invisible */
.page-id-27,
.page-id-27 body,
.page-id-27 .wp-site-blocks,
.page-id-27 main {
	background-color: #1A0B3D !important;
}

/* Divider between header and service cards */
.snx-svc-grid-wrap.wp-block-group::before {
	content: '';
	display: block;
	width: 320px;
	height: 1px;
	margin: 2.5rem auto 2.5rem;
	background: linear-gradient(90deg,
		transparent 0%,
		#E5192A 20%,
		#F5C400 50%,
		#3B40CF 80%,
		transparent 100%
	);
	border-radius: 1px;
	box-shadow:
		0 0 6px rgba(245, 196, 0, 0.40),
		0 0 16px rgba(245, 196, 0, 0.15);
}

/* Divider immediately after the service cards */
.snx-svc-grid-wrap.wp-block-group::after {
	content: '';
	display: block;
	width: 320px;
	height: 1px;
	margin: 2.5rem auto 0;
	background: linear-gradient(90deg,
		transparent 0%,
		#E5192A 20%,
		#F5C400 50%,
		#3B40CF 80%,
		transparent 100%
	);
	border-radius: 1px;
	box-shadow:
		0 0 6px rgba(245, 196, 0, 0.40),
		0 0 16px rgba(245, 196, 0, 0.15);
}

.snx-svc-grid-wrap > .is-layout-constrained {
	max-width: 100% !important;
}

.snx-svc-row.wp-block-columns {
	gap: 1.5rem !important;
	align-items: stretch !important;
	margin: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* Allow cards to be wider — override constrained max-width */
.snx-svc-card.wp-block-column {
	min-width: 0;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
}

/* Card column — stripped, perspective only */
.snx-svc-card.wp-block-column {
	overflow: visible !important;
	cursor: pointer;
}

/* Hover lift on the card column itself (safe — not on the preserve-3d inner) */
.snx-svc-card.wp-block-column:not(.snx-svc-card--flipped):hover {
	box-shadow: 0 12px 36px rgba(0,0,0,0.5) !important;
}

/* Icon */
.snx-svc-icon {
	width: 36px;
	height: 36px;
	display: block;
	margin-bottom: 1.25rem;
	color: var(--wp--preset--color--yellow);
	stroke: var(--wp--preset--color--yellow);
	background: rgba(245,196,0,0.1);
	padding: 8px;
	border-radius: 10px;
	box-sizing: content-box;
}

/* Card title */
.snx-svc-card__title.wp-block-heading {
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	margin-bottom: 0.6rem !important;
	color: #ffffff !important;
}

/* Card teaser */
.snx-svc-card__teaser {
	font-size: 0.88rem;
	line-height: 1.65;
	color: rgba(255,255,255,0.6) !important;
	margin-bottom: 1.25rem !important;
}

/* Learn More button */
.snx-svc-toggle-wrap.wp-block-buttons {
	margin: 0 !important;
}

.snx-svc-toggle .wp-element-button {
	background: transparent !important;
	color: var(--wp--preset--color--yellow) !important;
	border: 1px solid rgba(245,196,0,0.4) !important;
	padding: 0.45rem 1.1rem !important;
	font-size: 0.75rem !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 6px;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.snx-svc-toggle .wp-element-button:hover {
	background: rgba(245,196,0,0.12) !important;
	border-color: rgba(245,196,0,0.8) !important;
	color: var(--wp--preset--color--yellow) !important;
}

/* ── Flip card mechanic ────────────────────────────────── */

/* Card becomes the flip container */
.snx-svc-card.wp-block-column {
	perspective: 1000px;
	min-height: 310px;
	/* Must NOT have transform-style itself — only inner gets it */
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Inner wrapper — wraps both faces, does the rotation */
.snx-svc-card-inner {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 310px !important;
	transform-style: preserve-3d !important;
	-webkit-transform-style: preserve-3d !important;
	transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1) !important;
	background: none !important;
	border: none !important;
	/* Do NOT set opacity, filter, or will-change here — they break preserve-3d */
}

/* Force preserve-3d via specificity — override any wp-block rule */
.snx-svc-grid-wrap .snx-svc-card-inner {
	transform-style: preserve-3d !important;
	-webkit-transform-style: preserve-3d !important;
}

.snx-svc-card.snx-svc-card--flipped .snx-svc-card-inner {
	transform: rotateY(180deg) !important;
	-webkit-transform: rotateY(180deg) !important;
}

/* Both faces share the same footprint */
.snx-svc-card-front,
.snx-svc-card-back {
	position: absolute !important;
	inset: 0 !important;
	backface-visibility: hidden !important;
	-webkit-backface-visibility: hidden !important;
	border-radius: 14px !important;
	padding: 2rem 1.75rem 1.75rem !important;
	display: flex !important;
	flex-direction: column !important;
	transition: none !important;
}

/* 
 * JS-driven visibility swap — robust fallback when browser flattens preserve-3d
 * (happens when ancestor has overflow:hidden or certain compositing properties).
 * JS adds .snx-svc-card--flipped at click and swaps these at mid-flip (300ms).
 */

/* Back is hidden until flipped */
.snx-svc-card-back {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Once flipped: hide front, show back */
.snx-svc-card--flipped .snx-svc-card-front {
	visibility: hidden !important;
	pointer-events: none !important;
}
.snx-svc-card--flipped .snx-svc-card-back {
	visibility: visible !important;
	pointer-events: auto !important;
}

/* Front face — same glass style as the card */
.snx-svc-card-front {
	cursor: pointer !important;
	background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
	border: 1px solid rgba(255,255,255,0.12);
	border-top-color: rgba(255,255,255,0.22);
	border-left-color: rgba(255,255,255,0.16);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 24px rgba(0,0,0,0.3);
}

/* Back face — dark glass with indigo left accent */
.snx-svc-card-back {
	background: linear-gradient(145deg, rgba(59,64,207,0.18) 0%, rgba(26,11,61,0.95) 100%);
	border: 1px solid rgba(59,64,207,0.45);
	border-left: 4px solid var(--wp--preset--color--secondary);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.45);
	transform: rotateY(180deg);
	justify-content: center;
	gap: 0;
}

/* Back face heading */
.snx-svc-card-back__title {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary) !important;
	margin: 0 0 0.85rem !important;
}

/* Panel hidden by default — JS moves it into back face */
.snx-svc-panel.wp-block-group {
	display: none;
}

/* Panel list on back face */
.snx-svc-card-back .snx-svc-panel__list.wp-block-list,
.snx-svc-card-back .wp-block-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.snx-svc-card-back .wp-block-list li {
	padding: 0.45rem 0 0.45rem 1rem;
	font-size: 0.82rem;
	color: rgba(255,255,255,0.85) !important;
	border-bottom: 1px solid rgba(255,255,255,0.07);
	position: relative;
	line-height: 1.45;
}

.snx-svc-card-back .wp-block-list li:last-child {
	border-bottom: none;
}

.snx-svc-card-back .wp-block-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--yellow);
	box-shadow: 0 0 6px rgba(245,196,0,0.7);
}

/* Flip button on back */
.snx-svc-card-back__close {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 1rem;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 6px;
	padding: 0.35rem 0.9rem;
	color: rgba(255,255,255,0.6);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
	align-self: flex-start;
}

.snx-svc-card-back__close:hover {
	border-color: rgba(255,255,255,0.5);
	color: rgba(255,255,255,0.9);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.snx-svc-card-inner {
		transition: none;
	}
}

/* ==========================================================
   TICKER / MARQUEE STRIP  — two crossing diagonal ribbons
   ========================================================== */

/*
  Floating overlay ticker:
  - .snx-ticker-section has zero height and no background
  - Bands use position:absolute and pull upward via negative top
  - High z-index floats them OVER adjacent sections
  - No frame, no box — pure ribbon overlay
*/
/* Global: prevent any element from causing horizontal scroll */
html, body {
	overflow-x: hidden;
}

.snx-ticker-section {
	position: relative;
	width: 100%;
	overflow: hidden; /* clip oversized ticker bands at viewport edge */
	height: 0;              /* no frame — bands float out of flow */
	background: transparent;
	overflow: visible;      /* let bands bleed over neighbours */
	margin: 0;
	z-index: 10;
	pointer-events: none;   /* don’t block clicks on content below */
}

/* Each band is absolutely positioned, wider than viewport to cover diagonal edges.
   Fixed height (not padding-derived) so the band and its handle can be
   locked to the exact same pixel height — no bare band colour can
   peek above or below the handle. Flex layout lets the top band hold
   the fixed "handle" tag beside the scrolling row, so the row reads as
   flowing text INSIDE the handle's own pole/container. */
.snx-ticker-band {
	position: absolute;
	left: -10%;
	width: 120%;
	height: 34px;
	overflow: hidden;
	padding: 0;
	pointer-events: all;    /* re-enable pointer events on the bands themselves */
	display: flex;
	align-items: center;
	border-radius: 999px;   /* fully rounded ends soften the cut edges at the rotated corners */
}

/* TOP band: red, tilts down-right, floats upward, scrolls LEFT.
   Smooth cylinder/pole shading: a single top-to-bottom gradient with a
   bright specular highlight near the top edge and a soft shadow at the
   bottom edge — reads as a smooth, rounded rod (curved top/bottom
   edge in cross-section) rather than flat paint or a woven texture. */
.snx-ticker-band--top {
	top: -22px;
	background:
		linear-gradient(
			to bottom,
			rgba(255,255,255,0.5) 0%,
			rgba(255,255,255,0.32) 10%,
			rgba(255,255,255,0.14) 22%,
			rgba(255,255,255,0.04) 34%,
			rgba(0,0,0,0.02) 50%,
			rgba(0,0,0,0.08) 65%,
			rgba(0,0,0,0.18) 80%,
			rgba(0,0,0,0.32) 100%
		),
		#E5192A;
	transform: rotate(-4deg);
	z-index: 12;
	/* Glow now matches the ribbon's own hue (lightened) instead of a
	   white hairline — a same-colour-family edge blends smoothly into
	   the band itself (no hard white line breaking the surface) while
	   still separating it from the background via a soft, wider bloom. */
	box-shadow:
		0 0 0 1.5px rgba(255,140,150,0.9),
		0 0 26px rgba(255,110,124,0.75),
		0 0 46px rgba(229,25,42,0.45),
		0 6px 30px rgba(0,0,0,0.5);
}

/* BOTTOM band: indigo, tilts up-right (opposite), scrolls RIGHT — same smooth pole shading */
.snx-ticker-band--btm {
	top: 8px;
	background:
		linear-gradient(
			to bottom,
			rgba(255,255,255,0.46) 0%,
			rgba(255,255,255,0.28) 10%,
			rgba(255,255,255,0.12) 22%,
			rgba(255,255,255,0.03) 34%,
			rgba(0,0,0,0.02) 50%,
			rgba(0,0,0,0.07) 65%,
			rgba(0,0,0,0.16) 80%,
			rgba(0,0,0,0.3) 100%
		),
		#3B40CF;
	transform: rotate(4deg);
	z-index: 11;
	box-shadow:
		0 0 0 1.5px rgba(150,155,240,0.9),
		0 0 26px rgba(120,126,232,0.75),
		0 0 46px rgba(59,64,207,0.45),
		0 6px 26px rgba(0,0,0,0.45);
}

/* Scrolling rows */
.snx-ticker-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	white-space: nowrap;
	width: max-content;
	will-change: transform;
	/* Rows are wp:paragraph blocks and inherit the theme's default block
	   margin — zero it out so the row sits dead-center in the band
	   instead of floating low and leaving bare band color above/below
	   the handle (the "red bleed" above/below the purple tab). */
	margin: 0 !important;
}

/* Top row scrolls LEFT */
.snx-ticker-band--top .snx-ticker-row {
	animation: snx-scroll-left 32s linear infinite;
}

/* Bottom row scrolls RIGHT (reverse) */
.snx-ticker-band--btm .snx-ticker-row {
	animation: snx-scroll-right 26s linear infinite;
}

.snx-ticker-section:hover .snx-ticker-row {
	animation-play-state: paused;
}

@keyframes snx-scroll-left {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@keyframes snx-scroll-right {
	0%   { transform: translateX(-50%); }
	100% { transform: translateX(0); }
}

/* Text items */
.snx-ticker-text {
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	white-space: nowrap;
	padding: 0 1.1rem;
	line-height: 1;
}

/* Bullet separators */
.snx-ticker-dot {
	font-size: 0.7rem;
	color: rgba(255,255,255,0.5);
	flex-shrink: 0;
	line-height: 1;
}

/* Server-rendered headline row (see snx_ticker_server_render in
   functions.php) carries its own inline font-size — sized to sit
   comfortably centred in the 34px band. */
.snx-ticker-row {
	font-size: 0.7rem !important;
	letter-spacing: 0.1em !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.snx-ticker-row {
		animation: none !important;
	}
}

/* ---- Ribbon handle: a fixed "Latest Company News" cap that lives
   INSIDE the top band's flex row, alongside the scrolling headline
   row — so it reads as the ribbon's own container/label, with the
   headlines visually flowing in the space beside it. Dark purple
   (matches footer) so it reads as a distinct label against the red
   ribbon background, not more red-on-red. Height matches the band
   exactly (both fixed at the same 42px) so no band colour can show
   above or below it, and a filler cap (::before) extends further
   left, under the rotated band's corner, so no red sliver can ever
   peek through at the screen edge regardless of the ribbon's tilt. */
.snx-ticker-handle {
	flex: 0 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	margin: 0;
	/* Pull the handle as close to the screen's left edge as possible
	   while still keeping its label fully on-screen and readable —
	   the band starts 10% of the viewport further left (120% wide,
	   left:-10%), so this offset lands the handle flush with x=0. */
	margin-left: 8.34%;
	padding: 0 1.2rem 0 1rem;
	background: #1A0B3D;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.1) 20%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.28) 100%);
	color: #ffffff;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
	box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9), 6px 0 16px rgba(0,0,0,0.4);
	border-radius: 999px 0 0 999px;
	z-index: 2;
}

/* Filler cap: solid-colour rectangle sitting just behind/left of the
   handle, covering the small triangular sliver the band's -4deg tilt
   would otherwise expose at its rotated top-left/bottom-left corner. */
.snx-ticker-handle::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60px;
	width: 60px;
	background: #1A0B3D;
}

/* Keep the scrolling row clipped to the remaining ribbon space beside the handle */
.snx-ticker-band--top .snx-ticker-row {
	flex: 1 1 auto;
	min-width: 0;
}

/* Clickable headline links inside the ticker */
.snx-ticker-link {
	color: inherit;
	text-decoration: none;
	pointer-events: all;
}
.snx-ticker-link:hover {
	text-decoration: underline;
}

/* ==========================================================
   TEAM PAGE
   ========================================================== */

/* ---- Team hero ---- */
.snx-team-hero {
	position: relative;
	overflow: hidden;
}
.snx-team-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
}
.snx-team-hero__heading.wp-block-heading {
	font-size: clamp(2.4rem, 5vw, 4rem) !important;
	line-height: 1.1 !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	letter-spacing: -0.02em !important;
	margin: 0.5rem 0 1.5rem !important;
	color: #fff !important;
}

/* ---- Team cards ----
   Clicking/tapping a card opens the profile modal (snx_team_profile_modal
   in functions.php). The four cards in .snx-team-row--gated start hidden
   (see rule below) and are only unhidden — via PHP adding .is-active —
   when the admin activates them in WP Admin > Invoice Portal > Site Media. */
.snx-team-card.wp-block-column {
	background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 14px;
	padding: 2rem 1.75rem 1.75rem !important;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	cursor: pointer;
}

/* Gated row: cards are hidden from visitors until the admin flips them on.
   PHP renders the row server-side with only active cards present (safer
   than CSS display:none, since hidden ones never reach the page at all)
   — this rule is a defensive fallback in case markup ever renders without
   the PHP filter applied. */
.snx-team-row--gated .snx-team-card:not(.is-active) {
	display: none !important;
}
.snx-team-card.wp-block-column:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 40px rgba(0,0,0,0.45);
	border-color: rgba(59,64,207,0.45);
}

/* Avatar placeholder — gradient circle with initials feel */
.snx-team-card__avatar {
	width: 72px !important;
	height: 72px !important;
	border-radius: 50% !important;
	margin-bottom: 1.25rem !important;
	position: relative;
	overflow: hidden;
}
.snx-team-card__avatar--1 { background: linear-gradient(135deg, #3B40CF 0%, #1A0B3D 100%); }
.snx-team-card__avatar--2 { background: linear-gradient(135deg, #F5C400 0%, #3B40CF 100%); }
.snx-team-card__avatar--3 { background: linear-gradient(135deg, #E5192A 0%, #3B40CF 100%); }
.snx-team-card__avatar--4 { background: linear-gradient(135deg, #00d4a0 0%, #1A0B3D 100%); }
.snx-team-card__avatar--5 { background: linear-gradient(135deg, #3B40CF 0%, #F5C400 100%); }
.snx-team-card__avatar--6 { background: linear-gradient(135deg, #E5192A 0%, #1A0B3D 100%); }

/* Silhouette icon inside avatar */
.snx-team-card__avatar::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.18);
}

.snx-team-card__name.wp-block-heading {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	margin: 0 0 0.25rem !important;
	color: #fff !important;
}
.snx-team-card__role {
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	margin: 0 0 0.9rem !important;
}
.snx-team-card__bio {
	line-height: 1.65 !important;
	margin: 0 !important;
}

/* ---- Team profile modal ----
   Portrait photo on the left, write-up (name/role/social/bio) on the
   right. Transparent-edge glass card: a radial mask fades the card to
   fully invisible at its outer border so it dissolves into the dimmed,
   blurred backdrop with no hard edge. Populated at click-time by JS in
   functions.php (snx_team_profile_modal) from the clicked card's own
   DOM content plus its data-photo-url/data-social-url attributes. */
.snx-tp-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(5,2,18,0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.snx-tp-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.snx-tp-card {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 2rem;
	width: 100%;
	max-width: 640px;
	max-height: 85vh;
	overflow-y: auto;
	padding: 2.5rem;
	border-radius: 24px;
	background: linear-gradient(160deg, rgba(26,11,61,0.92) 0%, rgba(10,8,22,0.96) 100%);
	backdrop-filter: blur(28px) saturate(1.3);
	-webkit-backdrop-filter: blur(28px) saturate(1.3);
	box-shadow: 0 24px 64px rgba(0,0,0,0.55);
	transform: scale(0.92) translateY(12px);
	transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.1);
	/* Transparent edge: mask fades the card to fully invisible at its
	   outer border, so it dissolves into the backdrop with no hard edge. */
	-webkit-mask-image: radial-gradient(ellipse at center, #000 80%, transparent 100%);
	mask-image: radial-gradient(ellipse at center, #000 80%, transparent 100%);
	border: 1px solid rgba(255,255,255,0.14);
}
.snx-tp-overlay.is-open .snx-tp-card {
	transform: scale(1) translateY(0);
}

.snx-tp-close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.06);
	color: #ffffff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
	z-index: 2;
}
.snx-tp-close:hover {
	background: rgba(255,255,255,0.14);
}

/* Portrait frame — left column, 3:4 ratio */
.snx-tp-photo {
	flex: 0 0 180px;
}
.snx-tp-photo-frame {
	width: 180px;
	height: 240px;
	border-radius: 16px;
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.14);
	box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
/* Fallback swatch (no photo uploaded yet) — same gradient language as
   the card avatars, plus a silhouette so it still reads as a portrait. */
.snx-tp-swatch--1 { background: linear-gradient(135deg, #3B40CF 0%, #1A0B3D 100%); }
.snx-tp-swatch--2 { background: linear-gradient(135deg, #F5C400 0%, #3B40CF 100%); }
.snx-tp-swatch--3 { background: linear-gradient(135deg, #E5192A 0%, #3B40CF 100%); }
.snx-tp-swatch--4 { background: linear-gradient(135deg, #00d4a0 0%, #1A0B3D 100%); }
.snx-tp-swatch--5 { background: linear-gradient(135deg, #3B40CF 0%, #F5C400 100%); }
.snx-tp-swatch--6 { background: linear-gradient(135deg, #E5192A 0%, #1A0B3D 100%); }
.snx-tp-photo-frame:not(.has-photo)::after {
	content: "";
	position: absolute;
	bottom: -18px;
	left: 50%;
	transform: translateX(-50%);
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background: rgba(255,255,255,0.18);
}

/* Write-up — right column */
.snx-tp-info {
	flex: 1;
	min-width: 0;
	padding-top: 0.25rem;
}
.snx-tp-name {
	font-size: 1.35rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	margin: 0 0 0.3rem !important;
}
.snx-tp-role {
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: #F5C400 !important;
	margin: 0 0 0.9rem !important;
}
.snx-tp-social {
	display: none;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: #ffffff;
	text-decoration: none;
	background: rgba(59,64,207,0.35);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 100px;
	padding: 0.4rem 0.9rem;
	margin-bottom: 1.1rem;
	transition: background 0.2s ease;
	width: fit-content;
}
.snx-tp-social:hover {
	background: rgba(59,64,207,0.55);
	color: #ffffff;
}
.snx-tp-bio {
	font-size: 0.95rem !important;
	line-height: 1.7 !important;
	color: rgba(255,255,255,0.78) !important;
	margin: 0 !important;
}

@media (max-width: 560px) {
	.snx-tp-card {
		flex-direction: column;
		padding: 2rem 1.5rem;
		text-align: center;
	}
	.snx-tp-photo {
		flex: none;
		align-self: center;
	}
	.snx-tp-photo-frame {
		width: 150px;
		height: 200px;
	}
	.snx-tp-social {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.snx-tp-overlay,
	.snx-tp-card {
		transition: none !important;
	}
}

/* ---- Network constellation ---- */
.snx-clients-wrap {
	background: #0d0933;
}

/* ── Client constellation ──────────────────────────────────────────
   The core/html wrapper holds canvas + absolutely-positioned nodes.
   Width is always 100% of its parent (no horizontal overflow).
   Height is fluid via aspect-ratio so it scales on every viewport.
   Nodes are sized with clamp() so they stay readable but compact.
──────────────────────────────────────────────────────────── */
.snx-net-wrap {
	position: relative !important;
	/* Fluid height: 2:1 on wide, squarer on narrow — all nodes visible */
	aspect-ratio: 2 / 1 !important;
	height: auto !important;
	min-height: 420px !important;
	max-height: 620px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	background: linear-gradient(160deg, #0a0728 0%, #111155 50%, #0a0728 100%);
	overflow: hidden !important;   /* hard clip — nothing spills out */
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;         /* NO horizontal padding on this element */
}

/* Canvas always matches the wrap exactly */
.snx-net-canvas {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: block !important;
}

/* Nodes — clamp() scales from tiny on mobile to comfortable on desktop */
.snx-net-node {
	position: absolute !important;
	transform: translate(-50%, -50%) !important;
	width:  clamp(70px, 9vw, 110px) !important;
	height: clamp(70px, 9vw, 110px) !important;
	border-radius: 50% !important;
	background: #fff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	cursor: default;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 20px rgba(0,0,0,0.40), 0 0 0 2px rgba(59,64,207,0.22);
	z-index: 2;
}
.snx-net-node:hover {
	transform: translate(-50%, -50%) scale(1.08) !important;
	box-shadow: 0 8px 28px rgba(59,64,207,0.50), 0 0 0 3px rgba(59,64,207,0.65);
}
.snx-net-node--lg {
	width:  clamp(90px, 11vw, 140px) !important;
	height: clamp(90px, 11vw, 140px) !important;
}
/* Legacy text spans (hidden when logo img present) */
.snx-net-node span {
	font-size: clamp(0.48rem, 0.9vw, 0.72rem);
	font-weight: 700;
	color: #1A0B3D;
	letter-spacing: 0.02em;
	line-height: 1.3;
	padding: 0 6px;
	text-transform: uppercase;
	pointer-events: none;
}

/* Logo image inside node — fills 70% of circle, crisp rendering */
.snx-net-logo {
	width: 72% !important;
	height: 72% !important;
	object-fit: contain !important;
	object-position: center !important;
	pointer-events: none;
	display: block;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

/* Larger logo for --lg nodes */
.snx-net-node--lg .snx-net-logo {
	width: 68% !important;
	height: 68% !important;
}
/* Corner bracket decorations */
.snx-net-node::before,
.snx-net-node::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	border-color: rgba(26,11,61,0.45);
	border-style: solid;
}
.snx-net-node::before { top: 6px; left: 6px; border-width: 2px 0 0 2px; }
.snx-net-node::after  { bottom: 6px; right: 6px; border-width: 0 2px 2px 0; }

/* Mobile — taller aspect ratio so nodes don't overlap vertically */
@media (max-width: 600px) {
	.snx-net-wrap {
		aspect-ratio: 1.1 / 1 !important;
		min-height: 320px !important;
		max-height: 480px !important;
	}
	.snx-net-node {
		width:  clamp(58px, 16vw, 80px) !important;
		height: clamp(58px, 16vw, 80px) !important;
	}
	.snx-net-node--lg {
		width:  clamp(72px, 20vw, 100px) !important;
		height: clamp(72px, 20vw, 100px) !important;
	}
	.snx-net-node span { font-size: clamp(0.44rem, 3vw, 0.58rem); }
}

/* ==========================================================
   ABOUT PAGE
   ========================================================== */


/* ── Consistent horizontal padding across all Who We Are sections ──────── */
.snx-about-hero,
.snx-about-mission,
.snx-about-stats,
.snx-about-values,
.snx-about-story {
	margin-top: 1px !important;
	padding-left: 3rem !important;
	padding-right: 3rem !important;
}

/* ---- Hero ---- */
.snx-about-hero {
	position: relative;
	overflow: hidden;
	padding-top: 2rem !important;
	padding-bottom: 2rem !important;
}

/* Glass overlay removed — billboard is the visual */
.snx-about-hero::after { display: none; }

/* ── Window-blind billboard — Who We Are hero ───────────────────
   20 VERTICAL slats side by side (flex-direction: row).
   Each slat rotates on its Y-axis like a vertical blind panel.
   Wave sweeps LEFT → RIGHT via staggered delays.
   Colour only fully changes once the LAST slat completes —
   all slats flip through on the same keyframe, just offset in time.
     Face A = deep purple #1A0B3D
     Face B = bright indigo #6B6FFF
─────────────────────────────────────────────── */
.snx-hero-billboard {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: row;
	pointer-events: none;
	overflow: hidden;
	/* Deep perspective = dramatic 3-D tilt on each slat */
	perspective: 900px;
	perspective-origin: 50% 50%;
}

/* One vertical blind slat — 10 slats, each ~10% wide.
   calc(10% + 1px) overlaps neighbour so no subpixel cracks.
   Animation starts paused — JS plays it when hero is visible,
   pauses it when hero leaves the viewport. */
.snx-bb-slat {
	height: 100%;
	flex: none;
	width: calc(10% + 1px);
	position: relative;
	transform-style: preserve-3d;
	will-change: transform;
	animation: snx-blind-flip 8s ease-in-out infinite;
	animation-fill-mode: both;
	animation-play-state: paused;  /* off by default — JS activates */
}

/* Faces — front and back of each vertical slat.
   width/height 100% ensures the 1px overlap bleed is fully painted. */
.snx-bb-face {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Face A: deep purple — resting state */
.snx-bb-face--a {
	background: #1A0B3D;
	transform: rotateY(0deg);
	/* Subtle right-edge shadow = depth illusion on each slat */
	box-shadow: inset -4px 0 12px rgba(0,0,0,0.55);
}

/* Face B: brand indigo — matches the "Get a Quote" button colour (#3B40CF)
   exactly, so the billboard's bright face ties directly to the site's CTA. */
.snx-bb-face--b {
	background: #3B40CF;
	transform: rotateY(180deg);
	box-shadow: inset -4px 0 12px rgba(0,0,0,0.35),
	            inset  4px 0 16px rgba(255,255,255,0.08);
}

/* Face C not used */
.snx-bb-face--c { display: none; }

@keyframes snx-blind-flip {
	0%   { transform: rotateY(0deg);   }   /* dark face A */
	8%   { transform: rotateY(0deg);   }   /* hold dark */
	25%  { transform: rotateY(180deg); }   /* flip to bright face B */
	69%  { transform: rotateY(180deg); }   /* hold bright ~3.5s */
	86%  { transform: rotateY(360deg); }   /* flip back to dark */
	100% { transform: rotateY(360deg); }   /* hold dark before loop */
}

/* All hero children sit above the blinds */
.snx-about-hero > *:not(.snx-hero-billboard) {
	position: relative;
	z-index: 2;
}

/* Mobile: reduce perspective for tighter view, keep effect readable */
@media (max-width: 900px) {
	.snx-hero-billboard {
		perspective: 500px;
	}
	.snx-bb-face--a {
		box-shadow: inset -2px 0 8px rgba(0,0,0,0.55);
	}
	.snx-bb-face--b {
		box-shadow: inset -2px 0 8px rgba(0,0,0,0.35),
		            inset  2px 0 10px rgba(255,255,255,0.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.snx-bb-slat {
		animation: none !important;
		transform: rotateY(0deg) !important;
	}
}

/* Dot-grid background texture */
.snx-about-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
	z-index: 0;
}

.snx-about-hero > * {
	position: relative;
	z-index: 2;
}

.snx-about-eyebrow {
	font-size: 0.62rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	margin: 0 0 1rem !important;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.snx-about-eyebrow::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--yellow);
	border-radius: 2px;
}

.snx-about-hero__heading.wp-block-heading {
	font-size: clamp(1.5rem, 2.8vw, 2.2rem) !important;
	line-height: 1.1 !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: -0.02em !important;
	margin: 0 0 0.9rem !important;
	color: #fff !important;
}

/* Frosted-glass text highlight — wraps the text itself like a marker
   highlight (box-decoration-break:clone gives each wrapped line its own
   blurred backdrop instead of one big rectangle around the paragraph). */
.snx-about-hero__lead {
	font-size: 0.85rem !important;
	line-height: 2.1 !important;
	color: rgba(255,255,255,0.9) !important;
	margin: 0 !important;
	display: inline;
	padding: 0.3em 0.1em !important;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	border-radius: 4px;
	background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 100%);
	backdrop-filter: blur(14px) saturate(1.3);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.22),
		inset 0 -1px 0 rgba(0,0,0,0.12);
}

/* Capability badge pills */
.snx-about-hero__badge {
	gap: 0.6rem !important;
	padding-top: 0.5rem;
}

.snx-about-hero__badge-item {
	display: inline-block !important;
	margin: 0 !important;
	padding: 0.35rem 0.9rem !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	border: 1px solid rgba(245,196,0,0.4) !important;
	border-radius: 100px !important;
	color: var(--wp--preset--color--yellow) !important;
	background: rgba(245,196,0,0.08) !important;
}

/* ---- Mission ---- */
.snx-about-mission {
	position: relative;
}

.snx-about-mission__inner {
	max-width: 820px;
	margin-left: auto !important;
	margin-right: 0 !important;
	text-align: left !important;
}

.snx-about-mission__inner * {
	text-align: left !important;
}

.snx-about-mission__rule {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.snx-about-mission__quote.wp-block-heading {
	color: #fff !important;
	margin: 0.1rem 0 0.4rem !important;
	font-size: clamp(1.3rem, 1.9vw, 1.7rem) !important;
	line-height: 1.5 !important;
	/* Reserve the full rendered-text height up front (measured at 7 wrapped
	   lines on the narrow column) so the typewriter's growing/shrinking
	   text never reflows the layout below it. Centre the text vertically
	   inside that reserved box so shorter typed/erased states stay aligned
	   with the media clip instead of bunching toward the top. */
	min-height: 11em !important;
	display: flex !important;
	align-items: center !important;
}

/* ── Mission two-column layout ─────────────────────────────────────────── */
/* Section-level override: kill the extra edge gutter so the glass panel
   spans the full width of the mission section, no leftover blue strips. */
.snx-about-mission--roller {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.snx-mission-glass {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 3rem 3rem;
	border-radius: 0;
	box-sizing: border-box;
	/* Clear-ice formula: mostly neutral white/transparent, no colour tint,
	   so the indigo section behind shows through clean — like real glass. */
	background:
		radial-gradient(140% 180% at 6% 0%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.04) 20%, transparent 42%),
		linear-gradient(118deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.01) 24%, rgba(255,255,255,0.05) 46%, rgba(255,255,255,0.01) 64%, rgba(255,255,255,0.06) 100%),
		rgba(255,255,255,0.03);
	backdrop-filter: blur(10px) saturate(1.15) brightness(1.05);
	-webkit-backdrop-filter: blur(10px) saturate(1.15) brightness(1.05);
	border: 1px solid rgba(255,255,255,0.38);
	border-top: 1px solid rgba(255,255,255,0.9);
	border-bottom: 1px solid rgba(255,255,255,0.15);
	box-shadow:
		inset 0 2px 0 rgba(255,255,255,0.85),
		inset 0 1px 18px rgba(255,255,255,0.30),
		inset 0 -14px 36px rgba(0,0,0,0.22),
		inset 40px 0 70px -40px rgba(255,255,255,0.30),
		inset -40px 0 70px -40px rgba(255,255,255,0.10),
		0 25px 70px rgba(0,0,0,0.45),
		0 4px 0 rgba(255,255,255,0.18);
	overflow: hidden;
}

.snx-mission-glass::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(112deg, transparent 15%, rgba(255,255,255,0.35) 26%, rgba(255,255,255,0.06) 34%, transparent 42%),
		linear-gradient(112deg, transparent 62%, rgba(255,255,255,0.22) 71%, rgba(255,255,255,0.03) 78%, transparent 86%);
	mix-blend-mode: screen;
	pointer-events: none;
}

/* Bottom-edge thickness shadow — poured-glass base weight */
.snx-mission-glass::after {
	content: "";
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: -6px;
	height: 14px;
	border-radius: 50%;
	background: rgba(0,0,0,0.35);
	filter: blur(10px);
	pointer-events: none;
}

/* Sharp top-edge glint — the crisp catch-light along the rim of the glass,
   layered on top of .snx-mission-layout so it doesn't compete with ::after */
.snx-mission-glass .snx-mission-layout::before {
	content: "";
	position: absolute;
	top: -3rem;
	left: -3rem;
	right: -3rem;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.9) 20%, rgba(255,255,255,0.9) 80%, transparent 100%);
	box-shadow: 0 0 14px 1px rgba(255,255,255,0.65);
	pointer-events: none;
}

.snx-mission-layout {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 3rem;
	max-width: 1060px;
	margin: 0 auto;
	padding: 0 1.5rem;
	box-sizing: border-box;
}

/* LEFT — media holder, sized to the real video ratio (1280×704 = 20:11)
   so object-fit:cover never has to crop the sides to fill the box. */
.snx-mission-holder {
	flex: 0 0 520px;
	width: 520px;
	aspect-ratio: 20 / 11;
	height: auto;
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	background: rgba(255,255,255,0.04);
}

/* Hide the holder entirely when empty (no media set) */
.snx-mission-holder.snx-holder--empty {
	display: none;
}

/* When media IS set, show the layout properly */
.snx-mission-holder.snx-holder--active {
	display: block;
}

.snx-mission-vid,
.snx-mission-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
}

/* ── Window-blind transition overlay — horizontal slats that close over
   the current frame, swap the underlying media, then lift back open. ── */
.snx-mission-blinds {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	pointer-events: none;
	border-radius: 16px;
	overflow: hidden;
}

.snx-blind-slat {
	flex: 1 1 0;
	background: #150a30;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.38s cubic-bezier(0.65,0,0.35,1);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}

.snx-blind-slat.snx-blind-slat--closed {
	transform: scaleY(1);
}

.snx-blind-slat.snx-blind-slat--opening {
	transform-origin: bottom;
	transform: scaleY(0);
}

@media (prefers-reduced-motion: reduce) {
	.snx-blind-slat { transition: none !important; }
}

/* Empty state placeholder — subtle dashed outline, invisible to normal visitors */
.snx-mission-empty {
	position: absolute;
	inset: 0;
	border-radius: 16px;
}

/* RIGHT — roller column fills remaining space */
.snx-mission-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.snx-mission-content .snx-about-mission__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #F5C400;
	margin: 0 0 0.1rem;
}

.snx-mission-content .snx-about-mission__rule {
	height: 4px !important;
	width: 80px !important;
	background: #F5C400 !important;
	border: none !important;
	margin: 0.4rem 0 0 !important;
}

/* When holder is empty: roller stretches full width */
.snx-mission-holder.snx-holder--empty + .snx-mission-content,
.snx-mission-holder:not(.snx-holder--active) + .snx-mission-content {
	flex: 1 1 100%;
}

@media (max-width: 860px) {
	.snx-mission-glass {
		padding: 2rem 1.25rem;
		border-radius: 22px;
	}
	.snx-mission-layout {
		flex-direction: column;
		gap: 2rem;
		padding: 0;
	}
	.snx-mission-holder {
		flex: none;
		width: 100%;
		aspect-ratio: 20 / 11;   /* full video visible, no crop, at any width */
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.snx-mission-vid, .snx-mission-img { transition: none !important; }
	.snx-about-story .snx-about-section-heading {
		animation: none !important;
		text-shadow: 0 0 14px rgba(245,196,0,0.35) !important;
	}
}


.snx-about-mission__rule {
	height: 4px !important;
	width: 80px !important;
	border: none !important;
	margin: 0 !important;
}

/* ---- Stats strip — dark frosted-glass panel ----
   Unified with .snx-contact-cta / .snx-cta's smoked-glass formula
   (same gradient, same backdrop-filter strength) so it reads as the
   identical near-black glass regardless of what's rendered behind it
   — the previous, more transparent gradient let lighter content above
   (the hero image) bleed through the blur and look grey/washed out. */
.snx-about-stats {
	padding-top: 1.25rem !important;
	padding-bottom: 1.25rem !important;
	position: relative;
	background: linear-gradient(
		160deg,
		rgba(15,12,28,0.94) 0%,
		rgba(10,8,22,0.97) 100%
	) !important;
	backdrop-filter: blur(24px) saturate(1.3) brightness(0.75) !important;
	-webkit-backdrop-filter: blur(24px) saturate(1.3) brightness(0.75) !important;
	border-top: 1px solid rgba(255,255,255,0.22) !important;
	border-bottom: 1px solid rgba(255,255,255,0.06) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 32px rgba(0,0,0,0.45) !important;
}

.snx-about-stat-cell {
	text-align: center;
	padding: 0.75rem 1rem !important;
	border-right: 1px solid rgba(255,255,255,0.08);
}

.snx-about-stat-cell:last-child {
	border-right: none;
}

.snx-about-stat-cell__number.wp-block-heading {
	font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
	font-weight: 900 !important;
	margin: 0 0 0.2rem !important;
	line-height: 1 !important;
	letter-spacing: -0.02em !important;
}

.snx-about-stat-cell__label {
	font-size: 0.68rem !important;
	color: rgba(255,255,255,0.65) !important;
	margin: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ---- Values section — reduce vertical space only ---- */
.snx-about-values {
	padding-top: 2rem !important;
	padding-bottom: 2rem !important;
}

/* Tighten gap between heading and cards row */
.snx-about-values .snx-about-section-heading.wp-block-heading {
	margin-bottom: 0.75rem !important;
}
.snx-about-values .snx-about-values__row.wp-block-columns {
	margin-top: 0 !important;
}
/* Kill the block-gap above the cards row */
.snx-about-values > .wp-block-columns {
	margin-top: 0.5rem !important;
}

/* ---- Section headings (shared) ---- */
.snx-about-section-heading.wp-block-heading {
	font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: -0.01em !important;
	margin: 0.25rem 0 0 !important;
	color: #fff !important;
}

/* ---- Values cards ---- */
.snx-about-value-card.wp-block-column {
	background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
	border: 1px solid rgba(255,255,255,0.1);
	border-top: 2px solid var(--wp--preset--color--secondary);
	border-radius: 12px;
	padding: 2rem 1.75rem !important;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.snx-about-value-card.wp-block-column:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 36px rgba(0,0,0,0.4);
}

/* === Value card icons — SVG as CSS background-image === */
.snx-about-value-card__icon {
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 1.25rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.snx-about-value-card__icon--integrity {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.5'%3E%3Cpath d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3E%3C/svg%3E");
}
.snx-about-value-card__icon--innovation {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.5'%3E%3Cpath d='M13 10V3L4 14h7v7l9-11h-7z'/%3E%3C/svg%3E");
}
.snx-about-value-card__icon--client {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.5'%3E%3Cpath d='M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E");
}

/* === Contact info icons — SVG as CSS background-image, scoped for specificity === */
/* shared size + behaviour for contact icons */
.snx-ct2-info-cell .snx-contact-icon--location,
.snx-ct2-info-cell .snx-contact-icon--email,
.snx-ct2-info-cell .snx-contact-icon--phone,
.snx-ct2-info-cell .snx-contact-icon--hours {
	display: block;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-size: 60%;
	background-position: center;
	padding: 5px;
	background-color: rgba(59,64,207,0.25);
	border-radius: 50%;
	margin-bottom: 0.4rem;
}
.snx-ct2-info-cell .snx-contact-icon--location {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") !important;
}
.snx-ct2-info-cell .snx-contact-icon--email {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") !important;
}
.snx-ct2-info-cell .snx-contact-icon--phone {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.38 2 2 0 0 1 3.6 1.21h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.73a16 16 0 0 0 6.29 6.29l.95-.95a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21.92 16.92z'/%3E%3C/svg%3E") !important;
}
.snx-ct2-info-cell .snx-contact-icon--hours {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") !important;
}

.snx-about-value-card__title.wp-block-heading {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	margin: 0 0 0.75rem !important;
	color: #fff !important;
}

/* ---- Story section: compact ---- */
.snx-about-story {
	padding-top: 2.5rem !important;
	padding-bottom: 2.5rem !important;
}

.snx-about-story .snx-about-section-heading {
	margin-top: 0.25rem !important;
	margin-bottom: 0 !important;
	text-align: left !important;
	animation: snx-story-glow 3.2s ease-in-out infinite;
}

@keyframes snx-story-glow {
	0%, 100% {
		text-shadow: 0 0 6px rgba(255,255,255,0.15), 0 0 14px rgba(245,196,0,0.10);
		filter: brightness(1);
	}
	50% {
		text-shadow: 0 0 18px rgba(255,255,255,0.75), 0 0 42px rgba(245,196,0,0.55), 0 0 70px rgba(245,196,0,0.30);
		filter: brightness(1.15);
	}
}

/* Kill WP block-gap between heading and timeline, bring timeline up tight */
.snx-about-story .snx-about-timeline {
	margin-top: 0.75rem !important;
}

/* ---- Timeline ---- */
.snx-about-timeline {
	position: relative;
	padding-left: 2rem;
	max-width: 640px;
	margin: 1rem auto 0 !important;
	text-align: left;
}

/* Vertical line */
.snx-about-timeline::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: linear-gradient(to bottom,
		var(--wp--preset--color--secondary) 0%,
		var(--wp--preset--color--yellow) 100%);
	border-radius: 2px;
}

.snx-about-timeline__item {
	display: flex !important;
	gap: 1rem !important;
	margin-bottom: 1rem !important;
	position: relative;
}

.snx-about-timeline__item--last {
	margin-bottom: 0 !important;
}

/* Dot marker */
.snx-about-timeline__marker {
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	margin-top: 4px;
	margin-left: -29px;
	border-radius: 50% !important;
	background: var(--wp--preset--color--secondary) !important;
	border: 2px solid var(--wp--preset--color--primary) !important;
	box-shadow: 0 0 0 3px var(--wp--preset--color--secondary) !important;
	z-index: 1;
	flex-shrink: 0;
}

.snx-about-timeline__marker--active {
	background: var(--wp--preset--color--yellow) !important;
	box-shadow: 0 0 0 3px var(--wp--preset--color--yellow), 0 0 14px rgba(245,196,0,0.6) !important;
}

/* ================================================================
   YELLOW GLOW LABEL — shared style (eyebrows, years, card titles)
   Matches CONTACT US treatment: font-size 0.864rem, 0.18em tracking,
   3-layer yellow text-shadow. NO underline.
================================================================ */
.snx-about-eyebrow,
.snx-about-hero .snx-about-eyebrow,
.snx-about-values .snx-about-eyebrow,
.snx-about-mission .snx-about-mission__label,
.snx-about-timeline__year {
	font-size: 0.864rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	text-shadow:
		0 0 8px  rgba(245,196,0,0.9),
		0 0 20px rgba(245,196,0,0.5),
		0 0 40px rgba(245,196,0,0.25) !important;
}

/* ---- Scroll ball ---- */
#snx-tl-ball {
	position: absolute;
	left: 3px;
	top: 0;
	width: 20px;
	height: 20px;
	background: #E5192A;
	border-radius: 50%;
	border: 2px solid #1A0B3D;
	box-shadow:
		0 0 0 3px rgba(229,25,42,0.5),
		0 0 10px rgba(229,25,42,0.9),
		0 0 22px rgba(229,25,42,0.55),
		0 0 40px rgba(229,25,42,0.25);
	z-index: 10;
	pointer-events: none;
	will-change: transform;
	transition: transform 0.08s linear;
}

@media (prefers-reduced-motion: reduce) {
	#snx-tl-ball {
		display: none;
	}
}

.snx-about-timeline__content {
	flex: 1;
}

.snx-about-timeline__year {
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	margin: 0 0 0.3rem !important;
}

.snx-about-timeline__title.wp-block-heading {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: #fff !important;
	margin: 0 0 0.5rem !important;
}

.snx-about-timeline__desc {
	font-size: 0.88rem !important;
	line-height: 1.65 !important;
	margin: 0 !important;
}

/* ---- About responsive ---- */
@media (max-width: 768px) {
	.snx-about-stat-cell {
		border-right: none;
		border-bottom: 1px solid rgba(255,255,255,0.08);
	}
	.snx-about-stat-cell:last-child {
		border-bottom: none;
	}
	.snx-about-timeline {
		padding-left: 1.5rem;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.snx-svc-card.wp-block-column {
		transition: none;
	}
	.snx-svc-panel.wp-block-group {
		transition: none;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.snx-svc-hero.wp-block-group {
		padding: 2.5rem 1.25rem 2rem !important;
	}
	.snx-svc-grid-wrap.wp-block-group {
		padding: 0 1.25rem 3rem !important;
	}
	.snx-svc-row.wp-block-columns {
		flex-direction: column !important;
		gap: 1rem !important;
	}
	.snx-svc-card.wp-block-column {
		padding: 1.5rem 1.25rem !important;
	}
}

/* === Footer === */

/* Gradient background: deep navy top-left -> electric blue bottom-right */
.snx-footer {
	background: linear-gradient(
		135deg,
		#1A0B3D 0%,
		#2a1a8e 40%,
		#3B40CF 100%
	);
	margin-top: 0 !important;
}

/* Main content area — lifted up by one paragraph step (~24px) */
.snx-footer__main {
	background: transparent;
	padding-top: 56px !important;
}

/* ==========================================================
   FOOTER BRAND — viewport-filling two-line display logo
   Inspired by: full-bleed editorial display typography
   SMARTNET fills line 1, XPERTS fills line 2
   ========================================================== */

.snx-footer__brand {
	width: 100% !important;
	flex-basis: 100% !important;
	overflow: hidden;
}

/* Footer brand wordmark — heading contains styled spans */
.snx-footer__name.wp-block-heading {
	display: block;
	margin-bottom: 0.1em;
	padding: 0;
	line-height: 0.88;
	white-space: nowrap;
	font-size: 0; /* hide heading default text — spans carry their own sizes */
}

/* "Solutions Limited" — tight spaced small caps */
.snx-footer__sub {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: clamp(0.6rem, 0.9vw, 0.78rem) !important;
	font-weight: 600;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
	margin-top: 0.4em;
	padding-left: 0.1em;
	display: block;
}

/* ==========================================================
   FOOTER WORDMARK — personalised display treatment
   S[yellow] MARTNET[glitch-stripe] X[yellow] PERTS[white]
   ========================================================== */

.snx-wordmark-wrap {
	display: block;
	width: 100%;
	margin-bottom: 0.12em;
	line-height: 0.88;
	white-space: nowrap;
}

/* All spans share font base — sized to fill the 55% left column */
.snx-wm {
	display: inline;
	font-family: var(--wp--preset--font-family--rubik), 'Arial Black', sans-serif;
	font-size: clamp(2rem, 5.6vw, 5.6vw);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	line-height: 0.88;
}

/* S — deep purple #1A0B3D, backlit with indigo-white halo for max visibility */
.snx-wm--s {
	color: #1A0B3D;
	text-shadow:
		/* 8-point 1px near-white stroke — defines letter edge */
		0   -1px 0 rgba(200,210,255,0.95),
		0    1px 0 rgba(200,210,255,0.95),
		-1px 0   0 rgba(200,210,255,0.95),
		1px  0   0 rgba(200,210,255,0.95),
		-1px -1px 0 rgba(200,210,255,0.85),
		1px  -1px 0 rgba(200,210,255,0.85),
		-1px  1px 0 rgba(200,210,255,0.85),
		1px   1px 0 rgba(200,210,255,0.85),
		/* Inner tight glow — indigo-tinted white core */
		0 0 6px  rgba(180,195,255,1),
		/* Mid bloom — visible halo */
		0 0 14px rgba(160,180,255,0.75),
		/* Wide diffuse bloom — lifts letter off dark bg */
		0 0 28px rgba(140,165,255,0.45);
}

/* MARTNE — deep purple #1A0B3D, same backlit indigo-white halo */
.snx-wm--glitch {
	color: #1A0B3D;
	text-shadow:
		0   -1px 0 rgba(200,210,255,0.95),
		0    1px 0 rgba(200,210,255,0.95),
		-1px 0   0 rgba(200,210,255,0.95),
		1px  0   0 rgba(200,210,255,0.95),
		-1px -1px 0 rgba(200,210,255,0.85),
		1px  -1px 0 rgba(200,210,255,0.85),
		-1px  1px 0 rgba(200,210,255,0.85),
		1px   1px 0 rgba(200,210,255,0.85),
		0 0 6px  rgba(180,195,255,1),
		0 0 14px rgba(160,180,255,0.75),
		0 0 28px rgba(140,165,255,0.45);
}

/* X — yellow with warm glow */
.snx-wm--x {
	color: #F5C400;
	text-shadow:
		3px  2px 0 #1A0B3D,
		-1px -1px 0 rgba(180,140,0,0.6),
		0px  0px 20px rgba(245,196,0,0.45);
}

/* PERTS — clean white */
.snx-wm--clean {
	color: #ffffff;
	text-shadow: 0 0 24px rgba(255,255,255,0.1);
}

/* T — #E5192A standalone beacon: hotspot + tight glow + wide crimson + deep shadow */
/* Equal ~2.9px gap each side, slightly larger to own its space */
.snx-wm--red-t {
	margin-left:  0.05em;
	margin-right: 0.05em;
	color: #E5192A;
	text-shadow:
		/* Warm-white hotspot core at 0px — letter centre is molten */
		0    0    0px  rgba(255,240,235,1.00),
		0    0    3px  rgba(255,210,200,0.95),
		/* Intensified tight red glow — inner ring fully saturated */
		0    0    6px  rgba(255,50,50,1.00),
		0    0    10px rgba(229,25,42,1.00),
		0    0    15px rgba(229,25,42,0.95),
		/* Wider crimson atmosphere — halo clearly visible on dark bg */
		0    0    26px rgba(210,10,30,0.80),
		0    0    42px rgba(180,0,20,0.55),
		0    0    60px rgba(150,0,15,0.30);
}

/* XPERTS — near-black #2A2A2A, strong white backlight stamps letters with light */
.snx-wm--dark {
	color: #2A2A2A;
	text-shadow:
		/* 8-point 1px bright white stroke — crisp letter edge */
		0   -1px 0 rgba(255,255,255,0.95),
		0    1px 0 rgba(255,255,255,0.95),
		-1px 0   0 rgba(255,255,255,0.95),
		1px  0   0 rgba(255,255,255,0.95),
		-1px -1px 0 rgba(255,255,255,0.85),
		1px  -1px 0 rgba(255,255,255,0.85),
		-1px  1px 0 rgba(255,255,255,0.85),
		1px   1px 0 rgba(255,255,255,0.85),
		/* Tight white glow — backlit core */
		0 0 6px  rgba(255,255,255,0.9),
		/* Mid bloom — lifts dark fill off dark bg */
		0 0 16px rgba(255,255,255,0.55),
		/* Wide diffuse white atmosphere */
		0 0 30px rgba(255,255,255,0.25);
}

/* Right column tagline — matches .snx-about-hero__lead exactly */
.snx-footer__tagline {
	font-family: 'Inter', sans-serif !important;
	font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.667), 1.2rem) !important;
	line-height: 1.75 !important;
	color: rgba(255, 255, 255, 0.7) !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	max-width: 100%;
	margin-left: 0;
}

/* Bottom bar */
.snx-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	background: transparent;
}

.snx-footer__copy {
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}

.snx-footer__links {
	gap: 2rem;
}

.snx-footer__links a,
.snx-footer__links p {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: color 0.2s ease;
	margin: 0;
}

.snx-footer__links a:hover {
	color: #ffffff !important;
	text-decoration: none !important;
}

/* Ensure footer template part has no gap from above */
body.home footer.wp-block-template-part,
footer.wp-block-template-part {
	margin-top: 0 !important;
}

/* Footer two-column brand row */
.snx-footer__brand-row.wp-block-columns {
	align-items: flex-start !important;
	gap: 4rem !important;   /* breathing room either side of the divider */
	position: relative;
}

/* Divider: vertical line between wordmark and tagline */
.snx-footer__brand-row.wp-block-columns::before {
	content: "";
	position: absolute;
	left: 59.4%;
	transform: translateX(-50%);
	top: 0;
	height: 100%;
	width: 1px;
	background: rgba(255,255,255,0.25);
	pointer-events: none;
}

/* Tablet + mobile: hide vertical divider, show horizontal rule between stacked columns.
   WP columns stack at 782px — cover the full stacked range. */
@media (max-width: 782px) {
	.snx-footer__brand-row.wp-block-columns::before {
		display: none;
	}
	.snx-footer__left {
		padding-right: 0 !important;
		padding-bottom: 1.5rem;
		border-bottom: 1px solid rgba(255,255,255,0.2);
		margin-bottom: 1.5rem;
	}
	.snx-footer__right {
		padding-left: 0 !important;
	}
}

.snx-footer__left {
	min-width: 0;
	padding-right: 3rem;  /* push PERTS away from divider */
}

.snx-footer__right {
	display: flex !important;
	align-items: flex-start !important;
	min-width: 0;
	padding-left: 3rem;   /* push tagline away from divider */
}

/* Mobile footer */
@media (max-width: 600px) {
	.snx-footer__top.wp-block-columns {
		flex-direction: column;
	}

	.snx-footer__brand,
	.snx-footer__desc {
		width: 100% !important;
		flex-basis: 100% !important;
	}

	.snx-footer__tagline {
		margin-left: 0;
		margin-top: 1.5rem;
	}

	.snx-footer__bar-inner.wp-block-group {
		flex-direction: column;
		gap: 1rem;
	}

	.snx-footer__links {
		gap: 1.25rem;
		flex-wrap: wrap;
	}
}

/* === Mobile nav === */
/* Hamburger icon — white on navy header */
header.wp-block-template-part .wp-block-navigation__responsive-container-open,
header.wp-block-template-part .wp-block-navigation__responsive-container-close {
	color: #ffffff;
	border: none;
	background: transparent;
	padding: 0.25rem;
}

header.wp-block-template-part .wp-block-navigation__responsive-container-open svg,
header.wp-block-template-part .wp-block-navigation__responsive-container-close svg {
	fill: #ffffff;
}

/* Mobile overlay — navy background, white links */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--primary) !important;
	color: #ffffff;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #ffffff;
	font-size: 1.1rem;
	letter-spacing: 0.05em;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--secondary) !important;
}

@media (prefers-reduced-motion: reduce) {
	.snx-btn-primary .wp-element-button,
	.snx-btn-outline .wp-element-button,
	.snx-service-card,
	.snx-cta__btn .wp-element-button {
		transition: none;
		transform: none;
	}
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 0.0625em !important;
	text-underline-offset: 0.15em;
}

/* ==========================================================
   LEADERSHIP PAGE — page-id-37
   Colour inversion: off-white as major bg, dark text on light.
   Scoped entirely to .page-id-37 — footer & CTA untouched.
   Off-white palette:
     --snx-ldr-bg-hero : #F5F4F0  (warm off-white)
     --snx-ldr-bg-grid : #ECEAE4  (slightly deeper)
     --snx-ldr-bg-net  : #E4E2DB  (network section)
     --snx-ldr-text    : #1A0B3D  (deep purple on light)
     --snx-ldr-text-sub: rgba(26,11,61,0.62)
   ========================================================== */

/* ── Hero section ──────────────────────────────────────── */
.page-id-37 .snx-team-hero {
	background-color: #F5F4F0 !important;
	background-image: none !important;
	/* Match Solutions hero height (~300px) — override inline 6rem/5rem */
	padding-top:    3.25rem !important;
	padding-bottom: 3.25rem !important;
}

/* Eyebrow: keep yellow accent */
.page-id-37 .snx-team-hero .snx-about-eyebrow {
	color: #c49400 !important;       /* slightly deeper yellow for legibility on light */
	text-shadow:
		0 0 12px rgba(196,148,0,0.35),
		0 0 28px rgba(196,148,0,0.18) !important;
}

/* Hero heading */
.page-id-37 .snx-team-hero__heading {
	color: #1A0B3D !important;
}

/* Hero lead paragraph */
.page-id-37 .snx-team-hero p:not(.snx-about-eyebrow) {
	color: rgba(26,11,61,0.72) !important;
}

/* ── Team grid section ────────────────────────────────── */
.page-id-37 .snx-team-grid-wrap {
	background-color: #ECEAE4 !important;
	background-image: none !important;
}

/* Cards: invert glass to clean white-card on light bg */
.page-id-37 .snx-team-card {
	background-color: #ffffff !important;
	background-image: none !important;
	border-color: rgba(26,11,61,0.10) !important;
	box-shadow: 0 2px 16px rgba(26,11,61,0.08) !important;
}

.page-id-37 .snx-team-card:hover {
	box-shadow: 0 8px 32px rgba(26,11,61,0.14) !important;
	transform: translateY(-4px);
}

/* Card name */
.page-id-37 .snx-team-card__name {
	color: #1A0B3D !important;
}

/* Card role: keep yellow but deepen for light bg legibility */
.page-id-37 .snx-team-card__role {
	color: #a07800 !important;
}

/* Card bio */
.page-id-37 .snx-team-card__bio {
	color: rgba(26,11,61,0.62) !important;
}

/* ── Client network / constellation section ──────────────── */
.page-id-37 .snx-clients-wrap {
	background-color: #E4E2DB !important;
	background-image: none !important;
}

.page-id-37 .snx-clients-header {
	background-color: #E4E2DB !important;
	background-image: none !important;
}

/* Eyebrow inside clients section */
.page-id-37 .snx-clients-wrap .snx-about-eyebrow {
	color: #c49400 !important;
	text-shadow:
		0 0 12px rgba(196,148,0,0.35),
		0 0 28px rgba(196,148,0,0.18) !important;
}

/* Headings and body text */
.page-id-37 .snx-clients-wrap h2,
.page-id-37 .snx-clients-wrap h3 {
	color: #1A0B3D !important;
}

.page-id-37 .snx-clients-wrap p:not(.snx-about-eyebrow) {
	color: rgba(26,11,61,0.68) !important;
}

/* Constellation nodes: white circles, dark label text */
.page-id-37 .snx-node {
	background: #ffffff !important;
	border-color: rgba(26,11,61,0.14) !important;
	box-shadow: 0 2px 14px rgba(26,11,61,0.10) !important;
	color: #1A0B3D !important;
}

.page-id-37 .snx-node span,
.page-id-37 .snx-node div {
	color: #1A0B3D !important;
}

/* SVG connector lines */
.page-id-37 .snx-clients-wrap svg line,
.page-id-37 .snx-clients-wrap svg path,
.page-id-37 .snx-clients-wrap svg circle {
	stroke: rgba(26,11,61,0.18) !important;
}

/* Floating dot accents */
.page-id-37 .snx-clients-wrap [class*="snx-dot"],
.page-id-37 .snx-clients-wrap [class*="dot-"] {
	background: #3B40CF !important;
}

/* ── Page-level body bg ─────────────────────────────────── */
/* Prevents any gap colour showing between sections */
.page-id-37 .entry-content,
.page-id-37 main {
	background-color: #ECEAE4;
}

/* ── Clients header — Solutions col-1 glass + dot-grid effect ───
   Keeps the off-white colour inversion intact.
   Glass gradient sits as a ::before so it doesn't affect text.
   Dot-grid ::after is a second pseudo-element layer.
   position:relative + isolation:isolate ensure stacking is clean.
─────────────────────────────────────────────────── */
.page-id-37 .snx-clients-header {
	position: relative !important;
	isolation: isolate;
	overflow: hidden;
	/* Keep the off-white bg from the colour-inversion rule above */
	/* Add backdrop blur for depth */
	backdrop-filter: blur(12px) saturate(1.3) !important;
	-webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
	/* Inset highlights — same as Solutions col-1 */
	box-shadow:
		inset 1px 0 0 rgba(255,255,255,0.55),
		inset 0 1px 0 rgba(255,255,255,0.45),
		0 4px 28px rgba(26,11,61,0.10) !important;
}

/* Glass gradient overlay — light-on-light version matching off-white theme */
.page-id-37 .snx-clients-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		135deg,
		rgba(255, 253, 248, 0.82) 0%,
		rgba(240, 237, 228, 0.72) 60%,
		rgba(228, 226, 219, 0.58) 100%
	);
}

/* Dot-grid texture — same spec as Solutions col-1 but dark dots on light */
.page-id-37 .snx-clients-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(
		circle,
		rgba(26, 11, 61, 0.10) 1px,
		transparent 1px
	);
	background-size: 28px 28px;
}

/* Ensure all text content sits above pseudo-elements */
.page-id-37 .snx-clients-header > * {
	position: relative;
	z-index: 1;
}

/* Text colours — keep existing inversion */
.page-id-37 .snx-clients-header h2 {
	color: #1A0B3D !important;
}
.page-id-37 .snx-clients-header p {
	color: rgba(26,11,61,0.68) !important;
}

/* ── Scoping guard: CTA + footer left exactly as-is ─────────
   .snx-contact-cta and .snx-footer have their own bg rules
   and are NOT inside .snx-team-hero / .snx-team-grid-wrap,
   so they inherit nothing from the rules above. No overrides needed. */

/* ── Edge alignment — Leadership page only ───────────────────────
   All sections had padding-left/right: 0 so content ran to the
   viewport edge. Apply a consistent horizontal inset to every
   section EXCEPT the CTA bar (which has its own padding) and
   the footer (completely untouched).
   clamp() scales from 1.5rem on mobile to 4rem on wide desktop.
─────────────────────────────────────────────────────── */
.page-id-37 .snx-team-hero,
.page-id-37 .snx-team-grid-wrap,
.page-id-37 .snx-clients-header {
	padding-left:  clamp(1.5rem, 5vw, 4rem) !important;
	padding-right: clamp(1.5rem, 5vw, 4rem) !important;
}

/* Team rows and their cards also need horizontal breathing room */
.page-id-37 .snx-team-row {
	padding-left:  clamp(1.5rem, 5vw, 4rem) !important;
	padding-right: clamp(1.5rem, 5vw, 4rem) !important;
}

/* Constellation canvas is self-contained — no extra padding needed */

/* Mobile: slightly tighter inset */
@media (max-width: 600px) {
	.page-id-37 .snx-team-hero,
	.page-id-37 .snx-team-grid-wrap,
	.page-id-37 .snx-clients-header,
	.page-id-37 .snx-team-row {
		padding-left:  1.25rem !important;
		padding-right: 1.25rem !important;
	}
}

/* ==========================================================
   SITEWIDE — CAFEONE REFERENCE: EDGE + FONT
   Fonts: Space Grotesk (headings) + Inter (body)
   Edge:  80px horizontal padding on all sections
   ========================================================== */

/* --- Heading font: Space Grotesk --- */
.snx-hero__headline,
.snx-service-card h3,
.snx-cta h2,
.snx-solutions-hero h1,
.snx-solutions-hero h2,
.snx-solutions__cards h3,
.snx-about-hero h1,
.snx-about-hero h2,
.snx-about h2,
.snx-about h3,
.snx-team-hero h1,
.snx-team-hero h2,
.snx-team h2,
.snx-team h3,
.snx-contact-hero h1,
.snx-contact-hero h2,
.snx-contact h2,
.snx-contact h3,
.snx-page-hero h1,
.snx-page-hero h2 {
	font-family: 'Space Grotesk', sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
}

/* --- Body font: Inter --- */
.snx-hero__sub,
.snx-service-card p,
.snx-cta p,
.snx-services p,
.snx-solutions-hero p,
.snx-solutions__cards p,
.snx-about p,
.snx-team p,
.snx-contact p,
.snx-page-hero p,
body .wp-block-paragraph,
body .wp-block-list {
	font-family: 'Inter', sans-serif !important;
	font-weight: 400 !important;
}

/* --- Font sizes --- */
.snx-hero__headline {
	font-size: clamp(2.2rem, 4.5vw, 3.6rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.03em !important;
}

.snx-hero__sub {
	font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
	line-height: 1.7 !important;
}

.snx-solutions-hero h2,
.snx-about h2,
.snx-team h2,
.snx-contact h2 {
	font-size: clamp(1.4rem, 2.4vw, 2rem) !important;
	line-height: 1.1 !important;
}

/* "What We Do" heading: match the "Ready to work with us?" CTA's
   typography (Rubik, uppercase, left default weight) but sized up
   since it's a section title, not a compact CTA bar heading. */
.snx-services__title {
	font-family: 'Rubik', sans-serif !important;
	font-weight: 700 !important;
	font-size: 1.7rem !important;
	line-height: 1.25 !important;
	text-transform: uppercase !important;
	letter-spacing: normal !important;
}

.snx-service-card h3,
.snx-solutions__cards h3,
.snx-team h3 {
	font-size: 1rem !important;
	line-height: 1.25 !important;
}

.snx-service-card p,
.snx-solutions__cards p {
	font-size: 0.9rem !important;
	line-height: 1.65 !important;
}

.snx-cta h2 {
	font-size: clamp(1.4rem, 2.4vw, 2rem) !important;
	line-height: 1.1 !important;
}

.snx-cta p {
	font-size: 1rem !important;
	line-height: 1.65 !important;
}

/* --- Edge padding: 80px each side (cafeone value) --- */
.snx-hero .wp-block-group.alignwide {
	padding-left:  80px !important;
	padding-right: 80px !important;
}
/* Homepage hero: add 68px top offset to align H1 with other pages
   (other pages get 68px from .wp-site-blocks padding-top; home gets 0) */
body.home .snx-hero .wp-block-group.alignwide {
	padding-top: calc(var(--wp--preset--spacing--80) + 68px) !important;
}

.snx-services,
.snx-cta,
.snx-solutions-hero,
.snx-solutions__cards-wrap,
.snx-about-hero,
.snx-about,
.snx-team-hero,
.snx-team,
.snx-contact-hero,
.snx-contact,
.snx-page-hero {
	padding-left:  80px !important;
	padding-right: 80px !important;
}

/* --- Nav pill: centred horizontally --- */
.snx-header-pill {
	margin-left:  auto !important;
	margin-right: auto !important;
}

/* --- Footer inner bar: match edge --- */
.snx-footer__inner,
.snx-footer__bar-inner {
	padding-left:  80px !important;
	padding-right: 80px !important;
}

/* ==========================================================
   COMPANY NEWS — tiled grid with dividers (Insights page)
   ========================================================== */
.snx-news-section {
	padding: 5rem var(--wp--preset--spacing--50, 2rem) 6rem;
}
.snx-news-section__eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #3B40CF;
	margin: 0 0 0.5rem;
}
.snx-news-section__title {
	color: #1A0B3D;
	margin: 0 0 2.5rem;
}

.snx-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 1200px;
	margin: 0 auto;
}

/* Tile + divider: every tile gets a right border and a bottom border,
   last column drops the right border, last row drops the bottom border. */
.snx-news-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.75rem 2rem;
	border-right: 1px solid rgba(26,11,61,0.12);
	border-bottom: 1px solid rgba(26,11,61,0.12);
	text-decoration: none;
	color: inherit;
	transition: background 0.2s ease;
}
.snx-news-tile:hover {
	background: rgba(59,64,207,0.05);
}
.snx-news-grid > .snx-news-tile:nth-child(3n) {
	border-right: none;
}

.snx-news-tile__thumb {
	width: 100%;
	aspect-ratio: 16/10;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 1.1rem;
	background: linear-gradient(135deg, #3B40CF 0%, #1A0B3D 100%);
}
.snx-news-tile__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.snx-news-tile__type {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #ffffff;
	background: #E5192A;
	border-radius: 100px;
	padding: 0.25rem 0.7rem;
	margin-bottom: 0.7rem;
	width: fit-content;
}
.snx-news-tile__type--project-update {
	background: #3B40CF;
}
.snx-news-tile__title {
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	color: #1A0B3D !important;
	margin: 0 0 0.5rem !important;
	line-height: 1.3 !important;
}
.snx-news-tile__excerpt {
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(26,11,61,0.7);
	margin: 0 0 1rem;
	flex: 1;
}
.snx-news-tile__meta {
	font-size: 0.75rem;
	color: rgba(26,11,61,0.5);
	display: flex;
	gap: 0.6rem;
	align-items: center;
}

@media (max-width: 900px) {
	.snx-news-grid { grid-template-columns: repeat(2, 1fr); }
	.snx-news-grid > .snx-news-tile:nth-child(3n) { border-right: 1px solid rgba(26,11,61,0.12); }
	.snx-news-grid > .snx-news-tile:nth-child(2n) { border-right: none; }
}
@media (max-width: 600px) {
	.snx-news-grid { grid-template-columns: 1fr; }
	.snx-news-grid > .snx-news-tile { border-right: none !important; }
}

/* ---- Reactions bar (single post + tiles) ---- */
.snx-news-reactions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(26,11,61,0.12);
}
.snx-news-reactions__buttons {
	display: flex;
	gap: 0.5rem;
}
.snx-news-reaction {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(59,64,207,0.07);
	border: 1px solid rgba(26,11,61,0.12);
	border-radius: 100px;
	padding: 0.4rem 0.8rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #1A0B3D;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
}
.snx-news-reaction:hover {
	transform: translateY(-2px);
	background: rgba(59,64,207,0.14);
}
.snx-news-reaction.is-selected {
	background: #3B40CF;
	color: #ffffff;
	border-color: #3B40CF;
}
.snx-news-reactions--done .snx-news-reaction:not(.is-selected) {
	opacity: 0.55;
	cursor: default;
	pointer-events: none;
}
.snx-news-reactions--done .snx-news-reaction.is-selected {
	pointer-events: none;
}
.snx-news-reaction__emoji {
	font-size: 1rem;
	line-height: 1;
}
.snx-news-views {
	font-size: 0.8rem;
	color: rgba(26,11,61,0.55);
	font-weight: 600;
}

/* Reactions bar sits on dark backgrounds when shown inside single post
   cover-less template (page-no-cover uses default light content area,
   so no override needed there currently). */

@media (prefers-reduced-motion: reduce) {
	.snx-news-reaction {
		transition: none !important;
	}
}

/* ==========================================================
   LEGAL PAGES (Privacy Policy) — reuses .snx-about-hero /
   .snx-about-eyebrow / .snx-contact-cta patterns from the
   About/Overview page so legal content matches the rest of the site.
   ========================================================== */
.snx-legal-hero .snx-about-hero__heading {
	margin-bottom: 1.25rem;
}
.snx-legal-hero__lead {
	max-width: 760px;
	color: rgba(255,255,255,0.82) !important;
	margin: 0 !important;
}
.snx-legal-updated {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: 1.5rem;
	opacity: 0.9;
}

/* Table of contents card — a distinct white panel that stands out
   against the page's off-white (#F5F4F0) background, the same way
   the Leadership hero's content pops against its own surroundings.
   Label + heading typography are copied from the Leadership hero
   ("THE PEOPLE BEHIND THE WORK" eyebrow + "Meet Our Team" heading)
   so this page reads consistently with that one; list content is
   left-aligned like normal body copy rather than centered. */
.snx-legal-toc {
	background: transparent;
	border-bottom: none;
}
.snx-legal-toc__card {
	max-width: 900px;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid rgba(26,11,61,0.08);
	border-radius: 16px;
	padding: 2.25rem 2.5rem;
	box-shadow: 0 12px 32px rgba(26,11,61,0.08);
}
.snx-legal-toc__label {
	/* Matches .snx-about-eyebrow as styled on the Leadership page */
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #c49400;
	margin: 0 0 1.25rem;
	text-align: left;
}
.snx-legal-toc__row.wp-block-columns {
	gap: 2rem;
}
.snx-legal-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	text-align: left;
}
.snx-legal-toc__list a {
	color: #1A0B3D;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.snx-legal-toc__list a:hover {
	color: #3B40CF;
	border-color: #3B40CF;
}

/* Body sections */
.snx-legal-body {
	max-width: 860px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--50, 2rem);
	padding-right: var(--wp--preset--spacing--50, 2rem);
}
.snx-legal-section {
	padding: 2.25rem 0;
	border-bottom: 1px solid rgba(26,11,61,0.08);
}
.snx-legal-section--last {
	border-bottom: none;
}
.snx-legal-section__title.wp-block-heading {
	color: #1A0B3D;
	font-size: 1.4rem;
	font-weight: 800;
	margin: 0 0 0.9rem;
	scroll-margin-top: 100px;
}
.snx-legal-section__text {
	color: rgba(26,11,61,0.75);
	font-size: 0.98rem;
	line-height: 1.8;
	margin: 0;
}
.snx-legal-section__contact {
	color: rgba(26,11,61,0.85);
	font-size: 0.98rem;
	line-height: 1.8;
	margin: 1rem 0 0;
	padding: 1.25rem 1.5rem;
	background: #F7F7FB;
	border-left: 3px solid #F5C400;
	border-radius: 4px;
}
.snx-legal-section__contact a {
	color: #3B40CF;
	font-weight: 600;
	text-decoration: none;
}
.snx-legal-section__contact a:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	.snx-legal-toc__card {
		padding: 1.75rem 1.5rem;
	}
	.snx-legal-toc__row.wp-block-columns {
		flex-direction: column;
	}
	.snx-legal-section {
		padding: 1.75rem 0;
	}
}