/* ==========================================================================
   Smart Shield — artistic layer ("flowing waves"), inspired by the business cards:
   swooping blue→cyan shapes, white/blue dot grids, wave section edges,
   glass panels and slowly moving gradients.
   Purely decorative: delete this file's entry in functions.php to switch it off.
   ========================================================================== */

:root {
	/* Big swoosh (blue→cyan with a lavender back layer), like the card corners */
	--ss-art-swoosh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 420'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232f5bff'/%3E%3Cstop offset='1' stop-color='%2312c2e9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M90 0h510v360c-70 70-190 70-270 10S190 250 130 170 40 40 90 0z' fill='%23b9c6ff' opacity='.55'/%3E%3Cpath d='M170 0h430v290c-60 55-160 55-225 5S250 190 205 125 140 30 170 0z' fill='url(%23g)'/%3E%3Cpath d='M470 330c40-30 90-25 110 10s-10 70-50 70-90-50-60-80z' fill='%2312c2e9' opacity='.9'/%3E%3C/svg%3E");
	/* Dot grid like the card's white dots */
	--ss-art-dots-blue: radial-gradient(circle, rgba(31, 111, 229, .35) 2.2px, transparent 2.8px) 0 0 / 20px 20px;
	--ss-art-dots-white: radial-gradient(circle, rgba(255, 255, 255, .7) 2.2px, transparent 2.8px) 0 0 / 20px 20px;
	/* Flowing line waves (white strokes) for dark/blue panels */
	--ss-art-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M0 300C200 200 400 380 600 280S1000 120 1200 200' opacity='.22'/%3E%3Cpath d='M0 330C220 240 420 400 640 300S1010 160 1200 240' opacity='.14'/%3E%3Cpath d='M0 270C180 170 380 350 580 250S990 90 1200 160' opacity='.1'/%3E%3C/svg%3E");
	/* Wave edges between sections */
	--ss-art-wave-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v38c-180 40-360 52-560 22S460 0 260 22 60 70 0 52z' fill='white'/%3E%3C/svg%3E");
	--ss-art-wave-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90h1440V40c-200-30-380-30-600 8S420 82 220 60 40 30 0 44z' fill='white'/%3E%3C/svg%3E");
	--ss-art-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%232f5bff'/%3E%3Cstop offset='1' stop-color='%2312c2e9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 7c10-8 20-8 29 0s19 8 29 0 19-8 29 0 19 8 29 0' stroke='url(%23s)' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Sections become stacking contexts so decorations sit behind content */
.ss-section, .ss-hero-wrap { position: relative; isolation: isolate; overflow-x: clip; }
html, body { overflow-x: clip; } /* decorations never cause sideways scrolling */
.ss-trust, .ss-services, .ss-contact-section, .ss-soft { overflow: hidden; }

/* ---------- Hero: swoosh peeking out behind the frame + light waves inside ---------- */
.ss-hero-wrap::before {
	content: "";
	position: absolute; z-index: -1;
	right: max(-140px, calc((100vw - 1280px) / 2 - 220px));
	top: -30px;
	width: 520px; height: 364px;
	background: var(--ss-art-swoosh) right top / contain no-repeat;
	pointer-events: none;
}
.ss-hero-wrap::after {
	content: "";
	position: absolute; z-index: -1;
	left: max(8px, calc((100vw - 1280px) / 2 - 60px));
	bottom: -40px;
	width: 120px; height: 80px;
	background: var(--ss-art-dots-blue);
	pointer-events: none;
}
.ss-hero { z-index: 1; }
.ss-hero::after {
	content: "";
	position: absolute; inset: auto 0 0 0; z-index: -1;
	height: 55%;
	background: var(--ss-art-lines) center bottom / 100% 100% no-repeat;
	pointer-events: none;
	animation: ss-art-drift 14s ease-in-out infinite alternate;
}

/* ---------- Big swooshes and dot grids on light sections ---------- */
.ss-trust::before,
.ss-services::before,
.ss-contact-section::before {
	content: "";
	position: absolute; z-index: -1;
	width: 460px; height: 322px;
	background: var(--ss-art-swoosh) center / contain no-repeat;
	pointer-events: none;
	opacity: .95;
}
.ss-trust::before { right: -170px; top: -60px; }
.ss-services::before { left: -190px; bottom: -40px; transform: rotate(180deg); }
.ss-contact-section::before { right: -180px; bottom: -70px; transform: scaleY(-1); }

.ss-trust::after,
.ss-services::after,
.ss-contact-section::after {
	content: "";
	position: absolute; z-index: -1;
	width: 120px; height: 80px;
	background: var(--ss-art-dots-blue);
	pointer-events: none;
}
.ss-trust::after { left: 4%; top: 70px; }
.ss-services::after { right: 5%; top: 90px; }
.ss-contact-section::after { left: 6%; bottom: 60px; }

/* ---------- Soft (light blue) sections get wavy top and bottom edges ---------- */
.ss-soft {
	background:
		radial-gradient(60% 50% at 100% 0%, rgba(18, 194, 233, .12), transparent 70%),
		radial-gradient(50% 50% at 0% 100%, rgba(47, 91, 255, .10), transparent 70%),
		var(--ss-mist);
}
.ss-soft::before,
.ss-soft::after {
	content: "";
	position: absolute; left: 0; right: 0; z-index: -1;
	height: clamp(36px, 6vw, 80px);
	pointer-events: none;
}
.ss-soft::before { top: -1px; background: var(--ss-art-wave-top) center top / 100% 100% no-repeat; }
.ss-soft::after { bottom: -1px; background: var(--ss-art-wave-bottom) center bottom / 100% 100% no-repeat; }

/* ---------- Wavy underline under centred section headings ---------- */
.ss-section > h2.has-text-align-center::after {
	content: "";
	display: block;
	width: 120px; height: 14px;
	margin: 14px auto 0;
	background: var(--ss-art-squiggle) center / contain no-repeat;
}

/* ---------- Glass cards over the shapes ---------- */
.ss-card, .ss-benefit, .ss-contact-card, .ss-step {
	background-color: rgba(255, 255, 255, .82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.ss-step { background-color: rgba(244, 248, 253, .85); }

/* ---------- Moving gradients on blue panels ---------- */
.ss-ticker, .ss-cta, .ss-tile-blue {
	background-size: 200% 200% !important;
	animation: ss-art-gradient 12s ease-in-out infinite alternate;
}
.ss-ticker { background-image: linear-gradient(110deg, #2f5bff 0%, #1f8ff0 35%, #12c2e9 60%, #2f5bff 100%); }
.ss-cta { background-image: linear-gradient(120deg, #2f5bff 0%, #1f8ff0 40%, #12c2e9 70%, #2f5bff 100%); }

/* Flowing lines + dots inside the blue quote panel and the dark remote panel */
.ss-cta::after,
.ss-dark::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: var(--ss-art-lines) center bottom / 100% 70% no-repeat;
	pointer-events: none;
}
.ss-cta > .wp-block-column:first-child { position: relative; }
.ss-cta > .wp-block-column:first-child::before {
	content: "";
	position: absolute; right: 0; top: 0;
	width: 100px; height: 60px;
	background: var(--ss-art-dots-white);
	opacity: .55;
	pointer-events: none;
}

/* AI assistant band: soft gradient border */
.ss-assistant {
	border: 1px solid transparent;
	background:
		linear-gradient(120deg, #eef4ff 0%, #e6f8fd 100%) padding-box,
		linear-gradient(120deg, rgba(47, 91, 255, .45), rgba(18, 194, 233, .45)) border-box;
}

/* ---------- Footer: wavy top edge instead of a straight one ---------- */
.ss-footer { border-radius: 0 !important; }
.wp-site-blocks > footer.wp-block-template-part { position: relative; margin-top: clamp(40px, 6vw, 80px) !important; }
.wp-site-blocks > footer.wp-block-template-part::before {
	content: "";
	position: absolute; left: 0; right: 0;
	top: calc(-1 * clamp(40px, 6vw, 80px) + 1px);
	height: clamp(40px, 6vw, 80px);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90h1440V30c-220 40-420 50-640 14S380-6 200 20 40 70 0 58z' fill='%230b1f3a'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
	pointer-events: none;
}
.ss-footer::after {
	content: "";
	position: absolute; left: 4%; bottom: 80px;
	width: 120px; height: 80px;
	background: var(--ss-art-dots-white);
	opacity: .12;
	pointer-events: none;
}

/* ---------- Motion ---------- */
@keyframes ss-art-gradient {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}
@keyframes ss-art-drift {
	0% { transform: translateX(0); }
	100% { transform: translateX(-3%); }
}

/* ---------- Smaller screens: lighter decoration ---------- */
@media (max-width: 781px) {
	.ss-hero-wrap::before { width: 260px; height: 182px; right: -90px; top: -10px; }
	.ss-trust::before, .ss-services::before, .ss-contact-section::before { width: 260px; height: 182px; }
	.ss-trust::before { right: -120px; top: -40px; }
	.ss-services::before { left: -130px; }
	.ss-contact-section::before { right: -120px; }
	.ss-trust::after, .ss-services::after, .ss-contact-section::after, .ss-hero-wrap::after { width: 80px; height: 60px; }
}

/* Footer button stays on one line */
.ss-footer .wp-block-button__link { white-space: nowrap; }

/* ==========================================================================
   "Talk to Us" buttons: bigger + pulsing glow so visitors notice them right away
   ========================================================================== */
.ss-talk .wp-block-button__link {
	position: relative;
	font-size: 1.08rem;
	font-weight: 800;
	padding: 1em 1.8em;
	min-height: 54px;
	animation: ss-talk-pulse 1.8s ease-out infinite;
}
.ss-talk .wp-block-button__link::before { width: 22px !important; height: 22px !important; }
.ss-talk .wp-block-button__link:hover { animation-play-state: paused; }

/* Menu version: navy pill so it stands out next to the blue quote button */
.ss-header-actions .ss-talk .wp-block-button__link {
	background: var(--ss-navy);
	color: #fff;
	font-size: 1rem;
	padding: .85em 1.5em;
	min-height: 50px;
}
.ss-header-actions .ss-talk .wp-block-button__link:hover { background: #12305a; color: #fff; }

/* Card inside the hero: slightly larger card button */
.ss-hero-talk .ss-talk .wp-block-button__link { font-size: 1.02rem; padding: .85em 1.6em; min-height: 50px; }

@keyframes ss-talk-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(18, 194, 233, .75), 0 8px 22px rgba(11, 31, 58, .18); transform: scale(1); }
	50%  { transform: scale(1.04); }
	70%  { box-shadow: 0 0 0 16px rgba(18, 194, 233, 0), 0 8px 22px rgba(11, 31, 58, .18); }
	100% { box-shadow: 0 0 0 0 rgba(18, 194, 233, 0), 0 8px 22px rgba(11, 31, 58, .18); transform: scale(1); }
}

@media (max-width: 900px) {
	/* Phone menu: bigger round microphone button, still pulsing */
	.ss-header-actions .ss-talk .wp-block-button__link { width: 52px; min-height: 52px; height: 52px; padding: 0; font-size: 0; }
	.ss-header-actions .ss-talk .wp-block-button__link::before { width: 24px !important; height: 24px !important; }
}

/* Visitors who turned off animations still get an eye-catching (still) glow */
@media (prefers-reduced-motion: reduce) {
	.ss-talk .wp-block-button__link {
		box-shadow: 0 0 0 4px rgba(18, 194, 233, .55), 0 0 22px 4px rgba(18, 194, 233, .55), 0 8px 22px rgba(11, 31, 58, .18) !important;
	}
}

/* ==========================================================================
   Modern buttons: gradient sheen sweep, arrow nudge, softer depth
   ========================================================================== */
.ss-section .wp-block-button__link,
.ss-hero .wp-block-button__link,
.ss-header .wp-block-button__link,
.ss-footer .wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: 16px;
	letter-spacing: .01em;
}
/* light sheen that sweeps across on hover */
.ss-btn-quote .wp-block-button__link::after,
.ss-btn-whatsapp .wp-block-button__link::after,
.ss-btn-light .wp-block-button__link::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .7s ease;
}
.ss-btn-quote .wp-block-button__link:hover::after,
.ss-btn-whatsapp .wp-block-button__link:hover::after,
.ss-btn-light .wp-block-button__link:hover::after { transform: translateX(120%); }
/* arrow on primary buttons */
.ss-btn-quote .wp-block-button__link::before {
	content: "→";
	order: 2;
	font-weight: 800;
	transition: transform .25s ease;
}
.ss-btn-quote .wp-block-button__link:hover::before { transform: translateX(4px); }
.ss-header .ss-btn-quote .wp-block-button__link::before { content: none; }
.ss-btn-glass .wp-block-button__link { border-radius: 16px; }

/* WhatsApp buttons inside the page */
.ss-btn-whatsapp .wp-block-button__link {
	background: #25d366;
	color: #fff;
	box-shadow: 0 10px 26px rgba(18, 140, 70, .28);
}
.ss-btn-whatsapp .wp-block-button__link:hover { background: #1ebe5a; color: #fff; }

/* ==========================================================================
   Services page
   ========================================================================== */
.ss-hero.ss-hero-sm { min-height: clamp(420px, 60vh, 560px); }
.ss-chips-wrap { padding-block: 28px 8px; }
.ss-chips { gap: 10px !important; }
.ss-chips .wp-block-button__link {
	background: #fff;
	color: var(--ss-navy);
	border: 1px solid var(--ss-line);
	border-radius: 999px;
	padding: .6em 1.1em .6em .8em;
	font-size: .92rem;
	font-weight: 700;
	min-height: 44px;
	box-shadow: 0 4px 14px rgba(11, 31, 58, .06);
}
.ss-chips .wp-block-button__link::before {
	content: "";
	width: 18px; height: 18px;
	background: var(--ss-blue);
	-webkit-mask: var(--ss-ico) center / contain no-repeat;
	mask: var(--ss-ico) center / contain no-repeat;
}
.ss-chips .wp-block-button__link:hover { background: var(--ss-sky); color: var(--ss-navy); }

.ss-service-title { display: flex; align-items: center; gap: 14px; }
.ss-service-title::before {
	content: "";
	flex: none;
	width: 52px; height: 52px; border-radius: 16px;
	background: var(--ss-ico) center / 26px no-repeat, var(--ss-grad);
	-webkit-mask: none;
}
/* white glyph on gradient tile: two-layer trick */
.ss-service-title::before {
	background: var(--ss-grad);
	box-shadow: 0 10px 24px rgba(47, 91, 255, .28);
}
.ss-service-title { position: relative; padding-left: 0; }
.ss-service-title::after {
	content: "";
	position: absolute; left: 13px; top: 50%; translate: 0 -50%;
	width: 26px; height: 26px;
	background: #fff;
	-webkit-mask: var(--ss-ico) center / contain no-repeat;
	mask: var(--ss-ico) center / contain no-repeat;
}
.ss-includes-label { font-weight: 800; color: var(--ss-navy); margin-bottom: 0 !important; }
.ss-goodfor { color: var(--ss-slate); font-size: .95rem; }

/* ==========================================================================
   Kijell Jackson contact card
   ========================================================================== */
.ss-manager {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 18px 28px;
	margin-top: 40px !important;
	padding: clamp(20px, 3vw, 32px);
	border-radius: 28px;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(120deg, rgba(47, 91, 255, .5), rgba(18, 194, 233, .5)) border-box;
	border: 1.5px solid transparent;
	box-shadow: var(--ss-shadow-lg);
}
.ss-manager > * { margin: 0 !important; }
.ss-manager-avatar {
	width: 84px; height: 84px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--ss-grad);
	color: #fff;
	font-size: 1.7rem !important;
	font-weight: 800;
	letter-spacing: .02em;
	box-shadow: 0 0 0 6px var(--ss-sky);
}
.ss-manager-text h3 { font-size: 1.6rem !important; margin: .1em 0 .2em !important; }
.ss-manager-text p:last-child { margin: 0 !important; color: var(--ss-slate); }
.ss-manager-text a { font-weight: 700; text-decoration: none; }
.ss-manager-actions { gap: 10px !important; }
.ss-manager-section { padding-block: clamp(40px, 6vw, 80px) 0 !important; }
@media (max-width: 900px) {
	.ss-manager { grid-template-columns: auto 1fr; }
	.ss-manager-actions { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.ss-manager { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.ss-manager-actions { justify-content: center; }
	.ss-manager-actions .wp-block-button, .ss-manager-actions .wp-block-button__link { width: 100%; justify-content: center; }
}

/* Phones: calmer heading sizes */
@media (max-width: 600px) {
	.ss-hero h1 { font-size: 2.2rem !important; }
	.ss-section h2 { font-size: 1.75rem !important; }
	.ss-intro, .ss-lead { font-size: 1rem !important; }
}