/* Shared responsive overrides to keep existing look intact */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Prevent grid/flex children from forcing horizontal overflow */
.services-grid > *,
.case-grid > *,
.testi-grid > *,
.process-steps > *,
.values-grid > *,
.locations-grid > *,
.cases-grid > *,
.openings-grid > *,
.team-grid > *,
.trust-inner > *,
.industries-inner > *,
.svc-layout > *,
.hero-right > * {
  min-width: 0;
}

@media (max-width: 1200px) {
  nav {
    padding-left: 5%;
    padding-right: 5%;
  }

  .hero,
  .hero-wrap,
  #hero,
  .section,
  .service-section,
  .values-section,
  .timeline-section,
  .team-section,
  footer {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

@media (max-width: 992px) {
  #hero,
  .hero,
  .hero-wrap {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    min-height: auto !important;
  }

  .hero-right {
    width: 100%;
    min-height: 0 !important;
  }

  .hero-wrap {
    align-items: start !important;
  }

  #hero .hero-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .float-card {
    width: 100% !important;
    max-width: 420px;
  }

  .hero-card-2 {
    position: static !important;
    margin-top: 0.75rem;
    width: fit-content;
  }

  .industries-inner,
  .svc-layout,
  .svc-layout.flip,
  .story-section,
  .hiring-inner,
  .contact-layout,
  .apply-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .hero-left,
  .hero-right,
  .story-left,
  .story-right,
  .hiring-left,
  .open-roles,
  .svc-meta,
  .svc-info {
    width: 100% !important;
    max-width: 100% !important;
  }

  .svc-layout.flip .svc-meta,
  .svc-layout.flip .svc-info {
    order: initial !important;
  }

  .engagement-row {
    flex-wrap: wrap;
    gap: 1rem !important;
  }

  .eng-item {
    min-width: 140px;
  }

  .services-grid,
  .case-grid,
  .testi-grid,
  .process-steps,
  .values-grid,
  .locations-grid,
  .cases-grid,
  .openings-grid,
  .trust-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

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

  .services-nav {
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: clip;
  }

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

  h2 {
    font-size: clamp(1.45rem, 6vw, 2rem) !important;
  }

  .hero-sub,
  .section-sub {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
  }

  /* Home page: keep headings/subheadings left-aligned on mobile */
  #hero,
  #services,
  #industries,
  #process,
  #testimonials,
  #cta {
    text-align: left !important;
  }

  #hero .hero-ctas,
  #hero .hero-stats {
    justify-content: flex-start !important;
  }

  #hero .hero-left .section-label,
  #services .section-label,
  #industries .section-label,
  #process .section-label,
  #testimonials .section-label,
  #cta .section-label {
    justify-content: flex-start !important;
  }

  #services .section-sub,
  #industries .section-sub,
  #process .section-sub,
  #testimonials .section-sub,
  #cta .section-sub {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Home page: override inline centered header wrappers */
  #process [style*="text-align:center"],
  #process [style*="text-align: center"],
  #testimonials [style*="text-align:center"],
  #testimonials [style*="text-align: center"] {
    text-align: left !important;
  }

  .services-grid,
  .case-grid,
  .testi-grid,
  .process-steps,
  .values-grid,
  .locations-grid,
  .cases-grid,
  .openings-grid,
  .team-grid,
  .trust-inner,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .float-card {
    width: min(340px, 92vw) !important;
  }

  .hero-right .service-pill {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
  }

  .hero-right {
    align-items: stretch !important;
  }

  .hero-card-2 {
    right: 0 !important;
    margin-left: 0;
  }

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

  .service-pill {
    max-width: 100%;
  }

  .mbi-header {
    align-items: center;
    gap: 0.5rem;
  }

  .mbi-name {
    font-size: 0.82rem !important;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .mbi-pct {
    flex-shrink: 0;
  }

  .stack-tag {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .timeline {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .timeline::before {
    display: none !important;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 576px) {
  nav {
    height: 64px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero,
  .hero-wrap,
  #hero,
  .section,
  .service-section,
  .values-section,
  .timeline-section,
  .team-section,
  footer {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .services-nav {
    top: 64px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .btn-glow,
  .btn-outline {
    padding: 0.55rem 0.95rem;
  }

  .hero-card-bg {
    width: 82vw !important;
    height: 82vw !important;
    max-width: 320px;
    max-height: 320px;
  }

  .services-nav .snav-item {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}