/* ==========================================================================
   Caseload Manager — module stylesheet
   Source: Figma "Ai repositioning" → High fidelity → "caseload manager"
           (node 178-6816), PDF 1440 x 6560.

   Sections only — the site header and footer belong to the theme.

   module.html renders its sections inside a `<div class="csm-body">`, which is
   what every `.csm-body …` rule below hangs off (the page build used the same
   class on <body>). Everything is namespaced .csm-* so it cannot touch any
   other module or page.

   Tokens taken from the design + the Voicescape theme:
     text              #191919
     brand green       #35D899   (solid buttons)
     brand blue        #0021FF   (gradient end)
     concept purple    #B342D4   (gradient start)
     indigo            #4B2FED   (FAQ questions / chevrons)
     flow arrow blue   #4259F4
     panel grey        #F5F5F5
     hairline          #E6E6E6
     tag border        #C6C6C6
     band gradient     180deg #5330EB -> #B342D4
     accent gradient   90deg  #B342D4 -> #0021FF
     AI tag stroke     212deg #3FF0DA -> #24A0FF -> #0021FF -> #B342D4
     font              Axiforma (theme default) — never re-declared here

   Vertical rhythm is the design's own: every section padding below is the
   measured gap between the two elements it separates, so the rebuilt page
   comes out at the same 6560px tall as the design.
   ========================================================================== */

/* the theme's global reset is not guaranteed inside a DND rich-text module */
.csm-body,
.csm-body *,
.csm-body *::before,
.csm-body *::after {
  box-sizing: border-box;
}

.csm-body {
  margin: 0;
  background: #fff;
  color: var(--csm-ink);
  font-family: "Axiforma", "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  --csm-ink: #191919;
  --csm-green: #35d899;
  --csm-purple: #b342d4;
  --csm-blue: #0021ff;
  --csm-indigo: #4b2fed;
  --csm-arrow: #4259f4;
  --csm-panel: #f5f5f5;
  --csm-line: #e6e6e6;
  --csm-tag: #c6c6c6;
  --csm-accent: linear-gradient(90deg, #b342d4 0%, #0021ff 100%);
}

/* :where() keeps this reset at the body's own specificity, so any .csm-*
   rule below still wins — a plain `.csm-body p` reset would out-rank every
   single-class margin on a paragraph in this file. */
.csm-body :where(h1, h2, h3, h4, p, ul, li) {
  margin: 0;
  padding: 0;
}

.csm-body :where(ul) {
  list-style: none;
}

.csm-body img,
.csm-body svg {
  display: block;
  max-width: 100%;
}

/* --- layout -------------------------------------------------------------- */
/* design: 1440 viewport, 160px margins, 1120px of content */
.csm-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

/* the narrow measure used by the solution cards and the FAQ: 10 of the
   container's 12 columns (933px) */
.csm-narrow {
  max-width: 973px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- type ---------------------------------------------------------------- */
.csm-h1 {
  max-width: 640px;
  font-size: 52px;
  line-height: 54px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--csm-ink);
}

.csm-h1__plain {
  display: block;
  color: var(--csm-ink);
}

.csm-h2 {
  font-size: 26px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--csm-ink);
}

.csm-h2--center {
  text-align: center;
}

.csm-eyebrow {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--csm-ink);
}

/* gradient text: purple -> blue, the page's headline treatment */
.csm-grad {
  color: #6b2fd6; /* fallback when background-clip:text is unsupported */
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .csm-grad {
    background-image: var(--csm-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.csm-grad--collections {
  --csm-accent: linear-gradient(90deg, #b342d4 0%, #d59fe8 100%);
}

/* --- buttons ------------------------------------------------------------- */
.csm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 26px;
  border: 1px solid var(--csm-green);
  border-radius: 35px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.csm-btn--solid {
  background: var(--csm-green);
  color: #fff;
}

.csm-btn--solid:hover,
.csm-btn--solid:focus {
  background: #fff;
  color: var(--csm-green);
}

.csm-btn--ghost {
  background: #fff;
  color: var(--csm-green);
}

.csm-btn--ghost:hover,
.csm-btn--ghost:focus {
  background: var(--csm-green);
  color: #fff;
}

/* --- image placeholders -------------------------------------------------- */
/* every raster / illustration slot in the design renders as one of these,
   labelled with the asset that belongs there */
.csm-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 40px;
  padding: 8px;
  border: 1px dashed #c9c9d1;
  border-radius: 8px;
  background-color: #ececf0;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0 10px, transparent 10px 20px);
  color: #6b6b78;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
}

.csm-ph--logo {
  border-style: solid;
  border-color: #e6e6e6;
  background-color: #fff;
  background-image: none;
  color: #8b8b99;
}

.csm-ph--icon {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 50%;
}

.csm-ph--fill {
  border-radius: 0;
  height: 100%;
}


/* ==========================================================================
   1 · HERO
   ========================================================================== */
.csm-hero {
  padding: 63px 0 50px;
}

.csm-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 456px;
  gap: 34px;
  align-items: start;
}

.csm-eyebrow {
  margin-bottom: 10px;
}

.csm-h1 {
  margin-bottom: 29px;
}

.csm-lede {
  max-width: 520px;
  margin-bottom: 31px;
  font-size: 18px;
  line-height: 27px;
  color: var(--csm-ink);
}

/* feature tags */
.csm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 33px;
}

.csm-tags li {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--csm-tag);
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  line-height: 1;
  color: var(--csm-ink);
}

