/* ══════════════════════════════════════
   MOBILE FIX v2 — geometry + overflow
   ══════════════════════════════════════ */

/* 1. NUMBERS — never overflow, always 2x2 on mobile */
@media (max-width: 768px) {
  .numbers-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
  }
  .num-cell {
    padding: 28px 20px !important;
    overflow: hidden;
  }
  .num-val {
    font-size: clamp(1.8rem, 10vw, 2.8rem) !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
    white-space: nowrap;
  }
  .num-lbl {
    font-size: .52rem !important;
    letter-spacing: .1em !important;
    line-height: 1.4;
    margin-top: 8px !important;
  }
}

/* 2. CASES GRID — 1 col, zero gap between cards */
@media (max-width: 768px) {
  .cases-grid {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  .case-card {
    padding: 28px 20px !important;
    margin: 0 !important;
  }
  .case-tag  { font-size: .56rem !important; margin-bottom: 10px !important; }
  .case-title { font-size: .9rem !important; margin-bottom: 8px !important; line-height: 1.4 !important; }
  .case-result { font-size: .78rem !important; }
}

/* 3. ABOUT STRIP — kill the 2-col grid gap issue */
@media (max-width: 768px) {
  .about-strip {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 56px 20px !important;
  }
  .about-strip > * { width: 100% !important; max-width: 100% !important; }
  .about-strip > *:first-child { margin-bottom: 36px; }
  .format-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    margin-top: 28px !important;
  }
  .fmt-card { padding: 22px 18px !important; }
  .fmt-title { font-size: .72rem !important; }
  .fmt-desc  { font-size: .78rem !important; line-height: 1.6 !important; }
}

/* 4. SECTION PADS — uniform on mobile */
@media (max-width: 768px) {
  section, .sec-pad, .sec-svc-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .services, .work, .process, .about, .cta-strip { padding-left: 20px !important; padding-right: 20px !important; }
  .case-full  { padding: 48px 20px !important; }
  .about-block { padding: 56px 20px !important; }
  .team-block  { padding: 56px 20px !important; }
  .manifesto   { padding: 56px 20px !important; }
  .contact-body { padding: 56px 20px !important; }
  .svc-block   { padding: 56px 20px !important; }
  .price-intro { padding: 56px 20px !important; }
  .price-note  { padding: 56px 20px !important; }
}

/* 5. HERO — show content, not empty space */
@media (max-width: 900px) {
  .hero {
    min-height: auto !important;
    padding: 96px 20px 56px !important;
    justify-content: flex-start !important;
  }
  .hero-title {
    font-size: clamp(2.2rem, 10.5vw, 3.8rem) !important;
    letter-spacing: -.02em !important;
    line-height: .97 !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
  .hero-sub {
    font-size: .85rem !important;
    line-height: 1.7 !important;
    margin-top: 24px !important;
    max-width: 100% !important;
  }
  .hero-actions {
    margin-top: 32px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .hero-eyebrow { font-size: .58rem !important; }
}

/* 6. SERVICES GRID on homepage — 1 col */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  .svc-card { padding: 28px 20px !important; }
  .svc-card-title { font-size: 1rem !important; }
  .svc-card-desc  { font-size: .78rem !important; line-height: 1.6 !important; }
}

/* 7. CTA strip */
@media (max-width: 768px) {
  .cta-strip { padding: 64px 20px !important; }
  .cta-title {
    font-size: clamp(2rem, 10vw, 3.2rem) !important;
    margin-bottom: 32px !important;
    line-height: .97 !important;
  }
  .cta-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}

/* 8. Footer */
@media (max-width: 768px) {
  footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 36px 20px !important;
  }
  .f-nav { flex-wrap: wrap !important; gap: 10px 20px !important; }
  .f-copy { font-size: .58rem !important; }
}

/* 9. Cases page — full case items */
@media (max-width: 768px) {
  .case-full {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .case-meta { position: static !important; }
  .case-brand { font-size: 1.4rem !important; }
  .case-services-list {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .cs-tag {
    font-size: .56rem !important;
    padding: 5px 10px !important;
    width: auto !important;
  }
  .case-results {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
  }
  .res-cell { padding: 20px 16px !important; }
  .res-val  { font-size: 1.7rem !important; }
  .res-lbl  { font-size: .54rem !important; margin-top: 6px !important; }
  .case-text  { font-size: .85rem !important; line-height: 1.7 !important; }
  .case-quote { font-size: .82rem !important; line-height: 1.6 !important; padding-left: 18px !important; }
  .case-challenge { margin-bottom: 28px !important; }
  .case-challenge-label { font-size: .56rem !important; }
}

/* 10. Services detail page */
@media (max-width: 768px) {
  .svc-block { grid-template-columns: 1fr !important; gap: 28px !important; }
  .svc-block-left { position: static !important; }
  .svc-block-title { font-size: 1.4rem !important; }
  .svc-intro { font-size: .85rem !important; line-height: 1.7 !important; margin-bottom: 32px !important; }
  .deliverables-grid { grid-template-columns: 1fr !important; gap: 1px !important; }
  .del-item { padding: 18px 16px !important; }
  .del-name { font-size: .8rem !important; }
  .del-desc { font-size: .74rem !important; }
  .del-price { font-size: 1.15rem !important; }
  .tier-label { font-size: .54rem !important; }
  .formats { flex-direction: column !important; gap: 1px !important; margin-bottom: 32px !important; }
  .fmt { padding: 22px 18px !important; }
  .deliverables { margin-bottom: 28px !important; }
  .deliverables-title { font-size: .56rem !important; }
}

/* 11. About page */
@media (max-width: 768px) {
  .about-block { grid-template-columns: 1fr !important; gap: 32px !important; }
  .values-grid { grid-template-columns: 1fr !important; gap: 1px !important; }
  .val-cell { padding: 28px 20px !important; }
  .val-title { font-size: 1rem !important; }
  .val-desc  { font-size: .78rem !important; }
  .partners-row { flex-direction: column !important; gap: 1px !important; background: var(--dim) !important; }
  .partner-cell { padding: 18px 20px !important; min-width: unset !important; width: 100% !important; }
  .manifesto-text { font-size: clamp(1rem, 4.8vw, 1.6rem) !important; line-height: 1.6 !important; }
  .team-text { font-size: .88rem !important; }
}

/* 12. Contact page */
@media (max-width: 768px) {
  .contact-body { grid-template-columns: 1fr !important; gap: 40px !important; }
  .availability { grid-template-columns: 1fr !important; gap: 1px !important; }
  .av-cell { padding: 24px 20px !important; }
  .av-value { font-size: .9rem !important; }
  .form-submit { width: 100% !important; }
  .form-check-row { flex-direction: column !important; gap: 10px !important; }
  .ci-value { font-size: .95rem !important; }
}

/* 13. Prevent ANY horizontal overflow */
html { overflow-x: hidden !important; }
body { overflow-x: hidden !important; max-width: 100vw !important; }
* { box-sizing: border-box !important; }
img, canvas, video { max-width: 100% !important; }