/* ==========================================================================
   Modelink Studio: glass sidebar, glossy waves and live current
   ========================================================================== */

:root {
	--bg: #04050f;
	--ink: #f3f5ff;
	--muted: #aeb6d6;
	--dim: #7d86aa;
	--blue: #3b74ff;
	--royal: #1f4fd6;
	--violet: #8b5cff;
	--electric: #59dcff;
	--orange: #ff7a2f;
	--orange-2: #ffa25c;
	--glass: linear-gradient(155deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
	--glass-solid: rgba(14, 18, 48, 0.55);
	--edge: rgba(255, 255, 255, 0.13);
	--edge-strong: rgba(255, 255, 255, 0.24);
	--shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
	--r-lg: 28px;
	--r-md: 20px;
	--r-sm: 14px;
	--side-w: 272px;
	--side-gap: 18px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--display: "Sora", "Inter", system-ui, sans-serif;
	--grad-text: linear-gradient(100deg, #8fb8ff 0%, #b892ff 55%, #ffab6e 100%);
	--grad-btn: linear-gradient(120deg, #3b74ff 0%, #6a4dff 100%);
}

.side-collapsed { --side-w: 84px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.is-ready { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 400 1rem/1.65 var(--font);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; border-radius: 6px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms-skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: #fff; color: #000; }
.ms-skip:focus { top: 16px; }

/* --------------------------------------------------------------------------
   Background: glossy curved waves + circuit current
   -------------------------------------------------------------------------- */
.ms-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(1100px 700px at 85% -10%, #2c1478 0%, transparent 60%), radial-gradient(900px 700px at 0% 100%, #0b1f6b 0%, transparent 65%), var(--bg); }
.ms-bg__wave { position: absolute; border-radius: 50%; will-change: transform; }
.ms-bg__wave--violet {
	width: 150vmax; height: 150vmax; top: -118vmax; right: -62vmax;
	background: radial-gradient(circle at 30% 85%, #a46bff 0%, #6a2fe0 22%, #2a0f75 48%, #120637 70%);
	box-shadow: inset 0 -26px 60px -10px rgba(222, 196, 255, 0.55), 0 0 120px rgba(139, 92, 255, 0.35);
	animation: ms-drift-a 38s var(--ease) infinite alternate;
}
.ms-bg__wave--blue {
	width: 130vmax; height: 130vmax; bottom: -104vmax; left: -22vmax;
	background: radial-gradient(circle at 55% 10%, #5c8dff 0%, #2552e6 16%, #12318f 40%, #071443 66%);
	box-shadow: inset 0 26px 60px -12px rgba(170, 200, 255, 0.6), 0 -10px 120px rgba(59, 116, 255, 0.3);
	animation: ms-drift-b 44s var(--ease) infinite alternate;
}
.ms-bg__wave--deep {
	width: 95vmax; height: 95vmax; bottom: -78vmax; right: -34vmax;
	background: radial-gradient(circle at 40% 10%, #6b95ff 0%, #2a4fd0 20%, #0d1f6e 48%, #050a2c 72%);
	box-shadow: inset 0 22px 50px -10px rgba(190, 215, 255, 0.55);
	animation: ms-drift-c 50s var(--ease) infinite alternate;
}
@keyframes ms-drift-a { to { transform: translate(-3vmax, 4vmax) rotate(8deg); } }
@keyframes ms-drift-b { to { transform: translate(4vmax, -3vmax) rotate(-6deg); } }
@keyframes ms-drift-c { to { transform: translate(-5vmax, -2vmax) rotate(5deg); } }
.ms-bg__veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(4, 5, 15, 0.72) 0%, rgba(4, 5, 15, 0.42) 55%, rgba(4, 5, 15, 0.2) 100%); }
.ms-bg__current { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; mix-blend-mode: screen; }

/* --------------------------------------------------------------------------
   Glass primitives
   -------------------------------------------------------------------------- */
.glass {
	position: relative;
	background: var(--glass);
	border: 1px solid var(--edge);
	border-radius: var(--r-lg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
}
[data-glow] { --mx: 50%; --my: 50%; }
[data-glow]::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s;
	background: radial-gradient(420px circle at var(--mx) var(--my), rgba(120, 160, 255, 0.18), transparent 45%);
}
[data-glow]::after {
	content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s; padding: 1px;
	background: radial-gradient(260px circle at var(--mx) var(--my), rgba(140, 180, 255, 0.9), rgba(180, 120, 255, 0.4) 40%, transparent 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
}
[data-glow]:hover::before, [data-glow]:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */
.ms-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.ms-brand__mark { width: 40px; height: 40px; flex: none; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(59, 116, 255, 0.55)); }
.ms-brand__word { font: 800 1.42rem/1 var(--display); letter-spacing: -0.03em; white-space: nowrap; }
.ms-brand__word b { color: var(--orange); font-weight: 800; }
.ms-brand__word small { display: block; margin-top: 4px; font: 600 0.58rem/1 var(--font); letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.ms-side { position: fixed; z-index: 40; top: var(--side-gap); bottom: var(--side-gap); left: var(--side-gap); width: var(--side-w); transition: width 0.45s var(--ease); }
.ms-side__panel {
	position: relative; height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 16px 14px 14px;
	border-radius: 26px; border: 1px solid var(--edge-strong);
	background: linear-gradient(170deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0.06));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 30px 80px -20px rgba(0, 0, 0, 0.7);
	-webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
	overflow: hidden auto; scrollbar-width: none;
}
.ms-side__panel::-webkit-scrollbar { display: none; }
.ms-side__dots { display: inline-flex; gap: 7px; padding: 2px 4px 8px; }
.ms-side__dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.ms-side__dots i:nth-child(2) { background: #febc2e; }
.ms-side__dots i:nth-child(3) { background: #28c840; }
.ms-side__brand { padding: 8px 6px 14px; border-bottom: 1px solid var(--edge); }
.ms-side__toggle {
	position: absolute; top: 58px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
	border-radius: 50%; border: 1px solid var(--edge-strong); background: rgba(255, 255, 255, 0.1); transition: transform 0.45s var(--ease), background 0.2s;
}
.ms-side__toggle:hover { background: rgba(255, 255, 255, 0.2); }
.ms-side__toggle .ms-icon { width: 16px; height: 16px; }
.ms-side__close { display: none; }
.ms-side__card { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--edge); }
.ms-side__avatar { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--orange), #ff4f7b); box-shadow: 0 6px 18px rgba(255, 122, 47, 0.4); }
.ms-side__avatar .ms-icon { width: 20px; height: 20px; stroke-width: 2.6; }
.ms-side__card strong { display: block; font: 600 0.88rem/1.2 var(--display); }
.ms-side__card small { display: block; color: var(--muted); font-size: 0.75rem; }
.ms-side__label { margin: 12px 8px 4px; font: 600 0.68rem/1 var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); min-height: 0.7rem; }
.ms-side__nav { flex: 1; }
.ms-side__nav hr { height: 1px; margin: 10px 4px; border: 0; background: var(--edge); }
.ms-side__link {
	position: relative; display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 13px; border-radius: 13px;
	text-decoration: none; font-weight: 500; font-size: 0.94rem; color: #dde2fb; white-space: nowrap; border: 1px solid transparent;
	transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.ms-side__link .ms-icon { width: 20px; height: 20px; flex: none; }
.ms-side__link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.ms-side__link[aria-current="page"] {
	color: #fff; background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
	border-color: var(--edge-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 24px -10px rgba(59, 116, 255, 0.8);
}
.ms-side__link[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--electric); box-shadow: 0 0 12px var(--electric); }
.ms-side__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; background: #fff; color: #10142f; font: 700 0.72rem/1 var(--font); }
.ms-side__badge--dot { min-width: 9px; width: 9px; height: 9px; padding: 0; background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 122, 47, 0.2); }
.ms-side__cta {
	display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; margin-top: 10px; border-radius: 14px; text-decoration: none; font-weight: 600; white-space: nowrap;
	background: var(--grad-btn); box-shadow: 0 10px 30px -8px rgba(80, 100, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3); transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.ms-side__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(80, 100, 255, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.ms-side__cta .ms-icon { width: 19px; height: 19px; flex: none; }
.ms-side__text { transition: opacity 0.3s; }

/* Collapsed rail */
.side-collapsed .ms-side__text, .side-collapsed .ms-side__badge:not(.ms-side__badge--dot) { opacity: 0; pointer-events: none; width: 0; overflow: hidden; }
.side-collapsed .ms-side__panel { padding-inline: 12px; align-items: stretch; }
.side-collapsed .ms-side__dots { justify-content: center; gap: 5px; }
.side-collapsed .ms-side__dots i { width: 9px; height: 9px; }
.side-collapsed .ms-side__brand { justify-content: center; padding-inline: 0; gap: 0; }
.side-collapsed .ms-side__toggle { right: -1px; transform: rotate(180deg) translateX(-50%); top: 60px; }
.side-collapsed .ms-side__card { justify-content: center; padding: 8px 0; background: none; border-color: transparent; gap: 0; }
.side-collapsed .ms-side__label { text-align: center; }
.side-collapsed .ms-side__label::before { content: "Menu"; font-size: 0.56rem; letter-spacing: 0.14em; }
.side-collapsed .ms-side__link { justify-content: center; padding: 0; gap: 0; }
.side-collapsed .ms-side__badge--dot { position: absolute; top: 9px; right: 12px; }
.side-collapsed .ms-side__cta { gap: 0; }
.ms-tip { position: fixed; z-index: 60; padding: 7px 12px; border-radius: 10px; background: rgba(14, 18, 48, 0.94); border: 1px solid var(--edge-strong); font-size: 0.82rem; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-6px, -50%); transition: opacity 0.2s, transform 0.2s; }
.ms-tip.is-on { opacity: 1; transform: translate(0, -50%); }

/* Mobile top bar + drawer */
.ms-topbar { display: none; }
.ms-scrim { display: none; }

/* --------------------------------------------------------------------------
   Shell & sections
   -------------------------------------------------------------------------- */
.ms-shell { margin-left: calc(var(--side-w) + var(--side-gap) * 2); padding: 0 clamp(18px, 3vw, 44px) 0 clamp(4px, 1vw, 16px); transition: margin-left 0.45s var(--ease); min-width: 0; }
.ms-main { max-width: 1320px; margin: 0 auto; }
.ms-section { padding: clamp(56px, 8vw, 110px) 0 0; }
.ms-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 46px); }
.ms-head-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.ms-label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 600 0.76rem/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase; color: var(--electric); }
.ms-label::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.ms-label--orange { color: var(--orange-2); }
.ms-h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); text-wrap: balance; }
.ms-h3 { font-size: clamp(1.45rem, 2.3vw, 2rem); }
.ms-h4 { font-size: 1.14rem; letter-spacing: -0.015em; }
.ms-h2 em, .ms-h3 em, .ms-hero__title em, .ms-phero__title em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-lead { margin-top: 16px; font-size: clamp(1.02rem, 1.3vw, 1.14rem); color: var(--muted); max-width: 640px; }
.ms-muted { color: var(--muted); }
.ms-prose { color: var(--muted); font-size: 1.05rem; }
.ms-prose p + p, .ms-prose ul { margin-top: 1em; }
.ms-prose ul { list-style: disc; padding-left: 1.2em; }
.ms-prose a { color: var(--electric); }
.ms-prose h2, .ms-prose h3 { color: var(--ink); margin: 1.4em 0 0.5em; }

.ms-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 500; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--edge-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ms-pulse { width: 8px; height: 8px; border-radius: 50%; background: #3dffa8; box-shadow: 0 0 0 0 rgba(61, 255, 168, 0.6); animation: ms-pulse 2s infinite; }
@keyframes ms-pulse { 70% { box-shadow: 0 0 0 10px rgba(61, 255, 168, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 255, 168, 0); } }

/* Buttons */
.ms-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; font-weight: 600; font-size: 0.96rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s, background 0.25s; white-space: nowrap; }
.ms-btn .ms-icon { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.ms-btn:hover { transform: translateY(-2px); }
.ms-btn:hover .ms-icon:last-child { transform: translateX(3px); }
.ms-btn--primary { background: var(--grad-btn); box-shadow: 0 12px 34px -10px rgba(80, 100, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.ms-btn--orange { background: linear-gradient(120deg, #ff7a2f, #ff4f6d); box-shadow: 0 12px 34px -10px rgba(255, 110, 60, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.ms-btn--glass { background: rgba(255, 255, 255, 0.08); border-color: var(--edge-strong); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ms-btn--glass:hover { background: rgba(255, 255, 255, 0.15); }
.ms-btn--ghost { padding: 0 8px; color: var(--muted); }
.ms-btn--ghost:hover { color: #fff; }
.ms-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--electric); text-decoration: none; white-space: nowrap; }
.ms-link .ms-icon { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
.ms-link:hover .ms-icon { transform: translateX(4px); }

.ms-ico { width: 46px; height: 46px; flex: none; display: inline-grid; place-items: center; border-radius: 14px; color: #cfe0ff; background: linear-gradient(140deg, rgba(59, 116, 255, 0.35), rgba(59, 116, 255, 0.08)); border: 1px solid rgba(120, 160, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.ms-ico .ms-icon { width: 22px; height: 22px; }
.ms-ico--orange { color: #ffd6bd; background: linear-gradient(140deg, rgba(255, 122, 47, 0.4), rgba(255, 122, 47, 0.08)); border-color: rgba(255, 150, 90, 0.4); }
.ms-ico--violet { color: #e2d4ff; background: linear-gradient(140deg, rgba(139, 92, 255, 0.45), rgba(139, 92, 255, 0.08)); border-color: rgba(170, 130, 255, 0.4); }

.ms-ticks { display: grid; gap: 10px; margin-top: 22px; }
.ms-ticks li { display: flex; gap: 12px; align-items: flex-start; color: #dbe1fb; }
.ms-ticks .ms-icon { width: 20px; height: 20px; flex: none; margin-top: 3px; padding: 3px; border-radius: 50%; color: #0a0f2c; background: var(--electric); stroke-width: 3; }
.ms-ticks--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.ms-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ms-tags li { padding: 7px 14px; border-radius: 999px; font-size: 0.86rem; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--edge); color: #dfe4fb; }

/* Logos: always on a light chip, never stretched */
.ms-logo-chip { display: inline-grid; place-items: center; height: 52px; min-width: 96px; padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6); }
.ms-logo-chip img { max-height: 30px; max-width: 120px; width: auto; height: auto; object-fit: contain; }
.ms-logo-chip--lg { height: 64px; min-width: 120px; }
.ms-logo-chip--lg img { max-height: 46px; max-width: 140px; }
.ms-logo-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ms-logo-row--center { justify-content: center; margin-top: 36px; }

/* Entrance animations */
.ms-rise { animation: ms-rise 1s var(--ease) both; animation-delay: calc(var(--d, 0) * 0.09s + 0.1s); }
@keyframes ms-rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 0.07s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */
.ms-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 60px); align-items: center; min-height: 100vh; padding: 40px 0 36px; }
.ms-hero__title { margin-top: 22px; font-size: clamp(2.7rem, 4.9vw, 4.6rem); text-wrap: balance; font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.ms-hero__lead { margin-top: 22px; max-width: 560px; font-size: clamp(1.04rem, 1.35vw, 1.2rem); color: var(--muted); }
.ms-hero__tag { display: flex; align-items: center; gap: 10px; margin-top: 30px; font: 600 0.9rem/1.3 var(--display); color: #dfe4ff; }
.ms-hero__tag .ms-icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(61, 255, 168, 0.18); color: #3dffa8; stroke-width: 3; }
.ms-hero__visual { position: relative; }
.ms-hero__stats { grid-column: 1 / -1; }

.ms-window { position: relative; border-radius: 24px; padding: 0 10px 10px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)); border: 1px solid var(--edge-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 40px 90px -30px rgba(10, 20, 80, 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transform-style: preserve-3d; transition: transform 0.5s var(--ease); }
.ms-window__bar { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 6px; }
.ms-window__bar .ms-side__dots { padding: 0; }
.ms-window__title { font: 500 0.78rem/1 var(--font); color: var(--muted); letter-spacing: 0.04em; }
.ms-window__media { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3.1; background: #0a1030; }
.ms-window__media video, .ms-window__media img { width: 100%; height: 100%; object-fit: cover; }
.ms-window__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5, 8, 30, 0.55)); pointer-events: none; }
.ms-hero__floats { position: absolute; inset: 0; pointer-events: none; }
.ms-float { position: absolute; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px; border-radius: 14px; font: 600 0.86rem/1 var(--display); white-space: nowrap; background: rgba(16, 22, 60, 0.62); border: 1px solid var(--edge-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7); animation: ms-bob 6s ease-in-out infinite; }
.ms-float .ms-icon { width: 20px; height: 20px; color: var(--electric); }
.ms-float--a { top: 16%; left: -34px; }
.ms-float--b { top: 52%; right: -26px; animation-delay: -2s; }
.ms-float--b .ms-icon { color: #b99bff; }
.ms-float--c { bottom: -18px; left: 18%; animation-delay: -4s; }
.ms-float--c .ms-icon { color: var(--orange-2); }
@keyframes ms-bob { 50% { transform: translateY(-10px); } }

.ms-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; }
.ms-stat { padding: 22px 24px; border-radius: 22px; display: flex; flex-direction: column-reverse; gap: 6px; }
.ms-stat dt { color: var(--muted); font-size: 0.9rem; }
.ms-stat dd { margin: 0; font: 800 clamp(2rem, 3.2vw, 2.8rem)/1 var(--display); letter-spacing: -0.04em; background: linear-gradient(100deg, #fff, #b9c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Partner strip */
.ms-strip { padding-top: clamp(40px, 6vw, 70px); }
.ms-strip__label { margin-bottom: 18px; text-align: center; font-size: 0.86rem; letter-spacing: 0.08em; color: var(--muted); }
.ms-marquee { display: flex; overflow: hidden; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ms-marquee__track { display: flex; flex: none; gap: 14px; animation: ms-marquee var(--dur, 50s) linear infinite; }
.ms-marquee--reverse .ms-marquee__track { animation-direction: reverse; }
.ms-marquee:hover .ms-marquee__track { animation-play-state: paused; }
@keyframes ms-marquee { to { transform: translateX(calc(-100% - 14px)); } }
.ms-marquee--chips li { display: grid; place-items: center; height: 64px; width: 160px; padding: 12px 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.94); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.06); }
.ms-marquee--chips img { max-height: 32px; max-width: 118px; width: auto; height: auto; object-fit: contain; }

/* Practices */
.ms-practices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ms-practice { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; transition: transform 0.45s var(--ease), border-color 0.3s; }
.ms-practice:hover { transform: translateY(-6px); border-color: var(--edge-strong); }
.ms-practice__media { position: relative; display: block; margin: 10px 10px 0; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: #0a1030; }
.ms-practice__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.ms-practice:hover .ms-practice__media img { transform: scale(1.06); }
.ms-practice__media--wheel { background: radial-gradient(circle at 50% 50%, #1b2a7a, #070c2c 70%); }
.ms-practice__media--wheel img { object-fit: contain; padding: 14px; }
.ms-practice__body { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 24px; }
.ms-practice__top { display: flex; align-items: center; justify-content: space-between; margin-top: -44px; margin-bottom: 16px; position: relative; }
.ms-practice__top .ms-ico { background: linear-gradient(140deg, #3b74ff, #6a4dff); border-color: rgba(255, 255, 255, 0.3); color: #fff; box-shadow: 0 10px 24px -8px rgba(59, 116, 255, 0.9); }
.ms-practice__num { margin-top: 30px; font: 600 0.8rem/1 var(--display); color: var(--dim); }
.ms-practice__kicker { display: flex; align-items: center; gap: 10px; font: 600 0.74rem/1.3 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--electric); }
.ms-practice__kicker .ms-ico { width: 34px; height: 34px; border-radius: 10px; }
.ms-practice__kicker .ms-ico .ms-icon { width: 18px; height: 18px; }
.ms-practice__title { display: block; margin-top: 8px; font: 700 1.3rem/1.2 var(--display); letter-spacing: -0.02em; }
.ms-practice__text { display: block; margin-top: 10px; color: var(--muted); font-size: 0.95rem; }
.ms-practice__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-weight: 600; font-size: 0.92rem; color: #fff; }
.ms-practice__more .ms-icon { width: 17px; height: 17px; transition: transform 0.3s var(--ease); }
.ms-practice:hover .ms-practice__more .ms-icon { transform: translateX(5px); }

/* Fusion: power → UPS → IT diagram */
.ms-fusion { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.ms-flow { position: relative; padding: 18px; aspect-ratio: 520 / 380; }
.ms-flow__svg, .ms-flow__nodes { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); overflow: visible; }
.ms-flow__svg path { vector-effect: non-scaling-stroke; }
.ms-flow__wires path { opacity: 0.6; filter: drop-shadow(0 0 6px rgba(120, 140, 255, 0.6)); }
.ms-flow__pulses path { stroke-dasharray: 7 100; animation: ms-flow 2.6s linear infinite; filter: drop-shadow(0 0 6px #9fe9ff) drop-shadow(0 0 14px #59dcff); }
.ms-flow__pulses path:nth-child(2) { animation-delay: -1.3s; stroke: #ffd0a8; filter: drop-shadow(0 0 8px #ff9a4d); }
.ms-flow__pulses path:nth-child(3) { animation-delay: -0.6s; }
.ms-flow__pulses path:nth-child(4) { animation-delay: -1.9s; }
@keyframes ms-flow { from { stroke-dashoffset: 107; } to { stroke-dashoffset: 0; } }
.ms-flow__nodes li { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; display: flex; justify-content: center; }
.ms-flow__nodes li > span { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); }
.ms-flow__nodes li > b { position: absolute; top: 36px; width: 120px; left: -60px; text-align: center; font: 600 0.78rem/1.25 var(--display); }
.ms-flow__core > b { top: 50px !important; }
.ms-flow__nodes .ms-ico { width: 54px; height: 54px; border-radius: 16px; background-color: #0e1338; }
.ms-flow__core .ms-ico { width: 78px; height: 78px; border-radius: 22px; box-shadow: 0 0 0 8px rgba(139, 92, 255, 0.12), 0 0 40px rgba(139, 92, 255, 0.6); animation: ms-core 3s ease-in-out infinite; }
.ms-flow__core .ms-ico .ms-icon { width: 32px; height: 32px; }
@keyframes ms-core { 50% { box-shadow: 0 0 0 14px rgba(139, 92, 255, 0.06), 0 0 60px rgba(139, 92, 255, 0.85); } }

/* Sectors */
.ms-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; padding: 6px; border-radius: 999px; width: max-content; max-width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--edge); }
.ms-tab { padding: 10px 18px; border-radius: 999px; border: 0; background: none; cursor: pointer; font-weight: 600; font-size: 0.92rem; color: var(--muted); transition: background 0.3s, color 0.3s; }
.ms-tab:hover { color: #fff; }
.ms-tab[aria-selected="true"] { color: #fff; background: var(--grad-btn); box-shadow: 0 8px 20px -8px rgba(80, 100, 255, 0.9); }
.ms-sector { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 28px; padding: 12px; animation: ms-fade 0.6s var(--ease); }
.ms-sector[hidden] { display: none; }
@keyframes ms-fade { from { opacity: 0; transform: translateY(12px); } }
.ms-sector__photo { margin: 0; border-radius: 20px; overflow: hidden; min-height: 320px; }
.ms-sector__photo img { width: 100%; height: 100%; object-fit: cover; }
.ms-sector__body { padding: 18px 18px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.ms-sector__list { display: grid; gap: 12px; margin: 12px 0 8px; }
.ms-sector__list li { display: flex; align-items: center; gap: 16px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--edge); }
.ms-sector__list .ms-logo-chip { flex: none; width: 132px; min-width: 0; height: 58px; padding: 8px 12px; }
.ms-sector__list .ms-logo-chip img { max-width: 100%; max-height: 38px; }
.ms-sector__list strong { display: block; font-family: var(--display); font-size: 0.98rem; }
.ms-sector__list small { display: block; color: var(--muted); font-size: 0.86rem; line-height: 1.45; }

/* Cyber + power duo */
.ms-duo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 18px; }
.ms-spot { overflow: hidden; padding: clamp(26px, 3.5vw, 44px); display: flex; align-items: center; gap: 24px; min-height: 420px; }
.ms-spot__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ms-spot__copy .ms-btn { margin-top: 10px; }
.ms-spot--cyber .ms-spot__copy { flex: 1.1; }
.ms-spot__wheel { flex: 0.9; min-width: 0; width: 100%; max-width: 320px; filter: drop-shadow(0 0 40px rgba(80, 120, 255, 0.5)); animation: ms-spin 80s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }
.ms-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-pills li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 0.84rem; font-weight: 500; background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.ms-pills .ms-icon { width: 15px; height: 15px; }
.ms-spot--power { align-items: flex-end; }
.ms-spot__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: transform 1s var(--ease); }
.ms-spot--power::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 1; background: linear-gradient(180deg, rgba(8, 10, 40, 0.1) 0%, rgba(8, 10, 40, 0.7) 38%, rgba(8, 10, 40, 0.94) 70%); }
.ms-spot--power:hover .ms-spot__bg { transform: scale(1.05); }

/* Process */
.ms-process { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; --p: 0; }
.ms-process__line { position: absolute; left: 6%; right: 6%; top: 46px; height: 2px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; }
.ms-process__line span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p)); background: linear-gradient(90deg, var(--orange), var(--violet), var(--electric)); box-shadow: 0 0 14px rgba(120, 140, 255, 0.9); border-radius: 2px; }
.ms-step { padding: 26px 24px; }
.ms-step__num { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font: 700 0.9rem/1 var(--display); background: #0b0f2e; border: 1px solid var(--edge-strong); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.03); position: relative; z-index: 1; }
.ms-step__title { margin: 18px 0 8px; font-size: 1.25rem; }

/* Posts */
.ms-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ms-post { overflow: hidden; display: flex; flex-direction: column; }
.ms-post__media { display: block; margin: 10px 10px 0; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; }
.ms-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.ms-post:hover .ms-post__media img { transform: scale(1.05); }
.ms-post__body { padding: 18px 22px 24px; }
.ms-post__date { font-size: 0.8rem; color: var(--electric); letter-spacing: 0.06em; }
.ms-post__title { margin: 8px 0; font-size: 1.15rem; }
.ms-post__title a { text-decoration: none; }
.ms-pager { margin-top: 30px; }
.ms-pager .nav-links { display: flex; gap: 8px; }
.ms-pager .page-numbers { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--edge); text-decoration: none; }
.ms-pager .current { background: var(--grad-btn); }
.ms-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 24px; text-align: center; }
.ms-article { padding: clamp(22px, 4vw, 52px); max-width: 860px; }
.ms-article__media { margin: 0 0 28px; border-radius: 20px; overflow: hidden; }

/* CTA */
.ms-cta { overflow: hidden; padding: clamp(36px, 6vw, 80px); min-height: 420px; display: flex; align-items: center; }
.ms-cta__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 0.55; }
.ms-cta__shade { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(700px 400px at 100% 100%, rgba(255, 122, 47, 0.35), transparent 60%), linear-gradient(100deg, rgba(8, 10, 40, 0.92) 30%, rgba(30, 20, 90, 0.45)); }
.ms-cta__copy { position: relative; max-width: 680px; }

/* --------------------------------------------------------------------------
   Inner page hero
   -------------------------------------------------------------------------- */
.ms-phero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; min-height: 86vh; padding: 40px 0 10px; }
.ms-phero--compact { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: clamp(60px, 10vw, 120px) 0 0; }
.ms-phero--compact .ms-phero__copy { max-width: 820px; }
.ms-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 0.86rem; color: var(--muted); }
.ms-crumb a { color: var(--muted); text-decoration: none; }
.ms-crumb a:hover { color: #fff; }
.ms-crumb span { opacity: 0.5; }
.ms-phero__title { margin-top: 20px; font-size: clamp(2.4rem, 4.4vw, 4.1rem); text-wrap: balance; font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; }

/* Cyber wheel visual */
.ms-wheel { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 520px; margin-inline: auto; }
.ms-wheel img { width: 84%; animation: ms-spin 90s linear infinite; filter: drop-shadow(0 0 50px rgba(80, 120, 255, 0.55)); }
.ms-wheel__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--edge-strong); background: radial-gradient(circle, rgba(59, 116, 255, 0.18), transparent 65%); box-shadow: inset 0 0 60px rgba(139, 92, 255, 0.25); }
.ms-wheel__ring::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px dashed rgba(89, 220, 255, 0.35); animation: ms-spin 40s linear infinite reverse; }

/* --------------------------------------------------------------------------
   Company
   -------------------------------------------------------------------------- */
.ms-story, .ms-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.ms-story__photo, .ms-split__photo { margin: 0; padding: 10px; }
.ms-story__photo img, .ms-split__photo img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 20px; }
.ms-story__photo .ms-flag { position: absolute; left: 26px; bottom: 26px; }
.ms-story .ms-prose { margin-top: 18px; }
.ms-flag { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border-radius: 999px; font-weight: 600; font-size: 0.88rem; background: rgba(12, 16, 44, 0.75); border: 1px solid var(--edge-strong); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ms-flag__stripes { display: inline-flex; width: 30px; height: 20px; border-radius: 4px; overflow: hidden; background: #198a00; justify-content: flex-end; }
.ms-flag__stripes i { width: 4px; height: 100%; }
.ms-flag__stripes i:nth-child(1) { background: #de2010; }
.ms-flag__stripes i:nth-child(2) { background: #000; }
.ms-flag__stripes i:nth-child(3) { background: #ef7d00; }
.ms-flag__stripes i:nth-child(4) { display: none; }
.ms-vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ms-vm__card { padding: clamp(26px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 16px; }
.ms-vm__card .ms-label { margin: 6px 0 0; }
.ms-vm__text { font: 500 clamp(1.15rem, 1.7vw, 1.45rem)/1.45 var(--display); letter-spacing: -0.01em; }
.ms-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ms-value { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.ms-value__num { font: 800 2.6rem/1 var(--display); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; }
.ms-objectives { display: grid; gap: 14px; margin-top: 28px; }
.ms-objectives li { display: flex; gap: 16px; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--edge); }
.ms-objectives li > span { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; font: 700 0.95rem/1 var(--display); background: linear-gradient(140deg, var(--orange), #ff4f6d); }
.ms-objectives strong { font-family: var(--display); }
.ms-advisory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ms-adv { padding: 26px; display: flex; flex-direction: column; gap: 10px; border-top: 2px solid rgba(139, 92, 255, 0.6); }

/* --------------------------------------------------------------------------
   Solutions
   -------------------------------------------------------------------------- */
.ms-catalog { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.ms-catalog__nav { position: sticky; top: 24px; padding: 22px 14px; border-radius: 22px; }
.ms-catalog__nav .ms-label { margin-left: 10px; }
.ms-catalog__nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; font-size: 0.9rem; font-weight: 500; color: var(--muted); transition: background 0.25s, color 0.25s; }
.ms-catalog__nav a .ms-icon { width: 18px; height: 18px; flex: none; }
.ms-catalog__nav a:hover, .ms-catalog__nav a.is-active { color: #fff; background: rgba(255, 255, 255, 0.08); }
.ms-catalog__nav a.is-active .ms-icon { color: var(--electric); }
.ms-catalog__list { display: grid; gap: 18px; }
.ms-offer { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 28px; padding: 12px; scroll-margin-top: 24px; }
.ms-offer--plain { grid-template-columns: minmax(0, 1fr); padding: clamp(22px, 3vw, 36px); }
.ms-offer__media { margin: 0; border-radius: 20px; overflow: hidden; min-height: 300px; background: #0a1030; }
.ms-offer__media img { width: 100%; height: 100%; object-fit: cover; }
.ms-offer__media--wheel { display: grid; place-items: center; background: radial-gradient(circle, #1b2a7a, #070c2c 70%); }
.ms-offer__media--wheel img { width: 80%; height: auto; object-fit: contain; }
.ms-offer__body { padding: 18px 18px 18px 0; display: flex; flex-direction: column; gap: 12px; }
.ms-offer--plain .ms-offer__body { padding: 0; }
.ms-offer .ms-actions { margin-top: 14px; }
.ms-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ms-matrix li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--edge); }
.ms-matrix__logos { grid-row: 1 / span 2; display: flex; gap: 6px; }
.ms-matrix .ms-logo-chip { min-width: 80px; height: 48px; padding: 8px 12px; }
.ms-matrix .ms-logo-chip img { max-height: 24px; max-width: 80px; }
.ms-matrix strong { font-family: var(--display); font-size: 0.96rem; }
.ms-matrix .ms-muted { font-size: 0.86rem; line-height: 1.4; }
.ms-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ms-caps li { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 20px; font-weight: 500; }
.ms-caps__num { font: 700 0.86rem/1 var(--display); color: var(--electric); }
.ms-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.ms-mini__item { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; text-decoration: none; }
.ms-mini__item strong { flex: 1; font-family: var(--display); font-size: 0.98rem; }
.ms-mini__item > .ms-icon { width: 18px; height: 18px; color: var(--muted); transition: transform 0.3s var(--ease), color 0.3s; }
.ms-mini__item:hover > .ms-icon { transform: translateX(4px); color: #fff; }

/* --------------------------------------------------------------------------
   Cybersecurity
   -------------------------------------------------------------------------- */
.ms-diff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ms-diff__card { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.ms-pillars { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: stretch; }
.ms-pillars__list { display: grid; gap: 8px; }
.ms-pillar-tab { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; text-align: left; cursor: pointer; border: 1px solid var(--edge); background: rgba(255, 255, 255, 0.04); transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease); }
.ms-pillar-tab:hover { background: rgba(255, 255, 255, 0.08); }
.ms-pillar-tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--c) 70%, transparent); background: linear-gradient(110deg, color-mix(in srgb, var(--c) 32%, transparent), rgba(255, 255, 255, 0.04)); transform: translateX(6px); }
.ms-pillar-tab__ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--c) 30%, transparent); color: #fff; }
.ms-pillar-tab__ico .ms-icon { width: 20px; height: 20px; }
.ms-pillar-tab__name { flex: 1; font: 600 0.98rem/1.2 var(--display); }
.ms-pillar-tab__num { font: 600 0.78rem/1 var(--display); color: var(--dim); }
.ms-pillar { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 30px; align-items: center; padding: clamp(24px, 3vw, 40px); animation: ms-fade 0.5s var(--ease); }
.ms-pillar[hidden] { display: none; }
.ms-pillar__layers { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.ms-pillar__layers span { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); }
.ms-pillar__layers span:nth-child(1) { inset: 0; }
.ms-pillar__layers span:nth-child(2) { inset: 8%; }
.ms-pillar__layers span:nth-child(3) { inset: 16%; }
.ms-pillar__layers span:nth-child(4) { inset: 24%; }
.ms-pillar__layers span:nth-child(5) { inset: 32%; }
.ms-pillar__layers span:nth-child(6) { inset: 40%; }
.ms-pillar__layers span.is-on { border: 2px solid var(--c); box-shadow: 0 0 24px var(--c), inset 0 0 24px color-mix(in srgb, var(--c) 50%, transparent); animation: ms-ring 2.4s ease-in-out infinite; }
@keyframes ms-ring { 50% { box-shadow: 0 0 40px var(--c), inset 0 0 30px color-mix(in srgb, var(--c) 60%, transparent); } }
.ms-pillar__layers i { position: relative; width: 26%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--c); box-shadow: 0 0 50px var(--c); }
.ms-pillar__layers i .ms-icon { width: 46%; height: 46%; color: #fff; }
.ms-pillar__body .ms-label { color: color-mix(in srgb, var(--c) 45%, #fff) !important; }

.ms-check { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 52px); }
.ms-check__intro { display: flex; flex-direction: column; gap: 14px; }
.ms-score { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 20px; align-items: center; margin-top: 14px; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--edge); }
.ms-score svg { grid-column: 1; grid-row: 1 / span 2; width: 120px; height: 120px; transform: rotate(-90deg); }
.ms-score circle { fill: none; stroke-width: 10; }
.ms-score__track { stroke: rgba(255, 255, 255, 0.08); }
.ms-score__bar { stroke: url(#none); stroke: var(--score-c, var(--electric)); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 0.8s var(--ease), stroke 0.4s; filter: drop-shadow(0 0 8px var(--score-c, var(--electric))); }
.ms-score__value { font: 800 2.4rem/1 var(--display); align-self: end; }
.ms-score__verdict { color: var(--muted); font-size: 0.92rem; align-self: start; }
.ms-check__list { display: grid; gap: 10px; }
.ms-check__item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; cursor: pointer; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--edge); transition: background 0.25s, border-color 0.25s; }
.ms-check__item:hover { background: rgba(255, 255, 255, 0.08); }
.ms-check__item input { position: absolute; opacity: 0; pointer-events: none; }
.ms-check__box { width: 24px; height: 24px; flex: none; margin-top: 2px; display: grid; place-items: center; border-radius: 8px; border: 1.5px solid var(--edge-strong); transition: background 0.25s, border-color 0.25s; }
.ms-check__box .ms-icon { width: 15px; height: 15px; stroke-width: 3; opacity: 0; transform: scale(0.5); transition: opacity 0.25s, transform 0.3s var(--ease); }
.ms-check__item input:checked ~ .ms-check__box { background: var(--electric); border-color: var(--electric); color: #061030; }
.ms-check__item input:checked ~ .ms-check__box .ms-icon { opacity: 1; transform: none; }
.ms-check__item input:focus-visible ~ .ms-check__box { outline: 2px solid var(--electric); outline-offset: 3px; }
.ms-check__item:has(input:checked) { border-color: rgba(89, 220, 255, 0.45); background: rgba(89, 220, 255, 0.07); }
.ms-check__item strong { display: block; font-family: var(--display); font-size: 0.98rem; }
.ms-check__item small { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.45; margin-top: 2px; }
.ms-check__cta { margin-top: 8px; }
.ms-catalogue { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ms-catalogue__group { padding: 24px; }

/* --------------------------------------------------------------------------
   Power
   -------------------------------------------------------------------------- */
.ms-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ms-gallery__item { margin: 0; padding: 10px; overflow: hidden; }
.ms-gallery__btn { display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in; background: #0a1030; aspect-ratio: 4 / 3; }
.ms-gallery__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.ms-gallery__item:hover img { transform: scale(1.06); }
.ms-gallery__item figcaption { display: flex; flex-direction: column; gap: 4px; padding: 16px 10px 8px; }
.ms-gallery__item strong { font-family: var(--display); }
.ms-gallery__item .ms-muted { font-size: 0.9rem; }

.ms-sizer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 52px); }
.ms-sizer__inputs { display: flex; flex-direction: column; gap: 12px; }
.ms-sizer__inputs > .ms-muted { margin-bottom: 10px; }
.ms-range { display: block; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--edge); }
.ms-range__top { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; font-size: 0.94rem; }
.ms-range output { font: 700 0.95rem/1.4 var(--display); color: var(--orange-2); }
.ms-range input { width: 100%; margin: 12px 0 2px; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--orange) 0%, var(--violet) var(--fill, 50%), rgba(255, 255, 255, 0.12) var(--fill, 50%)); outline-offset: 6px; }
.ms-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--orange); box-shadow: 0 0 0 6px rgba(255, 122, 47, 0.2); cursor: pointer; }
.ms-range input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--orange); cursor: pointer; }
.ms-sizer__out { display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 122, 47, 0.16), rgba(139, 92, 255, 0.12)); border: 1px solid rgba(255, 160, 100, 0.3); align-self: start; position: sticky; top: 24px; }
.ms-meter__label { color: var(--muted); font-size: 0.9rem; }
.ms-meter__value { font: 800 clamp(3rem, 6vw, 4.6rem)/1 var(--display); letter-spacing: -0.04em; margin: 6px 0 14px; }
.ms-meter__value small { font-size: 0.4em; color: var(--muted); letter-spacing: 0; }
.ms-meter__bar { display: block; height: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ms-meter__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--violet), var(--electric)); box-shadow: 0 0 14px rgba(255, 140, 80, 0.8); transition: width 0.6s var(--ease); }
.ms-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ms-results div { padding: 14px 12px; border-radius: 14px; background: rgba(5, 8, 30, 0.45); border: 1px solid var(--edge); }
.ms-results dt { color: var(--muted); font-size: 0.8rem; }
.ms-results dd { margin: 4px 0 0; font: 700 1.2rem/1.2 var(--display); }
.ms-sizer__tip { color: #e7e9ff; font-size: 0.94rem; min-height: 3em; }
.ms-sizer__out .ms-btn { align-self: flex-start; }

.ms-projects { padding: clamp(22px, 3vw, 36px); }
.ms-projects__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.ms-projects__strip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ms-projects__strip li { flex: none; width: 190px; scroll-snap-align: start; }
.ms-projects__strip button { display: block; width: 190px; height: 190px; padding: 0; border: 1px solid var(--edge); border-radius: 16px; overflow: hidden; cursor: zoom-in; background: #0a1030; }
.ms-projects__strip img { width: 100%; height: 100%; object-fit: cover; }
.ms-projects__strip span { display: block; margin-top: 8px; font-size: 0.84rem; color: var(--muted); }

/* Lightbox */
.ms-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(3, 4, 14, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.ms-lightbox.is-open { opacity: 1; pointer-events: auto; }
.ms-lightbox figure { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.ms-lightbox img { max-height: 80vh; margin: 0 auto; border-radius: 18px; object-fit: contain; }
.ms-lightbox figcaption { margin-top: 12px; color: var(--muted); }
.ms-lightbox button { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--edge-strong); background: rgba(255, 255, 255, 0.1); cursor: pointer; }
.ms-lightbox button .ms-icon { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Clients & partners
   -------------------------------------------------------------------------- */
.ms-alliances { display: grid; gap: 14px; }
.ms-alliance { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 20px; padding: 16px 16px 16px 26px; border-radius: 24px; }
.ms-alliance__label { display: flex; flex-direction: column; gap: 4px; }
.ms-alliance__num { font: 700 0.8rem/1 var(--display); color: var(--electric); }
.ms-alliance__label .ms-muted { font-size: 0.86rem; }
.ms-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.ms-filter { padding: 10px 18px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--edge); transition: background 0.25s, color 0.25s; }
.ms-filter:hover { color: #fff; }
.ms-filter[aria-pressed="true"] { color: #fff; background: var(--grad-btn); border-color: transparent; }
.ms-engagements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ms-engagement { padding: 22px; display: flex; flex-direction: column; gap: 8px; transition: opacity 0.4s, transform 0.4s var(--ease); }
.ms-engagement.is-hidden { display: none; }
.ms-engagement__logos { display: flex; gap: 8px; margin-bottom: 10px; }
.ms-engagement__tag { font: 600 0.74rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-2); }

/* --------------------------------------------------------------------------
   Contact & form
   -------------------------------------------------------------------------- */
.ms-contact { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 20px; align-items: start; padding-top: 44px; }
.ms-contact__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ms-contact__card { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 20px; text-decoration: none; min-width: 0; }
.ms-contact__card > span:last-child { min-width: 0; }
.ms-contact__card small { display: block; color: var(--muted); font-size: 0.8rem; }
.ms-contact__card strong { display: block; font-family: var(--display); font-size: 0.95rem; overflow-wrap: anywhere; }
.ms-contact__card--wa .ms-ico { color: #b9ffd5; background: linear-gradient(140deg, rgba(37, 211, 102, 0.45), rgba(37, 211, 102, 0.08)); border-color: rgba(37, 211, 102, 0.5); }
.ms-contact__card--static, .ms-contact__card--wide, .ms-map { grid-column: 1 / -1; }
.ms-map { padding: 8px; overflow: hidden; }
.ms-map iframe { display: block; width: 100%; height: 280px; border: 0; border-radius: 18px; background: #e9edf5; }
.ms-form { padding: clamp(22px, 3.5vw, 40px); display: grid; gap: 16px; scroll-margin-top: 24px; }
.ms-form__head { margin-bottom: 4px; }
.ms-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ms-field { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ms-field > span, .ms-field legend { font-size: 0.86rem; font-weight: 600; color: #d6dcf7; padding: 0; margin-bottom: 7px; }
.ms-field input, .ms-field select, .ms-field textarea { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; font: inherit; color: #fff; background: rgba(5, 8, 30, 0.55); border: 1px solid var(--edge-strong); transition: border-color 0.25s, box-shadow 0.25s; }
.ms-field textarea { resize: vertical; }
.ms-field select option { background: #0b1033; }
.ms-field input:focus, .ms-field select:focus, .ms-field textarea:focus { outline: none; border-color: var(--electric); box-shadow: 0 0 0 4px rgba(89, 220, 255, 0.15); }
.ms-field ::placeholder { color: var(--dim); }
.ms-choice__list { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-choice__list label { position: relative; cursor: pointer; }
.ms-choice__list input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ms-choice__list span { display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: 0.86rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--edge); transition: background 0.25s, border-color 0.25s; }
.ms-choice__list label:hover span { background: rgba(255, 255, 255, 0.1); }
.ms-choice__list input:checked + span { background: var(--grad-btn); border-color: transparent; box-shadow: 0 6px 18px -8px rgba(80, 100, 255, 0.9); }
.ms-choice__list input:focus-visible + span { outline: 2px solid var(--electric); outline-offset: 2px; }
.ms-form__hp { position: absolute; left: -9999px; }
.ms-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; }
.ms-form__note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.85rem; }
.ms-form__note .ms-icon { width: 18px; height: 18px; color: #3dffa8; }
.ms-notice { padding: 14px 16px; border-radius: 14px; font-weight: 500; }
.ms-notice--ok { background: rgba(61, 255, 168, 0.12); border: 1px solid rgba(61, 255, 168, 0.4); }
.ms-notice--error { background: rgba(255, 90, 90, 0.12); border: 1px solid rgba(255, 90, 90, 0.45); }

/* --------------------------------------------------------------------------
   Footer & floating buttons
   -------------------------------------------------------------------------- */
.ms-footer { max-width: 1320px; margin: clamp(60px, 9vw, 120px) auto 0; padding-bottom: 24px; }
.ms-footer__top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 30px; padding: clamp(26px, 4vw, 48px); }
.ms-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ms-footer__motto { font: 600 1.25rem/1.35 var(--display); max-width: 300px; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-footer__col h3 { font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; font-family: var(--font); font-weight: 600; }
.ms-footer__col ul { display: grid; gap: 10px; }
.ms-footer__col a { color: #d9def7; text-decoration: none; font-size: 0.94rem; }
.ms-footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ms-footer__contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: #d9def7; }
.ms-footer__contact .ms-icon { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--electric); }
.ms-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 20px 8px 0; font-size: 0.86rem; color: var(--dim); }
.ms-footer__tag { color: var(--muted); font-weight: 600; }

.ms-wa { position: fixed; right: 22px; bottom: 22px; z-index: 50; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 20px 0 16px; border-radius: 999px; text-decoration: none; font-weight: 600; background: #25d366; color: #05210f; box-shadow: 0 14px 34px -10px rgba(37, 211, 102, 0.8); transition: transform 0.3s var(--ease); }
.ms-wa:hover { transform: translateY(-3px); }
.ms-wa .ms-icon { width: 24px; height: 24px; }
.ms-top { position: fixed; right: 28px; bottom: 90px; z-index: 50; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; border: 1px solid var(--edge-strong); background: rgba(14, 18, 48, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.3s, transform 0.3s var(--ease); }
.ms-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ms-top .ms-icon { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
	.ms-practices, .ms-posts, .ms-engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ms-values, .ms-advisory, .ms-catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ms-duo { grid-template-columns: minmax(0, 1fr); }
	.ms-catalog { grid-template-columns: minmax(0, 1fr); }
	.ms-catalog__nav { position: static; }
	.ms-catalog__nav ul { display: flex; flex-wrap: wrap; gap: 4px; }
	.ms-matrix { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
	:root { --side-w: 300px; }
	.side-collapsed { --side-w: 300px; }
	.ms-topbar {
		position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 16px;
		background: rgba(6, 8, 26, 0.6); border-bottom: 1px solid var(--edge); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
	}
	.ms-topbar .ms-brand__mark { width: 34px; height: 34px; }
	.ms-topbar .ms-brand__word { font-size: 1.25rem; }
	.ms-topbar__menu { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; cursor: pointer; border: 1px solid var(--edge-strong); background: rgba(255, 255, 255, 0.08); }
	.ms-topbar__menu .ms-icon { width: 22px; height: 22px; }
	.ms-side { width: min(var(--side-w), calc(100vw - 32px)); transform: translateX(calc(-100% - 40px)); transition: transform 0.5s var(--ease); }
	.side-open .ms-side { transform: none; }
	.ms-side__toggle { display: none; }
	.ms-side__close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; border: 1px solid var(--edge-strong); background: rgba(255, 255, 255, 0.1); }
	.ms-side__close .ms-icon { width: 18px; height: 18px; }
	.side-collapsed .ms-side__text, .side-collapsed .ms-side__badge:not(.ms-side__badge--dot) { opacity: 1; pointer-events: auto; width: auto; overflow: visible; }
	.side-collapsed .ms-side__link { justify-content: flex-start; padding: 0 13px; gap: 14px; }
	.side-collapsed .ms-side__brand { justify-content: flex-start; gap: 12px; padding-inline: 6px; }
	.side-collapsed .ms-side__card { justify-content: flex-start; padding: 10px; gap: 12px; background: rgba(255, 255, 255, 0.06); border-color: var(--edge); }
	.side-collapsed .ms-side__label { text-align: left; }
	.side-collapsed .ms-side__label::before { content: none; }
	.side-collapsed .ms-side__dots { justify-content: flex-start; }
	.side-collapsed .ms-side__badge--dot { position: static; }
	.side-collapsed .ms-side__cta { gap: 10px; }
	.ms-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(2, 3, 12, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.4s; }
	.side-open .ms-scrim { opacity: 1; pointer-events: auto; }
	.side-open body { overflow: hidden; }
	.ms-shell { margin-left: 0; padding: 0 20px; }
	.ms-hero, .ms-phero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 44px; }
	.ms-hero__visual, .ms-phero__visual { max-width: 640px; }
	.ms-fusion, .ms-story, .ms-split, .ms-check, .ms-sizer, .ms-contact, .ms-pillars, .ms-sector { grid-template-columns: minmax(0, 1fr); }
	.ms-sizer__out { position: static; }
	.ms-sector__body { padding: 6px 10px 14px; }
	.ms-sector__photo { min-height: 0; aspect-ratio: 16 / 9; }
	.ms-pillars__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ms-pillar-tab[aria-selected="true"] { transform: none; }
	.ms-offer { grid-template-columns: minmax(0, 1fr); }
	.ms-offer__media { min-height: 0; aspect-ratio: 16 / 9; }
	.ms-offer__body { padding: 6px 12px 16px; }
	.ms-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ms-footer__brand { grid-column: 1 / -1; }
	.ms-alliance { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 14px; }
	.ms-diff, .ms-caps { grid-template-columns: minmax(0, 1fr); }
	.ms-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ms-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ms-process__line { display: none; }
}

@media (max-width: 720px) {
	.ms-shell { padding: 0 16px; }
	.ms-practices, .ms-posts, .ms-engagements, .ms-values, .ms-advisory, .ms-catalogue, .ms-gallery, .ms-vm, .ms-process, .ms-contact__info, .ms-form__row, .ms-ticks--two { grid-template-columns: minmax(0, 1fr); }
	.ms-hero__title { font-size: clamp(2.3rem, 10.5vw, 3rem); }
	.ms-phero__title { font-size: clamp(2.1rem, 9.5vw, 2.8rem); }
	.ms-stat { padding: 18px; }
	.ms-float--a { left: -6px; top: 8%; }
	.ms-float--b { right: -6px; }
	.ms-float { padding: 8px 12px 8px 10px; font-size: 0.78rem; }
	.ms-spot { flex-direction: column; align-items: flex-start; min-height: 0; }
	.ms-spot__wheel { max-width: 240px; align-self: center; }
	.ms-spot--power { min-height: 440px; }
	.ms-tabs { border-radius: 20px; width: 100%; }
	.ms-tab { flex: 1 1 auto; padding: 9px 12px; font-size: 0.84rem; }
	.ms-sector__list li { flex-direction: column; align-items: flex-start; gap: 10px; }
	.ms-pillars__list { grid-template-columns: minmax(0, 1fr); }
	.ms-pillar { grid-template-columns: minmax(0, 1fr); }
	.ms-pillar__layers { max-width: 220px; width: 100%; margin: 0 auto; }
	.ms-score { grid-template-columns: 96px minmax(0, 1fr); }
	.ms-score svg { width: 96px; height: 96px; }
	.ms-results { grid-template-columns: minmax(0, 1fr); }
	.ms-results div { display: flex; justify-content: space-between; align-items: center; }
	.ms-results dd { margin: 0; }
	.ms-footer__top { grid-template-columns: minmax(0, 1fr); }
	.ms-head-row { flex-direction: column; align-items: flex-start; }
	.ms-wa span { display: none; }
	.ms-wa { width: 56px; padding: 0; justify-content: center; }
	.ms-top { right: 26px; bottom: 88px; }
	.ms-marquee--chips li { width: 128px; height: 56px; padding: 10px 14px; }
	.ms-marquee--chips img { max-width: 96px; max-height: 28px; }
	.ms-projects__head { flex-direction: column; align-items: flex-start; }
	.ms-flow__nodes li > b { font-size: 0.66rem; top: 26px; width: 84px; left: -42px; }
	.ms-flow__core > b { top: 36px !important; }
	.ms-flow__nodes .ms-ico { width: 40px; height: 40px; border-radius: 12px; }
	.ms-flow__nodes .ms-ico .ms-icon { width: 18px; height: 18px; }
	.ms-flow__core .ms-ico { width: 56px; height: 56px; }
	.ms-matrix li { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 8px; }
	.ms-matrix__logos { grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
	.js [data-reveal] { opacity: 1; transform: none; }
	.ms-marquee__track { animation: none; }
}

/* ==========================================================================
   Imagery & motion layer
   ========================================================================== */

/* Electric edge: a pulse of current running around the border */
@property --edge-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ms-charged { position: relative; isolation: isolate; }
.ms-charged::before {
	content: ""; position: absolute; inset: -1.5px; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 1;
	background: conic-gradient(from var(--edge-a), transparent 0deg 250deg, rgba(89, 220, 255, 0.95) 300deg, rgba(139, 92, 255, 0.95) 330deg, rgba(255, 140, 70, 0.95) 352deg, transparent 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	filter: drop-shadow(0 0 6px rgba(89, 220, 255, 0.8));
	animation: ms-edge 5s linear infinite;
}
.ms-pfloat--b.ms-charged::before { animation-duration: 6.5s; animation-direction: reverse; }
@keyframes ms-edge { to { --edge-a: 360deg; } }

/* Blue-violet duotone tint that lifts on hover */
.ms-tone { position: relative; overflow: hidden; }
.ms-tone::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background: linear-gradient(135deg, rgba(59, 116, 255, 0.55), rgba(139, 92, 255, 0.4) 55%, rgba(255, 122, 47, 0.3));
	mix-blend-mode: color; opacity: 0.85; transition: opacity 0.6s var(--ease);
}
.ms-tone:hover::after, *:hover > .ms-tone::after, .ms-tone-host:hover .ms-gallery__btn::after { opacity: 0; }
.ms-tone img { transition: transform 1s var(--ease); }

/* Wipe-in reveal with a scan line */
.js [data-wipe] { clip-path: inset(0 100% 0 0 round 20px); transition: clip-path 1.3s var(--ease) 0.1s; }
.js [data-wipe].is-in { clip-path: inset(0 0 0 0 round 20px); }
[data-wipe] { position: relative; }
.js [data-wipe]::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; z-index: 4; pointer-events: none; opacity: 0;
	background: linear-gradient(180deg, transparent, #9fe9ff 20%, #fff 50%, #9fe9ff 80%, transparent); box-shadow: 0 0 18px 4px rgba(89, 220, 255, 0.8);
}
.js [data-wipe].is-in::before { animation: ms-scan 1.3s var(--ease) 0.1s; }
@keyframes ms-scan { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* Parallax photos (JS sets --py) */
img[data-parallax] { transform: translateY(var(--py, 0px)) scale(1.14); will-change: transform; }
.ms-photo-wrap { display: block; overflow: hidden; border-radius: 20px; }
.ms-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.ms-story__photo .ms-photo-wrap, .ms-split__photo .ms-photo-wrap { aspect-ratio: 4 / 4.4; }
.ms-story__photo .ms-photo-wrap img, .ms-split__photo .ms-photo-wrap img { aspect-ratio: auto; border-radius: 0; }
.ms-split__photo, .ms-story__photo { position: relative; }
.ms-photo-tag { position: absolute; left: 22px; bottom: 22px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; font: 600 0.84rem/1 var(--display); background: rgba(10, 14, 40, 0.72); border: 1px solid var(--edge-strong); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ms-photo-tag .ms-icon { width: 16px; height: 16px; color: var(--electric); }
.ms-sector__photo { position: relative; }

/* Floating photo cards around page-header visuals */
.ms-phero__visual { position: relative; }
.ms-pfloat { position: absolute; z-index: 4; width: 40%; margin: 0; padding: 6px; border-radius: 18px; background: linear-gradient(160deg, rgba(40, 48, 110, 0.9), rgba(12, 16, 44, 0.92)); border: 1px solid var(--edge-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8); translate: var(--fx, 0px) var(--fy, 0px); transition: translate 0.6s var(--ease); }
.ms-pfloat img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 13px; }
.ms-pfloat figcaption { display: flex; align-items: center; gap: 7px; padding: 8px 6px 3px; font: 600 0.8rem/1.2 var(--display); }
.ms-pfloat figcaption .ms-icon { width: 15px; height: 15px; flex: none; color: var(--electric); }
.ms-pfloat--a { left: -10%; bottom: -14%; animation: ms-bob 7s ease-in-out infinite; }
.ms-pfloat--b { right: -6%; top: -12%; width: 34%; animation: ms-bob 8s ease-in-out -3s infinite; }
.ms-pfloat--b figcaption .ms-icon { color: var(--orange-2); }
.ms-phero__visual .ms-wheel ~ .ms-pfloat--a { left: -4%; bottom: -2%; }
.ms-phero__visual .ms-wheel ~ .ms-pfloat--b { right: -2%; top: 0; }

/* Wide feature photo with caption */
.ms-wide { margin: 0 0 18px; padding: 10px; overflow: hidden; }
.ms-wide .ms-photo-wrap { aspect-ratio: 21 / 8; }
.ms-wide__cap { position: absolute; left: 34px; bottom: 30px; z-index: 5; display: flex; flex-direction: column; gap: 6px; max-width: 520px; padding: 18px 22px; border-radius: 18px; background: rgba(10, 14, 40, 0.7); border: 1px solid var(--edge-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ms-wide__cap strong { font: 700 1.1rem/1.3 var(--display); }
.ms-wide__cap span { color: var(--muted); font-size: 0.95rem; }

/* Cinematic band with kinetic words */
.ms-band { position: relative; overflow: hidden; min-height: clamp(380px, 52vw, 560px); display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 70px); }
.ms-band__media { position: absolute; inset: -12% 0; z-index: 0; transform: translateY(var(--py, 0px)); will-change: transform; }
.ms-band__media video, .ms-band__media img { width: 100%; height: 100%; object-fit: cover; }
.ms-band__shade { position: absolute; inset: 0; z-index: 1; background: radial-gradient(900px 500px at 0% 0%, rgba(8, 10, 40, 0.92), transparent 70%), linear-gradient(180deg, rgba(8, 10, 40, 0.35), rgba(8, 10, 40, 0.85)), linear-gradient(120deg, rgba(59, 116, 255, 0.25), rgba(139, 92, 255, 0.2)); }
.ms-band__copy { position: relative; z-index: 2; max-width: 760px; margin-bottom: clamp(70px, 9vw, 120px); }
.ms-kinetic { position: absolute; left: 0; right: 0; bottom: clamp(18px, 3vw, 36px); z-index: 2; overflow: hidden; pointer-events: none; }
.ms-kinetic__row { display: flex; align-items: center; gap: 0.5em; width: max-content; font: 800 clamp(2.6rem, 7vw, 6.4rem)/1.05 var(--display); letter-spacing: -0.04em; white-space: nowrap; transform: translateX(var(--kx, 0%)); will-change: transform; }
.ms-kinetic__row span { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55); }
.ms-kinetic__row span.is-fill { -webkit-text-stroke: 0; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; }
.ms-kinetic__row i { width: 0.3em; height: 0.3em; flex: none; border-radius: 50%; background: var(--orange); box-shadow: 0 0 20px var(--orange); }

/* Photo reel */
.ms-reel { padding: clamp(56px, 8vw, 100px) 0 10px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ms-reel__track { display: flex; width: max-content; animation: ms-reel var(--dur, 70s) linear infinite; }
@keyframes ms-reel { to { transform: translateX(-50%); } }
.ms-reel:hover .ms-reel__track { animation-play-state: paused; }
.ms-reel__list { display: flex; gap: 22px; padding: 20px 11px; }
.ms-reel__item { position: relative; flex: none; width: clamp(200px, 22vw, 290px); aspect-ratio: 3 / 4; border-radius: 22px; border: 1px solid var(--edge-strong); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.85); transform: rotate(var(--r)); transition: transform 0.6s var(--ease), box-shadow 0.6s; }
.ms-reel__item:hover { transform: rotate(0deg) scale(1.06); z-index: 2; box-shadow: 0 30px 80px -20px rgba(59, 116, 255, 0.7); }
.ms-reel__item img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ms-reel__item span { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; padding: 9px 12px; border-radius: 12px; font: 600 0.86rem/1.2 var(--display); background: rgba(10, 14, 40, 0.7); border: 1px solid var(--edge-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Fusion diagram texture */
.ms-flow { overflow: hidden; }
.ms-flow__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 0.22; mix-blend-mode: screen; filter: hue-rotate(190deg) saturate(1.4); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 85%); mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 85%); }

/* Cyber difference cards with photos */
.ms-diff__card { overflow: hidden; padding-top: 10px; }
.ms-diff__media { display: block; margin: 0 -18px 6px; height: 170px; border-radius: 18px; }
.ms-diff__media img { width: 100%; height: 100%; object-fit: cover; }
.ms-diff__card .ms-ico { margin-top: -38px; position: relative; z-index: 2; background-color: #0e1338; }

/* Supply desk photo pair */
.ms-offer__media--duo { position: relative; overflow: visible; background: none; }
.ms-offer__media--duo > img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.ms-offer__inset { position: absolute; right: -14px; bottom: -14px; width: 38%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; border: 4px solid rgba(255, 255, 255, 0.9); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8); transform: rotate(4deg); transition: transform 0.5s var(--ease); }
.ms-offer:hover .ms-offer__inset { transform: rotate(0deg) scale(1.05); }

/* Gallery tint */
.ms-gallery__btn { position: relative; }
.ms-gallery__btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(59, 116, 255, 0.5), rgba(255, 122, 47, 0.3)); mix-blend-mode: color; opacity: 0.8; transition: opacity 0.6s var(--ease); }

@media (max-width: 1024px) {
	.ms-pfloat--a { left: -2%; bottom: -10%; width: 42%; }
	.ms-pfloat--b { right: -2%; top: -8%; }
	.ms-phero__visual { margin-bottom: 40px; }
}
@media (max-width: 720px) {
	.ms-pfloat { width: 46%; padding: 4px; }
	.ms-pfloat--b { width: 40%; }
	.ms-pfloat figcaption { font-size: 0.7rem; padding: 6px 4px 2px; }
	.ms-wide .ms-photo-wrap { aspect-ratio: 4 / 3; }
	.ms-wide__cap { position: static; margin-top: 10px; max-width: none; }
	.ms-band { min-height: 460px; }
	.ms-diff__media { height: 150px; }
	.ms-offer__inset { right: 8px; bottom: -10px; width: 34%; }
	.ms-reel__item { width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
	.ms-charged::before { animation: none; opacity: 0.6; }
	.js [data-wipe] { clip-path: none; }
	img[data-parallax] { transform: scale(1.05); }
	.ms-reel__track { animation: none; }
}

/* ==========================================================================
   Polish pass: original logo colours, hero backdrop & live feed, finishing touches
   ========================================================================== */

:root { --navy-logo: #12224f; --blue-logo: #2b8ce8; }

/* Logo badge: the original navy + blue wordmark on white, like the official logo */
.ms-brand--badge { padding: 7px 14px 7px 9px; border-radius: 16px; background: linear-gradient(180deg, #ffffff, #eef4ff); box-shadow: 0 10px 30px -12px rgba(59, 116, 255, 0.9), inset 0 -2px 0 rgba(18, 34, 79, 0.08); transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.ms-brand--badge:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(59, 116, 255, 1), inset 0 -2px 0 rgba(18, 34, 79, 0.08); }
.ms-brand--badge .ms-brand__mark { width: 38px; height: 38px; filter: none; }
.ms-wm { display: inline-flex; flex-direction: column; font: 800 1.42rem/1 var(--display); letter-spacing: -0.035em; white-space: nowrap; }
.ms-wm > span { display: inline-flex; align-items: baseline; }
.ms-wm__mode { color: var(--navy-logo); }
.ms-wm__link { color: var(--blue-logo); }
.ms-wm__mode, .ms-wm__link { display: inline; }
.ms-wm { flex-direction: row; flex-wrap: wrap; align-items: baseline; max-width: 150px; }
.ms-wm__i { position: relative; display: inline-block; }
.ms-wm__dot { position: absolute; left: 50%; top: -0.42em; width: 0.62em; height: 0.62em; transform: translateX(-50%); color: var(--navy-logo); overflow: visible; }
.ms-wm__dot path:last-child { filter: drop-shadow(0 0 2px rgba(255, 122, 26, 0.6)); }
.ms-wm__sub { flex-basis: 100%; margin-top: 4px; font: 700 0.55rem/1 var(--font); letter-spacing: 0.3em; text-transform: uppercase; color: var(--navy-logo); opacity: 0.75; }
.ms-side__brand.ms-brand--badge { margin: 4px 0 10px; border-bottom: 0; }
.ms-side__brand { padding-bottom: 7px; }
.side-collapsed .ms-side__brand.ms-brand--badge { padding: 7px; justify-content: center; }
.side-collapsed .ms-side__brand .ms-wm { display: none; }
.ms-topbar .ms-brand--badge { padding: 5px 12px 5px 7px; }
.ms-topbar .ms-wm { font-size: 1.2rem; }
.ms-footer .ms-brand--badge .ms-brand__mark { width: 44px; height: 44px; }
.ms-side__toggle { top: 64px; }

/* Shimmer instead of black while photos and videos load */
.ms-skel, .ms-practice__media, .ms-offer__media:not(.ms-offer__media--wheel):not(.ms-offer__media--duo), .ms-gallery__btn, .ms-post__media, .ms-sector__photo, .ms-reel__item, .ms-photo-wrap, .ms-pfloat img, .ms-diff__media {
	background: linear-gradient(110deg, #1a2160 8%, #2c3790 18%, #1a2160 33%) 0 0 / 200% 100%;
	animation: ms-shimmer 1.6s linear infinite;
}
.ms-practice__media--wheel { background: radial-gradient(circle at 50% 50%, #1b2a7a, #070c2c 70%); animation: none; }
@keyframes ms-shimmer { to { background-position: -200% 0; } }

/* Faster, earlier reveals so nothing sits empty while scrolling */
.js [data-reveal] { transform: translateY(22px); transition-duration: 0.7s; }
.js [data-wipe] { transition-duration: 1s; }

/* Hero backdrop: data centre and substation merged by a glowing seam */
.ms-hero, .ms-phero { position: relative; isolation: isolate; }
.ms-hero__backdrop { position: absolute; z-index: -1; top: -60px; bottom: -40px; left: -50vw; right: -50vw; overflow: hidden; pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); }
.ms-hero__bg { position: absolute; top: 0; height: 100%; object-fit: cover; mix-blend-mode: luminosity; opacity: 0.38; filter: contrast(1.1) brightness(0.85); }
.ms-hero__bg--tech { left: 0; width: 62%; -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 55%, transparent 100%); animation: ms-kenburns 30s ease-in-out infinite alternate; }
.ms-hero__bg--power { right: 0; width: 60%; -webkit-mask-image: linear-gradient(270deg, #000 50%, transparent 100%); mask-image: linear-gradient(270deg, #000 50%, transparent 100%); animation: ms-kenburns 34s ease-in-out -10s infinite alternate-reverse; }
@keyframes ms-kenburns { from { transform: scale(1.04); } to { transform: scale(1.14) translateX(-1.5%); } }
.ms-hero__seam { position: absolute; top: -10%; bottom: -10%; left: 50%; width: 2px; transform: rotate(14deg); background: linear-gradient(180deg, transparent, rgba(89, 220, 255, 0.85) 30%, rgba(255, 140, 70, 0.85) 70%, transparent); box-shadow: 0 0 24px 4px rgba(89, 220, 255, 0.35); opacity: 0.55; }
.ms-hero__seam::after { content: ""; position: absolute; left: -3px; width: 8px; height: 90px; border-radius: 8px; background: linear-gradient(180deg, transparent, #fff, transparent); box-shadow: 0 0 20px 6px rgba(160, 230, 255, 0.9); animation: ms-seam 3.4s linear infinite; }
@keyframes ms-seam { from { top: -10%; } to { top: 105%; } }
.ms-hero__backdrop--page .ms-hero__bg { left: auto; right: 0; width: 70%; opacity: 0.3; -webkit-mask-image: radial-gradient(70% 80% at 75% 45%, #000 30%, transparent 75%); mask-image: radial-gradient(70% 80% at 75% 45%, #000 30%, transparent 75%); animation: ms-kenburns 32s ease-in-out infinite alternate; }

/* Live operations feed in the hero window */
.ms-window__media { position: relative; }
.ms-feed__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.1s var(--ease), transform 6s linear; }
.ms-feed__layer.is-on { opacity: 1; transform: scale(1); }
.ms-window__title b { color: #fff; font-weight: 600; }
.ms-window__live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; font: 700 0.66rem/1 var(--font); letter-spacing: 0.14em; color: #c9ffe6; background: rgba(61, 255, 168, 0.12); border: 1px solid rgba(61, 255, 168, 0.35); }
.ms-window__live .ms-pulse { width: 6px; height: 6px; }
.ms-window__scan { position: absolute; left: 0; right: 0; height: 30%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(89, 220, 255, 0.12) 85%, rgba(160, 235, 255, 0.5)); animation: ms-winscan 4.5s linear infinite; mix-blend-mode: screen; }
@keyframes ms-winscan { from { top: -30%; } to { top: 100%; } }
.ms-window__progress { display: block; height: 3px; margin: 8px 4px 0; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ms-window__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--electric), var(--violet), var(--orange)); box-shadow: 0 0 10px var(--electric); }
.ms-hero__floats { pointer-events: none; }
.ms-hero__floats li { pointer-events: none; }
button.ms-float { pointer-events: auto; cursor: pointer; color: #fff; font-family: var(--display); transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.3s var(--ease); }
button.ms-float:hover { background: rgba(30, 40, 100, 0.8); }
button.ms-float.is-on { border-color: rgba(89, 220, 255, 0.8); background: linear-gradient(120deg, rgba(59, 116, 255, 0.55), rgba(139, 92, 255, 0.45)); box-shadow: 0 0 0 4px rgba(89, 220, 255, 0.15), 0 18px 40px -14px rgba(59, 116, 255, 0.9); }
button.ms-float.is-on .ms-icon { color: #fff; }

/* Rotating headline word */
.ms-rotator { display: inline-grid; vertical-align: bottom; }
.ms-rotator > span { grid-area: 1 / 1; white-space: nowrap; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; filter: blur(10px); transform: translateY(0.35em); transition: opacity 0.6s var(--ease), filter 0.6s var(--ease), transform 0.6s var(--ease); padding-bottom: 0.08em; }
.ms-rotator > span.is-on { opacity: 1; filter: none; transform: none; }

/* Buttons: light sweep on hover */
.ms-btn { position: relative; overflow: hidden; isolation: isolate; }
.ms-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); transition: left 0.7s var(--ease); }
.ms-btn:hover::after { left: 120%; }
.ms-btn--primary, .ms-btn--orange { z-index: 0; }

/* Scroll progress: a line of current along the top */
.ms-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; pointer-events: none; }
.ms-progress span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--orange), var(--violet), var(--electric)); box-shadow: 0 0 12px rgba(89, 220, 255, 0.9); }

/* Soft spotlight that follows the pointer */
.ms-spot-cursor { position: fixed; z-index: -1; top: 0; left: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(89, 140, 255, 0.16), rgba(139, 92, 255, 0.07) 40%, transparent 70%); transform: translate(var(--cx, -999px), var(--cy, -999px)); transition: opacity 0.4s; }
@media (hover: none) { .ms-spot-cursor { display: none; } }

/* Sidebar: a glass pill that glides to the hovered item */
.ms-side__nav ul { position: relative; }
.ms-side__glider { position: absolute; left: 0; right: 0; top: 0; height: 44px; border-radius: 13px; pointer-events: none; opacity: 0; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); transition: transform 0.35s var(--ease), opacity 0.25s; }
.ms-side__link:hover { background: transparent; }
.ms-side__link { z-index: 1; }

/* Section labels draw their line in */
.js [data-reveal] .ms-label::before, .js .ms-head[data-reveal] .ms-label::before { width: 0; transition: width 0.8s var(--ease) 0.3s; }
.js [data-reveal].is-in .ms-label::before { width: 22px; }

/* Practice cards: depth on hover */
.ms-practice { transform-style: preserve-3d; }
.ms-practice:hover .ms-practice__top .ms-ico { transform: translateZ(30px) scale(1.08); box-shadow: 0 16px 34px -8px rgba(59, 116, 255, 1); }
.ms-practice__top .ms-ico { transition: transform 0.5s var(--ease), box-shadow 0.5s; }
.ms-practice__num { font-size: 1.6rem; font-weight: 800; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35); margin-top: 22px; }

/* Stat cards: a charge bar along the bottom */
.ms-stat { position: relative; overflow: hidden; }
.ms-stat::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--orange), var(--violet), var(--electric)); animation: ms-charge 1.6s var(--ease) 0.8s forwards; }
.ms-stat:nth-child(2)::after { animation-delay: 1s; }
.ms-stat:nth-child(3)::after { animation-delay: 1.2s; }
.ms-stat:nth-child(4)::after { animation-delay: 1.4s; }
@keyframes ms-charge { to { transform: scaleX(1); } }

/* Footer: giant wordmark in logo colours */
.ms-footer__giant { margin: 26px 0 -0.18em; text-align: center; font: 800 clamp(4rem, 15vw, 13rem)/0.9 var(--display); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(120, 160, 255, 0.35); background: linear-gradient(90deg, rgba(43, 140, 232, 0.25), rgba(139, 92, 255, 0.25), rgba(255, 122, 47, 0.2)); -webkit-background-clip: text; background-clip: text; user-select: none; }

@media (max-width: 1024px) {
	.ms-hero__bg--tech { width: 100%; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 70%); mask-image: linear-gradient(180deg, #000 30%, transparent 70%); }
	.ms-hero__bg--power { width: 100%; top: 40%; height: 60%; -webkit-mask-image: linear-gradient(0deg, #000 40%, transparent 90%); mask-image: linear-gradient(0deg, #000 40%, transparent 90%); }
	.ms-hero__seam { display: none; }
	.ms-hero__backdrop--page .ms-hero__bg { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ms-hero__bg, .ms-hero__seam::after, .ms-window__scan, .ms-skel { animation: none !important; }
	.ms-rotator > span { transition: none; }
}

/* Stop the shimmer once the photo has arrived */
.is-loaded { animation: none !important; }

/* Fixes: rotator paints one word at a time; calmer backdrop behind the headline */
.ms-hero__title em.ms-rotator { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
.ms-hero__bg { opacity: 0.24; }
.ms-hero__backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 7, 26, 0.55) 0%, rgba(5, 7, 26, 0.3) 45%, rgba(5, 7, 26, 0) 70%); }
.ms-hero__backdrop--page .ms-hero__bg { opacity: 0.22; }
/* Keep wide decorative layers from widening the page */
.ms-shell { overflow-x: clip; }
.ms-footer { overflow: hidden; }
.ms-window__title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1024px) { .ms-hero__backdrop { left: -20px; right: -20px; } }

/* ==========================================================================
   More: solution finder, FAQ, intro, page transitions, magnetic buttons
   ========================================================================== */

/* Solution finder */
.ms-finder { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(22px, 3.5vw, 48px); padding: clamp(24px, 4vw, 52px); overflow: hidden; }
.ms-finder::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 122, 47, 0.22), transparent 65%); }
.ms-finder__intro { display: flex; flex-direction: column; gap: 14px; }
.ms-finder__steps { display: grid; gap: 22px; }
.ms-finder__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.ms-finder__step legend { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 700 1rem/1.2 var(--display); }
.ms-finder__step legend span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 0.8rem; background: var(--grad-btn); }
.ms-finder__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-pick { position: relative; cursor: pointer; }
.ms-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ms-pick > span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; font-size: 0.88rem; font-weight: 500; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--edge); transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s; }
.ms-pick > span .ms-icon { width: 16px; height: 16px; color: var(--electric); }
.ms-pick:hover > span { background: rgba(255, 255, 255, 0.1); }
.ms-pick input:checked + span { background: var(--grad-btn); border-color: transparent; box-shadow: 0 8px 22px -10px rgba(80, 100, 255, 1); transform: translateY(-1px); }
.ms-pick input:checked + span .ms-icon { color: #fff; }
.ms-pick--need input:checked + span { background: linear-gradient(120deg, #ff7a2f, #ff4f6d); box-shadow: 0 8px 22px -10px rgba(255, 110, 60, 1); }
.ms-pick input:focus-visible + span { outline: 2px solid var(--electric); outline-offset: 2px; }
.ms-finder__result { grid-column: 1 / -1; display: grid; gap: 14px; padding: 20px; border-radius: 22px; background: rgba(5, 8, 30, 0.45); border: 1px dashed var(--edge-strong); min-height: 96px; align-content: start; }
.ms-finder__empty { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.ms-finder__empty .ms-icon { width: 20px; height: 20px; color: var(--orange-2); }
.ms-finder__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.ms-finder__card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: linear-gradient(140deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)); border: 1px solid var(--edge-strong); animation: ms-pop 0.5s var(--ease); }
.ms-finder__card[hidden] { display: none; }
.ms-finder__card strong { display: block; font-family: var(--display); font-size: 0.98rem; }
.ms-finder__card small { display: block; color: var(--muted); font-size: 0.84rem; line-height: 1.4; }
.ms-finder__card a { margin-left: auto; width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--edge-strong); transition: background 0.25s, transform 0.25s var(--ease); }
.ms-finder__card a:hover { background: rgba(255, 255, 255, 0.12); transform: translateX(3px); }
.ms-finder__card a .ms-icon { width: 17px; height: 17px; }
.ms-finder__result .ms-btn { justify-self: start; }
.ms-finder__result .ms-btn[hidden] { display: none; }
@keyframes ms-pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } }

/* FAQ */
.ms-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.ms-faq__head { position: sticky; top: 30px; }
.ms-faq__list { display: grid; gap: 10px; }
.ms-faq__item { border-radius: 18px; padding: 0; overflow: hidden; }
.ms-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font: 600 1.02rem/1.35 var(--display); }
.ms-faq__item summary::-webkit-details-marker { display: none; }
.ms-faq__item summary i { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--edge-strong); transition: transform 0.4s var(--ease), background 0.3s; }
.ms-faq__item summary i::before, .ms-faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; border-radius: 2px; background: #fff; }
.ms-faq__item summary i::after { transform: rotate(90deg); transition: transform 0.4s var(--ease); }
.ms-faq__item[open] summary i { background: var(--grad-btn); border-color: transparent; transform: rotate(180deg); }
.ms-faq__item[open] summary i::after { transform: rotate(0deg); }
.ms-faq__item p { padding: 0 22px 20px; animation: ms-fade 0.4s var(--ease); }
.ms-faq__item[open] { border-color: rgba(120, 160, 255, 0.45); }

