/* =========================
   SITE-WIDE RESPONSIVE SYSTEM
   Loaded after all component CSS.
========================= */

:root{
    --site-gutter:clamp(16px,4vw,40px);
    --nav-height:72px;
}

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

body{
    min-width:320px;
    padding:0;
}

img,
video,
iframe{
    max-width:100%;
}

button,
input,
select,
textarea{
    max-width:100%;
    font-family:inherit;
}

section{
    scroll-margin-top:calc(var(--nav-height) + 14px);
}

.container,
.gallery-container{
    width:min(100% - (var(--site-gutter) * 2), 1200px);
    margin-inline:auto;
}

.nav-toggle,
.mobile-apply-btn{
    display:none;
}

.navbar{
    isolation:isolate;
}

.nav-container{
    gap:18px;
}

@media (min-width:1025px){
    body{
        padding-top:var(--nav-height);
    }

    html{
        scroll-padding-top:var(--nav-height);
    }

    .navbar{
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:1000;
    }

    .hero-student-stage img:nth-child(2){
        --student-y:0px;
    }

    .footer-about,
    .footer-links,
    .footer-programs,
    .footer-contact-col,
    .footer-kandk{
        grid-row:1;
    }
}

.primary-btn,
.secondary-btn,
.about-btn,
.program-btn,
.gallery-btn,
.contact-btn,
.submit-btn,
.apply-btn,
.program-apply-btn{
    touch-action:manipulation;
}

.home-frame,
.hero,
.about,
.programs,
.features-section,
.facilities-section,
.gallery-section,
.contact-section,
.footer,
.program-modal,
.management-modal-container,
.popup-form-box,
.form-container{
    max-width:100%;
}

.contact-map iframe{
    min-height:inherit;
}

html.modal-open,
body.modal-open,
body.nav-menu-open{
    overscroll-behavior:none;
}

/* =========================
   <= 1400px
========================= */

@media (max-width:1400px){
    :root{
        --site-gutter:clamp(20px,3vw,34px);
    }

    .footer .container{
        max-width:1240px;
    }

    .footer-wrapper{
        gap:32px;
    }

    .program-modal{
        max-width:calc(100vw - 32px);
    }
}

/* =========================
   <= 1200px
========================= */

@media (max-width:1200px){
    .nav-links{
        gap:24px;
    }

    .logo img{
        width:170px;
    }

    .apply-btn{
        padding:11px 18px;
        border:none;
        cursor:pointer;
        white-space:nowrap;
    }

    .hero-container{
        gap:10px;
    }

    .hero-content h1{
        font-size:clamp(36px,4vw,44px);
        letter-spacing:-1px;
    }

    .circle-bg{
        width:400px;
        height:400px;
        right:10px;
    }

    .hero-student-stage{
        width:410px;
        height:540px;
        right:12px;
    }

    .floating-card{
        min-width:190px;
    }

    .card1{
        right:-18px;
    }

    .card3{
        right:-24px;
    }

    .about-container{
        gap:44px;
    }

    .section-header h2,
    .section-title h2,
    .gallery-section .section-title h2,
    .contact-title h2{
        font-size:clamp(38px,4.2vw,48px);
        letter-spacing:0;
    }

    .programs,
    .features-section,
    .facilities-section{
        padding-inline:0;
    }

    .program-cards{
        gap:22px;
    }

    .program-card{
        min-height:540px;
    }

    .program-content{
        padding-left:34px;
        padding-right:16px;
        width:54%;
    }

    .program-icon{
        left:34px;
    }

    .program-image{
        width:46%;
    }

    .program-btn{
        min-width:180px;
    }

    .features-grid{
        gap:20px;
    }

    .facility-image{
        height:260px;
    }

    .gallery-container{
        width:min(100% - (var(--site-gutter) * 2), 1120px);
    }

    .gallery-grid{
        grid-template-rows:210px 170px 170px;
        gap:14px;
    }

    .contact-wrapper{
        grid-template-columns:1.05fr 0.85fr 1fr;
        gap:30px;
    }

    .footer-wrapper{
        grid-template-columns:
            minmax(190px, 1.25fr)
            minmax(130px, 0.85fr)
            minmax(135px, 0.85fr)
            minmax(165px, 1.05fr)
            minmax(170px, 1fr);
        align-items:flex-start;
    }

    .footer-kandk{
        grid-column:5;
        grid-row:1;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        padding-top:0;
    }

    .footer-programs{
        grid-column:3;
        grid-row:1;
    }

    .footer-contact-col{
        grid-column:4;
        grid-row:1;
    }

    .kandk-logo{
        margin-bottom:15px;
    }

    .management-modal-container{
        max-width:calc(100vw - 32px);
        height:min(720px, calc(100dvh - 32px));
    }
}

/* =========================
   <= 1024px
========================= */

