/* ==========================================================================
   RESPONSIVE STYLES
   Breakpoints tested: 320 / 375 / 425 / 768 / 1024 / 1280 / 1440 / 1920
   Mobile-first overrides layered on top of style.css
   ========================================================================== */

/* ---------- 1280px and below (large laptop) ---------- */
@media (max-width: 1280px){
  :root{ --section-pad: 6rem; }
  .card-grid{ grid-template-columns: repeat(3, 1fr); }
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 1024px and below (tablet landscape) ---------- */
@media (max-width: 1024px){
  .main-nav{ display: none; }
  .hamburger{ display: flex; }

  .split-grid{ grid-template-columns: 1fr; gap: 3rem; }
  .split-grid.reverse .split-media{ order: 0; }

  .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
  .stat-item{ border-right: none; border-bottom: 1px solid var(--paper-10); padding-bottom: 1.6rem; }
  .stat-item:nth-child(2n){ border-right: none; }

  .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
  .contact-grid{ grid-template-columns: 1fr; }
}

/* ---------- 768px and below (tablet portrait) ---------- */
@media (max-width: 768px){
  :root{ --section-pad: 4.5rem; }
  .card-grid{ grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .why-grid{ grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .values-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .hero-meta{ gap: 1.6rem; }
  .hero-meta strong{ font-size: 1.2rem; }
  .form-row{ grid-template-columns: 1fr; }
  .contact-form-wrap{ padding: 1.8rem; }
  .footer-grid{ grid-template-columns: 1fr; text-align: left; }
  .footer-bottom{ flex-direction: column; text-align: center; }
  .page-header{ padding: 8.5rem 0 3.5rem; }
}

/* ---------- 425px and below (large phone) ---------- */
@media (max-width: 425px){
  .container{ padding: 0 1.1rem; }
  h1{ font-size: clamp(2rem, 8vw, 2.6rem); }
  h2{ font-size: clamp(1.6rem, 6vw, 2rem); }
  .card-grid{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: 1fr; }
  .stat-item{ border-bottom: 1px solid var(--paper-10); padding-bottom: 1.4rem; }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ width: 100%; }
  .hero-meta{ flex-direction: column; gap: 1rem; }
  .hero-meta div{ border-left: none; border-top: 1px solid rgba(212,175,55,.35); padding-left: 0; padding-top: .6rem; }
  .cta-actions{ flex-direction: column; align-items: stretch; }
  .cta-actions .btn{ width: 100%; }
  .split-media .seal-float{ width: 100px; height: 100px; left: -14px; bottom: -20px; }
  .seal-float .seal-inner{ width: 76px; height: 76px; }
  .seal-inner strong{ font-size: 1.1rem; }
  .nav-cta .btn span.btn-label-full{ display: none; }
}

/* ---------- 375px ---------- */
@media (max-width: 375px){
  .brand{ font-size: 1.05rem; }
  .brand-seal{ width: 36px; height: 36px; }
  .contact-form-wrap{ padding: 1.4rem; }
}

/* ---------- 320px (smallest supported) ---------- */
@media (max-width: 320px){
  .container{ padding: 0 .9rem; }
  .btn{ padding: .9rem 1.5rem; font-size: .85rem; }
}

/* ---------- 1920px and above (large desktop) ---------- */
@media (min-width: 1920px){
  :root{ --container-w: 1440px; }
  html{ font-size: 18px; }
}

/* ---------- Touch target safety net ---------- */
@media (hover: none) and (pointer: coarse){
  .btn, .nav-links a, .hamburger, #back-to-top, .slider-dots button{
    min-height: 44px;
  }
  .product-card:hover .product-media img,
  .why-card:hover, .team-card:hover{
    transform: none;
  }
}