/* =========================================================
   Case Study pages — additional styles
   ========================================================= */

/* ── Case Study Hero ────────────────────────────────────── */
.cs-hero {
  padding: calc(var(--nav-h) + 4rem) 0 0;
}
.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: 3.5rem;
  transition: color var(--dur) var(--ease);
}
.cs-back:hover { color: var(--black); }
.cs-back::before { content: '←'; }

.cs-hero-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}
.cs-title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: 1.75rem;
  max-width: 820px;
}
.cs-summary {
  font-size: 1.1875rem;
  color: var(--gray-600);
  line-height: 1.75;
  max-width: 600px;
  margin-bottom: 3.5rem;
}
.cs-cover {
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  margin-top: 1rem;
}
.cs-cover .card-image-placeholder { width: 100%; height: 100%; }

/* ── Overview bar ───────────────────────────────────────── */
.cs-overview {
  background: var(--surface);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 2rem 0;
}
.cs-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.cs-stat { display: flex; flex-direction: column; gap: 0.25rem; }
.stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.stat-value { font-size: 1rem; color: var(--black); }

/* ── Body content ───────────────────────────────────────── */
.cs-body { padding: 6rem 0; }
.cs-content { max-width: 820px; }

.cs-section { margin-bottom: 5rem; }
.cs-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 1.5rem;
}
.cs-section p {
  font-size: 1.0625rem;
  color: var(--gray-800);
  line-height: 1.85;
  margin-bottom: 1.125rem;
}
.cs-section p:last-child { margin-bottom: 0; }

/* Real img tags inside case study containers */
.cs-cover img {
  width: 100%;
  height: auto;
  display: block;
}
.cs-img-full img {
  width: 100%;
  display: block;
  border-radius: var(--r-sm);
}
.cs-img-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Images */
.cs-img-full {
  width: 100%;
  margin-bottom: 5rem;
  overflow: hidden;
  border-radius: var(--r-sm);
}
.cs-img-full .card-image-placeholder {
  width: 100%;
  aspect-ratio: 21 / 9;
}
.cs-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-bottom: 5rem;
  overflow: hidden;
  border-radius: var(--r-sm);
}
.cs-img-grid .card-image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.cs-caption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--gray-400);
  font-style: italic;
  line-height: 1.5;
}

/* Insights */
.cs-insights { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; }
.cs-insight {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  background: var(--gray-100);
  border-radius: var(--r-sm);
  font-size: 1rem;
  color: var(--gray-800);
  line-height: 1.7;
}
.insight-arrow {
  font-size: 0.875rem;
  color: var(--gray-400);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

/* Results */
.cs-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 2rem;
}
.cs-result {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.result-val {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--black);
}
.result-label { font-size: 0.875rem; color: var(--gray-600); }

/* ── Next case study ────────────────────────────────────── */
.cs-next {
  border-top: 1px solid var(--gray-200);
  padding: 4rem 0;
}
.cs-next-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
  margin-top: 1rem;
  transition: opacity var(--dur) var(--ease);
}
.cs-next-link:hover .cs-next-inner { opacity: 0.55; }
.cs-next-link { display: block; }
.cs-next-title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
}
.cs-next-arrow { font-size: 2rem; color: var(--gray-400); flex-shrink: 0; }

/* ── CTA banner ─────────────────────────────────────────── */
.cs-cta {
  background: var(--gray-100);
  padding: 7rem 0;
  text-align: center;
}
.cs-cta-sub {
  color: var(--gray-600);
  font-size: 1.0625rem;
  margin: 1.25rem 0 2.25rem;
}

/* ── Pull-quote ─────────────────────────────────────────── */
.cs-pullquote {
  border-left: 2px solid var(--black);
  padding: 2rem 2.5rem;
  margin-bottom: 1rem;
  background: var(--gray-100);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.cs-pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.5vw, 2.5rem);
  font-style: italic;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.cs-pullquote cite {
  font-size: 0.875rem;
  color: var(--gray-600);
  font-style: normal;
  letter-spacing: 0.02em;
}

/* ── Observation callout ─────────────────────────────────── */
.cs-callout {
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  padding: 1.5rem 2rem;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  margin-bottom: 5rem;
}
.callout-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-400);
  white-space: nowrap;
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.cs-callout p {
  font-size: 1rem;
  color: var(--gray-800);
  line-height: 1.75;
  margin: 0;
  max-width: 640px;
}

