/* =========================================================
   RESPONSIVE STYLES — Tablet & Mobile
   ========================================================= */

/* -------------------- TABLET (<=1024px) -------------------- */
@media (max-width: 1024px) {
  .hero h1 { font-size: 42px; }
  .about-preview { grid-template-columns: 1fr; gap: 44px; }
  .about-media { order: -1; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .mv-grid { grid-template-columns: 1fr; }
  .owner-card { grid-template-columns: 1fr; padding: 36px; }
  .owner-card .owner-photo { max-width: 320px; margin: 0 auto; }
  .contact-grid { grid-template-columns: 1fr; }
  .highlights .container { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .masonry { columns: 3 200px; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
}

/* -------------------- MOBILE NAV BREAKPOINT (<=880px) -------------------- */
@media (max-width: 880px) {
  .main-nav {
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    z-index: 999;
  }
  .main-nav.open { max-height: 420px; }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 24px 20px;
    gap: 2px;
  }
  .main-nav a { padding: 14px 10px; border-radius: 8px; width: 100%; }
  .header-phone { display: none; }
  .hamburger { display: flex; }
}

/* -------------------- SMALL TABLET (<=768px) -------------------- */
@media (max-width: 768px) {
  section { padding: 64px 0; }
  .section-head h2 { font-size: 30px; }
  .hero { min-height: 86vh; }
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 15.5px; }
  .page-hero { padding: 130px 0 60px; }
  .page-hero h1 { font-size: 30px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .cta-band { padding: 50px 28px; }
  .cta-band h2 { font-size: 26px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 30px; }
  .masonry { columns: 2 160px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .about-media .badge-float { right: 10px; bottom: -20px; padding: 14px 18px; }
  .highlights .container { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------- MOBILE (<=560px) -------------------- */
@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .brand-text .brand-name { font-size: 14.5px; }
  .brand-text .brand-sub { font-size: 10px; }
  .brand-mark { width: 40px; height: 40px; font-size: 15px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero h1 { font-size: 27px; }
  .hero-eyebrow { font-size: 11px; padding: 7px 14px; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .product-card .info { padding: 12px 14px 16px; }
  .product-card .info h4 { font-size: 14px; }
  .masonry { columns: 2 140px; column-gap: 12px; }
  .masonry .g-item { margin-bottom: 12px; }
  .owner-card { padding: 24px; }
  .owner-card h3 { font-size: 22px; }
  .mv-card, .contact-form-wrap, .policy-wrap { padding: 26px 22px; }
  .value-card { padding: 26px 16px; }
  .timeline-item { padding-left: 56px; }
  .timeline::before { left: 18px; }
  .timeline-item .dot { width: 38px; height: 38px; font-size: 11px; }
  .cta-band .cta-actions { flex-direction: column; }
  .cta-band .cta-actions .btn { width: 100%; justify-content: center; }
  .lightbox .lb-prev, .lightbox .lb-next { width: 40px; height: 40px; }
  .lightbox .lb-prev { left: 10px; }
  .lightbox .lb-next { right: 10px; }
  .lightbox .lb-close { top: 14px; right: 14px; }
  .back-to-top { bottom: 18px; right: 18px; width: 44px; height: 44px; }
  .gallery-filters { gap: 8px; }
  .filter-btn { padding: 8px 16px; font-size: 13px; }
}

@media (max-width: 400px) {
  .highlights .container { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
}