/*
Theme Name: Secure Solutions
Theme URI: https://www.securesolutions.co.in
Author: Secure Solutions
Description: Light "secure enterprise" theme for Secure Solutions, built to pair with Elementor Flexbox Containers. Carries the header, footer and design tokens; all page content is edited in Elementor.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: securesolutions
Tags: light, one-column, custom-logo, custom-menu, full-width-template
*/

/* ==========================================================================
   Design tokens.

   Light palette, defined in roles rather than shades. The same roles exist as
   PHP constants in tools/elementor-build/ss-lib.php, which writes colours
   directly into widget settings — keep the two in step or a heading colour in
   the database will drift away from the CSS around it.

   Every accent is a 600-weight tone. The 400-weight tones this theme used
   while it was dark sit below 4.5:1 on white and look washed out.
   ========================================================================== */
:root {
	/* Surfaces */
	--ss-page: #ffffff;        /* page background */
	--ss-surface: #ffffff;     /* cards */
	--ss-band: #f2f7fb;        /* the tint that separates one section from the next */
	--ss-band-soft: #f7fbfe;   /* hero wash */
	--ss-line: #e2e8f0;        /* hairline borders */
	--ss-line-strong: #cbd9e6;

	/* Type */
	--ss-ink: #0b2239;         /* headings — deep navy, never pure black */
	--ss-ink-deep: #071726;    /* the dark surfaces: footer, console section */
	--ss-ink-card: #10293f;    /* a card sitting on a dark surface */
	--ss-body: #4b6178;        /* body copy */
	--ss-body-strong: #33495e; /* leads and intros */
	--ss-muted: #5a708a;       /* captions — dark enough for 12px on the band */

	/* Accents */
	--ss-teal: #0d9488;
	--ss-teal-dark: #0f766e;
	--ss-teal-soft: #e6f7f4;
	--ss-teal-300: #5eead4;    /* only legible on the dark surfaces */
	--ss-blue: #2563eb;
	--ss-blue-soft: #e8f0fe;
	--ss-purple: #7c3aed;
	--ss-purple-soft: #f1ecfe;
	--ss-emerald: #059669;
	--ss-emerald-soft: #e6f7ef;
	--ss-green: #15803d;       /* the ISO 9001 credential green */
	--ss-green-soft: #e8f8ee;
	--ss-green-line: #a7e8bf;

	/* Elevation — light themes separate surfaces with shadow, not with glow */
	--ss-shadow-sm: 0 1px 2px rgba(11, 34, 57, .05);
	--ss-shadow: 0 6px 18px rgba(11, 34, 57, .07);
	--ss-shadow-lg: 0 18px 40px rgba(11, 34, 57, .12);

	--ss-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ss-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Header is taller than it was, to carry the larger logo the client asked
	   for. `.ss-main` clears it from this variable, so both move together. */
	--ss-header-h: 76px;
	--ss-shell: 80rem;   /* max-w-7xl */
	--ss-gutter: 1.5rem; /* px-6 */
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--ss-page);
	color: var(--ss-body);
	font-family: var(--ss-font-body);
	font-weight: 400;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--ss-teal);
	color: #fff;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ss-font-display);
	color: var(--ss-ink);
	margin: 0;
	line-height: 1.15;
}

p {
	margin: 0 0 1rem;
}

a {
	color: var(--ss-teal-dark);
	text-decoration: none;
	transition: color .3s ease;
}

a:hover {
	color: var(--ss-teal);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Ambient corner tints. Far fainter than the dark theme's blurred blobs — on
   white anything stronger reads as a printing fault rather than atmosphere. */
body::before,
body::after {
	content: "";
	position: fixed;
	width: 50vw;
	height: 50vw;
	border-radius: 9999px;
	filter: blur(120px);
	pointer-events: none;
	z-index: 0;
}

body::before {
	top: -10%;
	left: -10%;
	background: rgba(37, 99, 235, .05);
}

body::after {
	bottom: -10%;
	right: -10%;
	background: rgba(13, 148, 136, .05);
}

.ss-site {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Header
   ========================================================================== */
.ss-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 500;
	background: rgba(255, 255, 255, .88);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--ss-line);
}

/* A shadow only once the page has moved, so the bar sits flush with the hero
   at the top and lifts off it as soon as content slides underneath. */
.ss-header.is-stuck {
	box-shadow: var(--ss-shadow);
}

.ss-header__shell {
	max-width: var(--ss-shell);
	margin: 0 auto;
	padding: 0 var(--ss-gutter);
}

.ss-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--ss-header-h);
	gap: 1rem;
}

.ss-brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.ss-brand img {
	height: 52px;
	width: auto;
	object-fit: contain;
}

.ss-brand__text {
	font-family: var(--ss-font-display);
	font-weight: 800;
	font-size: 1.375rem;
	color: var(--ss-ink);
	letter-spacing: -.01em;
}

/* Primary navigation */
.ss-nav ul {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ss-nav li {
	position: relative;
}

.ss-nav a {
	font-family: var(--ss-font-display);
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
	color: var(--ss-ink);
	white-space: nowrap;
}

.ss-nav a:hover,
.ss-nav .current-menu-item > a,
.ss-nav .current-menu-ancestor > a,
.ss-nav .current_page_item > a {
	color: var(--ss-teal-dark);
}

/* Dropdowns */
.ss-nav ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
	min-width: 240px;
	padding: .5rem 0;
	margin-top: .75rem;
	background: #fff;
	border: 1px solid var(--ss-line);
	border-radius: .75rem;
	box-shadow: var(--ss-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.ss-nav li:hover > ul,
.ss-nav li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ss-nav ul ul li {
	width: 100%;
}

.ss-nav ul ul a {
	display: block;
	padding: .625rem 1.25rem;
	text-transform: none;
	letter-spacing: .01em;
	font-size: .875rem;
	font-weight: 500;
	color: var(--ss-body);
}

.ss-nav ul ul a:hover {
	color: var(--ss-teal-dark);
	background: var(--ss-teal-soft);
}

.ss-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* 24/7 support pill */
.ss-support {
	display: none;
	align-items: center;
	gap: .5rem;
	font-family: var(--ss-font-display);
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--ss-teal-dark);
	background: var(--ss-teal-soft);
	border: 1px solid rgba(13, 148, 136, .28);
	padding: .625rem 1.25rem;
	border-radius: 9999px;
	transition: background-color .3s ease, border-color .3s ease;
	white-space: nowrap;
}

.ss-support:hover {
	background: #d5f1ec;
	border-color: var(--ss-teal);
	color: var(--ss-teal-dark);
}

.ss-support__dot {
	position: relative;
	display: flex;
	height: 6px;
	width: 6px;
	flex-shrink: 0;
}

.ss-support__dot span:first-child {
	position: absolute;
	display: inline-flex;
	height: 100%;
	width: 100%;
	border-radius: 9999px;
	background: var(--ss-emerald);
	opacity: .75;
	animation: ss-ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}

.ss-support__dot span:last-child {
	position: relative;
	display: inline-flex;
	height: 6px;
	width: 6px;
	border-radius: 9999px;
	background: var(--ss-emerald);
}

@keyframes ss-ping {
	75%, 100% { transform: scale(2); opacity: 0; }
}

/* Mobile toggle */
.ss-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px square: a comfortable touch target, not just the glyph. */
	width: 44px;
	height: 44px;
	padding: 0;
	margin-right: -.5rem;
	background: none;
	border: 0;
	color: var(--ss-ink);
	cursor: pointer;
	transition: color .3s ease;
}

.ss-burger svg { display: block; }

.ss-burger:hover {
	color: var(--ss-teal-dark);
}

/* --------------------------------------------------------------------------
   Mobile menu: an off-canvas sidebar that slides in from the right, over a
   dimmed backdrop. Kept in the DOM and moved with transform (rather than
   toggling display) so it can animate, and so `inert` can manage focus.
   -------------------------------------------------------------------------- */
.ss-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: rgba(11, 34, 57, .45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity .3s ease;
}

.ss-drawer-backdrop.is-open { opacity: 1; }

