/* ---- css/theme.css ---- */

* { margin: 0px; padding: 0px; -webkit-box-sizing: border-box; 	-moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
html, body, button, input, select, textarea { font-family: Arial; color: #8c806e; }
/* NOTE: the old template forced font-size:12px here, which silently shrank the
   whole page's root font size (rem units included) only on this page — that's
   why the nav pill looked smaller/lighter here than on aboutus.html and
   details.html, which never had this reset. Removed so all 3 pages share the
   same 16px root and the nav renders identically everywhere. */
ul, ol { margin-top: 0; margin-bottom: 10px; }
ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; }
li { font-size: 13px; margin: 5px 0px 10px 0px; }
pre { overflow: auto; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; quotes: none; }
a img { border: 0; }
a, input { outline: none; }
a { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; color: #06C;  }
a:hover { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 5px 0px 15px 0px; clear: both; font-weight: lighter; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 14px; }
p {font-size: 13px; margin: 5px 0px 15px 0px; }

.enter {
	font-size: 16px;
	color: #000;
	line-height: 22px;
}

img { -ms-interpolation-mode: bicubic; border: 0; height: auto; max-width: 100%; vertical-align: middle; display: block;  }
figure { margin: 0; }
::-webkit-input-placeholder { color: rgba(51, 51, 51, 0.7); }
:-moz-placeholder { color: rgba(51, 51, 51, 0.7); }
::-moz-placeholder { color: rgba(51, 51, 51, 0.7); opacity: 1;  }
:-ms-input-placeholder { color: rgba(51, 51, 51, 0.7); }
input:focus, textarea:focus { outline: none; background-color: #fff; border: 1px solid #c1c1c1; border: 1px solid rgba(51, 51, 51, 0.3); color: #333; }
input:focus, select:focus { outline: 2px solid #c1c1c1; outline: 2px solid rgba(51, 51, 51, 0.3); }

.clear { clear: both; height: 0px; overflow: hidden; }

.DesignHolder { position: relative; display: block; width: 100%; min-height: 100%; }

.LayoutFrame { margin: 0 auto; width: 100%; display: block; }

body {
	background: #fff;
	font-family: 'Open Sans', sans-serif;
}

	footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		overflow: hidden;

		background: rgba(18, 83, 148, 0.267);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		border-top: 1px solid rgba(6,86,160,0.06);
		transform: translateY(100%);
		transition: transform .28s ease, opacity .2s ease;
		z-index: 1400;
		will-change: transform;
	}
	footer.visible { transform: translateY(0); }

	footer .Center { padding: 6px 0px; max-width: 1180px; margin: auto; text-align: center; }
	footer p { font-size: 14px; color: #000; margin: 0px;  font-family: 'Open Sans', sans-serif; font-weight: 400; line-height: 1.2; }
	footer a { color: #000; text-decoration: none; }

.reveal {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
	will-change: opacity, transform;
}
.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.reveal, .reveal.visible { transition: none !important; transform: none !important; opacity: 1 !important; }
}

.philosophy-subheading {
	font-family: 'Open Sans', 'Segoe UI', Roboto, Arial, sans-serif;
	font-weight: 600 !important;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: #0b1720;
	text-shadow: none;
	font-style: normal;
	text-transform: none;
	display: block;
	margin: 0 auto 48px;
}

@media (max-width: 480px) {
	.philosophy-subheading {
		font-weight: 600 !important;
		font-size: clamp(1.25rem, 6vmin, 1.8rem);
		margin-bottom: 32px;
	}
}

.scroll-to-top {
	position: fixed;
	right: 18px;
	top: 50%;
	bottom: auto;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #0adbd165, #0a58ca);
	color: #fff;
	border-radius: 50%;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(13,37,77,0.18);
	z-index: 1400;
	opacity: 0;
	transform: translateY(-50%) translateX(8px);
	transition: opacity .22s ease, transform .22s ease;
}
.scroll-to-top.visible { opacity: 1; transform: translateY(-50%) translateX(0); }
.scroll-to-top:focus { outline: 2px solid rgba(255,255,255,0.18); }

@media (max-width: 480px) {
	.scroll-to-top { right: 12px; bottom: 14px; top: auto; width:40px; height:40px; transform: translateY(0); }
}
/* ---- css/media.css ---- */

.philosophy-section {
	padding: 120px 30px;
	background: linear-gradient(180deg,
			var(--primary-black) 0%,
			rgba(119, 56, 197, 0.966) 50%,
			var(--primary-black) 100%);
	position: relative;
	overflow: hidden;
}

.philosophy-container {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

.prism-line {
	width: 100%;
	height: 2px;
	margin: 0 auto 60px;
	position: relative;
	overflow: hidden;
	background: var(--carbon-medium);
}

.prism-line::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,
			transparent,
			var(--accent-red) 20%,
			var(--accent-blue) 40%,
			var(--accent-green) 60%,
			var(--accent-purple) 80%,
			transparent);

	animation: prismSweep 4s ease-in-out infinite;
}

@keyframes prismSweep {
	0% {
		left: -100%;
	}

	100% {
		left: 100%;
	}
}

.philosophy-headline {
	font-size: 46px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 30px;
	line-height: 1.2;
	background: linear-gradient(135deg,
			var(--accent-cyan) 0%,
			var(--accent-purple) 25%,
			var(--accent-blue) 50%,
			var(--accent-green) 75%,
			var(--accent-cyan) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	background-size: 200% 200%;
	animation: gradientFlow 5s ease infinite;
}

@keyframes gradientFlow {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.philosophy-subheading {
	font-size: 46px;
	color: black;
	text-shadow: #005a84 1px 1px 2px;
	max-width: 700px;
	margin: 0 auto 80px;
	line-height: 1.6;
	font-weight: 300;
}

.philosophy-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 50px;
	margin-bottom: 60px;
}

.pillar {
	position: relative;
	padding: 40px 30px;
	background: linear-gradient(135deg,
			rgba(7, 177, 112, 0.425),
			rgba(4, 27, 231, 0.541));
	border: 1px solid var(--metal-dark);
	border-radius: 20px;
	transition: all 0.4s ease;
	overflow: hidden;
}

.pillar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg,
			var(--accent-purple),
			var(--accent-blue),
			var(--accent-green));
	transform: scaleX(0);
	transition: transform 0.4s ease;
}

.pillar:hover::before {
	transform: scaleX(1);
}

.pillar:hover {
	transform: translateY(-10px);
	border-color: var(--accent-purple);
	box-shadow: 0 20px 40px rgba(0, 4, 216, 0.548);
	background: linear-gradient(135deg,
			rgba(245, 142, 7, 0.541),
			rgba(90, 4, 4, 0.438));
}

.pillar-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	position: relative;
}

.pillar-icon::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
	border-radius: 50%;
	opacity: 0.2;
	animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {

	0%,
	100% {
		transform: scale(1);
		opacity: 0.2;
	}

	50% {
		transform: scale(1.2);
		opacity: 0.1;
	}
}

.pillar-title {
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 15px;
	color: rgb(9, 110, 156);
}

.pillar-description {
	font-size: 19px;
	color: #ffffff;
	line-height: 1.6;
}
.pillar-description a {
	color: var(--accent-cyan);
	text-decoration: none;
	transition: all 0.3s ease;
	position: relative;
}

.pillar-description a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--accent-cyan);
	transition: width 0.3s ease;
}

.pillar-description a:hover {
	color: var(--accent-purple);
}

.pillar-description a:hover::after {
	width: 100%;
}

.philosophy-particles {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
}

.particle {
	position: absolute;
	width: 4px;
	height: 4px;
	background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
	border-radius: 50%;
	opacity: 0;
	animation: float-particle 20s infinite linear;
}

@keyframes float-particle {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 0;
	}

	5% {
		opacity: 1;
	}

	95% {
		opacity: 1;
	}

	100% {
		transform: translateY(-100vh) rotate(720deg);
		opacity: 0;
	}
}

/* ---- css/professional-theme.css ---- */

/* Cinzel/Inter now loaded via <link> in <head> — see index.html */

