/*
 * Enhancement CSS — only what theme.json cannot express in 6.9, plus a few
 * logical-property scaffolds used by the M2 pattern scaffolds. Visual design is
 * intentionally minimal here (final design is a later milestone).
 */

/* ============================================================
   DESIGN TOKENS — semantic layer (single source of truth; see DESIGN.md).
   Colors map to the theme.json palette (so they stay editor-available + RTL-safe);
   the fluid type scale, spacing scale, depth + divider accent live here. ALL new
   section work references these — no raw hex/px in section CSS.
   ============================================================ */
:root {
	/* Color — anchors + the single amber accent (CTAs/eyebrows only) + two warm neutrals */
	--c-navy-900: var(--wp--preset--color--navy-900); /* deepest — dark sections */
	--c-navy-800: var(--wp--preset--color--navy);     /* brand navy */
	--c-navy-600: var(--wp--preset--color--primary);  /* secondary (deep teal) */
	--c-blue-100: var(--wp--preset--color--surface);  /* existing pale tint */
	--c-amber:    var(--wp--preset--color--accent);
	--c-amber-dark: var(--wp--preset--color--accent-dark);
	--c-sand:     var(--wp--preset--color--sand);      /* warm neutral — breaks cold-blue monotony */
	--c-stone:    var(--wp--preset--color--stone);
	--c-ink:      var(--wp--preset--color--ink);
	--c-ink-muted: var(--wp--preset--color--body);
	--c-paper:    var(--wp--preset--color--base);
	--divider-accent: linear-gradient(90deg, var(--c-amber), transparent);

	/* Fluid type scale (clamp). --lede sits between body and h2. */
	--step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
	--step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--lede:    clamp(1.2rem, 1.05rem + 0.60vw, 1.45rem);
	--step-1:  clamp(1.4rem, 1.20rem + 0.90vw, 1.85rem);
	--step-2:  clamp(1.75rem, 1.40rem + 1.60vw, 2.6rem);
	--step-3:  clamp(2.2rem, 1.60rem + 2.80vw, 3.6rem);
	--step-4:  clamp(2.8rem, 1.90rem + 4.00vw, 5rem);

	/* Spacing scale — section rhythm (replaces ad-hoc paddings) */
	--space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem;
	--space-s: 1rem; --space-m: 1.5rem; --space-l: 2.5rem;
	--space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem;

	/* Depth — layered shadows (sm aliases the theme preset; md/lg are deeper for real elevation) */
	--shadow-sm: var(--wp--preset--shadow--sm);
	--shadow-md: 0 8px 24px -8px rgb(15 40 64 / .18);
	--shadow-lg: 0 24px 60px -16px rgb(15 40 64 / .28);
	--radius-s: var(--wp--custom--border-radius--md);
	--radius-m: var(--wp--custom--border-radius--lg);
	--radius-l: var(--wp--custom--border-radius--xl);
}

/* Input/select/textarea/search :focus-visible ring (not expressible in theme.json v3 on 6.9). */
:where(input, select, textarea, .wp-block-search__input):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Skip link visible on focus. */
.skip-link:focus {
	position: fixed;
	inset-block-start: var(--wp--preset--spacing--20);
	inset-inline-start: var(--wp--preset--spacing--20);
	z-index: 1000;
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

/* Lede paragraph utility (used on legal/policy pages + anywhere an intro needs the lede size). */
.innovant-lede { font-size: var(--lede); line-height: 1.55; color: var(--c-ink); max-inline-size: 70ch; }
.innovant-legal-updated { color: var(--c-ink-muted); font-size: var(--step--1); }

/* ---------- Typographic craft (modern text shaping — progressive; older browsers ignore it) ---------- */
/* balance: even line lengths on headlines, no lonely last word. pretty: better body rag + no orphans.
 * Both are layout-shaping only (not motion) and work the same in LTR + RTL. */
:where(h1, h2, h3, h4, h5, h6, .wp-block-heading, .innovant-hero__title, .innovant-guide-hero__title, .innovant-section-head__title) { text-wrap: balance; }
:where(.innovant-article-body, .wp-block-post-content, .innovant-section-head, .wp-block-post-excerpt) p,
.innovant-article-body li { text-wrap: pretty; }

/* --- Scaffold component primitives (logical properties only, direction-agnostic) --- */
.innovant-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--border-radius--md);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	block-size: 100%;
}

.innovant-chip,
.innovant-meta__chip {
	display: inline-flex;
	align-items: center;
	border-radius: var(--wp--custom--border-radius--pill);
	padding-block: 2px;
	padding-inline: 10px;
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
}

/* FAQ accordion scaffold uses native <details>; minimal affordance only. */
.innovant-faq details {
	border-block-end: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--30);
}
.innovant-faq summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* Anchor-tab nav scaffold (sticky sub-nav; full Interactivity behavior in M3). */
.innovant-tabnav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--preset--color--line);
	padding-block-end: var(--wp--preset--spacing--20);
}

/* Filter-bar shell placeholder (FacetWP mounts in M4). */
.innovant-filterbar {
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--wp--custom--border-radius--md);
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
}

/* --- M3 detail anatomy (structural scaffolding; final polish is a later pass) --- */

/* Two-column detail layout: main + sticky sidebar (reflows to one column on mobile). */
.innovant-detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}
@media (max-width: 781px) {
	.innovant-detail { grid-template-columns: 1fr; }
	.innovant-detail__aside { order: 2; }
}
.innovant-detail__aside {
	position: sticky;
	inset-block-start: var(--wp--preset--spacing--60);
}

.innovant-section { margin-block: var(--wp--preset--spacing--60); }

/* Sticky anchor-tab nav + active state. */
.innovant-tabnav {
	position: sticky;
	inset-block-start: 0;
	background: var(--wp--preset--color--base);
	z-index: 1;
	gap: var(--wp--preset--spacing--40);
}
.innovant-tabnav__link { text-decoration: none; padding-block: var(--wp--preset--spacing--20); border-block-end: 2px solid transparent; }
.innovant-tabnav__link[aria-current="true"] { border-block-end-color: var(--wp--preset--color--primary); font-weight: 600; }

.innovant-list { padding-inline-start: 1.2em; }
.innovant-list li { margin-block: var(--wp--preset--spacing--20); }

.innovant-steps { list-style: none; padding-inline-start: 0; counter-reset: step; display: grid; gap: var(--wp--preset--spacing--40); }
.innovant-step { counter-increment: step; padding-inline-start: 2.4em; position: relative; }
.innovant-step::before {
	content: counter(step);
	position: absolute; inset-inline-start: 0; inset-block-start: 0;
	inline-size: 1.7em; block-size: 1.7em; line-height: 1.7em; text-align: center;
	border-radius: var(--wp--custom--border-radius--pill);
	background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--sm);
}

.innovant-stats,
.innovant-related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}
@media (max-width: 781px) { .innovant-stats, .innovant-related-grid { grid-template-columns: 1fr; } }
.innovant-stat__value { font-weight: 700; color: var(--wp--preset--color--ink); }
.innovant-stat__label { color: var(--wp--preset--color--muted); }

.innovant-related-card { text-decoration: none; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.innovant-related-card__title { color: var(--wp--preset--color--ink); font-weight: 600; }

.innovant-compare { inline-size: 100%; border-collapse: collapse; }
.innovant-compare td { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); border-block-end: 1px solid var(--wp--preset--color--line); }
.innovant-compare td:last-child { text-align: end; inline-size: 3em; }

/* Sticky CTA card in the sidebar. */
.innovant-cta-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--border-radius--md);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
}

/* Archive: result count (aria-live) + card chips. */
.innovant-resultcount { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); }

/* =========================================================================
   BRAND ALIGNMENT (M3 brand patch) — overrides earlier scaffold values to the
   real Innovant tokens. Source of truth: resources/brand.
   ========================================================================= */

/* Focus ring → Deep Teal (brand primary). M7 a11y: Mid-Blue #5690CC is ~2.9:1 on
   white (below the 3:1 non-text floor); primary teal #0B689A is ~4.9:1 and passes. */
:where(input, select, textarea, .wp-block-search__input):focus-visible {
	outline-color: var(--wp--preset--color--primary);
}

/* M7 a11y: a visible focus-visible ring on ALL interactive chrome, not just inputs. */
:where(a, button, .wp-element-button, summary, [tabindex]):focus-visible,
.wp-block-navigation a:focus-visible,
.innovant-langswitch__link:focus-visible,
.innovant-tabnav__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* M7 a11y fix: on the teal CTA band + navy footer the teal ring would be
   invisible (teal-on-teal ~1:1); use a white ring there (~6:1 teal, ~12:1 navy). */
.innovant-cta-band :where(a, button, .wp-element-button):focus-visible,
.innovant-footer :where(a, button, .wp-element-button):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* M7 a11y: honor reduced-motion for transitions + scroll behaviors. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Cards → 12px radius (brand) + soft navy-tinted shadow. */
.innovant-card {
	border-radius: var(--wp--custom--border-radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
	transition: box-shadow 250ms cubic-bezier(0.2, 0, 0.2, 1);
}
.innovant-card:hover { box-shadow: var(--wp--preset--shadow--md); }

/* Eyebrow — uppercase teal, wide tracking (brand). */
.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* Primary nav → ALL CAPS (brand convention). */
.innovant-header .wp-block-navigation a,
.innovant-header .wp-block-navigation .wp-block-navigation-item__label {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
}

/* Logo — fixed height, auto width (never distort the ratio); min size respected by source asset. */
.innovant-header .wp-block-site-logo img {
	block-size: 44px;
	inline-size: auto;
	max-inline-size: none;
}

/* Subtle brand pattern on the teal CTA band (background texture only, low opacity). */
.innovant-cta-band { position: relative; isolation: isolate; }
.innovant-cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("../images/patterns/pattern-n.png");
	background-size: 360px auto;
	background-repeat: repeat;
	opacity: 0.5;
	mix-blend-mode: soft-light;
	pointer-events: none;
}

/* Anchor-tab active uses Mid-Blue underline to match link color. */
.innovant-tabnav__link[aria-current="true"] { border-block-end-color: var(--wp--preset--color--primary); }

/* =========================================================================
   M4 — filter / search layer (core-WP fallback; brand-styled, accessible).
   ========================================================================= */
.innovant-filters {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--border-radius--lg);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
}
.innovant-filters__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}
.innovant-filters__field { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); margin: 0; }
.innovant-filters__field label,
.innovant-filters__group legend {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.innovant-filters input[type="search"],
.innovant-filters select {
	padding: 8px 10px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--border-radius--md);
	background: var(--wp--preset--color--base);
	min-block-size: 44px;
}
.innovant-filters__group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }
.innovant-filters__check { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--sm); min-block-size: 32px; }
.innovant-filters__check.is-ghost { opacity: 0.5; } /* zero-result option: aria-disabled, still focusable */
.innovant-filters__count { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--xs); }
.innovant-filters__actions { display: flex; align-items: center; gap: var(--wp--preset--spacing--40); margin-block-start: var(--wp--preset--spacing--40); }
.innovant-filters__clear { font-size: var(--wp--preset--font-size--sm); }
.innovant-resultcount { margin-block: var(--wp--preset--spacing--30); }

/* Footer brand logo (white variant on navy). */
.innovant-brand-logo { display: inline-flex; }
.innovant-brand-logo img { display: block; }

/* =========================================================================
   M5 — language switcher (text-only, a11y, RTL-aware via logical properties).
   ========================================================================= */
.innovant-langswitch__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
}
.innovant-langswitch__item + .innovant-langswitch__item {
	border-inline-start: 1px solid var(--wp--preset--color--line);
	padding-inline-start: var(--wp--preset--spacing--20);
}
.innovant-langswitch__link { text-decoration: none; color: var(--wp--preset--color--muted); }
.innovant-langswitch__link.is-current { color: var(--wp--preset--color--primary); font-weight: 600; }
.innovant-langswitch__link:hover { color: var(--wp--preset--color--primary); }

/* =========================================================================
   M6 — lead forms (brand-styled, accessible, RTL-safe via logical properties).
   ========================================================================= */
.innovant-form {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-inline-size: 640px;
	margin-block-start: var(--wp--preset--spacing--40);
}
.innovant-form__field { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); margin: 0; }
.innovant-form__field label { font-weight: 600; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--sm); }
.innovant-form input[type="text"],
.innovant-form input[type="email"],
.innovant-form input[type="tel"],
.innovant-form select,
.innovant-form textarea {
	inline-size: 100%;
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--border-radius--md);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	min-block-size: 48px;
	font: inherit;
}
.innovant-form textarea { min-block-size: 120px; resize: vertical; }
.innovant-form__req { color: var(--wp--preset--color--danger); }
.innovant-form__consent label { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--20); font-weight: 400; }
.innovant-form__consent input { min-block-size: 0; inline-size: auto; margin-block-start: 4px; }
.innovant-form__actions { margin-block-start: var(--wp--preset--spacing--20); }

/* Honeypot: removed from view + a11y tree, still in the DOM for bots. */
.innovant-form__hp {
	position: absolute !important;
	inline-size: 1px; block-size: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Per-field validation error (a11y: paired via aria-describedby). */
.innovant-form__err { display: block; color: var(--wp--preset--color--danger); font-size: var(--wp--preset--font-size--sm); margin-block-start: var(--wp--preset--spacing--10); }
.innovant-form [aria-invalid="true"] { border-color: var(--wp--preset--color--danger); }

/* FAQ question heading: inherit the summary's inline appearance (h3 added for a11y). */
.innovant-faq__q { display: inline; margin: 0; font-size: inherit; font-weight: 600; color: inherit; }

/* Confirmation / error banners. */
.innovant-form__notice {
	border-radius: var(--wp--custom--border-radius--md);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--40);
	border-inline-start: 4px solid var(--wp--preset--color--success);
	background: var(--wp--preset--color--surface);
}
.innovant-form__notice.is-error { border-inline-start-color: var(--wp--preset--color--danger); }

/* =========================================================================
   VISUAL DESIGN LAYER — brand-aligned site design (local visual completion).
   Tokens: teal #0B689A / navy #1B3A5C / amber #D4882E / surface #F5F7F9.
   ========================================================================= */

/* Bidi-isolated numeric/symbol tokens (fixes "17+ years" -> "years +17" in RTL). */
.innovant-num { unicode-bidi: isolate; }

/* Never synthesize faux-bold on the display face (Rimouski ships one semibold file,
   declared as a 400–700 range; IBM Plex Sans Arabic has real 600/700). */
h1, h2, h3, h4, .wp-block-heading,
.innovant-hero__title, .innovant-section-head__title, .innovant-archive-hero__title,
.innovant-guide-hero__title, .innovant-cta-band__title, .innovant-trust__chip,
.innovant-numcard__n, .innovant-kindex__num, .innovant-journey__n { font-synthesis-weight: none; }

/* ---------- Buttons ---------- */
.innovant-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 13px 26px; border-radius: var(--wp--custom--border-radius--md);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm); font-weight: 600; letter-spacing: 0.02em;
	text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
	transition: transform 160ms cubic-bezier(.2,0,.2,1), background-color 160ms, box-shadow 160ms, color 160ms;
}
.innovant-btn--amber { background: var(--wp--preset--color--accent); color: #10243A; }
.innovant-btn--amber:hover { background: var(--wp--preset--color--accent-dark); color: #0C1B2C; transform: translateY(-1px); box-shadow: var(--wp--preset--shadow--md); }
.innovant-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.innovant-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }

/* ---------- Header (Deep Teal, sticky) ---------- */
/* The header part is wrapped by core in <header class="wp-block-template-part">, whose box is only as
 * tall as the header — that TRAPPED the inner sticky .innovant-header (a sticky element can only
 * travel within its containing block), so the header scrolled away despite position:sticky. Fix: make
 * the WRAPPER the sticky element (its containing block is the full-height .wp-site-blocks) and keep
 * .innovant-header as the in-flow visual bar. (display:contents on the wrapper also unlocks sticking
 * but stalls the inner's inv-header-in entry animation in Chromium — confirmed — so we avoid it.)
 * Only the header part renders as <header> (the footer part is <footer>), so this selector is safe. */
header.wp-block-template-part { position: sticky; inset-block-start: 0; z-index: 100; }
.innovant-header {
	position: relative; /* positioned for the scroll-progress bar + nav submenus; the wrapper is sticky */
	background: var(--wp--preset--color--primary);
	box-shadow: 0 1px 0 rgba(255,255,255,.08), var(--wp--preset--shadow--sm);
}
.innovant-header__bar {
	display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--50);
	padding-block: 14px; padding-inline: var(--wp--preset--spacing--50);
}
.innovant-header__brand img { display: block; height: 40px; width: auto; }
.innovant-header__actions { display: flex; align-items: center; gap: var(--wp--preset--spacing--40); }

