/* ============================================================
   ASCENDION · CLIENT STORY (case study) — Figma 1024:27337
   Centred 1096px text column · full-width Featured + footer.
   Type: section headings = primary h5 (32/40, -0.32);
   body = secondary body_xxs (16/24) charcoal; testimonial quote
   body_m (24/32); Featured heading h2 (52/60).
   ============================================================ */

/* ── Reset ───────────────────────────────────────────────────── */
.single-client-outcome .site-footer::before {
    display: none;
}
.cs-tabs__row {
    position: relative;
    border: none;
}

.cs-tabs__row:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background: #ccc;
    bottom: 0;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  color: var(--neutral-black);
  font-family: var(--typeface-secondary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* NB: no overflow-x:clip here — it breaks position:sticky for .cs-tabs.
     Horizontal overflow is contained per-section (.cs-featured) instead. */
}
html { scroll-behavior: smooth; }
body { background: var(--neutral-white); }
img { max-width: 100%; }
figure { margin: 0; }   /* kill the browser-default 40px figure margin (image + testimonial left gap) */
a   { text-decoration: none; color: inherit; }
:where(#challenges, #solution, #testimonial, #impact) { scroll-margin-top: 96px; }


/* ============================================================
   SITE NAV  (shared glass bar)
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--responsive-spacing-24) var(--margin-margin);
  background-color: transparent;
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  transition: background-color 320ms ease, backdrop-filter 320ms ease;
}
.nav--scrolled {
  background-color: var(--neutral-deep-black-60);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
}
@media (min-width: 1024px) { .nav { padding-top: var(--responsive-spacing-12); padding-bottom: var(--responsive-spacing-12); } }
.nav__logo { display: inline-flex; align-items: center; color: var(--neutral-white); }
.nav__logo svg { height: var(--space-32); width: auto; fill: currentColor; display: block; }
.nav__actions { display: flex; align-items: center; gap: var(--space-12); }
.nav__icon { display: inline-flex; align-items: center; padding: 0; background: none; border: 0; cursor: pointer; }
.nav__icon svg { display: block; }
.nav__icon .nav__icon-mobile { display: none; }
.nav__chip { transition: fill-opacity 320ms ease; }
.nav--scrolled .nav__chip { fill-opacity: 0; }


/* ============================================================
   SHARED COMPONENTS  (pixel arrow · CTAs)
   ============================================================ */
.pixel-arrow { display: inline-block; width: var(--space-14); flex-shrink: 0; color: currentColor; }
.pixel-arrow svg { width: 100%; height: auto; fill: currentColor; display: block; }

.cta-primary { display: inline-flex; align-items: stretch; cursor: pointer; }
.cta-primary__text {
  display: flex; align-items: center;
  padding: var(--space-12) var(--space-8) var(--space-12) var(--space-16);
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-medium); font-size: var(--font-cta); line-height: var(--lh-cta);
  color: var(--neutral-white);
}
.cta-primary__arrow {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-14) var(--space-16); color: var(--neutral-white);
  transition: background 240ms ease, color 240ms ease;
}
.cta-primary--light       { background: var(--neutral-deep-black-60); transition: background 320ms ease; }
.cta-primary--light:hover { background: var(--neutral-black); }
.cta-primary--light:hover .cta-primary__arrow { background: var(--brand-neural-mint); color: var(--neutral-black); }
.nav--scrolled .nav__actions .cta-primary--light,
.nav--scrolled .nav__actions .cta-primary--light:hover { background: transparent; }
.cta-primary--solid       { background: var(--neutral-black); }
.cta-primary--solid:hover .cta-primary__arrow { background: var(--brand-neural-mint); color: var(--neutral-black); }
.cta-primary--mint        { background: var(--brand-neural-mint); }
.cta-primary--mint .cta-primary__text  { color: var(--neutral-black); }
.cta-primary--mint .cta-primary__arrow { color: var(--neutral-black); }
.cta-primary--mint:hover .cta-primary__arrow { background: var(--neutral-black); color: var(--brand-neural-mint); }


