/*! Mobile layout pass — denser continuity; packs outcomes + process glow */

@media (max-width: 860px) {
  :root { --section-space: clamp(40px, 9vw, 56px); }
  #work.section { padding-bottom: clamp(28px, 6vw, 40px); }
  #compare.section,
  #compare.compare-story,
  #compare.compare-lite,
  #packs.section,
  #process.section,
  #process.process-desk { padding-block: clamp(40px, 8vw, 56px); }
  #process .pipeline-intro { font-size: 0.95rem; }
  #process .pipeline-heading { margin-bottom: 16px; }
  .studio-panel-frame { padding: 14px 12px; }
  .studio-panel-head h2 { font-size: clamp(1.45rem, 6.5vw, 1.85rem); }
  /* studio panel FAQ index layout owned by site.css */
  /* #faq .faq-index { grid-template-columns: 1fr 1fr; } */
  #faq .faq-answer-pane { padding-top: 12px; }
  #faq .faq-answer-current { font-size: 0.9rem; }

  #packs.packs-outcomes .packs-head {
    gap: 12px;
    margin-bottom: 18px;
  }
  #packs .outcomes-panel {
    border-radius: 22px;
  }
  #packs .outcomes-rail {
    margin-inline: -4px;
    padding-inline: 4px;
    scrollbar-width: none;
  }
  #packs .outcomes-rail::-webkit-scrollbar { display: none; }
  #packs .pack-rail-card-detail {
    gap: 12px;
  }

  #compare .compare-lite-stage { row-gap: 8px; }
  #cases.cases { padding-block: clamp(40px, 8vw, 56px); }
  .cases-head-main h2 { font-size: clamp(2.1rem, 10vw, 3.2rem); }
  .cases-bar { padding: 14px 16px; }
}

@media (max-width: 360px) {
  .cases-head, .cases-bar { grid-template-columns: 1fr; }
  .case-study-media img { min-height: 0; aspect-ratio: 16 / 9; }
}