/* responsive.css — Mobile + tablet adaptations for InAg Advisory site
   Desktop styles in index.html / about.html stay untouched.
   These rules ONLY activate at narrower widths. */

/* ── Mobile menu chrome (always present, hidden by default) ──────────── */
.mobile-menu-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid #E5E7EB;
  border-radius: 6px; padding: 0;
  cursor: pointer; color: #1B5E20;
  transition: background 200ms ease, border-color 200ms ease;
}
.mobile-menu-toggle:hover { background: #F8FAFC; border-color: #1B5E20; }
.mobile-menu-toggle svg { display: block; }

.mobile-menu {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100; background: rgba(13,31,23,0.95);
  backdrop-filter: blur(12px);
  flex-direction: column;
  padding: 88px 24px 32px;
  animation: mobileMenuIn 220ms cubic-bezier(.2,.7,.3,1);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  color: #fff; text-decoration: none;
  font-size: 20px; font-weight: 500; letter-spacing: -0.3px;
  padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.12);
  font-family: 'Roboto Slab', Georgia, serif;
}
.mobile-menu a.mobile-menu-cta {
  margin-top: 20px; border: none; color: #FFB300;
  font-size: 16px; font-weight: 700; letter-spacing: 0.3px;
  font-family: 'Inter', system-ui, sans-serif;
}
.mobile-menu-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px; padding: 0;
  cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
@keyframes mobileMenuIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── ≤ 880px (tablet portrait) ────────────────────────────────────────── */
@media (max-width: 880px) {
  /* Services: 3 → 2 columns */
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── ≤ 768px (mobile) ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header — collapse inline nav, show hamburger */
  .site-nav { display: none !important; }
  .site-cta { display: none !important; }
  .mobile-menu-toggle { display: inline-flex !important; }
  .site-header-inner { padding: 12px 18px !important; gap: 12px !important; }
  .site-header-inner svg.brand-lockup { height: 44px !important; }

  /* Hero — stack columns, scale type */
  .v1b-hero { min-height: auto !important; }
  .v1b-inner {
    grid-template-columns: 1fr !important;
    padding: 56px 20px 72px !important;
    gap: 22px !important;
  }
  .v1b-h1 { font-size: 34px !important; line-height: 1.12 !important; letter-spacing: -0.4px !important; }
  .v1b-lede { font-size: 14px !important; }
  .v1b-bg { background-size: cover !important; background-position: center !important; }
  .v1b-caption {
    right: 14px !important; bottom: 14px !important;
    font-size: 9px !important; padding: 6px 10px !important;
    letter-spacing: 1.2px !important;
  }
  .v1b-meta { gap: 10px 18px !important; padding-top: 16px !important; }
  .v1b-meta-item { font-size: 11px !important; }

  /* Services */
  .services-section { padding: 64px 0 !important; }
  .services-section > div { padding: 0 20px !important; }
  .services-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .services-h2 { font-size: 26px !important; margin-bottom: 28px !important; }

  /* Choice / Clarity */
  .clutter-section { min-height: 600px !important; }
  .clutter-inner { padding: 36px 20px 52px !important; gap: 48px !important; }
  .clutter-h2 { font-size: 32px !important; line-height: 1.1 !important; letter-spacing: -0.6px !important; }
  .clutter-lede { font-size: 14px !important; }
  .clutter-quote-text { font-size: 16px !important; }

  /* Sectors */
  .sectors-section { padding: 64px 0 !important; }
  .sectors-section > div { padding: 0 20px !important; }
  .sectors-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .sectors-h2 { font-size: 26px !important; margin-bottom: 28px !important; }

  /* Intelligence */
  .intel-section { padding: 64px 0 !important; }
  .intel-inner {
    grid-template-columns: 1fr !important;
    padding: 0 20px !important;
    gap: 36px !important;
  }
  .intel-h2 { font-size: 26px !important; }
  .intel-h2 br { display: none; }
  .intel-lede { font-size: 15px !important; }
  .intel-body { font-size: 14px !important; }

  /* Footer */
  .footer-section { padding: 48px 0 24px !important; }
  .footer-inner { padding: 0 20px !important; gap: 28px !important; }
  .footer-lockup { height: 60px !important; }
  .footer-email { font-size: 18px !important; }
  .footer-legal { padding: 16px 20px 0 !important; }

  /* About hero */
  .about-hero { min-height: auto !important; }
  .about-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding: 60px 20px 72px !important;
  }
  .about-hero-portrait { max-width: 280px; margin: 0 auto; width: 100%; }
  .about-hero-name { font-size: 42px !important; line-height: 1.04 !important; }
  .about-hero-tagline { font-size: 18px !important; }
  .about-hero-meta { gap: 10px 18px !important; }

  /* About career */
  .about-career { padding: 72px 20px !important; }
  .career-header {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 44px !important;
  }
  .career-h2 { font-size: 30px !important; line-height: 1.12 !important; }
  .career-row { grid-template-columns: 90px 1fr !important; }
  .career-rail { left: 90px !important; }
  .career-dot { left: 85px !important; }
  .career-body { padding-left: 24px !important; }
  .career-company { font-size: 18px !important; }

  /* About signature */
  .about-signature { padding: 72px 20px !important; }
  .signature-h2 { font-size: 30px !important; }

  /* About philosophy */
  .about-philosophy { padding: 80px 20px !important; }
  .philo-inner { grid-template-columns: 1fr !important; gap: 16px !important; }
  .philo-mark { font-size: 80px !important; line-height: 0.4 !important; }
  .philo-quote { font-size: 24px !important; line-height: 1.32 !important; }

  /* About credentials */
  .about-credentials { padding: 72px 20px !important; }
  .cred-inner { grid-template-columns: 1fr !important; gap: 56px !important; }
  .cred-h3 { font-size: 22px !important; }
  .cred-li { grid-template-columns: 100px 1fr !important; gap: 16px !important; }

  /* Section navigator: smaller and dot strip stays hidden */
  .section-nav { right: 14px !important; bottom: 18px !important; }
  .section-dots { display: none !important; }
}

/* ── ≤ 480px (small phones) ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .v1b-h1 { font-size: 28px !important; }
  .clutter-h2 { font-size: 26px !important; }
  .services-h2, .sectors-h2, .intel-h2 { font-size: 22px !important; }
  .about-hero-name { font-size: 36px !important; }
  .career-h2, .signature-h2 { font-size: 26px !important; }
  .philo-quote { font-size: 20px !important; }
}