/* ═══════════════════════════════════════
   GLOBAL MOBILE STYLES — max-width: 640px
   Applies to all pages
═══════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Sections: reduce vertical padding ── */
  section.py-24, section.py-24.sm\:py-32 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

  /* ── Section headings: smaller on mobile ── */
  .text-5xl { font-size: 2.25rem !important; }
  .text-6xl { font-size: 2.5rem !important; }
  .sm\:text-6xl { font-size: 2.25rem !important; }
  .mb-16 { margin-bottom: 2rem !important; }

  /* ── Hero ── */
  .hero-wrap { padding-top: 6rem !important; padding-bottom: 4rem !important; }
  .hero-wrap .f-display.text-2xl { font-size: 1.1rem !important; }

  /* ── Scroll showcase ── */
  #scroll-showcase { height: 44rem !important; }
  #sc-card { height: 240px !important; }
  #sc-card > div:last-child > div:last-child { display: none !important; }
  #sc-card > div:last-child { padding: 1rem 1.25rem !important; }

  /* ── Hero 3D tilt: off on mobile ── */
  #hero-scroll-wrap { transform: none !important; }

  /* ── Floating CTA: hidden on mobile ── */
  .float-cta { display: none !important; }

  /* ── Service cards: 2 columns ── */
  #diensten .grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
  .svc-photo { height: 110px !important; }
  .svc-card .p-7 { padding: 0.875rem !important; }
  .svc-card h3 { font-size: .9rem !important; margin-bottom: .3rem !important; }
  .svc-card p.text-sm.leading-relaxed { display: none !important; }
  .svc-card ul { margin-bottom: .5rem !important; }
  .svc-card .space-y-2 > li { font-size: .75rem !important; }

  /* ── Blog cards: shorter photo ── */
  .blog-card > div:first-child { height: 140px !important; }
  .blog-card .p-6 { padding: 0.875rem !important; }
  #blog .grid { gap: 0.75rem !important; }

  /* ── Contact section ── */
  #contact .grid { grid-template-columns: 1fr !important; }
  #contact .gap-16 { gap: 2.5rem !important; }

  /* ── Over ons / page hero ── */
  .page-hero { padding-top: 7rem !important; padding-bottom: 3rem !important; }
  .page-hero h1 { font-size: clamp(2rem, 10vw, 3rem) !important; }

  /* ── Dienst detail pages: content padding ── */
  .dark-card { padding: 1rem !important; }
  .dark-card p.f-display { font-size: 1rem !important; }

  /* ── Footer ── */
  footer .grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
  footer .col-span-2 { grid-column: span 2 !important; }
  footer .pt-16 { padding-top: 3rem !important; }

  /* ── Max touch target size for links/buttons ── */
  .nav-link { min-height: 44px !important; display: flex !important; align-items: center !important; }
  .btn-appt, .btn-outline-white { min-height: 48px !important; }

  /* ── Blog filter bar: scrollable ── */
  .filter-bar { overflow-x: auto !important; flex-wrap: nowrap !important; padding-bottom: .5rem !important; }

  /* ── Blog article: padding ── */
  .prose, article.max-w-4xl { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}