/* =========================================================================
   BEYOND NUMBER -- RESPONSIVE STYLESHEET
   Mobile-first adjustments layered on top of style.css
   Breakpoints tested conceptually at: 320 / 375 / 390 / 414 / 480 / 768 / 1024 / 1280 / 1440 / 1920
   ========================================================================= */

/* ----- Large desktop refinement (1440+) ----- */
@media (min-width: 1440px) {
  :root { --container-width: 1280px; }
}

/* ----- 1024px and below: tablets / small laptops ----- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-panel { max-width: 480px; }
  .intro-grid { grid-template-columns: 1fr; }
  .intro-media { order: -1; aspect-ratio: 16/9; max-width: 520px; margin-inline: auto; }
  .clarity-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats-band { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.12); }
  .testimonial-track { grid-template-columns: 1fr 1fr; }
  .process-track { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .process-track::before { display: none; }
  .article-layout { grid-template-columns: 1fr; }
  .mission-grid { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ----- 900px: navigation collapses to mobile menu ----- */
@media (max-width: 900px) {
  :root { --header-height: 72px; --header-height-scrolled: 64px; }

  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-actions .btn-primary.btn-sm { display: none; }

  .mobile-nav-panel {
    display: block;
    position: fixed;
    top: calc(var(--topbar-height) + var(--header-height));
    left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
    z-index: 999;
  }
  .mobile-nav-panel.is-open { max-height: 520px; overflow-y: auto; }
  .mobile-nav-panel .container { padding-block: 12px; }
  .mobile-nav-panel a {
    display: block;
    padding: 14px 4px;
    font-weight: 500;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
  }
  .mobile-nav-panel a.active { color: var(--color-blue-600); font-weight: 700; }
  .mobile-nav-panel .btn { margin-top: 16px; }

  .topbar-links span:last-child { display: none; }
}

/* ----- 768px: general tablet/phone content stacking ----- */
@media (max-width: 768px) {
  :root { --topbar-height: 36px; }
  body { padding-top: calc(var(--header-height) + var(--topbar-height)); }

  .section { padding-block: 64px; }
  .hero { padding-block: 56px 64px; }
  .page-hero { padding-block: 52px; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr 1fr; padding: 40px 24px; }
  .testimonial-track { grid-template-columns: 1fr; }
  .process-track { grid-template-columns: 1fr; }
  .process-step { padding-inline: 0; padding-left: 26px; border-left: 2px solid var(--color-border); padding-bottom: 8px; }
  .process-num { width: 42px; height: 42px; margin-left: -35px; margin-bottom: 12px; }

  .clarity-list { grid-template-columns: 1fr; }
  .mission-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  .cta-band { flex-direction: column; text-align: center; padding: 48px 28px; }
  .cta-band .btn-group { justify-content: center; }

  .form-grid { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }

  .blog-toolbar { flex-direction: column; align-items: stretch; }
  .search-box { max-width: none; }

  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ----- 480px and below: small phones ----- */
@media (max-width: 480px) {
  :root { --container-pad: 18px; }
  .stats-band { grid-template-columns: 1fr; }
  .stat-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 20px; }
  .stat-item:last-child { border-bottom: none; padding-bottom: 0; }
  .values-grid { grid-template-columns: 1fr; }
  .btn-group { flex-direction: column; align-items: stretch; }
  .btn-group .btn { width: 100%; }
  .rating-summary { flex-direction: column; align-items: flex-start; gap: 6px; }
  .floating-actions { right: 14px; bottom: 14px; }
  .floating-actions a, .scroll-top { width: 44px; height: 44px; font-size: 1rem; }
  .hero-panel { padding: 22px; }
}

/* ----- 375px baseline confirmation ----- */
@media (max-width: 375px) {
  h1 { letter-spacing: -0.005em; }
  .btn { padding: 13px 20px; font-size: 0.9rem; }
}