/* ============================================================
   Case Studies — listing + individual case pages
   Inherits tokens + nav/footer/buttons from /styles.css.
   ============================================================ */

/* ---------- Footer wordmark via shared asset (inverted to near-white on black) ---------- */
.footer__mark--img img{ width:172px; height:auto; filter:brightness(0) invert(1); opacity:.9; }
@media (max-width:720px){ .footer__mark--img img{ width:150px; } }

/* ---------- Selection: white highlight on the grey stat band + quote block ---------- */
.cs-stats ::selection,
.cs-quote ::selection{ background:#ffffff; color:var(--black); }

/* ---------- Sub-nav back link (case pages) ---------- */
.cs-back{ display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-text); margin-bottom:22px; transition:color .15s ease; }
.cs-back svg{ transition:transform .18s ease; }
.cs-back:hover{ color:var(--ink); }
.cs-back:hover svg{ transform:translateX(-3px); }

/* ============================================================
   LISTING PAGE  (/case-studies/)
   instant.one pattern — metric-first cards
   ============================================================ */
.cs-list-hero{ background:var(--white); padding:clamp(40px,6vw,64px) 0 clamp(20px,3vw,32px); }
.cs-list-hero .h2{ margin-bottom:16px; }

.cs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }

.cs-card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--hairline); border-radius:16px;
  padding:30px 30px 26px; box-shadow:var(--sh-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  min-height:280px;
}
.cs-card--link:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--hairline-strong); }
.cs-card--soon{ opacity:.92; }
.cs-card__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; }
.cs-card__logo{ height:24px; width:auto; max-width:130px; object-fit:contain; filter:grayscale(1) brightness(0) opacity(0.72); }
.cs-card__tag{ font-family:var(--display); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-text); border:1px solid var(--hairline); border-radius:999px; padding:4px 10px 3px; white-space:nowrap; }
.cs-card__stat{ display:inline-flex; align-items:flex-end; font-family:var(--display); font-weight:500; font-size:clamp(30px,3.4vw,44px); line-height:.95; letter-spacing:-0.03em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cs-card__stat small{ font-size:0.6em; font-weight:500; line-height:1; margin-left:0.06em; }
.cs-card__metric{ display:block; margin-top:10px; font-family:var(--display); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-text); }
.cs-card__headline{ margin-top:16px; padding-top:16px; border-top:1px solid var(--hairline); font-size:15.5px; line-height:1.5; color:var(--ink-soft); }
.cs-card__cta{ margin-top:auto; padding-top:20px; }
.cs-card .tlink{ align-self:flex-start; }
.cs-card__soonlabel{ margin-top:auto; padding-top:20px; font-family:var(--display); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-text); }
/* full-card link overlay */
.cs-card--link .cs-cover{ position:absolute; inset:0; border-radius:16px; }

/* ============================================================
   INDIVIDUAL CASE PAGE  (/case-studies/<brand>/)
   ============================================================ */
.cs-hero{ background:var(--white); padding:clamp(28px,4vw,44px) 0 clamp(36px,5vw,56px); border-bottom:1px solid var(--hairline); }
.cs-hero__logo{ height:34px; width:auto; max-width:180px; object-fit:contain; filter:grayscale(1) brightness(0) opacity(0.82); margin-bottom:26px; }
.cs-hero__eyebrow{ margin-bottom:20px; }
.cs-hero__title{ font-family:var(--display); font-weight:500; font-size:clamp(32px,4.4vw,52px); line-height:1.3; letter-spacing:-0.028em; color:var(--black); max-width:24ch; margin:0 0 20px; text-wrap:balance; }
.cs-hero__sub{ font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--ink-soft); max-width:60ch; margin:0 0 30px; text-wrap:pretty; }
.cs-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.cs-chip{ font-family:var(--display); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); background:var(--grey); border:1px solid var(--hairline); border-radius:999px; padding:7px 13px 6px; }

/* Opt-in hero with a square brand image on the right — fills the top-right space.
   Only pages with .cs-hero--media + .cs-hero__grid markup get the two-column layout,
   so other case pages are unaffected. Collapses to a single column ≤820px. */
.cs-hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,32vw,420px); gap:clamp(28px,4vw,56px); align-items:center; }
.cs-hero__main{ min-width:0; }
.cs-hero--media .cs-hero__logo{ margin-bottom:22px; }
.cs-hero__media{ margin:0; }
.cs-hero__media img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; border:1px solid var(--hairline); }
@media (max-width:820px){
  .cs-hero__grid{ grid-template-columns:1fr; gap:clamp(22px,6vw,30px); }
  .cs-hero__media{ max-width:440px; }
}

