/* ============================================================
   ASCENDION · CLIENT IMPACT (T9) — page styles
   Figma: 967:24463 (desktop) · 967:24479 (mobile). Driven by tokens.css.

   Sections
     1 · Hero banner            "Our Client Stories Define Us."
     2 · Our Client Voices      tabbed video testimonials
     3 · Featured Client Outcomes  3 highlight cards (mobile carousel)
     4 · Client Impact Library  filterable card grid (mobile carousel)
     5 · Footer (shared)
   ============================================================ */

/* ───────────────────────────── Reset ───────────────────────────── */
.page.page-id-4988 section.promo-grid:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#000, #000), linear-gradient(#000, var(--pixel-top, #000));
    background-position: top left, top right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}

.page.page-id-1258 footer.case__foot span.cta-primary__arrow {
    background: #1a1a1a;
}

.page.page-id-1258 footer.case__foot span.cta-primary__arrow span.pixel-arrow {
    color: #fff;
}

.page.page-id-1258 a.cta-primary.cta-primary--solid-dark:hover span.cta-primary__arrow {
    background: var(--brand-neural-mint);
}
.page.page-id-1258 a.cta-primary.cta-primary--solid-dark:hover span.cta-primary__arrow span.pixel-arrow {
color:#000;
}
.page.page-id-1258 .case::before {
    background-image: linear-gradient(#f4f4f4, #f4f4f4), linear-gradient(#f4f4f4, #f4f4f4);
}
.page.page-id-1258 .testimonials__title-org {
    min-height: 70px;
}
.page.page-id-1258 .ci-voices::after {
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
}

.page.page-id-1258 .ci-library::before {
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
}

/* .page.page-id-1258 .case::after {
    background-image: linear-gradient(#f4f4f4, #f4f4f4), linear-gradient(#f4f4f4, #f4f4f4);
} */
.page.page-id-1258 a.cta-primary.cta-primary--solid-dark:hover span.pixel-arrow {
    color: #fff;
}
.page.page-id-1258 footer.case__foot span.cta-primary__arrow

.cs-copy ul {
    padding-left: 20px;
}
.single-client-outcome .bn__pixels {
    background: #fff;
}
h4.cs-sh {
    margin: 0;
    font-family: var(--typeface-primary);
    font-weight: var(--weight-plain-regular);
    font-size: var(--font-m);
    line-height: var(--lh-m);
    letter-spacing: -0.01em;
    color: var(--neutral-black);
}
.ci-card-impact .cta-primary--mint:hover .cta-primary__arrow {
    background: var(--neutral-black);
    color: var(--brand-neural-mint) !important;
}
.testimonials::after {
    background-image: linear-gradient(#1a1a1a, #1a1a1a), linear-gradient(#1a1a1a, #1a1a1a) !important;
}
.ctas {
    margin-top: 20px;
}
section.ci-voices:before {
    display: none;
}
li.cs-list__item ul {
    padding-left: 20px;
}
.cs-copy ul li {
    list-style-type: square;
    margin-bottom: 5px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  color: var(--neutral-white);
  font-family: var(--typeface-secondary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html { scroll-behavior: smooth; }
body { background: var(--neutral-deep-black); }
img { max-width: 100%; }
a   { text-decoration: none; color: inherit; }


/* ============================================================
   SITE NAV  (shared — fixed 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) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition: background-color 320ms ease, backdrop-filter 320ms ease, -webkit-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 img, .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; }
.pixel-arrow--down { transform: rotate(90deg); }

.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;
}
/* light (translucent on imagery — nav) */
.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; }
/* solid dark (Read the case study · Explore more) */
.cta-primary--solid       { background: var(--neutral-black); }
.cta-primary--solid:hover .cta-primary__arrow { background: var(--brand-neural-mint); color: var(--neutral-black); }
/* mint (Learn more) */
.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); }

/* Arrow-only chip (carousel prev/next) */
.cta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 50px; padding: 0; border: 0; cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.cta-arrow--dark        { background: var(--neutral-black); color: var(--neutral-white); }
.cta-arrow--dark:hover  { background: var(--brand-neural-mint); color: var(--neutral-black); }
.cta-arrow--light       { background: var(--neutral-soft-grey); color: var(--neutral-black); }
.cta-arrow--light:hover { background: var(--brand-neural-mint); color: var(--neutral-black); }
.cta-arrow:disabled     { opacity: 0.35; cursor: default; }
.cta-arrow--prev .pixel-arrow { transform: scaleX(-1); }


/* ============================================================
   SCROLL-REVEAL ANIMATION (IntersectionObserver toggles .is-in)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  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; }
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }


/* ============================================================
   CORNER PIXEL NOTCHES · section transitions (neighbour colour)
   ============================================================ */
.ci-hero, .ci-voices, .ci-featured, .ci-library, .site-footer { position: relative; }
.ci-voices, .ci-featured, .ci-library { isolation: isolate; }

.ci-voices::before, .ci-featured::before, .ci-library::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;
}
.ci-hero::after, .ci-voices::after, .ci-featured::after, .ci-library::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;
}
.ci-hero     { --pixel-bottom: var(--neutral-soft-grey); }
.ci-voices   { --pixel-top: var(--neutral-deep-black); --pixel-bottom: var(--neutral-black); }
.ci-featured { --pixel-top: var(--neutral-soft-grey); --pixel-bottom: var(--neutral-white); }
.ci-library  { --pixel-top: var(--neutral-black);     --pixel-bottom: var(--neutral-deep-black); }


