/* =====================================================================
   CHAVANS — CLIENT STORIES LANDING (client-stories.html)
   Source of truth: "Client Stories_Landing page_v2 COPY" PDF / PPTX.
   Loads AFTER applied-ai.css (canvas --u = 100vw/1600, nav pills,
   .plus, CTA band, footer) and resources-detail.css (.rsx-cta).
   Every value is the pixel position measured on the 1600-wide slide.
   Prefix: .csl-
===================================================================== */

/* ---------- Slide 1 — HERO (white, 900 tall) ---------- */
.csl-hero{ background: #fff; color: var(--ink-75); }
.csl-logo img{ width: calc(var(--u) * 157.5); height: auto; }
.csl-tag-plus{ color: var(--ink-85); }
.csl-tag{
  font-family: var(--mono);
  font-size: calc(var(--u) * 16.67);           /* 10pt */
  line-height: calc(var(--u) * 20);
  letter-spacing: 0.02em;
  color: var(--ink-85);
  white-space: nowrap;
}
.csl-title{
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 80);              /* 48pt Helvetica Neue Medium */
  line-height: calc(var(--u) * 96);
  letter-spacing: -0.006em;
  color: var(--ink-75);                         /* #404040 */
  white-space: nowrap;
}
.csl-ln{ display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.csl-ln > span{ display: block; }
.csl-sub{
  font-family: var(--mono);
  font-size: calc(var(--u) * 18.33);           /* 11pt JetBrains Mono */
  line-height: calc(var(--u) * 22.4);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-65);                         /* #595959 */
  white-space: nowrap;
}
.csl-photo{
  width: calc(var(--u) * 604.6);
  height: calc(var(--u) * 465.9);
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---------- Slide 2 — INTRO (white) ---------- */
.csl-intro{
  background: #fff;
  padding: calc(var(--u) * 110) 0 calc(var(--u) * 150) calc(var(--u) * 109);
}
.csl-intro-h{
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 53.33);           /* 32pt Medium */
  line-height: calc(var(--u) * 64);
  letter-spacing: -0.005em;
  color: #171717;
  white-space: nowrap;
}
.csl-intro-b{
  margin-top: calc(var(--u) * 56);
  font-family: var(--sans);
  font-size: calc(var(--u) * 18.33);           /* 11pt */
  line-height: calc(var(--u) * 22.2);
  color: #000;
  white-space: nowrap;
}