/* Primary nav (ALL CAPS, amber active underline) */
.innovant-primary-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--wp--preset--spacing--50); align-items: center; }
.innovant-primary-nav__link {
	display: inline-block; text-decoration: none; color: rgba(255,255,255,.84);
	font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
	padding-block: 6px; border-block-end: 2px solid transparent; transition: color 150ms, border-color 150ms;
}
.innovant-primary-nav__link:hover { color: #fff; }
.innovant-primary-nav__link.is-current { color: #fff; border-block-end-color: var(--wp--preset--color--accent); }

/* ---- Mega-menu: CPT submenus under Services / Platforms / Sectors ---- */
.innovant-primary-nav__item { display: flex; align-items: center; }
.innovant-primary-nav__item--parent { position: relative; }
.innovant-primary-nav__toggle {
	display: inline-flex; align-items: center; justify-content: center;
	margin-inline-start: 1px; padding: 8px 6px; border: 0; background: transparent; cursor: pointer; line-height: 0;
}
.innovant-primary-nav__chevron {
	inline-size: 7px; block-size: 7px;
	border-inline-end: 2px solid rgba(255,255,255,.7); border-block-end: 2px solid rgba(255,255,255,.7);
	transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--inv-ease), border-color .15s;
}
.innovant-primary-nav__item--parent:hover .innovant-primary-nav__chevron,
.innovant-primary-nav__item--parent:focus-within .innovant-primary-nav__chevron,
.innovant-primary-nav__toggle[aria-expanded="true"] .innovant-primary-nav__chevron { border-color: #fff; transform: translateY(1px) rotate(-135deg); }
.innovant-primary-nav__submenu {
	position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 50;
	margin: 8px 0 0; padding: 10px; list-style: none;
	min-inline-size: 25rem; max-inline-size: min(34rem, 92vw);
	display: grid; grid-template-columns: repeat(2, minmax(10rem, 1fr)); gap: 2px 8px;
	background: #fff; border-radius: 14px; box-shadow: 0 18px 50px -12px rgba(16,40,64,.28);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .22s var(--inv-ease), transform .22s var(--inv-ease), visibility .22s;
}
.innovant-primary-nav__item--parent:hover > .innovant-primary-nav__submenu,
.innovant-primary-nav__item--parent:focus-within > .innovant-primary-nav__submenu,
.innovant-primary-nav__toggle[aria-expanded="true"] + .innovant-primary-nav__submenu { opacity: 1; visibility: visible; transform: none; }
.innovant-primary-nav__subitem { margin: 0; }
.innovant-primary-nav__sublink {
	display: block; text-decoration: none; border-radius: 8px; padding: 9px 12px;
	color: var(--wp--preset--color--primary, #0B689A); font-size: var(--wp--preset--font-size--sm); font-weight: 500; line-height: 1.3;
	transition: background-color .15s, color .15s;
}
.innovant-primary-nav__sublink:hover, .innovant-primary-nav__sublink:focus-visible { background: #EAF2F8; color: var(--wp--preset--color--primary, #0B689A); outline: none; }
@media (prefers-reduced-motion: reduce) {
	.innovant-primary-nav__submenu { transform: none; transition: opacity .15s linear, visibility .15s; }
	.innovant-primary-nav__chevron { transition: border-color .15s; }
}

/* Header search (compact, on teal) */
.innovant-header__search .wp-block-search__inside-wrapper {
	border: 1px solid rgba(255,255,255,.28); border-radius: var(--wp--custom--border-radius--pill);
	background: rgba(255,255,255,.10); overflow: hidden;
}
.innovant-header__search .wp-block-search__input { background: transparent; border: 0; color: #fff; min-block-size: 38px; max-inline-size: 150px; }
.innovant-header__search .wp-block-search__input::placeholder { color: rgba(255,255,255,.65); }
.innovant-header__search .wp-block-search__button { background: transparent; color: #fff; border: 0; }

/* Header language switcher + CTA on teal */
.innovant-header .innovant-langswitch__link { color: rgba(255,255,255,.84); }
.innovant-header .innovant-langswitch__link.is-current,
.innovant-header .innovant-langswitch__link:hover { color: #fff; }
.innovant-header .innovant-langswitch__item + .innovant-langswitch__item { border-inline-start-color: rgba(255,255,255,.3); }
.innovant-header__actions > *,
.innovant-header__actions .wp-block-buttons,
.innovant-header__actions .wp-block-button { margin: 0; flex-shrink: 0; }
.innovant-header .wp-block-button__link {
	display: inline-block; background: var(--wp--preset--color--accent); color: #10243A; border-radius: var(--wp--custom--border-radius--md);
	font-weight: 700; padding: 11px 20px; line-height: 1.2; white-space: nowrap; transition: background-color 150ms, transform 150ms;
}
.innovant-header .wp-block-button__link:hover { background: var(--wp--preset--color--accent-dark); color: #0C1B2C; transform: translateY(-1px); }

/* ---------- Hero (Deep Teal + brand pattern) ---------- */
.innovant-hero {
	position: relative; isolation: isolate; overflow: hidden;
	background: var(--wp--preset--color--primary); color: #fff;
	padding-block: clamp(56px, 8vw, 104px); padding-inline: var(--wp--preset--spacing--50);
}
.innovant-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image: url("../images/patterns/pattern-1.png");
	background-size: 520px auto; background-position: top left; background-repeat: repeat;
	opacity: 0.10; mix-blend-mode: screen; pointer-events: none;
}
.innovant-hero::after {
	content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 40%; z-index: -1;
	background: linear-gradient(180deg, transparent, rgba(16,37,64,.28)); pointer-events: none;
}
.innovant-hero__inner { max-inline-size: 1180px; margin-inline: auto; }
.innovant-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.innovant-hero__main { min-inline-size: 0; }
/* .eyebrow is (re)declared later with color:primary at equal specificity — qualify with .eyebrow so the accent wins on the dark hero (else the eyebrow renders teal-on-teal = invisible). */
.innovant-hero__eyebrow.eyebrow { color: var(--wp--preset--color--accent); margin: 0 0 var(--wp--preset--spacing--40); }
.innovant-hero__title {
	font-family: var(--wp--preset--font-family--display); font-weight: 700; color: #fff;
	font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.1; letter-spacing: -0.01em;
	margin: 0; max-inline-size: 18ch;
}
.innovant-hero__lead { font-size: var(--wp--preset--font-size--lg); line-height: 1.6; color: rgba(255,255,255,.84); max-inline-size: 60ch; margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--60); }
.innovant-hero__cta { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin-block-end: var(--wp--preset--spacing--70); }
.innovant-hero__stats { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 72px); padding-block-start: var(--wp--preset--spacing--50); border-block-start: 1px solid rgba(255,255,255,.16); }
.innovant-hero__stat-n { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--2xl); font-weight: 700; color: #fff; }
.innovant-hero__stat-l { font-size: var(--wp--preset--font-size--xs); color: rgba(255,255,255,.86); letter-spacing: 0.04em; margin-block-start: 4px; }

/* Hero signature panel — glass "knowledge base" index card */
.innovant-hero__panel {
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
	border-radius: var(--wp--custom--border-radius--lg); padding: var(--wp--preset--spacing--50);
	backdrop-filter: blur(2px); box-shadow: 0 24px 48px -24px rgba(8,22,40,.55);
}
.innovant-hero__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block-end: var(--wp--preset--spacing--30); margin-block-end: var(--wp--preset--spacing--20); border-block-end: 1px solid rgba(255,255,255,.16); }
.innovant-hero__panel-eyebrow { color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.innovant-hero__panel-count { color: rgba(255,255,255,.78); font-size: var(--wp--preset--font-size--xs); white-space: nowrap; }
.innovant-hero__panel-list { list-style: none; margin: 0; padding: 0; }
.innovant-hero__panel-list li + li { border-block-start: 1px solid rgba(255,255,255,.10); }
.innovant-hero__panel-list a { display: flex; align-items: center; gap: 14px; padding-block: 11px; color: rgba(255,255,255,.92); text-decoration: none; transition: color 150ms; }
.innovant-hero__panel-list a:hover { color: #fff; }
.innovant-hero__panel-n { font-family: var(--wp--preset--font-family--display); font-weight: 700; color: rgba(255,255,255,.45); min-inline-size: 2.2ch; font-size: 1.05rem; }
.innovant-hero__panel-list a:hover .innovant-hero__panel-n { color: var(--wp--preset--color--accent); }
.innovant-hero__panel-name { flex: 1; min-inline-size: 0; font-size: var(--wp--preset--font-size--sm); font-weight: 500; }
.innovant-hero__panel-c { color: rgba(255,255,255,.6); font-size: var(--wp--preset--font-size--xs); }
.innovant-hero__panel-all { display: inline-flex; align-items: center; gap: 8px; margin-block-start: var(--wp--preset--spacing--40); color: var(--wp--preset--color--accent); font-weight: 600; font-size: var(--wp--preset--font-size--sm); text-decoration: none; }
.innovant-hero__panel-all:hover { color: #fff; }

/* ---------- Home sections + section head ---------- */
.innovant-home-section {
	/* Spacing scale (Task 3): generous, token-driven section rhythm — no more uniform ~80px. */
	padding-block: clamp(var(--space-xl), 6vw, var(--space-3xl));
	padding-inline: var(--wp--preset--spacing--50);
	/* ONE calm light surface (Task 3): the sand/blue alternation is retired; every light section uses
	   this single token, so there is no second accidental off-white. Dark bands are the only punctuation. */
	background-color: var(--c-blue-100);
	/* ONE recurring motif from this single source: a faint geometric dot-grid unifying all sections. */
	background-image: radial-gradient(rgba(15, 40, 64, .05) 1px, transparent 1px);
	background-size: 26px 26px;
}
/* Dark "loud" sections keep the motif as faint light dots over navy (re-added because the navy bg
   shorthand resets background-image). */
.innovant-band--navy { background-color: var(--c-navy-900); background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 26px 26px; }
/* Spacing VARIATION for grouping: tighten related/minor bands, keep majors generous. */
.innovant-trust-band { padding-block: var(--space-l); }                 /* thin logo strip — minor */
.innovant-faq-section { padding-block-start: var(--space-l); }          /* grouped under "Latest guidance" */
.innovant-band--alt { background: #EAF2F8; border-block: 0; box-shadow: inset 0 1px 0 rgba(11,104,154,.07), inset 0 -1px 0 rgba(11,104,154,.07); } /* soft-edged teal-tint band for section rhythm */
.innovant-home-section > * { max-inline-size: 1180px; margin-inline: auto; }
/* Left-aligned editorial section heads (override the centering applied to section children). */
.innovant-home-section .innovant-section-head { max-inline-size: 720px; margin-inline: 0; margin-block-end: var(--wp--preset--spacing--60); }
.innovant-section-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.innovant-section-head .eyebrow::before { content: ""; inline-size: 28px; block-size: 2px; background: var(--wp--preset--color--accent); display: inline-block; }
.innovant-section-head__title { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.85rem, 3.4vw, 2.7rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--wp--preset--color--ink); margin: var(--wp--preset--spacing--30) 0 0; }
.innovant-section-head__intro { font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--body); line-height: 1.6; margin-block-start: var(--wp--preset--spacing--30); }

/* ---------- Grids ---------- */
.innovant-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50); }

/* ---------- Service cards ---------- */
.innovant-svc-card {
	display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50); text-decoration: none;
	background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--border-radius--lg); box-shadow: var(--wp--preset--shadow--sm);
	transition: transform 200ms cubic-bezier(.2,0,.2,1), box-shadow 200ms, border-color 200ms;
}
.innovant-svc-card:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lg); border-color: var(--wp--preset--color--blue); }
.innovant-svc-card__ico { display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border-radius: var(--wp--custom--border-radius--md); background: var(--wp--preset--color--teal-tint, rgba(11,104,154,.08)); color: var(--wp--preset--color--primary); }
.innovant-svc-card__icon { inline-size: 26px; block-size: 26px; }
.innovant-svc-card__title { font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--ink); margin: 0; font-weight: 600; }
.innovant-svc-card__desc { color: var(--wp--preset--color--body); font-size: var(--wp--preset--font-size--sm); line-height: 1.6; margin: 0; flex: 1; }
.innovant-svc-card__more { color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--sm); font-weight: 600; }
.innovant-svc-card:hover .innovant-svc-card__more { color: var(--wp--preset--color--accent-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Post / content cards (with media) ---------- */
.innovant-post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; text-decoration: none; }
.innovant-post-card__media { display: block; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--wp--preset--color--surface); }
.innovant-post-card__media.is-placeholder { background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--navy)); position: relative; }
.innovant-post-card__media.is-placeholder::after { content: ""; position: absolute; inset: 0; background-image: url("../images/patterns/pattern-2.png"); background-size: 240px; opacity: .18; mix-blend-mode: screen; }
.innovant-post-card__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--40); }
.innovant-post-card__title { color: var(--wp--preset--color--ink); font-weight: 600; font-size: var(--wp--preset--font-size--lg); line-height: 1.3; }
.innovant-post-card__more { color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--sm); font-weight: 600; margin-block-start: auto; }
.innovant-chip { align-self: flex-start; }

/* ---------- CTA band (Authority Navy) ---------- */
.innovant-cta-band {
	position: relative; isolation: isolate; overflow: hidden;
	background: var(--wp--preset--color--navy); color: #fff; text-align: center;
	padding-block: clamp(48px, 7vw, 80px); padding-inline: var(--wp--preset--spacing--50);
}
.innovant-cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("../images/patterns/pattern-3.png"); background-size: 360px; opacity: .10; mix-blend-mode: screen; }
.innovant-cta-band__inner { max-inline-size: 760px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--30); }
.innovant-cta-band__title { color: #fff; font-family: var(--wp--preset--font-family--display); margin: 0; }
.innovant-cta-band__sub { color: rgba(255,255,255,.8); margin: 0; }
.innovant-cta-band .wp-block-button__link { background: var(--wp--preset--color--accent); color: #10243A; border-radius: var(--wp--custom--border-radius--md); font-weight: 700; padding: 13px 28px; transition: background-color 150ms, transform 150ms; }
.innovant-cta-band .wp-block-button__link:hover { background: var(--wp--preset--color--accent-dark); color: #0C1B2C; transform: translateY(-1px); }

/* ---------- Footer (Navy) ---------- */
.innovant-footer { position: relative; isolation: isolate; background: var(--wp--preset--color--navy); color: rgba(255,255,255,.8); padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50); padding-inline: var(--wp--preset--spacing--50); }
/* Same hero chevron texture, tiled full-coverage + subtle (screen blend over navy). */
.innovant-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("../images/patterns/pattern-1.png"); background-size: 520px auto; background-repeat: repeat; background-position: top left; opacity: .06; mix-blend-mode: screen; }
.innovant-footer__top { max-inline-size: 1180px; margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--wp--preset--spacing--60); }
.innovant-footer__brandcol img { margin-block-end: var(--wp--preset--spacing--30); }
.innovant-footer__tag { font-size: var(--wp--preset--font-size--sm); color: rgba(255,255,255,.7); line-height: 1.7; margin: 0; }
.innovant-footer__h { color: #fff; font-size: var(--wp--preset--font-size--sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 var(--wp--preset--spacing--30); }
.innovant-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.innovant-footer__col a { color: rgba(255,255,255,.78); text-decoration: none; font-size: var(--wp--preset--font-size--sm); transition: color 150ms; }
.innovant-footer__col a:hover { color: #fff; }
.innovant-footer__legal { max-inline-size: 1180px; margin: var(--wp--preset--spacing--70) auto 0; padding-block-start: var(--wp--preset--spacing--40); border-block-start: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--xs); color: rgba(255,255,255,.6); }

/* ---------- Archive / single polish (shared) ---------- */
.innovant-card { transition: transform 200ms cubic-bezier(.2,0,.2,1), box-shadow 200ms, border-color 200ms; }
.innovant-card:hover { transform: translateY(-4px); }
.wp-block-query .wp-block-post-template { gap: var(--wp--preset--spacing--50) !important; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--primary); }

/* ---------- RTL refinements ---------- */
[dir="rtl"] .innovant-hero::before { background-position: top left; }
[dir="rtl"] .eyebrow,
[dir="rtl"] .innovant-primary-nav__link,
[dir="rtl"] .innovant-footer__h { letter-spacing: 0; }
[dir="rtl"] .innovant-btn span[aria-hidden],
[dir="rtl"] .innovant-svc-card__more span[aria-hidden],
[dir="rtl"] .innovant-cptcard__more span[aria-hidden],
[dir="rtl"] .innovant-post-card__more span[aria-hidden] { transform: scaleX(-1); display: inline-block; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.innovant-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.innovant-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
	.innovant-header__search { display: none; } /* search hidden on mobile; primary nav becomes a drawer (see mobile-nav block) */
	.innovant-header__bar { padding-inline: var(--wp--preset--spacing--40); }
	.innovant-grid-3 { grid-template-columns: 1fr; }
	.innovant-hero__title { max-inline-size: none; }
	.innovant-footer__top { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); }
}

/* =========================================================================
   KNOWLEDGE PLATFORM — real-content design layer (index, archive, single guide).
   The library of 1,390 bilingual guides is the product; the Index is the signature.
   ========================================================================= */

/* ---------- Knowledge Index (signature): a reference-manual table of contents ---------- */
.innovant-section--index .innovant-section-head { max-inline-size: 820px; }
.innovant-kindex {
	display: block;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--border-radius--lg);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--sm);
}
.innovant-kindex__list {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--line);
}
.innovant-kindex__li { margin: 0; background: var(--wp--preset--color--base); }
.innovant-kindex__item {
	display: flex; align-items: center; gap: var(--wp--preset--spacing--40);
	padding: 20px var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base); text-decoration: none; min-block-size: 64px;
	transition: background-color 200ms ease;
}
.innovant-kindex__item:hover { background: var(--wp--preset--color--surface); }
.innovant-kindex__num {
	font-family: var(--wp--preset--font-family--display); font-weight: 700;
	font-size: 2.4rem; line-height: .9; color: var(--wp--preset--color--primary);
	opacity: .28; min-inline-size: 2.2ch; text-align: center; font-feature-settings: "tnum";
	transition: color 200ms ease, opacity 200ms ease;
}
.innovant-kindex__item:hover .innovant-kindex__num { color: var(--wp--preset--color--accent); opacity: 1; }
.innovant-kindex__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-inline-size: 0; }
.innovant-kindex__dots { display: none; }
.innovant-kindex__name { color: var(--wp--preset--color--ink); font-weight: 600; line-height: 1.25; font-size: 1.02rem; }
.innovant-kindex__count { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; letter-spacing: 0.06em; }
.innovant-kindex__arrow {
	color: var(--wp--preset--color--primary); font-size: 1.15rem;
	opacity: 0; transform: translateX(-6px);
	transition: opacity 200ms ease, transform 200ms ease;
}
.innovant-kindex__item:hover .innovant-kindex__arrow { opacity: 1; transform: none; }

/* ---------- Archive hero (knowledge base landing) ---------- */
.innovant-archive-hero {
	background: var(--wp--preset--color--surface);
	border-block-end: 1px solid var(--wp--preset--color--line);
	padding-block: clamp(40px, 6vw, 72px); padding-inline: var(--wp--preset--spacing--50);
}
.innovant-archive-hero > * { max-inline-size: 1180px; margin-inline: auto; }
.innovant-archive-hero__eyebrow { margin: 0 0 var(--wp--preset--spacing--20); }
.innovant-archive-hero__title {
	font-family: var(--wp--preset--font-family--display); font-weight: 700;
	font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink); margin: 0;
}
.innovant-archive-hero__intro { font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--body); line-height: 1.6; margin: var(--wp--preset--spacing--30) 0 0; max-inline-size: 64ch; }
.innovant-archive-hero .innovant-resultcount { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); margin: var(--wp--preset--spacing--30) 0 0; font-weight: 600; }

