/* Onyxarro case-study layout — shared across /work/<slug>/index.html */
.cs-back{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--muted);text-decoration:none;letter-spacing:.3px;margin-bottom:1.4rem;transition:color .25s}
.cs-back:hover{color:var(--teal)}
.cs-badge{display:inline-flex;align-items:center;gap:8px;padding:.42rem .9rem;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:1.2rem}
.cs-badge::before{content:"";width:5px;height:5px;border-radius:50%}
.cs-badge.tier1{background:#6B1E20;color:#F5EFE6;border:1px solid #6B1E20;box-shadow:0 12px 36px rgba(107,30,32,.35)}
.cs-badge.tier1::before{background:#F5EFE6}
.cs-badge.concept{background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.32);color:#cfe8fb}
.cs-badge.concept::before{background:var(--teal);box-shadow:0 0 8px rgba(14,165,233,.6)}
.cs-badge.internal{background:rgba(147,51,234,.18);border:1px solid rgba(147,51,234,.4);color:#e9d5ff}
.cs-badge.internal::before{background:#9333ea}

.cs-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:800;letter-spacing:-1.5px;color:#fff;line-height:1.05;margin-bottom:.6rem}
.cs-hero h1 .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cs-hero .cs-niche{font-size:1.05rem;color:var(--muted);font-weight:600;margin-bottom:1.4rem}
.cs-hero .cs-objective{max-width:780px;font-size:1.1rem;color:var(--text);line-height:1.75}

.cs-meta{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);border-radius:18px;overflow:hidden;margin:2.5rem 0 1rem}
@media(max-width:900px){.cs-meta{grid-template-columns:repeat(2,1fr)}}
.cs-meta-cell{padding:1rem 1.1rem;background:rgba(13,26,40,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.cs-meta-k{font-size:.6rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.cs-meta-v{font-size:.92rem;font-weight:700;color:#fff}

.cs-section{padding:60px 0}
.cs-section h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.8px;color:#fff;margin-bottom:1.2rem}
.cs-section h2 .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cs-section p{font-size:1rem;color:var(--text);line-height:1.85;max-width:780px;margin-bottom:1rem}
.cs-section p strong{color:#fff;font-weight:700}

.cs-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.cs-grid-2{grid-template-columns:1fr}}
.cs-glass{padding:1.6rem 1.7rem;border-radius:18px;background:rgba(13,26,40,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08)}
.cs-glass h3{font-size:.7rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;background:none;-webkit-text-fill-color:initial}
.cs-glass p{font-size:.95rem;color:var(--text);line-height:1.75;margin:0}

.cs-list{margin:0;padding:0;list-style:none}
.cs-list li{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.97rem;color:var(--text);line-height:1.65}
.cs-list li:last-child{border-bottom:none}
.cs-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad);margin-top:.55rem;flex-shrink:0;box-shadow:0 0 12px rgba(14,165,233,.5)}
.cs-list.numbered{counter-reset:csl}
.cs-list.numbered li{counter-increment:csl}
.cs-list.numbered li::before{content:counter(csl,decimal-leading-zero);width:auto;height:auto;border-radius:0;background:none;box-shadow:none;font-size:.7rem;font-weight:800;letter-spacing:1.2px;color:var(--teal);margin-top:.18rem;min-width:26px}

.cs-screens-grid{display:grid;grid-template-columns:1fr;gap:18px}
.cs-screen{position:relative;border-radius:22px;overflow:hidden;background:#0a0a0a;border:1px solid rgba(255,255,255,.08)}
.cs-screen img{width:100%;height:auto;display:block}
.cs-screen-cap{padding:1rem 1.2rem;font-size:.78rem;color:var(--muted);background:rgba(13,26,40,.7);border-top:1px solid rgba(255,255,255,.06)}
.cs-screens-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.cs-screens-row{grid-template-columns:1fr}}

.cs-discl{margin-top:1.6rem;padding:1rem 1.2rem;border-radius:14px;background:rgba(13,26,40,.45);border:1px solid var(--border2);font-size:.84rem;color:var(--muted);line-height:1.7}
.cs-discl strong{color:#fff;font-weight:700}

.cs-cta-foot{padding:60px 0 20px}
.cs-cta-foot .close-cta{padding:3rem 2.5rem}
@media(max-width:900px){.cs-cta-foot .close-cta{padding:2rem 1.4rem}}

.cs-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.cs-actions .btn{font-size:.85rem;padding:.7rem 1.2rem}