/* ==========================================================================
   Responsive — Tablet (<=900px) und Mobile (<=600px)
   ========================================================================== */

@media (max-width: 900px) {
  .primary-nav > ul { display: none; }
  .burger { display: flex; }

  .header-cta { display: none; }

  .mobile-drawer {
    display: block;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 380px);
    height: 100vh;
    background: var(--primary-2);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    z-index: 600;
    overflow-y: auto;
    padding: 5.5rem 1.75rem 2.5rem;
    border-left: 1px solid oklch(40% 0.012 255);
  }
  .mobile-drawer.is-open { transform: translateX(0); }

  .mobile-drawer__close {
    position: absolute;
    top: 1.4rem; right: 1.4rem;
    width: 44px; height: 44px;
    border: 1px solid oklch(45% 0.012 255);
    background: transparent;
    color: var(--bg);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }

  .mobile-drawer ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
  }

  .mobile-drawer li { border-bottom: 1px solid oklch(38% 0.012 255); }

  .mobile-drawer a {
    display: block;
    padding: 1.1rem 0.25rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bg);
    min-height: 44px;
  }

  .mobile-drawer a:hover, .mobile-drawer a:focus-visible { color: var(--accent); }

  .mobile-drawer .sub-menu {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0 0 0 1.1rem;
  }
  .mobile-drawer .sub-menu a {
    font-size: 1rem;
    padding: 0.8rem 0.25rem;
    color: oklch(80% 0.008 90);
  }
  .mobile-drawer .sub-menu li { border-bottom: none; }

  .mobile-drawer .btn { margin-top: 1.75rem; }

  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: oklch(15% 0.01 255 / 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
    z-index: 550;
  }
  .drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

  /* ---- Grid stacking ---- */
  .split,
  .split--reverse,
  .section-head,
  .cta-band__inner,
  .hero-slide__grid,
  .contact-grid,
  .page-layout {
    grid-template-columns: 1fr;
  }

  .split__media, .split__copy,
  .split--reverse .split__media, .split--reverse .split__copy,
  .section-head__title, .section-head__lede,
  .hero-slide__copy,
  .cta-band__copy, .cta-band__actions,
  .contact-grid__info, .contact-grid__form,
  .page-layout__main, .page-layout__aside,
  .footer-col, .footer-col--wide {
    grid-column: auto;
  }

  .split { gap: 2.25rem; }
  .split__copy { order: 1; }
  .split__media { order: 0; }
  .split--reverse .split__copy { order: 1; }
  .split--reverse .split__media { order: 0; }

  .section-head__lede { margin-top: 0.5rem; }

  .services-grid { grid-template-columns: 1fr 1fr; }
  .services-grid .service-card { grid-column: span 1 !important; }

  .counters-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }

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

  .hero-slide__copy { grid-column: 1 / -1; }
  .hero-slide { min-height: min(92vh, 680px); }
  .hero-slide__content { min-height: min(92vh, 680px); align-items: flex-end; }

  .cta-band__actions { margin-top: 1.5rem; }
}

@media (max-width: 600px) {
  body { font-size: 15.5px; }

  .site-branding__tagline { display: none; }

  h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); }

  .services-grid { grid-template-columns: 1fr; }
  .counters-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

  .hero-slider__nav {
    left: clamp(1.25rem, 4vw, 3rem);
    right: clamp(1.25rem, 4vw, 3rem);
    justify-content: space-between;
  }

  .hero-slide__actions .btn { flex: 1 1 auto; justify-content: center; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .stripe-bar .container { justify-content: flex-start; overflow-x: auto; }

  .contact-line { flex-wrap: wrap; }
}