/* ---------- Image-backed banner heros (per-CPT archives) ---------- */
body.post-type-archive-article .innovant-archive-hero,
body.post-type-archive-service .innovant-archive-hero,
body.post-type-archive-sector .innovant-archive-hero,
body.post-type-archive-platform .innovant-archive-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-block-size: clamp(18rem, 38vh, 26rem);
	background-color: var(--wp--preset--color--navy);
	background-size: cover;
	background-position: center;
	border-block-end: none;
	overflow: hidden;
	isolation: isolate;
}
/* Brand gradient wash so white text stays legible over the (already mid-dark) banner. */
body.post-type-archive-article .innovant-archive-hero::before,
body.post-type-archive-service .innovant-archive-hero::before,
body.post-type-archive-sector .innovant-archive-hero::before,
body.post-type-archive-platform .innovant-archive-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(110deg, rgba(16,40,64,.86) 0%, rgba(11,104,154,.60) 55%, rgba(16,40,64,.72) 100%);
}
[dir="rtl"] body.post-type-archive-article .innovant-archive-hero::before,
[dir="rtl"] body.post-type-archive-service .innovant-archive-hero::before,
[dir="rtl"] body.post-type-archive-sector .innovant-archive-hero::before,
[dir="rtl"] body.post-type-archive-platform .innovant-archive-hero::before {
	background: linear-gradient(250deg, rgba(16,40,64,.86) 0%, rgba(11,104,154,.60) 55%, rgba(16,40,64,.72) 100%);
}
body.post-type-archive-article .innovant-archive-hero__title,
body.post-type-archive-service .innovant-archive-hero__title,
body.post-type-archive-sector .innovant-archive-hero__title,
body.post-type-archive-platform .innovant-archive-hero__title { color: #fff; }
body.post-type-archive-article .innovant-archive-hero__intro,
body.post-type-archive-service .innovant-archive-hero__intro,
body.post-type-archive-sector .innovant-archive-hero__intro,
body.post-type-archive-platform .innovant-archive-hero__intro { color: rgba(255,255,255,.90); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
body.post-type-archive-article .innovant-archive-hero__eyebrow,
body.post-type-archive-service .innovant-archive-hero__eyebrow,
body.post-type-archive-sector .innovant-archive-hero__eyebrow,
body.post-type-archive-platform .innovant-archive-hero__eyebrow { color: var(--wp--preset--color--accent); }
/* Per-archive banner image (AVIF -> WebP -> JPEG) on a Ken-Burns layer BEHIND the gradient wash
   (::after z-2 = image, ::before z-1 = wash, content above). Slow ambient zoom; reduced-motion = static. */
body.post-type-archive-article .innovant-archive-hero::after,
body.post-type-archive-service .innovant-archive-hero::after,
body.post-type-archive-sector .innovant-archive-hero::after,
body.post-type-archive-platform .innovant-archive-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background-size: cover; background-position: center; will-change: transform;
}
body.post-type-archive-article .innovant-archive-hero::after { background-image: url("../banners/knowledge.jpg"); background-image: image-set(url("../banners/knowledge.avif") type("image/avif"), url("../banners/knowledge.webp") type("image/webp"), url("../banners/knowledge.jpg") type("image/jpeg")); }
body.post-type-archive-service .innovant-archive-hero::after { background-image: url("../banners/services.jpg"); background-image: image-set(url("../banners/services.avif") type("image/avif"), url("../banners/services.webp") type("image/webp"), url("../banners/services.jpg") type("image/jpeg")); }
body.post-type-archive-sector .innovant-archive-hero::after { background-image: url("../banners/sectors.jpg"); background-image: image-set(url("../banners/sectors.avif") type("image/avif"), url("../banners/sectors.webp") type("image/webp"), url("../banners/sectors.jpg") type("image/jpeg")); }
body.post-type-archive-platform .innovant-archive-hero::after { background-image: url("../banners/platforms.jpg"); background-image: image-set(url("../banners/platforms.avif") type("image/avif"), url("../banners/platforms.webp") type("image/webp"), url("../banners/platforms.jpg") type("image/jpeg")); }
@keyframes inv-kenburns-bg { from { transform: scale(1.05); } to { transform: scale(1.16) translate(-2.5%, -1.8%); } }
@keyframes inv-kenburns-bg-rtl { from { transform: scale(1.05); } to { transform: scale(1.16) translate(2.5%, -1.8%); } }
html.is-motion body.post-type-archive-article .innovant-archive-hero::after,
html.is-motion body.post-type-archive-service .innovant-archive-hero::after,
html.is-motion body.post-type-archive-sector .innovant-archive-hero::after,
html.is-motion body.post-type-archive-platform .innovant-archive-hero::after { animation: inv-kenburns-bg 26s ease-in-out infinite alternate; }
html.is-motion[dir="rtl"] body.post-type-archive-article .innovant-archive-hero::after,
html.is-motion[dir="rtl"] body.post-type-archive-service .innovant-archive-hero::after,
html.is-motion[dir="rtl"] body.post-type-archive-sector .innovant-archive-hero::after,
html.is-motion[dir="rtl"] body.post-type-archive-platform .innovant-archive-hero::after { animation-name: inv-kenburns-bg-rtl; }
@media (prefers-reduced-motion: reduce) { .innovant-archive-hero::after { animation: none !important; transform: none !important; } }

/* ---------- CPT archive grid (services / platforms / sectors) — curated card set ---------- */
.innovant-cptgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50); }
.innovant-cptcard {
	display: flex; flex-direction: column; background: #fff; color: inherit; text-decoration: none;
	border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--border-radius--lg);
	overflow: hidden; box-shadow: 0 1px 2px rgba(8,22,40,.04);
	transition: transform .3s var(--inv-ease), box-shadow .3s var(--inv-ease), border-color .3s var(--inv-ease);
}
.innovant-cptcard:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(8,22,40,.5); border-color: var(--wp--preset--color--primary); }
.innovant-cptcard__media { aspect-ratio: 16 / 9; background-size: cover; background-position: center; display: block; }
.innovant-cptcard__body { display: flex; flex-direction: column; gap: 10px; padding: var(--wp--preset--spacing--40); flex: 1; }
.innovant-cptcard__kicker { font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--wp--preset--color--primary); }
.innovant-cptcard__title { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--lg); line-height: 1.25; color: var(--wp--preset--color--ink); }
.innovant-cptcard__desc { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--body); line-height: 1.55; flex: 1; }
.innovant-cptcard__more { font-size: var(--wp--preset--font-size--sm); font-weight: 600; color: var(--wp--preset--color--primary); display: inline-flex; align-items: center; gap: 6px; margin-block-start: auto; }
html.is-motion .innovant-cptcard:hover .innovant-cptcard__more span[aria-hidden] { margin-inline-start: 6px; }
@media (max-width: 980px) { .innovant-cptgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .innovant-cptgrid { grid-template-columns: 1fr; } }

/* ---------- Icon system + card badges (one coherent line-icon family) ---------- */
.innovant-icon { inline-size: 1em; block-size: 1em; display: inline-block; vertical-align: middle; }
[dir="rtl"] .innovant-icon--flip { transform: scaleX(-1); }
/* Floating glass badge over card media (guide / cpt / insights). */
.innovant-guide-card__media, .innovant-cptcard__media, .innovant-svc-card__media { position: relative; }
.innovant-cardbadge { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; inline-size: 40px; block-size: 40px;
	display: grid; place-items: center; border-radius: 12px; background: rgba(11,104,154,.42); border: 1px solid rgba(255,255,255,.32);
	color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 2; box-shadow: 0 6px 16px -8px rgba(8,22,40,.6); }
.innovant-cardbadge__icon { inline-size: 22px; block-size: 22px; }
/* Knowledge-index row icon. */
.innovant-kindex__ico { display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 9px;
	background: rgba(11,104,154,.09); color: var(--wp--preset--color--primary); flex: 0 0 auto; }
.innovant-kindex__ico .innovant-icon { inline-size: 19px; block-size: 19px; }
/* Topic-pill icon. */
.innovant-topicpills__ico { display: inline-flex; vertical-align: middle; margin-inline-end: 7px; color: var(--wp--preset--color--primary); }
.innovant-topicpills__ico .innovant-icon { inline-size: 15px; block-size: 15px; }
.innovant-topicpills__pill.is-active .innovant-topicpills__ico { color: inherit; }
/* Icon draw-on (E13 extension): strokes draw in when the card/row/pill reveals; redraw + lift on hover. */
html.is-motion:not(.is-motion-done) .innovant-guide-card .innovant-icon > *,
html.is-motion:not(.is-motion-done) .innovant-cptcard .innovant-icon > *,
html.is-motion:not(.is-motion-done) .innovant-svc-card .innovant-icon > *,
html.is-motion:not(.is-motion-done) .innovant-kindex__li .innovant-icon > *,
html.is-motion:not(.is-motion-done) .innovant-topicpills .innovant-icon > * { stroke-dasharray: 130; stroke-dashoffset: 0; }
/* Base offset 0 = icons ALWAYS visible (no blank-on-load FOUC); reveal just plays a quick draw-in. */
html.is-motion .is-inview .innovant-icon > * { animation: inv-redraw .85s var(--inv-ease) .12s; }
@keyframes inv-draw { to { stroke-dashoffset: 0; } }
@keyframes inv-redraw { from { stroke-dashoffset: 130; } to { stroke-dashoffset: 0; } }
.innovant-cardbadge, .innovant-kindex__ico { transition: transform .3s var(--inv-ease), background-color .3s var(--inv-ease); }
html.is-motion .innovant-guide-card:hover .innovant-cardbadge,
html.is-motion .innovant-cptcard:hover .innovant-cardbadge { transform: translateY(-3px) scale(1.05); }
html.is-motion .innovant-guide-card:hover .innovant-cardbadge .innovant-icon > *,
html.is-motion .innovant-cptcard:hover .innovant-cardbadge .innovant-icon > *,
html.is-motion .innovant-kindex__item:hover .innovant-kindex__ico .innovant-icon > * { animation: inv-redraw .6s var(--inv-ease) forwards; }
html.is-motion .innovant-kindex__item:hover .innovant-kindex__ico { background: var(--wp--preset--color--primary); color: #fff; }

/* ---------- Archive body + topic pills facet ---------- */
.innovant-archive-body { padding-block: clamp(32px, 5vw, 56px); padding-inline: var(--wp--preset--spacing--50); }
.innovant-archive-body > * { max-inline-size: 1180px; margin-inline: auto; }
.innovant-topicpills { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin-block-end: var(--wp--preset--spacing--60); }
.innovant-topicpills__pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 16px; border-radius: var(--wp--custom--border-radius--pill);
	border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body); text-decoration: none;
	font-size: var(--wp--preset--font-size--sm); font-weight: 600; line-height: 1.2;
	transition: background-color 150ms, color 150ms, border-color 150ms;
}
.innovant-topicpills__pill:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.innovant-topicpills__pill.is-active { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #fff; }
.innovant-topicpills__n { font-size: var(--wp--preset--font-size--xs); opacity: .75; font-weight: 600; }
.innovant-topicpills__pill.is-active .innovant-topicpills__n { opacity: .9; }

/* ---------- Guide cards (no media; editorial) ---------- */
.innovant-guide-grid { gap: var(--wp--preset--spacing--50) !important; }
.innovant-guide-card {
	display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--border-radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
	block-size: 100%;
	border-block-start: 3px solid var(--wp--preset--color--primary);
	transition: transform 200ms cubic-bezier(.2,0,.2,1), box-shadow 200ms, border-color 200ms;
}
.innovant-guide-card:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lg); }
.innovant-guide-card__topic { font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.innovant-guide-card__topic a { color: var(--wp--preset--color--primary); text-decoration: none; }
.innovant-guide-card__title { margin: 0; line-height: 1.3; }
.innovant-guide-card__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.innovant-guide-card:hover .innovant-guide-card__title a { color: var(--wp--preset--color--primary); }
.innovant-guide-card__excerpt { color: var(--wp--preset--color--body); font-size: var(--wp--preset--font-size--sm); line-height: 1.6; margin: 0; flex: 1; }
.innovant-guide-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); margin-block-start: auto; padding-block-start: var(--wp--preset--spacing--30); border-block-start: 1px solid var(--wp--preset--color--line); }
.innovant-guide-card__date { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--xs); margin: 0; }
.innovant-guide-card__more { color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.innovant-guide-card__more::after { content: " →"; }

/* ---------- Pagination ---------- */
.innovant-pagination { margin-block-start: var(--wp--preset--spacing--70); gap: var(--wp--preset--spacing--30); }
.innovant-pagination .wp-block-query-pagination-numbers .page-numbers,
.innovant-pagination .wp-block-query-pagination-previous,
.innovant-pagination .wp-block-query-pagination-next {
	padding: 8px 14px; border-radius: var(--wp--custom--border-radius--md);
	border: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--body); text-decoration: none;
}
.innovant-pagination .page-numbers.current { background: var(--wp--preset--color--primary); color: #fff; border-color: var(--wp--preset--color--primary); }
.innovant-noresults { max-inline-size: 560px; }

/* ---------- Single guide: hero + meta ---------- */
.innovant-guide-hero {
	background: var(--wp--preset--color--surface);
	border-block-end: 1px solid var(--wp--preset--color--line);
	padding-block: clamp(36px, 5vw, 64px); padding-inline: var(--wp--preset--spacing--50);
}
.innovant-guide-hero > * { max-inline-size: 880px; margin-inline: auto; }
.innovant-guide-hero__title {
	font-family: var(--wp--preset--font-family--display); font-weight: 700;
	font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.12; letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink); margin: 0;
}
/* Single-guide: wide topic-banner hero (background set per-post in wp_head). */
.single-article .innovant-guide-hero {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-block-size: clamp(20rem, 44vh, 30rem);
	background-color: var(--wp--preset--color--navy);
	background-size: cover; background-position: center;
	border-block-end: 0;
	padding-block: clamp(40px, 6vw, 88px);
}
.single-article .innovant-guide-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(16,40,64,.34) 0%, rgba(16,40,64,.54) 40%, rgba(16,40,64,.90) 100%);
}
.single-article .innovant-guide-hero__title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.single-article .innovant-article-meta { color: rgba(255,255,255,.92); }
.single-article .innovant-article-meta__item { color: rgba(255,255,255,.88); }
/* Heros are FIRST-PAINT visible (no reveal/clip FOUC) — the banner is the focus, not a fade-in. */
html.is-motion:not(.is-motion-done) .innovant-archive-hero,
html.is-motion:not(.is-motion-done) .innovant-archive-hero > *,
html.is-motion:not(.is-motion-done) .innovant-guide-hero,
html.is-motion:not(.is-motion-done) .innovant-guide-hero__title,
html.is-motion:not(.is-motion-done) .innovant-article-meta,
html.is-motion:not(.is-motion-done) .innovant-article-meta > * {
	opacity: 1 !important; transform: none !important; clip-path: none !important;
}
.innovant-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--30); margin-block-start: var(--wp--preset--spacing--50); }
.innovant-article-meta__topic {
	display: inline-flex; align-items: center; padding: 6px 15px;
	border-radius: var(--wp--custom--border-radius--pill);
	background: var(--wp--preset--color--primary); color: #fff; text-decoration: none;
	font-size: var(--wp--preset--font-size--xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
	transition: background-color .2s var(--inv-ease), transform .2s var(--inv-ease);
}
.innovant-article-meta__topic:hover { background: var(--wp--preset--color--primary-dark, #095980); }
html.is-motion .innovant-article-meta__topic:hover { transform: translateY(-1px); }
.innovant-article-meta__item { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); display: inline-flex; align-items: center; }
/* Editorial middot separators between meta items (chip · date · reading time). */
.innovant-article-meta__item::before { content: "·"; margin-inline-end: 0.7em; color: var(--wp--preset--color--line); font-weight: 700; }
/* Arabic: a touch more leading room under the big display title before the meta line. */
[dir="rtl"] .innovant-article-meta { margin-block-start: var(--wp--preset--spacing--40); gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); }

/* ---------- Single guide: detail grid ---------- */
.innovant-guide-detail { padding-block: clamp(40px, 6vw, 72px); padding-inline: var(--wp--preset--spacing--50); margin-inline: auto; max-inline-size: 1180px; }

/* ---------- Long-form article body (premium reading) ---------- */
.innovant-article-body { color: var(--wp--preset--color--body); font-size: 1.125rem; line-height: 1.8; }
.innovant-article-body > p:first-of-type { font-size: var(--lede); line-height: 1.55; color: var(--c-ink); margin-block-end: var(--space-m); }
.innovant-article-body > * { max-inline-size: 70ch; }
.innovant-article-body > .alignwide, .innovant-article-body > .alignfull, .innovant-article-body > figure, .innovant-article-body > table { max-inline-size: none; }
.innovant-article-body p { margin-block: 0 1.5em; }
.innovant-article-body { counter-reset: inv-section; }
.innovant-article-body h2 {
	font-family: var(--wp--preset--font-family--display); font-weight: 700;
	font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.2; color: var(--wp--preset--color--ink);
	margin-block: 1.8em 0.6em; padding-block-start: 0.6em; border-block-start: 1px solid var(--wp--preset--color--line);
	counter-increment: inv-section;
}
/* Editorial section kicker: a small amber "01 / 02 …" eyebrow above each H2 (pure CSS counter, no JS,
 * no content change) — gives long guides a scannable, chaptered rhythm. Decorative, so aria-hidden via
 * generated content (not in the a11y name); the heading text remains the accessible label. */
.innovant-article-body h2::before {
	content: counter(inv-section, decimal-leading-zero);
	display: block; margin-block-end: 0.3em;
	font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--xs);
	font-weight: 700; letter-spacing: 0.16em; color: var(--wp--preset--color--accent);
}
.innovant-article-body h3 { font-weight: 700; font-size: clamp(1.18rem, 1.8vw, 1.4rem); line-height: 1.3; color: var(--wp--preset--color--ink); margin-block: 1.5em 0.5em; }
.innovant-article-body h4 { font-weight: 600; font-size: 1.08rem; color: var(--wp--preset--color--ink); margin-block: 1.3em 0.4em; }
.innovant-article-body ul, .innovant-article-body ol { margin-block: 0 1.2em; padding-inline-start: 1.4em; }
.innovant-article-body li { margin-block-end: 0.5em; }
.innovant-article-body li::marker { color: var(--wp--preset--color--primary); }
.innovant-article-body a { color: var(--wp--preset--color--primary); text-underline-offset: 2px; }
.innovant-article-body strong { color: var(--wp--preset--color--ink); }
.innovant-article-body blockquote {
	margin: 1.6em 0; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border-inline-start: 3px solid var(--wp--preset--color--accent); background: var(--wp--preset--color--surface);
	border-radius: 0 var(--wp--custom--border-radius--md) var(--wp--custom--border-radius--md) 0; color: var(--wp--preset--color--ink); font-style: italic;
}
.innovant-article-body table { inline-size: 100%; border-collapse: collapse; margin-block: 1.4em; font-size: var(--wp--preset--font-size--sm); }
.innovant-article-body th, .innovant-article-body td { border: 1px solid var(--wp--preset--color--line); padding: 10px 14px; text-align: start; vertical-align: top; }
.innovant-article-body thead th, .innovant-article-body tr:first-child td { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); font-weight: 600; }

/* ---------- Single guide: aside (CTA card + more-in-topic) ---------- */
.innovant-cta-card {
	background: var(--wp--preset--color--navy); color: #fff;
	border-radius: var(--wp--custom--border-radius--lg);
	padding: var(--wp--preset--spacing--50);
}
.innovant-cta-card h3 { color: #fff; margin: 0 0 var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--display); }
.innovant-cta-card p { color: rgba(255,255,255,.82); margin: 0 0 var(--wp--preset--spacing--40); }
.innovant-cta-card a { display: inline-flex; background: var(--wp--preset--color--accent); color: #10243A; padding: 11px 22px; border-radius: var(--wp--custom--border-radius--md); text-decoration: none; font-weight: 700; transition: background-color 150ms, transform 150ms; }
.innovant-cta-card a:hover { background: var(--wp--preset--color--accent-dark); color: #0C1B2C; transform: translateY(-1px); }
.innovant-moretopic { margin-block-start: var(--wp--preset--spacing--50); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--border-radius--lg); padding: var(--wp--preset--spacing--50); background: var(--wp--preset--color--base); }
.innovant-moretopic__h { font-size: var(--wp--preset--font-size--sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--muted); margin: 0 0 var(--wp--preset--spacing--30); font-weight: 700; }
.innovant-moretopic__list { list-style: none; margin: 0 0 var(--wp--preset--spacing--40); padding: 0; display: flex; flex-direction: column; }
.innovant-moretopic__list li { border-block-end: 1px solid var(--wp--preset--color--line); }
.innovant-moretopic__list li:last-child { border-block-end: 0; }
.innovant-moretopic__list a { display: block; padding-block: var(--wp--preset--spacing--30); color: var(--wp--preset--color--ink); text-decoration: none; font-size: var(--wp--preset--font-size--sm); line-height: 1.4; transition: color 150ms; }
.innovant-moretopic__list a:hover { color: var(--wp--preset--color--primary); }
.innovant-moretopic__all { color: var(--wp--preset--color--primary); font-weight: 600; font-size: var(--wp--preset--font-size--sm); text-decoration: none; }

/* ---------- RTL refinements (knowledge layer) ---------- */
[dir="rtl"] .innovant-kindex__num { text-align: center; }
[dir="rtl"] .innovant-kindex__arrow,
[dir="rtl"] .innovant-moretopic__all span[aria-hidden] { transform: scaleX(-1); display: inline-block; }
[dir="rtl"] .innovant-kindex__item:hover .innovant-kindex__arrow { transform: scaleX(-1); }
[dir="rtl"] .innovant-guide-card__more::after { content: " ←"; }
[dir="rtl"] .innovant-archive-hero__eyebrow,
[dir="rtl"] .innovant-guide-card__topic,
[dir="rtl"] .innovant-article-meta__topic { letter-spacing: 0; }
[dir="rtl"] .innovant-article-body { font-family: var(--wp--preset--font-family--body); line-height: 1.95; }
[dir="rtl"] .innovant-article-body > p:first-of-type { line-height: 1.8; }

/* ---------- Responsive (knowledge layer) ---------- */
@media (max-width: 1024px) {
	.innovant-kindex__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.innovant-guide-detail.innovant-detail { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
	.innovant-hero__grid { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }
	.innovant-hero__panel { order: 2; }
}
@media (max-width: 880px) {
	.innovant-kindex__list { grid-template-columns: 1fr; }
	.innovant-topicpills { gap: 8px; }
	.innovant-article-body > * { max-inline-size: none; }
}

/* =========================================================================
   HOMEPAGE DEPTH SECTIONS — trust / numbers / sectors / journey / FAQ.
   Cards share one system; accent borders use logical props (RTL-safe).
   ========================================================================= */
.innovant-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50); }

/* Trust strip */
.innovant-trust-band { padding-block: clamp(28px, 4vw, 48px) !important; }
.innovant-trust { text-align: center; }
.innovant-trust__lead { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--wp--preset--color--muted); margin: 0 0 var(--wp--preset--spacing--40); }
.innovant-trust__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60); }
.innovant-trust__chip { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.4rem); color: var(--wp--preset--color--ink); opacity: .55; transition: opacity .2s var(--inv-ease); letter-spacing: .02em; }
.innovant-trust__chip:hover { opacity: 1; color: var(--wp--preset--color--primary); }

