/* ================================================================
   CAPITAL GROUP OF COMPANIES — RESPONSIVE STYLESHEET
   Breakpoints: Desktop (default) / Laptop 1200 / Tablet 992 / 768 / Mobile 576 / Small 380
   ================================================================ */

/* ---------- LAPTOP (<=1200px) ---------- */
@media (max-width: 1200px) {
  .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .industries-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats-grid { gap: 30px; }
  .hero-inner { max-width: 820px; }
}

/* ---------- TABLET (<=992px) ---------- */
@media (max-width: 992px) {
  section { padding: 90px 0; }

  .navbar { padding: 0 14px; }
  .brand { max-width: min(100%, 340px); }
  .brand-name { font-size: clamp(.88rem, 1.8vw, .98rem); line-height: 1.15; }
  .brand-tag { font-size: .64rem; }

  .mvv-grid,
  .leadership-grid,
  .services-grid,
  .industries-grid,
  .testimonial-grid,
  .stats-grid,
  .contact-grid,
  .careers-portal { grid-template-columns: 1fr; gap: 24px; }

  .service-card,
  .testimonial-card,
  .job-card,
  .mvv-card,
  .why-us-card,
  .industry-chip,
  .leader-feature-photo,
  .careers-welcome,
  .contact-form,
  .service-detail-aside { width: 100%; max-width: 100%; }

  .leader-feature-photo { min-height: auto; height: auto; }
  .section-image { width: 100%; height: auto; object-fit: cover; }

  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed; top: 0; right: -100%; height: 100vh; width: min(85vw, 320px);
    background: var(--c-white); flex-direction: column; align-items: flex-start;
    padding: 100px 28px 40px; gap: 22px; transition: right .45s var(--ease);
    box-shadow: -20px 0 50px rgba(0,0,0,.15);
  }
  .nav-menu.open { right: 0; }
  .nav-link, .site-header .nav-link { color: var(--c-black) !important; font-size: 1rem; padding: 12px 0; width: 100%; border-radius: 12px; }
  .btn-quote { width: 100%; justify-content: center; padding: 12px 0; }

  .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-toggle.active span { background: var(--c-black); }

  .hero { min-height: auto; padding: 72px 0 44px; }
  .hero-inner { padding-top: 84px; padding-bottom: 50px; }
  .hero-title { max-width: 100%; line-height: 1.08; margin-left: auto; margin-right: auto; }
  .hero-sub { max-width: 680px; margin-left: auto; margin-right: auto; }
  
  /* Force hero to sit directly under the fixed header (remove extra top gap) */
  .hero { padding-top: 0 !important; }
  .hero-inner { padding-top: 0 !important; }

  .about-grid, .why-us-grid, .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .about-visual { max-width: 380px; margin: 0 auto; }
  .mvv-grid,
  .leadership-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industries-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .careers-portal { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 24px; }
  .form-row { grid-template-columns: 1fr; }
}

@media (min-width: 760px) {
  .jobs-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 759px) {
  .jobs-list { grid-template-columns: 1fr; }
  .job-card { flex-direction: column; align-items: stretch; }
  .job-card-top { flex-direction: column; align-items: flex-start; }
  .job-actions { align-items: flex-start; }
  .job-tag { font-size: .72rem; padding:6px 6px; }
  .service-detail-body { grid-template-columns: 1fr; gap: 28px; }
  .service-detail-aside { max-width: none; }
  .service-detail-list { grid-template-columns: 1fr; }
}

