/* ==========================================================================
   Edify Consulting Services — Responsive Stylesheet (responsive.css)
   Breakpoints: tablet <= 960px, mobile <= 640px
   ========================================================================== */

/* ---------- Tablet & below ---------- */
@media (max-width: 960px) {
  :root { --space-7: 4.5rem; --space-6: 3.5rem; }

  /* Mobile navigation */
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: var(--space-2);
    transform: translateY(-120%);
    transition: transform 0.28s ease;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a { padding: 0.85rem 1rem; border-radius: var(--radius); }
  .header-cta { margin: var(--space-1) 0 0; }
  .header-cta .btn { width: 100%; justify-content: center; }

  /* Hero */
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .hero-visual { order: -1; max-width: 520px; }
  .hero-copy .lead { max-width: none; }

  /* Grids collapse */
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

  /* Split & contact */
  .split { grid-template-columns: 1fr; gap: var(--space-4); }
  .split img { max-width: auto; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-4); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  :root { --space-7: 3.5rem; --space-6: 3rem; }

  .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; gap: var(--space-3); }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }

  .hero-actions .btn,
  .cta-band .btn { width: 100%; justify-content: center; }
  .hero-stat { right: 8px; }
  .cta-band { padding: var(--space-5) var(--space-3); }

  .brand-name { font-size: 1.05rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Focus visibility (accessibility floor) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--azure);
  outline-offset: 2px;
  border-radius: 6px;
}