/* Saudi-in-numbers */
.innovant-numcard { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--border-radius--lg); padding: var(--wp--preset--spacing--50); border-block-start: 3px solid var(--wp--preset--color--accent); box-shadow: var(--wp--preset--shadow--sm); }
.innovant-numcard__n { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; color: var(--wp--preset--color--primary); }
.innovant-numcard__l { color: var(--wp--preset--color--body); font-size: var(--wp--preset--font-size--sm); line-height: 1.5; margin-block-start: var(--wp--preset--spacing--30); }

/* Sectors */
.innovant-sector-card { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--50); background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--border-radius--lg); box-shadow: var(--wp--preset--shadow--sm); text-decoration: none; transition: transform .28s var(--inv-ease), box-shadow .28s, border-color .28s; }
.innovant-sector-card:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lg); border-color: var(--wp--preset--color--blue); }
.innovant-sector-card__ico { flex: 0 0 auto; inline-size: 48px; block-size: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--wp--custom--border-radius--md); background: rgba(11,104,154,.08); color: var(--wp--preset--color--primary); }
.innovant-sector-card__ico svg { inline-size: 26px; block-size: 26px; }
.innovant-sector-card__body { flex: 1; min-inline-size: 0; }
.innovant-sector-card__t { display: block; font-weight: 600; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--lg); }
.innovant-sector-card__d { display: block; color: var(--wp--preset--color--body); font-size: var(--wp--preset--font-size--sm); line-height: 1.55; margin-block-start: 4px; }
.innovant-sector-card__arrow { color: var(--wp--preset--color--primary); align-self: center; opacity: 0; transform: translateX(-6px); transition: opacity .2s var(--inv-ease), transform .2s var(--inv-ease); }
.innovant-sector-card:hover .innovant-sector-card__arrow { opacity: 1; transform: none; }
[dir="rtl"] .innovant-sector-card__t, [dir="rtl"] .innovant-sector-card__d { font-family: var(--wp--preset--font-family--body); }
[dir="rtl"] .innovant-sector-card__t { font-family: var(--wp--preset--font-family--display); }
[dir="rtl"] .innovant-sector-card__arrow { transform: scaleX(-1) translateX(-6px); }
[dir="rtl"] .innovant-sector-card:hover .innovant-sector-card__arrow { transform: scaleX(-1); }

/* Journey / process */
.innovant-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50); counter-reset: step; }
.innovant-journey__step { margin: 0; }
.innovant-journey__link { display: block; height: 100%; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--border-radius--lg); padding: var(--wp--preset--spacing--50); text-decoration: none; position: relative; transition: transform .28s var(--inv-ease), box-shadow .28s var(--inv-ease), border-color .28s var(--inv-ease); }
.innovant-journey__link:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--md); border-color: var(--wp--preset--color--primary); }
.innovant-journey__n { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.5rem; color: var(--wp--preset--color--accent); }
.innovant-journey__ico { display: inline-flex; vertical-align: middle; margin-inline-start: 10px; color: var(--wp--preset--color--primary); }
.innovant-journey__ico svg { inline-size: 24px; block-size: 24px; }
.innovant-journey__t { display: block; font-weight: 600; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--lg); margin-block-start: var(--wp--preset--spacing--30); }
.innovant-journey__d { display: block; color: var(--wp--preset--color--body); font-size: var(--wp--preset--font-size--sm); line-height: 1.55; margin-block-start: 6px; }
[dir="rtl"] .innovant-journey__t { font-family: var(--wp--preset--font-family--display); }

/* FAQ accordion */
.innovant-faq2 { max-inline-size: 860px; margin-inline: auto; }
.innovant-faq2__item { border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--border-radius--md); margin-block-end: var(--wp--preset--spacing--30); background: var(--wp--preset--color--base); overflow: hidden; }
.innovant-faq2__q { cursor: pointer; list-style: none; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); font-weight: 600; color: var(--wp--preset--color--ink); display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); font-size: 1.02rem; }
.innovant-faq2__q::-webkit-details-marker { display: none; }
.innovant-faq2__mark { flex: 0 0 auto; inline-size: 22px; block-size: 22px; position: relative; }
.innovant-faq2__mark::before, .innovant-faq2__mark::after { content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: 10px; inline-size: 14px; block-size: 2px; background: var(--wp--preset--color--primary); transition: transform .25s var(--inv-ease); }
.innovant-faq2__mark::after { transform: rotate(90deg); }
.innovant-faq2__item[open] .innovant-faq2__mark::after { transform: rotate(0); }
.innovant-faq2__a { padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); color: var(--wp--preset--color--body); line-height: 1.7; }
[dir="rtl"] .innovant-faq2__q { font-family: var(--wp--preset--font-family--display); }
[dir="rtl"] .innovant-faq2__a { font-family: var(--wp--preset--font-family--body); }

@media (max-width: 980px) {
	.innovant-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.innovant-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.innovant-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.innovant-grid-4 { grid-template-columns: 1fr; }
	.innovant-journey, .innovant-sectors { grid-template-columns: 1fr; }
}

/* =========================================================================
   MEDIA / IMAGE LAYER — brand topic visuals as featured images + section art.
   ========================================================================= */

/* ---- Hero: full-bleed brand visual behind the teal, text stays readable ---- */
.innovant-hero { position: relative; isolation: isolate; background: var(--wp--preset--color--navy); }
.innovant-hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center;
	background-image: url("../topics/hero.jpg");
	background-image: -webkit-image-set( url("../topics/hero.webp") type("image/webp"), url("../topics/hero.jpg") type("image/jpeg") );
	background-image: image-set( url("../topics/hero.avif") type("image/avif"), url("../topics/hero.webp") type("image/webp"), url("../topics/hero.jpg") type("image/jpeg") ); }
/* Lowered wash so the hero photograph reads as a lit brand surface (was .92/.82/.86). */
.innovant-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(11,104,154,.66) 0%, rgba(11,104,154,.58) 42%, rgba(16,40,64,.64) 100%); }
.innovant-hero__inner { position: relative; z-index: 1; }
/* Mobile hero: swap to the 9:16 portrait crop so towers aren't cropped out on narrow viewports (override #7). */
@media (max-width: 768px) {
	.innovant-hero__bg {
		background-image: url("../topics/hero-mobile.jpg");
		background-image: -webkit-image-set( url("../topics/hero-mobile.webp") type("image/webp"), url("../topics/hero-mobile.jpg") type("image/jpeg") );
		background-image: image-set( url("../topics/hero-mobile.avif") type("image/avif"), url("../topics/hero-mobile.webp") type("image/webp"), url("../topics/hero-mobile.jpg") type("image/jpeg") );
	}
}
/* Localized contrast scrim behind the headline column ONLY (override #6) — guarantees >=4.5:1 for
   white text over the busiest image zone without re-darkening the whole photo. RTL-mirrored. */
.innovant-hero__main { position: relative; }
.innovant-hero__main::before { content: ""; position: absolute; inset: -6% -10% -6% -45%; z-index: -1; pointer-events: none;
	background: radial-gradient(125% 105% at 0% 50%, rgba(16,40,64,.55) 0%, rgba(16,40,64,.30) 44%, rgba(16,40,64,0) 74%); }
[dir="rtl"] .innovant-hero__main::before { inset: -6% -45% -6% -10%; background: radial-gradient(125% 105% at 100% 50%, rgba(16,40,64,.55) 0%, rgba(16,40,64,.30) 44%, rgba(16,40,64,0) 74%); }

/* ---- Guide cards with media (home + archive) ---- */
.innovant-guide-card--media { padding: 0; overflow: hidden; border-top: 0; display: flex; flex-direction: column; }
.innovant-guide-card__media { display: block; margin: 0; position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--wp--preset--color--navy); overflow: hidden; }
.innovant-guide-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.innovant-guide-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,40,64,0) 55%, rgba(16,40,64,.35)); opacity: 0; transition: opacity .3s var(--inv-ease); }
.innovant-guide-card:hover .innovant-guide-card__media::after { opacity: 1; }
.innovant-guide-card__content { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--50); flex: 1; }
.innovant-guide-card--media .innovant-guide-card__foot { margin-block-start: auto; }

/* ---- Service cards: image header + icon overlay ---- */
.innovant-svc-card { padding: 0; overflow: hidden; }
.innovant-svc-card__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 7; background-size: cover; background-position: center; background-color: var(--wp--preset--color--navy); }
.innovant-svc-card__media .innovant-svc-card__ico { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; backdrop-filter: blur(2px); }
.innovant-svc-card__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--50); }
.innovant-svc-card:hover .innovant-svc-card__media { filter: brightness(1.06); }

/* ---- Single-guide lead image (21:9 banner) ---- */
.innovant-guide-lead { margin-block: 0 var(--wp--preset--spacing--60); padding-inline: var(--wp--preset--spacing--50); }
.innovant-guide-lead__img { margin: calc(-1 * var(--wp--preset--spacing--40)) auto 0; max-inline-size: 1180px; border-radius: var(--wp--custom--border-radius--lg); overflow: hidden; box-shadow: var(--wp--preset--shadow--lg); }
.innovant-guide-lead__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Related "more in topic": thumb + title rows ---- */
.innovant-moretopic__list a { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.innovant-moretopic__thumb { flex: 0 0 auto; inline-size: 56px; block-size: 42px; border-radius: var(--wp--custom--border-radius--sm); background-size: cover; background-position: center; background-color: var(--wp--preset--color--surface); }
.innovant-moretopic__t { flex: 1; min-inline-size: 0; }

/* ---- CTA band: brand texture behind the navy ---- */
.innovant-cta-band { position: relative; isolation: isolate; }
.innovant-cta-band::before { background-image: url("../topics/cta.jpg") !important; background-size: cover !important; background-position: center !important; opacity: .50 !important; mix-blend-mode: normal !important; }

/* ---- Archive featured-image figure resets ---- */
.innovant-guide-card__media.wp-block-post-featured-image { border-radius: 0; }
.innovant-guide-card__media.wp-block-post-featured-image a { display: block; }

/* ---- Related services (single-guide aside) ---- */
.innovant-relsvc { margin-block-start: var(--wp--preset--spacing--50); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--border-radius--lg); padding: var(--wp--preset--spacing--50); background: var(--wp--preset--color--base); }
.innovant-relsvc__h { font-size: var(--wp--preset--font-size--sm); text-transform: uppercase; letter-spacing: .06em; color: var(--wp--preset--color--muted); margin: 0 0 var(--wp--preset--spacing--40); font-weight: 700; }
.innovant-relsvc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.innovant-relsvc__list a { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); text-decoration: none; }
.innovant-relsvc__thumb { flex: 0 0 auto; inline-size: 50px; block-size: 50px; border-radius: var(--wp--custom--border-radius--md); background-size: cover; background-position: center; background-color: var(--wp--preset--color--navy); }
.innovant-relsvc__b { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.innovant-relsvc__t { color: var(--wp--preset--color--ink); font-weight: 600; font-size: var(--wp--preset--font-size--sm); line-height: 1.3; }
.innovant-relsvc__more { color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--xs); font-weight: 600; }
.innovant-relsvc__list a:hover .innovant-relsvc__t { color: var(--wp--preset--color--primary); }
[dir="rtl"] .innovant-relsvc__t { font-family: var(--wp--preset--font-family--display); }

/* ---- Unified filter bar (knowledge archive) ---- */
.innovant-fbar { margin-block-end: var(--wp--preset--spacing--60); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.innovant-fbar__form { display: flex; gap: var(--wp--preset--spacing--30); flex-wrap: wrap; align-items: stretch; }
.innovant-fbar__search { flex: 1 1 240px; min-inline-size: 0; display: flex; align-items: center; gap: 8px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--border-radius--md); background: var(--wp--preset--color--base); padding-inline: 14px; transition: border-color .2s var(--inv-ease), box-shadow .2s var(--inv-ease); }
.innovant-fbar__search:focus-within { border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 4px rgba(11,104,154,.12); }
.innovant-fbar__icon { color: var(--wp--preset--color--muted); font-size: 1.1rem; }
.innovant-fbar__search input { flex: 1; border: 0; background: transparent; padding-block: 12px; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink); outline: none; min-inline-size: 0; }
.innovant-fbar__sort { border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--border-radius--md); padding: 11px 14px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--body); font-size: var(--wp--preset--font-size--sm); }
.innovant-fbar__submit { background: var(--wp--preset--color--primary); color: #fff; border: 0; border-radius: var(--wp--custom--border-radius--md); padding: 0 24px; font-weight: 600; font-size: var(--wp--preset--font-size--sm); cursor: pointer; transition: background-color .15s, transform .15s; }
.innovant-fbar__submit:hover { background: var(--wp--preset--color--primary-hover, #095980); }
html.is-motion .innovant-fbar__submit:active { transform: scale(.97); }
.innovant-fbar__status { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); flex-wrap: wrap; }
.innovant-fbar__chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.innovant-fbar__chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--wp--custom--border-radius--pill); background: rgba(11,104,154,.08); color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--sm); font-weight: 600; text-decoration: none; transition: background-color .15s; }
.innovant-fbar__chip:hover { background: rgba(11,104,154,.16); }
.innovant-fbar__chip span { font-size: 1.05em; opacity: .7; }
.innovant-fbar__clear { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); text-decoration: underline; text-underline-offset: 2px; }
.innovant-fbar__count { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); font-weight: 600; margin: 0; }
@media (max-width: 880px) { .innovant-fbar__form { flex-direction: column; } .innovant-fbar__submit { padding: 12px; } }
[dir="rtl"] .innovant-fbar__clear { text-underline-offset: 2px; }

/* ---- In-content guide figure (long guides only) ---- */
.innovant-guide-fig { margin: var(--wp--preset--spacing--60) 0; border-radius: var(--wp--custom--border-radius--lg); overflow: hidden; border: 1px solid var(--wp--preset--color--line); box-shadow: var(--wp--preset--shadow--sm); }
.innovant-guide-fig img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.innovant-guide-fig figcaption { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); background: var(--wp--preset--color--surface); border-block-start: 1px solid var(--wp--preset--color--line); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
[dir="rtl"] .innovant-guide-fig figcaption { font-family: var(--wp--preset--font-family--body); letter-spacing: 0; }

/* ---- AJAX filter loading state (progressive enhancement) ---- */
.innovant-archive-body { position: relative; transition: opacity .2s var(--inv-ease); }
.innovant-archive-body.is-loading { opacity: .5; pointer-events: none; }
.innovant-archive-body.is-loading::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: linear-gradient(90deg, transparent, var(--wp--preset--color--primary), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: inv-load 1s linear infinite; z-index: 5; }
@keyframes inv-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .innovant-archive-body.is-loading::before { animation: none; background-position: 50% 0; } }

/* ---- In-content auto-links (controlled) ---- */
.innovant-article-body .innovant-inlink { color: var(--wp--preset--color--primary); text-decoration: none; border-block-end: 1px solid rgba(11,104,154,.32); text-underline-offset: 2px; transition: border-color .15s, background-color .15s; padding-block-end: 1px; }
.innovant-article-body .innovant-inlink:hover { border-block-end-color: var(--wp--preset--color--primary); background: rgba(11,104,154,.06); }

/* =========================================================================
   MOTION LAYER — premium, controlled, GPU-friendly (transform + opacity only).
   Gated behind html.is-motion (added pre-paint ONLY when the visitor allows
   motion). Hidden pre-animation state is also guarded by :not(.is-motion-done)
   so the 2.5s JS fallback can force-reveal if motion.js fails. translateY is
   direction-agnostic → reveals are RTL-safe; arrow nudges use logical margins.
   ========================================================================= */
:root { --inv-ease: cubic-bezier(.2,.6,.2,1); --inv-dur: .82s; --inv-dur-slow: 6s; --inv-dx: -90px; --inv-scroll: 0; --inv-py: 0px; }
/* RTL-aware slide distance: reveals/sweeps that move along the inline axis read translateX(var(--inv-dx))
   and flip automatically under [dir=rtl]. BAN raw translateX(<literal>) in any reveal/sweep selector. */
html[dir="rtl"] { --inv-dx: 90px; }

/* ---- Reveal: blocks fade + rise; .is-inview (added by IO) shows them ---- */
html.is-motion:not(.is-motion-done) .innovant-numcard,
html.is-motion:not(.is-motion-done) .innovant-sector-card,
html.is-motion:not(.is-motion-done) .innovant-journey__step,
html.is-motion:not(.is-motion-done) .innovant-faq2__item,
html.is-motion:not(.is-motion-done) .innovant-trust,
html.is-motion:not(.is-motion-done) .innovant-section-head,
html.is-motion:not(.is-motion-done) .innovant-kindex,
html.is-motion:not(.is-motion-done) .innovant-svc-card,
html.is-motion:not(.is-motion-done) .innovant-cptcard,
html.is-motion:not(.is-motion-done) .innovant-guide-card,
html.is-motion:not(.is-motion-done) .innovant-post-card,
html.is-motion:not(.is-motion-done) .innovant-archive-hero,
html.is-motion:not(.is-motion-done) .innovant-guide-hero__title,
html.is-motion:not(.is-motion-done) .innovant-cta-band__inner,
html.is-motion:not(.is-motion-done) .innovant-cta-card,
html.is-motion:not(.is-motion-done) .innovant-moretopic,
html.is-motion:not(.is-motion-done) .innovant-footer__top,
html.is-motion:not(.is-motion-done) .innovant-footer__legal {
	opacity: 0;
	transform: translateY(104px);
	transition: opacity var(--inv-dur) var(--inv-ease), transform var(--inv-dur) var(--inv-ease);
	will-change: opacity, transform;
}
html.is-motion .is-inview { opacity: 1 !important; transform: none !important; }
/* drop will-change after reveal to free the compositor */
html.is-motion .is-inview { will-change: auto; }

/* ---- Hero LOAD sequence: animates immediately on load (never blank / never waits
        for scroll). Gated by is-motion so reduced-motion / no-JS = instantly visible. ---- */