/* the "AI" tag swaps its flat border for a gradient stroke */
.csm-tags .csm-tags__ai {
  padding: 0 7px;
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(212deg, #3ff0da 10%, #24a0ff 31%, #0021ff 52%, #b342d4 86%) border-box;
}

.csm-tags .csm-tags__ai span {
  font-weight: 700;
  color: var(--csm-ink);
}

.csm-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 21px;
  margin-bottom: 67px;
}

/* --- case study card (sits against the top-right) ------------------------ */
.csm-case {
  position: relative;
  margin-top: 10px;
}

.csm-case__badge {
  position: absolute;
  top: 0;
  left: 17px;
  transform: translateY(-100%);
  padding: 9px 15px;
  border-radius: 4px;
  background: var(--csm-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.csm-case__card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 32px 30px 34px;
  border-radius: 12px;
  background: var(--csm-accent);
  color: #fff;
}

.csm-case__logo {
  width: 106px;
  height: 58px;
}

.csm-case__quote {
  margin: 34px 0 0;
  padding-left: 16px;
  border-left: 2px solid #fff;
  font-size: 18px;
  line-height: 25px;
  font-weight: 600;
}

.csm-case__quote strong {
  font-weight: 700;
}

/* the rule + link are pinned to the bottom of the card, as in the design */
.csm-case__rule {
  height: 0;
  margin: auto 0 26px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.75);
}

.csm-case__link {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.csm-case__link:hover,
.csm-case__link:focus {
  color: #fff;
  text-decoration: underline;
}

.csm-case__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.csm-case__arrow {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease;
}

.csm-case:hover .csm-case__arrow,
.csm-case:focus-within .csm-case__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* --- stat cards ---------------------------------------------------------- */
.csm-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 115px;
}

.csm-stat {
  flex: 1 1 0;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 133px;
  padding: 22px 30px;
  border: 2px solid transparent;
  border-radius: 8px;
  /* white fill inside the padding box + gradient stroke on the border box */
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #b342d4 0%, #0121fe 100%) border-box;
  text-align: center;
}

.csm-stat__num {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--csm-ink);
}

.csm-stat__cap {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--csm-ink);
}

/* --- trusted by the sector ----------------------------------------------- */
.csm-trusted__title {
  margin-bottom: 31px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  text-align: center;
  color: var(--csm-ink);
}

/* Auto-sliding logo row. One "set" is as wide as the visible row (100cqw of
   the marquee below), so the three copies always out-span it and the track can
   slide by exactly one set (33.3333%) without a seam — the seam spacing comes
   from the set's own right padding, which matches its column gap. */
.csm-logos {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}

.csm-logos::before,
.csm-logos::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(32px, 8%, 96px);
  z-index: 1;
  pointer-events: none;
}

.csm-logos::before {
  left: 0;
  background: linear-gradient(to right, #fff, rgb(255 255 255 / 0));
}

.csm-logos::after {
  right: 0;
  background: linear-gradient(to left, #fff, rgb(255 255 255 / 0));
}

.csm-logos__track {
  display: flex;
  width: max-content;
  animation: csm-logos-marquee 34s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

/* hold the row still while someone is reading it */
.csm-logos:hover .csm-logos__track,
.csm-logos:focus-within .csm-logos__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .csm-logos__track { animation: none; }
}

@keyframes csm-logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); } /* exactly one of the three sets */
}

.csm-logos__set {
  flex: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  width: 100cqw;               /* = the visible width of the marquee */
  padding-right: 16px;         /* the gap between two sets, same as the columns */
  box-sizing: border-box;
}

.csm-logos__set li {
  height: 88px;
}


/* ==========================================================================
   2 · GRADIENT BAND + WHITE CARD + FLOW DIAGRAM
   ========================================================================== */
.csm-band {
  position: relative;
  padding: 78px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #5330eb 0%, #b342d4 100%);
}

/* the design's decorative brand graphic: diagonal stripes and a soft blue
   wash. Swap this element for the exported artwork when it is available. */
.csm-band__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.055) 0 62px, rgba(255, 255, 255, 0) 62px 210px),
    linear-gradient(115deg, rgba(0, 33, 255, 0.5) 0%, rgba(0, 33, 255, 0) 38%, rgba(0, 33, 255, 0) 62%, rgba(0, 33, 255, 0.45) 100%);
}

.csm-band > .csm-container {
  position: relative;
  z-index: 1;
}

.csm-card {
  padding: 62px 0 52px;
  border-radius: 16px;
  background: #fff;
}

.csm-card__head {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 0 60px;
}

.csm-card__title {
  max-width: 320px;
}

.csm-card__body {
  max-width: 573px;
  font-size: 14px;
  line-height: 20.5px;
  color: var(--csm-ink);
}

.csm-card__rule {
  height: 0;
  margin: 45px 60px 41px;
  border: 0;
  border-top: 1px solid var(--csm-line);
}

/* --- flow diagram -------------------------------------------------------- */
.csm-flow {
  padding: 0 33px;
  text-align: center;
}

.csm-flow__node {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0 auto;
  padding: 12px 26px;
  border-radius: 8px;
  background: var(--csm-panel);
  text-align: left;
}