/* ---------- LARGE MOBILE (<=768px) ---------- */
@media (max-width: 768px) {
  .container { padding: 0 22px; }
  .navbar { padding: 0 20px; }
  .hero-inner { padding-top: 76px; padding-bottom: 44px; }
  /* Remove app shell top padding on mobile so hero aligns with header */
  .app-main { padding-top: 0 !important; }
  .hero { padding-top: 0 !important; }
  .hero-title { font-size: clamp(1.95rem, 7vw, 2.7rem); }
  .hero-sub { font-size: .98rem; margin-bottom: 28px; margin-left: auto; margin-right: auto; }
  
  /* Remove extra gap between fixed header and hero */
  .hero { padding-top: 0 !important; }
  .hero-inner { padding-top: 0 !important; }
  .hero-actions { gap: 12px; margin-bottom: 30px; justify-content: center; }
  .hero-stats { gap: 8px; justify-content: center; }
  .hero-stat-card { padding: 11px 10px; }
  .about-pillars { grid-template-columns: 1fr; }
  .mvv-grid, .leadership-grid { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial-card { padding: 24px; border-radius: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 20px; padding: 34px 22px 28px; }
  .footer-brand { margin-bottom: 4px; }
  .floating-cta { width: 52px; height: 52px; bottom: 20px; right: 20px; }
  .back-to-top { width: 42px; height: 42px; bottom: 20px; right: 84px; }
  .why-us-grid { gap: 40px; }
  .why-us-card { padding: 32px 24px; min-height: unset; }
  .reason { gap: 12px; }
  .reason h3 { font-size: 1rem; }
  .reason p { font-size: .84rem; }
}

/* ---------- MOBILE (<=576px) ---------- */
@media (max-width: 576px) {
  section { padding: 70px 0; }
  .navbar { padding: 0 16px; }
  .brand { gap: 10px; }
  .brand-logo { width: 54px; height: auto; }
  .brand-name { font-size: .84rem; }
  .brand-tag { display: none; }
  .hero { padding: 62px 0 34px; }
  .hero-inner { padding-top: 70px; padding-bottom: 34px; }
  /* Ensure no additional top gap on small phones */
  .app-main { padding-top: 0 !important; }
  .hero { padding-top: 0 !important; }
  .hero-title { font-size: clamp(1.72rem, 8vw, 2.3rem); line-height: 1.06; margin-bottom: 16px; }
  .type-wrap { margin-top: 4px; }
  .hero-sub { font-size: .95rem; margin-bottom: 24px; margin-left: auto; margin-right: auto; }
  .hero-actions { flex-direction: column; gap: 12px; justify-content: center; align-items: center; }
  .hero-actions .btn { width: 100%; min-width: 0; }
  .hero-stats { gap: 8px; }
  .hero-stat-card { width: 100%; justify-content: center; text-align: center; }

  .services-grid { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .testimonial-card { padding: 22px; }
  .testimonial-card p { font-size: .92rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; padding: 30px 20px 24px; text-align: left; }
  .footer-brand { align-items: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; padding: 16px 20px 24px; gap: 6px; }

  .section-head { margin-bottom: 42px; }
  .section-head h2 { font-size: clamp(1.6rem, 7.6vw, 2.1rem); }
  .section-sub { font-size: .95rem; }
  .why-us-grid { gap: 32px; }
  .why-us-card { padding: 34px 26px; min-height: unset; }
  .why-us-card p { font-size: 1.08rem; line-height: 1.45; }
  .contact-form { padding: 28px; }
}

/* ---------- SMALL MOBILE (<=380px) ---------- */
@media (max-width: 380px) {
  .container { padding: 0 16px; }
  .hero-title { font-size: clamp(1.58rem, 9vw, 1.95rem); }
  .hero-sub { font-size: .9rem; }
  .hero-actions .btn { padding: 11px 16px; font-size: .8rem; }
  .hero-stats { gap: 6px; }
  .hero-stat-card { padding: 10px 8px; }
  .hero-stat-num, .hero-stat-suffix { font-size: 1.6rem; }
  .why-us-card { padding: 28px 20px; }
  .reason { flex-direction: column; }
  .reason-index { padding-top: 0; }
  .industry-chip { min-height: 116px; }
  .footer-col a { font-size: .9rem; }
}