@keyframes inv-rise { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
html.is-motion .innovant-hero__main > *, html.is-motion .innovant-hero__panel { animation: inv-rise .8s var(--inv-ease) both; }
html.is-motion .innovant-hero__main > *:nth-child(1) { animation-delay: .06s; }
html.is-motion .innovant-hero__main > *:nth-child(2) { animation-delay: .15s; }
html.is-motion .innovant-hero__main > *:nth-child(3) { animation-delay: .24s; }
html.is-motion .innovant-hero__main > *:nth-child(4) { animation-delay: .33s; }
html.is-motion .innovant-hero__main > *:nth-child(5) { animation-delay: .42s; }
html.is-motion .innovant-hero__panel { animation-delay: .3s; }
/* Panel topic list is above the fold → reveal on LOAD with a gentle stagger (NOT scroll-gated;
   the panel is never IO-observed, so an is-inview gate would leave the list stuck hidden). */
html.is-motion .innovant-hero__panel-list > li { animation: inv-rise .6s var(--inv-ease) both; }
html.is-motion .innovant-hero__panel-list > li:nth-child(1) { animation-delay: .40s; }
html.is-motion .innovant-hero__panel-list > li:nth-child(2) { animation-delay: .46s; }
html.is-motion .innovant-hero__panel-list > li:nth-child(3) { animation-delay: .52s; }
html.is-motion .innovant-hero__panel-list > li:nth-child(4) { animation-delay: .58s; }
html.is-motion .innovant-hero__panel-list > li:nth-child(5) { animation-delay: .64s; }
html.is-motion .innovant-hero__panel-list > li:nth-child(6) { animation-delay: .70s; }

/* ---- Child-stagger groups: hide children, reveal when their observed parent enters ---- */
html.is-motion:not(.is-motion-done) .innovant-topicpills > *,
html.is-motion:not(.is-motion-done) .innovant-article-meta > * {
	opacity: 0; transform: translateY(30px);
	transition: opacity .55s var(--inv-ease), transform .55s var(--inv-ease);
}
html.is-motion .innovant-topicpills.is-inview > *,
html.is-motion .innovant-article-meta.is-inview > * { opacity: 1; transform: none; }

/* ---- Header: entrance on load + compact sticky transition ---- */
html.is-motion .innovant-header { animation: inv-header-in .6s var(--inv-ease) both; }
@keyframes inv-header-in { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.innovant-header { transition: padding .3s var(--inv-ease), box-shadow .3s var(--inv-ease), background-color .3s var(--inv-ease); }
.innovant-header.is-scrolled { box-shadow: 0 8px 28px -16px rgba(8,22,40,.55), 0 1px 0 rgba(255,255,255,.08); }
.innovant-header.is-scrolled .innovant-header__bar { padding-block: 9px; }
.innovant-header__bar { transition: padding-block .3s var(--inv-ease); }
.innovant-header__brand img { transition: height .3s var(--inv-ease); }
.innovant-header.is-scrolled .innovant-header__brand img { height: 34px; }

/* ---- Subtle ambient drift on the hero brand pattern (very slow, tiny) ---- */
html.is-motion .innovant-hero::before { animation: inv-drift 38s ease-in-out infinite alternate; }
@keyframes inv-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-18px,10px,0); } }

/* ---- Card hover motion (smoother curve + media kick) ---- */
.innovant-guide-card, .innovant-svc-card, .innovant-post-card, .innovant-kindex__item, .innovant-card { transition: transform .28s var(--inv-ease), box-shadow .28s var(--inv-ease), border-color .28s var(--inv-ease), background-color .28s var(--inv-ease); }
html.is-motion .innovant-guide-card:hover, html.is-motion .innovant-svc-card:hover { transform: translateY(-6px); }

/* ---- Topic pills: hover lift + active pop ---- */
.innovant-topicpills__pill { transition: background-color .18s var(--inv-ease), color .18s var(--inv-ease), border-color .18s var(--inv-ease), transform .18s var(--inv-ease); }
html.is-motion .innovant-topicpills__pill:hover { transform: translateY(-2px); }
html.is-motion .innovant-topicpills__pill:active { transform: translateY(0) scale(.97); }
html.is-motion .innovant-topicpills__pill.is-active { animation: inv-pop .3s var(--inv-ease) both; }
@keyframes inv-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ---- Buttons: press micro-interaction + arrow nudge (logical, RTL-safe) ---- */
html.is-motion .innovant-btn:active, html.is-motion .wp-block-button__link:active { transform: translateY(0) scale(.98); }
.innovant-btn span[aria-hidden], .innovant-svc-card__more span[aria-hidden], .innovant-post-card__more span[aria-hidden],
.innovant-kindex__arrow, .innovant-hero__panel-all span[aria-hidden], .innovant-moretopic__all span[aria-hidden] {
	transition: margin-inline-start .25s var(--inv-ease), opacity .2s var(--inv-ease), transform .25s var(--inv-ease);
}
html.is-motion .innovant-btn:hover span[aria-hidden],
html.is-motion .innovant-hero__panel-all:hover span[aria-hidden],
html.is-motion .innovant-moretopic__all:hover span[aria-hidden] { margin-inline-start: 6px; }
html.is-motion .innovant-svc-card:hover .innovant-svc-card__more span[aria-hidden],
html.is-motion .innovant-post-card:hover .innovant-post-card__more span[aria-hidden] { margin-inline-start: 5px; }

/* ---- Knowledge-index row hover: number kicks, row tints ---- */
html.is-motion .innovant-kindex__item:hover .innovant-kindex__num { transform: translateY(-2px); }

/* ---- Form focus interaction ---- */
.innovant-form input, .innovant-form select, .innovant-form textarea,
.wp-block-search__input { transition: border-color .2s var(--inv-ease), box-shadow .2s var(--inv-ease), background-color .2s var(--inv-ease); }
html.is-motion .innovant-form input:focus, html.is-motion .innovant-form textarea:focus, html.is-motion .innovant-form select:focus {
	box-shadow: 0 0 0 4px rgba(11,104,154,.12);
}

/* ---- Image-aware + stronger motion (D) ---- */
html.is-motion:not(.is-motion-done) .innovant-fbar,
html.is-motion:not(.is-motion-done) .innovant-relsvc,
html.is-motion:not(.is-motion-done) .innovant-guide-lead {
	opacity: 0; transform: translateY(68px);
	transition: opacity .82s var(--inv-ease), transform .82s var(--inv-ease);
}
/* hero brand visual: slow cinematic scale-in entrance */
html.is-motion .innovant-hero__bg { animation: inv-heroin 1.7s var(--inv-ease) both; transform-origin: 60% 40%; }
/* E05: the held `to` frame consumes --inv-py (updated live by the shared scroll rAF) so the
   scroll parallax COMPOSES with the load scale-in instead of fighting it (override #5). */
@keyframes inv-heroin { from { transform: scale(1.10) translate3d(0,0,0); opacity: .25; } to { transform: scale(1.02) translate3d(0, var(--inv-py, 0px), 0); opacity: 1; } }
/* card / thumb image zoom on hover */
.innovant-guide-card__media, .innovant-svc-card__media, .innovant-relsvc__thumb, .innovant-moretopic__thumb, .innovant-guide-lead__img img { transition: transform .55s var(--inv-ease), filter .3s var(--inv-ease); }
html.is-motion .innovant-guide-card:hover .innovant-guide-card__media { transform: scale(1.06); }
html.is-motion .innovant-relsvc__list a:hover .innovant-relsvc__thumb,
html.is-motion .innovant-moretopic__list a:hover .innovant-moretopic__thumb { transform: scale(1.09); }
html.is-motion .innovant-guide-lead__img:hover img { transform: scale(1.03); }
/* CTA texture slow drift */
html.is-motion .innovant-cta-band::before { animation: inv-drift 42s ease-in-out infinite alternate; }

/* =========================================================================
   MOTION 7x — E01–E14 effect layer (all gated on html.is-motion; RTL via --inv-dx
   + logical props; every selector listed in the reduced-motion KILL block above).
   ========================================================================= */

/* ---- E01 Entrance variety: override the base reveal transform per family.
        The shared `.is-inview { opacity:1; transform:none }` reverts every variant. ---- */
html.is-motion:not(.is-motion-done) .innovant-guide-card { transform: translate3d(var(--inv-dx), 20px, 0); }            /* slide from inline-start */
html.is-motion:not(.is-motion-done) .innovant-svc-card  { transform: translate3d(calc(-1 * var(--inv-dx)), 20px, 0); }  /* slide from inline-end  */
html.is-motion:not(.is-motion-done) .innovant-numcard,
html.is-motion:not(.is-motion-done) .innovant-cptcard   { transform: scale(.9) translateY(14px); }                      /* scale-in */
html.is-motion:not(.is-motion-done) .innovant-guide-hero__title { transform: none; clip-path: inset(0 0 100% 0);
	transition: clip-path var(--inv-dur) var(--inv-ease), opacity var(--inv-dur) var(--inv-ease); }                      /* block-axis clip wipe (RTL-safe) */
html.is-motion .innovant-guide-hero__title.is-inview { clip-path: inset(0 0 0 0); }

/* ---- E04 Card lift + media Ken-Burns zoom + cptcard parity ---- */
.innovant-cptcard__media { overflow: hidden; transition: transform .55s var(--inv-ease); }
.innovant-cptcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,40,64,0) 55%, rgba(16,40,64,.32)); opacity: 0; transition: opacity .3s var(--inv-ease); }
html.is-motion .innovant-cptcard:hover { transform: translateY(-6px); }
html.is-motion .innovant-cptcard:hover .innovant-cptcard__media::after { opacity: 1; }
@keyframes inv-kenburns { from { transform: scale(1.035); } to { transform: scale(1.085); } }
html.is-motion .innovant-guide-card:hover .innovant-guide-card__media img,
html.is-motion .innovant-cptcard:hover .innovant-cptcard__media { animation: inv-kenburns var(--inv-dur-slow) ease-in-out infinite alternate; will-change: transform; }

/* ---- E05 Hero one-shot sheen sweep (parallax composes via inv-heroin --inv-py above) ---- */
.innovant-hero__sheen { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Sweep via transform:translateX (NOT inset-inline-start) — animating a layout/inset property would
   register as a 0.5 CLS even though it's decorative. transform is composited → zero CLS. */
.innovant-hero__sheen::before { content: ""; position: absolute; inset-block: -50%; inline-size: 42%; inset-inline-start: 0;
	background: linear-gradient(115deg, transparent, rgba(255,255,255,.16) 50%, transparent); transform: translateX(-160%) skewX(-12deg); }
[dir="rtl"] .innovant-hero__sheen::before { transform: translateX(160%) skewX(12deg); }
html.is-motion .innovant-hero__sheen.is-sweep::before { animation: inv-sheen 1.5s var(--inv-ease) forwards; }
[dir="rtl"] html.is-motion .innovant-hero__sheen.is-sweep::before { animation-name: inv-sheen-rtl; }
@keyframes inv-sheen { from { transform: translateX(-160%) skewX(-12deg); } to { transform: translateX(360%) skewX(-12deg); } }
@keyframes inv-sheen-rtl { from { transform: translateX(160%) skewX(12deg); } to { transform: translateX(-360%) skewX(12deg); } }

/* ---- E06 Trust-strip seamless marquee (chips duplicated inside one track) ---- */
.innovant-trust.is-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.innovant-trust.is-marquee .innovant-trust__list { flex-wrap: nowrap; inline-size: max-content; justify-content: flex-start; animation: inv-marquee 32s linear infinite; }
html.is-motion .innovant-trust.is-marquee.is-paused .innovant-trust__list,
html.is-motion .innovant-trust.is-marquee:hover .innovant-trust__list,
html.is-motion .innovant-trust.is-marquee:focus-within .innovant-trust__list { animation-play-state: paused; }
@keyframes inv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.innovant-trust.is-marquee .innovant-trust__list > * { flex: 0 0 auto; }
/* RTL: the track is anchored at the inline-start (right) edge and extends left, so ANY negative
 * translate — including via animation-direction:reverse — pushes content off the LEFT edge and empties
 * the right half (the bug). Scroll the track rightward (+50%) instead so it keeps covering the viewport. */
[dir="rtl"] .innovant-trust.is-marquee .innovant-trust__list { animation-name: inv-marquee-rtl; }
@keyframes inv-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ---- E07 Header: progressive blur + hide-on-scroll-down + scroll-progress underline ---- */
.innovant-header { transition: padding .3s var(--inv-ease), box-shadow .3s var(--inv-ease), background-color .3s var(--inv-ease), backdrop-filter .3s var(--inv-ease), transform .35s var(--inv-ease); }
html.is-motion .innovant-header.is-scrolled { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background-color: rgba(11,104,154,.86); }
/* Hide-on-scroll-down: move the WHOLE sticky wrapper (JS toggles .is-hidden on the inner .innovant-header)
 * so the header slides fully out — translating only the inner bar would leave the wrapper's pinned box
 * as a transparent strip at the top. */
header.wp-block-template-part { transition: transform .35s var(--inv-ease); }
html.is-motion header.wp-block-template-part:has(.innovant-header.is-hidden) { transform: translateY(-100%); }
.innovant-header__progress { position: absolute; inset-inline: 0; bottom: 0; block-size: 2px; background: var(--wp--preset--color--accent); transform: scaleX(0); transform-origin: left center; z-index: 5; pointer-events: none; }
[dir="rtl"] .innovant-header__progress { transform-origin: right center; }

/* ---- E08 Button fill-sweep (subtle, from the reading-start edge) ---- */
.innovant-btn, .wp-block-button__link { position: relative; overflow: hidden; isolation: isolate; }
.innovant-btn::after, .wp-block-button__link::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left center; transition: transform .32s var(--inv-ease); background: rgba(255,255,255,.16); }
[dir="rtl"] .innovant-btn::after, [dir="rtl"] .wp-block-button__link::after { transform-origin: right center; }
html.is-motion .innovant-btn:hover::after, html.is-motion .wp-block-button__link:hover::after { transform: scaleX(1); }

/* ---- E09 Knowledge-index accent bar on hover (logical inset-inline-start, scaleY) ---- */
/* ---- Knowledge index — elevated treatment (Task 1 creative, post empty-band fix) ---- */
.innovant-kindex__item { position: relative; overflow: hidden; } /* relative + clip the oversized ghost numeral (no overflow) */
.innovant-kindex__list { counter-reset: kn; }
.innovant-kindex__li { counter-increment: kn; }
/* Oversized ghost guide numeral behind the text: low opacity, on the inline-END side so it never
   collides with LTR or RTL text; clipped to the cell so it can't cause horizontal overflow. */
.innovant-kindex__item::after {
	content: counter(kn, decimal-leading-zero);
	position: absolute; inset-block: 0; inset-inline-end: 12px; display: flex; align-items: center; z-index: 0;
	font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 4.4rem; line-height: 1;
	color: var(--c-navy-900); opacity: .055; pointer-events: none;
}
.innovant-kindex__item > * { position: relative; z-index: 1; } /* text/icon above the ghost */
/* Hover/focus: a bottom divider that animates to the amber accent (replaces the previous left
   side-stripe) + a subtle lift. Keyboard-focusable. */
.innovant-kindex__item::before {
	content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; z-index: 2;
	background: var(--c-amber); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--inv-ease);
}
[dir="rtl"] .innovant-kindex__item::before { transform-origin: right; }
.innovant-kindex__item:hover::before, .innovant-kindex__item:focus-within::before { transform: scaleX(1); }
.innovant-kindex__item:focus-visible { outline: 2px solid var(--c-amber); outline-offset: -2px; }
html.is-motion .innovant-kindex__item:hover, html.is-motion .innovant-kindex__item:focus-visible { transform: translateY(-3px); z-index: 3; }
@media (prefers-reduced-motion: reduce) { .innovant-kindex__item:hover, .innovant-kindex__item:focus-visible { transform: none; } }

/* ---- E10 FAQ accordion smooth height (grid-template-rows 0fr<->1fr; JS toggles .is-open) ---- */
.innovant-faq2__item.is-tween .innovant-faq2__panel { display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; min-block-size: 0;
	transition: grid-template-rows .28s var(--inv-ease), opacity .28s var(--inv-ease); will-change: grid-template-rows; }
.innovant-faq2__item.is-tween .innovant-faq2__panel > * { min-block-size: 0; overflow: hidden; }
.innovant-faq2__item.is-tween.is-open .innovant-faq2__panel { grid-template-rows: 1fr; opacity: 1; }

