/* ============================================================
   ABOUT US PAGE — Webflow-clone rebuild
   Enqueued only via is_page_template('page-templates/tmpl-about.php').

   Design tokens below are ported directly from the Webflow source's
   own :root values (--ink, --line, --accent, --r-lg/md/pill, --bg)
   so this page keeps that design's specific feeling — warm off-white
   background, hairline borders, big display type, pill buttons with a
   white circular arrow badge, -10px card hover lift, dark gradient
   "punch" cards with a soft floating shadow — scoped under .kd-about
   so nothing leaks into the rest of the theme, which keeps its own
   (cooler/blue-tinted) tokens everywhere else. Font stays Geist/
   JetBrains Mono, already loaded theme-wide.
============================================================ */

.kd-about {
  --kd-ink: #0D1117;
  --kd-ink-soft: #6B7A99;
  --kd-ink-mute: #7A8194;
  --kd-line: rgba(11,18,36,0.10);
  --kd-accent: #004195;
  --kd-accent-2: #1B4DFF;
  /* One place to change every gradient-filled heading word on this page. */
  --kd-accent-grad: linear-gradient(90deg, #014A9C 0%, #01AEF0 100%);
  --kd-bg: #F7F6F2;
  --kd-card: #fff;
  --kd-r-lg: 22px;
  --kd-r-md: 14px;
  --kd-r-pill: 999px;
  position: relative;
  background: var(--kd-bg);
  color: var(--kd-ink);
}

/* Every element on the About Us page uses Geist. */
.kd-about,
.kd-about * {
  font-family: Geist, sans-serif;
}

.kd-about-bg {
  position: absolute;
  top: 0;
  
  transform: translateX(-50%);
  height: 900px;
  z-index: 0;
  background-image: url('../images/about-us/hero-background.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  opacity: .12;
  pointer-events: none;
}

.kd-about > section { position: relative; z-index: 1; }

/* Shared bits: eyebrow, section head, accent span, CTA button */
.kd-about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kd-ink-mute);
  margin-bottom: 16px;
}
.kd-about-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kd-accent);
  box-shadow: 0 0 0 4px rgba(0,65,149,.16);
}
.kd-about-eyebrow--on-dark { color: rgba(255,255,255,.65); }
.kd-about-eyebrow--on-dark .kd-about-eyebrow-dot { background: #3CC9FF; box-shadow: 0 0 0 4px rgba(60,201,255,.2); }

.kd-about-accent {
  background: var(--kd-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Per-section heading accent — each section's accent word gets its own
   gradient rule, same shape as .kd-about-locations-head .kd-about-accent
   below. Dark bands (journey, locations, cta) use brighter cyan-led
   gradients so the text fill stays visible. Edit any block on its own. */
.kd-about-hero-title .kd-about-accent {
  background: linear-gradient(90deg, #014A9C 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-about-who-copy h2 .kd-about-accent {
  background: linear-gradient(90deg, #014A9C 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-about-journey .kd-about-section-head .kd-about-accent {
  background: linear-gradient(90deg, #01AEF0 0.01%, #01D4DA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-about-solutions-section .kd-about-section-head .kd-about-accent {
  background: linear-gradient(90deg, #014A9C 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-about-why-section .kd-about-section-head .kd-about-accent {
  background: linear-gradient(90deg, #014A9C 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-about-team-section .kd-about-section-head .kd-about-accent {
  background: linear-gradient(90deg, #014A9C 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-about-partners-copy h2 .kd-about-accent {
  background: linear-gradient(90deg, #014A9C 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-about-cta-content h2 .kd-about-accent {
background: linear-gradient(90deg, #01AEF0 0.01%, #01D4DA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kd-about-section-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 52px;
}
.kd-about-section-head h2 {
  font-family: Geist, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--kd-ink);
  margin: 0;
}
.kd-about-section-head p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--kd-ink-soft);
  margin: 18px 0 0;
}

.kd-about-cta-btn {
  display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 600;
    transition: opacity .2s ease, background .2s ease;
}
.kd-about-cta-btn:hover { background: rgba(255, 255, 255, 0.28); text-decoration: none; color: #fff;}
.kd-about-cta-arrow {
 display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
}
.kd-about-cta-btn--light { 
  background: #0B1733;
    color: #fff;
    border: 1px solid #FFFFFF;
 }
.kd-about-cta-btn--light .kd-about-cta-arrow { background: #fff;
    color: #000000; }
.kd-about-cta-btn--light:hover { opacity: 0.9; text-decoration: none; color: #fff; background: #1d3c64; }

/* Hero CTA — its own colourway, distinct from the dark-card --light
   variant: a solid brand-gradient pill with a white arrow badge, sized
   to read on the light hero background. */
.kd-about-hero .kd-about-cta-btn {
  background: #004195;
  color: #fff;
  border: 0;
  box-shadow: 0 14px 30px -12px rgba(1, 74, 156, 0.55);
}
.kd-about-hero .kd-about-cta-btn .kd-about-cta-arrow {
  background: #fff;
  color: #014A9C;
}
.kd-about-hero .kd-about-cta-btn:hover {
  background: linear-gradient(90deg, #01397A 0%, #0895CC 100%);
  color: #fff;
  box-shadow: 0 18px 36px -12px rgba(1, 74, 156, 0.6);
}

/* ---------------- Hero ---------------- */
/* Desktop: viewport-relative height with the whole block (badge, title,
   lede, CTA, trust strip) vertically centered inside it — same
   treatment as the Home page hero (.kd-home-hero in home.css). Below
   1024px this is dropped back to padding-based sizing, since a
   near-full-viewport box just leaves a big empty gap on short mobile
   content. */
.kd-about-hero {
  height: calc(100vh - 200px);
  min-height: 560px;
  display: flex;
  /* Bias the hero block downward within its viewport-height box instead
     of dead-centre — the trust strip below is its own section and is
     unaffected. */
  align-items: flex-end;
  padding-bottom: clamp(80px, 16vh, 180px);
}
/* Landscape tablets / small laptops (1025–1199px): plain content-sized
   hero with modest padding — NOT the pushed-down desktop treatment. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .kd-about-hero {
    height: auto;
    min-height: 0;
    padding: 120px 0 48px;
  }
}
/* Normal desktops (not ultra-wide): size the hero to its content with
   padding instead of a near-viewport-height box, so the Trusted
   Partnerships strip below sits higher up. Screens wider than 1600px
   keep the tall viewport-height hero. */
@media (min-width: 1200px) and (max-width: 1600px) {
  .kd-about-hero {
    height: auto;
    min-height: 0;
    padding-top: 200px;
    padding-bottom: 70px;
  }
}
.kd-about-hero > .container { width: 100%; }
.kd-about-hero-has-bg {
  background-size: 100% 100%;
  background-position: top center;
  background-repeat: no-repeat;
}
.kd-about-hero-inner { max-width: 100%; margin: 0 auto; text-align: center; }
.kd-about-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--kd-r-pill);
  border: 1px solid var(--kd-line);
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--kd-ink-mute);
  margin-bottom: 28px;
}
.kd-about-badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kd-accent);
}
.kd-about-hero-title {
  font-family: Geist, sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -1.5px;
  color: var(--kd-ink);
  max-width: 890px;
  margin: 0 auto 36px;
}
.kd-about-hero-lede {
  max-width: 640px;
    margin: 0 auto 36px;
    font-size: clamp(17px, 1.4vw, 21px);
    font-size: 20px;
    line-height: 1.45;
    color: #6B7A99;
}
/* Own section, same spacing as the Home page's trust strip
   (.kd-home-trust in home.css) — not bundled into the hero's
   viewport-height box, so its position doesn't depend on hero height. */
.kd-about-trust-section { padding: 40px 0 64px; margin-bottom: 32px; }
.kd-about-trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
}
.kd-about-trust-label {
  color: #7A8194;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
}
.kd-about-trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.kd-about-trust-logos img { height: auto; width: auto; }
.kd-about-trust-logos .lg { display: inline-flex; align-items: center; }
.kd-about-trust-logos .lg svg { height: 28px; width: auto; }

/* ---------------- Who We Are ---------------- */
.kd-about-who { padding: 72px 0 0; }
.kd-about-who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.kd-about-who-media {
  border-radius: var(--kd-r-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px -24px rgba(11,18,36,.22);
}
.kd-about-who-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kd-about-who-copy h2 {
  font-family: Geist, sans-serif;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--kd-ink);
  margin: 0 0 20px;
}
.kd-about-who-copy p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--kd-ink-soft);
  margin: 0;
}

/* ---------------- Our Journey ----------------
   Dark full-bleed timeline band (same navy gradient "punch" treatment
   as the bottom CTA card, just full-width instead of a contained card).
   A connected line runs behind every milestone's dot — each card draws
   its own line segment and stretches it past its right edge by exactly
   the row's gap width (see --kd-journey-gap) so segments visually join
   into one continuous line across the whole row, without measuring
   anything in JS. A divider under the dot row separates the year/dot
   from the title/description. Paged with the Previous/Next buttons +
   progress bar above rather than free scrolling — .kd-about-journey-row
   still scrolls under the hood (simplest way to animate to a card
   smoothly, and it's a graceful touch fallback), but its own scrollbar
   is hidden so the buttons + progress bar read as the only way to move
   through it. The final ("what's next") card gets a brighter accent
   year/dot so the eye naturally lands on it as the destination of the
   row. */
.kd-about-journey {
  --kd-journey-gap: 32px;
  padding: 64px 0 72px;
  background-image: linear-gradient(135deg, #0F1A38 0%, #0B1224 60%);
  color: rgba(255,255,255,.72);
}
.kd-about-journey .kd-about-section-head h2 { color: #fff; }
.kd-about-journey .kd-about-section-head p { color:#FFFFFFCC;
 }

.kd-about-journey-controls {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto 44px;
}
.kd-about-journey-progress {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
}
.kd-about-journey-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3CC9FF, var(--kd-accent-2));
  transition: width .35s ease;
}
.kd-about-journey-arrows { display: flex; gap: 10px; flex-shrink: 0; }
.kd-about-journey-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.22);
  background: transparent;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.kd-about-journey-arrow--prev svg { transform: scaleX(-1); }
.kd-about-journey-arrow:hover:not(:disabled) {
  background: #fff;
  border-color: #fff;
  color: var(--kd-ink);
}
.kd-about-journey-arrow:active:not(:disabled) { transform: scale(.94); }
.kd-about-journey-arrow:disabled { opacity: .35; cursor: default; }

.kd-about-journey-viewport { overflow: hidden; }
.kd-about-journey-row {
  display: flex;
  gap: var(--kd-journey-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  padding: 4px;
  margin: -4px -4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.kd-about-journey-row::-webkit-scrollbar { display: none; }
.kd-about-journey-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 240px;
  display: flex;
  flex-direction: column;
}
/* .kd-about-journey-content exists purely so the desktop zigzag layout
   (see the min-width:1025px block) can group year+body into one bordered
   box without moving .kd-about-journey-dotrow in the DOM (which would
   change its visual position at every other size, since these are plain
   block elements below 1025px). At every other size it stays inert via
   display:contents, and this order-based sequencing keeps the original
   visual order (year, dot, body) unchanged despite dotrow's new DOM
   position after .kd-about-journey-content. */
.kd-about-journey-content { display: contents; }
.kd-about-journey-year { order: 1; }
.kd-about-journey-dotrow { order: 2; }
.kd-about-journey-body { order: 3; }
.kd-about-journey-year {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #3CC9FF;
  margin-bottom: 22px;
}
.kd-about-journey-dotrow {
  position: relative;
  height: 13px;
  margin-bottom: 24px;
}
.kd-about-journey-dotrow::before {
  content: '';
  position: absolute;
  left: 0;
  right: calc(-1 * var(--kd-journey-gap));
  top: 50%;
  height: 1px;
  background: rgba(255,255,255,.16);
  transform: translateY(-50%);
}
.kd-about-journey-dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #0B1224;
  border: 1.5px solid #3CC9FF;
  box-shadow: 0 0 0 4px rgba(60,201,255,.15);
}
.kd-about-journey-body { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; }
.kd-about-journey-title { font-size: 22px; font-weight: 700; line-height: 1.3; color: #fff; margin-bottom: 10px; }
.kd-about-journey-desc { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.58); margin: 0; }

/* Final milestone — the accent "what's next" card */
.kd-about-journey-card--accent .kd-about-journey-year { color: #fff; }
.kd-about-journey-card--accent .kd-about-journey-dot {
  background: var(--kd-accent-2);
  border-color: var(--kd-accent-2);
  box-shadow: 0 0 0 4px rgba(27,77,255,.25);
}
.kd-about-journey-card--accent .kd-about-journey-desc { color: rgba(255,255,255,.72); }

/* Desktop only (>1024px): show every milestone in one full row, no
   Previous/Next pagination — mobile/tablet keep the existing paginated
   slider untouched (nothing below 1024px is affected by this block). */
@media (min-width: 1025px) {
  .kd-about-journey { --kd-journey-gap: 36px; }
  .kd-about-journey-controls { display: none; }
  .kd-about-journey-viewport { overflow: visible; }
  .kd-about-journey-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    /* 1: up milestones' boxes, 2: shared dot line, 3: down milestones' boxes */
    grid-template-rows: auto auto auto;
    column-gap: var(--kd-journey-gap);
    row-gap: 22px;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .kd-about-journey-card { display: contents; }

  /* Each milestone's year+title+desc become ONE bordered box (grouped
     here instead of split across the grid, so a short description
     doesn't leave a gap between its own year and title — the box just
     sits with more/less headroom above or below it instead). */
  .kd-about-journey-content {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    padding: 24px 26px;
    background: rgba(255,255,255,.03);
    /* Wider than this card's own 1/8-column share — safe to overflow
       into the neighbouring columns because up-cards only ever sit next
       to (empty, in this row) down-column cells and vice versa. */
    width: 175%;
    max-width: 420px;
    /* Tall enough to comfortably fit even the longest milestone's
       description in full — every box lands on this same height
       without any content being cut or clamped. */
    min-height: 460px;
    margin: 0 auto;
    justify-self: center;
    box-sizing: border-box;
  }
  /* The first and last milestones have no neighbouring column to
     overflow into on their outer side (no column 0 before the first,
     no column 9 after the last) — anchoring them inward (start/end)
     instead of centering keeps their overflow entirely on the safe,
     occupied side. This is viewport-width independent (unlike a fixed
     px nudge, which only avoids edge overflow at the one viewport it
     was measured against), so it can't spill past the container at
     any screen size. Every other card stays centered like its
     row-mates. */
  .kd-about-journey-card:first-child .kd-about-journey-content { justify-self: start; margin: 0; }
  .kd-about-journey-card:last-child .kd-about-journey-content { justify-self: end; margin: 0; }
  /* The second-to-last card centers by default and overflows into the
     same empty column the anchored last card also needs, squeezing
     the gap between that pair. Nudge it back slightly so the gap
     matches its row-mates without reopening right-edge overflow. */
  .kd-about-journey-card:nth-child(6) .kd-about-journey-content { transform: translateX(-56px); }
  .kd-about-journey-content .kd-about-journey-year { order: 1; margin-bottom: 12px; }
  .kd-about-journey-content .kd-about-journey-body { order: 2; border-top: none; padding-top: 0; }

  /* Assign each milestone to its own column, in source order (up to 12
     slots — 8 real + 4 spare ACF ones). display:contents promotes a
     card's .kd-about-journey-content box and its .kd-about-journey-dotrow
     straight into this grid, so each needs an explicit column. */
  .kd-about-journey-card:nth-child(1) > * { grid-column: 1; }
  .kd-about-journey-card:nth-child(2) > * { grid-column: 2; }
  .kd-about-journey-card:nth-child(3) > * { grid-column: 3; }
  .kd-about-journey-card:nth-child(4) > * { grid-column: 4; }
  .kd-about-journey-card:nth-child(5) > * { grid-column: 5; }
  .kd-about-journey-card:nth-child(6) > * { grid-column: 6; }
  .kd-about-journey-card:nth-child(7) > * { grid-column: 7; }
  .kd-about-journey-card:nth-child(8) > * { grid-column: 8; }
  .kd-about-journey-card:nth-child(9) > * { grid-column: 9; }
  .kd-about-journey-card:nth-child(10) > * { grid-column: 10; }
  .kd-about-journey-card:nth-child(11) > * { grid-column: 11; }
  .kd-about-journey-card:nth-child(12) > * { grid-column: 12; }

  /* Strict alternation, one up / one down: odd milestones (1st, 3rd,
     5th…) sit ABOVE the shared dot line, even milestones (2nd, 4th,
     6th…) sit BELOW it — every dot lands in row 2, one continuous
     line straight across. */
  /* Dot centered within its column (not left-aligned) so it lines up
     with the box above/below it, which is itself column-centered. */
  .kd-about-journey-dot { margin: 0 auto; }

  .kd-about-journey-card:nth-child(odd) .kd-about-journey-content { grid-row: 1; align-self: end; }
  .kd-about-journey-card:nth-child(odd) .kd-about-journey-dotrow { grid-row: 2; align-self: center; }
  .kd-about-journey-card:nth-child(odd) .kd-about-journey-dotrow::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,.2);
  }

  .kd-about-journey-card:nth-child(even) .kd-about-journey-dotrow { grid-row: 2; align-self: center; }
  .kd-about-journey-card:nth-child(even) .kd-about-journey-content { grid-row: 3; align-self: start; }
  .kd-about-journey-card:nth-child(even) .kd-about-journey-dotrow::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: 1px;
    height: 45px;
    background: rgba(255,255,255,.2);
  }

  .kd-about-journey-card:last-child .kd-about-journey-dotrow::before {
    right: 0;
  }
}

/* ---------------- Mission & Vision ---------------- */
.kd-about-mv-section { padding: 72px 0 0; }
.kd-about-mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.kd-about-mv-card {
  background: var(--kd-card);
  border: 1px solid var(--kd-line);
  border-radius: var(--kd-r-lg);
  padding: 32px;
  box-shadow: 0 1px 2px rgba(11,18,36,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kd-about-mv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -20px rgba(11,18,36,.16);
}
.kd-about-mv-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-bottom: 22px;
}
.kd-about-mv-icon svg { width: 24px; height: 24px; }
.kd-about-mv-icon--mission { background: rgba(0,65,149,.08); color: var(--kd-accent); }
.kd-about-mv-icon--vision { background: rgba(1,174,240,.12); color: #004195; }
.kd-about-mv-label { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--kd-ink); margin: 0 0 12px; }
.kd-about-mv-text { font-size: 16px; line-height: 1.7; color: var(--kd-ink-soft); margin: 0; }

/* ---------------- Our Solutions ---------------- */
/* Card layout matches the Home page's "Four Capabilities" grid (icon
   badge + title + description) — see .kd-home-caps-* in home.css. */
.kd-about-solutions-section { padding: 72px 0 0; }
.kd-about-solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.kd-about-solution-card {
  background: var(--kd-card);
  border: 1px solid var(--kd-line);
  border-radius: var(--kd-r-md);
  padding: 28px;
  transition: transform .2s ease;
}
.kd-about-solution-card:hover { transform: translateY(-10px); }
.kd-about-solution-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(0,65,149,.08);
  color: var(--kd-accent);
  margin-bottom: 18px;
}
.kd-about-solution-icon svg,
.kd-about-solution-icon img { width: 24px; height: 24px; }
.kd-about-solution-card h3 { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--kd-ink); margin: 0 0 8px; }
.kd-about-solution-card p { font-size: 16px; line-height: 1.6; color: var(--kd-ink-soft); margin: 0; }
.kd-about-solution-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.kd-about-solution-tag {
  font-size: 11.5px;
  line-height: 1.4;
  padding: 5px 11px;
  border-radius: 20px;
  background: rgba(0,65,149,.06);
  border: 1px solid var(--kd-line);
  color: var(--kd-accent);
  font-weight: 500;
}
.kd-about-solution-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kd-accent);
}
.kd-about-solution-link:hover { text-decoration: none; }
.kd-about-solution-link svg {
  width: 14px;
  height: 14px;
  transition: transform .18s ease;
}
.kd-about-solution-link:hover svg { transform: translateX(3px); }

