@media (max-width: 1180px) {
  :root {
    --container: min(100% - 32px, 1024px);
    --container-wide: min(100% - 32px, 1180px);
  }

  .project-grid,
  .service-preview-grid,
  .product-grid,
  .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .service-row .media-frame {
    grid-column: 2 / -1;
  }

  .gallery-item {
    grid-column: span 6;
  }

  .gallery-item[data-ratio="wide"] {
    grid-column: span 12;
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: 68px;
    --space-7: 3.5rem;
    --space-8: 4.5rem;
    --space-9: 6rem;
  }

  .site-nav,
  .header-actions .button,
  .header-actions > .language-switcher {
    display: none;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .menu-toggle,
  .mobile-panel {
    display: flex;
  }

  .mobile-panel {
    flex-direction: column;
  }

  .section-header,
  .split,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .process-step {
    min-height: 210px;
  }

  .production-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(120px, 20vw);
  }

  .production-grid .media-frame:nth-child(n) {
    grid-column: span 3;
    grid-row: span 2;
  }

  .production-grid .media-frame:nth-child(1),
  .production-grid .media-frame:nth-child(5) {
    grid-column: span 6;
  }

  .editorial-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .shoot-card:nth-child(n) {
    grid-column: span 3;
  }

  .shoot-card:nth-child(1),
  .shoot-card:nth-child(6) {
    grid-column: span 6;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer-inner > :first-child {
    grid-column: 1 / -1;
  }

  .lookbook-details {
    grid-template-columns: 1fr 1fr;
  }

  .lookbook-details .media-frame:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  :root {
    --container: min(100% - 24px, 640px);
    --container-wide: min(100% - 24px, 640px);
  }

  .section {
    padding-block: var(--space-7);
  }

  .hero {
    min-height: 86svh;
  }

  .hero-media img {
    object-position: 70% center;
  }

  .hero-content,
  .page-hero-content {
    padding-bottom: var(--space-6);
  }

  .hero-title {
    font-size: clamp(2.55rem, 13vw, 4.8rem);
  }

  .page-title {
    font-size: clamp(2.65rem, 13vw, 4.9rem);
  }

  .display-title,
  .cta-title {
    font-size: clamp(2.75rem, 14vw, 5.25rem);
  }

  .hero-actions,
  .footer-bottom {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .hero-meta,
  .metrics-grid,
  .project-grid,
  .service-preview-grid,
  .product-grid,
  .capability-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .hero-meta-item,
  .metric,
  .service-tile,
  .product-tile,
  .capability-item {
    min-height: auto;
  }

  .production-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .production-grid .media-frame:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }

  .production-grid .media-frame:nth-child(1),
  .production-grid .media-frame:nth-child(3) {
    aspect-ratio: 3 / 4;
  }

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

  .shoot-card:nth-child(n) {
    grid-column: auto;
  }

  .shoot-card:nth-child(1),
  .shoot-card:nth-child(6) {
    aspect-ratio: 4 / 5;
  }

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

  .service-row .media-frame {
    grid-column: auto;
  }

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

  .gallery-item,
  .gallery-item[data-ratio="wide"] {
    grid-column: auto;
  }

  .lookbook-pair,
  .lookbook-details,
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .lookbook-wide {
    aspect-ratio: 4 / 5;
  }

  .lightbox-top,
  .lightbox-bottom {
    width: min(100% - 24px, 640px);
  }

  .lightbox-bottom {
    flex-wrap: wrap;
  }

  .lightbox-caption {
    width: 100%;
    order: -1;
  }
}

@media (max-width: 390px) {
  .brand {
    font-size: 1.2rem;
  }

  .mobile-nav a {
    font-size: clamp(2rem, 13vw, 3rem);
  }

  .field input,
  .field select,
  .field textarea {
    padding-inline: 0.75rem;
  }
}