/* ─── TABLET & MOBILE NAV ────────────────── */
@media (max-width: 1024px) {
  nav { padding: 1rem 1.75rem; }
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 67px;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(247,243,236,.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(28,25,23,.08);
    padding: .5rem 1.75rem 1.25rem;
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s ease, opacity .25s ease;
    z-index: 199;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links li { border-bottom: 1px solid rgba(28,25,23,.06); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a { display: block; padding: .85rem 0; font-size: 1rem; color: var(--ink); }

  /* ─── HERO ──────────────────────────────── */
  /* Remove full-screen hero — justify-content:center with overflowing content
     pushes the headline above the viewport on smaller screens */
  .hero-section { min-height: auto; }
  .hero-inner {
    justify-content: flex-start;
    padding: 3.5rem 1.75rem 3rem;
    gap: 2rem;
  }
  .hero-bottom { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hero-bottom > * { min-width: 0; }
  .hero-visual { order: -1; }
  .hero-headline-wrap h1 { font-size: clamp(2.5rem, 5.5vw, 3.75rem); }
  .wf-card { max-width: 100%; }

  /* ─── AUTOMATIONS ───────────────────────── */
  .automate-section .container { padding: 0 1.75rem; }
  .automate-header { grid-template-columns: 1fr; gap: 1.25rem; }
  /* Keep 2 columns at tablet — 1 col is too sparse */
  .auto-grid { grid-template-columns: repeat(2, 1fr); }

  /* ─── PAIN ──────────────────────────────── */
  .pain-section .container { padding: 0 1.75rem; }
  .pain-section { padding: 4rem 0; }
  .pain-header { grid-template-columns: 1fr; gap: 1.25rem; }
  .pain-item { grid-template-columns: 3.5rem 2.75rem 1fr; gap: 1.25rem; }

  /* ─── SERVICES ──────────────────────────── */
  .services-section { padding: 4rem 0; }
  .services-section .container { padding: 0 1.75rem; }
  .services-header { grid-template-columns: 1fr; gap: 1.25rem; }
  /* Keep 2 columns at tablet */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-card { grid-template-columns: 1fr; gap: 2rem; }

  /* ─── HOW IT WORKS ──────────────────────── */
  .how-section { padding: 4rem 0; }
  .how-section .container { padding: 0 1.75rem; }
  .how-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .how-header .section-sub { text-align: left; max-width: 100%; }
  .steps-row { grid-template-columns: 1fr; gap: 2rem; }
  .steps-row::before { display: none; }
  .step-item { text-align: left; padding: 0; }
  .step-circle { margin: 0 0 1.25rem 0; }

  /* ─── STATS ─────────────────────────────── */
  .stats-section { padding: 3rem 1.75rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .stat-item::after { display: none; }

  /* ─── WHO WE SERVE ──────────────────────── */
  .serve-section { padding: 4rem 0; }
  .serve-section .container { padding: 0 1.75rem; }
  /* 2 columns works well at tablet */
  .serve-grid { grid-template-columns: repeat(2, 1fr); }

  /* ─── ABOUT ─────────────────────────────── */
  .about-section { padding: 4rem 0; }
  .about-section .container { padding: 0 1.75rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-photo-wrap { max-width: 340px; margin: 0 auto; }
  .about-creds { gap: 1.5rem; }

  /* ─── CTA ───────────────────────────────── */
  .cta-section { padding: 4rem 0; }
  .cta-section .container { padding: 0 1.75rem; }
  .cta-box { padding: 3rem 1.75rem; }

  /* ─── FOOTER ────────────────────────────── */
  footer { padding: 2rem 1.75rem; }
  .footer-inner { flex-direction: column; gap: 1.5rem; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}