/* ---------------- Why Choose KloudData? ---------------- */
.kd-about-why-section { padding: 72px 0 0; }
.kd-about-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.kd-about-why-card {
  background: var(--kd-card);
  border: 1px solid var(--kd-line);
  border-radius: var(--kd-r-md);
  padding: 26px;
  transition: transform .2s ease;
}
.kd-about-why-card:hover { transform: translateY(-10px); }
.kd-about-why-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(0,65,149,.08);
  color: var(--kd-accent);
  margin-bottom: 18px;
}
.kd-about-why-icon svg { width: 24px; height: 24px; }
.kd-about-why-card h3 { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--kd-ink); margin: 0 0 10px; }
.kd-about-why-card p { font-size: 16px; line-height: 1.65; color: var(--kd-ink-soft); margin: 0; }

/* ---------------- Leadership Team ---------------- */
.kd-about-team-section { padding: 72px 0 0; }
.kd-about-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.kd-about-team-card {
  background: var(--kd-card);
  border: 1px solid var(--kd-line);
  border-radius: var(--kd-r-md);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 1px 2px rgba(11,18,36,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kd-about-team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -18px rgba(11,18,36,.18);
  border-color: var(--kd-accent);
}
.kd-about-team-name { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--kd-ink); }
.kd-about-team-role {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--kd-accent);
  margin-top: 5px;
}
.kd-about-team-linkedin {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--kd-accent);
  color: #fff;
  transition: background .2s ease, transform .2s ease;
}
.kd-about-team-linkedin svg { width: 17px; height: 17px; }
.kd-about-team-linkedin:hover { background: var(--kd-accent-2); transform: scale(1.06); }

