/* ============================================================================
   Case Stories INDEX (/case-stories/) - page-specific styles.
   Loaded ONLY on this page (via ServiceLayout head slot). Every selector is
   namespaced cs-* and/or scoped under .cs so it cannot collide with the frame
   (.card/.chip/.tag/.hero already exist in styles.css / service-v3.css).
   Colors + faces come from the LOCKED tokens (styles.css :root); radii/shadows
   are inlined to match the v3 mock without depending on tokens that may not exist.
   Reuses locked .wrap .band .btn .eyebrow .num .reveal .section-head as-is.
   ========================================================================== */

.cs { --cs-r: 15px; --cs-r-lg: 24px;
  --cs-sh-sm: 0 2px 10px rgba(20,33,61,.05);
  --cs-sh-md: 0 16px 40px -16px rgba(20,33,61,.18);
  --cs-sh-lg: 0 40px 90px -30px rgba(20,33,61,.34);
}

/* ============ hero ============ */
.cs-hero { padding: 72px 0 48px; }
.cs-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); max-width: 17ch; margin: 16px 0 20px; }
.cs-hero p { font-size: 1.2rem; color: var(--muted); max-width: 56ch; line-height: 1.6; }

/* two-column hero: copy left, the 3 aggregate stats right (fills what was empty space).
   Desktop = grid; mobile = single column (copy, then stats) - see breakpoint below. */
.cs-hero-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 56px; align-items: start; }
.cs-hero-copy p { margin-bottom: 0; }
/* the stat column: ONE compact, top-aligned unit (no dividers) sitting beside the headline -
   tight number+label pairs, even rhythm, top-aligned with the copy block (align-items:start). */
/* aggregate stats sit in a single contained panel (bone card + dividers) so the
   numbers read as a designed block, not floating text. Matches the card pattern
   used across the site (bone-card surface, --line border, soft shadow). */
.cs-hero-stats { display: flex; flex-direction: column; gap: 0; margin-top: 6px;
  background: var(--bone-card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden; }
.cs-hstat { display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 20px 26px; position: relative; }
.cs-hstat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--coral); opacity: 0; transition: opacity .2s ease; }
.cs-hstat:hover::before { opacity: 1; }
.cs-hstat + .cs-hstat { border-top: 1px solid var(--line); }
.cs-hstat-n { font-family: var(--mono); font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 600;
  letter-spacing: -.04em; line-height: 1; color: var(--ink); flex-shrink: 0; }
.cs-hstat-n .u { color: var(--coral-deep); margin-left: 1px; }
.cs-hstat-l { font-size: .9rem; color: var(--muted); line-height: 1.3; text-align: right;
  font-family: var(--mono); letter-spacing: .01em; text-transform: uppercase; max-width: 12ch; }
@media (max-width: 860px) {
  .cs-hero-grid { grid-template-columns: 1fr; gap: 34px; align-items: start; }
  .cs-hero-stats { max-width: 460px; }
}

/* ============ featured teaser ============ */
/* bottom padding tightened (was 60px) so the gap to the next section ("Every account,
   every number.") matches the page's normal section rhythm - paired with .cs-browse top. */
.cs-featured { padding: 8px 0 28px; }
.cs-feat-card { background: var(--coral-deep); border-radius: var(--cs-r-lg); padding: 14px;
  box-shadow: var(--cs-sh-lg); display: grid; grid-template-columns: 1.05fr .95fr; gap: 14px; }
.cs-feat-l { background: var(--ink); color: var(--on-dark); border-radius: 18px; padding: 44px;
  display: flex; flex-direction: column; justify-content: center; }
.cs-feat-client { font-family: var(--mono); font-size: .9rem; color: var(--on-dark-mut); margin: 18px 0 6px; }
.cs-feat-l h2 { color: var(--on-dark); font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin-bottom: 20px; max-width: 18ch; }
.cs-feat-supp { color: var(--on-dark-mut); font-size: 1.02rem; line-height: 1.6; margin-bottom: 26px; max-width: 46ch; }
.cs-feat-l .btn { align-self: flex-start; }

/* right side = self-sufficient scoreboard (no dependency on the photo) */
.cs-feat-r { background: var(--paper); border-radius: 18px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; padding: 40px; min-height: 380px; }
.cs-score-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.cs-score-ey { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2); display: block; white-space: nowrap; }
.cs-from-zero { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--coral-deep);
  background: rgba(216,80,47,.1); border: 1px solid rgba(216,80,47,.32); border-radius: 100px;
  padding: 5px 12px; white-space: nowrap; }
