/* ==========================================================================
   KloudData — Data Modernization Services
   Dedicated, self-contained stylesheet for page-templates/tmpl-data-modernization.php
   Namespaced under .kd-dmod — design system (colors, spacing, typography,
   buttons) cloned from a sibling "Services" landing page stylesheet
   (itself cloned from assets/css/agentic-ai-automation.css / mcp-integration.css /
   data-engineering.css) so this page reads as a sibling of the Data
   Engineering / BI & Analytics service landing pages. Does not read or
   extend main.css tokens.

   Sections: Hero + Services (shared background), Solutions (hub-and-spoke),
   Use Cases (photo + connected icon list), Common Use Cases (NEW bento
   mosaic grid — no precedent elsewhere on the site), Business Outcomes
   (dark stat band, 6 cards / 3-col grid), Why Choose KloudData (photo +
   checklist), Success Stories, FAQ, Final CTA.
   ========================================================================== */

.kd-dmod {
  --dmod-cream:      #f7f4ee;
  --dmod-paper:      #fbfaf7;
  --dmod-white:      #ffffff;
  --dmod-lav:        #eef1fb;
  --dmod-lav-line:   #dfe4f7;
  --dmod-ink-950:    #0c1430;
  --dmod-ink-800:    #182352;
  --dmod-ink-600:    #3b477a;
  --dmod-ink-400:    #6b7396;
  --dmod-ink-300:    #98a0bd;
  --dmod-blue-700:   #153fbf;
  --dmod-blue-600:   #2451e0;
  --dmod-blue-500:   #3f6df0;
  --dmod-teal-500:   #14b8a6;
  --dmod-teal-050:   #e8f8f5;
  --dmod-navy-950:   #0a1230;
  --dmod-navy-900:   #101c46;
  --dmod-line:       #e7e4db;
  --dmod-line-soft:  #eeece4;
  --dmod-radius-lg:  20px;
  --dmod-radius-md:  14px;
  --dmod-radius-sm:  10px;
  --dmod-max:        1280px;
  --dmod-shadow:     0 8px 30px rgba(12,20,48,0.06);

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--dmod-ink-950);
  background: var(--dmod-white);
  overflow-x: hidden;
}

.kd-dmod h1, .kd-dmod h2, .kd-dmod h3, .kd-dmod h4 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  color: #0D1B2E;
  font-weight: 800;
  line-height: 1.18;
  margin: 0;
}

