@media (max-width: 768px){
  .hero-title{
    font-size: 2.4rem;
  }
  .principal{
    flex-direction: column;
  }
  .identity{
    grid-template-columns: 1fr;
  }
  .cinematic-gallery{
    height: 420px;
    border-radius: 12px;
  }

  .gallery-nav{
    display: none;
  }
  .gallery-thumb{
    width: 46px;
    height: 46px;
  }
  .gallery-caption{
    font-size: .85rem;
    left: 16px;
    bottom: 70px;
  }
  .student-life-container,
  .admissions-container,
  .contact-container,
  .principal,
  .site-hero{
    flex-direction: column;
  }
  .academics-grid,
  .facilities-grid{
    grid-template-columns: 1fr;
  }
  /* image placeholders -shorter and kufaa kwa simu*/
  .image-placeholder{
    height: 260px;
    border-radius: 14px;
  }
  .history-photo .image-placeholder{
    height: 300px;
  }
  .admissions-photo .image-placeholder,
  .site-hero-image .image-placeholder,
  .academics-photo .image-placeholder,
  .student-life-image .image-placeholder{
    height: 260px;
  }
  .facility-card .image-placeholder{
    height: 180px;
  }

  /* tighter section padding on phones*/
  #about,
  #academics,
  #facilities,
  #student-life,
  #admissions,
  #gallery{
    padding: 60px 6%;
  }

  .about-intro h2,
  .academics-intro h2,
  .facilities-intro h2,
  .student-life-text h2,
  .admissions-content h2,
  .gallery-container h2{
    font-size: 1.8rem;
  }
  /* header - shrink logo/title so it fits one line on phones*/
  .page-header nav{
    padding: 10px 4%;
  }
  .school-logo-header img{
    height: 34px;
    width: 34px;
  }
  .school-name-header h1{
    font-size: .72rem;
    line-height: 1.3;
  }
  /* footer - collapse to one column and tighten padding on phones */
  footer{
    padding: 40px 6% 16px;
  }
  .footer-container{
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }
}

@media (max-width: 480px){
  .gallery-thumbnails{
    gap: 40px;
  }
  .footer-container{
    grid-template-columns: 1fr;
  }
  .hero-title{
    font-size: 1.9rem;
  }
}


/* === MOBILE NAV === */
.menu-toggle{
    display: none;
}

@media (max-width: 900px){
    .page-header nav{
        flex-wrap: wrap;
    }
    .menu{
        display: none;
        width: 100%;
        order: 3;
    }
    .menu.is-open{
        display: block;
    }
    .menu ul{
        flex-direction: column;
        gap: 0;
        padding: 10px 0;
    }
    .menu ul li{
        border-top: 1px solid rgba(255,255,255,.1);
    }
    .menu a{
        display: block;
        padding: 14px 4px;
    }
    .action{
        order: 2;
        margin-left: auto;
    }
    .nav-cta{
        padding: 8px 16px;
        font-size: .8rem;
    }
    .menu-toggle{
        display: block;
        order: 4;
    }
}