/* framed packshot accent - the frame itself shows even if the image is missing (never a void) */
.cs-accent { width: 88px; height: 88px; flex-shrink: 0; border-radius: 13px; border: 1px solid var(--line);
  background: repeating-linear-gradient(135deg, var(--paper) 0 9px, var(--bone-2) 9px 18px);
  display: flex; align-items: center; justify-content: center; padding: 6px; box-shadow: var(--cs-sh-sm);
  overflow: hidden; }
.cs-accent img { width: 100%; height: 100%; object-fit: contain; }
.cs-score-hero { margin-bottom: 22px; }
.cs-sh-v { font-family: var(--mono); font-size: clamp(3.4rem, 6.2vw, 4.7rem); font-weight: 600;
  letter-spacing: -.05em; line-height: .86; color: var(--coral-deep); display: block; }
.cs-sh-l { font-size: 1.04rem; color: var(--muted); margin-top: 12px; display: block; }
.cs-bars { display: flex; align-items: flex-end; gap: 7px; height: 56px; margin-bottom: 24px; }
.cs-bars i { flex: 1; background: var(--coral); border-radius: 4px 4px 0 0; opacity: .92; }
.cs-micro { display: flex; border-top: 1px solid var(--line); padding-top: 18px; }
.cs-micro div { flex: 1; padding: 0 16px; border-left: 1px solid var(--line); }
.cs-micro div:first-child { padding-left: 0; border-left: none; }
.cs-micro b { font-family: var(--mono); font-size: 1.18rem; font-weight: 600; color: var(--ink);
  letter-spacing: -.02em; display: block; }
.cs-micro span { font-size: .78rem; color: var(--muted); margin-top: 4px; display: block; line-height: 1.35; }
@media (max-width: 860px) { .cs-feat-card { grid-template-columns: 1fr; } .cs-feat-r { min-height: 0; } }

/* ============ filter + grid ============ */
.cs-browse { padding: 30px 0 30px; }
.cs-filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 30px; }
.cs-chip { font-family: var(--body); font-weight: 600; font-size: .92rem; border-radius: 100px;
  padding: 9px 17px; cursor: pointer; border: 1.5px solid var(--line); background: var(--bone-card);
  color: var(--ink); transition: all .16s; }
.cs-chip:hover { border-color: var(--coral); }
.cs-chip.is-active { background: var(--coral); color: var(--on-dark); border-color: transparent;
  box-shadow: 0 8px 20px -10px rgba(216,80,47,.5); }

.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; grid-auto-rows: 1fr; }
@media (max-width: 980px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cs-grid { grid-template-columns: 1fr; } }

.cs-card { background: var(--bone-card); border: 1px solid var(--line); border-radius: var(--cs-r);
  padding: 24px; display: flex; flex-direction: column; box-shadow: var(--cs-sh-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s, opacity .2s ease;
  position: relative; min-height: 340px; color: var(--ink); }
.cs-card:hover { transform: translateY(-4px); box-shadow: var(--cs-sh-md); border-color: rgba(216,80,47,.4); }
.cs-card.cs-hide { display: none; }
.cs-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
/* logo slot - fixed 24x120 box so every logo (wide wordmark or square mark) sits in the
   same footprint and cannot shift layout (zero CLS), left-aligned, vertically centered. */
.cs-logo { height: 24px; max-width: 120px; display: flex; align-items: center; }
.cs-logo-img { height: 24px; max-width: 120px; width: auto; object-fit: contain; object-position: left center;
  /* logos render in their own colors (no ink flattening) */
  opacity: .95; transition: opacity .2s ease; }
.cs-card:hover .cs-logo-img { opacity: 1; }
/* fallback (missing asset): the client name as an ink wordmark in the same box */
.cs-logo-wordmark { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
  color: var(--ink); line-height: 24px; white-space: nowrap; }
.cs-logo-nda { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; }
.cs-logo-nda svg { color: var(--muted-2); flex-shrink: 0; }
.cs-card-arrow { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line);
  display: grid; place-items: center; color: var(--muted-2); transition: all .2s; flex-shrink: 0; }
.cs-card:hover .cs-card-arrow { background: var(--coral); color: var(--on-dark); border-color: transparent; transform: translate(2px,-2px); }
.cs-ind-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cs-ind { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); }
.cs-period { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--muted-2); opacity: .8; flex-shrink: 0; }
.cs-card-h { font-size: 1.45rem; margin: 5px 0 8px; }
/* blurb clamped to 3 lines so a long description cannot push one card taller than its
   row-mates (the grid equalizes row height); keeps the description block uniform. */
