/* Presentation for marker-driven Elementor HTML widgets. */
[data-sourcewhale-feature][hidden] {
	display: none !important;
}

/*
 * Shared orb: Elementor centres the widget with translateX(-50%) and caps it
 * at 35% of its container. Match that box to the animation's 200px native size
 * so it stays centred on desktop, then scale the inline-sized Lottie on mobile.
 */
.elementor-widget-html:has(.lottie-auto[data-src*="/SW-Logo-V2-orb.json"]) {
	width: 200px !important;
	max-width: 35% !important;
}

.lottie-auto[data-src*="/SW-Logo-V2-orb.json"] {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1;
}

.lottie-auto[data-src*="/SW-Logo-V2-orb.json"] > svg {
	display: block;
}

@font-face {
	font-family: "FontAwesome7Pro";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/FontAwesome7Pro-Solid-900.otf") format("opentype");
}

.fa-sparkles::before { content: "\f890"; }
.fa-bars-staggered::before,
.fa-reorder::before,
.fa-stream::before { content: "\f550"; }
.fa-bars-progress::before,
.fa-tasks-alt::before { content: "\f828"; }
.fa-user-vneck::before { content: "\e461"; }
.fa-trophy::before { content: "\f091"; }
.fa-eye::before { content: "\f06e"; }
.fa-info-circle::before { content: "\f05a"; }
.fa-paint-roller::before { content: "\f5aa"; }
.fa-robot::before { content: "\f544"; }
.fa-bell::before { content: "\f0f3"; }
.fa-handshake::before { content: "\f2b5"; }
.fa-heart::before { content: "\f004"; }
.fa-shuffle::before { content: "\f074"; }

.content-with-icons p {
	display: flex;
}

.content-with-icons i.fa {
	display: inline-block;
	min-width: 15px;
	margin-right: 8px;
	font-family: "FontAwesome7Pro";
	font-size: 13px;
	font-style: normal;
	font-weight: 900;
	line-height: 23px;
}

.case-study-cards-nav {
	display: flex;
	gap: 16px;
}

.case-study-cards-nav--next,
.case-study-cards-nav--prev {
	padding: 12px;
	border: var(--sw-border-quiet);
	border-radius: var(--sw-radius-control);
	background: var(--sw-color-surface-muted);
	cursor: pointer;
	line-height: 1px;
}

.case-study-cards-nav--next.active,
.case-study-cards-nav--prev.active {
	background: var(--sw-color-white);
}

.case-study-cards-nav--next.active svg path,
.case-study-cards-nav--prev.active svg path {
	fill: var(--sw-color-navy);
}

.case-study-cards-nav--next:focus-visible,
.case-study-cards-nav--prev:focus-visible {
	outline: var(--sw-focus-ring);
	outline-offset: var(--sw-focus-offset);
}

svg#chart {
	max-width: 100%;
	height: auto;
	overflow: visible;
}

svg#chart #tooltip {
	font-family: var(--e-global-typography-c22d283-font-family, var(--sw-font-body));
	font-size: var(--e-global-typography-c22d283-font-size, 17px);
	font-weight: var(--e-global-typography-c22d283-font-weight, 600);
	letter-spacing: var(--e-global-typography-c22d283-letter-spacing, 0.17px);
	line-height: var(--e-global-typography-c22d283-line-height, 24px);
}

/*
 * Reusable status pulse for Elementor HTML widgets.
 *
 * The legacy widget CSS animated box-shadow, which repainted its parent on
 * every frame. Keep the same visual treatment on a tiny pseudo-element using
 * compositor-friendly transform and opacity instead.
 */
.pulse {
	--pulseSize: 7px;
	--red: #cf1f00;
	display: block;
	width: var(--pulseSize);
	height: var(--pulseSize);
	flex: 0 0 var(--pulseSize);
	position: relative;
	isolation: isolate;
	border-radius: 50%;
	background: var(--red);
	box-shadow: none;
	animation: none;
	transition: none;
}

.pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: var(--red, #cf1f00);
	pointer-events: none;
	transform: scale(1);
	transform-origin: center;
	animation: sourcewhale-status-pulse 2s ease-out infinite;
	will-change: transform, opacity;
}