.ss-mobile {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	width: min(86vw, 340px);
	height: 100%;
	height: 100dvh; /* avoids the mobile URL-bar gap where supported */
	padding: 1.125rem 1.5rem 2rem;
	background: #fff;
	border-left: 1px solid var(--ss-line);
	box-shadow: -24px 0 60px rgba(11, 34, 57, .18);
	transform: translateX(100%);
	transition: transform .35s cubic-bezier(.16, 1, .3, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ss-mobile.is-open { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
	.ss-mobile,
	.ss-drawer-backdrop { transition: none; }
}

/* Stop the page behind the drawer from scrolling while it is open. */
body.ss-drawer-open { overflow: hidden; }

.ss-mobile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: .5rem;
	border-bottom: 1px solid var(--ss-line);
}

.ss-mobile__brand img {
	height: 44px;
	width: auto;
	object-fit: contain;
}

.ss-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin-right: -.5rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ss-body);
	cursor: pointer;
	transition: color .3s ease;
}

.ss-drawer-close:hover { color: var(--ss-ink); }

.ss-mobile__nav { flex: 1 1 auto; }

.ss-mobile ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Hairline between top-level rows, so the sidebar reads as a list */
.ss-mobile__nav > ul > li + li {
	border-top: 1px solid var(--ss-line);
}

.ss-mobile li {
	margin-bottom: 0;
}

.ss-mobile a {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	/* Every drawer row is a full-size touch target, including the nested
	   solution links, which are set in a smaller type size. */
	min-height: 44px;
	font-family: var(--ss-font-display);
	font-size: .875rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
	color: var(--ss-ink);
	padding: .375rem 0;
}

.ss-mobile a:hover {
	color: var(--ss-teal-dark);
}

/* Row pairing a top-level link with its accordion toggle. Items with no
   children (About Us, Services, …) render the plain <a> with no wrapper. */
.ss-menu-row {
	display: flex;
	align-items: center;
}

/* Accordion toggle — a separate control from the link, so tapping "Solutions"
   still navigates to the Solutions page; only the chevron expands the list. */
.ss-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin-right: -.625rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ss-muted);
	cursor: pointer;
}

.ss-submenu-toggle svg {
	transition: transform .25s ease;
}

.ss-submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
	color: var(--ss-teal-dark);
}

/* Collapsed by default in plain CSS (matches WordPress's own `.sub-menu`
   class), so the list is closed even before app.js finishes attaching the
   toggle buttons — no flash of an expanded submenu. */
.ss-mobile .sub-menu {
	margin: 0 0 0 .25rem;
	padding-left: .875rem;
	border-left: 1px solid var(--ss-line);
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
}

.ss-mobile .sub-menu a {
	text-transform: none;
	letter-spacing: 0;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--ss-body);
}

.ss-mobile__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-top: 1.5rem;
	gap: .5rem;
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--ss-teal-dark);
	background: var(--ss-teal-soft);
	border: 1px solid rgba(13, 148, 136, .28);
	padding: .875rem;
	border-radius: .75rem;
}

/*
 * The horizontal nav needs 900px, not 768px.
 *
 * This switched at 768 while the menu had five items. The August 2026 revamp
 * added SOC as a sixth, and at 768 the six links plus the 176px wordmark need
 * ~745px of content against the 720px the shell actually offers — so "Contact"
 * ran past the right gutter and sat flush against the edge of the screen. No
 * page-level scrollbar appeared, which is exactly why it was easy to miss.
 *
 * Raising the switch to 900 hands portrait tablets the drawer instead, which
 * suits six items with dropdowns better anyway, and leaves 107px of slack at
 * the point the horizontal nav does take over. Re-measure if a seventh
 * top-level item is ever added.
 */
@media (min-width: 900px) {
	.ss-burger { display: none; }
	.ss-mobile,
	.ss-drawer-backdrop { display: none; }
}

@media (max-width: 899px) {
	.ss-nav { display: none; }
}

@media (min-width: 1024px) {
	.ss-support { display: inline-flex; }
}

/* The larger logo, and the taller bar it needs to sit in. */
@media (min-width: 640px) {
	:root { --ss-header-h: 96px; }
	.ss-brand img { height: 72px; }
}

/* ==========================================================================
   Layout shell — the fixed header needs clearance on every page but the
   front page, whose hero is designed to sit underneath it.
   ========================================================================== */
.ss-main {
	position: relative;
	z-index: 1;
}

body:not(.ss-has-hero) .ss-main {
	padding-top: var(--ss-header-h);
}

/* ==========================================================================
   Scroll-to-top button

   Left corner, deliberately opposite the WhatsApp button on the right — two
   floating controls sharing one corner is what caused the button-over-footer-
   text collision fixed elsewhere in this file; putting them on opposite sides
   removes that risk at the source rather than only mitigating it with
   reserved footer padding (which still stays, since either corner can still
   land over a footer column's text at the very bottom of a page).
   ========================================================================== */
.ss-to-top {
	position: fixed;
	left: 1.25rem;
	bottom: 1.25rem;
	z-index: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(13, 148, 136, .3);
	border-radius: 9999px;
	background: var(--ss-teal);
	color: #fff;
	cursor: pointer;
	box-shadow: var(--ss-shadow);
	/* Hidden until the visitor has scrolled — `visibility` rather than
	   `display` so the fade actually runs, and so it stays out of the tab
	   order while it is invisible. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .25s ease;
}

.ss-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ss-to-top:hover {
	background: var(--ss-teal-dark);
}

.ss-to-top:focus-visible {
	outline: 2px solid var(--ss-ink);
	outline-offset: 2px;
}

.ss-to-top svg { display: block; }

@media (prefers-reduced-motion: reduce) {
	.ss-to-top { transition: opacity .25s ease, visibility .25s; transform: none; }
}

@media (min-width: 640px) {
	.ss-to-top {
		left: 2rem;
		bottom: 2rem;
		width: 52px;
		height: 52px;
	}
}

/* ==========================================================================
   Footer — one of the deliberately dark surfaces on an otherwise light site.
   It anchors the bottom of every page and gives the white content somewhere to
   stop. The white-type wordmark is used here (see ss_brand()).

   Redesigned in August 2026, twice over. First pass (single flex row of
   brand + nav + copy) broke once the footer nav grew from 5 links to 8 — the
   row would wrap unpredictably and the copyright line's position became
   viewport-dependent, sometimes drifting under the floating buttons. This
   pass replaces the thin single-line footer entirely with a real three-column
   layout — brand/tagline, quick links, direct contact — plus its own bottom
   bar for the copyright line, the shape most B2B sites actually use and what
   the client asked for by name ("redesign it in a modern way").
   ========================================================================== */
.ss-footer {
	position: relative;
	z-index: 1;
	background: var(--ss-ink-deep);
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: .8125rem;
	color: rgba(255, 255, 255, .62);
}

/* Shell centring shared by the column grid and the bottom bar, so their
   content lines up on one left/right edge even though they're visually two
   separate blocks. */
.ss-footer__top,
.ss-footer__bottom {
	max-width: var(--ss-shell);
	margin: 0 auto;
	padding-left: var(--ss-gutter);
	padding-right: var(--ss-gutter);
}

.ss-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.75rem;
	padding-top: 3.5rem;
	padding-bottom: 2.75rem;
	text-align: center;
}

.ss-footer__col { min-width: 0; }

.ss-footer__brand {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* touch target; the logo itself stays smaller */
}

.ss-footer img {
	height: 48px;
	width: auto;
	object-fit: contain;
}

.ss-footer__tagline {
	max-width: 24rem;
	margin: 1rem auto 0;
	color: rgba(255, 255, 255, .58);
	font-size: .875rem;
	line-height: 1.65;
}