.csm-flow__node--data {
  width: 427px;
  min-height: 115px;
}

.csm-flow__node--ai {
  position: relative;
  z-index: 2;
  width: 474px;
  min-height: 155px;
}

.csm-flow__icon {
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
}

.csm-flow__title {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--csm-ink);
}

.csm-flow__text {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 19px;
  color: var(--csm-ink);
}

.csm-flow__arrow {
  display: block;
  margin: 5px auto;
  width: 20px;
  height: 60px;
  color: var(--csm-arrow);
}

.csm-flow__arrow svg {
  width: 20px;
  height: 34px;
  margin: 13px auto;
}

.csm-flow__arrow--tight {
  height: 45px;
}

.csm-flow__arrow--tight svg {
  margin: 5.5px auto;
}

/* the elbow arms leave the AI box at its mid-height and drop to the three
   columns; the arms that run behind the opaque box are simply hidden by it.
   The negative top margin is a percentage of the flow width, so the whole
   connector scales with the layout. */
.csm-flow__branch {
  position: relative;
  z-index: 1;
  margin-top: -13.62%;
  color: var(--csm-arrow);
}

.csm-flow__branch svg {
  width: 100%;
  height: auto;
}

.csm-flow__cols {
  display: flex;
  margin: 0 auto;
  padding: 12px 0;
  border-radius: 8px;
  background: var(--csm-panel);
  text-align: center;
}

.csm-flow__col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 26px;
}

.csm-flow__col + .csm-flow__col {
  border-left: 1px solid #b9b9b9;
}

.csm-flow__col .csm-flow__icon {
  width: 62px;
  height: 62px;
  margin-bottom: 10px;
}

.csm-flow__col .csm-flow__title {
  margin-bottom: 6px;
}

.csm-flow__col .csm-flow__text {
  margin-top: 0;
  font-size: 14px;
}

.csm-flow__outcome {
  display: flex;
  align-items: center;
  gap: 26px;
  width: 440px;
  min-height: 120px;
  margin: 0 auto;
  padding: 12px 26px;
  border-radius: 8px;
  background: var(--csm-accent);
  color: #fff;
  text-align: left;
}

.csm-flow__outcome .csm-flow__title,
.csm-flow__outcome .csm-flow__text {
  color: #fff;
}


/* ==========================================================================
   3 · PROVEN OUTCOMES ACROSS THE SECTOR
   ========================================================================== */
.csm-outcomes {
  padding: 112px 0 0;
}

/* measured off the design: heading box to card top 40px, gutter between the
   three cards 14px (3 x 364 + 2 x 14 = the 1120 content width) */
.csm-outcomes .csm-h2 {
  margin-bottom: 40px;
}

.csm-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Card interaction 4 — three identical white cards: gradient bar, gradient
   heading, icon + figure, caption, partner logo, "view … results" link.
   Interactions 5, 6 and 7 are the hover state below. */
.csm-oc {
  position: relative;
  isolation: isolate;      /* keeps the bar and overlay in the card's own layer */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 443px;
  padding: 34px 34px 28px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--csm-line);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* full-width gradient bar along the top edge, clipped by the card radius */
.csm-oc__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: var(--csm-accent);
}

.csm-oc__heading {
  font-size: 26px;
  line-height: 31px;
  font-weight: 700;
}

.csm-oc__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 36px 0 0;
}

.csm-oc__figure .csm-ph {
  width: 56px;
  height: 56px;
  min-height: 0;
}

.csm-oc__num {
  font-size: 60px;
  line-height: 1;
  font-weight: 700;
  color: var(--csm-ink);
}

.csm-oc__cap {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--csm-ink);
}

.csm-oc__partner {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.csm-oc__partner .csm-ph {
  width: 130px;
  height: 68px;
}

.csm-oc__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin-top: 44px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--csm-ink);
  text-decoration: none;
}

.csm-oc__link:hover,
.csm-oc__link:focus {
  text-decoration: underline;
}

/* the circular arrow beside "view … results" */
.csm-oc__spin {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* --- card interactions 5, 6, 7 · hover overlay --------------------------- */
.csm-oc:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px #eef0f7, 0 18px 40px rgba(20, 21, 46, 0.18);
}

