/* ── NAV (case study) ── */
.nav-back {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  transition: color 0.2s;
}

.nav-back:hover { color: white; }

/* ── CASE STUDY HEADER ── */
.cs-header {
  background: var(--dark);
  padding: 140px 48px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.cs-header::before {
  content: '';
  position: absolute;
  top: -20%; right: -5%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 65%);
  pointer-events: none;
}

.cs-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 20px;
}

.cs-header h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -3px;
  color: white;
  margin-bottom: 32px;
}

.cs-header h1 .dot { color: var(--accent); }

.cs-intro-text p {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255,255,255,0.65);
}

.cs-intro-text p + p { margin-top: 16px; }

.cs-header-illo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.cs-header-illo img {
  width: 100%;
  max-width: 560px;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.5));
}

/* ── SECTIONS ── */
.cs-section {
  padding: 80px 0 48px;
  border-bottom: 1px solid var(--border);
}

.cs-section:last-of-type { border-bottom: none; }

.cs-section-header {
  padding: 0 48px;
  margin-bottom: 36px;
}

.cs-section-header h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1;
}

/* ── SCROLL ROW ── */
.cs-scroll-row {
  display: flex;
  width: 100%;
  overflow-x: auto;
  padding: 0 48px 36px;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  gap: 40px;
}

/* ── BLURB ── */
.cs-blurb {
  width: 460px;
  flex-shrink: 0;
}

.cs-blurb p {
  font-size: 16px;
  line-height: 1.8;
  color: #374151;
}

.cs-blurb p + p { margin-top: 14px; }

.cs-blurb em { font-style: italic; }

.cs-blurb ul {
  padding-left: 20px;
  margin-top: 12px;
}

.cs-blurb li {
  font-size: 16px;
  line-height: 1.8;
  color: #374151;
  margin-top: 6px;
}

/* ── IMAGE FRAME ── */
.cs-img {
  align-self: flex-start;
  flex-shrink: 0;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  height: 42vw;
  width: 52vw;
  display: flex;
  overflow: hidden;
  background: white;
  justify-content: center;
  border: 1px solid var(--border);
}

.cs-img img, .cs-img video {
  max-width: 63vw;
  height: auto;
  align-self: flex-start;
}

.cs-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-img.modal { background: #195F9F; }
.cs-img.modal img { align-self: center; }
.cs-img.middle img { align-self: center; }
.cs-img.gray,
.cs-grid.gray .cs-img { filter: saturate(0%); }

.cs-img.big {
  width: 60vw;
  height: 55vw;
}

.cs-img.no-crop img {
  width: 52vw;
  height: auto;
}

/* ── FRAMELESS IMAGE ── */
.cs-img-loose {
  flex-shrink: 0;
  align-self: flex-start;
}

.cs-img-loose img {
  display: block;
  max-width: 60vw;
  height: auto;
  border-radius: 12px;
}

/* ── WIDE IMAGE ── */
.cs-img-wide {
  flex-shrink: 0;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  overflow: hidden;
  background: white;
  border: 1px solid var(--border);
  align-self: flex-start;
}

.cs-img-wide img {
  display: block;
  height: 500px;
  width: auto;
  max-width: none;
}

/* ── IMAGE GRID ── */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(2, 30vw);
  gap: 12px;
  flex-shrink: 0;
  align-self: flex-start;
}

.cs-grid .cs-img {
  width: 30vw;
  height: auto;
  aspect-ratio: 5 / 3;
}

.cs-grid .cs-img img,
.cs-grid .cs-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: none;
  align-self: unset;
}

.cs-grid .cs-img img.double {
  width: 200%;
  height: 200%;
}

.cs-grid.no-crop .cs-img img {
  width: 100%;
  height: auto;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  nav { padding: 16px 24px; }
  .cs-header { grid-template-columns: 1fr; padding: 110px 24px 60px; gap: 40px; }
  .cs-header-illo { display: none; }
  .cs-section-header { padding-left: 24px; padding-right: 24px; }
  .cs-scroll-row { padding: 0 24px 32px; flex-direction: column; overflow-x: hidden; }
  .cs-blurb { width: 100%; }
  .cs-img { width: 80vw; height: 55vw; }
  .cs-grid { grid-template-columns: repeat(2, 38vw); width: 80vw; }
  .cs-grid .cs-img { width: 38vw; aspect-ratio: 4 / 3; height: auto; }
  footer { padding: 36px 24px; flex-direction: column; align-items: flex-start; }
}