/* =========================================================================
   NATUAS LABS LLP — Responsive Rules
   Mobile is designed as its own experience, not a squeezed desktop layout.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Large desktop refinement
   ------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .approach-steps { grid-template-columns: repeat(2, 1fr); }
  .approach-step::after { display: none; }
  .approach-step { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-6); }
}

/* -------------------------------------------------------------------------
   Tablet — 2 column balance
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --header-height: 76px; }

  .main-nav .nav-list { gap: var(--space-5); }
  .header-actions .btn span { display: none; }

  .hero .container { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero-visual { order: -1; max-width: 420px; margin: 0 auto; }
  .hero-copy { text-align: left; }

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

  .split, .split--reverse { grid-template-columns: 1fr; }
  .split-visual { order: -1 !important; }

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

  .statement-pair { grid-template-columns: 1fr; gap: var(--space-6); }

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

  .cta-band { grid-template-columns: 1fr; text-align: left; }
  .two-cta-grid { grid-template-columns: 1fr; }

  .contact-layout { grid-template-columns: 1fr; }

  .product-detail-hero { grid-template-columns: 1fr; }
  .product-detail-media { position: static; margin-bottom: var(--space-6); }

  .footer-top { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------------------------
   Mobile — designed independently
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root {
    --header-height: 68px;
    --space-8: 48px;
    --space-9: 64px;
  }

  body { padding-bottom: 66px; } /* room for sticky CTA */

  .main-nav { display: none; }
  .header-actions .btn { display: none; }
  .nav-toggle { display: flex; }

  .hero { padding-top: calc(var(--header-height) + var(--space-6)); padding-bottom: var(--space-7); }
  .hero-visual { order: 0; max-width: 340px; }
  .hero-copy .eyebrow { font-size: 0.72rem; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hero-product-frame { padding: var(--space-4); }

  .trust-strip .container { grid-template-columns: 1fr; gap: var(--space-4); padding-top: var(--space-5); padding-bottom: var(--space-5); }

  .section { padding-top: var(--space-8); padding-bottom: var(--space-8); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; gap: var(--space-5); }

  .product-toolbar { flex-direction: column; align-items: stretch; }
  .search-field { min-width: 0; }
  .filter-list { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
  .filter-chip { flex: 0 0 auto; }

  .approach-steps { grid-template-columns: 1fr; }
  .approach-step { border-bottom: 1px solid var(--border-subtle); }
  .approach-step:last-child { border-bottom: none; }

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

  .statement blockquote { font-size: 1.4rem; }

  .cta-band { padding: var(--space-6); }
  .cta-band-actions { flex-direction: column; }
  .cta-band-actions .btn { width: 100%; }

  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: var(--space-5); }

  .footer-top { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  .mobile-sticky-cta { display: block; }

  .product-detail-name { font-size: 2rem; }
  .flow { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); padding: 4px 0; }

  .breadcrumb { font-size: 0.72rem; }
}

@media (max-width: 420px) {
  :root { --container-pad: 18px; }
  h1, .h1 { font-size: 2.2rem; }
}

/* -------------------------------------------------------------------------
   Fine pointer / hover-capable only — avoid sticky hover states on touch
   ------------------------------------------------------------------------- */
@media (hover: none) {
  .product-card:hover,
  .value-card:hover,
  .btn--primary:hover,
  .btn--secondary:hover { transform: none; }
}