:root {

	--wf-ink: #eef8fc;
	--wf-navy: #d6edf8;
	--wf-navy-2: #bfe3f5;
	--wf-blue: #4db8e8;
	--wf-blue-deep: #1f6f95;
	--wf-gold: #ffb648;
	--wf-gold-soft: #ffd9a0;
	--wf-gold-deep: #d9662a;
	--wf-ember: #ff8a50;
	--wf-paper: #ffffff;
	--wf-surface: #ffffff;
	--wf-text: #1c2b38;
	--wf-muted: #55697a;

	--wf-cream: var(--wf-text);
	--wf-cream-muted: rgba(28, 43, 56, 0.72);
	--wf-glass: rgba(255, 255, 255, 0.55);
	--wf-glass-strong: rgba(255, 255, 255, 0.85);

	--header-height: 84px;
	--footer-height: 56px;
	--bg: var(--wf-ink);
	--bg-bottom: var(--wf-ink);
	--bg-top: var(--wf-navy-2);
	--surface: var(--wf-glass);
	--header-bg: rgba(255, 255, 255, 0.85);
	--header-border: rgba(77, 184, 232, 0.35);
	--footer-bg: rgba(238, 248, 252, 0.96);
	--footer-border: rgba(77, 184, 232, 0.3);
	--text: var(--wf-text);
	--muted: var(--wf-cream-muted);
	--accent-1: rgba(77, 184, 232, 0.14);
	--accent-2: var(--wf-blue-deep);

	--primary-black: var(--wf-ink);
	--carbon-medium: rgba(77, 184, 232, 0.22);
	--metal-dark: rgba(255, 138, 80, 0.22);
	--accent-red: var(--wf-gold-deep);
	--accent-blue: var(--wf-blue);
	--accent-green: var(--wf-gold);
	--accent-purple: var(--wf-blue-deep);
	--accent-cyan: var(--wf-blue);
}

html, body, button, input, select, textarea {
	font-family: 'Inter', 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.page-title__inner, .contact-title, .get-involved__title,
.box-title, .gi-card__name,
.philosophy-subheading, .pillar-title,
.blog-slider__title,
.Product_sec .Details h3,
.Navigation li a span,
.site-nav__menu a,
.get-involved__title, .contact-title {
	font-family: 'Cinzel', 'Open Sans', serif;
	letter-spacing: 0.03em;
}

a { color: var(--wf-blue-deep); }

::selection { background: var(--wf-gold-soft); color: var(--wf-text); }

body {
	background-color: var(--wf-ink) !important;
	background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
	background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
	background-size: 28px 28px, auto, auto, auto, auto, auto !important;
	background-attachment: fixed !important;
	background-image:
		radial-gradient(rgba(31, 111, 149, 0.07) 1px, transparent 1.6px),
		radial-gradient(circle at 10% 6%, rgba(255, 138, 80, 0.18), transparent 40%),
		radial-gradient(circle at 92% 14%, rgba(77, 184, 232, 0.20), transparent 42%),
		radial-gradient(circle at 18% 96%, rgba(255, 182, 72, 0.16), transparent 38%),
		radial-gradient(circle at 94% 90%, rgba(31, 111, 149, 0.14), transparent 44%),
		linear-gradient(180deg, var(--wf-ink) 0%, var(--wf-navy-2) 100%) !important;
}

@media (pointer: coarse) {
	body {
		background-attachment: scroll !important;
	}
}

.header {
	background-image: none !important;
	background-color: var(--wf-ink) !important;
	background: radial-gradient(ellipse at 20% -10%, rgba(255, 138, 80, 0.16), transparent 55%),
		linear-gradient(160deg, var(--wf-ink) 0%, var(--wf-navy) 48%, var(--wf-navy-2) 100%) !important;
	position: relative;
	overflow: hidden;
}
.header::before {

	content: '';
	position: absolute;
	inset: -20%;
	background: radial-gradient(circle at 30% 30%, rgba(255, 138, 80, 0.18), transparent 45%),
		radial-gradient(circle at 75% 60%, rgba(77, 184, 232, 0.18), transparent 40%);
	animation: wf-glow-drift 16s ease-in-out infinite alternate;
	pointer-events: none;
}
@keyframes wf-glow-drift {
	0%   { transform: translate(-2%, -2%) scale(1); }
	100% { transform: translate(3%, 3%) scale(1.08); }
}

.Navigation li a { color: #ffffff; letter-spacing: 0.08em; transition: color .3s ease, text-shadow .3s ease; }
.Navigation li a:hover, .Navigation li.active a { color: var(--wf-gold-deep); text-shadow: 0 0 10px rgba(255, 138, 80, 0.35); }

.Product_sec .Details h3,
.Product_sec li .left .Details h3 {
	color: var(--wf-text) !important;
	text-shadow: 0 2px 14px rgba(77, 184, 232, 0.18) !important;
}
.Product_sec .Details p, .Product_sec .Details p.words,
.Product_sec li .left .Details p {
	color: var(--wf-muted) !important;
}

#media-figure {
	border-radius: 18px;
	box-shadow: 0 0 0 1px rgba(77, 184, 232, 0.4), 0 20px 50px rgba(31, 111, 149, 0.18);
}

.philosophy-section {
	background: linear-gradient(180deg, var(--wf-ink) 0%, var(--wf-navy) 45%, var(--wf-ink) 100%) !important;
}
.prism-line { background: rgba(77, 184, 232, 0.28) !important; }
.prism-line::before {
	background: linear-gradient(90deg, transparent, var(--wf-gold) 45%, var(--wf-blue) 55%, transparent) !important;
}
.philosophy-subheading {
	color: var(--wf-text) !important;
	text-shadow: 0 0 16px rgba(77, 184, 232, 0.18) !important;
}
.pillar {
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(214, 237, 248, 0.55)) !important;
	border: 1px solid rgba(77, 184, 232, 0.3) !important;
	backdrop-filter: blur(6px);
}
.pillar::before {
	background: linear-gradient(90deg, var(--wf-gold-deep), var(--wf-gold), var(--wf-blue)) !important;
}
.pillar:hover {
	border-color: rgba(77, 184, 232, 0.55) !important;
	box-shadow: 0 20px 40px rgba(31, 111, 149, 0.15), 0 0 26px rgba(255, 138, 80, 0.18) !important;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(214, 237, 248, 0.7)) !important;
}
.pillar-icon::before {
	background: radial-gradient(circle, rgba(255, 138, 80, 0.35), transparent 70%) !important;
}
.pillar-icon img { filter: drop-shadow(0 4px 10px rgba(31, 111, 149, 0.2)); transition: transform .35s ease; }
.pillar:hover .pillar-icon img { transform: scale(1.08) translateY(-2px); }
.pillar-title { color: var(--wf-blue-deep) !important; }
.pillar-description { color: var(--wf-muted) !important; }

footer { background: transparent !important; border-top: 0 !important; box-shadow: none !important; }
footer p, footer a { color: var(--wf-text) !important; }

.scroll-to-top {
	background: linear-gradient(180deg, var(--wf-gold), var(--wf-gold-deep)) !important;
	box-shadow: 0 8px 20px rgba(31, 111, 149, 0.25), 0 0 0 1px rgba(255, 138, 80, 0.4) !important;
}

.scroll-to-top.at-footer {
	opacity: 0 !important;
	pointer-events: none;
}

.philosophy-particles .particle {
	background: radial-gradient(circle, #fff1d9 0%, var(--wf-gold) 55%, transparent 75%) !important;
	box-shadow: 0 0 6px rgba(255, 182, 72, 0.7);
}

.site-header {
	background: var(--header-bg) !important;
	border-bottom: 1px solid var(--header-border) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: height .35s cubic-bezier(.4,0,.2,1),
		background .35s ease, box-shadow .35s ease, border-color .35s ease;
	animation: wf-nav-drop .7s cubic-bezier(.16,1,.3,1) both;
}

.site-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 10px 2vmin;
	gap: 1rem;
}

.site-header--no-logo .site-inner {
	justify-content: center;
}

.site-header--no-logo .site-nav__menu a {
	text-transform: uppercase;
}

.site-header--no-logo {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: var(--header-height);
	z-index: 1200;
	margin: 0;
	box-shadow: 0 6px 20px rgba(15, 40, 75, 0.06);
}
.site-header--no-logo .site-inner {
	padding: 0 2vmin;
}
@keyframes wf-nav-drop {
	from { opacity: 0; transform: translateY(-100%); }
	to   { opacity: 1; transform: translateY(0); }
}

.site-header.is-scrolled {
	height: 62px;
	background: transparent !important;
	box-shadow: 0 10px 26px rgba(31, 111, 149, 0.15);
	border-bottom-color: rgba(77, 184, 232, 0.5) !important;
}

.site-header.is-scrolled .site-logo img { transform: scale(0.75); }