/* ---- E11 AJAX skeleton shimmer (cards reserve the exact card aspect-ratio → zero CLS) ---- */
.innovant-skel { border-radius: var(--wp--custom--border-radius--lg); background: linear-gradient(100deg, #e9eef2 30%, #f4f7f9 50%, #e9eef2 70%); background-size: 200% 100%; }
html.is-motion .innovant-skel { animation: inv-shimmer 1.2s linear infinite; }
.innovant-skel--media { aspect-ratio: 16 / 9; }
.innovant-skel--svc { aspect-ratio: 16 / 7; }
@keyframes inv-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
html.is-motion .innovant-archive-body.is-loading .innovant-cptgrid, html.is-motion .innovant-archive-body.is-loading .innovant-guide-grid { opacity: .35; transition: opacity .2s var(--inv-ease); }
html.is-motion .innovant-archive-body .inv-fadein { animation: inv-fadein .5s var(--inv-ease) both; }
@keyframes inv-fadein { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* ---- E12 Reading-progress bar + animated tab underline ---- */
.innovant-readprogress { position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: var(--wp--preset--color--accent); transform: scaleX(0); transform-origin: left center; z-index: 200; pointer-events: none; }
[dir="rtl"] .innovant-readprogress { transform-origin: right center; }
.innovant-tabnav__link { position: relative; }
.innovant-tabnav__link::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px; background: var(--wp--preset--color--primary); transform: scaleX(0); transform-origin: center; transition: transform .25s var(--inv-ease); }
html.is-motion .innovant-tabnav__link[aria-current]::after, html.is-motion .innovant-tabnav__link:hover::after { transform: scaleX(1); }

/* ---- E14 In-content figure scroll Ken-Burns (CSS scroll-timeline where supported; reduce-killed) ---- */
@supports (animation-timeline: view()) {
	html.is-motion .innovant-guide-fig img, html.is-motion .innovant-guide-lead__img img {
		animation: inv-scrollkb linear both; animation-timeline: view(); animation-range: entry 8% exit 92%;
	}
	@keyframes inv-scrollkb { from { transform: scale(1); } to { transform: scale(1.05); } }
}

/* ====== Reduced-motion: HARD KILL (complete list — every reveal + E01–E14 effect) ======
   prefers-reduced-motion → fully static, fully visible. is-motion is normally never added under
   reduce (head gate skips it), but we neutralize explicitly in case is-motion ever co-occurs.
   Covers: all reveal targets, child-stagger parents, clip-path wipes (E01), count-up hosts,
   marquee (E06), header hide/progress (E07), hero parallax/sheen (E05), skeletons (E11),
   reading-progress (E12), scroll-timeline Ken-Burns (E14), pattern/gradient drift (E13). */
@media (prefers-reduced-motion: reduce) {
	html.is-motion .innovant-numcard,
	html.is-motion .innovant-sector-card,
	html.is-motion .innovant-journey__step,
	html.is-motion .innovant-faq2__item,
	html.is-motion .innovant-faq2__panel,
	html.is-motion .innovant-trust,
	html.is-motion .innovant-trust__list,
	html.is-motion .innovant-trust__chip,
	html.is-motion .innovant-section-head,
	html.is-motion .innovant-section-head .eyebrow,
	html.is-motion .innovant-kindex,
	html.is-motion .innovant-kindex__li,
	html.is-motion .innovant-svc-card,
	html.is-motion .innovant-svc-card__media,
	html.is-motion .innovant-cptcard,
	html.is-motion .innovant-cptcard__media,
	html.is-motion .innovant-guide-card,
	html.is-motion .innovant-guide-card__media,
	html.is-motion .innovant-guide-card__media img,
	html.is-motion .innovant-post-card,
	html.is-motion .innovant-archive-hero,
	html.is-motion .innovant-guide-hero__title,
	html.is-motion .innovant-cta-band__inner,
	html.is-motion .innovant-cta-card,
	html.is-motion .innovant-moretopic,
	html.is-motion .innovant-footer__top,
	html.is-motion .innovant-footer__legal,
	html.is-motion .innovant-fbar,
	html.is-motion .innovant-relsvc,
	html.is-motion .innovant-relsvc__thumb,
	html.is-motion .innovant-moretopic__thumb,
	html.is-motion .innovant-guide-lead,
	html.is-motion .innovant-guide-lead__img img,
	html.is-motion .innovant-guide-fig img,
	html.is-motion .innovant-hero__main > *,
	html.is-motion .innovant-hero__panel,
	html.is-motion .innovant-hero__panel-list > li,
	html.is-motion .innovant-hero__sheen,
	html.is-motion .innovant-topicpills,
	html.is-motion .innovant-topicpills > *,
	html.is-motion .innovant-topicpills__pill,
	html.is-motion .innovant-article-meta,
	html.is-motion .innovant-article-meta > *,
	html.is-motion .innovant-skel,
	html.is-motion .innovant-readprogress,
	html.is-motion .innovant-header__progress {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
		animation: none !important;
		animation-timeline: none !important;
	}
	/* Hero bg: visible + no parallax/scale-in. Header / hero globe: stop entrance + infinite drift. */
	html.is-motion .innovant-hero__bg,
	html.is-motion .innovant-header,
	html.is-motion .innovant-hero::before { animation: none !important; transform: none !important; opacity: 1 !important; }
	/* CTA texture: stop drift but KEEP its ghost opacity (do NOT force opacity:1 — that breaks
	   white-text contrast over the navy band). Override #5 trap fix. */
	html.is-motion .innovant-cta-band::before { animation: none !important; transform: none !important; }
	/* Marquee duplicate chips (E06) hidden under reduce → static flex-wrap trust row. */
	html.is-motion .innovant-trust__chip--clone { display: none !important; }
	html.is-motion .innovant-trust.is-marquee .innovant-trust__list { animation: none !important; inline-size: auto; flex-wrap: wrap; justify-content: center; }
	/* Icons fully drawn + static (no stroke-dashoffset draw-on). */
	html.is-motion .innovant-icon > * { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
	/* Client-logo marquee → static wrapped, full-colour, single set (clone hidden). */
	html.is-motion .innovant-clients__row { animation: none !important; flex-wrap: wrap; justify-content: center; inline-size: auto; }
	html.is-motion .innovant-clients__row .innovant-clients__set[aria-hidden="true"] { display: none !important; }
	html.is-motion .innovant-clients__logo { filter: none !important; opacity: 1 !important; }
	/* Global belt-and-suspenders reset. */
	* , *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   "Trusted by" client-logo wall (inc/clients.php)
   Two opposed seamless marquees; greyscale→colour; edge-fade; RTL-aware.
   ============================================================ */
.innovant-clients {
	--inv-logo-gap: clamp(2.25rem, 4vw, 4rem);
	padding-block: clamp(3rem, 6vw, 5.5rem);
	padding-inline: 0;
	background: var(--wp--preset--color--base);
	border-block: 1px solid var(--wp--preset--color--divider);
	overflow: hidden;
}
.innovant-clients__head {
	max-inline-size: 60rem;
	margin-inline: auto;
	margin-block-end: clamp(2rem, 4vw, 3rem);
	padding-inline: var(--wp--preset--spacing--40);
	text-align: center;
}
.innovant-clients__eyebrow { margin: 0 0 .5rem; }
.innovant-clients__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}
/* Viewport: clip + soft fade at both inline edges. */
.innovant-clients__viewport {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.innovant-clients__row {
	display: flex;
	inline-size: max-content;
	will-change: transform;
}
.innovant-clients__set {
	display: flex;
	align-items: center;
	gap: var(--inv-logo-gap);
	padding-inline-end: var(--inv-logo-gap);
	margin: 0;
	list-style: none;
}
.innovant-clients__item { flex: 0 0 auto; line-height: 0; }
.innovant-clients__logo {
	block-size: clamp(1.55rem, 2.4vw, 2.125rem);
	inline-size: auto;
	max-inline-size: 9.5rem;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .55;
	transition: filter .45s var(--inv-ease, cubic-bezier(.2,.6,.2,1)), opacity .45s var(--inv-ease, cubic-bezier(.2,.6,.2,1)), transform .45s var(--inv-ease, cubic-bezier(.2,.6,.2,1));
}
.innovant-clients__item:hover .innovant-clients__logo,
.innovant-clients__item:focus-within .innovant-clients__logo {
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-2px);
}
/* Marquee: each row holds two identical sets; translateX(-50%) loops seamlessly. */
html.is-motion .innovant-clients__row--a { animation: inv-logos var(--inv-logo-dur, 64s) linear infinite; }
html.is-motion .innovant-clients__row--b { animation: inv-logos var(--inv-logo-dur, 64s) linear infinite reverse; }
@keyframes inv-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Pause both rows when the wall is hovered/focused (readability). */
html.is-motion .innovant-clients__viewport:hover .innovant-clients__row,
html.is-motion .innovant-clients__viewport:focus-within .innovant-clients__row { animation-play-state: paused; }
/* RTL: a negative translateX (incl. via animation-direction:reverse) pushes the inline-start-anchored
 * track off the LEFT edge and empties the row. Use a rightward (+50%) keyframe so each row keeps
 * covering the viewport; keep the two rows opposed (a normal, b reverse) for the mirrored effect. */
html[dir="rtl"].is-motion .innovant-clients__row--a { animation-name: inv-logos-rtl; animation-direction: normal; }
html[dir="rtl"].is-motion .innovant-clients__row--b { animation-name: inv-logos-rtl; animation-direction: reverse; }
@keyframes inv-logos-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
/* No-motion / no-JS: static, full-colour, single wrapped row (clone hidden). */
html:not(.is-motion) .innovant-clients__row { flex-wrap: wrap; inline-size: auto; justify-content: center; }
html:not(.is-motion) .innovant-clients__set[aria-hidden="true"] { display: none; }
html:not(.is-motion) .innovant-clients__logo { filter: none; opacity: 1; }

/* ============================================================
   Signature interactions — 3D tilt + magnetic CTA (JS-driven, pointer-fine, motion-on only)
   ============================================================ */
/* During active tilt: no transition so the card follows the cursor 1:1. On leave the JS clears
   the class + inline transform and each card's own transform transition springs it back. */
html.is-motion .innovant-svc-card.is-tilting,
html.is-motion .innovant-cptcard.is-tilting,
html.is-motion .innovant-sector-card.is-tilting,
html.is-motion .innovant-guide-card.is-tilting { transition: none; }
/* Magnetic CTAs need a transform transition for the smooth pull + spring-back. */
html.is-motion .innovant-hero__cta .innovant-btn--amber,
html.is-motion .innovant-cta-band .wp-element-button,
html.is-motion .innovant-cta-card a { transition: transform .35s var(--inv-ease), background-color .15s var(--inv-ease), box-shadow .25s var(--inv-ease); }

/* ============================================================
   Semantic service/numbered list -> scannable cards (inc/content-format.php)
   ============================================================ */
.innovant-article-body .innovant-service-list {
	list-style: none; margin: 1.6em 0; padding: 0;
	display: grid; gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	max-inline-size: none;
}
.innovant-article-body .innovant-service-list li {
	margin: 0; padding: 1.1rem 1.3rem; line-height: 1.6;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--border-radius--lg);
}
.innovant-article-body .innovant-service-list li strong {
	display: block; margin-block-end: .35rem;
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--ink); font-weight: 700;
}
html.is-motion .innovant-service-list li { transition: transform .3s var(--inv-ease), box-shadow .3s var(--inv-ease), border-color .3s var(--inv-ease); }
html.is-motion .innovant-service-list li:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--md); border-color: rgba(11,104,154,.28); }

/* Safety guard: never allow sideways scroll from a stray over-wide element. */
html, body { overflow-x: clip; }

/* ============================================================
   Mobile nav drawer + skip-link (assets/js/nav.js)
   ============================================================ */
.innovant-mobile-toggle {
	display: none; appearance: none; background: transparent; border: 0; cursor: pointer;
	inline-size: 44px; block-size: 44px; padding: 10px; border-radius: var(--wp--custom--border-radius--md);
	color: #fff; align-items: center; justify-content: center; flex: 0 0 auto;
}
.innovant-mobile-toggle:hover { background: rgba(255,255,255,.12); }
.innovant-mobile-toggle__bars { display: block; inline-size: 22px; block-size: 16px; position: relative; }
.innovant-mobile-toggle__bars span { position: absolute; inset-inline: 0; block-size: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--inv-ease), opacity .2s var(--inv-ease); }
.innovant-mobile-toggle__bars span:nth-child(1) { top: 0; }
.innovant-mobile-toggle__bars span:nth-child(2) { top: 7px; }
.innovant-mobile-toggle__bars span:nth-child(3) { top: 14px; }
.innovant-header.is-nav-open .innovant-mobile-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.innovant-header.is-nav-open .innovant-mobile-toggle__bars span:nth-child(2) { opacity: 0; }
.innovant-header.is-nav-open .innovant-mobile-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
	.innovant-header { position: relative; }
	html.has-jsnav .innovant-mobile-toggle { display: inline-flex; }
	/* Primary nav -> disclosure drawer below the bar (JS present). */
	html.has-jsnav .innovant-primary-nav {
		position: absolute; inset-inline: 0; top: 100%; z-index: 60;
		background: var(--wp--preset--color--navy);
		border-block-start: 1px solid rgba(255,255,255,.12);
		box-shadow: var(--wp--preset--shadow--lg);
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
		opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none;
		transition: opacity .25s var(--inv-ease), transform .25s var(--inv-ease), visibility .25s;
	}
	html.has-jsnav .innovant-header.is-nav-open .innovant-primary-nav {
		opacity: 1; visibility: visible; transform: none; pointer-events: auto;
	}
	html.has-jsnav .innovant-primary-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
	.innovant-primary-nav__link { display: block; padding: 12px 8px; }
	/* Drawer can get tall with all submenus open — keep it scrollable within the viewport. */
	html.has-jsnav .innovant-primary-nav { max-block-size: calc(100dvh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
	/* Mega-menu submenus become inline accordions in the drawer (collapsed until the toggle opens). */
	html.has-jsnav .innovant-primary-nav__item { flex-wrap: wrap; }
	html.has-jsnav .innovant-primary-nav__item--parent > .innovant-primary-nav__link { flex: 1 1 auto; }
	html.has-jsnav .innovant-primary-nav__toggle { margin-inline-start: auto; padding: 12px; }
	html.has-jsnav .innovant-primary-nav__chevron { border-color: rgba(255,255,255,.8); }
	html.has-jsnav .innovant-primary-nav__item--parent:focus-within .innovant-primary-nav__chevron { transform: translateY(-2px) rotate(45deg); } /* reset: in the drawer the chevron reflects aria-expanded, not focus */
	html.has-jsnav .innovant-primary-nav__toggle[aria-expanded="true"] .innovant-primary-nav__chevron { transform: translateY(1px) rotate(-135deg); }
	html.has-jsnav .innovant-primary-nav__submenu {
		position: static; z-index: auto; flex-basis: 100%; inline-size: 100%;
		min-inline-size: 0; max-inline-size: none; grid-template-columns: 1fr; gap: 0;
		margin: 0 0 6px; padding: 0; background: transparent; box-shadow: none; border-radius: 0;
		opacity: 1; visibility: visible; transform: none; display: none; /* collapsed until toggled */
	}
	html.has-jsnav .innovant-primary-nav__toggle[aria-expanded="true"] + .innovant-primary-nav__submenu { display: block; }
	html.has-jsnav .innovant-primary-nav__sublink { color: rgba(255,255,255,.82); padding-block: 10px; padding-inline-start: 22px; }
	html.has-jsnav .innovant-primary-nav__sublink:hover, html.has-jsnav .innovant-primary-nav__sublink:focus-visible { background: rgba(255,255,255,.10); color: #fff; }
	/* No-JS fallback: stacked, visible nav (never a dead end). */
	html:not(.has-jsnav) .innovant-primary-nav__list { flex-direction: column; }
	/* Keep the CTA compact on small screens so the bar never overflows. */
	.innovant-header__actions { gap: 10px; }
}
@media (min-width: 881px) { .innovant-mobile-toggle { display: none !important; } }
@media (max-width: 520px) {
	.innovant-header__actions .wp-block-button__link { padding-inline: 14px; font-size: var(--wp--preset--font-size--sm); }
}
/* The <main> skip-link target shouldn't show a focus ring when focused programmatically. */
#wp--skip-link--target:focus, main[tabindex="-1"]:focus { outline: none; }

/* ============================================================
   Saudi-in-numbers stat meters (data-viz; inc/sections.php)
   The numeric text is the accessible source of truth; the bar is aria-hidden decoration.
   ============================================================ */
.innovant-numcard__meter { margin-block: .8rem .65rem; block-size: 6px; border-radius: 999px; background: rgba(11,104,154,.12); overflow: hidden; }
.innovant-numcard__meter-fill {
	display: block; block-size: 100%; inline-size: 100%; border-radius: inherit;
	transform-origin: inline-start; transform: scaleX(var(--fill, 1));
	background: var(--wp--preset--color--primary);
}
/* Animate the fill on reveal; base (no-motion) shows the true fill statically. */
html.is-motion:not(.is-motion-done) .innovant-numcard__meter-fill { transform: scaleX(0); transition: transform .9s var(--inv-ease) .25s; }
html.is-motion .innovant-numcard.is-inview .innovant-numcard__meter-fill { transform: scaleX(var(--fill, 1)); }

/* Article FAQ accordions (reuse .innovant-faq2; the question is an <h3> for heading nav). */
.innovant-article-body .innovant-article-faq { margin-block: 1.8em 0; max-inline-size: none; }
.innovant-faq2__qh { margin: 0; display: inline; font-size: inherit; font-weight: inherit; font-family: inherit; line-height: inherit; color: inherit; }

/* ---------- Reduced motion already handled above; keep transforms subtle ---------- */

/* ============================================================
   View Transitions — smooth same-origin page-to-page navigation (progressive enhancement).
   Browsers without cross-document VT just navigate normally; nothing else changes.
   ============================================================ */
@view-transition { navigation: auto; }
/* Keep the cross-fade quick so navigation never feels sluggish. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
/* Respect reduced motion: no transition animation at all. */
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ============================================================
   SECTION RHYTHM + SEPARATOR LIBRARY (Tasks 2-3; see DESIGN.md).
   Token-driven section backgrounds + a small set of reusable transitions to replace
   flat color stops. Asymmetric transitions (diagonal/line) are RTL-mirrored.
   Applied as utility classes on .innovant-home-section.
   ============================================================ */

/* --- Background treatments. Rhythm rule: no two adjacent the same; max one "loud" in a row. --- */
.innovant-band--alt  { background: var(--c-blue-100); }   /* cool tint (existing) */
.innovant-band--sand { background-color: var(--c-sand); }  /* (retired on the homepage; kept for other templates) */
/* navy bg + motif are defined earlier with background-color so the dot-grid image is preserved */
.innovant-band--navy .innovant-section-head__title { color: var(--c-paper); }
.innovant-band--navy .innovant-section-head__intro,
.innovant-band--navy p { color: rgba(255,255,255,.84); }
.innovant-band--navy .eyebrow { color: var(--c-amber); }

/* --- (d) Thin gradient accent line: a subtle amber seam at the section's top edge. --- */
.innovant-sep-line { position: relative; }
.innovant-sep-line::before {
	content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 2px;
	background: var(--divider-accent); /* amber -> transparent from the inline-start */
}
[dir="rtl"] .innovant-sep-line::before { background: linear-gradient(270deg, var(--c-amber), transparent); }

/* --- (b) Diagonal cut: the section's bottom edge slopes; RTL flips the slope direction. ---
   The section sits ABOVE the next (z-index) and the next section slides up under the cut
   (.innovant-overlap-up) so the cut reveals the NEXT section's colour, not the body. */
.innovant-sep-diagonal { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3.5vw)); position: relative; z-index: 1; }
[dir="rtl"] .innovant-sep-diagonal { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%); }
.innovant-overlap-up { margin-block-start: -3.5vw; }

/* Dark/"loud" section — adapt the Saudi-numbers cards to light-on-navy. */
.innovant-band--navy .innovant-numcard { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: none; }
.innovant-band--navy .innovant-numcard__n { color: var(--c-paper); }
.innovant-band--navy .innovant-numcard__l { color: rgba(255,255,255,.72); }
.innovant-band--navy .innovant-numcard__meter { background: rgba(255,255,255,.14); }
.innovant-band--navy .innovant-numcard__meter-fill { background: var(--c-amber); }

/* ============================================================
   UNIFIED IMAGERY (Task 4): ONE navy-brand tint over all photographic card media so
   photos read as a family; icon badges get the same brand-block so icon + photo cards cohere.
   Tint via background-blend-mode (no pseudo-element conflict; existing photos need no re-export).
   ============================================================ */
.innovant-svc-card__media, .innovant-cptcard__media, .innovant-post-card__media, .innovant-guide-card__media {
	background-color: var(--c-navy-900);
	background-blend-mode: soft-light; /* faint uniform navy wash — unifies WITHOUT muddying the premium service renders (the model) */
}
/* Icon badges: a branded navy->teal block + white glyph (depth + family with the photo cards). */
.innovant-svc-card__ico, .innovant-kindex__ico {
	background: linear-gradient(150deg, var(--c-navy-600), var(--c-navy-800));
	color: var(--c-paper);
}
.innovant-svc-card__ico .innovant-icon, .innovant-kindex__ico .innovant-icon { color: var(--c-paper); }

/* ============================================================
   DEPTH & LAYERING (Task 5): a consistent base shadow so cards float on a layer, plus a
   deeper GPU-cheap hover lift (transform/opacity only -> no CLS), disabled under reduced motion.
   Section-level layering is handled by the diagonal overlap + .innovant-seam (Tasks 2-3).
   ============================================================ */
.innovant-svc-card, .innovant-cptcard, .innovant-post-card, .innovant-guide-card,
.innovant-sector-card, .innovant-journey__link, .innovant-card { box-shadow: var(--shadow-sm); }
html.is-motion .innovant-svc-card:hover, html.is-motion .innovant-cptcard:hover,
html.is-motion .innovant-post-card:hover, html.is-motion .innovant-guide-card:hover,
html.is-motion .innovant-sector-card:hover, html.is-motion .innovant-journey__link:hover {
	transform: translateY(-6px); box-shadow: var(--shadow-lg);
}
@media (prefers-reduced-motion: reduce) {
	.innovant-svc-card:hover, .innovant-cptcard:hover, .innovant-post-card:hover,
	.innovant-guide-card:hover, .innovant-sector-card:hover, .innovant-journey__link:hover { transform: none; }
}

