:root {
	--wd-text-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(0,0,0);
	--wd-text-font-size: 15px;
	--wd-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: rgb(0,0,0);
	--wd-entities-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: rgb(0,0,0);
	--wd-entities-title-color-hover: rgb(0, 0, 0);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: rgb(0,0,0);
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(1,68,169);
	--wd-alternative-color: #fbbc34;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(63,81,181);
	--btn-accented-bgcolor-hover: rgb(255,152,0);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: rgb(0,103,208);
	--wd-link-color-hover: rgb(51,160,73);
	--wd-link-decor-color: rgb(0,103,208);
	--wd-link-decor-color-hover: rgb(51,160,73);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: url();
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
	--wd-popup-padding: 15px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: #ffffff;
	background-image: none;
}
html .product-image-summary-wrap .product_title, html .wd-single-title .product_title {
	font-weight: 600;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: #0a0a0a;
}

/* ============================================================
   IKHYA: new component system
   Prefix: nikx (distinct on purpose from ikhya's existing LIVE
   .ikx system, confirmed in production, see PROJECT-CONTEXT.md).
   Phase 2: component-lab only. Nothing here is finalized yet.
   ============================================================ */

/* ---- Unscoped on purpose, the one exception to "everything lives
   under .nikx": browsers apply a default margin to <body> (commonly
   8px) that nothing in the .nikx-scoped reset below touches, since
   <body> itself never carries the .nikx class. Invisible in
   component-lab (its own lab-only chrome CSS already zeroes this),
   but showed up as a real white border around every page build.mjs
   generates, since those have nothing else resetting it. Harmless
   on the real WordPress site, WoodMart's own theme CSS already
   zeroes this the same way virtually every theme does, so this is
   redundant there, not conflicting. ---- */
html, body { margin: 0; padding: 0; }

/* ---- Self-hosted fonts. No @import (WoodMart's Custom CSS box
   always prepends its own :root{} block first, and @import is only
   valid as the literal first rule in a sheet, so it silently fails
   there) and no Google Fonts CDN. Self-hosted per project rules.
   Absolute URLs to the copies in ikhya.com's WordPress media library
   (uploaded 2026-10, byte-identical to assets/fonts/), because this file is
   pasted into WoodMart's Custom CSS box, where a relative path would resolve
   against the page URL. build.mjs rewrites them back to ../fonts/ in the
   dist/ copy, so local double-click previews still load fonts offline. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://ikhya.com/wp-content/uploads/2026/10/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://ikhya.com/wp-content/uploads/2026/10/lato-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://ikhya.com/wp-content/uploads/2026/10/lato-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://ikhya.com/wp-content/uploads/2026/10/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://ikhya.com/wp-content/uploads/2026/10/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://ikhya.com/wp-content/uploads/2026/10/poppins-800.woff2') format('woff2');
}

/* ---- Design tokens, scoped to .nikx rather than bare :root, so
   they can never leak into or collide with WoodMart/plugin CSS or
   with ikhya's existing live .ikx tokens if both load on one page
   at once. All hex values are ikhya's real verified brand colors
   (company-facts.md), not invented, just re-namespaced. ---- */
.nikx {
  --nikx-navy: #09305b;
  --nikx-navy-dk: #06213e;
  --nikx-navy-lt: #0d3d72;
  --nikx-blue: #006edd;
  --nikx-blue-dk: #0058b8;
  --nikx-blue-lt: #e6f2ff;
  --nikx-blue-mid: #cce3ff;
  --nikx-gold: #f0a500;
  --nikx-gold-dk: #c98700;
  --nikx-gold-lt: #fff7e0;
  --nikx-teal: #00a878;
  --nikx-teal-dk: #00805c;
  --nikx-teal-lt: #e0f7f0;
  --nikx-white: #ffffff;
  --nikx-surface: #f4f8fd;
  --nikx-surface2: #eaf2fc;
  --nikx-text: #0f2540;
  --nikx-muted: #4d6680;
  --nikx-muted-dk: #b0bfd6;
  --nikx-border: #d0e3f5;

  --nikx-font-display: 'Poppins', Arial, Helvetica, sans-serif;
  --nikx-font-body: 'Lato', Arial, Helvetica, sans-serif;

  --nikx-sp-1: 4px;
  --nikx-sp-2: 8px;
  --nikx-sp-3: 12px;
  --nikx-sp-4: 16px;
  --nikx-sp-5: 20px;
  --nikx-sp-6: 24px;
  --nikx-sp-8: 32px;
  --nikx-sp-10: 40px;
  --nikx-sp-12: 48px;
  --nikx-sp-16: 64px;
  --nikx-sp-20: 80px;
  --nikx-sp-24: 96px;

  --nikx-r-sm: 8px;
  --nikx-r-md: 14px;
  --nikx-r-lg: 20px;
  --nikx-r-pill: 100px;

  --nikx-shadow-sm: 0 2px 8px rgba(9, 48, 91, .06);
  --nikx-shadow-md: 0 8px 28px rgba(9, 48, 91, .12);
  --nikx-shadow-lg: 0 24px 56px rgba(9, 48, 91, .20);

  /* Force a predictable 16px baseline. WoodMart's Theme Settings
     set html{font-size} to 14px, not 16px, so any rem/em used below
     .nikx would silently compute against that 14px root instead of
     16px, so component sizing here uses px throughout on purpose. */
  font-size: 16px;
  font-family: var(--nikx-font-body);
  color: var(--nikx-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Reset, scoped: never touches anything outside .nikx ---- */
.nikx, .nikx *, .nikx *::before, .nikx *::after {
  box-sizing: border-box;
}
.nikx { margin: 0; line-height: normal; }
.nikx h1, .nikx h2, .nikx h3, .nikx h4, .nikx p, .nikx figure { margin: 0; }
.nikx ul, .nikx ol { margin: 0; padding: 0; list-style: none; }
.nikx a { color: inherit; text-decoration: none; }
.nikx img, .nikx svg { display: block; max-width: 100%; }
.nikx button, .nikx input, .nikx textarea, .nikx select { font: inherit; color: inherit; }
.nikx button { cursor: pointer; background: none; border: none; }
/* Cancel WoodMart's element-level styles, which only exist on the live site
   (invisible in dist/ previews): body line-height 1.6 (handled on .nikx
   above), :is(button) min-height 42px / uppercase / middle alignment,
   blockquote left border + indent + start alignment, li and table bottom
   margins. Padding is deliberately not reset here: this selector (0,1,1)
   would beat every component's own single-class button padding. */
.nikx button { min-height: 0; text-transform: none; box-shadow: none; }
.nikx button, .nikx input, .nikx textarea, .nikx select, .nikx label { vertical-align: baseline; }
/* margin = the browser default blockquote margin, which the approved
   designs were reviewed with; stated explicitly so WoodMart can't change it. */
.nikx blockquote { margin: 1em 40px; padding: 0; border: 0; text-align: inherit; font-size: inherit; }
.nikx li { margin: 0; }
.nikx table { margin: 0; line-height: normal; }
.nikx thead, .nikx tbody, .nikx tr { vertical-align: middle; }
.nikx h1, .nikx h2, .nikx h3, .nikx h4 {
  font-family: var(--nikx-font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--nikx-navy);
}

/* Unscoped like the html/body reset above: icon-sprite.html is pasted
   before any .nikx-classed section, so it has no .nikx ancestor to key off. */
.nikx-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Full-bleed on the live site. WoodMart wraps page content in
   main#main-content.container (max-width 1222px, padding 40px 15px), which
   boxes every section in white. Same breakout the live .ikx wrapper uses:
   stretch each section to the viewport and cancel main's 40px top/bottom
   padding on the first and last. Keyed to #main-content so local dist/
   previews (no WoodMart wrapper) are untouched. Safe at 100vw because
   WoodMart's body already has overflow-x: clip. */
#main-content section.nikx {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
#main-content section.nikx:first-of-type { margin-top: -40px; }
#main-content section.nikx:last-of-type { margin-bottom: -40px; }

/* ---- Shared layout primitives, used across every component ---- */
.nikx-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.nikx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nikx-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
/* Scoped as .nikx .nikx-btn (not just .nikx-btn) so these reliably beat
   the .nikx button/input/etc reset above regardless of source order -
   found the hard way when a single-class button style lost a
   specificity fight against the element+class reset (0,1,0 vs 0,1,1). */
.nikx .nikx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: var(--nikx-r-sm);
  font-family: var(--nikx-font-body);
  font-size: 15px;
  font-weight: 700;
  min-height: 42px;
  white-space: nowrap;
  background: none;
  border: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.nikx .nikx-btn:hover { transform: translateY(-2px); }
.nikx .nikx-btn-primary {
  background: var(--nikx-gold);
  color: var(--nikx-navy);
  box-shadow: var(--nikx-shadow-sm);
}
.nikx .nikx-btn-primary:hover { background: var(--nikx-gold-dk); box-shadow: var(--nikx-shadow-md); }
.nikx .nikx-btn-outline {
  background: transparent;
  color: var(--nikx-white);
  border: 1.5px solid rgba(255,255,255,.4);
}
.nikx .nikx-btn-outline:hover { border-color: var(--nikx-white); background: rgba(255,255,255,.08); }
.nikx .nikx-btn-outline-dark {
  background: transparent;
  color: var(--nikx-navy);
  border: 1.5px solid var(--nikx-border);
}
.nikx .nikx-btn-outline-dark:hover { border-color: var(--nikx-navy); }

.nikx-section-head {
  max-width: 640px;
  margin: 0 0 44px;
}
.nikx-section-head h2 { font-size: 32px; margin-top: 12px; }
.nikx-section-head p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--nikx-muted);
}
.nikx-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

@media (max-width: 900px) {
  .nikx-sp-20-r { padding-top: 36px; padding-bottom: 36px; }
  .nikx-section-head h2 { font-size: 27px; }
}
@media (max-width: 600px) {
  .nikx-container { padding: 0 20px; }
  .nikx-section-head h2 { font-size: 24px; }
}

/* ============================================================
   HERO: 3 variations. Every variation carries the same fixed
   right-side contact form (email required, phone optional per
   RULES.md); only layout/color/decoration is what's being varied.
   ============================================================ */
.nikx-hero { position: relative; overflow: hidden; }
.nikx-hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 53px 24px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.nikx-hero-content { max-width: 560px; }
.nikx-hero-content h1 { font-size: 44px; line-height: 1.12; margin-top: 16px; }
.nikx .nikx-hero-sub { margin-top: 20px; font-size: 17px; line-height: 1.65; }
.nikx-hero-trust { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.nikx-hero-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700;
  padding: 9px 14px; border-radius: var(--nikx-r-pill);
}
.nikx-hero-trust-item .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Fixed form panel structure, shared by all 3 variations */
.nikx-hero-form {
  border-radius: var(--nikx-r-lg);
  padding: 30px 28px;
  position: relative;
  z-index: 2;
}
.nikx-hero-form-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.nikx-hero-form-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.nikx-hero-form-icon .nikx-icon { width: 20px; height: 20px; }
.nikx-hero-form h2 { font-size: 19px; line-height: 1.3; }
.nikx-hero-form-head .sub { font-size: 12.5px; margin-top: 3px; color: var(--nikx-muted); }
.nikx-field { margin-top: 14px; }
.nikx-field label {
  display: block; font-size: 11px; font-weight: 700; margin-bottom: 6px;
  letter-spacing: .6px; text-transform: uppercase; color: var(--nikx-muted);
}
.nikx-field label .opt {
  font-weight: 400; text-transform: none; letter-spacing: 0; color: #9aa8b8; font-size: 11px;
}
.nikx-field input, .nikx-field textarea {
  width: 100%; padding: 12px 14px; border-radius: 8px;
  border: 1.5px solid var(--nikx-border); font-size: 14px; font-family: var(--nikx-font-body);
  background: #fff; color: var(--nikx-text);
}
.nikx-field input:focus, .nikx-field textarea:focus {
  outline: none; border-color: var(--nikx-blue); box-shadow: 0 0 0 3px var(--nikx-blue-lt);
}
.nikx-field textarea { resize: vertical; min-height: 76px; }
.nikx-hero-form button[type="submit"] {
  width: 100%; justify-content: center; margin-top: 18px; font-size: 14.5px;
}
.nikx-hero-form-foot {
  display: flex; justify-content: space-between; margin-top: 14px;
  font-size: 11px; color: var(--nikx-muted); flex-wrap: wrap; gap: 6px;
}
.nikx-hero-form-foot span { display: inline-flex; align-items: center; gap: 5px; }
.nikx-hero-form-foot .nikx-icon { width: 13px; height: 13px; }

/* ---- Variation Meridian: refined, editorial, blue-forward ---- */
.nikx-hero--meridian {
  background: var(--nikx-white);
  background-image:
    radial-gradient(560px 420px at 84% -8%, var(--nikx-blue-lt) 0%, transparent 70%),
    radial-gradient(circle, var(--nikx-border) 1px, transparent 1.4px);
  background-size: auto, 22px 22px;
  background-position: 0 0, 0 0;
  border-bottom: 1px solid var(--nikx-border);
}
.nikx-hero--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-hero--meridian .nikx-eyebrow::before {
  content: ''; width: 20px; height: 2px; background: var(--nikx-gold);
}
.nikx-hero--meridian .accent { position: relative; color: var(--nikx-blue-dk); }
.nikx-hero--meridian .nikx-hero-sub { color: var(--nikx-muted); }
.nikx-hero--meridian .nikx-hero-trust-item { background: var(--nikx-surface); color: var(--nikx-navy); }
.nikx-hero--meridian .nikx-hero-trust-item .dot { background: var(--nikx-blue); }
.nikx-hero--meridian .nikx-hero-form {
  background: var(--nikx-white);
  border: 1.5px solid var(--nikx-border);
  box-shadow: var(--nikx-shadow-md);
}
.nikx-hero--meridian .nikx-hero-form-icon { background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); }

/* ---- Variation Foundry: bold, structural, navy + gold ---- */
.nikx-hero--foundry {
  background: var(--nikx-navy);
  border-top: 3px solid var(--nikx-gold);
}
.nikx-hero--foundry::before {
  content: '';
  position: absolute; top: -18%; right: -8%; width: 62%; height: 145%;
  background: var(--nikx-navy-lt);
  clip-path: polygon(35% 0%, 100% 0%, 100% 100%, 5% 100%);
  z-index: 0;
}
.nikx-hero--foundry::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.4px);
  background-size: 26px 26px;
  z-index: 1;
  mask-image: linear-gradient(115deg, #000 20%, transparent 55%);
}
.nikx-hero--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-hero--foundry .nikx-eyebrow::before {
  content: ''; width: 7px; height: 7px; background: var(--nikx-gold); transform: rotate(45deg);
}
.nikx-hero--foundry .nikx-hero-content h1 { color: var(--nikx-white); }
.nikx-hero--foundry .accent { color: var(--nikx-gold); }
.nikx-hero--foundry .nikx-hero-sub { color: rgba(255,255,255,.72); }
.nikx-hero--foundry .nikx-hero-trust-item { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); }
.nikx-hero--foundry .nikx-hero-trust-item .dot { background: var(--nikx-gold); }
.nikx-hero--foundry .nikx-hero-form {
  background: var(--nikx-white);
  box-shadow: var(--nikx-shadow-lg);
}
.nikx-hero--foundry .nikx-hero-form-icon { background: var(--nikx-navy); color: var(--nikx-gold); }

/* ---- Variation Current: warm, open, teal-forward ---- */
.nikx-hero--current { background: #fbfaf7; }
.nikx-hero--current .nikx-blob {
  position: absolute; z-index: 0; border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
}
.nikx-hero--current .nikx-blob.b1 {
  width: 620px; height: 560px; top: -18%; right: -12%;
  background: var(--nikx-teal-lt);
}
.nikx-hero--current .nikx-blob.b2 {
  width: 240px; height: 220px; bottom: -8%; left: 38%;
  background: var(--nikx-gold-lt);
  opacity: .7;
}
.nikx-hero--current .nikx-eyebrow { color: var(--nikx-teal-dk); }
.nikx-hero--current .nikx-eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--nikx-teal);
}
.nikx-hero--current .accent {
  color: var(--nikx-navy);
  box-shadow: inset 0 -0.42em 0 var(--nikx-teal-lt);
}
.nikx-hero--current .nikx-hero-sub { color: var(--nikx-muted); }
.nikx-hero--current .nikx-hero-trust-item { background: var(--nikx-teal-lt); color: var(--nikx-teal-dk); }
.nikx-hero--current .nikx-hero-trust-item .dot { background: var(--nikx-teal); }
.nikx-hero--current .nikx-hero-form {
  background: var(--nikx-white);
  border: 1.5px solid var(--nikx-teal-lt);
  box-shadow: var(--nikx-shadow-md);
  border-radius: 28px;
}
.nikx-hero--current .nikx-hero-form-icon { background: var(--nikx-teal-lt); color: var(--nikx-teal-dk); border-radius: 50%; }
.nikx-hero--current .nikx-field input, .nikx-hero--current .nikx-field textarea { border-radius: 12px; }

/* ---- Variation Signature: structure/DNA inspired by ikhya.com's own
   real live hero (diagonal navy gradient, pill eyebrow, two-tone form
   panel, checkmark trust list) - studied directly on the live site,
   rebuilt fresh under nikx-, no code or markup reused per RULES.md.
   Contact rule still email-required/phone-optional per this project's
   own rule, even though the real live form requires phone. ---- */
.nikx-hero--signature {
  background: linear-gradient(135deg, var(--nikx-navy-dk) 0%, var(--nikx-navy) 45%, var(--nikx-blue-dk) 100%);
}
.nikx-hero--signature::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.4px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 55% 75% at 15% 35%, #000 0%, transparent 70%);
}
.nikx-hero--signature .nikx-eyebrow {
  background: rgba(255,255,255,.14); color: var(--nikx-white);
  padding: 8px 18px; border-radius: var(--nikx-r-pill);
}
.nikx-hero--signature .nikx-eyebrow::before { content: none; }
.nikx-hero--signature .nikx-hero-content h1 { color: var(--nikx-white); }
.nikx-hero--signature .accent { color: var(--nikx-blue-mid); }
.nikx-hero--signature .nikx-hero-sub { color: rgba(255,255,255,.76); }

.nikx-hero-btns { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.nikx-hero-trust-wrap { margin-top: 32px; }
.nikx-hero-trust-label {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  margin-bottom: 12px; display: block;
}
.nikx-hero-trust-list { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 0; }
.nikx-hero-trust-list li { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.nikx-hero-trust-list .nikx-icon { width: 15px; height: 15px; }
.nikx-hero--signature .nikx-hero-trust-label { color: rgba(255,255,255,.55); }
.nikx-hero--signature .nikx-hero-trust-list li { color: rgba(255,255,255,.92); }
.nikx-hero--signature .nikx-hero-trust-list .nikx-icon { color: var(--nikx-teal); }

/* Two-tone form panel: colored header zone + white form zone */
.nikx-hero--signature .nikx-hero-form { padding: 0; overflow: hidden; box-shadow: var(--nikx-shadow-lg); }
.nikx-hero-form-top { padding: 26px 28px 20px; }
.nikx-hero--signature .nikx-hero-form-top { background: var(--nikx-blue); }
.nikx-hero--signature .nikx-hero-form-head { margin-bottom: 16px; }
.nikx-hero--signature .nikx-hero-form-icon { background: rgba(255,255,255,.18); color: var(--nikx-white); }
.nikx-hero--signature .nikx-hero-form h2 { color: var(--nikx-white); }
.nikx-hero--signature .nikx-hero-form-head .sub { color: rgba(255,255,255,.82); }
.nikx-hero-form-top-badges { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.nikx-hero-form-top-badges span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; }
.nikx-hero-form-top-badges .nikx-icon { width: 13px; height: 13px; }
.nikx-hero--signature .nikx-hero-form-top-badges span { color: rgba(255,255,255,.92); }
.nikx-hero-form-bottom { padding: 24px 28px 28px; background: var(--nikx-white); }
.nikx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nikx-hero--signature .nikx-hero-form-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.nikx-hero-pill-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
  border-radius: var(--nikx-r-pill); font-size: 11px; font-weight: 700;
}
.nikx-hero-pill-badge .nikx-icon { width: 11px; height: 11px; }
.nikx-hero-pill-badge.green { background: var(--nikx-teal-lt); color: var(--nikx-teal-dk); }
.nikx-hero-pill-badge.blue { background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); }
.nikx-hero-pill-badge.gold { background: var(--nikx-gold-lt); color: var(--nikx-gold-dk); }

