/* ── Hide Elementor on frontend (editor preserved) ── */
	body:not(.elementor-editor-active) .elementor-24324 { display: none !important; }
	body:not(.elementor-editor-active) main.site-main,
	body:not(.elementor-editor-active) .page-content   { min-height: 0 !important; }

	/* ── Custom Properties ── */
	#sf-page-sections {
		--blue:         #0071E3;   /* UI blue — buttons, links, borders */
		--synergy-blue: #0F528C;   /* Salient Synergy® corporate blue */
		--green:        #76B900;   /* Salient Sense® corporate green */
		--red:          #FF3B30;   /* Salient Vision® red */
		--yellow:       #FFEE32;   /* Salient Fusion® primary yellow */
		--yellow-hover: #D9CA2B;   /* Salient Fusion® supporting yellow */
		--amber:        #b05c00;
		--dark:    #1d1d1f;
		--mid:     #3d3d3f;
		--subtle:  #6e6e73;
		--border:  rgba(0,0,0,0.07);
		--white:   #ffffff;
		--off:     #f5f5f7;

		/* Typography scale */
		--t-hero:   clamp(40px, 5.8vw, 68px);
		--t-h2:     clamp(28px, 3.4vw, 44px);
		--t-h3:     clamp(18px, 2vw, 22px);
		--t-body-l: clamp(16px, 1.5vw, 19px);
		--t-body:   clamp(14px, 1.3vw, 16px);
		--t-label:  11px;

		/* Spacing */
		--sp:      clamp(72px, 10vw, 120px);
		--pad:     clamp(20px, 4vw, 52px);
		--gap:     clamp(16px, 2vw, 28px);
		--hdr-mb:  clamp(44px, 5.5vw, 72px);
	}

	/* ── Base ── */
	#sf-page-sections { display: block; width: 100%; }
	.sf-ps-section   { padding-top: var(--sp); padding-bottom: var(--sp); }
	.sf-ps-white     { background: var(--white); }
	.sf-ps-grey      { background: var(--off); }
	.sf-ps-dark      { background: var(--dark); }
	.sf-ps-inner     { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); width: 100%; box-sizing: border-box; }

	/* ── Gradient text fallback — ensures legibility if background-clip unsupported ── */
	/* color is shown in browsers without -webkit-text-fill-color (rare); gradient wins otherwise */
	.sf-word-gradient { color: var(--dark); }
	.sf-gradient-text  { color: var(--dark); }

	/* ── Typography ── */
	.sf-eyebrow {
		display: block; font-size: var(--t-label) !important; font-weight: 600 !important;
		letter-spacing: 0.12em !important; text-transform: uppercase !important;
		/* Gradient accent — replaces flat blue for premium feel */
		background: var(--sf-brand-gradient) !important;
		-webkit-background-clip: text !important;
		-webkit-text-fill-color: transparent !important;
		background-clip: text !important;
		color: #D9CA2B !important;  /* fallback — Fusion supporting yellow */
		margin-bottom: 16px;
	}
	.sf-h1 {
		font-family: Inter, -apple-system, 'system-ui', 'Segoe UI', sans-serif !important;
		font-size: var(--t-hero) !important; font-weight: 600 !important; letter-spacing: -0.040em !important;
		line-height: 1.06 !important; color: var(--dark) !important; margin: 0 0 24px; max-width: 860px;
	}
	.sf-h2 {
		font-size: var(--t-h2) !important; font-weight: 600 !important; letter-spacing: -0.030em !important;
		line-height: 1.10 !important; color: var(--dark) !important; margin: 0 0 18px; max-width: 760px;
	}
	.sf-ps-dark .sf-h2 { color: #f5f5f7 !important; }
	.sf-lead {
		/* Apple-style lead paragraph: sits under hero/section H1/H2,
		   visually larger than body copy, still semantically a <p>. */
		font-size: clamp(19px, 1.6vw, 22px) !important;
		line-height: 1.47 !important;
		font-weight: 400 !important;
		letter-spacing: -0.003em !important;
		color: #4b4b4f !important;
		max-width: 660px; margin: 0;
	}
	.sf-ps-dark .sf-lead { color: rgba(255,255,255,0.65); }
	.sf-body {
		font-size: var(--t-body); line-height: 1.70; color: var(--subtle); margin: 0;
	}
	.sf-word-blue   { color: var(--blue); }
	.sf-word-red    { color: var(--red); }
	.sf-word-green  { color: var(--green); }
	.sf-word-yellow { color: var(--yellow); }
	.sf-word-gradient {
		background:              var(--sf-brand-gradient);  /* single source — defined in sf-ecosystem-font */
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip:         text;
		display:                 inline;
		padding-bottom:          0.18em;
		padding-right:           0.06em;   /* prevents right-edge clip on standalone words */
		line-height:             inherit;
	}
	.sf-word-gradient-green {
		background: linear-gradient(90deg, #5A9200 0%, #76B900 55%, #99F002 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		display: inline;
		padding-bottom: 0.18em;
		padding-right: 0.06em;
		line-height: inherit;
	}
	.sf-word-gradient-light {
		background: linear-gradient(90deg, #0F528C 0%, #76B900 45%, #FFEE32 80%, #FF3B30 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		display: inline;
		padding-bottom: 0.18em;
		padding-right: 0.06em;
		line-height: inherit;
	}

	/* ── Full ecosystem gradient heading — for h2/h3 spanning full width ── */
	/* Use only when messaging refers to: ecosystem, group integration,      */
	/* combined company capability, or cross-company value propositions.     */
	.sf-heading-ecosystem-gradient {
		background: linear-gradient(90deg, #0F528C 0%, #76B900 33%, #FFEE32 66%, #FF3B30 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: #0F528C; /* accessible fallback */
		display: inline;
		padding-bottom: 0.12em;
		line-height: inherit;
	}

	/* ── Section header block ── */
	.sf-hdr            { margin-bottom: var(--hdr-mb); max-width: 720px; }
	.sf-hdr.sf-center  { text-align: center; margin-left: auto; margin-right: auto; }
	.sf-hdr .sf-lead   { margin-top: 16px; }

	/* ── Buttons ── */
	.sf-btn-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 36px; }
	.sf-hero .sf-btn-row { justify-content: center; }

	a.sf-btn-fill {
		background: var(--yellow); color: #1D1D1F !important; border-radius: 980px;
		font-size: 15px !important; font-weight: 500 !important;
		padding: 13px 26px !important; display: inline-block;
		text-decoration: none !important; transition: background .18s;
	}
	a.sf-btn-fill:hover { background: var(--yellow-hover); }

	a.sf-btn-outline {
		color: #1D1D1F !important; border: 1.5px solid #D2D2D7; border-radius: 980px;
		font-size: 15px !important; font-weight: 500 !important;
		padding: 12px 26px !important; display: inline-block;
		text-decoration: none !important; transition: all .18s;
	}
	a.sf-btn-outline:hover { background: rgba(255,199,0,.06); border-color: var(--yellow); }

	a.sf-btn-light {
		background: rgba(255,255,255,.12); color: #fff !important;
		border: 1px solid rgba(255,255,255,.28); border-radius: 980px;
		font-size: 15px !important; font-weight: 500 !important;
		padding: 13px 26px !important; display: inline-block;
		text-decoration: none !important; transition: background .18s;
	}
	a.sf-btn-light:hover { background: rgba(255,255,255,.20); }

	/* ──────────────────────────────────────────
	   §1 — HERO · Full-width background image
	   Image: edge-to-edge, no borders, no box.
	   Overlay: dark gradient for readability.
	   All text forced white on dark background.
	────────────────────────────────────────── */
	.sf-hero {
		min-height: 88vh !important;
		display: flex; align-items: center;
		justify-content: center; text-align: center;
		padding: clamp(120px, 14vh, 180px) var(--pad) !important;
		/* Background image — full cover, no repeat, edge-to-edge */
		background-image:    url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1920&q=80&auto=format&fit=crop');
		background-size:     cover;
		background-position: center center;
		background-repeat:   no-repeat;
		background-color:    #0a0f19; /* solid fallback while image loads */
		position: relative;
		overflow: hidden;
	}

	/* Dark overlay — sits between image and text */
	.sf-hero::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.88) 0%,
			rgba(0, 0, 0, 0.80) 40%,
			rgba(0, 0, 0, 0.86) 100%
		);
		pointer-events: none;
		z-index: 0;
	}

	/* Inner content sits above overlay */
	.sf-hero-inner {
		position: relative;
		z-index: 1;
		max-width: 860px;
		margin: 0 auto;
	}

	/* All text white on dark background */
	.sf-hero .sf-eyebrow {
		color: rgba(255, 255, 255, 0.55) !important;
		-webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
		background: none !important;
	}
	.sf-hero .sf-h1 {
		color: #ffffff !important;
		margin: 0 auto 22px;
	}
	.sf-hero .sf-lead {
		color: rgba(255, 255, 255, 0.75) !important;
		margin: 0 auto;
		max-width: 580px;
	}

	/* Outline button adapts to white-on-dark context */
	.sf-hero a.sf-btn-outline {
		color: rgba(255,255,255,0.88) !important;
		border-color: rgba(255,255,255,0.40) !important;
	}
	.sf-hero a.sf-btn-outline:hover {
		background: rgba(255,255,255,0.10) !important;
	}

	/* ──────────────────────────────────────────
	   §2 — ECOSYSTEM
	────────────────────────────────────────── */

	/* ── Parent organisation tier ── */
	.sf-eco-parent {
		display: flex;
		align-items: center;
		gap: 32px;
		border: 1px solid rgba(255,199,0,0.18);
		border-radius: 18px;
		padding: 32px 40px;
		margin-bottom: 24px;
		background: rgba(255,199,0,0.03);
		position: relative;
	}
	/* Subtle connector line from parent down to child grid */
	.sf-eco-parent::after {
		content: '';
		position: absolute;
		bottom: -24px;
		left: 50%;
		transform: translateX(-50%);
		width: 1px;
		height: 24px;
		background: rgba(255,238,50,0.20);
		pointer-events: none;
	}
	.sf-eco-parent-text { flex: 1; }
	.sf-eco-parent-kicker {
		display: block; font-size: 10px; font-weight: 700;
		letter-spacing: 0.14em; text-transform: uppercase;
		color: var(--yellow-hover); margin-bottom: 8px;
		font-family: Inter, -apple-system, system-ui, sans-serif;
	}
	.sf-eco-parent-name {
		display: block; font-size: 20px; font-weight: 600;
		letter-spacing: -0.024em; line-height: 1.15; color: var(--dark);
		font-family: Inter, -apple-system, system-ui, sans-serif;
		margin: 0 0 8px;
	}
	.sf-eco-parent-desc {
		font-size: 14px; line-height: 1.60; color: var(--subtle);
		margin: 0;
		font-family: Inter, -apple-system, system-ui, sans-serif;
		max-width: 640px;
	}
	.sf-eco-parent-badge {
		flex-shrink: 0; text-align: right;
	}
	.sf-eco-parent-badge span {
		display: inline-block; font-size: 10px; font-weight: 600;
		letter-spacing: 0.07em; padding: 5px 14px;
		border-radius: 20px; border: 1px solid rgba(255,199,0,0.32);
		color: var(--yellow-hover);
		font-family: Inter, -apple-system, system-ui, sans-serif;
	}

	/* ── Child company cards ── */
	.sf-eco-grid {
		display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px);
	}
	.sf-eco-card {
		background: var(--white); border-radius: 20px;
		padding: clamp(28px, 3.5vw, 40px) clamp(24px, 3vw, 34px);
		box-shadow: 0 0 0 1px rgba(0,0,0,.055), 0 2px 16px rgba(0,0,0,.035);
		border-top: 2.5px solid transparent;
	}
	.sf-eco-card.c-synergy { border-top-color: var(--synergy-blue); }
	.sf-eco-card.c-vision  { border-top-color: var(--red); }
	.sf-eco-card.c-sense   { border-top-color: var(--green); }

	.sf-eco-tag {
		display: block; font-size: 10px; font-weight: 700;
		letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px;
	}
	.sf-eco-tag.c-synergy { color: var(--synergy-blue); }
	.sf-eco-tag.c-vision  { color: var(--red); }
	.sf-eco-tag.c-sense   { color: var(--green); }

	.sf-eco-card h3 {
		font-size: 19px; font-weight: 600; letter-spacing: -0.022em;
		line-height: 1.15; color: var(--dark); margin: 0 0 14px;
	}
	.sf-eco-card p {
		font-size: var(--t-body); line-height: 1.70; color: var(--subtle); margin: 0;
	}

	/* Company attribution tags removed — SMARTER® presented as a pure methodology */

	/* ──────────────────────────────────────────
	   ROCKET ACCENT — "One direction" trajectory
	   Image is landscape (2560×996, ~2.57:1).
	   Rotated -90° so nose points straight up
	   (rocket taking off vertically).
	   height: 0.55em → width ~62px (fits in
	   the 87px gap remaining after "One direction").
	   Float: gentle upward screen-Y oscillation.
	   Pure CSS animation — no JS dependency.
	────────────────────────────────────────── */
	.sf-rocket-accent {
		display:          inline-block !important;
		height:           0.55em !important;    /* ~24px at 44px; width auto → ~62px  */
		width:            auto !important;
		max-width:        none !important;
		vertical-align:   middle !important;
		margin-left:      0.14em;
		margin-right:     0.06em;
		opacity:          0;
		transform:        translateY(7px) rotate(-90deg);
		transform-origin: center center;
		will-change:      transform, opacity;
		/* Grayscale source → brand blue-indigo tint at 65% opacity */
		filter: sepia(1) hue-rotate(198deg) saturate(400%) brightness(0.72) opacity(0);
		/* Enter at 1.4s (page settled); float from 2.5s */
		animation:
			sf-rocket-enter 1.0s cubic-bezier(0.22, 1, 0.36, 1) 1.4s both,
			sf-rocket-float  5.5s ease-in-out 2.5s infinite;
	}
	/* Entry: rocket rises into position from below */
	@keyframes sf-rocket-enter {
		from { filter: sepia(1) hue-rotate(198deg) saturate(400%) brightness(0.72) opacity(0);    transform: translateY(7px)  rotate(-90deg); }
		to   { filter: sepia(1) hue-rotate(198deg) saturate(400%) brightness(0.72) opacity(0.65); transform: translateY(0px)  rotate(-90deg); }
	}
	/* Float: 3px vertical climb cycle — rocket appears to ascend */
	@keyframes sf-rocket-float {
		0%, 100% { filter: sepia(1) hue-rotate(198deg) saturate(400%) brightness(0.72) opacity(0.65); transform: translateY(0px)  rotate(-90deg); }
		50%       { filter: sepia(1) hue-rotate(198deg) saturate(400%) brightness(0.72) opacity(0.65); transform: translateY(-3px) rotate(-90deg); }
	}
	/* Accessibility: honour prefers-reduced-motion */
	@media (prefers-reduced-motion: reduce) {
		.sf-rocket-accent {
			animation:  none;
			filter:     sepia(1) hue-rotate(198deg) saturate(400%) brightness(0.72) opacity(0.55);
			transform:  translateY(0) rotate(-90deg);
		}
	}
	/* Mobile: already scales via em; tighten margin slightly */
	@media (max-width: 640px) {
		.sf-rocket-accent {
			height:      0.48em !important;
			margin-left: 0.10em;
		}
	}

	/* ──────────────────────────────────────────
	   §FOUNDATION — GROUP FOUNDATION
	────────────────────────────────────────── */
	.sf-foundation-wrap {
		max-width: 760px; margin: 0 auto; text-align: center;
	}
	.sf-foundation-wrap .sf-h2  { margin-left: auto; margin-right: auto; }
	.sf-foundation-wrap .sf-lead { margin: 0 auto; }

	/* ──────────────────────────────────────────
	   §VMV — VISION, MISSION & VALUES
	────────────────────────────────────────── */

	/* Vision + Mission — two-column */
	.sf-vmv-top {
		display: grid; grid-template-columns: 1fr 1fr;
		gap: clamp(48px, 7vw, 100px);
		padding-bottom: clamp(52px, 7vw, 88px);
		border-bottom: 1px solid var(--border);
		margin-bottom: clamp(52px, 7vw, 88px);
	}
	.sf-vmv-label {
		display: block; font-size: var(--t-label); font-weight: 700;
		letter-spacing: 0.12em; text-transform: uppercase;
		background: var(--sf-brand-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: #D9CA2B;  /* fallback — Fusion supporting yellow */
		margin-bottom: 20px;
	}
	.sf-vmv-statement {
		font-size: clamp(18px, 1.9vw, 23px); font-weight: 600;
		letter-spacing: -0.022em; line-height: 1.38;
		color: var(--dark); margin: 0 0 20px; max-width: 520px;
	}
	.sf-vmv-body {
		font-size: var(--t-body); line-height: 1.72;
		color: var(--subtle); margin: 0 0 14px;
	}
	.sf-vmv-body:last-child { margin-bottom: 0; }

	/* Vision-mission banner — section-wide Apple-style intro above the V/M block */
	.sf-vmv-banner {
		max-width: 820px;
		margin: 0 auto clamp(44px, 6vw, 72px);
		text-align: center;
	}
	.sf-vmv-banner .sf-vmv-label {
		margin-bottom: 14px;
		display: inline-block;
	}
	/* Neutralise the gradient on every eyebrow label within the
	   #vision-mission section so headers read cleanly on white. */
	#vision-mission .sf-vmv-label {
		background: none !important;
		background-image: none !important;
		-webkit-background-clip: initial !important;
		background-clip: initial !important;
		color: #6e6e73 !important;
		-webkit-text-fill-color: #6e6e73 !important;
	}
	.sf-vmv-banner-hdr {
		font-size: clamp(30px, 4vw, 48px) !important;
		font-weight: 600 !important;
		letter-spacing: -0.022em !important;
		line-height: 1.1 !important;
		color: #1d1d1f !important;
		-webkit-text-fill-color: #1d1d1f !important;
		margin: 0 0 18px;
	}
	/* Gradient accent on the highlighted word only — re-establishes
	   -webkit-text-fill-color: transparent inside the span so the
	   background-clip: text effect paints. */
	.sf-vmv-banner-hdr .sf-word-gradient {
		-webkit-text-fill-color: transparent !important;
	}
	.sf-vmv-banner-sub {
		font-size: clamp(16px, 1.4vw, 19px);
		line-height: 1.55;
		color: #6e6e73 !important;
		-webkit-text-fill-color: #6e6e73 !important;
		max-width: 620px;
		margin: 0 auto;
	}

	/* Values — header + 3-col grid */
	.sf-vmv-val-hdr {
		margin-bottom: clamp(32px, 4vw, 52px);
	}
	.sf-vmv-val-hdr .sf-vmv-label { margin-bottom: 12px; }
	.sf-vmv-val-hdr h2,
	.sf-vmv-val-hdr h3 {
		/* !important beats Elementor kit + site-wide heading rules. */
		font-size: clamp(30px, 4vw, 48px) !important;
		font-weight: 600 !important;
		letter-spacing: -0.022em !important;
		line-height: 1.1 !important;
		color: #1d1d1f !important;
		-webkit-text-fill-color: #1d1d1f !important;
		margin: 0;
	}
	/* Keep the gradient accent word transparent so background-clip paints. */
	.sf-vmv-val-hdr h2 .sf-word-gradient,
	.sf-vmv-val-hdr h3 .sf-word-gradient {
		-webkit-text-fill-color: transparent !important;
	}
	.sf-vmv-val-grid {
		display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
	}
	.sf-vmv-val-card {
		background: var(--off); border-radius: 16px; padding: 28px 24px;
	}
	.sf-vmv-val-title {
		display: block; font-size: 15px; font-weight: 600;
		color: var(--dark); letter-spacing: -0.010em; margin-bottom: 8px;
	}
	.sf-vmv-val-body {
		font-size: 13px; line-height: 1.68; color: var(--subtle); margin: 0;
	}

	/* ──────────────────────────────────────────
	   §3 — GROUP PHILOSOPHY
	────────────────────────────────────────── */
	.sf-phil-split {
		display: grid; grid-template-columns: 1fr 1fr;
		gap: clamp(52px, 8vw, 120px); align-items: start;
	}
	.sf-phil-text .sf-lead { margin-top: 16px; }
	.sf-phil-body {
		font-size: var(--t-body); line-height: 1.72; color: var(--subtle);
		margin-top: 22px; max-width: 500px;
	}
	.sf-phil-pillars {
		display: grid; grid-template-columns: 1fr; gap: 14px; padding-top: 6px;
	}
	.sf-phil-pillar {
		border-left: 3px solid var(--border); padding: 6px 0 6px 20px;
	}
	.sf-phil-pillar strong {
		display: block; font-size: 15px; font-weight: 600;
		color: var(--dark); letter-spacing: -0.010em; margin-bottom: 4px;
	}
	.sf-phil-pillar span {
		font-size: 14px; line-height: 1.58; color: var(--subtle);
	}

	/* ──────────────────────────────────────────
	   §4 — GROUP VALUES
	────────────────────────────────────────── */
	.sf-val-grid {
		display: grid; grid-template-columns: repeat(5,1fr); gap: 14px;
	}
	.sf-val-card {
		background: var(--white); border-radius: 16px; padding: 28px 22px;
		box-shadow: 0 0 0 1px rgba(0,0,0,.06);
		border-top: 3px solid transparent;
	}
	.sf-val-card.v-clarity        { border-top-color: var(--blue); }
	.sf-val-card.v-precision      { border-top-color: var(--green); }
	.sf-val-card.v-responsibility { border-top-color: var(--red); }
	.sf-val-card.v-alignment      { border-top-color: var(--yellow); }
	.sf-val-card.v-longevity      { border-top-color: var(--subtle); }

	.sf-val-icon  {
		font-size: 22px; margin-bottom: 14px; display: block; line-height: 1;
	}
	.sf-val-title {
		display: block; font-size: 15px; font-weight: 600;
		color: var(--dark); letter-spacing: -0.010em; margin-bottom: 8px;
	}
	.sf-val-body {
		font-size: 13px; line-height: 1.65; color: var(--subtle); margin: 0;
	}

	/* ──────────────────────────────────────────
	   §5 — ENVIRONMENTAL APPROACH
	────────────────────────────────────────── */
	.sf-env-split {
		display: grid; grid-template-columns: 1fr 1fr;
		gap: clamp(48px,7vw,108px); align-items: start;
	}
	.sf-env-text .sf-h2  { margin-bottom: 16px; }
	.sf-env-text .sf-lead { margin-bottom: 22px; }
	.sf-env-text .sf-body { max-width: 480px; }
	.sf-env-items {
		display: grid; grid-template-columns: 1fr; gap: 10px;
	}
	.sf-env-item {
		background: var(--off); border-radius: 12px; padding: 20px 18px;
		display: flex; gap: 14px; align-items: flex-start;
	}
	.sf-env-item-dot {
		width: 6px; height: 6px; min-width: 6px; background: var(--green);
		border-radius: 50%; margin-top: 7px; flex-shrink: 0;
	}
	.sf-env-item-text {
		font-size: 14px; font-weight: 500; color: var(--dark); line-height: 1.45;
	}
	.sf-env-item-text span {
		display: block; font-size: 13px; font-weight: 400;
		color: var(--subtle); margin-top: 3px; line-height: 1.5;
	}

	/* ──────────────────────────────────────────
	   §6 — PEOPLE-CENTRED ENGINEERING
	────────────────────────────────────────── */
	.sf-people-split {
		display: grid; grid-template-columns: 1fr 1fr;
		gap: clamp(48px,7vw,108px); align-items: start;
	}
	.sf-people-text .sf-lead { margin-top: 16px; }
	.sf-people-text .sf-body { margin-top: 20px; max-width: 480px; }
	.sf-people-list {
		display: grid; grid-template-columns: 1fr; gap: 12px; padding-top: 4px;
	}
	.sf-people-item {
		background: var(--off); border-radius: 12px; padding: 20px 20px;
		display: flex; gap: 16px; align-items: flex-start;
	}
	.sf-people-item-icon {
		width: 38px; height: 38px; min-width: 38px; border-radius: 10px;
		background: rgba(255,199,0,.09); display: flex; align-items: center;
		justify-content: center; font-size: 17px; flex-shrink: 0;
	}
	.sf-people-item-text strong {
		display: block; font-size: 14px; font-weight: 600;
		color: var(--dark); letter-spacing: -0.008em; margin-bottom: 4px;
	}
	.sf-people-item-text p {
		font-size: 13px; line-height: 1.58; color: var(--subtle); margin: 0;
	}

	/* ──────────────────────────────────────────
	   §7 — GROUP CAPABILITY
	────────────────────────────────────────── */
	.sf-cap-grid {
		display: grid; grid-template-columns: repeat(3,1fr); gap: 14px;
	}
	.sf-cap-card {
		background: var(--white); border-radius: 16px; padding: 30px 26px;
		box-shadow: 0 0 0 1px rgba(0,0,0,.06);
	}
	.sf-cap-num {
		display: block; font-size: 11px; font-weight: 700;
		letter-spacing: 0.09em; margin-bottom: 12px;
		text-transform: uppercase;
		background: var(--sf-brand-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: #D9CA2B;  /* fallback — Fusion supporting yellow */
	}
	.sf-cap-card h4 {
		font-size: 16px; font-weight: 600; color: var(--dark);
		margin: 0 0 8px; letter-spacing: -0.010em;
	}
	.sf-cap-card p {
		font-size: 13px; line-height: 1.62; color: var(--subtle); margin: 0;
	}

	/* ──────────────────────────────────────────
	   §8 — TECHNOLOGY DOMAINS
	────────────────────────────────────────── */
	.sf-tech-grid {
		display: grid; grid-template-columns: repeat(4,1fr); gap: 10px;
	}
	.sf-tech-item {
		background: var(--off); border-radius: 12px; padding: 22px 18px;
		display: flex; align-items: flex-start; gap: 12px;
		font-size: 14px; font-weight: 500; color: var(--dark); line-height: 1.42;
	}
	.sf-tech-item::before {
		content: ''; display: block; width: 5px; height: 5px; min-width: 5px;
		background: var(--yellow); border-radius: 50%; margin-top: 6px; flex-shrink: 0;
	}

	/* ──────────────────────────────────────────
	   §9 — MARKETS
	────────────────────────────────────────── */
	.sf-mkt-grid {
		display: grid; grid-template-columns: repeat(4,1fr); gap: 10px;
		margin-top: clamp(36px, 5vw, 56px);
	}
	.sf-mkt-tile {
		background: var(--white);
		border-radius: 14px;
		padding: clamp(20px, 2.5vw, 28px) clamp(18px, 2.5vw, 28px);
		box-shadow: 0 0 0 1px rgba(0,0,0,.06);
		display: flex; align-items: center;
		min-height: 72px;
	}
	.sf-mkt-icon  { display: none; }
	.sf-mkt-label {
		font-size: 14px; font-weight: 500;
		color: var(--dark); line-height: 1.3;
		letter-spacing: -0.008em;
		display: block;
	}

	/* ──────────────────────────────────────────
	   §10 — HOW THE ECOSYSTEM WORKS
	────────────────────────────────────────── */
	.sf-proc-grid {
		display: grid; grid-template-columns: repeat(6,1fr); gap: 24px;
	}
	.sf-proc-step {
		border-top: 2px solid var(--border); padding-top: 22px;
	}
	.sf-proc-num {
		display: block; font-size: 11px; font-weight: 700;
		letter-spacing: 0.09em; margin-bottom: 10px;
		text-transform: uppercase;
		background: var(--sf-brand-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: #D9CA2B;  /* fallback — Fusion supporting yellow */
	}
	.sf-proc-step h4 {
		font-size: 15px; font-weight: 600; color: var(--dark);
		margin: 0 0 8px; letter-spacing: -0.008em;
	}
	.sf-proc-step p {
		font-size: 13px; line-height: 1.58; color: var(--subtle); margin: 0;
	}

	/* ──────────────────────────────────────────
	   §11 — OUTCOME FOCUS
	────────────────────────────────────────── */
	.sf-out-grid {
		display: grid; grid-template-columns: repeat(3,1fr); gap: 28px;
	}
	.sf-out-card {
		background: var(--white); border-radius: 20px; padding: 28px;
		border: 0;
		box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.05);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}
	.sf-out-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 20px 40px rgba(0,0,0,.08);
	}
	/* Metric word — demoted to a small uppercase eyebrow (no gradient) */
	.sf-out-metric {
		display: block;
		font-size: 12px !important;
		font-weight: 600 !important;
		letter-spacing: 0.08em !important;
		text-transform: uppercase;
		line-height: 1.3 !important;
		margin-bottom: 14px;
		background: none !important;
		-webkit-background-clip: border-box !important;
		background-clip: border-box !important;
		-webkit-text-fill-color: currentColor !important;
		color: #6E6E73 !important;
	}
	/* h4 — promoted to the card's dominant headline */
	.sf-out-card h4 {
		font-size: clamp(21px, 1.8vw, 24px) !important;
		font-weight: 600 !important;
		color: #1D1D1F !important;
		margin: 0 0 16px !important;
		letter-spacing: -0.018em !important;
		line-height: 1.2 !important;
	}
	.sf-out-card p {
		font-size: 15px; line-height: 1.55; color: #6E6E73; margin: 0;
	}
	/* Apple-style green tick benefit list */
	.sf-out-ticks {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.sf-out-ticks li {
		position: relative;
		padding-left: 22px;
		margin: 0 0 8px;
		font-size: 15px;
		line-height: 1.6;
		color: #1D1D1F;
	}
	.sf-out-ticks li:last-child { margin-bottom: 0; }
	.sf-out-ticks li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0.5em;
		width: 14px;
		height: 14px;
		margin-top: -0.4em;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%2334C759' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 7.5 L5.5 10.5 L11.5 3.5'/></svg>");
		background-repeat: no-repeat;
		background-size: 14px 14px;
	}

	/* ──────────────────────────────────────────
	   §HAND-CIRCLE — drawn ellipse around "clarity"
	   3 overlapping imperfect ellipse paths.
	   Path 1: main loop. Path 2: outer loop.
	   Path 3: partial arc — speed-tail at top.
	   @keyframes + animation-fill-mode:both
	   keeps strokes hidden during delay and
	   visible permanently after draw completes.
	   IntersectionObserver adds .sf-hc-active.
	────────────────────────────────────────── */

	/* Container anchors the absolutely-positioned SVG.
	   padding-bottom makes room for ellipse bottom arc below the text. */
	.sf-hand-circle {
		position:       relative;
		display:        inline-block;
		vertical-align: baseline;
		padding-bottom: 0.20em;
		/* Explicit white — inherits correctly on dark background */
		color:          #f5f5f7;
	}

	/* SVG scales with the word at any font size.
	   em offsets keep the ellipse proportionally placed.
	   overflow:visible so rounded stroke caps never clip. */
	.sf-hand-circle svg.sf-hc-svg {
		position:       absolute;
		top:            -0.44em;
		left:           -0.28em;
		width:          calc(100% + 0.56em);
		height:         calc(100% + 0.88em);
		overflow:       visible;
		pointer-events: none;
	}

	/* Shared path defaults */
	.sf-hand-circle svg.sf-hc-svg path {
		fill:            none;
		stroke-linecap:  round;
		stroke-linejoin: round;
	}

	/* Path 1 — primary loop */
	.sf-hand-circle svg.sf-hc-svg path:nth-child(1) {
		stroke:           rgba(255, 255, 255, 0.85);
		stroke-width:     2.5;
		stroke-dasharray: 600;
		stroke-dashoffset:600;
	}

	/* Path 2 — outer loop, slightly softer */
	.sf-hand-circle svg.sf-hc-svg path:nth-child(2) {
		stroke:           rgba(255, 255, 255, 0.55);
		stroke-width:     2;
		stroke-dasharray: 615;
		stroke-dashoffset:615;
	}

	/* Path 3 — speed-tail arc, lightest */
	.sf-hand-circle svg.sf-hc-svg path:nth-child(3) {
		stroke:           rgba(255, 255, 255, 0.38);
		stroke-width:     1.5;
		stroke-dasharray: 370;
		stroke-dashoffset:370;
	}

	/* ── Looping keyframes ───────────────────────────────────────────────
	   Each cycle: draw in (0→40%) · hold fully drawn (40→65%) ·
	   erase out (65→90%) · hold empty (90→100%) · repeat.
	   Three separate keyframes so each path has its own dasharray value.
	   ease-in-out on the draw/erase steps feels natural, not mechanical.
	─────────────────────────────────────────────────────────────────── */
	@keyframes sf-hc-loop-1 {
		0%   { stroke-dashoffset: 600; }   /* hidden — start of draw */
		40%  { stroke-dashoffset: 0;   }   /* fully drawn */
		65%  { stroke-dashoffset: 0;   }   /* hold drawn */
		90%  { stroke-dashoffset: 600; }   /* fully erased */
		100% { stroke-dashoffset: 600; }   /* hold empty before next cycle */
	}
	@keyframes sf-hc-loop-2 {
		0%   { stroke-dashoffset: 615; }
		40%  { stroke-dashoffset: 0;   }
		65%  { stroke-dashoffset: 0;   }
		90%  { stroke-dashoffset: 615; }
		100% { stroke-dashoffset: 615; }
	}
	@keyframes sf-hc-loop-3 {
		0%   { stroke-dashoffset: 370; }
		40%  { stroke-dashoffset: 0;   }
		65%  { stroke-dashoffset: 0;   }
		90%  { stroke-dashoffset: 370; }
		100% { stroke-dashoffset: 370; }
	}

	/* Active: IntersectionObserver adds this class once.
	   Each path loops at 4s total cycle time.
	   Stagger delays (0s / 0.18s / 0.08s) mean the three strokes
	   never all reset simultaneously — the ring always feels alive.
	   animation-fill-mode:backwards keeps paths hidden during initial delay. */
	.sf-hand-circle.sf-hc-active svg.sf-hc-svg path:nth-child(1) {
		animation: sf-hc-loop-1 4s ease-in-out 0.20s infinite backwards;
	}
	.sf-hand-circle.sf-hc-active svg.sf-hc-svg path:nth-child(2) {
		animation: sf-hc-loop-2 4s ease-in-out 0.38s infinite backwards;
	}
	.sf-hand-circle.sf-hc-active svg.sf-hc-svg path:nth-child(3) {
		animation: sf-hc-loop-3 4s ease-in-out 0.28s infinite backwards;
	}

	/* Reduced motion — show ring statically, no animation */
	@media (prefers-reduced-motion: reduce) {
		.sf-hand-circle svg.sf-hc-svg path:nth-child(1),
		.sf-hand-circle svg.sf-hc-svg path:nth-child(2),
		.sf-hand-circle svg.sf-hc-svg path:nth-child(3) {
			stroke-dashoffset: 0 !important;
			animation:         none !important;
		}
	}

	/* ──────────────────────────────────────────
	   §HAND-UNDERLINE — "right" in CTA heading
	   SVG stroke-dashoffset draw animation.
	   Path: shallow organic curve — left → right.
	   IntersectionObserver fires once on scroll.
	────────────────────────────────────────── */

	/* Span: inline-block anchors the absolutely-positioned SVG */
	.sf-hand-underline {
		position: relative;
		display: inline-block;
		color: #f5f5f7;          /* explicit white — immune to cascade */
		vertical-align: baseline;
		/* Extra bottom padding creates space for the SVG without layout shift */
		padding-bottom: 0.22em;
	}

	/* SVG container — positioned below the word, never in the text flow */
	.sf-hand-underline svg.sf-hu-svg {
		position: absolute;
		left: -2px;              /* 2px bleed prevents left-cap clip */
		bottom: 0;
		width: calc(100% + 4px); /* match word width + small bleed each side */
		height: 14px;
		overflow: visible;       /* lets the stroke breathe outside its viewBox */
		pointer-events: none;
	}

	/* Path — hidden by default via CSS fallback.
	   JS overrides both properties inline after getTotalLength() calibration.
	   Transition is also set inline by JS so CSS never conflicts with it. */
	.sf-hand-underline svg.sf-hu-svg path {
		stroke-dasharray:  220;
		stroke-dashoffset: 220;
	}

	/* Reduced motion — reveal inline styles handled by JS reduced-motion branch */

	/* ──────────────────────────────────────────
	   §12 — CTA
	────────────────────────────────────────── */
	.sf-cta-wrap {
		text-align: center; max-width: 680px; margin: 0 auto;
	}
	.sf-cta-wrap h2 {
		color: #f5f5f7; font-size: clamp(36px,5vw,64px); font-weight: 600;
		letter-spacing: -0.040em; line-height: 1.04; margin: 0 0 20px;
	}
	.sf-cta-wrap p {
		font-size: clamp(16px,1.6vw,19px); line-height: 1.65;
		color: rgba(255,255,255,.58); max-width: 520px; margin: 0 auto;
	}
	.sf-cta-wrap .sf-btn-row { justify-content: center; }

	/* ──────────────────────────────────────────
	   RESPONSIVE
	────────────────────────────────────────── */
	/* 1100px — large tablet landscape */
	@media (max-width: 1100px) {
		.sf-val-grid   { grid-template-columns: repeat(3,1fr); }
		.sf-proc-grid  { grid-template-columns: repeat(3,1fr); }
		.sf-tech-grid  { grid-template-columns: repeat(3,1fr); }
	}

	/* 900px — tablet portrait */
	@media (max-width: 900px) {
		.sf-eco-grid      { grid-template-columns: repeat(2,1fr); max-width: 100%; }
		.sf-eco-parent    { flex-wrap: wrap; padding: 24px 28px; }
		.sf-eco-parent-badge { text-align: left; width: 100%; }
		.sf-out-grid      { grid-template-columns: repeat(2,1fr); }
		.sf-cap-grid      { grid-template-columns: repeat(2,1fr); }
		.sf-phil-split    { grid-template-columns: 1fr; gap: 44px; }
		.sf-env-split     { grid-template-columns: 1fr; gap: 40px; }
		.sf-people-split  { grid-template-columns: 1fr; gap: 40px; }
		.sf-mkt-grid      { grid-template-columns: repeat(2,1fr); }
		.sf-tech-grid     { grid-template-columns: repeat(2,1fr); }
		.sf-proc-grid     { grid-template-columns: repeat(3,1fr); }
		.sf-val-grid      { grid-template-columns: repeat(3,1fr); }
		.sf-vmv-top       { grid-template-columns: 1fr; gap: 44px; }
		.sf-vmv-val-grid  { grid-template-columns: repeat(2,1fr); }
		.sf-vmv-statement { max-width: 100%; }
		.sf-phil-body     { max-width: 100%; }
		.sf-env-text .sf-body   { max-width: 100%; }
		.sf-people-text .sf-body{ max-width: 100%; }
	}

	/* 768px — landscape phone / narrow tablet */
	@media (max-width: 768px) {
		.sf-mkt-grid      { grid-template-columns: repeat(2,1fr); }
		.sf-proc-grid     { grid-template-columns: repeat(2,1fr); }
		.sf-eco-grid      { grid-template-columns: repeat(2,1fr); max-width: 100%; }
		.sf-val-grid      { grid-template-columns: repeat(2,1fr); }
		.sf-vmv-val-grid  { grid-template-columns: repeat(2,1fr); }
	}

	/* 580px — mobile landscape */
	@media (max-width: 580px) {
		.sf-eco-grid      { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
		.sf-eco-parent    { padding: 20px 22px; gap: 16px; }
		.sf-eco-parent::after { display: none; }
		.sf-cap-grid      { grid-template-columns: 1fr; }
		.sf-out-grid      { grid-template-columns: 1fr; }
		.sf-tech-grid     { grid-template-columns: repeat(2,1fr); }
		.sf-mkt-grid      { grid-template-columns: repeat(2,1fr); }
		.sf-proc-grid     { grid-template-columns: 1fr; }
		.sf-val-grid      { grid-template-columns: 1fr; }
		.sf-vmv-val-grid  { grid-template-columns: 1fr; }
	}

	/* 420px — mobile portrait */
	@media (max-width: 420px) {
		.sf-hero { min-height: 88vh !important; }
		.sf-tech-grid   { grid-template-columns: 1fr; }
		.sf-mkt-grid    { grid-template-columns: repeat(2,1fr); }
	}

	/* ══════════════════════════════════════════════════════════
	   FOUNDATION HERO — gradient break section introducing VMV+P
	   Gradient matches ecosystem: #0071E3 → #76B900 → #FFC700 → #FF3B30
	   ══════════════════════════════════════════════════════════ */

	.sf-foundation-hero {
		width: 100%;
		/* Ecosystem gradient — dark, premium */
		background: linear-gradient(135deg, #0B0B0C 0%, #1C1C1E 52%, #0B0B0C 100%);
		background-color: #0B0B0C;        /* solid fallback */
		padding: clamp(72px, 8vh, 112px) var(--pad, 24px) clamp(64px, 7vh, 100px);
		text-align: center;
		position: relative;
		overflow: hidden;
	}
	/* Subtle depth overlay — darkens bottom edge slightly for polish */
	.sf-foundation-hero::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.88) 0%,
			rgba(0, 0, 0, 0.80) 40%,
			rgba(0, 0, 0, 0.86) 100%
		);
		pointer-events: none;
	}
	.sf-foundation-inner {
		position: relative;
		z-index: 1;
		max-width: 720px;
		margin: 0 auto;
	}
	.sf-foundation-eyebrow {
		display: block;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgba(255,255,255,0.60);
		margin-bottom: 32px;          /* was 22px — more air before headline */
		font-family: Inter, -apple-system, 'system-ui', sans-serif;
	}
	.sf-foundation-headline {
		font-family: Inter, -apple-system, 'system-ui', 'Segoe UI', sans-serif;
		/* Wider vw scalar (6.5 vs 4.8) means font scales down on mobile viewports,
		   preventing "Discipline in execution." from overflowing a 390px screen.
		   At 390px: 6.5vw = 25.4px → clamp floor 26px (fits ~303px in 350px available).
		   At 860px: 6.5vw = 55.9px → clamp ceiling 56px. */
		/* !important beats Elementor kit `.elementor-kit-24107 h2` rule */
		font-size: clamp(26px, 6.5vw, 56px) !important;
		font-weight: 600 !important;
		letter-spacing: -0.030em !important;      /* slightly looser than -0.034 to ease mobile fit */
		line-height: 1.10 !important;
		color: #ffffff;
		word-break: break-word;        /* safety net — prevents single-word overflow */
		overflow-wrap: break-word;
		margin: 0 0 44px;
	}
	.sf-foundation-divider {
		width: 36px;
		height: 1px;
		background: rgba(255,255,255,0.30);
		margin: 0 auto 40px;          /* was 28px — space before lead paragraph */
	}
	.sf-foundation-lead {
		/* Apple-style lead paragraph on dark section background. */
		font-size: clamp(19px, 1.6vw, 22px);
		line-height: 1.47;
		font-weight: 400;
		letter-spacing: -0.003em;
		color: rgba(255,255,255,0.78);
		max-width: 660px;
		margin: 0 auto 52px;
		font-family: Inter, -apple-system, 'system-ui', sans-serif;
	}
	/* ── Foundation tab selector ── */
	.sf-foundation-tabs {
		max-width: 860px;
		margin: 0 auto;
		width: 100%;
	}
	.sf-foundation-tab-nav {
		display: flex;
		justify-content: center;
		border-bottom: 1px solid rgba(255,255,255,0.14);
		margin-bottom: 52px;          /* was 44px — more space between tabs and panel content */
		gap: 8px;                     /* was 0 — slight gutter between tab buttons */
	}
	.sf-tab-btn {
		flex: 1;
		max-width: 220px;
		/* Hard-reset Elementor/browser button defaults — prevents pink border & colour leakage */
		background:  transparent !important;
		border:      none !important;
		box-shadow:  none !important;
		color:       rgba(255,255,255,0.45) !important;
		padding: 16px 24px 20px;      /* was 14/20/18 — more interior breathing room */
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;                     /* was 5px — space between number and label */
		position: relative;
		border-radius: 10px 10px 0 0;
		transition: background 0.22s ease;
		outline: none;
		-webkit-appearance: none;
		appearance: none;
	}
	/* Subtle hover background tint */
	.sf-tab-btn:hover {
		background: rgba(255,255,255,0.07) !important;
	}
	/* Active background highlight — frosted pill */
	.sf-tab-btn.is-active {
		background: rgba(255,255,255,0.10) !important;
	}
	/* Gradient indicator bar — slides in on active */
	.sf-tab-btn::after {
		content: '';
		position: absolute;
		bottom: -1px;
		left: 10%;
		right: 10%;
		height: 2px;
		background: rgba(255,255,255,0.55);
		border-radius: 2px;
		transform: scaleX(0);
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.sf-tab-btn.is-active::after { transform: scaleX(1); }

	.sf-tab-num {
		font-size: 10px;
		font-weight: 500;
		letter-spacing: 0.12em;
		color: rgba(255,255,255,0.30);
		transition: color 0.25s ease;
		font-family: Inter, -apple-system, sans-serif;
	}
	.sf-tab-label {
		font-size: 16px;
		font-weight: 600;
		letter-spacing: -0.015em;
		color: rgba(255,255,255,0.45);
		transition: color 0.25s ease;
		font-family: Inter, -apple-system, 'system-ui', sans-serif;
	}
	.sf-tab-btn.is-active .sf-tab-num   { color: rgba(255,255,255,0.65); }
	.sf-tab-btn.is-active .sf-tab-label { color: #ffffff; }
	.sf-tab-btn:hover .sf-tab-label     { color: rgba(255,255,255,0.82); }
	.sf-tab-btn:hover .sf-tab-num       { color: rgba(255,255,255,0.50); }

	/* ── Foundation content panels ── */
	/* Relative wrapper: inactive panels are display:none so height = active panel */
	.sf-foundation-content-wrap {
		width: 100%;
		/* min-height prevents layout jank during rapid switching */
		min-height: 140px;
	}
	.sf-foundation-panel {
		display: none;
		text-align: center;
		opacity: 0;
		transform: translateY(10px);
	}
	.sf-foundation-panel.is-active {
		display: block;
		pointer-events: auto;
		animation: sf-panel-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	@keyframes sf-panel-in {
		from { opacity: 0; transform: translateY(10px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	@media (prefers-reduced-motion: reduce) {
		.sf-foundation-panel.is-active {
			animation: none;
			opacity: 1;
			transform: translateY(0);
		}
	}
	.sf-foundation-panel-kicker {
		display: block;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgba(255,255,255,0.48);
		margin-bottom: 24px;          /* was 18px */
		font-family: Inter, -apple-system, sans-serif;
	}
	.sf-foundation-panel-headline {
		/* H2 scale — matches the site-wide section headline size. */
		font-size: clamp(30px, 4vw, 48px) !important;
		font-weight: 600 !important;
		letter-spacing: -0.022em !important;
		line-height: 1.1 !important;
		color: #ffffff !important;
		-webkit-text-fill-color: #ffffff !important;
		margin: 0 0 24px;
		font-family: Inter, -apple-system, 'system-ui', sans-serif;
	}
	.sf-foundation-panel-body {
		font-size: clamp(15px, 1.4vw, 17px);
		line-height: 1.72;
		color: rgba(255,255,255,0.70);
		max-width: 560px;
		margin: 0 auto 8px;           /* add small breathing room below body */
		font-family: Inter, -apple-system, 'system-ui', sans-serif;
	}
	/* Responsive */
	@media (max-width: 640px) {
		/* Mobile: horizontal scroll strip — swipeable */
		.sf-foundation-tab-nav {
			justify-content:     flex-start;
			overflow-x:          auto;
			-webkit-overflow-scrolling: touch;
			scroll-snap-type:    x mandatory;
			scrollbar-width:     none;  /* Firefox */
			-ms-overflow-style:  none;  /* IE/Edge */
			padding-bottom:      0;
		}
		.sf-foundation-tab-nav::-webkit-scrollbar { display: none; }
		.sf-tab-btn {
			flex:             0 0 auto;
			min-width:        100px;
			max-width:        none;
			padding:          10px 16px 14px;
			scroll-snap-align: start;
		}
		.sf-tab-label           { font-size: 14px; }
		.sf-foundation-lead     { margin-bottom: 40px; }
	}
	@media (max-width: 390px) {
		.sf-tab-btn   { min-width: 88px; padding: 10px 12px 14px; }
		.sf-tab-label { font-size: 13px; }
	}

	/* ══════════════════════════════════════════════════════════════
	   §SMARTER® — Minimal Card Grid
	   Seven typographic cards in a shared ruled-border grid.
	   Gradient top-border accent reveals on hover.
	   Step numbers use brand gradient; display letter is large and bold.
	   IntersectionObserver stagger reveal via sf_smarter_js().
	   ══════════════════════════════════════════════════════════════ */

	/* Section — white canvas */
	.sf-smarter-section {
		background: #ffffff;
		padding: clamp(80px, 9vh, 120px) var(--pad, 24px);
		border-top: 1px solid rgba(0,0,0,0.06);
	}

	.sf-smarter-inner {
		max-width: 1200px;
		margin: 0 auto;
	}

	/* ── Section header ── */
	.sf-smarter-header {
		text-align: center;
		max-width: 640px;
		margin: 0 auto 64px;
	}

	.sf-smarter-eyebrow {
		display: block;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		background: var(--sf-brand-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: #D9CA2B;  /* fallback — Fusion supporting yellow */
		margin-bottom: 20px;
		font-family: Inter, -apple-system, 'system-ui', sans-serif;
	}

	.sf-smarter-headline {
		font-family: Inter, -apple-system, 'system-ui', sans-serif;
		font-size: clamp(30px, 3.6vw, 46px);
		font-weight: 600;
		letter-spacing: -0.030em;
		line-height: 1.1;
		color: #1d1d1f;
		margin: 0 0 22px;
	}

	.sf-smarter-lead {
		font-size: clamp(15px, 1.4vw, 17px);
		line-height: 1.66;
		color: #6e6e73;
		margin: 0;
		font-family: Inter, -apple-system, 'system-ui', sans-serif;
	}

	/* ── Card grid ── */
	/* gap:1px + background colour = hairline dividers between all cells */
	.sf-smarter-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 1px;
		background: rgba(0,0,0,0.08);
		border: 1px solid rgba(0,0,0,0.08);
		border-radius: 12px;
		overflow: hidden;
	}

	/* ── Individual card ── */
	.sf-smarter-card {
		display: flex;
		flex-direction: column;
		padding: 32px 20px 28px;
		background: #ffffff;
		position: relative;
		cursor: default;
		/* Scroll reveal — hidden until IntersectionObserver fires */
		opacity: 0;
		transform: translateY(12px);
		transition:
			opacity    0.50s cubic-bezier(0.22, 1, 0.36, 1),
			transform  0.50s cubic-bezier(0.22, 1, 0.36, 1),
			background 0.22s ease;
	}

	.sf-smarter-card.sf-smarter-visible {
		opacity: 1;
		transform: translateY(0);
	}

	/* Gradient top-border accent — animates in on hover */
	.sf-smarter-card::before {
		content: '';
		position: absolute;
		top: 0; left: 0; right: 0;
		height: 2px;
		background: var(--sf-brand-gradient);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.sf-smarter-card.sf-smarter-visible:hover::before {
		transform: scaleX(1);
	}

	.sf-smarter-card.sf-smarter-visible:hover {
		background: #f9f9fb;
	}

	/* ── Step number — gradient accent ── */
	.sf-smarter-card-num {
		display: block;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.08em;
		font-family: Inter, -apple-system, sans-serif;
		background: var(--sf-brand-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: #D9CA2B;  /* fallback — Fusion supporting yellow */
		margin-bottom: 20px;
		line-height: 1;
		user-select: none;
	}

	/* ── Large display letter ── */
	.sf-smarter-card-letter {
		font-family: Inter, -apple-system, 'system-ui', sans-serif;
		font-size: clamp(38px, 3.8vw, 54px);
		font-weight: 700;
		line-height: 1;
		letter-spacing: -0.04em;
		color: #1d1d1f;
		margin-bottom: 20px;
		transition: opacity 0.25s ease;
	}

	/* ── Step title ── */
	.sf-smarter-card-title {
		font-size: 13px;
		font-weight: 600;
		letter-spacing: -0.01em;
		line-height: 1.3;
		color: #1d1d1f;
		margin: 0 0 8px;
		font-family: Inter, -apple-system, 'system-ui', sans-serif;
		transition: opacity 0.25s ease;
	}

	/* ── Step body ── */
	.sf-smarter-card-body {
		font-size: 12px;
		line-height: 1.60;
		color: #8e8e93;
		margin: 0;
		font-family: Inter, -apple-system, 'system-ui', sans-serif;
		flex: 1;
		transition: opacity 0.25s ease;
	}

	/* Spotlight: non-hovered cards recede */
	.sf-smarter-grid:has(.sf-smarter-card:hover) .sf-smarter-card:not(:hover) .sf-smarter-card-letter,
	.sf-smarter-grid:has(.sf-smarter-card:hover) .sf-smarter-card:not(:hover) .sf-smarter-card-title {
		opacity: 0.28;
	}

	.sf-smarter-grid:has(.sf-smarter-card:hover) .sf-smarter-card:not(:hover) .sf-smarter-card-body {
		opacity: 0.22;
	}

	/* ── Reduced motion ── */
	@media (prefers-reduced-motion: reduce) {
		.sf-smarter-card {
			opacity: 1 !important;
			transform: none !important;
			transition: none !important;
		}
		.sf-smarter-grid:has(.sf-smarter-card:hover) .sf-smarter-card:not(:hover) .sf-smarter-card-letter,
		.sf-smarter-grid:has(.sf-smarter-card:hover) .sf-smarter-card:not(:hover) .sf-smarter-card-title,
		.sf-smarter-grid:has(.sf-smarter-card:hover) .sf-smarter-card:not(:hover) .sf-smarter-card-body {
			opacity: 0.7;
		}
	}

	/* ── Tablet 641–1099px — 4-column grid ── */
	@media (max-width: 1099px) and (min-width: 641px) {
		.sf-smarter-grid {
			grid-template-columns: repeat(4, 1fr);
		}
		.sf-smarter-header { margin-bottom: 48px; }
	}

	/* ── Mobile ≤ 640px — 2-column grid ── */
	@media (max-width: 640px) {
		.sf-smarter-section  { padding: clamp(56px, 7vh, 72px) var(--pad, 20px); }
		.sf-smarter-header   { margin-bottom: 40px; }
		.sf-smarter-grid {
			grid-template-columns: repeat(2, 1fr);
		}
		.sf-smarter-card {
			padding: 24px 16px 20px;
		}
		.sf-smarter-card-letter { font-size: clamp(34px, 9vw, 48px); }
		/* Reset spotlight — no hover on touch */
		.sf-smarter-grid:has(.sf-smarter-card:hover) .sf-smarter-card:not(:hover) .sf-smarter-card-letter,
		.sf-smarter-grid:has(.sf-smarter-card:hover) .sf-smarter-card:not(:hover) .sf-smarter-card-title,
		.sf-smarter-grid:has(.sf-smarter-card:hover) .sf-smarter-card:not(:hover) .sf-smarter-card-body {
			opacity: 1;
		}
	}

	/* ══════════════════════════════════════════════════════════════
	   §ECOSYSTEM · Concept intro (Section 1)
	   Just the idea — no cards, no company detail.
	   ══════════════════════════════════════════════════════════════ */

	.sf-eco-intro {
		padding-top: 120px !important;
		padding-bottom: 120px !important;
		background: #F5F5F7;
	}

	.sf-eco-intro .sf-ps-inner {
		text-align: center;
	}

	.sf-eco-intro-hdr {
		max-width: 760px;
		margin: 0 auto;
		text-align: center;
	}

	.sf-eco-intro-hdr .sf-h2 {
		font-size: clamp(40px, 5vw, 56px) !important;
		letter-spacing: -0.022em !important;
		line-height: 1.08 !important;
		max-width: 760px !important;
		margin: 0 auto !important;
	}

	.sf-eco-intro-hdr .sf-lead {
		font-size: clamp(18px, 1.6vw, 22px) !important;
		line-height: 1.5 !important;
		max-width: 680px !important;
		margin: 24px auto 0 !important;
		color: #6E6E73 !important;
	}

	@media (max-width: 580px) {
		.sf-eco-intro {
			padding-top: 80px !important;
			padding-bottom: 80px !important;
		}
	}

	/* ══════════════════════════════════════════════════════════════
	   §ECOSYSTEM-ARCH · Apple-style Platform + Capability Layers
	   Fusion = platform layer. Sense / Vision / Synergy = capabilities.
	   ══════════════════════════════════════════════════════════════ */

	.sf-arch-section {
		background: #ffffff;
		padding: 120px 24px;
		font-family: Inter, -apple-system, BlinkMacSystemFont, 'system-ui', sans-serif;
	}

	.sf-arch-inner {
		max-width: 1120px;
		margin: 0 auto;
	}

	/* ── Section header ── */
	.sf-arch-header {
		text-align: center;
		margin: 0 auto;
	}

	.sf-arch-eyebrow {
		display: block;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #6E6E73;
		margin-bottom: 16px;
	}

	.sf-arch-headline {
		font-size: clamp(34px, 4.5vw, 48px) !important;
		font-weight: 600 !important;
		letter-spacing: -0.02em !important;
		line-height: 1.05 !important;
		color: #1D1D1F !important;
		max-width: 760px;
		margin: 0 auto;
	}

	.sf-arch-lead {
		font-size: 18px;
		line-height: 1.6;
		font-weight: 400;
		color: #6E6E73;
		max-width: 680px;
		margin: 20px auto 0;
	}

	/* ── Subtle divider above product row ── */
	.sf-arch-divider {
		border: 0;
		height: 1px;
		width: 80%;
		max-width: 880px;
		background: #E5E5EA;
		margin: 72px auto 0;
	}

	/* ── Product family grid ── */
	.sf-arch-children {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 48px;
		margin: 56px auto 0;
		max-width: 960px;
		align-items: start;
	}

	/* ── Transparent product tile — typography only ── */
	.sf-arch-card {
		background: transparent;
		border: 0;
		border-radius: 0;
		padding: 24px 0;
		box-shadow: none;
		position: relative;
		transition: transform 0.25s ease;
	}

	.sf-arch-card:hover {
		transform: translateY(-3px);
	}

	/* 40x2px coloured accent line above the company name */
	.sf-arch-card::before {
		content: '';
		display: block;
		width: 40px;
		height: 2px;
		margin-bottom: 16px;
		background: currentColor;
		border-radius: 1px;
	}

	.sf-arch-card.c-sense   { color: #76B900; }
	.sf-arch-card.c-vision  { color: #E02020; }
	.sf-arch-card.c-synergy { color: #0F528C; }

	.sf-arch-card-name {
		font-size: 24px;
		font-weight: 600;
		letter-spacing: -0.01em;
		line-height: 1.2;
		color: #1D1D1F !important;
		margin: 0;
	}

	.sf-arch-card-body {
		font-size: 16px;
		line-height: 1.6;
		color: #6E6E73;
		margin: 8px 0 0;
		max-width: 260px;
	}

	/* ── Responsive ── */
	@media (max-width: 900px) {
		.sf-arch-children {
			grid-template-columns: repeat(2, 1fr);
			gap: 40px;
		}
	}

	@media (max-width: 580px) {
		.sf-arch-section { padding: 80px 20px; }
		.sf-arch-children {
			grid-template-columns: 1fr;
			gap: 32px;
			margin-top: 40px;
		}
		.sf-arch-divider { margin-top: 56px; }
	}