/* Case study page — reuses ABYARD design tokens from abyard-base.css.
   Mirrors the PDF layout (hero + stats, parameters grid, scope,
   results, challenge/solution/effect, why-it-works) with existing aesthetics. */

/* ===== HERO ===== */
.cs-hero{padding:118px 0 clamp(48px,6vw,80px);position:relative;overflow:hidden}
.cs-hero .phero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:grayscale(.4) brightness(.32)}
.cs-hero .phero-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(7,7,9,.95),rgba(7,7,9,.82) 55%,rgba(7,7,9,.72)),linear-gradient(to top,var(--bg) 4%,transparent 46%)}
.cs-hero .grid{position:absolute;inset:-2px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:68px 68px;opacity:var(--grid-op);mask-image:radial-gradient(120% 90% at 72% 8%,#000 18%,transparent 72%)}
.cs-hero .glow{position:absolute;width:60vw;max-width:760px;height:60vw;max-height:760px;right:-12%;top:-30%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 13%,transparent),transparent 62%);filter:blur(16px)}
.cs-hero .in{position:relative;z-index:2}

.cs-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:12.5px;letter-spacing:.04em;color:var(--muted2);text-decoration:none;margin-bottom:26px;transition:color .25s}
.cs-back:hover{color:var(--accent-ink)}

.cs-kicker{font-family:var(--fm);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.cs-badge{position:relative;display:inline-block;font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#1a1305;background:var(--accent);padding:7px 14px 7px 18px;clip-path:polygon(10px 0,100% 0,calc(100% - 0px) 100%,0 100%)}
.cs-title{font-family:var(--fd);font-size:clamp(40px,7vw,96px);font-weight:700;letter-spacing:-.04em;line-height:.98;margin:18px 0 14px}
.cs-subtitle{font-size:clamp(16px,1.9vw,20px);font-weight:600;color:var(--text);margin:0 0 10px}
.cs-meta{font-family:var(--fm);font-size:13px;color:var(--muted2);margin:0 0 26px;max-width:80ch}
.cs-intro{font-size:var(--fs-lead);line-height:1.6;color:var(--muted2);max-width:74ch;margin:0 0 14px}
.cs-intro2{font-size:var(--fs-body);color:var(--muted)}

.cs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:0;overflow:hidden;margin:34px 0 0}
.cs-stat{background:color-mix(in srgb,var(--panel) 86%,#000);padding:22px 20px}
.cs-stat-v{font-family:var(--fd);font-weight:700;font-size:clamp(24px,3vw,34px);color:var(--accent);letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.cs-stat-k{font-family:var(--fm);font-size:12px;color:var(--muted2);margin-top:8px;line-height:1.45}
@media(max-width:880px){.cs-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.cs-stats{grid-template-columns:1fr}}

/* ===== DETAILS BODY ===== */
.cs-details{padding:clamp(44px,6vw,84px) 0 clamp(54px,7vw,96px)}
.cs-details-eyebrow{margin-bottom:8px;display:inline-flex}
.cs-h2{font-family:var(--fd);font-size:var(--fs-h3);font-weight:600;letter-spacing:-.01em;margin:clamp(34px,4vw,52px) 0 18px;padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--line)}
.cs-details-eyebrow + .cs-h2{border-top:0;padding-top:0;margin-top:14px}

/* Parameters grid */
.cs-params{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:0;overflow:hidden}
.cs-param{background:var(--panel);padding:14px 16px}
.cs-param-k{font-family:var(--fm);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cs-param-v{font-family:var(--fd);font-size:15px;font-weight:600;color:var(--text);margin-top:4px;line-height:1.3}
@media(max-width:920px){.cs-params{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.cs-params{grid-template-columns:1fr}}

/* Key advantage callout */
.cs-keyadv{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--panel));border-radius:0;padding:20px 22px;margin-bottom:18px}
.cs-keyadv-label{font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1a1305;background:var(--accent);padding:8px 12px;border-radius:0;align-self:start;display:inline-block}
.cs-keyadv-body h3{font-family:var(--fd);font-size:17px;font-weight:600;margin:0 0 8px;color:var(--text)}
.cs-keyadv-body p{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--muted2)}
@media(max-width:680px){.cs-keyadv{grid-template-columns:1fr;gap:14px}}

/* Scope cards / Why cards (shared 3-up / 4-up) */
.cs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cs-card{border:1px solid var(--line);background:var(--panel);border-radius:0;padding:18px 18px 20px}
.cs-card h4{font-family:var(--fd);font-size:15px;font-weight:600;margin:0 0 8px;color:var(--text)}
.cs-card p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted2)}
@media(max-width:820px){.cs-cards{grid-template-columns:1fr}}

/* Results tiles */
.cs-results{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cs-result{border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 90%,#000);border-radius:0;padding:18px}
.cs-result-v{font-family:var(--fd);font-weight:700;font-size:clamp(22px,2.6vw,30px);color:var(--accent);letter-spacing:-.02em;line-height:1.05;margin-bottom:8px;font-variant-numeric:tabular-nums}
.cs-result p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted2)}
@media(max-width:880px){.cs-results{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.cs-results{grid-template-columns:1fr}}

/* Challenge / Solution / Effect */
.cs-cse{display:flex;flex-direction:column;gap:14px}
.cs-cse-row{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:start;border:1px solid var(--line);background:var(--panel);border-radius:0;padding:16px 18px}
.cs-cse-tag{font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1a1305;background:var(--accent);padding:7px 11px;border-radius:0;align-self:start;display:inline-block}
.cs-cse-tag-effect{background:var(--accent-deep)}
.cs-cse-row p{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--muted2)}
@media(max-width:680px){.cs-cse-row{grid-template-columns:1fr;gap:10px}}

/* Why it works */
.cs-why{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cs-why-card{border:1px solid var(--line);background:var(--panel);border-radius:0;padding:18px}
.cs-why-title{font-family:var(--fd);font-size:14.5px;font-weight:600;margin:0 0 8px;color:var(--text);position:relative;padding-left:16px}
.cs-why-title::before{content:"/";position:absolute;left:0;top:0;color:var(--accent);font-family:var(--fd);font-weight:700}
.cs-why-card p{margin:0;font-size:13px;line-height:1.55;color:var(--muted2)}
@media(max-width:980px){.cs-why{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cs-why{grid-template-columns:1fr}}

/* CTA row */
.cs-cta-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--line)}
.cs-back-bottom{margin-bottom:0}