/* Mobile-first enhancements (<= 768px) */
@media (max-width: 768px) {

  /* Basic type scaling */
  h1 { font-size: clamp(1.6rem, 6vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 4.8vw, 1.6rem); }
  .subhead { font-size: clamp(0.95rem, 3.8vw, 1.05rem); }

  /* Hero spacing */
  .page-hero, .hero { padding: 1.25rem 1rem; }
  .hero .btn, .page-hero .btn { width: 100%; max-width: 420px; display: inline-block; }

  /* Navbar: allow wrap + better tap targets */
  nav, header nav { padding: 0.5rem 0.75rem; }
  nav .brand, header .brand { margin-right: auto; }
  nav ul, header ul {
    display: flex; flex-wrap: wrap; gap: .4rem .75rem;
    padding: 0; margin: 0.5rem 0 0 0; list-style: none;
  }
  nav ul li a, header ul li a { padding: 0.4rem 0.6rem; }

  /* Testimonials: tighter cards */
  .testimonials { padding: 1rem; }
  .testimonials .t-card { padding: 0.9rem; }
  .testimonials .t-card .t-meta { font-size: 0.95rem; }
  .star-rating.inline svg { width: 12px; height: 12px; }

  /* Services grid → single column */
  .services .s-grid { display: grid; grid-template-columns: 1fr !important; gap: 0.9rem; padding: 0 1rem; }
  .services .s-card { padding: 1rem; }

  /* Portfolio squares: smaller tiles & centered grid */
  .portfolio .p-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    justify-items: center;
  }
  .portfolio .p-card { width: 140px; }
  .portfolio .p-card img { width: 140px; height: 140px; object-fit: cover; }

  /* CTA blocks */
  .themes-cta, .p-cta, .contact-hero { padding: 1rem; text-align: center; }
  .themes-cta .btn, .p-cta .btn { width: 100%; max-width: 360px; }

  /* Contact form adjustments */
  .contact-box { width: 94% !important; margin: 1rem auto !important; padding: 1rem !important; }
  .contact-box form input, .contact-box form select, .contact-box form textarea { font-size: 1rem; }
  .contact-hero .ch-logo { height: 28px; }

  /* Spacing between sections */
  section { margin-bottom: 1.25rem; }
}

/* Very small phones (<= 480px) */
@media (max-width: 480px) {
  .portfolio .p-grid { grid-template-columns: 1fr; }
  .portfolio .p-card { width: 92vw; max-width: 320px; }
  .portfolio .p-card img { width: 100%; height: 92vw; max-height: 320px; }
}