/* =====================================================================
   Page styles for case-study.php (single case study)
   Loaded after style.css, only on this page.
   ===================================================================== */

/* case studies */
.case{scroll-snap-align:start;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.case-go{position:absolute;z-index:2;right:4.4cqw;bottom:4.4cqw;width:11cqw;height:11cqw;border-radius:50%;background:#fff;color:var(--accent);display:grid;place-items:center;transform:scale(.7);opacity:0;transition:transform .35s,opacity .35s}
.case-go svg{width:5cqw;height:5cqw}
.case:hover .case-cover::before{transform:scale(1.12)}
.case:hover .case-go,.case:focus-visible .case-go{transform:none;opacity:1}
.case h3{font-family:var(--body);font-size:18.5px;font-weight:600;letter-spacing:0;line-height:1.35;margin-top:12px;transition:color .25s}
.case p{margin-top:6px;font-size:14.5px;color:var(--muted)}
.case:hover h3{color:var(--accent)}

/* case studies listing page */
.csgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px}
.csgrid .case-cover{aspect-ratio:4/3}
.csgrid .case-cover.has-img::before{display:none}
@media (max-width:960px){.csgrid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.csgrid{grid-template-columns:minmax(0,1fr)}}

/* CMS content: article (blog/news) + case study pages */
.art-chip{display:inline-block;font:600 12.5px var(--body);padding:8px 16px;border-radius:99px;background:var(--accent);color:#fff;letter-spacing:.02em;margin-bottom:20px}
.art-tags{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.art-tags a{font-weight:600;font-size:14.5px;color:var(--muted);text-decoration:none}
.art-tags a:hover{color:var(--accent)}

/* case study detail: hero meta card + stats band */
.csmeta-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.csmeta-tags span{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:99px;background:var(--soft);color:var(--accent)}
.csstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.csstats>div{background:var(--ink);color:#fff;border-radius:20px;padding:clamp(22px,3vw,34px);position:relative;overflow:hidden;isolation:isolate}
.csstats>div::after{content:"";position:absolute;z-index:-1;right:-50px;bottom:-70px;width:180px;height:180px;border-radius:50%;border:2px solid rgba(237,50,35,.4);outline:2px solid rgba(237,50,35,.15);outline-offset:22px}
.csstats b{display:block;font-family:var(--display);font-size:clamp(30px,3.4vw,44px);font-weight:800;line-height:1;color:var(--accent)}
.csstats span{display:block;margin-top:10px;font-size:14px;color:#C9C5C1}
@media (max-width:560px){.csstats{grid-template-columns:1fr 1fr}}

/* hero: stacked, editorial, wide cover overlapping the bottom */
.art-chip{margin-bottom:22px}

/* case study layout */
.csstats>div{border-radius:22px}

/* Case study detail (case-study.php) + listing cards (case-studies.php) */
.cs-ph .ph-inner{padding-bottom:clamp(24px,3.5vw,44px)}
.cs-badges{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:22px}
.cs-badges .art-chip{margin-bottom:0}
.cs-ind{font:600 12.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--muted)}
.cs-ph h1{margin-top:16px}
.cs-frame{border-radius:24px;border:1px solid var(--line);background:#fff;box-shadow:0 40px 80px -50px rgba(24,24,24,.45);overflow:hidden}
.cs-frame-bar{height:40px;background:#F6F5F4;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 16px}
.cs-frame-bar i{width:10px;height:10px;border-radius:50%;background:#DAD6D2}
.cs-frame-bar i:first-child{background:var(--accent)}
.cs-frame-bar span{margin-left:10px;padding:4px 12px;border-radius:99px;background:#fff;border:1px solid var(--line);font:500 11.5px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-frame-body{position:relative;aspect-ratio:16/10;background:var(--ink);overflow:hidden}
.cs-frame-body img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.cs-frame:hover .cs-frame-body img{transform:scale(1.03)}
.cs-frame-fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:#fff;background:radial-gradient(circle at 85% 20%,rgba(237,50,35,.35),transparent 55%),var(--ink)}
.cs-frame-fallback small{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#A9A5A1}
.cs-frame-fallback b{font:800 clamp(24px,3vw,36px)/1.1 var(--display);margin-top:8px}
.cs-spec{margin:0 0 clamp(28px,4vw,44px);padding:22px 28px;border-radius:20px;background:#fff;border:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 24px}
.cs-spec>div{border-left:2px solid var(--line);padding-left:16px}
.cs-spec>div:first-child{border-left-color:var(--accent)}
.cs-spec dt{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cs-spec dd{margin:4px 0 0;font-weight:700;font-size:15.5px;overflow-wrap:anywhere}
.cs-kpi-sec{padding-bottom:0}
.cs-kpi-head{margin-bottom:24px}
.cs-kpi-head h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;margin-top:10px}
.csstats>div{display:flex;flex-direction:column}
.csstats>div small{font:500 11.5px var(--mono);color:#8A8580;letter-spacing:.1em;margin-bottom:14px}
.csstats>div.hi{background:linear-gradient(145deg,#ED3223,#B81E12)}
.csstats>div.hi b{color:#fff}
.csstats>div.hi small,.csstats>div.hi span{color:#FFD9D4}
.csstats>div.hi::after{border-color:rgba(255,255,255,.35);outline-color:rgba(255,255,255,.15)}
.cs-main{padding-top:clamp(36px,5vw,64px)}
.cs-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(32px,5vw,72px);align-items:start}
.cs-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.cs-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}
.cs-prose h2[data-step]::before{content:attr(data-step);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--accent);font:600 12px var(--mono);margin-right:12px;vertical-align:3px}
.cs-outcome{border-left:4px solid var(--accent)}
@media (max-width:960px){
  .cs-layout{grid-template-columns:minmax(0,1fr)}
  .cs-side{position:static}
}