/* Merova Tradex — shared site styles
   Base layout below is preserved from the approved design (inline styles on
   each element). This file only adds responsive behavior + small polish that
   the original design-tool export didn't include. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  color: #1f1409;
  background: #ecdfc3;
}

a { text-decoration: none; }

img { max-width: 100%; display: block; }

.nav-links a:hover { color: #b33f2a !important; }

.btn:hover { opacity: 0.9; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav { flex-wrap: wrap; row-gap: 16px; padding: 20px 24px !important; }
  .nav-links { order: 3; width: 100%; justify-content: center; gap: 24px !important; }

  .section-pad { padding-left: 24px !important; padding-right: 24px !important; }

  .grid-2 {
    grid-template-columns: 1fr !important;
  }
  .grid-2 .grid-2-media { height: 260px !important; order: -1; }

  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  .stats-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  .hero-heading { font-size: 34px !important; }
  .section-heading { font-size: 26px !important; }
  .page-heading { font-size: 32px !important; }

  .footer-bar { flex-direction: column; gap: 8px; text-align: center; }
  .contact-card { padding: 32px 24px !important; }
  .contact-row { flex-direction: column; align-items: flex-start !important; gap: 2px; }
  .contact-row span:last-child { text-align: left !important; }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr !important; }
  .cta-btn-row { flex-direction: column; align-items: stretch !important; }
  .cta-btn-row a { text-align: center; }
}