/*
 * ValidationMaster design system (from the #68 Figma redesign, 10/7).
 * Shared tokens, type, buttons, section heads, cards, header and footer.
 * Page groups add their own file in this folder; it loads after this one.
 */

:root {
	--vm-navy-950: #071533;
	--vm-navy-900: #0a1f47;
	--vm-navy-800: #0e2b54;
	--vm-navy-700: #173a6e;
	--vm-blue-600: #1f5fba;
	--vm-blue-400: #4f8fe8;
	--vm-sky-100: #eaf3fd;
	--vm-sky-50: #f3f9ff;
	--vm-orange: #f18c21;
	--vm-orange-100: #fdf0e1;
	--vm-green: #3fae49;
	--vm-green-700: #26a34b;
	--vm-green-100: #e8f6ea;
	--vm-ink: #0e2b54;
	--vm-text: #4a5568;
	--vm-muted: #6b778c;
	--vm-on-dark: #c9d5ea;
	--vm-line: #e1e9f4;
	--vm-line-dark: rgba(98, 150, 235, 0.38);
	--vm-white: #fff;

	--vm-font-head: "Poppins", "Segoe UI", Arial, sans-serif;
	--vm-font-body: "Open Sans", "Segoe UI", Arial, sans-serif;

	--vm-radius-sm: 4px;
	--vm-radius: 8px;
	--vm-radius-lg: 14px;
	--vm-shadow: 0 10px 30px rgba(14, 43, 84, 0.08);
	--vm-shadow-dark: 0 0 0 1px var(--vm-line-dark), 0 0 24px rgba(54, 120, 230, 0.22) inset;
	--vm-container: 1200px;
	--vm-gutter: 24px;
	--vm-section: clamp(48px, 5vw, 76px);
	--vm-ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	font-family: var(--vm-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--vm-text);
	background: var(--vm-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--vm-blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-family: var(--vm-font-head); color: var(--vm-ink); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
sup { font-size: .55em; line-height: 0; position: relative; top: -.55em; vertical-align: baseline; margin-left: .04em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--vm-orange); outline-offset: 3px; }

.ss-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ss-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--vm-navy-800); color: #fff; padding: 10px 16px; border-radius: var(--vm-radius-sm); }
.ss-skip:focus { top: 12px; }

.ss-container { width: 100%; max-width: calc(var(--vm-container) + var(--vm-gutter) * 2); margin: 0 auto; padding: 0 var(--vm-gutter); }
.ss-container--narrow { max-width: calc(900px + var(--vm-gutter) * 2); }
.ss-section { position: relative; padding: var(--vm-section) 0; }
.ss-section--tight { padding: calc(var(--vm-section) * .6) 0; }
.ss-section--sky { background: var(--vm-sky-50); }
.ss-section--sky-fade { background: linear-gradient(180deg, var(--vm-sky-50), #fff); }
.ss-section--dark { background: radial-gradient(120% 90% at 70% 10%, var(--vm-navy-700) 0%, var(--vm-navy-800) 38%, var(--vm-navy-900) 100%); color: var(--vm-on-dark); }
.ss-section--dark h1, .ss-section--dark h2, .ss-section--dark h3, .ss-section--dark h4 { color: #fff; }

/* Type scale (design is 1440 wide; clamps keep it in proportion down to 360). */
.ss-h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; }
.ss-h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; }
.ss-h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; font-weight: 500; }
.ss-h4 { font-size: 17px; line-height: 1.35; font-weight: 600; }
.ss-lead { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7; }
.ss-small { font-size: 14px; }
.ss-accent { color: var(--vm-orange); }
.ss-section--dark .ss-accent, .ss-hero .ss-accent { color: var(--vm-orange); }
.ss-tagline { font-family: var(--vm-font-head); font-weight: 600; color: var(--vm-ink); font-size: 15px; }
.ss-section--dark .ss-tagline { color: #fff; }

/* Eyebrow: small orange uppercase label above headings. */
.ss-eyebrow { margin: 0 0 14px; font-family: var(--vm-font-head); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--vm-orange); }
.ss-eyebrow__rule { display: none; }