.ss-footer__badge {
	display: inline-flex;
	align-items: center;
	margin: 1.1rem 0 0;
	padding: .4rem .85rem;
	border: 1px solid rgba(94, 234, 212, .28);
	border-radius: 999px;
	background: rgba(94, 234, 212, .08);
	color: var(--ss-teal-300);
	font-family: var(--ss-font-display);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.ss-footer__heading {
	margin: 0 0 1.1rem;
	color: #fff;
	font-family: var(--ss-font-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ss-footer__nav ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ss-footer__nav a {
	display: inline-flex;
	align-items: center;
	/* Padding rather than a bare inline link, so the tap area clears 44px on
	   touch screens instead of being only as tall as the text. */
	min-height: 38px;
	color: rgba(255, 255, 255, .68);
	font-size: .875rem;
	font-weight: 500;
	transition: color .2s ease, transform .2s ease;
}

.ss-footer__nav a:hover {
	color: var(--ss-teal-300);
	transform: translateX(3px);
}

.ss-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .65rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ss-footer__contact a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 38px;
	color: rgba(255, 255, 255, .78);
	font-size: .875rem;
	font-weight: 500;
	transition: color .2s ease;
}

.ss-footer__contact a:hover { color: var(--ss-teal-300); }

.ss-footer__icon {
	flex: 0 0 auto;
	color: var(--ss-teal-300);
}

/* The 24x7x365 line in the Support Centre column: same row layout as the
   links above it, but not a link — no hover colour, and the icon reads as a
   status badge rather than an actionable glyph, so it's left a plain white. */
.ss-footer__badge-row {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 38px;
	color: rgba(255, 255, 255, .78);
	font-size: .875rem;
	font-weight: 500;
}

.ss-footer__badge-row .ss-footer__icon { color: rgba(255, 255, 255, .78); }

/* Social icon row under the brand column. Circular outline buttons rather
   than the plain text links used for phone/email/find-us — these are single
   glyphs with no label, so they need their own tap target and a visible
   boundary at rest instead of relying on hover alone. */
.ss-footer__social {
	display: flex;
	justify-content: center;
	gap: .625rem;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.ss-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, .18);
	color: rgba(255, 255, 255, .78);
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.ss-footer__social a:hover {
	background: var(--ss-teal);
	border-color: var(--ss-teal);
	color: #fff;
	transform: translateY(-2px);
}

.ss-footer__bottom {
	padding-top: 1.75rem;
	/* The visible divider gap PLUS a reserved safe zone: on smaller
	   viewports this is the whole footer's clearance below its last text —
	   see the derivation note on .ss-whatsapp. The buttons are `fixed` to the
	   viewport, so whether they land on this line depends on viewport width
	   in a way that can't be pinned down from here; reserving dead space below
	   all footer content sidesteps that calculation rather than attempting it. */
	padding-bottom: 9.5rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
	text-align: center;
}

.ss-footer__copy {
	color: rgba(255, 255, 255, .5);
}

@media (min-width: 640px) {
	.ss-footer__top {
		/* Four columns, not three, since the Support Centre column was added:
		   brand widest (it also carries the social row), links narrowest (its
		   labels are short), the two contact lists equal. */
		grid-template-columns: 1.2fr 0.75fr 1fr 1fr;
		gap: 2.5rem;
		text-align: left;
	}

	.ss-footer__brand { justify-content: flex-start; }
	.ss-footer__tagline { margin-left: 0; }
	.ss-footer__social { justify-content: flex-start; }

	.ss-footer__nav ul,
	.ss-footer__contact { align-items: flex-start; }

	.ss-footer__contact a,
	.ss-footer__badge-row { justify-content: flex-start; }

	.ss-footer__bottom {
		/* Bumped from 9.5rem to clear the buttons' larger 640px+ size
		   (52px, vs 48px below this breakpoint). */
		padding-bottom: 11rem;
	}
}

/* 1025px, not 1024px, so the shell's gutters change at exactly the same point
   as Elementor's desktop breakpoint — otherwise section content and the header
   disagree by 24px in a one-pixel window. */
@media (min-width: 1025px) {
	.ss-header__shell,
	.ss-footer__top,
	.ss-footer__bottom {
		padding-left: 3rem;
		padding-right: 3rem;
	}
}

/* ==========================================================================
   Design helpers — applied to Elementor elements via the "CSS Classes" field
   so the client keeps full control of content while the look stays fixed.
   ========================================================================== */

/*
 * The standard card. On a dark page this was a frosted panel that separated
 * itself with a glow; on white it needs a real border and a soft shadow, and
 * lifts on hover into a teal-tinted edge.
 *
 * The shadow is `filter: drop-shadow()`, not `box-shadow` — deliberately.
 * Several cards using this class (`.ss-media-card`) also set `overflow:
 * hidden` on themselves, to crop a bled photo to the card's rounded corners.
 * `overflow: hidden` clips a box's OWN `box-shadow` to its own bounds, which
 * on hover — shadow growing, card lifting — showed as a hard-edged smear
 * instead of a soft lift. `filter` effects are composited after an element's
 * own clipping is resolved, so `drop-shadow` is immune to it; it reads the
 * card's actual (rounded) silhouette, so it also traces the corners more
 * accurately than `box-shadow` did.
 */
.glow-card {
	position: relative;
	background: var(--ss-surface);
	border: 1px solid var(--ss-line);
	filter: drop-shadow(var(--ss-shadow-sm));
	transition: all .35s cubic-bezier(.16, 1, .3, 1);
}

.glow-card:hover {
	border-color: rgba(13, 148, 136, .45);
	filter: drop-shadow(var(--ss-shadow));
	transform: translateY(-4px);
}

/* Placeholder card for content flagged "to be confirmed" by the client
   (e.g. Solutions > Storage > Unified/Object Storage) — dashed border keeps
   it visually distinct from real, populated cards until copy is supplied. */
.ss-tbc {
	border-style: dashed;
	border-color: rgba(180, 83, 9, .35);
	background: #fffaf2;
}

.ss-tbc:hover {
	border-color: rgba(180, 83, 9, .55);
	box-shadow: var(--ss-shadow);
	transform: translateY(-4px);
}

/* Blue→teal→violet clipped gradient text. Darker stops than the dark theme
   used, so the headline still holds its weight against a white page. */
.gradient-text,
.gradient-text * {
	background: linear-gradient(120deg, #1d4ed8, #0d9488, #6d28d9);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* --------------------------------------------------------------------------
   Horizontal centring for an element that has its own width inside one of
   Elementor's column containers.

   `margin: auto` alone does not work here: Elementor's frontend stylesheet
   sets the container margins at the same specificity but loads after the
   theme, so it wins. `align-self` is not touched by Elementor unless the
   Flex-item control is used, so it centres reliably on the cross axis.
   -------------------------------------------------------------------------- */
.elementor-element.ss-center {
	/* Feed Elementor's own custom property rather than setting align-self
	   directly — its `.elementor-element { align-self: var(--align-self) }`
	   loads after the theme and would otherwise win the tie. */
	--align-self: center;
	margin-left: auto;
	margin-right: auto;
}

/* Outside Elementor (theme templates), plain auto margins are enough. */
.ss-center:not(.elementor-element) {
	margin-left: auto;
	margin-right: auto;
}

/* Accent rule used by the services / mission blocks */
.ss-rule-teal   { border-left: 3px solid var(--ss-teal); }
.ss-rule-blue   { border-left: 3px solid var(--ss-blue); }
.ss-rule-purple { border-left: 3px solid var(--ss-purple); }

/* --------------------------------------------------------------------------
   Big photo tile — the Solutions pillar preview cards.

   The photograph and its scrim come from Elementor's Background and Background
   Overlay controls (so the client can swap either from the editor); everything
   here is the frame, the hover behaviour and the CTA treatment.
   -------------------------------------------------------------------------- */
/* filter: drop-shadow, not box-shadow — same reason as .glow-card above:
   .ss-tile sets its own overflow: hidden (to crop the photo to its rounded
   corners), which would otherwise clip its own shadow on hover. */
/*
 * Anchored on `.elementor` for the same reason as .ss-media-card above:
 * a bare `.ss-tile { overflow: hidden }` ties Elementor's own
 * `.e-con { overflow: var(--overflow) }` and loses, since Elementor's
 * stylesheet loads after the theme's — the tile was never actually clipping
 * its own corners. `will-change: transform` on top, for the separate
 * compositing bug: overflow:hidden + border-radius on an element that also
 * gets its own hover transform can lose the rounded clip mid-transition
 * without a pre-established GPU layer.
 */
.elementor .elementor-element.ss-tile {
	overflow: hidden;
	filter: drop-shadow(var(--ss-shadow));
	transition: transform .35s cubic-bezier(.16, 1, .3, 1), filter .35s ease;
	will-change: transform;
}

.ss-tile:hover {
	transform: translateY(-6px);
	filter: drop-shadow(var(--ss-shadow-lg));
}

/* Elementor paints the overlay on ::before; ::after is free for a bottom-up
   gradient that keeps the title legible over a busy photograph. */
.ss-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(4, 17, 30, .85), rgba(4, 17, 30, .15) 65%, transparent);
}

.ss-tile > .e-con-inner {
	position: relative;
	z-index: 2;
}

.ss-tile .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Testimonials. The client's note was that the person and the organisation
   both have to be readable, so neither is grey small print: the name is ink,
   the organisation is teal, and the quote sits under a large quote mark.
   -------------------------------------------------------------------------- */
.ss-testimonial::before {
	content: "\201C";
	position: absolute;
	top: .25rem;
	left: 1.5rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 4.5rem;
	line-height: 1;
	color: rgba(13, 148, 136, .22);
	pointer-events: none;
}

.ss-quote .elementor-widget-container > p,
.ss-quote p {
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Dark sections.

   The site is light, but a page of nothing but white sections has no floor to
   it — so a small number of sections invert: the security-console section on
   the home page (a dark ops readout is what that content actually looks like)
   and the site footer. Anything inside `.ss-section-dark` flips here; the
   widget colours that Elementor writes into the database are set to their
   light values at the call site in the page build, so the two agree.
   -------------------------------------------------------------------------- */
.ss-section-dark {
	background: var(--ss-ink-deep);
	color: rgba(255, 255, 255, .72);
	border-top: 1px solid rgba(255, 255, 255, .07);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* A faint node grid, so the dark band reads as a continuation of the hero
   rather than an unrelated black box. */
.ss-section-dark::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 44px 44px,
		linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 44px 44px,
		radial-gradient(ellipse 60% 60% at 15% 10%, rgba(13, 148, 136, .16), transparent),
		radial-gradient(ellipse 55% 55% at 88% 90%, rgba(37, 99, 235, .14), transparent);
}

.ss-section-dark > .e-con-inner {
	position: relative;
	z-index: 1;
}

.ss-section-dark .glow-card {
	background: var(--ss-ink-card);
	border-color: rgba(255, 255, 255, .09);
	filter: none;
}

.ss-section-dark .glow-card:hover {
	border-color: rgba(45, 212, 191, .45);
	filter: drop-shadow(0 0 34px rgba(13, 148, 136, .18));
}

.ss-section-dark .ss-console {
	background: rgba(0, 0, 0, .35);
	border-color: rgba(255, 255, 255, .08);
}

.ss-section-dark .ss-console__bar {
	background: rgba(255, 255, 255, .04);
	border-bottom-color: rgba(255, 255, 255, .08);
}

.ss-section-dark .ss-console__name { color: rgba(255, 255, 255, .45); }
.ss-section-dark .ss-console__row { color: rgba(255, 255, 255, .62); }
.ss-section-dark .ss-console__row b { color: var(--ss-teal-300); }
.ss-section-dark .ss-console__row b.is-blue { color: #7dabff; }

/*
 * Chips need their own dark colourway — the pastel fills disappear here.
 *
 * Only the fill and the border are set. The chip TEXT colour is not settable
 * from here: `ss_list()` writes it into the widget, and Elementor's per-element
 * rule for `.elementor-icon-list-text` outranks anything this stylesheet can
 * reasonably say, so `color` declarations on the item were silently ignored and
 * the chips kept the light theme's slate text at ~1.2:1. The call site passes
 * a light colour instead — see the `chip_color` option on ss_chip_card() — and
 * these fills are tuned to sit behind that one colour rather than three
 * different ones.
 */
.ss-section-dark .ss-chips .elementor-icon-list-item:nth-child(3n+1) {
	background: rgba(37, 99, 235, .22);
	border-color: rgba(96, 150, 255, .5);
}

.ss-section-dark .ss-chips .elementor-icon-list-item:nth-child(3n+2) {
	background: rgba(13, 148, 136, .22);
	border-color: rgba(45, 212, 191, .5);
}

.ss-section-dark .ss-chips .elementor-icon-list-item:nth-child(3n+3) {
	background: rgba(124, 58, 237, .24);
	border-color: rgba(167, 120, 255, .5);
}

.ss-section-dark .elementor-widget-n-tabs .e-n-tabs-heading {
	border-bottom-color: rgba(255, 255, 255, .1);
}

/* --------------------------------------------------------------------------
   OEM logo wall. The wordmarks are supplied as flat artwork on white, so each
   one sits on its own white plate; they are desaturated at rest and come back
   to full colour on hover, which stops ten competing brand palettes from
   shouting over the section heading.
   -------------------------------------------------------------------------- */
/* Padding and min-height are NOT set here — they come from the container's own
   Elementor controls in ss_logo_tile(), because Elementor's per-element rules
   outrank this selector and would reset them. */
.ss-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--ss-line);
	border-radius: .875rem;
	box-shadow: var(--ss-shadow-sm);
	transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .35s ease;
}

.ss-logo:hover {
	transform: translateY(-4px);
	border-color: rgba(13, 148, 136, .4);
	box-shadow: var(--ss-shadow);
}

.ss-logo img {
	max-height: 52px;
	/* Tablet widths are the one breakpoint Elementor is not emitting container
	   widths for on this install, so between 768px and 1024px both walls keep
	   their desktop column count and the plates get narrow. Capping the width
	   lets a wide wordmark shrink inside its tile instead of overflowing it. */
	max-width: 100%;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .68;
	transition: filter .35s ease, opacity .35s ease;
}

.ss-logo:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* Elementor's image widget centres through its own wrapper; without this the
   figure keeps its default block width and the logo hugs the left edge. */
.ss-logo .elementor-widget-image,
.ss-logo .elementor-image,
.ss-logo figure {
	width: 100%;
	margin: 0;
	text-align: center;
}

.ss-logo .elementor-widget-image img { margin: 0 auto; }

/* --------------------------------------------------------------------------
   Client filter gallery (Partners > Valued Clients).

   The client asked for the industry tabs their old customers.php page had —
   radio-button tabs over a filtered logo grid — reproduced here. It is built
   as one `html` Elementor widget rather than from ss_grid()/ss_logo_tile()
   like the OEM wall above, because Elementor Free has no per-element custom
   attribute control to carry `data-sector`, so the tiles are plain markup
   filtered by initClientFilter() in app.js. That is also why these rules do
   not reuse `.ss-logo`: its padding and min-height are deliberately set
   through Elementor's own per-element CSS (see the comment above ss_logo_tile
   in tools/elementor-build/ss-lib.php), which does not exist for plain HTML.
   -------------------------------------------------------------------------- */
.ss-client-filter {
	width: 100%;
}

.ss-client-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .625rem;
	margin: 0 0 2rem;
}

.ss-client-tab {
	font-family: var(--ss-font-display);
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ss-body);
	background: #fff;
	border: 1px solid var(--ss-line-strong);
	border-radius: 9999px;
	padding: .5rem 1.125rem;
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.ss-client-tab:hover {
	border-color: rgba(13, 148, 136, .4);
	color: var(--ss-teal-dark);
}

.ss-client-tab.is-active {
	background: var(--ss-teal);
	border-color: var(--ss-teal);
	color: #fff;
}

.ss-client-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.125rem;
}