.csm-oc__overlay {
  position: absolute;
  inset: 0;                /* covers the card, top bar included */
  z-index: 2;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 30px 26px;
  text-align: left;
  color: #fff;
  background: linear-gradient(135deg, var(--csm-purple) 0%, var(--csm-blue) 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.csm-oc:hover .csm-oc__overlay,
.csm-oc:focus-within .csm-oc__overlay {
  opacity: 1;
  visibility: visible;
}

.csm-oc__chip {
  display: inline-flex;
  align-items: center;
  width: fit-content; border-radius:4px;
  margin-bottom: 4px; background:#fff !important;
}

.csm-oc__chip .csm-ph {
  width: 130px;
  height: 48px;
  min-height: 0;
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.92);
  background-image: none;
  color: #5b5b68;
}

.csm-oc__ovtitle {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: inherit;
}

.csm-oc__ovbody {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.92;
  color: inherit;
}

/* margin-top:auto pins the rule and the story link to the card's bottom edge */
.csm-oc__ovrule {
  display: block;
  height: 1px;
  margin: auto 0 2px;
  background: currentColor;
  opacity: 0.55;
}

.csm-oc__ovlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.csm-oc__arrow {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.csm-oc:hover .csm-oc__arrow,
.csm-oc:focus-within .csm-oc__arrow {
  opacity: 1;
  transform: translateX(0);
}

.csm-oc__ovlink:hover {
  text-decoration: underline;
}


/* ==========================================================================
   4 · AWARD WINNING INNOVATION
   ========================================================================== */
.csm-awards {
  padding: 113px 0 0;
}

.csm-awards__grid {
  display: flex;
  align-items: flex-start;
  gap: 23px;
}

.csm-awards__intro {
  flex: 0 0 260px;
}

.csm-awards__intro .csm-h2 {
  margin-bottom: 26px;
}

.csm-awards__list {
  flex: 0 1 785px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.csm-award {
  display: flex;
  flex-direction: column;
  min-height: 303px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--csm-line);
  overflow: hidden;
}

.csm-award__media {
  height: 180px;
  background: var(--csm-panel);
}

.csm-award__media .csm-ph {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.csm-award__cap {
  flex: 1 1 auto;
  padding: 18px 20px;
}

.csm-award__cap h3 {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--csm-ink);
}

.csm-award__cap p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--csm-ink);
}


/* ==========================================================================
   5 · EMBRACING AI IN SOCIAL HOUSING
   ========================================================================== */
.csm-wp {
  padding: 121px 0 0;
}

.csm-wp__card {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 563px;
  padding: 0 0 0 64px;
  border-radius: 16px;
  background:#ececec;
  overflow: hidden;
}

.csm-wp__copy {
  flex: 0 0 auto;
  width: 300px;
}

.csm-wp__copy .csm-h2 {
  margin-bottom: 42px;
}

.csm-wp__media {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
}

.csm-wp__media .csm-ph {
  border: 0;
  background-color: transparent;
  background-image: none;
}


/* ==========================================================================
   6 · BROWSE OUR OTHER INCOME SOLUTIONS
   ========================================================================== */
.csm-solutions {
  padding: 237px 0 0;
}

.csm-solutions .csm-h2 {
  margin-bottom: 19px;
}

/* the pair is 933px of the container, centred */
.csm-solutions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 973px;
  margin: 0 auto;
  padding: 0 20px;
}

.csm-sol {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 348px;
  padding: 24px 24px 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--csm-line);
}

.csm-sol__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--csm-accent);
}

.csm-sol__bar--collections {
  background: linear-gradient(90deg, #b342d4 0%, #d59fe8 100%);
}

.csm-sol__media {
  flex: 0 0 auto;
  height: 118px;
  margin: 0 0 16px;
}

.csm-sol__media .csm-ph {
  border: 0;
  background: transparent;
}

.csm-sol__title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}

.csm-sol__body {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 19px;
  color: var(--csm-ink);
}

.csm-sol__link {
  margin-top: auto;
  padding-top: 18px;
  font-size: 16px;
  font-weight: 500;
  color: var(--csm-ink);
  text-decoration: none;
}

.csm-sol__link:hover,
.csm-sol__link:focus {
  text-decoration: underline;
}


/* ==========================================================================
   7 · SEE CASELOAD MANAGER IN ACTION
   ========================================================================== */
.csm-action {
  padding: 113px 0 0;
}

.csm-action__card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 505px;
  padding: 24px;
  border-radius: 16px;
  background: var(--csm-accent);
}

.csm-action__copy {
  align-self: center;
  flex: 1 1 auto;
  padding: 0 40px 0 34px;
  color: #fff;
}

.csm-action__title {
  max-width: 330px;
  margin-bottom: 34px;
  font-size: 34px;
  line-height: 42px;
  font-weight: 700;
  color: #fff;
}