/* ============================================================
   1 · HERO  (banner · 1601:9443)
   ============================================================ */
.ci-hero {
  min-height: 100vh; min-height: 100svh;   /* svh = stable; avoids mobile chrome resize jolt */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--responsive-spacing-80) + 52px) var(--margin-margin) var(--responsive-spacing-80);
  overflow: hidden;
  background: var(--neutral-deep-black);
}
.ci-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ci-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* darken bottom for legibility + top scrim under the nav */
.ci-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 26%,
    rgba(10,10,10,0) 52%, rgba(10,10,10,0.85) 100%);
}
.ci-hero__crumbs, .ci-hero__foot { position: relative; z-index: 2; }
.ci-hero__crumbs { display: inline-flex; align-items: center; gap: var(--responsive-spacing-12); padding: var(--responsive-spacing-12) 0; }
.ci-hero__crumb { 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-medium-grey); }
.ci-hero__crumb--current { color: var(--neutral-white); }
.ci-hero__crumb-dot { width: 6px; height: 6px; background: var(--brand-neural-mint); flex-shrink: 0; }

.ci-hero__foot {
  display: grid; grid-template-columns: 1fr 1fr; align-items: end;
  gap: var(--responsive-spacing-40); margin-top: var(--responsive-spacing-60);
}
.ci-hero__title {
  margin: 0; max-width: 14ch;
  font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-h1); line-height: var(--lh-h1); letter-spacing: -0.01em;
  color: var(--neutral-white);
}
.ci-hero__lead { display: flex; flex-direction: column; gap: var(--responsive-spacing-24); padding-bottom: var(--space-8); }
.ci-hero__sub  { margin: 0; max-width: 30ch; font-family: var(--typeface-secondary); font-weight: var(--weight-regular); font-size: var(--font-body_l); line-height: var(--lh-body_l); color: var(--neutral-white); }
.ci-hero__note { 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); }



.ci-card-impact:hover .ci-card-impact__media::after {
  background: var(--brand-neural-mint);
}


/* ============================================================
   2 · OUR CLIENT VOICES  (1601:9460 · white)
   ============================================================ */
/* Figma 1659:10057 · soft-grey bg · 80/60 padding · 40 gap between rows */
.ci-voices {
  background: var(--neutral-soft-grey); color: var(--neutral-black);
  padding: var(--responsive-spacing-60) var(--margin-margin);
  display: flex; flex-direction: column; gap: var(--responsive-spacing-32);
}
.section-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);
}
.section-title .accent { color: var(--brand-neural-mint); }
/* Voices accent is dark-teal, not mint (Figma 1659:10059) */
.ci-voices .section-title .accent { color: var(--brand-dark-teal); }

