/* ==========================================================================
   Case study detail page — builds on css/site.css
   ========================================================================== */

.breadcrumbs {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px var(--gutter) 0;
  font-size: 14px;
  color: var(--muted-4);
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs .sep { margin: 0 8px; color: #c2c7c5; }

/* Hero */
.case-hero { max-width: var(--maxw); margin: 0 auto; padding: 28px var(--gutter) 40px; }
.case-hero .kicker {
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.case-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 14px 0 22px;
  max-width: 900px;
}
.case-hero .intro {
  font-size: 20px;
  line-height: 1.6;
  color: var(--muted-2);
  max-width: 720px;
  margin: 0;
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 34px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.case-meta dt {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-4);
  margin: 0 0 6px;
}
.case-meta dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }

/* Hero media placeholder */
.case-figure { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.case-figure .frame {
  min-height: 440px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(135deg, #eef0f0 0 14px, #f6f7f7 14px 28px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-figure .frame span { font-family: var(--font-mono); font-size: 13px; color: #9aa19f; }
.case-figure .shot {
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(15, 20, 22, 0.35);
  background: #fff;
}
.case-figure .shot img { display: block; width: 100%; height: auto; }
.case-figure figcaption { margin-top: 14px; font-size: 13px; color: var(--muted-4); text-align: center; }

/* Prose */
.case-prose { max-width: 760px; margin: 0 auto; padding: 64px var(--gutter) 32px; }
.case-prose section { margin-bottom: 44px; }
.case-prose h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.case-prose p { font-size: 17px; line-height: 1.75; color: var(--muted-2); margin: 0 0 16px; }
.case-prose p:last-child { margin-bottom: 0; }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.feature-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
}
.feature-list .check { color: var(--teal); font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.feature-list b { display: block; font-size: 16px; margin-bottom: 3px; color: var(--ink); }
.feature-list span.desc { font-size: 15px; line-height: 1.55; color: var(--muted); }

.outcome-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.outcome-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.6; color: var(--muted-2); }
.outcome-list .check { color: var(--teal); font-size: 16px; flex-shrink: 0; }

.case-back { display: inline-block; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--teal-dark); }
.case-back:hover { color: var(--ink); }

@media (max-width: 760px) {
  .case-hero h1 { font-size: 38px; }
  .case-hero .intro { font-size: 18px; }
  .case-meta { gap: 24px; }
  .case-figure .frame { min-height: 240px; }
  .case-prose { padding-top: 48px; }
}