.ss-client-tile {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 104px;
	padding: 1.125rem 1.25rem;
	background: #fff;
	border: 1px solid var(--ss-line);
	border-radius: .875rem;
	box-shadow: var(--ss-shadow-sm);
	transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .35s ease;
}

.ss-client-tile:hover {
	transform: translateY(-4px);
	border-color: rgba(13, 148, 136, .4);
	box-shadow: var(--ss-shadow);
}

.ss-client-tile img {
	max-height: 52px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .68;
	transition: filter .35s ease, opacity .35s ease;
}

.ss-client-tile:hover img {
	filter: grayscale(0);
	opacity: 1;
}

.ss-client-tile.is-hidden {
	display: none;
}

.ss-client-empty {
	text-align: center;
	color: var(--ss-muted);
	font-size: .875rem;
	padding: 2rem 0 0;
}

@media (max-width: 1024px) {
	.ss-client-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
	.ss-client-tabs { gap: .5rem; }
	.ss-client-tab { font-size: .6875rem; padding: .4375rem .875rem; }
	.ss-client-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}

/* The trademark note under the wall */
.ss-legal p {
	font-size: .75rem;
	color: var(--ss-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Media card — a card with a photograph across the top. The image is an
   ordinary Elementor image widget inside the card, so the client can swap it;
   these rules only bleed it to the card edges and crop it to a fixed band.
   -------------------------------------------------------------------------- */
/*
 * The actual bug behind "the image overflows the card on hover" — found by
 * checking the computed style, not by eye: `overflow` here was resolving to
 * `visible`, not `hidden`. Elementor ships `.e-con { overflow: var(--overflow)
 * }` in its own stylesheet, which loads after the theme's; a bare
 * `.ss-media-card { overflow: hidden }` ties that selector's specificity
 * exactly (0,1,0) each, so Elementor's rule won, `--overflow` was never set,
 * and it fell back to `visible`. The card was never clipping anything, at any
 * time — the scaled photo on hover was simply free to spill past the rounded
 * corners. `.elementor` raises this rule clear of the tie.
 *
 * `will-change: transform` is a second, independent fix layered on top: even
 * with clipping correctly enabled, this card carries `border-radius` AND (via
 * `.glow-card:hover`) gets its OWN `transform: translateY(-4px)` on hover, at
 * the moment its photo is also transforming (`scale(1.06)` below) — the exact
 * combination Chrome/Safari can mishandle mid-transition, briefly losing the
 * rounded clip. Promoting the card to a stable GPU layer before the hover
 * ever starts keeps the clip correct through the whole transition.
 */
.elementor .elementor-element.ss-media-card {
	overflow: hidden;
	will-change: transform;
}

/*
 * Bleed the photo out to the card edges.
 *
 * Two things are load-bearing here.
 *
 * The width is stated as calc rather than left at `auto`, because the card is
 * a flex column and a stretched flex item resolves `width: auto` against the
 * container's *content* box — the negative side margins shifted the image left
 * without ever making it wider, so it sat 56px short with its right edge
 * hanging outside the card.
 *
 * And `max-width` has to be overridden as well as `width`, at a specificity
 * that clears Elementor's `.elementor.elementor .e-con > .elementor-widget {
 * max-width: 100% }` — (0,4,0). Setting only the width looked like it did
 * nothing: the calc applied and was then clamped straight back to the content
 * box, so the image kept its old size while the negative margin from the same
 * rule visibly moved it. Hence the `.elementor` prefix, which takes this to
 * (0,5,0).
 *
 * Keep the 28px in step with the card padding in ss_media_card().
 */
.elementor .elementor-element.ss-media-card > .e-con-inner > .elementor-widget-image:first-child,
.elementor .elementor-element.ss-media-card > .elementor-widget-image:first-child {
	width: calc(100% + 56px);
	max-width: calc(100% + 56px);
	margin: -28px -28px 0;
}

/* The photo fills the banded area edge to edge and is cropped to it. Anchored
   on `.elementor` for the same reason as the widget rule above — a bare
   `.ss-media-card … img` ties with Elementor's own image rules, which load
   after the theme and therefore win. `max-width` is restated because
   `.elementor img { max-width: 100% }` would otherwise clamp the width back. */
.elementor .elementor-element.ss-media-card .elementor-widget-image img {
	width: 100%;
	max-width: 100%;
	height: 190px;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.elementor .elementor-element.ss-media-card:hover .elementor-widget-image img {
	transform: scale(1.06);
}

/* A framed photograph sitting beside a block of copy. Anchored on
   `.elementor` for the same reason as the media card above — Elementor's own
   image rules outrank a bare `.ss-figure img`. */
.elementor .elementor-element.ss-figure img {
	border-radius: 1rem;
	box-shadow: var(--ss-shadow-lg);
	width: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Scroll-in transitions.

   Applied by app.js, which adds `.ss-reveal` to each section and then
   `.is-in` when it enters the viewport. The class is added from JS rather
   than sitting in the markup so that with JavaScript off nothing is ever
   stuck invisible — no-JS visitors simply get the finished state.
   -------------------------------------------------------------------------- */
.ss-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
	will-change: opacity, transform;
}

.ss-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Children stagger slightly behind their section, which reads as one movement
   instead of everything snapping at once. */
.ss-reveal-child {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}

.ss-reveal.is-in .ss-reveal-child {
	opacity: 1;
	transform: none;
}

.ss-reveal.is-in .ss-reveal-child:nth-child(1) { transition-delay: .05s; }
.ss-reveal.is-in .ss-reveal-child:nth-child(2) { transition-delay: .12s; }
.ss-reveal.is-in .ss-reveal-child:nth-child(3) { transition-delay: .19s; }
.ss-reveal.is-in .ss-reveal-child:nth-child(4) { transition-delay: .26s; }
.ss-reveal.is-in .ss-reveal-child:nth-child(5) { transition-delay: .33s; }
.ss-reveal.is-in .ss-reveal-child:nth-child(6) { transition-delay: .4s; }

/* Motion is decoration here; if it is unwelcome, show everything immediately. */
@media (prefers-reduced-motion: reduce) {
	.ss-reveal,
	.ss-reveal-child {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Mock console panel — a light instrument panel rather than a black terminal,
   so it belongs on the white page while still reading as an ops readout. */
.ss-console {
	border: 1px solid var(--ss-line);
	background: #f8fbfd;
	border-radius: .75rem;
	overflow: hidden;
}

.ss-console__bar {
	display: flex;
	align-items: center;
	gap: .375rem;
	padding: .625rem 1rem;
	border-bottom: 1px solid var(--ss-line);
	background: #eef4f9;
}

.ss-console__bar i {
	width: 10px;
	height: 10px;
	border-radius: 9999px;
	display: inline-block;
}

.ss-console__bar i:nth-child(1) { background: #f87171; }
.ss-console__bar i:nth-child(2) { background: #fbbf24; }
.ss-console__bar i:nth-child(3) { background: #34d399; }

.ss-console__name {
	margin-left: .75rem;
	font-family: var(--ss-font-display);
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--ss-muted);
}

.ss-console__rows {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .625rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
}

.ss-console__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: var(--ss-body);
}

.ss-console__row b {
	font-weight: 700;
	color: var(--ss-emerald);
	white-space: nowrap;
}

.ss-console__row b.is-blue { color: var(--ss-blue); }

/* --------------------------------------------------------------------------
   Icon plates.

   Elementor's "framed" view colours the border and the glyph from the widget's
   own Primary Color control; only the tinted plate behind the glyph comes from
   here, so changing the colour in Elementor still works as expected. The tints
   are solid pastels rather than the dark theme's translucent navies — on white,
   a 50%-alpha panel disappears.
   -------------------------------------------------------------------------- */
/* The extra .elementor-element outranks Elementor's own
   ".elementor-view-framed .elementor-icon { background: transparent }". */
.elementor-element.ss-ib-blue .elementor-icon    { background: var(--ss-blue-soft); }
.elementor-element.ss-ib-teal .elementor-icon    { background: var(--ss-teal-soft); }
.elementor-element.ss-ib-purple .elementor-icon  { background: var(--ss-purple-soft); }
.elementor-element.ss-ib-emerald .elementor-icon { background: var(--ss-emerald-soft); }

.elementor-widget-icon-box .elementor-icon,
.elementor-widget-icon .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--ss-shadow-sm);
	transition: transform .3s ease;
}

/* A little life on hover, and it also tells the visitor the whole card is one
   object rather than an icon that happens to sit above some text. */
.glow-card:hover .elementor-icon {
	transform: translateY(-2px) scale(1.04);
}

/* --------------------------------------------------------------------------
   Icon-list variants. The client edits the entries in the widget's repeater;
   these rules only decide how the entries look.
   -------------------------------------------------------------------------- */

/*
 * Vendor chips.
 *
 * Padding and gap both raised — the chips were reading as cramped, text
 * almost touching the pill border with barely any air between rows.
 *
 * The padding rule has to be anchored on `.elementor`: Elementor's own
 * `widget-icon-list.min.css` carries `.elementor-widget .elementor-icon-list-
 * item { padding: 0 }`, which ties this rule's specificity exactly (0,2,0
 * vs 0,2,0) and, loading after the theme, wins the tie. The chips had *no*
 * padding at all before this — not "too little", actually zero — which is
 * the real cause of the cramped look this fixes, not just the raised values.
 */
.ss-chips .elementor-icon-list-items {
	gap: .625rem;
}

.elementor .ss-chips .elementor-icon-list-item {
	padding: .5rem 1rem;
	border-radius: .5rem;
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.4;
	border: 1px solid;
	margin: 0;
}

.ss-chips .elementor-icon-list-item:nth-child(3n+1) {
	background: var(--ss-blue-soft);
	border-color: rgba(37, 99, 235, .25);
	color: #1d4ed8;
}

.ss-chips .elementor-icon-list-item:nth-child(3n+2) {
	background: var(--ss-teal-soft);
	border-color: rgba(13, 148, 136, .28);
	color: var(--ss-teal-dark);
}

.ss-chips .elementor-icon-list-item:nth-child(3n+3) {
	background: var(--ss-purple-soft);
	border-color: rgba(124, 58, 237, .22);
	color: #6d28d9;
}

.ss-chips .elementor-icon-list-text { color: inherit; }

/* Outline pill row (services footnote). Same `.elementor` anchor as the chips
   above, and for the same reason — this padding was losing the same tie. */
.ss-pills .elementor-icon-list-items {
	justify-content: center;
	gap: 1rem;
}

.elementor .ss-pills .elementor-icon-list-item {
	padding: .5rem 1.125rem;
	border: 1px solid var(--ss-line-strong);
	background: #fff;
	border-radius: 9999px;
	margin: 0;
	font-family: var(--ss-font-display);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 600;
	color: var(--ss-body);
}

/* Same pill, without the caps — for the one pill row that carries a raw email
   address ("Email info@securesolutions.co.in"), where uppercasing the address
   reads as broken rather than as the button-style branding it is elsewhere. */
.elementor .ss-pills--lower .elementor-icon-list-item {
	text-transform: none;
	letter-spacing: normal;
}

/* Plain wordmark row */
.ss-wordmarks .elementor-icon-list-items {
	justify-content: center;
	gap: .875rem 2rem;
	opacity: 1;
}

.ss-wordmarks .elementor-icon-list-item {
	margin: 0;
	font-family: var(--ss-font-display);
	font-weight: 700;
	color: var(--ss-ink);
	font-size: .9375rem;
	letter-spacing: .04em;
	opacity: .72;
	transition: opacity .25s ease, color .25s ease;
}

.ss-wordmarks .elementor-icon-list-item:hover {
	opacity: 1;
	color: var(--ss-teal-dark);
}

/* Vertical, left-aligned list — the technology cards on the Solutions page. */
.ss-stack .elementor-icon-list-items {
	display: block;
}

.ss-stack .elementor-icon-list-item {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: 0;
	padding: .3rem 0;
	text-align: left;
	color: var(--ss-body);
	font-size: .875rem;
	line-height: 1.6;
}

.ss-stack .elementor-icon-list-item::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	margin-top: .5rem;
	border-radius: 50%;
	background: var(--ss-teal);
}

.ss-stack .elementor-icon-list-text {
	color: inherit;
	text-align: left;
}

/* Shared: kill the default separator/indent so the variants sit flush */
.ss-chips .elementor-icon-list-item::after,
.ss-pills .elementor-icon-list-item::after,
.ss-wordmarks .elementor-icon-list-item::after,
.ss-stack .elementor-icon-list-item::after {
	display: none;
}

/* --------------------------------------------------------------------------
   Hero backdrop.

   Elementor drives the container's Background Overlay through `::before`, so
   everything the theme adds lives on `::after` — otherwise the two fight and
   the client can no longer tune the overlay from the editor.

   The hero carries no photography any more: it is this wash plus the animated
   node network app.js draws onto a canvas, which is the effect the client
   pointed at on their reference site. The grid and the blooms are pitched much
   fainter than the dark theme's, because on white they are read as texture
   rather than as light.

   Stack: container background (0) → overlay ::before → mesh/grid ::after (1)
          → particle canvas (2) → content (3)
   -------------------------------------------------------------------------- */
/* `.elementor` anchor for the same tie as .ss-media-card/.ss-tile above — a
   bare `.ss-hero-mesh { overflow: hidden }` loses to Elementor's own
   `.e-con { overflow: var(--overflow) }`, so the grid/particle layer was
   never actually being clipped to the hero's own bounds. */
.elementor .elementor-element.ss-hero-mesh {
	position: relative;
	overflow: hidden;
}

.ss-hero-mesh::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(rgba(11, 34, 57, .035) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(11, 34, 57, .035) 1px, transparent 1px) 0 0 / 48px 48px,
		radial-gradient(ellipse 60% 50% at 50% 0%, rgba(37, 99, 235, .10), transparent),
		radial-gradient(ellipse 50% 40% at 85% 80%, rgba(124, 58, 237, .08), transparent),
		radial-gradient(ellipse 50% 40% at 10% 85%, rgba(13, 148, 136, .10), transparent);
}

.ss-hero-mesh > .e-con-inner {
	position: relative;
	z-index: 3;
}

/* --------------------------------------------------------------------------
   Soft mesh — the hero treatment dialled right down, for section backdrops
   further down a long page (Solutions pillars). Same stacking contract as the
   hero, but no grid lines and much fainter blooms: body copy sits directly on
   top of this, so it has to stay quiet. The particle field JS pairs a lower
   node count and opacity with it.
   -------------------------------------------------------------------------- */
.ss-mesh-soft {
	position: relative;
}

.ss-mesh-soft::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 55% 60% at 12% 15%, rgba(13, 148, 136, .07), transparent),
		radial-gradient(ellipse 50% 55% at 88% 85%, rgba(37, 99, 235, .06), transparent);
}

