/* ──────────────────────────────────────────────────────────────────────────
   FutureProof — Case Study Template
   Shared styles across all case study detail pages.
   Per-page theming via CSS custom properties on .cst-scope:
     --cst-hero-bg      (hero section background)
     --cst-hero-text    (hero title color)
     --cst-accent       (dots, section labels, tag pills, step 01 number, impact card)

   Defaults match the Preamble AI theme.
   ────────────────────────────────────────────────────────────────────────── */

.cst-scope {
  --cst-hero-bg:    #0A1020;
  --cst-hero-text:  #FFFFFF;
  --cst-accent:     #FF5B35;

  background: #FFFFFF;
  overflow-x: auto;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cst-page {
  width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  box-sizing: border-box;
  overflow: clip;
}
.cst-page *, .cst-page *::before, .cst-page *::after { box-sizing: border-box; }
.cst-page img { max-width: 100%; display: block; }
.cst-page a { color: inherit; text-decoration: none; }

/* ── BACKGROUNDS ── */
.cst-bg-navy   { background: #0A1020; }
.cst-bg-cream  { background: #F4F1EC; }
.cst-bg-white  { background: #FFFFFF; }
.cst-bg-hero   { background: var(--cst-hero-bg); }
.cst-bg-accent { background: var(--cst-accent); }

/* ── TEXT COLOR ── */
.cst-hero-text { color: var(--cst-hero-text); }
.cst-accent    { color: var(--cst-accent); }
.cst-white     { color: #FFFFFF; }
.cst-ink       { color: #0A1020; }
.cst-dark      { color: #1C2436; }
.cst-mid       { color: #4B5366; }
.cst-muted     { color: #7A8499; }
.cst-silver    { color: #C7CDD9; }

/* ── LAYOUT ── */
.cst-section { display: flex; flex-direction: column; padding: 120px; }

/* ── TYPOGRAPHY ── */
.cst-mono {
  font-family: "Space Mono", ui-monospace, monospace;
  font-weight: 700; font-size: 11px; line-height: 14px;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.cst-mono-md {
  font-family: "Space Mono", ui-monospace, monospace;
  font-weight: 700; font-size: 12px; line-height: 16px;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.cst-mono-sm {
  font-family: "Space Mono", ui-monospace, monospace;
  font-weight: 700; font-size: 11px; line-height: 14px;
  letter-spacing: 0.18em; text-transform: uppercase;
}

.cst-display-xl { font-family: "Fraunces", Georgia, serif; font-size: 160px; font-style: italic; font-weight: 500; letter-spacing: -0.035em; line-height: 0.95; }
.cst-display-lg { font-family: "Fraunces", Georgia, serif; font-size: 72px;  font-weight: 500; letter-spacing: -0.025em; line-height: 1.0; }
.cst-display-md { font-family: "Fraunces", Georgia, serif; font-size: 64px;  font-weight: 500; letter-spacing: -0.025em; line-height: 1.0; }
.cst-display-sm { font-family: "Fraunces", Georgia, serif; font-size: 48px;  font-weight: 500; letter-spacing: -0.02em;  line-height: 1.05; }
.cst-display-xs { font-family: "Fraunces", Georgia, serif; font-size: 42px;  font-weight: 500; letter-spacing: -0.02em;  line-height: 1.10; }

.cst-stat-num   { font-family: "Fraunces", Georgia, serif; font-size: 72px;  font-style: italic; font-weight: 500; letter-spacing: -0.03em; line-height: 1.0; }
.cst-impact-num { font-family: "Fraunces", Georgia, serif; font-size: 80px;  font-style: italic; font-weight: 500; letter-spacing: -0.03em; line-height: 0.9; }
.cst-step-num   { font-family: "Fraunces", Georgia, serif; font-size: 120px; font-style: italic; font-weight: 500; letter-spacing: -0.04em; line-height: 0.9; }

.cst-body-xl      { font-family: "Inter", system-ui, sans-serif; font-size: 28px; font-weight: 300; letter-spacing: -0.01em; line-height: 1.4; }
.cst-body-lg      { font-family: "Inter", system-ui, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.55; }
.cst-body-md      { font-family: "Inter", system-ui, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.65; }
.cst-body         { font-family: "Inter", system-ui, sans-serif; font-size: 18px; font-weight: 400; line-height: 1.55; }
.cst-body-hero    { font-family: "Inter", system-ui, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.5; }
.cst-body-sm      { font-family: "Inter", system-ui, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.65; }
.cst-body-xs      { font-family: "Inter", system-ui, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.6; }
.cst-body-note    { font-family: "Inter", system-ui, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.6; }
.cst-body-step    { font-family: "Inter", system-ui, sans-serif; font-size: 19px; font-weight: 400; line-height: 1.65; }
.cst-body-step-sm { font-family: "Inter", system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; }

.cst-pullquote { font-family: "Fraunces", Georgia, serif; font-size: 48px; font-style: italic; font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
.cst-pull-mark { font-family: "Fraunces", Georgia, serif; font-size: 180px; font-style: italic; font-weight: 500; line-height: 0.8; }
.cst-callout   { font-family: "Fraunces", Georgia, serif; font-size: 28px; font-style: italic; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; }

/* ── RULES ── */
.cst-rule-top-light    { border-top: 1px solid rgba(255,255,255,0.15); }
.cst-rule-top-dark     { border-top: 1px solid rgba(10,16,32,0.15); }
.cst-rule-bottom-light { border-bottom: 1px solid rgba(255,255,255,0.10); }
.cst-rule-bottom-dark  { border-bottom: 1px solid rgba(10,16,32,0.15); }

/* ── HERO ── */
.cst-hero {
  background: var(--cst-hero-bg);
  display: flex; flex-direction: column;
  gap: 72px;
  padding: 72px 120px 96px;
}
.cst-hero-topbar { display: flex; align-items: center; justify-content: space-between; }
.cst-hero-tag { display: flex; align-items: center; gap: 12px; }
.cst-dot-accent { width: 8px; height: 8px; border-radius: 999px; background: var(--cst-accent); flex-shrink: 0; }
.cst-hero-title-block { display: flex; flex-direction: column; gap: 40px; max-width: 1100px; }
.cst-hero-subtitle { max-width: 820px; }
.cst-hero-meta {
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex; gap: 80px; padding-top: 48px;
}
.cst-hero-meta-item { display: flex; flex-direction: column; gap: 12px; }
.cst-hero-meta-item--engagement { width: 320px; flex-shrink: 0; }
.cst-hero-meta-item--client     { width: 420px; flex-shrink: 0; }
.cst-hero-meta-item--duration   { flex: 1; }

/* ── AT A GLANCE — stats row ── */
.cst-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 64px;
}
.cst-section-head > .cst-head-left { display: flex; flex-direction: column; gap: 16px; }
.cst-section-head > .cst-head-meta { max-width: 320px; padding-bottom: 12px; text-align: right; }

.cst-stat-row {
  display: flex;
  border-top: 1px solid rgba(10,16,32,0.15);
  border-bottom: 1px solid rgba(10,16,32,0.15);
}
.cst-stat-cell {
  flex: 1;
  display: flex; flex-direction: column; gap: 20px;
  padding: 40px 32px;
  border-right: 1px solid rgba(10,16,32,0.15);
}
.cst-stat-cell:first-child { padding-left: 0; }
.cst-stat-cell:last-child { padding-right: 0; border-right: 0; }

/* ── CHALLENGE ── */
.cst-challenge-lead { display: flex; align-items: flex-start; gap: 96px; }
.cst-col-left-480   { display: flex; flex-direction: column; gap: 24px; width: 480px; flex-shrink: 0; }
.cst-col-right-flex { display: flex; flex-direction: column; gap: 24px; flex: 1; padding-top: 40px; }

.cst-problem-head {
  display: flex; flex-direction: column; gap: 12px;
  width: 480px; flex-shrink: 0;
}
.cst-problem-row {
  display: flex; gap: 96px;
}
.cst-problem-list {
  display: flex; flex-direction: column; flex: 1;
}
.cst-problem-item {
  display: flex; gap: 32px; padding: 28px 0;
  border-top: 1px solid rgba(10,16,32,0.15);
}
.cst-problem-item:last-child { border-bottom: 1px solid rgba(10,16,32,0.15); }
.cst-problem-num { width: 48px; flex-shrink: 0; padding-top: 4px; }
.cst-problem-num-label {
  font-family: "Space Mono", ui-monospace, monospace;
  font-weight: 700; font-size: 12px; line-height: 16px;
  color: var(--cst-accent);
}

/* Pullquote */
.cst-pullblock { display: flex; align-items: flex-start; gap: 48px; padding-top: 48px; }
.cst-pullblock-mark { color: var(--cst-accent); flex-shrink: 0; }
.cst-pullblock-body { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; }
.cst-pullblock-attr { display: flex; align-items: center; gap: 16px; }
.cst-hair { width: 48px; height: 1px; background: #0A1020; flex-shrink: 0; }

/* ── APPROACH ── */
.cst-head-rule {
  border-bottom: 1px solid rgba(10,16,32,0.15);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 64px; padding-bottom: 48px;
}
.cst-step-row {
  display: flex; align-items: flex-start; gap: 64px;
  padding: 48px 0;
  border-bottom: 1px solid rgba(10,16,32,0.15);
}
.cst-step-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cst-step-left  { display: flex; flex-direction: column; gap: 16px; width: 320px; flex-shrink: 0; }
.cst-step-right { display: flex; flex-direction: column; gap: 20px; flex: 1; padding-top: 8px; }
.cst-step-num--accent { color: var(--cst-accent); }
.cst-step-title { max-width: 740px; color: #0A1020; }
.cst-step-body  { max-width: 760px; }
.cst-tags { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.cst-tag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(10,16,32,0.18); border-radius: 999px;
  padding: 8px 14px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; line-height: 14px;
  text-transform: uppercase; color: #0A1020;
}
.cst-tag-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--cst-accent); flex-shrink: 0; }

/* ── INSIGHT ── */
.cst-insight-row { display: flex; gap: 96px; }
.cst-insight-left {
  display: flex; flex-direction: column; gap: 16px;
  width: 400px; flex-shrink: 0;
}
.cst-insight-right { display: flex; flex-direction: column; gap: 28px; flex: 1; }
.cst-callout-box {
  background: rgba(10,16,32,0.08);
  border-radius: 2px;
  padding: 32px 40px;
  margin-top: 8px;
}

/* ── IMPACT ── */
.cst-impact-heading {
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding-bottom: 48px;
}
.cst-impact-cards { display: flex; gap: 24px; }
.cst-impact-card {
  flex: 1;
  display: flex; flex-direction: column; gap: 20px;
  padding: 40px;
}
.cst-impact-card--outline { border: 1px solid rgba(255,255,255,0.1); }
.cst-impact-card--filled  { background: var(--cst-accent); }
.cst-impact-card-num--accent  { color: var(--cst-accent); }
.cst-impact-bullets { display: flex; flex-direction: column; }
.cst-impact-row {
  display: flex; gap: 48px; padding: 28px 0; align-items: flex-start;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.cst-impact-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.10); }
.cst-impact-num { width: 40px; flex-shrink: 0; padding-top: 4px; letter-spacing: 0; }
/* Smaller numbers inside the "What the engagement delivered" bullet rows so they don't overlap body text */
.cst-impact-row .cst-impact-num,
.cst-impact-bullets .cst-impact-num {
  font-size: 36px !important;
  line-height: 1 !important;
  width: 64px !important;
  flex-shrink: 0;
  letter-spacing: 0;
}

/* ── CTA ── */
.cst-cta-block { display: flex; flex-direction: column; gap: 48px; max-width: 960px; }
.cst-cta-buttons {
  display: flex; gap: 24px; align-items: center;
  margin-top: 64px; padding-top: 48px;
  border-top: 1px solid rgba(10,16,32,0.15);
}
.cst-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 20px 40px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; line-height: 16px;
  text-transform: uppercase;
  transition: transform 180ms ease;
  cursor: pointer;
}
.cst-btn:hover { transform: translateY(-1px); }
.cst-btn--dark,
a.cst-btn--dark,
button.cst-btn--dark {
  background: #00E676 !important;
  color: #0D1B1B !important;
  border: 1.5px solid #00E676 !important;
}
.cst-btn--dark:hover,
a.cst-btn--dark:hover,
button.cst-btn--dark:hover {
  background: #00A86B !important;
  border-color: #00A86B !important;
}
.cst-btn--outline { border: 1px solid rgba(10,16,32,0.25); color: #0A1020; }

.cst-back {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 64px;
}
.cst-back-line { width: 32px; height: 1px; background: #0A1020; flex-shrink: 0; }

/* ── UTILITIES ── */
.cst-flex-col-24 { display: flex; flex-direction: column; gap: 24px; }
.cst-flex-col-16 { display: flex; flex-direction: column; gap: 16px; }
.cst-flex-col-12 { display: flex; flex-direction: column; gap: 12px; }
.cst-op-60 { opacity: 0.6; }
.cst-mt-8  { margin-top: 8px; }
.cst-mt-32 { margin-top: 32px; }
.cst-mb-24 { margin-bottom: 24px; }
.cst-mb-32 { margin-bottom: 32px; }