/* ── Benchmark metrics block ─────────────────────────────── */
.cs-benchmark {
  background: var(--black);
  color: var(--surface);
  padding: 3rem;
  border-radius: var(--r-sm);
  margin-bottom: 5rem;
}
.benchmark-header { margin-bottom: 2.5rem; }
.cs-benchmark .section-label { color: rgba(255,255,255,0.35); }
.benchmark-context {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  margin-top: 0.75rem;
  max-width: 520px;
}
.benchmark-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 2.5rem;
}
.benchmark-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 2rem;
  border-right: 1px solid rgba(255,255,255,0.08);
  margin-right: 2rem;
}
.benchmark-stat:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}
.benchmark-val {
  font-family: var(--font-display);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--surface);
  letter-spacing: -0.02em;
}
.benchmark-unit {
  font-size: 1.75rem;
  color: rgba(255,255,255,0.3);
}
.benchmark-label {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
}

/* ── Design principles grid ──────────────────────────────── */
.cs-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 2.5rem;
  margin-bottom: 5rem;
}
.cs-principle-item {
  background: var(--surface);
  padding: 2rem 1.875rem 2.25rem;
}
.principle-num {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--gray-400);
  margin-bottom: 1.25rem;
}
.principle-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 0.625rem;
}
.cs-principle-item p {
  font-size: 0.9375rem;
  color: var(--gray-600);
  line-height: 1.65;
  margin: 0;
}

/* ── Recommendations ─────────────────────────────────────── */
.cs-recs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 5rem;
}
.cs-rec {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 2.25rem 2.5rem;
  background: var(--surface);
}
.rec-num {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--gray-200);
  line-height: 1;
  flex-shrink: 0;
  width: 3rem;
  letter-spacing: -0.02em;
}
.rec-title {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 400;
  margin-bottom: 0.625rem;
  line-height: 1.25;
}
.rec-body p {
  font-size: 0.9375rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin: 0;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .cs-stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .cs-results { grid-template-columns: 1fr; }
  .cs-img-grid { grid-template-columns: 1fr; }
  .cs-body { padding: 4rem 0; }
  .cs-principles { grid-template-columns: 1fr; }
  .benchmark-stats { grid-template-columns: 1fr; }
  .benchmark-stat { border-right: none; margin-right: 0; padding-right: 0; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .benchmark-stat:last-child { border-bottom: none; padding-bottom: 0; }
  .cs-benchmark { padding: 2rem 1.5rem; }
  .cs-callout { flex-direction: column; gap: 0.75rem; }
}

@media (max-width: 560px) {
  .cs-title { font-size: 2.5rem; }
}

/* ── Breakout image (wider than the text column) ────────── */
.cs-img-breakout {
  --bw: min(1080px, calc(100vw - 3rem));
  width: var(--bw);
  margin-left: calc((100% - var(--bw)) / 2);
}

/* ── Figures with image slots (placeholders) ─────────────── */
.cs-figure { margin-bottom: 5rem; }
.img-slot {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 2rem;
  background: var(--gray-100);
  border: 1px dashed var(--gray-400);
  border-radius: var(--r-sm);
  text-align: center;
}
.slot-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.slot-desc {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--gray-600);
  max-width: 420px;
  line-height: 1.6;
}
.figure-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 3px;
  margin-top: 3px;
}
.figure-note {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  padding: 1.375rem 1.5rem;
}
.note-num {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--gray-400);
  margin-bottom: 0.625rem;
}
.note-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 0.375rem;
}
.figure-note p {
  font-size: 0.875rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}
.cs-figure-split {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.25rem;
  align-items: start;
}
.figure-side { display: flex; flex-direction: column; gap: 3px; }

/* Real img tags used directly inside figures (not sourced from an
   img-slot placeholder) — fill their column, keep the same corner
   radius as the placeholder they replace. */
.cs-figure > img,
.cs-figure-split > img,
.ba-item img {
  display: block;
  width: 100%;
  border-radius: var(--r-sm);
}

/* Before/after stack */
.cs-ba { display: flex; flex-direction: column; gap: 2rem; }
.ba-tag {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 0.625rem;
}

/* Capped-height photos (tall portrait shots) */
.cs-img-capped img {
  max-height: 560px;
  object-fit: cover;
  object-position: center 30%;
}

/* Principle → research traceability line */
.principle-src {
  display: block;
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--gray-400);
  font-style: italic;
  line-height: 1.5;
}
.principle-src::before { content: '↳ '; font-style: normal; }

/* ── Before/after compare grid ───────────────────────────── */
.cs-compare { margin-bottom: 5rem; }
.compare-context {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin: 0.75rem 0 2rem;
  max-width: 560px;
}
.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.compare-task {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  padding: 1.75rem 1.5rem;
}
.compare-task-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.compare-row {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--gray-100);
}
.compare-metric {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.compare-vals { font-size: 0.9375rem; color: var(--gray-600); }
.compare-vals strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--black);
  margin-left: 0.25rem;
}
.compare-arrow { color: var(--gray-400); margin: 0 0.25rem; }

