/* Case-study mobile density.
   Loaded AFTER each page's own <style> so it actually wins — the block in
   styles.css was being overridden by the per-page rules that follow it. */
@media (max-width: 760px){
  .case-hero{ padding-top: 64px; padding-bottom: 24px; }
  .case-hero .lead{ margin-top: 28px; }
  .case-meta{ margin-top: 40px; grid-template-columns: 1fr; gap: 22px; }

  .case-cover{ margin: 28px 0 0; }
  .case-cover .cap{ margin-top: 10px; }

  /* the big one: 120px row-gap between every body block */
  .case-body{ padding-top: 40px; gap: 20px; row-gap: 44px; }
  .sec{ gap: 12px; }
  .sec .body p + p{ margin-top: 0.9em; }

  .shots{ gap: 16px; }
  .shot .cap,
  .case-img .cap{ margin-top: 10px; }
  .sec image-slot,
  .sec .frame,
  .row2 image-slot,
  .case-pair image-slot{ margin-bottom: 0; }

  .snapshot h2{ margin-bottom: 22px; }
  .snap-row{ padding: 18px 0; }

  .next{ margin-top: 72px; padding: 48px var(--gutter); }
}

/* tablet: meta as a 2×2 grid */
@media (min-width: 761px) and (max-width: 1024px){
  .case-meta{ grid-template-columns: 1fr 1fr; gap: 32px 40px; }
}

@media (max-width: 760px){
  /* case studies keep the compact footer rhythm (200px site rule excluded) */
  footer{ padding-top: 72px; }
}