/* Intro: the logo badge charges up once per visit */
.ms-intro { display: none; }
.ms-intro-on .ms-intro {
	position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
	background: radial-gradient(800px 500px at 50% 45%, #1d1670 0%, #05061a 70%);
	animation: ms-intro-out 0.7s var(--ease) 1.6s forwards;
}
.ms-intro__badge { display: flex; align-items: center; gap: 14px; padding: 16px 26px 16px 18px; border-radius: 22px; background: linear-gradient(180deg, #fff, #eef4ff); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 30px 80px -20px rgba(59, 116, 255, 0.9); animation: ms-intro-in 0.8s var(--ease) both; }
.ms-intro__badge img { object-fit: contain; }
.ms-intro__badge .ms-wm { font-size: 2.2rem; max-width: none; }
.ms-intro__bar { width: min(260px, 60vw); height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ms-intro__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--violet), var(--electric)); box-shadow: 0 0 14px var(--electric); animation: ms-intro-bar 1.3s var(--ease) 0.25s forwards; }
.ms-intro__tag { font: 600 0.9rem/1 var(--display); letter-spacing: 0.04em; color: var(--muted); animation: ms-fade 0.8s var(--ease) 0.5s both; }
@keyframes ms-intro-in { from { opacity: 0; transform: scale(0.85) translateY(10px); filter: blur(8px); } }
@keyframes ms-intro-bar { to { width: 100%; } }
@keyframes ms-intro-out { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }

/* Smooth cross-page transitions (supported browsers); the sidebar stays put */
@view-transition { navigation: auto; }
.ms-side { view-transition-name: ms-side; }
.ms-topbar { view-transition-name: ms-topbar; }
::view-transition-old(root) { animation: ms-vt-out 0.35s var(--ease) both; }
::view-transition-new(root) { animation: ms-vt-in 0.5s var(--ease) both; }
@keyframes ms-vt-out { to { opacity: 0; transform: translateY(-12px); filter: blur(4px); } }
@keyframes ms-vt-in { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } }

/* Magnetic buttons (JS sets --bx/--by) */
.ms-btn--primary, .ms-btn--orange { translate: var(--bx, 0px) var(--by, 0px); transition: transform 0.25s var(--ease), box-shadow 0.25s, translate 0.3s var(--ease); }

/* Practice cards: tilt keeps the lift */
.ms-practice[data-tilt] { transition: transform 0.5s var(--ease), border-color 0.3s; }

@media (max-width: 1024px) {
	.ms-finder, .ms-faq { grid-template-columns: minmax(0, 1fr); }
	.ms-faq__head { position: static; }
}
@media (prefers-reduced-motion: reduce) {
	.ms-intro-on .ms-intro { display: none; }
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ==========================================================================
   Living background: aurora, depth, blueprint grid, section moods
   ========================================================================== */
@property --au1 { syntax: "<color>"; inherits: true; initial-value: #3b74ff; }
@property --au2 { syntax: "<color>"; inherits: true; initial-value: #8b5cff; }
@property --au3 { syntax: "<color>"; inherits: true; initial-value: #ff7a2f; }
:root { --au1: #3b74ff; --au2: #8b5cff; --au3: #ff7a2f; transition: --au1 1.6s ease, --au2 1.6s ease, --au3 1.6s ease; }
:root[data-mood="power"] { --au1: #ff7a2f; --au2: #ffb547; --au3: #8b5cff; }
:root[data-mood="cyber"] { --au1: #19e0d0; --au2: #3b74ff; --au3: #59dcff; }

/* Glossy waves drift with scroll and lean towards the pointer */
.ms-bg__wave--violet { translate: calc(var(--mxp, 0) * -40px) calc(var(--sy, 0) * -0.05px); }
.ms-bg__wave--blue { translate: calc(var(--mxp, 0) * 30px) calc(var(--sy, 0) * -0.12px); }
.ms-bg__wave--deep { translate: calc(var(--mxp, 0) * 55px) calc(var(--sy, 0) * -0.2px); }

/* Aurora ribbons */
.ms-bg__aurora { position: absolute; inset: -10%; pointer-events: none; mix-blend-mode: screen; opacity: 0.7; }
.ms-bg__aurora span { position: absolute; border-radius: 50%; filter: blur(70px); }
.ms-bg__aurora span:nth-child(1) { width: 60vmax; height: 18vmax; left: 10%; top: 20%; background: linear-gradient(90deg, transparent, var(--au1), transparent); transform: rotate(-18deg); animation: ms-aurora-a 22s ease-in-out infinite alternate; }
.ms-bg__aurora span:nth-child(2) { width: 50vmax; height: 14vmax; right: -5%; top: 45%; background: linear-gradient(90deg, transparent, var(--au2), transparent); transform: rotate(14deg); animation: ms-aurora-b 26s ease-in-out infinite alternate; opacity: 0.8; }
.ms-bg__aurora span:nth-child(3) { width: 34vmax; height: 10vmax; left: 30%; bottom: 5%; background: linear-gradient(90deg, transparent, var(--au3), transparent); transform: rotate(-8deg); animation: ms-aurora-c 30s ease-in-out infinite alternate; opacity: 0.45; }
@keyframes ms-aurora-a { to { transform: rotate(-6deg) translate(12vmax, 6vmax) scaleX(1.25); } }
@keyframes ms-aurora-b { to { transform: rotate(26deg) translate(-14vmax, -4vmax) scaleX(0.8); } }
@keyframes ms-aurora-c { to { transform: rotate(-20deg) translate(10vmax, -8vmax) scaleX(1.3); } }

/* Blueprint grid revealed around the pointer like a torch */
.ms-bg__grid {
	position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
	background-image: linear-gradient(rgba(140, 180, 255, 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 180, 255, 0.22) 1px, transparent 1px), radial-gradient(circle, rgba(170, 220, 255, 0.55) 1.2px, transparent 1.6px);
	background-size: 44px 44px, 44px 44px, 44px 44px; background-position: -1px -1px, -1px -1px, -22px -22px;
	-webkit-mask-image: radial-gradient(260px circle at var(--px, -999px) var(--py, -999px), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
	mask-image: radial-gradient(260px circle at var(--px, -999px) var(--py, -999px), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
}
@media (hover: none) { .ms-bg__grid { display: none; } }

/* Make sure the stacking order is: waves, aurora, grid, veil, current */
.ms-bg__veil { z-index: 1; }
.ms-bg__current { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
	.ms-bg__aurora span { animation: none; }
	.ms-bg__wave { translate: none !important; }
}

/* Moods also re-colour the glossy waves */
.ms-bg__wave { transition: filter 1.6s ease; }
:root[data-mood="cyber"] .ms-bg__wave { filter: hue-rotate(-48deg) saturate(1.15); }
:root[data-mood="power"] .ms-bg__wave--violet { filter: hue-rotate(78deg) saturate(1.2) brightness(1.05); }
:root[data-mood="power"] .ms-bg__wave--deep { filter: hue-rotate(-30deg); }
/* ==========================================================================
   Cinematic scenes: tinted video (or still) behind every page
   ========================================================================== */
.ms-bg__wave { display: none; }
.ms-bg { background: #04050f; }
.ms-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ms-scene__layer {
	position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; opacity: 0;
	filter: grayscale(1) contrast(1.2) brightness(0.62);
	transition: opacity 1.6s ease;
	animation: ms-scene-zoom 46s ease-in-out infinite alternate;
	translate: calc(var(--mxp, 0) * -24px) calc(var(--sy, 0) * -0.03px);
}
.ms-scene__layer.is-on { opacity: 1; }
@keyframes ms-scene-zoom { from { transform: scale(1); } to { transform: scale(1.12) rotate(0.6deg); } }

/* Brand duotone: the footage takes the page's mood colours */
.ms-scene__tint { position: absolute; inset: 0; background: linear-gradient(125deg, var(--au1) 0%, var(--au2) 55%, var(--au3) 115%); mix-blend-mode: color; opacity: 0.9; }
.ms-scene__tint::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 5, 18, 0.25) 0%, rgba(4, 5, 18, 0.55) 60%, rgba(4, 5, 18, 0.8) 100%); mix-blend-mode: normal; }

/* Fine scan lines with a slow sweep */
.ms-scene__lines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px); }
.ms-scene__lines::after { content: ""; position: absolute; left: 0; right: 0; height: 22vh; background: linear-gradient(180deg, transparent, rgba(120, 200, 255, 0.07), transparent); animation: ms-sweep 9s linear infinite; }
@keyframes ms-sweep { from { top: -25vh; } to { top: 105vh; } }

/* Film grain */
.ms-scene__grain {
	position: absolute; inset: -50%; opacity: 0.09; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: ms-grain 0.9s steps(4) infinite;
}
@keyframes ms-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, 3%); } 100% { transform: translate(3%, -1%); } }

/* Vignette keeps the edges and text areas calm */
.ms-scene__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at 60% 45%, transparent 35%, rgba(3, 4, 14, 0.75) 100%); }