/* stat band — 4-up on one line (desktop), 2×2 on mobile; hairline-gap dividers */
.cs-stats{ background:var(--grey); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.cs-stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); }
.cs-stat{ background:var(--grey); padding:clamp(26px,3.6vw,42px) clamp(14px,1.8vw,26px); font-variant-numeric:tabular-nums; }
.cs-stat__num{ display:flex; align-items:baseline; font-family:var(--display); font-weight:500; font-size:clamp(20px,2.7vw,34px); line-height:1; letter-spacing:-0.03em; color:var(--ink); white-space:nowrap; }
/* Unit suffix (×, K, %) reads as part of the figure, not a tiny detached
   superscript. 0.82em + baseline alignment keeps "$22K" / "7%" / "3×"
   feeling like one number, matching the full-size "M" in "$4.7M → $15M". */
.cs-stat__num small{ font-size:0.82em; font-weight:500; line-height:1; margin-left:0.04em; }
.cs-stat__cap{ display:block; margin-top:12px; font-family:var(--display); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--grey-text); line-height:1.4; }

/* Press-mention stat cell — real outlet wordmarks instead of a text stat, so
   the feature reads as recognizable press logos, not a typed-out claim.
   Monochrome ink (matches the bold stat numbers beside it; solid, not the
   faded .5-opacity treatment used for the homepage partner strip, since here
   it needs to hold its own as the 4th "number"). */
.cs-stat__logos{ display:flex; align-items:center; flex-wrap:wrap; gap:clamp(14px,1.8vw,22px); height:clamp(20px,2.7vw,34px); }
.cs-stat__logos img{ display:block; width:auto; height:100%; filter:brightness(0); }
.cs-stat__logos .plogo--forbes{ height:85%; }
.cs-stat__logos .plogo--inc{ height:64%; }

/* ---------- Body prose, lists, moves, chart card ----------
   The reading system itself (column width, type scale, rhythm, and the
   .cs-block / .cs-list / .cs-move / .cs-chart__* primitives) lives in the
   SHARED /content.css so case studies and blog stay one system. Only the
   section backgrounds live here. */
.cs-body{ background:var(--white); }
.cs-chart{ background:var(--grey); }

/* full-width photo "moment" band — same grey band + left edge as the chart.
   Image caps to the shared reading width so it aligns with the body left edge. */
.cs-photo{ background:var(--grey); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.cs-photo__fig{ max-width:var(--band-wide); margin:0; }
.cs-photo__img{ display:block; width:100%; height:auto; border-radius:16px; border:1px solid var(--hairline); }
.cs-photo__cap{ margin-top:14px; font-family:var(--display); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--grey-text); }

/* pull-quote block (case pages) — full-width grey band, its own moment */
.cs-quote{ background:var(--grey); border-top:1px solid var(--hairline); }
/* Left-aligned to the shared left edge, widened to fill the grey band like the
   chart (a narrow 820 block left a big empty grey gap on the right at wide
   viewports). The Becky quote is long enough to fill the wider measure. */
.cs-quote__inner{ max-width:var(--band-wide); margin:0; }
.cs-quote__mark{ font-family:var(--serif); font-size:56px; line-height:.5; color:var(--orange); margin-bottom:20px; }
.cs-quote__body{ margin:0 0 26px; }
.cs-quote__body p{ font-family:var(--display); font-weight:500; font-size:clamp(21px,2.4vw,30px); line-height:1.38; letter-spacing:-.018em; color:var(--ink); margin:0; }
.cs-quote__foot{ display:flex; align-items:center; gap:13px; }
.cs-quote__avatar{ width:42px; height:42px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--display); font-size:14px; flex:none; }
/* Real cleared headshot, same treatment as the homepage testimonial (round,
   cover-cropped). Slightly larger than the initials chip to give the photo presence. */
.cs-quote__avatar-photo{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; }
/* Larger headshot treatment (opt-in per page) — 48px read too small in the wide desktop band. */
.cs-quote--feature .cs-quote__avatar-photo{ width:66px; height:66px; }
.cs-quote--feature .cs-quote__foot{ gap:16px; }
.cs-quote__name{ font-family:var(--sans); font-weight:700; font-size:15px; line-height:1.2; color:var(--ink); }
.cs-quote__role{ font-size:13.5px; color:var(--grey-text); margin-top:1px; }

@media (max-width:720px){
  .cs-stats__grid{ grid-template-columns:1fr 1fr; }   /* 2×2, gap-hairline draws the dividers */
  .cs-card{ padding:24px 22px 22px; min-height:0; }
}