/* ==========================================================================
   Kelarix — main stylesheet
   ========================================================================== */

/* ---- Reset / base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: var(--fw-bold);
  line-height: 1.15;
}
p {
  margin: 0;
}
svg {
  display: block;
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section {
  padding-block: var(--space-64);
  position: relative;
}
.section--soft {
  background: var(--color-bg-alt);
}
.section--dark {
  background: var(--gradient-dark);
  color: var(--color-text-on-dark);
  overflow: hidden;
}
.section--accent {
  background: var(--accent-500);
  color: var(--color-text-on-dark);
}

.section__head {
  max-width: 760px;
  margin-bottom: var(--space-48);
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}
.section__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.02em;
}
.section__title--light {
  color: var(--white);
}
.section__lead {
  margin-top: var(--space-16);
  color: var(--color-text-muted);
  font-size: var(--fs-title);
  line-height: 1.6;
}
.section__lead--light {
  color: var(--color-text-on-dark-muted);
}

/* ---- Eyebrow / badge / dot ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-600);
}
.eyebrow--light {
  color: var(--color-text-on-dark-muted);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-400);
  box-shadow: 0 0 0 4px rgba(78, 103, 255, 0.25);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  margin-bottom: var(--space-20);
}
.badge--light {
  background: var(--accent-100);
  border-color: transparent;
  color: var(--accent-700);
}
.badge--dashed {
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.9);
}
.badge--center {
  margin-inline: auto;
}
.badge--soft {
  background: #f9f9fe;
  border: 1px dashed var(--accent-200);
  color: var(--accent-700);
  box-shadow: var(--shadow-extra-soft);
}
.badge--soft .dot {
  background: var(--accent-500);
  box-shadow: none;
}
.badge .dot {
  box-shadow: none;
  background: var(--accent-300);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 14px 13px 22px;
  border-radius: var(--radius-lg);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  line-height: 1;
}
.btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex: none;
  transition: transform 0.18s ease;
}
.btn:hover .btn__arrow {
  transform: translateX(2px);
}

.btn--primary {
  background: var(--color-btn-primary);
  color: #fff;
  border-color: var(--accent-500);
}
.btn--primary:hover {
  background: var(--color-btn-primary-hover);
  border-color: var(--accent-400);
}
.btn--primary .btn__arrow {
  background: rgba(255, 255, 255, 0.22);
}

.btn--white {
  background: #fff;
  color: var(--accent-600);
  border-color: var(--accent-500);
}
.btn--white:hover {
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.btn--white .btn__arrow {
  background: var(--accent-100);
  color: var(--accent-600);
}

.btn--ghost {
  background: transparent;
  border-color: var(--gray-700);
  color: var(--gray-800);
}
.btn--ghost:hover {
  border-color: var(--accent-500);
  color: var(--accent-600);
}
.btn--ghost .btn__arrow {
  background: var(--gray-100);
  color: var(--accent-600);
}
.btn--ghost-light {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  padding-top: var(--space-20);
  transition: padding 0.3s ease;
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding: 6px 9px 6px 24px;
  background: rgba(13, 21, 64, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(20, 35, 90, 0.12);
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
/* Scrolled state: only a slightly tighter top gap — background, border,
   and text colors stay identical to the non-scrolled header. */
.site-header.is-scrolled {
  padding-top: var(--space-12);
}
/* Header CTA: white pill, blue text + outline, plain chevron */
.site-header__cta .btn--white {
  border: 1px solid var(--accent-500);
  padding-right: 18px;
  padding: 15px 20px;
}
.site-header__cta .btn__arrow {
  background: transparent;
  width: auto;
  height: auto;
}
.site-header__logo {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: #fff;
}
.site-footer__logo {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.site-nav {
  margin-inline: auto;
}
.site-nav__list {
  display: flex;
  gap: var(--space-28);
}
.site-nav__list > li > a {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: #fff;
  transition: opacity 0.3s ease;
}
.site-nav__list > li > a:hover {
  opacity: 0.75;
}
.site-header__cta {
  flex: none;
}

/* ==========================================================================
   Mega menu — any top-level item with the "has-mega-menu" CSS class
   (set in Appearance -> Menus) renders this instead of a plain link.
   Desktop: hover-triggered dropdown. Mobile: inline within the open nav.
   ========================================================================== */
.site-nav__list li.has-mega-menu {
  position: relative;
}
.mega-menu__chevron {
  display: inline-flex;
  margin-left: 6px;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
li.has-mega-menu:hover .mega-menu__chevron,
li.menu-item-has-children:hover > a .mega-menu__chevron {
  transform: rotate(180deg);
}
/* The .mega-menu box itself is the hoverable "bridge" — it starts flush
   against the nav (top:100%, no gap) and uses padding-top to push the
   VISIBLE panel (.mega-menu__inner) down. This keeps the cursor inside a
   hoverable element the whole way from the nav link to the panel, so the
   dropdown never closes while crossing the visual gap. */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 660px;
  max-width: 90vw;
  padding-top: 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    visibility 0.18s;
  z-index: 500;
}
li.has-mega-menu:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mega-menu__inner {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: 0 30px 70px rgba(10, 20, 60, 0.22);
  overflow: hidden;
  padding: var(--space-12) var(--space-12) var(--space-12) var(--space-8);
}
.mega-menu__sidebar {
  flex: none;
  width: 190px;
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
}
.mega-menu__tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mega-menu__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.mega-menu__tab svg {
  flex: none;
  opacity: 0.5;
}
.mega-menu__tab:hover:not(.is-active) {
  background: var(--gray-100);
}
.mega-menu__tab.is-active {
  background: var(--accent-100);
  border-color: rgba(26, 72, 255, 0.15);
  color: var(--accent-700);
  font-weight: var(--fw-semibold);
}
.mega-menu__cta {
  margin-top: var(--space-20);
  width: 100%;
  justify-content: center;
  padding: 11px 12px;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  font-size: var(--fs-description);
}
.mega-menu__panels {
  flex: 1;
  min-width: 0;
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-16);
}
.mega-menu__panel {
  display: none;
}
.mega-menu__panel.is-active {
  display: block;
}
.mega-menu__panel-label {
  display: block;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  margin-bottom: var(--space-12);
  padding-inline: 4px;
}
.mega-menu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.mega-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12);
  border-radius: var(--radius-md);
  transition: background 0.15s;
}
.mega-card:hover {
  background: var(--gray-100);
}
.mega-menu__panels .mega-card:hover {
  background: #fff;
}
.mega-card__icon {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  border-radius: 3px;
  border: 2px solid #c8caff;
  background-color: var(--white);
  position: relative;
}
.mega-card__icon:after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-500);
  width: 6px;
  height: 6px;
  left: 4px;
  right: 0;
  top: 4px;
}
.mega-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mega-card__title {
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.mega-card__desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.site-header__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
}
.site-header__toggle span {
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-top: 210px;
  padding-bottom: var(--space-128);
  display: flex;
  align-items: center;
  overflow: hidden;
  /* background: linear-gradient(
    177deg,
    #8a99bf 0%,
    #6c7dac 20%,
    #475a90 42%,
    #2c47b6 74%,
    #1f3ec6 100%
  ); */
  z-index: 9 !important;
}
.hero__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  /* -webkit-mask-image: linear-gradient( */
  /* 90deg, */
  /* transparent 0%, */
  /* #000 22%, */
  /* #000 100% */
  /* ); */
  /* mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%); */
}
/* .hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      95deg,
      rgba(14, 24, 70, 0.6) 0%,
      rgba(14, 24, 70, 0.34) 36%,
      rgba(14, 24, 70, 0.04) 60%,
      rgba(14, 24, 70, 0) 72%
    ),
    linear-gradient(
      180deg,
      rgba(14, 24, 70, 0.22) 0%,
      rgba(14, 24, 70, 0) 28%,
      rgba(31, 62, 198, 0) 58%,
      rgba(31, 62, 198, 0.92) 100%
    );
} */
.hero__inner {
  position: relative;
  max-width: 680px;
}
.hero__title {
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
  margin-block: var(--space-24) var(--space-24);
}
.hero__subtext {
  font-size: var(--fs-title);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  max-width: 560px;
}
.hero__actions,
.about-path__actions,
.about-discipline__actions,
.industries-diff__actions,
.industries-also__actions,
.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-32);
}
/* Paired CTAs → equal width, content evenly spaced */
.hero__actions .btn,
.about-path__actions .btn,
.about-discipline__actions .btn,
.industries-diff__actions .btn,
.industries-also__actions .btn,
.final-cta__actions .btn {
  flex: 1 1 240px;
  min-width: 240px;
  max-width: 320px;
  justify-content: space-between;
}
.hero__note {
  margin-top: var(--space-40);
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.78);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.hero__note-icon {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.7);
}
.hero__note-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* eyebrow chip (light frosted pill, dark text) */
.eyebrow--chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  color: var(--white);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

/* ==========================================================================
   Blind spots
   ========================================================================== */
/* .blind {
  position: relative;
  background: linear-gradient(180deg, #1f3ec6 0%, #2143cc 55%, #2548d4 100%);
  padding-block: var(--space-64);
} */
/* .blind::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/arch-blue.svg") center / cover no-repeat;
  pointer-events: none;
} */

.blind.sec-key-problems-wrapper {
  z-index: 99999;
}

.blind > .container {
  position: relative;
  z-index: 1;
}
.blind__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-48);
  background: rgba(255, 255, 255, 0.05);
}
.blind__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.07) 35%,
    rgba(255, 255, 255, 0) 60%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.blind__panel > * {
  position: relative;
  z-index: 1;
}
.blind__head {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--space-40);
  align-items: center;
  margin-bottom: var(--space-40);
}
.blind__head-left .section__title {
  margin-top: var(--space-16);
  max-width: 460px;
}
.blind__head-text {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-body);
  line-height: 1.7;
  padding-top: var(--space-44);
}
.blind__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}

.problem-card {
  position: relative;
  overflow: hidden;
  background: #05278f;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-28);
}
/* 2px white L-corner accent — position alternates per card */
.problem-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
}
.problem-card--tl::after {
  top: 10px;
  left: 10px;
  border-top: 2px solid #fefefe;
  border-left: 2px solid #fefefe;
  opacity: 0.1;
  border-top-left-radius: var(--radius-lg);
}
.problem-card--br::after {
  bottom: 10px;
  right: 10px;
  border-bottom: 2px solid #fefefe;
  border-right: 2px solid #fefefe;
  opacity: 0.1;
  border-bottom-right-radius: var(--radius-lg);
}
.problem-card > * {
  position: relative;
  z-index: 1;
}
.problem-card__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(200, 202, 255, 0.15);
  color: #c8caff;
  margin-bottom: var(--space-24);
}
.problem-card__icon svg {
  width: 22px;
  height: 22px;
}
.problem-card__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  color: #fff;
  margin-bottom: var(--space-12);
}
.problem-card__text {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

.problem-card--cta {
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}
.problem-card--cta::before {
  display: none;
}
.problem-card__cta-text {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--accent-600);
  max-width: 250px;
  line-height: 1.3;
}
.problem-card__cta-chevron {
  display: inline-flex;
  flex: none;
  color: var(--accent-500);
}

/* ==========================================================================
   What Kelarix Does — badge/heading/subtext, 3-step numbered row, then 5
   staggered capability cards over a KELARIX watermark, closing line.
   ========================================================================== */
.wkd {
  position: relative;
  overflow: hidden;
  /* background: linear-gradient(180deg, #17278c 0%, #1a48ff 100%); */
  padding-block: var(--space-96) 0;
  z-index: 12;
}
.wkd__title,
.wkd__text {
  max-width: 760px;
  margin-inline: auto;
}

.wkd__steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-40);
  margin-top: var(--space-64);
  padding-top: var(--space-48);
}
.wkd-step {
  border-top: 5px solid rgba(255, 255, 255, 0.14);
  padding-top: var(--space-24);
}
.wkd-step__num {
  display: inline-block;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.35);
  margin-right: var(--space-12);
}
.wkd-step__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: #fff;
  margin-bottom: var(--space-8);
}
.wkd-step__text {
  font-size: var(--fs-description);
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.6;
}

.wkd__cascade {
  position: relative;
  margin-top: var(--space-96);
  padding-block: var(--space-64) 50px;
  overflow: hidden;
  background-image: url("../images/single-page-industry/kelarix-logo-text-img.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 95%;
}
.wkd-cards {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
  max-width: 97%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.wkd-card {
  flex: 1 1 0;
  background: #05278f;
  border: 16px solid hsl(235deg 100% 81% / 60%);
  border-radius: 32px;
  padding: var(--space-24) var(--space-20);
}
.wkd-card:nth-child(odd) {
  margin-top: 0;
}
.wkd-card:nth-child(even) {
  margin-top: 50px;
}
.wkd-card__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: #fff;
  margin-bottom: var(--space-8);
}
.wkd-card__text {
  font-size: var(--fs-description);
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.6;
}

.wkd__closing {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: var(--space-64) auto 0;
  padding-inline: var(--container-pad);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-h4);
  line-height: 1.7;
}

/* ==========================================================================
   Industries (carousel with checklist cards) + Also relevant
   ========================================================================== */
.industries {
  position: relative;
  overflow: hidden;
  /* background: var(--gray); */
}
.industries:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 230px;
  height: 255px;
  background-image: url("../images/industry-before-img.svg");
  display: block;
  z-index: 9;
}
/* .industries__bg {
  position: absolute;
  inset: 0;
  background: url("../images/arch-light.svg") center bottom / cover no-repeat;
  opacity: 0.5;
  pointer-events: none;
} */
.industries__inner {
  position: relative;
  z-index: 1;
}
.industries .section__head--center {
  max-width: 720px;
}

.industries__carousel {
  margin-top: var(--space-40);
}
.industries__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(360px, 90%);
  gap: var(--space-20);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: var(--space-12);
  padding-inline-end: var(--space-24);
  scroll-padding-inline-end: var(--space-24);
  scrollbar-width: none;
}
.industries__track::-webkit-scrollbar {
  height: 0;
}
.industry-card {
  position: relative;
  scroll-snap-align: start;
  background: #f8f8f8;
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.industry-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-12);
}
.industry-card__desc {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.6;
  margin-bottom: var(--space-20);
  max-width: 88%;
}
.industry-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-bottom: var(--space-28);
}
.industry-card__list li {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-body);
  color: var(--gray-800);
}
.industry-card__check {
  display: inline-flex;
  color: var(--accent-500);
  flex: none;
}
.industry-card__cta {
  margin-top: auto;
}

.industries__controls {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin-top: var(--space-32);
}
.industries__nav {
  display: flex;
  gap: var(--space-12);
  flex: none;
}
.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gray-400);
  background: transparent;
  color: var(--gray-800);
  cursor: pointer;
  transition: all 0.15s;
}
.carousel-btn:hover {
  border-color: var(--accent-500);
  color: var(--accent-600);
}
.industries__progress {
  flex: 1;
  height: 3px;
  background: var(--gray-300);
  border-radius: 2px;
  overflow: hidden;
}
.industries__progress span {
  display: block;
  height: 100%;
  width: 33%;
  background: var(--black);
  border-radius: 2px;
  transition:
    width 0.25s ease,
    margin-left 0.25s ease;
}

.also {
  margin-top: var(--space-64);
  text-align: center;
}
.also__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-32);
}
.also__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-20);
  max-width: 860px;
  margin: 0 auto var(--space-32);
}
.also__item {
  position: relative;
  display: grid;
  gap: var(--space-20);
  padding: var(--space-24) var(--space-28);
  background: #f8f8f8;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.also__item:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}
.also__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid #d3d5ff;
  background: #fff;
  color: var(--accent-600);
}
.also__icon svg {
  width: 20px;
  height: 20px;
}
.also__chevron {
  position: absolute;
  top: var(--space-24);
  right: var(--space-28);
  color: var(--gray-500);
}
.also__name {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
}
.also__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}

/* ==========================================================================
   Confidential / feature cards
   ========================================================================== */
