/* ============================================================
   RESPONSIVE — Desktop-first breakpoints
   8px grid · optical alignment · mobile-first touch targets
   ============================================================ */

/* ── Laptop (≤1200px) ────────────────────────────── */
@media (max-width: 1200px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Tablet (≤900px) ─────────────────────────────── */
@media (max-width: 900px) {
  .nav__links {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  .nav__mobile {
    display: flex;
  }

  .hero__diagram {
    display: none;
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__scroll {
    display: none;
  }

  .section__title {
    font-size: clamp(1.5rem, 4vw, 2rem);
  }

  .about-pillars {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .sys__name {
    font-size: var(--text-xl);
  }

  .sys__question {
    font-size: var(--text-lg);
  }

  .conv__msg {
    max-width: 95%;
    padding: var(--sp-3) var(--sp-4);
  }

  .conv__detail {
    max-width: 95%;
  }

  .conv__text {
    font-size: var(--text-sm);
  }

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

  .footer__inner {
    flex-direction: column;
    gap: var(--sp-10);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--sp-3);
    text-align: center;
  }

  .contact-card {
    padding: var(--sp-10);
  }

  .qr-body {
    padding: var(--sp-8) var(--sp-6);
  }

  .qr-footer {
    padding: var(--sp-4) var(--sp-6);
  }

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

  .qr-step-counter {
    position: static;
    display: block;
    margin-bottom: var(--sp-2);
  }

  /* Problems: stack to single column on tablet */
  .prb {
    grid-template-columns: 1fr;
  }

  .prb__response {
    position: static;
  }

  .principle--emphasis .principle__lead {
    font-size: var(--text-lg);
  }
}

/* ── Mobile (≤600px) ─────────────────────────────── */
@media (max-width: 600px) {
  :root {
    --sp-section: 56px;
  }

  .hero {
    min-height: auto;
    padding-bottom: var(--sp-12);
  }

  .hero__name {
    font-size: clamp(1.6rem, 6.5vw, 2.25rem);
    line-height: 1.18;
    max-width: 100%;
  }

  .hero__meta {
    font-size: var(--text-xs);
    margin-bottom: var(--sp-6);
  }

  .hero__desc {
    font-size: var(--text-base);
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .section__title {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem);
  }

  .section__subtitle {
    font-size: var(--text-base);
  }

  .prb__quote {
    font-size: var(--text-sm);
  }

  .prb__idx {
    font-size: 10px;
    min-width: 16px;
  }

  .prb__resp-inner {
    padding: var(--sp-6);
  }

  .principle {
    padding: var(--sp-6) 0;
  }

  .principle--emphasis {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .principle__lead {
    font-size: var(--text-md);
  }

  .manifesto {
    margin-top: var(--sp-10);
    padding-top: var(--sp-8);
  }

  .manifesto__text {
    font-size: 1.15rem;
  }

  .section__header {
    margin-bottom: var(--sp-10);
  }

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

  .service-card {
    padding: var(--sp-6) var(--sp-5);
  }

  .about-pillars {
    grid-template-columns: 1fr;
  }

  .process-timeline {
    padding-left: 0;
  }

  .process-step__marker {
    width: 40px;
    height: 40px;
    font-size: var(--text-xs);
  }

  .process-timeline::before {
    left: 19px;
  }

  .contact-card {
    padding: var(--sp-8) var(--sp-5);
  }

  .contact-card__title {
    font-size: var(--text-2xl);
  }

  .sys__question {
    font-size: var(--text-md);
  }

  .sys__viewbtn {
    font-size: var(--text-xs);
    padding: 6px 14px;
  }

  .sys__insight {
    padding: var(--sp-4);
  }

  .eco__micro {
    font-size: 8px;
    padding: 1px 6px;
  }

  .eco__label {
    font-size: 7px;
  }

  .arch__detail-inner {
    padding: var(--sp-4);
  }

  .arch__detail-flow {
    gap: var(--sp-1);
  }

  .arch__chevron {
    font-size: 12px;
  }

  .qr-modal {
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    height: 100%;
  }

  .qr-overlay {
    padding: 0;
  }

  .qr-step__title {
    font-size: var(--text-lg);
  }

  .nav__mobile-link {
    padding: var(--sp-4) 0;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}

/* ── Selected Work responsive ── */

@media (max-width: 900px) {
  .sw {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
}

/* ── Capabilities responsive ── */

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