/* ---------------- Partners, Certifications & Credibility ----------------
   Copy panel + auto-scrolling logo marquee (pure CSS, no JS) — same
   technique as the Salesforce pages' Partnership & Certifications
   section, just re-themed with this page's own tokens. Badges render
   twice back-to-back in the PHP loop so the keyframe loops seamlessly
   at translateX(-50%). */
.kd-about-partners { padding: 72px 0 72px; overflow: hidden; }
.kd-about-partners-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.kd-about-partners-layout > * { min-width: 0; }

.kd-about-partners-marquee {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.kd-about-partners-track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: kd-about-partners-scroll 36s linear infinite;
}
.kd-about-partners-marquee:hover .kd-about-partners-track { animation-play-state: paused; }
@keyframes kd-about-partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .kd-about-partners-track { animation: none; }
  .kd-about-partners-marquee { overflow-x: auto; }
}
.kd-about-partners-badge {
  flex: 0 0 auto;
  width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 14px;
  border: 1px solid var(--kd-line);
  border-radius: var(--kd-r-md);
  background: var(--kd-card);
  box-shadow: 0 4px 14px rgba(11,18,36,.05);
}
.kd-about-partners-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
}
.kd-about-partners-badge-icon img,
.kd-about-partners-badge-icon svg { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.kd-about-partners-badge-icon svg { width: 40px; height: 40px; }
.kd-about-partners-copy h2 {
  font-family: Geist, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--kd-ink);
  margin: 0 0 16px;
}
.kd-about-partners-copy p { font-size: 18px; line-height: 1.7; color: var(--kd-ink-soft); margin: 0; }