/* ---------- Slide 3 — EXPLORE / LISTING (white) ---------- */
.csl-list{
  background: #fff;
  color: #000;
  padding: calc(var(--u) * 111) 0 calc(var(--u) * 65);
}
.csl-explore{
  margin-left: calc(var(--u) * 117.6);
  font-family: var(--sans); font-weight: 400;
  font-size: calc(var(--u) * 26.67);           /* 16pt */
  line-height: calc(var(--u) * 32);
  color: #000;
}
.csl-tools{
  position: relative;
  display: flex; align-items: flex-end;
  margin: calc(var(--u) * 33.6) 0 0 calc(var(--u) * 116.4);
  width: calc(var(--u) * 1356.4);
}
.csl-filter{
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--u) * 9);
  width: calc(var(--u) * 129.6);
  height: calc(var(--u) * 48);
  border: 2px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 18.33);
  transition: background .2s, color .2s;
}
.csl-filter svg{ width: calc(var(--u) * 16); height: calc(var(--u) * 13); }
.csl-filter:hover, .csl-filter[aria-expanded="true"]{ background: #111; color: #fff; }
.csl-filter-n{ font-family: var(--mono); font-size: calc(var(--u) * 13); }
.csl-search{
  flex: 1;
  position: relative;
  margin-left: calc(var(--u) * 18);
  height: calc(var(--u) * 54);
  border-bottom: 1px solid #A6A6A6;
  transition: border-color .2s;
}
.csl-search:focus-within{ border-color: #111; }
.csl-search svg{
  position: absolute;
  left: calc(var(--u) * 29); top: calc(var(--u) * 15);
  width: calc(var(--u) * 21); height: calc(var(--u) * 21);
}
.csl-search input{
  width: 100%; height: 100%;
  border: 0; outline: 0; background: transparent;
  padding: 0 0 calc(var(--u) * 6) calc(var(--u) * 74);
  font-family: var(--sans);
  font-size: calc(var(--u) * 20);              /* 12pt */
  color: #111;
}
.csl-search input::placeholder{ color: #BFBFBF; opacity: 1; }
.csl-search input::-webkit-search-cancel-button{ cursor: pointer; }

/* filter panel */
.csl-panel{
  margin: calc(var(--u) * 18) 0 0 calc(var(--u) * 117.6);
  width: calc(var(--u) * 1356.4);
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10);
}
.csl-panel[hidden]{ display: none; }
.csl-opt{
  display: inline-flex; align-items: center;
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 7);
  background: #F2F2F2;
  font-family: var(--mono);
  font-size: calc(var(--u) * 13.8);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-75);
  transition: background .2s, color .2s;
}
.csl-opt:hover{ background: #E3E3E3; }
.csl-opt[aria-pressed="true"]{ background: #262626; color: #fff; }

.csl-count{
  margin: calc(var(--u) * 38.4) 0 0 calc(var(--u) * 127);
  font-family: var(--mono);
  font-size: calc(var(--u) * 18.33);           /* 11pt */
  line-height: calc(var(--u) * 22);
  letter-spacing: 0.02em;
  color: var(--ink-75);
}

.csl-cards{
  display: grid;
  grid-template-columns: repeat(3, calc(var(--u) * 425.2));
  column-gap: calc(var(--u) * 57.6);
  row-gap: calc(var(--u) * 57.6);
  margin: calc(var(--u) * 41.6) 0 0 calc(var(--u) * 115.2);
}
.csl-card{
  position: relative;
  display: block;
  height: calc(var(--u) * 507.8);
  background: #D9D9D9;
  border-radius: calc(var(--u) * 33);
  color: #000;
  transition: background .25s;
}
.csl-card[hidden]{ display: none; }
.csl-card:hover{ background: #D0D0D0; }
.csl-chip{
  position: absolute;
  left: calc(var(--u) * 39.6); top: calc(var(--u) * 42);
  display: inline-flex; align-items: center;
  width: calc(var(--u) * 171); height: calc(var(--u) * 33.4);
  padding-left: calc(var(--u) * 13);
  background: #fff;
  border-radius: calc(var(--u) * 5.6);
  font-family: var(--mono);
  font-size: calc(var(--u) * 16.67);           /* 10pt */
  letter-spacing: 0.02em;
  color: var(--ink-75);
  white-space: nowrap;
}
.csl-card-body{
  position: absolute;
  left: calc(var(--u) * 45.6); top: calc(var(--u) * 106);
  width: calc(var(--u) * 345);
}
.csl-card-t{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(var(--u) * 26.67);           /* 16pt */
  line-height: calc(var(--u) * 32.4);
  color: #000;
  text-wrap: balance;
}
.csl-card-d{
  margin-top: calc(var(--u) * 32.6);
  font-family: var(--sans);
  font-size: calc(var(--u) * 18.33);           /* 11pt */
  line-height: calc(var(--u) * 21.6);
  color: #7F7F7F;
  max-width: calc(var(--u) * 310);
  text-wrap: pretty;
}
.csl-card-m{
  position: absolute; top: calc(var(--u) * 251); left: 0;
  font-family: var(--sans);
  font-size: calc(var(--u) * 18.33);
  line-height: calc(var(--u) * 21.6);
  color: var(--ink-65);
  white-space: nowrap;
}
.csl-card-m span{ display: block; }
.csl-card-m b{ font-weight: 700; }
.csl-arrow{
  position: absolute;
  left: calc(var(--u) * 44.4); top: calc(var(--u) * 454.8);
  width: calc(var(--u) * 38.4); height: calc(var(--u) * 12);
  color: var(--ink-75);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.csl-arrow svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.csl-card:hover .csl-arrow{ transform: translateX(calc(var(--u) * 8)); }

.csl-empty{
  margin: calc(var(--u) * 39.6) 0 0 calc(var(--u) * 115.2);
  width: calc(var(--u) * 1390);
  padding: calc(var(--u) * 80) 0;
  border-radius: calc(var(--u) * 33);
  background: #F2F2F2;
  text-align: center;
  font-family: var(--sans);
  font-size: calc(var(--u) * 20);
  color: var(--ink-65);
}
.csl-empty[hidden]{ display: none; }

/* ---------- Slide 4 — CTA band ---------- */
.csl-cta{ background: #111; }

/* ---------- Motion (text only — never on images) ---------- */
.csl-js .csl-ln > span{ transform: translate3d(0, 105%, 0); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 1ms); }
.csl-js .is-loaded .csl-ln > span{ transform: none; }
.csl-js [data-rv]{ opacity: 0; transform: translate3d(0, calc(var(--u) * 22), 0); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 1ms); }
.csl-js [data-rv].is-in{ opacity: 1; transform: none; }

/* =====================================================================
   MOBILE (≤ 900px)
===================================================================== */
@media (max-width: 900px){
  .csl-hero{ padding-top: 6vw; padding-bottom: 14vw; }
  .csl-logo img{ width: 130px; }
  .csl-tagrow{ display: flex; align-items: center; gap: 10px; margin-top: 16vw; }
  .csl-tag{ font-size: 0.8125rem; line-height: 1.4; }
  .csl-title{ font-size: 11vw; line-height: 1.08; margin-top: 6vw; white-space: normal; }
  .csl-sub{ font-size: 0.8125rem; line-height: 1.5; margin-top: 7vw; white-space: normal; }
  .csl-sub br, .csl-intro-h br, .csl-intro-b br, .csl-card-t br, .csl-card-d br{ display: none; }
  .csl-photo{ width: 100%; height: auto; aspect-ratio: 604.6 / 465.9; margin-top: 10vw; }

  .csl-intro{ padding: 8vw var(--g) 12vw; }
  .csl-intro-h{ font-size: 8.4vw; line-height: 1.15; white-space: normal; }
  .csl-intro-b{ margin-top: 7vw; font-size: 1rem; line-height: 1.5; white-space: normal; }

  .csl-list{ padding: 8vw var(--g) 16vw; }
  .csl-explore{ margin: 0; font-size: 1.375rem; line-height: 1.25; }
  .csl-tools{ width: auto; margin: 6vw 0 0; }
  .csl-filter{ width: auto; height: 44px; padding: 0 18px; font-size: 1rem; gap: 8px; }
  .csl-filter svg{ width: 16px; height: 13px; }
  .csl-filter-n{ font-size: 0.75rem; }
  .csl-search{ height: 44px; margin-left: 12px; }
  .csl-search svg{ left: 6px; top: 12px; width: 18px; height: 18px; }
  .csl-search input{ padding: 0 0 4px 34px; font-size: 1rem; }
  .csl-panel{ width: auto; margin: 4vw 0 0; gap: 8px; }
  .csl-opt{ height: 34px; padding: 0 12px; font-size: 0.6875rem; border-radius: 6px; }
  .csl-count{ margin: 7vw 0 0; font-size: 0.8125rem; line-height: 1.4; }

  .csl-cards{ grid-template-columns: 1fr; gap: 5vw; margin: 5vw 0 0; }
  .csl-card{ height: auto; border-radius: 22px; padding: 7vw 7vw 18vw; }
  .csl-chip, .csl-card-body, .csl-card-m{ position: static; }
  .csl-chip{ width: auto; height: 30px; padding: 0 12px; font-size: 0.75rem; border-radius: 5px; }
  .csl-card-body{ width: auto; margin-top: 6vw; }
  .csl-card-t{ font-size: 1.5rem; line-height: 1.2; white-space: normal; }
  .csl-card-d, .csl-card-m{ font-size: 1rem; line-height: 1.4; white-space: normal; }
  .csl-card-d{ margin-top: 4vw; }
  .csl-card-m{ margin-top: 6vw; }
  .csl-arrow{ left: 7vw; top: auto; bottom: 7vw; width: 36px; height: 12px; }
  .csl-empty{ width: auto; margin: 5vw 0 0; padding: 12vw 5vw; border-radius: 16px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce){
  .csl-arrow, .csl-card{ transition: none; }
}


/* =====================================================================
   ADDITION — "More client stories" horizontal scroller (cards reuse .csl-card exactly)
   Existing rules above are unchanged. Images are never animated.
===================================================================== */
.csl-more{ margin-top: calc(var(--u) * 96); }
.csl-more[hidden]{ display: none; }
.csl-more-head{ display: flex; align-items: flex-end; justify-content: space-between; margin-right: calc(var(--u) * 115.2); }
.csl-more-t{ margin-left: calc(var(--u) * 117.6); }
.csl-nav{ display: flex; gap: calc(var(--u) * 12); }
.csl-navbtn{
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--u) * 72); height: calc(var(--u) * 48);
  border: 2px solid #111; border-radius: 999px; background: #fff; color: #111; cursor: pointer;
  transition: background .2s, color .2s, opacity .2s;
}
.csl-navbtn svg{ display: block; width: calc(var(--u) * 38); height: calc(var(--u) * 12); overflow: visible; }
.csl-navbtn:hover:not(:disabled){ background: #111; color: #fff; }
.csl-navbtn:disabled{ opacity: .3; cursor: default; }
.csl-track{
  display: flex; gap: calc(var(--u) * 57.6);
  margin: calc(var(--u) * 41.6) 0 0;
  padding: 0 calc(var(--u) * 115.2) calc(var(--u) * 24);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding: 0 calc(var(--u) * 115.2);
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #A6A6A6 transparent;
}
.csl-track::-webkit-scrollbar{ height: 6px; }
.csl-track::-webkit-scrollbar-thumb{ background: #A6A6A6; border-radius: 3px; }
.csl-track::-webkit-scrollbar-track{ background: transparent; }
.csl-track .csl-card{ flex: none; width: calc(var(--u) * 425.2); scroll-snap-align: start; }

/* keyboard focus (accessibility) */
.csl-card:focus-visible, .csl-navbtn:focus-visible, .csl-filter:focus-visible, .csl-opt:focus-visible, .csl-track:focus-visible{ outline: 3px solid #111; outline-offset: 3px; }
.csl-search input:focus-visible{ outline: 0; }

@media (max-width: 900px){
  .csl-more{ margin-top: 12vw; }
  .csl-more-head{ margin-right: 0; align-items: center; gap: 12px; }
  .csl-more-t{ margin-left: 0; }
  .csl-navbtn{ width: 56px; height: 44px; }
  .csl-navbtn svg{ width: 30px; height: 10px; }
  .csl-track{ gap: 5vw; margin: 5vw calc(var(--g) * -1) 0; padding: 0 var(--g) 16px; scroll-padding: 0 var(--g); }
  .csl-track .csl-card{ width: min(82vw, 380px); }
  .csl-track .csl-card-d{ max-width: none; }
}
@media (prefers-reduced-motion: reduce){
  .csl-navbtn{ transition: none; }
}