/* ═══════════════════════════════════════════════════════════
   Mobile overrides — max-width: 767px
   All desktop layouts are untouched above this breakpoint.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Nav ──────────────────────────────────────────────────── */
  #main-nav {
    display: none !important;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--ink);
    border-bottom: 1px solid var(--border);
    padding: 8px 0 16px;
    z-index: 49;
  }
  #main-nav.open {
    display: flex !important;
  }
  #main-nav a {
    padding: 13px 24px !important;
    font-size: 15px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  #main-nav a:last-child {
    border-bottom: none !important;
  }
  #nav-cta {
    display: none !important;
  }
  #nav-toggle {
    display: flex !important;
  }

  /* ── Section spacing ──────────────────────────────────────── */
  .section {
    padding: 56px 0 !important;
  }

  /* ── Problem: 2-col → 1-col ──────────────────────────────── */
  #problem .container {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ── The Shift: 3-col cards → 1-col ─────────────────────── */
  #shift .container > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── What We Build: header flex + 3-col cards → 1-col ─────── */
  #what .container > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 40px !important;
    gap: 16px !important;
  }
  #what .container > div:last-child {
    grid-template-columns: 1fr !important;
  }

  /* ── Web Services: 2-col → 1-col ────────────────────────── */
  #web-services .container > div:last-child {
    grid-template-columns: 1fr !important;
  }

  /* ── Before / After: 3-col grid → vertical stack ────────── */
  #before-after .container > div[style] {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  #before-after .container > div[style] > div:nth-child(2) {
    display: none !important;
  }
  #before-after .container > div[style] > div:last-child {
    border-left: none !important;
    border-top: 1px solid var(--border);
  }

  /* ── How We Think: 2-col → 1-col ─────────────────────────── */
  #how .container {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* ── Project Examples: 2-col cards → 1-col ──────────────── */
  #examples .container > div:last-child {
    grid-template-columns: 1fr !important;
  }
  /* stat strip inside each example card: 3-col → 1-col */
  #examples .card div[style*="repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* ── Process: 4-col → 2-col ──────────────────────────────── */
  #process .container > div:last-child {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Reset per-step right borders, add bottom borders instead */
  #process .container > div:last-child > div {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  /* Restore right border on odd items (left column) */
  #process .container > div:last-child > div:nth-child(odd) {
    border-right: 1px solid var(--border) !important;
  }
  /* Last two items: no bottom border */
  #process .container > div:last-child > div:nth-last-child(-n+2) {
    border-bottom: none !important;
  }

  /* ── Why Us: 2-col → 1-col ──────────────────────────────── */
  #why-us .container {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* ── Contact: 2-col → 1-col ──────────────────────────────── */
  #contact .container {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  /* Contact form: name + email side by side → stacked */
  #contact form > div:first-child {
    grid-template-columns: 1fr !important;
  }
  /* Tighten contact section vertical padding */
  #contact {
    padding: 72px 0 !important;
  }

  /* ── Footer: horizontal → vertical ──────────────────────── */
  footer .container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  /* ── General: h-hero font size floor ─────────────────────── */
  .h-hero {
    font-size: clamp(36px, 11vw, 56px) !important;
  }
  .h-section {
    font-size: clamp(28px, 8vw, 44px) !important;
  }
  .h-display {
    font-size: clamp(28px, 8vw, 44px) !important;
  }
  .lead {
    font-size: 17px !important;
  }

}