/* ============================================================
   cases.css — the case-study ledger.

   Shared by /results (public proof page) and /thank-you (shown in
   full to people who already booked). Both pages render the same
   markup, so the styling lives here rather than being copied into
   each page's <style> block and drifting apart.

   Page chrome (heroes, closing CTAs, footers) stays in the pages.
   ============================================================ */

/* band heading that splits the ledger into verticals */
.res-band{padding:18px 0 8px}
.res-band .bandhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,0.10);padding-bottom:22px;margin-bottom:30px}
.res-band h2.bt{font-family:var(--display);font-weight:600;font-optical-sizing:auto;font-variation-settings:'opsz' 32;font-size:clamp(28px,3.6vw,46px);letter-spacing:-0.035em;line-height:1;color:#fff}
.res-band h2.bt em{font-family:var(--serif);font-style:italic;font-weight:400;font-variation-settings:normal;color:var(--gold)}
.res-band .bandsub{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--w50);max-width:340px;text-align:right;line-height:1.7}
@media(max-width:680px){.res-band .bandsub{text-align:left}}

/* case card with an image slot */
.rcase{border-radius:1.5rem;overflow:hidden;margin-bottom:18px}
.rcase-grid{display:grid;grid-template-columns:1fr}
@media(min-width:940px){.rcase-grid{grid-template-columns:1.04fr 0.96fr}}
.rcase-l{padding:34px 34px 32px}
.rcase-media{padding:28px;display:flex;align-items:center;justify-content:center;border-top:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.02)}
@media(min-width:940px){.rcase-media{border-top:none;border-left:1px solid rgba(255,255,255,0.10)}}
.rcase-media img{max-width:100%;max-height:440px;width:auto;height:auto;border-radius:0.7rem;display:block;box-shadow:0 14px 34px rgba(0,0,0,0.45)}
.rcase-foot{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.10)}
.rcase .ctop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.rcase h3{font-family:var(--serif);font-style:normal;font-weight:400;font-size:clamp(28px,3.4vw,40px);letter-spacing:-1px;color:#fff;margin-top:12px}

/* lede — the number lands before any prose */
.rlede{padding-bottom:22px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.10)}
.rlede .rlv{font-family:var(--display);font-weight:600;font-optical-sizing:auto;font-variation-settings:'opsz' 32;font-size:clamp(46px,7vw,84px);letter-spacing:-0.045em;line-height:0.92;color:#fff}
.rlede .rlv sup{font-size:0.34em;color:var(--gold);vertical-align:super;font-style:normal;font-family:var(--body);margin-left:0.08em}
.rlede .rll{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);margin-top:14px;line-height:1.55;max-width:420px}
.rcase .rid{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.rcase .rid h3{font-size:clamp(22px,2.4vw,28px);margin-top:0}
.rstory{font-size:14.5px;font-weight:300;color:var(--w90);line-height:1.62;margin-top:14px}
.rstory b{color:#fff;font-weight:500}

/* full breakdown, folded away until asked for */
.rmore{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.10)}
.rmore summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--w50);display:flex;align-items:center;gap:10px;transition:.15s}
.rmore summary::-webkit-details-marker{display:none}
.rmore summary:hover{color:var(--gold)}
.rmore summary .pm{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold);line-height:1;transition:.2s}
.rmore[open] summary .pm{transform:rotate(45deg)}

