/* ==============================================================
   CASE STUDY — individual project deep dives
   Pattern: hero · dark overview · alternating narrative sections ·
   image grids with captions · prev/next nav.
   Matches the rebuild's design language: 1232px container, Inter
   body, Instrument Serif italic H1/H2, JetBrains Mono eyebrows.
   ============================================================== */

/* ----- HERO (dark · matches pricing/federal aesthetic) ----- */
.cs-hero-26 {
  position:relative; overflow:hidden;
  padding:var(--s-11) 0 var(--s-10);
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(239,41,41,.06), transparent 60%),
    linear-gradient(180deg, var(--c-ink-900) 0%, var(--c-ink-1000) 100%);
  color:var(--c-white);
}
.cs-hero-26 .container-26 { position:relative; z-index:1; }
.cs-hero-26 .federal-crumbs { margin-bottom:var(--s-7); }
.cs-hero-26 .federal-crumbs,
.cs-hero-26 .federal-crumbs a,
.cs-hero-26 .federal-crumbs span { color:var(--c-ink-300); }
.cs-hero-26 .federal-crumbs a:hover { color:var(--c-white); }
.cs-hero-26 .federal-crumbs .sep { color:var(--c-ink-500); }
.cs-hero-eyebrow {
  font-family:var(--font-mono); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-red-400); margin-bottom:var(--s-5); font-weight:600;
}
.cs-hero-title {
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(40px, 6vw, 72px); line-height:1.05;
  color:var(--c-white); margin:0 0 var(--s-5);
  letter-spacing:-0.02em;
}
.cs-hero-title em { font-style:italic; color:var(--c-white); }
.cs-hero-sub {
  font-size:var(--t-lg); line-height:1.55; color:var(--c-ink-200);
  max-width:760px; margin:0;
}

/* ----- PROJECT OVERVIEW (light strip after dark hero) ----- */
.cs-overview-26 {
  padding:var(--s-9) 0;
  background:var(--c-ink-25);
  border-bottom:1px solid var(--c-ink-100);
}
.cs-overview-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:var(--s-7);
}
.cs-overview-item h4 {
  font-family:var(--font-mono); font-size:var(--t-xs);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-ink-500); font-weight:500;
  margin:0 0 var(--s-2);
}
.cs-overview-item p {
  font-family:var(--font-sans); font-size:var(--t-md);
  color:var(--c-ink-900); font-weight:500;
  margin:0; line-height:1.4;
}

/* ----- NARRATIVE SECTIONS ----- */
.cs-section-26 { padding:var(--s-12) 0; }
.cs-section-26.bg-white    { background:var(--c-white); }
.cs-section-26.bg-offwhite { background:var(--c-ink-25); }

/* Single-column editorial (Challenge, Result) */
.cs-editorial-26 {
  max-width:820px; margin:0 auto; text-align:center;
}
.cs-editorial-icon {
  display:inline-flex; width:56px; height:56px;
  align-items:center; justify-content:center;
  background:var(--c-red-50, rgba(220,31,31,0.08));
  color:var(--c-red-600); border-radius:var(--r-full);
  font-size:22px; margin-bottom:var(--s-5);
}
.cs-editorial-heading {
  font-family:var(--font-serif); font-style:italic;
  font-weight:400; font-size:clamp(32px, 4.5vw, 48px);
  line-height:1.1; color:var(--c-ink-900);
  margin:0 0 var(--s-6); letter-spacing:-0.02em;
}
.cs-editorial-body {
  font-size:var(--t-md); line-height:1.7;
  color:var(--c-ink-600); margin:0;
}

