/* KIREAS.GR — single-page site, builds on colors_and_type.css + kit.css ideas
   Backgrounds are warm off-white tinted, never pure white. */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

html { scroll-behavior: smooth; }
html, body {
  background: var(--paper);
  color: var(--fg-default);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background:
    radial-gradient(1200px 800px at 8% -10%, rgba(31, 69, 117, 0.07) 0%, rgba(31, 69, 117, 0) 60%),
    radial-gradient(1000px 700px at 100% 10%, rgba(201, 49, 60, 0.05) 0%, rgba(201, 49, 60, 0) 65%),
    linear-gradient(180deg, #EEF1F6 0%, #E7EBF1 50%, #EEF1F6 100%);
}
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(0deg,  transparent 0 39px, rgba(31, 69, 117, 0.04) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(31, 69, 117, 0.04) 39px 40px);
  mask-image: radial-gradient(ellipse at center, black 0%, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, black 40%, transparent 75%);
}

/* --- Container scale --- */
:root {
  --container-wide: 1320px;
  --container-text: 760px;
  --section-pad-y: 112px;
  --section-pad-x: 36px;
}

/* --- Section scaffold --- */
section { position: relative; }
.k-section { padding: var(--section-pad-y) var(--section-pad-x); }
.k-section-tight { padding: 72px var(--section-pad-x); }
.k-section.tint-paper { background: #F4F6FA; }
.k-section.tint-warm { background: #EEF1F6; }
.k-section.tint-cool { background: #E7EBF1; }
.k-section.tint-sand { background: #E8ECF2; }
.k-section.tint-dark { background: var(--k-navy-900); color: var(--fg-on-inverse); }
.k-section.tint-paper-edge {
  background:
    linear-gradient(180deg, #F4F6FA 0%, #EEF1F6 60%, #E7EBF1 100%);
}
.k-section-inner { max-width: var(--container-wide); margin: 0 auto; }

/* --- Eyebrow / keyline / headings --- */
.k-eyebrow {
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--brand-accent);
  display: inline-flex; align-items: center; gap: 12px;
}
.k-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.k-eyebrow.on-dark { color: var(--k-crimson-400); }

.k-h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(34px, 4vw, 56px); line-height: 1.04; letter-spacing: -0.025em;
  color: var(--k-navy-900); margin: 16px 0 0; text-wrap: balance;
}
.k-h2.on-dark { color: var(--white); }
.k-h2 .period { color: var(--brand-accent); }
.partner-velotic .k-h2 .period { color: var(--velotic-orange); }
.partner-secomea .k-h2 .period { color: var(--secomea-navy); }

.k-lede {
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  color: var(--fg-muted); margin: 22px 0 0; max-width: 680px;
}
.k-lede.on-dark { color: var(--steel-300); }

.k-section-head { max-width: 800px; margin-bottom: 56px; }

/* --- Scroll reveal: section headers drift in from the left (see site/reveal.js) ---
   Driven by a [data-reveal] attribute (NOT a class) so React's re-renders — which
   re-apply className on these elements — never strip the animation state.
   Scoped to no-preference so reduced-motion users never get the hidden start state. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  [data-reveal="init"] {
    opacity: 0;
    transform: translateX(-28px);
  }
  [data-reveal="in"] {
    opacity: 1;
    transform: none;
  }
  /* Solution cards: soft rise + fade. Own transition (removed by JS after reveal
     so the card's native 200ms hover transition takes back over). */
  [data-reveal-card] {
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  [data-reveal-card="init"] {
    opacity: 0;
    transform: translateY(20px);
  }
  [data-reveal-card="in"] {
    opacity: 1;
    transform: none;
  }
}
.k-capabilities {
  margin-bottom: 56px; padding-bottom: 40px;
  border-bottom: 1px solid var(--hairline, rgba(20,30,45,0.10));
  display: flex; gap: 32px; align-items: baseline; flex-wrap: wrap;
}
.k-cap-label {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brand-accent); flex: none; padding-top: 7px;
}
.k-cap-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px; flex: 1; min-width: 280px;
}
.k-cap-chip {
  font-family: var(--font-body); font-size: 13.5px; color: var(--k-navy-900);
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 999px; padding: 8px 16px;
  transition: border-color 180ms ease, color 180ms ease;
}
.k-cap-chip:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
@media (max-width: 720px) { .k-capabilities { flex-direction: column; gap: 14px; } }
.k-why-lede { max-width: 720px; margin: 0 0 40px; }
.k-disciplines-label { display: block; margin-bottom: 14px; }
.k-section-head.split {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px;
  max-width: 100%; align-items: end;
}
.k-section-head.split .k-lede { margin: 0; }

/* --- Buttons --- */
.k-btn {
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  padding: 13px 22px; border-radius: 4px; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 10px; line-height: 1;
  transition: all 160ms ease;
  cursor: pointer;
}
.k-btn .arrow { font-family: var(--font-mono); font-weight: 400; transition: transform 160ms ease; }
.k-btn:hover .arrow { transform: translateX(3px); }
.k-btn-primary { background: var(--k-navy-700); color: var(--white); }
.k-btn-primary:hover { background: var(--k-navy-800); }
.k-btn-accent { background: var(--k-crimson-600); color: var(--white); }
.k-btn-accent:hover { background: var(--k-crimson-700); }
.k-btn-ghost { background: transparent; color: var(--k-navy-900); border-color: var(--steel-300); }
.k-btn-ghost:hover { background: rgba(10,23,41,0.04); border-color: var(--k-navy-600); }
.k-btn-on-dark {
  background: rgba(255,255,255,0.08); color: var(--white);
  border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(6px);
}
.k-btn-on-dark:hover { background: rgba(255,255,255,0.16); }
.k-btn-lg { font-size: 15.5px; padding: 16px 26px; }

/* ===========================================================
   HEADER  — dark plate with pill-style nav
   =========================================================== */
.k-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--k-navy-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.92);
}
.k-header-inner {
  max-width: var(--container-wide); margin: 0 auto;
  padding: 14px 28px; display: flex; align-items: center; gap: 32px;
}
.k-header-logo {
  display: inline-flex; align-items: center;
  text-decoration: none; border: 0; outline: none;
  background: transparent; flex-shrink: 0;
}
.k-header-logo:hover,
.k-header-logo:focus { background: transparent; text-decoration: none; }
.k-header-logo img {
  height: 40px; width: auto; display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
}
.k-header-logo .klogo {
  font-size: 15.4px; /* mark = 2.6em ≈ 40px, matching the prior lockup height */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
}

/* ===========================================================
   KIREAS vector lockup (KLogo) — mark + Sora word + JBM tag
   =========================================================== */
.klogo {
  --mark-ink: #FFFFFF; --mark-red: #ED434B;
  display: inline-flex; align-items: center; gap: 0.16em;
  line-height: 1; white-space: nowrap;
}
.klogo--reverse { --mark-ink: #FFFFFF; }
.klogo--navy    { --mark-ink: #1A3A63; }
.klogo-mark-wrap { display: inline-flex; flex: none; line-height: 0; }
.klogo-mark { height: 2.6em; width: auto; display: block; overflow: visible; }
.klogo .v-ink { fill: var(--mark-ink); }
.klogo .v-red { fill: var(--mark-red); }
.klogo .r-ink { fill: none; stroke: var(--mark-ink); stroke-width: 16; stroke-linecap: round; }
.klogo .r-red { fill: none; stroke: var(--mark-red); stroke-width: 16; stroke-linecap: round; }
.klogo-text { display: flex; flex-direction: column; align-items: flex-start; }
.klogo-word {
  font-family: 'Sora', var(--font-display); font-weight: 300;
  font-size: 1em; line-height: 0.95; letter-spacing: 0.24em;
  color: var(--mark-ink);
}
.klogo-tag {
  font-family: 'JetBrains Mono', var(--font-mono); font-weight: 400;
  font-size: 0.4em; line-height: 1; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mark-red);
  margin-top: 0.62em; white-space: nowrap;
}
/* Tone-aware tagline colour for AA contrast: lighter crimson on dark,
   deeper crimson on light (the bright rotor red is kept on the mark itself). */
.klogo--reverse .klogo-tag { color: #E8717A; }
.klogo--navy .klogo-tag { color: var(--k-crimson-600); }
.k-header-nav {
  display: flex; align-items: center; gap: 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.k-header-nav a {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease;
  white-space: nowrap;
}
.k-header-nav a::after { content: none !important; }
.k-header-nav a:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
}
.k-header-nav a.active {
  color: #FFFFFF;
  background: var(--brand-accent);
  box-shadow: none;
}
.k-header-right {
  margin-left: auto; display: flex; align-items: center; gap: 14px;
  flex-shrink: 0;
}
.k-header-phone {
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.k-header-phone:hover { color: #FFFFFF; }

/* Language switcher — compact segmented pill on the dark plate */
.k-lang {
  display: inline-flex; align-items: center;
  padding: 2px; gap: 2px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  flex-shrink: 0;
}
.k-lang-opt {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.58);
  padding: 4px 9px; border-radius: 999px;
  line-height: 1; cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.k-lang-opt:hover { color: #FFFFFF; }
.k-lang-opt.active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.16);
}

/* Header buttons — on-dark variants */
.k-header .k-btn-ghost {
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}
.k-header .k-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.30);
  color: #FFFFFF;
}
.k-header .k-btn-primary {
  background: var(--brand-accent);
  color: #FFFFFF;
  border-color: transparent;
  white-space: nowrap;
}
.k-header .k-btn-primary:hover {
  background: var(--k-crimson-700, #B12832);
}
.k-header-burger { color: #FFFFFF; }
.k-header-burger span { background: #FFFFFF; }
.k-header-burger:hover { background: rgba(255,255,255,0.10); }

/* ===========================================================
   MOBILE HEADER — burger + slide-in drawer
   =========================================================== */
.k-header-burger {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; border-radius: 4px;
  transition: background 120ms ease;
}
.k-header-burger:hover { background: rgba(10,23,41,0.06); }
.k-header-burger span {
  display: block; width: 22px; height: 2px; background: var(--fg-default);
  border-radius: 1px;
  transition: transform 200ms ease, opacity 200ms ease;
}
.k-header-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.k-header-burger.open span:nth-child(2) { opacity: 0; }
.k-header-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.k-mobile-drawer {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10,23,41,0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}
.k-mobile-drawer.open { opacity: 1; pointer-events: auto; }
.k-mobile-panel {
  position: absolute; top: 64px; left: 0; right: 0;
  background: var(--paper);
  padding: 24px 28px 36px;
  border-bottom: 1px solid rgba(10,23,41,0.08);
  box-shadow: 0 24px 60px rgba(10,23,41,0.18);
  transform: translateY(-12px);
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.k-mobile-drawer.open .k-mobile-panel { transform: translateY(0); }
.k-mobile-nav { display: flex; flex-direction: column; }
.k-mobile-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  color: var(--k-navy-900); letter-spacing: -0.01em;
  transition: color 120ms ease;
}
.k-mobile-nav a:hover { color: var(--k-navy-700); }
.k-mobile-nav a.active { color: var(--brand-accent); }
.k-mobile-nav a svg { width: 18px; height: 18px; stroke-width: 1.75; color: var(--fg-subtle); }
.k-mobile-actions {
  display: flex; flex-direction: column; gap: 14px; margin-top: 24px;
}
.k-mobile-actions .k-btn { width: 100%; justify-content: center; }
.k-mobile-phone {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; color: var(--fg-muted);
  padding: 12px 0; justify-content: center;
}
.k-mobile-phone svg { width: 16px; height: 16px; stroke-width: 1.75; }

@media (max-width: 1180px) {
  .k-header-phone { display: none; }
}
@media (max-width: 920px) {
  .k-header-inner { gap: 16px; padding: 12px 20px; }
  .k-header-nav { display: none; }
  .k-header-phone { display: none; }
  .k-btn-maturity { display: none; }
  .k-btn-contact { display: none; }
  .k-btn-cta { display: none; }
  .k-header-burger { display: inline-flex; }
}

/* ===========================================================
   HERO
   =========================================================== */
.k-hero {
  position: relative; min-height: 720px; overflow: hidden;
  background: var(--k-navy-950);
}
.k-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(0.75) contrast(1.08) brightness(0.78);
}
.k-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,14,28,0.55) 0%, rgba(6,14,28,0.30) 30%, rgba(6,14,28,0.92) 100%),
    linear-gradient(90deg, rgba(6,14,28,0.62) 0%, rgba(6,14,28,0) 65%);
}
.k-hero-grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,0.025) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,0.025) 47px 48px);
  mix-blend-mode: overlay; pointer-events: none;
}
.k-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--container-wide); margin: 0 auto;
  padding: 110px 28px 64px;
  display: flex; flex-direction: column; gap: 80px;
  min-height: 720px;
  justify-content: space-between;
}
.k-hero-text { max-width: 1000px; }
.k-hero-eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--k-crimson-500);
  display: inline-flex; align-items: center; gap: 14px;
}
.k-hero-eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--k-crimson-500); }
.k-hero-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(48px, 7vw, 104px); line-height: 0.96; letter-spacing: -0.03em;
  color: var(--white); margin: 22px 0 0; text-wrap: balance;
}
.k-hero-title .period { color: var(--k-crimson-500); }
.k-hero-lead {
  font-family: var(--font-body); font-size: 20px; line-height: 1.5;
  color: rgba(255,255,255,0.86); margin: 28px 0 0; max-width: 660px;
}
.k-hero-outcome {
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  color: rgba(255,255,255,0.62); margin: 16px 0 0; max-width: 620px;
  padding-left: 16px; border-left: 2px solid var(--k-crimson-600);
}
.k-hero-ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

