.cs-toc{
  /* Park below the island nav (.nav-shell sits at top:16px, ~56-64px tall). */
  position: sticky; top: 88px; z-index: 30;
  background: linear-gradient(180deg, rgba(247,245,238,.92), rgba(247,245,238,.78));
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
  margin-top: 88px;
}
.cs-toc-inner{
  display: flex; align-items: center; gap: 24px;
  padding: 14px 0; flex-wrap: wrap;
}
.cs-toc-meta{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--subtle);
  padding-right: 20px; border-right: 1px solid var(--line);
}
.cs-toc-meta strong{ color: var(--ink); font-weight: 500; }
.cs-toc nav{ display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.cs-toc a{
  font-size: 13px; padding: 6px 12px; border-radius: var(--r-pill);
  color: var(--subtle); transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.cs-toc a:hover{ background: var(--mute); color: var(--ink); }
.cs-toc a.active{ background: var(--ink); color: var(--paper); }
.cs-toc .toc-cta{
  background: var(--accent-2); color: var(--paper);
  padding: 10px 18px; font-weight: 500; font-size: 13.5px;
}
.cs-toc .toc-cta:hover{ background: var(--accent-3); color: var(--paper); }

/* When the TOC pins to the top of the viewport, extend its blurred
   backdrop UPWARD to fill the area behind the island nav. The bleed
   div is injected once by the inline script in single-work.php and
   toggled with .is-pinned. */
.cs-toc-bleed{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 88px;
  z-index: 28;                 /* below .nav-shell (50) and .cs-toc (30) */
  background: linear-gradient(180deg, rgba(247,245,238,.92), rgba(247,245,238,.78));
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.cs-toc-bleed.is-pinned{
  opacity: 1;
  transform: translateY(0);
}

/* Hero */
.cs-hero{ padding: 56px 0 48px; }
.cs-hero-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--subtle); margin-bottom: 20px;
}
.cs-hero-eyebrow .crumb{ color: var(--subtle); }
.cs-hero-eyebrow .crumb a{ color: var(--subtle); }
.cs-hero-eyebrow .crumb a:hover{ color: var(--accent-2); }
.cs-hero-eyebrow .sep{ color: var(--quiet); }

/* Case-hero title inherits the global h1 sizing — clamp(38px, 5.4vw, 76px),
   line-height: 0.98, letter-spacing: -0.03em — so case studies sit at the
   same scale as every other landing/hero on the site. Only the layout-
   specific bits (bottom margin, line-balance ceiling) live here. */
.cs-hero-title{
  margin: 0 0 28px;
  max-width: 18ch;
  text-wrap: balance;
}
.cs-hero-title .it{ font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.cs-hero-lede{
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45;
  color: var(--ink-2); max-width: 60ch; margin: 0 0 36px;
}

/* Project meta strip — high-density facts above hero image */
.cs-meta{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
}
@media (min-width: 768px){ .cs-meta{ grid-template-columns: repeat(5, 1fr); gap: 32px; } }
.cs-meta-item h6{
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--subtle); margin: 0 0 10px; font-weight: 500;
}
.cs-meta-item p{ margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink); font-weight: 500; }
.cs-meta-item p .quiet{ color: var(--subtle); font-weight: 400; }

/* Hero KPI rail — the conversion hook */
.cs-hero-kpis{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  margin-bottom: 48px;
}
@media (min-width: 768px){ .cs-hero-kpis{ grid-template-columns: repeat(4, 1fr); } }
.cs-hero-kpi{
  background: var(--paper-2); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.cs-hero-kpi .num{
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(36px, 3.6vw, 54px); line-height: 1;
  letter-spacing: -0.03em; color: var(--ink);
}
.cs-hero-kpi .num .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent-2); }
.cs-hero-kpi .lbl{
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--subtle);
}
.cs-hero-kpi .delta{
  font-size: 13px; color: var(--subtle); margin-top: auto; padding-top: 6px;
}