@keyframes sourcewhale-status-pulse {
	0% {
		opacity: 0.65;
		transform: scale(1);
	}

	70%,
	100% {
		opacity: 0;
		transform: scale(3);
	}
}

.video-container {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.video-container video {
	display: block;
	width: 100%;
	height: auto;
}

.custom-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
}

.custom-play-btn.hidden {
	display: none;
}

#emailTooltip:not([hidden]),
#emailTooltip_1:not([hidden]),
#emailTooltip_2:not([hidden]) {
	display: block;
}

.navattic-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 30px;
	border: 0;
	border-radius: var(--sw-radius-control);
	background: var(--sw-color-pink);
	color: var(--sw-color-white);
	font-family: var(--e-global-typography-484df4c-font-family, var(--sw-font-body));
	font-size: var(--e-global-typography-484df4c-font-size, 16px);
	font-weight: var(--e-global-typography-484df4c-font-weight, 500);
	letter-spacing: var(--e-global-typography-484df4c-letter-spacing, 0.16px);
	line-height: var(--e-global-typography-484df4c-line-height, 24px);
	text-decoration: none;
}

.navattic-btn:hover,
.navattic-btn:focus-visible {
	background: var(--sw-color-pink-hover);
	color: var(--sw-color-white);
}

@media (min-width: 1025px) {
	/* Keep Elementor's released final panel inside the slider without creating a scroll container. */
	.sourcewhale-sticky-panels,
	.sourcewhale-sticky-panels__last-visual {
		overflow: clip;
	}

	/*
	 * Opacity crossfade for stacked sticky images (Home, Sourcing, CRM, …).
	 *
	 * Drive fades from --active via :has(), not --effects. Elementor's effects
	 * offset can fire after the next panel is already active (especially when
	 * JS rewrites sticky_effects_offset), which leaves two images visible.
	 * Matching homepage behaviour: only one panel opaque at a time.
	 */
	.first-screen,
	.middle-screen,
	.last-screen {
		pointer-events: none;
		transition: opacity 0.25s ease-out;
	}

	.first-screen {
		opacity: 1 !important;
	}

	.middle-screen,
	.last-screen {
		opacity: 0 !important;
	}

	.middle-screen.elementor-sticky--active,
	.last-screen.elementor-sticky--active {
		opacity: 1 !important;
	}

	/* Hide earlier panels as soon as the next one sticks. */
	body:has(.middle-screen.elementor-sticky--active) .first-screen,
	body:has(.last-screen.elementor-sticky--active) .first-screen,
	body:has(.last-screen.elementor-sticky--active) .middle-screen {
		opacity: 0 !important;
	}

	/* Fixed sticky elements escape ancestor overflow in some browsers. Clip each
	 * panel directly as the bottom of the feature section passes underneath it. */
	.first-screen,
	.middle-screen,
	.last-screen {
		clip-path: inset(0 0 var(--sourcewhale-sticky-clip-bottom, 0px) 0);
	}
}

@media (max-width: 1024px) {
	/* Neutralise desktop sticky styles immediately when the viewport crosses Elementor's breakpoint. */
	.first-screen,
	.middle-screen,
	.last-screen {
		position: relative !important;
		inset: auto !important;
		width: 100% !important;
		margin: 0 !important;
		opacity: 1 !important;
		transition: none !important;
	}

	.elementor-sticky__spacer.first-screen,
	.elementor-sticky__spacer.middle-screen,
	.elementor-sticky__spacer.last-screen {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.first-screen,
	.middle-screen,
	.last-screen {
		transition: none;
	}

	.pulse::after {
		animation: none;
		opacity: 0;
	}
}

/* Sourcing — footer colour overrides */
body.page-id-5196 footer.elementor-15 .elementor-element.elementor-element-569192ba::before,
body.page-id-5196 footer.elementor-15 .elementor-element.elementor-element-3b1ce3ff:not(.elementor-motion-effects-element-type-background),
body.page-id-5196 footer.elementor-15 .elementor-element.elementor-element-35ac5da:not(.elementor-motion-effects-element-type-background) {
	background: var(--sw-color-navy);
}