.cs-blurb { color: var(--muted); font-size: .96rem; line-height: 1.5; margin-bottom: 18px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* The result group (hero stat + supp + tags) is BOTTOM-anchored: margin-top:auto on the
   hero stat eats the slack between the description and the results, so every card's coral
   headline and tag row line up across a row instead of leaving a dead gap mid-card. */
.cs-hero-stat { font-size: 1.62rem; font-weight: 600; letter-spacing: -.03em; color: var(--coral-deep); line-height: 1.05; margin-top: auto; margin-bottom: 14px; }
/* qualitative: clearly NOT a number - ink display phrase under a label */
.cs-hero-qual { margin-top: auto; margin-bottom: 14px; }
.cs-hq-ey { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); display: block; margin-bottom: 7px; }
.cs-hq-text { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 1.18rem; letter-spacing: -.015em; color: var(--ink); line-height: 1.15; }
.cs-hq-text svg { color: var(--coral-deep); flex-shrink: 0; }
.cs-supp { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.cs-supp-line { font-size: .86rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.cs-supp-line::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); flex-shrink: 0; }
/* verified / trust lines: seal + label, never mono numerals */
.cs-vrf { font-family: var(--body); font-size: .86rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.cs-vrf svg { color: var(--coral-deep); flex-shrink: 0; }
.cs-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.cs-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--ink); background: var(--bone); border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; white-space: nowrap; }

/* Pagination. Page-1 view shows the 9 page-1 cards; the page-2 cards (NASB trio +
   WonderSkin) are server-rendered into the same grid but hidden by default so the page-1
   DOM stays the canonical full list the filter can search across. JS reveals them only
   when a filter is active (see the index inline script); with JS off the pager links to
   the real /case-stories/page/2/ route. */
.cs-card.cs-pg2-hidden { display: none; }
.cs-pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 40px; }
.cs-pager.cs-pager-hidden { display: none; }
.cs-pg { font-family: var(--mono); font-size: 13px; min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
  border: 1px solid var(--line); color: var(--ink); background: var(--bone-card); text-decoration: none;
  transition: border-color .2s, color .2s, background .2s, transform .2s; }
a.cs-pg:hover { border-color: rgba(216,80,47,.5); color: var(--coral-deep); transform: translateY(-2px); }
.cs-pg.is-active { background: var(--coral); border-color: transparent; color: var(--on-dark); cursor: default; }
.cs-pg-arrow { gap: 6px; }
.cs-pg-arrow svg { width: 14px; height: 14px; }

/* Proof bar (F8): the "Trusted by" logos use the SHARED grayscale -> full-colour + scale
   hover from service-v3.css (the homepage / service-page pattern). No page-scoped override
   here - the earlier monochrome-ink override left them black on hover, which Igor flagged. */

/* ===== polish (a73ce4f -> next) - page-scoped, this stylesheet loads only on /case-stories/ ===== */

/* 1. Debox the 3 hero proof stats: drop the card bg/border/shadow so they read as clean
   inline stats matching the unboxed logo row. Service pages + homepage keep their boxed
   .pb-stat treatment (they never load this stylesheet). Number/label + grid spacing kept. */
.proofbar .pb-stat { background: transparent; border: none; box-shadow: none; padding: 4px 14px; }

/* 2. Soften the logo-less fallback wordmark so it stops echoing the bold client name below
   it. Smaller + lighter + muted = a quiet mark, not a second headline. Real-logo cards
   (<img>) and the NDA lock (.cs-logo-nda) are explicitly excluded -> unchanged. */
.cs-logo-wordmark:not(.cs-logo-nda) { font-weight: 600; font-size: .85rem; color: var(--muted); letter-spacing: 0; }

/* ===== hero-stats move (CC tweak) - page-scoped (this stylesheet loads only here) ===== */

/* 3. The 3 aggregate stats now live in the hero (heroStats), so the proof bar renders the
   TRUSTED BY label + logo row only. ProofBar still emits an empty .pb-stats wrapper - hide
   it so it leaves no spacing. Shared ProofBar component is untouched. */
.proofbar .pb-stats { display: none; }

/* 4. Bigger TRUSTED BY: the proof-bar eyebrow was fine-print small. Bump size + weight and
   lift it off muted so it reads as a real section label (keeps the mono/letter-spaced eyebrow
   style). Scoped to .proofbar .pb-eye on this page only -> other pages' proof bars unchanged. */
.proofbar .pb-eye { font-size: 14px; font-weight: 600; letter-spacing: .16em; color: var(--muted); opacity: 1; }