@media (max-width: 1199px) {
  .benefit-grid,
  .steps-row,
  .tutor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tutor-grid {
    gap: 20px;
  }

  .detail-shell,
  .become-layout {
    grid-template-columns: 1fr;
  }

  .contact-card {
    position: static;
  }
  .directory-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 20px;
  }
}

@media (max-width: 991px) {
  .shell,
  .detail-shell {
    width: min(var(--shell), calc(100% - 32px));
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 16px;
    left: 16px;
    display: none;
    padding: 18px;
    border: 1px solid rgba(24, 52, 46, 0.08);
    border-radius: 20px;
    background: rgba(255, 253, 249, 0.98);
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .site-nav.is-open {
    display: flex;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .hero-section,
  .hero-content {
    min-height: auto;
  }

  .hero-content {
    padding: 72px 0 110px;
  }

  .hero-stats {
    gap: 28px;
  }

  .directory-layout,
  .detail-hero-shell,
  .become-hero-inner {
    grid-template-columns: 1fr;
  }

  .filter-panel {
    position: static;
    padding: 22px;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-filter-grid {
    display: grid;
  }

  .detail-avatar-wrap {
    width: 180px;
  }

  .detail-avatar {
    width: 180px;
  }
}

@media (max-width: 767px) {
  .section {
    padding: 84px 0;
  }

  .benefit-grid,
  .steps-row,
  .tutor-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .card-actions {
    grid-template-columns: 1fr;
  }

  .directory-map {
    height: 320px;
  }

  .directory-header {
    align-items: start;
    flex-direction: column;
  }

  .avatar-wrap {
    width: 86px;
  }

  .detail-shell {
    margin-top: -20px;
  }

  .detail-card,
  .contact-card,
  .apply-card {
    padding: 28px 24px;
  }
}

@media (max-width: 568px) {
  .brand span,
  .brand-lockup span,
  .compact-brand span,
  .footer-brand span {
    font-size: 1.7rem;
  }

  .hero-content {
    padding: 56px 0 98px;
  }

  .hero-stats {
    flex-direction: column;
    gap: 18px;
  }

  .paper-card,
  .step-card {
    padding: 28px 24px;
  }

  .trust-banner {
    width: 100%;
    padding: 18px 20px;
  }

  .trust-banner span + span {
    padding-left: 0;
    border-left: 0;
  }

  .detail-meta,
  .meta-row {
    gap: 10px;
  }

  .detail-avatar-wrap {
    width: 148px;
  }

  .detail-avatar {
    width: 148px;
    border-radius: 22px;
  }

  .detail-avatar-badge {
    width: 62px;
    height: 62px;
    right: -10px;
    bottom: -12px;
    font-size: 1.4rem;
  }
  
  .tutor-card-top, .stat-strip {
    grid-template-columns: 1fr;
  }
}