/* ============================================================
   SCROLL-REVEAL
   ============================================================ */
[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }


/* ============================================================
   CORNER PIXEL NOTCHES · section transitions
   ============================================================ */
.cs-hero, .cs-content, .cs-featured, .site-footer { position: relative; }
.cs-content, .cs-featured { isolation: isolate; }
.cs-content::before, .cs-featured::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--space-20);
  pointer-events: none; z-index: 5;
  background-image:
    linear-gradient(var(--pixel-top, transparent), var(--pixel-top, transparent)),
    linear-gradient(var(--pixel-top, transparent), var(--pixel-top, transparent));
  background-position: top left, top right;
  background-size: var(--space-20) var(--space-20); background-repeat: no-repeat;
}
.cs-hero::after, .cs-content::after, .cs-featured::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: var(--space-20);
  pointer-events: none; z-index: 5;
  background-image:
    linear-gradient(var(--pixel-bottom, transparent), var(--pixel-bottom, transparent)),
    linear-gradient(var(--pixel-bottom, transparent), var(--pixel-bottom, transparent));
  background-position: bottom left, bottom right;
  background-size: var(--space-20) var(--space-20); background-repeat: no-repeat;
}
.cs-content { --pixel-top: transparent; --pixel-bottom: var(--neutral-soft-grey); }
.cs-featured{ --pixel-top: var(--neutral-white); --pixel-bottom: var(--neutral-deep-black); }


/* ============================================================
   1 · HERO  (banner · 1024:26935)
   ============================================================ */
/* Fixed-height banner (Figma: nav + h-554 content container ≈ 658px),
   breadcrumb pinned to the top (below the nav), title to the bottom. */
.cs-hero {
  position: relative; overflow: hidden; background: var(--neutral-deep-black);
  display: flex; flex-direction: column; justify-content: space-between;
  height: 60dvh;
  padding: calc(var(--responsive-spacing-80) + 16px) var(--margin-margin) var(--responsive-spacing-60);
}
.cs-hero__bg { position: absolute; inset: 0; z-index: 0; }
.cs-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-hero::before {
content: "";
    position: absolute;
    inset: 0;
    z-index: 9;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);}
.pr-hero {
padding:	calc(var(--responsive-spacing-120) + 16px) var(--margin-margin) var(--responsive-spacing-60)
	
 }
.cs-hero__crumbs { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: var(--responsive-spacing-12); }
.cs-hero__crumb { font-family: var(--typeface-secondary); font-weight: var(--weight-regular); font-size: var(--font-body_xxs); line-height: var(--lh-body_xs); color: var(--neutral-white); }
.cs-hero__crumb--current { color: var(--neutral-white); }
.cs-hero__crumb-dot { width: 6px; height: 6px; background: var(--brand-neural-mint); flex-shrink: 0; }

/* Title + scroll-down arrow row, pinned to the bottom of the hero */
.cs-hero__foot {
  position: relative; z-index: 9;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--responsive-spacing-20);
}
.cs-hero__title {
  margin: 0;
  font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2); line-height: var(--lh-h2); letter-spacing: -0.01em;
  color: var(--neutral-white);
}
/* bare mint pixel arrow pointing down · no background, no hover (Figma 1024:26938) */
.cs-hero__scroll {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 46px; color: var(--brand-neural-mint);
	display:none;
}
.cs-hero__scroll .pixel-arrow { width: var(--space-14); transform: rotate(90deg);  }

.cs-featured__head.is-in span.cta-primary__arrow {
    background: #000;
    color: #fff;
}

.cs-featured__head.is-in span.cta-primary__arrow span.pixel-arrow {
    color: #fff;
}

.cs-featured__head a.cta-primary.cta-primary--solid:hover span.cta-primary__arrow {
    background: var(--brand-neural-mint);
}

.cs-featured__head a.cta-primary.cta-primary--solid:hover span.cta-primary__arrow span.pixel-arrow {
    color: #000;
}

article.cs-card a.cta-primary.cta-primary--mint.cs-card__cta span.cta-primary__arrow {
    background: #000;
}