.site-logo img {
	height: 56px;
	width: 70px;
	max-width: none;
	object-fit: contain;
	flex-shrink: 0;
	display: block;
	filter: drop-shadow(0 0 8px rgba(255, 138, 80, 0.3));
	transform-origin: left center;
	transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.site-logo:hover img { transform: scale(1.05); }
.site-header.is-scrolled .site-logo:hover img { transform: scale(0.8); }

.site-nav__menu a {
	position: relative;
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	color: var(--wf-text) !important;
	text-decoration: none;
	display: inline-block;
	padding: 8px 10px;
	border-radius: 6px;
	overflow: hidden;
	white-space: nowrap;
	transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
	animation: wf-link-drop .6s cubic-bezier(.16,1,.3,1) both;
}

@media (max-width: 800px) {
	.site-nav__menu { gap: 0.55rem; }
	.site-inner { gap: 0.55rem; }
	.site-nav__menu a {
		font-size: 0.92rem;
		padding: 6px 8px;
	}

	.site-nav__menu a.site-nav__cta { padding: 6px 12px !important; }

	.site-nav__menu a.active { padding: 6px 8px; }
}

@media (max-width: 480px) {
	.site-nav__menu { gap: 0.35rem; }
	.site-inner { gap: 0.35rem; }
	.site-nav__menu a {
		font-size: 0.8rem;
		letter-spacing: 0.02em;
		padding: 6px 7px;
	}
	.site-nav__menu a.site-nav__cta { padding: 6px 10px !important; }
	.site-nav__menu a.active { padding: 6px 7px; }
}

@media (max-width: 360px) {
	.site-logo img { height: 40px; width: 50px; }
	.site-inner { gap: 0.2rem; padding: 0 1.2vmin; }
	.site-nav__menu { gap: 0.2rem; row-gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
	.site-nav__menu a { padding: 5px 6px; font-size: 0.74rem; }
	.site-nav__menu a.site-nav__cta { padding: 5px 8px !important; }
	.site-nav__menu a.active { padding: 5px 6px; }
}
.site-nav__menu a:nth-child(1) { animation-delay: .15s; }
.site-nav__menu a:nth-child(2) { animation-delay: .25s; }
.site-nav__menu a:nth-child(3) { animation-delay: .35s; }
.site-nav__menu a:nth-child(4) { animation-delay: .45s; }

.site-nav__menu a.site-nav__cta {
	background: linear-gradient(90deg, var(--wf-gold), var(--wf-gold-deep)) !important;
	color: #fff !important;
	padding: 8px 16px;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(217, 102, 42, 0.32);
}
.site-nav__menu a.site-nav__cta::after { display: none; }
.site-nav__menu a.site-nav__cta:hover {
	background: linear-gradient(90deg, var(--wf-gold-deep), var(--wf-gold)) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(217, 102, 42, 0.4);
}
@keyframes wf-link-drop {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.site-nav__menu a::after {
	content: '';
	position: absolute;
	left: 10px; right: 10px; bottom: 2px;
	height: 2px;
	background: linear-gradient(90deg, var(--wf-gold-deep), var(--wf-blue));
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.site-nav__menu a::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: -60%;
	width: 40%;
	background: linear-gradient(115deg, transparent, rgba(77, 184, 232, 0.2), transparent);
	transform: skewX(-20deg);
	transition: left .55s ease;
	pointer-events: none;
}
.site-nav__menu a:hover::before { left: 130%; }

.site-nav__menu a:hover {
	background: rgba(77, 184, 232, 0.14) !important;
	color: var(--wf-blue-deep) !important;
	transform: translateY(-1px);
}
.site-nav__menu a.active {
	background: rgba(255, 138, 80, 0.16) !important;
	color: var(--wf-gold-deep) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 138, 80, 0.35);
}
.site-nav__menu a:hover::after, .site-nav__menu a.active::after { transform: scaleX(1); }

.site-nav__menu a.active { animation: wf-link-drop .6s cubic-bezier(.16,1,.3,1) both, wf-active-pulse 2.6s ease-in-out .6s infinite; }
@keyframes wf-active-pulse {
	0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 138, 80, 0.35), 0 0 0 rgba(255, 138, 80, 0); }
	50%      { box-shadow: inset 0 0 0 1px rgba(255, 138, 80, 0.55), 0 0 14px rgba(255, 138, 80, 0.28); }
}

.site-nav__toggle span { background: var(--wf-text) !important; transition: transform .3s ease, opacity .3s ease; }

.site-nav__toggle { display: none; background: transparent; border: 0; }

.box {
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(214, 237, 248, 0.6)) !important;
	box-shadow: 0 16px 32px rgba(31, 111, 149, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
	border: 1px solid rgba(77, 184, 232, 0.3) !important;
	transition: box-shadow .3s ease, border-color .3s ease;
}
.box:hover {
	box-shadow: 0 22px 44px rgba(31, 111, 149, 0.18), 0 0 22px rgba(255, 138, 80, 0.16) !important;
	border-color: rgba(77, 184, 232, 0.55) !important;
}
.box-desc span { color: var(--wf-text) !important; }

