:root {
  --case-paper: #f3f1ea;
  --case-ink: #111;
  --case-signal: #c8ff1a;
}

body {
  background: var(--case-paper);
  color: var(--case-ink);
}

.case-wrap {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.case-hero {
  min-height: 72vh;
  padding: clamp(7rem, 14vw, 11rem) 0 clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid var(--case-ink);
}

.case-back,
.case-eyebrow {
  font-family: monospace;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.case-back {
  display: inline-block;
  margin-bottom: 3rem;
  color: #555;
  font-size: .8rem;
}

.case-eyebrow {
  font-size: .8rem;
  color: #5b5b57;
}

.case-hero h1 {
  max-width: 980px;
  margin: .6rem 0 1.4rem;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: .92;
  letter-spacing: -.065em;
}

.case-lead {
  max-width: 760px;
  color: #484844;
  font-size: clamp(1.08rem, 2vw, 1.45rem);
  line-height: 1.55;
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 3rem;
  border-block: 1px solid var(--case-ink);
}

.case-meta div {
  min-width: 0;
  padding: 1.2rem 1.5rem;
  border-right: 1px solid var(--case-ink);
}

.case-meta div:last-child { border-right: 0; }
.case-meta span { display: block; margin-bottom: .3rem; color: #666; font-family: monospace; font-size: .72rem; text-transform: uppercase; }
.case-meta strong { overflow-wrap: anywhere; }

.case-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.case-button,
.case-nav-cta {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.25rem;
  border: 1px solid var(--case-ink);
  color: var(--case-ink);
  font-weight: 700;
}
.case-button-primary,
.case-nav-cta { background: var(--case-ink); color: var(--case-paper); }

.case-section { padding: clamp(4rem, 9vw, 8rem) 0; border-bottom: 1px solid var(--case-ink); }
.case-two-col { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 8vw, 8rem); }
.case-section h2,
.case-cta h2 { margin-top: .7rem; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.045em; }
.case-features { border-top: 1px solid var(--case-ink); }
.case-features li { padding: 1.3rem 0; border-bottom: 1px solid #b7b5af; font-size: clamp(1rem, 2vw, 1.25rem); }
.case-features li::before { content: '↗'; margin-right: .8rem; color: #6f8f00; }

.case-cta { padding: clamp(4rem, 9vw, 8rem) 0; background: var(--case-signal); }
.case-cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: end; }
.case-cta p:not(.case-eyebrow) { max-width: 680px; margin-top: 1.2rem; line-height: 1.55; }
.case-footer { padding: 2rem 0; background: #080808; color: #f3f1ea; }
.case-footer .case-wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.case-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 820px) {
  .case-nav-cta { background: transparent; color: inherit; border: 0; min-height: auto; padding: 0; }
  .case-two-col, .case-cta-inner { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .case-wrap { width: min(100% - 32px, 1180px); }
  .case-hero { min-height: 0; padding-top: 6.5rem; }
  .case-back { margin-bottom: 2rem; }
  .case-meta { grid-template-columns: 1fr; }
  .case-meta div { border-right: 0; border-bottom: 1px solid #b7b5af; padding-inline: 0; }
  .case-meta div:last-child { border-bottom: 0; }
  .case-actions { display: grid; }
  .case-footer .case-wrap { align-items: flex-start; flex-direction: column; }
}