article.cs-card a.cta-primary.cta-primary--mint.cs-card__cta span.cta-primary__arrow span.pixel-arrow {
    color: #fff;
}
article.cs-card a.cta-primary.cta-primary--mint.cs-card__cta:hover span.cta-primary__arrow span.pixel-arrow {
    color: #000;
}

article.cs-card a.cta-primary.cta-primary--mint.cs-card__cta:hover span.cta-primary__arrow {
    background: var(--brand-neural-mint);
}
section.cs-featured a.cta-primary.cta-primary--mint.cs-card__cta:hover span.cta-primary__arrow {
    color: #fff !important;
}
a.cta-primary.cta-primary--mint.cs-card__cta span.cta-primary__text {
    color: #fff;
}

/* Section tab nav · white bar below the hero (Figma · 1096 column).
   Sticks below the fixed nav as you scroll the case study. */
.cs-tabs { position: sticky; top: 60px !important; z-index: 9; background: var(--neutral-white); }
.cs-tabs__row {
  max-width: calc(1096px + 2 * var(--margin-margin)); margin: 0 auto;
  padding: 0 var(--margin-margin);
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
.cs-tabs__row::-webkit-scrollbar { display: none; }
.cs-tab {
  display: flex; align-items: center; flex-shrink: 0;
  padding: var(--responsive-spacing-20) var(--responsive-spacing-20);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--typeface-secondary); font-weight: var(--weight-regular);
  font-size: var(--font-body_xxs); line-height: var(--lh-body_xs); color: var(--neutral-black);
  white-space: nowrap; transition: border-color 200ms ease;
}
.cs-tab:first-child { padding-left: 0; }
/* active tab · dark-teal underline + tighter padding (Figma 1676:13473) */
.cs-tab.is-active { border-bottom-color: var(--brand-dark-teal); padding-right: var(--responsive-spacing-12); }


/* ============================================================
   2 · CONTENT  (white · 1096 centred · 1024:26927)
   ============================================================ */
.cs-content {
  background: var(--neutral-white);
  padding: var(--responsive-spacing-60) 0 var(--responsive-spacing-80);
}
.cs-inner {
  max-width: calc(1096px + 2 * var(--margin-margin));
  margin: 0 auto;
  padding: 0 calc(var(--margin-margin));
  display: flex; flex-direction: column;
  gap: var(--responsive-spacing-40);   /* between major blocks */
}

/* Shared text atoms */
.cs-h { margin: 0; font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular); font-size: var(--font-h3); line-height: var(--lh-h3); letter-spacing: -0.01em; color: var(--neutral-black); }
.cs-body { margin: 0; font-family: var(--typeface-secondary); font-weight: var(--weight-regular); font-size: var(--font-body_xxs); line-height: var(--lh-body_xxs); color: var(--neutral-charcoal); }

.cs-block { display: flex; flex-direction: column; gap: var(--responsive-spacing-24); }
.cs-block--tight { gap: var(--responsive-spacing-20); }
.cs-copy {
    display: flex;
    flex-direction: column;
    gap: var(--responsive-spacing-20);
    font-family: var(--typeface-secondary);
    font-weight: var(--weight-regular) !important;
    font-size: var(--font-body_s);
    line-height: var(--lh-body_s);
    color: #333333;
}
/* Digital-experience image (1024:27001 · h-294) */
.cs-figure { width: 100%; height: 294px; overflow: hidden; background: var(--neutral-soft-grey); position: relative; }
.cs-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-figure__pixel { position: absolute; top: 0; right: 0; width: var(--space-20); height: var(--space-20); background: var(--neutral-white); z-index: 2; }

/* Key-solution bullet list (1024:26973) */
.cs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--responsive-spacing-12); }
.cs-list__item { display: flex; align-items: flex-start; gap: var(--responsive-spacing-14); font-family: var(--typeface-secondary); font-weight: var(--weight-regular); font-size: var(--font-body_s); line-height: var(--lh-body_s); color: var(--neutral-charcoal); }
.cs-list__dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 8px; background: var(--brand-dark-teal); }