/* Section head */
.ss-head { margin: 0 0 clamp(32px, 4vw, 48px); }
.ss-head--center { text-align: center; max-width: 960px; margin-left: auto; margin-right: auto; }
.ss-head--center .ss-head__text { margin-left: auto; margin-right: auto; }
.ss-head--split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; }
.ss-head__text { max-width: 900px; margin-top: 12px; font-size: 16px; }
.ss-head--dark .ss-h2 { color: #fff; }
.ss-head--dark .ss-head__text { color: var(--vm-on-dark); }
@media (max-width: 800px) { .ss-head--split { grid-template-columns: 1fr; } }

/* Buttons: uppercase Poppins, 4px corners. */
.ss-btn-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-top: 28px; }
.ss-head--center + .ss-btn-row, .ss-btn-row--center { justify-content: center; }
.ss-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 12px 22px; border-radius: var(--vm-radius-sm);
	font-family: var(--vm-font-head); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; text-align: center;
	border: 1px solid transparent; cursor: pointer; text-decoration: none !important;
	transition: background .2s var(--vm-ease), color .2s var(--vm-ease), border-color .2s var(--vm-ease), box-shadow .2s var(--vm-ease), transform .2s var(--vm-ease);
}
.ss-btn:hover { transform: translateY(-1px); }
.ss-btn--primary { background: linear-gradient(90deg, var(--vm-green-700), #5fb046); color: #fff; box-shadow: 0 4px 12px rgba(38, 163, 75, .25); }
.ss-btn--primary:hover { box-shadow: 0 6px 18px rgba(38, 163, 75, .35); }
.ss-btn--outline { background: #fff; color: var(--vm-green-700); border-color: var(--vm-green-700); }
.ss-btn--outline:hover { background: #fff; color: #1b7f3a; border-color: #1b7f3a; box-shadow: inset 0 0 0 1px #1b7f3a; }
.ss-btn--outline-white, .ss-section--dark .ss-btn--outline, .ss-hero .ss-btn--outline { background: transparent; color: #fff; border-color: #5fb046; }
.ss-btn--outline-white:hover, .ss-section--dark .ss-btn--outline:hover, .ss-hero .ss-btn--outline:hover { background: rgba(255, 255, 255, .08); border-color: #7fd28a; box-shadow: inset 0 0 0 1px #7fd28a; color: #fff; }
.ss-btn--white { background: #fff; color: var(--vm-navy-800); }
.ss-btn--link { min-height: 0; padding: 0; background: none; color: var(--vm-blue-600); text-transform: none; letter-spacing: 0; font-size: 15px; }
.ss-btn--sm { min-height: 36px; padding: 8px 14px; font-size: 12px; }
.ss-btn--block { width: 100%; }

/* Badges */
.ss-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: var(--vm-font-head); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; white-space: nowrap; vertical-align: middle; }
.ss-badge--soon { background: rgba(255, 255, 255, .1); color: #dfe8f7; border: 1px solid rgba(255, 255, 255, .25); }
.ss-badge--soon-light { background: var(--vm-sky-100); color: var(--vm-navy-800); border: 1px solid #c8dbf4; }
.ss-badge--soon-light::before, .ss-badge--soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vm-orange); }
.ss-badge--live { background: var(--vm-green-100); color: var(--vm-green-700); }
.ss-badge--tag { background: rgba(63, 174, 73, .14); color: #6fd07a; border: 1px solid rgba(63, 174, 73, .45); }

/* Grids */
.ss-grid { display: grid; gap: 24px; }
.ss-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ss-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { .ss-grid--4, .ss-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ss-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .ss-grid--2, .ss-grid--3, .ss-grid--4, .ss-grid--5 { grid-template-columns: 1fr; } }
.ss-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ss-split--reverse > :first-child { order: 2; }
@media (max-width: 900px) { .ss-split { grid-template-columns: 1fr; } .ss-split--reverse > :first-child { order: 0; } }

/* Cards */
.ss-card { position: relative; padding: 28px 26px; border-radius: var(--vm-radius); background: #fff; border: 1px solid var(--vm-line); box-shadow: var(--vm-shadow); }
.ss-card--flat { box-shadow: none; background: #f7faff; }
.ss-card h3, .ss-card .ss-card__title { font-size: 17px; font-weight: 500; margin-bottom: 10px; color: var(--vm-ink); }
.ss-card p { font-size: 14.5px; line-height: 1.65; }
.ss-card--dark {
	background: linear-gradient(160deg, #0f2d5e 0%, #0a1f47 100%);
	border: 1px solid var(--vm-line-dark); box-shadow: 0 0 22px rgba(42, 108, 220, .18) inset, 0 12px 28px rgba(7, 21, 51, .18);
	color: var(--vm-on-dark);
}
.ss-card--dark::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(98, 150, 235, .16); border-radius: calc(var(--vm-radius) - 3px); pointer-events: none; }
.ss-card--dark h3, .ss-card--dark .ss-card__title { color: #fff; }
.ss-card--dark p { color: #b9c6de; }
.ss-card__icon { width: 64px; height: 64px; margin-bottom: 18px; object-fit: contain; }
.ss-card__badge { position: absolute; top: 14px; right: 14px; }
.ss-card__link { display: inline-flex; margin-top: 14px; font-weight: 600; font-size: 14px; }
.ss-card--hover { transition: transform .25s var(--vm-ease), box-shadow .25s var(--vm-ease), border-color .25s var(--vm-ease); }
.ss-card--hover:hover { transform: translateY(-4px); }
.ss-card--dark.ss-card--hover:hover { border-color: rgba(120, 170, 255, .7); box-shadow: 0 0 30px rgba(60, 130, 255, .3) inset, 0 16px 34px rgba(7, 21, 51, .28); }

/* Stats */
.ss-stat { padding: 22px 18px; text-align: center; border-radius: var(--vm-radius-lg); background: #fff; border: 1px solid #f4dcc0; box-shadow: var(--vm-shadow); }
.ss-stat__value { display: block; font-family: var(--vm-font-head); font-size: clamp(32px, 3vw, 40px); font-weight: 500; color: var(--vm-ink); line-height: 1.1; }
.ss-stat__label { display: block; margin-top: 8px; font-family: var(--vm-font-head); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vm-orange); }

/* Check list */
.ss-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ss-checklist li { position: relative; padding-left: 28px; }
.ss-checklist li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 9px; border-left: 2.5px solid var(--vm-green); border-bottom: 2.5px solid var(--vm-green); transform: rotate(-45deg); }
.ss-checklist--dark li { color: var(--vm-on-dark); }

/* Media frames for isometric illustrations */
.ss-media { position: relative; }
.ss-media img { width: 100%; height: auto; }
.ss-media--float img { animation: ss-float 7s ease-in-out infinite; }
@keyframes ss-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .ss-media--float img { animation: none; } }

/* Dark band background decoration (grid of dots + glow) */
.ss-band { position: relative; overflow: hidden; isolation: isolate; }
.ss-band__glow { position: absolute; inset: -20% -10% auto auto; width: 70%; height: 120%; background: radial-gradient(closest-side, rgba(66, 133, 244, .28), transparent 70%); z-index: -1; pointer-events: none; }
.ss-band__aurora, .ss-band__spot { display: none; }
.ss-band__grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; background-image: radial-gradient(rgba(140, 180, 255, .35) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); }

/* Rounded dark panel used for CTA bands and the newsletter */
.ss-panel { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--vm-radius-lg); padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 72px); background: radial-gradient(120% 120% at 50% 0%, #163a73 0%, var(--vm-navy-800) 45%, var(--vm-navy-900) 100%); color: var(--vm-on-dark); text-align: center; }
.ss-panel h2, .ss-panel h3 { color: #fff; }
.ss-panel .ss-btn-row { justify-content: center; }
.ss-panel__logo { margin: 0 auto 18px; max-width: 240px; }

/* Hero (navy) */
.ss-hero { position: relative; overflow: hidden; isolation: isolate; padding: 170px 0 80px; background: radial-gradient(90% 120% at 75% 30%, #1b4486 0%, var(--vm-navy-800) 45%, var(--vm-navy-950) 100%); color: var(--vm-on-dark); }
.ss-hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ss-hero--text .ss-hero__inner { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.ss-hero__eyebrow { margin-bottom: 16px; }
.ss-hero__title { color: #fff; margin-bottom: 22px; }
.ss-hero__text { color: #d5def0; font-size: 16px; max-width: 620px; }
.ss-hero__media img { width: 100%; height: auto; }
.ss-hero__logo { max-width: 300px; margin-bottom: 18px; }
.ss-hero .ss-crumbs { margin-bottom: 18px; }
@media (max-width: 960px) { .ss-hero { padding: 140px 0 64px; } .ss-hero__inner { grid-template-columns: 1fr; } }

/* Breadcrumbs */
.ss-crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: #9fb0cf; }
.ss-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.ss-crumbs a { color: #cfe0ff; }

/* Promo strip under the hero (On-demand webinar card) */
.ss-promo { display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin-top: 48px; padding: 18px 24px; border-radius: var(--vm-radius); border: 1px solid rgba(98, 150, 235, .5); background: rgba(10, 31, 71, .55); backdrop-filter: blur(6px); }
.ss-promo__body { flex: 1 1 380px; }
.ss-promo__title { margin: 6px 0 4px; color: #fff; font-family: var(--vm-font-head); font-weight: 500; font-size: 16px; }
.ss-promo__meta { font-size: 13px; color: #a9b8d4; }
.ss-promo__link { display: inline-flex; align-items: center; gap: 10px; color: #7fb0ff; font-size: 14px; font-weight: 600; }

/* Forms */
.ss-form { display: grid; gap: 16px; }
.ss-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.ss-form__field { display: grid; gap: 6px; }
.ss-form__field--full { grid-column: 1 / -1; }
.ss-form label { font-size: 13.5px; font-weight: 600; color: var(--vm-ink); }
.ss-form input:not([type=checkbox]):not([type=radio]):not([type=submit]), .ss-form select, .ss-form textarea {
	width: 100%; padding: 12px 14px; border: 1px solid #cfdbec; border-radius: var(--vm-radius-sm); background: #fff; font-size: 15px; color: var(--vm-ink);
	transition: border-color .2s, box-shadow .2s;
}
.ss-form textarea { min-height: 130px; resize: vertical; }
.ss-form input:focus, .ss-form select:focus, .ss-form textarea:focus { outline: none; border-color: var(--vm-blue-400); box-shadow: 0 0 0 3px rgba(79, 143, 232, .2); }
.ss-form__hp { position: absolute !important; left: -9999px !important; }
.ss-form__note { font-size: 12.5px; color: var(--vm-muted); }
.ss-form__status { padding: 12px 14px; border-radius: var(--vm-radius-sm); font-size: 14px; }
.ss-form__status--sent { background: var(--vm-green-100); color: #1d6b2e; }
.ss-form__status--error { background: #fdecea; color: #a12a1b; }
.ss-section--dark .ss-form label, .ss-panel .ss-form label { color: #fff; }
@media (max-width: 640px) { .ss-form__grid { grid-template-columns: 1fr; } }

/* Prose (legal pages, articles) */
.ss-prose { color: var(--vm-text); font-size: 16.5px; line-height: 1.75; }
.ss-prose h2 { font-size: 26px; margin: 1.6em 0 .6em; }
.ss-prose h3 { font-size: 20px; margin: 1.4em 0 .5em; }
.ss-prose ul, .ss-prose ol { padding-left: 1.3em; }
.ss-prose img { border-radius: var(--vm-radius); }

/* Header: white floating bar over the navy hero (Figma Header V02). */
.ss-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 22px 0 0; transition: padding .25s var(--vm-ease); }
.admin-bar .ss-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ss-header { top: 46px; } }
.ss-header__bar { background: #fff; border-radius: var(--vm-radius); box-shadow: 0 10px 30px rgba(7, 21, 51, .18); }
.ss-header__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 22px; }
.ss-header__logo img { width: 220px; height: auto; }
.ss-header__actions { display: flex; align-items: center; gap: 12px; }
.ss-header__bar { position: relative; }
.ss-header__nav { border-top: 1px solid var(--vm-line); padding: 0 14px; }
/* Val's full page names need ~1300px in one row: the header runs wider than
 * the content column; below 1340px the menu moves into the drawer. */
.ss-header > .ss-container { max-width: 1380px; }
.ss-header.is-scrolled { padding-top: 10px; }
.ss-header { transition: padding .25s var(--vm-ease), transform .3s var(--vm-ease); }
.ss-header.is-hidden { transform: translateY(-130%); }
body.ss-menu-open { overflow: hidden; }
.ss-header__menu { display: none; width: 44px; height: 44px; border: 1px solid var(--vm-line); border-radius: var(--vm-radius-sm); background: #fff; align-items: center; justify-content: center; cursor: pointer; }
.ss-burger { display: grid; gap: 5px; width: 20px; }
.ss-burger span { display: block; height: 2px; background: var(--vm-navy-800); border-radius: 2px; transition: transform .2s, opacity .2s; }
.ss-header__menu[aria-expanded=true] .ss-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ss-header__menu[aria-expanded=true] .ss-burger span:nth-child(2) { opacity: 0; }
.ss-header__menu[aria-expanded=true] .ss-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mega menu (desktop) ----------
 * Each section opens a full-width panel under the header bar: an intro card
 * (section summary + link to the section page) beside icon links with a
 * one-line description. */
.ss-nav__list { display: flex; justify-content: space-between; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ss-nav__list > li { position: static; }
.ss-nav__list > li > a { position: relative; display: flex; align-items: center; gap: 6px; padding: 15px 14px; font-family: var(--vm-font-head); font-size: 15px; font-weight: 500; color: var(--vm-ink); white-space: nowrap; text-decoration: none; }
.ss-nav__list > li > a::before { content: ""; position: absolute; left: 9px; right: 9px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--vm-orange); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--vm-ease); }
.ss-nav__list > li:hover > a, .ss-nav__list > li.is-open > a, .ss-nav__list > li.current-menu-item > a, .ss-nav__list > li.current-menu-ancestor > a { color: var(--vm-blue-600); }
.ss-nav__list > li:hover > a::before, .ss-nav__list > li.is-open > a::before, .ss-nav__list > li.current-menu-ancestor > a::before { transform: scaleX(1); }
.ss-nav__list > li.menu-item-has-children > a::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; transition: transform .2s; }
.ss-nav__list > li:hover > a::after, .ss-nav__list > li.is-open > a::after { transform: translateY(1px) rotate(-135deg); }
.ss-nav__toggle { display: none; }
.ss-nav__panel { position: absolute; left: 0; right: 0; top: 100%; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 5; }
.ss-nav__list > li:hover > .ss-nav__panel, .ss-nav__list > li:focus-within > .ss-nav__panel, .ss-nav__list > li.is-open > .ss-nav__panel { opacity: 1; visibility: visible; transform: none; }
.ss-nav__mega { display: grid; grid-template-columns: minmax(250px, 300px) 1fr; overflow: hidden; background: #fff; border: 1px solid var(--vm-line); border-radius: var(--vm-radius); box-shadow: 0 24px 60px rgba(7, 21, 51, .22); }
.ss-nav__intro { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px; background: radial-gradient(120% 90% at 0% 0%, #1d5bbf 0%, transparent 60%), linear-gradient(160deg, var(--vm-navy-800), var(--vm-navy-950)); color: #fff; }
.ss-nav__intro-eyebrow { margin: 0; color: var(--vm-orange); font-family: var(--vm-font-head); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ss-nav__intro-title { margin: 0; color: #fff; font-family: var(--vm-font-head); font-size: 19px; font-weight: 500; line-height: 1.3; }
.ss-nav__intro-text { margin: 0; color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.55; }
.ss-nav__intro-cta { align-self: flex-start; margin-top: auto; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--vm-radius-sm); color: #fff; font-family: var(--vm-font-head); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: background .2s, border-color .2s; }
.ss-nav__intro-cta:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.ss-nav__sub { list-style: none; margin: 0; padding: 22px; display: grid; gap: 4px 10px; align-content: start; }
.ss-nav__sub--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-nav__sub--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-nav__sub--1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-nav__sub a { display: flex; gap: 14px; align-items: center; height: 100%; padding: 12px 14px; border-radius: var(--vm-radius-sm); color: var(--vm-ink); font-size: 14px; line-height: 1.35; text-decoration: none; transition: background .15s; }
.ss-nav__sub a:hover, .ss-nav__sub a:focus-visible { background: var(--vm-sky-50); }
.ss-nav__icon { flex: none; width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 6px 14px rgba(11, 42, 92, .18); transition: transform .2s var(--vm-ease); }
.ss-nav__sub a:hover .ss-nav__icon { transform: translateY(-2px); }
.ss-nav__sub strong { display: block; font-family: var(--vm-font-head); font-size: 14.5px; font-weight: 500; }
.ss-nav__sub a[aria-current] strong { color: var(--vm-blue-600); }
.ss-nav__sub em { display: block; margin-top: 2px; color: var(--vm-muted); font-size: 12.5px; font-style: normal; }
.ss-nav__badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--vm-orange-100); color: #b45f12; font-family: var(--vm-font-body); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.ss-nav__drawer-cta { display: none; }
@media (min-width: 1341px) and (max-width: 1439px) {
	.ss-header__nav { padding: 0 8px; }
	.ss-nav__list > li > a { padding: 15px 10px; font-size: 14px; }
	.ss-nav__list > li > a::before { left: 7px; right: 7px; }
}

/* ---------- Drawer (tablet & phone) ---------- */
@media (max-width: 1340px) {
	.ss-header__menu { display: inline-flex; }
	.ss-header__nav { position: fixed; inset: 0 0 0 auto; width: min(440px, 100%); padding: 96px 20px 32px; background: #fff; border: 0; box-shadow: -20px 0 40px rgba(7, 21, 51, .2); transform: translateX(100%); transition: transform .3s var(--vm-ease); overflow-y: auto; z-index: -1; }
	.ss-header__nav.is-open { transform: none; }
	.admin-bar .ss-header__nav { padding-top: 142px; }
	.ss-nav__list { flex-direction: column; gap: 0; }
	.ss-nav__list > li { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--vm-line); }
	.ss-nav__list > li > a { padding: 15px 4px; white-space: normal; font-size: 16px; }
	.ss-nav__list > li > a::before, .ss-nav__list > li.menu-item-has-children > a::after { display: none; }
	.ss-nav__toggle { display: inline-flex; width: 44px; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; }
	.ss-nav__toggle::before { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--vm-ink); border-bottom: 2px solid var(--vm-ink); transform: rotate(45deg); transition: transform .2s; }
	.ss-nav__toggle[aria-expanded=true]::before { transform: rotate(-135deg); }
	.ss-nav__panel { grid-column: 1 / -1; position: static; display: none; padding: 0 0 12px; opacity: 1; visibility: visible; transform: none; }
	.ss-nav__list > li.is-open > .ss-nav__panel { display: block; }
	.ss-nav__list > li:hover > .ss-nav__panel { transform: none; }
	.ss-nav__mega { display: block; border: 0; box-shadow: none; border-radius: 0; }
	.ss-nav__intro { display: none; }
	.ss-nav__sub, .ss-nav__sub--1, .ss-nav__sub--2, .ss-nav__sub--3 { grid-template-columns: 1fr; padding: 0; gap: 2px; }
	.ss-nav__sub a { padding: 10px 8px; gap: 12px; }
	.ss-nav__icon { width: 34px; height: 34px; border-radius: 9px; box-shadow: none; }
	.ss-nav__drawer-cta { display: grid; gap: 12px; margin-top: 24px; }
	.ss-header__cta { display: none; }
}
@media (max-width: 600px) { .ss-header { padding-top: 12px; } .ss-header__logo img { width: 170px; } .ss-header__top { padding: 10px 12px; } }

/* Footer (Figma: dark navy, inner rounded panel, 4 columns, legal bar). */
.ss-footer { position: relative; overflow: hidden; isolation: isolate; padding: 56px 0 28px; background: radial-gradient(120% 140% at 20% 0%, #12336a 0%, var(--vm-navy-800) 40%, var(--vm-navy-950) 100%); color: #b9c6de; font-size: 14px; }
.ss-footer__panel { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 32px; padding: 32px; border-radius: var(--vm-radius-lg); border: 1px solid rgba(98, 150, 235, .28); background: rgba(10, 31, 71, .35); }
.ss-footer__logo img { width: 230px; height: auto; margin-bottom: 18px; }
.ss-footer__about { font-size: 13.5px; line-height: 1.7; color: #a9b8d4; }
.ss-footer__title { margin: 0 0 14px; font-family: var(--vm-font-head); font-size: 15px; font-weight: 500; color: #fff; }
.ss-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ss-footer a { color: #b9c6de; }
.ss-footer a:hover { color: #fff; }
.ss-footer__col li a::before { content: "•"; margin-right: 8px; color: #6f86b0; }
.ss-footer__contact li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; }
.ss-footer__contact .ss-footer__ico { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: inline-flex; align-items: center; justify-content: center; }
.ss-footer__contact svg { width: 14px; height: 14px; color: #fff; }
.ss-footer__social { display: flex !important; gap: 10px !important; margin-top: 22px !important; }
.ss-footer__social a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.ss-footer__social svg { width: 16px; height: 16px; }
.ss-footer__bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; margin-top: 22px; padding: 14px 20px; border-radius: var(--vm-radius); background: rgba(255, 255, 255, .05); font-size: 12.5px; }
.ss-footer__legal { display: flex !important; gap: 10px !important; align-items: center; }
.ss-footer__legal li + li::before { content: "|"; margin-right: 10px; opacity: .5; }
@media (max-width: 980px) { .ss-footer__panel { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ss-footer__panel { grid-template-columns: 1fr; padding: 24px; } }

/* Motion layer (main.js adds .ss-motion to <html> only when motion is allowed). */
.ss-motion [data-words] .ss-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.ss-motion [data-words] .ss-word > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--vm-ease); transition-delay: calc(var(--w, 0) * 55ms + .1s); }
.ss-motion [data-words].is-in .ss-word > span { transform: none; }
.ss-motion .ss-hero__eyebrow, .ss-motion .ss-hero__text, .ss-motion .ss-hero__buttons, .ss-motion .ss-hero-stats { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--vm-ease), transform .8s var(--vm-ease); }
.ss-motion .ss-hero.is-in .ss-hero__eyebrow { opacity: 1; transform: none; transition-delay: 0s; }
.ss-motion .ss-hero.is-in .ss-hero__text { opacity: 1; transform: none; transition-delay: .35s; }
.ss-motion .ss-hero.is-in .ss-hero__buttons { opacity: 1; transform: none; transition-delay: .5s; }
.ss-motion .ss-hero.is-in .ss-hero-stats { opacity: 1; transform: none; transition-delay: .65s; }

/* placeholder marker for content still owed by the client */
.ss-todo { display: inline-block; padding: 2px 8px; border-radius: 4px; background: #fff4d6; color: #8a5a00; font-size: 13px; font-weight: 600; }


/* ---------- motion v2: site-wide effects ---------- */
p { text-wrap: pretty; }

/* navy bands: drifting aurora, cursor light, fine grain */
.ss-band__aurora {
	position: absolute; z-index: -1; pointer-events: none; inset: -30% -10%;
	background:
		radial-gradient(30% 40% at 30% 35%, rgba(43, 108, 222, .22), transparent 70%),
		radial-gradient(26% 34% at 72% 62%, rgba(43, 172, 222, .12), transparent 70%);
	animation: ss-aurora 26s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes ss-aurora {
	0% { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
	50% { transform: translate3d(4%, 2%, 0) rotate(6deg) scale(1.08); }
	100% { transform: translate3d(-2%, 4%, 0) rotate(-4deg) scale(1.03); }
}
.ss-band__spot {
	position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
	width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%;
	background: radial-gradient(circle, rgba(107, 168, 255, .2), rgba(107, 168, 255, .06) 40%, transparent 68%);
	opacity: 0; transition: opacity .6s var(--vm-ease); will-change: transform;
}
.ss-band.is-pointer .ss-band__spot { opacity: 1; }
.ss-band__grain {
	position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
	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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px;
}

/* header: tucks away while reading down, returns on the way up */
.ss-header { transition: transform .45s var(--vm-ease), box-shadow .3s var(--vm-ease), background-color .3s; }
.ss-header.is-hidden { transform: translateY(calc(-100% - 48px)); }

/* buttons: magnetic pull (main.js sets the independent `translate`) */
.ss-btn { transition: background-color .25s var(--vm-ease), color .25s var(--vm-ease), border-color .25s, box-shadow .3s var(--vm-ease), transform .3s var(--vm-ease), translate .35s var(--vm-ease); }

/* photo reveal: a wipe from the bottom with a gentle zoom settle */
.ss-motion [data-reveal="mask"]:not(.is-done) {
	opacity: 1; transform: none;
	clip-path: inset(0 0 100% 0 round var(--mask-r, 16px));
	transition: clip-path 1.15s var(--vm-ease); transition-delay: var(--delay, 0s);
}
.ss-motion [data-reveal="mask"].is-in:not(.is-done) { clip-path: inset(0 0 0 0 round var(--mask-r, 16px)); }
.ss-motion [data-reveal="mask"]:not(.is-done) img { transform: scale(1.14); transition: transform 1.5s var(--vm-ease); transition-delay: var(--delay, 0s); }
.ss-motion [data-reveal="mask"].is-in:not(.is-done) img { transform: scale(1); }

/* 3D tilt for opt-in media/cards ([data-tilt]; main.js drives it) */
[data-tilt] { transition: transform .6s var(--vm-ease); }
/* will-change only while tilting: a resting 3D layer can fail to repaint in Chrome */
[data-tilt].is-tilting { transition: transform .12s linear; will-change: transform; }

/* section headings rise word by word like the hero (data-words) */
.ss-motion .ss-head [data-words] .ss-word > span { transition-duration: .8s; transition-delay: calc(var(--w, 0) * 45ms + .15s); }

/* footer + prose links: underline that draws in */
.ss-footer__col a, .ss-footer__legal a { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: opacity .2s, color .2s, background-size .35s var(--vm-ease); }
.ss-footer__col a:hover, .ss-footer__legal a:hover { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
	.ss-band__aurora, .ss-band__spot { animation: none; display: none; }
	.ss-header.is-hidden { transform: none; }
}

/* ---------- motion ---------- */
/* Content is visible by default; main.js adds .ss-motion to <html> and only
   then do these start hidden, so nothing is lost if scripts fail. */
.ss-motion [data-reveal]:not(.is-done) { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--vm-ease), transform .9s var(--vm-ease); transition-delay: var(--delay, 0s); }
.ss-motion [data-reveal="left"]:not(.is-done) { transform: translateX(-36px); }
.ss-motion [data-reveal="right"]:not(.is-done) { transform: translateX(36px); }
.ss-motion [data-reveal="zoom"]:not(.is-done) { transform: scale(.94); }
.ss-motion [data-reveal="fade"]:not(.is-done) { transform: none; }
.ss-motion [data-reveal].is-in:not(.is-done) { opacity: 1; transform: none; }
/* side slides become rise-ups on narrow screens so nothing pokes past the edge */
@media (max-width: 1024px) {
	.ss-motion [data-reveal="left"]:not(.is-done):not(.is-in), .ss-motion [data-reveal="right"]:not(.is-done):not(.is-in) { transform: translateY(28px); }
}
.ss-motion [data-stagger]:not(.is-done) > * { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--vm-ease), transform .7s var(--vm-ease); transition-delay: calc(var(--i, 0) * 80ms + var(--delay, 0s)); }
.ss-motion [data-stagger].is-in:not(.is-done) > * { opacity: 1; transform: none; }
.ss-motion .ss-head .ss-eyebrow__rule { transform: scaleX(0); transition: transform .8s var(--vm-ease) .2s; }
.ss-motion .ss-head.is-in .ss-eyebrow__rule { transform: scaleX(1); }
@keyframes ss-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes ss-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(46, 158, 106, .5); } 100% { box-shadow: 0 0 0 10px rgba(46, 158, 106, 0); } }
@keyframes ss-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ss-dash { to { stroke-dashoffset: -100; } }
/* mask reveals wipe only (the generic fade above would also hide them) */
.ss-motion [data-reveal="mask"]:not(.is-done):not(.is-in) { opacity: 1; transform: none; }
/* closing CTA: wrapped button rows fill evenly between 1025 and 1280 */
@media (min-width: 1025px) and (max-width: 1280px) { .ss-cta-form .ss-btn-row .ss-btn { flex: 1 1 auto; } }
/* certification chips: a touch tighter so the last one doesn't wrap alone */
@media (max-width: 1280px) { .ss-stats__chips { gap: 10px; } .ss-stats__chips .ss-chip { padding: 10px 13px; font-size: 13px; gap: 8px; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.ss-motion [data-reveal], .ss-motion [data-stagger] > * { opacity: 1; transform: none; }
	.ss-logos__list { animation: none; flex-wrap: wrap; justify-content: center; gap: 24px 48px; width: auto; padding-inline: var(--vm-gutter); }
}


/* Scroll progress */
.ss-progress { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none; }
.ss-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--vm-orange), var(--vm-green)); }

/* Tabs (Plan / Execute / Analyze / Transform, service tabs) */
.ss-tabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 32px; padding: 6px; list-style: none; background: var(--vm-sky-100); border-radius: 999px; width: fit-content; margin-left: auto; margin-right: auto; }
.ss-tabs__tab { padding: 10px 22px; border: 0; border-radius: 999px; background: transparent; font-family: var(--vm-font-head); font-size: 14px; font-weight: 500; color: var(--vm-ink); cursor: pointer; }
.ss-tabs__tab[aria-selected=true] { background: var(--vm-navy-800); color: #fff; }
.ss-tabs__panel[hidden] { display: none; }
.ss-section--dark .ss-tabs__list { background: rgba(255, 255, 255, .08); }
.ss-section--dark .ss-tabs__tab { color: #dbe5f6; }
.ss-section--dark .ss-tabs__tab[aria-selected=true] { background: var(--vm-orange); color: #fff; }

/* Accordion (FAQs) */
.ss-accordion { border-top: 1px solid var(--vm-line); }
.ss-acc { border-bottom: 1px solid var(--vm-line); }
.ss-acc__btn { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; background: none; border: 0; text-align: left; font-family: var(--vm-font-head); font-size: 17px; font-weight: 500; color: var(--vm-ink); cursor: pointer; }
.ss-acc__btn::after { content: "+"; font-size: 24px; line-height: 1; color: var(--vm-orange); transition: transform .2s; }
.ss-acc__btn[aria-expanded=true]::after { transform: rotate(45deg); }
.ss-acc__panel { overflow: hidden; transition: height .3s var(--vm-ease); }
.ss-acc__body { padding: 0 0 20px; }
.ss-acc__panel[hidden] { display: none; }

/* Logo strips (awards, customers) */
.ss-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.ss-logos__item { display: flex; align-items: center; justify-content: center; width: 150px; height: 120px; padding: 14px; border-radius: var(--vm-radius); background: #f2f7fd; border: 1px solid var(--vm-line); }
.ss-logos__item img { max-height: 92px; width: auto; object-fit: contain; }
.ss-logos--plain .ss-logos__item { background: #fff; width: 172px; height: 96px; }
.ss-logos--plain .ss-logos__item img { max-height: 64px; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.ss-logos--plain .ss-logos__item:hover img { filter: none; opacity: 1; }

/* Placeholder for art Design hasn't delivered yet (visible only on the dev site) */
.ss-art-todo { display: grid; place-items: center; min-height: 260px; padding: 24px; border-radius: var(--vm-radius-lg); border: 2px dashed rgba(98, 150, 235, .5); background: repeating-linear-gradient(45deg, rgba(79, 143, 232, .05) 0 12px, transparent 12px 24px); color: var(--vm-muted); font-size: 13px; text-align: center; }
.ss-section--dark .ss-art-todo, .ss-hero .ss-art-todo { color: #a9b8d4; }
.ss-header__blog { font-family: var(--vm-font-head); font-size: 13.5px; font-weight: 500; color: var(--vm-ink); margin-right: 6px; }
.ss-header__blog:hover { color: var(--vm-blue-600); }
@media (max-width: 1320px) { .ss-header__cta--contact { display: none; } }
@media (max-width: 1180px) { .ss-header__blog { display: none; } }

/* ---------- page transitions (sitewide) ----------
   Native cross-document View Transitions: on a same-site navigation the old page fades out and
   eases up slightly while the new one fades in and rises into place. The header has its own
   transition name, so it stays put instead of fading. Browsers without support simply load the
   page as before; reduced-motion visitors get no animation. */
@view-transition { navigation: auto; }
.ss-header { view-transition-name: ss-header; }
.ss-totop { view-transition-name: ss-totop; }
::view-transition-old(root) { animation: ss-vt-out .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: ss-vt-in .5s cubic-bezier(.22, .61, .36, 1) both; }
::view-transition-group(ss-header), ::view-transition-group(ss-totop) { animation-duration: .35s; }
@keyframes ss-vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes ss-vt-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}