@media (max-width: 1024px) {
  .nikx-hero-inner { grid-template-columns: 1fr 380px; gap: 40px; }
  .nikx-hero-content h1 { font-size: 38px; }
}
@media (max-width: 900px) {
  .nikx-hero-inner { grid-template-columns: 1fr; padding: 34px 24px; }
  .nikx-hero-content { max-width: 100%; }
  .nikx-hero--foundry::before { width: 90%; opacity: .6; }
}
@media (max-width: 600px) {
  .nikx-hero-content h1 { font-size: 30px; }
  .nikx-hero-form { padding: 24px 20px; }
  .nikx-hero--current .nikx-blob.b1 { width: 380px; height: 340px; }
  .nikx-field-row { grid-template-columns: 1fr; gap: 0; }
  .nikx-hero-form-top, .nikx-hero-form-bottom { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   STATS BAND: 3 variations
   ============================================================ */
.nikx-stats-inner {
  max-width: 1240px; margin: 0 auto; padding: 31px 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.nikx-stat-item { text-align: center; }
.nikx-stat-num {
  display: block; font-family: var(--nikx-font-display); font-weight: 800;
  font-size: 40px; line-height: 1;
}
.nikx-stat-lbl { display: block; margin-top: 10px; font-size: 13px; font-weight: 400; }

.nikx-stats--meridian { background: var(--nikx-surface); border-top: 1px solid var(--nikx-border); border-bottom: 1px solid var(--nikx-border); }
.nikx-stats--meridian .nikx-stats-inner { position: relative; }
.nikx-stats--meridian .nikx-stat-item { position: relative; }
.nikx-stats--meridian .nikx-stat-item:not(:last-child)::after {
  content: ''; position: absolute; right: -12px; top: 4px; bottom: 4px; width: 1px; background: var(--nikx-border);
}
.nikx-stats--meridian .nikx-stat-num { color: var(--nikx-blue-dk); }
.nikx-stats--meridian .nikx-stat-lbl { color: var(--nikx-muted); }

.nikx-stats--foundry { background: var(--nikx-navy); }
.nikx-stats--foundry .nikx-stats-inner { padding: 38px 24px; }
.nikx-stats--foundry .nikx-stat-num { color: var(--nikx-gold); font-size: 46px; }
.nikx-stats--foundry .nikx-stat-lbl { color: rgba(255,255,255,.78); text-transform: uppercase; letter-spacing: .6px; font-size: 12px; }

.nikx-stats--current { background: var(--nikx-white); }
.nikx-stats--current .nikx-stats-inner { gap: 16px; }
.nikx-stats--current .nikx-stat-item {
  background: var(--nikx-teal-lt); border-radius: var(--nikx-r-lg); padding: 26px 16px;
}
.nikx-stats--current .nikx-stat-num { color: var(--nikx-teal-dk); }
.nikx-stats--current .nikx-stat-lbl { color: var(--nikx-navy); }

@media (max-width: 900px) {
  .nikx-stats-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .nikx-stat-num { font-size: 32px; }
  .nikx-stats--foundry .nikx-stat-num { font-size: 36px; }
}

/* ============================================================
   SERVICES / FEATURE GRID: 3 variations
   ============================================================ */
.nikx-svc-section { padding: 53px 0; }
.nikx-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.nikx-svc-card { padding: 30px 26px; border-radius: var(--nikx-r-lg); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.nikx-svc-icon {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 18px;
}
.nikx-svc-card h3 { font-size: 18px; margin-bottom: 10px; }
.nikx-svc-card p { font-size: 14.5px; line-height: 1.65; }
.nikx-svc-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13.5px; font-weight: 700; }

.nikx-svc--meridian { background: var(--nikx-white); }
.nikx-svc--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-svc--meridian .nikx-svc-card { background: var(--nikx-white); border: 1.5px solid var(--nikx-border); }
.nikx-svc--meridian .nikx-svc-card:hover { border-color: var(--nikx-blue); box-shadow: var(--nikx-shadow-md); transform: translateY(-3px); }
.nikx-svc--meridian .nikx-svc-icon { background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); }
.nikx-svc--meridian .nikx-svc-card p { color: var(--nikx-muted); }
.nikx-svc--meridian .nikx-svc-link { color: var(--nikx-blue-dk); }

.nikx-svc--foundry { background: var(--nikx-navy); }
.nikx-svc--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-svc--foundry .nikx-section-head h2, .nikx-svc--foundry .nikx-section-head p { color: var(--nikx-white); }
.nikx-svc--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-svc--foundry .nikx-svc-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.nikx-svc--foundry .nikx-svc-card:hover { background: rgba(255,255,255,.1); border-color: var(--nikx-gold); transform: translateY(-3px); }
.nikx-svc--foundry .nikx-svc-icon { background: rgba(240,165,0,.16); color: var(--nikx-gold); }
.nikx-svc--foundry .nikx-svc-card h3 { color: var(--nikx-white); }
.nikx-svc--foundry .nikx-svc-card p { color: var(--nikx-muted-dk); }
.nikx-svc--foundry .nikx-svc-link { color: var(--nikx-gold); }

.nikx-svc--current { background: var(--nikx-surface); }
.nikx-svc--current .nikx-eyebrow { color: var(--nikx-teal-dk); }
.nikx-svc--current .nikx-svc-card { background: var(--nikx-white); box-shadow: var(--nikx-shadow-sm); }
.nikx-svc--current .nikx-svc-card:hover { box-shadow: var(--nikx-shadow-md); transform: translateY(-3px); }
.nikx-svc--current .nikx-svc-icon { background: var(--nikx-teal-lt); color: var(--nikx-teal-dk); border-radius: 50%; }
.nikx-svc--current .nikx-svc-card p { color: var(--nikx-muted); }
.nikx-svc--current .nikx-svc-link { color: var(--nikx-teal-dk); }

@media (max-width: 900px) {
  .nikx-svc-section { padding: 36px 0; }
  .nikx-svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .nikx-svc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Icon utility, shared by Why-Us and Testimonials below. Real
   inline SVG line icons (Feather/Lucide-style, hand-drawn), not
   emoji - defined once as symbols, referenced with <use>.
   ============================================================ */
.nikx-icon { width: 24px; height: 24px; flex-shrink: 0; }
.nikx-icon use { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nikx-icon.filled use { fill: currentColor; stroke: none; }

/* ============================================================
   WHY-US GRID: 3 variations. Redesigned as bordered cards with a
   professional outlined-circle icon badge, replacing the old
   emoji-in-a-flat-square treatment.
   ============================================================ */
.nikx-why-section { padding: 53px 0; }
.nikx-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nikx-why-card {
  padding: 30px 26px 28px;
  border-radius: var(--nikx-r-lg);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.nikx-why-badge {
  width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.nikx-why-card h4 { font-size: 16.5px; margin-bottom: 8px; }
.nikx-why-card p { font-size: 14px; line-height: 1.65; }

.nikx-why--meridian { background: var(--nikx-white); }
.nikx-why--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-why--meridian .nikx-why-card { background: var(--nikx-white); border: 1.5px solid var(--nikx-border); }
.nikx-why--meridian .nikx-why-card:hover { border-color: var(--nikx-blue); box-shadow: var(--nikx-shadow-md); transform: translateY(-3px); }
.nikx-why--meridian .nikx-why-badge { border: 1.6px solid var(--nikx-blue); color: var(--nikx-blue-dk); background: var(--nikx-blue-lt); }
.nikx-why--meridian .nikx-why-card p { color: var(--nikx-muted); }

.nikx-why--foundry { background: var(--nikx-navy); }
.nikx-why--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-why--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-why--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-why--foundry .nikx-why-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.nikx-why--foundry .nikx-why-card:hover { border-color: var(--nikx-gold); background: rgba(255,255,255,.08); transform: translateY(-3px); }
.nikx-why--foundry .nikx-why-badge { border: 1.6px solid var(--nikx-gold); color: var(--nikx-gold); background: rgba(240,165,0,.1); }
.nikx-why--foundry .nikx-why-card h4 { color: var(--nikx-white); }
.nikx-why--foundry .nikx-why-card p { color: var(--nikx-muted-dk); }

.nikx-why--current { background: var(--nikx-teal-lt); }
.nikx-why--current .nikx-eyebrow { color: var(--nikx-teal-dk); }
.nikx-why--current .nikx-why-card { background: var(--nikx-white); box-shadow: var(--nikx-shadow-sm); }
.nikx-why--current .nikx-why-card:hover { box-shadow: var(--nikx-shadow-md); transform: translateY(-3px); }
.nikx-why--current .nikx-why-badge { background: var(--nikx-teal); color: var(--nikx-white); }
.nikx-why--current .nikx-why-card p { color: var(--nikx-muted); }

@media (max-width: 900px) {
  .nikx-why-section { padding: 36px 0; }
  .nikx-why-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .nikx-why-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TESTIMONIALS: 3 variations, third pass. Benchmarked directly
   against a real competitor (swiftelearningservices.com's "Client
   Testimonials" section, 2026-08-19): a single centered card,
   one testimonial at a time, quote-mark + text + attribution,
   dot/arrow navigation below. Adopted the same core structure,
   improved on it with a real star rating and an avatar (their
   version has neither), and real working carousel JS (main.js)
   instead of a static mockup.
   ============================================================ */
.nikx-testi-section { padding: 53px 0; }
.nikx-testi-carousel { max-width: 900px; margin: 0 auto; text-align: center; }
.nikx-testi-slide { display: none; }
.nikx-testi-slide.is-active { display: block; animation: nikx-testi-fade .4s ease; }
@keyframes nikx-testi-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.nikx-testi-card-inner { padding: 44px 48px; border-radius: var(--nikx-r-lg); }
.nikx-testi-quote-icon { width: 38px; height: 28px; margin: 0 auto 18px; }
.nikx-testi-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 18px; }
.nikx-testi-stars .nikx-icon { width: 16px; height: 16px; }
.nikx-testi-slide blockquote { font-size: 18px; line-height: 1.7; font-weight: 700; }
.nikx-testi-author { margin-top: 22px; display: flex; flex-direction: column; align-items: center; }
.nikx-testi-avatar {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; font-family: var(--nikx-font-display); margin-bottom: 10px;
}
.nikx-testi-name { display: block; font-size: 14px; font-weight: 700; }
.nikx-testi-role { display: block; font-size: 12.5px; margin-top: 2px; font-weight: 700; }
.nikx-testi-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; }
.nikx .nikx-testi-arrow {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 1.5px solid; flex-shrink: 0; transition: background-color .2s ease, border-color .2s ease;
}
.nikx-testi-arrow .nikx-icon { width: 15px; height: 15px; }
.nikx-testi-arrow.prev .nikx-icon { transform: rotate(90deg); }
.nikx-testi-arrow.next .nikx-icon { transform: rotate(-90deg); }
.nikx-testi-dots { display: flex; align-items: center; gap: 8px; }
.nikx-testi-dot { width: 8px; height: 8px; border-radius: 4px; padding: 0; transition: width .2s ease, background-color .2s ease; }
.nikx-testi-dot.is-active { width: 22px; }

.nikx-testi--meridian { background: var(--nikx-surface); }
.nikx-testi--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-testi--meridian .nikx-testi-card-inner { background: var(--nikx-white); border: 1.5px solid var(--nikx-border); box-shadow: var(--nikx-shadow-sm); }
.nikx-testi--meridian .nikx-testi-quote-icon { color: var(--nikx-gold); }
.nikx-testi--meridian .nikx-testi-stars { color: var(--nikx-gold); }
.nikx-testi--meridian blockquote { color: var(--nikx-navy); }
.nikx-testi--meridian .nikx-testi-avatar { background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); }
.nikx-testi--meridian .nikx-testi-name { color: var(--nikx-navy); }
.nikx-testi--meridian .nikx-testi-role { color: var(--nikx-muted); }
.nikx-testi--meridian .nikx-testi-arrow { border-color: var(--nikx-border); color: var(--nikx-blue-dk); }
.nikx-testi--meridian .nikx-testi-arrow:hover { background: var(--nikx-blue-lt); border-color: var(--nikx-blue); }
.nikx-testi--meridian .nikx-testi-dot { background: var(--nikx-border); }
.nikx-testi--meridian .nikx-testi-dot.is-active { background: var(--nikx-blue); }

.nikx-testi--foundry { background: var(--nikx-navy); }
.nikx-testi--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-testi--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-testi--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-testi--foundry .nikx-testi-card-inner { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.nikx-testi--foundry .nikx-testi-quote-icon { color: var(--nikx-gold); }
.nikx-testi--foundry .nikx-testi-stars { color: var(--nikx-gold); }
.nikx-testi--foundry blockquote { color: var(--nikx-white); }
.nikx-testi--foundry .nikx-testi-avatar { background: var(--nikx-gold); color: var(--nikx-navy); }
.nikx-testi--foundry .nikx-testi-name { color: var(--nikx-white); }
.nikx-testi--foundry .nikx-testi-role { color: var(--nikx-muted-dk); }
.nikx-testi--foundry .nikx-testi-arrow { border-color: rgba(255,255,255,.25); color: var(--nikx-white); }
.nikx-testi--foundry .nikx-testi-arrow:hover { background: rgba(255,255,255,.1); border-color: var(--nikx-gold); }
.nikx-testi--foundry .nikx-testi-dot { background: rgba(255,255,255,.25); }
.nikx-testi--foundry .nikx-testi-dot.is-active { background: var(--nikx-gold); }

.nikx-testi--current { background: var(--nikx-white); }
.nikx-testi--current .nikx-eyebrow { color: var(--nikx-teal-dk); }
.nikx-testi--current .nikx-testi-card-inner { background: var(--nikx-teal-lt); border-radius: 28px; }
.nikx-testi--current .nikx-testi-quote-icon { color: var(--nikx-teal); }
.nikx-testi--current .nikx-testi-stars { color: var(--nikx-teal-dk); }
.nikx-testi--current blockquote { color: var(--nikx-navy); }
.nikx-testi--current .nikx-testi-avatar { background: var(--nikx-white); color: var(--nikx-teal-dk); }
.nikx-testi--current .nikx-testi-name { color: var(--nikx-navy); }
.nikx-testi--current .nikx-testi-role { color: var(--nikx-muted); }
.nikx-testi--current .nikx-testi-arrow { border-color: rgba(0,168,120,.3); color: var(--nikx-teal-dk); }
.nikx-testi--current .nikx-testi-arrow:hover { background: var(--nikx-teal-lt); border-color: var(--nikx-teal); }
.nikx-testi--current .nikx-testi-dot { background: rgba(0,168,120,.25); }
.nikx-testi--current .nikx-testi-dot.is-active { background: var(--nikx-teal); }

@media (max-width: 900px) { .nikx-testi-section { padding: 36px 0; } }
@media (max-width: 600px) {
  .nikx-testi-card-inner { padding: 32px 24px; }
  .nikx-testi-slide blockquote { font-size: 16px; }
}

/* ============================================================
   FAQ ACCORDION: 3 variations. Toggle behavior lives in main.js,
   scoped per .nikx-faq-list so each instance works independently.
   ============================================================ */
.nikx-faq-section { padding: 53px 0; }
.nikx-faq-list { max-width: 800px; margin: 0 auto; }
.nikx-faq-item { border-radius: var(--nikx-r-md); margin-bottom: 12px; overflow: hidden; }
.nikx .nikx-faq-q {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 18px 22px; font-family: var(--nikx-font-body); font-size: 15px; font-weight: 900;
}
.nikx-faq-q .num { font-size: 11px; font-weight: 900; flex-shrink: 0; width: 20px; }
.nikx-faq-q .txt { flex-grow: 1; }
.nikx-faq-q .chev { flex-shrink: 0; transition: transform .25s ease; width: 16px; height: 16px; }
.nikx-faq-item.is-open .nikx-faq-q .chev { transform: rotate(180deg); }
.nikx-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.nikx-faq-item.is-open .nikx-faq-a { max-height: 240px; }
.nikx-faq-a p { padding: 0 22px 20px 56px; font-size: 14px; line-height: 1.75; font-weight: 700; }

.nikx-faq--meridian { background: var(--nikx-white); }
.nikx-faq--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-faq--meridian .nikx-faq-item { border: 1.5px solid var(--nikx-border); }
.nikx-faq--meridian .nikx-faq-q { background: var(--nikx-white); color: var(--nikx-navy); }
.nikx-faq--meridian .nikx-faq-q .num { color: var(--nikx-blue); }
.nikx-faq--meridian .nikx-faq-q .chev { color: var(--nikx-blue); }
.nikx-faq--meridian .nikx-faq-item.is-open { border-color: var(--nikx-blue); }
.nikx-faq--meridian .nikx-faq-a p { color: var(--nikx-muted); }

.nikx-faq--foundry { background: var(--nikx-navy); }
.nikx-faq--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-faq--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-faq--foundry .nikx-faq-item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.nikx-faq--foundry .nikx-faq-q { color: var(--nikx-white); }
.nikx-faq--foundry .nikx-faq-q .num, .nikx-faq--foundry .nikx-faq-q .chev { color: var(--nikx-gold); }
.nikx-faq--foundry .nikx-faq-item.is-open { background: rgba(255,255,255,.1); }
.nikx-faq--foundry .nikx-faq-a p { color: var(--nikx-muted-dk); }

.nikx-faq--current { background: var(--nikx-surface); }
.nikx-faq--current .nikx-eyebrow { color: var(--nikx-teal-dk); }
.nikx-faq--current .nikx-faq-item { background: var(--nikx-white); box-shadow: var(--nikx-shadow-sm); border-radius: 18px; }
.nikx-faq--current .nikx-faq-q { color: var(--nikx-navy); }
.nikx-faq--current .nikx-faq-q .num, .nikx-faq--current .nikx-faq-q .chev { color: var(--nikx-teal-dk); }
.nikx-faq--current .nikx-faq-item.is-open { box-shadow: var(--nikx-shadow-md); }
.nikx-faq--current .nikx-faq-a p { color: var(--nikx-muted); }

@media (max-width: 900px) { .nikx-faq-section { padding: 36px 0; } }
@media (max-width: 600px) { .nikx-faq-a p { padding-left: 22px; } }

/* ============================================================
   FINAL CTA BAND: 3 variations
   ============================================================ */
.nikx-cta-band { position: relative; overflow: hidden; }
.nikx-cta-inner {
  max-width: 780px; margin: 0 auto; padding: 46px 24px; text-align: center;
  position: relative; z-index: 2;
}
.nikx-cta-band h2 { font-size: 32px; }
.nikx-cta-band .lead { margin-top: 16px; font-size: 16px; line-height: 1.65; }
.nikx-cta-btns { display: flex; justify-content: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

.nikx-cta--meridian {
  background: var(--nikx-blue);
  background-image: radial-gradient(600px 300px at 15% 0%, var(--nikx-blue-dk) 0%, transparent 70%);
}
.nikx-cta--meridian h2 { color: var(--nikx-white); }
.nikx-cta--meridian .lead { color: var(--nikx-blue-lt); }

.nikx-cta--foundry { background: var(--nikx-navy); border-top: 3px solid var(--nikx-gold); }
.nikx-cta--foundry::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1.4px);
  background-size: 26px 26px; z-index: 1;
}
.nikx-cta--foundry h2 { color: var(--nikx-white); }
.nikx-cta--foundry .lead { color: var(--nikx-muted-dk); }

.nikx-cta--current {
  background: var(--nikx-white);
  padding: 8px;
}
.nikx-cta--current .nikx-cta-inner {
  background: var(--nikx-teal); border-radius: 28px; max-width: 1100px; padding: 38px 40px;
}
.nikx-cta--current h2 { color: var(--nikx-white); }
.nikx-cta--current .lead { color: var(--nikx-teal-lt); }

@media (max-width: 600px) {
  .nikx-cta-band h2 { font-size: 26px; }
  .nikx-cta-inner { padding: 34px 20px; }
  .nikx-cta--current .nikx-cta-inner { padding: 26px 24px; border-radius: 20px; }
}

/* ============================================================
   PROCESS / TIMELINE: 2 variations (Meridian, Foundry only -
   Current was rejected on every prior component, not offered
   here). Real 5-phase process, source: company-facts.md homepage
   "How We Work": Discovery & Needs Analysis, Learning Design &
   Strategy, Agile Course Development, QA & Accessibility Review,
   Launch/Analytics & Support.
   ============================================================ */
.nikx-process-section { padding: 53px 0; }
.nikx-process-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; }
.nikx-process-track::before { content: ''; position: absolute; top: 22px; left: 22px; right: 22px; height: 2px; z-index: 0; }
.nikx-process-step { position: relative; z-index: 1; }
.nikx-step-num {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--nikx-font-display); font-weight: 800; font-size: 16px; margin-bottom: 18px;
}
.nikx-process-step h4 { font-size: 15px; margin-bottom: 8px; }
.nikx-process-step p { font-size: 13.5px; line-height: 1.6; }

.nikx-process--meridian { background: var(--nikx-white); }
.nikx-process--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-process--meridian .nikx-process-track::before { background: var(--nikx-border); }
.nikx-process--meridian .nikx-step-num { background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); border: 1.6px solid var(--nikx-blue); }
.nikx-process--meridian .nikx-process-step p { color: var(--nikx-muted); }

.nikx-process--foundry { background: var(--nikx-navy); }
.nikx-process--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-process--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-process--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-process--foundry .nikx-process-track::before { background: rgba(255,255,255,.2); }
.nikx-process--foundry .nikx-step-num { background: #29404e; color: var(--nikx-gold); border: 1.6px solid var(--nikx-gold); }
.nikx-process--foundry .nikx-process-step h4 { color: var(--nikx-white); }
.nikx-process--foundry .nikx-process-step p { color: var(--nikx-muted-dk); }

@media (max-width: 900px) {
  .nikx-process-section { padding: 36px 0; }
  .nikx-process-track { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .nikx-process-track::before { display: none; }
}
@media (max-width: 600px) {
  .nikx-process-track { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   INDUSTRY CARDS: 2 variations. Real 8 industries, source:
   company-facts.md homepage list.
   ============================================================ */
.nikx-industry-section { padding: 53px 0; }
.nikx-industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.nikx-industry-card {
  padding: 26px 22px; border-radius: var(--nikx-r-lg); text-align: left;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.nikx-industry-badge {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.nikx-industry-card h4 { font-size: 15px; margin-bottom: 7px; }
.nikx-industry-card p { font-size: 13px; line-height: 1.6; }

.nikx-industry--meridian { background: var(--nikx-surface); }
.nikx-industry--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-industry--meridian .nikx-industry-card { background: var(--nikx-white); border: 1.5px solid var(--nikx-border); }
.nikx-industry--meridian .nikx-industry-card:hover { border-color: var(--nikx-blue); box-shadow: var(--nikx-shadow-md); transform: translateY(-3px); }
.nikx-industry--meridian .nikx-industry-badge { background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); }
.nikx-industry--meridian .nikx-industry-card p { color: var(--nikx-muted); }

.nikx-industry--foundry { background: var(--nikx-navy); }
.nikx-industry--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-industry--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-industry--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-industry--foundry .nikx-industry-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.nikx-industry--foundry .nikx-industry-card:hover { border-color: var(--nikx-gold); background: rgba(255,255,255,.1); transform: translateY(-3px); }
.nikx-industry--foundry .nikx-industry-badge { background: rgba(240,165,0,.16); color: var(--nikx-gold); }
.nikx-industry--foundry .nikx-industry-card h4 { color: var(--nikx-white); }
.nikx-industry--foundry .nikx-industry-card p { color: var(--nikx-muted-dk); }

@media (max-width: 900px) {
  .nikx-industry-section { padding: 36px 0; }
  .nikx-industry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .nikx-industry-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CASE STUDIES: 2 variations. Real 4 results, source:
   company-facts.md "Proven results". The financial-services card
   uses the case-study-card figure (61% to 82%), not the
   conflicting homepage stat-band figure (34%), per an explicit
   user decision, 2026-08-19, since both numbers are live on the
   same real page and were never reconciled there.
   ============================================================ */
.nikx-cases-section { padding: 53px 0; }
.nikx-cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.nikx-case-card { padding: 32px 30px; border-radius: var(--nikx-r-lg); }
.nikx-case-tag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; padding: 6px 13px; border-radius: var(--nikx-r-pill); margin-bottom: 22px;
}
.nikx-case-stat { font-family: var(--nikx-font-display); font-weight: 800; font-size: 32px; line-height: 1; display: block; }
.nikx-case-stat-lbl { font-size: 13px; margin-top: 9px; display: block; font-weight: 700; }
.nikx .nikx-case-desc { margin-top: 18px; font-size: 14px; line-height: 1.65; }
.nikx-case-meta { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.nikx-case-meta-item { font-size: 12px; font-weight: 700; }

.nikx-cases--meridian { background: var(--nikx-white); }
.nikx-cases--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-cases--meridian .nikx-case-card { background: var(--nikx-white); border: 1.5px solid var(--nikx-border); }
.nikx-cases--meridian .nikx-case-tag { background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); }
.nikx-cases--meridian .nikx-case-stat { color: var(--nikx-navy); }
.nikx-cases--meridian .nikx-case-stat-lbl { color: var(--nikx-blue-dk); }
.nikx-cases--meridian .nikx-case-desc { color: var(--nikx-muted); }
.nikx-cases--meridian .nikx-case-meta-item { color: var(--nikx-muted); }

.nikx-cases--foundry { background: var(--nikx-navy); }
.nikx-cases--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-cases--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-cases--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-cases--foundry .nikx-case-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.nikx-cases--foundry .nikx-case-tag { background: rgba(240,165,0,.16); color: var(--nikx-gold); }
.nikx-cases--foundry .nikx-case-stat { color: var(--nikx-white); }
.nikx-cases--foundry .nikx-case-stat-lbl { color: var(--nikx-gold); }
.nikx-cases--foundry .nikx-case-desc { color: var(--nikx-muted-dk); }
.nikx-cases--foundry .nikx-case-meta-item { color: var(--nikx-muted-dk); }

@media (max-width: 900px) {
  .nikx-cases-section { padding: 36px 0; }
  .nikx-cases-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .nikx-case-card { padding: 26px 22px; }
  .nikx-case-stat { font-size: 28px; }
}

/* ============================================================
   COMPARISON TABLE: 2 variations. Framing: In-House Team vs.
   IKHYA, per an explicit user decision, 2026-08-19, since no page
   in the real WXR export uses a comparison table with real
   content (the only live occurrence of the .ikx-dir-table pattern
   is a throwaway test page, not real site content). Every IKHYA-
   column claim below is a fact already verified elsewhere in this
   project (company-facts.md); the in-house column is kept general
   and non-numeric on purpose, not a fabricated competitor stat.
   ============================================================ */
.nikx-compare-section { padding: 53px 0; }
.nikx-compare-table-wrap { max-width: 980px; margin: 0 auto; overflow-x: auto; border-radius: var(--nikx-r-md); }
.nikx-compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.nikx-compare-table th {
  padding: 16px 20px; text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
}
.nikx-compare-table td { padding: 16px 20px; font-size: 13.5px; line-height: 1.55; vertical-align: top; }
.nikx-compare-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--nikx-border); }
.nikx-compare-table .factor-col { font-weight: 700; }
.nikx-compare-cell { display: flex; gap: 8px; align-items: flex-start; }
.nikx-compare-cell .nikx-icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }

.nikx-compare--meridian { background: var(--nikx-surface); }
.nikx-compare--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-compare--meridian .nikx-compare-table-wrap { border: 1.5px solid var(--nikx-border); background: var(--nikx-white); }
.nikx-compare--meridian .nikx-compare-table thead th { background: var(--nikx-navy); color: rgba(255,255,255,.75); }
.nikx-compare--meridian .nikx-compare-table .factor-col { color: var(--nikx-navy); }
.nikx-compare--meridian .nikx-compare-table td:nth-child(2) { color: var(--nikx-muted); }
.nikx-compare--meridian .nikx-compare-table td.ikhya-col { background: var(--nikx-blue-lt); color: var(--nikx-navy); font-weight: 700; }
.nikx-compare--meridian .nikx-compare-cell .nikx-icon { color: var(--nikx-blue-dk); }

.nikx-compare--foundry { background: var(--nikx-navy); }
.nikx-compare--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-compare--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-compare--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-compare--foundry .nikx-compare-table-wrap { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.nikx-compare--foundry .nikx-compare-table thead th { background: rgba(0,0,0,.25); color: var(--nikx-muted-dk); }
.nikx-compare--foundry .nikx-compare-table tbody tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.12); }
.nikx-compare--foundry .nikx-compare-table .factor-col { color: var(--nikx-white); }
.nikx-compare--foundry .nikx-compare-table td:nth-child(2) { color: var(--nikx-muted-dk); }
.nikx-compare--foundry .nikx-compare-table td.ikhya-col { background: rgba(240,165,0,.14); color: var(--nikx-white); font-weight: 700; }
.nikx-compare--foundry .nikx-compare-cell .nikx-icon { color: var(--nikx-gold); }

@media (max-width: 900px) { .nikx-compare-section { padding: 36px 0; } }

/* ============================================================
   PRICING GRID: 2 variations. Real 3 engagement models, source:
   the real US country page's own schema data ("Project-based,
   retainer, and dedicated team engagement models available"),
   per an explicit user decision, 2026-08-19, since no page uses
   the pricing-grid pattern with a real published dollar-tier
   list. Only Project-Based carries a real number (the verified
   $5,000 to $25,000 module range); Retainer and Dedicated Team
   are marked "Custom Pricing" rather than an invented figure.
   ============================================================ */
.nikx-pricing-section { padding: 53px 0; }
.nikx-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1020px; margin: 0 auto; }
.nikx-price-card { padding: 32px 26px; border-radius: var(--nikx-r-lg); display: flex; flex-direction: column; }
.nikx-price-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.nikx-price-icon .nikx-icon { width: 22px; height: 22px; }
.nikx .nikx-price-tier { font-size: 18px; margin-bottom: 8px; }
.nikx .nikx-price-desc { font-size: 13.5px; line-height: 1.6; margin-bottom: 22px; }
.nikx-price-amount { font-family: var(--nikx-font-display); font-weight: 800; font-size: 21px; display: block; }
.nikx-price-amount .unit { font-family: var(--nikx-font-body); font-size: 12px; font-weight: 400; display: block; margin-top: 4px; }
.nikx .nikx-price-features { margin: 22px 0 24px; flex-grow: 1; }
.nikx .nikx-price-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin-bottom: 10px; line-height: 1.5; }
.nikx-price-features .nikx-icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.nikx-price-card .nikx-btn { justify-content: center; width: 100%; font-size: 13.5px; padding: 12px 20px; }

.nikx-pricing--meridian { background: var(--nikx-white); }
.nikx-pricing--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-pricing--meridian .nikx-price-card { background: var(--nikx-white); border: 1.5px solid var(--nikx-border); }
.nikx-pricing--meridian .nikx-price-icon { background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); }
.nikx-pricing--meridian .nikx-price-desc { color: var(--nikx-muted); }
.nikx-pricing--meridian .nikx-price-amount { color: var(--nikx-navy); }
.nikx-pricing--meridian .nikx-price-amount .unit { color: var(--nikx-muted); }
.nikx-pricing--meridian .nikx-price-features li { color: var(--nikx-text); }
.nikx-pricing--meridian .nikx-price-features .nikx-icon { color: var(--nikx-teal-dk); }

.nikx-pricing--foundry { background: var(--nikx-navy); }
.nikx-pricing--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-pricing--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-pricing--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-pricing--foundry .nikx-price-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.nikx-pricing--foundry .nikx-price-icon { background: rgba(240,165,0,.16); color: var(--nikx-gold); }
.nikx-pricing--foundry .nikx-price-tier { color: var(--nikx-white); }
.nikx-pricing--foundry .nikx-price-desc { color: var(--nikx-muted-dk); }
.nikx-pricing--foundry .nikx-price-amount { color: var(--nikx-white); }
.nikx-pricing--foundry .nikx-price-amount .unit { color: rgba(255,255,255,.55); }
.nikx-pricing--foundry .nikx-price-features li { color: rgba(255,255,255,.82); }
.nikx-pricing--foundry .nikx-price-features .nikx-icon { color: var(--nikx-gold); }

@media (max-width: 900px) {
  .nikx-pricing-section { padding: 36px 0; }
  .nikx-pricing-grid { grid-template-columns: 1fr; max-width: 460px; }
}

/* ============================================================
   INTRO SECTION: 2 variations. Two-column intro copy + 4 "pillar"
   mini-cards. Real pattern found on 66/83 real pages, missed in
   the first two batches.
   ============================================================ */
.nikx-intro-section { padding: 53px 0; }
.nikx-intro-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.nikx-intro-copy h2 { font-size: 30px; margin-top: 12px; }
.nikx-intro-copy p { margin-top: 16px; font-size: 15.5px; line-height: 1.7; }
.nikx .nikx-intro-pull {
  margin-top: 20px; padding: 18px 20px; border-left: 3px solid; font-size: 15px;
  font-style: italic; line-height: 1.6;
}
.nikx-pillar-list { display: flex; flex-direction: column; gap: 20px; }
.nikx-pillar { display: flex; gap: 16px; align-items: flex-start; }
.nikx-pillar-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.nikx-pillar h4 { font-size: 15px; margin-bottom: 6px; }
.nikx-pillar p { font-size: 13.5px; line-height: 1.6; }

.nikx-intro--meridian { background: var(--nikx-white); }
.nikx-intro--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-intro--meridian .nikx-intro-copy p { color: var(--nikx-muted); }
.nikx-intro--meridian .nikx-intro-pull { border-color: var(--nikx-gold); color: var(--nikx-navy); background: var(--nikx-surface); }
.nikx-intro--meridian .nikx-pillar-icon { background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); }
.nikx-intro--meridian .nikx-pillar p { color: var(--nikx-muted); }

.nikx-intro--foundry { background: var(--nikx-navy); }
.nikx-intro--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-intro--foundry .nikx-intro-copy h2 { color: var(--nikx-white); }
.nikx-intro--foundry .nikx-intro-copy p { color: var(--nikx-muted-dk); }
.nikx-intro--foundry .nikx-intro-pull { border-color: var(--nikx-gold); color: var(--nikx-white); background: rgba(255,255,255,.06); }
.nikx-intro--foundry .nikx-pillar-icon { background: rgba(240,165,0,.16); color: var(--nikx-gold); }
.nikx-intro--foundry .nikx-pillar h4 { color: var(--nikx-white); }
.nikx-intro--foundry .nikx-pillar p { color: var(--nikx-muted-dk); }