/* Tab bar (1676:13012) · light-grey underline · arrows right */
.ci-voices__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--responsive-spacing-24);
  border-bottom: 1px solid var(--neutral-light-grey);
	display:none;
}
.ci-voices__tabs { display: flex; align-items: stretch; height: 48px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ci-voices__tabs::-webkit-scrollbar { display: none; }
.ci-voices__tab {
  display: flex; align-items: center; flex-shrink: 0;
  padding: var(--responsive-spacing-20) var(--responsive-spacing-24);
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; white-space: nowrap;
  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-slate-grey);
  transition: color 200ms ease, background 200ms ease;
}
.ci-voices__tab:hover { color: var(--neutral-black); }
.ci-voices__tab.is-active { background: var(--brand-dark-teal); border-bottom-color: var(--brand-dark-teal); color: var(--neutral-white); }
.ci-voices__nav { display: flex; gap: var(--space-12); flex-shrink: 0; display:none; }

/* Video card (967:23806) · fixed 1320×600 (≈2.2:1) · 40 padding · bottom caption */
.ci-voices__stage { display: flex; flex-direction: column; }
.ci-voices__card { position: relative; overflow: hidden; aspect-ratio: 1320 / 500; background: var(--neutral-deep-black); }
.ci-voices__media { position: absolute; inset: 0; }
.ci-voices__media img, .ci-voices__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* flat 0.2 wash + bottom darken to 0.5 (967:23806 gradient) */
.ci-voices__card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
}
.ci-voices__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between;
  gap: var(--responsive-spacing-24); padding: var(--responsive-spacing-40);
}
.ci-voices__text { display: flex; flex-direction: column; gap: var(--space-12); max-width: 620px; }
.ci-voices__cap-title { 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-white); }
.ci-voices__cap-sub   { 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-white); }
.ci-voices__learn { flex-shrink: 0; }
/* centred play glyph (967:23807) — bare white pixel-play, 63px */
.ci-voices__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 63px; height: 63px; padding: 0; border: 0; cursor: pointer;
  background: none; color: var(--neutral-white);
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.45));
  transition: color 200ms ease, transform 200ms ease;
}
.ci-voices__play:hover { color: var(--brand-neural-mint); transform: translate(-50%, -50%) scale(1.08); }
.ci-voices__play svg { width: 63px; height: 63px; display: block; }
.ci-voices__card.is-playing .ci-voices__play,
.ci-voices__card.is-playing .ci-voices__overlay,
.ci-voices__card.is-playing::after { opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
/* caption shown beneath the card on mobile only */
.ci-voices__below { display: none; }


/* ============================================================
   3 · FEATURED CLIENT OUTCOMES  (1601:9503 · black)
   ============================================================ */
.ci-featured {
  background: var(--neutral-black); color: var(--neutral-white);
  padding: var(--responsive-spacing-120) var(--margin-margin);
}
.ci-featured__head { display: flex; align-items: center; justify-content: space-between; gap: var(--responsive-spacing-24); flex-wrap: wrap; }
.ci-featured__head .section-title { color: var(--neutral-white); }

.ci-featured__grid {
  margin-top: var(--responsive-spacing-60);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.ci-card-outcome {
  display: flex; flex-direction: column; gap: var(--responsive-spacing-24);
  padding: 0 var(--responsive-spacing-40); min-height: 420px;
  border-left: 1px solid var(--neutral-charcoal);
  transition: opacity 300ms ease;
}
.ci-card-outcome:first-child { border-left: 0; padding-left: 0; }
.ci-featured__grid .ci-card-outcome:last-child { padding-right: 0; }
.ci-card-outcome__tags { display: flex; gap: var(--space-8); }
.ci-tag {
  padding: var(--space-8) var(--space-12); border: 1px solid var(--neutral-charcoal);
  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-medium-grey);
}
.ci-card-outcome__title {
  margin: 0; font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-h4); line-height: var(--lh-h4); letter-spacing: -0.01em;
  color: var(--neutral-medium-grey); transition: color 300ms ease;
}
.ci-card-outcome__stat { margin: 0; margin-top: auto; 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-medium-grey); transition: color 300ms ease; }
.ci-card-outcome__cta { align-self: flex-start; }
/* active (first by default · follows hover) — full white + mint tag */
.ci-card-outcome.is-active .ci-card-outcome__title { color: var(--neutral-white); }
.ci-card-outcome.is-active .ci-card-outcome__stat  { color: var(--neutral-light-grey); }
.ci-card-outcome.is-active .ci-tag--hl { border-color: var(--brand-neural-mint); color: var(--brand-neural-mint); }
.ci-card-outcome.is-active .ci-tag { color: var(--neutral-white); }

