/* ════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤1024px)
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Nav */
  .nav-links,
  .nav-cta {
    display: none;
  }
  .hamburger {
    display: flex;
  }

  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-right {
    height: 380px;
    order: -1;
  }
  .h-card-1 {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
  }
  .h-card-2 {
    left: 0;
    top: 140px;
  }
  .h-card-3 {
    right: 0;
    bottom: 0;
    width: 220px;
  }

  /* Services */
  .service-row,
  .service-row.flip {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .service-row.flip .service-text {
    order: 1;
  }
  .service-row.flip .service-mockup {
    order: 2;
  }

  /* Why */
  .why-grid {
    grid-template-columns: 1fr;
  }
  .why-item,
  .why-item:nth-child(odd),
  .why-item:nth-child(even) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
  }
  .why-item:last-child {
    border-bottom: none;
  }

  /* Work bento */
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .w-large,
  .w-medium,
  .w-wide,
  .w-tall {
    grid-column: span 1;
    aspect-ratio: 5 / 4;
  }

  /* Cases */
  .case-grid {
    grid-template-columns: 1fr;
  }
  .case-item,
  .case-item:nth-child(odd),
  .case-item:nth-child(even) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
  }
  .case-item:last-child {
    border-bottom: none;
  }

  /* Testimonials */
  .testi-grid {
    grid-template-columns: 1fr;
  }

  /* Pages */
  .about-mission-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .value-item {
    border-bottom: 1px solid var(--line);
    padding: 32px 24px 32px 0;
  }
  .value-item:nth-child(2),
  .value-item:nth-child(4) {
    border-right: none;
  }
  .value-item:nth-last-child(-n + 2) {
    border-bottom: none;
  }
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .contact-left {
    position: static;
  }
  .support-grid {
    grid-template-columns: 1fr;
  }
  .support-item,
  .support-item:nth-child(odd),
  .support-item:nth-child(even) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
  }
  .support-item:last-child {
    border-bottom: none;
  }

  /* Footer */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* ════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤767px)
═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .wrap,
  .wrap-narrow {
    padding: 0 20px;
  }
  .section {
    padding: 80px 0;
  }
  .section-head {
    margin-bottom: 48px;
  }

  /* Hero */
  #hero {
    padding: 100px 0 48px;
    min-height: auto;
  }
  .hero-title {
    font-size: 2.8rem;
  }
  .hero-sub {
    font-size: 1rem;
  }
  .hero-actions {
    flex-direction: column;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-right {
    height: 340px;
  }
  .h-card-1 {
    width: 200px;
  }
  .h-card-2 {
    width: 170px;
    top: 120px;
  }
  .h-card-3 {
    width: 200px;
    padding: 14px;
  }

  /* How */
  .how-grid {
    grid-template-columns: 1fr;
  }
  .how-step {
    padding: 32px 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .how-step:last-child {
    border-bottom: none;
  }

  /* Services */
  .service-row {
    padding: 48px 0;
  }

  /* Work bento */
  .work-grid {
    grid-template-columns: 1fr;
  }

  /* Pages */
  .values-grid,
  .cat-grid,
  .products-grid {
    grid-template-columns: 1fr;
  }
  .value-item {
    border-right: none;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .contact-form {
    padding: 28px;
  }

  /* CTA */
  #cta {
    padding: 80px 0;
  }
  .cta-actions {
    flex-direction: column;
  }
  .cta-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Footer */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-brand p {
    max-width: 100%;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    align-items: flex-start;
  }
}