@media (max-width: 900px) {
  .nikx-intro-section { padding: 36px 0; }
  .nikx-intro-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   MID-PAGE CTA: 2 variations. Smaller inline CTA band for
   breaking up long pages, distinct from Final CTA Band. Real
   pattern found on 67/83 real pages, often twice per page.
   ============================================================ */
.nikx-midcta-band { padding: 36px 0; }
.nikx-midcta-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.nikx-midcta-text h3 { font-size: 20px; }
.nikx-midcta-text p { margin-top: 6px; font-size: 14px; }
.nikx-midcta-btns { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

.nikx-midcta--meridian { background: var(--nikx-blue); }
.nikx-midcta--meridian .nikx-midcta-text h3 { color: var(--nikx-white); }
.nikx-midcta--meridian .nikx-midcta-text p { color: var(--nikx-blue-lt); }

.nikx-midcta--foundry { background: var(--nikx-navy); border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.nikx-midcta--foundry .nikx-midcta-text h3 { color: var(--nikx-white); }
.nikx-midcta--foundry .nikx-midcta-text p { color: var(--nikx-muted-dk); }

@media (max-width: 600px) {
  .nikx-midcta-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   COMPLIANCE / STANDARDS GRID: 2 variations. 6-card grid of real
   verified technical/compliance standards (company-facts.md).
   Real pattern found on 54/83 real pages (page-specific standards
   there, e.g. OSHA for the US page; this uses the general,
   non-country-specific standards this project already verified).
   ============================================================ */
.nikx-compliance-section { padding: 53px 0; }
.nikx-compliance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nikx-compliance-card { padding: 26px 24px; border-radius: var(--nikx-r-lg); }
.nikx-compliance-icon {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.nikx-compliance-card h4 { font-size: 15.5px; margin-bottom: 8px; }
.nikx-compliance-card p { font-size: 13.5px; line-height: 1.6; }

.nikx-compliance--meridian { background: var(--nikx-surface); }
.nikx-compliance--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-compliance--meridian .nikx-compliance-card { background: var(--nikx-white); border: 1.5px solid var(--nikx-border); }
.nikx-compliance--meridian .nikx-compliance-icon { background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); }
.nikx-compliance--meridian .nikx-compliance-card p { color: var(--nikx-muted); }

.nikx-compliance--foundry { background: var(--nikx-navy); }
.nikx-compliance--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-compliance--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-compliance--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-compliance--foundry .nikx-compliance-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.nikx-compliance--foundry .nikx-compliance-icon { background: rgba(240,165,0,.16); color: var(--nikx-gold); }
.nikx-compliance--foundry .nikx-compliance-card h4 { color: var(--nikx-white); }
.nikx-compliance--foundry .nikx-compliance-card p { color: var(--nikx-muted-dk); }

@media (max-width: 900px) {
  .nikx-compliance-section { padding: 36px 0; }
  .nikx-compliance-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .nikx-compliance-grid { grid-template-columns: 1fr; } }

/* ============================================================
   TICKER / MARQUEE: 2 variations. Auto-scrolling strip of short
   trust badges. Real pattern found on 47/83 real pages. The item
   list is duplicated once in the markup so the CSS animation loops
   seamlessly, matching the real site's own technique.
   ============================================================ */
.nikx-ticker-band { padding: 18px 0; overflow: hidden; }
.nikx-ticker-track { display: flex; width: max-content; animation: nikx-ticker-scroll 28s linear infinite; }
.nikx-ticker-item {
  flex-shrink: 0; padding: 0 28px; font-size: 13px; font-weight: 700;
  white-space: nowrap; display: flex; align-items: center;
}
.nikx-ticker-item:not(:last-child) { border-right: 1px solid; }
@keyframes nikx-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.nikx-ticker--meridian { background: var(--nikx-surface); border-top: 1px solid var(--nikx-border); border-bottom: 1px solid var(--nikx-border); }
.nikx-ticker--meridian .nikx-ticker-item { color: var(--nikx-navy); border-color: var(--nikx-border); }

.nikx-ticker--foundry { background: var(--nikx-navy-dk); }
.nikx-ticker--foundry .nikx-ticker-item { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.14); }

@media (prefers-reduced-motion: reduce) {
  .nikx-ticker-track { animation: none; }
}

/* ============================================================
   DIRECTORY / RELATED LINKS GRID: 2 variations. Redesigned
   2026-08-20 from a row-list table into a card grid, matching the
   Services/Resources visual language, per explicit feedback.
   Internal-links pattern for SEO, real pattern found on 40/83 real
   pages. Links shown here point at ikhya's own real, existing
   (out-of-scope) pages as a realistic illustration; a real new
   page swaps in whatever links are actually relevant to it.
   ============================================================ */
.nikx-directory-section { padding: 53px 0; }
.nikx-directory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nikx-directory-card { display: block; padding: 28px 24px; border-radius: var(--nikx-r-lg); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.nikx-directory-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.nikx-directory-card h4 { font-size: 15.5px; margin-bottom: 8px; line-height: 1.35; }
.nikx-directory-card p { font-size: 13px; line-height: 1.6; }
.nikx-directory-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 12.5px; font-weight: 700; }

.nikx-directory--meridian { background: var(--nikx-white); }
.nikx-directory--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-directory--meridian .nikx-directory-card { background: var(--nikx-white); border: 1.5px solid var(--nikx-border); }
.nikx-directory--meridian .nikx-directory-card:hover { border-color: var(--nikx-blue); box-shadow: var(--nikx-shadow-md); transform: translateY(-3px); }
.nikx-directory--meridian .nikx-directory-icon { background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); }
.nikx-directory--meridian .nikx-directory-card p { color: var(--nikx-muted); }
.nikx-directory--meridian .nikx-directory-link { color: var(--nikx-blue-dk); }

.nikx-directory--foundry { background: var(--nikx-navy); }
.nikx-directory--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-directory--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-directory--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-directory--foundry .nikx-directory-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.nikx-directory--foundry .nikx-directory-card:hover { border-color: var(--nikx-gold); background: rgba(255,255,255,.1); transform: translateY(-3px); }
.nikx-directory--foundry .nikx-directory-icon { background: rgba(240,165,0,.16); color: var(--nikx-gold); }
.nikx-directory--foundry .nikx-directory-card h4 { color: var(--nikx-white); }
.nikx-directory--foundry .nikx-directory-card p { color: var(--nikx-muted-dk); }
.nikx-directory--foundry .nikx-directory-link { color: var(--nikx-gold); }

@media (max-width: 900px) {
  .nikx-directory-section { padding: 36px 0; }
  .nikx-directory-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .nikx-directory-grid { grid-template-columns: 1fr; } }

/* ============================================================
   TOOLS / LMS PILLS: 2 variations. Plain-text pill cloud of real
   verified authoring tools and LMS platforms (company-facts.md).
   Real pattern found on 34/83 real pages.
   ============================================================ */
.nikx-tools-section { padding: 46px 0; }
.nikx-tools-label {
  display: block; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; margin-bottom: 20px;
}
.nikx-tools-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.nikx-tool-pill { padding: 9px 18px; border-radius: var(--nikx-r-pill); font-size: 13px; font-weight: 700; }

.nikx-tools--meridian { background: var(--nikx-surface); }
.nikx-tools--meridian .nikx-tools-label { color: var(--nikx-muted); }
.nikx-tools--meridian .nikx-tool-pill { background: var(--nikx-white); color: var(--nikx-navy); border: 1.5px solid var(--nikx-border); }

.nikx-tools--foundry { background: var(--nikx-navy); }
.nikx-tools--foundry .nikx-tools-label { color: rgba(255,255,255,.55); }
.nikx-tools--foundry .nikx-tool-pill { background: rgba(255,255,255,.08); color: var(--nikx-white); border: 1px solid rgba(255,255,255,.16); }

/* ============================================================
   RESOURCES / ARTICLES GRID: 2 variations. Real 3 article
   title/description/URL sets, source: the real united-states
   page's Resources section (non-country-specific content, safe
   to reuse anywhere). Real pattern found on 27/83 real pages.
   ============================================================ */
.nikx-resources-section { padding: 53px 0; }
.nikx-resources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.nikx-resource-card { display: block; padding: 26px 24px; border-radius: var(--nikx-r-lg); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.nikx-resource-cat { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.nikx-resource-card h4 { font-size: 16px; margin: 12px 0 10px; line-height: 1.35; }
.nikx-resource-card p { font-size: 13.5px; line-height: 1.6; }
.nikx-resource-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 700; }

.nikx-resources--meridian { background: var(--nikx-white); }
.nikx-resources--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-resources--meridian .nikx-resource-card { background: var(--nikx-white); border: 1.5px solid var(--nikx-border); }
.nikx-resources--meridian .nikx-resource-card:hover { border-color: var(--nikx-blue); box-shadow: var(--nikx-shadow-md); transform: translateY(-3px); }
.nikx-resources--meridian .nikx-resource-cat { color: var(--nikx-blue-dk); }
.nikx-resources--meridian .nikx-resource-card p { color: var(--nikx-muted); }
.nikx-resources--meridian .nikx-resource-link { color: var(--nikx-blue-dk); }

.nikx-resources--foundry { background: var(--nikx-navy); }
.nikx-resources--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-resources--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-resources--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-resources--foundry .nikx-resource-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.nikx-resources--foundry .nikx-resource-card:hover { border-color: var(--nikx-gold); background: rgba(255,255,255,.1); transform: translateY(-3px); }
.nikx-resources--foundry .nikx-resource-cat { color: var(--nikx-gold); }
.nikx-resources--foundry .nikx-resource-card h4 { color: var(--nikx-white); }
.nikx-resources--foundry .nikx-resource-card p { color: var(--nikx-muted-dk); }
.nikx-resources--foundry .nikx-resource-link { color: var(--nikx-gold); }

@media (max-width: 900px) {
  .nikx-resources-section { padding: 36px 0; }
  .nikx-resources-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .nikx-resources-grid { grid-template-columns: 1fr; } }

/* ============================================================
   RESULTS STRIP: 2 variations. Card-based "by the numbers"
   showcase, richer than the plain Stats Band. Uses only the
   undisputed figures (500+/34+/40+/15+); deliberately does not
   use the About page's conflicting 40+/50+/98% figures, see
   company-facts.md's stat-conflict note. Real pattern found on
   20-22/83 real pages.
   ============================================================ */
.nikx-results-section { padding: 53px 0; }
.nikx-results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.nikx-result-card { padding: 28px 22px; border-radius: var(--nikx-r-lg); text-align: center; }
.nikx-result-num { font-family: var(--nikx-font-display); font-weight: 800; font-size: 34px; display: block; line-height: 1; }
.nikx-result-card h4 { font-size: 14.5px; margin-top: 12px; }
.nikx-result-card p { font-size: 12.5px; line-height: 1.6; margin-top: 6px; }

.nikx-results--meridian { background: var(--nikx-surface); }
.nikx-results--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-results--meridian .nikx-result-card { background: var(--nikx-white); border: 1.5px solid var(--nikx-border); }
.nikx-results--meridian .nikx-result-num { color: var(--nikx-blue-dk); }
.nikx-results--meridian .nikx-result-card p { color: var(--nikx-muted); }

.nikx-results--foundry { background: var(--nikx-navy); }
.nikx-results--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-results--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-results--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-results--foundry .nikx-result-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.nikx-results--foundry .nikx-result-num { color: var(--nikx-gold); }
.nikx-results--foundry .nikx-result-card h4 { color: var(--nikx-white); }
.nikx-results--foundry .nikx-result-card p { color: var(--nikx-muted-dk); }

@media (max-width: 900px) {
  .nikx-results-section { padding: 36px 0; }
  .nikx-results-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   GLOBAL REACH / REGIONS: 2 variations. 6 region cards plus a
   language tag cloud. Real pattern found on the homepage and
   About page. Real regions/countries/languages, source:
   company-facts.md's Global footprint section plus the real
   About page's region breakdown.
   ============================================================ */
.nikx-globalreach-section { padding: 53px 0; }
.nikx-globalreach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.nikx-globalreach-copy p { margin-top: 16px; font-size: 15px; line-height: 1.7; }
.nikx-region-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nikx-region-card { padding: 18px 16px; border-radius: var(--nikx-r-md); text-align: center; transition: border-color .2s ease, background-color .2s ease; }
.nikx-region-card .nikx-icon { margin: 0 auto 10px; }
.nikx-region-card h4 { font-size: 13.5px; margin-bottom: 4px; }
.nikx-region-card p { font-size: 11px; line-height: 1.4; }
.nikx-lang-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.nikx-lang-tag { padding: 6px 13px; border-radius: var(--nikx-r-pill); font-size: 12px; font-weight: 700; }

.nikx-globalreach--meridian { background: var(--nikx-white); }
.nikx-globalreach--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-globalreach--meridian .nikx-globalreach-copy p { color: var(--nikx-muted); }
.nikx-globalreach--meridian .nikx-region-card { background: var(--nikx-surface); border: 1.5px solid var(--nikx-border); }
.nikx-globalreach--meridian .nikx-region-card:hover { border-color: var(--nikx-blue); }
.nikx-globalreach--meridian .nikx-region-card .nikx-icon { color: var(--nikx-blue-dk); }
.nikx-globalreach--meridian .nikx-region-card h4 { color: var(--nikx-navy); }
.nikx-globalreach--meridian .nikx-region-card p { color: var(--nikx-muted); }
.nikx-globalreach--meridian .nikx-lang-tag { background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); }

.nikx-globalreach--foundry { background: var(--nikx-navy); }
.nikx-globalreach--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-globalreach--foundry .nikx-globalreach-copy h2 { color: var(--nikx-white); }
.nikx-globalreach--foundry .nikx-globalreach-copy p { color: var(--nikx-muted-dk); }
.nikx-globalreach--foundry .nikx-region-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.nikx-globalreach--foundry .nikx-region-card:hover { border-color: var(--nikx-gold); }
.nikx-globalreach--foundry .nikx-region-card .nikx-icon { color: var(--nikx-gold); }
.nikx-globalreach--foundry .nikx-region-card h4 { color: var(--nikx-white); }
.nikx-globalreach--foundry .nikx-region-card p { color: var(--nikx-muted-dk); }
.nikx-globalreach--foundry .nikx-lang-tag { background: rgba(240,165,0,.16); color: var(--nikx-gold); }

@media (max-width: 900px) {
  .nikx-globalreach-section { padding: 36px 0; }
  .nikx-globalreach-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) { .nikx-region-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   CRITERIA / EVALUATION GRID: 2 variations. General "how to
   evaluate an eLearning partner" advisory content, grounded in
   facts already verified elsewhere in this project (ADDIE/SAM,
   WCAG/Section 508, real authoring tools, 48-hour proposal,
   revision cycles), not fabricated claims about any competitor.
   Real pattern found on 11-15/83 real pages (mostly USA listicle
   pages).
   ============================================================ */
.nikx-criteria-section { padding: 53px 0; }
.nikx-criteria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nikx-criteria-card { padding: 24px 22px; border-radius: var(--nikx-r-lg); position: relative; }
.nikx-criteria-num { font-family: var(--nikx-font-display); font-size: 13px; font-weight: 800; display: block; margin-bottom: 10px; }
.nikx-criteria-card h4 { font-size: 15px; margin-bottom: 8px; }
.nikx-criteria-card p { font-size: 13px; line-height: 1.6; }

.nikx-criteria--meridian { background: var(--nikx-surface); }
.nikx-criteria--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-criteria--meridian .nikx-criteria-card { background: var(--nikx-white); border: 1.5px solid var(--nikx-border); border-top: 3px solid var(--nikx-blue); }
.nikx-criteria--meridian .nikx-criteria-num { color: var(--nikx-blue-dk); }
.nikx-criteria--meridian .nikx-criteria-card p { color: var(--nikx-muted); }

.nikx-criteria--foundry { background: var(--nikx-navy); }
.nikx-criteria--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-criteria--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-criteria--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-criteria--foundry .nikx-criteria-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-top: 3px solid var(--nikx-gold); }
.nikx-criteria--foundry .nikx-criteria-num { color: var(--nikx-gold); }
.nikx-criteria--foundry .nikx-criteria-card h4 { color: var(--nikx-white); }
.nikx-criteria--foundry .nikx-criteria-card p { color: var(--nikx-muted-dk); }

@media (max-width: 900px) {
  .nikx-criteria-section { padding: 36px 0; }
  .nikx-criteria-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .nikx-criteria-grid { grid-template-columns: 1fr; } }

/* ============================================================
   COMPANY MILESTONES: 2 variations. Vertical company-history
   timeline, distinct from Process/Timeline (delivery steps, not
   company history). Real content from the real About page's
   milestones (founding year, expansion, practice launches),
   found 2026-08-20, now also logged in company-facts.md. The
   "Today" entry deliberately avoids restating the About page's
   disputed 40+ countries figure, uses the freshly-verified 120+
   team size fact instead. Real pattern found on 1/83 real pages
   (About only), included anyway since it's a genuinely distinct
   component type, not a reskin of anything already built.
   ============================================================ */
.nikx-milestones-section { padding: 53px 0; }
.nikx-milestone-track { max-width: 720px; margin: 0 auto; }
.nikx-milestone { display: grid; grid-template-columns: 28px 1fr; gap: 20px; }
.nikx-milestone-rail { display: flex; flex-direction: column; align-items: center; }
.nikx-milestone-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.nikx-milestone-line { width: 2px; flex-grow: 1; margin-top: 4px; }
.nikx-milestone:last-child .nikx-milestone-line { display: none; }
.nikx-milestone-content { padding-bottom: 32px; }
.nikx-milestone-year { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.nikx-milestone-content h4 { font-size: 17px; margin: 6px 0 8px; }
.nikx-milestone-content p { font-size: 14px; line-height: 1.65; }

.nikx-milestones--meridian { background: var(--nikx-white); }
.nikx-milestones--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-milestones--meridian .nikx-milestone-dot { background: var(--nikx-blue); }
.nikx-milestones--meridian .nikx-milestone-line { background: var(--nikx-border); }
.nikx-milestones--meridian .nikx-milestone-year { color: var(--nikx-blue-dk); }
.nikx-milestones--meridian .nikx-milestone-content p { color: var(--nikx-muted); }

.nikx-milestones--foundry { background: var(--nikx-navy); }
.nikx-milestones--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-milestones--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-milestones--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-milestones--foundry .nikx-milestone-dot { background: var(--nikx-gold); }
.nikx-milestones--foundry .nikx-milestone-line { background: rgba(255,255,255,.18); }
.nikx-milestones--foundry .nikx-milestone-year { color: var(--nikx-gold); }
.nikx-milestones--foundry .nikx-milestone-content h4 { color: var(--nikx-white); }
.nikx-milestones--foundry .nikx-milestone-content p { color: var(--nikx-muted-dk); }

@media (max-width: 900px) { .nikx-milestones-section { padding: 36px 0; } }

/* ============================================================
   COMPARISON TABLE, NAMED COMPETITORS: 2 variations. A second,
   alternative Comparison Table content pattern, not a replacement
   for the already-approved In-House vs. IKHYA version above.
   Real, already-published content: ikhya's own live
   training-companies-in-usa page compares itself against 8-10
   real named eLearning vendors in a capability checkmark grid,
   found 2026-08-20 (see company-facts.md). A representative
   6-company subset is used here, same real capability pattern,
   not fabricated. Uses a distinct class prefix (nikx-rivals) from
   the original (nikx-compare) so both can be reviewed side by
   side.
   ============================================================ */
.nikx-rivals-section { padding: 53px 0; }
.nikx-rivals-table-wrap { max-width: 980px; margin: 0 auto; overflow-x: auto; border-radius: var(--nikx-r-md); }
.nikx-rivals-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.nikx-rivals-table th {
  padding: 14px 16px; text-align: left; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
}
.nikx-rivals-table td { padding: 13px 16px; font-size: 13px; text-align: center; }
.nikx-rivals-table td:first-child, .nikx-rivals-table th:first-child { text-align: left; }
.nikx-rivals-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--nikx-border); }
.nikx-rivals-table .co-name { font-weight: 700; }
.nikx-rivals-table .nikx-icon { width: 15px; height: 15px; display: inline-block; }

.nikx-rivals--meridian { background: var(--nikx-surface); }
.nikx-rivals--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-rivals--meridian .nikx-rivals-table-wrap { border: 1.5px solid var(--nikx-border); background: var(--nikx-white); }
.nikx-rivals--meridian .nikx-rivals-table thead th { background: var(--nikx-navy); color: rgba(255,255,255,.75); }
.nikx-rivals--meridian .nikx-rivals-table .co-name { color: var(--nikx-navy); }
.nikx-rivals--meridian tr.is-ikhya { background: var(--nikx-blue-lt); }
.nikx-rivals--meridian tr.is-ikhya .co-name { color: var(--nikx-blue-dk); }
.nikx-rivals--meridian .yes { color: var(--nikx-teal-dk); }
.nikx-rivals--meridian .no { color: #d6483d; }

.nikx-rivals--foundry { background: var(--nikx-navy); }
.nikx-rivals--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-rivals--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-rivals--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-rivals--foundry .nikx-rivals-table-wrap { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.nikx-rivals--foundry .nikx-rivals-table thead th { background: rgba(0,0,0,.25); color: var(--nikx-muted-dk); }
.nikx-rivals--foundry .nikx-rivals-table tbody tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.12); }
.nikx-rivals--foundry .nikx-rivals-table .co-name { color: var(--nikx-white); }
.nikx-rivals--foundry tr.is-ikhya { background: rgba(240,165,0,.14); }
.nikx-rivals--foundry tr.is-ikhya .co-name { color: var(--nikx-gold); }
.nikx-rivals--foundry .yes { color: var(--nikx-teal); }
.nikx-rivals--foundry .no { color: #f0574a; }

@media (max-width: 900px) { .nikx-rivals-section { padding: 36px 0; } }

/* ============================================================
   BATCH 4 (2026-10-18): components added while building the
   custom-elearning-development-services page from its content doc.
   Built on request ("free to create new components"), not yet
   extracted to components/ or reviewed in component-lab. Every rule
   that sets a margin on a p, heading, ul or li is written as .nikx .x so it
   beats the .nikx <element> reset above (see LESSONS-LEARNED.md).
   ============================================================ */

/* ---- Shared: inline text links, anchors under WoodMart's sticky header,
   generic two-colour helpers ---- */
.nikx .nikx-link {
  color: var(--nikx-blue-dk); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-color: rgba(0, 110, 221, .35);
  transition: text-decoration-color .15s ease, color .15s ease;
}
.nikx .nikx-link:hover { text-decoration-color: currentColor; }
.nikx .nikx-link--light { color: var(--nikx-gold); text-decoration-color: rgba(240, 165, 0, .45); }
section.nikx[id] { scroll-margin-top: 96px; }
.nikx .nikx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nikx .nikx-section-head h2 + p { margin-top: 14px; }
.nikx-section-head.wide { max-width: 820px; }
.nikx-sec-pad { padding: 64px 0; }
@media (max-width: 900px) { .nikx-sec-pad { padding: 44px 0; } }

/* ---- Hero additions: breadcrumb, two-part subhead, figures strip.
   Used inside .nikx-hero--signature. ---- */
.nikx .nikx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; margin-bottom: 18px; }
.nikx .nikx-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.nikx .nikx-crumbs li + li::before { content: ''; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; margin-right: 4px; }
.nikx-hero--signature .nikx-crumbs { color: rgba(255,255,255,.62); }
.nikx-hero--signature .nikx-crumbs a { color: rgba(255,255,255,.88); }
.nikx-hero--signature .nikx-crumbs a:hover { color: var(--nikx-white); text-decoration: underline; }
.nikx-hero--signature .nikx-crumbs [aria-current] { color: rgba(255,255,255,.62); }
.nikx .nikx-hero-lead { margin-top: 20px; font-size: 18px; line-height: 1.55; font-weight: 700; }
.nikx-hero--signature .nikx-hero-lead { color: var(--nikx-white); }
.nikx-hero--signature .nikx-hero-lead::before { content: ''; display: block; width: 44px; height: 3px; background: var(--nikx-gold); margin-bottom: 16px; border-radius: 2px; }
.nikx-hero--signature .nikx-hero-lead + .nikx-hero-sub { margin-top: 12px; }
.nikx-hero-figures {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(3, 18, 38, .28);
}
.nikx .nikx-hero-figures ul {
  max-width: 1240px; margin: 0 auto; padding: 22px 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.nikx .nikx-hero-figures li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; position: relative; text-align: center; min-width: 0; }
.nikx .nikx-hero-figures li + li::before { content: ''; position: absolute; left: -10px; top: 2px; bottom: 2px; width: 1px; background: rgba(255,255,255,.16); }
.nikx-hero-fig-num { font-family: var(--nikx-font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--nikx-gold); white-space: nowrap; }
.nikx-hero-fig-lbl { font-size: 13px; line-height: 1.35; font-weight: 700; letter-spacing: .3px; color: rgba(255,255,255,.78); }
@media (max-width: 900px) {
  .nikx .nikx-hero-figures ul { grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
  .nikx .nikx-hero-figures li:nth-child(3)::before { display: none; }
  .nikx .nikx-hero-figures li + li::before { left: -12px; }
}
@media (max-width: 600px) {
  .nikx-hero-fig-num { font-size: 25px; }
  .nikx .nikx-hero-figures ul { padding: 20px; }
  .nikx .nikx-hero-lead { font-size: 16.5px; }
}

/* ---- ANSWER-FIRST BOX: a definition card directly under the hero,
   written to be lifted as a featured-snippet / AI-overview answer.
   Text left, supporting photo right. ---- */
.nikx-answer--meridian { background: var(--nikx-white); }
.nikx-answer-card {
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: stretch;
  border-radius: var(--nikx-r-lg); overflow: hidden;
  background: var(--nikx-surface); border: 1.5px solid var(--nikx-border);
}
.nikx-answer-copy { padding: 44px 44px 40px; border-left: 5px solid var(--nikx-gold); }
.nikx-answer-label {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--nikx-r-pill);
  background: var(--nikx-blue-lt); color: var(--nikx-blue-dk);
  font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
}
.nikx-answer-label .nikx-icon { width: 14px; height: 14px; }
.nikx .nikx-answer-copy h2 { font-size: 28px; margin-top: 16px; }
.nikx .nikx-answer-copy p { margin-top: 14px; font-size: 17px; line-height: 1.7; color: var(--nikx-text); }
.nikx-answer-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.nikx-answer-tools span {
  padding: 6px 12px; border-radius: var(--nikx-r-pill); background: var(--nikx-white);
  border: 1px solid var(--nikx-border); font-size: 12.5px; font-weight: 700; color: var(--nikx-navy);
}
.nikx .nikx-answer-media { position: relative; min-height: 280px; }
.nikx .nikx-answer-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (max-width: 900px) {
  .nikx-answer-card { grid-template-columns: 1fr; }
  .nikx .nikx-answer-media { min-height: 220px; order: -1; }
  .nikx-answer-copy { padding: 30px 26px; border-left: 0; border-top: 5px solid var(--nikx-gold); }
}
@media (max-width: 600px) { .nikx .nikx-answer-copy h2 { font-size: 23px; } .nikx .nikx-answer-copy p { font-size: 16px; } }

/* ---- Why-Us additions: 4-up grid, h3 card titles (keeps the
   H2 -> H3 outline the original h4 cards skip) ---- */
.nikx-why-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.nikx .nikx-why-card h3 { font-size: 17px; margin-bottom: 10px; line-height: 1.3; }
.nikx-why--foundry .nikx-why-card h3 { color: var(--nikx-white); }
@media (max-width: 1024px) { .nikx-why-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .nikx-why-grid.cols-4 { grid-template-columns: 1fr; } }

/* ---- OPTIONS COMPARISON: 4 option cards sharing the same 4 rows.
   Rows line up across cards via CSS subgrid. The featured card (the
   option this page is about) gets a navy header and blue frame. ---- */
.nikx-options--meridian { background: var(--nikx-surface); }
.nikx-options--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-options-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 18px;
  grid-template-rows: repeat(5, auto);
}
.nikx-option {
  grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0;
  background: var(--nikx-white); border: 1.5px solid var(--nikx-border); border-radius: var(--nikx-r-lg);
  overflow: hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.nikx-option:hover { box-shadow: var(--nikx-shadow-md); transform: translateY(-3px); }
.nikx-option-head { padding: 22px 22px 18px; border-bottom: 1.5px solid var(--nikx-border); }
.nikx-option-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--nikx-r-pill); background: var(--nikx-surface2); color: var(--nikx-muted); margin-bottom: 10px;
}
.nikx .nikx-option h3 { font-size: 18.5px; line-height: 1.25; }
.nikx-option-row { padding: 16px 22px; }
.nikx-option-row + .nikx-option-row { border-top: 1px dashed var(--nikx-border); }
.nikx .nikx-option-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--nikx-muted); margin-bottom: 8px; }
.nikx .nikx-option-row p { font-size: 14px; line-height: 1.6; color: var(--nikx-text); }
.nikx .nikx-option-row li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--nikx-text); }
.nikx .nikx-option-row li + li { margin-top: 7px; }
.nikx-option-row li .nikx-icon { width: 15px; height: 15px; margin-top: 2px; }
.nikx-option-row.pros .nikx-icon { color: var(--nikx-teal-dk); }
.nikx-option-row.cons .nikx-icon { color: var(--nikx-gold-dk); }
.nikx-option-row.best { background: var(--nikx-surface); }
.nikx .nikx-option-row.best p { font-weight: 700; color: var(--nikx-navy); }
.nikx-option.is-featured { border-color: var(--nikx-blue); box-shadow: 0 0 0 1px var(--nikx-blue), var(--nikx-shadow-sm); }
.nikx-option.is-featured .nikx-option-head { background: var(--nikx-navy); border-bottom-color: var(--nikx-navy); }
.nikx-option.is-featured .nikx-option-tag { background: var(--nikx-gold); color: var(--nikx-navy); }
.nikx-option.is-featured h3 { color: var(--nikx-white); }
.nikx-option.is-featured .nikx-option-row.best { background: var(--nikx-blue-lt); }
.nikx-options-note {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  margin-top: 32px; padding: 26px 28px; border-radius: var(--nikx-r-lg);
  background: var(--nikx-white); border: 1.5px solid var(--nikx-border);
}
.nikx-options-note-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--nikx-gold-lt); color: var(--nikx-gold-dk); }
.nikx .nikx-options-note p { font-size: 15px; line-height: 1.75; color: var(--nikx-text); }
@media (max-width: 1100px) {
  .nikx-options-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(10, auto); row-gap: 18px; }
}
@media (max-width: 640px) {
  .nikx-options-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .nikx-option { grid-row: auto; grid-template-rows: none; display: block; }
  .nikx-options-note { grid-template-columns: 1fr; padding: 22px 20px; }
}

/* ---- Mid-page CTA addition: single-line title as a <p>, so a CTA
   strip doesn't add a heading to the page outline ---- */
.nikx .nikx-midcta-title { margin: 0; font-family: var(--nikx-font-display); font-weight: 700; font-size: 20px; line-height: 1.3; }
.nikx-midcta--meridian .nikx-midcta-title { color: var(--nikx-white); }
.nikx-midcta--meridian { background-image: radial-gradient(520px 260px at 90% 120%, rgba(240,165,0,.22) 0%, transparent 70%), radial-gradient(600px 300px at 10% -40%, var(--nikx-blue-dk) 0%, transparent 70%); }

/* ---- DELIVERABLES: "what you receive" list + "formats and tools"
   panel, then a 3x3 grid of format tiles and two callouts ---- */
.nikx-deliver--meridian { background: var(--nikx-white); }
.nikx-deliver--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-deliver-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: stretch; }
.nikx-panel { border-radius: var(--nikx-r-lg); padding: 30px 30px 28px; }
.nikx-panel--line { background: var(--nikx-white); border: 1.5px solid var(--nikx-border); }
.nikx-panel--tint { background: var(--nikx-surface); border: 1.5px solid var(--nikx-border); }
.nikx .nikx-panel h3 { font-size: 19px; display: flex; align-items: center; gap: 10px; }
.nikx-panel h3 .nikx-icon { width: 22px; height: 22px; color: var(--nikx-blue-dk); }
.nikx .nikx-steps-list { margin-top: 20px; counter-reset: nikx-steps; }
.nikx .nikx-steps-list li {
  counter-increment: nikx-steps; position: relative; padding: 0 0 0 46px; font-size: 15px; line-height: 1.6; color: var(--nikx-text);
}
.nikx .nikx-steps-list li + li { margin-top: 16px; }
.nikx-steps-list li::before {
  content: counter(nikx-steps, decimal-leading-zero); position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--nikx-font-display); font-weight: 700; font-size: 12px;
  background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); border: 1.5px solid var(--nikx-blue);
}
.nikx-spec { margin-top: 18px; border-radius: var(--nikx-r-md); overflow: hidden; border: 1.5px solid var(--nikx-border); background: var(--nikx-white); }
.nikx .nikx-spec table { width: 100%; border-collapse: collapse; }
.nikx-spec caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nikx-spec th, .nikx-spec td { text-align: left; vertical-align: top; padding: 16px 18px; }
.nikx-spec thead th { background: var(--nikx-navy); color: rgba(255,255,255,.8); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.nikx-spec tbody th { width: 34%; font-size: 13.5px; color: var(--nikx-navy); }
.nikx-spec tbody tr + tr th, .nikx-spec tbody tr + tr td { border-top: 1px solid var(--nikx-border); }
.nikx-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.nikx-chip { padding: 5px 11px; border-radius: var(--nikx-r-pill); font-size: 12.5px; font-weight: 700; background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); white-space: nowrap; }
.nikx-chip.alt { background: var(--nikx-teal-lt); color: var(--nikx-teal-dk); }
.nikx .nikx-panel-note { margin-top: 18px; font-size: 14px; line-height: 1.7; color: var(--nikx-muted); }
.nikx .nikx-subhead { margin-top: 56px; display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.nikx .nikx-subhead h3 { font-size: 24px; }
.nikx .nikx-format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.nikx-format {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--nikx-r-md);
  background: var(--nikx-surface); border: 1.5px solid transparent; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--nikx-navy);
  transition: border-color .2s ease, background-color .2s ease;
}
.nikx-format-grid > li > a.nikx-format { height: 100%; }
a.nikx-format:hover { border-color: var(--nikx-blue); background: var(--nikx-white); }
a.nikx-format .nikx-format-go { margin-left: auto; color: var(--nikx-blue-dk); font-size: 13px; }
.nikx-format-icon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--nikx-white); color: var(--nikx-blue-dk); box-shadow: var(--nikx-shadow-sm); }
.nikx-format-icon .nikx-icon { width: 21px; height: 21px; }
.nikx-callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.nikx-callout { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 22px 24px; border-radius: var(--nikx-r-lg); border: 1.5px solid var(--nikx-border); }
.nikx-callout-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--nikx-teal-lt); color: var(--nikx-teal-dk); }
.nikx .nikx-callout p { font-size: 14px; line-height: 1.7; color: var(--nikx-muted); }
.nikx .nikx-callout strong { color: var(--nikx-navy); }
@media (max-width: 900px) {
  .nikx-deliver-grid, .nikx-callouts { grid-template-columns: 1fr; }
  .nikx .nikx-format-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .nikx .nikx-format-grid { grid-template-columns: 1fr; }
  .nikx-panel { padding: 24px 20px; }
  .nikx-spec th, .nikx-spec td { padding: 13px 14px; }
  .nikx-spec tbody th { width: 38%; }
}

/* ---- Process additions: 6 steps, owner tag per step, h3 titles,
   closing CTA ---- */
.nikx-process-track.steps-6 { grid-template-columns: repeat(6, 1fr); gap: 18px; }
.nikx .nikx-process-step h3 { font-size: 15.5px; line-height: 1.3; margin-bottom: 8px; }
.nikx-process--foundry .nikx-process-step h3 { color: var(--nikx-white); }
.nikx-process-track.steps-6 .nikx-process-step { display: flex; flex-direction: column; align-items: flex-start; }
.nikx .nikx-process-track.steps-6 .nikx-process-step p { margin-bottom: 14px; }
.nikx-step-owner {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 5px 10px;
  border-radius: var(--nikx-r-pill); font-size: 11.5px; font-weight: 700; line-height: 1.3;
}
.nikx-step-owner .nikx-icon { width: 13px; height: 13px; }
.nikx-process--foundry .nikx-step-owner { background: rgba(255,255,255,.08); color: var(--nikx-white); border: 1px solid rgba(255,255,255,.16); }
.nikx-process--foundry .nikx-step-owner .nikx-icon { color: var(--nikx-gold); }
.nikx-process-foot { display: flex; justify-content: center; margin-top: 44px; }
@media (max-width: 1100px) {
  .nikx-process-track.steps-6 { grid-template-columns: repeat(3, 1fr); gap: 32px 22px; }
  .nikx-process-track.steps-6::before { display: none; }
}
@media (max-width: 600px) { .nikx-process-track.steps-6 { grid-template-columns: 1fr; gap: 26px; } }

/* ---- COST DRIVERS: 3-column decision table plus two follow-on
   cards (vendor guidance, RFP) ---- */
