/* ============================================================
   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: #0B1224;
  --kd-ink-soft: #3A4256;
  --kd-ink-mute: #7A8194;
  --kd-line: rgba(11,18,36,0.10);
  --kd-accent: #004195;
  --kd-accent-2: #1B4DFF;
  --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);
}

.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: linear-gradient(96.24deg, #004195 0%, #01AEF0 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: 12px;
  padding: 8px 8px 8px 22px;
  border-radius: var(--kd-r-pill);
  background: var(--kd-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: transform .2s;
}
.kd-about-cta-btn:hover { transform: scale(.98); text-decoration: none; }
.kd-about-cta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #0B1224;
  flex-shrink: 0;
  transition: transform .2s;
}
.kd-about-cta-btn:hover .kd-about-cta-arrow { transform: translateX(2px); }
.kd-about-cta-btn--light { background: #fff; color: var(--kd-ink); }
.kd-about-cta-btn--light .kd-about-cta-arrow { background: rgba(11,18,36,.08); color: var(--kd-ink); }
.kd-about-cta-btn--light:hover { transform: scale(.98); }

/* ---------------- 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;
  align-items: center;
}
.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: clamp(34px, 4.4vw, 54px);
  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);
  line-height: 1.45;
  color: var(--kd-ink-soft);
}
/* 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: var(--kd-ink-mute);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.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 72px; }
.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: rgba(255,255,255,.65); }

.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 72px; }
.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: #01AEF0; }
.kd-about-mv-label { font-size: 22px; font-weight: 800; 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 72px; }
.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: 22px; height: 22px; }
.kd-about-solution-card h3 { font-size: 22px; font-weight: 700; 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: 13.5px;
  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 72px; }
.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: 21px; height: 21px; }
.kd-about-why-card h3 { font-size: 22px; font-weight: 700; 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 72px; }
.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; 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: 58px;
}
/* Same reasoning as the accent override elsewhere on a dark band: the
   default .kd-about-accent gradient starts at navy blue and disappears
   here, so use a solid cyan instead (matches .kd-contact-accent-cyan). */
.kd-about-locations-head .kd-about-accent {
  background: #01AEF0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-about-locations-head p { font-size: 18px; line-height: 28px; 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: 28px; 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;
  background-image: linear-gradient(135deg, #0F1A38 0%, #0B1224 60%);
  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; 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) {
  .kd-about-hero { height: auto; padding: 115px 0 56px; }
  .kd-about-hero-title { font-size: 40px; max-width: 720px; }
  .kd-about-section-head h2,
  .kd-about-partners-copy h2,
  .kd-about-locations-head h2,
  .kd-about-cta-content h2 { font-size: 30px; }
  .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; }
  .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-section-head h2,
  .kd-about-partners-copy h2,
  .kd-about-locations-head h2,
  .kd-about-cta-content h2 { font-size: 30px; }
  .kd-about-who { padding: 56px 0 56px; }
  .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,
  .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; }
}