/* =====================================================
   RESPONSIVE FIXES
   No horizontal overflow on mobile.
===================================================== */
@media (max-width: 1100px) {
  .hero-grid, .two-column, .page-hero-grid, .contact-grid, .faq-wrap, .blog-layout, .single-layout { grid-template-columns: 1fr; }
  .hero-visual { min-height: 520px; }
  .profile-frame { margin: 0 auto; }
  .service-grid.big { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid, .testimonial-grid, .blog-grid.three, .timeline-grid, .process-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-sidebar, .toc-card { position: static; }
}

@media (max-width: 860px) {
  .header-inner { grid-template-columns: 1fr auto auto; }
  .nav-pill { position: fixed; left: 20px; right: 20px; top: 82px; display: none; flex-direction: column; align-items: stretch; border-radius: 24px; padding: 12px; }
  .nav-pill.open { display: flex; }
  .nav-pill a { text-align: center; }
  .hire-btn { display: none; }
  .menu-toggle { display: grid; place-items:center; }
  .page-section { padding: 76px 0; }
  .hero-section { padding: 70px 0; }
  .hero-actions { align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .counter-strip { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
  .skills-grid, .service-grid, .service-grid.big, .portfolio-grid, .testimonial-grid, .blog-grid.three, .blog-grid.two, .timeline-grid, .process-grid, .footer-grid { grid-template-columns: 1fr; }
  .featured-blog-card { grid-template-columns: 1fr; }
  .featured-blog-card .blog-image { border-radius: 28px 28px 0 0; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: relative; height: auto; }
  .editor-grid, .admin-stats { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .container { width: min(100% - 28px, var(--container)); }
  h1 { font-size: clamp(42px, 14vw, 58px); }
  h2 { font-size: 36px; }
  .brand img { width: 112px; }
  .profile-frame { min-height: 450px; border-radius: 28px; }
  .profile-img { width: 74%; height: 88%; }
  .status-card { left: 16px; right: 16px; bottom: 18px; font-size: 13px; }
  .counter-strip { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .cta-card { flex-direction: column; align-items: flex-start; padding: 28px; }
  .contact-form, .contact-card, .admin-panel { padding: 22px; }
}