/* --- (a) Soft curve: symmetric concave base — no RTL flip needed (logical radii). --- */
.innovant-sep-curve { border-end-start-radius: 50% 3.5vw; border-end-end-radius: 50% 3.5vw; }

/* --- (c) Overlap seam: a block straddles two backgrounds, raised on a shadow. --- */
.innovant-seam { margin-block-start: calc(-1 * var(--space-l)); position: relative; z-index: 2; box-shadow: var(--shadow-md); border-radius: var(--radius-m); background: var(--c-paper); }

/* Reduced motion is irrelevant here (no motion); these are static layout transitions. */

/* ============================================================
   SETUP-PROCESS ROADMAP (Phase 1, innovant/journey block) — ORIGINAL vertical journey timeline
   (deliberately NOT a horizontal rail/tab copy). A vertical spine of milestones; each shows its
   step + the government platforms used in it as inline pill-links. Pure CSS, no JS, token-driven,
   RTL-first (spine + markers sit on the inline-start = right in RTL).
   ============================================================ */
.innovant-roadmap-wrap { position: relative; max-inline-size: 760px; margin-inline: auto; }
/* Comet rail — a glowing dot travels down the path on scroll, drawing an amber trail (JS-driven). */
.innovant-roadmap__rail { position: absolute; inset-inline-start: 23px; inset-block-start: 0; inline-size: 2px; block-size: 0; background: rgba(11,104,154,.14); border-radius: 2px; z-index: 0; pointer-events: none; }
.innovant-roadmap__rail-fill { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; block-size: 0; border-radius: 2px; background: linear-gradient(180deg, var(--c-amber-dark), var(--c-amber)); }
.innovant-roadmap__rail-fill::after { content: ""; position: absolute; inset-block-end: -5px; inset-inline-start: -5px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--c-amber); opacity: 0; transition: opacity .3s var(--inv-ease); box-shadow: 0 0 12px 3px rgba(212,136,46,.55), 0 0 0 4px rgba(212,136,46,.20); }
html.is-motion .innovant-roadmap__rail.is-travelling .innovant-roadmap__rail-fill::after { opacity: 1; animation: inv-comet 1.5s ease-in-out infinite; }
@keyframes inv-comet { 0%, 100% { box-shadow: 0 0 10px 2px rgba(212,136,46,.5), 0 0 0 4px rgba(212,136,46,.18); } 50% { box-shadow: 0 0 22px 6px rgba(212,136,46,.72), 0 0 0 9px rgba(212,136,46,.07); } }
/* When the comet rail is active, hide the static per-step spine (rail replaces it). No-JS keeps ::before. */
.innovant-roadmap.has-rail .innovant-roadmap__step::before { display: none; }
@media (prefers-reduced-motion: reduce) { .innovant-roadmap__rail-fill::after { animation: none; } }

/* ============================================================
   COST + TIME ESTIMATOR — the flagship interactive tool. Inputs on one side,
   a signature navy "Cost x Time" result card on the other. Bilingual + RTL-first;
   works server-rendered without JS (JS only makes it live).
   ============================================================ */
.innovant-est { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-l); align-items: start; max-inline-size: 1000px; margin-inline: auto; }
@media (max-width: 760px) { .innovant-est { grid-template-columns: 1fr; } }
.innovant-est__form { display: grid; gap: var(--space-s); align-content: start; }
.innovant-est__field { display: grid; gap: 6px; }
.innovant-est__label { font-size: var(--step--1); font-weight: 700; color: var(--c-navy-800); }
.innovant-est__select, .innovant-est__number { inline-size: 100%; padding: 10px 13px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--radius-s); background: var(--c-paper); color: var(--c-ink); font: inherit; font-size: 1rem; }
.innovant-est__select:focus-visible, .innovant-est__number:focus-visible { outline: 2px solid var(--c-navy-600); outline-offset: 1px; }
.innovant-est__result { position: relative; overflow: hidden; background: linear-gradient(158deg, var(--c-navy-800), var(--c-navy-900)); color: #fff; border-radius: var(--radius-m); padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); box-shadow: var(--shadow-lg); }
.innovant-est__result::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: url("../images/patterns/pattern-1.png"); background-size: 420px; opacity: .05; mix-blend-mode: screen; pointer-events: none; }
.innovant-est__result > * { position: relative; z-index: 1; }
.innovant-est__result-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); margin-block-end: var(--space-s); }
.innovant-est__result-eyebrow { font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-amber); }
.innovant-est__currency { display: inline-flex; background: rgba(255,255,255,.1); border-radius: 999px; padding: 3px; }
.innovant-est__cur { border: 0; background: transparent; color: rgba(255,255,255,.72); font: inherit; font-size: var(--wp--preset--font-size--xs); font-weight: 700; padding: 5px 13px; border-radius: 999px; cursor: pointer; transition: background-color .2s var(--inv-ease), color .2s var(--inv-ease); }
.innovant-est__cur.is-active { background: var(--c-amber); color: #10243A; }
.innovant-est__cur:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.innovant-est__headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-m); padding-block-end: var(--space-s); border-block-end: 1px solid rgba(255,255,255,.14); margin-block-end: var(--space-s); }
.innovant-est__cost { display: flex; align-items: baseline; gap: 8px; }
.innovant-est__cost-cur { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,.75); }
.innovant-est__cost-val { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); line-height: 1.03; letter-spacing: -.02em; }
.innovant-est__time { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.92); font-size: var(--step-0); }
.innovant-est__time-ico { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 8px; background: rgba(212,136,46,.18); color: var(--c-amber); flex: none; }
.innovant-est__time-ico .innovant-icon { inline-size: 17px; block-size: 17px; }
.innovant-est__time-val { font-weight: 700; }
.innovant-est__lines { list-style: none; margin: 0 0 var(--space-s); padding: 0; display: grid; gap: 9px; }
.innovant-est__line { display: flex; justify-content: space-between; gap: var(--space-s); font-size: var(--step--1); color: rgba(255,255,255,.82); }
.innovant-est__line-val { color: #fff; font-weight: 600; white-space: nowrap; }
.innovant-est__note { font-size: var(--wp--preset--font-size--xs); color: rgba(255,255,255,.62); line-height: 1.55; margin: 0 0 var(--space-s); }
.innovant-est__cta { margin: 0; }

/* Plan-tools tab suite (cost estimator | route finder). */
.innovant-tools { max-inline-size: 1000px; margin-inline: auto; }
.innovant-tools__tabs { display: inline-flex; gap: 4px; padding: 4px; background: rgba(11,104,154,.08); border-radius: 999px; margin-block-end: var(--space-l); flex-wrap: wrap; }
.innovant-tools__tab { border: 0; background: transparent; color: var(--c-navy-800); font: inherit; font-size: var(--step--1); font-weight: 700; padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: background-color .2s var(--inv-ease), color .2s var(--inv-ease); }
.innovant-tools__tab.is-active { background: var(--c-navy-800); color: #fff; }
.innovant-tools__tab:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px; }
.innovant-tools:not(.has-js) .innovant-tools__panel + .innovant-tools__panel { margin-block-start: var(--space-xl); }
.innovant-tools__panel[hidden] { display: none; }

/* Route finder result (sits on the shared .innovant-est__result navy card). */
.innovant-route__result { display: grid; gap: var(--space-2xs); }
.innovant-route__verdict { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--step-0); color: #fff; }
.innovant-route__verdict-ico { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; flex: none; }
.innovant-route__verdict.is-yes .innovant-route__verdict-ico { background: rgba(84,214,143,.18); color: #74e3a3; }
.innovant-route__verdict.is-cond .innovant-route__verdict-ico { background: rgba(212,136,46,.2); color: var(--c-amber); }
.innovant-route__verdict-ico .innovant-icon { inline-size: 17px; block-size: 17px; }
.innovant-route__note { color: rgba(255,255,255,.72); font-size: var(--wp--preset--font-size--sm); }
.innovant-route__note:empty { display: none; }
.innovant-route__row { display: flex; justify-content: space-between; gap: var(--space-s); align-items: baseline; padding-block: 9px; border-block-start: 1px solid rgba(255,255,255,.12); }
.innovant-route__row:first-of-type { margin-block-start: var(--space-s); }
.innovant-route__row-label { font-size: var(--step--1); color: rgba(255,255,255,.7); flex: none; }
.innovant-route__licence, .innovant-route__vehicle { font-weight: 700; color: #fff; font-size: var(--step-0); text-align: end; }
.innovant-route__time { font-weight: 700; color: var(--c-amber); text-align: end; }
.innovant-route__why { color: rgba(255,255,255,.78); font-size: var(--wp--preset--font-size--sm); line-height: 1.5; margin: 4px 0 var(--space-s); }

/* ---- Route-finder DIFFERENTIATION — it sits on a DARK navy band, columns mirrored, distinct motion,
        so it never reads as a twin of the light estimator section above it (see front-page.html). ---- */
/* On the navy band the shared navy-gradient result card would vanish (navy-on-navy), so lift it to a
   translucent panel — same treatment as .innovant-band--navy .innovant-numcard (line ~1844). */
.innovant-band--navy .innovant-est__result { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); box-shadow: none; }
/* Form field labels flip to light on the dark band (they are navy-800 by default = invisible on navy). */
.innovant-band--navy .innovant-est__label { color: rgba(255,255,255,.82); }
/* Mirror the columns vs the estimator (form-left/card-right -> card-left/form-right). Logical `order`
   so it flips correctly in RTL; only above the mobile collapse so <=760px stays form-first, stacked. */
@media (min-width: 761px) {
	.innovant-route-section .innovant-est { grid-template-columns: 1.1fr 0.9fr; }
	.innovant-route-section .innovant-route__result { order: -1; }
}
/* Distinct entrance motion (different vocabulary per neighbour). Estimator: breakdown lines rise +
   cascade. Finder: verdict STAMPS in (settles down from scale 1.08) then the fact-rows DROP in. */
html.is-motion:not(.is-motion-done) .innovant-est__line,
html.is-motion:not(.is-motion-done) .innovant-route__row {
	opacity: 0; transform: translateY(16px);
	transition: opacity var(--inv-dur) var(--inv-ease), transform var(--inv-dur) var(--inv-ease);
	will-change: opacity, transform;
}
html.is-motion:not(.is-motion-done) .innovant-route__verdict {
	opacity: 0; transform: scale(1.08);
	transition: opacity var(--inv-dur) var(--inv-ease), transform var(--inv-dur) var(--inv-ease);
	will-change: opacity, transform;
}
.innovant-roadmap { list-style: none; margin: 0; padding: 0; }
.innovant-roadmap__step { position: relative; padding-inline-start: 70px; padding-block-end: var(--space-l); }
.innovant-roadmap__step:last-child { padding-block-end: 0; }
/* vertical spine connecting the markers (inline-start side; RTL -> right by logical prop) */
.innovant-roadmap__step::before { content: ""; position: absolute; inset-inline-start: 23px; inset-block: 8px -8px; inline-size: 2px; background: var(--wp--preset--color--line); }
.innovant-roadmap__step:last-child::before { display: none; }
.innovant-roadmap__marker { position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 48px; block-size: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(150deg, var(--c-navy-600), var(--c-navy-800)); box-shadow: var(--shadow-sm); z-index: 1; }
.innovant-roadmap__ico { display: grid; place-items: center; }
.innovant-roadmap__ico .innovant-icon { inline-size: 22px; block-size: 22px; color: var(--c-paper); }
.innovant-roadmap__num { position: absolute; inset-block-start: -7px; inset-inline-end: -7px; min-inline-size: 22px; block-size: 22px; padding-inline: 5px; border-radius: 999px; background: var(--c-amber); color: #10243A; font-family: var(--wp--preset--font-family--body); font-size: .72rem; font-weight: 700; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.innovant-roadmap__title { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--step-1); line-height: 1.2; color: var(--c-ink); margin: 2px 0 6px; }
.innovant-roadmap__desc { color: var(--c-ink-muted); margin: 0 0 var(--space-s); max-inline-size: 58ch; }
.innovant-roadmap__platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.innovant-roadmap__platlabel { font-size: var(--step--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-navy-600); margin-inline-end: 4px; }
.innovant-roadmap__pill { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--wp--custom--border-radius--pill); border: 1px solid var(--wp--preset--color--line); background: var(--c-paper); color: var(--c-ink); font-size: var(--wp--preset--font-size--sm); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .18s var(--inv-ease), border-color .18s var(--inv-ease), box-shadow .18s var(--inv-ease), color .18s; }
.innovant-roadmap__pill:hover { border-color: var(--c-navy-600); color: var(--c-navy-600); }
html.is-motion .innovant-roadmap__pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.innovant-roadmap__pill:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px; }
.innovant-roadmap__cta { margin: var(--space-l) 0 0; padding-inline-start: 70px; }
.innovant-roadmap__all { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--c-navy-600); text-decoration: none; }
.innovant-roadmap__all:hover { color: var(--c-amber-dark); }
[dir="rtl"] .innovant-roadmap__all span[aria-hidden] { transform: scaleX(-1); }
@media (max-width: 560px) { .innovant-roadmap__step, .innovant-roadmap__cta { padding-inline-start: 58px; } }
@media (prefers-reduced-motion: reduce) { .innovant-roadmap__pill:hover { transform: none; } }

/* ============================================================
   SERVICES DIRECTORY — the real service CPT as a lifecycle-segmented,
   ALL-VISIBLE editorial directory. Original concept (NOT a tabbed rail
   copy, NOT an identical card grid): stage label + index, then service
   rows (icon chip + title + live excerpt + sliding arrow). RTL-first.
   ============================================================ */
.innovant-svcdir { max-inline-size: 860px; margin-inline: auto; display: grid; gap: var(--space-l); }
.innovant-svcdir__stagehead { display: flex; align-items: baseline; gap: var(--space-2xs); padding-block-end: var(--space-2xs); border-block-end: 2px solid var(--wp--preset--color--line); margin-block-end: var(--space-2xs); }
.innovant-svcdir__stagenum { font-family: var(--wp--preset--font-family--display); font-size: var(--step-0); font-weight: 700; color: var(--c-amber); font-variant-numeric: tabular-nums; line-height: 1; }
.innovant-svcdir__stagename { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--step-1); line-height: 1.1; color: var(--c-navy-800); letter-spacing: -.01em; }
.innovant-svcdir__list { list-style: none; margin: 0; padding: 0; }
.innovant-svcdir__item + .innovant-svcdir__item { border-block-start: 1px solid rgba(15,40,64,.10); }
.innovant-svcdir__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--space-s); padding: var(--space-s) var(--space-xs); text-decoration: none; color: inherit; border-radius: var(--radius-m); transition: background-color .25s var(--inv-ease); }
.innovant-svcdir__row:hover, .innovant-svcdir__row:focus-visible { background: rgba(11,104,154,.06); outline: none; }
.innovant-svcdir__row:focus-visible { box-shadow: inset 0 0 0 2px var(--c-amber); }
.innovant-svcdir__ico { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; background: rgba(11,104,154,.09); color: var(--c-navy-600); flex: none; }
.innovant-svcdir__ico .innovant-icon { inline-size: 24px; block-size: 24px; }
.innovant-svcdir__title { display: block; font-weight: 700; font-size: var(--step-0); color: var(--c-navy-800); line-height: 1.25; }
.innovant-svcdir__desc { display: block; margin-block-start: 3px; color: var(--c-ink-muted); font-size: var(--step--1); line-height: 1.5; max-inline-size: 56ch; }
.innovant-svcdir__arrow { color: var(--c-amber); font-size: 1.15rem; opacity: .55; transition: transform .25s var(--inv-ease), opacity .25s var(--inv-ease); }
.innovant-svcdir__row:hover .innovant-svcdir__arrow, .innovant-svcdir__row:focus-visible .innovant-svcdir__arrow { opacity: 1; transform: translateX(4px); }
[dir="rtl"] .innovant-svcdir__arrow { transform: scaleX(-1); }
[dir="rtl"] .innovant-svcdir__row:hover .innovant-svcdir__arrow, [dir="rtl"] .innovant-svcdir__row:focus-visible .innovant-svcdir__arrow { transform: scaleX(-1) translateX(4px); }
.innovant-svcdir__cta { margin: var(--space-l) 0 0; text-align: center; }
.innovant-svcdir__all { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--c-navy-600); text-decoration: none; }
.innovant-svcdir__all:hover { color: var(--c-amber-dark); }
[dir="rtl"] .innovant-svcdir__all span[aria-hidden] { transform: scaleX(-1); }
@media (max-width: 560px) {
	.innovant-svcdir__ico { inline-size: 44px; block-size: 44px; }
	.innovant-svcdir__ico .innovant-icon { inline-size: 21px; block-size: 21px; }
	.innovant-svcdir__row { column-gap: var(--space-xs); padding: var(--space-s) var(--space-3xs); }
}
@media (prefers-reduced-motion: reduce) {
	.innovant-svcdir__row:hover .innovant-svcdir__arrow, .innovant-svcdir__row:focus-visible .innovant-svcdir__arrow { transform: none; }
	[dir="rtl"] .innovant-svcdir__row:hover .innovant-svcdir__arrow, [dir="rtl"] .innovant-svcdir__row:focus-visible .innovant-svcdir__arrow { transform: scaleX(-1); }
}

/* ============================================================
   SECTOR INDICATOR BOARD — real sector CPT as data tiles: cited
   Vision-2030 indicator (value + label + source) led by the figure,
   with a trend sparkline where real series data exists. A DATA display,
   not an icon+text card grid. RTL-first (sparkline flips for R-to-L time).
   ============================================================ */
