/* ---------- Case study detail pages ---------- */

/* Tighten section rhythm on case study detail pages */
body.case-study-page main section {
  padding-block: var(--space-xl);
}

body.case-study-page main section.csd-hero {
  padding-block: var(--space-2xl) var(--space-lg);
}

body.case-study-page main section.csd-stats {
  padding-block: var(--space-lg);
  background: var(--cream-200);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

body.case-study-page main section.is-tight {
  padding-block: var(--space-lg);
}

.csd-hero {
  padding-block: var(--space-2xl) var(--space-xl);
}

.csd-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-sm);
}

.csd-hero__meta span:not(:last-child)::after {
  content: '\00b7';
  margin-left: var(--space-sm);
  color: rgba(255, 255, 255, 0.4);
}

.csd-hero h1 {
  font-size: var(--fs-h1);
  max-width: 24ch;
  margin-bottom: var(--space-sm);
  line-height: 1.12;
}

.csd-hero p.lead {
  color: rgba(255, 255, 255, 0.82);
  max-width: 64ch;
}

/* Stat Card Deck */
.csd-stats {
  background: var(--cream-200);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.csd-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  padding-block: var(--space-2xs);
}

.csd-stats__grid:has(> :only-child) {
  max-width: 480px;
  margin-inline: auto;
}

.csd-stat-card,
.csd-stats__grid > div {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 4px solid var(--terracotta-500);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.csd-stat-card:hover,
.csd-stats__grid > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-lift);
}

.csd-stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.1;
  margin-bottom: var(--space-3xs);
}

.csd-stat__label {
  font-size: var(--fs-small);
  color: var(--ink-700);
  line-height: 1.45;
  margin-top: 0;
}

.csd-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.csd-icon-badge {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--terracotta-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.csd-icon-badge svg {
  width: 22px;
  height: 22px;
  stroke: var(--terracotta-600);
}

.csd-section-head h2 {
  font-size: var(--fs-h2);
  margin: 0;
  color: var(--navy-900);
}

/* Two-Column Overview & Challenge Grid */
.csd-overview-grid {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 960px) {
  .csd-overview-grid {
    grid-template-columns: 1.35fr 0.85fr;
  }
}

.csd-overview-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.csd-overview-lead {
  font-size: var(--fs-lead);
  color: var(--ink-700);
  line-height: 1.6;
  margin: 0;
}

.csd-challenge-cards {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

@media (min-width: 600px) {
  .csd-challenge-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.csd-challenge-card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
  border-top: 3px solid var(--terracotta-500);
}

.csd-challenge-card h3,
.csd-challenge-card h4 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 var(--space-2xs);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.csd-challenge-card h3 svg,
.csd-challenge-card h4 svg {
  width: 16px;
  height: 16px;
  stroke: var(--terracotta-600);
  flex-shrink: 0;
}

.csd-challenge-card p {
  font-size: var(--fs-small);
  color: var(--ink-500);
  line-height: 1.45;
  margin: 0;
}

/* Sidebar Dossier / Project Brief Card */
.csd-dossier-card {
  background: var(--white);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 6rem;
}

.csd-dossier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-md);
}

.csd-dossier-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0;
}

.csd-dossier-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--terracotta-100);
  color: var(--terracotta-600);
}

.csd-dossier-list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.csd-dossier-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.csd-dossier-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}

.csd-dossier-val {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-900);
}

.csd-dossier-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-top: 4px;
}

.csd-dossier-tool {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--cream-200);
  color: var(--navy-800);
}

/* Approach card grid */
.csd-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.csd-card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-card);
  border-top: 3px solid var(--terracotta-500);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.csd-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-lift);
}

.csd-card h3 {
  font-size: var(--fs-body);
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--navy-800);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-2xs);
}

.csd-card h3 svg {
  width: 18px;
  height: 18px;
  stroke: var(--terracotta-600);
  flex: 0 0 auto;
}

.csd-card p {
  font-size: var(--fs-small);
  color: var(--ink-700);
  line-height: 1.5;
  margin: 0;
}

/* Decision cards */
.csd-decision-list {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.csd-decision-card,
.csd-decision {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  align-items: flex-start;
  transition: transform var(--dur-fast) var(--ease-out);
}

.csd-decision:hover,
.csd-decision-card:hover {
  transform: translateX(3px);
  border-color: rgba(217, 107, 79, 0.4);
}

.csd-decision:first-of-type {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-md);
}

.csd-decision__dot {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  font-weight: 700;
  margin-top: 2px;
}

.csd-decision h3,
.csd-decision h4 {
  font-size: var(--fs-body);
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 var(--space-3xs);
}

.csd-decision p {
  font-size: var(--fs-small);
  color: var(--ink-700);
  line-height: 1.5;
  margin: 0;
}

.csd-outcome-list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  display: grid;
  gap: var(--space-sm);
}

.csd-outcome-list li {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
  color: var(--ink-700);
  line-height: 1.5;
}

.csd-outcome-list svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  stroke: var(--terracotta-600);
  margin-top: 2px;
}

.csd-note {
  background: var(--gold-200);
  border: 1px solid var(--gold-600);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-md);
}

.csd-note h3 {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-small);
  color: #5c4314;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.csd-note h3 svg {
  width: 16px;
  height: 16px;
  stroke: #5c4314;
}

.csd-note ul {
  margin: 0;
  padding-left: 1.1em;
}

.csd-note li {
  font-size: var(--fs-small);
  color: var(--ink-700);
  margin-bottom: var(--space-2xs);
}

.csd-note li:last-child {
  margin-bottom: 0;
}

.csd-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--terracotta-600);
  text-decoration: none;
}

.csd-back:hover {
  text-decoration: underline;
}

.csd-footer-nav {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.csd-footer-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.csd-nav-link {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--terracotta-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}

.csd-nav-link:hover {
  text-decoration: underline;
}

/* Pipeline diagram component */
.csd-pipeline-box {
  background: var(--white);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-block: var(--space-lg);
  box-shadow: var(--shadow-card);
}

.csd-pipeline-header {
  margin-bottom: var(--space-md);
}

.csd-pipeline-header h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--navy-900);
  margin-bottom: var(--space-3xs);
}

.csd-pipeline-sub {
  font-size: var(--fs-small);
  color: var(--ink-500);
}

.csd-pipeline-svg-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-xs);
}

.csd-pipeline-svg {
  display: block;
  width: 100%;
  min-width: 760px;
  height: auto;
}

.csd-pipeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  color: var(--ink-700);
}

.csd-pipeline-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.csd-pipeline-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}