/* ============================================================
   UNILIT — HOORSENBUHS case study styles
   ============================================================ */

body {
  background: var(--ink);
  color: #fff;
}

.back-bar  { background: var(--ink); border-color: rgba(255,255,255,.10); }
.back-link { color: rgba(255,255,255,.40); }
.back-link:hover { color: #fff; }

/* Hero */
.cs-hero { background: #0a0d09; }
.cs-hero-img { opacity: .45; filter: grayscale(15%); }

.cs-eyebrow { color: var(--amber); }

.cs-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 7vw, 88px);
  line-height: .96;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 24px;
}

.cs-hero h1 em {
  font-style: normal;
  color: rgba(255,255,255,.38);
}

/* Section */
.cs-section { border-bottom: 1px solid rgba(255,255,255,.10); }
.cs-section h2 { color: #fff; }
.cs-section p  { color: rgba(255,255,255,.68); }
.section-label { color: var(--amber); }

/* Deliverables */
.deliverables { background: rgba(255,255,255,.06); }
.del { background: var(--ink); padding: 26px 24px; }
.del:hover { background: rgba(255,255,255,.04); }
.del .d-num { color: var(--amber); }
.del h3 { color: #fff; }
.del p  { color: rgba(255,255,255,.55); }

/* Screenshots */
.screenshots { border-bottom: 1px solid rgba(255,255,255,.10); }
.shot { background: rgba(255,255,255,.04); }
.shot-caption { color: rgba(255,255,255,.38); border-top-color: rgba(255,255,255,.10); }

/* Stack */
.stack-section { border-bottom: 1px solid rgba(255,255,255,.10); }
.stack-section h2 { color: #fff; }
.pill {
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.72);
}
.pill:hover { border-color: var(--amber); color: var(--amber); }

/* CTA */
.cs-cta { background: var(--ink); border-top: 1px solid rgba(255,255,255,.10); }
.cs-cta h2 { color: #fff; }
.cs-cta p  { color: rgba(255,255,255,.48); }

.btn-cta-primary {
  display: inline-block;
  background: var(--amber);
  color: var(--ink) !important;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 14px 28px;
  border-radius: 4px;
  transition: background .18s, transform .18s;
}
.btn-cta-primary:hover { background: #f0b257; transform: translateY(-1px); }

.btn-cta-ghost {
  display: inline-block;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 14px 28px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.20);
  transition: border-color .18s, color .18s;
}
.btn-cta-ghost:hover { border-color: #fff; color: #fff; }