/* =============================================================================
   SCG Case Study — single-page styling, scoped under .scg-cs.
   Full-bleed canvas so dark bands span the viewport even inside a constrained
   theme container. Ported from the SCG design system (Montserrat 400/600/800).
   ============================================================================= */

.scg-cs {
  /* tokens */
  --scg-blue: #1D73B9;
  --scg-green: #8EC74F;
  --scg-orange: #FFA300;
  --scg-tangerine: #E34325;
  --scg-tangerine-hover: #C7361B;
  --scg-graphite: #3A3A3A;
  --scg-white: #FFFFFF;
  --scg-ink-900: #1A1A1A;
  --scg-ink-500: #6B6C6E;
  --scg-ink-300: #98999B;
  --scg-ink-200: #C9CACB;
  --scg-ink-100: #E7E8E9;
  --scg-ink-50: #F4F5F6;
  --scg-blue-tint: #E8F1F8;
  --scg-green-tint: #EEF6E4;
  --scg-orange-tint: #FFF3DB;
  --text-heading: #000;
  --text-body: var(--scg-graphite);
  --text-muted: var(--scg-ink-500);
  --brand-primary: var(--scg-blue);
  --surface-page: #fff;
  --surface-subtle: var(--scg-ink-50);
  --surface-sunken: var(--scg-ink-100);
  --border-subtle: var(--scg-ink-100);
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Full-bleed: break out of any theme container, span the viewport */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;

  font-family: 'Montserrat','Helvetica Neue',Arial,sans-serif;
  color: var(--text-body);
  background: var(--surface-page);
  line-height: 1.55;
}
.scg-cs *, .scg-cs *::before, .scg-cs *::after { box-sizing: border-box; }

.scg-cs-wrap { max-width: 1100px; margin: 0 auto; padding-left: clamp(20px,5vw,32px); padding-right: clamp(20px,5vw,32px); }

/* Breadcrumb */
.scg-cs-crumb { max-width: 1100px; margin: 0 auto; padding: 18px clamp(20px,5vw,32px) 0; font-size: 13px; color: var(--text-muted); }
.scg-cs-crumb a { color: var(--text-muted); font-weight: 600; text-decoration: none; }
.scg-cs-crumb span { margin: 0 8px; }
.scg-cs-crumb .scg-cs-crumb-current { color: var(--text-body); margin: 0; }

/* Eyebrows / headings */
.scg-cs-eyebrow { display: inline-block; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-primary); }
.scg-cs-eyebrow--green { color: var(--scg-green); }
.scg-cs-h1 { font-size: clamp(32px,5vw,52px); font-weight: 800; line-height: 1.08; letter-spacing: -.01em; color: var(--text-heading); margin: 0 0 18px; max-width: 840px; }
.scg-cs-h2 { font-size: clamp(24px,3.4vw,32px); font-weight: 800; line-height: 1.18; color: var(--text-heading); margin: 12px 0 14px; }

/* Hero */
.scg-cs-hero { background: var(--surface-page); }
.scg-cs-hero .scg-cs-wrap { padding-top: clamp(28px,4vw,44px); padding-bottom: clamp(40px,5vw,56px); }
.scg-cs-hero-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.scg-cs-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--scg-ink-100); color: var(--scg-ink-500); }
.scg-cs-meta { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.scg-cs-intro { font-size: clamp(17px,2.2vw,20px); line-height: 1.55; color: var(--text-body); max-width: 680px; margin: 0 0 28px; }
.scg-cs-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Buttons */
.scg-cs-btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 26px; border-radius: var(--radius-md); font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; transition: background .12s ease; }
.scg-cs-btn--accent { background: var(--scg-tangerine); color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.scg-cs-btn--accent:hover { background: var(--scg-tangerine-hover); color: #fff; }
.scg-cs-btn--ghost { color: var(--text-body); background: transparent; padding-left: 8px; padding-right: 8px; }
.scg-cs-btn--ghost:hover { color: var(--brand-primary); }

/* Outcome stat band */
.scg-cs-stats { background: var(--scg-ink-900); }
.scg-cs-stats-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 28px; padding-top: clamp(32px,4vw,44px); padding-bottom: clamp(32px,4vw,44px); }
.scg-cs-stat-value { font-weight: 800; font-size: clamp(36px,5vw,48px); line-height: 1; color: var(--scg-white); }
.scg-cs-stat-value.is-green { color: var(--scg-green); }
.scg-cs-stat-label { font-size: 14px; color: var(--scg-ink-200); margin-top: 8px; }

/* Hero image */
.scg-cs-heroimg-wrap { padding-top: clamp(32px,4vw,48px); }
.scg-cs-heroimg { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); display: block; }

/* Narrative */
.scg-cs-narrative { background: var(--surface-page); }
.scg-cs-narrative { max-width: 740px; margin: 0 auto; padding: clamp(40px,5vw,64px) clamp(20px,5vw,32px) 0; display: flex; flex-direction: column; gap: 40px; }
.scg-cs-body { font-size: 17px; line-height: 1.65; color: var(--text-body); }
.scg-cs-body p { margin: 0 0 14px; }
.scg-cs-body p:last-child { margin-bottom: 0; }

/* Approach checklist */
.scg-cs-checklist { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.scg-cs-check { display: flex; gap: 14px; align-items: flex-start; }
.scg-cs-check-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--scg-blue-tint); color: var(--scg-blue); display: flex; align-items: center; justify-content: center; }
.scg-cs-check strong { color: var(--text-heading); }
.scg-cs-check span { color: var(--text-body); }

/* Pull quote */
.scg-cs-quote { background: var(--brand-primary); margin-top: clamp(40px,5vw,64px); }
.scg-cs-quote .scg-cs-wrap { padding-top: clamp(48px,6vw,72px); padding-bottom: clamp(48px,6vw,72px); max-width: 900px; }
.scg-cs-quote-text { font-size: clamp(22px,3vw,30px); line-height: 1.4; color: var(--scg-white); font-weight: 600; margin-bottom: 22px; }
.scg-cs-quote-who { font-weight: 700; color: var(--scg-white); font-size: 17px; }
.scg-cs-quote-ttl { color: var(--scg-green); font-size: 14px; font-weight: 600; }

/* What we built */
.scg-cs-built { background: var(--surface-subtle); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.scg-cs-built .scg-cs-wrap { padding-top: clamp(36px,4vw,52px); padding-bottom: clamp(36px,4vw,52px); }
.scg-cs-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.scg-cs-chip { font-size: 14px; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--scg-blue-tint); color: var(--brand-primary); }

/* CTA */
.scg-cs-cta { background: var(--scg-ink-900); }
.scg-cs-cta .scg-cs-wrap { max-width: 1000px; padding-top: clamp(56px,7vw,88px); padding-bottom: clamp(56px,7vw,88px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.scg-cs-cta-h { font-size: clamp(28px,4.5vw,44px); font-weight: 800; line-height: 1.12; color: var(--scg-white); margin: 0; max-width: 640px; }
.scg-cs-cta-p { font-size: 18px; line-height: 1.55; color: var(--scg-ink-200); margin: 0; max-width: 540px; }