@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');
@import 'tokens.css';

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--color-navy);
}

h1 { font-size: var(--text-5xl); font-weight: 800; }
h2 { font-size: var(--text-4xl); font-weight: 700; }
h3 { font-size: var(--text-2xl); font-weight: 600; }
h4 { font-size: var(--text-xl);  font-weight: 600; }

p { line-height: 1.7; color: var(--color-text-muted); }

a { text-decoration: none; color: inherit; }

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

ul { list-style: none; }

/* Layout helpers */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section { padding: var(--space-24) 0; }
.section-sm { padding: var(--space-16) 0; }
.section-alt { background: var(--color-section-alt); }

.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.section-label::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--color-teal);
  border-radius: 2px;
  flex-shrink: 0;
}
.section-label span {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-teal);
}

.section-title {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 600px;
}

.text-center { text-align: center; }
.text-center .section-subtitle { margin: 0 auto; }

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* Utility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  .services-grid   { grid-template-columns: repeat(2, 1fr); }
  .stats-grid      { grid-template-columns: repeat(2, 1fr); }
  .process-cards   { grid-template-columns: 1fr; }
  .about-split     { grid-template-columns: 1fr; gap: var(--space-10); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .footer-grid     { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .service-detail-body { grid-template-columns: 1fr; }
  .contact-layout  { grid-template-columns: 1fr; }
  .team-grid       { grid-template-columns: repeat(2, 1fr); }
  .timeline-phases { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .container { padding: 0 var(--space-5); }
  .section   { padding: var(--space-16) 0; }
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  .hero { min-height: auto; padding-bottom: var(--space-12); }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.5rem); }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card.featured { grid-column: span 1; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .cta-band h2 { font-size: var(--text-2xl); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: var(--space-2); text-align: center; }
  .service-detail-header { flex-direction: column; }
  .team-grid { grid-template-columns: 1fr; }
  .timeline::before { display: none; }
  .timeline-item { grid-template-columns: 60px 1fr; }
  .timeline-number { width: 60px; height: 60px; font-size: var(--text-xl); }
  .value-list { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  :root { --nav-height: 56px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }
}