/* ============================================================
   LIGHT MODE — every section bg becomes white.
   Applied on the 6 solution sub-pages
   (computer-vision, forecasting, generative-ai,
    agentic-ai, mlops, strategy).
   Loaded AFTER the page-specific stylesheet so it wins.
   ============================================================ */

html, body {
  background: #ffffff !important;
  color: #14102a !important;
}

/* Override the page-specific `body { overflow-x: hidden }` (set at line 50
   of every /solutions/* sub-page CSS). `overflow-x: hidden` turns body into
   a scroll container, which silently kills `position: sticky` on
   descendants like .toc. `overflow-x: clip` clips horizontal overflow the
   same way visually but does NOT create a scroll container, so the TOC's
   sticky positioning works as expected (sits after .shero, then sticks to
   top:77px once the user scrolls past it). */
body {
  overflow-x: clip !important;
}

/* ---------- Top-level sections ---------- */
.shero,
.whatis,
.howwedoit,
.usecases,
.stack,
.cases,
.faq,
.cta-final {
  background: #ffffff !important;
  background-image: none !important;
  background-color: #ffffff !important;
  color: #14102a !important;
  border-bottom: 1px solid rgba(15, 19, 24, 0.08) !important;
}

/* Tighter vertical padding for every section on the 6 sub-pages */
.whatis,
.howwedoit,
.usecases,
.stack,
.cases,
.faq,
.cta-final {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

/* Kill the hero's grid-pattern overlay and corner gradients */
.shero::before,
.shero::after {
  display: none !important;
  background: transparent !important;
  background-image: none !important;
}

/* Bleed-through children that paint their own dark bg */
.shero::before, .shero::after,
.whatis::before, .whatis::after,
.howwedoit::before, .howwedoit::after,
.usecases::before, .usecases::after,
.stack::before, .stack::after,
.cases::before, .cases::after,
.faq::before, .faq::after,
.cta-final::before, .cta-final::after {
  background: transparent !important;
}

/* ---------- Generic text inside sections ---------- */
.shero h1, .shero h2, .shero h3,
.whatis h1, .whatis h2, .whatis h3,
.howwedoit h1, .howwedoit h2, .howwedoit h3,
.usecases h1, .usecases h2, .usecases h3,
.stack h1, .stack h2, .stack h3,
.cases h1, .cases h2, .cases h3,
.cta-final h1, .cta-final h2, .cta-final h3,
.section-h, .section-sub {
  color: #14102a !important;
}

.shero p, .whatis p, .howwedoit p, .usecases p,
.stack p, .cases p, .cta-final p,
.shero li, .whatis li, .howwedoit li, .usecases li,
.stack li, .cases li, .cta-final li {
  color: #4a4459 !important;
}

.eyebrow { color: #78758a !important; }

/* ---------- HERO ---------- */
.shero__h1, .shero__title { color: #14102a !important; }
.shero__lede { color: #4a4459 !important; }
.shero__kpis {
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 19, 24, 0.10) !important;
}
.shero__kpi { background: #ffffff !important; border: none !important; }
.shero__kpi:not(:first-child) {
  border-left: 1px solid rgba(15, 19, 24, 0.10) !important;
}
.shero__kpi__num { color: #14102a !important; }
.shero__kpi__lbl { color: #78758a !important; }
.shero__chip { background: #f7f5f0 !important; color: #4a4459 !important; border: 1px solid rgba(15, 19, 24, 0.10) !important; }
.shero__visual,
.hv-frame,
.hv-canvas { background: #f7f5f0 !important; border: 1px solid rgba(15, 19, 24, 0.10) !important; }
.hv-tag, .hv-tag-r { color: #4a4459 !important; background: rgba(255,255,255,0.85) !important; }

/* ---------- WHATIS ---------- */
.whatis__panel, .whatis__card, .whatis__item {
  background: #f7f5f0 !important;
  color: #14102a !important;
  border: 1px solid rgba(15, 19, 24, 0.10) !important;
}

/* ---------- HOW WE DO IT ---------- */
.howwedoit__grid, .howwedoit__card, .howwedoit__panel, .step, .step-card {
  background: #f7f5f0 !important;
  color: #14102a !important;
  border: 1px solid rgba(15, 19, 24, 0.10) !important;
}
.howwedoit__card *, .step *, .step-card * { color: inherit; }

/* Capability grid — 3 per row */
.cap-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
.cap-block {
  background: #f7f5f0 !important;
  border: 1px solid rgba(15, 19, 24, 0.10) !important;
  color: #14102a !important;
}
.cap-block:hover { border-color: rgba(15, 19, 24, 0.25) !important; }
.cap-block__num { color: #78758a !important; }
.cap-block__title { color: #14102a !important; }
.cap-block__desc { color: #4a4459 !important; }
.cap-block__chip { background: #ffffff !important; color: #14102a !important; border: 1px solid rgba(15, 19, 24, 0.12) !important; }
@media (max-width: 960px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .cap-grid { grid-template-columns: 1fr !important; }
}

/* ---------- USECASES ---------- */
.usecases__card, .usecase, .usecase-card {
  background: #f7f5f0 !important;
  color: #14102a !important;
  border: 1px solid rgba(15, 19, 24, 0.10) !important;
}

/* ---------- STACK ---------- */
.stack__card, .stack__group, .stack__item, .stack__tile {
  background: #f7f5f0 !important;
  color: #14102a !important;
  border: 1px solid rgba(15, 19, 24, 0.10) !important;
}
.stack__pill, .stack__chip {
  background: #ffffff !important;
  color: #14102a !important;
  border: 1px solid rgba(15, 19, 24, 0.12) !important;
}

/* ---------- CASE CARD hero patterns — real product images ---------- */
.case-card__hero__pattern {
  position: absolute !important;
  inset: 0 !important;
  opacity: 1 !important;
  overflow: hidden !important;
  /* Kill the radial-mask + grid background that the original CSS applied —
     they were the source of the faded "white shade" around the image. */
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.case-card__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Dim the image so brand text stays legible */
.case-card__hero__pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.case-card__hero__brand,
.case-card__hero__sub { z-index: 2; }
/* No dark card-hero background — the image fills the space */
.case-card__hero { background: transparent !important; }

/* ---------- CASE CARDS — outer section block; inner grid is one row ---------- */
.cases {
  display: block !important;
  grid-template-columns: none !important;
}
.cases__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
@media (max-width: 960px) {
  .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .cases__grid { grid-template-columns: 1fr !important; }
}
.case-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 19, 24, 0.10) !important;
  color: #14102a !important;
}
.case-card__title, .case-card__cap, .case-card__desc,
.case-card__metric__num, .case-card__metric__lbl { color: #14102a !important; }
.case-card__hero { background: #f7f5f0 !important; }


/* ---------- FAQ — readable on white ---------- */
.faq .eyebrow { color: #78758a !important; }
.faq .section-h { color: #14102a !important; }
.faq .section-h em { color: #f58a22 !important; }
.faq .section-sub { color: #4a4459 !important; }
.faq__item { border-bottom: 1px solid rgba(15, 19, 24, 0.10) !important; }
.faq__item:first-child { border-top: 1px solid rgba(15, 19, 24, 0.10) !important; }
.faq__q { color: #14102a !important; background: transparent !important; }
.faq__q:hover { color: #f58a22 !important; }
.faq__q__plus { border: 1px solid rgba(15, 19, 24, 0.25) !important; }
.faq__q__plus::before, .faq__q__plus::after { background: #14102a !important; }
.faq__item.is-open .faq__q__plus { border-color: #f58a22 !important; }
.faq__item.is-open .faq__q__plus::before,
.faq__item.is-open .faq__q__plus::after { background: #f58a22 !important; }
.faq__a, .faq__a__inner p { color: #4a4459 !important; }

/* ---------- CTA-FINAL ---------- */
.cta-final { background: #ffffff !important; color: #14102a !important; }
.cta-final__h, .cta-final__h em, .cta-final__sub { color: #14102a !important; }
.cta-final__sub { color: #4a4459 !important; }
.cta-final .btn-primary--paper { background: #14102a !important; color: #ffffff !important; }
.cta-final .btn-primary--paper:hover { background: #2a2440 !important; }
.cta-final__browse-link { color: #14102a !important; }
.cta-final__note { color: #78758a !important; }

/* ---------- TOC (sticky bar below nav) — consistent across all 6 pages ----------
   position: sticky lets the TOC sit in its natural flow position (right
   after .shero) on initial load, then stick to top:77px (just under the
   fixed Header) once the user scrolls past it. This keeps the shero
   visible above the TOC at the top of the page. */
.toc {
  position: sticky !important;
  top: 77px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 90 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(15, 19, 24, 0.10) !important;
  border-right: none !important;
  box-shadow: 0 2px 6px rgba(15, 19, 24, 0.04) !important;
}
.toc__inner {
  background: #ffffff !important;
  background-color: #ffffff !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 56px !important;
  overflow-x: auto !important;
}
.toc__label {
  color: #78758a !important;
  border-right: 1px solid rgba(15, 19, 24, 0.10) !important;
  padding-right: 18px !important;
  margin-right: 12px !important;
}
.toc__link { color: #4a4459 !important; background: transparent !important; }
.toc__link:hover { background: rgba(245, 138, 34, 0.08) !important; color: #f58a22 !important; }
.toc__link.is-active { color: #f58a22 !important; background: rgba(245, 158, 11, 0.10) !important; }

/* ---------- Buttons ---------- */
.btn-secondary { color: #14102a !important; border: 1px solid rgba(15, 19, 24, 0.18) !important; background: transparent !important; }
.btn-secondary:hover { background: rgba(15, 19, 24, 0.04) !important; }

/* ============================================================
   NAVBAR — 1:1 copy of the home page nav from styles.css
   so all 6 solution sub-pages render the exact same nav.
   ============================================================ */
.nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background-image: linear-gradient(to right, #f58a22 0%, #009fce 100%) !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav *, .nav *::before, .nav *::after { box-sizing: border-box !important; }
.nav a { color: inherit !important; text-decoration: none !important; }

.nav__inner {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0.95rem 1.6rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
}
.nav__inner--compact { padding: 0.4rem 1rem !important; gap: 0.75rem !important; }
.nav .brand__logo.brand__logo--64 { max-height: 64px !important; width: auto !important; }
.nav .nav__menu.nav__menu--16 { font-size: 16px !important; }

.nav .brand { display: flex !important; align-items: center !important; gap: 0.5rem !important; flex-shrink: 0 !important; }
.nav .brand__logo { max-height: 48px !important; width: auto !important; display: block !important; }
.nav .brand__dot {
  width: 8px !important; height: 8px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  margin-left: 6px !important;
  margin-bottom: 6px !important;
}
.nav .brand:hover .brand__dot { transform: scale(1.3); transition: transform 0.3s ease; }

.nav__menu {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  margin: 0 0 0 auto !important;
  list-style: none !important;
  padding: 0 !important;
}
.nav__item { position: relative !important; }
.nav__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0.5rem 0.9rem !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  opacity: 0.9 !important;
  border-radius: 6px !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: opacity 0.25s ease, background 0.2s ease !important;
}
.nav__link:hover { opacity: 1 !important; background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; }
.nav__link.is-active { color: #ffffff !important; background: rgba(255, 255, 255, 0.12) !important; }
.nav__chev {
  width: 18px !important; height: 18px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 2.2 !important;
  fill: none !important;
  opacity: 1 !important;
  transition: transform 0.2s ease !important;
}
.nav__item:hover .nav__chev { transform: rotate(180deg); }

.nav__cta-wrap { margin-left: auto !important; display: flex !important; gap: 0.6rem !important; align-items: center !important; }
.nav .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0.6rem 1.6rem !important;
  background: #ffffff !important;
  color: #2f2f2f !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.nav .btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22) !important; }
.nav .btn-primary svg { width: 14px !important; height: 14px !important; }
.nav .hamburger { display: none !important; }

/* Mega-menu — match home page */
.nav .mega {
  position: absolute !important;
  top: 100% !important;
  left: -8px !important;
  margin-top: 0 !important;
  min-width: 720px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 28px !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18) !important;
  z-index: 1200 !important;
}
/* The base .nav .mega above forces min-width: 720px on every megamenu —
   override for the narrow Company dropdown so it doesn't get stretched. */
.nav .mega.mega--narrow { min-width: 220px !important; }
.nav .mega__list a { color: #1f2937 !important; }
.nav .mega__list a:hover { background: rgba(237, 142, 57, 0.14) !important; color: #ed8e39 !important; }
.nav .mega__list strong { color: inherit !important; }
.nav .mega__list span { color: #6b7280 !important; }
.nav .mega__col h4 { color: #ed8e39 !important; }

/* The fixed nav sits OVER content — push the first section down
   so the hero isn't hidden underneath. */
.shero {
  padding-top: 140px !important;
  padding-bottom: 50px !important;
}