.kd-dmod p { margin: 0; }
.kd-dmod a { text-decoration: none; }
.kd-dmod ul { margin: 0; padding: 0; list-style: none; }
.kd-dmod button { font-family: inherit; cursor: pointer; }
.kd-dmod svg { display: block; stroke: #0057D8; }
.kd-dmod .accent {
background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kd-dmod-wrap {
  max-width: var(--dmod-max);
  margin: 0 auto;
  padding: 0 32px;
}

.kd-dmod-section { padding: 88px 0; background-color: #fbfaf7; }
.kd-dmod-section--white { background: #fff; }
.kd-dmod-section--lav { background: #F2F5FA; }

/* ── Section head ─────────────────────────────────────────── */
.kd-dmod-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.kd-dmod-head h2 { font-size: 48px; font-weight: 700; margin-bottom: 16px; line-height: 58px; }
.kd-dmod-head p { font-size: 16px; line-height: 1.7; color: #6B7A99; }

/* ── Buttons ──────────────────────────────────────────────── */
.kd-dmod-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.kd-dmod-btn--primary {
  background: #004195;
  color: #fff;
}
.kd-dmod-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(12,20,48,0.24); }
/* Hero CTA — kept for design-system parity only. Not used in this page's
   hero markup (buttons were removed sitewide from every service page's
   hero, and this page's reference design's hero CTA is intentionally
   dropped to match). */
.kd-dmod-hero .kd-dmod-btn--primary {
  height: auto;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 700;
  border: 1.5px solid transparent;
  border-radius: 24px;
  background: #004195;
  opacity: 1;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.kd-dmod-hero .kd-dmod-btn--primary:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(12,20,48,0.24); }
.kd-dmod-hero .kd-dmod-btn--primary:focus-visible { outline: 2px solid #004195; outline-offset: 2px; }
.kd-dmod-btn--ghost {
  background: transparent;
  color: #004195;
  border: 2px solid #004195;
}
.kd-dmod-btn--ghost:hover { background: #fff; color: #004195; }
.kd-dmod-btn .arrow { display: inline-flex; }
.kd-dmod-btn-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   HERO + SERVICES — shared background wrapper
   The optional editor-supplied Background Image (Hero tab) spans both
   sections as one continuous image (no seam between them), shown plain
   with no gradient/scrim over it.
   ══════════════════════════════════════════════════════════════ */
.kd-dmod-hero-merged {
  position: relative;
  background-color: #FBFAF7;
}
.kd-dmod-hero-merged-has-bg {
  background-size: 100% 100%;
  background-position: top center;
  background-repeat: no-repeat;
}
.kd-dmod-hero {
  position: relative;
  background: transparent;
  padding-bottom: 80px;
  overflow: hidden;
}
.kd-dmod-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: center;
  padding-top: 140px;
}

.kd-dmod-hero h1 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 74px;
  letter-spacing: 0;
  color: #0D1B2E;
  margin-bottom: 22px;
}
.kd-dmod-hero h1 .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-dmod-hero-lead {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  color: #6B7A99;
  max-width: 520px;
  margin-bottom: 34px;
}
.kd-dmod-hero-lead strong { color: var(--dmod-ink-950); font-weight: 700; }

.kd-dmod-hero-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;margin-top: 20px; }

/* ── Dashboard visual (ACF image override, or coded fallback) ── */
.kd-dmod-hero-visual { position: relative; }
.kd-dmod-hero-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--dmod-radius-lg);
}

.kd-dmod-dash {
  background: #fff;
  border: 1px solid var(--dmod-line);
  border-radius: var(--dmod-radius-lg);
  box-shadow: 0 20px 60px rgba(12,20,48,0.12);
  overflow: hidden;
}
.kd-dmod-dash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--dmod-ink-950);
}
.kd-dmod-dash-top .name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}
.kd-dmod-dash-top .name .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}
.kd-dmod-dash-top .meta { display: flex; align-items: center; gap: 12px; }
.kd-dmod-dash-top .period { font-size: 11.5px; font-weight: 600; color: var(--dmod-ink-300); }
.kd-dmod-dash-top .avatars { display: flex; }
.kd-dmod-dash-top .avatars span {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--dmod-ink-950);
  margin-left: -6px;
}
.kd-dmod-dash-top .avatars span:first-child { margin-left: 0; background: #7a8194; }
.kd-dmod-dash-top .avatars span:nth-child(2) { background: #4a5578; }
.kd-dmod-dash-top .avatars span:nth-child(3) { background: var(--dmod-blue-600); }

.kd-dmod-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 22px 0;
}
.kd-dmod-dash-stats .stat {
  text-align: center;
  border-left: 1px solid var(--dmod-line-soft);
  padding: 0 8px;
}
.kd-dmod-dash-stats .stat:first-child { border-left: none; }
.kd-dmod-dash-stats .stat h4 {
  font-size: 26px;
  font-weight: 800;
  color: var(--dmod-ink-950);
  margin-bottom: 4px;
}
.kd-dmod-dash-stats .stat span {
  font-size: 12px;
  color: var(--dmod-ink-400);
  font-weight: 500;
}

.kd-dmod-dash-chart { padding: 4px 24px 20px; border-top: 1px solid var(--dmod-line-soft); }
.kd-dmod-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  margin-bottom: 14px;
}
.kd-dmod-chart-head .title { font-size: 13px; font-weight: 700; color: var(--dmod-ink-950); }
.kd-dmod-chart-head .delta { font-size: 12px; font-weight: 700; color: #15975f; }
.kd-dmod-dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 60px;
}
.kd-dmod-dash-bars i {
  flex: 1;
  background: var(--dmod-lav-line);
  border-radius: 3px 3px 0 0;
  font-style: normal;
}
.kd-dmod-dash-bars i.lo-blue { background: #a9c2fb; }
.kd-dmod-dash-bars i.hi-blue { background: var(--dmod-blue-600); }
.kd-dmod-dash-months {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--dmod-ink-300);
  font-weight: 500;
}

