@media (min-width: 1440px) {
  :root {
    font-size: 17px;
  }

  .container {
    width: min(88%, 1320px);
  }
}

@media (min-width: 1800px) {
  :root {
    font-size: 18px;
  }

  .hero-slide img {
    height: 600px;
  }
}

@media (max-width: 1080px) {
  :root {
    font-size: 15px;
  }

  .container {
    width: min(94%, 980px);
  }

  .hero__inner {
    gap: 3rem;
  }
  .hero__copy h1 {
    font-size: 2rem;
  }
  .projects-hero__inner {
    gap: 2.4rem;
  }
  .hero__inner {
    grid-template-columns: 100% !important;
  }
  .materials__grid {
    gap: 1.2rem;
  }
  .concept-art__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  :root {
    font-size: 14.5px;
  }
  .material-card {
    width: 100% !important;
  }
  .journal__inner {
    display: flex !important;
    flex-direction: column !important;
  }
  .cta-banner {
    padding: 0;
  }
  .services__grid,
  .showcase__grid,
  .pillars__grid,
  .process-map__grid,
  .projects,
  .journal-gallery,
  .concept-art__gallery {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }
  .concept-art__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .container {
    width: min(94%, 680px);
  }

  .hero__actions {
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
  }

  .hero__actions .btn {
    flex: 1 1 calc(50% - 0.75rem);
  }

  .filters {
    overflow-x: auto;
    padding-bottom: 0.4rem;
    gap: 0.75rem;
    scroll-snap-type: x proximity;
  }

  .filters::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .journal-gallery {
    gap: 1.2rem;
  }
}

@media (max-width: 600px) {
  :root {
    font-size: 14px;
  }

  .container {
    width: 92%;
  }

  .nav-overlay__panel {
    width: min(92%, 360px);
    padding: 1.8rem 1.6rem;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .materials__grid {
    gap: 1.1rem;
  }

  .journal-gallery__item {
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.08);
  }
}

@media (max-width: 420px) {
  .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__actions {
    flex-direction: column;
  }
}