.confidential {
  background: linear-gradient(180deg, #ffffff 68%, #e9eefb 100%);
  display: none;
}
.confidential .section__head--center {
  max-width: 720px;
}
.confidential .section__lead + .section__lead {
  margin-top: var(--space-16);
}
.confidential__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-16);
}
.feature-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  background: #fff;
}
.feature-card::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  pointer-events: none;
}
.feature-card--tl::after {
  top: 10px;
  left: 10px;
  border-top: 2px solid #c8caff;
  border-left: 2px solid #c8caff;
  border-top-left-radius: var(--radius-lg);
}
.feature-card--br::after {
  bottom: 10px;
  right: 10px;
  border-bottom: 2px solid #c8caff;
  border-right: 2px solid #c8caff;
  border-bottom-right-radius: var(--radius-lg);
}
.feature-card__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-100);
  color: var(--accent-600);
  margin-bottom: var(--space-20);
}
.feature-card__icon svg {
  width: 20px;
  height: 20px;
}
.feature-card__icon-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.feature-card__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
}
.feature-card__text {
  font-size: var(--fs-description);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ==========================================================================
   Proof (accordion + featured analytics)
   ========================================================================== */
.proof {
  position: relative;
  overflow: hidden;
  /* background: linear-gradient( */
  /* 180deg, */
  /* #4060d8 0%, */
  /* #2b49bf 20%, */
  /* #1e39ad 58%, */
  /* #15309f 100% */
  /* ); */
}
.proof__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 460px;
  /* background: url("../images/blue-light-bg-img.png") center top / cover */
  /* no-repeat; */
  pointer-events: none;
}
.proof__inner {
  position: relative;
  z-index: 1;
}
.proof .section__head--center {
  max-width: 720px;
}
.proof__list {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.proof-item {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.proof-item__head {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  padding: var(--space-20) 64px var(--space-20) var(--space-24);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
}
.proof-item__icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent-100);
  flex: none;
}
.proof-item__icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.proof-item__tag {
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  color: var(--accent-600);
  flex: none;
}
.proof-item__title {
  flex-basis: 100%;
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
}
.proof-item__toggle {
  position: absolute;
  top: 50%;
  right: var(--space-24);
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  flex: none;
  transition: transform 0.2s;
}
.proof-item__toggle::before,
.proof-item__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--gray-700);
}
.proof-item__toggle::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.proof-item__toggle::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}
.proof-item.is-open .proof-item__toggle {
  transform: translateY(-50%) rotate(45deg);
}
.proof-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.proof-item.is-open .proof-item__body {
  max-height: 600px;
}
.proof-item__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
  padding: 0 var(--space-24) 0 var(--space-28);
  align-items: end;
}
.proof-item__content {
  padding-bottom: 24px;
}
.proof-item__sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin: 0 0 var(--space-8);
}
.proof-item__desc {
  color: var(--color-text-muted);
  margin-bottom: var(--space-16);
  line-height: 1.6;
}
.proof-item__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}
.proof-item__cta,
.focus-item__cta {
  margin-top: var(--space-4);
}
.focus-item__cta[hidden] {
  display: none;
}
.focus-item__decor {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12);
  margin-left: auto;
}
.focus-item__decor-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #d3d5ff;
  background: #fff;
  padding: 8px;
}
.focus-item__decor-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.chip {
  font-size: var(--fs-description);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid #2c2c2c;
  color: #878787;
}
.proof-analytics {
  /* background: var(--gray); */
  /* border: 1px solid var(--color-border); */
  /* border-radius: var(--radius-md); */
  /* padding: var(--space-24); */
}
.proof-chart {
  position: relative;
  margin-top: var(--space-16);
  padding-left: 34px;
}
.proof-chart__axis {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: var(--gray-500);
}
.proof-chart__svg {
  width: 100%;
  height: 130px;
  display: block;
}
.proof-chart--image {
  margin-top: 0;
  padding-left: 0;
}
.proof-chart--image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: top;
  /* border-radius: var(--radius-md); */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  display: block;
  border-top: 10px solid #ecf0ff;
  border-right: 10px solid #ecf0ff;
  border-left: 10px solid #ecf0ff;
}
.proof__cta {
  text-align: center;
  margin-top: var(--space-32);
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Process (bright panel + dark step cards)
   ========================================================================== */
.process__panel {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-xl);
  padding: var(--space-48);
}
.process__head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-40);
  align-items: end;
  margin-bottom: var(--space-40);
}
.process__head-left .section__title {
  margin-top: var(--space-16);
  max-width: 470px;
}
.process__head-text {
  color: rgba(255, 255, 255, 0.82);
  padding-bottom: var(--space-8);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}
.process-step {
  position: relative;
  overflow: hidden;
  background: #05278f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-28);
}
.process-step::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
}
.process-step--tl::after {
  top: 10px;
  left: 10px;
  border-top: 2px solid #1e3c9a;
  border-left: 2px solid #1e3c9a;
  border-top-left-radius: var(--radius-lg);
}
.process-step--br::after {
  bottom: 10px;
  right: 10px;
  border-bottom: 2px solid #1e3c9a;
  border-right: 2px solid #1e3c9a;
  border-bottom-right-radius: var(--radius-lg);
}
.process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(200, 202, 255, 0.15);
  color: #c8caff;
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-24);
}
.process-step__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: #fff;
  margin-bottom: var(--space-8);
}
.process-step__desc {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
}

/* ==========================================================================
   Discipline (split + accordion)
   ========================================================================== */
.discipline {
  background: linear-gradient(
    180deg,
    #1a48ff 0%,
    #1a48ff 60%,
    #8ea0ee 82%,
    #f4f6fb 100%
  );
  padding-bottom: var(--space-128);
}
.discipline__inner {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: var(--space-56);
  align-items: start;
}
.discipline__aside {
  position: sticky;
  top: 110px;
}
.discipline__aside .section__title {
  margin-top: var(--space-16);
}
.discipline__aside .section__lead {
  max-width: 400px;
}
.discipline__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.disc-item {
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: background 0.2s;
}
.disc-item.is-open {
  background: rgb(255 255 255 / 80%);
  box-shadow: var(--shadow-soft);
}
.disc-item__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-24);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.disc-item__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--white);
  color: var(--accent-600);
  flex: none;
}
.disc-item__icon svg {
  width: 20px;
  height: 20px;
}
.disc-item__main {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.disc-item__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
}
.disc-item__text {
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease,
    margin-top 0.3s ease;
}
.disc-item.is-open .disc-item__text {
  max-height: 80px;
  opacity: 1;
  margin-top: var(--space-8);
}
.disc-item__toggle {
  margin-left: auto;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  flex: none;
  transition: transform 0.2s;
}
.disc-item__toggle::before,
.disc-item__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--gray-700);
}
.disc-item__toggle::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.disc-item__toggle::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}
.disc-item.is-open .disc-item__toggle {
  transform: rotate(45deg);
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta {
  /* background: var(--color-bg-alt); */
  padding-block: var(--space-48) var(--space-64);
}
.final-cta__panel {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-64) var(--space-48);
  box-shadow: var(--shadow-soft);
}
.final-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.final-cta__title {
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.final-cta__text {
  margin: var(--space-16) auto 0;
  max-width: 620px;
  color: var(--color-text-muted);
  font-size: var(--fs-title);
}
.final-cta__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-32);
  flex-wrap: wrap;
}
.final-cta__actions .btn.btn--white {
  border: 1px solid;
}

.final-cta__decor {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 260px;
  height: 220px;
  background: url("../images/cta-after-img.svg") right bottom / contain
    no-repeat;
  pointer-events: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-64);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: var(--space-40);
}
.site-footer__logo {
  color: var(--color-text);
  font-size: var(--fs-h5);
  display: inline-flex;
  align-items: center;
}
.site-footer__logo-img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
.site-footer__about {
  margin-top: var(--space-16);
  color: var(--gray-800);
  font-size: var(--fs-body);
  max-width: 300px;
}
.site-footer__social {
  display: flex;
  gap: var(--space-12);
  margin-top: var(--space-20);
}
.site-footer__social a {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--white);
  background-color: var(--black);
}
.site-footer__social svg {
  width: 18px;
  height: 18px;
}
.site-footer__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-16);
}
.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.site-footer__list a {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
}
.site-footer__list a:hover {
  color: var(--accent-600);
}
.site-footer__build p {
  color: var(--gray-800);
  font-size: var(--fs-body);
  margin-bottom: var(--space-16);
}
/* Narrow footer column — scale the CTA down to fit. */
.site-footer__build .btn {
  padding: 11px 12px 11px 18px;
  font-size: var(--fs-description);
  white-space: normal;
  text-align: left;
}
.site-footer__build .btn .btn__arrow {
  width: 22px;
  height: 22px;
  flex: none;
}
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--space-48);
  padding-block: var(--space-24);
  border-top: 1px solid var(--color-border);
  color: var(--gray-800);
  font-size: var(--fs-body);
}

/* ==========================================================================
   Section backgrounds (home)
   ========================================================================== */
.hero {
  background-image:
    /* linear-gradient( */
      /* 177deg, */
      /* rgba(138, 153, 191, 0.35) 0%, */
      /* rgba(44, 71, 182, 0.55) 55%, */
      /* rgba(31, 62, 198, 0.75) 100% */
    /* ), */ url("../images/home-hero-section-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.industries {
  /* background-image: */
  /* linear-gradient( */
  /* 180deg, */
  /* rgba(255, 255, 255, 0.55) 0%, */
  /* rgba(240, 242, 248, 0.55) 100% */
  /* ), url("../images/home-industry-focus-bg.jpg"); */
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.proof {
  background-color: transparent;
  background-image: url("../images/home-featured-proof-bg.jpg");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  /* background-blend-mode: overlay, normal; */
}

/* ==========================================================================
   Hero block — wrapper backdrop spanning hero + blind-spots.
   Ends where the "What Kelarix Does" section begins.
   ========================================================================== */
.hero-block {
  position: relative;
}
.hero-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/home-top-section-bg.png");
  background-size: 100% 100%;
  background-position: center 0px;
  background-repeat: no-repeat;
  z-index: 9;
  pointer-events: none;
}
.hero-block > * {
  position: relative;
  /* z-index: 1; */
}
/* Let the wrapper backdrop show through hero + blind-spots gradients slightly */
.hero-block .hero,
.hero-block .blind {
  background-color: transparent;
}

/* ==========================================================================
   Proof-block — structural wrapper only.
   The background image + overlay blend now live on .proof itself via
   background-blend-mode (see .proof rule near the top of section backgrounds).
   ========================================================================== */
.proof-block {
  position: relative;
}

/* ==========================================================================
   Section connectors (transitional strips between adjacent sections)
   ========================================================================== */
.section-connector {
  width: 100%;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  line-height: 0;
}
.section-connector--proof-process {
  height: 180px;
  background-image: url("../images/featured-proof_process-connector-img-bg.jpg");
}
.section-connector--process-footer {
  height: 160px;
  background-image: url("../images/footer-process-connector-bg.jpg");
}

@media (max-width: 1024px) {
  .section-connector--proof-process,
  .section-connector--process-footer {
    height: 120px;
  }
}
@media (max-width: 760px) {
  .section-connector--proof-process,
  .section-connector--process-footer {
    height: 80px;
  }
}

/* ==========================================================================
   About page
   ========================================================================== */
/* .about-page {
  background: #1f3ec6;
} */

/* ==========================================================================
   About page — overlay backdrops (hero → POV mid → strategy)
   ========================================================================== */

/* Layer 1 (top overlay): about-overlay-img-2sections.png
   Spans hero + why + POV head. Ends at POV cards (mid of POV section). */
.about-hero-block {
  position: relative;
  isolation: isolate;
}
.about-hero-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/about-us/about-overlay-img-2sections.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
.about-hero-block > * {
  position: relative;
  z-index: 1;
}
/* Kill inner section colors so the wrapper backdrop shows */
.about-hero-block .about-why,
.about-hero-block .about-pov--head-only {
  background: transparent;
}
.about-pov--head-only {
  padding-block: 0 var(--space-40);
}

/* Layer 2 (below overlay): business-problem__strategy-lead.png
   Starts where overlay ends. Negative margin pulls it up under the overlay
   so bottom of overlay-img overlays on top of business-problem image. */
.about-strategy-block {
  position: relative;
  margin-top: -160px;
  padding-top: 0;
  background-image: url("../images/about-us/business-problem__strategy-lead.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.about-strategy-block .about-pov--cards-only,
.about-strategy-block .about-strategy {
  background: transparent;
}
.about-strategy-block .about-strategy::before {
  display: none; /* remove any layered arch decor since bg does the work */
}
.about-pov--cards-only {
  padding-block: var(--space-40) var(--space-64);
}

/* Layer 3: marquee bg wraps the Our Discipline section */
.about-marquee-block {
  position: relative;
  background-image: url("../images/about-us/marquee-bg-img.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.about-marquee-block .about-discipline {
  background: transparent;
}
.about-marquee-block .about-discipline::before {
  display: none;
}

/* Layer 4: footer backdrop — wraps 'What Makes Kelarix Different' + Final CTA,
   closes right before the site <footer>. */
.about-footer-block {
  position: relative;
  background-image: url("../images/about-us/footer-before-bg.png");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.about-footer-block .about-different {
  background: transparent;
}
.about-footer-block .about-different::before {
  display: none;
}
.about-footer-block .about-final-cta {
  background: transparent;
}

@media (max-width: 760px) {
  .about-strategy-block {
    margin-top: -140px;
    padding-top: 0;
  }
}

/* Hero override: give more space and center on smaller */
.about-hero {
  padding-bottom: var(--space-96);
  position: relative;
  z-index: 2;
}
.about-hero__inner {
  max-width: 780px;
}
.about-hero__title {
  font-size: clamp(34px, 5vw, 56px);
}

/* Why Kelarix Exists */
.about-why {
  background: linear-gradient(180deg, #1f3ec6 0%, #2143cc 60%, #2548d4 100%);
  color: var(--color-text-on-dark);
  padding-block: var(--space-96);
  position: relative;
  overflow: hidden;
}
.about-why::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/arch-blue.svg") center / cover no-repeat;
  opacity: 0.4;
  pointer-events: none;
}
.about-why__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.about-why__title {
  margin-top: var(--space-20);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
}
.about-why__body {
  margin-top: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-body);
  line-height: 1.75;
  max-width: 720px;
  margin-inline: auto;
}
.about-why__quote {
  margin-top: var(--space-40);
  background: rgba(10, 25, 90, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-24) var(--space-32);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-title);
  max-width: 620px;
  margin-inline: auto;
  backdrop-filter: blur(8px);
}

.about-why__quote p {
  font-size: 24px;
}

/* Point of View */
.about-pov {
  background: linear-gradient(180deg, #2548d4 0%, #274cd8 50%, #2a4ed8 100%);
  color: var(--color-text-on-dark);
  padding-block: var(--space-96);
  position: relative;
  overflow: hidden;
}
/* .about-pov::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/arch-blue.svg") center / cover no-repeat;
  opacity: 0.28;
  pointer-events: none;
} */
.about-pov > .container {
  position: relative;
  z-index: 1;
}
.about-pov__head {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.about-pov__title {
  margin-top: var(--space-20);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
}
.about-pov__text {
  margin-top: var(--space-20);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-body);
  line-height: 1.7;
  max-width: 720px;
  margin-inline: auto;
}
.about-pov__carousel {
  margin-top: var(--space-48);
  position: relative;
}
.about-pov__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(280px, 68%);
  gap: var(--space-16);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: var(--space-12);
  scrollbar-width: none;
  will-change: scroll-position;
}
.about-pov__track::-webkit-scrollbar {
  height: 0;
}
.pov-card {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  background: rgb(255, 255, 255, 90%);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  color: var(--color-text);
  box-shadow: var(--shadow-extra-soft);
  display: flex;
  flex-direction: column;
}
.about-pov__controls {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin-top: var(--space-28);
}
.about-pov__nav {
  display: flex;
  gap: var(--space-12);
  flex: none;
}
/* Dark-context override — same transparent style for both arrows */
.about-pov__nav .carousel-btn {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  background: transparent;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}
.about-pov__nav .carousel-btn:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.about-pov__progress {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.24);
  border-radius: 2px;
  overflow: hidden;
}
.about-pov__progress span {
  display: block;
  height: 100%;
  width: 33%;
  background: #fff;
  border-radius: 2px;
  transition:
    width 0.25s ease,
    margin-left 0.25s ease;
}
.pov-card__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-100);
  color: var(--accent-600);
  margin-bottom: var(--space-20);
}
.pov-card__icon svg {
  width: 20px;
  height: 20px;
}
.pov-card__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
  line-height: 1.35;
}
.pov-card__text {
  font-size: var(--fs-description);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Strategy & Execution — LIGHT background */
.about-strategy {
  background: linear-gradient(180deg, #eef2fb 0%, #e6ecf8 50%, #dde5f4 100%);
  color: var(--color-text);
  padding-block: var(--space-96);
  position: relative;
  overflow: hidden;
}
.about-strategy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/arch-light.svg") center / cover no-repeat;
  opacity: 0.45;
  pointer-events: none;
}
.about-strategy > .container {
  position: relative;
  z-index: 1;
}
.about-strategy__head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-40);
  align-items: end;
  margin-bottom: var(--space-40);
}
.about-strategy__title {
  margin-top: var(--space-20);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  color: var(--color-text);
}
.about-strategy__text {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.about-strategy__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-20);
}
.strat-card {
  position: relative;
  background: #05278f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  overflow: hidden;
  color: #fff;
}

.strat-card:nth-child(3):after,
.strat-card:not(:last-child):after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
  bottom: 10px;
  right: 10px;
  border-bottom: 2px solid #1e3c9a;
  border-right: 2px solid #1e3c9a;
  border-bottom-right-radius: var(--radius-lg);
}