/* Layer order on top of the scene */
.ms-bg__aurora { z-index: 1; opacity: 0.4; }
.ms-bg__grid { z-index: 1; }
.ms-bg__veil { z-index: 2; background: linear-gradient(100deg, rgba(4, 5, 15, 0.62) 0%, rgba(4, 5, 15, 0.3) 50%, rgba(4, 5, 15, 0.12) 100%); }
.ms-bg__current { z-index: 3; opacity: 0.75; }

@media (max-width: 1024px) {
	.ms-scene__layer { filter: grayscale(1) contrast(1.15) brightness(0.5); }
	.ms-scene__grain { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ms-scene__layer, .ms-scene__grain, .ms-scene__lines::after { animation: none; }
}

/* The page scene is now the backdrop: retire inner hero photos, soften the home one */
.ms-hero__backdrop--page { display: none; }
.ms-hero .ms-hero__bg { opacity: 0.12; }

/* Rotating word: keyframe-driven so it always settles fully visible */
.ms-rotator > span { transition: none; opacity: 0; filter: none; transform: none; }
.ms-rotator > span.is-on { opacity: 1; animation: ms-word-in 0.7s var(--ease) both; }
.ms-rotator > span.is-out { animation: ms-word-out 0.5s var(--ease) both; }
@keyframes ms-word-in { from { opacity: 0; filter: blur(10px); transform: translateY(0.35em); } to { opacity: 1; filter: none; transform: none; } }
@keyframes ms-word-out { from { opacity: 1; } to { opacity: 0; filter: blur(8px); transform: translateY(-0.3em); } }
/* Background photos: gentle drift, no heavy zoom */
.ms-scene__layer { inset: -2%; width: 104%; height: 104%; }
@keyframes ms-scene-zoom { from { transform: scale(1); } to { transform: scale(1.04); } }

/* Insights: real site photos (shown near their true size so they stay sharp) */
.ms-field__item { padding: 8px; border-radius: 20px; display: flex; flex-direction: column; gap: 8px; }
.ms-field__item button { display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: #0d1238; aspect-ratio: 1; }
.ms-field__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.ms-field__item:hover img { transform: scale(1.04); }
.ms-field__item span { padding: 0 6px 4px; font: 600 0.88rem/1.3 var(--display); }

/* Insights: products on white tiles, never stretched */
.ms-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.ms-product { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 16px; border-radius: 20px; text-align: center; }
.ms-product__img { display: grid; place-items: center; height: 140px; border-radius: 14px; background: #fff; padding: 10px; }
.ms-product__img img { max-width: 100%; max-height: 120px; width: auto; height: auto; object-fit: contain; }
.ms-product strong { font: 600 0.9rem/1.3 var(--display); }

/* Enhanced site photos are larger now: bigger tiles */
.ms-field__item button { aspect-ratio: 4 / 3.4; }


/* ==========================================================================
   Company brand reel
   ========================================================================== */
.ms-creel .ms-window__media { cursor: pointer; }
.ms-cslide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease); overflow: hidden; }
.ms-cslide.is-on { opacity: 1; }
.ms-cslide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.ms-cslide.is-on .ms-cslide__bg { animation: ms-cslide-kb 5.5s linear both; }
@keyframes ms-cslide-kb { from { transform: scale(1.14) translate(1.5%, 1%); } to { transform: scale(1.02) translate(0, 0); } }
.ms-cslide__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 8, 30, 0.15) 0%, rgba(6, 8, 30, 0.75) 100%), linear-gradient(120deg, rgba(59, 116, 255, 0.25), rgba(139, 92, 255, 0.2)); }
.ms-cslide--brand .ms-cslide__shade, .ms-cslide--statement .ms-cslide__shade, .ms-cslide--practices .ms-cslide__shade, .ms-cslide--zambia .ms-cslide__shade { background: radial-gradient(circle at 50% 50%, rgba(10, 14, 50, 0.55), rgba(5, 7, 26, 0.88) 75%); }
.ms-cslide__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.ms-cslide__caption { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: rgba(8, 10, 40, 0.62); border: 1px solid var(--edge-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ms-cslide__caption strong { font: 700 1.05rem/1.25 var(--display); }
.ms-cslide__kicker { font: 600 0.7rem/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase; color: var(--electric); }
.ms-cslide__motto { font: 600 0.82rem/1.3 var(--display); letter-spacing: 0.08em; color: #dfe6ff; }
.ms-cslide__big { font: 800 clamp(1.9rem, 3.4vw, 2.8rem)/1.05 var(--display); letter-spacing: -0.04em; }
.ms-cslide__big em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-cslide__logo { padding: 12px 20px 12px 14px; }
.ms-cslide__logo .ms-wm { font-size: 1.9rem; max-width: none; }
.ms-cslide__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(100%, 360px); }
.ms-cslide__grid span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--edge-strong); }
.ms-cslide__grid .ms-icon { width: 24px; height: 24px; color: var(--electric); }
.ms-cslide__grid small { font: 600 0.72rem/1.2 var(--display); color: #e5eaff; }
.ms-cslide__flag { display: flex; width: 120px; height: 8px; border-radius: 8px; overflow: hidden; background: #198a00; }
.ms-cslide__flag i { flex: 1; transform-origin: left; }
.ms-cslide__flag i:nth-child(1) { background: #de2010; }
.ms-cslide__flag i:nth-child(2) { background: #000; }
.ms-cslide__flag i:nth-child(3) { background: #ef7d00; }

/* Entrances replay every time a scene comes round */
.ms-cslide.is-on .ms-cslide__logo { animation: ms-pop-in 0.9s var(--ease) 0.2s both; }
.ms-cslide.is-on .ms-cslide__motto { animation: ms-up-in 0.8s var(--ease) 0.7s both; }
.ms-cslide.is-on .ms-cslide__caption { animation: ms-up-in 0.8s var(--ease) 0.35s both; }
.ms-cslide.is-on .ms-cslide__big { animation: ms-blur-in 0.9s var(--ease) 0.25s both; }
.ms-cslide.is-on .ms-cslide__kicker { animation: ms-up-in 0.7s var(--ease) 0.15s both; }
.ms-cslide.is-on .ms-cslide__grid span { animation: ms-pop-in 0.6s var(--ease) both; }
.ms-cslide.is-on .ms-cslide__grid span:nth-child(2) { animation-delay: 0.12s; }
.ms-cslide.is-on .ms-cslide__grid span:nth-child(3) { animation-delay: 0.24s; }
.ms-cslide.is-on .ms-cslide__grid span:nth-child(4) { animation-delay: 0.36s; }
.ms-cslide.is-on .ms-cslide__grid span:nth-child(5) { animation-delay: 0.48s; }
.ms-cslide.is-on .ms-cslide__grid span:nth-child(6) { animation-delay: 0.6s; }
.ms-cslide.is-on .ms-cslide__flag i { animation: ms-flag-in 0.7s var(--ease) both; }
.ms-cslide.is-on .ms-cslide__flag i:nth-child(2) { animation-delay: 0.15s; }
.ms-cslide.is-on .ms-cslide__flag i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ms-pop-in { from { opacity: 0; transform: scale(0.8) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ms-up-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ms-blur-in { from { opacity: 0; filter: blur(12px); transform: scale(1.06); } to { opacity: 1; filter: none; transform: none; } }
@keyframes ms-flag-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .ms-cslide * { animation: none !important; } }

/* Reel fixes: keep captions clear of the floating photos, fit the Zambian statement */
.ms-cslide__caption { left: 36%; right: 16px; bottom: 16px; }
.ms-cslide--zambia .ms-cslide__big { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
@media (max-width: 720px) {
	.ms-cslide__caption { left: 12px; right: 12px; bottom: auto; top: 12px; }
	.ms-cslide__big { font-size: 1.6rem; }
	.ms-cslide__logo .ms-wm { font-size: 1.4rem; }
	.ms-cslide__grid small { font-size: 0.62rem; }
}
/* ==========================================================================
   Insights: 3D photo ring, product orbit, detail panel
   ========================================================================== */
.ms-ring { --r: 380px; --w: 230px; --h: 270px; position: relative; height: 470px; perspective: 1700px; perspective-origin: 50% 35%; cursor: grab; user-select: none; touch-action: pan-y; }
.ms-ring.is-drag { cursor: grabbing; }
.ms-ring__stage { position: absolute; left: 50%; top: 46%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-6deg) rotateY(var(--ry, 0deg)); }
.ms-ring__item { position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2); width: var(--w); height: var(--h); padding: 6px; border-radius: 22px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.3); background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05)); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(89, 220, 255, 0.15); transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r)); backface-visibility: hidden; transition: box-shadow 0.4s, border-color 0.4s; }
.ms-ring__item img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; pointer-events: none; }
.ms-ring__item:hover, .ms-ring__item:focus-visible { border-color: var(--electric); box-shadow: 0 0 0 3px rgba(89, 220, 255, 0.35), 0 30px 70px -20px rgba(59, 116, 255, 0.9); }
.ms-ring__floor { position: absolute; left: 50%; bottom: 0; width: min(900px, 90%); height: 90px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(89, 140, 255, 0.35), transparent 70%); filter: blur(8px); pointer-events: none; }

