/* ===========================================================
   Responsive breakpoints
   =========================================================== */

/* ---- Tablet (<=1024px) ---- */
@media (max-width:1024px){
  .course-grid{ grid-template-columns:repeat(2,1fr); }
  .schedule-grid{ grid-template-columns:repeat(2,1fr); }
  .schedule-card-wide{ grid-column:span 2; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .testimonial-grid{ grid-template-columns:repeat(2,1fr); }
  .masonry{ column-count:2; }
  .about-grid{ grid-template-columns:1fr; }
  .about-image-frame{ max-width:420px; margin:0 auto; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}

/* ---- Nav collapses (<=900px) ---- */
@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .call-toggle{ display:inline-flex; margin-left:auto; }

   
/* Liquid-glass floating pill — emblem, brand name, call button, menu icon */
  .site-header{ background:transparent !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; padding:.9rem 4vw; }
  .site-header.scrolled{ background:transparent !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; padding:.9rem 4vw; }
  .header-inner{
    position:relative; z-index:1;
    gap:.6rem; padding:.5rem .6rem;
    border-radius:999px;
  }
  .header-inner::before{
    content:''; position:absolute; inset:0; z-index:-1;
    border-radius:999px;
    background:
      linear-gradient(135deg, rgba(var(--rgb-fg),.18), rgba(var(--rgb-fg),.03) 45%, rgba(var(--rgb-fg),.10) 100%),
      rgba(var(--rgb-bg),.42);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid rgba(var(--rgb-fg),.22);
    box-shadow:0 10px 30px -12px rgba(var(--rgb-black),.45);
  }
  .brand-mark{ width:34px; height:34px; }
  .brand-name{ font-size:1rem; }
  .call-toggle, .nav-toggle{
    width:38px; height:38px; flex:0 0 auto;
    align-items:center; justify-content:center;
    background:none; border:none; box-shadow:none; padding:0;
  }
  .nav-toggle span{ width:18px; }

   
  .main-nav{
    position:fixed; top:4.6rem; right:4vw; left:auto; bottom:auto;
    width:min(62vw, 260px); height:auto;
    flex-direction:column; align-items:flex-start;
    padding:1.3rem 1.5rem; gap:1rem;
    border-radius:1.4rem;
    background:
      linear-gradient(135deg, rgba(var(--rgb-fg),.18), rgba(var(--rgb-fg),.03) 45%, rgba(var(--rgb-fg),.10) 100%),
      rgba(var(--rgb-bg),.55);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid rgba(var(--rgb-fg),.22);
    box-shadow:0 20px 50px -20px rgba(var(--rgb-black),.5);
    transform-origin:top right;
    transform:scale(.85); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .35s var(--ease), opacity .3s var(--ease), visibility 0s linear .35s;
  }
  .main-nav.open{
    transform:scale(1); opacity:1; visibility:visible; pointer-events:auto;
    transition:transform .35s var(--ease), opacity .3s var(--ease), visibility 0s linear 0s;
  }
  .main-nav ul{ flex-direction:column; gap:1rem; }
  .main-nav a{ font-size:.9rem; }
  .contact-grid{ grid-template-columns:1fr; }
}

/* ---- Mobile (<=640px) ---- */
@media (max-width:640px){
  :root{ --gap-section: 4rem; }
  .section-inner{ padding:0 6.5vw; }
  .hero-logo{ width:138px; height:138px; }
  .hero-title{ letter-spacing:.03em; }
  .about-pillars{ grid-template-columns:1fr; }
  .course-grid{ grid-template-columns:1fr; }
  .schedule-grid{ grid-template-columns:1fr; }
  .schedule-card-wide{ grid-column:span 1; }
  .why-grid{
    display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:1.2rem; margin-top:2.5rem; padding-bottom:1.2rem;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .why-grid::-webkit-scrollbar{ display:none; }
  .why-card{ scroll-snap-align:center; flex:0 0 82%; }
  .testimonial-grid{ grid-template-columns:1fr; }
  .masonry{ column-count:1; }
  .footer-inner{ grid-template-columns:1fr; gap:2rem; padding-bottom:2.5rem; }
  .contact-buttons{ flex-direction:column; }
  .contact-buttons .btn{ width:100%; }
  .back-to-top{ right:1.2rem; bottom:1.2rem; width:44px; height:44px; }
  .brand-sub{ display:none; }
}

/* ---- Small phones ---- */
@media (max-width:380px){
  .hero-title{ font-size:2.2rem; }
  .brand-mark{ width:36px; height:36px; }
}