@media (min-width: 640px) {
  .brand-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .clarity-strip__inner {
    grid-template-columns: repeat(4, 1fr);
  }

  .cta-split {
    grid-template-columns: 1fr 1fr;
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Form 2-col only when wide enough */
@media (min-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-field--full {
    grid-column: 1 / -1;
  }

  .form-grid--compact {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .header-actions .header-cta {
    display: inline-flex;
  }

  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
  }

  .split {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }

  .split--reverse > :first-child { order: 0; }
  .split--reverse > :last-child { order: 0; }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-horizontal {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .principle-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .spec-guide {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .brand-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .spec-dl > div {
    grid-template-columns: minmax(8rem, 38%) 1fr;
    gap: 0.75rem;
    align-items: start;
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .process-horizontal {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1.5fr repeat(4, 1fr);
  }

  .principle-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .tech-flow {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
  }

  .tech-flow__node {
    flex: 1 1 auto;
    min-width: 140px;
  }

  .tech-flow__arrow,
  .tech-flow__bidirectional {
    padding: 0 0.15rem;
    transform: rotate(-90deg);
  }

  .tech-flow--vertical {
    flex-direction: column;
  }

  .tech-flow--vertical .tech-flow__arrow,
  .tech-flow--vertical .tech-flow__bidirectional {
    transform: none;
  }
}

/* Desktop nav only when it fits in one row */
@media (min-width: 1150px) {
  .menu-toggle {
    display: none;
  }

  .nav-desktop {
    display: flex;
  }

  .nav-link {
    padding: 0.3rem 0.4rem;
    font-size: 0.8125rem;
  }
}

@media (min-width: 1280px) {
  .header-phone {
    display: inline-flex;
  }

  .nav-link {
    padding: 0.3rem 0.55rem;
    font-size: 0.875rem;
  }

  .header-phone {
    font-size: 0.875rem;
  }
}

@media (min-width: 1200px) {
  .process-horizontal {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1149px) {
  .nav-desktop {
    display: none !important;
  }

  .menu-toggle {
    display: grid;
  }

  .header-phone {
    display: none;
  }
}

@media (max-width: 767px) {
  .section {
    padding-block: var(--space-section-mobile);
  }

  .container {
    width: min(100% - 1.5rem, var(--container-lg));
  }

  .header-inner {
    width: min(100% - 1.5rem, 1440px);
  }

  .hero h1 {
    max-width: none;
    font-size: clamp(2.1rem, 9vw, 2.8rem);
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-float {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
  }

  .cookie-banner__panel {
    width: 100%;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .cookie-banner {
    padding: 0;
  }

  .cookie-banner__actions .button {
    flex: 1 1 100%;
  }

  .page-hero h1 {
    max-width: none;
  }

  .form-step__nav {
    flex-direction: column;
  }

  .form-step__nav .button {
    width: 100%;
  }

  .spec-dl > div {
    grid-template-columns: 1fr;
  }

  .brand-card__toggle {
    min-height: 44px;
  }
}

@media (max-width: 430px) {
  .clarity-item {
    padding: 0.75rem;
  }

  .clarity-item__label {
    font-size: 0.875rem;
  }

  .advies-form {
    padding: 1.15rem;
  }

  .brand__text {
    font-size: 0.95rem;
  }
}