.ss-mesh-soft > .e-con-inner {
	position: relative;
	z-index: 3;
}

/* The decorative layers are pure ornament — drop them when the visitor has
   asked for reduced motion, matching the particle canvas opting out in JS. */
@media (prefers-reduced-motion: reduce) {
	.ss-mesh-soft::after {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Hero ISO badge — applied to a Heading widget, whose title element is the
   pill. Green rather than teal, and considerably larger than it was: the
   client's note was that the certification is a selling point and was being
   lost at the top of the page.
   -------------------------------------------------------------------------- */
.ss-badge .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: .625rem;
	background: var(--ss-green-soft);
	border: 1px solid var(--ss-green-line);
	color: var(--ss-green);
	padding: .625rem 1.375rem;
	border-radius: 9999px;
	box-shadow: 0 2px 10px rgba(21, 128, 61, .10);
}

/* The certification tick, drawn in CSS so there is no icon dependency. */
.ss-badge .elementor-heading-title::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 9999px;
	background: var(--ss-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* Narrow phones: the pill is competing with 24px gutters, so it gives back
   some of its own padding rather than letting the label wrap. */
@media (max-width: 480px) {
	.ss-badge .elementor-heading-title {
		gap: .5rem;
		padding: .5rem 1rem;
	}

	.ss-badge .elementor-heading-title::before {
		width: 16px;
		height: 16px;
	}
}

/* Elementor resets that keep widget defaults from fighting the design */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

.elementor-widget-heading .elementor-heading-title { font-family: var(--ss-font-display); }

/* Nested Tabs: underline treatment from the original console switcher */
.elementor-widget-n-tabs .e-n-tab-title {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	padding: 1rem 1.5rem;
	font-family: var(--ss-font-display);
}

.elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"] {
	border-bottom-color: var(--ss-teal);
}

.elementor-widget-n-tabs .e-n-tabs-heading {
	border-bottom: 1px solid var(--ss-line);
	flex-wrap: wrap;
}

.elementor-widget-n-tabs .e-n-tabs-content > .e-con { padding-top: 2rem; }

/* ==========================================================================
   Contact Form 7 — restyled to match the design's form card
   ========================================================================== */
/* One field per row by default; the name/email pair goes 2-up from sm upwards. */
.ss-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
	.ss-form-grid { grid-template-columns: 1fr 1fr; }
}