.ms-orbit { --R: 230px; position: relative; width: min(100%, 620px); aspect-ratio: 1; margin: 10px auto 0; }
.ms-orbit__ring { position: absolute; inset: calc(50% - var(--R)); border-radius: 50%; border: 1px dashed rgba(140, 180, 255, 0.35); box-shadow: inset 0 0 60px rgba(59, 116, 255, 0.15); animation: ms-spin 120s linear infinite; }
.ms-orbit__ring--inner { inset: calc(50% - var(--R) * 0.55); border-style: solid; border-color: rgba(255, 122, 47, 0.25); animation-direction: reverse; animation-duration: 80s; }
.ms-orbit__hub { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; transform: translate(-50%, -50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; background: radial-gradient(circle, rgba(59, 116, 255, 0.35), rgba(14, 18, 50, 0.85) 70%); border: 1px solid var(--edge-strong); box-shadow: 0 0 60px rgba(59, 116, 255, 0.45), inset 0 0 30px rgba(139, 92, 255, 0.35); animation: ms-core 4s ease-in-out infinite; }
.ms-orbit__hub strong { font: 700 1.1rem/1.2 var(--display); }
.ms-orbit__hub small { color: var(--muted); font-size: 0.74rem; padding: 0 16px; }
.ms-orbit__track { position: absolute; inset: 0; animation: ms-spin 70s linear infinite; }
.ms-orbit:hover .ms-orbit__track, .ms-orbit:hover .ms-orbit__item > span, .ms-orbit.is-paused .ms-orbit__track, .ms-orbit.is-paused .ms-orbit__item > span { animation-play-state: paused; }
.ms-orbit__item { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(calc(var(--i) * 360deg / var(--n))) translate(var(--R)) rotate(calc(var(--i) * -360deg / var(--n))); }
.ms-orbit__item > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; padding: 12px; background: #fff; border: 3px solid rgba(255, 255, 255, 0.9); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.8), 0 0 0 6px rgba(89, 140, 255, 0.18); animation: ms-spin 70s linear infinite reverse; transition: box-shadow 0.3s, transform 0.3s var(--ease); }
.ms-orbit__item img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.ms-orbit__item:hover > span, .ms-orbit__item:focus-visible > span { box-shadow: 0 0 0 4px var(--electric), 0 18px 40px -10px rgba(59, 116, 255, 0.9); }

.ms-detail { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; background: rgba(3, 4, 14, 0.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: ms-fade 0.35s var(--ease); }
.ms-detail[hidden] { display: none; }
.ms-detail__card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 0; width: min(920px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 26px; animation: ms-pop-in 0.45s var(--ease); }
.ms-detail__media { margin: 0; padding: 10px; }
.ms-detail__media img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; border-radius: 18px; }
.ms-detail.is-light .ms-detail__media img { object-fit: contain; background: #fff; padding: 24px; }
.ms-detail__body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 30px 30px 30px 20px; }
.ms-detail__body .ms-btn { align-self: flex-start; margin-top: 6px; }
.ms-detail__close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; border: 1px solid var(--edge-strong); background: rgba(14, 18, 48, 0.75); }
.ms-detail__close .ms-icon { width: 18px; height: 18px; }