/* Tech-stack panel (1024:26986 · soft-grey · gap-20 p-20) */
.cs-tech { display: flex; align-items: center; gap: var(--responsive-spacing-20); padding: var(--responsive-spacing-40) var(--responsive-spacing-20); background: var(--neutral-soft-grey); flex-wrap: wrap; }
.cs-tech__label { margin: 0; font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular); font-size: var(--font-h6); line-height: var(--lh-h6); letter-spacing: -0.01em; color: var(--neutral-black); white-space: nowrap; }
.cs-tech__logos { display: flex; align-items: center; gap: var(--responsive-spacing-20); }
.cs-tech__logo { height:80px; width: 100px; display: block; object-fit: contain; }
.cs-tech__logo--text { font-family: var(--typeface-secondary); font-weight: var(--weight-bold); font-size: 28px; color: var(--neutral-black); letter-spacing: -0.02em; }

/* ── Testimonial cards (1024:27018 · deep-black · p-32) ── */
.cs-quotes { display: flex; flex-direction: column; gap: var(--responsive-spacing-20); }

/* Card base — shared */
.cs-quote {
  position: relative; background: var(--neutral-deep-black);
  display: flex; flex-direction: column; gap: var(--responsive-spacing-32);
  padding: var(--responsive-spacing-32);
}
/* white corner notch */
.cs-quote::before { content: ""; position: absolute; top: 0; right: 0; width: var(--space-20); height: var(--space-20); background: var(--neutral-white); z-index: 1; }

/* sub-wrapper: quote mark + quote text */
.cs-quote__body { display: flex; flex-direction: column; gap: var(--space-20); }

/* pixel quote mark — two glyphs (15×30) side by side with gap-4 */
.cs-quote__mark { display: flex; gap: var(--space-4); align-items: flex-start; }
.cs-qm { position: relative; display: block; width: 15px; height: 30px; flex-shrink: 0; }
/* large 15×15 block at bottom */
.cs-qm::before { content: ""; position: absolute; left: 0; bottom: 0; width: 15px; height: 15px; background: var(--brand-neural-mint); }
/* 6×6 mid-left pixel; box-shadow adds the 6×6 upper-right pixel (offset 6px right, 6px up) */
.cs-qm::after  { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--brand-neural-mint); box-shadow: 6px -6px 0 0 var(--brand-neural-mint); }

/* Card 1 — featured: body_m / neutral-light-grey */
.cs-quote__text { margin: 0; font-family: var(--typeface-secondary); font-weight: var(--weight-regular); font-size: var(--font-body_m); line-height: var(--lh-body_m); color: var(--neutral-light-grey); }
.cs-quote__who { display: flex; flex-direction: column; gap: var(--space-4); }
.cs-quote__name { margin: 0; font-family: var(--typeface-secondary); font-weight: var(--weight-bold); font-size: var(--font-body_s); line-height: var(--lh-body_s); color: var(--neutral-white); }
.cs-quote__role { margin: 0; font-family: var(--typeface-secondary); font-weight: var(--weight-regular); font-size: var(--font-body_xs); line-height: var(--lh-body_xs); color: var(--neutral-soft-grey); }

/* Card 2 — secondary: body_xs / white / gap-40 outer · 26px inner */
.cs-quote--sm { gap: var(--responsive-spacing-40); }
.cs-quote--sm .cs-quote__body { gap: 26px; }
.cs-quote--sm .cs-quote__text { font-size: var(--font-body_xs); line-height: var(--lh-body_xs); color: var(--neutral-white); }

/* ── Business-impact cards (1024:27054 · soft-grey · h-164) ── */
.cs-impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.cs-impact {
  position: relative; background: var(--neutral-soft-grey);
  min-height: 164px; display: flex; align-items: start;
  padding: var(--space-20) var(--responsive-spacing-20);
}
.cs-impact p { margin: 0; font-family: var(--typeface-secondary); font-weight: var(--weight-regular); font-size: var(--font-body_s); line-height: var(--lh-body_s); color: var(--neutral-charcoal); }
/* Top-right corner dot · white by default. On desktop it turns dark-green on
   hover (no animation); on touch (≤1023) it's dark-green by default. */