.k-hero-foot {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px;
  align-items: end; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.k-hero-stats { display: flex; gap: 32px; flex-wrap: wrap; align-items: stretch; }
.k-hero-stat {
  display: flex; flex-direction: column; gap: 4px;
  position: relative; cursor: help; outline: none;
  padding: 6px 14px 6px 0;
}
.k-hero-stat::after {
  /* Subtle dotted-underline cue that the stat has a source on hover/focus */
  content: ""; position: absolute; left: 0; right: 14px; bottom: -2px;
  height: 1px; background: rgba(255,255,255,0.18);
  border-bottom: 1px dotted rgba(255,255,255,0.35);
}
.k-hero-stat-n { display: inline-flex; align-items: baseline; gap: 4px; }
.k-hero-stat-badge {
  display: inline-flex; align-self: flex-start; align-items: center;
  margin-top: 6px; padding: 3px 9px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}
.k-hero-stat-n .unit {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 0.32em; color: var(--k-crimson-500);
  letter-spacing: 0.06em; margin-left: 4px; text-transform: lowercase;
}
.k-hero-cert {
  position: relative; cursor: help; outline: none;
  display: inline-flex; align-items: center; gap: 12px;
  align-self: center; padding: 10px 16px 10px 14px;
  border: 1px solid rgba(255,255,255,0.22);
  border-left: 3px solid var(--k-crimson-500);
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
}
.k-hero-cert-mark {
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; line-height: 0.96; letter-spacing: 0.02em;
  color: var(--white);
}
.k-hero-cert-l {
  font-family: var(--font-mono); font-size: 10px; line-height: 1.35;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.k-hero-stat-src {
  position: absolute; left: 0; bottom: calc(100% + 14px);
  background: var(--k-navy-950); color: rgba(255,255,255,0.92);
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.5;
  padding: 12px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.12);
  width: 280px; max-width: 280px;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 5; box-shadow: 0 12px 36px rgba(0,0,0,0.4);
}
.k-hero-stat-src::after {
  content: ""; position: absolute; left: 22px; bottom: -6px;
  width: 12px; height: 12px; background: var(--k-navy-950);
  border-right: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  transform: rotate(45deg);
}
.k-hero-stat:hover .k-hero-stat-src,
.k-hero-stat:focus-visible .k-hero-stat-src,
.k-hero-cert:hover .k-hero-stat-src,
.k-hero-cert:focus-visible .k-hero-stat-src {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.k-hero-stat-n {
  font-family: var(--font-display); font-weight: 600; font-size: 38px;
  color: var(--white); letter-spacing: -0.025em; line-height: 1;
  font-feature-settings: "tnum", "zero";
}
.k-hero-stat-l {
  font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.72);
  max-width: 200px; line-height: 1.4;
}
.k-hero-live {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 18px; background: rgba(6,14,28,0.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 4px;
  width: max-content; margin-left: auto;
}
.k-hero-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--sig-online);
  box-shadow: 0 0 0 4px rgba(45,180,122,0.22);
}
.k-hero-live-text {
  font-family: var(--font-mono); font-size: 12px; color: var(--white);
  letter-spacing: 0.06em;
}

/* ===========================================================
   MATURITY EXPLORER CTA BANNER + MODAL
   =========================================================== */
.k-mx-banner {
  margin: 0 auto; max-width: var(--container-wide);
  padding: 28px;
  margin-top: -56px; position: relative; z-index: 5;
}
.k-mx-card {
  display: grid; grid-template-columns: 1fr auto; gap: 36px;
  align-items: center;
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 8px; padding: 28px 32px;
  box-shadow: 0 20px 60px rgba(10,23,41,0.14), 0 0 0 1px rgba(10,23,41,0.04);
}
.k-mx-card-left { display: flex; flex-direction: column; gap: 6px; }
.k-mx-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand-accent);
}
.k-mx-title {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  color: var(--k-navy-900); letter-spacing: -0.01em; line-height: 1.2;
}
.k-mx-sub {
  font-family: var(--font-body); font-size: 13.5px; color: var(--fg-muted);
  line-height: 1.5; max-width: 720px;
}
.k-mx-card-right { display: flex; align-items: center; gap: 14px; }
.k-mx-meta {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--fg-subtle); text-transform: uppercase; text-align: right;
}
.k-mx-meta strong { color: var(--fg-default); font-weight: 700; }

.k-mx-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6, 14, 28, 0.72); backdrop-filter: blur(4px);
  display: flex; align-items: stretch; justify-content: stretch;
  animation: kmxFade 200ms ease;
}
@keyframes kmxFade { from { opacity: 0; } to { opacity: 1; } }
.k-mx-frame {
  position: relative; width: 100%; height: 100%;
  background: var(--paper);
  display: flex; flex-direction: column;
}
.k-mx-frame-top {
  position: absolute; top: 12px; right: 16px; z-index: 5;
  display: flex; gap: 8px;
}
.k-mx-close {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  background: var(--white); color: var(--k-navy-900);
  border: 1px solid var(--border-strong); border-radius: 4px;
  padding: 8px 14px; cursor: pointer;
}
.k-mx-close:hover { background: var(--k-navy-900); color: var(--white); }
.k-mx-frame iframe { width: 100%; height: 100%; border: 0; flex: 1; }

/* ===========================================================
   SERVICES / WHAT WE DO
   =========================================================== */
.k-services {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 8px;
}
.k-service {
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 6px; padding: 22px 22px;
  display: flex; flex-direction: column; gap: 9px;
  position: relative; overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.k-service:hover { transform: translateY(-2px); border-color: var(--steel-300); box-shadow: var(--shadow-2); }
.k-service-n {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle);
  letter-spacing: 0.1em;
}
.k-service-title {
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  color: var(--k-navy-900); letter-spacing: -0.01em; line-height: 1.2;
  text-wrap: balance;
}
.k-service-body {
  font-family: var(--font-body); font-size: 13.5px; color: var(--fg-muted);
  line-height: 1.5;
}
.k-service-stack {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--fg-subtle); padding-top: 14px; margin-top: auto;
  border-top: 1px solid var(--border-subtle);
}
.k-service-stack strong { color: var(--brand-accent); font-weight: 500; }