.nikx-cost--meridian { background: var(--nikx-surface); }
.nikx-cost--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-cost-wrap { overflow-x: auto; border-radius: var(--nikx-r-lg); border: 1.5px solid var(--nikx-border); background: var(--nikx-white); box-shadow: var(--nikx-shadow-sm); }
.nikx .nikx-cost-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.nikx-cost-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nikx-cost-table thead th {
  text-align: left; padding: 16px 22px; background: var(--nikx-navy); color: rgba(255,255,255,.8);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.nikx-cost-table thead th:last-child { color: var(--nikx-gold); }
.nikx-cost-table tbody th, .nikx-cost-table tbody td { text-align: left; vertical-align: top; padding: 16px 22px; font-size: 14.5px; line-height: 1.55; }
.nikx-cost-table tbody tr + tr > * { border-top: 1px solid var(--nikx-border); }
.nikx-cost-table tbody tr:hover > * { background: #fafcff; }
.nikx-cost-table tbody th { color: var(--nikx-navy); width: 22%; }
.nikx-cost-num { display: inline-flex; width: 26px; height: 26px; border-radius: 8px; align-items: center; justify-content: center; margin-right: 10px; background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); font-family: var(--nikx-font-display); font-size: 12px; }
.nikx-cost-table tbody td { color: var(--nikx-muted); }
.nikx-cost-table tbody td:last-child { color: var(--nikx-navy); font-weight: 700; background: rgba(240,165,0,.06); }
.nikx-cost-next { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 24px; }
.nikx-cost-card { padding: 26px 28px; border-radius: var(--nikx-r-lg); background: var(--nikx-white); border: 1.5px solid var(--nikx-border); }
.nikx .nikx-cost-card p { font-size: 14.5px; line-height: 1.75; color: var(--nikx-muted); }
.nikx-cost-card.rfp { background: var(--nikx-navy); border-color: var(--nikx-navy); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.nikx .nikx-cost-card.rfp p { color: var(--nikx-white); font-family: var(--nikx-font-display); font-weight: 700; font-size: 18px; line-height: 1.35; }
.nikx .nikx-cost-card.rfp .nikx-btn { align-self: flex-start; }
@media (max-width: 900px) { .nikx-cost-next { grid-template-columns: 1fr; } }

/* ---- CHECKLIST: two columns, "what you send" and "what we prepare",
   joined by an arrow ---- */
.nikx-checklist--foundry { background: var(--nikx-navy); position: relative; overflow: hidden; }
.nikx-checklist--foundry::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.4px); background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 60% 80% at 100% 0%, #000 0%, transparent 70%);
}
.nikx-checklist--foundry .nikx-container { position: relative; }
.nikx-checklist--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-checklist--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-checklist-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; }
.nikx-checklist-col { padding: 28px 28px 26px; border-radius: var(--nikx-r-lg); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
.nikx-checklist-col.ours { background: rgba(240,165,0,.08); border-color: rgba(240,165,0,.35); }
.nikx .nikx-checklist-col h3 { color: var(--nikx-white); font-size: 19px; display: flex; align-items: center; gap: 12px; }
.nikx-checklist-who { display: inline-flex; padding: 4px 10px; border-radius: var(--nikx-r-pill); font-family: var(--nikx-font-body); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; background: rgba(255,255,255,.12); color: var(--nikx-muted-dk); }
.ours .nikx-checklist-who { background: var(--nikx-gold); color: var(--nikx-navy); }
.nikx .nikx-checklist-col ul { margin-top: 20px; }
.nikx .nikx-checklist-col li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.9); }
.nikx .nikx-checklist-col li + li { margin-top: 13px; }
.nikx-check-box { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255,255,255,.35); margin-top: 0; }
.nikx-check-box .nikx-icon { width: 14px; height: 14px; color: var(--nikx-teal); }
.ours .nikx-check-box { border-color: var(--nikx-gold); background: var(--nikx-gold); }
.ours .nikx-check-box .nikx-icon { color: var(--nikx-navy); }
.nikx-checklist-arrow { display: flex; align-items: center; justify-content: center; }
.nikx-checklist-arrow span { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--nikx-gold); color: var(--nikx-navy); }
.nikx-checklist-arrow .nikx-icon { width: 20px; height: 20px; transform: rotate(-90deg); }
.nikx .nikx-checklist-foot { margin-top: 28px; font-size: 15px; line-height: 1.7; color: var(--nikx-muted-dk); max-width: 820px; }
@media (max-width: 900px) {
  .nikx-checklist-grid { grid-template-columns: 1fr; }
  .nikx-checklist-arrow .nikx-icon { transform: none; }
}
@media (max-width: 600px) { .nikx-checklist-col { padding: 22px 20px; } }

/* ---- Industry tiles: compact linked tiles under a prose intro ---- */
.nikx-sectors--meridian { background: var(--nikx-white); }
.nikx-sectors--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-sectors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.nikx-sector {
  display: flex; align-items: center; gap: 14px; padding: 18px 18px; border-radius: var(--nikx-r-md);
  border: 1.5px solid var(--nikx-border); background: var(--nikx-white); font-size: 14.5px; font-weight: 700; color: var(--nikx-navy); line-height: 1.35;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nikx-sector:hover { border-color: var(--nikx-blue); box-shadow: var(--nikx-shadow-md); transform: translateY(-2px); }
.nikx-sector-icon { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); }
.nikx-sector-icon .nikx-icon { width: 21px; height: 21px; }
.nikx .nikx-sectors-q {
  margin-top: 28px; padding: 22px 26px; border-radius: var(--nikx-r-lg); background: var(--nikx-navy);
  color: var(--nikx-white); font-family: var(--nikx-font-display); font-weight: 600; font-size: 19px; line-height: 1.45;
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
}
.nikx-sectors-q .nikx-icon { width: 34px; height: 26px; color: var(--nikx-gold); }
@media (max-width: 900px) { .nikx-sectors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .nikx-sectors-grid { grid-template-columns: 1fr; }
  .nikx .nikx-sectors-q { font-size: 16.5px; grid-template-columns: 1fr; gap: 10px; }
}

/* ---- RESULTS: headline stat tiles, two detailed case studies with
   photo, build list and metric row, then a client quote ---- */
.nikx-proof--foundry { background: linear-gradient(180deg, var(--nikx-navy-dk) 0%, var(--nikx-navy) 100%); background-color: var(--nikx-navy-dk); }
.nikx-proof--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-proof--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-proof--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-proof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.nikx-proof-stat { padding: 22px 24px; border-radius: var(--nikx-r-md); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.nikx-proof-stat-num { display: block; font-family: var(--nikx-font-display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--nikx-gold); }
.nikx-proof-stat-lbl { display: block; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--nikx-muted-dk); }
.nikx-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.nikx-study { border-radius: var(--nikx-r-lg); overflow: hidden; background: var(--nikx-white); display: flex; flex-direction: column; box-shadow: var(--nikx-shadow-lg); }
.nikx .nikx-study-media { position: relative; aspect-ratio: 16 / 7; background: var(--nikx-navy-lt); }
.nikx .nikx-study-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.nikx-study-tag {
  position: absolute; left: 18px; top: 18px; padding: 6px 12px; border-radius: var(--nikx-r-pill);
  background: var(--nikx-white); color: var(--nikx-navy); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
}
.nikx-study-body { padding: 26px 28px 8px; flex-grow: 1; }
.nikx .nikx-study h3 { font-size: 20px; line-height: 1.3; }
.nikx .nikx-study-client { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--nikx-blue-dk); }
.nikx-study-facts { margin-top: 18px; display: grid; gap: 14px; }
.nikx .nikx-study-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--nikx-muted); }
.nikx .nikx-study-facts dd { margin: 5px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--nikx-text); }
.nikx .nikx-study-facts dd li { display: flex; gap: 8px; align-items: flex-start; }
.nikx .nikx-study-facts dd li + li { margin-top: 6px; }
.nikx-study-facts dd li .nikx-icon { width: 15px; height: 15px; margin-top: 3px; color: var(--nikx-teal-dk); }
.nikx-study-results { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; border-top: 1.5px solid var(--nikx-border); background: var(--nikx-surface); }
.nikx-study-result { padding: 18px 16px; text-align: center; }
.nikx-study-result + .nikx-study-result { border-left: 1.5px solid var(--nikx-border); }
.nikx-study-result-num { display: block; font-family: var(--nikx-font-display); font-weight: 800; font-size: 25px; line-height: 1.1; color: var(--nikx-blue-dk); white-space: nowrap; }
.nikx-study-result-lbl { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; font-weight: 700; color: var(--nikx-muted); }
.nikx .nikx-proof-quote {
  margin: 28px 0 0; padding: 30px 34px; border-radius: var(--nikx-r-lg);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
}
.nikx-proof-quote .nikx-icon { width: 40px; height: 30px; color: var(--nikx-gold); }
.nikx .nikx-proof-quote blockquote { margin: 0; }
.nikx .nikx-proof-quote p { font-size: 19px; line-height: 1.6; font-weight: 700; color: var(--nikx-white); }
.nikx .nikx-proof-quote footer { margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--nikx-muted-dk); }
.nikx .nikx-proof-more { margin-top: 26px; text-align: center; font-size: 15px; color: var(--nikx-muted-dk); }
@media (max-width: 1000px) { .nikx-proof-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .nikx-proof-stats { grid-template-columns: 1fr; }
  .nikx-study-body { padding: 22px 20px 6px; }
  .nikx-study-result-num { font-size: 21px; }
  .nikx .nikx-proof-quote { grid-template-columns: 1fr; padding: 24px 22px; gap: 12px; }
  .nikx .nikx-proof-quote p { font-size: 16.5px; }
}

/* ---- GLOBAL SPLIT: photo + short answer + destination links ---- */
.nikx-globe--meridian { background: var(--nikx-surface); }
.nikx-globe--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-globe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.nikx .nikx-globe-media { position: relative; border-radius: var(--nikx-r-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--nikx-shadow-md); }
.nikx .nikx-globe-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.nikx-globe-badges { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nikx-globe-badge { padding: 14px 16px; border-radius: var(--nikx-r-md); background: rgba(255,255,255,.94); }
.nikx-globe-badge b { display: block; font-family: var(--nikx-font-display); font-weight: 800; font-size: 26px; line-height: 1; color: var(--nikx-navy); }
.nikx-globe-badge span { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 700; color: var(--nikx-muted); }
.nikx .nikx-globe-copy h2 { font-size: 30px; margin-top: 12px; }
.nikx .nikx-globe-copy p { margin-top: 14px; font-size: 16px; line-height: 1.7; color: var(--nikx-muted); }
.nikx-globe-links { display: grid; gap: 12px; margin-top: 24px; }
.nikx-globe-link {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--nikx-r-md);
  background: var(--nikx-white); border: 1.5px solid var(--nikx-border); font-weight: 700; color: var(--nikx-navy); font-size: 15px;
  transition: border-color .2s ease, transform .2s ease;
}
.nikx-globe-link:hover { border-color: var(--nikx-blue); transform: translateX(3px); }
.nikx-globe-link .nikx-icon { color: var(--nikx-blue-dk); }
.nikx-globe-link .go { margin-left: auto; color: var(--nikx-blue-dk); }
@media (max-width: 900px) { .nikx-globe-grid { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 600px) { .nikx .nikx-globe-copy h2 { font-size: 25px; } .nikx-globe-badge b { font-size: 21px; } }

/* ---- Directory additions: 4-up grid with a wide featured first card,
   h3 titles ---- */
.nikx-directory-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.nikx-directory-grid.cols-4 .is-featured { grid-column: span 2; }
.nikx .nikx-directory-card h3 { font-size: 16px; line-height: 1.35; margin-bottom: 8px; }
.nikx-directory--foundry .nikx-directory-card h3 { color: var(--nikx-white); }
.nikx-directory--foundry .nikx-directory-card.is-featured { background: var(--nikx-gold); border-color: var(--nikx-gold); }
.nikx-directory--foundry .nikx-directory-card.is-featured h3 { color: var(--nikx-navy); font-size: 20px; }
.nikx-directory--foundry .nikx-directory-card.is-featured p { color: var(--nikx-navy); font-size: 14.5px; }
.nikx-directory--foundry .nikx-directory-card.is-featured .nikx-directory-icon { background: var(--nikx-navy); color: var(--nikx-gold); }
.nikx-directory--foundry .nikx-directory-card.is-featured .nikx-directory-link { color: var(--nikx-navy); }
.nikx-directory--foundry .nikx-directory-card.is-featured:hover { background: #ffb31a; border-color: #ffb31a; }
@media (max-width: 1024px) { .nikx-directory-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .nikx-directory-grid.cols-4 { grid-template-columns: 1fr; }
  .nikx-directory-grid.cols-4 .is-featured { grid-column: auto; }
}

/* ---- FAQ additions: each question wrapped in an <h3> (real heading
   for the outline), "jump to" links inside answers, taller open state
   for longer answers ---- */
.nikx .nikx-faq-h { margin: 0; font-size: inherit; line-height: inherit; }
.nikx-faq-item.is-open .nikx-faq-a { max-height: 420px; }
.nikx .nikx-faq-a .nikx-faq-jump { padding-top: 0; margin-top: -8px; }
.nikx-faq-jump a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--nikx-blue-dk); }
.nikx-faq-jump a:hover { text-decoration: underline; }
.nikx-faq-jump .nikx-icon { width: 14px; height: 14px; }

/* ---- Final CTA additions: RFP text link and contact email ---- */
.nikx .nikx-cta-more { margin-top: 22px; font-size: 14.5px; color: var(--nikx-muted-dk); display: flex; justify-content: center; gap: 10px 26px; flex-wrap: wrap; }
.nikx-cta-more a { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--nikx-white); }
.nikx-cta-more a:hover { color: var(--nikx-gold); }
.nikx-cta-more .nikx-icon { width: 16px; height: 16px; color: var(--nikx-gold); }

/* ============================================================
   BATCH 5 (2026-10-18): compliance-training-elearning-solutions.
   New modifiers on BATCH 4 components plus three small new pieces
   (rules note, build topics, habits). Existing rules untouched.
   ============================================================ */

/* ---- Hero: small RFP text link under the CTA buttons ---- */
.nikx .nikx-hero-rfp { margin-top: 16px; font-size: 14px; }
.nikx-hero-rfp a { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: rgba(255,255,255,.86); }
.nikx-hero-rfp a:hover { color: var(--nikx-gold); }
.nikx-hero-rfp .nikx-icon { width: 15px; height: 15px; color: var(--nikx-gold); }

/* ---- Options: 3-card grid, and the section on navy ---- */
.nikx-options-grid.cols-3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, auto); row-gap: 0; }
.nikx-options--foundry { background: var(--nikx-navy); }
.nikx-options--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-options--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-options--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-options--foundry .nikx-option.is-featured { border-color: var(--nikx-gold); box-shadow: 0 0 0 2px var(--nikx-gold), var(--nikx-shadow-lg); }
.nikx-options--foundry .nikx-option.is-featured .nikx-option-head { background: var(--nikx-blue-dk); border-bottom-color: var(--nikx-blue-dk); }
@media (max-width: 900px) {
  .nikx-options-grid.cols-3 { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 18px; }
  .nikx-options-grid.cols-3 .nikx-option { grid-row: auto; grid-template-rows: none; display: block; }
}

/* ---- Rules table: note card above, follow-on paragraph below.
   The table itself is .nikx-cost-table. ---- */
.nikx-rules-note {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  margin-bottom: 18px; padding: 16px 20px; border-radius: var(--nikx-r-md);
  background: var(--nikx-gold-lt); border: 1.5px solid rgba(240,165,0,.4);
}
.nikx-rules-note-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--nikx-white); color: var(--nikx-gold-dk); }
.nikx-rules-note-icon .nikx-icon { width: 18px; height: 18px; }
.nikx .nikx-rules-note p { font-size: 14.5px; line-height: 1.6; color: var(--nikx-text); }
.nikx .nikx-rules-table { min-width: 860px; }
.nikx .nikx-rules-table tbody th { width: 24%; }
.nikx-rules-region { display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: var(--nikx-r-pill); background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); font-size: 10.5px; letter-spacing: .6px; vertical-align: 1px; }
.nikx .nikx-rules-foot { margin-top: 24px; max-width: 900px; font-size: 15px; line-height: 1.75; color: var(--nikx-muted); }

/* ---- BUILD: topic tiles, format table and tool chips on navy ---- */
.nikx-build--foundry { background: var(--nikx-navy); }
.nikx-build--foundry .nikx-eyebrow { color: var(--nikx-gold); }
.nikx-build--foundry .nikx-section-head h2 { color: var(--nikx-white); }
.nikx-build--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx .nikx-build-topics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.nikx .nikx-build-topics li {
  display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; border-radius: var(--nikx-r-md);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
}
.nikx-build-topic-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(240,165,0,.14); color: var(--nikx-gold); }
.nikx-build-topic-icon .nikx-icon { width: 21px; height: 21px; }
.nikx .nikx-build-topics p { font-size: 14px; line-height: 1.6; color: var(--nikx-muted-dk); }
.nikx .nikx-build-topics strong { color: var(--nikx-white); }
.nikx-build-formats { margin-top: 44px; scroll-margin-top: 96px; }
.nikx-build--foundry .nikx-cost-wrap { border-color: var(--nikx-navy-lt); }
.nikx .nikx-build-lead { margin-bottom: 18px; font-family: var(--nikx-font-display); font-weight: 700; font-size: 19px; line-height: 1.4; color: var(--nikx-white); }
.nikx-build-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; align-items: center; margin-top: 28px; padding: 24px 26px; border-radius: var(--nikx-r-lg); border: 1px solid rgba(255,255,255,.14); }
.nikx .nikx-build-tools p { font-size: 15px; line-height: 1.7; color: var(--nikx-muted-dk); }
@media (max-width: 1100px) { .nikx .nikx-build-topics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .nikx-build-tools { grid-template-columns: 1fr; gap: 18px; } }
@media (max-width: 700px) { .nikx .nikx-build-topics { grid-template-columns: 1fr; } .nikx .nikx-build-topics li { flex-direction: row; align-items: flex-start; } .nikx-build-topic-icon { flex-shrink: 0; } }

/* ---- HABITS: five numbered design habits as a card row ---- */
.nikx .nikx-habits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 32px; }
.nikx .nikx-habit { position: relative; padding: 22px 20px 22px; border-radius: var(--nikx-r-md); background: var(--nikx-surface); border-top: 3px solid var(--nikx-blue); }
.nikx-habit-num { display: block; font-family: var(--nikx-font-display); font-weight: 800; font-size: 26px; line-height: 1; color: var(--nikx-blue); }
.nikx .nikx-habit h3 { margin-top: 14px; font-size: 16px; line-height: 1.35; }
.nikx .nikx-habit p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--nikx-muted); }
.nikx .nikx-evidence-wrap .nikx-cost-table tbody th { width: 28%; }
@media (max-width: 1100px) { .nikx .nikx-habits { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .nikx .nikx-habits { grid-template-columns: 1fr; } }

/* ---- Cost drivers: 2-column numbered list beside the CTA card ---- */
.nikx-cost-next.nikx-cost-next--drivers { grid-template-columns: 1.7fr 1fr; margin-top: 0; }
.nikx .nikx-steps-list--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-top: 0; }
.nikx .nikx-steps-list--cols li + li { margin-top: 0; }
.nikx .nikx-steps-list--cols strong { color: var(--nikx-navy); }
@media (max-width: 900px) { .nikx-cost-next.nikx-cost-next--drivers { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .nikx .nikx-steps-list--cols { grid-template-columns: 1fr; } }

/* ---- Proof on a light background, plus a case-study link line ---- */
.nikx-proof--meridian { background: var(--nikx-surface); }
.nikx-proof--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-proof--meridian .nikx-study { box-shadow: var(--nikx-shadow-md); border: 1.5px solid var(--nikx-border); }
.nikx-proof--meridian .nikx-proof-quote { background: var(--nikx-navy); border-color: var(--nikx-navy); }
.nikx .nikx-study-more { margin-top: 16px; font-size: 14.5px; }

/* ============================================================
   BATCH 6 (2026-10-19): microlearning-development-services.
   Modifiers only, on BATCH 4 and 5 components. Existing rules untouched.
   ============================================================ */

/* ---- Cost table: highlight the middle column instead of the last
   (the column a comparison table is about) ---- */
.nikx-cost-table--mid thead th:last-child { color: rgba(255,255,255,.8); }
.nikx-cost-table--mid thead th:nth-child(2) { color: var(--nikx-gold); }
.nikx-cost-table--mid tbody td:last-child { color: var(--nikx-muted); font-weight: 400; background: none; }
.nikx-cost-table--mid tbody td:nth-child(2) { color: var(--nikx-navy); font-weight: 700; background: rgba(240,165,0,.06); }

/* ---- Build section: bold lead-ins in the tools box, and a CTA
   variant of that box (text left, button right) ---- */
.nikx .nikx-build-tools strong { color: var(--nikx-white); }
.nikx-build-tools.nikx-build-tools--cta { grid-template-columns: minmax(0, 1fr) auto; }
.nikx .nikx-build-tools--cta p { font-family: var(--nikx-font-display); font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--nikx-white); }
@media (max-width: 700px) { .nikx-build-tools.nikx-build-tools--cta { grid-template-columns: 1fr; justify-items: start; } }

/* ---- 4-column card rows for 7 items (habits, build topics): the
   7th card spans two columns so every row closes ---- */
.nikx .nikx-habits.cols-4, .nikx .nikx-build-topics.cols-4 { grid-template-columns: repeat(4, 1fr); }
.nikx .nikx-habits.cols-4 > li:last-child:nth-child(4n+3),
.nikx .nikx-build-topics.cols-4 > li:last-child:nth-child(4n+3) { grid-column: span 2; }
@media (max-width: 1100px) {
  .nikx .nikx-habits.cols-4, .nikx .nikx-build-topics.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .nikx .nikx-habits.cols-4, .nikx .nikx-build-topics.cols-4 { grid-template-columns: 1fr; }
  .nikx .nikx-habits.cols-4 > li:last-child:nth-child(4n+3),
  .nikx .nikx-build-topics.cols-4 > li:last-child:nth-child(4n+3) { grid-column: auto; }
}

/* ---- Checklist on the light background ---- */
.nikx-checklist--meridian { background: var(--nikx-surface); }
.nikx-checklist--meridian .nikx-eyebrow { color: var(--nikx-blue-dk); }
.nikx-checklist--meridian .nikx-checklist-col { background: var(--nikx-white); border: 1.5px solid var(--nikx-border); }
.nikx-checklist--meridian .nikx-checklist-col.ours { background: var(--nikx-gold-lt); border-color: rgba(240,165,0,.45); }
.nikx.nikx-checklist--meridian .nikx-checklist-col h3 { color: var(--nikx-navy); }
.nikx.nikx-checklist--meridian .nikx-checklist-col li { color: var(--nikx-text); }
.nikx-checklist--meridian .nikx-checklist-col:not(.ours) .nikx-checklist-who { background: var(--nikx-surface2); color: var(--nikx-muted); }
.nikx-checklist--meridian .nikx-checklist-col:not(.ours) .nikx-check-box { border-color: var(--nikx-teal); }
.nikx-checklist--meridian .nikx-checklist-col:not(.ours) .nikx-check-box .nikx-icon { color: var(--nikx-teal-dk); }

/* ---- Directory: 2-up grid ---- */
.nikx-directory-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .nikx-directory-grid.cols-2 { grid-template-columns: 1fr; } }

/* ============================================================
   BATCH 7 (2026-10-19): employee-onboarding-elearning.
   Modifiers only, new classes on existing components. Existing rules
   untouched.
   ============================================================ */

/* ---- Hero: small onboarding-journey row under the CTAs ---- */
.nikx .nikx-hero-journey-lbl { margin-top: 30px; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.nikx .nikx-hero-journey { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 460px; margin-top: 14px; }
.nikx .nikx-hero-journey::before { content: ''; position: absolute; top: 17px; left: 16.67%; right: 16.67%; height: 2px; background: linear-gradient(90deg, var(--nikx-gold), rgba(255,255,255,.28)); }
.nikx .nikx-hero-journey li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--nikx-white); }
.nikx-hero-journey-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--nikx-navy); border: 1.6px solid var(--nikx-gold); color: var(--nikx-gold); }
.nikx-hero-journey-icon .nikx-icon { width: 16px; height: 16px; }

/* ---- Process: vertical timeline (7 steps), each step a card with the
   owner tag beside the title ---- */
.nikx .nikx-process-track--vertical { grid-template-columns: 1fr; gap: 0; max-width: 900px; margin: 0 auto; }
.nikx .nikx-process-track--vertical::before { display: none; }
.nikx .nikx-process-track--vertical .nikx-process-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 22px; padding-bottom: 16px; }
.nikx .nikx-process-track--vertical .nikx-process-step:last-child { padding-bottom: 0; }
.nikx .nikx-process-track--vertical .nikx-process-step:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: rgba(255,255,255,.2); }
.nikx .nikx-process-track--vertical .nikx-step-num { margin-bottom: 0; }
.nikx-step-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 18px 22px; border-radius: var(--nikx-r-md); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.nikx .nikx-step-body h3 { margin: 0; font-size: 17px; }
.nikx .nikx-step-body p { grid-column: 1 / -1; margin: 0; font-size: 14.5px; line-height: 1.65; }
.nikx .nikx-step-body .nikx-step-owner { margin-top: 0; }
.nikx .nikx-process-note { margin-top: 14px; text-align: center; font-size: 14px; color: var(--nikx-muted-dk); }
@media (max-width: 600px) {
  .nikx .nikx-process-track--vertical .nikx-process-step { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
  .nikx .nikx-process-track--vertical .nikx-step-num { width: 36px; height: 36px; font-size: 14px; }
  .nikx .nikx-process-track--vertical .nikx-process-step:not(:last-child)::after { left: 17px; top: 36px; }
  .nikx-step-body { grid-template-columns: 1fr; padding: 16px; }
  .nikx .nikx-step-body .nikx-step-owner { justify-self: start; }
}

/* ---- Intro section: photo and a numbered 2x2 list in the second column ---- */
.nikx .nikx-intro-figure { margin: 0; border-radius: var(--nikx-r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--nikx-surface); }
.nikx .nikx-intro-figure img { width: 100%; height: 100%; object-fit: cover; }
.nikx .nikx-intro-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.nikx .nikx-intro-parts li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--nikx-r-md); background: var(--nikx-surface); border: 1.5px solid var(--nikx-border); font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--nikx-navy); }
.nikx-intro-parts .num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--nikx-blue); color: var(--nikx-white); font-family: var(--nikx-font-display); font-weight: 800; font-size: 12.5px; }

/* ---- Mid CTA with a two-sentence supporting line: keep the button
   beside the text on wide screens ---- */
.nikx-midcta--long .nikx-midcta-text { flex: 1 1 520px; max-width: 820px; }
.nikx.nikx-midcta--long .nikx-midcta-text p { font-size: 15px; line-height: 1.6; }
@media (max-width: 600px) { .nikx-midcta--long .nikx-midcta-text { flex-basis: auto; } }

/* ---- Cost card: a small plain-text note under the button ---- */
.nikx .nikx-cost-card.rfp .nikx-cost-card-note { font-family: var(--nikx-font-body); font-weight: 400; font-size: 14px; line-height: 1.6; color: var(--nikx-muted-dk); }

/* ---- Proof: one case study beside the quote ---- */
.nikx-proof-grid.nikx-proof-grid--single { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
.nikx .nikx-proof-grid--single .nikx-proof-quote { margin: 0; grid-template-columns: 1fr; gap: 16px; padding: 34px 32px; }
@media (max-width: 1000px) { .nikx-proof-grid.nikx-proof-grid--single { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .nikx .nikx-proof-grid--single .nikx-proof-quote { padding: 24px 22px; gap: 12px; } }

/* ============================================================
   BATCH 8 (2026-10-19): manufacturing-training-elearning-solutions.
   Modifiers only, new classes on existing components. Existing rules
   untouched.
   ============================================================ */

/* ---- Build section on navy: a subhead, follow-on paragraphs and a
   3-tile row below the table ---- */
.nikx.nikx-build--foundry .nikx-rules-foot { color: var(--nikx-muted-dk); }
.nikx.nikx-build--foundry .nikx-subhead h3 { color: var(--nikx-white); }
.nikx .nikx-build-section .nikx-subhead { scroll-margin-top: 96px; }
.nikx .nikx-subhead + .nikx-rules-foot { margin-top: 14px; }
.nikx .nikx-build-topics.cols-3 { grid-template-columns: repeat(3, 1fr); margin-top: 24px; }
.nikx .nikx-rules-foot + .nikx-rules-note { margin: 22px 0 0; }

/* ---- Hero: plain lead-in text before the RFP link ---- */
.nikx-hero--signature .nikx-hero-rfp { color: rgba(255,255,255,.7); }
@media (max-width: 700px) { .nikx .nikx-build-topics.cols-3 { grid-template-columns: 1fr; } }

/* ---- Intro section: pillars without titles, under a small label ---- */
.nikx .nikx-pillar-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.nikx-intro--foundry .nikx-pillar-lbl { color: var(--nikx-gold); }
.nikx-pillar-list--plain .nikx-pillar { align-items: center; padding: 16px 18px; border-radius: var(--nikx-r-md); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.nikx .nikx-pillar-list--plain .nikx-pillar p { font-size: 15px; line-height: 1.6; }
.nikx-pillar-list--plain .nikx-pillar-icon { flex-shrink: 0; }
.nikx-pillar-list.nikx-pillar-list--plain { gap: 12px; }

/* ---- Cost card: a short checklist above the button ---- */
.nikx .nikx-cost-card-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.9); }
.nikx .nikx-cost-card-list li + li { margin-top: 9px; }
.nikx-cost-card-list .nikx-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--nikx-gold); }

/* ============================================================
   BATCH 9 (2026-10-20): gamification-in-corporate-training.
   Modifiers only, new classes on existing components. Existing rules
   untouched.
   ============================================================ */

/* ---- Answer section: a takeaways panel and CTA card under the card ---- */
.nikx-answer-card + .nikx-cost-next.nikx-cost-next--drivers { margin-top: 24px; }
.nikx .nikx-panel h3 + .nikx-steps-list--cols { margin-top: 20px; }

/* ---- Habits: 3-up rows, cards without a number, after a paragraph ---- */
.nikx .nikx-habits.cols-3 { grid-template-columns: repeat(3, 1fr); }
.nikx .nikx-habit > h3:first-child { margin-top: 0; }
.nikx .nikx-rules-foot + .nikx-habits { margin-top: 24px; }
.nikx .nikx-subhead.nikx-subhead--first { margin-top: 0; }
@media (max-width: 900px) { .nikx .nikx-habits.cols-3 { grid-template-columns: 1fr; } }

