/* services_2.css — "Studies show bad UX leads to lost conversions" stat panel.
   Values from the spec ## Computed Styles: 1440 = base rules;
   768 → @media(max-width:991px); 375 → @media(max-width:479px).
   Run breakpoint boundary set {479,767,991,1919}.
   Typography via var(--font-*) (framework-11 E1 lock; source family
   'Plus Jakarta Sans' already resolves through the frozen tokens).
   All selectors scoped under the component root .c-services__cta-wrap-2
   (rule 9 — the shared wrapper canonical classes owned by about_info/hero/
   careers_jointeam never leak, and are styled here because the owner CSS is
   not attached in this component's isolated render).

   Card colour pairing (card 1 = red + white text, card 2 = beige + dark text,
   card 3 = dark + white text) is POSITIONAL styling driven by the Twig
   modulo variant class (rule 29 / spec ## Proposed Drupal mapping note), not a
   seeded field. Stat value + description inherit the card's own colour. */

/* Border-box reset scoped to the component (Webflow applies box-sizing:border-box
   to every element; the bare SDC-preview root carries no such reset, so card
   min-height/width must include their padding to match the source's fixed
   320/270px card boxes). */
.c-services__cta-wrap-2,
.c-services__cta-wrap-2 *,
.c-services__cta-wrap-2 *::before,
.c-services__cta-wrap-2 *::after {
  box-sizing: border-box;
}

/* ---------------- Section root (source: aside.section_services) ------------- */
.c-services__cta-wrap-2 {
  display: block;
  color: var(--color-text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes body margin on composed pages) */
  margin: -8px;
}
.region-content .c-services__cta-wrap-2 {
  margin: 0;
  width: 100%;
}

/* ---------------- padding-global + padding-section-small -------------------- */
.c-services__cta-wrap-2 .c-about_info__heading-wrap-5 {
  display: block;
  padding: var(--space-64) var(--space-40);
}

/* ---------------- container-large ------------------------------------------- */
.c-services__cta-wrap-2 .c-about_info__heading-wrap {
  display: block;
  width: 100%;
  max-width: 1280px; /* source container-large cap; no --container-max token this run */
  margin-inline: auto;
}

/* ---------------- heading row (source: row.justify---center) ---------------- */
.c-services__cta-wrap-2 .c-about_info__heading-wrap-7 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-40);
  width: 100%;
}

/* heading wrapper — fixed max-width child of the centred row (rule 19) */
.c-services__cta-wrap-2 .c-about_info__heading-wrap-2 {
  display: flex;
  position: relative;
  justify-content: center;
  margin: 0 0 52px;
  width: 100%;
  max-width: 668px;
}

/* section heading (source h2.heading-style-h3.text-center) */
.c-services__cta-wrap-2 .c-services_2__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -1.5px;
  text-align: center;
  color: var(--color-text-body);
}

/* ---------------- card grid (source: color-card-grid) ----------------------- */
.c-services__cta-wrap-2 .c-services_2__color-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--space-40);
  width: 100%;
}
.c-services__cta-wrap-2 .c-services_2__color-card-grid > * {
  min-width: 0;
}

/* ---------------- stat card (source: color-card) ---------------------------- */
.c-services__cta-wrap-2 .c-services_2__color-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-24);
  padding: var(--space-40);
  min-height: 320px;
}
/* card 1 — red / bg-primary + white text */
.c-services__cta-wrap-2 .c-services_2__color-card--red {
  background-color: var(--color-bg-accent);
  color: var(--color-text-inverse);
}
/* card 2 — beige / bg-beige + dark text (no beige bg token this run) */
.c-services__cta-wrap-2 .c-services_2__color-card--beige {
  background-color: rgb(240, 232, 219);
  color: var(--color-text-dark);
}
/* card 3 — dark / bg-dark + white text */
.c-services__cta-wrap-2 .c-services_2__color-card--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

/* stat value (source: .heading-style-h3) */
.c-services__cta-wrap-2 .c-services_2__stat {
  font-family: var(--font-family-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -1.5px;
  color: inherit;
}

/* stat description (source: .heading-1) */
.c-services__cta-wrap-2 .c-services_2__desc {
  width: 100%;
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.48px;
  text-align: left;
  color: inherit;
}

/* ============================ Tablet: 768 band ============================== */
@media (max-width: 991px) {
  .c-services__cta-wrap-2 .c-about_info__heading-wrap-7 {
    gap: var(--space-10);
  }
  .c-services__cta-wrap-2 .c-services_2__heading {
    line-height: 40px;
  }
  .c-services__cta-wrap-2 .c-services_2__color-card-grid {
    gap: var(--space-20);
  }
  .c-services__cta-wrap-2 .c-services_2__color-card {
    gap: var(--space-20);
    padding: var(--space-20);
    min-height: 270px;
  }
  .c-services__cta-wrap-2 .c-services_2__stat {
    line-height: 40px;
  }
  .c-services__cta-wrap-2 .c-services_2__desc {
    font-size: 21px;
    line-height: 26px;
    letter-spacing: -0.42px;
  }
}

/* ============================ Mobile: 375 band ============================== */
@media (max-width: 479px) {
  .c-services__cta-wrap-2 .c-about_info__heading-wrap-5 {
    padding: 32px var(--space-16);
  }
  /* heading row stacks (source flex-direction:column, align-items:center @375) */
  .c-services__cta-wrap-2 .c-about_info__heading-wrap-7 {
    flex-direction: column;
    align-items: center;
    gap: var(--space-20);
  }
  .c-services__cta-wrap-2 .c-services_2__heading {
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -1px;
  }
  /* CSS grid collapses to a stacked flex column (source display:flex @375) */
  .c-services__cta-wrap-2 .c-services_2__color-card-grid {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--space-24);
  }
  .c-services__cta-wrap-2 .c-services_2__stat {
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -1px;
  }
  /* cards 1 & 3 stat value gains text-align:center at 375 (spec Typography) */
  .c-services__cta-wrap-2 .c-services_2__color-card--red .c-services_2__stat,
  .c-services__cta-wrap-2 .c-services_2__color-card--dark .c-services_2__stat {
    text-align: center;
  }
  .c-services__cta-wrap-2 .c-services_2__desc {
    font-size: 21px;
    line-height: 26px;
    letter-spacing: -0.42px;
  }
}