/* ============================================================
   RESPONSIVE.CSS — tablet · mobile · ultra-wide
   Loaded last so it overrides section styles.
   ============================================================ */

/* ---------- Ultra-wide desktop ---------- */
@media (min-width: 1700px) {
  :root { --max: 1480px; }
  .hero-title { font-size: clamp(4rem, 5vw, 6rem); }
}

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1080px) {
  .services-grid { grid-template-columns: repeat(4, 1fr); }
  .s-seo { grid-column: span 4; }
  .s-ads { grid-column: span 2; }
  .s-brand, .s-social { grid-column: span 2; }
  .s-content { grid-column: span 2; }
  .s-web { grid-column: span 2; }

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

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  /* Switch nav to hamburger */
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  /* Hero stacks */
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-visual { height: 380px; max-width: 460px; margin: 0 auto; width: 100%; }
  .card-main { left: 0; }
  .card-mini-a { right: 0; }
  .card-mini-b { right: 4%; }

  /* About stacks */
  .about-grid { grid-template-columns: 1fr; }
  .about-right { max-width: 480px; }

  /* Process becomes single-column left-aligned */
  .timeline-line { left: 9px; transform: none; }
  .timeline-fill { width: 100%; }
  .step, .step-right { width: 100%; left: 0; text-align: left; padding: 1rem 0 1rem 2.4rem; }
  .step .step-node, .step-right .step-node { left: 1px; right: auto; }

  /* Pricing stacks, remove scale on featured */
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .featured { transform: scale(1); }
  .featured:hover { transform: translateY(-4px); }

  /* Footer reflow */
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .section { padding: 4rem 1.25rem; }

  .services-grid { grid-template-columns: 1fr; }
  .s-seo, .s-ads, .s-brand, .s-social, .s-content, .s-web { grid-column: span 1; }
  /* keep detail text always visible on touch (no hover) */
  .service-card .svc-more { max-height: 120px; opacity: 1; margin-top: 0.7rem; transform: none; }
  .service-card::before { opacity: 0.7; }

  .case-grid { grid-template-columns: 1fr; }
  .testi-card { width: 300px; }

  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1; justify-content: center; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Disable custom cursor on touch — fall back to native */
  body { cursor: auto; }
  button, a { cursor: pointer; }
  .cursor-dot, .cursor-ring, .cursor-glow { display: none; }
}

/* ---------- Touch devices of any size: native cursor ---------- */
@media (hover: none) {
  body { cursor: auto; }
  .cursor-dot, .cursor-ring, .cursor-glow { display: none; }
}

/* ---------- Fluid typography safety ---------- */
@media (max-width: 380px) {
  .hero-title { font-size: 2.2rem; }
  .section-title { font-size: 1.9rem; }
}