@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 100px 24px 60px;
  }

  .hero-drawing { display: none; }

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

  .proj-grid { grid-template-columns: 1fr 1fr; }

  .pi {
    grid-column: auto !important;
    aspect-ratio: 4/3 !important;
  }

  .about-section,
  .contact-section {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .section,
  .proj-section,
  .aod,
  .contact-section,
  .about-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  footer {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .row { grid-template-columns: 1fr; }
}