/* =============================================================
   Responsive overrides — supplements global.css
   Breakpoints:  ≤991px (tablet)  |  ≤640px (mobile)
   ============================================================= */

/* ── Global: prevent horizontal scroll ─────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Ensure all images are fluid */
img {
  max-width: 100%;
  height: auto;
}

/* ── Hamburger button (hidden on desktop) ───────────────────── */
.navbar_hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0.4rem;
  background: none;
  border: none;
  color: var(--text-color--text-primary, #fff);
  flex-shrink: 0;
}
.navbar_hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.navbar_hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar_hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.navbar_hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════════
   TABLET  ≤ 991px
   ═══════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 991px) {

  /* ── Navbar ───────────────────────────────────────────────── */
  .navbar_hamburger {
    display: flex;
  }

  /* Mobile nav dropdown */
  .navbar_menu.is-open {
    display: flex !important;
  }
  .navbar_menu .navbar_link {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 1rem;
    width: 100%;
    text-align: left;
  }
  .navbar_menu .navbar_link:last-child {
    border-bottom: none;
  }

  /* ── Grids ────────────────────────────────────────────────── */
  .global_grid-4col {
    grid-template-columns: 1fr 1fr !important;
  }

  .global_grid-2col {
    grid-template-columns: 1fr !important;
  }

  /* ── Logo marquee: show it on tablet/mobile ───────────────── */
  .clients-logos_marquee.show-ml {
    display: flex !important;
  }
  .client-logos_cms.hide-mobile-landscape {
    display: none !important;
  }

  /* ── Services section ─────────────────────────────────────── */
  .services_list {
    grid-template-columns: 1fr;
  }

  /* ── Benefits stagger offset: remove on mobile ────────────── */
  .benefits_card-wrapper.is-01,
  .benefits_card-wrapper.is-02,
  .benefits_card-wrapper.is-03 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ── Testimonials ─────────────────────────────────────────── */
  .testimonials_controls {
    gap: 0.75rem;
    justify-content: center;
  }

  /* ── Section headings: scale down ────────────────────────── */
  .heading-style-h1 {
    font-size: clamp(2rem, 6vw, 3.5rem) !important;
  }
  .heading-style-h2 {
    font-size: clamp(1.6rem, 4.5vw, 2.8rem) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE  ≤ 640px
   ═══════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 640px) {

  /* ── Grids ────────────────────────────────────────────────── */
  .global_grid-4col {
    grid-template-columns: 1fr !important;
  }

  /* ── CTA button group: stack vertically ──────────────────── */
  .button-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .button-group .button,
  .button-group .button.is-secondary {
    width: 100%;
    justify-content: center;
  }

  /* ── Navbar: hide CTA text, keep icon ────────────────────── */
  .navbar_cta .text-size-medium {
    display: none;
  }

  /* ── Padding adjustments ──────────────────────────────────── */
  .padding-global {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* ── Section headers ──────────────────────────────────────── */
  .global_section-header {
    text-align: center;
  }
  .global_section-header-paragraph {
    max-width: 100%;
  }

  /* ── Principles: icon size ────────────────────────────────── */
  .principles_item {
    width: 4rem !important;
    height: 4rem !important;
  }

  /* ── Case studies: single col already at 767px ───────────── */

  /* ── FAQ: better touch targets ───────────────────────────── */
  .faq_top {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /* ── Footer ───────────────────────────────────────────────── */
  .footer_links-list {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* ── Heading sizes ────────────────────────────────────────── */
  .heading-style-h2 {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
  }
  .heading-style-h3 {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
  }
  .heading-style-h4 {
    font-size: clamp(1rem, 4vw, 1.3rem) !important;
  }

  /* ── Testimonial card: limit width ───────────────────────── */
  .testimonials_card {
    min-width: calc(100vw - 2.5rem);
  }
}