.kd-dmod-dash-rows { border-top: 1px solid var(--dmod-line-soft); }
.kd-dmod-dash-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--dmod-line-soft);
  font-size: 13px;
}
.kd-dmod-dash-row .tick { width: 4px; height: 22px; border-radius: 3px; flex-shrink: 0; }
.kd-dmod-dash-row .tick.green { background: #22c55e; }
.kd-dmod-dash-row .tick.blue { background: var(--dmod-blue-600); }
.kd-dmod-dash-row .tick.gray { background: var(--dmod-ink-300); }
.kd-dmod-dash-row .label { font-weight: 600; color: var(--dmod-ink-950); flex: 1; }
.kd-dmod-dash-row .status {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.kd-dmod-dash-row .status.approved { background: #e7f8ef; color: #15975f; }
.kd-dmod-dash-row .status.review   { background: #eef0f5; color: var(--dmod-ink-400); }
.kd-dmod-dash-row .status.pending  { background: var(--dmod-lav); color: var(--dmod-blue-600); }
.kd-dmod-dash-row .status.draft    { background: #eef0f5; color: var(--dmod-ink-400); }
.kd-dmod-dash-row .amount { font-weight: 700; color: var(--dmod-ink-950); min-width: 68px; text-align: right; }

.kd-dmod-dash-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--dmod-paper);
  padding: 14px 24px;
  border-top: 1px solid var(--dmod-line-soft);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dmod-ink-400);
}
.kd-dmod-dash-foot span { display: inline-flex; align-items: center; gap: 7px; }
.kd-dmod-dash-foot i {
  width: 7px; height: 7px;
  border-radius: 50%;
  font-style: normal;
}
.kd-dmod-dash-foot i.teal  { background: #14b8a6; }
.kd-dmod-dash-foot i.green { background: #22c55e; }
.kd-dmod-dash-foot i.blue  { background: var(--dmod-blue-600); }

/* ══════════════════════════════════════════════════════════════
   SERVICES — 2-col icon-card grid + tall right-side visual
   ══════════════════════════════════════════════════════════════ */
/* Transparent so the Hero + Services shared background shows through
   with no seam — scoped to this specific section only. */
.kd-dmod-section--services { background: #fff; }
.kd-dmod-section--services .kd-dmod-head h2 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0;
  color: #0D1B2E;
}
.kd-dmod-section--services .kd-dmod-head p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  color: #6B7A99;
}
.kd-dmod-services-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.kd-dmod-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-content: start;
}
.kd-dmod-services-card {
  background: #fff;
border: 1.31px solid #E6ECF5;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 252px;
}
.kd-dmod-services-icon {
  width: 60px; height: 60px;
  flex-shrink: 0;
  border-radius: 12px;
background: linear-gradient(135deg, rgba(230, 247, 254, 0.5) 0%, #E6F7FE 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-dmod-services-icon img, .kd-dmod-services-icon svg { width: auto; height: auto; }
.kd-dmod-services-card h3 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  color: #0D1B2E;
}
.kd-dmod-services-card p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0;
  color: #6B7A99;
}
.kd-dmod-services-visual {
  border-radius: 16px;
  overflow: hidden;
  min-height: 100%;
  background: #eef1fb;
}
.kd-dmod-services-visual img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}
.kd-dmod-services-visual-placeholder {
  width: 100%;
  height: 100%;
  min-height: 340px;
  display: flex;
  align-items: center;
  padding: 32px;
  border: 1px dashed #c9d3e6;
  border-radius: 16px;
  font-size: 13px;
  color: #6B7A99;
  text-align: center;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════
   SOLUTIONS — hub-and-spoke: 3 cards left, 3 right, center
   image hub, short connector lines
   ══════════════════════════════════════════════════════════════ */
.kd-dmod-section--solutions .kd-dmod-head h2 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0;
  color: #0D1B2E;
}
.kd-dmod-section--solutions .kd-dmod-head p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  color: #6B7A99;
}
.kd-dmod-solutions-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.kd-dmod-solutions-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 444px;
  max-width: 444px;
}
.kd-dmod-solutions-card {
  position: relative;
  width: 100%;
  height: 170px;
  box-sizing: border-box;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  border-radius: 12px;
  border: 1px solid #E2E6F0;
  background: #fff;
}
.kd-dmod-solutions-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32px;
  height: 0;
  border-top: 2px solid #1A56DB;
}
.kd-dmod-solutions-col--left .kd-dmod-solutions-card::after { right: -32px; }
.kd-dmod-solutions-col--right .kd-dmod-solutions-card::after { left: -32px; }
.kd-dmod-solutions-card h3 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  color: #0D1B2E;
}
.kd-dmod-solutions-card p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0;
  color: #6B7A99;
}
.kd-dmod-solutions-hub {
  flex-shrink: 0;
  margin: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.kd-dmod-solutions-hub img { max-width: 100%; height: auto; display: block; }
.kd-dmod-solutions-hub-placeholder {
  width: 220px;
  padding: 32px;
  border: 1px dashed #c9d3e6;
  border-radius: 16px;
  font-size: 13px;
  color: #6B7A99;
}

/* ══════════════════════════════════════════════════════════════
   USE CASES — centered head, photo + connected timeline
   Icons cycle through an "active" glow state one at a time, looping
   forever — pure CSS (animation-delay staggered per row via an
   inline --dmod-func-i custom property set from PHP), no JS needed.
   ══════════════════════════════════════════════════════════════ */
.kd-dmod-section--usecases .kd-dmod-head h2 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0;
  color: #0D1B2E;
}
.kd-dmod-section--usecases .kd-dmod-head p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  color: #6B7A99;
}
.kd-dmod-func-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}
.kd-dmod-func-image {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--dmod-radius-lg);
  display: block;
}
.kd-dmod-func-image-placeholder {
  width: 100%;
  min-height: 320px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 32px;
  border: 1px dashed #c9d3e6;
  border-radius: var(--dmod-radius-lg);
  font-size: 13px;
  color: #6B7A99;
  text-align: center;
}
.kd-dmod-func-list { position: relative; display: grid; gap: 24px; }
.kd-dmod-func-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
/* Connector segment: drawn per item (not one global line), running from
   this icon's bottom edge down to the next icon's top edge, so it can't
   overshoot when a title/description wraps to more lines than its
   neighbour. */
