/* ===== Case-study template page ===== */
.cst-wrap { max-width: 1100px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 980px){ .cst-wrap { padding: 0 24px; } }
@media (max-width: 600px){ .cst-wrap { padding: 0 18px; } }

.cst-breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 22px 0; }
.cst-breadcrumb a { color: var(--ink-3); }
.cst-breadcrumb a:hover { color: var(--green-deep); }
.cst-breadcrumb .sep { opacity: 0.5; }
.cst-breadcrumb .cur { color: var(--green-ink); }

/* Cinematic image hero */
.cst-hero2 { position: relative; width: 100%; min-height: 580px; display: flex; align-items: flex-end; overflow: hidden; background: linear-gradient(155deg, #2E7D55 0%, #0E3B27 100%); }
.cst-hero2 > image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cst-hero2::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(8,30,20,0.4) 0%, rgba(8,30,20,0) 36%, rgba(8,30,20,0.9) 100%); }
.cst-hero2-inner { position: relative; z-index: 2; width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 48px 52px; }
.cst-hero2-badge { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--gold); color: var(--green-ink); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 14px; border-radius: var(--r-pill); box-shadow: var(--pill-shadow-dark); }
.cst-hero2 h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(34px, 5.2vw, 60px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.0; color: #fff; margin: 22px 0 0; max-width: 880px; text-shadow: 0 2px 30px rgba(0,0,0,0.3); }
.cst-hero2 h1 .accent { color: var(--gold); font-style: italic; font-family: 'Instrument Serif', serif; font-weight: 400; }
.cst-hero2 .cst-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.cst-hero2 .cst-hero-meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.22); padding: 7px 13px; border-radius: var(--r-pill); }
.cst-hero2 .cst-hero-meta svg { width: 15px; height: 15px; color: var(--gold); }
.cst-hero2-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 44px; justify-content: start; margin-top: 36px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.22); }
.cst-hero2-stat .n { font-family: 'Bricolage Grotesque', sans-serif; font-size: 48px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: #fff; }
.cst-hero2-stat .n .pct { font-size: 0.5em; color: var(--gold); }
.cst-hero2-stat .l { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.82); margin-top: 10px; }
@media (max-width: 760px) {
  .cst-hero2 { min-height: 480px; }
  .cst-hero2-inner { padding: 0 20px 36px; }
  .cst-hero2-stats { grid-template-columns: 1fr 1fr; gap: 22px; }
  .cst-hero2-stat .n { font-size: 38px; }
}

/* Hero */
.cst-hero { background: linear-gradient(155deg, #2E7D55 0%, #0E3B27 100%); color: var(--paper); border-radius: var(--r-xl); padding: 48px; position: relative; overflow: hidden; }
.cst-hero-ic { position: absolute; top: -40px; right: -36px; color: #fff; opacity: 0.1; }
.cst-hero-ic svg { width: 280px; height: 280px; }
.cst-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(201,169,97,0.22); border: 1px solid rgba(201,169,97,0.4); color: var(--gold); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 7px 13px; border-radius: var(--r-pill); box-shadow: var(--pill-shadow-dark); text-transform: uppercase; }
.cst-hero h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(32px, 5vw, 54px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; margin: 22px 0 0; max-width: 760px; }
.cst-hero h1 .accent { color: var(--gold); font-style: italic; font-family: 'Instrument Serif', serif; font-weight: 400; }
.cst-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; position: relative; z-index: 2; }
.cst-hero-meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); padding: 7px 13px; border-radius: var(--r-pill); }
.cst-hero-meta svg { width: 15px; height: 15px; color: var(--gold); }
.cst-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--r-md); overflow: hidden; margin-top: 36px; position: relative; z-index: 2; }
.cst-hero-stat { background: rgba(8,40,26,0.5); padding: 22px 20px; }
.cst-hero-stat .n { font-family: 'Bricolage Grotesque', sans-serif; font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.cst-hero-stat .n .pct { font-size: 0.5em; }
.cst-hero-stat .n .accent { color: var(--gold); }
.cst-hero-stat .l { font-size: 12px; font-weight: 700; color: rgba(247,244,236,0.78); margin-top: 8px; line-height: 1.3; }

/* Section scaffolding */
.cst-sec { padding: 64px 0; }
.cst-sec.tight { padding: 40px 0; }
.cst-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold-deep); text-transform: uppercase; margin-bottom: 14px; }
.cst-sec h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; letter-spacing: -0.025em; color: var(--green-ink); margin: 0 0 20px; line-height: 1.05; }
.cst-sec h2 .accent { color: var(--gold-deep); font-style: italic; font-family: 'Instrument Serif', serif; font-weight: 400; }
.cst-lede { font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 760px; font-weight: 500; }
.cst-body p { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); max-width: 760px; font-weight: 500; }
.cst-body p + p { margin-top: 16px; }