/* ---------------- Global Locations ----------------
   Exact clone of the Contact page's Global Locations section
   (.kd-contact-locations* in contact.css) — same background gradient,
   heading typography, card design, and colors, copied 1:1 under this
   page's own .kd-about-loc-* namespace. */
.kd-about-locations { padding: 72px 0; background-image: linear-gradient(135deg, #0F1A38 0%, #0B1224 60%); color: #fff; }
.kd-about-locations-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.kd-about-locations-head h2 {
  font-family: Geist, sans-serif;
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.15;
}
.kd-about-locations-head .kd-about-accent {
background: linear-gradient(90deg, #01AEF0 0.01%, #01D4DA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-about-locations-head p { font-size: 18px; line-height: 1.55; color: #FFFFFFCC; margin: 0; }

.kd-about-locations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kd-about-loc-card {
  position: relative;
  min-height: 410px;
  border-radius: var(--kd-r-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
}
.kd-about-loc-card--gradient { background-image: linear-gradient(155deg, #16264D 0%, #0B1224 100%); }
.kd-about-loc-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: rgba(20,26,40,.55);
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: var(--kd-r-pill);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.kd-about-loc-flag { display: block; width: 32px; height: 32px;  }
.kd-about-loc-city { font-size: 22px; font-weight: 700; font-style: normal; line-height: 1.3; margin-bottom: 0; }
.kd-about-loc-underline { display: block; width: 40px; height: 2px; background: #3CC9FF; margin: 8px 0 16px; }
.kd-about-loc-addr { font-size: 16px; font-weight: 400; line-height: 1.6; color: rgba(255,255,255,.85); }
.kd-about-loc-addr-row { display: flex; gap: 20px; }
.kd-about-loc-addr-row .kd-about-loc-addr { flex: 1 1 0; min-width: 0; }

/* ---------------- Bottom CTA ---------------- */
.kd-about-cta-section { padding: 72px 0 72px; }
.kd-about-cta-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--kd-r-lg);
  padding: 60px 56px;
  text-align: center;
  color: #fff;
  /* Layers, top → bottom: cyan radial glow, decorative line pattern
     (right side, full height), opaque navy fill. */
  background:
    radial-gradient(65.89% 73.5% at 85% 15%, rgba(1, 174, 240, 0.3) 0%, rgba(1, 174, 240, 0) 60%),
    var(--kd-cta-bg-image, url('../images/sap/cta-bg-pattern.svg')) var(--kd-cta-bg-pos, right top) / var(--kd-cta-bg-size, auto 100%) no-repeat,
    linear-gradient(0deg, #0B1733, #0B1733);
  box-shadow: 0 30px 70px -30px rgba(11,18,36,.45);
}
.kd-about-cta-content { position: relative; max-width: 640px; margin: 0 auto; }
.kd-about-cta-content h2 { font-size: 48px; font-weight: 700; line-height: 1.15; color: #fff; margin: 0 0 16px; }
.kd-about-cta-text { font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.72); margin: 0 0 32px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
  /* Manual line breaks inside headings/titles/copy are desktop-only —
     on tablet & mobile the text should wrap naturally. */
  .kd-about br { display: none; }
  .kd-about-hero { height: auto; padding: 115px 0 56px; }
  .kd-about-hero-title { font-size: 40px; max-width: 720px; line-height: 1.2; }
  .kd-about-who-copy h2 { line-height: 1.2; }
  .kd-about-section-head h2,
  .kd-about-partners-copy h2,
  .kd-about-locations-head h2,
  .kd-about-cta-content h2 { font-size: 30px; line-height: 1.2; }
  .kd-about-solutions-grid,
  .kd-about-why-grid { grid-template-columns: repeat(2, 1fr); }
  .kd-about-locations-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .kd-about-mv-grid { grid-template-columns: 1fr; }
  .kd-about-who-grid { grid-template-columns: 1fr; gap: 32px; }
  .kd-about-who-media { order: -1; }
  .kd-about-partners-layout { grid-template-columns: 1fr; gap: 36px; }
  .kd-about-partners-copy { order: -1; text-align: center; }
}

@media (max-width: 640px) {
  .kd-about-bg { height: 560px; }
  .kd-about-hero { padding: 100px 0 56px; }
  .kd-about-hero-title { font-size: 40px; max-width: 100%; margin: 0 auto 24px; line-height: 1.25; }
  .kd-about-hero-lede { font-size: 15.5px; }
  .kd-about-badge { font-size: 11.5px; padding: 6px 12px 6px 8px; }
  .kd-about-section-head { margin-bottom: 32px; }
  .kd-about-who-copy h2 { line-height: 1.25; }
  .kd-about-section-head h2,
  .kd-about-partners-copy h2,
  .kd-about-locations-head h2,
  .kd-about-cta-content h2 { font-size: 30px; line-height: 1.25; }
  .kd-about-journey-title,
  .kd-about-solution-card h3,
  .kd-about-why-card h3,
  .kd-about-team-name,
  .kd-about-mv-label,
  .kd-about-loc-city { line-height: 1.35; }
  .kd-about-who { padding: 56px 0 0; }
  .kd-about-journey { --kd-journey-gap: 20px; padding: 48px 0 56px; }
  .kd-about-journey-controls { gap: 16px; margin-bottom: 32px; }
  .kd-about-journey-arrow { width: 36px; height: 36px; }
  .kd-about-journey-card { width: 200px; }
  .kd-about-journey-year { font-size: 12px; margin-bottom: 18px; }
  .kd-about-journey-dotrow { margin-bottom: 18px; }
  .kd-about-journey-body { padding-top: 18px; }
  .kd-about-mv-section,
  .kd-about-solutions-section,
  .kd-about-why-section,
  .kd-about-team-section { padding: 56px 0 0; }
  .kd-about-cta-section { padding: 56px 0 56px; }
  .kd-about-locations { padding: 48px 0; }
  .kd-about-solutions-grid,
  .kd-about-why-grid { grid-template-columns: 1fr; }
  .kd-about-mv-card { padding: 26px; }
  .kd-about-mv-label { font-size: 20px; }
  .kd-about-mv-text { font-size: 14px; }
  .kd-about-partners { padding: 56px 0 56px; }
  .kd-about-partners-badge { width: 108px; padding: 14px 10px; }
  .kd-about-partners-badge-icon { height: 38px; }
  .kd-about-partners-badge-icon svg { width: 32px; height: 32px; }
  .kd-about-cta-card { padding: 44px 24px; }
  .kd-about-trust-section { padding: 4px 0 40px; margin-bottom: 24px; }
  .kd-about-trust-logos { gap: 24px; }
}