/* ---- Rules note directly under a table, or closing a habits row ---- */
.nikx .nikx-build-formats + .nikx-rules-note { margin: 24px 0 0; }
.nikx .nikx-habits + .nikx-rules-note { margin-bottom: 0; }

/* ---- Intro section: chip rows under small labels ---- */
.nikx .nikx-intro-chips { margin-top: 26px; }
.nikx .nikx-intro-chips .nikx-pillar-lbl { display: block; margin: 20px 0 10px; }
.nikx .nikx-intro-chips .nikx-pillar-lbl:first-child { margin-top: 0; }

/* ---- Mid CTA: inline text link on the blue strip ---- */
.nikx .nikx-midcta-link { color: var(--nikx-white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.nikx .nikx-midcta-link:hover { color: var(--nikx-gold); }

/* ============================================================
   BATCH 10 (2026-10-20): elearning-simulation-based-training-services.
   Modifiers only, new classes on existing components. Existing rules
   untouched.
   ============================================================ */

/* ---- Process: 5 steps with owner tags, and owner tags on white ---- */
.nikx-process-track.steps-5 .nikx-process-step { display: flex; flex-direction: column; align-items: flex-start; }
.nikx .nikx-process-track.steps-5 .nikx-process-step p { margin-bottom: 14px; }
.nikx-process--meridian .nikx-step-owner { background: var(--nikx-blue-lt); color: var(--nikx-navy); border: 1px solid var(--nikx-blue-mid); }
.nikx-process--meridian .nikx-step-owner .nikx-icon { color: var(--nikx-blue-dk); }

/* ---- Build section: small RFP line under the CTA box ---- */
.nikx .nikx-build-tools + .nikx-cost-rfp { margin-top: 18px; font-size: 14.5px; }

/* ============================================================
   BATCH 11 (2026-10-20): scorm-compliant-elearning-development-why-it-matters-for-lms-integration.
   Modifiers only, new classes on existing components. Existing rules
   untouched.
   ============================================================ */

/* ---- Spacing: a block that follows a table, card row or timeline ---- */
.nikx .nikx-after { margin-top: 28px; margin-bottom: 0; }

/* ---- Steps list as an "On this page" jump-link list ---- */
.nikx .nikx-steps-list--toc { gap: 12px 28px; }
.nikx .nikx-steps-list--toc li { padding-top: 5px; font-size: 14.5px; line-height: 1.4; }
.nikx .nikx-steps-list--toc a { font-weight: 700; color: var(--nikx-navy); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; }
.nikx .nikx-steps-list--toc a:hover { color: var(--nikx-blue-dk); text-decoration-color: currentColor; }

/* ---- Intro section: white bold lead-ins in text-only pillars on navy;
   small label on white; a numbered list of full sentences ---- */
.nikx-intro--foundry .nikx-pillar p strong { color: var(--nikx-white); }
.nikx-intro--meridian .nikx-pillar-lbl { color: var(--nikx-blue-dk); }
.nikx .nikx-intro-parts--long { grid-template-columns: 1fr; margin-top: 18px; }
.nikx .nikx-intro-parts--long li { align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.nikx .nikx-intro-parts--long .num { margin-top: -2px; }

/* ---- Cost table: equal weight on every column (no highlighted last
   column), for tables that compare versions side by side ---- */
.nikx .nikx-cost-table--even tbody td { color: var(--nikx-text); }
.nikx .nikx-cost-table--even tbody td:last-child { color: var(--nikx-text); font-weight: 400; background: none; }
.nikx .nikx-cost-table--even thead th:last-child { color: rgba(255,255,255,.8); }

/* ---- Cost table: first column stays in view while the table scrolls
   sideways on narrow screens ---- */
.nikx .nikx-cost-table--sticky tbody th { position: sticky; left: 0; z-index: 1; background: var(--nikx-white); box-shadow: inset -1px 0 0 var(--nikx-border); }
.nikx .nikx-cost-table--sticky tbody tr:hover > th { background: #fafcff; }
.nikx .nikx-cost-table--sticky thead th:first-child { position: sticky; left: 0; z-index: 2; }

/* ---- Cost table: numbered checklist questions in a wide first column ---- */
.nikx .nikx-cost-table--check tbody th { position: relative; width: 58%; padding-left: 60px; }
.nikx .nikx-cost-table--check .nikx-cost-num { position: absolute; left: 22px; top: 14px; }

/* ---- Cost table: one card per row on phones (cells carry data-label) ---- */
@media (max-width: 700px) {
  .nikx .nikx-cost-table--stack { min-width: 0; }
  .nikx .nikx-cost-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nikx .nikx-cost-table--stack tbody, .nikx .nikx-cost-table--stack tr { display: block; }
  .nikx .nikx-cost-table--stack tbody th, .nikx .nikx-cost-table--stack tbody td { display: block; width: auto; padding: 0 18px 12px; border-top: 0; }
  .nikx .nikx-cost-table--stack tbody th { padding-top: 16px; padding-bottom: 10px; font-size: 15px; }
  .nikx .nikx-cost-table--stack tbody tr + tr > th { border-top: 1px solid var(--nikx-border); }
  .nikx .nikx-cost-table--stack tbody td:last-child { padding-top: 10px; padding-bottom: 14px; }
  .nikx-cost-table--stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--nikx-muted); }
  .nikx .nikx-cost-table--check tbody th { padding-left: 54px; }
  .nikx .nikx-cost-table--check .nikx-cost-num { left: 18px; }
}

/* ---- Build section: two wide tiles, icon beside the text ---- */
.nikx .nikx-build-topics.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
.nikx .nikx-build-topics.cols-2 li { flex-direction: row; align-items: flex-start; }
.nikx-build-topics.cols-2 .nikx-build-topic-icon { flex-shrink: 0; }
@media (max-width: 700px) { .nikx .nikx-build-topics.cols-2 { grid-template-columns: 1fr; } }

/* ---- Options: two cards side by side ---- */
.nikx-options-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); row-gap: 0; column-gap: 24px; }
@media (max-width: 640px) { .nikx-options-grid.cols-2 { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 18px; } }

/* ---- Milestones as a row on desktop (a vertical list below 900px), a
   name line under the date, key entries ringed in gold on navy ---- */
.nikx .nikx-milestone-track--row { max-width: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 8px; }
.nikx-milestone-track--row .nikx-milestone { grid-template-columns: 1fr; align-content: start; gap: 14px; }
.nikx-milestone-track--row .nikx-milestone-rail { flex-direction: row; }
.nikx-milestone-track--row .nikx-milestone-line { width: auto; height: 2px; margin: 0 0 0 4px; }
.nikx-milestone-track--row .nikx-milestone-content { padding: 0 16px 0 0; }
.nikx .nikx-milestone-name { margin-top: 6px; font-family: var(--nikx-font-display); font-weight: 700; font-size: 16px; line-height: 1.3; }
.nikx .nikx-milestone-name + p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; }
.nikx-milestones--foundry .nikx-milestone-content .nikx-milestone-name { color: var(--nikx-white); }
.nikx-milestones--foundry .nikx-milestone-track--row .nikx-milestone-dot { background: rgba(255,255,255,.55); }
.nikx-milestones--foundry .nikx-milestone-track--row .is-key .nikx-milestone-dot { background: var(--nikx-gold); box-shadow: 0 0 0 5px rgba(240,165,0,.25); }
@media (max-width: 900px) {
  .nikx .nikx-milestone-track--row { grid-template-columns: 1fr; max-width: 560px; }
  .nikx-milestone-track--row .nikx-milestone { grid-template-columns: 28px 1fr; gap: 16px; }
  .nikx-milestone-track--row .nikx-milestone-rail { flex-direction: column; }
  .nikx-milestone-track--row .nikx-milestone-line { width: 2px; height: auto; margin: 4px 0 0; }
  .nikx-milestone-track--row .nikx-milestone-content { padding: 0 0 22px; }
}

/* ============================================================
   BATCH 12 (2026-10-20): lms-implementation-services.
   Modifiers only, new classes on existing components. Existing rules
   untouched.
   ============================================================ */

/* ---- Checklist on navy as one printable-looking sheet: numbered items
   with empty tick boxes, two columns on desktop ---- */
.nikx .nikx-checklist-col--sheet { padding: 32px 34px; }
.nikx .nikx-checklist-col--sheet ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 44px; }
.nikx .nikx-checklist-col--sheet li { display: grid; grid-template-columns: 22px 24px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; border-bottom: 1px dashed rgba(255,255,255,.14); }
.nikx .nikx-checklist-col--sheet li + li { margin-top: 0; }
.nikx .nikx-checklist-col--sheet li:nth-last-child(-n+2):nth-child(odd),
.nikx .nikx-checklist-col--sheet li:last-child { padding-bottom: 0; border-bottom: 0; }
.nikx-checklist-col--sheet .nikx-check-box { border-color: rgba(255,255,255,.5); }
.nikx-checklist--foundry .nikx-section-head p { color: var(--nikx-muted-dk); }
.nikx-check-n { font-family: var(--nikx-font-display); font-weight: 800; font-size: 15px; line-height: 22px; color: var(--nikx-gold); text-align: right; }
@media (max-width: 760px) {
  .nikx .nikx-checklist-col--sheet ol { grid-template-columns: 1fr; }
  .nikx .nikx-checklist-col--sheet { padding: 24px 20px; }
  .nikx .nikx-checklist-col--sheet li:nth-last-child(-n+2):nth-child(odd):not(:last-child) { padding-bottom: 16px; border-bottom: 1px dashed rgba(255,255,255,.14); }
}

/* ---- Small fills: the challenges card row closing a section, a lead-in
   note above the process button, and stacked paragraphs in the build
   tools box ---- */
.nikx .nikx-habits--last { margin-bottom: 0; }
.nikx .nikx-process-note--lead { margin-top: 36px; font-size: 15.5px; color: var(--nikx-white); }
.nikx .nikx-process-note--lead + .nikx-process-foot { margin-top: 20px; }
.nikx .nikx-build-tools > div > p + p { margin-top: 10px; }


/* ============================================================
   BATCH 13 (2026-10-20): retail-training-elearning-solutions.
   Modifiers only, new classes on existing components. Existing rules
   untouched.
   ============================================================ */

/* ---- Cost table: an icon beside each row heading, for a wide
   two-column "situation / answer" table ---- */
.nikx .nikx-cost-table--icons tbody th { position: relative; width: 56%; padding-left: 72px; font-weight: 400; color: var(--nikx-text); }
.nikx .nikx-cost-table--icons tbody th strong { color: var(--nikx-navy); }
.nikx-row-icon { position: absolute; left: 22px; top: 14px; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); }
.nikx-row-icon .nikx-icon { width: 17px; height: 17px; }
@media (max-width: 700px) {
  .nikx .nikx-cost-table--icons tbody th { width: auto; padding-left: 64px; }
  .nikx .nikx-cost-table--icons .nikx-row-icon { left: 18px; top: 16px; }
}

/* ---- Process: the vertical timeline on the white (Meridian) background ---- */
.nikx.nikx-process--meridian .nikx-process-track--vertical .nikx-process-step:not(:last-child)::after { background: var(--nikx-border); }
.nikx-process--meridian .nikx-step-body { background: var(--nikx-surface); border-color: var(--nikx-border); }


/* ============================================================
   BATCH 14 (2026-10-20): instructional-design-services.
   Modifiers only, new classes on existing components. Existing rules
   untouched.
   ============================================================ */

/* ---- Checklist: three columns, or two with no arrow between them ---- */
.nikx-checklist-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nikx-checklist-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nikx .nikx-checklist-grid.cols-3 .nikx-checklist-col h3 { flex-wrap: wrap; gap: 8px 12px; }
@media (max-width: 900px) { .nikx-checklist-grid.cols-3, .nikx-checklist-grid.cols-2 { grid-template-columns: 1fr; } }

/* ---- Callouts: a weak / strong example pair inside a tinted panel ---- */
.nikx-callout.nikx-callout--weak, .nikx-callout.nikx-callout--strong { align-items: center; background: var(--nikx-white); }
.nikx-callout.nikx-callout--strong { border-color: var(--nikx-teal); }
.nikx-callout--weak .nikx-callout-icon { background: var(--nikx-gold-lt); color: var(--nikx-gold-dk); }
.nikx .nikx-callout--weak p, .nikx .nikx-callout--strong p { font-size: 15.5px; line-height: 1.6; color: var(--nikx-text); }

/* ---- Directory: 5 cards in a row; a sideways-scrolling row below 1100px ---- */
.nikx-directory-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) {
  .nikx-directory-grid.cols-5 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; }
  .nikx-directory-grid.cols-5 > * { scroll-snap-align: start; }
}
@media (max-width: 600px) { .nikx-directory-grid.cols-5 { grid-auto-columns: 78%; } }

/* ---- Spec table: a plain-text cell beside the chip rows ---- */
.nikx .nikx-spec td.nikx-spec-text { font-size: 14.5px; line-height: 1.6; color: var(--nikx-text); }


/* ============================================================
   BATCH 15 (2026-10-20): healthcare-training-elearning-solutions.
   Modifiers only, new classes on existing components. Existing rules
   untouched.
   ============================================================ */

/* ---- Build topic tiles with an h3 title above the text ---- */
.nikx .nikx-build-topics--titled li { padding: 24px 24px; gap: 18px; }
.nikx .nikx-build-topics--titled h3 { margin-bottom: 8px; font-size: 18px; line-height: 1.3; }
.nikx.nikx-build--foundry .nikx-build-topics--titled h3 { color: var(--nikx-white); }
.nikx .nikx-build-topics--titled p { font-size: 14.5px; line-height: 1.7; }
@media (max-width: 700px) {
  .nikx .nikx-build-topics.cols-2.nikx-build-topics--titled li { flex-direction: column; gap: 14px; padding: 22px 20px; }
}


/* ============================================================
   BATCH 16 (2026-10-20): it-software-training-elearning-solutions.
   Modifiers only, new classes on existing components. Existing rules
   untouched.
   ============================================================ */

/* ---- Why-Us: a tick list under the card text, and a 2 x 2 grid ---- */
.nikx .nikx-why-list { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--nikx-border); }
.nikx .nikx-why-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--nikx-text); }
.nikx .nikx-why-list li + li { margin-top: 9px; }
.nikx-why-list .nikx-icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--nikx-teal-dk); }
.nikx.nikx-why--foundry .nikx-why-list { border-top-color: rgba(255,255,255,.14); }
.nikx.nikx-why--foundry .nikx-why-list li { color: rgba(255,255,255,.9); }
.nikx-why--foundry .nikx-why-list .nikx-icon { color: var(--nikx-gold); }
.nikx-why-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .nikx-why-grid.cols-2 { grid-template-columns: 1fr; } }


/* ============================================================
   BATCH 17 (2026-10-20): elearning-content-development-guide.
   One new component (bar chart) plus modifiers on existing ones.
   Existing rules untouched.
   ============================================================ */

/* ---- Process step cards: an "Output" line and a tick list under the
   step text, both full width ---- */
.nikx .nikx-step-body .nikx-step-out { padding-top: 10px; border-top: 1px dashed var(--nikx-border); font-size: 14px; color: var(--nikx-text); }
.nikx .nikx-step-body > .nikx-why-list { grid-column: 1 / -1; margin: 2px 0 4px; padding: 0; border: 0; }

/* ---- A second intro paragraph straight under the section head ---- */
.nikx .nikx-section-head + .nikx-rules-foot.nikx-rules-foot--lead { margin-top: -18px; }

/* ---- Habits: 2-up cards with a large figure as the number ---- */
.nikx .nikx-habits.cols-2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }
.nikx .nikx-habits.cols-2 .nikx-habit-num { font-size: 34px; }
.nikx .nikx-habits.cols-2 .nikx-habit { padding: 26px 26px 24px; background: var(--nikx-white); border: 1.5px solid var(--nikx-border); border-top: 3px solid var(--nikx-blue); }
.nikx .nikx-section-head + .nikx-habits.cols-2 + .nikx-rules-foot { margin-top: 28px; }
@media (max-width: 700px) { .nikx .nikx-habits.cols-2 { grid-template-columns: 1fr; } .nikx .nikx-habits.cols-2 .nikx-habit-num { font-size: 28px; } }

/* ---- Cost card as a one-line CTA box: text left, button right ---- */
.nikx-cost-card.rfp.nikx-cost-card--row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.nikx .nikx-cost-card.rfp.nikx-cost-card--row .nikx-btn { align-self: center; }

/* ---- BAR CHART (new component): one row per value, label, a native
   <progress> bar (no inline widths) and the value as text. Navy only
   (used inside .nikx-build--foundry). ---- */
.nikx .nikx-bars { margin: 8px 0 0; padding: 28px 30px 24px; border-radius: var(--nikx-r-lg); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.nikx .nikx-bars li { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) 96px; gap: 18px; align-items: center; }
.nikx .nikx-bars li + li { margin-top: 18px; }
.nikx-bars-lbl { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--nikx-white); }
.nikx-bars-num { font-family: var(--nikx-font-display); font-weight: 800; font-size: 17px; color: var(--nikx-gold); white-space: nowrap; }
.nikx .nikx-bars progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 16px; border: 0; border-radius: var(--nikx-r-pill); overflow: hidden; background: rgba(255,255,255,.1); color: var(--nikx-gold); }
.nikx .nikx-bars progress::-webkit-progress-bar { background: rgba(255,255,255,.1); border-radius: var(--nikx-r-pill); }
.nikx .nikx-bars progress::-webkit-progress-value { background: linear-gradient(90deg, var(--nikx-gold), #ffc23d); border-radius: var(--nikx-r-pill); }
.nikx .nikx-bars progress::-moz-progress-bar { background: linear-gradient(90deg, var(--nikx-gold), #ffc23d); border-radius: var(--nikx-r-pill); }
.nikx .nikx-bars figcaption { margin-top: 20px; font-size: 13px; line-height: 1.5; color: var(--nikx-muted-dk); }
@media (max-width: 700px) {
  .nikx .nikx-bars { padding: 22px 18px 18px; }
  .nikx .nikx-bars li { grid-template-columns: minmax(0, 1fr) 84px; gap: 8px 14px; }
  .nikx-bars-lbl { grid-column: 1 / -1; }
}


/* ============================================================
   BATCH 18 (2026-10-20): mobile-learning-development-solutions.
   Modifiers only, new classes on existing components. Existing rules
   untouched.
   ============================================================ */

/* ---- Stat tile with one large figure (beside paragraphs in a build
   tools box) ---- */
.nikx .nikx-proof-stat--hero { padding: 28px 28px 26px; }
.nikx .nikx-proof-stat--hero .nikx-proof-stat-num { font-size: 64px; }
.nikx .nikx-proof-stat--hero .nikx-proof-stat-lbl { font-size: 14.5px; }

/* ---- Proof: three case-study cards without photos, a small sector
   label, and two quotes side by side ---- */
.nikx-proof-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.nikx .nikx-proof-grid.cols-3 .nikx-study h3 { font-size: 18px; }
.nikx-proof-grid.cols-3 .nikx-study-results { grid-template-columns: repeat(2, 1fr); }
.nikx-study-label { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: var(--nikx-r-pill); background: var(--nikx-blue-lt); color: var(--nikx-blue-dk); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.nikx .nikx-proof-grid--quotes .nikx-proof-quote { margin: 0; }
.nikx .nikx-proof-grid--quotes .nikx-proof-quote p { font-size: 17px; }
@media (max-width: 1000px) { .nikx-proof-grid.cols-3 { grid-template-columns: 1fr; } }

/* ---- A centered follow-on line, and its color on the navy directory ---- */
.nikx .nikx-rules-foot.nikx-rules-foot--center { margin-left: auto; margin-right: auto; text-align: center; }
.nikx.nikx-directory--foundry .nikx-rules-foot { color: var(--nikx-muted-dk); }


/* ============================================================
   BATCH 19 (2026-10-20): elearning-translation-localization-services.
   Modifiers only, new rules for markup no other page uses. Existing
   rules untouched.
   ============================================================ */

/* ---- Options note with an h3 title above its paragraph, and a note
   after a follow-on line ---- */
.nikx .nikx-options-note h3 { margin-bottom: 8px; font-size: 18px; line-height: 1.3; color: var(--nikx-navy); }
.nikx .nikx-rules-foot + .nikx-options-note { margin-top: 24px; }

/* ---- A centered line under the process button ---- */
.nikx .nikx-process-foot + .nikx-rules-foot--center { margin-top: 28px; }


/* ============================================================
   BATCH 20 (2026-10-20): elearning-consultant.
   Modifiers only, new classes. Existing rules untouched.
   ============================================================ */

/* ---- A section that is only its head (a heading and one line) ---- */
.nikx .nikx-section-head.nikx-section-head--solo { margin-bottom: 0; }

/* ---- Tick list used for warnings: gold icons ---- */
.nikx .nikx-why-list--warn .nikx-icon { color: var(--nikx-gold-dk); }


/* ============================================================
   BATCH 21 (2026-10-20): measure-elearning-roi.
   One new component (ROI calculator, driven by initRoiCalculators in
   main.js) plus modifiers. Existing rules untouched.
   ============================================================ */

/* ---- Tick list on its own in a panel (no divider above it), and a
   follow-on line on the navy why-us section ---- */
.nikx .nikx-why-list.nikx-why-list--plain { margin-top: 0; padding-top: 0; border-top: 0; }
.nikx.nikx-why--foundry .nikx-rules-foot { color: var(--nikx-muted-dk); }

/* ---- ROI CALCULATOR (new component): inputs card left, navy results
   card right. Values are recalculated client-side by main.js; the
   markup ships with filled-in results so it reads without JS. ---- */
.nikx-calc { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.nikx-calc-inputs { padding: 28px 30px; border-radius: var(--nikx-r-lg); background: var(--nikx-surface); border: 1.5px solid var(--nikx-border); }
.nikx .nikx-calc h3 { font-size: 19px; line-height: 1.3; }
.nikx .nikx-calc h3 span { font-family: var(--nikx-font-body); font-weight: 400; font-size: 13px; color: var(--nikx-muted); }
.nikx .nikx-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 4px; }
.nikx-calc-results { padding: 28px 30px; border-radius: var(--nikx-r-lg); background: var(--nikx-navy); }
.nikx .nikx-calc-results h3 { color: var(--nikx-white); }
.nikx .nikx-calc-outputs { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nikx .nikx-calc-outputs div { padding: 14px 16px; border-radius: var(--nikx-r-md); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.nikx .nikx-calc-outputs dt { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--nikx-muted-dk); }
.nikx .nikx-calc-outputs dd { margin: 6px 0 0; font-family: var(--nikx-font-display); font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--nikx-gold); }
.nikx .nikx-calc-formulas { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
.nikx .nikx-calc-formulas li { font-size: 12.5px; line-height: 1.6; color: var(--nikx-muted-dk); }
@media (max-width: 900px) { .nikx-calc { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .nikx .nikx-calc-grid { grid-template-columns: 1fr; }
  .nikx-calc-inputs, .nikx-calc-results { padding: 22px 20px; }
  .nikx .nikx-calc-outputs dd { font-size: 19px; }
}


/* ============================================================
   DESIGN REFRESH (2026-10-21): user review of the built pages.
   Restyles shared page-built components in place, for every page
   that uses them: tables, gold notes (no more cream fills), numbered
   habit cards, one-study proof layout, navy CTA cards, follow-on
   paragraphs, the build tools box and the "we prepare" checklist
   column. Markup is unchanged; these rules sit after the originals
   and win on order or specificity.
   ============================================================ */

/* ---- Tables: rounded card, gradient head, zebra rows, and the
   column the table is about as a blue "featured" column instead of
   a cream tint ---- */
.nikx .nikx-cost-wrap { border: 1px solid var(--nikx-border); border-radius: 18px; box-shadow: 0 12px 32px rgba(9, 48, 91, .08); }
.nikx[class*="--foundry"] .nikx-cost-wrap { border-color: rgba(255,255,255,.2); box-shadow: 0 20px 44px rgba(0, 0, 0, .28); }
.nikx .nikx-cost-table thead th { padding: 18px 22px; background: linear-gradient(180deg, var(--nikx-navy-lt) 0%, var(--nikx-navy) 100%); color: var(--nikx-white); font-size: 11.5px; letter-spacing: 1.1px; border-bottom: 3px solid var(--nikx-blue); }
.nikx .nikx-cost-table tbody tr:nth-child(even) > * { background: #f7faff; }
.nikx .nikx-cost-table tbody tr:hover > * { background: #eef5ff; }
.nikx .nikx-cost-table tbody th { font-size: 14.5px; }
.nikx .nikx-cost-table tbody td { color: var(--nikx-text); }
/* featured column: last by default, second with --mid, none with --even */
.nikx .nikx-cost-table:not(.nikx-cost-table--even):not(.nikx-cost-table--mid) thead th:last-child,
.nikx .nikx-cost-table--mid thead th:nth-child(2) { background: linear-gradient(180deg, #0a7cf0 0%, var(--nikx-blue) 100%); color: var(--nikx-white); border-bottom-color: var(--nikx-gold); }
.nikx .nikx-cost-table:not(.nikx-cost-table--even):not(.nikx-cost-table--mid) tbody td:last-child,
.nikx .nikx-cost-table--mid tbody td:nth-child(2) { background: #eef6ff; color: var(--nikx-navy); font-weight: 700; box-shadow: inset 2px 0 0 var(--nikx-blue-mid); }
.nikx .nikx-cost-table:not(.nikx-cost-table--even):not(.nikx-cost-table--mid) tbody tr:nth-child(even) td:last-child,
.nikx .nikx-cost-table--mid tbody tr:nth-child(even) td:nth-child(2) { background: #e4f0ff; }
.nikx .nikx-cost-table:not(.nikx-cost-table--even):not(.nikx-cost-table--mid) tbody tr:hover td:last-child,
.nikx .nikx-cost-table--mid tbody tr:hover td:nth-child(2) { background: #d9eaff; }
.nikx .nikx-cost-table--mid thead th:last-child { background: linear-gradient(180deg, var(--nikx-navy-lt) 0%, var(--nikx-navy) 100%); color: var(--nikx-white); }
.nikx .nikx-cost-table--mid tbody td:last-child { background: none; box-shadow: none; }
.nikx .nikx-cost-table--mid tbody tr:nth-child(even) td:last-child { background: #f7faff; }
.nikx .nikx-cost-num { width: 28px; height: 28px; border-radius: 8px; background: var(--nikx-blue); color: var(--nikx-white); }
.nikx .nikx-row-icon { background: var(--nikx-blue); color: var(--nikx-white); box-shadow: 0 4px 10px rgba(0, 110, 221, .25); }
@media (max-width: 700px) {
  .nikx .nikx-cost-table--stack tbody tr:nth-child(even) > * { background: #f7faff; }
}

/* ---- Notes: white card with a gold edge and a solid gold icon on
   light backgrounds; a glass card with a gold edge on navy ---- */
.nikx .nikx-rules-note { padding: 18px 22px; border-radius: 14px; background: var(--nikx-white); border: 1px solid var(--nikx-border); border-left: 4px solid var(--nikx-gold); box-shadow: 0 8px 24px rgba(9, 48, 91, .07); gap: 16px; }
.nikx .nikx-rules-note-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--nikx-gold); color: var(--nikx-navy); }
.nikx .nikx-rules-note p { font-size: 15px; color: var(--nikx-text); }
.nikx .nikx-rules-note p strong { color: var(--nikx-navy); }
.nikx[class*="--foundry"] .nikx-rules-note { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); border-left-color: var(--nikx-gold); box-shadow: none; }
.nikx[class*="--foundry"] .nikx-rules-note p { color: rgba(255,255,255,.9); }
.nikx[class*="--foundry"] .nikx-rules-note p strong { color: var(--nikx-white); }
.nikx[class*="--foundry"] .nikx-rules-note .nikx-link { color: var(--nikx-gold); text-decoration-color: rgba(240, 165, 0, .5); }
.nikx .nikx-options-note-icon, .nikx .nikx-callout--weak .nikx-callout-icon { background: var(--nikx-gold); color: var(--nikx-navy); }

/* ---- Follow-on paragraphs: a tinted box with a blue edge (gold on
   navy) instead of loose text between cards ---- */
.nikx .nikx-rules-foot:not(.nikx-rules-foot--center):not(.nikx-rules-foot--lead) { padding: 18px 22px; border-radius: 14px; background: rgba(0, 110, 221, .05); border-left: 4px solid var(--nikx-blue); color: var(--nikx-text); }
.nikx[class*="--foundry"] .nikx-rules-foot:not(.nikx-rules-foot--center):not(.nikx-rules-foot--lead) { background: rgba(255,255,255,.06); border-left-color: var(--nikx-gold); color: rgba(255,255,255,.88); }
.nikx[class*="--foundry"] .nikx-rules-foot .nikx-link { color: var(--nikx-gold); text-decoration-color: rgba(240, 165, 0, .5); }
.nikx .nikx-rules-foot + .nikx-rules-foot { margin-top: 12px; }
.nikx .nikx-rules-foot:not(.nikx-rules-foot--center):not(.nikx-rules-foot--lead) { max-width: none; }

/* ---- Tick lists on their own in a panel: each item a small tinted
   row, two columns on desktop, instead of a thin list in a big box ---- */
.nikx .nikx-panel .nikx-why-list--plain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nikx .nikx-panel .nikx-why-list--plain li { margin: 0; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--nikx-surface); border: 1px solid var(--nikx-border); font-size: 14.5px; }
.nikx .nikx-panel .nikx-why-list--plain li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.nikx .nikx-panel .nikx-why-list--plain .nikx-icon { width: 30px; height: 30px; padding: 7px; margin: 0; border-radius: 50%; background: var(--nikx-teal-lt); color: var(--nikx-teal-dk); }
.nikx .nikx-panel .nikx-why-list--warn .nikx-icon { background: var(--nikx-gold); color: var(--nikx-navy); }
.nikx .nikx-panel .nikx-why-list--plain strong { color: var(--nikx-navy); }
.nikx .nikx-panel--line:has(> .nikx-why-list--plain:only-child) { padding: 18px; }
@media (max-width: 760px) { .nikx .nikx-panel .nikx-why-list--plain { grid-template-columns: 1fr; } }

/* ---- Habits: white cards with a solid number badge. Numbered rows
   (default and cols-4) put the badge beside the text, and cols-4 runs
   two wide cards per row, so short and long cards no longer leave a
   tall empty box. cols-2 / cols-3 keep their large figures. ---- */
.nikx .nikx-habit { padding: 24px 24px; border-radius: 16px; background: var(--nikx-white); border: 1px solid var(--nikx-border); border-top: 1px solid var(--nikx-border); box-shadow: 0 6px 18px rgba(9, 48, 91, .06); transition: transform .2s ease, box-shadow .2s ease; }
.nikx .nikx-habit:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(9, 48, 91, .12); }
.nikx .nikx-habits.cols-3 .nikx-habit, .nikx .nikx-habits.cols-2 .nikx-habit { border-top: 4px solid var(--nikx-blue); }
.nikx .nikx-habits:not(.cols-2):not(.cols-3) .nikx-habit-num {
  width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--nikx-blue) 0%, var(--nikx-blue-dk) 100%); color: var(--nikx-white);
  font-size: 17px; box-shadow: 0 6px 14px rgba(0, 110, 221, .28);
}
.nikx[class*="--foundry"] .nikx-habits:not(.cols-2):not(.cols-3) .nikx-habit-num { background: linear-gradient(135deg, #ffbe2e 0%, var(--nikx-gold) 100%); color: var(--nikx-navy); box-shadow: 0 6px 14px rgba(240, 165, 0, .3); }
/* cards with no number (title first): blue left edge instead of top */
.nikx .nikx-habits .nikx-habit:has(> h3:first-child) { border-top: 1px solid var(--nikx-border); border-left: 4px solid var(--nikx-blue); padding: 22px 24px; }
.nikx[class*="--foundry"] .nikx-habits .nikx-habit:has(> h3:first-child) { border-left-color: var(--nikx-gold); }
.nikx .nikx-habits.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nikx .nikx-habits.cols-4 > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.nikx .nikx-habits.cols-4 .nikx-habit { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 18px; align-content: start; }
.nikx .nikx-habits.cols-4 .nikx-habit-num { grid-row: 1 / span 3; }
.nikx .nikx-habits.cols-4 .nikx-habit h3 { margin-top: 2px; font-size: 17px; }
.nikx .nikx-habits.cols-4 .nikx-habit p { grid-column: 2; }
@media (max-width: 700px) {
  .nikx .nikx-habits.cols-4 { grid-template-columns: 1fr; }
  .nikx .nikx-habits.cols-4 .nikx-habit { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 20px; }
  .nikx .nikx-habits.cols-4 .nikx-habit-num { width: 40px; height: 40px; font-size: 15px; }
}

/* ---- Proof, one study: the study becomes one wide card (photo left,
   text right, results under the text) with the quote as a full-width
   band below, instead of a short quote card beside a tall study ---- */
.nikx-proof-grid.nikx-proof-grid--single { grid-template-columns: 1fr; gap: 22px; }
.nikx .nikx-proof-grid--single .nikx-study { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto; }
.nikx .nikx-proof-grid--single .nikx-study-media { grid-row: 1 / span 2; aspect-ratio: auto; min-height: 360px; }
.nikx .nikx-proof-grid--single .nikx-study-body { padding: 32px 36px 14px; }
.nikx .nikx-proof-grid--single .nikx-study-results { grid-column: 2; margin-top: 16px; }
.nikx .nikx-proof-grid--single .nikx-proof-quote { grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 30px 38px; }
.nikx .nikx-proof-grid--single .nikx-proof-quote .nikx-icon { width: 54px; height: 42px; }
@media (max-width: 900px) {
  .nikx .nikx-proof-grid--single .nikx-study { display: flex; }
  .nikx .nikx-proof-grid--single .nikx-study-media { aspect-ratio: 16 / 8; min-height: 0; }
  .nikx .nikx-proof-grid--single .nikx-study-body { padding: 26px 24px 8px; }
  .nikx .nikx-proof-grid--single .nikx-proof-quote { grid-template-columns: 1fr; gap: 12px; padding: 26px 24px; }
}
/* quote cards: a soft glow so they read as a designed panel */
.nikx .nikx-proof-quote { position: relative; overflow: hidden; isolation: isolate; }
.nikx-proof--meridian .nikx-proof-quote { background: radial-gradient(420px 240px at 100% 0%, rgba(0, 110, 221, .55), transparent 65%), var(--nikx-navy); }
.nikx .nikx-proof-quote::after { content: ''; position: absolute; right: -50px; bottom: -70px; width: 190px; height: 190px; border-radius: 50%; border: 26px solid rgba(255,255,255,.05); z-index: -1; }

/* ---- Navy CTA cards: glow, a gold rule above the text and a ring,
   so a short line of text no longer floats in an empty box ---- */
.nikx .nikx-cost-card.rfp {
  position: relative; overflow: hidden; isolation: isolate; padding: 34px 32px;
  background: radial-gradient(380px 240px at 105% -10%, rgba(240, 165, 0, .26), transparent 62%), radial-gradient(360px 280px at -10% 115%, rgba(0, 110, 221, .5), transparent 62%), var(--nikx-navy);
}
.nikx .nikx-cost-card.rfp:not(.nikx-cost-card--row)::before { content: ''; flex: none; width: 46px; height: 4px; border-radius: 2px; background: var(--nikx-gold); }
.nikx .nikx-cost-card.rfp::after { content: ''; position: absolute; right: -64px; bottom: -64px; width: 210px; height: 210px; border-radius: 50%; border: 30px solid rgba(255,255,255,.05); z-index: -1; }
.nikx .nikx-cost-card.rfp p { font-size: 20px; }

/* ---- Build tools box: a panel, with the chips on a darker inset ---- */
.nikx .nikx-build-tools { background: rgba(255,255,255,.04); align-items: stretch; padding: 22px; gap: 26px; }
.nikx .nikx-build-tools > .nikx-chip-row { align-content: center; padding: 22px; border-radius: 14px; background: rgba(3, 18, 38, .35); border: 1px solid rgba(255,255,255,.08); }
.nikx .nikx-build-tools > div:not(.nikx-chip-row) { align-self: center; }
.nikx .nikx-build-tools--cta { padding: 24px 28px; }

/* ---- HEAD SPLIT (new layout): a section's heading and intro text on
   the left, a supporting photo on the right, so text-heavy sections
   open with an image. Photo stacks under the text below 900px. ---- */
.nikx-head-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-bottom: 44px; }
.nikx .nikx-head-split .nikx-section-head { margin-bottom: 0; max-width: none; }
.nikx .nikx-head-figure { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: var(--nikx-surface2); box-shadow: 0 18px 40px rgba(9, 48, 91, .16); }
.nikx .nikx-head-figure img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.nikx .nikx-head-figure::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--nikx-blue), var(--nikx-gold)); }
.nikx[class*="--foundry"] .nikx-head-figure { background: var(--nikx-navy-lt); box-shadow: 0 22px 48px rgba(0, 0, 0, .35); outline: 1px solid rgba(255,255,255,.12); outline-offset: -1px; }
.nikx .nikx-head-split + .nikx-rules-foot--lead { margin-top: 0; }
@media (max-width: 900px) {
  .nikx-head-split { grid-template-columns: 1fr; gap: 26px; margin-bottom: 34px; }
  .nikx .nikx-head-figure { aspect-ratio: 16 / 9; }
}

/* ---- Checklist: "we prepare" as a solid navy card on light pages and
   a blue glass card on navy (no more gold-tinted fills) ---- */
.nikx-checklist--foundry .nikx-checklist-col.ours { background: linear-gradient(160deg, rgba(0, 110, 221, .32) 0%, rgba(0, 110, 221, .12) 100%); border-color: rgba(90, 170, 255, .45); }
.nikx.nikx-checklist--meridian .nikx-checklist-col.ours { background: radial-gradient(360px 220px at 100% 0%, rgba(0, 110, 221, .45), transparent 65%), var(--nikx-navy); border-color: var(--nikx-navy); box-shadow: 0 16px 36px rgba(9, 48, 91, .2); }
.nikx.nikx-checklist--meridian .nikx-checklist-col.ours h3 { color: var(--nikx-white); }
.nikx.nikx-checklist--meridian .nikx-checklist-col.ours li { color: rgba(255,255,255,.92); }


/* ============================================================
   IKHYA: EXISTING LIVE SITE CSS, INCLUDED VERBATIM BELOW
   ============================================================
   Everything from this line to the end of the file is a direct copy of
   ikhya.com's own existing global CSS (the "ikhya-global.css" the live
   site's pages already depend on, .ikx-* classes, --navy/--blue/etc.
   tokens). Included here on purpose, per the user's explicit instruction
   2026-08-21, so that pasting this ENTIRE file into the live site's
   Custom CSS box is always a complete, safe replacement, not something
   that needs manual merging with whatever is already pasted there. See
   INTEGRATION-GUIDE.md and PROJECT-CONTEXT.md.

   Source of truth for this block: source/global.css (read-only Phase 1
   reference at the project root, never hand-edited). This is a verbatim
   copy of that file as of 2026-08-18, its last known-good snapshot. If
   the live site's CSS has changed since, this block is stale, get an
   updated copy of the live CSS before relying on a full-file paste to
   replace what's currently live, a stale full replace would silently
   roll the live site's CSS backward.

   Never hand-edit this block directly. If it needs to change, update
   source/global.css first (or get a fresh export from the live site),
   then re-sync this block from it, the same way dist/ and pages/*.html
   get regenerated from their own sources rather than hand-touched.

   Verified zero overlap with the .nikx system above, 2026-08-21: no
   shared class prefix (.ikx vs .nikx), no shared custom-property scope
   (.ikx {} vs .nikx {}, neither at bare :root), no @font-face or @import
   in this block (the live site loads fonts elsewhere, not from this
   file). Nothing above this line depends on or conflicts with anything
   below it, or vice versa.

   Note on RULES.md rule 1 (no em dashes): this block keeps the live
   file's own comments verbatim, including its existing em dashes. That
   rule governs content this project authors, not a faithful mirror of
   a third-party file, editing them would make this block diverge from
   the real live CSS and defeat the point of including it. See RULES.md.
   ============================================================ */

/* ============================================================
   1. HERO SECTION
   ============================================================ */

.ikx .ikx-dir-hero {
    background: var(--navy);
    position: relative;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

/* Decorative rings */
.ikx .ikx-dir-hero-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .06);
    pointer-events: none;
}

.ikx .ikx-dir-hero-ring.r1 {
    width: 700px;
    height: 700px;
    top: -250px;
    left: -200px;
}

.ikx .ikx-dir-hero-ring.r2 {
    width: 1000px;
    height: 1000px;
    top: -400px;
    left: -350px;
}

.ikx .ikx-dir-hero-ring.r3 {
    width: 450px;
    height: 450px;
    bottom: -180px;
    right: -80px;
}

/* Hero 2-col grid */
.ikx .ikx-dir-hero-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 0;
    position: relative;
    z-index: 1;
    min-height: 520px;
}

.ikx .ikx-dir-hero-left {
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ikx .ikx-dir-hero-right {
    border-left: 1px solid rgba(255, 255, 255, .1);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
}

/* Breadcrumb */
.ikx .ikx-dir-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.ikx .ikx-dir-breadcrumb a {
    font-size: 12px;
    color: rgba(255, 255, 255, .4);
    text-decoration: none;
    transition: color .15s;
}

.ikx .ikx-dir-breadcrumb a:hover {
    color: rgba(255, 255, 255, .75);
}

.ikx .ikx-dir-breadcrumb .sep {
    font-size: 12px;
    color: rgba(255, 255, 255, .2);
}

.ikx .ikx-dir-breadcrumb .current {
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
}

/* Category pill */
.ikx .ikx-dir-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 110, 221, .3);
    border: 1px solid rgba(91, 184, 255, .35);
    color: #7dc7ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 18px;
    width: fit-content;
}

/* Hero H1 */
.ikx .ikx-dir-h1 {
    font-size: clamp(30px, 3.5vw, 48px) !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 1.08 !important;
    margin: 0 0 16px !important;
    letter-spacing: -0.5px;
}

.ikx .ikx-dir-h1 span {
    color: #5bb8ff;
    display: block;
}

/* Hero sub-heading */
.ikx .ikx-dir-sub {
    font-size: 15px;
    color: rgba(255, 255, 255, .55);
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 520px;
}

/* Quick-jump pill links */
.ikx .ikx-dir-jumps {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 32px;
}

.ikx .ikx-dir-jump {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .11);
    color: rgba(255, 255, 255, .65);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: all .15s;
}

.ikx .ikx-dir-jump:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}

/* Hero stats row */
.ikx .ikx-dir-hero-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.ikx .ikx-dir-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ikx .ikx-dir-stat .num {
    font-size: 21px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.ikx .ikx-dir-stat .lbl {
    font-size: 10px;
    color: rgba(255, 255, 255, .4);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}


/* ============================================================
   2. HERO FORM PANEL
   ============================================================ */

.ikx .ikx-dir-form-box {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .28);
}

.ikx .ikx-dir-form-head {
    background: var(--blue);
    padding: 16px 20px;
}

.ikx .ikx-dir-form-head-top {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 10px;
}

.ikx .ikx-dir-form-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, .18);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.ikx .ikx-dir-form-head h2 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 2px !important;
    line-height: 1.3 !important;
}