.cs-impact::before {
  content: ""; position: absolute; top: 0; right: 0;
  width: var(--space-20); height: var(--space-20);
  background: var(--neutral-white); z-index: 1;
}
.cs-impact:hover::before { background: var(--brand-dark-teal); }


/* ============================================================
   3 · FEATURED CLIENT OUTCOMES  (full 1320 · 1024:27089)
   ============================================================ */
.cs-featured {
  background: var(--neutral-soft-grey);   /* Figma · neutral/soft-grey #f4f4f4 */
  padding: var(--responsive-spacing-80) var(--margin-margin);
  display: flex; flex-direction: column; gap: var(--responsive-spacing-40);   /* header → cards */
  overflow-x: clip;   /* contain the mobile card-carousel's full-bleed breakout */
}
.cs-featured__head { display: flex; align-items: center; justify-content: space-between; gap: var(--responsive-spacing-24); flex-wrap: wrap; }
.cs-featured__title { margin: 0; font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular); font-size: var(--font-h2); line-height: var(--lh-h2); letter-spacing: -0.01em; color: var(--neutral-black); }

/* align-items:start so each card is sized by its OWN aspect-ratio (not stretched
   to the row) — this is what stops the row from reflowing when the CTA grows. */
.cs-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); align-items: start; }
/* The card is locked to a fixed aspect height and clips overflow, so its box can
   NEVER grow. On hover the "Read more" expands inwards and the flex image shrinks
   by the same amount to make room — only the inside redistributes, so the card
   and its neighbours stay perfectly still. Smooth, no shake. */
.cs-card { display: flex; flex-direction: column; aspect-ratio: 314 / 399; min-height: 0; overflow: hidden; }
.cs-card__media { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;max-height:250px; background: var(--neutral-soft-grey); margin-bottom: var(--responsive-spacing-16); transition: flex-basis 380ms cubic-bezier(.22,.61,.36,1); }
.cs-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-card:hover .cs-card__media::after{
  background: var(--brand-neural-mint);
}
.cs-card__media::after { content: ""; position: absolute; top: 0; right: 0; width: var(--space-20); height: var(--space-20); background: var(--neutral-soft-grey); z-index: 1; }
.cs-card__tags { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: var(--space-12); margin-bottom: var(--space-12); }
.cs-tag { padding: var(--responsive-spacing-4) var(--responsive-spacing-8, var(--space-8)); border: 0.5px solid var(--neutral-deep-black); font-family: var(--typeface-secondary); font-weight: var(--weight-regular); font-size: var(--font-caption); line-height: var(--lh-caption); color: var(--neutral-deep-black); }
.cs-tag--hl { border-color: var(--brand-dark-teal); color: var(--brand-dark-teal); }
.cs-card__title { flex-shrink: 0; margin: 0; font-family: var(--typeface-secondary); font-weight: var(--weight-regular); font-size: var(--font-body_xs); line-height: var(--lh-body_xs); color: var(--neutral-black); }
/* "Read more" — collapsed (max-height:0) by default, expands inwards on hover.
   The flex image above absorbs the change, so the card height is unaffected. */
.cs-card__cta {
  flex-shrink: 0; align-self: flex-start;
  max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; pointer-events: none; transform: translateY(4px);
  transition: max-height 380ms cubic-bezier(.22,.61,.36,1), margin-top 380ms cubic-bezier(.22,.61,.36,1),
              opacity 260ms ease, transform 300ms ease;
}
.cs-card:hover .cs-card__cta,
.cs-card:focus-within .cs-card__cta {
  max-height: 56px; margin-top: var(--responsive-spacing-16); opacity: 1; pointer-events: auto; transform: none;background:#000;
}

.cs-dots { display: none; gap: var(--space-8); margin-top: var(--responsive-spacing-24); }
.cs-dot { width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer; background: var(--neutral-light-grey); transition: background 200ms ease; }
.cs-dot.is-active { background: var(--neutral-deep-black); }



