/* ═══════════════════════════════════════════════════════════════════════════
   SHARED MOBILE STYLES — Breeoot Marketing Site
   Single source of truth for all cross-page mobile layout rules.
   Page-specific mobile overrides remain inline in each HTML file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hamburger button — always hidden on desktop ────────────────────────── */
.nav-mobile-menu { display: contents; }
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}
.nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #1A2B52;
  border-radius: 2px;
  transition: all 0.25s ease;
}
.nav-hamburger-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-hamburger-open span:nth-child(2) { opacity: 0; }
.nav-hamburger-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Mobile overrides ───────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* NAV */
  .nav-hamburger { display: flex; margin-right: 0; padding-right: 4px; }
  .nav-inner, .nav-bar-inner { padding: 0 20px; height: 60px; }
  .nav-links { display: none; }
  .nav-right { display: none; }
  .nav-mobile-menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0; right: 0;
    background: #ffffff;
    border-bottom: 1px solid #E2E2E7;
    padding: 20px;
    flex-direction: column;
    gap: 8px;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .nav-mobile-menu.nav-mobile-open {
    display: flex;
  }
  .nav-mobile-menu .nav-links,
  .nav-mobile-menu .nav-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .nav-mobile-menu .nav-right {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #E2E2E7;
    width: 100%;
  }
  .nav-mobile-menu .nav-cta {
    display: block;
    text-align: center;
    width: 100%;
    padding: 13px 20px;
    border-radius: 4px;
  }
  .nav-mobile-menu .nav-link,
  .nav-mobile-menu .nav-login { padding: 10px 0; font-size: 15px; width: 100%; }

  /* Nav dropdowns → flat on mobile */
  .nav-dropdown { position: static !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; }
  .nav-dd-menu, .nav-dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important; margin-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .nav-mobile-menu .nav-dropdown-menu a,
  .nav-mobile-menu .nav-dd-menu a {
    padding: 8px 0 8px 16px !important; font-size: 14px !important; color: var(--text-2) !important;
  }

  /* CONTAINERS */
  .container, .container-wide, .container-narrow { padding: 0 20px !important; }

  /* HERO */
  .hero, .page-hero { min-height: auto; padding: 48px 20px 40px; }
  .hero-content { padding: 32px 20px; max-width: 100%; margin-left: 0; }
  .hero-h1, .hero h1 { font-size: 38px; letter-spacing: -0.5px; line-height: 1.1; }
  .hero-sub, .hero-subtitle { font-size: 15px; line-height: 1.65; margin-bottom: 28px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-primary, .btn-ghost { text-align: center; padding: 14px 24px; }
  .hero-trust { max-width: 100%; }
  .hero-inner, .hero-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .hero-right { padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 24px; }
  .hero-canvas, .hm-canvas { display: none; }

  /* HERO TRUST CHIPS */
  .hero-trust { flex-wrap: wrap; }
  .trust-chip { min-width: 45%; }

  /* SECTIONS — reduce vertical padding */
  section, .section, [class*="section-"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  .section-hero, .hero { padding-top: 40px !important; }

  /* GRIDS → single column */
  .problem-grid,
  .why-grid,
  .diagnostics-grid,
  .pillars-grid,
  .team-grid,
  .advisors-grid,
  .bio-grid,
  .case-grid,
  .case-studies-grid,
  .stats-grid,
  .partners-grid,
  .fo-services,
  .fo-grid,
  .service-grid,
  .approach-grid,
  .innovation-grid,
  .parallel-inner,
  .insight-grid,
  .article-grid,
  [class*="-grid"],
  [class*="-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Why cards: remove span-based layout */
  .why-card,
  .why-card:nth-child(-n+3),
  .why-card:nth-child(4),
  .why-card:nth-child(5) {
    grid-column: span 1 !important;
  }

  /* TYPOGRAPHY SCALE */
  h1, .h1 { font-size: 36px !important; }
  h2, .h2, .section-h2, .problem-h2, .why-h2, .parallel-left h2,
  .hero-title, .fo-hero-h1, [class*="-h2"] { font-size: 28px !important; letter-spacing: -0.3px !important; }
  h3, .h3, [class*="-h3"] { font-size: 20px !important; }
  .hero-h1 { font-size: 36px !important; }

  /* LARGE SECTION HEADINGS */
  .diag-num, .pillar-num, .step-num { font-size: 36px !important; }
  .diag-title, .pillar-title, .step-title { font-size: 20px !important; }

  /* ARTICLE / LONG TEXT */
  .article-body, .article-content, .post-body { font-size: 16px; line-height: 1.75; }
  .article-lead, .article-hero-title { font-size: 26px !important; }

  /* TEAM BIOS */
  .team-card, .bio-card { padding: 24px 20px !important; }
  .team-card-grid, .bio-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .team-photo, .bio-photo { width: 80px !important; height: 80px !important; }
  .bio-detail, .team-bio { font-size: 14px !important; }

  /* CASE STUDIES */
  .case-panel, .case-detail-panel { flex-direction: column !important; }
  .case-panel-left, .case-panel-right { width: 100% !important; min-width: 0 !important; }

  /* CONSULT FORM */
  .consult-layout, .form-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 16px !important; }
  .form-field input, .form-field select, .form-field textarea {
    font-size: 16px !important; /* prevents iOS zoom */
  }

  /* FOOTER — logo/tagline full-width on top, columns side-by-side below */
  .footer { padding: 48px 20px 32px !important; }
  .footer .container { padding: 0 !important; }
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    padding: 0 !important;
  }
  .footer-brand,
  .footer-inner > div:first-child {
    grid-column: 1 / -1 !important;
    margin-bottom: 8px !important;
  }
  .footer-bottom { padding: 24px 0 0 !important; max-width: 100% !important; }
  .footer-grid, .footer-cols, .footer-columns { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .footer-logo { margin-bottom: 16px !important; }

  /* OVERFLOWS */
  img { max-width: 100%; height: auto; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* CLOSE / CTA SECTIONS */
  .section-close, .cta-section, [class*="-close"] { padding: 48px 20px !important; text-align: center; }
  .close-h2, .cta-h2, [class*="-close"] h2 { font-size: 26px !important; }
  .close-actions, .cta-actions { flex-direction: column; gap: 12px; align-items: stretch; }
  .close-actions a, .cta-actions a { text-align: center; }

  /* STAT BARS / NUMBERS */
  .stat-value { font-size: 32px !important; }

  /* HIDE decorative elements */
  .hero-gradient { background: rgba(255,255,255,0.85) !important; }

  /* FADE-UP FIX: ensure hero and above-fold elements are visible on mobile
     IntersectionObserver may not trigger for elements already in viewport on load */
  .hero.fade-up,
  .hero-inner.fade-up,
  .hero-left.fade-up,
  .hero-right.fade-up,
  .article-card.fade-up {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* ISO BANNER — mobile */
  .iso-inner { flex-direction: column !important; gap: 32px !important; padding: 0 24px !important; text-align: center; }
  .iso-badges { justify-content: center !important; gap: 24px !important; }
}

/* ── ISO CERTIFICATION BANNER ───────────────────────────────────────────── */
.iso-banner {
  padding: 56px 0;
  background: #F5F5F7;
  border-top: 1px solid #E2E2E7;
  border-bottom: 1px solid #E2E2E7;
}
.iso-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 48px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 64px;
}
.iso-text-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #C4963A; margin-bottom: 12px;
}
.iso-text-body {
  font-size: 15px; font-weight: 300;
  color: #555555; line-height: 1.75;
  max-width: 520px;
}
.iso-badges {
  display: flex; gap: 32px;
  align-items: center; flex-shrink: 0;
}
.iso-badge { width: 80px; height: auto; display: block; }