@media (max-width: 980px) { .k-services { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .k-services { grid-template-columns: 1fr; } }

/* ===========================================================
   SOLUTIONS
   =========================================================== */
.k-solutions {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.k-solution {
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 6px; padding: 22px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left; position: relative;
  min-height: 220px;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
/* Cards stay visually clean (their accent strip is bounded by top:0 left:0),
   so dropping overflow:hidden lets the Insight hover popup escape the card. */
.k-solution.has-popup { isolation: isolate; }
.k-solution.has-popup:hover { z-index: 20; }
.k-solution:hover { transform: translateY(-2px); border-color: var(--steel-300); box-shadow: var(--shadow-2); }
.k-solution::after {
  content: ""; position: absolute; top: 0; left: 0; width: 0; height: 3px;
  background: var(--brand-accent); transition: width 240ms ease;
}
.k-solution:hover::after { width: 100%; }
.k-solution.partner-velotic::after { background: var(--velotic-orange); }
.k-solution.partner-secomea::after { background: var(--secomea-navy); }

.k-solution-top { display: flex; justify-content: space-between; align-items: center; }
.k-solution-n { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); letter-spacing: 0.08em; }
.k-solution-icon-wrap {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--steel-50); color: var(--k-navy-700); border-radius: 4px;
}
.k-solution-icon { width: 18px; height: 18px; }
.k-solution-cat {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand-accent); margin-top: 14px;
}
.k-solution.partner-velotic .k-solution-cat { color: var(--velotic-orange); }
.k-solution.partner-secomea .k-solution-cat { color: var(--secomea-navy); }
.k-solution-name {
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  color: var(--k-navy-900); letter-spacing: -0.01em; line-height: 1.2;
}
.k-solution-stack {
  font-family: var(--font-body); font-size: 12.5px; color: var(--fg-muted);
  margin-top: auto; line-height: 1.5; padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

/* Purpose-led copy on each solution card (replaces vendor/software stack) */
.k-solution-purpose {
  font-family: var(--font-body); font-size: 13.5px; color: var(--fg-muted);
  margin-top: 8px; line-height: 1.55;
  flex: 1;
}

/* ===========================================================
   SOLUTION HOVER POPUP — appears centered over the card, edge columns
   clamp inward so it never overflows the grid, and the top row flips
   BELOW the card so it never hides the section heading or slides under
   the sticky header. Diagrams stay full-width and legible.
   =========================================================== */
.k-solution-popup {
  position: absolute;
  left: 50%; right: auto;
  bottom: calc(100% + 12px); top: auto;
  width: min(340px, 86vw);
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow:
    0 18px 38px -14px rgba(10, 23, 41, 0.28),
    0 2px 4px -2px rgba(10, 23, 41, 0.08);
  padding: 16px 18px 14px;
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 8;
}
/* Tail — points DOWN at the card (popup sits above) */
.k-solution-popup::after {
  content: ""; position: absolute;
  bottom: -6px; top: auto; left: 50%; right: auto; margin-left: -6px;
  width: 12px; height: 12px;
  background: var(--white);
  border: 0 solid var(--border-default);
  border-right-width: 1px; border-bottom-width: 1px;
  transform: rotate(45deg);
}
.k-solution.has-popup:hover .k-solution-popup,
.k-solution-popup:hover {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ── 4-column layout: clamp edge columns + flip the top row below ── */
@media (min-width: 1081px) {
  /* Left column (1, 5, 9) → anchor to the card's left edge */
  .k-solutions > .k-solution:nth-child(4n+1) .k-solution-popup {
    left: 0; right: auto; transform: translateY(8px);
  }
  .k-solutions > .k-solution:nth-child(4n+1).has-popup:hover .k-solution-popup,
  .k-solutions > .k-solution:nth-child(4n+1) .k-solution-popup:hover {
    transform: translateY(0);
  }
  .k-solutions > .k-solution:nth-child(4n+1) .k-solution-popup::after {
    left: 34px; margin-left: 0;
  }
  /* Right column (4, 8) → anchor to the card's right edge */
  .k-solutions > .k-solution:nth-child(4n) .k-solution-popup {
    left: auto; right: 0; transform: translateY(8px);
  }
  .k-solutions > .k-solution:nth-child(4n).has-popup:hover .k-solution-popup,
  .k-solutions > .k-solution:nth-child(4n) .k-solution-popup:hover {
    transform: translateY(0);
  }
  .k-solutions > .k-solution:nth-child(4n) .k-solution-popup::after {
    left: auto; right: 34px; margin-left: 0;
  }
}

.k-pop-eyebrow {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-subtle);
  display: inline-flex; align-items: center; gap: 8px;
}
.k-pop-eyebrow::before {
  content: ""; width: 18px; height: 1px; background: var(--brand-accent);
}
.k-pop-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 15.5px; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--k-navy-900);
  margin: 6px 0 0;
}
.k-pop-title .period { color: var(--brand-accent); }
.k-pop-foot {
  font-family: var(--font-body); font-size: 12px;
  color: var(--fg-muted); line-height: 1.5;
  margin: 10px 0 0;
}

/* Diagram */
.k-pop-svg {
  display: block;
  width: 100%; height: auto;
  margin: 12px 0 4px;
  overflow: visible;
}
.k-pop-svg .level {
  font-family: var(--font-mono); font-size: 7.5px;
  font-weight: 500; letter-spacing: 0.1em;
  fill: var(--fg-subtle);
}
.k-pop-svg .label {
  font-family: var(--font-mono); font-size: 8px;
  font-weight: 600; letter-spacing: 0.12em;
  fill: var(--k-navy-900);
}
.k-pop-svg .node {
  fill: var(--white);
  stroke: var(--k-navy-700); stroke-width: 1.4;
}
.k-pop-svg .node-final {
  stroke: var(--brand-accent); stroke-width: 1.6;
}
.k-pop-svg .node-mid {
  stroke: var(--k-navy-900); stroke-width: 1.6;
}
.k-pop-svg .node-inner { fill: var(--k-navy-700); }