/* shared mobile carousel dots — square pixel dots (Figma 967:24479) */
.ci-dots { display: none; gap: var(--space-8); margin-top: var(--responsive-spacing-32); }
.ci-dot { width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer; background: var(--neutral-charcoal); transition: background 200ms ease; }
/* Featured (dark bg): white active · grey inactive */
.ci-featured .ci-dot { background: var(--neutral-slate-grey); }
.ci-featured .ci-dot.is-active { background: var(--neutral-white); }
/* Library (light bg): black active · light-grey inactive */
.ci-library .ci-dot { background: var(--neutral-light-grey); }
.ci-library .ci-dot.is-active { background: var(--neutral-deep-black); }
.ci-voices__overlay  a.cta-primary.cta-primary--mint.ci-voices__learn {
    display: none;
}

.ci-card-impact__tags {
    display: none !important;
}
.ci-card-impact__cta {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 40px, 0);
    will-change: transform, opacity;

    transition:
        transform 0.8s cubic-bezier(0.19, 1, 0.22, 1),
        opacity 0.6s ease,
        visibility 0s linear 0.8s;
}
.page.page-id-1258 a.cta-primary.cta-primary--mint.ci-card-impact__cta {
    background: #000;
    max-height: 100px !important;
    opacity: 1 !important;
    visibility: visible;
}
/* .ci-card-impact:hover .ci-card-impact__cta,
.ci-card-impact:focus-within .ci-card-impact__cta {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);

    transition:
        transform 0.8s cubic-bezier(0.19, 1, 0.22, 1),
        opacity 0.6s ease,
        visibility 0s;
} */
/* ============================================================
   4 · CLIENT IMPACT LIBRARY  (1601:... · white)
   ============================================================ */
.ci-library {
  background: var(--neutral-soft-grey); color: var(--neutral-black);
  padding: var(--responsive-spacing-80) var(--margin-margin);
  display: flex; flex-direction: column;
}
.ci-library__head h2 {
    transform: translate(0, 0) !important;
}
section.ci-library a.cta-primary.cta-primary--solid span.cta-primary__arrow {
    background: var(--neutral-black);
}

section.ci-library a.cta-primary.cta-primary--solid span.cta-primary__arrow span.pixel-arrow {
    color:  var(--neutral-white);
}
section.ci-library a.cta-primary.cta-primary--solid:hover span.cta-primary__arrow span.pixel-arrow {
    color:  var(--neutral-black);
}

section.ci-library a.cta-primary.cta-primary--solid:hover span.cta-primary__arrow {
    background:var(--brand-neural-mint);
}
a.cta-primary.cta-primary--mint.ci-voices__learn:hover span.cta-primary__arrow span.pixel-arrow {
    color: var(--brand-neural-mint);
}
.ci-library__head { display: flex; align-items: center; justify-content: space-between; gap: var(--responsive-spacing-24); flex-wrap: wrap; }
.ci-library__head .section-title { color: var(--neutral-black); }
.ci-library__filters { display: flex; gap: var(--responsive-spacing-40); }
/* Underline-style dropdown (Figma 873:19350) — text + chevron, bottom rule */
.ci-select { position: relative; display: inline-flex; }
.ci-select select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  max-width: 200px; padding: var(--responsive-spacing-14) 28px var(--responsive-spacing-14) 0;
  border: 0; border-bottom: 1px solid var(--neutral-light-grey); border-radius: 0; background: transparent;
  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-deep-black);
  transition: border-color 200ms ease;
}
.ci-select select:hover, .ci-select select:focus { border-bottom-color: var(--neutral-deep-black); outline: none; }
.ci-select::after {
  content: ""; position: absolute; right: 4px; top: 50%; transform: translateY(-65%) rotate(45deg);
  width: 7px; height: 7px; border-right: 1.5px solid var(--neutral-deep-black); border-bottom: 1.5px solid var(--neutral-deep-black);
  pointer-events: none; transition: transform 200ms ease;
}
.ci-select:hover::after { transform: translateY(-45%) rotate(45deg); }