.ss-field { margin-bottom: 1.5rem; }
.ss-form-grid .ss-field { margin-bottom: 0; }
.ss-field--submit { margin-bottom: 0; }

/* CF7 wraps every control in an inline <span>, which collapses the width of
   the input inside it. Making the wrapper a block is what lets the fields
   fill their column. */
.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Defensive: if autop is ever on for this form (or the client adds another),
   the paragraphs CF7 injects must not add their own vertical rhythm. */
.wpcf7 form > p,
.wpcf7 .ss-field > p { margin: 0; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	background: #fff;
	border: 1px solid var(--ss-line-strong);
	border-radius: .75rem;
	padding: .875rem 1rem;
	color: var(--ss-ink);
	font-family: var(--ss-font-body);
	font-size: .9375rem;
	transition: border-color .3s ease, box-shadow .3s ease;
}

.wpcf7 textarea { resize: none; }

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: var(--ss-muted); }

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--ss-teal);
	box-shadow: 0 0 0 3px rgba(13, 148, 136, .15);
}

.wpcf7 input[type="submit"] {
	width: 100%;
	padding: 1rem;
	background: var(--ss-teal);
	color: #fff;
	font-family: var(--ss-font-display);
	font-weight: 600;
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	border: 0;
	border-radius: .75rem;
	cursor: pointer;
	transition: all .3s ease;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--ss-teal-dark);
	transform: scale(1.01);
}

