/* ============================================================
   Responsive breakpoints & motion preferences.
   Kept last in the cascade so it always wins.
   ============================================================ */

@media (max-width: 900px) {
  .services,
  .writing        { grid-template-columns: repeat(2, 1fr); }
  .steps          { grid-template-columns: repeat(2, 1fr); }
  .about-grid     { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  .nav-links {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    padding: 20px 28px;
    gap: 18px;
    transform: translateY(-140%);
    transition: transform .3s;
    align-items: flex-start;
  }
  .nav-links.open { transform: none; }
  .menu-toggle    { display: block; }

  .services,
  .writing,
  .steps          { grid-template-columns: 1fr; }

  .hero           { padding: 70px 0 64px; }
  section         { padding: 64px 0; }
  .cta-box        { padding: 44px 24px; }
  .hero-meta      { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
}