/* responsive.css — all breakpoints, for every page. Loaded last. */

/* RESPONSIVE */
@media(max-width:900px) {

  .contact-grid,
  .mv-grid {
    grid-template-columns: 1fr;
  }

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

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

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

  .sol-panel.active {
    grid-template-columns: 1fr;
  }

  .sol-panel-left {
    border-right: 1px solid var(--border);
  }

  nav {
    padding: 0 24px;
  }

  .hero,
  .section,
  .section-full,
  .work-hero,
  .about-hero {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Hero: the headline block keeps a full screenful to itself so that
     stacking the pipeline diagram underneath doesn't squeeze it.
     (padding-top is set inline on the element, so it isn't set here.) */
  .hero {
    min-height: auto;
    padding-bottom: 72px;
  }

  .hero-inner {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - var(--nav-h) - 120px);
  }

  .hero-title {
    font-size: clamp(80px, 24vw, 104px);
  }

  .hero-sub {
    margin-top: 32px;
    font-size: clamp(20px, 5vw, 24px);
  }

  .hero-cta {
    margin-top: 44px;
  }

  footer {
    padding: 32px 24px;
  }

  .case-studies-section {
    padding: 60px 24px;
  }

  .testimonial-card {
    flex-direction: column;
    gap: 24px;
  }
}

@media(max-width:600px) {
  .results-grid {
    grid-template-columns: 1fr;
  }

  .cs-grid {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .nav-links {
    gap: 16px;
  }

  .hero-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .sol-tabs {
    overflow-x: auto;
  }
}