.strat-card:nth-child(1):after {
  bottom: 0px;
  right: 0px;
  top: 10px;
  left: 10px;
  border-bottom: 0px solid #1e3c9a;
  border-top: 2px solid #1e3c9a;
  border-right: 0px solid #1e3c9a;
  border-left: 2px solid #1e3c9a;
  border-top-left-radius: var(--radius-lg);
}

.strat-card__badge {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  margin-bottom: var(--space-20);
}
.strat-card__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-12);
  line-height: 1.3;
}
.strat-card__text {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}
.strat-card--cta {
  background: var(--accent-500);
  border-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}
.strat-card__cta-text {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: #fff;
  line-height: 1.3;
  max-width: 240px;
}
.strat-card__cta-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  flex: none;
}

/* Structured Path */
.about-path {
  background: #fff;
  padding-block: var(--space-96);
}
.about-path__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-64);
  align-items: start;
}
.about-path__aside {
  position: sticky;
  top: 110px;
}
.about-path__title {
  margin-top: var(--space-16);
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  color: var(--color-text);
}
.about-path__text {
  margin-top: var(--space-16);
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
  max-width: 460px;
}
.about-path__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-28);
}
.about-path__actions a {
  width: 100%;
  max-width: 320px;
}
.about-path__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.path-step {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #c8caff;
  border-radius: var(--radius-lg);
  padding: var(--space-28) var(--space-32);
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.path-step:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}
.path-step::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
}
.path-step--tr::after {
  top: 10px;
  right: 10px;
  border-top: 2px solid #c8caff;
  border-right: 2px solid #c8caff;
  border-top-right-radius: var(--radius-lg);
}
.path-step--bl::after {
  bottom: 10px;
  left: 10px;
  border-bottom: 2px solid #c8caff;
  border-left: 2px solid #c8caff;
  border-bottom-left-radius: var(--radius-lg);
}
.path-step__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--accent-100);
  color: var(--accent-600);
  margin-bottom: var(--space-20);
}
.path-step__icon svg {
  width: 22px;
  height: 22px;
}
.path-step__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
  position: relative;
  z-index: 1;
}
.path-step__text {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.6;
  max-width: 78%;
  position: relative;
  z-index: 1;
}

/* About Discipline */
.about-discipline {
  background: linear-gradient(180deg, #f4f6fb 0%, #e8edf8 100%);
  padding-block: var(--space-96);
  position: relative;
  overflow: hidden;
}
.about-discipline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/arch-light.svg") center bottom / cover no-repeat;
  opacity: 0.6;
  pointer-events: none;
}
.about-discipline > .container {
  position: relative;
  z-index: 1;
}
.about-discipline__head {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.about-discipline__title {
  margin-top: var(--space-20);
  color: var(--color-text);
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
}
.about-discipline__text {
  margin-top: var(--space-16);
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
  max-width: 640px;
  margin-inline: auto;
}
.about-discipline__marquees {
  margin-top: var(--space-48);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  position: relative;
  z-index: 1;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}
.marquee__track {
  display: flex;
  gap: var(--space-16);
  width: max-content;
  animation: marquee-scroll 42s linear infinite;
}
.marquee--left .marquee__track {
  animation-direction: reverse;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.3333%);
  }
}
.marquee .ad-card {
  flex: none;
  width: 280px;
}
.ad-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(200, 202, 255, 0.6);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  backdrop-filter: blur(6px);
}
.ad-card__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-100);
  color: var(--accent-600);
  margin-bottom: var(--space-20);
}
.ad-card__icon svg {
  width: 20px;
  height: 20px;
}
.ad-card__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
  line-height: 1.35;
}
.ad-card__text {
  font-size: var(--fs-description);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.about-discipline__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-48);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Confidentiality Mindset */
.about-confidentiality {
  padding-block: var(--space-96);
  overflow: hidden;
}
.about-confidentiality__watermark {
  margin-top: var(--space-32);
  text-align: center;
}
.about-confidentiality__watermark img {
  width: 100%;
  max-width: 1100px;
}
.about-confidentiality__body {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: -50px auto 0;
  text-align: center;
}
.about-confidentiality__body p {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.about-confidentiality__body p + p {
  margin-top: var(--space-20);
}
.about-confidentiality__quote {
  position: relative;
  z-index: 1;
  overflow: hidden;
  max-width: 480px;
  margin: var(--space-40) auto 0;
  background: #05278f;
  border-radius: var(--radius-lg);
  padding: var(--space-20) var(--space-32);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-title);
  text-align: center;
}
.about-confidentiality__quote::after {
  content: "";
  position: absolute;
  right: var(--space-16);
  bottom: var(--space-12);
  width: 32px;
  height: 32px;
  background: url("../images/about-us/goal-after-section-img.svg")
    center/contain no-repeat;
  opacity: 0.55;
  pointer-events: none;
}

/* What Makes Kelarix Different */
.about-different {
  background: linear-gradient(180deg, #1a48ff 0%, #143ef3 60%, #0032e6 100%);
  color: var(--color-text-on-dark);
  padding-block: var(--space-96);
  position: relative;
  overflow: hidden;
}
.about-different::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/arch-blue.svg") center / cover no-repeat;
  opacity: 0.32;
  pointer-events: none;
}
.about-different__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: var(--space-56);
  align-items: start;
}
.about-different__aside {
  align-self: start;
}
.about-different__title {
  margin-top: var(--space-20);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
}
.about-different__text {
  margin-top: var(--space-20);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-body);
  line-height: 1.7;
  max-width: 400px;
}
.about-different__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.diff-item {
  position: relative;
  overflow: hidden;
  background: rgb(255, 255, 255, 90%);
  color: var(--color-text);
  border: 1px solid #c8caff;
  border-radius: var(--radius-lg);
  transition:
    box-shadow 0.2s,
    transform 0.18s ease;
}
/* .diff-item::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  top: 10px;
  right: 10px;
  border-top: 2px solid #c8caff;
  border-right: 2px solid #c8caff;
  border-top-right-radius: var(--radius-lg);
  pointer-events: none;
  opacity: 0.55;
} */
.diff-item.is-open {
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}
.diff-item__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-24);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  position: relative;
  z-index: 1;
}
.diff-item__dot {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #c8caff;
  color: var(--accent-600);
  flex: none;
  box-shadow: 0 1px 3px rgba(20, 35, 90, 0.06);
}
.diff-item__dot svg {
  width: 14px;
  height: 14px;
}
.diff-item__title {
  flex: 1;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}
.diff-item__toggle {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  flex: none;
  transition: transform 0.2s;
}
.diff-item__toggle::before,
.diff-item__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--gray-700);
}
.diff-item__toggle::before {
  width: 10px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.diff-item__toggle::after {
  width: 2px;
  height: 10px;
  transform: translate(-50%, -50%);
}
.diff-item.is-open .diff-item__toggle {
  transform: rotate(45deg);
}
.diff-item__body {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.35s ease,
    padding 0.35s ease;
  color: var(--color-text-muted);
  padding: 0 var(--space-24) 0 68px;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.diff-item.is-open .diff-item__body {
  max-height: 200px;
  padding: 0 var(--space-24) var(--space-20) 68px;
}

/* About final CTA reuses .final-cta from homepage */
.about-final-cta {
  background: #f4f6fb;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* ---- Tablet ---- */
@media (max-width: 1024px) {
  .blind__grid,
  .process__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .confidential__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .wkd-cards {
    flex-wrap: wrap;
  }
  .wkd-card {
    flex: 1 1 calc(50% - var(--space-20));
    margin-top: 0 !important;
  }
  .discipline__inner {
    grid-template-columns: 1fr;
  }
  .discipline__aside {
    position: static;
  }
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .blind__head {
    grid-template-columns: 1fr;
    gap: var(--space-20);
  }
  .blind__head-text {
    padding-top: 0;
  }
  .blind__panel {
    padding: var(--space-32);
  }
  .process__head {
    grid-template-columns: 1fr;
    gap: var(--space-20);
    align-items: start;
  }
  .process__head-text {
    padding-bottom: 0;
  }
  .process__panel {
    padding: var(--space-32);
  }
  .hero__inner {
    max-width: 560px;
  }
  .hero__bg {
    width: 100%;
  }

  /* About page tablet */
  .about-strategy__head {
    grid-template-columns: 1fr;
    gap: var(--space-20);
    align-items: start;
  }
  .about-path__inner {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
  .about-path__aside {
    position: static;
  }
  .about-different__inner {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
  .about-different__aside {
    position: static;
  }
  .about-pov__track {
    grid-auto-columns: min(300px, 78%);
  }
  .marquee .ad-card {
    width: 240px;
  }
  .about-strategy__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Mobile ---- */
@media (max-width: 760px) {
  /* Global tight section spacing on mobile — 24px top/bottom */
  .section {
    padding-block: var(--space-24);
  }
  .container {
    padding-inline: var(--space-16);
  }

  /* Headings often hardcode a <br> to control the desktop line break —
     let text wrap naturally on mobile instead */
  h1 br,
  h2 br,
  h3 br,
  h4 br,
  h5 br,
  h6 br {
    display: none;
  }

  .wkd__steps {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }
  .wkd__cascade {
    margin-top: var(--space-48);
    background-size: 95%;
  }
  .wkd-cards {
    flex-direction: column;
  }
  .wkd-card {
    margin-top: 0 !important;
  }
  .wkd__closing {
    font-size: 16px;
  }

  .site-nav,
  .site-header__cta {
    display: none;
  }
  .site-header__toggle {
    display: flex;
    margin-left: auto;
  }
  .site-header__bar {
    padding: 9px 16px;
  }
  .site-header.is-open .site-nav {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-20);
    box-shadow: var(--shadow-medium);
  }
  .site-header.is-open ~ .mobile-floating-cta {
    display: none;
  }
  .site-header.is-open .site-nav__list {
    flex-direction: column;
    gap: var(--space-16);
    align-items: flex-start;
  }
  /* Override global white link color inside the open dropdown so items are readable */
  .site-header.is-open .site-nav__list > li > a {
    color: var(--gray-800);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
  }
  .site-header.is-open .site-nav__list > li > a:hover {
    color: var(--accent-600);
  }

  /* Mega menu: no hover-dropdown on touch — closed by default, renders
     inline (not a floating panel) once tapped open. */
  .site-nav__list li.has-mega-menu {
    width: 100%;
  }
  .mega-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: var(--space-12);
    box-shadow: none;
    border-color: var(--color-border);
    padding: var(--space-12);
  }
  li.has-mega-menu.is-mega-open .mega-menu {
    display: block;
    padding: var(--space-12) 0;
  }
  li.has-mega-menu.is-mega-open .mega-menu__chevron {
    transform: rotate(180deg);
  }
  .mega-menu__inner {
    flex-direction: column;
  }
  .mega-menu__sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .mega-menu__tabs {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
  }
  .mega-menu__cta {
    margin-top: var(--space-12);
    width: 100%;
  }
  .mega-menu__panels {
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-left: 0;
    padding-top: var(--space-12);
    margin-top: var(--space-12);
  }
  .mega-menu__grid {
    grid-template-columns: 1fr;
  }

  /* Hero: building becomes a faint full-width backdrop behind the text */
  .hero {
    padding-top: 130px;
    padding-bottom: var(--space-64);
  }
  .hero__bg {
    width: 100%;
    opacity: 0.35;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
  }
  .hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(14, 24, 70, 0.55) 0%,
      rgba(14, 24, 70, 0.35) 40%,
      rgba(31, 62, 198, 0.55) 75%,
      rgba(31, 62, 198, 0.95) 100%
    );
  }
  .hero__inner {
    max-width: 100%;
  }
  .hero__actions .btn {
    flex: 1 1 auto;
  }
  .blind__panel {
    padding: var(--space-24);
    border-radius: var(--radius-lg);
  }
  .blind__grid,
  .process__grid,
  .confidential__grid,
  .also__grid {
    grid-template-columns: 1fr;
  }
  .proof-item__grid {
    grid-template-columns: 1fr;
  }
  .process__panel {
    padding: var(--space-24);
  }

  .proof-item__content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }
  .proof-item__stat {
    text-align: left;
  }
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
  .site-footer__bottom {
    flex-direction: column;
  }

  /* About page mobile */
  .about-strategy__grid {
    grid-template-columns: 1fr;
  }
  .about-why,
  .about-pov,
  .about-strategy,
  .about-path,
  .about-discipline,
  .about-confidentiality,
  .about-different {
    padding-block: var(--space-64);
  }
  .about-confidentiality__watermark {
    margin-top: var(--space-20);
  }
  .about-confidentiality__body {
    margin-top: var(--space-16);
  }
  .about-confidentiality__quote {
    max-width: none;
    font-size: var(--fs-body);
    padding: var(--space-16) var(--space-24);
  }
  .about-pov__track {
    grid-auto-columns: min(280px, 84%);
  }
  .marquee .ad-card {
    width: 220px;
  }
  .path-step {
    padding: var(--space-20);
    gap: var(--space-16);
  }
  .diff-item__body,
  .diff-item.is-open .diff-item__body {
    padding-left: var(--space-24);
  }
  .about-why__quote {
    font-size: var(--fs-body);
    padding: var(--space-20);
  }

  .about-why__quote p {
    font-size: 16px;
  }

  .about-path__actions .btn,
  .about-discipline__actions .btn {
    flex: 1 1 auto;
  }
  .strat-card {
    padding: var(--space-24);
  }
  .strat-card--cta {
    padding: var(--space-24);
  }

  .eyebrow--chip {
    font-size: 10px;
    padding: 7px 10px;
  }

  .problem-card__cta-text {
    font-size: 16px;
  }
  .final-cta__title {
    font-size: 16px;
    line-height: 1.4;
  }
  .process-step--tl::after,
  .process-step::after,
  .feature-card::after,
  .feature-card--tl::after,
  .problem-card--br::after,
  .problem-card::after,
  .path-step--tr::after,
  .path-step::after,
  .industries::before {
    content: unset;
  }
}

/* ---- Small mobile ---- */
@media (max-width: 420px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Industries page
   ========================================================================== */
.industries-page {
  background: transparent;
}
.industries-hero__inner {
  max-width: 780px;
}
.industries-hero__title {
  font-size: clamp(34px, 5vw, 56px);
}

/* Radial diagram */
.industries-radial {
  background: transparent;
  color: #fff;
  padding-block: var(--space-96);
  position: relative;
  overflow: hidden;
}
.industries-radial::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/arch-blue.svg") center/cover no-repeat;
  opacity: 0.3;
  pointer-events: none;
}
.industries-radial > .container {
  position: relative;
  z-index: 1;
}
.radial {
  position: relative;
  width: min(900px, 96%);
  margin: 0 auto;
}
.radial__img {
  width: 100%;
  height: auto;
  display: block;
}
.radial__ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}
.radial__ring--inner {
  inset: 22%;
}
.radial__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 22px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.radial__k {
  font-size: 52px;
  font-weight: 800;
  color: #1a48ff;
  line-height: 1;
}
.radial__label {
  position: absolute;
  color: #fff;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.radial__label--top {
  top: -4%;
  left: 50%;
  transform: translateX(-50%);
}
.radial__label--right {
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
}
.radial__label--bottom {
  bottom: -6%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.radial__label--left {
  top: 50%;
  left: -8%;
  transform: translateY(-50%);
  text-align: center;
}
.radial__node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.radial__node-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #fff;
  color: var(--accent-600);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.radial__node-icon svg {
  width: 32px;
  height: 32px;
}
.radial__node-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  max-width: 130px;
}
.radial__node--1 {
  top: 8%;
  left: 18%;
}
.radial__node--2 {
  top: 8%;
  right: 18%;
}
.radial__node--3 {
  bottom: 8%;
  left: 18%;
}
.radial__node--4 {
  bottom: 8%;
  right: 18%;
}

/* Better systems intro */
.industries-better {
  background: transparent;
  color: #fff;
  padding-block: var(--space-96);
  position: relative;
  overflow: hidden;
}
.industries-better::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/arch-blue.svg") center/cover no-repeat;
  opacity: 0.28;
  pointer-events: none;
}
.industries-better__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.industries-better__title {
  margin-top: var(--space-20);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.2;
}
.industries-better__body {
  margin-top: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-body);
  line-height: 1.75;
  max-width: 720px;
  margin-inline: auto;
}
.industries-better__quote {
  margin-top: var(--space-40);
  background: rgba(10, 25, 90, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-24) var(--space-32);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-title);
  max-width: 520px;
  text-align: center;
  margin-inline: auto;
  position: relative;
}

.industries-better__quote p {
  font-size: 24px;
  position: relative;
  z-index: 3;
}

.industries-better__quote::after {
  content: "";
  display: block;
  width: 100%;
  height: 80px;
  background: url(../images/about-us/goal-after-section-img.svg) center /
    contain no-repeat;
  pointer-events: none;
  position: absolute;
  max-width: 80px;
  bottom: 0;
  right: 0;
  z-index: 1;
}