.wpcf7 input[type="submit"]:active { transform: scale(.95); }

.wpcf7-response-output {
	margin: 1rem 0 0 !important;
	padding: 1rem !important;
	border-radius: .75rem !important;
	border: 1px solid var(--ss-green-line) !important;
	background: var(--ss-green-soft);
	color: var(--ss-green) !important;
	font-size: .875rem;
	font-weight: 600;
	text-align: center;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: #fcd34d !important;
	background: #fffbeb;
	color: #b45309 !important;
}

.wpcf7-not-valid-tip {
	color: #dc2626 !important;
	font-size: .8125rem !important;
	margin-top: .375rem;
}

.wpcf7-spinner { background-color: var(--ss-teal); }

/* ==========================================================================
   Fallback content styling (blog archive, single posts, 404)
   ========================================================================== */
.ss-page {
	max-width: var(--ss-shell);
	margin: 0 auto;
	padding: 4rem var(--ss-gutter);
}

.ss-page__title {
	font-size: 2.25rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
}

.ss-entry + .ss-entry {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--ss-line);
}

.ss-entry__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: .5rem;
}

.ss-entry__meta {
	color: var(--ss-muted);
	font-size: .8125rem;
	margin-bottom: 1rem;
}

.ss-btn {
	display: inline-block;
	padding: 1rem 2rem;
	background: var(--ss-teal);
	color: #fff;
	font-family: var(--ss-font-display);
	font-weight: 600;
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	border-radius: .75rem;
	transition: all .3s ease;
}

.ss-btn:hover {
	background: var(--ss-teal-dark);
	color: #fff;
}

/* Elementor's boxed width is set from the kit (Site Settings > Layout) to
   1184px, which equals this shell minus its desktop gutters. It is deliberately
   NOT overridden here — doing so would take the setting away from the client
   and put the two widths back out of step. */

/* ==========================================================================
   August 2026 revamp — CEO's desk, vision 2030, awards, certifications,
   industries, case studies, gallery, support and the floating WhatsApp button.

   Two rules govern everything below, both learned the hard way on this build:

   1. Anything that sets `overflow` on an Elementor CONTAINER must be anchored
      `.elementor .elementor-element.classname`. A bare `.foo { overflow }` ties
      Elementor's own `.e-con { overflow: var(--overflow) }`, which loads after
      this file, so the tie goes to Elementor and `--overflow` is unset — the
      element then never clips anything, silently and permanently.
   2. Sizes and colours that Elementor writes into `_elementor_data` (heading
      colour, icon-list text colour, min-height, padding) cannot be corrected
      from here; those are set at the call site in ss-lib.php instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero trust points — a row of small checkmark pills under the hero buttons.

   Was a 4-column block of big coloured figures (the same treatment as the
   "Our Numbers" band one screen below it) until two of its four values
   turned out to literally repeat there — see the note on `ss_trust()` in
   home.php. The pill shape and the border/background are set inline per
   widget in `ss_trust()` (Elementor owns those on the container); this file
   only handles the divider from the CTA buttons above and the hover polish.
   -------------------------------------------------------------------------- */
.ss-trust-row {
	border-top: 1px solid var(--ss-line);
	padding-top: 1.75rem !important;
	margin-top: .5rem;
}

/* Anchored `.elementor .elementor-element` — a bare `.ss-trust` would only tie
   Elementor's own background/border declarations on `.e-con`, which load
   after this file and win. */
.elementor .elementor-element.ss-trust {
	transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .25s ease, box-shadow .25s ease;
}

.elementor .elementor-element.ss-trust:hover {
	transform: translateY(-2px);
	border-color: rgba(13, 148, 136, .35);
	box-shadow: var(--ss-shadow-sm);
}

.ss-trust .elementor-icon { color: inherit; }

@media (max-width: 767px) {
	.ss-trust-row { padding-top: 1.25rem !important; }
}

/* --------------------------------------------------------------------------
   Award cards.

   These are `image-box` widgets, not containers — the only core widget with an
   Object Fit control, which is what lets a portrait crystal obelisk and a wide
   wooden plaque share a row without either being cropped through its engraving.
   The photographs are shot on near-white, so the image sits in a tinted well;
   without it the trophies float on the white card with no visible edge.
   -------------------------------------------------------------------------- */
.ss-award .elementor-image-box-img {
	width: 100% !important;
	background: var(--ss-band);
	border: 1px solid var(--ss-line);
	border-radius: 12px;
	padding: 14px;
}

.ss-award .elementor-image-box-img img {
	width: 100%;
	mix-blend-mode: multiply; /* drops the photos' off-white backgrounds into the well */
}

.ss-award .elementor-image-box-description strong {
	display: block;
	color: var(--ss-teal-dark);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: .35rem;
}

/* --------------------------------------------------------------------------
   Certification cards.

   Cropped to the top of the certificate on purpose: the header — the issuing
   body's logo and the word CERTIFICATE — is the part a visitor recognises at
   thumbnail size, and it is consistent across all four documents where the
   body copy is not.
   -------------------------------------------------------------------------- */
.elementor .elementor-element.ss-cert__scan img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	object-position: top center;
	background: #fff;
	border: 1px solid var(--ss-line);
	border-radius: 12px;
}

.elementor .ss-certmeta .elementor-icon-list-item {
	padding: 0;
	border-top: 1px dashed var(--ss-line);
	padding-top: .4rem !important;
}

.elementor .ss-certmeta .elementor-icon-list-item:first-child {
	border-top: 0;
	padding-top: 0 !important;
}