.ikx .ikx-dir-form-head p {
    font-size: 11px !important;
    color: rgba(255, 255, 255, .7) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.ikx .ikx-dir-trust-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ikx .ikx-dir-trust-item {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, .75);
}

/* Form body */
.ikx .ikx-dir-form-body {
    padding: 14px 20px;
}

/* CF7 field normalisation */
.ikx .ikx-dir-form-body .wpcf7-form-control-wrap input,
.ikx .ikx-dir-form-body .wpcf7-form-control-wrap textarea,
.ikx .ikx-dir-form-body input[type=text],
.ikx .ikx-dir-form-body input[type=email],
.ikx .ikx-dir-form-body input[type=tel],
.ikx .ikx-dir-form-body textarea {
    width: 100% !important;
    border: 1.5px solid #d0e3f5 !important;
    border-radius: 7px !important;
    padding: 8px 11px !important;
    font-size: 13px !important;
    color: #0f2540 !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color .2s !important;
    font-family: inherit !important;
    margin-top: 0 !important;
}

.ikx .ikx-dir-form-body input[type=text]:focus,
.ikx .ikx-dir-form-body input[type=email]:focus,
.ikx .ikx-dir-form-body input[type=tel]:focus,
.ikx .ikx-dir-form-body textarea:focus {
    border-color: var(--blue) !important;
}

.ikx .ikx-dir-form-body textarea {
    min-height: 72px !important;
    resize: vertical !important;
}

/* Two-col row (Name / Phone) */
.ikx .ikx-dir-form-body .ikx-cf7-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

/* Label — tight gap above field */
.ikx .ikx-dir-form-body .ikx-form-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #4d6680;
    margin-bottom: 1px;
    margin-top: 0;
    letter-spacing: .3px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Kill CF7-generated spacing */
.ikx .ikx-dir-form-body .wpcf7-form-control-wrap {
    display: block;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ikx .ikx-dir-form-body p {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

.ikx .ikx-dir-form-body .ikx-form-label+.wpcf7-form-control-wrap,
.ikx .ikx-dir-form-body .ikx-form-label~input,
.ikx .ikx-dir-form-body .ikx-form-label~.wpcf7-form-control-wrap {
    margin-top: 1px !important;
}

.ikx .ikx-dir-form-body .wpcf7 p {
    margin: 0 0 8px !important;
    line-height: 1 !important;
}

.ikx .ikx-dir-form-body .wpcf7 .ikx-form-label {
    margin-bottom: 1px !important;
}

/* Submit button */
.ikx .ikx-dir-form-body .btn-color-training-form {
    width: 100% !important;
    background: var(--blue) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s;
    display: block;
    margin-top: 8px;
}

.ikx .ikx-dir-form-body .btn-color-training-form:hover {
    background: var(--blue-dk) !important;
}

/* Badge row below submit */
.ikx .ikx-dir-form-badges {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    margin-top: 8px;
    justify-content: space-between;
}

.ikx .ikx-dir-form-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.ikx .ikx-dir-form-badge.green {
    background: #dcfce7;
    color: #166534;
}

.ikx .ikx-dir-form-badge.blue {
    background: #dbeafe;
    color: #1e40af;
}

.ikx .ikx-dir-form-badge.amber {
    background: #fef3c7;
    color: #92400e;
}


/* ============================================================
   3. TOC BAR (below hero)
   ============================================================ */

.ikx .ikx-dir-toc-bar {
    background: #fff;
    border-bottom: 2px solid var(--border);
    padding: 0 52px;
    width: 100%;
}

.ikx .ikx-dir-toc-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
}

.ikx .ikx-dir-toc-inner::-webkit-scrollbar {
    display: none;
}

.ikx .ikx-dir-toc-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 13px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
    margin-bottom: -2px;
}

.ikx .ikx-dir-toc-link:hover {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

.ikx .ikx-dir-toc-num {
    width: 18px;
    height: 18px;
    background: var(--blue-lt);
    color: var(--blue);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   4. TWO-COLUMN PAGE LAYOUT
   ============================================================ */

.ikx .ikx-dir-layout {
    width: 100%;
    background: var(--surface);
}

.ikx .ikx-dir-layout-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    padding: 44px 52px 80px;
    align-items: start;
}

.ikx .ikx-dir-main {
    min-width: 0;
}

/* Sidebar — static (no sticky, overflow:hidden on .ikx breaks CSS sticky) */
.ikx .ikx-dir-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* ============================================================
   5. SECTION BOXES (white cards inside main column)
   ============================================================ */

.ikx .ikx-dir-section {
    background: #fff;
    border-radius: 14px;
    padding: 32px 32px 36px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.ikx .ikx-dir-section-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 6px;
    display: block;
}

.ikx .ikx-dir-section-h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--navy) !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
}

.ikx .ikx-dir-section-lead {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 24px;
    display: block;
}


/* ============================================================
   6. COMPANY CARDS
   ============================================================ */

.ikx .ikx-dir-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ikx .ikx-dir-card {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
    scroll-margin-top: 60px;
}

.ikx .ikx-dir-card:hover {
    box-shadow: 0 4px 20px rgba(0, 110, 221, .09);
    border-color: #b3d4f5;
}

.ikx .ikx-dir-card.featured {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 110, 221, .07);
}

/* Coloured top accent bar */
.ikx .ikx-dir-card-bar {
    height: 3px;
    background: var(--border);
}

.ikx .ikx-dir-card.featured .ikx-dir-card-bar {
    background: var(--blue);
}

.ikx .ikx-dir-cards .ikx-dir-card:nth-child(2) .ikx-dir-card-bar {
    background: #64b5f6;
}

.ikx .ikx-dir-cards .ikx-dir-card:nth-child(3) .ikx-dir-card-bar {
    background: #81c784;
}

.ikx .ikx-dir-cards .ikx-dir-card:nth-child(4) .ikx-dir-card-bar {
    background: #ffb74d;
}

.ikx .ikx-dir-cards .ikx-dir-card:nth-child(5) .ikx-dir-card-bar {
    background: #f06292;
}

/* Card header */
.ikx .ikx-dir-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px 14px;
}

.ikx .ikx-dir-card-rank {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    color: var(--muted);
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.ikx .ikx-dir-card.featured .ikx-dir-card-rank {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

.ikx .ikx-dir-card-meta {
    flex: 1;
    min-width: 0;
}

.ikx .ikx-dir-card-meta h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin: 0 0 4px !important;
}

.ikx .ikx-dir-card-location {
    font-size: 11px;
    color: var(--muted);
}

.ikx .ikx-dir-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

.ikx .ikx-dir-card-badge-featured {
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.ikx .ikx-dir-card-badge-type {
    background: var(--surface);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

/* Card body */
.ikx .ikx-dir-card-body {
    padding: 0 22px 14px;
}

.ikx .ikx-dir-card-desc {
    font-size: 13px;
    color: #3a4f65;
    line-height: 1.6;
    margin-bottom: 12px;
}

/* Specialty tags */
.ikx .ikx-dir-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 14px;
}

.ikx .ikx-dir-tag {
    background: var(--blue-lt);
    color: var(--blue);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 5px;
}

.ikx .ikx-dir-tag.teal {
    background: var(--teal-lt);
    color: var(--teal);
}

.ikx .ikx-dir-tag.gold {
    background: var(--gold-lt);
    color: #8a5900;
}

/* Score bars — 4 columns */
.ikx .ikx-dir-scores {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-bottom: 14px;
}

.ikx .ikx-dir-score {
    background: var(--surface);
    border-radius: 7px;
    padding: 9px 10px;
    border: 1px solid var(--border);
}

.ikx .ikx-dir-score-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--muted);
    margin-bottom: 5px;
    line-height: 1.3;
}

.ikx .ikx-dir-score-bar-wrap {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.ikx .ikx-dir-score-bar {
    height: 100%;
    border-radius: 2px;
    background: var(--blue);
}

.ikx .ikx-dir-score-val {
    font-size: 10px;
    font-weight: 700;
    color: var(--navy);
}

/* Card footer */
.ikx .ikx-dir-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    border-radius: 0 0 12px 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.ikx .ikx-dir-card.featured .ikx-dir-card-foot {
    background: #f0f7ff;
}

.ikx .ikx-dir-card-best-for {
    font-size: 12px;
    color: var(--muted);
}

.ikx .ikx-dir-card-best-for strong {
    color: var(--navy);
    font-weight: 600;
}

/* CTA button — featured card only */
.ikx .ikx-dir-card-cta {
    background: var(--blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 15px;
    border-radius: 7px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}

.ikx .ikx-dir-card-cta:hover {
    background: var(--blue-dk);
}


/* ============================================================
   7. COMPARISON TABLE
   ============================================================ */

.ikx .ikx-dir-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.ikx .ikx-dir-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 560px;
}

.ikx .ikx-dir-table thead th {
    background: var(--navy);
    color: rgba(255, 255, 255, .7);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 11px 14px;
    text-align: left;
}

.ikx .ikx-dir-table thead th:first-child {
    border-radius: 10px 0 0 0;
}

.ikx .ikx-dir-table thead th:last-child {
    border-radius: 0 10px 0 0;
}

.ikx .ikx-dir-table tbody tr {
    border-bottom: 1px solid var(--border);
}

.ikx .ikx-dir-table tbody tr:last-child {
    border-bottom: none;
}

.ikx .ikx-dir-table tbody tr:hover {
    background: var(--surface);
}

.ikx .ikx-dir-table tbody tr.highlight {
    background: #f0f7ff;
}

.ikx .ikx-dir-table td {
    padding: 11px 14px;
    color: var(--muted);
    vertical-align: middle;
}

.ikx .ikx-dir-table td.co-name {
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
}

.ikx .ikx-dir-table td.co-name.top {
    color: var(--blue);
}

.ikx .ikx-dir-table .dot-fill {
    display: inline-flex;
    gap: 3px;
}

.ikx .ikx-dir-table .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
}

.ikx .ikx-dir-table .dot.on {
    background: var(--blue);
}


/* ============================================================
   8. PRICING GRID
   ============================================================ */

.ikx .ikx-dir-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
}

.ikx .ikx-dir-price-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 11px;
    padding: 18px;
    transition: border-color .2s;
}

.ikx .ikx-dir-price-card:hover {
    border-color: #b3d4f5;
}

.ikx .ikx-dir-price-tier {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--muted);
    margin-bottom: 7px;
}

.ikx .ikx-dir-price-amount {
    font-size: 20px;
    font-weight: 900;
    color: var(--navy);
    line-height: 1;
    margin-bottom: 3px;
}

.ikx .ikx-dir-price-amount span {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}

.ikx .ikx-dir-price-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
}

.ikx .ikx-dir-price-desc {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 8px;
}

.ikx .ikx-dir-price-driver {
    font-size: 10px;
    color: var(--blue);
    font-weight: 600;
}


/* ============================================================
   9. PROCESS STEPS (vertical timeline)
   ============================================================ */

.ikx .ikx-dir-steps {
    display: flex;
    flex-direction: column;
}

.ikx .ikx-dir-step {
    display: flex;
    gap: 16px;
    padding-bottom: 24px;
}

.ikx .ikx-dir-step:last-child {
    padding-bottom: 0;
}

.ikx .ikx-dir-step-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.ikx .ikx-dir-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ikx .ikx-dir-step-line {
    width: 2px;
    flex: 1;
    background: var(--border);
    margin-top: 5px;
    min-height: 16px;
}

.ikx .ikx-dir-step:last-child .ikx-dir-step-line {
    display: none;
}

.ikx .ikx-dir-step-content {
    padding-top: 4px;
}

.ikx .ikx-dir-step-content h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin: 0 0 5px !important;
}

.ikx .ikx-dir-step-content p {
    font-size: 13px !important;
    color: var(--muted) !important;
    line-height: 1.6 !important;
    margin: 0 0 5px !important;
}

.ikx .ikx-dir-step-meta {
    font-size: 11px;
    color: var(--blue);
    font-weight: 600;
}


/* ============================================================
   10. INDUSTRY CARDS
   ============================================================ */

.ikx .ikx-dir-ind-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

.ikx .ikx-dir-ind-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 14px;
    display: flex;
    gap: 11px;
    align-items: flex-start;
    transition: border-color .2s;
}

.ikx .ikx-dir-ind-card:hover {
    border-color: #b3d4f5;
}

.ikx .ikx-dir-ind-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.ikx .ikx-dir-ind-card h4 {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin: 0 0 3px !important;
}

.ikx .ikx-dir-ind-card p {
    font-size: 11px !important;
    color: var(--muted) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}


/* ============================================================
   11. FAQ
   ============================================================ */

.ikx .ikx-dir-faq {
    display: flex;
    flex-direction: column;
}

.ikx .ikx-dir-faq-item {
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
}

.ikx .ikx-dir-faq-item:last-child {
    border-bottom: none;
}

.ikx .ikx-dir-faq-q {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin: 0 0 7px !important;
}

.ikx .ikx-dir-faq-a {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.65;
}


/* ============================================================
   12. SIDEBAR WIDGETS
   ============================================================ */

.ikx .ikx-dir-widget {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.ikx .ikx-dir-widget-head {
    padding: 13px 16px;
    background: var(--navy);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.ikx .ikx-dir-widget-body {
    padding: 14px 16px;
}

/* CTA widget */
.ikx .ikx-dir-widget-cta {
    background: var(--blue);
    border-radius: 12px;
    padding: 22px 18px;
    text-align: center;
}

.ikx .ikx-dir-widget-cta h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 7px !important;
}

.ikx .ikx-dir-widget-cta p {
    font-size: 11px !important;
    color: rgba(255, 255, 255, .7) !important;
    line-height: 1.5 !important;
    margin: 0 0 14px !important;
}

.ikx .ikx-dir-cta-btn {
    display: block;
    background: #fff;
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    transition: opacity .15s;
    margin-bottom: 7px;
}

.ikx .ikx-dir-cta-btn:hover {
    opacity: .9;
    color: var(--navy);
}

.ikx .ikx-dir-cta-btn.outline {
    background: transparent;
    color: rgba(255, 255, 255, .85);
    border: 1px solid rgba(255, 255, 255, .3);
    margin-bottom: 0;
}

.ikx .ikx-dir-cta-btn.outline:hover {
    background: rgba(255, 255, 255, .1);
}

/* TOC widget */
.ikx .ikx-dir-sidebar-toc {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ikx .ikx-dir-sidebar-toc a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    transition: all .15s;
}

.ikx .ikx-dir-sidebar-toc a:hover {
    background: var(--surface);
    color: var(--navy);
}

.ikx .ikx-dir-sidebar-toc .toc-num {
    width: 19px;
    height: 19px;
    border-radius: 5px;
    background: var(--blue-lt);
    color: var(--blue);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Facts widget */
.ikx .ikx-dir-facts {
    display: flex;
    flex-direction: column;
}

.ikx .ikx-dir-fact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.ikx .ikx-dir-fact:last-child {
    border-bottom: none;
}

.ikx .ikx-dir-fact-label {
    color: var(--muted);
}

.ikx .ikx-dir-fact-value {
    font-weight: 700;
    color: var(--navy);
}


/* ============================================================
   13. STATS BAND
   ============================================================ */

.ikx .ikx-dir-stats-band {
    background: var(--navy);
    padding: 44px 52px;
    width: 100%;
}

.ikx .ikx-dir-stats-row {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.ikx .ikx-dir-stats-row .ikx-dir-stat {
    text-align: center;
    padding: 0 20px;
    border-right: 1px solid rgba(255, 255, 255, .09);
}

.ikx .ikx-dir-stats-row .ikx-dir-stat:last-child {
    border-right: none;
}

.ikx .ikx-dir-stats-row .num {
    font-size: 28px;
    font-weight: 800;
    text-align: center;
}

.ikx .ikx-dir-stats-row .lbl {
    text-align: center;
    font-size: 10px;
}


/* ============================================================
   14. FINAL CTA BAND
   ============================================================ */

.ikx .ikx-dir-cta-band {
    background: linear-gradient(135deg, var(--navy) 0%, #0a4a9a 100%);
    padding: 68px 52px;
    width: 100%;
    text-align: center;
    clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%);
}

.ikx .ikx-dir-cta-band-inner {
    max-width: 680px;
    margin: 0 auto;
}

.ikx .ikx-dir-cta-band h2 {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 14px !important;
}

.ikx .ikx-dir-cta-band p {
    font-size: 15px !important;
    color: rgba(255, 255, 255, .6) !important;
    margin: 0 0 28px !important;
    line-height: 1.65 !important;
}

.ikx .ikx-dir-cta-band-btns {
    display: flex;
    gap: 11px;
    justify-content: center;
    flex-wrap: wrap;
}

.ikx .ikx-dir-cta-primary {
    background: var(--blue);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 13px 26px;
    border-radius: 9px;
    text-decoration: none;
    transition: background .15s;
}

.ikx .ikx-dir-cta-primary:hover {
    background: var(--blue-dk);
}

.ikx .ikx-dir-cta-ghost {
    background: transparent;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    font-weight: 700;
    padding: 13px 26px;
    border-radius: 9px;
    border: 1.5px solid rgba(255, 255, 255, .22);
    text-decoration: none;
}

.ikx .ikx-dir-cta-ghost:hover {
    background: rgba(255, 255, 255, .07);
}


/* ============================================================
   15. RELATED LINKS SECTION
   ============================================================ */

.ikx .ikx-dir-related-wrap {
    background: #fff;
    padding: 52px;
    width: 100%;
    border-top: 1px solid var(--border);
}

.ikx .ikx-dir-related-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.ikx .ikx-dir-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 24px;
}

.ikx .ikx-dir-related-col h4 {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--navy);
    margin: 0 0 10px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--blue);
}

.ikx .ikx-dir-related-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.ikx .ikx-dir-related-col ul li a {
    display: block;
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    transition: color .15s;
}

.ikx .ikx-dir-related-col ul li:last-child a {
    border-bottom: none;
}

.ikx .ikx-dir-related-col ul li a:hover {
    color: var(--blue);
}