.kd-dmod-func-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 57px;
  bottom: -31px;
  left: 25px;
  width: 2px;
  background: #01AEF040;
  z-index: 0;
}
.kd-dmod-func-row {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: 1px solid #E6ECF5;
  border-radius: var(--dmod-radius-md);
  padding: 18px 22px;
  box-shadow: 0px 2px 12px 0px #0041950D;
}
/* The active/glow state is a separate full-circle overlay animated via
   opacity (not the icon's own `background`) so the fill never looks
   broken/partial mid-transition. */
.kd-dmod-func-icon {
  position: relative;
  flex-shrink: 0;
  margin-top: 7px;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #E6ECF5;
  box-shadow: 0px 2px 12px 0px #00419514;
  color: #004195;
  display: flex; align-items: center; justify-content: center;
  animation: kd-dmod-func-pulse-frame calc(var(--dmod-func-count, 6) * 2.5s) ease-in-out infinite;
  animation-delay: calc(var(--dmod-func-i, 0) * 2.5s);
}
.kd-dmod-func-icon::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(180deg, #004195 0%, #01AEF0 100%);
  box-shadow: 0px 0px 24px 0px #00419559;
  opacity: 0;
  z-index: 0;
  animation: kd-dmod-func-pulse-glow calc(var(--dmod-func-count, 6) * 2.5s) ease-in-out infinite;
  animation-delay: calc(var(--dmod-func-i, 0) * 2.5s);
}
.kd-dmod-func-icon img, .kd-dmod-func-icon svg {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
}
/* Editor-uploaded icon — rendered as a mask (silhouette) instead of a
   plain <img>, so it can be recolored via `background-color: currentColor`
   the same way the default inline SVGs above respond to `color:currentColor`. */
