/* =====================================================================
   CHAVANS — CLIENT STORIES PAGE
   Standalone stylesheet — no other CSS needed.
   Source of truth: "Client Stories_Landing page_v2 COPY" PDF / PPTX.
   Reference canvas: 1600px wide. --u = 1vw/16 (1px @1600px).
===================================================================== */

/* ---------- Fonts ---------- */
@font-face{
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Italic-Variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
img{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
body{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #111;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Page token ---------- */
.page-cs{
  --u: calc(100vw / 1600);
  --gutter: 4.6875vw;
  background: #fff;
}

/* =====================================================================
   NAV — light theme
===================================================================== */
.nav{
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 1.25rem;
}
.nav .logo img{ height: auto; }
.nav-pills{ margin-left: auto; display: flex; align-items: center; flex-wrap: nowrap; }
.pill{
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background .2s;
}
.search{
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.search svg{ width: 20px; height: 20px; }
.nav-toggle{
  display: none; flex-direction: column; gap: 5px;
  width: 28px; height: 22px;
}
.nav-toggle span{ display: block; height: 2px; border-radius: 1px; }

/* Client stories — light pill style */
.page-cs .nav{
  padding: calc(var(--u)*41) var(--gutter) 0 calc(var(--u)*77);
}
.page-cs .nav .logo img{
  width: calc(var(--u)*145); min-width: 100px; max-width: none;
}
.page-cs .pill{
  background: #d9d9d9;
  border: 0;
  color: #000;
  padding: calc(var(--u)*11) calc(var(--u)*12);
  border-radius: 7px;
}
.page-cs .nav-pills{ gap: calc(var(--u)*25); }
.page-cs .pill:hover{ background: #cacaca; }
.page-cs .pill--active{ background: #d9d9d9; }
.page-cs .search{ color: #000; margin-left: calc(var(--u)*6); }
.page-cs .nav-toggle span{ background: #000; }

/* =====================================================================
   01 HERO (white)
===================================================================== */
.s-cs-hero{
  position: relative;
  background: #fff;
  color: #0d0d0d;
  height: calc(var(--u) * 614.7);
}

.cs-hero-body{
  position: absolute;
  left: calc(var(--u)*70);
  top: calc(var(--u)*190);
}

.cs-tag{
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: calc(var(--u)*16.7);
  letter-spacing: 0.02em;
  color: #262626;
  display: flex; align-items: center;
  gap: calc(var(--u)*6);
  margin-left: calc(var(--u)*1);
  white-space: nowrap;
}
.cs-tag .plus{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: calc(var(--u)*26);
  line-height: 1;
  margin-top: calc(var(--u)*-3);
}

.cs-hero-title{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: calc(var(--u)*90);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #0d0d0d;
  margin: calc(var(--u)*22) 0 0;
}

/* =====================================================================
   FULL-BLEED PHOTO
===================================================================== */
.cs-photo{
  display: block;
  width: 100%;
  aspect-ratio: 1600 / 989.5;
  object-fit: cover;
  object-position: 50% 0%;
}

/* =====================================================================
   02 INTRO (white)
===================================================================== */
.s-cs-intro{
  background: #fff;
  color: #000;
  padding: calc(var(--u)*69) 0 calc(var(--u)*110) calc(var(--u)*109);
}

.cs-intro{
  max-width: calc(var(--u)*735);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(var(--u)*18.3);
  line-height: 1.17;
  font-weight: 400;
}
.cs-intro p{ margin: 0 0 calc(var(--u)*21); }
.cs-intro ul{
  list-style: none;
  margin: 0 0 calc(var(--u)*21);
  padding: 0;
}
.cs-intro li{
  position: relative;
  padding-left: calc(var(--u)*22);
}
.cs-intro li::before{ content: "•"; position: absolute; left: 0; }
.cs-intro p.cs-intro-lead{ margin-bottom: 0; }

/* =====================================================================
   03 LISTING (white)
===================================================================== */
.s-cs-list{
  background: #fff;
  color: #000;
  padding: calc(var(--u)*102) 0 calc(var(--u)*64);
}

.cs-explore{
  margin: 0 0 0 calc(var(--u)*117);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: calc(var(--u)*23.3);
  line-height: 1.2;
}

.cs-tools{
  display: flex; align-items: center;
  margin: calc(var(--u)*39) 0 0 calc(var(--u)*118);
  width: calc(var(--u)*1356);
}

.cs-filter{
  flex: none;
  width: calc(var(--u)*128);
  height: calc(var(--u)*49);
  border: 2px solid #111;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--u)*8);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: calc(var(--u)*18);
  color: #111;
  background: #fff;
  transition: background .2s, color .2s;
}
.cs-filter svg{ width: calc(var(--u)*17); height: calc(var(--u)*14); }
.cs-filter:hover{ background: #111; color: #fff; }

.cs-search{
  flex: 1;
  position: relative;
  margin-left: calc(var(--u)*19);
  height: calc(var(--u)*50);
  display: flex; align-items: center;
  border-bottom: 2px solid #cfcfcf;
  transition: border-color .2s;
  margin-top: calc(var(--u)*3);
}
.cs-search:focus-within{ border-color: #111; }
.cs-search svg{
  position: absolute; left: calc(var(--u)*27); top: 50%;
  width: calc(var(--u)*21); height: calc(var(--u)*21);
  transform: translateY(-58%);
}
.cs-search input{
  width: 100%; height: 100%;
  border: 0; outline: 0; background: transparent;
  padding: 0 0 0 calc(var(--u)*73);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(var(--u)*20);
  color: #111;
  margin-top: calc(var(--u)*-4);
}
.cs-search input::placeholder{ color: #bfbfbf; opacity: 1; }

.cs-count{
  margin: calc(var(--u)*36) 0 0 calc(var(--u)*127);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: calc(var(--u)*18.3);
  letter-spacing: 0.02em;
  color: #404040;
}

.cs-cards{
  display: grid;
  grid-template-columns: repeat(3, calc(var(--u)*425.2));
  column-gap: calc(var(--u)*57.3);
  margin: calc(var(--u)*39) 0 0 calc(var(--u)*115.4);
}

.cs-card{
  position: relative;
  display: block;
  height: calc(var(--u)*507.8);
  background: #d9d9d9;
  border-radius: calc(var(--u)*33);
  padding: calc(var(--u)*42) calc(var(--u)*40) 0 calc(var(--u)*39.7);
  color: #000;
  transition: background .25s;
}
.cs-card:hover{ background: #d0d0d0; }

.cs-chip{
  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: "JetBrains Mono", ui-monospace, monospace;
  font-size: calc(var(--u)*16.7);
  letter-spacing: 0.02em;
  color: #404040;
  white-space: nowrap;
}

.cs-card-body{ padding-left: calc(var(--u)*5.3); }

.cs-card-title{
  margin: calc(var(--u)*31.5) 0 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: calc(var(--u)*26.7);
  line-height: 1.15;
  color: #000;
}

.cs-card-desc{
  margin: calc(var(--u)*33) 0 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(var(--u)*18.3);
  line-height: 1.2;
  color: #7f7f7f;
}

.cs-card-meta{
  margin: calc(var(--u)*44) 0 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(var(--u)*18.3);
  line-height: 1.2;
  color: #595959;
}
.cs-card-meta span{ display: block; }
.cs-card-meta b{ font-weight: 700; }

.cs-arrow{
  position: absolute;
  left: calc(var(--u)*44.5);
  top: calc(var(--u)*455);
  width: calc(var(--u)*38);
  height: calc(var(--u)*12);
  color: #404040;
  transition: transform .25s ease;
}
.cs-card:hover .cs-arrow{ transform: translateX(calc(var(--u)*8)); }

/* =====================================================================
   04 CLOSING STATEMENT (grey band)
===================================================================== */
.s-cs-close{
  background: #7f7f7f;
  color: #fff;
  height: calc(var(--u)*450);
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--u)*48) 0 0;
}
.cs-close{
  margin: 0;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: calc(var(--u)*33.3);
  line-height: 1.21;
  letter-spacing: -0.003em;
}

/* =====================================================================
   05 FOOTER (black)
===================================================================== */
.s-cs-footer{
  background: #000;
  color: #d0d0d0;
  min-height: calc(var(--u)*486);
  padding: calc(var(--u)*80) 0 calc(var(--u)*50) calc(var(--u)*163);
}
.s-cs-footer .foot-grid{
  display: grid;
  grid-template-columns: calc(var(--u)*365) calc(var(--u)*335) calc(var(--u)*375) auto;
  gap: 0;
}
.foot-col h4{
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: #fff;
  margin: 0 0 calc(var(--u)*46);
  font-weight: 700;
}
.foot-col ul{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: calc(var(--u)*10);
}
.foot-col a{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(var(--u)*16.7);
  color: #a6a6a6;
}
.foot-col a:hover{ color: #fff; }
.foot-copy{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(var(--u)*16.7);
  color: #d9d9d9;
  margin: calc(var(--u)*50) 0 0;
}

/* =====================================================================
   MOBILE (≤ 900px)
===================================================================== */
@media (max-width: 900px){
  .page-cs{ --u: calc(100vw / 900); }
  :root{ --gutter: 5vw; }

  .nav{ gap: 0.75rem; }
  .nav-pills, .search{ display: none; }
  .nav-toggle{ display: inline-flex; margin-left: auto; }

  .page-cs .nav{ padding: 5vw var(--gutter); }
  .page-cs .nav .logo img{ width: 110px; }

  .s-cs-hero{ height: auto; padding-bottom: 12vw; }
  .cs-hero-body{ position: static; padding: 14vw var(--gutter) 0; }
  .cs-tag{ font-size: 0.8125rem; gap: 6px; }
  .cs-tag .plus{ font-size: 1.3rem; }
  .cs-hero-title{ font-size: 10.5vw; line-height: 1.12; margin-top: 4vw; }
  .cs-hero-title br{ display: none; }

  .cs-photo{ aspect-ratio: 4 / 3.4; object-position: 58% 0%; }

  .s-cs-intro{ padding: 10vw var(--gutter) 12vw; }
  .cs-intro{ max-width: none; font-size: 1rem; line-height: 1.4; }
  .cs-intro p, .cs-intro ul{ margin-bottom: 1rem; }
  .cs-intro li{ padding-left: 1.1rem; }

  .s-cs-list{ padding: 8vw var(--gutter) 14vw; }
  .cs-explore{ margin: 0; font-size: 1.25rem; }
  .cs-tools{ width: auto; margin: 6vw 0 0; }
  .cs-filter{ width: auto; height: 44px; padding: 0 18px; font-size: 1rem; gap: 8px; }
  .cs-filter svg{ width: 16px; height: 13px; }
  .cs-search{ height: 44px; margin-left: 12px; }
  .cs-search svg{ left: 6px; width: 18px; height: 18px; }
  .cs-search input{ padding-left: 34px; font-size: 1rem; margin-top: 0; }
  .cs-count{ margin: 7vw 0 0; font-size: 0.8125rem; }

  .cs-cards{ grid-template-columns: 1fr; row-gap: 5vw; margin: 5vw 0 0; }
  .cs-card{ height: auto; border-radius: 22px; padding: 7vw 7vw 18vw; }
  .cs-chip{ width: auto; height: 30px; padding: 0 12px; font-size: 0.8125rem; border-radius: 5px; }
  .cs-card-body{ padding-left: 0; }
  .cs-card-title{ font-size: 1.5rem; margin-top: 6vw; }
  .cs-card-desc, .cs-card-meta{ font-size: 1rem; }
  .cs-card-desc{ margin-top: 5vw; }
  .cs-card-meta{ margin-top: 6vw; }
  .cs-arrow{ left: 7vw; top: auto; bottom: 7vw; width: 36px; height: 12px; }

  .s-cs-close{ height: auto; padding: 22vw var(--gutter); }
  .cs-close{ font-size: 6.4vw; line-height: 1.25; }
  .cs-close br{ display: none; }

  .s-cs-footer{ padding: 12vw var(--gutter) 10vw; }
  .s-cs-footer .foot-grid{ grid-template-columns: 1fr 1fr; gap: 8vw 4vw; }
  .foot-col h4{ margin-bottom: 1.2rem; }
  .foot-col a, .foot-copy{ font-size: 0.9375rem; }
  .foot-col ul{ gap: 0.6rem; }
  .foot-copy{ margin-top: 1.6rem; }
}