@media (max-width: 1024px) {

  /* How it works: 2x2 on tablet */
  .steps {
    grid-template-columns: 1fr 1fr;
  }

  /* Stories + directory: responsive grids handled in success.css / directory.css */

  /* Join page: collapse split layout earlier for comfort */
  .join-layout {
    grid-template-columns: 1fr;
  }
  .join-side {
    padding: 70px 6vw 50px;
  }
  .join-form-col {
    padding: 60px 6vw 80px;
  }
}

@media (max-width: 768px) {

  /* Global spacing */
  section {
    padding: 60px 5vw;
  }

  /* Navigation */
  .nav-links {
    display: none;
  }
  .hamburger {
    display: flex;
  }

  /* Hero */
  .hero-arc {
    display: none;
  }
  .hero-inner {
    padding: 110px 5vw 140px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline {
    width: 100%;
    text-align: center;
  }
  .hero-stat-row {
    left: 5vw;
    right: 5vw;
    bottom: 2rem;
    gap: 1.6rem;
  }
  .hero-stat .number {
    font-size: 1.7rem;
  }

  /* Pre-arrival */
  .prearrival-cards {
    grid-template-columns: 1fr;
  }
  .wa-cta-box {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 2.2rem 1.6rem;
  }
  .wa-cta-box .btn-whatsapp {
    width: 100%;
    justify-content: center;
  }

  /* About */
  .about {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  .about-badge {
    right: 0.8rem;
    bottom: -1rem;
  }

  /* President's message */
  .president {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  .president-visual {
    order: -1;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }
  .president-badge {
    left: 0.8rem;
    bottom: -1rem;
  }

  /* How it works */
  .steps {
    grid-template-columns: 1fr;
  }

  /* City teaser grid handled in hero.css with !important */

  .teaser-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 2.2rem 1.6rem;
  }
  .teaser-banner .btn-primary {
    width: 100%;
    text-align: center;
  }

  /* Founding timeline: vertical */
  .timeline {
    flex-direction: column;
    gap: 2.2rem;
    align-items: center;
  }
  .timeline::before {
    display: none;
  }
  .timeline-phase {
    max-width: 380px;
  }
  .founding-counter {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }
  .founding-counter .count-label {
    text-align: center;
  }
  .founding .btn-primary {
    width: 100%;
    max-width: 380px;
    text-align: center;
  }

  /* Testimonials grid handled in hero.css with !important */
  .testimonial-card {
    min-width: 0;
  }
  }

  /* Social */
  .social-grid {
    grid-template-columns: 1fr;
  }
  .social-card .social-btn {
    width: 100%;
    justify-content: center;
  }

  /* Footer */
  .footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.4rem;
  }
  .footer-nav {
    justify-content: center;
    gap: 1.2rem;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
  }

  /* Subpage heroes */
  .page-hero {
    padding: 120px 5vw 50px;
  }
  .page-hero .btn-outline {
    width: 100%;
    max-width: 380px;
    text-align: center;
  }

  /* Cities page: scrollable pill tabs */
  .city-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.6rem;
    padding: 0.8rem 5vw;
    border-bottom: 1px solid var(--sand-mid);
    scrollbar-width: none;
  }
  .city-tabs::-webkit-scrollbar {
    display: none;
  }
  .city-tab {
    scroll-snap-align: start;
    flex-shrink: 0;
    border: 1.5px solid var(--sand-mid);
    border-radius: 22px;
    background: var(--white);
    padding: 0.6rem 1.3rem;
  }
  .city-tab.active {
    background: var(--indigo);
    border-color: var(--indigo);
    color: var(--sand);
  }

  .city-panels {
    padding: 40px 5vw 30px;
  }
  .city-hero {
    height: 220px;
    margin-bottom: 2.2rem;
  }
  .city-neighborhoods {
    margin: -1rem 0 2rem;
  }
  .city-columns {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .community-note {
    padding: 1.8rem 1.5rem;
    margin: 2.2rem 0;
  }
  .community-note p {
    font-size: 1.05rem;
  }
  .city-wa-box {
    padding: 2.2rem 1.5rem;
  }
  .city-wa-box .btn-whatsapp {
    width: 100%;
    justify-content: center;
  }
  .community-photo-box {
    grid-template-columns: 1fr;
  }
  .community-photo-box img {
    min-height: 220px;
    max-height: 280px;
  }
  .community-photo-text {
    padding: 2rem 1.6rem;
  }
  .community-photo-text .btn-primary {
    width: 100%;
    text-align: center;
  }

  .cities-callout-inner {
    padding: 2.4rem 1.6rem;
  }
  .cities-callout-actions {
    flex-direction: column;
  }
  .cities-callout-actions .btn-primary,
  .cities-callout-actions .btn-outline--dark {
    width: 100%;
    text-align: center;
  }

  /* Events page */
  .events-grid {
    grid-template-columns: 1fr;
  }

  /* Photo gallery */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
  }
  .gallery-item {
    height: 180px;
  }
  .lightbox-prev,
  .lightbox-next {
    width: 44px;
    height: 44px;
  }
  .lightbox-prev { left: 0.7rem; }
  .lightbox-next { right: 0.7rem; }
  .lightbox img {
    max-width: 96vw;
    max-height: 80vh;
  }

  /* Contact page */
  .channel-cards {
    grid-template-columns: 1fr;
  }
  .channel-card .btn-primary,
  .channel-card .btn-whatsapp {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Forms */
  .form-row {
    grid-template-columns: 1fr;
  }

  .story-filterbar {
    padding: 1.1rem 5vw;
  }
  .filter-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.2rem;
  }
  .filter-group::-webkit-scrollbar {
    display: none;
  }
  .story-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 2.2rem 1.6rem;
  }
  .story-cta p {
    font-size: 1.2rem;
  }
  .story-cta .btn-dark {
    width: 100%;
  }

  /* Business directory toolbar */
  .dir-toolbar {
    padding: 0.8rem 5vw;
  }
  .dir-toolbar-row {
    flex-direction: column;
    align-items: stretch;
  }
  .dir-city select {
    width: 100%;
  }
  .dir-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 2.2rem 1.6rem;
  }
  .dir-banner p {
    font-size: 1.2rem;
  }
  .dir-banner .btn-primary {
    width: 100%;
    text-align: center;
  }

  /* Modal */
  .modal {
    padding: 0.8rem;
  }
  .modal-card {
    padding: 2rem 1.4rem;
    max-height: 92vh;
  }

  /* Floating buttons */
  .fab-whatsapp {
    bottom: 1.4rem;
    right: 1.4rem;
    width: 54px;
    height: 54px;
  }
  .scroll-top {
    bottom: 5.4rem;
    right: 1.7rem;
  }

  /* Conference banner (homepage) */
  body.home-conf {
    --conf-banner-h: 118px;
  }

  .conf-banner {
    padding: 0.55rem 5vw;
  }

  .conf-banner-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .conf-banner-left {
    flex-wrap: wrap;
    min-width: 0;
  }

  .conf-banner-title {
    font-size: 0.95rem;
    flex: 1 1 100%;
    padding-left: 1.35rem;
  }

  .conf-banner-right {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .countdown--banner .countdown-blocks {
    justify-content: center;
  }

  .countdown--banner .countdown-num {
    font-size: 1.2rem;
  }

  .conf-banner-btn {
    width: 100%;
    text-align: center;
  }

  /* Featured conference section */
  .conf-featured-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .conf-featured-countdown-wrap {
    order: -1;
  }

  .countdown--featured .countdown-num {
    font-size: 2.4rem;
  }

  .conf-goals {
    grid-template-columns: 1fr;
  }

  .conf-featured-actions {
    flex-direction: column;
  }

  .conf-featured-actions .btn-primary,
  .conf-featured-actions .btn-outline {
    width: 100%;
    text-align: center;
  }

  /* Featured event card (events page) */
  .conf-event-countdown-wrap {
    position: static;
    margin-bottom: 1rem;
    display: inline-block;
  }

  .conf-event-title {
    font-size: 1.55rem;
  }

  .conf-event-goals {
    grid-template-columns: 1fr 1fr;
  }

  .conf-event-actions {
    flex-direction: column;
  }

  .conf-event-actions .btn-primary,
  .conf-event-actions .btn-outline {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {

  section {
    padding: 60px 5vw;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 12vw, 3.4rem);
  }
  .hero-stat-row {
    flex-wrap: wrap;
    gap: 1.1rem 1.8rem;
  }

  .section-title {
    font-size: clamp(1.7rem, 7.5vw, 2.2rem);
  }

  .testimonial-card {
    min-width: 88vw;
    padding: 1.8rem 1.4rem 1.5rem;
  }
  .testimonial-text {
    font-size: 1.05rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-item {
    height: 220px;
  }

  .wa-cta-box p,
  .teaser-banner p {
    font-size: 0.92rem;
  }

  .city-hero h2 {
    font-size: 2rem;
  }

  .place-card {
    padding: 1.2rem 1.2rem;
  }

  .join-side {
    padding: 60px 5vw 40px;
  }
  .join-form-col {
    padding: 50px 5vw 70px;
  }
  .join-quote {
    font-size: 1.1rem;
  }

  .faq-question {
    font-size: 0.88rem;
    padding: 1.1rem 1.2rem;
  }
  .faq-answer-inner {
    padding: 0 1.2rem 1.2rem;
  }

  .form-success {
    padding: 1.8rem 1.4rem;
  }
  .form-success .btn-whatsapp {
    width: 100%;
    justify-content: center;
  }
}