.ss-certmeta .elementor-icon-list-text {
	font-size: .78rem;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

/* Pushes "View Certificate" to the foot of the card so the four buttons line
   up across a row whose cards have different amounts of scope text.
   `margin-top: auto` is safe here only because ss_btn() leaves the Advanced >
   Margin control unset — if it were set, Elementor's per-element rule would
   win and this would silently do nothing. */
.elementor .ss-cert .ss-cert__cta,
.elementor .ss-action .ss-action__cta {
	margin-top: auto;
}

/*
 * Long, unbroken button labels — email addresses, mainly — need to be able to
 * wrap. This is what broke the "Email Us" card on Contact/SOC/Support:
 * ss_action_card() sets the button LABEL to the actual address
 * ("info@securesolutions.co.in"), and that string has no space or hyphen
 * anywhere in it. With no break opportunity, `white-space: normal` still
 * cannot wrap it, so the anchor grew to fit the whole word and spilled past
 * the card's padding — it wasn't clipped, so nothing in devtools looked
 * "wrong" until you saw it rendered.
 *
 * `max-width: 100%` alone does not fix this: it caps the box, but the
 * unbreakable text inside still overflows that box rather than shrinking.
 * `overflow-wrap: anywhere` is what actually allows a mid-word break.
 */
.elementor .ss-action__cta .elementor-button,
.elementor .ss-cert__cta .elementor-button {
	max-width: 100%;
	white-space: normal;
}

.elementor .ss-action__cta .elementor-button-text,
.elementor .ss-cert__cta .elementor-button-text {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/*
 * Same unbreakable-word overflow, same fix, on the Support Centre row: its
 * bold value line is ticket@securesolutions.co.in for the email row, which
 * ran past the card's right edge (into, and behind, the next card) rather
 * than wrapping to a second line.
 */
.elementor .ss-support-row .elementor-icon-box-title {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* --------------------------------------------------------------------------
   Numbered cards — the 13 service commitments and the SOC process steps.
   The pill's fill comes from the accent class on the card, reusing the same
   soft tints as the icon plates.
   -------------------------------------------------------------------------- */
.ss-num .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding: .3rem .55rem;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
}

.ss-ib-blue.ss-numbered .ss-num .elementor-heading-title    { background: var(--ss-blue-soft); }
.ss-ib-teal.ss-numbered .ss-num .elementor-heading-title    { background: var(--ss-teal-soft); }
.ss-ib-purple.ss-numbered .ss-num .elementor-heading-title  { background: var(--ss-purple-soft); }
.ss-ib-emerald.ss-numbered .ss-num .elementor-heading-title { background: var(--ss-emerald-soft); }

/* --------------------------------------------------------------------------
   Industry tiles — icon over a label, nothing else.
   -------------------------------------------------------------------------- */
.ss-industry .elementor-widget-heading { width: 100%; }

.ss-industry .elementor-icon {
	transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.ss-industry:hover .elementor-icon {
	transform: translateY(-2px) scale(1.06);
}

/* --------------------------------------------------------------------------
   Case study cards — the Challenge / Solution / Result rows.
   -------------------------------------------------------------------------- */
.ss-case .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Journey timeline.

   A coloured rule across the top of each milestone, matching the accent of the
   year printed inside it. Deliberately not a connecting line through the row:
   the grid wraps to two rows on desktop and to one column on mobile, and a
   drawn connector breaks at every wrap.
   -------------------------------------------------------------------------- */
/* Anchored for the same reason as .ss-trust above — a bare class only ties
   Elementor's own border declarations on `.e-con` and loses the tie. */
.elementor .elementor-element.ss-mile {
	border-top-width: 3px;
	border-top-style: solid;
}

.elementor .elementor-element.ss-ib-blue.ss-mile    { border-top-color: var(--ss-blue); }
.elementor .elementor-element.ss-ib-teal.ss-mile    { border-top-color: var(--ss-teal); }
.elementor .elementor-element.ss-ib-purple.ss-mile  { border-top-color: var(--ss-purple); }
.elementor .elementor-element.ss-ib-emerald.ss-mile { border-top-color: var(--ss-emerald); }

/* --------------------------------------------------------------------------
   The CEO's letter.

   `::after`, never `::before` — Elementor owns `{{WRAPPER}}::before` for the
   Background Overlay control, and taking it would stop the client tuning the
   overlay from the editor.

   The gradient bar needs the card's OWN overflow:hidden to look curved, not
   its own border-radius. A 20px radius on a 4px-tall bar gets scaled down by
   the CSS spec's corner-radius rule (radii on one edge cannot exceed that
   edge's length) to roughly 4px — technically still rounded, but at 4px it
   reads as a flat, square-cornered line in practice, which is what looked
   "not curved". Clipping the bar to the card's actual 20px radius via
   `overflow: hidden` on the container instead makes the visible strip trace
   the card's real curvature, the same trick `.ss-tile` and `.ss-media-card`
   already use for a bled photo. `.ss-letter` carries `.glow-card`, whose
   shadow is `filter: drop-shadow()` rather than `box-shadow` for exactly this
   reason — it isn't clipped by overflow:hidden the way box-shadow would be.
   -------------------------------------------------------------------------- */
.elementor .elementor-element.ss-letter {
	overflow: hidden;
}

.ss-letter::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--ss-teal), var(--ss-blue), var(--ss-purple));
	pointer-events: none;
}

.ss-letter .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* The signature plate. Its 64/84px box is set through Elementor's own width and
   min-height controls (see ss_ceo_message); only the shape and fill are here.

   Anchored because `border-radius` is declared by Elementor on `.e-con` from an
   unset custom property, which a bare `.ss-avatar` only ties — and loses, since
   Elementor's stylesheet loads second. The plate rendered as a square without
   this. `flex-shrink: 0` matters too: without it the 64px box was squeezed to
   58px by the name sitting beside it.

   The fill is declared TWICE, and both are needed. Elementor's container
   background lazy-load injects, inline and with !important:

     .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded) ,
     .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded) *  { background-image: none !important }

   — which blanks background-IMAGES on every descendant of any top-level
   container from the fourth down, until its IntersectionObserver adds
   `.e-lazyloaded` on scroll. The CEO's letter is far below that cut-off, so the
   gradient alone left the plate transparent until the section scrolled into
   view. `background-color` is untouched by that rule, so it paints immediately
   and the gradient layers over it once the container lazy-loads. */
.elementor .elementor-element.ss-avatar {
	border-radius: 50%;
	background-color: var(--ss-teal);
	background-image: linear-gradient(135deg, var(--ss-teal), var(--ss-blue));
	flex: 0 0 auto;
	overflow: hidden;
}

.elementor .elementor-element.ss-avatar--lg {
	background-color: var(--ss-teal-dark);
	background-image: linear-gradient(135deg, var(--ss-teal-dark), var(--ss-purple));
}

.ss-sign { flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Events gallery.
   -------------------------------------------------------------------------- */
/* The photographs are one `image-gallery` widget (see ss_gallery_items() for
   why), so these target WordPress's gallery markup — figure.gallery-item —
   rather than individual Elementor image widgets. The uniform tile height is
   what stops a mix of portrait and landscape uploads producing a ragged grid;
   the client's real photos will not all share an aspect ratio. */
.elementor .ss-gallery .gallery-item {
	margin: 0 !important;
}

.elementor .ss-gallery .gallery-icon {
	overflow: hidden;
	border-radius: 14px;
	filter: drop-shadow(var(--ss-shadow-sm));
	transition: filter .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}

.elementor .ss-gallery .gallery-item:hover .gallery-icon {
	filter: drop-shadow(var(--ss-shadow));
	transform: translateY(-3px);
}

.elementor .ss-gallery .gallery-icon img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
	border: 0;
	transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.elementor .ss-gallery .gallery-item:hover .gallery-icon img { transform: scale(1.05); }

.elementor .ss-gallery .gallery-caption {
	margin: .6rem 0 0;
	color: var(--ss-muted);
	font-family: var(--ss-font-body);
	font-size: .8125rem;
	line-height: 1.5;
	text-align: left;
}

.elementor .elementor-element.ss-gallery__video { overflow: visible; }

@media (max-width: 767px) {
	.elementor .ss-gallery .gallery-icon img { height: 210px; }
}

/* --------------------------------------------------------------------------
   Google map on the contact page.
   -------------------------------------------------------------------------- */
.elementor .elementor-element.ss-map iframe {
	display: block;
	width: 100%;
	border: 1px solid var(--ss-line);
	border-radius: 16px;
}

/* --------------------------------------------------------------------------
   Floating WhatsApp button.

   Right corner, matching `.ss-to-top`'s own offsets and sizing exactly
   (48/52px, 1.25rem/2rem) but mirrored to the opposite side — `.ss-to-top`
   moved to the left specifically so the two no longer share one corner. The
   pill-with-label version this replaced doubled the horizontal footprint
   sitting in the bottom-right corner, which is part of what let it overlap
   the footer's copyright line on viewports without much side margin; the
   other part, `.ss-footer`'s reserved bottom clearance, still stays, because
   either corner can still land over that footer column's own text at the very
   bottom of a page regardless of how the two buttons are arranged.
   The accessible name moves to a visually-hidden span plus aria-label on the
   anchor, matching how `.ss-to-top` conveys its name with no visible text.
   -------------------------------------------------------------------------- */
.ss-whatsapp {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	/* Just under .ss-to-top's 600, so the two never fight if a narrow viewport
	   brings them closer than expected. */
	z-index: 595;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 9999px;
	background: #25d366;
	color: #06331a;
	box-shadow: 0 10px 26px rgba(37, 211, 102, .38);
	transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, background .3s ease;
}

.ss-whatsapp:hover,
.ss-whatsapp:focus-visible {
	background: #1fb855;
	color: #06331a;
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(37, 211, 102, .46);
}

.ss-whatsapp:focus-visible {
	outline: 2px solid var(--ss-ink);
	outline-offset: 3px;
}

.ss-whatsapp svg { display: block; flex: 0 0 auto; }

@media (min-width: 640px) {
	.ss-whatsapp {
		right: 2rem;
		bottom: 2rem;
		width: 52px;
		height: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ss-whatsapp,
	.ss-whatsapp:hover { transition: none; transform: none; }
}

@media print {
	.ss-whatsapp { display: none; }
}

/* Screen-reader helper */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}