/* ── Smooth scroll + anchor offset ──────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 3.5rem);
}

/* ── Section TOC ─────────────────────────────────────────── */
.cs-toc {
  position: sticky;
  top: var(--nav-h);
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--gray-200);
}
.cs-toc-inner {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cs-toc-inner::-webkit-scrollbar { display: none; }
.cs-toc-link {
  flex-shrink: 0;
  padding: 0.875rem 1.125rem;
  font-size: 0.8125rem;
  color: var(--gray-600);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cs-toc-link:first-child { padding-left: 0; }
.cs-toc-link:hover { color: var(--black); }
.cs-toc-link.active {
  color: var(--black);
  border-bottom-color: var(--black);
}

/* ── Back to top ─────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--surface);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.2s var(--ease);
  pointer-events: none;
  z-index: 100;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover { background: var(--gray-600); }

/* ── Lightbox ────────────────────────────────────────────── */
.lightboxable { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1.5rem 2rem;
  background: rgba(17, 17, 17, 0.93);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.lightbox.open { opacity: 1; pointer-events: auto; }

.lightbox-stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lightbox-img {
  max-width: min(1200px, 92vw);
  max-height: 76vh;
  object-fit: contain;
  cursor: zoom-in;
  user-select: none;
  transition: transform 0.3s var(--ease);
}
.lightbox.zoomed .lightbox-img {
  transform: scale(2.2);
  cursor: zoom-out;
}

.lightbox-caption {
  margin-top: 1.25rem;
  max-width: 640px;
  text-align: center;
  font-size: 0.875rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}
.lightbox-caption:empty { display: none; }
.lightbox-hint {
  margin-top: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}

.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 2rem;
  line-height: 1;
  padding: 0.5rem;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.lightbox-close:hover { color: #fff; }

/* Responsive rules for the components above — must stay at the
   end of the file so they override the base rules in the cascade */
@media (max-width: 768px) {
  .back-to-top { bottom: 1.25rem; right: 1.25rem; }
  .compare-grid { grid-template-columns: 1fr; }
  .cs-img-capped img { max-height: 420px; }
  .cs-figure-split { grid-template-columns: 1fr; }
  .lightbox { padding: 3rem 1rem 1.5rem; }
  .lightbox-img { max-width: 94vw; max-height: 70vh; }
  .lightbox-hint { display: none; }
}

/* ════════════════════════════════════════════════════════════
   Discovery Cube brand accents — scoped to body.cs-discovery so
   they apply only to case-study-1, not the shared Shutterfly CSS.
   Representative Discovery Cube palette (bright science blue +
   fresh green); adjust the values below to exact brand specs.
   ════════════════════════════════════════════════════════════ */
.cs-discovery {
  --dc-blue:  #0095D6;   /* primary — Discovery Cube science blue */
  --dc-navy:  #07314A;   /* deep brand blue for the dark block    */
  --dc-sky:   #54B9E7;   /* lighter blue for figures on dark      */
  --dc-green: #7DBA3C;   /* secondary accent                      */
}

/* Section eyebrows down the page */
.cs-discovery .section-label { color: var(--dc-blue); }

/* Sticky section nav: hover + active state */
.cs-discovery .cs-toc-link:hover { color: var(--dc-blue); }
.cs-discovery .cs-toc-link.active {
  color: var(--dc-blue);
  border-bottom-color: var(--dc-blue);
}

/* Scoping-decision callout */
.cs-discovery .cs-callout { border-left: 3px solid var(--dc-blue); }
.cs-discovery .callout-label { color: var(--dc-blue); }

/* Design-principle and figure-note numbering */
.cs-discovery .principle-num,
.cs-discovery .note-num { color: var(--dc-blue); }

/* Research → design traceability lines (the "From: …" sources) */
.cs-discovery .principle-src,
.cs-discovery .principle-src::before { color: var(--dc-green); }

/* Pull quote */
.cs-discovery .cs-pullquote {
  border-left-color: var(--dc-blue);
  background: rgba(0, 149, 214, 0.06);
}

/* Outcome / deliverable result cards */
.cs-discovery .result-val { color: var(--dc-blue); }
.cs-discovery .cs-result { border-top: 2px solid var(--dc-blue); }

/* Survey-baseline dark block → deep brand blue with accent figures */
.cs-discovery .cs-benchmark { background: var(--dc-navy); }
.cs-discovery .cs-benchmark .section-label { color: rgba(255, 255, 255, 0.4); }
.cs-discovery .benchmark-val { color: var(--dc-sky); }

/* Before/after hero (Bernoulli Bench signage) */
.cs-hero-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hba-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm, 10px);
  background: var(--gray-100);
}
.hba-item img {
  display: block;
  width: 100%;
  height: auto;
}
.hba-tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(17, 17, 17, 0.6);
  padding: 0.4rem 0.7rem;
  border-radius: 100px;
}
.hba-item.after .hba-tag { background: var(--dc-blue, #0095D6); }