/* Industry focus accordion */
.industries-focus {
  background: transparent;
  padding-block: var(--space-96);
}
.industries-focus__title {
  color: var(--color-text);
  margin-top: var(--space-16);
}
.industries-focus__list {
  max-width: 1040px;
  margin: var(--space-48) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.focus-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.focus-item.is-open {
  box-shadow: var(--shadow-soft);
}
.focus-item__head {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-20) 64px var(--space-20) var(--space-24);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
}
.focus-item__tag {
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  color: var(--accent-600);
  flex: none;
}
.focus-item__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
}
.focus-item__toggle {
  position: absolute;
  top: 50%;
  right: var(--space-24);
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  flex: none;
  transition: transform 0.2s;
}
.focus-item__toggle::before,
.focus-item__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--gray-700);
}
.focus-item__toggle::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.focus-item__toggle::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}
.focus-item.is-open .focus-item__toggle {
  transform: translateY(-50%) rotate(45deg);
}
.focus-item__body {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--space-24);
  transition:
    max-height 0.4s ease,
    padding 0.4s ease;
}
.focus-item.is-open .focus-item__body {
  max-height: 1400px;
  padding: 0 var(--space-24) var(--space-32) var(--space-28);
}
.focus-item__sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin: 0 0 var(--space-8);
}
.focus-item__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-16);
}
.focus-item__chips {
  display: flex;
  flex-wrap: wrap;
  /* grid-template-columns: 1fr 1fr; */
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}
.focus-item__chips .chip {
  text-align: left;
  max-width: max-content;
  padding: 14px 16px;
  line-height: 1.5;
}
.focus-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
  margin-top: var(--space-16);
}
.industries-focus__cta {
  text-align: center;
  margin-top: var(--space-32);
}

/* Executive Insights — carousel of kx_insight cards */
.exec-insights__carousel {
  margin-top: var(--space-40);
}
.exec-insights__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(360px, 90%);
  gap: var(--space-20);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: var(--space-12);
  padding-inline-end: var(--space-24);
  scroll-padding-inline-end: var(--space-24);
  scrollbar-width: none;
}
.exec-insights__track::-webkit-scrollbar {
  height: 0;
}
.exec-insight-card {
  scroll-snap-align: start;
  background: #f8f8f8;
  border-radius: var(--radius-lg);
  padding: var(--space-28);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.exec-insight-card__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
  color: var(--accent-600);
  margin-bottom: var(--space-16);
}
.exec-insight-card__icon svg {
  width: 20px;
  height: 20px;
}
.exec-insight-card__icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.exec-insight-card__category {
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  color: var(--accent-600);
  margin-bottom: var(--space-8);
}
.exec-insight-card__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
  line-height: 1.3;
}
.exec-insight-card__text {
  color: var(--color-text-muted);
  font-size: var(--fs-description);
  line-height: 1.6;
  margin-bottom: var(--space-20);
}
.exec-insight-card__cta {
  margin-top: auto;
  align-self: flex-start;
  background: #fff;
  border-color: var(--accent-500);
  color: var(--accent-600);
}
.exec-insight-card__cta .btn__arrow {
  background: var(--accent-100);
  color: var(--accent-600);
}
.exec-insights__controls {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin-top: var(--space-32);
}
.exec-insights__nav {
  display: flex;
  gap: var(--space-12);
  flex: none;
}
.exec-insights__progress {
  flex: 1;
  height: 3px;
  background: var(--gray-300);
  border-radius: 2px;
  overflow: hidden;
}
.exec-insights__progress span {
  display: block;
  height: 100%;
  width: 33%;
  background: var(--black);
  border-radius: 2px;
  transition:
    width 0.25s ease,
    margin-left 0.25s ease;
}
.exec-insights__cta {
  text-align: center;
  margin-top: var(--space-32);
}

/* Different industries — split + numbered cards */
.industries-diff {
  background: transparent;
  padding-block: var(--space-96);
}
.industries-diff__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-56);
  align-items: start;
}
.industries-diff__aside {
  align-self: start;
  position: sticky;
  top: 120px;
}
.industries-diff__title {
  margin-top: var(--space-16);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
}
.industries-diff__text {
  margin-top: var(--space-16);
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
  max-width: 460px;
}
.industries-diff__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-28);
}
.industries-diff__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.diff-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24) var(--space-28);
  box-shadow: var(--shadow-extra-soft);
}
.diff-card__num {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent-100);
  color: var(--accent-600);
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-16);
}
.diff-card__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
}
.diff-card__text {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* How Kelarix Helps */
.industries-helps {
  padding-block: var(--space-96) var(--space-48);
  position: relative;
}
.industries-helps__title {
  color: var(--color-text);
  margin-top: var(--space-16);
}
.industries-helps__watermark {
  width: 100%;
  margin-top: var(--space-48);
  display: flex;
  justify-content: center;
  padding-inline: var(--space-20);
  pointer-events: none;
}
.industries-helps__watermark img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.industries-helps__flow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-16);
}
.helps-step {
  flex: 1 1 0;
  max-width: 320px;
  background: #05278f;
  border: 8px solid hsl(235deg 100% 81% / 35%);
  border-radius: 24px;
  padding: var(--space-20);
  color: #fff;
}
.helps-step__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
}
.helps-step__text {
  font-size: var(--fs-description);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
}
.helps-step__arrow {
  display: flex;
  flex: none;
  align-items: center;
  color: var(--gray-400);
}
.industries-helps__closing {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: var(--space-40) auto 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
}

/* Also relevant grid */
.industries-also {
  background: #ffffff;
  padding-block: var(--space-48) var(--space-96);
}
.industries-also__title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: var(--fw-bold);
  text-align: center;
  margin-bottom: var(--space-40);
}
.industries-also__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-20);
  max-width: 860px;
  margin: 0 auto var(--space-40);
}
.also-card {
  position: relative;
  display: block;
  background: var(--gray);
  border: 1px solid #eeeeee;
  border-radius: var(--radius-lg);
  padding: var(--space-24) var(--space-28);
  color: var(--color-text);
  transition:
    box-shadow 0.18s,
    transform 0.18s;
}
.also-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}
.also-card__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #d3d5ff;
  background: var(--white);
  padding: 8px;
  color: var(--accent-600);
  margin-bottom: var(--space-16);
}
.also-card__chevron {
  position: absolute;
  top: var(--space-24);
  right: var(--space-24);
  color: var(--gray-500);
}
.also-card__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
}
.also-card__text {
  color: var(--color-text-muted);
  font-size: var(--fs-description);
  line-height: 1.55;
}
.industries-also__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}

/* ---- Industries responsive ---- */
@media (max-width: 1024px) {
  .industries-diff__inner {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
}
@media (max-width: 760px) {
  .industries-radial,
  .industries-better,
  .industries-focus,
  .industries-diff,
  .industries-helps,
  .industries-also {
    padding-block: var(--space-24);
  }
  .industries-also__grid {
    grid-template-columns: 1fr;
  }
  .focus-item__chips {
    grid-template-columns: 1fr;
  }
  .industries-helps__watermark {
    display: none;
  }
  .industries-helps__flow {
    flex-direction: column;
    align-items: stretch;
  }
  .helps-step {
    max-width: none;
  }
  .helps-step__arrow {
    display: none;
  }
  .radial__label {
    font-size: var(--fs-description);
  }
  .radial__node-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }
  .radial__node-icon svg {
    width: 24px;
    height: 24px;
  }
  .radial__node-label {
    font-size: var(--fs-description);
    max-width: 90px;
  }
  .radial__center {
    width: 80px;
    height: 80px;
    border-radius: 16px;
  }
  .radial__k {
    font-size: 38px;
  }
  .industries-better__quote p {
    font-size: 16px;
  }
}

/* ==========================================================================
   Industries page — background image wrappers
   ========================================================================== */

/* Backdrop 1: top-sections-bg — wraps hero + radial + better-systems head */
.ind-top-block {
  position: relative;
  background-image: url("../images/industry/top-sections-bg.png");
  background-size: 100% 100%;
  background-position: center -110px;
  background-repeat: no-repeat;
}
.ind-top-block .industries-hero,
.ind-top-block .industries-radial,
.ind-top-block .industries-better--head-only {
  background: transparent;
}
.ind-top-block .industries-radial::before,
.ind-top-block .industries-better--head-only::before {
  display: none;
}

/* Radial diagram gets industries-img.svg as decorative bg image */
.industries-radial {
  background-image: url("../images/industry/industries-img.svg");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Backdrop 2: industry-focus-section-bg — wraps quote card + industry accordion */
.ind-focus-block {
  position: relative;
  background-image: url("../images/industry/industry-focus-section-bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: -270px;
  padding-top: 160px;
}
.ind-focus-block .industries-better--quote-only,
.ind-focus-block .industries-focus {
  background: transparent;
}
.industries-better--quote-only {
  padding-block: var(--space-40) var(--space-40);
}

/* Backdrop 3: featured-proof-footerend-bg — wraps proof + our-value + final-cta */
.ind-footer-block {
  position: relative;
  background-image: url("../images/industry/featured-proof-footerend-bg.png");
  background-size: 100% 85%;
  background-position: center 0px;
  background-repeat: no-repeat;
}
.ind-footer-block .industries-value,
.ind-footer-block .industries-final-cta {
  background: transparent;
}
.ind-footer-block .discipline {
  background: transparent;
}

/* ==========================================================================
   Proof page
   ========================================================================== */
.proof-page {
  background: transparent;
}

/* Hero */
.proof-top-block {
  position: relative;
  background-image: url("../images/proof/hero-btoomt-overlya-img.png");
  background-size: 100% 100%;
  background-position: center 60px;
  background-repeat: no-repeat;
}
.proof-hero {
  padding-bottom: var(--space-40);
  background-image: url("../images/proof/hero-section-bg-img.png");
}
.proof-hero .hero__bg {
  display: none;
}
.proof-hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-48);
  align-items: center;
  position: relative;
  z-index: 1;
}
.proof-hero__text {
  max-width: 640px;
}
.proof-hero__title {
  font-size: clamp(34px, 5vw, 56px);
}
.proof-hero__visual img {
  width: 100%;
  max-width: 480px;
  height: auto;
  margin-left: auto;
  display: block;
}

/* Different (comparison) */
.proof-different {
  background: transparent;
  color: #fff;
  padding-block: var(--space-40) var(--space-96);
}
.proof-different__head {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.proof-different__title {
  margin-top: var(--space-20);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.2;
}
.proof-different__body {
  margin-top: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.75;
  max-width: 720px;
  margin-inline: auto;
}
/* Compare card — staggered: Kelarix upper-left, Traditional lower-right */
.proof-compare {
  margin-top: 80px;
  position: relative;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-40) var(--space-40) var(--space-40) 35%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  max-width: 785px;
  margin-inline: auto;
  min-height: 340px;
}
.proof-compare__card {
  color: var(--color-text);
  position: relative;
}
.proof-compare__card--kelarix {
  position: absolute;
  top: -30px;
  left: 20px;
  width: 40%;
  background: var(--accent-500);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  box-shadow: 0 24px 60px rgba(26, 72, 255, 0.35);
  z-index: 2;
}
.proof-compare__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fff;
  margin-bottom: var(--space-16);
}
.proof-compare__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-20);
}
.proof-compare__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.proof-compare__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-body);
}
.proof-compare__tick {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent-500);
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex: none;
  margin-top: 2px;
}
.proof-compare__card--trad .proof-compare__tick {
  background: var(--accent-500);
  color: #fff;
}
.proof-different__quote {
  margin-top: var(--space-40);
  background: rgba(10, 25, 90, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-24) var(--space-64);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-title);
  max-width: 785px;
  margin-inline: auto;
  text-align: center;
  position: relative;
  z-index: 99;
}

.proof-different__quote p {
  font-size: 24px;
}

.proof-different__quote::after {
  content: "";
  display: block;
  width: 100%;
  height: 80px;
  background: url(../images/about-us/goal-after-section-img.svg) center /
    contain no-repeat;
  pointer-events: none;
  position: absolute;
  max-width: 80px;
  bottom: 0;
  right: 0;
  z-index: -9;
}
/* Mid block (demonstrate + case studies) */
.proof-mid-block {
  position: relative;
  background-image: url("../images/proof/how-wedemontrate_case-study-bg-img.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  margin-top: -120px;
  padding-top: 100px;
}

/* Demonstrate — 6 numbered cards on gradient */
.proof-demonstrate {
  background: transparent;
  color: #fff;
  padding-block: var(--space-96);
}
.proof-demonstrate__title {
  margin-top: var(--space-20);
  color: #fff;
}
.proof-demonstrate__grid {
  margin-top: var(--space-48);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}
.demo-card {
  background: #05278f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-28);
  color: #fff;
}
.demo-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(200, 202, 255, 0.15);
  color: #c8caff;
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-24);
}
.demo-card__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-12);
}
.demo-card__text {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
}
.proof-demonstrate__cta {
  text-align: center;
  margin-top: var(--space-32);
}

/* Case Studies accordion */
.proof-cases {
  background: transparent;
  padding-block: var(--space-96);
}
.proof-cases__title {
  color: var(--color-text);
  margin-top: var(--space-16);
}
.proof-cases__list {
  max-width: 1040px;
  margin: var(--space-48) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.pcase {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.pcase.is-open {
  box-shadow: var(--shadow-soft);
}
.pcase__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding: var(--space-20) var(--space-24);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
}
.pcase__tag {
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  color: var(--accent-600);
  flex: none;
}
.pcase__title {
  flex: 1;
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
}
.pcase__toggle {
  margin-left: auto;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  flex: none;
  transition: transform 0.2s;
}
.pcase__toggle::before,
.pcase__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--gray-700);
}
.pcase__toggle::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.pcase__toggle::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}
.pcase.is-open .pcase__toggle {
  transform: rotate(45deg);
}
.pcase__body {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--space-24);
  transition:
    max-height 0.4s ease,
    padding 0.4s ease;
}
.pcase.is-open .pcase__body {
  max-height: 900px;
  padding: 0 var(--space-24) var(--space-28);
}
.pcase__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
}
.pcase__sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin: 0 0 var(--space-12);
}
.pcase__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-20);
}
.pcase__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-20);
}
.proof-cases__cta {
  text-align: center;
  margin-top: var(--space-32);
}

/* Frameworks (split) */
.proof-frameworks {
  background: #fff;
  padding-block: var(--space-96);
}
.proof-frameworks__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-56);
  align-items: start;
}
.proof-frameworks__aside {
  align-self: start;
  position: sticky;
  top: 120px;
}
.proof-frameworks__title {
  margin-top: var(--space-16);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
}
.proof-frameworks__text {
  margin-top: var(--space-16);
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
  max-width: 460px;
}
.proof-frameworks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-28);
}
.proof-frameworks__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
/* Framework card — offset outline behind card (design accent) */
.fw-card {
  position: relative;
  background: #fff;
  border: 1px solid #c8caff;
  border-radius: var(--radius-lg);
  padding: var(--space-24) var(--space-28);
  transition:
    box-shadow 0.18s,
    transform 0.18s;
}
.fw-card::before {
  content: "";
  position: absolute;
  inset: 6px -6px -6px 6px;
  border-radius: 12px 0px 12px 0px;
  z-index: 1;
  width: 140px;
  height: 130px;
  border-top: 1px solid #c8caff;
  border-left: 1px solid #c8caff;
  left: 10px;
  top: 10px;
}
.fw-card:nth-child(even):before {
  content: "";
  position: absolute;
  inset: 6px -6px -6px 6px;
  border-radius: 12px 0px 12px 0px;
  z-index: 1;
  width: 140px;
  height: 130px;
  border-top: 0px solid #c8caff;
  border-left: 0px solid #c8caff;
  border-bottom: 1px solid #c8caff;
  border-right: 1px solid #c8caff;
  bottom: 10px;
  right: 10px;
  top: unset;
  left: unset;
}
.fw-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}
.fw-card__num {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent-100);
  color: var(--accent-600);
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-16);
}
.fw-card__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
}
.fw-card__text {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* What proves — bg image + two marquee rows */
.proof-what {
  background-image: url("../images/industry/how-kelarix-help-bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: var(--space-96);
  position: relative;
  overflow: hidden;
}
.proof-what::before {
  display: none;
}
.proof-what > .container {
  position: relative;
  z-index: 1;
}
.proof-what__title {
  color: var(--color-text);
  margin-top: var(--space-16);
}
.proof-what__marquees {
  margin-top: var(--space-48);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  position: relative;
  z-index: 1;
}
.proof-what__marquees .marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}
.proof-what__marquees .marquee__track {
  display: flex;
  gap: var(--space-16);
  width: max-content;
  animation: marquee-scroll 42s linear infinite;
}
.proof-what__marquees .marquee--left .marquee__track {
  animation-direction: reverse;
}
.proof-what__marquees .marquee:hover .marquee__track {
  animation-play-state: paused;
}
.proof-what__marquees .what-tile {
  flex: none;
  width: 300px;
}

.what-tile {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  backdrop-filter: blur(6px);
}
.what-tile__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-100);
  color: var(--accent-600);
  margin-bottom: var(--space-20);
}
.what-tile__icon svg {
  width: 20px;
  height: 20px;
}
.what-tile__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}
.proof-what__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-48);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Library — 5 industry columns */
.proof-library {
  background: #fff;
  padding-block: var(--space-96);
}
.proof-library__title {
  color: var(--color-text);
  margin-top: var(--space-16);
}
.proof-library__grid {
  margin-top: var(--space-48);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.lib-col {
  padding: var(--space-32) var(--space-24);
  border-right: 1px solid var(--color-border);
}
.lib-col:last-child {
  border-right: 0;
}
.lib-col__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-100);
  color: var(--accent-600);
  margin-bottom: var(--space-20);
}
.lib-col__icon svg {
  width: 20px;
  height: 20px;
}
.lib-col__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-20);
}
.lib-col__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.lib-col__list li {
  display: flex;
  gap: 10px;
  font-size: var(--fs-description);
  color: var(--color-text-muted);
  line-height: 1.5;
  align-items: flex-start;
}
.lib-col__tick {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-500);
  color: #fff;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 2px;
}