/* Glyph icons inside each node */
.k-pop-svg .glyph {
  fill: none;
  stroke: var(--k-navy-700);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.k-pop-svg .glyph-final {
  stroke: var(--brand-accent);
  stroke-width: 1.4;
}
.k-pop-svg .glyph-mid {
  stroke: var(--k-navy-900);
  stroke-width: 1.4;
}
.k-pop-svg .glyph-stroke-fill { fill: var(--white); }
.k-pop-svg .glyph-soft {
  opacity: 0.55;
  stroke-width: 1.1;
}
.k-pop-svg .glyph-dot {
  fill: var(--k-navy-700);
  stroke: none;
}
.k-pop-svg .glyph-dot-mid {
  fill: var(--k-navy-900);
  stroke: none;
}
.k-pop-svg .glyph-bolt-mid {
  fill: var(--brand-accent);
  stroke: none;
}
.k-pop-svg .connector {
  stroke: var(--brand-accent); stroke-width: 1.4; fill: none;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
  animation: kPopFlow 1.1s linear infinite;
  opacity: 0.85;
}
@keyframes kPopFlow {
  to { stroke-dashoffset: -16; }
}

/* ===========================================================
   ENERGY IQ POPUP — 24h demand / load profile.
   A filled demand curve reveals left→right, a base-load line
   sits beneath it and a peak-demand marker pings. Reads as
   energy monitoring, not a flow diagram.
   =========================================================== */
.k-pop-energy .egrad-top { stop-color: var(--k-navy-500); stop-opacity: 0.34; }
.k-pop-energy .egrad-bot { stop-color: var(--k-navy-500); stop-opacity: 0.02; }

.k-pop-energy .e-axis { stroke: var(--steel-300); stroke-width: 1; }
.k-pop-energy .e-baseload {
  stroke: var(--steel-400); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.8;
}
.k-pop-energy .e-area  { fill: url(#kEnergyFill); }
.k-pop-energy .e-trace {
  fill: none; stroke: var(--k-navy-700); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.k-pop-energy .e-peak {
  fill: var(--brand-accent); stroke: var(--white); stroke-width: 1.4;
  opacity: 0; transform-box: fill-box; transform-origin: center;
}
.k-pop-energy .e-peak-ping {
  fill: none; stroke: var(--brand-accent); stroke-width: 1.4;
  opacity: 0; transform-box: fill-box; transform-origin: center;
}
.k-pop-energy .e-tag {
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.08em;
}
.k-pop-energy .e-peak-tag { fill: var(--brand-accent); opacity: 0; }
.k-pop-energy .e-baseload-tag { fill: var(--fg-subtle); font-weight: 600; }
.k-pop-energy .e-axis-label {
  font-family: var(--font-mono); font-size: 7.5px; font-weight: 600;
  letter-spacing: 0.06em; fill: var(--fg-subtle);
}
.k-pop-energy .e-total-num {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  fill: var(--k-navy-900);
}
.k-pop-energy .e-total-sub {
  font-family: var(--font-mono); font-size: 7.5px; font-weight: 600;
  letter-spacing: 0.08em; fill: var(--fg-subtle);
}
.k-pop-energy .energy-reveal {
  transform-box: view-box; transform-origin: 28px 0; transform: scaleX(0);
}

/* Reveal on hover */
.solution-energy.has-popup:hover .energy-reveal {
  animation: kEnergyReveal 1.15s cubic-bezier(0.45, 0, 0.2, 1) forwards;
}
.solution-energy.has-popup:hover .e-peak,
.solution-energy.has-popup:hover .e-peak-tag {
  animation: kPredFadeFull 0.4s ease forwards 0.72s;
}
.solution-energy.has-popup:hover .e-peak-ping {
  animation: kEnergyPing 1.9s ease-out 0.8s infinite;
}
@keyframes kEnergyReveal { to { transform: scaleX(1); } }
@keyframes kEnergyPing {
  0%        { opacity: 0.5; transform: scale(0.7); }
  70%, 100% { opacity: 0;   transform: scale(3); }
}
@media (prefers-reduced-motion: reduce) {
  .k-pop-energy .energy-reveal { transform: scaleX(1); }
  .k-pop-energy .e-peak, .k-pop-energy .e-peak-tag { opacity: 1; }
  .k-pop-energy .e-peak-ping { display: none; }
  .solution-energy.has-popup:hover .energy-reveal,
  .solution-energy.has-popup:hover .e-peak,
  .solution-energy.has-popup:hover .e-peak-tag { animation: none; }
}

/* ===========================================================
   REMOTE+ POPUP — allow / deny boundary (not a flow pipe).
   An authorised engineer is ALLOWED through the gateway to the
   assets (green, connection completes); an unknown actor is
   BLOCKED at the boundary (red, stopped). The decision is the point.
   =========================================================== */
.k-pop-remote .r-gateway {
  fill: var(--k-crimson-50, #FBEEEC); stroke: var(--brand-accent); stroke-width: 1.8;
}
.k-pop-remote .r-gateway-seam {
  stroke: var(--brand-accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.55;
}
.k-pop-remote .r-gateway-label {
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.1em; fill: var(--brand-accent);
}
.k-pop-remote .label { fill: var(--k-navy-900); }
.k-pop-remote .r-label-block { fill: var(--sig-fault); }

/* Nodes */
.k-pop-remote .node { fill: var(--white); stroke-width: 1.5; }
.k-pop-remote .r-node-allow { stroke: var(--sig-online); }
.k-pop-remote .r-node-block { stroke: var(--sig-fault); }
.k-pop-remote .r-node-asset { stroke: var(--k-navy-700); }
.k-pop-remote .r-glyph-allow { stroke: var(--sig-online); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.k-pop-remote .r-glyph-allow .glyph-stroke-fill { fill: var(--white); }
.k-pop-remote .r-glyph-block { stroke: var(--sig-fault); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.k-pop-remote .r-glyph-block .glyph-stroke-fill { fill: var(--white); }
.k-pop-remote .r-glyph-asset { stroke: var(--k-navy-700); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.k-pop-remote .r-glyph-asset .glyph-stroke-fill { fill: var(--white); }

/* Connection paths — drawn on, not flowing */
.k-pop-remote .r-path {
  fill: none; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 90; stroke-dashoffset: 90;
}
.k-pop-remote .r-allow-in, .k-pop-remote .r-allow-out { stroke: var(--sig-online); }
.k-pop-remote .r-block-in {
  stroke: var(--sig-fault); stroke-dasharray: 5 4; stroke-dashoffset: 0; opacity: 0.9;
}

/* Verdict badges */
.k-pop-remote .r-verdict { opacity: 0; }
.k-pop-remote .r-verdict-bg { stroke: var(--white); stroke-width: 1.4; }
.k-pop-remote .r-allow-bg { fill: var(--sig-online); }
.k-pop-remote .r-block-bg { fill: var(--sig-fault); }
.k-pop-remote .r-allow-check {
  fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.k-pop-remote .r-block-x {
  fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round;
}
.k-pop-remote .r-block-bar { stroke: var(--sig-fault); stroke-width: 2.4; stroke-linecap: round; }

/* Reveal sequence on hover */
.solution-remote.has-popup:hover .r-allow-in {
  animation: kRemoteDraw 0.5s ease forwards 0.15s;
}
.solution-remote.has-popup:hover .r-verdict-allow {
  animation: kPredFadeFull 0.35s ease forwards 0.62s;
}
.solution-remote.has-popup:hover .r-allow-out {
  animation: kRemoteDraw 0.5s ease forwards 0.78s;
}
.solution-remote.has-popup:hover .r-node-asset {
  animation: kRemoteAssetOn 0.4s ease forwards 1.2s;
}
.solution-remote.has-popup:hover .r-block-in {
  animation: kRemoteBlockAdvance 0.5s ease forwards 0.4s;
}
.solution-remote.has-popup:hover .r-verdict-block {
  animation: kRemoteBlockPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.85s;
}
@keyframes kRemoteDraw { to { stroke-dashoffset: 0; } }
@keyframes kRemoteAssetOn {
  to { stroke: var(--sig-online); }
}
@keyframes kRemoteBlockAdvance {
  from { stroke-dashoffset: 90; opacity: 0.9; }
  to   { stroke-dashoffset: 0;  opacity: 0.9; }
}
@keyframes kRemoteBlockPop {
  0%   { opacity: 0; }
  40%  { opacity: 1; transform: translateX(0); }
  55%  { transform: translateX(-1.5px); }
  70%  { transform: translateX(1.5px); }
  85%  { transform: translateX(-1px); }
  100% { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .k-pop-remote .r-path { stroke-dashoffset: 0; }
  .k-pop-remote .r-verdict { opacity: 1; }
  .k-pop-remote .r-node-asset { stroke: var(--sig-online); }
  .solution-remote.has-popup:hover .r-path,
  .solution-remote.has-popup:hover .r-verdict,
  .solution-remote.has-popup:hover .r-node-asset { animation: none; }
}
/* Travelling dots are no longer used in the converging diagram, but the
   keyframes below are retained in case future cards reuse them. */
.k-pop-svg .dot {
  fill: var(--brand-accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: kPopTravel 2.6s ease-in-out infinite;
  opacity: 0;
}
.k-pop-svg .dot-2 { animation-delay: 1.3s; }
@keyframes kPopTravel {
  0%   { transform: translateX(0);     opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(225px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .k-pop-svg .connector { animation: none; opacity: 0.5; }
  .k-pop-svg .dot       { animation: none; opacity: 0; }
}

/* ===========================================================
   PREDICT POPUP — signal chart (NOT a flow diagram).
   A condition trace draws on, drifts toward the failure
   threshold, and Predict drops an early-warning marker well
   before the alarm would trip. One-shot reveal per hover —
   no looping "flow", unlike the other four solution popups.
   =========================================================== */
.k-pop-chart { margin: 16px 0 6px; }

.k-pop-chart .axis {
  stroke: var(--steel-300); stroke-width: 1;
}
/* Healthy operating band */
.k-pop-chart .band {
  fill: var(--sig-online); opacity: 0.12;
}
/* The alarm line — where reactive maintenance would finally trip */
.k-pop-chart .threshold {
  stroke: var(--sig-fault); stroke-width: 1.2;
  stroke-dasharray: 5 4; opacity: 0.85;
}
/* Condition trace */
.k-pop-chart .trace {
  fill: none;
  stroke: var(--k-navy-700); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
/* Early-warning vertical guide */
.k-pop-chart .warn-line {
  stroke: var(--sig-warning); stroke-width: 1.2;
  stroke-dasharray: 3 3; opacity: 0;
}
/* Expanding ping ring behind the marker */
.k-pop-chart .warn-ping {
  fill: none; stroke: var(--sig-warning); stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
/* The marker itself */
.k-pop-chart .warn-dot {
  fill: var(--sig-warning); stroke: var(--white); stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.k-pop-chart .chart-tag {
  font-family: var(--font-mono); font-size: 8px;
  font-weight: 600; letter-spacing: 0.1em;
  fill: var(--fg-subtle);
}
.k-pop-chart .threshold-tag { fill: var(--sig-fault); }
.k-pop-chart .warn-tag { fill: #9A6A00; opacity: 0; }

/* ── Reveal sequence — triggered on card hover (popup is visible) ── */
.solution-predict.has-popup:hover .trace {
  animation: kPredDraw 1.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.solution-predict.has-popup:hover .warn-line {
  animation: kPredFade 0.45s ease forwards 0.7s;
}
.solution-predict.has-popup:hover .warn-tag {
  animation: kPredFadeFull 0.45s ease forwards 0.82s;
}
.solution-predict.has-popup:hover .warn-dot {
  animation: kPredPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.72s,
             kPredDotPulse 1.9s ease-in-out 1.25s infinite;
}
.solution-predict.has-popup:hover .warn-ping {
  animation: kPredPing 1.9s ease-out 1.25s infinite;
}

@keyframes kPredDraw   { to { stroke-dashoffset: 0; } }
@keyframes kPredFade   { from { opacity: 0; } to { opacity: 0.85; } }
@keyframes kPredFadeFull { from { opacity: 0; } to { opacity: 1; } }
@keyframes kPredPop {
  0%   { opacity: 0; transform: scale(0.2); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes kPredDotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.22); }
}
@keyframes kPredPing {
  0%        { opacity: 0.5; transform: scale(0.7); }
  70%, 100% { opacity: 0;   transform: scale(2.8); }
}

@media (prefers-reduced-motion: reduce) {
  .k-pop-chart .trace { stroke-dashoffset: 0; }
  .k-pop-chart .warn-line { opacity: 0.85; }
  .k-pop-chart .warn-dot,
  .k-pop-chart .warn-tag { opacity: 1; }
  .k-pop-chart .warn-ping { display: none; }
  .solution-predict.has-popup:hover .trace,
  .solution-predict.has-popup:hover .warn-line,
  .solution-predict.has-popup:hover .warn-dot,
  .solution-predict.has-popup:hover .warn-tag,
  .solution-predict.has-popup:hover .warn-ping { animation: none; }
}

/* ===========================================================
   PROCESS OPTIMIZER POPUP — production line + bottleneck.
   Four process stations on a conveyor read left→right; one is
   the constraint. Throughput bars grow in, parts queue up in
   front of the slow station, and a BOTTLENECK tag flags it.
   One-shot reveal per hover, with a slow upstream part-flow.
   =========================================================== */
.k-pop-line { margin: 14px 0 4px; }

.k-pop-line .conveyor {
  stroke: var(--steel-300); stroke-width: 2; stroke-linecap: round;
}
.k-pop-line .station {
  fill: var(--white); stroke: var(--k-navy-700); stroke-width: 1.5;
}
.k-pop-line .st-glyph {
  fill: none; stroke: var(--k-navy-700); stroke-width: 1.3;
  stroke-linecap: round;
}
.k-pop-line .st-hub { fill: var(--k-navy-700); stroke: none; }

/* The constraint station */
.k-pop-line .bn-rect  { stroke: var(--brand-accent); stroke-width: 1.8; fill: var(--k-crimson-100); }
.k-pop-line .bn-glyph { stroke: var(--brand-accent); }
.k-pop-line .bn-hub   { fill: var(--brand-accent); }
.k-pop-line .bn-pulse {
  fill: none; stroke: var(--brand-accent); stroke-width: 1.4;
  opacity: 0; transform-box: fill-box; transform-origin: center;
}

/* Parts */
.k-pop-line .part {
  fill: var(--k-navy-500); opacity: 0;
}
.k-pop-line .queue-part {
  fill: var(--brand-accent); opacity: 0;
}

/* Throughput bars */
.k-pop-line .floor { stroke: var(--steel-300); stroke-width: 1; }
.k-pop-line .bar {
  fill: var(--k-navy-600); opacity: 0.9;
  transform-box: fill-box; transform-origin: bottom;
  transform: scaleY(0);
}
.k-pop-line .bar-bottleneck { fill: var(--brand-accent); }

/* BOTTLENECK tag */
.k-pop-line .bn-tag {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--brand-accent); opacity: 0;
}
.k-pop-line .bn-arrow { stroke: var(--brand-accent); stroke-width: 1.2; opacity: 0; }
.k-pop-line .bn-caret { fill: var(--brand-accent); opacity: 0; }

/* Station index labels */
.k-pop-line .line-label {
  font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  letter-spacing: 0.1em; fill: var(--fg-subtle);
}
.k-pop-line .bn-label { fill: var(--brand-accent); }

/* ── Reveal sequence — on card hover ── */
.solution-optimizer.has-popup:hover .bar {
  animation: kOptBar 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}
.solution-optimizer.has-popup:hover .bar.bar-1 { animation-delay: 0.10s; }
.solution-optimizer.has-popup:hover .bar.bar-2 { animation-delay: 0.20s; }
.solution-optimizer.has-popup:hover .bar.bar-bottleneck { animation-delay: 0.30s; }
.solution-optimizer.has-popup:hover .bar.bar-4 { animation-delay: 0.40s; }

.solution-optimizer.has-popup:hover .part-1 {
  animation: kOptPart 2.2s linear 0.2s infinite;
}
.solution-optimizer.has-popup:hover .part-2 {
  animation: kOptPart 2.2s linear 1.3s infinite;
}

.solution-optimizer.has-popup:hover .queue-1 { animation: kOptQueue 0.4s ease forwards 0.75s; }
.solution-optimizer.has-popup:hover .queue-2 { animation: kOptQueue 0.4s ease forwards 0.92s; }
.solution-optimizer.has-popup:hover .queue-3 { animation: kOptQueue 0.4s ease forwards 1.09s; }

.solution-optimizer.has-popup:hover .bn-pulse {
  animation: kOptPulse 2s ease-in-out 1.2s infinite;
}
.solution-optimizer.has-popup:hover .bn-tag,
.solution-optimizer.has-popup:hover .bn-arrow,
.solution-optimizer.has-popup:hover .bn-caret {
  animation: kPredFadeFull 0.4s ease forwards 1.15s;
}

@keyframes kOptBar { to { transform: scaleY(1); } }
@keyframes kOptPart {
  0%   { transform: translateX(56px);  opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(98px);  opacity: 0; }
}
@keyframes kOptQueue {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kOptPulse {
  0%, 100% { opacity: 0;    transform: scale(0.85); }
  45%      { opacity: 0.55; transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .k-pop-line .bar { transform: scaleY(1); }
  .k-pop-line .queue-part,
  .k-pop-line .bn-tag,
  .k-pop-line .bn-arrow,
  .k-pop-line .bn-caret { opacity: 1; }
  .k-pop-line .part,
  .k-pop-line .bn-pulse { display: none; }
  .solution-optimizer.has-popup:hover .bar,
  .solution-optimizer.has-popup:hover .part,
  .solution-optimizer.has-popup:hover .queue-part,
  .solution-optimizer.has-popup:hover .bn-rect,
  .solution-optimizer.has-popup:hover .bn-pulse,
  .solution-optimizer.has-popup:hover .bn-tag,
  .solution-optimizer.has-popup:hover .bn-arrow,
  .solution-optimizer.has-popup:hover .bn-caret { animation: none; }
}

/* ===========================================================
   SMART SCHEDULING POPUP — factory Gantt chart.
   Three process stages (MIX → FILL → PACK) are rows; two
   batches cascade diagonally through them with hatched
   changeover gaps. Job blocks slot in along the shift
   timeline on hover; a playhead sweeps left→right.
   =========================================================== */
.k-pop-gantt { margin: 14px 0 4px; }

.k-pop-gantt .grid {
  stroke: var(--steel-200); stroke-width: 1;
}
.k-pop-gantt .axis-label,
.k-pop-gantt .legend-label {
  font-family: var(--font-mono); font-size: 7.5px; font-weight: 600;
  letter-spacing: 0.08em; fill: var(--fg-subtle);
}
.k-pop-gantt .row-label {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.1em; fill: var(--k-navy-900);
}
.k-pop-gantt .hatch-bg   { fill: var(--k-crimson-100); }
.k-pop-gantt .hatch-line { stroke: var(--brand-accent); stroke-width: 1.2; opacity: 0.7; }
.k-pop-gantt .changeover {
  fill: url(#kSchedHatch); stroke: var(--brand-accent);
  stroke-width: 0.6; opacity: 0;
}

/* Job blocks */
.k-pop-gantt .job {
  transform-box: fill-box; transform-origin: left center;
  transform: scaleX(0);
}
.k-pop-gantt .job-a { fill: var(--k-navy-600); }
.k-pop-gantt .job-b { fill: var(--k-navy-400); }
.k-pop-gantt .legend-swatch { /* legend swatches always visible */
  transform: none;
}

.k-pop-gantt .playhead {
  stroke: var(--brand-accent); stroke-width: 1.4;
  stroke-dasharray: 2 3; opacity: 0;
}

/* ── Reveal — on card hover ── */
.solution-scheduling.has-popup:hover .job {
  animation: kSchedSlot 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
.solution-scheduling.has-popup:hover .changeover {
  animation: kPredFade 0.4s ease forwards 0.9s;
}
.solution-scheduling.has-popup:hover .playhead {
  animation: kSchedPlayhead 3s linear 1s infinite;
}

@keyframes kSchedSlot { to { transform: scaleX(1); } }
@keyframes kSchedPlayhead {
  0%   { transform: translateX(0);   opacity: 0; }
  8%   { opacity: 0.8; }
  92%  { opacity: 0.8; }
  100% { transform: translateX(254px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .k-pop-gantt .job { transform: scaleX(1); }
  .k-pop-gantt .changeover { opacity: 1; }
  .k-pop-gantt .playhead { display: none; }
  .solution-scheduling.has-popup:hover .job,
  .solution-scheduling.has-popup:hover .changeover,
  .solution-scheduling.has-popup:hover .playhead { animation: none; }
}

/* ===========================================================
   DATA HUB POPUP — OT/IT convergence (Purdue/ISA-95 stack).
   Two tinted domain bands (IT top, OT bottom); both flow INTO
   a governed hub bar at the seam. Reuses .node / .connector /
   .glyph; the convergence is the topology + the bridging bar.
   =========================================================== */
.k-pop-conv .domain {
  fill: var(--steel-50); stroke: var(--border-default); stroke-width: 1;
}
.k-pop-conv .domain-it { fill: var(--k-navy-50); }
.k-pop-conv .domain-ot { fill: var(--steel-100); }
.k-pop-conv .domain-label {
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.12em; fill: var(--fg-subtle);
}
.k-pop-conv .conv-arrow {
  fill: none; stroke: var(--brand-accent); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Governed hub bar bridging the seam */
.k-pop-conv .hub-bar {
  fill: var(--k-crimson-100); stroke: var(--brand-accent); stroke-width: 1.6;
}
.k-pop-conv .hub-bar-label {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.12em; fill: var(--k-crimson-700);
}
.k-pop-conv .hub-bar-pulse {
  fill: none; stroke: var(--brand-accent); stroke-width: 1.4;
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: kConvPulse 2.8s ease-in-out infinite;
}
@keyframes kConvPulse {
  0%, 100% { opacity: 0;   transform: scaleY(1)    scaleX(1); }
  45%      { opacity: 0.4; transform: scaleY(1.55) scaleX(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .k-pop-conv .hub-bar-pulse { display: none; }
}

/* ===========================================================
   AI READY POPUP — raw signals → queryable-history foundation.
   Scattered raw dots pass through a contextualise processor and
   assemble into a tidy grid; an AI READY badge lights once the
   foundation is built. AI is the outcome, not the hero.
   =========================================================== */
.k-pop-ai .panel-label {
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.1em; fill: var(--fg-subtle);
}
.k-pop-ai .hist-label { fill: var(--k-navy-900); }

/* Raw, unstructured signals — muted, slightly varied */
.k-pop-ai .raw-dot { fill: var(--steel-400); }
.k-pop-ai .raw-1   { fill: var(--steel-300); }
.k-pop-ai .raw-2   { fill: var(--k-navy-300); }
.k-pop-ai .raw-3   { fill: var(--steel-500); }

/* Contextualise processor */
.k-pop-ai .ai-proc {
  fill: var(--white); stroke: var(--brand-accent); stroke-width: 1.6;
}
.k-pop-ai .ai-proc-gear {
  fill: none; stroke: var(--brand-accent); stroke-width: 1.3;
  stroke-linecap: round;
}
.k-pop-ai .ai-proc-hub { fill: var(--brand-accent); stroke: none; }
.k-pop-ai .ai-proc-pin { stroke: var(--brand-accent); stroke-width: 1.2; }
.k-pop-ai .proc-label {
  font-family: var(--font-mono); font-size: 7px; font-weight: 600;
  letter-spacing: 0.08em; fill: var(--fg-subtle);
}

/* Queryable-history grid cells */
.k-pop-ai .cell {
  fill: var(--k-navy-600);
  transform-box: fill-box; transform-origin: center;
  opacity: 0; transform: scale(0.3);
}

/* AI READY badge */
.k-pop-ai .ai-badge-bg {
  fill: var(--sig-online-tint); stroke: var(--sig-online); stroke-width: 1;
}
.k-pop-ai .ai-cpu {
  fill: none; stroke: var(--sig-online); stroke-width: 1.2; stroke-linecap: round;
}
.k-pop-ai .ai-badge-label {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.12em; fill: var(--sig-online);
}
.k-pop-ai .ai-check {
  fill: none; stroke: var(--sig-online); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
}
.k-pop-ai .ai-badge { opacity: 0.45; }

/* ── Reveal — on card hover ── */
.solution-airead.has-popup:hover .cell {
  animation: kAiCell 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
.solution-airead.has-popup:hover .raw-dot {
  animation: kAiJitter 2.4s ease-in-out infinite;
}
.solution-airead.has-popup:hover .raw-1 { animation-delay: 0.4s; }
.solution-airead.has-popup:hover .raw-2 { animation-delay: 0.8s; }
.solution-airead.has-popup:hover .raw-3 { animation-delay: 1.2s; }
.solution-airead.has-popup:hover .ai-badge {
  animation: kPredFadeFull 0.4s ease forwards 1.2s;
}
.solution-airead.has-popup:hover .ai-check {
  animation: kAiCheck 0.5s ease forwards 1.35s;
}

@keyframes kAiCell {
  to { opacity: 1; transform: scale(1); }
}
@keyframes kAiCheck { to { stroke-dashoffset: 0; } }
@keyframes kAiJitter {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0.6px, -0.8px); }
}

@media (prefers-reduced-motion: reduce) {
  .k-pop-ai .cell { opacity: 1; transform: scale(1); }
  .k-pop-ai .ai-badge { opacity: 1; }
  .k-pop-ai .ai-check { stroke-dashoffset: 0; }
  .solution-airead.has-popup:hover .raw-dot { animation: none; }
}

/* ===========================================================
   PRODUCTION IQ POPUP — live KPI dashboard (visualised data).
   An animated OEE donut, an output-per-shift bar chart and a
   downtime-cause pie — reads as a monitoring pane, not a flow.
   =========================================================== */
.k-pop-dash { margin: 12px 0 2px; }

/* OEE donut */
.k-pop-dash .dash-track {
  fill: none; stroke: var(--steel-200); stroke-width: 11;
}
.k-pop-dash .dash-arc {
  fill: none; stroke: var(--brand-accent); stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 78 100; stroke-dashoffset: 78;
}
.k-pop-dash .dash-num {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  fill: var(--k-navy-900); opacity: 0;
}
.k-pop-dash .dash-sub {
  font-family: var(--font-mono); font-size: 7.5px; font-weight: 600;
  letter-spacing: 0.14em; fill: var(--fg-subtle); opacity: 0;
}

/* Bars */
.k-pop-dash .dash-axis { stroke: var(--steel-300); stroke-width: 1; }
.k-pop-dash .pbar {
  fill: var(--k-navy-600);
  transform-box: fill-box; transform-origin: bottom;
  transform: scaleY(0);
}

/* Pie */
.k-pop-dash .pie-slice { stroke: var(--white); stroke-width: 1; opacity: 0; }
.k-pop-dash .pie-1 { fill: var(--k-navy-600); }
.k-pop-dash .pie-2 { fill: var(--k-navy-400); }
.k-pop-dash .pie-3 { fill: var(--k-crimson-500); }

/* Shared labels */
.k-pop-dash .dash-label {
  font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  letter-spacing: 0.1em; fill: var(--fg-subtle);
}

/* ── Reveal — on card hover ── */
.solution-production.has-popup:hover .dash-arc {
  animation: kProdDonut 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.solution-production.has-popup:hover .dash-num,
.solution-production.has-popup:hover .dash-sub {
  animation: kPredFadeFull 0.4s ease forwards 0.55s;
}
.solution-production.has-popup:hover .pbar {
  animation: kProdBar 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}
.solution-production.has-popup:hover .pie-slice {
  animation: kProdPie 0.45s ease forwards;
}
.solution-production.has-popup:hover .pie-1 { animation-delay: 0.55s; }
.solution-production.has-popup:hover .pie-2 { animation-delay: 0.70s; }
.solution-production.has-popup:hover .pie-3 { animation-delay: 0.85s; }

@keyframes kProdDonut { to { stroke-dashoffset: 0; } }
@keyframes kProdBar   { to { transform: scaleY(1); } }
@keyframes kProdPie {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .k-pop-dash .dash-arc { stroke-dashoffset: 0; }
  .k-pop-dash .pbar { transform: scaleY(1); }
  .k-pop-dash .pie-slice,
  .k-pop-dash .dash-num,
  .k-pop-dash .dash-sub { opacity: 1; }
  .solution-production.has-popup:hover .dash-arc,
  .solution-production.has-popup:hover .pbar,
  .solution-production.has-popup:hover .pie-slice,
  .solution-production.has-popup:hover .dash-num,
  .solution-production.has-popup:hover .dash-sub { animation: none; }
}

/* ===========================================================
   EXECUTION POPUP — electronic batch record / MES.
   Operation steps (Dispense → Mix → Fill → QA Release) check
   off in sequence; a genealogy thread links raw lot → unit.
   Reads as execution + traceability.
   =========================================================== */
.k-pop-exec { margin: 12px 0 2px; }

.k-pop-exec .ex-head {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.1em; fill: var(--k-navy-900);
}
/* Release pill (lights green once QA passes) */
.k-pop-exec .ex-pill { opacity: 0; }
.k-pop-exec .ex-pill-bg { fill: var(--sig-online-tint); stroke: var(--sig-online); stroke-width: 1; }
.k-pop-exec .ex-pill-check { fill: none; stroke: var(--sig-online); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.k-pop-exec .ex-pill-label {
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.1em; fill: var(--sig-online);
}

/* Step nodes */
.k-pop-exec .ex-node { fill: var(--white); stroke: var(--steel-300); stroke-width: 1.4; }
.k-pop-exec .ex-node-fill {
  fill: var(--k-navy-600);
  transform-box: fill-box; transform-origin: center;
  transform: scale(0);
}
.k-pop-exec .ex-check {
  fill: none; stroke: var(--white); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16;
}
.k-pop-exec .ex-thread {
  stroke: var(--k-navy-600); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 46; stroke-dashoffset: 46;
}
.k-pop-exec .ex-label {
  font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  letter-spacing: 0.08em; fill: var(--fg-muted);
}

/* Genealogy strip */
.k-pop-exec .ex-geneal { opacity: 0; }
.k-pop-exec .ex-geneal-label {
  font-family: var(--font-mono); font-size: 7.5px; font-weight: 600;
  letter-spacing: 0.1em; fill: var(--fg-subtle);
}
.k-pop-exec .ex-chip { fill: var(--steel-50); stroke: var(--border-default); stroke-width: 1; }
.k-pop-exec .ex-chip-label {
  font-family: var(--font-mono); font-size: 7px; font-weight: 600;
  letter-spacing: 0.06em; fill: var(--k-navy-700);
}
.k-pop-exec .ex-trace {
  stroke: var(--brand-accent); stroke-width: 1.4; fill: none;
  stroke-dasharray: 3 3; stroke-linecap: round; opacity: 0.9;
  animation: kPopFlow 1.1s linear infinite;
}
.k-pop-exec .ex-link { fill: none; stroke: var(--brand-accent); stroke-width: 1.2; }

/* ── Reveal — on card hover ── */
.solution-execution.has-popup:hover .ex-node-fill {
  animation: kExFill 0.42s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
.solution-execution.has-popup:hover .ex-check {
  animation: kExDraw 0.4s ease forwards;
}
.solution-execution.has-popup:hover .ex-thread {
  animation: kExDraw 0.35s ease forwards;
}
.solution-execution.has-popup:hover .ex-pill {
  animation: kPredFadeFull 0.4s ease forwards 1.4s;
}
.solution-execution.has-popup:hover .ex-geneal {
  animation: kPredFadeFull 0.45s ease forwards 1.45s;
}

@keyframes kExFill { to { transform: scale(1); } }
@keyframes kExDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .k-pop-exec .ex-node-fill { transform: scale(1); }
  .k-pop-exec .ex-check, .k-pop-exec .ex-thread { stroke-dashoffset: 0; }
  .k-pop-exec .ex-pill, .k-pop-exec .ex-geneal { opacity: 1; }
  .k-pop-exec .ex-trace { animation: none; }
  .solution-execution.has-popup:hover .ex-node-fill,
  .solution-execution.has-popup:hover .ex-check,
  .solution-execution.has-popup:hover .ex-thread,
  .solution-execution.has-popup:hover .ex-pill,
  .solution-execution.has-popup:hover .ex-geneal { animation: none; }
}

/* Co-brand strip on the solution card */
.k-solution-cobrand {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px;
  padding: 4px 0;
}
.k-solution-cobrand .lbl {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-subtle);
}
.k-solution-cobrand .v-tile {
  height: 22px; padding: 0 8px; background: var(--velotic-orange);
  display: inline-flex; align-items: center; border-radius: 2px;
}
.k-solution-cobrand .v-tile img { height: 11px; width: auto; }
.k-solution-cobrand .s-mark { height: 13px; width: auto; }

@media (max-width: 1080px) { .k-solutions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .k-solutions { grid-template-columns: 1fr; } }

.k-solutions-more { display: flex; justify-content: center; margin-top: 28px; }
.k-more-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--k-navy-900);
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 999px; padding: 12px 22px; cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.k-more-btn:hover { border-color: var(--brand-accent); color: var(--brand-accent); box-shadow: var(--shadow-2); }
.k-more-btn i, .k-more-btn svg { width: 15px; height: 15px; stroke-width: 2; }
.k-more-chev { transition: transform 200ms ease; }
.k-more-chev.up { transform: rotate(180deg); }

/* ===========================================================
   ARCHITECTURE STACK (dark band)
   =========================================================== */
.k-arch {
  display: flex; flex-direction: column; max-width: 1040px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.k-arch-row {
  display: grid; grid-template-columns: 80px 1fr 1.4fr 60px;
  align-items: center; gap: 28px;
  padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,0.10);
  position: relative;
  transition: background 200ms ease;
}
.k-arch-row:hover { background: rgba(255,255,255,0.03); }
.k-arch-n {
  font-family: var(--font-mono); font-size: 12px; color: var(--steel-400);
  letter-spacing: 0.1em;
}
.k-arch-label {
  font-family: var(--font-display); font-weight: 600; font-size: 24px;
  color: var(--white); letter-spacing: -0.01em;
}
.k-arch-tech {
  font-family: var(--font-mono); font-size: 13px; color: var(--steel-300);
  line-height: 1.5;
}
.k-arch-row.steel .k-arch-label { color: var(--steel-300); }
.k-arch-row.steel .k-arch-tech { color: var(--steel-400); }
.k-arch-rail {
  height: 2px; background: var(--brand-accent); width: 100%; opacity: 0.7;
}
.k-arch-row.steel .k-arch-rail { background: var(--steel-500); opacity: 0.6; }

@media (max-width: 880px) {
  .k-arch-row { grid-template-columns: 50px 1fr; gap: 12px; }
  .k-arch-tech, .k-arch-rail { grid-column: 1 / -1; }
}

/* ===========================================================
   INDUSTRIES
   =========================================================== */
.k-industries {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.k-industry {
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 6px; padding: 24px 22px;
  display: flex; flex-direction: column; gap: 8px; position: relative;
  min-height: 180px;
  transition: transform 200ms ease, border-color 200ms ease;
}
.k-industry:hover { transform: translateY(-2px); border-color: var(--steel-300); }
.k-industry-icon { color: var(--k-navy-700); width: 24px; height: 24px; }
.k-industry-name {
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  color: var(--k-navy-900); letter-spacing: -0.01em; margin-top: 8px;
}
.k-industry-note {
  font-family: var(--font-body); font-size: 13px; color: var(--fg-muted);
  line-height: 1.5;
}
.k-industry-meta {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--fg-subtle); margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--border-subtle); text-transform: uppercase;
}

@media (max-width: 1080px) { .k-industries { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .k-industries { grid-template-columns: 1fr 1fr; } }

/* ===========================================================
   DIFFERENTIATORS
   =========================================================== */
.k-diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; }
.k-diff-item {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 20px; border-top: 1px solid var(--steel-300);
  position: relative;
}
.k-diff-item::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 2px;
  background: var(--brand-accent);
}
.k-diff-n { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); letter-spacing: 0.1em; }
.k-diff-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--k-navy-900); letter-spacing: -0.005em; }
.k-diff-body { font-family: var(--font-body); font-size: 14.5px; color: var(--fg-muted); line-height: 1.55; }

@media (max-width: 880px) { .k-diff-grid { grid-template-columns: 1fr; } }

/* ===========================================================
   PARTNERS & VENDORS  — uniform clickable cards
   =========================================================== */
.k-partners {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
a.k-partner {
  text-decoration: none; color: inherit;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 0; position: relative; overflow: hidden;
  display: grid;
  grid-template-rows: 180px 1fr auto;
  min-height: 340px;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
a.k-partner:hover {
  transform: translateY(-3px);
  border-color: var(--steel-300);
  box-shadow: 0 16px 32px -18px rgba(10, 23, 41, 0.22);
}
a.k-partner:focus-visible {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(201, 49, 60, 0.18);
}
.k-partner-stage {
  display: flex; align-items: center; justify-content: center;
  padding: 36px 28px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, #FAFBFD 0%, #FFFFFF 100%);
}
.k-partner-img {
  max-height: 84px; max-width: 78%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
  transition: transform 220ms ease;
}
.k-partner-img.is-svg { mix-blend-mode: normal; max-height: 64px; }
a.k-partner:hover .k-partner-img { transform: scale(1.04); }
.k-partner-tile {
  display: inline-flex; align-items: center; justify-content: center;
  height: 96px; padding: 0 26px;
  background: var(--velotic-orange, #FF5C1F);
  border-radius: 4px;
  transition: transform 220ms ease;
}
.k-partner-tile img { height: 36px; width: auto; display: block; }
a.k-partner:hover .k-partner-tile { transform: scale(1.04); }
.k-partner-foot {
  padding: 20px 22px 8px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--white);
}
.k-partner-cat {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-subtle);
}
.k-partner-note {
  font-family: var(--font-body); font-size: 13px;
  color: var(--fg-default); line-height: 1.5; font-weight: 500;
  margin: 0;
  text-wrap: pretty;
}
.k-partner-visit {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 22px 18px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-accent);
}
.k-partner-visit .arrow {
  font-family: var(--font-mono); transition: transform 160ms ease;
}
a.k-partner:hover .k-partner-visit .arrow { transform: translateX(3px); }

@media (max-width: 1080px) { .k-partners { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .k-partners { grid-template-columns: 1fr; } }

/* ===========================================================
   ENGAGEMENT MODEL (replaces former CASE STUDIES section)
   Phased timeline shown until real customer references clear.
   =========================================================== */
.k-engage {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: flex; flex-direction: column;
}
.k-engage-step {
  display: grid; grid-template-columns: 80px 1fr; gap: 24px;
  position: relative; padding: 0 0 28px 0;
}
.k-engage-step:last-child { padding-bottom: 0; }

/* Vertical rail running through all steps */
.k-engage-rail {
  position: relative; display: flex; flex-direction: column;
  align-items: center; padding-top: 22px;
}
.k-engage-rail::before {
  content: ""; position: absolute;
  top: 22px; bottom: -28px; left: 50%; width: 1px;
  background: linear-gradient(180deg, var(--steel-300) 0%, var(--steel-200) 100%);
  transform: translateX(-0.5px);
}
.k-engage-step:last-child .k-engage-rail::before { bottom: 0; }
.k-engage-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--white); background: var(--k-navy-900);
  padding: 6px 10px; border-radius: 3px; z-index: 1;
  line-height: 1;
}
.k-engage-tick {
  display: none;
}

.k-engage-body {
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 8px; padding: 28px 32px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 1px 0 rgba(10,23,41,0.04);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.k-engage-step:hover .k-engage-body {
  border-color: var(--steel-300);
  box-shadow: 0 8px 24px rgba(10,23,41,0.08);
}

.k-engage-head { display: flex; align-items: center; gap: 16px; }
.k-engage-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--k-navy-50);
  color: var(--k-navy-700);
}
.k-engage-icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
.k-engage-titles { display: flex; flex-direction: column; gap: 4px; }
.k-engage-dur {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand-accent);
}
.k-engage-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--k-navy-900); margin: 0;
}
.k-engage-text {
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  color: var(--fg-muted); margin: 0;
}
.k-engage-out {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px dashed var(--border-default);
}
.k-engage-out-lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-subtle); flex-shrink: 0;
}
.k-engage-out-txt {
  font-family: var(--font-body); font-size: 14px; color: var(--k-navy-800);
  font-weight: 500; line-height: 1.5;
}

.k-engage-foot {
  margin-top: 48px;
  display: grid; grid-template-columns: 1.4fr auto; gap: 36px; align-items: center;
  background: var(--k-navy-900); color: var(--steel-200);
  border-radius: 8px; padding: 32px 36px;
}
.k-engage-foot .k-eyebrow { color: var(--k-crimson-400); }
.k-engage-foot-text p {
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  color: rgba(255,255,255,0.78); margin: 12px 0 0; max-width: 640px;
}
.k-engage-foot-cta { display: flex; justify-content: flex-end; }

/* --- References (compact card grid) --- */
.k-refs { margin-top: 52px; }
.k-refs-head { margin-bottom: 22px; }
.k-refs-head .k-eyebrow { color: var(--brand-accent); }
.k-refs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  align-items: stretch;
}
.k-ref {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid rgba(10,23,41,0.10);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(10,23,41,0.08);
}
.k-ref-media {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--k-navy-900);
  height: 178px;
}
.k-ref-media figure { position: relative; margin: 0; overflow: hidden; }
.k-ref-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  display: block; filter: saturate(0.92) contrast(1.02);
}
.k-ref-media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.03em;
  color: #fff; padding: 20px 12px 9px;
  background: linear-gradient(to top, rgba(6,14,28,0.9), rgba(6,14,28,0));
}
.k-ref-text { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.k-ref-text .k-eyebrow { color: var(--brand-accent); font-size: 11px; }
.k-ref-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 20px; line-height: 1.22;
  color: var(--k-navy-900); margin: 12px 0 0; text-wrap: balance;
}
.k-ref-title .period { color: var(--brand-accent); }
.k-ref-lede {
  font-family: var(--font-body); font-size: 14px; line-height: 1.56;
  color: rgba(10,23,41,0.72); margin: 12px 0 0;
}
.k-ref-specs {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(10,23,41,0.08);
  display: flex; flex-wrap: wrap; gap: 7px;
}
.k-ref-chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em;
  text-transform: uppercase; color: rgba(10,23,41,0.64);
  background: #EEF1F6; border: 1px solid rgba(10,23,41,0.08);
  border-radius: 999px; padding: 5px 10px; white-space: nowrap;
}
.k-ref-chip.is-key { color: var(--brand-accent); background: #FBECEC; border-color: rgba(193,61,61,0.18); }

@media (max-width: 880px) {
  .k-engage-step { grid-template-columns: 56px 1fr; gap: 14px; }
  .k-engage-body { padding: 22px; }
  .k-engage-foot { grid-template-columns: 1fr; padding: 28px; }
  .k-engage-foot-cta { justify-content: flex-start; }
  .k-refs-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   CONTACT
   =========================================================== */
.k-contact {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px;
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 8px; padding: 56px;
}
.k-contact h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 38px; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--k-navy-900); margin: 12px 0 16px; text-wrap: balance;
}
.k-contact h3 .period { color: var(--brand-accent); }
.k-contact p {
  font-family: var(--font-body); font-size: 15px; color: var(--fg-muted);
  line-height: 1.55; margin: 0 0 24px; max-width: 480px;
}
.k-contact-meta { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.k-contact-meta-row {
  display: flex; gap: 12px; align-items: baseline;
  font-family: var(--font-body); font-size: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--border-subtle);
}
.k-contact-meta-row .lbl {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-subtle); min-width: 78px;
}
.k-contact-meta-row a { color: inherit; text-decoration: none; white-space: nowrap; }
.k-contact-meta-row a:hover { color: var(--brand-accent); }

.k-form { display: flex; flex-direction: column; gap: 14px; }
.k-form-actions { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.k-form-actions .k-btn { flex: 0 0 auto; }
.k-form-note {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--fg-subtle); margin: 8px 0 0; line-height: 1.5;
}
.k-form-note strong { color: var(--fg-muted); font-weight: 500; }
.k-form-consent {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--fg-subtle); margin: 4px 0 0; line-height: 1.5;
}
.k-form-consent a { color: var(--k-navy-600); text-decoration: underline; text-underline-offset: 2px; }
.k-form-consent a:hover { color: var(--k-crimson-600); }

.k-form-error {
  margin: 0; padding: 10px 14px;
  background: rgba(201, 49, 60, 0.08);
  border: 1px solid rgba(201, 49, 60, 0.24);
  border-left: 3px solid var(--brand-accent);
  border-radius: var(--r-4);
  font-family: var(--font-body); font-size: 13px;
  color: var(--k-crimson-700, #B12832);
  line-height: 1.5;
}
.k-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.k-btn:disabled:hover { background: var(--k-navy-700); }

/* Success state — replaces form after submit */
.k-form-success {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--border-default);
  border-left: 3px solid var(--sig-online);
  border-radius: 8px; padding: 32px;
  animation: kFormSuccessIn 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes kFormSuccessIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.k-form-success-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--sig-online);
  color: var(--white);
}
.k-form-success-icon svg { width: 22px; height: 22px; stroke-width: 2.6; }
.k-form-success-body { flex: 1; min-width: 0; }
.k-form-success-body h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 28px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--k-navy-900); margin: 10px 0 14px;
}
.k-form-success-body h3 .period { color: var(--brand-accent); }
.k-form-success-body p {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.55;
  color: var(--fg-muted); margin: 0 0 10px;
}
.k-form-success-body p strong { color: var(--k-navy-800); font-weight: 600; }
.k-form-success-note {
  font-size: 13px !important; color: var(--fg-subtle) !important;
  padding-top: 12px; border-top: 1px solid var(--border-subtle);
  margin-top: 14px !important;
}
.k-form-success-note a {
  color: var(--k-navy-700); border-bottom: 1px solid var(--steel-300);
  transition: border-color 120ms ease;
}
.k-form-success-note a:hover { border-color: var(--k-navy-700); }
.k-form-success-actions {
  display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap;
}
.k-form-success-actions .k-btn { display: inline-flex; align-items: center; gap: 8px; }
.k-form-success-actions .k-btn svg { width: 15px; height: 15px; }

.k-form-field { display: flex; flex-direction: column; gap: 6px; }
.k-form-field label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-subtle);
}
.k-form-field input, .k-form-field textarea, .k-form-field select {
  font-family: var(--font-body); font-size: 14.5px; color: var(--fg-default);
  background: var(--steel-50); border: 1px solid var(--border-default);
  border-radius: 4px; padding: 12px 14px; line-height: 1.4;
  transition: border-color 120ms ease, background 120ms ease;
}
.k-form-field input:focus, .k-form-field textarea:focus, .k-form-field select:focus {
  outline: none; border-color: var(--k-navy-700); background: var(--white);
}
.k-form-field textarea { min-height: 120px; resize: vertical; }
.k-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* -----------------------------------------------------------
   Fluent Forms skin — makes the rendered [fluentform id="1"]
   match the KIREAS contact form. Scoped to .k-form-ff so it
   only affects the contact section.
   ----------------------------------------------------------- */
.k-form-ff .fluentform { margin: 0; }
.k-form-ff .frm-fluent-form { display: flex; flex-direction: column; gap: 14px; }
.k-form-ff .ff-el-group { margin: 0; }
.k-form-ff .ff-t-container { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.k-form-ff .ff-t-cell { padding: 0; width: auto; }
.k-form-ff .ff-el-input--label { margin: 0 0 6px; padding: 0; }
.k-form-ff .ff-el-input--label label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-subtle); font-weight: 500; line-height: 1.4;
}
.k-form-ff .ff-el-is-required.asterisk-right label::after,
.k-form-ff .ff-el-input--label.asterisk-right label::after { color: var(--brand-accent); }
.k-form-ff input.ff-el-form-control,
.k-form-ff textarea.ff-el-form-control,
.k-form-ff select.ff-el-form-control {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: 14.5px; color: var(--fg-default);
  background: var(--steel-50); border: 1px solid var(--border-default);
  border-radius: 4px; padding: 12px 14px; line-height: 1.4;
  transition: border-color 120ms ease, background 120ms ease; box-shadow: none;
}
.k-form-ff input.ff-el-form-control:focus,
.k-form-ff textarea.ff-el-form-control:focus,
.k-form-ff select.ff-el-form-control:focus {
  outline: none; border-color: var(--k-navy-700); background: var(--white); box-shadow: none;
}
.k-form-ff textarea.ff-el-form-control { min-height: 120px; resize: vertical; }
.k-form-ff .ff-el-form-control::placeholder { color: var(--fg-subtle); opacity: 1; }
.k-form-ff .ff_submit_btn_wrapper { margin-top: 4px; }
.k-form-ff form.frm-fluent-form button.ff-btn-submit {
  font-family: var(--font-body); font-weight: 600; font-size: 15.5px;
  padding: 16px 26px; border-radius: 4px; border: 1px solid transparent;
  background: var(--k-navy-700); color: var(--white); cursor: pointer;
  transition: background 140ms ease; box-shadow: none; line-height: 1;
}
.k-form-ff form.frm-fluent-form button.ff-btn-submit:hover { background: var(--k-navy-800); color: var(--white); }
.k-form-ff .ff-el-is-error input.ff-el-form-control,
.k-form-ff .ff-el-is-error textarea.ff-el-form-control,
.k-form-ff .ff-el-is-error select.ff-el-form-control { border-color: var(--brand-accent); background: rgba(201,49,60,0.04); }
.k-form-ff .error.text-danger, .k-form-ff .ff-el-is-error .error {
  font-family: var(--font-body); font-size: 12.5px; color: var(--k-crimson-700, #B12832);
  margin-top: 5px; line-height: 1.45;
}
.k-form-ff .ff-message-success {
  background: var(--white); border: 1px solid var(--border-default);
  border-left: 3px solid var(--sig-online); border-radius: 8px;
  padding: 22px 24px; font-family: var(--font-body); font-size: 15px;
  color: var(--fg-default); line-height: 1.55;
}
.k-form-ff .ff-errors-in-stack, .k-form-ff .ff_form_errors {
  font-family: var(--font-body); font-size: 13px; color: var(--k-crimson-700, #B12832);
}

@media (max-width: 980px) {
  .k-contact { grid-template-columns: 1fr; padding: 36px; gap: 32px; }
}

/* ===========================================================
   FOOTER
   =========================================================== */
.k-footer { background: var(--k-navy-950); color: var(--steel-300); padding: 80px 28px 32px; }
.k-footer-inner { max-width: var(--container-wide); margin: 0 auto; }
.k-footer-top {
  display: grid; grid-template-columns: 1.2fr 2fr; gap: 80px;
  padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.10);
}
.k-footer-brand { display: flex; flex-direction: column; gap: 14px; }
.k-footer-logo-wrap {
  background: #FFFFFF; padding: 14px 18px; border-radius: 6px;
  display: inline-flex; align-items: center;
  align-self: flex-start;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}
.k-footer-logo { height: 44px; width: auto; display: block; }
.k-footer-logo-wrap .klogo { font-size: 17px; /* mark ≈ 44px, matching the prior lockup */ }
.k-footer-tag { font-family: var(--font-body); font-size: 14px; color: var(--steel-300); max-width: 340px; line-height: 1.55; }
.k-footer-contact { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-body); font-size: 13.5px; margin-top: 14px; }
.k-footer-contact a, .k-footer-contact div {
  display: inline-flex; align-items: center; gap: 12px; color: var(--steel-300);
  padding: 4px 0; transition: color 120ms ease;
}
.k-footer-contact a:hover { color: var(--white); }
.k-footer-contact .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; color: var(--k-crimson-400); flex-shrink: 0;
}
.k-footer-contact .ico svg { width: 16px; height: 16px; stroke-width: 1.75; }
.k-footer-social { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.k-footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  background: #0A66C2; color: #fff;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.k-footer-social a:hover {
  background: #0858a8; transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(10,102,194,0.35);
}
.k-footer-social a svg { width: 22px; height: 22px; }
.k-footer-social-label { font-family: var(--font-body); font-size: 14px; color: var(--steel-300); }
.k-footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 460px; margin-left: auto; }
.k-footer-col { display: flex; flex-direction: column; gap: 10px; }
.k-footer-col-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--white); margin-bottom: 4px;
}
.k-footer-link {
  font-family: var(--font-body); font-size: 13.5px; color: var(--steel-300);
  transition: color 120ms ease;
}
.k-footer-link:hover { color: var(--white); }
.k-footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px; gap: 24px; flex-wrap: wrap;
}
.k-footer-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--steel-500); }
.k-footer-legal { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; display: inline-flex; align-items: center; gap: 18px; }
.k-footer-legal a { color: var(--steel-400); transition: color 140ms ease; }
.k-footer-legal a:hover { color: var(--white); }
.k-footer-legal .k-footer-cookie-btn {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--steel-400); background: none; border: none; padding: 0; cursor: pointer;
  transition: color 140ms ease;
}
.k-footer-legal .k-footer-cookie-btn:hover { color: var(--white); }
.k-footer-iso {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--steel-400);
}
.k-footer-iso::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--sig-online);
}