/* ============================================================
   16. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .ikx .ikx-dir-hero-inner {
        grid-template-columns: 1fr;
    }

    .ikx .ikx-dir-hero-right {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, .08);
        padding: 32px 36px 44px;
    }

    .ikx .ikx-dir-layout-inner {
        grid-template-columns: 1fr;
        padding: 28px 24px 56px;
    }

    .ikx .ikx-dir-sidebar {
        position: static;
    }

    .ikx .ikx-dir-stats-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .ikx .ikx-dir-related-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .ikx .ikx-dir-hero-left {
        padding: 36px 22px;
    }

    .ikx .ikx-dir-hero-right {
        padding: 26px 22px 38px;
    }

    .ikx .ikx-dir-toc-bar {
        padding: 0 14px;
    }

    .ikx .ikx-dir-section {
        padding: 22px 18px 26px;
    }

    .ikx .ikx-dir-pricing-grid {
        grid-template-columns: 1fr;
    }

    .ikx .ikx-dir-ind-grid {
        grid-template-columns: 1fr;
    }

    .ikx .ikx-dir-scores {
        grid-template-columns: repeat(2, 1fr);
    }

    .ikx .ikx-dir-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .ikx .ikx-dir-related-grid {
        grid-template-columns: 1fr;
    }

    .ikx .ikx-dir-cta-band {
        clip-path: none;
        padding: 44px 22px;
    }

    .ikx .ikx-dir-related-wrap {
        padding: 36px 22px;
    }
}

/* ── Full-width breakout ───────────────────────────
   Forces .ikx to bleed edge-to-edge regardless of
   Woodmart's container padding                      */
.ikx {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow-x: hidden;
    margin-top: -40px !important;
    margin-bottom: -40px !important;
}

/* ── Reset inside scope ───────────────────────── */
.ikx *,
.ikx *::before,
.ikx *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.ikx a {
    text-decoration: none;
}

.ikx img {
    display: block;
    max-width: 100%;
}

/* ── Brand tokens ─────────────────────────────── */
.ikx {
    --blue: #006edd;
    --blue-dk: #0058b8;
    --blue-lt: #e6f2ff;
    --blue-mid: #cce3ff;
    --navy: #09305b;
    --navy-lt: #0d3d72;
    --white: #ffffff;
    --surface: #f4f8fd;
    --surface2: #eaf2fc;
    --text: #0f2540;
    --muted: #4d6680;
    --border: #d0e3f5;
    --gold: #f0a500;
    --gold-lt: #fff7e0;
    --teal: #00a878;
    --teal-lt: #e0f7f0;
    /* Logo accent colours */
    --logo-green: #3aaa35;
    --logo-orange: #f5a623;
    --logo-red: #e63329;
    --logo-yellow: #f5d000;
}

/* ════════════════════════════════════════════════
   HERO  —  shared by all country & hub pages
════════════════════════════════════════════════ */
.ikx-hero {
    background: linear-gradient(135deg, var(--navy) 0%, #0a4a8a 100%);
    padding: 72px 48px 80px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.ikx-hero-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ikx-hero-ring.r1 {
    top: -120px;
    right: -120px;
    width: 520px;
    height: 520px;
    border: 80px solid rgba(0, 110, 221, .15);
}

.ikx-hero-ring.r2 {
    bottom: -80px;
    left: -70px;
    width: 340px;
    height: 340px;
    border: 55px solid rgba(0, 110, 221, .1);
}

/* Inner containers — max-width centred on all pages */
.ikx-inner,
.ikx-hero-inner,
.ikx-svc-inner,
.ikx-process-inner,
.ikx-countries-inner,
.ikx-ind-inner,
.ikx-why-inner,
.ikx-faq-inner,
.ikx-resource-inner,
.ikx-tools-inner,
.ikx-stats-inner-row,
.ikx-cta-inner {
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
}

/* Hero inner: two-column layout — only inside .ikx-hero */
.ikx-hero .ikx-hero-inner {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 52px;
    align-items: start;
}

.ikx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 110, 221, .25);
    color: #7dc7ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 110, 221, .3);
}

.ikx-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ikx-breadcrumb a,
.ikx-breadcrumb span {
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}

.ikx-breadcrumb a:hover {
    color: rgba(255, 255, 255, .9);
}

.ikx-breadcrumb .sep {
    color: rgba(255, 255, 255, .3);
}

.ikx-breadcrumb .current {
    color: rgba(255, 255, 255, .85);
    font-weight: 600;
}

.ikx-hero h1 {
    font-size: 40px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
    color: #fff !important;
    max-width: 820px;
}

.ikx-hero h1 span {
    color: #5bb8ff !important;
}

.ikx-hero-sub {
    font-size: 18px;
    color: rgba(255, 255, 255, .68);
    max-width: 640px;
    margin-bottom: 48px;
    line-height: 1.75;
}

/* Stats panel */
.ikx-hero-stats {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    overflow: hidden;
    max-width: 760px;
}

.ikx-hero-stat {
    flex: 1;
    min-width: 150px;
    padding: 24px 28px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.ikx-hero-stat:last-child {
    border-right: none;
}

.ikx-hero-stat .num {
    font-size: 34px;
    font-weight: 800;
    color: #5bb8ff;
    display: block;
    line-height: 1;
    margin-bottom: 6px;
}

.ikx-hero-stat .lbl {
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.4;
}

/* ════════════════════════════════════════════════
   HERO FORM PANEL  —  right column on country pages
   Scoped to .ikx-hero-form-panel so CF7 styles
   never leak to other forms on the site.
════════════════════════════════════════════════ */
.ikx-hero-form-panel {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
    position: relative;
    z-index: 2;
}

/* Blue header strip */
.ikx-form-header {
    background: #0057c8;
    padding: 20px 24px 16px;
}

.ikx-form-header-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.ikx-form-header-icon {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, .18);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.ikx-form-header h2 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 !important;
    letter-spacing: .2px;
}

.ikx-form-header p {
    font-size: 12px;
    color: rgba(255, 255, 255, .68);
    margin: 2px 0 0;
}

.ikx-form-trust-bar {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.ikx-form-trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(255, 255, 255, .75);
    font-weight: 500;
}

/* White form body */
.ikx-form-body {
    background: #fff;
    padding: 22px 24px 20px;
}

/* CF7 spacing fixes — scoped tightly so nothing else is affected */
.ikx-form-body .wpcf7-form p {
    margin: 0 0 10px !important;
}

.ikx-form-body .wpcf7-form p:last-child {
    margin-bottom: 0 !important;
}

.ikx-form-body .wpcf7-form br {
    display: none;
}

.ikx-form-body .wpcf7 .wpcf7-form-control-wrap {
    display: block;
    margin-top: 0 !important;
}

/* Two-column row for Name + Phone */
.ikx-cf7-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
}

.ikx-cf7-row p {
    margin: 0 !important;
}

/* Field labels */
.ikx-form-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #4a5568;
    margin: 0 0 4px;
}

/* Input / textarea — scoped to hero form only */
.ikx-form-body .wpcf7 input[type="text"],
.ikx-form-body .wpcf7 input[type="email"],
.ikx-form-body .wpcf7 input[type="tel"],
.ikx-form-body .wpcf7 textarea {
    width: 100%;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: #1a202c;
    background: #f8fafc !important;
    outline: none;
    box-shadow: none !important;
    font-family: inherit;
    transition: border-color .2s, background .2s;
}

.ikx-form-body .wpcf7 input[type="text"]:focus,
.ikx-form-body .wpcf7 input[type="email"]:focus,
.ikx-form-body .wpcf7 input[type="tel"]:focus,
.ikx-form-body .wpcf7 textarea:focus {
    border-color: #0057c8 !important;
    background: #fff !important;
}

.ikx-form-body .wpcf7 textarea {
    resize: vertical;
    min-height: 72px;
}

/* Submit button */
.btn-color-training-form {
    width: 100%;
    background: #0057c8 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px;
    padding: 13px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s;
    display: block;
}

.btn-color-training-form:hover {
    background: #004aab !important;
}

/* Trust badges below submit */
.ikx-form-badges {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.ikx-form-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: .3px;
}

.ikx-form-badge.green {
    background: #dcfce7;
    color: #166534;
}

.ikx-form-badge.blue {
    background: #dbeafe;
    color: #1e40af;
}

.ikx-form-badge.amber {
    background: #fef3c7;
    color: #92400e;
}

/* ════════════════════════════════════════════════
   SECTION LABELS / BADGES
════════════════════════════════════════════════ */
.ikx-slbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 10px;
    display: block;
}

.ikx-slbl.teal {
    color: var(--teal);
}

.ikx-slbl.navy {
    color: var(--navy);
}

.ikx-badge {
    display: inline-block;
    background: var(--blue-lt);
    color: var(--blue);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 14px;
}

.ikx-slbl-dark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 110, 221, .25);
    color: #7dc7ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 14px;
    border: 1px solid rgba(0, 110, 221, .3);
}

/* ════════════════════════════════════════════════
   HEADINGS & LEADS
════════════════════════════════════════════════ */
.ikx-h2 {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: var(--navy) !important;
    margin-bottom: 12px !important;
    line-height: 1.15 !important;
}

.ikx-h2-white {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 12px !important;
    line-height: 1.15 !important;
}

.ikx-lead {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 40px;
    display: block;
}

.ikx-lead-white {
    font-size: 16px;
    color: rgba(255, 255, 255, .55);
    line-height: 1.75;
    margin-bottom: 40px;
    display: block;
}

/* ════════════════════════════════════════════════
   SECTION WRAPPERS  (all 100% width)
════════════════════════════════════════════════ */
.ikx-intro-wrap,
.ikx-svc-wrap,
.ikx-process-wrap,
.ikx-countries-wrap,
.ikx-ind-wrap,
.ikx-why-wrap,
.ikx-faq-wrap,
.ikx-resource-wrap,
.ikx-tools-wrap,
.ikx-stats-wrap,
.ikx-cta-wrap,
.ikx-mid-cta-wrap,
.ikx-compliance-wrap {
    width: 100%;
}

.ikx-intro-wrap {
    background: var(--white);
    padding: 80px 48px 72px;
}

.ikx-compliance-wrap {
    background: var(--surface);
    padding: 80px 48px;
}

.ikx-svc-wrap {
    background: var(--navy);
    padding: 80px 48px;
    position: relative;
    overflow: hidden;
}

.ikx-svc-wrap::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 65px solid rgba(0, 110, 221, .14);
}

.ikx-process-wrap {
    background: var(--surface);
    padding: 80px 48px;
}

.ikx-countries-wrap {
    background: var(--white);
    padding: 80px 48px;
}

.ikx-ind-wrap {
    background: var(--surface);
    padding: 80px 48px;
}

.ikx-why-wrap {
    background: var(--white);
    padding: 80px 48px;
}

.ikx-faq-wrap {
    background: var(--surface);
    padding: 80px 48px;
}

.ikx-resource-wrap {
    background: var(--navy);
    padding: 64px 48px;
}

.ikx-tools-wrap {
    background: var(--white);
    padding: 48px 48px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.ikx-stats-wrap {
    background: var(--navy);
    padding: 0;
}

/* ════════════════════════════════════════════════
   INTRO SPLIT
════════════════════════════════════════════════ */
.ikx-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}

.ikx-intro h2 {
    font-size: 34px !important;
    font-weight: 800 !important;
    color: var(--navy) !important;
    margin-bottom: 18px !important;
    line-height: 1.15 !important;
}

.ikx-intro p {
    font-size: 16px !important;
    color: var(--muted) !important;
    margin-bottom: 16px !important;
    line-height: 1.8 !important;
}

.ikx-pull {
    border-left: 4px solid var(--blue);
    padding: 14px 18px;
    margin: 24px 0;
    font-size: 15px;
    font-style: italic;
    color: var(--navy);
    line-height: 1.65;
    background: var(--blue-lt);
    border-radius: 0 10px 10px 0;
}

.ikx-pillars {
    display: grid;
    gap: 14px;
}

.ikx-pillar {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: border-color .2s, box-shadow .2s;
}

.ikx-pillar:hover {
    border-color: var(--blue);
    box-shadow: 0 4px 20px rgba(0, 110, 221, .1);
}

.ikx-p-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.ikx-p-icon.bl {
    background: var(--blue-lt);
}

.ikx-p-icon.tl {
    background: var(--teal-lt);
}

.ikx-p-icon.gd {
    background: var(--gold-lt);
}

.ikx-p-icon.nv {
    background: #edf2fa;
}

.ikx-pillar h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-bottom: 4px !important;
}

.ikx-pillar p {
    font-size: 13px !important;
    color: var(--muted) !important;
    margin: 0 !important;
    line-height: 1.55 !important;
}

/* ════════════════════════════════════════════════
   STATS ROW (full-width navy bar)
════════════════════════════════════════════════ */
.ikx-stats-inner-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ikx-stat-item {
    padding: 36px 32px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.ikx-stat-item:last-child {
    border-right: none;
}

.ikx-stat-item .num {
    font-size: 42px;
    font-weight: 800;
    color: #5bb8ff;
    display: block;
    line-height: 1;
    margin-bottom: 10px;
}

.ikx-stat-item .lbl {
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    line-height: 1.5;
}

/* ════════════════════════════════════════════════
   SERVICES (dark — country/hub pages)
════════════════════════════════════════════════ */
.ikx-svc-inner {
    position: relative;
    z-index: 1;
}

.ikx-svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.ikx-svc-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: background .2s, transform .2s;
}

.ikx-svc-card:hover {
    background: rgba(255, 255, 255, .11);
    transform: translateY(-3px);
}

.ikx-svc-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--blue);
}

.ikx-svc-card .ikx-ico {
    font-size: 28px;
    margin-bottom: 14px;
    display: block;
}

.ikx-svc-card h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
}

.ikx-svc-card p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, .52) !important;
    margin: 0 0 18px 0 !important;
    line-height: 1.6 !important;
    flex: 1;
}

.ikx-svc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--blue);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background .15s;
    align-self: flex-start;
}

.ikx-svc-btn:hover {
    background: var(--blue-dk) !important;
}

.ikx-svc-btn::after {
    content: '→';
}

/* ════════════════════════════════════════════════
   MID-PAGE CTA BANNER
════════════════════════════════════════════════ */
.ikx-mid-cta-wrap {
    background: var(--blue);
    padding: 48px 48px;
}

.ikx-mid-cta {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.ikx-mid-cta h3 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
}

.ikx-mid-cta p {
    font-size: 15px !important;
    color: rgba(255, 255, 255, .7) !important;
    margin: 0 !important;
}

.ikx-mid-cta-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.ikx-btn-white {
    background: #fff !important;
    color: var(--blue) !important;
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-block;
    transition: opacity .15s;
}

.ikx-btn-white:hover {
    opacity: .9;
}

.ikx-btn-white-outline {
    background: transparent !important;
    color: #fff !important;
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, .5) !important;
    transition: border-color .15s;
}

.ikx-btn-white-outline:hover {
    border-color: #fff !important;
}

/* ════════════════════════════════════════════════
   PROCESS STEPS
════════════════════════════════════════════════ */
.ikx-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.ikx-step {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 28px 22px;
    text-align: center;
    transition: border-color .2s, box-shadow .2s;
}

.ikx-step:hover {
    border-color: var(--blue);
    box-shadow: 0 6px 24px rgba(0, 110, 221, .1);
}

.ikx-step-num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    margin: 0 auto 16px;
}

.ikx-step h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin-bottom: 8px !important;
}

.ikx-step p {
    font-size: 13px !important;
    color: var(--muted) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

/* ════════════════════════════════════════════════
   COUNTRIES TABLE
════════════════════════════════════════════════ */
.ikx-tw {
    border: 1.5px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(9, 48, 91, .07);
}

.ikx-tw table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ikx-tw thead {
    background: var(--navy);
}

.ikx-tw thead th {
    padding: 15px 20px;
    text-align: left;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65) !important;
    border: none !important;
    white-space: nowrap;
}

.ikx-tw thead th:first-child {
    color: #fff !important;
}

.ikx-tw tbody tr {
    border-bottom: 1px solid var(--border);
    background: #fff;
    transition: background .12s;
}

.ikx-tw tbody tr:last-child {
    border-bottom: none;
}

.ikx-tw tbody tr:hover {
    background: var(--blue-lt);
}

.ikx-tw tbody td {
    padding: 14px 20px;
    vertical-align: middle;
    border: none !important;
}

.ikx-cc {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ikx-fl {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.ikx-cn {
    font-weight: 700;
    color: var(--navy);
    font-size: 14px;
    transition: color .15s;
}

.ikx-tw tbody tr:hover .ikx-cn {
    color: var(--blue);
}

.ikx-rb {
    display: inline-block !important;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.ikx-na {
    background: #e8f0fe;
    color: #1a56c4;
}

.ikx-eu {
    background: var(--teal-lt);
    color: #006b4e;
}

.ikx-ap {
    background: var(--gold-lt);
    color: #7a4800;
}

.ikx-me {
    background: var(--blue-lt);
    color: var(--blue-dk);
}

.ikx-sc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
}

/* ════════════════════════════════════════════════
   INDUSTRY CARDS
════════════════════════════════════════════════ */
.ikx-ind-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.ikx-ind-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 24px 18px;
    text-align: center;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.ikx-ind-card:hover {
    border-color: var(--blue);
    box-shadow: 0 6px 20px rgba(0, 110, 221, .1);
    transform: translateY(-3px);
}

.ikx-ind-icon {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
}

.ikx-ind-card h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin-bottom: 6px !important;
}

.ikx-ind-card p {
    font-size: 12px !important;
    color: var(--muted) !important;
    margin: 0 !important;
    line-height: 1.55 !important;
}

/* ════════════════════════════════════════════════
   WHY / FEATURE CARDS
════════════════════════════════════════════════ */
.ikx-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.ikx-wc {
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 28px 24px;
    background: #fff;
    position: relative;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s, border-color .25s;
}

.ikx-wc:hover {
    box-shadow: 0 8px 32px rgba(0, 110, 221, .1);
    transform: translateY(-4px);
    border-color: var(--blue);
}

.ikx-wc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.ikx-wc.b::before {
    background: var(--blue);
}

.ikx-wc.n::before {
    background: var(--navy);
}

.ikx-wc.t::before {
    background: var(--teal);
}

.ikx-wc.g::before {
    background: var(--gold);
}

.ikx-wc-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--blue-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}

.ikx-wc.n .ikx-wc-icon {
    background: #edf2fa;
}

.ikx-wc.t .ikx-wc-icon {
    background: var(--teal-lt);
}

.ikx-wc.g .ikx-wc-icon {
    background: var(--gold-lt);
}

.ikx-wc h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-bottom: 10px !important;
}

.ikx-wc p {
    font-size: 14px !important;
    color: var(--muted) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* ════════════════════════════════════════════════
   FAQ
════════════════════════════════════════════════ */
.ikx-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ikx-faq-item {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 26px 24px;
    transition: border-color .2s;
}

.ikx-faq-item:hover {
    border-color: var(--blue);
}

.ikx-faq-item h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin-bottom: 12px !important;
    line-height: 1.35 !important;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ikx-faq-item h3::before {
    content: 'Q';
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.ikx-faq-item p {
    font-size: 14px !important;
    color: var(--muted) !important;
    margin: 0 !important;
    line-height: 1.75 !important;
}

/* ════════════════════════════════════════════════
   TOOLS STRIP
════════════════════════════════════════════════ */
.ikx-tools-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 24px;
    display: block;
    text-align: center;
}

.ikx-tools-grid {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.ikx-tool-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    transition: border-color .15s;
}

.ikx-tool-pill:hover {
    border-color: var(--blue);
}

.ikx-tool-pill img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: inline-block;
}

/* ════════════════════════════════════════════════
   RESOURCES / BLOG SECTION (dark)
════════════════════════════════════════════════ */
.ikx-resource-inner h2 {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 8px !important;
}

.ikx-resource-inner>p {
    font-size: 16px;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 36px;
    line-height: 1.7;
}

.ikx-res-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.ikx-res-card {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: background .2s;
    text-decoration: none !important;
}

.ikx-res-card:hover {
    background: rgba(255, 255, 255, .12);
}

.ikx-res-cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #5bb8ff;
    margin-bottom: 10px;
    display: block;
}

.ikx-res-card h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
    flex: 1;
}

.ikx-res-card p {
    font-size: 12px !important;
    color: rgba(255, 255, 255, .48) !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.55 !important;
}

.ikx-res-link {
    font-size: 12px;
    font-weight: 700;
    color: #5bb8ff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ikx-res-link::after {
    content: '→';
}

.ikx-dir-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px;
    padding: 22px 28px;
    text-decoration: none !important;
    transition: background .2s;
}

.ikx-dir-link:hover {
    background: rgba(255, 255, 255, .13);
}

.ikx-dir-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ikx-dir-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.ikx-dir-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    display: block;
    margin-bottom: 3px;
}

.ikx-dir-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
}

.ikx-dir-arrow {
    font-size: 20px;
    color: #5bb8ff;
    font-weight: 700;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   CTA
════════════════════════════════════════════════ */
.ikx-cta-wrap {
    background: linear-gradient(135deg, var(--navy) 0%, #0a4a8a 100%);
    padding: 110px 48px 88px;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
    width: 100%;
}

.ikx-cta-wrap::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 70px solid rgba(0, 110, 221, .14);
}

.ikx-cta-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.ikx-cta-inner h2 {
    font-size: 40px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 18px !important;
    line-height: 1.15 !important;
}

.ikx-cta-inner p {
    font-size: 17px !important;
    color: rgba(255, 255, 255, .62) !important;
    margin-bottom: 40px !important;
    line-height: 1.75 !important;
}

.ikx-cta-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.ikx-btn-primary {
    background: var(--blue) !important;
    color: #fff !important;
    padding: 16px 36px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-block;
    transition: background .15s, transform .15s;
    box-shadow: 0 4px 20px rgba(0, 110, 221, .4);
}

.ikx-btn-primary:hover {
    background: var(--blue-dk) !important;
    transform: translateY(-2px);
}

.ikx-btn-outline {
    background: transparent !important;
    color: #fff !important;
    padding: 16px 36px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, .35) !important;
    transition: border-color .15s, transform .15s;
}

.ikx-btn-outline:hover {
    border-color: rgba(255, 255, 255, .8) !important;
    transform: translateY(-2px);
}

/* ════════════════════════════════════════════════
   RESPONSIVE  —  shared
════════════════════════════════════════════════ */
@media (max-width: 1100px) {

    .ikx-hero-inner,
    .ikx-svc-inner,
    .ikx-process-inner,
    .ikx-countries-inner,
    .ikx-ind-inner,
    .ikx-why-inner,
    .ikx-faq-inner,
    .ikx-resource-inner,
    .ikx-tools-inner,
    .ikx-stats-inner-row,
    .ikx-cta-inner,
    .ikx-mid-cta {
        padding: 0 24px;
    }
}

@media (max-width: 900px) {
    .ikx-hero {
        padding: 64px 24px 110px;
    }

    .ikx-hero .ikx-hero-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .ikx-intro-wrap,
    .ikx-svc-wrap,
    .ikx-process-wrap,
    .ikx-compliance-wrap,
    .ikx-countries-wrap,
    .ikx-ind-wrap,
    .ikx-why-wrap,
    .ikx-faq-wrap,
    .ikx-resource-wrap,
    .ikx-tools-wrap,
    .ikx-mid-cta-wrap {
        padding: 60px 24px;
    }

    .ikx-cta-wrap {
        padding: 100px 24px 72px;
    }

    .ikx-intro {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .ikx-svc-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-steps {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-ind-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-why-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-faq-grid {
        grid-template-columns: 1fr;
    }

    .ikx-stats-inner-row {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-stat-item {
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .ikx-res-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-mid-cta {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 560px) {
    .ikx-hero h1 {
        font-size: 28px !important;
    }

    .ikx-svc-grid,
    .ikx-steps,
    .ikx-why-grid {
        grid-template-columns: 1fr;
    }

    .ikx-ind-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-cta-inner h2 {
        font-size: 28px !important;
    }

    .ikx-stats-inner-row {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-res-grid {
        grid-template-columns: 1fr;
    }

    .ikx-hero-stat {
        min-width: 140px;
        padding: 18px 20px;
    }

    .ikx-cf7-row {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════
   HOMEPAGE HERO
════════════════════════════════════════════════ */
.ikx-home-hero {
    background: linear-gradient(135deg, #06213d 0%, var(--navy) 45%, #0a4a8a 100%);
    padding: 60px 48px 64px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.ikx-home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(0, 110, 221, .25) 0%, transparent 65%);
}

.ikx-home-hero .ikx-hero-ring.r1 {
    top: -140px;
    right: -140px;
    width: 600px;
    height: 600px;
    border-width: 90px;
}

.ikx-home-hero .ikx-hero-ring.r2 {
    bottom: -100px;
    left: -80px;
    width: 400px;
    height: 400px;
}

.ikx-home-hero-inner {
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 52px;
    align-items: start;
}

.ikx-home-hero-text h1 {
    font-size: clamp(28px, 3vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    color: #fff !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.3px;
}

.ikx-home-hero-text h1 span {
    color: #5bb8ff !important;
}

.ikx-home-hero-text p {
    font-size: 16px !important;
    color: rgba(255, 255, 255, .68) !important;
    line-height: 1.7 !important;
    margin-bottom: 28px !important;
    max-width: 520px;
}

.ikx-hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.ikx-hero-trust {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.ikx-hero-trust-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
}

.ikx-hero-trust-items {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ikx-hero-trust-item {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ikx-hero-trust-item::before {
    content: '✓';
    color: var(--teal);
    font-weight: 800;
}

/* Lead-capture card */
.ikx-hero-card {
    background: rgba(255, 255, 255, .97);
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.ikx-hero-card h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--navy) !important;
    margin-bottom: 6px !important;
}

.ikx-hero-card .sub {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 22px;
    display: block;
}

.ikx-form-group {
    margin-bottom: 14px;
}

.ikx-form-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.ikx-form-group input,
.ikx-form-group select,
.ikx-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border) !important;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    background: #fff !important;
    outline: none;
    box-shadow: none !important;
    font-family: inherit;
    transition: border-color .15s;
}

.ikx-form-group input:focus,
.ikx-form-group select:focus,
.ikx-form-group textarea:focus {
    border-color: var(--blue) !important;
}

.ikx-form-group textarea {
    resize: none;
    height: 80px;
}

.ikx-form-submit {
    width: 100%;
    padding: 14px;
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}

.ikx-form-submit:hover {
    background: var(--blue-dk);
}

.ikx-form-note {
    font-size: 11px;
    color: var(--muted);
    text-align: center;
    margin-top: 10px;
    display: block;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════
   TICKER
════════════════════════════════════════════════ */
.ikx-ticker {
    background: var(--blue);
    padding: 14px 0;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    z-index: 2;
}

.ikx-ticker-inner {
    display: inline-flex;
    animation: ikx-ticker 35s linear infinite;
    gap: 0;
}

.ikx-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    padding: 0 40px;
    border-right: 1px solid rgba(255, 255, 255, .2);
}

.ikx-ticker-item::before {
    content: '✦';
    font-size: 8px;
}

.ikx-ticker-item:nth-child(4n+1)::before {
    color: var(--logo-green);
}

.ikx-ticker-item:nth-child(4n+2)::before {
    color: var(--logo-orange);
}

.ikx-ticker-item:nth-child(4n+3)::before {
    color: var(--logo-red);
}

.ikx-ticker-item:nth-child(4n+4)::before {
    color: var(--logo-yellow);
}

@keyframes ikx-ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ════════════════════════════════════════════════
   ABOUT / WHO WE ARE
════════════════════════════════════════════════ */
.ikx-about-wrap {
    background: var(--white);
    padding: 80px 48px;
    width: 100%;
}

.ikx-about-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.ikx-about-inner h2 {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: var(--navy) !important;
    margin-bottom: 18px !important;
    line-height: 1.15 !important;
}

.ikx-about-inner p {
    font-size: 16px !important;
    color: var(--muted) !important;
    margin-bottom: 16px !important;
    line-height: 1.8 !important;
}

.ikx-about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 32px;
}

.ikx-about-stat {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
}

.ikx-about-stat .num {
    font-size: 36px;
    font-weight: 800;
    color: var(--blue);
    display: block;
    line-height: 1;
    margin-bottom: 6px;
}

.ikx-about-stat .lbl {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

.ikx-about-stat:nth-child(1) .num {
    color: var(--blue);
}

.ikx-about-stat:nth-child(2) .num {
    color: var(--logo-green);
}

.ikx-about-stat:nth-child(3) .num {
    color: var(--logo-orange);
}

.ikx-about-stat:nth-child(4) .num {
    color: var(--logo-red);
}

.ikx-achievement-list {
    display: grid;
    gap: 14px;
}

.ikx-achievement {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    transition: border-color .2s, box-shadow .2s;
}

.ikx-achievement:hover {
    border-color: var(--blue);
    box-shadow: 0 4px 16px rgba(0, 110, 221, .1);
}

.ikx-ach-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--blue-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.ikx-achievement h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-bottom: 4px !important;
}

.ikx-achievement p {
    font-size: 13px !important;
    color: var(--muted) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ════════════════════════════════════════════════
   HOMEPAGE SERVICES GRID (light bg, 4-col)
════════════════════════════════════════════════ */
.ikx-home-svc-wrap {
    background: var(--surface);
    padding: 80px 48px;
    width: 100%;
}

.ikx-home-svc-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.ikx-home-svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ikx-home-svc-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    position: relative;
    overflow: hidden;
}

.ikx-home-svc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s;
}

.ikx-home-svc-card:nth-child(4n+1)::before {
    background: var(--blue);
}

.ikx-home-svc-card:nth-child(4n+2)::before {
    background: var(--logo-green);
}

.ikx-home-svc-card:nth-child(4n+3)::before {
    background: var(--logo-orange);
}

.ikx-home-svc-card:nth-child(4n+4)::before {
    background: var(--logo-red);
}

.ikx-home-svc-card:hover {
    border-color: var(--blue);
    box-shadow: 0 8px 28px rgba(0, 110, 221, .12);
    transform: translateY(-3px);
}

.ikx-home-svc-card:hover::before {
    transform: scaleX(1);
}

.ikx-home-svc-card .ico {
    font-size: 28px;
    margin-bottom: 14px;
    display: block;
}

.ikx-home-svc-card h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

.ikx-home-svc-card p {
    font-size: 13px !important;
    color: var(--muted) !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.6 !important;
    flex: 1;
}

.ikx-card-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}

.ikx-card-link::after {
    content: '→';
    transition: transform .15s;
}

.ikx-card-link:hover::after {
    transform: translateX(3px);
}

/* ════════════════════════════════════════════════
   AUTHORING TOOLS / LMS STRIP (dark)
════════════════════════════════════════════════ */
.ikx-tools-strip-wrap {
    background: var(--navy);
    padding: 60px 48px;
    width: 100%;
}

.ikx-tools-strip-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.ikx-tools-strip-inner h2 {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 8px !important;
}

.ikx-tools-strip-inner .sub {
    font-size: 15px;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 36px;
    display: block;
}

.ikx-tools-cats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.ikx-tools-cat h4 {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45) !important;
    margin-bottom: 14px !important;
}

.ikx-tool-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ikx-tool-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 100px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
    text-decoration: none !important;
    transition: background .15s, border-color .15s;
}

.ikx-tool-tag:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .3);
}

/* ════════════════════════════════════════════════
   HOMEPAGE PROCESS (5-step with connector line)
════════════════════════════════════════════════ */
.ikx-home-process-wrap {
    background: var(--white);
    padding: 80px 48px;
    width: 100%;
}

.ikx-home-process-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.ikx-process-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
    margin-top: 48px;
}