/* Library block — wraps Library + Final CTA. Bg image lives here
   and is positioned so it dominates the LOWER half (Library top stays clean). */
.proof-library-block {
  position: relative;
  background-image: url("../images/proof/footer-bg-img-proof.png");
  background-size: 100% 75%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.proof-library-block .proof-library,
.proof-library-block .proof-final-cta {
  background: transparent;
}

/* ---- Proof responsive ---- */
@media (max-width: 1024px) {
  .proof-hero__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .proof-hero__visual {
    max-width: 340px;
    margin: 0 auto;
  }
  .proof-demonstrate__grid,
  .proof-what__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .proof-library__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lib-col {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .lib-col:nth-child(2n) {
    border-right: 0;
  }
  .proof-frameworks__inner {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
  .pcase__grid {
    grid-template-columns: 1fr;
  }
  .proof-compare {
    grid-template-columns: 1fr;
  }
  .proof-compare__card--kelarix {
    margin: 12px;
  }
}
@media (max-width: 760px) {
  .proof-hero,
  .proof-different,
  .proof-demonstrate,
  .proof-cases,
  .proof-frameworks,
  .proof-what,
  .proof-library {
    padding-block: var(--space-40);
  }
  .proof-demonstrate__grid,
  .proof-what__grid {
    grid-template-columns: 1fr;
  }
  .proof-library__grid {
    grid-template-columns: 1fr;
  }
  .proof-compare__card {
    padding: var(--space-24);
  }
  .proof-frameworks__actions .btn,
  .proof-what__actions .btn {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   Homepage backdrops — hp-proof-block + hp-footer-block
   ========================================================================== */
.hp-proof-block {
  position: relative;
  background-image: url("../images/home-featured-proof-bg.jpg");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
}
.hp-proof-block .confidential,
.hp-proof-block .proof {
  background: transparent;
}
.hp-proof-block .proof__bg {
  display: none;
}

.hp-footer-block {
  position: relative;
  background-image: url("../images/home-footer-bg-img.png");
  background-size: 100% 100%;
  background-position: center 300px;
  background-color: #1a48fc;
  background-repeat: no-repeat;
}
.hp-footer-block .process,
.hp-footer-block .discipline,
.hp-footer-block .final-cta {
  background: transparent;
}
.hp-footer-block .discipline::before,
.hp-footer-block .final-cta::before {
  display: none;
}

/* Homepage backdrops use fixed-ratio background-size (100% 100%, 100% 85%,
   100% 77%) tuned for wide desktop sections — on narrow mobile viewports
   that stretches/distorts the artwork, so switch every one to cover. */
@media (max-width: 760px) {
  .industries,
  .proof,
  .hp-proof-block,
  .hp-footer-block {
    background-size: cover;
  }
}

/* ==========================================================================
   Mobile floating CTA (hidden on desktop, full-width bar button on mobile)
   ========================================================================== */
.mobile-floating-cta {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2147483647; /* max — always on top */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: var(--accent-500);
  color: #fff;
  box-shadow:
    0 14px 32px rgba(26, 72, 255, 0.42),
    0 0 0 6px rgba(26, 72, 255, 0.1);
  text-decoration: none;
  transition:
    box-shadow 0.15s ease,
    background 0.15s ease,
    transform 0.25s ease,
    opacity 0.25s ease;
}
.mobile-floating-cta:hover,
.mobile-floating-cta:focus-visible {
  background: var(--accent-600);
}
/* Hidden once the footer scrolls into view, or while the hero's own CTA
   buttons are on screen — see main.js IntersectionObserver */
.mobile-floating-cta.is-hidden,
.mobile-floating-cta.is-hidden-hero {
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
}
.mobile-floating-cta__text {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-floating-cta__arrow {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent-600);
}

@media (max-width: 760px) {
  .mobile-floating-cta {
    display: flex;
  }

  /* Case-study accordion: icon + tag on top, title + toggle in one row */
  .pcase__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "icon  tag   tag"
      "title title toggle";
    gap: 10px 12px;
    align-items: center;
  }
  .pcase__icon {
    grid-area: icon;
  }
  .pcase__tag {
    grid-area: tag;
    justify-self: start;
  }
  .pcase__title {
    grid-area: title;
  }
  .pcase__toggle {
    grid-area: toggle;
    margin-left: 0;
  }
}

/* ==========================================================================
   About page — about-why-block backdrop (about-bg-sectio-2.png)
   Wraps why + POV head. Sits between hero-block (hero only) and strategy-block.
   ========================================================================== */
.about-why-block {
  position: relative;
  background-image: url("../images/about-us/about-bg-sectio-2.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.about-why-block .about-why,
.about-why-block .about-pov--head-only {
  background: transparent;
}
.about-why-block .about-why::before {
  display: none;
}

/* ==========================================================================
   Industries page — ind-footer-block (Our Value + Final CTA)
   Background swapped to relevant-bg-footer-cta.png
   ========================================================================== */
.ind-footer-block {
  background-image: url("../images/industry/relevant-bg-footer-cta.png");
}

/* ==========================================================================
   About / Proof — card transparency overrides
   ========================================================================== */
.ad-card {
  background: rgba(255, 255, 255, 0.4);
}
.proof-what__marquees .what-tile,
.what-tile {
  background: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   Industries "Common Operating Problems" — diff-card polish + alt L-accents
   ========================================================================== */
.diff-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #c8caff;
  box-shadow: none;
}
.diff-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
}
/* Odd cards (1, 3, 5) → bottom-right accent */
.industries-diff__list .diff-card:nth-child(odd)::after {
  bottom: 10px;
  right: 10px;
  border-bottom: 2px solid #c8caff;
  border-right: 2px solid #c8caff;
  border-bottom-right-radius: var(--radius-lg);
}
/* Even cards (2, 4, 6) → top-left accent */
.industries-diff__list .diff-card:nth-child(even)::after {
  top: 10px;
  left: 10px;
  border-top: 2px solid #c8caff;
  border-left: 2px solid #c8caff;
  border-top-left-radius: var(--radius-lg);
}
.diff-card > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Proof — Future Proof Library card border + rounded top corners only
   ========================================================================== */
.lib-col {
  border: 1px solid #c8caff;
  border-radius: 0;
}
.proof-library__grid .lib-col:first-child {
  border-top-left-radius: var(--radius-lg);
}
.proof-library__grid .lib-col:last-child {
  border-top-right-radius: var(--radius-lg);
}

/* ==========================================================================
   About — decorative image below quote card (pseudo, no extra DOM)
   ========================================================================== */
.about-why__quote {
  position: relative;
}
.about-why__quote::after {
  content: "";
  display: block;
  /* margin: var(--space-32) auto 0; */
  width: 100%;
  height: 80px;
  background: url("../images/about-us/goal-after-section-img.svg")
    center/contain no-repeat;
  pointer-events: none;
  position: absolute;
  max-width: 80px;
  bottom: 0;
  right: 0;
  z-index: -9;
}

/* ==========================================================================
   Nav breakpoint — hide desktop nav from 991px down, show hamburger
   ========================================================================== */
@media (max-width: 991px) {
  .site-nav,
  .site-header__cta {
    display: none;
  }
  .site-header__toggle {
    display: flex;
    margin-left: auto;
  }
  .site-header.is-open .site-nav {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-20);
    box-shadow: var(--shadow-medium);
  }
  .site-header.is-open ~ .mobile-floating-cta {
    display: none;
  }
  .site-header.is-open .site-nav__list {
    flex-direction: column;
    gap: var(--space-16);
    align-items: flex-start;
  }
  .site-header.is-open .site-nav__list > li > a {
    color: var(--gray-800);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
  }
  .site-header.is-open .site-nav__list > li > a:hover {
    color: var(--accent-600);
  }
  .mobile-floating-cta {
    display: flex;
  }
}

/* ==========================================================================
   Sticky asides — disable on mobile so headings don't overlap cards
   ========================================================================== */
@media (max-width: 991px) {
  .proof-frameworks__aside,
  .industries-diff__aside,
  .about-different__aside,
  .discipline__aside,
  .about-path__aside {
    position: static;
    top: auto;
  }
}

/* ==========================================================================
   Proof compare card — mobile: stack kelarix + traditional cleanly
   ========================================================================== */
@media (max-width: 760px) {
  .proof-compare {
    padding: var(--space-24);
    min-height: 0;
  }
  .proof-compare__card--kelarix {
    position: static;
    width: 100%;
    margin: 0 0 var(--space-20);
    box-shadow: 0 12px 32px rgba(26, 72, 255, 0.28);
  }
}

/* ==========================================================================
   Paired CTAs on mobile — full-width, icon visible, no truncation
   ========================================================================== */
@media (max-width: 760px) {
  .hero__actions,
  .about-path__actions,
  .about-discipline__actions,
  .industries-diff__actions,
  .industries-also__actions,
  .also__actions,
  .final-cta__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
  }
  .hero__actions .btn,
  .about-path__actions .btn,
  .about-discipline__actions .btn,
  .industries-diff__actions .btn,
  .industries-also__actions .btn,
  .also__actions .btn,
  .final-cta__actions .btn {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 13px 18px;
    justify-content: space-between;
    white-space: normal;
    text-align: left;
    line-height: 1.2;
  }
  .hero__actions .btn span:first-child,
  .about-path__actions .btn span:first-child,
  .about-discipline__actions .btn span:first-child,
  .industries-diff__actions .btn span:first-child,
  .industries-also__actions .btn span:first-child,
  .also__actions .btn span:first-child,
  .final-cta__actions .btn span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
  }
  .hero__actions .btn .btn__arrow,
  .about-path__actions .btn .btn__arrow,
  .about-discipline__actions .btn .btn__arrow,
  .industries-diff__actions .btn .btn__arrow,
  .industries-also__actions .btn .btn__arrow,
  .also__actions .btn .btn__arrow,
  .final-cta__actions .btn .btn__arrow {
    flex: none;
    margin-left: 12px;
  }

  /* Homepage proof block — solid brand bg on mobile (backdrop image can wash out) */
  .section.proof {
    background-color: #1a48fd;
  }
}

/* ==========================================================================
   Footer — email mailto link accent
   ========================================================================== */
.site-footer__email {
  color: var(--accent-600);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.site-footer__email:hover {
  text-decoration: underline;
}

/* ==========================================================================
   404 page
   ========================================================================== */
.error-404-page {
  background: linear-gradient(180deg, #f4f6fb 0%, #eef2fb 100%);
}
.error-404 {
  padding-block: var(--space-96);
}
.error-404 .container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-64);
  align-items: center;
}
.error-404__code {
  display: inline-block;
  font-size: clamp(80px, 12vw, 140px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent-600);
  margin-bottom: var(--space-16);
}
.error-404__title {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  color: var(--color-text);
  margin-bottom: var(--space-16);
}
.error-404__text {
  color: var(--color-text-muted);
  font-size: var(--fs-title);
  line-height: 1.7;
  max-width: 460px;
  margin-bottom: var(--space-28);
}
.error-404__actions {
  display: flex;
  gap: var(--space-16);
  flex-wrap: wrap;
}
.error-404__glyph svg {
  width: 100%;
  height: auto;
  max-width: 460px;
}
@media (max-width: 991px) {
  .error-404 .container {
    grid-template-columns: 1fr;
    gap: var(--space-40);
    text-align: center;
  }
  .error-404__text {
    margin-inline: auto;
  }
  .error-404__actions {
    justify-content: center;
  }
}

/* ==========================================================================
   What We Build page
   ========================================================================== */
.ww-page {
  background: transparent;
}
.ww-hero__inner {
  max-width: 780px;
}
.ww-hero__title {
  font-size: clamp(34px, 5vw, 56px);
}

/* Backdrop 1: hero-bottom-section.png — hero + diagram */
.ww-hero-block {
  position: relative;
  background-image: url("../images/what-we-build/hero-bottom-section.png");
  background-size: 100% 100%;
  background-position: center 0px;
  background-repeat: no-repeat;
}
.ww-hero-block .ww-hero {
  background: transparent;
  background-image: url("../images/what-we-build/hero-section-img.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
}
.ww-hero-block .ww-hero .hero__bg {
  display: none;
}
.ww-hero-block .ww-hero .hero__overlay {
  display: none;
}

/* Diagram section */
.ww-diagram {
  padding-block: 0;
  background: transparent;
}
.ww-diagram__wrap {
  display: flex;
  justify-content: center;
}
.ww-diagram__img {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
}

/* Key problems (dark panel like homepage blind-spots) */
.ww-key-cards {
  background-image: url("../images/what-we-build/key-problems-img-bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding-block: var(--space-96);
  margin-top: -170px;
  padding-top: 250px !important;
}
.ww-problems::before {
  display: none;
}
.ww-problems__panel {
  /* border: 1px solid rgba(255, 255, 255, 0.18); */
  border-radius: var(--radius-xl);
  padding: var(--space-48);
  /* background: rgba(255, 255, 255, 0.03); */
}
.ww-problems__panel .section__head {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-40);
  text-align: center;
}
.ww-problems__sub {
  text-align: center;
  color: #fff;
  font-size: var(--fs-h4);
  margin-bottom: var(--space-32);
}
.ww-problems__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}

/* Layers section (split + list) */
.ww-layers {
  background: #fff;
  padding-block: var(--space-96);
}
.ww-layers__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-56);
  align-items: start;
}
.ww-layers__aside {
  align-self: start;
  position: sticky;
  top: 120px;
}
.ww-layers__title {
  margin-top: var(--space-16);
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
}
.ww-layers__text {
  margin-top: var(--space-16);
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
  max-width: 460px;
}
.ww-layers__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-28);
}
.ww-layers__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.ww-layer-item {
  position: relative;
  background: #fff;
  border: 1px solid #c8caff;
  border-radius: var(--radius-lg);
  padding: var(--space-24) var(--space-28);
  box-shadow: none;
}
/* Offset outline behind card (design accent) */
.ww-layer-item::after {
  content: "";
  position: absolute;
  /* inset: 8px -8px -8px 8px; */
  z-index: 9;
  pointer-events: none;
  width: 120px;
  height: 120px;
  left: 10px;
  top: 10px;
}
.ww-layer-item:nth-child(odd)::after {
  border-top: 1px solid #c8caff;
  border-top-left-radius: var(--radius-lg);
  border-left: 1px solid #c8caff;
}
.ww-layer-item:nth-child(even)::after {
  right: 10px;
  bottom: 10px;
  border-bottom: 1px solid #c8caff;
  border-bottom-right-radius: var(--radius-lg);
  border-right: 1px solid #c8caff;
  top: unset;
  left: unset;
}
.ww-layer-item__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #c8caff;
  color: var(--accent-500);
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-20);
}
.ww-layer-item__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
}
.ww-layer-item__text {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* Systems We Build accordion */
.ww-systems {
  background-image: url("../images/what-we-build/system-we-build-bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: var(--space-96);
  position: relative;
}
.ww-systems > .container {
  position: relative;
  z-index: 1;
}
.ww-systems__title {
  margin-top: var(--space-16);
  color: var(--color-text);
}
.ww-systems__list {
  max-width: 960px;
  margin: var(--space-48) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.ww-sys-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.ww-sys-item.is-open {
  box-shadow: var(--shadow-soft);
}
.ww-sys-item__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding: var(--space-20) var(--space-24);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
}
.ww-sys-item__tag {
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  color: var(--accent-600);
  flex: none;
}
.ww-sys-item__title {
  flex: 1;
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
}
.ww-sys-item__toggle {
  margin-left: auto;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  flex: none;
  transition: transform 0.2s;
}
.ww-sys-item__toggle::before,
.ww-sys-item__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--gray-700);
}
.ww-sys-item__toggle::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.ww-sys-item__toggle::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}
.ww-sys-item.is-open .ww-sys-item__toggle {
  transform: rotate(45deg);
}
.ww-sys-item__body {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--space-24);
  color: var(--color-text-muted);
  transition:
    max-height 0.35s ease,
    padding 0.35s ease;
}
.ww-sys-item.is-open .ww-sys-item__body {
  max-height: 300px;
  padding: 0 var(--space-24) var(--space-24);
}
.ww-systems__cta {
  text-align: center;
  margin-top: var(--space-32);
}