.box-title, .gi-card__name {
	color: var(--wf-text) !important;
	background: linear-gradient(180deg, rgba(255, 182, 72, 0.28), rgba(255, 255, 255, 0.65)) !important;
	box-shadow:
		0 10px 20px -6px rgba(255, 138, 80, 0.30),
		0 2px 6px rgba(31, 111, 149, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
	text-shadow: none !important;
	border-radius: 14px;
	padding: 6px 16px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: transform .25s ease, box-shadow .25s ease;
}
.box:hover .box-title,
.gi-card:hover .gi-card__name {
	transform: translateY(-2px);
	box-shadow:
		0 14px 26px -6px rgba(255, 138, 80, 0.34),
		0 4px 10px rgba(31, 111, 149, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.gi-card {
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(214, 237, 248, 0.6)) !important;
	box-shadow: 0 16px 32px rgba(31, 111, 149, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
	border: 1px solid rgba(77, 184, 232, 0.3) !important;
	transition: box-shadow .3s ease, border-color .3s ease;
}
.gi-card:hover {
	box-shadow: 0 22px 44px rgba(31, 111, 149, 0.18), 0 0 22px rgba(255, 138, 80, 0.16) !important;
	border-color: rgba(77, 184, 232, 0.55) !important;
}
.gi-card__desc { color: var(--wf-muted) !important; }
.gi-card__img { filter: drop-shadow(0 4px 10px rgba(31, 111, 149, 0.14)); transition: transform .3s ease; }

.blog-slider {
	background: var(--wf-surface) !important;
	box-shadow: 0 20px 50px rgba(31, 111, 149, 0.15) !important;
}
.blog-slider::before, .blog-slider::after {
	background-image: conic-gradient(from var(--angle), var(--wf-blue), var(--wf-gold), var(--wf-ink)) !important;
}
.blog-slider__img {
	background-image: linear-gradient(150deg, var(--wf-navy) 0%, var(--wf-navy-2) 100%) !important;
	box-shadow: 0 14px 30px rgba(31, 111, 149, 0.2) !important;
}
.blog-slider__code { color: var(--wf-gold-deep) !important; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.blog-slider__title { color: var(--wf-blue-deep) !important; }
.blog-slider__text { color: var(--wf-muted) !important; }
.blog-slider__button {
	background-image: linear-gradient(150deg, var(--wf-gold) 0%, var(--wf-gold-deep) 100%) !important;
	box-shadow: 0 14px 28px rgba(255, 138, 80, 0.3) !important;
}
.blog-slider__pagination .swiper-pagination-bullet { background: var(--wf-navy-2) !important; }
.blog-slider__pagination .swiper-pagination-bullet-active {
	background: var(--wf-blue) !important;
	box-shadow: 0 0 12px rgba(77, 184, 232, 0.5) !important;
}

.reveal.visible h1, .reveal.visible h2, .reveal.visible h3 { animation: wf-text-rise .3s ease both; }
@keyframes wf-text-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.header::before { animation: none !important; }
	.site-header, .site-nav__menu a, .site-nav__menu a.active { animation: none !important; }
	.site-nav__menu a::before { display: none !important; }
}

footer .Center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
footer .footer-credit {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.footer-social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
}
.footer-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    line-height: 1;
    border-radius: 50%;
    color: var(--wf-blue-deep) !important;
    background: rgba(77, 184, 232, 0.14);
    transition: transform .18s ease, background .18s ease;
    text-decoration: none !important;
}
.footer-social__link:hover,
.footer-social__link:focus-visible {
    transform: translateY(-2px) scale(1.08);
    background: rgba(77, 184, 232, 0.26);
}
.footer-social__link i,
.footer-social__link .icon {
    font-size: 12px;
    color: var(--wf-blue-deep);
}
.footer-social__link img {
    width: 14px;
    height: 14px;
    max-width: 14px;
    max-height: 14px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.footer-social__link--text {
    width: auto;
    border-radius: 999px;
    padding: 4px 12px 4px 10px;
    gap: 6px;
}
.footer-social__link--text i,
.footer-social__link--text .icon {
    font-size: 12px;
}
.footer-social__link--text span {
    font-size: 12px;
    font-weight: 600;
    color: var(--wf-blue-deep);
    white-space: nowrap;
}

footer {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
}

footer { margin-top: 18px; }

footer .Center {
    max-width: 560px;
    width: auto;
    margin: 0 auto !important;
    border-radius: 28px !important;
    background: transparent !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow:
        0 1px 1px rgba(15, 25, 40, 0.03),
        0 10px 24px rgba(15, 25, 40, 0.08),
        0 20px 40px -16px rgba(31, 111, 149, 0.20) !important;
    padding: 12px 26px !important;
}

footer .footer-credit {
    font-size: 13px;
    color: var(--wf-text) !important;
}
.footer-social { margin-left: 2px; }
.footer-social__link {
    background: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 0 0 1px rgba(77, 184, 232, 0.25);
}
.footer-social__link:hover,
.footer-social__link:focus-visible {
    background: rgba(77, 184, 232, 0.22);
}
.footer-social__link--text {
    background: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 0 0 1px rgba(77, 184, 232, 0.25);
}

@media (max-width: 480px) {
    footer { padding: 0 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
    footer .Center {
        max-width: none;
        border-radius: 22px !important;
        padding: 10px 14px !important;
    }
    footer .footer-credit { font-size: 12px; }
}

/* ---- css/3d-enhance.css ---- */

.header { perspective: 1400px; }

.hero-orbit { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.orbit-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .38;
}
.orbit-glow--a { width: 320px; height: 320px; top: -8%; right: -6%; background: radial-gradient(circle, var(--wf-ember, #d9793c), transparent 70%); }
.orbit-glow--b { width: 260px; height: 260px; bottom: -10%; left: -6%; background: radial-gradient(circle, var(--wf-gold, #c9a24a), transparent 70%); }

.orbit-badge {
	position: absolute;
	width: 88px; height: 88px;
	border-radius: 50%;
	padding: 5px;
	background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.02));
	border: 1px solid rgba(201,162,74,.45);
	box-shadow:
		0 22px 40px rgba(0,0,0,.5),
		0 0 0 6px rgba(13,17,23,.4),
		inset 0 1px 3px rgba(255,255,255,.3);
	backdrop-filter: blur(4px);
	pointer-events: auto;
	animation: wf-badge-float 6.5s ease-in-out infinite;
	transition: transform .3s ease, box-shadow .3s ease;
}
.orbit-badge::before {
	content: '';
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--wf-ember, #d9793c), var(--wf-gold, #c9a24a), var(--wf-gold-soft, #e3c98a), var(--wf-ember, #d9793c));
	opacity: .5;
	filter: blur(5px);
	z-index: -1;
	animation: wf-badge-spin 9s linear infinite;
}
.orbit-badge img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	filter: drop-shadow(0 6px 8px rgba(0,0,0,.4));
}
.orbit-badge:hover {
	transform: translateY(-6px) scale(1.08);
	box-shadow:
		0 26px 46px rgba(0,0,0,.55),
		0 0 0 6px rgba(13,17,23,.4),
		0 0 26px rgba(201,162,74,.4),
		inset 0 1px 3px rgba(255,255,255,.35);
}

@keyframes wf-badge-spin { to { transform: rotate(360deg); } }
@keyframes wf-badge-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-14px) rotate(3deg); }
}

.orbit-badge--1 { top: 8%;  right: 4%;  animation-delay: .1s; }
.orbit-badge--2 { top: 27%; right: 21%; width: 62px; height: 62px; animation-delay: 1.3s; }
.orbit-badge--3 { bottom: 16%; left: 4%;  animation-delay: .7s; }
.orbit-badge--4 { bottom: 5%;  left: 21%; width: 60px; height: 60px; animation-delay: 2.1s; }

[data-tilt] { transition: transform .25s ease-out; will-change: transform; }

#media-figure, .Product_sec li .left .img figure {
	transform-style: preserve-3d;
	box-shadow:
		0 0 0 1px rgba(201,162,74,.4),
		0 26px 55px rgba(0,0,0,.5),
		0 2px 0 rgba(201,162,74,.25);
}

#media-figure img {
	filter: drop-shadow(0 14px 26px rgba(31, 111, 149, 0.28)) drop-shadow(0 0 34px rgba(255, 138, 80, 0.22));
}

.philosophy-pillars { perspective: 1500px; }
.pillar {
	transform-style: preserve-3d;
}
.pillar-icon { transform: translateZ(34px); transition: transform .3s ease; }
.pillar-title { transform: translateZ(20px); transition: transform .3s ease; }
.pillar-description { transform: translateZ(10px); transition: transform .3s ease; }
.pillar:hover .pillar-icon { transform: translateZ(46px); }

@media (max-width: 900px) {
	.hero-orbit { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.orbit-badge, .orbit-badge::before { animation: none !important; }
}

/* ---- css/tech-mindset-bg.css ---- */

@media (prefers-reduced-motion: no-preference) {
	@keyframes tmCircuitDrift {
		0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
		100% { background-position: 200px 200px, 0 0, 0 0, 0 0, 0 0; }
	}
	@keyframes tmSynapseDrift {
		0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
		100% { background-position: -260px 220px, 0 0, 0 0, 0 0; }
	}
}

body.tech-mindset-bg .header {

	background-color: transparent !important;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='none' stroke='%231f6f95' stroke-width='1.3' stroke-opacity='0.30'%3E%3Cpath d='M15 15 H75 V50 H125'/%3E%3Cpath d='M125 15 V60 H90'/%3E%3Cpath d='M25 95 H60 V130'/%3E%3Cpath d='M150 35 V85 H175'/%3E%3Cpath d='M35 150 H85 V175 H135'/%3E%3Cpath d='M165 125 V160 H190'/%3E%3Cpath d='M0 85 H15'/%3E%3Cpath d='M185 0 V15'/%3E%3Cpath d='M90 60 V95 H125 V130'/%3E%3Cpath d='M60 130 V160'/%3E%3C/g%3E%3Cg fill='%231f6f95' fill-opacity='0.42'%3E%3Ccircle cx='15' cy='15' r='2.8'/%3E%3Ccircle cx='75' cy='50' r='2.8'/%3E%3Ccircle cx='125' cy='60' r='2.8'/%3E%3Ccircle cx='60' cy='130' r='2.8'/%3E%3Ccircle cx='150' cy='35' r='2.8'/%3E%3Ccircle cx='175' cy='85' r='2.8'/%3E%3Ccircle cx='85' cy='175' r='2.8'/%3E%3Ccircle cx='190' cy='125' r='2.8'/%3E%3Ccircle cx='90' cy='95' r='2.8'/%3E%3Ccircle cx='125' cy='130' r='2.8'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(circle at 12% 15%, rgba(77, 184, 232, 0.30), transparent 46%),
		radial-gradient(circle at 88% 8%, rgba(255, 138, 80, 0.24), transparent 42%),
		radial-gradient(ellipse at 20% -10%, rgba(255, 138, 80, 0.16), transparent 55%) !important;
	background-repeat: repeat, no-repeat, no-repeat, no-repeat !important;
	background-position: 0 0, 0 0, 0 0, 0 0 !important;
	background-size: 200px 200px, auto, auto, auto !important;
	animation: tmCircuitDrift 50s linear infinite;
}

body.tech-mindset-bg .philosophy-section {

	background-color: transparent !important;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23d9662a' stroke-width='1.3' stroke-opacity='0.26'%3E%3Cpath d='M25 40 C 60 15, 85 65, 125 40'/%3E%3Cpath d='M125 40 C 160 15, 195 50, 220 85'/%3E%3Cpath d='M25 40 C 10 85, 50 110, 75 145'/%3E%3Cpath d='M75 145 C 120 170, 145 135, 185 160'/%3E%3Cpath d='M185 160 C 210 195, 170 220, 145 210'/%3E%3Cpath d='M220 85 C 245 120, 225 160, 185 160'/%3E%3Cpath d='M75 145 C 50 185, 85 215, 125 235'/%3E%3Cpath d='M125 40 C 108 85, 135 100, 125 145'/%3E%3C/g%3E%3Cg fill='%23d9662a' fill-opacity='0.36'%3E%3Ccircle cx='25' cy='40' r='3.6'/%3E%3Ccircle cx='125' cy='40' r='3.6'/%3E%3Ccircle cx='220' cy='85' r='3.6'/%3E%3Ccircle cx='75' cy='145' r='3.6'/%3E%3Ccircle cx='185' cy='160' r='3.6'/%3E%3Ccircle cx='145' cy='210' r='3.6'/%3E%3Ccircle cx='125' cy='235' r='3.6'/%3E%3Ccircle cx='125' cy='145' r='2.6'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(circle at 8% 90%, rgba(217, 102, 42, 0.20), transparent 42%),
		radial-gradient(circle at 94% 82%, rgba(31, 111, 149, 0.22), transparent 44%) !important;
	background-repeat: repeat, no-repeat, no-repeat !important;
	background-position: 0 0, 0 0, 0 0 !important;
	background-size: 260px 260px, auto, auto !important;
	animation: tmSynapseDrift 64s linear infinite;
}

body.tech-mindset-bg {

	padding-top: var(--header-height);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='none' stroke='%231f6f95' stroke-width='1' stroke-opacity='0.10'%3E%3Cpath d='M15 15 H75 V50 H125'/%3E%3Cpath d='M35 150 H85 V175 H135'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(circle at 10% 6%, rgba(255, 138, 80, 0.18), transparent 40%),
		radial-gradient(circle at 92% 14%, rgba(77, 184, 232, 0.20), transparent 42%),
		radial-gradient(circle at 18% 96%, rgba(255, 182, 72, 0.16), transparent 38%),
		radial-gradient(circle at 94% 90%, rgba(31, 111, 149, 0.14), transparent 44%),
		linear-gradient(180deg, var(--wf-ink) 0%, var(--wf-navy-2) 100%) !important;
	background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
	background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
	background-size: 200px 200px, auto, auto, auto, auto, auto !important;
	background-attachment: fixed !important;
}

@media (prefers-reduced-motion: reduce) {
	body.tech-mindset-bg .header,
	body.tech-mindset-bg .philosophy-section {
		animation: none;
	}
}

@media (max-width: 700px) {
	body.tech-mindset-bg .header {
		background-size: 130px 130px, auto, auto, auto, auto !important;
	}
	body.tech-mindset-bg .philosophy-section {
		background-size: 170px 170px, auto, auto, auto !important;
	}
}

@media (pointer: coarse) {
	body.tech-mindset-bg {
		background-attachment: scroll !important;
	}
	body.tech-mindset-bg .header,
	body.tech-mindset-bg .philosophy-section {
		animation: none !important;
	}
}

/* ---- css/hero-modern.css ---- */

/* Inter now loaded via <link> in <head> — see index.html */

@media (prefers-reduced-motion: no-preference) {
	@keyframes wf-hero-pop {
		0%   { opacity: 0; transform: translateY(26px) scale(.96); }
		100% { opacity: 1; transform: translateY(0) scale(1); }
	}
	@keyframes wf-badge-pop {
		0%   { opacity: 0; transform: translateY(14px) scale(.6); }
		70%  { transform: translateY(0) scale(1.06); }
		100% { opacity: 1; transform: translateY(0) scale(1); }
	}
	@keyframes wf-aurora-drift {
		0%   { transform: translate(-2%, -2%) scale(1); }
		100% { transform: translate(3%, 3%) scale(1.08); }
	}
	@keyframes wf-title-shimmer {
		0%   { background-position: 0% 50%; }
		100% { background-position: 200% 50%; }
	}
	@keyframes wf-badge-float {
		0%, 100% { transform: translateY(0); }
		50%      { transform: translateY(-6px); }
	}
	@keyframes wf-seal-float {
		0%, 100% { transform: translateY(0); }
		50%      { transform: translateY(-10px); }
	}
}

.wf-seal-float {
	animation: wf-seal-float 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.wf-seal-float { animation: none !important; }
}

.hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 36px 20px 64px;
	background: transparent;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

.hero__aurora {
	display: none;
}

.hero__badges {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	max-width: 420px;
	margin: 0 auto 28px;
}
.hero__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.75);
	box-shadow:
		0 10px 22px -10px rgba(31, 111, 149, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	opacity: 1;
	transition: transform .25s ease, box-shadow .25s ease;
}
@media (prefers-reduced-motion: no-preference) {
	.hero__badge {
		opacity: 0;
		animation: wf-badge-pop .7s cubic-bezier(.34,1.56,.64,1) both, wf-badge-float 5s ease-in-out infinite;
		animation-delay: var(--d, 0s), calc(var(--d, 0s) + .7s);
	}
}
.hero__badge img { width: 60%; height: 60%; object-fit: contain; }
.hero__badge:hover {
	transform: translateY(-4px) scale(1.06);
	box-shadow: 0 16px 30px -12px rgba(31, 111, 149, 0.38), inset 0 1px 0 rgba(255,255,255,0.9);
}

.hero__stack {
	position: relative;
	z-index: 2;
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.hero-card {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 300px) 1fr;
	align-items: center;
	gap: 34px;
	padding: 30px;
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.58);
	border: 1px solid rgba(255, 255, 255, 0.7);
	box-shadow:
		0 24px 48px -24px rgba(20, 60, 90, 0.28),
		0 2px 10px rgba(20, 60, 90, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(22px) saturate(160%);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	opacity: 1;
}

/* ---- founder-card (Adisu Engda bio, sits under the WIFA description) ---- */
.founder-card {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: 1fr minmax(220px, 320px);
	align-items: center;
	gap: 34px;
	padding: 30px;
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.58);
	border: 1px solid rgba(255, 255, 255, 0.7);
	box-shadow:
		0 24px 48px -24px rgba(20, 60, 90, 0.28),
		0 2px 10px rgba(20, 60, 90, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(22px) saturate(160%);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	opacity: 1;
}
/* Hide-then-animate-in is an enhancement only for browsers that explicitly
   support motion; every other browser (or any future bug in this block)
   simply sees the cards at opacity:1 above, with no dependency on JS or
   on @keyframes wf-hero-pop being defined. */
@media (prefers-reduced-motion: no-preference) {
	.hero-card, .founder-card {
		opacity: 0;
		animation: wf-hero-pop .8s cubic-bezier(.22,1,.36,1) both;
		animation-delay: var(--d, 0s);
	}
}
.founder-card__media {
	position: relative;
	width: 100%;
	order: 2;
}
.founder-card__media::before {
	content: "";
	position: absolute;
	inset: -14%;
	z-index: -1;
	border-radius: 40%;
	background: radial-gradient(circle, rgba(77, 184, 232, 0.32), transparent 70%);
	filter: blur(6px);
}
.founder-card__media-frame {
	width: 100%;
	aspect-ratio: 981 / 1410;
	border-radius: 26px;
	overflow: hidden;
	background: var(--wf-surface, #fff);
	box-shadow: 0 14px 30px -12px rgba(20, 60, 90, 0.35), 0 0 0 1px rgba(255,255,255,0.6);
}
.founder-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 12%;
}
.founder-card__body { order: 1; }
.founder-card__role {
	display: inline-block;
	padding: 6px 14px;
	margin-bottom: 12px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wf-blue-deep);
	background: rgba(77, 184, 232, 0.16);
	border: 1px solid rgba(77, 184, 232, 0.3);
}
.founder-card__name {
	position: relative;
	display: inline-block;
	margin: 0 0 14px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.08;
	color: var(--wf-text);
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}
.founder-card__name::after {
	content: "";
	position: absolute;
	left: 1px;
	right: 4%;
	bottom: -6px;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, #4db8e8, #ffb648, #d9662a, #4db8e8);
	background-size: 260% 100%;
	animation: wf-title-shimmer 6s linear infinite;
	opacity: 0.75;
}
.founder-card__text {
	margin: 0 0 14px;
	max-width: 56ch;
	color: var(--wf-muted);
	font-size: clamp(0.98rem, 1.4vw, 1.08rem);
	line-height: 1.65;
}
.founder-card__text:last-child { margin-bottom: 0; }

.founder-card__team {
	grid-column: 1 / -1;
	order: 3;
	margin-top: 8px;
}
.founder-card__team-frame {
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
	background: var(--wf-surface, #fff);
	box-shadow:
		0 14px 30px -14px rgba(20, 60, 90, 0.35),
		0 0 0 1px rgba(255, 255, 255, 0.6);
}
.founder-card__team-frame img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.founder-card__team-frame figcaption {
	margin: 0;
	padding: 12px 20px 16px;
	text-align: center;
	font-size: 0.86rem;
	font-style: italic;
	letter-spacing: 0.01em;
	color: var(--wf-muted);
	background: var(--wf-surface, #fff);
}

@media (max-width: 860px) {
	.founder-card {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 20px;
		padding: 26px 22px;
		border-radius: 28px;
	}
	.founder-card__media { order: 1; max-width: 220px; margin: 0 auto; }
	.founder-card__body { order: 2; text-align: center; }
	.founder-card__text { margin-left: auto; margin-right: auto; }
	.founder-card__name::after { left: 50%; right: auto; width: 64px; transform: translateX(-50%); }
}

@media (max-width: 520px) {
	.founder-card { padding: 22px 18px; }
	.founder-card__media { max-width: 180px; }
}

.hero-card--flip .hero-card__media { order: 2; }
.hero-card--flip .hero-card__body  { order: 1; }

.hero-card__media {
	position: relative;
	width: 100%;
}
.hero-card__media::before {
	content: "";
	position: absolute;
	inset: -14%;
	z-index: -1;
	border-radius: 40%;
	background: radial-gradient(circle, rgba(77, 184, 232, 0.32), transparent 70%);
	filter: blur(6px);
}
.hero-card__media figure {
	margin: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 26px;
	overflow: hidden;
	background: var(--wf-surface, #fff);
	box-shadow: 0 14px 30px -12px rgba(20, 60, 90, 0.35), 0 0 0 1px rgba(255,255,255,0.6);
}

#media-figure {
	border-radius: 26px !important;
	box-shadow: 0 14px 30px -12px rgba(20, 60, 90, 0.35), 0 0 0 1px rgba(255,255,255,0.6) !important;
}
.hero-card__media figure img,
.hero-card__media figure video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-card__body {
	min-width: 0;
	text-align: left;
}
.hero-card__eyebrow {
	display: inline-block;
	padding: 6px 14px;
	margin-bottom: 12px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wf-blue-deep);
	background: rgba(77, 184, 232, 0.16);
	border: 1px solid rgba(77, 184, 232, 0.3);
}
.hero-card__title {
	position: relative;
	display: inline-block;
	margin: 0 0 14px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.08;
	color: var(--wf-text);
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}
.hero-card__title--h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.hero-card__title em {
	font-style: normal;
	color: var(--wf-blue-deep);
}
.hero-card__title::after {
	content: "";
	position: absolute;
	left: 1px;
	right: 4%;
	bottom: -6px;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, #4db8e8, #ffb648, #d9662a, #4db8e8);
	background-size: 260% 100%;
	animation: wf-title-shimmer 6s linear infinite;
	opacity: 0.75;
}
.hero-card__text {
	margin: 0;
	max-width: 52ch;
	color: var(--wf-muted);
	font-size: clamp(0.98rem, 1.4vw, 1.08rem);
	line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
	.hero__aurora,
	.hero__badge,
	.hero-card,
	.founder-card,
	.hero-card__title::after { animation: none !important; }
	.hero__badge, .hero-card, .founder-card { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 860px) {
	.hero-card {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 20px;
		padding: 26px 22px;
		border-radius: 28px;
	}
	.hero-card--flip .hero-card__media,
	.hero-card--flip .hero-card__body { order: initial; }
	.hero-card__media { max-width: 220px; margin: 0 auto; }
	.hero-card__body { text-align: center; }
	.hero-card__text { margin: 0 auto; }
	.hero-card__title::after { left: 50%; right: auto; width: 64px; transform: translateX(-50%); }
}

@media (max-width: 520px) {
	.hero { padding: 26px 14px 48px; }
	.hero__badge { width: 50px; height: 50px; border-radius: 15px; }
	.hero__badges { gap: 10px; margin-bottom: 22px; }
	.hero-card { padding: 22px 18px; border-radius: 24px; }
	.hero-card__media { max-width: 180px; }
}

/* ---- css/nav-pill.css ---- */

.icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.125em;
	fill: currentColor;
	flex-shrink: 0;
}

.site-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: var(--header-height, 84px);
	z-index: 1200;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	animation: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3vmin;
	transition: none !important;
}

.nav-pill-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	max-width: 640px;
}

