/* ============================================================
   TABLET  ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .svc-card { flex: 0 0 calc((100% - 48px) / 3); }
  .products-grid  { grid-template-columns: repeat(2, 1fr); }

  .about-grid      { grid-template-columns: 1fr; gap: 48px; }
  .about-img-wrap  { height: 380px; order: -1; }
  .about-features  { grid-template-columns: 1fr 1fr; }

  .contact-grid  { grid-template-columns: 1fr; gap: 32px; }

  .footer-inner  { grid-template-columns: 1fr 1fr; padding: 56px 0 48px; }

  .testimonial-card { flex: 0 0 calc(50% - 14px); }

  /* Hero split */
  .hero { grid-template-columns: 1fr 1fr; }
  .hero-text { padding: calc(var(--nav-h) + 40px) 40px 60px max(24px, calc((100vw - 1280px) / 2 + 40px)); }
}

/* ============================================================
   LARGE MOBILE  ≤ 768px
   ============================================================ */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }

  .section { padding: 72px 0; }

  /* Navbar */
  .nav-links {
    position: fixed;
    top: 0; left: 0;
    bottom: 0;
    width: min(320px, 80vw);
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--clr-white);
    padding: 32px 24px 24px;
    gap: 24px;
    transform: translateX(-110%);
    transition: transform var(--transition);
    box-shadow: 16px 0 48px rgba(90,60,30,.12);
    z-index: 999;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-close {
    align-self: flex-end;
    padding: 12px 18px;
    font-family: var(--ff-sans);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    color: var(--clr-dark);
    background: transparent;
    border: 1px solid var(--clr-grey-lt);
    border-radius: 999px;
    cursor: pointer;
  }
  .nav-link { color: var(--clr-dark); font-size: var(--fs-sm); padding: 14px 0; }
  .nav-link::after{ left: 8px;}
  .nav-cta { display: none; }
  .hamburger { display: flex; }

  /* Hero — stack on mobile */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    background-image: none;
  }
  .hero-text { padding: calc(var(--nav-h) + 40px) 24px 48px; order: 1; }
  .hero-image {
    display: block;
    height: 320px;
    order: 2;
    background-image: url("../images/hero/home.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    border-radius: 24px;
    margin: 0 24px 24px;
  }
  .hero-title { font-size: clamp(2.4rem, 9vw, 3.2rem); }
  .hero-actions { flex-direction: row; }

  /* Products */
  .products-grid { grid-template-columns: repeat(2, 1fr); }

  /* About */
  .about-img-wrap { height: 320px; }

  /* Services */
  .svc-card { flex: 0 0 calc((100% - 24px) / 2); }
  .services-hd { flex-direction: column; align-items: flex-start; gap: 20px; }

  /* Gallery */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-item--tall { grid-row: span 1; height: 200px; }
  .gallery-item--wide { grid-column: span 2; }

  /* Testimonials */
  .testimonial-card { flex: 0 0 100%; }

  /* Contact */
  .form-row { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 32px 24px; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 40px; }
  .footer-logo  { font-size: 2.4rem; }
}

/* ============================================================
   SMALL MOBILE  ≤ 480px
   ============================================================ */
@media (max-width: 480px) {
  .section-title { font-size: var(--fs-xl); }

  .hero-subtitle { font-size: var(--fs-sm); }
  .hero-desc     { font-size: var(--fs-xs); }
  .hero-actions  { flex-direction: column; }

  .about-features { grid-template-columns: 1fr; gap: 16px; }

  .svc-card { flex: 0 0 80%; }
  .svc-img  { height: 210px; }
  .products-grid { grid-template-columns: 1fr; }

  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item,
  .gallery-item--tall,
  .gallery-item--wide { grid-column: span 1; grid-row: span 1; height: 220px; }

  .hero-actions { gap: 12px; }
  .btn, .btn-outline-gold { padding: 12px 24px; font-size: 0.65rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-left, .fade-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .gallery-item { opacity: 1; transform: none; }
  .hero-content.fade-up { animation: none; opacity: 1; }
}