@media (max-width:1024px){
    body{
        padding-top:var(--nav-height);
    }

    html{
        scroll-padding-top:var(--nav-height);
    }

    .navbar{
        position:fixed;
        top:0;
        left:0;
        right:0;
        padding:8px 0;
        z-index:1000;
        background:rgba(255,255,255,0.96);
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
    }

    .nav-container{
        min-height:calc(var(--nav-height) - 16px);
    }

    .home-frame{
        height:auto;
        min-height:0;
        display:block;
        overflow:hidden;
    }

    .hero{
        padding:46px 0 0;
        overflow:hidden;
    }

    .hero-container{
        min-height:auto;
        align-items:center;
    }

    .hero-content{
        max-width:500px;
        flex:0 1 48%;
    }

    .hero-image{
        flex:0 1 52%;
        height:430px;
        min-height:430px;
        overflow:visible;
    }

    .circle-bg{
        width:min(390px,42vw);
        height:min(390px,42vw);
        left:52%;
        right:auto;
        bottom:16px;
        transform:translateX(-50%);
    }

    .hero-student-stage{
        width:min(370px,39vw);
        height:min(505px,53vw);
        left:52%;
        right:auto;
        bottom:0;
        transform:translateX(-50%);
    }

    .card1{
        top:38px;
        right:0;
    }

    .card2{
        left:0;
        top:205px;
    }

    .card3{
        right:0;
        bottom:55px;
    }

    .stats{
        padding:24px 0;
    }

    .stats-container{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:24px 18px;
    }

    .stat-box:nth-child(2)::after{
        display:none;
    }

    .about{
        padding:76px 0;
    }

    .about-container{
        grid-template-columns:1fr;
        gap:42px;
    }

    .about-image{
        max-width:680px;
        margin-inline:auto;
    }

    .about-content{
        max-width:760px;
        margin-inline:auto;
        text-align:center;
    }

    .about-features,
    .about-buttons{
        justify-content:center;
    }

    .programs,
    .features-section,
    .facilities-section,
    .gallery-section,
    .contact-section{
        padding-block:72px;
    }

    .program-cards{
        grid-template-columns:1fr;
        max-width:760px;
        margin-inline:auto;
    }

    .program-card{
        min-height:500px;
    }

    .program-content{
        width:50%;
        padding-left:44px;
    }

    .program-icon{
        left:44px;
    }

    .features-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:760px;
    }

    .facilities-grid{
        gap:22px;
    }

    .facilities-section{
        padding-inline:clamp(32px,5vw,56px);
    }

    .facility-image{
        height:250px;
    }

    .facility-label{
        bottom:14px;
        padding:11px 18px;
    }

    .gallery-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        grid-template-rows:repeat(3,180px);
    }

    .gallery-grid > *{
        grid-column:auto !important;
        grid-row:auto !important;
    }

    .gallery-grid .item3,
    .gallery-grid .item5,
    .gallery-grid .item9{
        grid-row:span 2 !important;
    }

    .gallery-btn-wrap{
        margin-top:32px;
    }

    .contact-wrapper{
        grid-template-columns:1fr 1fr;
        align-items:stretch;
    }

    .contact-map{
        grid-column:1 / -1;
        min-height:340px;
        height:340px;
    }

    .footer-wrapper{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px 24px;
    }

    .footer-about{
        grid-column:1 / -1;
    }

    .footer-links{
        grid-column:1;
        grid-row:2;
        margin-top:-96px;
    }

    .footer-right-stack{
        grid-column:2;
        grid-row:2 / span 2;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }

    .footer-kandk,
    .footer-programs{
        grid-column:2;
        grid-row:auto;
    }

    .footer-contact-col{
        grid-column:1;
        grid-row:3;
    }

    .footer-kandk{
        flex-direction:column;
        align-items:flex-start;
    }

    .program-hero{
        grid-template-columns:1fr;
    }

    .program-hero-right{
        position:absolute;
        top:24px;
        right:24px;
        width:42%;
        min-width:300px;
        opacity:0.28;
    }

    .program-info-grid,
    .program-feature-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .program-feature-grid{
        margin-top:22px;
    }

    .management-modal-overlay{
        align-items:flex-start;
        padding:18px;
        overflow-y:auto;
    }

    .management-modal-container{
        height:auto;
        max-height:none;
        overflow:visible;
        padding:22px;
    }

    .management-modal-body{
        grid-template-columns:1fr;
        height:auto;
    }

    .management-left-panel{
        min-height:340px;
        padding-bottom:210px;
    }

    .management-right-panel{
        padding:4px 4px 0;
    }

    .management-main-message h3,
    .management-paragraphs p{
        max-width:none;
    }

    .management-feature-card,
    .management-author{
        position:static;
        transform:none;
        width:100%;
        margin-top:22px;
    }

    .management-feature-card{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .management-feature-item:not(:last-child)::after{
        display:none;
    }

    .management-author{
        justify-content:center;
    }
}

/* =========================
   <= 992px
========================= */

