/* ==========================================================================
   Responsive — DS v1.0 breakpoints: <640 mobile · 640–1023 tablet ·
   1024–1440 desktop · >1440 large
   ========================================================================== */

/* ---------- Large (>1440) ---------- */
@media (min-width: 1441px) {
  .hero__inner { min-height: min(calc(100svh - var(--header-h)), 880px); }
}

/* ---------- Below desktop: compact navigation ---------- */
@media (max-width: 1023.98px) {
  .primary-nav,
  .site-header__actions { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 1024px) {
  .mobile-nav { display: none !important; }
}

/* ---------- Tablet (640–1023) ---------- */
@media (max-width: 1023.98px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-block: var(--space-8) var(--space-8);
    gap: var(--space-7);
  }
  .hero__visual { justify-self: center; max-width: 380px; }

  .services__grid { grid-template-columns: minmax(0, 1fr); }
  .service-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.9fr);
    grid-template-areas: "glyph title services" "glyph text services";
    column-gap: var(--space-5);
    row-gap: var(--space-2);
    align-items: start;
  }
  .service-card__glyph { grid-area: glyph; }
  .service-card__title { grid-area: title; }
  .service-card__text { grid-area: text; }
  .service-card__services {
    grid-area: services;
    margin: 0;
    padding-block-start: 0;
    padding-inline-start: var(--space-5);
    border-block-start: 0;
    border-inline-start: 1px solid var(--border-on-light);
  }

  .process-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-6);
  }
  .process-steps::before { display: none; }
}

/* ---------- Mobile (<640) ---------- */
@media (max-width: 639.98px) {
  :root { --header-h: 64px; }

  .hero__inner { padding-block: var(--space-7) var(--space-8); gap: var(--space-6); }
  .hero__copy { gap: var(--space-4); }
  .hero__visual { max-width: 260px; justify-self: start; }   /* stays secondary */
  .hero .btn-group,
  .cta-panel .btn-group { flex-direction: column; align-items: stretch; }
  .hero .btn, .cta-panel .btn { width: 100%; }

  .service-card {
    display: flex;
    padding: var(--space-4);
  }
  .service-card__services {
    padding-inline-start: 0;
    border-inline-start: 0;
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border-on-light);
  }

  .services__head, .process__head { margin-block-end: var(--space-6); }

  /* Process becomes a vertical sequence with a connector on the inline-start edge */
  .process-steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
  }
  .process-steps::before {
    display: block;
    inset-block: 22px 22px;
    inset-inline: 21.5px auto;
    width: 1px;
    height: auto;
    background: linear-gradient(to bottom, rgba(167, 139, 250, 0.15), rgba(167, 139, 250, 0.6));
  }
  [dir="rtl"] .process-steps::before {
    background: linear-gradient(to bottom, rgba(167, 139, 250, 0.15), rgba(167, 139, 250, 0.6));
  }
  .process-step {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-4);
  }

  .cta-panel { border-radius: var(--radius-lg); }

  .site-footer__top { padding-block: var(--space-7) var(--space-5); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}