/* ─────────────────────────────────────────────────────────────────────────────
   NEEM Group — Mobile & Responsive Overrides
   Loaded after inline styles on every page. Covers:
     1. Hamburger navigation (≤ 768px)
     2. Layout stacking for sections across all pages
   ───────────────────────────────────────────────────────────────────────────── */

/* ─── HAMBURGER BUTTON ─── */
.neem-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 52px;
  height: 52px;
  margin-right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  z-index: 10001;
  position: relative;
}
.neem-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: #2c2820;
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-origin: center;
}
.neem-hamburger.open span { background: #d4b87a; }
.neem-hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.neem-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.neem-hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ─── MOBILE NAV OVERLAY ─── */
.neem-mobile-nav {
  position: fixed;
  inset: 0;
  background: #0f0e0c;
  z-index: 9997;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.neem-mobile-nav.open {
  opacity: 1;
  pointer-events: auto;
}
.neem-mobile-nav a {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 9vw, 52px);
  font-weight: 300;
  color: #c9c2b4;
  text-decoration: none !important;
  letter-spacing: 0.04em;
  padding: 12px 0;
  text-align: center;
  line-height: 1.1;
  border: none !important;
  border-bottom: none !important;
  transition: color 0.2s;
}
.neem-mobile-nav a:hover,
.neem-mobile-nav a.active { color: #d4b87a; }
.neem-mobile-nav-wordmark {
  position: absolute;
  bottom: 40px;
  font-family: 'Karla', sans-serif;
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #2c2820;
}

/* ─── MAIN MOBILE BREAKPOINT (≤ 768px) ─── */
@media (max-width: 768px) {

  /* Nav */
  .neem-tab-links { display: none !important; }
  .neem-hamburger { display: flex !important; }
  .neem-logo { height: 60px !important; }
  body.neem-nav-open { overflow: hidden; }

  /* Common */
  #neem-root .section-inner { padding: 0 20px !important; }

  /* ── HOME HERO ── */
  #neem-root .hero {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
  }
  /* Show image as full-bleed background on mobile */
  #neem-root .hero-right {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
  }
  #neem-root .hero-right img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(0.35) saturate(0.5) !important;
  }
  #neem-root .hero-right::after {
    background: linear-gradient(to bottom, rgba(24,22,18,0.5) 0%, rgba(24,22,18,0.1) 50%, rgba(24,22,18,0.6) 100%) !important;
  }
  #neem-root .hero-left { z-index: 2 !important; }
  #neem-root .hero-left {
    flex: 1 !important;
    justify-content: center !important;
    padding: 110px 24px 60px !important;
  }
  #neem-root .hero-headline { font-size: clamp(36px, 9vw, 56px) !important; }
  #neem-root .hero-sub { color: rgba(245,240,232,0.9) !important; }
  /* Pull stats out of absolute positioning so they sit below content */
  #neem-root .hero-stats {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    flex-shrink: 0 !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
  #neem-root .stat-item { padding: 20px 14px !important; }
  #neem-root .stat-number { font-size: 28px !important; }
  #neem-root .stat-label { font-size: 8px !important; }

  /* ── HOME PHILOSOPHY ── */
  #neem-root .philosophy { padding: 80px 0 !important; }
  #neem-root .philosophy-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* ── HOME SECTORS ── */
  #neem-root .sectors { padding: 80px 0 !important; }
  #neem-root .sectors-header { grid-template-columns: 1fr !important; gap: 24px !important; }
  #neem-root .sectors-grid { grid-template-columns: 1fr !important; }
  #neem-root .sector-card { height: 280px !important; }

  /* ── HOME INSIGHTS ── */
  #neem-root .insights { padding: 80px 0 !important; }
  #neem-root .insights-grid { grid-template-columns: 1fr !important; }

  /* ── HOME MI PROMO ── */
  #neem-root .mi-promo { padding: 80px 0 !important; }
  #neem-root .mi-promo-inner { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* ── HOME ABOUT STRIP ── */
  #neem-root .about-strip { padding: 80px 0 !important; }
  #neem-root .about-inner { grid-template-columns: 1fr !important; gap: 40px !important; padding: 0 20px !important; }
  #neem-root .about-divider { display: none !important; }

  /* ── HOME CTA ── */
  #neem-root .cta-section { padding: 80px 20px !important; }

  /* ── PAGE HERO (philosophy / sector pages) ── */
  #neem-root .page-hero { grid-template-columns: 1fr !important; }
  #neem-root .page-hero-right { display: none !important; }
  #neem-root .page-hero-left { padding: 90px 20px 60px !important; }

  /* ── PHILOSOPHY: PRINCIPLES ── */
  #neem-root .principles { padding: 80px 0 !important; }
  #neem-root .principles-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* ── PHILOSOPHY: MI CALLOUT ── */
  #neem-root .mi-callout { flex-direction: column !important; align-items: flex-start !important; gap: 32px !important; padding: 60px 20px !important; }

  /* ── PHILOSOPHY: FOCUS GRID ── */
  #neem-root .focus { padding: 80px 0 !important; }
  #neem-root .focus-grid { grid-template-columns: 1fr !important; }
  #neem-root .focus-card { height: 240px !important; }

  /* ── PHILOSOPHY: MANIFESTO ── */
  #neem-root .manifesto { padding: 80px 20px !important; }

  /* ── EMERGING MARKETS ── */
  #neem-root .markets-grid { grid-template-columns: 1fr !important; }
  #neem-root .market-card { height: 280px !important; }
  #neem-root .approach-inner { padding: 0 20px !important; }

  /* ── DEFENCE ── */
  #neem-root .pull-quote-inner { padding-left: 20px !important; }
  #neem-root .approach-grid { grid-template-columns: 1fr !important; gap: 2px !important; }

  /* ── COMMERCIAL REAL ESTATE ── */
  #neem-root .approach-inner { flex-direction: column !important; }
  #neem-root .case-study-body { grid-template-columns: 1fr !important; gap: 2px !important; }
  #neem-root .case-study-stats { grid-template-columns: 1fr 1fr !important; }

  /* ── DIVERSIFICATION ── */
  #neem-root .intro-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  #neem-root .dimensions-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── MACRO INTELLIGENCE ── */
  #neem-root .mi-hero { padding: 90px 20px 60px !important; }
  #neem-root .mi-hero-headline { font-size: clamp(44px, 12vw, 80px) !important; }
  #neem-root .what-inner { grid-template-columns: 1fr !important; gap: 48px !important; }
  #neem-root .features-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── FOOTER ── */
  #neem-root footer { flex-direction: column !important; gap: 24px !important; text-align: center !important; padding: 40px 20px !important; }
  #neem-root .footer-links { flex-wrap: wrap !important; justify-content: center !important; gap: 20px !important; }
}

/* ─── VERY SMALL SCREENS (≤ 400px) ─── */
@media (max-width: 400px) {
  #neem-root .hero-stats { grid-template-columns: 1fr !important; }
  #neem-root .stat-item { border-right: none !important; border-bottom: 1px solid rgba(184,154,90,0.1) !important; }
  #neem-root .dimensions-grid { grid-template-columns: 1fr !important; }
  #neem-root .features-grid { grid-template-columns: 1fr !important; }
  #neem-root .case-study-stats { grid-template-columns: 1fr !important; }
  #neem-root .hero-actions { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
}