/* Hero image — full-bleed within container */
.cs-hero-img{
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 16/9; background: var(--mute);
}
.cs-hero-img img{ width: 100%; height: 100%; object-fit: cover; display:block; }
.cs-hero-img .badge{
  position: absolute; left: 20px; top: 20px;
  display: inline-flex; gap: 8px; align-items: center;
  background: rgba(15,15,14,.78); color: var(--paper);
  padding: 8px 14px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cs-hero-img .badge .dot{ width: 6px; height: 6px; border-radius: 50%; background: #95BF47; }

/* Section heading helper for case study */
.cs-section{ padding: 96px 0; }
.cs-section.tight{ padding: 64px 0; }
.cs-section.dark{ background: var(--ink); color: var(--paper); }
.cs-section.dark h2,
.cs-section.dark h3{ color: var(--paper); }
.cs-section.dark .lede{ color: rgba(247,245,238,.78); }
.cs-section.mute{ background: var(--mute); }

.cs-sec-head{
  display: grid; grid-template-columns: 1fr; gap: 8px;
  margin-bottom: 56px;
}
@media (min-width: 1024px){ .cs-sec-head{ grid-template-columns: 240px 1fr; gap: 64px; align-items: start; } }
.cs-sec-head .num{
  font-family: var(--mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--subtle);
  display: flex; align-items: center; gap: 12px;
}
.cs-sec-head .num::before{
  content: ""; width: 24px; height: 1px; background: var(--ink);
}
.cs-sec-head h2{
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(32px, 3.6vw, 56px); line-height: 1.04;
  letter-spacing: -0.025em; margin: 0; max-width: 22ch; text-wrap: balance;
}
.cs-sec-head h2 .it{ font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Brief — two-column problem statement */
.cs-brief{
  display: grid; grid-template-columns: 1fr; gap: 56px;
}
@media (min-width: 1024px){ .cs-brief{ grid-template-columns: 240px 1fr 1fr; gap: 64px; } }
.cs-brief h6{
  font-family: var(--mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--subtle); margin: 0 0 18px; font-weight: 500;
}
.cs-brief p{
  font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5;
  color: var(--ink-2); margin: 0 0 18px;
}
.cs-brief .pain-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.cs-brief .pain-list li{
  display: grid; grid-template-columns: 24px 1fr; gap: 12px;
  font-size: 16px; line-height: 1.5; color: var(--ink-2);
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.cs-brief .pain-list li:last-child{ border-bottom: 0; }
.cs-brief .pain-list .x{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; margin-top: 1px;
}

/* Approach — pillar cards */
.cs-pillars{
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
@media (min-width: 768px){ .cs-pillars{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px){ .cs-pillars{ grid-template-columns: repeat(4, 1fr); } }
.cs-pillar{
  background: var(--paper); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 320px;
}
.cs-pillar .step{
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--accent-2);
}
.cs-pillar h3{
  font-family: var(--sans); font-weight: 500;
  font-size: 24px; line-height: 1.15; letter-spacing: -0.015em;
  margin: 0; max-width: 16ch; text-wrap: balance;
}
.cs-pillar p{ font-size: 15px; line-height: 1.5; color: var(--subtle); margin: 0; }
.cs-pillar .pillar-tags{
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px;
}
.cs-pillar .pillar-tags span{
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--subtle);
  padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-pill);
}

/* Editorial story block — full-bleed image with offset caption */
.cs-fullbleed{
  position: relative; margin: 56px 0;
  border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 21/9; background: var(--mute);
}
.cs-fullbleed img{ width: 100%; height: 100%; object-fit: cover; display:block; }
.cs-fullbleed .cap{
  position: absolute; left: 24px; bottom: 20px;
  background: rgba(15,15,14,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--paper); padding: 10px 16px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
}

/* Two-up image grid (desktop + mobile) */
.cs-twoup{
  display: grid; grid-template-columns: 1fr; gap: 24px;
  margin-top: 32px;
}
@media (min-width: 900px){ .cs-twoup{ grid-template-columns: 2fr 1fr; gap: 32px; } }
.cs-twoup figure{ margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--mute); }
.cs-twoup figure img{ width: 100%; height: 100%; object-fit: cover; display:block; aspect-ratio: 4/3; }
.cs-twoup figure.tall img{ aspect-ratio: 3/4; }

/* Pull quote — editorial */
.cs-pullquote{
  margin: 32px 0; padding: 56px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-align: center; max-width: 24ch; margin-left: auto; margin-right: auto;
}
.cs-pullquote q{
  display: block; quotes: none;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3.4vw, 48px); line-height: 1.18;
  letter-spacing: -0.02em; color: var(--ink);
}
.cs-pullquote q::before{ content: "\201C"; color: var(--accent); }
.cs-pullquote q::after{ content: "\201D"; color: var(--accent); }
.cs-pullquote .who{
  display: block; margin-top: 24px;
  font-family: var(--mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--subtle);
}

/* Build log — what we shipped */
.cs-buildlog{
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--line);
}
.cs-buildlog .row{
  display: grid; grid-template-columns: 64px 1fr;
  gap: 24px; padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (min-width: 768px){
  .cs-buildlog .row{ grid-template-columns: 80px 220px 1fr 200px; gap: 32px; align-items: center; }
}
.cs-buildlog .row .idx{
  font-family: var(--mono); font-size: 12px; color: var(--subtle); letter-spacing: .14em;
}
.cs-buildlog .row .label{
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--accent-2);
  grid-column: 2 / -1;
}
@media (min-width: 768px){ .cs-buildlog .row .label{ grid-column: auto; } }
.cs-buildlog .row .desc{
  font-size: 17px; color: var(--ink); line-height: 1.4;
  grid-column: 2 / -1;
}
@media (min-width: 768px){ .cs-buildlog .row .desc{ grid-column: auto; } }
.cs-buildlog .row .desc .quiet{ color: var(--subtle); font-size: 14px; display: block; margin-top: 4px; }
.cs-buildlog .row .stack{
  display: flex; flex-wrap: wrap; gap: 6px;
  grid-column: 2 / -1;
}
@media (min-width: 768px){ .cs-buildlog .row .stack{ grid-column: auto; justify-content: flex-end; } }
.cs-buildlog .row .stack span{
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--subtle); padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--r-pill);
}

