/* ─── Mobile styles (max-width: 768px) ──────────────────────────────────────
   All rules here are scoped to mobile only and do not affect desktop.
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* ── Navigation ─────────────────────────────────────────────────────── */

  /* Fix hamburger menu — JS toggles nav-list--open, CSS had wrong class name */
  .nav-list--open {
    display: flex !important;
  }

  /* Bigger logo text */
  .logo-text {
    font-size: 1.35rem;
  }

  /* Bigger hamburger button */
  .nav-toggle {
    width: 42px;
    height: 42px;
    gap: 0.35rem;
  }

  .nav-toggle span {
    width: 24px;
    height: 2.5px;
  }

  /* Mobile nav dropdown — black background to match header */
  .nav-list {
    background: #000000;
    top: 56px;
  }


  /* ── Hero ───────────────────────────────────────────────────────────── */

  /* Pull hero content up close to the header */
  .hero {
    padding: 0.75rem 0 1rem;
  }

  .hero-content--centered {
    padding: 0.5rem 1.25rem 1rem;
  }

  /* Kicker — smaller so it fits one line */
  .hero-kicker {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }

  /* Trust bar — stack vertically on mobile */
  .hero-trust-bar {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.9rem;
    padding-top: 1rem;
  }

  .trust-divider {
    display: none;
  }


  /* ── Section spacing ────────────────────────────────────────────────── */

  .section-inner {
    padding: 18px 16px 18px;
  }

  .problem-section,
  .how-overview {
    padding-block: 1rem;
  }


  /* ── How It Works steps ─────────────────────────────────────────────── */

  .steps-card {
    padding: 1rem 0.85rem;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    padding: 0.6rem 0.5rem;
    gap: 0.75rem;
  }

  .step-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
    margin-bottom: 0;
  }

  .step-label {
    font-size: 0.6rem;
    margin-top: 0.1rem;
  }

  .step-title {
    font-size: 0.85rem;
    margin-top: 0.2rem;
  }

  /* Hide connector pipes on mobile */
  .steps-grid .step:not(:last-child)::before {
    display: none;
  }


  /* ── Team cards ─────────────────────────────────────────────────────── */

  .team-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .team-card {
    display: flex;
    flex-direction: column;
  }

  .team-info {
    flex: 1;
  }

  .team-photo {
    aspect-ratio: 3/4;
  }

  .team-card:nth-child(2)::before {
    content: '';
    height: 55px;
    background: #000000;
    flex-shrink: 0;
  }

  .team-card:nth-child(2) .team-photo {
    object-position: center 45%;
  }


  /* ── Footer — clear the sticky CTA bar ─────────────────────────────── */

  .site-footer {
    padding-bottom: 5rem;
  }

  /* Mobile sticky CTA — ensure it's visible */
  .mobile-cta-bar {
    display: block;
    background: #000000;
  }

}