/* ============================================================
   case-studies.html — page-specific styles only.
   All new classes are prefixed .csg- to avoid collisions with
   assets/styles.css (sitewide) and other pages' own page CSS.
   ============================================================ */

/* This page's hero has no full-bleed background visual, just copy +
   the small logo panel — the sitewide .page-hero min-height (built for
   big-visual heroes) left a large empty band below the content here,
   so it's overridden to this page's own natural content height only. */
.cs-hero{min-height:0;padding-bottom:56px}

/* service-line tag chip on each case card (decorative context label —
   NOT the filter; the flat per-case tags are the filter) */
.csg-tag{
  display:inline-flex;align-items:center;flex:none;
  font-size:.66rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;background:var(--yellow);color:var(--ink);
  white-space:nowrap;
}

/* filter bar above the case grid — flat tag chips, single row, wraps */
.csg-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.csg-filter-btn{cursor:pointer;background:var(--paper)}

/* hide filtered-out cards */
.csg-case-grid .case-card[hidden]{display:none}

/* ------------------------------------------------------------
   Hero: decorative pulsing client-logo panel (replaces the old
   data-case-metrics rotating-tile hook — this page no longer uses
   [data-case-metrics], so that assets/app.js block simply no-ops).
   ------------------------------------------------------------ */
.csg-logo-panel{
  padding:32px 24px;
}
.csg-logo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px 20px;
  align-items:center;justify-items:center;width:100%;
}
@keyframes csgLogoPulse{0%,100%{opacity:.32}50%{opacity:1}}
.csg-logo-item{
  color:var(--ink);font-weight:700;font-size:.92rem;text-align:center;
  letter-spacing:.01em;line-height:1.25;animation:csgLogoPulse 3.4s ease-in-out infinite;
}
.csg-logo-item.lg-caps{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.csg-logo-item.lg-sub{display:flex;flex-direction:column;gap:2px}
.csg-logo-item.lg-sub small{font-size:.58rem;font-weight:700;letter-spacing:.14em;color:var(--mut);text-transform:uppercase}
.csg-logo-item.lg-serif{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:1.12rem;letter-spacing:.01em}
.csg-logo-item.lg-stack{display:flex;flex-direction:column;gap:1px}
.csg-logo-item.lg-stack small{font-size:.66rem;font-weight:400;color:var(--mut)}
.csg-logo-item.lg-lower{text-transform:lowercase;font-weight:800;font-size:1.08rem}
.csg-logo-item.lg-tight{letter-spacing:-.01em;font-weight:800}
.csg-logo-item.lg-wide{letter-spacing:.1em;font-weight:650;font-size:.8rem}
.csg-logo-item.lg-arabic{display:flex;flex-direction:column;gap:3px}
.csg-logo-item.lg-arabic .ar{font-size:.8rem;font-weight:500;color:var(--mut);direction:rtl}
@media(max-width:900px){.csg-logo-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.csg-logo-item{animation:none;opacity:1}}

/* ------------------------------------------------------------
   Case library cards: whole card is a link to case-<id>.html
   ------------------------------------------------------------ */
.csg-case-card-link{
  display:flex;flex-direction:column;height:100%;color:inherit;
  text-decoration:none;
}
.csg-case-card-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.csg-case-thumb{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--bone);
}
.csg-case-card-link .case-tags{margin-top:0}
.csg-case-cta{
  margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:.86rem;color:var(--ink);
}
.csg-case-card-link:hover .csg-case-cta{text-decoration:underline}

/* ------------------------------------------------------------
   "The Numbers Behind the Work" — full-bleed dark section
   (section-ink on-dark), laid out as a left/right split: heading +
   trusted-by on the left, the 2x2 stat grid on the right. The left
   column gets the larger share so the heading and the brand list
   each fit on one line.
   ------------------------------------------------------------ */
.csg-footprint-grid{
  display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;
}
.csg-footprint-heading{
  margin-bottom:20px;font-size:clamp(1.4rem,2.4vw,1.9rem);white-space:nowrap;
}
.csg-footprint-band .company-stats{
  background:transparent;padding:0;
  grid-template-columns:repeat(2,1fr);gap:28px 32px;
}
/* "Trusted by" — plain lead-in text, not a kicker: no accent color,
   no dash, no divider line above it. */
.csg-trust-plain{background:transparent;padding:0}
.csg-trust-plain .trust-label{
  font-size:.86rem;font-weight:500;letter-spacing:normal;text-transform:none;
  color:var(--mut-dark);display:block;margin-bottom:10px;
}
.csg-trust-plain .trust-label::before{content:none}
.csg-trust-plain .trust-names{
  flex-wrap:nowrap;white-space:nowrap;justify-content:flex-start;gap:0;
}
.csg-trust-plain .trust-names strong{font-size:.92rem;white-space:nowrap}
.csg-trust-plain .trust-names i{margin:0 9px}

@media(max-width:1240px){
  .csg-footprint-heading{white-space:normal}
  .csg-trust-plain .trust-names{flex-wrap:wrap;white-space:normal}
  .csg-trust-plain .trust-names strong{white-space:normal}
}

/* "See More Case Studies" prototype control */
.csg-see-more{display:flex;justify-content:center;margin-top:8px}

/* toast shown on "See More" click */
.csg-toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);
  background:var(--ink);color:var(--paper);padding:14px 22px;border-radius:999px;
  font-size:.86rem;font-weight:550;line-height:1.4;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);
  z-index:1200;max-width:min(92vw,440px);text-align:center;
}
.csg-toast.csg-toast-visible{opacity:1;transform:translate(-50%,0)}

@media(max-width:820px){
  .csg-footprint-grid{grid-template-columns:1fr;gap:36px}
  .csg-footprint-band .company-stats{grid-template-columns:1fr 1fr}
}