/* Big results — the conversion section */
.cs-results{
  background: var(--ink); color: var(--paper);
  padding: 120px 0; position: relative; overflow: hidden;
}
.cs-results::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(201,83,46,.18), transparent 60%);
  pointer-events: none;
}
.cs-results .container{ position: relative; z-index: 1; }
.cs-results .eyebrow{ color: rgba(247,245,238,.65); }
.cs-results .eyebrow .dot{ background: var(--accent); }
.cs-results h2{
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(36px, 4.6vw, 72px); line-height: 1.02;
  letter-spacing: -0.03em; margin: 12px 0 56px; color: var(--paper);
  max-width: 22ch; text-wrap: balance;
}
.cs-results h2 .it{ font-family: var(--serif); font-style: italic; font-weight: 400; }
.cs-results-grid{
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid rgba(247,245,238,.18);
}
@media (min-width: 768px){ .cs-results-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px){ .cs-results-grid{ grid-template-columns: repeat(4, 1fr); } }
.cs-result{
  padding: 36px 28px 36px 0;
  border-bottom: 1px solid rgba(247,245,238,.18);
  position: relative;
}
@media (min-width: 768px){
  .cs-result{ padding: 36px 32px; border-right: 1px solid rgba(247,245,238,.18); }
  .cs-result:nth-child(2n){ border-right: 0; }
}
@media (min-width: 1180px){
  .cs-result{ border-right: 1px solid rgba(247,245,238,.18); }
  .cs-result:nth-child(2n){ border-right: 1px solid rgba(247,245,238,.18); }
  .cs-result:last-child{ border-right: 0; }
}
.cs-result .num{
  font-family: var(--sans); font-weight: 500;
  /* Cap at 81px — at the 4-up grid (≥1180 px) each .cs-result column
     is ~270 px after gutters, and 96px values like "+155.5%" pushed
     past the column edge. 81px keeps the headline impactful while
     letting the longest values sit on a single line. */
  font-size: clamp(56px, 6vw, 81px); line-height: 0.95;
  letter-spacing: -0.04em; color: var(--paper);
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px;
}
.cs-result .num .pct{ font-size: 0.5em; color: var(--accent); font-family: var(--serif); font-style: italic; font-weight: 400; }
.cs-result .num .arrow{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--accent); font-size: 0.62em;
  margin-left: 4px;
}
.cs-result .lbl{
  font-size: 17px; line-height: 1.35; color: var(--paper);
  margin-bottom: 6px; font-weight: 500;
}
.cs-result .delta{
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: rgba(247,245,238,.6);
}
.cs-results-foot{
  margin-top: 56px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  padding-top: 32px; border-top: 1px solid rgba(247,245,238,.18);
  font-size: 14px; color: rgba(247,245,238,.65);
}
.cs-results-foot strong{ color: var(--paper); font-weight: 500; }

