/* =========================================================================
   CASE STUDY PAGES — premium edition (loads after styles.css)
   ========================================================================= */
.cs-topbar .cs-back{
  font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:.6em;color:var(--ink);
}
.cs-topbar .cs-back .arr{transition:transform .45s var(--ease)}
.cs-topbar .cs-back:hover .arr{transform:translateX(-5px)}

.cs{padding-top:clamp(116px,15vh,156px);padding-bottom:0}

/* hero */
.cs-hero{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.cs-hero .eyebrow{color:var(--case)}
.cs-hero .eyebrow::before{background:var(--case)}
.cs-title{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  font-size:clamp(2.9rem,9vw,8.5rem);line-height:.88;letter-spacing:-.03em;margin-top:6px}
.cs-lede{max-width:60ch;font-size:clamp(1.12rem,1.9vw,1.5rem);line-height:1.46;color:var(--ink-soft)}

/* signature stage */
.cs-stage-wrap{max-width:var(--maxw);margin:clamp(40px,6vw,76px) auto 0;padding:0 var(--gut)}
.cs-stage{position:relative;border-radius:24px;overflow:hidden;isolation:isolate;
  height:clamp(280px,46vw,560px);display:flex;align-items:center;justify-content:center;color:var(--paper)}
.cs-stage video,.cs-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-stage.tint::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,transparent 0 28px,rgba(255,255,255,.05) 28px 29px)}
.cs-stage .glyph{font-family:var(--sans);font-weight:600;line-height:1;text-transform:uppercase;
  font-size:clamp(9rem,30vw,26rem);color:rgba(255,255,255,.16)}

/* meta grid */
.cs-meta-wrap{max-width:var(--maxw);margin:clamp(40px,6vw,72px) auto 0;padding:0 var(--gut)}
.cs-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  border-top:1px solid var(--line);padding-top:30px}
.cs-meta > div{display:flex;flex-direction:column;gap:9px}
.cs-meta .k{font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.cs-meta .v{font-family:var(--sans);font-weight:600;font-size:.96rem;color:var(--ink);line-height:1.3}

/* prose sections — sticky heading left, body right */
.cs-section{max-width:var(--maxw);margin:0 auto;
  padding:clamp(48px,7vw,100px) var(--gut) 0;
  display:grid;grid-template-columns:.38fr .62fr;gap:clamp(24px,5vw,80px);align-items:start}
.cs-section h2{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:-.02em;line-height:1;
  position:sticky;top:clamp(96px,12vh,130px)}
.cs-c p{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.62;color:var(--ink-soft);max-width:60ch}
.cs-c p + p{margin-top:1.05em}
.cs-c ul{list-style:none;margin-top:1.4em;display:flex;flex-direction:column;gap:13px}
.cs-c li{position:relative;padding-left:24px;font-size:1.08rem;line-height:1.55;color:var(--ink-soft)}
.cs-c li::before{content:"";position:absolute;left:0;top:.58em;width:8px;height:8px;
  border-radius:50%;background:var(--case)}
.cs-soon{margin-top:1.5em;font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1.1rem}

/* impact cards */
.cs-impact-wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,7vw,100px) var(--gut) 0}
.cs-impact-wrap .eyebrow{color:var(--case);margin-bottom:30px;display:inline-flex}
.cs-impact-wrap .eyebrow::before{background:var(--case)}
.cs-impact{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.cs-stat{background:var(--paper-card);border:1px solid var(--line-soft);border-radius:20px;
  padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:12px;
  transition:transform .5s var(--ease),box-shadow .5s}
.cs-stat:hover{transform:translateY(-5px);box-shadow:0 26px 50px -28px rgba(23,21,16,.25)}
.cs-stat b{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.3rem,2.3vw,1.85rem);letter-spacing:-.01em;line-height:1.02}
.cs-stat span{color:var(--muted);font-size:1rem;line-height:1.55}

/* next case */
.cs-next-wrap{max-width:var(--maxw);margin:clamp(64px,9vw,120px) auto 0;padding:0 var(--gut)}
.cs-next{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:34px 0;transition:padding-left .5s var(--ease)}
.cs-next:hover{padding-left:14px}
.cs-next .k{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.cs-next .t{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.8rem,4.4vw,3.4rem);letter-spacing:-.02em;line-height:1;
  display:inline-flex;align-items:center;gap:.4em;transition:color .4s}
.cs-next:hover .t{color:var(--case)}
.cs-next .t .arr{transition:transform .5s var(--ease)}
.cs-next:hover .t .arr{transform:translateX(7px)}

/* closing CTA */
.cs-cta{background:var(--forest);color:var(--paper);margin-top:clamp(70px,10vw,130px);
  padding:clamp(70px,11vw,150px) 0 clamp(40px,6vw,70px);text-align:center;overflow:hidden}
.cs-cta h2{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,5.5rem);line-height:.94;letter-spacing:-.025em;max-width:18ch;margin:0 auto}
.cs-cta .mail{display:inline-block;margin-top:30px;font-family:var(--sans);font-weight:600;
  text-transform:lowercase;font-size:clamp(1.3rem,3.4vw,2.4rem);letter-spacing:-.02em;
  color:var(--paper);transition:color .4s}
.cs-cta .mail:hover{color:var(--mint-bright)}
.cs-cta .foot{max-width:var(--maxw);margin:clamp(50px,8vw,90px) auto 0;padding:26px var(--gut) 0;
  border-top:1px solid rgba(244,240,231,.16);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-family:var(--sans);font-size:.74rem;letter-spacing:.04em;
  color:rgba(244,240,231,.6)}
.cs-cta .foot a:hover{color:var(--mint-bright)}

/* client / product logos band — elevated white chips on the cream page,
   so the brands the case was built for read as real, tangible proof */
.cs-clients-wrap{max-width:var(--maxw);margin:clamp(30px,4.5vw,54px) auto 0;padding:0 var(--gut)}
.cs-clients-wrap .eyebrow{color:var(--case);margin-bottom:20px;display:inline-flex}
.cs-clients-wrap .eyebrow::before{background:var(--case)}
.cs-clients{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.cchip{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  height:64px;padding:0 24px;border-radius:16px;background:#fff;border:1px solid var(--line-soft);
  box-shadow:0 16px 34px -22px rgba(23,21,16,.32);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cchip:hover{transform:translateY(-4px);box-shadow:0 24px 46px -24px rgba(23,21,16,.4)}
.cchip img{max-height:32px;max-width:140px;width:auto;height:auto;object-fit:contain;display:block;
  filter:grayscale(1)}
.cchip.cchip-icon{width:64px;padding:9px}
.cchip.cchip-icon img{max-height:46px;max-width:46px;border-radius:11px}

@media(max-width:900px){
  .cs-meta{grid-template-columns:repeat(2,1fr)}
  .cs-section{grid-template-columns:1fr;gap:18px}
  .cs-section h2{position:static}
  .cs-impact{grid-template-columns:1fr}
  .cchip{height:54px;padding:0 18px}
  .cchip img{max-height:27px;max-width:118px}
  .cchip.cchip-icon{width:54px}
}