/* Two-column narrative (Solution) */
.cs-split-26 {
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--s-10); align-items:center;
  max-width:1232px; margin:0 auto;
}
@media (max-width:900px) {
  .cs-split-26 { grid-template-columns:1fr; gap:var(--s-8); }
}
.cs-split-heading {
  font-family:var(--font-serif); font-style:italic;
  font-weight:400; font-size:clamp(28px, 3.5vw, 40px);
  line-height:1.15; color:var(--c-ink-900);
  margin:0 0 var(--s-5); letter-spacing:-0.02em;
}
.cs-split-body {
  font-size:var(--t-md); line-height:1.7;
  color:var(--c-ink-600); margin:0 0 var(--s-7);
}
.cs-pillars { list-style:none; padding:0; margin:0; }
.cs-pillars li {
  position:relative; padding:var(--s-4) 0 var(--s-4) var(--s-8);
  border-top:1px solid var(--c-ink-100);
  font-size:var(--t-base); line-height:1.55; color:var(--c-ink-700);
}
.cs-pillars li:last-child { border-bottom:1px solid var(--c-ink-100); }
.cs-pillars li::before {
  content:"✓"; position:absolute; left:0; top:var(--s-4);
  width:24px; height:24px; display:flex;
  align-items:center; justify-content:center;
  background:var(--c-red-600); color:var(--c-white);
  border-radius:var(--r-full); font-size:12px; font-weight:700;
}
.cs-pillars li strong { color:var(--c-ink-900); display:block; margin-bottom:2px; }

.cs-split-visual img {
  width:100%; height:auto; display:block;
  border-radius:var(--r-4);
  box-shadow:0 24px 60px rgba(11,15,30,0.14);
  border:1px solid var(--c-ink-100);
}

/* ----- SECTION HEADING (for image-grid sections) ----- */
.cs-group-head {
  max-width:720px; margin:0 auto var(--s-9); text-align:center;
}
.cs-group-icon {
  display:inline-flex; width:48px; height:48px;
  align-items:center; justify-content:center;
  background:rgba(220,31,31,0.08);
  color:var(--c-red-600); border-radius:var(--r-full);
  font-size:18px; margin-bottom:var(--s-4);
}
.cs-group-heading {
  font-family:var(--font-serif); font-style:italic;
  font-weight:400; font-size:clamp(28px, 3.5vw, 40px);
  line-height:1.15; color:var(--c-ink-900);
  margin:0; letter-spacing:-0.02em;
}

/* ----- IMAGE GRID ----- */
.cs-grid-26 {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:var(--s-6); align-items:start;
}
.cs-grid-26.tight {
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:var(--s-5);
}
.cs-grid-item figure { margin:0; }
.cs-grid-item img {
  width:100%; height:auto; display:block;
  border-radius:var(--r-3);
  box-shadow:0 16px 40px rgba(11,15,30,0.10);
  border:1px solid var(--c-ink-100);
  transition:transform var(--d-base), box-shadow var(--d-base);
}
.cs-grid-item:hover img {
  transform:translateY(-2px);
  box-shadow:0 20px 48px rgba(11,15,30,0.14);
}
.cs-grid-item figcaption {
  margin-top:var(--s-3);
  font-family:var(--font-sans); font-weight:600;
  font-size:var(--t-base); color:var(--c-ink-800);
  text-align:center;
}

/* ----- PREV/NEXT NAV ----- */
.cs-nav-26 {
  padding:var(--s-9) 0;
  background:var(--c-white);
  border-top:1px solid var(--c-ink-100);
}
.cs-nav-inner {
  display:flex; justify-content:space-between; gap:var(--s-5);
  flex-wrap:wrap; align-items:center;
}
.cs-nav-link {
  display:inline-flex; align-items:center; gap:var(--s-3);
  font-family:var(--font-sans); font-weight:600; font-size:var(--t-base);
  color:var(--c-ink-900); text-decoration:none;
  padding:var(--s-3) var(--s-5);
  border:1px solid var(--c-ink-200); border-radius:var(--r-full);
  transition:background var(--d-fast), border-color var(--d-fast);
}
.cs-nav-link:hover {
  background:var(--c-ink-25); border-color:var(--c-ink-400);
}
.cs-nav-link.primary {
  background:var(--c-ink-900); color:var(--c-white); border-color:var(--c-ink-900);
}
.cs-nav-link.primary:hover { background:var(--c-ink-700); border-color:var(--c-ink-700); }

/* ----- RESPONSIVE ----- */
@media (max-width:768px) {
  .cs-hero-26 { padding:var(--s-10) 0 var(--s-9); }
  .cs-section-26 { padding:var(--s-10) 0; }
  .cs-overview-26 { padding:var(--s-9) 0; }
  .cs-overview-grid { gap:var(--s-5); }
  .cs-nav-inner { flex-direction:column; align-items:stretch; }
  .cs-nav-link { justify-content:center; }
}