/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE.CSS – Breakpoints aligned with styles.css
   Uses --section-padding-x, --section-padding-y, --content-max
   No horizontal overflow; centered content; no UI breaks.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1280px and below ─── */
@media (max-width: 1280px) {
  .section4__cta {
    padding: clamp(12px, 1.5vw, 15px);
    margin-top: clamp(24px, 3vw, 40px);
    margin-left: 0;
  }

  .section4 {
    padding-bottom: clamp(40px, 6vw, 60px);
  }

  .hero {
    min-height: clamp(400px, 55vh, 550px);
    height: clamp(400px, 55vh, 550px);
  }
}

/* ─── 1460px and below ─── */
@media (max-width: 1460px) {
  .hero {
    min-height: clamp(400px, 60vh, 600px);
    height: clamp(400px, 60vh, 600px);
  }
}

/* ─── 1024px – tablet ─── */
@media (max-width: 1024px) {
  .section4_1--light,
  section.section4_1 {
    padding: clamp(48px, 8vw, 80px) var(--section-padding-x) !important;
  }


  .whyclients {
    font-size: clamp(24px, 4vw, 32px);
    margin-bottom: clamp(32px, 4vw, 50px);
    text-align: center;
  }

  /* Section4 container spacing adjustments for tablet */
  .section4__container {
    gap: clamp(30px, 5vw, 50px);
  }

  .section4 {
    padding: clamp(50px, 7vw, 80px) var(--section-padding-x);
  }
}

/* ─── 768px – mobile landscape / small tablet ─── */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .section4_1,
  .section4__boxes,
  .hero,
  .section6,
  .footer__container,
  .section4_1--light {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Section4 two-column layout becomes single column on mobile */
  .section4__container {
    grid-template-columns: 1fr;
    gap: clamp(30px, 5vw, 40px);
  }

  .section4__image {
    order: -1; /* Image comes first on mobile */
  }

  .section4__subtext {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .section4__cta {
    width: 100%;
    max-width: 100%;
    margin: 0;
    margin-top: 10px;
    justify-content: center;
  }

  .section4__clients-heading {
    margin-bottom: clamp(24px, 4vw, 30px);
  }

  .hero {
    height: clamp(360px, 70vh, 400px) !important;
    min-height: clamp(360px, 70vh, 400px) !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .hero__headline .line {
    font-size: clamp(32px, 8vw, 40px) !important;
  }

  .video-clip h1 {
    font-size: clamp(22px, 5vw, 26px);
  }

  .video-clip {
    min-height: 400px;
    height: clamp(400px, 80vh, 450px) !important;
  }

  .section2__image-wrap img {
    width: min(185px, 45vw) !important;
  }

  .video-clip .content2 p {
    font-size: clamp(14px, 2vw, 15px);
  }

  .video-clip .content2 {
    padding: 0 var(--section-padding-x) !important;
  }

  article.section6__card {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .section6 {
    padding: clamp(48px, 8vw, 78px) var(--section-padding-x) !important;
  }

  p.section6__card-text {
    font-size: clamp(14px, 2vw, 16px);
  }

  .footer__container {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 24px;
    align-items: start !important;
  }

  .footer__column {
    width: 100%;
  }

  .footer__logo {
    grid-column: span 1;
    display: flex;
    align-items: flex-start;
  }

  .footer__logo img {
    height: clamp(40px, 6vw, 47px) !important;
  }

  /* Featured products – imp cards */
  .imp-title {
    font-size: clamp(26px, 5vw, 32px) !important;
  }

  .imp-title__accent {
    font-size: clamp(22px, 4.5vw, 32px);
  }

  .imp-kicker, .imp-ideal, .imp-pill {
    font-size: clamp(11px, 2vw, 12px);
  }

  .imp-desc {
    font-size: clamp(14px, 2vw, 16px);
  }

  .imp-card__media img {
    width: 100% !important;
    max-width: 220px;
    height: auto !important;
  }

  .project-card__image-wrapper img {
    border: none !important;
  }

  /* Section4_1 – Why clients / Featured heading */
  .section4__boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(16px, 3vw, 30px);
    width: 100%;
    max-width: 100% !important;
  }

  section.section4_1,
  .section4_1--light {
    padding: clamp(40px, 6vw, 50px) var(--section-padding-x) clamp(40px, 6vw, 80px) !important;
    max-width: 100vw !important;
  }

  #featuredheading {
    margin-bottom: 40px !important;
  }
}

/* ─── 480px – small mobile ─── */
@media (max-width: 480px) {
  .section4__boxes {
    grid-template-columns: 1fr !important;
    gap: 24px;
    justify-items: center;
  }

  .section4__box {
    text-align: center;
    align-items: center;
    max-width: 100%;
  }

  .footer__container {
    grid-template-columns: 1fr !important;
  }

  .footer__logo {
    grid-column: 1;
  }

  .hero__headline .line {
    font-size: clamp(24px, 7vw, 32px) !important;
  }

  .section6__pillars {
    gap: 24px;
  }

  .section6__card-image--large,
  .section6__card-image--wide {
    max-width: 100%;
  }
}
/* Remove all old horizontal scroll featured products mobile styles */
@media (max-width: 768px) {
  /* Remove old imp-card mobile styles since we're using grid now */
  .section-imp {
    display: none !important;
  }
  
  .imp-scrollarea,
  .imp-sticky,
  .imp-slider,
  .imp-viewport,
  .imp-track,
  .imp-card,
  .imp-nav-arrow,
  .imp-pagination {
    display: none !important;
  }
}