.kd-dmod-func-icon-mask {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* The sitewide `.kd-dmod svg { stroke: #0057D8 }` reset (same specificity)
   would otherwise win here, so the icon's stroke never actually follows
   the parent's animated `color`. */
.kd-dmod-func-icon svg { stroke: currentColor !important; }
@keyframes kd-dmod-func-pulse-frame {
  0%, 8.99% { border-color: transparent; color: #fff; }
  9%, 100%  { border-color: #E6ECF5; color: #004195; }
}
@keyframes kd-dmod-func-pulse-glow {
  0%, 3%   { opacity: 1; }
  9%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kd-dmod-func-icon, .kd-dmod-func-icon::before { animation: none; }
  .kd-dmod-func-icon::before { opacity: 0; }
}
.kd-dmod-func-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kd-dmod-func-row .label {
  display: block;
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  color: #0D1B2E;
}
.kd-dmod-func-row .desc {
  display: block;
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0;
  color: #6B7A99;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════
   COMMON USE CASES — NEW bento mosaic grid, no precedent elsewhere
   on the site. 6-column base grid with explicit spans:
     row 1: two items spanning 3 columns each (half-width)
     row 2: one item spanning all 6 columns (full-width), containing
            text on the left and a photo on the right in the same card
     row 3: three items spanning 2 columns each (third-width)
   Card style is a NEW visual variant — light icon background (not the
   dark-blue-filled squares used in Services), hairline border, no
   shadow, blue-stroke icon.
   ══════════════════════════════════════════════════════════════ */
.kd-dmod-section--usecases2 .kd-dmod-head h2 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0;
  color: #0D1B2E;
}
.kd-dmod-section--usecases2 .kd-dmod-head p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  color: #6B7A99;
}
.kd-dmod-usecases2-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
.kd-dmod-usecases2-item:nth-child(1),
.kd-dmod-usecases2-item:nth-child(2) { grid-column: span 3; }
.kd-dmod-usecases2-item:nth-child(3) { grid-column: span 6; }
.kd-dmod-usecases2-item:nth-child(4),
.kd-dmod-usecases2-item:nth-child(5),
.kd-dmod-usecases2-item:nth-child(6) { grid-column: span 2; }
/* Any extra/optional slots beyond the 6 designed items fall back to
   full-width rows so they never silently collide with the fixed
   row 1/2/3 span pattern above. */
.kd-dmod-usecases2-item:nth-child(n+7) { grid-column: span 6; }

.kd-dmod-usecases2-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid #E2E6F0;
  border-radius: 16px;
  padding: 28px;
  background: #fff;
}
.kd-dmod-usecases2-text-body { min-width: 0; }
.kd-dmod-usecases2-item h3 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  color: #0D1B2E;
  margin-bottom: 10px;
}
.kd-dmod-usecases2-item p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0;
  color: #323232;
}
.kd-dmod-usecases2-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #F2F5FA;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kd-dmod-usecases2-icon img, .kd-dmod-usecases2-icon svg { width: 20px; height: 20px; }
.kd-dmod-usecases2-icon svg { stroke: #004195; }

/* The wide (row 2) item: text card + photo sit side by side as separate
   elements — the photo is NOT enclosed inside the card's border, matching
   how every other "photo beside content" section on the site works
   (e.g. the Services section's right-side visual). Only .kd-dmod-usecases2-text
   gets the card border/padding/background; the outer --wide item itself
   is just a plain flex layout container. */
.kd-dmod-usecases2-item--wide {
  display: flex;
  align-items: stretch;
  gap: 24px;
  border: none;
  padding: 0;
  background: transparent;
}
.kd-dmod-usecases2-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid #E2E6F0;
  border-radius: 16px;
  padding: 28px;
  background: #fff;
  box-sizing: border-box;
}
.kd-dmod-usecases2-photo {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}
.kd-dmod-usecases2-photo img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.kd-dmod-usecases2-photo-placeholder {
  width: 100%;
  min-height: 220px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 24px;
  border: 1px dashed #c9d3e6;
  border-radius: 12px;
  font-size: 13px;
  color: #6B7A99;
  text-align: center;
}
@media (max-width: 1024px) {
  .kd-dmod-usecases2-grid { grid-template-columns: 1fr; }
  .kd-dmod-usecases2-item,
  .kd-dmod-usecases2-item:nth-child(1),
  .kd-dmod-usecases2-item:nth-child(2),
  .kd-dmod-usecases2-item:nth-child(3),
  .kd-dmod-usecases2-item:nth-child(4),
  .kd-dmod-usecases2-item:nth-child(5),
  .kd-dmod-usecases2-item:nth-child(6),
  .kd-dmod-usecases2-item:nth-child(n+7) { grid-column: span 1; }
  .kd-dmod-usecases2-item--wide {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .kd-dmod-usecases2-photo { max-width: 100%; }
  .kd-dmod-usecases2-photo img { height: 200px; }
  .kd-dmod-section--usecases2 .kd-dmod-head h2 { font-size: 30px; line-height: 42px; }
}
@media (max-width: 640px) {
  .kd-dmod-section--usecases2 .kd-dmod-head h2 { font-size: 30px; }
}

/* ══════════════════════════════════════════════════════════════
   BUSINESS OUTCOMES — dark full-bleed band, centered Geist
   heading/intro, then a 3-col grid of stat cards with a gradient
   top border (standard 6-card / 3-column layout).
   Same 3-layer background system (Color / Photo / Image).
   ══════════════════════════════════════════════════════════════ */
.kd-dmod-outcomes { position: relative; background: #0B1733; overflow: hidden; }
.kd-dmod-outcomes-has-photo { background-size: cover; background-position: center; }
.kd-dmod-outcomes-has-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11,23,51,0.82);
  z-index: 0;
  pointer-events: none;
}
.kd-dmod-outcomes-bg {
  position: absolute;
  left: 0; bottom: 40px;
  width: 220px;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.kd-dmod-outcomes-wrap { position: relative; z-index: 1; }
.kd-dmod-outcomes .kd-dmod-head h2 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0;
  color: #fff;
}
.kd-dmod-outcomes .kd-dmod-head h2 .accent {
  background: linear-gradient(90deg, #29B6F6 0%, #01F0C8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-dmod-outcomes .kd-dmod-head p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  color: #FFFFFFCC;
}
.kd-dmod-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
.kd-dmod-outcomes-grid + .kd-dmod-outcomes-grid { margin-top: 40px; }
/* A trailing row with fewer than 3 items spreads its items across the
   full row width instead of leaving an empty column. */
.kd-dmod-outcomes-grid--1 { grid-template-columns: repeat(1, 1fr); }
.kd-dmod-outcomes-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kd-dmod-outcomes-card {
  border-top: 2px solid transparent;
  border-image: linear-gradient(90.47deg, #01AEF0 -0.02%, #01D4DA 97.78%) 1;
  padding-top: 24px;
  text-align: center;
}
.kd-dmod-outcomes-card h3 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  color: #fff;
  margin-bottom: 12px;
}
.kd-dmod-outcomes-card p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0;
  color: #FFFFFFCC;
}
.kd-dmod-outcomes-card p strong { font-weight: 700; color: #fff; }
@media (max-width: 1024px) {
  .kd-dmod-outcomes .kd-dmod-head h2 { font-size: 30px; line-height: 40px; }
  .kd-dmod-outcomes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .kd-dmod-outcomes .kd-dmod-head h2 { font-size: 30px; line-height: 40px; }
  .kd-dmod-outcomes .kd-dmod-head p { font-size: 16px; line-height: 1.6; }
  .kd-dmod-outcomes-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   WHY CHOOSE US — light band, left content+photo beside a
   right-hand vertical checklist (icon square + single-line stat).
   ══════════════════════════════════════════════════════════════ */
.kd-dmod-why2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}
.kd-dmod-why2-content h2 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0;
  color: #0D1B2E;
  margin-bottom: 20px;
}
.kd-dmod-why2-content p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #6B7A99;
  margin-bottom: 28px;
}
.kd-dmod-why2-image { border-radius: 16px; overflow: hidden; }
.kd-dmod-why2-image img { width: 100%; height: auto; display: block; }
.kd-dmod-why2-image-placeholder {
  padding: 40px;
  border: 1px dashed #c9d3e6;
  border-radius: 16px;
  font-size: 13px;
  color: #6B7A99;
  text-align: center;
}
.kd-dmod-why2-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-top: 8px;
}
.kd-dmod-why2-item { display: flex; align-items: center; gap: 20px; }
.kd-dmod-why2-icon {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 12px;
  background: #004195;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-dmod-why2-icon img,
.kd-dmod-why2-icon svg { width: 24px; height: 24px; }
.kd-dmod-why2-icon svg { stroke: #fff; }
.kd-dmod-why2-item span {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  color: #0D1B2E;
}
@media (max-width: 1024px) {
  .kd-dmod-why2-layout { grid-template-columns: 1fr; gap: 40px; }
  .kd-dmod-why2-content h2 { font-size: 30px; line-height: 42px; }
}
@media (max-width: 640px) {
  .kd-dmod-why2-content h2 { font-size: 30px; line-height: 36px; }
  .kd-dmod-why2-item span { font-size: 18px; line-height: 24px; }
  .kd-dmod-why2-icon { width: 48px; height: 48px; }
}

/* ══════════════════════════════════════════════════════════════
   SUCCESS STORIES — live case-study CPT grid, dark image cards
   (same component/pattern as the Revenue Cloud & Agentforce pages)
   ══════════════════════════════════════════════════════════════ */
.dmod-stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dmod-stories-card {
  position: relative;
  display: block;
  min-height: 420px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #1a2a4a;
  background-size: cover;
  background-position: center;
  text-decoration: none;
}
.dmod-stories-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,23,51,0) 30%, rgba(11,23,51,0.92) 100%);
}
.dmod-stories-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dmod-stories-tag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: -8px;
}
.dmod-stories-title {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  color: #fff;
}
.dmod-stories-stats { display: flex; gap: 16px; }
.dmod-stories-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 16px;
  border-right: 1px solid rgba(255,255,255,0.25);
}
.dmod-stories-stat:last-child { border-right: none; padding-right: 0; }
.dmod-stories-stat-value { font-size: 24px; font-weight: 800; color: #fff; }
.dmod-stories-stat-label { font-size: 12px; line-height: 1.4; color: rgba(255,255,255,0.7); }
.dmod-stories-read {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 10px 10px 10px 18px;
  border: 1.5px solid rgba(255,255,255,0.8);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}
.dmod-stories-arrow {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #0B1733;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dmod-stories-arrow svg { stroke: currentColor; }
@media (max-width: 1024px) { .dmod-stories-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════

/* ══════════════════════════════════════════════════════════════
   LATEST INSIGHTS — 1 image-overlay featured post beside 3 plain
   text list posts (real WP Posts, filtered by category)
   ══════════════════════════════════════════════════════════════ */
.dmod-insights-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: stretch; }
.dmod-insights-featured {
  position: relative;
  display: block;
  min-height: 420px;
  border-radius: var(--dmod-radius-lg);
  overflow: hidden;
  background-color: var(--dmod-navy-950);
  background-size: cover;
  background-position: center;
  text-decoration: none;
}
.dmod-insights-featured::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,36,0) 30%, rgba(11,18,36,.94) 100%);
}
.dmod-insights-featured-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; padding: 32px;
}
.dmod-insights-featured-tag {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #8fd0ff; margin-bottom: 12px;
}
.dmod-insights-featured-title { font-size: 26px; font-weight: 800; line-height: 1.3; color: #fff; margin-bottom: 12px; max-width: 480px; }
.dmod-insights-featured-desc { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 440px; }
.dmod-insights-side { display: flex; flex-direction: column; gap: 16px; }
.dmod-insights-item {
  display: block;
  background: #fff;
  border: 1px solid #E4E8EF;
  border-radius: var(--dmod-radius-md);
  padding: 22px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dmod-insights-item:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -16px rgba(10,17,40,.18); border-color: var(--dmod-blue-600); }
.dmod-insights-item-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dmod-blue-600); margin-bottom: 8px; }
.dmod-insights-item-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--dmod-ink-950); margin-bottom: 8px;
}
.dmod-insights-item-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; line-height: 1.6; color: #6B7A99; margin-bottom: 12px;
}
.dmod-insights-item-read { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--dmod-blue-600); }
.dmod-insights-item-arrow { display: inline-flex; align-items: center; }
.dmod-insights-item-arrow svg { transition: transform .2s ease; stroke: currentColor; }
.dmod-insights-item:hover .dmod-insights-item-arrow svg { transform: translateX(3px); }
@media (max-width: 900px) {
  .dmod-insights-grid { grid-template-columns: 1fr; }
  .dmod-insights-featured { min-height: 280px; }
}

   FAQ — bordered rounded card, matching border/radius/hover/open-state
   colors and typography exactly. Native <details>/<summary>.
   ══════════════════════════════════════════════════════════════ */