/* At a glance */
.cst-glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cst-glance-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; }
.cst-glance-item .k { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.cst-glance-item .v { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 800; color: var(--green-ink); letter-spacing: -0.01em; line-height: 1.15; }

/* Two column challenge/approach */
.cst-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.cst-approach { display: flex; flex-direction: column; gap: 14px; }
.cst-step { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; }
.cst-step-ic { width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--green-soft); color: var(--green-deep); display: grid; place-items: center; }
.cst-step-ic svg { width: 26px; height: 26px; }
.cst-step h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 800; color: var(--green-ink); margin: 0 0 5px; letter-spacing: -0.01em; }
.cst-step p { font-size: 14px; color: var(--ink-2); font-weight: 500; line-height: 1.5; margin: 0; }

/* Products used */
.cst-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cst-prod { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.cst-prod:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(14,59,39,0.5); border-color: rgba(31,95,63,0.3); }
.cst-prod img { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; box-shadow: 0 1px 4px rgba(14,59,39,0.16); }
.cst-prod .pn { font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 800; color: var(--green-ink); letter-spacing: -0.01em; }
.cst-prod .pr { font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }

/* Results band */
.cst-results { background: var(--green-ink); border-radius: var(--r-xl); padding: 48px; color: var(--paper); }
.cst-results .cst-eyebrow { color: var(--gold); }
.cst-results h2 { color: var(--paper); }
.cst-results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.cst-result { border-top: 2px solid rgba(201,169,97,0.6); padding-top: 16px; }
.cst-result .n { font-family: 'Bricolage Grotesque', sans-serif; font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--gold); }
.cst-result .n .pct { font-size: 0.5em; }
.cst-result .l { font-size: 13px; font-weight: 600; color: rgba(247,244,236,0.82); margin-top: 10px; line-height: 1.4; }

/* before/after bars */
.cst-ba { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; }
.cst-ba-row { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; }
.cst-ba-label { font-size: 13.5px; font-weight: 700; color: var(--paper); }
.cst-ba-bars { display: flex; flex-direction: column; gap: 7px; }
.cst-ba-bar { display: flex; align-items: center; gap: 12px; }
.cst-ba-track { flex: 1; height: 12px; background: rgba(255,255,255,0.12); border-radius: var(--r-pill); overflow: hidden; }
.cst-ba-fill { height: 100%; border-radius: var(--r-pill); }
.cst-ba-fill.before { background: rgba(247,244,236,0.4); }
.cst-ba-fill.after { background: linear-gradient(90deg, var(--green-light), var(--gold)); }
.cst-ba-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; width: 92px; color: rgba(247,244,236,0.85); }

/* Pull quote */
.cst-quote { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 48px; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.cst-quote-mark { font-family: 'Instrument Serif', serif; font-size: 120px; line-height: 0.6; color: var(--gold); }
.cst-quote blockquote { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(22px, 2.8vw, 30px); font-weight: 700; letter-spacing: -0.02em; color: var(--green-ink); line-height: 1.25; margin: 0; }
.cst-quote-author { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.cst-quote-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--green-soft); color: var(--green-deep); display: grid; place-items: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 17px; }
.cst-quote-name { font-size: 15px; font-weight: 800; color: var(--green-ink); }
.cst-quote-role { font-size: 13px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }

/* Timeline */
.cst-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cst-tl { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); border-top: 3px solid var(--green-deep); padding: 22px; }
.cst-tl .ph { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--gold-deep); text-transform: uppercase; }
.cst-tl h4 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 800; color: var(--green-ink); margin: 8px 0 8px; letter-spacing: -0.01em; }
.cst-tl p { font-size: 13.5px; color: var(--ink-2); font-weight: 500; line-height: 1.5; margin: 0; }

/* CTA */
.cst-cta { background: linear-gradient(155deg, #2E7D55 0%, #0E3B27 100%); border-radius: var(--r-xl); padding: 56px; color: var(--paper); text-align: center; }
.cst-cta h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.03em; color: var(--paper); margin: 0 0 14px; }
.cst-cta h2 .accent { color: var(--gold); font-style: italic; font-family: 'Instrument Serif', serif; font-weight: 400; }
.cst-cta p { font-size: 17px; color: rgba(247,244,236,0.85); max-width: 540px; margin: 0 auto 28px; font-weight: 500; }
.cst-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Related */
.cst-related { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cst-rel { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.cst-rel:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(14,59,39,0.5); }
.cst-rel-ic { width: 96px; height: 96px; border-radius: var(--r-sm); display: grid; place-items: center; color: #fff; }
.cst-rel-ic.soccer { background: linear-gradient(155deg, #1F6E45, #08301F); }
.cst-rel-ic.private { background: linear-gradient(155deg, #6F8F4E, #244E2F); }
.cst-rel-ic svg { width: 40px; height: 40px; }
.cst-rel .rk { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--gold-deep); text-transform: uppercase; letter-spacing: 0.05em; }
.cst-rel .rt { font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 800; color: var(--green-ink); margin: 6px 0; letter-spacing: -0.01em; line-height: 1.15; }
.cst-rel .rl { font-size: 13px; font-weight: 700; color: var(--green-deep); display: inline-flex; align-items: center; gap: 6px; }
.cst-rel .rl svg { width: 14px; height: 14px; }

/* Before / After images */
.cst-howtext { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); max-width: 760px; font-weight: 500; margin: 0 0 28px; }
.cst-ba2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cst-ba2-item { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--green-soft); }
.cst-ba2-item image-slot { display: block; width: 100%; height: 360px; }
.cst-ba2-tag { position: absolute; top: 14px; left: 14px; z-index: 3; white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-pill); box-shadow: var(--pill-shadow-dark); }
.cst-ba2-tag.before { background: rgba(14,40,28,0.92); color: var(--paper); }
.cst-ba2-tag.after { background: var(--gold); color: var(--green-ink); }
/* Gallery */
.cst-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cst-gallery image-slot { display: block; width: 100%; height: 200px; border-radius: var(--r-md); }
.cst-gallery image-slot.g-wide { grid-column: span 2; }

@media (max-width: 760px) {
  .cst-ba2 { grid-template-columns: 1fr; }
  .cst-ba2-item image-slot { height: 260px; }
  .cst-gallery { grid-template-columns: 1fr 1fr; }
  .cst-gallery image-slot.g-wide { grid-column: span 2; }
}

@media (max-width: 980px) {
  .cst-hero { padding: 32px; }
  .cst-glance, .cst-prods, .cst-timeline, .cst-results-grid { grid-template-columns: 1fr 1fr; }
  .cst-split { grid-template-columns: 1fr; gap: 36px; }
  .cst-related { grid-template-columns: 1fr; }
  .cst-quote { grid-template-columns: 1fr; gap: 12px; padding: 32px; }
  .cst-quote-mark { font-size: 80px; }
  .cst-results, .cst-cta { padding: 32px; }
}
@media (max-width: 560px) {
  .cst-hero-stats, .cst-glance, .cst-prods, .cst-timeline, .cst-results-grid { grid-template-columns: 1fr; }
  .cst-hero-stats { grid-template-columns: 1fr 1fr; }
  .cst-ba-row { grid-template-columns: 1fr; gap: 8px; }
}