.nav-pill {
	display: flex;
	align-items: stretch;
	gap: 2px;
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	padding: 6px;
	backdrop-filter: blur(26px) saturate(180%);
	-webkit-backdrop-filter: blur(26px) saturate(180%);
	box-shadow:
		0 14px 30px -10px rgba(8, 18, 26, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	animation: wf-nav-drop .7s cubic-bezier(.16, 1, .3, 1) both;
}

.nav-pill__item {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 7px 4px;
	border-radius: 999px;
	color: rgba(28, 43, 56, 0.75);
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	transition: background .25s ease, color .25s ease, transform .2s ease;
}
.nav-pill__icon {
	font-size: 1.02rem;
	line-height: 1;
}
.nav-pill__label {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.nav-pill__item:hover {
	color: #1c2b38;
	background: rgba(28, 43, 56, 0.08);
	transform: translateY(-1px);
}
.nav-pill__item.active {
	color: #1c2b38;
	background: rgba(28, 43, 56, 0.14);
	box-shadow: inset 0 0 0 1px rgba(28, 43, 56, 0.18);
}

.nav-logo-badge {
	flex-shrink: 0;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)),
		rgba(18, 28, 34, 0.32);
	border: 1px solid rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(26px) saturate(180%);
	-webkit-backdrop-filter: blur(26px) saturate(180%);
	box-shadow:
		0 14px 30px -10px rgba(8, 18, 26, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	transition: transform .25s ease, box-shadow .25s ease;
	animation: wf-nav-drop .7s cubic-bezier(.16, 1, .3, 1) both;
	animation-delay: .08s;
}
.nav-logo-badge img {
	width: 92%;
	height: 92%;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.nav-logo-badge:hover {
	transform: scale(1.06);
	box-shadow:
		0 16px 34px -10px rgba(8, 18, 26, 0.6),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

@keyframes wf-nav-drop {
	from { opacity: 0; transform: translateY(-14px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 861px) {
	.nav-pill-wrap { max-width: 780px; }
	.nav-pill__item { padding: 10px 10px; }
	.nav-pill__icon { font-size: 1.3rem; }
	.nav-pill__label {
		font-size: 1rem;
		font-weight: 900;
		letter-spacing: 0.02em;
	}
	.nav-logo-badge { width: 72px; height: 72px; }
}

@media (max-width: 560px) {
	.nav-pill-wrap { gap: 8px; }
	.nav-pill { padding: 5px; gap: 0; }
	.nav-pill__item { padding: 6px 2px; }
	.nav-pill__icon { font-size: 0.95rem; }
	.nav-pill__label { font-size: 0.58rem; }
	.nav-logo-badge { width: 58px; height: 58px; }
}
@media (max-width: 380px) {
	.nav-pill-wrap { gap: 5px; }
	.nav-pill { padding: 4px; }
	.nav-pill__item { padding: 7px 1px; gap: 1px; }
	.nav-pill__icon { font-size: 1rem; }
	.nav-pill__label { font-size: 0.5rem; letter-spacing: 0; }
	.nav-logo-badge { width: 50px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
	.nav-pill, .nav-logo-badge { animation: none !important; }
}

/* ---- css/pillar-infographic.css ---- */

.philosophy-pillars {
	--pillar-gap: 40px;
	align-items: stretch;
	gap: var(--pillar-gap);
	overflow: visible;
	padding-bottom: 10px;
}

@media (min-width: 860px) {
	.philosophy-pillars {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

.pillar.pillar-card {
	--pc: #1f6f95;
	--pc-soft: #eef6fb;
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: left;
	background: #ffffff !important;
	border: none !important;
	border-radius: 18px;
	padding: 34px 26px 46px;
	overflow: visible;
	box-shadow:
		10px 14px 0 0 var(--pc-soft),
		0 26px 46px -20px rgba(15, 23, 35, 0.55),
		0 6px 18px -6px rgba(15, 23, 35, 0.25);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.pillar.pillar-card:hover {
	transform: translateY(-8px);
	background: #ffffff !important;
	box-shadow:
		12px 18px 0 0 var(--pc-soft),
		0 34px 58px -20px rgba(15, 23, 35, 0.6),
		0 8px 22px -6px rgba(15, 23, 35, 0.28);
}

.pillar.pillar-card::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	background:
		linear-gradient(135deg, transparent 50%, rgba(15, 23, 35, 0.07) 50.5%),
		linear-gradient(225deg, #ffffff 50%, transparent 50.5%);
	border-radius: 0 18px 0 10px;
	pointer-events: none;
	z-index: 2;
}

.pillar-flag {
	display: block !important;
	position: absolute;
	left: 0;
	right: 78px;
	bottom: 0;
	height: 8px;
	background: var(--pc);
	border-radius: 0 0 0 18px;
	z-index: 1;
	pointer-events: none;
}

.pillar.pillar-card .pillar-icon {
	position: relative;
	z-index: 2;
	width: 88px;
	height: 88px;
	margin: 0 0 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #ffffff, var(--pc-soft) 72%);
	box-shadow:
		0 14px 26px -12px rgba(15, 23, 35, 0.35),
		0 4px 10px -2px rgba(15, 23, 35, 0.16),
		inset 0 -4px 8px rgba(15, 23, 35, 0.08),
		inset 0 3px 6px rgba(255, 255, 255, 0.9);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.pillar.pillar-card .pillar-icon::before { display: none; content: none; }
.pillar.pillar-card .pillar-icon::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1.5px solid var(--pc);
	opacity: 0.22;
	pointer-events: none;
}
.pillar.pillar-card .pillar-icon img {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
	filter: drop-shadow(0 3px 6px rgba(15, 23, 35, 0.25));
}
.pillar.pillar-card:hover .pillar-icon {
	transform: translateY(-3px) scale(1.04);
	box-shadow:
		0 20px 34px -14px rgba(15, 23, 35, 0.4),
		0 6px 14px -4px rgba(15, 23, 35, 0.2),
		inset 0 -4px 8px rgba(15, 23, 35, 0.08),
		inset 0 3px 6px rgba(255, 255, 255, 0.9);
}

.pillar.pillar-card .pillar-title {
	font-size: 1.05rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pc) !important;
	margin: 0 0 12px;
	text-align: left;
}
.pillar.pillar-card .pillar-description {
	flex: 1;
	font-size: 0.92rem;
	line-height: 1.65;
	color: #7a8493 !important;
	text-align: left;
	margin: 0;
}

.pillar.pillar-card:nth-child(1) { --pc: #e08a1f; --pc-soft: #fdf1de; }
.pillar.pillar-card:nth-child(2) { --pc: #1f6f95; --pc-soft: #e6f2f8; }
.pillar.pillar-card:nth-child(3) { --pc: #e2622f; --pc-soft: #fbe8e0; }

.pillar-foot {
	display: block !important;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 3;
	pointer-events: none;
}
.pillar-num {
	display: inline-block;
	min-width: 30px;
	text-align: center;
	background: var(--pc);
	color: #ffffff;
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
	padding: 12px 18px 12px 20px;
	border-radius: 14px 0 18px 0;
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
	box-shadow: 0 8px 18px -6px rgba(15, 23, 35, 0.35);
}

@media (max-width: 859px) {
	.philosophy-pillars {
		--pillar-gap: 34px;
		grid-template-columns: 1fr !important;
	}

	.pillar.pillar-card { padding: 30px 22px 42px; }
}

@media (max-width: 560px) {
	.pillar.pillar-card { padding: 28px 20px 40px; border-radius: 16px; }
	.pillar.pillar-card::before { width: 24px; height: 24px; }
}

/* ---- css/journey-panel.css ---- */

.hero-key.hero-card {
	grid-template-columns: 1fr;
	padding: 20px;
}

.hero-key__frame {
	width: 100%;
}

.hero-key__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 24px;
	overflow: hidden;
	box-shadow:
		0 18px 34px -16px rgba(20, 60, 90, 0.4),
		inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.hero-key__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-key__caption {
	text-align: center;
	margin-top: 20px;
}
.hero-key__caption .hero-card__title {
	font-size: clamp(1.3rem, 2.8vw, 1.9rem);
}
.hero-key__caption .hero-card__title::after {
	left: 50%;
	right: auto;
	width: 84px;
	transform: translateX(-50%);
}

.hero-key__detail {
	margin-top: 20px;
	padding: 24px 26px 8px;
	border-top: 1px solid rgba(31, 111, 149, 0.14);
}
.hero-key__text {
	margin: 0 0 20px;
	max-width: 64ch;
	color: var(--wf-muted);
	font-size: clamp(0.98rem, 1.4vw, 1.08rem);
	line-height: 1.7;
}
.hero-key__tagline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0 0 6px;
	font-weight: 800;
	font-size: clamp(1rem, 1.6vw, 1.18rem);
	letter-spacing: 0.01em;
	color: var(--wf-blue-deep);
}
.hero-key__tagline span::after {
	content: "\2022";
	display: inline-block;
	margin: 0 12px;
	color: var(--wf-gold-deep);
	opacity: 0.65;
	font-weight: 700;
}
.hero-key__tagline span:last-child::after {
	content: "";
	margin: 0;
}

@media (max-width: 860px) {
	.hero-key.hero-card { padding: 16px; }
	.hero-key__media { aspect-ratio: 4 / 3; border-radius: 20px; }
	.hero-key__caption { margin-top: 16px; }
	.hero-key__detail { text-align: center; padding: 22px 8px 4px; }
	.hero-key__text { margin: 0 auto 18px; }
	.hero-key__tagline { justify-content: center; }
}

@media (max-width: 520px) {
	.hero-key__tagline span::after { margin: 0 8px; }
}

/* ---- css/desktop-tuning.css ---- */

@media (min-width: 861px) {

	.hero-key__frame {
		display: grid;
		grid-template-columns: minmax(340px, 1fr) minmax(0, 1fr);
		align-items: center;
		column-gap: 40px;
	}
	.hero-key__media {
		grid-column: 1;
		grid-row: 1 / span 2;
		aspect-ratio: 4 / 3;
	}
	.hero-key__caption {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
		text-align: left;
	}
	.hero-key__caption .hero-card__title::after {
		left: 1px;
		right: auto;
		width: 64px;
		transform: none;
	}
	.hero-key__detail {
		grid-column: 2;
		grid-row: 2;
		margin-top: 0;
		padding-top: 8px;
		padding-left: 0;
		padding-right: 0;
		text-align: left;
	}
	.hero-key__text { margin-left: 0; margin-right: 0; }
	.hero-key__tagline { justify-content: flex-start; }

	.hero-card__text {
		font-size: 1.24rem;
		font-weight: 600;
		line-height: 1.7;
	}
	.hero-key__text {
		font-size: 1.24rem;
		font-weight: 600;
		line-height: 1.75;
	}
	.hero-key__tagline {
		font-size: 1.3rem;
		font-weight: 800;
	}
	.hero-card__title {
		font-size: clamp(2.1rem, 3.6vw, 3rem);
		font-weight: 900;
	}
	.hero-card__title--h2,
	.hero-key__caption .hero-card__title {
		font-size: clamp(1.8rem, 3vw, 2.4rem);
		font-weight: 900;
	}
	.hero-card__eyebrow {
		font-size: 0.9rem;
		font-weight: 800;
	}

	.pillar.pillar-card .pillar-title {
		font-size: 1.3rem;
		font-weight: 900;
	}
	.pillar.pillar-card .pillar-description {
		font-size: 1.12rem;
		font-weight: 600;
		line-height: 1.75;
	}
}

/* ---- Strategic Pillars heading: fix desktop shrink + iOS18-style glass badge ---- */
.philosophy-subheading {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: none;
	margin: 0 auto 52px;
	padding: 16px 32px;
	border-radius: 999px;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	line-height: 1.2;
	color: var(--wf-blue-deep) !important;
	text-shadow: none !important;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.38));
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.7);
	box-shadow:
		0 12px 30px -10px rgba(31, 111, 149, 0.3),
		0 2px 8px rgba(31, 111, 149, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.philosophy-subheading::before {
	content: '';
	position: absolute;
	inset: -16px;
	z-index: -1;
	border-radius: inherit;
	background: conic-gradient(from 180deg at 50% 50%,
			rgba(224, 138, 31, 0.4),
			rgba(31, 111, 149, 0.4),
			rgba(226, 98, 47, 0.4),
			rgba(224, 138, 31, 0.4));
	filter: blur(26px);
	opacity: 0.55;
}

@media (max-width: 480px) {
	.philosophy-subheading {
		font-size: clamp(1.15rem, 5.2vmin, 1.5rem);
		padding: 12px 22px;
		margin-bottom: 34px;
	}
}

@media (min-width: 861px) {
	.philosophy-subheading {
		font-size: clamp(2rem, 2.2vw, 2.6rem);
		font-weight: 900 !important;
		padding: 20px 44px;
	}
}

/* ---- Pillar cards: replace the default mobile tap-highlight (shows as a
   stray mango/amber rectangle poking out of the unmasked top-left corner,
   since the card uses overflow:visible) with a controlled pink press effect ---- */
.pillar.pillar-card {
	-webkit-tap-highlight-color: transparent;
}
.pillar.pillar-card:active {
	box-shadow:
		10px 14px 0 0 var(--pc-soft),
		0 26px 46px -20px rgba(15, 23, 35, 0.55),
		0 6px 18px -6px rgba(15, 23, 35, 0.25),
		0 0 0 3px rgba(255, 45, 146, 0.45);
}
.pillar.pillar-card:active .pillar-icon::after {
	border-color: #ff2d92;
	opacity: 0.65;
}

/* ---- Strategic Pillars: infographic cards (gradient outline, arched icon badge, 3D lift) ---- */

.philosophy-pillars {
	column-gap: 34px;
	row-gap: 100px;
	padding-top: 76px;
	padding-bottom: 16px;
}

.philosophy-pillars .pillar.pillar-card {
	--c1: #6cb8f7;
	--c2: #4a9ff0;
	--cn: #2f86d6;   /* deeper tone for the small number label */
	--edge: 3px;   /* thin outline around the top of the card  */
	--side: 8px;   /* thick outline on the lower sides + bottom */
	--r: 24px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 66px 30px 42px;
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--r);
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	overflow: visible;
	transform-style: flat;
	filter:
		drop-shadow(0 6px 6px rgba(15, 23, 35, 0.10))
		drop-shadow(0 22px 22px rgba(15, 23, 35, 0.18));
	transition:
		opacity 220ms ease,
		transform 0.35s cubic-bezier(.2, .8, .2, 1),
		filter 0.35s ease;
}
.philosophy-pillars .pillar.pillar-card:nth-child(1) { --c1: #7cc4f8; --c2: #4fa6f2; --cn: #2f86d6; } /* light blue   */
.philosophy-pillars .pillar.pillar-card:nth-child(2) { --c1: #52e0ee; --c2: #23c4da; --cn: #0aa3ba; } /* cyan         */
.philosophy-pillars .pillar.pillar-card:nth-child(3) { --c1: #ffc684; --c2: #ffab57; --cn: #ee8a1c; } /* light orange */
.philosophy-pillars .pillar.pillar-card:nth-child(4) { --c1: #b69cfb; --c2: #8f6cf0; --cn: #7a52e0; }

.philosophy-pillars .pillar.pillar-card:hover,
.philosophy-pillars .pillar.pillar-card:active,
.philosophy-pillars .pillar.pillar-card.is-lifted {
	background: transparent !important;
	box-shadow: none !important;
	transform: translateY(-14px);
	filter:
		drop-shadow(0 8px 8px rgba(15, 23, 35, 0.12))
		drop-shadow(0 36px 30px rgba(15, 23, 35, 0.24));
}

/* gradient outline (full card shape) */
.philosophy-pillars .pillar.pillar-card::before {
	content: '';
	display: block;
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: auto;
	height: auto;
	border-radius: var(--r);
	background: linear-gradient(180deg, var(--c1), var(--c2)) !important;
	transform: none !important;
	transition: none;
	z-index: 0;
	pointer-events: none;
}
/* white body, top part: hairline outline */
.philosophy-pillars .pillar.pillar-card .pillar-flag {
	display: block !important;
	position: absolute;
	top: var(--edge);
	left: var(--edge);
	right: var(--edge);
	bottom: auto;
	width: auto;
	height: 46%;
	background: #ffffff;
	border-radius: calc(var(--r) - var(--edge)) calc(var(--r) - var(--edge)) 5px 5px;
	z-index: 1;
	pointer-events: none;
}
/* white body, lower part: thick outline on the sides and bottom */
.philosophy-pillars .pillar.pillar-card::after {
	content: '';
	position: absolute;
	top: 40%;
	left: var(--side);
	right: var(--side);
	bottom: var(--side);
	background: #ffffff;
	border-radius: 0 0 calc(var(--r) - var(--side)) calc(var(--r) - var(--side));
	z-index: 1;
	pointer-events: none;
}

/* icon badge: white disc sitting on the top edge, with a gradient arch over it */
.philosophy-pillars .pillar.pillar-card .pillar-icon {
	position: absolute;
	top: -52px;
	left: 50%;
	width: 104px;
	height: 104px;
	margin: 0 0 0 -52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: none;
	transform: none;
	z-index: 3;
}
.philosophy-pillars .pillar.pillar-card:hover .pillar-icon { transform: none; box-shadow: none; }
.philosophy-pillars .pillar.pillar-card .pillar-icon::before { display: none; content: none; }
.philosophy-pillars .pillar.pillar-card .pillar-icon::after {
	content: '';
	position: absolute;
	top: auto; right: auto;
	left: 50%;
	bottom: 50%;
	width: 120px;
	height: 60px;
	margin: 0 0 0 -60px;
	border: 0;
	border-radius: 60px 60px 0 0;
	background: linear-gradient(135deg, var(--c1), var(--c2));
	-webkit-mask: radial-gradient(circle at 50% 100%, transparent 51.5px, #000 52px);
	mask: radial-gradient(circle at 50% 100%, transparent 51.5px, #000 52px);
	opacity: 1;
	pointer-events: none;
}
.philosophy-pillars .pillar.pillar-card:active .pillar-icon::after { border-color: transparent; opacity: 1; }
.philosophy-pillars .pillar.pillar-card .pillar-icon img {
	width: 78px;
	height: 78px;
	margin: 0;
	padding: 7px;
	box-sizing: border-box;
	border-radius: 50%;
	background: #ffffff;
	object-fit: contain;
	filter: none;
	box-shadow:
		0 12px 20px -8px rgba(15, 23, 35, 0.34),
		0 3px 8px -2px rgba(15, 23, 35, 0.20),
		inset 0 -3px 6px rgba(15, 23, 35, 0.06);
	transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), box-shadow 0.35s ease;
}
.philosophy-pillars .pillar.pillar-card:hover .pillar-icon img,
.philosophy-pillars .pillar.pillar-card:active .pillar-icon img,
.philosophy-pillars .pillar.pillar-card.is-lifted .pillar-icon img {
	transform: translateY(-3px) scale(1.07);
	box-shadow:
		0 18px 26px -10px rgba(15, 23, 35, 0.38),
		0 5px 12px -2px rgba(15, 23, 35, 0.22),
		inset 0 -3px 6px rgba(15, 23, 35, 0.06);
}

/* number, title, text */
.philosophy-pillars .pillar.pillar-card .pillar-foot {
	display: block !important;
	position: relative;
	top: auto; right: auto; bottom: auto;
	order: 1;
	z-index: 2;
	margin: 0 0 6px;
	pointer-events: none;
}
.philosophy-pillars .pillar.pillar-card .pillar-num {
	display: inline-block;
	min-width: 0;
	padding: 0;
	border-radius: 0;
	clip-path: none;
	box-shadow: none;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1;
	background: var(--cn);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.philosophy-pillars .pillar.pillar-card .pillar-title {
	order: 2;
	position: relative;
	z-index: 2;
	transform: none;
	margin: 0 0 12px;
	font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.03em;
	text-align: center;
	text-transform: uppercase;
	color: #232a36 !important;
}
.philosophy-pillars .pillar.pillar-card .pillar-description {
	order: 3;
	position: relative;
	z-index: 2;
	transform: none;
	flex: 1;
	margin: 0;
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.7;
	text-align: center;
	color: #5f6b7a !important;
}

@media (max-width: 859px) {
	.philosophy-pillars { row-gap: 100px; }
}