/* ==========================================================================
   Responsive — layout breakpoints
   ========================================================================== */

@media (max-width: 1620px) {
  .container { padding-inline: 80px; }
}

/* Between full desktop and the single-column collapse the fixed copy column
   + large gap squeezed the contact form, so trim the gap and let copy shrink. */
@media (max-width: 1500px) {
  .contact__inner { grid-template-columns: minmax(0, 634px) 1fr; gap: 80px; }
}

@media (max-width: 1280px) {
  :root { --container: 100%; }
  .hero__title { font-size: 40px; }
  .h2--big { font-size: 36px; }
  .h2--mid { font-size: 36px; }
  .hero__inner { grid-template-columns: 1fr 1fr; gap: 48px; }
  .steps__inner, .contact__inner, .industries__inner { grid-template-columns: 1fr; gap: 56px; }
  .industries__media { order: -1; }
  .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 40px 32px; }
  .footer-col--logo { grid-column: span 4; }

  .main-nav { display: none; }
  .main-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--border-hair);
    padding: 12px 80px 16px; box-shadow: var(--shadow-md);
  }
  /* Link text aligns with the logo (container gutter); hover bg keeps its inset */
  .main-nav.is-open > a { margin-inline: -16px; padding: 12px 16px; font-size: 16px; }
  .main-nav.is-open .nav__controls { display: flex; }
  .nav-toggle { display: flex; }
  .site-header__actions .theme-toggle,
  .site-header__actions .lang-switch,
  .site-header__actions .btn { display: none; }
}

@media (max-width: 720px) {
  .container { padding-inline: 28px; }

  .site-header__inner { gap: 12px; }
  .main-nav.is-open { padding-inline: 28px; }

  .hero { padding-top: 40px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__title { font-size: 34px; }
  .hero__copy { gap: 32px; }
  .h2--big { font-size: 30px; }
  .h2--mid { font-size: 28px; }

  .competences, .steps, .contact, .industries { padding: 56px 0; }
  .contact-form__grid { grid-template-columns: 1fr; }
  .hero__cta .btn { flex: 1; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col--logo { grid-column: span 2; }
  .site-footer__bottom .container { flex-direction: column; align-items: flex-start; gap: 8px; }
  .step__num { font-size: 48px; }
  .site-footer { margin-top: 80px; }
}