/* Anonymized Case Studies — project layer (loads AFTER leanscale.css) */

/* Not sticky: with three filter rows this bar is tall enough that pinning it swallows the
   viewport and covers the cards on scroll. It sits above the library instead. */
.controls{background:rgba(255,251,255,.92);border-top:1px solid var(--ls-light-gray);
  border-bottom:1px solid var(--ls-light-gray);padding:18px 0 20px;margin-bottom:6px}
.fbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.fgroup{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.flabel{font-size:11px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
  color:var(--ls-dark-gray);margin-right:2px}
.fpill{font:inherit;font-size:12.5px;font-weight:700;color:var(--ls-dark-purple);
  background:#fff;border:1px solid var(--ls-light-gray);border-radius:999px;
  padding:6px 12px;cursor:pointer;transition:.16s;line-height:1.2}
.fpill:hover{border-color:var(--ls-strong-purple);transform:translateY(-1px)}
.fpill.on{background:var(--ls-strong-purple);border-color:var(--ls-strong-purple);color:#fff}
.fpill .n{opacity:.6;font-weight:600;margin-left:3px}
.fpill.on .n{opacity:.85}
.searchbox{flex:1;min-width:200px;font:inherit;font-size:13.5px;padding:8px 14px;
  border:1px solid var(--ls-light-gray);border-radius:999px;background:#fff;color:var(--ls-ink)}
.searchbox:focus{outline:none;border-color:var(--ls-strong-purple)}
.frow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:10px}

.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(305px,1fr));gap:18px;margin-top:26px}
.cs-card{text-align:left;font:inherit;color:inherit;background:#fff;border:1px solid var(--ls-light-gray);
  border-radius:var(--radius);padding:22px;cursor:pointer;transition:.18s;display:flex;
  flex-direction:column;gap:11px;box-shadow:var(--shadow)}
.cs-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--ls-strong-purple)}
.cs-meta{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:var(--ls-purple-soft);color:var(--ls-strong-purple);
  white-space:nowrap}
.tag.stage{background:var(--ls-lime);color:#3d5c17}
.tag.size{background:#f4f4f2;color:var(--ls-dark-gray)}
.cs-title{font-size:17px;font-weight:800;line-height:1.28;color:var(--ls-dark-purple);margin:0}
.cs-sum{font-size:13.5px;line-height:1.55;color:var(--ls-dark-gray);margin:0}
.cs-sys{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:4px}
.sys{font-size:11px;font-weight:700;color:var(--ls-dark-gray);border:1px solid var(--ls-light-gray);
  border-radius:5px;padding:3px 7px;background:#fcfcfb}
.cs-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;
  border-top:1px solid var(--ls-light-gray);padding-top:11px;margin-top:2px}
.qbadge{font-size:11px;font-weight:800;color:var(--ls-strong-purple)}
.cs-open{font-size:12px;font-weight:800;color:var(--ls-strong-purple)}

.motion-h{display:flex;align-items:baseline;gap:12px;margin:46px 0 0;padding-bottom:12px;
  border-bottom:2px solid var(--ls-dark-purple)}
.motion-h h2{margin:0;font-size:clamp(21px,2.4vw,27px);color:var(--ls-dark-purple)}
.motion-h .cnt{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ls-dark-gray);white-space:nowrap}

/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(26,20,32,.55);backdrop-filter:blur(4px);
  display:none;padding:26px 16px;overflow-y:auto}
.modal.on{display:block}
.modal-inner{max-width:820px;margin:0 auto;background:#fff;border-radius:var(--radius);
  padding:40px 44px 46px;position:relative;box-shadow:0 30px 80px rgba(48,25,52,.3)}
.m-close{position:absolute;top:16px;right:18px;border:1px solid var(--ls-light-gray);background:#fff;
  border-radius:999px;width:34px;height:34px;cursor:pointer;font-size:15px;color:var(--ls-dark-gray)}
.m-close:hover{border-color:var(--ls-strong-purple);color:var(--ls-strong-purple)}
.m-h1{font-size:clamp(22px,3vw,30px);line-height:1.2;color:var(--ls-dark-purple);margin:14px 0 12px}
.m-sum{font-size:15.5px;line-height:1.6;color:var(--ls-dark-gray);margin:0 0 22px}
.m-sec{margin-top:28px}
.m-sec h3{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ls-strong-purple);margin:0 0 12px}
.m-sec p{font-size:14.5px;line-height:1.68;color:var(--ls-ink);margin:0}
.m-step{border-left:3px solid var(--ls-purple-soft);padding:2px 0 2px 16px;margin-bottom:16px}
.m-step b{display:block;font-size:14.5px;color:var(--ls-dark-purple);margin-bottom:4px}
.m-step span{font-size:14px;line-height:1.62;color:var(--ls-dark-gray)}
.m-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.m-outc{background:var(--ls-lime);border-radius:12px;padding:15px 17px}
.m-outc b{display:block;font-size:14px;color:#2f4a12;margin-bottom:4px}
.m-outc span{font-size:13px;line-height:1.55;color:#3d5c17}
.m-quote{border-left:3px solid var(--ls-strong-purple);background:var(--ls-purple-soft);
  border-radius:0 12px 12px 0;padding:16px 20px;margin-bottom:12px}
.m-quote p{font-size:15px;line-height:1.6;color:var(--ls-dark-purple);margin:0 0 7px;font-style:italic}
.m-quote cite{font-size:12px;font-weight:800;color:var(--ls-strong-purple);font-style:normal;
  letter-spacing:.03em}
.m-facts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}

.anonbar{display:flex;gap:10px;align-items:flex-start;background:#fcfcfb;
  border:1px dashed var(--ls-light-gray);border-radius:12px;padding:13px 16px;margin-top:30px}
.anonbar svg{flex:0 0 auto;margin-top:1px}
.anonbar p{font-size:12.5px;line-height:1.55;color:var(--ls-dark-gray);margin:0}

#noresults{display:none;text-align:center;color:var(--ls-dark-gray);padding:60px 0;font-size:15px}

@media(max-width:640px){
  .modal-inner{padding:32px 22px 34px}
  .cs-grid{grid-template-columns:1fr}
  .fbar,.fgroup{gap:6px}
  .fpill{font-size:12px;padding:5px 10px}
}