/* Backdrop 2: one-system-connected-bg-img.png — connected + value + practical */
.ww-connected-block {
  position: relative;
  background-image: url("../images/what-we-build/one-system-connected-bg-img.png");
  background-size: 100% 75%;
  background-position: center 500px;
  background-repeat: no-repeat;
}
.ww-connected-block .ww-connected,
.ww-connected-block .ww-value,
.ww-connected-block .ww-practical {
  background: transparent;
}

/* Connected capabilities */
.ww-connected {
  padding-block: var(--space-96);
}
.ww-connected__title {
  color: var(--color-text);
  margin-top: var(--space-16);
}
.ww-connected__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-16);
  margin-top: var(--space-48);
}
.ww-cap-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
}
.ww-cap-card__num {
  font-size: 11px;
  color: var(--gray-500);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: var(--space-16);
}
.ww-cap-card__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-100);
  color: var(--accent-600);
  margin-bottom: var(--space-16);
}
.ww-cap-card__icon svg {
  width: 20px;
  height: 20px;
}
.ww-cap-card__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
}
.ww-cap-card__text {
  color: var(--color-text-muted);
  font-size: var(--fs-description);
  line-height: 1.6;
}

/* Value quote panel */
.ww-value {
  padding-block: var(--space-40) var(--space-64);
}
.ww-value__panel {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-32) var(--space-40);
  background: #05278f;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  color: #fff;
  text-align: center;
  backdrop-filter: blur(8px);
}
.ww-value__panel p {
  font-size: var(--fs-h4);
  position: relative;
  z-index: 9;
}
.ww-value__panel::after {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 100px;
  height: 80px;
  background: url(../images/what-we-build/kelarx-connected-after-img.svg) right
    bottom / contain no-repeat;
  opacity: 1;
  pointer-events: none;
  z-index: 7;
}
.ww-value__text {
  font-size: var(--fs-title);
  line-height: 1.5;
  font-weight: var(--fw-semibold);
}

/* Practical panel (K side + Business Challenge) */
.ww-practical {
  padding-block: var(--space-64) var(--space-96);
}
.ww-practical__title {
  color: var(--color-text);
  margin-top: var(--space-16);
}
.ww-practical__panel {
  margin-top: var(--space-48);
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--space-40);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-40);
  box-shadow: var(--shadow-soft);
}
.ww-practical__col--k {
  background: var(--accent-500);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  margin: -12px 0 -12px -12px;
}
.ww-practical__k {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff;
  color: var(--accent-600);
  font-weight: 800;
  font-size: 24px;
  margin-bottom: var(--space-16);
}
.ww-practical__sub {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-20);
}
.ww-practical__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  list-style: none;
  padding: 0;
  margin: 0;
}
.ww-practical__list li {
  font-size: var(--fs-body);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}
.ww-practical__col--k .ww-practical__list li::before {
  content: "";
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex: none;
  margin-top: 2px;
}
.ww-practical__check {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-100);
  color: var(--accent-600);
  flex: none;
  margin-top: 2px;
}

/* Backdrop 3: footer-bg-img.png — friction + discipline + final-cta */
.ww-footer-block {
  position: relative;
  background-image: url("../images/what-we-build/footer-bg-img.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.ww-footer-block .ww-friction,
.ww-footer-block .ww-discipline,
.ww-footer-block .ww-final-cta {
  background: transparent;
}
.ww-footer-block .ww-discipline::before {
  display: none;
}

/* Friction tiles */
.ww-friction {
  padding-block: var(--space-96);
}
.ww-friction__title {
  color: var(--color-text);
  margin-top: var(--space-16);
}
.ww-friction__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
  margin-top: var(--space-48);
  max-width: 1040px;
  margin-inline: auto;
}
.ww-fric-tile {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24) var(--space-28);
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  min-height: 96px;
}
.ww-fric-tile__dot {
  display: inline-flex;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-500);
  flex: none;
  margin-top: 8px;
}
.ww-fric-tile__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 1024px) {
  .ww-problems__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ww-connected__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .ww-friction__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ww-layers__inner {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
  .ww-layers__aside {
    position: static;
  }
  .ww-practical__panel {
    grid-template-columns: 1fr;
    padding: var(--space-24);
  }
  .ww-practical__col--k {
    margin: 0;
  }
}
@media (max-width: 760px) {
  .ww-problems__panel {
    padding: var(--space-24);
  }
  .ww-problems__grid,
  .ww-connected__grid,
  .ww-friction__grid {
    grid-template-columns: 1fr;
  }
  .ww-diagram {
    padding-block: var(--space-40) var(--space-64);
  }
  .ww-hero-block,
  .ww-problems,
  .ww-layers,
  .ww-systems,
  .ww-connected,
  .ww-practical,
  .ww-friction {
    padding-block: var(--space-48);
  }
}

/* ==========================================================================
   Single Industry page (kx_industry single template)
   Rebuilt to match the new design: continuous dark-gradient block for
   Hero + Growth Complexity + Gap, then light Four Areas + Systems, then a
   blue How-We-Think panel, then the shared Final CTA. Replaces the old
   5-backdrop stitched-PNG system entirely.
   ========================================================================== */
.sind-page {
  background: transparent;
}

/* Continuous dark wrapper spanning Hero (photo) -> Growth -> Gap */
.sind-dark-block {
  position: relative;
  /* background-color: #17278c; */
  background-image: url("../images/single-page-industry/hero-kelarix-section-bg-img.png");
  background-size: 100% 100%;
  background-position: center 85px;
  background-repeat: no-repeat;
}
.sind-dark-block .sind-gap {
  background: transparent;
}

/* ---- Hero: single column, full-bleed photo + dark overlay ---- */
.sind-hero {
  position: relative;
  padding-top: 210px;
  padding-bottom: var(--space-64);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
  background-size: 100% 100%;
}
.sind-dark-block::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 85px;
  height: 100px;
  background: url("../images/single-page-industry/hero-kelarix-after-img.png")
    no-repeat center / contain;
  pointer-events: none;
}
.sind-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 16, 56, 0.25) 0%,
    rgba(14, 26, 96, 0.72) 55%,
    rgba(13, 26, 82, 0.97) 100%
  );
}
.sind-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
}
.sind-hero__title {
  font-size: clamp(34px, 4.6vw, 54px);
  margin-top: var(--space-16);
}
.sind-hero__subtext-2 {
  margin-top: var(--space-16);
}
.sind-hero__inner .hero__subtext {
  max-width: 750px;
}

/* Dark pill badge — hero only */
.badge--dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
}

/* ---- Growth complexity: 3 problem cards + 1 CTA card, 2x2 grid ---- */
.sind-growth {
  color: #fff;
  padding-block: var(--space-64) var(--space-96);
}
.sind-growth__head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto var(--space-40);
}
.sind-growth__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-20);
}

/* ---- Gap: intro paragraphs, 5-step flow, KELARIX watermark, closing ---- */
.sind-gap {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-64) var(--space-96);
  color: #fff;
}
.sind-gap__inner {
  max-width: 820px;
  margin: 0 auto;
  padding-inline: var(--container-pad);
  text-align: center;
}
.sind-gap__title {
  margin-top: var(--space-16);
}
.sind-gap__text {
  margin-top: var(--space-16);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.sind-gap__text-sub {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-description);
}
.sind-gap__flow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-48);
  padding-inline: var(--container-pad);
}
.sind-gap__step {
  background: rgba(255, 255, 255, 0.08);
  border: 10px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 14px 18px;
  min-width: 150px;
  text-align: left;
}
.sind-gap__step span {
  color: #fff;
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}
.sind-gap__arrow {
  flex: none;
  color: rgba(255, 255, 255, 0.4);
}
.sind-gap__visual {
  position: relative;
  margin-top: var(--space-20);
  padding-block: 160px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sind-gap__watermark {
  position: absolute;
  inset: 0;
  background-image: url("../images/single-page-industry/kelarix-logo-text-img.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  user-select: none;
  pointer-events: none;
}
.sind-gap__closing {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding-inline: var(--container-pad);
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-body);
  line-height: 1.7;
}

/* ---- Four Areas: split intro + 4 stacked persona cards ---- */
.sind-visibility {
  padding-block: var(--space-96);
}
.sind-visibility__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-56);
  align-items: start;
}
.sind-visibility__aside {
  align-self: start;
  position: sticky;
  top: 120px;
}
.sind-visibility__title {
  margin-top: var(--space-16);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
}
.sind-visibility__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-28);
}
.sind-visibility__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sind-vis-item {
  background: #fff;
  border: 1px solid var(--accent-100);
  border-radius: var(--radius-lg);
  padding: var(--space-28);
  position: relative;
}
.sind-vis-item:after {
  content: "";
  position: absolute;
  z-index: 9;
  pointer-events: none;
  width: 120px;
  height: 120px;
  left: 10px;
  top: 10px;
  border-top: 1px solid var(--accent-100);
  border-left: 1px solid var(--accent-100);
  border-top-left-radius: 12px;
}
.sind-vis-item:nth-child(even):after {
  right: 10px;
  bottom: 10px;
  border-bottom: 1px solid var(--accent-100);
  border-right: 1px solid var(--accent-100);
  border-bottom-right-radius: 12px;
  border-top: 0px solid var(--accent-100);
  border-left: 0px solid var(--accent-100);
  top: unset;
  left: unset;
}
.sind-vis-item__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-100);
  color: var(--accent-600);
  margin-bottom: var(--space-16);
}
.sind-vis-item__icon svg {
  width: 20px;
  height: 20px;
}
.sind-vis-item__icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.sind-vis-item__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: 4px;
}
.sind-vis-item__persona {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-600);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-12);
}
.sind-vis-item__text {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.65;
}

/* ---- Systems: numbered (01-05) accordion + AI-principle note ---- */
.sind-systems {
  padding-block: var(--space-40) var(--space-96);
  position: relative;
  overflow: hidden;
}
.sind-systems::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 180px;
  height: 200px;
  background: url("../images/single-page-industry/ystem-webuild-after-img.svg")
    left bottom / contain no-repeat;
  pointer-events: none;
}
.sind-systems__title {
  color: var(--color-text);
  margin-top: var(--space-16);
}
.sind-systems__list {
  max-width: 960px;
  margin: var(--space-48) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sind-sys-item {
  background: var(--gray);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.sind-sys-item.is-open {
  box-shadow: var(--shadow-soft);
}
.sind-sys-item__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding: var(--space-20) var(--space-24);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
}
.sind-sys-item__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  width: 44px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #c8caff;
  color: var(--accent-500);
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.sind-sys-item__title {
  flex: 1;
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
}
.sind-sys-item__toggle {
  margin-left: auto;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--white);
  border: 1px solid var(--color-border);
  flex: none;
  transition: transform 0.2s;
}
.sind-sys-item__toggle::before,
.sind-sys-item__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--gray-700);
}
.sind-sys-item__toggle::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.sind-sys-item__toggle::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}
.sind-sys-item.is-open .sind-sys-item__toggle {
  transform: rotate(45deg);
}
.sind-sys-item__body {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--space-24);
  color: var(--color-text-muted);
  transition:
    max-height 0.35s ease,
    padding 0.35s ease;
}
.sind-sys-item.is-open .sind-sys-item__body {
  max-height: 460px;
  padding: 0 var(--space-24) var(--space-28);
}
.sind-sys-item__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
}
.sind-sys-item__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
}
.sind-sys-item__chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.sind-sys-item__chip {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: var(--fs-description);
  color: var(--color-text);
  max-width: max-content;
}
.sind-systems__principle {
  max-width: 720px;
  margin: var(--space-48) auto 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-description);
  line-height: 1.7;
}
.sind-systems__principle strong {
  display: block;
  color: var(--color-text);
  margin-bottom: 4px;
  font-size: var(--fs-body);
}
.sind-systems__cta {
  text-align: center;
  margin-top: var(--space-32);
}

/* ---- How We Think: badge/heading/text/button + 3 perspective cards ---- */
.sind-relevant {
  padding-block: var(--space-96);
  color: #fff;
  background: linear-gradient(180deg, #17278c 0%, #1a48ff 100%);
}
.sind-relevant__title {
  color: #fff;
  margin-top: var(--space-16);
}
.sind-relevant__text {
  color: rgba(255, 255, 255, 0.78);
  margin-top: var(--space-16);
  font-size: var(--fs-body);
  line-height: 1.7;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.sind-relevant__cta {
  text-align: center;
  margin-top: var(--space-24);
}
.sind-relevant__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
  margin-top: var(--space-48);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.sind-rel-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-28);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
}
.sind-rel-card__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-100);
  color: var(--accent-600);
  margin-bottom: var(--space-16);
}
.sind-rel-card__icon svg {
  width: 20px;
  height: 20px;
}
.sind-rel-card__icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.sind-rel-card__category {
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  color: var(--accent-600);
  margin-bottom: var(--space-8);
}
.sind-rel-card__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
  line-height: 1.3;
}
.sind-rel-card__text {
  color: var(--color-text-muted);
  font-size: var(--fs-description);
  line-height: 1.6;
  margin-bottom: var(--space-20);
  flex: 1;
}
.sind-rel-card__cta {
  align-self: flex-start;
}

/* Continuous background wrapper spanning How We Think -> Final CTA */
.sind-footer-block {
  position: relative;
  /* background-color: #1a48ff; */
  background-image: url("../images/single-page-industry/page-footer-bg-img.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
}
.sind-footer-block .sind-relevant,
.sind-footer-block .final-cta {
  background: transparent;
}

/* Responsive rules for this template live in one consolidated block near
   the end of this file (search "Single Industry — mobile responsive"). */

/* ==========================================================================
   What We Build — v2 fixes
   ========================================================================== */

/* Problem heading panel — dark card + bottom quote strip */
.ww-problems {
  padding-block: 0;
  z-index: 9;
}
.ww-problems__panel {
  border-radius: var(--radius-xl);
  padding: var(--space-48);
  /* background: rgba(255, 255, 255, 0.04); */
  /* border: 1px solid rgba(255, 255, 255, 0.14); */
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.ww-problems__head .section__title {
  margin-top: var(--space-16);
}
.ww-problems__head .section__lead {
  margin-top: var(--space-16);
}
.ww-problems__quote {
  margin-top: var(--space-40);
  background: #05278f;
  border-radius: var(--radius-lg);
  padding: var(--space-24) var(--space-32);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-title);
  position: relative;
}
.ww-problems__quote p {
  position: relative;
  font-size: var(--space-24);
  z-index: 9;
}
.ww-problems__quote::after {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 100px;
  height: 80px;
  background: url("../images/what-we-build/kelarx-connected-after-img.svg")
    right bottom / contain no-repeat;
  opacity: 1;
  pointer-events: none;
  z-index: 7;
}

/* Key Problems cards grid — separate section on light gradient */
.ww-key-cards {
  /* background: linear-gradient(180deg, #dfe4f8 0%, #eef1fb 100%); */
  padding-block: var(--space-96);
}
.ww-key-cards__title {
  color: var(--color-text);
  margin-top: var(--space-16);
}
.ww-key-cards__grid {
  margin-top: var(--space-48);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}
.ww-key-card {
  background: #05278f;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-28);
  color: #fff;
}
.ww-key-card__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(200, 202, 255, 0.15);
  color: #c8caff;
  margin-bottom: var(--space-20);
}
.ww-key-card__icon svg {
  width: 20px;
  height: 20px;
}
.ww-key-card__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-12);
}
.ww-key-card__text {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-body);
  line-height: 1.55;
}
.ww-key-card--cta {
  background: var(--accent-500);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-32) var(--space-28);
}
.ww-key-card__cta-text {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: #fff;
  line-height: 1.3;
  max-width: 220px;
}
.ww-key-card__cta-chevron {
  color: #fff;
  flex: none;
}