.ci-library__grid {
  margin-top: var(--responsive-spacing-48);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--responsive-spacing-32);
  align-items: start;   /* don't stretch — each card holds its own aspect height */
}
.ci-pagination {
    margin-top: 40px !important;
}
/* Card has a constant total height (aspect-ratio). The media flexes to fill
   whatever space the meta leaves; tags/title are fixed. On hover the "Read
   more" expands in and the image shrinks to absorb it — total stays constant.
   `contain` isolates that internal reflow so it never ripples to the page. */
.ci-card-impact { display: flex; flex-direction: column; aspect-ratio: 380 / 300; contain: layout paint; }
.ci-card-impact__media { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
 background: var(--neutral-soft-grey); 
   min-height: 240px;
    max-height: 240px;
  margin-bottom: var(--responsive-spacing-16); }
.ci-card-impact__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* top-right corner notch (white, matches section bg) */
.ci-card-impact__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; }
.ci-card-impact__tags { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: var(--space-12); margin-bottom: var(--space-12); }
.ci-card-impact .ci-tag { padding: var(--space-8) var(--responsive-spacing-8, var(--space-8)); border: 0.5px solid var(--neutral-deep-black); color: var(--neutral-deep-black); font-size: var(--font-tags); line-height: var(--lh-tags); }
.ci-card-impact .ci-tag--hl { border-color: var(--brand-dark-teal); color: var(--brand-dark-teal); }
.ci-card-impact__title {
  flex-shrink: 0; 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-black);
	height:65px;
}
.page.page-id-1258 .ci-card-impact {
    aspect-ratio: initial;
    contain: inline-size;
}
/* "Read more" (Figma hover state) collapses to 0 by default and expands in on
   hover; the flex media shrinks to make room so total height never changes. */
.ci-card-impact__cta {
  flex-shrink: 0; align-self: flex-start;
  max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; pointer-events: none; transform: translateY(6px);
  transition: max-height 320ms cubic-bezier(.2,.7,.2,1), margin-top 320ms cubic-bezier(.2,.7,.2,1), opacity 220ms ease, transform 220ms ease;
}
/* .ci-card-impact:hover .ci-card-impact__cta,
.ci-card-impact:focus-within .ci-card-impact__cta {
  max-height: 60px; margin-top: var(--responsive-spacing-16); opacity: 1; pointer-events: auto; transform: none;
}
 */
.ci-library__more { display: flex; justify-content: flex-start; margin-top: var(--responsive-spacing-60); }
.ci-empty { display: none; padding: var(--responsive-spacing-60) 0; text-align: center; color: var(--neutral-medium-grey); font-size: var(--font-body_m); }




/* ============================================================
   RESPONSIVE  ·  Tablet ≤1023px
   ============================================================ */
@media (max-width: 1023px) {
  .ci-hero__foot { grid-template-columns: 1fr; align-items: start; gap: var(--responsive-spacing-24); }
  .ci-library__grid { grid-template-columns: repeat(2, 1fr); }
  .ci-card-outcome { padding: 0 var(--responsive-spacing-24); min-height: 360px; }

}


/* ============================================================
   RESPONSIVE  ·  Mobile ≤719px  (Figma 967:24479)
   ============================================================ */
