/* =========================================================
   MOBILE ONLY — phone design inspired by the attached mockup
   PC/DESKTOP IS NOT AFFECTED
   ========================================================= */

@media (max-width: 820px), (max-width: 1024px) and (pointer: coarse){
  :root{
    --m-navy:#071d3a;
    --m-blue:#083b75;
    --m-gold:#d8ad5b;
    --m-bg:#eef9f8;
    --m-card:#ffffff;
    --m-text:#10233f;
    --m-muted:#66758a;
    --m-line:#e7eef5;
    --m-shadow:0 10px 28px rgba(8,59,117,.10);
  }

  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html{scroll-behavior:auto!important;}
  body{
    margin:0!important;
    background:var(--m-bg)!important;
    color:var(--m-text)!important;
    font-size:15px!important;
    line-height:1.45!important;
    overflow-x:hidden!important;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  /* FPS: stop heavy effects only on mobile */
  *,*:before,*:after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .splash:before,.splash:after,.splash-card:before,
  .splash-bg:before,.splash-bg:after,
  .home-photo-bg:before,.home-photo-bg:after,
  .hero:after{display:none!important;}
  .photo-layer{animation:none!important;transform:none!important;filter:none!important;will-change:auto!important;opacity:1!important;}
  .splash-bg .photo-layer:not(:first-child),
  .home-photo-bg .photo-layer:not(:first-child){display:none!important;}
  .quick-card:hover,.card:hover,.news-card:hover{transform:none!important;box-shadow:var(--m-shadow)!important;}

  /* ================= HEADER LIKE MOBILE SCHOOL MOCKUP ================= */
  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
    background:#fff!important;
    box-shadow:0 2px 16px rgba(7,29,58,.12)!important;
  }
  .topbar .header-main{
    display:grid!important;
    grid-template-columns:1fr auto auto!important;
    align-items:center!important;
    gap:10px!important;
    padding:12px 14px!important;
    min-height:72px!important;
    max-width:none!important;
    background:#fff!important;
  }
  .topbar .brand{
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    overflow:hidden!important;
  }
  .topbar .logo{
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    border-radius:50%!important;
    background:#fff!important;
    border:2px solid #d8e4ed!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  .topbar .logo img.logo-img{
    width:100%!important;height:100%!important;object-fit:contain!important;padding:2px!important;background:#fff!important;border-radius:50%!important;
  }
  .topbar .brand-text{min-width:0!important;overflow:hidden!important;}
  .topbar .brand-text strong{
    display:block!important;
    color:var(--m-navy)!important;
    background:none!important;
    text-shadow:none!important;
    font-size:17px!important;
    font-weight:950!important;
    line-height:1!important;
    letter-spacing:-.03em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .topbar .brand-text span{
    display:block!important;
    margin-top:4px!important;
    font-size:10px!important;
    line-height:1!important;
    color:#56667b!important;
    letter-spacing:.08em!important;
  }

  /* Hide heavy desktop controls; keep language as compact round control */
  .search,.cta-top{display:none!important;}
  .lang-switch{
    display:block!important;
    grid-column:2!important;
    grid-row:1!important;
    width:58px!important;
    min-width:58px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    pointer-events:auto!important;
    z-index:1005!important;
  }
  .language-select{
    display:block!important;
    width:58px!important;
    height:40px!important;
    border:1px solid #dce8f2!important;
    border-radius:999px!important;
    background:#fff!important;
    color:var(--m-navy)!important;
    font-size:12px!important;
    font-weight:900!important;
    padding:0 4px!important;
    outline:0!important;
    appearance:auto!important;
    -webkit-appearance:menulist!important;
    pointer-events:auto!important;
  }
  .language-select option{color:#10233f!important;background:#fff!important;}
  .lang-switch button{display:none!important;}

  /* Search icon visual like mockup */
  .topbar .header-main:after{
    content:"⌕";
    grid-column:3;
    grid-row:1;
    width:38px;height:38px;
    display:grid;place-items:center;
    border-radius:50%;
    color:var(--m-navy);
    font-size:28px;font-weight:400;
    background:#fff;
  }

  /* Dark horizontal menu bar */
  .nav-wrap{background:var(--m-navy)!important;}
  .nav-inner{
    min-height:44px!important;
    max-width:none!important;
    padding:0 8px!important;
    display:flex!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  .hamb{
    order:2!important;
    display:grid!important;
    place-items:center!important;
    width:42px!important;height:42px!important;
    flex:0 0 42px!important;
    padding:0!important;
    color:#fff!important;
    font-size:25px!important;
    background:transparent!important;
  }
  .nav{
    order:1!important;
    position:static!important;
    display:flex!important;
    flex:1 1 auto!important;
    gap:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    background:transparent!important;
    box-shadow:none!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .nav::-webkit-scrollbar{display:none!important;}
  .nav a{
    flex:0 0 auto!important;
    padding:14px 9px!important;
    border:0!important;
    background:transparent!important;
    color:rgba(255,255,255,.86)!important;
    font-size:12px!important;
    font-weight:700!important;
    white-space:nowrap!important;
  }
  .nav a.active{color:#fff!important;background:rgba(255,255,255,.12)!important;}
  .map-mini{display:none!important;}

  /* ================= SPLASH ================= */
  .splash{background:#071d3a!important;}
  .splash-card{
    width:calc(100vw - 30px)!important;
    padding:28px 18px 22px!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.14)!important;
    backdrop-filter:none!important;
    box-shadow:0 20px 44px rgba(0,0,0,.25)!important;
  }
  .splash-logo{width:96px!important;height:96px!important;border-radius:50%!important;margin-bottom:12px!important;}
  .splash-logo img.logo-img{width:82px!important;height:82px!important;}
  .splash h1{font-size:26px!important;line-height:1.06!important;}
  .splash p{font-size:14px!important;margin:10px 0 16px!important;}
  .loader{height:6px!important;}

  /* ================= HERO IMAGE LIKE MOCKUP ================= */
  .hero{
    min-height:0!important;
    background:var(--m-navy)!important;
    color:#fff!important;
    overflow:hidden!important;
  }
  .hero:before{
    z-index:1!important;
    background:linear-gradient(180deg,rgba(7,29,58,.05) 0%,rgba(7,29,58,.20) 35%,rgba(7,29,58,.82) 100%)!important;
  }
  .hero-inner{
    display:block!important;
    max-width:none!important;
    padding:0!important;
    min-height:300px!important;
    position:relative!important;
  }
  .hero-copy{
    position:relative!important;
    z-index:3!important;
    min-height:300px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-end!important;
    text-align:center!important;
    padding:42px 18px 28px!important;
  }
  .eyebrow{display:none!important;}
  .hero h1{
    max-width:330px!important;
    margin:0 auto!important;
    color:#fff!important;
    font-size:22px!important;
    line-height:1.08!important;
    letter-spacing:-.02em!important;
    text-transform:uppercase!important;
    text-shadow:0 3px 14px rgba(0,0,0,.45)!important;
  }
  .hero h1 span{color:#fff!important;}
  .hero p{
    max-width:330px!important;
    margin:8px auto 14px!important;
    color:#fff!important;
    font-size:18px!important;
    line-height:1.25!important;
    text-transform:uppercase!important;
    text-shadow:0 3px 14px rgba(0,0,0,.45)!important;
  }
  .hero-actions{width:100%!important;justify-content:center!important;gap:8px!important;}
  .btn{
    width:auto!important;
    min-height:0!important;
    padding:10px 20px!important;
    border-radius:8px!important;
    font-size:13px!important;
    font-weight:900!important;
  }
  .btn-primary{background:var(--m-gold)!important;color:#fff!important;box-shadow:none!important;}
  .btn-outline{display:none!important;}
  .arrow{display:none!important;}
  .video-frame{display:none!important;}

  /* ================= QUICK INFO BLOCKS ================= */
  .quick-section{
    margin:0!important;
    padding:16px 14px!important;
    background:#fff!important;
  }
  .quick-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    max-width:none!important;
    padding:0!important;
  }
  .quick-card{
    min-height:78px!important;
    border:0!important;
    border-radius:10px!important;
    padding:12px!important;
    box-shadow:none!important;
    background:#eef9f8!important;
    display:flex!important;
    align-items:flex-start!important;
    gap:9px!important;
  }
  .quick-card:nth-child(3){grid-column:1 / -1!important;}
  .q-icon{
    width:34px!important;height:34px!important;
    flex:0 0 34px!important;
    font-size:17px!important;
    background:#ccefed!important;
    color:var(--m-navy)!important;
  }
  .quick-card h3{font-size:13px!important;line-height:1.1!important;margin:0 0 4px!important;color:var(--m-navy)!important;}
  .quick-card p{font-size:11px!important;line-height:1.25!important;margin:0!important;color:#526274!important;}

  /* ================= EXPLORE SECTION / CARDS ================= */
  .section{
    max-width:none!important;
    padding:34px 14px!important;
    background:#e9f8f6!important;
  }
  .section-title{
    display:block!important;
    text-align:center!important;
    margin-bottom:16px!important;
  }
  .tag{display:none!important;}
  .section-title h2{
    font-size:22px!important;
    line-height:1.15!important;
    text-transform:uppercase!important;
    color:var(--m-navy)!important;
    margin:0!important;
  }
  .section-title p{display:none!important;}
  .grid-3.dynamic-photo-grid{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:10px!important;
  }
  .dynamic-photo-card{
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
    padding:0!important;
    border-radius:0!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .dynamic-photo-visual{
    height:48px!important;
    border-radius:7px!important;
    background-size:cover!important;
    background-position:center!important;
    box-shadow:0 5px 12px rgba(7,29,58,.12)!important;
  }
  .dynamic-photo-body{
    padding:0!important;
    text-align:center!important;
    position:relative!important;
  }
  .photo-badge{
    position:relative!important;
    top:auto!important;left:auto!important;right:auto!important;
    width:46px!important;height:46px!important;
    margin:-20px auto 8px!important;
    border-radius:50%!important;
    background:#ccefed!important;
    box-shadow:0 4px 10px rgba(7,29,58,.14)!important;
    font-size:20px!important;
  }
  .dynamic-photo-body h3{
    font-size:13px!important;
    line-height:1.1!important;
    margin:0 0 5px!important;
    color:var(--m-navy)!important;
  }
  .dynamic-photo-body p{
    font-size:10.5px!important;
    line-height:1.25!important;
    color:#3e4d5e!important;
    margin:0!important;
    font-weight:500!important;
  }

  /* ================= INNER PAGES CLEAN MOBILE ================= */
  .page-hero{background:linear-gradient(135deg,var(--m-navy),#0b5c85)!important;}
  .page-hero-inner{padding:42px 16px!important;max-width:none!important;}
  .page-hero h1{font-size:27px!important;line-height:1.08!important;letter-spacing:-.03em!important;}
  .page-hero p{font-size:15px!important;line-height:1.55!important;}
  .grid-2,.grid-3:not(.dynamic-photo-grid),.grid-4,.programs,.news-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .card,.contact-card,.strip,.admission-box,.news-card{
    border-radius:16px!important;
    padding:16px!important;
    box-shadow:var(--m-shadow)!important;
    border:1px solid var(--m-line)!important;
    background:#fff!important;
  }
  .news-card{padding:0!important;overflow:hidden!important;}
  .news-img{height:120px!important;}
  .news-body{padding:14px!important;}
  .admission-box{grid-template-columns:1fr!important;gap:14px!important;}
  .admission-box h2{font-size:25px!important;}
  .form-card input,.form-card textarea,.form-card select{padding:12px!important;border-radius:12px!important;}
  .step{grid-template-columns:1fr!important;gap:8px!important;}
  .step-number{width:42px!important;height:42px!important;border-radius:12px!important;}
  .map-box.real-map{height:290px!important;border-radius:16px!important;}
  .map-box.real-map iframe{border-radius:16px!important;}
  .map-note{display:block!important;border-radius:14px!important;}
  .map-note span{display:block!important;text-align:inherit!important;margin-top:4px!important;}

  /* ================= FOOTER ================= */
  footer{margin-top:0!important;background:var(--m-navy)!important;}
  .footer-inner{
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:10px!important;
    max-width:none!important;
    padding:18px 14px!important;
  }
  .footer-inner>div:first-child{display:none!important;}
  .footer-inner h3{font-size:12px!important;margin:0 0 7px!important;color:#fff!important;}
  .footer-inner p,.footer-inner a{font-size:11px!important;line-height:1.35!important;color:rgba(255,255,255,.78)!important;}
  .footer-inner>div{min-width:0!important;}
  .copyright{font-size:11px!important;padding:10px!important;color:rgba(255,255,255,.65)!important;}
  .to-top{display:none!important;}
}

@media (max-width: 390px){
  .topbar .header-main{grid-template-columns:1fr 56px auto!important;padding:10px!important;gap:7px!important;}
  .topbar .logo{width:44px!important;height:44px!important;flex-basis:44px!important;}
  .topbar .brand-text strong{font-size:14px!important;}
  .language-select,.lang-switch{width:56px!important;min-width:56px!important;}
  .nav a{font-size:11px!important;padding:13px 8px!important;}
  .hero-inner,.hero-copy{min-height:278px!important;}
  .hero h1{font-size:20px!important;}
  .hero p{font-size:16px!important;}
  .grid-3.dynamic-photo-grid{gap:7px!important;}
  .dynamic-photo-body h3{font-size:12px!important;}
  .dynamic-photo-body p{font-size:10px!important;}
}