.kd-dmod-faq-wrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.kd-dmod-faq-item {
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.kd-dmod-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 20px;
  background: #fff;
  border: none;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  color: var(--dmod-ink-950);
  cursor: pointer;
  transition: background .18s ease;
}
.kd-dmod-faq-q:hover { background: #F9FAFB; }
.kd-dmod-faq-item[open] .kd-dmod-faq-q { background: #F9FAFB; border-bottom: 2px solid #E5E7EB; }
.kd-dmod-faq-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: #111827;
  display: flex; align-items: center; justify-content: center;
}
.kd-dmod-faq-icon img { width: 14px; height: 14px; }
.kd-dmod-faq-icon svg { transition: transform .2s ease; }
.kd-dmod-faq-item[open] .kd-dmod-faq-icon { color: var(--dmod-ink-950); }
.kd-dmod-faq-item[open] .kd-dmod-faq-icon svg { transform: rotate(180deg); }
.kd-dmod-faq-a {
  padding: 20px 20px 24px 20px;
  font-size: 16px;
  line-height: 1.7;
  color: #6B7280;
  background: #fff;
}
.kd-dmod-faq-item > summary { list-style: none; }
.kd-dmod-faq-item > summary::-webkit-details-marker { display: none; }

/* ══════════════════════════════════════════════════════════════
   FINAL CTA — contained rounded card (not full-bleed), centered
   heading/subtext, pill outline button with a circular arrow.
   ══════════════════════════════════════════════════════════════ */
.kd-dmod-cta2-wrap { padding-bottom: 120px; }
.kd-dmod-cta2 {
  background-size: cover;
  background-position: center;
  border-radius: 26px;
  padding: 64px 32px;
  overflow: hidden;
}
.kd-dmod-cta2-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.kd-dmod-cta2-inner h2 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  color: #fff;
  margin-bottom: 16px;
}
.kd-dmod-cta2-inner p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 32px;
}
.kd-dmod-cta2-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 26px;
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  transition: background .18s ease;
}
.kd-dmod-cta2-btn:hover { background: rgba(255,255,255,0.08); }
.kd-dmod-cta2-arrow {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #0B1733;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1024px) {
  .kd-dmod-cta2-inner h2 { font-size: 30px; }
}
@media (max-width: 640px) {
  .kd-dmod-cta2-inner h2 { font-size: 30px; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .kd-dmod-hero-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 115px; }
  .kd-dmod-hero h1 { font-size: 40px; line-height: 1.2; }
  .kd-dmod-hero-lead { max-width: 100%; }
  .kd-dmod-head h2 { font-size: 30px; }
  .kd-dmod-section--services .kd-dmod-head h2 { font-size: 30px; }
  .kd-dmod-solutions-layout { flex-direction: column; gap: 24px; }
  .kd-dmod-solutions-col { max-width: 100%; }
  .kd-dmod-solutions-card::after { display: none; }
  .kd-dmod-section--solutions .kd-dmod-head h2 { font-size: 30px; line-height: 42px; }
  .kd-dmod-services-layout { grid-template-columns: 1fr; }
  .kd-dmod-services-visual { order: -1; }
  .kd-dmod-services-visual img,
  .kd-dmod-services-visual-placeholder { min-height: 220px; }
  .kd-dmod-func-grid { grid-template-columns: 1fr; gap: 36px; }
  .kd-dmod-section--usecases .kd-dmod-head h2 { font-size: 30px; line-height: 42px; }
  .kd-dmod-dash-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kd-dmod-wrap { padding: 0 20px; }
  .kd-dmod-section { padding: 56px 0; }
  .kd-dmod-hero h1 { font-size: 40px; line-height: 1.25; }
  .kd-dmod-hero-lead { font-size: 16px; line-height: 1.6; }
  .kd-dmod-head h2 { font-size: 30px; line-height: 1.3; }
  .kd-dmod-section--solutions .kd-dmod-head h2,
  .kd-dmod-section--usecases .kd-dmod-head h2 { font-size: 30px; }
  .kd-dmod-hero-grid { gap: 28px; padding-top: 100px; }
  .kd-dmod-dash-top { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .kd-dmod-dash-top .period { display: none; }
  .kd-dmod-dash-stats .stat h4 { font-size: 19px; }
  .kd-dmod-dash-stats .stat span { font-size: 10.5px; }
  .kd-dmod-dash-chart { padding: 4px 16px 16px; }
  .kd-dmod-dash-bars { gap: 3px; }
  .kd-dmod-dash-row { padding: 12px 16px; gap: 10px; }
  .kd-dmod-dash-row .amount { min-width: auto; }
  .kd-dmod-dash-foot { padding: 12px 16px; gap: 14px; }
  .kd-dmod-services-grid { grid-template-columns: 1fr; }
  .kd-dmod-section--services .kd-dmod-head h2 { font-size: 30px; line-height: 1.3; }
  .kd-dmod-hero-ctas { flex-direction: column; align-items: stretch; }
  .kd-dmod-hero-ctas .kd-dmod-btn { justify-content: center; width: 100%; }
}