.innovant-sectorgrid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.innovant-sectile { display: grid; align-content: start; gap: 6px; padding: var(--space-m); background: var(--c-paper); border: 1px solid var(--wp--preset--color--line); border-radius: var(--radius-m); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: transform .25s var(--inv-ease), box-shadow .25s var(--inv-ease), border-color .25s var(--inv-ease); }
.innovant-sectile:hover { border-color: var(--c-navy-600); }
html.is-motion .innovant-sectile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.innovant-sectile:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px; }
.innovant-sectile__head { display: flex; align-items: center; gap: var(--space-2xs); }
.innovant-sectile__ico { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 9px; background: rgba(11,104,154,.09); color: var(--c-navy-600); flex: none; }
.innovant-sectile__ico .innovant-icon { inline-size: 19px; block-size: 19px; }
.innovant-sectile__name { font-weight: 700; font-size: var(--step--1); color: var(--c-navy-800); line-height: 1.2; }
.innovant-sectile__arrow { margin-inline-start: auto; color: var(--c-amber); opacity: .5; transition: transform .25s var(--inv-ease), opacity .25s var(--inv-ease); }
.innovant-sectile:hover .innovant-sectile__arrow { opacity: 1; transform: translateX(3px); }
[dir="rtl"] .innovant-sectile__arrow { transform: scaleX(-1); }
[dir="rtl"] .innovant-sectile:hover .innovant-sectile__arrow { transform: scaleX(-1) translateX(3px); }
.innovant-sectile__metric { display: flex; align-items: baseline; gap: var(--space-2xs); flex-wrap: wrap; margin-block-start: 4px; }
.innovant-sectile__value { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--step-2); line-height: 1; color: var(--c-navy-900); letter-spacing: -.02em; }
.innovant-sectile__tag { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-amber-dark); background: rgba(212,136,46,.12); padding: 3px 8px; border-radius: 999px; align-self: center; }
.innovant-sectile__note { font-size: var(--step--1); font-weight: 600; color: var(--c-navy-600); }
.innovant-sectile__label { font-size: var(--step--1); color: var(--c-ink-muted); line-height: 1.35; }
.innovant-sectile__spark { display: block; block-size: 26px; margin-block-start: 2px; }
.innovant-spark { display: block; inline-size: 96px; block-size: 26px; }
[dir="rtl"] .innovant-spark { transform: scaleX(-1); }
.innovant-spark__line { fill: none; stroke: var(--c-amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.innovant-spark__area { fill: var(--c-amber); opacity: .10; }
.innovant-spark__dot { fill: var(--c-amber); }
.innovant-sectile__src { font-size: .72rem; color: var(--c-ink-muted); opacity: .9; }
.innovant-sectorgrid__foot { margin: var(--space-m) 0 0; font-size: var(--step--1); color: var(--c-ink-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) {
	.innovant-sectile:hover { transform: none; }
	.innovant-sectile:hover .innovant-sectile__arrow { transform: none; }
	[dir="rtl"] .innovant-sectile:hover .innovant-sectile__arrow { transform: scaleX(-1); }
}

/* ============================================================
   FOOTER FINISHER — honest trust strip, icon quick-contacts (incl.
   WhatsApp), and config-gated social (renders only configured profiles).
   ============================================================ */
.innovant-footer__trust { max-inline-size: 1180px; margin: 0 auto var(--wp--preset--spacing--60); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-l); padding-block-end: var(--wp--preset--spacing--40); border-block-end: 1px solid rgba(255,255,255,.12); }
.innovant-ftrust__item { display: inline-flex; align-items: center; gap: 9px; font-size: var(--wp--preset--font-size--sm); color: rgba(255,255,255,.85); font-weight: 600; text-decoration: none; }
a.innovant-ftrust__item--link:hover { color: #fff; }
.innovant-ftrust__ico { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 8px; background: rgba(255,255,255,.08); color: var(--c-amber); flex: none; }
.innovant-ftrust__ico .innovant-icon { inline-size: 16px; block-size: 16px; }

.innovant-footer__contact ul.innovant-qcontact { gap: var(--wp--preset--spacing--30); }
.innovant-qcontact__link { display: inline-flex; align-items: center; gap: 10px; }
.innovant-qcontact__ico { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 9px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); flex: none; transition: background-color .2s var(--inv-ease), color .2s var(--inv-ease); }
.innovant-qcontact__link:hover .innovant-qcontact__ico { background: var(--c-amber); color: #10243A; }
.innovant-qcontact__ico .innovant-icon { inline-size: 16px; block-size: 16px; }
.innovant-qcontact__txt { line-height: 1.25; }
.innovant-qcontact__val { display: block; color: rgba(255,255,255,.58); font-size: var(--wp--preset--font-size--xs); }

.innovant-fsocial { display: flex; gap: 10px; margin-block-start: var(--wp--preset--spacing--40); }
.innovant-fsocial__link { display: inline-grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); transition: background-color .2s var(--inv-ease), color .2s var(--inv-ease), border-color .2s var(--inv-ease); }
.innovant-fsocial__link:hover { background: var(--c-amber); border-color: var(--c-amber); color: #10243A; }
.innovant-fsocial__link .innovant-icon { inline-size: 18px; block-size: 18px; }
@media (max-width: 640px) { .innovant-footer__trust { gap: var(--space-2xs) var(--space-m); } }

/* ============================================================
   MOTION WIRING — the rebuilt P1 sections (roadmap / sector board /
   services) plugged into the shared reveal engine + their signature
   motions. Every hidden state is gated by html.is-motion:not(.is-motion-done)
   so reduced-motion / no-JS / the 2.5s failsafe all show everything, static.
   ============================================================ */
/* Soft rise-in (gentler than the 104px block reveal — these are finer elements). */
html.is-motion:not(.is-motion-done) .innovant-sectile,
html.is-motion:not(.is-motion-done) .innovant-svcdir__stage,
html.is-motion:not(.is-motion-done) .innovant-svcdir__item,
html.is-motion:not(.is-motion-done) .innovant-roadmap__step {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity var(--inv-dur) var(--inv-ease), transform var(--inv-dur) var(--inv-ease);
	will-change: opacity, transform;
}

/* Roadmap signature: the spine draws DOWN as each milestone enters, the marker pops,
   the number badge snaps in, then title -> desc -> platforms cascade. */
html.is-motion:not(.is-motion-done) .innovant-roadmap__step::before { transform: scaleY(0); transform-origin: top; }
html.is-motion:not(.is-motion-done) .innovant-roadmap__marker { transform: scale(.55); opacity: 0; }
html.is-motion:not(.is-motion-done) .innovant-roadmap__num { transform: scale(0); }
html.is-motion:not(.is-motion-done) :where(.innovant-roadmap__title, .innovant-roadmap__desc, .innovant-roadmap__platforms) { opacity: 0; transform: translateY(10px); }
html.is-motion .innovant-roadmap__step::before { transition: transform .7s var(--inv-ease) .06s; }
html.is-motion .innovant-roadmap__marker { transition: transform .5s var(--inv-ease) .1s, opacity .4s var(--inv-ease) .1s; }
html.is-motion .innovant-roadmap__num { transition: transform .42s var(--inv-ease) .34s; }
html.is-motion :where(.innovant-roadmap__title, .innovant-roadmap__desc, .innovant-roadmap__platforms) { transition: opacity .5s var(--inv-ease), transform .5s var(--inv-ease); }
html.is-motion .innovant-roadmap__step.is-inview::before { transform: scaleY(1); }
html.is-motion .innovant-roadmap__step.is-inview .innovant-roadmap__marker { transform: none; opacity: 1; }
html.is-motion .innovant-roadmap__step.is-inview .innovant-roadmap__num { transform: none; }
html.is-motion .innovant-roadmap__step.is-inview .innovant-roadmap__title { opacity: 1; transform: none; transition-delay: .16s; }
html.is-motion .innovant-roadmap__step.is-inview .innovant-roadmap__desc { opacity: 1; transform: none; transition-delay: .24s; }
html.is-motion .innovant-roadmap__step.is-inview .innovant-roadmap__platforms { opacity: 1; transform: none; transition-delay: .32s; }
/* Marker keeps its full hover/active interactivity once revealed. */
html.is-motion .innovant-roadmap__step.is-inview .innovant-roadmap__marker { box-shadow: var(--shadow-md); }

/* Roadmap SCROLL PROGRESS + hover — passed milestones turn amber (the spine fills), the current one
   pulses, and hovering a milestone lifts its marker + zooms its photo. is-reached/is-active are added
   by motion.js on scroll; reduced-motion (no is-motion) leaves the timeline static + fully readable. */
html.is-motion .innovant-roadmap__marker { transition: transform .5s var(--inv-ease) .1s, opacity .4s var(--inv-ease) .1s, box-shadow .45s var(--inv-ease); }
html.is-motion .innovant-roadmap__step::before { transition: transform .7s var(--inv-ease) .06s, background-color .55s var(--inv-ease); }
html.is-motion .innovant-roadmap__ico .innovant-icon { transition: color .4s var(--inv-ease); }
.innovant-roadmap__marker::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(150deg, var(--c-amber), var(--c-amber-dark)); opacity: 0; transition: opacity .45s var(--inv-ease); }
html.is-motion .innovant-roadmap__step.is-reached .innovant-roadmap__marker::before { opacity: 1; }
html.is-motion .innovant-roadmap__step.is-reached .innovant-roadmap__marker { box-shadow: 0 0 0 5px rgba(212,136,46,.16), var(--shadow-md); }
html.is-motion .innovant-roadmap__step.is-reached .innovant-roadmap__ico .innovant-icon { color: #10243A; }
html.is-motion .innovant-roadmap__step.is-reached::before { background: var(--c-amber); }
@keyframes inv-roadpulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(212,136,46,.18), var(--shadow-md); } 50% { box-shadow: 0 0 0 12px rgba(212,136,46,.05), var(--shadow-md); } }
html.is-motion .innovant-roadmap__step.is-active .innovant-roadmap__marker { animation: inv-roadpulse 2.2s ease-in-out infinite; }
html.is-motion .innovant-roadmap__step:hover .innovant-roadmap__marker { transform: scale(1.09); }
html.is-motion .innovant-roadmap__step:hover .innovant-roadmap__media .inv-imgframe__img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { html.is-motion .innovant-roadmap__step.is-active .innovant-roadmap__marker { animation: none; } }

/* ============================================================
   HERO SPOTLIGHT — replaces the duplicate glass topic list. Rotates the
   official platforms Innovant clears (one at a time). No-JS = full list of
   links (crawlable); .has-js = single-view rotator; reduced-motion = static.
   ============================================================ */
.innovant-hspot { background: linear-gradient(158deg, rgba(16,40,64,.58), rgba(11,104,154,.34)); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.innovant-hspot__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block-end: var(--wp--preset--spacing--30); margin-block-end: var(--wp--preset--spacing--20); border-block-end: 1px solid rgba(255,255,255,.16); }
.innovant-hspot__eyebrow { color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; line-height: 1.3; }
.innovant-hspot__count { color: rgba(255,255,255,.7); font-size: var(--wp--preset--font-size--xs); white-space: nowrap; }
.innovant-hspot__stage { position: relative; }
.innovant-hspot__card { display: grid; gap: 5px; padding-block: var(--wp--preset--spacing--30); color: #fff; text-decoration: none; }
.innovant-hspot__card + .innovant-hspot__card { border-block-start: 1px solid rgba(255,255,255,.10); }
.innovant-hspot__num { font-family: var(--wp--preset--font-family--display); font-weight: 700; color: var(--wp--preset--color--accent); font-size: .82rem; letter-spacing: .04em; }
.innovant-hspot__name { font-size: var(--step-0); font-weight: 700; line-height: 1.2; }
.innovant-hspot__purpose { color: rgba(255,255,255,.82); font-size: var(--wp--preset--font-size--sm); line-height: 1.45; }
.innovant-hspot__go { display: inline-flex; align-items: center; gap: 6px; color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--xs); font-weight: 700; }
.innovant-hspot__card:hover .innovant-hspot__name { color: var(--wp--preset--color--accent); }
[dir="rtl"] .innovant-hspot__go span[aria-hidden] { transform: scaleX(-1); }
/* JS single-view rotator */
.innovant-hspot.has-js .innovant-hspot__stage { min-height: clamp(150px, 17vh, 184px); }
.innovant-hspot.has-js .innovant-hspot__card { position: absolute; inset: 0; border: 0; padding-block: 0; align-content: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .55s var(--inv-ease), transform .55s var(--inv-ease); }
.innovant-hspot.has-js .innovant-hspot__card.is-active { opacity: 1; transform: none; pointer-events: auto; }
.innovant-hspot.has-js .innovant-hspot__name { font-size: var(--step-1); margin-block: 2px; }
.innovant-hspot.has-js .innovant-hspot__go { opacity: 0; transform: translateY(6px); transition: opacity .4s var(--inv-ease), transform .4s var(--inv-ease); }
.innovant-hspot.has-js .innovant-hspot__card.is-active .innovant-hspot__go { opacity: 1; transform: none; transition-delay: .18s; }
.innovant-hspot__dots { display: none; gap: 8px; margin-block-start: var(--wp--preset--spacing--40); }
.innovant-hspot.has-js .innovant-hspot__dots { display: flex; }
.innovant-hspot__dot { inline-size: 8px; block-size: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.32); cursor: pointer; transition: inline-size .3s var(--inv-ease), background-color .3s var(--inv-ease); }
.innovant-hspot__dot.is-active { inline-size: 22px; background: var(--wp--preset--color--accent); }
.innovant-hspot__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.innovant-hspot.has-js .innovant-hspot__card, .innovant-hspot.has-js .innovant-hspot__go { transition: none; }
}

/* ============================================================
   ANIMATED IMAGE FRAMES — one reusable <picture> frame with VARIED motion
   variants (a different effect per section). Effects only run under
   html.is-motion; reduced-motion / no-JS render every image static + full.
   ============================================================ */
.inv-imgframe { position: relative; display: block; overflow: hidden; background: var(--c-navy-900); }
.inv-imgframe, .inv-imgframe picture { block-size: 100%; }
.inv-imgframe__img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* zoomin — image eases from 1.18 -> 1 as the frame scrolls in */
html.is-motion:not(.is-motion-done) .inv-imgframe--zoomin .inv-imgframe__img { transform: scale(1.18); }
html.is-motion .inv-imgframe--zoomin .inv-imgframe__img { transition: transform 1.3s var(--inv-ease); will-change: transform; }
html.is-motion .inv-imgframe--zoomin.is-inview .inv-imgframe__img { transform: scale(1); }
/* wipe — vertical clip reveal (RTL-agnostic) + slight settle */
html.is-motion:not(.is-motion-done) .inv-imgframe--wipe .inv-imgframe__img { clip-path: inset(0 0 100% 0); transform: scale(1.07); }
html.is-motion .inv-imgframe--wipe .inv-imgframe__img { transition: clip-path 1s var(--inv-ease), transform 1.2s var(--inv-ease); will-change: clip-path, transform; }
html.is-motion .inv-imgframe--wipe.is-inview .inv-imgframe__img { clip-path: inset(0 0 0 0); transform: scale(1); }
/* kenburns — slow ambient zoom + pan loop (direction-aware pan) */
@keyframes inv-kenburns { from { transform: scale(1.05) translate3d(0,0,0); } to { transform: scale(1.17) translate3d(-2.5%, -2%, 0); } }
@keyframes inv-kenburns-rtl { from { transform: scale(1.05) translate3d(0,0,0); } to { transform: scale(1.17) translate3d(2.5%, -2%, 0); } }
html.is-motion .inv-imgframe--kenburns .inv-imgframe__img { animation: inv-kenburns 22s ease-in-out infinite alternate; will-change: transform; }
html.is-motion[dir="rtl"] .inv-imgframe--kenburns .inv-imgframe__img { animation-name: inv-kenburns-rtl; }
/* hover — scale on hover (works on the frame or any host carrying .js-imgzoom:hover) */
.inv-imgframe--hover .inv-imgframe__img { transition: transform .6s var(--inv-ease); }
.inv-imgframe--hover:hover .inv-imgframe__img, .js-imgzoom:hover .inv-imgframe--hover .inv-imgframe__img { transform: scale(1.08); }
/* duo — desaturated, returns to colour on hover */
/* parallax — base overscan so the JS translate never reveals an edge (static under no-JS/reduced) */
.inv-imgframe--parallax .inv-imgframe__img { transform: scale(1.14); }
.inv-imgframe--duo .inv-imgframe__img { filter: grayscale(.62) contrast(1.03); transition: filter .55s var(--inv-ease), transform .6s var(--inv-ease); }
.inv-imgframe--duo:hover .inv-imgframe__img, .js-imgzoom:hover .inv-imgframe--duo .inv-imgframe__img { filter: grayscale(0); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
	.inv-imgframe__img { animation: none !important; }
}

/* Sector tile photo media — full-bleed strip at the top of each data tile (reveal zoom-in). */
.innovant-sectile__media { position: relative; display: block; block-size: 122px; margin-block: calc(-1 * var(--space-m)) 2px; margin-inline: calc(-1 * var(--space-m)); border-start-start-radius: var(--radius-m); border-start-end-radius: var(--radius-m); overflow: hidden; }
.innovant-sectile__media .inv-imgframe { position: absolute; inset: 0; }
.innovant-sectile__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(15,40,64,.02) 45%, rgba(15,40,64,.32)); }

/* Service row photo thumb — replaces the icon chip (grayscale -> colour + zoom on row hover). */
.innovant-svcdir__media { position: relative; inline-size: 70px; block-size: 70px; border-radius: var(--radius-s); overflow: hidden; flex: none; box-shadow: var(--shadow-sm); }
.innovant-svcdir__media .inv-imgframe { position: absolute; inset: 0; }
@media (max-width: 560px) { .innovant-svcdir__media { inline-size: 56px; block-size: 56px; } }

/* Guides-by-topic thumbnail — small topic photo per index row (grayscale -> colour on hover). */
.innovant-kindex__thumb { position: relative; inline-size: 46px; block-size: 46px; border-radius: var(--radius-s); overflow: hidden; flex: none; box-shadow: var(--shadow-sm); }
.innovant-kindex__thumb .inv-imgframe { position: absolute; inset: 0; }

/* Roadmap milestone photo — sits beside each step's text (clip-WIPE reveal). */
.innovant-roadmap__body { display: flex; gap: var(--space-m); align-items: center; }
.innovant-roadmap__text { flex: 1 1 auto; min-inline-size: 0; }
.innovant-roadmap__media { position: relative; flex: none; inline-size: 158px; block-size: 112px; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-sm); }
.innovant-roadmap__media .inv-imgframe { position: absolute; inset: 0; }
@media (max-width: 720px) { .innovant-roadmap__media { display: none; } }

/* Full-bleed animated section background (Ken Burns / parallax) behind a section's content. */
.innovant-has-bg { position: relative; isolation: isolate; overflow: hidden; }
.innovant-has-bg > :not(.innovant-secbg) { position: relative; z-index: 1; }
.innovant-secbg { position: absolute; inset: 0; z-index: 0; margin: 0 !important; max-inline-size: none !important; }
.innovant-secbg .inv-imgframe { position: absolute; inset: 0; background: transparent; }
.innovant-secbg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.innovant-secbg--navy::after { background: linear-gradient(160deg, rgba(15,40,64,.86) 0%, rgba(11,104,154,.74) 60%, rgba(15,40,64,.88) 100%); }
.innovant-secbg--teal::after { background: linear-gradient(160deg, rgba(11,104,154,.8), rgba(15,40,64,.78)); }
.innovant-secbg--light::after { background: linear-gradient(180deg, rgba(245,247,249,.84), rgba(245,247,249,.92)); }

/* Single (detail) page heros — the post's featured image / CPT banner, Ken Burns, white text. */
.innovant-hero-detail.innovant-has-bg { background: var(--c-navy-900); border-radius: var(--radius-l); padding: clamp(1.75rem, 4.5vw, 3.25rem); min-block-size: clamp(14rem, 28vh, 19rem); display: flex; flex-direction: column; justify-content: center; gap: var(--space-2xs); margin-block-end: var(--space-l); box-shadow: var(--shadow-md); }
.innovant-hero-detail.innovant-has-bg .innovant-secbg { border-radius: inherit; }
.innovant-hero-detail.innovant-has-bg :where(.wp-block-post-title, h1) { color: #fff; margin: 0; }
.innovant-hero-detail.innovant-has-bg p { color: rgba(255,255,255,.9); }
.innovant-hero-detail.innovant-has-bg .wp-block-buttons { margin-block-start: var(--space-2xs); }
.innovant-guide-hero.innovant-has-bg { background: var(--c-navy-900); min-block-size: clamp(15rem, 32vh, 22rem); display: flex; flex-direction: column; justify-content: center; border-block-end: 0; }
.innovant-guide-hero.innovant-has-bg .innovant-guide-hero__title { color: #fff; }
.innovant-guide-hero.innovant-has-bg :where(.innovant-article-meta, .innovant-article-meta a, .innovant-article-meta time, .innovant-article-meta span:not([class*=topic])) { color: rgba(255,255,255,.92); }

/* Guide/insight card image — slight zoom on card hover (media is overflow:hidden). */
.innovant-guide-card__media img { transition: transform .6s var(--inv-ease); will-change: transform; backface-visibility: hidden; }
.innovant-guide-card:hover .innovant-guide-card__media img, .innovant-guide-card:focus-within .innovant-guide-card__media img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .innovant-guide-card__media img { transition: none; } .innovant-guide-card:hover .innovant-guide-card__media img { transform: none; } }