/* Systems accordion — SUPPORTS chips (WhaT THIS HELPS WITH) */
.ww-sys-item__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
}
.ww-sys-item__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
}
.ww-sys-item__sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin: 0 0 var(--space-12);
}
.ww-sys-item__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* Connected capabilities — carousel */
.ww-connected__carousel {
  position: relative;
  margin-top: var(--space-48);
}
.ww-connected__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(260px, 68%);
  gap: var(--space-16);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: var(--space-12);
  scrollbar-width: none;
}
.ww-connected__track::-webkit-scrollbar {
  height: 0;
}
.ww-cap-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
}
.ww-cap-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  border-radius: 6px;
  background: var(--accent-100);
  color: var(--accent-600);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-description);
  margin-bottom: var(--space-16);
}
.ww-cap-card__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
}
.ww-cap-card__text {
  color: var(--color-text-muted);
  font-size: var(--fs-description);
  line-height: 1.55;
}
.ww-connected__controls {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-28);
}
.ww-connected__nav {
  display: flex;
  gap: var(--space-12);
  flex: none;
}
.ww-connected__progress {
  flex: 1;
  height: 3px;
  background: var(--gray-300);
  border-radius: 2px;
  overflow: hidden;
}
.ww-connected__progress span {
  display: block;
  height: 100%;
  width: 33%;
  background: var(--accent-500);
  border-radius: 2px;
  transition:
    width 0.25s ease,
    margin-left 0.25s ease;
}
.ww-connected__count {
  font-size: var(--fs-description);
  color: var(--gray-100);
  font-weight: var(--fw-semibold);
  flex: none;
  padding-left: var(--space-8);
}

/* Practical — staggered K panel */
.ww-practical {
  padding-block: var(--space-96);
  color: #fff;
}
.ww-practical__title {
  color: #fff;
  margin-top: var(--space-16);
}
.ww-practical__panel {
  margin-top: var(--space-48);
  position: relative;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-40) var(--space-40) var(--space-40) 40%;
  max-width: 850px;
  color: var(--color-text);
  margin: 100px auto 0;
}
.ww-practical__card--k {
  position: absolute;
  top: -50px;
  left: 20px;
  width: 50%;
  background: var(--accent-500);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  box-shadow: 0 24px 60px rgba(26, 72, 255, 0.35);
  z-index: 2;
}
.ww-practical__card--white {
  background: transparent;
  padding: 0;
}
.ww-practical__k {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff;
  color: var(--accent-600);
  margin-bottom: var(--space-16);
}
.ww-practical__sub {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-20);
}
.ww-practical__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ww-practical__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.ww-practical__check {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-500);
  color: #fff;
  flex: none;
  margin-top: 2px;
}
.ww-practical__check--white {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Friction — 2 opposing marquees */
.ww-friction {
  padding-block: var(--space-96);
  color: #fff;
}
.ww-friction__title {
  color: #fff;
  margin-top: var(--space-16);
}
.ww-friction__marquees {
  margin-top: var(--space-48);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  position: relative;
  z-index: 1;
}
.ww-friction__marquees .marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}
.ww-friction__marquees .marquee__track {
  display: flex;
  gap: var(--space-16);
  width: max-content;
  animation: marquee-scroll 48s linear infinite;
}
.ww-friction__marquees .marquee--left .marquee__track {
  animation-direction: reverse;
}
.ww-friction__marquees .marquee:hover .marquee__track {
  animation-play-state: paused;
}
.ww-fric-card {
  flex: none;
  width: 260px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-20);
  color: var(--color-text);
}
.ww-fric-card__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-100);
  color: var(--accent-600);
  margin-bottom: var(--space-12);
}
.ww-fric-card__icon svg {
  width: 18px;
  height: 18px;
}
.ww-fric-card__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 1024px) {
  .ww-key-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ww-sys-item__grid {
    grid-template-columns: 1fr;
    gap: var(--space-20);
  }
  .ww-practical__panel {
    padding: var(--space-32) var(--space-24);
    min-height: 0;
  }
  .ww-practical__card--k {
    position: static;
    width: 100%;
    margin: 0 0 var(--space-24);
    left: 0;
    top: 0;
    box-shadow: 0 12px 32px rgba(26, 72, 255, 0.28);
  }
}
@media (max-width: 760px) {
  .ww-problems__panel {
    padding: var(--space-24);
  }
  .ww-key-cards__grid {
    grid-template-columns: 1fr;
  }
  .ww-friction__marquees .ww-fric-card {
    width: 220px;
  }
  .ww-problems,
  .ww-key-cards,
  .ww-practical,
  .ww-friction {
    padding-block: var(--space-48);
  }
}

/* ==========================================================================
   Client-uploaded icons (rendered by k_icon_render / k_icon_img)
   ========================================================================== */
.k-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  margin: auto;
}
/* When the icon lives inside a coloured badge, keep it inheriting sensible size. */
.problem-card__icon .k-icon-img,
.ww-fric-card__icon .k-icon-img,
.ww-key-card__icon .k-icon-img,
.sind-vis-item__icon .k-icon-img,
.disc-item__icon .k-icon-img,
.diff-item__dot .k-icon-img,
.pov-card__icon .k-icon-img,
.path-step__icon .k-icon-img,
.what-tile__icon .k-icon-img,
.lib-col__icon .k-icon-img,
.also-card__icon .k-icon-img,
.also__icon .k-icon-img {
  max-width: 60%;
  max-height: 60%;
}
.site-footer__social a .k-icon-img {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}

/* ==========================================================================
   Request Diagnostic Modal (opens on quote-request buttons + FAB)
   ========================================================================== */
.request-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.request-modal.is-open {
  display: flex;
}
.request-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 60, 0.6);
  backdrop-filter: blur(6px);
}
.request-modal__panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 20px;
  padding: 32px 36px 28px;
  width: 100%;
  max-width: 620px;
  margin: 24px auto;
  box-shadow: 0 40px 80px rgba(10, 20, 60, 0.35);
  animation: rmf-in 0.22s ease-out;
}
@keyframes rmf-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.request-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #e4e6ee;
  background: #fff;
  color: #4a5060;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.request-modal__close:hover {
  color: var(--accent-600);
  border-color: var(--accent-300);
}
.request-modal__title {
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.25;
  text-align: center;
  margin: 0 auto 22px;
  max-width: 460px;
  color: #0e1330;
  font-weight: var(--fw-bold);
}
.request-modal__placeholder {
  background: var(--bg-soft, #f6f8ff);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  padding: 20px;
  color: var(--color-text-muted);
  font-size: 14px;
}
.request-modal__placeholder code {
  background: var(--accent-100);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent-700);
}
.request-modal__thanks {
  text-align: center;
  padding: 20px 16px;
}
.request-modal__thanks-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-500);
  color: #fff;
  margin-bottom: 14px;
}
.request-modal__thanks h3 {
  font-size: 18px;
  margin: 0 0 8px;
}
.request-modal__thanks p {
  color: var(--color-text-muted);
  margin-bottom: 18px;
  font-size: 14px;
}
.request-modal__thanks .btn {
  background: var(--accent-500);
  color: #fff;
  border-color: var(--accent-500);
}

/* ---- CF7 form inside modal ---- */
.request-modal .wpcf7 {
  margin: 0;
  padding: 0;
}
.request-modal .wpcf7-form {
  display: block;
}

/* Two-column rows */
.request-modal .rmf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin: 0 0 14px;
}
.request-modal .rmf-grid > .rmf-field {
  margin: 0;
}

/* Field label wrapper */
.request-modal .rmf-field {
  display: block;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: #0e1330;
  margin: 0 0 14px;
  line-height: 1.3;
}
.request-modal .rmf-req {
  color: #e11;
  margin-left: 2px;
}

/* CF7 input wrapper */
.request-modal .wpcf7-form-control-wrap {
  display: block;
  margin-top: 6px;
}

/* Inputs */
.request-modal .wpcf7-text,
.request-modal .wpcf7-email,
.request-modal .wpcf7-textarea,
.request-modal .wpcf7-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dfe2ec;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #0e1330;
  background: #fff;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  line-height: 1.4;
}
.request-modal .wpcf7-textarea {
  min-height: 78px;
  resize: vertical;
}
.request-modal .wpcf7-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7290' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 34px;
  cursor: pointer;
}
.request-modal .wpcf7-text::placeholder,
.request-modal .wpcf7-email::placeholder,
.request-modal .wpcf7-textarea::placeholder {
  color: #9098ac;
  font-weight: 400;
}
.request-modal .wpcf7-text:focus,
.request-modal .wpcf7-email:focus,
.request-modal .wpcf7-textarea:focus,
.request-modal .wpcf7-select:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(26, 72, 255, 0.12);
}
.request-modal .wpcf7-not-valid-tip {
  color: #e11;
  font-size: 12px;
  margin-top: 4px;
  font-weight: 500;
}
.request-modal .wpcf7-response-output {
  border: 1px solid #dfe2ec;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 14px 0 0;
  font-size: 13px;
}

/* Submit */
.request-modal .rmf-submit {
  text-align: center;
  margin-top: 20px;
}
.request-modal .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  border-radius: 999px;
  border: 0;
  background: var(--accent-500);
  color: #fff;
  font-family: inherit;
  font-weight: var(--fw-semibold);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.request-modal .wpcf7-submit:hover {
  background: var(--accent-600);
}
.request-modal .wpcf7-spinner {
  margin-left: 10px;
}

/* Neutralise any stray <p>/<br> the CF7 admin may still add */
.request-modal .wpcf7-form > p,
.request-modal .wpcf7-form > br {
  margin: 0;
  display: none;
}
.request-modal .wpcf7-form .rmf-field br,
.request-modal .wpcf7-form .rmf-grid br {
  display: none;
}

@media (max-width: 640px) {
  .request-modal {
    padding: 12px;
  }
  .request-modal__panel {
    padding: 30px 20px 22px;
    margin: 12px auto;
  }
  .request-modal__close {
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
  }
  .request-modal__title {
    font-size: 19px;
    margin-bottom: 18px;
    padding-inline: 26px;
  }
  .request-modal .rmf-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 14px;
  }
}

/* ==========================================================================
   Insights listing page
   ========================================================================== */
.ins-page {
  background: #fff;
}

/* Single continuous backdrop covering hero → CTA. */
.ins-block {
  position: relative;
  background-image: url("../images/insights-listing-page/bg-img.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Hero */
.ins-hero {
  background: transparent;
  padding-block: clamp(150px, 14vw, 220px) clamp(40px, 6vw, 72px);
}
.ins-hero__inner {
  max-width: 900px;
  margin: 0 0 auto;
  text-align: left;
  color: #fff;
}
.ins-hero__inner .eyebrow--chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(6px);
}
.ins-hero__title {
  color: #fff;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.1;
  margin: var(--space-16) 0 var(--space-20);
  max-width: 780px;
}
.ins-hero__text {
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin-bottom: var(--space-28);
}
.ins-hero .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.ins-hero .hero__actions .btn--primary {
  background: var(--accent-500);
  color: #fff;
  border-color: var(--accent-500);
}
.ins-hero .hero__actions .btn--primary:hover {
  background: var(--accent-600);
  border-color: var(--accent-600);
}
.ins-hero .hero__actions .btn--white {
  background: #fff;
  color: var(--accent-600);
  border-color: #fff;
}
.ins-hero .hero__actions .btn--white:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--accent-700);
}
.ins-hero .hero__actions .btn--white .btn__arrow {
  background: var(--accent-100);
  color: var(--accent-600);
}
.ins-hero .hero__note {
  color: rgba(255, 255, 255, 0.7);
}

/* Grid */
.ins-grid {
  padding-block: clamp(40px, 6vw, 80px);
  background: transparent;
}
.ins-grid__inner {
  text-align: center;
}
.ins-grid__badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
.ins-grid__title {
  color: #fff;
  font-size: clamp(28px, 4vw, 40px);
  margin: var(--space-16) 0 var(--space-24);
}

/* Filter chips */
.ins-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 auto var(--space-40);
}
.ins-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-description);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.ins-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.ins-chip.is-active {
  background: #fff;
  color: var(--accent-600);
  border-color: #fff;
}

/* Card grid */
.ins-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
  text-align: left;
}
.ins-card {
  background: rgba(10, 24, 90, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(6px);
  transition:
    transform 0.2s,
    border-color 0.2s;
  padding: var(--space-24);
}
.ins-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Card image — bleeds to the card edges, gradient-blends into the card
   background at the bottom via overlay-img.png so it never looks like a
   hard-cropped screenshot. */
.ins-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.ins-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ins-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/overlay-img.png") center bottom / 100% 30%
    no-repeat;
  pointer-events: none;
}

.ins-card__body {
  padding: var(--space-24) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.ins-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}
.ins-card__badge {
  flex: none;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  white-space: nowrap;
}
.ins-card__title {
  font-size: 18px;
  line-height: 1.35;
  color: #fff;
  margin: 0;
}
.ins-card__text {
  font-size: var(--fs-description);
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--space-16);
  flex: 1;
}
.ins-card__cta {
  align-self: flex-start;
  background: #fff;
  color: var(--accent-600);
  border-color: #fff;
}
.ins-card__cta:hover {
  background: var(--accent-500);
  color: #fff;
  border-color: var(--accent-500);
}

/* Pagination */
.ins-pager {
  display: inline-flex;
  gap: 8px;
  margin: var(--space-40) auto 0;
  justify-content: center;
}
.ins-pager__item .page-numbers,
.ins-pager__item > a,
.ins-pager__item > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: #fff;
  color: var(--accent-600);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-description);
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}
.ins-pager__item .page-numbers.current,
.ins-pager__item .current {
  background: var(--accent-500);
  color: #fff;
}
.ins-pager__item .page-numbers:hover:not(.current) {
  background: var(--accent-100);
}
.ins-pager__item .page-numbers.dots {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}

.ins-empty {
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding: var(--space-40) 0;
}