@media (max-width:1024px){
    .nav-toggle{
        width:44px;
        height:44px;
        border:0;
        border-radius:12px;
        background:#fff5f5;
        color:var(--primary-red);
        display:inline-flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        cursor:pointer;
        flex-shrink:0;
        position:relative;
        z-index:1003;
    }

    .nav-toggle span{
        width:21px;
        height:2px;
        border-radius:999px;
        background:currentColor;
        transition:transform 0.28s ease, opacity 0.2s ease;
    }

    .navbar.nav-open .nav-toggle span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .navbar.nav-open .nav-toggle span:nth-child(2){
        opacity:0;
    }

    .navbar.nav-open .nav-toggle span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    .nav-container > #openFormBtn{
        display:none;
    }

    .nav-container nav{
        position:fixed;
        top:calc(var(--nav-height) + 10px);
        left:var(--site-gutter);
        right:var(--site-gutter);
        z-index:1002;
        padding:18px;
        border-radius:20px;
        background:rgba(255,255,255,0.98);
        box-shadow:0 24px 70px rgba(0,0,0,0.18);
        transform:translateY(-18px) scale(0.98);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:
        transform 0.3s cubic-bezier(0.22,1,0.36,1),
        opacity 0.25s ease,
        visibility 0.25s ease;
        max-height:calc(100dvh - var(--nav-height) - 28px);
        overflow-y:auto;
        overscroll-behavior:contain;
    }

    .navbar.nav-open .nav-container nav{
        transform:translateY(0) scale(1);
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .nav-links{
        display:flex;
        flex-direction:column;
        gap:6px;
    }

    .nav-links a{
        display:flex;
        align-items:center;
        min-height:48px;
        padding:12px 14px;
        border-radius:12px;
        font-size:16px;
    }

    .nav-links a.active,
    .nav-links a:hover{
        background:#fff5f5;
    }

    .nav-links a.active::after{
        display:none;
    }

    .mobile-apply-btn{
        width:100%;
        min-height:48px;
        margin-top:12px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    .hero-container{
        flex-direction:column;
        text-align:center;
        gap:34px;
    }

    .hero-content{
        max-width:720px;
        flex:none;
    }

    .hero-content h1,
    .hero-content p{
        margin-inline:auto;
    }

    .hero-content h1{
        max-width:680px;
        font-size:clamp(34px,6vw,48px);
    }

    .hero-content h2{
        font-size:clamp(24px,4vw,32px);
    }

    .hero-buttons,
    .hero-social{
        justify-content:center;
    }

    .hero-image{
        width:100%;
        max-width:690px;
        height:520px;
        min-height:520px;
        flex:none;
        margin-inline:auto;
    }

    .circle-bg{
        width:min(430px,72vw);
        height:min(430px,72vw);
        left:50%;
        bottom:24px;
    }

    .hero-student-stage{
        width:min(390px,66vw);
        height:min(500px,78vw);
        left:50%;
    }

    .program-card{
        min-height:560px;
    }

    .program-content{
        width:52%;
    }

    .program-image{
        width:48%;
    }

    .section-header p,
    .gallery-section .section-title p{
        font-size:clamp(16px,2.5vw,18px);
    }
}

/* =========================
   <= 768px
========================= */

@media (max-width:768px){
    :root{
        --site-gutter:20px;
        --nav-height:66px;
    }

    .container,
    .gallery-container{
        width:min(100% - 40px, 100%);
        padding-inline:0;
    }

    .logo img{
        width:145px;
    }

    .navbar{
        width:100%;
    }

    .nav-container{
        min-height:50px;
    }

    .hero{
        padding-top:34px;
    }

    .hero-content h1{
        font-size:clamp(30px,8vw,40px);
        line-height:1.16;
        letter-spacing:0;
    }

    .hero-content h2{
        font-size:clamp(22px,5.8vw,28px);
        margin-bottom:12px;
    }

    .hero-content p{
        font-size:15px;
        line-height:1.65;
        max-width:520px;
        margin-bottom:22px;
    }

    .hero-buttons{
        flex-wrap:nowrap;
        gap:10px;
        max-width:360px;
        margin-inline:auto;
        margin-bottom:28px;
    }

    .primary-btn,
    .secondary-btn{
        flex:1 1 0;
        min-width:0;
        min-height:44px;
        padding:10px 14px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-size:14px;
        line-height:1.15;
        text-align:center;
        white-space:nowrap;
    }

    .hero-social{
        flex-direction:column;
        gap:12px;
        margin-top:0;
    }

    .hero-social h4{
        font-size:16px;
    }

    .social-icons a{
        width:40px;
        height:40px;
        font-size:18px;
    }

    .hero-image{
        height:455px;
        min-height:455px;
        max-width:520px;
    }

    .circle-bg{
        width:min(350px,82vw);
        height:min(350px,82vw);
        bottom:34px;
    }

    .circle-bg::before{
        width:calc(100% + 48px);
        height:calc(100% + 48px);
        top:-24px;
        left:-24px;
    }

    .hero-student-stage{
        width:min(315px,74vw);
        height:min(410px,96vw);
        bottom:0;
    }

    .hero-student-stage img{
        --student-y:0px;
    }

    .hero-student-stage img:nth-child(2),
    .hero-student-stage img:nth-child(4){
        --student-y:0px;
    }

    .floating-card{
        min-width:126px;
        padding:8px 10px;
        border-radius:14px;
        gap:8px;
        text-align:left;
    }

    .card-icon{
        width:30px;
        height:30px;
        font-size:13px;
        border-radius:10px;
    }

    .card-content h4,
    .card-content p{
        font-size:11px;
        text-align:left;
        line-height:1.2;
    }

    .card1{
        top:52px;
        left:4px;
        right:auto;
    }

    .card2{
        left:auto;
        right:18px;
        top:170px;
    }

    .card3{
        left:8px;
        right:auto;
        bottom:58px;
    }

    .stats-container{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px;
    }

    .stat-box{
        flex-direction:column;
        gap:8px;
        text-align:center;
    }

    .stat-box::after{
        display:none;
    }

    .stat-box h3{
        font-size:24px;
    }

    .about,
    .programs,
    .features-section,
    .facilities-section,
    .gallery-section,
    .contact-section{
        padding-block:58px;
    }

    .about-container{
        gap:34px;
    }

    .about-image{
        width:100%;
        max-width:520px;
        margin-inline:auto;
    }

    .about-image img{
        width:100%;
        border-radius:18px;
        height:240px;
        min-height:0;
        object-fit:cover;
    }

    .experience-card{
        left:14px;
        bottom:14px;
        width:132px;
        padding:16px 12px;
        border-radius:20px;
    }

    .experience-card i{
        width:46px;
        height:46px;
        font-size:22px;
        margin-bottom:10px;
    }

    .experience-card h3{
        font-size:28px;
    }

    .experience-card p{
        font-size:12px;
        line-height:1.45;
    }

    .about-content h2{
        font-size:clamp(28px,7vw,36px);
    }

    .about-content p{
        font-size:15px;
        line-height:1.75;
        margin-bottom:24px;
    }

    .about-features{
        flex-direction:column;
        align-items:stretch;
        gap:14px;
    }

    .feature-item{
        justify-content:flex-start;
        min-height:58px;
        padding:10px 12px;
        border:1px solid #f1f1f1;
        border-radius:14px;
        background:#fff;
        gap:10px;
    }

    .feature-item i{
        width:38px;
        height:38px;
        border-radius:12px;
        font-size:17px;
        flex:0 0 auto;
    }

    .feature-item span{
        white-space:nowrap;
        line-height:1.2;
    }

    .about-btn{
        width:100%;
        justify-content:center;
        padding:14px 18px;
        gap:12px;
    }

    .section-header{
        margin-bottom:30px;
    }

    .section-header h2,
    .section-title h2,
    .gallery-section .section-title h2,
    .contact-title h2{
        font-size:clamp(30px,8vw,40px);
        line-height:1.15;
    }

    .section-title{
        margin-bottom:34px;
    }

    .program-card{
        min-height:0;
        display:flex;
        flex-direction:column;
        border-radius:16px;
    }

    .program-number{
        width:74px;
        height:60px;
        font-size:28px;
        border-radius:0 0 30px 0;
    }

    .program-content{
        width:100%;
        height:auto;
        padding:120px 24px 28px;
        order:1;
    }

    .program-icon{
        top:66px;
        left:24px;
        width:52px;
        height:52px;
    }

    .program-icon i{
        font-size:24px;
    }

    .program-content h3{
        font-size:21px;
    }

    .program-content h3 span,
    .program-content .plus{
        font-size:27px;
    }

    .program-content p{
        max-width:none;
        line-height:1.7;
    }

    .program-btn{
        width:100%;
        max-width:260px;
        min-width:0;
    }

    .program-image{
        position:relative;
        width:100%;
        height:280px;
        order:2;
        overflow:hidden;
    }

    .shape-bg{
        right:4%;
        bottom:-165px;
        width:230px;
        height:450px;
    }

    .program-image img{
        right:50%;
        transform:translateX(50%);
        width:min(250px,56%);
    }

    .features-grid,
    .facilities-grid,
    .contact-wrapper{
        grid-template-columns:1fr;
    }

    .feature-card{
        min-height:auto;
        padding:24px 20px;
        border-radius:18px;
    }

    .feature-card .feature-icon{
        width:66px;
        height:66px;
        font-size:25px;
    }

    .facilities-grid{
        margin-top:34px;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .facilities-section{
        padding-inline:24px;
    }

    .facility-image{
        height:160px;
    }

    .facility-label{
        left:50%;
        right:auto;
        bottom:8px;
        transform:translateX(-50%);
        max-width:calc(100% - 18px);
        min-width:0;
        width:max-content;
        white-space:nowrap;
        justify-content:center;
        text-align:center;
        padding:9px 14px;
        gap:6px;
        border-radius:10px;
    }

    .facility-label i{
        font-size:14px;
    }

    .facility-label span{
        font-size:12px;
        line-height:1;
    }

    .gallery-section .section-title p{
        margin-top:18px;
    }

    .gallery-line{
        margin-top:24px;
    }

    .gallery-grid{
        margin-top:38px;
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-auto-rows:170px;
        grid-template-rows:none;
        gap:12px;
    }

    .gallery-grid .item3,
    .gallery-grid .item9{
        grid-row:span 1 !important;
    }

    .gallery-grid .gallery-item:nth-child(5){
        grid-column:1 / -1 !important;
        grid-row:span 1 !important;
    }

    .gallery-btn-wrap{
        margin-top:34px;
    }

    .gallery-btn{
        padding:14px 22px;
        font-size:15px;
    }

    .contact-title{
        margin-bottom:34px;
        text-align:center;
    }

    .contact-form-box .form-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .contact-form-box input,
    .contact-form-box textarea{
        min-height:50px;
        padding:15px 16px;
        font-size:16px;
    }

    .contact-btn{
        width:100%;
        min-height:50px;
    }

    .contact-info{
        gap:18px;
    }

    .info-item{
        padding:16px;
        border:1px solid #f0f0f0;
        border-radius:16px;
        background:#fff;
    }

    .contact-map{
        min-height:300px;
        height:300px;
    }

    .footer{
        padding-top:42px;
    }

    .footer .container{
        padding-inline:20px;
    }

    .footer-wrapper{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px 18px;
        padding-bottom:34px;
    }

    .footer-about{
        grid-column:1 / -1;
        grid-row:1;
    }

    .footer-links{
        grid-column:1;
        grid-row:2;
        margin-top:0;
    }

    .footer-right-stack{
        grid-column:2;
        grid-row:2 / span 2;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .footer-kandk,
    .footer-programs{
        grid-column:2;
        grid-row:auto;
    }

    .footer-contact-col{
        grid-column:1;
        grid-row:3;
    }

    .footer-col h4{
        margin-bottom:18px;
    }

    .footer-col ul li{
        margin-bottom:12px;
    }

    .kandk-logo{
        width:130px;
        margin-bottom:12px;
    }

    .kandk-title{
        font-size:18px;
        line-height:1.35;
    }

    .footer-text{
        max-width:none;
    }

    .footer-bottom-wrapper{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-bottom-links{
        grid-column:1;
        grid-row:auto;
        justify-content:center;
        gap:18px;
        flex-wrap:wrap;
    }

    .program-modal-overlay,
    .popup-overlay{
        align-items:flex-start;
        padding:10px;
        overflow-y:auto;
    }

    .program-modal{
        max-height:none;
        border-radius:20px;
        padding:22px 16px 18px;
    }

    .program-modal-close,
    .management-modal-close{
        top:12px;
        right:12px;
        width:44px;
        height:44px;
    }

    .program-hero-left{
        padding-top:38px;
    }

    .program-hero-right{
        display:none;
    }

    .program-main-title{
        font-size:clamp(36px,11vw,44px);
    }

    .program-info-grid,
    .program-feature-grid,
    .course-grid,
    .course-card-inner,
    .management-feature-card{
        grid-template-columns:1fr;
    }

    .program-info-card,
    .program-feature-card,
    .course-card{
        border-radius:15px;
    }

    .course-column + .course-column{
        border-left:0;
        border-top:1px solid #eeeeee;
        padding-left:0;
        padding-top:16px;
    }

    .program-apply-wrapper{
        justify-content:center;
    }

    .program-apply-btn{
        width:100%;
        max-width:320px;
    }

    .management-modal-container{
        border-radius:20px;
        padding:16px;
    }

    .management-left-panel{
        min-height:300px;
        padding:30px 16px 185px;
        border-radius:16px;
    }

    .management-title{
        font-size:clamp(26px,8vw,34px);
    }

    .management-main-message h3{
        font-size:16px;
        line-height:1.75;
    }

    .management-paragraphs p{
        font-size:13px;
        line-height:1.8;
    }

    .management-feature-card{
        padding:16px;
        gap:18px;
    }

    .popup-form-box{
        width:100%;
        height:calc(100dvh - 20px);
        border-radius:18px;
    }

    .close-popup{
        top:10px;
        right:10px;
        width:40px;
        height:40px;
    }

    .form-container{
        border-radius:0;
        padding:28px 20px;
        box-shadow:none;
    }

    .form-header h2{
        font-size:clamp(28px,8vw,36px);
    }

    .form-row{
        grid-template-columns:1fr;
        gap:16px;
        margin-bottom:16px;
    }

    .form-section{
        padding-top:28px;
    }

    .form-section h2{
        font-size:22px;
        line-height:1.25;
    }

    .form-section h3{
        font-size:18px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea{
        min-height:50px;
        padding:14px 15px;
        font-size:16px;
        border-radius:12px;
    }

    .photo-box{
        width:132px;
        height:132px;
    }

    .checkbox-group{
        align-items:flex-start;
    }

    .submit-btn{
        width:100%;
        min-height:52px;
    }
}

/* =========================
   <= 576px
========================= */

@media (max-width:576px){
    :root{
        --site-gutter:16px;
    }

    .container,
    .gallery-container{
        width:calc(100% - 32px);
    }

    .nav-container nav{
        left:12px;
        right:12px;
        border-radius:18px;
    }

    .hero-content h1{
        max-width:360px;
    }

    .hero-content p{
        max-width:360px;
    }

    .hero-buttons{
        flex-direction:row;
        align-items:center;
        max-width:330px;
        gap:8px;
    }

    .primary-btn,
    .secondary-btn{
        width:auto;
        padding-inline:10px;
        font-size:13px;
    }

    .hero-image{
        height:410px;
        min-height:410px;
    }

    .floating-card{
        min-width:116px;
        padding:8px 9px;
        gap:7px;
    }

    .card1{
        top:78px;
        left:0;
        right:auto;
    }

    .card2{
        left:auto;
        right:18px;
        top:168px;
    }

    .card3{
        left:0;
        right:auto;
        bottom:44px;
    }

    .stats-container{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px 14px;
    }

    .stat-box{
        flex-direction:column;
        justify-content:center;
        text-align:center;
        max-width:none;
        margin-inline:0;
        width:100%;
        gap:8px;
    }

    .stat-box i{
        font-size:24px;
    }

    .stat-box h3{
        font-size:23px;
        margin-bottom:2px;
    }

    .stat-box p{
        font-size:12px;
        line-height:1.3;
    }

    .about,
    .programs,
    .features-section,
    .facilities-section,
    .gallery-section,
    .contact-section{
        padding-block:46px;
    }

    .section-tag,
    .section-title span,
    .contact-title span,
    .gallery-section .section-title span{
        font-size:12px;
        letter-spacing:1.5px;
    }

    .about-image img{
        width:100%;
        height:190px;
        min-height:0;
    }

    .experience-card{
        width:106px;
        padding:12px 9px;
        border-radius:18px;
    }

    .experience-card i{
        width:38px;
        height:38px;
        font-size:18px;
        margin-bottom:8px;
    }

    .experience-card h3{
        font-size:24px;
        margin-bottom:6px;
    }

    .experience-card p{
        font-size:10px;
        line-height:1.35;
    }

    .about-features{
        flex-direction:row;
        align-items:stretch;
        gap:6px;
        margin-bottom:28px;
    }

    .feature-item{
        flex:1 1 0;
        min-width:0;
        min-height:42px;
        padding:7px 5px;
        border-radius:10px;
        gap:4px;
        justify-content:center;
    }

    .feature-item i{
        width:24px;
        height:24px;
        border-radius:8px;
        font-size:11px;
    }

    .feature-item span{
        font-size:9px;
        white-space:nowrap;
        line-height:1;
    }

    .program-content{
        padding:112px 18px 24px;
    }

    .program-image{
        height:235px;
    }

    .program-btn{
        max-width:none;
    }

    .program-card{
        min-height:220px;
        display:flex;
        flex-direction:row;
        align-items:stretch;
        border-radius:14px;
    }

    .program-number{
        width:46px;
        height:38px;
        font-size:18px;
        border-radius:0 0 18px 0;
    }

    .program-content{
        width:58%;
        min-width:0;
        padding:56px 8px 12px 14px;
        order:1;
        height:auto;
    }

    .program-icon{
        top:12px;
        left:56px;
        width:34px;
        height:34px;
    }

    .program-icon i{
        font-size:16px;
    }

    .program-content h3{
        gap:2px;
        font-size:15px;
        line-height:1.05;
        margin:0 0 7px;
        letter-spacing:0;
    }

    .program-content h3 span,
    .program-content .plus{
        font-size:18px;
        margin-bottom:1px;
    }

    .program-line{
        width:28px;
        height:2px;
        margin-bottom:8px;
    }

    .program-content p{
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        font-size:11px;
        line-height:1.35;
        margin-bottom:8px;
        max-width:none;
    }

    .program-content ul{
        display:none;
    }

    .program-btn{
        min-width:0;
        width:auto;
        max-width:142px;
        min-height:34px;
        padding:6px 6px 6px 12px;
        gap:8px;
        font-size:10px;
        margin-top:0;
    }

    .program-btn span{
        width:24px;
        height:24px;
        font-size:10px;
        flex:0 0 auto;
    }

    .program-image{
        position:relative;
        right:auto;
        bottom:auto;
        width:42%;
        height:auto;
        min-height:220px;
        order:2;
        align-self:stretch;
        overflow:hidden;
    }

    .shape-bg{
        right:-74px;
        bottom:-145px;
        width:168px;
        height:360px;
        border-radius:54px;
    }

    .program-image img{
        right:-16px;
        bottom:0;
        width:auto;
        height:100%;
        max-height:100%;
        max-width:none;
        object-fit:contain;
        transform:none;
    }

    .features-grid{
        margin-top:24px;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .feature-card{
        min-height:150px;
        padding:16px 10px;
        border-radius:14px;
    }

    .feature-card .feature-icon{
        width:46px;
        height:46px;
        margin-bottom:10px;
        font-size:18px;
    }

    .feature-card h3{
        font-size:13px;
        line-height:1.25;
        margin-bottom:6px;
    }

    .feature-card p{
        font-size:11px;
        line-height:1.45;
        max-width:130px;
    }

    .facilities-grid{
        gap:10px;
    }

    .facilities-section{
        padding-inline:22px;
    }

    .facility-card{
        border-radius:12px;
    }

    .facility-image{
        height:126px;
    }

    .facility-label{
        left:6px;
        right:6px;
        bottom:6px;
        transform:none;
        max-width:none;
        width:auto;
        padding:7px 5px;
        gap:5px;
        border-radius:9px;
    }

    .facility-label i{
        font-size:11px;
    }

    .facility-label span{
        font-size:9px;
    }

    .gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-auto-rows:150px;
    }

    .info-item{
        gap:12px;
        padding:14px;
    }

    .info-icon{
        width:44px;
        height:44px;
    }

    .footer-logo img{
        width:160px;
    }

    .footer-wrapper{
        gap:14px 14px;
    }

    .footer-col h4{
        font-size:15px;
        margin-bottom:14px;
    }

    .footer-col ul li{
        margin-bottom:10px;
    }

    .footer-col ul li a,
    .footer-contact li{
        font-size:12px;
        line-height:1.55;
    }

    .footer-contact li{
        gap:8px;
    }

    .footer-contact li i{
        font-size:12px;
        margin-top:4px;
    }

    .kandk-logo{
        width:118px;
        margin-bottom:10px;
    }

    .kandk-text{
        font-size:11px;
        margin-bottom:4px;
    }

    .kandk-title{
        font-size:14px;
        line-height:1.35;
    }

    .footer-socials{
        flex-wrap:wrap;
    }

    .footer-bottom-links{
        flex-direction:row;
        flex-wrap:nowrap;
        gap:14px;
    }

    .footer-bottom-links a{
        font-size:12px;
        white-space:nowrap;
    }

    .footer-credit{
        justify-content:center;
        gap:2px;
        font-size:12px;
        line-height:1.2;
    }

    .dn-logo-wrap{
        padding:5px 6px;
    }

    .footer-credit-logo{
        width:116px;
    }

    .about-container{
        width:calc(100% - 44px);
        margin-inline:auto;
        padding-inline:0;
    }

    .about-content,
    .about-image{
        max-width:100%;
        min-width:0;
    }

    .program-main-desc{
        font-size:14px;
        line-height:1.6;
    }

    .program-info-card{
        align-items:flex-start;
    }

    .feature-top{
        display:grid;
        grid-template-columns:38px minmax(0,1fr);
        align-items:center;
        column-gap:12px;
        margin-bottom:12px;
    }

    .feature-icon{
        width:38px;
        height:38px;
    }

    .feature-top h3{
        margin:0;
        line-height:1.2;
        transform:translateY(-8px);
    }

    .course-structure-title{
        align-items:flex-start;
    }

    .program-apply-wrapper{
        justify-content:center;
        margin-top:18px;
    }

    .program-apply-btn{
        width:min(100%, 236px);
        height:48px;
        padding:0 6px 0 20px;
        gap:12px;
        justify-content:space-between;
    }

    .program-apply-btn span{
        width:36px;
        height:36px;
    }

    .management-logo{
        width:78px;
    }

    .management-left-panel{
        padding-bottom:160px;
    }

    .management-image-wrap{
        height:50%;
    }

    .management-author{
        justify-content:flex-start;
    }

    .form-container{
        padding:24px 16px;
    }

    .form-header{
        margin-bottom:28px;
    }

    .declaration-box{
        padding:16px;
    }
}

/* =========================
   577px - 1024px TABLET FOOTER
========================= */

@media (min-width:577px) and (max-width:1024px){
    .stats-container{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:26px 34px;
    }

    .stat-box{
        display:grid;
        grid-template-columns:32px minmax(150px, max-content);
        align-items:center;
        justify-content:center;
        gap:14px;
        text-align:left;
    }

    .stat-box i{
        width:32px;
        text-align:center;
    }

    .stat-box h3,
    .stat-box p{
        text-align:left;
    }

    .stat-box h3{
        margin-bottom:4px;
    }

    .footer-wrapper{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px 24px;
        align-items:start;
    }

    .footer-about{
        grid-column:1;
        grid-row:1;
    }

    .footer-right-stack{
        grid-column:2;
        grid-row:1;
        align-self:start;
    }

    .footer-links{
        grid-column:1;
        grid-row:2;
    }

    .footer-contact-col{
        grid-column:2;
        grid-row:2;
    }

    .hero-student-stage img:nth-child(2),
    .hero-student-stage img:nth-child(4){
        --student-y:0px;
    }

    .program-image img{
        right:-24px;
        transform:none;
    }

    .program-btn{
        width:auto;
        min-width:168px;
        max-width:190px;
        padding:8px 8px 8px 16px;
        gap:10px;
        align-self:flex-start;
    }
}

/* =========================
   <= 480px
========================= */

@media (max-width:480px){
    .logo img{
        width:126px;
    }

    .nav-toggle{
        width:40px;
        height:40px;
    }

    .hero{
        padding-top:28px;
    }

    .hero-content h1{
        font-size:29px;
    }

    .hero-content h2{
        font-size:21px;
    }

    .hero-image{
        height:360px;
        min-height:360px;
    }

    .circle-bg{
        width:min(300px,82vw);
        height:min(300px,82vw);
        bottom:32px;
    }

    .hero-student-stage{
        width:min(270px,76vw);
        height:min(360px,100vw);
    }

    .floating-card{
        min-width:108px;
        gap:7px;
        padding:7px 8px;
    }

    .card-icon{
        width:27px;
        height:27px;
        font-size:12px;
    }

    .card-content h4,
    .card-content p{
        font-size:10px;
    }

    .card1{
        top:80px;
        left:-2px;
        right:auto;
    }

    .card2{
        right:14px;
        top:148px;
    }

    .card3{
        left:-2px;
        right:auto;
        bottom:36px;
    }

    .section-header h2,
    .section-title h2,
    .gallery-section .section-title h2,
    .contact-title h2{
        font-size:29px;
    }

    .section-header p,
    .gallery-section .section-title p,
    .about-content p{
        font-size:14px;
    }

    .program-number{
        width:64px;
        height:52px;
        font-size:24px;
    }

    .program-icon{
        left:76px;
        width:48px;
        height:48px;
    }

    .program-content h3 span,
    .program-content .plus{
        font-size:24px;
    }

    .program-image{
        height:215px;
    }

    .feature-card,
    .info-item,
    .program-feature-card,
    .course-card{
        border-radius:14px;
    }

    .facility-label{
        left:14px;
        right:14px;
        transform:none;
        width:auto;
    }

    .gallery-grid{
        grid-auto-rows:200px;
    }

    .contact-map{
        height:260px;
        min-height:260px;
    }

    .program-modal,
    .management-modal-container,
    .popup-form-box{
        border-radius:16px;
    }

    .program-modal{
        padding-inline:14px;
    }

    .program-main-title{
        font-size:34px;
    }

    .program-info-card{
        padding:10px;
    }

    .feature-top{
        display:grid;
        grid-template-columns:38px minmax(0,1fr);
        align-items:center;
        column-gap:12px;
        margin-bottom:12px;
    }

    .feature-icon{
        width:38px;
        height:38px;
    }

    .feature-top h3{
        margin:0;
        line-height:1.2;
        transform:translateY(-8px);
    }

    .program-apply-wrapper{
        justify-content:center;
        margin-top:18px;
    }

    .program-apply-btn{
        width:min(100%, 236px);
        height:48px;
        padding:0 6px 0 20px;
        font-size:15px;
        gap:12px;
        justify-content:space-between;
    }

    .program-apply-btn span{
        width:36px;
        height:36px;
    }

    .management-short-text{
        line-height:1.75;
    }

    .form-group label{
        font-size:14px;
    }

    input[type="file"]{
        font-size:13px;
    }
}

/* =========================
   <= 360px
========================= */

@media (max-width:360px){
    .container,
    .gallery-container{
        width:calc(100% - 24px);
    }

    .facilities-section{
        padding-inline:16px;
    }

    .nav-container nav{
        left:8px;
        right:8px;
        padding:14px;
    }

    .logo img{
        width:116px;
    }

    .hero-content h1{
        font-size:26px;
    }

    .hero-content h2{
        font-size:19px;
    }

    .hero-content p{
        font-size:13px;
    }

    .hero-buttons{
        max-width:304px;
        gap:7px;
    }

    .primary-btn,
    .secondary-btn{
        min-height:40px;
        padding-inline:8px;
        font-size:12px;
    }

    .hero-image{
        height:330px;
        min-height:330px;
    }

    .circle-bg{
        width:260px;
        height:260px;
    }

    .hero-student-stage{
        width:236px;
        height:320px;
    }

    .floating-card{
        transform:scale(0.88);
        transform-origin:center;
    }

    .card1{
        top:78px;
        left:-4px;
        right:auto;
    }

    .card2{
        left:auto;
        right:10px;
        top:138px;
    }

    .card3{
        left:-4px;
        right:auto;
        bottom:30px;
    }

    .stats-container{
        gap:20px 10px;
    }

    .about-image{
        width:100%;
        max-width:300px;
    }

    .about-image img{
        width:100%;
        height:170px;
        border-radius:14px;
    }

    .experience-card{
        width:94px;
        left:8px;
        bottom:8px;
        padding:10px 8px;
        border-radius:16px;
    }

    .experience-card i{
        width:32px;
        height:32px;
        font-size:15px;
        margin-bottom:6px;
    }

    .experience-card h3{
        font-size:21px;
    }

    .experience-card p{
        font-size:9px;
    }

    .feature-item{
        min-height:38px;
        padding:6px 4px;
        gap:3px;
    }

    .feature-item i{
        width:21px;
        height:21px;
        font-size:10px;
    }

    .feature-item span{
        font-size:8px;
    }

    .stat-box{
        gap:7px;
    }

    .stat-box i{
        font-size:22px;
    }

    .stat-box h3{
        font-size:21px;
    }

    .stat-box p{
        font-size:11px;
    }

    .section-header h2,
    .section-title h2,
    .gallery-section .section-title h2,
    .contact-title h2{
        font-size:26px;
    }

    .program-content{
        padding-inline:14px;
    }

    .program-image{
        height:195px;
    }

    .features-grid{
        gap:10px;
    }

    .feature-card{
        min-height:138px;
        padding:14px 8px;
        border-radius:12px;
    }

    .feature-card .feature-icon{
        width:40px;
        height:40px;
        font-size:16px;
        margin-bottom:8px;
    }

    .feature-card h3{
        font-size:12px;
    }

    .feature-card p{
        font-size:10px;
        line-height:1.4;
    }

    .gallery-grid{
        grid-auto-rows:180px;
    }

    .facility-image{
        height:112px;
    }

    .facility-label{
        padding:6px 4px;
        gap:4px;
    }

    .facility-label i{
        font-size:10px;
    }

    .facility-label span{
        font-size:8px;
    }

    .contact-form-box input,
    .contact-form-box textarea,
    .form-group input,
    .form-group select,
    .form-group textarea{
        padding-inline:12px;
    }

    .management-left-panel{
        padding-inline:12px;
    }

    .management-feature-card{
        padding-inline:12px;
    }
}

/* =========================
   TOUCH + MOTION TUNING
========================= */

@media (hover:none){
    .program-card:hover,
    .feature-card:hover,
    .facility-card:hover,
    .gallery-btn:hover,
    .contact-btn:hover,
    .submit-btn:hover,
    .about-btn:hover,
    .primary-btn:hover,
    .secondary-btn:hover{
        transform:none;
    }
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:0.01ms !important;
    }
}