@media (max-width: 720px) {
	.ms-ring { --r: 210px; --w: 150px; --h: 180px; height: 340px; }
	.ms-orbit { --R: 130px; }
	.ms-orbit__item { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
	.ms-orbit__item > span { padding: 7px; }
	.ms-orbit__hub { width: 120px; height: 120px; }
	.ms-orbit__hub small { display: none; }
	.ms-detail__card { grid-template-columns: minmax(0, 1fr); }
	.ms-detail__body { padding: 8px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.ms-orbit__track, .ms-orbit__item > span, .ms-orbit__ring { animation: none; }
}

.ms-detail.is-light .ms-detail__media img { height: auto; max-height: 420px; box-sizing: border-box; }
.ms-detail__card { overflow-x: hidden; }
.ms-detail__media img { box-sizing: border-box; }

.ms-orbit__item > span { display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; }
.ms-orbit__item img { width: auto; height: auto; max-width: 78%; max-height: 78%; }

/* Client photos are portrait: soften the full-page background so the enlargement never looks blurry-by-accident */
/* Portrait client photos inside landscape frames: keep heads in view */
.ms-practice__media img, .ms-offer__media img, .ms-sector__photo img, .ms-window__media img, .ms-pfloat img, .ms-cslide__bg, .ms-spot__bg, .ms-band__media img { object-position: 50% 30%; }

/* 12 photos in the ring: wider circle, portrait cards */
.ms-ring { --r: 520px; --w: 200px; --h: 270px; height: 480px; perspective: 2000px; }
@media (max-width: 720px) { .ms-ring { --r: 300px; --w: 130px; --h: 180px; height: 340px; } }

/* Logo links */
a.ms-logo-chip { text-decoration: none; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
a.ms-logo-chip:hover, a.ms-logo-chip:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(89, 220, 255, 0.55), 0 12px 26px -12px rgba(0, 0, 0, 0.6); }
.ms-marquee--chips li a { display: grid; place-items: center; width: 100%; height: 100%; }
.ms-marquee--chips li:has(a):hover { box-shadow: 0 0 0 3px rgba(89, 220, 255, 0.55); }

/* Call-back strip above the footer */
.ms-callback { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: center; padding: 18px 20px; margin-bottom: 18px; border-radius: 22px; scroll-margin-top: 24px; }
.ms-callback__copy { display: flex; align-items: center; gap: 14px; }
.ms-callback__copy strong { display: block; font: 700 1.05rem/1.2 var(--display); }
.ms-callback__copy small { display: block; color: var(--muted); font-size: 0.85rem; }
.ms-callback .ms-field input { min-height: 46px; }
.ms-callback .ms-notice { grid-column: 1 / -1; margin: 0; }
@media (max-width: 1100px) { .ms-callback { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ms-callback__copy, .ms-callback .ms-btn { grid-column: 1 / -1; } }
@media (max-width: 600px) { .ms-callback { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Clarity pass: sharp, true-colour photos; backgrounds clearly mirror their boxes
   ========================================================================== */
.ms-scene__layer { filter: saturate(1.05) contrast(1.06) brightness(0.72); image-rendering: auto; }
.ms-scene__tint { mix-blend-mode: soft-light; opacity: 0.55; }
.ms-scene__tint::after { background: linear-gradient(90deg, rgba(4, 5, 18, 0.72) 0%, rgba(4, 5, 18, 0.45) 45%, rgba(4, 5, 18, 0.25) 100%), linear-gradient(180deg, transparent 60%, rgba(4, 5, 18, 0.7) 100%); }
.ms-scene__grain { opacity: 0.04; }
.ms-scene__lines { opacity: 0.5; }
.ms-bg__veil { background: none; }
@media (max-width: 1024px) { .ms-scene__layer { filter: saturate(1.05) brightness(0.6); } }

/* Photos in boxes and cards: true colours, tint only as a light wash that clears on hover */
.ms-tone::after { opacity: 0.18; mix-blend-mode: soft-light; }
.ms-gallery__btn::after { opacity: 0.15; mix-blend-mode: soft-light; }
.ms-cslide__shade { background: linear-gradient(180deg, rgba(6, 8, 30, 0) 35%, rgba(6, 8, 30, 0.7) 100%); }
.ms-cslide--brand .ms-cslide__shade, .ms-cslide--statement .ms-cslide__shade, .ms-cslide--practices .ms-cslide__shade, .ms-cslide--zambia .ms-cslide__shade { background: radial-gradient(circle at 50% 50%, rgba(10, 14, 50, 0.45), rgba(5, 7, 26, 0.78) 80%); }
.ms-window__media::after { background: linear-gradient(180deg, transparent 70%, rgba(5, 8, 30, 0.35)); }
.ms-spot--power::before { background: linear-gradient(180deg, rgba(8, 10, 40, 0) 0%, rgba(8, 10, 40, 0.55) 45%, rgba(8, 10, 40, 0.92) 78%); }
.ms-spot__bg { opacity: 0.9; }
img { image-rendering: auto; }

/* ==========================================================================
   Forms: clear labels, grouped steps
   ========================================================================== */
.ms-form { gap: 22px; }
.ms-form__step { display: grid; gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ms-form__step > legend, .ms-form__steptitle { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 0; font: 700 1rem/1.2 var(--display); color: #fff; }
.ms-form__step > legend span, .ms-form__steptitle span { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 0.8rem; background: var(--grad-btn); }
.ms-field > span { margin-bottom: 0; font-size: 0.85rem; letter-spacing: 0.01em; }
.ms-field small { color: var(--dim); font-size: 0.78rem; }
.ms-choice__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.ms-choice__list label { display: block; }
.ms-choice__list span { display: flex; align-items: center; min-height: 46px; width: 100%; padding: 10px 14px; border-radius: 14px; line-height: 1.25; }
.ms-form__hint { margin: -6px 0 0; color: var(--muted); font-size: 0.86rem; }

/* Call-back strip */
.ms-callback { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.4fr); gap: 18px 28px; padding: 22px 26px; }
.ms-callback__copy { align-items: flex-start; }
.ms-callback__copy strong { font-size: 1.15rem; }
.ms-callback__copy small { margin-top: 4px; line-height: 1.45; }
.ms-callback__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: end; }
.ms-callback__fields .ms-btn { min-height: 50px; }
.ms-callback .ms-field > span:not(.screen-reader-text) { font-size: 0.8rem; color: #d6dcf7; }
@media (max-width: 1280px) { .ms-callback { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .ms-callback__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ms-callback__fields .ms-btn, .ms-callback__fields .ms-field--wide { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ms-callback__fields { grid-template-columns: minmax(0, 1fr); } }

/* Balance: sharp, recognisable background, but calm behind the text column */
.ms-scene__layer { filter: saturate(1.05) contrast(1.05) brightness(0.6); }
.ms-scene__tint::after { background: linear-gradient(90deg, rgba(4, 5, 18, 0.86) 0%, rgba(4, 5, 18, 0.7) 38%, rgba(4, 5, 18, 0.32) 68%, rgba(4, 5, 18, 0.22) 100%), linear-gradient(180deg, transparent 55%, rgba(4, 5, 18, 0.75) 100%); }
@media (max-width: 1024px) { .ms-scene__tint::after { background: rgba(4, 5, 18, 0.72); } }
/* ==========================================================================
   Background = the box's photo, twice: a soft ambient fill + the whole photo, framed
   ========================================================================== */
.ms-scene__layer { filter: blur(18px) saturate(1.1) brightness(0.45); transform: scale(1.08); }
.ms-scene__tint::after { background: linear-gradient(90deg, rgba(4, 5, 18, 0.82) 0%, rgba(4, 5, 18, 0.55) 40%, rgba(4, 5, 18, 0.2) 100%), linear-gradient(180deg, transparent 60%, rgba(4, 5, 18, 0.7) 100%); }
.ms-scene__frame {
	position: absolute; z-index: 1; margin: 0; right: 3vw; top: 7vh; height: 86vh; width: 44vw; display: grid; place-items: center end;
	opacity: 0; transform: rotate(-3deg) translateX(30px) scale(0.98); transition: opacity 1.4s ease, transform 1.6s var(--ease); pointer-events: none;
}
.ms-scene__frame.is-on { opacity: 0.62; transform: rotate(-3deg) translateX(0) scale(1); }
.ms-scene__frame img {
	max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 26px;
	border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.9), 0 0 0 10px rgba(255, 255, 255, 0.04);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
	animation: ms-frame-drift 30s ease-in-out infinite alternate;
}
@keyframes ms-frame-drift { from { transform: translateY(-1.5%); } to { transform: translateY(1.5%); } }
/* Second frame copy sits behind as an "echo" for depth */
.ms-scene__frame.is-on::before { content: ""; position: absolute; inset: 6% -2% 6% 30%; border-radius: 30px; border: 1px dashed rgba(140, 180, 255, 0.35); transform: rotate(5deg); }
.ms-scene__tint { z-index: 0; }
.ms-scene__lines, .ms-scene__grain, .ms-scene__vignette { z-index: 2; }
@media (max-width: 1024px) {
	.ms-scene__frame { right: -10vw; width: 90vw; top: 4vh; height: 60vh; }
	.ms-scene__frame.is-on { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) { .ms-scene__frame img { animation: none; } }

/* Fourth hero chip (Lusaka HQ) */
.ms-float--d { top: -18px; right: 14%; animation-delay: -1s; }
.ms-float--d .ms-icon { color: var(--orange-2); }

/* Power & Solar: frame sits left so the engineer's face shows beside the box */
@media (min-width: 1025px) {
	.page-template-templatespower-php .ms-scene__frame { right: auto; left: 34vw; width: 40vw; place-items: center start; transform: rotate(3deg) translateX(-30px) scale(0.98); }
	.page-template-templatespower-php .ms-scene__frame.is-on { opacity: 0.7; transform: rotate(3deg) translateX(0) scale(1); }
	.page-template-templatespower-php .ms-scene__frame img { -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%); mask-image: linear-gradient(90deg, #000 70%, transparent 100%); }
	.page-template-templatespower-php .ms-scene__frame.is-on::before { inset: 6% 30% 6% -2%; transform: rotate(-5deg); }
}@media (min-width: 1025px) {
	.page-template-templatespower-php .ms-scene__frame { left: 40vw; }
	.page-template-templatespower-php .ms-scene__frame.is-on { opacity: 0.55; }
	.page-template-templatespower-php .ms-phero__copy { text-shadow: 0 2px 18px rgba(4, 5, 18, 0.9), 0 0 2px rgba(4, 5, 18, 0.6); }
}
.page-template-templatespower-php .ms-phero__title { text-shadow: none; }
.page-template-templatespower-php .ms-phero__title em { filter: drop-shadow(0 2px 14px rgba(4, 5, 18, 0.85)); }

/* Solution finder: intro across the top, the two lists side by side below */
.ms-finder { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ms-finder__intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "label label" "title lead"; column-gap: clamp(24px, 4vw, 60px); align-items: end; padding-bottom: 22px; border-bottom: 1px solid var(--edge); }
.ms-finder__intro .ms-label { grid-area: label; }
.ms-finder__intro .ms-h2 { grid-area: title; }
.ms-finder__intro .ms-muted { grid-area: lead; font-size: 1.05rem; }
.ms-finder__steps { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 18px; align-items: stretch; }
.ms-finder__step { padding: 20px 22px; border-radius: 22px; background: rgba(5, 8, 30, 0.35); border: 1px solid var(--edge); }
.ms-finder__step:first-child .ms-finder__chips { display: grid; grid-template-columns: minmax(0, 1fr); }
.ms-finder__step:first-child .ms-pick > span { width: 100%; }
.ms-finder__step:last-child .ms-finder__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-finder__step:last-child .ms-pick > span { width: 100%; height: 100%; border-radius: 16px; }
@media (max-width: 1024px) {
	.ms-finder__intro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "title" "lead"; row-gap: 12px; }
	.ms-finder__steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) { .ms-finder__step:last-child .ms-finder__chips { grid-template-columns: minmax(0, 1fr); } }.ms-finder__step legend { float: left; width: 100%; margin-bottom: 14px; }
.ms-finder__step legend + * { clear: both; }
.ms-finder__intro .ms-muted { color: #d9def7; }
/* ==========================================================================
   Cybersecurity page: shield scene echoing the six-pillar wheel
   ========================================================================== */
.ms-cyberbg { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.page-template-templatescybersecurity-php .ms-scene__layer { opacity: 0.35 !important; }
.page-template-templatescybersecurity-php .ms-scene__frame { display: none; }
.ms-cyberbg__hex {
	position: absolute; inset: 0; opacity: 0.32;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%2359dcff' stroke-opacity='.35' stroke-width='1'/%3E%3C/svg%3E");
	background-size: 56px 97px;
	-webkit-mask-image: radial-gradient(60% 70% at 70% 45%, #000 0%, rgba(0,0,0,.4) 50%, transparent 85%); mask-image: radial-gradient(60% 70% at 70% 45%, #000 0%, rgba(0,0,0,.4) 50%, transparent 85%);
	animation: ms-hex-pan 40s linear infinite;
}
@keyframes ms-hex-pan { to { background-position: 56px 97px; } }
.ms-cyberbg__core { position: absolute; left: 70%; top: 46%; width: min(92vmin, 980px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.ms-cyberbg__wheel { position: absolute; inset: 14%; width: 72%; height: 72%; opacity: 0.22; filter: drop-shadow(0 0 40px rgba(25, 224, 208, 0.6)); animation: ms-spin 160s linear infinite; }
.ms-cyberbg__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(25, 224, 208, 0.35); }
.ms-cyberbg__ring--1 { inset: 8%; border-style: dashed; animation: ms-spin 90s linear infinite reverse; }
.ms-cyberbg__ring--2 { inset: 2%; border-color: rgba(89, 220, 255, 0.2); }
.ms-cyberbg__ring--3 { inset: 30%; border-color: rgba(25, 224, 208, 0.5); animation: ms-shield-pulse 4s ease-out infinite; }
@keyframes ms-shield-pulse { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.9); opacity: 0; } }
.ms-cyberbg__radar { position: absolute; inset: 2%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(25, 224, 208, 0.38), rgba(25, 224, 208, 0.08) 40deg, transparent 70deg, transparent 360deg); animation: ms-spin 7s linear infinite; -webkit-mask-image: radial-gradient(circle, transparent 18%, #000 20%); mask-image: radial-gradient(circle, transparent 18%, #000 20%); }
.ms-cyberbg__shield { position: absolute; inset: 8%; border-radius: 50%; box-shadow: inset 0 0 80px rgba(25, 224, 208, 0.25), 0 0 60px rgba(25, 224, 208, 0.15); }
.ms-cyberbg__attacks { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 1024px) { .ms-cyberbg__core { left: 50%; top: 32%; width: 120vmin; } .ms-cyberbg__wheel { opacity: 0.14; } }
@media (prefers-reduced-motion: reduce) { .ms-cyberbg * { animation: none !important; } }

/* ==========================================================================
   Insights: at a glance, guides, journey, photo-wall background
   ========================================================================== */
.ms-glance { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ms-glance__item { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 20px; }
.ms-glance__item .ms-ico { width: 38px; height: 38px; border-radius: 12px; margin-bottom: 6px; }
.ms-glance__item strong { font: 800 1.9rem/1 var(--display); letter-spacing: -0.03em; background: linear-gradient(100deg, #fff, #b9c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-glance__item small { color: var(--muted); font-size: 0.85rem; line-height: 1.35; }
.ms-post__media { position: relative; }
.ms-post__media img { object-position: 50% 35%; }
.ms-post__topic { position: absolute; left: 12px; top: 12px; z-index: 3; padding: 6px 12px; border-radius: 999px; font: 600 0.75rem/1 var(--display); background: rgba(10, 14, 40, 0.75); border: 1px solid var(--edge-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ms-post__body { display: flex; flex-direction: column; flex: 1; }
.ms-post__more { margin-top: auto; padding-top: 14px; }
.ms-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
.ms-timeline::before { content: ""; position: absolute; left: 4%; right: 4%; top: 34px; height: 2px; background: linear-gradient(90deg, var(--orange), var(--violet), var(--electric)); opacity: 0.7; }
.ms-timeline__item { position: relative; padding: 22px; padding-top: 58px; border-radius: 22px; display: flex; flex-direction: column; gap: 8px; }
.ms-timeline__year { position: absolute; top: 18px; left: 22px; padding: 6px 12px; border-radius: 999px; font: 700 0.8rem/1 var(--display); background: var(--grad-btn); box-shadow: 0 8px 20px -8px rgba(80, 100, 255, 0.9); }
.ms-timeline__item--now .ms-timeline__year { background: linear-gradient(120deg, #ff7a2f, #ff4f6d); }
.ms-article__foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--edge); }
.ms-article__media img { width: 100%; max-height: 460px; object-fit: cover; object-position: 50% 35%; border-radius: 18px; }

.ms-wall { position: absolute; inset: -10% -5%; z-index: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; transform: rotate(-8deg) scale(1.1); opacity: 0.38; filter: saturate(0.9); }
.ms-wall__col { display: flex; flex-direction: column; gap: 18px; animation: ms-wall-scroll var(--d, 80s) linear infinite; animation-direction: var(--dir, normal); }
.ms-wall__col img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8); }
@keyframes ms-wall-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.blog .ms-bg__veil, .single-post .ms-bg__veil { background: linear-gradient(100deg, rgba(4, 5, 15, 0.86) 0%, rgba(4, 5, 15, 0.7) 50%, rgba(4, 5, 15, 0.55) 100%); z-index: 1; }
@media (max-width: 1280px) { .ms-glance { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ms-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-timeline::before { display: none; } }
@media (max-width: 720px) { .ms-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-timeline { grid-template-columns: minmax(0, 1fr); } .ms-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ms-wall__col:nth-child(n+4) { display: none; } }
@media (prefers-reduced-motion: reduce) { .ms-wall__col { animation: none; } }

.ms-footer__emails { display: flex; flex-direction: column; gap: 4px; }
.ms-contact__alt { margin-top: 2px; color: var(--muted); }
.ms-contact__alt span { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ==========================================================================
   404
   ========================================================================== */
.ms-404 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 60px); align-items: center; min-height: 82vh; padding: 40px 0 10px; }
.ms-404__dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a4a; box-shadow: 0 0 0 0 rgba(255, 90, 74, 0.6); animation: ms-404-blink 1.4s infinite; }
@keyframes ms-404-blink { 50% { opacity: 0.25; box-shadow: 0 0 0 8px rgba(255, 90, 74, 0); } }
.ms-404__code { display: flex; align-items: center; gap: 0.06em; margin: 18px 0 4px; font: 800 clamp(6rem, 15vw, 12rem)/0.9 var(--display); letter-spacing: -0.06em; }
.ms-404__code > span:not(.ms-404__zero) { background: linear-gradient(100deg, #fff, #b9c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; animation: ms-404-glitch 4s steps(1) infinite; }
.ms-404__code > span:last-child { animation-delay: -1.3s; }
@keyframes ms-404-glitch { 0%, 92%, 100% { transform: none; text-shadow: none; } 93% { transform: translateX(-3px); text-shadow: 3px 0 rgba(255, 90, 74, 0.7); } 95% { transform: translateX(3px); text-shadow: -3px 0 rgba(89, 220, 255, 0.7); } }
.ms-404__zero { display: grid; place-items: center; width: 0.78em; height: 0.78em; border-radius: 50%; border: 0.07em solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 40px rgba(123, 92, 255, 0.6), inset 0 0 30px rgba(89, 220, 255, 0.35); color: var(--orange-2); animation: ms-404-flicker 3s infinite; }
.ms-404__zero svg { width: 46%; height: 46%; filter: drop-shadow(0 0 12px rgba(255, 140, 70, 0.9)); }
@keyframes ms-404-flicker { 0%, 100% { opacity: 1; } 45% { opacity: 1; } 47% { opacity: 0.3; } 49% { opacity: 1; } 51% { opacity: 0.5; } 53% { opacity: 1; } }
.ms-404__title { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.ms-404__title em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-404__visual { padding: 24px; border-radius: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)); border: 1px solid var(--edge-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ms-404__cable { width: 100%; height: auto; overflow: visible; }
.ms-404__wire { fill: none; stroke: url(#ms404g); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(123, 92, 255, 0.6)); }
.ms-404__plug { fill: #e9edf8; stroke: #9aa6d6; stroke-width: 2; }
.ms-404__sparks path { stroke: #ffd29a; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px #ff9a4d); animation: ms-404-spark 1.6s infinite; }
.ms-404__sparks path:nth-child(2) { animation-delay: 0.3s; }
.ms-404__sparks path:nth-child(3) { animation-delay: 0.6s; }
@keyframes ms-404-spark { 0%, 60%, 100% { opacity: 0; } 65%, 80% { opacity: 1; } }
.ms-404__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ms-404__link { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 20px; text-decoration: none; height: 100%; }
.ms-404__link strong { display: block; font-family: var(--display); }
.ms-404__link small { display: block; color: var(--muted); font-size: 0.86rem; }
.ms-404__link > .ms-icon { margin-left: auto; width: 18px; height: 18px; color: var(--muted); flex: none; transition: transform 0.3s var(--ease); }
.ms-404__link:hover > .ms-icon { transform: translateX(4px); color: #fff; }
.ms-404 .ms-btn .ms-icon:first-child { width: 18px; height: 18px; }
@media (max-width: 1024px) { .ms-404 { grid-template-columns: minmax(0, 1fr); min-height: 0; } .ms-404__visual { max-width: 520px; } .ms-404__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ms-404__links { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ms-404 * { animation: none !important; } }

.ms-404__visual { background: radial-gradient(circle at 50% 45%, rgba(40, 30, 110, 0.85), rgba(8, 10, 34, 0.92) 75%); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.error404 .ms-scene__frame.is-on { opacity: 0.4; }

/* ==========================================================================
   Insights: data dashboard
   ========================================================================== */
.ms-dash { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.ms-dash__tile { padding: 22px; border-radius: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; overflow: hidden; }
.ms-dash__label { display: flex; align-items: center; gap: 8px; font: 600 0.78rem/1.2 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--electric); }
.ms-dash__label .ms-icon { width: 16px; height: 16px; flex: none; }
.ms-dash__tile--age { grid-column: span 4; }
.ms-dash__tile--live { grid-column: span 2; }
.ms-dash__tile--ring { grid-column: span 2; }
.ms-dash__tile--bars { grid-column: span 4; }
.ms-dash__tile--stack { grid-column: span 3; }
.ms-dash__tile--owned { grid-column: span 1; }
.ms-dash__tile--promise { grid-column: span 2; }

.ms-dash__age { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; }
.ms-dash__age span { display: flex; flex-direction: column; }
.ms-dash__age strong { font: 800 clamp(2.6rem, 5vw, 4.2rem)/1 var(--display); letter-spacing: -0.04em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-dash__age span:last-child strong { font-size: clamp(1.8rem, 3vw, 2.6rem); background: linear-gradient(100deg, #fff, #b9c8ff); -webkit-background-clip: text; background-clip: text; }
.ms-dash__age small { color: var(--muted); font-size: 0.86rem; }
.ms-dash__milestones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: auto; position: relative; }
.ms-dash__milestones::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: linear-gradient(90deg, var(--orange), var(--violet), var(--electric)); }
.ms-dash__milestones li { position: relative; padding-top: 20px; font-size: 0.85rem; color: var(--muted); }
.ms-dash__milestones li::before { content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #0e1338; border: 2px solid var(--electric); }
.ms-dash__milestones li.is-now::before { background: var(--orange); border-color: #fff; box-shadow: 0 0 0 5px rgba(255, 122, 47, 0.25); }
.ms-dash__milestones b { display: block; color: #fff; font-family: var(--display); font-size: 1rem; }

.ms-dash__clock { font: 800 clamp(2.4rem, 4vw, 3.4rem)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ms-dash__status { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ms-dash__status span { width: 10px; height: 10px; border-radius: 50%; background: var(--dim); }
.ms-dash__status.is-open span { background: #3dffa8; box-shadow: 0 0 0 0 rgba(61, 255, 168, 0.6); animation: ms-pulse 2s infinite; }
.ms-dash__status.is-closed span { background: var(--orange); }

.ms-dash__donut-wrap { position: relative; width: min(180px, 100%); margin: 0 auto; }
.ms-dash__donut { width: 100%; transform: rotate(-90deg); }
.ms-dash__seg { transition: stroke-dasharray 1.2s var(--ease); }
.ms-dash__donut-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ms-dash__donut-num strong { font: 800 2.2rem/1 var(--display); }
.ms-dash__donut-num small { color: var(--muted); font-size: 0.78rem; }
.ms-dash__legend { display: grid; gap: 6px; font-size: 0.86rem; }
.ms-dash__legend li { display: flex; align-items: center; gap: 8px; }
.ms-dash__legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ms-dash__legend b { margin-left: auto; font-family: var(--display); }

.ms-dash__bars { display: grid; gap: 14px; }
.ms-dash__bar-label { display: flex; justify-content: space-between; font: 600 0.92rem/1.2 var(--display); }
.ms-dash__bar-label b { color: var(--c); }
.ms-dash__bar { display: block; height: 10px; margin: 7px 0 5px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ms-dash__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, #fff)); box-shadow: 0 0 12px var(--c); transition: width 1.4s var(--ease); }
.is-in .ms-dash__bar span { width: var(--w); }
.ms-dash__bar-names { display: block; font-size: 0.78rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ms-dash__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ms-dash__stats li { padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--edge); }
.ms-dash__stats strong { display: block; font: 800 1.9rem/1 var(--display); background: linear-gradient(100deg, #fff, #b9c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-dash__stats span { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--muted); line-height: 1.35; }

.ms-dash__tile--owned { justify-content: center; text-align: left; background: linear-gradient(160deg, rgba(25, 138, 0, 0.28), rgba(255, 255, 255, 0.04)); }
.ms-dash__flag { display: flex; height: 8px; width: 100%; border-radius: 8px; overflow: hidden; background: #198a00; }
.ms-dash__flag span { flex: 1; }
.ms-dash__flag span:nth-child(1) { flex: 3; }
.ms-dash__flag span:nth-child(2) { background: #de2010; }
.ms-dash__flag span:nth-child(3) { background: #000; }
.ms-dash__flag span:nth-child(4) { background: #ef7d00; }
.ms-dash__big { font: 800 2.6rem/1 var(--display); }
.ms-dash__tile--owned p { font-size: 0.86rem; color: #dfe6ff; }

.ms-dash__steps { display: grid; gap: 8px; }
.ms-dash__steps li { display: flex; align-items: center; gap: 12px; font: 600 1rem/1.2 var(--display); }
.ms-dash__steps span { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 0.8rem; background: var(--grad-btn); }
.ms-dash__tag { margin-top: auto; color: var(--orange-2); font: 600 0.88rem/1.3 var(--display); }

@media (max-width: 1280px) {
	.ms-dash { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ms-dash__tile--age, .ms-dash__tile--bars { grid-column: span 4; }
	.ms-dash__tile--live, .ms-dash__tile--ring, .ms-dash__tile--promise { grid-column: span 2; }
	.ms-dash__tile--stack { grid-column: span 3; }
	.ms-dash__tile--owned { grid-column: span 1; }
}
@media (max-width: 720px) {
	.ms-dash { grid-template-columns: minmax(0, 1fr); }
	.ms-dash__tile { grid-column: auto !important; }
	.ms-dash__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Insights at-a-glance: mixed styles (feature, timeline, pills, ring)
   ========================================================================== */
.ms-glance { grid-template-columns: 1.15fr 1fr 1fr 0.9fr; grid-template-rows: auto auto; gap: 14px; }
.ms-glance__item { position: relative; overflow: hidden; }

/* 1. 2016: tall feature card with an outlined giant year */
.ms-glance__item:nth-child(1) { grid-row: span 2; justify-content: flex-end; padding: 26px; min-height: 280px; background: radial-gradient(120% 80% at 0% 0%, rgba(255, 122, 47, 0.28), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); }
.ms-glance__item:nth-child(1) strong { font-size: clamp(3.6rem, 6vw, 5.4rem); color: transparent; background: none; -webkit-text-stroke: 2px rgba(255, 170, 110, 0.9); letter-spacing: -0.05em; }
.ms-glance__item:nth-child(1) small { font-size: 1rem; color: #fff; max-width: 220px; }
.ms-glance__item:nth-child(1) .ms-ico { position: absolute; top: 22px; left: 22px; }

/* 2. 2020: wide timeline card joined to 2016 */
.ms-glance__item:nth-child(2) { grid-column: span 2; flex-direction: row; align-items: center; gap: 18px; padding: 22px 26px; }
.ms-glance__item:nth-child(2) .ms-ico { order: 3; margin: 0 0 0 auto; }
.ms-glance__item:nth-child(2) strong { font-size: 2.8rem; }
.ms-glance__item:nth-child(2) small { font-size: 0.95rem; color: #dfe6ff; padding-left: 18px; border-left: 2px solid; border-image: linear-gradient(180deg, var(--orange), var(--electric)) 1; }
.ms-glance__item:nth-child(2)::before { content: "→"; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 0.85rem; background: var(--grad-btn); }

/* 6. 100%: circular ring badge */
.ms-glance__item:nth-child(6) { grid-row: span 2; grid-column: 4; grid-row-start: 1; align-items: center; justify-content: center; text-align: center; background: linear-gradient(160deg, rgba(25, 138, 0, 0.22), rgba(255,255,255,.03)); }
.ms-glance__item:nth-child(6) .ms-ico { display: none; }
.ms-glance__item:nth-child(6) strong { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; font-size: 2.4rem; color: #fff; background: radial-gradient(circle, #0c1236 58%, transparent 59%), conic-gradient(#198a00 0 70%, #de2010 70% 80%, #111 80% 90%, #ef7d00 90% 100%); -webkit-text-fill-color: #fff; box-shadow: 0 0 40px rgba(25, 138, 0, 0.35); animation: ms-glance-ring 1.6s var(--ease) both; }
.ms-glance__item:nth-child(6) small { margin-top: 10px; font-size: 1rem; color: #fff; }
@keyframes ms-glance-ring { from { transform: rotate(-120deg) scale(0.8); opacity: 0; } }

/* 3, 4, 5: compact pills, icon left */
.ms-glance__item:nth-child(3), .ms-glance__item:nth-child(4), .ms-glance__item:nth-child(5) { flex-direction: row; align-items: center; gap: 14px; padding: 18px 20px; }
.ms-glance__item:nth-child(3) .ms-ico, .ms-glance__item:nth-child(4) .ms-ico, .ms-glance__item:nth-child(5) .ms-ico { width: 48px; height: 48px; margin: 0; flex: none; }
.ms-glance__item:nth-child(3) strong, .ms-glance__item:nth-child(4) strong, .ms-glance__item:nth-child(5) strong { font-size: 2.3rem; min-width: 1.6em; }
.ms-glance__item:nth-child(3) { grid-column: 2; grid-row: 2; }
.ms-glance__item:nth-child(4) { grid-column: 3; grid-row: 2; }
.ms-glance__item:nth-child(5) { grid-column: 1 / span 1; grid-row: 3; display: none; }
.ms-glance__item:nth-child(3)::after, .ms-glance__item:nth-child(4)::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--violet), var(--electric)); }

@media (max-width: 1280px) {
	.ms-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ms-glance__item:nth-child(n) { grid-column: auto; grid-row: auto; }
	.ms-glance__item:nth-child(2), .ms-glance__item:nth-child(6) { grid-column: span 2; }
	.ms-glance__item:nth-child(1) { min-height: 220px; }
}
@media (max-width: 720px) { .ms-glance { grid-template-columns: minmax(0, 1fr); } .ms-glance__item:nth-child(n) { grid-column: auto; } }@media (min-width: 1281px) {
	.ms-glance { grid-template-columns: 1.2fr 1fr 1fr 1fr 0.95fr; }
	.ms-glance__item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
	.ms-glance__item:nth-child(2) { grid-column: 2 / span 3; grid-row: 1; }
	.ms-glance__item:nth-child(3) { grid-column: 2; grid-row: 2; }
	.ms-glance__item:nth-child(4) { grid-column: 3; grid-row: 2; }
	.ms-glance__item:nth-child(5) { grid-column: 4; grid-row: 2; display: flex; }
	.ms-glance__item:nth-child(6) { grid-column: 5; grid-row: 1 / span 2; }
}
.ms-glance__item:nth-child(5) { display: flex; }
.ms-glance__item:nth-child(5)::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--electric), var(--orange)); }
.ms-glance__item:nth-child(3) small, .ms-glance__item:nth-child(4) small, .ms-glance__item:nth-child(5) small { font-size: 0.82rem; }
.ms-glance__item:nth-child(3), .ms-glance__item:nth-child(4), .ms-glance__item:nth-child(5) { flex-wrap: wrap; }
.ms-glance__item:nth-child(3) small, .ms-glance__item:nth-child(4) small, .ms-glance__item:nth-child(5) small { flex-basis: 100%; }
.ms-glance__item:nth-child(2) { padding-left: 44px; }
.ms-glance__item:nth-child(2)::before { left: 10px; }

/* ==========================================================================
   Insights: figures as balls orbiting the 100% Zambian-owned ring
   ========================================================================== */
.ms-orb { --R: 250px; --ball: 150px; position: relative; height: calc(var(--R) * 2 + var(--ball) + 20px); max-width: 100%; margin: 0 auto; }
.ms-orb__path { position: absolute; left: 50%; top: 50%; width: calc(var(--R) * 2); height: calc(var(--R) * 2); transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(140, 180, 255, 0.35); }
.ms-orb__path--outer { width: calc(var(--R) * 2 + 70px); height: calc(var(--R) * 2 + 70px); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 80px rgba(59, 116, 255, 0.12); }
.ms-orb__core { position: absolute; left: 50%; top: 50%; width: 210px; height: 210px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 4px;
	background: radial-gradient(circle, #0c1236 60%, transparent 61%), conic-gradient(#198a00 0 70%, #de2010 70% 80%, #111 80% 90%, #ef7d00 90% 100%);
	box-shadow: 0 0 60px rgba(25, 138, 0, 0.4), 0 0 0 10px rgba(255, 255, 255, 0.03); animation: ms-glance-ring 1.6s var(--ease) both; }
.ms-orb__core strong { font: 800 2.9rem/1 var(--display); letter-spacing: -0.04em; }
.ms-orb__core small { color: #dfe6ff; font-weight: 600; }
.ms-orb__track { position: absolute; inset: 0; animation: ms-spin 60s linear infinite; }
.ms-orb:hover .ms-orb__track, .ms-orb:hover .ms-orb__inner, .ms-orb:focus-within .ms-orb__track, .ms-orb:focus-within .ms-orb__inner { animation-play-state: paused; }
.ms-orb__ball { position: absolute; left: 50%; top: 50%; width: var(--ball); height: var(--ball); margin: calc(var(--ball) / -2) 0 0 calc(var(--ball) / -2);
	transform: rotate(calc(var(--i) * 360deg / var(--n))) translate(var(--R)) rotate(calc(var(--i) * -360deg / var(--n))); }
.ms-orb__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; border-radius: 50%; text-align: center; padding: 14px;
	background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--c) 55%, #fff 10%), color-mix(in srgb, var(--c) 30%, #0c1236) 55%, #0b1030 100%);
	border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
	box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.9), 0 0 30px color-mix(in srgb, var(--c) 40%, transparent), inset 0 2px 0 rgba(255, 255, 255, 0.25);
	animation: ms-spin 60s linear infinite reverse; transition: box-shadow 0.3s, filter 0.3s; }
.ms-orb__inner .ms-icon { width: 20px; height: 20px; opacity: 0.9; }
.ms-orb__inner strong { font: 800 2rem/1 var(--display); letter-spacing: -0.03em; }
.ms-orb__inner small { font-size: 0.72rem; line-height: 1.2; color: #e6ebff; }
.ms-orb__ball:hover .ms-orb__inner, .ms-orb__ball:focus .ms-orb__inner { filter: brightness(1.15); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 50%, transparent), 0 0 50px var(--c); }
.ms-orb__ball:focus { outline: none; }
@media (max-width: 900px) { .ms-orb { --R: 170px; --ball: 112px; } .ms-orb__core { width: 150px; height: 150px; } .ms-orb__core strong { font-size: 2.1rem; } .ms-orb__inner strong { font-size: 1.5rem; } .ms-orb__inner small { font-size: 0.62rem; } .ms-orb__inner .ms-icon { width: 16px; height: 16px; } }
@media (max-width: 480px) { .ms-orb { --R: 122px; --ball: 88px; } .ms-orb__core { width: 116px; height: 116px; } .ms-orb__core strong { font-size: 1.6rem; } .ms-orb__core small { font-size: 0.7rem; } .ms-orb__inner { padding: 8px; } .ms-orb__inner small { display: none; } .ms-orb__inner strong { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .ms-orb__track, .ms-orb__inner { animation: none; } }

/* Tighter gap between the Insights header and the orbit */
#glance.ms-section { padding-top: 8px; margin-top: -40px; }
.ms-orb { height: calc(var(--R) * 2 + var(--ball) - 10px); }
@media (max-width: 720px) { #glance.ms-section { margin-top: -10px; } }

/* Balanced gap above the orbit */
#glance.ms-section { padding-top: 48px; margin-top: 0; }
@media (max-width: 720px) { #glance.ms-section { padding-top: 32px; margin-top: 0; } }

/* Contact: fill the side column and keep it in view beside the long form */
.ms-next { grid-column: 1 / -1; padding: 22px; border-radius: 20px; }
.ms-next .ms-label { margin-bottom: 14px; }
.ms-next__steps { display: grid; gap: 14px; position: relative; }
.ms-next__steps::before { content: ""; position: absolute; left: 14px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--electric), var(--violet), var(--orange)); opacity: 0.6; }
.ms-next__steps li { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.ms-next__steps li > span { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 700 0.85rem/1 var(--display); background: var(--grad-btn); box-shadow: 0 0 0 4px rgba(12, 16, 44, 0.9); }
.ms-next__steps strong { display: block; font: 600 0.98rem/1.25 var(--display); }
.ms-next__steps small { display: block; color: var(--muted); font-size: 0.85rem; line-height: 1.45; margin-top: 2px; }
@media (min-width: 1025px) { .ms-contact__info { position: sticky; top: 24px; } }

/* ==========================================================================
   Opening: the Modelink logo assembles from flying pieces
   ========================================================================== */
.ms-intro-on .ms-intro { gap: 14px; cursor: pointer; animation: ms-intro-out 0.8s var(--ease) 3.5s forwards; background: radial-gradient(900px 600px at 50% 45%, #1a1466 0%, #070a24 55%, #03040f 100%); overflow: hidden; }
.ms-intro.is-skip { animation: ms-intro-out 0.4s var(--ease) forwards !important; }
.ms-intro__badge { display: none; }
.ms-intro__particles { position: absolute; left: 50%; top: 42%; }
.ms-intro__particles i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #9fe9ff; box-shadow: 0 0 12px #59dcff, 0 0 24px rgba(139, 92, 255, 0.8); opacity: 0; animation: ms-intro-converge 1.3s cubic-bezier(.6, 0, .3, 1) var(--d) forwards; }
.ms-intro__particles i:nth-child(3n) { background: #ffb37a; box-shadow: 0 0 12px #ff7a2f; }
@keyframes ms-intro-converge { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.4); } 20% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 0) scale(0.2); } }

.ms-intro__stage { position: relative; width: 170px; height: 120px; display: grid; place-items: center; }
.ms-intro__mark, .ms-intro__official { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; overflow: visible; }
.ms-intro__official { opacity: 0; animation: ms-intro-fade 0.6s ease 1.85s forwards; filter: drop-shadow(0 10px 30px rgba(59, 116, 255, 0.7)); }
.ms-intro__mark { animation: ms-intro-hide 0.5s ease 2.05s forwards; }
@keyframes ms-intro-fade { to { opacity: 1; } }
@keyframes ms-intro-hide { to { opacity: 0; } }
.ms-intro__p, .ms-intro__node { transform-box: fill-box; transform-origin: center; }
.ms-intro__p--cloud { opacity: 0; animation: ms-intro-cloud 0.9s cubic-bezier(.2, .9, .3, 1.2) 0.35s forwards; }
@keyframes ms-intro-cloud { from { opacity: 0; transform: translate(-90px, -30px) rotate(-14deg) scale(0.6); } to { opacity: 1; transform: none; } }
.ms-intro__p--lower { opacity: 0; animation: ms-intro-lower 0.9s cubic-bezier(.2, .9, .3, 1.2) 0.55s forwards; }
@keyframes ms-intro-lower { from { opacity: 0; transform: translate(80px, 60px) rotate(12deg) scale(0.6); } to { opacity: 1; transform: none; } }
.ms-intro__p--swoosh { stroke-dasharray: 90; stroke-dashoffset: 90; animation: ms-intro-draw 0.6s ease 1.05s forwards; }
.ms-intro__p--links path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ms-intro-draw 0.45s ease forwards; }
.ms-intro__p--links path:nth-child(1) { animation-delay: 1.35s; }
.ms-intro__p--links path:nth-child(2) { animation-delay: 1.45s; }
.ms-intro__p--links path:nth-child(3) { animation-delay: 1.55s; }
@keyframes ms-intro-draw { to { stroke-dashoffset: 0; } }
.ms-intro__node { opacity: 0; animation: ms-intro-node 0.7s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.ms-intro__node--1 { --fx: 140px; --fy: -110px; animation-delay: 1.0s; }
.ms-intro__node--2 { --fx: -160px; --fy: -60px; animation-delay: 1.12s; }
.ms-intro__node--3 { --fx: 120px; --fy: 120px; animation-delay: 1.24s; }
@keyframes ms-intro-node { from { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(2.4); } to { opacity: 1; transform: none; } }
.ms-intro__pulse { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; border: 2px solid rgba(89, 220, 255, 0.8); opacity: 0; animation: ms-intro-pulse 1s ease-out 1.8s forwards; }
@keyframes ms-intro-pulse { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(3.2); } }

.ms-intro__word { display: flex; font: 800 clamp(2.6rem, 6vw, 3.6rem)/1 var(--display); letter-spacing: -0.035em; margin-top: 6px; }
.ms-intro__l { display: inline-block; opacity: 0; animation: ms-intro-letter 0.55s cubic-bezier(.2, 1.3, .4, 1) forwards; animation-delay: calc(2s + var(--k) * 0.06s); }
.ms-intro__l--a { color: #fff; --ly: -40px; }
.ms-intro__l--b { color: #4f9df7; --ly: 40px; }
@keyframes ms-intro-letter { from { opacity: 0; transform: translateY(var(--ly)) rotate(-8deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.ms-intro__sub { font: 700 0.72rem/1 var(--font); letter-spacing: 0.42em; color: #b9c8ff; opacity: 0; animation: ms-fade 0.6s ease 2.55s forwards; }
.ms-intro-on .ms-intro .ms-intro__bar { margin-top: 10px; opacity: 0; animation: ms-intro-fade 0.3s ease 2.4s forwards; }
.ms-intro-on .ms-intro .ms-intro__bar span { animation: ms-intro-bar 1s var(--ease) 2.5s forwards; }
.ms-intro-on .ms-intro .ms-intro__tag { opacity: 0; animation: ms-intro-fade 0.6s ease 2.7s forwards; }
@keyframes ms-intro-out { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }

/* Intro: keep the clean vector mark (the raster logo has a light fringe on dark backgrounds) */
.ms-intro__official { display: none; }
.ms-intro__mark { animation: none; filter: drop-shadow(0 10px 30px rgba(59, 116, 255, 0.75)); }

/* ==========================================================================
   Cybersecurity hero: professional six-pillar wheel
   ========================================================================== */
.ms-cwheel { position: relative; max-width: 500px; margin-inline: auto; }
.ms-cwheel__svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)); }
.ms-cwheel__scan { transform-origin: 200px 200px; animation: ms-spin 9s linear infinite; }
.ms-cwheel__ticks line { stroke: rgba(160, 200, 255, 0.35); stroke-width: 1; }
.ms-cwheel__seg { cursor: pointer; outline: none; }
.ms-cwheel__seg path { fill: color-mix(in srgb, var(--tone) 70%, #0a1030); stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; transition: fill 0.4s, filter 0.4s, transform 0.4s var(--ease); transform-origin: 200px 200px; }
.ms-cwheel__seg text { fill: #fff; font: 700 11px/1 'Sora', sans-serif; letter-spacing: 0.06em; pointer-events: none; }
.ms-cwheel__seg .ms-cwheel__sub { fill: rgba(220, 232, 255, 0.75); font: 600 7.5px/1 'Inter', sans-serif; letter-spacing: 0.2em; }
.ms-cwheel__seg .ms-icon { color: #fff; stroke-width: 1.8; opacity: 0.9; pointer-events: none; }
.ms-cwheel__seg.is-on path, .ms-cwheel__seg:hover path, .ms-cwheel__seg:focus-visible path { fill: var(--tone); filter: drop-shadow(0 0 14px var(--tone)) brightness(1.25); transform: scale(1.035); }
.ms-cwheel__pulse { transform-origin: 200px 200px; animation: ms-cw-pulse 3s ease-out infinite; }
@keyframes ms-cw-pulse { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.ms-cwheel__shield { transform-origin: 200px 196px; animation: ms-cw-breathe 4s ease-in-out infinite; }
@keyframes ms-cw-breathe { 50% { transform: scale(1.06); } }
.ms-cwheel__caption { margin-top: 6px; text-align: center; font: 600 0.9rem/1 var(--display); color: #dfe6ff; }
.ms-cwheel__caption span { color: var(--electric); }
@media (prefers-reduced-motion: reduce) { .ms-cwheel__scan, .ms-cwheel__pulse, .ms-cwheel__shield { animation: none; } }
.ms-cwheel__seg svg.ms-icon { width: 22px; height: 22px; stroke-width: 1.8; }
.ms-cwheel__seg text { font-size: 10px; }
.ms-cyberbg__wheel { display: none; }

/* ==========================================================================
   Light / dark mode
   ========================================================================== */
.ms-theme-toggle { width: 100%; border: 1px solid var(--edge); background: rgba(255, 255, 255, 0.04); cursor: pointer; font: inherit; margin-top: 8px; }
.ms-theme-toggle__icons { position: relative; width: 20px; height: 20px; flex: none; display: inline-block; }
.ms-theme-toggle__icons .ms-icon { position: absolute; inset: 0; width: 20px; height: 20px; transition: opacity 0.4s, transform 0.5s var(--ease); }
.ms-theme-toggle__moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
[data-theme="light"] .ms-theme-toggle__sun { opacity: 0; transform: rotate(90deg) scale(0.5); }
[data-theme="light"] .ms-theme-toggle__moon { opacity: 1; transform: none; }
.ms-topbar__theme { margin-left: auto; }
.ms-theme-anim, .ms-theme-anim body, .ms-theme-anim .glass, .ms-theme-anim .ms-bg { transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease; }

html[data-theme="light"] {
	--bg: #eef2fb;
	--ink: #0d1433;
	--muted: #475179;
	--dim: #6a7398;
	--electric: #0b86b4;
	--orange-2: #d9600f;
	--glass: linear-gradient(155deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.68));
	--glass-solid: rgba(255, 255, 255, 0.85);
	--edge: rgba(20, 35, 90, 0.12);
	--edge-strong: rgba(20, 35, 90, 0.2);
	--shadow: 0 24px 60px -28px rgba(30, 50, 120, 0.35);
	--grad-text: linear-gradient(100deg, #2a5fe0 0%, #7a3ff0 55%, #e0601c 100%);
	color-scheme: light;
}
[data-theme="light"] body { background: var(--bg); color: var(--ink); }

/* Background: bright, airy version of the same scene */
[data-theme="light"] .ms-bg { background: radial-gradient(1100px 700px at 85% -10%, #dcd3ff 0%, transparent 60%), radial-gradient(900px 700px at 0% 100%, #cfe0ff 0%, transparent 65%), var(--bg); }
[data-theme="light"] .ms-scene__layer { filter: blur(18px) saturate(1) brightness(1.05); opacity: 0.55; }
[data-theme="light"] .ms-scene__layer.is-on { opacity: 0.55; }
[data-theme="light"] .ms-scene__tint { mix-blend-mode: normal; opacity: 1; background: none; }
[data-theme="light"] .ms-scene__tint::after { background: linear-gradient(90deg, rgba(238, 242, 251, 0.94) 0%, rgba(238, 242, 251, 0.78) 45%, rgba(238, 242, 251, 0.45) 100%), linear-gradient(180deg, transparent 55%, rgba(238, 242, 251, 0.85) 100%); }
[data-theme="light"] .ms-scene__frame.is-on { opacity: 0.8; }
[data-theme="light"] .ms-scene__lines, [data-theme="light"] .ms-scene__grain, [data-theme="light"] .ms-scene__vignette { display: none; }
[data-theme="light"] .ms-bg__veil { background: none; }
[data-theme="light"] .ms-bg__current { opacity: 0.45; mix-blend-mode: multiply; }
[data-theme="light"] .ms-bg__aurora { opacity: 0.25; }
[data-theme="light"] .ms-bg__grid { opacity: 0.35; }
[data-theme="light"] .ms-wall { opacity: 0.22; }
[data-theme="light"] .blog .ms-bg__veil, [data-theme="light"] .single-post .ms-bg__veil { background: rgba(238, 242, 251, 0.72); }
[data-theme="light"] .ms-cyberbg { opacity: 0.55; }
[data-theme="light"] .ms-spot-cursor { opacity: 0.4; }

/* Glass surfaces */
[data-theme="light"] .glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--shadow); }
[data-theme="light"] .ms-side__panel { background: linear-gradient(170deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74)); box-shadow: 0 30px 70px -30px rgba(30, 50, 120, 0.4); }
[data-theme="light"] .ms-side__card, [data-theme="light"] .ms-theme-toggle { background: rgba(20, 35, 90, 0.04); }
[data-theme="light"] .ms-side__link { color: #26305a; }
[data-theme="light"] .ms-side__link:hover, [data-theme="light"] .ms-side__link[aria-current="page"] { color: var(--ink); }
[data-theme="light"] .ms-side__link[aria-current="page"] { background: linear-gradient(120deg, rgba(59, 116, 255, 0.14), rgba(139, 92, 255, 0.08)); box-shadow: 0 8px 24px -14px rgba(59, 116, 255, 0.8); }
[data-theme="light"] .ms-side__glider { background: rgba(20, 35, 90, 0.06); border-color: rgba(20, 35, 90, 0.1); }
[data-theme="light"] .ms-topbar { background: rgba(255, 255, 255, 0.8); }
[data-theme="light"] .ms-topbar__menu { background: rgba(20, 35, 90, 0.05); color: var(--ink); }
[data-theme="light"] .ms-tip { background: #fff; color: var(--ink); }

/* Text that was hard-coded white */
[data-theme="light"] :is(.ms-ticks li, .ms-tags li, .ms-hero__tag, .ms-practice__more, .ms-tab:hover, .ms-crumb a:hover, .ms-catalog__nav a:hover, .ms-catalog__nav a.is-active, .ms-sizer__tip, .ms-filter:hover, .ms-field > span, .ms-field legend, .ms-footer__col a, .ms-footer__col a:hover, .ms-footer__contact li, .ms-form__step > legend, .ms-callback .ms-field > span:not(.screen-reader-text), .ms-finder__intro .ms-muted, .ms-contact__alt span, .ms-glance__item:nth-child(1) small, .ms-glance__item:nth-child(2) small, .ms-window__title b, .ms-btn--ghost:hover, .ms-mini__item:hover > .ms-icon, .ms-404__link:hover > .ms-icon, .ms-cwheel__caption) { color: var(--ink); }
[data-theme="light"] :is(.ms-stat dd, .ms-glance__item strong, .ms-404__code > span:not(.ms-404__zero), .ms-dash__stats strong) { background: linear-gradient(100deg, #0d1433, #3b4fa8); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="light"] .ms-glance__item:nth-child(1) strong { -webkit-text-stroke: 2px #e0601c; background: none; }
[data-theme="light"] .ms-glance__item:nth-child(6) strong { color: #0d1433; -webkit-text-fill-color: #0d1433; background: radial-gradient(circle, #fff 58%, transparent 59%), conic-gradient(#198a00 0 70%, #de2010 70% 80%, #111 80% 90%, #ef7d00 90% 100%); }
[data-theme="light"] .ms-glance__item:nth-child(6) small { color: var(--ink); }

/* Controls */
[data-theme="light"] .ms-btn--glass { background: rgba(255, 255, 255, 0.75); color: var(--ink); }
[data-theme="light"] .ms-btn--glass:hover { background: #fff; }
[data-theme="light"] .ms-btn--ghost { color: var(--muted); }
[data-theme="light"] .ms-chip { background: rgba(255, 255, 255, 0.75); color: var(--ink); }
[data-theme="light"] .ms-flag { background: rgba(255, 255, 255, 0.85); color: var(--ink); box-shadow: 0 8px 24px -12px rgba(30, 50, 120, 0.45); }
[data-theme="light"] .ms-field input, [data-theme="light"] .ms-field select, [data-theme="light"] .ms-field textarea { background: #fff; color: var(--ink); border-color: rgba(20, 35, 90, 0.18); }
[data-theme="light"] .ms-field select option { background: #fff; color: var(--ink); }
[data-theme="light"] :is(.ms-pick > span, .ms-choice__list span, .ms-filter, .ms-tags li, .ms-tabs, .ms-pillar-tab, .ms-check__item, .ms-range, .ms-objectives li, .ms-sector__list li, .ms-matrix li, .ms-dash__stats li, .ms-results div, .ms-finder__step, .ms-finder__result, .ms-finder__card, .ms-faq__item) { background: rgba(255, 255, 255, 0.7); border-color: rgba(20, 35, 90, 0.12); color: var(--ink); }
[data-theme="light"] .ms-pick input:checked + span, [data-theme="light"] .ms-choice__list input:checked + span, [data-theme="light"] .ms-filter[aria-pressed="true"], [data-theme="light"] .ms-tab[aria-selected="true"] { color: #fff; }
[data-theme="light"] .ms-tab { color: var(--muted); }
[data-theme="light"] .ms-faq__item summary i::before, [data-theme="light"] .ms-faq__item summary i::after { background: var(--ink); }
[data-theme="light"] .ms-faq__item[open] summary i::before, [data-theme="light"] .ms-faq__item[open] summary i::after { background: #fff; }
[data-theme="light"] .ms-ico { color: #1f4fd6; background: linear-gradient(140deg, rgba(59, 116, 255, 0.18), rgba(59, 116, 255, 0.05)); border-color: rgba(59, 116, 255, 0.3); }
[data-theme="light"] .ms-ico--orange { color: #c2510b; background: linear-gradient(140deg, rgba(255, 122, 47, 0.2), rgba(255, 122, 47, 0.05)); }
[data-theme="light"] .ms-ico--violet { color: #6a3fe0; }
[data-theme="light"] .ms-practice__top .ms-ico { color: #fff; background: linear-gradient(140deg, #3b74ff, #6a4dff); border-color: rgba(255, 255, 255, 0.5); }
[data-theme="light"] .ms-flow__nodes .ms-ico, [data-theme="light"] .ms-diff__card .ms-ico { background-color: #fff; }
[data-theme="light"] .ms-logo-chip, [data-theme="light"] .ms-marquee--chips li { box-shadow: 0 6px 18px -10px rgba(30, 50, 120, 0.35); border: 1px solid rgba(20, 35, 90, 0.08); }
[data-theme="light"] .ms-float { background: rgba(255, 255, 255, 0.85); color: var(--ink); }
[data-theme="light"] button.ms-float.is-on { color: #fff; }
[data-theme="light"] .ms-photo-tag, [data-theme="light"] .ms-pfloat figcaption, [data-theme="light"] .ms-wide__cap, [data-theme="light"] .ms-post__topic { color: var(--ink); }
[data-theme="light"] .ms-pfloat { background: linear-gradient(160deg, #fff, #eef2fb); }
[data-theme="light"] .ms-photo-tag, [data-theme="light"] .ms-wide__cap, [data-theme="light"] .ms-post__topic { background: rgba(255, 255, 255, 0.88); }
[data-theme="light"] .ms-step__num { background: #fff; }
[data-theme="light"] .ms-top { background: rgba(255, 255, 255, 0.85); color: var(--ink); }
[data-theme="light"] .ms-orbit__hub { background: radial-gradient(circle, rgba(59, 116, 255, 0.18), rgba(255, 255, 255, 0.92) 70%); }
[data-theme="light"] .ms-orb__core { background: radial-gradient(circle, #fff 60%, transparent 61%), conic-gradient(#198a00 0 70%, #de2010 70% 80%, #111 80% 90%, #ef7d00 90% 100%); }
[data-theme="light"] .ms-orb__core small { color: var(--ink); }
[data-theme="light"] .ms-404__visual, [data-theme="light"] .ms-sizer__out { color: var(--ink); }
[data-theme="light"] .ms-footer__giant { -webkit-text-stroke: 1.5px rgba(40, 70, 160, 0.25); }
[data-theme="light"] .ms-intro-on .ms-intro { background: radial-gradient(900px 600px at 50% 45%, #ffffff 0%, #e6ecfb 60%, #d8e0f5 100%); }
[data-theme="light"] .ms-intro__l--a { color: #12224f; }
[data-theme="light"] .ms-intro__sub { color: #4a5a90; }
[data-theme="light"] .ms-intro-on .ms-intro .ms-intro__tag { color: var(--muted); }

/* Elements sitting on photos / dark media keep light text */
[data-theme="light"] :is(.ms-band, .ms-cta, .ms-spot, .ms-window__media, .ms-cslide, .ms-reel__item span, .ms-orb__inner, .ms-cwheel__seg) { color: #fff; }
[data-theme="light"] :is(.ms-band, .ms-cta, .ms-spot) :is(.ms-h2, .ms-h3, .ms-lead, .ms-muted) { color: #fff; }
[data-theme="light"] :is(.ms-band, .ms-cta, .ms-spot) .ms-label { color: #9fe9ff; }
[data-theme="light"] :is(.ms-band, .ms-cta, .ms-spot) .ms-btn--ghost { color: rgba(255, 255, 255, 0.85); }
[data-theme="light"] :is(.ms-band, .ms-cta, .ms-spot) .ms-btn--ghost:hover { color: #fff; }
@media (max-width: 900px) { [data-theme="light"] .ms-scene__tint::after { background: linear-gradient(180deg, rgba(238, 242, 251, 0.9) 0%, rgba(238, 242, 251, 0.82) 60%, rgba(238, 242, 251, 0.92) 100%); } }
@media (max-width: 900px) { [data-theme="light"] .ms-scene__frame.is-on { opacity: 0.22; } }

/* Desktop light/dark switch, top right */
.ms-modeswitch { position: fixed; top: 22px; right: 26px; z-index: 60; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; cursor: pointer; font: 600 0.82rem/1 var(--display); color: var(--muted);
	background: rgba(16, 22, 60, 0.55); border: 1px solid var(--edge-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.7); }
.ms-modeswitch::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: linear-gradient(140deg, #3b74ff, #6a4dff); box-shadow: 0 6px 16px -6px rgba(59, 116, 255, 0.9); transition: transform 0.45s var(--ease); }
.ms-modeswitch__opt { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; transition: color 0.3s; }
.ms-modeswitch__opt .ms-icon { width: 16px; height: 16px; }
.ms-modeswitch__opt--dark { color: #fff; }
[data-theme="light"] .ms-modeswitch { background: rgba(255, 255, 255, 0.8); box-shadow: 0 14px 34px -18px rgba(30, 50, 120, 0.45); }
[data-theme="light"] .ms-modeswitch::before { transform: translateX(100%); }
[data-theme="light"] .ms-modeswitch__opt--dark { color: var(--muted); }
[data-theme="light"] .ms-modeswitch__opt--light { color: #fff; }
.ms-modeswitch:hover { border-color: rgba(120, 160, 255, 0.6); }
.ms-modeswitch:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; }
@media (max-width: 1024px) { .ms-modeswitch { display: none; } }

/* ==========================================================================
   Cybersecurity background: clean, wheel-centred
   ========================================================================== */
.ms-cyberbg__ring, .ms-cyberbg__radar, .ms-cyberbg__shield { display: none; }
.ms-cyberbg__hex { opacity: 0.18; -webkit-mask-image: radial-gradient(55% 65% at 72% 45%, #000 0%, rgba(0,0,0,.35) 55%, transparent 85%); mask-image: radial-gradient(55% 65% at 72% 45%, #000 0%, rgba(0,0,0,.35) 55%, transparent 85%); }
.ms-cyberbg__attacks { opacity: 0.6; }
.ms-cwheel::before { content: ""; position: absolute; inset: -12%; z-index: -1; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, rgba(59, 116, 255, 0.28) 0%, rgba(25, 224, 208, 0.1) 45%, transparent 70%); }
.ms-cwheel__ticks line { stroke: rgba(160, 200, 255, 0.22); }
.ms-phero__visual .ms-cwheel ~ .ms-pfloat { width: 26%; }
.ms-phero__visual .ms-cwheel ~ .ms-pfloat--a { left: -14%; bottom: -10%; }
.ms-phero__visual .ms-cwheel ~ .ms-pfloat--b { right: -1%; top: -10%; }
[data-theme="light"] .ms-cwheel::before { background: radial-gradient(circle, rgba(59, 116, 255, 0.22) 0%, rgba(25, 224, 208, 0.08) 45%, transparent 70%); }
/* Round wheel image back on the background, centred behind the hero wheel */
.ms-cyberbg__core { left: 79%; top: 44%; }
.ms-cyberbg .ms-cyberbg__wheel { display: block; inset: 0; width: 100%; height: 100%; opacity: 0.16; filter: drop-shadow(0 0 50px rgba(59, 116, 255, 0.5)) blur(0.5px); animation: ms-spin 200s linear infinite; }
.ms-cyberbg .ms-cyberbg__ring--2 { display: block; inset: -3%; border-color: rgba(89, 220, 255, 0.12); }
[data-theme="light"] .ms-cyberbg .ms-cyberbg__wheel { opacity: 0.2; filter: none; }
@media (max-width: 1024px) { .ms-cyberbg__core { left: 50%; top: 30%; } .ms-cyberbg .ms-cyberbg__wheel { opacity: 0.1; } }

/* Slideshow boxes: no progress bar; a white sweep runs top to bottom just before each photo changes */
.ms-window__progress { display: none; }
.ms-window__scan { animation: none; opacity: 0; top: -30%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14) 80%, rgba(255, 255, 255, 0.6)); }
.ms-window__scan.is-sweep { animation: ms-winsweep 1.1s cubic-bezier(.45, 0, .55, 1) forwards; }
@keyframes ms-winsweep { 0% { top: -30%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ms-window__scan.is-sweep { animation: none; } }

/* Company: Vision and Mission badges */
.ms-vm__badge { --glow: rgba(124, 92, 255, 0.55); position: relative; width: 68px; height: 68px; flex: none; display: grid; place-items: center; border-radius: 20px;
	box-shadow: 0 18px 36px -14px var(--glow), 0 0 0 1px rgba(255, 255, 255, 0.18) inset, inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.ms-vm__badge svg { width: 38px; height: 38px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); transition: transform 0.5s var(--ease); }
.ms-vm__badge::after { content: ""; position: absolute; inset: -7px; border-radius: 25px; border: 1px solid var(--glow); opacity: 0; animation: ms-vm-ring 3.2s ease-out infinite; }
.ms-vm__badge--vision { background: linear-gradient(140deg, #4f86ff 0%, #7a5cff 55%, #b46bff 100%); }
.ms-vm__badge--mission { --glow: rgba(255, 112, 67, 0.55); background: linear-gradient(140deg, #ffb547 0%, #ff7a2f 50%, #ff4f7b 100%); }
.ms-vm__badge--mission::after { animation-delay: 1.6s; }
.ms-vm__card:hover .ms-vm__badge svg { transform: scale(1.1) rotate(-4deg); }
@keyframes ms-vm-ring { 0% { opacity: 0.9; transform: scale(0.92); } 100% { opacity: 0; transform: scale(1.22); } }
@media (prefers-reduced-motion: reduce) { .ms-vm__badge::after { animation: none; } }

/* ==========================================================================
   Light mode: stronger backgrounds on Insights (photo wall) and Cybersecurity
   ========================================================================== */
/* Insights: photo wall clearly visible; veil only where the text sits */
[data-theme="light"] .blog .ms-wall { opacity: 0.62; filter: saturate(1.1) contrast(1.05); }
[data-theme="light"] .blog .ms-bg__veil { background:
	linear-gradient(90deg, rgba(238, 242, 251, 0.9) 0%, rgba(238, 242, 251, 0.72) 38%, rgba(238, 242, 251, 0.28) 72%, rgba(238, 242, 251, 0.12) 100%),
	linear-gradient(180deg, rgba(238, 242, 251, 0) 60%, rgba(238, 242, 251, 0.75) 100%); }
/* Cybersecurity: blue-teal glow, visible hex grid, attack lines and wheel */
[data-theme="light"] .page-template-cybersecurity .ms-cyberbg { opacity: 1;
	background: radial-gradient(900px 640px at 76% 42%, rgba(42, 120, 230, 0.2), transparent 65%), radial-gradient(700px 500px at 92% 85%, rgba(25, 190, 200, 0.16), transparent 70%); }
[data-theme="light"] .page-template-cybersecurity .ms-cyberbg__hex { opacity: 0.55;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%232a5fe0' stroke-opacity='.32' stroke-width='1'/%3E%3C/svg%3E"); }
[data-theme="light"] .page-template-cybersecurity .ms-cyberbg__attacks { opacity: 0.9; filter: invert(1) hue-rotate(180deg) saturate(1.6) brightness(0.85); }
[data-theme="light"] .page-template-cybersecurity .ms-cyberbg .ms-cyberbg__wheel { opacity: 0.32; filter: drop-shadow(0 0 40px rgba(42, 95, 224, 0.35)); }
[data-theme="light"] .page-template-cybersecurity .ms-cyberbg .ms-cyberbg__ring--2 { border-color: rgba(42, 95, 224, 0.25); }
[data-theme="light"] .page-template-cybersecurity .ms-scene__tint::after { background:
	linear-gradient(90deg, rgba(238, 242, 251, 0.92) 0%, rgba(238, 242, 251, 0.7) 42%, rgba(238, 242, 251, 0.3) 75%, rgba(238, 242, 251, 0.2) 100%),
	linear-gradient(180deg, transparent 60%, rgba(238, 242, 251, 0.7) 100%); }
[data-theme="light"] .page-template-cybersecurity .ms-scene__layer, [data-theme="light"] .page-template-cybersecurity .ms-scene__layer.is-on { opacity: 0.7; }
@media (max-width: 900px) {
	[data-theme="light"] .blog .ms-wall { opacity: 0.4; }
	[data-theme="light"] .blog .ms-bg__veil { background: rgba(238, 242, 251, 0.6); }
}

/* Light mode, Power & Solar: frame back on the right (like the other pages) so the text stays clear,
   and no dark text shadow (that is only needed over the dark background) */
@media (min-width: 1025px) {
	[data-theme="light"] .page-template-templatespower-php .ms-scene__frame { left: auto; right: 3vw; width: 44vw; place-items: center end; transform: rotate(-3deg) translateX(30px) scale(0.98); }
	[data-theme="light"] .page-template-templatespower-php .ms-scene__frame.is-on { opacity: 0.8; transform: rotate(-3deg) translateX(0) scale(1); }
	[data-theme="light"] .page-template-templatespower-php .ms-scene__frame img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
	[data-theme="light"] .page-template-templatespower-php .ms-scene__frame.is-on::before { inset: 6% -2% 6% 30%; transform: rotate(5deg); }
}
[data-theme="light"] .page-template-templatespower-php .ms-phero__copy { text-shadow: none; }

/* Dark mode, Insights: photo wall clearly visible; veil only where the text sits */
.blog .ms-wall { opacity: 0.68; filter: saturate(1.05); }
.blog .ms-bg__veil { background:
	linear-gradient(90deg, rgba(4, 5, 15, 0.84) 0%, rgba(4, 5, 15, 0.62) 38%, rgba(4, 5, 15, 0.3) 72%, rgba(4, 5, 15, 0.18) 100%),
	linear-gradient(180deg, rgba(4, 5, 15, 0) 60%, rgba(4, 5, 15, 0.7) 100%); }
@media (max-width: 900px) { .blog .ms-wall { opacity: 0.45; } .blog .ms-bg__veil { background: rgba(4, 5, 15, 0.62); } }

/* Privacy notice: footer link and the line under the enquiry forms */
.ms-footer__privacy { margin-left: 10px; color: inherit; text-decoration: underline; text-underline-offset: 3px; opacity: 0.85; }
.ms-footer__privacy:hover { opacity: 1; color: var(--electric); }
.ms-privacy-note { margin: 12px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.ms-privacy-note a { color: var(--electric); text-decoration: underline; text-underline-offset: 2px; }
.ms-callback .ms-privacy-note { grid-column: 1 / -1; }
.ms-privacy .ms-prose h2 { margin-top: 1.6em; }
/* Privacy page: same calm veil over the photo wall as the article pages */
.ms-privacy .ms-bg__veil { background: linear-gradient(100deg, rgba(4, 5, 15, 0.86) 0%, rgba(4, 5, 15, 0.7) 50%, rgba(4, 5, 15, 0.55) 100%); z-index: 1; }
[data-theme="light"] .ms-privacy .ms-bg__veil { background: rgba(238, 242, 251, 0.72); }