/* Final CTA panel */
.ins-cta {
  padding-block: clamp(40px, 6vw, 80px);
  background: transparent;
}
.ins-cta__panel {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f5f6ff 100%);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 64px);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(10, 20, 60, 0.15);
}
.ins-cta__body {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.ins-cta__title {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
  margin: 0 0 var(--space-16);
  color: var(--gray-900);
}
.ins-cta__text {
  color: var(--color-text-muted);
  margin: 0 auto var(--space-28);
  max-width: 620px;
}
.ins-cta__actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.ins-cta__panel::after {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: clamp(120px, 14vw, 190px);
  height: clamp(120px, 14vw, 190px);
  background-image: url("../images/cta-after-img.svg");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  pointer-events: none;
  opacity: 0.9;
}

/* ---- Tablet (≤991px) ---- */
@media (max-width: 991px) {
  .ins-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .ins-hero__title {
    font-size: clamp(28px, 4.5vw, 42px);
  }
  .ins-hero__inner {
    max-width: 100%;
  }
  .ins-cta__panel {
    padding: 40px 32px;
  }
  .ins-cta__panel::after {
    width: 130px;
    height: 130px;
    right: 16px;
    bottom: 16px;
    opacity: 0.55;
  }
  .ins-chips {
    gap: 8px;
  }
  .ins-chip {
    padding: 7px 14px;
    font-size: 13px;
  }
}

/* ---- Mobile (≤640px) ---- */
@media (max-width: 640px) {
  .ins-block {
    background-size: cover;
    background-position: center top;
  }
  .ins-hero {
    padding-block: 150px 40px;
  }
  .ins-hero__inner {
    text-align: left;
  }
  .ins-hero__title {
    font-size: 30px;
    line-height: 1.15;
  }
  .ins-hero__text {
    font-size: 14px;
  }
  .ins-hero .hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ins-hero .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .ins-grid {
    padding-block: 40px 56px;
  }
  .ins-grid__title {
    font-size: 26px;
  }

  /* Filter chips — horizontal scroll to prevent wrap breakage */
  .ins-chips {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 28px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ins-chips::-webkit-scrollbar {
    display: none;
  }
  .ins-chip {
    flex-shrink: 0;
  }

  .ins-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ins-card__body {
    padding: 20px;
  }
  .ins-card__media {
    aspect-ratio: 16 / 9;
  }
  .ins-card__title {
    font-size: 17px;
  }

  .ins-pager {
    margin-top: 32px;
  }
  .ins-pager__item .page-numbers,
  .ins-pager__item > a,
  .ins-pager__item > span {
    min-width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .ins-cta {
    padding-block: 32px 48px;
  }
  .ins-cta__panel {
    padding: 32px 22px 40px;
    border-radius: 16px;
  }
  .ins-cta__title {
    font-size: 22px;
  }
  .ins-cta__text {
    font-size: 14px;
    margin-bottom: 22px;
  }
  .ins-cta__actions {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }
  .ins-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .ins-cta__panel::after {
    width: 80px;
    height: 80px;
    right: 12px;
    bottom: 12px;
    opacity: 0.35;
  }
}

/* ==========================================================================
   Single Industry page — mobile responsive
   Consolidated tablet (≤991px) and mobile (≤640px) rules for the rebuilt
   section set: Hero, Growth Complexity, Gap, Four Areas, Systems, How We
   Think, Final CTA.
   ========================================================================== */

/* ---- Tablet & below (≤991px) ---- */
@media (max-width: 991px) {
  .sind-hero {
    padding-top: 150px;
  }
  .sind-growth__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sind-visibility__inner {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
  .sind-visibility__aside {
    position: static;
    top: auto;
  }
  .sind-sys-item__grid {
    grid-template-columns: 1fr;
    gap: var(--space-20);
  }
  .sind-relevant__grid {
    grid-template-columns: 1fr;
  }
  .sind-gap__flow {
    flex-wrap: wrap;
  }
  .sind-gap__step {
    flex: 1 1 220px;
  }
}

/* ---- Mobile (≤640px) ---- */
@media (max-width: 640px) {
  .sind-hero,
  .sind-growth,
  .sind-gap,
  .sind-systems,
  .sind-visibility,
  .sind-relevant {
    padding-block: var(--space-48);
  }

  /* Hero */
  .sind-hero {
    padding-top: 120px;
  }
  .sind-hero::after,
  .sind-systems::before {
    content: unset;
  }
  .badge--dark {
    font-size: 11px;
    padding: 5px 12px;
  }
  .sind-hero__title {
    font-size: 26px;
    line-height: 1.18;
    margin-top: var(--space-12);
  }
  .sind-hero__inner .hero__subtext {
    font-size: 14px;
  }
  .sind-hero__subtext-2 {
    margin-top: var(--space-12);
  }
  .sind-hero__inner .hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: var(--space-24);
  }
  .sind-hero__inner .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .sind-hero__inner .hero__note {
    margin-top: var(--space-24);
  }

  /* Growth complexity */
  .sind-growth__head {
    margin-bottom: var(--space-28);
  }
  .sind-growth__grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  /* Gap */
  .sind-gap__title {
    font-size: 24px;
  }
  .sind-gap__text {
    font-size: 14px;
  }
  .sind-gap__flow {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--space-32);
  }
  .sind-gap__step {
    flex: none;
    min-width: 0;
    min-height: 80px;
    display: flex;
    align-items: center;
  }
  .sind-gap__arrow {
    transform: rotate(90deg);
    align-self: center;
  }
  .sind-gap__visual {
    margin-top: var(--space-32);
    padding-block: var(--space-40);
  }
  .sind-gap__watermark {
    background-size: 96% auto;
  }
  .sind-gap__closing {
    font-size: 14px;
  }

  /* Four Areas */
  .sind-visibility__title {
    font-size: 24px;
  }
  .sind-visibility__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .sind-visibility__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .sind-vis-item {
    padding: var(--space-20);
  }
  .sind-vis-item__title {
    font-size: 17px;
  }
  .sind-vis-item__text {
    font-size: 14px;
  }

  /* Systems accordion */
  .sind-systems {
    padding-block: var(--space-16) var(--space-56);
  }
  .sind-systems__title {
    font-size: 24px;
  }
  .sind-systems__list {
    gap: var(--space-12);
    margin-top: var(--space-32);
  }
  .sind-sys-item__head {
    padding: var(--space-16);
    gap: var(--space-12);
  }
  .sind-sys-item__num {
    width: 36px;
    height: 34px;
    font-size: 12px;
  }
  .sind-sys-item__title {
    font-size: var(--fs-body);
  }
  .sind-sys-item__toggle {
    width: 28px;
    height: 28px;
  }
  .sind-sys-item__body,
  .sind-sys-item.is-open .sind-sys-item__body {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }
  .sind-sys-item.is-open .sind-sys-item__body {
    padding-bottom: var(--space-20);
  }
  .sind-systems__principle {
    font-size: 13px;
    margin-top: var(--space-32);
  }
  .sind-systems__cta {
    margin-top: var(--space-20);
  }

  /* How We Think */
  .sind-relevant__title {
    font-size: 24px;
  }
  .sind-relevant__text {
    font-size: 14px;
  }
  .sind-relevant__grid {
    grid-template-columns: 1fr;
    margin-top: var(--space-32);
  }
  .sind-rel-card {
    padding: var(--space-20);
  }
  .sind-rel-card__title {
    font-size: 16px;
  }
  .sind-rel-card__text {
    font-size: 14px;
  }
}

/* ==========================================================================
   Single Insight page (kx_insight single template)
   Hero + Leadership Question share a continuous dark background via
   .insx-dark-block. Technology Boundary + Final CTA share a blue-to-white
   gradient via .insx-footer-block. "Why the Fix Falls Short" sits between
   them on plain white.
   ========================================================================== */
.insx-page {
  background: #fff;
}

/* Reusable oversized brand watermark — used 3x on this page over different
   backgrounds; --dark variant is for the white "obvious fix" section. */
.insx-watermark {
  text-align: center;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.07);
  line-height: 0.9;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.insx-watermark--dark {
  color: rgba(10, 20, 60, 0.05);
}
/* Per-section sizing — each watermark is a different length, so it's tuned
   to span the section width and clip softly at the edges (the sections are
   overflow:hidden). One line each — never wraps. */
.insx-lq .insx-watermark {
  margin-top: calc(-1 * var(--space-24));
  font-size: clamp(64px, 16vw, 170px);
}
.insx-tb .insx-watermark {
  margin-top: var(--space-40);
  font-size: clamp(40px, 10.5vw, 132px);
}

/* Image variant — full width (sits outside .container), image itself capped
   to a sensible max-width and centered. */
.insx-watermark--image {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-inline: var(--space-20);
}
.insx-watermark--image img {
  display: block;
  width: 100%;
  height: auto;
}
.insx-lq .insx-watermark--image {
  margin-top: var(--space-24);
}
.insx-tb .insx-watermark--image {
  margin-top: var(--space-40);
  margin-bottom: var(--space-16);
}

/* "How Kelarix approaches this" — a continuously scrolling marquee band that
   spans the full section width (the .insx-fix section is overflow:hidden). */
.insx-marquee {
  overflow: hidden;
  width: 100%;
  margin-top: var(--space-56);
  user-select: none;
  pointer-events: none;
}
.insx-marquee__track {
  display: flex;
  width: max-content;
  animation: insx-marquee-scroll 32s linear infinite;
}
.insx-marquee__track span {
  flex: none;
  padding-right: 0.5em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  line-height: 0.95;
  font-size: clamp(30px, 7vw, 96px);
  white-space: nowrap;
}
.insx-marquee--dark .insx-marquee__track span {
  color: rgba(10, 20, 60, 0.06);
}
@keyframes insx-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---- Continuous dark wrapper: Hero -> Leadership Question (blue bg image) ----
   Only .insx-lq is reset to transparent here — .insx-hero manages its own
   background image (inline style + its own background-size/position rules)
   and must not be touched by this selector, or a specificity clash with
   `background: transparent` here would reset its background-size too. */
.insx-dark-block {
  position: relative;
  overflow: hidden;
  /* background-color: #17278c; */
  background-image: url("../images/insight-detail-page/hero-btottom-sections-bg-img.png");
  background-size: cover;
  background-position: center -50px;
  background-repeat: no-repeat;
}
.insx-dark-block .insx-lq {
  background: transparent;
}
.section.insx-lq .container {
  position: relative;
}
.section.insx-lq .container::after {
  content: "";
  position: absolute;
  right: var(--space-32);
  bottom: var(--space-32);
  width: 70px;
  height: 80px;
  background: url("../images/single-page-industry/hero-kelarix-after-img.png")
    no-repeat center / 100%;
  /* opacity: 0.6; */
  pointer-events: none;
}

/* ---- Hero: centered badge/title/sub/2 paragraphs only. The dashboard
   visual/CTA/Signal rows are a separate section — see .insx-hero-panel. ---- */
.insx-hero {
  position: relative;
  padding-top: 210px;
  padding-bottom: 304px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* .insx-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 16, 56, 0.25) 0%,
    rgba(14, 26, 96, 0.72) 55%,
    rgba(13, 26, 82, 0.97) 100%
  );
} */
.insx-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.insx-hero__title {
  font-size: clamp(32px, 4.4vw, 52px);
  margin-top: var(--space-16);
}
.insx-hero__sub {
  margin-top: var(--space-16);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
}
.insx-hero__text {
  margin-top: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.insx-hero__text p {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-body);
  line-height: 1.7;
}
/* ---- Hero Panel: dashboard visual + CTA + Signal rows — its own section,
   sitting on the shared .insx-dark-block background (not the hero photo). ---- */
.insx-hero-panel {
  position: relative;
  z-index: 99;
  margin-top: -190px;
}
.insx-hero__visual {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 900px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* box-shadow: 0 30px 80px rgba(5, 12, 50, 0.45); */
}
.insx-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
}
.insx-hero__cta {
  position: relative;
  z-index: 1;
  margin-top: var(--space-40);
  display: flex;
  justify-content: center;
}

/* Signal rows — divided list under the hero panel */
.insx-signals {
  position: relative;
  z-index: 1;
  margin-top: var(--space-64);
  padding-bottom: var(--space-64);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.insx-signal {
  display: grid;
  grid-template-columns: 130px 1fr 1fr;
  gap: var(--space-24);
  align-items: start;
  padding-block: var(--space-24);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.insx-signal__label {
  display: inline-flex;
  align-self: start;
  width: 100%;
  max-width: max-content;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.insx-signal__title {
  color: #fff;
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}
.insx-signal__text {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-description);
  line-height: 1.6;
}

/* ---- Leadership Question: badge/heading, eyebrow, 3 problem cards + 1
   CTA card (2x2 grid, reuses .problem-card), then a KELARIX watermark ---- */
.insx-lq {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-64) var(--space-4);
  color: #fff;
}
/* Empty full-width slot, outside .container, reserved for future content. */
.insx-lq__pre {
  position: relative;
  width: 100%;
}
.insx-lq__head {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.insx-lq__title {
  margin-top: var(--space-16);
}
.insx-lq__eyebrow {
  position: relative;
  z-index: 1;
  margin-top: var(--space-48);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.55);
}
.insx-lq__grid {
  position: relative;
  z-index: 1;
  margin-top: var(--space-24);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-20);
}

/* ---- Why the obvious fix falls short: 2 compare cards, watermark, then a
   3-step process row with arrows (reuses .process-step) ---- */
.insx-fix {
  background: #fff;
  padding-block: var(--space-96);
  overflow: hidden;
}
.insx-fix__title {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
/* Outer frame — mirrors .ww-practical__panel (see what-we-build/practical.php):
   a white rounded panel with padding reserved on one side for an elevated
   card that overlaps the panel's own top/bottom edges. Mirrored here — the
   elevated blue card sits on the RIGHT instead of the left. */
.insx-compare-frame {
  position: relative;
  margin: var(--space-96) auto 0;
  max-width: 850px;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-40) 40% var(--space-40) var(--space-40);
  color: var(--color-text);
  box-shadow: 0 20px 50px rgba(20, 35, 90, 0.07);
}
.insx-compare__card {
  position: relative;
}
/* Light content sits flush in the panel's own (reserved) space — no
   separate surface of its own, exactly like .ww-practical__card--white. */
.insx-compare__card--light {
  position: relative;
}
.insx-compare__card--light::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -10px;
  width: 60px;
  height: 61px;
  background: url("../images/insight-detail-page/obvious-fix-after-img.svg")
    no-repeat center / contain;
  pointer-events: none;
}
/* Blue card is elevated — absolutely positioned, overlapping the frame's
   top edge on the right, exactly like .ww-practical__card--k mirrored. */
.insx-compare__card--solid {
  position: absolute;
  top: -30px;
  right: 20px;
  width: 50%;
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  background: linear-gradient(135deg, #3a5bff 0%, #1a48ff 100%);
  box-shadow: 0 24px 60px rgba(26, 72, 255, 0.35);
  z-index: 2;
  height: 100%;
}
.insx-compare__card--solid:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100px;
  height: 170px;
  background: url("../images/insight-detail-page/replacement-after-img.svg")
    no-repeat center / contain;
  pointer-events: none;
}
.insx-compare__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-12);
}
.insx-compare__card--light .insx-compare__title {
  color: var(--color-text);
}
.insx-compare__card--solid .insx-compare__title {
  color: #fff;
}
.insx-compare__text {
  font-size: var(--fs-description);
  line-height: 1.7;
}
.insx-compare__card--light .insx-compare__text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-20);
}
.insx-compare__card--solid .insx-compare__text {
  color: rgba(255, 255, 255, 0.85);
}

.insx-steps {
  display: flex;
  align-items: stretch;
  gap: var(--space-16);
  margin-top: var(--space-48);
}
.process-step.insx-steps__item {
  border-radius: var(--space-32);
}
.insx-steps__item {
  flex: 1;
  background: #05278f;
  border: 16px solid #d2d4e9;
  /* box-shadow: 0 16px 44px rgba(30, 60, 170, 0.2); */
}
.insx-steps__arrow {
  flex: none;
  display: flex;
  align-items: center;
  color: var(--accent-400);
}

/* ---- Continuous wrapper: Technology Boundary -> Final CTA (blue bg image) ---- */
.insx-footer-block {
  position: relative;
  /* background-color: #1a48ff; */
  background-image: url("../images/insight-detail-page/footer-bg-img-blue.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
}
.insx-footer-block .insx-tb,
.insx-footer-block .final-cta {
  background: transparent;
}

/* ---- Technology Boundary: badge/heading, Can/Cannot split panel,
   watermark, diagnostic callout, dark quote panel ---- */
.insx-tb {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-96);
  color: #fff;
}
.insx-tb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 166px;
  background: url("../images/insight-detail-page/top-left-corner-img.svg")
    no-repeat center / contain;
  pointer-events: none;
}
.insx-tb > .container {
  position: relative;
  z-index: 1;
}
.insx-tb__title {
  margin-top: var(--space-16);
}
.insx-boundary {
  margin-top: var(--space-48);
  background: #f4f6fc;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.insx-boundary__col {
  padding: var(--space-40);
}
.insx-boundary__col:first-child {
  border-right: 1px solid var(--color-border);
}
.insx-boundary__icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-bottom: var(--space-16);
}
.insx-boundary__icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.insx-boundary__icon--can {
  background: var(--white);
  color: var(--accent-600);
}
.insx-boundary__icon--cannot {
  background: var(--white);
  color: var(--accent-600);
}
.insx-boundary__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-8);
}
.insx-boundary__text {
  color: var(--color-text-muted);
  font-size: var(--fs-description);
  line-height: 1.7;
}
.insx-diagnostic {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: var(--space-24) auto 0;
  text-align: center;
}
.insx-diagnostic__title {
  color: #fff;
  font-size: clamp(22px, 3vw, 30px);
  margin-bottom: var(--space-16);
}
.insx-diagnostic__text {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  margin-bottom: var(--space-24);
}
.insx-quote {
  position: relative;
  overflow: hidden;
  max-width: 820px;
  margin: var(--space-48) auto 0;
  background: #05278f;
  border-radius: var(--radius-lg);
  padding: var(--space-32) var(--space-48);
  text-align: center;
}
.insx-quote p {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: 1.5;
  margin: 0 auto;
}
.insx-quote::after {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 76px;
  height: 85px;
  background: url("../images/single-page-industry/hero-kelarix-after-img.png")
    no-repeat center / contain;
  opacity: 0.5;
  pointer-events: none;
}

/* ---- Single Insight — mobile responsive ---- */
@media (max-width: 760px) {
  .insx-dark-block,
  .insx-footer-block {
    background-size: cover;
  }
}
@media (max-width: 991px) {
  .insx-lq__grid {
    grid-template-columns: 1fr;
  }
  .insx-compare-frame {
    padding: var(--space-32) var(--space-24);
  }
  .insx-compare__card--solid {
    position: static;
    width: 100%;
    margin-top: var(--space-24);
    right: 0;
    top: 0;
    box-shadow: 0 12px 32px rgba(26, 72, 255, 0.28);
  }
  .insx-compare__card--light::after {
    display: none;
  }
  .insx-boundary {
    grid-template-columns: 1fr;
  }
  .insx-boundary__col:first-child {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .insx-steps {
    flex-direction: column;
  }
  .insx-steps__arrow {
    margin: 0 auto;
    transform: rotate(90deg);
  }
  .insx-signal {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 640px) {
  .insx-hero {
    padding-top: 120px;
  }
  .insx-hero__title {
    font-size: 26px;
    line-height: 1.18;
  }
  .insx-hero__sub {
    font-size: 15px;
  }
  .insx-hero__text p {
    font-size: 14px;
  }
  .insx-hero__cta {
    margin-top: var(--space-28);
    width: 100%;
  }
  .insx-hero__cta .btn {
    width: 100%;
    justify-content: center;
  }
  .insx-signals {
    margin-top: var(--space-40);
  }
  .insx-signal {
    padding-block: var(--space-16);
  }
  .insx-lq,
  .insx-fix,
  .insx-tb {
    padding-block: var(--space-48);
  }
  .insx-lq__title {
    font-size: 22px;
  }
  .insx-watermark {
    font-size: 44px;
  }
  .insx-fix__title {
    font-size: 22px;
  }
  .insx-compare-frame {
    padding: var(--space-20);
  }
  .insx-compare__card--solid {
    padding: var(--space-24);
  }
  .insx-marquee__track span {
    font-size: 40px;
  }
  .insx-boundary__col {
    padding: var(--space-24);
  }
  .insx-quote {
    padding: var(--space-24);
  }
  .insx-quote p {
    font-size: 18px;
  }
  .insx-diagnostic__title {
    font-size: 22px;
  }
}