/* ==========================================================================
   Voiceitt case studies (voiceitt-app, voiceitt-customer-support)
   Shared case-study layout: intro, summary cards, content sections,
   icon features and "More Projects" cards.
   ========================================================================== */
.case-study p { margin: 0; }
.case-study h1 { font-size: 24px; line-height: 1.2; }
.case-study h2 { font-size: 22px; line-height: 1.2; }
.case-study h3 { font-size: 18px; line-height: 1.2; }
.case-study img { height: auto; }

/* ---------- Sections ---------- */
.cs-section { padding: 48px 0; background: var(--c-white); }
.cs-section--gray { background: var(--c-gray-100); }
.cs-section--navy { background: var(--c-navy); }
.cs-section--navy h2 { color: var(--c-white); }

.cs-stack { display: flex; flex-direction: column; gap: 24px; }
.cs-head { padding: 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.cs-head--left { align-items: stretch; text-align: left; }
.cs-head p { margin-bottom: 1.4px; }
.cs-text { font-size: 14px; line-height: 1.2; color: var(--c-navy); }
.cs-muted { color: var(--c-text); }

/* Two-column split (image + text) */
.cs-split { display: flex; gap: 24px; }
.cs-split > * { width: 100%; flex: 0 1 auto; min-width: 0; padding: 10px; display: flex; flex-direction: column; justify-content: center; }
.cs-split__media { align-items: center; }
.cs-split__media img { width: 100%; }
.cs-split__text { align-items: flex-start; gap: 16px; }
.cs-copy p { margin-bottom: 22.4px; }
.cs-copy p:last-child { margin-bottom: -1.6px; }
.cs-list { margin: 0 0 21px 3em; padding-left: 0; font-size: 14px; line-height: 1.2; }
.cs-list ul { margin: 0 0 0 1.5em; padding-left: 0; list-style: disc; }

.cs-center { text-align: center; }
.cs-impact { display: flex; flex-direction: column; gap: 8px; }

/* Centered media row */
.cs-media { padding: 10px; display: flex; justify-content: center; gap: 48px; }
.cs-media > * { min-width: 0; }

/* ---------- Intro ---------- */
.cs-intro { margin-top: 80px; padding: 48px 0; }
.cs-intro__head { display: flex; gap: 24px; padding: 10px; margin-bottom: 16px; align-items: flex-start; }
.cs-intro__title { width: 100%; flex: 0 1 auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cs-intro__title h1 { color: var(--c-navy); }
.cs-intro__title p { color: var(--c-text); margin-bottom: 22.4px; }
.cs-intro__meta { width: 48%; flex: 0 1 auto; padding: 10px; display: flex; justify-content: flex-end; align-items: flex-start; gap: 40px; }
.cs-meta { width: 100%; flex: 0 1 auto; padding: 10px; display: flex; flex-direction: column; align-items: flex-start; }
.cs-meta p:last-child { margin-bottom: 22.4px; }
.cs-meta a { display: inline-block; line-height: 0; }
.cs-meta img { width: 145px; max-width: 100%; }
.case-study .cs-label { font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--c-text); margin-bottom: 23.2px; }
.cs-banner { display: block; width: 100%; }

.cs-summary { margin-top: 40px; padding: 10px; display: flex; justify-content: space-evenly; align-items: center; gap: 24px; }
.cs-summary__card {
  flex: 1 1 0; min-height: 120px; padding: 24px; border-radius: 8px; background: var(--c-gray-100);
  display: flex; flex-direction: column; align-items: flex-start;
}
.cs-summary__card .cs-label { margin-bottom: 27.2px; }
.cs-summary__card p:last-child { margin-bottom: 22.4px; color: var(--c-navy); }

/* ---------- Icon features (navy sections) ---------- */
.cs-icon { display: flex; justify-content: center; padding-bottom: 5px; flex-shrink: 0; }
.cs-icon svg { display: block; width: 72px; height: 72px; }
.cs-features { padding: 10px; display: flex; justify-content: center; align-items: flex-start; gap: 48px; }
.cs-feature { width: 25%; flex: 0 1 auto; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cs-feature p { width: 100%; padding: 10px; color: var(--c-white); text-align: center; }
.cs-feature p::after { content: ""; display: block; height: .4px; }

/* ---------- More projects ---------- */
.cs-more { gap: 32px; }
.cs-more h2 { text-align: left; }
.cs-projects { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.cs-project {
  width: 40%; flex: 1 0 auto; min-height: 400px; padding: 20px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  border: 1px solid var(--c-accent); border-radius: 8px;
  background-position: center; background-size: cover;
  transition: all .3s ease-in-out;
}
.cs-project:hover, .cs-project:focus-visible { transform: scale(1.03); }
.cs-project__info { padding: 10px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; min-width: 0; }
.cs-project__info img { width: auto; height: 21px; }
.case-study .cs-project__title { font-family: var(--f-head); font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--c-navy); margin: 0 0 20px; }
.case-study .cs-project__title--light { color: var(--c-white); margin-bottom: 22.4px; }
.cs-project .cs-icon { margin-right: -7px; }
.cs-project .cs-icon svg { width: 50px; height: 50px; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .cs-project { padding: 16px; }
}

/* Tablet polish: the narrow side column made the client/services meta and the
   summary cards cramped, so the meta drops below the title and cards share a height. */
@media (min-width: 768px) and (max-width: 1024px) {
  .cs-intro__head { flex-wrap: wrap; row-gap: 0; }
  .cs-intro__meta { width: 100%; justify-content: flex-start; padding-top: 0; }
  .cs-meta { width: auto; min-width: 160px; }
  .cs-summary { align-items: stretch; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .cs-intro__head, .cs-intro__meta, .cs-summary, .cs-split, .cs-features, .cs-media, .cs-projects { flex-direction: column; align-items: stretch; }
  .cs-intro__head > *, .cs-intro__meta > *, .cs-split > *, .cs-features > *, .cs-media > *, .cs-projects > * { width: 100%; }
  .cs-summary { align-items: center; }
  .cs-summary__card { flex: 0 0 auto; width: 90%; }
  .cs-feature { align-self: stretch; }
  .cs-project:hover { transform: none; }
  .cs-project .cs-icon { margin-right: -10px; }
}