/* ══════════════════════════════════════════════════════════════════
	   BRAND GRADIENT — single source of truth
	   Defined once as a CSS custom property so every gradient class
	   (sf-word-gradient, sf-gradient-text, etc.) draws from one value.
	   Changing this variable updates ALL gradient text site-wide.
	   ══════════════════════════════════════════════════════════════════ */
	:root {
		--sf-brand-gradient: linear-gradient(90deg, #0F528C 0%, #76B900 35%, #FFEE32 70%, #FF3B30 100%);
	}

	/* ── Reusable gradient text — mid-word safe (no trailing padding) ── */
	/* Used for "Eco" in "Ecostructure" and any other inline gradient word. */
	/* Identical visually to .sf-word-gradient; the only difference is     */
	/* padding-right is omitted so adjacent letters sit flush.             */
	.sf-gradient-text {
		background:                var(--sf-brand-gradient);
		-webkit-background-clip:   text;
		-webkit-text-fill-color:   transparent;
		background-clip:           text;
		display:                   inline;
		line-height:               inherit;
		/* Prevent Safari clipping the bottom stroke on descenders */
		padding-bottom:            0.05em;
	}

	/* ── Only the word "ecosystem" gets the script font — rest stays standard ── */
	.sf-script-word {
		font-family: 'Dancing Script', cursive !important;
		font-weight: 700 !important;
		font-size: 1.12em !important;
		letter-spacing: -0.01em !important;
		line-height: inherit !important;
		display: inline !important;
	}

	/* ── EcoSystem nav item — "Eco" prefix, solid colour (multicolour gradient removed) ── */
	.sf-eco-green {
		background: none !important;
		-webkit-background-clip: border-box !important;
		background-clip: border-box !important;
		-webkit-text-fill-color: currentColor !important;
		color: inherit !important;
	}

	/* ═══════════════════════════════════════════════════════════════════
	   PROTECT OUR PLANET SECTION — scoped legibility fix

	   The planet section uses the SAME Elementor template as other
	   carousel slides (e.g. "Ethics.Values"). Element IDs are shared.
	   Using :has(.sf-grad-forest) scopes rules ONLY to the slide that
	   contains the forest-gradient word — no other slide is affected.
	   ═══════════════════════════════════════════════════════════════════ */

	/* Scope: only the container that holds a .sf-grad-forest span.
	   "Planet." has sf-grad-forest applied. "Ethics.Values" does not.
	   This makes the rule self-contained and slide-aware.              */

	/* All headings inside the forest slide — white, single clean shadow */
	.elementor-element-46e983c:has(.sf-grad-forest) .elementor-heading-title {
		color: #ffffff !important;
		text-shadow: 0 2px 20px rgba(0,0,0,0.70) !important;
	}

	/* Body paragraph inside forest slide — white, NO shadow
	   Text-shadow on body copy never looks right: it degrades legibility
	   and introduces visual noise. White text + image contrast is enough. */
	.elementor-element-46e983c:has(.sf-grad-forest) .elementor-widget-text-editor p,
	.elementor-element-46e983c:has(.sf-grad-forest) p {
		color: rgba(255,255,255,0.88) !important;
		text-shadow: none !important;
		max-width: 600px !important;
		margin: 0 auto !important;
	}

	/* Centre-align the inner content block */
	.elementor-element-46e983c {
		text-align: center !important;
	}

	/* Button — Apple-style ghost pill on image background */
	.elementor-element-46e983c:has(.sf-grad-forest) .elementor-button,
	.elementor-element-46e983c:has(.sf-grad-forest) a.elementor-button {
		background:    rgba(255,255,255,0.16) !important;
		color:         #ffffff !important;
		border:        1.5px solid rgba(255,255,255,0.45) !important;
		border-radius: 980px !important;
		padding:       12px 26px !important;
		font-size:     15px !important;
		font-weight:   500 !important;
		letter-spacing: -0.01em !important;
		box-shadow:    none !important;
		text-shadow:   none !important;
		backdrop-filter: blur(6px) !important;
		-webkit-backdrop-filter: blur(6px) !important;
		transition:    background 0.2s ease, border-color 0.2s ease !important;
	}
	.elementor-element-46e983c:has(.sf-grad-forest) .elementor-button:hover,
	.elementor-element-46e983c:has(.sf-grad-forest) a.elementor-button:hover {
		background:   rgba(255,255,255,0.26) !important;
		border-color: rgba(255,255,255,0.65) !important;
	}

	/* ── "Companies" gradient — ecosystem editorial style ── */
	.sf-grad-companies {
		background-image: linear-gradient(90deg, #0071E3 0%, #76B900 35%, #FFC700 70%, #FF3B30 100%) !important;
		-webkit-background-clip: text !important;
		background-clip: text !important;
		-webkit-text-fill-color: transparent !important;
		display: inline !important;
	}

	/* ── Apple-style scroll reveal ── */
	/* Elements start invisible and slide up slightly */
	.sf-reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.72s cubic-bezier(0.4, 0, 0.2, 1),
		            transform 0.72s cubic-bezier(0.4, 0, 0.2, 1);
		will-change: opacity, transform;
	}
	.sf-reveal.sf-visible {
		opacity: 1;
		transform: translateY(0);
	}
	/* Staggered children — each sibling delays by 80ms */
	.sf-reveal-stagger > * {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
		            transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
		will-change: opacity, transform;
	}
	.sf-reveal-stagger.sf-visible > *:nth-child(1)  { transition-delay: 0ms;   }
	.sf-reveal-stagger.sf-visible > *:nth-child(2)  { transition-delay: 80ms;  }
	.sf-reveal-stagger.sf-visible > *:nth-child(3)  { transition-delay: 160ms; }
	.sf-reveal-stagger.sf-visible > *:nth-child(4)  { transition-delay: 240ms; }
	.sf-reveal-stagger.sf-visible > *:nth-child(5)  { transition-delay: 320ms; }
	.sf-reveal-stagger.sf-visible > *:nth-child(6)  { transition-delay: 400ms; }
	.sf-reveal-stagger.sf-visible > * {
		opacity: 1;
		transform: translateY(0);
	}
	/* Respect reduced-motion preference */
	@media (prefers-reduced-motion: reduce) {
		.sf-reveal, .sf-reveal-stagger > * {
			opacity: 1 !important;
			transform: none !important;
			transition: none !important;
		}
	}