/* Testimonial — full-width editorial */
.cs-testi{
  display: grid; grid-template-columns: 1fr; gap: 32px;
  align-items: center;
}
@media (min-width: 1024px){ .cs-testi{ grid-template-columns: 360px 1fr; gap: 64px; } }
.cs-testi-img{
  border-radius: var(--r-lg); overflow: hidden; background: var(--mute);
  aspect-ratio: 4/5;
}
.cs-testi-img img{ width: 100%; height: 100%; object-fit: cover; display:block; }
.cs-testi-body q{
  display: block; quotes: none;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(24px, 2.4vw, 36px); line-height: 1.25;
  letter-spacing: -0.015em; color: var(--ink); margin: 0 0 28px;
  text-wrap: pretty;
}
.cs-testi-body q .it{ font-family: var(--serif); font-style: italic; font-weight: 400; }
.cs-testi-attrib{
  display: flex; align-items: center; gap: 14px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.cs-testi-attrib .nm{ font-weight: 500; font-size: 16px; color: var(--ink); }
.cs-testi-attrib .ttl{ font-size: 13.5px; color: var(--subtle); margin-top: 2px; }
.cs-testi-attrib .logo{
  margin-left: auto; font-family: var(--serif); font-style: italic; font-size: 24px;
  color: var(--ink); letter-spacing: -0.02em;
}

/* Process timeline — week-by-week */
.cs-timeline{
  position: relative; padding-left: 24px;
  border-left: 1px solid var(--line);
}
.cs-timeline-row{
  position: relative; padding: 18px 0 28px;
  display: grid; grid-template-columns: 1fr; gap: 4px;
}
@media (min-width: 768px){ .cs-timeline-row{ grid-template-columns: 140px 1fr 1fr; gap: 32px; } }
.cs-timeline-row::before{
  content: ""; position: absolute; left: -29px; top: 28px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  outline: 4px solid var(--paper);
}
.cs-timeline-row .week{
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--accent-2);
}
.cs-timeline-row .h{ font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.cs-timeline-row .d{ font-size: 14.5px; color: var(--subtle); line-height: 1.5; }

/* Visual showcase — device frames */
.cs-showcase{
  background: var(--mute);
  padding: 80px 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 80px 0;
}
.cs-showcase-grid{
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
}
@media (min-width: 1024px){ .cs-showcase-grid{ grid-template-columns: 1fr 320px; gap: 56px; } }
.cs-showcase .desktop-frame{
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: #fff;
  aspect-ratio: 16/10;
}
.cs-showcase .desktop-frame img{ width: 100%; height: 100%; object-fit: cover; display:block; }
.cs-showcase .phone-frame{
  margin: 0 auto; width: 240px;
  border-radius: 32px; overflow: hidden;
  border: 8px solid var(--ink); background: var(--ink);
  aspect-ratio: 9/19; box-shadow: var(--shadow-3);
}
.cs-showcase .phone-frame img{ width: 100%; height: 100%; object-fit: cover; display:block; }

/* Next case study */
.cs-next{
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); margin-bottom: 80px;
  display: block; min-height: 400px;
  background-size: cover; background-position: center;
  color: var(--paper);
}
.cs-next::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,14,.0) 30%, rgba(15,15,14,.85));
  z-index: 1;
}
.cs-next .inner{
  position: relative; z-index: 2;
  padding: 40px; min-height: 400px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.cs-next .top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.cs-next .eyebrow-light{
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--accent-soft);
  display: inline-flex; align-items: center; gap: 8px;
}
.cs-next .eyebrow-light::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.cs-next .nx-arrow{
  font-family: var(--serif); font-style: italic; font-size: 32px;
  transition: transform .3s var(--ease-out);
}
.cs-next:hover .nx-arrow{ transform: translateX(8px); }
.cs-next h3{
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(28px, 3.6vw, 56px); line-height: 1.05;
  letter-spacing: -0.025em; max-width: 22ch;
  color: var(--paper); margin: 0;
}
.cs-next h3 .it{ font-family: var(--serif); font-style: italic; font-weight: 400; }
.cs-next .nx-meta{
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: rgba(247,245,238,.7);
}

