/* Case studies: the individual case-study pages and the case-study cards on the Solutions page.
   Each page/card sets --cs-bg (tint), --cs-ac (accent) and --cs-tile (soft accent) to its solution's colour. */

/* ---- card (Solutions page + "More case studies") ---- */
.cs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cs-card{display:flex;flex-direction:column;background:#fff;border:1px solid #eceae4;border-radius:20px;overflow:hidden;color:#14151a;transition:transform .25s,box-shadow .25s,border-color .25s}
.cs-card:hover{color:#14151a;transform:translateY(-4px);border-color:#dedbd2;box-shadow:0 20px 44px rgba(20,21,26,.09)}
.cs-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 24px;background:var(--cs-bg)}
.cs-card-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:var(--cs-tile);color:var(--cs-ac);flex:none}
.cs-card-n{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cs-ac)}
.cs-card-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:22px 24px 24px}
.cs-card-body h3,.cs-card-body h4{font-size:19px;font-weight:700;line-height:1.22;text-wrap:balance}
.cs-card-sol{font-size:14px;color:#5b5f6b;line-height:1.45}
.cs-card-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;font-size:14.5px;font-weight:600;color:#14151a}
.cs-read{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:15px;font-weight:700;color:#14151a;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.cs-read:hover{color:#3a3d47}

/* ---- page ---- */
.cs{padding-top:56px}
.cs-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.cs-eye{color:var(--cs-ac)}
.cs-h1{font-size:clamp(34px,4.4vw,54px);font-weight:700;line-height:1.05;margin-top:16px;text-wrap:balance}
.cs-lede{font-size:18px;color:#4b4f5c;line-height:1.6;margin-top:18px;max-width:560px;text-wrap:pretty}
.cs-tagline{font-size:14.5px;font-weight:600;color:var(--cs-ac);margin-top:14px}
.cs-built{margin-top:24px}
/* hero photo for each case study */
.cs-photo{margin:0;border-radius:28px;overflow:hidden;background:var(--cs-bg);aspect-ratio:14/11;box-shadow:0 24px 60px -24px rgba(20,21,26,.28)}
.cs-photo img{display:block;width:100%;height:100%;object-fit:cover}

.cs-glance{margin-top:56px;background:var(--cs-bg);border-radius:24px;padding:30px 32px 32px}
.cs-glance h2{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cs-ac)}
.cs-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.cs-g-i{background:#fff;border-radius:18px;padding:22px 22px 24px;box-shadow:0 1px 0 rgba(20,21,26,.03)}
.cs-g-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--cs-tile);color:var(--cs-ac)}
.cs-g-i h3{margin-top:14px;font-size:17px;font-weight:700;line-height:1.25}
.cs-g-i p{margin-top:8px;font-size:15px;line-height:1.6;color:#3a3d47;text-wrap:pretty}

.cs-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start;margin-top:64px}
/* sticky consultation card beside the article */
.cs-cta{position:sticky;top:96px}
.cs-cta-card{background:#fff;border:1px solid #eceae4;border-radius:22px;padding:28px 24px;text-align:center;box-shadow:0 18px 44px rgba(20,21,26,.06)}
.cs-cta-card h2{font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.cs-cta-btn{width:100%;justify-content:center;margin-top:20px}
.cs-cta-btn:hover{background:#3a3d47;color:#fff;transform:translateY(-2px)}
.cs-cta-proof{margin-top:20px}
.cs-cta-av{display:flex;justify-content:center}
.cs-cta-av img{display:block;width:40px;height:40px;border-radius:50%;object-fit:cover;border:2.5px solid #fff;margin-left:-10px;background:#eceae4;box-shadow:0 2px 6px rgba(20,21,26,.1)}
.cs-cta-av img:first-child{margin-left:0}
.cs-cta-proof p{margin-top:10px;font-size:14.5px;font-weight:600;color:#3a3d47}
.cs-article{max-width:820px}
.cs-sec{scroll-margin-top:100px}
.cs-sec+.cs-sec{margin-top:52px}
.cs-sec h2{font-size:clamp(24px,2.6vw,30px);font-weight:700;line-height:1.15;text-wrap:balance}
.cs-sec p{font-size:17px;line-height:1.72;color:#2b2e37;margin-top:14px;text-wrap:pretty}
.cs-flow{margin-top:24px;background:#fff;border:1px solid #eceae4;border-radius:18px;padding:20px 22px}
.cs-flow-h{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a8e99}
.cs-flow ol{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px}
.cs-flow li{display:flex;align-items:center;gap:6px}
.cs-flow li span{background:var(--cs-bg);color:#14151a;border:1px solid var(--cs-tile);border-radius:999px;padding:7px 13px;font-size:14px;font-weight:600}
.cs-flow li svg{color:var(--cs-ac);flex:none}
.cs-cards,.cs-impact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.cs-c{background:#fff;border:1px solid #eceae4;border-radius:16px;padding:20px}
.cs-c h3,.cs-i h3{font-size:16.5px;font-weight:700;line-height:1.3}
.cs-c p,.cs-i p{font-size:14.5px;line-height:1.55;color:#5b5f6b;margin-top:6px}
.cs-i{display:flex;gap:14px;background:var(--cs-bg);border-radius:16px;padding:20px}
.cs-tick{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--cs-ac);color:#fff}
.cs-note{font-size:14px!important;color:#5b5f6b!important;background:#f6f5f1;border-radius:12px;padding:12px 16px;margin-top:18px!important}

.cs-why{scroll-margin-top:100px;margin-top:56px;background:#14151a;color:#fff;border-radius:24px;padding:40px 40px 36px;position:relative;overflow:hidden}
.cs-why:before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:var(--cs-ac);opacity:.35;filter:blur(40px)}
.cs-why-l{position:relative;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cs-tile)}
.cs-why blockquote{position:relative;margin:14px 0 0;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(24px,2.6vw,32px);font-weight:700;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.cs-why-btn{position:relative;margin-top:26px;background:#fff;color:#14151a}
.cs-why-btn:hover{color:#14151a;transform:translateY(-2px)}


.cs-more{margin-top:96px}
.cs-more-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.cs-more-h .pg-h2{margin:0}
.cs-all{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:#14151a;white-space:nowrap}

@media (max-width:1000px){
  .cs-hero{grid-template-columns:minmax(0,1fr);gap:32px}
  .cs-body{grid-template-columns:minmax(0,1fr);gap:48px}
  .cs-g{grid-template-columns:minmax(0,1fr)}
  .cs-cta{position:static;max-width:460px}
  .cs-body{grid-template-columns:minmax(0,1fr)}
    .cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
    .cs-glance{padding:22px 18px}
  .cs-cards,.cs-impact,.cs-grid{grid-template-columns:minmax(0,1fr)}
  .cs-why{padding:28px 22px}
  .cs-more-h{flex-direction:column;align-items:flex-start}
}

/* ---- Home: auto-scrolling strip of case-study cards ---- */
.cs-marq{margin-top:44px;overflow:hidden;padding:8px 0 24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cs-track,.cs-dup{display:flex;gap:20px;width:max-content}
.cs-track{animation:cs-marq 70s linear infinite}
.cs-track .cs-card{width:340px;flex:none}
.cs-dup{padding-left:0}
.cs-marq:hover .cs-track,.cs-marq:focus-within .cs-track{animation-play-state:paused}
@keyframes cs-marq{to{transform:translateX(calc(-50% - 10px))}}
@media (max-width:640px){.cs-track .cs-card{width:280px}.cs-track{animation-duration:55s}}
@media (prefers-reduced-motion:reduce){.cs-marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.cs-track{animation:none}.cs-dup{display:none}}