/* ===========================================================
   COOKIE CONSENT GATE (GDPR Accept / Reject — blocks GA4 until choice)
   =========================================================== */
.k-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70;
  display: flex; justify-content: center;
  animation: kConsentIn 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.k-consent-inner {
  display: flex; align-items: flex-start; gap: 16px;
  max-width: 720px; width: 100%;
  background: var(--k-navy-900); color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 22px 56px -18px rgba(10,23,41,0.6);
}
.k-consent-ico { flex: 0 0 auto; display: inline-flex; color: var(--k-crimson-400); margin-top: 1px; }
.k-consent-ico i, .k-consent-ico svg { width: 22px; height: 22px; }
.k-consent-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }
.k-consent-text { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.78); }
.k-consent-text strong { color: #fff; font-weight: 600; }
.k-consent-text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.k-consent-text a:hover { color: var(--k-crimson-400); }
.k-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.k-consent-btn {
  cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 13px;
  padding: 9px 22px; border-radius: 6px; transition: background 140ms ease, border-color 140ms ease;
}
.k-consent-btn.primary { background: var(--k-crimson-600); color: #fff; border: 1px solid transparent; }
.k-consent-btn.primary:hover { background: var(--k-crimson-700); }
.k-consent-btn.ghost { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.22); }
.k-consent-btn.ghost:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.4); }
@keyframes kConsentIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 560px) {
  .k-consent { left: 10px; right: 10px; bottom: 10px; }
  .k-consent-inner { padding: 16px; gap: 12px; }
  .k-consent-actions .k-consent-btn { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .k-consent { animation: none; } }

@media (max-width: 880px) {
  .k-footer-top { grid-template-columns: 1fr; gap: 36px; }
  .k-footer-cols { grid-template-columns: 1fr 1fr; }
}