.ikx-process-steps::before {
    content: '';
    position: absolute;
    top: 34px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}

.ikx-ps {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 10px;
}

.ikx-ps-num {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 22px;
    font-weight: 800;
    color: var(--navy);
    transition: background .2s, border-color .2s, color .2s;
    position: relative;
    z-index: 1;
}

.ikx-ps:nth-child(1):hover .ikx-ps-num {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.ikx-ps:nth-child(2):hover .ikx-ps-num {
    background: var(--logo-green);
    border-color: var(--logo-green);
    color: #fff;
}

.ikx-ps:nth-child(3):hover .ikx-ps-num {
    background: var(--logo-orange);
    border-color: var(--logo-orange);
    color: #fff;
}

.ikx-ps:nth-child(4):hover .ikx-ps-num {
    background: var(--logo-red);
    border-color: var(--logo-red);
    color: #fff;
}

.ikx-ps:nth-child(5):hover .ikx-ps-num {
    background: var(--logo-yellow);
    border-color: var(--logo-yellow);
    color: #333;
}

.ikx-ps h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin-bottom: 8px !important;
}

.ikx-ps p {
    font-size: 12px !important;
    color: var(--muted) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

/* ════════════════════════════════════════════════
   HOMEPAGE INDUSTRIES (light, linked cards)
════════════════════════════════════════════════ */
.ikx-home-ind-wrap {
    background: var(--surface);
    padding: 80px 48px;
    width: 100%;
}

.ikx-home-ind-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.ikx-home-ind-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.ikx-home-ind-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    text-decoration: none !important;
    display: block;
}

.ikx-home-ind-card:nth-child(4n+1):hover {
    border-color: var(--blue);
    box-shadow: 0 6px 20px rgba(0, 110, 221, .1);
    transform: translateY(-3px);
}

.ikx-home-ind-card:nth-child(4n+2):hover {
    border-color: var(--logo-green);
    box-shadow: 0 6px 20px rgba(58, 170, 53, .12);
    transform: translateY(-3px);
}

.ikx-home-ind-card:nth-child(4n+3):hover {
    border-color: var(--logo-orange);
    box-shadow: 0 6px 20px rgba(245, 166, 35, .12);
    transform: translateY(-3px);
}

.ikx-home-ind-card:nth-child(4n+4):hover {
    border-color: var(--logo-red);
    box-shadow: 0 6px 20px rgba(230, 51, 41, .12);
    transform: translateY(-3px);
}

.ikx-home-ind-card .ico {
    font-size: 34px;
    margin-bottom: 14px;
    display: block;
}

.ikx-home-ind-card h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin-bottom: 6px !important;
}

.ikx-home-ind-card p {
    font-size: 12px !important;
    color: var(--muted) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ════════════════════════════════════════════════
   GLOBAL REACH SECTION
════════════════════════════════════════════════ */
.ikx-global-wrap {
    background: var(--navy);
    padding: 80px 48px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ikx-global-wrap::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 70px solid rgba(0, 110, 221, .12);
}

.ikx-global-inner {
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.ikx-global-inner h2 {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 14px !important;
    line-height: 1.15 !important;
}

.ikx-global-inner>div>p {
    font-size: 16px !important;
    color: rgba(255, 255, 255, .6) !important;
    margin-bottom: 28px !important;
    line-height: 1.75 !important;
}

.ikx-regions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ikx-region-card {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 16px 18px;
    text-decoration: none !important;
    transition: background .15s;
}

.ikx-region-card:hover {
    background: rgba(255, 255, 255, .13);
}

.ikx-region-card .flag {
    font-size: 20px;
    margin-bottom: 6px;
    display: block;
}

.ikx-region-card h4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 3px !important;
}

.ikx-region-card p {
    font-size: 11px !important;
    color: rgba(255, 255, 255, .45) !important;
    margin: 0 !important;
}

.ikx-country-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.ikx-country-tag {
    display: inline-block;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 100px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, .7);
    text-decoration: none !important;
    transition: background .15s;
}

.ikx-country-tag:hover {
    background: rgba(255, 255, 255, .16);
}

.ikx-country-tag.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

/* ════════════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════════════ */
.ikx-testi-wrap {
    background: var(--white);
    padding: 80px 48px;
    width: 100%;
}

.ikx-testi-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.ikx-testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.ikx-testi-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 28px 26px;
    position: relative;
}

.ikx-testi-card::before {
    content: '"';
    position: absolute;
    top: 16px;
    right: 22px;
    font-size: 60px;
    line-height: 1;
    color: var(--blue-lt);
    font-family: Georgia, serif;
}

.ikx-testi-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 14px;
}

.ikx-testi-stars span {
    color: #f0a500;
    font-size: 14px;
}

.ikx-testi-card blockquote {
    font-size: 14px;
    color: var(--text);
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 20px;
    border: none !important;
    padding: 0 !important;
}

.ikx-testi-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ikx-testi-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
}

.ikx-testi-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    display: block;
}

.ikx-testi-role {
    font-size: 12px;
    color: var(--muted);
    display: block;
}

/* ════════════════════════════════════════════════
   RESULTS STRIP
════════════════════════════════════════════════ */
.ikx-results-wrap {
    background: var(--surface);
    padding: 80px 48px;
    width: 100%;
}

.ikx-results-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.ikx-results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ikx-result-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 28px 22px;
    text-align: center;
    border-top: 4px solid var(--blue);
}

.ikx-result-card:nth-child(1) {
    border-top-color: var(--blue);
}

.ikx-result-card:nth-child(2) {
    border-top-color: var(--logo-green);
}

.ikx-result-card:nth-child(3) {
    border-top-color: var(--logo-orange);
}

.ikx-result-card:nth-child(4) {
    border-top-color: var(--logo-red);
}

.ikx-result-card .num {
    font-size: 40px;
    font-weight: 800;
    color: var(--blue);
    display: block;
    line-height: 1;
    margin-bottom: 8px;
}

.ikx-result-card:nth-child(1) .num {
    color: var(--blue);
}

.ikx-result-card:nth-child(2) .num {
    color: var(--logo-green);
}

.ikx-result-card:nth-child(3) .num {
    color: var(--logo-orange);
}

.ikx-result-card:nth-child(4) .num {
    color: var(--logo-red);
}

.ikx-result-card h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin-bottom: 8px !important;
}

.ikx-result-card p {
    font-size: 12px !important;
    color: var(--muted) !important;
    margin: 0 !important;
    line-height: 1.55 !important;
}

/* ════════════════════════════════════════════════
   CASE STUDIES SECTION
════════════════════════════════════════════════ */
.ikx-cs-wrap {
    background: var(--navy);
    padding: 80px 48px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ikx-cs-wrap::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 60px solid rgba(0, 110, 221, .12);
}

.ikx-cs-inner {
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ikx-cs-inner h2 {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 12px !important;
    line-height: 1.15 !important;
}

.ikx-cs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 40px;
}

.ikx-cs-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    overflow: hidden;
    transition: background .2s, transform .2s;
}

.ikx-cs-card:hover {
    background: rgba(255, 255, 255, .1);
    transform: translateY(-4px);
}

.ikx-cs-header {
    padding: 28px 28px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ikx-cs-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 14px;
}

.ikx-cs-tag.green {
    background: rgba(58, 170, 53, .2);
    color: #6ddb68;
}

.ikx-cs-tag.orange {
    background: rgba(245, 166, 35, .2);
    color: #ffc85e;
}

.ikx-cs-tag.blue {
    background: rgba(0, 110, 221, .25);
    color: #7dc7ff;
}

.ikx-cs-tag.red {
    background: rgba(230, 51, 41, .2);
    color: #ff7b74;
}

.ikx-cs-tag.yellow {
    background: rgba(245, 208, 0, .2);
    color: #ffe566;
}

.ikx-cs-header h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 10px !important;
    line-height: 1.35 !important;
}

.ikx-cs-header p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, .55) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.ikx-cs-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ikx-cs-metric {
    padding: 20px 24px;
    border-right: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ikx-cs-metric:nth-child(even) {
    border-right: none;
}

.ikx-cs-metric:nth-last-child(-n+2) {
    border-bottom: none;
}

.ikx-cs-metric .val {
    font-size: 28px;
    font-weight: 800;
    display: block;
    line-height: 1;
    margin-bottom: 5px;
}

.ikx-cs-metric .key {
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
    line-height: 1.4;
    display: block;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ikx-cs-card:nth-child(1) .ikx-cs-metric .val {
    color: #6ddb68;
}

.ikx-cs-card:nth-child(2) .ikx-cs-metric .val {
    color: #ffc85e;
}

.ikx-cs-card:nth-child(3) .ikx-cs-metric .val {
    color: #7dc7ff;
}

.ikx-cs-footer {
    padding: 18px 28px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ikx-cs-company {
    font-size: 12px;
    color: rgba(255, 255, 255, .45);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ikx-cs-company strong {
    color: rgba(255, 255, 255, .75);
    font-weight: 600;
}

.ikx-cs-link {
    font-size: 12px;
    font-weight: 700;
    color: #5bb8ff;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.ikx-cs-link::after {
    content: '→';
}

.ikx-cs-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.ikx-cs-bottom p {
    font-size: 16px !important;
    color: rgba(255, 255, 255, .65) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.ikx-cs-bottom-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   BLOG SECTION
════════════════════════════════════════════════ */
.ikx-blog-wrap {
    background: var(--white);
    padding: 80px 48px;
    width: 100%;
}

.ikx-blog-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.ikx-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.ikx-blog-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
}

.ikx-blog-card:hover {
    box-shadow: 0 8px 28px rgba(9, 48, 91, .1);
    transform: translateY(-3px);
}

.ikx-blog-img {
    height: 180px;
    background: var(--surface2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    flex-shrink: 0;
}

.ikx-blog-body {
    padding: 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ikx-blog-cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 8px;
    display: block;
}

.ikx-blog-card h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
    flex: 1;
}

.ikx-blog-card p {
    font-size: 13px !important;
    color: var(--muted) !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.6 !important;
}

.ikx-blog-read {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}

.ikx-blog-read::after {
    content: '→';
}

/* ════════════════════════════════════════════════
   HOMEPAGE FAQ
════════════════════════════════════════════════ */
.ikx-home-faq-wrap {
    background: var(--surface);
    padding: 80px 48px;
    width: 100%;
}

.ikx-home-faq-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.ikx-home-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ════════════════════════════════════════════════
   HOMEPAGE FINAL CTA
════════════════════════════════════════════════ */
.ikx-home-cta-wrap {
    background: linear-gradient(135deg, var(--navy) 0%, #0a4a8a 100%);
    padding: 100px 48px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.ikx-home-cta-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(0, 110, 221, .2) 0%, transparent 60%);
}

.ikx-home-cta-inner {
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 60px;
    align-items: center;
}

.ikx-home-cta-inner h2 {
    font-size: 40px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 14px !important;
    line-height: 1.15 !important;
}

.ikx-home-cta-inner p {
    font-size: 17px !important;
    color: rgba(255, 255, 255, .62) !important;
    margin: 0 !important;
    line-height: 1.7 !important;
    max-width: 520px;
}

.ikx-home-cta-btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   SILO / INTERNAL LINKS
════════════════════════════════════════════════ */
.ikx-silo-wrap {
    background: var(--surface2);
    padding: 60px 48px;
    border-top: 1px solid var(--border);
    width: 100%;
}

.ikx-silo-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.ikx-silo-inner h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin-bottom: 8px !important;
}

.ikx-silo-inner>p {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 32px;
    line-height: 1.7;
}

.ikx-silo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.ikx-silo-col h4 {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue) !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--blue-lt);
}

.ikx-silo-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.ikx-silo-col ul li a {
    font-size: 13px;
    color: var(--muted);
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .15s;
}

.ikx-silo-col ul li a::before {
    content: '›';
    color: var(--blue);
    font-weight: 700;
}

.ikx-silo-col ul li a:hover {
    color: var(--blue);
}

/* ════════════════════════════════════════════════
   RESPONSIVE — HOMEPAGE ONLY
════════════════════════════════════════════════ */
@media (max-width: 1000px) {
    .ikx-home-hero-inner {
        grid-template-columns: 1fr;
    }

    .ikx-home-hero-inner .ikx-hero-form-panel {
        display: none;
    }

    .ikx-about-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ikx-home-svc-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-tools-cats {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ikx-process-steps {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-process-steps::before {
        display: none;
    }

    .ikx-home-ind-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-global-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ikx-testi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-results-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-blog-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-cs-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-home-cta-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ikx-home-cta-btns {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ikx-silo-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-home-hero,
    .ikx-about-wrap,
    .ikx-home-svc-wrap,
    .ikx-home-process-wrap,
    .ikx-home-ind-wrap,
    .ikx-global-wrap,
    .ikx-testi-wrap,
    .ikx-results-wrap,
    .ikx-cs-wrap,
    .ikx-blog-wrap,
    .ikx-home-faq-wrap,
    .ikx-home-cta-wrap,
    .ikx-silo-wrap,
    .ikx-tools-strip-wrap {
        padding: 60px 24px;
    }
}

@media (max-width: 600px) {
    .ikx-home-svc-grid {
        grid-template-columns: 1fr;
    }

    .ikx-home-ind-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-testi-grid {
        grid-template-columns: 1fr;
    }

    .ikx-results-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-cs-grid {
        grid-template-columns: 1fr;
    }

    .ikx-blog-grid {
        grid-template-columns: 1fr;
    }

    .ikx-home-faq-grid {
        grid-template-columns: 1fr;
    }

    .ikx-silo-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-process-steps {
        grid-template-columns: 1fr;
    }

    .ikx-about-stats {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-regions {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════
   HERO H1 SIZE — service & landing pages
   Controlled size — readable, not overwhelming
════════════════════════════════════════════════ */
.ikx-hero h1 {
    font-size: clamp(28px, 3.2vw, 44px) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -.5px !important;
}

.ikx-hero h1 span {
    font-size: inherit !important;
}

/* ════════════════════════════════════════════════
   INTRO v3  —  2-col split with feat tiles
   Used on service pages instead of .ikx-intro
════════════════════════════════════════════════ */
.ikx-intro-v3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.ikx-intro-v3-left h2 {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--navy) !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
}

.ikx-intro-v3-left p {
    font-size: 15px !important;
    color: var(--muted) !important;
    line-height: 1.8 !important;
    margin-bottom: 16px !important;
}

.ikx-intro-v3-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ikx-feat-tile {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 24px 20px;
    transition: border-color .2s, transform .2s;
}

.ikx-feat-tile:hover {
    border-color: var(--blue);
    transform: translateY(-3px);
}

.ikx-feat-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}

.ikx-feat-tile-icon.bl {
    background: var(--blue-lt);
}

.ikx-feat-tile-icon.gd {
    background: var(--gold-lt);
}

.ikx-feat-tile-icon.nv {
    background: #edf2fa;
}

.ikx-feat-tile-icon.tl {
    background: var(--teal-lt);
}

.ikx-feat-tile h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin-bottom: 6px !important;
}

.ikx-feat-tile p {
    font-size: 13px !important;
    color: var(--muted) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ════════════════════════════════════════════════
   PERSONA CARDS  —  2×2 "Who Is This For" grid
════════════════════════════════════════════════ */
.ikx-persona-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.ikx-persona-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    padding: 32px 28px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: border-color .2s, box-shadow .2s;
}

.ikx-persona-card:hover {
    border-color: var(--blue);
    box-shadow: 0 8px 28px rgba(0, 110, 221, .09);
}

.ikx-persona-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.ikx-persona-icon.bl {
    background: var(--blue-lt);
}

.ikx-persona-icon.gd {
    background: var(--gold-lt);
}

.ikx-persona-icon.nv {
    background: #edf2fa;
}

.ikx-persona-icon.tl {
    background: var(--teal-lt);
}

.ikx-persona-card h4 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin-bottom: 8px !important;
}

.ikx-persona-card p {
    font-size: 14px !important;
    color: var(--muted) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* ════════════════════════════════════════════════
   PRICE CARDS  —  3-col pricing tier cards
════════════════════════════════════════════════ */
.ikx-price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.ikx-price-card {
    border-radius: 18px;
    overflow: hidden;
    border: 1.5px solid var(--border);
    transition: transform .2s, box-shadow .2s;
}

.ikx-price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(9, 48, 91, .12);
}

.ikx-price-head {
    padding: 24px 28px 20px;
    border-bottom: 1px solid var(--border);
}

.ikx-price-card:nth-child(1) .ikx-price-head {
    background: var(--blue-lt);
}

.ikx-price-card:nth-child(2) .ikx-price-head {
    background: var(--gold-lt);
}

.ikx-price-card:nth-child(3) .ikx-price-head {
    background: #fef0ee;
}

.ikx-price-level {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
}

.ikx-price-card:nth-child(1) .ikx-price-level {
    color: var(--blue);
}

.ikx-price-card:nth-child(2) .ikx-price-level {
    color: #a06800;
}

.ikx-price-card:nth-child(3) .ikx-price-level {
    color: #c0392b;
}

.ikx-price-name {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--navy) !important;
    margin: 0 0 10px !important;
}

.ikx-price-amount {
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    color: var(--navy);
    display: block;
    margin-bottom: 2px;
}

.ikx-price-unit {
    font-size: 12px;
    color: var(--muted);
    display: block;
}

.ikx-price-body {
    background: var(--white);
    padding: 24px 28px;
}

.ikx-price-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 14px;
}

.ikx-price-card:nth-child(1) .ikx-price-tag {
    background: var(--blue-lt);
    color: var(--blue);
}

.ikx-price-card:nth-child(2) .ikx-price-tag {
    background: var(--gold-lt);
    color: #7a4800;
}

.ikx-price-card:nth-child(3) .ikx-price-tag {
    background: #fef0ee;
    color: #c0392b;
}

.ikx-price-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.ikx-price-list li {
    font-size: 13px;
    color: var(--text);
    display: flex;
    gap: 8px;
    align-items: flex-start;
    line-height: 1.5;
}

.ikx-price-list li::before {
    content: '✓';
    color: var(--logo-green);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ════════════════════════════════════════════════
   TIMELINE  —  5-step horizontal process
════════════════════════════════════════════════ */
.ikx-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: 52px;
}

.ikx-timeline::before {
    content: '';
    position: absolute;
    top: 27px;
    left: calc(10% + 14px);
    right: calc(10% + 14px);
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--teal));
    z-index: 0;
}

.ikx-tl-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 10px;
}

.ikx-tl-dot {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 20px;
    flex-shrink: 0;
}

.ikx-tl-step:nth-child(1) .ikx-tl-dot {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
}

.ikx-tl-step:nth-child(2) .ikx-tl-dot {
    border-color: var(--logo-green);
    background: var(--logo-green);
    color: #fff;
}

.ikx-tl-step:nth-child(3) .ikx-tl-dot {
    border-color: var(--logo-orange);
    background: var(--logo-orange);
    color: #fff;
}

.ikx-tl-step:nth-child(4) .ikx-tl-dot {
    border-color: var(--logo-red);
    background: var(--logo-red);
    color: #fff;
}

.ikx-tl-step:nth-child(5) .ikx-tl-dot {
    border-color: var(--teal);
    background: var(--teal);
    color: #fff;
}

.ikx-tl-content {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 18px 14px;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}

.ikx-tl-step:hover .ikx-tl-content {
    border-color: var(--blue);
    box-shadow: 0 6px 20px rgba(0, 110, 221, .1);
}

.ikx-tl-content h4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin-bottom: 7px !important;
    line-height: 1.3 !important;
}

.ikx-tl-content p {
    font-size: 12px !important;
    color: var(--muted) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ════════════════════════════════════════════════
   CHECK CARDS  —  2-col numbered checklist
════════════════════════════════════════════════ */
.ikx-check-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 40px;
}

.ikx-check-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 28px 24px;
    transition: border-color .2s;
}

.ikx-check-card:hover {
    border-color: var(--blue);
}

.ikx-check-card-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}

.ikx-check-num {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

.ikx-check-card h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.ikx-check-card p {
    font-size: 13px !important;
    color: var(--muted) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* ════════════════════════════════════════════════
   SECTION BACKGROUND ALTERNATION
   Service page sequence (light sections):
   intro-wrap=white → compliance-wrap=surface →
   process-wrap=white → [checklist uses intro-wrap
   override below] → compliance-wrap 2nd=white →
   ind-wrap=surface2 → why-wrap=white →
   testi-wrap=surface → cs-wrap=navy (unchanged) →
   svc-wrap 2nd=navy (unchanged) →
   resource-wrap=white (override below) →
   faq-wrap=surface2
════════════════════════════════════════════════ */

/* Checklist block sits inside ikx-intro-wrap —
   override to surface so it differs from white intro */
.ikx-intro-wrap.surface-bg {
    background: var(--surface) !important;
}

/* 2nd compliance-wrap (comparison table) → white */
.ikx-compliance-wrap.white-bg {
    background: var(--white) !important;
}

/* Industries — surface2 (slightly deeper blue-tint) */
.ikx-ind-wrap {
    background: var(--surface2) !important;
}

/* Testimonials — surface (not white, differs from why-wrap) */
.ikx-testi-wrap {
    background: var(--surface) !important;
}

/* Resource teaser — white (breaks out of back-to-back navy) */
.ikx-resource-wrap.white-bg {
    background: var(--white) !important;
    padding: 80px 48px !important;
}

/* Resource teaser on white: headings & text need dark colour */
.ikx-resource-wrap.white-bg h2 {
    color: var(--navy) !important;
}

.ikx-resource-wrap.white-bg>.ikx-resource-inner>p {
    color: var(--muted) !important;
}

.ikx-resource-wrap.white-bg .ikx-slbl-dark {
    color: var(--blue) !important;
}

/* FAQ — surface2 to differ from faq-wrap default surface */
.ikx-faq-wrap {
    background: var(--surface2) !important;
}

/* ════════════════════════════════════════════════
   RESPONSIVE — NEW SERVICE-PAGE COMPONENTS
════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .ikx-intro-v3 {
        grid-template-columns: 1fr;
    }

    .ikx-intro-v3-right {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-persona-grid {
        grid-template-columns: 1fr;
    }

    .ikx-price-grid {
        grid-template-columns: 1fr;
    }

    .ikx-check-grid {
        grid-template-columns: 1fr;
    }

    .ikx-timeline {
        grid-template-columns: 1fr 1fr;
    }

    .ikx-timeline::before {
        display: none;
    }
}

@media (max-width: 600px) {
    .ikx-intro-v3-right {
        grid-template-columns: 1fr;
    }

    .ikx-timeline {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════
   RELATED SERVICES background modifier
   Adds a deep teal-navy shade to break from
   back-to-back navy (Client Results → Related)
════════════════════════════════════════════════ */
.ikx-svc-wrap.teal-bg {
    background: linear-gradient(135deg, #06415e 0%, #083d58 100%) !important;
}

/* ════════════════════════════════════════════════
   PROCESS v3  —  accordion-style step cards
   Replaces the timeline for "How We Work"
════════════════════════════════════════════════ */
.ikx-steps-v3 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 48px;
    counter-reset: step-counter;
}

.ikx-step-v3 {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    padding: 28px 20px;
    text-align: center;
    position: relative;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    counter-increment: step-counter;
}

.ikx-step-v3:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 110, 221, .1);
}

.ikx-step-v3:nth-child(1) {
    border-top: 4px solid var(--blue);
}

.ikx-step-v3:nth-child(2) {
    border-top: 4px solid var(--logo-green);
}

.ikx-step-v3:nth-child(3) {
    border-top: 4px solid var(--logo-orange);
}

.ikx-step-v3:nth-child(4) {
    border-top: 4px solid var(--logo-red);
}

.ikx-step-v3:nth-child(5) {
    border-top: 4px solid var(--teal);
}

.ikx-step-v3-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
}

.ikx-step-v3:nth-child(1) .ikx-step-v3-num {
    background: var(--blue);
}

.ikx-step-v3:nth-child(2) .ikx-step-v3-num {
    background: var(--logo-green);
}

.ikx-step-v3:nth-child(3) .ikx-step-v3-num {
    background: var(--logo-orange);
}

.ikx-step-v3:nth-child(4) .ikx-step-v3-num {
    background: var(--logo-red);
}

.ikx-step-v3:nth-child(5) .ikx-step-v3-num {
    background: var(--teal);
}

.ikx-step-v3 h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin-bottom: 10px !important;
    line-height: 1.35 !important;
}

.ikx-step-v3 p {
    font-size: 13px !important;
    color: var(--muted) !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .ikx-steps-v3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .ikx-steps-v3 {
        grid-template-columns: 1fr;
    }
}

/* ── Before vs After section ─────────────────── */
.ikx-bva-wrap {
    background: #fff;
    padding: 80px 48px;
    width: 100%;
}

.ikx-bva-grid {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 0;
    margin-top: 2.5rem;
    align-items: stretch;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.ikx-bva-col {
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
}

.ikx-bva-before {
    border-color: #fce4e3;
    background: #fff8f8;
}

.ikx-bva-after {
    border-color: #d4edda;
    background: #f6fff8;
}

.ikx-bva-header {
    padding: 1rem 1.5rem 0.75rem;
}

.ikx-bva-pill {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ikx-bva-pill.before {
    background: #fce4e3;
    color: #c0392b;
}

.ikx-bva-pill.after {
    background: #d4edda;
    color: #1a7a3c;
}

.ikx-bva-list {
    list-style: none;
    padding: 0.75rem 1.5rem 1.5rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ikx-bva-list li {
    font-size: 0.92rem;
    color: var(--muted);
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    line-height: 1.45;
}

.ikx-bva-before .ikx-bva-list li {
    background: #fff0ef;
    border-left: 3px solid #e74c3c;
}

.ikx-bva-after .ikx-bva-list li {
    background: #edfaf1;
    border-left: 3px solid var(--logo-green);
    color: #1d4a2a;
}

.ikx-bva-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ikx-bva-arrow {
    width: 42px;
    height: 42px;
    background: var(--blue);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 110, 221, 0.3);
    flex-shrink: 0;
}

/* ── Source Material input cards ─────────────── */
.ikx-input-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.ikx-input-card {
    background: var(--surface);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e0eaf5;
    transition: box-shadow 0.2s, transform 0.2s;
}

.ikx-input-card:hover {
    box-shadow: 0 8px 24px rgba(0, 110, 221, 0.1);
    transform: translateY(-3px);
}

.ikx-input-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
}

.ikx-input-card h4 {
    color: var(--navy) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
}

.ikx-input-card p {
    color: var(--muted) !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ── Conversion level cards ───────────────────── */
.ikx-level-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
    align-items: start;
}

.ikx-level-card {
    background: #fff;
    border-radius: 14px;
    padding: 1.75rem;
    border: 2px solid #e0eaf5;
    transition: box-shadow 0.2s;
}

.ikx-level-card-featured {
    border-color: var(--blue);
    box-shadow: 0 8px 32px rgba(0, 110, 221, 0.12);
    position: relative;
    top: -6px;
}

.ikx-level-badge {
    display: inline-block;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    margin-bottom: 0.85rem;
}

.ikx-level-card h3 {
    color: var(--navy) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.6rem !important;
}

.ikx-level-desc {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.ikx-level-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ikx-level-list li {
    font-size: 0.87rem;
    color: #2d4a63;
    padding: 0.3rem 0;
    border-bottom: 1px solid #f0f4f9;
}

.ikx-level-ideal {
    font-size: 0.82rem;
    color: var(--muted);
    background: var(--surface);
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    margin: 0;
    line-height: 1.5;
}

.ikx-level-ideal strong {
    color: var(--navy);
}

/* ── Authoring tools grid ─────────────────────── */
.ikx-tool-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.ikx-tool-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--surface);
    border-radius: 10px;
    padding: 1.25rem;
    border: 1px solid #e0eaf5;
    transition: box-shadow 0.2s, transform 0.2s;
}

.ikx-tool-item:hover {
    box-shadow: 0 6px 20px rgba(0, 110, 221, 0.1);
    transform: translateY(-2px);
}

.ikx-tool-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.ikx-tool-item h4 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin-bottom: 0.3rem !important;
}

.ikx-tool-item p {
    font-size: 0.85rem !important;
    color: var(--muted) !important;
    margin: 0 !important;
    line-height: 1.55 !important;
}

/* ── Process card grid (replaces old timeline) ── */
.ikx-process-timeline-wrap {
    background: var(--navy) !important;
    padding: 80px 48px !important;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ikx-process-timeline-wrap::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    border: 70px solid rgba(0, 110, 221, 0.12);
    pointer-events: none;
}

.ikx-process-timeline-wrap .ikx-inner {
    position: relative;
    z-index: 1;
}

.ikx-proc-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.ikx-proc-card {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.25rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 1.5rem !important;
    transition: background 0.2s, border-color 0.2s;
    box-shadow: none !important;
    text-align: left !important;
}

.ikx-proc-card:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(0, 110, 221, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* Step 5 spans full width */
.ikx-proc-card-wide {
    grid-column: 1 / -1 !important;
}

.ikx-proc-num {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    border-radius: 50% !important;
    background: var(--blue) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 0 4px rgba(0, 110, 221, 0.25);
    flex-shrink: 0;
    margin: 0 !important;
}

.ikx-proc-body {
    flex: 1;
}

.ikx-proc-body h4 {
    color: #fff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
}

.ikx-proc-body p {
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* ── Responsive overrides ─────────────────────── */
@media (max-width: 900px) {
    .ikx-process-timeline-wrap {
        padding: 60px 24px !important;
    }

    .ikx-proc-grid {
        grid-template-columns: 1fr !important;
    }

    .ikx-proc-card-wide {
        grid-column: auto !important;
    }

    .ikx-bva-wrap {
        padding: 60px 24px;
    }

    .ikx-bva-grid {
        grid-template-columns: 1fr;
    }

    .ikx-bva-divider {
        padding: 0.5rem 0;
    }

    .ikx-bva-arrow {
        transform: rotate(90deg);
    }

    .ikx-input-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ikx-level-grid {
        grid-template-columns: 1fr;
    }

    .ikx-level-card-featured {
        top: 0;
    }

    .ikx-tool-logos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ikx-input-grid {
        grid-template-columns: 1fr;
    }

    .ikx-tool-logos {
        grid-template-columns: 1fr;
    }
}