/* ==========================================================================
   KEYSTONE CIVIL — Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .grid-4,
  .feature-row,
  .stats,
  .process,
  .client-grid,
  .tiles { grid-template-columns: repeat(2, 1fr); }

  .feature { border-bottom: 1px solid var(--line); }
  .feature:nth-child(2n) { border-right: 0; }

  .stat { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .stat:nth-child(2n) { border-right: 0; }

  .nav { gap: 18px; }
  .cta-split .panel { padding: 56px 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  .topbar-linkedin .linkedin-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .topbar-linkedin {
    width: 26px;
    padding: 0;
    justify-content: center;
  }
  .quote-layout,
  .project-detail { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
  .nav,
  .header .btn { display: none; }

  .header-inner {
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .header-linkedin {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }

  .logo-text {
    width: max-content;
  }

  .topbar-meta span:first-child { display: none; }
  .overlap-up { margin-top: 0 !important; padding-top: var(--section) !important; }
  .hero { min-height: 560px; align-items: center; }
  .hero-content { padding: 72px 0; }
}

@media (max-width: 900px) {
  .values-grid { gap: 14px; }

  .grid-2,
  .cta-split { grid-template-columns: 1fr; }

  .grid-3,
  .project-grid,
  .tiles,
  .office-grid,
  .sector-summaries,
  .client-grid { grid-template-columns: 1fr 1fr; }

  .stat-float { left: 16px; bottom: 16px; }
  .split-visual .frame { aspect-ratio: 16 / 11; }

  .image-stack { grid-template-columns: 1fr 1fr; }
  .image-stack .a,
  .image-stack .b { height: 240px; margin-top: 0; }

  .cta-split .visual { min-height: 280px; }
  .cta-split .visual img { min-height: 280px; }
}

@media (max-width: 720px) {
  .value-card { padding: 18px 18px 20px; }
  .values-grid {
    gap: 12px;
    grid-auto-rows: auto;
  }

  .topbar { display: none; }

  .grid-4,
  .feature-row,
  .stats,
  .process,
  .form-row,
  .footer-grid,
  .image-stack,
  .service-grid,
  .check-grid,
  .grid-3,
  .project-grid,
  .tiles,
  .office-grid,
  .sector-summaries,
  .client-grid { grid-template-columns: 1fr; }

  .feature,
  .stat { border-right: 0; }

  .hero { min-height: 520px; }
  .hero-page { min-height: 340px; }
  .hero .display { font-size: 2.35rem; }

  .quote-form-wrap,
  .quote-aside { padding: 28px 20px; }

  .btn { width: 100%; }
  .header-inner .btn { width: auto; }
  .btn-row .btn { width: auto; min-width: 0; }
  .btn-row { flex-direction: column; }

  .footer-bottom { flex-direction: column; }
  .header { height: 72px; }

  .header-linkedin {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  :root { --gutter: 16px; }

  .service-body,
  .project-info { padding-left: 18px; padding-right: 18px; }

  .filters { gap: 6px; }
  .filter-btn { padding: 0 12px; }
}