/* services.css — homepage "Services" navigation band.
   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/
   blog_hero never leak, and are styled here because the owner CSS is not
   attached in this component's isolated render).

   Eyebrow colour note: the screenshot (pixel-diff target) shows a red dot +
   muted-grey uppercase "SERVICES", identical to the about_info eyebrow — NOT
   the purple/pill the spec's ## Computed Styles for div.label-3 implies (that
   capture recorded no background and a colour contradicted by every pixel).
   Rendered to match the screenshot. */

/* ---------------- Section root (source: section.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;
}

/* ---------------- eyebrow row (source: div-block-73 > headin-links) ---------- */
.c-services__cta-wrap-2 .c-about_info__group-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 60px;
}
.c-services__cta-wrap-2 .c-about_info__headin-links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-10);
}
/* red dot (source div-block-62) */
.c-services__cta-wrap-2 .c-hero__group-2 {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-accent);
}
/* "SERVICES" eyebrow label (source div.label-3) — rule 20: no box-margin on a
   centred-row label; below-eyebrow spacing lives on the spacer that follows */
.c-services__cta-wrap-2 .c-hero__label-3 {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-a-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---------------- vertical spacer (source: spacer-medium) -------------------- */
.c-services__cta-wrap-2 .c-blog_hero__spacer-medium {
  display: block;
  width: 100%;
  height: 32px;
}

/* ---------------- cards wrapper (source: unnamed div) ------------------------ */
.c-services__cta-wrap-2 .c-services__cards {
  display: block;
  width: 100%;
  margin-top: var(--space-24);
}

/* ============================ Desktop 2x2 grid ============================== */
/* source industries-copy — visible >=992px, display:none <=991px */
.c-services__cta-wrap-2 .c-services__cta-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  align-items: start;
}
.c-services__cta-wrap-2 .c-services__cta-wrap > * {
  min-width: 0;
}
.c-services__cta-wrap-2 .c-services__card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
  padding: 30px 0 55px;
  border-bottom: 1px solid rgb(191, 191, 191);
  color: var(--color-text-dark);
  text-decoration: none;
}
.c-services__cta-wrap-2 .c-services__card-icon {
  flex: 0 0 auto;
  width: 118px;
  height: 130px;
  object-fit: cover;
  border-radius: var(--radius-15);
}
.c-services__cta-wrap-2 .c-services__card-text {
  flex: 1 1 auto;
  min-width: 0;
}
.c-services__cta-wrap-2 .c-services__card-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  color: var(--color-text-dark);
}
.c-services__cta-wrap-2 .c-services__card-body {
  margin: var(--space-8) 0 0;
  font-family: var(--font-family-body);
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-primary);
}
.c-services__cta-wrap-2 .c-services__card-arrow {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
}

/* ============================ Mobile stack ================================== */
/* source link-block-6..9 > service-mob — hidden >=992px, visible <=991px */
.c-services__cta-wrap-2 .c-services__mob-card {
  display: none;
  color: var(--color-text-dark);
  text-decoration: none;
}
.c-services__cta-wrap-2 .c-services__service-mob {
  display: block;
  border-top: 1px solid rgb(191, 191, 191);
  padding: 30px 0;
}
.c-services__cta-wrap-2 .c-services__mob-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-20);
}
.c-services__cta-wrap-2 .c-services__mob-num {
  font-family: var(--font-family-body);
  font-size: var(--font-size-a-sm);
  color: var(--color-text-muted);
}
.c-services__cta-wrap-2 .c-services__mob-arrow {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
}
.c-services__cta-wrap-2 .c-services__mob-img {
  display: block;
  width: 100%;
  height: 330px;
  object-fit: cover;
  object-position: center 50%;
  border-radius: var(--radius-15);
  margin-bottom: var(--space-20);
}
.c-services__cta-wrap-2 .c-services__mob-title {
  margin: 0 0 var(--space-12);
  font-family: var(--font-family-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  color: var(--color-text-dark);
}
.c-services__cta-wrap-2 .c-services__mob-body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-primary);
}

/* ============================ Tablet: 768 band ============================== */
@media (max-width: 991px) {
  .c-services__cta-wrap-2 .c-services__cta-wrap {
    display: none;
  }
  .c-services__cta-wrap-2 .c-services__mob-card {
    display: block;
  }
  /* the 24px wrapper offset is a desktop-only gap; the mobile stack sits
     directly under the spacer (source card1 border at ~156@768 / ~112@375) */
  .c-services__cta-wrap-2 .c-services__cards {
    margin-top: 0;
  }
}

/* ============================ Mobile: 375 band ============================== */
@media (max-width: 479px) {
  .c-services__cta-wrap-2 .c-about_info__heading-wrap-5 {
    padding: 32px var(--space-16);
  }
  .c-services__cta-wrap-2 .c-blog_hero__spacer-medium {
    height: var(--space-20);
  }
  .c-services__cta-wrap-2 .c-services__mob-img {
    height: 220px;
    /* the source's mobile (375) responsive-image variant crops lower than the
       tablet variant — shift the raw-original crop down to align the subject
       (source drop subject sits at ~73% of the box vs ~51% at 768) */
    object-position: center 25%;
  }
}