/* ============================================================
   UNILIT — Shared case study styles
   Used by: hoorsenbuhs.css, mooncheese.css, casson.css, monda.css
   ============================================================ */

/* ── Hero base ──────────────────────────────────────────────── */
.cs-hero {
  position: relative;
  height: 90vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.cs-hero-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cs-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16,21,15,1) 0%, rgba(16,21,15,.55) 40%, rgba(16,21,15,.1) 100%);
}

.cs-hero-body {
  position: relative;
  z-index: 2;
  padding: 0 24px 72px;
  width: 100%;
  max-width: 1188px;
  margin: 0 auto;
}

/* ── Sections ───────────────────────────────────────────────── */
.cs-section { padding: 84px 0; }

.cs-section h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin-bottom: 20px;
}

.cs-section p {
  font-size: 16px;
  max-width: 58ch;
  line-height: 1.8;
}

.cs-section p + p { margin-top: 14px; }

/* ── Stack pills ─────────────────────────────────────────────── */
.pill { border-radius: 99px; }

/* ── CTA section ─────────────────────────────────────────────── */
.cs-cta {
  padding: 84px 0;
  text-align: center;
}

.cs-cta h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -.02em;
  margin-bottom: 14px;
}

.cs-cta p {
  font-size: 16px;
  margin-bottom: 36px;
  font-family: var(--font-mono);
  letter-spacing: .03em;
}