@media (max-width: 719px) {
	.page.page-id-4988 section.promo-grid:before{
		bottom:-9px;
	}
  .nav__icon--search, .nav__actions .cta-primary { display: none; }
  .nav__icon .nav__icon-desktop { display: none; }
  .nav__icon .nav__icon-mobile  { display: block; }

  .ci-voices::before, .ci-featured::before, .ci-library::before,
  .ci-hero::after, .ci-voices::after, .ci-featured::after, .ci-library::after { height: 10px; background-size: 10px 10px; }

  .section-title { font-size: var(--font-h2); line-height: var(--lh-h2); }
	
	.ci-voices__play svg { width: 32px; height: 32px; display: block; }


  /* Hero */
  .ci-hero { padding-top: calc(var(--responsive-spacing-60) + 44px); }
  .ci-hero__title { max-width: none; }

  /* Voices — caption moves below the card (Figma mobile) */
  .ci-voices { padding: var(--responsive-spacing-60) var(--margin-margin); gap: var(--responsive-spacing-80); }
  .ci-voices__card { aspect-ratio: 16 / 10; }
  .ci-voices__card::after { background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 60%); }
  .ci-voices__overlay { display: none; }
  .ci-voices__below {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--responsive-spacing-16);
    margin-top: var(--responsive-spacing-24);
  }
  .ci-voices__below .ci-voices__cap-title,
  .ci-voices__below .ci-voices__cap-sub { align-self: stretch; }
  .ci-voices__below .ci-voices__cap-title { color: var(--neutral-black); }
  .ci-voices__below .ci-voices__cap-sub   { color: var(--neutral-medium-grey); }
  /* keep the CTA at its content width, not full-bleed */
  .ci-voices__below .ci-voices__learn { align-self: flex-start; display:none; }

  /* Featured — horizontal snap carousel + dots */
  .ci-featured { padding: var(--responsive-spacing-80) var(--margin-margin); }
  .ci-featured__head { align-items: flex-start; }
  .ci-featured__grid {
    grid-auto-flow: column; grid-template-columns: none;
    grid-auto-columns: 86%; gap: var(--responsive-spacing-24);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    scroll-padding-left: var(--margin-margin);   /* snapped cards keep the left inset */
    margin-left: calc(var(--margin-margin) * -1); margin-right: calc(var(--margin-margin) * -1);
    padding: var(--responsive-spacing-40) var(--margin-margin) 0;
  }
  .ci-featured__grid::-webkit-scrollbar { display: none; }
  .ci-card-outcome { scroll-snap-align: start; border-left: 0; padding: 0; min-height: 320px; }
  .ci-card-outcome__title, .ci-card-outcome.is-active .ci-card-outcome__title { color: var(--neutral-white); }
  .ci-card-outcome__stat,  .ci-card-outcome.is-active .ci-card-outcome__stat  { color: var(--neutral-light-grey); }
  .ci-featured .ci-dots { display: flex; }
	

  /* Library — horizontal snap carousel + dots, filters stack.
     Figma mobile order: head → Explore more → carousel → dots. */
  .ci-library { padding: var(--responsive-spacing-80) var(--margin-margin); }
  .ci-library__head { order: 0; flex-direction: column; align-items: stretch; gap: var(--responsive-spacing-80); }
  .ci-library__more { order: 1; justify-content: flex-start; margin: var(--responsive-spacing-32) 0 0; }
  .ci-empty          { order: 2; }
  .ci-library .ci-dots { order: 3; }
  .ci-library__filters { flex-direction: column; gap: var(--responsive-spacing-24); }
  .ci-select { display: flex; width: 100%; }
     .ci-select select {
        width: 100%;
        max-width: 100% !important;
    } .ci-library__grid {
    grid-auto-flow: column; grid-template-columns: none !important;
    grid-auto-columns: 84%; gap: var(--responsive-spacing-24);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    scroll-padding-left: var(--margin-margin);   /* snapped cards keep the left inset */
    margin-left: calc(var(--margin-margin) * -1); margin-right: calc(var(--margin-margin) * -1);
    padding: var(--responsive-spacing-24) var(--margin-margin) 0;
  }
  .ci-library__grid::-webkit-scrollbar { display: none; }
  /* Touch: no hover — card is natural height, image keeps its ratio,
     and "Read more" is shown by default. */
  .ci-card-impact { scroll-snap-align: start; aspect-ratio: auto !important; height: 375px; }
	.ci-card-impact__media::after{
		background:var(--brand-neural-mint);
		height:10px !important;
		width:10px !important;
	}
  .ci-card-impact__media { flex: 0 0 auto; aspect-ratio: 314 / 291; }
  .ci-card-impact__cta { max-height: 60px; margin-top: var(--responsive-spacing-16); opacity: 1; pointer-events: auto; transform: none; visibility:visible;}
  .ci-library .ci-dots { display: flex; justify-content: flex-start; margin-top: var(--responsive-spacing-24); }


@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .ci-card-impact__media img { transition: none; }
}