/* ============================================================
   RESPONSIVE  ·  Desktop ≥1024px
   ============================================================ */
@media (min-width: 1024px) {
  .cs-tabs__row { padding-left: var(--responsive-spacing-120); padding-right: var(--responsive-spacing-120); }
  .cs-inner { padding-left: var(--responsive-spacing-120); padding-right: var(--responsive-spacing-120); }
}


/* ============================================================
   RESPONSIVE  ·  Tablet ≤1023px
   ============================================================ */
@media (max-width: 1023px) {
  .cs-impact-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-cards { grid-template-columns: repeat(2, 1fr); }
  /* Touch (no hover): the corner dot is dark-green by default. */
  .cs-impact::before { background: var(--brand-dark-teal); }
  /* Touch (no hover): drop the inward-reveal mechanics — fixed-aspect image,
     natural card height, and "Read more" shown by default. */
  .cs-card { aspect-ratio: auto; overflow: visible; }
  .cs-card__media { flex: 0 0 auto; aspect-ratio: 314 / 291; transition: none; }
  .cs-card__cta { max-height: none; margin-top: var(--responsive-spacing-16); opacity: 1; overflow: visible; pointer-events: auto; transform: none; }
  .site-footer__top  { flex-direction: column; gap: var(--responsive-spacing-48); }
  .site-footer__logo { height: 72px; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--responsive-spacing-40) var(--grid-gutter); }
}


/* ============================================================
   RESPONSIVE  ·  Mobile ≤719px
   ============================================================ */
@media (max-width: 719px) {
	.pr-hero {
    justify-content: space-between;
}
	
	.cs-card__media::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width:10px;
    height: 10px;
    background: var(--neutral-soft-grey);
    z-index: 1;
}
	
	.cs-impact::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width:10px;
    height: 10px;
    background: var(--neutral-white);
    z-index: 1;
}
	.cs-hero::before{
		display:none;
	}
	a.cta-primary.cta-primary--mint.cs-card__cta {
    background: #000;
}
	h3.cs-card__title {
    height: 65px;
}
  .nav__icon--search, .nav__actions .cta-primary { display: none; }
  .nav__icon .nav__icon-desktop { display: none; }
  .nav__icon .nav__icon-mobile  { display: block; }

  .cs-content::before, .cs-featured::before,
  .cs-hero::after, .cs-content::after, .cs-featured::after { height: 10px; background-size: 10px 10px; }

  .cs-content { padding: var(--responsive-spacing-80) 0; }
  .cs-inner { gap: var(--responsive-spacing-60); }
  .cs-featured__title, .cs-featured__head .cs-featured__title { font-size: var(--font-h3); line-height: var(--lh-h3); }

  .cs-tech { flex-direction: column; align-items: flex-start; gap: var(--responsive-spacing-24); }

  /* Business Impact · horizontal snap carousel + dots (full-bleed out of column) */
  .cs-impact-grid {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%;
    gap: var(--responsive-spacing-24); overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: var(--margin-margin); scrollbar-width: none;
    margin: 0 calc(var(--margin-margin) * -1); padding: 0 var(--margin-margin);
  }
  .cs-impact-grid::-webkit-scrollbar { display: none; }
  .cs-impact { scroll-snap-align: start; }
  #impact .cs-dots { display: flex; }

  /* Featured · horizontal snap carousel + dots */
  .cs-featured { gap: var(--responsive-spacing-40); }
  .cs-featured__head { align-items: flex-start; }
  .cs-cards {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%;
    gap: var(--responsive-spacing-24); overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: var(--margin-margin); scrollbar-width: none;
    margin: 0 calc(var(--margin-margin) * -1); padding: 0 var(--margin-margin);
  }
  .cs-cards::-webkit-scrollbar { display: none; }
  .cs-card { scroll-snap-align: start; }   /* "Read more" already shown by the ≤1023 rules */
  .cs-featured .cs-dots { display: flex; }

}
.page-id-2070  .sp-platforms__cards:hover {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .cs-card__cta { transition: none; }
}