/* Conversion CTA — sticky-feel block */
.cs-cta{
  background: var(--accent-soft);
  padding: 80px 0;
  border-radius: var(--r-lg);
  margin-bottom: 80px;
  position: relative;
  overflow: hidden;
}
.cs-cta::before{
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,83,46,.22), transparent 70%);
}
.cs-cta-grid{
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
  position: relative; z-index: 1;
}
@media (min-width: 1024px){ .cs-cta-grid{ grid-template-columns: 1.2fr 1fr; gap: 56px; } }
.cs-cta h2{
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(32px, 3.8vw, 56px); line-height: 1.05;
  letter-spacing: -0.025em; margin: 0 0 20px;
  max-width: 18ch; text-wrap: balance;
}
.cs-cta h2 .it{ font-family: var(--serif); font-style: italic; font-weight: 400; }
.cs-cta p{ font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 0 0 28px; max-width: 50ch; }
.cs-cta-actions{ display: flex; flex-wrap: wrap; gap: 14px; }
.cs-cta-side{
  background: var(--paper); border-radius: var(--r-md); padding: 28px;
  border: 1px solid var(--line);
}
.cs-cta-side h6{
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--subtle); margin: 0 0 14px; font-weight: 500;
}
.cs-cta-side ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-cta-side li{
  display: grid; grid-template-columns: 24px 1fr; gap: 10px;
  font-size: 14.5px; line-height: 1.45; color: var(--ink-2);
}
.cs-cta-side .check{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}

/* Reading-progress bar */
.cs-progress{
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent); transform-origin: 0 50%;
  transform: scaleX(0); z-index: 60;
  transition: transform .15s linear;
}

/* ── case-brief body content typography (the prototype 3-col grid handles layout) ── */
.cs-brief .cs-brief-body { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.cs-brief .cs-brief-body p { margin: 0 0 1em; }
.cs-brief .cs-brief-body p:last-child { margin-bottom: 0; }
.cs-brief .cs-brief-body h3,
.cs-brief .cs-brief-body h4 {
  margin: 1.6em 0 .5em;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 500;
}

/* ── case-approach body width to match prototype ── */
.cs-section#approach .cs-approach-body { max-width: 880px; margin-left: auto; margin-right: auto; }
.cs-section#approach .cs-approach-body p { margin: 0 0 1em; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.cs-section#approach .cs-approach-body h3,
.cs-section#approach .cs-approach-body h4 {
  margin: 1.6em 0 .5em;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 500;
}

/* ── Shipped block: gallery grid (auto-fit so it adapts to image count) ── */
.cs-shipped-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.cs-shipped-grid figure {
  margin: 0;
  border-radius: var(--r-lg, 12px);
  overflow: hidden;
  background: var(--paper-2);
}
.cs-shipped-grid figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
@media (max-width: 600px) {
  .cs-shipped-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Results-grid + post-outcome card overflow fix ── */
/* When grid-template-columns is `repeat(N, 1fr)` and a cell's content has
   wide min-content (long labels, no-wrap deltas), the 1fr track grows to
   accommodate, overflowing the grid. min-width: 0 lets the track honor 1fr. */
.cs-results-grid > .cs-result,
.cs-buildlog > .row,
.cs-pillars > .cs-pillar {
  min-width: 0;
}
.cs-result .num,
.cs-result .lbl,
.cs-result .delta {
  overflow-wrap: break-word;
}
/* Build-log row protection too */
.cs-buildlog .row > * {
  min-width: 0;
}