.csm-action__panel {
  flex: 0 0 533px;
  max-width: 50%;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.csm-action__panel .csm-ph {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
}


/* ==========================================================================
   8 · FREQUENTLY ASKED QUESTIONS
   ========================================================================== */
.csm-faq {
  padding: 131px 0 121px;
}

.csm-faq .csm-h2 {
  margin-bottom: 35px;
}

.csm-faq__list {
  max-width: 973px;
  margin: 0 auto;
  padding: 0 20px;
}

.csm-faq__item {
  border-bottom: 1px solid var(--csm-line);
}

.csm-faq__item:first-child {
  border-top: 1px solid var(--csm-line);
}

.csm-faq__head {
  font-size: inherit;
  font-weight: inherit;
}

.csm-faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.csm-faq__q {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
}

/* CSS chevron so it can take the page's accent colours */
.csm-faq__chev {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-right: 3px solid var(--csm-indigo);
  border-bottom: 3px solid var(--csm-indigo);
  border-radius: 1px;
  transform: rotate(45deg);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.csm-faq__item.is-open .csm-faq__chev {
  margin-top: 6px;
  border-color: var(--csm-purple);
  transform: rotate(225deg);
}

.csm-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.csm-faq__item.is-open .csm-faq__panel {
  grid-template-rows: 1fr;
}

.csm-faq__panel-inner {
  overflow: hidden;
  /* without min-height:0 a collapsed 0fr grid row still keeps the height of
     its content, so every closed panel would leak a few lines */
  min-height: 0;
}

.csm-faq__panel-inner p {
  max-width: 900px;
  padding-bottom: 20px;
  font-size: 14px;
  line-height: 18px;
  color: var(--csm-ink);
}


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .csm-hero__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
  .csm-h1 {
    font-size: 44px;
    line-height: 46px;
  }
  .csm-band {
    padding: 56px 0;
  }
  .csm-solutions,
  .csm-wp,
  .csm-awards,
  .csm-outcomes,
  .csm-action {
    padding-top: 90px;
  }
  .csm-faq {
    padding: 90px 0 90px;
  }
}

@media (max-width: 991px) {
  .csm-hero {
    padding: 46px 0 40px;
  }
  .csm-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .csm-case {
    max-width: 456px;
    margin-top: 30px;
  }
  .csm-case__card {
    min-height: 0;
  }
  .csm-case__rule {
    margin-top: 30px;
  }
  .csm-lede,
  .csm-h1 {
    max-width: none;
  }
  .csm-stats {
    margin-bottom: 70px;
  }
  .csm-stat {
    min-width: 210px;
  }
  .csm-logos__set {
    gap: 10px;
    padding-right: 10px;
  }
  .csm-logos__set li {
    height: 72px;
  }
  .csm-oc {
    min-height: 0;
  }

  /* the diagram stacks, so the elbow connector has nowhere to point */
  .csm-flow__branch {
    display: none;
  }
  .csm-flow__cols {
    flex-direction: column;
  }
  .csm-flow__col + .csm-flow__col {
    border-left: 0;
    border-top: 1px solid #b9b9b9;
  }
  .csm-flow__node--data,
  .csm-flow__node--ai,
  .csm-flow__outcome {
    width: 100%;
    max-width: 474px;
  }

  .csm-outcomes__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .csm-oc__partner {
    margin-top: 32px;
  }
  .csm-oc__link {
    margin-top: 28px;
  }

  .csm-awards__grid {
    flex-direction: column;
    gap: 34px;
  }
  .csm-awards__intro {
    flex: 1 1 auto;
  }
  /* the desktop 785px basis is a width — in the stacked column it would be a
     height, stretching every award card to 785px */
  .csm-awards__list {
    flex: 0 1 auto;
  }

  .csm-wp__card {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    min-height: 0;
    padding: 40px 34px;
  }
  .csm-wp__copy {
    width: auto;
  }
  .csm-wp__copy .csm-h2 {
    margin-bottom: 24px;
  }
  .csm-wp__media {
    min-height: 300px;
  }

  .csm-action__card {
    flex-direction: column;
    min-height: 0;
    gap: 30px;
    padding: 34px 24px;
  }
  .csm-action__copy {
    padding: 0;
  }
  .csm-action__panel {
    flex: 1 1 auto;
    max-width: none;
    min-height: 340px;
  }
}

@media (max-width: 767px) {
  .csm-hero {
    padding: 32px 0 30px;
  }
  .csm-eyebrow {
    font-size: 16px;
    margin-bottom: 14px;
  }
  .csm-h1 {
    font-size: 32px;
    line-height: 34px;
    margin-bottom: 18px;
  }
  .csm-lede {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 22px;
  }
  .csm-tags li {
    font-size: 11px;
  }
  .csm-cta {
    margin-bottom: 40px;
  }
  .csm-btn {
    height: 44px;
    padding: 0 22px;
    font-size: 16px;
  }
  .csm-stats {
    gap: 16px;
    margin-bottom: 50px;
  }
  .csm-stat {
    flex: 1 1 100%;
    min-width: 0;
    min-height: 0;
  }
  .csm-stat__num {
    font-size: 34px;
  }
  /* the logo row stays one marquee row: all six logos of a set sit in it, a
     little tighter, so nothing is dropped on the smallest screens */
  .csm-logos__set {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    padding-right: 6px;
  }
  .csm-logos__set li {
    height: 56px;
  }
  .csm-logos .csm-ph {
    padding: 4px;
    font-size: 8px;
    letter-spacing: 0.02em;
  }

  .csm-band {
    padding: 34px 0;
  }
  .csm-card {
    padding: 34px 0 30px;
  }
  .csm-card__head {
    display: block;
    padding: 0 24px;
  }
  .csm-card__title {
    max-width: none;
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 20px;
  }
  .csm-card__rule {
    margin: 26px 24px;
  }
  .csm-flow {
    padding: 0 18px;
  }
  .csm-flow__node,
  .csm-flow__outcome {
    gap: 16px;
    padding: 16px;
  }
  .csm-flow__icon {
    width: 62px;
    height: 62px;
  }
  .csm-flow__title {
    font-size: 17px;
  }

  .csm-h2 {
    font-size: 22px;
    line-height: 30px;
  }
  .csm-outcomes,
  .csm-awards,
  .csm-wp,
  .csm-solutions,
  .csm-action {
    padding-top: 60px;
  }
  .csm-outcomes .csm-h2,
  .csm-awards__intro .csm-h2,
  .csm-solutions .csm-h2,
  .csm-faq .csm-h2 {
    margin-bottom: 20px;
  }

  /* --- awards: heading, swipe row, full-width CTA -------------------------
     Mobile layout (Figma): the heading sits on its own line, the three award
     cards become a swipe row that bleeds past the container so the next card
     peeks in at the right edge, and "View all awards" closes the section as a
     full-width pill. The intro wrapper is dissolved rather than duplicated, so
     its heading and button can be ordered either side of the card row. */
  .csm-awards__grid {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .csm-awards__intro {
    display: contents;
  }
  .csm-awards__list {
    order: 1;
    flex: none;               /* desktop's 785px basis would be a height here */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    grid-template-columns: none;
    gap: 10px;
    margin: 0 -20px;          /* bleed out to the viewport edges */
    padding: 0 20px 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .csm-awards__list::-webkit-scrollbar {
    display: none;
  }
  .csm-award {
    min-height: 0;
    scroll-snap-align: start;
  }
  .csm-award__media {
    height: 136px;
  }
  .csm-awards__intro .csm-btn {
    order: 2;
    margin-top: 24px;
    width: 100%;
  }

  /* --- other income solutions: the same swipe row ------------------------ */
  .csm-solutions__grid {
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    grid-template-columns: none;
    gap: 10px;
    max-width: none;
    margin: 0 -20px;
    padding: 0 20px 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .csm-solutions__grid::-webkit-scrollbar {
    display: none;
  }
  .csm-sol {
    min-height: 0;
    scroll-snap-align: start;
  }
  .csm-sol__media {
    height: 130px;
    margin-bottom: 20px;
  }
  .csm-action__title {
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 24px;
  }
  .csm-faq {
    padding: 60px 0 60px;
  }
  .csm-faq__btn {
    padding: 18px 0;
  }
  .csm-faq__q {
    font-size: 15px;
  }
  .csm-faq__panel-inner p {
    font-size: 13.5px;
    line-height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csm-body .csm-btn,
  .csm-body .csm-faq__chev,
  .csm-body .csm-faq__panel {
    transition: none;
  }
}


/* ==========================================================================
   Real images (fill the slots)

   The build above is all placeholders, so every image slot is sized on its
   .csm-ph. Once a real asset is uploaded (module.html then renders an <img>
   instead of the placeholder) that box has no size of its own, so each slot is
   given the same box here: the image fills the space the placeholder held.
   The media-query overrides above only change the container, so these rules
   keep working at every breakpoint.
   ========================================================================== */
.csm-case__logo img,
.csm-logos__set img,
.csm-flow__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* match the placeholder boxes set per card */
.csm-oc__figure img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.csm-oc__partner img {
  width: 130px;
  height: 68px;
  object-fit: contain;
}

.csm-oc__chip img {
  width: 130px;
  height: 48px;
  object-fit: contain;
}

/* full-bleed slots: the award photo crops, the diagrams stay whole */
.csm-award__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csm-sol__media img,
.csm-wp__media img,
.csm-action__panel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.csm-sol__link { display: inline-flex; align-items: center; gap: 8px; }
.csm-sol__arrow {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease;
}
.csm-sol:hover .csm-sol__arrow,
.csm-sol:focus-within .csm-sol__arrow { opacity: 1; transform: translateX(0); }
.csm-sol:hover .csm-sol__media img,
.csm-sol:focus-within .csm-sol__media img { transform: scale(1.06); }
.csm-sol__media img { transition: transform .45s ease; }

/* Scroll reveal: elements settle into place as each section enters view. */
.csm-body [data-csm-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 1.15s ease, transform 1.15s cubic-bezier(.22,1,.36,1); }
.csm-body [data-csm-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .csm-body [data-csm-reveal] { opacity: 1; transform: none; transition: none; }
  .csm-sol__arrow, .csm-sol__media img { transition: none; }
}

/* Figma alignment with the actual uploaded artwork and the theme's split
   Axiforma families. The theme's "Axiforma" face contains only bold glyphs. */
.csm-body {
  font-family: "Axiforma-Book", "Poppins", "Segoe UI", Arial, sans-serif;
}

.csm-body :is(.csm-stat__num, .csm-oc__num, .csm-tags__ai) {
  font-family: "Axiforma", "Poppins", "Segoe UI", Arial, sans-serif;
}

.csm-body .csm-case__quote {
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  margin-top: 28px;
}

.csm-body .csm-case__quote strong {
  font-family: "Axiforma", "Poppins", "Segoe UI", Arial, sans-serif;
}

.csm-body .csm-case__logo {
  width: 145px;
  height: 59px;
}

.csm-body .csm-case__card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
}

.csm-body .csm-card {
  border-radius: 0;
  box-shadow: 0 8px 14px rgb(0 0 0 / 16%);
}

.csm-body .csm-band__art {
  background-image: url("https://4244938.fs1.hubspotusercontent-eu1.net/hubfs/4244938/Benefits%20overview%20background%20(1).png");
  background-size: cover;
  background-position: center;
}

.csm-body .csm-oc,
.csm-body .csm-award,
.csm-body .csm-sol {
  border-radius: 6px;
  box-shadow: 0 3px 8px rgb(0 0 0 / 14%);
}

.csm-body .csm-oc {
  min-height: 392px;
  padding: 34px 24px 28px;
}

.csm-body .csm-oc__heading {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 28px;
}

.csm-body .csm-oc__figure { margin-top: 22px; }
.csm-body .csm-oc__cap { margin-top: 8px; font-size: 16px; }
.csm-body .csm-oc__partner { margin-top: 24px; }
.csm-body .csm-oc__partner img { height: 54px; }
.csm-body .csm-oc__link { margin-top: auto; padding-top: 24px; font-size: 13px; }
.csm-body .csm-oc__bar { height: 7px; }

.csm-body .csm-award__cap { padding: 14px 16px 18px; }
.csm-body .csm-award__cap p { font-style: italic; }

/* This upload is a complete 1120 x 573 banner, including its empty copy area. */
.csm-body .csm-wp__card {
  position: relative;
  display: block;
  min-height: 0;
  aspect-ratio: 1120 / 573;
  padding: 56px;
  border-radius: 6px;
  isolation: isolate;
}

.csm-body .csm-wp__copy {
  position: relative;
  z-index: 1;
  width: 330px;
}

.csm-body .csm-wp__copy .csm-h2 { margin-bottom: 24px; }
.csm-body .csm-wp__media { position: absolute; inset: 0; z-index: -1; min-height: 0; }
.csm-body .csm-wp__media img { object-fit: cover; }

.csm-body .csm-sol__media { height: 196px; margin-bottom: 20px; }
.csm-body .csm-sol__title { font-size: 22px; }
.csm-body .csm-sol:not(:has(.csm-sol__bar--collections)) .csm-sol__bar {
  background: linear-gradient(90deg, #0021ff, #6acaff);
}
.csm-body .csm-sol:not(:has(.csm-sol__bar--collections)) .csm-sol__title {
  --csm-accent: linear-gradient(90deg, #0021ff, #6acaff);
}

.csm-body .csm-action__card { border-radius: 6px; }
.csm-body .csm-action__panel { padding: 30px; border-radius: 6px; }
.csm-body .csm-action__panel img { max-height: 397px; }
.csm-body .csm-faq__item:first-child { border-top: 0; }
.csm-body .csm-faq__item:last-child { border-bottom: 0; }
.csm-body .csm-faq__q { font-family: "Axiforma-Book", sans-serif; font-weight: 400; }
.csm-body .csm-faq__panel-inner { font-size: 14px; line-height: 18px; }
.csm-body .csm-faq__item.is-open .csm-faq__panel-inner { padding-bottom: 20px; }
.csm-body .csm-faq__panel-inner p { padding-bottom: 0; }

/* Keep the theme's green pill-button states off the FAQ accordion. */
.csm-body .csm-faq__btn,
.csm-body .csm-faq__btn:hover,
.csm-body .csm-faq__btn:focus,
.csm-body .csm-faq__btn:active {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.csm-body .csm-faq__btn:focus:not(:focus-visible) { outline: none; }
.csm-body .csm-faq__btn:focus-visible {
  outline: 2px solid var(--csm-indigo);
  outline-offset: 3px;
}

@media (min-width: 992px) {
  .csm-body .csm-card__title { flex: 0 0 370px; max-width: 370px; }
  .csm-body .csm-card__head { gap: 40px; }
  .csm-body .csm-flow__node--ai { min-height: 126px; }
  .csm-body .csm-flow__arrow { height: 48px; }
  .csm-body .csm-flow__arrow svg { margin: 7px auto; }
  .csm-body .csm-flow__arrow--tight { height: 45px; }
  .csm-body .csm-flow__arrow--tight svg { margin: 5.5px auto; }
  .csm-body .csm-awards__grid { align-items: center; }
  .csm-body .csm-awards__intro { flex-basis: 260px; }
  .csm-body .csm-awards__list { flex: 1 1 0; }
  .csm-body .csm-action__copy { padding-left: 70px; }
  .csm-body .csm-action__title { max-width: 400px; font-size: 40px; line-height: 44px; margin-bottom: 24px; }
}

@media (min-width: 1200px) {
  .csm-body .csm-h1 { font-size: 48px; line-height: 54px; }
  .csm-body .csm-tags li { font-size: 10px; padding: 0 7px; }
  .csm-body .csm-tags { gap: 8px; }
  .csm-body .csm-stat { min-height: 144px; }
  .csm-body .csm-stat__num { font-size: 48px; }
  .csm-body .csm-stats { margin-bottom: 104px; }
  .csm-body .csm-solutions { padding-top: 120px; }
}

@media (max-width: 991px) {
  /* The design places the case study before the hero buttons on mobile. */
  .csm-body .csm-hero__grid { display: flex; flex-direction: column; gap: 0; }
  .csm-body .csm-hero__main { display: contents; }
  .csm-body .csm-case { order: 1; width: 100%; max-width: none; margin: 30px 0 32px; }
  .csm-body .csm-cta { order: 2; width: 100%; flex-direction: column; gap: 10px; margin-bottom: 40px; }
  .csm-body .csm-cta .csm-btn { width: 100%; }
  .csm-body .csm-tags { margin-bottom: 30px; }
  .csm-body .csm-flow__col { display: grid; grid-template-columns: 62px minmax(0, 1fr); text-align: left; gap: 4px 16px; padding: 22px 16px; }
  .csm-body .csm-flow__col .csm-flow__icon { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; }
  .csm-body .csm-flow__col .csm-flow__title { grid-column: 2; margin-bottom: 0; }
  .csm-body .csm-flow__col .csm-flow__text { grid-column: 2; }
  .csm-body .csm-flow__col + .csm-flow__col { margin: 0 16px; padding-inline: 0; }
  .csm-body .csm-flow__node--ai::after {
    content: ""; position: absolute; left: calc(50% - 8px); bottom: -34px;
    width: 16px; height: 26px; background: var(--csm-arrow);
    clip-path: polygon(40% 0,60% 0,60% 60%,100% 60%,50% 100%,0 60%,40% 60%);
  }
  .csm-body .csm-flow__cols { margin-top: 44px; }
  .csm-body .csm-wp__card { aspect-ratio: auto; padding: 28px; min-height: 410px; }
  .csm-body .csm-wp__copy { width: auto; display: flex; flex-direction: column; min-height: 354px; }
  .csm-body .csm-wp__copy .csm-btn { margin-top: auto; }
  .csm-body .csm-wp__media { top: 78px; bottom: 70px; }
  .csm-body .csm-wp__media img { object-fit: cover; object-position: right center; }
  .csm-body .csm-action__copy { display: contents; }
  .csm-body .csm-action__title { order: 0; margin-bottom: 0; }
  .csm-body .csm-action__panel { order: 1; min-height: 0; aspect-ratio: 455 / 397; padding: 22px; }
  .csm-body .csm-action__copy .csm-btn { order: 2; width: 100%; }
}

@media (max-width: 767px) {
  .csm-body .csm-stat { flex-direction: row; gap: 24px; justify-content: flex-start; text-align: left; min-height: 96px; padding: 20px 28px; }
  .csm-body .csm-stat__num { flex: 0 0 105px; }
  .csm-body .csm-stat__cap { margin-top: 0; font-size: 12px; }
  .csm-body .csm-logos__set { width: max(100cqw, 700px); }
  .csm-body .csm-sol__media { height: 178px; }
  .csm-body .csm-sol__title { font-size: 18px; }
  .csm-body .csm-lede { font-size: 14px; line-height: 20px; }
  .csm-body .csm-tags li { font-size: 9px; height: 24px; padding-inline: 7px; }
  .csm-body .csm-case__card { padding: 24px; }
  .csm-body .csm-case__logo { width: 106px; height: 43px; }
  .csm-body .csm-case__quote { font-size: 16px; line-height: 20px; margin-top: 20px; }
  .csm-body .csm-case__rule { margin: 24px 0 20px; }
  .csm-body .csm-case__link { font-size: 14px; }
  .csm-body .csm-awards__list,
  .csm-body .csm-solutions__grid { grid-auto-columns: 86%; }
  .csm-body .csm-award__media { height: 200px; }
  .csm-body .csm-wp__media img { object-position: center center; }
  .csm-body .csm-case__arrow { width: 13px; height: 13px; }
}

/* Revision review, 30 September 2026: measured against Figma. */
.csm-body .csm-case__badge { border-radius: 4px 4px 0 0; }
.csm-body .csm-tags li { font-family: "Axiforma-Book", sans-serif; font-size: 12px; line-height: 18px; height: 26px; padding: 4px 6px; }
.csm-body .csm-tags .csm-tags__ai { padding: 2px 4px; }
.csm-body .csm-tags { gap: 8px; }
.csm-body .csm-oc { min-height: 392px; padding: 32px 24px; }
.csm-body .csm-oc__heading { min-height: 62px; line-height: 31px; }
.csm-body .csm-oc__figure { margin-top: 17px; }
.csm-body .csm-oc__num { font-family: "Axiforma", sans-serif; font-size: 64px; line-height: 1.1; }
.csm-body .csm-oc__cap { margin-top: 4px; font-size: 18px; line-height: 27px; }
.csm-body .csm-oc__partner { margin-top: 40px; }
.csm-body .csm-oc__partner img { height: 47px; }
.csm-body .csm-oc__link { margin-top: 40px; padding-top: 0; font-size: 14px; line-height: 21px; }
.csm-body .csm-oc__overlay { opacity: 1; transform: translateY(-101%); transition: transform .35s ease, visibility .35s; }
.csm-body .csm-oc:hover .csm-oc__overlay, .csm-body .csm-oc:focus-within .csm-oc__overlay { transform: translateY(0); visibility: visible; }
@media (max-width: 991px) {
 .csm-body .csm-wp__card { display: flex; flex-direction: column; gap: 24px; min-height: 0; padding: 28px; }
 .csm-body .csm-wp__copy { display: contents; }
 .csm-body .csm-wp__copy .csm-h2 { order: 0; margin-bottom: 0; }
 .csm-body .csm-wp__copy .csm-btn { order: 2; width: 100%; margin-top: 0; }
 .csm-body .csm-wp__media { position: relative; inset: auto; z-index: 0; order: 1; flex: none; width: 100%; aspect-ratio: 840 / 573; min-height: 0; overflow: hidden; }
 .csm-body .csm-wp__media img { width: 133.333333%; max-width: none; height: auto; margin-left: -33.333333%; object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) { .csm-body .csm-oc__overlay { transition: none; } }

/* Customer logo strip: keep it full width and remove the side fade overlays. */
.csm-body .csm-trusted,
.csm-body .csm-logos {
  width: 100%;
  max-width: none;
}
.csm-body .csm-logos::before,
.csm-body .csm-logos::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Fit seven logo positions across desktop: six unique logos per set plus the
   first logo of the next repeated set. */
@media (min-width: 992px) {
  .csm-body .csm-logos__set {
    width: 85.7143cqw;
  }
}