/* ============================================================
   CMR — Responsive Styles
   Mobile-first: these rules ENHANCE the mobile base
   ============================================================ */

/* ── Tablet: 640px+ ── */
@media (min-width: 640px) {

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

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

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

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

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

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

  .careers-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ── Desktop: 1024px+ ── */
@media (min-width: 1024px) {

  /* Header */
  .header-nav { display: flex; }
  .header-cta { display: inline-flex; }
  .hamburger  { display: none; }

  /* Hero */
  .hero-content {
    max-width: 65%;
    padding: 10rem 0 6rem;
  }

  .hero-logo { width: 96px; height: 96px; }

  /* Travelers */
  .travelers-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
  }
  .travelers-content { order: 1; }
  .travelers-image   { order: 2; }

  /* Business */
  .business-inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
  }

  /* About */
  .about-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: start;
  }

  /* Checklist */
  .checklist-inner {
    grid-template-columns: 1fr 1.5fr;
    align-items: start;
    gap: 4rem;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr 1.5fr;
    align-items: start;
    gap: 4rem;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1.5fr 1fr;
    gap: 3rem;
  }

  /* Services */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Steps */
  .steps-grid {
    position: relative;
  }

  /* Step connector line */
  .steps-grid::before {
    content: '';
    position: absolute;
    top: 3.5rem;
    left: calc(33.33% - 1px);
    right: calc(33.33% - 1px);
    height: 2px;
    background: linear-gradient(to right, var(--color-red), var(--color-red));
    opacity: 0.2;
  }

  /* Values */
  .values-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Large Desktop: 1280px+ ── */
@media (min-width: 1280px) {

  .hero-content {
    max-width: 60%;
  }

  .hero-headline {
    font-size: 6rem;
  }
}