.ba{display:grid;gap:22px;margin-top:22px}
.ba-block .bah{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.ba-block.before .bah{color:var(--w50)}
.ba-block.solution .bah{color:var(--gold)}
.ba-block .bah::after{content:"";flex:1;height:1px;background:rgba(255,255,255,0.10)}
.ba-list{list-style:none;display:grid;gap:9px}
.ba-list li{font-size:13.5px;font-weight:300;color:var(--w90);line-height:1.5;padding-left:20px;position:relative}
.before .ba-list li::before{content:"\2014";position:absolute;left:0;color:var(--w30)}
.solution .ba-list li::before{content:"+";position:absolute;left:0;color:var(--gold);font-family:var(--mono)}

/* metric tiles */
.rmetrics{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 16px}
.rmetrics.cols4{grid-template-columns:repeat(2,1fr)}
@media(min-width:520px){.rmetrics.cols4{grid-template-columns:repeat(4,1fr)}}
.rm{display:flex;flex-direction:column;gap:7px}
.rm .rmv{font-family:var(--display);font-style:normal;font-weight:600;font-optical-sizing:auto;font-variation-settings:'opsz' 32;font-size:clamp(26px,3vw,34px);letter-spacing:-0.03em;color:#fff;line-height:1.05}
.rm .rmv sup{font-size:0.42em;color:var(--gold-dim);vertical-align:super;font-style:normal;font-family:var(--body);margin-left:0.12em}
.rm .rmv.muted{color:var(--w30);font-size:clamp(20px,2.4vw,26px)}
.rm .rml{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:0.08em;text-transform:uppercase;color:var(--w50);line-height:1.5}
.rmetrics-head{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:2px;display:flex;align-items:center;gap:9px}
.rmetrics-head::after{content:"";flex:1;height:1px;background:rgba(255,255,255,0.10)}
.rmetrics-wrap{display:flex;flex-direction:column;gap:14px}

/* the compact grid reuses glass.css .case / .ccard / .case-grid */

/* numbers in Inter display */
.statbar .sb .v,
.case.feat .big-metric,
.case.feat .fr-grid .mv,
.case .metrics .mv,
.ccard .cmv{
  font-family:var(--display);
  font-style:normal;
  font-weight:600;
  font-optical-sizing:auto;
  font-variation-settings:'opsz' 32;
  letter-spacing:-0.03em;
}

/* pill used inside the folded breakdown for NDA'd figures */
.ocpill{align-self:flex-start;font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);border:1px solid oklch(0.72 0.055 85 / 0.4);border-radius:9999px;padding:6px 13px}

/* inline proof screenshot */
.proofshot{margin-top:2px;border-radius:0.8rem;overflow:hidden}
.proofshot img{width:100%;height:auto;display:block}
.proofcap{font-family:var(--mono);font-size:10px;letter-spacing:0.04em;color:var(--w50);margin-top:11px;line-height:1.55}
.proofcap b{color:var(--gold-dim);font-weight:500}

/* wins wall (masonry) */
.wins{columns:1;column-gap:16px}
@media(min-width:620px){.wins{columns:2}}
@media(min-width:1000px){.wins{columns:3}}
.wincard{break-inside:avoid;margin-bottom:16px;border-radius:1.1rem;padding:12px;width:100%}
.wincard img{width:100%;height:auto;border-radius:0.6rem;display:block}
.wincard .wc{font-size:12.5px;font-weight:300;color:var(--w70);line-height:1.55;padding:13px 8px 5px}
.wincard .wc b{color:var(--gold-dim);font-weight:500;text-transform:uppercase;letter-spacing:0.1em;font-size:9.5px;display:block;margin-bottom:6px;font-family:var(--mono)}

/* other projects */
.oproj{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
@media(min-width:680px){.oproj{grid-template-columns:repeat(3,1fr)}}
.opcard{border-radius:1.25rem;padding:26px 24px;display:flex;flex-direction:column;gap:12px;min-height:0}
.opcard .opt{font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-dim)}
.opcard h4{font-family:var(--serif);font-style:normal;font-weight:400;font-size:26px;letter-spacing:-0.5px;color:#fff}
.opcard p{color:var(--w70);font-size:13px;font-weight:300;line-height:1.55}

.nda-note{color:var(--w30);font-size:12px;margin-top:22px;font-family:var(--body)}

@media(max-width:600px){
  .rcase-l{padding:24px 22px}
  .rcase-media{padding:18px 18px 22px}
  .rcase-media img{max-height:330px}
  .rmetrics,.rmetrics.cols4{grid-template-columns:repeat(2,1fr)}
}