/* cs_info — /work/* case-study client-info panel.
   Values from spec ## Computed Styles: 1440 = base rules; 768 -> @media
   (max-width: 991px); 375 -> @media (max-width: 479px) (run-canonical
   breakpoint set {479,767,991,1919}). All shared canonical classes are scoped
   under the component-unique root .c-cs_info__section-cs-info. */

/* ---- Section wrapper — path 0 (padding 96px 40px @1440) ----------------- */
.c-cs_info__section-cs-info {
  display: block;
  padding: 96px var(--space-40); /* 96px: no --space-96 token this run */
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);     /* 16px */
  font-weight: 400;
  line-height: var(--line-height-body); /* 24px */
  color: var(--color-text-body);        /* rgb(51,51,51) */
  /* SDC-preview UA body-margin neutraliser (top only; composed reset below
     zeroes it under .region-content, where the body margin is already 0). */
  margin: -8px 0 0 0;
}
.region-content .c-cs_info__section-cs-info {
  margin: 0;
  width: 100%;
}

/* ---- Container column — path 0.0 (max-width 1280, flex-centred) ---------- */
.c-cs_info__section-cs-info .c-about_info__heading-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1280px; /* no --container-max token this run */
  margin-inline: auto;
}

/* ---- Content grid — path 0.0.0 (2-col grid 372/728, max-width 1140) ------ */
.c-cs_info__section-cs-info .c-cs_info__grid {
  display: grid;
  justify-content: space-between;
  gap: var(--space-40); /* 40px @1440 */
  grid-template-columns: 372px minmax(0, 1fr); /* 372px / 728px track */
  width: 100%;
  max-width: 1140px; /* content row cap; no token this run */
}
.c-cs_info__section-cs-info .c-cs_info__grid > * {
  min-width: 0;
}

/* ---- Left column — path 0.0.0.0 (logo + Focus + Services stack) ---------- */
.c-cs_info__section-cs-info .c-cs_info__info {
  display: flex;
  flex-direction: column;
  gap: 30px; /* no --space-30 token this run */
  min-width: 0;
}

/* ---- Logo wrapper / image — path 0.0.0.0.0 / .0 (64px locked height) ----- */
.c-cs_info__section-cs-info .c-cs_info__logo-wrap {
  display: block;
}
.c-cs_info__section-cs-info .c-cs_info__media {
  display: inline-block;
  height: 64px; /* locked logo height @1440/768 */
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ---- Detail rows (Focus / Services) — paths 0.0.0.0.1 / .2 --------------- */
.c-cs_info__section-cs-info .c-cs_info__pair {
  display: block;
}
/* subheading-2-semi label — 14px/600 (path .1.0 / .2.0) */
.c-cs_info__section-cs-info .c-cs_info__body-2 {
  display: block;
  font-size: 14px; /* subheading label; no dedicated token */
  font-weight: 600;
  color: var(--color-text-body); /* rgb(51,51,51) */
}
/* mb-8px — 8px below the label */
.c-cs_info__section-cs-info .c-cs_info__body {
  margin: 0 0 var(--space-8);
}
/* Focus value — secondary body text (path 0.0.0.0.1.1) */
.c-cs_info__section-cs-info .c-cs_info__pair-value {
  display: block;
  margin: 0;
  font-size: var(--font-size-body);     /* 16px @1440 (inherits base) */
  line-height: var(--line-height-body); /* 24px */
  color: var(--color-text-secondary);   /* rgb(115,115,115) */
}
/* Services value list — flex column (path 0.0.0.0.2.1 div.col) */
.c-cs_info__section-cs-info .c-cs_info__col {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.c-cs_info__section-cs-info .c-cs_info__service {
  margin: 0;
  font-size: var(--font-size-body);   /* 16px */
  line-height: 30px;                  /* ~30px/item -> 5 items ≈ 152px col; no token */
  color: var(--color-text-secondary); /* rgb(115,115,115) */
}

/* ---- Right column (introduction) — path 0.0.0.1 ------------------------- */
.c-cs_info__section-cs-info .c-cs_info__introduction {
  display: block;
  width: 100%;
  max-width: 667px;
  min-width: 0;
}
/* cs-intro rich-text wrap — 20px top padding (path 0.0.0.1.0) */
.c-cs_info__section-cs-info .c-cs_info__body-wrap {
  display: block;
  padding: var(--space-20) 0 0;
}
/* Intro paragraphs — 20px/30px, rgb(18,18,18), constant across breakpoints */
.c-cs_info__section-cs-info .c-cs_info__body-wrap p {
  margin: 0 0 var(--space-16); /* 16px between paragraphs */
  font-size: 20px;             /* intro body; no --font-size-20 token this run */
  line-height: 30px;           /* no --line-height-30 token this run */
  color: var(--color-text-dark); /* rgb(18,18,18) */
}
.c-cs_info__section-cs-info .c-cs_info__body-wrap p:last-child {
  margin-bottom: 0;
}

/* ---- CTA link — path 0.0.0.1.1.0 ("Live website", red, mt-3-25) --------- */
.c-cs_info__section-cs-info .c-cs_info__cta-wrap {
  display: block;
}
.c-cs_info__section-cs-info .c-cs_info__cta {
  display: inline-block;
  margin: 52px 0 0; /* 52px top offset below intro; no token this run */
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
  text-decoration: none;
  color: var(--color-bg-accent); /* rgb(237,28,36) — exact token match */
  background: transparent;
}

/* ============================ 768 (@media max-width:991px) ================= */
@media (max-width: 991px) {
  .c-cs_info__section-cs-info {
    padding: var(--space-64) var(--space-40); /* 64px 40px @768 */
  }
  .c-cs_info__section-cs-info .c-cs_info__grid {
    gap: var(--space-20); /* 20px @768 */
    grid-template-columns: 286px minmax(0, 1fr); /* 286.281 / 381.719 @768 */
  }
  .c-cs_info__section-cs-info .c-cs_info__info {
    gap: 30px 20px; /* row 30 / col 20 @768; no --space-30 token */
  }
  .c-cs_info__section-cs-info .c-cs_info__pair-value {
    font-size: 15px; /* @768 */
  }
}

/* ============================ 375 (@media max-width:479px) ================= */
@media (max-width: 479px) {
  .c-cs_info__section-cs-info {
    padding: var(--space-64) var(--space-20); /* 64px 20px @375 */
    /* cancel the preview body's 8px LEFT margin too — no longer absorbed at
       mobile width (composed-page reset above still zeroes it). */
    margin: -8px 0 0 -8px;
  }
  .c-cs_info__section-cs-info .c-cs_info__grid {
    display: flex;
    flex-direction: column;
    gap: 60px; /* grid collapses to flex column @375; no --space-60 token */
  }
  .c-cs_info__section-cs-info .c-cs_info__info {
    gap: var(--space-20); /* 20px @375 */
  }
  .c-cs_info__section-cs-info .c-cs_info__media {
    height: 30px; /* logo shrinks to 30px @375 */
  }
  .c-cs_info__section-cs-info .c-cs_info__pair-value {
    font-size: 14px; /* @375 */
  }
  .c-cs_info__section-cs-info .c-cs_info__cta {
    text-align: left; /* the one cross-breakpoint flip @375 */
  }
}