@media (max-width: 1180px) {
  .service-grid,
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (max-width: 960px) {
  :root {
    --header-height: 68px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-header {
    background: rgb(255 255 255 / .96);
    border-bottom-color: rgb(216 222 232 / .82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .site-nav {
    position: fixed;
    top: var(--header-height);
    right: 1rem;
    left: 1rem;
    display: none;
    align-items: stretch;
    max-height: calc(100svh - var(--header-height) - 1rem);
    overflow: auto;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    background: var(--color-white);
    padding: .35rem;
    box-shadow: 0 20px 60px rgb(16 21 36 / .16);
    z-index: 110;
  }

  .site-nav.is-open {
    display: grid;
  }

  .site-nav a,
  .services-trigger {
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    border-radius: 6px;
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"],
  .services-trigger:hover,
  .services-trigger[aria-expanded="true"] {
    background: var(--color-brand-soft);
    color: var(--color-brand);
  }

  .services-menu {
    position: static;
    min-width: 0;
    margin-top: var(--space-1);
    box-shadow: none;
    border-radius: 6px;
    border: 1px solid var(--color-line);
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .services-menu a {
    min-height: 44px;
    border-radius: 4px;
  }

  .services-menu a:hover {
    background: var(--color-brand-soft);
  }

  .header-actions .button-secondary {
    display: none;
  }

  .hero-grid,
  .split,
  .split.reverse,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    align-items: center;
    gap: var(--space-8);
  }

  .hero-proof {
    max-width: 580px;
  }

  .metric-strip {
    grid-template-columns: 1fr;
  }

  .card-grid,
  .two-grid,
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    gap: var(--space-6);
  }
}

@media (max-width: 720px) {
  .section {
    padding-block: var(--space-12);
  }

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

  .brand img {
    width: 138px;
  }

  .header-actions .button-primary {
    display: none;
  }

  .header-actions .button {
    min-height: 34px;
    padding: .4rem .75rem;
    font-size: .82rem;
  }

  .hero,
  .hero-grid {
    min-height: auto;
  }

  .hero {
    min-height: calc(100svh - var(--header-height));
  }

  .hero-grid {
    padding-block: 5rem var(--space-10);
  }

  .hero-panel {
    gap: 1.25rem;
  }

  .hero-headline-img {
    max-width: 400px;
  }

  .hero-proof {
    padding: var(--space-5);
  }

  .hero-proof,
  .door-frame {
    min-height: auto;
  }

  .door-frame {
    min-height: 200px;
  }

  .page-hero,
  .page-hero-inner {
    min-height: 360px;
  }

  .page-hero-inner {
    padding-block: var(--space-16) var(--space-10);
  }

  .field-grid,
  .service-grid,
  .catalog-grid,
  .card-grid,
  .two-grid,
  .footer-grid,
  .gallery-grid,
  .logo-grid {
    grid-template-columns: 1fr;
  }

  .catalog-item figure {
    aspect-ratio: 4 / 3;
  }

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

  .info-table,
  .info-table tbody,
  .info-table tr,
  .info-table th,
  .info-table td {
    display: block;
    width: 100%;
  }

  .info-table th {
    border-bottom: 0;
  }

  .service-card h3 {
    font-size: var(--step-1);
  }

  .catalog-item:hover,
  .service-card:hover,
  .feature-card:hover,
  .logo-tile:hover,
  .gallery-grid figure:hover,
  .media-panel:hover,
  .contact-card:hover,
  .info-table:hover,
  .hero-proof:hover {
    transform: none !important;
  }

  .assistant-launch {
    bottom: 1rem;
    right: 1rem;
  }

  [data-parallax] {
    transform: none !important;
  }
}

@media (max-width: 420px) {
  .container,
  .container-wide {
    width: min(100% - 1rem, var(--container));
  }

  .cta-row {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .site-nav {
    right: .5rem;
    left: .5rem;
  }

  .contact-card,
  .feature-card,
  .hero-proof {
    padding: var(--space-5);
  }
}